修改组件中hooks和store的调用方式

src/component/common/LoadingPoints.vue

@@ -22,6 +22,8 @@
   // 点处理钩子
   const pointsHandle = usePointsHandle();
 
+  const useLoadingResource = useLoadingResourceStore();
+
   onMounted(() => {
     // 加载点
     const result: { ids: string[]; info: Record<string, unknown>[] } =
@@ -33,10 +35,7 @@
       );
 
     // 记录id
-    useLoadingResourceStore().addLoadingResource(
+    useLoadingResource.addLoadingResource(props.loadingResourceField!, result);
-      props.loadingResourceField!,
-      result
-    );
   });
 </script>
 

src/component/map/AdministrativeDivision.vue

@@ -16,6 +16,9 @@
   const { areas, areasId, areasColor, areaTransparency, labelTransparency } =
     useAdministrativeDivision();
 
+  const useStatus = useStatusStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   onMounted(async () => {
     // 构建批量添加配置数组
     const layerConfigs = areasId.map((id, index) => ({
@@ -45,7 +48,7 @@
     await CesiumUtilsSingleton.batchAddGeoJsonLayers(layerConfigs);
 
     // 记录行政区划id
-    useLoadingResourceStore().addLoadingResource(
+    useLoadingResource.addLoadingResource(
       LoadingResource.ADMINISTRATIVE_DIVISION,
       { ids: areasId, info: [] } // 此处info不进行记录
     );
@@ -53,7 +56,7 @@
 
   // 监听显示状态改变
   watch(
-    () => useStatusStore().mapLayers.showAdministrativeDivision.show,
+    () => useStatus.mapLayers.showAdministrativeDivision.show,
     (newValue: boolean) => {
       if (newValue) {
         CesiumUtilsSingleton.batchShowGeoJsonLayers(areasId);

src/component/map/MapComponent.vue

@@ -4,8 +4,8 @@
   <!-- 行政区划 -->
   <AdministrativeDivision
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().mapLayers.showAdministrativeDivision.loading
+      useStatus.mapLayers.showAdministrativeDivision.loading
     "
   />
 </template>
@@ -24,8 +24,17 @@
   import { useMap } from '@/hooks/map/useMap';
   import { useScene } from '@/hooks/useScene';
 
+  const { resetScene } = useScene();
+  const {
+    registerAndClickOnTheListener,
+    registerAScrollListener,
+    automaticallyAdjustThePerspective,
+    prohibitedEvents,
+  } = useMap();
+  const useStatus = useStatusStore();
+
   onBeforeMount(() => {
-    useScene().resetScene();
+    resetScene();
   });
 
   onMounted(async () => {
@@ -43,19 +52,19 @@
     });
 
     // 设置状态
-    useStatusStore().appLoadingCompleted = true;
+    useStatus.appLoadingCompleted = true;
 
     // 注册全局点击监听器
-    useMap().registerAndClickOnTheListener();
+    registerAndClickOnTheListener();
 
     // 注册全局滚轮监听器
-    useMap().registerAScrollListener();
+    registerAScrollListener();
 
     // 当行政区超出页面时，自动拉回视角
-    useMap().automaticallyAdjustThePerspective();
+    automaticallyAdjustThePerspective();
 
     // 禁止事件
-    useMap().prohibitedEvents();
+    prohibitedEvents();
 
     // 默认视角
     CesiumUtilsSingleton.viewToTarget(

src/component/rain-earthquake/BasicComponent.vue

@@ -9,40 +9,40 @@
       <!-- 滑坡隐患点 -->
       <LandslideComponent
         v-if="
-          useStatusStore().appLoadingCompleted &&
+          useStatus.appLoadingCompleted &&
-          useStatusStore().poiLayers.showLandslideHiddenPoint.loading
+          useStatus.poiLayers.showLandslideHiddenPoint.loading
         "
       />
 
       <!-- 泥石流隐患点 -->
       <DebrisFlowComponent
         v-if="
-          useStatusStore().appLoadingCompleted &&
+          useStatus.appLoadingCompleted &&
-          useStatusStore().poiLayers.showDebrisFlowHiddenPoint.loading
+          useStatus.poiLayers.showDebrisFlowHiddenPoint.loading
         "
       />
 
       <!-- 内涝隐患点 -->
       <WaterLoggingComponent
         v-if="
-          useStatusStore().appLoadingCompleted &&
+          useStatus.appLoadingCompleted &&
-          useStatusStore().poiLayers.showWaterLoggingHiddenPoint.loading
+          useStatus.poiLayers.showWaterLoggingHiddenPoint.loading
         "
       />
 
       <!-- 山洪隐患点 -->
       <FlashFloodComponent
         v-if="
-          useStatusStore().appLoadingCompleted &&
+          useStatus.appLoadingCompleted &&
-          useStatusStore().poiLayers.showFlashFloodHiddenPoint.loading
+          useStatus.poiLayers.showFlashFloodHiddenPoint.loading
         "
       />
 
       <!-- 降雨栅格图层组件 -->
       <RainfallGridComponent
         v-if="
-          useStatusStore().appLoadingCompleted &&
+          useStatus.appLoadingCompleted &&
-          useStatusStore().weatherLayers.showRainfallGrid.loading
+          useStatus.weatherLayers.showRainfallGrid.loading
         "
       />
     </template>
@@ -52,16 +52,16 @@
       <!-- 滑坡隐患点 -->
       <LandslideComponent
         v-if="
-          useStatusStore().appLoadingCompleted &&
+          useStatus.appLoadingCompleted &&
-          useStatusStore().poiLayers.showLandslideHiddenPoint.loading
+          useStatus.poiLayers.showLandslideHiddenPoint.loading
         "
       />
 
       <!-- 泥石流隐患点 -->
       <DebrisFlowComponent
         v-if="
-          useStatusStore().appLoadingCompleted &&
+          useStatus.appLoadingCompleted &&
-          useStatusStore().poiLayers.showDebrisFlowHiddenPoint.loading
+          useStatus.poiLayers.showDebrisFlowHiddenPoint.loading
         "
       />
     </template>
@@ -69,8 +69,8 @@
     <!-- 风险点组件 -->
     <RiskPointComponent
       v-if="
-        useStatusStore().appLoadingCompleted &&
+        useStatus.appLoadingCompleted &&
-        useStatusStore().mapLayers.riskPointShow.loading
+        useStatus.mapLayers.riskPointShow.loading
       "
     />
   </div>
@@ -87,6 +87,8 @@
   import RainfallGridComponent from '@/component/rain-earthquake/detail-panels/RainfallGridComponent.vue';
   import { useStatusStore } from '@/stores/useStatusStore';
 
+  const useStatus = useStatusStore();
+
   // 获取父组件传递德数据
   const props = defineProps<{
     disasterType: DisasterType;

src/component/rain-earthquake/ControlShowComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="control-show-panel-box"
-    v-show="useStatusStore().uiComponents.controlPanel.show"
+    v-show="useStatus.uiComponents.controlPanel.show"
   >
     <div class="title-box">
       <header>图例与控制</header>
@@ -65,6 +65,9 @@
   import { useStatusStore } from '@/stores/useStatusStore';
   import { computed } from 'vue';
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+
   const props = defineProps<{
     constrolShowList: {
       name: string;
@@ -105,7 +108,7 @@
     callback: (...args: unknown[]) => unknown
   ) => {
     // 重置信息框状态，隐藏显示
-    useLoadingInformationStore().resetStatue();
+    useLoadingInformation.resetStatue();
 
     // 调用回调函数
     callback(status);

src/component/rain-earthquake/ControlShowDetailComponent.vue

@@ -2,109 +2,109 @@
   <!-- 医院 -->
   <HospitalComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().poiLayers.showHospital.loading
+      useStatus.poiLayers.showHospital.loading
     "
   />
 
   <!-- 危险源 -->
   <DangerousSourceComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().poiLayers.showDangerSource.loading
+      useStatus.poiLayers.showDangerSource.loading
     "
   />
 
   <!-- 避难所 -->
   <EmergencyShelterComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().poiLayers.showRefugeeShelter.loading
+      useStatus.poiLayers.showRefugeeShelter.loading
     "
   />
 
   <!-- 消防站 -->
   <FireStationComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().poiLayers.showFireStation.loading
+      useStatus.poiLayers.showFireStation.loading
     "
   />
 
   <!-- 物资储备点 -->
   <StorePointsComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().poiLayers.showReservePoint.loading
+      useStatus.poiLayers.showReservePoint.loading
     "
   />
 
   <!-- 学校 -->
   <SchoolComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().poiLayers.showSchool.loading
+      useStatus.poiLayers.showSchool.loading
     "
   />
 
   <!-- 人口网格 -->
   <PopulationGridComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().poiLayers.showPopulationGrid.loading
+      useStatus.poiLayers.showPopulationGrid.loading
     "
   />
 
   <!-- 管网系统 -->
   <WaterPipeComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().infrastructureLayers.showNetworkSystem.loading
+      useStatus.infrastructureLayers.showNetworkSystem.loading
     "
   />
 
   <!-- 交通道路 -->
   <TrafficRoadComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().infrastructureLayers.showTrafficRoad.loading
+      useStatus.infrastructureLayers.showTrafficRoad.loading
     "
   />
   <!-- 高速 -->
   <HighwayComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().infrastructureLayers.showHighway.loading
+      useStatus.infrastructureLayers.showHighway.loading
     "
   />
   <!-- 国道 -->
   <NationRoadComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().infrastructureLayers.showMainRoad.loading
+      useStatus.infrastructureLayers.showMainRoad.loading
     "
   />
   <!-- 桥梁 -->
   <BridgeComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().infrastructureLayers.showBridge.loading
+      useStatus.infrastructureLayers.showBridge.loading
     "
   />
 
   <!-- 水库 -->
   <ReservoirComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().infrastructureLayers.showReservoir.loading
+      useStatus.infrastructureLayers.showReservoir.loading
     "
   />
 
   <!-- 地铁站点 -->
   <SubwayStationComponent
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().poiLayers.showSubwayStation.loading
+      useStatus.poiLayers.showSubwayStation.loading
     "
   />
 </template>
@@ -125,6 +125,8 @@
   import BridgeComponent from '@/component/rain-earthquake/detail-panels/BridgeComponent.vue';
   import ReservoirComponent from '@/component/rain-earthquake/detail-panels/ReservoirComponent.vue';
   import SubwayStationComponent from '@/component/rain-earthquake/detail-panels/SubwayStationComponent.vue';
+
+  const useStatus = useStatusStore();
 </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.show ? '关闭' : '打开'}灾害链影响点列表`"
+      :title="`${useStatus.uiComponents.disasterChainPointShow.show ? '关闭' : '打开'}灾害链影响点列表`"
       >{{
-        useStatusStore().uiComponents.disasterChainPointShow.show ? '-' : '+'
+        useStatus.uiComponents.disasterChainPointShow.show ? '-' : '+'
       }}</el-button
     >
   </div>
   <div
     class="disaster-list-box"
-    v-show="useStatusStore().uiComponents.disasterChainPointShow.show"
+    v-show="useStatus.uiComponents.disasterChainPointShow.show"
   >
     <header class="table-title">
       <span>灾害链影响点列表</span>
@@ -84,6 +84,8 @@
   import type { PaginationType } from '@/types/common/PaginationType';
   import { ref, watch, computed, type Ref } from 'vue';
 
+  const useStatus = useStatusStore();
+
   // 接收父组件的参数
   const props = defineProps<{
     selectOptions: { label: string; value: PointType }[];
@@ -124,8 +126,8 @@
 
   // 切换面板显示状态
   const changeStatus = () => {
-    useStatusStore().uiComponents.disasterChainPointShow.show =
+    useStatus.uiComponents.disasterChainPointShow.show =
-      !useStatusStore().uiComponents.disasterChainPointShow.show;
+      !useStatus.uiComponents.disasterChainPointShow.show;
   };
 
   // 上一页

src/component/rain-earthquake/FunctionComponent.vue

@@ -2,8 +2,8 @@
   <!-- 周边分析组件 -->
   <AroundAnalysis
     v-if="
-      useStatusStore().appLoadingCompleted &&
+      useStatus.appLoadingCompleted &&
-      useStatusStore().functionStatus.aroundAnalysis.loading
+      useStatus.functionStatus.aroundAnalysis.loading
     "
   />
 </template>
@@ -11,6 +11,8 @@
 <script lang="ts" setup>
   import { useStatusStore } from '@/stores/useStatusStore';
   import AroundAnalysis from './function-child/AroundAnalysis.vue';
+
+  const useStatus = useStatusStore();
 </script>
 
 <style scoped></style>

src/component/rain-earthquake/LeftButtonComponent.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    v-show="useStatusStore().uiComponents.leftButton.show"
+    v-show="useStatus.uiComponents.leftButton.show"
     class="left-button-box"
     :style="{
-      left: `${useStatusStore().uiComponents.disasterChainPointShow.show ? 575 : 100}px`,
+      left: `${useStatus.uiComponents.disasterChainPointShow.show ? 575 : 100}px`,
     }"
   >
     <ul class="left-button-ul">
@@ -11,7 +11,7 @@
         <button
           @click="handelButton(index, buttonItem.callback)"
           :style="{
-            'background-image': `url(${useButtonSelectedIdStore().leftButtonSelectedId == index ? leftOrangeButton : leftBlueButton})`,
+            'background-image': `url(${useButtonSelectedId.leftButtonSelectedId == index ? leftOrangeButton : leftBlueButton})`,
           }"
         >
           {{ buttonItem.name }}
@@ -27,6 +27,9 @@
   import { useStatusStore } from '@/stores/useStatusStore.ts';
   import { onMounted } from 'vue';
 
+  const useStatus = useStatusStore();
+  const useButtonSelectedId = useButtonSelectedIdStore();
+
   // 接收父组件传递的参数
   const props = defineProps<{
     buttonList: {
@@ -49,7 +52,7 @@
 
     // 如果找到了选中的按钮，设置选中状态，同时执行回调函数
     if (lastSelectedIndex !== -1) {
-      useButtonSelectedIdStore().leftButtonSelectedId = lastSelectedIndex;
+      useButtonSelectedId.leftButtonSelectedId = lastSelectedIndex;
       props.buttonList[lastSelectedIndex].callback();
     }
   });
@@ -60,23 +63,23 @@
     callback: (...args: unknown[]) => unknown
   ) => {
     // 取消选中
-    if (index == useButtonSelectedIdStore().leftButtonSelectedId) {
+    if (index == useButtonSelectedId.leftButtonSelectedId) {
       callback(false);
-      useButtonSelectedIdStore().leftButtonSelectedId = -1;
+      useButtonSelectedId.leftButtonSelectedId = -1;
       return;
     } else if (
-      useButtonSelectedIdStore().leftButtonSelectedId != -1 &&
+      useButtonSelectedId.leftButtonSelectedId != -1 &&
-      useButtonSelectedIdStore().leftButtonSelectedId != index
+      useButtonSelectedId.leftButtonSelectedId != index
     ) {
       console.error('当前按钮选中有误，请选择正确的按钮。');
       return;
     }
-    useButtonSelectedIdStore().leftButtonSelectedId = index;
+    useButtonSelectedId.leftButtonSelectedId = index;
     callback(true);
 
     // 如果该按钮只执行一次，则取消选中
     if (props.buttonList[index].executeOnce) {
-      useButtonSelectedIdStore().leftButtonSelectedId = -1;
+      useButtonSelectedId.leftButtonSelectedId = -1;
     }
   };
 </script>

src/component/rain-earthquake/LeftLegendComponent.vue

@@ -3,21 +3,21 @@
   <div
     class="legend-container"
     v-show="
-      useStatusStore().uiComponents.leftLegend.show &&
+      useStatus.uiComponents.leftLegend.show &&
-      Object.keys(useLeftLegendStore().legendListInfo).length > 0
+      Object.keys(useLeftLegend.legendListInfo).length > 0
     "
   >
     <div
       class="legend-box"
-      v-for="key in Object.keys(useLeftLegendStore().legendListInfo)"
+      v-for="key in Object.keys(useLeftLegend.legendListInfo)"
       :key="key"
     >
       <div class="legend-title">
-        {{ useLeftLegendStore().legendListInfo[key].title }}
+        {{ useLeftLegend.legendListInfo[key].title }}
       </div>
       <div
         class="legend-item"
-        v-for="(item, index) in useLeftLegendStore().legendListInfo[key].list"
+        v-for="(item, index) in useLeftLegend.legendListInfo[key].list"
         :key="index"
       >
         <div
@@ -35,6 +35,9 @@
 <script lang="ts" setup>
   import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
   import { useStatusStore } from '@/stores/useStatusStore';
+
+  const useStatus = useStatusStore();
+  const useLeftLegend = useLeftLegendStore();
 </script>
 
 <style scoped>

src/component/rain-earthquake/RightButtonComponent.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     class="right-button-box"
-    v-show="useStatusStore().uiComponents.rightButton.show"
+    v-show="useStatus.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(${useButtonSelectedIdStore().rightButtonSelectedId == index ? rightOrangeButton : rightBlueButton})`,
+            'background-image': `url(${useButtonSelectedId.rightButtonSelectedId == index ? rightOrangeButton : rightBlueButton})`,
           }"
         >
           {{ buttonItem.name }}
@@ -24,6 +24,9 @@
   import { useStatusStore } from '@/stores/useStatusStore.ts';
   import { onMounted } from 'vue';
 
+  const useStatus = useStatusStore();
+  const useButtonSelectedId = useButtonSelectedIdStore();
+
   // 接收父组件传递的参数
   const props = defineProps<{
     buttonList: {
@@ -46,7 +49,7 @@
 
     // 如果找到了选中的按钮，设置选中状态，同时执行回调函数
     if (lastSelectedIndex !== -1) {
-      useButtonSelectedIdStore().rightButtonSelectedId = lastSelectedIndex;
+      useButtonSelectedId.rightButtonSelectedId = lastSelectedIndex;
       props.buttonList[lastSelectedIndex].callback(true);
     }
   });
@@ -56,20 +59,20 @@
     index: number,
     callback: (...args: unknown[]) => unknown
   ) => {
-    if (index == useButtonSelectedIdStore().rightButtonSelectedId) {
+    if (index == useButtonSelectedId.rightButtonSelectedId) {
-      useButtonSelectedIdStore().rightButtonSelectedId = -1;
+      useButtonSelectedId.rightButtonSelectedId = -1;
       callback(false);
       return;
     } else if (
-      useButtonSelectedIdStore().rightButtonSelectedId != -1 &&
+      useButtonSelectedId.rightButtonSelectedId != -1 &&
-      useButtonSelectedIdStore().rightButtonSelectedId != index
+      useButtonSelectedId.rightButtonSelectedId != index
     ) {
       return;
     }
-    useButtonSelectedIdStore().rightButtonSelectedId = index;
+    useButtonSelectedId.rightButtonSelectedId = index;
     callback(true);
     if (props.buttonList[index].executeOnce) {
-      useButtonSelectedIdStore().rightButtonSelectedId = -1;
+      useButtonSelectedId.rightButtonSelectedId = -1;
     }
   };
 </script>

src/component/rain-earthquake/StepComponent.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="step-box" v-show="useStatusStore().uiComponents.stepBar.show">
+  <div class="step-box" v-show="useStatus.uiComponents.stepBar.show">
     <el-steps
       style="width: 100%; background-color: #ffffff00"
-      :active="useStepStore().currentStep"
+      :active="useStep.currentStep"
       finish-status="success"
       simple
     >
       <el-step
-        v-for="(item, index) in useStepStore().stepList"
+        v-for="(item, index) in useStep.stepList"
         :key="index"
         :title="item"
       />
@@ -18,6 +18,9 @@
 <script lang="ts" setup>
   import { useStatusStore } from '@/stores/useStatusStore';
   import { useStepStore } from '@/stores/useStepStore';
+
+  const useStatus = useStatusStore();
+  const useStep = useStepStore();
 </script>
 
 <style scoped>

src/component/rain-earthquake/basic/DebrisFlowComponent.vue

@@ -3,7 +3,7 @@
   <div>
     <!-- 加载泥石流隐患点 -->
     <LoadingPoints
-      v-if="useStatusStore().appLoadingCompleted && debrisFlowPoints.length > 0"
+      v-if="useStatus.appLoadingCompleted && debrisFlowPoints.length > 0"
       :base-points="debrisFlowPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.debrisFlowHiddenPointId"
@@ -15,11 +15,11 @@
     <InformationBox
       :data="debrisFlowPointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().debrisFlowHiddenPoint.loading"
+      v-if="useLoadingInformation.debrisFlowHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().debrisFlowHiddenPoint.id"
+      :key="useLoadingInformation.debrisFlowHiddenPoint.id"
     />
   </div>
 </template>
@@ -44,15 +44,18 @@
 
   const debrisFlowPoints = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
+  const { field, getDisasterIcon } = useHiddenPoint();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
   const debrisFlowPointDetail = ref<Point>();
   const informationBoxTitle = ref('');
 
-  // 获取钩子函数
-  const { field, getDisasterIcon } = useHiddenPoint();
-
   // 加载泥石流隐患点数据
   $api.hiddenDangerSpots
     .getBasePoints(HiddenDangerPointTypeMap[PointType.DEBRIS_FLOW])
@@ -62,13 +65,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().debrisFlowHiddenPoint.id,
+    () => useLoadingInformation.debrisFlowHiddenPoint.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取泥石流隐患点数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -76,7 +79,7 @@
       }
 
       const res = await $api.hiddenDangerSpots.getPointDetailById(
-        useLoadingInformationStore().debrisFlowHiddenPoint.id
+        useLoadingInformation.debrisFlowHiddenPoint.id
       );
 
       // 更新数据
@@ -92,7 +95,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().debrisFlowHiddenPoint.loading = true;
+        useLoadingInformation.debrisFlowHiddenPoint.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -101,19 +104,19 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showDebrisFlowHiddenPoint.show,
+    () => useStatus.poiLayers.showDebrisFlowHiddenPoint.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示泥石流隐患点
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.DEBRIS_FLOW_HIDDEN_POINT
           ).ids
         );
       } else {
         // 隐藏泥石流隐患点
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.DEBRIS_FLOW_HIDDEN_POINT
           ).ids
         );

src/component/rain-earthquake/basic/FlashFloodComponent.vue

@@ -3,7 +3,7 @@
   <div>
     <!-- 加载山洪隐患点 -->
     <LoadingPoints
-      v-if="useStatusStore().appLoadingCompleted && flashFloodPoints.length > 0"
+      v-if="useStatus.appLoadingCompleted && flashFloodPoints.length > 0"
       :base-points="flashFloodPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.flashFloodHiddenPointId"
@@ -15,11 +15,11 @@
     <InformationBox
       :data="flashFloodPointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().flashFloodHiddenPoint.loading"
+      v-if="useLoadingInformation.flashFloodHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().flashFloodHiddenPoint.id"
+      :key="useLoadingInformation.flashFloodHiddenPoint.id"
     />
   </div>
 </template>
@@ -44,15 +44,18 @@
 
   const flashFloodPoints = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
+  const { field, getDisasterIcon } = useHiddenPoint();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
   const flashFloodPointDetail = ref<Point>();
   const informationBoxTitle = ref('');
 
-  // 获取钩子函数
-  const { field, getDisasterIcon } = useHiddenPoint();
-
   // 加载山洪隐患点数据
   $api.hiddenDangerSpots
     .getBasePoints(HiddenDangerPointTypeMap[PointType.FLASH_FLOOD])
@@ -62,13 +65,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().flashFloodHiddenPoint.id,
+    () => useLoadingInformation.flashFloodHiddenPoint.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取山洪隐患点数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -76,7 +79,7 @@
       }
 
       const res = await $api.hiddenDangerSpots.getPointDetailById(
-        useLoadingInformationStore().flashFloodHiddenPoint.id
+        useLoadingInformation.flashFloodHiddenPoint.id
       );
 
       // 更新数据
@@ -92,7 +95,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().flashFloodHiddenPoint.loading = true;
+        useLoadingInformation.flashFloodHiddenPoint.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -101,19 +104,19 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showFlashFloodHiddenPoint.show,
+    () => useStatus.poiLayers.showFlashFloodHiddenPoint.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示山洪隐患点
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.FLASH_FLOOD_HIDDEN_POINT
           ).ids
         );
       } else {
         // 隐藏山洪隐患点
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.FLASH_FLOOD_HIDDEN_POINT
           ).ids
         );

src/component/rain-earthquake/basic/LandslideComponent.vue

@@ -3,7 +3,7 @@
   <div>
     <!-- 加载滑坡隐患点 -->
     <LoadingPoints
-      v-if="useStatusStore().appLoadingCompleted && landslidePoints.length > 0"
+      v-if="useStatus.appLoadingCompleted && landslidePoints.length > 0"
       :base-points="landslidePoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.landslideHiddenPointId"
@@ -15,11 +15,11 @@
     <InformationBox
       :data="landslidePointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().landslideHiddenPoint.loading"
+      v-if="useLoadingInformation.landslideHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().landslideHiddenPoint.id"
+      :key="useLoadingInformation.landslideHiddenPoint.id"
     />
   </div>
 </template>
@@ -44,15 +44,18 @@
 
   const landslidePoints = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
+  const { field, getDisasterIcon } = useHiddenPoint();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
   const landslidePointDetail = ref<Point>();
   const informationBoxTitle = ref('');
 
-  // 获取钩子函数
-  const { field, getDisasterIcon } = useHiddenPoint();
-
   // 加载滑坡隐患点数据
   $api.hiddenDangerSpots
     .getBasePoints(HiddenDangerPointTypeMap[PointType.LANDSLIDE])
@@ -62,13 +65,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().landslideHiddenPoint.id,
+    () => useLoadingInformation.landslideHiddenPoint.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取滑坡隐患点数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -76,7 +79,7 @@
       }
 
       const res = await $api.hiddenDangerSpots.getPointDetailById(
-        useLoadingInformationStore().landslideHiddenPoint.id
+        useLoadingInformation.landslideHiddenPoint.id
       );
 
       // 更新数据
@@ -92,7 +95,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().landslideHiddenPoint.loading = true;
+        useLoadingInformation.landslideHiddenPoint.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -101,19 +104,19 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showLandslideHiddenPoint.show,
+    () => useStatus.poiLayers.showLandslideHiddenPoint.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示滑坡隐患点
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.LANDSLIDE_HIDDEN_POINT
           ).ids
         );
       } else {
         // 隐藏滑坡隐患点
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.LANDSLIDE_HIDDEN_POINT
           ).ids
         );

src/component/rain-earthquake/basic/RiskPointComponent.vue

@@ -3,7 +3,7 @@
   <div>
     <!-- 加载风险点 -->
     <LoadingPoints
-      v-if="useStatusStore().appLoadingCompleted && riskPoints.length > 0"
+      v-if="useStatus.appLoadingCompleted && riskPoints.length > 0"
       :base-points="riskPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.riskPointId"
@@ -15,11 +15,11 @@
     <InformationBox
       :data="riskPointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().riskPoint.loading"
+      v-if="useLoadingInformation.riskPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().riskPoint.id"
+      :key="useLoadingInformation.riskPoint.id"
     />
   </div>
 </template>
@@ -40,6 +40,10 @@
 
   const riskPoints = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
@@ -54,13 +58,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().riskPoint.id,
+    () => useLoadingInformation.riskPoint.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取风险点数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -68,7 +72,7 @@
       }
 
       const res = await $api.riskSpots.getPointDetailById(
-        useLoadingInformationStore().riskPoint.id
+        useLoadingInformation.riskPoint.id
       );
 
       // 更新数据
@@ -83,7 +87,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().riskPoint.loading = true;
+        useLoadingInformation.riskPoint.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -92,17 +96,17 @@
 
   // 监听显示隐藏风险点
   watch(
-    () => useStatusStore().mapLayers.riskPointShow.show,
+    () => useStatus.mapLayers.riskPointShow.show,
     (newValue: boolean) => {
       if (newValue) {
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.RISK_POINT
           ).ids
         );
       } else {
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.RISK_POINT
           ).ids
         );

src/component/rain-earthquake/basic/WaterLoggingComponent.vue

@@ -4,7 +4,7 @@
     <!-- 加载内涝隐患点 -->
     <LoadingPoints
       v-if="
-        useStatusStore().appLoadingCompleted && waterLoggingPoints.length > 0
+        useStatus.appLoadingCompleted && waterLoggingPoints.length > 0
       "
       :base-points="waterLoggingPoints"
       :get-disaster-icon="getDisasterIcon"
@@ -17,11 +17,11 @@
     <InformationBox
       :data="waterLoggingPointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().waterLoggingHiddenPoint.loading"
+      v-if="useLoadingInformation.waterLoggingHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().waterLoggingHiddenPoint.id"
+      :key="useLoadingInformation.waterLoggingHiddenPoint.id"
     />
   </div>
 </template>
@@ -46,15 +46,18 @@
 
   const waterLoggingPoints = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
+  const { field, getDisasterIcon } = useHiddenPoint();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
   const waterLoggingPointDetail = ref<Point>();
   const informationBoxTitle = ref('');
 
-  // 获取钩子函数
-  const { field, getDisasterIcon } = useHiddenPoint();
-
   // 加载内涝隐患点数据
   $api.hiddenDangerSpots
     .getBasePoints(HiddenDangerPointTypeMap[PointType.WATER_LOGGING])
@@ -64,13 +67,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().waterLoggingHiddenPoint.id,
+    () => useLoadingInformation.waterLoggingHiddenPoint.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取内涝隐患点数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -78,7 +81,7 @@
       }
 
       const res = await $api.hiddenDangerSpots.getPointDetailById(
-        useLoadingInformationStore().waterLoggingHiddenPoint.id
+        useLoadingInformation.waterLoggingHiddenPoint.id
       );
 
       // 更新数据
@@ -94,7 +97,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().waterLoggingHiddenPoint.loading = true;
+        useLoadingInformation.waterLoggingHiddenPoint.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -103,19 +106,19 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showWaterLoggingHiddenPoint.show,
+    () => useStatus.poiLayers.showWaterLoggingHiddenPoint.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示内涝隐患点
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.WATER_LOGGING_HIDDEN_POINT
           ).ids
         );
       } else {
         // 隐藏内涝隐患点
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.WATER_LOGGING_HIDDEN_POINT
           ).ids
         );

src/component/rain-earthquake/detail-panels/BridgeComponent.vue

@@ -3,7 +3,7 @@
   <div>
     <!-- 加载桥梁点 -->
     <LoadingPoints
-      v-if="useStatusStore().appLoadingCompleted && bridgeList.length > 0"
+      v-if="useStatus.appLoadingCompleted && bridgeList.length > 0"
       :base-points="bridgeList"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.bridgePointId"
@@ -15,11 +15,11 @@
     <InformationBox
       :data="storePointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().bridge.loading"
+      v-if="useLoadingInformation.bridge.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().bridge.id"
+      :key="useLoadingInformation.bridge.id"
     />
   </div>
 </template>
@@ -40,6 +40,10 @@
 
   const bridgeList = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
@@ -55,13 +59,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().bridge.id,
+    () => useLoadingInformation.bridge.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取桥梁点数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -69,7 +73,7 @@
       }
 
       const res = await $api.bridges.getPointDetailById(
-        useLoadingInformationStore().bridge.id
+        useLoadingInformation.bridge.id
       );
 
       // 更新数据
@@ -85,7 +89,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().bridge.loading = true;
+        useLoadingInformation.bridge.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -94,18 +98,18 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().infrastructureLayers.showBridge.show,
+    () => useStatus.infrastructureLayers.showBridge.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示桥梁点
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(LoadingResource.BRIDGE)
+          useLoadingResource.getLoadingResource(LoadingResource.BRIDGE)
             .ids
         );
       } else {
         // 隐藏桥梁点
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(LoadingResource.BRIDGE)
+          useLoadingResource.getLoadingResource(LoadingResource.BRIDGE)
             .ids
         );
       }

src/component/rain-earthquake/detail-panels/DangerousSourceComponent.vue

@@ -3,9 +3,7 @@
   <div>
     <!-- 加载危险源 -->
     <LoadingPoints
-      v-if="
+      v-if="useStatus.appLoadingCompleted && dangerousSourcePoints.length > 0"
-        useStatusStore().appLoadingCompleted && dangerousSourcePoints.length > 0
-      "
       :base-points="dangerousSourcePoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.dangerousSourcePointId"
@@ -17,11 +15,11 @@
     <InformationBox
       :data="dangerousSourcePointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().dangerousSource.loading"
+      v-if="useLoadingInformation.dangerousSource.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().dangerousSource.id"
+      :key="useLoadingInformation.dangerousSource.id"
     />
   </div>
 </template>
@@ -42,6 +40,10 @@
 
   const dangerousSourcePoints = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
@@ -57,13 +59,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().dangerousSource.id,
+    () => useLoadingInformation.dangerousSource.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取危险源数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -71,7 +73,7 @@
       }
 
       const res = await $api.dangerousSource.getPointDetailById(
-        useLoadingInformationStore().dangerousSource.id
+        useLoadingInformation.dangerousSource.id
       );
 
       // 更新数据
@@ -87,7 +89,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().dangerousSource.loading = true;
+        useLoadingInformation.dangerousSource.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -96,19 +98,19 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showDangerSource.show,
+    () => useStatus.poiLayers.showDangerSource.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示危险源
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.DANGEROUS_SOURCE
           ).ids
         );
       } else {
         // 隐藏危险源
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.DANGEROUS_SOURCE
           ).ids
         );

src/component/rain-earthquake/detail-panels/EmergencyShelterComponent.vue

@@ -3,10 +3,7 @@
   <div>
     <!-- 加载避难所 -->
     <LoadingPoints
-      v-if="
+      v-if="useStatus.appLoadingCompleted && emergencyShelterPoints.length > 0"
-        useStatusStore().appLoadingCompleted &&
-        emergencyShelterPoints.length > 0
-      "
       :base-points="emergencyShelterPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.emergencyShelterPointId"
@@ -18,11 +15,11 @@
     <InformationBox
       :data="emergencyShelterPointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().emergencyShelter.loading"
+      v-if="useLoadingInformation.emergencyShelter.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().emergencyShelter.id"
+      :key="useLoadingInformation.emergencyShelter.id"
     />
   </div>
 </template>
@@ -43,6 +40,10 @@
 
   const emergencyShelterPoints = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
@@ -58,13 +59,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().emergencyShelter.id,
+    () => useLoadingInformation.emergencyShelter.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取避难所数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -72,7 +73,7 @@
       }
 
       const res = await $api.emergencyShelter.getPointDetailById(
-        useLoadingInformationStore().emergencyShelter.id
+        useLoadingInformation.emergencyShelter.id
       );
 
       // 更新数据
@@ -88,7 +89,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().emergencyShelter.loading = true;
+        useLoadingInformation.emergencyShelter.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -97,19 +98,19 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showRefugeeShelter.show,
+    () => useStatus.poiLayers.showRefugeeShelter.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示避难所
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.EMERGENCY_SHELTER
           ).ids
         );
       } else {
         // 隐藏避难所
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.EMERGENCY_SHELTER
           ).ids
         );

src/component/rain-earthquake/detail-panels/FireStationComponent.vue

@@ -3,9 +3,7 @@
   <div>
     <!-- 加载消防站 -->
     <LoadingPoints
-      v-if="
+      v-if="useStatus.appLoadingCompleted && fireStationPoints.length > 0"
-        useStatusStore().appLoadingCompleted && fireStationPoints.length > 0
-      "
       :base-points="fireStationPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.fireStationPointId"
@@ -17,11 +15,11 @@
     <InformationBox
       :data="fireStationPointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().fireStation.loading"
+      v-if="useLoadingInformation.fireStation.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().fireStation.id"
+      :key="useLoadingInformation.fireStation.id"
     />
   </div>
 </template>
@@ -42,6 +40,10 @@
 
   const fireStationPoints = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
@@ -57,13 +59,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().fireStation.id,
+    () => useLoadingInformation.fireStation.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取消防站数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -71,7 +73,7 @@
       }
 
       const res = await $api.firefighter.getPointDetailById(
-        useLoadingInformationStore().fireStation.id
+        useLoadingInformation.fireStation.id
       );
 
       // 更新数据
@@ -87,7 +89,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().fireStation.loading = true;
+        useLoadingInformation.fireStation.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -96,19 +98,19 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showFireStation.show,
+    () => useStatus.poiLayers.showFireStation.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示消防站
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.FIRE_STATION
           ).ids
         );
       } else {
         // 隐藏消防站
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.FIRE_STATION
           ).ids
         );

src/component/rain-earthquake/detail-panels/HighwayComponent.vue

@@ -13,13 +13,15 @@
   import { onMounted, watch } from 'vue';
   import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
 
+  const useStatus = useStatusStore();
+
   // 保存图层引用
   let highwayLayer: ImageryLayer | null = null;
 
   onMounted(() => {
     // 监听显示隐藏
     watch(
-      () => useStatusStore().infrastructureLayers.showHighway.show,
+      () => useStatus.infrastructureLayers.showHighway.show,
       (newValue: boolean) => {
         highwayLayer!.show = newValue;
       }

src/component/rain-earthquake/detail-panels/HospitalComponent.vue

@@ -3,7 +3,7 @@
   <div>
     <!-- 加载医院 -->
     <LoadingPoints
-      v-if="useStatusStore().appLoadingCompleted && hospitalPoints.length > 0"
+      v-if="useStatus.appLoadingCompleted && hospitalPoints.length > 0"
       :base-points="hospitalPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.hospitalPointId"
@@ -15,11 +15,11 @@
     <InformationBox
       :data="hospitalPointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().hospital.loading"
+      v-if="useLoadingInformation.hospital.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().hospital.id"
+      :key="useLoadingInformation.hospital.id"
     />
   </div>
 </template>
@@ -40,6 +40,10 @@
 
   const hospitalPoints = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
@@ -55,13 +59,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().hospital.id,
+    () => useLoadingInformation.hospital.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取医院数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -69,7 +73,7 @@
       }
 
       const res = await $api.hospitals.getPointDetailById(
-        useLoadingInformationStore().hospital.id
+        useLoadingInformation.hospital.id
       );
 
       // 更新数据
@@ -85,7 +89,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().hospital.loading = true;
+        useLoadingInformation.hospital.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -94,18 +98,18 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showHospital.show,
+    () => useStatus.poiLayers.showHospital.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示医院
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(LoadingResource.HOSPITAL)
+          useLoadingResource.getLoadingResource(LoadingResource.HOSPITAL)
             .ids
         );
       } else {
         // 隐藏医院
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(LoadingResource.HOSPITAL)
+          useLoadingResource.getLoadingResource(LoadingResource.HOSPITAL)
             .ids
         );
       }

src/component/rain-earthquake/detail-panels/NationRoadComponent.vue

@@ -13,13 +13,15 @@
   import { onMounted, watch } from 'vue';
   import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
 
+  const useStatus = useStatusStore();
+
   // 保存图层引用
   let mainRoadLayer: ImageryLayer | null = null;
 
   onMounted(() => {
     // 监听显示隐藏
     watch(
-      () => useStatusStore().infrastructureLayers.showMainRoad.show,
+      () => useStatus.infrastructureLayers.showMainRoad.show,
       (newValue: boolean) => {
         mainRoadLayer!.show = newValue;
       }

src/component/rain-earthquake/detail-panels/PopulationGridComponent.vue

@@ -13,13 +13,15 @@
   import { onMounted, watch } from 'vue';
   import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
 
+  const useStatus = useStatusStore();
+
   // 保存图层引用
   let populationLayer: ImageryLayer | null = null;
 
   onMounted(() => {
     // 监听显示
     watch(
-      () => useStatusStore().poiLayers.showPopulationGrid.show,
+      () => useStatus.poiLayers.showPopulationGrid.show,
       (newValue: boolean) => {
         populationLayer!.show = newValue;
       }

src/component/rain-earthquake/detail-panels/ReservoirComponent.vue

@@ -3,7 +3,7 @@
   <div>
     <!-- 加载水库点位 -->
     <LoadingPoints
-      v-if="useStatusStore().appLoadingCompleted && reservoirList.length > 0"
+      v-if="useStatus.appLoadingCompleted && reservoirList.length > 0"
       :base-points="reservoirList"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.reservoirPointId"
@@ -15,11 +15,11 @@
     <InformationBox
       :data="reservoirDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().reservoir.loading"
+      v-if="useLoadingInformation.reservoir.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().reservoir.id"
+      :key="useLoadingInformation.reservoir.id"
     />
   </div>
 </template>
@@ -40,6 +40,10 @@
 
   const reservoirList = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
@@ -55,13 +59,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().reservoir.id,
+    () => useLoadingInformation.reservoir.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取水库数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -69,7 +73,7 @@
       }
 
       const res = await $api.reservoirs.getPointDetailById(
-        useLoadingInformationStore().reservoir.id
+        useLoadingInformation.reservoir.id
       );
 
       // 更新数据
@@ -85,7 +89,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().reservoir.loading = true;
+        useLoadingInformation.reservoir.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -94,19 +98,19 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().infrastructureLayers.showReservoir?.show,
+    () => useStatus.infrastructureLayers.showReservoir?.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示水库
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.RESERVOIR
           ).ids
         );
       } else {
         // 隐藏水库
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.RESERVOIR
           ).ids
         );

src/component/rain-earthquake/detail-panels/SchoolComponent.vue

@@ -3,7 +3,7 @@
   <div>
     <!-- 加载学校点位 -->
     <LoadingPoints
-      v-if="useStatusStore().appLoadingCompleted && schoolList.length > 0"
+      v-if="useStatus.appLoadingCompleted && schoolList.length > 0"
       :base-points="schoolList"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.schoolPointId"
@@ -15,11 +15,11 @@
     <InformationBox
       :data="schoolDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().school.loading"
+      v-if="useLoadingInformation.school.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().school.id"
+      :key="useLoadingInformation.school.id"
     />
   </div>
 </template>
@@ -40,6 +40,10 @@
 
   const schoolList = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
@@ -55,13 +59,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().school.id,
+    () => useLoadingInformation.school.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取学校数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -69,7 +73,7 @@
       }
 
       const res = await $api.schools.getPointDetailById(
-        useLoadingInformationStore().school.id
+        useLoadingInformation.school.id
       );
 
       // 更新数据
@@ -85,7 +89,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().school.loading = true;
+        useLoadingInformation.school.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -94,18 +98,18 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showSchool?.show,
+    () => useStatus.poiLayers.showSchool?.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示学校
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(LoadingResource.SCHOOL)
+          useLoadingResource.getLoadingResource(LoadingResource.SCHOOL)
             .ids
         );
       } else {
         // 隐藏学校
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(LoadingResource.SCHOOL)
+          useLoadingResource.getLoadingResource(LoadingResource.SCHOOL)
             .ids
         );
       }

src/component/rain-earthquake/detail-panels/StorePointsComponent.vue

@@ -3,7 +3,7 @@
   <div>
     <!-- 加载物资储备点 -->
     <LoadingPoints
-      v-if="useStatusStore().appLoadingCompleted && storePointsList.length > 0"
+      v-if="useStatus.appLoadingCompleted && storePointsList.length > 0"
       :base-points="storePointsList"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.storePointsPointId"
@@ -15,11 +15,11 @@
     <InformationBox
       :data="storePointDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().storePoints.loading"
+      v-if="useLoadingInformation.storePoints.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().storePoints.id"
+      :key="useLoadingInformation.storePoints.id"
     />
   </div>
 </template>
@@ -40,6 +40,10 @@
 
   const storePointsList = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
@@ -55,13 +59,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().storePoints.id,
+    () => useLoadingInformation.storePoints.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取物资储备点数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -69,7 +73,7 @@
       }
 
       const res = await $api.storePoints.getPointDetailById(
-        useLoadingInformationStore().storePoints.id
+        useLoadingInformation.storePoints.id
       );
 
       // 更新数据
@@ -85,7 +89,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().storePoints.loading = true;
+        useLoadingInformation.storePoints.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -94,19 +98,19 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showReservePoint.show,
+    () => useStatus.poiLayers.showReservePoint.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示物资储备点
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.STORE_POINTS
           ).ids
         );
       } else {
         // 隐藏物资储备点
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.STORE_POINTS
           ).ids
         );

src/component/rain-earthquake/detail-panels/SubwayStationComponent.vue

@@ -3,9 +3,7 @@
   <div>
     <!-- 加载地铁站点点位 -->
     <LoadingPoints
-      v-if="
+      v-if="useStatus.appLoadingCompleted && subwayStationList.length > 0"
-        useStatusStore().appLoadingCompleted && subwayStationList.length > 0
-      "
       :base-points="subwayStationList"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.subwayStationPointId"
@@ -17,11 +15,11 @@
     <InformationBox
       :data="subwayStationDetail as Record<string, any>"
       :field="field"
-      v-if="useLoadingInformationStore().subwayStation.loading"
+      v-if="useLoadingInformation.subwayStation.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
       :offset-y="offsetY"
-      :key="useLoadingInformationStore().subwayStation.id"
+      :key="useLoadingInformation.subwayStation.id"
     />
   </div>
 </template>
@@ -42,6 +40,10 @@
 
   const subwayStationList = ref<Point[]>([]);
 
+  const useStatus = useStatusStore();
+  const useLoadingInformation = useLoadingInformationStore();
+  const useLoadingResource = useLoadingResourceStore();
+
   // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
@@ -57,13 +59,13 @@
 
   // 监听id变化
   watch(
-    () => useLoadingInformationStore().subwayStation.id,
+    () => useLoadingInformation.subwayStation.id,
     async (newId: number) => {
       if (newId === -1) {
         return;
       }
       // 获取地铁站点数据
-      const clickObject = useLoadingInformationStore().clickObject;
+      const clickObject = useLoadingInformation.clickObject;
 
       if (!clickObject || !clickObject.primitive) {
         console.warn('点击对象或图元不存在');
@@ -71,7 +73,7 @@
       }
 
       const res = await $api.subwayStations.getPointDetailById(
-        useLoadingInformationStore().subwayStation.id
+        useLoadingInformation.subwayStation.id
       );
 
       // 更新数据
@@ -87,7 +89,7 @@
         offsetY.value = screenPos.y;
 
         // 显示新的信息框
-        useLoadingInformationStore().subwayStation.loading = true;
+        useLoadingInformation.subwayStation.loading = true;
       } catch (error) {
         throw new Error(`坐标转换失败:${error}`);
       }
@@ -96,19 +98,19 @@
 
   // 监听显示隐藏
   watch(
-    () => useStatusStore().poiLayers.showSubwayStation?.show,
+    () => useStatus.poiLayers.showSubwayStation?.show,
     (newValue: boolean) => {
       if (newValue) {
         // 显示地铁站点
         CesiumUtilsSingleton.batchShowPrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.SUBWAY_STATION
           ).ids
         );
       } else {
         // 隐藏地铁站点
         CesiumUtilsSingleton.batchHidePrimitives(
-          useLoadingResourceStore().getLoadingResource(
+          useLoadingResource.getLoadingResource(
             LoadingResource.SUBWAY_STATION
           ).ids
         );

src/component/rain-earthquake/detail-panels/TrafficRoadComponent.vue

@@ -13,13 +13,15 @@
   import { onMounted, watch } from 'vue';
   import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
 
+  const useStatus = useStatusStore();
+
   // 保存图层引用
   let trafficRoadLayer: ImageryLayer | null = null;
 
   onMounted(() => {
     // 监听显示隐藏
     watch(
-      () => useStatusStore().infrastructureLayers.showTrafficRoad.show,
+      () => useStatus.infrastructureLayers.showTrafficRoad.show,
       (newValue: boolean) => {
         trafficRoadLayer!.show = newValue;
       }

src/component/rain-earthquake/detail-panels/WaterPipeComponent.vue

@@ -13,13 +13,15 @@
   import { onMounted, watch } from 'vue';
   import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
 
+  const useStatus = useStatusStore();
+
   // 保存图层引用
   let waterPipeLayer: ImageryLayer | null = null;
 
   onMounted(() => {
     // 监听显示隐藏
     watch(
-      () => useStatusStore().infrastructureLayers.showNetworkSystem.show,
+      () => useStatus.infrastructureLayers.showNetworkSystem.show,
       (newValue: boolean) => {
         waterPipeLayer!.show = newValue;
       }

src/component/rain-earthquake/function-child/AroundAnalysis.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="around-analysis-box"
-    v-show="useStatusStore().functionStatus.aroundAnalysis.show"
+    v-show="useStatus.functionStatus.aroundAnalysis.show"
   >
     <!-- 搜索组件 -->
     <SearchComponent />
@@ -19,6 +19,8 @@
   import AroundAnalysisDetailComponent from './around-analysis/AroundAnalysisDetailComponent.vue';
   import ButtonComponent from './around-analysis/ButtonComponent.vue';
   import SearchComponent from './around-analysis/SearchComponent.vue';
+
+  const useStatus = useStatusStore();
 </script>
 
 <style scoped></style>