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-15 22:41:06 +08:00
parent df1fb2aea3
commit 459940d425
20 changed files with 520 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -1
View File
@@ -16,7 +16,7 @@
let loadingInstanve = ElLoading.service(loadingOption);
watch(
() => useStatusStore().getAppLoadingCompleted(),
() => useStatusStore().appLoadingCompleted,
(val) => {
if (val) {
loadingInstanve.close();
src/component/common/InformationBox.vue
+1 -1
View File
@@ -56,7 +56,7 @@
// 数据转换
Object.entries(props.data).forEach(([key, value]) => {
// 判读key是不是存在field中，存在就添加到表格数据，不存在则不添加
// 判断key是不是存在field中，存在就添加到表格数据，不存在则不添加
if (Object.hasOwn(props.field, key) && value) {
tableDatas.value.push({
title: props.field[key],
src/component/map/AdministrativeDivision.vue
+7 -5
View File
@@ -5,7 +5,8 @@
<script lang="ts" setup>
import { useAdministrativeDivision } from '@/hooks/map/useAdministrativeDivision';
import { useStatusStore } from '@/stores/useStatusStore';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { LoadingResource } from '@/types/common/LoadingResourceType';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import { Color } from 'cesium';
import { onMounted } from 'vue';
@@ -42,10 +43,11 @@
await CesiumUtilsSingleton.batchAddGeoJsonLayers(layerConfigs);
// 根据状态显示隐藏行政区划
if (!useStatusStore().getShowAdministrativeDivision()) {
CesiumUtilsSingleton.batchHideGeoJsonLayers(areasId);
}
// 记录行政区划id
useLoadingResourceStore().addLoadingResource(
LoadingResource.ADMINISTRATIVE_DIVISION,
areasId
);
});
</script>
src/component/map/MapComponent.vue
+3 -3
View File
@@ -2,7 +2,7 @@
<div class="map_container" id="map-container"></div>
<!-- 行政区划 -->
<AdministrativeDivision v-if="useStatusStore().getAppLoadingCompleted()" />
<AdministrativeDivision v-if="useStatusStore().appLoadingCompleted" />
</template>
<script lang="ts" setup>
@@ -21,7 +21,7 @@
onBeforeMount(() => {
// 初始化为false
useStatusStore().setAppLoadingCompleted(false);
useStatusStore().appLoadingCompleted = false;
// 重置状态
useLoadingInformationStore().resetStatue();
@@ -42,7 +42,7 @@
});
// 设置状态
useStatusStore().setAppLoadingCompleted(true);
useStatusStore().appLoadingCompleted = true;
// 注册全局点击监听器
useMap().registerAndClickOnTheListener();
src/component/rain-earthquake/BasicComponent.vue
+2 -2
View File
@@ -7,11 +7,11 @@
<!-- 隐患点组件 -->
<HiddenPointComponent
:disaster-type="props.disasterType"
v-if="useStatusStore().getAppLoadingCompleted()"
v-if="useStatusStore().appLoadingCompleted"
/>
<!-- 风险点组件 -->
<RiskPointComponent v-if="useStatusStore().getAppLoadingCompleted()" />
<RiskPointComponent v-if="useStatusStore().appLoadingCompleted" />
</div>
</template>
src/component/rain-earthquake/ControlShowComponent.vue
+65
View File
@@ -0,0 +1,65 @@
<template>
<div class="control-show-panel-box">
<div class="title-box">
<header>控制显示</header>
</div>
<div class="control-show-list">
<div v-for="(item, index) in constrolShowList" :key="index">
<el-checkbox
v-model="item.selected"
:label="item.name"
@change="item.callback(item.selected)"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
defineProps<{
constrolShowList: {
name: string;
selected: boolean;
callback: (...args: unknown[]) => unknown;
}[];
}>();
</script>
<style scoped>
.control-show-panel-box {
position: absolute;
top: 75px;
right: 0px;
border-radius: 2px;
z-index: 1000;
width: 160px;
overflow: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: white;
border: 1px solid rgb(0, 225, 255);
}
.title-box {
font-weight: bold;
font-size: 12px;
background: linear-gradient(
180deg,
rgb(86, 204, 242) 0%,
rgb(47, 128, 237) 100%
);
padding: 8px;
text-align: center;
}
.control-show-list {
background: rgba(14, 52, 98, 0.8);
padding: 8px;
display: flex;
flex-direction: column;
font-size: 12px;
gap: 6px;
}
:deep(.el-checkbox) {
height: auto;
color: #fff;
}
</style>
src/component/rain-earthquake/DisasterChainPointComponent.vue
+7 -6
View File
@@ -6,13 +6,15 @@
type="primary"
@click="changeStatus"
circle
:title="`${useStatusStore().getDisasterChainPointShow() ? '关闭' : '打开'}灾害链影响点列表`"
>{{ useStatusStore().getDisasterChainPointShow() ? '-' : '+' }}</el-button
:title="`${useStatusStore().uiComponents.disasterChainPointShow ? '关闭' : '打开'}灾害链影响点列表`"
>{{
useStatusStore().uiComponents.disasterChainPointShow ? '-' : '+'
}}</el-button
>
</div>
<div
class="disaster-list-box"
v-show="useStatusStore().getDisasterChainPointShow()"
v-show="useStatusStore().uiComponents.disasterChainPointShow"
>
<header class="table-title">
<span>灾害链影响点列表</span>
@@ -122,9 +124,8 @@
// 切换面板显示状态
const changeStatus = () => {
useStatusStore().setDisasterChainPointShow(
!useStatusStore().getDisasterChainPointShow()
);
useStatusStore().uiComponents.disasterChainPointShow =
!useStatusStore().uiComponents.disasterChainPointShow;
};
// 上一页
src/component/rain-earthquake/HiddenPointComponent.vue
+4 -5
View File
@@ -3,14 +3,12 @@
<div>
<!-- 加载基础隐患点 -->
<LoadingPoints
v-if="
useStatusStore().getAppLoadingCompleted() && baseHiddenPoints.length > 0
"
v-if="useStatusStore().appLoadingCompleted && baseHiddenPoints.length > 0"
:base-points="baseHiddenPoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.hiddenDangerPointId"
:show-points="useStatusStore().getHiddenDangerPointShow()"
:is-default="true"
:loading-resource-field="LoadingResource.HIDDEN_DANGER_POINT"
/>
<!-- 显示信息框 -->
@@ -36,10 +34,11 @@
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 { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint';
import { useStatusStore } from '@/stores/useStatusStore';
import { LoadingResource } from '@/types/common/LoadingResourceType';
// 接收父组件传递的参数
const props = defineProps<{
src/component/rain-earthquake/LeftButtonComponent.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div
class="left-button-box"
:style="{
left: `${useStatusStore().getDisasterChainPointShow() ? 575 : 100}px`,
left: `${useStatusStore().uiComponents.disasterChainPointShow ? 575 : 100}px`,
}"
>
<ul class="left-button-ul">
src/component/rain-earthquake/LegendComponent.vue
+6 -5
View File
@@ -4,17 +4,17 @@
<div
class="control-box"
:style="{
bottom: `${useStatusStore().getLegendShow() ? 248 : 25}px`,
bottom: `${useStatusStore().uiComponents.legendShow ? 248 : 25}px`,
}"
>
<el-button
@click="changeStatus"
circle
:title="`${useStatusStore().getLegendShow() ? '关闭' : '打开'}图例`"
>{{ useStatusStore().getLegendShow() ? '-' : '+' }}</el-button
:title="`${useStatusStore().uiComponents.legendShow ? '关闭' : '打开'}图例`"
>{{ useStatusStore().uiComponents.legendShow ? '-' : '+' }}</el-button
>
</div>
<div class="legend-box" v-show="useStatusStore().getLegendShow()">
<div class="legend-box" v-show="useStatusStore().uiComponents.legendShow">
<div class="title-box">
<header>图例</header>
</div>
@@ -55,7 +55,8 @@
// 切换图例显示状态
const changeStatus = () => {
useStatusStore().setLegendShow(!useStatusStore().getLegendShow());
useStatusStore().uiComponents.legendShow =
!useStatusStore().uiComponents.legendShow;
};
onMounted(() => {
src/component/rain-earthquake/LoadingPoints.vue
+8 -6
View File
@@ -7,15 +7,16 @@
import { onMounted } from 'vue';
import { usePointsHandle } from '@/hooks/usePointsHandle';
import type { Point } from '@/types/base/Point';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import type { LoadingResource } from '@/types/common/LoadingResourceType';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
// 属性
const props = defineProps<{
basePoints: Point[];
getDisasterIcon: (disasterType?: string) => string;
prefix: string;
showPoints: boolean;
isDefault?: boolean;
loadingResourceField?: LoadingResource;
}>();
// 点处理钩子
@@ -30,10 +31,11 @@
props.isDefault
);
// 显示隐藏点
if (!props.showPoints) {
CesiumUtilsSingleton.batchTogglePrimitives(ids, props.showPoints);
}
// 记录id
useLoadingResourceStore().addLoadingResource(
props.loadingResourceField!,
ids
);
});
</script>
src/component/rain-earthquake/RiskPointComponent.vue
+3 -2
View File
@@ -3,12 +3,12 @@
<div>
<!-- 加载风险点 -->
<LoadingPoints
v-if="useStatusStore().getAppLoadingCompleted() && riskPoints.length > 0"
v-if="useStatusStore().appLoadingCompleted && riskPoints.length > 0"
:base-points="riskPoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.riskPointId"
:show-points="useStatusStore().getRiskPointShow()"
:is-default="true"
:loading-resource-field="LoadingResource.RISK_POINT"
/>
<!-- 显示信息框 -->
@@ -35,6 +35,7 @@
import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint';
import { LoadingResource } from '@/types/common/LoadingResourceType';
const riskPoints = ref<Point[]>([]);
src/hooks/earthquake/useEarthquakeDisasterChain.ts
+177
View File
@@ -2,6 +2,11 @@ import { ref } from 'vue';
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
import type { PaginationType } from '@/types/common/PaginationType';
import { PointType } from '@/types/common/DisasterType';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import config from '@/config/config.json';
import { useStatusStore } from '@/stores/useStatusStore';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { LoadingResource } from '@/types/common/LoadingResourceType';
/**
* 暴雨灾害链影响点列表钩子函数
@@ -123,6 +128,176 @@ export const useEarthquakeDisasterChain = () => {
},
];
/**
* 右侧按钮信息
*/
const rightButtonInfo = [
{
name: '地震模拟',
callback: () => {
console.log('地震模拟');
},
},
{
name: '图件下载',
callback: () => {
console.log('图件下载');
},
},
{
name: '清除模拟',
callback: () => {
CesiumUtilsSingleton.clearAllResources('custom');
},
executeOnce: true,
},
{
name: '视角重置',
callback: () => {
CesiumUtilsSingleton.flyToTarget(
config.defaultPosition as [number, number, number]
);
},
executeOnce: true,
},
];
const controlPanel = ref([
{
name: '显示隐患点',
selected: useStatusStore().mapLayers.hiddenDangerPointShow,
callback: (status: unknown) => {
if (status as boolean) {
// 显示隐患点
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(
LoadingResource.HIDDEN_DANGER_POINT
)
);
// 显示风险点
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(
LoadingResource.RISK_POINT
)
);
} else {
// 隐藏隐患点
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(
LoadingResource.HIDDEN_DANGER_POINT
)
);
// 隐藏风险点
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(
LoadingResource.RISK_POINT
)
);
}
},
},
{
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('显示地铁站');
},
},
]);
// 把所有需要用到的数据/方法 return 出去
return {
conditions,
@@ -131,6 +306,8 @@ export const useEarthquakeDisasterChain = () => {
tableColumns,
paginationConfig,
leftButtonInfo,
rightButtonInfo,
controlPanel,
changeConditions,
changeCurrentPage,
};
src/hooks/rainstorm/useRainDisasterChain.ts
+105 -2
View File
@@ -4,6 +4,7 @@ import type { PaginationType } from '@/types/common/PaginationType';
import { PointType } from '@/types/common/DisasterType';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import config from '@/config/config.json';
import { useStatusStore } from '@/stores/useStatusStore';
/**
* 暴雨灾害链影响点列表钩子函数
@@ -143,9 +144,9 @@ export const useRainDisasterChain = () => {
*/
const rightButtonInfo = [
{
name: '暴雨下载',
name: '暴雨触发',
callback: () => {
console.log('暴雨下载');
console.log('暴雨触发');
},
},
{
@@ -184,6 +185,107 @@ 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('显示地铁站');
},
},
];
// 把所有需要用到的数据/方法 return 出去
return {
conditions,
@@ -193,6 +295,7 @@ export const useRainDisasterChain = () => {
paginationConfig,
leftButtonInfo,
rightButtonInfo,
controlPanel,
changeConditions,
changeCurrentPage,
};
src/stores/useLoadingResourceStore.ts
+35
View File
@@ -0,0 +1,35 @@
import type { LoadingResource } from '@/types/common/LoadingResourceType';
import { defineStore } from 'pinia';
import { ref, type Ref } from 'vue';
// 存储按需加载的数据
export const useLoadingResourceStore = defineStore('loadingResource', () => {
const loadingResource: Ref<Partial<Record<LoadingResource, string[]>>> = ref(
{}
);
// 添加数据
const addLoadingResource = (key: LoadingResource, value: string[]) => {
loadingResource.value[key] = value;
};
// 删除数据
const removeLoadingResource = (key: LoadingResource) => {
if (Object.hasOwn(loadingResource.value, key)) {
delete loadingResource.value[key];
}
};
/**
* 获取数据
*/
const getLoadingResource = (key: LoadingResource) => {
return loadingResource.value[key] || [];
};
return {
getLoadingResource,
addLoadingResource,
removeLoadingResource,
};
});
src/stores/useStatusStore.ts
+63 -105
View File
@@ -1,131 +1,89 @@
import { defineStore } from 'pinia';
import { type Ref, ref } from 'vue';
import { reactive, ref } from 'vue';
/**
* 全局状态管理
* @returns 应用状态及相关方法
*/
export const useStatusStore = defineStore('status', () => {
// ============================ 应用级状态 ================================
/**
* 应用加载完成状态
*/
const appLoadingCompleted: Ref<boolean> = ref(false);
const appLoadingCompleted = ref(false);
// ============================ UI 组件显示状态 ================================
/**
* 显示行政区划
* UI 组件显示状态集合
*/
const showAdministrativeDivision = ref(true);
const uiComponents = reactive({
/** 图例显示状态 */
legendShow: true,
/** 灾情链影响点表格显示状态 */
disasterChainPointShow: false,
});
// ============================ 地图图层显示状态 ================================
/**
* 灾情链影响点表格显示状态
* 地图基础图层显示状态
*/
const disasterChainPointShow = ref(false);
const mapLayers = reactive({
/** 显示行政区划 */
showAdministrativeDivision: true,
/** 隐患点显示状态 */
hiddenDangerPointShow: true,
/** 风险点显示状态 */
riskPointShow: true,
});
/**
* 图例显示状态
* POI图层显示状态
*/
const legendShow = ref(true);
const poiLayers = reactive({
/** 显示医院 */
showHospital: false,
/** 显示危险源 */
showDangerSource: false,
/** 显示避难所 */
showRefugeeShelter: false,
/** 显示消防站 */
showFireStation: false,
/** 显示储备点 */
showReservePoint: false,
/** 显示学校 */
showSchool: false,
/** 显示人口网格 */
showPopulationGrid: false,
/** 显示地铁站 */
showSubwayStation: false,
});
/**
* 隐患点显示状态
* 基础设施图层显示状态
*/
const hiddenDangerPointShow = ref(true);
/**
* 风险点显示状态
*/
const riskPointShow = ref(true);
/**
* 获取应用加载完成状态
* @returns 加载完成状态
*/
const getAppLoadingCompleted = () => appLoadingCompleted.value;
/**
* 设置应用加载完成状态
* @param value - 加载完成状态
*/
const setAppLoadingCompleted = (value: boolean) => {
appLoadingCompleted.value = value;
};
/**
* 获取显示行政区划
* @returns 显示行政区划
*/
const getShowAdministrativeDivision = () => showAdministrativeDivision.value;
/**
* 设置显示行政区划
* @param value - 显示行政区划
*/
const setShowAdministrativeDivision = (value: boolean) => {
showAdministrativeDivision.value = value;
};
/**
* 获取灾情链影响点表格显示状态
* @returns 灾情链影像点表格显示状态
*/
const getDisasterChainPointShow = () => disasterChainPointShow.value;
/**
* 设置灾情链影响点表格显示状态
* @param value - 灾情链影像点表格显示状态
*/
const setDisasterChainPointShow = (value: boolean) => {
disasterChainPointShow.value = value;
};
/**
* 获取图例显示状态
* @returns 图例显示状态
*/
const getLegendShow = () => legendShow.value;
/**
* 设置图例显示状态
* @param value - 图例显示状态
*/
const setLegendShow = (value: boolean) => {
legendShow.value = value;
};
/**
* 获取隐患点显示状态
* @returns 隐患点显示状态
*/
const getHiddenDangerPointShow = () => hiddenDangerPointShow.value;
/**
* 设置隐患点显示状态
* @param value - 隐患点显示状态
*/
const setHiddenDangerPointShow = (value: boolean) => {
hiddenDangerPointShow.value = value;
};
/**
* 获取风险点显示状态
* @returns 风险点显示状态
*/
const getRiskPointShow = () => riskPointShow.value;
/**
* 设置风险点显示状态
* @param value - 风险点显示状态
*/
const setRiskPointShow = (value: boolean) => {
riskPointShow.value = value;
};
const infrastructureLayers = reactive({
/** 显示管网系统 */
showNetworkSystem: false,
/** 显示交通道路 */
showTrafficRoad: false,
/** 显示桥梁 */
showBridge: false,
/** 显示高速 */
showHighway: false,
/** 显示国道 */
showMainRoad: false,
/** 显示水库 */
showReservoir: false,
});
return {
getAppLoadingCompleted,
setAppLoadingCompleted,
getShowAdministrativeDivision,
setShowAdministrativeDivision,
getDisasterChainPointShow,
setDisasterChainPointShow,
getLegendShow,
setLegendShow,
getHiddenDangerPointShow,
setHiddenDangerPointShow,
getRiskPointShow,
setRiskPointShow,
appLoadingCompleted,
uiComponents,
mapLayers,
poiLayers,
infrastructureLayers,
};
});
src/types/common/LoadingResourceType.ts
+16
View File
@@ -0,0 +1,16 @@
export enum LoadingResource {
/**
* 隐患点
*/
HIDDEN_DANGER_POINT = 'HIDDEN_DANGER_POINT',
/**
* 风险点
*/
RISK_POINT = 'RISK_POINT',
/**
* 行政区划
*/
ADMINISTRATIVE_DIVISION = 'ADMINISTRATIVE_DIVISION',
}
src/views/home/earthquake/EarthquakeView.vue
+10
View File
@@ -21,14 +21,22 @@
<!-- 左侧按钮组件 -->
<LeftButtonComponent :button-list="leftButtonInfo" />
<!-- 右侧按钮组件 -->
<RightButtonComponent :button-list="rightButtonInfo" />
<!-- 控制显示组件 -->
<ControlShowComponent :constrol-show-list="controlPanel" />
</div>
</template>
<script setup lang="ts">
import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
import ControlShowComponent from '@/component/rain-earthquake/ControlShowComponent.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 { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain';
import { useEarthquakeLegend } from '@/hooks/earthquake/useEarthquakeLegend';
import { DisasterType } from '@/types/common/DisasterType.ts';
@@ -44,6 +52,8 @@
tableColumns,
paginationConfig,
leftButtonInfo,
rightButtonInfo,
controlPanel,
changeConditions,
changeCurrentPage,
} = useEarthquakeDisasterChain();
src/views/home/rainstorm/RainstormView.vue
+5
View File
@@ -24,11 +24,15 @@
<!-- 右侧按钮组件 -->
<RightButtonComponent :button-list="rightButtonInfo" />
<!-- 控制显示组件 -->
<ControlShowComponent :constrol-show-list="controlPanel" />
</div>
</template>
<script setup lang="ts">
import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
import ControlShowComponent from '@/component/rain-earthquake/ControlShowComponent.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';
@@ -49,6 +53,7 @@
paginationConfig,
leftButtonInfo,
rightButtonInfo,
controlPanel,
changeConditions,
changeCurrentPage,
} = useRainDisasterChain();