From 39f407e20410a16a46a5c9c49a21afb71c7e05a8 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Mon, 19 Jun 2023 19:52:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Filter=E4=B8=AD=E5=A2=9E=E5=8A=A0NRL?=
 =?UTF-8?q?=E7=9A=84=E7=AD=9B=E9=80=89=EF=BC=8CData=20Quality=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=A2=9E=E5=8A=A0=E4=BA=8B=E4=BB=B6=EF=BC=8C=E5=9B=A0?=
 =?UTF-8?q?=E6=B2=A1=E6=9C=89=E6=8E=A5=E5=8F=A3=EF=BC=8C=E6=9C=AA=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8A=A8?=
 =?UTF-8?q?=E6=95=88=E6=94=B9=E4=B8=BA=E9=9D=9E=E6=A0=B8=E8=AE=BE=E6=96=BD?=
 =?UTF-8?q?=E6=89=8D=E6=9C=89,=E4=BF=AE=E5=A4=8D=E7=A9=BA=E5=80=BC?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E7=9A=84=E5=9C=B0=E5=9B=BE=E5=9B=BE=E5=B1=82?=
 =?UTF-8?q?=E6=9C=AA=E6=B8=85=E7=90=86=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/util.js                             |  16 ++
 .../stationOperation/components/MapMarker.vue |  45 ++---
 .../stationOperation/components/MapPane.vue   | 174 ++++++++++++------
 .../components/filterImage.js                 |  23 ---
 .../stationOperation/components/markerEnum.js |  36 +++-
 src/views/stationOperation/index.vue          |  21 ++-
 6 files changed, 205 insertions(+), 110 deletions(-)
 delete mode 100644 src/views/stationOperation/components/filterImage.js

diff --git a/src/utils/util.js b/src/utils/util.js
index 2d10b1d..8ac1526 100644
--- a/src/utils/util.js
+++ b/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
+  }, [])
+}
\ No newline at end of file
diff --git a/src/views/stationOperation/components/MapMarker.vue b/src/views/stationOperation/components/MapMarker.vue
index 311a629..72ed333 100644
--- a/src/views/stationOperation/components/MapMarker.vue
+++ b/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.map.addOverlay(this.getMarker(eventItem))
+      this.list.forEach(stationInfo => {
+        this.map.addOverlay(this.getMarker(stationInfo))
       })
     },
 
@@ -83,9 +83,14 @@ export default {
     },
 
     initRipples() {
-      this.list.forEach(eventItem => {
-        this.map.addOverlay(this.getRipple(eventItem))
-      })
+      this.list
+        .filter(
+          stationInfo =>
+            stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
+        )
+        .forEach(stationInfo => {
+          this.map.addOverlay(this.getRipple(stationInfo))
+        })
     },
 
     getRipple({ lon, lat, stationId }) {
@@ -109,8 +114,7 @@ export default {
       this.popupOverlay = new Overlay({
         element: this.$refs.mapPopupRef,
         positioning: 'top-center',
-        id: POPUP_OVERLAY_ID,
-        offset: [0, 27]
+        id: POPUP_OVERLAY_ID
       })
       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;
-      height: 12px;
-      border: 1px solid rgba(2, 26, 29, 0.9);
-      background: rgba(2, 26, 29, 0.9);
-      transform: translateX(-50%) rotate(45deg) skew(14deg, 14deg);
-      border-bottom: 0;
-      border-right: 0;
+      transform: translateX(-50%);
+      border: 6px solid transparent;
+      border-bottom-color: rgba(2, 26, 29, 0.9);
+      border-bottom-width: 12px;
     }
 
     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%);
-    animation: rippleEffect @duration linear @delay 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 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%);
-    animation: rippleEffect @duration linear @delay * 2 infinite;
+    transform: scale(0);
+    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;
   }
 }
 
diff --git a/src/views/stationOperation/components/MapPane.vue b/src/views/stationOperation/components/MapPane.vue
index 06b4513..0f21742 100644
--- a/src/views/stationOperation/components/MapPane.vue
+++ b/src/views/stationOperation/components/MapPane.vue
@@ -99,22 +99,35 @@
         </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">
-              <img :src="stateItem.icon" alt="" />
-              <span>{{ stateItem.title }}</span>
+            <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>
           <!-- 数据质量结束 -->
@@ -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()
-          const source = this.circleLayer.getSource()
-          source.clear()
+          this.emitFilter()
           break
       }
     },
 
     // 根据 Filter 筛选Marker
-    emitTypeFilter() {
-      this.$emit(
-        'changeMarkerByType',
-        this.filterList.filter(item => item.checked).map(item => item.type)
-      )
+    emitFilter() {
+      const filterType = this.filterList.filter(item => item.checked).map(item => item.type)
+      const filterDataQuality = this.dataQualityList.filter(item => item.checked).map(item => item.title)
+
+      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,39 +532,48 @@ export default {
           stationIds
         })
         if (success) {
-          const data = table.flat()
-          data.forEach((item, index) => {
-            item.radius = parseFloat(item.radius).toFixed(3)
-            item.index = index
-          })
-          this.dataSource = data // 设置Infomation表格内容
+          const source = this.circleLayer.getSource()
+          source.clear() // 清理图层
 
-          this.stationList = [] // 台站列表
-          markerList.forEach(markerItem => {
-            // 返回的数据类型不符合要求，根据stationId判断是否是台站，增加台站类型和转换字段，以便进行marker的绘制
-            if (markerItem.stationId) {
-              // 是台站
-              markerItem.stationType = MarkerType.ImsRnStationG
-              this.stationList.push(markerItem)
-            } else {
-              // 是核设施
-              markerItem.stationType = MarkerType.NuclearFacility
-              markerItem.lon = markerItem.longitude
-              markerItem.lat = markerItem.latitude
-              markerItem.stationId = markerItem.facilityId
+          if (table) {
+            const data = table.flat()
+            data.forEach((item, index) => {
+              item.radius = parseFloat(item.radius).toFixed(3)
+              item.index = index
+            })
+            this.dataSource = data // 设置Infomation表格内容
+
+            this.stationList = [] // 台站列表
+            markerList.forEach(markerItem => {
+              // 返回的数据类型不符合要求，根据stationId判断是否是台站，增加台站类型和转换字段，以便进行marker的绘制
+              if (markerItem.stationId) {
+                // 是台站
+                markerItem.stationType = MarkerType.ImsRnStationG
+                this.stationList.push(markerItem)
+              } else {
+                // 是核设施
+                markerItem.stationType = MarkerType.NuclearFacility
+                markerItem.lon = markerItem.longitude
+                markerItem.lat = markerItem.latitude
+                markerItem.stationId = markerItem.facilityId
+              }
+            })
+
+            if (markerList.length) {
+              // 自动移动到搜出来的第一个台站那
+              const firstMarker = markerList[0]
+              this.$parent.panTo([firstMarker.lon, firstMarker.lat])
             }
-          })
 
-          if (markerList.length) {
-            // 自动移动到搜出来的第一个台站那
-            const firstMarker = markerList[0]
-            this.$parent.panTo([firstMarker.lon, firstMarker.lat])
+            this.markerList = markerList
+            this.emitStationChange()
+
+            this.drawCircle()
+          } else {
+            this.dataSource = []
+            this.markerList = []
+            this.emitStationChange()
           }
-
-          this.markerList = markerList
-          this.emitStationChange()
-
-          this.drawCircle()
         } 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;
diff --git a/src/views/stationOperation/components/filterImage.js b/src/views/stationOperation/components/filterImage.js
deleted file mode 100644
index eb00392..0000000
--- a/src/views/stationOperation/components/filterImage.js
+++ /dev/null
@@ -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
-}
\ No newline at end of file
diff --git a/src/views/stationOperation/components/markerEnum.js b/src/views/stationOperation/components/markerEnum.js
index e8731c6..c1dc6f2 100644
--- a/src/views/stationOperation/components/markerEnum.js
+++ b/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
-}
\ No newline at end of file
+    [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
+}
diff --git a/src/views/stationOperation/index.vue b/src/views/stationOperation/index.vue
index 79d7a8c..1d8957e 100644
--- a/src/views/stationOperation/index.vue
+++ b/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) {
-      this.markerList = this.originalDataList.filter(item => typeList.includes(item.stationType))
+    onFilterMarker({ filterType, filterDataQuality }) {
+      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 {