diff --git a/.env.development b/.env.development
index 6b5bb543..71f440e3 100644
--- a/.env.development
+++ b/.env.development
@@ -5,10 +5,10 @@ NODE_ENV = development
 VUE_APP_TITLE = '曲阳金隅安全智能管控平台'
 
 # 接口地址
-# VUE_APP_API_BASEURL = http://1.203.161.103:2800/api
-VUE_APP_WS_API = 'ws://localhost:8000'
-VUE_APP_API_BASEURL = http://127.0.0.1:8000/api
-VUE_APP_BASEURL = http://127.0.0.1:8000
+VUE_APP_API_BASEURL = http://1.203.161.103:2800/api
+#VUE_APP_WS_API = 'ws://localhost:8000'
+#VUE_APP_API_BASEURL = http://127.0.0.1:8000/api
+#VUE_APP_BASEURL = http://127.0.0.1:8000
 
 # 本地端口
 VUE_APP_PORT = 2800
diff --git a/public/img/avatar.jpg b/public/img/avatar.jpg
deleted file mode 100644
index b8a3cf3c..00000000
Binary files a/public/img/avatar.jpg and /dev/null differ
diff --git a/public/img/avatar2.gif b/public/img/avatar2.gif
deleted file mode 100644
index 6fade970..00000000
Binary files a/public/img/avatar2.gif and /dev/null differ
diff --git a/public/img/avatar3.gif b/public/img/avatar3.gif
deleted file mode 100644
index 495fe433..00000000
Binary files a/public/img/avatar3.gif and /dev/null differ
diff --git a/public/img/employee.png b/public/img/employee.png
new file mode 100644
index 00000000..a5fc9962
Binary files /dev/null and b/public/img/employee.png differ
diff --git a/public/img/remployee.png b/public/img/remployee.png
new file mode 100644
index 00000000..b2db5570
Binary files /dev/null and b/public/img/remployee.png differ
diff --git a/public/img/visitor.png b/public/img/visitor.png
new file mode 100644
index 00000000..8f4474c3
Binary files /dev/null and b/public/img/visitor.png differ
diff --git a/src/utils/tool.js b/src/utils/tool.js
index d8672e85..c59ff134 100644
--- a/src/utils/tool.js
+++ b/src/utils/tool.js
@@ -156,12 +156,11 @@ tool.dateFormat = function (date, fmt='yyyy-MM-dd hh:mm:ss') {
 		"s+" : date.getSeconds(),                 //秒
 		"q+" : Math.floor((date.getMonth()+3)/3), //季度
 		"S"  : date.getMilliseconds(),         //毫秒
-		"W"  : date.getDay(),         //毫秒
 	};
-	var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
+	var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
 
 	if(fmt==='week'){
-		fmt =weeks[o.w];
+		fmt =weeks[date.getDay()];
 	}else{
 		if(/(y+)/.test(fmt)) {
 			fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
diff --git a/src/views/am/area.vue b/src/views/am/area.vue
index 4e79dd17..37cd8bfe 100644
--- a/src/views/am/area.vue
+++ b/src/views/am/area.vue
@@ -273,6 +273,7 @@
     ref="saveRailDialog"
     :areaId="areaId"
     :areaName="areaName"
+    :areaPoints="areaPoints"
     @success="handleSaveSuccess"
     @closed="dialog.saveRail = false"
   ></save-rail-dialog>
@@ -324,6 +325,7 @@ export default {
       query2: {},
       areaId: null,
       areaName: "",
+      areaPoints:[],
       cate_: { post: "岗位", org: "单位", people: "人员" },
     };
   },
@@ -363,6 +365,13 @@ export default {
     },
     //围栏，添加
     handleRail(row) {
+      debugger;
+      // console.log(row.third_info.xx_rail.detail.polygon.points);
+      if(row.third_info.xx_rail){
+          this.areaPoints = row.third_info.xx_rail.detail.polygon.points;
+      }else{
+
+      }
       this.areaId = row.id;
       this.areaName = row.name;
       this.dialog.saveRail = true;
diff --git a/src/views/am/area_rail_form.vue b/src/views/am/area_rail_form.vue
index 7c25c0d2..6be8e1f6 100644
--- a/src/views/am/area_rail_form.vue
+++ b/src/views/am/area_rail_form.vue
@@ -48,6 +48,9 @@
 			},
 			areaName: {
 				type: String,
+			},
+			areaPoints:{
+				type:Array,
 			}
 		},
 		data() {
@@ -68,7 +71,7 @@
 				points:[],
 			};
 		},
-		mounted() {
+		mounted() {	
 			this.$nextTick(()=>{
 				this.loadMap();
 			})
@@ -135,8 +138,44 @@
 						locateCallback: (feature) => {
 							// console.log('locate..', feature);
 						}
+				});
+				window.map.addControl(drawTool2);
+				//当电子围栏有数据时
+				if(that.areaPoints.length>2){
+					let areaPoints = [];
+					let point =null;
+					that.areaPoints.forEach(item=>{
+						debugger;
+
+						let obj = {lng:345,lat:268}
+						console.log(obj)
+						let tool = new jsmap.JSMapCoordTool(window.map);
+						let pixel = tool.screenToMapCoordinate(obj);
+						debugger;
+						console.log(pixel)
+						debugger;
+						point = new jsmap.JSPoint(item.x,item.y,0);
+						areaPoints.push(point)
+					})
+					let polygonMarker = new jsmap.JSPolygonMarker({
+						id: that.areaId,//id
+						position: that.areaPoints,//坐标集合
+						floorId: 1,//楼层id
+						color: 'rgba(0,0,255,.44)',//填充颜色
+						strokeColor: 'rgba(0,0,255,.44)',//边线颜色
+						depthTest: false,//是否开启深度检测
+						// material: new jsmap.JSWaterMaterial(),  //材质，材质属性一旦设置，color属性就会失效
+						allowPicking: true,  //是否允许点击
+						displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
+						properties: {
+							test: 'polygonTest'
+						},//属性设置
+						callback: (marker) => {
+							// console.log(marker);
+						}//回调
 					});
-					window.map.addControl(drawTool2);
+					window.map.addMarker(polygonMarker);
+				}	
 				});
 			},
 			closeDrawer() {
diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue
index fd9a27cd..3b5acdc5 100644
--- a/src/views/bigScreen/index.vue
+++ b/src/views/bigScreen/index.vue
@@ -6,8 +6,8 @@
 			<div class="header-right-action">
 				<div class="right-action-clock">
 					<span class="action-time">{{ currentDay }}</span>
-					<span class="action-time">周三下午 </span>
-					<span class="action-time">{{  currentTime }}</span>
+					<span class="action-time">{{ currentWeek }} </span>
+					<span class="action-time">{{ currentTime }}</span>
 				</div>
 			</div>
 		</div>
@@ -17,39 +17,39 @@
 				<div class="filter-content">
 					<div class="filter-ctrl" v-show="filterCtrlFocus">
 						<div class="screen-check-content hoverPointer" @click="markerClick(0)">
-							<span class="box-btn box-uncheck" :class="{'box-check':markList[0]}"></span>
+							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[0] }"></span>
 							<span class="box-text">全部</span>
 						</div>
 						<div class="screen-check-content hoverPointer" @click="markerClick(1)">
-							<span class="box-btn box-uncheck" :class="{'box-check':markList[1]}"></span>
+							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[1] }"></span>
 							<span class="box-text">车间名称</span>
 						</div>
 						<div class="screen-check-content hoverPointer" @click="markerClick(2)">
-							<span class="box-btn box-uncheck" :class="{'box-check':markList[2]}"></span>
+							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[2] }"></span>
 							<span class="box-text">摄像头</span>
 						</div>
 						<div class="screen-check-content hoverPointer" @click="markerClick(3)">
-							<span class="box-btn box-uncheck" :class="{'box-check':markList[3]}"></span>
+							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[3] }"></span>
 							<span class="box-text">喇叭</span>
 						</div>
 						<div class="screen-check-content hoverPointer" @click="markerClick(4)">
-							<span class="box-btn box-uncheck" :class="{'box-check':markList[4]}"></span>
+							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[4] }"></span>
 							<span class="box-text">危险作业</span>
 						</div>
 						<div class="screen-check-content hoverPointer" @click="markerClick(5)">
-							<span class="box-btn box-uncheck" :class="{'box-check':markList[5]}"></span>
+							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[5] }"></span>
 							<span class="box-text">风险区域</span>
 						</div>
 						<div class="screen-check-content hoverPointer" @click="markerClick(6)">
-							<span class="box-btn box-uncheck" :class="{'box-check':markList[6]}"></span>
+							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[6] }"></span>
 							<span class="box-text">人员</span>
 						</div>
 						<div class="caret-dropdown">
 							<el-icon @click="userSelect" v-if="showUserSelect" :size="14">
-								<ArrowUpBold/>
+								<ArrowUpBold />
 							</el-icon>
 							<el-icon @click="userSelect" v-else :size="14">
-								<ArrowDownBold/>
+								<ArrowDownBold />
 							</el-icon>
 						</div>
 					</div>
@@ -67,17 +67,9 @@
 						<div @click="changeDropIndex('4')" class="drop-content-item"
 							 :class="{'active':dropIndex==='4'}">访客
 						</div>-->
-						<el-tree
-							ref="group"
-							id="bigScreenTree"
-							node-key="id"
-							:data="postList"
-							show-checkbox
-							:current-node-key="''"
-							:highlight-current="true"
-							:expand-on-click-node="false"
-							@node-click="groupClick"
-						></el-tree>
+						<el-tree ref="group" id="bigScreenTree" node-key="id" :data="postList" show-checkbox
+							:current-node-key="''" :highlight-current="true" :expand-on-click-node="false"
+							@node-click="groupClick"></el-tree>
 
 						<el-button type="primary" @click="userFilter">确定
 						</el-button>
@@ -93,7 +85,7 @@
 			<!--搜索-->
 			<div class="screen-search">
 				<div class="search-content"><input type="text" placeholder="输入姓名/定位卡号/车牌号进行查找" class="input-focus"><span
-					class="close-btn el-icon-circle-close" style="display: none;"></span>
+						class="close-btn el-icon-circle-close" style="display: none;"></span>
 					<div class="search"></div>
 					<div class="auto-suggestion" style="display: none;">
 						<div class="suggestion-select-ul"></div>
@@ -108,9 +100,9 @@
 				<div class="simple-title">
 					<span>数据统计</span>
 					<div class="countTypeWrap">
-						<span :class="{'activeCount':countIndex==='1'}" @click="countINdexChange('1')">有卡</span>
+						<span :class="{ 'activeCount': countIndex === '1' }" @click="countINdexChange('1')">有卡</span>
 						<el-divider direction="vertical"></el-divider>
-						<span :class="{'activeCount':countIndex==='2'}" @click="countINdexChange('2')">在厂</span>
+						<span :class="{ 'activeCount': countIndex === '2' }" @click="countINdexChange('2')">在厂</span>
 					</div>
 				</div>
 				<div class="count-list">
@@ -119,8 +111,8 @@
 						<div class="item-info">
 							<div title="员工" class="normal">内部员工</div>
 							<div class="bottom">
-								<span class="large">{{userCount.count_employee}}</span>&nbsp;<span
-								class="normal">人</span>
+								<span class="large">{{ userCount.count_employee }}</span>&nbsp;<span
+									class="normal">人</span>
 							</div>
 						</div>
 					</div>
@@ -128,8 +120,8 @@
 						<div class="item-img item-img1"></div>
 						<div class="item-info">
 							<div title="外来人员" class="normal">访客</div>
-							<div class="bottom"><span class="large">{{userCount.count_visitor}}</span>&nbsp;<span
-								class="normal">人</span>
+							<div class="bottom"><span class="large">{{ userCount.count_visitor }}</span>&nbsp;<span
+									class="normal">人</span>
 							</div>
 						</div>
 					</div>
@@ -138,8 +130,8 @@
 						<div class="item-info">
 							<div title="承包商" class="normal">相关方</div>
 							<div class="bottom">
-								<span class="large">{{userCount.count_remployee}}</span>&nbsp;<span
-								class="normal">人</span>
+								<span class="large">{{ userCount.count_remployee }}</span>&nbsp;<span
+									class="normal">人</span>
 							</div>
 						</div>
 					</div>
@@ -147,10 +139,10 @@
 			</div>
 			<div class="cockpit-alarm">
 				<div class="divider"></div>
-				<div class="simple-title" @click="warningDetail= true">
+				<div class="simple-title" @click="warningDetail = true">
 					<span>报警实时展示</span>
 					<div class="simple-btn-bg alarm-bell danger">
-						<span>{{wStatistics.total_count}}</span>&nbsp;报警
+						<span>{{ wStatistics.total_count }}</span>&nbsp;报警
 					</div>
 				</div>
 				<div class="alarm-content">
@@ -161,8 +153,8 @@
 						<!--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>
-							<span class="item-number" style="">{{item.count}}</span>
+							<span class="item-name">{{ item.cate__name }}</span>
+							<span class="item-number" style="">{{ item.count }}</span>
 						</div>
 					</div>
 				</div>
@@ -171,16 +163,16 @@
 						<div><span>报警数据</span></div>
 						<div class="action-group">
 							<span class="detail-text-btn">查看详情</span>
-							<span class="icon-close" @click="warningDetail=false"></span>
+							<span class="icon-close" @click="warningDetail = false"></span>
 						</div>
 					</div>
 					<div class="detail-content">
 						<div class="content-head">
 							<div class="screen-multiple-select head-select">
-								<div class="multiple-select-tags" @click="warningTypeShow=true">
+								<div class="multiple-select-tags" @click="warningTypeShow = true">
 									<span class="multiple-select-input">全部</span>
 									<el-icon color="#ffffff" class="no-inherit">
-										<ArrowDownBold/>
+										<ArrowDownBold />
 									</el-icon>
 								</div>
 								<div v-show="warningTypeShow" class="multiple-select-wrap">
@@ -189,35 +181,32 @@
 											<span class="multiple-select-label">全部</span>
 										</div>
 
-										<div v-for="type in warningTypes" :key="type.id" class="multiple-select-li" @click="warningTypeSelected(type.id)">
-											<span title="超员报警" class="multiple-select-label">{{type.name}}</span>
+										<div v-for="typeItem in warningTypes" :key="typeItem.id"
+											class="multiple-select-li" @click="warningTypeSelected(typeItem.id)">
+											<span title="超员报警" class="multiple-select-label">{{ typeItem.name }}</span>
 										</div>
 									</div>
 								</div>
 							</div>
 							<div class="head-sound sound-ring"></div>
 						</div>
-						<div class="content-body" v-if="warningData.total>0">
+						<div class="content-body" v-if="warningData.total > 0">
 							<!--warningList-->
 							<div class="alarm-item" v-for="(item) in warningData.list" :key="item.id">
 								<div class="item-type">未处理</div>
 								<div class="item-content" @click="warningItemShow(item)">
-									<div class="item-content-top"><span class="time">{{item.create_time}}</span><span
-										class="status">待处理</span></div>
+									<div class="item-content-top"><span class="time">{{ item.create_time }}</span><span
+											class="status">待处理</span></div>
 									<div class="item-content-middle mt6">
-										<div class="alarm-info">{{item.voice_msg}}</div>
+										<div class="alarm-info">{{ item.voice_msg }}</div>
 									</div>
 								</div>
 							</div>
 						</div>
-						<div v-if="warningData.total>0" class="content-footer" style="">
-							<el-pagination
-								:page-size="warningData.params.page_size"
-								:pager-count="5"
-								v-model:currentPage="warningData.params.page"
-								layout="prev, pager, next"
-								:total="warningData.total"
-								@current-change="handleCurrentChange"/>
+						<div v-if="warningData.total > 0" class="content-footer" style="">
+							<el-pagination :page-size="warningData.params.page_size" :pager-count="5"
+								v-model:currentPage="warningData.params.page" layout="prev, pager, next"
+								:total="warningData.total" @current-change="handleCurrentChange" />
 						</div>
 						<div class="noData" v-else>
 							<img src="/img/nodata.png">
@@ -227,21 +216,16 @@
 			</div>
 			<div class="cockpit-info">
 				<div class="divider"></div>
-				<div class="simple-title">
+				<div class="simple-title area-simple-title">
 					<div class="header-tab">
 						<span class="tab-item">区域信息情况</span>
 						<!--<span class="tab-item" :class="{'tab-item-active':LBType==='2'}" @click="cockpitChange('2')">部门信息情况</span>-->
 					</div>
 					<div class="simple-btn-bg alarm-btn">需充电卡片0人</div>
 				</div>
-				<div class="info-body">
-					<el-table
-						:data="areaList"
-						style="width: 100%"
-						highlight-current-row
-						class="bigScreenTable"
-						@row-click="areaRowClick"
-					>
+				<div class="info-body area-info-body">
+					<el-table :data="areaList" style="width: 100%;" :height="areaTableHeight" highlight-current-row
+						class="bigScreenTable" @row-click="areaRowClick">
 						<el-table-column label="区域" prop="name"></el-table-column>
 						<el-table-column label="当前人数" prop="count_people"></el-table-column>
 					</el-table>
@@ -256,20 +240,28 @@
 						@node-click="groupClick"
 					></el-tree>-->
 				</div>
-				<div class="alarm-detail-info left_arrow" v-if="areaDetail">
+				<div class="alarm-detail-info left_arrow" v-if="areaDetail" style="width:150%">
 					<div class="simple-title">
 						<div><span>区域统计</span></div>
-						<span class="icon-close" @click="areaDetail=false"></span>
+						<span class="icon-close" @click="areaDetail = false"></span>
 					</div>
 					<div class="detail-content">
 						<div class="content-head">
+							<div class="{'areaActive':areaShowType==1} areaNavItem" style="color:#ffffff">围栏</div>
+							<div class="{'areaActive':areaShowType==2} areaNavItem" style="color:#ffffff">作业</div>
+							<div class="{'areaActive':areaShowType==3} areaNavItem" style="color:#ffffff">监控</div>
+							<div class="{'areaActive':areaShowType==4} areaNavItem" style="color:#ffffff">喇叭</div>
 						</div>
 						<div class="content-body">
+							<el-table>
+							</el-table>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
+		<div style="display:flex;flex-direction:colum">
+		</div>
 		<!--切换-->
 		<!--<div class="screen-tab">
 			<div class="screen-tab-content">
@@ -359,7 +351,7 @@
 		<div class="screen-user" v-if="screenUser">
 			<div class="simple-title">
 				<div>人员信息</div>
-				<div class="simple-btn" @click="screenUser=false">关闭</div>
+				<div class="simple-btn" @click="screenUser = false">关闭</div>
 			</div>
 			<div class="h100" style="">
 				<div class="person-info-header">
@@ -372,24 +364,24 @@
 						<div class="basic-info">
 							<div class="info-item">
 								<span class="info-item-name">姓名：</span>
-								<span class="info-item-info">{{screenUserItem.name}}</span>
+								<span class="info-item-info">{{ screenUserItem.name }}</span>
 							</div>
 							<div class="info-item">
 								<span class="info-item-name">类型：</span>
-								<span class="info-item-info" v-if="screenUserItem.type==='employee'">内部员工</span>
+								<span class="info-item-info" v-if="screenUserItem.type === 'employee'">内部员工</span>
 								<span class="info-item-info" v-else>访客</span>
 							</div>
 							<div class="info-item">
 								<span class="info-item-name">定位卡：</span>
-								<span class="info-item-info">{{screenUserItem.id}}</span>
+								<span class="info-item-info">{{ screenUserItem.id }}</span>
 							</div>
 							<div class="info-item">
 								<span class="info-item-name">部门：</span>
-								<span class="info-item-info">{{screenUserItem.belong_dept_name}}</span>
+								<span class="info-item-info">{{ screenUserItem.belong_dept_name }}</span>
 							</div>
 							<div class="info-item">
 								<span class="info-item-name">岗位：</span>
-								<span class="info-item-info">{{screenUserItem.post_name}}</span>
+								<span class="info-item-info">{{ screenUserItem.post_name }}</span>
 							</div>
 						</div>
 						<div class="simple-btn basic-btn" @click="showUserDetail">查看详情</div>
@@ -411,29 +403,23 @@
 					</div>
 				</div>
 				<div class="screen-per-list">
-					<el-table
-						:data="userList"
-						style="width: 100%"
-						:row-key="row =>{ return row.id }"
-						highlight-current-row
-						class="bigScreenTable"
-						@row-click="userRowClick"
-					>
+					<el-table :data="userList" style="width: 100%" :row-key="row => { return row.id }"
+						highlight-current-row class="bigScreenTable" @row-click="userRowClick">
 						<el-table-column label="姓名">
 							<template #default="scope">
-								<span v-if="scope.row.my_info.employee_">{{scope.row.my_info.employee_.name}}</span>
+								<span v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.name }}</span>
 							</template>
 						</el-table-column>
 						<el-table-column label="部门">
 							<template #default="scope">
 								<span
-									v-if="scope.row.my_info.employee_">{{scope.row.my_info.employee_.belong_dept_name}}</span>
+									v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.belong_dept_name }}</span>
 							</template>
 						</el-table-column>
 						<el-table-column label="岗位">
 							<template #default="scope">
 								<span
-									v-if="scope.row.my_info.employee_">{{scope.row.my_info.employee_.post_name}}</span>
+									v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.post_name }}</span>
 							</template>
 						</el-table-column>
 					</el-table>
@@ -442,7 +428,7 @@
 				<div class="person-cert right_arrow" v-if="screenUserDetail">
 					<div class="simple-title">
 						<div>人员信息</div>
-						<div class="icon-close" @click="screenUserDetail=false"></div>
+						<div class="icon-close" @click="screenUserDetail = false"></div>
 					</div>
 					<div class="basic-head">
 						<div class="header-tab">
@@ -453,11 +439,11 @@
 					<div class="basic-info">
 						<div class="info-item">
 							<span class="info-item-name">姓名：</span>
-							<span class="info-item-info">{{screenUserItemDetail.name}}</span>
+							<span class="info-item-info">{{ screenUserItemDetail.name }}</span>
 						</div>
 						<div class="info-item">
 							<span class="info-item-name">姓别：</span>
-							<span class="info-item-info">{{screenUserItemDetail.gender}}</span>
+							<span class="info-item-info">{{ screenUserItemDetail.gender }}</span>
 						</div>
 
 						<div class="info-item">
@@ -466,11 +452,13 @@
 						</div>
 						<div class="info-item">
 							<span class="info-item-name">部门：</span>
-							<span class="info-item-info" v-if="screenUserItemDetail.belong_dept_">{{screenUserItemDetail.belong_dept_.name}}</span>
+							<span class="info-item-info"
+								v-if="screenUserItemDetail.belong_dept_">{{ screenUserItemDetail.belong_dept_.name }}</span>
 						</div>
 						<div class="info-item">
 							<span class="info-item-name">岗位：</span>
-							<span class="info-item-info" v-if="screenUserItemDetail.post_">{{screenUserItemDetail.post_.name}}</span>
+							<span class="info-item-info"
+								v-if="screenUserItemDetail.post_">{{ screenUserItemDetail.post_.name }}</span>
 						</div>
 						<div class="info-item">
 							<span class="info-item-name">证件类型：</span>
@@ -478,18 +466,21 @@
 						</div>
 						<div class="info-item">
 							<span class="info-item-name">证件号码：</span>
-							<span class="info-item-info">{{screenUserItemDetail.id_number}}</span>
+							<span class="info-item-info">{{ screenUserItemDetail.id_number }}</span>
 						</div>
 						<div class="info-item">
 							<span class="info-item-name">联系电话：</span>
-							<span class="info-item-info">{{screenUserItemDetail.phone}}</span>
+							<span class="info-item-info">{{ screenUserItemDetail.phone }}</span>
 						</div>
 					</div>
 					<div class="basic-cert" style="display: none;">
 						<div class="el-empty">
 							<div class="el-empty__image" style="width: 160px;">
-								<img src="/img/nodata.png" ondragstart="return false"></div>
-							<div class="el-empty__description"><p></p></div>
+								<img src="/img/nodata.png" ondragstart="return false">
+							</div>
+							<div class="el-empty__description">
+								<p></p>
+							</div>
 						</div>
 					</div>
 					<div class="el-loading-mask" style="background-color: transparent; display: none;">
@@ -637,13 +628,14 @@
 			</div>
 			<div class="risk-content">
 				<div class="risk-basic">
-					<div class="risk-item"><span class="risk-item-name">风险区域名称：</span><span class="risk-item-info">重大风险区域</span>
+					<div class="risk-item"><span class="risk-item-name">风险区域名称：</span><span
+							class="risk-item-info">重大风险区域</span>
 					</div>
 					<div class="risk-item"><span class="risk-item-name">风险等级：</span><span
-						class="risk-item-info">重大风险</span>
+							class="risk-item-info">重大风险</span>
 					</div>
 					<div class="risk-item"><span class="risk-item-name">创建人：</span><span
-						class="risk-item-info">李英</span></div>
+							class="risk-item-info">李英</span></div>
 				</div>
 				<div class="simple-title">
 					<div>详细信息</div>
@@ -659,7 +651,7 @@
 			<div class="risk-content">
 				<div class="risk-basic">
 					<div class="risk-item">
-						<span class="risk-item-info">{{screenWarningItem.voice_msg}}</span>
+						<span class="risk-item-info">{{ screenWarningItem.voice_msg }}</span>
 					</div>
 				</div>
 			</div>
@@ -671,28 +663,30 @@
 					<div class="risk-item">
 						<span class="risk-item-name">报警区域：</span>
 						<span class="risk-item-info"
-							  v-if="screenWarningItem.area_">{{screenWarningItem.area_.name}}</span>
+							v-if="screenWarningItem.area_">{{ screenWarningItem.area_.name }}</span>
 					</div>
-					<div class="risk-item" v-if="screenWarningItem.employee_!==null">
+					<div class="risk-item" v-if="screenWarningItem.employee_ !== null">
 						<span class="risk-item-name">触发人：</span>
-						<span class="risk-item-info" v-if="screenWarningItem.employee_">{{screenWarningItem.employee_.name}}</span>
+						<span class="risk-item-info"
+							v-if="screenWarningItem.employee_">{{ screenWarningItem.employee_.name }}</span>
 					</div>
-					<div class="risk-item" v-if="screenWarningItem.employee_!==null">
+					<div class="risk-item" v-if="screenWarningItem.employee_ !== null">
 						<span class="risk-item-name">触发人部门：</span>
-						<span class="risk-item-info" v-if="screenWarningItem.employee_.belong_dept_">{{screenWarningItem.employee_.belong_dept_.name}}</span>
+						<span class="risk-item-info"
+							v-if="screenWarningItem.employee_.belong_dept_">{{ screenWarningItem.employee_.belong_dept_.name }}</span>
 					</div>
 					<div class="risk-item">
 						<span class="risk-item-name">触发事件：</span>
 						<span class="risk-item-info" v-for="ite in screenWarningItem.cates_"
-							  :key="ite">{{ite.name}}</span>
+							:key="ite">{{ ite.name }}</span>
 					</div>
 					<div class="risk-item">
 						<span class="risk-item-name">触发时间：</span>
-						<span class="risk-item-info">{{screenWarningItem.create_time}}</span>
+						<span class="risk-item-info">{{ screenWarningItem.create_time }}</span>
 					</div>
 					<div class="risk-item">
 						<span class="risk-item-name">事件截图：</span>
-						<img :src="'http://10.0.11.101:8000'+screenWarningItem.global_img" style="width: 250px;">
+						<img :src="'http://10.0.11.101:8000' + screenWarningItem.global_img" style="width: 250px;">
 					</div>
 				</div>
 			</div>
@@ -703,13 +697,8 @@
 				<div class="risk-basic">
 					<div class="risk-item">
 						<span class="risk-item-name">处理描述：</span>
-						<el-input
-							class="item-textarea"
-							v-model="warningForm.handle_desc"
-							:rows="3"
-							type="textarea"
-							placeholder="请输入处理描述"
-						/>
+						<el-input class="item-textarea" v-model="warningForm.handle_desc" :rows="3" type="textarea"
+							placeholder="请输入处理描述" />
 					</div>
 					<div class="risk-item">
 						<span class="risk-item-name">事件类型：</span>
@@ -729,1457 +718,1208 @@
 	</div>
 </template>
 <script>
-	import {genTree} from "@/utils/verificate";
+import { genTree } from "@/utils/verificate";
 
-	export default {
-		data() {
-			return {
-				domMarkerLayer: null,
-				userMaskerLayer: null,
-				jobDomMarkerLayer: null,
-				riskMarkerLayer: null,//风险区域
-				areaMarkerLayer: null,//区域展示
-				pointMarkerLayer: null,//点位图层
-				polygonMaskerLayer: null,//危险作业
-				cameraMaskerLayer: null,//摄像头
-				materialsMaskerLayer: null,//消防物资
-				carsMaskerLayer: null,//车辆
-				manMaskerLayer: null,//人员
-				flyManager: null,
-				eareMarker: null,
-				dropIndex: '1',
-				countIndex: '2',
-				markList: [false, false, false, false, false, false, false],
-				autoRun: false,
-				tracking: false,
-				areaDetail: false,
-				screenJob: false,
-				screenUser: false,
-				screenRisk: false,
-				screenWarning: false,
-				screenUserDetail: false,
-				warningTypeShow: false,
-				showUserSelect: false,
-				warningDetail: false,
-				filterCtrlFocus: true,
-				warningListTotal: 0,
-				warningData: {
-					list: [],
-					total: 0,
-					params: {
-						page: 1,
-						page_size: 10,
-						start_create:'',
+export default {
+	data() {
+		return {
+			domMarkerLayer: null,
+			userMaskerLayer: null,
+			jobDomMarkerLayer: null,
+			riskMarkerLayer: null,//风险区域
+			areaMarkerLayer: null,//区域展示
+			pointMarkerLayer: null,//点位图层
+			polygonMaskerLayer: null,//危险作业
+			cameraMaskerLayer: null,//摄像头
+			materialsMaskerLayer: null,//消防物资
+			carsMaskerLayer: null,//车辆
+			manMaskerLayer: null,//人员
+			flyManager: null,
+			eareMarker: null,
+			dropIndex: '1',
+			countIndex: '2',
+			areaShowType:'1',
+			markList: [false, false, false, false, false, false, false],
+			autoRun: false,
+			tracking: false,
+			areaDetail: false,
+			screenJob: false,
+			screenUser: false,
+			screenRisk: false,
+			screenWarning: false,
+			screenUserDetail: false,
+			warningTypeShow: false,
+			showUserSelect: false,
+			warningDetail: false,
+			filterCtrlFocus: true,
+			warningListTotal: 0,
+			warningData: {
+				list: [],
+				total: 0,
+				params: {
+					page: 1,
+					page_size: 10,
+					start_create: '',
+				}
+			},
+			cateAggForm: {
+				start_create: '',
+				is_handled: false,
+				completed: true
+			},
+			wStatistics: {},
+			warningTypes: [],//事件类型
+			Vchannels: [],//摄像头列表
+			warningList: [],//报警事件列表
+			speakerList: [],//喇叭列表
+			userList: [],//人员列表
+			deptList: [],//部门列表
+			postList: [],//岗位列表
+			dangerList: [],//岗位列表
+			areaList: [],//区域列表/风险区域列表
+			//数据统计
+			userCount: {
+				total: 0,
+				count_employee: 0,//内部员工
+				count_remployee: 0,//访客
+				count_visitor: 0//相关方
+			},
+
+			screenJobItem: {},//危险作业信息
+			screenRiskItem: {},//风险区域信息
+			screenWarningItem: {},//风险区域信息
+			screenUserItem: {},//人员信息
+			screenUserItemDetail: {},//人员信息
+			url: '',
+			params: {
+				json: {
+					data: {
+						channelId: "",
+						streamType: "2",
+						type: "flv"
 					}
 				},
-				cateAggForm:{
-					start_create: '',
-					is_handled: false,
-					completed: true
-				},
-				wStatistics:{},
-				warningTypes:[],//事件类型
-				Vchannels: [],//摄像头列表
-				warningList: [],//报警事件列表
-				speakerList: [],//喇叭列表
-				userList: [],//人员列表
-				deptList: [],//部门列表
-				postList: [],//岗位列表
-				dangerList: [],//岗位列表
-				areaList: [],//区域列表/风险区域列表
-				//数据统计
-				userCount: {
-					total: 0,
-					count_employee: 0,//内部员工
-					count_remployee: 0,//访客
-					count_visitor: 0//相关方
-				},
+				code: 'video_realtime'
+			},
+			group: [],
+			groupsProps: {
+				value: "id",
+				label: "name",
+				multiple: true,
+				checkStrictly: true,
+			},
+			filters: {
+				type: '',
+				dept: '',
+				keyword: '',
+			},
+			warningId: '',
+			warningForm: {
+				handle_desc: '',
+				mark: '1',
+			},
+			LBType: '1',
+			userMarker: {},
+			todayDate: '',
+			currentDay: '',
+			currentTime: '',
+			currentWeek: '',
+			areaTableHeight: null,
+		}
+	},
+	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() {
+		let date = new Date();
+		this.timeNow = date.getDay();
+		this.todayDate = this.warningData.params.start_create = this.cateAggForm.start_create = this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd');
+		this.showTime();
+		setInterval(() => {
+			this.showTime();
+		}, 1000);
+		window.map = new jsmap.JSMap({
+			mapType: jsmap.JSMapType.MAP_3D,
+			container: 'mapContainer',
+			mapServerURL: 'data/map',
+			enableShadows: false, //是否开启阴影 默认false
+			enableLighting: false, //是否开发光照 默认false
+			showBuildingMarker: false,
+			// showNavigationDisplay: true,
+			mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
+			floorControlOptions: {
+				floorHeight: 20,//楼层间距
+				position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
+				offset: {
+					x: 50,
+					y: 200,
+				}//控件偏移位置
+			},
+			imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
+			backgroundColor: '#3798ff',  //背景颜色
+			viewOptions: {
+				//屏幕中心坐标
+				center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
+				// center: {x:120,y:30,z:10},
+				//相机距屏幕中心点距离（单位m）
+				distance: 550,
+				// 旋转角（单位°）
+				rotate: 0,
+				//倾斜角（单位°）
+				tilt: 45,
+			}
+		});
+		window.map.openMapById('0000');
+		window.map.on('loadComplete', e => {
+			this.riskMaskerLayers();//风险区域
+			this.userMaskerLayers();//人员
+			this.cameraMaskerLayers();//摄像头
+			this.domMarkerLayers();//监控视频
+			this.polygonMarkerLayers();//危险作业
+			this.speakersMaskerLayers();//喇叭
+			this.jobDomMarkerLayers();//危险作业图片
+			this.areaMarkerLayers();//危险作业图片
 
-				screenJobItem: {},//危险作业信息
-				screenRiskItem: {},//风险区域信息
-				screenWarningItem: {},//风险区域信息
-				screenUserItem: {},//人员信息
-				screenUserItemDetail: {},//人员信息
-				url: '',
-				params: {
-					json: {
-						data: {
-							channelId: "",
-							streamType: "2",
-							type: "flv"
+			let compassControl = new jsmap.JSCompassControl({
+				position: jsmap.JSControlPosition.LEFT_TOP,
+				offset: {
+					x: 450,
+					y: 70
+				}
+			});
+			window.map.addControl(compassControl);
+			let zoomControl = new jsmap.JSZoomControl({
+				position: jsmap.JSControlPosition.LEFT_TOP,
+				offset: {
+					x: 480,
+					y: 60
+				}
+			});
+			window.map.addControl(zoomControl);
+		});
+		window.map.on('mapClickNode', event => {
+			let item = event;
+			let that = this;
+			let type = event.nodeType.toString();
+			console.log(type === 'Symbol(icontextmaker)');
+			if (item.markers.length > 0) {
+				if (type === 'Symbol(boxmarker)') {
+					this.screenJob = false;
+					this.screenWarning = false;
+					this.screenRisk = true;
+					//风险区域
+				} else if (type === 'Symbol(icontextmaker)') {
+					//摄像头和人员
+					if (document.getElementById(item.markers[0].id) === null) {
+						if (item.markers[0].image === "/img/camera.svg") {
+							//摄像头
+							this.params.json.data.channelId = item.markers[0].id;
+							let domMarker = new jsmap.JSDomMarker({
+								id: item.markers[0].id + 'mark',
+								position: new jsmap.JSPoint(item.markers[0].position.x, item.markers[0].position.y, 0),
+								floorId: 1,
+								depthTest: true,
+								content: `<div id="` + item.markers[0].id + `" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
+								offset: jsmap.JSControlPosition.RIGHT_CENTER,
+								displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
+								marginOffset: {
+									x: 30,
+									y: -50
+								},
+								properties: {
+									type: 0,
+								},
+								callback: (node) => {
+									console.log(node);
+								}
+							});
+							this.domMarkerLayer.addMarker(domMarker);
+							var otest = document.getElementById(item.markers[0].id);
+							// 创建一个新dom,并设置icon，绑定点击事件
+							let newEle = document.createElement("div");
+							newEle.className = "v_title";
+							newEle.setAttribute("style", "display:flex;justify-content: space-between;padding:10px 0");
+							let title = document.createElement("div");
+							title.innerText = "实时监控";
+							newEle.style.color = "#ffffff";
+							let close = document.createElement("div");
+							close.className = "v_close";
+							close.setAttribute("style", "width: 16px;height: 16px;background: url(/img/close.png) no-repeat;background-size: 100% 100%;");
+							newEle.appendChild(title);
+							newEle.appendChild(close);
+							let newEle2 = document.createElement("video");
+							newEle2.id = item.markers[0].id + 'videoPlayer';
+							newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
+							// 在对应dom 下追加创建的dom
+							otest.appendChild(newEle);
+							otest.appendChild(newEle2);
+							newEle2.onclick = () => {
+								newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;-webkit-animation: rotate 4s linear infinite;animation: rotate 4s linear infinite;");
+								this.$API.am.video.item.req(this.params).then(res => {
+									console.log(res);
+									this.url = res.url;
+									if (flvjs.isSupported()) {
+										let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
+										let flvPlayer = flvjs.createPlayer({
+											type: 'flv',
+											url: res.url
+										});
+										flvPlayer.attachMediaElement(videoElement);
+										flvPlayer.load();
+										newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
+										flvPlayer.play();
+									}
+								})
+							};
+							close.onclick = () => {
+								let nodeMark = document.getElementById(item.markers[0].id);
+								nodeMark.remove();
+							}
+						} else {
+							//人员
+							that.screenUserItem = item.properties.get("employee");
+							that.screenUser = true;
+							debugger;
+							window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], {
+								duration: 1000
+							})
 						}
-					},
-					code: 'video_realtime'
-				},
-				group: [],
-				groupsProps: {
-					value: "id",
-					label: "name",
-					multiple: true,
-					checkStrictly: true,
-				},
-				filters: {
-					type: '',
-					dept: '',
-					keyword: '',
-				},
-				warningId: '',
-				warningForm: {
-					handle_desc: '',
-					mark: '1',
-				},
-				LBType: '1',
-				userMarker: {},
-				todayDate:'',
-				currentDay:'',
-				currentTime:'',
+					}
+
+				} else if (type === 'Symbol(polygonmarker)') {
+					//危险作业
+					this.screenRisk = false;
+					this.screenWarning = false;
+					this.screenJob = true;
+				}
+			} else {
+			}
+		});
+		//左侧数据统计
+		this.getManCount();//人员统计$$
+		this.getWarnings();//报警统计$$
+		this.getAreas();//区域/风险区域$$
+		this.getGroup();//部门$$
+		//右上展示数据
+		// this.getVchannels();//摄像头$$
+		this.getDangers();//危险作业$$
+		// this.getRisks();//风险区域$$
+		this.getSpeakers();//喇叭$$
+		// this.getAllMen();//人员
+		this.getAllPost();//岗位
+		this.getWarningTotal();//事件统计
+		this.getWarningType();//事件类型
+		let pageHeight = document.getElementsByClassName('screen-cockpit')[0].clientHeight;
+		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;
+		let areaTableHeight = domHeight - height3 - 10;
+		this.areaTableHeight = areaTableHeight;
+		document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
+		// document.getElementsByClassName('area-info-body')[0].style.height = simpleBodyHeight + 'px';
+		setInterval(function () { }, 3000)
+	},
+	methods: {
+		showTime() {
+			this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
+			this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
+			this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
+		},
+		getWarningTotal() {
+			let that = this;
+			that.$API.ecm.event.cateAgg.req(that.cateAggForm).then(res => {
+				if (res.err_msg) { } else {
+					that.wStatistics = res;
+				}
+			})
+		},
+		getWarningType() {
+			let that = this;
+			that.$API.ecm.event_cate.list.req().then(res => {
+				if (res.err_msg) { } else {
+					that.warningTypes = res.results;
+				}
+			})
+		},
+		areaRowClick(data) {
+			let that = this;
+			that.areaDetail = true;
+			// let points = data.third_info.xx_rail.detail.polygon.points[0];
+			window.map.flyToPosition(new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0), { duration: 1000 });
+		},
+		//岗位
+		getAllPost() {
+			this.$API.system.post.list.req({ page: 0 }).then(res => {
+				let arr = [];
+				let children = genTree(res);
+				for (let i = 0; i < 4; i++) {
+					let obj = new Object();
+					if (i === 0) {
+						obj.id = '';
+						obj.name = '全部';
+						obj.label = '全部';
+					} else if (i === 1) {
+						obj.id = '';
+						obj.name = '内部员工';
+						obj.label = '内部员工';
+						obj.children = children;
+					} else if (i === 2) {
+						obj.id = '';
+						obj.name = '相关方';
+						obj.label = '相关方';
+					} else if (i === 3) {
+						obj.id = '';
+						obj.name = '访客';
+						obj.label = '访客';
+					}
+					arr.push(obj)
+				}
+				this.postList = arr;
+			})
+		},
+		//人员统计
+		getManCount() {
+			let that = this;
+			if (that.countIndex === '2') {
+				that.$API.third.blt.countNow.req().then(res => {
+					if (res.err_msg) {
+					} else {
+						that.userCount = { ...res };
+					}
+				})
+			} else {
+				that.$API.third.blt.countBind.req().then(res => {
+					if (res.err_msg) {
+					} else {
+						that.userCount = { ...res };
+					}
+				})
 			}
 		},
-		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)
+		//有卡/在线切换
+		countINdexChange(index) {
+			this.countIndex = index;
+			this.getManCount();
 		},
-		mounted() {
-			let date = new Date();
-			this.timeNow = date.getDay();
-			this.todayDate = this.warningData.params.start_create = this.cateAggForm.start_create =this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd');
-			this.showTime();
-			setInterval(()=>{
-				this.showTime();
-			},1000);
-			window.map = new jsmap.JSMap({
-				mapType: jsmap.JSMapType.MAP_3D,
-				container: 'mapContainer',
-				mapServerURL: 'data/map',
-				enableShadows: false, //是否开启阴影 默认false
-				enableLighting: false, //是否开发光照 默认false
-				showBuildingMarker: false,
-				// showNavigationDisplay: true,
-				mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
-				floorControlOptions: {
-					floorHeight: 20,//楼层间距
-					position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
-					offset: {
-						x: 50,
-						y: 200,
-					}//控件偏移位置
-				},
-				imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
-				backgroundColor: '#3798ff',  //背景颜色
-				viewOptions: {
-					//屏幕中心坐标
-					center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
-					// center: {x:120,y:30,z:10},
-					//相机距屏幕中心点距离（单位m）
-					distance: 550,
-					// 旋转角（单位°）
-					rotate: 0,
-					//倾斜角（单位°）
-					tilt: 45,
-				}
-			});
-			window.map.openMapById('0000');
-			window.map.on('loadComplete', e => {
-				this.riskMaskerLayers();//风险区域
-				this.userMaskerLayers();//人员
-				this.cameraMaskerLayers();//摄像头
-				this.domMarkerLayers();//监控视频
-				this.polygonMarkerLayers();//危险作业
-				this.speakersMaskerLayers();//喇叭
-				this.jobDomMarkerLayers();//危险作业图片
-				this.areaMarkerLayers();//危险作业图片
-
-				let compassControl = new jsmap.JSCompassControl({
-					position: jsmap.JSControlPosition.LEFT_TOP,
-					offset: {
-						x: 450,
-						y: 70
-					}
-				});
-				window.map.addControl(compassControl);
-				let zoomControl = new jsmap.JSZoomControl({
-					position: jsmap.JSControlPosition.LEFT_TOP,
-					offset: {
-						x: 480,
-						y: 60
-					}
-				});
-				window.map.addControl(zoomControl);
-			});
-			window.map.on('mapClickNode', event => {
-				let item = event;
-				let that = this;
-				let type = event.nodeType.toString();
-				console.log(type === 'Symbol(icontextmaker)');
-				if (item.markers.length > 0) {
-					if (type === 'Symbol(boxmarker)') {
-						this.screenJob = false;
-						this.screenWarning = false;
-						this.screenRisk = true;
-						//风险区域
-					} else if (type === 'Symbol(icontextmaker)') {
-						//摄像头和人员
-						if (document.getElementById(item.markers[0].id) === null) {
-							if (item.markers[0].image === "/img/camera.svg") {
-								//摄像头
-								this.params.json.data.channelId = item.markers[0].id;
-								let domMarker = new jsmap.JSDomMarker({
-									id: item.markers[0].id + 'mark',
-									position: new jsmap.JSPoint(item.markers[0].position.x, item.markers[0].position.y, 0),
-									floorId: 1,
-									depthTest: true,
-									content: `<div id="` + item.markers[0].id + `" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
-									offset: jsmap.JSControlPosition.RIGHT_CENTER,
-									displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
-									marginOffset: {
-										x: 30,
-										y: -50
-									},
-									properties: {
-										type: 0,
-									},
-									callback: (node) => {
-										console.log(node);
-									}
-								});
-								this.domMarkerLayer.addMarker(domMarker);
-								var otest = document.getElementById(item.markers[0].id);
-								// 创建一个新dom,并设置icon，绑定点击事件
-								let newEle = document.createElement("div");
-								newEle.className = "v_title";
-								newEle.setAttribute("style", "display:flex;justify-content: space-between;padding:10px 0");
-								let title = document.createElement("div");
-								title.innerText = "实时监控";
-								newEle.style.color = "#ffffff";
-								let close = document.createElement("div");
-								close.className = "v_close";
-								close.setAttribute("style", "width: 16px;height: 16px;background: url(/img/close.png) no-repeat;background-size: 100% 100%;");
-								newEle.appendChild(title);
-								newEle.appendChild(close);
-								let newEle2 = document.createElement("video");
-								newEle2.id = item.markers[0].id + 'videoPlayer';
-								newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
-								// 在对应dom 下追加创建的dom
-								otest.appendChild(newEle);
-								otest.appendChild(newEle2);
-								newEle2.onclick = () => {
-									newEle2.setAttribute("style","width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;-webkit-animation: rotate 4s linear infinite;animation: rotate 4s linear infinite;");
-									this.$API.am.video.item.req(this.params).then(res => {
-										console.log(res);
-										this.url = res.url;
-										if (flvjs.isSupported()) {
-											let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
-											let flvPlayer = flvjs.createPlayer({
-												type: 'flv',
-												url: res.url
-											});
-											flvPlayer.attachMediaElement(videoElement);
-											flvPlayer.load();
-											newEle2.setAttribute("style","width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
-											flvPlayer.play();
-										}
-									})
-								};
-								close.onclick = () => {
-									let nodeMark = document.getElementById(item.markers[0].id);
-									nodeMark.remove();
-								}
-							} else {
-								//人员
-								that.screenUserItem = item.properties.get("employee");
-								that.screenUser = true;
-								debugger;
-								window.map.flyToMarker(that.userMarker[that.screenUserItem.mac],{
-									duration:1000
-								})
-							}
-						}
-
-					} else if (type === 'Symbol(polygonmarker)') {
-						//危险作业
-						this.screenRisk = false;
-						this.screenWarning = false;
-						this.screenJob = true;
-					}
+		//获取喇叭列表
+		getSpeakers() {
+			let that = this;
+			that.$API.am.tdevice.speaker.req().then(res => {
+				if (res.err_msg) {
+					that.$message.error(res.err_msg);
 				} else {
+					that.speakerList = res.rows;
 				}
 			});
-			//左侧数据统计
-			this.getManCount();//人员统计$$
-			this.getWarnings();//报警统计$$
-			this.getAreas();//区域/风险区域$$
-			this.getGroup();//部门$$
-			//右上展示数据
-			// this.getVchannels();//摄像头$$
-			this.getDangers();//危险作业$$
-			// this.getRisks();//风险区域$$
-			this.getSpeakers();//喇叭$$
-			// this.getAllMen();//人员
-			this.getAllPost();//岗位
-			this.getWarningTotal();//事件统计
-			this.getWarningType();//事件类型
-			setInterval(function () {}, 3000)
 		},
-		methods: {
-			showTime(){
-				this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
-				this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
-			},
-			getWarningTotal(){
-				let that = this;
-				that.$API.ecm.event.cateAgg.req(that.cateAggForm).then(res=>{
-					if(res.err_msg){}else{
-						that.wStatistics = res;
-					}
-				})
-			},
-			getWarningType(){
-				let that = this;
-				that.$API.ecm.event_cate.list.req().then(res=>{
-					if(res.err_msg){}else{
-						that.warningTypes = res.results;
-					}
-				})
-			},
-			areaRowClick(data) {
-				let that = this;
-				that.areaDetail = true;
-				// let points = data.third_info.xx_rail.detail.polygon.points[0];
-				window.map.flyToPosition(new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0),{duration:1000});
-			},
-			//岗位
-			getAllPost() {
-				this.$API.system.post.list.req({page: 0}).then(res => {
-					let arr = [];
-					let children = genTree(res);
-					for (let i = 0; i < 4; i++) {
-						let obj = new Object();
-						if (i === 0) {
-							obj.id = '';
-							obj.name = '全部';
-							obj.label = '全部';
-						} else if (i === 1) {
-							obj.id = '';
-							obj.name = '内部员工';
-							obj.label = '内部员工';
-							obj.children = children;
-						} else if (i === 2) {
-							obj.id = '';
-							obj.name = '相关方';
-							obj.label = '相关方';
-						} else if (i === 3) {
-							obj.id = '';
-							obj.name = '访客';
-							obj.label = '访客';
-						}
-						arr.push(obj)
-					}
-					this.postList = arr;
-				})
-			},
-			//人员统计
-			getManCount() {
-				let that = this;
-				if (that.countIndex === '2') {
-					that.$API.third.blt.countNow.req().then(res => {
-						if (res.err_msg) {
-						} else {
-							that.userCount = {...res};
-						}
-					})
+		//获取危险作业
+		getDangers() {
+			let that = this;
+			that.$API.opm.operation.list.req().then(res => {
+				if (res.err_msg) {
+
 				} else {
-					that.$API.third.blt.countBind.req().then(res => {
-						if (res.err_msg) {
-						} else {
-							that.userCount = {...res};
-						}
-					})
+					that.dangerList = res.results;
 				}
-			},
-			//有卡/在线切换
-			countINdexChange(index) {
-				this.countIndex = index;
-				this.getManCount();
-			},
-			//获取喇叭列表
-			getSpeakers() {
-				let that = this;
-				that.$API.am.tdevice.speaker.req().then(res => {
-					if (res.err_msg) {
-						that.$message.error(res.err_msg);
-					} else {
-						that.speakerList = res.rows;
-					}
-				});
-			},
-			//获取危险作业
-			getDangers() {
-				let that = this;
-				that.$API.opm.operation.list.req().then(res => {
-					if (res.err_msg) {
-
-					} else {
-						that.dangerList = res.results;
-					}
-				})
-			},
-			//区域列表/获取风险区域
-			getAreas() {
-				let that = this;
-				that.$API.am.area.list.req().then(res => {
-					if (res.err_msg) {
-					} else {
-						that.areaList = res.results;
-					}
-				})
-			},
-			//获取人员列表（全部在线标签列表信息）
-			getAllMen() {
-				let that = this;
-				that.$API.third.blt.all.req().then(res => {
-					if (res.err_msg) {
-					} else {
-						that.userList = res.filter(item => {
-							return item.my_info.employee
-						});
-						that.showUserMarkers(that.userList);
-					}
-				})
-			},
-			handleCurrentChange() {
-				this.getWarnings();
-			},
-			//获取报警列表
-			getWarnings() {
-				this.$API.ecm.event.list.req(this.warningData.params).then(res => {
-					if (res.err_msg) {
-					} else {
-						debugger;
-						this.warningData.list = res.results.filter(item => {
-							return item.handle_user === null;
-						});
-						this.warningData.total = this.warningData.list.length;
-					}
-				})
-			},
-			//警报类型查询
-			warningTypeSelected(id) {
-				debugger;
-				let that = this;
-				this.warningTypeShow = false;
-				let params = new Object();
-				params = that.warningData.params;
-				if(id!==null){
-					params.cates = id;
+			})
+		},
+		//区域列表/获取风险区域
+		getAreas() {
+			let that = this;
+			that.$API.am.area.list.req().then(res => {
+				if (res.err_msg) {
+				} else {
+					that.areaList = res.results;
 				}
-				that.$API.ecm.event.list.req(params).then(res=>{
-					if(res.err_msg){}else{
-						that.warningData.list = res;
-					}
-				})
-				//获取新数据
-			},
-			//加载部门数据
-			getGroup() {
-				this.$API.system.dept.list.req({page: 0}).then(res => {
-					if (res.err_msg) {
-					} else {
-						this.group = genTree(res);
-						// console.log(this.group);
-					}
-				});
-			},
-			//选择部门
-			groupClick(data) {
-				// console.log(data);
-			},
-			//获取人员详细信息
-			showUserDetail() {
-				this.screenUserDetail = true;
-				this.$API.hrm.employee.item.req(this.screenUserItem.id).then(res => {
-					// console.log(res);
-					this.screenUserItemDetail = res;
-				})
-			},
-			//人员类型选择
-			userFilter() {
-				let that = this;
-				this.showUserSelect = false;
-				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 : '';
-			},
-			//风险区域layer
-			riskMaskerLayers() {
-				let that = this;
-				that.riskMarkerLayer = new jsmap.JSBoxMarkerLayer({
-					minimumLevel: 3,
-					maxmumLevel: 22,
-					show: false
-				});
-				window.map.addLayer(that.riskMarkerLayer);
-				that.showRiskMarkers();
-			},
-			//摄像头layer
-			cameraMaskerLayers() {//图标文字
-				let that = this;
-				that.cameraMaskerLayer = new jsmap.JSIconTextMarkerLayer({
-					minimumLevel: 3,
-					maxmumLevel: 22,
-					show: false
-				});
-				window.map.addLayer(that.cameraMaskerLayer);
-				debugger;
-				console.log(that.cameraMaskerLayer);
-				that.getVchannels();
-			},
-			//监控视频播放
-			domMarkerLayers() {
-				let that = this;
-				that.domMarkerLayer = new jsmap.JSDomMarkerLayer({
-					minimumLevel: 3,
-					maxmumLevel: 22,
-					show: true
-				});
-				window.map.addLayer(that.domMarkerLayer);
-			},
-			jobDomMarkerLayers() {
-				let that = this;
-				that.jobDomMarkerLayer = new jsmap.JSDomMarkerLayer({
-					minimumLevel: 3,
-					maxmumLevel: 22,
-					show: false
-				});
-				window.map.addLayer(that.jobDomMarkerLayer);
-				that.showJobDomMarkers();
-			},
-			//点击区域显示图层
-			areaMarkerLayers() {
-				let that = this;
-				that.areaMarkerLayer = new jsmap.JSDomMarkerLayer({
-					minimumLevel: 3,
-					maxmumLevel: 22,
-					show: true
-				});
-				window.map.addLayer(that.areaMarkerLayer);
-			},
-			//员工标记layer
-			userMaskerLayers() {//图标文字
-				let that = this;
-				that.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({
-					minimumLevel: 3,
-					maxmumLevel: 22,
-					show: false
-				});
-				window.map.addLayer(that.userMaskerLayer);
-				that.getAllMen();
-			},
-			//喇叭layer
-			speakersMaskerLayers() {//消防物资
-				let that = this;
-				that.materialsMaskerLayer = new jsmap.JSIconTextMarkerLayer({
-					minimumLevel: 3,
-					maxmumLevel: 22,
-					show: false
-				});
-				window.map.addLayer(that.materialsMaskerLayer);
-				this.showSpeakersMarkers();
-			},
-			//危险作业Layer
-			polygonMarkerLayers() {//危险作业
-				let that = this;
-				that.polygonMaskerLayer = new jsmap.JSPolygonMarkerLayer({
-					minimumLevel: 3,
-					maxmumLevel: 22,
-					show: false
-				});
-				window.map.addLayer(that.polygonMaskerLayer);
-				that.showPolygonMarkers();
-			},
-			//风险区域
-			showRiskMarkers() {
-				var boxMarker = new jsmap.JSBoxMarker({
-					id: 'box',
-					position: [
-						{x: 114.63059258861512, y: 38.81407163905287, z: 0},
-						{x: 114.63044857916901, y: 38.81396178326786, z: 0},
-						{x: 114.63060812029352, y: 38.81386267832651, z: 0},
-						{x: 114.63073035356713, y: 38.81395745716681, z: 0},
-					],
-					floorId: 1,//楼层id
-					color: 'rgba(255,0,0,0.44)',//颜色
-					height: 0,//基底高度
-					stretchHeight: 6,//拉伸高度
-					strokeColor: '#ff0000',//边线颜色
-					show: true, //是否显示
-					depthTest: Boolean,
-					allowPicking: true, //是否允许点击
-					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
-					callback: (marker) => {
-						// console.log(marker);
-					}
-				});
-				this.riskMarkerLayer.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: true, //是否允许点击
-					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
-					callback: (marker) => {
-						// console.log(marker);
-					}
-				});
-				this.riskMarkerLayer.addMarker(boxMarker1);
-			},
-			/*showPointMarkers() {
-				let pointMarker = new jsmap.JSPointMarker({
-					id: 'point1',
-					color: '#00FF00',  //填充颜色
-					size: 10,  //尺寸
-					position: new jsmap.JSPoint(114.6318495165543, 38.81301151091491, 3),  //坐标
-					floorId: 1,  //楼层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);
-			},*/
-			//摄像头
-			showCameraMarkers(list) {
-				let that = this;
-				list.forEach(item => {
-					let cameraMarker = null;
-					let pixel = item.my_info.location;
-					cameraMarker = new jsmap.JSIconTextMarker({
-						id: item.channelCode,
-						position: {x: pixel.x, y: pixel.y, z: pixel.z},  //坐标
-						floorId: 1,  //楼层id,默认为1（地面）
-						image: "/img/camera.svg",
-						text: '摄像头',
-						font: '10px sans-serif',
-						fontColor: '#ffffff',
-						imageHeight: 25,
-						imageWidth: 25,
-						backgroundColor: 'rgba(0,0,0,0.3)',
-						backgroundRadius: 1,
-						backgroundStrokeColor: 'rgba(0,0,0,0.3)',
-						backgroundStrokeWidth: 1,
-						iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
-						allowPicking: true,
-						displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
-						nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
-						show: true,
-						callback: () => {
-						}
+			})
+		},
+		//获取人员列表（全部在线标签列表信息）
+		getAllMen() {
+			let that = this;
+			that.$API.third.blt.all.req().then(res => {
+				if (res.err_msg) {
+				} else {
+					that.userList = res.filter(item => {
+						return item.my_info.employee
 					});
+					that.showUserMarkers(that.userList);
+				}
+			})
+		},
+		handleCurrentChange() {
+			this.getWarnings();
+		},
+		//获取报警列表
+		getWarnings() {
+			this.$API.ecm.event.list.req(this.warningData.params).then(res => {
+				if (res.err_msg) {
+				} else {
 					debugger;
-					console.log(that.cameraMaskerLayer);
-					that.cameraMaskerLayer.addMarker(cameraMarker);
-				})
-			},
-			//人员
-			showUserMarkers(userList) {
-
-				let that = this;
-				let iconTextMarker = null;
-				if (userList.length > 0) {
-					let lng = [114.62923138539462, 114.6315404372349];//经度
-					let i = 0;
-					iconTextMarker = userList[0].mac;
-					let employee_ = userList[0].my_info.employee_;
-					employee_.mac = userList[0].mac;
-					console.log(employee_)
-					debugger;
-					that.userMarker[iconTextMarker] = new jsmap.JSIconTextMarker({
-						id: userList[0].my_info.code,
-						position: {x: 114.62923138539462, y: 38.8133418942645, z: 0},  //坐标
-						floorId: 1,  //楼层id,默认为1（地面）
-						image: "/img/user.png",
-						text: employee_.name,
-						font: '10px sans-serif',
-						fontColor: '#ffffff',
-						imageHeight: 25,
-						imageWidth: 25,
-						backgroundColor: 'rgba(0,0,0,0.3)',
-						backgroundRadius: 1,
-						backgroundStrokeColor: 'rgba(0,0,0,0.3)',
-						backgroundStrokeWidth: 1,
-						iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
-						allowPicking: true,
-						displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
-						nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
-						show: true,
-						properties: {
-							employee: employee_
-						},
+					this.warningData.list = res.results.filter(item => {
+						return item.handle_user === null;
 					});
-					that.userMaskerLayer.addMarker(that.userMarker[iconTextMarker]);
-					setInterval(function () {
-						i = (i + 1) % 2;
-						that.userMaskerLayer.updateMarkerPosition(that.userMarker[iconTextMarker], {
-							floorId: 1,
-							position: {x: lng[i], y: 38.8133418942642, z: 0},
-							animate: {duration: 10000,}
-						});//动画效果,持续时间一秒
-					},11000)
+					this.warningData.total = this.warningData.list.length;
 				}
-				/*setInterval(function () {
-					that.refreshUserMarker();
-				}, 8500)*/
-			},
-			//更新人员标记
-			refreshUserMarker() {
-				let that = this;
-				that.$API.third.blt.all.req().then(res => {
-					if (res.err_msg) {
-					} else {
-						let userList = res.filter(item => {
-							return item.my_info.employee
-						});
-						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.showUserMarkers(addUser);//增加新进在线员工
-						//that.userMaskerLayer.removeMarker(sectorMarker)(addUser);//删除离线员工
-						refreshList.forEach(item => {
-							that.userMaskerLayer.updateMarkerPosition(that.userMarker[item.id], {
-								floorId: 1,
-								position: {x: item.longitude, y: item.latitude, z: item.z},
-								animate: {duration: 1000,}
-							});//动画效果,持续时间一秒
-						})
-					}
-				})
-			},
-			//比较两次获取的人数的变动  func(a,b)//a与b相比多出来的
-			func(arr1, arr2) {
-				/*var arr1 = [{name:1},{name:2},{name:3},{name:4}];
-				var arr2 = [{name:2},{name:3},{name:4},{name:5}];*/
-				let arr = [];
-				let list = [];
-				let bool = false;
-				let same = false;
-				for (let i = 0; i < arr1.length; i++) {
-					for (let j = 0; j < arr2.length; j++) {
-						//遇到相同直接跳出循环
-						if (arr1[i].id === arr2[j].id) {
-							same = i;
-							bool = false;
-							break;
-						} else {
-							same = false;
-							bool = i;
-						}
-					}
-					if (same !== false) list.push(arr1[same]);
-					if (bool !== false) arr.push(arr1[bool]);
+			})
+		},
+		//警报类型查询
+		warningTypeSelected(id) {
+			debugger;
+			let that = this;
+			this.warningTypeShow = false;
+			let params = new Object();
+			params = that.warningData.params;
+			if (id !== null) {
+				params.cates = id;
+			}
+			that.$API.ecm.event.list.req(params).then(res => {
+				if (res.err_msg) { } else {
+					that.warningData.list = res;
 				}
-				let arrList = [arr,list];
-				debugger;
-				console.log(arrList);
-				return arrList;
-			},
-			//危险作业
-			showPolygonMarkers() {
-				let polygonMarker = new jsmap.JSPolygonMarker({
-					id: 'polygon',//id
-					position: [new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0),
-						new jsmap.JSPoint(114.63185023632963, 38.81241816295427, 0),
-						new jsmap.JSPoint(114.63160294240738, 38.812229296478634, 0),
-						new jsmap.JSPoint(114.63143965827588, 38.81235778393449, 0),
-
-					],//坐标集合
-					floorId: 1,//楼层id
-					color: 'rgba(0,0,255,.44)',//填充颜色
-					strokeColor: '#2bff1d',//边线颜色
-					depthTest: false,//是否开启深度检测
-					// material: new jsmap.JSWaterMaterial(),  //材质，材质属性一旦设置，color属性就会失效
-					allowPicking: true,  //是否允许点击
-					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
-					properties: {
-						test: 'polygonTest'
-					},//属性设置
-					callback: (marker) => {
-						// console.log(marker);
-					}//回调
-				});
-				this.polygonMaskerLayer.addMarker(polygonMarker);
-			},
-			//危险作业图片标记
-			showJobDomMarkers() {
-				let domMarker = new jsmap.JSDomMarker({
-					id: 'polygonmark',
-					position: new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0),
-					floorId: 1,
-					depthTest: true,
-					content: `<div style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"><div style="background-image: url('/img/speaker.png');width: 60px;height: 80px;"></div></div>`,
-					offset: jsmap.JSControlPosition.RIGHT_CENTER,
-					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
-					marginOffset: {
-						x: 0,
-						y: 0
-					},
-					properties: {
-						type: 0,
-					},
-					callback: (node) => {
-						console.log(node);
-					}
-				});
-				this.jobDomMarkerLayer.addMarker(domMarker);
-			},
-			//喇叭
-			showSpeakersMarkers() {
-				let materialMarker = new jsmap.JSIconTextMarker({
-					id: 'iconTextMarker',
-					position: {x: 114.6302317964304, y: 38.81315596674133},  //坐标
+			})
+			//获取新数据
+		},
+		//加载部门数据
+		getGroup() {
+			this.$API.system.dept.list.req({ page: 0 }).then(res => {
+				if (res.err_msg) {
+				} else {
+					this.group = genTree(res);
+					// console.log(this.group);
+				}
+			});
+		},
+		//选择部门
+		groupClick(data) {
+			// console.log(data);
+		},
+		//获取人员详细信息
+		showUserDetail() {
+			this.screenUserDetail = true;
+			this.$API.hrm.employee.item.req(this.screenUserItem.id).then(res => {
+				// console.log(res);
+				this.screenUserItemDetail = res;
+			})
+		},
+		//人员类型选择
+		userFilter() {
+			let that = this;
+			this.showUserSelect = false;
+			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 : '';
+		},
+		//风险区域layer
+		riskMaskerLayers() {
+			let that = this;
+			that.riskMarkerLayer = new jsmap.JSBoxMarkerLayer({
+				minimumLevel: 3,
+				maxmumLevel: 22,
+				show: false
+			});
+			window.map.addLayer(that.riskMarkerLayer);
+			that.showRiskMarkers();
+		},
+		//摄像头layer
+		cameraMaskerLayers() {//图标文字
+			let that = this;
+			that.cameraMaskerLayer = new jsmap.JSIconTextMarkerLayer({
+				minimumLevel: 3,
+				maxmumLevel: 22,
+				show: false
+			});
+			window.map.addLayer(that.cameraMaskerLayer);
+			debugger;
+			console.log(that.cameraMaskerLayer);
+			that.getVchannels();
+		},
+		//监控视频播放
+		domMarkerLayers() {
+			let that = this;
+			that.domMarkerLayer = new jsmap.JSDomMarkerLayer({
+				minimumLevel: 3,
+				maxmumLevel: 22,
+				show: true
+			});
+			window.map.addLayer(that.domMarkerLayer);
+		},
+		jobDomMarkerLayers() {
+			let that = this;
+			that.jobDomMarkerLayer = new jsmap.JSDomMarkerLayer({
+				minimumLevel: 3,
+				maxmumLevel: 22,
+				show: false
+			});
+			window.map.addLayer(that.jobDomMarkerLayer);
+			that.showJobDomMarkers();
+		},
+		//点击区域显示图层
+		areaMarkerLayers() {
+			let that = this;
+			that.areaMarkerLayer = new jsmap.JSDomMarkerLayer({
+				minimumLevel: 3,
+				maxmumLevel: 22,
+				show: true
+			});
+			window.map.addLayer(that.areaMarkerLayer);
+		},
+		//员工标记layer
+		userMaskerLayers() {//图标文字
+			let that = this;
+			that.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({
+				minimumLevel: 3,
+				maxmumLevel: 22,
+				show: false
+			});
+			window.map.addLayer(that.userMaskerLayer);
+			that.getAllMen();
+		},
+		//喇叭layer
+		speakersMaskerLayers() {//消防物资
+			let that = this;
+			that.materialsMaskerLayer = new jsmap.JSIconTextMarkerLayer({
+				minimumLevel: 3,
+				maxmumLevel: 22,
+				show: false
+			});
+			window.map.addLayer(that.materialsMaskerLayer);
+			this.showSpeakersMarkers();
+		},
+		//危险作业Layer
+		polygonMarkerLayers() {//危险作业
+			let that = this;
+			that.polygonMaskerLayer = new jsmap.JSPolygonMarkerLayer({
+				minimumLevel: 3,
+				maxmumLevel: 22,
+				show: false
+			});
+			window.map.addLayer(that.polygonMaskerLayer);
+			that.showPolygonMarkers();
+		},
+		//风险区域
+		showRiskMarkers() {
+			var boxMarker = new jsmap.JSBoxMarker({
+				id: 'box',
+				position: [
+					{ x: 114.63059258861512, y: 38.81407163905287, z: 0 },
+					{ x: 114.63044857916901, y: 38.81396178326786, z: 0 },
+					{ x: 114.63060812029352, y: 38.81386267832651, z: 0 },
+					{ x: 114.63073035356713, y: 38.81395745716681, z: 0 },
+				],
+				floorId: 1,//楼层id
+				color: 'rgba(255,0,0,0.44)',//颜色
+				height: 0,//基底高度
+				stretchHeight: 6,//拉伸高度
+				strokeColor: '#ff0000',//边线颜色
+				show: true, //是否显示
+				depthTest: Boolean,
+				allowPicking: true, //是否允许点击
+				displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
+				callback: (marker) => {
+					// console.log(marker);
+				}
+			});
+			this.riskMarkerLayer.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: true, //是否允许点击
+				displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
+				callback: (marker) => {
+					// console.log(marker);
+				}
+			});
+			this.riskMarkerLayer.addMarker(boxMarker1);
+		},
+		/*showPointMarkers() {
+			let pointMarker = new jsmap.JSPointMarker({
+				id: 'point1',
+				color: '#00FF00',  //填充颜色
+				size: 10,  //尺寸
+				position: new jsmap.JSPoint(114.6318495165543, 38.81301151091491, 3),  //坐标
+				floorId: 1,  //楼层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);
+		},*/
+		//摄像头
+		showCameraMarkers(list) {
+			let that = this;
+			list.forEach(item => {
+				let cameraMarker = null;
+				let pixel = item.my_info.location;
+				cameraMarker = new jsmap.JSIconTextMarker({
+					id: item.channelCode,
+					position: { x: pixel.x, y: pixel.y, z: pixel.z },  //坐标
 					floorId: 1,  //楼层id,默认为1（地面）
-					image: "/img/speaker.png",
-					text: '喇叭1',
+					image: "/img/camera.svg",
+					text: '摄像头',
 					font: '10px sans-serif',
 					fontColor: '#ffffff',
 					imageHeight: 25,
 					imageWidth: 25,
-					// fontStrokeColor: '#1f0fdd',
-					fontStrokeWidth: 1,
 					backgroundColor: 'rgba(0,0,0,0.3)',
 					backgroundRadius: 1,
 					backgroundStrokeColor: 'rgba(0,0,0,0.3)',
 					backgroundStrokeWidth: 1,
 					iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
-					allowPicking: false,
+					allowPicking: true,
 					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
 					nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
-					show: true
-				});
-				this.materialsMaskerLayer.addMarker(materialMarker);
-			},
-			//显示人员类型选项
-			userSelect() {
-				this.showUserSelect = !this.showUserSelect
-			},
-			//暂停或旋转
-			autoRunChange() {
-				this.autoRun = !this.autoRun;
-				if (this.autoRun) {
-					this.mapRun();
-				} else {
-					this.mapPause();
-				}
-			},
-			//自动旋转
-			mapRun() {
-				if (this.flyManager !== null) {
-					this.flyManager.restartFly();
-				} else {
-					//地图旋转展示
-					this.flyManager = new jsmap.JSFlyManager(window.map);
-					this.flyManager.flyByCircle({
-						center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
-						distance: 500,
-						duration: 100000,
-						tilt: 30
-					});
-				}
-
-			},
-			//暂停旋转
-			mapPause() {
-				// this.flyManager.destroy();
-				this.flyManager.pauseFly();
-			},
-			//多选框展开收起
-			filterCtrlFocusChange() {
-				this.filterCtrlFocus = !this.filterCtrlFocus
-			},
-			//页面maker的展示控制
-			markerClick(index) {
-				let arr = [];
-				let that = this;
-				that.markList[index] = !that.markList[index];
-				if (index === 0) {
-					if (that.markList[0]) {
-						arr = that.markList.map(value => {
-							return true
-						})
-					} else {
-						arr = that.markList.map(value => {
-							return false
-						})
-					}
-					that.markList = arr;
-				} else {
-					let list = that.markList.slice(1, 7);
-					if (list.indexOf(true) > -1 && list.indexOf(false) < 0) {
-						that.markList[0] = true;
-					} else {
-						that.markList[0] = false;
-					}
-				}
-				if (that.markList[1]) {
-					window.map.showBuildingMarker = true;
-				} else {
-					window.map.showBuildingMarker = false;
-				}
-				if (that.markList[2]) {
-					that.cameraMaskerLayer.show = true;
-				} else {
-					that.cameraMaskerLayer.show = false;
-				}
-				if (that.markList[3]) {
-					that.materialsMaskerLayer.show = true;
-				} else {
-					that.materialsMaskerLayer.show = false;
-				}
-				if (that.markList[4]) {
-					that.jobDomMarkerLayer.show = true;
-					that.polygonMaskerLayer.show = true;
-				} else {
-					that.jobDomMarkerLayer.show = false;
-					that.polygonMaskerLayer.show = false;
-				}
-				if (that.markList[5]) {
-					that.riskMarkerLayer.show = true;
-				} else {
-					that.riskMarkerLayer.show = false;
-				}
-				if (that.markList[6]) {
-					that.userMaskerLayer.show = true;
-				} else {
-					that.userMaskerLayer.show = false;
-				}
-			},
-			//获取摄像头列表
-			getVchannels() {
-				let that = this;
-				this.$API.am.video.list.req(that.params).then(res => {
-					if (res.err_msg) {
-						this.$message.error(res.err_msg);
-					} else {
-						that.Vchannels = res.pageData;
-						that.showCameraMarkers(res.pageData);
+					show: true,
+					callback: () => {
 					}
 				});
-			},
-			//报警详情
-			warningItemShow(item) {
-				this.screenJob = false;
-				this.screenRisk = false;
-				this.screenWarningItem = item;
-				this.warningId = item.id;
-				console.log(item);
-				this.$nextTick(() => {
-					this.screenWarning = true;
-				});
-			},
-			//关闭危险作业
-			closeScreenJob() {
-				this.screenJob = false;
-			},
-			//关闭风险区域
-			closeScreenRisk() {
-				this.screenRisk = false;
-			},
-			//光比报警页面
-			closeScreenWarning() {
-				this.screenWarning = false;
-			},
-			//报警处理
-			handleWarning() {
-				let that = this;
-				that.warningForm.mark = parseInt(that.warningForm.mark);
-				that.$API.ecm.event.handle.req(that.warningId, that.warningForm).then(res => {
-					if (res.err_msg) {
-
-					} else {
-						that.screenWarning = false;
-						that.getWarnings();
-					}
-				})
-			},
-			//员工列表点击
-			userRowClick(row) {
 				debugger;
-				console.log(row);
-				let that = this;
-				that.screenUserItem.name = row.my_info.employee_.name;
-				that.screenUserItem.type = row.my_info.employee_.type;
-				that.screenUserItem.id = row.my_info.employee_.id;
-				that.screenUserItem.photo = row.my_info.employee_.photo ? row.my_info.employee_.photo : '';
-				that.screenUserItem.post_name = row.my_info.employee_.post_name ? row.my_info.employee_.post_name : '';
-				that.screenUserItem.belong_dept_name = row.my_info.employee_.belong_dept_name ? row.my_info.employee_.belong_dept_name : '';
-			},
-			//人员追踪
-			userTrack() {
-				this.tracking = true;
-				window.map.trackMarker(this.userMarker[this.screenUserItem.mac],{
-					range:150
-				})
-			},
-			userUnTrack(){
-				window.map.cancelTrack();
-				this.tracking = false;
-			},
-			//区域/部门切换
-			cockpitChange(index) {
-				this.LBType = index;
-			},
-			/*pointMaskerLayers() {//点
-				this.pointMarkerLayer = new jsmap.JSPointMarkerLayer({
-					minimumLevel: 3,
-					maxmumLevel: 22,
-					show: false
+				console.log(that.cameraMaskerLayer);
+				that.cameraMaskerLayer.addMarker(cameraMarker);
+			})
+		},
+		//人员
+		showUserMarkers(userList) {
+			let that = this;
+			//人员mark
+			let iconTextMarker = null;
+			//标记图片
+			let userImage = '';
+			if (userList.length > 0) {
+				debugger;
+				console.log(userList);
+				debugger;
+				let lng = [114.62923138539462, 114.6315404372349];//经度
+				let i = 0;
+				iconTextMarker = userList[0].mac;
+				let employee_ = userList[0].my_info.employee_;
+				employee_.mac = userList[0].mac;
+				console.log(userList[0].my_info.employee_.type)
+				debugger;
+				if (userList[0].my_info.employee_.type === 'employee') {
+					userImage = "/img/employee.png"
+				} else if (serList[0].my_info.employee_.type === 'remployee') {
+					userImage = "/img/employee.png"
+				} else {
+					userImage = "/img/visitor.png"
+				}
+				that.userMarker[iconTextMarker] = new jsmap.JSIconTextMarker({
+					id: userList[0].my_info.code,
+					position: { x: 114.62923138539462, y: 38.8133418942645, z: 0 },  //坐标
+					floorId: 1,  //楼层id,默认为1（地面）
+					image: userImage,
+					text: employee_.name,
+					font: '10px sans-serif',
+					fontColor: '#ffffff',
+					imageHeight: 25,
+					imageWidth: 25,
+					backgroundColor: 'rgba(0,0,0,0.3)',
+					backgroundRadius: 1,
+					backgroundStrokeColor: 'rgba(0,0,0,0.3)',
+					backgroundStrokeWidth: 1,
+					iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
+					allowPicking: true,
+					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
+					nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
+					show: true,
+					properties: {
+						employee: employee_
+					},
 				});
-				window.map.addLayer(this.pointMarkerLayer);
-				this.showPointMarkers();
-			},*/
-			//选择人员分类
-			changeDropIndex(index) {
-				let that = this;
-				that.dropIndex = index;
-				setTimeout(function () {
-					that.showUserSelect = false;
-				}, 300)
-			},
+				that.userMaskerLayer.addMarker(that.userMarker[iconTextMarker]);
+				setInterval(function () {
+					i = (i + 1) % 2;
+					that.userMaskerLayer.updateMarkerPosition(that.userMarker[iconTextMarker], {
+						floorId: 1,
+						position: { x: lng[i], y: 38.8133418942642, z: 0 },
+						animate: { duration: 10000, }
+					});//动画效果,持续时间一秒
+				}, 11000)
+			}
+			/*setInterval(function () {
+				that.refreshUserMarker();
+			}, 8500)*/
 		},
-		unmounted() {
-			window.map.destroy();
-			window.map = null;
+		//更新人员标记
+		refreshUserMarker() {
+			let that = this;
+			that.$API.third.blt.all.req().then(res => {
+				if (res.err_msg) {
+				} else {
+					let userList = res.filter(item => {
+						return item.my_info.employee
+					});
+					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.showUserMarkers(addUser);//增加新进在线员工
+					//that.userMaskerLayer.removeMarker(sectorMarker)(addUser);//删除离线员工
+					refreshList.forEach(item => {
+						that.userMaskerLayer.updateMarkerPosition(that.userMarker[item.id], {
+							floorId: 1,
+							position: { x: item.longitude, y: item.latitude, z: item.z },
+							animate: { duration: 1000, }
+						});//动画效果,持续时间一秒
+					})
+				}
+			})
 		},
-	}
+		//比较两次获取的人数的变动  func(a,b)//a与b相比多出来的
+		func(arr1, arr2) {
+			/*var arr1 = [{name:1},{name:2},{name:3},{name:4}];
+			var arr2 = [{name:2},{name:3},{name:4},{name:5}];*/
+			let arr = [];
+			let list = [];
+			let bool = false;
+			let same = false;
+			for (let i = 0; i < arr1.length; i++) {
+				for (let j = 0; j < arr2.length; j++) {
+					//遇到相同直接跳出循环
+					if (arr1[i].id === arr2[j].id) {
+						same = i;
+						bool = false;
+						break;
+					} else {
+						same = false;
+						bool = i;
+					}
+				}
+				if (same !== false) list.push(arr1[same]);
+				if (bool !== false) arr.push(arr1[bool]);
+			}
+			let arrList = [arr, list];
+			debugger;
+			console.log(arrList);
+			return arrList;
+		},
+		//危险作业
+		showPolygonMarkers() {
+			let polygonMarker = new jsmap.JSPolygonMarker({
+				id: 'polygon',//id
+				position: [new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0),
+				new jsmap.JSPoint(114.63185023632963, 38.81241816295427, 0),
+				new jsmap.JSPoint(114.63160294240738, 38.812229296478634, 0),
+				new jsmap.JSPoint(114.63143965827588, 38.81235778393449, 0),
+
+				],//坐标集合
+				floorId: 1,//楼层id
+				color: 'rgba(0,0,255,.44)',//填充颜色
+				strokeColor: '#2bff1d',//边线颜色
+				depthTest: false,//是否开启深度检测
+				// material: new jsmap.JSWaterMaterial(),  //材质，材质属性一旦设置，color属性就会失效
+				allowPicking: true,  //是否允许点击
+				displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
+				properties: {
+					test: 'polygonTest'
+				},//属性设置
+				callback: (marker) => {
+					// console.log(marker);
+				}//回调
+			});
+			this.polygonMaskerLayer.addMarker(polygonMarker);
+		},
+		//危险作业图片标记
+		showJobDomMarkers() {
+			let domMarker = new jsmap.JSDomMarker({
+				id: 'polygonmark',
+				position: new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0),
+				floorId: 1,
+				depthTest: true,
+				content: `<div style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"><div style="background-image: url('/img/speaker.png');width: 60px;height: 80px;"></div></div>`,
+				offset: jsmap.JSControlPosition.RIGHT_CENTER,
+				displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
+				marginOffset: {
+					x: 0,
+					y: 0
+				},
+				properties: {
+					type: 0,
+				},
+				callback: (node) => {
+					console.log(node);
+				}
+			});
+			this.jobDomMarkerLayer.addMarker(domMarker);
+		},
+		//喇叭
+		showSpeakersMarkers() {
+			let materialMarker = new jsmap.JSIconTextMarker({
+				id: 'iconTextMarker',
+				position: { x: 114.6302317964304, y: 38.81315596674133 },  //坐标
+				floorId: 1,  //楼层id,默认为1（地面）
+				image: "/img/speaker.png",
+				text: '喇叭1',
+				font: '10px sans-serif',
+				fontColor: '#ffffff',
+				imageHeight: 25,
+				imageWidth: 25,
+				// fontStrokeColor: '#1f0fdd',
+				fontStrokeWidth: 1,
+				backgroundColor: 'rgba(0,0,0,0.3)',
+				backgroundRadius: 1,
+				backgroundStrokeColor: 'rgba(0,0,0,0.3)',
+				backgroundStrokeWidth: 1,
+				iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
+				allowPicking: false,
+				displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
+				nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
+				show: true
+			});
+			this.materialsMaskerLayer.addMarker(materialMarker);
+		},
+		//显示人员类型选项
+		userSelect() {
+			this.showUserSelect = !this.showUserSelect
+		},
+		//暂停或旋转
+		autoRunChange() {
+			this.autoRun = !this.autoRun;
+			if (this.autoRun) {
+				this.mapRun();
+			} else {
+				this.mapPause();
+			}
+		},
+		//自动旋转
+		mapRun() {
+			if (this.flyManager !== null) {
+				this.flyManager.restartFly();
+			} else {
+				//地图旋转展示
+				this.flyManager = new jsmap.JSFlyManager(window.map);
+				this.flyManager.flyByCircle({
+					center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
+					distance: 500,
+					duration: 100000,
+					tilt: 30
+				});
+			}
+
+		},
+		//暂停旋转
+		mapPause() {
+			// this.flyManager.destroy();
+			this.flyManager.pauseFly();
+		},
+		//多选框展开收起
+		filterCtrlFocusChange() {
+			this.filterCtrlFocus = !this.filterCtrlFocus
+		},
+		//页面maker的展示控制
+		markerClick(index) {
+			let arr = [];
+			let that = this;
+			that.markList[index] = !that.markList[index];
+			if (index === 0) {
+				if (that.markList[0]) {
+					arr = that.markList.map(value => {
+						return true
+					})
+				} else {
+					arr = that.markList.map(value => {
+						return false
+					})
+				}
+				that.markList = arr;
+			} else {
+				let list = that.markList.slice(1, 7);
+				if (list.indexOf(true) > -1 && list.indexOf(false) < 0) {
+					that.markList[0] = true;
+				} else {
+					that.markList[0] = false;
+				}
+			}
+			if (that.markList[1]) {
+				window.map.showBuildingMarker = true;
+			} else {
+				window.map.showBuildingMarker = false;
+			}
+			if (that.markList[2]) {
+				that.cameraMaskerLayer.show = true;
+			} else {
+				that.cameraMaskerLayer.show = false;
+			}
+			if (that.markList[3]) {
+				that.materialsMaskerLayer.show = true;
+			} else {
+				that.materialsMaskerLayer.show = false;
+			}
+			if (that.markList[4]) {
+				that.jobDomMarkerLayer.show = true;
+				that.polygonMaskerLayer.show = true;
+			} else {
+				that.jobDomMarkerLayer.show = false;
+				that.polygonMaskerLayer.show = false;
+			}
+			if (that.markList[5]) {
+				that.riskMarkerLayer.show = true;
+			} else {
+				that.riskMarkerLayer.show = false;
+			}
+			if (that.markList[6]) {
+				that.userMaskerLayer.show = true;
+			} else {
+				that.userMaskerLayer.show = false;
+			}
+		},
+		//获取摄像头列表
+		getVchannels() {
+			let that = this;
+			this.$API.am.video.list.req(that.params).then(res => {
+				if (res.err_msg) {
+					this.$message.error(res.err_msg);
+				} else {
+					that.Vchannels = res.pageData;
+					that.showCameraMarkers(res.pageData);
+				}
+			});
+		},
+		//报警详情
+		warningItemShow(item) {
+			this.screenJob = false;
+			this.screenRisk = false;
+			this.screenWarningItem = item;
+			this.warningId = item.id;
+			console.log(item);
+			this.$nextTick(() => {
+				this.screenWarning = true;
+			});
+		},
+		//关闭危险作业
+		closeScreenJob() {
+			this.screenJob = false;
+		},
+		//关闭风险区域
+		closeScreenRisk() {
+			this.screenRisk = false;
+		},
+		//光比报警页面
+		closeScreenWarning() {
+			this.screenWarning = false;
+		},
+		//报警处理
+		handleWarning() {
+			let that = this;
+			that.warningForm.mark = parseInt(that.warningForm.mark);
+			that.$API.ecm.event.handle.req(that.warningId, that.warningForm).then(res => {
+				if (res.err_msg) {
+
+				} else {
+					that.screenWarning = false;
+					that.getWarnings();
+				}
+			})
+		},
+		//员工列表点击
+		userRowClick(row) {
+			debugger;
+			console.log(row);
+			let that = this;
+			that.screenUserItem.name = row.my_info.employee_.name;
+			that.screenUserItem.type = row.my_info.employee_.type;
+			that.screenUserItem.id = row.my_info.employee_.id;
+			that.screenUserItem.photo = row.my_info.employee_.photo ? row.my_info.employee_.photo : '';
+			that.screenUserItem.post_name = row.my_info.employee_.post_name ? row.my_info.employee_.post_name : '';
+			that.screenUserItem.belong_dept_name = row.my_info.employee_.belong_dept_name ? row.my_info.employee_.belong_dept_name : '';
+		},
+		//人员追踪
+		userTrack() {
+			this.tracking = true;
+			window.map.trackMarker(this.userMarker[this.screenUserItem.mac], {
+				range: 150
+			})
+		},
+		userUnTrack() {
+			window.map.cancelTrack();
+			this.tracking = false;
+		},
+		//区域/部门切换
+		cockpitChange(index) {
+			this.LBType = index;
+		},
+		/*pointMaskerLayers() {//点
+			this.pointMarkerLayer = new jsmap.JSPointMarkerLayer({
+				minimumLevel: 3,
+				maxmumLevel: 22,
+				show: false
+			});
+			window.map.addLayer(this.pointMarkerLayer);
+			this.showPointMarkers();
+		},*/
+		//选择人员分类
+		changeDropIndex(index) {
+			let that = this;
+			that.dropIndex = index;
+			setTimeout(function () {
+				that.showUserSelect = false;
+			}, 300)
+		},
+	},
+	unmounted() {
+		window.map.destroy();
+		window.map = null;
+	},
+}
 </script>
 
 <style lang="scss">
-	.handleWarningBtn, .handleWarningBtn:active,
-	.handleWarningBtn:focus, .handleWarningBtn:hover {
-		cursor: pointer;
-		border: 1px solid #30ffdd;
-		color: #ffffff;
-		background: rgba(48, 255, 220, 0.35);
+.handleWarningBtn,
+.handleWarningBtn:active,
+.handleWarningBtn:focus,
+.handleWarningBtn:hover {
+	cursor: pointer;
+	border: 1px solid #30ffdd;
+	color: #ffffff;
+	background: rgba(48, 255, 220, 0.35);
+}
+
+.el-radio.el-radio--small .el-radio__label {
+	color: #ffffff;
+}
+
+.el-radio__input.is-checked .el-radio__inner {
+	border-color: #30ffdd;
+	background: #30ffdd;
+}
+
+.el-radio__input.is-checked+.el-radio__label {
+	color: #30ffdd;
+}
+
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+	background: rgba(48, 255, 220, 0);
+}
+
+#bigScreenTree {
+	background: none !important;
+}
+
+#bigScreenTree .el-tree-node__content {
+	color: #ffffff;
+	/*background-color:rgba(255,255,255,.1);*/
+}
+
+#bigScreenTree .el-tree-node__content:hover {
+	background-color: rgba(255, 255, 255, .1)
+}
+
+#bigScreenTree .el-tree-node:focus>.el-tree-node__content {
+	background-color: rgba(255, 255, 255, .1)
+}
+
+.v_title :before {
+	content: "";
+	display: inline-block;
+	position: absolute;
+	left: 0;
+	top: 14px;
+	width: 0;
+	height: 16px;
+	border: 1px solid #31fe27;
+}
+
+.v_masker {
+	width: 327px !important;
+	height: 183px !important;
+	background: url(/public/img/v_mask.png) no-repeat !important;
+	background-size: 100% 100% !important;
+}
+
+.hoverPointer:hover {
+	cursor: pointer;
+}
+
+.screen-main {
+	width: 100%;
+	height: 100%;
+
+	.screen-per-list {
+		height: calc(100% - 270px);
 	}
 
-	.el-radio.el-radio--small .el-radio__label {
-		color: #ffffff;
-	}
-
-	.el-radio__input.is-checked .el-radio__inner {
-		border-color: #30ffdd;
-		background: #30ffdd;
-	}
-
-	.el-radio__input.is-checked + .el-radio__label {
-		color: #30ffdd;
-	}
-
-	.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-		background: rgba(48, 255, 220, 0);
-	}
-
-	#bigScreenTree {
-		background: none !important;
-	}
-
-	#bigScreenTree .el-tree-node__content {
-		color: #ffffff;
-		/*background-color:rgba(255,255,255,.1);*/
-	}
-
-	#bigScreenTree .el-tree-node__content:hover {
-		background-color: rgba(255, 255, 255, .1)
-	}
-
-	#bigScreenTree .el-tree-node:focus > .el-tree-node__content {
-		background-color: rgba(255, 255, 255, .1)
-	}
-
-	.v_title :before {
-		content: "";
+	.danger-btn-bg {
 		display: inline-block;
-		position: absolute;
-		left: 0;
-		top: 14px;
-		width: 0;
-		height: 16px;
-		border: 1px solid #31fe27;
-	}
-
-	.v_masker {
-		width: 327px !important;
-		height: 183px !important;
-		background: url(/public/img/v_mask.png) no-repeat !important;
-		background-size: 100% 100% !important;
-	}
-
-	.hoverPointer:hover {
+		height: 32px;
+		line-height: 32px;
+		border-radius: 16px;
+		color: #fff;
+		font-size: 14px;
+		padding: 0 18px;
+		border: 1px solid #ffc679;
+		background: #dd8000;
+		box-shadow: inset 0 0 8px #fda732;
 		cursor: pointer;
 	}
 
-	.screen-main {
-		width: 100%;
+	.danger-btn-bg:hover {
+		box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
+	}
+
+	.h100 {
 		height: 100%;
+	}
 
-		.screen-per-list {
-			height: calc(100% - 270px);
+	.person-info-header {
+		position: relative;
+
+		.basic-btn {
+			position: absolute;
+			right: 0;
+			top: 0;
 		}
 
-		.danger-btn-bg {
-			display: inline-block;
-			height: 32px;
-			line-height: 32px;
-			border-radius: 16px;
-			color: #fff;
-			font-size: 14px;
-			padding: 0 18px;
-			border: 1px solid #ffc679;
-			background: #dd8000;
-			box-shadow: inset 0 0 8px #fda732;
-			cursor: pointer;
-		}
-
-		.danger-btn-bg:hover {
-			box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
-		}
-
-		.h100 {
-			height: 100%;
-		}
-
-		.person-info-header {
-			position: relative;
-
-			.basic-btn {
-				position: absolute;
-				right: 0;
-				top: 0;
-			}
-
-			.header-basic {
-				margin-bottom: 8px;
-				display: flex;
-				justify-content: space-between;
-
-				.basic-img {
-					width: 104px;
-					height: 144px;
-				}
-
-				.basic-info {
-					width: calc(100% - 130px);
-
-					.info-item {
-						font-size: 14px;
-						margin-bottom: 6px;
-						display: flex;
-
-						.info-item-name {
-							color: #fff;
-							font-weight: 400;
-							flex-shrink: 0;
-						}
-
-						.info-item-info {
-							color: #fff;
-							font-weight: 500;
-							overflow: hidden;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-						}
-					}
-				}
-			}
-		}
-
-		.basic-btn-group {
-			margin: 12px 0;
+		.header-basic {
+			margin-bottom: 8px;
 			display: flex;
 			justify-content: space-between;
 
-			.btn-item {
-				width: 48%;
-				text-align: center;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-
-				.trackImg {
-					width: 16px;
-					height: 16px;
-					margin-right: 4px;
-					background-image: url("/public/img/v_track.png");
-				}
-
-				.viewImg {
-					width: 16px;
-					height: 16px;
-					margin-right: 4px;
-					background-image: url("/public/img/v_view.png");
-				}
-
-				img {
-					width: 16px;
-					height: 16px;
-					margin-right: 4px;
-				}
-			}
-		}
-
-		.screen-header {
-			width: 100% !important;
-			height: 84px !important;
-			position: absolute !important;
-			left: 0 !important;
-			top: 0 !important;
-			background: linear-gradient(0deg, rgba(0, 113, 155, 0) 0, #00455f) !important;
-			z-index: 2 !important;
-			transition: all .5s linear !important;
-
-			.header-left-bg {
-				height: 60px;
-				position: absolute;
-				left: 18px;
-				top: 12px;
-				font-size: 40px;
-				font-weight: 700;
-				color: #fff;
+			.basic-img {
+				width: 104px;
+				height: 144px;
 			}
 
-			.header-right-action {
-				position: absolute;
-				top: 10px;
-				right: 18px;
-				display: flex;
-				align-items: center;
+			.basic-info {
+				width: calc(100% - 130px);
 
-				.right-action-clock {
-					:before {
-						content: " ";
-						display: inline;
-						position: absolute;
-						left: -24px;
-						top: 9px;
-						width: 16px;
-						height: 16px;
-						/*background: url(/img/screen5/clock.png) no-repeat;*/
-						background-size: 100% 100%;
-					}
-
-					.action-time {
-						width: 56px;
-						height: 19px;
-						font-size: 14px;
-						font-weight: 400;
-						color: #fff;
-						position: relative;
-						margin-right: 20px;
-					}
-				}
-
-			}
-		}
-
-		.screen-cockpit {
-			width: 430px;
-			height: 100%;
-			z-index: 1;
-			display: flex;
-			position: absolute;
-			flex-direction: column;
-			background: linear-gradient(90deg, #00455f, rgba(0, 113, 155, 0));
-			transition: all .5s linear;
-			padding-top: 84px;
-			box-sizing: border-box;
-
-			.cockpit-count {
-				width: 100%;
-				padding: 0 10px 0 18px;
-				position: relative;
-			}
-
-			.cockpit-alarm {
-				width: 100%;
-				position: relative;
-				padding: 0 10px 0 18px;
-			}
-
-			.cockpit-info {
-				width: 100%;
-				position: relative;
-				padding: 0 10px 0 18px;
-			}
-
-			.divider {
-				display: block;
-				height: 1px;
-				width: 100%;
-				background: hsla(0, 0%, 100%, .5);
-				z-index: 2;
-			}
-
-			.simple-title {
-				line-height: 22px;
-				font-size: 16px;
-				font-weight: 700;
-				color: #fff;
-				position: relative;
-				padding-left: 8px;
-				height: 44px;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-			}
-
-			.simple-title:before {
-				content: "";
-				display: inline-block;
-				position: absolute;
-				left: 0;
-				top: 14px;
-				width: 0;
-				height: 16px;
-				border: 1px solid #31fe27;
-			}
-		}
-
-		.screen-ctrl {
-			position: absolute;
-			top: 60px;
-			right: 18px;
-			z-index: 2;
-			transition: all .5s linear;
-		}
-
-		.screen-tab {
-			position: absolute;
-			bottom: 0;
-			left: 50%;
-			z-index: 9;
-			transform: translate(-50%);
-			transition: all .5s linear;
-		}
-
-		.screen-multiple-select {
-			position: relative;
-			display: inline-block;
-
-			.multiple-select-tags {
-				position: relative;
-				background: rgba(48, 255, 220, .35);
-				border: 1px solid #30ffdc;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				height: 32px;
-				border-radius: 16px;
-				cursor: pointer;
-
-				.multiple-select-input {
-					max-width: calc(100% - 50px);
-					box-sizing: border-box;
-					font-size: 12px;
-					color: #fff;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-					overflow: hidden;
-					margin-right: 8px;
-				}
-
-				.multiple-select-caret {
-					color: #fff;
-					font-size: 12px;
-				}
-			}
-
-			.multiple-select-wrap {
-				width: 100%;
-				z-index: 20;
-				position: absolute;
-				top: 36px;
-				left: 0;
-				overflow: auto;
-				max-height: 250px;
-				border-radius: 4px;
-				background: #007767;
-				box-shadow: inset 0 0 4px #0bf1ff;
-
-				.multiple-select-ul {
-					padding: 4px 0;
-
-					.multiple-select-li {
-						position: relative;
-						padding: 0 16px 0 32px;
-						width: 100%;
-						font-size: 14px;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-						color: #fff;
-						height: 34px;
-						line-height: 34px;
-						box-sizing: border-box;
-						cursor: pointer;
-						text-align: left;
-					}
-
-					.multiple-select-label {
-						color: #fff;
-						font-size: 12px;
-					}
-				}
-			}
-		}
-
-		.screen-risk {
-			width: 390px;
-			height: fit-content;
-			max-height: calc(100% - 180px);
-			padding: 0 16px 16px;
-			background: rgba(24, 36, 51, .7);
-			position: absolute;
-			top: 170px;
-			right: 18px;
-			z-index: 9999;
-			overflow-y: scroll;
-			transition: all .5s linear;
-
-			.risk-content {
-				height: calc(100% - 44px);
-
-				.risk-item {
+				.info-item {
 					font-size: 14px;
-					margin-bottom: 12px;
+					margin-bottom: 6px;
 					display: flex;
 
-					.risk-item-name {
-						color: hsla(0, 0%, 100%, .8);
+					.info-item-name {
+						color: #fff;
 						font-weight: 400;
+						flex-shrink: 0;
 					}
 
-					.risk-item-info {
+					.info-item-info {
 						color: #fff;
 						font-weight: 500;
 						overflow: hidden;
@@ -2189,167 +1929,132 @@
 				}
 			}
 		}
+	}
 
-		.screen-job {
-			width: 390px;
-			padding: 0 16px 16px;
-			background: rgba(24, 36, 51, .7);
-			position: absolute;
-			top: 170px;
-			right: 18px;
-			z-index: 1;
-			transition: all .5s linear;
+	.basic-btn-group {
+		margin: 12px 0;
+		display: flex;
+		justify-content: space-between;
 
-			.job-content {
-				height: calc(100% - 44px);
-				overflow-y: auto;
+		.btn-item {
+			width: 48%;
+			text-align: center;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 
-				.job-basic {
-					.job-item {
-						font-size: 14px;
-						margin-bottom: 12px;
-						display: flex;
+			.trackImg {
+				width: 16px;
+				height: 16px;
+				margin-right: 4px;
+				background-image: url("/public/img/v_track.png");
+			}
 
-						.job-item-name {
-							color: hsla(0, 0%, 100%, .8);
-							font-weight: 400;
-							flex-shrink: 0;
-							width: 90px;
-							text-align: right;
-						}
+			.viewImg {
+				width: 16px;
+				height: 16px;
+				margin-right: 4px;
+				background-image: url("/public/img/v_view.png");
+			}
 
-						.job-item-info {
-							color: #fff;
-							font-weight: 500;
-						}
-					}
-				}
-
-				.job-list {
-					.custom-table {
-						height: 100%;
-
-						.custom-table-head {
-							display: flex;
-
-							.table-head-item {
-								padding: 0 4px;
-								color: #fff;
-								font-size: 14px;
-								font-weight: 700;
-								height: 34px;
-								line-height: 34px;
-								white-space: nowrap;
-								overflow: hidden;
-								text-overflow: ellipsis;
-								text-align: left;
-							}
-						}
-
-						.custom-table-body {
-							max-height: calc(50vh - 100px);
-
-							.table-body-item {
-								display: flex;
-
-								.body-item-label {
-									padding: 0 4px;
-									color: #fff;
-									font-size: 13px;
-									font-weight: 400;
-									height: 34px;
-									line-height: 34px;
-									white-space: nowrap;
-									overflow: hidden;
-									text-overflow: ellipsis;
-									text-align: left;
-								}
-							}
-						}
-					}
-				}
+			img {
+				width: 16px;
+				height: 16px;
+				margin-right: 4px;
 			}
 		}
+	}
 
-		.screen-user {
-			width: 390px;
-			padding: 0 16px 16px;
-			background: rgba(24, 36, 51, .7);
+	.screen-header {
+		width: 100% !important;
+		height: 84px !important;
+		position: absolute !important;
+		left: 0 !important;
+		top: 0 !important;
+		background: linear-gradient(0deg, rgba(0, 113, 155, 0) 0, #00455f) !important;
+		z-index: 2 !important;
+		transition: all .5s linear !important;
+
+		.header-left-bg {
+			height: 60px;
 			position: absolute;
-			top: 170px;
+			left: 18px;
+			top: 12px;
+			font-size: 40px;
+			font-weight: 700;
+			color: #fff;
+		}
+
+		.header-right-action {
+			position: absolute;
+			top: 10px;
 			right: 18px;
-			z-index: 1;
-			transition: all .5s linear;
+			display: flex;
+			align-items: center;
 
-			.job-content {
-				height: calc(100% - 44px);
-				overflow-y: auto;
-
-				.job-basic {
-					.job-item {
-						font-size: 14px;
-						margin-bottom: 12px;
-						display: flex;
-
-						.job-item-name {
-							color: hsla(0, 0%, 100%, .8);
-							font-weight: 400;
-							flex-shrink: 0;
-							width: 90px;
-							text-align: right;
-						}
-
-						.job-item-info {
-							color: #fff;
-							font-weight: 500;
-						}
-					}
+			.right-action-clock {
+				:before {
+					content: " ";
+					display: inline;
+					position: absolute;
+					left: -24px;
+					top: 9px;
+					width: 16px;
+					height: 16px;
+					/*background: url(/img/screen5/clock.png) no-repeat;*/
+					background-size: 100% 100%;
 				}
 
-				.job-list {
-					.custom-table {
-						height: 100%;
-
-						.custom-table-head {
-							display: flex;
-
-							.table-head-item {
-								padding: 0 4px;
-								color: #fff;
-								font-size: 14px;
-								font-weight: 700;
-								height: 34px;
-								line-height: 34px;
-								white-space: nowrap;
-								overflow: hidden;
-								text-overflow: ellipsis;
-								text-align: left;
-							}
-						}
-
-						.custom-table-body {
-							max-height: calc(50vh - 100px);
-
-							.table-body-item {
-								display: flex;
-
-								.body-item-label {
-									padding: 0 4px;
-									color: #fff;
-									font-size: 13px;
-									font-weight: 400;
-									height: 34px;
-									line-height: 34px;
-									white-space: nowrap;
-									overflow: hidden;
-									text-overflow: ellipsis;
-									text-align: left;
-								}
-							}
-						}
-					}
+				.action-time {
+					width: 56px;
+					height: 19px;
+					font-size: 14px;
+					font-weight: 400;
+					color: #fff;
+					position: relative;
+					margin-right: 20px;
 				}
 			}
+
+		}
+	}
+
+	.screen-cockpit {
+		width: 430px;
+		height: 100%;
+		z-index: 1;
+		display: flex;
+		position: absolute;
+		flex-direction: column;
+		background: linear-gradient(90deg, #00455f, rgba(0, 113, 155, 0));
+		transition: all .5s linear;
+		padding-top: 84px;
+		box-sizing: border-box;
+
+		.cockpit-count {
+			width: 100%;
+			padding: 0 10px 0 18px;
+			position: relative;
+		}
+
+		.cockpit-alarm {
+			width: 100%;
+			position: relative;
+			padding: 0 10px 0 18px;
+		}
+
+		.cockpit-info {
+			width: 100%;
+			position: relative;
+			padding: 0 10px 0 18px;
+		}
+
+		.divider {
+			display: block;
+			height: 1px;
+			width: 100%;
+			background: hsla(0, 0%, 100%, .5);
+			z-index: 2;
 		}
 
 		.simple-title {
@@ -2375,63 +2080,122 @@
 			height: 16px;
 			border: 1px solid #31fe27;
 		}
+	}
 
-		.simple-btn {
-			display: inline-block;
+	.screen-ctrl {
+		position: absolute;
+		top: 60px;
+		right: 18px;
+		z-index: 2;
+		transition: all .5s linear;
+	}
+
+	.screen-tab {
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		z-index: 9;
+		transform: translate(-50%);
+		transition: all .5s linear;
+	}
+
+	.screen-multiple-select {
+		position: relative;
+		display: inline-block;
+
+		.multiple-select-tags {
+			position: relative;
+			background: rgba(48, 255, 220, .35);
+			border: 1px solid #30ffdc;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			height: 32px;
-			line-height: 32px;
 			border-radius: 16px;
-			color: #32fde3;
-			font-size: 14px;
-			padding: 0 18px;
-			background: transparent;
-			border: 1px solid #32fde3;
 			cursor: pointer;
-		}
 
-		.grow {
-			flex-grow: 1;
-		}
-
-		.common-basic-info {
-		}
-
-		.person-cert {
-			right: 410px;
-			top: 0;
-			width: 390px;
-			max-height: 630px;
-			border-radius: 4px;
-			padding: 0 20px 20px;
-			position: absolute;
-			background: rgba(24, 36, 51, .7);
-
-			.basic-head {
-				position: relative;
-				margin-bottom: 16px;
-
-				.header-tab {
-					width: 160px;
-				}
+			.multiple-select-input {
+				max-width: calc(100% - 50px);
+				box-sizing: border-box;
+				font-size: 12px;
+				color: #fff;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				overflow: hidden;
+				margin-right: 8px;
 			}
 
-			.basic-info {
-				min-height: 400px;
+			.multiple-select-caret {
+				color: #fff;
+				font-size: 12px;
+			}
+		}
 
-				.info-item {
+		.multiple-select-wrap {
+			width: 100%;
+			z-index: 20;
+			position: absolute;
+			top: 36px;
+			left: 0;
+			overflow: auto;
+			max-height: 250px;
+			border-radius: 4px;
+			background: #007767;
+			box-shadow: inset 0 0 4px #0bf1ff;
+
+			.multiple-select-ul {
+				padding: 4px 0;
+
+				.multiple-select-li {
+					position: relative;
+					padding: 0 16px 0 32px;
+					width: 100%;
 					font-size: 14px;
-					height: 30px;
-					display: flex;
-					align-items: center;
-				}
-
-				.info-item-name {
+					white-space: nowrap;
+					text-overflow: ellipsis;
 					color: #fff;
-					font-weight: 400;
-					flex-shrink: 0;
+					height: 34px;
+					line-height: 34px;
+					box-sizing: border-box;
+					cursor: pointer;
+					text-align: left;
 				}
 
-				.info-item-info {
+				.multiple-select-label {
+					color: #fff;
+					font-size: 12px;
+				}
+			}
+		}
+	}
+
+	.screen-risk {
+		width: 390px;
+		height: fit-content;
+		max-height: calc(100% - 180px);
+		padding: 0 16px 16px;
+		background: rgba(24, 36, 51, .7);
+		position: absolute;
+		top: 170px;
+		right: 18px;
+		z-index: 9999;
+		overflow-y: scroll;
+		transition: all .5s linear;
+
+		.risk-content {
+			height: calc(100% - 44px);
+
+			.risk-item {
+				font-size: 14px;
+				margin-bottom: 12px;
+				display: flex;
+
+				.risk-item-name {
+					color: hsla(0, 0%, 100%, .8);
+					font-weight: 400;
+				}
+
+				.risk-item-info {
 					color: #fff;
 					font-weight: 500;
 					overflow: hidden;
@@ -2440,906 +2204,1167 @@
 				}
 			}
 		}
-
-		.right_arrow:before {
-			content: "";
-			display: inline-block;
-			position: absolute;
-			right: -15px;
-			top: 14px;
-			width: 15px;
-			height: 17px;
-			transform: rotate(180deg);
-			background: url(/public/img/left_arrow.png) no-repeat;
-			background-size: 100% 100%;
-		}
 	}
 
-	.el-dialog__wrapper {
-		position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		overflow: auto;
-		margin: 0;
+	.screen-job {
+		width: 390px;
+		padding: 0 16px 16px;
+		background: rgba(24, 36, 51, .7);
+		position: absolute;
+		top: 170px;
+		right: 18px;
+		z-index: 1;
+		transition: all .5s linear;
 
-		.el-dialog {
-			top: 50%;
-			margin-top: 0 !important;
-			transform: translateY(-50%);
-			background: rgba(24, 36, 51, .7);
+		.job-content {
+			height: calc(100% - 44px);
+			overflow-y: auto;
 
-			.el-dialog__header {
-				padding: 0;
-				height: 44px;
-				line-height: 44px;
-				background-size: 250px 70px;
-				text-align: center;
-			}
-
-			.el-dialog__title {
-				color: #fff;
-				font-size: 15px;
-			}
-
-			.el-dialog__headerbtn {
-				top: 14px;
-			}
-		}
-	}
-
-	.screen-cockpit {
-		.cockpit-count {
-			.count-list {
-				display: flex;
-				flex-wrap: wrap;
-				margin-bottom: 10px;
-
-				.count-list-item {
-					width: 33.3333%;
-					height: 50%;
+			.job-basic {
+				.job-item {
+					font-size: 14px;
+					margin-bottom: 12px;
 					display: flex;
 
-					.item-img {
-						width: 50px;
-						height: 50px;
-						position: relative;
-						margin-right: 6px;
+					.job-item-name {
+						color: hsla(0, 0%, 100%, .8);
+						font-weight: 400;
+						flex-shrink: 0;
+						width: 90px;
+						text-align: right;
+					}
+
+					.job-item-info {
+						color: #fff;
+						font-weight: 500;
+					}
+				}
+			}
+
+			.job-list {
+				.custom-table {
+					height: 100%;
+
+					.custom-table-head {
+						display: flex;
+
+						.table-head-item {
+							padding: 0 4px;
+							color: #fff;
+							font-size: 14px;
+							font-weight: 700;
+							height: 34px;
+							line-height: 34px;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							text-align: left;
+						}
+					}
+
+					.custom-table-body {
+						max-height: calc(50vh - 100px);
+
+						.table-body-item {
+							display: flex;
+
+							.body-item-label {
+								padding: 0 4px;
+								color: #fff;
+								font-size: 13px;
+								font-weight: 400;
+								height: 34px;
+								line-height: 34px;
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								text-align: left;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.screen-user {
+		width: 390px;
+		padding: 0 16px 16px;
+		background: rgba(24, 36, 51, .7);
+		position: absolute;
+		top: 170px;
+		right: 18px;
+		z-index: 1;
+		transition: all .5s linear;
+
+		.job-content {
+			height: calc(100% - 44px);
+			overflow-y: auto;
+
+			.job-basic {
+				.job-item {
+					font-size: 14px;
+					margin-bottom: 12px;
+					display: flex;
+
+					.job-item-name {
+						color: hsla(0, 0%, 100%, .8);
+						font-weight: 400;
+						flex-shrink: 0;
+						width: 90px;
+						text-align: right;
+					}
+
+					.job-item-info {
+						color: #fff;
+						font-weight: 500;
+					}
+				}
+			}
+
+			.job-list {
+				.custom-table {
+					height: 100%;
+
+					.custom-table-head {
+						display: flex;
+
+						.table-head-item {
+							padding: 0 4px;
+							color: #fff;
+							font-size: 14px;
+							font-weight: 700;
+							height: 34px;
+							line-height: 34px;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							text-align: left;
+						}
+					}
+
+					.custom-table-body {
+						max-height: calc(50vh - 100px);
+
+						.table-body-item {
+							display: flex;
+
+							.body-item-label {
+								padding: 0 4px;
+								color: #fff;
+								font-size: 13px;
+								font-weight: 400;
+								height: 34px;
+								line-height: 34px;
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								text-align: left;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.simple-title {
+		line-height: 22px;
+		font-size: 16px;
+		font-weight: 700;
+		color: #fff;
+		position: relative;
+		padding-left: 8px;
+		height: 44px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.simple-title:before {
+		content: "";
+		display: inline-block;
+		position: absolute;
+		left: 0;
+		top: 14px;
+		width: 0;
+		height: 16px;
+		border: 1px solid #31fe27;
+	}
+
+	.simple-btn {
+		display: inline-block;
+		height: 32px;
+		line-height: 32px;
+		border-radius: 16px;
+		color: #32fde3;
+		font-size: 14px;
+		padding: 0 18px;
+		background: transparent;
+		border: 1px solid #32fde3;
+		cursor: pointer;
+	}
+
+	.grow {
+		flex-grow: 1;
+	}
+
+	.common-basic-info {}
+
+	.person-cert {
+		right: 410px;
+		top: 0;
+		width: 390px;
+		max-height: 630px;
+		border-radius: 4px;
+		padding: 0 20px 20px;
+		position: absolute;
+		background: rgba(24, 36, 51, .7);
+
+		.basic-head {
+			position: relative;
+			margin-bottom: 16px;
+
+			.header-tab {
+				width: 160px;
+			}
+		}
+
+		.basic-info {
+			min-height: 400px;
+
+			.info-item {
+				font-size: 14px;
+				height: 30px;
+				display: flex;
+				align-items: center;
+			}
+
+			.info-item-name {
+				color: #fff;
+				font-weight: 400;
+				flex-shrink: 0;
+			}
+
+			.info-item-info {
+				color: #fff;
+				font-weight: 500;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+	.right_arrow:before {
+		content: "";
+		display: inline-block;
+		position: absolute;
+		right: -15px;
+		top: 14px;
+		width: 15px;
+		height: 17px;
+		transform: rotate(180deg);
+		background: url(/public/img/left_arrow.png) no-repeat;
+		background-size: 100% 100%;
+	}
+}
+
+.el-dialog__wrapper {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	overflow: auto;
+	margin: 0;
+
+	.el-dialog {
+		top: 50%;
+		margin-top: 0 !important;
+		transform: translateY(-50%);
+		background: rgba(24, 36, 51, .7);
+
+		.el-dialog__header {
+			padding: 0;
+			height: 44px;
+			line-height: 44px;
+			background-size: 250px 70px;
+			text-align: center;
+		}
+
+		.el-dialog__title {
+			color: #fff;
+			font-size: 15px;
+		}
+
+		.el-dialog__headerbtn {
+			top: 14px;
+		}
+	}
+}
+
+.screen-cockpit {
+	.cockpit-count {
+		.count-list {
+			display: flex;
+			flex-wrap: wrap;
+			margin-bottom: 10px;
+
+			.count-list-item {
+				width: 33.3333%;
+				height: 50%;
+				display: flex;
+
+				.item-img {
+					width: 50px;
+					height: 50px;
+					position: relative;
+					margin-right: 6px;
+					flex-shrink: 0;
+				}
+
+				.item-img:after {
+					content: "";
+					width: 38px;
+					height: 38px;
+					position: absolute;
+					left: 7px;
+					top: 7px;
+					background: url(/public/img/rotate_line.png) no-repeat;
+					background-size: 100% 100%;
+					-webkit-animation: rotate 4s linear infinite;
+					animation: rotate 4s linear infinite;
+				}
+
+				.item-img1 {
+					background: url(/public/img/icon_wlry.png) no-repeat;
+					background-size: 100% 100%;
+				}
+
+				.item-img2 {
+					background: url(/public/img/icon_nbyg.png) no-repeat;
+					background-size: 100% 100%;
+				}
+
+				.item-img3 {
+					background: url(/public/img/icon_cbs.png) no-repeat;
+					background-size: 100% 100%;
+				}
+
+				.item-info {
+					.normal {
+						font-size: 12px;
+						font-weight: 400;
+						color: #fff;
+					}
+
+					.large {
+						font-size: 30px;
+						font-weight: 400;
+						color: #fff;
+					}
+				}
+			}
+		}
+
+		.simple-title {
+			.countTypeWrap {
+				font-size: 14px;
+
+				span {
+					cursor: pointer;
+				}
+
+				.activeCount {
+					display: inline-block;
+					height: 32px;
+					line-height: 32px;
+					border-radius: 16px;
+					color: #fff;
+					font-size: 14px;
+					padding: 0 18px;
+					border: 1px solid #32fde3;
+					background: #007767;
+					box-shadow: inset 0 0 8px #5aecf0;
+					cursor: pointer;
+				}
+
+			}
+		}
+	}
+
+	.cockpit-alarm {
+		.alarm-bell {
+			padding: 0 18px 0 32px;
+			position: relative;
+			color: #fff;
+		}
+
+		.alarm-bell:after {
+			content: "";
+			position: absolute;
+			left: 12px;
+			top: 8px;
+			width: 14px;
+			height: 16px;
+			background: url(/public/img/bell.png) no-repeat;
+			background-size: 100% 100%;
+		}
+
+		.alarm-bell.danger {
+			border: 1px solid #ffc679;
+			background: #dd8000;
+			box-shadow: inset 0 0 8px #fda732;
+		}
+
+		.alarm-bell.danger:hover {
+			box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
+		}
+
+		.alarm-content {
+			display: flex;
+			justify-content: space-between;
+			height: calc(100% - 50px);
+
+			.content-left {
+				width: 160px;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				.alarm-danger {
+					width: 150px;
+					height: 150px;
+					background: url(/public/img/a_danger.png) no-repeat;
+					background-size: 100% 100%;
+				}
+			}
+
+			.content-right {
+				width: calc(100% - 130px);
+				overflow: hidden;
+				height: fit-content;
+
+				.alarm-item {
+					min-width: 50%;
+					height: 26px;
+					font-size: 14px;
+					font-weight: 700;
+					padding-left: 8px;
+					position: relative;
+					display: flex;
+					align-items: center;
+					float: left;
+
+					.item-name {
+						margin-right: 4px;
 						flex-shrink: 0;
 					}
 
-					.item-img:after {
-						content: "";
-						width: 38px;
-						height: 38px;
-						position: absolute;
-						left: 7px;
-						top: 7px;
-						background: url(/public/img/rotate_line.png) no-repeat;
-						background-size: 100% 100%;
-						-webkit-animation: rotate 4s linear infinite;
-						animation: rotate 4s linear infinite;
-					}
-
-					.item-img1 {
-						background: url(/public/img/icon_wlry.png) no-repeat;
-						background-size: 100% 100%;
-					}
-
-					.item-img2 {
-						background: url(/public/img/icon_nbyg.png) no-repeat;
-						background-size: 100% 100%;
-					}
-
-					.item-img3 {
-						background: url(/public/img/icon_cbs.png) no-repeat;
-						background-size: 100% 100%;
-					}
-
-					.item-info {
-						.normal {
-							font-size: 12px;
-							font-weight: 400;
-							color: #fff;
-						}
-
-						.large {
-							font-size: 30px;
-							font-weight: 400;
-							color: #fff;
-						}
-					}
-				}
-			}
-
-			.simple-title {
-				.countTypeWrap {
-					font-size: 14px;
-
-					span {
-						cursor: pointer;
-					}
-
-					.activeCount {
-						display: inline-block;
-						height: 32px;
-						line-height: 32px;
-						border-radius: 16px;
-						color: #fff;
-						font-size: 14px;
-						padding: 0 18px;
-						border: 1px solid #32fde3;
-						background: #007767;
-						box-shadow: inset 0 0 8px #5aecf0;
-						cursor: pointer;
-					}
-
-				}
-			}
-		}
-
-		.cockpit-alarm {
-			.alarm-bell {
-				padding: 0 18px 0 32px;
-				position: relative;
-				color: #fff;
-			}
-
-			.alarm-bell:after {
-				content: "";
-				position: absolute;
-				left: 12px;
-				top: 8px;
-				width: 14px;
-				height: 16px;
-				background: url(/public/img/bell.png) no-repeat;
-				background-size: 100% 100%;
-			}
-
-			.alarm-bell.danger {
-				border: 1px solid #ffc679;
-				background: #dd8000;
-				box-shadow: inset 0 0 8px #fda732;
-			}
-
-			.alarm-bell.danger:hover {
-				box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
-			}
-
-			.alarm-content {
-				display: flex;
-				justify-content: space-between;
-				height: calc(100% - 50px);
-
-				.content-left {
-					width: 160px;
-					height: 100%;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-
-					.alarm-danger {
-						width: 150px;
-						height: 150px;
-						background: url(/public/img/a_danger.png) no-repeat;
-						background-size: 100% 100%;
-					}
-				}
-
-				.content-right {
-					width: calc(100% - 130px);
-					overflow: hidden;
-					height: fit-content;
-					.alarm-item {
-						min-width: 50%;
-						height: 26px;
-						font-size: 14px;
-						font-weight: 700;
-						padding-left: 8px;
-						position: relative;
-						display: flex;
-						align-items: center;
-						float: left;
-						.item-name {
-							margin-right: 4px;
-							flex-shrink: 0;
-						}
-
-						.item-number {
-							overflow: hidden;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-						}
-
-						.item-icon {
-							width: 14px;
-							height: 14px;
-							margin-right: 4px;
-							flex-shrink: 0;
-						}
-					}
-
-					.alarm-item-danger {
-						color: #fda732;
-
-						.item-icon {
-							background: url(/public/img/r_danger.png) no-repeat;
-							background-size: 100% 100%;
-						}
-					}
-
-					.alarm-item-safe {
-						color: #fff;
-
-						.item-icon {
-							background: url(/public/img/r_safe.png) no-repeat;
-							background-size: 100% 100%;
-						}
-					}
-				}
-			}
-		}
-
-		.cockpit-info {
-			.header-tab {
-				width: 210px;
-			}
-		}
-	}
-
-	.screen-ctrl {
-		.screen-filter {
-			position: absolute;
-			top: 0;
-			right: 0;
-
-			.filter-content {
-				display: flex;
-				align-items: center;
-				background: rgba(24, 36, 51, .5);
-				border-radius: 20px;
-
-				.filter-ctrl {
-					width: 610px;
-					height: 40px;
-					display: flex;
-					align-items: center;
-					background: transparent;
-					overflow: hidden;
-					padding: 0 20px;
-					z-index: 8;
-					transition: all .5s linear;
-
-					.screen-check-content {
-						margin-right: 16px;
-					}
-				}
-
-				.caret-dropdown {
-					color: #fff;
-				}
-
-				.drop-content {
-					position: absolute;
-					right: 50px;
-					top: 44px;
-					padding: 4px;
-					box-shadow: inset 0 0 4px #2cedff;
-					background: rgba(24, 36, 51, .8);
-					border-radius: 4px;
-					transition: .5s;
-					z-index: 10;
-
-					.drop-content-item {
-						color: #fff;
-						position: relative;
-						width: 110px;
-						font-size: 13px;
+					.item-number {
 						overflow: hidden;
 						white-space: nowrap;
 						text-overflow: ellipsis;
-						height: 34px;
-						line-height: 34px;
-						box-sizing: border-box;
-						text-align: center;
-						cursor: pointer;
 					}
 
-					.drop-content-item.active {
-						color: rgba(44, 237, 255, .8);
-						background-color: rgba(24, 36, 51, .3);
-					}
-
-					.drop-content-item:hover {
-						color: rgba(44, 237, 255, .8);
-						background-color: rgba(24, 36, 51, .3);
-					}
-
-				}
-
-				.filter-action {
-					width: 56px;
-					height: 40px;
-					padding: 0 18px;
-					background: rgba(24, 36, 51, .7);
-					border-radius: 20px;
-					flex-shrink: 0;
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					z-index: 2;
-
-					.action-shrink {
-						width: 20px;
-						height: 20px;
-						background: url(/public/img/shrink.png) no-repeat;
-						background-size: 100% 100%;
-						cursor: pointer;
-						transition: all .5s linear;
-						transform: rotate(180deg);
-					}
-
-					.action-shrink.shrink-hidden {
-						transform: rotate(0deg);
-						background: url(/public/img/shrink.png) no-repeat;
-					}
-
-					.roam-play {
-						background: url(/public/img/play.png) no-repeat;
-						background-size: 100% 100%;
-					}
-
-					.roam-pause {
-						background: url(/public/img/pause.png) no-repeat;
-						background-size: 100% 100%;
-					}
-
-					.action-roam {
-						width: 20px;
-						height: 20px;
-						cursor: pointer;
+					.item-icon {
+						width: 14px;
+						height: 14px;
+						margin-right: 4px;
+						flex-shrink: 0;
 					}
 				}
 
-				.filter-action.showroam {
-					width: 96px;
+				.alarm-item-danger {
+					color: #fda732;
+
+					.item-icon {
+						background: url(/public/img/r_danger.png) no-repeat;
+						background-size: 100% 100%;
+					}
 				}
-			}
-		}
 
-		.screen-search {
-			position: absolute;
-			top: 54px;
-			right: 0;
+				.alarm-item-safe {
+					color: #fff;
 
-			.search-content {
-				padding: 5px;
-				background: rgba(24, 36, 51, .5);
-				border-radius: 20px;
-				display: flex;
-				align-items: center;
-				position: relative;
-			}
-
-			input {
-				width: 0;
-				height: 30px;
-				font-size: 13px;
-				outline: none;
-				border: none;
-				padding: 0;
-				margin: 0;
-				background: transparent;
-				color: #fff;
-				transition: all .5s linear;
-				opacity: 0;
-			}
-
-			.input-focus {
-				width: 250px;
-				opacity: 1;
-				padding: 0 20px 0 12px;
-			}
-
-			.close-btn {
-				position: absolute;
-				top: 12px;
-				right: 50px;
-				width: 8px;
-				height: 8px;
-				cursor: pointer;
-				color: #fff;
-			}
-
-			.search {
-				margin: auto;
-				width: 30px;
-				height: 30px;
-				background: #5bde0b;
-				border-radius: 50%;
-				transition: all 1s;
-				position: relative;
-			}
-
-			.search:after {
-				content: "";
-				display: inline-block;
-				position: absolute;
-				top: 8px;
-				left: 8px;
-				width: 13px;
-				height: 13px;
-				background: url(/public/img/search.png) no-repeat;
-				background-size: 100% 100%;
-				cursor: pointer;
-			}
-
-			.auto-suggestion {
-				position: absolute;
-				left: 10px;
-				top: 46px;
-				background: rgba(24, 36, 51, .8);
-
-				.suggestion-select-ul {
-					padding: 4px;
-					max-height: 350px;
-					overflow-y: auto;
+					.item-icon {
+						background: url(/public/img/r_safe.png) no-repeat;
+						background-size: 100% 100%;
+					}
 				}
 			}
 		}
 	}
 
-	.screen-tab {
-		.screen-tab-content {
-			display: flex;
-			align-items: center;
-		}
-
-		.tab-menu-item {
-			width: 150px;
-			height: 80px;
-			text-align: center;
-			margin: 0 10px;
-			cursor: pointer;
-		}
-
-		.tab-menu-text {
-			height: 80px;
-			line-height: 80px;
-			font-size: 14px;
-			font-weight: 400;
-			color: #2cedff;
-		}
-
-		.tab-menu {
-			background: url(/public/img/menu.png) no-repeat;
-			background-size: 100% 100%;
-		}
-
-		.tab-menu-active {
-			background: url(/public/img/menu_active.png) no-repeat;
-			background-size: 100% 100%;
-
-			.tab-menu-text {
-				font-weight: 700;
-				color: #fff;
-			}
-		}
-	}
-
-	.screen-main {
+	.cockpit-info {
 		.header-tab {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
-			.tab-item {
-				padding: 0 4px;
-				text-align: center;
-				font-size: 15px;
-				font-weight: 400;
-				color: #fff;
-				position: relative;
-				cursor: pointer;
-			}
-
-			.tab-item-active {
-				font-weight: 700;
-			}
-
-			.tab-item-active:after {
-				content: "";
-				position: absolute;
-				left: 0;
-				bottom: -2px;
-				height: 5px;
-				width: 100%;
-				background: linear-gradient(90deg, rgba(48, 255, 221, 0), rgba(48, 255, 221, .8) 50%, rgba(48, 255, 221, 0));
-			}
+			width: 210px;
 		}
 	}
+}
 
-	.screen-main {
-		.icon-close {
-			width: 14px;
-			height: 14px;
-			background: url(/public/img/close.png) no-repeat;
-			background-size: 100% 100%;
-			cursor: pointer;
-		}
-
-		.simple-btn-bg {
-			display: inline-block;
-			height: 32px;
-			line-height: 32px;
-			border-radius: 16px;
-			color: #fff;
-			font-size: 14px;
-			padding: 0 18px;
-			border: 1px solid #32fde3;
-			background: #007767;
-			box-shadow: inset 0 0 8px #5aecf0;
-			cursor: pointer;
-		}
-
-		.simple-btn-bg:hover {
-			box-shadow: 0 0 8px #5aecf0, inset 0 0 8px #5aecf0;
-		}
-
-		.screen-check-content {
-			display: flex;
-			align-items: center;
-			height: 40px;
-
-			.box-btn {
-				width: 16px;
-				height: 16px;
-				margin-right: 6px;
-				cursor: pointer;
-				border: 1px solid #5bde0b;
-				border-radius: 3px;
-			}
-
-			.box-text {
-				font-size: 14px;
-				font-weight: 400;
-				line-height: 40px;
-				color: #fff;
-				white-space: nowrap;
-			}
-
-			.box-check {
-				background: url(/public/img/check.png) no-repeat 100% 100% !important;
-			}
-		}
-
-		.noData{
-			width: 100%;
-			height: 300px;
-			img{
-				margin: 50px auto;
-				display: block;
-			}
-		}
-
-	}
-
-	.alarm-detail-info {
+.screen-ctrl {
+	.screen-filter {
 		position: absolute;
-		left: 445px;
 		top: 0;
-		width: 390px;
-		background: rgba(24, 36, 51, .7);
-		border-radius: 4px;
-		padding: 0 12px 0 12px;
-		z-index: 20;
-		/*min-height: 400px;*/
+		right: 0;
 
-		.action-group {
+		.filter-content {
 			display: flex;
 			align-items: center;
-			width: 90px;
-			justify-content: space-between;
-		}
+			background: rgba(24, 36, 51, .5);
+			border-radius: 20px;
 
-		.detail-text-btn {
-			cursor: pointer;
-			color: #30ffdd;
-			font-size: 12px;
-			position: relative;
-			padding-right: 12px;
-			font-weight: 400;
-		}
-
-		.detail-content {
-			position: relative;
-
-			.content-head {
+			.filter-ctrl {
+				width: 610px;
+				height: 40px;
 				display: flex;
 				align-items: center;
-				justify-content: space-around;
+				background: transparent;
+				overflow: hidden;
+				padding: 0 20px;
+				z-index: 8;
+				transition: all .5s linear;
 
-				.head-select {
-					width: calc(100% - 60px);
+				.screen-check-content {
+					margin-right: 16px;
+				}
+			}
+
+			.caret-dropdown {
+				color: #fff;
+			}
+
+			.drop-content {
+				position: absolute;
+				right: 50px;
+				top: 44px;
+				padding: 4px;
+				box-shadow: inset 0 0 4px #2cedff;
+				background: rgba(24, 36, 51, .8);
+				border-radius: 4px;
+				transition: .5s;
+				z-index: 10;
+
+				.drop-content-item {
+					color: #fff;
+					position: relative;
+					width: 110px;
+					font-size: 13px;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					height: 34px;
+					line-height: 34px;
+					box-sizing: border-box;
+					text-align: center;
+					cursor: pointer;
 				}
 
-				.head-sound {
+				.drop-content-item.active {
+					color: rgba(44, 237, 255, .8);
+					background-color: rgba(24, 36, 51, .3);
+				}
+
+				.drop-content-item:hover {
+					color: rgba(44, 237, 255, .8);
+					background-color: rgba(24, 36, 51, .3);
+				}
+
+			}
+
+			.filter-action {
+				width: 56px;
+				height: 40px;
+				padding: 0 18px;
+				background: rgba(24, 36, 51, .7);
+				border-radius: 20px;
+				flex-shrink: 0;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				z-index: 2;
+
+				.action-shrink {
+					width: 20px;
+					height: 20px;
+					background: url(/public/img/shrink.png) no-repeat;
+					background-size: 100% 100%;
+					cursor: pointer;
+					transition: all .5s linear;
+					transform: rotate(180deg);
+				}
+
+				.action-shrink.shrink-hidden {
+					transform: rotate(0deg);
+					background: url(/public/img/shrink.png) no-repeat;
+				}
+
+				.roam-play {
+					background: url(/public/img/play.png) no-repeat;
+					background-size: 100% 100%;
+				}
+
+				.roam-pause {
+					background: url(/public/img/pause.png) no-repeat;
+					background-size: 100% 100%;
+				}
+
+				.action-roam {
 					width: 20px;
 					height: 20px;
 					cursor: pointer;
 				}
-
-				.sound-ring {
-					background: url(/public/img/b_ring.png) no-repeat;
-					background-size: 100% 100%;
-				}
-
 			}
 
-			.content-body {
-				min-height: 200px;
-				max-height: calc(60vh - 120px);
-				overflow-y: auto;
-				overflow-x: hidden;
-				margin-top: 10px;
-
-				.alarm-item {
-					display: flex;
-
-					.item-type {
-						width: 40px;
-						height: 45px;
-						background: url(/public/img/alarm_bg.png) 50% no-repeat;
-						font-size: 14px;
-						color: #fff;
-						text-align: center;
-						margin-top: 10px;
-					}
-
-					.item-content {
-						margin-left: 14px;
-						padding: 10px 0 10px 10px;
-						color: #fff;
-						width: calc(100% - 56px);
-						font-size: 14px;
-						border-left: 1px dashed rgba(225, 255, 255, .3);
-						position: relative;
-
-						.item-content-top {
-							display: flex;
-							justify-content: space-between;
-							padding: 0 4px;
-							font-size: 14px;
-							cursor: pointer;
-
-							.time {
-								color: #fff;
-							}
-
-							.status {
-								color: #fd8018;
-							}
-						}
-
-						.item-content-middle {
-							.alarm-info {
-								font-size: 14px;
-								font-weight: 700;
-								cursor: pointer;
-							}
-						}
-					}
-
-					.item-content:before {
-						content: "";
-						display: inline-block;
-						position: absolute;
-						left: -7px;
-						top: 12px;
-						width: 12px;
-						height: 12px;
-						background: url(/public/img/round.png) no-repeat;
-						background-size: 100% 100%;
-					}
-				}
-			}
-
-			.content-footer {
-				text-align: center;
-
-				.btn-prev {
-					color: #fff;
-					background: transparent;
-
-					.el-icon {
-						display: block;
-						font-size: 12px;
-						font-weight: 700;
-					}
-				}
-
-				.btn-next {
-					color: #fff;
-					background: transparent;
-
-					.el-icon {
-						display: block;
-						font-size: 12px;
-						font-weight: 700;
-					}
-				}
-
-				.el-pagination {
-					white-space: nowrap;
-					padding: 2px 5px;
-					color: #ffffff;
-					font-weight: 700;
-
-					button {
-						border: none;
-						padding: 0 6px;
-						display: inline-block;
-						font-size: 13px;
-						min-width: 35.5px;
-						height: 28px;
-						line-height: 28px;
-						vertical-align: top;
-						box-sizing: border-box;
-						background: rgba(255, 255, 255, 0) !important;
-					}
-
-					.btn-prev {
-						background: rgba(255, 255, 255, 0) !important;
-					}
-
-					.el-pager {
-						vertical-align: top;
-						margin: 0;
-						display: inline-block;
-						background: rgba(255, 255, 255, 0) !important;
-
-						li {
-							vertical-align: top;
-							margin: 0;
-							display: inline-block;
-							padding: 0 4px;
-							font-size: 13px;
-							min-width: 35.5px;
-							height: 28px;
-							line-height: 28px;
-							box-sizing: border-box;
-							text-align: center;
-							background: rgba(255, 255, 255, 0) !important;
-						}
-					}
-
-					.btn-next {
-						padding-left: 12px;
-						cursor: pointer;
-						margin: 0;
-					}
-				}
-			}
-
-			.el-loading-mask {
-				position: absolute;
-				z-index: 2000;
-				background-color: hsla(0, 0%, 100%, .9);
-				margin: 0;
-				top: 0;
-				right: 0;
-				bottom: 0;
-				left: 0;
-				transition: opacity .3s;
-
-				.el-loading-spinner {
-					top: 50%;
-					margin-top: -21px;
-					width: 100%;
-					text-align: center;
-					position: absolute;
-
-					.el-loading-spinner i {
-						color: #409eff;
-					}
-				}
+			.filter-action.showroam {
+				width: 96px;
 			}
 		}
 	}
 
-	.screen-main .left_arrow:before,
-	.screen-main .left_middle_arrow:before {
-		content: "";
-		display: inline-block;
+	.screen-search {
 		position: absolute;
-		left: -15px;
-		width: 15px;
-		height: 17px;
-		/*background: url(/public/img/left_arrow.png) no-repeat;*/
+		top: 54px;
+		right: 0;
+
+		.search-content {
+			padding: 5px;
+			background: rgba(24, 36, 51, .5);
+			border-radius: 20px;
+			display: flex;
+			align-items: center;
+			position: relative;
+		}
+
+		input {
+			width: 0;
+			height: 30px;
+			font-size: 13px;
+			outline: none;
+			border: none;
+			padding: 0;
+			margin: 0;
+			background: transparent;
+			color: #fff;
+			transition: all .5s linear;
+			opacity: 0;
+		}
+
+		.input-focus {
+			width: 250px;
+			opacity: 1;
+			padding: 0 20px 0 12px;
+		}
+
+		.close-btn {
+			position: absolute;
+			top: 12px;
+			right: 50px;
+			width: 8px;
+			height: 8px;
+			cursor: pointer;
+			color: #fff;
+		}
+
+		.search {
+			margin: auto;
+			width: 30px;
+			height: 30px;
+			background: #5bde0b;
+			border-radius: 50%;
+			transition: all 1s;
+			position: relative;
+		}
+
+		.search:after {
+			content: "";
+			display: inline-block;
+			position: absolute;
+			top: 8px;
+			left: 8px;
+			width: 13px;
+			height: 13px;
+			background: url(/public/img/search.png) no-repeat;
+			background-size: 100% 100%;
+			cursor: pointer;
+		}
+
+		.auto-suggestion {
+			position: absolute;
+			left: 10px;
+			top: 46px;
+			background: rgba(24, 36, 51, .8);
+
+			.suggestion-select-ul {
+				padding: 4px;
+				max-height: 350px;
+				overflow-y: auto;
+			}
+		}
+	}
+}
+
+.screen-tab {
+	.screen-tab-content {
+		display: flex;
+		align-items: center;
+	}
+
+	.tab-menu-item {
+		width: 150px;
+		height: 80px;
+		text-align: center;
+		margin: 0 10px;
+		cursor: pointer;
+	}
+
+	.tab-menu-text {
+		height: 80px;
+		line-height: 80px;
+		font-size: 14px;
+		font-weight: 400;
+		color: #2cedff;
+	}
+
+	.tab-menu {
+		background: url(/public/img/menu.png) no-repeat;
 		background-size: 100% 100%;
 	}
 
-	[class*=" el-icon-"], [class^=el-icon-] {
-		font-family: element-icons !important;
-		speak: none;
-		font-style: normal;
-		font-weight: 400;
-		font-variant: normal;
-		text-transform: none;
-		line-height: 1;
-		vertical-align: baseline;
-		display: inline-block;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-	}
+	.tab-menu-active {
+		background: url(/public/img/menu_active.png) no-repeat;
+		background-size: 100% 100%;
 
-	.el-dialog__headerbtn {
-		position: absolute;
-		top: 20px;
-		right: 20px;
-		padding: 0;
-		background: 0 0;
-		border: none;
-		outline: 0;
+		.tab-menu-text {
+			font-weight: 700;
+			color: #fff;
+		}
+	}
+}
+
+.screen-main {
+	.header-tab {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.tab-item {
+			padding: 0 4px;
+			text-align: center;
+			font-size: 15px;
+			font-weight: 400;
+			color: #fff;
+			position: relative;
+			cursor: pointer;
+		}
+
+		.tab-item-active {
+			font-weight: 700;
+		}
+
+		.tab-item-active:after {
+			content: "";
+			position: absolute;
+			left: 0;
+			bottom: -2px;
+			height: 5px;
+			width: 100%;
+			background: linear-gradient(90deg, rgba(48, 255, 221, 0), rgba(48, 255, 221, .8) 50%, rgba(48, 255, 221, 0));
+		}
+	}
+}
+
+.screen-main {
+	.icon-close {
+		width: 14px;
+		height: 14px;
+		background: url(/public/img/close.png) no-repeat;
+		background-size: 100% 100%;
 		cursor: pointer;
-		font-size: 16px;
 	}
 
-	.item-textarea {
-		width: 250px;
-	}
-
-	.item-textarea > .el-textarea__inner {
-		resize: none;
-		width: 100%;
-		height: 70px;
-		margin-top: 8px;
-		outline: none;
+	.simple-btn-bg {
+		display: inline-block;
+		height: 32px;
+		line-height: 32px;
+		border-radius: 16px;
 		color: #fff;
-		background: hsla(0, 0%, 100%, .26);
-		border: 1px solid hsla(0, 0%, 100%, .5);
+		font-size: 14px;
+		padding: 0 18px;
+		border: 1px solid #32fde3;
+		background: #007767;
+		box-shadow: inset 0 0 8px #5aecf0;
+		cursor: pointer;
 	}
 
-	#mapContainer {
+	.simple-btn-bg:hover {
+		box-shadow: 0 0 8px #5aecf0, inset 0 0 8px #5aecf0;
+	}
+
+	.screen-check-content {
+		display: flex;
+		align-items: center;
+		height: 40px;
+
+		.box-btn {
+			width: 16px;
+			height: 16px;
+			margin-right: 6px;
+			cursor: pointer;
+			border: 1px solid #5bde0b;
+			border-radius: 3px;
+		}
+
+		.box-text {
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 40px;
+			color: #fff;
+			white-space: nowrap;
+		}
+
+		.box-check {
+			background: url(/public/img/check.png) no-repeat 100% 100% !important;
+		}
+	}
+
+	.noData {
 		width: 100%;
-		height: 100%;
+		height: 300px;
+
+		img {
+			margin: 50px auto;
+			display: block;
+		}
 	}
 
-	#bigScreenUserTable {
-		color: #ffffff;
+}
+
+.alarm-detail-info {
+	position: absolute;
+	left: 445px;
+	top: -73px;
+	width: 390px;
+	background: rgba(24, 36, 51, .7);
+	border-radius: 4px;
+	padding: 0 12px 0 12px;
+	z-index: 20;
+	/*min-height: 400px;*/
+
+	.action-group {
+		display: flex;
+		align-items: center;
+		width: 90px;
+		justify-content: space-between;
 	}
 
-	.bigScreenTable.el-table {
-		background-color: rgba(255, 255, 255, 0);
-		color: #ffffff;
+	.detail-text-btn {
+		cursor: pointer;
+		color: #30ffdd;
+		font-size: 12px;
+		position: relative;
+		padding-right: 12px;
+		font-weight: 400;
 	}
 
-	.bigScreenTable.el-table thead {
-		color: rgba(255, 255, 255, 1);
-	}
+	.detail-content {
+		position: relative;
 
-	.bigScreenTable.el-table tr {
-		background-color: rgba(255, 255, 255, 0);
-	}
+		.content-head {
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
 
-	.bigScreenTable.el-table .el-table__body-wrapper {
-		background-color: rgba(255, 255, 255, 0);
-	}
+			.head-select {
+				width: calc(100% - 60px);
+			}
 
-	.bigScreenTable.el-table th.el-table__cell {
-		background-color: rgba(255, 255, 255, 0);
-	}
+			.head-sound {
+				width: 20px;
+				height: 20px;
+				cursor: pointer;
+			}
 
-	.bigScreenTable.el-table td.el-table__cell, .bigScreenTable.el-table th.el-table__cell.is-leaf {
-		border-bottom: none;
-	}
+			.sound-ring {
+				background: url(/public/img/b_ring.png) no-repeat;
+				background-size: 100% 100%;
+			}
 
-	.bigScreenTable.el-table .el-table__body tr:hover > td.el-table__cell {
-		background-color: rgba(255, 255, 255, 0);
-	}
+		}
 
-	.bigScreenTable.el-table .el-table__body tr.current-row > td.el-table__cell {
-		background-color: rgba(255, 255, 255, .1);
+		.content-body {
+			min-height: 200px;
+			max-height: calc(60vh - 120px);
+			overflow-y: auto;
+			overflow-x: hidden;
+			margin-top: 10px;
+
+			.alarm-item {
+				display: flex;
+
+				.item-type {
+					width: 40px;
+					height: 45px;
+					background: url(/public/img/alarm_bg.png) 50% no-repeat;
+					font-size: 14px;
+					color: #fff;
+					text-align: center;
+					margin-top: 10px;
+				}
+
+				.item-content {
+					margin-left: 14px;
+					padding: 10px 0 10px 10px;
+					color: #fff;
+					width: calc(100% - 56px);
+					font-size: 14px;
+					border-left: 1px dashed rgba(225, 255, 255, .3);
+					position: relative;
+
+					.item-content-top {
+						display: flex;
+						justify-content: space-between;
+						padding: 0 4px;
+						font-size: 14px;
+						cursor: pointer;
+
+						.time {
+							color: #fff;
+						}
+
+						.status {
+							color: #fd8018;
+						}
+					}
+
+					.item-content-middle {
+						.alarm-info {
+							font-size: 14px;
+							font-weight: 700;
+							cursor: pointer;
+						}
+					}
+				}
+
+				.item-content:before {
+					content: "";
+					display: inline-block;
+					position: absolute;
+					left: -7px;
+					top: 12px;
+					width: 12px;
+					height: 12px;
+					background: url(/public/img/round.png) no-repeat;
+					background-size: 100% 100%;
+				}
+			}
+		}
+
+		.content-footer {
+			text-align: center;
+
+			.btn-prev {
+				color: #fff;
+				background: transparent;
+
+				.el-icon {
+					display: block;
+					font-size: 12px;
+					font-weight: 700;
+				}
+			}
+
+			.btn-next {
+				color: #fff;
+				background: transparent;
+
+				.el-icon {
+					display: block;
+					font-size: 12px;
+					font-weight: 700;
+				}
+			}
+
+			.el-pagination {
+				white-space: nowrap;
+				padding: 2px 5px;
+				color: #ffffff;
+				font-weight: 700;
+
+				button {
+					border: none;
+					padding: 0 6px;
+					display: inline-block;
+					font-size: 13px;
+					min-width: 35.5px;
+					height: 28px;
+					line-height: 28px;
+					vertical-align: top;
+					box-sizing: border-box;
+					background: rgba(255, 255, 255, 0) !important;
+				}
+
+				.btn-prev {
+					background: rgba(255, 255, 255, 0) !important;
+				}
+
+				.el-pager {
+					vertical-align: top;
+					margin: 0;
+					display: inline-block;
+					background: rgba(255, 255, 255, 0) !important;
+
+					li {
+						vertical-align: top;
+						margin: 0;
+						display: inline-block;
+						padding: 0 4px;
+						font-size: 13px;
+						min-width: 35.5px;
+						height: 28px;
+						line-height: 28px;
+						box-sizing: border-box;
+						text-align: center;
+						background: rgba(255, 255, 255, 0) !important;
+					}
+				}
+
+				.btn-next {
+					padding-left: 12px;
+					cursor: pointer;
+					margin: 0;
+				}
+			}
+		}
+
+		.el-loading-mask {
+			position: absolute;
+			z-index: 2000;
+			background-color: hsla(0, 0%, 100%, .9);
+			margin: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			transition: opacity .3s;
+
+			.el-loading-spinner {
+				top: 50%;
+				margin-top: -21px;
+				width: 100%;
+				text-align: center;
+				position: absolute;
+
+				.el-loading-spinner i {
+					color: #409eff;
+				}
+			}
+		}
 	}
+}
+
+.screen-main .left_arrow:before,
+.screen-main .left_middle_arrow:before {
+	content: "";
+	display: inline-block;
+	position: absolute;
+	left: -15px;
+	width: 15px;
+	height: 17px;
+	/*background: url(/public/img/left_arrow.png) no-repeat;*/
+	background-size: 100% 100%;
+}
+.areaNavItem{
+	color: #ffffff;
+}
+.areaActive{
+	color: #0bf1ff;
+}
+[class*=" el-icon-"],
+[class^=el-icon-] {
+	font-family: element-icons !important;
+	speak: none;
+	font-style: normal;
+	font-weight: 400;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	vertical-align: baseline;
+	display: inline-block;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.el-dialog__headerbtn {
+	position: absolute;
+	top: 20px;
+	right: 20px;
+	padding: 0;
+	background: 0 0;
+	border: none;
+	outline: 0;
+	cursor: pointer;
+	font-size: 16px;
+}
+
+.item-textarea {
+	width: 250px;
+}
+
+.item-textarea>.el-textarea__inner {
+	resize: none;
+	width: 100%;
+	height: 70px;
+	margin-top: 8px;
+	outline: none;
+	color: #fff;
+	background: hsla(0, 0%, 100%, .26);
+	border: 1px solid hsla(0, 0%, 100%, .5);
+}
+
+#mapContainer {
+	width: 100%;
+	height: 100%;
+}
+
+#bigScreenUserTable {
+	color: #ffffff;
+}
+
+.bigScreenTable.el-table {
+	background-color: rgba(255, 255, 255, 0);
+	color: #ffffff;
+}
+
+.bigScreenTable.el-table thead {
+	color: rgba(255, 255, 255, 1);
+}
+
+.bigScreenTable.el-table tr {
+	background-color: rgba(255, 255, 255, 0);
+}
+
+.bigScreenTable.el-table .el-table__body-wrapper {
+	background-color: rgba(255, 255, 255, 0);
+}
+
+.bigScreenTable.el-table th.el-table__cell {
+	background-color: rgba(255, 255, 255, 0);
+}
+
+.bigScreenTable.el-table td.el-table__cell,
+.bigScreenTable.el-table th.el-table__cell.is-leaf {
+	border-bottom: none;
+}
+
+.bigScreenTable.el-table .el-table__body tr:hover>td.el-table__cell {
+	background-color: rgba(255, 255, 255, 0);
+}
+
+.bigScreenTable.el-table .el-table__body tr.current-row>td.el-table__cell {
+	background-color: rgba(255, 255, 255, .1);
+}
 </style>
diff --git a/src/views/home/widgets/components/ticket.vue b/src/views/home/widgets/components/ticket.vue
index 3b8b9867..6a1fdc4e 100644
--- a/src/views/home/widgets/components/ticket.vue
+++ b/src/views/home/widgets/components/ticket.vue
@@ -11,6 +11,7 @@
           <div>
             <el-badge :value="operationnumber" class="item">
               <el-button
+                class="projecting"
                 icon="el-icon-document-copy"
                 type="primary"
                 size="small"
@@ -21,6 +22,7 @@
           <div>
             <el-badge :value="rpjnumber" class="item">
               <el-button
+              class="projecting"
                 icon="el-icon-document-copy"
                 type="warning"
                 size="small"
@@ -31,6 +33,7 @@
           <div>
             <el-badge :value="visitnumber" class="item">
               <el-button
+              class="projecting"
                 icon="el-icon-document-copy"
                 type="success"
                 size="small"
@@ -56,7 +59,7 @@
           <div class="cockpit-count">
             <div class="count-list">
               <div class="count-list-item">
-                <div class="item-img item-img2"></div>
+                <div class="item-img item-img1"></div>
                 <div class="item-info">
                   <div title="员工" class="normal">内部员工</div>
                   <div class="bottom">
@@ -66,7 +69,7 @@
                 </div>
               </div>
               <div class="count-list-item">
-                <div class="item-img item-img1"></div>
+                <div class="item-img item-img2"></div>
                 <div class="item-info">
                   <div title="外来人员" class="normal">访客</div>
                   <div class="bottom">
@@ -177,6 +180,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.projecting{
+  width: 45px;
+    height: 45px;
+    font-size: 25px;
+}
 .welcome .logo {
   text-align: center;
 }
@@ -228,26 +236,7 @@ export default {
   flex: 1;
   font-size: 14px;
 }
-.item-img {
-  width: 50px;
-  height: 50px;
-  position: relative;
-  margin-right: 6px;
-  flex-shrink: 0;
-}
 
-.item-img:after {
-  content: "";
-  width: 38px;
-  height: 38px;
-  position: absolute;
-  left: 7px;
-  top: 7px;
-  background: url(/public/img/rotate_line.png) no-repeat;
-  background-size: 100% 100%;
-  -webkit-animation: rotate 4s linear infinite;
-  animation: rotate 4s linear infinite;
-}
 .zuoye {
   background: url(/public/img/zuoye.png) no-repeat;
   background-size: 100% 100%;
@@ -276,33 +265,34 @@ export default {
           position: relative;
           margin-right: 6px;
           flex-shrink: 0;
+          border-radius: 25px;
         }
 
-        .item-img:after {
-          content: "";
-          width: 38px;
-          height: 38px;
-          position: absolute;
-          left: 7px;
-          top: 7px;
-          background: url(/public/img/rotate_line.png) no-repeat;
-          background-size: 100% 100%;
-          -webkit-animation: rotate 4s linear infinite;
-          animation: rotate 4s linear infinite;
-        }
+        // .item-img:after {
+        //   content: "";
+        //   width: 38px;
+        //   height: 38px;
+        //   position: absolute;
+        //   left: 7px;
+        //   top: 7px;
+        //   background: url(/public/img/rotate_line.png) no-repeat;
+        //   background-size: 100% 100%;
+        //   -webkit-animation: rotate 4s linear infinite;
+        //   animation: rotate 4s linear infinite;
+        // }
 
         .item-img1 {
-          background: url(/public/img/icon_wlry.png) no-repeat;
+          background: url(/public/img/employee.png) no-repeat;
           background-size: 100% 100%;
         }
 
         .item-img2 {
-          background: url(/public/img/icon_nbyg.png) no-repeat;
+          background: url(/public/img/visitor.png) no-repeat;
           background-size: 100% 100%;
         }
 
         .item-img3 {
-          background: url(/public/img/icon_cbs.png) no-repeat;
+          background: url(/public/img/remployee.png) no-repeat;
           background-size: 100% 100%;
         }