From 76c9a765fc71f66ea60ca006977e80d19e6fdee7 Mon Sep 17 00:00:00 2001 From: zhuangzhuang2000 <73012624+zhuangzhuang2000@users.noreply.github.com> Date: Mon, 27 Apr 2026 14:14:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A1=A5=E6=A2=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/api.ts | 18 +++ src/api/bridges.ts | 20 +++ src/assets/images/icon/bridge.png | Bin 0 -> 1871 bytes src/assets/index.ts | 1 + .../ControlShowDetailComponent.vue | 8 ++ .../detail-panels/BridgeComponent.vue | 120 ++++++++++++++++++ src/config/config.json | 3 +- .../earthquake/useEarthquakeDisasterChain.ts | 6 +- src/hooks/map/useMap.ts | 6 +- src/hooks/rain-earthquake/useBridgePoint.ts | 28 ++++ src/hooks/rain-earthquake/useLayerControl.ts | 10 +- src/hooks/rainstorm/useRainDisasterChain.ts | 6 +- src/stores/useLoadingInformation.ts | 14 ++ src/stores/useStatusStore.ts | 5 + src/types/base/XianBridge.ts | 77 +++++++++++ src/types/common/LoadingResourceType.ts | 7 + 16 files changed, 317 insertions(+), 12 deletions(-) create mode 100644 src/api/bridges.ts create mode 100644 src/assets/images/icon/bridge.png create mode 100644 src/component/rain-earthquake/detail-panels/BridgeComponent.vue create mode 100644 src/hooks/rain-earthquake/useBridgePoint.ts create mode 100644 src/types/base/XianBridge.ts diff --git a/src/api/api.ts b/src/api/api.ts index e770c17..3e16d7f 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -8,6 +8,7 @@ import { getBasePoints as getEmergencyShelterBasePoints, getPointDetailById as g import { getBasePoints as getFirefighterBasePoints, getPointDetailById as getFirefighterPointDetailById} from './firefighter' import { getBasePoints as getStorePointsBasePoints, getPointDetailById as getStorePointsPointDetailById} from './store-points' import { getBasePoints as getSchoolsBasePoints, getPointDetailById as getSchoolsPointDetailById} from './schools' +import { getBasePoints as getBridgesBasePoints, getPointDetailById as getBridgesPointDetailById} from './bridges' import type { ApiResponse } from '@/types/ApiResponse' import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots' import type { XianRiskSpots } from '@/types/base/XianRiskSpots' @@ -17,6 +18,7 @@ import type { XianEmergencyShelter } from '@/types/base/XianEmergencyShelter' import type { XianFirefighter } from '@/types/base/XianFirefighter' import type { XianStorePoints } from '@/types/base/XianStorePoints' import type { XianSchool } from '@/types/base/XianSchool' +import type { XianBridge } from '@/types/base/XianBridge.ts'; /** * API接口统一导出对象 @@ -160,4 +162,20 @@ export const $api = { */ getPointDetailById: (id: number): Promise> => getSchoolsPointDetailById(id), }, + + // 桥梁信息 + bridges: { + /** + * 获取所有基础桥梁 + * @returns 桥梁数据数组 + */ + getBasePoints: (): Promise> => getBridgesBasePoints(), + + /** + * 根据id获取桥梁详情 + * @param id - 桥梁id + * @returns 桥梁详情 + */ + getPointDetailById: (id: number): Promise> => getBridgesPointDetailById(id), + }, } diff --git a/src/api/bridges.ts b/src/api/bridges.ts new file mode 100644 index 0000000..7c9f324 --- /dev/null +++ b/src/api/bridges.ts @@ -0,0 +1,20 @@ +import type { ApiResponse } from "@/types/ApiResponse" +import type { XianBridge } from "@/types/base/XianBridge" +import httpInstance from "@/utils/request/http" + +/** + * 获取桥梁基础数据 + * @returns 桥梁数据数组 + */ +export const getBasePoints = (): Promise> => { + return httpInstance.get('/bridge/base-points') +} + +/** + * 根据id获取桥梁详情 + * @param id - 桥梁id + * @returns 桥梁详情 + */ +export const getPointDetailById = (id: number): Promise> => { + return httpInstance.get(`/bridge/point-detail/${id}`) +} diff --git a/src/assets/images/icon/bridge.png b/src/assets/images/icon/bridge.png new file mode 100644 index 0000000000000000000000000000000000000000..c8577fd0fa1b38ecc038f17b70345bdae5bb3870 GIT binary patch literal 1871 zcmV-V2e9~wP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D2INUZK~z{rt(bjK z6m=NKpWWl|Ku?4dkVw%G1QPKDLd1gXM8qOfN9;vQvV>l&ahm>Un#R9UtI2UjM`6-w z%yG&lYsQxxW>B!EW+WTSG_)|y*FsGl&~v!E?fdL+@7U$oyFK*7JokH^-z~rW?(=)y zlV|`q$~Fxli6#Gf~tLDT`3v zANubKtiL)&x`L1GDBt(AEbkO`k+CEY!Z$ixoe@q2J7>}oouqA3m7@YBT%Fi4|7q52FjV>?cW+c+- zOI>vNO1E}J*gR~PW$A@m2bTM^*nmwd4LHg+C!o#G;Vuw0;c*ux)1D9KlEY!6&i`&w z)4KVT=u~Lm4;S$*_h?vw6BLEYyl3`&s>KF)#u-57;?dq#xK*MiJbdd}#iL1*;3+V@9c-R(BV$v#Y1Y)y!O1EqEJz`jGoDHw z96^$7Ngz}1_bZK>AH*OKPw_GeHj60aF3qG-DNZd>68TX|5X<4yvvWy7|3yJ9G}LIm zN>Cui9o98kB_gXxG;jKtUJ+0x!{sDO_^X=w06x9qJL@z+WRm9VGAPkne5Q%O8je`> zOJN4OQ5!lC#~Bo$n}-gf!n_nMwoC%-BjIWSp*S5yHT%&pIV*wga}9+TP{n!cMM6fO zDjCI|sIboSfh-0x_!^AYy(sWgMe#_iQ@+6bK=&%aF({De*(VBc6Q0dc!Mauk9LCam zr$<)&R9!v}#L+P=e+1p?@ln?uHosbWu~~Vsadh9oMtesITGcdu{ywR- zMuh~G`{2wLu^=VEPO=Q`7))3=P!njJ2bf=7jAiv3G3J8cGKFGr6(0u!dF71S)D{$_ zPg{Cl>Y>hSKJo{u1bbOvI~-jfD0E=MEGo)PCs~s5ulyfqKrN6S+(hAW07xvbcLo7& zonsijo3P{y>bSs%oFJ!J;B`2>_GtL&$wx*}TG9|2WS3}leJRG7$j0tNzf<$ieD2gl z4}j6>iS)*TykMK#_8+Gs?cAnJJDS?5>$d&@sG9}y8W1C5BhEM*UD~%4GnU0jv~K5N zdS_D`ty)%0>B)n|MLL?>&eMsr*XY#+`N)2s2f%$l*mi^lJLBlbO>h+pzTJzF$Y;U1S z-?Had2>eqOC`+N=pZM!vDy-dwN7GN1u-xP;{}H|wd^EolFL2uUF~#KGIb)J2Z5Z#{ zmM7U&zS9xmM`na8h6-|0O?o3TGKTv6nNjTtzp%iQ!jDXiJCE!*PZ^H{(Xr5-gHOvD zJjw#U7JeiYDxV~_HkLS0CX7v`G?(_~8ktsJiGPE0Uc}~%Np;YSBC(ziTpm^i>`;$S z<0Du^Iy}iqt+MA}9q&tDi8^zN$GgbRx$C>W4S*VVmga?JH+{KK-5eQyF*k*m!Npbi zSi3AP4iR{0d+P-)&$=6^OU{%P36W@DrVWnw-OL1A*tcJM4JVTT~e~i;d9K z!A|gw$kJOVu8PP=^^6=!i0gMZ957W6k3@HHe}v3v{$Yt3zra zMrhcf`6{7}fu_-AOheN|XnH_qt8Z4^FQYW6qF4)_`?IlDYmK`sK2ET$f zbNo!zB#7g)3&sjwl!QU8!PjE!)vB*9Mf^nO##fY0%Ai<9edF7Ys#;`^4=x5wd(7c( zkR`8oL+#w``r(7)wI>Z+j+>|&jPc2{*Xi)_PI|5~6R{Yx{7ZxWwLl-^L`ZEXZ>&Gq z_V>GrVgx002ov JPDHLkV1g6)fN1~# literal 0 HcmV?d00001 diff --git a/src/assets/index.ts b/src/assets/index.ts index 92c4e5f..0f78aef 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -12,6 +12,7 @@ export { default as emergencyShelterIcon } from '@/assets/images/icon/emergency- export { default as firefighterIcon } from '@/assets/images/icon/firefighter.png'; export { default as storePointsIcon } from '@/assets/images/icon/store-points.jpg'; export { default as schoolIcon } from '@/assets/images/icon/school.png'; +export { default as bridgeIcon } from '@/assets/images/icon/bridge.png'; // 图片 export { default as backgroundImage } from '@/assets/images/background-image.png'; diff --git a/src/component/rain-earthquake/ControlShowDetailComponent.vue b/src/component/rain-earthquake/ControlShowDetailComponent.vue index cc6b315..1aeb96f 100644 --- a/src/component/rain-earthquake/ControlShowDetailComponent.vue +++ b/src/component/rain-earthquake/ControlShowDetailComponent.vue @@ -84,6 +84,13 @@ useStatusStore().infrastructureLayers.showMainRoad.loading " /> + + diff --git a/src/component/rain-earthquake/detail-panels/BridgeComponent.vue b/src/component/rain-earthquake/detail-panels/BridgeComponent.vue new file mode 100644 index 0000000..a0bc250 --- /dev/null +++ b/src/component/rain-earthquake/detail-panels/BridgeComponent.vue @@ -0,0 +1,120 @@ + + + + + + diff --git a/src/config/config.json b/src/config/config.json index 3e55fe0..efce1dd 100644 --- a/src/config/config.json +++ b/src/config/config.json @@ -41,6 +41,7 @@ "emergencyShelterPointId": "emergency-shelter-point-", "fireStationPointId": "fire-station-point-", "storePointsPointId": "store-points-point-", - "schoolPointId": "school-point-" + "schoolPointId": "school-point-", + "bridgePointId": "bridge-point-" } } \ No newline at end of file diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts index 1ac683e..57eae3e 100644 --- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts +++ b/src/hooks/earthquake/useEarthquakeDisasterChain.ts @@ -241,9 +241,7 @@ export const useEarthquakeDisasterChain = () => { name: '显示桥梁', statusStore: statusStore.infrastructureLayers, statusKey: 'showBridge' as const, - callback: (status: unknown) => { - console.log('显示桥梁', status); - }, + callback: layerControl.clickBridge, }, { name: '显示高速', @@ -268,7 +266,7 @@ export const useEarthquakeDisasterChain = () => { { name: '显示地铁站', statusStore: statusStore.infrastructureLayers, - statusKey: 'showReservoir' as const, + statusKey: 'showSubway' as const, callback: (status: unknown) => { console.log('显示地铁站', status); }, diff --git a/src/hooks/map/useMap.ts b/src/hooks/map/useMap.ts index c893605..fa3e8aa 100644 --- a/src/hooks/map/useMap.ts +++ b/src/hooks/map/useMap.ts @@ -79,13 +79,17 @@ export const useMap = () => { useLoadingInformationStore().school.id = id; } + // 桥梁 + else if (pickedObject.id.startsWith(config.prefix.bridgePointId)) { + useLoadingInformationStore().bridge.id = id; + } + // 其他 else { // 重置状态 useLoadingInformationStore().resetStatue(); } } else { - console.log(pickedObject); // 重置状态 useLoadingInformationStore().resetStatue(); } diff --git a/src/hooks/rain-earthquake/useBridgePoint.ts b/src/hooks/rain-earthquake/useBridgePoint.ts new file mode 100644 index 0000000..ad5d2b3 --- /dev/null +++ b/src/hooks/rain-earthquake/useBridgePoint.ts @@ -0,0 +1,28 @@ +import { bridgeIcon } from '@/assets'; + +/** + * 桥梁相关钩子函数 + * @returns + */ +export const useBridgePoint = () => { + /** + * 字段映射配置 + */ + const field = { + bridgeName: '桥梁名称', + bridgeType: '桥梁类型', + techType: '技术类型', + lon: '经度', + lat: '纬度', + }; + + /** + * 获取桥梁图标 + * @returns 图标路径 + */ + function getDisasterIcon(): string { + return bridgeIcon; + } + + return { field, getDisasterIcon }; +}; diff --git a/src/hooks/rain-earthquake/useLayerControl.ts b/src/hooks/rain-earthquake/useLayerControl.ts index 70454b5..761e7ac 100644 --- a/src/hooks/rain-earthquake/useLayerControl.ts +++ b/src/hooks/rain-earthquake/useLayerControl.ts @@ -95,7 +95,12 @@ export const useLayerControl = () => { const clickNationRoad = () => { useStatusStore().infrastructureLayers.showMainRoad.loading = true; }; - + /** + * 显示桥梁 + */ + const clickBridge = () => { + useStatusStore().infrastructureLayers.showBridge.loading = true; + }; return { clickHiddenDangerPoint, @@ -109,6 +114,7 @@ export const useLayerControl = () => { clickWaterPipe, clickTrafficRoad, clickHighway, - clickNationRoad + clickNationRoad, + clickBridge, }; }; diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts index ef6d51f..32a0143 100644 --- a/src/hooks/rainstorm/useRainDisasterChain.ts +++ b/src/hooks/rainstorm/useRainDisasterChain.ts @@ -264,9 +264,7 @@ export const useRainDisasterChain = () => { name: '显示桥梁', statusStore: statusStore.infrastructureLayers, statusKey: 'showBridge' as const, - callback: (status: unknown) => { - console.log('显示桥梁', status); - }, + callback: layerControl.clickBridge, }, { name: '显示高速', @@ -291,7 +289,7 @@ export const useRainDisasterChain = () => { { name: '显示地铁站', statusStore: statusStore.infrastructureLayers, - statusKey: 'showReservoir' as const, + statusKey: 'showSubway' as const, callback: (status: unknown) => { console.log('显示地铁站', status); }, diff --git a/src/stores/useLoadingInformation.ts b/src/stores/useLoadingInformation.ts index 4f15c17..bd0d3bd 100644 --- a/src/stores/useLoadingInformation.ts +++ b/src/stores/useLoadingInformation.ts @@ -92,6 +92,14 @@ export const useLoadingInformationStore = defineStore( id: -1, }); + // ============================== 桥梁状态 ================================ + const bridge = reactive({ + /** 加载状态 */ + loading: false, + /** 桥梁ID */ + id: -1, + }); + /** * 重置所有状态 */ @@ -131,6 +139,10 @@ export const useLoadingInformationStore = defineStore( // 学校状态重置 school.loading = false; school.id = -1; + + // 桥梁状态重置 + bridge.loading = false; + bridge.id = -1; }; return { @@ -143,7 +155,9 @@ export const useLoadingInformationStore = defineStore( fireStation, storePoints, school, + bridge, resetStatue, + }; } ); diff --git a/src/stores/useStatusStore.ts b/src/stores/useStatusStore.ts index badc1b6..3a06023 100644 --- a/src/stores/useStatusStore.ts +++ b/src/stores/useStatusStore.ts @@ -151,6 +151,11 @@ export const useStatusStore = defineStore('status', () => { show: false, loading: false, }, + /** 显示地铁 */ + showSubway: { + show: false, + loading: false, + }, }); // ============================ 地图功能显示状态 ================================ diff --git a/src/types/base/XianBridge.ts b/src/types/base/XianBridge.ts new file mode 100644 index 0000000..30372e0 --- /dev/null +++ b/src/types/base/XianBridge.ts @@ -0,0 +1,77 @@ +import type { Point } from './Point'; + +/** + * 西安市桥梁数据接口 + */ +export interface XianBridge extends Point { + + /** + * 区域 + */ + region?: string; + + /** + * 名称 + */ + bridgeName?: string; + + /** + * 位置 + */ + location?: string; + + /** + * 建成时间 + */ + buildTime?: string; + + /** + * 类型 + */ + bridgeType?: string; + + /** + * 养护类型 + */ + maintainType?: string; + + /** + * 技术类型 + */ + techType?: string; + + /** + * 规模 + */ + scale?: string; + + /** + * 面积 + */ + area?: number; + + /** + * 所属单位 + */ + master?: string; + + /** + * 养护单位 + */ + maint?: string; + + /** + * 备注 + */ + note?: string; + + /** + * 位置 (可能是 GeoJSON 对象或其他结构) + */ + point?: unknown; + + /** + * 逻辑删除标识，0未删除，1已删除 + */ + isDelete?: number; +} diff --git a/src/types/common/LoadingResourceType.ts b/src/types/common/LoadingResourceType.ts index ad69a4a..734c338 100644 --- a/src/types/common/LoadingResourceType.ts +++ b/src/types/common/LoadingResourceType.ts @@ -31,4 +31,11 @@ export enum LoadingResource { /** 学校 */ SCHOOL = 'SCHOOL', + + /** + * 桥梁 + */ + BRIDGE = 'BRIDGE', + + }