[Mod 0000] 基础信息各个页面及密闭检测页面样式调整及模拟对接

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

@@ -1,42 +1,40 @@
 <template>
-  <div class="data-quality-page">
-    <!-- Tab标签页 -->
-    <Tabs v-model:activeKey="activeKey" type="line" 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 style="padding: 0;" @register="registerUnresolvedTable">
-          <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>
-            <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
-              <SvgIcon name="details" />
-            </button>
-          </template>
-        </BasicTable>
-      </TabPane>
-      <TabPane key="resolved" tab="已解决">
-        <BasicTable @register="registerResolvedTable">
-          <template #action="{ record }">
-            <button @click="handleOpenModal(record, 'view')" class="action-btn">
-              <SvgIcon name="details" />
-            </button>
-          </template>
-        </BasicTable>
-      </TabPane>
-    </Tabs>
+  <!-- Tab标签页 -->
+  <Tabs v-model:activeKey="activeKey" class="data-quality-page" type="line">
+    <TabPane key="unresolved" tab="未解决">
+      <div class="add-button">
+        <a-button type="primary" preIcon="mdi:page-next-outline" @click="handleOpenModal({}, 'add')"> 新增问题 </a-button>
+      </div>
+      <BasicTable style="padding: 0" @register="registerUnresolvedTable">
+        <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>
+          <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
+            <SvgIcon name="details" />
+          </button>
+        </template>
+      </BasicTable>
+    </TabPane>
+    <TabPane key="resolved" tab="已解决">
+      <BasicTable @register="registerResolvedTable">
+        <template #action="{ record }">
+          <button @click="handleOpenModal(record, 'view')" class="action-btn">
+            <SvgIcon name="details" />
+          </button>
+        </template>
+      </BasicTable>
+    </TabPane>
+  </Tabs>
 
-    <!-- 处理弹框 -->
-    <DataQualityModal @register="registerModal" @success="handleModalSuccess" />
-  </div>
+  <!-- 处理弹框 -->
+  <DataQualityModal @register="registerModal" @success="handleModalSuccess" />
 </template>
 
 <script setup lang="ts">
@@ -47,8 +45,8 @@
   import { Tabs, TabPane } 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 { columns, searchFormSchema } from './dataQuality.data';
+  import { getDataQuaQueList, addDataQuaQue, deleteDataQuaQue, editDataQuaQue } from '../basicInfo.api';
   // 路由实例
   const router = useRouter();
   // 响应式数据
@@ -68,18 +66,18 @@
     useSearchForm: true,
     pagination: true,
     striped: true,
-    bordered: true,
+    // bordered: true,
     showIndexColumn: false,
     indexColumnProps: {
       title: '序号',
     },
+    canResize: false,
     actionColumn: {
-      width: 120,
+      width: 200,
       title: '操作',
       dataIndex: 'action',
       slots: { customRender: 'action' },
     },
-
   });
 
   // 已解决表格注册
@@ -110,7 +108,7 @@
   // 弹框注册
   const [registerModal, { openModal }] = useModal();
 
-   /**
+  /**
    * 根据标签获取表格数据（已解决/未解决）
    * @param result 弹框数据
    */
@@ -119,19 +117,18 @@
       const isOk = activeKey.value === 'resolved' ? true : false;
       return await getDataQuaQueList({ ...params, isOk: isOk });
     };
-  };
-   /**
+  }
+  /**
    * 表单搜索函数
    * @param values 表单数据
    */
   function handleSearch(values: any) {
-
     // 刷新表格
     reloadUnresolved();
     reloadResolved();
   }
 
-   /**
+  /**
    * 打开弹框函数
    * @param result 弹框数据
    */
@@ -148,10 +145,10 @@
    * @param result 弹框数据
    */
   function handleModalSuccess(result: any) {
-    if(pageMode.value === 'add') {
+    if (pageMode.value === 'add') {
       console.log(result);
       addDataQuaQue(result);
-    }else if(pageMode.value === 'edit') {
+    } else if (pageMode.value === 'edit') {
       editDataQuaQue(result);
     }
     // 刷新表格
@@ -179,14 +176,16 @@
    * @param record 当前行数据
    */
   function handleDeleteRecord(record: any) {
-    deleteDataQuaQue({id: record.id});
+    deleteDataQuaQue({ id: record.id });
     reloadUnresolved();
   }
 </script>
 
 <style scoped lang="less">
   .data-quality-page {
-    padding: 16px;
+    padding: 0 12px;
+    margin: 16px;
+    border: 1px solid @border-color-base;
     .ant-form {
       background-color: #fff;
     }

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

@@ -20,7 +20,7 @@
   import { BasicTable, useTable } from '/@/components/Table';
   import { columns, searchFormSchema } from './minesInfo.data';
   import { SvgIcon } from '/@/components/Icon';
-  import { getMineData } from '../basicInfo.api'
+  import { getMineData } from '../basicInfo.api';
 
   // 路由实例
   const router = useRouter();
@@ -34,7 +34,7 @@
       labelWidth: 120,
       schemas: searchFormSchema,
       showAdvancedButton: false,
-      schemaGroupNames: ['常规查询', '高级查询'],
+      schemaGroupNames: ['常规查询'],
     },
     pagination: true,
     useSearchForm: true,
@@ -50,8 +50,6 @@
     },
   });
 
-
-
   /**
    * 通用页面跳转方法
    * @param record 当前行数据

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

@@ -102,7 +102,7 @@ export const searchFormSchema: FormSchema[] = [
   {
     field: 'mineName',
     label: '煤矿名称',
-    component: 'Input',
+    component: 'MineCascader',
     colProps: { span: 6 },
   },
   {
@@ -110,7 +110,6 @@ export const searchFormSchema: FormSchema[] = [
     label: '煤矿简称',
     component: 'Input',
     colProps: { span: 6 },
-    groupName: '常规查询',
   },
   {
     field: 'productionStatus',
@@ -124,7 +123,6 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
-    groupName: '高级查询',
   },
   {
     field: 'isConnected',
@@ -137,7 +135,6 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
-    groupName: '高级查询',
   },
   {
     field: 'status',
@@ -150,7 +147,6 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
-    groupName: '高级查询',
   },
   {
     field: 'riskLevel',
@@ -164,7 +160,6 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
-    groupName: '高级查询',
   },
   {
     field: 'statusChange',
@@ -177,7 +172,6 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
-    groupName: '高级查询',
   },
 ];
 

src/views/monitor/sealedMonitor/index.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { BasicTable, useTable } from '/@/components/Table';
   import { Tabs, TabPane } from 'ant-design-vue';
   // 引入模拟数据
@@ -50,7 +50,11 @@
 
   // 注册实时数据表格
   const [registerRealtimeTable, { getForm }] = useTable({
-    api: getGoafData,
+    api: (params) =>
+      getGoafData(params).then((res) => {
+        if (res.length) return res;
+        return minesData;
+      }),
     beforeFetch(params) {},
     columns,
     formConfig: {
@@ -75,7 +79,14 @@
   // 注册历史数据表格
   const { tableContext, onExportXls } = useListPage({
     tableProps: {
-      api: getGoafHistory,
+      api: (params) =>
+        getGoafHistory(params)
+          .then((res) => {
+            return res;
+          })
+          .catch(() => {
+            return historicalMinesData;
+          }),
       beforeFetch(params) {},
       columns: historicalColumns,
       formConfig: {

src/views/monitor/sealedMonitor/monitor.api.ts

@@ -9,5 +9,5 @@ export function getGoafData(params: any) {
   return defHttp.post({ url: Api.getGoafData, params });
 }
 export function getGoafHistory(params: any) {
-  return defHttp.get({ url: Api.getGoafHistory, params });
+  return defHttp.get({ url: Api.getGoafHistory, params }, { errorMessageMode: 'none' });
 }

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

@@ -1,8 +1,9 @@
 import dayjs from 'dayjs';
-import { getMineData } from '../../system/algorithm/algorithm.api';
+import { getGoafList, getMineData } from '../../system/algorithm/algorithm.api';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { TreeItem } from '/@/components/Tree/index';
+import { getGoafData } from './monitor.api';
 
 // 实时数据相关
 export const columns: BasicColumn[] = [
@@ -80,20 +81,20 @@ export const searchFormSchema: FormSchema[] = [
   {
     field: 'mineCode',
     label: '煤矿名称',
-    component: 'ApiSelect',
+    component: 'MineCascader',
     colProps: { span: 6 },
-    componentProps: {
-      //请求api,返回结果{ result: { records: [{'id':'1',name:'scott'},{'id':'2',name:'小张'}] }}
-      api: () => getMineData({ pageNo: 1, pageSize: 999 }),
-      //数值转成String
-      numberToString: false,
-      //标题字段
-      labelField: 'mineName',
-      //值字段
-      valueField: 'id',
-      //返回结果字段
-      resultField: 'records',
-    },
+    // componentProps: {
+    //   //请求api,返回结果{ result: { records: [{'id':'1',name:'scott'},{'id':'2',name:'小张'}] }}
+    //   api: () => getMineData({ pageNo: 1, pageSize: 999 }),
+    //   //数值转成String
+    //   numberToString: false,
+    //   //标题字段
+    //   labelField: 'mineName',
+    //   //值字段
+    //   valueField: 'id',
+    //   //返回结果字段
+    //   resultField: 'records',
+    // },
   },
   {
     field: 'mineNameAbbr',
@@ -149,44 +150,6 @@ export const minesData = [
     explosionHazard: '低风险', // 爆炸危险性
     updateTime: '2025-11-17 15:00:40', // 更新时间
   },
-  {
-    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', // 更新时间
-  },
-  {
-    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', // 更新时间
-  },
 ];
 
 export const modalDetailsData: {} = {
@@ -425,7 +388,7 @@ export const historicalFormSchema: FormSchema[] = [
   {
     field: 'mineCode',
     label: '煤矿名称',
-    component: 'Input',
+    component: 'MineCascader',
     colProps: { span: 6 },
   },
   {
@@ -434,74 +397,87 @@ export const historicalFormSchema: FormSchema[] = [
     component: 'Input',
     colProps: { span: 6 },
   },
-  {
-    field: 'productStatus',
-    label: '生产状态',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { label: '拟建矿井', value: '0' },
-        { label: '正常生产矿井', value: '1' },
-        { label: '长期停产矿井', value: '1' },
-      ],
-    },
-    colProps: { span: 6 },
-  },
-  {
-    field: 'riskLevel',
-    label: '自燃情况',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { label: 'Ⅰ类容易自燃', value: '0' },
-        { label: 'Ⅱ类自燃', value: '1' },
-        { label: 'Ⅲ类不易自燃', value: '2' },
-      ],
-    },
-    colProps: { span: 6 },
-  },
-  {
-    field: 'coalSeam',
-    label: '所属煤层',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { label: '煤层1', value: '0' },
-        { label: '煤层2', value: '1' },
-        { label: '煤层3', value: '2' },
-      ],
-    },
-    colProps: { span: 6 },
-  },
+  // {
+  //   field: 'productStatus',
+  //   label: '生产状态',
+  //   component: 'Select',
+  //   componentProps: {
+  //     options: [
+  //       { label: '拟建矿井', value: '0' },
+  //       { label: '正常生产矿井', value: '1' },
+  //       { label: '长期停产矿井', value: '1' },
+  //     ],
+  //   },
+  //   colProps: { span: 6 },
+  // },
+  // {
+  //   field: 'riskLevel',
+  //   label: '自燃情况',
+  //   component: 'Select',
+  //   componentProps: {
+  //     options: [
+  //       { label: 'Ⅰ类容易自燃', value: '0' },
+  //       { label: 'Ⅱ类自燃', value: '1' },
+  //       { label: 'Ⅲ类不易自燃', value: '2' },
+  //     ],
+  //   },
+  //   colProps: { span: 6 },
+  // },
+  // {
+  //   field: 'coalSeam',
+  //   label: '所属煤层',
+  //   component: 'Select',
+  //   componentProps: {
+  //     options: [
+  //       { label: '煤层1', value: '0' },
+  //       { label: '煤层2', value: '1' },
+  //       { label: '煤层3', value: '2' },
+  //     ],
+  //   },
+  //   colProps: { span: 6 },
+  // },
   {
     field: 'goafId',
     label: '密闭名称',
-    component: 'Select',
+    component: 'ApiSelect',
     componentProps: {
-      options: [
-        { label: '密闭1', value: '0' },
-        { label: '密闭2', value: '1' },
-        { label: '密闭3', value: '2' },
-      ],
+      api: getGoafList,
+      //标题字段
+      labelField: 'devicePos',
+      //值字段
+      valueField: 'id',
+      //请求参数
+      params: {},
+      //返回结果字段
+      resultField: 'records',
     },
+    // required: true,
     colProps: { span: 6 },
   },
   {
-    field: 'startTime ',
+    field: 'startTime',
     label: '起始日期',
     component: 'DatePicker',
     componentProps: {
-      defaultPickerValue: dayjs().add(-1, 'day'),
+      //日期格式化，页面上显示的值
+      format: 'YYYY-MM-DD hh:mm:ss',
+      //返回值格式化（绑定值的格式）
+      valueFormat: 'YYYY-MM-DD hh:mm:ss',
     },
+    defaultValue: dayjs().add(-1, 'day').format('YYYY-MM-DD hh:mm:ss'),
     colProps: { span: 6 },
   },
   {
-    field: 'endTime ',
+    field: 'endTime',
     label: '结束日期',
     component: 'DatePicker',
     componentProps: {
-      defaultPickerValue: dayjs(),
+      //日期格式化，页面上显示的值
+      format: 'YYYY-MM-DD hh:mm:ss',
+      //返回值格式化（绑定值的格式）
+      valueFormat: 'YYYY-MM-DD hh:mm:ss',
     },
+    defaultValue: dayjs().format('YYYY-MM-DD hh:mm:ss'),
     colProps: { span: 6 },
   },
 ];
@@ -526,44 +502,6 @@ export const historicalMinesData = [
     explosionHazard: '低风险', // 爆炸危险性
     updateTime: '2025-12-22 15:00:40', // 更新时间
   },
-  {
-    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', // 更新时间
-  },
-  {
-    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', // 更新时间
-  },
 ];
 
 export const treeData: TreeItem[] = [