[Mod 0000]修改矿山基础信息下页面样式和逻辑

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

@@ -8,14 +8,6 @@ import { BasicColumn } from '/@/components/Table/src/types/table';
  */
 export function getAccessStatisticsColumns(): BasicColumn[] {
   return [
-    {
-      title: '序号',
-      dataIndex: 'id',
-      width: 80,
-      fixed: 'left',
-      align: 'center',
-      customRender: ({ index }: { index: number }) => `${index + 1}`,
-    },
     {
       title: '区域',
       dataIndex: 'name',

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

@@ -16,9 +16,7 @@
         api: getGoafAccessCount,
         columns: getAccessStatisticsColumns(),
         pagination: true,
-        showIndexColumn: false,
-        // 合计行样式高亮（区分普通数据行）
-        rowClassName: (record) => (record.region === '合计' ? 'bg-gray-50 font-medium' : ''),
+        showIndexColumn: true,
       });
 
       return {

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

@@ -5,111 +5,96 @@ import { h } from 'vue';
 /**
  * 密闭统计表格列配置
  */
-export function getClosedStatisticsColumns(): BasicColumn[] {
-  return [
-    {
-      title: '序号',
-      // dataIndex: 'code',
-      align: 'center',
-      customRender: ({ index }: { index: number }) => `${index + 1}`,
-    },
-    {
-      title: '区域',
-      dataIndex: 'name',
-      align: 'center',
-    //   width: 80,
-    },
-    {
-      title: '密闭总数',
-      dataIndex: 'mbStatusNum',
-      align: 'center',
-    },
-    {
-      title: '正常生产',
-      dataIndex: 'mbStatusNum0',
-      align: 'center',
-    },
-    {
-      title: '拟建矿井',
-      dataIndex: 'mbStatusNum1',
-      align: 'center',
-    },
-    {
-      title: '正常建设',
-      dataIndex: 'mbStatusNum2',
-      align: 'center',
-    },
-    {
-      title: '自行停产',
-      dataIndex: 'mbStatusNum3',
-      align: 'center',
-    },
-    {
-      title: '正在关闭',
-      dataIndex: 'mbStatusNum4',
-      align: 'center',
-    },
-    {
-      title: '责令停产',
-      dataIndex: 'mbStatusNum5',
-      align: 'center',
-    },
-    {
-      title: '责令停止',
-      dataIndex: 'mbStatusNum6',
-      align: 'center',
-    },
-    {
-      title: '已关闭',
-      dataIndex: 'mbStatusNum7',
-      align: 'center',
-    },
-    {
-      title: '长期停产',
-      dataIndex: 'mbStatusNum8',
-      align: 'center',
-    },
-    {
-      title: '长期停建',
-      dataIndex: 'mbStatusNum9',
-      align: 'center',
-    },
-    {
-      title: '停产整改',
-      dataIndex: 'mbStatusNum10',
-      align: 'center',
-    },
-    {
-      title: '长期停建(失联)',
-      dataIndex: 'mbStatusNum11',
-      align: 'center',
-    },
-    {
-      title: '停建整改',
-      dataIndex: 'mbStatusNum12',
-      align: 'center',
-    },
-    {
-      title: '自行停建',
-      dataIndex: 'mbStatusNum13',
-      align: 'center',
-    },
-    {
-      title: '正在关闭',
-      dataIndex: 'mbStatusNum14',
-      align: 'center',
-    },
-    {
-      title: '其他',
-      dataIndex: 'mbStatusNumQt',
-      align: 'center',
-    },
-    {
-      title: '操作',
-      dataIndex: 'operation',
-      align: 'center',
-      // 渲染“查看”图标（匹配图片中的眼睛按钮）
-      customRender: () => h(EyeOutlined, { style: { cursor: 'pointer' }, onClick: () => alert('查看详情') }),
-    },
-  ];
-}
+export const dataColumns: BasicColumn[] = [
+  {
+    title: '区域',
+    dataIndex: 'name',
+    align: 'center',
+  //   width: 80,
+  },
+  {
+    title: '密闭总数',
+    dataIndex: 'mbStatusNum',
+    align: 'center',
+  },
+  {
+    title: '正常生产',
+    dataIndex: 'mbStatusNum0',
+    align: 'center',
+  },
+  {
+    title: '拟建矿井',
+    dataIndex: 'mbStatusNum1',
+    align: 'center',
+  },
+  {
+    title: '正常建设',
+    dataIndex: 'mbStatusNum2',
+    align: 'center',
+  },
+  {
+    title: '自行停产',
+    dataIndex: 'mbStatusNum3',
+    align: 'center',
+  },
+  {
+    title: '正在关闭',
+    dataIndex: 'mbStatusNum4',
+    align: 'center',
+  },
+  {
+    title: '责令停产',
+    dataIndex: 'mbStatusNum5',
+    align: 'center',
+  },
+  {
+    title: '责令停止',
+    dataIndex: 'mbStatusNum6',
+    align: 'center',
+  },
+  {
+    title: '已关闭',
+    dataIndex: 'mbStatusNum7',
+    align: 'center',
+  },
+  {
+    title: '长期停产',
+    dataIndex: 'mbStatusNum8',
+    align: 'center',
+  },
+  {
+    title: '长期停建',
+    dataIndex: 'mbStatusNum9',
+    align: 'center',
+  },
+  {
+    title: '停产整改',
+    dataIndex: 'mbStatusNum10',
+    align: 'center',
+  },
+  {
+    title: '长期停建(失联)',
+    dataIndex: 'mbStatusNum11',
+    align: 'center',
+  },
+  {
+    title: '停建整改',
+    dataIndex: 'mbStatusNum12',
+    align: 'center',
+  },
+  {
+    title: '自行停建',
+    dataIndex: 'mbStatusNum13',
+    align: 'center',
+  },
+  {
+    title: '正在关闭',
+    dataIndex: 'mbStatusNum14',
+    align: 'center',
+  },
+  {
+    title: '其他',
+    dataIndex: 'mbStatusNumQt',
+    align: 'center',
+  },
+];

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

@@ -1,40 +1,66 @@
 <template>
-  <div class="p-4">
     <!-- 表格：适配多列，设置横向滚动 & 边框 -->
-    <BasicTable 
-      @register="registerTable" 
-      bordered 
-      :scroll="{ x: 'max-content' }" 
-      class="closed-statistics-table"
-    />
-  </div>
+    <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
+      <template #action="{ record }">
+        <button @click="handleGoToPage(record, `/sealed/${record.code}`)" class="action-btn">
+          <SvgIcon name="view" />
+        </button>
+      </template>
+  </BasicTable>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { getClosedStatisticsColumns } from './closed.data';
-// 引入接口（后续替换为真实接口）
-import { getClosedAccessCount } from '../basicInfo.api';
+<script setup lang="ts">
+  import { useRouter } from 'vue-router';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { dataColumns } from './closed.data';
+  import { getClosedAccessCount } from '../basicInfo.api';
+  import { SvgIcon } from '/@/components/Icon';
 
-export default defineComponent({
-  components: { BasicTable },
-  setup() {
-    // 注册表格
-    const [registerTable] = useTable({
-      api: getClosedAccessCount, // 密闭统计接口
-      columns: getClosedStatisticsColumns(),
-      pagination: true, // 无分页
-      showIndexColumn: false, // 关闭默认序号列，使用自定义序号列
-    });
+  // 路由实例
+  const router = useRouter();
+  // 注册表格并获取相关方法
+  const [registerTable] = useTable({
+    title: '密闭统计表格',
+    api: getClosedAccessCount, // 密闭统计接口
+    columns: dataColumns,
+    pagination: true,
+    useSearchForm: false,
+    // showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    // canResize: false,
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  });
 
-    return {
-      registerTable,
-    };
-  },
-});
-</script>
+  /**
+   * 通用页面跳转方法
+   * @param record 当前行数据
+   * @param path 目标路径
+   */
+  function handleGoToPage(record: any, path: string) {
+    // 跳转时携带当前煤矿的编号作为参数（根据实际需求调整携带的参数）
+    router.push({
+      path,
+      // query: {
+      //   orderNo: record.orderNo, // 煤矿编号
+      //   mineName: record.mineName // 煤矿名称
+      // }
+    });
+  }
+</script>>
 
-<style scoped>
+<style lang="less" scoped>
+  .action-btn {
+    cursor: pointer;
+    margin-right: 10px;
 
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 </style>

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

@@ -57,7 +57,7 @@
           <component 
             :is="getComponent(schema.component)"
             v-model:value="currentRecord[schema.field]" 
-            :disabled="mode === 'edit' && schema.field === 'mineName'" 
+            :disabled="mode === 'edit' && schema.field === 'mineCode'" 
             v-bind="schema.componentProps"
             :placeholder="`请输入${schema.label}`"
             style="width: 100%"
@@ -110,109 +110,127 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, unref } from 'vue';
+import { ref, computed } from 'vue';
 import { BasicModal, useModalInner } from '/@/components/Modal';
 import { 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 { Button as AButton, Select, Input, DatePicker } from 'ant-design-vue';
 import { PlusOutlined } from '@ant-design/icons-vue';
-import dayjs, { Dayjs } from 'dayjs'; // 引入dayjs处理日期
+import dayjs, { Dayjs } from 'dayjs';
+// 请根据实际项目路径调整 MineCascader 引入路径
+import MineCascader from '/@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
 
-// 组件映射 - 增加Select组件支持
+// 组件映射表
 const componentMap = {
   Input,
   DatePicker,
-  Select
+  Select,
+  MineCascader
 };
 
-const emit = defineEmits(['success', 'register']);
+// 定义事件发射
+const emit = defineEmits(['success']);
 
-// 模式区分：view/edit/add
+// 模态框模式：查看/编辑/新增
 const mode = ref<'view' | 'edit' | 'add'>('view');
+// 当前记录数据
 const currentRecord = ref<any>({
-  mineLinkStatus: '',
+  mineCode: '',
+  mineLinkStatus: '0',
   queJson: [],
+  isOk: false,
+  updateTime: '',
+  createTime: ''
 });
+// 问题列表
 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: '',
+    mineCode: '',
     mineLinkStatus: '0',
     queJson: [],
+    isOk: false,
+    updateTime: '',
+    createTime: ''
   };
   
   // 初始化问题列表
   if (mode.value === 'add') {
-    // 新增模式：空表单
+    // 新增模式：初始化一条空数据
     queList.value = [{
       orderNum: '1',
       goafName: '',
       queCon: '',
       startTime: null,
       endTime: null,
-      param: '',
+      param: ''
     }];
   } else {
-    // 编辑/查看模式：使用传入数据或默认数据
-    const rawData = currentRecord.value?.queJson 
-      ? JSON.parse(currentRecord.value.queJson)
-      : [];
-    console.log(rawData);
-    
-    // 转换日期格式：字符串 -> dayjs对象（供DatePicker使用）
-    queList.value = rawData.map((item: any) => ({
-      ...item,
-      startTime: item.startTime ? dayjs(item.startTime) : null,
-      endTime: item.endTime ? dayjs(item.endTime) : null,
-    }));
+    // 编辑/查看模式：解析已有问题数据
+    try {
+      const rawData = currentRecord.value?.queJson 
+        ? (typeof currentRecord.value.queJson === 'string' 
+          ? JSON.parse(currentRecord.value.queJson) 
+          : currentRecord.value.queJson)
+        : [];
+      // 转换日期格式为dayjs对象（适配DatePicker）
+      queList.value = rawData.map((item: any) => ({
+        ...item,
+        startTime: item.startTime ? dayjs(item.startTime) : null,
+        endTime: item.endTime ? dayjs(item.endTime) : null
+      }));
+    } catch (error) {
+      console.error('解析问题数据失败:', error);
+      queList.value = [{
+        orderNum: '1',
+        goafName: '',
+        queCon: '',
+        startTime: null,
+        endTime: null,
+        param: ''
+      }];
+    }
   }
 });
 
-// 弹框标题
+// 模态框标题计算属性
 const getTitle = computed(() => {
-  const titles = {
+  const titleMap = {
     view: '质量问题详情',
     edit: '编辑质量问题',
-    add: '新增质量问题',
+    add: '新增质量问题'
   };
-  return titles[mode.value];
+  return titleMap[mode.value];
 });
 
-// 新增问题
+// 新增问题项
 const addNewItem = () => {
   const newItem = {
     orderNum: (queList.value.length + 1).toString(),
@@ -220,12 +238,12 @@ const addNewItem = () => {
     queCon: '',
     startTime: null,
     endTime: null,
-    param: '',
+    param: ''
   };
   queList.value.push(newItem);
 };
 
-// 删除问题
+// 删除问题项
 const removeItem = (index: number) => {
   queList.value.splice(index, 1);
   queList.value.forEach((item, i) => {
@@ -233,28 +251,33 @@ const removeItem = (index: number) => {
   });
 };
 
-// 提交处理
+// 提交表单处理
 async function handleSubmit() {
   try {
     setModalProps({ confirmLoading: true });
-    // 转换日期为字符串
-    const submitData = queList.value.map((item) => ({
+    // 1. 处理问题列表数据（空日期字段置空，避免空字符串）
+    const submitQueList = 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') : '',
+      startTime: item.startTime ? item.startTime.format('YYYY-MM-DD HH:mm:ss') : null,
+      endTime: item.endTime ? item.endTime.format('YYYY-MM-DD HH:mm:ss') : null,
     }));
-    // 构造完整提交数据
+    // 2. 构造完整提交数据（修正 createTime/updateTime 逻辑）
+    const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
     const result = {
       ...currentRecord.value,
-      queJson: JSON.stringify(submitData),
-      // 新增模式自动设置为未解决
+      queJson: JSON.stringify(submitQueList),
+      // 新增模式：创建时间=当前时间，状态=未解决；编辑模式：保留原有创建时间
+      createTime: mode.value === 'add' ? now : (currentRecord.value.createTime || now),
+      // 无论新增/编辑，更新时间都为当前时间
+      updateTime: now,
+      // 新增模式默认未解决，编辑模式保留原有状态
       isOk: mode.value === 'add' ? false : currentRecord.value.isOk,
-      createTime: mode.value === 'add' ? dayjs().format('YYYY-MM-DD HH:mm:ss') : '',
-      // 当前时间作为更新时间
-      updateTime: mode.value === 'add' ? dayjs().format('YYYY-MM-DD HH:mm:ss') : currentRecord.value.handleTime,
     };
+    console.log('最终提交数据：', result);
     emit('success', result);
     closeModal();
+  } catch (error) {
+    console.error('提交失败：', error);
   } finally {
     setModalProps({ confirmLoading: false });
   }
@@ -262,12 +285,12 @@ async function handleSubmit() {
 </script>
 
 <style scoped>
-/* 样式部分保持不变 */
 .que-container {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
+
 .que-status {
   display: flex;
   width: 100%;
@@ -277,23 +300,27 @@ async function handleSubmit() {
   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;
@@ -305,26 +332,32 @@ async function handleSubmit() {
   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;
@@ -333,8 +366,11 @@ async function handleSubmit() {
   padding-bottom: 8px;
   border-bottom: 1px dashed #e8e8e8;
 }
+
 .que-details {
+  width: 100%;
 }
+
 .que-field {
   display: flex;
   align-items: center;
@@ -342,24 +378,29 @@ async function handleSubmit() {
   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;
@@ -370,28 +411,35 @@ async function handleSubmit() {
   flex-direction: column;
   gap: 16px;
 }
+
 .mine-base-info {
   padding: 12px 16px;
   border: 1px solid #cad2e0;
   border-radius: 5px;
   background-color: #f8f9fc;
 }
+
 .edit-fields {
+  width: 100%;
 }
+
 .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;

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

@@ -1,25 +1,34 @@
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
 
 // 生产状态映射表（扩展所有状态）
-const productionStatusMap: Record<string | number, { text: string; color: string }> = {
-  0: { text: '拟建矿井', color: 'blue' },
-  1: { text: '正常生产矿井', color: 'green' },
-  2: { text: '正常建设煤矿', color: 'green' },
-  3: { text: '自行停产矿井', color: 'green' },
-  4: { text: '正在关闭', color: 'green' },
-  5: { text: '责令停产整顿', color: 'green' },
-  6: { text: '责令停止建设', color: 'green' },
-  7: { text: '已关闭矿井', color: 'green' },
-  8: { text: '长期停产矿井', color: 'green' },
-  9: { text: '长期停建矿井', color: 'green' },
-  10: { text: '停产整改矿井', color: 'green' },
-  11: { text: '长期停建无法联系', color: 'green' },
-  12: { text: '停建整改', color: 'green' },
-  13: { text: '自行停建', color: 'green' },
-  14: { text: '正在实施关闭', color: 'green' },
-  15: { text: '已关闭矿井', color: 'green' },
+const productionStatusMap: Record<string | number, { label: string; value: number; color: string }> = {
+  0: { label: '正常生产矿井', value: 0, color: 'green' },
+  1: { label: '拟建矿井', value: 1, color: 'blue' },
+  2: { label: '正常建设煤矿', value: 2, color: 'green' },
+  3: { label: '自行停产矿井', value: 3, color: 'green' },
+  4: { label: '正在关闭', value: 4, color: 'green' },
+  5: { label: '责令停产整顿', value: 5, color: 'green' },
+  6: { label: '责令停止建设', value: 6, color: 'green' },
+  7: { label: '已关闭矿井', value: 7, color: 'green' },
+  8: { label: '长期停产矿井', value: 8, color: 'green' },
+  9: { label: '长期停建矿井', value: 9, color: 'green' },
+  10: { label: '停产整改矿井', value: 10, color: 'green' },
+  11: { label: '长期停建无法联系', value: 11, color: 'green' },
+  12: { label: '停建整改', value: 12, color: 'green' },
+  13: { label: '自行停建', value: 13, color: 'green' },
+  14: { label: '正在实施关闭', value: 14, color: 'green' },
+  // 15: { label: '已关闭矿井', value: 15, color: 'green' },
+};
+
+// 颜色映射
+const colorHexMap: Record<string, string> = {
+  blue: '#1890ff',
+  green: '#208840',
+  gold: '#faad14',
+  red: '#f5222d',
+  gray: '#8c8c8c',
+  black: '#000000',
 };
 // 解析queJson并拼接orderNum+queCon的辅助函数
 const formatQueJson = (queJsonStr: string) => {
@@ -37,11 +46,6 @@ const formatQueJson = (queJsonStr: string) => {
   }
 };
 
-// 通用空值处理函数（非在线状态的空值统一显示「—」）
-const formatEmptyValue = (value: any) => {
-  return value === null || value === undefined || value === '' || /^\s*$/.test(String(value));
-};
-
 /** 表格列配置 */
 export const columns: BasicColumn[] = [
   {
@@ -59,11 +63,10 @@ export const columns: BasicColumn[] = [
     dataIndex: 'mineProStatus',
     width: 120,
     customRender: ({ record }) => {
-      // 空值处理
-      // 状态映射 + 标签渲染
-      const status = String(record.mineProStatus);
-      const { text, color } = productionStatusMap[status] || { text: '未知状态', color: 'gray' };
-      return h(Tag, { color }, () => text);
+      // 空值/异常值处理
+      const status = record.mineProStatus;
+      const { label, color } = productionStatusMap[status] || { label: '未知状态', color: 'balck' };
+      return h('span', { style: { color: colorHexMap[color] || colorHexMap.gray } }, label);
     },
   },
   {
@@ -71,12 +74,14 @@ export const columns: BasicColumn[] = [
     dataIndex: 'mineLinkStatus',
     width: 100,
     customRender: ({ record }) => {
-      // 未连接/空值 显示「/」
-      // 状态映射 + 标签渲染
-      const status = String(record.mineLinkStatus);
-      const text = status === '1' ? '在线' : '离线';
-      const color = status === '1' ? 'green' : 'red';
-      return h(Tag, { color }, () => text);
+      console.log(record.mineLinkStatus);
+      const status = record.mineLinkStatus;
+      if (status === undefined || status === null) {
+        return h('span', { style: { color: colorHexMap.black } }, '/');
+      }
+      const text = status === 1 ? '在线' : '离线';
+      const textColor = status === 1 ? colorHexMap.green : colorHexMap.red;
+      return h('span', { style: { color: textColor } }, text);
     },
   },
   {
@@ -89,38 +94,22 @@ export const columns: BasicColumn[] = [
       const displayText = formatQueJson(text);
       return h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [
         h('span', { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, displayText),
-        h(
-          'button',
-          {
-            onClick: () => {
-              record.onViewDetail?.(record);
-            },
-            title: '查看详情',
-            style: {
-              padding: '5px',
-            },
-          },
-          [
-            h('div', {
-              style: {
-                background: `url('/@/assets/images/basicInfo/dataQuality/icon-view.svg')`,
-                width: '16px',
-                height: '16px',
-                backgroundSize: 'contain',
-                backgroundRepeat: 'no-repeat',
-              },
-              class: 'action-icon',
-              alt: '查看详情',
-            }),
-          ]
-        ),
       ]);
     },
+    slots: {
+      customRender : 'queJson'
+    }
   },
   {
     title: '当前状态',
     dataIndex: 'isOk',
     width: 100,
+    customRender: ({ record }) => {
+      const status = record.isOk;
+      const text = status ? '已解决' : '未解决';
+      const textColor = status ? colorHexMap.green : colorHexMap.red;
+      return h('span', { style: { color: textColor } }, text);
+    },
   },
   {
     title: '处理时间',
@@ -132,11 +121,11 @@ export const columns: BasicColumn[] = [
 /** 查询表单配置 */
 export const searchFormSchema: FormSchema[] = [
   {
-    field: 'mineName',
+    field: 'mineCode',
     label: '煤矿名称',
-    component: 'Input',
+    component: 'MineCascader',
     colProps: { span: 6 },
-    // groupName: '常规查询',
+    groupName: '常规查询',
   },
   {
     field: 'mineNameAbbr',
@@ -157,91 +146,35 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
-    groupName: '高级查询',
-  },
-  {
-    field: 'isConnected',
-    label: '是否需要接入',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { label: '否', value: '0' },
-        { label: '是', value: '1' },
-      ],
-    },
-    colProps: { span: 6 },
-    groupName: '高级查询',
+    groupName: '常规查询',
   },
 
   {
-    field: 'status',
+    field: 'mineLinkStatus',
     label: '在线状态',
     component: 'Select',
     componentProps: {
       options: [
         { label: '离线', value: '0' },
         { label: '在线', value: '1' },
+        { label: '未连接', value: '2' },
       ],
     },
     colProps: { span: 6 },
-    groupName: '高级查询',
-  },
-  {
-    field: 'riskLevel',
-    label: '风险等级',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { label: 'Ⅰ类容易自燃', value: '0' },
-        { label: 'Ⅱ类自燃', value: '1' },
-        { label: 'Ⅲ类不易自燃', value: '2' },
-      ],
-    },
-    colProps: { span: 6 },
-    groupName: '高级查询',
-  },
-  {
-    field: 'statusChange',
-    label: '状态变化',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { label: '否', value: '0' },
-        { label: '是', value: '1' },
-      ],
-    },
-    colProps: { span: 6 },
-    groupName: '高级查询',
+    groupName: '常规查询',
   },
 ];
 
-// 模拟煤矿选项数据
-export const mineOptions = [
-  { label: '神东集团布尔台煤矿', value: '神东集团布尔台煤矿' },
-  { label: '府谷县后安能源有限公司古城一号煤矿', value: '府谷县后安能源有限公司古城一号煤矿' },
-];
 // 模拟煤矿在线状态选项数据
 export const mineLinkStatusOptions = [
-  { label: '在线', value: '1' },
-  { label: '离线', value: '0' },
+  { label: '在线', value: 1 },
+  { label: '离线', value: 0 },
 ];
-export const topFormSchema = [
+export const topFormSchema: FormSchema[]= [
   {
-    field: 'mineName',
+    field: 'mineCode',
     label: '煤矿名称',
-    component: 'Select',
-    componentProps: {
-      options: mineOptions,
-    },
-    required: true,
-  },
-  {
-    field: 'mineLinkStatus',
-    label: '当前状态',
-    component: 'Select',
-    componentProps: {
-      options: mineLinkStatusOptions,
-    },
+    component: 'MineCascader',
     required: true,
   },
 ];

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

@@ -6,16 +6,50 @@
         <a-button type="primary" preIcon="mdi:page-next-outline" @click="handleOpenModal({}, 'add')"> 新增问题 </a-button>
       </div>
       <BasicTable style="padding: 0" @register="registerUnresolvedTable">
+        <template #queJson="{ record }">
+          <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
+            <!-- 文字span：添加 flex: 1 占据剩余空间，text-align: center 实现文字居中 -->
+            <span style="flex: 1; text-align: center;">
+              {{ record?.queJson ? formatQueJson(record.queJson) : '' }}
+            </span>
+            <!-- 按钮：无需额外样式，自然靠最右侧 -->
+            <button @click="record && handleOpenModal(record, 'view')" class="action-btn">
+              <SvgIcon name="view" />
+            </button>
+          </div>
+
+        </template>
         <template #action="{ record }">
           <button @click="handleOpenModal(record, 'edit')" class="action-btn">
             <SvgIcon name="edit" />
           </button>
-          <button @click="handleDeleteRecord(record)" class="action-btn">
-            <SvgIcon name="delete" />
-          </button>
-          <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
-            <SvgIcon name="resolved" />
-          </button>
+          <!-- 删除按钮 -->
+          <Popconfirm
+            title="删除确认"
+            description="是否确认删除？"
+            okText="确认"
+            cancelText="取消"
+            @confirm="handleDeleteRecord(record)"
+            @cancel="handleCancel"
+            placement="top"
+          >
+            <button class="action-btn">
+              <SvgIcon name="delete" />
+            </button>
+          </Popconfirm>
+          <Popconfirm
+            title="标记已解决确认"
+            :description="getResolveDesc(record)"
+            okText="确认"
+            cancelText="取消"
+            @confirm="handleOKRecord(record)"
+            @cancel="handleCancel"
+            placement="top"
+          >
+            <button class="action-btn">
+              <SvgIcon name="resolved" />
+            </button>
+          </Popconfirm>
           <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
             <SvgIcon name="details" />
           </button>
@@ -23,7 +57,7 @@
       </BasicTable>
     </TabPane>
     <TabPane key="resolved" tab="已解决">
-      <BasicTable @register="registerResolvedTable">
+      <BasicTable style="padding: 0" @register="registerResolvedTable">
         <template #action="{ record }">
           <button @click="handleOpenModal(record, 'view')" class="action-btn">
             <SvgIcon name="details" />
@@ -38,35 +72,34 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, watch } from 'vue';
+  import { ref, nextTick, computed } from 'vue';
   import { useRouter } from 'vue-router';
   import { BasicTable, useTable } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
-  import { Tabs, TabPane } from 'ant-design-vue';
+  import { Tabs, TabPane, Popconfirm } from 'ant-design-vue';
   import DataQualityModal from './components/DataQualityModal.vue';
   import { SvgIcon } from '/@/components/Icon';
   import { columns, searchFormSchema } from './dataQuality.data';
   import { getDataQuaQueList, addDataQuaQue, deleteDataQuaQue, editDataQuaQue } from '../basicInfo.api';
+  import dayjs from 'dayjs'; 
   // 路由实例
   const router = useRouter();
   // 响应式数据
   const activeKey = ref('unresolved'); // 激活的Tab键
   const pageMode = ref('add');
   // 未解决表格注册
-  const [registerUnresolvedTable, { reload: reloadUnresolved }] = useTable({
+  const [registerUnresolvedTable, { reload: reloadUnresolved}] = useTable({
     api: getQuaQueListByTab(),
-    // dataSource: filteredUnresolved.value,
     columns,
     formConfig: {
       labelWidth: 120,
       schemas: searchFormSchema,
       showAdvancedButton: false,
-      schemaGroupNames: ['常规查询', '高级查询'],
+      schemaGroupNames: ['常规查询'],
     },
     useSearchForm: true,
     pagination: true,
     striped: true,
-    // bordered: true,
     showIndexColumn: false,
     indexColumnProps: {
       title: '序号',
@@ -78,12 +111,20 @@
       dataIndex: 'action',
       slots: { customRender: 'action' },
     },
+    immediate: true,
   });
 
   // 已解决表格注册
   const [registerResolvedTable, { reload: reloadResolved }] = useTable({
     api: getQuaQueListByTab(),
     columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询', '高级查询'],
+    },
+    useSearchForm: true,
     pagination: true,
     striped: true,
     bordered: true,
@@ -97,17 +138,28 @@
       dataIndex: 'action',
       slots: { customRender: 'action' },
     },
-    rowKey: 'id',
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-      showAdvancedButton: false,
-    },
+    immediate: true,
   });
 
   // 弹框注册
   const [registerModal, { openModal }] = useModal();
 
+  // 解析queJson并拼接orderNum+queCon的辅助函数
+  function formatQueJson (queJsonStr: string) {
+    // 空值处理
+    if (!queJsonStr) return '无质量问题';
+    try {
+      const queList = JSON.parse(queJsonStr);
+      // 非数组格式处理
+      if (!Array.isArray(queList)) return '问题格式异常';
+      // 拼接orderNum + queCon，多个问题用分号分隔
+      return queList.map((item) => `问题${item.orderNum || ''}:${item.queCon || ''}`).join('; ');
+    } catch (error) {
+      console.error('解析质量问题JSON失败:', error);
+      return '问题数据解析失败';
+    }
+  };
+
   /**
    * 根据标签获取表格数据（已解决/未解决）
    * @param result 弹框数据
@@ -118,15 +170,6 @@
       return await getDataQuaQueList({ ...params, isOk: isOk });
     };
   }
-  /**
-   * 表单搜索函数
-   * @param values 表单数据
-   */
-  function handleSearch(values: any) {
-    // 刷新表格
-    reloadUnresolved();
-    reloadResolved();
-  }
 
   /**
    * 打开弹框函数
@@ -144,16 +187,21 @@
    * 弹框结果处理函数
    * @param result 弹框数据
    */
-  function handleModalSuccess(result: any) {
-    if (pageMode.value === 'add') {
-      console.log(result);
-      addDataQuaQue(result);
-    } else if (pageMode.value === 'edit') {
-      editDataQuaQue(result);
+  async function handleModalSuccess(result: any) {
+    try{
+      if (pageMode.value === 'add') {
+        console.log(result);
+        await addDataQuaQue(result);
+      } else if (pageMode.value === 'edit') {
+        await editDataQuaQue(result);
+      }
+      // 刷新表格
+      await nextTick();
+      reloadUnresolved();
+      reloadResolved();
+    } catch(error) {
+      console.log('操作失败：', error);
     }
-    // 刷新表格
-    reloadUnresolved();
-    reloadResolved();
   }
   /**
    * 通用页面跳转方法
@@ -171,13 +219,54 @@
     });
   }
 
+  /**
+   * 气泡取消按钮通用回调
+   */
+  function handleCancel() {
+    // 取消操作，无逻辑（仅关闭气泡）
+  }
+
+  /**
+   * 生成已解决气泡提示文案：XX矿井XX问题是否解决了吗？
+   */
+  const getResolveDesc = computed(() => (record: any) => {
+    const mineName = record.mineName || '该'; // 矿井名称兜底
+    return `是否确认${mineName}矿井问题已解决？`;
+  });
+
   /**
    * 删除记录方法
    * @param record 当前行数据
    */
-  function handleDeleteRecord(record: any) {
-    deleteDataQuaQue({ id: record.id });
-    reloadUnresolved();
+  async function handleDeleteRecord(record: any) {
+    try {
+      await deleteDataQuaQue({ id: record.id });
+      await nextTick();
+      reloadUnresolved();
+    } catch (error) {
+      console.error('删除失败：', error);
+    }
+  }
+
+  /**
+   * 将记录改为已处理
+   * @param record 当前行数据
+   */
+  async function handleOKRecord(record: any) {
+    const copyRecord = {
+      ...record,
+      isOk : true,
+      updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
+    };
+    copyRecord.isOk = true
+    try {
+      await editDataQuaQue(copyRecord);
+      await nextTick();
+      reloadUnresolved();
+      reloadResolved();
+    }catch (error) {
+      console.error('操作失败：', error);
+    }
   }
 </script>
 

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

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <BasicTable @register="registerTable">
+  <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
     <template #action="{ record }">
       <button @click="handleGoToPage(record, `/sealed/${record.areaId}`)" class="action-btn">
         <SvgIcon name="data" />
@@ -8,7 +8,7 @@
       <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
         <SvgIcon name="info" />
       </button>
-      <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
+      <button @click="handleGoToPage(record, '/warningAnalysis/connectAnalysis')" class="action-btn">
         <SvgIcon name="chart" />
       </button>
     </template>
@@ -27,8 +27,7 @@
   // 注册表格并获取相关方法
   const [registerTable] = useTable({
     title: '矿山信息表格',
-    api: getMineData, // 密闭统计接口
-    // dataSource: minesData,
+    api: getMineData, // 数据统计接口
     columns,
     formConfig: {
       labelWidth: 120,

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

@@ -1,12 +1,11 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
 
 // 生产状态映射表（扩展所有状态）
 const productionStatusMap: Record<string | number, { text: string; color: string }> = {
-  0: { text: '拟建矿井', color: 'blue' },
-  1: { text: '正常生产矿井', color: 'green' },
+  0: { text: '正常生产矿井', color: 'green' },
+  1: { text: '拟建矿井', color: 'blue' },
   2: { text: '正常建设煤矿', color: 'green' },
   3: { text: '自行停产矿井', color: 'green' },
   4: { text: '正在关闭', color: 'green' },
@@ -20,12 +19,17 @@ const productionStatusMap: Record<string | number, { text: string; color: string
   12: { text: '停建整改', color: 'green' },
   13: { text: '自行停建', color: 'green' },
   14: { text: '正在实施关闭', color: 'green' },
-  15: { text: '已关闭矿井', color: 'green' },
+  // 15: { text: '已关闭矿井', color: 'green' },
 };
 
-// 通用空值处理函数（非在线状态的空值统一显示「—」）
-const formatEmptyValue = (value: any) => {
-  return value === null || value === undefined || value === '' || /^\s*$/.test(String(value));
+// 颜色映射
+const colorHexMap: Record<string, string> = {
+  blue: '#1890ff',
+  green: '#208840',
+  gold: '#faad14',
+  red: '#f5222d',
+  gray: '#8c8c8c',
+  black: '#000000',
 };
 
 export const columns: BasicColumn[] = [
@@ -49,39 +53,42 @@ export const columns: BasicColumn[] = [
     title: '生产状态',
     dataIndex: 'productionStatus',
     customRender: ({ record }) => {
-      // 空值处理
-      // 状态映射 + 标签渲染
-      const status = String(record.productionStatus);
-      const { text, color } = productionStatusMap[status] || { text: '未知状态', color: 'gray' };
-      return h(Tag, { color }, () => text);
+      // 空值/异常值处理
+      const status = String(record.productionStatus || '');
+      const { text, color } = productionStatusMap[status] || { text: '未知状态', color: 'balck' };
+      // 渲染普通span，仅设置文字颜色
+      return h('span', { style: { color: colorHexMap[color] || colorHexMap.gray } }, text);
     },
   },
   {
     title: '自燃情况',
-    dataIndex: 'riskLevel',
+    dataIndex: 'alarmLevel',
   },
   {
     title: '接入状态',
     dataIndex: 'accessStatus',
     customRender: ({ record }) => {
-      // 空值处理
-      // 状态映射 + 标签渲染
-      const status = String(record.accessStatus);
-      const text = status === '1' ? '已接入' : '未接入';
-      const color = status === '1' ? 'green' : 'gold'; // gold=黄色
-      return h(Tag, { color }, () => text);
+      // 空值/异常值处理
+      const status = String(record.accessStatus || '');
+      if (!status || status === 'undefined' || status === 'null') {
+        return h('span', { style: { color: colorHexMap.black } }, '/');
+      }
+      const text = status === '1' ? '接入' : '未接入';
+      const textColor = status === '1' ? colorHexMap.green : colorHexMap.gold;
+      return h('span', { style: { color: textColor } }, text);
     },
   },
   {
     title: '在线状态',
     dataIndex: 'status',
     customRender: ({ record }) => {
-      // 未连接/空值 显示「/」
-      // 状态映射 + 标签渲染
-      const status = String(record.status);
+      const status = String(record.status || '');
+      if (!status || status === 'undefined' || status === 'null') {
+        return h('span', { style: { color: colorHexMap.black } }, '/');
+      }
       const text = status === '1' ? '在线' : '离线';
-      const color = status === '1' ? 'green' : 'red';
-      return h(Tag, { color }, () => text);
+      const textColor = status === '1' ? colorHexMap.green : colorHexMap.red;
+      return h('span', { style: { color: textColor } }, text);
     },
   },
   {
@@ -125,13 +132,13 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 6 },
   },
   {
-    field: 'isConnected',
-    label: '是否需要接入',
+    field: 'accessStatus',
+    label: '接入状态',
     component: 'Select',
     componentProps: {
       options: [
-        { label: '否', value: '0' },
-        { label: '是', value: '1' },
+        { label: '接入', value: 1 },
+        { label: '未接入', value: 0 },
       ],
     },
     colProps: { span: 6 },
@@ -161,58 +168,4 @@ export const searchFormSchema: FormSchema[] = [
     },
     colProps: { span: 6 },
   },
-  {
-    field: 'statusChange',
-    label: '状态变化',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { label: '否', value: '0' },
-        { label: '是', value: '1' },
-      ],
-    },
-    colProps: { span: 6 },
-  },
-];
-
-export const minesData = [
-  {
-    mineCode: '61082400879',
-    managementName: '执法二处',
-    mineName: '府谷县能源有限公司古城一号煤矿',
-    mineNameAbbr: '府谷县一号煤矿',
-    productionStatus: '0', // 拟建矿井（蓝色）
-    riskLevel: '0',
-    accessStatus: '0', // 未接入（黄色）
-    status: '0', // 离线（红色）
-    yingjieNum: '0',
-    accessGoafNum: '0',
-    notAccessGoafNum: '0',
-  },
-  {
-    mineCode: '61082400878',
-    managementName: '执法二处',
-    mineName: '府谷县能源有限公司古城二号煤矿',
-    mineNameAbbr: '府谷县二号煤矿',
-    productionStatus: '1', // 正常生产矿井（绿色）
-    riskLevel: '0',
-    accessStatus: '1', // 已接入（绿色）
-    status: '1', // 在线（绿色）
-    yingjieNum: '0',
-    accessGoafNum: '0',
-    notAccessGoafNum: '0',
-  },
-  {
-    mineCode: '',
-    managementName: null,
-    mineName: undefined,
-    mineNameAbbr: '   ',
-    productionStatus: '', // 空值显示「—」
-    riskLevel: null,
-    accessStatus: undefined, // 空值显示「—」
-    status: '', // 未连接显示「/」
-    yingjieNum: null,
-    accessGoafNum: '   ',
-    notAccessGoafNum: undefined,
-  },
 ];