[Mod 0000] 根据需求变更重新对接密闭检测系列页面

src/views/monitor/sealedMonitor/hooks/form.ts

@@ -1,44 +1,65 @@
 import { last } from 'lodash';
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { getGoafSelectOption } from '../monitor.api';
-import { useMineStore } from '/@/store/modules/mine';
-import { findNodeAll, findPath } from '/@/utils/helper/treeHelper';
+import { useMineDepartmentStore } from '/@/store/modules/mine';
+import { historicalFormSchema, searchFormSchema } from '../monitor.data';
+import { FormSchema } from '/@/components/Form';
 
 export function useInitForm() {
-  const config = {
-    id: 'id',
-    pid: 'parentId',
-    children: 'childDepart',
-  };
+  const mineStore = useMineDepartmentStore();
   const route = useRoute();
-  const mineStroe = useMineStore();
-  const mineCodes = ref<string[]>([]);
-  const getMineTree = computed(() => {
-    const id = last(route.fullPath.split('/'));
-    return findNodeAll(mineStroe.mineTree, (item) => item.id === id, config);
-  });
-  const paths = findPath(getMineTree.value, (item) => item.isLeaf, config);
-
-  mineCodes.value = paths.map((e) => e.id);
+  const id = last(route.fullPath.split('/'));
 
   // 采空区选择器
   const goafId = ref('');
   const goafOptions = ref<any[]>([]);
 
   function initGoafOptions() {
-    getGoafSelectOption({ mineCode: last(mineCodes.value) }).then(({ options, defaultValue }) => {
+    getGoafSelectOption({ mineCode: mineStore.getMineCode }).then(({ options, defaultValue }) => {
       goafOptions.value = options;
       goafId.value = defaultValue;
     });
   }
   initGoafOptions();
 
+  const realtimeSchemas: FormSchema[] = [
+    {
+      field: 'mineCodeList',
+      label: '煤矿名称',
+      component: 'MineCascader',
+      colProps: { span: 6 },
+      componentProps: {
+        resetOnDestroy: true,
+        rootId: id,
+      },
+    },
+    ...searchFormSchema,
+  ];
+
+  const historySchemas: FormSchema[] = [
+    {
+      field: 'mineCodeList',
+      label: '煤矿名称',
+      component: 'MineCascader',
+      colProps: { span: 6 },
+      required: true,
+      componentProps: {
+        resetOnDestroy: true,
+        rootId: id,
+        onChange() {
+          initGoafOptions();
+        },
+      },
+    },
+    ...historicalFormSchema,
+  ];
+
   return {
-    goafId,
+    historySchemas,
+    realtimeSchemas,
     goafOptions,
-    mineCodes,
-    getMineTree,
+    goafId,
     initGoafOptions,
   };
 }

src/views/monitor/sealedMonitor/index.vue

@@ -5,23 +5,6 @@
     <TabPane tab="实时数据监测" key="realtime">
       <!-- 实时数据表格 -->
       <BasicTable style="padding: 0" @register="registerRealtimeTable">
-        <template #form-mine-cascader>
-          <a-cascader
-            v-model:value="mineCodes"
-            :options="getMineTree"
-            :field-names="{
-              label: 'departName',
-              value: 'id',
-              children: 'childDepart',
-            }"
-            show-search
-            @change="initGoafOptions"
-          >
-            <template #displayRender="{ labels }">
-              {{ labels[labels.length - 1] }}
-            </template>
-          </a-cascader>
-        </template>
         <template #action="{ record }">
           <button @click="openModal(record)" class="action-btn">
             <SvgIcon name="details" />
@@ -33,23 +16,6 @@
     <TabPane tab="历史数据监测" key="history">
       <!-- 历史数据表格 -->
       <BasicTable style="padding: 0" @register="registerHistoryTable">
-        <template #form-mine-cascader>
-          <a-cascader
-            v-model:value="mineCodes"
-            :options="getMineTree"
-            :field-names="{
-              label: 'departName',
-              value: 'id',
-              children: 'childDepart',
-            }"
-            show-search
-            @change="initGoafOptions"
-          >
-            <template #displayRender="{ labels }">
-              {{ labels[labels.length - 1] }}
-            </template>
-          </a-cascader>
-        </template>
         <template #form-goaf-select>
           <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </template>
@@ -74,15 +40,14 @@
 <script setup lang="ts">
   import { ref } from 'vue';
   import { BasicTable } from '/@/components/Table';
-  import { Tabs, TabPane } from 'ant-design-vue';
+  import { Tabs, TabPane, message } from 'ant-design-vue';
   // 引入模拟数据
-  import { columns, searchFormSchema, historicalColumns, historicalFormSchema } from './monitor.data';
+  import { columns, historicalColumns } from './monitor.data';
   import RealtimeDetailsModal from './components/RealtimeDetailsModal.vue';
   // import HistoricalDetailsModal from './components/HistoricalDetailsModal.vue';
   import { SvgIcon } from '/@/components/Icon';
   import { getGoafData, getGoafHistory } from './monitor.api';
   import { useListPage } from '/@/hooks/system/useListPage';
-  import { last } from 'lodash-es';
   import { useModal } from '/@/components/Modal';
   import { useIntervalFn } from '@vueuse/core';
   import { useInitForm } from './hooks/form';
@@ -91,55 +56,41 @@
   // 激活的Tab页签
 
   // 处理矿名选择器相关的逻辑
-  const { goafId, goafOptions, mineCodes, getMineTree, initGoafOptions } = useInitForm();
+  const { realtimeSchemas, historySchemas, goafOptions, goafId } = useInitForm();
   const activeTab = ref('realtime');
 
   // 注册实时数据表格
   const { tableContext: ctxRealtime } = useListPage({
     tableProps: {
-      // api: getGoafData,
-      // beforeFetch(params) {
-      //   params.mineCode = last(mineCodes.value);
-      // },
+      api: getGoafData,
       columns,
       formConfig: {
-        schemas: searchFormSchema,
+        schemas: realtimeSchemas,
         schemaGroupNames: ['常规查询'],
-        submitFunc: () => reloadRealtimeTable(true),
       },
       showIndexColumn: false,
       scroll: { x: 'max-content' },
     },
     pagination: false,
   });
-  const [registerRealtimeTable, { setTableData, setLoading }] = ctxRealtime;
-
-  function reloadRealtimeTable(showLoading: boolean = false) {
-    if (showLoading) {
-      setLoading(true);
-    }
-    return getGoafData({ mineCode: last(mineCodes.value) })
-      .then((res) => {
-        setTableData(res);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+  const [registerRealtimeTable, { reload }] = ctxRealtime;
 
-  reloadRealtimeTable();
-  const { pause, resume } = useIntervalFn(reloadRealtimeTable, 10000);
+  const { pause, resume } = useIntervalFn(() => reload({ silence: true }), 10000);
 
   // 注册历史数据表格
   const { tableContext: ctxHistory, onExportXls } = useListPage({
     tableProps: {
-      api: getGoafHistory,
-      beforeFetch(params) {
+      api: (params) => {
+        if (!goafId.value) {
+          message.info('请先选择煤矿及采空区');
+          return Promise.reject();
+        }
         params.goafId = goafId.value;
+        return getGoafHistory(params);
       },
       columns: historicalColumns,
       formConfig: {
-        schemas: historicalFormSchema, // 使用历史数据的搜索配置
+        schemas: historySchemas, // 使用历史数据的搜索配置
         schemaGroupNames: ['常规查询'],
       },
       useSearchForm: true,

src/views/monitor/sealedMonitor/monitor.data.ts

@@ -118,13 +118,6 @@ export const columns: BasicColumn[] = [
 ];
 
 export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'mineCode',
-    label: '煤矿名称',
-    component: 'MineCascader',
-    slot: 'mine-cascader',
-    colProps: { span: 6 },
-  },
   {
     field: 'mineNameAbbr',
     label: '煤矿简称',
@@ -395,13 +388,13 @@ export const historicalColumns: BasicColumn[] = [
 ];
 
 export const historicalFormSchema: FormSchema[] = [
-  {
-    field: 'mineCode',
-    label: '煤矿名称',
-    component: 'MineCascader',
-    slot: 'mine-cascader',
-    colProps: { span: 6 },
-  },
+  // {
+  //   field: 'mineCode',
+  //   label: '煤矿名称',
+  //   component: 'MineCascader',
+  //   slot: 'mine-cascader',
+  //   colProps: { span: 6 },
+  // },
   // {
   //   field: 'mineNameAbbr',
   //   label: '煤矿简称',