Merge remote-tracking branch 'origin/main' into zxy

src/component/map/AdministrativeDivision.vue

@@ -6,10 +6,11 @@
 <script lang="ts" setup>
   import { useAdministrativeDivision } from '@/hooks/map/useAdministrativeDivision';
   import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { LoadingResource } from '@/types/common/LoadingResourceType';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { Color } from 'cesium';
-  import { onMounted } from 'vue';
+  import { onMounted, watch } from 'vue';
 
   // 配置参数
   const { areas, areasId, areasColor, areaTransparency, labelTransparency } =
@@ -49,6 +50,18 @@
       areasId
     );
   });
+
+  // 监听显示状态改变
+  watch(
+    () => useStatusStore().mapLayers.showAdministrativeDivision.show,
+    (newValue: boolean) => {
+      if (newValue) {
+        CesiumUtilsSingleton.batchShowGeoJsonLayers(areasId);
+      } else {
+        CesiumUtilsSingleton.batchHideGeoJsonLayers(areasId);
+      }
+    }
+  );
 </script>
 
 <style scoped></style>

src/component/rain-earthquake/ControlShowComponent.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="control-show-panel-box">
+  <div
+    class="control-show-panel-box"
+    v-show="useStatusStore().uiComponents.controlPanel.show"
+  >
     <div class="title-box">
       <header>控制显示</header>
     </div>
@@ -20,6 +23,7 @@
 
 <script lang="ts" setup>
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
+  import { useStatusStore } from '@/stores/useStatusStore';
 
   defineProps<{
     constrolShowList: {

src/component/rain-earthquake/LeftButtonComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-show="useStatusStore().uiComponents.leftButton.show"
     class="left-button-box"
     :style="{
       left: `${useStatusStore().uiComponents.disasterChainPointShow.show ? 575 : 100}px`,

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -31,12 +31,12 @@ export const useRainDisasterChain = () => {
   /**
    * 下拉选项
    */
-  const selectOptions = [
+  const selectOptions = ref([
     { value: PointType.LANDSLIDE, label: '滑坡' },
     { value: PointType.DEBRIS_FLOW, label: '泥石流' },
     { value: PointType.FLASH_FLOOD, label: '山洪' },
     { value: PointType.WATER_LOGGING, label: '内涝' },
-  ];
+  ]);
 
   /**
    * 表格数据
@@ -46,12 +46,12 @@ export const useRainDisasterChain = () => {
   /**
    * 表头配置
    */
-  const tableColumns = [
+  const tableColumns = ref([
     { title: '名称', key: 'disasterName' },
     { title: '位置', key: 'position' },
     { title: '规模等级', key: 'scaleGrade' },
     { title: '险情等级', key: 'riskGrade' },
-  ];
+  ]);
 
   /**
    * 分页配置