[Feat 0000]省局密闭页面配置

public/js/global.js

@@ -201,6 +201,54 @@ const __STATIC_ROUTES__ = [
                 },
                 name: 'warningAnalysis-/pressureDiff-analysis',
             },
+            {
+                path: '/warningAnalysis/autoFire-analysis',
+                component: '/analysis/warningAnalysis/autoFireAnalysis/index',
+                meta: {
+                    keepAlive: true,
+                    internalOrExternal: false,
+                    icon: '',
+                    componentName: 'index',
+                    title: '自然发火隐患分级',
+                },
+                name: 'warningAnalysis-autoFire-analysis',
+            },
+            {
+                path: '/warningAnalysis/fireArea-judge',
+                component: '/analysis/warningAnalysis/fireAreaJudgeAnalysis/index',
+                meta: {
+                    keepAlive: true,
+                    internalOrExternal: false,
+                    icon: '',
+                    componentName: 'index',
+                    title: '火区密闭启封判定',
+                },
+                name: 'warningAnalysis-fireArea-judge',
+            },
+            {
+                path: '/warningAnalysis/sealRisk-judge',
+                component: '/analysis/warningAnalysis/sealRiskJudgeAnalysis/index',
+                meta: {
+                    keepAlive: true,
+                    internalOrExternal: false,
+                    icon: '',
+                    componentName: 'index',
+                    title: '密闭爆炸危险性判定',
+                },
+                name: 'warningAnalysis-sealRisk-judge',
+            },
+            {
+                path: '/warningAnalysis/overlimit-alarm',
+                component: '/analysis/warningAnalysis/overlimitAlarm/index',
+                meta: {
+                    keepAlive: true,
+                    internalOrExternal: false,
+                    icon: '',
+                    componentName: 'index',
+                    title: '超限报警',
+                },
+                name: 'warningAnalysis-overlimit-alarm',
+            },
         ],
         meta: {
             keepAlive: false,

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

@@ -0,0 +1,289 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+export const boardData = [
+  {
+    label: '存在风险情况数量',
+    value: '10',
+  },
+  {
+    label: '低风险',
+    value: '27',
+  },
+  {
+    label: '一般风险',
+    value: '27',
+  },
+  {
+    label: '较高风险',
+    value: '27',
+  },
+  {
+    label: '高风险',
+    value: '27',
+  },
+];
+// 实时数据相关
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    dataIndex: 'orderNo',
+  },
+  {
+    title: '区域',
+    dataIndex: 'enforcement',
+  },
+  {
+    title: '煤矿名称',
+    dataIndex: 'mineName',
+  },
+  {
+    title: '密闭名称',
+    dataIndex: 'sealedName',
+  },
+  {
+    title: '所属煤层',
+    dataIndex: 'coalSeam',
+  },
+  {
+    title: '自燃倾向性',
+    dataIndex: 'riskLevel',
+  },
+  {
+    title: 'CO浓度(ppm)',
+    dataIndex: 'COVal',
+  },
+  {
+    title: 'CO日增率',
+    dataIndex: 'coIncreaseRate',
+  },
+  {
+    title: 'O2浓度(ppm)',
+    dataIndex: 'O2Val',
+  },
+  {
+    title: '温度(℃)',
+    dataIndex: 'temperature',
+  },
+  {
+    title: '温差(℃)',
+    dataIndex: 'temperatureDiff',
+  },
+  {
+    title: '风险分析',
+    dataIndex: 'riskAnalysis',
+  },
+  {
+    title: '预警时间',
+    dataIndex: 'alertTime',
+  },
+  {
+    title: '是否解决',
+    dataIndex: 'isResolved',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'mineName',
+    label: '所属执法处',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '执法一处', value: '0' },
+        { label: '执法二处', value: '1' },
+        { label: '执法三处', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineName',
+    label: '所属区域',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '执法一处', value: '0' },
+        { label: '执法二处', value: '1' },
+        { label: '执法三处', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineName',
+    label: '煤矿名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineNameAbbr',
+    label: '煤矿简称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'productStatus',
+    label: '生产状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '拟建矿井', value: '0' },
+        { label: '正常生产矿井', value: '1' },
+        { label: '长期停产矿井', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'riskLevel',
+    label: '自燃情况',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'Ⅰ类容易自燃', value: '0' },
+        { label: 'Ⅱ类自燃', value: '1' },
+        { label: 'Ⅲ类不易自燃', value: '2' },
+      ],
+    },
+    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/autoFireAnalysis/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="monitoring-page">
+    <!-- 新增Tabs组件区分实时/历史数据 -->
+    <Tabs v-model:activeKey="activeTab" type="card" 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="registerRealtimeTable" :scroll="{ x: 'max-content' }">
+          <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' }">
+          <template #action="{ record }">
+            <div class="action-buttons">
+              <button @click="openModal(record, 'history')" class="action-btn">
+                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+              </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>
+</template>
+
+<script setup lang="ts">
+import { 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 { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './autoFireAnalysis.data';
+
+// 激活的Tab页签
+const activeTab = ref('realtime');
+const visibleModal = ref(false);
+// 注册实时数据表格
+const [registerRealtimeTable] = useTable({
+  dataSource: minesData,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    showAdvancedButton: false,
+  },
+  pagination: false,
+  striped: false,
+  useSearchForm: true,
+  bordered: true,
+  showIndexColumn: false,
+  canResize: false,
+  actionColumn: {
+    width: 60,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: undefined,
+  },
+});
+
+// 注册历史数据表格
+const [registerHistoryTable] = useTable({
+  dataSource: historicalMinesData,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    showAdvancedButton: false,
+  },
+  pagination: false,
+  striped: false,
+  useSearchForm: true,
+  bordered: true,
+  showIndexColumn: false,
+  canResize: false,
+  actionColumn: {
+    width: 60,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: undefined,
+  },
+});
+
+// 弹窗引用
+const realtimeModalRef = ref(null);
+const historyModalRef = ref(null);
+
+// 打开弹窗方法（区分实时/历史）
+const 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;
+};
+</script>
+
+<style lang="less" scoped>
+.monitoring-page {
+  padding: 16px;
+}
+.board-info {
+  display: grid;
+  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+  gap: auto;
+  justify-content: start;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 10px;
+  margin: 0 10px;
+  gap: 100px;
+}
+.board-item {
+  box-sizing: border-box;
+}
+.action-btn {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 4px;
+}
+.action-icon {
+  width: 16px;
+  height: 16px;
+}
+</style>

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

@@ -0,0 +1,298 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+export const boardData = [
+  {
+    label: '存在风险情况数量',
+    value: '10',
+  },
+  {
+    label: '低风险',
+    value: '27',
+  },
+  {
+    label: '一般风险',
+    value: '27',
+  },
+  {
+    label: '较高风险',
+    value: '27',
+  },
+  {
+    label: '高风险',
+    value: '27',
+  },
+];
+// 实时数据相关
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    dataIndex: 'orderNo',
+  },
+  {
+    title: '区域',
+    dataIndex: 'enforcement',
+  },
+  {
+    title: '煤矿名称',
+    dataIndex: 'mineName',
+  },
+  {
+    title: '密闭名称',
+    dataIndex: 'sealedName',
+  },
+  {
+    title: '所属煤层',
+    dataIndex: 'coalSeam',
+  },
+  {
+    title: '自燃倾向性',
+    dataIndex: 'riskLevel',
+  },
+  {
+    title: '空气温度(℃)',
+    dataIndex: 'temperature',
+  },
+  {
+    title: 'O2浓度(ppm)',
+    dataIndex: 'O2Val',
+  },
+  {
+    title: 'C2H4浓度(ppm)',
+    dataIndex: 'C2H4Val',
+  },
+  {
+    title: 'C2H2浓度(ppm)',
+    dataIndex: 'C2H2Val',
+  },
+  {
+    title: 'CO浓度(ppm)',
+    dataIndex: 'COVal',
+  },
+  {
+    title: '出水温度(℃)',
+    dataIndex: 'temperature',
+  },
+
+  {
+    title: '监测时长(天)',
+    dataIndex: 'daysMonitored',
+  },
+  {
+    title: '风险分析',
+    dataIndex: 'riskAnalysis',
+  },
+  {
+    title: '预警时间',
+    dataIndex: 'alertTime',
+  },
+  {
+    title: '是否解决',
+    dataIndex: 'isResolved',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'mineName',
+    label: '所属执法处',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '执法一处', value: '0' },
+        { label: '执法二处', value: '1' },
+        { label: '执法三处', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineName',
+    label: '所属区域',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '执法一处', value: '0' },
+        { label: '执法二处', value: '1' },
+        { label: '执法三处', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineName',
+    label: '煤矿名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineNameAbbr',
+    label: '煤矿简称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'productStatus',
+    label: '生产状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '拟建矿井', value: '0' },
+        { label: '正常生产矿井', value: '1' },
+        { label: '长期停产矿井', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'riskLevel',
+    label: '自燃情况',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'Ⅰ类容易自燃', value: '0' },
+        { label: 'Ⅱ类自燃', value: '1' },
+        { label: 'Ⅲ类不易自燃', value: '2' },
+      ],
+    },
+    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/fireAreaJudgeAnalysis/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="monitoring-page">
+    <!-- 新增Tabs组件区分实时/历史数据 -->
+    <Tabs v-model:activeKey="activeTab" type="card" 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="registerRealtimeTable" :scroll="{ x: 'max-content' }">
+          <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' }">
+          <template #action="{ record }">
+            <div class="action-buttons">
+              <button @click="openModal(record, 'history')" class="action-btn">
+                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+              </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>
+</template>
+
+<script setup lang="ts">
+import { 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 { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './fireAreaJudgeAnalysis.data';
+
+// 激活的Tab页签
+const activeTab = ref('realtime');
+const visibleModal = ref(false);
+// 注册实时数据表格
+const [registerRealtimeTable] = useTable({
+  dataSource: minesData,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    showAdvancedButton: false,
+  },
+  pagination: false,
+  striped: false,
+  useSearchForm: true,
+  bordered: true,
+  showIndexColumn: false,
+  canResize: false,
+  actionColumn: {
+    width: 120,
+    title: '详情',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: undefined,
+  },
+});
+
+// 注册历史数据表格
+const [registerHistoryTable] = useTable({
+  dataSource: historicalMinesData,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    showAdvancedButton: false,
+  },
+  pagination: false,
+  striped: false,
+  useSearchForm: true,
+  bordered: true,
+  showIndexColumn: false,
+  canResize: false,
+  actionColumn: {
+    width: 60,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: undefined,
+  },
+});
+
+// 弹窗引用
+const realtimeModalRef = ref(null);
+const historyModalRef = ref(null);
+
+// 打开弹窗方法（区分实时/历史）
+const 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;
+};
+</script>
+
+<style lang="less" scoped>
+.monitoring-page {
+  padding: 16px;
+}
+.board-info {
+  display: grid;
+  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+  gap: auto;
+  justify-content: start;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 10px;
+  margin: 0 10px;
+  gap: 100px;
+}
+.board-item {
+  box-sizing: border-box;
+}
+.action-btn {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 4px;
+}
+.action-icon {
+  width: 16px;
+  height: 16px;
+}
+</style>

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

@@ -0,0 +1,169 @@
+<template>
+  <div class="monitoring-page">
+    <!-- 新增Tabs组件区分实时/历史数据 -->
+    <Tabs v-model:activeKey="activeTab" type="card" 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="registerRealtimeTable" :scroll="{ x: 'max-content' }">
+          <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' }">
+          <template #action="{ record }">
+            <div class="action-buttons">
+              <button @click="openModal(record, 'history')" class="action-btn">
+                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+              </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>
+</template>
+
+<script setup lang="ts">
+import { 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 { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './overlimitAlarm.data';
+
+// 激活的Tab页签
+const activeTab = ref('realtime');
+const visibleModal = ref(false);
+// 注册实时数据表格
+const [registerRealtimeTable] = useTable({
+  dataSource: minesData,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    showAdvancedButton: false,
+  },
+  pagination: false,
+  striped: false,
+  useSearchForm: true,
+  bordered: true,
+  showIndexColumn: false,
+  canResize: false,
+  actionColumn: {
+    width: 120,
+    title: '详情',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: undefined,
+  },
+});
+
+// 注册历史数据表格
+const [registerHistoryTable] = useTable({
+  dataSource: historicalMinesData,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    showAdvancedButton: false,
+  },
+  pagination: false,
+  striped: false,
+  useSearchForm: true,
+  bordered: true,
+  showIndexColumn: false,
+  canResize: false,
+  actionColumn: {
+    width: 60,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: undefined,
+  },
+});
+
+// 弹窗引用
+const realtimeModalRef = ref(null);
+const historyModalRef = ref(null);
+
+// 打开弹窗方法（区分实时/历史）
+const 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;
+};
+</script>
+
+<style lang="less" scoped>
+.monitoring-page {
+  padding: 16px;
+}
+.board-info {
+  display: grid;
+  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+  gap: auto;
+  justify-content: start;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 10px;
+  margin: 0 10px;
+  gap: 100px;
+}
+.board-item {
+  box-sizing: border-box;
+}
+.action-btn {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 4px;
+}
+.action-icon {
+  width: 16px;
+  height: 16px;
+}
+</style>

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

@@ -0,0 +1,289 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+export const boardData = [
+  {
+    label: '存在风险情况数量',
+    value: '10',
+  },
+  {
+    label: '低风险',
+    value: '27',
+  },
+  {
+    label: '一般风险',
+    value: '27',
+  },
+  {
+    label: '较高风险',
+    value: '27',
+  },
+  {
+    label: '高风险',
+    value: '27',
+  },
+];
+// 实时数据相关
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    dataIndex: 'orderNo',
+  },
+  {
+    title: '区域',
+    dataIndex: 'enforcement',
+  },
+  {
+    title: '煤矿名称',
+    dataIndex: 'mineName',
+  },
+  {
+    title: '密闭名称',
+    dataIndex: 'sealedName',
+  },
+  {
+    title: '所属煤层',
+    dataIndex: 'coalSeam',
+  },
+  {
+    title: '自燃倾向性',
+    dataIndex: 'riskLevel',
+  },
+  {
+    title: 'CO浓度(ppm)',
+    dataIndex: 'COVal',
+  },
+  {
+    title: 'CO日增率',
+    dataIndex: 'coIncreaseRate',
+  },
+  {
+    title: 'O2浓度(ppm)',
+    dataIndex: 'O2Val',
+  },
+  {
+    title: '温度(℃)',
+    dataIndex: 'temperature',
+  },
+  {
+    title: '温差(℃)',
+    dataIndex: 'temperatureDiff',
+  },
+  {
+    title: '风险分析',
+    dataIndex: 'riskAnalysis',
+  },
+  {
+    title: '预警时间',
+    dataIndex: 'alertTime',
+  },
+  {
+    title: '是否解决',
+    dataIndex: 'isResolved',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'mineName',
+    label: '所属执法处',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '执法一处', value: '0' },
+        { label: '执法二处', value: '1' },
+        { label: '执法三处', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineName',
+    label: '所属区域',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '执法一处', value: '0' },
+        { label: '执法二处', value: '1' },
+        { label: '执法三处', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineName',
+    label: '煤矿名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineNameAbbr',
+    label: '煤矿简称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'productStatus',
+    label: '生产状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '拟建矿井', value: '0' },
+        { label: '正常生产矿井', value: '1' },
+        { label: '长期停产矿井', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'riskLevel',
+    label: '自燃情况',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'Ⅰ类容易自燃', value: '0' },
+        { label: 'Ⅱ类自燃', value: '1' },
+        { label: 'Ⅲ类不易自燃', value: '2' },
+      ],
+    },
+    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/pressureDiffAnalysis/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px;">
+    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px">
       <TabPane tab="实时监测" key="realtime">
         <div class="board-info">
           <MiniBoard
-            :key="index" v-for="(item, index) in boardData"  
+            :key="index"
+            v-for="(item, index) in boardData"
             type="A"
             :label="item.label"
             :value="item.value"
@@ -17,14 +18,20 @@
         <BasicTable @register="registerRealtimeTable" :scroll="{ x: 'max-content' }">
           <template #action="{ record }">
             <div class="action-buttons">
-              <button @click="openModal(record, 'realtime')" class="action-btn">
-                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+              <!-- 操作按钮 -->
+              <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' }">
@@ -38,6 +45,29 @@
         </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>
 </template>
 
@@ -47,11 +77,13 @@ 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, minesData , historicalMinesData  } from './pressureDiffAnalysis.data';
+import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './pressureDiffAnalysis.data';
 
 // 激活的Tab页签
 const activeTab = ref('realtime');
-
+const visibleModal = ref(false);
+const visibleresolveModal = ref(false);
+const resolveValue = ref('');
 // 注册实时数据表格
 const [registerRealtimeTable] = useTable({
   dataSource: minesData,
@@ -68,7 +100,7 @@ const [registerRealtimeTable] = useTable({
   showIndexColumn: false,
   canResize: false,
   actionColumn: {
-    width: 60,
+    width: 120,
     title: '操作',
     dataIndex: 'action',
     slots: { customRender: 'action' },
@@ -92,7 +124,7 @@ const [registerHistoryTable] = useTable({
   showIndexColumn: false,
   canResize: false,
   actionColumn: {
-    width: 60,
+    width: 120,
     title: '操作',
     dataIndex: 'action',
     slots: { customRender: 'action' },
@@ -109,11 +141,22 @@ 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;
+};
 </script>
 
 <style lang="less" scoped>
@@ -145,4 +188,8 @@ const openModal = (record, type) => {
   width: 16px;
   height: 16px;
 }
+.action-text {
+  font-size: 12px;
+  color: #6398fc;
+}
 </style>

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

@@ -1,7 +1,6 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 
-
 export const boardData = [
   {
     label: '存在风险情况数量',
@@ -23,7 +22,7 @@ export const boardData = [
     label: '高风险',
     value: '27',
   },
-]
+];
 // 实时数据相关
 export const columns: BasicColumn[] = [
   {
@@ -72,7 +71,7 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '是否解决',
-    dataIndex: 'isResolved'
+    dataIndex: 'isResolved',
   },
 ];
 
@@ -210,7 +209,7 @@ export const minesData = [
     interPressure: '10',
     outerPressure: '20',
   },
-]
+];
 
 export const historicalMinesData = [
   {
@@ -279,4 +278,4 @@ export const historicalMinesData = [
     interPressure: '10',
     outerPressure: '20',
   },
-]
+];

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

@@ -0,0 +1,169 @@
+<template>
+  <div class="monitoring-page">
+    <!-- 新增Tabs组件区分实时/历史数据 -->
+    <Tabs v-model:activeKey="activeTab" type="card" 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="registerRealtimeTable" :scroll="{ x: 'max-content' }">
+          <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' }">
+          <template #action="{ record }">
+            <div class="action-buttons">
+              <button @click="openModal(record, 'history')" class="action-btn">
+                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+              </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>
+</template>
+
+<script setup lang="ts">
+import { 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 { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './sealRiskJudgeAnalysis.data';
+
+// 激活的Tab页签
+const activeTab = ref('realtime');
+const visibleModal = ref(false);
+// 注册实时数据表格
+const [registerRealtimeTable] = useTable({
+  dataSource: minesData,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    showAdvancedButton: false,
+  },
+  pagination: false,
+  striped: false,
+  useSearchForm: true,
+  bordered: true,
+  showIndexColumn: false,
+  canResize: false,
+  actionColumn: {
+    width: 120,
+    title: '详情',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: undefined,
+  },
+});
+
+// 注册历史数据表格
+const [registerHistoryTable] = useTable({
+  dataSource: historicalMinesData,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    showAdvancedButton: false,
+  },
+  pagination: false,
+  striped: false,
+  useSearchForm: true,
+  bordered: true,
+  showIndexColumn: false,
+  canResize: false,
+  actionColumn: {
+    width: 60,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: undefined,
+  },
+});
+
+// 弹窗引用
+const realtimeModalRef = ref(null);
+const historyModalRef = ref(null);
+
+// 打开弹窗方法（区分实时/历史）
+const 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;
+};
+</script>
+
+<style lang="less" scoped>
+.monitoring-page {
+  padding: 16px;
+}
+.board-info {
+  display: grid;
+  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+  gap: auto;
+  justify-content: start;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 10px;
+  margin: 0 10px;
+  gap: 100px;
+}
+.board-item {
+  box-sizing: border-box;
+}
+.action-btn {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 4px;
+}
+.action-icon {
+  width: 16px;
+  height: 16px;
+}
+</style>

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

@@ -0,0 +1,293 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+export const boardData = [
+  {
+    label: '存在风险情况数量',
+    value: '10',
+  },
+  {
+    label: '低风险',
+    value: '27',
+  },
+  {
+    label: '一般风险',
+    value: '27',
+  },
+  {
+    label: '较高风险',
+    value: '27',
+  },
+  {
+    label: '高风险',
+    value: '27',
+  },
+];
+// 实时数据相关
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    dataIndex: 'orderNo',
+  },
+  {
+    title: '区域',
+    dataIndex: 'enforcement',
+  },
+  {
+    title: '煤矿名称',
+    dataIndex: 'mineName',
+  },
+  {
+    title: '密闭名称',
+    dataIndex: 'sealedName',
+  },
+  {
+    title: '所属煤层',
+    dataIndex: 'coalSeam',
+  },
+  {
+    title: '自燃倾向性',
+    dataIndex: 'riskLevel',
+  },
+  {
+    title: 'CO(ppm)',
+    dataIndex: 'COVal',
+  },
+  {
+    title: 'CH4(%)',
+    dataIndex: 'CH4Val',
+  },
+  {
+    title: 'C2H4(ppm)',
+    dataIndex: 'C2H4Val',
+  },
+  {
+    title: 'C2H2(ppm)',
+    dataIndex: 'C2H2Val',
+  },
+  {
+    title: 'O2(%)',
+    dataIndex: 'O2Val',
+  },
+  {
+    title: '爆炸危险性',
+    dataIndex: 'explosionHazard',
+  },
+  {
+    title: '处置意见',
+    dataIndex: 'suggestion',
+  },
+  {
+    title: '预警时间',
+    dataIndex: 'alertTime',
+  },
+  {
+    title: '是否解决',
+    dataIndex: 'isResolved',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'mineName',
+    label: '所属执法处',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '执法一处', value: '0' },
+        { label: '执法二处', value: '1' },
+        { label: '执法三处', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineName',
+    label: '所属区域',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '执法一处', value: '0' },
+        { label: '执法二处', value: '1' },
+        { label: '执法三处', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineName',
+    label: '煤矿名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineNameAbbr',
+    label: '煤矿简称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'productStatus',
+    label: '生产状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '拟建矿井', value: '0' },
+        { label: '正常生产矿井', value: '1' },
+        { label: '长期停产矿井', value: '2' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'riskLevel',
+    label: '自燃情况',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'Ⅰ类容易自燃', value: '0' },
+        { label: 'Ⅱ类自燃', value: '1' },
+        { label: 'Ⅲ类不易自燃', value: '2' },
+      ],
+    },
+    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',
+  },
+];