[Feat 0000]新增矿山基础信息-接入统计、数据质量、密闭统计页面

mock/sys/menu.ts

@@ -3547,6 +3547,48 @@ export default [
                 name: 'basicInfo-minesInfoIndex',
                 id: '9502685863ab87f0ad1134142788a377',
               },
+              {
+                path: '/basicInfo/accessStatistics',
+                component: 'dashboard/basicInfo/accessStatistics',
+                route: '1',
+                meta: {
+                  keepAlive: true,
+                  internalOrExternal: false,
+                  icon: 'ant-design:windows-outlined',
+                  componentName: 'index',
+                  title: '接入统计',
+                },
+                name: 'basicInfo-accessStatisticsIndex',
+                id: '9502685863ab87f0ad1134142788a377',
+              },
+              {
+                path: '/basicInfo/dataQuality',
+                component: 'dashboard/basicInfo/dataQuality',
+                route: '1',
+                meta: {
+                  keepAlive: true,
+                  internalOrExternal: false,
+                  icon: 'ant-design:windows-outlined',
+                  componentName: 'index',
+                  title: '数据质量',
+                },
+                name: 'basicInfo-dataQualityIndex',
+                id: '9502685863ab87f0ad1134142788a377',
+              },
+              {
+                path: '/basicInfo/closedStatistics',
+                component: 'dashboard/basicInfo/closedStatistics',
+                route: '1',
+                meta: {
+                  keepAlive: true,
+                  internalOrExternal: false,
+                  icon: 'ant-design:windows-outlined',
+                  componentName: 'index',
+                  title: '密闭统计',
+                },
+                name: 'basicInfo-closedStatisticsIndex',
+                id: '9502685863ab87f0ad1134142788a377',
+              },
             ],
             meta: {
               keepAlive: false,

src/assets/images/basicInfo/dataQuality/icon-delete.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.208" height="15.787" viewBox="0 0 14.208 15.787">
+  <path id="删除" d="M129.382,88.49h-.789a.592.592,0,0,1,0-1.184h13.024a.592.592,0,1,1,0,1.184H130.566V98.949a.987.987,0,0,0,.987.987h7.1a.987.987,0,0,0,.987-.987V90.266a.592.592,0,1,1,1.184,0v8.683a2.171,2.171,0,0,1-2.171,2.171h-7.1a2.171,2.171,0,0,1-2.171-2.171Zm4.144-1.973a.592.592,0,0,1,0-1.184h3.157a.592.592,0,0,1,0,1.184Zm-.592,5.328a.592.592,0,0,1,1.184,0v4.736a.592.592,0,1,1-1.184,0Zm3.157,0a.592.592,0,1,1,1.184,0v4.736a.592.592,0,1,1-1.184,0Z" transform="translate(-128 -85.333)" fill="#606266"/>
+</svg>

src/assets/images/basicInfo/dataQuality/icon-details.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.209" height="14.26" viewBox="0 0 13.209 14.26">
+  <g id="详情" transform="translate(-99.2 -64.9)">
+    <path id="路径_55589" data-name="路径 55589" d="M112.157,68.438l-.707-.772L109.8,65.857l-.59-.646a.959.959,0,0,0-.707-.311h-7.862A1.438,1.438,0,0,0,99.2,66.336V77.724a1.438,1.438,0,0,0,1.436,1.436h10.337a1.438,1.438,0,0,0,1.436-1.436v-8.64A.969.969,0,0,0,112.157,68.438Zm-.707.646h-2.473a.478.478,0,0,1-.479-.479V65.857Zm0,8.639a.478.478,0,0,1-.479.479H100.636a.478.478,0,0,1-.479-.479V66.336a.478.478,0,0,1,.479-.479h6.9v2.749a1.438,1.438,0,0,0,1.436,1.436h2.473Z" fill="#606266"/>
+    <path id="路径_55590" data-name="路径 55590" d="M263.725,694.557h-7.246a.479.479,0,0,1,0-.957h7.244a.479.479,0,0,1,0,.957Z" transform="translate(-154.298 -618.668)" fill="#606266"/>
+    <path id="路径_55591" data-name="路径 55591" d="M263.725,511.857h-7.246a.479.479,0,0,1,0-.957h7.244a.479.479,0,0,1,0,.957Z" transform="translate(-154.298 -438.883)" fill="#606266"/>
+    <path id="路径_55592" data-name="路径 55592" d="M259.785,329.057h-3.306a.479.479,0,1,1,0-.957h3.3a.479.479,0,0,1,0,.957Z" transform="translate(-154.298 -259)" fill="#606266"/>
+  </g>
+</svg>

src/assets/images/basicInfo/dataQuality/icon-edit.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.487" height="15.094" viewBox="0 0 13.487 15.094">
+  <path id="修改" d="M179.777,105.906a.738.738,0,0,1,1.045.025l1.606,1.606a.739.739,0,0,1,.025,1.045l-7.906,7.906a1.606,1.606,0,0,1-.607.351l-2.549.7c-.389.106-.623-.126-.525-.514l.661-2.6a1.558,1.558,0,0,1,.344-.606l7.906-7.906Zm-7.37,8.441a.943.943,0,0,0-.162.284l-.517,2.036,1.986-.542a.965.965,0,0,0,.3-.173l7.906-7.906-1.606-1.605-7.906,7.906ZM179.752,107l1.606,1.606-.536.536-1.605-1.606.535-.535Zm-6.422,6.423,1.605,1.606-.535.535-1.606-1.605.535-.536Zm-2.663,5.919a.378.378,0,0,1,.381-.378h11.727a.378.378,0,0,1,0,.757H171.048a.378.378,0,0,1-.381-.378Z" transform="translate(-170.167 -105.127)" fill="#606266" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+</svg>

src/assets/images/basicInfo/dataQuality/icon-resolved.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.787" height="16.787" viewBox="0 0 16.787 16.787">
+  <path id="已解决" d="M36.792,38.637l2.979-3.529a.526.526,0,1,1,.8.681l-3.564,4.2a.386.386,0,0,1-.562.029l-2.172-2.087a.527.527,0,0,1-.008-.752h0A.525.525,0,0,1,35,37.17l1.565,1.479a.155.155,0,0,0,.226-.013Zm-.106.126.721-8.639a6.909,6.909,0,0,1,.685,13.784q-.346.035-.694.035a6.909,6.909,0,1,1,.008-13.819m0-.984A7.894,7.894,0,1,0,37.4,44.927q.393,0,.791-.04a7.894,7.894,0,0,0-.783-15.748Z" transform="translate(-29.009 -28.64)" fill="#606266" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+</svg>

src/assets/images/basicInfo/dataQuality/icon-view.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.89" height="11.653" viewBox="0 0 15.89 11.653">
+  <g id="查看" transform="translate(-95.198 -206.331)">
+    <path id="路径_55593" data-name="路径 55593" d="M111.089,212.159a.723.723,0,0,0-.021-.185.945.945,0,0,0-.035-.179c0-.011-.009-.023-.014-.034a.537.537,0,0,0-.027-.071,8.428,8.428,0,0,0-15.691-.019.51.51,0,0,0-.038.1l-.011.027a.379.379,0,0,0-.027.128c-.014.062-.026.185-.026.185a.481.481,0,0,0,0,.1s.012.108.018.13a.808.808,0,0,0,.018.115h0a.531.531,0,0,0,.033.1.6.6,0,0,0,.024.067,8.425,8.425,0,0,0,15.682.036.572.572,0,0,0,.047-.115.268.268,0,0,0,.012-.029.447.447,0,0,0,.028-.138h0A1.068,1.068,0,0,0,111.089,212.159Zm-1.07.039,0,.008c0,.007,0,.015-.006.023a7.367,7.367,0,0,1-13.732,0c0-.01-.005-.019-.009-.028s0-.017,0-.022,0-.014,0-.021v-.007a.212.212,0,0,0,.007-.037l.007-.021a7.368,7.368,0,0,1,13.734,0,.066.066,0,0,0,0,.014.073.073,0,0,0,0,.014c0,.021.005.042.008.052A.217.217,0,0,0,110.019,212.2Z" fill="#606266"/>
+    <path id="路径_55594" data-name="路径 55594" d="M375.735,373.061a2.648,2.648,0,1,0,2.649,2.648A2.652,2.652,0,0,0,375.735,373.061Zm0,4.238a1.589,1.589,0,1,1,1.589-1.589A1.592,1.592,0,0,1,375.735,377.3Z" transform="translate(-272.591 -163.552)" fill="#606266"/>
+  </g>
+</svg>

src/assets/images/basicInfo/minesInfo/icon-chart.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.88" height="14.88" viewBox="0 0 14.88 14.88">
+  <path id="图表" d="M16.472,14.167H2.661V.356A.361.361,0,0,0,2.3,0a.356.356,0,0,0-.356.356V14.515a.358.358,0,0,0,.356.365H16.472a.356.356,0,1,0,0-.712ZM8.5,13.576h2.641a.594.594,0,0,0,.6-.591V1.392a.59.59,0,0,0-.6-.587H8.5a.586.586,0,0,0-.587.587V12.985a.589.589,0,0,0,.587.591ZM9.082,1.987h1.467V12.394H9.082V1.987ZM3.96,13.576H6.6a.6.6,0,0,0,.591-.591V8.9A.594.594,0,0,0,6.6,8.3H3.96a.588.588,0,0,0-.587.6v4.087a.589.589,0,0,0,.587.591Zm.6-4.091H6.014v2.909H4.555V9.485Zm8.475,4.091h2.645a.592.592,0,0,0,.587-.591V4.548a.6.6,0,0,0-.587-.6H13.03a.6.6,0,0,0-.6.6v8.437a.6.6,0,0,0,.6.591Zm.6-8.437H15.08v7.255H13.625V5.139Z" transform="translate(-1.948 0)" fill="#606266"/>
+</svg>

src/assets/images/basicInfo/minesInfo/icon-data.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.787" height="15.787" viewBox="0 0 15.787 15.787">
+  <path id="数据" d="M93.227,101.121a7.894,7.894,0,1,1,7.894-7.894A7.894,7.894,0,0,1,93.227,101.121Zm0-1.184a6.71,6.71,0,1,0-6.71-6.71A6.71,6.71,0,0,0,93.227,99.937Zm.152-4.915L91.872,93.38,90.1,95.217a.592.592,0,1,1-.852-.822l2.208-2.289a.592.592,0,0,1,.862.011l1.513,1.649L96.36,91.23a.592.592,0,1,1,.838.836l-2.964,2.973a.592.592,0,0,1-.855-.018Z" transform="translate(-85.333 -85.333)" fill="#606266"/>
+</svg>

src/assets/images/basicInfo/minesInfo/icon-info.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.787" height="15.787" viewBox="0 0 15.787 15.787">
+  <path id="信息" d="M40.683,44.63l-.172-6.841H39.276L39.1,44.63Zm-.233-8.124a.793.793,0,0,0,0-1.122.8.8,0,0,0-1.114,0,.793.793,0,0,0,0,1.122.789.789,0,0,0,1.114,0ZM39.894,32a7.894,7.894,0,1,0,7.894,7.894A7.894,7.894,0,0,0,39.894,32Zm0,1.052a6.841,6.841,0,1,1-6.841,6.841A6.841,6.841,0,0,1,39.894,33.052Z" transform="translate(-32 -32)" fill="#606266"/>
+</svg>

src/views/dashboard/basicInfo/accessStatistics/access.data.ts

@@ -0,0 +1,160 @@
+import { BasicColumn } from '/@/components/Table/src/types/table';
+
+
+/**
+ * 接入统计 - 多级表头配置
+ * 一级表头：基础信息、统计数据
+ * 二级表头：基础信息包含序号、区域；统计数据包含所有数值字段
+ */
+export function getAccessStatisticsColumns(): BasicColumn[] {
+  return [
+    {
+      title: '序号',
+      dataIndex: 'id',
+      width: 80,
+      fixed: 'left',
+      align: 'center',
+      // 处理合计行序号为空的情况
+      customCell: (text) => text || '',
+      customHeaderCell: () => ({
+        rowSpan: 2, // 合并2行表头（第一行表头 + 第二行空白单元格）
+        style: {
+          textAlign: 'center', // 文本水平居中
+          verticalAlign: 'middle', // 文本垂直居中（解决合并后文字偏移）
+          borderRight: '1px solid #f0f0f0' // 修复合并后边框缺失问题
+        }
+      }),
+
+    },
+    {
+      title: '区域',
+      dataIndex: 'region',
+      width: 150,
+      fixed: 'left',
+      align: 'center',
+    },
+    {
+      title: '煤矿总数',
+      dataIndex: 'totalCoalMines',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '应接入数量',
+      dataIndex: 'shouldAccess',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '无需接入数量',
+      dataIndex: 'noNeedAccess',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '接入数量',
+      dataIndex: 'accessed',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '未接入数量',
+      dataIndex: 'notAccessed',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '在线数量',
+      dataIndex: 'online',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '离线数量',
+      dataIndex: 'offline',
+      width: 120,
+      align: 'center',
+    },
+  ];
+}
+
+export const tableMockData = [
+    {
+        id: '', // 序号为空
+        region: '合计',
+        totalCoalMines: 358,
+        shouldAccess: 304,
+        noNeedAccess: 54,
+        accessed: 297,
+        notAccessed: 7,
+        online: 289,
+        offline: 8,
+    },
+    // 各区域数据行
+    {
+        id: '101',
+        region: '执法一处',
+        totalCoalMines: 116,
+        shouldAccess: 99,
+        noNeedAccess: 17,
+        accessed: 97,
+        notAccessed: 2,
+        online: 96,
+        offline: 1,
+    },
+    {
+        id: '102',
+        region: '执法二处',
+        totalCoalMines: 107,
+        shouldAccess: 89,
+        noNeedAccess: 18,
+        accessed: 86,
+        notAccessed: 3,
+        online: 84,
+        offline: 2,
+    },
+    {
+        id: '103',
+        region: '执法三处',
+        totalCoalMines: 49,
+        shouldAccess: 45,
+        noNeedAccess: 4,
+        accessed: 45,
+        notAccessed: 0,
+        online: 44,
+        offline: 1,
+    },
+    {
+        id: '104',
+        region: '执法四处',
+        totalCoalMines: 43,
+        shouldAccess: 34,
+        noNeedAccess: 9,
+        accessed: 34,
+        notAccessed: 0,
+        online: 30,
+        offline: 4,
+    },
+    {
+        id: '105',
+        region: '执法五处',
+        totalCoalMines: 37,
+        shouldAccess: 33,
+        noNeedAccess: 4,
+        accessed: 33,
+        notAccessed: 0,
+        online: 33,
+        offline: 0,
+    },
+    {
+        id: '107',
+        region: '执法七处',
+        totalCoalMines: 6,
+        shouldAccess: 4,
+        noNeedAccess: 2,
+        accessed: 2,
+        notAccessed: 2,
+        online: 2,
+        offline: 0,
+    },
+]

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" bordered :scroll="{ x: 1500 }" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { BasicTable, useTable } from '/@/components/Table';
+import { getAccessStatisticsColumns, tableMockData } from './access.data';
+// import { mineAccessStatisticsApi } from '/@/api/mine/basicInfo';
+
+export default defineComponent({
+  components: { BasicTable },
+  setup() {
+    const [registerTable] = useTable({
+    //   api: mineAccessStatisticsApi,
+      columns: getAccessStatisticsColumns(),
+      dataSource: tableMockData,
+      pagination: true,
+      showIndexColumn: false,
+      // 合计行样式高亮（区分普通数据行）
+      rowClassName: (record) => record.region === '合计' ? 'bg-gray-50 font-medium' : '',
+    });
+
+    return {
+      registerTable,
+    };
+  },
+});
+</script>
+<style scoped>
+/* 合计行样式优化 */
+.bg-gray-50 {
+  background-color: #f9fafb;
+}
+.font-medium {
+  font-weight: 500;
+}
+</style>

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

@@ -0,0 +1,200 @@
+import { BasicColumn } from '/@/components/Table/src/types/table';
+import { EyeOutlined } from '@ant-design/icons-vue';
+import { h } from 'vue';
+
+/**
+ * 密闭统计表格列配置
+ */
+export function getClosedStatisticsColumns(): BasicColumn[] {
+  return [
+    {
+      title: '序号',
+      dataIndex: 'id',
+      align: 'center',
+    },
+    {
+      title: '区域',
+      dataIndex: 'region',
+      align: 'center',
+    //   width: 80,
+    },
+    {
+      title: '密闭总数',
+      dataIndex: 'closedTotal',
+      align: 'center',
+    },
+    {
+      title: '正常生产',
+      dataIndex: 'normalProduce',
+      align: 'center',
+    },
+    {
+      title: '正常建设',
+      dataIndex: 'normalBuild',
+      align: 'center',
+    },
+    {
+      title: '拟建矿井',
+      dataIndex: 'toRetireMine',
+      align: 'center',
+    },
+    {
+      title: '自行停产',
+      dataIndex: 'selfStopProduce',
+      align: 'center',
+    },
+    {
+      title: '自行停建',
+      dataIndex: 'selfStopBuild',
+      align: 'center',
+    },
+    {
+      title: '责令停止整顿',
+      dataIndex: 'orderStopRectify',
+      align: 'center',
+    },
+    {
+      title: '责令停止建设',
+      dataIndex: 'orderStopBuild',
+      align: 'center',
+    },
+    {
+      title: '停产整改',
+      dataIndex: 'stopProduceRectify',
+      align: 'center',
+    },
+    {
+      title: '停建整改',
+      dataIndex: 'stopBuildRectify',
+      align: 'center',
+    },
+    {
+      title: '长期停产',
+      dataIndex: 'longTermStopProduce',
+      align: 'center',
+    },
+    {
+      title: '长期停建',
+      dataIndex: 'longTermStopBuild',
+      align: 'center',
+    },
+    {
+      title: '长期停建（失联）',
+      dataIndex: 'longTermClose',
+      width: 180,
+      align: 'center',
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      align: 'center',
+      // 渲染“查看”图标（匹配图片中的眼睛按钮）
+      customRender: () => h(EyeOutlined, { style: { cursor: 'pointer' }, onClick: () => alert('查看详情') }),
+    },
+  ];
+}
+
+export const tableMockData = [
+    {
+        id: '101',
+        region: '执法一处',
+        closedTotal: 140,
+        normalProduce: 10,
+        normalBuild: 10,
+        toRetireMine: 10,
+        selfStopProduce: 10,
+        selfStopBuild: 10,
+        orderStopRectify: 10,
+        orderStopBuild: 10,
+        stopProduceRectify: 10,
+        stopBuildRectify: 10,
+        longTermStopProduce: 10,
+        longTermStopBuild: 10,
+        longTermClose: 10,
+    },
+    {
+        id: '102',
+        region: '执法二处',
+        closedTotal: 140,
+        normalProduce: 10,
+        normalBuild: 10,
+        toRetireMine: 10,
+        selfStopProduce: 10,
+        selfStopBuild: 10,
+        orderStopRectify: 10,
+        orderStopBuild: 10,
+        stopProduceRectify: 10,
+        stopBuildRectify: 10,
+        longTermStopProduce: 10,
+        longTermStopBuild: 10,
+        longTermClose: 10,
+    },
+    {
+        id: '103',
+        region: '执法三处',
+        closedTotal: 140,
+        normalProduce: 10,
+        normalBuild: 10,
+        toRetireMine: 10,
+        selfStopProduce: 10,
+        selfStopBuild: 10,
+        orderStopRectify: 10,
+        orderStopBuild: 10,
+        stopProduceRectify: 10,
+        stopBuildRectify: 10,
+        longTermStopProduce: 10,
+        longTermStopBuild: 10,
+        longTermClose: 10,
+    },
+    {
+        id: '104',
+        region: '执法四处',
+        closedTotal: 140,
+        normalProduce: 10,
+        normalBuild: 10,
+        toRetireMine: 10,
+        selfStopProduce: 10,
+        selfStopBuild: 10,
+        orderStopRectify: 10,
+        orderStopBuild: 10,
+        stopProduceRectify: 10,
+        stopBuildRectify: 10,
+        longTermStopProduce: 10,
+        longTermStopBuild: 10,
+        longTermClose: 10,
+    },
+    {
+        id: '105',
+        region: '执法五处',
+        closedTotal: 140,
+        normalProduce: 10,
+        normalBuild: 10,
+        toRetireMine: 10,
+        selfStopProduce: 10,
+        selfStopBuild: 10,
+        orderStopRectify: 10,
+        orderStopBuild: 10,
+        stopProduceRectify: 10,
+        stopBuildRectify: 10,
+        longTermStopProduce: 10,
+        longTermStopBuild: 10,
+        longTermClose: 10,
+    },
+    {
+        id: '107',
+        region: '执法七处',
+        closedTotal: 140,
+        normalProduce: 10,
+        normalBuild: 10,
+        toRetireMine: 10,
+        selfStopProduce: 10,
+        selfStopBuild: 10,
+        orderStopRectify: 10,
+        orderStopBuild: 10,
+        stopProduceRectify: 10,
+        stopBuildRectify: 10,
+        longTermStopProduce: 10,
+        longTermStopBuild: 10,
+        longTermClose: 10,
+    },
+]

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="p-4">
+    <!-- 表格：适配多列，设置横向滚动 & 边框 -->
+    <BasicTable 
+      @register="registerTable" 
+      bordered 
+      :scroll="{ x: 'max-content' }" 
+      class="closed-statistics-table"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { BasicTable, useTable } from '/@/components/Table';
+import { getClosedStatisticsColumns, tableMockData } from './closed.data';
+// 引入接口（后续替换为真实接口）
+// import { mineClosedStatisticsApi } from '/@/api/mine/basicInfo';
+
+export default defineComponent({
+  components: { BasicTable },
+  setup() {
+    // 注册表格
+    const [registerTable] = useTable({
+    //   api: mineClosedStatisticsApi, // 密闭统计接口
+    dataSource: tableMockData,
+      columns: getClosedStatisticsColumns(),
+      pagination: false, // 无分页
+      showIndexColumn: false, // 关闭默认序号列，使用自定义序号列
+    });
+
+    return {
+      registerTable,
+    };
+  },
+});
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/basicInfo/dataQuality/components/DataQualityModal.vue

@@ -0,0 +1,405 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    @ok="handleSubmit"
+    :title="getTitle"
+    width="900px"
+    :min-height="600"
+    :max-height="1000"
+    scrollable
+    destroyOnClose
+    :bodyStyle="{ padding: '20px' }"
+  >
+    <!-- 查看模式 -->
+    <div class="que-container" v-if="mode === 'view'">
+      <div class="que-status">
+        <div>矿井状态：</div>
+        <div>
+          <span :class="getStatusClass(currentRecord?.mineLinkStatus || mockFormdData.mineLinkStatus)" class="status-dot">
+            {{ getStatusText(currentRecord?.mineLinkStatus || mockFormdData.mineLinkStatus) }}
+          </span>
+        </div>
+      </div>
+      <!-- 动态渲染topFormSchema字段（查看模式） -->
+      <div class="mine-info">
+        <div class="mine-field" v-for="schema in topFormSchema" :key="schema.field">
+          <span class="que-label">{{ schema.label }}：</span>
+          <span class="que-value">{{ currentRecord?.[schema.field] || mockFormdData[schema.field] }}</span>
+        </div>
+      </div>
+      <div 
+        class="que-item" 
+        v-for="(item, index) in queList" 
+        :key="index"
+      >
+        <div class="que-details">
+          <div class="que-field">
+            <span class="que-value que-goafName">{{ item.goafName || '-' }}</span>
+          </div>
+          <div class="que-field">
+            <span class="que-label">问题描述：</span>
+            <span class="que-value">{{ item.queCon || '-' }}</span>
+          </div>
+          <div class="que-field time-field">
+            <span class="que-label">时间：</span>
+            <span class="que-value">{{ formatDate(item.startTime) || '-' }}</span>
+            <span class="time-separator">-----</span>
+            <span class="que-value">{{ formatDate(item.endTime) || '-' }}</span>
+          </div>
+          <div class="que-field">
+            <span class="que-label">参数：</span>
+            <span class="que-value">{{ (item.param || '-').replace(/,/g, ' ') }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 编辑/新增模式 -->
+    <div v-else class="edit-container">
+      <!-- 动态渲染topFormSchema字段（编辑/新增模式） -->
+      <div class="mine-base-info">
+        <div class="form-item" v-for="schema in topFormSchema" :key="schema.field">
+          <div class="form-label">{{ schema.label }}：</div>
+          <component 
+            :is="getComponent(schema.component)"
+            v-model:value="currentRecord[schema.field]" 
+            :disabled="mode === 'edit' && schema.field === 'mineName'" 
+            v-bind="schema.componentProps"
+            :placeholder="`请输入${schema.label}`"
+            style="width: 100%"
+          />
+        </div>
+      </div>
+
+      <!-- 问题项编辑区 -->
+      <div 
+        class="que-item" 
+        v-for="(item, index) in queList" 
+        :key="item.orderNum || index"
+      >
+        <div class="que-index">问题 {{ index + 1 }}</div>
+        <div class="edit-fields">
+          <template v-for="schema in formSchema" :key="schema.field">
+            <div class="form-item">
+              <div class="form-label">{{ schema.label }}：</div>
+              <component 
+                :is="getComponent(schema.component)"
+                v-model:value="item[schema.field]"
+                v-bind="schema.componentProps"
+                :placeholder="`请输入${schema.label}`"
+                style="width: 100%"
+              />
+            </div>
+          </template>
+          <div class="form-actions">
+            <a-button 
+              type="text" 
+              danger 
+              @click="removeItem(index)"
+              :disabled="queList.length <= 1"
+            >
+              删除
+            </a-button>
+          </div>
+        </div>
+      </div>
+
+      <a-button 
+        type="dashed" 
+        class="add-btn"
+        @click="addNewItem"
+      >
+        <plus-outlined /> 新增问题
+      </a-button>
+    </div>
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, unref } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { mockFormdData, formSchema, topFormSchema } from '../dataQuality.data';
+import { Button as AButton, Select } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
+import { DatePicker } from 'ant-design-vue';
+import { PlusOutlined } from '@ant-design/icons-vue';
+import dayjs, { Dayjs } from 'dayjs'; // 引入dayjs处理日期
+
+// 组件映射 - 增加Select组件支持
+const componentMap = {
+  Input,
+  DatePicker,
+  Select
+};
+
+const emit = defineEmits(['success', 'register']);
+
+// 模式区分：view/edit/add
+const mode = ref<'view' | 'edit' | 'add'>('view');
+const currentRecord = ref<any>({
+  mineLinkStatus: '',
+  queJson: [],
+});
+const queList = ref<any[]>([]);
+
+// 获取组件
+const getComponent = (componentName: string) => {
+  return componentMap[componentName as keyof typeof componentMap];
+};
+
+// 格式化日期为字符串（用于查看模式）
+const formatDate = (date: string | Dayjs | null) => {
+  if (!date) return '';
+  return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
+};
+
+/**
+ * 根据状态值获取显示文本
+ * @param status 状态值（1/0，支持字符串或数字类型）
+ */
+const getStatusText = (status: string | number) => {
+  return status === '1' || status === 1 ? '在线' : '离线';
+};
+
+/**
+ * 根据状态值获取样式类
+ * @param status 状态值（1/0，支持字符串或数字类型）
+ */
+const getStatusClass = (status: string | number) => {
+  return status === '1' || status === 1 ? 'status-online' : 'status-offline';
+};
+
+// 初始化弹框数据
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  setModalProps({ confirmLoading: false });
+  
+  // 接收模式参数（view/edit/add）
+  mode.value = data?.mode || 'view';
+  currentRecord.value = data?.record ? { ...data.record } : {
+    mineName: '',
+    mineLinkStatus: '0',
+    queJson: [],
+  };
+  
+  // 初始化问题列表
+  if (mode.value === 'add') {
+    // 新增模式：空表单
+    queList.value = [{
+      orderNum: '1',
+      goafName: '',
+      queCon: '',
+      startTime: null,
+      endTime: null,
+      param: '',
+    }];
+  } else {
+    // 编辑/查看模式：使用传入数据或默认数据
+    const rawData = currentRecord.value?.queJson 
+      ? JSON.parse(JSON.stringify(currentRecord.value.queJson))
+      : JSON.parse(JSON.stringify(mockFormdData.queJson));
+    
+    // 转换日期格式：字符串 -> dayjs对象（供DatePicker使用）
+    queList.value = rawData.map((item: any) => ({
+      ...item,
+      startTime: item.startTime ? dayjs(item.startTime) : null,
+      endTime: item.endTime ? dayjs(item.endTime) : null,
+    }));
+  }
+});
+
+// 弹框标题
+const getTitle = computed(() => {
+  const titles = {
+    view: '质量问题详情',
+    edit: '编辑质量问题',
+    add: '新增质量问题',
+  };
+  return titles[mode.value];
+});
+
+// 新增问题
+const addNewItem = () => {
+  const newItem = {
+    orderNum: (queList.value.length + 1).toString(),
+    goafName: '',
+    queCon: '',
+    startTime: null,
+    endTime: null,
+    param: '',
+  };
+  queList.value.push(newItem);
+};
+
+// 删除问题
+const removeItem = (index: number) => {
+  queList.value.splice(index, 1);
+  queList.value.forEach((item, i) => {
+    item.orderNum = (i + 1).toString();
+  });
+};
+
+// 提交处理
+async function handleSubmit() {
+  try {
+    setModalProps({ confirmLoading: true });
+    // 转换日期为字符串
+    const submitData = queList.value.map((item) => ({
+      ...item,
+      startTime: item.startTime ? item.startTime.format('YYYY-MM-DD HH:mm:ss') : '',
+      endTime: item.endTime ? item.endTime.format('YYYY-MM-DD HH:mm:ss') : '',
+    }));
+    // 构造完整提交数据
+    const result = {
+      ...currentRecord.value,
+      queJson: submitData,
+      // 新增模式自动设置为未解决
+      isOk: mode.value === 'add' ? '未解决' : currentRecord.value.isOk,
+      // 新增时补充当前时间作为处理时间
+      handleTime: mode.value === 'add' ? dayjs().format('YYYY-MM-DD HH:mm:ss') : currentRecord.value.handleTime,
+    };
+    emit('success', result);
+    closeModal();
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>
+
+<style scoped>
+/* 样式部分保持不变 */
+.que-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.que-status {
+  display: flex;
+  width: 100%;
+  background-color: #f8f9fc;
+  padding: 8px 16px;
+  align-items: center;
+  border: 1px solid #cad2e0;
+  border-radius: 5px;
+}
+.mine-info {
+  padding: 12px 16px;
+  border: 1px solid #cad2e0;
+  border-radius: 5px;
+  background-color: #f8f9fc;
+}
+.mine-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.status-dot {
+  position: relative;
+  padding-left: 12px;
+  font-weight: 500;
+}
+.status-dot::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: inherit;
+}
+.status-online {
+  color: #10952c;
+  font-weight: 500;
+}
+.status-offline {
+  color: #f5222d;
+  font-weight: 500;
+}
+.status-online.status-dot::before {
+  background-color: #10952c;
+}
+.status-offline.status-dot::before {
+  background-color: #f5222d;
+}
+.que-item {
+  padding: 8px 16px;
+  border: 1px solid #cad2e0;
+  border-radius: 8px;
+  background-color: #f8f9fc;
+}
+.que-index {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px dashed #e8e8e8;
+}
+.que-details {
+}
+.que-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 200px;
+  margin-bottom: 10px;
+}
+.que-label {
+  font-size: 16px;
+  color: #868789;
+  white-space: nowrap;
+}
+.que-value {
+  font-size: 16px;
+  color: #838486;
+  word-break: break-all;
+}
+.que-goafName {
+  color: #4c4c4e;
+  font-size: 20px;
+}
+.time-field {
+  flex: 1;
+  min-width: 420px;
+}
+.time-separator {
+  color: #999;
+  margin: 0 8px;
+}
+
+.edit-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.mine-base-info {
+  padding: 12px 16px;
+  border: 1px solid #cad2e0;
+  border-radius: 5px;
+  background-color: #f8f9fc;
+}
+.edit-fields {
+}
+.form-item {
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+}
+.form-label {
+  width: 20%;
+  color: #666;
+  font-size: 14px;
+}
+.add-btn {
+  margin-top: 8px;
+  width: 100%;
+}
+.form-actions {
+  display: flex;
+  justify-content: end;
+  margin-bottom: 8px;
+}
+</style>

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

@@ -0,0 +1,240 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+/** 表格列配置 */
+export const columns: BasicColumn[] = [
+  {
+    title: '煤矿名称',
+    dataIndex: 'mineName',
+    width: 250,
+  },
+  {
+    title: '煤矿简称',
+    dataIndex: 'mineNameAbbr',
+    width: 150,
+  },
+  {
+    title: '生产状态',
+    dataIndex: 'mineProStatus',
+    width: 120,
+    customRender: ({ record }) => {
+      const statusMap = {
+        '正常生产矿井': 'green',
+        '拟建矿井': 'blue',
+        '长期停产矿井': 'orange',
+      };
+      const color = statusMap[record.mineProStatus] || 'gray';
+      return h(Tag, { color }, () => record.mineProStatus);
+    },
+  },
+  {
+    title: '在线状态',
+    dataIndex: 'mineLinkStatus',
+    width: 100,
+    customRender: ({ record }) => {
+      const color = record.mineLinkStatus === '在线' ? 'green' : 'red';
+      return h(Tag, { color }, () => record.mineLinkStatus);
+    },
+  },
+  {
+    title: '质量问题详情',
+    dataIndex: 'qualityIssue',
+    width: 400,
+    ellipsis: true,
+    customRender: ({ record, text }) => {
+      return h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [
+        h('span', { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, text),
+        h(
+          'button',
+          {
+            onClick: () => {
+              record.onViewDetail?.(record);
+            },
+            title: '查看详情',
+            style: {
+              padding:'5px',
+            }
+          },
+          [
+            h('div', {
+            style: {
+              background: `url('/src/assets/images/basicInfo/dataQuality/icon-view.svg')`,
+              width: '16px',
+              height: '16px',
+              backgroundSize: 'contain',
+              backgroundRepeat: 'no-repeat',
+            },
+            class: 'action-icon',
+            alt: '查看详情',
+          }),
+          ]
+        ),
+      ]);
+    },
+  },
+  {
+    title: '当前状态',
+    dataIndex: 'isOk',
+    width: 100,
+    customRender: ({ record }) => {
+      const color = record.isOk === '未解决' ? 'red' : 'green';
+      return h(Tag, { color }, () => record.isOk);
+    },
+  },
+  {
+    title: '处理时间',
+    dataIndex: 'handleTime',
+    width: 180,
+  },
+];
+
+/** 查询表单配置 */
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'mineName',
+    label: '煤矿名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineNameAbbr',
+    label: '煤矿简称',
+    component: 'Input',
+    colProps: { span: 6 },
+  }
+];
+
+// 模拟煤矿选项数据
+export const mineOptions = [
+  { label: '神东集团布尔台煤矿', value: '神东集团布尔台煤矿' },
+  { label: '府谷县后安能源有限公司古城一号煤矿', value: '府谷县后安能源有限公司古城一号煤矿' },
+];
+// 模拟煤矿在线状态选项数据
+export const mineLinkStatusOptions = [
+  { label: '在线', value: '01' },
+  { label: '离线', value: '02' },
+];
+export const topFormSchema = [
+  {
+    field: 'mineName',
+    label: '煤矿名称',
+    component: 'Select',
+    componentProps: {
+      options: mineOptions,
+    },
+    required: true,
+  },
+  {
+    field: 'mineLinkStatus',
+    label: '当前状态',
+    component: 'Select',
+    componentProps: {
+      options: mineLinkStatusOptions,
+    },
+    required: true,
+  },
+
+];
+
+/** 弹框表单配置 */
+export const formSchema  = [
+
+  {
+    field: 'goafName',
+    label: '工作面名称',
+    component: 'Input',
+  },
+  {
+    field: 'queCon',
+    label: '问题描述',
+    component: 'Input',
+  },
+  {
+    field: 'startTime',
+    label: '开始时间',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+    },
+    required: true,
+  },
+  {
+    field: 'endTime',
+    label: '结束时间',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+    },
+    required: true,
+  },
+  {
+    field: 'param',
+    label: '参数',
+    component: 'Input',
+    required: true,
+  },
+];
+
+/** 模拟表单修改数据 */
+export const mockFormdData =
+  {
+    id: '13213132132132',
+    mineCode: '100001',
+    mineName: '神东集团布尔台煤矿',
+    mineNameAbbr: '布尔台矿',
+    mineProStatus: '0',
+    mineLinkStatus: '1',
+    isOk: false,
+    queJson: [
+      {
+        orderNum: '1',
+        goafName: '12241采煤工作面',
+        queCon: '无数据',
+        startTime: '2025-12-16 12:19:20',
+        endTime: '2025-12-16 15:19:20',
+        param: 'CO,CO2',
+      },
+      {
+        orderNum: '2',
+        goafName: '12241采煤工作面',
+        queCon: '数据长时间无变化',
+        startTime: '2025-12-16 12:19:20',
+        endTime: '2025-12-16 15:19:20',
+        param: 'CO,CO2',
+      },
+    ],
+  }
+
+/** 模拟已解决数据 */
+export const unresolvedData = [
+  {
+    id: '1',
+    mineName: '府谷县后安能源有限公司古城一号煤矿',
+    mineNameAbbr: '古城一号煤矿',
+    mineProStatus: '正常生产矿井',
+    mineLinkStatus: '在线',
+    qualityIssue: '<ZZZ工作面采空区密闭监测>存在问题:数据无变化;',
+    isOk: '未解决',
+    handleTime: '2025-11-17 18:04:09',
+    handleResult: '数据已修复',
+    remark: '重新启动数据采集设备后恢复正常',
+  },
+]
+/** 模拟已解决数据 */
+export const resolvedData = [
+  {
+    id: '3',
+    mineName: '府谷县后安能源有限公司古城一号煤矿',
+    mineNameAbbr: '古城一号煤矿',
+    mineProStatus: '正常生产矿井',
+    mineLinkStatus: '在线',
+    qualityIssue: '<ZZZ工作面采空区密闭监测>存在问题:数据无变化;',
+    isOk: '已解决',
+    handleTime: '2025-11-17 18:04:09',
+    handleResult: '数据已修复',
+    remark: '重新启动数据采集设备后恢复正常',
+  },
+];

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

@@ -0,0 +1,245 @@
+<template>
+  <div class="data-quality-page">
+    <!-- 查询表单 -->
+    <BasicForm
+      @register="registerSearchForm"
+      :model="searchModel"
+      @finish="handleSearch"
+      class="form-part"
+    />
+
+    <!-- Tab标签页 -->
+    <Tabs v-model:activeKey="activeKey" type="card" class="mb-4">
+      <TabPane key="unresolved" tab="未解决">
+        <div class="add-button">
+          <a-button type="primary" preIcon="mdi:page-next-outline" @click="handleOpenModal({}, 'add')" > 新增问题 </a-button>
+        </div>
+        <BasicTable @register="registerUnresolvedTable">
+          <template #action="{ record }">
+            <div class="action-buttons">
+              <button @click="handleOpenModal(record, 'edit')" class="action-btn">
+                <img src="@/assets/images/basicInfo/dataQuality/icon-edit.svg" class="action-icon" />
+              </button>
+              <button @click="handleGoToPage(record,'/basicInfo/accessStatistics')" class="action-btn">
+                <img src="@/assets/images/basicInfo/dataQuality/icon-delete.svg" class="action-icon" />
+              </button>
+              <button @click="handleGoToPage(record,'/basicInfo/accessStatistics')" class="action-btn">
+                <img src="@/assets/images/basicInfo/dataQuality/icon-resolved.svg" class="action-icon" />
+              </button>
+              <button @click="handleGoToPage(record,'/basicInfo/accessStatistics')" class="action-btn">
+                <img src="@/assets/images/basicInfo/dataQuality/icon-details.svg" class="action-icon" />
+              </button>
+            </div>
+          </template>
+        </BasicTable>
+      </TabPane>
+      <TabPane key="resolved" tab="已解决">
+        <BasicTable @register="registerResolvedTable">
+          <template #action="{ record }">
+            <div class="action-buttons">
+              <button @click="handleOpenModal(record, 'view')" class="action-btn">
+                <img src="@/assets/images/basicInfo/dataQuality/icon-details.svg" class="action-icon" />
+              </button>
+            </div>
+          </template>
+        </BasicTable>
+      </TabPane>
+    </Tabs>
+
+    <!-- 处理弹框 -->
+    <DataQualityModal
+      @register="registerModal"
+      @success="handleModalSuccess"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { useModal } from '/@/components/Modal';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import DataQualityModal from './components/DataQualityModal.vue';
+  import {
+    columns,
+    searchFormSchema,
+    unresolvedData,
+    resolvedData,
+  } from './dataQuality.data';
+
+  // 路由实例
+  const router = useRouter();
+  // 响应式数据
+  const activeKey = ref('unresolved'); // 激活的Tab键
+  const searchModel = reactive({}); // 搜索表单模型
+
+  // 原始数据源（深拷贝避免修改原数据）
+  const originUnresolved = JSON.parse(JSON.stringify(unresolvedData));
+  const originResolved = JSON.parse(JSON.stringify(resolvedData));
+
+  // 为每条记录添加查看详情事件
+  originUnresolved.forEach(item => {
+    item.onViewDetail = (record: any) => {
+      handleOpenModal(record, 'view');
+    };
+  });
+  originResolved.forEach(item => {
+    item.onViewDetail = (record: any) => {
+      handleOpenModal(record, 'view');
+    };
+  });
+  // 筛选后的数据源
+  const filteredUnresolved = ref([...originUnresolved]);
+  const filteredResolved = ref([...originResolved]);
+
+  // 搜索表单注册
+  const [registerSearchForm] = useForm({
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    model: searchModel,
+  });
+
+  // 未解决表格注册
+  const [registerUnresolvedTable, { reload: reloadUnresolved }] = useTable({
+    dataSource: filteredUnresolved.value,
+    columns,
+    pagination: false,
+    striped: true,
+    bordered: true,
+    showIndexColumn: false,
+    indexColumnProps: {
+      title: '序号',
+    },
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  });
+
+  // 已解决表格注册
+  const [registerResolvedTable, { reload: reloadResolved }] = useTable({
+    dataSource: filteredResolved.value,
+    columns,
+    pagination: false,
+    striped: true,
+    bordered: true,
+    showIndexColumn: false,
+    indexColumnProps: {
+      title: '序号',
+    },
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+    rowKey: 'id',
+  });
+
+  // 弹框注册
+  const [registerModal, { openModal }] = useModal();
+
+  // 搜索筛选处理函数
+  function handleSearch(values: any) {
+    // 筛选未解决数据
+    // filteredUnresolved.value = originUnresolved.filter((item) => {
+    //   return (
+    //     (values.mineName ? item.mineName.includes(values.mineName) : true) &&
+    //     (values.mineNameAbbr ? item.mineNameAbbr.includes(values.mineNameAbbr) : true)
+    //   );
+    // });
+
+    // // 筛选已解决数据
+    // filteredResolved.value = originResolved.filter((item) => {
+    //   return (
+    //     (values.mineName ? item.mineName.includes(values.mineName) : true) &&
+    //     (values.mineNameAbbr ? item.mineNameAbbr.includes(values.mineNameAbbr) : true)
+    //   );
+    // });
+
+    // 刷新表格
+    reloadUnresolved();
+    reloadResolved();
+
+  }
+
+  // 打开弹框（处理/查看）函数
+  function handleOpenModal(record: any, mode: 'view' | 'edit' | 'add' = 'view') {
+    openModal(true, {
+      record,
+      mode,
+    });
+  }
+
+  // 弹框提交成功处理函数
+  function handleModalSuccess(result: any) {
+    // 从原未解决数据中移除该记录
+    // const unresolvedIndex = originUnresolved.findIndex((item) => item.id === result.id);
+    // if (unresolvedIndex > -1) {
+    //   originUnresolved.splice(unresolvedIndex, 1);
+    // }
+
+    // // 从筛选后的未解决数据中移除
+    // const filteredUnresolvedIndex = filteredUnresolved.value.findIndex((item) => item.id === result.id);
+    // if (filteredUnresolvedIndex > -1) {
+    //   filteredUnresolved.value.splice(filteredUnresolvedIndex, 1);
+    // }
+
+    // // 添加到已解决数据中
+    // originResolved.push(result);
+    // filteredResolved.value.push(result);
+
+    // 刷新表格
+    reloadUnresolved();
+    reloadResolved();
+
+    // 切换到已解决Tab
+    activeKey.value = 'resolved';
+  }
+  /**
+   * 通用页面跳转方法
+   * @param record 当前行数据
+   * @param path 目标路径
+   */
+  function handleGoToPage(record: any, path: string) {
+    // 跳转时携带当前煤矿的编号作为参数（根据实际需求调整携带的参数）
+    router.push({
+      path,
+      // query: {
+      //   orderNo: record.orderNo, // 煤矿编号
+      //   mineName: record.mineName // 煤矿名称
+      // }
+    });
+  }
+</script>
+
+<style scoped lang="less">
+  .data-quality-page {
+    padding: 16px;
+    .ant-form {
+      background-color: #fff;
+    }
+  }
+  .form-part {
+    padding: 12px 10px 6px 10px;
+    margin-bottom: 8px;
+    background-color: #ffffff;
+    border-radius: 2px;
+  }
+  .add-button {
+    margin-bottom: 10px;
+  }
+  .action-btn {
+    height: 30px;
+    cursor: pointer;
+    margin-right: 10px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+</style>

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

@@ -1,61 +0,0 @@
-<template>
-  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
-    <BasicForm @register="registerForm" />
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, useForm } from '/@/components/Form/index';
-  import { formSchema } from './dept.data';
-
-  import { getDeptList } from '/@/api/demo/system';
-  export default defineComponent({
-    name: 'DeptModal',
-    components: { BasicModal, BasicForm },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const isUpdate = ref(true);
-
-      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
-        labelWidth: 100,
-        schemas: formSchema,
-        showActionButtonGroup: false,
-      });
-
-      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-        resetFields();
-        setModalProps({ confirmLoading: false });
-        isUpdate.value = !!data?.isUpdate;
-
-        if (unref(isUpdate)) {
-          setFieldsValue({
-            ...data.record,
-          });
-        }
-        const treeData = await getDeptList();
-        updateSchema({
-          field: 'parentDept',
-          componentProps: { treeData },
-        });
-      });
-
-      const getTitle = computed(() => (!unref(isUpdate) ? '新增部门' : '编辑部门'));
-
-      async function handleSubmit() {
-        try {
-          const values = await validate();
-          setModalProps({ confirmLoading: true });
-          // TODO custom api
-          console.log(values);
-          closeModal();
-          emit('success');
-        } finally {
-          setModalProps({ confirmLoading: false });
-        }
-      }
-
-      return { registerModal, registerForm, getTitle, handleSubmit };
-    },
-  });
-</script>

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

@@ -1,96 +1,97 @@
 <template>
   <div>
     <BasicTable @register="registerTable">
-      <template #action="{ record }">
+      <!-- <template #action="{ record }">
         <TableAction
           :actions="[
             {
-              icon: 'clarity:note-edit-line',
-              onClick: handleEdit.bind(null, record),
+              // 使用组件形式引用SVG图标
+              icon: IconData,
+              onClick: handleGoToPage.bind(record),
+            },
+            {
+              icon: IconInfo,
+              onClick: handleGoToPage.bind(record),
             },
             {
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDelete.bind(null, record),
-              },
+              icon: IconChart,
+              onClick: handleGoToPage.bind(record),
             },
           ]"
         />
+      </template> -->
+      <template #action="{ record }">
+        <div class="action-buttons">
+          <button @click="handleGoToPage(record,'/basicInfo/accessStatistics')" class="action-btn">
+            <img src="@/assets/images/basicInfo/minesInfo/icon-data.svg" class="action-icon" />
+          </button>
+          <button @click="handleGoToPage(record,'/basicInfo/accessStatistics')" class="action-btn">
+            <img src="@/assets/images/basicInfo/minesInfo/icon-info.svg" class="action-icon" />
+          </button>
+          <button @click="handleGoToPage(record,'/basicInfo/accessStatistics')" class="action-btn">
+            <img src="@/assets/images/basicInfo/minesInfo/icon-chart.svg" class="action-icon" />
+          </button>
+        </div>
       </template>
     </BasicTable>
-    <DeptModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
 
+<script setup lang="ts">
+  import { useRouter } from 'vue-router';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { columns, searchFormSchema, minesData } from './minesInfo.data';
 
-  import { useModal } from '/@/components/Modal';
-  import DeptModal from './DeptModal.vue';
-
-  import { columns, searchFormSchema, minesData } from './dept.data';
-
-  export default defineComponent({
-    name: 'MinesInfo',
-    components: { BasicTable, DeptModal, TableAction },
-    setup() {
-      const [registerModal, { openModal }] = useModal();
-      const [registerTable, { reload }] = useTable({
-        // api: getDeptList,
-        dataSource: minesData,
-        columns,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchema,
-        },
-        pagination: false,
-        striped: false,
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        showIndexColumn: false,
-        canResize: false,
-        actionColumn: {
-          width: 80,
-          title: '操作',
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: undefined,
-        },
-      });
-
-      function handleCreate() {
-        openModal(true, {
-          isUpdate: false,
-        });
-      }
-
-      function handleEdit(record: Recordable) {
-        openModal(true, {
-          record,
-          isUpdate: true,
-        });
-      }
-
-      function handleDelete(record: Recordable) {
-        console.log(record);
-      }
-
-      function handleSuccess() {
-        reload();
-      }
-
-      return {
-        registerTable,
-        registerModal,
-        handleCreate,
-        handleEdit,
-        handleDelete,
-        handleSuccess,
-      };
+  // 路由实例
+  const router = useRouter();
+  // 注册表格并获取相关方法
+  const [registerTable] = useTable({
+    dataSource: minesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 180,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
     },
   });
+
+  /**
+   * 通用页面跳转方法
+   * @param record 当前行数据
+   * @param path 目标路径
+   */
+  function handleGoToPage(record: any, path: string) {
+    // 跳转时携带当前煤矿的编号作为参数（根据实际需求调整携带的参数）
+    router.push({
+      path,
+      // query: {
+      //   orderNo: record.orderNo, // 煤矿编号
+      //   mineName: record.mineName // 煤矿名称
+      // }
+    });
+  }
 </script>
+<style lang="less" scoped>
+  .action-btn {
+    cursor: pointer;
+    margin-right: 10px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+</style>

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

@@ -18,7 +18,7 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '煤矿简称',
-    dataIndex: 'mineAbbreviation',
+    dataIndex: 'mineNameAbbr',
   },
   {
     title: '生产状态',
@@ -65,7 +65,7 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 6 },
   },
   {
-    field: 'mineAbbreviation',
+    field: 'mineNameAbbr',
     label: '煤矿简称',
     component: 'Input',
     colProps: { span: 6 },
@@ -135,60 +135,12 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
-export const formSchema: FormSchema[] = [
-  {
-    field: 'deptName',
-    label: '部门名称11111111',
-    component: 'Input',
-    required: true,
-  },
-  {
-    field: 'parentDept',
-    label: '上级部门',
-    component: 'TreeSelect',
-
-    componentProps: {
-      replaceFields: {
-        title: 'deptName',
-        key: 'id',
-        value: 'id',
-      },
-      getPopupContainer: () => document.body,
-    },
-    required: true,
-  },
-  {
-    field: 'orderNo',
-    label: '排序',
-    component: 'InputNumber',
-    required: true,
-  },
-  {
-    field: 'status',
-    label: '状态',
-    component: 'RadioButtonGroup',
-    defaultValue: '0',
-    componentProps: {
-      options: [
-        { label: '启用', value: '0' },
-        { label: '停用', value: '1' },
-      ],
-    },
-    required: true,
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    component: 'InputTextArea',
-  },
-];
-
 export const minesData = [
   {
     orderNo:'61082400879',
     enforcement:'执法二处',
     mineName:'府谷县能源有限公司古城一号煤矿',
-    mineAbbreviation:'府谷县一号煤矿',
+    mineNameAbbr:'府谷县一号煤矿',
     productStatus:'0',
     riskLevel:'0',
     connectStatus:'0',
@@ -201,7 +153,7 @@ export const minesData = [
     orderNo:'61082400878',
     enforcement:'执法二处',
     mineName:'府谷县能源有限公司古城二号煤矿',
-    mineAbbreviation:'府谷县二号煤矿',
+    mineNameAbbr:'府谷县二号煤矿',
     productStatus:'0',
     riskLevel:'0',
     connectStatus:'0',