视频资源表格和地图选中联动

front/src/supermap/advance-init.js

@@ -1657,14 +1657,16 @@ export function MapFun(mapObj) {
     features,
     url,
     layerName,
-    createPopupFun
+    createPopupFun,
+    url2
   ) {
     console.log(
       '_addResourceOnMapWithoutSuperMapCluster===============>',
       features,
       url,
       layerName,
-      createPopupFun
+      createPopupFun,
+      url2
     )
     // 如果资源要素数量为0，则说明该种资源没有记录
     // if (features.length < 1) {
@@ -1685,14 +1687,19 @@ export function MapFun(mapObj) {
     let layers = null
     // 判断是否是聚合图层
     layers = createMarkerClusterLayer()
-    const icon = createDefaultFeatureStyle({
+    const icon1 = createDefaultFeatureStyle({
       img: url,
-      iconSize: [36, 36],
+      iconSize: [33, 33],
+    })
+    const icon2 = createDefaultFeatureStyle({
+      img: url2,
+      iconSize: [33, 33],
     })
     features.map((feature) => {
       var bounds = map.getBounds()
       // console.log("看看有没有坐标",feature.latLng);
       if ( feature.hasOwnProperty('latLng')) {
+        let icon = feature.active?icon2:icon1
         const marker = L.marker(feature.latLng, { icon })
         if (createPopupFun !== null) {
           marker.uuid = feature.uuid || ''
@@ -1728,6 +1735,8 @@ export function MapFun(mapObj) {
         }
         marker.on('click', e=>{
           console.log('点位数据', e)
+          
+          mybus.emit('pointMarkerClick', feature)
         })
         layers.addLayer(marker)
       }

front/src/views/home/infrastructurePage.vue

@@ -936,8 +936,26 @@
       mapSearchParam.value.gpsX = param.gpsX
       mapSearchParam.value.gpsY = param.gpsY
       mapSearchParam.value.radius = param.radius
+      selectedRowKeys.value = []  //清空选中的点位
+      selectedList.value = []
       getCamera()
     })
+    //点位点击
+    mybus.off('pointMarkerClick')
+    mybus.on('pointMarkerClick', (point) => {
+      console.log("pointMarkerClick->point", selectedList.value,point)
+      let check = false; //是否勾选
+      if(selectedList.value&&selectedList.value.length>0){
+        selectedList.value.forEach(ele=>{
+          if(ele.channelCode == point.data.channelCode){
+            check = true;
+          }
+        })
+      }
+      let pointData = new Proxy(point.data, point);
+      onSelectChange(pointData,!check,'','','proxy');
+    })
+    
   })
   const selectedList = ref([])
   const selectedRowKeys = ref([])
@@ -1740,8 +1758,9 @@
     getCamera()
   }
   const videoClean = () => { 
-    selectedList.value = []
+    //视频预览弹窗关闭后不清除选中行
-    selectedRowKeys.value = []
+    // selectedList.value = []
+    // selectedRowKeys.value = []
     videoList.value = []
     current.value = 1
   }
@@ -1926,8 +1945,9 @@
     },
   ])
   // const allClick = ref([])
-  const onSelectChange = (record, selected, selectedRows, nativeEvent) => {
+  const onSelectChange = (record, selected, selectedRows, nativeEvent,type) => {
     console.log('hahhahah', record, selected, selectedRows, nativeEvent)
+    record = JSON.parse(JSON.stringify(record));
     if (selected) {
       if (selectedRowKeys.value.length == 1000) {
         message.warning('最多只能添加1000个摄像头！')
@@ -1936,14 +1956,17 @@
         selectedRowKeys.value.push(record.channelCode || record.channelId)
       }
     } else {
-      selectedList.value = selectedList.value.filter(
+      selectedList.value.forEach((ele,index)=>{
-        (item) => item.idtCameraChannel !== record.idtCameraChannel
+        if(ele.channelCode == record.channelCode){
-      )
+          selectedList.value.splice(index,1)
+        }
+      })
       selectedRowKeys.value.splice(
         selectedRowKeys.value.indexOf(record.channelCode || record.channelId),
         1
       )
     }
+    mybus.emit('selectTablePoint',selectedList.value)
     console.log('已选中======================>', selectedList.value)
   }
   const onSelectAll = (selected, selectedRows, changeRows) => {
@@ -1955,9 +1978,14 @@
       if (selectedRowKeys.value.length > 1000) {
         message.warning('最多只能添加1000个摄像头！')
         changeRows.map((val) => {
-          selectedList.value = selectedList.value.filter(
+          // selectedList.value = selectedList.value.filter(
-            (item) => item.idtCameraChannel !== val.idtCameraChannel
+          //   (item) => item.idtCameraChannel !== val.idtCameraChannel
-          )
+          // )
+          selectedList.value.forEach((ele,index)=>{
+            if(ele.channelCode == record.channelCode){
+              selectedList.value.splice(index,1)
+            }
+          })
           selectedRowKeys.value.splice(
             selectedRowKeys.value.indexOf(val.channelCode || val.channelId),
             1
@@ -1976,6 +2004,7 @@
       })
     }
     console.log('heiheiheiehiehei', selected, selectedRows, changeRows)
+    mybus.emit('selectTablePoint',selectedList.value)
   }
 
   // 切换tab

front/src/views/home/videoSurveillance/index.vue

@@ -125,6 +125,7 @@
           gpsY: '',
           radius: '',
         },
+        pointAllData:[],
       }
     },
     components: {
@@ -158,6 +159,20 @@
         this.mapSearchParam.parentId = parentId
         this.getCameraByParentId()
       })
+      //表格勾选
+      mybus.off('selectTablePoint')
+      mybus.on('selectTablePoint', (pointlist) => {
+        console.log("mounted -> pointlist", pointlist)
+        for(let i=0;i<this.pointAllData.length;i++){
+          this.pointAllData[i].active = false
+          for(let j=0;j<pointlist.length;j++){
+            if(this.pointAllData[i].channelCode == pointlist[j].channelCode){
+              this.pointAllData[i].active = true
+            }
+          }
+        }
+        this.addResourceTomap('videoMap', this.pointAllData);
+      })
     },
     methods: {
       selectedAddress(item, index) {
@@ -244,6 +259,7 @@
           }
           getCameraByCondition(paramsFather).then((res) => {
             console.log('根据parent查询摄像头', res.data.data)
+            this.pointAllData = res.data.data
             this.addResourceTomap('videoMap', res.data.data)
           })
         }
@@ -357,12 +373,13 @@
             dataEvent.push({
               latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
               data: item,
+              active: item.active,
               type: 'videoSurveillance',
             })
           }
         })
         console.log('上图数据', dataEvent)
-        this.getMapPoint(dataEvent, 'videoSurveillance.png', type)
+        this.getMapPoint(dataEvent, 'icon_camare.png', type)
       },
       getMapPoint(data, img, type) {
         // this.hiMapFun.clearAllLayers();
@@ -372,7 +389,8 @@
           features,
           img,
           type,
-          createCameraDetailsPop
+          createCameraDetailsPop,
+          'icon_camare_active.png'
         )
       },
 
@@ -546,7 +564,7 @@
       position: absolute;
       bottom: 0.1rem;
       right: 0.1rem;
-      z-index: 1001;
+      z-index: 988;
       cursor: pointer;
     }
     .address-auto-complete-input {