Merge branch 'ehs' of https://e.coding.net/ctcdevteam/ehs/ehs_web into ehs

src/api/model/am.js

@@ -61,6 +61,24 @@ export default {
 			}
 		}
 	},
+	video: {
+		list: {
+			name: "获取视频设备列表",
+			req: async function(){
+				return await http.post(
+					`${config.API_URL}/third/tdevice/vchannel/`,
+				);
+			}
+		},
+		item:{
+			name: "获取视频",
+			req: async function(data){
+				return await http.post(
+					`${config.API_URL}/third/dahua/`,data
+				);
+			}
+		},
+	},
 
 
 

src/components/scTable/index.vue

@@ -264,7 +264,6 @@ export default {
     },
     //获取数据
     async getData() {
-		
       this.loading = true;
       var reqData = {
         [config.request.page]: this.currentPage,
@@ -282,18 +281,15 @@ export default {
       try {
         var res = await this.apiObj.req(reqData);
         if (this.hidePagination) {
-
           if (res.length == 0) {
             this.emptyText = "暂无数据";
           }
 			if(this.$route.path==='/sys/dept'||this.$route.path==='/sys/perm'){
 				this.tableData = this.redata(res);
-			
 				console.log(this.tableData)
 			}else{
 				this.tableData = res || [];
 			}
-			// this.tableData = res;
           this.loading = false;
           this.$refs.scTable.setScrollTop(0);
           this.$emit("dataChange", res, this.tableData);
@@ -312,11 +308,10 @@ export default {
         if (this.hidePagination) {
 			dataList = response.data || [];
         } else {
-			dataList = response.rows || [];
+			dataList = response.rows?response.rows:response.data.pageData?response.data.pageData:[];
         }
 		  if(this.$route.path==='/sys/dept'||this.$route.path==='/ops/menu'){
 			  this.tableData = this.redata(dataList);
-			 
 			  console.log(this.tableData)
 		  }else{
 			  this.tableData = dataList || [];
@@ -325,8 +320,6 @@ export default {
         this.summary = response.summary || {};
         this.loading = false;
         this.$refs.scTable.setScrollTop(0);
-
-
         this.$emit("dataChange", res, this.tableData);
       } catch (error) {
         this.loading = false;
@@ -345,7 +338,6 @@ export default {
 		  let obj = posts.reduce((res, v) => (res[v.id] = v , res), {});//Object
 		  let arr = [];
 		  for (let item of posts) {
-			  //debugger;
 			  if (item.parentId == null) {
 				  arr.push(item);
 				  continue
@@ -354,7 +346,6 @@ export default {
 			  parent.children = parent.children ? parent.children : [];
 			  parent.children.push(item);
 		  }
-		 
 		  console.log(arr);
 		  return arr;
 	  },

src/config/route.js

@@ -391,6 +391,15 @@ const routes = [
           "icon": "el-icon-menu",
         },
         "component": "am/em1"
+      },
+		{
+        "name": "monitor",
+        "path": "/am/monitor",
+        "meta": {
+          "title": "视频通道",
+          "icon": "el-icon-menu",
+        },
+        "component": "am/monitor"
       },
     ]
   },

src/views/am/area.vue

@@ -46,7 +46,7 @@
 				<el-table-column label="当前人数" prop="count_people" min-width="90"></el-table-column>
 				<el-table-column label="所属部门" prop="create_time" min-width="180"></el-table-column>
 				<el-table-column label="创建时间" prop="create_time" width="160"></el-table-column>
-				<el-table-column label="操作" fixed="right" align="center" width="120">
+				<el-table-column label="操作" fixed="right" align="center" width="160">
 					<template #default="scope">
 						<el-button-group>
 							<el-button text type="primary" size="small" @click="handleRail(scope.row)">围栏</el-button>

src/views/am/area_rail_form.vue

@@ -5,6 +5,20 @@
 		destroy-on-close
 		@closed="closeDrawer"
 	>
+		<el-form
+			:model="coordinates"
+			label-width="80px"
+			style="position:absolute;top:15px;left:200px;"
+		>
+			<el-form-item label="围栏名称" prop="name">
+				<el-input
+					v-model="coordinates.railName"
+					placeholder="请输入围栏名称"
+					clearable
+					style="width: 150px;"
+				></el-input>
+			</el-form-item>
+		</el-form>
 		<el-container v-loading="loading">
 			<el-main style="padding: 0 20px 20px 20px;">
 				<!--地图-->
@@ -40,7 +54,17 @@
 				loading: false,
 				visible: true,
 				isSaveing: false,
-				coordinates:[],
+				coordinates:{
+					floorNo:'',
+					railName:'',
+					railType:1,//1:多边形；0表示圆形
+					mapType:'1',//点位信息有经纬度则为2，有xy则为1
+					color:'1',
+					polygon:{
+						points:[]
+					}
+				},
+				points:[],
 			};
 		},
 		mounted() {
@@ -97,19 +121,18 @@
 					let drawTool2 = new jsmap.JSDrawToolControl({
 						position: jsmap.JSControlPosition.RIGHT_TOP,  //画图工具在容器中的相对位置，当前为右上
 						offset: {
-							x: 80,
+							x: 30,
-							y: 180
+							y: 30
 						},  //偏移量
 						drawMode: jsmap.JSDrawMode.POLYGON,  //画图类型POINT:画点  POLYLINE:画线  POLYGON:画面
-
 						//画图结束的回调，返回所画的面信息
 						callback: (feature) => {
 							console.log('add', feature);
 							console.log(feature.properties);//type:POLYGON;id:"";name:"";floorNo:"";floorId:""
 							console.log(feature.geometry);//feature.geometry.coordinates:[[],[]]面数组
-							that.coordinates = feature.geometry.coordinates[0];
+							this.coordinates.floorNo = feature.properties.floorNo;
-							debugger;
+							this.coordinates.floorId = feature.properties.floorId;
-
+							that.points = feature.geometry.coordinates[0];
 						},
 						//移除相应面的回调，返回相应面信息
 						removeCallback: (feature) => {
@@ -132,29 +155,34 @@
 			},
 			//表单提交方法
 			submit() {
-				if(this.coordinates.length>0){
+				let that = this;
-					this.isSaveing = true;
+				let pointXY = [];
-					this.$API.am.area.bindRail.req(this.areaId,this.coordinates)
+				let tool = new jsmap.JSMapCoordTool(window.map);
+				let points = that.points;
+				if(points.length>0){
+					that.isSaveing = true;
+					that.coordinates.color = 'rgba(255,0,0,.4)';
+					debugger;
+					points.forEach(item=>{
+						debugger;
+						let coordinate = {x:parseFloat(item[0]),y:parseFloat(item[1])};
+						let pixel = tool.mapToScreenCoordinate(coordinate);
+						pointXY.push(pixel);
+					});
+					that.coordinates.polygon.points = pointXY;
+					that.$API.am.area.bindRail.req(that.areaId,that.coordinates)
 						.then(res => {
-							this.isSaveing = false;
+							that.isSaveing = false;
-							this.visible = false;
+							that.visible = false;
-							this.$emit("success");
+							that.$emit("success");
-							this.$message.success("操作成功");
+							that.$message.success("操作成功");
 							return res
 						}).catch(err => {
-						this.isSaveing = false;
+						that.isSaveing = false;
 						return err
 					})
-				}else{
+				}else{}
-
-				}
 			},
-			/*//表单注入数据
-			setData(data) {
-				console.log(defaultForm);
-				this.areaId = data.id;
-				this.areaName = data.name;
-			},*/
 		},
 	};
 </script>

src/views/am/monitor.vue

@@ -0,0 +1,117 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<div class="right-panel-search">
+					<el-input v-model="search.keyword" placeholder="姓名/手机号" clearable @click="upsearch"></el-input>
+					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery"  >
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="序号" type="index" width="50"></el-table-column>
+				<el-table-column label="设备编号" prop="deviceCode" min-width="100"></el-table-column>
+				<el-table-column label="通道编号" prop="channelCode" min-width="100"></el-table-column>
+				<el-table-column label="通道名称" prop="channelName" min-width="150"></el-table-column>
+				<el-table-column label="通道状态" prop="stat" min-width="150"></el-table-column>
+				<el-table-column label="通道类型" min-width="100">
+					<template #default="scope">{{scope.row.channelType}}</template>
+				</el-table-column>
+				<el-table-column label="设备类型" min-width="100">
+					<template #default="scope">{{scope.row.cameraType}}</template>
+				</el-table-column>
+				<el-table-column label="是否在线" prop="isOnline" min-width="180"></el-table-column>
+				<el-table-column label="创建时间" prop="createTime" width="160"></el-table-column>
+				<el-table-column label="操作" fixed="right" align="center" width="160">
+					<template #default="scope">
+						<el-button-group>
+							<el-button text type="primary" size="small" @click="handleView(scope.row)">实时监控</el-button>
+							<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row, scope.$index)">
+								<template #reference>
+									<el-button text type="danger" size="small">删除</el-button>
+								</template>
+							</el-popconfirm>
+						</el-button-group>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+	<video-channel-view v-if="dialogSave" ref="saveDialog" :channelId="channelId" :channelName="channelName" @closed="dialogSave=false"></video-channel-view>
+</template>
+<script>
+	import videoChannelView from './vchannel_view'
+	export default {
+		name: 'monitor',
+		components: {
+			videoChannelView
+		},
+		data() {
+			return {
+				apiObj: this.$API.am.video.list,
+				dialogSave:  false,
+				query: {},
+				selection: [],
+				search: {
+					keyword: null
+				},
+				channelId:''
+			}
+		},
+		methods: {
+			handleView(row) {
+				this.channelId = row.channelCode;
+				this.channelName = row.channelName;
+				this.dialogSave = true;
+			},
+
+			//删除区域
+			async handleDel(row){
+				await this.$API.am.area.delete.req(row.id).then(res=>{
+					if(res.err_msg){
+						this.$message.error(res.err_msg);
+					}else{
+						this.$refs.table.refresh();
+						this.$message.success("删除成功")
+					}
+				});
+			},
+
+			//批量删除区域
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					let params = {pk:{pks:this.selection}};
+					this.$API.am.area.deletes.req(params).then(res=>{
+						loading.close();
+						if(res.err_msg){
+							this.$message.error(res.err_msg);
+						}else{
+							this.$refs.table.refresh();
+							this.$message.success("删除成功")
+						}
+					});
+				}).catch(() => {
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+
+
+			//搜索
+			upsearch(){
+
+			},
+
+			resetQuery(){
+				this.query = {}
+			}
+		}
+	}
+</script>

src/views/am/vchannel_view.vue

@@ -0,0 +1,90 @@
+<template>
+	<el-drawer
+		v-model="visible"
+		destroy-on-close
+		@closed="closeDrawer"
+		:size="800"
+	>
+		<el-container v-loading="loading">
+			<el-main style="padding: 0 20px 20px 20px;">
+				<sc-title :title="channelName"></sc-title>
+				<video id="videoElement" muted="muted"></video>
+			</el-main>
+			<el-footer>
+				<el-button @click="visible = false">关闭</el-button>
+			</el-footer>
+		</el-container>
+	</el-drawer>
+</template>
+<!--<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script>-->
+<script>
+	import scVideo from '@/components/scVideo'
+	export default {
+		components: {scVideo},
+		emits: ["success", "closed"],
+		props: {
+			channelId: {
+				type: String,
+			},
+			channelName: {
+				type: String,
+			}
+		},
+		data() {
+			return {
+				loading: false,
+				visible: true,
+				isSaveing: false,
+				params:{
+					json:{
+						data: {
+							channelId: "",
+							streamType: "2",
+							type: "flv"
+						}
+					},
+					code:'video_realtime'
+				},
+			};
+		},
+		created(){
+			const scriptInfo = document.createElement("script");
+			scriptInfo.setAttribute("data-callType","callScript");
+			scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
+			document.head.appendChild(scriptInfo)
+		},
+		mounted() {
+			this.$nextTick(()=>{
+				this.params.json.data.channelId = this.channelId;
+				// this.params.json = JSON.stringify(this.jso);
+				this.$API.am.video.item.req(this.params).then(res=>{
+					debugger;
+					console.log(res);
+					this.url = res.url;
+					if (flvjs.isSupported()) {
+						let videoElement = document.getElementById('videoElement');
+						let flvPlayer = flvjs.createPlayer({
+							type: 'flv',
+							url: res.url
+						});
+						flvPlayer.attachMediaElement(videoElement);
+						flvPlayer.load();
+						flvPlayer.play();
+					}
+				})
+			})
+		},
+		methods: {
+			closeDrawer() {
+				this.$emit('closed');
+			},
+
+		},
+	};
+</script>
+
+<style>
+	/*.el-drawer.rtl{
+		width: 90%!important;
+	}*/
+</style>

src/views/bigScreen/index.vue

@@ -193,7 +193,8 @@
 	export default {
 		data() {
 			return {
-				boxMarkerLayer:null,
+				boxMarkerLayer:null,//盒子图层
+				pointMarkerLayer:null,//点位图层
 				flyManager:null,
 				dropIndex:'1',
 				markList: [false, false, false, false, false, false, false, false],
@@ -337,6 +338,7 @@
 				});
 				window.map.addControl(drawTool2);
 				this.boxMaskerLayer();
+				this.pointMaskerLayer();
 			});
 			window.map.on('mapClickNode', event => {
 				debugger;
@@ -382,6 +384,60 @@
 					}
 				});
 				this.boxMarkerLayer.addMarker(boxMarker);
+				var boxMarker1 = new jsmap.JSBoxMarker({
+					id: 'box',
+					position: [
+						{x: 114.6284236353879, y: 38.81587979561416, z: 0},
+						{x: 114.62920209224112, y: 38.81519905830823, z: 0},
+						{x: 114.63022009284202, y: 38.81594033572247, z: 0},
+						{x: 114.62938229018444, y: 38.81656925374177, z: 0},
+					],
+					floorId: 1,//楼层id
+					color: 'rgba(134,255,78,0.44)',//颜色
+					height: 0,//基底高度
+					stretchHeight: 20,//拉伸高度
+					strokeColor: '#87FF4F',//边线颜色
+					show: true, //是否显示
+					depthTest:Boolean,
+					allowPicking: false, //是否允许点击
+					displayCondition:  new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
+					callback: (marker) => {
+						console.log(marker);
+					}
+				});
+				this.boxMarkerLayer.addMarker(boxMarker1);
+			},
+			pointMaskerLayer(){
+				 this.pointMarkerLayer = new jsmap.JSPointMarkerLayer({
+					minimumLevel:3,
+					maxmumLevel:22,
+					show:false
+				});
+				window.map.addLayer(this.pointMarkerLayer);
+				this.showPointMarkers();
+			},
+			showPointMarkers(){
+				/*let tool = new jsmap.JSMapCoordTool(window.map);
+				let coordinate = {x:114.63128751408715,y:38.81306617819082};
+				let pixel = tool.mapToScreenCoordinate(coordinate);*/
+				let pointMarker = new jsmap.JSPointMarker({
+					id:'point1',
+					color: '#00FF00',  //填充颜色
+					size: 10,  //尺寸
+					position: new jsmap.JSPoint(114.63070237278036, 114.63070237278036, 0),  //坐标
+					floorId: 2,  //楼层id,默认为1（地面）
+					outlineColor: '#CD5C5C',  //边线颜色
+					outlineWidth: 2,  //边线宽
+					depthTest: true,  //是否开启深度检测
+					show: true,  //是否显示
+					allowPicking: true,  //是否允许点击
+					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
+					nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5),  //比例缩放
+					callback: (node) => {
+						console.log(node);
+					}//回调事件
+				});
+				this.pointMarkerLayer.addMarker(pointMarker);
 			},
 			userSelect() {
 				this.showUserSelect = !this.showUserSelect
@@ -427,7 +483,6 @@
 					}
 					this.markList = arr;
 				} else {
-					// this.markList[index] = !this.markList[index];
 					let list = this.markList.slice(1,8);
 					if(list.indexOf(true)>-1&&list.indexOf(false)<0){
 						this.markList[0]=true;
@@ -436,13 +491,16 @@
 					}
 				}
 				debugger;
-				if(index === 0&&this.markList[5]||index === 5&&this.markList[5]){
+				if(this.markList[5]){
-
 					this.boxMarkerLayer.show=true;
 				}else{
-					// this.layer.setMarkerVisibleByFilter(false, 'show >= true');
 					this.boxMarkerLayer.show=false;
 				}
+				if(this.markList[2]){
+					this.pointMarkerLayer.show=true;
+				}else{
+					this.pointMarkerLayer.show=false;
+				}
 			},
 			changeDropIndex(index){
 				let that = this;