Browse Source

pms 瑞鹰日报 设置油耗阈值

zhangcl 1 week ago
parent
commit
8e4e4347b7

+ 44 - 1
src/views/pms/iotrydailyreport/index.vue

@@ -70,6 +70,10 @@
 
       <ContentWrap class="mb-15px">
         <div class="color-legend">
+          <div class="legend-item">
+            <span class="color-indicator red"></span>
+            <span>当日油耗大于15吨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;红色预警</span>
+          </div>
           <div class="legend-item">
             <span class="color-indicator orange"></span>
             <span>进尺工作时间+其它生产时间+非生产时间=24H&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警</span>
@@ -114,7 +118,13 @@
             <el-table-column label="泥浆性能-密度(g/cm³)" align="center" prop="mudDensity" :width="columnWidths.mudDensity"/>
             <el-table-column label="泥浆性能-粘度(S)" align="center" prop="mudViscosity" :width="columnWidths.mudViscosity"/>
             <el-table-column label="当日用电量(kWh)" align="center" prop="dailyPowerUsage" :width="columnWidths.mudViscosity"/>
-            <el-table-column label="当日油耗(吨)" align="center" prop="dailyFuel" :width="columnWidths.mudViscosity"/>
+            <el-table-column label="当日油耗(吨)" align="center" prop="dailyFuel" :width="columnWidths.mudViscosity">
+              <template #default="scope">
+                <span :class="{'fuel-warning': shouldShowFuelWarning(scope.row)}">
+                  {{ scope.row.dailyFuel }}
+                </span>
+              </template>
+            </el-table-column>
             <el-table-column
               label="施工开始日期"
               align="center"
@@ -338,8 +348,25 @@ const checkTimeSumEquals24 = (row: any) => {
   return Math.abs(sum - 24) < 0.01; // 使用0.01作为误差范围
 };
 
+// 在 cellStyle 函数附近添加油耗预警判断函数
+const shouldShowFuelWarning = (row: any): boolean => {
+  const dailyFuel = parseFloat(row.dailyFuel);
+  return !isNaN(dailyFuel) && dailyFuel > 15;
+};
+
 // 单元格样式函数
 const cellStyle = ({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }) => {
+  // 处理当日油耗预警
+  if (column.property === 'dailyFuel') {
+    if (shouldShowFuelWarning(row)) {
+      return {
+        color: 'red',
+        fontWeight: 'bold',
+        backgroundColor: '#fff5f5' // 可选:添加背景色突出显示
+      };
+    }
+  }
+
   // 处理三个时间字段:当日注气时间、当日注水时间、非生产时间
   const timeFields = ['drillingWorkingTime', 'otherProductionTime', 'accidentTime',
     'repairTime', 'selfStopTime', 'complexityTime',
@@ -716,4 +743,20 @@ watch(list, () => {
   max-width: 500px;
   line-height: 1.5;
 }
+.color-indicator.red {
+  background-color: red;
+}
+
+/* 当日油耗预警样式 */
+.fuel-warning {
+  color: red !important;
+  font-weight: bold;
+  animation: pulse 1.5s infinite;
+}
+
+/* 确保表格中的预警样式不被覆盖 */
+:deep(.el-table .cell .fuel-warning) {
+  color: red !important;
+  font-weight: bold !important;
+}
 </style>

+ 22 - 0
src/views/pms/iotrydailyreport/xjindex.vue

@@ -78,6 +78,10 @@
             <span class="color-indicator orange"></span>
             <span>生产时间+非生产时间=额定生产时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警</span>
           </div>
+          <div class="legend-item">
+            <span class="color-indicator yellow"></span>
+            <span>当日油耗大于5吨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黄色预警</span>
+          </div>
         </div>
       </ContentWrap>
 
@@ -375,6 +379,19 @@ const checkTimeSumEquals24 = (row: any) => {
 
 // 单元格样式函数
 const cellStyle = ({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }) => {
+  // 当日油耗预警逻辑
+  if (column.property === 'dailyFuel') {
+    const dailyFuel = parseFloat(row.dailyFuel) || 0;
+    if (dailyFuel > 5) {
+      return {
+        backgroundColor: '#fffbe6', // 浅黄色背景
+        color: '#d46b08', // 橙色文字
+        fontWeight: 'bold',
+        border: '1px solid #ffd591' // 可选:添加边框突出显示
+      };
+    }
+  }
+
   // 1. 检查三个时间字段:额定生产时间、生产时间、非生产时间
   const timeFields = ['ratedProductionTime', 'productionTime', 'nonProductionTime'];
   if (timeFields.includes(column.property)) {
@@ -827,6 +844,11 @@ watch(list, () => {
   background-color: orange;
 }
 
+/* 在原有样式基础上添加黄色指示器 */
+.color-indicator.yellow {
+  background-color: #ffc53d; /* 黄色,与警告颜色一致 */
+}
+
 </style>
 
 <style>