修改地震灾害链影响点列表

src/views/home/earthquake/EarthquakeView.vue

@@ -9,23 +9,23 @@
     <!-- 断裂带 -->
     <FaultComponent
       v-if="
-        useStatusStore().appLoadingCompleted &&
-        useStatusStore().mapLayers.faultShow.loading
+        statusStore.appLoadingCompleted &&
+        statusStore.mapLayers.faultShow.loading
       "
     />
 
     <!-- 灾害链影响列表组件 -->
     <DisasterChainPointComponent
       v-if="
-        useStatusStore().appLoadingCompleted &&
-        useStatusStore().uiComponents.disasterChainPointShow.loading
+        statusStore.appLoadingCompleted &&
+        statusStore.uiComponents.disasterChainPointShow.loading
       "
-      :select-options="selectOptions"
-      :table-data-list="tableDatas"
-      :table-columns="tableColumns"
-      :page-option="paginationConfig"
-      @change-conditions="changeConditions"
-      @change-current-page="changeCurrentPage"
+      :select-options="disasterChainTableStore.selectOptions"
+      :table-data-list="disasterChainTableStore.tableDatas"
+      :table-columns="disasterChainTableStore.tableColumns"
+      :page-option="disasterChainTableStore.paginationConfig"
+      @change-conditions="disasterChainTableStore.changeConditions"
+      @change-current-page="disasterChainTableStore.changeCurrentPage"
     />
 
     <!-- 左侧按钮组件 -->
@@ -63,36 +63,36 @@
   import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue';
   import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
   import { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain';
+  import { useDisasterChainTableStore } from '@/stores/useDisasterChainTableStore';
   import { useStatusStore } from '@/stores/useStatusStore';
-  import { DisasterType } from '@/types/common/DisasterType.ts';
-  import { watch } from 'vue';
+  import { DisasterType, PointType } from '@/types/common/DisasterType.ts';
+  import { onBeforeMount } from 'vue';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
 
-  const {
-    conditions,
-    selectOptions,
-    tableDatas,
-    tableColumns,
-    paginationConfig,
-    leftButtonInfo,
-    rightButtonInfo,
-    controlPanel,
-    changeConditions,
-    changeCurrentPage,
-  } = useEarthquakeDisasterChain();
+  const { leftButtonInfo, rightButtonInfo, controlPanel } =
+    useEarthquakeDisasterChain();
 
   const statusStore = useStatusStore();
 
-  // 监听条件变化
-  watch(
-    conditions,
-    () => {
-      console.log('条件改变');
-    },
-    { deep: true }
-  );
+  const disasterChainTableStore = useDisasterChainTableStore();
+
+  onBeforeMount(() => {
+    // 设置相关数据
+    disasterChainTableStore.selectOptions = [
+      { value: PointType.LANDSLIDE, label: '滑坡' },
+      { value: PointType.DEBRIS_FLOW, label: '泥石流' },
+      { value: PointType.RISK_AREA, label: '风险区' },
+    ];
+
+    disasterChainTableStore.tableColumns = [
+      { title: '名称', key: 'disasterName' },
+      { title: '位置', key: 'position' },
+      { title: '规模等级', key: 'scaleGrade' },
+      { title: '险情等级', key: 'riskGrade' },
+    ];
+  });
 </script>
 
 <style scoped></style>