Merge remote-tracking branch 'origin/visu_firecontrol_01_siping_2.5d' into visu_firecontrol_01_siping_2.5d

package.json

@@ -39,6 +39,7 @@
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
+    "animate.css": "^4.1.1",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.19.1",

src/api/components/supermap.js

@@ -28,9 +28,9 @@ export const iconList = {
   //数据中心图标
   'sj-icon-map-centerdata-t-forest-waterintake': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-waterintake.png'),//取水口
   'sj-icon-map-centerdata-t-forest-watercrane': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-watercrane.png'),//水鹤
-  'sj-icon-map-centerdata-t-forest-firehydrant-1': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-firehydrant-1.png'),//地上消火栓
-  'sj-icon-map-centerdata-t-forest-firehydrant-2': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-firehydrant-2.png'),//地下消火栓
-  'sj-icon-map-centerdata-t-forest-firehydrant-3': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-firehydrant-3.png'),//室内消火栓
+  'sj-icon-map-centerdata-t-forest-firehydrant@1': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-firehydrant@1.png'),//地上消防栓
+  'sj-icon-map-centerdata-t-forest-firehydrant@2': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-firehydrant@2.png'),//地下消防栓
+  'sj-icon-map-centerdata-t-forest-firehydrant@3': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-firehydrant@3.png'),//室内消防栓
   'sj-icon-map-centerdata-t-firecontrol-basic-linkage-force': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-firecontrol-basic-linkage-force.png'),//基本联动力量
   'sj-icon-map-centerdata-t-firecontrol-foam-liquid': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-firecontrol-foam-liquid.png'),//泡沫液
   'sj-icon-map-centerdata-t-firecontrol-other-linkage-force': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-firecontrol-other-linkage-force.png'),//其他消防力量
@@ -39,9 +39,6 @@ export const iconList = {
   'sj-icon-map-centerdata-t-firecontrol-fire-pressure-sensor': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-firecontrol-fire-pressure-sensor.png'),//压力传感器
   'sj-icon-map-centerdata-t-firecontrol-fulltime-station': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-firecontrol-fulltime-station.png'),//专职站
   'sj-icon-map-centerdata_t_forest_watercrane': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_t_forest_watercrane.png'),//水鹤
-  'sj-icon-map-centerdata_t_forest_firehydrant@1': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_t_forest_firehydrant@1.png'),//地上消防栓
-  'sj-icon-map-centerdata_t_forest_firehydrant@2': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_t_forest_firehydrant@2.png'),//地下消防栓
-  'sj-icon-map-centerdata_t_forest_firehydrant@3': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_t_forest_firehydrant@3.png'),//室内消防栓
   'sj-icon-map-centerdata-t-forest-fireteam': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-fireteam.png'),//森林防火队
   'sj-icon-map-centerdata-slmonitor-traffic': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-slmonitor-traffic.png'),//交通精细化摄像头
 
@@ -55,10 +52,12 @@ export const iconList = {
   'sj-icon-map-centerdata_water_pressure_sensor': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_water_pressure_sensor.png'),//水压传感器
   'sj-icon-map-centerdata_water_flow_rate': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_water_flow_rate.png'), //水流速传感器
 
-
+  'sj-icon-map-centerdata-sand-quarry-camera':require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-sand-quarry-camera.png'),//矿坑摄像头
+  'sj-icon-map-centerdata-t-hydraulic-reservoir-camera':require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-hydraulic-reservoir.png'),//水库摄像头
   //云图图标
-  'sj-icon-map-centerdata-t-forest-firehydrant@1': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-firehydrant@1.png'),//地上消防栓
-  'sj-icon-map-centerdata-t-forest-firehydrant@2': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-firehydrant@2.png'),//地下消防栓
-  'sj-icon-map-centerdata-t-forest-firehydrant@3': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-firehydrant@3.png'),//室内消防栓
   'sj-icon-map-centerdata-slmonitor': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-slmonitor.png'),//水利摄像头
+  'sj-icon-map-not-centerdata-t-hydraulic-reservoir-camera':require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-not-centerdata-sand-quarry-camera.png'),//水利摄像头
+  'sj-icon-map-not-centerdata-slmonitor':require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-not-centerdata-slmonitor.png'),//水利摄像头
+  'sj-icon-map-not-centerdata-sand-quarry-camera':require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-not-centerdata-river_camera.png'),//水利摄像头
+  'sj-icon-map-not-centerdata-slmonitor-traffic':require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-not-centerdata-slmonitor-traffic.png'),//水利摄像头
 }

src/api/datacenter.js

@@ -1,52 +1,16 @@
 import request from '@/utils/request'
 
-// 获取左侧菜单列表
-export function getResource() {
-  return request({
-    url: '/center-firecontrol/VisuForestDataCenterController/getResource',
-    method: 'post',
-  })
-}
 // 获取左侧菜单列表-NEW
-export function fireControlViewList() {
+export function fireControlViewList(type) {
   return request({
-    url: '/center-firecontrol/VisuForestDataCenterController/fireControlViewList',
-    method: 'post',
+    url: '/sooka-middleware/visual/getResourceList?type='+type,
+    method: 'get',
   })
 }
 //点击左侧菜单列表查询落点+按部门分组 NEW
-export function fireControlViewPoint(type, name) {
-  return request({
-    url: '/center-firecontrol/VisuForestDataCenterController/fireControlViewPoint',
-    method: 'post',
-    data:{
-      "name": name,
-      "type": type
-    }
-  })
-}
-
-//点击左侧菜单列表查询落点
-export function getResourcePoint(resourceTable) {
-  return request({
-    url: '/center-firecontrol/VisuForestDataCenterController/getResourcePoint',
-    method: 'post',
-    data:{"resourceTable":resourceTable}
-  })
-}
-//点击左侧菜单列表查询落点 new
-export function getPointByDeptId(type,deptId) {
-  return request({
-    url: '/center-firecontrol/VisuForestDataCenterController/getPointByDeptId',
-    method: 'post',
-    data:{"type":type,"deptId":deptId}
-  })
-}
-//点击右侧菜单列表查询落点
-export function getResourcePointByDeptId(resourceTable,deptId) {
+export function fireControlViewPoint(type, name,deptId) {
   return request({
-    url: '/center-firecontrol/VisuForestDataCenterController/getResourcePoint',
-    method: 'post',
-    data:{"resourceTable":resourceTable,"deptId":deptId}
+    url: '/sooka-middleware/visual/getResourcePoint?type='+type+'&name='+name+'&deptId='+deptId,
+    method: 'get'
   })
 }

src/api/forest.js

@@ -1,18 +1,17 @@
 import request from '@/utils/request'
 
 // 获取消防左侧菜单列表
-export function fireControlViewList() {
+export function fireControlViewList(type) {
   return request({
-    url: '/center-firecontrol/VisuForestDataCenterController/fireControlViewList',
-    method: 'post',
+    url: '/sooka-middleware/visual/getResourceList?type='+type,
+    method: 'get',
   })
 }
 // 点击左侧菜单列表查询落点
-export function fireControlViewPoint(type, name) {
+export function fireControlViewPoint(param) {
   return request({
-    url: '/center-firecontrol/VisuForestDataCenterController/fireControlViewPoint',
-    method: 'post',
-    data:type
+    url: '/sooka-middleware/visual/getResourcePoint?type='+param.type+'&longitude='+param.longitude+'&latitude='+param.latitude+'&radius='+param.radius,
+    method: 'get'
   })
 }
 
@@ -333,7 +332,7 @@ export function initByCameras(param) {
 // 会议添加联系人并发送短信
 export function sendMessage(param) {
   return request({
-    url: '/center-message/SendMessageController/sendMeetingMsg',
+    url: '/center-message/centerMessageFeign/sendMeetingMsg',
     method: 'post',
     data:param
   })

src/api/monitor.js

@@ -1,11 +1,12 @@
 import request from '@/utils/request'
 
 // 获取左侧动态感知设备
-export function selectDeviceType(deptId) {
+export function selectDeviceType(param) {
   return request({
     url: '/center-firecontrol/VisuForestMonitorCenterController/selectDeviceType',
     method: 'post',
-    data:{"deptId":deptId}
+    data:param
+
   })
 }
 
@@ -27,7 +28,7 @@ export function selectKeyAreaList() {
 // 获取重点区域
 export function getRegionalFlag(id) {
   return request({
-    url: '/center-firecontrol/VisuForestCloudMapController/getRegionalFlag/'+id,
+    url: '/center-data/importarea/getRegionalFlagFeign/' + id,
     method: 'get',
   })
 }
@@ -86,3 +87,14 @@ export function getMonitorDeviceAndDataList(deptId) {
     method: 'get',
   })
 }
+//根据部门ID获取具有查看权限的摄像头
+export function selectCameraByCoverage(deptId) {
+  return request({
+    url: '/center-monitor/camera/selectCameraByCoverage',
+    method: 'post',
+    data:{
+      deptId:deptId,
+      type:'8'
+    }
+  })
+}

src/assets/styles/base.scss

@@ -84,8 +84,8 @@ $date-state3: #d6333b;
 
 //视频摄像头预览弹层样式
 .videoCustomWidth {
-  width: 1070px !important;
-  height: 800px !important;
+  width: 1150px !important;
+  height: 700px !important;
 }
 //电视墙视频摄像头预览弹层样式
 .TVWallCustomWidth {
@@ -226,6 +226,7 @@ ul {
   list-style: none;
 }
 
+
 .sj-container {
   width: 100%;
   height: 100vh;
@@ -241,32 +242,6 @@ ul {
 .sj-icon-btn:hover {
   text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
 }
-.sj-upload{
-  .el-upload--picture-card{
-    background-color: #0d1620!important;
-    border: 1px dashed #083874;
-  }
-  .el-upload--picture-card i {
-    color: #153d6c;
-  }
-}
-// 下拉
-.el-select-dropdown {
-  border: none;
-  background-color: rgba(1, 28, 82, 0.8);
-}
-.el-select-dropdown__item{
-  color: $white;
-}
-.el-select-dropdown{
-  background-color: #00335c;
-  border: solid 1px #56dfff;
-  color: $white;
-}
-.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
-  background-color: #035faa;
-
-}
 //tips样式
 .js-tps{
 
@@ -286,10 +261,10 @@ ul {
     overflow-y: scroll;
     flex-wrap: wrap;
     background-image: -moz-linear-gradient($boxBG)!important;
-  background-image: -webkit-linear-gradient($boxBG) !important;
-  background-image: linear-gradient($boxBG)!important;
-  box-shadow: $shadowTitle !important;
-  border-radius: .5rem;
+    background-image: -webkit-linear-gradient($boxBG) !important;
+    background-image: linear-gradient($boxBG)!important;
+    box-shadow: $shadowTitle !important;
+    border-radius: .5rem;
     .leader-info-list-con{
       padding: .5rem  1rem;
       margin:.5rem;
@@ -312,8 +287,11 @@ ul {
 
 }
 
- //超图气泡
- .leaflet-popup-content-wrapper {
+
+
+
+//超图气泡
+.leaflet-popup-content-wrapper {
   // padding: 15px 20px !important;
   background-image: -moz-linear-gradient($popupBG)!important;
   background-image: -webkit-linear-gradient($popupBG) !important;
@@ -328,23 +306,24 @@ ul {
   color: #333;
   box-shadow:none !important;
 }
- //超图气泡内插槽
-  .map-tip {
-    .d-l-con {
+//超图气泡内插槽
+.map-tip {
+  .d-l-con {
+    width: 100%;
+    box-shadow: none;
+    cursor:auto;
+
+    .d-l-l-text {
       width: 100%;
-      box-shadow: none;
-      cursor: auto ;
-      .d-l-l-text {
-        width: 100%;
-        //white-space: nowrap;
+      //white-space: nowrap;
 
-        h4 {
-          // display: flex;
-          color:$white;
-        }
+      h4 {
+        // display: flex;
+        color:$white;
       }
     }
   }
+}
 
 div::-webkit-scrollbar {
   display: none;
@@ -678,8 +657,8 @@ div::-webkit-scrollbar {
     font-weight: bolder;
     background: -webkit-gradient(linear, right top, left top, from(#051d2b), color-stop(#006ec8), to(#051d2b));
     background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
-    -webkit-box-shadow: rgb(5 103 194 / 80%) 0px 0px 15px inset;
-    box-shadow: rgb(5 103 194 / 80%) 0px 0px 15px inset;
+    -webkit-box-shadow: rgba(5, 103, 194, 0.8) 0px 0px 15px inset;
+    box-shadow: rgba(5, 103, 194, 0.8) 0px 0px 15px inset;
     padding: 0.5rem 1rem;
     cursor: pointer;
   }
@@ -1469,6 +1448,11 @@ div::-webkit-scrollbar {
   background: linear-gradient($conBg);
   position: absolute;
 
+  // 2.5D地图显示
+  .cesium-infoBox{
+    z-index: 9999 !important;
+
+  }
   .el-input__inner {
     border: 1px $searchBorder;
     background-color: $searchBG;
@@ -1476,7 +1460,6 @@ div::-webkit-scrollbar {
   }
 
 
-
   //收起展开
   .mascot {
     position: fixed;
@@ -2276,8 +2259,8 @@ div::-webkit-scrollbar {
     color: $fListTitle;
     padding: .2rem;
     .el-tooltip__popper{
-		width: 100px;
-	}
+      width: 100px;
+    }
     h4 {
       font-size: .7rem;
       margin: 0;
@@ -2411,7 +2394,7 @@ div::-webkit-scrollbar {
   //曝光台
   .bgt-state {
     // width: 35%;
-	width:38%;
+    width:38%;
     padding: 0.3rem 0.5rem;
     border: 2px solid rgba(0, 174, 255, 0.9);
     -webkit-box-shadow: 0 0 0.5rem 0 #00c8ff inset;
@@ -2462,7 +2445,7 @@ div::-webkit-scrollbar {
         background-color: $eventStateColor-sb;
         color: $white;
         // padding: .4rem;
-		padding:0.25rem 0.4rem;
+        padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2485,7 +2468,7 @@ div::-webkit-scrollbar {
         background-color: $eventStateColor-cb;
         color: $white;
         // padding: .4rem;
-		padding:0.25rem 0.4rem;
+        padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2508,7 +2491,7 @@ div::-webkit-scrollbar {
         background-color: $eventStateColor-qs;
         color: $white;
         // padding: .4rem;
-		padding:0.25rem 0.4rem;
+        padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2531,7 +2514,7 @@ div::-webkit-scrollbar {
         background-color: $eventStateColor-wb;
         color: $white;
         // padding: .4rem;
-		padding:0.25rem 0.4rem;
+        padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2554,7 +2537,7 @@ div::-webkit-scrollbar {
         background-color: $eventStateColor-cf;
         color: $white;
         // padding: .4rem;
-		padding:0.25rem 0.4rem;
+        padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2577,7 +2560,7 @@ div::-webkit-scrollbar {
         background-color: $eventStateColor-bj;
         color: $white;
         // padding: .4rem;
-		padding:0.25rem 0.4rem;
+        padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2600,7 +2583,7 @@ div::-webkit-scrollbar {
         background-color: $eventStateColor-gd;
         color: $white;
         // padding: .4rem;
-		padding:0.25rem 0.4rem;
+        padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2621,7 +2604,7 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-qr;
         color: $white;
-		    padding:0.25rem 0.4rem;
+        padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2923,11 +2906,6 @@ div::-webkit-scrollbar {
   }
 }
 
-// 2.5D地图显示
-.cesium-infoBox{
-  z-index: 9999 !important;
-
-}
 .el-textarea__inner {
   background: $eventBG;
   border: 1px $searchBorder;
@@ -3274,45 +3252,46 @@ div::-webkit-scrollbar {
 }
 
 
+
 .no_hover{
   cursor: auto;
 }
 
 // 20220927 林业修改
 .no_hover:hover{
-	background: none!important;
-	box-shadow: initial;
+  background: none!important;
+  box-shadow: initial;
 }
 .no_hover:hover h4{
-	color:#2bacf7!important;
+  color:#2bacf7!important;
 }
 .no_hover:hover .event-count .count-number{
-	border: 2px solid rgb(59 193 255 / 90%);
-	-webkit-box-shadow: 0 0 0.5rem 0 #2700ff inset;
-	box-shadow: 0 0 0.5rem 0 #2700ff inset;
-	background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#55b8f7), to(#8f3bff));
+  border: 2px solid rgba(58, 193, 255, 0.9);
+  -webkit-box-shadow: 0 0 0.5rem 0 #2700ff inset;
+  box-shadow: 0 0 0.5rem 0 #2700ff inset;
+  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#55b8f7), to(#8f3bff));
 }
 
 .tree_scroll::-webkit-scrollbar{
-	width: 1px;
-	height: 4px;
-	background: #00335c;
+  width: 1px;
+  height: 4px;
+  background: #00335c;
 }
 .tz_tk .el-dialog{
-	width: 20% !important;
+  width: 20% !important;
 }
 .tz_tk .el-form-item__label{
-	color: #d2d2d2;
+  color: #d2d2d2;
 }
 
 // .d-l-l-text h4{
 // 	color:#fff!important;
 // }
 .no_hover .no-weight h4{
-	color:#2bacf7!important;
+  color:#2bacf7!important;
 }
 
+
 .el-message{
   z-index: 9999 !important;
 }
-

src/components/eventLocation.vue

@@ -29,9 +29,6 @@
                       <div class="bgt-img">
                         <img v-if="item.picturePath!=null&&item.picturePath!=''" :src="item.picturePath"
                              style="width: 93px;height: 64px"/>
-                        <img v-else-if="item.eventType == '510'"
-                             src="../assets/images/水压.png"
-                             style="width: 93px;height: 64px"/>
                         <img v-else src="../assets/images/integrated/event-img-sub.png"
                              style="width: 93px;height: 64px"/>
                       </div>
@@ -115,8 +112,10 @@
             <eventLocationSupermap ref="eventLocationSupermap" style="width: 100%;height: 51vh;"
                                    :mapDiv="'eventLocationMap'" :mapSite="{doubleClickZoom:false,zoom:8}"
                                    :codes="['9fa5']"
-                                   :isSideBySide="false" @preview="preview"
-                                   @showEventDialog="showEventDialog"></eventLocationSupermap>
+                                   :isSideBySide="false"  @preview="preview"
+                                   @showEventDialog="showEventDialog"
+                                   :showLatLng="showLatLng"
+            ></eventLocationSupermap>
           </div>
         </div>
       </div>
@@ -285,7 +284,11 @@ export default {
     /** ----------------------------------摄像头预览结束------------------------------------- */
   },
   methods: {
-    getCurrentDataStr() {
+    showLatLng(lat, lng) {
+      this.longitude=lng
+      this.latitude=lat
+    },
+    getCurrentDataStr(){
       let date = new Date()
       let y = date.getFullYear()
       let m = date.getMonth() + 1
@@ -295,6 +298,8 @@ export default {
       return y + '-' + m + '-' + d
     },
     cancelEventLocationShow() {
+      this.longitude=""
+      this.latitude=""
       if (this.oWebControl != null) {
         this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
         this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
@@ -316,6 +321,7 @@ export default {
         return
       }
       this.activeName = 'event'
+      this.$refs.eventLocationSupermap.dropLocation(this.latitude,this.longitude,10)
       let marker = [{
         lng: this.longitude,
         lat: this.latitude,
@@ -404,18 +410,16 @@ export default {
             markersMap.bindPopupHtml += '</div>'
             that.markersList.push(markersMap)
           }
-          setTimeout(() => {
-            that.$refs.eventLocationSupermap.clearM(false)
-            that.$refs.eventLocationSupermap.clearM(true)
-            that.$refs.eventLocationSupermap.setMarkers(that.markersList)
-            that.$refs.eventLocationSupermap.setMarkers(marker)
-          }, 1000)
+          that.$refs.eventLocationSupermap.clearM(false)
+          that.$refs.eventLocationSupermap.clearM(true)
+          that.$refs.eventLocationSupermap.clearP()
+          that.$refs.eventLocationSupermap.setMarkers(that.markersList)
+          that.$refs.eventLocationSupermap.setMarkers(marker)
         } else {
-          setTimeout(() => {
-            that.$refs.eventLocationSupermap.clearM(false)
-            that.$refs.eventLocationSupermap.clearM(true)
-            that.$refs.eventLocationSupermap.setMarkers(marker)
-          }, 1000)
+          that.$refs.eventLocationSupermap.clearM(false)
+          that.$refs.eventLocationSupermap.clearM(true)
+          that.$refs.eventLocationSupermap.clearP()
+          that.$refs.eventLocationSupermap.setMarkers(marker)
         }
       })
     },
@@ -459,6 +463,61 @@ export default {
                 keepBindPopup: false,
                 isAggregation: false,
               };
+              if(res.data[i].cameraUse==1)
+              {
+                if(res.data[i].workingStatus==0)
+                {
+                  markersMap.icon='sj-icon-map-centerdata-slmonitor'
+                  markersMap.click='preview'
+                }else if (res.data[i].workingStatus==1)
+                {
+                  markersMap.icon='sj-icon-map-not-centerdata-slmonitor'
+                  markersMap.click=''
+                }
+
+              } else  if (res.data[i].cameraUse == 2){
+                if(res.data[i].workingStatus==0)
+                {
+                  markersMap.icon = "camera";
+                  markersMap.click='preview'
+                }else if (res.data[i].workingStatus==1)
+                {
+                  markersMap.icon = "camera-not";
+                  markersMap.click=''
+                }
+              }  else if (res.data[i].cameraUse == 3) {
+                if(res.data[i].workingStatus==0)
+                {
+                  markersMap.icon = 'sj-icon-map-centerdata-slmonitor-traffic'
+                  markersMap.click='preview'
+                }else if (res.data[i].workingStatus==1)
+                {
+                  markersMap.icon = 'sj-icon-map-not-centerdata-slmonitor-traffic'
+                  markersMap.click=''
+                }
+
+              }
+              else if (res.data[i].cameraUse == 4) {
+                if(res.data[i].workingStatus==0)
+                {
+                  markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera'
+                  markersMap.click='preview'
+                }else if (res.data[i].workingStatus==1)
+                {
+                  markersMap.icon = 'sj-icon-map-not-centerdata-sand-quarry-camera'
+                  markersMap.click=''
+                }
+
+              }
+              else if (res.data[i].cameraUse == 5) {
+                if (res.data[i].workingStatus == 0) {
+                  markersMap.icon = 'sj-icon-map-centerdata-t-hydraulic-reservoir-camera'
+                  markersMap.click = 'preview'
+                } else if (res.data[i].workingStatus == 1) {
+                  markersMap.icon = 'sj-icon-map-not-centerdata-t-hydraulic-reservoir-camera'
+                  markersMap.click = ''
+                }
+              }
               if (res.data[i].channelCode != null) {
                 markersMap.parameter = {
                   code: res.data[i].cameraCode,
@@ -590,15 +649,6 @@ export default {
     alertReinstall: function() {
       this.$modal.msgWarning('请重新安装客户端')
     },
-    cancelEventLocationShow() {
-      if (this.oWebControl != null) {
-        this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
-        this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
-          },
-          function() {  // 断开与插件服务连接失败
-          })
-      }
-    },
     /** 预览按钮操作 */
     preview(cameraParam) {
       this.showTVWall(cameraParam.code, cameraParam.name);

src/components/leftRightSwiperScroll.vue

@@ -1,187 +1,187 @@
 <template>
-    <!-- 文本超出，左右按钮滚动 -->
-    <div ref="swiperScroll" class="left-right-swiper-scroll-box">
-      <!-- 左边按钮 -->
-      <div v-show="showLeftIcon" @click="handleLeftClick" class="scroll-icon left-icon">
-        <i ></i>
-      </div>
-      <!-- 中间滚动区域 -->
-      <div ref="swiperScrollContent" class="swiper-scroll-content">
-        <slot></slot>
-      </div>
-      <!-- 右边按钮 -->
-      <div v-show="showRightIcon" @click="handleRightClick" class="scroll-icon right-icon">
-        <i ></i>
-      </div>
+  <!-- 文本超出，左右按钮滚动 -->
+  <div ref="swiperScroll" class="left-right-swiper-scroll-box">
+    <!-- 左边按钮 -->
+    <div v-show="showLeftIcon" @click="handleLeftClick" class="scroll-icon left-icon">
+      <i ></i>
     </div>
-    </template>
+    <!-- 中间滚动区域 -->
+    <div ref="swiperScrollContent" class="swiper-scroll-content">
+      <slot></slot>
+    </div>
+    <!-- 右边按钮 -->
+    <div v-show="showRightIcon" @click="handleRightClick" class="scroll-icon right-icon">
+      <i ></i>
+    </div>
+  </div>
+</template>
 
-    <script>
-    export default {
-      name: 'leftRightSwiperScroll',
-      props: {
-        swiperList: {
-          type: Object,
-          default: () => {
-            return {};
-          }
-        }
-      },
-      data() {
-        return {
-          showRightIcon: false, // 是否显示右箭头
-          swiperScrollWidth: 0, // 盒子的宽度
-          swiperScrollContentWidth: 0, // 内容的宽度
-          maxClickNum: 0, // 最大点击次数
-          lastLeft: 0, // 上次滑动距离
-          clickNum: 0, // 点击次数
-          childrenList: [] // 传进来的子元素
-        }
-      },
-      computed: {
-        showLeftIcon() {
-          return this.clickNum > 0
-        }
-      },
-      mounted() {
-        // 获取 HTMLCollection 转为 数组
-        this.childrenList = [...this.$refs.swiperScrollContent.children];
-        console.log('childrenList--->', this.childrenList);
-        console.log('swiperScroll--->', this.$refs.swiperScroll);
-        console.log('swiperScrollContent--->', this.$refs.swiperScrollContent);
+<script>
+export default {
+  name: 'leftRightSwiperScroll',
+  props: {
+    swiperList: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      showRightIcon: true, // 是否显示右箭头
+      swiperScrollWidth: 0, // 盒子的宽度
+      swiperScrollContentWidth: 0, // 内容的宽度
+      maxClickNum: 0, // 最大点击次数
+      lastLeft: 0, // 上次滑动距离
+      clickNum: 0, // 点击次数
+      childrenList: [] // 传进来的子元素
+    }
+  },
+  computed: {
+    showLeftIcon() {
+      return this.clickNum > 0
+    }
+  },
+  mounted() {
+    // 获取 HTMLCollection 转为 数组
+    this.childrenList = [...this.$refs.swiperScrollContent.children];
+    console.log('childrenList--->', this.childrenList);
+    console.log('swiperScroll--->', this.$refs.swiperScroll);
+    console.log('swiperScrollContent--->', this.$refs.swiperScrollContent);
 
-        // 盒子的宽度
-        this.swiperScrollWidth = this.$refs.swiperScroll.getBoundingClientRect().width;
-        // 内容的宽度
-        this.swiperScrollContentWidth = this.$refs.swiperScrollContent.getBoundingClientRect().width;
-        // 比较盒子的宽度,跟内容的宽度：判断是否需要展示右边的按钮
-        if(this.swiperScrollWidth < this.swiperScrollContentWidth) {
-          this.showRightIcon = true;
+    // 盒子的宽度
+    this.swiperScrollWidth = this.$refs.swiperScroll.getBoundingClientRect().width;
+    // 内容的宽度
+    this.swiperScrollContentWidth = this.$refs.swiperScrollContent.getBoundingClientRect().width;
+    // 比较盒子的宽度,跟内容的宽度：判断是否需要展示右边的按钮
+    if(this.swiperScrollWidth < this.swiperScrollContentWidth) {
+      this.showRightIcon = true;
+    }
+    console.log('盒子的宽度--->', this.swiperScrollWidth );
+    console.log('内容的宽度--->', this.swiperScrollContentWidth);
+    console.log('this.showRightIcon',this.showRightIcon)
+  },
+  methods: {
+    // 点击右箭头（左侧滚动）
+    handleRightClick() {
+      // 如果点击次数小于数组长度-1时，执行左滑动效果。
+      if (this.clickNum < this.childrenList.length - 1) {
+        // 获取当前元素宽度
+        let width = this.childrenList[this.clickNum].getBoundingClientRect().width;
+        console.log(this.childrenList[this.clickNum], this.childrenList[this.clickNum].getBoundingClientRect());
+        // 获取最后一个元素距离左侧的距离
+        let lastItemOffsetLeft = this.childrenList[this.childrenList.length - 1].offsetLeft;
+        // 获取最后一个元素宽度
+        let lastWidth = this.childrenList[this.childrenList.length - 1].getBoundingClientRect().width;
+        console.log('lastItemOffsetLeft-->', lastItemOffsetLeft, this.childrenList[this.childrenList.length - 1].getBoundingClientRect());
+        // 获取可视区域宽度
+        const lookWidth = this.$refs.swiperScroll.clientWidth;
+        console.log('获取可视区域宽度-->lookWidth', lookWidth);
+        // 如果最后一个元素距离左侧的距离+自身的宽度大于可视距离，表示最后一个元素没有出现，执行滚动效果
+        if (lastItemOffsetLeft + lastWidth > lookWidth) {
+          // 滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
+          this.$refs.swiperScrollContent.style.marginLeft = `${-width + this.lastLeft}px`;
+          this.lastLeft = -width + this.lastLeft;
+          // 点击次数+1
+          this.clickNum++;
+          // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
+          this.maxClickNum = this.clickNum;
         }
-        console.log('盒子的宽度--->', this.swiperScrollWidth );
-        console.log('内容的宽度--->', this.swiperScrollContentWidth);
-        console.log('this.showRightIcon',this.showRightIcon)
-      },
-      methods: {
-        // 点击右箭头（左侧滚动）
-        handleRightClick() {
-          // 如果点击次数小于数组长度-1时，执行左滑动效果。
-          if (this.clickNum < this.childrenList.length - 1) {
-            // 获取当前元素宽度
-            let width = this.childrenList[this.clickNum].getBoundingClientRect().width;
-            console.log(this.childrenList[this.clickNum], this.childrenList[this.clickNum].getBoundingClientRect());
-            // 获取最后一个元素距离左侧的距离
-            let lastItemOffsetLeft = this.childrenList[this.childrenList.length - 1].offsetLeft;
-            // 获取最后一个元素宽度
-            let lastWidth = this.childrenList[this.childrenList.length - 1].getBoundingClientRect().width;
-            console.log('lastItemOffsetLeft-->', lastItemOffsetLeft, this.childrenList[this.childrenList.length - 1].getBoundingClientRect());
-            // 获取可视区域宽度
-            const lookWidth = this.$refs.swiperScroll.clientWidth;
-            console.log('获取可视区域宽度-->lookWidth', lookWidth);
-            // 如果最后一个元素距离左侧的距离+自身的宽度大于可视距离，表示最后一个元素没有出现，执行滚动效果
-            if (lastItemOffsetLeft + lastWidth > lookWidth) {
-              // 滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
-              this.$refs.swiperScrollContent.style.marginLeft = `${-width + this.lastLeft}px`;
-              this.lastLeft = -width + this.lastLeft;
-              // 点击次数+1
-              this.clickNum++;
-              // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
-              this.maxClickNum = this.clickNum;
-            }
-            // 如果最后一个元素距离左侧的距离小于于可视距离，需要隐藏右侧箭头
-            let timer = setTimeout(() => {
-              // 重新：获取最后一个元素距离左侧的距离
-              let lastItemOffsetLeft2 = this.childrenList[this.childrenList.length - 1].offsetLeft;
-              console.log('lastItemOffsetLeft2-新的->', lastItemOffsetLeft2);
-              if(lastItemOffsetLeft2 + lastWidth <= lookWidth) {
-                this.showRightIcon = false;
-              }
-              clearTimeout(timer);
-            }, 200);
-          }
-        },
-        // 点击左箭头（右侧滚动）
-        handleLeftClick() {
-          // 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头
-          if (this.clickNum > 0) {
-            // 获取当前元素宽度
-            let width = this.childrenList[this.clickNum - 1].getBoundingClientRect().width;
-            // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
-            this.$refs.swiperScrollContent.style.marginLeft = `${this.lastLeft + width}px`
-            this.lastLeft = width + this.lastLeft;
-            // 点击次数-1
-            this.clickNum--;
-            // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
-            if (this.clickNum < this.maxClickNum) {
-              this.showRightIcon = true;
-            }
+        // 如果最后一个元素距离左侧的距离小于于可视距离，需要隐藏右侧箭头
+        let timer = setTimeout(() => {
+          // 重新：获取最后一个元素距离左侧的距离
+          let lastItemOffsetLeft2 = this.childrenList[this.childrenList.length - 1].offsetLeft;
+          console.log('lastItemOffsetLeft2-新的->', lastItemOffsetLeft2);
+          if(lastItemOffsetLeft2 + lastWidth <= lookWidth) {
+            this.showRightIcon = false;
           }
+          clearTimeout(timer);
+        }, 200);
+      }
+    },
+    // 点击左箭头（右侧滚动）
+    handleLeftClick() {
+      // 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头
+      if (this.clickNum > 0) {
+        // 获取当前元素宽度
+        let width = this.childrenList[this.clickNum - 1].getBoundingClientRect().width;
+        // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
+        this.$refs.swiperScrollContent.style.marginLeft = `${this.lastLeft + width}px`
+        this.lastLeft = width + this.lastLeft;
+        // 点击次数-1
+        this.clickNum--;
+        // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
+        if (this.clickNum < this.maxClickNum) {
+          this.showRightIcon = true;
         }
       }
     }
-    </script>
+  }
+}
+</script>
 
-    <style lang='scss' scoped>
-    .left-right-swiper-scroll-box {
-      position: relative;
-      display: flex;
-      width: 1145px;
-      overflow: hidden;
-      transition: all 0.3s;
-      padding: 0 30px;
-        margin-right: 5px;
-      .scroll-icon {
-        position: absolute;
-        top: 0;
-        width: 30px;
-        height: 70px;
-        z-index: 9;
-        cursor: pointer;
-        background-image: linear-gradient(270deg, invalid gradient);
-          z-index: 1000;
-        i {
-          position: absolute;
-          top: 5px;
-          width: 20px;
-          height: 20px;
-        }
-        &.left-icon {
-          left: 0;
-          background: url("~@/assets/images/img-mask-left.png") 0 0 no-repeat;
-          // i {
-          //   left: 0;
-          //   background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
-          // }
-        }
-        &.left-icon:hover{
-          left: 0;
-          background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
+<style lang='scss' scoped>
+.left-right-swiper-scroll-box {
+  position: relative;
+  display: flex;
+  width: 1145px;
+  overflow: hidden;
+  transition: all 0.3s;
+  padding: 0 30px;
+  margin-right: 5px;
+  .scroll-icon {
+    position: absolute;
+    top: 0;
+    width: 30px;
+    height: 70px;
+    z-index: 9;
+    cursor: pointer;
+    background-image: linear-gradient(270deg, invalid gradient);
+    z-index: 1000;
+    i {
+      position: absolute;
+      top: 5px;
+      width: 20px;
+      height: 20px;
+    }
+    &.left-icon {
+      left: 0;
+      background: url("~@/assets/images/img-mask-left.png") 0 0 no-repeat;
+      // i {
+      //   left: 0;
+      //   background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
+      // }
+    }
+    &.left-icon:hover{
+      left: 0;
+      background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
 
-        }
+    }
 
-        &.right-icon {
-          right: 0;
-          background: url("~@/assets/images/img-mask-right.png") 0 0 no-repeat;
-          // i {
-          //   right: 0;
-          //   background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
-          // }
-        }
-        &.right-icon:hover {
-          right: 0;
-          background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
+    &.right-icon {
+      right: 0;
+      background: url("~@/assets/images/img-mask-right.png") 0 0 no-repeat;
+      // i {
+      //   right: 0;
+      //   background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
+      // }
+    }
+    &.right-icon:hover {
+      right: 0;
+      background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
 
-        }
+    }
 
-      }
+  }
 
 
-      .swiper-scroll-content {
-        width: fit-content;
-        display: flex;
-        flex-wrap: nowrap;
-        white-space: nowrap;
-        transition: all 0.3s;
-      }
-    }
-    </style>
+  .swiper-scroll-content {
+    width: fit-content;
+    display: flex;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    transition: all 0.3s;
+  }
+}
+</style>

src/components/supermap.vue

@@ -1,23 +1,29 @@
 <template>
   <div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;">
-    <div id="toolbar" v-if="isdynamicPlotting" class="panel panel-primary"
-         style="position:absolute;z-index: 9999;top:4rem;left: 1rem; border-radius: 4px; width: fit-content;height:635px;overflow-y:scroll;background:#040b1f">
-      <div class="panel-heading" id="panelheading">
-        <h5 style=" color: #2bacf7;font-size: 1rem;padding:.5rem;">鼠标标绘</h5>
-      </div>
-      <div class="panel-body content" id="panelbodycontent" style="margin-bottom: .5rem;padding-right: .5rem;">
-        <div align="right" class="button-group">
-          <el-button type="success" @click="PlottingDrawCancel">取消标绘</el-button>
-          &nbsp;&nbsp;
-          <el-button type="success" @click="clearLayers">清空标绘</el-button>
+    <transition-group
+      appear
+      name="animate__animated animate__bounce"
+      enter-active-class="animate__backInLeft"
+      leave-active-class="animate__backOutLeft"
+    >
+      <div id="toolbar" v-if="isdynamicPlotting" class="panel panel-primary" v-show="mapToolShowBH" key="mapFlash"
+           data-html2canvas-ignore style="position:absolute;z-index: 9999;top:4rem;left: 1rem; border-radius: 4px; width: fit-content;height:635px;overflow-y:scroll;background:#040b1f">
+        <div class="panel-heading" id="panelheading">
+          <h5 style=" color: #2bacf7;font-size: 1rem;padding:.5rem;">鼠标标绘</h5>
         </div>
-      </div>
-      <div id="plottingPanel">
-        <div id="plotPanel" style="width: 15rem;height:50%;overflow-y:scroll;">
+        <div class="panel-body content" id="panelbodycontent" style="margin-bottom: .5rem;padding-right: .5rem;">
+          <div align="right" class="button-group">
+            <el-button type="success" @click="PlottingDrawCancel">取消标绘</el-button>
+            &nbsp;&nbsp;
+            <el-button type="success" @click="clearLayers">清空标绘</el-button>
+          </div>
+        </div>
+        <div id="plottingPanel">
+          <div id="plotPanel" style="width: 15rem;height:50%;overflow-y:scroll;">
+          </div>
         </div>
       </div>
-    </div>
-
+    </transition-group>
     <div id="toolbar-heat" v-if="isheatPlotting" class="panel panel-primary"
          style="position:absolute;z-index: 9999; padding: 1rem; bottom:3rem;right: 1rem; border-radius: 4px; width: fit-content;height:fit-content;overflow-y:scroll;background:#040b1f">
       <div class="panel-body content">
@@ -42,43 +48,43 @@
             <input type="text" class="form-control" id="heatNums1" value="6"/>
           </div>
         </div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">温度</span>
-		    <input type="text" class="form-control" id="heatNums2" value="10℃"/>
-		  </div>
-		</div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">湿度</span>
-		    <input type="text" class="form-control" id="heatNums3" value="6%RH"/>
-		  </div>
-		</div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">持续时间</span>
-		    <input type="text" class="form-control" id="heatNums4" value="60分钟"/>
-		  </div>
-		</div>
-		<div class="panel">
-		<div class="input-group">
-		  <span class="input-group-addon">植被类型</span>
-		  <select class="form-control" style="width:auto" id="heatNums5">
-		    <option value="1">针叶林</option>
-		    <option value="31">落叶林</option>
-		  </select>
-		</div>
-		</div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">大气压</span>
-		    <input type="text" class="form-control" id="heatNums6" value="101.325kPa"/>
-		  </div>
-		</div>
-		<div class="panel">
-        <el-button type="success" @click="createHeatPoints">分析</el-button>
-        <el-button type="success" @click="clearHeatPoints">重置</el-button>
-		</div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">温度</span>
+            <input type="text" class="form-control" id="heatNums2" value="10℃"/>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">湿度</span>
+            <input type="text" class="form-control" id="heatNums3" value="6%RH"/>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">持续时间</span>
+            <input type="text" class="form-control" id="heatNums4" value="60分钟"/>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">植被类型</span>
+            <select class="form-control" style="width:auto" id="heatNums5">
+              <option value="1">针叶林</option>
+              <option value="31">落叶林</option>
+            </select>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">大气压</span>
+            <input type="text" class="form-control" id="heatNums6" value="101.325kPa"/>
+          </div>
+        </div>
+        <div class="panel">
+          <el-button type="success" @click="createHeatPoints">分析</el-button>
+          <el-button type="success" @click="clearHeatPoints">重置</el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -318,7 +324,8 @@ export default {
     isSideBySide: false,
     showLatLng: null,
     showAreaLatLng: null,
-    showLineLatLng: null
+    showLineLatLng: null,
+    mapToolShowBH:false,
   },
   methods: {
     /** ----------------------------------火势蔓延  开始------------------------------------- */
@@ -629,19 +636,19 @@ export default {
         if (this.isAggregationMyGroup != undefined && this.isAggregationMyGroup != false) {
           this.isAggregationMyGroup.clearLayers()
         }
-          this.map.removeLayer(this.isAggregationLayers)
-          this.isAggregationLayers = []
-          this.radiusLayers = []
-          this.isAggregationLayers = window.L.markerClusterGroup({
-            //设置为true时显示聚类所占据的范围
-            showCoverageOnHover: true,
-            //设置为true时会向低一级聚类缩放
-            zoomToBoundsOnClick: true,
-            //增加点位时增加聚合动画（否则会出问题）
-            animateAddingMarkers: true,
-            //最大缩放级别点击聚合图标展开图标
-            spiderfyOnMaxZoom: true
-          })
+        this.map.removeLayer(this.isAggregationLayers)
+        this.isAggregationLayers = []
+        this.radiusLayers = []
+        this.isAggregationLayers = window.L.markerClusterGroup({
+          //设置为true时显示聚类所占据的范围
+          showCoverageOnHover: true,
+          //设置为true时会向低一级聚类缩放
+          zoomToBoundsOnClick: true,
+          //增加点位时增加聚合动画（否则会出问题）
+          animateAddingMarkers: true,
+          //最大缩放级别点击聚合图标展开图标
+          spiderfyOnMaxZoom: true
+        })
       } else {
         if (this.myGroup != undefined && this.myGroup != false) {
           this.myGroup.clearLayers()
@@ -709,12 +716,11 @@ export default {
         spiderfyOnMaxZoom: true
       })
       if (!isSideBySide) { //只有一个地图
-        if (this.codes.length != 1) {
+        if (_that.codes.length != 1) {
           modal.msgError('请输入一个地图code！')
           return
         }
-        getSuperMap(this.codes).then(resp => {
-
+        getSuperMap(_that.codes).then(resp => {
           let mapList = resp.data
           if (mapList != null && mapList.length > 0) {
             let url = mapList[0].url
@@ -745,10 +751,10 @@ export default {
               logoControl: logoControl
             }
             let loadConfiguration = Object.assign(defaultConfigure, mapSite)
-            this.map = window.L.map(this.mapDiv, loadConfiguration)
+            _that.map = window.L.map(_that.mapDiv, loadConfiguration)
 
             //鼠标双击落点
-            if (this.showLatLng != undefined) {
+            if (_that.showLatLng != undefined) {
               let icon = new window.L.Icon({
                 iconUrl: iconList['marker'],
                 iconSize: [48, 48],
@@ -757,21 +763,21 @@ export default {
                 shadowSize: [41, 41]
               })
 
-              this.map.on('dblclick', function(e) {
+              _that.map.on('dblclick', function(e) {
                 _that.clearP()
                 _that.showLatLng(e.latlng.lat, e.latlng.lng)
                 let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
                   icon: icon
-                }).addTo(this.map)
+                }).addTo(_that.map)
                 _that.latLngLayers.push(marker)
                 _that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
-                this.map.addLayer(_that.latLngGroup)
+                _that.map.addLayer(_that.latLngGroup)
               })
             }
             //鼠标绘制区域
-            if (this.showAreaLatLng != undefined) {
+            if (_that.showAreaLatLng != undefined) {
               var editableLayers = new window.L.FeatureGroup()
-              this.map.addLayer(editableLayers)
+              _that.map.addLayer(editableLayers)
               let options = {
                 position: 'topleft',
                 draw: {
@@ -789,8 +795,8 @@ export default {
                 }
               }
               var drawControl = new window.L.Control.Draw(options)
-              this.map.addControl(drawControl)
-              this.map.on(window.L.Draw.Event.CREATED, function(e) {
+              _that.map.addControl(drawControl)
+              _that.map.on(window.L.Draw.Event.CREATED, function(e) {
                 let editableLayer = e.layer
                 let layerType = e.layerType
                 editableLayer.on('dblclick', function(e) {
@@ -804,9 +810,9 @@ export default {
               })
             }
             //鼠标绘制线段
-            if (this.showLineLatLng != undefined) {
+            if (_that.showLineLatLng != undefined) {
               var editableLayers = new window.L.FeatureGroup()
-              this.map.addLayer(editableLayers)
+              _that.map.addLayer(editableLayers)
               let options = {
                 position: 'topleft',
                 draw: {
@@ -824,8 +830,8 @@ export default {
                 }
               }
               var drawControl = new window.L.Control.Draw(options)
-              this.map.addControl(drawControl)
-              this.map.on(window.L.Draw.Event.CREATED, function(e) {
+              _that.map.addControl(drawControl)
+              _that.map.on(window.L.Draw.Event.CREATED, function(e) {
                 let editableLayer = e.layer
                 let layerType = e.layerType
                 editableLayer.on('dblclick', function(e) {
@@ -839,15 +845,15 @@ export default {
             }
             // url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326'
 
-            window.L.supermap.tiledMapLayer(url).addTo(this.map)
+            window.L.supermap.tiledMapLayer(url).addTo(_that.map)
           }
         })
       } else { //卷帘地图
-        if (this.codes.length != 2) {
+        if (_that.codes.length != 2) {
           modal.msgError('请输入两个地图code！')
           return
         }
-        getSuperMap(this.codes).then(resp => {
+        getSuperMap(_that.codes).then(resp => {
           let mapList = resp.data
           if (mapList != null && mapList.length == 2) {
             let stamenurl = mapList[0].url
@@ -880,9 +886,9 @@ export default {
             }
 
             let loadConfiguration = Object.assign(defaultConfigure, mapSite)
-            this.map = window.L.map(this.mapDiv, loadConfiguration)
+            _that.map = window.L.map(_that.mapDiv, loadConfiguration)
             //鼠标双击落点
-            if (this.showLatLng != undefined) {
+            if (_that.showLatLng != undefined) {
               let icon = new window.L.Icon({
                 iconUrl: iconList['marker'],
                 iconSize: [48, 48],
@@ -891,21 +897,21 @@ export default {
                 shadowSize: [41, 41]
               })
 
-              this.map.on('dblclick', function(e) {
+              _that.map.on('dblclick', function(e) {
                 _that.clearP()
                 _that.showLatLng(e.latlng.lat, e.latlng.lng)
                 let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
                   icon: icon
-                }).addTo(this.map)
+                }).addTo(_that.map)
                 _that.latLngLayers.push(marker)
                 _that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
-                this.map.addLayer(_that.latLngGroup)
+                _that.map.addLayer(_that.latLngGroup)
               })
             }
             //鼠标绘制区域
-            if (this.showAreaLatLng != undefined) {
+            if (_that.showAreaLatLng != undefined) {
               var editableLayers = new window.L.FeatureGroup()
-              this.map.addLayer(editableLayers)
+              _that.map.addLayer(editableLayers)
               let options = {
                 position: 'topleft',
                 draw: {
@@ -923,8 +929,8 @@ export default {
                 }
               }
               var drawControl = new window.L.Control.Draw(options)
-              this.map.addControl(drawControl)
-              this.map.on(window.L.Draw.Event.CREATED, function(e) {
+              _that.map.addControl(drawControl)
+              _that.map.on(window.L.Draw.Event.CREATED, function(e) {
                 let editableLayer = e.layer
                 let layerType = e.layerType
                 editableLayer.on('dblclick', function(e) {
@@ -938,9 +944,9 @@ export default {
               })
             }
             //鼠标绘制线段
-            if (this.showLineLatLng != undefined) {
+            if (_that.showLineLatLng != undefined) {
               var editableLayers = new window.L.FeatureGroup()
-              this.map.addLayer(editableLayers)
+              _that.map.addLayer(editableLayers)
               let options = {
                 position: 'topleft',
                 draw: {
@@ -958,8 +964,8 @@ export default {
                 }
               }
               var drawControl = new window.L.Control.Draw(options)
-              this.map.addControl(drawControl)
-              this.map.on(window.L.Draw.Event.CREATED, function(e) {
+              _that.map.addControl(drawControl)
+              _that.map.on(window.L.Draw.Event.CREATED, function(e) {
                 let editableLayer = e.layer
                 let layerType = e.layerType
                 editableLayer.on('dblclick', function(e) {
@@ -972,9 +978,9 @@ export default {
               })
             }
 
-            let stamenLayer = window.L.supermap.tiledMapLayer(stamenurl).addTo(this.map)
-            let osmLayer = window.L.supermap.tiledMapLayer(osmurl).addTo(this.map)
-            L.control.sideBySide(stamenLayer, osmLayer).addTo(this.map)
+            let stamenLayer = window.L.supermap.tiledMapLayer(stamenurl).addTo(_that.map)
+            let osmLayer = window.L.supermap.tiledMapLayer(osmurl).addTo(_that.map)
+            L.control.sideBySide(stamenLayer, osmLayer).addTo(_that.map)
           }
         })
       }
@@ -1351,22 +1357,22 @@ export default {
     },
     dynamicPlotting: function() {
       setTimeout(() => {
-          var host = this.host
-          var serverUrl = host + '/iserver/services/plot-jingyong/rest/plot/'
+        var host = this.host
+        var serverUrl = host + '/iserver/services/plot-jingyong/rest/plot/'
 
-          var me = this
-          this.plottingLayer = window.L.supermap.plotting.plottingLayer('plot',
-            serverUrl)
-          this.plottingLayer.spatialAnalystUrl =
-            host + '/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst'
-          this.plottingLayer.addTo(this.map)
-          this.plottingdrawControl = window.L.supermap.plotting.drawControl(this
-            .plottingLayer)
-          this.plottingdrawControl.addTo(this.map)
-          var editControl = window.L.supermap.plotting.editControl()
-          editControl.addTo(this.map)
-          window.L.supermap.plotting.initPlotPanel('plotPanel', serverUrl, this
-            .plottingdrawControl)
+        var me = this
+        this.plottingLayer = window.L.supermap.plotting.plottingLayer('plot',
+          serverUrl)
+        this.plottingLayer.spatialAnalystUrl =
+          host + '/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst'
+        this.plottingLayer.addTo(this.map)
+        this.plottingdrawControl = window.L.supermap.plotting.drawControl(this
+          .plottingLayer)
+        this.plottingdrawControl.addTo(this.map)
+        var editControl = window.L.supermap.plotting.editControl()
+        editControl.addTo(this.map)
+        window.L.supermap.plotting.initPlotPanel('plotPanel', serverUrl, this
+          .plottingdrawControl)
       }, 2000)
     }
     /** ----------------------------------动态绘制结束------------------------------------- */
@@ -1377,30 +1383,30 @@ export default {
 <style lang="scss" scoped>
 @import '@/assets/styles/base.scss';
 .panel{
-	margin-bottom: .5rem;
-	button{
-		margin-top: .5rem;
-	}
-	.input-group{
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		.input-group-addon{
-			color: $inBlue;
-			width: 3rem;
-			text-align: right;
+  margin-bottom: .5rem;
+  button{
+    margin-top: .5rem;
+  }
+  .input-group{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .input-group-addon{
+      color: $inBlue;
+      width: 3rem;
+      text-align: right;
 
-		}
-		.form-control{
-			padding: 0 .3rem;
-			margin-left: .5rem;
-			height: 1.5rem;
-			line-height: 1.5rem;
-			background-color: #112543;
-			color: $inBlue;
-			border: 1px $searchBorder;
-		}
-	}
+    }
+    .form-control{
+      padding: 0 .3rem;
+      margin-left: .5rem;
+      height: 1.5rem;
+      line-height: 1.5rem;
+      background-color: #112543;
+      color: $inBlue;
+      border: 1px $searchBorder;
+    }
+  }
 }
 
 .button-group {

src/components/vBottomMenu.vue

@@ -197,8 +197,8 @@
               <el-link type="success" v-if="item.eventCode!=null&&item.type ==1" @click="showEventDialog_message(item.eventCode)">
                 查看事件详情
               </el-link>
-              <div class="btm-r-pop-info-btm-btn" v-else>
-                <el-button type="primary"  @click="selectMessageById(item.id)">标记已读
+              <div class="btm-r-pop-info-btm-btn">
+                <el-button type="primary" v-if="item.type ==2" @click="selectMessageById(item.id)">标记已读
                 </el-button>
               </div>
             </div>
@@ -432,7 +432,8 @@
                                                  v-for="(itemfile,indexfile) in item.fileVOs">
                                       <el-image :src="itemfile.fileUrl" v-if="itemfile.fileType=='image'"
                                                 :preview-src-list="assetTypeAnImage(item.fileVOs)"
-                                                style="width:3rem; height:3rem;margin: 2px;" :z-index="10000" :title="itemfile.fileName">
+                                                :z-index="10000"
+                                                style="width:3rem; height:3rem;margin: 2px;" :title="itemfile.fileName">
                                       </el-image>
                                       <img v-else-if="itemfile.fileType=='video'"
                                            style="width:3rem; height:3rem;margin: 2px;"
@@ -532,17 +533,13 @@
           </el-input>
         </el-form-item>
         <el-form-item label="附件" prop="schedulePictures" v-if="eventStatusButton=='sh'">
-          <ImageUpload class="sj-upload" ref="ImageUpload" :limit="10" :fileType="['jpg', 'png','jpeg']" :value="uploadAttachList"
+          <ImageUpload ref="ImageUpload" :limit="10" :fileType="['jpg', 'png','jpeg']" :value="uploadAttachList"
                        @input="getUrl"></ImageUpload>
         </el-form-item>
-        <el-button size="mini" type="primary" v-if="eventStatusButton=='sh'"
-                   class="sj-icon-btn"
-                   icon="el-icon-circle-check"
+        <el-button class="sj-icon-btn" icon="el-icon-check" size="mini" type="primary" v-if="eventStatusButton=='sh'"
                    @click="updateCentereventTEventcatalogueStatus('shtg',true)">通过
         </el-button>
-        <el-button size="mini" type="primary" v-if="eventStatusButton=='sh'"
-                   class="sj-icon-btn"
-                   icon="el-icon-circle-close"
+        <el-button class="sj-icon-btn" icon="el-icon-circle-close" size="mini" type="primary" v-if="eventStatusButton=='sh'"
                    @click="updateCentereventTEventcatalogueStatus('shbtg',true)">不通过
         </el-button>
       </el-form>

src/main.js

@@ -28,7 +28,8 @@ import './permission' // permission control
 import ImageUpload from "@/components/ImageUpload"
 //DataV动效组件
 import dataV from '@jiaminghi/data-view'
-
+//动画库
+import animated from 'animate.css'
 //公共过滤器
 import './filters'
 // //WebSocket封装方法
@@ -49,6 +50,7 @@ Vue.use(directive)
 Vue.use(plugins)
 Vue.use(MetaInfo)
 Vue.use(dataV)
+Vue.use(animated)
 Vue.prototype.$echarts = echarts //挂载echarts
 DictData.install()
 

src/store/modules/user.js

@@ -75,6 +75,7 @@ const user = {
           }
           commit('SET_NAME', user.userName)
           Cookies.set('deptId',user.deptId)
+          Cookies.set('deptName',user.deptName)
           commit('SET_USERID', user.id)
           commit('SET_AVATAR', avatar)
           resolve(res)

src/views/bigdata/chart-deviceReportingEvents.vue

@@ -28,8 +28,13 @@
       sbsbsjsl() {
         let that = this
         getSbsbsjsl(null).then(resp => {
-          that.data_sbsjsbsl_num = resp.data.num
-          that.data_sbsjsbsl_reportor = resp.data.reportor
+          // that.data_sbsjsbsl_num = resp.data.num
+          // that.data_sbsjsbsl_reportor = resp.data.reportor
+          for(let i=0;i<8;i++)
+          {
+            that.data_sbsjsbsl_num.push(resp.data.num[0])
+            that.data_sbsjsbsl_reportor.push(resp.data.reportor[0])
+          }
           this.myEcharts()
         })
       },

src/views/firespread.vue

@@ -11,69 +11,134 @@
           <el-row>
             <!-- 左侧 -->
             <el-col :span="18" class="dia-left">
+              <div class="sj-map-tool-select">
+                <transition-group
+                  appear
+                  name="animate__animated animate__bounce"
+                  enter-active-class="animate__lightSpeedInRight"
+                  leave-active-class="animate__backOutRight"
+                >
+                  <div
+                    class="sj-map-tool-select-list"
+                    v-show="mapToolShow"
+                    id="eventMapToolOnly"
+                    key="1"
+                  >
+                    <el-checkbox
+                      v-model="mapToolCheckAll"
+                      @change="mapToolCheckAllChange"
+                      class="sj-map-tool-checkbox-all"
+                    >全选</el-checkbox
+                    >
+                    <el-checkbox-group
+                      v-model="mapToolCheckItem"
+                      @change="mapToolCheckChange"
+                      class="sj-map-tool-checkbox"
+                    >
+                      <el-checkbox
+                        v-for="tools in mapToolCheck"
+                        :label="tools"
+                        :key="tools"
+                      >{{ tools }}</el-checkbox
+                      >
+                    </el-checkbox-group>
+                  </div>
+                </transition-group>
+
+                <el-button
+                  size="small"
+                  icon="el-icon-s-grid"
+                  id="eventMapToolOnlyButton"
+                  @click="mapToolShow = !mapToolShow"
+                >地图功能</el-button
+                >
+              </div>
               <div ref="imageTofile" style="height: 75vh;">
-                <!-- 应急预案 -->
-                <div class="dia-left-top">
-                  <div class="dia-left-top-tit">应急预案</div>
-                  <div class="dia-left-top-carousel">
-                    <el-carousel height="30px" direction="vertical" :interval="2000">
-                      <el-carousel-item v-if="visuForestCloudYuAnBo!=null">
-                        <el-tooltip class="item" effect="dark" :content="visuForestCloudYuAnBo.reserveName"
-                                    placement="top-start">
-                          <a :href="visuForestCloudYuAnBo.fileUrl"><span>
+                <transition-group
+                  appear
+                  name="animate__animated animate__bounce"
+                  enter-active-class="animate__backInDown"
+                  leave-active-class="animate__backOutUp"
+                >
+                  <!-- 应急预案 -->
+                  <div class="dia-left-top" v-show="mapToolCheckItem.includes('应急预案')"
+                       key="yingji" >
+                    <div class="dia-left-top-tit">应急预案</div>
+                    <div class="dia-left-top-carousel">
+
+                      <el-carousel height="30px" direction="vertical" :interval="2000">
+                        <el-carousel-item v-if="visuForestCloudYuAnBo!=null">
+                          <el-tooltip class="item" effect="dark" :content="visuForestCloudYuAnBo.reserveName"
+                                      placement="top-start">
+                            <a :href="visuForestCloudYuAnBo.fileUrl"><span>
                               <div
                                 style=" width: 50px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;">
                                 {{ visuForestCloudYuAnBo.reserveName }}
                               </div>
                             </span></a>
-                        </el-tooltip>
-                      </el-carousel-item>
-                      <el-carousel-item v-else>
-                        <a href="#">暂未关联预案</a>
-                      </el-carousel-item>
-                    </el-carousel>
+                          </el-tooltip>
+                        </el-carousel-item>
+                        <el-carousel-item v-else>
+                          <a href="#">暂未关联预案</a>
+                        </el-carousel-item>
+                      </el-carousel>
+                    </div>
+                    <el-button size="mini" type="primary" class="yatz_button" @click="showUpdateYjYuAn">预案调整
+                    </el-button>
                   </div>
-                  <el-button size="mini" type="primary" class="yatz_button" @click="showUpdateYjYuAn">预案调整
-                  </el-button>
-                </div>
+                </transition-group>
                 <!-- 左侧资源 -->
-                <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
-                  <div class="forthis" style="width:1320px; display: flex;">
-                    <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
-                      <div class="i-list-con"
-                           style="width: 100%;display: flex; align-items: center;justify-content: space-between">
-
-                        <div class="d-l-con-icon" style="width: fit-content;  flex-direction:row;flex-wrap: nowrap;"
-                             ref="thisWidthWH">
-                          <leftRightSwiperScroll v-if="isLoading">
-                            <div class="icon-con" style="width: fit-content !important;"
-                                 v-for="(item,index) in resourcesList1" @click="fireControlViewPoint(item.type)"
-                                 :key="index">
-                              <div class="iconfont icon icon-normal" :class="item.icon"
-                                   :style="'background:' + item.bg"></div>
-                              <div class="icon-text">
-                                <h5 style="white-space: nowrap;">{{ item.resourceName }}</h5>
+                <transition-group
+                  appear
+                  name="animate__animated animate__bounce"
+                  enter-active-class="animate__backInUp"
+                  leave-active-class="animate__backOutDown"
+                >
+                  <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;"  v-show="mapToolCheckItem.includes('资源与操作')"
+                       key="mapToolziyuan">
+                    <div class="forthis" style="width:1320px; display: flex;">
+                      <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
+                        <div class="i-list-con"
+                             style="width: 100%;display: flex; align-items: center;justify-content: space-between">
+
+                          <div class="d-l-con-icon" style="width: fit-content;  flex-direction:row;flex-wrap: nowrap;"
+                               ref="thisWidthWH">
+                            <leftRightSwiperScroll  v-if="mapToolCheckItem.includes('资源与操作')">
+                              <div class="icon-con" style="width: fit-content !important;"
+                                   v-for="(item,index) in resourcesList1" @click="fireControlViewPoint(item.type)"
+                                   :key="index">
+                                <div class="iconfont icon icon-normal" :class="item.icon"
+                                     :style="'background:' + item.bg"></div>
+                                <div class="icon-text">
+                                  <h5 style="white-space: nowrap;">{{ item.resourceName }}</h5>
+                                </div>
                               </div>
-                            </div>
-                          </leftRightSwiperScroll>
-                        </div>
+                            </leftRightSwiperScroll>
+                          </div>
 
-                        <el-input type="number" v-model="radius" class="d-input-bottom" placeholder="请输入搜索半径" />
-                      </div>
-                    </dv-border-box-7>
+                          <el-input type="number" v-model="radius" class="d-input-bottom" placeholder="请输入搜索半径" />
+                        </div>
+                      </dv-border-box-7>
+                    </div>
                   </div>
-                </div>
-                <!-- 左侧资源end -->
-                <!-- 应急预案end -->
-                <div class="fire-m" style="bottom:5rem">
-                  <el-button size="small" icon="el-icon-upload" @click="showEventdetailsdialog()">动态标绘</el-button>
-                  <!--                  <el-button size="small" icon="el-icon-upload" @click="showheatPlotting()">火灾蔓延</el-button>-->
-                </div>
+                  <!-- 左侧资源end -->
+                  <!-- 应急预案end -->
+                  <div class="fire-m" style="bottom:5rem" v-show="mapToolCheckItem.includes('资源与操作')"
+                       key="ziyuan">
+                    <el-button
+                      size="small"
+                      icon="el-icon-s-grid"
+                      @click="showTVWallDiaLog()"
+                    >视频联动</el-button>
+                    <el-button size="small" icon="el-icon-upload" @click="showEventdetailsdialog()">动态标绘</el-button>
+                    <!--                  <el-button size="small" icon="el-icon-upload" @click="showheatPlotting()">火灾蔓延</el-button>-->
+                  </div>
+                </transition-group>
                 <!-- 地图 -->
                 <supermapDialog1 ref="supermapDialog1" style="position: absolute; top:0;left: 0;"
                                  :mapDiv="'forestWarmSuperMap'"
-                                 :mapSite="{zoom:16,doubleClickZoom:true,dragging:true,scrollWheelZoom:true}" :codes="['9fa5']"
-                                 :isSideBySide="false" @preview="preview" />
+                                 :mapSite="{doubleClickZoom:true,dragging:true,scrollWheelZoom:true}" :codes="['9fa5']"
+                                 :isSideBySide="false" @preview="preview" :mapToolShowBH="mapToolShowBH"/>
                 <!-- 地图end -->
               </div>
             </el-col>
@@ -146,8 +211,8 @@
                               <div class="z-info-btm-grp-left">
                                 <el-button size="small" icon="el-icon-upload" @click="showEventLogUpload()">上传
                                 </el-button>
-                                <el-button size="small" icon="el-icon-download" @click="toImage()">截图上传
-                                </el-button>
+                                <!--                                <el-button size="small" icon="el-icon-download" @click="toImage()">截图上传-->
+                                <!--                                </el-button>-->
                                 <el-button size="small" icon="el-icon-download" @click="showResponsibility()"
                                            v-if="eventStatusValue!='forest_event_status_1'&&eventStatusValue!='forest_event_status_7'">责任制
                                 </el-button>
@@ -938,12 +1003,12 @@
           <el-input type="number" v-model="sendHuoZaiBanJing" placeholder="请输入火灾半径" />
         </el-form-item>
         <el-form-item
-          v-if="eventStatusButton=='wb'||eventStatusButton=='qs'||eventStatusButton=='cf'||eventStatusButton=='ld'"
+          v-if="eventStatusButton=='wb'||eventStatusButton=='qs'||eventStatusButton=='cf'"
           :label="deptNameitem">
           <!--          <treeselect v-model="deptId" :options="deptOptions" multiple :show-count="true"-->
           <!--                      placeholder="请选择签收部门"/>-->
           <el-select v-model="sendDeptName" clearable placeholder="请选择部门" class="m-r-1rem" @change="setValue"
-                     v-if="eventStatusButton=='wb'||eventStatusButton=='qs'||eventStatusButton=='cf'||eventStatusButton=='ld'">
+                     v-if="eventStatusButton=='wb'||eventStatusButton=='qs'||eventStatusButton=='cf'">
             <el-option v-for="item in deptOptions" :key="item.deptId" :label="item.deptName"
                        :value="{value:item.deptId,label:item.deptName}">
             </el-option>
@@ -1733,7 +1798,8 @@ import DHWs from '@/dahua/lib/DHWs'
 import {
   joinConferences
 } from "@/api/meeting";
-import findUserByDept from '@/views/findUserByDept' //责任人选择弹框
+import findUserByDept from '@/views/findUserByDept'
+import Cookies from "js-cookie"; //责任人选择弹框
 export default {
   dicts: ['task_source'],
   watch: {
@@ -1753,6 +1819,12 @@ export default {
   },
   data() {
     return {
+      //地图tool开关
+      mapToolShow: false,
+      mapToolCheckAll: false,
+      mapToolCheck: ["应急预案", "资源与操作"],
+      mapToolCheckItem: [],
+      mapToolShowBH:false,
       isLoading: false,
       //海康
       cameraTitle: '',
@@ -2031,6 +2103,91 @@ export default {
     this.fireControlViewList();
   },
   methods: {
+    showTVWallDiaLog() {
+      this.initByCameras();
+      // this.$refs.TVWall.showTVWall();
+    },
+    initByCameras() {
+      // const params = Object.assign({})
+      // params.longitude = this.longitude;
+      // params.latitude = this.latitude;
+      // params.type = '8'
+      // initByCameras(params).then(res => {
+      //   this.$refs.TVWall.showTVWall1(this.longitude, this.latitude, res.data);
+      //   this.$refs.bottomMenu.showMeasure = false
+      //   this.$refs.bottomMenu.showChild = false
+      //   this.$refs.bottomMenu.showBanChild = false
+      //   this.$refs.bottomMenu.showChangChild = false
+      // })
+      let that = this
+      if(that.centermonitorTCamera == null){
+        this.$message.warning("当前事件无绑定摄像头")
+        return
+      }
+      let tvListJson = [{
+        "switchTab": "2",
+        "treeLabels": [{
+          "id": null,
+          "labelCode": "999",
+          "labelName": "电视墙",
+          "cameraType": null,
+          "parentLabelCode": ""
+        },
+          {
+            "id": "spcamera00010",
+            "labelCode": that.centermonitorTCamera.cameraCode,
+            "labelName": that.centermonitorTCamera.cameraName,
+            "cameraType": that.centermonitorTCamera.cameraType,
+            "parentLabelCode": "999"
+          }
+        ],
+        "labelChannels": [{
+          "labelCode": that.centermonitorTCamera.cameraCode,
+          "channelDates": [{
+            "channelCode": that.centermonitorTCamera.cameraCode,
+            "channelName": that.centermonitorTCamera.cameraName,
+            "channelSn": null,
+            "cameraType": that.centermonitorTCamera.cameraType,
+            "online": "1",
+            "cameraCode": null
+          }]
+        }]
+      }]
+      this.$refs.TVWall.showTVWall1(this.longitude, this.latitude, tvListJson);
+      this.$refs.bottomMenu.showMeasure = false
+      this.$refs.bottomMenu.showChild = false
+      this.$refs.bottomMenu.showBanChild = false
+      this.$refs.bottomMenu.showChangChild = false
+    },
+    closedEventDiaTool() {
+      document.addEventListener("click", (e) => {
+        let b = document.getElementById("eventMapToolOnly");
+        let c = document.getElementById("eventMapToolOnlyButton");
+        if (this.mapToolShow && !b.contains(e.target) && !c.contains(e.target)) {
+          this.mapToolShow = false;
+        }
+      });
+
+    },
+    // 地图tool显隐
+    mapToolCheckAllChange(val) {
+      this.mapToolCheckItem = [];
+      this.mapToolCheckItem = val ? this.mapToolCheck : [];
+      // this.isIndeterminate = false;
+      this.mapToolCheckChangeBH()
+    },
+    mapToolCheckChangeBH(){
+      if (this.mapToolCheckItem.includes("地图标绘")) {
+        this.mapToolShowBH= true
+      } else {
+        this.mapToolShowBH= false
+      }
+    },
+    mapToolCheckChange(value) {
+      let checkedCount = value.length;
+      this.mapToolCheckAll = checkedCount === this.mapToolCheck.length;
+      this.mapToolCheckChangeBH()
+    },
     /************************************责任制-开始****************************************/
     addLine: function() { //添加负责人行数
       var newValue = {
@@ -2060,19 +2217,19 @@ export default {
     fireControlViewList() {
       this.resourcesList1 = [];
       let _this = this;
-      // {
-      //   resourceName: '取水口',
-      //     type: 'qsk',
-      //   count: '1',
-      //   icon: 'sj-icon-waterintake'
-      // },
-      fireControlViewList().then(function(res) {
+      fireControlViewList("xiaofang").then(function (res) {
         // _this.resourcesList = res.data
         //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
-        res.data.forEach(function(data, index) {
+        res.data.forEach(function (data, index) {
           let obj = {};
-          let icon = 'sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-").replaceAll("@", "-");
-          obj.resourceName = data.name.replaceAll("(个)", "");
+          let icon =
+            "sj" +
+            "-" +
+            "icon" +
+            "-" +
+            data.type.replaceAll("_", "-").replaceAll("@", "-");
+          let resourceName = data.name.replaceAll("(个)", "");
+          obj.resourceName = resourceName;
           obj.type = data.type;
           obj.count = data.num;
           obj.icon = icon;
@@ -2080,16 +2237,15 @@ export default {
           console.log("icon_" + (index + 1) + "=", icon);
           //每个图标对应固定颜色
           _this.$set(_this.resourcesList1[index], "bg", getIconBg(icon));
-
-        })
+        });
         _this.resourcesList1.push({
-          resourceName: '摄像头',
-          type: 'sxt',
-          count: '1',
-          icon: 'sj-icon-jkzx',
-          bg: '#f5ad1b'
-        })
-      })
+          resourceName: "摄像头",
+          type: "sxt",
+          count: "1",
+          icon: "sj-icon-jkzx",
+          bg: "#f5ad1b",
+        });
+      });
     },
     fireControlViewPoint(type) {
       // alert(type)
@@ -2115,48 +2271,85 @@ export default {
                 let markersMap = {
                   lng: 124.59,
                   lat: 43.02,
-                  icon: 'marker',
-                  bindPopupHtml: '',
-                  click: '',
-                  parameter: '',
+                  icon: "marker",
+                  bindPopupHtml: "",
+                  click: "",
+                  parameter: "",
                   keepBindPopup: false,
-                  isAggregation: true
-                }
-                markersMap.icon = 'sj-icon-map-' + type.replaceAll("_", "-");
+                  isAggregation: true,
+                };
+                markersMap.icon = "sj-icon-map-" + type.replaceAll("_", "-");
                 markersMap.lng = res.data.pointList[i].longitude;
                 markersMap.lat = res.data.pointList[i].latitude;
-                markersMap.bindPopupHtml = '<div class="map-tip">' +
-                  '<span>' +
+                markersMap.bindPopupHtml =
+                  '<div class="map-tip">' +
+                  "<span>" +
+                  '                  <div class="d-l-con">' +
+                  '                  <div class="d-l-l-text">' +
+                  "                  <h4>资源名称：" +
+                  res.data.pointList[i].name +
+                  "</h4>" +
+                  "                </div>" +
+                  "                </div>" +
+                  "                </span>" +
+                  "<span>" +
+                  '                  <div class="d-l-con">' +
+                  '                  <div class="d-l-l-text">' +
+                  "                  <h4>经纬度：" +
+                  res.data.pointList[i].longitude +
+                  "," +
+                  res.data.pointList[i].latitude +
+                  "</h4>" +
+                  "                </div>" +
+                  "                </div>" +
+                  "                </span>" +
+                  "<span>" +
+                  '                  <div class="d-l-con">' +
+                  '                  <div class="d-l-l-text">' +
+                  "                  <h4>名称：" +
+                  (res.data.pointList[i].name?res.data.pointList[i].name:'无') +
+                  "</h4>" +
+                  "                </div>" +
+                  "                </div>" +
+                  "                </span>" +
+                  "<span>" +
                   '                  <div class="d-l-con">' +
                   '                  <div class="d-l-l-text">' +
-                  '                  <h4>资源名称：' + res.data.pointList[i].name + '</h4>' +
-                  '                </div>' +
-                  '                </div>' +
-                  '                </span>' +
-                  '<span>' +
+                  "                  <h4>地址：" +
+                  (res.data.pointList[i].address?res.data.pointList[i].address:'无') +
+                  "</h4>" +
+                  "                </div>" +
+                  "                </div>" +
+                  "                </span>" +
+                  "<span>" +
                   '                  <div class="d-l-con">' +
                   '                  <div class="d-l-l-text">' +
-                  '                  <h4>经纬度：' + res.data.pointList[i].longitude + ',' + res.data.pointList[i]
-                    .latitude + '</h4>' +
-                  '                </div>' +
-                  '                </div>' +
-                  '                </span>' +
-                  '<span>' +
+                  "                  <h4>联系人：" +
+                  (res.data.pointList[i].contacts?res.data.pointList[i].contacts:'无') +
+                  "</h4>" +
+                  "                </div>" +
+                  "                </div>" +
+                  "                </span>" +
+                  "<span>" +
                   '                  <div class="d-l-con">' +
                   '                  <div class="d-l-l-text">' +
-                  '                  <h4>联系人：' + res.data.pointList[i].contacts + '</h4>' +
-                  '                </div>' +
-                  '                </div>' +
-                  '                </span>' +
-                  '<span>' +
+                  "                  <h4>电话：" +
+                  (res.data.pointList[i].phone?res.data.pointList[i].phone:'无') +
+                  "</h4>" +
+                  "                </div>" +
+                  "                </div>" +
+                  "                </span>" +
+                  "<span>" +
                   '                  <div class="d-l-con">' +
                   '                  <div class="d-l-l-text">' +
-                  '                  <h4>电话：' + res.data.pointList[i].phone + '</h4>' +
-                  '                </div>' +
-                  '                </div>' +
-                  '                </span>' +
-                  '</div>'
-                markersList.push(markersMap)
+                  "                  <h4>距离事件距离：" +
+                  (res.data.pointList[i].distance?res.data.pointList[i].distance+'米':'无') +
+                  "</h4>" +
+                  "                </div>" +
+                  "                </div>" +
+                  "                </span>" +
+                  "</div>";
+                markersList.push(markersMap);
               }
               setTimeout(() => {
                 this.$refs.supermapDialog1.setMarkersByType(markersList, type)
@@ -2307,7 +2500,8 @@ export default {
     /************************************责任制-结束****************************************/
     showEventdetailsdialog() {
       this.eventDialog = false;
-      this.$emit('showEventDialog', this.eventCode);
+      this.cancelEventShow()
+      this.$emit('getFirespread', this.eventCode);
     },
     showheatPlotting() {
       this.$refs.supermapDialog1.showheatPlotting(this.latitude, this.longitude, this.windSpeed, this.windDirection)
@@ -2387,13 +2581,61 @@ export default {
               } else if (type == 'sxt') {
                 if(res.data[i].cameraUse==1)
                 {
-                  markersMap.icon='sj-icon-map-centerdata-slmonitor'
-                } else {
+                  if(res.data[i].workingStatus==0)
+                  {
+                    markersMap.icon='sj-icon-map-centerdata-slmonitor'
+                    markersMap.click='preview'
+                  }else if (res.data[i].workingStatus==1)
+                  {
+                    markersMap.icon='sj-icon-map-not-centerdata-slmonitor'
+                    markersMap.click=''
+                  }
+
+                } else  if (res.data[i].cameraUse == 2){
+                  if(res.data[i].workingStatus==0)
+                  {
+                    markersMap.icon = "camera";
+                    markersMap.click='preview'
+                  }else if (res.data[i].workingStatus==1)
+                  {
+                    markersMap.icon = "camera-not";
+                    markersMap.click=''
+                  }
+                }  else if (res.data[i].cameraUse == 3) {
+                  if(res.data[i].workingStatus==0)
+                  {
+                    markersMap.icon = 'sj-icon-map-centerdata-slmonitor-traffic'
+                    markersMap.click='preview'
+                  }else if (res.data[i].workingStatus==1)
+                  {
+                    markersMap.icon = 'sj-icon-map-not-centerdata-slmonitor-traffic'
+                    markersMap.click=''
+                  }
+
+                }
+                else if (res.data[i].cameraUse == 4) {
+                  if(res.data[i].workingStatus==0)
+                  {
+                    markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera'
+                    markersMap.click='preview'
+                  }else if (res.data[i].workingStatus==1)
+                  {
+                    markersMap.icon = 'sj-icon-map-not-centerdata-sand-quarry-camera'
+                    markersMap.click=''
+                  }
 
-                  markersMap.icon='camera'
+                }
+                else if (res.data[i].cameraUse == 5) {
+                  if (res.data[i].workingStatus == 0) {
+                    markersMap.icon = 'sj-icon-map-centerdata-t-hydraulic-reservoir-camera'
+                    markersMap.click = 'preview'
+                  } else if (res.data[i].workingStatus == 1) {
+                    markersMap.icon = 'sj-icon-map-not-centerdata-t-hydraulic-reservoir-camera'
+                    markersMap.click = ''
+                  }
                 }
                 if (res.data[i].cameraCode != null) {
-                  markersMap.click = 'preview'
+                  // markersMap.click = 'preview'
                   // markersMap.parameter = res.data[i].cameraCode
                   markersMap.parameter = {code:res.data[i].cameraCode,
                     type:res.data[i].cameraFactory?res.data[i].cameraFactory:1,name:res.data[i].cameraName}
@@ -2606,6 +2848,19 @@ export default {
         this.attachExamine.push(attachPath)
       });
     },
+
+//设置联动部门不可选择本部门
+    recursiveChildren(arrayList,deptId) {
+      arrayList.forEach((item, index) => {
+        if(item.id==deptId){
+          item.disabled="true";
+          return
+        }
+        if(item.children){
+          this.recursiveChildren(item.children,deptId)
+        }
+      });
+    },
     /**
      * eventStatusValue 事件状态
      * isSend 是否办理
@@ -2672,6 +2927,8 @@ export default {
           that.eventConfirmTitle = '事件联动'
           /** 查询部门树结构 */
           await deptTreeselect().then(response => {
+            let deptId=Cookies.get("deptId")
+            that.recursiveChildren(response.data,deptId)
             that.deptOptionsLiandong = response.data
           })
           that.showEventConfirm = true
@@ -2709,11 +2966,11 @@ export default {
             that.$message.error(`请选择任务联动部门!`)
             return
           }
-          if (that.sendDeptId == '' || that.sendDeptId == null || that.sendDeptName == '' || that.sendDeptName ==
-            null) {
-            that.$message.error(`请选择任务发起部门!`)
-            return
-          }
+          // if (that.sendDeptId == '' || that.sendDeptId == null || that.sendDeptName == '' || that.sendDeptName ==
+          //   null) {
+          //   that.$message.error(`请选择任务发起部门!`)
+          //   return
+          // }
           let eventState = "";
           listSJfl({
             parentId: that.eventType
@@ -2725,8 +2982,8 @@ export default {
                 }
               }
               let param = {
-                sendDeptId: that.sendDeptId,
-                sendDept: that.sendDeptName,
+                sendDeptId: Cookies.get("deptId"),
+                sendDept: Cookies.get("deptName"),
                 eventCode: that.eventCode,
                 longitude: that.longitude,
                 latitude: that.latitude,
@@ -2738,6 +2995,7 @@ export default {
                 eventState: eventState,
                 eventName: that.eventName
               }
+              debugger
               sendTask(param).then(res => {
                 if (res.code == 200) {
                   that.$message.success(`联动发起成功!`)
@@ -2958,6 +3216,7 @@ export default {
 
     sendEventLog() {
       if (this.eventLog == '' || this.eventLog == null) {
+
         return;
       }
       //日志发送
@@ -2979,13 +3238,21 @@ export default {
       this.$refs.eventLogUpload.eventLogUpload(this.eventCode)
     },
     cancelEventShow() {
-      this.dataStatus = null
+      this.mapToolShow=false
+      this.mapToolCheckItem = [];
+      this.mapToolCheckAll=false
+      this.mapToolShowBH=false,
+        this.dataStatus = null
       this.deptId = null
       console.log('关闭事件弹窗')
       this.eventLogList = []
     },
     showEventDialog(eventCode) {
-      this.getNewDataByDate(this.calendarDay)
+      this.mapToolShow=false
+      this.mapToolCheckItem = [];
+      this.mapToolCheckAll=false
+      this.mapToolShowBH=false,
+        this.getNewDataByDate(this.calendarDay)
       this.eventCode = eventCode
       let that = this
       //获取事件详情
@@ -3081,11 +3348,14 @@ export default {
           markersMapList.push(markersMap)
         }
         setTimeout(() => {
-          that.$refs.supermapDialog1.dropLocation10(res.data.catalogue.latitude, res.data.catalogue.longitude)
-          that.$refs.supermapDialog1.clearM(false)
-          that.$refs.supermapDialog1.clearM(true)
-          that.$refs.supermapDialog1.setMarkersRadius(markersMapList)
-        }, 2000)
+          that.$refs.supermapDialog1.dropLocation10(
+            res.data.catalogue.latitude,
+            res.data.catalogue.longitude
+          );
+          that.$refs.supermapDialog1.clearM(false);
+          that.$refs.supermapDialog1.clearM(true);
+          that.$refs.supermapDialog1.setMarkersRadius(markersMapList);
+        }, 2000);
       })
     },
     refreshEvent(eventCode) {
@@ -3178,11 +3448,14 @@ export default {
           markersMapList.push(markersMap)
         }
         setTimeout(() => {
-          that.$refs.supermapDialog1.clearM(false)
-          that.$refs.supermapDialog1.clearM(true)
-          that.$refs.supermapDialog1.setMarkersRadius(markersMapList)
-          that.$refs.supermapDialog1.dropLocation10(res.data.catalogue.latitude, res.data.catalogue.longitude)
-        }, 2000)
+          that.$refs.supermapDialog1.dropLocation10(
+            res.data.catalogue.latitude,
+            res.data.catalogue.longitude
+          );
+          that.$refs.supermapDialog1.clearM(false);
+          that.$refs.supermapDialog1.clearM(true);
+          that.$refs.supermapDialog1.setMarkersRadius(markersMapList);
+        }, 2000);
       })
     },
     refreshEventDialog(eventCode) {
@@ -3203,10 +3476,10 @@ export default {
       // imageTofile是给截图范围内的父级元素自定义的ref名称
       // let canvasBox = this.$refs.imageTofile
       let canvasBox = document.getElementById('forestWarmSuperMap')
-      let toolbar = document.getElementById('toolbar')
-      if (toolbar != null) {
-        canvasBox.removeChild(toolbar)
-      }
+      // let toolbar = document.getElementById('toolbar')
+      // if (toolbar != null) {
+      //   canvasBox.removeChild(toolbar)
+      // }
       // 获取父级的宽高
       const width = parseInt(window.getComputedStyle(canvasBox).width)
       const height = parseInt(window.getComputedStyle(canvasBox).height)
@@ -3228,7 +3501,7 @@ export default {
         let dataBase64 = canvas.toDataURL('image/png')
         this.uploadBase64(dataBase64)
       })
-      canvasBox.appendChild(toolbar)
+      // canvasBox.appendChild(toolbar)
     },
     uploadBase64(dataBase64) {
       //事件详情截图直接上传日志
@@ -3541,9 +3814,47 @@ function cbIntegrationCallBack(oData) {
 }
 </script>
 
+<style lang="scss">
+.sj-map-tool-checkbox-all {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem !important;
 
+  .el-checkbox__input {
+    line-height: 0;
+  }
+
+  .el-checkbox__label {
+    font-size: 14px;
+    color: white;
+    padding-left: 5px;
+  }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #01d1eb;
+  }
+}
+.sj-map-tool-checkbox {
+  display: flex;
+  .el-checkbox {
+    margin-right: 1rem;
+    display: flex;
+    align-items: center;
+    .el-checkbox__input {
+      line-height: 0;
+    }
+  }
+  .el-checkbox__label {
+    font-size: 14px;
+    color: white;
+    padding-left: 5px;
+  }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #01d1eb;
+  }
+}
+</style>
 <style lang="scss" scoped>
-@import '@/assets/styles/base.scss';
+@import "@/assets/styles/base.scss";
 
 //弹层样式
 //.customWidthMp4 {
@@ -3553,11 +3864,10 @@ function cbIntegrationCallBack(oData) {
 
 .tree-border {
   border: 1px $barBorder;
-
 }
 
 button {
-  padding: .5rem;
+  padding: 0.5rem;
 }
 
 /** 火灾报告**/
@@ -3601,14 +3911,12 @@ table input {
   font-family: "微软雅黑";
   background: none;
   color: $inBlue;
-
 }
 
 table th input:hover {
   background: $eventBG;
 }
 
-
 table thead th {
   font-size: 1rem;
   font-family: "宋体";
@@ -3625,7 +3933,6 @@ table tr td {
   height: 2rem;
   border: 1px $searchBorder;
   text-align: center;
-
 }
 
 .font1 {
@@ -3650,22 +3957,21 @@ table tr td input {
   color: $inBlue;
   background: none;
   float: left;
-  padding: 0 .5rem;
+  padding: 0 0.5rem;
 }
 
 table tr td input:hover {
   background: $eventBG;
 }
 
-
 .int_tr td input {
   text-align: center !important;
 }
 
 .table2 tr th {
   font-size: 1.7rem;
-  padding: .5rem 0;
-  font-family: 'fontnameRegular';
+  padding: 0.5rem 0;
+  font-family: "fontnameRegular";
 }
 
 .table2 tr td {
@@ -3700,12 +4006,11 @@ table tr td input:hover {
   border: 0px !important;
   outline: 0px;
   width: 98%;
-  padding: .5rem;
+  padding: 0.5rem;
   font-size: 1rem;
   resize: none;
   background: none;
   color: $inBlue;
-
 }
 
 .table2 tr td textarea:hover {
@@ -3725,23 +4030,47 @@ table tr td input:hover {
   display: flex;
 
   button {
-    padding: .5rem 2rem;
+    padding: 0.5rem 2rem;
   }
 }
 
+.sj-map-tool-select {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  z-index: 1000;
+  display: flex;
+  height: 30px;
+  align-items: center;
+}
+.sj-map-tool-select-list {
+  position: relative;
+  padding: 0.3rem 1rem;
+  border-radius: 1rem;
+  background-color: #fff;
+  z-index: 1000;
+  background-image: linear-gradient(
+      180deg,
+      rgba(18, 71, 153, 1),
+      rgba(4, 21, 30, 1)
+  );
+  box-shadow: 0 -0.2rem 0.5rem 0.3rem rgba(13, 192, 219, 0.09) inset;
+  display: flex;
+  align-items: center;
+}
 
 // 20220928
 .yatz_button {
   padding: 0.5rem 0.5rem;
-  color: #409EFF;
+  color: #409eff;
   background: none;
-  border-color: #409EFF;
+  border-color: #409eff;
 }
 
 .yatz_button:hover {
   color: #fff;
-  background: #409EFF;
-  border-color: #409EFF;
+  background: #409eff;
+  border-color: #409eff;
 }
 
 .fr_button {
@@ -3838,4 +4167,6 @@ table tr td input:hover {
     }
   }
 }
+
+
 </style>

src/views/monitor.vue

@@ -91,7 +91,7 @@
                   prefix-icon="el-icon-search"
                 />
               </div>
-              <div class="i-list-con" style="height: 62vh">
+              <div class="i-list-con" style="height: 38vh;overflow:scroll" >
                 <el-tree
                   :data="deptOptions"
                   :props="defaultProps"
@@ -103,7 +103,25 @@
                   @node-click="handleNodeClick"
                 />
               </div>
+              <div class="overflow-y" style="height: 34vh" v-show="onShe">
+                <div class="d-l-con-icon">
+                  <div
+                    class="icon-con w-33 m-btm-no"
+                    v-for="(item, index) in CameraCoverageList"
+                    :class="{ on: onCoverage==index }"
+                    @click="selectDeviceType(item.cameraRadius,index)"
+                  >
+                    <!--@click="laClick"-->
+                    <!--&gt;-->
+                    <div class="icon-text">
+                      <h6>{{ item.cameraCount }}</h6>
+                      <h5>{{ item.radius }}</h5>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
+
           </dv-border-box-13>
         </div>
       </div>
@@ -221,8 +239,8 @@ import {
   getDlblistBydeptId,
   selectKeyAreaList,
   getRegionalFlag,
-  getCamerasByDeptId,
-} from "@/api/monitor";
+  getCamerasByDeptId, selectCameraByCoverage
+} from '@/api/monitor'
 import { treeselect } from "@/api/system/dept";
 import supermap from "@/components/supermap-2.5d"; //超图
 import vheader from "@/components/v-header.vue"; //一体化共用头部
@@ -266,7 +284,7 @@ export default {
   mounted() {
     // 初始化地图数据
     this.getSuperMapUrl();
-
+    this.selectCameraByCoverage()
     setTimeout(() => {
       this.selectKeyAreaList();
       this.bottomMenuList(); //获取底部公共组件消息和任务
@@ -274,7 +292,7 @@ export default {
       this.deptId = parseInt(Cookies.get("deptId"));
       this.getMonitorDeviceAndDataLists(this.deptId);
        this.getDlblistBydeptIds();
-      this.selectDeviceType(-1);
+      this.selectDeviceType('',-2);
     }, 2000)
   },
   beforeDestroy() {
@@ -338,14 +356,16 @@ export default {
       placeholderMsg: "请输入摄像头名称",
       domId: "dom1",
       localMark: "she",
-      onShe: false,
+      onShe: true,
       onChuan: false,
       onLa: false,
+      onCoverage: '-1',
       colors: "green",
       sensorNum: 0,
       loudspeakerNum: 0,
       cgqTimer: null,
       values: Math.random(),
+      CameraCoverageList:[]
     };
   },
   watch: {
@@ -365,6 +385,12 @@ export default {
     },
   },
   methods: {
+    selectCameraByCoverage()
+    {
+      selectCameraByCoverage(365).then(res=>{
+        this.CameraCoverageList=res.data
+      })
+    },
     //初始化地图数据
     getSuperMapUrl(){
       getUserProfile().then(response => {
@@ -513,7 +539,7 @@ export default {
       this.deptId=Cookies.get("deptId")
       this.placeholderMsg = "请输入摄像头名称";
       clearInterval(this.cgqTimer);
-      this.selectDeviceType();
+      this.selectDeviceType('',-2);
       this.jkListIcon = 'sj-icon-jkzx'
     },
     laClick() {
@@ -914,28 +940,28 @@ export default {
                 "<span>" +
                 '                  <div class="d-l-con">' +
                 '                  <div class="d-l-l-text">' +
-                "                  <h4>下限警报使能：" +
-                (item.data.thresholdLowEnable ? item.data.thresholdLowEnable + "MPa" : "0MPa") +
+                "                  <h4>电池电量：" +
+                (item.data.batteryValue ? item.data.batteryValue + "%" : "0%") +
                 "</h4>" +
                 "                </div>" +
                 "                </div>" +
                 "                </span>" +
+                // "<span>" +
+                // '                  <div class="d-l-con">' +
+                // '                  <div class="d-l-l-text">' +
+                // "                  <h4>上限警报使能：" +
+                // (item.data.thresholdHighEnable ?
+                //   item.data.thresholdHighEnable + "MPa" :
+                //   "0MPa") +
+                // "</h4>" +
+                // "                </div>" +
+                // "                </div>" +
+                // "                </span>" +
                 "<span>" +
                 '                  <div class="d-l-con">' +
                 '                  <div class="d-l-l-text">' +
-                "                  <h4>上限警报使能：" +
-                (item.data.thresholdHighEnable ?
-                  item.data.thresholdHighEnable + "MPa" :
-                  "0MPa") +
-                "</h4>" +
-                "                </div>" +
-                "                </div>" +
-                "                </span>" +
-                "<span>" +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                "                  <h4 style='color:"+(2.0>=item.data.hydraulicValue>=0.5?'green':'red')+"'"+">水压力值：" +
-                (item.data.hydraulicValue ? item.data.hydraulicValue + "MPa" : "0MPa") +'   | 0.5MPa - 2.0MPa' +
+                "                  <h4 style='color:"+(item.data.hydraulicThresholdMax>=item.data.hydraulicValue>=item.data.hydraulicThresholdMin?'green':'red')+"'"+">水压力值：" +
+                (item.data.hydraulicValue ? item.data.hydraulicValue + "MPa" : "0MPa") +'   | ' +(item.data.hydraulicThresholdMin ? item.data.hydraulicThresholdMin + "MPa" : "0MPa")+"-"+ (item.data.hydraulicThresholdMax ? item.data.hydraulicThresholdMax + "MPa" : "0MPa")+
                 "</h4>" +
                 "                </div>" +
                 "                </div>" +
@@ -1084,10 +1110,11 @@ export default {
       getRegionalFlag(id).then((res) => {
         that.graphicsList = [];
         //地图标记
-        if (res.data != null && res.data.length > 0) {
-          for (let i = 0; i < res.data.length; i++) {
-            that.graphicsList.push(res.data[i].lng);
-            that.graphicsList.push(res.data[i].lat);
+        let latLngs = JSON.parse(res.data.data.latLngs!=null?res.data.data.latLngs:'[]')
+        if (latLngs.length > 0) {
+          for (let i = 0; i < latLngs.length; i++) {
+            that.graphicsList.push(latLngs[i].lng);
+            that.graphicsList.push(latLngs[i].lat);
           }
           setTimeout(() => {
             that.$refs.supermap.clearG();
@@ -1163,10 +1190,13 @@ export default {
       this.$refs.supermap.layerSwitchingList(urlList);
     },
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    selectDeviceType() {
+    selectDeviceType(cameraRadius,index) {
       //获取左侧动态感知设备
       let that = this;
-      selectDeviceType(this.deptId).then((res) => {
+      that.onCoverage=index
+      this.$refs.supermap.clearM()
+      this.$refs.supermap.clearMRadius()
+      selectDeviceType({deptId:this.deptId,cameraRadius:cameraRadius,type:8}).then((res) => {
         that.cameraMarkersList = [];
         that.visuForestCloudMapDeviceBOList =
           res.data.visuForestCloudMapDeviceBOList;
@@ -1226,12 +1256,60 @@ export default {
             markersMap.lat = res.data.visuForestCloudCameraBOList[i].latitude;
             markersMap.radius =
               res.data.visuForestCloudCameraBOList[i].cameraRadius;
-            if (res.data.visuForestCloudCameraBOList[i].cameraUse == 1) {
-              markersMap.icon = "sj-icon-map-centerdata-slmonitor";
-            } else if (res.data.visuForestCloudCameraBOList[i].cameraUse == 2) {
-              markersMap.icon = "camera";
-            }else if (res.data.visuForestCloudCameraBOList[i].cameraUse == 3) {
-              markersMap.icon = "sj-icon-map-centerdata-slmonitor-traffic";
+            if(res.data.visuForestCloudCameraBOList[i].cameraUse==1)
+            {
+              if(res.data.visuForestCloudCameraBOList[i].workingStatus==0)
+              {
+                markersMap.icon='sj-icon-map-centerdata-slmonitor'
+                markersMap.click='preview'
+              }else if (res.data.visuForestCloudCameraBOList[i].workingStatus==1)
+              {
+                markersMap.icon='sj-icon-map-not-centerdata-slmonitor'
+                markersMap.click=''
+              }
+
+            } else  if (res.data.visuForestCloudCameraBOList[i].cameraUse == 2){
+              if(res.data.visuForestCloudCameraBOList[i].workingStatus==0)
+              {
+                markersMap.icon = "camera";
+                markersMap.click='preview'
+              }else if (res.data.visuForestCloudCameraBOList[i].workingStatus==1)
+              {
+                markersMap.icon = "camera-not";
+                markersMap.click=''
+              }
+            }  else if (res.data.visuForestCloudCameraBOList[i].cameraUse == 3) {
+              if(res.data.visuForestCloudCameraBOList[i].workingStatus==0)
+              {
+                markersMap.icon = 'sj-icon-map-centerdata-slmonitor-traffic'
+                markersMap.click='preview'
+              }else if (res.data.visuForestCloudCameraBOList[i].workingStatus==1)
+              {
+                markersMap.icon = 'sj-icon-map-not-centerdata-slmonitor-traffic'
+                markersMap.click=''
+              }
+
+            }
+            else if (res.data.visuForestCloudCameraBOList[i].cameraUse == 4) {
+              if(res.data.visuForestCloudCameraBOList[i].workingStatus==0)
+              {
+                markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera'
+                markersMap.click='preview'
+              }else if (res.data.visuForestCloudCameraBOList[i].workingStatus==1)
+              {
+                markersMap.icon = 'sj-icon-map-not-centerdata-sand-quarry-camera'
+                markersMap.click=''
+              }
+
+            }
+            else if (res.data.visuForestCloudCameraBOList[i].cameraUse == 5) {
+              if (res.data.visuForestCloudCameraBOList[i].workingStatus == 0) {
+                markersMap.icon = 'sj-icon-map-centerdata-t-hydraulic-reservoir-camera'
+                markersMap.click = 'preview'
+              } else if (res.data.visuForestCloudCameraBOList[i].workingStatus == 1) {
+                markersMap.icon = 'sj-icon-map-not-centerdata-t-hydraulic-reservoir-camera'
+                markersMap.click = ''
+              }
             }
             markersMap.bindPopupHtml =
               '<div class="map-tip">' +
@@ -1344,12 +1422,60 @@ export default {
             } else {
               markersMap.parameter = [];
             }
-            if (res.data[i].cameraUse == 1) {
-              markersMap.icon = "sj-icon-map-centerdata-slmonitor";
-            } else if (res.data[i].cameraUse == 2) {
-              markersMap.icon = "camera";
-            }else if (res.data[i].cameraUse == 3) {
-              markersMap.icon = "sj-icon-map-centerdata-slmonitor-traffic";
+            if(res.data[i].cameraUse==1)
+            {
+              if(res.data[i].workingStatus==0)
+              {
+                markersMap.icon='sj-icon-map-centerdata-slmonitor'
+                markersMap.click='preview'
+              }else if (res.data[i].workingStatus==1)
+              {
+                markersMap.icon='sj-icon-map-not-centerdata-slmonitor'
+                markersMap.click=''
+              }
+
+            } else  if (res.data[i].cameraUse == 2){
+              if(res.data[i].workingStatus==0)
+              {
+                markersMap.icon = "camera";
+                markersMap.click='preview'
+              }else if (res.data[i].workingStatus==1)
+              {
+                markersMap.icon = "camera-not";
+                markersMap.click=''
+              }
+            }  else if (res.data[i].cameraUse == 3) {
+              if(res.data[i].workingStatus==0)
+              {
+                markersMap.icon = 'sj-icon-map-centerdata-slmonitor-traffic'
+                markersMap.click='preview'
+              }else if (res.data[i].workingStatus==1)
+              {
+                markersMap.icon = 'sj-icon-map-not-centerdata-slmonitor-traffic'
+                markersMap.click=''
+              }
+
+            }
+            else if (res.data[i].cameraUse == 4) {
+              if(res.data[i].workingStatus==0)
+              {
+                markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera'
+                markersMap.click='preview'
+              }else if (res.data[i].workingStatus==1)
+              {
+                markersMap.icon = 'sj-icon-map-not-centerdata-sand-quarry-camera'
+                markersMap.click=''
+              }
+
+            }
+            else if (res.data[i].cameraUse == 5) {
+              if (res.data[i].workingStatus == 0) {
+                markersMap.icon = 'sj-icon-map-centerdata-t-hydraulic-reservoir-camera'
+                markersMap.click = 'preview'
+              } else if (res.data[i].workingStatus == 1) {
+                markersMap.icon = 'sj-icon-map-not-centerdata-t-hydraulic-reservoir-camera'
+                markersMap.click = ''
+              }
             }
             markersMap.lng = res.data[i].longitude;
             markersMap.lat = res.data[i].latitude;

src/views/system/login.vue

@@ -22,11 +22,11 @@
       popper-class="sj-pop"
     >
       <div class="img-container">
-        <a class="img-list" onclick="window.open('https://pan.baidu.com/s/1MlWyhFw6pEYiaLvzsje-BA?pwd=3jps')">
+        <a class="img-list" :href="video_plugin_url" target="_blank">
           <img src="../../assets/images/login-b-1.png" alt="" />
           <span>视频插件</span>
         </a>
-        <a class="img-list" onclick="window.open('https://pan.baidu.com/s/1MlWyhFw6pEYiaLvzsje-BA?pwd=3jps')">
+        <a class="img-list" :href="meeting_plugin_url" target="_blank">
           <img src="../../assets/images/login-b-2.png" alt="" />
           <span>会议插件</span>
         </a>
@@ -37,7 +37,7 @@
             <span>手机APP</span>
           </div>
         </el-popover>
-        <a class="img-list" onclick="window.open('https://pan.baidu.com/s/1MlWyhFw6pEYiaLvzsje-BA?pwd=3jps')">
+        <a class="img-list" :href="help_url" target="_blank">
           <img src="../../assets/images/login-b-4.png" alt="" />
           <span>使用帮助</span>
         </a>
@@ -122,6 +122,9 @@
 <script>
   import StarBackground from "@/components/star";
   import {
+    getConfigKey
+  } from "@/api/system/config";
+  import {
     getCodeImg,
     fontConfig,
     getSecretKey
@@ -158,6 +161,9 @@
         verified: true,
         popoverVisible:false,
         QRCode: "",
+        video_plugin_url: "",
+        meeting_plugin_url: "",
+        help_url: "",
         backgroudImg: "", //背景图片
         systemTitle: {
           title: "", //标题
@@ -212,6 +218,7 @@
     },
     mounted(){
       this.getVersionInfo();
+      this.getConfigKey();
     },
     methods: {
       getVersionInfo() {
@@ -219,6 +226,17 @@
           this.QRCode = res.data.picUrl
         })
       },
+      getConfigKey(){
+        getConfigKey('video_plugin_url').then(response => {
+          this.video_plugin_url = response.msg
+        })
+        getConfigKey('meeting_plugin_url').then(response => {
+          this.meeting_plugin_url = response.msg
+        })
+        getConfigKey('help_url').then(response => {
+          this.help_url = response.msg
+        })
+      },
       fontConfig() {
         fontConfig().then((res) => {
           this.systemTitle.title = res.data.fontTitle;

vue.config.js

@@ -54,7 +54,7 @@ module.exports = {
       [process.env.VUE_APP_BASE_API]: {
         //target: `http://127.0.0.1:3031`,
         // target: `http://192.168.2.118:3031`,
-          target: `http://10.6.52.11:3031`,
+          target: `http://192.168.31.235:3031`,
         //  target: `https://29613561xe.eicp.vip`,
         changeOrigin: true,
         pathRewrite: {