台站运行管理页面状态接口联调

src/views/stationOperation/components/MapMarker.vue

@@ -161,13 +161,23 @@ export default {
         })
     },
 
-    getRipple({ lon, lat, stationId, stationType }) {
+    getRipple({ lon, lat, stationId, stationType, quality }) {
+      // console.log("lon, lat, stationId, stationType, quality",lon, lat, stationId, stationType, quality);
       const rippleDiv = document.createElement('div')
       rippleDiv.className = 'custom-ripple'
-
+      if (quality == "excellent") {
-      rippleDiv.innerHTML = ` <div class="inner-ripple-1"></div>
+        rippleDiv.innerHTML = ` <div class="inner-ripple-excellent-1"></div>
-                              <div class="inner-ripple-2"></div>
+                                <div class="inner-ripple-excellent-2"></div>
                               `
+      } else if (quality == "good") {
+        rippleDiv.innerHTML = ` <div class="inner-ripple-good-1"></div>
+                                <div class="inner-ripple-good-2"></div>
+                              `
+      } else if(quality == "bad"){
+        rippleDiv.innerHTML = ` <div class="inner-ripple-bad-1"></div>
+                                <div class="inner-ripple-bad-2"></div>
+                              `
+      }
 
       return new Overlay({
         position: fromLonLat([lon, lat]),
@@ -266,6 +276,7 @@ export default {
       line-height: 30px;
       border-bottom: 1px solid #0a544e;
       margin-bottom: 0;
+      color: rgb(187, 138, 18);
     }
   }
 
@@ -301,7 +312,7 @@ export default {
   @duration: 1.8s;
   @delay: 0.9s;
 
-  .inner-ripple-1 {
+  .inner-ripple-excellent-1 {
     position: absolute;
     top: 0;
     width: 100%;
@@ -311,7 +322,7 @@ export default {
     animation: rippleEffect @duration linear 0s infinite;
   }
 
-  .inner-ripple-2 {
+  .inner-ripple-excellent-2 {
     position: absolute;
     top: 0;
     width: 100%;
@@ -321,6 +332,46 @@ export default {
     background-image: radial-gradient(circle, transparent 10%, rgba(15, 148, 28, 0.2) 30%, rgba(15, 148, 28, 0.5) 60%);
     animation: rippleEffect @duration linear @delay infinite;
   }
+  .inner-ripple-good-1 {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-image: radial-gradient(circle, transparent 10%, rgba(187, 138, 18, 0.2) 30%, rgba(187, 138, 18, 0.5) 60%);
+    animation: rippleEffect @duration linear 0s infinite;
+  }
+
+  .inner-ripple-good-2 {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    transform: scale(0);
+    background-image: radial-gradient(circle, transparent 10%, rgba(187, 138, 18, 0.2) 30%, rgba(187, 138, 18, 0.5) 60%);
+    animation: rippleEffect @duration linear @delay infinite;
+  }
+  .inner-ripple-bad-1 {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-image: radial-gradient(circle, transparent 10%, rgba(165, 58, 35, 0.2) 30%, rgba(165, 58, 35, 0.5) 60%);
+    animation: rippleEffect @duration linear 0s infinite;
+  }
+
+  .inner-ripple-bad-2 {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    transform: scale(0);
+    background-image: radial-gradient(circle, transparent 10%, rgba(165, 58, 35, 0.2) 30%, rgba(165, 58, 35, 0.5) 60%);
+    animation: rippleEffect @duration linear @delay infinite;
+  }
 }
 
 @keyframes rippleEffect {

src/views/stationOperation/index.vue

@@ -183,6 +183,7 @@ export default {
       dataList: [], // 左侧All Data 列表
       followedDataList: [], // 关注
       markerList: [], // 地图上标记点列表
+      markerList_clone: [], // 地图上标记点列表
       markerType: 1, // 是否绘制地图上的圆
       circleRadius: 0,
 
@@ -201,7 +202,8 @@ export default {
 
       stationTypeList: [],
 
-      treeData: [] // 台站树列表
+      treeData: [], // 台站树列表
+      timer: null
     }
   },
   created() {
@@ -210,6 +212,10 @@ export default {
     this.getStationTypeList()
     this.getStationTree()
   },
+  destroyed () {
+    clearInterval(this.timer);
+    this.timer = null
+  },
   methods: {
     // 获取站点列表
     async getStationList() {
@@ -218,8 +224,14 @@ 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)
+          }, 0);
+        }, 15000);
         this.$nextTick(() => {
           this.$refs.scrollContainerRef.checkScrollEnd()
         })
@@ -230,6 +242,26 @@ export default {
       }
     },
 
+    // 查询台站数据提供率及有效率
+    async getDataProvisionEfficiency(arr) {
+      this.markerList=[]
+      try {
+        const res = await getAction('/stationOperation/getDataProvisionEfficiency')
+        console.log("getDataProvisionEfficiency", res);
+        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)
+      }
+    },
+
     // 获取已关注站点列表
     async getFollowedStationList() {
       try {