调整一下产线分析方块颜色

src/views/dye/line/calc.vue

@@ -60,78 +60,78 @@
           </div>
           <el-row :gutter="10">
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item production">
                 <div class="stat-label">产量(米)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateTotal(lineDataList0, 'length')), parseFloat(calculateTotal(lineDataList1, 'length'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateTotal(lineDataList0, 'length')), parseFloat(calculateTotal(lineDataList1, 'length'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateTotal(lineDataList0, 'length')), parseFloat(calculateTotal(lineDataList1, 'length'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateTotal(lineDataList0, 'length')), parseFloat(calculateTotal(lineDataList1, 'length'))).icon" />
+                  </el-icon>
                   {{ calculateTotal(lineDataList0, 'length') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item energy">
                 <div class="stat-label">电量(kW·h)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateTotal(lineDataList0, 'energy')), parseFloat(calculateTotal(lineDataList1, 'energy'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateTotal(lineDataList0, 'energy')), parseFloat(calculateTotal(lineDataList1, 'energy'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateTotal(lineDataList0, 'energy')), parseFloat(calculateTotal(lineDataList1, 'energy'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateTotal(lineDataList0, 'energy')), parseFloat(calculateTotal(lineDataList1, 'energy'))).icon" />
+                  </el-icon>
                   {{ calculateTotal(lineDataList0, 'energy') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item electric">
                 <div class="stat-label">电流(A)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'amp')), parseFloat(calculateAverage(lineDataList1, 'amp'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'amp')), parseFloat(calculateAverage(lineDataList1, 'amp'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'amp')), parseFloat(calculateAverage(lineDataList1, 'amp'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'amp')), parseFloat(calculateAverage(lineDataList1, 'amp'))).icon" />
+                  </el-icon>
                   {{ calculateAverage(lineDataList0, 'amp') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item speed">
                 <div class="stat-label">速度(m/min)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'speed')), parseFloat(calculateAverage(lineDataList1, 'speed'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'speed')), parseFloat(calculateAverage(lineDataList1, 'speed'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'speed')), parseFloat(calculateAverage(lineDataList1, 'speed'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'speed')), parseFloat(calculateAverage(lineDataList1, 'speed'))).icon" />
+                  </el-icon>
                   {{ calculateAverage(lineDataList0, 'speed') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item temperature">
                 <div class="stat-label">定型温度(°C)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'tmpDx')), parseFloat(calculateAverage(lineDataList1, 'tmpDx'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'tmpDx')), parseFloat(calculateAverage(lineDataList1, 'tmpDx'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'tmpDx')), parseFloat(calculateAverage(lineDataList1, 'tmpDx'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'tmpDx')), parseFloat(calculateAverage(lineDataList1, 'tmpDx'))).icon" />
+                  </el-icon>
                   {{ calculateAverage(lineDataList0, 'tmpDx') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item temperature">
                 <div class="stat-label">烫光温度(°C)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'tmpTg')), parseFloat(calculateAverage(lineDataList1, 'tmpTg'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'tmpTg')), parseFloat(calculateAverage(lineDataList1, 'tmpTg'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'tmpTg')), parseFloat(calculateAverage(lineDataList1, 'tmpTg'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateAverage(lineDataList0, 'tmpTg')), parseFloat(calculateAverage(lineDataList1, 'tmpTg'))).icon" />
+                  </el-icon>
                   {{ calculateAverage(lineDataList0, 'tmpTg') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="6">
-              <div class="stat-item">
+              <div class="stat-item cost">
                 <div class="stat-label" style="white-space: nowrap;">单位成本(kW·h/米)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateUnitCost(lineDataList0)), parseFloat(calculateUnitCost(lineDataList1))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateUnitCost(lineDataList0)), parseFloat(calculateUnitCost(lineDataList1))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateUnitCost(lineDataList0)), parseFloat(calculateUnitCost(lineDataList1))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateUnitCost(lineDataList0)), parseFloat(calculateUnitCost(lineDataList1))).icon" />
+                  </el-icon>
                   {{ calculateUnitCost(lineDataList0) }}
                 </div>
               </div>
@@ -148,78 +148,78 @@
           </div>
           <el-row :gutter="10">
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item production">
                 <div class="stat-label">产量(米)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateTotal(lineDataList1, 'length')), parseFloat(calculateTotal(lineDataList0, 'length'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateTotal(lineDataList1, 'length')), parseFloat(calculateTotal(lineDataList0, 'length'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateTotal(lineDataList1, 'length')), parseFloat(calculateTotal(lineDataList0, 'length'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateTotal(lineDataList1, 'length')), parseFloat(calculateTotal(lineDataList0, 'length'))).icon" />
+                  </el-icon>
                   {{ calculateTotal(lineDataList1, 'length') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item energy">
                 <div class="stat-label">电量(kW·h)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateTotal(lineDataList1, 'energy')), parseFloat(calculateTotal(lineDataList0, 'energy'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateTotal(lineDataList1, 'energy')), parseFloat(calculateTotal(lineDataList0, 'energy'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateTotal(lineDataList1, 'energy')), parseFloat(calculateTotal(lineDataList0, 'energy'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateTotal(lineDataList1, 'energy')), parseFloat(calculateTotal(lineDataList0, 'energy'))).icon" />
+                  </el-icon>
                   {{ calculateTotal(lineDataList1, 'energy') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item electric">
                 <div class="stat-label">电流(A)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'amp')), parseFloat(calculateAverage(lineDataList0, 'amp'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'amp')), parseFloat(calculateAverage(lineDataList0, 'amp'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'amp')), parseFloat(calculateAverage(lineDataList0, 'amp'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'amp')), parseFloat(calculateAverage(lineDataList0, 'amp'))).icon" />
+                  </el-icon>
                   {{ calculateAverage(lineDataList1, 'amp') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item speed">
                 <div class="stat-label">速度(m/min)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'speed')), parseFloat(calculateAverage(lineDataList0, 'speed'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'speed')), parseFloat(calculateAverage(lineDataList0, 'speed'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'speed')), parseFloat(calculateAverage(lineDataList0, 'speed'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'speed')), parseFloat(calculateAverage(lineDataList0, 'speed'))).icon" />
+                  </el-icon>
                   {{ calculateAverage(lineDataList1, 'speed') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item temperature">
                 <div class="stat-label">定型温度(°C)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'tmpDx')), parseFloat(calculateAverage(lineDataList0, 'tmpDx'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'tmpDx')), parseFloat(calculateAverage(lineDataList0, 'tmpDx'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'tmpDx')), parseFloat(calculateAverage(lineDataList0, 'tmpDx'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'tmpDx')), parseFloat(calculateAverage(lineDataList0, 'tmpDx'))).icon" />
+                  </el-icon>
                   {{ calculateAverage(lineDataList1, 'tmpDx') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="3">
-              <div class="stat-item">
+              <div class="stat-item temperature">
                 <div class="stat-label">烫光温度(°C)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'tmpTg')), parseFloat(calculateAverage(lineDataList0, 'tmpTg'))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'tmpTg')), parseFloat(calculateAverage(lineDataList0, 'tmpTg'))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'tmpTg')), parseFloat(calculateAverage(lineDataList0, 'tmpTg'))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateAverage(lineDataList1, 'tmpTg')), parseFloat(calculateAverage(lineDataList0, 'tmpTg'))).icon" />
+                  </el-icon>
                   {{ calculateAverage(lineDataList1, 'tmpTg') }}
                 </div>
               </div>
             </el-col>
             <el-col :span="6">
-              <div class="stat-item">
+              <div class="stat-item cost">
                 <div class="stat-label" style="white-space: nowrap;">单位成本(kW·h/米)</div>
                 <div class="stat-value">
-                  <span :style="{ color: getComparisonIndicator(parseFloat(calculateUnitCost(lineDataList1)), parseFloat(calculateUnitCost(lineDataList0))).color }">
-                    {{ getComparisonIndicator(parseFloat(calculateUnitCost(lineDataList1)), parseFloat(calculateUnitCost(lineDataList0))).icon }}
-                  </span>
+                  <el-icon :style="{ color: getComparisonIndicator(parseFloat(calculateUnitCost(lineDataList1)), parseFloat(calculateUnitCost(lineDataList0))).color }">
+                    <component :is="getComparisonIndicator(parseFloat(calculateUnitCost(lineDataList1)), parseFloat(calculateUnitCost(lineDataList0))).icon" />
+                  </el-icon>
                   {{ calculateUnitCost(lineDataList1) }}
                 </div>
               </div>
@@ -573,11 +573,11 @@ function calculateUnitCost(dataList) {
 // 获取比较结果的图标和颜色
 function getComparisonIndicator(value1, value2) {
   if (value1 > value2) {
-    return { icon: '↑', color: '#f56c6c' }; // 上升箭头，红色
+    return { icon: 'Top', color: '#f56c6c' }; // 上升箭头，红色
   } else if (value1 < value2) {
-    return { icon: '↓', color: '#67c23a' }; // 下降箭头，绿色
+    return { icon: 'Bottom', color: '#67c23a' }; // 下降箭头，绿色
   } else {
-    return { icon: '-', color: '#909399' }; // 平衡符号，灰色
+    return { icon: 'Minus', color: '#909399' }; // 平衡符号，灰色
   }
 }
 
@@ -2082,11 +2082,16 @@ getList();
 .stat-item {
   text-align: center;
   padding: 15px 5px;
-  border-radius: 4px;
-  background-color: #ffffff;
+  border-radius: 6px;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   margin-bottom: 10px;
   transition: all 0.3s ease;
-  border: 1px solid #f0f0f0;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e9ecef;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 65px;
 }
 
 .stat-item:hover {
@@ -2095,6 +2100,37 @@ getList();
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
+/* 为不同指标使用协调的配色方案 */
+.stat-item.production { /* 产量相关 */
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  border-color: #90caf9;
+}
+
+.stat-item.energy { /* 电量相关 */
+  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
+  border-color: #ce93d8;
+}
+
+.stat-item.electric { /* 电流相关 */
+  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
+  border-color: #a5d6a7;
+}
+
+.stat-item.speed { /* 速度相关 */
+  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
+  border-color: #ffcc80;
+}
+
+.stat-item.temperature { /* 温度相关 */
+  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
+  border-color: #80deea;
+}
+
+.stat-item.cost { /* 成本相关 */
+  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
+  border-color: #f48fb1;
+}
+
 .stat-label {
   font-size: 12px;
   color: #606266;
@@ -2109,13 +2145,18 @@ getList();
   display: flex;
   align-items: center;
   justify-content: center;
+  line-height: 1.2;
 }
 
-.stat-value span {
+.stat-value .el-icon {
   font-weight: bolder;
   margin-right: 5px;
-  font-size: 18px;
+  font-size: 16px;
   line-height: 1;
+  display: flex;
+  align-items: center;
+  transform: translateY(-1px);
+  font-size: 18px;
 }
 
 .analysis-card {