[Feat 0000] 预警分析全系页面导出功能对接

src/hooks/system/useListPage.ts

@@ -74,7 +74,6 @@ export function useListPage(options: ListPageOptions) {
         //当useSearchFor不等于false的时候，才去触发validate
         if (options?.tableProps?.useSearchForm !== false) {
           paramsForm = await getForm().validate();
-          console.log('paramsForm', paramsForm);
         }
       } catch (e) {
         console.warn(e);
@@ -131,9 +130,9 @@ export function useListPage(options: ListPageOptions) {
       let hiddenColumns = false;
       for (const column of columns) {
         if (!column.defaultHidden) {
-          let dataIndex = column?.dataIndex;
-          if (column?.dataIndex!.toString().indexOf('_dictText')) {
-            dataIndex = column?.dataIndex!.toString().replace('_dictText', '');
+          let dataIndex = column?.dataIndex || '';
+          if (dataIndex.toString().indexOf('_dictText')) {
+            dataIndex = dataIndex.toString().replace('_dictText', '');
           }
           exportFields.push(dataIndex);
         } else {

src/hooks/system/useMethods.ts

@@ -25,17 +25,17 @@ export function useMethods() {
    */
   async function exportXls(name, url, params, isXlsx = false, timeout = 60000) {
     // 代码逻辑说明: 【JHHB-794】用户管理，跨页全选后，点击用户导出没反应---
-    if(params?.selections){
-      const split = params.selections.split(",");
-      if(split && split.length > 100){
+    if (params?.selections) {
+      const split = params.selections.split(',');
+      if (split && split.length > 100) {
         createMessage.warning('最多可选择 100 项进行导出！');
         return;
       }
     }
     // 修改为返回原生 response，便于获取 headers
-    const response = await defHttp.get(
+    const response = await defHttp.post(
       { url: url, params: params, responseType: 'blob', timeout: timeout },
-      { isTransformResponse: false, isReturnNativeResponse: true }
+      { isTransformResponse: false, isReturnNativeResponse: true, joinParamsToUrl: true }
     );
     if (!response || !response.data) {
       createMessage.warning('文件下载失败');
@@ -49,11 +49,11 @@ export function useMethods() {
     }
     const data = response.data;
     // 代码逻辑说明: 导出excel失败提示，不进行导出---
-    const reader = new FileReader()
-    reader.readAsText(data, 'utf-8')
+    const reader = new FileReader();
+    reader.readAsText(data, 'utf-8');
     reader.onload = async () => {
-      if(reader.result){
-        if(reader.result.toString().indexOf("success") !=-1){
+      if (reader.result) {
+        if (reader.result.toString().indexOf('success') != -1) {
           // 代码逻辑说明: 【issues/7738】文件中带"success"导出报错 ---
           try {
             const { success, message } = JSON.parse(reader.result.toString());
@@ -69,7 +69,7 @@ export function useMethods() {
         }
       }
       exportExcel(name, isXlsxByHeader, data);
-    }
+    };
   }
 
   /**

src/views/analysis/common/board.less

@@ -4,7 +4,7 @@
   // gap: auto;
   display: flex;
   justify-content: space-evenly;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   box-sizing: border-box;
   background-color: @white;
   padding: 10px;

src/views/analysis/warningAnalysis/airLeakStatus/airLeakStatus.data.ts

@@ -1,14 +1,15 @@
 import { BasicColumn } from '/@/components/Table';
-import { FormSchema } from '/@/components/Table';
+// import { FormSchema } from '/@/components/Table';
 import { alarmCellRender } from '/@/views/monitor/sealedMonitor/monitor.data';
 // 实时数据相关
 export const columns: BasicColumn[] = [
-  {
-    title: '序号',
-    align: 'center',
-    width: 80,
-    customRender: ({ index }: { index: number }) => `${index + 1}`,
-  },
+  // {
+  //   title: '序号',
+  //   dataIndex: 'index',
+  //   align: 'center',
+  //   width: 80,
+  //   customRender: ({ index }: { index: number }) => `${index + 1}`,
+  // },
   {
     title: '区域',
     dataIndex: 'areaName',

src/views/analysis/warningAnalysis/airLeakStatus/index.vue

@@ -33,6 +33,9 @@
             </button>
           </div>
         </template> -->
+        <template #resetBefore>
+          <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
+        </template>
         <template #form-goaf-select>
           <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </template>
@@ -58,6 +61,7 @@
   import { BasicModal } from '/@/components/Modal/index';
   import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
   import { useIntervalFn } from '@vueuse/core';
+  import { useListPage } from '/@/hooks/system/useListPage';
 
   // 激活的Tab页签
   const activeTab = ref('realtime');
@@ -102,77 +106,83 @@
   const { goafOptions, goafId, hiscode, resolveValue, registerModal, openModal, initGoafOptions, handleResolve } = useInitForm(tableCtx);
 
   // 注册历史数据表格
-  const [registerHistoryTable, historyTable] = useTable({
-    columns,
-    // columns: historyColumns,
-    api: getProvinceAlarmHistory,
-    formConfig: {
-      model: { mineCode: hiscode },
-      labelWidth: 120,
-      schemas: [
-        // {
-        //   label: '开始时间',
-        //   field: 'startTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择开始时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择开始时间' }],
-        // },
-        // {
-        //   label: '结束时间',
-        //   field: 'endTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs(),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择结束时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择结束时间' }],
-        // },
-        {
-          label: '煤矿名称',
-          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-          component: 'MineCascader', // 自定义组件名
-          componentProps: {
-            initFromStore: false,
-            syncToStore: false,
-            changeOnSelect: false,
-            onChange: (e) => {
-              historyTable.setLoading(true);
-              initGoafOptions(e).finally(() => {
-                historyTable.setLoading(false);
-              });
+  const { tableContext, onExportXls } = useListPage({
+    tableProps: {
+      columns,
+      // columns: historyColumns,
+      api: getProvinceAlarmHistory,
+      formConfig: {
+        model: { mineCode: hiscode },
+        labelWidth: 120,
+        schemas: [
+          // {
+          //   label: '开始时间',
+          //   field: 'startTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择开始时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择开始时间' }],
+          // },
+          // {
+          //   label: '结束时间',
+          //   field: 'endTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs(),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择结束时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择结束时间' }],
+          // },
+          {
+            label: '煤矿名称',
+            field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+            component: 'MineCascader', // 自定义组件名
+            componentProps: {
+              initFromStore: false,
+              syncToStore: false,
+              changeOnSelect: false,
+              onChange: (e) => {
+                historyTable.setLoading(true);
+                initGoafOptions(e).finally(() => {
+                  historyTable.setLoading(false);
+                });
+              },
             },
+            colProps: { span: 6 },
+            rules: [],
           },
-          colProps: { span: 6 },
-          rules: [],
-        },
-        ...historicalFormSchema,
-      ],
-      showAdvancedButton: false,
-      schemaGroupNames: ['常规查询'],
+          ...historicalFormSchema,
+        ],
+        showAdvancedButton: false,
+        schemaGroupNames: ['常规查询'],
+      },
+      pagination: true,
+      striped: true,
+      useSearchForm: true,
+      bordered: true,
+      showIndexColumn: true,
+      showActionColumn: false,
+    },
+    exportConfig: {
+      url: '/province/alarm/exportProvinceAlarmHistory',
+      name: '历史数据',
+      params: {
+        alarmType: 'leakageAlarm',
+        goafId,
+      },
     },
-    pagination: true,
-    striped: true,
-    useSearchForm: true,
-    bordered: true,
-    showIndexColumn: false,
-    // actionColumn: {
-    //   width: 120,
-    //   title: '操作',
-    //   dataIndex: 'action',
-    //   slots: { customRender: 'action' },
-    //   fixed: undefined,
-    // },
   });
 
+  const [registerHistoryTable, historyTable] = tableContext;
+
   async function getAlarmTotalData() {
     const params = {
       alarmType: 'leakageAlarm',
@@ -194,7 +204,9 @@
 <style lang="less" scoped>
   .board-info {
     display: flex;
+    flex-wrap: nowrap;
     padding: 10px;
+    justify-content: space-evenly;
     background-color: @white;
     // margin: 0 10px;
     margin-bottom: 5px;
@@ -202,7 +214,7 @@
     box-sizing: border-box;
   }
   .board-item {
-    flex: 1;
+    // flex: 1;
     box-sizing: border-box;
   }
   :deep(.jeecg-basic-table-form-container .ant-form) {

src/views/analysis/warningAnalysis/autoFireAnalysis/autoFireAnalysis.data.ts

@@ -26,12 +26,6 @@ export const boardData = [
 ];
 // 实时数据相关
 export const columns: BasicColumn[] = [
-  {
-    title: '序号',
-    align: 'center',
-    width: 80,
-    customRender: ({ index }: { index: number }) => `${index + 1}`,
-  },
   {
     title: '区域',
     dataIndex: 'areaName',

src/views/analysis/warningAnalysis/autoFireAnalysis/index.vue

@@ -32,12 +32,15 @@
         <!-- 历史数据表格 -->
         <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
           <!-- <template #action="{ record }">
-          <div class="action-buttons">
-            <button @click="openModal(record, 'history')" class="action-btn">
-              <SvgIcon name="details" />
-            </button>
-          </div>
-        </template> -->
+            <div class="action-buttons">
+              <button @click="openModal(record, 'history')" class="action-btn">
+                <SvgIcon name="details" />
+              </button>
+            </div>
+          </template> -->
+          <template #resetBefore>
+            <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
+          </template>
           <template #form-goaf-select>
             <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
           </template>
@@ -64,6 +67,7 @@
   import { BasicModal } from '/@/components/Modal/index';
   import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
   import { useIntervalFn } from '@vueuse/core';
+  import { useListPage } from '/@/hooks/system/useListPage';
 
   // 激活的Tab页签
   const activeTab = ref('realtime');
@@ -126,76 +130,83 @@
   const { goafOptions, goafId, hiscode, resolveValue, registerModal, openModal, initGoafOptions, handleResolve } = useInitForm(tableCtx);
 
   // 注册历史数据表格
-  const [registerHistoryTable, historyTable] = useTable({
-    columns,
-    api: getProvinceAlarmHistory,
-    formConfig: {
-      model: { mineCode: hiscode },
-      labelWidth: 120,
-      schemas: [
-        // {
-        //   label: '开始时间',
-        //   field: 'startTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择开始时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择开始时间' }],
-        // },
-        // {
-        //   label: '结束时间',
-        //   field: 'endTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs(),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择结束时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择结束时间' }],
-        // },
-        {
-          label: '煤矿名称',
-          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-          component: 'MineCascader', // 自定义组件名
-          componentProps: {
-            initFromStore: false,
-            syncToStore: false,
-            changeOnSelect: false,
-            onChange: (e) => {
-              historyTable.setLoading(true);
-              initGoafOptions(e).finally(() => {
-                historyTable.setLoading(false);
-              });
+  const { tableContext, onExportXls } = useListPage({
+    tableProps: {
+      columns,
+      // columns: historyColumns,
+      api: getProvinceAlarmHistory,
+      formConfig: {
+        model: { mineCode: hiscode },
+        labelWidth: 120,
+        schemas: [
+          // {
+          //   label: '开始时间',
+          //   field: 'startTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择开始时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择开始时间' }],
+          // },
+          // {
+          //   label: '结束时间',
+          //   field: 'endTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs(),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择结束时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择结束时间' }],
+          // },
+          {
+            label: '煤矿名称',
+            field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+            component: 'MineCascader', // 自定义组件名
+            componentProps: {
+              initFromStore: false,
+              syncToStore: false,
+              changeOnSelect: false,
+              onChange: (e) => {
+                historyTable.setLoading(true);
+                initGoafOptions(e).finally(() => {
+                  historyTable.setLoading(false);
+                });
+              },
             },
+            colProps: { span: 6 },
+            rules: [],
           },
-          colProps: { span: 6 },
-          rules: [],
-        },
-        ...historicalFormSchema,
-      ],
-      showAdvancedButton: false,
-      schemaGroupNames: ['常规查询'],
+          ...historicalFormSchema,
+        ],
+        showAdvancedButton: false,
+        schemaGroupNames: ['常规查询'],
+      },
+      pagination: true,
+      striped: true,
+      useSearchForm: true,
+      bordered: true,
+      showIndexColumn: true,
+      showActionColumn: false,
+    },
+    exportConfig: {
+      url: '/province/alarm/exportProvinceAlarmHistory',
+      name: '历史数据',
+      params: {
+        alarmType: 'fireAlarm',
+        goafId,
+      },
     },
-    pagination: true,
-    striped: true,
-    useSearchForm: true,
-    bordered: true,
-    showIndexColumn: false,
-    // actionColumn: {
-    //   width: 120,
-    //   title: '操作',
-    //   dataIndex: 'action',
-    //   slots: { customRender: 'action' },
-    //   fixed: undefined,
-    // },
   });
 
+  const [registerHistoryTable, historyTable] = tableContext;
+
   async function getAlarmTotalData() {
     const params = {
       alarmType: 'fireAlarm',

src/views/analysis/warningAnalysis/fireAreaJudgeAnalysis/fireAreaJudgeAnalysis.data.ts

@@ -26,12 +26,6 @@ export const boardData = [
 ];
 // 实时数据相关
 export const columns: BasicColumn[] = [
-  {
-    title: '序号',
-    align: 'center',
-    width: 80,
-    customRender: ({ index }: { index: number }) => `${index + 1}`,
-  },
   {
     title: '区域',
     dataIndex: 'areaName',

src/views/analysis/warningAnalysis/fireAreaJudgeAnalysis/index.vue

@@ -37,6 +37,9 @@
             </button>
           </div>
         </template> -->
+        <template #resetBefore>
+          <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
+        </template>
         <template #form-goaf-select>
           <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </template>
@@ -62,6 +65,7 @@
   import { BasicModal } from '/@/components/Modal/index';
   import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
   import { useIntervalFn } from '@vueuse/core';
+  import { useListPage } from '/@/hooks/system/useListPage';
 
   // 激活的Tab页签
   const activeTab = ref('realtime');
@@ -116,76 +120,83 @@
   const { goafOptions, goafId, hiscode, resolveValue, registerModal, openModal, initGoafOptions, handleResolve } = useInitForm(tableCtx);
 
   // 注册历史数据表格
-  const [registerHistoryTable, historyTable] = useTable({
-    columns,
-    api: getProvinceAlarmHistory,
-    formConfig: {
-      model: { mineCode: hiscode },
-      labelWidth: 120,
-      schemas: [
-        // {
-        //   label: '开始时间',
-        //   field: 'startTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择开始时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择开始时间' }],
-        // },
-        // {
-        //   label: '结束时间',
-        //   field: 'endTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs(),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择结束时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择结束时间' }],
-        // },
-        {
-          label: '煤矿名称',
-          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-          component: 'MineCascader', // 自定义组件名
-          componentProps: {
-            initFromStore: false,
-            syncToStore: false,
-            changeOnSelect: false,
-            onChange: (e) => {
-              historyTable.setLoading(true);
-              initGoafOptions(e).finally(() => {
-                historyTable.setLoading(false);
-              });
+  const { tableContext, onExportXls } = useListPage({
+    tableProps: {
+      columns,
+      // columns: historyColumns,
+      api: getProvinceAlarmHistory,
+      formConfig: {
+        model: { mineCode: hiscode },
+        labelWidth: 120,
+        schemas: [
+          // {
+          //   label: '开始时间',
+          //   field: 'startTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择开始时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择开始时间' }],
+          // },
+          // {
+          //   label: '结束时间',
+          //   field: 'endTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs(),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择结束时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择结束时间' }],
+          // },
+          {
+            label: '煤矿名称',
+            field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+            component: 'MineCascader', // 自定义组件名
+            componentProps: {
+              initFromStore: false,
+              syncToStore: false,
+              changeOnSelect: false,
+              onChange: (e) => {
+                historyTable.setLoading(true);
+                initGoafOptions(e).finally(() => {
+                  historyTable.setLoading(false);
+                });
+              },
             },
+            colProps: { span: 6 },
+            rules: [],
           },
-          colProps: { span: 6 },
-          rules: [],
-        },
-        ...historicalFormSchema,
-      ],
-      showAdvancedButton: false,
-      schemaGroupNames: ['常规查询'],
+          ...historicalFormSchema,
+        ],
+        showAdvancedButton: false,
+        schemaGroupNames: ['常规查询'],
+      },
+      pagination: true,
+      striped: true,
+      useSearchForm: true,
+      bordered: true,
+      showIndexColumn: true,
+      showActionColumn: false,
+    },
+    exportConfig: {
+      url: '/province/alarm/exportProvinceAlarmHistory',
+      name: '历史数据',
+      params: {
+        alarmType: 'unsealAlarm',
+        goafId,
+      },
     },
-    pagination: true,
-    striped: true,
-    useSearchForm: true,
-    bordered: true,
-    showIndexColumn: false,
-    // actionColumn: {
-    //   width: 120,
-    //   title: '操作',
-    //   dataIndex: 'action',
-    //   slots: { customRender: 'action' },
-    //   fixed: undefined,
-    // },
   });
 
+  const [registerHistoryTable, historyTable] = tableContext;
+
   async function getAlarmTotalData() {
     const params = {
       alarmType: 'unsealAlarm',

src/views/analysis/warningAnalysis/overlimitAlarm/index.vue

@@ -37,6 +37,9 @@
             </button>
           </div>
         </template> -->
+        <template #resetBefore>
+          <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
+        </template>
         <template #form-goaf-select>
           <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </template>
@@ -62,6 +65,7 @@
   import { BasicModal } from '/@/components/Modal/index';
   import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
   import { useIntervalFn } from '@vueuse/core';
+  import { useListPage } from '/@/hooks/system/useListPage';
 
   // 激活的Tab页签
   const activeTab = ref('realtime');
@@ -124,76 +128,83 @@
   const { goafOptions, goafId, hiscode, resolveValue, registerModal, openModal, initGoafOptions, handleResolve } = useInitForm(tableCtx);
 
   // 注册历史数据表格
-  const [registerHistoryTable, historyTable] = useTable({
-    columns,
-    api: getProvinceAlarmHistory,
-    formConfig: {
-      model: { mineCode: hiscode },
-      labelWidth: 120,
-      schemas: [
-        // {
-        //   label: '开始时间',
-        //   field: 'startTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择开始时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择开始时间' }],
-        // },
-        // {
-        //   label: '结束时间',
-        //   field: 'endTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs(),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择结束时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择结束时间' }],
-        // },
-        {
-          label: '煤矿名称',
-          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-          component: 'MineCascader', // 自定义组件名
-          componentProps: {
-            initFromStore: false,
-            syncToStore: false,
-            changeOnSelect: false,
-            onChange: (e) => {
-              historyTable.setLoading(true);
-              initGoafOptions(e).finally(() => {
-                historyTable.setLoading(false);
-              });
+  const { tableContext, onExportXls } = useListPage({
+    tableProps: {
+      columns,
+      // columns: historyColumns,
+      api: getProvinceAlarmHistory,
+      formConfig: {
+        model: { mineCode: hiscode },
+        labelWidth: 120,
+        schemas: [
+          // {
+          //   label: '开始时间',
+          //   field: 'startTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择开始时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择开始时间' }],
+          // },
+          // {
+          //   label: '结束时间',
+          //   field: 'endTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs(),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择结束时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择结束时间' }],
+          // },
+          {
+            label: '煤矿名称',
+            field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+            component: 'MineCascader', // 自定义组件名
+            componentProps: {
+              initFromStore: false,
+              syncToStore: false,
+              changeOnSelect: false,
+              onChange: (e) => {
+                historyTable.setLoading(true);
+                initGoafOptions(e).finally(() => {
+                  historyTable.setLoading(false);
+                });
+              },
             },
+            colProps: { span: 6 },
+            rules: [],
           },
-          colProps: { span: 6 },
-          rules: [],
-        },
-        ...historicalFormSchema,
-      ],
-      showAdvancedButton: false,
-      schemaGroupNames: ['常规查询'],
+          ...historicalFormSchema,
+        ],
+        showAdvancedButton: false,
+        schemaGroupNames: ['常规查询'],
+      },
+      pagination: true,
+      striped: true,
+      useSearchForm: true,
+      bordered: true,
+      showIndexColumn: true,
+      showActionColumn: false,
+    },
+    exportConfig: {
+      url: '/province/alarm/exportProvinceAlarmHistory',
+      name: '历史数据',
+      params: {
+        alarmType: 'overLimitAlarm',
+        goafId,
+      },
     },
-    pagination: true,
-    striped: true,
-    useSearchForm: true,
-    bordered: true,
-    showIndexColumn: false,
-    // actionColumn: {
-    //   width: 120,
-    //   title: '操作',
-    //   dataIndex: 'action',
-    //   slots: { customRender: 'action' },
-    //   fixed: undefined,
-    // },
   });
 
+  const [registerHistoryTable, historyTable] = tableContext;
+
   async function getAlarmTotalData() {
     const params = {
       alarmType: 'overLimitAlarm',

src/views/analysis/warningAnalysis/overlimitAlarm/overlimitAlarm.data.ts

@@ -26,12 +26,6 @@ export const boardData = [
 ];
 // 实时数据相关
 export const columns: BasicColumn[] = [
-  {
-    title: '序号',
-    align: 'center',
-    width: 80,
-    customRender: ({ index }: { index: number }) => `${index + 1}`,
-  },
   {
     title: '区域',
     dataIndex: 'areaName',

src/views/analysis/warningAnalysis/pressureDiffAnalysis/index.vue

@@ -41,6 +41,9 @@
             </button>
           </div>
         </template> -->
+        <template #resetBefore>
+          <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
+        </template>
         <template #form-goaf-select>
           <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </template>
@@ -77,6 +80,7 @@
   import { BasicModal } from '/@/components/Modal/index';
   import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
   import { useIntervalFn } from '@vueuse/core';
+  import { useListPage } from '/@/hooks/system/useListPage';
 
   // 激活的Tab页签
   const activeTab = ref('realtime');
@@ -139,76 +143,83 @@
   const { goafOptions, goafId, hiscode, resolveValue, registerModal, openModal, initGoafOptions, handleResolve } = useInitForm(tableCtx);
 
   // 注册历史数据表格
-  const [registerHistoryTable, historyTable] = useTable({
-    columns,
-    api: getProvinceAlarmHistory,
-    formConfig: {
-      model: { mineCode: hiscode },
-      labelWidth: 120,
-      schemas: [
-        // {
-        //   label: '开始时间',
-        //   field: 'startTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择开始时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择开始时间' }],
-        // },
-        // {
-        //   label: '结束时间',
-        //   field: 'endTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs(),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择结束时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择结束时间' }],
-        // },
-        {
-          label: '煤矿名称',
-          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-          component: 'MineCascader', // 自定义组件名
-          componentProps: {
-            initFromStore: false,
-            syncToStore: false,
-            changeOnSelect: false,
-            onChange: (e) => {
-              historyTable.setLoading(true);
-              initGoafOptions(e).finally(() => {
-                historyTable.setLoading(false);
-              });
+  const { tableContext, onExportXls } = useListPage({
+    tableProps: {
+      columns,
+      // columns: historyColumns,
+      api: getProvinceAlarmHistory,
+      formConfig: {
+        model: { mineCode: hiscode },
+        labelWidth: 120,
+        schemas: [
+          // {
+          //   label: '开始时间',
+          //   field: 'startTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择开始时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择开始时间' }],
+          // },
+          // {
+          //   label: '结束时间',
+          //   field: 'endTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs(),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择结束时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择结束时间' }],
+          // },
+          {
+            label: '煤矿名称',
+            field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+            component: 'MineCascader', // 自定义组件名
+            componentProps: {
+              initFromStore: false,
+              syncToStore: false,
+              changeOnSelect: false,
+              onChange: (e) => {
+                historyTable.setLoading(true);
+                initGoafOptions(e).finally(() => {
+                  historyTable.setLoading(false);
+                });
+              },
             },
+            colProps: { span: 6 },
+            rules: [],
           },
-          colProps: { span: 6 },
-          rules: [],
-        },
-        ...historicalFormSchema,
-      ],
-      showAdvancedButton: false,
-      schemaGroupNames: ['常规查询'],
+          ...historicalFormSchema,
+        ],
+        showAdvancedButton: false,
+        schemaGroupNames: ['常规查询'],
+      },
+      pagination: true,
+      striped: true,
+      useSearchForm: true,
+      bordered: true,
+      showIndexColumn: true,
+      showActionColumn: false,
+    },
+    exportConfig: {
+      url: '/province/alarm/exportProvinceAlarmHistory',
+      name: '历史数据',
+      params: {
+        alarmType: 'sourcePressureAlarm',
+        goafId,
+      },
     },
-    pagination: true,
-    striped: true,
-    useSearchForm: true,
-    bordered: true,
-    showIndexColumn: false,
-    // actionColumn: {
-    //   width: 120,
-    //   title: '操作',
-    //   dataIndex: 'action',
-    //   slots: { customRender: 'action' },
-    //   fixed: undefined,
-    // },
   });
 
+  const [registerHistoryTable, historyTable] = tableContext;
+
   async function getAlarmTotalData() {
     const params = {
       alarmType: 'sourcePressureAlarm',

src/views/analysis/warningAnalysis/pressureDiffAnalysis/pressureDiffAnalysis.data.ts

@@ -26,12 +26,6 @@ export const boardData = [
 ];
 // 实时数据相关
 export const columns: BasicColumn[] = [
-  {
-    title: '序号',
-    align: 'center',
-    width: 80,
-    customRender: ({ index }: { index: number }) => `${index + 1}`,
-  },
   {
     title: '区域',
     dataIndex: 'areaName',

src/views/analysis/warningAnalysis/sealRiskJudgeAnalysis/index.vue

@@ -39,6 +39,9 @@
             </button>
           </div>
         </template> -->
+        <template #resetBefore>
+          <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
+        </template>
         <template #form-goaf-select>
           <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </template>
@@ -63,6 +66,7 @@
   import { useModal } from '/@/components/Modal';
   import { useInitForm } from '../../common/analysis';
   import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
+  import { useListPage } from '/@/hooks/system/useListPage';
 
   // 激活的Tab页签
   const activeTab = ref('realtime');
@@ -125,76 +129,83 @@
   });
 
   // 注册历史数据表格
-  const [registerHistoryTable, historyTable] = useTable({
-    columns,
-    api: getProvinceAlarmHistory,
-    formConfig: {
-      model: { mineCode: hiscode },
-      labelWidth: 120,
-      schemas: [
-        // {
-        //   label: '开始时间',
-        //   field: 'startTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择开始时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择开始时间' }],
-        // },
-        // {
-        //   label: '结束时间',
-        //   field: 'endTime',
-        //   component: 'DatePicker',
-        //   defaultValue: dayjs(),
-        //   componentProps: {
-        //     showTime: true,
-        //     placeholder: '请选择结束时间',
-        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        //   },
-        //   colProps: { span: 6 },
-        //   rules: [{ required: true, message: '请选择结束时间' }],
-        // },
-        {
-          label: '煤矿名称',
-          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-          component: 'MineCascader', // 自定义组件名
-          componentProps: {
-            initFromStore: false,
-            syncToStore: false,
-            changeOnSelect: false,
-            onChange: (e) => {
-              historyTable.setLoading(true);
-              initGoafOptions(e).finally(() => {
-                historyTable.setLoading(false);
-              });
+  const { tableContext, onExportXls } = useListPage({
+    tableProps: {
+      columns,
+      // columns: historyColumns,
+      api: getProvinceAlarmHistory,
+      formConfig: {
+        model: { mineCode: hiscode },
+        labelWidth: 120,
+        schemas: [
+          // {
+          //   label: '开始时间',
+          //   field: 'startTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择开始时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择开始时间' }],
+          // },
+          // {
+          //   label: '结束时间',
+          //   field: 'endTime',
+          //   component: 'DatePicker',
+          //   defaultValue: dayjs(),
+          //   componentProps: {
+          //     showTime: true,
+          //     placeholder: '请选择结束时间',
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   },
+          //   colProps: { span: 6 },
+          //   rules: [{ required: true, message: '请选择结束时间' }],
+          // },
+          {
+            label: '煤矿名称',
+            field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+            component: 'MineCascader', // 自定义组件名
+            componentProps: {
+              initFromStore: false,
+              syncToStore: false,
+              changeOnSelect: false,
+              onChange: (e) => {
+                historyTable.setLoading(true);
+                initGoafOptions(e).finally(() => {
+                  historyTable.setLoading(false);
+                });
+              },
             },
+            colProps: { span: 6 },
+            rules: [],
           },
-          colProps: { span: 6 },
-          rules: [],
-        },
-        ...historicalFormSchema,
-      ],
-      showAdvancedButton: false,
-      schemaGroupNames: ['常规查询'],
+          ...historicalFormSchema,
+        ],
+        showAdvancedButton: false,
+        schemaGroupNames: ['常规查询'],
+      },
+      pagination: true,
+      striped: true,
+      useSearchForm: true,
+      bordered: true,
+      showIndexColumn: true,
+      showActionColumn: false,
+    },
+    exportConfig: {
+      url: '/province/alarm/exportProvinceAlarmHistory',
+      name: '历史数据',
+      params: {
+        alarmType: 'explosionAlarm',
+        goafId,
+      },
     },
-    pagination: true,
-    striped: true,
-    useSearchForm: true,
-    bordered: true,
-    showIndexColumn: false,
-    // actionColumn: {
-    //   width: 60,
-    //   title: '操作',
-    //   dataIndex: 'action',
-    //   slots: { customRender: 'action' },
-    //   fixed: undefined,
-    // },
   });
 
+  const [registerHistoryTable, historyTable] = tableContext;
+
   // 弹窗引用
   const [registerRealtimeModal, { openModal: openRealtimeModal }] = useModal();
 

src/views/analysis/warningAnalysis/sealRiskJudgeAnalysis/sealRiskJudgeAnalysis.data.ts

@@ -26,12 +26,6 @@ export const boardData = [
 ];
 // 实时数据相关
 export const columns: BasicColumn[] = [
-  {
-    title: '序号',
-    align: 'center',
-    width: 80,
-    customRender: ({ index }: { index: number }) => `${index + 1}`,
-  },
   {
     title: '区域',
     dataIndex: 'areaName',