[Style 0000] 业务页面样式全修正

src/components/Table/src/hooks/useTableScroll.ts

@@ -58,6 +58,7 @@ export function useTableScroll(
   let paginationEl: HTMLElement | null;
   let footerEl: HTMLElement | null;
   let bodyEl: HTMLElement | null;
+  let headEl: HTMLElement | null;
 
   async function calcTableHeight() {
     const { resizeHeightOffset = 2, pagination, maxHeight, minHeight } = unref(propsRef);
@@ -97,7 +98,7 @@ export function useTableScroll(
     await nextTick();
     //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
 
-    const headEl = tableEl.querySelector('.ant-table-thead');
+    headEl = tableEl.querySelector('.ant-table-thead');
 
     if (!headEl) return;
 

src/design/public.less

@@ -111,3 +111,37 @@
     bottom: -20px;
   }
 }
+
+.common-page-tabs {
+  padding: 0 12px 6px 12px;
+  margin: 16px;
+  border: 1px solid @border-color-base;
+}
+
+.action-btn {
+  cursor: pointer;
+  border: none;
+  // background: transparent;
+  padding: 4px;
+  margin-right: 10px;
+
+  &:hover {
+    color: @primary-color;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  .action-text {
+    color: lighten(@primary-color, 10%);
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+}

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

@@ -20,51 +20,63 @@ export const columns: BasicColumn[] = [
   {
     title: '序号',
     align: 'center',
+    width: 80,
     customRender: ({ index }: { index: number }) => `${index + 1}`,
   },
   {
     title: '区域',
     dataIndex: 'areaName',
+    width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    width: 200,
   },
   {
     title: '密闭名称',
     dataIndex: 'devicePos',
+    width: 100,
   },
   {
     title: '所属煤层',
     dataIndex: 'coalSeamName',
+    width: 100,
   },
   {
     title: '自燃倾向性',
     dataIndex: 'riskLevel',
+    width: 100,
   },
   {
     title: '密闭内压力',
     dataIndex: 'interPressure',
+    width: 100,
   },
   {
     title: '密闭外压力',
     dataIndex: 'outerPressure',
+    width: 100,
   },
   {
     title: '是否漏风',
     dataIndex: 'leakage',
+    width: 100,
   },
   {
     title: '风险分析',
     dataIndex: 'explosionHazard',
+    width: 100,
   },
   {
     title: '预警时间',
     dataIndex: 'createTime',
+    width: 100,
   },
   {
     title: '是否解决',
     dataIndex: 'isResolved',
+    width: 100,
   },
 ];
 
@@ -73,47 +85,58 @@ export const historyColumns: BasicColumn[] = [
   {
     title: '序号',
     align: 'center',
+    width: 80,
     customRender: ({ index }: { index: number }) => `${index + 1}`,
   },
   {
     title: '区域',
     dataIndex: 'areaName',
+    width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    width: 200,
   },
   {
     title: '密闭名称',
     dataIndex: 'devicePos',
+    width: 100,
   },
   {
     title: '所属煤层',
     dataIndex: 'coalSeamName',
+    width: 100,
   },
   {
     title: '自燃倾向性',
     dataIndex: 'riskLevel',
+    width: 100,
   },
   {
     title: '密闭内压力',
     dataIndex: 'interPressure',
+    width: 100,
   },
   {
     title: '密闭外压力',
     dataIndex: 'outerPressure',
+    width: 100,
   },
   {
     title: '是否漏风',
     dataIndex: 'leakage',
+    width: 100,
   },
   {
     title: '预警时间',
     dataIndex: 'createTime',
+    width: 100,
   },
   {
     title: '解决时间',
     dataIndex: 'endTime',
+    width: 100,
   },
 ];
 export const searchFormSchema: FormSchema[] = [
@@ -182,141 +205,3 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 6 },
   },
 ];
-
-export const minesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];
-
-export const historicalMinesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];

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

@@ -1,383 +1,348 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="monitoring-page">
-    <!-- 新增Tabs组件区分实时/历史数据 -->
-    <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">
-            <MiniBoard type="E" :label="item.label" :value="item.value" layout="label-top" />
-          </div>
+  <!-- 新增Tabs组件区分实时/历史数据 -->
+  <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
+    <TabPane tab="实时监测" key="realtime">
+      <div class="board-info">
+        <div :key="index" v-for="(item, index) in boardData" class="board-item">
+          <MiniBoard type="E" :label="item.label" :value="item.value" layout="label-top" />
         </div>
-        <!-- 实时数据表格 -->
-        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-          <template #action="{ record }">
-            <div class="action-buttons">
-              <!-- 操作按钮 -->
-              <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
-                <span class="action-text">详情</span>
-              </button>
-              <!-- 已解决按钮 -->
-              <button @click="openModal(record, 'resolved')" class="action-btn resolved-btn" title="已解决">
-                <span class="action-text">已解决</span>
-              </button>
-            </div>
-          </template>
-        </BasicTable>
-      </TabPane>
+      </div>
+      <!-- 实时数据表格 -->
+      <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <template #action="{ record }">
+          <!-- 操作按钮 -->
+          <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
+            <span class="action-text">详情</span>
+          </button>
+          <!-- 已解决按钮 -->
+          <button @click="openModal(record, 'resolved')" class="action-btn resolved-btn" title="已解决">
+            <span class="action-text">已解决</span>
+          </button>
+        </template>
+      </BasicTable>
+    </TabPane>
 
-      <TabPane tab="历史数据" key="history">
-        <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-          <template #action="{ record }">
-            <div class="action-buttons">
-              <button @click="openModal(record, 'history')" class="action-btn">
-                <SvgIcon name="details" />
-              </button>
-            </div>
-          </template>
-        </BasicTable>
-      </TabPane>
-    </Tabs>
-    <!-- 弹窗组件 -->
-    <a-modal style="top: 30%; left: 170px" v-model:visible="visibleModal" :width="450" title="实时监测数据">
-      <a-table></a-table>
-    </a-modal>
-    <!-- 弹窗组件 -->
-    <a-modal
-      style="height: 400px"
-      v-model:visible="visibleresolveModal"
-      :width="600"
-      centered
-      title="密闭漏风处理情况"
-      @ok="handleOkEdit"
-      @cancel="handleCancelEdit"
-    >
-      <a-textarea style="width: 90%; margin-left: 20px; margin-right: 20px" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
-    </a-modal>
-  </div>
+    <TabPane tab="历史数据" key="history">
+      <!-- 历史数据表格 -->
+      <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <template #action="{ record }">
+          <div class="action-buttons">
+            <button @click="openModal(record, 'history')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
+          </div>
+        </template>
+      </BasicTable>
+    </TabPane>
+  </Tabs>
+  <!-- 弹窗组件 -->
+  <a-modal style="top: 30%; left: 170px" v-model:visible="visibleModal" :width="450" title="实时监测数据">
+    <a-table></a-table>
+  </a-modal>
+  <!-- 弹窗组件 -->
+  <a-modal
+    style="height: 400px"
+    v-model:visible="visibleresolveModal"
+    :width="600"
+    centered
+    title="密闭漏风处理情况"
+    @ok="handleOkEdit"
+    @cancel="handleCancelEdit"
+  >
+    <a-textarea style="width: 90%; margin-left: 20px; margin-right: 20px" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
+  </a-modal>
 </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 } 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 },
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: true,
-  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 },
+        },
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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,
+    }));
+    // 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;
-  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;
-}
+  .board-info {
+    display: flex;
+    padding: 10px;
+    background-color: @white;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+    gap: 10px;
+    box-sizing: border-box;
+  }
+  .board-item {
+    flex: 1;
+    box-sizing: border-box;
+  }
+  :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;
+  }
 </style>

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

@@ -28,59 +28,73 @@ export const columns: BasicColumn[] = [
   {
     title: '序号',
     align: 'center',
+    width: 80,
     customRender: ({ index }: { index: number }) => `${index + 1}`,
   },
   {
     title: '区域',
+    width: 100,
     dataIndex: 'areaName',
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    width: 200,
   },
   {
     title: '密闭名称',
     dataIndex: 'devicePos',
+    width: 100,
   },
   {
     title: '所属煤层',
     dataIndex: 'coalSeamName',
+    width: 100,
   },
   {
     title: '自燃倾向性',
     dataIndex: 'riskLevel',
+    width: 100,
   },
   {
     title: 'CO浓度(ppm)',
     dataIndex: 'COVal',
+    width: 100,
   },
   {
     title: 'CO日增率',
     dataIndex: 'coIncreaseRate',
+    width: 100,
   },
   {
     title: 'O2浓度(ppm)',
     dataIndex: 'O2Val',
+    width: 100,
   },
   {
     title: '温度(℃)',
     dataIndex: 'temperature',
+    width: 100,
   },
   {
     title: '温差(℃)',
     dataIndex: 'temperatureDiff',
+    width: 100,
   },
   {
     title: '风险分析',
     dataIndex: 'riskAnalysis',
+    width: 100,
   },
   {
     title: '预警时间',
     dataIndex: 'alertTime',
+    width: 100,
   },
   {
     title: '是否解决',
     dataIndex: 'isResolved',
+    width: 100,
   },
 ];
 

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

@@ -55,283 +55,269 @@
 </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 = 100003;
-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: true,
-  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 = 100003;
+  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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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;
-  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;
-}
+  .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: @white;
+    padding: 10px;
+    gap: 100px;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
 </style>

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

@@ -28,68 +28,83 @@ export const columns: BasicColumn[] = [
   {
     title: '序号',
     align: 'center',
+    width: 80,
     customRender: ({ index }: { index: number }) => `${index + 1}`,
   },
   {
     title: '区域',
     dataIndex: 'areaName',
+    width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    width: 200,
   },
   {
     title: '密闭名称',
     dataIndex: 'devicePos',
+    width: 100,
   },
   {
     title: '所属煤层',
     dataIndex: 'coalSeamName',
+    width: 100,
   },
   {
     title: '自燃倾向性',
     dataIndex: 'riskLevel',
+    width: 100,
   },
   {
     title: '空气温度(℃)',
     dataIndex: 'temperature',
+    width: 100,
   },
   {
     title: 'O2浓度(ppm)',
     dataIndex: 'O2Val',
+    width: 100,
   },
   {
     title: 'C2H4浓度(ppm)',
     dataIndex: 'C2H4Val',
+    width: 100,
   },
   {
     title: 'C2H2浓度(ppm)',
     dataIndex: 'C2H2Val',
+    width: 100,
   },
   {
     title: 'CO浓度(ppm)',
     dataIndex: 'COVal',
+    width: 100,
   },
   {
     title: '出水温度(℃)',
     dataIndex: 'temperature',
+    width: 100,
   },
-
   {
     title: '监测时长(天)',
     dataIndex: 'daysMonitored',
+    width: 100,
   },
   {
     title: '风险分析',
     dataIndex: 'riskAnalysis',
+    width: 100,
   },
   {
     title: '预警时间',
     dataIndex: 'alertTime',
+    width: 100,
   },
   {
     title: '是否解决',
     dataIndex: 'isResolved',
+    width: 100,
   },
 ];
 

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

@@ -1,326 +1,311 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="monitoring-page">
-    <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="line" style="margin-bottom: 16px">
-      <TabPane tab="实时监测" key="realtime">
-        <div class="board-info">
-          <MiniBoard
-            :key="index"
-            v-for="(item, index) in boardData"
-            type="A"
-            :label="item.label"
-            :value="item.value"
-            layout="label-top"
-            class="board-item"
-          />
-        </div>
-        <!-- 实时数据表格 -->
-        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-          <template #action="{ record }">
-            <div class="action-buttons">
-              <!-- 操作按钮 -->
-              <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
-                <span class="action-text">详情</span>
-              </button>
-            </div>
-          </template>
-        </BasicTable>
-      </TabPane>
+  <!-- 新增Tabs组件区分实时/历史数据 -->
+  <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
+    <TabPane tab="实时监测" key="realtime">
+      <div class="board-info">
+        <MiniBoard
+          :key="index"
+          v-for="(item, index) in boardData"
+          type="A"
+          :label="item.label"
+          :value="item.value"
+          layout="label-top"
+          class="board-item"
+        />
+      </div>
+      <!-- 实时数据表格 -->
+      <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <template #action="{ record }">
+          <div class="action-buttons">
+            <!-- 操作按钮 -->
+            <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
+              <span class="action-text">详情</span>
+            </button>
+          </div>
+        </template>
+      </BasicTable>
+    </TabPane>
 
-      <TabPane tab="历史数据" key="history">
-        <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-          <template #action="{ record }">
-            <div class="action-buttons">
-              <button @click="openModal(record, 'history')" class="action-btn">
-                <SvgIcon name="details" />
-              </button>
-            </div>
-          </template>
-        </BasicTable>
-      </TabPane>
-    </Tabs>
-    <!-- 弹窗组件 -->
-    <a-modal
-      style="top: 30%; left: 170px"
-      v-model:visible="visibleModal"
-      :width="450"
-      title="实时监测数据"
-      @ok="handleOkEdit"
-      @cancel="handleCancelEdit"
-    >
-      <a-table></a-table>
-    </a-modal>
-  </div>
+    <TabPane tab="历史数据" key="history">
+      <!-- 历史数据表格 -->
+      <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <template #action="{ record }">
+          <div class="action-buttons">
+            <button @click="openModal(record, 'history')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
+          </div>
+        </template>
+      </BasicTable>
+    </TabPane>
+  </Tabs>
+  <!-- 弹窗组件 -->
+  <a-modal
+    style="top: 30%; left: 170px"
+    v-model:visible="visibleModal"
+    :width="450"
+    title="实时监测数据"
+    @ok="handleOkEdit"
+    @cancel="handleCancelEdit"
+  >
+    <a-table></a-table>
+  </a-modal>
 </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: true,
-  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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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: true,
-  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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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;
-  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;
-}
+  .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: @white;
+    padding: 10px;
+    gap: 100px;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
 </style>

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

@@ -1,337 +1,322 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="monitoring-page">
-    <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="line" style="margin-bottom: 16px">
-      <TabPane tab="实时监测" key="realtime">
-        <div class="board-info">
-          <MiniBoard
-            :key="index"
-            v-for="(item, index) in boardData"
-            type="A"
-            :label="item.label"
-            :value="item.value"
-            layout="label-top"
-            class="board-item"
-          />
-        </div>
-        <!-- 实时数据表格 -->
-        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-          <template #action="{ record }">
-            <div class="action-buttons">
-              <!-- 操作按钮 -->
-              <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
-                <span class="action-text">详情</span>
-              </button>
-            </div>
-          </template>
-        </BasicTable>
-      </TabPane>
+  <!-- 新增Tabs组件区分实时/历史数据 -->
+  <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
+    <TabPane tab="实时监测" key="realtime">
+      <div class="board-info">
+        <MiniBoard
+          :key="index"
+          v-for="(item, index) in boardData"
+          type="A"
+          :label="item.label"
+          :value="item.value"
+          layout="label-top"
+          class="board-item"
+        />
+      </div>
+      <!-- 实时数据表格 -->
+      <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <template #action="{ record }">
+          <div class="action-buttons">
+            <!-- 操作按钮 -->
+            <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
+              <span class="action-text">详情</span>
+            </button>
+          </div>
+        </template>
+      </BasicTable>
+    </TabPane>
 
-      <TabPane tab="历史数据" key="history">
-        <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-          <template #action="{ record }">
-            <div class="action-buttons">
-              <button @click="openModal(record, 'history')" class="action-btn">
-                <SvgIcon name="details" />
-              </button>
-            </div>
-          </template>
-        </BasicTable>
-      </TabPane>
-    </Tabs>
-    <!-- 弹窗组件 -->
-    <a-modal
-      style="top: 30%; left: 170px"
-      v-model:visible="visibleModal"
-      :width="450"
-      title="实时监测数据"
-      @ok="handleOkEdit"
-      @cancel="handleCancelEdit"
-    >
-      <a-table></a-table>
-    </a-modal>
-  </div>
+    <TabPane tab="历史数据" key="history">
+      <!-- 历史数据表格 -->
+      <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <template #action="{ record }">
+          <div class="action-buttons">
+            <button @click="openModal(record, 'history')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
+          </div>
+        </template>
+      </BasicTable>
+    </TabPane>
+  </Tabs>
+  <!-- 弹窗组件 -->
+  <a-modal
+    style="top: 30%; left: 170px"
+    v-model:visible="visibleModal"
+    :width="450"
+    title="实时监测数据"
+    @ok="handleOkEdit"
+    @cancel="handleCancelEdit"
+  >
+    <a-table></a-table>
+  </a-modal>
 </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: true,
-  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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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: true,
-  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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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;
-  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;
-}
+  .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: @white;
+    padding: 10px;
+    gap: 100px;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
 </style>

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

@@ -28,59 +28,73 @@ export const columns: BasicColumn[] = [
   {
     title: '序号',
     align: 'center',
+    width: 80,
     customRender: ({ index }: { index: number }) => `${index + 1}`,
   },
   {
     title: '区域',
     dataIndex: 'areaName',
+    width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    width: 200,
   },
   {
     title: '密闭名称',
     dataIndex: 'devicePos',
+    width: 100,
   },
   {
     title: '所属煤层',
     dataIndex: 'coalSeamName',
+    width: 100,
   },
   {
     title: '自燃倾向性',
     dataIndex: 'riskLevel',
+    width: 100,
   },
   {
     title: 'CO浓度(ppm)',
     dataIndex: 'COVal',
+    width: 100,
   },
   {
     title: 'CO日增率',
     dataIndex: 'coIncreaseRate',
+    width: 100,
   },
   {
     title: 'O2浓度(ppm)',
     dataIndex: 'O2Val',
+    width: 100,
   },
   {
     title: '温度(℃)',
     dataIndex: 'temperature',
+    width: 100,
   },
   {
     title: '温差(℃)',
     dataIndex: 'temperatureDiff',
+    width: 100,
   },
   {
     title: '风险分析',
     dataIndex: 'alarmName',
+    width: 100,
   },
   {
     title: '预警时间',
     dataIndex: 'alertTime',
+    width: 100,
   },
   {
     title: '是否解决',
     dataIndex: 'isResolved',
+    width: 100,
   },
 ];
 

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

@@ -1,367 +1,344 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="monitoring-page">
-    <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="line" style="margin-bottom: 16px">
-      <TabPane tab="实时监测" key="realtime">
-        <div class="board-info">
-          <MiniBoard
-            :key="index"
-            v-for="(item, index) in boardData"
-            type="A"
-            :label="item.label"
-            :value="item.value"
-            layout="label-top"
-            class="board-item"
-          />
-        </div>
-        <!-- 实时数据表格 -->
-        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-          <template #action="{ record }">
-            <div class="action-buttons">
-              <!-- 操作按钮 -->
-              <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
-                <span class="action-text">详情</span>
-              </button>
-              <!-- 已解决按钮 -->
-              <button @click="openModal(record, 'resolved')" class="action-btn resolved-btn" title="已解决">
-                <span class="action-text">已解决</span>
-              </button>
-            </div>
-          </template>
-        </BasicTable>
-      </TabPane>
+  <!-- 新增Tabs组件区分实时/历史数据 -->
+  <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
+    <TabPane tab="实时监测" key="realtime">
+      <div class="board-info">
+        <MiniBoard
+          :key="index"
+          v-for="(item, index) in boardData"
+          type="A"
+          :label="item.label"
+          :value="item.value"
+          layout="label-top"
+          class="board-item"
+        />
+      </div>
+      <!-- 实时数据表格 -->
+      <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <template #action="{ record }">
+          <div class="action-buttons">
+            <!-- 操作按钮 -->
+            <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
+              <span class="action-text">详情</span>
+            </button>
+            <!-- 已解决按钮 -->
+            <button @click="openModal(record, 'resolved')" class="action-btn resolved-btn" title="已解决">
+              <span class="action-text">已解决</span>
+            </button>
+          </div>
+        </template>
+      </BasicTable>
+    </TabPane>
 
-      <TabPane tab="历史数据" key="history">
-        <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-          <template #action="{ record }">
-            <div class="action-buttons">
-              <button @click="openModal(record, 'history')" class="action-btn">
-                <SvgIcon name="details" />
-              </button>
-            </div>
-          </template>
-        </BasicTable>
-      </TabPane>
-    </Tabs>
-    <!-- 弹窗组件 -->
-    <a-modal
-      style="top: 30%; left: 170px"
-      v-model:visible="visibleModal"
-      :width="450"
-      title="实时监测数据"
-      @ok="handleOkEdit"
-      @cancel="handleCancelEdit"
-    >
-      <a-table></a-table>
-    </a-modal>
-    <!-- 弹窗组件 -->
-    <a-modal
-      style="height: 400px"
-      v-model:visible="visibleresolveModal"
-      :width="600"
-      centered
-      title="密闭漏风处理情况"
-      @ok="handleOkEdit()"
-      @cancel="handleCancelEdit"
-    >
-      <a-textarea style="width: 90%; margin-left: 20px; margin-right: 20px" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
-    </a-modal>
-  </div>
+    <TabPane tab="历史数据" key="history">
+      <!-- 历史数据表格 -->
+      <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <template #action="{ record }">
+          <div class="action-buttons">
+            <button @click="openModal(record, 'history')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
+          </div>
+        </template>
+      </BasicTable>
+    </TabPane>
+  </Tabs>
+  <!-- 弹窗组件 -->
+  <a-modal
+    style="top: 30%; left: 170px"
+    v-model:visible="visibleModal"
+    :width="450"
+    title="实时监测数据"
+    @ok="handleOkEdit"
+    @cancel="handleCancelEdit"
+  >
+    <a-table></a-table>
+  </a-modal>
+  <!-- 弹窗组件 -->
+  <a-modal
+    style="height: 400px"
+    v-model:visible="visibleresolveModal"
+    :width="600"
+    centered
+    title="密闭漏风处理情况"
+    @ok="handleOkEdit()"
+    @cancel="handleCancelEdit"
+  >
+    <a-textarea style="width: 90%; margin-left: 20px; margin-right: 20px" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
+  </a-modal>
 </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: true,
-  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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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: true,
-  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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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;
-  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;
-}
+  .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: @white;
+    padding: 10px;
+    gap: 100px;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
 </style>

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

@@ -28,51 +28,63 @@ export const columns: BasicColumn[] = [
   {
     title: '序号',
     align: 'center',
+    width: 80,
     customRender: ({ index }: { index: number }) => `${index + 1}`,
   },
   {
     title: '区域',
     dataIndex: 'areaName',
+    width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    width: 200,
   },
   {
     title: '密闭名称',
     dataIndex: 'devicePos',
+    width: 100,
   },
   {
     title: '所属煤层',
     dataIndex: 'coalSeamName',
+    width: 100,
   },
   {
     title: '自燃倾向性',
     dataIndex: 'riskLevel',
+    width: 100,
   },
   {
     title: '密闭内压力',
     dataIndex: 'interPressure',
+    width: 100,
   },
   {
     title: '密闭外压力',
     dataIndex: 'outerPressure',
+    width: 100,
   },
   {
     title: '是否漏风',
     dataIndex: 'leakage',
+    width: 100,
   },
   {
     title: '风险分析',
     dataIndex: 'explosionHazard',
+    width: 100,
   },
   {
     title: '预警时间',
     dataIndex: 'alertTime',
+    width: 100,
   },
   {
     title: '是否解决',
     dataIndex: 'isResolved',
+    width: 100,
   },
 ];
 

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

@@ -1,339 +1,324 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="monitoring-page">
-    <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="line" style="margin-bottom: 16px">
-      <TabPane tab="实时监测" key="realtime">
-        <div class="board-info">
-          <MiniBoard
-            :key="index"
-            v-for="(item, index) in boardData"
-            type="A"
-            :label="item.label"
-            :value="item.value"
-            layout="label-top"
-            class="board-item"
-          />
-        </div>
-        <!-- 实时数据表格 -->
-        <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="操作">
-              <span class="action-text">详情</span>
-            </button>
-          </template>
-          <template #empty>
-            <!-- 无数据时显示-，样式居中对齐 -->
-            <span class="empty-placeholder">-</span>
-          </template>
-        </BasicTable>
-      </TabPane>
+  <!-- 新增Tabs组件区分实时/历史数据 -->
+  <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
+    <TabPane tab="实时监测" key="realtime">
+      <div class="board-info">
+        <MiniBoard
+          :key="index"
+          v-for="(item, index) in boardData"
+          type="A"
+          :label="item.label"
+          :value="item.value"
+          layout="label-top"
+          class="board-item"
+        />
+      </div>
+      <!-- 实时数据表格 -->
+      <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="操作">
+            <span class="action-text">详情</span>
+          </button>
+        </template>
+        <template #empty>
+          <!-- 无数据时显示-，样式居中对齐 -->
+          <span class="empty-placeholder">-</span>
+        </template>
+      </BasicTable>
+    </TabPane>
 
-      <TabPane tab="历史数据" key="history">
-        <!-- 历史数据表格 -->
-        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-          <template #action="{ record }">
-            <div class="action-buttons">
-              <button @click="openModal(record, 'history')" class="action-btn">
-                <SvgIcon name="details" />
-              </button>
-            </div>
-          </template>
-        </BasicTable>
-      </TabPane>
-    </Tabs>
-    <!-- 弹窗组件 -->
-    <a-modal
-      style="top: 30%; left: 170px"
-      v-model:visible="visibleModal"
-      :width="450"
-      title="实时监测数据"
-      @ok="handleOkEdit"
-      @cancel="handleCancelEdit"
-    >
-      <a-table></a-table>
-    </a-modal>
-  </div>
+    <TabPane tab="历史数据" key="history">
+      <!-- 历史数据表格 -->
+      <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
+        <template #action="{ record }">
+          <div class="action-buttons">
+            <button @click="openModal(record, 'history')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
+          </div>
+        </template>
+      </BasicTable>
+    </TabPane>
+  </Tabs>
+  <!-- 弹窗组件 -->
+  <a-modal
+    style="top: 30%; left: 170px"
+    v-model:visible="visibleModal"
+    :width="450"
+    title="实时监测数据"
+    @ok="handleOkEdit"
+    @cancel="handleCancelEdit"
+  >
+    <a-table></a-table>
+  </a-modal>
 </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: true,
-  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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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: true,
-  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: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: 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 result = await getProvinceAlarm(params);
-  minesData.value = result.records;
-}
-const getMineDataList = async () => {
-  const params = {
-    pageNo: 1,
-    pageSize: 50,
+  const handleOkEdit = () => {
+    visibleModal.value = false;
   };
-  const response = await getMineData(params);
-  deviceOptions.value = response.records.map((item, index) => {
-    return {
-      label: item['mineName'],
-      value: item['mineCode'],
+  const handleCancelEdit = () => {
+    visibleModal.value = false;
+  };
+  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;
-  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;
-}
+  .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: @white;
+    padding: 10px;
+    gap: 100px;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
 </style>

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

@@ -28,63 +28,78 @@ export const columns: BasicColumn[] = [
   {
     title: '序号',
     align: 'center',
+    width: 80,
     customRender: ({ index }: { index: number }) => `${index + 1}`,
   },
   {
     title: '区域',
     dataIndex: 'areaName',
+    width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    width: 200,
   },
   {
     title: '密闭名称',
     dataIndex: 'devicePos',
+    width: 100,
   },
   {
     title: '所属煤层',
     dataIndex: 'coalSeamName',
+    width: 100,
   },
   {
     title: '自燃倾向性',
     dataIndex: 'riskLevel',
+    width: 100,
   },
   {
     title: 'CO(ppm)',
     dataIndex: 'COVal',
+    width: 100,
   },
   {
     title: 'CH4(%)',
     dataIndex: 'CH4Val',
+    width: 100,
   },
   {
     title: 'C2H4(ppm)',
     dataIndex: 'C2H4Val',
+    width: 100,
   },
   {
     title: 'C2H2(ppm)',
     dataIndex: 'C2H2Val',
+    width: 100,
   },
   {
     title: 'O2(%)',
     dataIndex: 'O2Val',
+    width: 100,
   },
   {
     title: '爆炸危险性',
     dataIndex: 'explosionHazard',
+    width: 100,
   },
   {
     title: '处置意见',
     dataIndex: 'suggestion',
+    width: 100,
   },
   {
     title: '预警时间',
     dataIndex: 'alertTime',
+    width: 100,
   },
   {
     title: '是否解决',
     dataIndex: 'isResolved',
+    width: 100,
   },
 ];
 

src/views/dashboard/basicInfo/accessStatistics/index.vue

@@ -1,89 +1,88 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="p-4">
-    <BasicTable 
-      @register="registerTable" 
-      :scroll="{ x: 'max-content' }" 
-    />
+    <BasicTable @register="registerTable" />
   </div>
 </template>
 <script setup lang="ts">
-import { BasicTable, useTable } from '/@/components/Table';
-import { accessStatisticsColumns } from './access.data';
-import { getGoafAccessCount } from '../basicInfo.api';
-import type { BasicColumn } from '/@/components/Table/src/types/table';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { accessStatisticsColumns } from './access.data';
+  import { getGoafAccessCount } from '../basicInfo.api';
+  import type { BasicColumn } from '/@/components/Table/src/types/table';
 
-// 封装接口调用，获取数据后手动添加「总计」行
-const fetchTableData = async (params: any) => {
-  // 1. 调用原始接口，获取数据
-  const originalRecords = await getGoafAccessCount(params);
-  if (originalRecords.length === 0) return originalRecords; // 无数据时直接返回
+  // 封装接口调用，获取数据后手动添加「总计」行
+  const fetchTableData = async (params: any) => {
+    // 1. 调用原始接口，获取数据
+    const originalRecords = await getGoafAccessCount(params);
+    if (originalRecords.length === 0) return originalRecords; // 无数据时直接返回
 
-  // 2. 定义需要求和的数值列字段
-  const numberFields = ['mineNum', 'yjNum', 'wxjrNum', 'jrNum', 'wjNum', 'zxNum', 'lxNum'];
+    // 2. 定义需要求和的数值列字段
+    const numberFields = ['mineNum', 'yjNum', 'wxjrNum', 'jrNum', 'wjNum', 'zxNum', 'lxNum'];
 
-  // 3. 构建「总计」行对象
-  const totalRow = {
-    name: '总计',
-    isTotal: true, // 合计行标识
-  };
+    // 3. 构建「总计」行对象
+    const totalRow = {
+      name: '总计',
+      isTotal: true, // 合计行标识
+    };
 
-  // 4. 遍历数值列，计算每列的总和
-  numberFields.forEach(field => {
-    totalRow[field] = originalRecords.reduce((sum: number, item: any) => {
-      const currentValue = Number(item[field]) || 0;
-      return sum + currentValue;
-    }, 0);
-  });
+    // 4. 遍历数值列，计算每列的总和
+    numberFields.forEach((field) => {
+      totalRow[field] = originalRecords.reduce((sum: number, item: any) => {
+        const currentValue = Number(item[field]) || 0;
+        return sum + currentValue;
+      }, 0);
+    });
 
-  // 5. 把「总计」行拼接到原始数据的最前面
-  const newRecords = [totalRow, ...originalRecords];
+    // 5. 把「总计」行拼接到原始数据的最前面
+    const newRecords = [totalRow, ...originalRecords];
 
-  // 6. 返回表格
-  return {
-    ...originalRecords,
-    records: newRecords,
-    total: newRecords.length,
+    // 6. 返回表格
+    return {
+      ...originalRecords,
+      records: newRecords,
+      total: newRecords.length,
+    };
   };
-};
 
-// 手动添加自定义序号列
-const customIndexColumn: BasicColumn = {
-  title: '序号',
-  dataIndex: 'index',
-  width: 40,
-  align: 'center',
-  // 自定义序号渲染：判断是否为合计行，合计行返回空字符串（无序号）
-  customRender: ({ record, index }) => {
-    // 若是合计行（带有isTotal标识），返回空，不显示序号
-    if (record.isTotal) return '';
-    // 普通数据行：序号从1开始（排除合计行，序号连续）
-    return index; // 因合计行在第0位，普通数据从索引1开始，直接返回index即为正确序号
-  },
-};
+  // 手动添加自定义序号列
+  const customIndexColumn: BasicColumn = {
+    title: '序号',
+    dataIndex: 'index',
+    width: 40,
+    align: 'center',
+    // 自定义序号渲染：判断是否为合计行，合计行返回空字符串（无序号）
+    customRender: ({ record, index }) => {
+      // 若是合计行（带有isTotal标识），返回空，不显示序号
+      if (record.isTotal) return '';
+      // 普通数据行：序号从1开始（排除合计行，序号连续）
+      return index; // 因合计行在第0位，普通数据从索引1开始，直接返回index即为正确序号
+    },
+  };
 
-// 拼接最终列配置（序号列 + 原有业务列）
-const finalTableColumns = [customIndexColumn, ...accessStatisticsColumns];
+  // 拼接最终列配置（序号列 + 原有业务列）
+  const finalTableColumns = [customIndexColumn, ...accessStatisticsColumns];
 
-const [registerTable] = useTable({
+  const [registerTable] = useTable({
     title: '矿山信息表格',
     api: fetchTableData, // 数据统计接口
-    columns:finalTableColumns,
+    columns: finalTableColumns,
     pagination: false,
     useSearchForm: false,
     bordered: true,
     showIndexColumn: false,
+    scroll: { x: 'max-content' },
   });
 </script>
-<style scoped>
+<style lang="less" scoped>
   :deep(.ant-table-thead th:nth-child(1)) {
     vertical-align: bottom;
     padding-bottom: 0 !important;
     border-bottom: none;
   }
-  :deep(.ant-table-tbody .ant-table-row:nth-child(2)){
-    background-color: #c5daf7 !important;
+  :deep(.ant-table-tbody .ant-table-row:nth-child(2)) {
+    background-color: @table-thead-bg-color !important;
     td {
-      background-color: #c5daf7 !important;
+      background-color: @table-thead-bg-color !important;
     }
   }
-</style>
+</style>

src/views/dashboard/basicInfo/closedStatistics/closed.data.ts

@@ -7,91 +7,108 @@ export const dataColumns: BasicColumn[] = [
     title: '区域',
     dataIndex: 'name',
     align: 'center',
-  //   width: 80,
+    width: 100,
   },
   {
     title: '密闭总数',
     dataIndex: 'mbStatusNum',
     align: 'center',
+    width: 100,
   },
   {
     title: '正常生产',
     dataIndex: 'mbStatusNum0',
     align: 'center',
+    width: 100,
   },
   {
     title: '拟建矿井',
     dataIndex: 'mbStatusNum1',
     align: 'center',
+    width: 100,
   },
   {
     title: '正常建设',
     dataIndex: 'mbStatusNum2',
     align: 'center',
+    width: 100,
   },
   {
     title: '自行停产',
     dataIndex: 'mbStatusNum3',
     align: 'center',
+    width: 100,
   },
   {
     title: '正在关闭',
     dataIndex: 'mbStatusNum4',
     align: 'center',
+    width: 100,
   },
   {
     title: '责令停产',
     dataIndex: 'mbStatusNum5',
     align: 'center',
+    width: 100,
   },
   {
     title: '责令停止',
     dataIndex: 'mbStatusNum6',
     align: 'center',
+    width: 100,
   },
   {
     title: '已关闭',
     dataIndex: 'mbStatusNum7',
     align: 'center',
+    width: 100,
   },
   {
     title: '长期停产',
     dataIndex: 'mbStatusNum8',
     align: 'center',
+    width: 100,
   },
   {
     title: '长期停建',
     dataIndex: 'mbStatusNum9',
     align: 'center',
+    width: 100,
   },
   {
     title: '停产整改',
     dataIndex: 'mbStatusNum10',
     align: 'center',
+    width: 100,
   },
   {
     title: '长期停建(失联)',
     dataIndex: 'mbStatusNum11',
     align: 'center',
+    width: 100,
   },
   {
     title: '停建整改',
     dataIndex: 'mbStatusNum12',
     align: 'center',
+    width: 100,
   },
   {
     title: '自行停建',
     dataIndex: 'mbStatusNum13',
     align: 'center',
+    width: 100,
   },
   {
     title: '正在关闭',
     dataIndex: 'mbStatusNum14',
     align: 'center',
+    width: 100,
   },
   {
     title: '其他',
     dataIndex: 'mbStatusNumQt',
     align: 'center',
+    width: 100,
   },
 ];

src/views/dashboard/basicInfo/dataQuality/index.vue

@@ -1,22 +1,16 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <!-- Tab标签页 -->
-  <Tabs v-model:activeKey="activeKey" class="data-quality-page" type="line">
+  <Tabs v-model:activeKey="activeKey" class="common-page-tabs" type="line">
     <TabPane key="unresolved" tab="未解决">
       <div class="add-button">
-        <a-button 
-          type="default" 
-          preIcon="mdi:download" 
-          @click="handleExportExcel" 
-          style="margin-right: 8px;"
-        > 
-          导出 
-        </a-button>
+        <a-button type="default" preIcon="mdi:download" @click="handleExportExcel" style="margin-right: 8px"> 导出 </a-button>
         <a-button type="primary" preIcon="mdi:page-next-outline" @click="handleOpenModal({}, 'add')"> 新增问题 </a-button>
       </div>
       <BasicTable style="padding: 0" @register="registerUnresolvedTable">
         <template #queJson="{ record }">
-          <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
-            <span style="flex: 1; text-align: center;">
+          <div style="display: flex; align-items: center; gap: 8px; width: 100%">
+            <span style="flex: 1; text-align: center">
               {{ record?.queJson ? formatQueJson(record.queJson) : '' }}
             </span>
             <!-- 按钮：无需额外样式，自然靠最右侧 -->
@@ -64,19 +58,12 @@
     </TabPane>
     <TabPane key="resolved" tab="已解决">
       <div class="add-button">
-        <a-button 
-          type="default" 
-          preIcon="mdi:download" 
-          @click="handleExportExcel" 
-          style="margin-right: 8px;"
-        > 
-          导出 
-        </a-button>
+        <a-button type="default" preIcon="mdi:download" @click="handleExportExcel" style="margin-right: 8px"> 导出 </a-button>
       </div>
       <BasicTable style="padding: 0" @register="registerResolvedTable">
         <template #queJson="{ record }">
-          <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
-            <span style="flex: 1; text-align: center;">
+          <div style="display: flex; align-items: center; gap: 8px; width: 100%">
+            <span style="flex: 1; text-align: center">
               {{ record?.queJson ? formatQueJson(record.queJson) : '' }}
             </span>
             <!-- 按钮：无需额外样式，自然靠最右侧 -->
@@ -110,7 +97,7 @@
   import { getDataQuaQueList, addDataQuaQue, deleteDataQuaQue, editDataQuaQue } from '../basicInfo.api';
   import { findNode, findPath, listToTree } from '/@/utils/helper/treeHelper';
   import { useMineStore } from '/@/store/modules/mine';
-  import dayjs from 'dayjs'; 
+  import dayjs from 'dayjs';
   import * as XLSX from 'xlsx';
   // 路由实例
   const router = useRouter();
@@ -120,7 +107,7 @@
   const activeKey = ref('unresolved'); // 激活的Tab键
   const pageMode = ref('add');
   // 未解决表格注册
-  const [registerUnresolvedTable, { reload: reloadUnresolved}] = useTable({
+  const [registerUnresolvedTable, { reload: reloadUnresolved }] = useTable({
     api: getQuaQueListByTab(),
     columns,
     formConfig: {
@@ -131,12 +118,11 @@
     },
     useSearchForm: true,
     pagination: true,
-    striped: true,
     showIndexColumn: false,
     indexColumnProps: {
       title: '序号',
     },
-    canResize: false,
+    // canResize: false,
     actionColumn: {
       width: 200,
       title: '操作',
@@ -177,7 +163,7 @@
   const [registerModal, { openModal }] = useModal();
 
   // 解析queJson并拼接orderNum+queCon的辅助函数
-  function formatQueJson (queJsonStr: string) {
+  function formatQueJson(queJsonStr: string) {
     // 空值处理
     if (!queJsonStr) return '无质量问题';
     try {
@@ -190,7 +176,7 @@
       console.error('解析质量问题JSON失败:', error);
       return '问题数据解析失败';
     }
-  };
+  }
 
   /**
    * 根据标签获取表格数据（已解决/未解决）
@@ -220,7 +206,7 @@
    * @param result 弹框数据
    */
   async function handleModalSuccess(result: any) {
-    try{
+    try {
       if (pageMode.value === 'add') {
         console.log(result);
         await addDataQuaQue(result);
@@ -231,44 +217,39 @@
       await nextTick();
       reloadUnresolved();
       reloadResolved();
-    } catch(error) {
+    } catch (error) {
       console.log('操作失败：', error);
     }
   }
   /**
- * 通用页面跳转方法
- * @param record 当前行数据
- * @param path 目标路径（树形结构所在页面的路由地址）
- */
-async function handleGoToPage(record: any) {
-  try {
-    const mineCode = record.mineCode;
-    const targetNode = findNode(
-      mineStore.getMineTree,
-      (item) => item.id === mineCode,
-      { id: 'id', pid: 'parentId', children: 'childDepart' }
-    );
-
-    let minePath = '';
-    if (targetNode) {
-      minePath = targetNode.parentId; // 取parentId作为minePath
-      console.log('minePath（当前节点的parentId）:', minePath);
-    } else {
-      message.warning(`未找到矿码【${mineCode}】对应的矿井节点`);
-      return;
-    }
+   * 通用页面跳转方法
+   * @param record 当前行数据
+   * @param path 目标路径（树形结构所在页面的路由地址）
+   */
+  async function handleGoToPage(record: any) {
+    try {
+      const mineCode = record.mineCode;
+      const targetNode = findNode(mineStore.getMineTree, (item) => item.id === mineCode, { id: 'id', pid: 'parentId', children: 'childDepart' });
 
-    // 跳转页面（可携带拼接后的矿名/路径等参数）
-    router.push({
-      path: `/sealed/${minePath}`,
-      query: {},
-    });
+      let minePath = '';
+      if (targetNode) {
+        minePath = targetNode.parentId; // 取parentId作为minePath
+        console.log('minePath（当前节点的parentId）:', minePath);
+      } else {
+        message.warning(`未找到矿码【${mineCode}】对应的矿井节点`);
+        return;
+      }
 
-  } catch (error) {
-    console.error('矿节点定位失败:', error);
-    message.error('矿节点定位失败，请稍后重试');
+      // 跳转页面（可携带拼接后的矿名/路径等参数）
+      router.push({
+        path: `/sealed/${minePath}`,
+        query: {},
+      });
+    } catch (error) {
+      console.error('矿节点定位失败:', error);
+      message.error('矿节点定位失败，请稍后重试');
+    }
   }
-}
 
   /**
    * 气泡取消按钮通用回调
@@ -306,21 +287,21 @@ async function handleGoToPage(record: any) {
   async function handleOKRecord(record: any) {
     const copyRecord = {
       ...record,
-      isOk : true,
-      updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
+      isOk: true,
+      updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
     };
-    copyRecord.isOk = true
+    copyRecord.isOk = true;
     try {
       await editDataQuaQue(copyRecord);
       await nextTick();
       reloadUnresolved();
       reloadResolved();
-    }catch (error) {
+    } catch (error) {
       console.error('操作失败：', error);
     }
   }
 
-    /**
+  /**
    * 获取全部未解决数据（不分页）
    */
   async function getAllUnresolvedData() {
@@ -350,14 +331,14 @@ async function handleGoToPage(record: any) {
    * 格式化导出数据（统一字段名 + 状态文本）
    */
   function formatExportData(dataList: any[]) {
-    return dataList.map(item => ({
-      '煤矿名称': item.mineName || '',
-      '煤矿简称': item.mineNameAbbr || '',
-      '生产状态': productionStatusMap[item.mineProStatus]?.label || '未知状态',
-      '在线状态': item.mineLinkStatus === 1 ? '在线' : (item.mineLinkStatus === 0 ? '离线' : '/'),
-      '质量问题详情': formatQueJson(item.queJson),
-      '当前状态': item.isOk ? '已解决' : '未解决',
-      '处理时间': item.updateTime || ''
+    return dataList.map((item) => ({
+      煤矿名称: item.mineName || '',
+      煤矿简称: item.mineNameAbbr || '',
+      生产状态: productionStatusMap[item.mineProStatus]?.label || '未知状态',
+      在线状态: item.mineLinkStatus === 1 ? '在线' : item.mineLinkStatus === 0 ? '离线' : '/',
+      质量问题详情: formatQueJson(item.queJson),
+      当前状态: item.isOk ? '已解决' : '未解决',
+      处理时间: item.updateTime || '',
     }));
   }
 
@@ -370,7 +351,7 @@ async function handleGoToPage(record: any) {
     try {
       // 初始化loading并获取关闭函数
       hideLoading = message.loading('正在导出数据，请稍候...');
-      
+
       const unresolvedList = await getAllUnresolvedData();
       const resolvedList = await getAllResolvedData();
 
@@ -402,18 +383,18 @@ async function handleGoToPage(record: any) {
 </script>
 
 <style scoped lang="less">
-  .data-quality-page {
-    padding: 0 12px;
-    margin: 16px;
-    border: 1px solid @border-color-base;
-    .ant-form {
-      background-color: #fff;
-    }
-  }
+  // .data-quality-page {
+  //   padding: 0 12px;
+  //   margin: 16px;
+  //   border: 1px solid @border-color-base;
+  //   .ant-form {
+  //     background-color: #fff;
+  //   }
+  // }
   .form-part {
     padding: 12px 10px 6px 10px;
     margin-bottom: 8px;
-    background-color: #ffffff;
+    background-color: @white;
     border-radius: 2px;
   }
   .add-button {

src/views/dashboard/basicInfo/minesInfo/index.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
+  <BasicTable @register="registerTable">
     <template #action="{ record }">
       <button @click="handleGoToPage(record, `/sealed/${record.areaId}`)" class="action-btn">
         <SvgIcon name="data" />
@@ -40,6 +40,7 @@
     // showTableSetting: true,
     bordered: true,
     showIndexColumn: false,
+    scroll: { x: 'max-content' },
     // canResize: false,
     actionColumn: {
       width: 180,
@@ -65,13 +66,4 @@
     });
   }
 </script>
-<style lang="less" scoped>
-  .action-btn {
-    cursor: pointer;
-    margin-right: 10px;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-</style>
+<style lang="less" scoped></style>

src/views/dashboard/basicInfo/minesInfo/minesInfo.data.ts

@@ -25,7 +25,7 @@ const productionStatusMap: Record<string | number, { text: string; value: number
 // 基于productionStatusMap生成下拉选项
 export const productionStatusOptions = Object.entries(productionStatusMap).map(([key, item]) => ({
   label: item.text, // 状态名称
-  value: key,        // 状态值
+  value: key, // 状态值
 }));
 // 颜色映射
 const colorHexMap: Record<string, string> = {
@@ -41,22 +41,27 @@ export const columns: BasicColumn[] = [
   {
     title: '煤矿编号',
     dataIndex: 'mineCode',
+    width: 100,
   },
   {
     title: '所属执法处',
     dataIndex: 'managementName',
+    width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    width: 200,
   },
   {
     title: '煤矿简称',
     dataIndex: 'mineNameAbbr',
+    width: 100,
   },
   {
     title: '生产状态',
     dataIndex: 'productionStatus',
+    width: 100,
     customRender: ({ record }) => {
       // 空值/异常值处理
       const status = String(record.productionStatus || '');
@@ -68,10 +73,12 @@ export const columns: BasicColumn[] = [
   {
     title: '自燃情况',
     dataIndex: 'alarmLevel',
+    width: 100,
   },
   {
     title: '接入状态',
     dataIndex: 'accessStatus',
+    width: 100,
     customRender: ({ record }) => {
       // 空值/异常值处理
       const status = String(record.accessStatus || '');
@@ -86,6 +93,7 @@ export const columns: BasicColumn[] = [
   {
     title: '在线状态',
     dataIndex: 'status',
+    width: 100,
     customRender: ({ record }) => {
       const status = String(record.status || '');
       if (!status || status === 'undefined' || status === 'null') {
@@ -99,14 +107,17 @@ export const columns: BasicColumn[] = [
   {
     title: '应接数量',
     dataIndex: 'yingjieNum',
+    width: 100,
   },
   {
     title: '已接数量',
     dataIndex: 'accessGoafNum',
+    width: 100,
   },
   {
     title: '未接数量',
     dataIndex: 'notAccessGoafNum',
+    width: 100,
   },
 ];
 

src/views/monitor/sealedMonitor/index.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <!-- 新增Tabs组件区分实时/历史数据 -->
-  <Tabs v-model:activeKey="activeTab" class="monitoring-page" type="line">
+  <Tabs v-model:activeKey="activeTab" class="common-page-tabs" type="line">
     <TabPane tab="实时数据监测" key="realtime">
       <!-- 实时数据表格 -->
       <BasicTable style="padding: 0" @register="registerRealtimeTable">
@@ -173,22 +173,4 @@
   });
 </script>
 
-<style lang="less" scoped>
-  .monitoring-page {
-    padding: 0 12px;
-    margin: 16px;
-    border: 1px solid @border-color-base;
-  }
-
-  .action-btn {
-    cursor: pointer;
-    border: none;
-    // background: transparent;
-    padding: 4px;
-  }
-
-  .action-icon {
-    width: 16px;
-    height: 16px;
-  }
-</style>
+<style lang="less" scoped></style>

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

@@ -10,70 +10,87 @@ export const columns: BasicColumn[] = [
   {
     title: '序号',
     dataIndex: 'orderNo',
+    width: 60,
   },
   {
     title: '区域',
     dataIndex: 'enforcement',
+    width: 80,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    width: 180,
   },
   {
     title: '密闭名称',
     dataIndex: 'sealedName',
+    width: 80,
   },
   {
     title: '所属煤层',
     dataIndex: 'coalSeam',
+    width: 80,
   },
   {
     title: '自燃倾向性',
     dataIndex: 'riskLevel',
+    width: 80,
   },
   {
     title: 'CO(ppm)',
     dataIndex: 'COVal',
+    width: 80,
   },
   {
     title: 'CH4(%)',
     dataIndex: 'CH4Val',
+    width: 80,
   },
   {
     title: 'C2H2(ppm)',
     dataIndex: 'C2H2Val',
+    width: 80,
   },
   {
     title: 'O2(%)',
     dataIndex: 'O2Val',
+    width: 80,
   },
   {
     title: '温度(℃)',
     dataIndex: 'temperature',
+    width: 80,
   },
   {
     title: '压差(Pa)',
     dataIndex: 'pressureDiff',
+    width: 80,
   },
   {
     title: '是否漏风',
     dataIndex: 'leakage',
+    width: 80,
   },
   {
     title: '自然发火隐患',
     dataIndex: 'fireHazard',
+    width: 80,
   },
   {
     title: '密闭启封判定',
     dataIndex: 'unsealing',
+    width: 80,
   },
   {
     title: '爆炸危险性',
     dataIndex: 'explosionHazard',
+    width: 80,
   },
   {
     title: '更新时间',
     dataIndex: 'updateTime',
+    width: 80,
   },
 ];
 

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

@@ -13,10 +13,12 @@ export const columnsCoalAlarm: BasicColumn[] = [
   {
     title: '煤层名称',
     dataIndex: 'coalSeamName',
+    width: 400,
   },
   {
     title: '创建时间',
     dataIndex: 'createTime',
+    width: 400,
   },
   /*  {
     title: '职务',
@@ -36,14 +38,17 @@ export const columnsGoafLimit: BasicColumn[] = [
   {
     title: '气温',
     dataIndex: 'fireAirTemperature',
+    width: 200,
   },
   {
     title: '水温',
     dataIndex: 'fireWaterTemperature',
+    width: 200,
   },
   {
     title: '状态',
     dataIndex: 'status',
+    width: 200,
     customRender({ text }) {
       return h(
         Tag,
@@ -57,6 +62,7 @@ export const columnsGoafLimit: BasicColumn[] = [
   {
     title: '创建时间',
     dataIndex: 'createTime',
+    width: 300,
   },
 ];