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,
};
});