pms 保养查询 距离保养 负数 红色字体标识

src/views/pms/iotmainworkorder/DeviceAlarmBomList.vue

@@ -63,7 +63,13 @@
             <el-table-column :label="t('mainPlan.RunTimeCycle')" align="center" prop="nextRunningTime"
                              :width="columnWidths.nextRunningTime"/>
             <el-table-column :label="t('mainPlan.nextMaintTime')" align="center" prop="timePeriod"
-                             :width="columnWidths.timePeriod"/>
+                             :width="columnWidths.timePeriod">
+              <template #default="{ row }">
+                <span :class="{ 'negative-value': isNegative(row.timePeriod) }">
+                  {{ row.timePeriod }}
+                </span>
+              </template>
+            </el-table-column>
           </el-table-column>
 
           <!-- 里程分组列 -->
@@ -75,7 +81,13 @@
             <el-table-column :label="t('mainPlan.operatingMileageCycle')" align="center" prop="nextRunningKilometers"
                              :width="columnWidths.nextRunningKilometers"/>
             <el-table-column :label="t('mainPlan.nextMaintKil')" align="center" prop="kilometerCycle"
-                             :width="columnWidths.kilometerCycle"/>
+                             :width="columnWidths.kilometerCycle">
+              <template #default="{ row }">
+                <span :class="{ 'negative-value': isNegative(row.kilometerCycle) }">
+                  {{ row.kilometerCycle }}
+                </span>
+              </template>
+            </el-table-column>
           </el-table-column>
 
           <!-- 日期分组列 -->
@@ -472,6 +484,13 @@ const resetQuery = () => {
   handleQuery()
 }
 
+// 判断是否为负数的辅助函数
+const isNegative = (value: any): boolean => {
+  if (value === null || value === undefined || value === '') return false;
+  const num = Number(value);
+  return !isNaN(num) && num < 0;
+};
+
 // 监听分页数据变化，重新设置列宽
 watch(paginatedList, () => {
   nextTick(() => {
@@ -650,4 +669,9 @@ watch([showTimeColumns, showMileageColumns, showNaturalDateColumns], () => {
   }
 }
 
+/* 负数值样式 */
+.negative-value {
+  color: #f56c6c;
+  font-weight: 600;
+}
 </style>