添加显示隐藏状态控制

src/component/rain-earthquake/BasicComponent.vue

@@ -7,11 +7,11 @@
     <!-- 隐患点组件 -->
     <HiddenPointComponent
       :disaster-type="props.disasterType"
-      v-if="useViewerStore().getViewerLoadingCompleted()"
+      v-if="useStatusStore().getAppLoadingCompleted()"
     />
 
     <!-- 风险点组件 -->
-    <RiskPointComponent v-if="useViewerStore().getViewerLoadingCompleted()" />
+    <RiskPointComponent v-if="useStatusStore().getAppLoadingCompleted()" />
   </div>
 </template>
 
@@ -20,7 +20,7 @@
   import type { DisasterType } from '@/types/common/DisasterType.ts';
   import HiddenPointComponent from './HiddenPointComponent.vue';
   import RiskPointComponent from './RiskPointComponent.vue';
-  import { useViewerStore } from '@/stores/useViewerStore';
+  import { useStatusStore } from '@/stores/useStatusStore';
 
   // 获取父组件传递德数据
   const props = defineProps<{

src/component/rain-earthquake/DisasterChainPointComponent.vue

@@ -6,11 +6,14 @@
       type="primary"
       @click="changeStatus"
       circle
-      :title="`${btnStatus ? '关闭' : '打开'}灾害链影响点列表`"
-      >{{ btnStatus ? '-' : '+' }}</el-button
+      :title="`${useStatusStore().getDisasterChainPointShow() ? '关闭' : '打开'}灾害链影响点列表`"
+      >{{ useStatusStore().getDisasterChainPointShow() ? '-' : '+' }}</el-button
     >
   </div>
-  <div class="disaster-list-box" v-show="btnStatus">
+  <div
+    class="disaster-list-box"
+    v-show="useStatusStore().getDisasterChainPointShow()"
+  >
     <header class="table-title">
       <span>灾害链影响点列表</span>
     </header>
@@ -73,6 +76,7 @@
 </template>
 
 <script lang="ts" setup>
+  import { useStatusStore } from '@/stores/useStatusStore';
   import type { Point } from '@/types/base/Point';
   import { PointType } from '@/types/common/DisasterType';
   import type { PaginationType } from '@/types/common/PaginationType';
@@ -95,11 +99,6 @@
     (e: 'changeCurrentPage', value: number): void;
   }>();
 
-  // ==================== 状态管理 ====================
-
-  // 按钮状态
-  const btnStatus: Ref<boolean> = ref(false);
-
   // 搜索条件
   const conditions: Ref<{ tableData: string; hiddenPoint: PointType }> = ref({
     tableData: '',
@@ -123,7 +122,9 @@
 
   // 切换面板显示状态
   const changeStatus = () => {
-    btnStatus.value = !btnStatus.value;
+    useStatusStore().setDisasterChainPointShow(
+      !useStatusStore().getDisasterChainPointShow()
+    );
   };
 
   // 上一页

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -4,12 +4,12 @@
     <!-- 加载基础隐患点 -->
     <LoadingPoints
       v-if="
-        useViewerStore().getViewerLoadingCompleted() &&
-        baseHiddenPoints.length > 0
+        useStatusStore().getAppLoadingCompleted() && baseHiddenPoints.length > 0
       "
       :base-points="baseHiddenPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.hiddenDangerPointId"
+      :show-points="useStatusStore().getHiddenDangerPointShow()"
     />
 
     <!-- 显示信息框 -->
@@ -35,7 +35,7 @@
   import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useViewerStore } from '@/stores/useViewerStore';
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint';

src/component/rain-earthquake/LegendComponent.vue

@@ -1,6 +1,20 @@
 <!-- 图例组件 -->
 <template>
-  <div class="legend-box">
+  <!-- 控制按钮 -->
+  <div
+    class="control-box"
+    :style="{
+      bottom: `${useStatusStore().getLegendShow() ? 248 : 25}px`,
+    }"
+  >
+    <el-button
+      @click="changeStatus"
+      circle
+      :title="`${useStatusStore().getLegendShow() ? '关闭' : '打开'}图例`"
+      >{{ useStatusStore().getLegendShow() ? '-' : '+' }}</el-button
+    >
+  </div>
+  <div class="legend-box" v-show="useStatusStore().getLegendShow()">
     <div class="title-box">
       <header>图例</header>
     </div>
@@ -26,6 +40,7 @@
 </template>
 
 <script setup lang="ts">
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { Utils } from '@/utils/utils';
   import { onMounted, ref, type Ref } from 'vue';
 
@@ -38,6 +53,11 @@
   // 处理后图例列表
   const finalLegendList: Ref<{ name: string; link: string }[][]> = ref([]);
 
+  // 切换图例显示状态
+  const changeStatus = () => {
+    useStatusStore().setLegendShow(!useStatusStore().getLegendShow());
+  };
+
   onMounted(() => {
     finalLegendList.value = Utils.chunkArray(props.legendList, props.colsNum);
   });
@@ -58,6 +78,12 @@
     border: 1px solid rgba(0, 225, 255, 1);
   }
 
+  .control-box {
+    position: absolute;
+    right: 30px;
+    z-index: 1001;
+  }
+
   .title-box {
     background: linear-gradient(
       180deg,

src/component/rain-earthquake/LoadingPoints.vue

@@ -7,12 +7,14 @@
   import { onMounted } from 'vue';
   import { usePointsHandle } from '@/hooks/usePointsHandle';
   import type { Point } from '@/types/base/Point';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
 
   // 属性
   const props = defineProps<{
     basePoints: Point[];
     getDisasterIcon: (disasterType?: string) => string;
     prefix: string;
+    showPoints: boolean;
   }>();
 
   // 点处理钩子
@@ -20,11 +22,16 @@
 
   onMounted(() => {
     // 加载点
-    pointsHandle.addPoints(
+    const ids: string[] = pointsHandle.addPoints(
       props.basePoints,
       props.getDisasterIcon,
       props.prefix
     );
+
+    // 显示隐藏点
+    if (!props.showPoints) {
+      CesiumUtilsSingleton.batchTogglePrimitives(ids, props.showPoints);
+    }
   });
 </script>
 

src/component/rain-earthquake/RiskPointComponent.vue

@@ -3,12 +3,11 @@
   <div>
     <!-- 加载风险点 -->
     <LoadingPoints
-      v-if="
-        useViewerStore().getViewerLoadingCompleted() && riskPoints.length > 0
-      "
+      v-if="useStatusStore().getAppLoadingCompleted() && riskPoints.length > 0"
       :base-points="riskPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.riskPointId"
+      :show-points="useStatusStore().getRiskPointShow()"
     />
 
     <!-- 显示信息框 -->
@@ -31,7 +30,7 @@
   import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useViewerStore } from '@/stores/useViewerStore';
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint';