[Mod 0000] 基础信息及密闭分析下属页面修改表格代码

src/assets/images/common/icon-details.svg

@@ -1,8 +0,0 @@
-<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/components/Configurable/ModulePrimary.vue

@@ -94,7 +94,7 @@
   @import '/@/design/theme.less';
 
   .module-primary {
-    --image-module-title: url('/@/assets/images/sealedGoaf/views/home/module-title.png');
+    --image-module-title: url('/@/assets/images/sealedGoaf/module/module-title.png');
     position: absolute;
     width: 100%;
     height: 100%;

src/components/Table/src/BasicTable.vue

@@ -537,9 +537,11 @@
       .ant-table {
         background-color: unset;
 
+        &-container,
         &-content {
-          background-color: unset;
-          // background-color: @component-background;
+          // background-color: unset;
+          // background-color: @app-content-background;
+          background-color: @component-background;
 
           .ant-table-thead > tr > th {
             background-color: @table-thead-bg-color;

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

@@ -90,7 +90,7 @@ export function useTableScroll(
 
     bodyEl!.style.height = 'unset';
 
-    if (!unref(getCanResize) || ( !tableData || tableData.length === 0)) return;
+    if (!unref(getCanResize) || !tableData || tableData.length === 0) return;
 
     await nextTick();
     //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
@@ -135,7 +135,8 @@ export function useTableScroll(
     let height = bottomIncludeBody - (resizeHeightOffset || 0) - paddingHeight - paginationHeight - footerHeight - headerHeight;
     // update-begin--author:liaozhiyang---date:20240603---for【TV360X-861】列表查询区域不可往上滚动
     // 10+6(外层边距padding:10 + 内层padding-bottom:6)
-    height -= 16;
+    // 根据新布局进行了微调，现为43
+    height -= 43;
     // 代码逻辑说明: 【issues/8880】BasicTable组件在modal中适应高度
     try {
       // 当BasicTable在BasicModal容器中时,扣减容器底部高度
@@ -197,7 +198,7 @@ export function useTableScroll(
     // TODO props ?? 0;
     const NORMAL_WIDTH = maxColumnWidth ?? 150;
     // date-begin--author:liaozhiyang---date:20250716---for：【QQYUN-13122】有数十个字段时只展示2个字段，其余字段为ifShow:false会有滚动条
-    const columns = unref(columnsRef).filter((item) => !(item.defaultHidden == true || item.ifShow == false))
+    const columns = unref(columnsRef).filter((item) => !(item.defaultHidden == true || item.ifShow == false));
     // date-end--author:liaozhiyang---date:20250716---for：【QQYUN-13122】有数十个字段时只展示2个字段，其余字段为ifShow:false会有滚动条
     columns.forEach((item) => {
       width += Number.parseInt(item.width as string) || 0;

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

@@ -1,16 +1,11 @@
 <template>
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px;">
+    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px">
       <TabPane tab="实时监测" key="realtime">
         <div class="board-info">
           <div :key="index" v-for="(item, index) in boardData" class="board-item">
-            <MiniBoard 
-              type="E"
-              :label="item.label"
-              :value="item.value"
-              layout="label-top"
-            />
+            <MiniBoard type="E" :label="item.label" :value="item.value" layout="label-top" />
           </div>
         </div>
         <!-- 实时数据表格 -->
@@ -18,20 +13,20 @@
           <template #action="{ record }">
             <div class="action-buttons">
               <button @click="openModal(record, 'realtime')" class="action-btn">
-                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+                <SvgIcon name="details" />
               </button>
             </div>
           </template>
         </BasicTable>
       </TabPane>
-      
+
       <TabPane tab="历史数据" key="history">
         <!-- 历史数据表格 -->
         <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }">
           <template #action="{ record }">
             <div class="action-buttons">
               <button @click="openModal(record, 'history')" class="action-btn">
-                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+                <SvgIcon name="details" />
               </button>
             </div>
           </template>
@@ -42,104 +37,104 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, minesData , historicalMinesData  } from './airLeakStatus.data';
+  import { ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  // 引入模拟数据
+  import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './airLeakStatus.data';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
 
-// 注册实时数据表格
-const [registerRealtimeTable] = useTable({
-  dataSource: minesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 注册实时数据表格
+  const [registerRealtimeTable] = useTable({
+    dataSource: minesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: flex;
-  padding: 10px;
-  background-color: #fff;
-  margin: 0 10px;
-  gap: 10px;
-  box-sizing: border-box;
-}
-.board-item {
-  flex: 1;
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: flex;
+    padding: 10px;
+    background-color: #fff;
+    margin: 0 10px;
+    gap: 10px;
+    box-sizing: border-box;
+  }
+  .board-item {
+    flex: 1;
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+</style>

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

@@ -33,7 +33,7 @@
           <template #action="{ record }">
             <div class="action-buttons">
               <button @click="openModal(record, 'history')" class="action-btn">
-                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+                <SvgIcon name="details" />
               </button>
             </div>
           </template>
@@ -55,115 +55,115 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './autoFireAnalysis.data';
+  import { ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  // 引入模拟数据
+  import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './autoFireAnalysis.data';
+  import { SvgIcon } from '/@/components/Icon';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-// 注册实时数据表格
-const [registerRealtimeTable] = useTable({
-  dataSource: minesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  // 注册实时数据表格
+  const [registerRealtimeTable] = useTable({
+    dataSource: minesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-const handleOkEdit = () => {
-  visibleModal.value = false;
-};
-const handleCancelEdit = () => {
-  visibleModal.value = false;
-};
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
+  const handleOkEdit = () => {
+    visibleModal.value = false;
+  };
+  const handleCancelEdit = () => {
+    visibleModal.value = false;
+  };
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: grid;
-  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
-  gap: auto;
-  justify-content: start;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 10px;
-  margin: 0 10px;
-  gap: 100px;
-}
-.board-item {
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: grid;
+    grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+    gap: auto;
+    justify-content: start;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px;
+    margin: 0 10px;
+    gap: 100px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+</style>

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

@@ -33,7 +33,7 @@
           <template #action="{ record }">
             <div class="action-buttons">
               <button @click="openModal(record, 'history')" class="action-btn">
-                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+                <SvgIcon name="details" />
               </button>
             </div>
           </template>
@@ -55,115 +55,115 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './fireAreaJudgeAnalysis.data';
+  import { ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  // 引入模拟数据
+  import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './fireAreaJudgeAnalysis.data';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-// 注册实时数据表格
-const [registerRealtimeTable] = useTable({
-  dataSource: minesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 120,
-    title: '详情',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  // 注册实时数据表格
+  const [registerRealtimeTable] = useTable({
+    dataSource: minesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: '详情',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-const handleOkEdit = () => {
-  visibleModal.value = false;
-};
-const handleCancelEdit = () => {
-  visibleModal.value = false;
-};
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
+  const handleOkEdit = () => {
+    visibleModal.value = false;
+  };
+  const handleCancelEdit = () => {
+    visibleModal.value = false;
+  };
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: grid;
-  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
-  gap: auto;
-  justify-content: start;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 10px;
-  margin: 0 10px;
-  gap: 100px;
-}
-.board-item {
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: grid;
+    grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+    gap: auto;
+    justify-content: start;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px;
+    margin: 0 10px;
+    gap: 100px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+</style>

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

@@ -33,7 +33,7 @@
           <template #action="{ record }">
             <div class="action-buttons">
               <button @click="openModal(record, 'history')" class="action-btn">
-                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+                <SvgIcon name="details" />
               </button>
             </div>
           </template>
@@ -55,115 +55,115 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './overlimitAlarm.data';
+  import { ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  // 引入模拟数据
+  import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './overlimitAlarm.data';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-// 注册实时数据表格
-const [registerRealtimeTable] = useTable({
-  dataSource: minesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 120,
-    title: '详情',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  // 注册实时数据表格
+  const [registerRealtimeTable] = useTable({
+    dataSource: minesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: '详情',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-const handleOkEdit = () => {
-  visibleModal.value = false;
-};
-const handleCancelEdit = () => {
-  visibleModal.value = false;
-};
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
+  const handleOkEdit = () => {
+    visibleModal.value = false;
+  };
+  const handleCancelEdit = () => {
+    visibleModal.value = false;
+  };
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: grid;
-  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
-  gap: auto;
-  justify-content: start;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 10px;
-  margin: 0 10px;
-  gap: 100px;
-}
-.board-item {
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: grid;
+    grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+    gap: auto;
+    justify-content: start;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px;
+    margin: 0 10px;
+    gap: 100px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+</style>

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

@@ -38,7 +38,7 @@
           <template #action="{ record }">
             <div class="action-buttons">
               <button @click="openModal(record, 'history')" class="action-btn">
-                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+                <SvgIcon name="details" />
               </button>
             </div>
           </template>
@@ -72,124 +72,124 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './pressureDiffAnalysis.data';
+  import { ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  // 引入模拟数据
+  import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './pressureDiffAnalysis.data';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-const visibleresolveModal = ref(false);
-const resolveValue = ref('');
-// 注册实时数据表格
-const [registerRealtimeTable] = useTable({
-  dataSource: minesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 120,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  const visibleresolveModal = ref(false);
+  const resolveValue = ref('');
+  // 注册实时数据表格
+  const [registerRealtimeTable] = useTable({
+    dataSource: minesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 120,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'resolved') {
-    visibleresolveModal.value = true;
-    record.isResolved = resolveValue.value || '';
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-const handleOkEdit = () => {
-  visibleresolveModal.value = false;
-};
-const handleCancelEdit = () => {
-  visibleresolveModal.value = false;
-};
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'resolved') {
+      visibleresolveModal.value = true;
+      record.isResolved = resolveValue.value || '';
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
+  const handleOkEdit = () => {
+    visibleresolveModal.value = false;
+  };
+  const handleCancelEdit = () => {
+    visibleresolveModal.value = false;
+  };
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: grid;
-  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
-  gap: auto;
-  justify-content: start;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 10px;
-  margin: 0 10px;
-  gap: 100px;
-}
-.board-item {
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
-.action-text {
-  font-size: 12px;
-  color: #6398fc;
-}
-</style>
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: grid;
+    grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+    gap: auto;
+    justify-content: start;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px;
+    margin: 0 10px;
+    gap: 100px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+  .action-text {
+    font-size: 12px;
+    color: #6398fc;
+  }
+</style>

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

@@ -33,7 +33,7 @@
           <template #action="{ record }">
             <div class="action-buttons">
               <button @click="openModal(record, 'history')" class="action-btn">
-                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+                <SvgIcon name="details" />
               </button>
             </div>
           </template>
@@ -55,115 +55,115 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './sealRiskJudgeAnalysis.data';
+  import { ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  // 引入模拟数据
+  import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './sealRiskJudgeAnalysis.data';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-// 注册实时数据表格
-const [registerRealtimeTable] = useTable({
-  dataSource: minesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 120,
-    title: '详情',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const visibleModal = ref(false);
+  // 注册实时数据表格
+  const [registerRealtimeTable] = useTable({
+    dataSource: minesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: '详情',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-const handleOkEdit = () => {
-  visibleModal.value = false;
-};
-const handleCancelEdit = () => {
-  visibleModal.value = false;
-};
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else if (type === 'detail') {
+      visibleModal.value = true;
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
+  const handleOkEdit = () => {
+    visibleModal.value = false;
+  };
+  const handleCancelEdit = () => {
+    visibleModal.value = false;
+  };
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: grid;
-  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
-  gap: auto;
-  justify-content: start;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 10px;
-  margin: 0 10px;
-  gap: 100px;
-}
-.board-item {
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  padding: 4px;
-}
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: grid;
+    grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+    gap: auto;
+    justify-content: start;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px;
+    margin: 0 10px;
+    gap: 100px;
+  }
+  .board-item {
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+</style>

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

@@ -1,51 +1,31 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div>
-    <BasicTable @register="registerTable">
-      <!-- <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              // 使用组件形式引用SVG图标
-              icon: IconData,
-              onClick: handleGoToPage.bind(record),
-            },
-            {
-              icon: IconInfo,
-              onClick: handleGoToPage.bind(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>
-  </div>
+  <BasicTable @register="registerTable">
+    <template #action="{ record }">
+      <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
+        <SvgIcon name="data" />
+      </button>
+      <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
+        <SvgIcon name="info" />
+      </button>
+      <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
+        <SvgIcon name="chart" />
+      </button>
+    </template>
+  </BasicTable>
 </template>
 
 <script setup lang="ts">
   import { useRouter } from 'vue-router';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { BasicTable, useTable } from '/@/components/Table';
   import { columns, searchFormSchema, minesData } from './minesInfo.data';
+  import { SvgIcon } from '/@/components/Icon';
 
   // 路由实例
   const router = useRouter();
   // 注册表格并获取相关方法
   const [registerTable] = useTable({
+    title: '矿山信息表格',
     dataSource: minesData,
     columns,
     formConfig: {
@@ -54,18 +34,16 @@
       showAdvancedButton: false,
     },
     pagination: false,
-    striped: false,
     useSearchForm: true,
-    showTableSetting: true,
+    // showTableSetting: true,
     bordered: true,
     showIndexColumn: false,
-    canResize: false,
+    // canResize: false,
     actionColumn: {
       width: 180,
       title: '操作',
       dataIndex: 'action',
       slots: { customRender: 'action' },
-      fixed: undefined,
     },
   });
 
@@ -94,4 +72,4 @@
       margin-right: 0;
     }
   }
-</style>
+</style>

src/views/monitor/sealedMonitor/index.vue

@@ -1,34 +1,30 @@
 <template>
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
-    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px;">
+    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px">
       <TabPane tab="实时数据监测" key="realtime">
         <!-- 实时数据表格 -->
         <BasicTable @register="registerRealtimeTable" :scroll="{ x: 'max-content' }">
           <template #action="{ record }">
-            <div class="action-buttons">
-              <button @click="openModal(record, 'realtime')" class="action-btn">
-                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
-              </button>
-            </div>
+            <button @click="openModal(record, 'realtime')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
           </template>
         </BasicTable>
       </TabPane>
-      
+
       <TabPane tab="历史数据监测" key="history">
         <!-- 历史数据表格 -->
         <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }">
           <template #action="{ record }">
-            <div class="action-buttons">
-              <button @click="openModal(record, 'history')" class="action-btn">
-                <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
-              </button>
-            </div>
+            <button @click="openModal(record, 'history')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
           </template>
         </BasicTable>
       </TabPane>
     </Tabs>
-    
+
     <!-- 实时数据详情弹框 -->
     <realtimeDetailsModal ref="realtimeModalRef" />
     <!-- 历史数据详情弹框 -->
@@ -37,95 +33,96 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-// 引入模拟数据
-import { columns, searchFormSchema, minesData , historicalColumns, historicalFormSchema, historicalMinesData  } from './monitorData.data';
-import realtimeDetailsModal from './components/RealtimeDetailsModal.vue';
-import HistoricalDetailsModal from './components/HistoricalDetailsModal.vue';
+  import { ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  // 引入模拟数据
+  import { columns, searchFormSchema, minesData, historicalColumns, historicalFormSchema, historicalMinesData } from './monitorData.data';
+  import realtimeDetailsModal from './components/RealtimeDetailsModal.vue';
+  import HistoricalDetailsModal from './components/HistoricalDetailsModal.vue';
+  import { SvgIcon } from '/@/components/Icon';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
 
-// 注册实时数据表格
-const [registerRealtimeTable] = useTable({
-  dataSource: minesData,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 注册实时数据表格
+  const [registerRealtimeTable] = useTable({
+    dataSource: minesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns: historicalColumns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: historicalFormSchema, // 使用历史数据的搜索配置
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historicalMinesData,
+    columns: historicalColumns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: historicalFormSchema, // 使用历史数据的搜索配置
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
+  };
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
+  .monitoring-page {
+    padding: 16px;
+  }
 
-.action-btn {
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  padding: 4px;
-}
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    // background: transparent;
+    padding: 4px;
+  }
 
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
+  .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+</style>