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

src/views/am/monitor.vue

@@ -5,21 +5,23 @@
         <el-button type="primary" icon="el-icon-refresh" @click="syncData" :loading="syncLoading">同步</el-button>
       </div>
       <div class="right-panel">
-        <!-- <el-input
+        <el-select v-model="areaId" placeholder="选择区域">
-          v-model="query.channelCode"
+          <el-option
-          placeholder="编号"
+            v-for="item in areaoptions"
-          clearable
+            :key="item.id"
-          @click="handleQuery"
+            :label="item.name"
-        ></el-input>
+            :value="item.id"
+          />
+        </el-select>
         <el-button
           type="primary"
           icon="el-icon-search"
           @click="handleQuery"
-        ></el-button> -->
+        ></el-button>
       </div>
     </el-header>
     <el-main class="nopadding">
-      <scTable ref="table" :apiObj="apiObj" row-key="id" :params="apiParams" :pageStr="pageStr"
+      <scTable ref="table" :apiObj="apiObj" row-key="id" :params="apiParams" :pageStr="pageStr" :data="pageData"
         :pageSizeStr="pageSizeStr" :orderStr="orderStr" :parseData="parseData" @selection-change="selectionChange"
         stripe @resetQuery="resetQuery">
         <el-table-column label="序号" type="index" width="50"></el-table-column>
@@ -132,9 +134,12 @@ export default {
         },
         code: "video_realtime",
       },
+      areaId:'',
       channelCode: '',
       channelId: '',
       channelArea: '',
+      pageData:[],
+      areaoptions: [],
       channelAreas: [],
       channelLocation: {},
       flvPlayer: null,
@@ -150,8 +155,21 @@ export default {
     scriptInfo.setAttribute("data-callType", "callScript");
     scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
     document.head.appendChild(scriptInfo);
+    this.getAllVchannel();
+  },
+  mounted(){
+    this.getArea();
   },
   methods: {
+    getAllVchannel(){
+      debugger;
+      this.$API.am.video.list.req({pageSize:999}).then(res=>{
+        debugger;
+        console.log(res)
+        let allVchannel = JSON.stringify(res.pageData);
+        localStorage.setItem('allVchannel',allVchannel)
+      })
+    },
     handleView(row) {
       let that = this;
       that.channelCode = row.channelCode;
@@ -174,9 +192,15 @@ export default {
     },
     viewClose() {
       this.limitedVisible = false;
+    },
+     //区域
+     getArea() {
+      this.$API.am.area.list.req({ page: 0 }).then((res) => {
+        this.areaoptions = res;
+      });
     },
     handlePosition(row) {
-      debugger;
+      // debugger;
       console.log(row)
       if(row.my_info.id&&row.my_info.id!==null){
         this.channelId = row.my_info.id ? row.my_info.id : null;
@@ -196,7 +220,24 @@ export default {
     },
 
     //搜索
-    handleQuery() { this.$refs.table.refresh(); },
+    handleQuery() { 
+      debugger;
+      let that = this;
+      let vchannel = localStorage.getItem('allVchannel');
+      console.log(vchannel)
+      let allVchannel = JSON.parse(vchannel);
+      debugger;
+      console.log(allVchannel)
+      console.log(that.areaId)
+      
+      that.pageData = allVchannel.filter(item=>{
+        if(item.my_info.area == that.areaId){
+          debugger;
+        }
+        return item.my_info.area == that.areaId;
+      })
+        // console.log(localStorage.getItem('allVchannel'))
+    },
 
     resetQuery() {
       this.query = {};

src/views/bigScreen/index.vue

@@ -40,14 +40,14 @@
 							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[5] }"></span>
 							<span class="box-text">人员</span>
 						</div>
-						<div class="caret-dropdown">
+						<!-- <div class="caret-dropdown">
 							<el-icon @click="userSelect" v-if="showUserSelect" :size="14">
 								<ArrowUpBold />
 							</el-icon>
 							<el-icon @click="userSelect" v-else :size="14">
 								<ArrowDownBold />
 							</el-icon>
-						</div>
+						</div> -->
 					</div>
 					<div class="drop-content" v-if="showUserSelect">
 						<el-tree 
@@ -73,12 +73,13 @@
 			</div>
 			<!--搜索-->
 			<div class="screen-search">
-				<div class="search-content"><input type="text" placeholder="输入姓名/定位卡号/车牌号进行查找" class="input-focus"><span
+				<div class="search-content">
-						class="close-btn el-icon-circle-close" style="display: none;"></span>
+					<input type="text" placeholder="输入姓名/定位卡号/车牌号进行查找" v-model="searchKeyWord" class="input-focus">
-					<div class="search"></div>
+					<span class="close-btn el-icon-circle-close" style="display: none;"></span>
-					<div class="auto-suggestion" style="display: none;">
+					<div class="search" @click="searchOne(searchKeyWord)"></div>
+					<!-- <div class="auto-suggestion" style="display: none;">
 						<div class="suggestion-select-ul"></div>
-					</div>
+					</div> -->
 				</div>
 			</div>
 		</div>
@@ -145,11 +146,17 @@
 					</div>
 				</div>
 				<div class="alarm-content">
-					<div class="content-left">
+					<div style="display:flex">
 						<div class="alarm-danger"></div>
+						<div id="eventScrenWrap" style="height:50px;width: calc(100% - 50px);overflow:hidden;padding-left: 20px;position: relative;">
+							<div id="eventScrenItem" style="line-height: 50px;font-size: 20px;color: cyan;position: absolute;">
+								<div v-for="(item1,index1) in warningData.list" :key="item1.id">
+									<text v-if="index1<3">{{item1.voice_msg}}</text>
+								</div>
+							</div>
+						</div>
 					</div>
 					<div class="content-right">
-						<!--alarm-item-safe-->
 						<div v-for="item in wStatistics.details" :key="item.cate" class="alarm-item alarm-item-danger">
 							<span class="item-icon"></span>
 							<span class="item-name">{{ item.cate__name }}</span>
@@ -230,16 +237,6 @@
 						<el-table-column label="区域" prop="name"></el-table-column>
 						<el-table-column label="当前人数" prop="count_people"></el-table-column>
 					</el-table>
-					<!--<el-tree
-						ref="group"
-						id="bigScreenTree"
-						node-key="id"
-						:data="group"
-						:current-node-key="''"
-						:highlight-current="true"
-						:expand-on-click-node="false"
-						@node-click="groupClick"
-					></el-tree>-->
 				</div>
 				<div class="alarm-detail-info left_arrow" v-if="areaDetail" style="width:150%">
 					<div class="simple-title">
@@ -671,10 +668,10 @@
 				</div>
 			</div>
 		</div>
-		<!--警告详情-->
+		<!--事件详情-->
 		<div class="screen-risk" v-if="screenWarning">
 			<div class="simple-title">
-				<div>警报信息</div>
+				<div>事件信息</div>
 				<div class="simple-btn" @click="closeScreenWarning">关闭</div>
 			</div>
 			<div class="risk-content">
@@ -685,7 +682,7 @@
 				</div>
 			</div>
 			<div class="simple-title">
-				<div>警告详情</div>
+				<div>事件详情</div>
 			</div>
 			<div class="risk-content">
 				<div class="risk-basic">
@@ -717,8 +714,11 @@
 					</div>
 					<div class="risk-item" v-if="screenWarningItem.global_img!=null">
 						<span class="risk-item-name">事件截图：</span>
-						<img :src="screenWarningItem.global_img" style="width: 250px;">
+						<sc-upload v-model="screenWarningItem.global_img" title="全景照" style="width: 250px;"></sc-upload>
-						<img v-if="screenWarningItem.face_img!=null" :src="screenWarningItem.face_img" style="width: 250px;">
+						<sc-upload v-if="screenWarningItem.face_img!=null" v-model="screenWarningItem.face_img" title="人脸照"  style="width: 250px;"></sc-upload>
+						
+						<!-- <img :src="screenWarningItem.global_img" style="width: 250px;"> -->
+						<!-- <img v-if="screenWarningItem.face_img!=null" :src="screenWarningItem.face_img" style="width: 250px;"> -->
 					</div>
 				</div>
 			</div>
@@ -763,6 +763,7 @@ export default {
 			timerUser: null,
 			timerTime: null,
 			eventTimer:null,
+			timerEventRoll:null,
 			eventAudioTimer:null,
 			trackMarker:null,
 			domMarkerLayer: null,
@@ -797,6 +798,7 @@ export default {
 			warningDetail: false,
 			filterCtrlFocus: true,
 			warningListTotal: 0,
+			heightNum:0,
 			warningData: {
 				list: [],
 				total: 0,
@@ -818,6 +820,7 @@ export default {
 			warningList: [],//报警事件列表
 			speakerList: [],//喇叭列表
 			userList: [],//人员列表
+			allUserList:[],
 			deptList: [],//部门列表
 			postList: [
 				{id:0,name:'全部',label:'全部'},
@@ -893,6 +896,7 @@ export default {
 			audioIndex:0,
 			audioList:{},
 			employeeScroll:0,
+			searchKeyWord:'',
 
 		}
 	},
@@ -1087,7 +1091,8 @@ export default {
 		let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
 		let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
 		let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
-		let domHeight = pageHeight - height1 - height2 - 84;
+		debugger;
+		let domHeight = pageHeight - height1 - 310 - 84;
 		let areaTableHeight = domHeight - height3 - 50;
 		this.areaTableHeight = areaTableHeight;
 		document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
@@ -1104,43 +1109,71 @@ export default {
 		this.timerUser = null;
 		this.timerTime = null;
 		this.eventTimer = null;
+		this.timerEventRoll = null;
 		this.eventAudioTimer = null;
-		// window.map.destroy();
 		clearInterval(this.timerUser)//人员
 		clearInterval(this.timerTime)//时间
 		clearInterval(this.eventTimer)//时间
+		clearInterval(this.timerEventRoll)//事件
 		clearInterval(this.eventAudioTimer)//事件
 	},
 	methods: {
+		searchOne(keyword){
+			let that = this;
+			that.markList[5] = true;
+			that.userMaskerLayer.show = true;
+			clearInterval(that.timerUser);
+			that.timerUser = setInterval(function () {
+				that.refreshUserMarker();
+			}, 10000)
+			that.userList.filter(item=>{
+				if(item.my_info.employee_.name == keyword||item.mac ==keyword){
+					that.screenUserItem = item.my_info.employee_;
+					that.screenUserItem.mac = item.mac;
+					that.screenUser = true;
+					window.map.flyToMarker(that.userMarker[item.mac], {
+						duration: 1000,
+						range: 200
+					})
+				}
+			})
+		},
 		handleChange(item, check,item2,item3) {
-			// debugger;
+			let that = this;
-			// let that = this;
+			debugger;
-			// console.log(item);
+			console.log(check)
-			// console.log(check);
+			
-			// console.log(item2);
-			// console.log(item3);
 			this.deptChecked = check.checkedKeys;
 			this.userParams.depts = check.checkedKeys;
-			let obj = {};
+			// that.userMaskerLayer.removeAllIconTextMark();
-			obj.depts = check.checkedKeys;
+			// this.refreshUserMarker();
-			that.$API.third.blt.all.req(obj).then(res => {
-				debugger;
-				console.log('selectedUser:'+res)
-			})
-			this.refreshUserMarker();
 		},
 		//人员类型选择
 		userFilter() {
 			let that = this;
+			let checkedKeys = that.deptChecked;
+			window.map.removeLayer(that.userMaskerLayer);
+			that.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({
+				minimumLevel: 3,
+				maxmumLevel: 22,
+				show: true
+			});
+			window.map.addLayer(that.userMaskerLayer);
+			let userListNew = [];
+			that.userList.filter(item=>{
+				debugger;
+				console.log(item);
+				if(checkedKeys.indexOf(item.my_info.employee_.belong_dept_)>-1){
+					debugger;
+					userListNew.push(item)
+					}
+			})
+			debugger;
+			that.userList = userListNew;
+			console.log(that.userList)
+			that.showUserMarkers(userListNew);
 			this.showUserSelect = false;
-			this.screenUser = true;
+			// this.screenUser = true;
-			// that.screenUserItem.name = this.userList[0].my_info.employee_.name;
-			// that.screenUserItem.type = this.userList[0].my_info.employee_.type;
-			// that.screenUserItem.id = this.userList[0].my_info.employee_.id;
-			// that.screenUserItem.photo = this.userList[0].my_info.employee_.photo ? this.userList[0].my_info.employee_.photo : '';
-			// that.screenUserItem.post_name = this.userList[0].my_info.employee_.post_name ? this.userList[0].my_info.employee_.post_name : '';
-			// that.screenUserItem.belong_dept_name = this.userList[0].my_info.employee_.belong_dept_name ? this.userList[0].my_info.employee_.belong_dept_name : '';
-		
 		},
 		audioFinished(){
 			if(this.audioIndex<this.audioList.length){
@@ -1168,6 +1201,7 @@ export default {
 			}else if(index==4){
 				//区域下的人员
 				this.getAreaBlt();
+				this.getAreaList();
 			}
 		},
 		//报警统计
@@ -1197,22 +1231,13 @@ export default {
 			that.$API.ecm.event.list.req({page_size:1}).then(res => {
 				if (res.err_msg) {
 				} else {
-					// debugger;
-					// console.log('00000000000000');
-					// console.log(res.results[0].id);
-					// console.log(that.audioList.id);
 					let judge = res.results[0].id==that.audioList.id
-					// console.log(judge);
-					// console.log('11111111111111');
 					let item = res.results[0];
 					if(that.audioSrc!==''){
 						if(item.id==that.audioList.id){
-							// that.music.pause(); //暂停
 						}else{
-							// debugger;
 							that.audioList = item;
 							that.audioSrc=item.voice_f;
-							// that.music.play();//播放
 							if(item.location){
 								window.map.flyToPosition(new jsmap.JSPoint(item.location.longitude, item.location.latitude), { range: 200,duration: 1000 });
 							}
@@ -1242,17 +1267,36 @@ export default {
 		},
 		//获取报警列表
 		getWarnings() {
+			let that = this;
 			this.$API.ecm.event.list.req(this.warningData.params).then(res => {
 				if (res.err_msg) {
 				} else {
-					this.warningData.list = res.results;
+					that.warningData.list = res.results;
-					this.warningData.total = res.count;
+					that.warningData.total = res.count;
+					that.eventInterval();
 				}
 			})
 		},
+		eventInterval(){
+			let that = this;
+			if (that.timerEventRoll) {
+				clearInterval(that.timerEventRoll);
+				that.timerEventRoll = null;
+			}
+			that.timerEventRoll = setInterval(function () {
+				that.heightNum+=1;
+				if(that.heightNum>250){
+					that.heightNum=0;
+					document.getElementById('eventScrenItem').style.top = 0;
+				}else{
+					let top = -that.heightNum;
+					document.getElementById('eventScrenItem').style.top  = top+'px';
+				}
+			}, 100)
+			
+		},
 		//警报类型查询
 		warningTypeSelected(id,name) {
-			// debugger;
 			let that = this;
 			this.warningTypeShow = false;
 			let params = new Object();
@@ -1267,17 +1311,29 @@ export default {
 					that.warningData.total = res.count;
 				}
 			})
-			//获取新数据
 		},
 		
 		//区域点击事件
 		areaRowClick(data) {
 			let that = this;
 			that.areaDetail = true;
+			debugger;
+			console.log(data)
 			that.areaDetailId = data.id;
-			this.getAreaOperation();
 			let points = data.third_info.xx_rail.detail.polygon.points[0];
-			window.map.flyToPosition(new jsmap.JSPoint(points.x, points.y, points.z), { range: 200,duration: 1000 });
+			window.map.flyToPosition(new jsmap.JSPoint(points.x, points.y, points.z), 
+			{ duration:1000,
+				offset:{
+					rotate: 45,
+					tilt: 60,
+					range: 300
+				}
+			});
+			// this.getAreaList();
+			this.getAreaOperation();
+			this.getAreaVchannel();
+			this.getAreaSpeaker();
+			this.getAreaBlt();
 		},
 		//区域下的作业
 		getAreaOperation(){
@@ -1322,7 +1378,6 @@ export default {
 					let rpartsList=[];
 					let arr = [];
 					let children =  genTree(res);
-					debugger;
 					console.log(children)
 					for (let i = 0; i < 5; i++) {
 						let obj = new Object();
@@ -1443,6 +1498,7 @@ export default {
 					that.userList = res.filter(item => {
 						return item.my_info.employee
 					});
+					that.allUserList = that.userList;
 					that.showUserMarkers(that.userList);
 				}
 			})
@@ -1686,6 +1742,7 @@ export default {
 		},
 		//人员
 		showUserMarkers(userList) {
+			debugger;
 			let that = this;
 			//标记图片
 			let userImage = '';
@@ -1743,10 +1800,15 @@ export default {
 					that.userMaskerLayer.addMarker(that.userMarker[item.mac]);
 				})
 			}
-			clearInterval(that.timerUser);
+			// if(that.markList[5]){
-			that.timerUser = setInterval(function () {
+			// 	clearInterval(that.timerUser);
-				that.refreshUserMarker();
+			// 	that.timerUser = setInterval(function () {
-			}, 10000)
+			// 		that.refreshUserMarker();
+			// 	}, 10000)
+			// }else{
+			// 	clearInterval(that.timerUser);
+			// }
+			
 		},
 		//更新人员标记
 		refreshUserMarker() {
@@ -1764,7 +1826,7 @@ export default {
 					let addUser = that.func(userList, that.userList)[0];
 					let refreshList = that.func(userList, that.userList)[1];
 					let subUser = that.func(that.userList, userList)[0];
-					that.userList = refreshList.concat(addUser);//更新userList
+					that.allUserList = that.userList = refreshList.concat(addUser);//更新userList
 					subUser.forEach(subUserItem=>{
 						that.userMaskerLayer.removeMarker(that.userMarker[subUserItem.mac]);//删除离线员工
 					})
@@ -1957,8 +2019,14 @@ export default {
 			}
 			if (that.markList[5]) {
 				that.userMaskerLayer.show = true;
+				clearInterval(that.timerUser);
+				that.timerUser = setInterval(function () {
+					that.refreshUserMarker();
+				}, 10000)
 			} else {
 				that.userMaskerLayer.show = false;
+				clearInterval(that.timerUser);
+				that.timerUser = null;
 			}
 		},
 
@@ -2197,6 +2265,29 @@ export default {
 			this.music.play();//播放
 		},
 	},
+	beforeRouteLeave(to, from, next){
+    next();
+    if (this.timerUser) {
+      clearInterval(this.timerUser);
+      this.timerUser = null;
+    }
+	if (this.timerTime) {
+      clearInterval(this.timerTime);
+      this.timerTime = null;
+    }
+	if (this.eventTimer) {
+      clearInterval(this.eventTimer);
+      this.eventTimer = null;
+    }
+	if (this.timerEventRoll) {
+      clearInterval(this.timerEventRoll);
+      this.timerEventRoll = null;
+    }
+	if (this.eventAudioTimer) {
+      clearInterval(this.eventAudioTimer);
+      this.eventAudioTimer = null;
+    }
+  },
 	unmounted() {
 		// window.map.destroy();
 		window.map = null;
@@ -3040,27 +3131,31 @@ export default {
 		}
 
 		.alarm-content {
-			display: flex;
+			// display: flex;
 			justify-content: space-between;
 			height: calc(100% - 50px);
-
+			.alarm-danger {
+					width: 50px;
+					height: 50px;
+					background: url(/public/img/a_danger.png) no-repeat;
+					background-size: 100% 100%;
+				}
 			.content-left {
 				width: 160px;
 				height: 100%;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-
 				.alarm-danger {
-					width: 150px;
+					width: 50px;
-					height: 150px;
+					height: 50px;
 					background: url(/public/img/a_danger.png) no-repeat;
 					background-size: 100% 100%;
 				}
 			}
 
 			.content-right {
-				width: calc(100% - 130px);
+				width: 100%;
 				overflow: hidden;
 				height: fit-content;
 
@@ -3726,8 +3821,8 @@ export default {
 
 .el-dialog__headerbtn {
 	position: absolute;
-	top: 20px;
+	top: 0;
-	right: 20px;
+	right: 0;
 	padding: 0;
 	background: 0 0;
 	border: none;