Przeglądaj źródła

🦄 refactor: 调整瑞都看板

Zimo 3 godzin temu
rodzic
commit
232cd58809

+ 174 - 229
src/views/pms/iotrddailyreport/summary.vue

@@ -4,7 +4,6 @@ import { IotRdDailyReportApi } from '@/api/pms/iotrddailyreport'
 import { useDebounceFn } from '@vueuse/core'
 import CountTo from '@/components/count-to1.vue'
 import * as echarts from 'echarts'
-// import UnfilledReportDialog from './UnfilledReportDialog.vue'
 
 import { Motion, AnimatePresence } from 'motion-v'
 
@@ -12,6 +11,7 @@ import { rangeShortcuts } from '@/utils/formatTime'
 
 import { useUserStore } from '@/store/modules/user'
 import download from '@/utils/download'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 
 const deptId = useUserStore().getUser.deptId
 
@@ -36,13 +36,6 @@ const query = ref<Query>({
 })
 
 const totalWorkKeys: [string, string | undefined, string, string, number][] = [
-  [
-    'cumulativeFuels',
-    '万升',
-    '累计油耗',
-    'i-material-symbols:directions-car-outline-rounded text-sky',
-    2
-  ],
   [
     'cumulativeBridgePlug',
     undefined,
@@ -85,7 +78,22 @@ const totalWorkKeys: [string, string | undefined, string, string, number][] = [
     'i-material-symbols:water-drop-outline-rounded text-sky',
     2
   ],
-  ['taici', undefined, '台次', 'i-material-symbols:check-circle-outline-rounded text-emerald', 0]
+  ['taici', undefined, '台次', 'i-material-symbols:check-circle-outline-rounded text-emerald', 0],
+
+  [
+    'utilizationRate',
+    '%',
+    '设备利用率',
+    'i-material-symbols:check-circle-outline-rounded text-emerald',
+    0
+  ],
+  [
+    'cumulativeFuels',
+    '万升',
+    '累计油耗',
+    'i-material-symbols:directions-car-outline-rounded text-sky',
+    2
+  ]
 ]
 
 const totalWork = ref({
@@ -96,7 +104,8 @@ const totalWork = ref({
   cumulativeWorkingWell: 0,
   cumulativeWorkingLayers: 0,
   cumulativeHourCount: 0,
-  cumulativeWaterVolume: 0
+  cumulativeWaterVolume: 0,
+  utilizationRate: 0
 })
 
 const totalLoading = ref(false)
@@ -107,18 +116,6 @@ const getTotal = useDebounceFn(async () => {
   const { pageNo, pageSize, ...other } = query.value
 
   try {
-    // let res1: any[]
-    // if (query.value.createTime && query.value.createTime.length === 2) {
-    //   res1 = await IotRhDailyReportApi.rhDailyReportStatistics({
-    //     createTime: query.value.createTime,
-    //     deptId: query.value.deptId
-    //   })
-
-    //   totalWork.value.totalCount = res1[0].count
-    //   totalWork.value.alreadyReported = res1[1].count
-    //   totalWork.value.notReported = res1[2].count
-    // }
-
     const res2 = await IotRdDailyReportApi.totalWorkload(other)
 
     totalWork.value = {
@@ -131,7 +128,8 @@ const getTotal = useDebounceFn(async () => {
       cumulativeHourCount: res2.cumulativeHourCount || 0,
       cumulativeWaterVolume: res2.cumulativeWaterVolume || 0,
       ...res2,
-      cumulativeFuels: (res2.cumulativeFuels || 0) / 10000
+      cumulativeFuels: (res2.cumulativeFuels || 0) / 10000,
+      utilizationRate: Number(((res2.utilizationRate || 0) * 100).toFixed(2))
     }
   } finally {
     totalLoading.value = false
@@ -151,57 +149,15 @@ interface List {
   cumulativeWorkingLayers: number | null
   cumulativePumpTrips: number | null
   cumulativeMixSand: number | null
+  utilizationRate: number | null
 }
 
 const list = ref<List[]>([])
 
 const type = ref('2')
 
-const columns = (_type: string) => {
-  return [
-    {
-      label: '部门',
-      prop: 'name'
-    },
-    {
-      label: '油耗(万升)',
-      prop: 'totalDailyFuel'
-    },
-    {
-      label: '桥塞',
-      prop: 'cumulativeBridgePlug'
-    },
-    {
-      label: '趟数',
-      prop: 'cumulativeRunCount'
-    },
-    {
-      label: '井数',
-      prop: 'cumulativeWorkingWell'
-    },
-    {
-      label: '段数',
-      prop: 'cumulativeWorkingLayers'
-    },
-    {
-      label: '小时(H)',
-      prop: 'cumulativeHourCount'
-    },
-    {
-      label: '水方量(方)',
-      prop: 'cumulativeWaterVolume'
-    }
-  ]
-}
-
 const listLoading = ref(false)
 
-// const formatter = (row: List, column: any) => {
-//   if (column.property === 'transitTime') {
-//     return (Number(row.transitTime ?? 0) * 100).toFixed(2) + '%'
-//   } else return row[column.property] ?? 0
-// }
-
 const getList = useDebounceFn(async () => {
   listLoading.value = true
   try {
@@ -225,7 +181,8 @@ const getList = useDebounceFn(async () => {
           cumulativeWaterVolume: other.cumulativeWaterVolume || 0,
           cumulativeWorkingLayers: other.cumulativeWorkingLayers || 0,
           cumulativePumpTrips: other.cumulativePumpTrips || 0,
-          cumulativeMixSand: other.cumulativeMixSand || 0
+          cumulativeMixSand: other.cumulativeMixSand || 0,
+          utilizationRate: other.utilizationRate || 0
         }
       }
     )
@@ -266,7 +223,8 @@ const legend = ref<string[][]>([
   ['水方量 (方)', 'cumulativeWaterVolume'],
   ['台次(泵车)', 'cumulativePumpTrips'],
   ['段数', 'cumulativeWorkingLayers'],
-  ['台次(仪表/混砂)', 'cumulativeMixSand']
+  ['台次(仪表/混砂)', 'cumulativeMixSand'],
+  ['设备利用率 (%)', 'utilizationRate']
 ])
 
 const chartData = ref<Record<string, number[]>>({
@@ -293,7 +251,8 @@ const getChart = useDebounceFn(async () => {
       cumulativeWaterVolume: res.map((item) => item.cumulativeWaterVolume || 0),
       cumulativeWorkingLayers: res.map((item) => item.cumulativeWorkingLayers || 0),
       cumulativePumpTrips: res.map((item) => item.cumulativePumpTrips || 0),
-      cumulativeMixSand: res.map((item) => item.cumulativeMixSand || 0)
+      cumulativeMixSand: res.map((item) => item.cumulativeMixSand || 0),
+      utilizationRate: res.map((item) => Number(((item.utilizationRate || 0) * 100).toFixed(2)))
     }
 
     xAxisData.value = res.map((item) => item.reportDate || '')
@@ -383,7 +342,6 @@ const render = () => {
       smooth: true,
       showSymbol: true,
       data: chartData.value[key].map((value) => {
-        // return value
         if (value === 0) return 0
 
         const isPositive = value > 0
@@ -434,11 +392,6 @@ const resetQuery = () => {
 watch(
   () => query.value.createTime,
   () => {
-    // if (!val) {
-    //   totalWork.value.totalCount = 0
-    //   totalWork.value.notReported = 0
-    //   totalWork.value.alreadyReported = 0
-    // }
     handleQuery(false)
   }
 )
@@ -501,12 +454,15 @@ const tolist = (id: number) => {
     }
   })
 }
+
+const { ZmTable, ZmTableColumn } = useTableComponents()
 </script>
 
 <template>
-  <div class="grid grid-cols-[16%_1fr] gap-5">
-    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4">
-      <!-- <DeptTree2 :deptId="id" @node-click="handleDeptNodeClick" /> -->
+  <div
+    class="grid grid-cols-[15%_1fr] grid-rows-[62px_164px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
+  >
+    <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg row-span-3">
       <DeptTreeSelect
         :deptId="id"
         :top-id="163"
@@ -514,174 +470,163 @@ const tolist = (id: number) => {
         @node-click="handleDeptNodeClick"
       />
     </div>
-    <div class="grid grid-rows-[62px_164px_1fr] h-full gap-4">
-      <el-form
-        size="default"
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
-      >
-        <div class="flex items-center gap-8">
-          <el-form-item label="项目">
-            <el-input
-              v-model="query.contractName"
-              placeholder="请输入项目"
-              clearable
-              @keyup.enter="handleQuery()"
-              class="!w-240px"
-            />
-          </el-form-item>
-          <el-form-item label="任务">
-            <el-input
-              v-model="query.taskName"
-              placeholder="请输入任务"
-              clearable
-              @keyup.enter="handleQuery()"
-              class="!w-240px"
-            />
-          </el-form-item>
-          <el-form-item label="创建时间">
-            <el-date-picker
-              v-model="query.createTime"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              :shortcuts="rangeShortcuts"
-              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-              class="!w-220px"
-            />
-          </el-form-item>
-        </div>
-        <el-form-item>
-          <el-button type="primary" @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
+      size="default"
+      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
+    >
+      <div class="flex items-center gap-8">
+        <el-form-item label="项目">
+          <el-input
+            v-model="query.contractName"
+            placeholder="请输入项目"
+            clearable
+            @keyup.enter="handleQuery()"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="任务">
+          <el-input
+            v-model="query.taskName"
+            placeholder="请输入任务"
+            clearable
+            @keyup.enter="handleQuery()"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="query.createTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :shortcuts="rangeShortcuts"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-220px"
+          />
         </el-form-item>
-      </el-form>
-      <div class="grid grid-cols-8 gap-8">
-        <div
-          v-for="info in totalWorkKeys"
-          :key="info[0]"
-          class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-1 flex flex-col items-center justify-center gap-1"
-        >
-          <div class="size-7.5" :class="info[3]"></div>
-          <count-to
-            class="text-2xl font-medium"
-            :start-val="0"
-            :end-val="totalWork[info[0]]"
-            :decimals="info[4]"
-          >
-            <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
-          </count-to>
-          <div class="text-xs font-medium text-[var(--el-text-color-regular)]">{{ info[1] }}</div>
-          <div class="text-sm font-medium text-[var(--el-text-color-regular)]">{{ info[2] }}</div>
-        </div>
       </div>
+      <el-form-item>
+        <el-button type="primary" @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>
+    </el-form>
+    <div class="grid grid-cols-9 gap-8">
       <div
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 py-4 grid grid-rows-[48px_1fr] gap-2"
+        v-for="info in totalWorkKeys"
+        :key="info[0]"
+        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-1 flex flex-col items-center justify-center gap-1"
       >
-        <div class="flex items-center justify-between">
-          <el-button-group>
-            <el-button
-              size="default"
-              :type="tab === '表格' ? 'primary' : 'default'"
-              @click="handleSelectTab('表格')"
-              >表格
-            </el-button>
-            <el-button
-              size="default"
-              :type="tab === '看板' ? 'primary' : 'default'"
-              @click="handleSelectTab('看板')"
-              >看板
-            </el-button>
-          </el-button-group>
-          <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
-          <el-button size="default" type="primary" @click="exportAll">导出</el-button>
-        </div>
-        <!-- <el-auto-resizer>
-          <template #default="{ height, width }"> -->
-        <Motion
-          as="div"
-          :style="{ position: 'relative', overflow: 'hidden' }"
-          :animate="{ height: `${500}px`, width: `100%` }"
-          :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
+        <div class="size-7.5" :class="info[3]"></div>
+        <count-to
+          class="text-2xl font-medium"
+          :start-val="0"
+          :end-val="totalWork[info[0]]"
+          :decimals="info[4]"
         >
-          <AnimatePresence :initial="false" mode="sync">
+          <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
+        </count-to>
+        <div class="text-xs font-medium text-[var(--el-text-color-regular)]">{{ info[1] }}</div>
+        <div class="text-sm font-medium text-[var(--el-text-color-regular)]">{{ info[2] }}</div>
+      </div>
+    </div>
+
+    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-4 gap-2">
+      <div class="flex h-12 items-center justify-between">
+        <el-button-group>
+          <el-button
+            size="default"
+            :type="tab === '表格' ? 'primary' : 'default'"
+            @click="handleSelectTab('表格')"
+            >表格
+          </el-button>
+          <el-button
+            size="default"
+            :type="tab === '看板' ? 'primary' : 'default'"
+            @click="handleSelectTab('看板')"
+            >看板
+          </el-button>
+        </el-button-group>
+        <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
+        <el-button size="default" type="primary" @click="exportAll">导出</el-button>
+      </div>
+      <div class="flex-1 relative">
+        <el-auto-resizer class="absolute">
+          <template #default="{ height }">
             <Motion
-              :key="currentTab"
               as="div"
-              :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
-              :animate="{ x: '0%', opacity: 1 }"
-              :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
-              :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
-              :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
+              :style="{ position: 'relative', overflow: 'hidden' }"
+              :animate="{ height: `${height}px`, width: `100%` }"
+              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
             >
-              <div :style="{ width: `100%`, height: `${500}px` }">
-                <el-table
-                  v-if="currentTab === '表格'"
-                  v-loading="listLoading"
-                  :data="list"
-                  :stripe="true"
-                  :max-height="500"
-                  show-overflow-tooltip
-                >
-                  <template v-for="item in columns(type)" :key="item.prop">
-                    <el-table-column
-                      v-if="item.prop !== 'name'"
-                      :label="item.label"
-                      :prop="item.prop"
-                      align="center"
-                    />
-                    <el-table-column v-else :label="item.label" :prop="item.prop" align="center">
-                      <template #default="{ row }">
-                        <el-button text type="primary" @click.prevent="tolist(row.id)">{{
-                          row.name
-                        }}</el-button>
-                      </template>
-                    </el-table-column>
-                  </template>
-                  <el-table-column label="台次" align="center">
-                    <el-table-column label="泵车" prop="cumulativePumpTrips" align="center" />
-                    <el-table-column label="仪表/混砂" prop="cumulativeMixSand" align="center" />
-                  </el-table-column>
-                </el-table>
-                <div
-                  ref="chartRef"
-                  v-loading="chartLoading"
-                  :key="dayjs().valueOf()"
-                  v-else
-                  :style="{ width: `100%`, height: `${500}px` }"
+              <AnimatePresence :initial="false" mode="sync">
+                <Motion
+                  :key="currentTab"
+                  as="div"
+                  :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
+                  :animate="{ x: '0%', opacity: 1 }"
+                  :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
+                  :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
+                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
                 >
-                </div>
-              </div>
+                  <div :style="{ width: `100%`, height: `${height}px` }">
+                    <zm-table
+                      v-if="currentTab === '表格'"
+                      :loading="listLoading"
+                      :data="list"
+                      :height="height"
+                      show-border
+                    >
+                      <zm-table-column label="部门" prop="name">
+                        <template #default="{ row }">
+                          <el-button text type="primary" @click.prevent="tolist(row.id)">{{
+                            row.name
+                          }}</el-button>
+                        </template>
+                      </zm-table-column>
+                      <zm-table-column label="油耗(万升)" prop="totalDailyFuel" />
+                      <zm-table-column label="桥塞" prop="cumulativeBridgePlug" />
+                      <zm-table-column label="趟数" prop="cumulativeRunCount" />
+                      <zm-table-column label="井数" prop="cumulativeWorkingWell" />
+                      <zm-table-column label="段数" prop="cumulativeWorkingLayers" />
+                      <zm-table-column label="小时(H)" prop="cumulativeHourCount" />
+                      <zm-table-column label="水方量(方)" prop="cumulativeWaterVolume" />
+                      <zm-table-column label="台次">
+                        <zm-table-column label="泵车" prop="cumulativePumpTrips" />
+                        <zm-table-column label="仪表/混砂" prop="cumulativeMixSand" />
+                      </zm-table-column>
+                      <zm-table-column
+                        label="设备利用率"
+                        prop="utilizationRate"
+                        cover-formatter
+                        :real-value="
+                          (row: List) => `${Number(((row.utilizationRate || 0) * 100).toFixed(2))}%`
+                        "
+                      />
+                    </zm-table>
+                    <div
+                      ref="chartRef"
+                      v-loading="chartLoading"
+                      :key="dayjs().valueOf()"
+                      v-else
+                      :style="{ width: `100%`, height: `${height}px` }"
+                    >
+                    </div>
+                  </div>
+                </Motion>
+              </AnimatePresence>
             </Motion>
-          </AnimatePresence>
-        </Motion>
-        <!-- </template>
-        </el-auto-resizer> -->
+          </template>
+        </el-auto-resizer>
       </div>
     </div>
   </div>
-  <!-- <UnfilledReportDialog ref="unfilledDialogRef" :query-params="query" /> -->
 </template>
 
 <style scoped>
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
-
-:deep(.el-table) {
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
-
-  .el-table__cell {
-    height: 40px;
-  }
-
-  .el-table__header-wrapper {
-    .el-table__cell {
-      background: var(--el-fill-color-light);
-    }
-  }
-}
 </style>

+ 172 - 189
src/views/pms/iotrhdailyreport/summary.vue

@@ -12,6 +12,7 @@ import { rangeShortcuts } from '@/utils/formatTime'
 import download from '@/utils/download'
 
 import { useUserStore } from '@/store/modules/user'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 
 const deptId = useUserStore().getUser.deptId
 
@@ -36,20 +37,12 @@ const query = ref<Query>({
 })
 
 const totalWorkKeys: [string, string, string, string, number][] = [
-  ['totalCount', '个', '总数', 'i-tabler:report-analytics text-sky', 0],
-  [
-    'alreadyReported',
-    '个',
-    '已填报',
-    'i-material-symbols:check-circle-outline-rounded text-emerald',
-    0
-  ],
-  ['notReported', '个', '未填报', 'i-material-symbols:cancel-outline-rounded text-rose', 0],
+  ['totalGasInjection', '万方', '累计注气量', 'i-material-symbols:cloud-outline text-sky', 2],
   [
-    'totalFuelConsumption',
-    '',
-    '累计油耗',
-    'i-material-symbols:directions-car-outline-rounded text-sky',
+    'totalWaterInjection',
+    '万方',
+    '累计注水量',
+    'i-material-symbols:water-drop-outline-rounded text-sky',
     2
   ],
   [
@@ -60,13 +53,21 @@ const totalWorkKeys: [string, string, string, string, number][] = [
     2
   ],
   [
-    'totalWaterInjection',
-    '万方',
-    '累计注水量',
-    'i-material-symbols:water-drop-outline-rounded text-sky',
+    'totalFuelConsumption',
+    '',
+    '累计油耗',
+    'i-material-symbols:directions-car-outline-rounded text-sky',
     2
   ],
-  ['totalGasInjection', '万方', '累计注气量', 'i-material-symbols:cloud-outline text-sky', 2]
+  ['totalCount', '个', '总数', 'i-tabler:report-analytics text-sky', 0],
+  [
+    'alreadyReported',
+    '个',
+    '已填报',
+    'i-material-symbols:check-circle-outline-rounded text-emerald',
+    0
+  ],
+  ['notReported', '个', '未填报', 'i-material-symbols:cancel-outline-rounded text-rose', 0]
 ]
 
 const totalWork = ref({
@@ -131,15 +132,12 @@ const list = ref<List[]>([])
 const type = ref('2')
 
 function checkIsSameDay(createTime: string[]): boolean {
-  // 安全检查:确保数组长度为 2 且不为空
   if (!createTime || createTime.length < 2) {
     return false
   }
 
   const [startTime, endTime] = createTime
 
-  // 使用 isSame 方法,第二个参数 'day' 表示比较精度为“天”
-  // 这会自动比较 年、月、日,忽略时分秒
   return dayjs(startTime).isSame(endTime, 'day')
 }
 
@@ -518,12 +516,15 @@ const tolist = (id: number, non: boolean = false) => {
     }
   })
 }
+
+const { ZmTable, ZmTableColumn } = useTableComponents()
 </script>
 
 <template>
-  <div class="grid grid-cols-[16%_1fr] gap-5">
-    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4">
-      <!-- <DeptTree2 :deptId="id" @node-click="handleDeptNodeClick" /> -->
+  <div
+    class="grid grid-cols-[15%_1fr] grid-rows-[62px_164px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
+  >
+    <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg row-span-3">
       <DeptTreeSelect
         :deptId="id"
         :top-id="157"
@@ -531,172 +532,169 @@ const tolist = (id: number, non: boolean = false) => {
         @node-click="handleDeptNodeClick"
       />
     </div>
-    <div class="grid grid-rows-[62px_164px_1fr] h-full gap-4">
-      <el-form
-        size="default"
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
-      >
-        <div class="flex items-center gap-8">
-          <el-form-item label="项目">
-            <el-input
-              v-model="query.contractName"
-              placeholder="请输入项目"
-              clearable
-              @keyup.enter="handleQuery()"
-              class="!w-240px"
-            />
-          </el-form-item>
-          <el-form-item label="任务">
-            <el-input
-              v-model="query.taskName"
-              placeholder="请输入任务"
-              clearable
-              @keyup.enter="handleQuery()"
-              class="!w-240px"
-            />
-          </el-form-item>
-          <el-form-item label="创建时间">
-            <el-date-picker
-              v-model="query.createTime"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              :shortcuts="rangeShortcuts"
-              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-              class="!w-220px"
-            />
-          </el-form-item>
-        </div>
-        <el-form-item>
-          <el-button type="primary" @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
+      size="default"
+      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
+    >
+      <div class="flex items-center gap-8">
+        <el-form-item label="项目">
+          <el-input
+            v-model="query.contractName"
+            placeholder="请输入项目"
+            clearable
+            @keyup.enter="handleQuery()"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="任务">
+          <el-input
+            v-model="query.taskName"
+            placeholder="请输入任务"
+            clearable
+            @keyup.enter="handleQuery()"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="query.createTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :shortcuts="rangeShortcuts"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-220px"
+          />
         </el-form-item>
-      </el-form>
-      <div class="grid grid-cols-7 gap-8">
-        <div
-          v-for="info in totalWorkKeys"
-          :key="info[0]"
-          class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-1 flex flex-col items-center justify-center gap-1"
-        >
-          <div class="size-7.5" :class="info[3]"></div>
-          <count-to
-            class="text-2xl font-medium"
-            :start-val="0"
-            :end-val="totalWork[info[0]]"
-            :decimals="info[4]"
-            @click="info[2] === '未填报' ? openUnfilledDialog() : ''"
-          >
-            <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
-          </count-to>
-          <div class="text-xs font-medium text-[var(--el-text-color-regular)]">{{ info[1] }}</div>
-          <div class="text-sm font-medium text-[var(--el-text-color-regular)]">{{ info[2] }}</div>
-        </div>
       </div>
+      <el-form-item>
+        <el-button type="primary" @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>
+    </el-form>
+    <div class="grid grid-cols-7 gap-8">
       <div
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 py-4 grid grid-rows-[48px_1fr] gap-2"
+        v-for="info in totalWorkKeys"
+        :key="info[0]"
+        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-1 flex flex-col items-center justify-center gap-1"
       >
-        <div class="flex items-center justify-between">
-          <el-button-group>
-            <el-button
-              size="default"
-              :type="tab === '表格' ? 'primary' : 'default'"
-              @click="handleSelectTab('表格')"
-              >表格
-            </el-button>
-            <el-button
-              size="default"
-              :type="tab === '看板' ? 'primary' : 'default'"
-              @click="handleSelectTab('看板')"
-              >看板
-            </el-button>
-          </el-button-group>
-          <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
-          <el-button size="default" type="primary" @click="exportAll">导出</el-button>
-        </div>
-        <!-- <el-auto-resizer>
-          <template #default="{ height, width }"> -->
-        <Motion
-          as="div"
-          :style="{ position: 'relative', overflow: 'hidden' }"
-          :animate="{ height: `${500}px`, width: `100%` }"
-          :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
+        <div class="size-7.5" :class="info[3]"></div>
+        <count-to
+          class="text-2xl font-medium"
+          :start-val="0"
+          :end-val="totalWork[info[0]]"
+          :decimals="info[4]"
+          @click="info[2] === '未填报' ? openUnfilledDialog() : ''"
         >
-          <AnimatePresence :initial="false" mode="sync">
+          <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
+        </count-to>
+        <div class="text-xs font-medium text-[var(--el-text-color-regular)]">{{ info[1] }}</div>
+        <div class="text-sm font-medium text-[var(--el-text-color-regular)]">{{ info[2] }}</div>
+      </div>
+    </div>
+
+    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-4 gap-2">
+      <div class="flex h-12 items-center justify-between">
+        <el-button-group>
+          <el-button
+            size="default"
+            :type="tab === '表格' ? 'primary' : 'default'"
+            @click="handleSelectTab('表格')"
+            >表格
+          </el-button>
+          <el-button
+            size="default"
+            :type="tab === '看板' ? 'primary' : 'default'"
+            @click="handleSelectTab('看板')"
+            >看板
+          </el-button>
+        </el-button-group>
+        <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
+        <el-button size="default" type="primary" @click="exportAll">导出</el-button>
+      </div>
+      <div class="flex-1 relative">
+        <el-auto-resizer class="absolute">
+          <template #default="{ height }">
             <Motion
-              :key="currentTab"
               as="div"
-              :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
-              :animate="{ x: '0%', opacity: 1 }"
-              :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
-              :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
-              :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
+              :style="{ position: 'relative', overflow: 'hidden' }"
+              :animate="{ height: `${height}px`, width: `100%` }"
+              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
             >
-              <div :style="{ width: `100%`, height: `${500}px` }">
-                <el-table
-                  v-if="currentTab === '表格'"
-                  v-loading="listLoading"
-                  :data="list"
-                  :stripe="true"
-                  :max-height="500"
-                  show-overflow-tooltip
+              <AnimatePresence :initial="false" mode="sync">
+                <Motion
+                  :key="currentTab"
+                  as="div"
+                  :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
+                  :animate="{ x: '0%', opacity: 1 }"
+                  :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
+                  :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
+                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
                 >
-                  <template v-for="item in columns(type)" :key="item.prop">
-                    <el-table-column
-                      v-if="item.prop !== 'name' && item.prop !== 'nonProductiveTime'"
-                      :label="item.label"
-                      :prop="item.prop"
-                      align="center"
-                      :formatter="formatter"
-                    />
-                    <el-table-column
-                      v-else-if="item.prop === 'name'"
-                      :label="item.label"
-                      :prop="item.prop"
-                      align="center"
+                  <div :style="{ width: `100%`, height: `${height}px` }">
+                    <zm-table
+                      v-if="currentTab === '表格'"
+                      :loading="listLoading"
+                      :data="list"
+                      :height="height"
+                      show-border
                     >
-                      <template #default="{ row }">
-                        <el-button text type="primary" @click.prevent="tolist(row.id)">{{
-                          row.name
-                        }}</el-button>
-                      </template>
-                    </el-table-column>
-                    <el-table-column v-else :label="item.label" :prop="item.prop" align="center">
-                      <template #default="{ row }">
-                        <el-button
-                          v-if="row.nonProductiveTime > 0"
-                          text
-                          type="primary"
-                          @click.prevent="tolist(row.id, true)"
+                      <template v-for="item in columns(type)" :key="item.prop">
+                        <zm-table-column
+                          v-if="item.prop !== 'name' && item.prop !== 'nonProductiveTime'"
+                          :label="item.label"
+                          :prop="item.prop"
+                          :formatter="formatter"
+                        />
+                        <zm-table-column
+                          v-else-if="item.prop === 'name'"
+                          :label="item.label"
+                          :prop="item.prop"
                         >
-                          {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
-                        </el-button>
-                        <span v-else>
-                          {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
-                        </span>
+                          <template #default="{ row }">
+                            <el-button text type="primary" @click.prevent="tolist(row.id)">{{
+                              row.name
+                            }}</el-button>
+                          </template>
+                        </zm-table-column>
+                        <zm-table-column v-else :label="item.label" :prop="item.prop">
+                          <template #default="{ row }">
+                            <el-button
+                              v-if="row.nonProductiveTime > 0"
+                              text
+                              type="primary"
+                              @click.prevent="tolist(row.id, true)"
+                            >
+                              {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
+                            </el-button>
+                            <span v-else>
+                              {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
+                            </span>
+                          </template>
+                        </zm-table-column>
                       </template>
-                    </el-table-column>
-                  </template>
-                </el-table>
-                <div
-                  ref="chartRef"
-                  v-loading="chartLoading"
-                  :key="dayjs().valueOf()"
-                  v-else
-                  :style="{ width: `100%`, height: `${500}px` }"
-                >
-                </div>
-              </div>
+                    </zm-table>
+                    <div
+                      ref="chartRef"
+                      v-loading="chartLoading"
+                      :key="dayjs().valueOf()"
+                      v-else
+                      :style="{ width: `100%`, height: `${height}px` }"
+                    >
+                    </div>
+                  </div>
+                </Motion>
+              </AnimatePresence>
             </Motion>
-          </AnimatePresence>
-        </Motion>
-        <!-- </template>
-        </el-auto-resizer> -->
+          </template>
+        </el-auto-resizer>
       </div>
     </div>
   </div>
+
   <UnfilledReportDialog ref="unfilledDialogRef" :query-params="query" />
 </template>
 
@@ -704,19 +702,4 @@ const tolist = (id: number, non: boolean = false) => {
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
-
-:deep(.el-table) {
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
-
-  .el-table__cell {
-    height: 40px;
-  }
-
-  .el-table__header-wrapper {
-    .el-table__cell {
-      background: var(--el-fill-color-light);
-    }
-  }
-}
 </style>

+ 168 - 170
src/views/pms/iotrydailyreport/summary.vue

@@ -38,37 +38,37 @@ const query = ref<Query>({
 })
 
 const totalWorkKeys: [string, string, string, string, number][] = [
-  ['totalCount', '个', '总数', 'i-tabler:report-analytics text-sky', 0],
+  ['totalFootage', 'M', '累计进尺', 'i-solar:ruler-bold text-sky', 2],
   [
-    'alreadyReported',
-    '',
-    '已填报',
-    'i-material-symbols:check-circle-outline-rounded text-emerald',
-    0
+    'totalPowerConsumption',
+    'MWh',
+    '累计用电量',
+    'i-material-symbols:electric-bolt-outline-rounded text-sky',
+    2
   ],
-  ['notReported', '个', '未填报', 'i-material-symbols:cancel-outline-rounded text-rose', 0],
   [
-    'averageFuelConsumption',
+    'totalFuelConsumption',
     '升',
-    '平均油耗',
+    '累计油耗',
     'i-material-symbols:directions-car-outline-rounded text-sky',
     2
   ],
   [
-    'totalFuelConsumption',
+    'averageFuelConsumption',
     '升',
-    '累计油耗',
+    '平均油耗',
     'i-material-symbols:directions-car-outline-rounded text-sky',
     2
   ],
+  ['totalCount', '个', '总数', 'i-tabler:report-analytics text-sky', 0],
   [
-    'totalPowerConsumption',
-    'MWh',
-    '累计用电量',
-    'i-material-symbols:electric-bolt-outline-rounded text-sky',
-    2
+    'alreadyReported',
+    '',
+    '已填报',
+    'i-material-symbols:check-circle-outline-rounded text-emerald',
+    0
   ],
-  ['totalFootage', 'M', '累计进尺', 'i-solar:ruler-bold text-sky', 2]
+  ['notReported', '个', '未填报', 'i-material-symbols:cancel-outline-rounded text-rose', 0]
 ]
 
 const totalWork = ref({
@@ -490,9 +490,10 @@ const tolist = (id: number, non: boolean = false) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-[16%_1fr] gap-5">
-    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4">
-      <!-- <DeptTree2 ref="deptTreeRef" :deptId="id" @node-click="handleDeptNodeClick" /> -->
+  <div
+    class="grid grid-cols-[15%_1fr] grid-rows-[62px_164px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
+  >
+    <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg row-span-3">
       <DeptTreeSelect
         :deptId="id"
         :top-id="158"
@@ -500,172 +501,169 @@ const tolist = (id: number, non: boolean = false) => {
         @node-click="handleDeptNodeClick"
       />
     </div>
-    <div class="grid grid-rows-[62px_164px_1fr] h-full gap-5">
-      <el-form
-        size="default"
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
-      >
-        <div class="flex items-center gap-8">
-          <el-form-item label="项目">
-            <el-input
-              v-model="query.contractName"
-              placeholder="请输入项目"
-              clearable
-              @keyup.enter="handleQuery()"
-              class="!w-240px"
-            />
-          </el-form-item>
-          <el-form-item label="任务">
-            <el-input
-              v-model="query.taskName"
-              placeholder="请输入任务"
-              clearable
-              @keyup.enter="handleQuery()"
-              class="!w-240px"
-            />
-          </el-form-item>
-          <el-form-item label="创建时间">
-            <el-date-picker
-              v-model="query.createTime"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              :shortcuts="rangeShortcuts"
-              class="!w-220px"
-              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            />
-          </el-form-item>
-        </div>
-        <el-form-item>
-          <el-button type="primary" @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
+      size="default"
+      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
+    >
+      <div class="flex items-center gap-8">
+        <el-form-item label="项目">
+          <el-input
+            v-model="query.contractName"
+            placeholder="请输入项目"
+            clearable
+            @keyup.enter="handleQuery()"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="任务">
+          <el-input
+            v-model="query.taskName"
+            placeholder="请输入任务"
+            clearable
+            @keyup.enter="handleQuery()"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="query.createTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :shortcuts="rangeShortcuts"
+            class="!w-220px"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          />
         </el-form-item>
-      </el-form>
-      <div class="grid grid-cols-7 gap-8">
-        <div
-          v-for="info in totalWorkKeys"
-          :key="info[0]"
-          class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4 flex flex-col items-center justify-center gap-2"
-        >
-          <div class="size-7.5" :class="info[3]"></div>
-          <count-to
-            class="text-2xl font-medium"
-            :start-val="0"
-            :end-val="totalWork[info[0]]"
-            :decimals="info[4]"
-            @click="info[2] === '未填报' ? openUnfilledDialog() : ''"
-          >
-            <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
-          </count-to>
-          <div class="text-xs font-medium text-[var(--el-text-color-regular)]">{{ info[1] }}</div>
-          <div class="text-sm font-medium text-[var(--el-text-color-regular)]">{{ info[2] }}</div>
-        </div>
       </div>
+      <el-form-item>
+        <el-button type="primary" @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>
+    </el-form>
+    <div class="grid grid-cols-7 gap-8">
       <div
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 py-4 grid grid-rows-[48px_1fr] gap-2"
+        v-for="info in totalWorkKeys"
+        :key="info[0]"
+        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4 flex flex-col items-center justify-center gap-2"
       >
-        <div class="flex items-center justify-between">
-          <el-button-group>
-            <el-button
-              size="default"
-              :type="tab === '表格' ? 'primary' : 'default'"
-              @click="handleSelectTab('表格')"
-              >表格
-            </el-button>
-            <el-button
-              size="default"
-              :type="tab === '看板' ? 'primary' : 'default'"
-              @click="handleSelectTab('看板')"
-              >看板
-            </el-button>
-          </el-button-group>
-          <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
-          <el-button size="default" type="primary" @click="exportAll">导出</el-button>
-        </div>
-        <!-- <el-auto-resizer>
-          <template #default="{ height, width }"> -->
-        <Motion
-          as="div"
-          :style="{ position: 'relative', overflow: 'hidden' }"
-          :animate="{ height: `${500}px`, width: `100%` }"
-          :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
+        <div class="size-7.5" :class="info[3]"></div>
+        <count-to
+          class="text-2xl font-medium"
+          :start-val="0"
+          :end-val="totalWork[info[0]]"
+          :decimals="info[4]"
+          @click="info[2] === '未填报' ? openUnfilledDialog() : ''"
         >
-          <AnimatePresence :initial="false" mode="sync">
+          <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
+        </count-to>
+        <div class="text-xs font-medium text-[var(--el-text-color-regular)]">{{ info[1] }}</div>
+        <div class="text-sm font-medium text-[var(--el-text-color-regular)]">{{ info[2] }}</div>
+      </div>
+    </div>
+
+    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-4 gap-2">
+      <div class="flex h-12 items-center justify-between">
+        <el-button-group>
+          <el-button
+            size="default"
+            :type="tab === '表格' ? 'primary' : 'default'"
+            @click="handleSelectTab('表格')"
+            >表格
+          </el-button>
+          <el-button
+            size="default"
+            :type="tab === '看板' ? 'primary' : 'default'"
+            @click="handleSelectTab('看板')"
+            >看板
+          </el-button>
+        </el-button-group>
+        <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
+        <el-button size="default" type="primary" @click="exportAll">导出</el-button>
+      </div>
+      <div class="flex-1 relative">
+        <el-auto-resizer class="absolute">
+          <template #default="{ height }">
             <Motion
-              :key="currentTab"
               as="div"
-              :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
-              :animate="{ x: '0%', opacity: 1 }"
-              :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
-              :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
-              :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
+              :style="{ position: 'relative', overflow: 'hidden' }"
+              :animate="{ height: `${height}px`, width: `100%` }"
+              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
             >
-              <div :style="{ width: `100%`, height: `${500}px` }">
-                <el-table
-                  v-if="currentTab === '表格'"
-                  v-loading="listLoading"
-                  :data="list"
-                  :stripe="true"
-                  :max-height="500"
-                  show-overflow-tooltip
+              <AnimatePresence :initial="false" mode="sync">
+                <Motion
+                  :key="currentTab"
+                  as="div"
+                  :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
+                  :animate="{ x: '0%', opacity: 1 }"
+                  :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
+                  :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
+                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
                 >
-                  <template v-for="item in columns(type)" :key="item.prop">
-                    <el-table-column
-                      v-if="item.prop !== 'name' && item.prop !== 'nonProductiveTime'"
-                      :label="item.label"
-                      :prop="item.prop"
-                      align="center"
-                      :formatter="formatter"
-                    />
-                    <el-table-column
-                      v-else-if="item.prop === 'name'"
-                      :label="item.label"
-                      :prop="item.prop"
-                      align="center"
+                  <div :style="{ width: `100%`, height: `${height}px` }">
+                    <zm-table
+                      v-if="currentTab === '表格'"
+                      :loading="listLoading"
+                      :data="list"
+                      :height="height"
+                      show-border
                     >
-                      <template #default="{ row }">
-                        <el-button text type="primary" @click.prevent="tolist(row.id)">{{
-                          row.name
-                        }}</el-button>
-                      </template>
-                    </el-table-column>
-                    <el-table-column v-else :label="item.label" :prop="item.prop" align="center">
-                      <template #default="{ row }">
-                        <el-button
-                          v-if="row.nonProductiveTime > 0"
-                          text
-                          type="primary"
-                          @click.prevent="tolist(row.id, true)"
+                      <template v-for="item in columns(type)" :key="item.prop">
+                        <zm-table-column
+                          v-if="item.prop !== 'name' && item.prop !== 'nonProductiveTime'"
+                          :label="item.label"
+                          :prop="item.prop"
+                          :formatter="formatter"
+                        />
+                        <zm-table-column
+                          v-else-if="item.prop === 'name'"
+                          :label="item.label"
+                          :prop="item.prop"
                         >
-                          {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
-                        </el-button>
-                        <span v-else>
-                          {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
-                        </span>
+                          <template #default="{ row }">
+                            <el-button text type="primary" @click.prevent="tolist(row.id)">{{
+                              row.name
+                            }}</el-button>
+                          </template>
+                        </zm-table-column>
+                        <zm-table-column v-else :label="item.label" :prop="item.prop">
+                          <template #default="{ row }">
+                            <el-button
+                              v-if="row.nonProductiveTime > 0"
+                              text
+                              type="primary"
+                              @click.prevent="tolist(row.id, true)"
+                            >
+                              {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
+                            </el-button>
+                            <span v-else>
+                              {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
+                            </span>
+                          </template>
+                        </zm-table-column>
                       </template>
-                    </el-table-column>
-                  </template>
-                </el-table>
-                <div
-                  ref="chartRef"
-                  v-loading="chartLoading"
-                  :key="dayjs().valueOf()"
-                  v-else
-                  :style="{ width: `100%`, height: `${500}px` }"
-                >
-                </div>
-              </div>
+                    </zm-table>
+                    <div
+                      ref="chartRef"
+                      v-loading="chartLoading"
+                      :key="dayjs().valueOf()"
+                      v-else
+                      :style="{ width: `100%`, height: `${height}px` }"
+                    >
+                    </div>
+                  </div>
+                </Motion>
+              </AnimatePresence>
             </Motion>
-          </AnimatePresence>
-        </Motion>
-        <!-- </template>
-        </el-auto-resizer> -->
+          </template>
+        </el-auto-resizer>
       </div>
     </div>
   </div>
+
   <UnfilledReportDialog ref="unfilledDialogRef" :query-params="query" />
 </template>
 

+ 165 - 167
src/views/pms/iotrydailyreport/xsummary.vue

@@ -38,15 +38,15 @@ const query = ref<Query>({
 })
 
 const totalWorkKeys: [string, string, string, string, number][] = [
-  ['totalCount', '个', '总数', 'i-tabler:report-analytics text-sky', 0],
+  ['constructionWells', '个', '累计施工井数', 'i-mdi:progress-wrench text-sky', 0],
+  ['completedWells', '个', '累计完工井数', 'i-mdi:wrench-check-outline text-emerald', 0],
   [
-    'alreadyReported',
-    '',
-    '已填报',
-    'i-material-symbols:check-circle-outline-rounded text-emerald',
-    0
+    'totalPowerConsumption',
+    'MWh',
+    '累计用电量',
+    'i-material-symbols:electric-bolt-outline-rounded text-sky',
+    2
   ],
-  ['notReported', '个', '未填报', 'i-material-symbols:cancel-outline-rounded text-rose', 0],
   [
     'totalFuelConsumption',
     '升',
@@ -61,15 +61,15 @@ const totalWorkKeys: [string, string, string, string, number][] = [
     'i-material-symbols:directions-car-outline-rounded text-sky',
     2
   ],
+  ['totalCount', '个', '总数', 'i-tabler:report-analytics text-sky', 0],
   [
-    'totalPowerConsumption',
-    'MWh',
-    '累计用电量',
-    'i-material-symbols:electric-bolt-outline-rounded text-sky',
-    2
+    'alreadyReported',
+    '',
+    '已填报',
+    'i-material-symbols:check-circle-outline-rounded text-emerald',
+    0
   ],
-  ['constructionWells', '个', '累计施工井数', 'i-mdi:progress-wrench text-sky', 0],
-  ['completedWells', '个', '累计完工井数', 'i-mdi:wrench-check-outline text-emerald', 0]
+  ['notReported', '个', '未填报', 'i-material-symbols:cancel-outline-rounded text-rose', 0]
 ]
 
 const totalWork = ref({
@@ -488,9 +488,10 @@ const tolist = (id: number, non: boolean = false) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-[16%_1fr] gap-5">
-    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4">
-      <!-- <DeptTree2 :deptId="id" @node-click="handleDeptNodeClick" /> -->
+  <div
+    class="grid grid-cols-[15%_1fr] grid-rows-[62px_164px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
+  >
+    <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg row-span-3">
       <DeptTreeSelect
         :deptId="id"
         :top-id="158"
@@ -498,172 +499,169 @@ const tolist = (id: number, non: boolean = false) => {
         @node-click="handleDeptNodeClick"
       />
     </div>
-    <div class="grid grid-rows-[62px_164px_1fr] h-full gap-5">
-      <el-form
-        size="default"
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
-      >
-        <div class="flex items-center gap-8">
-          <el-form-item label="项目">
-            <el-input
-              v-model="query.contractName"
-              placeholder="请输入项目"
-              clearable
-              @keyup.enter="handleQuery()"
-              class="!w-240px"
-            />
-          </el-form-item>
-          <el-form-item label="任务">
-            <el-input
-              v-model="query.taskName"
-              placeholder="请输入任务"
-              clearable
-              @keyup.enter="handleQuery()"
-              class="!w-240px"
-            />
-          </el-form-item>
-          <el-form-item label="创建时间">
-            <el-date-picker
-              v-model="query.createTime"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              :shortcuts="rangeShortcuts"
-              class="!w-220px"
-              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            />
-          </el-form-item>
-        </div>
-        <el-form-item>
-          <el-button type="primary" @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
+      size="default"
+      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
+    >
+      <div class="flex items-center gap-8">
+        <el-form-item label="项目">
+          <el-input
+            v-model="query.contractName"
+            placeholder="请输入项目"
+            clearable
+            @keyup.enter="handleQuery()"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="任务">
+          <el-input
+            v-model="query.taskName"
+            placeholder="请输入任务"
+            clearable
+            @keyup.enter="handleQuery()"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="query.createTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :shortcuts="rangeShortcuts"
+            class="!w-220px"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          />
         </el-form-item>
-      </el-form>
-      <div class="grid grid-cols-8 gap-8">
-        <div
-          v-for="info in totalWorkKeys"
-          :key="info[0]"
-          class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4 flex flex-col items-center justify-center gap-2"
-        >
-          <div class="size-7.5" :class="info[3]"></div>
-          <count-to
-            class="text-2xl font-medium"
-            :start-val="0"
-            :end-val="totalWork[info[0]]"
-            :decimals="info[4]"
-            @click="info[2] === '未填报' ? openUnfilledDialog() : ''"
-          >
-            <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
-          </count-to>
-          <div class="text-xs font-medium text-[var(--el-text-color-regular)]">{{ info[1] }}</div>
-          <div class="text-sm font-medium text-[var(--el-text-color-regular)]">{{ info[2] }}</div>
-        </div>
       </div>
+      <el-form-item>
+        <el-button type="primary" @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>
+    </el-form>
+    <div class="grid grid-cols-8 gap-8">
       <div
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 py-4 grid grid-rows-[48px_1fr] gap-2"
+        v-for="info in totalWorkKeys"
+        :key="info[0]"
+        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4 flex flex-col items-center justify-center gap-2"
       >
-        <div class="flex items-center justify-between">
-          <el-button-group>
-            <el-button
-              size="default"
-              :type="tab === '表格' ? 'primary' : 'default'"
-              @click="handleSelectTab('表格')"
-              >表格
-            </el-button>
-            <el-button
-              size="default"
-              :type="tab === '看板' ? 'primary' : 'default'"
-              @click="handleSelectTab('看板')"
-              >看板
-            </el-button>
-          </el-button-group>
-          <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
-          <el-button size="default" type="primary" @click="exportAll">导出</el-button>
-        </div>
-        <!-- <el-auto-resizer>
-          <template #default="{ height, width }"> -->
-        <Motion
-          as="div"
-          :style="{ position: 'relative', overflow: 'hidden' }"
-          :animate="{ height: `${500}px`, width: `100%` }"
-          :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
+        <div class="size-7.5" :class="info[3]"></div>
+        <count-to
+          class="text-2xl font-medium"
+          :start-val="0"
+          :end-val="totalWork[info[0]]"
+          :decimals="info[4]"
+          @click="info[2] === '未填报' ? openUnfilledDialog() : ''"
         >
-          <AnimatePresence :initial="false" mode="sync">
+          <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
+        </count-to>
+        <div class="text-xs font-medium text-[var(--el-text-color-regular)]">{{ info[1] }}</div>
+        <div class="text-sm font-medium text-[var(--el-text-color-regular)]">{{ info[2] }}</div>
+      </div>
+    </div>
+
+    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-4 gap-2">
+      <div class="flex items-center justify-between">
+        <el-button-group>
+          <el-button
+            size="default"
+            :type="tab === '表格' ? 'primary' : 'default'"
+            @click="handleSelectTab('表格')"
+            >表格
+          </el-button>
+          <el-button
+            size="default"
+            :type="tab === '看板' ? 'primary' : 'default'"
+            @click="handleSelectTab('看板')"
+            >看板
+          </el-button>
+        </el-button-group>
+        <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
+        <el-button size="default" type="primary" @click="exportAll">导出</el-button>
+      </div>
+      <div class="flex-1 relative">
+        <el-auto-resizer class="absolute">
+          <template #default="{ height }">
             <Motion
-              :key="currentTab"
               as="div"
-              :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
-              :animate="{ x: '0%', opacity: 1 }"
-              :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
-              :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
-              :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
+              :style="{ position: 'relative', overflow: 'hidden' }"
+              :animate="{ height: `${height}px`, width: `100%` }"
+              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
             >
-              <div :style="{ width: `100%`, height: `${500}px` }">
-                <el-table
-                  v-if="currentTab === '表格'"
-                  v-loading="listLoading"
-                  :data="list"
-                  :stripe="true"
-                  :max-height="500"
-                  show-overflow-tooltip
+              <AnimatePresence :initial="false" mode="sync">
+                <Motion
+                  :key="currentTab"
+                  as="div"
+                  :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
+                  :animate="{ x: '0%', opacity: 1 }"
+                  :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
+                  :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
+                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
                 >
-                  <template v-for="item in columns(type)" :key="item.prop">
-                    <el-table-column
-                      v-if="item.prop !== 'name' && item.prop !== 'nonProductiveTime'"
-                      :label="item.label"
-                      :prop="item.prop"
-                      align="center"
-                      :formatter="formatter"
-                    />
-                    <el-table-column
-                      v-else-if="item.prop === 'name'"
-                      :label="item.label"
-                      :prop="item.prop"
-                      align="center"
+                  <div :style="{ width: `100%`, height: `${height}px` }">
+                    <zm-table
+                      v-if="currentTab === '表格'"
+                      :loading="listLoading"
+                      :data="list"
+                      :height="height"
+                      show-border
                     >
-                      <template #default="{ row }">
-                        <el-button text type="primary" @click.prevent="tolist(row.id)">{{
-                          row.name
-                        }}</el-button>
-                      </template>
-                    </el-table-column>
-                    <el-table-column v-else :label="item.label" :prop="item.prop" align="center">
-                      <template #default="{ row }">
-                        <el-button
-                          v-if="row.nonProductiveTime > 0"
-                          text
-                          type="primary"
-                          @click.prevent="tolist(row.id, true)"
+                      <template v-for="item in columns(type)" :key="item.prop">
+                        <zm-table-column
+                          v-if="item.prop !== 'name' && item.prop !== 'nonProductiveTime'"
+                          :label="item.label"
+                          :prop="item.prop"
+                          :formatter="formatter"
+                        />
+                        <zm-table-column
+                          v-else-if="item.prop === 'name'"
+                          :label="item.label"
+                          :prop="item.prop"
                         >
-                          {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
-                        </el-button>
-                        <span v-else>
-                          {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
-                        </span>
+                          <template #default="{ row }">
+                            <el-button text type="primary" @click.prevent="tolist(row.id)">{{
+                              row.name
+                            }}</el-button>
+                          </template>
+                        </zm-table-column>
+                        <zm-table-column v-else :label="item.label" :prop="item.prop">
+                          <template #default="{ row }">
+                            <el-button
+                              v-if="row.nonProductiveTime > 0"
+                              text
+                              type="primary"
+                              @click.prevent="tolist(row.id, true)"
+                            >
+                              {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
+                            </el-button>
+                            <span v-else>
+                              {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
+                            </span>
+                          </template>
+                        </zm-table-column>
                       </template>
-                    </el-table-column>
-                  </template>
-                </el-table>
-                <div
-                  ref="chartRef"
-                  v-loading="chartLoading"
-                  :key="dayjs().valueOf()"
-                  v-else
-                  :style="{ width: `100%`, height: `${500}px` }"
-                >
-                </div>
-              </div>
+                    </zm-table>
+                    <div
+                      ref="chartRef"
+                      v-loading="chartLoading"
+                      :key="dayjs().valueOf()"
+                      v-else
+                      :style="{ width: `100%`, height: `${height}px` }"
+                    >
+                    </div>
+                  </div>
+                </Motion>
+              </AnimatePresence>
             </Motion>
-          </AnimatePresence>
-        </Motion>
-        <!-- </template>
-        </el-auto-resizer> -->
+          </template>
+        </el-auto-resizer>
       </div>
     </div>
   </div>
+
   <UnfilledReportDialog ref="unfilledDialogRef" :query-params="query" />
 </template>