工单完成情况 运维成本

src/views/report-statistics/costs.vue

@@ -6,6 +6,7 @@ import { IotReportApi } from '@/api/pms/report'
 import { useDebounceFn } from '@vueuse/core'
 import download from '@/utils/download'
 import { rangeShortcuts } from '@/utils/formatTime'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 
 // 定义时间类型
 type TimeType = 'year' | 'month' | 'day'
@@ -205,6 +206,7 @@ function handleReset() {
 }
 
 const exportLoading = ref(false)
+const { ZmTable, ZmTableColumn } = useTableComponents<any>()
 
 const handleExport = async () => {
   exportLoading.value = true
@@ -356,29 +358,29 @@ const handleChange = () => {
       <div class="flex-1 relative">
         <el-auto-resizer class="absolute">
           <template #default="{ width, height }">
-            <el-table
+            <ZmTable
               :data="list"
-              v-loading="loading"
-              stripe
-              class="absolute"
-              :max-height="height"
-              :height="height"
-              show-overflow-tooltip
+              :loading="loading"
               :width="width"
-              scrollbar-always-on
+              :height="height"
+              :max-height="height"
+              show-border
             >
-              <el-table-column label="序号" type="index" width="50" align="center" />
-              <el-table-column label="日期" prop="date" align="center" />
-              <el-table-column label="类别" prop="type" align="center" />
-              <el-table-column label="设备编号" prop="deviceCode" align="center" />
-              <el-table-column label="设备名称" prop="deviceName" align="center" />
-              <el-table-column
-                label="成本"
-                prop="cost"
-                align="center"
-                :formatter="(row) => (row.cost ?? 0) + '元'"
+              <ZmTableColumn
+                label="序号"
+                type="index"
+                :width="70"
+                fixed="left"
+                hide-in-column-settings
               />
-            </el-table>
+              <ZmTableColumn label="日期" prop="date" min-width="140" />
+              <ZmTableColumn label="类别" prop="type" min-width="120" />
+              <ZmTableColumn label="设备编号" prop="deviceCode" min-width="150" />
+              <ZmTableColumn label="设备名称" prop="deviceName" min-width="180" />
+              <ZmTableColumn label="成本" prop="cost" min-width="120">
+                <template #default="{ row }"> {{ row.cost ?? 0 }}元 </template>
+              </ZmTableColumn>
+            </ZmTable>
           </template>
         </el-auto-resizer>
       </div>
@@ -400,19 +402,4 @@ const handleChange = () => {
   </div>
 </template>
 
-<style scoped>
-:deep(.el-table) {
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
-
-  .el-table__cell {
-    height: 52px;
-  }
-
-  .el-table__header-wrapper {
-    .el-table__cell {
-      background: var(--el-fill-color-light);
-    }
-  }
-}
-</style>
+<style scoped></style>

src/views/report-statistics/work-order-completion.vue

@@ -7,6 +7,7 @@ import CountTo from '@/components/count-to1.vue'
 import { IotReportApi } from '@/api/pms/report'
 import { rangeShortcuts } from '@/utils/formatTime'
 import download from '@/utils/download'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 
 // 定义时间类型
 type TimeType = 'year' | 'month' | 'day'
@@ -261,6 +262,7 @@ const handleChange = () => {
 const message = useMessage()
 
 const exportLoading = ref(false)
+const { ZmTable, ZmTableColumn } = useTableComponents<any>()
 
 async function handleExport() {
   try {
@@ -418,48 +420,33 @@ async function handleExport() {
       <div class="flex-1 relative">
         <el-auto-resizer class="absolute">
           <template #default="{ width, height }">
-            <el-table
+            <ZmTable
               :data="list"
-              v-loading="loading"
-              stripe
-              class="absolute"
-              :max-height="height"
-              :height="height"
-              show-overflow-tooltip
+              :loading="loading"
               :width="width"
-              scrollbar-always-on
+              :height="height"
+              :max-height="height"
+              show-border
             >
-              <el-table-column label="序号" type="index" width="60" align="center" />
-              <el-table-column label="工单类别" prop="type" align="center" width="80" />
-              <el-table-column
-                label="生成日期"
-                prop="createTime"
-                align="center"
-                width="160"
-                :formatter="(row) => row.createTime.split(' ')[0]"
+              <ZmTableColumn
+                label="序号"
+                type="index"
+                :width="70"
+                fixed="left"
+                hide-in-column-settings
               />
-              <el-table-column label="公司" prop="company" align="center" width="100" />
-              <el-table-column label="项目部" prop="project" align="center" />
-              <el-table-column label="队伍" prop="deptName" align="center" />
-              <el-table-column label="状态" prop="status" align="center" width="80">
-                <!-- <template #default="{ row }">
-                  <el-tag v-if="row.status === '已完成'" type="success" effect="dark" size="small"
-                    >已完成</el-tag
-                  >
-                  <el-tag
-                    v-else-if="row.status === '未完成'"
-                    type="danger"
-                    effect="dark"
-                    size="small"
-                    >未完成</el-tag
-                  >
-                  <el-tag v-else type="warning" effect="plain" size="small">{{
-                    row.status
-                  }}</el-tag>
-                </template> -->
-              </el-table-column>
-              <el-table-column label="设备" prop="device" align="center" />
-            </el-table>
+              <ZmTableColumn label="工单类别" prop="type" min-width="110" />
+              <ZmTableColumn label="生成日期" prop="createTime" min-width="140">
+                <template #default="{ row }">
+                  {{ row.createTime ? row.createTime.split(' ')[0] : '' }}
+                </template>
+              </ZmTableColumn>
+              <ZmTableColumn label="公司" prop="company" min-width="120" />
+              <ZmTableColumn label="项目部" prop="project" min-width="160" />
+              <ZmTableColumn label="队伍" prop="deptName" min-width="140" />
+              <ZmTableColumn label="状态" prop="status" min-width="100" />
+              <ZmTableColumn label="设备" prop="device" min-width="180" />
+            </ZmTable>
           </template>
         </el-auto-resizer>
       </div>
@@ -481,19 +468,4 @@ async function handleExport() {
   </div>
 </template>
 
-<style scoped>
-:deep(.el-table) {
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
-
-  .el-table__cell {
-    height: 52px;
-  }
-
-  .el-table__header-wrapper {
-    .el-table__cell {
-      background: var(--el-fill-color-light);
-    }
-  }
-}
-</style>
+<style scoped></style>