右侧控制显示面板，同时规整显示隐藏点的逻辑

components.d.ts

@@ -12,6 +12,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElIcon: typeof import('element-plus/es')['ElIcon']

src/App.vue

@@ -16,7 +16,7 @@
   let loadingInstanve = ElLoading.service(loadingOption);
 
   watch(
-    () => useStatusStore().getAppLoadingCompleted(),
+    () => useStatusStore().appLoadingCompleted,
     (val) => {
       if (val) {
         loadingInstanve.close();

src/component/common/InformationBox.vue

@@ -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

@@ -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);
 
-    // 根据状态显示隐藏行政区划
+    // 记录行政区划id
-    if (!useStatusStore().getShowAdministrativeDivision()) {
+    useLoadingResourceStore().addLoadingResource(
-      CesiumUtilsSingleton.batchHideGeoJsonLayers(areasId);
+      LoadingResource.ADMINISTRATIVE_DIVISION,
-    }
+      areasId
+    );
   });
 </script>
 

src/component/map/MapComponent.vue

@@ -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

@@ -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

@@ -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

@@ -6,13 +6,15 @@
       type="primary"
       @click="changeStatus"
       circle
-      :title="`${useStatusStore().getDisasterChainPointShow() ? '关闭' : '打开'}灾害链影响点列表`"
+      :title="`${useStatusStore().uiComponents.disasterChainPointShow ? '关闭' : '打开'}灾害链影响点列表`"
-      >{{ useStatusStore().getDisasterChainPointShow() ? '-' : '+' }}</el-button
+      >{{
+        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().uiComponents.disasterChainPointShow =
-      !useStatusStore().getDisasterChainPointShow()
+      !useStatusStore().uiComponents.disasterChainPointShow;
-    );
   };
 
   // 上一页

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -3,14 +3,12 @@
   <div>
     <!-- 加载基础隐患点 -->
     <LoadingPoints
-      v-if="
+      v-if="useStatusStore().appLoadingCompleted && baseHiddenPoints.length > 0"
-        useStatusStore().getAppLoadingCompleted() && 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

@@ -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

@@ -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() ? '关闭' : '打开'}图例`"
+      :title="`${useStatusStore().uiComponents.legendShow ? '关闭' : '打开'}图例`"
-      >{{ useStatusStore().getLegendShow() ? '-' : '+' }}</el-button
+      >{{ 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

@@ -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
     );
 
-    // 显示隐藏点
+    // 记录id
-    if (!props.showPoints) {
+    useLoadingResourceStore().addLoadingResource(
-      CesiumUtilsSingleton.batchTogglePrimitives(ids, props.showPoints);
+      props.loadingResourceField!,
-    }
+      ids
+    );
   });
 </script>
 

src/component/rain-earthquake/RiskPointComponent.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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 infrastructureLayers = reactive({
-
+    /** 显示管网系统 */
-  /**
+    showNetworkSystem: false,
-   * 风险点显示状态
+    /** 显示交通道路 */
-   */
+    showTrafficRoad: false,
-  const riskPointShow = ref(true);
+    /** 显示桥梁 */
-
+    showBridge: false,
-  /**
+    /** 显示高速 */
-   * 获取应用加载完成状态
+    showHighway: false,
-   * @returns 加载完成状态
+    /** 显示国道 */
-   */
+    showMainRoad: false,
-  const getAppLoadingCompleted = () => appLoadingCompleted.value;
+    /** 显示水库 */
-  /**
+    showReservoir: false,
-   * 设置应用加载完成状态
+  });
-   * @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;
-  };
 
   return {
-    getAppLoadingCompleted,
+    appLoadingCompleted,
-    setAppLoadingCompleted,
+    uiComponents,
-    getShowAdministrativeDivision,
+    mapLayers,
-    setShowAdministrativeDivision,
+    poiLayers,
-    getDisasterChainPointShow,
+    infrastructureLayers,
-    setDisasterChainPointShow,
-    getLegendShow,
-    setLegendShow,
-    getHiddenDangerPointShow,
-    setHiddenDangerPointShow,
-    getRiskPointShow,
-    setRiskPointShow,
   };
 });

src/types/common/LoadingResourceType.ts

@@ -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

@@ -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

@@ -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();