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

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;
+    useStatusStore().uiComponents.disasterChainPointShow.show =
+      !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="
-        useLoadingInformationStore().getLoadingHiddenPointInformationStatus()
-      "
+      v-if="useLoadingInformationStore().hiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().getHiddenPointId()"
+      :key="useLoadingInformationStore().hiddenPoint.id"
     />
   </div>
 </template>
@@ -62,14 +60,14 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().getHiddenPointId(),
+    () => useLoadingInformationStore().hiddenPoint.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
 
       // 获取隐患点数据
-      const clickObject = useLoadingInformationStore().getClickObject();
+      const clickObject = useLoadingInformationStore().clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -77,7 +75,7 @@
       }
 
       const res = await $api.hiddenDangerSpots.getPointDetailById(
-        useLoadingInformationStore().getHiddenPointId()
+        useLoadingInformationStore().hiddenPoint.id
       );
 
       // 更新数据
@@ -93,9 +91,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().setLoadingHiddenPointInformationStatus(
-          true
-        );
+        useLoadingInformationStore().hiddenPoint.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }

src/component/rain-earthquake/HospitalComponent.vue

@@ -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 ? '关闭' : '打开'}图例`"
-      >{{ useStatusStore().uiComponents.legendShow ? '-' : '+' }}</el-button
+      :title="`${useStatusStore().uiComponents.legendShow.show ? '关闭' : '打开'}图例`"
+      >{{
+        useStatusStore().uiComponents.legendShow.show ? '-' : '+'
+      }}</el-button
     >
   </div>
-  <div class="legend-box" v-show="useStatusStore().uiComponents.legendShow">
+  <div
+    class="legend-box"
+    v-show="useStatusStore().uiComponents.legendShow.show"
+  >
     <div class="title-box">
       <header>图例</header>
     </div>
@@ -55,8 +60,8 @@
 
   // 切换图例显示状态
   const changeStatus = () => {
-    useStatusStore().uiComponents.legendShow =
-      !useStatusStore().uiComponents.legendShow;
+    useStatusStore().uiComponents.legendShow.show =
+      !useStatusStore().uiComponents.legendShow.show;
   };
 
   onMounted(() => {

src/component/rain-earthquake/RiskPointComponent.vue

@@ -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}`);
       }