diff --git a/src/component/rain-earthquake/ControlShowComponent.vue b/src/component/rain-earthquake/ControlShowComponent.vue index c811c76..e1212b1 100644 --- a/src/component/rain-earthquake/ControlShowComponent.vue +++ b/src/component/rain-earthquake/ControlShowComponent.vue @@ -45,7 +45,15 @@ > - {{ item.name }} + + {{ item.name }} + + ({{ item.count() }}) + + @@ -66,6 +74,7 @@ link?: string; // 图例图片链接 html?: string; // 图例HTML内容 category?: string; // 分类名称 + count?: () => number | null; // 获取点数量的函数 }[]; }>(); @@ -110,7 +119,7 @@ right: 20px; border-radius: 2px; z-index: 1000; - width: 160px; + width: 200px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: white; @@ -224,6 +233,15 @@ line-height: 1.5; letter-spacing: 0.5px; word-break: break-all; + display: flex; + align-items: center; + gap: 4px; + } + .point-count { + color: #00e1ff; + font-weight: bold; + font-size: 13px; + white-space: nowrap; } :deep(.el-checkbox) { height: auto; diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts index c43d2f0..a5823d1 100644 --- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts +++ b/src/hooks/earthquake/useEarthquakeDisasterChain.ts @@ -21,6 +21,8 @@ import { subwayIcon, } from '@/assets'; import { useRightHandle } from '../rain-earthquake/useRightHandle.ts'; +import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts'; +import { LoadingResource } from '@/types/common/LoadingResourceType.ts'; /** * 暴雨灾害链 @@ -180,6 +182,7 @@ export const useEarthquakeDisasterChain = () => { const getControlPanel = () => { const statusStore = useStatusStore(); const layerControl = useLayerControl(); + const resourceStore = useLoadingResourceStore(); return [ // 灾害隐患点类别 @@ -190,6 +193,10 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickLandslideHiddenPoint, link: landslideIcon, category: ControlPanelCategory.DISASTER_HAZARD, + count: () => + resourceStore.getResourceCount( + LoadingResource.LANDSLIDE_HIDDEN_POINT + ), }, { name: '泥石流隐患点', @@ -198,6 +205,10 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickDebrisFlowHiddenPoint, link: debrisFlowIcon, category: ControlPanelCategory.DISASTER_HAZARD, + count: () => + resourceStore.getResourceCount( + LoadingResource.DEBRIS_FLOW_HIDDEN_POINT + ), }, { name: '风险点', @@ -206,6 +217,7 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickRiskPoint, link: riskAreaIcon, category: ControlPanelCategory.DISASTER_HAZARD, + count: () => resourceStore.getResourceCount(LoadingResource.RISK_POINT), }, { name: '断裂带', @@ -223,6 +235,7 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickHospital, link: hospitalIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.HOSPITAL), }, { name: '危险源', @@ -231,6 +244,8 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickDangerousSource, link: dangerousSourceIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => + resourceStore.getResourceCount(LoadingResource.DANGEROUS_SOURCE), }, { name: '避难所', @@ -239,6 +254,8 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickEmergencyShelter, link: emergencyShelterIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => + resourceStore.getResourceCount(LoadingResource.EMERGENCY_SHELTER), }, { name: '消防站', @@ -247,6 +264,8 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickFireStation, link: firefighterIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => + resourceStore.getResourceCount(LoadingResource.FIRE_STATION), }, { name: '储备点', @@ -255,6 +274,8 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickStorePoints, link: storePointsIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => + resourceStore.getResourceCount(LoadingResource.STORE_POINTS), }, { name: '学校', @@ -263,6 +284,7 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickSchool, link: schoolIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.SCHOOL), }, { name: '桥梁', @@ -271,6 +293,7 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickBridge, link: bridgeIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.BRIDGE), }, { name: '水库', @@ -279,6 +302,7 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickReservoir, link: reservoirIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.RESERVOIR), }, { name: '地铁站', @@ -287,6 +311,8 @@ export const useEarthquakeDisasterChain = () => { callback: layerControl.clickSubwayStation, link: subwayIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => + resourceStore.getResourceCount(LoadingResource.SUBWAY_STATION), }, { name: '人口网格', diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts index 31ddbce..e490bdb 100644 --- a/src/hooks/rainstorm/useRainDisasterChain.ts +++ b/src/hooks/rainstorm/useRainDisasterChain.ts @@ -23,6 +23,8 @@ import { import { useLayerControl } from '../rain-earthquake/useLayerControl.ts'; import { useRightHandle } from '../rain-earthquake/useRightHandle.ts'; import { useLeftHandle } from '../rain-earthquake/useLeftHandle.ts'; +import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts'; +import { LoadingResource } from '@/types/common/LoadingResourceType.ts'; /** * 暴雨灾害链 @@ -209,6 +211,7 @@ export const useRainDisasterChain = () => { const getControlPanel = () => { const statusStore = useStatusStore(); const layerControl = useLayerControl(); + const resourceStore = useLoadingResourceStore(); return [ // 灾害隐患点类别 @@ -219,6 +222,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickLandslideHiddenPoint, link: landslideIcon, category: ControlPanelCategory.DISASTER_HAZARD, + count: () => resourceStore.getResourceCount(LoadingResource.LANDSLIDE_HIDDEN_POINT), }, { name: '泥石流隐患点', @@ -227,6 +231,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickDebrisFlowHiddenPoint, link: debrisFlowIcon, category: ControlPanelCategory.DISASTER_HAZARD, + count: () => resourceStore.getResourceCount(LoadingResource.DEBRIS_FLOW_HIDDEN_POINT), }, { name: '内涝隐患点', @@ -235,6 +240,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickWaterLoggingHiddenPoint, link: waterLoggingIcon, category: ControlPanelCategory.DISASTER_HAZARD, + count: () => resourceStore.getResourceCount(LoadingResource.WATER_LOGGING_HIDDEN_POINT), }, { name: '山洪隐患点', @@ -243,6 +249,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickFlashFloodHiddenPoint, link: flashFloodIcon, category: ControlPanelCategory.DISASTER_HAZARD, + count: () => resourceStore.getResourceCount(LoadingResource.FLASH_FLOOD_HIDDEN_POINT), }, { name: '风险点', @@ -251,6 +258,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickRiskPoint, link: riskAreaIcon, category: ControlPanelCategory.DISASTER_HAZARD, + count: () => resourceStore.getResourceCount(LoadingResource.RISK_POINT), }, // 基础设施类别 { @@ -260,6 +268,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickHospital, link: hospitalIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.HOSPITAL), }, { name: '危险源', @@ -268,6 +277,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickDangerousSource, link: dangerousSourceIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.DANGEROUS_SOURCE), }, { name: '避难所', @@ -276,6 +286,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickEmergencyShelter, link: emergencyShelterIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.EMERGENCY_SHELTER), }, { name: '消防站', @@ -284,6 +295,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickFireStation, link: firefighterIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.FIRE_STATION), }, { name: '储备点', @@ -292,6 +304,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickStorePoints, link: storePointsIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.STORE_POINTS), }, { name: '学校', @@ -300,6 +313,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickSchool, link: schoolIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.SCHOOL), }, { name: '桥梁', @@ -308,6 +322,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickBridge, link: bridgeIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.BRIDGE), }, { name: '水库', @@ -316,6 +331,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickReservoir, link: reservoirIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.RESERVOIR), }, { name: '地铁站', @@ -324,6 +340,7 @@ export const useRainDisasterChain = () => { callback: layerControl.clickSubwayStation, link: subwayIcon, category: ControlPanelCategory.INFRASTRUCTURE, + count: () => resourceStore.getResourceCount(LoadingResource.SUBWAY_STATION), }, { name: '人口网格', diff --git a/src/stores/useLoadingResourceStore.ts b/src/stores/useLoadingResourceStore.ts index fcf8933..c307b0e 100644 --- a/src/stores/useLoadingResourceStore.ts +++ b/src/stores/useLoadingResourceStore.ts @@ -35,10 +35,24 @@ export const useLoadingResourceStore = defineStore('loadingResource', () => { return loadingResource.value[key] || { ids: [], info: [] }; }; + /** + * 获取资源数量 + * @param key - 资源类型 + * @returns 资源数量,如果资源不存在则返回 null + */ + const getResourceCount = (key: LoadingResource): number | null => { + const resource = loadingResource.value[key]; + if (!resource) { + return null; + } + return resource.ids.length; + }; + return { loadingResource, getLoadingResource, addLoadingResource, removeLoadingResource, + getResourceCount, }; });