Merge branch 'master' of http://39.97.59.228:8013/hrx/goaf-monitoring-system

package.json

@@ -58,7 +58,6 @@
     "path-to-regexp": "^6.3.0",
     "pinia": "2.1.7",
     "print-js": "^1.6.0",
-    "qiankun": "^2.10.16",
     "qrcode": "^1.5.4",
     "qs": "^6.14.0",
     "resize-observer-polyfill": "^1.5.1",

src/api/sys/menu.ts

@@ -61,11 +61,12 @@ export const getMenuList: () => Promise<getMenuListResultModel> = () => {
       menu: __STATIC_ROUTES__.map((ele) => {
         if (ele.children && ele.children.length && ele.meta?.generation) {
           const template = ele.children[0];
-          ele.children.push(
-            ...tree.map((d) => {
-              return generateStaticSealedMonitorRoute(template, d);
-            })
-          );
+          const routes = tree.map((d) => {
+            const route = generateStaticSealedMonitorRoute(template, d);
+            route.meta.hideMenu = route.children?.length === 0;
+            return route;
+          });
+          ele.children.push(...routes);
         }
 
         return ele;

src/components/Configurable/detail/CustomChart.vue

@@ -15,6 +15,7 @@
       chartConfig: ModuleDataChart;
       height?: string;
       width?: string;
+      chartOption?: EChartsOption;
     }>(),
     {
       chartData: () => [],
@@ -32,10 +33,10 @@
     const domWidth = inst ? inst.getWidth() : 500;
     // 依据每一个图表配置生成图表选项
     const { yAxis = [], xAxis = [], legend, order, type, sortBy, series, dataZoom = [] } = props.chartConfig;
-    const textStyle = {
+    const textStyle = get(props.chartOption, 'textStyle', {
       color: '#fff',
       // color: '#fff',
-    };
+    });
 
     let sorttedData: any[] = [];
     if (Array.isArray(props.chartData)) {

src/components/Form/src/hooks/useFormEvents.ts

@@ -58,10 +58,10 @@ export function useFormEvents({
       let value = values[key];
 
       //antd3升级后，online表单时间控件选中值报js错 TypeError: Reflect.has called on non-object
-      if(!(values instanceof Object)){
+      if (!(values instanceof Object)) {
         return;
       }
-      
+
       const hasKey = Reflect.has(values, key);
 
       value = handleInputNumberValue(schema?.component, value);
@@ -100,14 +100,14 @@ export function useFormEvents({
    */
   function getSchemaByField(field: string): Nullable<FormSchema> {
     if (!isString(field)) {
-      return null
+      return null;
     }
     const schemaList: FormSchema[] = unref(getSchema);
     const index = schemaList.findIndex((schema) => schema.field === field);
     if (index !== -1) {
       return cloneDeep(schemaList[index]);
     }
-    return null
+    return null;
   }
 
   /**
@@ -270,7 +270,7 @@ export function useFormEvents({
     } catch (error) {
       // 代码逻辑说明: 列表查询表单会触发校验错误导致重置失败，原因不明
       emit('submit', {});
-      console.error('query form validate error, please ignore!', error)
+      console.error('query form validate error, please ignore!', error);
       //throw new Error(error);
     }
   }

src/views/analysis/warningAnalysis/airLeakStatus/airLeak.api.ts

@@ -7,6 +7,7 @@ enum Api {
   getProvinceAlarmHistory = '/province/alarm/getProvinceAlarmHistory',
   getEnfMineTreeData = '/jeecg-system/sys/user/getEnfMineTreeData',
   getProvinceAlarmNum = '/province/alarm/getProvinceAlarmNum',
+  resolveAlarm = '/province/alarm/solveProvinceAlarm',
 }
 //根据预警类型查询不同等级数量
 export const getProvinceAlarmNum = (params) =>
@@ -64,3 +65,9 @@ export const getEnfMineTreeData = () =>
   defHttp.get({
     url: Api.getEnfMineTreeData,
   });
+// 解决预警
+export const resolveAlarm = (params) =>
+  defHttp.post({
+    url: Api.resolveAlarm,
+    params,
+  });

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

@@ -60,7 +60,7 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '预警时间',
-    dataIndex: 'alertTime',
+    dataIndex: 'createTime',
   },
   {
     title: '是否解决',
@@ -68,6 +68,54 @@ export const columns: BasicColumn[] = [
   },
 ];
 
+// 历史数据相关
+export const historyColumns: BasicColumn[] = [
+  {
+    title: '序号',
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`,
+  },
+  {
+    title: '区域',
+    dataIndex: 'areaName',
+  },
+  {
+    title: '煤矿名称',
+    dataIndex: 'mineName',
+  },
+  {
+    title: '密闭名称',
+    dataIndex: 'devicePos',
+  },
+  {
+    title: '所属煤层',
+    dataIndex: 'coalSeamName',
+  },
+  {
+    title: '自燃倾向性',
+    dataIndex: 'riskLevel',
+  },
+  {
+    title: '密闭内压力',
+    dataIndex: 'interPressure',
+  },
+  {
+    title: '密闭外压力',
+    dataIndex: 'outerPressure',
+  },
+  {
+    title: '是否漏风',
+    dataIndex: 'leakage',
+  },
+  {
+    title: '预警时间',
+    dataIndex: 'createTime',
+  },
+  {
+    title: '解决时间',
+    dataIndex: 'endTime',
+  },
+];
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'mineName',

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

@@ -1,7 +1,7 @@
 <template>
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px">
+    <Tabs v-model:activeKey="activeTab" type="line" style="margin-bottom: 16px">
       <TabPane tab="实时监测" key="realtime">
         <div class="board-info">
           <div :key="index" v-for="(item, index) in boardData" class="board-item">
@@ -9,11 +9,16 @@
           </div>
         </div>
         <!-- 实时数据表格 -->
-        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
+        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
           <template #action="{ record }">
             <div class="action-buttons">
-              <button @click="openModal(record, 'realtime')" class="action-btn">
-                <SvgIcon name="details" />
+              <!-- 操作按钮 -->
+              <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
+                <span class="action-text">详情</span>
+              </button>
+              <!-- 已解决按钮 -->
+              <button @click="openModal(record, 'resolved')" class="action-btn resolved-btn" title="已解决">
+                <span class="action-text">已解决</span>
               </button>
             </div>
           </template>
@@ -22,7 +27,7 @@
 
       <TabPane tab="历史数据" key="history">
         <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }">
+        <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">
@@ -33,282 +38,347 @@
         </BasicTable>
       </TabPane>
     </Tabs>
+    <!-- 弹窗组件 -->
+    <a-modal style="top: 30%; left: 170px" v-model:visible="visibleModal" :width="450" title="实时监测数据">
+      <a-table></a-table>
+    </a-modal>
+    <!-- 弹窗组件 -->
+    <a-modal
+      style="height: 400px"
+      v-model:visible="visibleresolveModal"
+      :width="600"
+      centered
+      title="密闭漏风处理情况"
+      @ok="handleOkEdit"
+      @cancel="handleCancelEdit"
+    >
+      <a-textarea style="width: 90%; margin-left: 20px; margin-right: 20px" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { getMineData, getProvinceAlarm, getProvinceAlarmNum, getGoafData, getProvinceAlarmHistory, getEnfMineTreeData } from './airLeak.api';
-import formConfig from '/@/components/Form/src/jeecg/components/formCard/formConfig.vue';
-import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
-// 引入模拟数据
-import { columns, searchFormSchema, historicalMinesData } from './airLeakStatus.data';
+  import { onMounted, ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import {
+    getMineData,
+    getProvinceAlarm,
+    getProvinceAlarmNum,
+    getGoafData,
+    getProvinceAlarmHistory,
+    getEnfMineTreeData,
+    resolveAlarm,
+  } from './airLeak.api';
+  import formConfig from '/@/components/Form/src/jeecg/components/formCard/formConfig.vue';
+  import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
+  // 引入模拟数据
+  import { columns, historyColumns, searchFormSchema, historicalMinesData } from './airLeakStatus.data';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const boardData = ref([
-  { label: '存在风险情况数量', value: 0 },
-  { label: '闭内气体涌出', value: 0 },
-  { label: '闭外气体涌出', value: 0 },
-]);
-const minesData = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const alarmFiled = ref('');
-const historyData = ref([]);
-const lawDeptOptions = ref([]);
-// 注册实时数据表格
-const [registerTable] = useTable({
-  dataSource: minesData,
-  title: '密闭漏风状态判定',
-  api: getProvinceAlarm,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  const visibleresolveModal = ref(false);
+  const resolveValue = ref('');
+  const resolveId = ref('');
+  //煤矿列表数据
+  const deviceOptions = ref([]);
+  const goafOptions = ref([]);
+  const boardData = ref([
+    { label: '存在风险情况数量', value: 0 },
+    { label: '闭内气体涌出', value: 0 },
+    { label: '闭外气体涌出', value: 0 },
+  ]);
+  const minesData = ref([]);
+  const mineCode = ref('');
+  const goafId = ref('');
+  const alarmFiled = ref('');
+  const historyData = ref([]);
+  const lawDeptOptions = ref([]);
+  // 注册实时数据表格
+  const [registerTable] = useTable({
+    dataSource: minesData,
+    title: '密闭漏风状态判定',
+    api: getProvinceAlarm,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
+        },
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historyData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择开始时间',
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historyData,
+    columns: historyColumns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '开始时间',
+          field: 'startTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择开始时间',
+          },
+          colProps: { span: 6 }, // 占比可根据布局调整
+          rules: [{ required: true, message: '请选择开始时间' }],
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择结束时间',
+        {
+          label: '结束时间',
+          field: 'endTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择结束时间',
+          },
+          colProps: { span: 6 },
+          rules: [{ required: true, message: '请选择结束时间' }],
         },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择结束时间' }],
-      },
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        componentProps: {
-          onChange: async (e, option) => {
-            mineCode.value = e;
-            await getGoafDataList(e);
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            onChange: async (e, option) => {
+              mineCode.value = e;
+              await getGoafDataList(e);
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
-        componentProps: {
-          showSearch: true,
-          filterOption: (input: string, option: any) => {
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        {
+          label: '采空区查询',
+          field: 'goafId',
+          component: 'Select',
+          defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
+          componentProps: {
+            showSearch: true,
+            filterOption: (input: string, option: any) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            },
+            options: goafOptions,
+            onChange: async (e, option) => {
+              goafId.value = e;
+            },
           },
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+          colProps: {
+            span: 6,
           },
         },
-        colProps: {
-          span: 6,
-        },
-      },
-      {
-        field: 'alarmFiled',
-        label: '预警字段',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '甲烷', value: 'ch4Val' },
-            { label: '氧气', value: 'o2Val' },
-            { label: '一氧化碳', value: 'coVal' },
-            { label: '二氧化碳', value: 'co2Val' },
-            { label: '乙烯', value: 'c2h4Val' },
-            { label: '乙炔', value: 'c2h2Val' },
-            { label: '压差', value: 'sourcePressure' },
-            { label: '温度', value: 'temperature' },
-          ],
+        {
+          field: 'alarmFiled',
+          label: '预警字段',
+          component: 'Select',
+          componentProps: {
+            options: [
+              { label: '甲烷', value: 'ch4Val' },
+              { label: '氧气', value: 'o2Val' },
+              { label: '一氧化碳', value: 'coVal' },
+              { label: '二氧化碳', value: 'co2Val' },
+              { label: '乙烯', value: 'c2h4Val' },
+              { label: '乙炔', value: 'c2h2Val' },
+              { label: '压差', value: 'sourcePressure' },
+              { label: '温度', value: 'temperature' },
+            ],
+          },
+          colProps: { span: 6 },
         },
-        colProps: { span: 6 },
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-async function fetchAlarmData(id) {
-  const params = {
-    // 填写所需参数
-    alarmType: 'leakageAlarm',
-    mineId: id,
-    pageNo: 1,
-    pageSize: 50,
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'resolved') {
+      visibleresolveModal.value = true;
+      resolveValue.value = '';
+      // record.isResolved = resolveValue.value || '';
+      resolveId.value = record.id;
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
   };
-  const result = await getProvinceAlarm(params);
-  minesData.value = result.records;
-}
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'leakageAlarm',
-  };
-  const result = await getProvinceAlarmNum(params);
-  boardData.value[1].value = result.alarmLevel1;
-  boardData.value[2].value = result.alarmLevel2;
-  boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2;
-}
-// async function getAlarmHistory() {
-//   const result = await getProvinceAlarmHistory();
-//   historyData.value = result.records;
-// }
-const getMineDataList = async () => {
-  const params = {
-    pageNo: 1,
-    pageSize: 50,
+  async function fetchAlarmData(id) {
+    const params = {
+      // 填写所需参数
+      alarmType: 'leakageAlarm',
+      mineId: id,
+      pageNo: 1,
+      pageSize: 50,
+    };
+    const result = await getProvinceAlarm(params);
+    minesData.value = result.records;
+  }
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'leakageAlarm',
+    };
+    const result = await getProvinceAlarmNum(params);
+    boardData.value[1].value = result.alarmLevel1;
+    boardData.value[2].value = result.alarmLevel2;
+    boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2;
+  }
+  // async function getAlarmHistory() {
+  //   const result = await getProvinceAlarmHistory();
+  //   historyData.value = result.records;
+  // }
+  const getMineDataList = async () => {
+    const params = {
+      pageNo: 1,
+      pageSize: 50,
+    };
+    const response = await getMineData(params);
+    deviceOptions.value = response.records.map((item, index) => {
+      return {
+        label: item['mineName'],
+        value: item['mineCode'],
+      };
+    });
   };
-  const response = await getMineData(params);
-  deviceOptions.value = response.records.map((item, index) => {
-    return {
-      label: item['mineName'],
-      value: item['mineCode'],
+  const getGoafDataList = async (mineId) => {
+    const params = {
+      mineCode: mineId,
     };
-  });
-};
-const getGoafDataList = async (mineId) => {
-  const params = {
-    mineCode: mineId,
+    const response = await getGoafData(params);
+    goafOptions.value = response.map((item, index) => {
+      return {
+        label: item['devicePos'],
+        value: item['deviceCode'],
+      };
+    });
   };
-  const response = await getGoafData(params);
-  goafOptions.value = response.map((item, index) => {
-    return {
-      label: item['devicePos'],
-      value: item['deviceCode'],
+  async function getEnfMineData() {
+    const res = await getEnfMineTreeData();
+    lawDeptOptions.value = res.map((item) => ({
+      label: item.departName,
+      value: item.id,
+      rawdata: item,
+    }));
+    console.log(lawDeptOptions.value, '11111111');
+    // deviceOptions.value = res;
+  }
+  // 解决预警
+  async function handleOkEdit() {
+    const params = {
+      id: resolveId.value,
+      content: resolveValue.value,
     };
+    await resolveAlarm(params);
+    visibleresolveModal.value = false;
+  }
+  const handleCancelEdit = () => {
+    visibleresolveModal.value = false;
+  };
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getMineDataList();
+    getEnfMineData();
+    getAlarmTotalData();
   });
-};
-async function getEnfMineData() {
-  const res = await getEnfMineTreeData();
-  lawDeptOptions.value = res.map((item) => ({
-    label: item.departName,
-    value: item.id,
-    rawdata: item,
-  }));
-  console.log(lawDeptOptions.value, '11111111');
-  // deviceOptions.value = res;
-}
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-  getEnfMineData();
-  getAlarmTotalData();
-});
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: flex;
-  padding: 10px;
-  background-color: #fff;
-  margin: 0 10px;
-  gap: 10px;
-  box-sizing: border-box;
-}
-.board-item {
-  flex: 1;
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
-:deep(.jeecg-basic-table-form-container .ant-form) {
-  border: none !important;
-}
-:where(.css-dev-only-do-not-override-x9w3vz).ant-form-item .ant-form-item-label {
-  margin-top: 10px !important;
-}
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: flex;
+    padding: 10px;
+    background-color: #fff;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+    gap: 10px;
+    box-sizing: border-box;
+  }
+  .board-item {
+    flex: 1;
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+  :deep(.jeecg-basic-table-form-container .ant-form) {
+    border: none !important;
+  }
+  :where(.css-dev-only-do-not-override-x9w3vz).ant-form-item .ant-form-item-label {
+    margin-top: 10px !important;
+  }
+  .action-buttons {
+    display: flex;
+    gap: 8px;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+  .action-text {
+    font-size: 12px;
+    color: #6398fc;
+  }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px">
+    <Tabs v-model:activeKey="activeTab" type="line" style="margin-bottom: 16px">
       <TabPane tab="实时监测" key="realtime">
         <div class="board-info">
           <MiniBoard
@@ -15,7 +15,7 @@
           />
         </div>
         <!-- 实时数据表格 -->
-        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
+        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
           <template #action="{ record }">
             <div class="action-buttons">
               <!-- 操作按钮 -->
@@ -29,7 +29,7 @@
 
       <TabPane tab="历史数据" key="history">
         <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }">
+        <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">
@@ -55,282 +55,283 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, historicalMinesData } from './autoFireAnalysis.data';
-import { SvgIcon } from '/@/components/Icon';
-import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './autoFire.api';
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const boardData = ref([
-  {
-    label: '存在风险情况数量',
-    value: '',
-  },
-  {
-    label: '低风险',
-    value: '',
-  },
-  {
-    label: '一般风险',
-    value: '',
-  },
-  {
-    label: '较高风险',
-    value: '',
-  },
-  {
-    label: '高风险',
-    value: '',
-  },
-]);
-const minesData = ref([]);
-// 注册实时数据表格
-const [registerTable] = useTable({
-  dataSource: minesData,
-  columns,
-  api: getProvinceAlarm,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  import { ref, onMounted } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  // 引入模拟数据
+  import { boardData, columns, searchFormSchema, historicalMinesData } from './autoFireAnalysis.data';
+  import { SvgIcon } from '/@/components/Icon';
+  import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './autoFire.api';
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  //煤矿列表数据
+  const deviceOptions = ref([]);
+  const goafOptions = ref([]);
+  const mineCode = ref('');
+  const goafId = ref('');
+  const boardData = ref([
+    {
+      label: '存在风险情况数量',
+      value: '',
+    },
+    {
+      label: '低风险',
+      value: '',
+    },
+    {
+      label: '一般风险',
+      value: '',
+    },
+    {
+      label: '较高风险',
+      value: '',
+    },
+    {
+      label: '高风险',
+      value: '',
+    },
+  ]);
+  const minesData = ref([]);
+  // 注册实时数据表格
+  const [registerTable] = useTable({
+    dataSource: minesData,
+    columns,
+    api: getProvinceAlarm,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
+        },
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择开始时间',
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '开始时间',
+          field: 'startTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择开始时间',
+          },
+          colProps: { span: 6 }, // 占比可根据布局调整
+          rules: [{ required: true, message: '请选择开始时间' }],
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择结束时间',
+        {
+          label: '结束时间',
+          field: 'endTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择结束时间',
+          },
+          colProps: { span: 6 },
+          rules: [{ required: true, message: '请选择结束时间' }],
         },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择结束时间' }],
-      },
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        componentProps: {
-          onChange: async (e, option) => {
-            mineCode.value = e;
-            await getGoafDataList(e);
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            onChange: async (e, option) => {
+              mineCode.value = e;
+              await getGoafDataList(e);
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
-        componentProps: {
-          showSearch: true,
-          filterOption: (input: string, option: any) => {
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        {
+          label: '采空区查询',
+          field: 'goafId',
+          component: 'Select',
+          defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
+          componentProps: {
+            showSearch: true,
+            filterOption: (input: string, option: any) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            },
+            options: goafOptions,
+            onChange: async (e, option) => {
+              goafId.value = e;
+            },
           },
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+          colProps: {
+            span: 6,
           },
         },
-        colProps: {
-          span: 6,
-        },
-      },
-      {
-        field: 'alarmFiled',
-        label: '预警字段',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '甲烷', value: 'ch4Val' },
-            { label: '氧气', value: 'o2Val' },
-            { label: '一氧化碳', value: 'coVal' },
-            { label: '二氧化碳', value: 'co2Val' },
-            { label: '乙烯', value: 'c2h4Val' },
-            { label: '乙炔', value: 'c2h2Val' },
-            { label: '压差', value: 'sourcePressure' },
-            { label: '温度', value: 'temperature' },
-          ],
+        {
+          field: 'alarmFiled',
+          label: '预警字段',
+          component: 'Select',
+          componentProps: {
+            options: [
+              { label: '甲烷', value: 'ch4Val' },
+              { label: '氧气', value: 'o2Val' },
+              { label: '一氧化碳', value: 'coVal' },
+              { label: '二氧化碳', value: 'co2Val' },
+              { label: '乙烯', value: 'c2h4Val' },
+              { label: '乙炔', value: 'c2h2Val' },
+              { label: '压差', value: 'sourcePressure' },
+              { label: '温度', value: 'temperature' },
+            ],
+          },
+          colProps: { span: 6 },
         },
-        colProps: { span: 6 },
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-const handleOkEdit = () => {
-  visibleModal.value = false;
-};
-const handleCancelEdit = () => {
-  visibleModal.value = false;
-};
-async function fetchAlarmData(id) {
-  const params = {
-    // 填写所需参数
-    alarmType: 'fireAlarm',
-    mineId: id,
-    pageNo: 1,
-    pageSize: 50,
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
+  const handleOkEdit = () => {
+    visibleModal.value = false;
   };
-  const result = await getProvinceAlarm(params);
-  minesData.value = result.records;
-}
-const getMineDataList = async () => {
-  const params = {
-    pageNo: 1,
-    pageSize: 50,
+  const handleCancelEdit = () => {
+    visibleModal.value = false;
   };
-  const response = await getMineData(params);
-  deviceOptions.value = response.records.map((item, index) => {
-    return {
-      label: item['mineName'],
-      value: item['mineCode'],
+  async function fetchAlarmData(id) {
+    const params = {
+      // 填写所需参数
+      alarmType: 'fireAlarm',
+      mineId: id,
+      pageNo: 1,
+      pageSize: 50,
     };
-  });
-};
-const getGoafDataList = async (mineId) => {
-  const params = {
-    mineCode: mineId,
+    const result = await getProvinceAlarm(params);
+    minesData.value = result.records;
+  }
+  const getMineDataList = async () => {
+    const params = {
+      pageNo: 1,
+      pageSize: 50,
+    };
+    const response = await getMineData(params);
+    deviceOptions.value = response.records.map((item, index) => {
+      return {
+        label: item['mineName'],
+        value: item['mineCode'],
+      };
+    });
   };
-  const response = await getGoafData(params);
-  goafOptions.value = response.map((item, index) => {
-    return {
-      label: item['devicePos'],
-      value: item['deviceCode'],
+  const getGoafDataList = async (mineId) => {
+    const params = {
+      mineCode: mineId,
     };
-  });
-};
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'fireAlarm',
+    const response = await getGoafData(params);
+    goafOptions.value = response.map((item, index) => {
+      return {
+        label: item['devicePos'],
+        value: item['deviceCode'],
+      };
+    });
   };
-  const result = await getProvinceAlarmNum(params);
-  boardData.value[1].value = result.alarmLevel1;
-  boardData.value[2].value = result.alarmLevel2;
-  boardData.value[3].value = result.alarmLevel3;
-  boardData.value[4].value = result.alarmLevel4;
-  boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
-}
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-  getAlarmTotalData();
-});
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'fireAlarm',
+    };
+    const result = await getProvinceAlarmNum(params);
+    boardData.value[1].value = result.alarmLevel1;
+    boardData.value[2].value = result.alarmLevel2;
+    boardData.value[3].value = result.alarmLevel3;
+    boardData.value[4].value = result.alarmLevel4;
+    boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
+  }
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getMineDataList();
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: grid;
-  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
-  gap: auto;
-  justify-content: start;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 10px;
-  margin: 0 10px;
-  gap: 100px;
-}
-.board-item {
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: grid;
+    grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+    gap: auto;
+    justify-content: start;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px;
+    gap: 100px;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px">
+    <Tabs v-model:activeKey="activeTab" type="line" style="margin-bottom: 16px">
       <TabPane tab="实时监测" key="realtime">
         <div class="board-info">
           <MiniBoard
@@ -15,7 +15,7 @@
           />
         </div>
         <!-- 实时数据表格 -->
-        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
+        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
           <template #action="{ record }">
             <div class="action-buttons">
               <!-- 操作按钮 -->
@@ -29,7 +29,7 @@
 
       <TabPane tab="历史数据" key="history">
         <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }">
+        <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">
@@ -55,271 +55,272 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-import { SvgIcon } from '/@/components/Icon';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, historicalMinesData } from './fireAreaJudgeAnalysis.data';
-import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './fireAreaJudge.api';
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const boardData = ref([
-  {
-    label: '采空区数量',
-    value: '',
-  },
-  {
-    label: '可以启封',
-    value: '',
-  },
-  {
-    label: '不可启封',
-    value: '',
-  },
-]);
-const minesData = ref([]);
-// 注册实时数据表格
-const [registerTable] = useTable({
-  dataSource: minesData,
-  columns,
-  api: getProvinceAlarm,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 120,
-    title: '详情',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  import { onMounted, ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  // 引入模拟数据
+  import { boardData, columns, searchFormSchema, historicalMinesData } from './fireAreaJudgeAnalysis.data';
+  import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './fireAreaJudge.api';
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  //煤矿列表数据
+  const deviceOptions = ref([]);
+  const goafOptions = ref([]);
+  const mineCode = ref('');
+  const goafId = ref('');
+  const boardData = ref([
+    {
+      label: '采空区数量',
+      value: '',
+    },
+    {
+      label: '可以启封',
+      value: '',
+    },
+    {
+      label: '不可启封',
+      value: '',
+    },
+  ]);
+  const minesData = ref([]);
+  // 注册实时数据表格
+  const [registerTable] = useTable({
+    dataSource: minesData,
+    columns,
+    api: getProvinceAlarm,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
+        },
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: '详情',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择开始时间',
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '开始时间',
+          field: 'startTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择开始时间',
+          },
+          colProps: { span: 6 }, // 占比可根据布局调整
+          rules: [{ required: true, message: '请选择开始时间' }],
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择结束时间',
+        {
+          label: '结束时间',
+          field: 'endTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择结束时间',
+          },
+          colProps: { span: 6 },
+          rules: [{ required: true, message: '请选择结束时间' }],
         },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择结束时间' }],
-      },
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        componentProps: {
-          onChange: async (e, option) => {
-            mineCode.value = e;
-            await getGoafDataList(e);
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            onChange: async (e, option) => {
+              mineCode.value = e;
+              await getGoafDataList(e);
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
-        componentProps: {
-          showSearch: true,
-          filterOption: (input: string, option: any) => {
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        {
+          label: '采空区查询',
+          field: 'goafId',
+          component: 'Select',
+          defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
+          componentProps: {
+            showSearch: true,
+            filterOption: (input: string, option: any) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            },
+            options: goafOptions,
+            onChange: async (e, option) => {
+              goafId.value = e;
+            },
           },
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+          colProps: {
+            span: 6,
           },
         },
-        colProps: {
-          span: 6,
-        },
-      },
-      {
-        field: 'alarmFiled',
-        label: '预警字段',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '甲烷', value: 'ch4Val' },
-            { label: '氧气', value: 'o2Val' },
-            { label: '一氧化碳', value: 'coVal' },
-            { label: '二氧化碳', value: 'co2Val' },
-            { label: '乙烯', value: 'c2h4Val' },
-            { label: '乙炔', value: 'c2h2Val' },
-            { label: '压差', value: 'sourcePressure' },
-            { label: '温度', value: 'temperature' },
-          ],
+        {
+          field: 'alarmFiled',
+          label: '预警字段',
+          component: 'Select',
+          componentProps: {
+            options: [
+              { label: '甲烷', value: 'ch4Val' },
+              { label: '氧气', value: 'o2Val' },
+              { label: '一氧化碳', value: 'coVal' },
+              { label: '二氧化碳', value: 'co2Val' },
+              { label: '乙烯', value: 'c2h4Val' },
+              { label: '乙炔', value: 'c2h2Val' },
+              { label: '压差', value: 'sourcePressure' },
+              { label: '温度', value: 'temperature' },
+            ],
+          },
+          colProps: { span: 6 },
         },
-        colProps: { span: 6 },
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-const handleOkEdit = () => {
-  visibleModal.value = false;
-};
-const handleCancelEdit = () => {
-  visibleModal.value = false;
-};
-async function fetchAlarmData(id) {
-  const params = {
-    alarmType: 'unsealAlarm',
-    mineId: id,
-    pageNo: 1,
-    pageSize: 50,
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
+  const handleOkEdit = () => {
+    visibleModal.value = false;
   };
-  const result = await getProvinceAlarm(params);
-  minesData.value = result.records;
-}
-const getMineDataList = async () => {
-  const params = {
-    pageNo: 1,
-    pageSize: 50,
+  const handleCancelEdit = () => {
+    visibleModal.value = false;
   };
-  const response = await getMineData(params);
-  deviceOptions.value = response.records.map((item, index) => {
-    return {
-      label: item['mineName'],
-      value: item['mineCode'],
+  async function fetchAlarmData(id) {
+    const params = {
+      alarmType: 'unsealAlarm',
+      mineId: id,
+      pageNo: 1,
+      pageSize: 50,
     };
-  });
-};
-const getGoafDataList = async (mineId) => {
-  const params = {
-    mineCode: mineId,
+    const result = await getProvinceAlarm(params);
+    minesData.value = result.records;
+  }
+  const getMineDataList = async () => {
+    const params = {
+      pageNo: 1,
+      pageSize: 50,
+    };
+    const response = await getMineData(params);
+    deviceOptions.value = response.records.map((item, index) => {
+      return {
+        label: item['mineName'],
+        value: item['mineCode'],
+      };
+    });
   };
-  const response = await getGoafData(params);
-  goafOptions.value = response.map((item, index) => {
-    return {
-      label: item['devicePos'],
-      value: item['deviceCode'],
+  const getGoafDataList = async (mineId) => {
+    const params = {
+      mineCode: mineId,
     };
-  });
-};
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'unsealAlarm',
+    const response = await getGoafData(params);
+    goafOptions.value = response.map((item, index) => {
+      return {
+        label: item['devicePos'],
+        value: item['deviceCode'],
+      };
+    });
   };
-  const result = await getProvinceAlarmNum(params);
-  boardData.value[1].value = result.alarmLevel5;
-  boardData.value[2].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
-  boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4 + result.alarmLevel5;
-}
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-  getAlarmTotalData();
-});
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'unsealAlarm',
+    };
+    const result = await getProvinceAlarmNum(params);
+    boardData.value[1].value = result.alarmLevel5;
+    boardData.value[2].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
+    boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4 + result.alarmLevel5;
+  }
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getMineDataList();
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: grid;
-  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
-  gap: auto;
-  justify-content: start;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 10px;
-  margin: 0 10px;
-  gap: 100px;
-}
-.board-item {
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: grid;
+    grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+    gap: auto;
+    justify-content: start;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+    gap: 100px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px">
+    <Tabs v-model:activeKey="activeTab" type="line" style="margin-bottom: 16px">
       <TabPane tab="实时监测" key="realtime">
         <div class="board-info">
           <MiniBoard
@@ -15,7 +15,7 @@
           />
         </div>
         <!-- 实时数据表格 -->
-        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
+        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
           <template #action="{ record }">
             <div class="action-buttons">
               <!-- 操作按钮 -->
@@ -29,7 +29,7 @@
 
       <TabPane tab="历史数据" key="history">
         <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }">
+        <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">
@@ -55,282 +55,283 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-import { SvgIcon } from '/@/components/Icon';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './overlimitAlarm.data';
-import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './overlimit.api';
+  import { ref, onMounted } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  // 引入模拟数据
+  import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './overlimitAlarm.data';
+  import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './overlimit.api';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const boardData = ref([
-  {
-    label: '存在风险情况数量',
-    value: '',
-  },
-  {
-    label: '低风险',
-    value: '',
-  },
-  {
-    label: '一般风险',
-    value: '',
-  },
-  {
-    label: '较高风险',
-    value: '',
-  },
-  {
-    label: '高风险',
-    value: '',
-  },
-]);
-const minesData = ref([]);
-// 注册实时数据表格
-const [registerTable] = useTable({
-  dataSource: minesData,
-  columns,
-  api: getProvinceAlarm,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 120,
-    title: '详情',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  //煤矿列表数据
+  const deviceOptions = ref([]);
+  const goafOptions = ref([]);
+  const mineCode = ref('');
+  const goafId = ref('');
+  const boardData = ref([
+    {
+      label: '存在风险情况数量',
+      value: '',
+    },
+    {
+      label: '低风险',
+      value: '',
+    },
+    {
+      label: '一般风险',
+      value: '',
+    },
+    {
+      label: '较高风险',
+      value: '',
+    },
+    {
+      label: '高风险',
+      value: '',
+    },
+  ]);
+  const minesData = ref([]);
+  // 注册实时数据表格
+  const [registerTable] = useTable({
+    dataSource: minesData,
+    columns,
+    api: getProvinceAlarm,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
+        },
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: '详情',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择开始时间',
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '开始时间',
+          field: 'startTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择开始时间',
+          },
+          colProps: { span: 6 }, // 占比可根据布局调整
+          rules: [{ required: true, message: '请选择开始时间' }],
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择结束时间',
+        {
+          label: '结束时间',
+          field: 'endTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择结束时间',
+          },
+          colProps: { span: 6 },
+          rules: [{ required: true, message: '请选择结束时间' }],
         },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择结束时间' }],
-      },
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        componentProps: {
-          onChange: async (e, option) => {
-            mineCode.value = e;
-            await getGoafDataList(e);
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            onChange: async (e, option) => {
+              mineCode.value = e;
+              await getGoafDataList(e);
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
-        componentProps: {
-          showSearch: true,
-          filterOption: (input: string, option: any) => {
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        {
+          label: '采空区查询',
+          field: 'goafId',
+          component: 'Select',
+          defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
+          componentProps: {
+            showSearch: true,
+            filterOption: (input: string, option: any) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            },
+            options: goafOptions,
+            onChange: async (e, option) => {
+              goafId.value = e;
+            },
           },
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+          colProps: {
+            span: 6,
           },
         },
-        colProps: {
-          span: 6,
-        },
-      },
-      {
-        field: 'alarmFiled',
-        label: '预警字段',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '甲烷', value: 'ch4Val' },
-            { label: '氧气', value: 'o2Val' },
-            { label: '一氧化碳', value: 'coVal' },
-            { label: '二氧化碳', value: 'co2Val' },
-            { label: '乙烯', value: 'c2h4Val' },
-            { label: '乙炔', value: 'c2h2Val' },
-            { label: '压差', value: 'sourcePressure' },
-            { label: '温度', value: 'temperature' },
-          ],
+        {
+          field: 'alarmFiled',
+          label: '预警字段',
+          component: 'Select',
+          componentProps: {
+            options: [
+              { label: '甲烷', value: 'ch4Val' },
+              { label: '氧气', value: 'o2Val' },
+              { label: '一氧化碳', value: 'coVal' },
+              { label: '二氧化碳', value: 'co2Val' },
+              { label: '乙烯', value: 'c2h4Val' },
+              { label: '乙炔', value: 'c2h2Val' },
+              { label: '压差', value: 'sourcePressure' },
+              { label: '温度', value: 'temperature' },
+            ],
+          },
+          colProps: { span: 6 },
         },
-        colProps: { span: 6 },
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-const handleOkEdit = () => {
-  visibleModal.value = false;
-};
-const handleCancelEdit = () => {
-  visibleModal.value = false;
-};
-async function fetchAlarmData(id) {
-  const params = {
-    alarmType: 'unsealAlarm',
-    mineId: id,
-    pageNo: 1,
-    pageSize: 50,
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
+  const handleOkEdit = () => {
+    visibleModal.value = false;
   };
-  const result = await getProvinceAlarm(params);
-  minesData.value = result.records;
-}
-const getMineDataList = async () => {
-  const params = {
-    pageNo: 1,
-    pageSize: 50,
+  const handleCancelEdit = () => {
+    visibleModal.value = false;
   };
-  const response = await getMineData(params);
-  deviceOptions.value = response.records.map((item, index) => {
-    return {
-      label: item['mineName'],
-      value: item['mineCode'],
+  async function fetchAlarmData(id) {
+    const params = {
+      alarmType: 'unsealAlarm',
+      mineId: id,
+      pageNo: 1,
+      pageSize: 50,
     };
-  });
-};
-const getGoafDataList = async (mineId) => {
-  const params = {
-    mineCode: mineId,
+    const result = await getProvinceAlarm(params);
+    minesData.value = result.records;
+  }
+  const getMineDataList = async () => {
+    const params = {
+      pageNo: 1,
+      pageSize: 50,
+    };
+    const response = await getMineData(params);
+    deviceOptions.value = response.records.map((item, index) => {
+      return {
+        label: item['mineName'],
+        value: item['mineCode'],
+      };
+    });
   };
-  const response = await getGoafData(params);
-  goafOptions.value = response.map((item, index) => {
-    return {
-      label: item['devicePos'],
-      value: item['deviceCode'],
+  const getGoafDataList = async (mineId) => {
+    const params = {
+      mineCode: mineId,
     };
-  });
-};
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'overLimitAlarm',
+    const response = await getGoafData(params);
+    goafOptions.value = response.map((item, index) => {
+      return {
+        label: item['devicePos'],
+        value: item['deviceCode'],
+      };
+    });
   };
-  const result = await getProvinceAlarmNum(params);
-  boardData.value[1].value = result.alarmLevel1;
-  boardData.value[2].value = result.alarmLevel2;
-  boardData.value[3].value = result.alarmLevel3;
-  boardData.value[4].value = result.alarmLevel4;
-  boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
-}
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-  getAlarmTotalData();
-});
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'overLimitAlarm',
+    };
+    const result = await getProvinceAlarmNum(params);
+    boardData.value[1].value = result.alarmLevel1;
+    boardData.value[2].value = result.alarmLevel2;
+    boardData.value[3].value = result.alarmLevel3;
+    boardData.value[4].value = result.alarmLevel4;
+    boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
+  }
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getMineDataList();
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: grid;
-  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
-  gap: auto;
-  justify-content: start;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 10px;
-  margin: 0 10px;
-  gap: 100px;
-}
-.board-item {
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: grid;
+    grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+    gap: auto;
+    justify-content: start;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+    gap: 100px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px">
+    <Tabs v-model:activeKey="activeTab" type="line" style="margin-bottom: 16px">
       <TabPane tab="实时监测" key="realtime">
         <div class="board-info">
           <MiniBoard
@@ -15,7 +15,7 @@
           />
         </div>
         <!-- 实时数据表格 -->
-        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
+        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
           <template #action="{ record }">
             <div class="action-buttons">
               <!-- 操作按钮 -->
@@ -33,7 +33,7 @@
 
       <TabPane tab="历史数据" key="history">
         <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }">
+        <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">
@@ -71,296 +71,297 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-import { SvgIcon } from '/@/components/Icon';
-// 引入模拟数据
-import { columns, searchFormSchema, historicalMinesData } from './pressureDiffAnalysis.data';
-import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './pressureDiff.api';
+  import { ref, onMounted } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  // 引入模拟数据
+  import { columns, searchFormSchema, historicalMinesData } from './pressureDiffAnalysis.data';
+  import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './pressureDiff.api';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-const visibleresolveModal = ref(false);
-const resolveValue = ref('');
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const boardData = ref([
-  {
-    label: '存在风险情况数量',
-    value: '',
-  },
-  {
-    label: '低风险',
-    value: '',
-  },
-  {
-    label: '一般风险',
-    value: '',
-  },
-  {
-    label: '较高风险',
-    value: '',
-  },
-  {
-    label: '高风险',
-    value: '',
-  },
-]);
-const minesData = ref([]);
-// 注册实时数据表格
-const [registerTable] = useTable({
-  dataSource: minesData,
-  columns,
-  api: getProvinceAlarm,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 120,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  const visibleresolveModal = ref(false);
+  const resolveValue = ref('');
+  //煤矿列表数据
+  const deviceOptions = ref([]);
+  const goafOptions = ref([]);
+  const mineCode = ref('');
+  const goafId = ref('');
+  const boardData = ref([
+    {
+      label: '存在风险情况数量',
+      value: '',
+    },
+    {
+      label: '低风险',
+      value: '',
+    },
+    {
+      label: '一般风险',
+      value: '',
+    },
+    {
+      label: '较高风险',
+      value: '',
+    },
+    {
+      label: '高风险',
+      value: '',
+    },
+  ]);
+  const minesData = ref([]);
+  // 注册实时数据表格
+  const [registerTable] = useTable({
+    dataSource: minesData,
+    columns,
+    api: getProvinceAlarm,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
+        },
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择开始时间',
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '开始时间',
+          field: 'startTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择开始时间',
+          },
+          colProps: { span: 6 }, // 占比可根据布局调整
+          rules: [{ required: true, message: '请选择开始时间' }],
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择结束时间',
+        {
+          label: '结束时间',
+          field: 'endTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择结束时间',
+          },
+          colProps: { span: 6 },
+          rules: [{ required: true, message: '请选择结束时间' }],
         },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择结束时间' }],
-      },
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        componentProps: {
-          onChange: async (e, option) => {
-            mineCode.value = e;
-            await getGoafDataList(e);
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            onChange: async (e, option) => {
+              mineCode.value = e;
+              await getGoafDataList(e);
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
-        componentProps: {
-          showSearch: true,
-          filterOption: (input: string, option: any) => {
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        {
+          label: '采空区查询',
+          field: 'goafId',
+          component: 'Select',
+          defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
+          componentProps: {
+            showSearch: true,
+            filterOption: (input: string, option: any) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            },
+            options: goafOptions,
+            onChange: async (e, option) => {
+              goafId.value = e;
+            },
           },
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+          colProps: {
+            span: 6,
           },
         },
-        colProps: {
-          span: 6,
-        },
-      },
-      {
-        field: 'alarmFiled',
-        label: '预警字段',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '甲烷', value: 'ch4Val' },
-            { label: '氧气', value: 'o2Val' },
-            { label: '一氧化碳', value: 'coVal' },
-            { label: '二氧化碳', value: 'co2Val' },
-            { label: '乙烯', value: 'c2h4Val' },
-            { label: '乙炔', value: 'c2h2Val' },
-            { label: '压差', value: 'sourcePressure' },
-            { label: '温度', value: 'temperature' },
-          ],
+        {
+          field: 'alarmFiled',
+          label: '预警字段',
+          component: 'Select',
+          componentProps: {
+            options: [
+              { label: '甲烷', value: 'ch4Val' },
+              { label: '氧气', value: 'o2Val' },
+              { label: '一氧化碳', value: 'coVal' },
+              { label: '二氧化碳', value: 'co2Val' },
+              { label: '乙烯', value: 'c2h4Val' },
+              { label: '乙炔', value: 'c2h2Val' },
+              { label: '压差', value: 'sourcePressure' },
+              { label: '温度', value: 'temperature' },
+            ],
+          },
+          colProps: { span: 6 },
         },
-        colProps: { span: 6 },
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 120,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'resolved') {
-    visibleresolveModal.value = true;
-    record.isResolved = resolveValue.value || '';
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-const handleOkEdit = () => {
-  visibleresolveModal.value = false;
-};
-const handleCancelEdit = () => {
-  visibleresolveModal.value = false;
-};
-// async function fetchAlarmData(id) {
-//   const params = {
-//     // 填写所需参数
-//     alarmType: 'sourcePressureAlarm',
-//     mineId: id,
-//     pageNo: 1,
-//     pageSize: 50,
-//   };
-//   const result = await getProvinceAlarm(params);
-//   minesData.value = result.records;
-// }
-const getMineDataList = async () => {
-  const params = {
-    pageNo: 1,
-    pageSize: 50,
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'resolved') {
+      visibleresolveModal.value = true;
+      record.isResolved = resolveValue.value || '';
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
+  const handleOkEdit = () => {
+    visibleresolveModal.value = false;
   };
-  const response = await getMineData(params);
-  deviceOptions.value = response.records.map((item, index) => {
-    return {
-      label: item['mineName'],
-      value: item['mineCode'],
+  const handleCancelEdit = () => {
+    visibleresolveModal.value = false;
+  };
+  // async function fetchAlarmData(id) {
+  //   const params = {
+  //     // 填写所需参数
+  //     alarmType: 'sourcePressureAlarm',
+  //     mineId: id,
+  //     pageNo: 1,
+  //     pageSize: 50,
+  //   };
+  //   const result = await getProvinceAlarm(params);
+  //   minesData.value = result.records;
+  // }
+  const getMineDataList = async () => {
+    const params = {
+      pageNo: 1,
+      pageSize: 50,
     };
-  });
-};
-const getGoafDataList = async (mineId) => {
-  const params = {
-    mineCode: mineId,
+    const response = await getMineData(params);
+    deviceOptions.value = response.records.map((item, index) => {
+      return {
+        label: item['mineName'],
+        value: item['mineCode'],
+      };
+    });
   };
-  const response = await getGoafData(params);
-  goafOptions.value = response.map((item, index) => {
-    return {
-      label: item['devicePos'],
-      value: item['deviceCode'],
+  const getGoafDataList = async (mineId) => {
+    const params = {
+      mineCode: mineId,
     };
-  });
-};
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'sourcePressureAlarm',
+    const response = await getGoafData(params);
+    goafOptions.value = response.map((item, index) => {
+      return {
+        label: item['devicePos'],
+        value: item['deviceCode'],
+      };
+    });
   };
-  const result = await getProvinceAlarmNum(params);
-  boardData.value[1].value = result.alarmLevel1;
-  boardData.value[2].value = result.alarmLevel2;
-  boardData.value[3].value = result.alarmLevel3;
-  boardData.value[4].value = result.alarmLevel4;
-  boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
-}
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-  getAlarmTotalData();
-});
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'sourcePressureAlarm',
+    };
+    const result = await getProvinceAlarmNum(params);
+    boardData.value[1].value = result.alarmLevel1;
+    boardData.value[2].value = result.alarmLevel2;
+    boardData.value[3].value = result.alarmLevel3;
+    boardData.value[4].value = result.alarmLevel4;
+    boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
+  }
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getMineDataList();
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: grid;
-  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
-  gap: auto;
-  justify-content: start;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 10px;
-  margin: 0 10px;
-  gap: 100px;
-}
-.board-item {
-  box-sizing: border-box;
-}
-.action-buttons {
-  display: flex;
-  gap: 8px;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
-.action-text {
-  font-size: 12px;
-  color: #6398fc;
-}
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: grid;
+    grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+    gap: auto;
+    justify-content: start;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+    gap: 100px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
+  .action-buttons {
+    display: flex;
+    gap: 8px;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+  .action-text {
+    font-size: 12px;
+    color: #6398fc;
+  }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px">
+    <Tabs v-model:activeKey="activeTab" type="line" style="margin-bottom: 16px">
       <TabPane tab="实时监测" key="realtime">
         <div class="board-info">
           <MiniBoard
@@ -15,7 +15,7 @@
           />
         </div>
         <!-- 实时数据表格 -->
-        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
+        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
           <!-- 核心：判断record是否有有效数据，无则显示- -->
           <template #action="{ record }">
             <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
@@ -31,7 +31,7 @@
 
       <TabPane tab="历史数据" key="history">
         <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }">
+        <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">
@@ -57,282 +57,283 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-import { SvgIcon } from '/@/components/Icon';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, historicalMinesData } from './sealRiskJudgeAnalysis.data';
-import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './sealRiskJudge.api';
+  import { ref, onMounted } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  // 引入模拟数据
+  import { boardData, columns, searchFormSchema, historicalMinesData } from './sealRiskJudgeAnalysis.data';
+  import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './sealRiskJudge.api';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const boardData = ref([
-  {
-    label: '采空区数量',
-    value: '',
-  },
-  {
-    label: '增减风安全区',
-    value: '',
-  },
-  {
-    label: '减风危险区',
-    value: '',
-  },
-  {
-    label: '增风危险区',
-    value: '',
-  },
-  {
-    label: '爆炸危险区',
-    value: '',
-  },
-]);
-const minesData = ref([]);
-// 注册实时数据表格
-const [registerTable] = useTable({
-  dataSource: minesData,
-  columns,
-  api: getProvinceAlarm,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  //煤矿列表数据
+  const deviceOptions = ref([]);
+  const goafOptions = ref([]);
+  const mineCode = ref('');
+  const goafId = ref('');
+  const boardData = ref([
+    {
+      label: '采空区数量',
+      value: '',
+    },
+    {
+      label: '增减风安全区',
+      value: '',
+    },
+    {
+      label: '减风危险区',
+      value: '',
+    },
+    {
+      label: '增风危险区',
+      value: '',
+    },
+    {
+      label: '爆炸危险区',
+      value: '',
+    },
+  ]);
+  const minesData = ref([]);
+  // 注册实时数据表格
+  const [registerTable] = useTable({
+    dataSource: minesData,
+    columns,
+    api: getProvinceAlarm,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
+        },
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择开始时间',
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '开始时间',
+          field: 'startTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择开始时间',
+          },
+          colProps: { span: 6 }, // 占比可根据布局调整
+          rules: [{ required: true, message: '请选择开始时间' }],
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        componentProps: {
-          showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-          placeholder: '请选择结束时间',
+        {
+          label: '结束时间',
+          field: 'endTime',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            placeholder: '请选择结束时间',
+          },
+          colProps: { span: 6 },
+          rules: [{ required: true, message: '请选择结束时间' }],
         },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择结束时间' }],
-      },
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        componentProps: {
-          onChange: async (e, option) => {
-            mineCode.value = e;
-            await getGoafDataList(e);
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            onChange: async (e, option) => {
+              mineCode.value = e;
+              await getGoafDataList(e);
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
-        componentProps: {
-          showSearch: true,
-          filterOption: (input: string, option: any) => {
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        {
+          label: '采空区查询',
+          field: 'goafId',
+          component: 'Select',
+          defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
+          componentProps: {
+            showSearch: true,
+            filterOption: (input: string, option: any) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            },
+            options: goafOptions,
+            onChange: async (e, option) => {
+              goafId.value = e;
+            },
           },
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+          colProps: {
+            span: 6,
           },
         },
-        colProps: {
-          span: 6,
-        },
-      },
-      {
-        field: 'alarmFiled',
-        label: '预警字段',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '甲烷', value: 'ch4Val' },
-            { label: '氧气', value: 'o2Val' },
-            { label: '一氧化碳', value: 'coVal' },
-            { label: '二氧化碳', value: 'co2Val' },
-            { label: '乙烯', value: 'c2h4Val' },
-            { label: '乙炔', value: 'c2h2Val' },
-            { label: '压差', value: 'sourcePressure' },
-            { label: '温度', value: 'temperature' },
-          ],
+        {
+          field: 'alarmFiled',
+          label: '预警字段',
+          component: 'Select',
+          componentProps: {
+            options: [
+              { label: '甲烷', value: 'ch4Val' },
+              { label: '氧气', value: 'o2Val' },
+              { label: '一氧化碳', value: 'coVal' },
+              { label: '二氧化碳', value: 'co2Val' },
+              { label: '乙烯', value: 'c2h4Val' },
+              { label: '乙炔', value: 'c2h2Val' },
+              { label: '压差', value: 'sourcePressure' },
+              { label: '温度', value: 'temperature' },
+            ],
+          },
+          colProps: { span: 6 },
         },
-        colProps: { span: 6 },
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-const handleOkEdit = () => {
-  visibleModal.value = false;
-};
-const handleCancelEdit = () => {
-  visibleModal.value = false;
-};
-async function fetchAlarmData(id) {
-  const params = {
-    // 填写所需参数
-    alarmType: 'leakageAlarm',
-    mineId: id,
-    pageNo: 1,
-    pageSize: 50,
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
+  const handleOkEdit = () => {
+    visibleModal.value = false;
   };
-  const result = await getProvinceAlarm(params);
-  minesData.value = result.records;
-}
-const getMineDataList = async () => {
-  const params = {
-    pageNo: 1,
-    pageSize: 50,
+  const handleCancelEdit = () => {
+    visibleModal.value = false;
   };
-  const response = await getMineData(params);
-  deviceOptions.value = response.records.map((item, index) => {
-    return {
-      label: item['mineName'],
-      value: item['mineCode'],
+  async function fetchAlarmData(id) {
+    const params = {
+      // 填写所需参数
+      alarmType: 'leakageAlarm',
+      mineId: id,
+      pageNo: 1,
+      pageSize: 50,
     };
-  });
-};
-const getGoafDataList = async (mineId) => {
-  const params = {
-    mineCode: mineId,
+    const result = await getProvinceAlarm(params);
+    minesData.value = result.records;
+  }
+  const getMineDataList = async () => {
+    const params = {
+      pageNo: 1,
+      pageSize: 50,
+    };
+    const response = await getMineData(params);
+    deviceOptions.value = response.records.map((item, index) => {
+      return {
+        label: item['mineName'],
+        value: item['mineCode'],
+      };
+    });
   };
-  const response = await getGoafData(params);
-  goafOptions.value = response.map((item, index) => {
-    return {
-      label: item['devicePos'],
-      value: item['deviceCode'],
+  const getGoafDataList = async (mineId) => {
+    const params = {
+      mineCode: mineId,
     };
-  });
-};
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'explosionAlarm',
+    const response = await getGoafData(params);
+    goafOptions.value = response.map((item, index) => {
+      return {
+        label: item['devicePos'],
+        value: item['deviceCode'],
+      };
+    });
   };
-  const result = await getProvinceAlarmNum(params);
-  boardData.value[1].value = result.alarmLevel1;
-  boardData.value[2].value = result.alarmLevel2;
-  boardData.value[3].value = result.alarmLevel3;
-  boardData.value[4].value = result.alarmLevel4;
-  boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
-}
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-  getAlarmTotalData();
-});
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'explosionAlarm',
+    };
+    const result = await getProvinceAlarmNum(params);
+    boardData.value[1].value = result.alarmLevel1;
+    boardData.value[2].value = result.alarmLevel2;
+    boardData.value[3].value = result.alarmLevel3;
+    boardData.value[4].value = result.alarmLevel4;
+    boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
+  }
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getMineDataList();
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: grid;
-  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
-  gap: auto;
-  justify-content: start;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 10px;
-  margin: 0 10px;
-  gap: 100px;
-}
-.board-item {
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: grid;
+    grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+    gap: auto;
+    justify-content: start;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+    gap: 100px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
 </style>

src/views/monitor/sealedMonitor/components/RealtimeDetailsModal.vue

@@ -5,14 +5,21 @@
       <div v-for="(item, index) in modalDetailsData.basicInfo" :key="index" class="info-item">
         <span class="label">{{ item.label }}:</span>
         <span class="value" :class="getBasicInfoTagClass(item.value)">
-          {{ item.value }}
+          {{ dataRef[item.value] || '-' }}
         </span>
       </div>
     </div>
 
     <!-- 监测数据卡片 -->
     <div class="data-cards">
-      <MiniBoard v-for="(item, index) in modalDetailsData.board" :key="index" type="D" :label="item.label" :value="item.value" layout="val-top" />
+      <MiniBoard
+        v-for="(item, index) in modalDetailsData.board"
+        :key="index"
+        type="D"
+        :label="item.label"
+        :value="dataRef[item.value] || '-'"
+        layout="val-top"
+      />
     </div>
 
     <!-- 图表区域 -->
@@ -29,6 +36,11 @@
           <CustomChart
             :chart-data="modalDetailsData.gasConcentrationData"
             :chart-config="modalDetailsData.gasConcentrationConfig"
+            :chart-option="{
+              textStyle: {
+                color: '#000',
+              },
+            }"
             style="height: 100%; width: 100%"
           />
         </div>
@@ -39,6 +51,11 @@
           <CustomChart
             :chart-data="modalDetailsData.pressureData"
             :chart-config="modalDetailsData.pressureConfig"
+            :chart-option="{
+              textStyle: {
+                color: '#000',
+              },
+            }"
             style="height: 100%; width: 100%"
           />
         </div>

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

@@ -141,19 +141,19 @@ export const minesData = [
   },
 ];
 
-export const modalDetailsData: {} = {
+export const modalDetailsData = {
   basicInfo: [
     {
       label: '煤矿名称',
-      value: '神木市三江能源有限公司',
+      value: 'mineName',
     },
     {
-      label: '密闭名称',
-      value: 'xxxx采空区密闭',
+      label: '设备位置',
+      value: 'devicePos',
     },
     {
       label: '所属煤层',
-      value: 'xxxx煤层',
+      value: 'coalSeamName',
     },
     {
       label: '自燃情况',
@@ -161,53 +161,53 @@ export const modalDetailsData: {} = {
     },
     {
       label: '是否漏风',
-      value: '闭内气体涌出',
+      value: 'leakageAlarm',
     },
     {
       label: '自然发火隐患',
-      value: '低风险',
+      value: 'fireAlarm',
     },
     {
       label: '密闭启封判定',
-      value: '不可启封',
+      value: 'unsealAlarm',
     },
     {
       label: '爆炸危险性',
-      value: '低风险',
+      value: 'explosionAlarm',
     },
   ],
   board: [
     {
       label: 'CO(ppm)',
-      value: '21',
+      value: 'coVal',
     },
     {
       label: 'CO2(PPM)',
-      value: '21',
+      value: 'co2Val',
     },
     {
       label: 'O2(%)',
-      value: '24',
+      value: 'o2Val',
     },
     {
       label: 'CH4(%)',
-      value: '17',
+      value: 'ch4Val',
     },
     {
       label: 'C2H4(ppm)',
-      value: '23',
+      value: 'c2h4Val',
     },
     {
       label: 'C2H2(ppm)',
-      value: '14',
+      value: 'c2h2Val',
     },
     {
       label: '温度(℃)',
-      value: '14',
+      value: 'temperature',
     },
     {
       label: '压差(Pa)',
-      value: '14',
+      value: 'sourcePressure',
     },
   ],
   demoBlastData: {

src/views/system/algorithm/algorithm.api.ts

@@ -27,9 +27,7 @@ export function getCoalSeamAlarmRule(params: any) {
   return defHttp.post({ url: Api.getCoalSeamAlarmRule, params });
 }
 export function updateCoalSeamAlarmRule(params: any) {
-  return defHttp.post({ url: Api.updateCoalSeamAlarmRule, params }).then(() => {
-    message.success('修改成功');
-  });
+  return defHttp.post({ url: Api.updateCoalSeamAlarmRule, params });
 }
 export function addCoalSeamAlarmRule(params: any) {
   return defHttp.post({ url: Api.addCoalSeamAlarmRule, params }).then(() => {
@@ -51,9 +49,7 @@ export function addGoafDataLimit(params: any) {
   });
 }
 export function updateGoafDataLimit(params: any) {
-  return defHttp.post({ url: Api.updateGoafDataLimit, params }).then(() => {
-    message.success('修改成功');
-  });
+  return defHttp.post({ url: Api.updateGoafDataLimit, params });
 }
 export function deleteGoafDataLimit(params: any) {
   return defHttp.post({ url: Api.deleteGoafDataLimit, params }, { joinParamsToUrl: true });

src/views/system/algorithm/algorithm.data.ts

@@ -3,17 +3,6 @@ import { FormSchema } from '/@/components/Form';
 import { BasicColumn } from '/@/components/Table';
 import { Tag } from 'ant-design-vue';
 
-const goafAlarmOptions = [
-  { value: 'ch4Val', label: '甲烷' },
-  { value: 'o2Val', label: '氧气' },
-  { value: 'coVal', label: '一氧化碳' },
-  { value: 'co2Val', label: '二氧化碳' },
-  { value: 'c2h4Val', label: '乙烯' },
-  { value: 'c2h2Val', label: '乙炔' },
-  { value: 'sourcePressure', label: '压差' },
-  { value: 'temperature', label: '温度' },
-];
-
 /** 煤层预警参数 表格配置 */
 export const columnsCoalAlarm: BasicColumn[] = [
   {
@@ -467,32 +456,137 @@ export const schemasCoalAlarm: FormSchema[] = [
     colProps: { span: 12 },
   },
 ];
+
+export const goafAlarmModel = {
+  ch4Val: {
+    alarmField: 'ch4Val',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  o2Val: {
+    alarmField: 'o2Val',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  coVal: {
+    alarmField: 'coVal',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  co2Val: {
+    alarmField: 'co2Val',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  c2h4Val: {
+    alarmField: 'c2h4Val',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  c2h2Val: {
+    alarmField: 'c2h2Val',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  sourcePressure: {
+    alarmField: 'sourcePressure',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+  temperature: {
+    alarmField: 'temperature',
+    lowerLimit: undefined,
+    upperLimit: undefined,
+  },
+};
+
 export const schemasGoafLimit: FormSchema[] = [
   {
-    label: 'ID',
-    field: 'id',
-    show: false,
+    field: 'ch4Val',
+    label: '甲烷',
+    labelWidth: 118,
     component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.ch4Val,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
   },
   {
-    label: '监测值:',
-    field: 'alarmField',
-    component: 'Select',
-    defaultValue: 'ch4Val',
-    componentProps: {
-      options: goafAlarmOptions,
-    },
+    field: 'o2Val',
+    label: '氧气',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.o2Val,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
   },
   {
-    label: '下限值:',
-    field: 'lowerLimit',
-    defaultValue: 0,
-    component: 'InputNumber',
+    field: 'coVal',
+    label: '一氧化碳',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.coVal,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
   },
   {
-    label: '上限值:',
-    field: 'upperLimit',
-    defaultValue: 100,
-    component: 'InputNumber',
+    field: 'co2Val',
+    label: '二氧化碳',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.co2Val,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
+  },
+  {
+    field: 'c2h4Val',
+    label: '乙烯',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.c2h4Val,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
+  },
+  {
+    field: 'c2h2Val',
+    label: '乙炔',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.c2h2Val,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
+  },
+  {
+    field: 'sourcePressure',
+    label: '压差',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.sourcePressure,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
+  },
+  {
+    field: 'temperature',
+    label: '温度',
+    labelWidth: 118,
+    component: 'Input',
+    slot: 'InputRangeGoaf',
+    defaultValue: goafAlarmModel.temperature,
+    /** 借用 */
+    groupName: '下限 - 上限',
+    colProps: { span: 12 },
   },
 ];

src/views/system/algorithm/index.vue

@@ -17,9 +17,9 @@
             <button @click="handleEdit({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn">
               <SvgIcon name="edit" />
             </button>
-            <button @click="handleAdd({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn ml-1">
+            <!-- <button @click="handleAdd({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn ml-1">
               <PlusOutlined />
-            </button>
+            </button> -->
             <a-popconfirm title="确认删除？" @confirm="handleDelete(record, 'coal')">
               <button @click="handleDelete(record, 'goaf')" class="action-btn ml-1">
                 <SvgIcon name="delete" />
@@ -33,9 +33,9 @@
         <button @click="handleEdit({ coalSeamId: record.id, mineCode: record.mineCode }, 'coal')" class="action-btn">
           <SvgIcon name="edit" />
         </button>
-        <button @click="handleAdd({ coalSeamId: record.id, mineCode: record.mineCode }, 'coal')" class="action-btn ml-1">
+        <!-- <button @click="handleAdd({ coalSeamId: record.id, mineCode: record.mineCode }, 'coal')" class="action-btn ml-1">
           <PlusOutlined />
-        </button>
+        </button> -->
         <a-popconfirm title="确认删除？" @confirm="handleDelete(record, 'coal')">
           <button class="action-btn ml-1">
             <SvgIcon name="delete" />
@@ -73,6 +73,15 @@
           </a-input-group>
         </a-form-item>
       </template>
+      <template #InputRangeGoaf="{ model, field, schema }">
+        <a-form-item v-if="model[field]">
+          <a-input-group>
+            <a-input-number v-model:value="model[field][`lowerLimit`]" style="width: calc(50% - 100px)" placeholder="-" />
+            <a-input style="width: 200px; border-left: 0; pointer-events: none; color: inherit" :value="schema.groupName" disabled />
+            <a-input-number v-model:value="model[field][`upperLimit`]" style="width: calc(50% - 100px); border-left: 0" placeholder="-" />
+          </a-input-group>
+        </a-form-item>
+      </template>
     </BasicForm>
   </BasicModal>
 </template>
@@ -85,7 +94,7 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { BasicTable, useTable } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
-  import { columnsCoalAlarm, columnsGoafLimit, schemasCoalAlarm, schemasGoafLimit, searchFormSchema } from './algorithm.data';
+  import { columnsCoalAlarm, columnsGoafLimit, schemasCoalAlarm, schemasGoafLimit, searchFormSchema, goafAlarmModel } from './algorithm.data';
   import {
     addCoalSeamAlarmRule,
     deleteCoalSeamAlarmRule,
@@ -99,9 +108,9 @@
     getGoafDataLimit,
   } from './algorithm.api';
   import { Flex } from 'ant-design-vue';
-  import { PlusOutlined } from '@ant-design/icons-vue';
-  import { last } from 'lodash-es';
-
+  // import { PlusOutlined } from '@ant-design/icons-vue';
+  import { forEach, isNil, last, map } from 'lodash-es';
+  import { message } from 'ant-design-vue';
   import { SvgIcon } from '/@/components/Icon';
 
   const { prefixCls } = useDesign('algorithm-list');
@@ -165,8 +174,30 @@
       'goaf',
       {
         schemas: schemasGoafLimit,
-        submitFunc: (res) => (res.id ? updateGoafDataLimit(res) : addGoafDataLimit(res)),
-        fetchRecord: (params) => getGoafDataLimit(params).then((r) => last(r)),
+        submitFunc: (res) =>
+          Promise.all(
+            map(res, (item) => {
+              if (item.id) {
+                return updateGoafDataLimit(item);
+              }
+              if (!isNil(item.lowerLimit) || !isNil(item.upperLimit)) {
+                return addGoafDataLimit(item);
+              }
+              return Promise.resolve();
+            })
+          ),
+        fetchRecord: (params) =>
+          getGoafDataLimit(params).then((r) => {
+            const result: any = {};
+            forEach(goafAlarmModel, (item, key) => {
+              result[key] = { ...params, ...item };
+            });
+            forEach(r, (item) => {
+              result[item.alarmField] = item;
+            });
+
+            return result;
+          }),
       },
     ],
   ]);
@@ -174,7 +205,7 @@
     ['coal', { title: '预警参数设置', visible: true, loading: true }],
     ['goaf', { title: '超限预警设置', visible: true, loading: true }],
   ]);
-  const submitResolver = ref<(res: any) => Promise<void>>();
+  const submitResolver = ref<(res: any) => Promise<unknown>>();
   // 点击编辑后，获取对应的表单和弹窗配置
   async function handleEdit(record, sign: string) {
     if (!modalPropsMap.has(sign)) return;
@@ -196,26 +227,26 @@
 
     setModalProps({ loading: false });
   }
-  async function handleAdd(record, sign: string) {
-    if (!modalPropsMap.has(sign)) return;
-    if (!formPropsMap.has(sign)) return;
-    setModalProps(modalPropsMap.get(sign) as ModalProps);
-    const { schemas, submitFunc } = formPropsMap.get(sign)!;
-    await nextTick();
-    await resetSchema(schemas);
+  // async function handleAdd(record, sign: string) {
+  //   if (!modalPropsMap.has(sign)) return;
+  //   if (!formPropsMap.has(sign)) return;
+  //   setModalProps(modalPropsMap.get(sign) as ModalProps);
+  //   const { schemas, submitFunc } = formPropsMap.get(sign)!;
+  //   await nextTick();
+  //   await resetSchema(schemas);
 
-    await nextTick();
+  //   await nextTick();
 
-    await resetFields();
+  //   await resetFields();
 
-    await nextTick();
+  //   await nextTick();
 
-    // 不要使用setFormProps因为它会错误的触发submit方法
-    // await setFormProps({ submitFunc });
-    submitResolver.value = (res) => submitFunc(Object.assign(res, record));
+  //   // 不要使用setFormProps因为它会错误的触发submit方法
+  //   // await setFormProps({ submitFunc });
+  //   submitResolver.value = (res) => submitFunc(Object.assign(res, record));
 
-    setModalProps({ loading: false });
-  }
+  //   setModalProps({ loading: false });
+  // }
 
   const deletionPropsMap = new Map<string, { api: (id: string) => Promise<void> }>([
     ['coal', { api: (id) => deleteCoalSeamAlarmRule({ id }) }],
@@ -228,7 +259,7 @@
   }
 
   const [registerModal, { setModalProps }] = useModal();
-  const [registerForm, { resetFields, setFieldsValue, validate, resetSchema }] = useForm({
+  const [registerForm, { setFieldsValue, validate, resetSchema }] = useForm({
     model: {},
     schemas: schemasCoalAlarm,
     showResetButton: false,
@@ -239,7 +270,11 @@
 
   function handleSubmit() {
     return validate().then((res) => {
-      submitResolver.value && submitResolver.value(res);
+      submitResolver.value &&
+        submitResolver.value(res).then(() => {
+          message.success('操作成功');
+          setModalProps({ visible: false });
+        });
     });
   }
 </script>