feat: 增加地图右侧面板，给弹窗增加全屏功能

src/components/CustomModal/index.vue

@@ -1,5 +1,20 @@
 <template>
-  <a-modal v-bind="$attrs" v-model="visible" :title="title" :footer="null">
+  <a-modal
+    :class="'custom-modal' + (innerFullscreen ? ' fullscreen' : '')"
+    v-bind="_attrs"
+    v-model="visible"
+    :footer="null"
+  >
+    <img slot="closeIcon" src="@/assets/images/global/close.png" />
+    <div slot="title">
+      <div class="custom-modal-title">
+        <span>{{ title }}</span>
+        <template v-if="enableFullScreen">
+          <img  v-if="innerFullscreen" src="@/assets/images/global/quit-fullscreen.png" @click="innerFullscreen = false" />
+          <img  v-else src="@/assets/images/global/fullscreen.png" @click="innerFullscreen = true" />
+        </template>
+      </div>
+    </div>
     <slot></slot>
     <a-space v-if="showFooter" class="operators" :size="20">
       <a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
@@ -22,12 +37,17 @@ export default {
     showFooter: {
       type: Boolean,
       default: true
+    },
+    enableFullScreen: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
       visible: this.value,
-      confirmLoading: false
+      confirmLoading: false,
+      innerFullscreen: false
     }
   },
   watch: {
@@ -36,6 +56,9 @@ export default {
     },
     value(val) {
       this.visible = val
+      if (val) {
+        this.innerFullscreen = false
+      }
     }
   },
   methods: {
@@ -57,6 +80,16 @@ export default {
     onCancel() {
       this.visible = false
     }
+  },
+  computed: {
+    _attrs() {
+      let attrs = { ...this.$attrs }
+      // 如果全屏就将宽度设为 100%
+      if (this.innerFullscreen) {
+        attrs['width'] = '100%'
+      }
+      return attrs
+    }
   }
 }
 </script>
@@ -68,4 +101,43 @@ export default {
     width: 92px;
   }
 }
+
+.custom-modal {
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    img {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+  }
+
+  ::v-deep {
+    .ant-modal-close-x {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ant-modal-header {
+      padding-right: 50px;
+    }
+  }
+
+  &.fullscreen {
+    ::v-deep {
+      .ant-modal {
+        top: 0;
+        height: 100vh;
+      }
+
+      .ant-modal-content {
+        height: 100vh;
+        padding-bottom: 0;
+      }
+    }
+  }
+}
 </style>

src/views/stationOperation/components/Map.vue

@@ -1,60 +1,71 @@
 <template>
   <div ref="mapContainerRef" class="map-container">
-    <slot></slot>
+    <template v-if="map">
+      <slot></slot>
+    </template>
   </div>
 </template>
 <script>
-import { Vector as VectorLayer } from 'ol/layer'
 import TileLayer from 'ol/layer/Tile'
 import Map from 'ol/Map'
-import VectorSource from 'ol/source/Vector'
 import XYZ from 'ol/source/XYZ'
 import View from 'ol/View'
-import Feature from 'ol/Feature'
-import { Fill, Icon, Stroke, Style, Text } from 'ol/style'
-import { Point } from 'ol/geom'
-import Overlay from 'ol/Overlay'
-import Data from './data.json'
-import * as MarkerImg from './markerImage'
-console.log('%c [ MarkerImg ]-19', 'font-size:13px; background:pink; color:#bf2c9f;', MarkerImg)
 
-const token = 'AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm'
 export default {
+  props: {
+    token: {
+      type: String,
+      required: true
+    },
+    zoom: {
+      type: Number,
+      default: 3
+    },
+    maxZoom: {
+      type: Number,
+      default: 16
+    },
+    minZoom: {
+      type: Number,
+      default: 3
+    },
+    center: {
+      type: Object,
+      default() {
+        return {
+          longitude: 116,
+          latitude: 40
+        }
+      }
+    }
+  },
   data() {
     return {
+      map: null,
       stationList: []
     }
   },
   mounted() {
     this.initMap()
-    this.initMapClick()
-    this.initMapPopup()
-    this.getStationList()
   },
   methods: {
-    // 获取站点列表
-    getStationList() {
-      this.stationList = Data.result
-      console.log('%c [ this.stationList ]-36', 'font-size:13px; background:pink; color:#bf2c9f;', this.stationList)
-      this.initMarkers()
-    },
-
     // 初始化地图
     initMap() {
+      const { longitude, latitude } = this.center
       const layers = [
         new TileLayer({
           source: new XYZ({
-            url: `https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${token}`
+            url: `https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${this.token}`
           })
         })
       ]
 
       const view = new View({
         projection: 'EPSG:4326', // 使用这个坐标系
-        center: [116.2, 39.56],
-        zoom: 4,
-        maxZoom: 16,
-        minZoom: 1
+        center: [longitude, latitude],
+        zoom: this.zoom,
+        maxZoom: this.maxZoom,
+        minZoom: this.minZoom
       })
 
       this.map = new Map({
@@ -65,99 +76,40 @@ export default {
       })
     },
 
-    // 初始化marker
-    initMarkers() {
-      const markerFeatures = []
-      this.stationList.forEach((eventItem, index) => {
-        markerFeatures.push(this.getMarker(eventItem))
-        markerFeatures.push(this.getCircle(eventItem))
-      })
-      const markerLayer = new VectorLayer({
-        source: new VectorSource({
-          features: markerFeatures
-        }),
-        properties: { name: 'eventMarker' }
-      })
-      this.map.addLayer(markerLayer)
+    /**
+     * 以下是工具方法
+     */
+    // 获取地图缩放级别
+    getZoom() {
+      return this.map.getView().getZoom()
     },
 
-    // 初始化地图点击事件
-    initMapClick() {
-      this.map.on('click', async evt => {
-        const feature = this.map.forEachFeatureAtPixel(evt.pixel, feature => {
-          return feature
-        })
-        this.currentCoords = feature.getGeometry().getCoordinates()
-        const stationInfo = feature && feature.values_ && feature.values_.stationInfo
-        if (stationInfo) {
-          await this.showMapPopup(stationInfo)
-        } else {
-          this.closeMapPopup()
-        }
-      })
-    },
-
-    // 初始化地图弹窗
-    initMapPopup() {
-      this.popupOverlay = new Overlay({
-        element: this.$refs.mapPopupRef,
-        autoPan: true,
-        autoPanAnimation: {
-          duration: 250
-        }
-      })
-      this.map.addOverlay(this.popupOverlay)
-    },
-
-    // 显示地图弹窗
-    async showMapPopup(stationInfo) {
-      this.popupOverlay.setPosition([stationInfo.lon, stationInfo.lat])
-      this.currMapClickEventItem = stationInfo // 填充基本信息
-      if (!stationInfo.appEventDetailList) {
-        this.isGettingPopupDetail = true
-        const eventDetail = await this.getDetail(stationInfo.orid)
-        stationInfo.appEventDetailList = eventDetail.appEventDetailList
-        this.isGettingPopupDetail = false
+    // 设置地图缩放级别
+    setZoom(zoom) {
+      console.log('%c [ zoom ]-89', 'font-size:13px; background:pink; color:#bf2c9f;', zoom)
+      if (zoom < this.minZoom) {
+        zoom = this.minZoom
       }
+      if (zoom > this.maxZoom) {
+        zoom = this.maxZoom
+      }
+      this.map.getView().animate({ zoom })
     },
 
-    //关闭地图弹窗
-    closeMapPopup() {
-      this.popupOverlay.setPosition(null)
-      this.removeOtherLayers()
+    getMapInstance() {
+      return this.map
     },
 
-    // 获取marker图标
-    getMarker(stationInfo) {
-      const { lon, lat } = stationInfo
-      const markerFeature = new Feature({
-        geometry: new Point([lon, lat]),
-        stationInfo
-      })
-
-      markerFeature.setStyle(this.getMarkerStyle(stationInfo))
-      return markerFeature
+    // 获取地图中心点
+    getCenter() {
+      return this.map.getView().getCenter()
     },
 
-    // 获取circle
-    getCircle(stationInfo) {
-      const { lon, lat } = stationInfo
-      const markerFeature = new Feature({
-        geometry: new Point([lon, lat]),
-        stationInfo
-      })
-
-      markerFeature.setStyle(this.getMarkerStyle(stationInfo))
-      return markerFeature
-    },
-    // 获取marker颜色
-    getMarkerStyle() {
-      const src = MarkerImg.Car
-      return new Style({
-        image: new Icon({
-          src,
-          scale: 0.8
-        })
+    // 平移到某个位置
+    panTo(center, duration = 1000) {
+      return this.map.getView().animate({
+        center,
+        duration
       })
     }
   }
@@ -166,5 +118,6 @@ export default {
 <style lang="less" scoped>
 .map-container {
   height: 100%;
+  position: relative;
 }
 </style>

src/views/stationOperation/components/MapMarker.vue

@@ -0,0 +1,125 @@
+<template>
+  <div ref="mapPopupRef">
+    这是弹窗
+  </div>
+</template>
+<script>
+import { Vector as VectorLayer } from 'ol/layer'
+import VectorSource from 'ol/source/Vector'
+import Feature from 'ol/Feature'
+import { Fill, Icon, Stroke, Style, Text } from 'ol/style'
+import { Point } from 'ol/geom'
+import Overlay from 'ol/Overlay'
+
+import MarkerImg from './markerImage'
+
+export default {
+  props: {
+    list: {
+      type: Array,
+      required: true
+    }
+  },
+  mounted() {
+    this.map = this.$parent.getMapInstance()
+    this.initMarkers()
+    this.initMapClick()
+    this.initMapPopup()
+  },
+  methods: {
+    // 初始化marker
+    initMarkers() {
+      const markerFeatures = []
+      this.list.forEach((eventItem, index) => {
+        markerFeatures.push(this.getMarker(eventItem))
+        markerFeatures.push(this.getCircle(eventItem))
+      })
+      const markerLayer = new VectorLayer({
+        source: new VectorSource({
+          features: markerFeatures
+        }),
+        properties: { name: 'eventMarker' }
+      })
+      this.map.addLayer(markerLayer)
+    },
+
+    // 初始化地图点击事件
+    initMapClick() {
+      this.map.on('click', async evt => {
+        const feature = this.map.forEachFeatureAtPixel(evt.pixel, feature => {
+          return feature
+        })
+        const stationInfo = feature && feature.values_ && feature.values_.stationInfo
+        if (stationInfo) {
+          this.showMapPopup(stationInfo)
+        } else {
+          this.closeMapPopup()
+        }
+      })
+    },
+
+    // 初始化地图弹窗
+    initMapPopup() {
+      this.popupOverlay = new Overlay({
+        element: this.$refs.mapPopupRef,
+        autoPan: true,
+        autoPanAnimation: {
+          duration: 250
+        }
+      })
+      this.map.addOverlay(this.popupOverlay)
+    },
+
+    // 显示地图弹窗
+    showMapPopup(stationInfo) {
+      this.popupOverlay.setPosition([stationInfo.lon, stationInfo.lat])
+      this.currMapClickEventItem = stationInfo // 填充基本信息
+      if (!stationInfo.appEventDetailList) {
+        this.isGettingPopupDetail = true
+        stationInfo.appEventDetailList = stationInfo.appEventDetailList
+        this.isGettingPopupDetail = false
+      }
+    },
+
+    //关闭地图弹窗
+    closeMapPopup() {
+      this.popupOverlay.setPosition(null)
+    },
+
+    // 获取marker图标
+    getMarker(stationInfo) {
+      const { lon, lat } = stationInfo
+      const markerFeature = new Feature({
+        geometry: new Point([lon, lat]),
+        stationInfo
+      })
+
+      markerFeature.setStyle(this.getMarkerStyle(stationInfo))
+      return markerFeature
+    },
+
+    // 获取circle
+    getCircle(stationInfo) {
+      const { lon, lat } = stationInfo
+      const markerFeature = new Feature({
+        geometry: new Point([lon, lat]),
+        stationInfo
+      })
+
+      markerFeature.setStyle(this.getMarkerStyle(stationInfo))
+      return markerFeature
+    },
+    // 获取marker颜色
+    getMarkerStyle() {
+      const src = MarkerImg.NuclearFacility
+      return new Style({
+        image: new Icon({
+          src,
+          scale: 0.8
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped></style>

src/views/stationOperation/components/MapPane.vue

@@ -0,0 +1,659 @@
+<template>
+  <div :class="'map-pane' + (active == 1 ? ' is-station' : '')">
+    <!-- 操作栏开始 -->
+    <div class="map-pane-operators">
+      <div>
+        <img
+          v-if="isFullScreen"
+          src="@/assets/images/station-operation/full-screen-active.png"
+          @click="handleExitFullScreen"
+        />
+        <img v-else src="@/assets/images/station-operation/full-screen.png" @click="handleFullScreen" />
+      </div>
+
+      <div class="map-pane-operators-main-operator">
+        <div>
+          <img v-if="analyzeModalVisible" src="@/assets/images/station-operation/analyze-active.png" />
+          <img v-else src="@/assets/images/station-operation/analyze.png" @click="handleOpenAnalyzeModal" />
+        </div>
+        <div>
+          <img v-if="active == 1" src="@/assets/images/station-operation/station-operate-active.png" />
+          <img v-else src="@/assets/images/station-operation/station-operate.png" @click="active = 1" />
+        </div>
+        <div>
+          <img v-if="active == 2" src="@/assets/images/station-operation/filter-station-active.png" />
+          <img v-else src="@/assets/images/station-operation/filter-station.png" @click="active = 2" />
+        </div>
+      </div>
+
+      <div class="map-pane-operators-zoom">
+        <div class="map-pane-operators-zoom-map-plus" @click="handlePlus"></div>
+        <div class="map-pane-operators-zoom-map-minus" @click="handleMinus"></div>
+      </div>
+    </div>
+    <!-- 操作栏结束 -->
+
+    <!-- 主体部分开始 -->
+    <div class="map-pane-content">
+      <!-- 站点操作 -->
+      <div class="station-operation" v-show="active == 1">
+        <div class="station-operation-stations">
+          <div class="map-pane-content-header">
+            Stations
+          </div>
+          <div class="map-pane-content-main">
+            <div class="station-operation-stations-selection">
+              <a-space>
+                <a-button class="select-all" type="primary" @click="handleSelectAll">Select All</a-button>
+                <a-button class="clear-selection" type="primary" @click="handleClearSelection"
+                  >Clear Selection</a-button
+                >
+              </a-space>
+            </div>
+            <a-divider style="background-color: #0a544e; margin: 10px 0 0;"></a-divider>
+
+            <!-- 站点选择树 -->
+            <div class="station-list-tree">
+              <a-tree
+                v-model="checkedKeys"
+                :selectedKeys="[]"
+                :tree-data="treeData"
+                checkable
+                @select="onTreeSelect"
+              ></a-tree>
+            </div>
+            <!-- 站点选择树 结束 -->
+          </div>
+        </div>
+        <div class="station-operation-infomation">
+          <div class="map-pane-content-header">
+            Infomation
+          </div>
+          <div class="map-pane-content-main">
+            <div class="station-operation-infomation-content">
+              <p class="radius-title">Radius</p>
+              <div class="radius-search">
+                <a-input suffix="KM"></a-input>
+                <a-button type="primary">
+                  Search
+                </a-button>
+              </div>
+              <div class="radius-table">
+                <a-table
+                  :scroll="{ y: 298 }"
+                  :columns="columns"
+                  :data-source="dataSource"
+                  rowKey="id"
+                  :pagination="false"
+                ></a-table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 站点操作结束 -->
+
+      <!-- 站点筛选 -->
+      <div class="station-filter" v-show="active == 2">
+        <div class="map-pane-content-header">
+          Filter
+        </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-main">
+                <div>
+                  <img :src="filterItem.icon" />
+                </div>
+                <span>{{ filterItem.title }}</span>
+              </div>
+              <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-state-list">
+            <div class="station-state-list-item" v-for="(stateItem, index) in stateList" :key="index">
+              <img :src="stateItem.icon" alt="" />
+              <span>{{ stateItem.title }}</span>
+            </div>
+          </div>
+          <!-- 站点装填类型结束 -->
+        </div>
+      </div>
+      <!-- 站点筛选结束 -->
+    </div>
+    <!-- 主体部分结束 -->
+
+    <!-- 分析弹窗开始 -->
+    <custom-modal v-model="analyzeModalVisible" enableFullScreen title="Data Recevice status Monitoring" width="64%" :showFooter="false">
+      分析弹窗内容
+    </custom-modal>
+    <!-- 分析弹窗结束 -->
+  </div>
+</template>
+<script>
+import CustomModal from '@/components/CustomModal/index.vue'
+import FilterImage from './filterImage'
+
+// Filter中的筛选列表
+const filterList = [
+  {
+    title: 'IMS RN Station(P)',
+    icon: FilterImage.ImsRnStation,
+    checked: true
+  },
+  {
+    title: 'IMS RN Station(G)',
+    icon: FilterImage.ImsRnStation,
+    checked: true
+  },
+  {
+    title: 'Nuclear Facilities',
+    icon: FilterImage.NuclearFacility,
+    checked: true
+  },
+  {
+    title: 'Groud monitoring station',
+    icon: FilterImage.GroudMonitoringStation,
+    checked: true
+  },
+  {
+    title: 'car',
+    icon: FilterImage.Car,
+    checked: true
+  },
+  {
+    title: 'ship',
+    icon: FilterImage.Ship,
+    checked: true
+  }
+]
+
+// Filter中的状态列表
+const stateList = [
+  {
+    title: 'Excellent data quality',
+    icon: FilterImage.State1
+  },
+  {
+    title: 'Good data quality',
+    icon: FilterImage.State2
+  },
+  {
+    title: 'Poor data quality',
+    icon: FilterImage.State3
+  },
+  {
+    title: 'Signal interruption',
+    icon: FilterImage.State4
+  }
+]
+
+// infomation-radius 表格列
+const columns = [
+  {
+    title: 'nuclearfaclity',
+    dataIndex: 'nuclearfaclity',
+    width: 100,
+    ellipsis: true
+  },
+  {
+    title: 'station',
+    dataIndex: 'station'
+  },
+  {
+    title: 'distance',
+    dataIndex: 'distance'
+  }
+]
+
+const dataSource = [
+  {
+    id: 1,
+    nuclearfaclity: 'Cooper',
+    station: 'USX74',
+    distance: 504.366
+  },
+  {
+    id: 11,
+    nuclearfaclity: 'Davis Besse-1',
+    station: 'USX74',
+    distance: 504.366
+  },
+  {
+    id: 2,
+    nuclearfaclity: 'Cooper',
+    station: 'USX74',
+    distance: 504.366
+  },
+  {
+    id: 3,
+    nuclearfaclity: 'Davis Besse-1',
+    station: 'USX74',
+    distance: 504.366
+  },
+  {
+    id: 4,
+    nuclearfaclity: 'Cooper',
+    station: 'USX74',
+    distance: 504.366
+  },
+  {
+    id: 5,
+    nuclearfaclity: 'Davis Besse-1',
+    station: 'USX74',
+    distance: 504.366
+  },
+  {
+    id: 6,
+    nuclearfaclity: 'Cooper',
+    station: 'USX74',
+    distance: 504.366
+  },
+  {
+    id: 7,
+    nuclearfaclity: 'Davis Besse-1',
+    station: 'USX74',
+    distance: 504.366
+  },
+  {
+    id: 8,
+    nuclearfaclity: 'Cooper',
+    station: 'USX74',
+    distance: 504.366
+  },
+  {
+    id: 9,
+    nuclearfaclity: 'Davis Besse-1',
+    station: 'USX74',
+    distance: 504.366
+  },
+  {
+    id: 10,
+    nuclearfaclity: 'Cooper',
+    station: 'USX74',
+    distance: 504.366
+  }
+]
+
+export default {
+  props: {
+    panMovePix: {
+      type: Number,
+      default: 500
+    },
+
+    stationList: {
+      type: Array
+    }
+  },
+  components: {
+    CustomModal
+  },
+  data() {
+    this.columns = columns
+    return {
+      active: 1,
+      isFullScreen: false, // 是否处于全屏状态
+      analyzeModalVisible: false, // 分析弹窗是否可见
+
+      checkedKeys: [], // 选中的树节点
+
+      filterList, // 筛选类型列表
+      stateList, // 状态类型列表
+
+      dataSource: dataSource // Infomation Radius 表格数据源
+    }
+  },
+  created() {
+    this.initParentProps()
+  },
+  methods: {
+    initParentProps() {
+      const { getZoom, setZoom, maxZoom, minZoom } = this.$parent
+      this.getZoom = getZoom
+      this.setZoom = setZoom
+      this.maxZoom = maxZoom
+      this.minZoom = minZoom
+    },
+
+    handleFullScreen() {
+      this.isFullScreen = true
+    },
+
+    handleExitFullScreen() {
+      this.isFullScreen = false
+    },
+
+    // Stations 树选中
+    onTreeSelect(_, { node }) {
+      const selectedKey = node.eventKey
+      const parentKey = node.$parent.eventKey
+
+      const findIndex = this.checkedKeys.findIndex(key => key == selectedKey)
+
+      if (parentKey) {
+        // 选中的是子级节点
+        if (-1 == findIndex) {
+          // 选中了
+          this.checkedKeys.push(selectedKey)
+
+          const parentNode = this.treeData.find(tree => tree.key == parentKey) // 找到树列表中的父节点
+          const childrenKeys = parentNode.children.map(child => child.key)
+          if (childrenKeys.every(key => this.checkedKeys.includes(key))) {
+            // 如果子列表每一个都能在选中的列表中找到，则是全选
+            this.checkedKeys.push(parentKey)
+          }
+        } else {
+          // 取消了
+          this.checkedKeys.splice(findIndex, 1)
+
+          const findParent = this.checkedKeys.findIndex(key => key == parentKey)
+          if (-1 !== findParent) {
+            this.checkedKeys.splice(findParent, 1)
+          }
+        }
+      } else {
+        //选中的是父级节点
+        const parentNode = this.treeData.find(tree => tree.key == selectedKey)
+        const childrenKeys = parentNode.children.map(child => child.key)
+
+        const findParent = this.checkedKeys.findIndex(key => key == selectedKey)
+        if (-1 == findParent) {
+          // 未选中父节点,则将子节点都选中
+          this.checkedKeys.push(selectedKey)
+          this.checkedKeys.push(...childrenKeys)
+        } else {
+          // 已经选中了父节点,则将子节点都取消选中
+          this.checkedKeys = this.checkedKeys.filter(key => key !== selectedKey && !childrenKeys.includes(key))
+        }
+      }
+    },
+
+    // 选中全部
+    handleSelectAll() {
+      this.checkedKeys = this.treeData.reduce((prev, curr) => {
+        prev.push(curr.key)
+        prev.push(...curr.children.map(child => child.key))
+        return prev
+      }, [])
+    },
+
+    // 反选全部
+    handleClearSelection() {
+      this.checkedKeys = []
+    },
+
+    // 打开分析弹窗
+    handleOpenAnalyzeModal() {
+      this.analyzeModalVisible = true
+    },
+
+    // 地图放大
+    handlePlus() {
+      const zoom = this.getZoom()
+      if (zoom < this.maxZoom) {
+        this.setZoom(zoom + 1)
+      }
+    },
+
+    // 地图缩小
+    handleMinus() {
+      const zoom = this.getZoom()
+      if (zoom > this.minZoom) {
+        this.setZoom(zoom - 1)
+      }
+    }
+  },
+  computed: {
+    treeData() {
+      const set = new Set(this.stationList.map(item => item.countryCode))
+      return Array.from(set).map((countryCode, index) => {
+        return {
+          title: countryCode,
+          key: index.toString(),
+          children: this.stationList
+            .filter(item => item.countryCode == countryCode)
+            .map(item => ({ title: item.stationCode, key: item.stationId.toString(), children: [] }))
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.map-pane {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  max-height: calc(100% - 20px);
+  z-index: 1;
+  display: flex;
+  gap: 15px;
+
+  &.is-station {
+    height: calc(100% - 20px);
+  }
+
+  // 操作栏
+  &-operators {
+    user-select: none;
+    img {
+      cursor: pointer;
+    }
+    &-main-operator {
+      margin-top: 5px;
+      div {
+        width: 30px;
+        height: 30px;
+        &:not(:first-child) {
+          margin-top: -1px;
+        }
+      }
+    }
+
+    &-zoom {
+      margin-top: 10px;
+      div {
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+      }
+
+      &-map-plus {
+        background: url(~@/assets/images/station-operation/map-plus.png) center no-repeat;
+        background-size: 100% 100%;
+
+        &:active {
+          background-image: url(~@/assets/images/station-operation/map-plus-active.png);
+        }
+      }
+
+      &-map-minus {
+        margin-top: -1px;
+        background: url(~@/assets/images/station-operation/map-minus.png) center no-repeat;
+        background-size: 100% 100%;
+
+        &:active {
+          background-image: url(~@/assets/images/station-operation/map-minus-active.png);
+        }
+      }
+    }
+  }
+
+  // 主体部分
+  &-content {
+    width: 285px;
+    overflow: auto;
+    border: 1px solid #0a544e;
+
+    .map-pane-content-header {
+      padding-left: 20px;
+      height: 40px;
+      line-height: 40px;
+      background-color: #03353f;
+      letter-spacing: 2px;
+      font-size: 16px;
+      color: #0cebc9;
+      font-family: Arial;
+    }
+
+    .map-pane-content-main {
+      background-color: rgba(2, 26, 29, 0.9);
+      padding: 10px;
+      height: calc(100% - 40px);
+      overflow: auto;
+    }
+
+    // 站点操作面板
+    .station-operation {
+      height: 100%;
+      &-stations {
+        height: calc(100% - 443px);
+        overflow: hidden;
+
+        &-selection {
+          height: 24px;
+          margin-bottom: 10px;
+
+          .ant-space {
+            height: 100%;
+
+            .select-all,
+            .clear-selection {
+              height: 100%;
+              padding: 0 6px;
+              ::v-deep {
+                span {
+                  font-size: 14px;
+                }
+              }
+            }
+          }
+        }
+
+        .station-list-tree {
+          height: calc(100% - 35px);
+          overflow: auto;
+        }
+      }
+
+      &-infomation {
+        &-content {
+          height: 383px;
+
+          .radius {
+            &-title {
+              margin-bottom: 9px;
+              font-size: 14px;
+              line-height: 11px;
+              color: #5b9cba;
+            }
+
+            &-search {
+              display: flex;
+              height: 24px;
+
+              ::v-deep {
+                .ant-input {
+                  width: 183px;
+                  height: 100%;
+                  padding-left: 5px;
+                  padding-right: 36px;
+                }
+                .ant-input-suffix {
+                  color: #5b9cba;
+                }
+              }
+
+              .ant-btn {
+                width: 70px;
+                height: 100%;
+                margin-left: 10px;
+                padding: 0;
+                flex-shrink: 0;
+
+                ::v-deep {
+                  span {
+                    font-size: 14px;
+                  }
+                }
+              }
+            }
+
+            &-table {
+              margin-top: 10px;
+              width: 264px;
+
+              ::v-deep {
+                .ant-table {
+                  font-size: 14px;
+                }
+
+                .ant-table-thead > tr th {
+                  padding-top: 2px !important;
+                  padding-bottom: 2px !important;
+                }
+
+                .ant-table-tbody .ant-table-row td {
+                  padding: 6px !important;
+                }
+
+                .ant-table-placeholder {
+                  background-color: transparent;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // 站点筛选面板
+    .station-filter {
+      &-item {
+        width: 260px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &:nth-child(3) {
+          img {
+            margin-left: -10px;
+          }
+        }
+
+        &:nth-child(4) {
+          img {
+            margin-left: -12px;
+          }
+        }
+
+        &-main {
+          display: flex;
+          align-items: center;
+          > div {
+            width: 39px;
+          }
+        }
+      }
+
+      .station-state-list {
+        &-item {
+          margin-left: 9px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+
+          span {
+            margin-left: 12px;
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/stationOperation/components/data.json

@@ -1,850 +0,0 @@
-{
-  "success": true,
-  "message": "",
-  "code": 200,
-  "result": [
-    {
-      "evid": 11827659,
-      "orid": 11827659,
-      "magnitude": 3.38,
-      "magType": "ml",
-      "time": "2023-06-08 16:52:23",
-      "region": "NORTH KOREA",
-      "lat": 38.98,
-      "lon": 128.44,
-      "ms": -999.0,
-      "ml": 3.38,
-      "mb": 4.01,
-      "depth": 0.0,
-      "arsTable": 0,
-      "arsType": 0,
-      "arsTypeValue": "已告警",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 17:16:01",
-      "sourceAudit": 0,
-      "discardList": []
-    },
-    {
-      "evid": 11827486,
-      "orid": 11827486,
-      "magnitude": 3.29,
-      "magType": "ml",
-      "time": "2023-06-08 15:43:29",
-      "region": "NORTH KOREA",
-      "lat": 38.55,
-      "lon": 126.69,
-      "ms": -999.0,
-      "ml": 3.29,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 15:52:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11827486, "reason": "Invalid detections", "auth": "wangxl", "lddate": "2023-06-08 15:58:25" }
-      ]
-    },
-    {
-      "evid": 11827386,
-      "orid": 11827449,
-      "magnitude": 3.1,
-      "magType": "ml",
-      "time": "2023-06-08 14:00:07",
-      "region": "NORTHEASTERN CHINA",
-      "lat": 45.96,
-      "lon": 128.39,
-      "ms": -999.0,
-      "ml": 3.1,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 1,
-      "arsType": 1,
-      "arsTypeValue": "真事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 15:34:00",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11827339,
-      "orid": 11827432,
-      "magnitude": 1.4,
-      "magType": "ml",
-      "time": "2023-06-08 13:38:07",
-      "region": "CENTRAL CALIFORNIA",
-      "lat": 35.47,
-      "lon": -118.04,
-      "ms": -999.0,
-      "ml": 1.4,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 1,
-      "arsType": 1,
-      "arsTypeValue": "真事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 15:30:00",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11826874,
-      "orid": 11826874,
-      "magnitude": 4.52,
-      "magType": "ml",
-      "time": "2023-06-08 10:55:39",
-      "region": "NORTH KOREA",
-      "lat": 42.19,
-      "lon": 129.39,
-      "ms": -999.0,
-      "ml": 4.52,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 11:06:01",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11826521,
-      "orid": 11826521,
-      "magnitude": 3.34,
-      "magType": "ml",
-      "time": "2023-06-08 07:39:14",
-      "region": "NORTH KOREA",
-      "lat": 41.39,
-      "lon": 126.65,
-      "ms": -999.0,
-      "ml": 3.34,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 0,
-      "arsType": 0,
-      "arsTypeValue": "已告警",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 07:50:00",
-      "sourceAudit": 0,
-      "discardList": []
-    },
-    {
-      "evid": 11826346,
-      "orid": 11826655,
-      "magnitude": 2.42,
-      "magType": "ml",
-      "time": "2023-06-08 05:22:52",
-      "region": "NEVADA",
-      "lat": 40.01,
-      "lon": -115.65,
-      "ms": -999.0,
-      "ml": 2.42,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 2,
-      "arsType": 1,
-      "arsTypeValue": "真事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 09:06:00",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11826165,
-      "orid": 11826169,
-      "magnitude": 1.76,
-      "magType": "ml",
-      "time": "2023-06-08 05:05:17",
-      "region": "NEVADA",
-      "lat": 39.97,
-      "lon": -114.45,
-      "ms": -999.0,
-      "ml": 1.76,
-      "mb": 5.8,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 05:26:00",
-      "sourceAudit": 1,
-      "discardList": [{ "evid": 11826165, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
-    },
-    {
-      "evid": 11826052,
-      "orid": 11826056,
-      "magnitude": 2.99,
-      "magType": "ml",
-      "time": "2023-06-08 04:32:29",
-      "region": "NORTH KOREA",
-      "lat": 41.3,
-      "lon": 129.24,
-      "ms": -999.0,
-      "ml": 2.99,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 04:42:00",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11825774,
-      "orid": 11825774,
-      "magnitude": 4.88,
-      "magType": "ml",
-      "time": "2023-06-08 02:06:57",
-      "region": "NORTH KOREA",
-      "lat": 40.82,
-      "lon": 129.76,
-      "ms": -999.0,
-      "ml": 4.88,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 02:22:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11825774, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-08 08:39:41" }
-      ]
-    },
-    {
-      "evid": 11825682,
-      "orid": 11825682,
-      "magnitude": 3.3,
-      "magType": "mb",
-      "time": "2023-06-08 01:27:48",
-      "region": "NORTH KOREA",
-      "lat": 39.69,
-      "lon": 125.5,
-      "ms": -999.0,
-      "ml": -999.0,
-      "mb": 3.3,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 01:52:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11825682, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-08 08:39:25" }
-      ]
-    },
-    {
-      "evid": 11825658,
-      "orid": 11825658,
-      "magnitude": 3.61,
-      "magType": "ml",
-      "time": "2023-06-08 01:07:34",
-      "region": "NORTHERN XINJIANG, CHINA",
-      "lat": 42.51,
-      "lon": 87.99,
-      "ms": -999.0,
-      "ml": 3.61,
-      "mb": 4.64,
-      "depth": 178.82,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 01:38:00",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11826485,
-      "orid": 11826644,
-      "magnitude": 5.32,
-      "magType": "ms",
-      "time": "2023-06-08 01:04:53",
-      "region": "JAWA, INDONESIA",
-      "lat": -8.85,
-      "lon": 110.56,
-      "ms": 5.32,
-      "ml": -999.0,
-      "mb": 5.48,
-      "depth": 0.0,
-      "arsTable": 2,
-      "arsType": 1,
-      "arsTypeValue": "真事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 09:30:01",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11825495,
-      "orid": 11825495,
-      "magnitude": 3.19,
-      "magType": "ml",
-      "time": "2023-06-08 00:20:34",
-      "region": "NORTH KOREA",
-      "lat": 38.62,
-      "lon": 127.85,
-      "ms": -999.0,
-      "ml": 3.19,
-      "mb": 3.75,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 00:36:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11825495, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-08 08:34:30" }
-      ]
-    },
-    {
-      "evid": 11826286,
-      "orid": 11826641,
-      "magnitude": 0.2,
-      "magType": "ml",
-      "time": "2023-06-07 23:54:40",
-      "region": "CALIFORNIA-NEVADA BORDER REGION",
-      "lat": 37.47,
-      "lon": -118.06,
-      "ms": -999.0,
-      "ml": 0.2,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 2,
-      "arsType": 1,
-      "arsTypeValue": "真事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 09:30:01",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11825404,
-      "orid": 11826640,
-      "magnitude": 2.96,
-      "magType": "ml",
-      "time": "2023-06-07 23:31:23",
-      "region": "NEVADA",
-      "lat": 39.52,
-      "lon": -116.0,
-      "ms": -999.0,
-      "ml": 2.96,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 2,
-      "arsType": 1,
-      "arsTypeValue": "真事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 09:30:01",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11825371,
-      "orid": 11825371,
-      "magnitude": 3.62,
-      "magType": "ml",
-      "time": "2023-06-07 23:17:51",
-      "region": "NORTH KOREA",
-      "lat": 40.09,
-      "lon": 129.94,
-      "ms": -999.0,
-      "ml": 3.62,
-      "mb": 3.71,
-      "depth": 0.0,
-      "arsTable": 0,
-      "arsType": 0,
-      "arsTypeValue": "已告警",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 23:40:00",
-      "sourceAudit": 0,
-      "discardList": []
-    },
-    {
-      "evid": 11825298,
-      "orid": 11825298,
-      "magnitude": 3.73,
-      "magType": "mb",
-      "time": "2023-06-07 22:50:31",
-      "region": "TURKMENISTAN-IRAN BORDER REGION",
-      "lat": 36.98,
-      "lon": 59.79,
-      "ms": -999.0,
-      "ml": -999.0,
-      "mb": 3.73,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 23:06:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11825298, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-08 08:30:03" }
-      ]
-    },
-    {
-      "evid": 11825252,
-      "orid": 11825252,
-      "magnitude": 2.71,
-      "magType": "ml",
-      "time": "2023-06-07 22:29:15",
-      "region": "NORTH KOREA",
-      "lat": 40.04,
-      "lon": 129.51,
-      "ms": -999.0,
-      "ml": 2.71,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 22:42:00",
-      "sourceAudit": 1,
-      "discardList": [{ "evid": 11825252, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
-    },
-    {
-      "evid": 11824346,
-      "orid": 11825010,
-      "magnitude": 2.94,
-      "magType": "ml",
-      "time": "2023-06-07 14:30:03",
-      "region": "NORTH KOREA",
-      "lat": 40.81,
-      "lon": 128.67,
-      "ms": -999.0,
-      "ml": 2.94,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 2,
-      "arsType": 1,
-      "arsTypeValue": "真事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 09:30:00",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11824285,
-      "orid": 11824285,
-      "magnitude": 3.29,
-      "magType": "ml",
-      "time": "2023-06-07 13:45:20",
-      "region": "NORTH KOREA",
-      "lat": 40.81,
-      "lon": 127.57,
-      "ms": -999.0,
-      "ml": 3.29,
-      "mb": 3.08,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 14:00:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11824285, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-07 20:37:07" }
-      ]
-    },
-    {
-      "evid": 11823915,
-      "orid": 11823915,
-      "magnitude": 2.96,
-      "magType": "ml",
-      "time": "2023-06-07 10:24:54",
-      "region": "NORTH KOREA",
-      "lat": 41.4,
-      "lon": 126.29,
-      "ms": -999.0,
-      "ml": 2.96,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 10:42:00",
-      "sourceAudit": 1,
-      "discardList": [{ "evid": 11823915, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
-    },
-    {
-      "evid": 11823902,
-      "orid": 11824979,
-      "magnitude": 2.86,
-      "magType": "ml",
-      "time": "2023-06-07 10:13:03",
-      "region": "CALIFORNIA-NEVADA BORDER REGION",
-      "lat": 37.22,
-      "lon": -117.69,
-      "ms": -999.0,
-      "ml": 2.86,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 2,
-      "arsType": 1,
-      "arsTypeValue": "真事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-08 09:30:00",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11823741,
-      "orid": 11823741,
-      "magnitude": 1.73,
-      "magType": "ml",
-      "time": "2023-06-07 08:40:39",
-      "region": "UTAH",
-      "lat": 38.84,
-      "lon": -112.01,
-      "ms": -999.0,
-      "ml": 1.73,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 08:50:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11823741, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-07 09:05:18" }
-      ]
-    },
-    {
-      "evid": 11823738,
-      "orid": 11823738,
-      "magnitude": 4.83,
-      "magType": "ml",
-      "time": "2023-06-07 08:27:30",
-      "region": "NORTH KOREA",
-      "lat": 39.17,
-      "lon": 128.3,
-      "ms": -999.0,
-      "ml": 4.83,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 08:46:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11823738, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-07 09:05:01" }
-      ]
-    },
-    {
-      "evid": 11823458,
-      "orid": 11823458,
-      "magnitude": 3.38,
-      "magType": "ml",
-      "time": "2023-06-07 06:10:48",
-      "region": "SOUTHERN INDIA",
-      "lat": 23.81,
-      "lon": 79.03,
-      "ms": -999.0,
-      "ml": 3.38,
-      "mb": 4.13,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 06:26:00",
-      "sourceAudit": 1,
-      "discardList": [{ "evid": 11823458, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
-    },
-    {
-      "evid": 11823228,
-      "orid": 11823228,
-      "magnitude": 2.41,
-      "magType": "ml",
-      "time": "2023-06-07 04:17:32",
-      "region": "NORTH KOREA",
-      "lat": 40.16,
-      "lon": 128.32,
-      "ms": -999.0,
-      "ml": 2.41,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 04:26:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11823228, "reason": "Invalid detections", "auth": "liuzh", "lddate": "2023-06-07 08:16:54" }
-      ]
-    },
-    {
-      "evid": 11823233,
-      "orid": 11823233,
-      "magnitude": 4.3,
-      "magType": "mb",
-      "time": "2023-06-07 04:07:35",
-      "region": "SOUTHERN NEVADA",
-      "lat": 37.59,
-      "lon": -115.95,
-      "ms": -999.0,
-      "ml": -999.0,
-      "mb": 4.3,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 04:30:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11823233, "reason": "Invalid detections", "auth": "liuzh", "lddate": "2023-06-07 08:16:41" }
-      ]
-    },
-    {
-      "evid": 11823169,
-      "orid": 11823169,
-      "magnitude": 3.45,
-      "magType": "ml",
-      "time": "2023-06-07 03:30:34",
-      "region": "NORTH KOREA",
-      "lat": 39.65,
-      "lon": 127.38,
-      "ms": -999.0,
-      "ml": 3.45,
-      "mb": 3.78,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 03:50:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11823169, "reason": "Invalid association", "auth": "liuzh", "lddate": "2023-06-07 08:16:25" }
-      ]
-    },
-    {
-      "evid": 11823157,
-      "orid": 11823157,
-      "magnitude": 3.68,
-      "magType": "ml",
-      "time": "2023-06-07 03:28:49",
-      "region": "NORTH KOREA",
-      "lat": 41.96,
-      "lon": 127.28,
-      "ms": -999.0,
-      "ml": 3.68,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 03:40:00",
-      "sourceAudit": 1,
-      "discardList": [{ "evid": 11823157, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
-    },
-    {
-      "evid": 11823074,
-      "orid": 11823074,
-      "magnitude": 1.68,
-      "magType": "ml",
-      "time": "2023-06-07 02:38:21",
-      "region": "CALIFORNIA-NEVADA BORDER REGION",
-      "lat": 37.57,
-      "lon": -117.61,
-      "ms": -999.0,
-      "ml": 1.68,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 02:46:00",
-      "sourceAudit": 1,
-      "discardList": [{ "evid": 11823074, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
-    },
-    {
-      "evid": 11822776,
-      "orid": 11822776,
-      "magnitude": 3.51,
-      "magType": "ml",
-      "time": "2023-06-07 00:14:18",
-      "region": "NORTH KOREA",
-      "lat": 39.91,
-      "lon": 126.42,
-      "ms": -999.0,
-      "ml": 3.51,
-      "mb": 3.14,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 00:42:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11822776, "reason": "Invalid detections", "auth": "liuzh", "lddate": "2023-06-07 08:15:50" }
-      ]
-    },
-    {
-      "evid": 11822801,
-      "orid": 11822801,
-      "magnitude": 3.73,
-      "magType": "ml",
-      "time": "2023-06-06 23:55:13",
-      "region": "INDIA-BANGLADESH BORDER REGION",
-      "lat": 23.11,
-      "lon": 92.02,
-      "ms": -999.0,
-      "ml": 3.73,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-07 00:52:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11822801, "reason": "Invalid detections", "auth": "liuzh", "lddate": "2023-06-07 08:15:38" }
-      ]
-    },
-    {
-      "evid": 11822450,
-      "orid": 11822459,
-      "magnitude": 3.18,
-      "magType": "ml",
-      "time": "2023-06-06 21:24:45",
-      "region": "WESTERN IRAN",
-      "lat": 33.67,
-      "lon": 48.63,
-      "ms": -999.0,
-      "ml": 3.18,
-      "mb": 4.33,
-      "depth": 0.0,
-      "arsTable": 1,
-      "arsType": 1,
-      "arsTypeValue": "真事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-06 21:58:00",
-      "sourceAudit": 1,
-      "discardList": []
-    },
-    {
-      "evid": 11822445,
-      "orid": 11822446,
-      "magnitude": 3.25,
-      "magType": "ml",
-      "time": "2023-06-06 21:24:25",
-      "region": "IRAN-IRAQ BORDER REGION",
-      "lat": 30.61,
-      "lon": 48.2,
-      "ms": -999.0,
-      "ml": 3.25,
-      "mb": 4.57,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-06 21:46:00",
-      "sourceAudit": 1,
-      "discardList": [{ "evid": 11822445, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
-    },
-    {
-      "evid": 11822343,
-      "orid": 11822343,
-      "magnitude": 2.93,
-      "magType": "ml",
-      "time": "2023-06-06 20:12:42",
-      "region": "NORTH KOREA",
-      "lat": 40.29,
-      "lon": 129.07,
-      "ms": -999.0,
-      "ml": 2.93,
-      "mb": -999.0,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-06 20:26:00",
-      "sourceAudit": 1,
-      "discardList": [
-        { "evid": 11822343, "reason": "Invalid detections", "auth": "liuzh", "lddate": "2023-06-06 21:33:23" }
-      ]
-    },
-    {
-      "evid": 11822272,
-      "orid": 11822274,
-      "magnitude": 1.81,
-      "magType": "ml",
-      "time": "2023-06-06 19:14:05",
-      "region": "CALIFORNIA-NEVADA BORDER REGION",
-      "lat": 38.99,
-      "lon": -118.19,
-      "ms": -999.0,
-      "ml": 1.81,
-      "mb": 7.27,
-      "depth": 0.0,
-      "arsTable": 3,
-      "arsType": 2,
-      "arsTypeValue": "假事件",
-      "sourceType": "F",
-      "sourceTypeValue": "NDC快速产品",
-      "createTime": "2023-06-06 19:36:00",
-      "sourceAudit": 1,
-      "discardList": [{ "evid": 11822272, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
-    }
-  ],
-  "timestamp": 1686217634834
-}

src/views/stationOperation/components/filterImage.js

@@ -0,0 +1,23 @@
+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/markerImage.js

@@ -4,7 +4,7 @@ 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'
 
-export {
+export default {
     Car,
     GroudMonitoringStation,
     ImsRnStation,

src/views/stationOperation/index.vue

@@ -19,6 +19,8 @@
                 <span></span>
                 <span></span>
               </div>
+
+              <!-- 头部操作栏 -->
               <div class="title-operator">
                 <a-popover v-model="searchVisible" trigger="click" placement="bottom">
                   <div @click.stop="searchVisible = !searchVisible">
@@ -39,51 +41,55 @@
                   </template>
                 </a-popover>
               </div>
+              <!-- 头部操作栏结束 -->
             </div>
           </template>
           <ScrollContainer direction="verticle" class="date-list">
             <div class="date-list-content">
-              <div class="date-list-item" v-for="item of dateList" :key="item.id">
-                <h4 class="date-list-item-title">
-                  {{ item.stationName }}
-                </h4>
-                <div class="date-list-item-container">
-                  <div class="date-list-item-content">
-                    <div class="date-list-item-children">
-                      <div class="date-list-item-child">
-                        <label>Station Type:</label>
-                        <span>{{ item.stationType }}</span>
+              <a-spin v-if="isGettingDateList"></a-spin>
+              <template v-else>
+                <div class="date-list-item" v-for="item of dateList" :key="item.id">
+                  <h4 class="date-list-item-title">
+                    {{ item.stationCode }}
+                  </h4>
+                  <div class="date-list-item-container">
+                    <div class="date-list-item-content">
+                      <div class="date-list-item-children">
+                        <div class="date-list-item-child">
+                          <label>Station Type:</label>
+                          <span>{{ item.type }}</span>
+                        </div>
+                        <div class="date-list-item-child" style="word-break: break-all">
+                          <label>Altitude:</label>
+                          <span>{{ item.elevation }}m</span>
+                        </div>
                       </div>
-                      <div class="date-list-item-child" style="word-break: break-all">
-                        <label>Altitude:</label>
-                        <span>{{ item.altitude }}</span>
+                      <div class="date-list-item-children">
+                        <div class="date-list-item-child">
+                          <label>Lon And Lat:</label>
+                          <span>{{ item.lon.toFixed(6) }} &nbsp;&nbsp; {{ item.lat.toFixed(6) }}</span>
+                        </div>
                       </div>
-                    </div>
-                    <div class="date-list-item-children">
-                      <div class="date-list-item-child">
-                        <label>Lon And Lat:</label>
-                        <span>{{ item.lon }} {{ item.lat }}</span>
-                      </div>
-                    </div>
-                    <div class="date-list-item-children">
-                      <div class="date-list-item-child">
-                        <label>Status:</label>
-                        <span class="green">{{ item.status }}</span>
-                      </div>
-                      <div class="date-list-item-child">
-                        <label>Signal:</label>
-                        <span class="green">{{ item.signal }}</span>
+                      <div class="date-list-item-children">
+                        <div class="date-list-item-child">
+                          <label>Status:</label>
+                          <span class="green">{{ item.status }}</span>
+                        </div>
+                        <div class="date-list-item-child">
+                          <label>Signal:</label>
+                          <span class="green">Normally</span>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <custom-empty v-if="!dateList || !dateList.length" style="margin-top: 40px"></custom-empty>
+                <custom-empty v-if="!dateList.length" style="margin-top: 40px"></custom-empty>
+              </template>
             </div>
             <div class="shadow"></div>
           </ScrollContainer>
         </a-collapse-panel>
-        <!-- All Date End -->
+        <!-- All Date 结束 -->
         <!-- Focus Date -->
         <a-collapse-panel key="2">
           <template slot="header">
@@ -101,86 +107,105 @@
           </template>
           <ScrollContainer direction="verticle" class="date-list">
             <div class="date-list-content">
-              <div class="date-list-item" v-for="item of dateList" :key="item.id">
-                <h4 class="date-list-item-title">
-                  {{ item.stationName }}
-                </h4>
-                <div class="date-list-item-container">
-                  <div class="date-list-item-content">
-                    <div class="date-list-item-children">
-                      <div class="date-list-item-child">
-                        <label>Station Type:</label>
-                        <span>{{ item.stationType }}</span>
+              <a-spin v-if="isGettingDateList"></a-spin>
+              <template v-else>
+                <div class="date-list-item" v-for="item of dateList" :key="item.id">
+                  <h4 class="date-list-item-title">
+                    {{ item.stationCode }}
+                  </h4>
+                  <div class="date-list-item-container">
+                    <div class="date-list-item-content">
+                      <div class="date-list-item-children">
+                        <div class="date-list-item-child">
+                          <label>Station Type:</label>
+                          <span>{{ item.type }}</span>
+                        </div>
+                        <div class="date-list-item-child" style="word-break: break-all">
+                          <label>Altitude:</label>
+                          <span>{{ item.elevation }}m</span>
+                        </div>
                       </div>
-                      <div class="date-list-item-child" style="word-break: break-all">
-                        <label>Altitude:</label>
-                        <span>{{ item.altitude }}</span>
+                      <div class="date-list-item-children">
+                        <div class="date-list-item-child">
+                          <label>Lon And Lat:</label>
+                          <span>{{ item.lon.toFixed(6) }} &nbsp;&nbsp; {{ item.lat.toFixed(6) }}</span>
+                        </div>
                       </div>
-                    </div>
-                    <div class="date-list-item-children">
-                      <div class="date-list-item-child">
-                        <label>Lon And Lat:</label>
-                        <span>{{ item.lon }} {{ item.lat }}</span>
-                      </div>
-                    </div>
-                    <div class="date-list-item-children">
-                      <div class="date-list-item-child">
-                        <label>Status:</label>
-                        <span class="green">{{ item.status }}</span>
-                      </div>
-                      <div class="date-list-item-child">
-                        <label>Signal:</label>
-                        <span class="green">{{ item.signal }}</span>
+                      <div class="date-list-item-children">
+                        <div class="date-list-item-child">
+                          <label>Status:</label>
+                          <span class="green">{{ item.status }}</span>
+                        </div>
+                        <div class="date-list-item-child">
+                          <label>Signal:</label>
+                          <span class="green">Normally</span>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <custom-empty v-if="!dateList || !dateList.length" style="margin-top: 40px"></custom-empty>
+                <custom-empty v-if="!dateList.length" style="margin-top: 40px"></custom-empty>
+              </template>
             </div>
             <div class="shadow"></div>
           </ScrollContainer>
         </a-collapse-panel>
-        <!-- Focus Date End -->
+        <!-- Focus Date 结束 -->
       </a-collapse>
     </div>
     <!-- 右侧地图 -->
     <div class="station-operation-map">
-      <Map />
+      <Map token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm">
+        <MapMarker v-if="dateList.length" :list="dateList" />
+        <MapPane :stationList="dateList" />
+      </Map>
     </div>
   </div>
 </template>
 <script>
 import Map from './components/Map.vue'
+import MapMarker from './components/MapMarker.vue'
+import MapPane from './components/MapPane.vue'
 import ScrollContainer from '@/components/ScrollContainer/index.vue'
-
-const dateList = new Array(5).fill(0).map(() => ({
-  id: 1,
-  stationName: 'ARP01',
-  stationType: 'IMS Station',
-  altitude: '596m',
-  lon: 139.079722,
-  lat: 36.299972,
-  status: 'Operation',
-  signal: 'Normally'
-}))
-
-dateList.forEach((item, index) => (item.id = index))
+import { getAction } from '../../api/manage'
 
 export default {
   components: {
     Map,
+    MapMarker,
+    MapPane,
     ScrollContainer
   },
   data() {
     return {
       activeKey: '1',
       isGettingDateList: false,
-      dateList: dateList,
+      dateList: [],
       searchVisible: false
     }
   },
+  created() {
+    this.getStationList()
+  },
   methods: {
+    // 获取站点列表
+    async getStationList() {
+      try {
+        this.isGettingDateList = true
+        const {
+          success,
+          result: { records }
+        } = await getAction('/gardsStations/findPage?pageIndex=1&pageSize=999')
+        if (success) {
+          this.dateList = records
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isGettingDateList = false
+      }
+    },
+
     // 左侧 All Date 查询
     onSearch() {
       this.searchVisible = false
@@ -331,6 +356,15 @@ export default {
       padding: 2px 0 10px 7px;
       overflow: auto;
 
+      &-content {
+        .ant-spin {
+          width: 100%;
+          height: 100px;
+          text-align: center;
+          margin-top: 90px;
+        }
+      }
+
       &-item {
         width: 322px;
         &-title {

src/views/system/Scheduling.vue

@@ -136,6 +136,7 @@
                 checkStrictly
                 defaultExpandAll
                 :checkedKeys="[...selectedKeys, ...targetKeys]"
+                :selectedKeys="[]"
                 :treeData="treeData"
                 @check="
                   (_, props) => {