feat: 冰雪阻断大屏更新

packages/screen/src/views/cockpit/api/commonHttp.js

@@ -2,7 +2,6 @@ import { request } from '@shared/utils/request'
 
 // 获取业务底图
 export function getBaseMap() {
-    // return [...ddt]
     return request({
         url: '/snow-ops-platform/dataDirectory/queryCatalog',
         method: 'GET',
@@ -14,7 +13,6 @@ export function getBaseMap() {
 
 // 获取业务图
 export function getBusinessMap() {
-    // return [...si]
     return request({
         url: '/snow-ops-platform/dataDirectory/queryCatalog',
         method: 'GET',
@@ -24,6 +22,48 @@ export function getBusinessMap() {
     })
 }
 
+// 获取所有的养护站
+export function getAllYHZList() {
+    return request({
+        url: '/snow-ops-platform/yhz/listByDistrict',
+        method: 'get',
+        params: {
+            qxmc: ''
+        }
+    })
+}
+
+
+export function getYHZDetail(params) {
+    return request({
+        url: '/snow-ops-platform/yhz/getById',
+        method: 'get',
+        params
+    })
+}
+
+// 获得高海拔路段图 high-altitude road
+export function getHighAltitudeRoadMap () {
+    return request({
+        url: '/snow-ops-platform/dataDirectory/queryCatalog',
+        method: 'GET',
+        params: {
+            pcatalog: 'GHBMAP'
+        }
+    })
+}
+
+// 获取天气预警统计
+export function getWeatherWarningStatistics (params) {
+    return request({
+        url: '/snow-ops-platform/weatherWarning/statistics',
+        method: 'GET',
+        params
+    })
+}
+
+
+
 
 
 

packages/screen/src/views/cockpit/components/CockpitLayout.vue

@@ -13,8 +13,8 @@
       <!-- 浮动面板层 -->
       <div class="panels-layer">
         <div class="panel-column left-panel">
-          <WeatherWarning />
+          <WeatherWarning ref="weatherWarningRef" />
-          <EmergencyResources />
+          <EmergencyResources @clickEmergencyResource="handleEmergencyResourceClick" />
         </div>
 
         <div class="center-spacer" aria-hidden="true"></div>
@@ -26,7 +26,7 @@
       </div>
 
       <!-- 图例工具栏 -->
-      <LegendToolbar class="legend-toolbar" :legendKeys="legendKeys" @marker-toggle="handleLegendMarkerToggle" />
+      <LegendToolbar class="legend-toolbar" v-model="legendToolActiveItem" :legendKeys="legendKeys" @marker-toggle="handleLegendMarkerToggle" />
 
       <!-- 应急力量详情提示框 -->
       <EmergencyForceTooltip
@@ -63,6 +63,8 @@ import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定
 onMounted(()=>{
   // 加载地图业务底图 并 聚焦中心点
   mapBase.loadBaseData()
+
+  weatherWarningRef.value.loadData()
 })
 
 // ==================== 常量定义 ====================
@@ -79,6 +81,9 @@ const EMERGENCY_FORCE_LAYER_ID = 'legend:emergencyForce'
  */
 const EMERGENCY_FORCE_CACHE_TTL = 60 * 1000
 
+// ==================== 组件实例 ====================
+const weatherWarningRef = ref(null)
+
 // ==================== 状态管理 ====================
 
 const mapStore = useMapStore()
@@ -101,7 +106,7 @@ const mapBase = useMapBase(mapStore)
 /**
  * 标记图hook，搭配lengendToolbar使用, 作用是点击某个图例项时，在地图上显示所有该图例的图
  */
-const mapImageMark = useMapImageMark(mapStore)
+const mapImageMarkHook = useMapImageMark(mapStore)
 
 /**
  * 应急力量数据加载状态
@@ -131,9 +136,22 @@ const emergencyForceAbortController = ref(null)
 /**
  * 工具图标列表通过key关联
  * key具体有哪些，请根据LegendToolbar.vue中定义的defaultLegendItems
+ * 后续的ImageMarkData中也需要与这里的key值对应
  */
 const legendKeys = ref(['serviceFacility','riskRoad','blockEvent','weatherAlert','emergencyForce'])
 
+/**
+ * 过滤标记对象，存放当前需要过滤的关键字
+ */
+const filterMark = ref({
+  serviceFacility: []
+})
+
+/**
+ * 图例项
+ */
+const legendToolActiveItem = ref([])
+
 // ==================== 工具函数 ====================
 
 /**
@@ -413,6 +431,34 @@ const renderEmergencyForcePoints = async (entityService, points, markerIcon) =>
 
 // ==================== 事件处理 ====================
 
+/**
+ * 应急资源表格行被点击时触发
+ */
+const handleEmergencyResourceClick = (resource) => {
+  // 根据区县名称，过滤养护站
+  const filterList = filterMark.value.serviceFacility
+  const index = filterList.findIndex((item) => item == resource.qxmc)
+  // 实现第一次点击表示选中，第二次点击表示取消选中
+  if(index > -1) filterList.splice(index, 1)
+  else filterList.push(resource.qxmc)
+
+  // 当点击了某个区县，需要将养护站的legend也点亮
+  const legendIndex = legendToolActiveItem.value.indexOf('serviceFacility')
+  // 如果过滤列表存在数据，则需要点亮legend
+  if(filterList.length && legendIndex == -1) {
+    legendToolActiveItem.value.push('serviceFacility')
+  }
+  // 如果过滤列表不存在，则需要关闭legend
+  if(!filterList.length && legendIndex > -1) {
+    legendToolActiveItem.value.splice(legendIndex, 1)
+  }
+
+  mapImageMarkHook.filterYHZMark("serviceFacility", (item)=>{
+    return filterList.find((filterItem) => filterItem == item.qxmc)
+  })
+
+}
+
 /**
  * 处理图例工具栏的标记切换事件
  *
@@ -422,10 +468,19 @@ const renderEmergencyForcePoints = async (entityService, points, markerIcon) =>
  * @param {string} [payload.markerIcon] - 标记图标
  */
 const handleLegendMarkerToggle = async ({ key, active, markerIcon }) => {
+  if(key === 'riskRoad') {
+    mapBase.toggleHighAltitudeRoadMap(active)
+    return
+  }
+
+
   // 只处理应急力量图例项
   if (key !== 'emergencyForce') {
+    if(active == false) {
+      filterMark.value[key] = []
+    }
 
-    mapImageMark.toggleMark({ key, active, markerIcon })
+    mapImageMarkHook.toggleMark({ key, active, markerIcon })
 
     return
   }

packages/screen/src/views/cockpit/components/EmergencyResources.vue

@@ -21,7 +21,7 @@
           :class="{ 'row-alt': index % 2 === 0 }"
         >
           <div class="row-number">{{ index + 1 }}</div>
-          <span class="district-name">{{ resource.qxmc }}</span>
+          <span class="district-name" @click="emit('clickEmergencyResource' , resource)">{{ resource.qxmc }}</span>
           <span class="count green">{{ resource.yhzCount }}</span>
           <span class="count orange">{{ resource.wzCount }}</span>
           <div class="equipment-cell">
@@ -43,7 +43,9 @@
 import { ref, onMounted } from 'vue'
 import { request } from '@shared/utils/request'
 
-const resources = ref([
+const emit = defineEmits(['clickEmergencyResource'])
+
+const testData = [
   {
     id: 1,
     name: '万州区',
@@ -98,7 +100,9 @@ const resources = ref([
     equipmentClass: 'red',
     hasAlert: false
   }
-])
+]
+
+const resources = ref([])
 
 // 请求后端接口 /district/statistics
 const getDistrictStatistics = async () => {
@@ -106,7 +110,6 @@ const getDistrictStatistics = async () => {
     url: '/snow-ops-platform/district/statistics',
     method: 'GET'
   })
-  console.log(res)
   if(res.code === '00000') {
     resources.value = res.data
   } else {
@@ -240,6 +243,7 @@ onMounted(() => {
 
     .district-name {
       text-align: left;
+      cursor: pointer;
     }
 
     .count {

packages/screen/src/views/cockpit/components/ImageMarkTooltip/index.js

@@ -1,8 +1,13 @@
 import { createVNode, render } from 'vue'
-import ImageMarkTooltip from './ImageMarkTooltip.vue'
+import serviceFacility from './serviceFacilityToolTip.vue'
 
-class ImageMarkTooltipUI {
+const UIMap = {
-  constructor() {
+  serviceFacility
+}
+
+class ImageMarkTooltip {
+  constructor({ key }) {
+    this.key = key
     this.instance = null
     this.container = null
     this.entity = null
@@ -22,8 +27,10 @@ class ImageMarkTooltipUI {
 
     this.entity = options.entity
 
+    const UIInstance = UIMap[this.key]
+
     // 创建 VNode
-    const vnode = createVNode(ImageMarkTooltip, {
+    const vnode = createVNode(UIInstance, {
       visible: true,
       position: options.position || { x: 0, y: 0 },
       data: options.data || {},
@@ -37,6 +44,9 @@ class ImageMarkTooltipUI {
     // 渲染到容器
     render(vnode, this.container)
     this.instance = vnode.component
+    if(this.instance.exposed.init) {
+      this.instance.exposed.init()
+    }
     return this.instance
   }
 
@@ -68,11 +78,7 @@ class ImageMarkTooltipUI {
   }
 }
 
-// 创建单例实例
-const instance = new ImageMarkTooltipUI()
 
-export const CommonTooltip = instance
+export const newImageMarkTooltip = ({ key }) => {
-
+  return new ImageMarkTooltip({ key })
-export const newImageMarkTooltip = () => {
-  return new ImageMarkTooltipUI()
 }

packages/screen/src/views/cockpit/components/ImageMarkTooltip/riskRoad.vue

@@ -1,5 +1,23 @@
 <template>
     <div class="tool-tip-content">
+
+        <div class="info-item">
+            <span class="label">名称:</span>
+            <span class="value">{{ data.mc }}</span>
+        </div>
+
+        <div class="flex">
+            <div class="info-item">
+                <span class="label">所属区县：</span>
+                <span class="value">{{ data.yjllpz }}</span>
+            </div>
+
+            <div class="info-item">
+                <span class="label">应急设备：</span>
+                <span class="value">{{ data.wz }}</span>
+            </div>
+        </div>
+
     </div>
 </template>
 <script setup>

packages/screen/src/views/cockpit/components/ImageMarkTooltip/serviceFacility.vue

@@ -1,51 +0,0 @@
-<template>
-    <div class="content" v-if="data">
-        <div class="info-item">
-            <span class="label">名称:</span>
-            <span class="value">{{ data.mc }}</span>
-        </div>
-
-        <div class="flex">
-            <div class="info-item">
-                <span class="label">所属区县：</span>
-                <span class="value">{{ data.yjllpz }}</span>
-            </div>
-
-            <div class="info-item">
-                <span class="label">应急物资：</span>
-                <span class="value">{{ data.wz }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-<script setup>
-import { onMounted, ref } from 'vue';
-const props = defineProps({
-    data: {
-        type: Object,
-        default: () => ({})
-    }
-});
-</script>
-<style scoped lang="scss">
-@use '@/styles/mixins.scss' as *;
-
-// 信息项
-.info-item {
-    margin-bottom: 0.5rem;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-
-    .label {
-        color: rgba(255, 255, 255, 0.7);
-        margin-right: 0.5rem;
-    }
-
-    .value {
-        color: #fff;
-        font-weight: 500;
-    }
-}
-</style>

packages/screen/src/views/cockpit/components/ImageMarkTooltip/serviceFacilityTooltip.vue

@@ -11,8 +11,32 @@
       </button>
 
       <!-- 内容区域 -->
-      <div class="tooltip-content">
+      <div class="tooltip-content" v-if="!loading && detail">
-        <component v-if="hasData" :is="contentMap[data.mapData.layerId]" :data="data" />
+
+        <div class="info-item">
+          <span class="label">名称:</span>
+          <span class="value">{{ detail.mc }}</span>
+        </div>
+
+        <div class="info-item">
+          <span class="label">所属区县：</span>
+          <span class="value">{{ detail.qxmc }}</span>
+        </div>
+
+        <div class="info-item">
+          <span class="label">应急设备：</span>
+          <span class="value">{{ detail.sbsl }}</span>
+        </div>
+
+        <div class="info-item">
+          <span class="label">应急物资：</span>
+          <span class="value">{{ detail.wzsl }}</span>
+        </div>
+
+        <div class="info-item">
+          <span class="label">应急人员：</span>
+          <span class="value">{{ detail.rysl }}</span>
+        </div>
 
         <!-- 如果没有数据 -->
         <div v-if="!hasData" class="no-data">
@@ -36,11 +60,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import serviceFacility from './serviceFacility.vue'
+import { getYHZDetail } from '@/views/cockpit/api/commonHttp.js'
-import riskRoad from './riskRoad.vue'
-import weatherAlert from './weatherAlert.vue'
-import blockEvent from './blockEvent.vue'
-
 /**
  * 应急力量详情提示框组件
  * 使用 HTML Overlay 方式显示在地图标记点上方
@@ -75,14 +95,6 @@ const props = defineProps({
     default: () => ({})
   },
 
-  /**
-   * 加载状态
-   */
-  loading: {
-    type: Boolean,
-    default: false
-  },
-
   /**
    * 错误信息
    */
@@ -93,16 +105,10 @@ const props = defineProps({
 })
 
 // ==================== State ====================
-const contentMap = ref({
+
-  // 养护站内容
+const title = ref('养护站')
-  serviceFacility,
+const detail = ref(null)
-  // 高海拔道路
+const loading = ref(true)
-  riskRoad,
-  // 阻断事件
-  blockEvent,
-  // 气象预警
-  weatherAlert,
-})
 
 // ==================== Emits ====================
 
@@ -117,22 +123,22 @@ const hasData = computed(() => {
   return !!props.data
 })
 
-const title = computed(() => {
-  if (props.data.mapData.layerId === 'serviceFacility') {
-    return '养护站'
-  }
-  if (props.data.mapData.layerId === 'riskRoad') {
-    return '高海拔路段'
-  }
-  if (props.data.mapData.layerId === 'blockEvent') {
-    return '阻断事件'
-  }
-  if (props.data.mapData.layerId === 'weatherAlert') {
-    return '气象预警'
-  }
-})
-
 // ==================== Methods ====================
+// 这个方法会在index.js中被执行
+const init = () => {
+  getDetail()
+}
+
+const getDetail = async () => {
+  loading.value = true
+  const res = await getYHZDetail({
+    id: props.data.id
+  })
+  if (res.success) {
+    detail.value = res.data
+    loading.value = false
+  }
+}
 
 /**
  * 处理关闭按钮点击
@@ -140,11 +146,22 @@ const title = computed(() => {
 const handleClose = () => {
   emit('close')
 }
+
+defineExpose({
+  init
+})
 </script>
 
 <style scoped lang="scss">
 @use '@/styles/mixins.scss' as *;
 
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
 .common-tooltip {
   // CSS 变量：控制背景图片尺寸和内边距
   // 注意：修改图片资源时，需要同步更新这些高度值以匹配实际 PNG 尺寸
@@ -161,7 +178,7 @@ const handleClose = () => {
   transform: translate(-50%, calc(-100% - 20px));
 
   min-width: 200px;
-  max-width: 300px;
+  width: 300px;
 
   // 上下 padding 需要容纳顶部和底部图片 + 内容间距
   // 左右 padding 保持一致
@@ -262,25 +279,43 @@ const handleClose = () => {
 
 // 内容区域
 .tooltip-content {
-  padding-right: 1.5rem; // 为关闭按钮留出空间
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 5px;
+
+  .info-item:first-child {
+    grid-column: 1 / -1;
+  }
+
+  // padding-right: 1.5rem; // 为关闭按钮留出空间
+}
+
+.mb {
+  margin-bottom: 0.5rem
 }
 
 // 信息项
 .info-item {
-  margin-bottom: 0.5rem;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 
   .label {
+    white-space: nowrap;
     color: rgba(255, 255, 255, 0.7);
     margin-right: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis; 
   }
 
   .value {
-    color: #fff;
+    font-family: SourceHanSansCN, SourceHanSansCN;
     font-weight: 500;
+    font-size: 14px;
+    color: #14FFF6;
+    line-height: 21px;
+    text-align: left;
+    font-style: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; 
   }
 }
 

packages/screen/src/views/cockpit/components/WeatherWarning.vue

@@ -66,6 +66,7 @@
 
 <script setup>
 import { ref } from 'vue'
+import { getWeatherWarningStatistics } from '@/views/cockpit/api/commonHttp.js'
 
 // 导入图片
 import glowTopIcon from '../assets/img/weather-badge-glow-top.png'
@@ -79,7 +80,8 @@ const warningLevels = ref([
   {
     id: 1,
     name: '蓝色预警',
-    count: 320,
+    key: 'blueWarningCount',
+    count: 0,
     color: 'rgba(132, 199, 255, 1)',
     glowTopIcon: glowTopIcon,
     glowBottomIcon: glowBottomIcon,
@@ -88,7 +90,8 @@ const warningLevels = ref([
   {
     id: 2,
     name: '黄色预警',
-    count: 36,
+    key: 'yellowWarningCount',
+    count: 0,
     color: 'rgba(215, 209, 38, 1)',
     glowTopIcon: glowTopIcon,
     glowBottomIcon: glowBottomIcon,
@@ -97,7 +100,8 @@ const warningLevels = ref([
   {
     id: 3,
     name: '橙色预警',
-    count: 2,
+    key: 'orangeWarningCount',
+    count: 0,
     color: 'rgba(255, 114, 0, 1)',
     glowTopIcon: glowTopIcon,
     glowBottomIcon: glowBottomIcon,
@@ -106,7 +110,8 @@ const warningLevels = ref([
   {
     id: 4,
     name: '红色预警',
-    count: 1,
+    key: 'redWarningCount',
+    count: 0,
     color: 'rgba(255, 32, 0, 1)',
     glowTopIcon: glowTopIcon,
     glowBottomIcon: glowBottomIcon,
@@ -121,6 +126,24 @@ const districts = ref([
   { id: 4, name: '涪陵区', km: 35, warning: '蓝色预警', warningColor: 'rgba(47, 156, 246, 1)' },
   { id: 5, name: '合川区', km: 46, warning: '蓝色预警', warningColor: 'rgba(47, 156, 246, 1)' }
 ])
+
+const loadData = async (areaCode) => { 
+  const param = {
+    areaCode: areaCode || ''
+  }
+  const res = await getWeatherWarningStatistics(param)
+  if(res.success) {
+    for(const item of warningLevels.value) {
+      item.count = res.data[item.key]
+    }
+  }
+
+}
+
+defineExpose({
+  loadData
+})
+
 </script>
 
 <style scoped lang="scss">

packages/screen/src/views/cockpit/composables/ImageMarkData.js

@@ -11,16 +11,19 @@ export default class ImageMarkData {
     cacheData = null
     expiresAt = null
     abortController = null
+    loading = false
     /**
      * 60秒内重复点击使用缓存数据，减少服务器压力
      */
     cacheTime = 60 * 1000
 
-    constructor({ api, tooltip, onResponse }) {
+    constructor({ api, tooltip, markerIcon, onResponse, key }) {
         this.api = api
+        this.key = key
         this.response = onResponse
+        this.markerIcon = markerIcon
         // 初始化提示框
-        this.tooltip = tooltip || newImageMarkTooltip()
+        this.tooltip = tooltip || newImageMarkTooltip({key})
     }
 
     getCache = () => {
@@ -37,7 +40,7 @@ export default class ImageMarkData {
         // 首先查看缓存是否可用
         const cacheData = this.getCache()
         if (cacheData) return cacheData
-
+        this.loading = true
         const controller = this.createAbortController()
         const config = {}
         if (controller) config.signal = controller.signal
@@ -47,6 +50,7 @@ export default class ImageMarkData {
         } catch (error) {
             console.error('请求失败: ', error)
         } finally {
+            this.loading = false
             let data = null
             if (this.response) data = this.response(res)
             else data = this.commonOnResponse(res)
@@ -81,7 +85,6 @@ export default class ImageMarkData {
     // 通用的响应处理
     commonOnResponse = (res) => {
         if (res?.success) {
-            res.data = res.data.slice(0, 2)
             const dataList = res.data.map((item) => {
                 item.mapData = {
                     id: this.key + '-' + item.rid,
@@ -91,7 +94,6 @@ export default class ImageMarkData {
                 }
                 return item
             })
-            this.data = dataList
             return dataList
         }
         return []

packages/screen/src/views/cockpit/composables/useMapBase.js

@@ -1,4 +1,4 @@
-import { getBaseMap, getBusinessMap } from '@/views/cockpit/api/commonHttp.js'
+import { getBaseMap, getBusinessMap, getHighAltitudeRoadMap } from '@/views/cockpit/api/commonHttp.js'
 import * as Cesium from 'cesium'
 
 
@@ -6,6 +6,8 @@ import * as Cesium from 'cesium'
 // 主要是加载地图底图
 export const useMapBase = (mapStore) => {
 
+    let hightAltitudeRoadMapId
+
     // 加载当前业务的底图, 类似于天地图，但是没有使用天地图作为底图，有大的地块的地形纹理，但是缩小范围很小，属于比较粗的图
     const loadBaseMap = async () => {
         const layerService = mapStore.services().layer
@@ -53,7 +55,7 @@ export const useMapBase = (mapStore) => {
         return layers;
     };
 
-    // 加载业务地图，业务地图主要是高亮当前业务下的地区的区县，边界都会有高亮线条
+    // 加载业务地图，业务地图主要是高亮当前业务下的地区的区县与管线图，边界都会有高亮线条
     const loadBusinessMap = async () => {
         const layerService = mapStore.services().layer
         const res = await getBusinessMap()
@@ -75,6 +77,34 @@ export const useMapBase = (mapStore) => {
         }
     }
 
+    // 加载高海拔底图
+    const toggleHighAltitudeRoadMap = async (flag) => {
+        const layerService = mapStore.services().layer
+
+        if(!flag && hightAltitudeRoadMapId) {
+            layerService.removeLayer(hightAltitudeRoadMapId)
+            return
+        }
+
+
+        const res = await getHighAltitudeRoadMap()
+        const resData = res.data
+        resData[0].Children = resData
+        mapStore.baseMapGroups = resData
+        for (const item of resData) {
+            const layers = mapStore.getBaseMapLayersForGroup(item.Attribute?.rid || item.Rid)
+            for (const layerConfig of layers) {
+                const layer = {
+                    id: layerConfig.id,
+                    type: layerConfig.type,
+                    url: layerConfig.url,
+                    meta: layerConfig.meta,
+                }
+                hightAltitudeRoadMapId = await layerService.addLayer(layer)
+            }
+        }
+    }
+
     const loadBaseData = () => {
         setTimeout(() => {
             loadBaseMap()
@@ -83,6 +113,7 @@ export const useMapBase = (mapStore) => {
     }
 
     return {
-        loadBaseData
+        loadBaseData,
+        toggleHighAltitudeRoadMap
     }
 }

packages/screen/src/views/cockpit/composables/useMapImageMark.js

@@ -1,8 +1,18 @@
 import { fetchEmergencyForceList } from '@/views/cockpit/api/emergencyForce'
+import { getAllYHZList } from '@/views/cockpit/api/commonHttp'
 
 import ImageMarkData from './ImageMarkData'
 import * as Cesium from 'cesium'
 
+
+import serviceFacilityMarkerIcon from '../assets/legendTool/服务设施icon定位.png'
+import riskRoadMarkerIcon from '../assets/legendTool/风险路段icon定位.png'
+import blockEventMarkerIcon from '../assets/legendTool/阻断事件icon定位.png'
+import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
+import weatherAlertMarkerIcon from '../assets/legendTool/气象预警icon定位.png'
+import { ElMessage } from 'element-plus'
+
+
 /**
  *  当前业务下的地图服务
  *  主要是涉及需要调用后端服务获得地图数据
@@ -15,16 +25,41 @@ export const useMapImageMark = (mapStore) => {
 
     // 接口服务映射
     const imageMarkMap = {
+        // 养护站 legend
         serviceFacility: new ImageMarkData({
-            api: fetchEmergencyForceList,
+            key: 'serviceFacility',
-        }),
+            api: getAllYHZList,
-        riskRoad: new ImageMarkData({
+            markerIcon: serviceFacilityMarkerIcon,
-            api: fetchEmergencyForceList,
+            onResponse: function (res) {
+                if (res?.success) {
+                    res.data = res.data.filter((item) => {
+                        if (isNaN(item.jd) || isNaN(item.wd)) {
+                            return false
+                        }
+                        return true
+                    })
+                    const dataList = res.data.map((item) => {
+                        item.mapData = {
+                            id: this.key + '-' + item.id,
+                            layerId: this.key,
+                            position: [Number(item.jd), Number(item.wd), 0],
+                            image: this.markerIcon
+                        }
+                        return item
+                    })
+                    return dataList
+                }
+                return []
+            }
         }),
         blockEvent: new ImageMarkData({
+            key: 'blockEvent',
+            markerIcon: blockEventMarkerIcon,
             api: fetchEmergencyForceList,
         }),
         weatherAlert: new ImageMarkData({
+            key: 'weatherAlert',
+            markerIcon: weatherAlertMarkerIcon,
             api: fetchEmergencyForceList,
         })
     }
@@ -102,20 +137,20 @@ export const useMapImageMark = (mapStore) => {
     /**
      * 根据图标名称请求后台服务，动态加载图标列表
      */
-    const loadDynamicMark = async ({ key, markerIcon, params }) => {
+    const loadDynamicMark = async ({ key, params }) => {
         const imageMarkData = imageMarkMap[key]
         if (!imageMarkData) return
-        imageMarkData.markerIcon = markerIcon
+        // 取消上一次请求
-        imageMarkData.key = key
+        imageMarkData.cancelRequest()
         const dataList = await imageMarkData.request(params)
-
+        clearLayerEntity(key)
         drawImageEntities(dataList)
     }
 
     /**
      * 显示/隐藏地图标
      */
-    const toggleMark = async ({ key, active, markerIcon, params }) => {
+    const toggleMark = async ({ key, active, params }) => {
         const imageMarkData = imageMarkMap[key]
 
         if (!active) {
@@ -124,7 +159,23 @@ export const useMapImageMark = (mapStore) => {
             return
         }
 
-        loadDynamicMark({ key, markerIcon, params })
+        loadDynamicMark({ key, params })
+    }
+
+    /**
+     * 过滤养护站图标
+     */
+    const filterYHZMark = async (key, filterFn) => {
+        const imageMarkData = imageMarkMap[key]
+        if (!imageMarkData) return
+        // 取消上一次请求
+        imageMarkData.cancelRequest()
+        let dataList = await imageMarkData.request()
+        dataList = dataList.filter((item) => {
+            return filterFn(item)
+        })
+        clearLayerEntity(key)
+        drawImageEntities(dataList)
     }
 
     /**
@@ -171,7 +222,8 @@ export const useMapImageMark = (mapStore) => {
     }
 
     return {
-        toggleMark
+        toggleMark,
+        filterYHZMark
     }
 
 }