[Style 0000] 预警分析全系页面样式优化

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,7 +9,7 @@
           </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">
               <!-- 操作按钮 -->
@@ -27,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">
@@ -58,326 +58,327 @@
 </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,
-  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';
+  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 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' },
-  },
-});
+  // 激活的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: historyColumns,
-  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 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);
-  }
-};
-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,
     };
-  });
-};
-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;
   };
-  await resolveAlarm(params);
-  visibleresolveModal.value = false;
-}
-const handleCancelEdit = () => {
-  visibleresolveModal.value = false;
-};
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-  getEnfMineData();
-  getAlarmTotalData();
-});
+  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;
-}
-.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: 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>