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

src/api/api.ts

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

@@ -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/index.ts

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

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

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

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

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

@@ -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.show =
-      !useStatusStore().uiComponents.disasterChainPointShow;
+      !useStatusStore().uiComponents.disasterChainPointShow.show;
   };
 
   // 上一页

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -15,13 +15,11 @@
     <InformationBox
       :data="hiddenDangerPointDetail as Record<string, any>"
       :field="field"
-      v-if="
+      v-if="useLoadingInformationStore().hiddenPoint.loading"
-        useLoadingInformationStore().getLoadingHiddenPointInformationStatus()
-      "
       :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(
+        useLoadingInformationStore().hiddenPoint.loading = true;
-          true
-        );
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }

src/component/rain-earthquake/HospitalComponent.vue

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

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

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

src/component/rain-earthquake/RiskPointComponent.vue

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

@@ -35,6 +35,7 @@
   },
   "prefix": {
     "hiddenDangerPointId": "hidden-danger-point-",
-    "riskPointId": "risk-point-"
+    "riskPointId": "risk-point-",
+    "hospitalPointId": "hospital-point-"
   }
 }

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -176,113 +176,133 @@ export const useEarthquakeDisasterChain = () => {
   ];
 
   // ================控制面板================================
-  const controlPanel = ref([
+  /**
+   * 控制面板信息
+   */
+  const getControlPanel = () => {
+    const statusStore = useStatusStore();
+    const layerControl = useLayerControl();
+
+    return [
       {
         name: '显示隐患点',
-      selected: useStatusStore().mapLayers.hiddenDangerPointShow,
+        statusStore: statusStore.mapLayers,
-      callback: useLayerControl().clickHiddenDangerPoint,
+        statusKey: 'hiddenDangerPointShow' as const,
+        callback: layerControl.clickHiddenDangerPoint,
       },
       {
         name: '显示医院',
-      selected: useStatusStore().poiLayers.showHospital,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showHospital' as const,
-        console.log('显示医院');
+        callback: layerControl.clickHospital,
-      },
       },
       {
         name: '显示危险源',
-      selected: useStatusStore().poiLayers.showDangerSource,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showDangerSource' as const,
-        console.log('显示危险源');
+        callback: (status: unknown) => {
+          console.log('显示危险源', status);
         },
       },
       {
         name: '显示避难所',
-      selected: useStatusStore().poiLayers.showRefugeeShelter,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showRefugeeShelter' as const,
-        console.log('显示避难所');
+        callback: (status: unknown) => {
+          console.log('显示避难所', status);
         },
       },
       {
         name: '显示消防站',
-      selected: useStatusStore().poiLayers.showFireStation,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showFireStation' as const,
-        console.log('显示消防站');
+        callback: (status: unknown) => {
+          console.log('显示消防站', status);
         },
       },
       {
         name: '显示储备点',
-      selected: useStatusStore().poiLayers.showReservePoint,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showReservePoint' as const,
-        console.log('显示储备点');
+        callback: (status: unknown) => {
+          console.log('显示储备点', status);
         },
       },
       {
         name: '显示学校',
-      selected: useStatusStore().poiLayers.showSchool,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showSchool' as const,
-        console.log('显示学校');
+        callback: (status: unknown) => {
+          console.log('显示学校', status);
         },
       },
       {
         name: '显示人口网格',
-      selected: useStatusStore().poiLayers.showPopulationGrid,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showPopulationGrid' as const,
-        console.log('显示人口网格');
+        callback: (status: unknown) => {
+          console.log('显示人口网格', status);
         },
       },
       {
         name: '显示管网系统',
-      selected: useStatusStore().infrastructureLayers.showNetworkSystem,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showNetworkSystem' as const,
-        console.log('显示管网系统');
+        callback: (status: unknown) => {
+          console.log('显示管网系统', status);
         },
       },
       {
         name: '显示交通道路',
-      selected: useStatusStore().infrastructureLayers.showTrafficRoad,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showTrafficRoad' as const,
-        console.log('显示交通道路');
+        callback: (status: unknown) => {
+          console.log('显示交通道路', status);
         },
       },
       {
         name: '显示桥梁',
-      selected: useStatusStore().infrastructureLayers.showBridge,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showBridge' as const,
-        console.log('显示桥梁');
+        callback: (status: unknown) => {
+          console.log('显示桥梁', status);
         },
       },
       {
         name: '显示高速',
-      selected: useStatusStore().infrastructureLayers.showHighway,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showHighway' as const,
-        console.log('显示高速');
+        callback: (status: unknown) => {
+          console.log('显示高速', status);
         },
       },
       {
         name: '显示国道',
-      selected: useStatusStore().infrastructureLayers.showMainRoad,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showMainRoad' as const,
-        console.log('显示国道');
+        callback: (status: unknown) => {
+          console.log('显示国道', status);
         },
       },
       {
         name: '显示水库',
-      selected: useStatusStore().infrastructureLayers.showReservoir,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showReservoir' as const,
-        console.log('显示水库');
+        callback: (status: unknown) => {
+          console.log('显示水库', status);
         },
       },
       {
         name: '显示地铁站',
-      selected: useStatusStore().infrastructureLayers.showReservoir,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showReservoir' as const,
-        console.log('显示地铁站');
+        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

@@ -23,24 +23,35 @@ export const useMap = () => {
 
         // 当id改变时候，重置状态
         if (
-          useLoadingInformationStore().getHiddenPointId() !== id &&
+          useLoadingInformationStore().hiddenPoint.id !== id &&
-          useLoadingInformationStore().getRiskPointId() !== 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);
+          useLoadingInformationStore().riskPoint.id = id;
-        } else {
+        }
+
+        // 医院
+        else if (pickedObject.id.startsWith(config.prefix.hospitalPointId)) {
+          useLoadingInformationStore().hospital.id = id;
+        }
+
+        // 其他
+        else {
           // 重置状态
           useLoadingInformationStore().resetStatue();
         }

src/hooks/rain-earthquake/useHospitalPoint.ts

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

@@ -12,6 +12,7 @@ import {
   riskAreaIcon,
   waterLoggingIcon,
 } from '@/assets';
+import { useLayerControl } from '../useLayerControl';
 
 /**
  * 暴雨灾害链
@@ -211,108 +212,127 @@ export const useRainDisasterChain = () => {
   /**
    * 控制面板信息
    */
-  const controlPanel = [
+  /**
+   * 控制面板信息
+   */
+  const getControlPanel = () => {
+    const statusStore = useStatusStore();
+    const layerControl = useLayerControl();
+
+    return [
       {
         name: '显示医院',
-      selected: useStatusStore().poiLayers.showHospital,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showHospital' as const,
-        console.log('显示医院');
+        callback: layerControl.clickHospital,
-      },
       },
       {
         name: '显示危险源',
-      selected: useStatusStore().poiLayers.showDangerSource,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showDangerSource' as const,
-        console.log('显示危险源');
+        callback: (status: unknown) => {
+          console.log('显示危险源', status);
         },
       },
       {
         name: '显示避难所',
-      selected: useStatusStore().poiLayers.showRefugeeShelter,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showRefugeeShelter' as const,
-        console.log('显示避难所');
+        callback: (status: unknown) => {
+          console.log('显示避难所', status);
         },
       },
       {
         name: '显示消防站',
-      selected: useStatusStore().poiLayers.showFireStation,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showFireStation' as const,
-        console.log('显示消防站');
+        callback: (status: unknown) => {
+          console.log('显示消防站', status);
         },
       },
       {
         name: '显示储备点',
-      selected: useStatusStore().poiLayers.showReservePoint,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showReservePoint' as const,
-        console.log('显示储备点');
+        callback: (status: unknown) => {
+          console.log('显示储备点', status);
         },
       },
       {
         name: '显示学校',
-      selected: useStatusStore().poiLayers.showSchool,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showSchool' as const,
-        console.log('显示学校');
+        callback: (status: unknown) => {
+          console.log('显示学校', status);
         },
       },
       {
         name: '显示人口网格',
-      selected: useStatusStore().poiLayers.showPopulationGrid,
+        statusStore: statusStore.poiLayers,
-      callback: () => {
+        statusKey: 'showPopulationGrid' as const,
-        console.log('显示人口网格');
+        callback: (status: unknown) => {
+          console.log('显示人口网格', status);
         },
       },
       {
         name: '显示管网系统',
-      selected: useStatusStore().infrastructureLayers.showNetworkSystem,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showNetworkSystem' as const,
-        console.log('显示管网系统');
+        callback: (status: unknown) => {
+          console.log('显示管网系统', status);
         },
       },
       {
         name: '显示交通道路',
-      selected: useStatusStore().infrastructureLayers.showTrafficRoad,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showTrafficRoad' as const,
-        console.log('显示交通道路');
+        callback: (status: unknown) => {
+          console.log('显示交通道路', status);
         },
       },
       {
         name: '显示桥梁',
-      selected: useStatusStore().infrastructureLayers.showBridge,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showBridge' as const,
-        console.log('显示桥梁');
+        callback: (status: unknown) => {
+          console.log('显示桥梁', status);
         },
       },
       {
         name: '显示高速',
-      selected: useStatusStore().infrastructureLayers.showHighway,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showHighway' as const,
-        console.log('显示高速');
+        callback: (status: unknown) => {
+          console.log('显示高速', status);
         },
       },
       {
         name: '显示国道',
-      selected: useStatusStore().infrastructureLayers.showMainRoad,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showMainRoad' as const,
-        console.log('显示国道');
+        callback: (status: unknown) => {
+          console.log('显示国道', status);
         },
       },
       {
         name: '显示水库',
-      selected: useStatusStore().infrastructureLayers.showReservoir,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showReservoir' as const,
-        console.log('显示水库');
+        callback: (status: unknown) => {
+          console.log('显示水库', status);
         },
       },
       {
         name: '显示地铁站',
-      selected: useStatusStore().infrastructureLayers.showReservoir,
+        statusStore: statusStore.infrastructureLayers,
-      callback: () => {
+        statusKey: 'showReservoir' as const,
-        console.log('显示地铁站');
+        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

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

@@ -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);
+    const hiddenPoint = reactive({
-    /**
+      /** 加载状态 */
-     * 隐患点ID
+      loading: false,
-     */
+      /** 隐患点ID */
-    const hiddenPointId: Ref<number> = ref(-1);
+      id: -1,
+    });
+
+    // ============================ 风险点加载状态 ================================
 
     /**
-     * 风险点加载状态
+     * 风险点加载信息状态
      */
-    const loadingRiskPointInformationStatus: Ref<boolean> = ref(false);
+    const riskPoint = reactive({
-    /**
+      /** 加载状态 */
-     * 风险点ID
+      loading: false,
-     */
+      /** 风险点ID */
-    const riskPointId: Ref<number> = ref(-1);
+      id: -1,
+    });
+
+    // ============================ 医院加载状态 ================================
 
     /**
-     * 重置状态
+     * 医院加载信息状态
+     */
+    const hospital = reactive({
+      /** 加载状态 */
+      loading: false,
+      /** 医院ID */
+      id: -1,
+    });
+
+    /**
+     * 重置所有状态
      */
     const resetStatue = () => {
-      loadingHiddenPointInformationStatus.value = false;
+      // 点击对象重置
-      hiddenPointId.value = -1;
+      clickObject.id = '';
-      loadingRiskPointInformationStatus.value = false;
+      clickObject.primitive = null;
-      riskPointId.value = -1;
-    };
 
-    /**
+      // 隐患点状态重置
-     * 获取点击对象
+      hiddenPoint.loading = false;
-     * @returns 点击对象
+      hiddenPoint.id = -1;
-     */
+
-    const getClickObject = () => clickObject.value;
+      // 风险点状态重置
-    /**
+      riskPoint.loading = false;
-     * 设置点击对象
+      riskPoint.id = -1;
-     * @param value - 点击对象
+
-     */
+      // 医院状态重置
-    const setClickObject = (value: ClickObject) => {
+      hospital.loading = false;
-      clickObject.value = value;
+      hospital.id = -1;
-    };
-    /**
-     * 获取隐患点加载状态
-     * @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;
     };
 
     return {
+      clickObject,
+      hiddenPoint,
+      riskPoint,
+      hospital,
       resetStatue,
-      getClickObject,
-      setClickObject,
-      getLoadingHiddenPointInformationStatus,
-      setLoadingHiddenPointInformationStatus,
-      getLoadingRiskPointInformationStatus,
-      setLoadingRiskPointInformationStatus,
-      getHiddenPointId,
-      setHiddenPointId,
-      getRiskPointId,
-      setRiskPointId,
     };
   }
 );

src/stores/useStatusStore.ts

@@ -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.legendShow = {
-    uiComponents.disasterChainPointShow = false;
+      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.showAdministrativeDivision = {
-    mapLayers.hiddenDangerPointShow = true;
+      show: true,
-    mapLayers.riskPointShow = true;
+      loading: true,
+    };
+    mapLayers.hiddenDangerPointShow = {
+      show: true,
+      loading: true,
+    };
+    mapLayers.riskPointShow = {
+      show: true,
+      loading: true,
+    };
 
     // POI图层显示状态重置
-    poiLayers.showHospital = false;
+    poiLayers.showHospital = {
-    poiLayers.showDangerSource = false;
+      show: false,
-    poiLayers.showRefugeeShelter = false;
+      loading: false,
-    poiLayers.showFireStation = false;
+    };
-    poiLayers.showReservePoint = false;
+    poiLayers.showDangerSource = {
-    poiLayers.showSchool = false;
+      show: false,
-    poiLayers.showPopulationGrid = false;
+      loading: false,
-    poiLayers.showSubwayStation = 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.showNetworkSystem = {
-    infrastructureLayers.showTrafficRoad = false;
+      show: false,
-    infrastructureLayers.showBridge = false;
+      loading: false,
-    infrastructureLayers.showHighway = false;
+    };
-    infrastructureLayers.showMainRoad = false;
+    infrastructureLayers.showTrafficRoad = {
-    infrastructureLayers.showReservoir = false;
+      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

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

@@ -13,4 +13,7 @@ export enum LoadingResource {
    * 行政区划
    */
   ADMINISTRATIVE_DIVISION = 'ADMINISTRATIVE_DIVISION',
+
+  /** 医院 */
+  HOSPITAL = 'HOSPITAL',
 }

src/views/home/earthquake/EarthquakeView.vue

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

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