fix: Filter中增加NRL的筛选，Data Quality筛选增加事件，因没有接口，未对接筛选功能，动效改为非核设施才有,修复空值导致的地图图层未清理问题

src/utils/util.js

@@ -687,3 +687,19 @@ export const EXPORT_FILE_SUFFIX = ".xlsx";
 export function stringIsNull(str) {
   return str == null || str === 'null' || str === 'undefined';
 }
+
+/**
+ * 根据给的key拍平数组
+ * @param {Array<any>} arr 
+ * @param {String} flatKey 
+ * @returns 
+ */
+export function flat(arr, flatKey = 'children') {
+  return arr.reduce((result, item) => {
+      result.push(item)
+      if (item[flatKey]) {
+          result = result.concat(flat(item[flatKey], flatKey))
+      }
+      return result
+  }, [])
+}

src/views/stationOperation/components/MapMarker.vue

@@ -12,7 +12,7 @@
 <script>
 import Overlay from 'ol/Overlay'
 
-import { MarkerIcon } from './markerEnum'
+import { MarkerIcon, MarkerType } from './markerEnum'
 import { fromLonLat } from 'ol/proj'
 
 import PopupColumns from './markerPopupColumns'
@@ -44,13 +44,13 @@ export default {
       if (this.isHover) {
         this._getStationInfo(stationInfo)
       }
-    }, 500)
+    }, 0)
   },
   methods: {
     // 初始化marker
     initMarkers() {
-      this.list.forEach(eventItem => {
+      this.list.forEach(stationInfo => {
-        this.map.addOverlay(this.getMarker(eventItem))
+        this.map.addOverlay(this.getMarker(stationInfo))
       })
     },
 
@@ -83,8 +83,13 @@ export default {
     },
 
     initRipples() {
-      this.list.forEach(eventItem => {
+      this.list
-        this.map.addOverlay(this.getRipple(eventItem))
+        .filter(
+          stationInfo =>
+            stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
+        )
+        .forEach(stationInfo => {
+          this.map.addOverlay(this.getRipple(stationInfo))
         })
     },
 
@@ -109,8 +114,7 @@ export default {
       this.popupOverlay = new Overlay({
         element: this.$refs.mapPopupRef,
         positioning: 'top-center',
-        id: POPUP_OVERLAY_ID,
+        id: POPUP_OVERLAY_ID
-        offset: [0, 27]
       })
       this.map.addOverlay(this.popupOverlay)
     },
@@ -118,6 +122,7 @@ export default {
     // 显示地图弹窗
     async showMapPopup(stationInfo) {
       this.popupOverlay.setPosition(fromLonLat([stationInfo.lon, stationInfo.lat]))
+      this.popupOverlay.setOffset([stationInfo.stationType == MarkerType.NuclearFacility ? 10 : 0, 27])
       this.columns = PopupColumns[stationInfo.stationType]
       this.popupTitle = stationInfo.stationType
       this.isGettingInfo = true
@@ -173,16 +178,13 @@ export default {
 
     &::before {
       position: absolute;
-      top: -6px;
+      top: -17px;
       left: 50%;
       content: '';
-      width: 12px;
+      transform: translateX(-50%);
-      height: 12px;
+      border: 6px solid transparent;
-      border: 1px solid rgba(2, 26, 29, 0.9);
+      border-bottom-color: rgba(2, 26, 29, 0.9);
-      background: rgba(2, 26, 29, 0.9);
+      border-bottom-width: 12px;
-      transform: translateX(-50%) rotate(45deg) skew(14deg, 14deg);
-      border-bottom: 0;
-      border-right: 0;
     }
 
     h2 {
@@ -233,8 +235,8 @@ export default {
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    background-image: radial-gradient(circle, transparent 10%, rgba(15, 148, 28, 0.1) 30%, rgba(15, 148, 28, 0.5) 60%);
+    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;
+    animation: rippleEffect @duration linear 0s infinite;
   }
   .inner-ripple-2 {
     position: absolute;
@@ -242,8 +244,9 @@ export default {
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    background-image: radial-gradient(circle, transparent 10%, rgba(15, 148, 28, 0.1) 30%, rgba(15, 148, 28, 0.5) 60%);
+    transform: scale(0);
-    animation: rippleEffect @duration linear @delay * 2 infinite;
+    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;
   }
 }
 

src/views/stationOperation/components/MapPane.vue

@@ -99,23 +99,36 @@
         </div>
         <div class="map-pane-content-main">
           <div class="station-filter-list">
-            <div class="station-filter-item" v-for="filterItem in filterList" :key="filterItem.title">
+            <div
+              class="station-filter-item"
+              v-for="filterItem in filterList"
+              :key="filterItem.title"
+              @click="onStationTypeFilterChange(filterItem)"
+            >
               <div class="station-filter-item-main">
                 <div>
                   <img :src="filterItem.icon" />
                 </div>
                 <span>{{ filterItem.title }}</span>
               </div>
-              <a-checkbox v-model="filterItem.checked" @change="emitTypeFilter"></a-checkbox>
+              <a-checkbox v-model="filterItem.checked"></a-checkbox>
             </div>
           </div>
           <a-divider style="background-color: #0a544e; margin: 10px 0 0;"></a-divider>
           <!-- 数据质量类型 -->
           <div class="station-data-quality-list">
-            <div class="station-data-quality-list-item" v-for="(stateItem, index) in dataQualityList" :key="index">
+            <div
+              class="station-data-quality-list-item"
+              v-for="(stateItem, index) in dataQualityList"
+              :key="index"
+              @click="onDataQualityFilterChange(stateItem)"
+            >
+              <div>
                 <img :src="stateItem.icon" alt="" />
                 <span>{{ stateItem.title }}</span>
               </div>
+              <a-checkbox v-model="stateItem.checked"></a-checkbox>
+            </div>
           </div>
           <!-- 数据质量结束 -->
         </div>
@@ -217,11 +230,10 @@
 </template>
 <script>
 import CustomModal from '@/components/CustomModal/index.vue'
-import FilterImage from './filterImage'
 import CustomTree from '@/components/CustomTree/index.vue'
 import RealTimeDataChart from './RealTimeDataChart.vue'
 import { postAction } from '../../../api/manage'
-import { MarkerType } from './markerEnum'
+import { MarkerType, FilterIcon } from './markerEnum'
 
 import { Vector as VectorLayer } from 'ol/layer'
 import VectorSource from 'ol/source/Vector'
@@ -235,37 +247,43 @@ const filterList = [
   {
     title: 'IMS RN Station(P)',
     type: MarkerType.ImsRnStationP,
-    icon: FilterImage.ImsRnStation,
+    icon: FilterIcon[MarkerType.ImsRnStationP],
     checked: true
   },
   {
     title: 'IMS RN Station(G)',
     type: MarkerType.ImsRnStationG,
-    icon: FilterImage.ImsRnStation,
+    icon: FilterIcon[MarkerType.ImsRnStationG],
+    checked: true
+  },
+  {
+    title: 'NRL',
+    type: MarkerType.NRL,
+    icon: FilterIcon[MarkerType.NRL],
     checked: true
   },
   {
     title: 'Nuclear Facilities',
     type: MarkerType.NuclearFacility,
-    icon: FilterImage.NuclearFacility,
+    icon: FilterIcon[MarkerType.NuclearFacility],
     checked: true
   },
   {
     title: 'Groud monitoring station',
     type: MarkerType.GroudMonitoringStation,
-    icon: FilterImage.GroudMonitoringStation,
+    icon: FilterIcon[MarkerType.GroudMonitoringStation],
     checked: true
   },
   {
     title: 'car',
     type: MarkerType.Car,
-    icon: FilterImage.Car,
+    icon: FilterIcon[MarkerType.Car],
     checked: true
   },
   {
     title: 'ship',
     type: MarkerType.Ship,
-    icon: FilterImage.Ship,
+    icon: FilterIcon[MarkerType.Ship],
     checked: true
   }
 ]
@@ -274,19 +292,23 @@ const filterList = [
 const dataQualityList = [
   {
     title: 'Excellent data quality',
-    icon: FilterImage.State1
+    icon: FilterIcon.State1,
+    checked: true
   },
   {
     title: 'Good data quality',
-    icon: FilterImage.State2
+    icon: FilterIcon.State2,
+    checked: true
   },
   {
     title: 'Poor data quality',
-    icon: FilterImage.State3
+    icon: FilterIcon.State3,
+    checked: true
   },
   {
     title: 'Signal interruption',
-    icon: FilterImage.State4
+    icon: FilterIcon.State4,
+    checked: true
   }
 ]
 
@@ -432,25 +454,28 @@ export default {
     // 面板改变
     onPaneChange(active) {
       this.active = active
+      const source = this.circleLayer.getSource()
+      source.clear() // 清理图层
       switch (active) {
         case 1: // 核设施查询面板
           this.drawCircle()
           this.emitStationChange()
           break
         case 2: // 筛选面板
-          this.emitTypeFilter()
+          this.emitFilter()
-          const source = this.circleLayer.getSource()
-          source.clear()
           break
       }
     },
 
     // 根据 Filter 筛选Marker
-    emitTypeFilter() {
+    emitFilter() {
-      this.$emit(
+      const filterType = this.filterList.filter(item => item.checked).map(item => item.type)
-        'changeMarkerByType',
+      const filterDataQuality = this.dataQualityList.filter(item => item.checked).map(item => item.title)
-        this.filterList.filter(item => item.checked).map(item => item.type)
+
-      )
+      this.$emit('filterMarker', {
+        filterType,
+        filterDataQuality
+      })
     },
 
     // 根据 Radius 筛选 Marker
@@ -472,6 +497,18 @@ export default {
       this.checkedKeys = []
     },
 
+    // Filter 过滤单个类型
+    onStationTypeFilterChange(filterItem) {
+      filterItem.checked = !filterItem.checked
+      this.emitFilter()
+    },
+
+    // 数据质量过滤
+    onDataQualityFilterChange(stateItem) {
+      stateItem.checked = !stateItem.checked
+      this.emitFilter()
+    },
+
     // 根据半径查询台站列表
     async handleSearchByRadius() {
       if (!this.radius) {
@@ -483,7 +520,7 @@ export default {
         return
       }
 
-      const stationIds = this.checkedKeys.filter(key => !this.treeData.find(leaf => leaf.stationId == key))
+      const stationIds = this.checkedKeys.filter(key => -1 == key.toString().indexOf('root_'))
       try {
         this.isGettingInfomationList = true
         const {
@@ -495,6 +532,10 @@ export default {
           stationIds
         })
         if (success) {
+          const source = this.circleLayer.getSource()
+          source.clear() // 清理图层
+
+          if (table) {
             const data = table.flat()
             data.forEach((item, index) => {
               item.radius = parseFloat(item.radius).toFixed(3)
@@ -528,6 +569,11 @@ export default {
             this.emitStationChange()
 
             this.drawCircle()
+          } else {
+            this.dataSource = []
+            this.markerList = []
+            this.emitStationChange()
+          }
         } else {
           this.$message.error(message)
         }
@@ -541,7 +587,6 @@ export default {
     // 绘制圆圈
     drawCircle() {
       const source = this.circleLayer.getSource()
-      source.clear()
       const circleFeatures = []
       this.stationList.forEach(stationItem => {
         circleFeatures.push(this.getCircle(stationItem))
@@ -816,14 +861,16 @@ export default {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        cursor: pointer;
+        user-select: none;
 
-        &:nth-child(3) {
+        &:nth-child(4) {
           img {
             margin-left: -10px;
           }
         }
 
-        &:nth-child(4) {
+        &:nth-child(5) {
           img {
             margin-left: -12px;
           }
@@ -844,6 +891,17 @@ export default {
           height: 32px;
           display: flex;
           align-items: center;
+          display: flex;
+          justify-content: space-between;
+          width: 251px;
+          cursor: pointer;
+          user-select: none;
+          align-items: center;
+
+          > div {
+            display: flex;
+            align-items: center;
+          }
 
           span {
             margin-left: 12px;

src/views/stationOperation/components/filterImage.js

@@ -1,23 +0,0 @@
-import Car from '@/assets/images/station-operation/car-filter.png'
-import GroudMonitoringStation from '@/assets/images/station-operation/groud-monitoring-station-filter.png'
-import ImsRnStation from '@/assets/images/station-operation/ims-rn-station-filter.png'
-import NuclearFacility from '@/assets/images/station-operation/nuclear-facility-filter.png'
-import Ship from '@/assets/images/station-operation/ship-filter.png'
-
-import State1 from '@/assets/images/station-operation/station-state-1.png'
-import State2 from '@/assets/images/station-operation/station-state-2.png'
-import State3 from '@/assets/images/station-operation/station-state-3.png'
-import State4 from '@/assets/images/station-operation/station-state-4.png'
-
-export default {
-    Car,
-    GroudMonitoringStation,
-    ImsRnStation,
-    NuclearFacility,
-    Ship,
-
-    State1,
-    State2,
-    State3,
-    State4
-}

src/views/stationOperation/components/markerEnum.js

@@ -4,21 +4,51 @@ import ImsRnStation from '@/assets/images/station-operation/ims-rn-station.png'
 import NuclearFacility from '@/assets/images/station-operation/nuclear-facility.png'
 import Ship from '@/assets/images/station-operation/ship.png'
 
+import CarFilter from '@/assets/images/station-operation/car-filter.png'
+import GroudMonitoringStationFilter from '@/assets/images/station-operation/groud-monitoring-station-filter.png'
+import ImsRnStationFilter from '@/assets/images/station-operation/ims-rn-station-filter.png'
+import NuclearFacilityFilter from '@/assets/images/station-operation/nuclear-facility-filter.png'
+import ShipFilter from '@/assets/images/station-operation/ship-filter.png'
+
+import State1 from '@/assets/images/station-operation/station-state-1.png'
+import State2 from '@/assets/images/station-operation/station-state-2.png'
+import State3 from '@/assets/images/station-operation/station-state-3.png'
+import State4 from '@/assets/images/station-operation/station-state-4.png'
+
 export const MarkerType = {
     Car: 'Car',
     GroudMonitoringStation: 'Groud monitoring station',
     ImsRnStationP: 'IMS STATION(P)',
     ImsRnStationG: 'IMS STATION(G)',
     NuclearFacility: 'Nuclear Facility',
-    Ship: 'Ship'
+    Ship: 'Ship',
+    NRL: 'NRL',
 
 }
 
+// 地图上Marker的图标
 export const MarkerIcon = {
     [MarkerType.Car]: Car,
     [MarkerType.GroudMonitoringStation]: GroudMonitoringStation,
     [MarkerType.ImsRnStationP]: ImsRnStation,
     [MarkerType.ImsRnStationG]: ImsRnStation,
     [MarkerType.NuclearFacility]: NuclearFacility,
-    [MarkerType.Ship]: Ship
+    [MarkerType.Ship]: Ship,
+    [MarkerType.NRL]: ImsRnStation
+}
+
+// 面板Filter的图标
+export const FilterIcon = {
+    [MarkerType.Car]: CarFilter,
+    [MarkerType.GroudMonitoringStation]: GroudMonitoringStationFilter,
+    [MarkerType.ImsRnStationP]: ImsRnStationFilter,
+    [MarkerType.ImsRnStationG]: ImsRnStationFilter,
+    [MarkerType.NuclearFacility]: NuclearFacilityFilter,
+    [MarkerType.Ship]: ShipFilter,
+    [MarkerType.NRL]: ImsRnStationFilter,
+
+    State1,
+    State2,
+    State3,
+    State4
 }

src/views/stationOperation/index.vue

@@ -144,7 +144,7 @@
           ref="mapPane"
           :treeData="treeData"
           @changeMarker="onChangeMarker"
-          @changeMarkerByType="onChangeMarkerByType"
+          @filterMarker="onFilterMarker"
         />
       </Map>
     </div>
@@ -256,7 +256,14 @@ export default {
       try {
         const { success, result, message } = await getAction('/stationOperation/findTree')
         if (success) {
-          result.forEach(item => (item.stationCode = item.code))
+          result.forEach(item => {
+            item.stationCode = item.code
+            item.stationId = `root_${item.stationId}`
+            item.children.forEach(child => {
+              child.stationCode = child.code
+              child.stationId = `${item.stationId}_parent_${child.stationId}`
+            })
+          })
           this.treeData = result
         } else {
           this.$message.error(message)
@@ -331,10 +338,10 @@ export default {
 
     /**
      * 根据类型筛选地图上的marker列表
-     * @param {Array<string>} typeList
      */
-    onChangeMarkerByType(typeList) {
+    onFilterMarker({ filterType, filterDataQuality }) {
-      this.markerList = this.originalDataList.filter(item => typeList.includes(item.stationType))
+      console.log('%c [ filterType, filterDataQuality ]-343', 'font-size:13px; background:pink; color:#bf2c9f;', filterType, filterDataQuality)
+      this.markerList = this.originalDataList.filter(item => filterType.includes(item.stationType))
     },
 
     // 地图图标点击
@@ -500,6 +507,10 @@ export default {
         align-items: center;
         transition: height 0.3s ease-in-out;
         overflow: hidden;
+
+        .ant-input-search {
+          margin-right: 10px;
+        }
       }
 
       &-content {