这个调好了。

src/views/dye/line/calc.vue

@@ -3,7 +3,7 @@
     <!-- 产线选择 -->
     <el-row :gutter="20" style="margin-bottom: 20px;">
       <el-col :span="24">
-        <el-card>
+        <el-card class="search-card">
           <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"
                    style="display: inline-block; vertical-align: middle;">
             <el-form-item label="日期" style="margin-bottom: 0;">
@@ -54,51 +54,86 @@
     <el-row :gutter="20" style="margin-bottom: 20px;" v-if="lineDataList0.length > 0 || lineDataList1.length > 0">
       <!-- 左侧产线统计数据 -->
       <el-col :span="12" v-if="lineDataList0.length > 0">
-        <el-card>
-          <div slot="header" class="clearfix" style="text-align: center; font-weight: bold; font-size: 18px;">
-            <span>{{ lineDataList0[0].line }}号线统计</span>
+        <el-card class="stat-card">
+          <div slot="header" class="clearfix stat-header">
+            <span class="stat-title">{{ lineDataList0[0].line }}号线统计</span>
           </div>
           <el-row :gutter="10">
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">产量(米)</div>
-                <div class="stat-value">{{ calculateTotal(lineDataList0, 'length') }}</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>
+                  {{ calculateTotal(lineDataList0, 'length') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">电量(kW·h)</div>
-                <div class="stat-value">{{ calculateTotal(lineDataList0, 'energy') }}</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>
+                  {{ calculateTotal(lineDataList0, 'energy') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">电流(A)</div>
-                <div class="stat-value">{{ calculateAverage(lineDataList0, 'amp') }}</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>
+                  {{ calculateAverage(lineDataList0, 'amp') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">速度(m/min)</div>
-                <div class="stat-value">{{ calculateAverage(lineDataList0, 'speed') }}</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>
+                  {{ calculateAverage(lineDataList0, 'speed') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">定型温度(°C)</div>
-                <div class="stat-value">{{ calculateAverage(lineDataList0, 'tmpDx') }}</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>
+                  {{ calculateAverage(lineDataList0, 'tmpDx') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">烫光温度(°C)</div>
-                <div class="stat-value">{{ calculateAverage(lineDataList0, 'tmpTg') }}</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>
+                  {{ calculateAverage(lineDataList0, 'tmpTg') }}
+                </div>
               </div>
             </el-col>
-            <el-col :span="3">
+            <el-col :span="6">
               <div class="stat-item">
-                <div class="stat-label" style="white-space: nowrap;">单位成本<br>(kW·h/米)</div>
-                <div class="stat-value">{{ calculateUnitCost(lineDataList0) }}</div>
+                <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>
+                  {{ calculateUnitCost(lineDataList0) }}
+                </div>
               </div>
             </el-col>
           </el-row>
@@ -107,66 +142,101 @@
 
       <!-- 右侧产线统计数据 -->
       <el-col :span="12" v-if="lineDataList1.length > 0">
-        <el-card>
-          <div slot="header" class="clearfix" style="text-align: center; font-weight: bold; font-size: 18px;">
-            <span>{{ lineDataList1[0].line }}号线统计</span>
+        <el-card class="stat-card">
+          <div slot="header" class="clearfix stat-header">
+            <span class="stat-title">{{ lineDataList1[0].line }}号线统计</span>
           </div>
           <el-row :gutter="10">
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">产量(米)</div>
-                <div class="stat-value">{{ calculateTotal(lineDataList1, 'length') }}</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>
+                  {{ calculateTotal(lineDataList1, 'length') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">电量(kW·h)</div>
-                <div class="stat-value">{{ calculateTotal(lineDataList1, 'energy') }}</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>
+                  {{ calculateTotal(lineDataList1, 'energy') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">电流(A)</div>
-                <div class="stat-value">{{ calculateAverage(lineDataList1, 'amp') }}</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>
+                  {{ calculateAverage(lineDataList1, 'amp') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">速度(m/min)</div>
-                <div class="stat-value">{{ calculateAverage(lineDataList1, 'speed') }}</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>
+                  {{ calculateAverage(lineDataList1, 'speed') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">定型温度(°C)</div>
-                <div class="stat-value">{{ calculateAverage(lineDataList1, 'tmpDx') }}</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>
+                  {{ calculateAverage(lineDataList1, 'tmpDx') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="3">
               <div class="stat-item">
                 <div class="stat-label">烫光温度(°C)</div>
-                <div class="stat-value">{{ calculateAverage(lineDataList1, 'tmpTg') }}</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>
+                  {{ calculateAverage(lineDataList1, 'tmpTg') }}
+                </div>
               </div>
             </el-col>
             <el-col :span="6">
               <div class="stat-item">
                 <div class="stat-label" style="white-space: nowrap;">单位成本(kW·h/米)</div>
-                <div class="stat-value">{{ calculateUnitCost(lineDataList1) }}</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>
+                  {{ calculateUnitCost(lineDataList1) }}
+                </div>
               </div>
             </el-col>
           </el-row>
         </el-card>
       </el-col>
     </el-row>
-
+    
     <!-- 对比分析结论 -->
     <el-row :gutter="20" style="margin-bottom: 20px;" v-if="lineDataList0.length > 0 && lineDataList1.length > 0">
       <el-col :span="24">
-        <el-card>
+        <el-card class="analysis-card">
           <div slot="header" class="clearfix">
-            <span style="font-weight: bold;">产线能效对比分析</span>
+            <span class="analysis-title">产线能效对比分析</span>
           </div>
-          <div style="padding: 10px;">
+          <div class="analysis-content">
             <p v-html="analysisText"></p>
           </div>
         </el-card>
@@ -500,6 +570,17 @@ function calculateUnitCost(dataList) {
   return unitCost.toFixed(2);
 }
 
+// 获取比较结果的图标和颜色
+function getComparisonIndicator(value1, value2) {
+  if (value1 > value2) {
+    return { icon: '↑', color: '#f56c6c' }; // 上升箭头，红色
+  } else if (value1 < value2) {
+    return { icon: '↓', color: '#67c23a' }; // 下降箭头，绿色
+  } else {
+    return { icon: '-', color: '#909399' }; // 平衡符号，灰色
+  }
+}
+
 // 生成分析文本
 const analysisText = computed(() => {
   if (lineDataList0.value.length === 0 || lineDataList1.value.length === 0) {
@@ -517,6 +598,12 @@ const analysisText = computed(() => {
 
   const totalEnergy0 = parseFloat(calculateTotal(lineDataList0.value, 'energy'));
   const totalEnergy1 = parseFloat(calculateTotal(lineDataList1.value, 'energy'));
+  
+  const avgSpeed0 = parseFloat(calculateAverage(lineDataList0.value, 'speed'));
+  const avgSpeed1 = parseFloat(calculateAverage(lineDataList1.value, 'speed'));
+  
+  const avgTemp0 = (parseFloat(calculateAverage(lineDataList0.value, 'tmpDx')) + parseFloat(calculateAverage(lineDataList0.value, 'tmpTg'))) / 2;
+  const avgTemp1 = (parseFloat(calculateAverage(lineDataList1.value, 'tmpDx')) + parseFloat(calculateAverage(lineDataList1.value, 'tmpTg'))) / 2;
 
   let comparison = '';
   if (unitCost0 < unitCost1) {
@@ -528,13 +615,40 @@ const analysisText = computed(() => {
   } else {
     comparison = `两条产线能效相当。`;
   }
+  
+  // 速度和温度分析
+  let speedAnalysis = '';
+  if (avgSpeed0 > 0 && avgSpeed1 > 0) {
+    if (avgSpeed0 > avgSpeed1) {
+      const speedDiffPercent = ((avgSpeed0 - avgSpeed1) / avgSpeed1 * 100).toFixed(2);
+      speedAnalysis = `${line0}号线平均速度比${line1}号线高${speedDiffPercent}%，`;
+    } else if (avgSpeed1 > avgSpeed0) {
+      const speedDiffPercent = ((avgSpeed1 - avgSpeed0) / avgSpeed0 * 100).toFixed(2);
+      speedAnalysis = `${line1}号线平均速度比${line0}号线高${speedDiffPercent}%，`;
+    } else {
+      speedAnalysis = '两条产线平均速度相当，';
+    }
+  }
+  
+  let tempAnalysis = '';
+  if (!isNaN(avgTemp0) && !isNaN(avgTemp1)) {
+    if (avgTemp0 > avgTemp1) {
+      const tempDiff = (avgTemp0 - avgTemp1).toFixed(1);
+      tempAnalysis = `且${line0}号线平均温度比${line1}号线高${tempDiff}°C。`;
+    } else if (avgTemp1 > avgTemp0) {
+      const tempDiff = (avgTemp1 - avgTemp0).toFixed(1);
+      tempAnalysis = `且${line1}号线平均温度比${line0}号线高${tempDiff}°C。`;
+    } else {
+      tempAnalysis = '且两条产线平均温度相当。';
+    }
+  }
 
   const efficiency0 = totalLength0 > 0 ? (totalEnergy0 / totalLength0).toFixed(2) : '0';
   const efficiency1 = totalLength1 > 0 ? (totalEnergy1 / totalLength1).toFixed(2) : '0';
 
   return `在 ${queryParams.value.workDay} 的生产中，${line0}号线总产量${totalLength0.toFixed(0)}米，总耗电量${totalEnergy0.toFixed(2)}kW·h，
   单位成本为${efficiency0}kW·h/米；${line1}号线总产量${totalLength1.toFixed(0)}米，总耗电量${totalEnergy1.toFixed(2)}kW·h，
-  单位成本为${efficiency1}kW·h/米。${comparison}较低的单位成本意味着更高的能源利用效率，请根据实际情况合理安排生产计划。`;
+  单位成本为${efficiency1}kW·h/米。${comparison}${speedAnalysis}${tempAnalysis}较低的单位成本意味着更高的能源利用效率，请根据实际情况合理安排生产计划。`;
 });
 
 // 按产线分组的数据
@@ -1929,21 +2043,97 @@ getList();
 </script>
 
 <style scoped>
-.stat-item {
+.app-container {
+  background-color: #f5f7fa;
+  padding: 20px;
+  min-height: 100vh;
+}
+
+.search-card {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+}
+
+.stat-card {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+}
+
+.stat-header {
   text-align: center;
+  font-weight: bold;
+  font-size: 18px;
   padding: 10px 0;
 }
 
+.stat-title {
+  color: #303133;
+  font-weight: 600;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 15px 5px;
+  border-radius: 4px;
+  background-color: #ffffff;
+  margin-bottom: 10px;
+  transition: all 0.3s ease;
+  border: 1px solid #f0f0f0;
+}
+
+.stat-item:hover {
+  background-color: #f9f9f9;
+  border-color: #e0e0e0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
 .stat-label {
   font-size: 12px;
   color: #606266;
-  margin-bottom: 5px;
+  margin-bottom: 8px;
+  font-weight: 500;
 }
 
 .stat-value {
   font-size: 16px;
   font-weight: bold;
   color: #409EFF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stat-value span {
+  font-weight: bolder;
+  margin-right: 5px;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.analysis-card {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+}
+
+.analysis-title {
+  color: #303133;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.analysis-content {
+  padding: 15px;
+  line-height: 1.6;
+  color: #606266;
 }
 
 .clearfix:before,
@@ -1955,4 +2145,4 @@ getList();
 .clearfix:after {
   clear: both;
 }
-</style>
+</style>