Signed-off-by: 不吃茄子的阿宝 <528046418@qq.com>

api/system.js

@@ -77,4 +77,7 @@ export function selectGroupUser() {
 }
 export function selectGroupAllUser() {
   return request({url: '/group/user/select/all'})
+}
+export function getVideoInfo(cameraId){
+  return request({url:`/camera/view/${cameraId}`})
 }

components/CameraModal.vue

@@ -0,0 +1,71 @@
+<template>
+	<uni-popup ref="cameraPopup" type="center">
+		<view class="video-container">
+			<view class="title">
+				<uni-section type="line"  :title="title">
+					<template v-slot:right>
+						<uni-icons type="closeempty" size="24" color="#999" @click="close"></uni-icons>
+					</template>		
+				</uni-section>
+			</view>
+			<live-player
+			  :src="videoSrc" 
+			  class="video"
+			  autoplay
+			  @statechange="statechange"
+			  @error="error"
+			  style="width: 100%; height: 225px;"
+			/>
+		</view>
+	</uni-popup>
+</template>
+
+<script>
+	export default {
+		name:"CameraModal",
+		data() {
+			return {
+				title:"",
+				videoSrc:""
+			};
+		},
+		methods:{
+			show({title,src}){
+				this.videoSrc=src
+				this.title=title;
+				this.$refs.cameraPopup.open('center')
+			},
+			close(){
+				this.videoSrc=""
+				this.title="";
+				this.$refs.cameraPopup.close()
+			},
+			statechange(e){
+				console.log('live-player code:', e.detail.code)
+			},
+			error(e){
+				console.error('live-player error:', e.detail.errMsg)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.video-container{
+		width: 750rpx;
+		height: 100vh;
+		display: flex;
+		// justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		background-color: #fff;
+		.title{
+			width: 100%;
+			height: 10vh;
+		}
+		.video{
+			display: block;
+			width: 100%;
+		}
+	}
+</style>

packageA/pages/disaster/components/Detail.vue

@@ -1,44 +1,52 @@
 <template>
-	<uni-popup ref="popup" type="top">
-		<uni-section type="line"  :title="type==='dl'?'地质灾害点详情':'水库淤堤坝详情'">
-			<template v-slot:right>
-				<uni-icons type="closeempty" size="24" color="#999" @click="close"></uni-icons>
-			</template>		
-		</uni-section>
-		<view class="detail-cont">
-			<uni-list v-if="type==='dl'">
-				<uni-list-item title="地质灾害点名称" :rightText="viewData.dlName"></uni-list-item>
-				<uni-list-item title="地理位置" :rightText="viewData.dlAddress"></uni-list-item>
-				<uni-list-item title="灾害类别" :rightText="viewData.disasterCatTitle"></uni-list-item>
-				<uni-list-item title="规模等级" :rightText="viewData.disasterLevelTitle"></uni-list-item>
-				<uni-list-item title="威胁人数" :rightText="viewData.dlPeopleNum"></uni-list-item>
-				<uni-list-item title="威胁房屋" :rightText="viewData.dlHouseNum"></uni-list-item>		
-				<uni-list-item title="备注" :note="viewData.remark"></uni-list-item>														
-			</uni-list>	
-			<uni-list v-if="type==='rd'">
-				<uni-list-item title="监管单位" :rightText="viewData.groupName"></uni-list-item>
-				<uni-list-item title="水库堤坝名称" :rightText="viewData.rdName"></uni-list-item>
-				<uni-list-item title="地址" :rightText="viewData.rdAddress"></uni-list-item>
-				<uni-list-item title="责任人" :rightText="viewData.respName"></uni-list-item>
-				<uni-list-item title="责任人电话" :rightText="viewData.respPhone"></uni-list-item>
-				<uni-list-item title="描述" :note="viewData.remark"></uni-list-item>															
-			</uni-list>	
-			<view class="camerasbox">
-				<view class="item" v-for="item in cameras" :key="item.cameraId">
-					<view class="item-card">
-						<view class="title" v-if="item.cameraTitle">{{item.cameraTitle}}</view>
-						<uni-icons type="videocam-filled" size="40" color="#999" @click="showCamera"></uni-icons>
+	<view class="detail">
+		<uni-popup ref="popup" type="top">
+			<uni-section type="line"  :title="type==='dl'?'地质灾害点详情':'水库淤堤坝详情'">
+				<template v-slot:right>
+					<uni-icons type="closeempty" size="24" color="#999" @click="close"></uni-icons>
+				</template>		
+			</uni-section>
+			<view class="detail-cont">
+				<uni-list v-if="type==='dl'">
+					<uni-list-item title="地质灾害点名称" :rightText="viewData.dlName"></uni-list-item>
+					<uni-list-item title="地理位置" :rightText="viewData.dlAddress"></uni-list-item>
+					<uni-list-item title="灾害类别" :rightText="viewData.disasterCatTitle"></uni-list-item>
+					<uni-list-item title="规模等级" :rightText="viewData.disasterLevelTitle"></uni-list-item>
+					<uni-list-item title="威胁人数" :rightText="viewData.dlPeopleNum"></uni-list-item>
+					<uni-list-item title="威胁房屋" :rightText="viewData.dlHouseNum"></uni-list-item>		
+					<uni-list-item title="备注" :note="viewData.remark"></uni-list-item>														
+				</uni-list>	
+				<uni-list v-if="type==='rd'">
+					<uni-list-item title="监管单位" :rightText="viewData.groupName"></uni-list-item>
+					<uni-list-item title="水库堤坝名称" :rightText="viewData.rdName"></uni-list-item>
+					<uni-list-item title="地址" :rightText="viewData.rdAddress"></uni-list-item>
+					<uni-list-item title="责任人" :rightText="viewData.respName"></uni-list-item>
+					<uni-list-item title="责任人电话" :rightText="viewData.respPhone"></uni-list-item>
+					<uni-list-item title="描述" :note="viewData.remark"></uni-list-item>															
+				</uni-list>	
+				<view class="camerasbox">
+					<view class="item" v-for="item in cameras" :key="item.cameraId">
+						<view class="item-card">
+							<view class="title" v-if="item.cameraTitle">{{item.cameraTitle}}</view>
+							<uni-icons type="videocam-filled" size="40" color="#999" @click="showCamera(item)"></uni-icons>
+						</view>		
 					</view>		
-				</view>		
-			</view>			
-		</view>
-	</uni-popup>
+				</view>			
+			</view>		
+		</uni-popup>
+		<CameraModal ref="camera"></CameraModal>		
+	</view>
 </template>
 
 <script>
 	import disasterApi from '@/api/disaster.js'
+	import {getVideoInfo} from '@/api/system.js'
+	import CameraModal from '@/components/CameraModal.vue'
 	export default{
 		name:"DisasteDetail",
+		components:{
+			CameraModal
+		},
 		props:{
 			type:{
 				type:[String,Number],
@@ -68,8 +76,16 @@
 			}
 		},
 		methods:{
-			showCamera(){
-				
+			showCamera(item){
+				// getVideoInfo(cameraId).then((res)=>{
+				// 	let cameraHttp=res.data.cameraHttp;
+				// 	if(cameraHttp){
+				// 		this.$refs.camera.show({title:res.data.cameraTitle,src:cameraHttp})
+				// 	}
+				// })
+				uni.navigateTo({
+					url:`/pages/webview/webview?id=${item.cameraId}&title=${item.cameraTitle}`
+				})
 			},
 			show(item){
 				this.$refs.popup.open('bottom')

packageA/pages/industry/components/Detail.vue

@@ -29,7 +29,7 @@
 				<view class="item" v-for="item in cameras" :key="item.cameraId">
 					<view class="item-card">
 						<view class="title" v-if="item.cameraTitle">{{item.cameraTitle}}</view>
-						<uni-icons type="videocam-filled" size="40" color="#999" @click="showCamera"></uni-icons>
+						<uni-icons type="videocam-filled" size="40" color="#999" @click="showCamera(item)"></uni-icons>
 					</view>		
 				</view>		
 			</view>			
@@ -70,8 +70,10 @@
 			}
 		},
 		methods:{
-			showCamera(){
-
+			showCamera(item){
+				uni.navigateTo({
+					url:`/pages/webview/webview?id=${item.cameraId}&title=${item.cameraTitle}`
+				})
 			},
 			show(item){
 				this.$refs.popup.open('bottom')

packageA/pages/industry/index.vue

@@ -20,7 +20,10 @@
 						</template>
 						<view class="item" @click="handle({type:'detail',item})">
 							<view class="title">
-								<view class="name">{{item.entName}}</view>									
+								<view class="name">{{item.entName}}</view>
+								<view class="camera" @click.stop="showCamera(item)">
+									<uni-icons v-if='item.cameraNum>0' type="videocam-filled" size="20" color="#007aff" ></uni-icons>
+								</view>																	
 							</view>
 							<view class="item-row space-between">
 								<view class="icon-item">
@@ -139,6 +142,9 @@
 				this.limit = 10
 				this.total = 0
 				this.items=[]
+			},
+			showCamera(){
+				
 			}
 		},
 		onReachBottom() {
@@ -237,11 +243,25 @@
 		}
 		.item{
 			color: #666;
-			.name{
-				font-size: 32rpx;
-				color: #222222;
-				line-height: 1;
-				padding-bottom: 10rpx;
+			.title{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.name{
+					font-size: 32rpx;
+					color: #222222;
+					line-height: 1;
+					padding-bottom: 10rpx;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					flex: 1;
+				}
+				.camera{
+					width: 100rpx;
+					text-align: right;
+					flex-shrink: 0;
+				}
 			}
 			image{
 				&.icon{

pages.json

@@ -40,6 +40,13 @@
 			{
 				"navigationBarTitleText" : "登录"
 			}
+		},
+		{
+			"path" : "pages/webview/webview",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 
 	],

pages/webview/webview.vue

@@ -0,0 +1,35 @@
+<template>
+	<web-view :src="src"></web-view>
+</template>
+
+<script>
+	import {getVideoInfo} from '@/api/system.js'	
+	export default {
+		data() {
+			return {
+				src:'',
+				title:"",
+				h5:'http://127.0.0.1:5500/index.html'
+			}
+		},
+		onLoad({id,title}) {
+			this.showCamera(id)	
+			this.title=title
+			uni.setNavigationBarTitle({
+				title:title||'loading……'
+			})
+		},
+		methods: {
+			showCamera(cameraId){
+				getVideoInfo(cameraId).then((res)=>{
+					let cameraHttp=res.data.cameraHttp;
+					this.src=`${this.h5}?href=${cameraHttp}&title=${this.title}`
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+
+</style>

unpackage/dist/dev/mp-weixin/app.json

@@ -4,7 +4,8 @@
     "pages/myCenter/index",
     "pages/myCenter/personalData/personalData",
     "pages/myCenter/updatePassword/updatePassword",
-    "pages/login/index"
+    "pages/login/index",
+    "pages/webview/webview"
   ],
   "subPackages": [
     {

unpackage/dist/dev/mp-weixin/components/CameraModal.json

@@ -0,0 +1,8 @@
+{
+  "usingComponents": {
+    "uni-popup": "/uni_modules/uni-popup/components/uni-popup/uni-popup",
+    "uni-section": "/uni_modules/uni-section/components/uni-section/uni-section",
+    "uni-icons": "/uni_modules/uni-icons/components/uni-icons/uni-icons"
+  },
+  "component": true
+}

unpackage/dist/dev/mp-weixin/components/CameraModal.wxml

@@ -0,0 +1 @@
+<uni-popup vue-id="a77107ae-1" type="center" data-ref="cameraPopup" class="data-v-792b947d vue-ref" bind:__l="__l" vue-slots="{{['default']}}"><view class="video-container data-v-792b947d"><view class="title data-v-792b947d"><uni-section vue-id="{{('a77107ae-2')+','+('a77107ae-1')}}" type="line" title="{{title}}" class="data-v-792b947d" bind:__l="__l" vue-slots="{{['right']}}"><uni-icons vue-id="{{('a77107ae-3')+','+('a77107ae-2')}}" type="closeempty" size="24" color="#999" data-event-opts="{{[['^click',[['close']]]]}}" bind:click="__e" class="data-v-792b947d" slot="right" bind:__l="__l"></uni-icons></uni-section></view><live-player class="video data-v-792b947d" style="width:100%;height:225px;" src="{{videoSrc}}" autoplay="{{true}}" data-event-opts="{{[['statechange',[['statechange',['$event']]]],['error',[['error',['$event']]]]]}}" bindstatechange="__e" binderror="__e"></live-player></view></uni-popup>

unpackage/dist/dev/mp-weixin/components/CameraModal.wxss

@@ -0,0 +1,43 @@
+@charset "UTF-8";
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.video-container.data-v-792b947d {
+  width: 750rpx;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: #fff;
+}
+.video-container .title.data-v-792b947d {
+  width: 100%;
+  height: 10vh;
+}
+.video-container .video.data-v-792b947d {
+  display: block;
+  width: 100%;
+}
+

unpackage/dist/dev/mp-weixin/packageA/common/vendor.js

@@ -1,2 +1,132 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["packageA/common/vendor"],{119:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=r(31),o={getDisasterLocationByPage:function(e){return(0,a.request)({url:"/disaster/location/page",data:e})},getDisasterLocationByList:function(e){return(0,a.request)({url:"/disaster/location",data:e})},getDisasterLocationById:function(e){return(0,a.request)({url:"/disaster/location/".concat(e)})},createDisasterLocation:function(e){return(0,a.request)({url:"/disaster/location/add",method:"post",data:e})},updateDisasterLocation:function(e){return(0,a.request)({url:"/disaster/location/update",method:"put",data:e})},deleteDisasterLocationById:function(e){return(0,a.request)({url:"/disaster/location/".concat(e),method:"delete"})},getDisasterLevelByList:function(e){return(0,a.request)({url:"/disaster/level",data:e})},getDisasterCatByList:function(e){return(0,a.request)({url:"/disaster/cat",data:e})},getReservoirDamByPage:function(e){return(0,a.request)({url:"/reservoir/dam/page",data:e})},getReservoirDamByList:function(e){return(0,a.request)({url:"/reservoir/dam",data:e})},getReservoirDamById:function(e){return(0,a.request)({url:"/reservoir/dam/".concat(e)})},createReservoirDam:function(e){return(0,a.request)({url:"/reservoir/dam/add",method:"post",data:e})},updateReservoirDam:function(e){return(0,a.request)({url:"/reservoir/dam/update",method:"put",data:e})},deleteReservoirDamById:function(e){return(0,a.request)({url:"/reservoir/dam/".concat(e),method:"delete"})},getCameraByListWithLocation:function(e){return(0,a.request)({url:"/camera/location/".concat(e)})}};t.default=o}}]);
+(global["webpackJsonp"] = global["webpackJsonp"] || []).push([["packageA/common/vendor"],{
+
+/***/ 119:
+/*!********************************************************!*\
+  !*** D:/Work/ZHCX/emergencyManagement/api/disaster.js ***!
+  \********************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _request = __webpack_require__(/*! @/libs/request.js */ 31);
+var _default = {
+  /*地质*/
+  // 分页查询
+  getDisasterLocationByPage: function getDisasterLocationByPage(data) {
+    return (0, _request.request)({
+      url: '/disaster/location/page',
+      data: data
+    });
+  },
+  // 列表查询
+  getDisasterLocationByList: function getDisasterLocationByList(data) {
+    return (0, _request.request)({
+      url: '/disaster/location',
+      data: data
+    });
+  },
+  // 基于ID查询
+  getDisasterLocationById: function getDisasterLocationById(id) {
+    return (0, _request.request)({
+      url: "/disaster/location/".concat(id)
+    });
+  },
+  // 新增
+  createDisasterLocation: function createDisasterLocation(data) {
+    return (0, _request.request)({
+      url: '/disaster/location/add',
+      method: "post",
+      data: data
+    });
+  },
+  // 更新
+  updateDisasterLocation: function updateDisasterLocation(data) {
+    return (0, _request.request)({
+      url: '/disaster/location/update',
+      method: "put",
+      data: data
+    });
+  },
+  // 删除
+  deleteDisasterLocationById: function deleteDisasterLocationById(id) {
+    return (0, _request.request)({
+      url: "/disaster/location/".concat(id),
+      method: "delete"
+    });
+  },
+  // 规模等级列表
+  getDisasterLevelByList: function getDisasterLevelByList(data) {
+    return (0, _request.request)({
+      url: '/disaster/level',
+      data: data
+    });
+  },
+  // 灾害类型列表查询
+  getDisasterCatByList: function getDisasterCatByList(data) {
+    return (0, _request.request)({
+      url: '/disaster/cat',
+      data: data
+    });
+  },
+  /*自然*/
+  getReservoirDamByPage: function getReservoirDamByPage(data) {
+    return (0, _request.request)({
+      url: '/reservoir/dam/page',
+      data: data
+    });
+  },
+  // 列表查询
+  getReservoirDamByList: function getReservoirDamByList(data) {
+    return (0, _request.request)({
+      url: '/reservoir/dam',
+      data: data
+    });
+  },
+  // 基于ID查询
+  getReservoirDamById: function getReservoirDamById(id) {
+    return (0, _request.request)({
+      url: "/reservoir/dam/".concat(id)
+    });
+  },
+  // 新增
+  createReservoirDam: function createReservoirDam(data) {
+    return (0, _request.request)({
+      url: '/reservoir/dam/add',
+      method: "post",
+      data: data
+    });
+  },
+  // 更新
+  updateReservoirDam: function updateReservoirDam(data) {
+    return (0, _request.request)({
+      url: '/reservoir/dam/update',
+      method: "put",
+      data: data
+    });
+  },
+  // 删除
+  deleteReservoirDamById: function deleteReservoirDamById(id) {
+    return (0, _request.request)({
+      url: "/reservoir/dam/".concat(id),
+      method: "delete"
+    });
+  },
+  // 基于ID查询
+  getCameraByListWithLocation: function getCameraByListWithLocation(id) {
+    return (0, _request.request)({
+      url: "/camera/location/".concat(id)
+    });
+  }
+};
+exports.default = _default;
+
+/***/ })
+
+}]);
 //# sourceMappingURL=../../../.sourcemap/mp-weixin/packageA/common/vendor.js.map

unpackage/dist/dev/mp-weixin/packageA/pages/disaster/components/Detail.json

@@ -5,6 +5,7 @@
     "uni-section": "/uni_modules/uni-section/components/uni-section/uni-section",
     "uni-icons": "/uni_modules/uni-icons/components/uni-icons/uni-icons",
     "uni-list": "/uni_modules/uni-list/components/uni-list/uni-list",
-    "uni-list-item": "/uni_modules/uni-list/components/uni-list-item/uni-list-item"
+    "uni-list-item": "/uni_modules/uni-list/components/uni-list-item/uni-list-item",
+    "camera-modal": "/components/CameraModal"
   }
 }