Merge branch 'feature-station-renpy'

src/components/CustomChart/index.vue

@@ -83,6 +83,6 @@ export default {
 </script>
 <style lang="less" scoped>
 .custom-chart {
-  height: 100% !important;
+  // height: 100% !important;
 }
 </style>

src/views/stationOperation/components/MapMarker.vue

@@ -28,6 +28,14 @@ export default {
       type: Array,
       required: true
     },
+    currList: {
+      type: Array,
+      required: true
+    },
+    orgList: {
+      type: Array,
+      required: true
+    },
     markerType: {
       type: Number,
       default: 1
@@ -151,23 +159,32 @@ export default {
 
     // 初始化波纹
     initRipples() {
-      this.list
+      this.currList
-        .filter(
+        // .filter(
-          stationInfo =>
+        //   stationInfo =>
-            stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
+        //     stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
-        )
+        // )
         .forEach(stationInfo => {
           this.map.addOverlay(this.getRipple(stationInfo))
         })
     },
 
-    getRipple({ lon, lat, stationId, stationType }) {
+    getRipple({ 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]),
@@ -209,7 +226,10 @@ export default {
           result.lon = decimalToDms(result.lon || result.longitude)
           result.lat = decimalToDms(result.lat || result.latitude, false)
 
-          this.currStationInfo = result
+          let params = this.currList.find(item => {
+            return item.stationId === result.stationId
+          }) || {}
+          this.currStationInfo = { ...result, ...params }
         } else {
           this.$message.error(message)
         }
@@ -234,6 +254,20 @@ export default {
       if (this.markerType == 2) {
         this.initCircles()
       }
+    },
+    currList: {
+      handler(newVal, oldVal) {
+        this.orgList.forEach(item => {
+          var layer = this.map.getOverlays().getArray().find(layer=> {
+            return layer.id === `ripple_${item.stationType}_${item.stationId}`;
+          });
+          if (layer) {
+            this.map.removeOverlay(layer);
+          }
+        })
+        this.initRipples()
+      },
+      deep:true
     }
   }
 }
@@ -266,6 +300,7 @@ export default {
       line-height: 30px;
       border-bottom: 1px solid #0a544e;
       margin-bottom: 0;
+      color: rgb(187, 138, 18);
     }
   }
 
@@ -301,7 +336,7 @@ export default {
   @duration: 1.8s;
   @delay: 0.9s;
 
-  .inner-ripple-1 {
+  .inner-ripple-excellent-1 {
     position: absolute;
     top: 0;
     width: 100%;
@@ -311,7 +346,7 @@ export default {
     animation: rippleEffect @duration linear 0s infinite;
   }
 
-  .inner-ripple-2 {
+  .inner-ripple-excellent-2 {
     position: absolute;
     top: 0;
     width: 100%;
@@ -321,6 +356,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/components/MapPane.vue

@@ -18,15 +18,15 @@
         </div>
         <div>
           <img
-            v-if="active == 1"
+            v-if="active == 1 && showPane"
             src="@/assets/images/station-operation/station-operate-active.png"
-            @click="showPane = !showPane"
+            @click="handleHide"
           />
           <img v-else src="@/assets/images/station-operation/station-operate.png" @click="onPaneChange(1)" />
         </div>
         <div>
           <img
-            v-if="active == 2"
+            v-if="active == 2 && showPane"
             src="@/assets/images/station-operation/filter-station-active.png"
             @click="showPane = !showPane"
           />
@@ -233,9 +233,10 @@
         <!-- 右侧图表展示栏 -->
         <div class="data-receive-status-chart" :class="{ 'on-screen': !leftPaneShow }">
           <template v-if="showChart">
-            <RealTimeDataChart ref="realtimeChartRef" :list="statusList" :scale-settings="initialDataRecieveSettings" />
+            <RealTimeDataChart ref="realtimeChartRef" :spinning="spinLoading" :list="statusList" :scale-settings="initialDataRecieveSettings" />
             <resize-observer @notify="handleResize" />
           </template>
+          <div v-show="maskVisi" style="z-index: 1;position: absolute;top: 0;left: 0;width:100%;height: 100%;background: rgba(0, 0, 0, .45);"></div>
         </div>
         <!-- 右侧图表展示栏结束 -->
       </div>
@@ -419,7 +420,9 @@ export default {
 
       markerList: [], // 要在地图上展示的marker列表
 
-      showPane: true
+      showPane: true,
+      spinLoading: false,
+      maskVisi: false
     }
   },
   created() {
@@ -468,6 +471,7 @@ export default {
 
     // 面板改变
     onPaneChange(active) {
+      this.showPane = true
       this.active = active
       const source = this.circleLayer.getSource()
       source.clear() // 清理图层
@@ -483,6 +487,12 @@ export default {
       }
     },
 
+    handleHide() {
+      this.showPane = !this.showPane
+      this.emitDrawCircle(1)
+      this.emitFilter()
+    },
+
     // 根据 Filter 筛选Marker
     emitFilter() {
       const filterType = this.filterList.filter(item => item.checked).map(item => item.type)
@@ -719,6 +729,8 @@ export default {
 
     // 获取数据接收状态列表
     async getDataRecieveStatusList() {
+      this.maskVisi = true
+      this.spinLoading = true
       try {
         this.isGettingStatusList = true
         const { success, result, message } = await getAction(
@@ -727,6 +739,8 @@ export default {
             userId: this.$store.getters.userInfo.id
           }
         )
+        this.maskVisi = false
+        this.spinLoading = false
         if (success) {
           const statusList = []
           result.forEach(item => {
@@ -745,6 +759,8 @@ export default {
           this.$message.error(message)
         }
       } catch (error) {
+        this.maskVisi = false
+        this.spinLoading = false
         console.error(error)
       } finally {
         this.isGettingStatusList = false
@@ -1157,8 +1173,7 @@ export default {
     right: 15px;
     width: calc(100% - 270px);
     height: 100%;
-    overflow: auto;
+    padding: 0 0 10px 15px;
-    padding: 0 15px 10px;
     border: 1px solid @borderColor;
     transition: width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
 

src/views/stationOperation/components/RealTimeDataChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="width: 100%;height: 100%;overflow: auto;padding-top: 76px;">
     <!-- 图例 -->
     <div class="legend">
       <div
@@ -15,6 +15,7 @@
     </div>
     <!-- 图例结束 -->
     <custom-chart ref="customChartRef" :option="option" :height="list.length * 295"></custom-chart>
+    <a-spin style="z-index: 11;position: absolute;top: 45%;left: 48%;" :spinning="spinning" />
   </div>
 </template>
 
@@ -79,6 +80,9 @@ export default {
     title: {
       type: String
     },
+    spinning: {
+      type: Boolean
+    },
     list: {
       type: Array,
       default: () => []
@@ -295,9 +299,16 @@ export default {
 
 <style lang="less" scoped>
 .legend {
-  margin: 32px 0;
+  width: 100%;
+  padding: 25px 0;
   display: flex;
   justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #022024;
+  z-index: 11;
 
   &-item {
     color: #ade6ee;

src/views/stationOperation/components/markerPopupColumns.js

@@ -116,6 +116,24 @@ export default {
     }, {
         label: 'TYPE',
         key: 'type'
+    }, {
+        label: 'USED',
+        key: 'used'
+    }, {
+        label: 'PHD',
+        key: 'phd'
+    }, {
+        label: 'PHDF',
+        key: 'phdf'
+    }, {
+        label: 'MET',
+        key: 'met'
+    }, {
+        label: 'SOH',
+        key: 'soh'
+    }, {
+        label: 'PHDF+MET+SOH',
+        key: 'phdMetSoh'
     }],
     [MarkerType.ImsRnStationG]: [{
         label: 'COUNTRYCODE',
@@ -153,6 +171,24 @@ export default {
     }, {
         label: 'TYPE',
         key: 'type'
+    }, {
+        label: 'USED',
+        key: 'used'
+    }, {
+        label: 'PHD',
+        key: 'phd'
+    }, {
+        label: 'PHDF',
+        key: 'phdf'
+    }, {
+        label: 'MET',
+        key: 'met'
+    }, {
+        label: 'SOH',
+        key: 'soh'
+    }, {
+        label: 'PHDF+MET+SOH',
+        key: 'phdMetSoh'
     }],
     [MarkerType.NRL]: [{
         label: 'COUNTRYCODE',

src/views/stationOperation/index.vue

@@ -144,7 +144,14 @@
         ref="mapRef"
         token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm"
       >
-        <MapMarker :list="markerList" :marker-type="markerType" :radius="circleRadius" @markerClick="onMarkerClick" />
+        <MapMarker 
+          :list="markerList" 
+          :currList="upDateStationList" 
+          :orgList="orgStationList" 
+          :marker-type="markerType" 
+          :radius="circleRadius" 
+          @markerClick="onMarkerClick" 
+        />
         <MapPane
           ref="mapPane"
           :treeData="treeData"
@@ -164,7 +171,7 @@ import DataListItem from './components/DataListItem.vue'
 import ScrollContainer from '@/components/ScrollContainer/index.vue'
 import { getAction } from '../../api/manage'
 import { cloneDeep } from 'lodash'
-
+const key= "updateList"
 export default {
   components: {
     Map,
@@ -173,6 +180,19 @@ export default {
     ScrollContainer,
     DataListItem
   },
+  watch: {
+    "$route": {
+      handler:function(val,oldVal) {
+        if (val.name!=="station-operation") {
+          this.$message.destroy()
+          clearInterval(this.timer);
+          this.timer = null
+        }
+      },
+      deep:true,
+      immediate:true
+    }
+  },
   data() {
     return {
       activeKey: '1',
@@ -183,6 +203,9 @@ export default {
       dataList: [], // 左侧All Data 列表
       followedDataList: [], // 关注
       markerList: [], // 地图上标记点列表
+      markerList_clone: [], // 地图上标记点列表
+      upDateStationList: [], // 有效率列表（显示波纹）
+      orgStationList: [], // 地图上标记点列表
       markerType: 1, // 是否绘制地图上的圆
       circleRadius: 0,
 
@@ -201,7 +224,9 @@ export default {
 
       stationTypeList: [],
 
-      treeData: [] // 台站树列表
+      treeData: [], // 台站树列表
+      timer: null,
+      updataFilterType: []
     }
   },
   created() {
@@ -210,6 +235,10 @@ export default {
     this.getStationTypeList()
     this.getStationTree()
   },
+  beforeDestroy () {
+    clearInterval(this.timer);
+    this.timer = null
+  },
   methods: {
     // 获取站点列表
     async getStationList() {
@@ -219,7 +248,13 @@ export default {
         this.originalDataList = res // 保留初始版本
         this.dataList = cloneDeep(res)
         this.markerList = cloneDeep(res)
-
+        this.markerList_clone = cloneDeep(res)
+        this.getDataProvisionEfficiency(this.markerList_clone,"one")
+        this.timer = setInterval(() => {
+          setTimeout(() => {
+            this.getDataProvisionEfficiency(this.markerList_clone)
+          }, 0);
+        }, 15000);
         this.$nextTick(() => {
           this.$refs.scrollContainerRef.checkScrollEnd()
         })
@@ -230,6 +265,55 @@ export default {
       }
     },
 
+    // 查询台站数据提供率及有效率
+    async getDataProvisionEfficiency(arr, str) {
+      if (str && this.$route.path=="/station-operation") {
+        this.$message.loading({ content: 'Loading station data, please wait...', key,  duration: 0 })
+      }
+      getAction('/stationOperation/getDataProvisionEfficiency').then(res => {
+        if (res.success) {
+          this.$message.destroy()
+          if (str && this.$route.path == "/station-operation") { 
+            this.$message.success({ content: 'Loaded!', key, duration: 2 })
+          }
+          res.result.forEach(item => {
+            arr.forEach(el => {
+              if (parseInt(item.id) == el.stationId&&el.stationType!="Nuclear Facility"&&el.stationType!="NRL") { 
+                item.stationType = el.stationType
+                item.stationId = el.stationId
+              }
+            })
+          })
+          this.orgStationList = res.result
+          if (this.updataFilterType.length>0) {
+            this.upDateStationList = this.orgStationList.filter(item => this.updataFilterType.includes(item.stationType))
+          } else {
+            this.upDateStationList = res.result
+          }
+          if (this.markerList.length > 0) {
+            let curList = []
+            this.markerList.forEach(item => {
+              if (item.stationType!="Nuclear Facility" && item.stationType!="NRL") {
+                this.orgStationList.forEach(el => {
+                  if (parseInt(el.id) == item.stationId) {
+                    curList.push(el)
+                  }
+                })
+              }
+            })
+            this.upDateStationList=curList
+          } else {
+            this.upDateStationList=[]
+          }
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      }).catch(error => {
+        this.$message.destroy()
+        console.error(error)
+      })
+    },
+
     // 获取已关注站点列表
     async getFollowedStationList() {
       try {
@@ -360,6 +444,23 @@ export default {
     // 修改地图上的marker列表
     onChangeMarker(markerList) {
       this.markerList = markerList
+      let curList = []
+      if (markerList.length>0) {
+        markerList.forEach(item => {
+          if (item.stationType!="Nuclear Facility" && item.stationType!="NRL") {
+            this.orgStationList.forEach(el => {
+              if (parseInt(el.id) == item.stationId) {
+                el.stationType = item.stationType
+                el.stationId = item.stationId
+                curList.push(el)
+              }
+            })
+          }
+        })
+        this.upDateStationList=curList
+      } else {
+        this.upDateStationList=[]
+      }
     },
 
     // 是否绘制圆圈
@@ -372,6 +473,7 @@ export default {
      * 根据类型筛选地图上的marker列表
      */
     onFilterMarker({ filterType, filterDataQuality }) {
+      this.updataFilterType = filterType
       console.log(
         '%c [ filterType, filterDataQuality ]-343',
         'font-size:13px; background:pink; color:#bf2c9f;',
@@ -379,6 +481,7 @@ export default {
         filterDataQuality
       )
       this.markerList = this.originalDataList.filter(item => filterType.includes(item.stationType))
+      this.upDateStationList = this.orgStationList.filter(item => filterType.includes(item.stationType))
     },
 
     // 地图图标点击