feat: 调整每日数据统计页面样式

调整每日数据统计页面的样式，同一港区下的表格行颜色。

ruoyi-ui/src/views/dataStatistics/daily/index.vue

@@ -14,7 +14,12 @@
       </el-col>
       <el-col :span="18">
         <div class="export_btn">
-          <el-button type="primary" icon="eel-icon-download" @click="handleExport">导出</el-button>
+          <el-button
+            type="primary"
+            icon="eel-icon-download"
+            @click="handleExport"
+            >导出</el-button
+          >
         </div>
       </el-col>
     </el-row>
@@ -25,13 +30,16 @@
         border
         style="width: 100%"
         :span-method="objectSpanMethod"
+        :row-class-name="tableRowClassName"
       >
         <el-table-column prop="ppp" label="港口">
           <template slot-scope="{ row }">
             <div>{{ row.ppp }}</div>
             <div style="display: flex; gap: 10px">
-              <el-tag>港口数: {{ getChildCount(row, 'ppp', 'pp') }}</el-tag>
+              <el-tag>港口数: {{ getChildCount(row, "ppp", "pp") }}</el-tag>
-              <el-tag type="warning">平均值:  {{ calculateChildAvg(row, 'ppp') }}</el-tag>
+              <el-tag type="warning"
+                >平均值: {{ calculateChildAvg(row, "ppp") }}</el-tag
+              >
             </div>
           </template>
         </el-table-column>
@@ -40,8 +48,10 @@
           <template slot-scope="{ row }">
             <div>{{ row.pp }}</div>
             <div style="display: flex; gap: 10px">
-              <el-tag>企业数: {{ getChildCount(row, 'pp', 'p') }}</el-tag>
+              <el-tag>企业数: {{ getChildCount(row, "pp", "p") }}</el-tag>
-              <el-tag type="warning">平均值:  {{ calculateChildAvg(row, 'pp') }}</el-tag>
+              <el-tag type="warning"
+                >平均值: {{ calculateChildAvg(row, "pp") }}</el-tag
+              >
             </div>
           </template>
         </el-table-column>
@@ -50,8 +60,10 @@
           <template slot-scope="{ row }">
             <div>{{ row.p }}</div>
             <div style="display: flex; gap: 10px">
-              <el-tag>设备数: {{ getChildCount(row, 'p', 'sn') }}</el-tag>
+              <el-tag>设备数: {{ getChildCount(row, "p", "sn") }}</el-tag>
-              <el-tag type="warning">平均值: {{ calculateChildAvg(row, 'p') }}</el-tag>
+              <el-tag type="warning"
+                >平均值: {{ calculateChildAvg(row, "p") }}</el-tag
+              >
             </div>
           </template>
         </el-table-column>
@@ -84,7 +96,18 @@ export default {
     this.day = moment().format("YYYY-MM-DD");
     this.queryData();
   },
+  computed: {
+    pppList() {
+      return Array.from(new Set(this.tableData.map((item) => item.ppp)));
+    },
+  },
   methods: {
+    tableRowClassName({ row, rowIndex }) {
+      const classNames = ["default-row", "success-row", "error-row", "warning-row", "info-row"];
+      const index = this.pppList.findIndex((item) => item === row.ppp);
+      if (index === -1) return "info-row";
+      return index > classNames.length - 1 ? classNames[index % classNames.length] : classNames[index];
+    },
     changeDate() {
       this.queryData();
     },
@@ -94,7 +117,7 @@ export default {
           this.tableData = res.data.map((item) => {
             return {
               ...item,
-              avgDs: parseFloat(item.avgDs.toFixed(2))
+              avgDs: parseFloat(item.avgDs.toFixed(2)),
             };
           });
         }
@@ -152,7 +175,9 @@ export default {
         }
       }
       // 计算平均值, 保留两位小数
-      return (childList.reduce((a, b) => a + b, 0) / childList.length).toFixed(2);
+      return (childList.reduce((a, b) => a + b, 0) / childList.length).toFixed(
+        2
+      );
     },
     handleExport() {
       exportExcel("#dailyTable", `${this.day}-数据统计`);
@@ -161,6 +186,27 @@ export default {
 };
 </script>
 
+<style>
+.el-table .warning-row {
+  background: rgba(248,236,216,0.3);
+}
+
+.el-table .success-row {
+  background: rgba(225,243,216,0.3);
+}
+
+.el-table .error-row {
+  background: rgba(252,226,226,0.3);
+}
+
+.el-table .default-row {
+  background: rgba(201,226,255,0.3);
+}
+
+.el-table .info-row {
+  background: rgba(233,233,235,0.3);
+}
+</style>
 <style scoped>
 .daily-data {
   padding: 10px 20px;