gis/xian_vue_new
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

区分显示和加载状态，添加医院显示逻辑

Browse Source
This commit is contained in:
wzy-warehouse
2026-04-18 16:40:04 +08:00
parent fe258cd249
commit da7745b7a9
26 changed files with 941 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/api.ts
+18
View File
@@ -2,9 +2,11 @@ import type { DisasterType } from '@/types/common/DisasterType.ts'
import { getSm2PublicKey } from './crypto'
import { getBasePoins as getHiddenDangerBasePoints, getPointDetailById as getHiddenDangerPointDetailById} from './hidden-danger-spots'
import { getBasePoins as getRiskBasePoints, getPointDetailById as getRiskPointDetailById} from './risk-spots'
import { getBasePoins as getHospitalsBasePoints, getPointDetailById as getHospitalsPointDetailById} from './hospitals'
import type { ApiResponse } from '@/types/ApiResponse'
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'
import type { XianRiskSpots } from '@/types/base/XianRiskSpots'
import type { XianHospitals } from '@/types/base/XianHospitals'
/**
* API接口统一导出对象
@@ -52,4 +54,20 @@ export const $api = {
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianRiskSpots>> => getRiskPointDetailById(id),
},
// 医院信息
hospitals: {
/**
* 获取所有基础医院
* @returns 医院数据数组
*/
getBasePoins: (): Promise<ApiResponse<XianHospitals[]>> => getHospitalsBasePoints(),
/**
* 根据id获取医院详情
* @param id - 医院id
* @returns 医院详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianHospitals>> => getHospitalsPointDetailById(id),
},
}
src/api/hospitals.ts
+20
View File
@@ -0,0 +1,20 @@
import type { ApiResponse } from "@/types/ApiResponse"
import type { XianHospitals } from "@/types/base/XianHospitals"
import httpInstance from "@/utils/request/http"
/**
* 获取医院基础数据
* @returns 医院数据数组
*/
export const getBasePoins = (): Promise<ApiResponse<XianHospitals[]>> => {
return httpInstance.get('/hospitals/base-points')
}
/**
* 根据id获取医院详情
* @param id - 医院id
* @returns 医院详情
*/
export const getPointDetailById = (id: number): Promise<ApiResponse<XianHospitals>> => {
return httpInstance.get(`/hospitals/point-detail/${id}`)
}
src/assets/images/icon/hospital.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

src/assets/index.ts
+1
View File
@@ -6,6 +6,7 @@ export { default as waterLoggingIcon } from '@/assets/images/icon/waterlogging.p
export { default as debrisFlowIcon } from '@/assets/images/icon/debris-flow.png';
export { default as flashFloodIcon } from '@/assets/images/icon/flash-flood.png';
export { default as riskAreaIcon } from '@/assets/images/icon/risk-area.png';
export { default as hospitalIcon } from '@/assets/images/icon/hospital.png';
// 图片
export { default as backgroundImage } from '@/assets/images/background-image.png';
src/component/map/MapComponent.vue
+6 -1
View File
@@ -2,7 +2,12 @@
<div class="map_container" id="map-container"></div>
<!-- 行政区划 -->
<AdministrativeDivision v-if="useStatusStore().appLoadingCompleted" />
<AdministrativeDivision
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().mapLayers.showAdministrativeDivision.loading
"
/>
</template>
<script lang="ts" setup>
src/component/rain-earthquake/BasicComponent.vue
+10 -2
View File
@@ -7,11 +7,19 @@
<!-- 隐患点组件 -->
<HiddenPointComponent
:disaster-type="props.disasterType"
v-if="useStatusStore().appLoadingCompleted"
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().mapLayers.hiddenDangerPointShow.loading
"
/>
<!-- 风险点组件 -->
<RiskPointComponent v-if="useStatusStore().appLoadingCompleted" />
<RiskPointComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().mapLayers.riskPointShow.loading
"
/>
</div>
</template>
src/component/rain-earthquake/ControlShowComponent.vue
+4 -3
View File
@@ -7,9 +7,9 @@
<div class="control-show-list">
<div v-for="(item, index) in constrolShowList" :key="index">
<el-checkbox
v-model="item.selected"
v-model="item.statusStore[item.statusKey].show"
:label="item.name"
@change="item.callback(item.selected)"
@change="item.callback(item.statusStore[item.statusKey].show)"
/>
</div>
</div>
@@ -20,7 +20,8 @@
defineProps<{
constrolShowList: {
name: string;
selected: boolean;
statusStore: Record<string, { show: boolean; loading: boolean }>;
statusKey: string;
callback: (...args: unknown[]) => unknown;
}[];
}>();
src/component/rain-earthquake/ControlShowDetailComponent.vue
+16
View File
@@ -0,0 +1,16 @@
<template>
<!-- 医院 -->
<HospitalComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().poiLayers.showHospital.loading
"
/>
</template>
<script lang="ts" setup>
import { useStatusStore } from '@/stores/useStatusStore';
import HospitalComponent from './HospitalComponent.vue';
</script>
<style scoped lang="less"></style>
src/component/rain-earthquake/DisasterChainPointComponent.vue
+5 -5
View File
@@ -6,15 +6,15 @@
type="primary"
@click="changeStatus"
circle
:title="`${useStatusStore().uiComponents.disasterChainPointShow ? '关闭' : '打开'}灾害链影响点列表`"
:title="`${useStatusStore().uiComponents.disasterChainPointShow.show ? '关闭' : '打开'}灾害链影响点列表`"
>{{
useStatusStore().uiComponents.disasterChainPointShow ? '-' : '+'
useStatusStore().uiComponents.disasterChainPointShow.show ? '-' : '+'
}}</el-button
>
</div>
<div
class="disaster-list-box"
v-show="useStatusStore().uiComponents.disasterChainPointShow"
v-show="useStatusStore().uiComponents.disasterChainPointShow.show"
>
<header class="table-title">
<span>灾害链影响点列表</span>
@@ -124,8 +124,8 @@
// 切换面板显示状态
const changeStatus = () => {
useStatusStore().uiComponents.disasterChainPointShow =
!useStatusStore().uiComponents.disasterChainPointShow;
useStatusStore().uiComponents.disasterChainPointShow.show =
!useStatusStore().uiComponents.disasterChainPointShow.show;
};
// 上一页
src/component/rain-earthquake/HiddenPointComponent.vue
+6 -10
View File
@@ -15,13 +15,11 @@
<InformationBox
:data="hiddenDangerPointDetail as Record<string, any>"
:field="field"
v-if="
useLoadingInformationStore().getLoadingHiddenPointInformationStatus()
"
v-if="useLoadingInformationStore().hiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().getHiddenPointId()"
:key="useLoadingInformationStore().hiddenPoint.id"
/>
</div>
</template>
@@ -62,14 +60,14 @@
// 监听id变化
watch(
() => useLoadingInformationStore().getHiddenPointId(),
() => useLoadingInformationStore().hiddenPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取隐患点数据
const clickObject = useLoadingInformationStore().getClickObject();
const clickObject = useLoadingInformationStore().clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
@@ -77,7 +75,7 @@
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
useLoadingInformationStore().getHiddenPointId()
useLoadingInformationStore().hiddenPoint.id
);
// 更新数据
@@ -93,9 +91,7 @@
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().setLoadingHiddenPointInformationStatus(
true
);
useLoadingInformationStore().hiddenPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
src/component/rain-earthquake/HospitalComponent.vue
+95
View File
@@ -0,0 +1,95 @@
<!-- 医院组件 -->
<template>
<div>
<!-- 加载医院 -->
<LoadingPoints
v-if="useStatusStore().appLoadingCompleted && hospitalPoints.length > 0"
:base-points="hospitalPoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.hospitalPointId"
:is-default="true"
:loading-resource-field="LoadingResource.HOSPITAL"
/>
<!-- 显示信息框 -->
<InformationBox
:data="hospitalPointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().hospital.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().hospital.id"
/>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { $api } from '@/api/api.ts';
import type { Point } from '@/types/base/Point';
import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
import config from '@/config/config.json';
import InformationBox from '@/component/common/InformationBox.vue';
import { useStatusStore } from '@/stores/useStatusStore';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import { LoadingResource } from '@/types/common/LoadingResourceType';
import { useHospitalPoint } from '@/hooks/rain-earthquake/useHospitalPoint';
const hospitalPoints = ref<Point[]>([]);
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const hospitalPointDetail = ref<Point>();
const informationBoxTitle = ref('');
// 获取钩子函数
const { field, getDisasterIcon } = useHospitalPoint();
$api.hospitals.getBasePoins().then((res) => {
hospitalPoints.value = res.data;
});
// 监听id变化
watch(
() => useLoadingInformationStore().hospital.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取医院数据
const clickObject = useLoadingInformationStore().clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
return;
}
const res = await $api.hospitals.getPointDetailById(
useLoadingInformationStore().hospital.id
);
// 更新数据
hospitalPointDetail.value = res.data;
informationBoxTitle.value = res.data.name || '医院信息';
try {
// 将坐标转换为偏移量
const screenPos = CesiumUtilsSingleton.convertScreenPosition(
clickObject.primitive.position
);
offsetX.value = screenPos.x;
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().hospital.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
}
);
</script>
<style scoped></style>
src/component/rain-earthquake/LeftButtonComponent.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div
class="left-button-box"
:style="{
left: `${useStatusStore().uiComponents.disasterChainPointShow ? 575 : 100}px`,
left: `${useStatusStore().uiComponents.disasterChainPointShow.show ? 575 : 100}px`,
}"
>
<ul class="left-button-ul">
src/component/rain-earthquake/LegendComponent.vue
+11 -6
View File
@@ -4,17 +4,22 @@
<div
class="control-box"
:style="{
bottom: `${useStatusStore().uiComponents.legendShow ? 248 : 25}px`,
bottom: `${useStatusStore().uiComponents.legendShow.show ? 248 : 25}px`,
}"
>
<el-button
@click="changeStatus"
circle
:title="`${useStatusStore().uiComponents.legendShow ? '关闭' : '打开'}图例`"
>{{ useStatusStore().uiComponents.legendShow ? '-' : '+' }}</el-button
:title="`${useStatusStore().uiComponents.legendShow.show ? '关闭' : '打开'}图例`"
>{{
useStatusStore().uiComponents.legendShow.show ? '-' : '+'
}}</el-button
>
</div>
<div class="legend-box" v-show="useStatusStore().uiComponents.legendShow">
<div
class="legend-box"
v-show="useStatusStore().uiComponents.legendShow.show"
>
<div class="title-box">
<header>图例</header>
</div>
@@ -55,8 +60,8 @@
// 切换图例显示状态
const changeStatus = () => {
useStatusStore().uiComponents.legendShow =
!useStatusStore().uiComponents.legendShow;
useStatusStore().uiComponents.legendShow.show =
!useStatusStore().uiComponents.legendShow.show;
};
onMounted(() => {
src/component/rain-earthquake/RiskPointComponent.vue
+6 -6
View File
@@ -15,11 +15,11 @@
<InformationBox
:data="riskPointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().getLoadingRiskPointInformationStatus()"
v-if="useLoadingInformationStore().riskPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().getRiskPointId()"
:key="useLoadingInformationStore().riskPoint.id"
/>
</div>
</template>
@@ -53,13 +53,13 @@
// 监听id变化
watch(
() => useLoadingInformationStore().getRiskPointId(),
() => useLoadingInformationStore().riskPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取风险点数据
const clickObject = useLoadingInformationStore().getClickObject();
const clickObject = useLoadingInformationStore().clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
@@ -67,7 +67,7 @@
}
const res = await $api.riskSpots.getPointDetailById(
useLoadingInformationStore().getRiskPointId()
useLoadingInformationStore().riskPoint.id
);
// 更新数据
@@ -82,7 +82,7 @@
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().setLoadingRiskPointInformationStatus(true);
useLoadingInformationStore().riskPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
src/config/config.json
+2 -1
View File
@@ -35,6 +35,7 @@
},
"prefix": {
"hiddenDangerPointId": "hidden-danger-point-",
"riskPointId": "risk-point-"
"riskPointId": "risk-point-",
"hospitalPointId": "hospital-point-"
}
}
src/hooks/earthquake/useEarthquakeDisasterChain.ts
+127 -107
View File
@@ -176,113 +176,133 @@ export const useEarthquakeDisasterChain = () => {
];
// ================控制面板================================
const controlPanel = ref([
{
name: '显示隐患点',
selected: useStatusStore().mapLayers.hiddenDangerPointShow,
callback: useLayerControl().clickHiddenDangerPoint,
},
{
name: '显示医院',
selected: useStatusStore().poiLayers.showHospital,
callback: () => {
console.log('显示医院');
},
},
{
name: '显示危险源',
selected: useStatusStore().poiLayers.showDangerSource,
callback: () => {
console.log('显示危险源');
},
},
{
name: '显示避难所',
selected: useStatusStore().poiLayers.showRefugeeShelter,
callback: () => {
console.log('显示避难所');
},
},
{
name: '显示消防站',
selected: useStatusStore().poiLayers.showFireStation,
callback: () => {
console.log('显示消防站');
},
},
{
name: '显示储备点',
selected: useStatusStore().poiLayers.showReservePoint,
callback: () => {
console.log('显示储备点');
},
},
{
name: '显示学校',
selected: useStatusStore().poiLayers.showSchool,
callback: () => {
console.log('显示学校');
},
},
{
name: '显示人口网格',
selected: useStatusStore().poiLayers.showPopulationGrid,
callback: () => {
console.log('显示人口网格');
},
},
{
name: '显示管网系统',
selected: useStatusStore().infrastructureLayers.showNetworkSystem,
callback: () => {
console.log('显示管网系统');
},
},
{
name: '显示交通道路',
selected: useStatusStore().infrastructureLayers.showTrafficRoad,
callback: () => {
console.log('显示交通道路');
},
},
{
name: '显示桥梁',
selected: useStatusStore().infrastructureLayers.showBridge,
callback: () => {
console.log('显示桥梁');
},
},
{
name: '显示高速',
selected: useStatusStore().infrastructureLayers.showHighway,
callback: () => {
console.log('显示高速');
},
},
{
name: '显示国道',
selected: useStatusStore().infrastructureLayers.showMainRoad,
callback: () => {
console.log('显示国道');
},
},
{
name: '显示水库',
selected: useStatusStore().infrastructureLayers.showReservoir,
callback: () => {
console.log('显示水库');
},
},
{
name: '显示地铁站',
selected: useStatusStore().infrastructureLayers.showReservoir,
callback: () => {
console.log('显示地铁站');
},
},
]);
/**
* 控制面板信息
*/
const getControlPanel = () => {
const statusStore = useStatusStore();
const layerControl = useLayerControl();
return [
{
name: '显示隐患点',
statusStore: statusStore.mapLayers,
statusKey: 'hiddenDangerPointShow' as const,
callback: layerControl.clickHiddenDangerPoint,
},
{
name: '显示医院',
statusStore: statusStore.poiLayers,
statusKey: 'showHospital' as const,
callback: layerControl.clickHospital,
},
{
name: '显示危险源',
statusStore: statusStore.poiLayers,
statusKey: 'showDangerSource' as const,
callback: (status: unknown) => {
console.log('显示危险源', status);
},
},
{
name: '显示避难所',
statusStore: statusStore.poiLayers,
statusKey: 'showRefugeeShelter' as const,
callback: (status: unknown) => {
console.log('显示避难所', status);
},
},
{
name: '显示消防站',
statusStore: statusStore.poiLayers,
statusKey: 'showFireStation' as const,
callback: (status: unknown) => {
console.log('显示消防站', status);
},
},
{
name: '显示储备点',
statusStore: statusStore.poiLayers,
statusKey: 'showReservePoint' as const,
callback: (status: unknown) => {
console.log('显示储备点', status);
},
},
{
name: '显示学校',
statusStore: statusStore.poiLayers,
statusKey: 'showSchool' as const,
callback: (status: unknown) => {
console.log('显示学校', status);
},
},
{
name: '显示人口网格',
statusStore: statusStore.poiLayers,
statusKey: 'showPopulationGrid' as const,
callback: (status: unknown) => {
console.log('显示人口网格', status);
},
},
{
name: '显示管网系统',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showNetworkSystem' as const,
callback: (status: unknown) => {
console.log('显示管网系统', status);
},
},
{
name: '显示交通道路',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showTrafficRoad' as const,
callback: (status: unknown) => {
console.log('显示交通道路', status);
},
},
{
name: '显示桥梁',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showBridge' as const,
callback: (status: unknown) => {
console.log('显示桥梁', status);
},
},
{
name: '显示高速',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showHighway' as const,
callback: (status: unknown) => {
console.log('显示高速', status);
},
},
{
name: '显示国道',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showMainRoad' as const,
callback: (status: unknown) => {
console.log('显示国道', status);
},
},
{
name: '显示水库',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showReservoir' as const,
callback: (status: unknown) => {
console.log('显示水库', status);
},
},
{
name: '显示地铁站',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showReservoir' as const,
callback: (status: unknown) => {
console.log('显示地铁站', status);
},
},
];
};
// 把所有需要用到的数据/方法 return 出去
return {
conditions,
selectOptions,
@@ -292,7 +312,7 @@ export const useEarthquakeDisasterChain = () => {
legendList,
leftButtonInfo,
rightButtonInfo,
controlPanel,
controlPanel: getControlPanel(),
changeConditions,
changeCurrentPage,
};
src/hooks/map/useMap.ts
+17 -6
View File
@@ -23,24 +23,35 @@ export const useMap = () => {
// 当id改变时候，重置状态
if (
useLoadingInformationStore().getHiddenPointId() !== id &&
useLoadingInformationStore().getRiskPointId() !== id
useLoadingInformationStore().hiddenPoint.id !== id &&
useLoadingInformationStore().riskPoint.id !== id &&
useLoadingInformationStore().hospital.id !== id
) {
useLoadingInformationStore().resetStatue();
}
// 点击对象
useLoadingInformationStore().setClickObject(pickedObject);
useLoadingInformationStore().clickObject.id = pickedObject.id;
useLoadingInformationStore().clickObject.primitive =
pickedObject.primitive;
// 隐患点
if (pickedObject.id.startsWith(config.prefix.hiddenDangerPointId)) {
useLoadingInformationStore().setHiddenPointId(id);
useLoadingInformationStore().hiddenPoint.id = id;
}
// 风险点
else if (pickedObject.id.startsWith(config.prefix.riskPointId)) {
useLoadingInformationStore().setRiskPointId(id);
} else {
useLoadingInformationStore().riskPoint.id = id;
}
// 医院
else if (pickedObject.id.startsWith(config.prefix.hospitalPointId)) {
useLoadingInformationStore().hospital.id = id;
}
// 其他
else {
// 重置状态
useLoadingInformationStore().resetStatue();
}
src/hooks/rain-earthquake/useHospitalPoint.ts
+31
View File
@@ -0,0 +1,31 @@
import { hospitalIcon } from '@/assets';
/**
* 医院相关钩子函数
* @returns
*/
export const useHospitalPoint = () => {
/**
* 字段映射配置
*/
const field = {
name: '医院名称',
level: '级别',
address: '地理位置',
lon: '经度',
lat: '纬度',
sumPeople: '年度诊疗人数',
unitHead: '负责人',
telephone: '手机号',
};
/**
* 获取医院图标
* @returns 图标路径
*/
function getDisasterIcon(): string {
return hospitalIcon;
}
return { field, getDisasterIcon };
};
src/hooks/rainstorm/useRainDisasterChain.ts
+122 -102
View File
@@ -12,6 +12,7 @@ import {
riskAreaIcon,
waterLoggingIcon,
} from '@/assets';
import { useLayerControl } from '../useLayerControl';
/**
* 暴雨灾害链
@@ -211,108 +212,127 @@ export const useRainDisasterChain = () => {
/**
* 控制面板信息
*/
const controlPanel = [
{
name: '显示医院',
selected: useStatusStore().poiLayers.showHospital,
callback: () => {
console.log('显示医院');
},
},
{
name: '显示危险源',
selected: useStatusStore().poiLayers.showDangerSource,
callback: () => {
console.log('显示危险源');
},
},
{
name: '显示避难所',
selected: useStatusStore().poiLayers.showRefugeeShelter,
callback: () => {
console.log('显示避难所');
},
},
{
name: '显示消防站',
selected: useStatusStore().poiLayers.showFireStation,
callback: () => {
console.log('显示消防站');
},
},
{
name: '显示储备点',
selected: useStatusStore().poiLayers.showReservePoint,
callback: () => {
console.log('显示储备点');
},
},
{
name: '显示学校',
selected: useStatusStore().poiLayers.showSchool,
callback: () => {
console.log('显示学校');
},
},
{
name: '显示人口网格',
selected: useStatusStore().poiLayers.showPopulationGrid,
callback: () => {
console.log('显示人口网格');
},
},
{
name: '显示管网系统',
selected: useStatusStore().infrastructureLayers.showNetworkSystem,
callback: () => {
console.log('显示管网系统');
},
},
{
name: '显示交通道路',
selected: useStatusStore().infrastructureLayers.showTrafficRoad,
callback: () => {
console.log('显示交通道路');
},
},
{
name: '显示桥梁',
selected: useStatusStore().infrastructureLayers.showBridge,
callback: () => {
console.log('显示桥梁');
},
},
{
name: '显示高速',
selected: useStatusStore().infrastructureLayers.showHighway,
callback: () => {
console.log('显示高速');
},
},
{
name: '显示国道',
selected: useStatusStore().infrastructureLayers.showMainRoad,
callback: () => {
console.log('显示国道');
},
},
{
name: '显示水库',
selected: useStatusStore().infrastructureLayers.showReservoir,
callback: () => {
console.log('显示水库');
},
},
{
name: '显示地铁站',
selected: useStatusStore().infrastructureLayers.showReservoir,
callback: () => {
console.log('显示地铁站');
},
},
];
/**
* 控制面板信息
*/
const getControlPanel = () => {
const statusStore = useStatusStore();
const layerControl = useLayerControl();
return [
{
name: '显示医院',
statusStore: statusStore.poiLayers,
statusKey: 'showHospital' as const,
callback: layerControl.clickHospital,
},
{
name: '显示危险源',
statusStore: statusStore.poiLayers,
statusKey: 'showDangerSource' as const,
callback: (status: unknown) => {
console.log('显示危险源', status);
},
},
{
name: '显示避难所',
statusStore: statusStore.poiLayers,
statusKey: 'showRefugeeShelter' as const,
callback: (status: unknown) => {
console.log('显示避难所', status);
},
},
{
name: '显示消防站',
statusStore: statusStore.poiLayers,
statusKey: 'showFireStation' as const,
callback: (status: unknown) => {
console.log('显示消防站', status);
},
},
{
name: '显示储备点',
statusStore: statusStore.poiLayers,
statusKey: 'showReservePoint' as const,
callback: (status: unknown) => {
console.log('显示储备点', status);
},
},
{
name: '显示学校',
statusStore: statusStore.poiLayers,
statusKey: 'showSchool' as const,
callback: (status: unknown) => {
console.log('显示学校', status);
},
},
{
name: '显示人口网格',
statusStore: statusStore.poiLayers,
statusKey: 'showPopulationGrid' as const,
callback: (status: unknown) => {
console.log('显示人口网格', status);
},
},
{
name: '显示管网系统',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showNetworkSystem' as const,
callback: (status: unknown) => {
console.log('显示管网系统', status);
},
},
{
name: '显示交通道路',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showTrafficRoad' as const,
callback: (status: unknown) => {
console.log('显示交通道路', status);
},
},
{
name: '显示桥梁',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showBridge' as const,
callback: (status: unknown) => {
console.log('显示桥梁', status);
},
},
{
name: '显示高速',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showHighway' as const,
callback: (status: unknown) => {
console.log('显示高速', status);
},
},
{
name: '显示国道',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showMainRoad' as const,
callback: (status: unknown) => {
console.log('显示国道', status);
},
},
{
name: '显示水库',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showReservoir' as const,
callback: (status: unknown) => {
console.log('显示水库', status);
},
},
{
name: '显示地铁站',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showReservoir' as const,
callback: (status: unknown) => {
console.log('显示地铁站', status);
},
},
];
};
// 把所有需要用到的数据/方法 return 出去
return {
conditions,
selectOptions,
@@ -322,8 +342,8 @@ export const useRainDisasterChain = () => {
legendList,
leftButtonInfo,
rightButtonInfo,
controlPanel,
changeConditions,
changeCurrentPage,
controlPanel: getControlPanel(),
};
};
src/hooks/useLayerControl.ts
+20 -1
View File
@@ -1,4 +1,5 @@
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { useStatusStore } from '@/stores/useStatusStore';
import { LoadingResource } from '@/types/common/LoadingResourceType';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
@@ -38,5 +39,23 @@ export const useLayerControl = () => {
}
};
return { clickHiddenDangerPoint };
/**
* 点击显示医院
*/
const clickHospital = (status: unknown) => {
if (status as boolean) {
useStatusStore().poiLayers.showHospital.loading = true;
// 显示医院
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(LoadingResource.HOSPITAL)
);
} else {
// 隐藏医院
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(LoadingResource.HOSPITAL)
);
}
};
return { clickHiddenDangerPoint, clickHospital };
};
src/stores/useLoadingInformation.ts
+54 -92
View File
@@ -1,122 +1,84 @@
import type { ClickObject } from '@/types/cesium/ClickObject';
import { defineStore } from 'pinia';
import { type Ref, ref } from 'vue';
import { reactive } from 'vue';
/**
* 加载信息弹窗相关状态管理
* @returns 点击对象、隐患点/风险点状态及相关方法
* @returns 点击对象、隐患点/风险点/医院状态及相关方法
*/
export const useLoadingInformationStore = defineStore(
'loadingInformation',
() => {
// ============================ 点击对象状态 ================================
/**
* 点击的对象
*/
const clickObject: Ref<ClickObject> = ref({ id: '', primitive: null });
const clickObject = reactive<ClickObject>({ id: '', primitive: null });
// ============================ 隐患点加载状态 ================================
/**
* 隐患点加载状态
* 隐患点加载信息状态
*/
const loadingHiddenPointInformationStatus: Ref<boolean> = ref(false);
/**
* 隐患点ID
*/
const hiddenPointId: Ref<number> = ref(-1);
const hiddenPoint = reactive({
/** 加载状态 */
loading: false,
/** 隐患点ID */
id: -1,
});
// ============================ 风险点加载状态 ================================
/**
* 风险点加载状态
* 风险点加载信息状态
*/
const loadingRiskPointInformationStatus: Ref<boolean> = ref(false);
/**
* 风险点ID
*/
const riskPointId: Ref<number> = ref(-1);
const riskPoint = reactive({
/** 加载状态 */
loading: false,
/** 风险点ID */
id: -1,
});
// ============================ 医院加载状态 ================================
/**
* 重置状态
* 医院加载信息状态
*/
const hospital = reactive({
/** 加载状态 */
loading: false,
/** 医院ID */
id: -1,
});
/**
* 重置所有状态
*/
const resetStatue = () => {
loadingHiddenPointInformationStatus.value = false;
hiddenPointId.value = -1;
loadingRiskPointInformationStatus.value = false;
riskPointId.value = -1;
};
// 点击对象重置
clickObject.id = '';
clickObject.primitive = null;
/**
* 获取点击对象
* @returns 点击对象
*/
const getClickObject = () => clickObject.value;
/**
* 设置点击对象
* @param value - 点击对象
*/
const setClickObject = (value: ClickObject) => {
clickObject.value = value;
};
/**
* 获取隐患点加载状态
* @returns 加载状态
*/
const getLoadingHiddenPointInformationStatus = () =>
loadingHiddenPointInformationStatus.value;
/**
* 设置隐患点加载状态
* @param value - 加载状态
*/
const setLoadingHiddenPointInformationStatus = (value: boolean) => {
loadingHiddenPointInformationStatus.value = value;
};
/**
* 获取风险点加载状态
* @returns 加载状态
*/
const getLoadingRiskPointInformationStatus = () =>
loadingRiskPointInformationStatus.value;
/**
* 设置风险点加载状态
* @param value - 加载状态
*/
const setLoadingRiskPointInformationStatus = (value: boolean) => {
loadingRiskPointInformationStatus.value = value;
};
/**
* 获取隐患点ID
* @returns 隐患点ID
*/
const getHiddenPointId = () => hiddenPointId.value;
/**
* 设置隐患点ID
* @param value - 隐患点ID
*/
const setHiddenPointId = (value: number) => {
hiddenPointId.value = value;
};
/**
* 获取风险点ID
* @returns 风险点ID
*/
const getRiskPointId = () => riskPointId.value;
/**
* 设置风险点ID
* @param value - 风险点ID
*/
const setRiskPointId = (value: number) => {
riskPointId.value = value;
// 隐患点状态重置
hiddenPoint.loading = false;
hiddenPoint.id = -1;
// 风险点状态重置
riskPoint.loading = false;
riskPoint.id = -1;
// 医院状态重置
hospital.loading = false;
hospital.id = -1;
};
return {
clickObject,
hiddenPoint,
riskPoint,
hospital,
resetStatue,
getClickObject,
setClickObject,
getLoadingHiddenPointInformationStatus,
setLoadingHiddenPointInformationStatus,
getLoadingRiskPointInformationStatus,
setLoadingRiskPointInformationStatus,
getHiddenPointId,
setHiddenPointId,
getRiskPointId,
setRiskPointId,
};
}
);
src/stores/useStatusStore.ts
+180 -39
View File
@@ -20,9 +20,27 @@ export const useStatusStore = defineStore('status', () => {
*/
const uiComponents = reactive({
/** 图例显示状态 */
legendShow: true,
legendShow: {
show: true,
loading: true,
},
/** 灾情链影响点表格显示状态 */
disasterChainPointShow: false,
disasterChainPointShow: {
show: false,
loading: true,
},
leftButton: {
show: true,
loading: true,
},
rightButton: {
show: true,
loading: true,
},
controlPanel: {
show: true,
loading: true,
},
});
// ============================ 地图图层显示状态 ================================
@@ -32,13 +50,25 @@ export const useStatusStore = defineStore('status', () => {
*/
const mapLayers = reactive({
/** 显示行政区划 */
showAdministrativeDivision: true,
showAdministrativeDivision: {
show: true,
loading: true,
},
/** 隐患点显示状态 */
hiddenDangerPointShow: true,
hiddenDangerPointShow: {
show: true,
loading: true,
},
/** 风险点显示状态 */
riskPointShow: true,
riskPointShow: {
show: true,
loading: true,
},
/** 断裂带显示状态 */
faultShow: true,
faultShow: {
show: true,
loading: true,
},
});
/**
@@ -46,21 +76,45 @@ export const useStatusStore = defineStore('status', () => {
*/
const poiLayers = reactive({
/** 显示医院 */
showHospital: false,
showHospital: {
show: false,
loading: false,
},
/** 显示危险源 */
showDangerSource: false,
showDangerSource: {
show: false,
loading: false,
},
/** 显示避难所 */
showRefugeeShelter: false,
showRefugeeShelter: {
show: false,
loading: false,
},
/** 显示消防站 */
showFireStation: false,
showFireStation: {
show: false,
loading: false,
},
/** 显示储备点 */
showReservePoint: false,
showReservePoint: {
show: false,
loading: false,
},
/** 显示学校 */
showSchool: false,
showSchool: {
show: false,
loading: false,
},
/** 显示人口网格 */
showPopulationGrid: false,
showPopulationGrid: {
show: false,
loading: false,
},
/** 显示地铁站 */
showSubwayStation: false,
showSubwayStation: {
show: false,
loading: false,
},
});
/**
@@ -68,17 +122,35 @@ export const useStatusStore = defineStore('status', () => {
*/
const infrastructureLayers = reactive({
/** 显示管网系统 */
showNetworkSystem: false,
showNetworkSystem: {
show: false,
loading: false,
},
/** 显示交通道路 */
showTrafficRoad: false,
showTrafficRoad: {
show: false,
loading: false,
},
/** 显示桥梁 */
showBridge: false,
showBridge: {
show: false,
loading: false,
},
/** 显示高速 */
showHighway: false,
showHighway: {
show: false,
loading: false,
},
/** 显示国道 */
showMainRoad: false,
showMainRoad: {
show: false,
loading: false,
},
/** 显示水库 */
showReservoir: false,
showReservoir: {
show: false,
loading: false,
},
});
/**
@@ -89,31 +161,100 @@ export const useStatusStore = defineStore('status', () => {
appLoadingCompleted.value = false;
// UI 组件显示状态重置
uiComponents.legendShow = true;
uiComponents.disasterChainPointShow = false;
uiComponents.legendShow = {
show: true,
loading: true,
};
uiComponents.disasterChainPointShow = {
show: false,
loading: true,
};
uiComponents.leftButton = {
show: true,
loading: true,
};
uiComponents.rightButton = {
show: true,
loading: true,
};
uiComponents.controlPanel = {
show: true,
loading: true,
};
// 地图基础图层显示状态重置
mapLayers.showAdministrativeDivision = true;
mapLayers.hiddenDangerPointShow = true;
mapLayers.riskPointShow = true;
mapLayers.showAdministrativeDivision = {
show: true,
loading: true,
};
mapLayers.hiddenDangerPointShow = {
show: true,
loading: true,
};
mapLayers.riskPointShow = {
show: true,
loading: true,
};
// POI图层显示状态重置
poiLayers.showHospital = false;
poiLayers.showDangerSource = false;
poiLayers.showRefugeeShelter = false;
poiLayers.showFireStation = false;
poiLayers.showReservePoint = false;
poiLayers.showSchool = false;
poiLayers.showPopulationGrid = false;
poiLayers.showSubwayStation = false;
poiLayers.showHospital = {
show: false,
loading: false,
};
poiLayers.showDangerSource = {
show: false,
loading: false,
};
poiLayers.showRefugeeShelter = {
show: false,
loading: false,
};
poiLayers.showFireStation = {
show: false,
loading: false,
};
poiLayers.showReservePoint = {
show: false,
loading: false,
};
poiLayers.showSchool = {
show: false,
loading: false,
};
poiLayers.showPopulationGrid = {
show: false,
loading: false,
};
poiLayers.showSubwayStation = {
show: false,
loading: false,
};
// 基础设施图层显示状态重置
infrastructureLayers.showNetworkSystem = false;
infrastructureLayers.showTrafficRoad = false;
infrastructureLayers.showBridge = false;
infrastructureLayers.showHighway = false;
infrastructureLayers.showMainRoad = false;
infrastructureLayers.showReservoir = false;
infrastructureLayers.showNetworkSystem = {
show: false,
loading: false,
};
infrastructureLayers.showTrafficRoad = {
show: false,
loading: false,
};
infrastructureLayers.showBridge = {
show: false,
loading: false,
};
infrastructureLayers.showHighway = {
show: false,
loading: false,
};
infrastructureLayers.showMainRoad = {
show: false,
loading: false,
};
infrastructureLayers.showReservoir = {
show: false,
loading: false,
};
};
return {
src/types/base/XianHospitals.ts
+125
View File
@@ -0,0 +1,125 @@
import type { Point } from './Point';
/**
* 西安市医院医疗机构数据接口
*/
export interface XianHospitals extends Point {
/** 医院名称 */
name?: string;
/** 详细地址 */
address?: string;
/** 医疗卫生机构类别代码 */
typeCode?: string;
/** 医疗机构类型（大类） */
type?: string;
/** 医疗机构类型（中类） */
middleType?: string;
/** 医疗机构类型（专业） */
perferssionType?: string;
/** 医院等级 */
level?: string;
/** 医疗机构性质 */
institutionNature?: string;
/** 总面积 */
area?: number;
/** 建筑面积 */
structionArea?: number;
/** 万元以上设备数 */
devices?: number;
/** 总职工数 */
workers?: number;
/** 卫生技术人员数 */
techWorker?: number;
/** 护士数 */
nurse?: number;
/** 工勤人数 */
dedicateWorker?: number;
/** 年度总诊疗人数 */
sumPeople?: number;
/** 年度入院人数 */
inPeople?: number;
/** 年度出院人数 */
outPeople?: number;
/** 总床位 */
beds?: number;
/** 负压病床 */
negativeBeds?: number;
/** ICU病床 */
icuBeds?: number;
/** 院前急救专业人员数 */
savePeople?: number;
/** 指挥车数 */
controllerCar?: number;
/** 转运车数 */
transferCars?: number;
/** 监护车数 */
inspectorCars?: number;
/** 负压车数 */
negativeCars?: number;
/** 采血车数 */
bloodCars?: number;
/** 送血车数 */
sendBloodCars?: number;
/** 安保人员数 */
safePeople?: number;
/** 应急供电能力 */
emergencyPower?: string;
/** 供水方式 */
waterSupply?: string;
/** 供暖方式 */
heating?: string;
/** 应急通信保障方式 */
connectionType?: string;
/** 曾遭受的自然灾害类型 */
hadDisasterType?: string;
/** 已有自然灾害应急预案类型 */
emergencyPlan?: string;
/** 行政区划代码 */
governmentCode?: string;
/** 村 */
village?: string;
/** 市 */
city?: string;
/** 创建人名称 */
createName?: string;
/** 单位负责人 */
unitHead?: string;
/** 空间点 */
position?: string;
/** 统计负责人 */
statisticsHead?: string;
/** 联系电话 */
telephone?: string;
/** 省 */
province?: string;
/** 创建时间 */
createTime?: string;
/** 上报时间 */
reportTime?: string;
/** 县 */
county?: string;
/** 乡 */
country?: string;
/** 街 */
street?: string;
/** 填表人 */
fillName?: string;
/** 代码类型(统一社会信用代码/机构编码) */
institutionCodeType?: string;
/** 统一社会信用代码/机构编码 */
institutionCode?: string;
/** 物理主键 */
physicalKey?: string;
/** 省编码 */
provinceCode?: number;
/** 市编码 */
cityCode?: number;
/** 县编码 */
countyCode?: number;
/** 更新时间 */
updateTime?: string;
/** 写入时间 */
writeTime?: string;
/** 逻辑删除标识，0未删除，1已删除 */
isDelete?: number;
}
src/types/common/LoadingResourceType.ts
+3
View File
@@ -13,4 +13,7 @@ export enum LoadingResource {
* 行政区划
*/
ADMINISTRATIVE_DIVISION = 'ADMINISTRATIVE_DIVISION',
/** 医院 */
HOSPITAL = 'HOSPITAL',
}
src/views/home/earthquake/EarthquakeView.vue
+30 -3
View File
@@ -16,6 +16,10 @@
<!-- 灾害链影响列表组件 -->
<DisasterChainPointComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().uiComponents.disasterChainPointShow.loading
"
:select-options="selectOptions"
:table-data-list="tableDatas"
:table-columns="tableColumns"
@@ -25,16 +29,38 @@
/>
<!-- 图例组件 -->
<LegendComponent :legend-list="legendList" :cols-num="2" />
<LegendComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().uiComponents.legendShow.loading
"
:legend-list="legendList"
:cols-num="2"
/>
<!-- 左侧按钮组件 -->
<LeftButtonComponent :button-list="leftButtonInfo" />
<LeftButtonComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().uiComponents.leftButton.loading
"
:button-list="leftButtonInfo"
/>
<!-- 右侧按钮组件 -->
<RightButtonComponent :button-list="rightButtonInfo" />
<RightButtonComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().uiComponents.rightButton.loading
"
:button-list="rightButtonInfo"
/>
<!-- 控制显示组件 -->
<ControlShowComponent :constrol-show-list="controlPanel" />
<!-- 控制显示详情组件 -->
<ControlShowDetailComponent />
</div>
</template>
@@ -42,6 +68,7 @@
import FaultComponent from '@/component/earthquake/FaultComponent.vue';
import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
import ControlShowComponent from '@/component/rain-earthquake/ControlShowComponent.vue';
import ControlShowDetailComponent from '@/component/rain-earthquake/ControlShowDetailComponent.vue';
import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue';
import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
src/views/home/rainstorm/RainstormView.vue
+31 -3
View File
@@ -8,6 +8,10 @@
<!-- 灾害链影响列表组件 -->
<DisasterChainPointComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().uiComponents.disasterChainPointShow.loading
"
:select-options="selectOptions"
:table-data-list="tableDatas"
:table-columns="tableColumns"
@@ -17,27 +21,51 @@
/>
<!-- 图例组件 -->
<LegendComponent :legend-list="legendList" :cols-num="2" />
<LegendComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().uiComponents.legendShow.loading
"
:legend-list="legendList"
:cols-num="2"
/>
<!-- 左侧按钮组件 -->
<LeftButtonComponent :button-list="leftButtonInfo" />
<LeftButtonComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().uiComponents.leftButton.loading
"
:button-list="leftButtonInfo"
/>
<!-- 右侧按钮组件 -->
<RightButtonComponent :button-list="rightButtonInfo" />
<RightButtonComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().uiComponents.rightButton.loading
"
:button-list="rightButtonInfo"
/>
<!-- 控制显示组件 -->
<ControlShowComponent :constrol-show-list="controlPanel" />
<!-- 控制显示详情组件 -->
<ControlShowDetailComponent />
</div>
</template>
<script setup lang="ts">
import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
import ControlShowComponent from '@/component/rain-earthquake/ControlShowComponent.vue';
import ControlShowDetailComponent from '@/component/rain-earthquake/ControlShowDetailComponent.vue';
import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue';
import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
import { useStatusStore } from '@/stores/useStatusStore';
import { DisasterType } from '@/types/common/DisasterType.ts';
import { watch } from 'vue';
import { useRoute } from 'vue-router';