station模块，站点状态更新效果优化

src/views/stationOperation/components/MapMarker.vue

@@ -28,6 +28,10 @@ export default {
       type: Array,
       required: true
     },
+    currList: {
+      type: Array,
+      required: true
+    },
     markerType: {
       type: Number,
       default: 1
@@ -151,11 +155,12 @@ export default {
 
     // 初始化波纹
     initRipples() {
-      this.list
+      console.log("xuanran",this.currList);
-        .filter(
+      this.currList
-          stationInfo =>
+        // .filter(
-            stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
+        //   stationInfo =>
-        )
+        //     stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
+        // )
         .forEach(stationInfo => {
           this.map.addOverlay(this.getRipple(stationInfo))
         })
@@ -236,6 +241,14 @@ export default {
     }
   },
   watch: {
+    // list: {
+    //   // 数据变化时执行的逻辑代码
+    //   handler(newName, oldName) {
+    //     console.log(newName);
+    //   },
+    //   // 开启深度监听
+    //   deep: true
+    //   }
     list() {
       this.map.getOverlays().clear()
       this.initMapPopup()
@@ -244,6 +257,22 @@ export default {
       if (this.markerType == 2) {
         this.initCircles()
       }
+    },
+    currList: {
+      handler(newVal, oldVal) {
+        console.log(newVal);
+        newVal.forEach(item => {
+          var layer = this.map.getOverlays().getArray().find(layer=> {
+            return layer.id === `ripple_${item.stationType}_${item.stationId}`;
+          });
+          console.log("adfasdfadsf",layer);
+          if (layer) {
+            this.map.removeOverlay(layer);
+          }
+        })
+        this.initRipples()
+      },
+      deep:true
     }
   }
 }

src/views/stationOperation/index.vue

@@ -144,7 +144,7 @@
         ref="mapRef"
         token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm"
       >
-        <MapMarker :list="markerList" :marker-type="markerType" :radius="circleRadius" @markerClick="onMarkerClick" />
+        <MapMarker :list="markerList" :currList="upDateStationList" :marker-type="markerType" :radius="circleRadius" @markerClick="onMarkerClick" />
         <MapPane
           ref="mapPane"
           :treeData="treeData"
@@ -184,6 +184,7 @@ export default {
       followedDataList: [], // 关注
       markerList: [], // 地图上标记点列表
       markerList_clone: [], // 地图上标记点列表
+      upDateStationList: [], // 地图上标记点列表
       markerType: 1, // 是否绘制地图上的圆
       circleRadius: 0,
 
@@ -224,12 +225,17 @@ export default {
         const res = await getAction('/jeecg-station-operation/stationOperation/findList')
         this.originalDataList = res // 保留初始版本
         this.dataList = cloneDeep(res)
-        // this.markerList = cloneDeep(res)
+        this.markerList = cloneDeep(res)
         this.markerList_clone = cloneDeep(res)
         this.getDataProvisionEfficiency(this.markerList_clone)
         this.timer = setInterval(() => {
           setTimeout(() => {
             this.getDataProvisionEfficiency(this.markerList_clone)
+            // this.upDateStationList.forEach(item => {
+            //   if (item.quality=="excellent") {
+            //     item.quality="bad"
+            //   }
+            // })
           }, 0);
         }, 15000);
         this.$nextTick(() => {
@@ -244,19 +250,28 @@ export default {
 
     // 查询台站数据提供率及有效率
     async getDataProvisionEfficiency(arr) {
-      this.markerList=[]
       try {
         const res = await getAction('/stationOperation/getDataProvisionEfficiency')
-        console.log("getDataProvisionEfficiency", res);
+        // console.log("getDataProvisionEfficiency", res);
-        arr.forEach(item => {
+        res.result.forEach(item => {
-          res.result.forEach(data => {
+          arr.forEach(el => {
-            if (parseInt(data.id) == item.stationId) {
+            if (parseInt(item.id) == el.stationId) { 
-              item.quality = data.quality
+              item.stationType = el.stationType
+              item.stationId = el.stationId
             }
           })
-          this.markerList.push(item)
         })
-        console.log("this.markerListthis.markerListthis.markerList",this.markerList);
+        // console.log(res.result);
+        this.upDateStationList = res.result
+        // arr.forEach(item => {
+        //   res.result.forEach(data => {
+        //     if (parseInt(data.id) == item.stationId) {
+        //       item.quality = data.quality
+        //     }
+        //   })
+        //   this.markerList.push(item)
+        // })
+        // console.log("this.markerListthis.markerListthis.markerList",this.markerList);
       } catch (error) {
         console.error(error)
       }