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-21 19:50:57 +08:00
parent 37c412468a
commit 947787f717
29 changed files with 247 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/rain-earthquake/LoadingGeoserverLayer.vue → src/component/common/LoadingGeoserverLayer.vue
+1 -1
View File
@@ -4,7 +4,7 @@
</template>
<script lang="ts" setup>
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import type { ImageryLayer } from 'cesium';
import { onMounted } from 'vue';
src/component/rain-earthquake/LoadingPoints.vue → src/component/common/LoadingPoints.vue
+4 -4
View File
@@ -5,10 +5,10 @@
<script lang="ts" setup>
import { onMounted } from 'vue';
import { usePointsHandle } from '@/hooks/usePointsHandle';
import type { Point } from '@/types/base/Point';
import type { LoadingResource } from '@/types/common/LoadingResourceType';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { usePointsHandle } from '@/hooks/usePointsHandle.ts';
import type { Point } from '@/types/base/Point.ts';
import type { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
// 属性
const props = defineProps<{
src/component/rain-earthquake/BasicComponent.vue
+2 -2
View File
@@ -26,8 +26,8 @@
<script setup lang="ts">
import MapComponent from '@/component/map/MapComponent.vue';
import type { DisasterType } from '@/types/common/DisasterType.ts';
import HiddenPointComponent from './HiddenPointComponent.vue';
import RiskPointComponent from './RiskPointComponent.vue';
import HiddenPointComponent from '@/component/rain-earthquake/basic/HiddenPointComponent.vue';
import RiskPointComponent from '@/component/rain-earthquake/basic/RiskPointComponent.vue';
import { useStatusStore } from '@/stores/useStatusStore';
// 获取父组件传递德数据
src/component/rain-earthquake/ControlShowComponent.vue
+1 -1
View File
@@ -19,7 +19,7 @@
</template>
<script lang="ts" setup>
import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
defineProps<{
constrolShowList: {
src/component/rain-earthquake/ControlShowDetailComponent.vue
+8 -8
View File
@@ -57,14 +57,14 @@
</template>
<script lang="ts" setup>
import { useStatusStore } from '@/stores/useStatusStore';
import HospitalComponent from './HospitalComponent.vue';
import DangerousSourceComponent from './DangerousSourceComponent.vue';
import EmergencyShelterComponent from './EmergencyShelterComponent.vue';
import FireStationComponent from './FireStationComponent.vue';
import StorePointsComponent from './StorePointsComponent.vue';
import PopulationGridComponent from './PopulationGridComponent.vue';
import WaterPipeComponent from './WaterPipeComponent.vue';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import HospitalComponent from './detail-panels/HospitalComponent.vue';
import DangerousSourceComponent from './detail-panels/DangerousSourceComponent.vue';
import EmergencyShelterComponent from './detail-panels/EmergencyShelterComponent.vue';
import FireStationComponent from './detail-panels/FireStationComponent.vue';
import StorePointsComponent from './detail-panels/StorePointsComponent.vue';
import PopulationGridComponent from './detail-panels/PopulationGridComponent.vue';
import WaterPipeComponent from './detail-panels/WaterPipeComponent.vue';
</script>
<style scoped lang="less"></style>
src/component/rain-earthquake/FunctionComponent.vue
+16
View File
@@ -0,0 +1,16 @@
<template>
<!-- 周边分析组件 -->
<AroundAnalysis
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().functionStatus.aroundAnalysis.loading
"
/>
</template>
<script lang="ts" setup>
import { useStatusStore } from '@/stores/useStatusStore';
import AroundAnalysis from './function-child/AroundAnalysis.vue';
</script>
<style scoped></style>
src/component/rain-earthquake/LeftButtonComponent.vue
+14 -13
View File
@@ -10,7 +10,7 @@
<button
@click="handelButton(index, buttonItem.callback)"
:style="{
'background-image': `url(${selectedButtonId == index ? leftOrangeButton : leftBlueButton})`,
'background-image': `url(${useButtonSelectedIdStore().leftButtonSelectedId == index ? leftOrangeButton : leftBlueButton})`,
}"
>
{{ buttonItem.name }}
@@ -22,11 +22,8 @@
<script setup lang="ts">
import { leftBlueButton, leftOrangeButton } from '@/assets';
import { useStatusStore } from '@/stores/useStatusStore';
import { ref, type Ref } from 'vue';
// 记录选中按钮id
const selectedButtonId: Ref<number> = ref(-1);
import { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore.ts';
import { useStatusStore } from '@/stores/useStatusStore.ts';
// 接收父组件传递的参数
const props = defineProps<{
@@ -42,20 +39,24 @@
index: number,
callback: (...args: unknown[]) => unknown
) => {
if (index == selectedButtonId.value) {
selectedButtonId.value = -1;
// 取消选中
if (index == useButtonSelectedIdStore().leftButtonSelectedId) {
callback(false);
useButtonSelectedIdStore().leftButtonSelectedId = -1;
return;
} else if (
selectedButtonId.value != -1 &&
selectedButtonId.value != index
useButtonSelectedIdStore().leftButtonSelectedId != -1 &&
useButtonSelectedIdStore().leftButtonSelectedId != index
) {
console.error('当前按钮选中有误，请选择正确的按钮。');
return;
}
selectedButtonId.value = index;
callback();
useButtonSelectedIdStore().leftButtonSelectedId = index;
callback(true);
// 如果该按钮只执行一次，则取消选中
if (props.buttonList[index].executeOnce) {
selectedButtonId.value = -1;
useButtonSelectedIdStore().leftButtonSelectedId = -1;
}
};
</script>
src/component/rain-earthquake/RightButtonComponent.vue
+13 -12
View File
@@ -1,11 +1,14 @@
<template>
<div class="right-button-box">
<div
class="right-button-box"
v-show="useStatusStore().uiComponents.rightButton.show"
>
<ul class="right-button-ul">
<li v-for="(buttonItem, index) in buttonList" :key="index">
<button
@click="handelButton(index, buttonItem.callback)"
:style="{
'background-image': `url(${selectedButtonId == index ? rightOrangeButton : rightBlueButton})`,
'background-image': `url(${useButtonSelectedIdStore().rightButtonSelectedId == index ? rightOrangeButton : rightBlueButton})`,
}"
>
{{ buttonItem.name }}
@@ -17,10 +20,8 @@
<script setup lang="ts">
import { rightBlueButton, rightOrangeButton } from '@/assets';
import { ref, type Ref } from 'vue';
// 记录选中按钮id
const selectedButtonId: Ref<number> = ref(-1);
import { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore.ts';
import { useStatusStore } from '@/stores/useStatusStore.ts';
// 接收父组件传递的参数
const props = defineProps<{
@@ -36,19 +37,19 @@
index: number,
callback: (...args: unknown[]) => unknown
) => {
if (index == selectedButtonId.value) {
selectedButtonId.value = -1;
if (index == useButtonSelectedIdStore().rightButtonSelectedId) {
useButtonSelectedIdStore().rightButtonSelectedId = -1;
return;
} else if (
selectedButtonId.value != -1 &&
selectedButtonId.value != index
useButtonSelectedIdStore().rightButtonSelectedId != -1 &&
useButtonSelectedIdStore().rightButtonSelectedId != index
) {
return;
}
selectedButtonId.value = index;
useButtonSelectedIdStore().rightButtonSelectedId = index;
callback();
if (props.buttonList[index].executeOnce) {
selectedButtonId.value = -1;
useButtonSelectedIdStore().rightButtonSelectedId = -1;
}
};
</script>
src/component/rain-earthquake/HiddenPointComponent.vue → src/component/rain-earthquake/basic/HiddenPointComponent.vue
+8 -8
View File
@@ -28,16 +28,16 @@
import { DisasterType } from '@/types/common/DisasterType.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 type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/LoadingPoints.vue';
import config from '@/config/config.json';
import InformationBox from '@/component/common/InformationBox.vue';
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';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint.ts';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
// 接收父组件传递的参数
const props = defineProps<{
src/component/rain-earthquake/RiskPointComponent.vue → src/component/rain-earthquake/basic/RiskPointComponent.vue
+8 -8
View File
@@ -27,16 +27,16 @@
<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 type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/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 { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint';
import { LoadingResource } from '@/types/common/LoadingResourceType';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
const riskPoints = ref<Point[]>([]);
src/component/rain-earthquake/DangerousSourceComponent.vue → src/component/rain-earthquake/detail-panels/DangerousSourceComponent.vue
+8 -8
View File
@@ -29,16 +29,16 @@
<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 type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/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 { useDangerousSourcePoint } from '@/hooks/rain-earthquake/useDangerousSourcePoint';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useDangerousSourcePoint } from '@/hooks/rain-earthquake/useDangerousSourcePoint.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
const dangerousSourcePoints = ref<Point[]>([]);
src/component/rain-earthquake/EmergencyShelterComponent.vue → src/component/rain-earthquake/detail-panels/EmergencyShelterComponent.vue
+8 -8
View File
@@ -30,16 +30,16 @@
<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 type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/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 { useEmergencyShelterPoint } from '@/hooks/rain-earthquake/useEmergencyShelterPoint';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useEmergencyShelterPoint } from '@/hooks/rain-earthquake/useEmergencyShelterPoint.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
const emergencyShelterPoints = ref<Point[]>([]);
src/component/rain-earthquake/FireStationComponent.vue → src/component/rain-earthquake/detail-panels/FireStationComponent.vue
+8 -8
View File
@@ -29,16 +29,16 @@
<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 type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/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 { useFireStationPoint } from '@/hooks/rain-earthquake/useFireStationPoint';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useFireStationPoint } from '@/hooks/rain-earthquake/useFireStationPoint.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
const fireStationPoints = ref<Point[]>([]);
src/component/rain-earthquake/HospitalComponent.vue → src/component/rain-earthquake/detail-panels/HospitalComponent.vue
+8 -8
View File
@@ -27,16 +27,16 @@
<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 type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/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';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useHospitalPoint } from '@/hooks/rain-earthquake/useHospitalPoint.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
const hospitalPoints = ref<Point[]>([]);
src/component/rain-earthquake/PopulationGridComponent.vue → src/component/rain-earthquake/detail-panels/PopulationGridComponent.vue
+2 -2
View File
@@ -8,10 +8,10 @@
</template>
<script lang="ts" setup>
import { useStatusStore } from '@/stores/useStatusStore';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import type { ImageryLayer } from 'cesium';
import { onMounted, watch } from 'vue';
import LoadingGeoserverLayer from './LoadingGeoserverLayer.vue';
import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
// 保存图层引用
let populationLayer: ImageryLayer | null = null;
src/component/rain-earthquake/StorePointsComponent.vue → src/component/rain-earthquake/detail-panels/StorePointsComponent.vue
+8 -8
View File
@@ -29,16 +29,16 @@
<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 type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/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 { useStorePointsPoint } from '@/hooks/rain-earthquake/useStorePointsPoint';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useStorePointsPoint } from '@/hooks/rain-earthquake/useStorePointsPoint.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
const storePointsList = ref<Point[]>([]);
src/component/rain-earthquake/WaterPipeComponent.vue → src/component/rain-earthquake/detail-panels/WaterPipeComponent.vue
+2 -2
View File
@@ -8,10 +8,10 @@
</template>
<script lang="ts" setup>
import { useStatusStore } from '@/stores/useStatusStore';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import type { ImageryLayer } from 'cesium';
import { onMounted, watch } from 'vue';
import LoadingGeoserverLayer from './LoadingGeoserverLayer.vue';
import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
// 保存图层引用
let waterPipeLayer: ImageryLayer | null = null;
src/component/rain-earthquake/function-child/AroundAnalysis.vue
+24
View File
@@ -0,0 +1,24 @@
<template>
<div
class="around-analysis-box"
v-show="useStatusStore().functionStatus.aroundAnalysis.show"
>
<!-- 搜索组件 -->
<SearchComponent />
<!-- 按钮组件 -->
<ButtonComponent />
<!-- 具体功能组件 -->
<AroundAnalysisDetailComponent />
</div>
</template>
<script lang="ts" setup>
import { useStatusStore } from '@/stores/useStatusStore';
import AroundAnalysisDetailComponent from './around-analysis/AroundAnalysisDetailComponent.vue';
import ButtonComponent from './around-analysis/ButtonComponent.vue';
import SearchComponent from './around-analysis/SearchComponent.vue';
</script>
<style scoped></style>
src/component/rain-earthquake/function-child/around-analysis/AroundAnalysisDetailComponent.vue
+7
View File
@@ -0,0 +1,7 @@
<template>
<div></div>
</template>
<script lang="ts" setup></script>
<style scoped></style>
src/component/rain-earthquake/function-child/around-analysis/ButtonComponent.vue
+7
View File
@@ -0,0 +1,7 @@
<template>
<div></div>
</template>
<script lang="ts" setup></script>
<style scoped></style>
src/component/rain-earthquake/function-child/around-analysis/SearchComponent.vue
+8
View File
@@ -0,0 +1,8 @@
<!-- 搜索组件 -->
<template>
<div></div>
</template>
<script lang="ts"></script>
<style scoped></style>