From a7b36542dd36d597ca324336f19e9c23004e6884 Mon Sep 17 00:00:00 2001 From: wzy-warehouse <18135009705@163.com> Date: Tue, 28 Apr 2026 10:22:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E4=BE=8B=E6=98=BE?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/icon/earthquake-line.png | Bin 0 -> 1455 bytes src/assets/index.ts | 1 + .../rain-earthquake/LegendComponent.vue | 24 ++++++++++++-- .../earthquake/useEarthquakeDisasterChain.ts | 30 +++++++++++++++++- src/hooks/rainstorm/useRainDisasterChain.ts | 21 ++++++++++++ 5 files changed, 72 insertions(+), 4 deletions(-) create mode 100644 src/assets/images/icon/earthquake-line.png diff --git a/src/assets/images/icon/earthquake-line.png b/src/assets/images/icon/earthquake-line.png new file mode 100644 index 0000000000000000000000000000000000000000..885ee589833fec5c6eddf6f7c9b584927bae8150 GIT binary patch literal 1455 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEjKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBugD~Uq{1quc4egmB5hW46K32*3xq68y`AMmI6}bgK)eHls47YguJQ{>uF6ifOi{PD zbs{}UK3djZt>nqvW6s4qD1-ZCERRDRmN*N_31y=g{ z<>lpi<;HsXMd|v6mX?v90`zGE;%B09k2gXakl<5wp<;IRwdJb`TMuUx6%m z$bf(lkK0a>)-WqGI;PNi%Dno z?n+pCg;jg0UWDGUkftT)=crvUxz`}2RQyxuio4t)7DbOed&C(6jEyb6e|8nBUO4@Q zdA`7Aor!O5NGNU%di3RkKxccI(3vv=!NJ0ge(IMFWbX-{^K9v}dn@}7rf}*!VEnxE z;H~HdwO?KL?O)Y&vfQu9N_t_*w&u#%fH0N`cGbHSf@K{KAGq?6dBG&sQ$_MKZufmS zw)I3$U&qN)tdrIIm4DUf^Y{wy7CU+&sN?-R=B?2S)^IfJ%IWx0qHJxa=ho=Oy1aiM zpH`${qOsyVd8RLOBs3l7&vDuEJu=|rsi!L1YTIp@Z5MT2wE6FEuw2>jgV6le1@r&U zxZ89@`}fh5d3VlAci4Q>SaEvV`Qv4+2}^>Kwlr*F<@I%5V?RY-@UzuVruR{7S=$qS z^(sG7KGD;wv?o(GW3{Z;1%9nagVGnF2QD0aQ9DI-#qq}-dG&bQl~@1*9ua%Acztv0Xxy``HT?rD%EfQoSh}`>x z==d^&x%8&N=Y!QrYZ}f>Jsoh3<>0NT11X$9(7Jv zD-Q-IyqqJC*$q|C%FrPUQdZ(XovA@P2#u z&(+=AOq^>gj5l3h*Y#7iU1Ia*j`z2jv+^IXZ@AocLfH1i-Mz|btD8Lg-4?EUt+Zre zql35L?Q6?Bet*{QjQrM-|19)i&a~7^clOVo;3l1UZ{y?>@%8b>MJ)nJOh4}DyP0^M yiCcdozVuVmRxjV0GO@*a5t^k3y;gFEor*8*`n=qAdF)eAsp;wJ=d#Wzp$Py})ObJu literal 0 HcmV?d00001 diff --git a/src/assets/index.ts b/src/assets/index.ts index f6f58e6..5af5201 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -15,6 +15,7 @@ export { default as schoolIcon } from '@/assets/images/icon/school.png'; export { default as bridgeIcon } from '@/assets/images/icon/bridge.png'; export { default as reservoirIcon } from '@/assets/images/icon/reservoir.png'; export { default as subwayIcon } from '@/assets/images/icon/subway.png'; +export { default as earthquakeLineIcon } from '@/assets/images/icon/earthquake-line.png'; // 图片 export { default as backgroundImage } from '@/assets/images/background-image.png'; diff --git a/src/component/rain-earthquake/LegendComponent.vue b/src/component/rain-earthquake/LegendComponent.vue index d1e9c9f..a29e6d6 100644 --- a/src/component/rain-earthquake/LegendComponent.vue +++ b/src/component/rain-earthquake/LegendComponent.vue @@ -35,7 +35,10 @@ :key="`${index1}_${index2}`" >
- + + + +
{{ item.name }}
@@ -51,12 +54,12 @@ // 接收父组件传递的属性 const props = defineProps<{ - legendList: { name: string; link: string }[]; + legendList: { name: string; link?: string; html?: string }[]; colsNum: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24; }>(); // 处理后图例列表 - const finalLegendList: Ref<{ name: string; link: string }[][]> = ref([]); + const finalLegendList: Ref<{ name: string; link?: string; html?: string }[][]> = ref([]); // 切换图例显示状态 const changeStatus = () => { @@ -133,6 +136,21 @@ margin-right: 8px; } + .legend-item-html { + width: 18px; + height: 18px; + flex-shrink: 0; + margin-right: 8px; + display: flex; + align-items: center; + justify-content: center; + } + + .legend-item-html :deep(*) { + width: 100%; + height: 100%; + } + .legend-item-text { flex: 1; text-align: justify; diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts index 2f5a1b0..2360779 100644 --- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts +++ b/src/hooks/earthquake/useEarthquakeDisasterChain.ts @@ -4,7 +4,21 @@ import type { PaginationType } from '@/types/common/PaginationType'; import { PointType } from '@/types/common/DisasterType'; import { useStatusStore } from '@/stores/useStatusStore'; import { useLayerControl } from '../rain-earthquake/useLayerControl.ts'; -import { debrisFlowIcon, landslideIcon, riskAreaIcon } from '@/assets'; +import { + debrisFlowIcon, + landslideIcon, + riskAreaIcon, + earthquakeLineIcon, + hospitalIcon, + dangerousSourceIcon, + emergencyShelterIcon, + firefighterIcon, + storePointsIcon, + schoolIcon, + bridgeIcon, + reservoirIcon, + subwayIcon, +} from '@/assets'; import { useRightHandle } from '../rain-earthquake/useRightHandle.ts'; /** @@ -79,9 +93,23 @@ export const useEarthquakeDisasterChain = () => { * 图例数据 */ const legendList = [ + // 隐患点 { name: '滑坡隐患点', link: landslideIcon }, { name: '泥石流隐患点', link: debrisFlowIcon }, { name: '风险区域', link: riskAreaIcon }, + // 断裂带 + { name: '断裂带', link: earthquakeLineIcon }, + // 承灾体 + { name: '医院', link: hospitalIcon }, + { name: '危险源', link: dangerousSourceIcon }, + { name: '避难所', link: emergencyShelterIcon }, + { name: '消防站', link: firefighterIcon }, + { name: '储备点', link: storePointsIcon }, + { name: '学校', link: schoolIcon }, + { name: '地铁站', link: subwayIcon }, + // 基础设施 + { name: '桥梁', link: bridgeIcon }, + { name: '水库', link: reservoirIcon }, ]; // ================左侧按钮================================ diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts index b52cbe5..82a9c2f 100644 --- a/src/hooks/rainstorm/useRainDisasterChain.ts +++ b/src/hooks/rainstorm/useRainDisasterChain.ts @@ -9,6 +9,15 @@ import { landslideIcon, riskAreaIcon, waterLoggingIcon, + hospitalIcon, + dangerousSourceIcon, + emergencyShelterIcon, + firefighterIcon, + storePointsIcon, + schoolIcon, + bridgeIcon, + reservoirIcon, + subwayIcon, } from '@/assets'; import { useLayerControl } from '../rain-earthquake/useLayerControl.ts'; import { useRightHandle } from '../rain-earthquake/useRightHandle.ts'; @@ -87,11 +96,23 @@ export const useRainDisasterChain = () => { * 图例数据 */ const legendList = [ + // 隐患点 { name: '滑坡隐患点', link: landslideIcon }, { name: '泥石流隐患点', link: debrisFlowIcon }, { name: '山洪隐患点', link: flashFloodIcon }, { name: '内涝隐患点', link: waterLoggingIcon }, { name: '风险区域', link: riskAreaIcon }, + // 承灾体 + { name: '医院', link: hospitalIcon }, + { name: '危险源', link: dangerousSourceIcon }, + { name: '避难所', link: emergencyShelterIcon }, + { name: '消防站', link: firefighterIcon }, + { name: '储备点', link: storePointsIcon }, + { name: '学校', link: schoolIcon }, + { name: '地铁站', link: subwayIcon }, + // 基础设施 + { name: '桥梁', link: bridgeIcon }, + { name: '水库', link: reservoirIcon }, ]; // ================左侧按钮================================