pms 保养查询 运行记录模板包含多个累计 时长 公里数 属性

src/views/pms/iotmainworkorder/DeviceAlarmBomList.vue

@@ -1,89 +1,71 @@
 <template>
   <Dialog v-model="dialogVisible"
           :title="t('monitor.details')"
-          style="width: 1500px; max-height: 800px" @close="handleClose" >
-    <ContentWrap>
-      <el-table
-        v-loading="loading"
-        :data="list"
-        :stripe="true"
-        :show-overflow-tooltip="true"
-      >
-        <el-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
-        <el-table-column :label="t('iotDevice.name')" align="center" prop="deviceName" />
-        <el-table-column :label="t('operationFillForm.sumTime')" align="center" prop="totalRunTime" />
-        <el-table-column :label="t('operationFillForm.sumKil')" align="center" prop="totalMileage" />
-        <el-table-column :label="t('mainPlan.MaintItems')" align="center" prop="name" />
-        <!--
-        <el-table-column label="运行里程" align="center" prop="mileageRule" >
-          <template #default="scope">
-            <el-switch
-              v-model="scope.row.mileageRule"
-              :active-value="0"
-              :inactive-value="1"
-              :disabled="true"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="运行时间" align="center" prop="runningTimeRule" >
-          <template #default="scope">
-            <el-switch
-              v-model="scope.row.runningTimeRule"
-              :active-value="0"
-              :inactive-value="1"
-              :disabled="true"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="自然日期" align="center" prop="naturalDateRule" >
-          <template #default="scope">
-            <el-switch
-              v-model="scope.row.naturalDateRule"
-              :active-value="0"
-              :inactive-value="1"
-              :disabled="true"
-            />
-          </template>
-        </el-table-column> -->
+          style="width: 1500px"
+          class="fixed-height-dialog"
+          @close="handleClose" >
+      <ContentWrap>
+        <!-- 添加表格容器并设置滚动 -->
+        <el-table
+          v-loading="loading"
+          :data="paginatedList"
+          :stripe="true"
+          :show-overflow-tooltip="true"
+          style="width: 100%"
+          height="100%"
+          class="scrollable-table"
+        >
+          <el-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
+          <el-table-column :label="t('iotDevice.name')" align="center" prop="deviceName" />
+          <el-table-column :label="t('operationFillForm.sumTime')" align="center" prop="totalRunTime" >
+            <template #default="{ row }">
+              {{ row.totalRunTime ?? row.tempTotalRunTime }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('operationFillForm.sumKil')" align="center" prop="totalMileage" >
+            <template #default="{ row }">
+              {{ row.totalMileage ?? row.tempTotalMileage }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('mainPlan.MaintItems')" align="center" prop="name" />
 
-        <template v-if="showTimeColumns">
-          <el-table-column :label="t('mainPlan.lastMaintenanceOperationTime')" align="center" prop="lastRunningTime" />
-          <el-table-column :label="t('mainPlan.RunTimeCycle')" align="center" prop="nextRunningTime" />
-          <el-table-column :label="t('mainPlan.nextMaintTime')" align="center" prop="timePeriod" />
-        </template>
+          <template v-if="showTimeColumns">
+            <el-table-column :label="t('mainPlan.lastMaintenanceOperationTime')" align="center" prop="lastRunningTime" />
+            <el-table-column :label="t('mainPlan.RunTimeCycle')" align="center" prop="nextRunningTime" />
+            <el-table-column :label="t('mainPlan.nextMaintTime')" align="center" prop="timePeriod" />
+          </template>
 
-        <template v-if="showMileageColumns">
-          <el-table-column :label="t('mainPlan.lastMaintenanceMileage')" align="center" prop="lastRunningKilometers" />
-          <el-table-column :label="t('mainPlan.operatingMileageCycle')" align="center" prop="nextRunningKilometers" />
-          <el-table-column :label="t('mainPlan.nextMaintKil')" align="center" prop="kilometerCycle" />
-        </template>
+          <template v-if="showMileageColumns">
+            <el-table-column :label="t('mainPlan.lastMaintenanceMileage')" align="center" prop="lastRunningKilometers" />
+            <el-table-column :label="t('mainPlan.operatingMileageCycle')" align="center" prop="nextRunningKilometers" />
+            <el-table-column :label="t('mainPlan.nextMaintKil')" align="center" prop="kilometerCycle" />
+          </template>
 
-        <template v-if="showNaturalDateColumns">
-          <el-table-column :label="t('mainPlan.lastMaintenanceOperationTime')" align="center" prop="lastNaturalDate"  width="220">
-            <template #default="scope">
-              <el-date-picker
-                v-model="scope.row.lastNaturalDate"
-                type="date"
-                placeholder="选择日期"
-                format="YYYY-MM-DD"
-                value-format="YYYY-MM-DD"
-                style="width: 60%"
-                :disabled="true"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column :label="t('mainPlan.NaturalDailyCycle')" align="center" prop="nextNaturalDate" />
-          <el-table-column :label="t('mainPlan.nextMaintDate')" align="center" prop="naturalDatePeriod" />
-        </template>
-      </el-table>
-      <!-- 分页
-      <Pagination
-        :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-      /> -->
-    </ContentWrap>
+          <template v-if="showNaturalDateColumns">
+            <el-table-column :label="t('mainPlan.lastMaintenanceOperationTime')" align="center" prop="lastNaturalDate"  width="220">
+              <template #default="scope">
+                <el-date-picker
+                  v-model="scope.row.lastNaturalDate"
+                  type="date"
+                  placeholder="选择日期"
+                  format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD"
+                  style="width: 60%"
+                  :disabled="true"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('mainPlan.NaturalDailyCycle')" align="center" prop="nextNaturalDate" />
+            <el-table-column :label="t('mainPlan.nextMaintDate')" align="center" prop="naturalDatePeriod" />
+          </template>
+        </el-table>
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="handlePagination"
+        />
+      </ContentWrap>
   </Dialog>
 </template>
 
@@ -121,6 +103,18 @@ const selectRow = (row) => {
   dialogVisible.value = false
 }
 
+// 分页事件处理
+const handlePagination = () => {
+  console.log("分页变化，当前页：", queryParams.pageNo);
+};
+
+// 分页计算属性
+const paginatedList = computed(() => {
+  const start = (queryParams.pageNo - 1) * queryParams.pageSize;
+  const end = start + queryParams.pageSize;
+  return list.value.slice(start, end);
+});
+
 const open = async (id?: number, flag?: string, deviceId?: number) => {
   await nextTick() // 确保DOM更新完成
   queryParams.deviceId = deviceId
@@ -187,7 +181,7 @@ const getPlanList = async () => {
       item.naturalDatePeriod = calculateNextNaturalDate(item)
     })
     list.value = data
-    total.value = data.total
+    total.value = data.length
   } finally {
     loading.value = false
   }
@@ -241,17 +235,17 @@ const calculateNextNaturalDate = (item: IotMaintenanceBomVO): string => {
 
 // 新增计算属性：控制时间相关列的显示
 const showTimeColumns = computed(() => {
-  return list.value.some(item => item.runningTimeRule === 0);
+  return paginatedList.value.some(item => item.runningTimeRule === 0);
 });
 
 // 新增计算属性：控制里程相关列的显示
 const showMileageColumns = computed(() => {
-  return list.value.some(item => item.mileageRule === 0);
+  return paginatedList.value.some(item => item.mileageRule === 0);
 });
 
 // 新增计算属性：自然日期相关列的显示
 const showNaturalDateColumns = computed(() => {
-  return list.value.some(item => item.naturalDateRule === 0);
+  return paginatedList.value.some(item => item.naturalDateRule === 0);
 });
 
 /** 搜索按钮操作 */
@@ -270,11 +264,40 @@ const resetQuery = () => {
 }
 
 </script>
-<style lang="scss">
-.no-label-radio .el-radio__label {
-  display: none;
+
+<style lang="scss" scoped>
+/* 新版CSS解决方案 */
+.fixed-height-dialog :deep(.el-dialog) {
+  width: 1500px !important; /* 合并原内联样式 */
+  height: 800px !important; /* 关键：固定高度 */
+  display: flex;
+  flex-direction: column;
 }
-.no-label-radio .el-radio__inner {
-  margin-right: 0;
+
+.fixed-height-dialog :deep(.el-dialog__header) {
+  padding: 20px;
+  flex-shrink: 0; /* 防止标题栏压缩 */
+}
+
+.fixed-height-dialog :deep(.el-dialog__body) {
+  flex: 1;
+  overflow: hidden; /* 隐藏外层滚动 */
+  padding: 10px 20px; /* 适当内边距 */
+}
+
+/* 表格滚动核心 */
+.scrollable-table {
+  height: 100% !important;
+
+  :deep(.el-table__body-wrapper) {
+    overflow-y: auto !important;
+    max-height: calc(100% - 40px); /* 扣除表头高度 */
+  }
+
+  :deep(.el-table__header-wrapper) {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
 }
 </style>