From 5f0fce19d120ae6ea58f72bab689a3636fe9f2bd Mon Sep 17 00:00:00 2001 From: wzy-warehouse <18135009705@163.com> Date: Mon, 4 May 2026 22:05:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rain-earthquake/ControlShowComponent.vue | 53 ++++++++-- .../earthquake/useEarthquakeDisasterChain.ts | 97 +++++++++--------- src/hooks/rainstorm/useRainDisasterChain.ts | 99 ++++++++++--------- 3 files changed, 144 insertions(+), 105 deletions(-) diff --git a/src/component/rain-earthquake/ControlShowComponent.vue b/src/component/rain-earthquake/ControlShowComponent.vue index 349feeb..c811c76 100644 --- a/src/component/rain-earthquake/ControlShowComponent.vue +++ b/src/component/rain-earthquake/ControlShowComponent.vue @@ -110,16 +110,18 @@ right: 20px; border-radius: 2px; z-index: 1000; - width: 200px; - overflow: auto; + width: 160px; + overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: white; border: 1px solid rgb(0, 225, 255); - max-height: 650px; + max-height: 50vh; + display: flex; + flex-direction: column; } .title-box { font-weight: bold; - font-size: 16px; + font-size: 14px; background: linear-gradient( 180deg, rgb(86, 204, 242) 0%, @@ -133,17 +135,52 @@ padding: 8px; display: flex; flex-direction: column; - font-size: 14px; + font-size: 12px; gap: 6px; - max-height: 60vh; overflow-y: auto; + overflow-x: hidden; + flex: 1; + } + + /* 自定义滚动条样式 */ + .control-show-list::-webkit-scrollbar { + width: 6px; + } + + .control-show-list::-webkit-scrollbar-track { + background: rgba(14, 52, 98, 0.5); + border-radius: 3px; + } + + .control-show-list::-webkit-scrollbar-thumb { + background: linear-gradient( + 180deg, + rgba(86, 204, 242, 0.8) 0%, + rgba(47, 128, 237, 0.8) 100% + ); + border-radius: 3px; + transition: background 0.3s ease; + } + + .control-show-list::-webkit-scrollbar-thumb:hover { + background: linear-gradient( + 180deg, + rgba(86, 204, 242, 1) 0%, + rgba(47, 128, 237, 1) 100% + ); + } + + /* Firefox 滚动条样式 */ + .control-show-list { + scrollbar-width: thin; + scrollbar-color: rgba(86, 204, 242, 0.8) rgba(14, 52, 98, 0.5); } .category-section { margin-bottom: 8px; } .category-title { font-weight: bold; - font-size: 14px; + font-size: 12px; color: #00e1ff; padding: 4px 0; margin-bottom: 4px; @@ -183,7 +220,7 @@ flex: 1; text-align: justify; text-justify: inter-ideograph; - font-size: 14px; + font-size: 12px; line-height: 1.5; letter-spacing: 0.5px; word-break: break-all; diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts index 01728a2..c43d2f0 100644 --- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts +++ b/src/hooks/earthquake/useEarthquakeDisasterChain.ts @@ -184,7 +184,7 @@ export const useEarthquakeDisasterChain = () => { return [ // 灾害隐患点类别 { - name: '显示滑坡隐患点', + name: '滑坡隐患点', statusStore: statusStore.poiLayers, statusKey: 'showLandslideHiddenPoint' as const, callback: layerControl.clickLandslideHiddenPoint, @@ -192,7 +192,7 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.DISASTER_HAZARD, }, { - name: '显示泥石流隐患点', + name: '泥石流隐患点', statusStore: statusStore.poiLayers, statusKey: 'showDebrisFlowHiddenPoint' as const, callback: layerControl.clickDebrisFlowHiddenPoint, @@ -200,7 +200,7 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.DISASTER_HAZARD, }, { - name: '显示风险点', + name: '风险点', statusStore: statusStore.mapLayers, statusKey: 'riskPointShow' as const, callback: layerControl.clickRiskPoint, @@ -208,7 +208,7 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.DISASTER_HAZARD, }, { - name: '显示断裂带', + name: '断裂带', statusStore: statusStore.mapLayers, statusKey: 'faultShow' as const, callback: layerControl.clickFault, @@ -217,7 +217,7 @@ export const useEarthquakeDisasterChain = () => { }, // 基础设施类别 { - name: '显示医院', + name: '医院', statusStore: statusStore.poiLayers, statusKey: 'showHospital' as const, callback: layerControl.clickHospital, @@ -225,7 +225,7 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示危险源', + name: '危险源', statusStore: statusStore.poiLayers, statusKey: 'showDangerSource' as const, callback: layerControl.clickDangerousSource, @@ -233,7 +233,7 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示避难所', + name: '避难所', statusStore: statusStore.poiLayers, statusKey: 'showRefugeeShelter' as const, callback: layerControl.clickEmergencyShelter, @@ -241,7 +241,7 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示消防站', + name: '消防站', statusStore: statusStore.poiLayers, statusKey: 'showFireStation' as const, callback: layerControl.clickFireStation, @@ -249,7 +249,7 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示储备点', + name: '储备点', statusStore: statusStore.poiLayers, statusKey: 'showReservePoint' as const, callback: layerControl.clickStorePoints, @@ -257,7 +257,7 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示学校', + name: '学校', statusStore: statusStore.poiLayers, statusKey: 'showSchool' as const, callback: layerControl.clickSchool, @@ -265,28 +265,7 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示人口网格', - statusStore: statusStore.poiLayers, - statusKey: 'showPopulationGrid' as const, - callback: layerControl.clickPopulationGrid, - category: ControlPanelCategory.INFRASTRUCTURE, - }, - { - name: '显示管网系统', - statusStore: statusStore.infrastructureLayers, - statusKey: 'showNetworkSystem' as const, - callback: layerControl.clickWaterPipe, - category: ControlPanelCategory.INFRASTRUCTURE, - }, - { - name: '显示交通道路', - statusStore: statusStore.infrastructureLayers, - statusKey: 'showTrafficRoad' as const, - callback: layerControl.clickTrafficRoad, - category: ControlPanelCategory.INFRASTRUCTURE, - }, - { - name: '显示桥梁', + name: '桥梁', statusStore: statusStore.infrastructureLayers, statusKey: 'showBridge' as const, callback: layerControl.clickBridge, @@ -294,21 +273,7 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示高速', - statusStore: statusStore.infrastructureLayers, - statusKey: 'showHighway' as const, - callback: layerControl.clickHighway, - category: ControlPanelCategory.INFRASTRUCTURE, - }, - { - name: '显示国道', - statusStore: statusStore.infrastructureLayers, - statusKey: 'showMainRoad' as const, - callback: layerControl.clickNationRoad, - category: ControlPanelCategory.INFRASTRUCTURE, - }, - { - name: '显示水库', + name: '水库', statusStore: statusStore.infrastructureLayers, statusKey: 'showReservoir' as const, callback: layerControl.clickReservoir, @@ -316,13 +281,49 @@ export const useEarthquakeDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示地铁站', + name: '地铁站', statusStore: statusStore.poiLayers, statusKey: 'showSubwayStation' as const, callback: layerControl.clickSubwayStation, link: subwayIcon, category: ControlPanelCategory.INFRASTRUCTURE, }, + { + name: '人口网格', + statusStore: statusStore.poiLayers, + statusKey: 'showPopulationGrid' as const, + callback: layerControl.clickPopulationGrid, + category: ControlPanelCategory.INFRASTRUCTURE, + }, + { + name: '管网系统', + statusStore: statusStore.infrastructureLayers, + statusKey: 'showNetworkSystem' as const, + callback: layerControl.clickWaterPipe, + category: ControlPanelCategory.INFRASTRUCTURE, + }, + { + name: '交通道路', + statusStore: statusStore.infrastructureLayers, + statusKey: 'showTrafficRoad' as const, + callback: layerControl.clickTrafficRoad, + category: ControlPanelCategory.INFRASTRUCTURE, + }, + + { + name: '高速', + statusStore: statusStore.infrastructureLayers, + statusKey: 'showHighway' as const, + callback: layerControl.clickHighway, + category: ControlPanelCategory.INFRASTRUCTURE, + }, + { + name: '国道', + statusStore: statusStore.infrastructureLayers, + statusKey: 'showMainRoad' as const, + callback: layerControl.clickNationRoad, + category: ControlPanelCategory.INFRASTRUCTURE, + }, ]; }; diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts index 3867caa..31ddbce 100644 --- a/src/hooks/rainstorm/useRainDisasterChain.ts +++ b/src/hooks/rainstorm/useRainDisasterChain.ts @@ -213,7 +213,7 @@ export const useRainDisasterChain = () => { return [ // 灾害隐患点类别 { - name: '显示滑坡隐患点', + name: '滑坡隐患点', statusStore: statusStore.poiLayers, statusKey: 'showLandslideHiddenPoint' as const, callback: layerControl.clickLandslideHiddenPoint, @@ -221,7 +221,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.DISASTER_HAZARD, }, { - name: '显示泥石流隐患点', + name: '泥石流隐患点', statusStore: statusStore.poiLayers, statusKey: 'showDebrisFlowHiddenPoint' as const, callback: layerControl.clickDebrisFlowHiddenPoint, @@ -229,7 +229,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.DISASTER_HAZARD, }, { - name: '显示内涝隐患点', + name: '内涝隐患点', statusStore: statusStore.poiLayers, statusKey: 'showWaterLoggingHiddenPoint' as const, callback: layerControl.clickWaterLoggingHiddenPoint, @@ -237,7 +237,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.DISASTER_HAZARD, }, { - name: '显示山洪隐患点', + name: '山洪隐患点', statusStore: statusStore.poiLayers, statusKey: 'showFlashFloodHiddenPoint' as const, callback: layerControl.clickFlashFloodHiddenPoint, @@ -245,7 +245,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.DISASTER_HAZARD, }, { - name: '显示风险点', + name: '风险点', statusStore: statusStore.mapLayers, statusKey: 'riskPointShow' as const, callback: layerControl.clickRiskPoint, @@ -254,7 +254,7 @@ export const useRainDisasterChain = () => { }, // 基础设施类别 { - name: '显示医院', + name: '医院', statusStore: statusStore.poiLayers, statusKey: 'showHospital' as const, callback: layerControl.clickHospital, @@ -262,7 +262,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示危险源', + name: '危险源', statusStore: statusStore.poiLayers, statusKey: 'showDangerSource' as const, callback: layerControl.clickDangerousSource, @@ -270,7 +270,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示避难所', + name: '避难所', statusStore: statusStore.poiLayers, statusKey: 'showRefugeeShelter' as const, callback: layerControl.clickEmergencyShelter, @@ -278,7 +278,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示消防站', + name: '消防站', statusStore: statusStore.poiLayers, statusKey: 'showFireStation' as const, callback: layerControl.clickFireStation, @@ -286,7 +286,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示储备点', + name: '储备点', statusStore: statusStore.poiLayers, statusKey: 'showReservePoint' as const, callback: layerControl.clickStorePoints, @@ -294,7 +294,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示学校', + name: '学校', statusStore: statusStore.poiLayers, statusKey: 'showSchool' as const, callback: layerControl.clickSchool, @@ -302,28 +302,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示人口网格', - statusStore: statusStore.poiLayers, - statusKey: 'showPopulationGrid' as const, - callback: layerControl.clickPopulationGrid, - category: ControlPanelCategory.INFRASTRUCTURE, - }, - { - name: '显示管网系统', - statusStore: statusStore.infrastructureLayers, - statusKey: 'showNetworkSystem' as const, - callback: layerControl.clickWaterPipe, - category: ControlPanelCategory.INFRASTRUCTURE, - }, - { - name: '显示交通道路', - statusStore: statusStore.infrastructureLayers, - statusKey: 'showTrafficRoad' as const, - callback: layerControl.clickTrafficRoad, - category: ControlPanelCategory.INFRASTRUCTURE, - }, - { - name: '显示桥梁', + name: '桥梁', statusStore: statusStore.infrastructureLayers, statusKey: 'showBridge' as const, callback: layerControl.clickBridge, @@ -331,21 +310,7 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示高速', - statusStore: statusStore.infrastructureLayers, - statusKey: 'showHighway' as const, - callback: layerControl.clickHighway, - category: ControlPanelCategory.INFRASTRUCTURE, - }, - { - name: '显示国道', - statusStore: statusStore.infrastructureLayers, - statusKey: 'showMainRoad' as const, - callback: layerControl.clickNationRoad, - category: ControlPanelCategory.INFRASTRUCTURE, - }, - { - name: '显示水库', + name: '水库', statusStore: statusStore.infrastructureLayers, statusKey: 'showReservoir' as const, callback: layerControl.clickReservoir, @@ -353,13 +318,49 @@ export const useRainDisasterChain = () => { category: ControlPanelCategory.INFRASTRUCTURE, }, { - name: '显示地铁站', + name: '地铁站', statusStore: statusStore.poiLayers, statusKey: 'showSubwayStation' as const, callback: layerControl.clickSubwayStation, link: subwayIcon, category: ControlPanelCategory.INFRASTRUCTURE, }, + { + name: '人口网格', + statusStore: statusStore.poiLayers, + statusKey: 'showPopulationGrid' as const, + callback: layerControl.clickPopulationGrid, + category: ControlPanelCategory.INFRASTRUCTURE, + }, + { + name: '管网系统', + statusStore: statusStore.infrastructureLayers, + statusKey: 'showNetworkSystem' as const, + callback: layerControl.clickWaterPipe, + category: ControlPanelCategory.INFRASTRUCTURE, + }, + { + name: '交通道路', + statusStore: statusStore.infrastructureLayers, + statusKey: 'showTrafficRoad' as const, + callback: layerControl.clickTrafficRoad, + category: ControlPanelCategory.INFRASTRUCTURE, + }, + + { + name: '高速', + statusStore: statusStore.infrastructureLayers, + statusKey: 'showHighway' as const, + callback: layerControl.clickHighway, + category: ControlPanelCategory.INFRASTRUCTURE, + }, + { + name: '国道', + statusStore: statusStore.infrastructureLayers, + statusKey: 'showMainRoad' as const, + callback: layerControl.clickNationRoad, + category: ControlPanelCategory.INFRASTRUCTURE, + }, ]; };