Merge branch 'qhse_cert' of shuzhihua/pms-iot-vue into master

src/components/ZmTable/ZmTableColumn.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup generic="T">
 import { type TableColumnCtx } from 'element-plus'
-import { computed, inject, nextTick, ref, useAttrs, watch } from 'vue'
+import { computed, inject, nextTick, ref, useAttrs, useSlots, watch } from 'vue'
 import { TableContextKey } from './token'
 import ZmTableColumnSettingTree from './ZmTableColumnSettingTree.vue'
 import type { ColumnAlign, ColumnSettingItem, SortChangePayload, SortOrder } from './token'
@@ -35,6 +35,7 @@ const emits = defineEmits<{
 
 const props = defineProps<Props>()
 const attrs = useAttrs()
+const slots = useSlots()
 
 const tableContext = inject(TableContextKey, {
   data: ref([]),
@@ -52,6 +53,10 @@ const innerSortOrder = ref<SortOrder | null>(props.defaultSortOrder ?? null)
 const filterVisible = ref(false)
 const settingVisible = ref(false)
 const hasHeaderAction = computed(() => props.action || props.zmSortable || props.zmFilterable)
+const forwardedSlots = computed(() => {
+  const { header: _header, ...restSlots } = slots
+  return restSlots
+})
 
 const defaultOptions = ref<Partial<Props>>({
   align: 'center',
@@ -236,8 +241,8 @@ watch(
 
 <template>
   <el-table-column ref="columnRef" v-bind="bindProps">
-    <template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
-      <slot v-if="name !== 'header'" :name="name" v-bind="slotData || {}"></slot>
+    <template v-for="(_, name) in forwardedSlots" :key="name" #[name]="slotData">
+      <slot :name="name" v-bind="slotData || {}"></slot>
     </template>
     <template #header="scope">
       <slot name="header" v-bind="scope">

src/views/pms/device/completeSet/DeviceCompleteSet.vue

@@ -3,7 +3,7 @@
     <!-- 左侧部门树 -->
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <ContentWrap style="border: none; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1)">
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -45,43 +45,37 @@
       </ContentWrap>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table
-          v-loading="loading"
-          height="calc(85vh - 130px)"
-          :data="list"
-          :stripe="true"
-          :show-overflow-tooltip="true"
-        >
-          <el-table-column :label="t('monitor.serial')" width="70" align="center">
+      <ContentWrap style="border: none; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1)">
+        <zm-table :loading="loading" height="calc(85vh - 138px)" :data="list">
+          <zm-table-column :label="t('monitor.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column label="部门名称" align="center" prop="deptName" />
-          <el-table-column label="成套名称" align="center" prop="name" />
-          <el-table-column label="成套类型" align="center">
+          </zm-table-column>
+          <zm-table-column label="部门名称" align="center" prop="deptName" />
+          <zm-table-column label="成套名称" align="center" prop="name" />
+          <zm-table-column label="成套类型" align="center">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.DEVICE_GROUP_TYPE" :value="scope.row.type" />
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="在线状态" align="center">
+          <zm-table-column label="在线状态" align="center">
             <template #default="scope">
               <el-tag type="success" :underline="false" v-if="scope.row.ifOnline === true"
                 >在线</el-tag
               >
               <el-tag type="info" :underline="false" v-else>离线</el-tag>
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="描述" align="center" prop="remark" />
-          <el-table-column label="设备数量" align="center" prop="deviceCount">
+          <zm-table-column label="描述" align="center" prop="remark" />
+          <zm-table-column label="设备数量" align="center" prop="deviceCount">
             <template #default="scope">
               {{ (scope.row.details && scope.row.details.length) || 0 }}
             </template>
-          </el-table-column>
-          <el-table-column label="主设备" align="center" prop="mainDeviceName">
+          </zm-table-column>
+          <zm-table-column label="主设备" align="center" prop="mainDeviceName">
             <template #default="scope">
               {{
                 scope.row.details.filter((item) => item.ifMaster)[0]?.deviceName +
@@ -89,15 +83,20 @@
                   scope.row.details.filter((item) => item.ifMaster)[0]?.deviceCode || '无'
               }}
             </template>
-          </el-table-column>
-
-          <el-table-column :label="t('devicePerson.operation')" align="center" min-width="120px">
+          </zm-table-column>
+
+          <zm-table-column
+            :label="t('devicePerson.operation')"
+            align="center"
+            min-width="120px"
+            action
+          >
             <template #default="scope">
               <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
               <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -234,7 +233,8 @@ import * as DeptApi from '@/api/system/dept'
 import { ElMessageBox } from 'element-plus'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 const deptList = ref<Tree[]>([]) // 树形结构
-
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 defineOptions({ name: 'IotDeviceComplete' })
 
 const loading = ref(true) // 列表的加载中

src/views/pms/failure/index.vue

@@ -2,7 +2,10 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -138,95 +141,75 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table
-          height="calc(85vh - 130px)"
-          v-loading="loading"
-          :data="list"
-          :stripe="true"
-          :show-overflow-tooltip="true"
-        >
-          <el-table-column :label="t('fault.serial')" width="70" align="center">
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table height="calc(85vh - 140px)" :loading="loading" :data="list" show-border>
+          <zm-table-column :label="t('fault.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
+          </zm-table-column>
           <!--        <el-table-column label="故障编码" align="center" prop="failureCode" />-->
-          <el-table-column
-            :label="t('fault.faultTitle')"
-            align="left"
-            prop="failureName"
-            min-width="350"
-          />
-          <el-table-column
-            :label="t('iotMaintain.deviceCode')"
-            align="center"
-            prop="deviceCode"
-            min-width="220"
-          />
-          <el-table-column
-            :label="t('fault.deviceName')"
-            align="center"
-            prop="deviceName"
-            min-width="240"
-          />
-          <el-table-column :label="t('fault.status')" align="center" prop="status" min-width="110">
+          <zm-table-column :label="t('fault.faultTitle')" align="center" prop="failureName" />
+          <zm-table-column :label="t('iotMaintain.deviceCode')" align="center" prop="deviceCode" />
+          <zm-table-column :label="t('fault.deviceName')" align="center" prop="deviceName" />
+          <zm-table-column :label="t('fault.status')" align="center" prop="status">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_FAILURE_STATUS" :value="scope.row.status" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('faultForm.failureType')"
             align="center"
             prop="failureType"
-            min-width="110"
+            min-width="90px"
           >
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.FAILURE_TYPE" :value="scope.row.failureType" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('fault.approvalStatus')"
             align="center"
             prop="auditStatus"
-            min-width="130"
+            min-width="90px"
           >
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.CRM_AUDIT_STATUS" :value="scope.row.auditStatus" />
             </template>
-          </el-table-column>
-          <el-table-column :label="t('fault.solve')" align="center" prop="ifDeal">
+          </zm-table-column>
+          <zm-table-column :label="t('fault.solve')" align="center" prop="ifDeal">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.ifDeal" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('fault.failureTime')"
             align="center"
             prop="failureTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column :label="t('fault.solveTime')" align="center" prop="dealHour">
+          <zm-table-column :label="t('fault.solveTime')" align="center" prop="dealHour">
             <template #default="scope">
               {{ scope.row.dealHour && scope.row.dealHour > 0 ? scope.row.dealHour + 'H' : '' }}
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('table.createTime')"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('fault.operation')"
             align="center"
             min-width="120px"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button
@@ -256,8 +239,8 @@
                 {{ t('fault.del') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -280,6 +263,9 @@ import IotFailureReportForm from './IotFailureReportForm.vue'
 import { DICT_TYPE, getBoolDictOptions, getStrDictOptions } from '@/utils/dict'
 import DeptTree from '@/views/system/user/DeptTree2.vue'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 /** 故障上报 列表 */
 defineOptions({ name: 'IotFailureReport' })
 

src/views/pms/information/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <ContentWrap>
+  <div
+    style="border: none; background: #fff; display: flex; align-items: center"
+    class="py-2 rounded-sm px-2"
+  >
     <!-- 搜索工作栏 -->
     <el-form
       class="-mb-15px"
@@ -8,7 +11,7 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item :label="t('deviceForm.category')" prop="deviceType" style="width: 15vw" >
+      <el-form-item :label="t('deviceForm.category')" prop="deviceType" style="width: 15vw">
         <el-tree-select
           v-model="queryParams.deviceType"
           :data="productClassifyList"
@@ -40,10 +43,12 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />
-          {{ t('info.search') }}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />
-          {{ t('info.reset') }}</el-button>
+        <el-button @click="handleQuery"
+          ><Icon icon="ep:search" class="mr-5px" /> {{ t('info.search') }}</el-button
+        >
+        <el-button @click="resetQuery"
+          ><Icon icon="ep:refresh" class="mr-5px" /> {{ t('info.reset') }}</el-button
+        >
         <el-button
           type="primary"
           plain
@@ -64,31 +69,37 @@
         </el-button>
       </el-form-item>
     </el-form>
-  </ContentWrap>
+  </div>
 
   <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+  <ContentWrap style="border: none; margin-top: 20px">
+    <zm-table :loading="loading" :data="list" height="70vh">
+      <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
         <template #default="scope">
           {{ scope.$index + 1 }}
         </template>
-      </el-table-column>
-      <el-table-column :label="t('info.deviceClass')" align="center" prop="className" />
-      <el-table-column :label="t('faultForm.faultImpact')" align="center" prop="failureInfluence" />
-      <el-table-column :label="t('iotMaintain.faultySystem')" align="center" prop="failureSystem" />
-      <el-table-column :label="t('info.description')" align="center" prop="description" />
-      <el-table-column :label="t('iotMaintain.solution')" align="center" prop="solutions" />
-      <el-table-column :label="t('iotMaintain.remark')" align="center" prop="remark" />
-      <el-table-column
+      </zm-table-column>
+      <zm-table-column :label="t('info.deviceClass')" align="center" prop="className" />
+      <zm-table-column :label="t('faultForm.faultImpact')" align="center" prop="failureInfluence" />
+      <zm-table-column :label="t('iotMaintain.faultySystem')" align="center" prop="failureSystem" />
+      <zm-table-column :label="t('info.description')" align="center" prop="description" />
+      <zm-table-column :label="t('iotMaintain.solution')" align="center" prop="solutions" />
+      <zm-table-column :label="t('iotMaintain.remark')" align="center" prop="remark" />
+      <zm-table-column
         :label="t('info.createTime')"
         align="center"
         prop="createTime"
         :formatter="dateFormatter"
         width="180px"
       />
-      <!--      <el-table-column label="审核状态" align="center" prop="auditStatus" />-->
-      <el-table-column :label="t('iotMaintain.operation')" align="center" min-width="120px">
+      <!--      <zm-table-column label="审核状态" align="center" prop="auditStatus" />-->
+      <zm-table-column
+        :label="t('iotMaintain.operation')"
+        align="center"
+        min-width="120px"
+        fixed="right"
+        action
+      >
         <template #default="scope">
           <el-button
             link
@@ -107,8 +118,8 @@
             {{ t('info.delete') }}
           </el-button>
         </template>
-      </el-table-column>
-    </el-table>
+      </zm-table-column>
+    </zm-table>
     <!-- 分页 -->
     <Pagination
       :total="total"
@@ -127,8 +138,11 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { IotInformationDbApi, IotInformationDbVO } from '@/api/pms/information'
 import IotInformationDbForm from './IotInformationDbForm.vue'
-import {defaultProps, handleTree} from "@/utils/tree";
-import * as ProductClassifyApi from "@/api/pms/productclassify";
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as ProductClassifyApi from '@/api/pms/productclassify'
+
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 
 /** 故障知识库 列表 */
 defineOptions({ name: 'IotInformationDb' })

src/views/pms/inspect/item/index.vue

@@ -2,7 +2,10 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -68,36 +71,36 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" show-border height="calc(85vh - 180px)">
           <!--      <el-table-column label="主键id" align="center" prop="id" />-->
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('monitor.category')"
             align="center"
             prop="deviceClassifyName"
           />
-          <el-table-column :label="t('iotDevice.brand')" align="center" prop="brandName" />
-          <el-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
-          <el-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
-          <el-table-column :label="t('inspect.InspectionItems')" align="center" prop="item" />
-          <el-table-column
+          <zm-table-column :label="t('iotDevice.brand')" align="center" prop="brandName" />
+          <zm-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
+          <zm-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
+          <zm-table-column :label="t('inspect.InspectionItems')" align="center" prop="item" />
+          <zm-table-column
             :label="t('inspect.InspectionStandards')"
             align="center"
             prop="standard"
           />
-          <el-table-column :label="t('inspect.createName')" align="center" prop="createName" />
+          <zm-table-column :label="t('inspect.createName')" align="center" prop="createName" />
           <!--      <el-table-column :label="t('common.sort')" align="center" prop="sort" />-->
           <!--      <el-table-column :label="t('form.remark')" align="center" prop="remark" />-->
 
-          <el-table-column
+          <zm-table-column
             :label="t('common.createTime')"
             align="center"
             prop="createTime"
@@ -105,7 +108,13 @@
             width="180px"
           />
           <!--      <el-table-column label="部门id" align="center" prop="deptId" />-->
-          <el-table-column :label="t('operationFill.operation')" align="center" min-width="120px">
+          <zm-table-column
+            :label="t('operationFill.operation')"
+            align="center"
+            min-width="120px"
+            action
+            fixed="right"
+          >
             <template #default="scope">
               <el-button
                 link
@@ -124,8 +133,8 @@
                 {{ t('fault.del') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -150,6 +159,9 @@ import { defaultProps, handleTree } from '@/utils/tree'
 import * as ProductClassifyApi from '@/api/pms/productclassify'
 import DeptTree from '@/views/system/user/DeptTree2.vue'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 /** 巡检项 列表 */
 defineOptions({ name: 'IotInspectItem' })
 

src/views/pms/inspect/order/index.vue

@@ -2,7 +2,10 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -17,7 +20,7 @@
               :placeholder="t('bomList.nHolder')"
               clearable
               @keyup.enter="handleQuery"
-              class="!w-240px"
+              class="!w-180px"
             />
           </el-form-item>
           <!--          <el-form-item label="工单编码" prop="inspectOrderCode">-->
@@ -34,7 +37,7 @@
               v-model="queryParams.status"
               :placeholder="t('operationFill.status')"
               clearable
-              class="!w-240px"
+              class="!w-180px"
             >
               <el-option
                 v-for="dict in getStrDictOptions(DICT_TYPE.PMS_INSPECT_ORDER_STATUS)"
@@ -52,7 +55,7 @@
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-              class="!w-220px"
+              class="!w-180px"
             />
           </el-form-item>
           <el-form-item>
@@ -81,36 +84,25 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table
-          v-loading="loading"
-          :data="list"
-          :stripe="true"
-          height="calc(85vh - 175px)"
-          :show-overflow-tooltip="true"
-        >
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" height="calc(85vh - 138px)">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('bomList.name')"
-            align="center"
-            prop="inspectOrderTitle"
-            min-width="300"
-          />
+          </zm-table-column>
+          <zm-table-column :label="t('bomList.name')" align="center" prop="inspectOrderTitle" />
           <!--          <el-table-column label="工单编码" align="center" prop="inspectOrderCode" />-->
-          <el-table-column
+          <zm-table-column
             :label="t('route.orderType')"
             align="center"
             prop="type"
             min-width="90"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('operationFill.status')"
             align="center"
             prop="status"
@@ -119,14 +111,14 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_INSPECT_ORDER_STATUS" :value="scope.row.status" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('iotMaintain.PersonInCharge')"
             align="center"
             prop="chargeName"
             min-width="110"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.deviceCount')"
             align="center"
             prop="deviceCount"
@@ -135,8 +127,8 @@
             <template #default="scope">
               <el-tag type="info"> {{ scope.row.deviceCount }}</el-tag>
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('inspect.needDevice')"
             align="center"
             prop="needDevice"
@@ -145,8 +137,8 @@
             <template #default="scope">
               <el-tag type="success"> {{ scope.row.needDevice }}</el-tag>
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('inspect.exceptionCount')"
             align="center"
             prop="exceptionCount"
@@ -155,27 +147,28 @@
             <template #default="scope">
               <el-tag type="danger"> {{ scope.row.exceptionCount }}</el-tag>
             </template>
-          </el-table-column>
+          </zm-table-column>
           <!--          <el-table-column label="备注" align="center" prop="remark" />-->
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.generateTime')"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.executeTime')"
             align="center"
             prop="executeDate"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('iotMaintain.operation')"
             align="center"
             min-width="160px"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button link type="primary" @click="openForm(scope.row.id)">
@@ -200,8 +193,8 @@
               </el-button>
               <!--              <el-button link type="primary" @click="openForm(scope.row.id)"> {{ t('inspect.ignore') }} </el-button>-->
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <el-dialog
           v-model="dialogVisible"
           title="忽略理由"
@@ -249,6 +242,9 @@ import IotInspectOrderForm from './IotInspectOrderForm.vue'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import DeptTree from '@/views/system/user/DeptTree2.vue'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 const { push } = useRouter()
 const { params } = useRoute()
 /** 巡检工单 列表 */

src/views/pms/inspect/plan/index.vue

@@ -3,7 +3,10 @@
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
 
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -67,35 +70,30 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" height="63vh">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('route.planTitle')"
-            align="center"
-            prop="planTitle"
-            min-width="240"
-          />
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column :label="t('route.planTitle')" align="center" prop="planTitle" />
+          <zm-table-column
             :label="t('route.planNumber')"
             align="center"
             prop="planCode"
             min-width="200"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('route.cycle')"
             align="center"
             prop="planCycle"
             min-width="80"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('workOrderMaterial.unit')"
             align="center"
             prop="planUnit"
@@ -104,8 +102,8 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_INSPECT_UNIT" :value="scope.row.planUnit" />
             </template>
-          </el-table-column>
-          <el-table-column :label="t('bomList.status')" key="status" min-width="80">
+          </zm-table-column>
+          <zm-table-column :label="t('bomList.status')" key="status" min-width="80">
             <template #default="scope">
               <el-switch
                 v-model="scope.row.status"
@@ -114,38 +112,39 @@
                 @change="handleStatusChange(scope.row)"
               />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('route.beginCreateTime')"
             align="center"
             prop="beginCreateTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('route.lastCreateTime')"
             align="center"
             prop="lastCreateTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('iotDevice.dept')"
             align="center"
             prop="deptName"
             min-width="130"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.createName')"
             align="center"
             prop="createName"
             min-width="130"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('operationFill.operation')"
             align="center"
-            min-width="180"
+            min-width="120"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button
@@ -165,8 +164,8 @@
                 {{ t('fault.del') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -193,6 +192,9 @@ import DeptTree from '@/views/system/user/DeptTree2.vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 defineOptions({ name: 'IotInspectPlan' })
 const message = useMessage() // 消息弹窗
 
@@ -229,6 +231,9 @@ const handleDeptNodeClick = async (row) => {
 }
 
 const handleStatusChange = async (row: IotInspectPlanVO) => {
+  if (!isInitialized.value) {
+    return
+  }
   try {
     const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
     await message.confirm('确认要"' + text + '""' + row.planTitle + '"巡检计划吗?')
@@ -239,13 +244,16 @@ const handleStatusChange = async (row: IotInspectPlanVO) => {
       row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
   }
 }
-
+const isInitialized = ref(false)
 const getList = async () => {
   loading.value = true
   try {
     const data = await IotInspectPlanApi.getIotInspectPlanPage(queryParams)
     list.value = data.list
     total.value = data.total
+    setTimeout(() => {
+      isInitialized.value = true
+    }, 100)
   } finally {
     loading.value = false
   }

src/views/pms/inspect/route/index.vue

@@ -2,7 +2,10 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2 mb-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -75,26 +78,26 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+      <ContentWrap style="border: none; margin-top: 10px">
+        <zm-table :loading="loading" :data="list" height="64vh">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
+          </zm-table-column>
           <el-table-column :label="t('route.RouteName')" align="center" prop="routeName" />
-          <el-table-column
+          <zm-table-column
             :label="t('monitor.category')"
             align="center"
             prop="deviceClassifyName"
           />
-          <el-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
+          <zm-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
           <!--      <el-table-column label="巡检项" align="center" prop="itemJson" />-->
-          <el-table-column :label="t('iotDevice.brand')" align="center" prop="brandName" />
-          <el-table-column
+          <zm-table-column :label="t('iotDevice.brand')" align="center" prop="brandName" />
+          <zm-table-column
             :label="t('common.createTime')"
             align="center"
             prop="createTime"
@@ -102,7 +105,12 @@
             width="180px"
           />
           <!--      <el-table-column label="部门id" align="center" prop="deptId" />-->
-          <el-table-column :label="t('operationFill.operation')" align="center" min-width="120px">
+          <zm-table-column
+            :label="t('operationFill.operation')"
+            align="center"
+            min-width="120px"
+            action
+          >
             <template #default="scope">
               <el-button
                 link
@@ -121,8 +129,8 @@
                 {{ t('fault.del') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -149,6 +157,9 @@ const { push } = useRouter() // 路由跳转
 /** 巡检路线 列表 */
 defineOptions({ name: 'IotInspectRoute' })
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 let isLeftContentCollapsed = ref(false)

src/views/pms/iotopeationfill/index.vue

@@ -2,7 +2,7 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <ContentWrap style="border: none">
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -79,55 +79,18 @@
       </ContentWrap>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" height="calc(85vh - 175px)">
-          <el-table-column :label="t('common.index')" min-width="60" align="center">
+      <ContentWrap style="border: none">
+        <zm-table :loading="loading" :data="list" height="calc(85vh - 175px)">
+          <zm-table-column :label="t('common.index')" min-width="60" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('bomList.name')"
-            align="center"
-            prop="orderName"
-            min-width="320"
-          />
-          <el-table-column
-            :label="t('operationFill.duty')"
-            align="center"
-            prop="userName"
-            min-width="100"
-          />
-          <el-table-column
-            :label="t('operationFill.orderDevice')"
-            align="center"
-            prop="fillList"
-            min-width="150"
-          >
-            <template #default="scope">
-              <el-popover
-                style="padding: 0"
-                placement="left"
-                :width="300"
-                :hide-after="0"
-                trigger="hover"
-                popper-class="project-popover"
-              >
-                <template #reference>
-                  <span class="cursor-pointer">{{ truncateText(scope.row.fillList, 20) }}</span>
-                </template>
-                <div class="scrollable-tooltip">
-                  <p>{{ scope.row.fillList }}</p>
-                </div>
-              </el-popover>
-            </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('operationFill.status')"
-            align="center"
-            prop="orderStatus"
-            min-width="120"
-          >
+          </zm-table-column>
+          <zm-table-column :label="t('bomList.name')" align="center" prop="orderName" />
+          <zm-table-column :label="t('operationFill.duty')" align="center" prop="userName" />
+          <zm-table-column :label="t('operationFill.orderDevice')" align="center" prop="fillList" />
+
+          <zm-table-column :label="t('operationFill.status')" align="center" prop="orderStatus">
             <template #default="scope">
               <el-tooltip
                 v-if="scope.row.orderStatus === 3"
@@ -146,56 +109,42 @@
                 :value="scope.row.orderStatus"
               />
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('operationFill.deviceCount')"
-            align="center"
-            prop="allDev"
-            min-width="120"
-          >
+          </zm-table-column>
+          <zm-table-column :label="t('operationFill.deviceCount')" align="center" prop="allDev">
             <template #default="scope">
               <el-tag type="info"> {{ scope.row.allDev }}</el-tag>
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('operationFill.fillCount')"
-            align="center"
-            prop="fillDev"
-            min-width="120"
-          >
+          </zm-table-column>
+          <zm-table-column :label="t('operationFill.fillCount')" align="center" prop="fillDev">
             <template #default="scope">
               <el-tag type="success"> {{ scope.row.fillDev }}</el-tag>
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('operationFill.unFillCount')"
-            align="center"
-            prop="unFillDev"
-            min-width="120"
-          >
+          </zm-table-column>
+          <zm-table-column :label="t('operationFill.unFillCount')" align="center" prop="unFillDev">
             <template #default="scope">
               <el-tag type="danger"> {{ scope.row.unFillDev }}</el-tag>
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('dict.createTime')"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
             min-width="170"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('dict.fillTime')"
             align="center"
             prop="updateTime"
             :formatter="dateFormatter"
             min-width="170"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('operationFill.operation')"
             align="center"
             min-width="120px"
             fixed="right"
+            action
           >
             <template #default="scope">
               <div v-if="scope.row.orderStatus == 0 || scope.row.orderStatus == 2">
@@ -296,8 +245,8 @@
 
               <!-- 编辑按钮 -->
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <el-dialog
           v-model="dialogVisible"
           title="忽略理由"
@@ -347,11 +296,15 @@ import DeptTree from '@/views/system/user/DeptTree2.vue'
 import { onMounted, ref } from 'vue'
 import { IotOpeationFillApi, IotOpeationFillVO } from '@/api/pms/iotopeationfill'
 import { useUserStore } from '@/store/modules/user'
+
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 const { push } = useRouter()
 const { query } = useRoute() // 查询参数
 const deptId = query.deptId
 const orderStatus = query.orderStatus
 const createTime = query.createTime
+
 /** 巡检工单 列表 */
 defineOptions({ name: 'IotOpeationFill1' })
 const dialogVisible = ref(false)

src/views/pms/iotopeationfill/plan/index.vue

@@ -3,7 +3,10 @@
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
 
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -18,7 +21,7 @@
               :placeholder="t('main.nameHolder')"
               clearable
               @keyup.enter="handleQuery"
-              class="!w-240px"
+              class="!w-180px"
             />
           </el-form-item>
           <el-form-item :label="t('main.planCode')" prop="planCode">
@@ -27,7 +30,7 @@
               :placeholder="t('main.codeHolder')"
               clearable
               @keyup.enter="handleQuery"
-              class="!w-240px"
+              class="!w-180px"
             />
           </el-form-item>
           <el-form-item :label="t('common.createTime')" prop="createTime" label-width="100px">
@@ -38,7 +41,7 @@
               :start-placeholder="t('info.start')"
               :end-placeholder="t('info.end')"
               :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-              class="!w-220px"
+              class="!w-180px"
             />
           </el-form-item>
           <el-form-item>
@@ -67,36 +70,25 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table
-          v-loading="loading"
-          :data="list"
-          :stripe="true"
-          :show-overflow-tooltip="true"
-          height="calc(85vh - 175px)"
-        >
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" height="calc(85vh - 175px)">
           <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
           </el-table-column>
-          <el-table-column
-            :label="t('route.planTitle')"
-            align="center"
-            prop="planTitle"
-            min-width="240"
-          />
+          <zm-table-column :label="t('route.planTitle')" align="center" prop="planTitle" />
           <!--          <el-table-column :label="t('route.planNumber')" align="center" prop="planCode" min-width="200" />-->
-          <el-table-column
+          <zm-table-column
             :label="t('route.cycle')"
             align="center"
             prop="planCycle"
             min-width="80"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('workOrderMaterial.unit')"
             align="center"
             prop="planUnit"
@@ -105,48 +97,54 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_INSPECT_UNIT" :value="scope.row.planUnit" />
             </template>
-          </el-table-column>
-          <el-table-column :label="t('bomList.status')" key="status" min-width="80">
+          </zm-table-column>
+          <zm-table-column
+            :label="t('bomList.status')"
+            prop="status"
+            column-key="status"
+            min-width="80"
+          >
             <template #default="scope">
               <el-switch
-                v-model="scope.row.status"
+                :model-value="scope.row.status"
                 :active-value="0"
                 :inactive-value="1"
-                @change="handleStatusChange(scope.row)"
+                @change="(value) => handleStatusChange(scope.row, value)"
               />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('route.beginCreateTime')"
             align="center"
             prop="beginCreateTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('route.lastCreateTime')"
             align="center"
             prop="lastCreateTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('iotDevice.dept')"
             align="center"
             prop="deptName"
             min-width="130"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.createName')"
             align="center"
             prop="createName"
             min-width="130"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('operationFill.operation')"
             align="center"
-            min-width="180"
+            min-width="120"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button
@@ -166,8 +164,8 @@
                 {{ t('fault.del') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -194,6 +192,9 @@ import DeptTree from '@/views/system/user/DeptTree2.vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 defineOptions({ name: 'iotOperationPlan' })
 const message = useMessage() // 消息弹窗
 
@@ -229,24 +230,36 @@ const handleDeptNodeClick = async (row) => {
   await getList()
 }
 
-const handleStatusChange = async (row: IotOperationPlanVO) => {
+const handleStatusChange = async (row: IotOperationPlanVO, value: number) => {
+  // 如果还未初始化完成，直接返回
+  if (!isInitialized.value) {
+    return
+  }
+  const previousStatus = row.status
+  if (previousStatus === value) {
+    return
+  }
   try {
-    const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
+    const text = value === CommonStatusEnum.ENABLE ? '启用' : '停用'
     await message.confirm('确认要"' + text + '""' + row.planTitle + '"巡检计划吗?')
-    await IotOperationPlanApi.updateIotOperationStatus(row.id, row.status)
+    row.status = value
+    await IotOperationPlanApi.updateIotOperationStatus(row.id, value)
     await getList()
   } catch {
-    row.status =
-      row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
+    row.status = previousStatus
   }
 }
 
+const isInitialized = ref(false)
 const getList = async () => {
   loading.value = true
   try {
     const data = await IotOperationPlanApi.getIotOperationPlanPage(queryParams)
     list.value = data.list
     total.value = data.total
+    setTimeout(() => {
+      isInitialized.value = true
+    }, 100)
   } finally {
     loading.value = false
   }

src/views/pms/iotopeationfill/statistics.vue

@@ -1,10 +1,11 @@
 <template>
+  <div class="statistics-page">
   <!-- 第一行：统计卡片行 -->
-  <el-row :gutter="16" class="mb-4">
+  <el-row :gutter="16" class="section-row">
     <el-col :span="24">
-      <el-card class="chart-card" shadow="never">
+      <el-card class="chart-card filter-card" shadow="never">
         <el-form
-          class="-mb-15px"
+          class="filter-form"
           :model="queryParams"
           ref="queryFormRef"
           :inline="true"
@@ -49,52 +50,52 @@
               />
             </el-select>
           </el-form-item>-->
-          <el-form-item>
-            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <el-form-item class="filter-actions">
+            <el-button class="action-btn" @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+            <el-button class="action-btn" @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
           </el-form-item>
         </el-form>
       </el-card>
     </el-col>
   </el-row>
   <!-- 第二行：图表行 -->
-  <el-row :gutter="16" class="mb-4">
+  <el-row :gutter="16" class="section-row">
     <el-col :span="12">
       <el-card class="chart-card" shadow="never">
         <template #header>
-          <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">运行记录工单统计</span>
+          <div class="card-header">
+            <span class="card-title">运行记录工单统计</span>
           </div>
         </template>
-        <el-row class="h-[220px]" style="display: flex; justify-content: space-around;">
-          <el-col :span="4" class="flex flex-col items-center" @click="openFill(queryParams.deptId,4,queryParams.createTime)">
+        <el-row class="gauge-row">
+          <el-col :span="4" class="gauge-item" @click="openFill(queryParams.deptId,4,queryParams.createTime)">
             <div ref="reportingChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2"  >
-              <span class="text-sm text-gray-600">总数</span>
+            <div class="gauge-label">
+              <span>总数</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openFill(queryParams.deptId,1,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openFill(queryParams.deptId,1,queryParams.createTime)">
             <div ref="dealFinishedChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">已填写</span>
+            <div class="gauge-label">
+              <span>已填写</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openFill(queryParams.deptId,0,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openFill(queryParams.deptId,0,queryParams.createTime)">
             <div ref="transOrderChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">未填写</span>
+            <div class="gauge-label">
+              <span>未填写</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openFill(queryParams.deptId,2,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openFill(queryParams.deptId,2,queryParams.createTime)">
             <div ref="writeChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">填写中</span>
+            <div class="gauge-label">
+              <span>填写中</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openFill(queryParams.deptId,3,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openFill(queryParams.deptId,3,queryParams.createTime)">
             <div ref="ignoreChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600" >忽略</span>
+            <div class="gauge-label">
+              <span>忽略</span>
             </div>
           </el-col>
         </el-row>
@@ -103,33 +104,33 @@
     <el-col :span="12">
       <el-card class="chart-card" shadow="never">
         <template #header>
-          <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">运行记录设备统计</span>
+          <div class="card-header">
+            <span class="card-title">运行记录设备统计</span>
           </div>
         </template>
-        <el-row class="h-[220px]" style="display: flex; justify-content: space-around;">
-          <el-col :span="4" class="flex flex-col items-center" @click="openForm(queryParams.deptId,2,queryParams.createTime)">
+        <el-row class="gauge-row">
+          <el-col :span="4" class="gauge-item" @click="openForm(queryParams.deptId,2,queryParams.createTime)">
             <div ref="reportingChartRef1" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2"  >
-              <span class="text-sm text-gray-600">总数</span>
+            <div class="gauge-label">
+              <span>总数</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openForm(queryParams.deptId,1,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openForm(queryParams.deptId,1,queryParams.createTime)">
             <div ref="dealFinishedChartRef1" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">已填写</span>
+            <div class="gauge-label">
+              <span>已填写</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openForm(queryParams.deptId,0,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openForm(queryParams.deptId,0,queryParams.createTime)">
             <div ref="transOrderChartRef1" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">未填写</span>
+            <div class="gauge-label">
+              <span>未填写</span>
             </div>
           </el-col>
-          <el-col :span="4" class="flex flex-col items-center" @click="openForm(queryParams.deptId,3,queryParams.createTime)">
+          <el-col :span="4" class="gauge-item" @click="openForm(queryParams.deptId,3,queryParams.createTime)">
             <div ref="ignoreChartRef1" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">忽略</span>
+            <div class="gauge-label">
+              <span>忽略</span>
             </div>
           </el-col>
         </el-row>
@@ -139,18 +140,19 @@
 
 
   <!-- 第三行：消息统计行 -->
-  <el-row>
+  <el-row class="section-row">
     <el-col :span="24">
       <el-card class="chart-card" shadow="never">
         <template #header>
-          <div class="flex items-center justify-between">
-            <span class="text-base font-medium text-gray-600">运行记录工单统计</span>
+          <div class="card-header">
+            <span class="card-title">运行记录工单统计</span>
           </div>
         </template>
-        <div ref="chartContainer" class="h-[300px]"></div>
+        <div ref="chartContainer" class="trend-chart"></div>
       </el-card>
     </el-col>
   </el-row>
+  </div>
 </template>
 
 <script setup lang="ts" name="Index">
@@ -671,35 +673,104 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
+.statistics-page {
+  padding: 12px;
+  background: linear-gradient(180deg, #f5f8ff 0%, #f8fafc 100%);
+}
+
+.section-row {
+  margin-bottom: 12px;
+}
+
 .chart-card {
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-  padding: 16px;
+  border: 1px solid #e8edf5;
+  border-radius: 12px;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
+}
+
+.filter-card {
+  :deep(.el-card__body) {
+    padding: 14px 18px 2px;
+  }
+}
+
+.filter-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+
+  :deep(.el-input__wrapper),
+  :deep(.el-select__wrapper) {
+    border-radius: 10px;
+  }
+}
+
+.filter-actions {
+  margin-left: 8px;
 }
 
-// 新增样式，隐藏滚动条但保留功能
-::-webkit-scrollbar {
-  display: none;
+.action-btn {
+  min-width: 88px;
+  border-radius: 10px;
 }
 
-:host {
-  overflow: hidden;
+.card-header {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
 }
 
-// 确保页面铺满屏幕并不出现滚动条
-html, body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
+.card-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #334155;
 }
 
-// 适配图表容器高度
-.el-row {
-  max-height: calc(100vh - 32px); // 减去页面padding
-  overflow: auto;
-  -ms-overflow-style: none; // 隐藏IE滚动条
-  scrollbar-width: none; // 隐藏Firefox滚动条
+.gauge-row {
+  height: 220px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.gauge-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  padding: 4px 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.gauge-item:hover {
+  background: #f8fbff;
+  box-shadow: inset 0 0 0 1px #dbeafe;
+}
+
+.gauge-label {
+  margin-top: 6px;
+  font-size: 13px;
+  color: #64748b;
+}
+
+.trend-chart {
+  height: 320px;
+}
+
+:deep(.el-card__header) {
+  border-bottom: 1px solid #eef2f7;
+  padding: 14px 18px;
+}
+
+:deep(.el-card__body) {
+  padding: 14px 18px 16px;
+}
+
+@media (max-width: 1366px) {
+  .gauge-row {
+    overflow-x: auto;
+    gap: 6px;
+    justify-content: flex-start;
+  }
 }
 </style>

src/views/pms/maintain/index.vue

@@ -2,7 +2,10 @@
   <el-row :gutter="20">
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -161,35 +164,19 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table
-          v-loading="loading"
-          :data="list"
-          :stripe="true"
-          :show-overflow-tooltip="true"
-          height="calc(85vh - 175px)"
-        >
-          <el-table-column :label="t('maintain.serial')" min-width="70" align="center">
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list" height="calc(85vh - 180px)">
+          <zm-table-column :label="t('maintain.serial')" min-width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('iotDevice.code')"
-            align="center"
-            prop="deviceCode"
-            width="180"
-          />
-          <el-table-column
-            :label="t('maintain.deviceName')"
-            align="center"
-            prop="deviceName"
-            width="280"
-          />
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
+          <zm-table-column :label="t('maintain.deviceName')" align="center" prop="deviceName" />
+          <zm-table-column
             :label="t('maintain.status')"
             align="center"
             prop="status"
@@ -198,14 +185,14 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_MAIN_STATUS" :value="scope.row.status" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('maintain.source')"
             align="center"
             prop="maintainType"
             min-width="135"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('iotMaintain.repairType')"
             align="center"
             prop="type"
@@ -214,54 +201,45 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_MAIN_TYPE" :value="scope.row.type" />
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('maintain.shutDown')"
-            align="center"
-            prop="ifStop"
-            min-width="135"
-          >
+          </zm-table-column>
+          <zm-table-column :label="t('maintain.shutDown')" align="center" prop="ifStop">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.ifStop" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             label="执行时间"
             align="center"
             prop="executeDate"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column
-            :label="t('iotMaintain.oaFlowNo')"
-            align="center"
-            prop="oaFlowNo"
-            min-width="250"
-          />
-          <el-table-column
+          <zm-table-column :label="t('iotMaintain.oaFlowNo')" align="center" prop="oaFlowNo" />
+          <zm-table-column
             :label="t('maintain.dept')"
             align="center"
             prop="deptName"
             min-width="135"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('inspect.createName')"
             align="center"
             prop="createName"
             min-width="130"
           />
-          <el-table-column
+          <zm-table-column
             label="创建时间"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
             width="180px"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('maintain.operation')"
             align="center"
             min-width="170"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button link type="primary" @click="detail(scope.row.id)">
@@ -297,8 +275,8 @@
                 {{ t('maintain.record') }}
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <el-dialog
           v-model="dialogVisible"
           title="维修方式"
@@ -354,6 +332,9 @@ import DeptTree from '@/views/system/user/DeptTree2.vue'
 import { DICT_TYPE, getBoolDictOptions, getStrDictOptions } from '@/utils/dict'
 import { useUserStore } from '@/store/modules/user'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 /** 维修工单 列表 */
 defineOptions({ name: 'IotMaintain' })
 

src/views/pms/modeltemplate/index.vue

@@ -12,7 +12,10 @@
     </el-col>
     <el-col :span="20" :xs="24">
       <!-- 搜索 -->
-      <ContentWrap>
+      <div
+        style="border: none; background: #fff; display: flex; align-items: center"
+        class="py-2 rounded-sm px-2"
+      >
         <el-form
           class="-mb-15px"
           :model="queryParams"
@@ -29,7 +32,7 @@
               class="!w-240px"
             />
           </el-form-item>
-<!--          <el-form-item label="模板编码" prop="code">
+          <!--          <el-form-item label="模板编码" prop="code">
             <el-input
               v-model="queryParams.code"
               placeholder="请输入模板编码"
@@ -64,41 +67,45 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button @click="handleQuery"><Icon icon="ep:search" />{{t('operationFill.search')}}</el-button>
-            <el-button @click="resetQuery"><Icon icon="ep:refresh" />{{t('operationFill.reset')}}</el-button>
+            <el-button @click="handleQuery"
+              ><Icon icon="ep:search" />{{ t('operationFill.search') }}</el-button
+            >
+            <el-button @click="resetQuery"
+              ><Icon icon="ep:refresh" />{{ t('operationFill.reset') }}</el-button
+            >
             <el-button
               type="primary"
               plain
               @click="openForm('create')"
               v-hasPermi="['rq:iot-model-template:create']"
             >
-              <Icon icon="ep:plus" />{{t('operationFill.add')}}
+              <Icon icon="ep:plus" />{{ t('operationFill.add') }}
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list">
-<!--          <el-table-column
+      </div>
+      <ContentWrap style="border: none; margin-top: 20px">
+        <zm-table :loading="loading" :data="list">
+          <!--          <el-table-column
             label="模板编码"
             align="center"
             prop="code"
             :show-overflow-tooltip="true"
           />-->
-          <el-table-column
+          <zm-table-column
             :label="t('modelTemplate.name')"
             align="center"
             prop="name"
             :show-overflow-tooltip="true"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('modelTemplate.ec')"
             align="center"
             key="deviceCategoryName"
             prop="deviceCategoryName"
             :show-overflow-tooltip="true"
           />
-          <el-table-column :label="t('modelTemplate.status')" key="status">
+          <zm-table-column :label="t('modelTemplate.status')" key="status">
             <template #default="scope">
               <el-switch
                 v-model="scope.row.status"
@@ -108,23 +115,30 @@
                 :disabled="!checkPermi(['rq:iot-model-template:update'])"
               />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('modelTemplate.createTime')"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
-            width="180"
           />
-          <el-table-column :label="t('operationFill.operation')" align="center" width="260">
+          <zm-table-column :label="t('operationFill.operation')" align="center" width="220" action>
             <template #default="scope">
               <div class="flex items-center justify-center">
                 <el-button
                   type="primary"
                   link
-                  @click="openDetail(scope.row.deviceCategoryId+','+scope.row.deviceCategoryName+','+scope.row.name)"
+                  @click="
+                    openDetail(
+                      scope.row.deviceCategoryId +
+                        ',' +
+                        scope.row.deviceCategoryName +
+                        ',' +
+                        scope.row.name
+                    )
+                  "
                 >
-                  <Icon icon="ep:edit" />{{t('operationFill.view')}}
+                  <Icon icon="ep:edit" />{{ t('operationFill.view') }}
                 </el-button>
                 <el-button
                   type="primary"
@@ -132,22 +146,21 @@
                   @click="openForm('update', scope.row.id)"
                   v-hasPermi="['rq:iot-model-template:update']"
                 >
-                  <Icon icon="ep:edit" />{{t('modelTemplate.update')}}
+                  <Icon icon="ep:edit" />{{ t('modelTemplate.update') }}
                 </el-button>
 
                 <el-button
                   type="danger"
                   link
-                  @click="handleDelete(scope.row.id,scope.row.deviceCategoryId)"
+                  @click="handleDelete(scope.row.id, scope.row.deviceCategoryId)"
                   v-hasPermi="['rq:iot-model-template:delete']"
                 >
-                  <Icon icon="ep:delete" />{{t('modelTemplate.delete')}}
+                  <Icon icon="ep:delete" />{{ t('modelTemplate.delete') }}
                 </el-button>
-
               </div>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <Pagination
           :total="total"
           v-model:page="queryParams.pageNo"
@@ -169,16 +182,17 @@ import { CommonStatusEnum } from '@/utils/constants'
 import * as ModelTemplateApi from '@/api/pms/modeltemplate'
 import TemplateForm from './TemplateForm.vue'
 import ModelCategoryTree from './ModelCategoryTree.vue'
-import { useTreeStore } from '@/store/modules/attrTemplateTreeStore';
-import {DeviceAttrModelApi} from "@/api/pms/modelattrtemplate";
+import { useTreeStore } from '@/store/modules/attrTemplateTreeStore'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 
 defineOptions({ name: 'ModelAttrsTemplate' })
 
-const treeStore = useTreeStore();
+const treeStore = useTreeStore()
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
-const {push} = useRouter()
+const { push } = useRouter()
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数
@@ -189,14 +203,15 @@ const queryParams = reactive({
   code: undefined,
   status: undefined,
   deviceCategoryId: undefined,
-  deviceCategoryName:undefined,
+  deviceCategoryName: undefined,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 
 // 从 Store 中获取左侧 设备分类树 选中的 节点ID
-const selectedId = computed(() => treeStore.selectedId);
+const selectedId = computed(() => treeStore.selectedId)
 
+const isInitialized = ref(false)
 /** 查询 设备属性模板 列表 */
 const getList = async () => {
   loading.value = true
@@ -204,6 +219,10 @@ const getList = async () => {
     const data = await ModelTemplateApi.getModelTemplatePage(queryParams)
     list.value = data.list
     total.value = data.total
+    // 数据加载完成后，标记为已初始化
+    setTimeout(() => {
+      isInitialized.value = true
+    }, 100)
   } finally {
     loading.value = false
   }
@@ -235,12 +254,16 @@ const openForm = (type: string, id?: number) => {
 
 /** 打开详情 */
 const openDetail = (id: string) => {
-  push({ name: 'ModelAttrTemplate', params: {id} })
+  push({ name: 'ModelAttrTemplate', params: { id } })
 }
 
-
 /** 修改 设备属性模板 状态 */
 const handleStatusChange = async (row: ModelTemplateApi.ModelAttrTemplateVO) => {
+  // 如果还未初始化完成，直接返回
+  if (!isInitialized.value) {
+    return
+  }
+
   try {
     // 修改状态的二次确认
     const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
@@ -260,7 +283,7 @@ const handleStatusChange = async (row: ModelTemplateApi.ModelAttrTemplateVO) =>
 const handleCommand = (command: string, row: ModelTemplateApi.ModelAttrTemplateVO) => {
   switch (command) {
     case 'handleDelete':
-      handleDelete(row.id,row.deviceCategoryId)
+      handleDelete(row.id, row.deviceCategoryId)
       break
     default:
       break
@@ -270,14 +293,14 @@ const handleCommand = (command: string, row: ModelTemplateApi.ModelAttrTemplateV
 /** 删除按钮操作 */
 const handleDelete = async (id: number | undefined, deviceId: number) => {
   try {
-    const data = await ModelTemplateApi.getIsRelated(deviceId);
-    if(data.length===0){
+    const data = await ModelTemplateApi.getIsRelated(deviceId)
+    if (data.length === 0) {
       // 删除的二次确认
       await message.delConfirm()
       // 发起删除
       await ModelTemplateApi.deleteModelTemplate(id)
       message.success(t('common.delSuccess'))
-    }else{
+    } else {
       message.error(t('form.relatedModel'))
     }
 

src/views/pms/qhse/certificate.vue

@@ -4,9 +4,9 @@
     <!-- 左侧部门树 -->
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
-      <ContentWrap>
+      <div style="border: none" class="!border-none bg-white rounded-sm pt-4 px-2">
         <!-- 搜索工作栏 -->
-        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+        <el-form :model="queryParams" ref="queryFormRef" :inline="true">
           <el-form-item label="证书类型" prop="type">
             <el-select v-model="queryParams.type" placeholder="请选择证书类型" style="width: 120px">
               <el-option label="个人证书" value="personal" />
@@ -68,30 +68,30 @@
             >
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap class="flex-1 overflow-hidden mt-15px">
-        <el-table
-          v-loading="loading"
+      <ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
+        <zm-table
+          :loading="loading"
           :data="list"
-          height="calc(80vh - 203px)"
+          height="calc(80vh - 220px)"
           :show-overflow-tooltip="true"
           :row-style="tableRowStyle"
         >
-          <el-table-column :label="t('monitor.serial')" width="70" align="center">
+          <zm-table-column :label="t('monitor.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="证书类型" align="center" prop="type">
+          <zm-table-column label="证书类型" align="center" prop="type">
             <template #default="scope">
               {{ getCertificateTypeText(scope.row.type) }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="证书类别" align="center" width="150" prop="classify">
+          <zm-table-column label="证书类别" align="center" width="150" prop="classify">
             <template #default="scope">
               <dict-tag
                 v-if="scope.row.type === 'organization'"
@@ -100,44 +100,39 @@
               />
               <dict-tag v-else :type="DICT_TYPE.PERSON_CERT" :value="scope.row.classify" />
             </template>
-          </el-table-column>
-          <el-table-column
-            label="证书名称"
-            width="150"
-            align="center"
-            prop="certName"
-            show-overflow-tooltip
-          />
+          </zm-table-column>
+          <zm-table-column label="证书名称" align="center" prop="certName" show-overflow-tooltip />
 
-          <el-table-column label="所属人" align="center" prop="userName" />
-          <el-table-column label="所在部门" align="center" prop="deptName" />
+          <zm-table-column label="所属人" align="center" prop="userName" />
+          <zm-table-column label="所在部门" align="center" prop="deptName" />
 
-          <el-table-column label="颁发机构" align="center" prop="certOrg" width="120" />
+          <zm-table-column label="颁发机构" align="center" prop="certOrg" />
 
-          <el-table-column label="证书标准" align="center" prop="certStandard" width="120" />
+          <zm-table-column label="证书标准" align="center" prop="certStandard" />
 
-          <el-table-column label="颁发时间" align="center" prop="certIssue">
+          <zm-table-column label="颁发时间" align="center" prop="certIssue">
             <template #default="scope">
               {{ formatDateCorrectly(scope.row.certIssue) }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="有效期" align="center">
+          <zm-table-column label="有效期" align="center">
             <template #default="scope">
               {{ formatDateCorrectly(scope.row.certExpire) }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="到期提醒" align="center">
+          <zm-table-column label="到期提醒" align="center">
             <template #default="scope"> {{ scope.row.noticeBefore }}天前提醒 </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="备注" align="center" prop="remark" />
-          <el-table-column
+          <zm-table-column label="备注" align="center" prop="remark" />
+          <zm-table-column
             :label="t('devicePerson.operation')"
             align="center"
             fixed="right"
             min-width="180px"
+            action
           >
             <template #default="scope">
               <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
@@ -151,8 +146,8 @@
                 查看证书
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
 
         <!-- 分页 -->
         <Pagination

src/views/pms/qhse/factor/index.vue

@@ -51,26 +51,18 @@
 
       <!-- 表格 -->
       <ContentWrap style="border: 0">
-        <el-table
-          :data="tableData"
-          border
-          stripe
-          style="width: 100%"
-          :header-cell-style="{ background: '#f5f7fa', color: '#333' }"
-          :cell-style="{ padding: '12px 8px' }"
-          height="71vh"
-        >
-          <el-table-column label="序号" width="70" align="center" fixed="left">
+        <zm-table :data="tableData" height="66vh">
+          <zm-table-column label="序号" width="70" align="center" fixed="left">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column label="工序" prop="process" width="140" align="center" fixed="left" />
-          <el-table-column label="步骤分解" prop="stepBreak" width="140" align="center" />
-          <el-table-column label="环境因素" prop="environmentElement" width="180" align="center" />
+          </zm-table-column>
+          <zm-table-column label="工序" prop="process" align="center" fixed="left" />
+          <zm-table-column label="步骤分解" prop="stepBreak" align="center" />
+          <zm-table-column label="环境因素" prop="environmentElement" align="center" />
 
-          <el-table-column label="时态" width="240" align="center">
-            <el-table-column label="过去" prop="timeBefore" width="60" align="center">
+          <zm-table-column label="时态" align="center">
+            <zm-table-column label="过去" prop="timeBefore" width="60" align="center">
               <template #default="{ row }">
                 <el-button circle type="success" style="border: none" plain v-if="row.timeBefore">
                   <span class="text-[#259644]">
@@ -79,8 +71,8 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-            <el-table-column label="现在" prop="timeNow" width="60" align="center">
+            </zm-table-column>
+            <zm-table-column label="现在" prop="timeNow" width="60" align="center">
               <template #default="{ row }">
                 <el-button circle type="success" style="border: none" plain v-if="row.timeNow">
                   <span class="text-[#259644]">
@@ -89,8 +81,8 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-            <el-table-column label="将来" prop="timeFuture" width="60" align="center">
+            </zm-table-column>
+            <zm-table-column label="将来" prop="timeFuture" width="60" align="center">
               <template #default="{ row }">
                 <el-button circle type="success" style="border: none" plain v-if="row.timeFuture">
                   <span class="text-[#259644]">
@@ -99,11 +91,11 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-          </el-table-column>
+            </zm-table-column>
+          </zm-table-column>
 
-          <el-table-column label="状态" width="240" align="center">
-            <el-table-column label="正常" prop="statusNormal" width="60" align="center">
+          <zm-table-column label="状态" align="center">
+            <zm-table-column label="正常" prop="statusNormal" width="60" align="center">
               <template #default="{ row }">
                 <el-button circle type="success" style="border: none" plain v-if="row.statusNormal">
                   <span class="text-[#259644]">
@@ -112,8 +104,8 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-            <el-table-column label="异常" prop="statusException" width="60" align="center">
+            </zm-table-column>
+            <zm-table-column label="异常" prop="statusException" width="60" align="center">
               <template #default="{ row }">
                 <el-button
                   circle
@@ -128,8 +120,8 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-            <el-table-column label="紧急" prop="statusDanger" width="60" align="center">
+            </zm-table-column>
+            <zm-table-column label="紧急" prop="statusDanger" width="60" align="center">
               <template #default="{ row }">
                 <el-button circle type="success" style="border: none" plain v-if="row.statusDanger">
                   <span class="text-[#259644]">
@@ -138,11 +130,11 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-          </el-table-column>
+            </zm-table-column>
+          </zm-table-column>
 
-          <el-table-column label="环境影响类型" width="700" align="center">
-            <el-table-column label="能源/资源耗用" prop="typeEnergy" width="100" align="center">
+          <zm-table-column label="环境影响类型" align="center">
+            <zm-table-column label="能源/资源耗用" prop="typeEnergy" align="center">
               <template #default="{ row }">
                 <!-- <span>
                 {{ row.typeEnergy ? '✔' : '' }}
@@ -155,8 +147,8 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-            <el-table-column label="水体" prop="typeWater" width="60" align="center">
+            </zm-table-column>
+            <zm-table-column label="水体" prop="typeWater" width="60" align="center">
               <template #default="{ row }">
                 <!-- <span>
                 {{ row.typeWater ? '✔' : '' }}
@@ -168,8 +160,8 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-            <el-table-column label="大气" prop="typeGas" width="60" align="center">
+            </zm-table-column>
+            <zm-table-column label="大气" prop="typeGas" width="60" align="center">
               <template #default="{ row }">
                 <!-- <span>
                 {{ row.typeGas ? '✔' : '' }}
@@ -182,8 +174,8 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-            <el-table-column label="噪音" prop="typeNoise" width="60" align="center">
+            </zm-table-column>
+            <zm-table-column label="噪音" prop="typeNoise" width="60" align="center">
               <template #default="{ row }">
                 <el-button circle type="success" style="border: none" plain v-if="row.typeNoise">
                   <span class="text-[#259644]">
@@ -192,8 +184,8 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-            <el-table-column label="废弃物" prop="typeWaste" width="60" align="center">
+            </zm-table-column>
+            <zm-table-column label="废弃物" prop="typeWaste" width="60" align="center">
               <template #default="{ row }">
                 <el-button circle type="success" style="border: none" plain v-if="row.typeWaste">
                   <span class="text-[#259644]">
@@ -202,8 +194,8 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-            <el-table-column label="土壤" prop="typeSoil" width="60" align="center">
+            </zm-table-column>
+            <zm-table-column label="土壤" prop="typeSoil" width="60" align="center">
               <template #default="{ row }">
                 <el-button circle type="success" style="border: none" plain v-if="row.typeSoil">
                   <span class="text-[#259644]">
@@ -212,8 +204,8 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-            <el-table-column label="其他" prop="typeOther" width="60" align="center">
+            </zm-table-column>
+            <zm-table-column label="其他" prop="typeOther" width="60" align="center">
               <template #default="{ row }">
                 <el-button circle type="success" style="border: none" plain v-if="row.typeOther">
                   <span class="text-[#259644]">
@@ -222,24 +214,24 @@
                 </el-button>
                 <span v-else></span>
               </template>
-            </el-table-column>
-          </el-table-column>
+            </zm-table-column>
+          </zm-table-column>
 
-          <el-table-column label="控制措施" prop="controlMethod" min-width="200" align="center" />
-          <el-table-column label="创建日期" prop="createTime" width="160" align="center">
+          <zm-table-column label="控制措施" prop="controlMethod" align="center" />
+          <zm-table-column label="创建日期" prop="createTime" width="160" align="center">
             <template #default="{ row }">
               {{ formatDate(row.createTime) }}
             </template>
-          </el-table-column>
-          <el-table-column label="备注" prop="remark" width="150" align="center" />
+          </zm-table-column>
+          <zm-table-column label="备注" prop="remark" align="center" />
 
-          <el-table-column label="操作" width="120" fixed="right" align="center">
+          <zm-table-column label="操作" width="120" fixed="right" align="center" action>
             <template #default="{ row }">
               <el-button type="primary" link @click="editRow(row)">编辑</el-button>
               <el-button type="danger" link @click="deleteRow(row)">删除</el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
 
         <!-- 分页 -->
         <div class="mt-2 flex justify-right">
@@ -384,6 +376,8 @@ import { defaultProps } from '@/utils/tree'
 import { handleTree } from '@/utils/tree'
 import * as DeptApi from '@/api/system/dept'
 import DeptTree from '@/views/system/user/HazardTree.vue'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 
 // 表格数据
 const deptList2 = ref<Tree[]>([]) // 树形结构

src/views/pms/qhse/faultReport/index.vue

@@ -65,8 +65,8 @@
         </el-form>
       </ContentWrap>
 
-      <ContentWrap class="flex-1 overflow-hidden mt-15px">
-        <el-table
+      <ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
+        <zm-table
           v-loading="loading"
           :data="list"
           row-key="id"
@@ -74,45 +74,43 @@
           style="width: 100%"
           :header-cell-style="{ background: '#f5f7fa', color: '#333', height: '50px' }"
           :cell-style="{ padding: '12px 8px' }"
-          height="calc(80vh - 115px)"
+          height="calc(70vh - 118px)"
           :max-height="tableHeight"
         >
-          <el-table-column prop="actualTime" label="事件时间" align="center" min-width="150">
+          <zm-table-column prop="actualTime" label="事件时间" align="center" min-width="150">
             <template #default="{ row }">
               {{ formatDate(row.actualTime) }}
             </template>
-          </el-table-column>
-          <el-table-column prop="accidentGrade" label="事件级别" align="center" />
-          <el-table-column prop="accidentType" label="事件类型" align="center" />
-          <el-table-column prop="accidentType" label="事件状态" align="center" width="100">
+          </zm-table-column>
+          <zm-table-column prop="accidentGrade" label="事件级别" align="center" />
+          <zm-table-column prop="accidentType" label="事件类型" align="center" />
+          <zm-table-column prop="accidentType" label="事件状态" align="center" width="100">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.ACCIDENT_REPORT_STATUS" :value="scope.row.status" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             prop="lossSituation"
             label="事件损失情况"
             align="center"
             show-overflow-tooltip
-            min-width="150"
           />
 
-          <el-table-column
+          <zm-table-column
             prop="accidentAddress"
             label="事件地址"
             align="center"
-            min-width="150"
             show-overflow-tooltip
           />
-          <el-table-column prop="deptName" label="部门名称" align="center" width="100" />
-          <el-table-column prop="dutyPerson" label="现场负责人" align="center" width="100" />
-          <el-table-column prop="actualTime" label="创建时间" align="center" min-width="150">
+          <zm-table-column prop="deptName" label="部门名称" align="center" />
+          <zm-table-column prop="dutyPerson" label="现场负责人" align="center" />
+          <zm-table-column prop="actualTime" label="创建时间" align="center" min-width="150">
             <template #default="{ row }">
               {{ formatDate(row.createTime) }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="操作" align="center" width="150" fixed="right">
+          <zm-table-column label="操作" align="center" width="150" fixed="right" action>
             <template #default="{ row }">
               <el-button
                 link
@@ -124,8 +122,8 @@
               >
               <el-button link type="primary" @click="openApprovalDialog(row)"> 流转信息 </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
 
         <!-- 分页 -->
         <div class="mt-2 mb-2 float-right">
@@ -245,7 +243,8 @@ import { IotApprovalApi } from '@/api/pms/qhse/index'
 import QhseFaultReportForm from './QhseFaultReportForm.vue'
 import { useRouter } from 'vue-router'
 import DeptTree from '@/views/system/user/DeptTree2.vue'
-
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 const router = useRouter()
 const isLeftContentCollapsed = ref(false)
 

src/views/pms/qhse/hazard/index.vue

@@ -39,77 +39,58 @@
       </ContentWrap>
 
       <ContentWrap style="border: 0">
-        <el-table
+        <zm-table
           :data="tableData"
           border
           style="width: 100%"
           :header-cell-style="{ background: '#f5f7fa', color: '#333' }"
           :cell-style="{ padding: '12px 8px' }"
-          height="70vh"
+          height="70.5vh"
         >
           <!-- 区域/位置 列（已合并） -->
-          <el-table-column
-            prop="region"
-            label="区域/位置"
-            width="150"
-            align="center"
-            fixed="left"
-          />
+          <zm-table-column prop="region" label="区域/位置" align="center" fixed="left" />
 
           <!-- 其他列保持不变 -->
-          <el-table-column label="序号" width="70" align="center">
+          <zm-table-column label="序号" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            prop="elementDescription"
-            label="危害因素描述"
-            width="200"
-            align="center"
-          />
-          <el-table-column prop="maybeResult" min-width="320" label="可导致的后果" align="center" />
+          </zm-table-column>
+          <zm-table-column prop="elementDescription" label="危害因素描述" align="center" />
+          <zm-table-column prop="maybeResult" label="可导致的后果" align="center" />
 
           <!-- 风险评价列保持不变 -->
-          <el-table-column label="风险评价" width="320" align="center">
-            <el-table-column prop="evalKn" label="可能性 (L)" width="80" align="center">
+          <zm-table-column label="风险评价" align="center">
+            <zm-table-column prop="evalKn" label="可能性 (L)" width="80" align="center">
               <template #default="{ row }">
                 {{ row.evalKn }}
               </template>
-            </el-table-column>
-            <el-table-column prop="evalYz" label="严重性 (S)" width="80" align="center">
+            </zm-table-column>
+            <zm-table-column prop="evalYz" label="严重性 (S)" width="80" align="center">
               <template #default="{ row }">
                 {{ row.evalYz }}
               </template>
-            </el-table-column>
-            <el-table-column prop="evalFxz" label="风险值 (R)" width="80" align="center">
+            </zm-table-column>
+            <zm-table-column prop="evalFxz" label="风险值 (R)" width="80" align="center">
               <template #default="{ row }">
                 {{ row.evalFxz }}
               </template>
-            </el-table-column>
-            <el-table-column prop="riskGrade" label="风险等级" width="100" align="center">
+            </zm-table-column>
+            <zm-table-column prop="riskGrade" label="风险等级" width="100" align="center">
               <template #default="scope">
-                <!-- <div class="bg-[#ffff00] w-full rounded-md" v-if="scope.row.riskGrade === 'normal'">
-                一般风险
-              </div>
-              <div class="bg-[#ffc000] w-full rounded-md" v-else-if="scope.row.riskGrade === 'big'">
-                较大风险
-              </div>
-              <div class="bg-[#0070c0] w-full text-white rounded-md" v-else>低风险</div> -->
                 <dict-tag :type="DICT_TYPE.DANGER_GRADE" :value="scope.row.riskGrade" />
               </template>
-            </el-table-column>
-          </el-table-column>
+            </zm-table-column>
+          </zm-table-column>
 
-          <el-table-column
+          <zm-table-column
             prop="controlMethod"
             label="控制措施"
-            min-width="200"
             show-overflow-tooltip
             align="center"
           />
-          <el-table-column prop="charge" label="责任人 " min-width="100" align="center" />
-          <el-table-column label="操作" width="150" align="center" fixed="right">
+          <zm-table-column prop="charge" label="责任人" align="center" />
+          <zm-table-column label="操作" width="150" align="center" fixed="right" action>
             <template #default="{ row }">
               <div class="flex gap-3 justify-center">
                 <el-link
@@ -125,8 +106,8 @@
                 </el-link>
               </div>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
 
         <!-- 分页 -->
         <div class="mt-2 flex justify-right">

src/views/pms/qhse/index.vue

@@ -5,7 +5,7 @@
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
 
     <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
+      <ContentWrap style="border: none">
         <!-- 搜索工作栏 -->
         <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
           <el-form-item label="计量器具名称" prop="measureName">
@@ -51,81 +51,65 @@
       </ContentWrap>
 
       <!-- 列表 -->
-      <ContentWrap class="flex-1 overflow-hidden mt-15px">
-        <el-table
-          v-loading="loading"
+      <ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
+        <zm-table
+          :loading="loading"
           :data="list"
-          height="calc(78vh - 145px)"
+          height="calc(78vh - 150px)"
           :show-overflow-tooltip="true"
           :row-style="tableRowStyle"
         >
-          <el-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
+          <zm-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            label="名称"
-            align="center"
-            prop="measureName"
-            fixed="left"
-            width="120"
-          />
-          <el-table-column
-            label="编码"
-            align="center"
-            prop="measureCode"
-            width="150"
-            fixed="left"
-          />
-          <el-table-column label="计量单位" align="center" prop="measureUnit" />
-
-          <el-table-column label="责任人" align="center" prop="dutyPerson" />
-          <el-table-column label="品牌" align="center" prop="brand" />
-          <el-table-column label="规格型号" align="center" prop="modelName" />
-          <el-table-column label="分类" align="center" prop="classify" width="150">
+          </zm-table-column>
+          <zm-table-column label="名称" align="center" prop="measureName" fixed="left" />
+          <zm-table-column label="编码" align="center" prop="measureCode" fixed="left" />
+          <zm-table-column label="计量单位" align="center" prop="measureUnit" />
+
+          <zm-table-column label="责任人" align="center" prop="dutyPerson" />
+          <zm-table-column label="品牌" align="center" prop="brand" />
+          <zm-table-column label="规格型号" align="center" prop="modelName" />
+          <zm-table-column label="分类" align="center" prop="classify" min-width="120px">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.MEASURE_TYPE" :value="scope.row.classify" />
             </template>
-          </el-table-column>
-          <el-table-column label="采购日期" align="center" prop="buyDate">
+          </zm-table-column>
+          <zm-table-column label="采购日期" align="center" prop="buyDate">
             <template #default="scope">
               {{ formatDateCorrectly(scope.row.buyDate) }}
             </template>
-          </el-table-column>
-          <!-- <el-table-column label="有效期" align="center" prop="validity">
-            <template #default="scope">
-              {{ formatDateCorrectly(scope.row.validity) }}
-            </template>
-          </el-table-column> -->
+          </zm-table-column>
 
-          <el-table-column label="价格" align="center" prop="measurePrice">
+          <zm-table-column label="价格" align="center" prop="measurePrice">
             <template #default="scope">
               {{ scope.row.measurePrice }}
             </template>
-          </el-table-column>
-          <el-table-column label="备注" align="center" prop="remark" />
+          </zm-table-column>
+          <zm-table-column label="备注" align="center" prop="remark" />
 
-          <el-table-column label="检测信息" align="center" fixed="right">
+          <zm-table-column label="检测信息" align="center" fixed="right">
             <template #default="scope">
               <div>
                 <el-button link type="primary" @click="handleView(scope.row.id)"> 查看 </el-button>
               </div>
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column
+          <zm-table-column
             :label="t('devicePerson.operation')"
             align="center"
             fixed="right"
+            action
             min-width="120px"
           >
             <template #default="scope">
               <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
               <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -299,51 +283,58 @@
     :before-close="closeDrawer"
   >
     <div v-loading="drawerLoading">
-      <el-table
-        v-loading="loading"
+      <zm-table
+        :loading="loading"
         :data="measureDetectionData"
         :stripe="true"
         height="80vh"
         :show-overflow-tooltip="true"
       >
-        <el-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
+        <zm-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
           <template #default="scope">
             {{ scope.$index + 1 }}
           </template>
-        </el-table-column>
-        <el-table-column
+        </zm-table-column>
+        <zm-table-column
           label="计量器具名称"
           align="center"
           prop="measureName"
           min-width="160"
           fixed="left"
         />
-        <el-table-column label="证书编码" align="center" prop="measureCertNo" min-width="160" />
-        <el-table-column label="检测/校准日期" align="center" prop="detectDate" width="140">
+        <zm-table-column label="证书编码" align="center" prop="measureCertNo" min-width="160" />
+        <zm-table-column label="检测/校准日期" align="center" prop="detectDate" width="140">
           <template #default="scope">
             <span class="iot-md-date">{{ formatDateCorrectly(scope.row.detectDate) }}</span>
           </template>
-        </el-table-column>
-        <el-table-column label="检测/校准机构" align="center" prop="detectOrg" min-width="160" />
-        <el-table-column
+        </zm-table-column>
+        <zm-table-column label="检测/校准机构" align="center" prop="detectOrg" min-width="160" />
+        <zm-table-column
           label="检测/校准标准"
           align="center"
           prop="detectStandard"
           min-width="160"
         />
-        <el-table-column label="检测/校准内容" align="center" prop="detectContent" min-width="220">
+        <zm-table-column label="检测/校准内容" align="center" prop="detectContent" min-width="220">
           <template #default="scope">
             <div class="detect-content" v-html="scope.row.detectContent"></div>
           </template>
-        </el-table-column>
-        <el-table-column label="检测/校准有效期" align="center" prop="validityPeriod" width="140">
+        </zm-table-column>
+        <zm-table-column label="检测/校准有效期" align="center" prop="validityPeriod" width="140">
           <template #default="scope">
             <span class="iot-md-date">{{ formatDateCorrectly(scope.row.validityPeriod) }}</span>
           </template>
-        </el-table-column>
-        <el-table-column label="校准金额" align="center" prop="detectAmount" width="120" />
-        <el-table-column label="部门名称" align="center" prop="deptName" min-width="140" />
-        <el-table-column label="附件" align="center" prop="file" min-width="90" fixed="right">
+        </zm-table-column>
+        <zm-table-column label="校准金额" align="center" prop="detectAmount" width="120" />
+        <zm-table-column label="部门名称" align="center" prop="deptName" min-width="140" />
+        <zm-table-column
+          label="附件"
+          align="center"
+          prop="file"
+          min-width="90"
+          fixed="right"
+          action
+        >
           <template #default="scope">
             <el-button v-if="scope.row.file" link type="primary" @click="viewFile(scope.row.file)">
               查看
@@ -351,8 +342,8 @@
 
             <span v-else class="text-[#999ca1]">暂无附件</span>
           </template>
-        </el-table-column>
-      </el-table>
+        </zm-table-column>
+      </zm-table>
       <div class="iot-md-pagination absolute right-2 bottom-2">
         <Pagination
           :total="totalMsg"
@@ -400,6 +391,8 @@ const deptList = ref<Tree[]>([]) // 树形结构
 const deptList2 = ref<Tree[]>([]) // 树形结构
 import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE, getStrDictOptions, getBoolDictOptions } from '@/utils/dict'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 
 defineOptions({ name: 'IotQHSEMeasure' })
 

src/views/pms/qhse/iotmeasuredetect/index.vue

@@ -3,7 +3,7 @@
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
 
     <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
-      <ContentWrap>
+      <ContentWrap style="border: none">
         <!-- 搜索工作栏 -->
         <el-form :model="queryParams" ref="queryFormRef" :inline="true">
           <el-form-item label="检测/校准日期" prop="detectDate">
@@ -64,51 +64,41 @@
       </ContentWrap>
 
       <!-- 列表 -->
-      <ContentWrap class="flex-1 overflow-hidden mt-15px">
-        <el-table
-          v-loading="loading"
+      <ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
+        <zm-table
+          :loading="loading"
           :data="list"
           :stripe="true"
-          height="calc(85vh - 187px)"
+          height="calc(85vh - 195px)"
           :show-overflow-tooltip="true"
         >
-          <el-table-column :label="t('monitor.serial')" width="70" align="center">
+          <zm-table-column :label="t('monitor.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column label="计量器具名称" align="center" prop="measureName" min-width="160" />
-          <el-table-column label="证书编码" align="center" prop="measureCertNo" min-width="160" />
-          <el-table-column label="检测/校准日期" align="center" prop="detectDate" width="140">
+          </zm-table-column>
+          <zm-table-column label="计量器具名称" align="center" prop="measureName" />
+          <zm-table-column label="证书编码" align="center" prop="measureCertNo" />
+          <zm-table-column label="检测/校准日期" align="center" prop="detectDate" width="140">
             <template #default="scope">
               <span class="iot-md-date">{{ formatDateCorrectly(scope.row.detectDate) }}</span>
             </template>
-          </el-table-column>
-          <el-table-column label="检测/校准机构" align="center" prop="detectOrg" min-width="160" />
-          <el-table-column
-            label="检测/校准标准"
-            align="center"
-            prop="detectStandard"
-            min-width="160"
-          />
-          <el-table-column
-            label="检测/校准内容"
-            align="center"
-            prop="detectContent"
-            min-width="220"
-          >
+          </zm-table-column>
+          <zm-table-column label="检测/校准机构" align="center" prop="detectOrg" />
+          <zm-table-column label="检测/校准标准" align="center" prop="detectStandard" />
+          <zm-table-column label="检测/校准内容" align="center" prop="detectContent">
             <template #default="scope">
               <div class="detect-content" v-html="scope.row.detectContent"></div>
             </template>
-          </el-table-column>
-          <el-table-column label="检测/校准有效期" align="center" prop="validityPeriod" width="140">
+          </zm-table-column>
+          <zm-table-column label="检测/校准有效期" align="center" prop="validityPeriod" width="140">
             <template #default="scope">
               <span class="iot-md-date">{{ formatDateCorrectly(scope.row.validityPeriod) }}</span>
             </template>
-          </el-table-column>
-          <el-table-column label="校准金额" align="center" prop="detectAmount" width="120" />
-          <el-table-column label="部门名称" align="center" prop="deptName" min-width="140" />
-          <el-table-column label="附件" align="center" prop="file" min-width="90">
+          </zm-table-column>
+          <zm-table-column label="校准金额" align="center" prop="detectAmount" />
+          <zm-table-column label="部门名称" align="center" prop="deptName" />
+          <zm-table-column label="附件" align="center" prop="file" min-width="90">
             <template #default="scope">
               <el-button
                 v-if="scope.row.file"
@@ -119,16 +109,16 @@
                 查看
               </el-button>
             </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center" width="140" fixed="right">
+          </zm-table-column>
+          <zm-table-column label="操作" align="center" width="140" fixed="right" action>
             <template #default="scope">
               <el-button link type="primary" @click="openForm('update', scope.row.id)">
                 编辑
               </el-button>
               <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <div class="iot-md-pagination">
           <Pagination
             :total="total"
@@ -175,6 +165,8 @@ import { IotMeasureDetectApi, IotMeasureDetectVO } from '@/api/pms/qhse/index'
 import IotMeasureDetectForm from './IotMeasureDetectForm.vue'
 import { formatDate } from '@/utils/formatTime'
 import DeptTree from '@/views/system/user/DeptTree2.vue'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
 
 /** 计量器具-检测校准明细 列表 */
 defineOptions({ name: 'IotMeasureDetect' })

src/views/pms/qhse/jsa/index.vue

@@ -4,7 +4,7 @@
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
 
     <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
-      <ContentWrap>
+      <div style="overflow-y: hidden !important; border: none" class="bg-white px-2 py-2">
         <!-- 搜索工作栏 -->
         <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" border>
           <el-form-item label="序号" prop="jsaXh">
@@ -62,32 +62,32 @@
             </el-button>
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <ContentWrap style="border: none; margin-top: 10px">
+        <zm-table :loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
           <el-table-column :label="t('monitor.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
           </el-table-column>
 
-          <el-table-column label="JSA序号" align="center" prop="jsaXh" />
-          <el-table-column label="编号" align="center" prop="jsaNo" />
+          <zm-table-column label="JSA序号" align="center" prop="jsaXh" />
+          <zm-table-column label="编号" align="center" prop="jsaNo" />
 
-          <el-table-column label="日期" align="center" prop="jsaTime">
+          <zm-table-column label="日期" align="center" prop="jsaTime">
             <template #default="{ row }">
               {{ formatDate(row.jsaTime).substring(0, 10) }}
             </template>
-          </el-table-column>
-          <el-table-column label="工作任务" align="center" prop="jobTask" />
+          </zm-table-column>
+          <zm-table-column label="工作任务" align="center" prop="jobTask" />
 
-          <el-table-column label="工作地点" align="center" prop="jobAddress" />
+          <zm-table-column label="工作地点" align="center" prop="jobAddress" />
 
-          <el-table-column label="工作负责人" align="center" prop="jobDuty" />
+          <zm-table-column label="工作负责人" align="center" prop="jobDuty" />
 
-          <el-table-column label="附件" align="center" prop="jsaFile">
+          <zm-table-column label="附件" align="center" prop="jsaFile" min-width="90">
             <template #default="{ row }">
               <el-link
                 v-if="row.jsaFile"
@@ -99,9 +99,9 @@
               >
               <span v-else>-</span>
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
+          <zm-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
           <!-- <el-table-column
             label="创建时间"
             align="center"
@@ -110,7 +110,7 @@
             width="180px"
           /> -->
 
-          <el-table-column label="操作" align="center" min-width="120px">
+          <zm-table-column label="操作" align="center" min-width="120px" action fixed="right">
             <template #default="scope">
               <el-button
                 link
@@ -129,8 +129,8 @@
                 删除
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"

src/views/pms/qhse/ptw/index.vue

@@ -3,7 +3,7 @@
     <!-- 左侧部门树 -->
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
-      <ContentWrap>
+      <div class="bg-white rounded-sm px-2 py-2">
         <!-- 搜索工作栏 -->
         <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
           <el-form-item label="PTW编号" prop="ptwNo">
@@ -29,74 +29,74 @@
             >
           </el-form-item>
         </el-form>
-      </ContentWrap>
+      </div>
 
       <!-- 列表 -->
-      <ContentWrap class="flex-1 overflow-hidden mt-15px">
-        <el-table
-          v-loading="loading"
+      <ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
+        <zm-table
+          :loading="loading"
           :data="list"
           :stripe="true"
           height="calc(85vh - 130px)"
           :show-overflow-tooltip="true"
         >
-          <el-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
+          <zm-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="PTW编号" align="center" prop="ptwNo" width="100" fixed="left" />
-          <el-table-column label="PTW序号" align="center" prop="ptwXh" width="100" fixed="left" />
+          <zm-table-column label="PTW编号" align="center" prop="ptwNo" fixed="left" />
+          <zm-table-column label="PTW序号" align="center" prop="ptwXh" fixed="left" />
 
-          <el-table-column label="时间" align="center" show-overflow-tooltip>
+          <zm-table-column label="时间" align="center" show-overflow-tooltip>
             <template #default="{ row }">
               {{ formatDate(row.ptwTime).substring(0, 10) }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="作业票类型" align="center" width="120">
+          <zm-table-column label="作业票类型" align="center" width="120">
             <template #default="{ row }">
               <dict-tag :type="DICT_TYPE.QHSE_PTW_TYPE" :value="row.ptwType" />
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="作业分级" align="center">
+          <zm-table-column label="作业分级" align="center">
             <template #default="{ row }">
               <dict-tag :type="DICT_TYPE.QHSE_PTW_GRADE" :value="row.ptwGrade" />
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column
+          <zm-table-column
             label="作业地点"
             align="center"
             prop="workLocation"
             show-overflow-tooltip
           />
-          <el-table-column
+          <zm-table-column
             label="作业内容"
             align="center"
             prop="workContent"
             show-overflow-tooltip
           />
 
-          <el-table-column
+          <zm-table-column
             label="作业人员"
             align="center"
             prop="workPerson"
             show-overflow-tooltip
           />
 
-          <el-table-column label="监护人" align="center" prop="guardian" show-overflow-tooltip />
-          <el-table-column
+          <zm-table-column label="监护人" align="center" prop="guardian" show-overflow-tooltip />
+          <zm-table-column
             label="作业负责人"
             align="center"
             prop="workDuty"
             show-overflow-tooltip
           />
-          <el-table-column label="部门" align="center" prop="deptName" show-overflow-tooltip />
+          <zm-table-column label="部门" align="center" prop="deptName" show-overflow-tooltip />
 
-          <el-table-column label="附件" align="center">
+          <zm-table-column label="附件" align="center" min-width="90">
             <template #default="{ row }">
               <el-link
                 v-if="row.file"
@@ -108,33 +108,34 @@
               >
               <span v-else>-</span>
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column prop="createTime" label="创建时间" align="center" min-width="150">
+          <zm-table-column prop="createTime" label="创建时间" align="center" min-width="150">
             <template #default="{ row }">
               {{ formatDate(row.createTime) }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column
+          <zm-table-column
             label="备注"
             align="center"
             prop="remark"
             :show-overflow-tooltip="true"
           />
 
-          <el-table-column
+          <zm-table-column
             :label="t('devicePerson.operation')"
             align="center"
             fixed="right"
-            min-width="150px"
+            min-width="120px"
+            action
           >
             <template #default="scope">
               <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
               <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
 
         <!-- 分页 -->
         <Pagination

src/views/pms/qhse/safety/index.vue

@@ -3,7 +3,7 @@
     <!-- 左侧部门树 -->
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
     <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
-      <ContentWrap>
+      <ContentWrap style="border: none">
         <!-- 搜索工作栏 -->
         <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
           <el-form-item label="地址" prop="address">
@@ -44,27 +44,27 @@
       </ContentWrap>
 
       <!-- 列表 -->
-      <ContentWrap class="flex-1 overflow-hidden mt-15px">
-        <el-table
-          v-loading="loading"
+      <ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
+        <zm-table
+          :loading="loading"
           :data="list"
           :stripe="true"
-          height="calc(85vh - 130px)"
+          height="calc(85vh - 135px)"
           :show-overflow-tooltip="true"
         >
-          <el-table-column :label="t('monitor.serial')" width="70" align="center">
+          <zm-table-column :label="t('monitor.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="单位" align="center" prop="deptName" width="100" />
+          <zm-table-column label="单位" align="center" prop="deptName" />
 
-          <el-table-column label="地点" align="center" width="150" prop="address" />
+          <zm-table-column label="地点" align="center" prop="address" />
 
-          <el-table-column label="存在问题" align="center" prop="problem" width="150" />
+          <zm-table-column label="存在问题" align="center" prop="problem" />
 
-          <el-table-column label="附件" align="center" prop="hazardFile">
+          <zm-table-column label="附件" align="center" prop="hazardFile" min-width="90">
             <template #default="{ row }">
               <el-link
                 v-if="row.hazardFile"
@@ -76,11 +76,11 @@
               >
               <span v-else>-</span>
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="整改情况" align="center" prop="rectifyDesc" width="150" />
+          <zm-table-column label="整改情况" align="center" prop="rectifyDesc" />
 
-          <el-table-column label="整改附件" align="center" prop="rectifyFile">
+          <zm-table-column label="整改附件" align="center" prop="rectifyFile" min-width="90">
             <template #default="{ row }">
               <el-link
                 v-if="row.rectifyFile"
@@ -92,27 +92,28 @@
               >
               <span v-else>-</span>
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column prop="createTime" label="排查时间" align="center" min-width="150">
+          <zm-table-column prop="createTime" label="排查时间" align="center" min-width="150">
             <template #default="{ row }">
               {{ formatDate(row.createTime) }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="状态" align="center" width="90">
+          <zm-table-column label="状态" align="center" width="90">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.QHSE_HAZARD_STATUS" :value="scope.row.status" />
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="备注" align="center" prop="remark" width="120" />
+          <zm-table-column label="备注" align="center" prop="remark" />
 
-          <el-table-column
+          <zm-table-column
             :label="t('devicePerson.operation')"
             align="center"
             fixed="right"
             min-width="150px"
+            action
           >
             <template #default="scope">
               <el-button
@@ -133,8 +134,8 @@
               </el-button>
               <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
 
         <!-- 分页 -->
         <Pagination
@@ -289,6 +290,9 @@ import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 
 import { selectedDeptsEmployee } from '@/api/system/user'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 defineOptions({ name: 'IotQHSECertificate' })
 
 const loading = ref(true) // 列表的加载中

src/views/pms/qhse/socData/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 搜索工作栏 -->
-  <ContentWrap>
+  <div class="bg-white px-2 py-2 rounded-sm">
     <el-form
       class="-mb-15px"
       :model="queryParams"
@@ -48,35 +48,35 @@
         </el-button>
       </el-form-item>
     </el-form>
-  </ContentWrap>
+  </div>
 
   <!-- 列表 -->
-  <ContentWrap>
-    <el-table
-      v-loading="loading"
+  <ContentWrap style="border: none; margin-top: 20px">
+    <zm-table
+      :loading="loading"
       :data="list"
       row-key="id"
       :default-expand-all="isExpandAll"
       v-if="refreshTable"
       @row-click="handleClick"
     >
-      <el-table-column prop="name" label="分类名称" width="280" :show-overflow-tooltip="true" />
+      <zm-table-column prop="name" label="分类名称" :show-overflow-tooltip="true" align="left" />
       <!--      <el-table-column prop="code" label="分类编码" />-->
-      <el-table-column prop="sort" label="排序" />
-      <el-table-column prop="status" label="状态">
+      <zm-table-column prop="sort" label="排序" width="90" />
+      <zm-table-column prop="status" label="状态" width="90" align="center">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
-      </el-table-column>
-      <el-table-column prop="remark" label="备注" />
-      <el-table-column
+      </zm-table-column>
+      <zm-table-column prop="remark" label="备注" />
+      <zm-table-column
         label="创建时间"
         align="center"
         prop="createTime"
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column label="操作" align="center">
+      <zm-table-column label="操作" align="center" action fixed="right" width="120">
         <template #default="scope">
           <el-button
             link
@@ -95,8 +95,8 @@
             删除
           </el-button>
         </template>
-      </el-table-column>
-    </el-table>
+      </zm-table-column>
+    </zm-table>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->

src/views/pms/qhse/socSummary/index.vue

@@ -4,7 +4,7 @@
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
 
     <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
-      <ContentWrap>
+      <ContentWrap style="border: none">
         <!-- 搜索工作栏 -->
         <el-form
           class="-mb-15px"
@@ -61,17 +61,17 @@
       </ContentWrap>
 
       <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-          <el-table-column :label="t('monitor.serial')" width="70" align="center">
+      <ContentWrap style="border: none">
+        <zm-table :loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+          <zm-table-column :label="t('monitor.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column label="项目部" align="center" prop="projectName" width="120" />
+          </zm-table-column>
+          <zm-table-column label="项目部" align="center" prop="projectName" />
           <!-- <el-table-column label="部门名称" align="center" prop="deptName" /> -->
-          <el-table-column label="队伍名称" align="center" prop="deptName" />
-          <el-table-column
+          <zm-table-column label="队伍名称" align="center" prop="deptName" />
+          <zm-table-column
             label="观察日期"
             align="center"
             prop="observationDate"
@@ -80,12 +80,12 @@
             width="180px"
           />
 
-          <el-table-column label="类型名称" align="center" prop="className" min-width="120" />
-          <el-table-column label="姓名" align="center" prop="userName" />
-          <el-table-column label="岗位" align="center" prop="post" />
+          <zm-table-column label="类型名称" align="center" prop="className" min-width="120" />
+          <zm-table-column label="姓名" align="center" prop="userName" />
+          <zm-table-column label="岗位" align="center" prop="post" />
 
-          <el-table-column label="详细描述" align="center" prop="remark" />
-          <el-table-column
+          <zm-table-column label="详细描述" align="center" prop="remark" />
+          <zm-table-column
             label="创建时间"
             align="center"
             prop="createTime"
@@ -93,7 +93,7 @@
             width="180px"
           />
 
-          <el-table-column label="操作" align="center" min-width="180px" fixed="right">
+          <zm-table-column label="操作" align="center" min-width="180px" fixed="right" action>
             <template #default="scope">
               <!-- <el-button link type="primary" @click="view(scope.row.id)"> 查看 </el-button> -->
               <el-button link type="primary" @click="downloadSOC(scope.row)"> 下载 </el-button>
@@ -114,8 +114,8 @@
                 删除
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"
@@ -163,6 +163,9 @@ import DeptTree from '@/views/system/user/DeptTree2.vue'
 import { renderAsync } from 'docx-preview'
 import { Close } from '@element-plus/icons-vue'
 
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+const { ZmTable, ZmTableColumn } = useTableComponents()
+
 /** SOC卡汇总 列表 */
 defineOptions({ name: 'IotSocSummary' })
 

src/views/report-statistics/device_book/index2.vue

@@ -95,8 +95,8 @@
 
       <!-- 列表 -->
       <ContentWrap style="border: 0; margin-top: 10px">
-        <el-table
-          v-loading="loading"
+        <zm-table
+          :loading="loading"
           :data="list"
           :stripe="true"
           :show-overflow-tooltip="true"
@@ -104,36 +104,29 @@
           ref="tableRef"
           :height="tableHeight"
         >
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center" fixed="left">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center" fixed="left">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column
+          <zm-table-column
             label="设备编码"
             sortable
             align="center"
             prop="deviceCode"
-            width="150"
             fixed="left"
           />
-          <el-table-column
-            :label="t('iotDevice.name')"
-            sortable
-            align="center"
-            prop="deviceName"
-            min-width="250"
-          >
+          <zm-table-column :label="t('iotDevice.name')" sortable align="center" prop="deviceName">
             <template #default="scope">
               <el-link :underline="false" type="primary" @click="handleDetail(scope.row.id)">
                 {{ scope.row.deviceName }}
               </el-link>
             </template>
-          </el-table-column>
-          <el-table-column label="公司" align="center" prop="company" min-width="150" />
-          <el-table-column label="部门名称" align="center" prop="deptName" min-width="150" />
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column label="公司" align="center" prop="company" />
+          <zm-table-column label="部门名称" align="center" prop="deptName" />
+          <zm-table-column
             :label="t('iotDevice.status')"
             align="center"
             prop="deviceStatus"
@@ -142,8 +135,8 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="scope.row.deviceStatus" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('iotDevice.assets')"
             align="center"
             prop="assetProperty"
@@ -152,80 +145,28 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_ASSET_PROPERTY" :value="scope.row.assetProperty" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('iotDevice.assetClass')"
             align="center"
             prop="assetClassName"
             min-width="170"
           />
-          <el-table-column label="生产厂家" align="center" prop="manufacturer" min-width="200" />
-          <el-table-column label="生产日期" align="center" min-width="200">
+          <zm-table-column label="生产厂家" align="center" prop="manufacturer" />
+          <zm-table-column label="生产日期" align="center" min-width="120">
             <template #default="scope">
               {{ formatDate(scope.row.manDate).substring(0, 10) }}
             </template>
-          </el-table-column>
-          <el-table-column label="投运日期" align="center" min-width="200">
+          </zm-table-column>
+          <zm-table-column label="投运日期" align="center" min-width="120">
             <template #default="scope">
               {{ formatDate(scope.row.enableDate).substring(0, 10) }}
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('deviceForm.brand')"
-            align="center"
-            prop="brandName"
-            min-width="150"
-          />
-          <el-table-column
-            :label="t('deviceForm.model')"
-            align="center"
-            prop="model"
-            min-width="170"
-          />
-          <el-table-column
-            :label="t('devicePerson.rp')"
-            align="center"
-            prop="chargeName"
-            min-width="170"
-          />
-          <!-- <el-table-column
-            :label="t('deviceForm.useProject')"
-            align="center"
-            prop="useProject"
-            min-width="170"
-          />
-          <el-table-column
-            :label="t('deviceForm.assetOwner')"
-            align="center"
-            prop="assetOwnership"
-            min-width="170"
-          /> -->
-          <!-- <el-table-column
-            :label="t('operationFill.operation')"
-            align="center"
-            min-width="180px"
-            fixed="right"
-          >
-            <template #default="scope">
-              <el-button
-                link
-                type="primary"
-                @click="openForm('update', scope.row.id)"
-                v-hasPermi="['rq:iot-device:update']"
-              >
-                {{ t('iotDevice.update') }}
-              </el-button>
-              <el-button
-                link
-                type="danger"
-                @click="handleDelete(scope.row.id)"
-                v-hasPermi="['rq:iot-device:delete']"
-              >
-                {{ t('iotDevice.delete') }}
-              </el-button>
-            </template>
-          </el-table-column> -->
-        </el-table>
+          </zm-table-column>
+          <zm-table-column :label="t('deviceForm.brand')" align="center" prop="brandName" />
+          <zm-table-column :label="t('deviceForm.model')" align="center" prop="model" />
+          <zm-table-column :label="t('devicePerson.rp')" align="center" prop="chargeName" action />
+        </zm-table>
         <!-- 分页 -->
         <Pagination
           :total="total"

src/views/report-statistics/fault_report/index.vue

@@ -170,43 +170,28 @@
 
       <!-- 列表 -->
       <ContentWrap style="border: 0; margin-top: 10px">
-        <el-table
-          v-loading="loading"
+        <zm-table
+          :loading="loading"
           :data="list"
-          height="45.6vh"
+          height="48vh"
           :stripe="true"
           :show-overflow-tooltip="true"
         >
-          <el-table-column :label="t('fault.serial')" width="70" align="center">
+          <zm-table-column :label="t('fault.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column
-            :label="t('fault.faultTitle')"
-            prop="failureName"
-            min-width="200"
-            align="center"
-          />
-          <el-table-column
-            :label="t('iotMaintain.deviceCode')"
-            align="center"
-            prop="deviceCode"
-            width="200"
-          />
-          <el-table-column
-            :label="t('fault.deviceName')"
-            align="center"
-            prop="deviceName"
-            min-width="200"
-          />
-          <el-table-column :label="t('fault.status')" align="center" prop="status" min-width="110">
+          <zm-table-column :label="t('fault.faultTitle')" prop="failureName" align="center" />
+          <zm-table-column :label="t('iotMaintain.deviceCode')" align="center" prop="deviceCode" />
+          <zm-table-column :label="t('fault.deviceName')" align="center" prop="deviceName" />
+          <zm-table-column :label="t('fault.status')" align="center" prop="status" min-width="110">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_FAILURE_STATUS" :value="scope.row.status" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('faultForm.failureType')"
             align="center"
             prop="failureType"
@@ -215,12 +200,12 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.FAILURE_TYPE" :value="scope.row.failureType" />
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="故障系统" align="center" prop="failureSystem" min-width="200" />
+          <zm-table-column label="故障系统" align="center" prop="failureSystem" />
 
-          <el-table-column label="故障频次" align="center" prop="failureNum" min-width="200" />
-          <el-table-column
+          <zm-table-column label="故障频次" align="center" prop="failureNum" />
+          <zm-table-column
             :label="t('fault.approvalStatus')"
             align="center"
             prop="auditStatus"
@@ -229,32 +214,33 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.CRM_AUDIT_STATUS" :value="scope.row.auditStatus" />
             </template>
-          </el-table-column>
-          <el-table-column :label="t('fault.solve')" align="center" prop="ifDeal">
+          </zm-table-column>
+          <zm-table-column :label="t('fault.solve')" align="center" prop="ifDeal">
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.ifDeal" />
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             :label="t('fault.failureTime')"
             align="center"
             prop="failureTime"
             :formatter="dateFormatter"
             min-width="180px"
           />
-          <el-table-column :label="t('fault.solveTime')" align="center" prop="dealHour">
+          <zm-table-column :label="t('fault.solveTime')" align="center" prop="dealHour">
             <template #default="scope">
               {{ scope.row.dealHour && scope.row.dealHour > 0 ? scope.row.dealHour + 'H' : '' }}
             </template>
-          </el-table-column>
-          <el-table-column
+          </zm-table-column>
+          <zm-table-column
             label="上报时间"
             align="center"
             prop="createTime"
             :formatter="dateFormatter"
             min-width="180px"
+            action
           />
-        </el-table>
+        </zm-table>
 
         <!-- 分页 -->
         <Pagination
@@ -508,7 +494,7 @@ watch(
     transform 0.3s ease,
     box-shadow 0.3s ease;
   backdrop-filter: blur(12px);
-  height: 200px;
+  height: 170px;
   cursor: pointer;
   overflow: hidden; /* 防止闪光效果溢出 */
 }

src/views/report-statistics/inspection_order/index.vue

@@ -158,89 +158,89 @@
       <!-- 列表 -->
       <ContentWrap style="border: 0; margin-top: 10px">
         <!-- 异常设备 -->
-        <el-table
+        <zm-table
           v-if="isException"
-          v-loading="loading"
+          :loading="loading"
           :data="list3"
           :stripe="true"
           :show-overflow-tooltip="true"
         >
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column label="设备编码" align="center" prop="deviceCode" />
-          <el-table-column :label="t('monitor.deviceName')" align="center">
+          <zm-table-column label="设备编码" align="center" prop="deviceCode" />
+          <zm-table-column :label="t('monitor.deviceName')" align="center">
             <template #default="{ row }">
               <el-link type="primary" :underline="false" @click="goDetail(row.deviceCode)">{{
                 row.deviceName
               }}</el-link>
             </template>
-          </el-table-column>
-          <el-table-column label="工单数量" align="center" prop="orderCount" />
-        </el-table>
+          </zm-table-column>
+          <zm-table-column label="工单数量" align="center" prop="orderCount" />
+        </zm-table>
 
         <!-- 巡检异常点 -->
-        <el-table
+        <zm-table
           v-else-if="isExceptionPoint"
-          v-loading="loading"
+          :loading="loading"
           :data="list2"
           :stripe="true"
           :show-overflow-tooltip="true"
         >
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column :label="t('bomList.name')" align="center" prop="orderName" />
-          <el-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
-          <el-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
-          <el-table-column :label="t('operationFill.duty')" align="center" prop="charge" />
-          <el-table-column :label="t('inspect.InspectionItems')" align="center" prop="item" />
-          <el-table-column :label="t('inspect.isException')" align="center" prop="ifNormal">
+          </zm-table-column>
+          <zm-table-column :label="t('bomList.name')" align="center" prop="orderName" />
+          <zm-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
+          <zm-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
+          <zm-table-column :label="t('operationFill.duty')" align="center" prop="charge" />
+          <zm-table-column :label="t('inspect.InspectionItems')" align="center" prop="item" />
+          <zm-table-column :label="t('inspect.isException')" align="center" prop="ifNormal">
             <template #default="scope">
               <span v-if="scope.row.ifNormal" style="color: dodgerblue">正常</span>
               <span v-else-if="scope.row.ifNormal === null" style="color: #101010">待填写</span>
               <span v-else-if="!scope.row.ifNormal" style="color: orangered">异常</span>
             </template>
-          </el-table-column>
-          <el-table-column :label="t('inspect.exceptionDes')" align="center" prop="description" />
-        </el-table>
+          </zm-table-column>
+          <zm-table-column
+            :label="t('inspect.exceptionDes')"
+            align="center"
+            prop="description"
+            action
+          />
+        </zm-table>
 
-        <el-table
+        <zm-table
           v-else
-          v-loading="loading"
+          :loading="loading"
           :row-class-name="tableRowClassName"
           :data="list"
           :show-overflow-tooltip="true"
           @row-click="handleRowClick"
           height="48vh"
         >
-          <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+          <zm-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
               {{ scope.$index + 1 }}
             </template>
-          </el-table-column>
-          <el-table-column
-            :label="t('bomList.name')"
-            align="center"
-            prop="inspectOrderTitle"
-            min-width="300"
-          />
+          </zm-table-column>
+          <zm-table-column :label="t('bomList.name')" align="center" prop="inspectOrderTitle" />
 
-          <el-table-column label="公司" align="center" prop="company" min-width="110" />
-          <el-table-column label="项目" align="center" prop="project" min-width="110" />
+          <zm-table-column label="公司" align="center" prop="company" />
+          <zm-table-column label="项目" align="center" prop="project" />
 
-          <el-table-column
+          <zm-table-column
             :label="t('route.orderType')"
             align="center"
             prop="type"
             min-width="90"
           />
-          <el-table-column
+          <zm-table-column
             :label="t('operationFill.status')"
             align="center"
             prop="status"
@@ -249,38 +249,32 @@
             <template #default="scope">
               <dict-tag :type="DICT_TYPE.PMS_INSPECT_ORDER_STATUS" :value="scope.row.status" />
             </template>
-          </el-table-column>
+          </zm-table-column>
 
-          <el-table-column
-            v-if="statusList.ignore"
-            label="忽略原因"
-            align="center"
-            prop="reason"
-            min-width="110"
-          />
+          <zm-table-column v-if="statusList.ignore" label="忽略原因" align="center" prop="reason" />
 
-          <el-table-column label="设备明细" align="center" prop="deviceInfo" min-width="110" />
+          <zm-table-column label="设备明细" align="center" prop="deviceInfo" />
 
-          <el-table-column
+          <zm-table-column
             :label="t('iotMaintain.PersonInCharge')"
             align="center"
             prop="chargeName"
-            min-width="110"
           />
 
-          <el-table-column
+          <zm-table-column
             :label="t('iotMaintain.operation')"
             align="center"
-            min-width="160px"
+            min-width="150px"
             fixed="right"
+            action
           >
             <template #default="scope">
               <el-button link type="primary" @click="openForm(scope.row.id)">
                 异常巡检点
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </zm-table-column>
+        </zm-table>
 
         <!-- 分页 -->
         <Pagination
@@ -294,26 +288,31 @@
   </el-row>
 
   <el-drawer v-model="drawerVisible" title="异常点数量" direction="rtl" size="50%">
-    <el-table v-loading="loading" :data="deviceDetail" :stripe="true" :show-overflow-tooltip="true">
+    <zm-table :loading="loading" :data="deviceDetail" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
         <template #default="scope">
           {{ scope.$index + 1 }}
         </template>
       </el-table-column>
-      <el-table-column :label="t('bomList.name')" align="center" prop="orderName" />
-      <el-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
-      <el-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
-      <el-table-column :label="t('operationFill.duty')" align="center" prop="charge" />
-      <el-table-column :label="t('inspect.InspectionItems')" align="center" prop="item" />
-      <el-table-column :label="t('inspect.isException')" align="center" prop="ifNormal">
+      <zm-table-column :label="t('bomList.name')" align="center" prop="orderName" />
+      <zm-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
+      <zm-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
+      <zm-table-column :label="t('operationFill.duty')" align="center" prop="charge" />
+      <zm-table-column :label="t('inspect.InspectionItems')" align="center" prop="item" />
+      <zm-table-column :label="t('inspect.isException')" align="center" prop="ifNormal">
         <template #default="scope">
           <span v-if="scope.row.ifNormal" style="color: dodgerblue">正常</span>
           <span v-else-if="scope.row.ifNormal === null" style="color: #101010">待填写</span>
           <span v-else-if="!scope.row.ifNormal" style="color: orangered">异常</span>
         </template>
-      </el-table-column>
-      <el-table-column :label="t('inspect.exceptionDes')" align="center" prop="description" />
-    </el-table>
+      </zm-table-column>
+      <zm-table-column
+        :label="t('inspect.exceptionDes')"
+        align="center"
+        prop="description"
+        action
+      />
+    </zm-table>
 
     <Pagination
       :total="detailTotal"
@@ -705,7 +704,7 @@ onMounted(() => {
     transform 0.3s ease,
     box-shadow 0.3s ease;
   backdrop-filter: blur(12px);
-  height: 200px;
+  height: 170px;
   cursor: pointer;
   overflow: hidden; /* 防止闪光效果溢出 */
 }

src/views/system/user/HazardTree.vue

@@ -4,11 +4,11 @@
     :span="isCollapsed ? 0 : 4"
     :xs="24"
   >
-    <ContentWrap class="h-[85vh]">
+    <div class="h-[85vh]">
       <div
-        class="dept-tree"
+        class="dept-tree px-2 py-2"
         :class="{ 'is-collapsed': isCollapsed }"
-        style="overflow-y: auto; overflow-x: auto"
+        style="overflow-y: auto; overflow-x: auto; background: #fff"
       >
         <div class="head-container" style="display: flex; flex-direction: row">
           <el-input
@@ -50,7 +50,7 @@
           <li @click="handleMenuClick('delete')">删除</li>
         </ul>
       </div>
-    </ContentWrap>
+    </div>
   </el-col>
 
   <!-- 切换按钮移到外部，始终可见 -->