feat: 首页优化

pages/home/homeNew.vue

@@ -42,7 +42,7 @@
 						<text style="font-size: 22rpx;">在线：</text>{{homeData.deviceOnLineCount}} 
 					</view>
 					<view class="num">
-						<text style="font-size: 22rpx;">离线：</text><text style="color: #ff0000;">{{ homeData.deviceOffLineCount }}</text>
+						<text style="font-size: 22rpx;">离线：</text><text style="color: #FFC553;">{{ homeData.deviceOffLineCount }}</text>
 					</view>
 				</view>
 
@@ -78,14 +78,14 @@
 			<!-- 通知公告 -->
 			<view class="notice-bar" v-if="noticeList.length > 0">
 				<u-icon name="volume" size="30rpx" color="#ff9900"></u-icon>
-			<swiper class="notice-swiper" vertical autoplay circular :interval="3000">
-				<swiper-item v-for="(item, index) in noticeList" :key="index">
-					<view class="notice-content" @click.stop="toNoticeDetail(item)">
-						<text class="notice-text">{{ item.title }}</text>
-						<text class="notice-date">{{ item.date }}</text>
-					</view>
-				</swiper-item>
-			</swiper>
+				<swiper class="notice-swiper" vertical autoplay circular :interval="3000">
+					<swiper-item v-for="(item, index) in noticeList" :key="index">
+						<view class="notice-content" @click.stop="toNoticeDetail(item)">
+							<text class="notice-text">{{ item.title }}</text>
+							<text class="notice-date">{{ item.date }}</text>
+						</view>
+					</swiper-item>
+				</swiper>
 			</view>
 
 			<manage ref="manageRef"></manage>
@@ -479,17 +479,17 @@
 			.cell {
 				display: flex;
 				width: 32%;
-				padding: 20rpx 0;
+				padding: 16rpx 0;
 				margin-bottom: 16rpx;
 				flex-direction: column;
-				background-color: rgb(22, 146, 50);
+				background-color: #169232;
 				justify-content: center;
 				align-items: center;
 				border-radius: 8rpx;
 				color: #fff;
 				min-height: 164rpx;
 				.num {
-					font-size: 28rpx;
+					font-size: 30rpx;
 				}
 
 				.label {

pages/home/pages/manage/manage.vue

@@ -7,7 +7,7 @@
       </view>
       <view class="section-content">
         <view class="data-cards">
-          <view class="data-card orange" @click="toSaleOrderDetail('year')">
+          <view class="data-card greenBg" @click="toSaleOrderDetail('year')">
             <view class="data-header">本年度</view>
             <!-- <view class="data-divider"></view> -->
             <view class="data-row">
@@ -20,7 +20,7 @@
               <text class="data-value">{{ marketing.yearOrderAmount }}<text class="data-unit">万元</text></text>
             </view>
           </view>
-          <view class="data-card orange" @click="toSaleOrderDetail('month')">
+          <view class="data-card blueBg" @click="toSaleOrderDetail('month')">
             <view class="data-header">本月</view>
             <!-- <view class="data-divider"></view> -->
             <view class="data-row">
@@ -50,7 +50,7 @@
       </view>
       <view class="section-content">
         <view class="data-cards">
-          <view class="data-card orange">
+          <view class="data-card greenBg2">
             <view class="data-header">本年度</view>
             <view class="data-row">
               <text class="data-label">生产工单</text>
@@ -62,7 +62,7 @@
               <text class="data-value">{{ production.yearTotal }}<text class="data-unit">件</text></text>
             </view>
           </view>
-          <view class="data-card orange">
+          <view class="data-card purpleBg">
             <view class="data-header">本月</view>
             <view class="data-row">
               <text class="data-label">生产工单</text>
@@ -91,7 +91,7 @@
       </view>
       <view class="section-content">
         <view class="data-cards">
-          <view class="data-card orange" @click="toPurchaseOrderDetail('year')">
+          <view class="data-card orangeBg" @click="toPurchaseOrderDetail('year')">
             <view class="data-header">本年度</view>
             <!-- <view class="data-divider"></view> -->
             <view class="data-row">
@@ -104,7 +104,7 @@
               <text class="data-value">{{ purchase.yearAmount }}<text class="data-unit">万元</text></text>
             </view>
           </view>
-          <view class="data-card orange" @click="toPurchaseOrderDetail('month')">
+          <view class="data-card blueBg2" @click="toPurchaseOrderDetail('month')">
             <view class="data-header">本月</view>
             <!-- <view class="data-divider"></view> -->
             <view class="data-row">
@@ -134,7 +134,7 @@
       </view>
       <view class="section-content">
         <view class="data-cards">
-          <view class="data-card orange">
+          <view class="data-card orangeBg2">
             <view class="data-header">年度出入库</view>
             <!-- <view class="data-divider"></view> -->
             <view class="data-row small">
@@ -157,7 +157,7 @@
               <text class="data-value">{{ warehouse.yearDeliveryOut }}</text>
             </view>
           </view>
-          <view class="data-card orange">
+          <view class="data-card greenBg3">
             <view class="data-header">本月出入库</view>
             <!-- <view class="data-divider"></view> -->
             <view class="data-row small">
@@ -602,27 +602,35 @@ export default {
         // 判断是否需要双Y轴（含金额/数量分离的图表：营销/采购/生产）
         const needDualYAxis = ['marketingChart', 'purchaseChart', 'productionChart'].includes(domId)
 
-        const barColors = ['#f5a529', '#0da323', '#f5a529', '#0da323']
-        const lineColors = ['#f5a529', '#0da323', '#f5a529', '#0da323']
+        // 根据不同模块设置不同颜色：[今年bar, 去年bar, 今年line, 去年line]
+        const colorMap = {
+          marketingChart: { bar: ['#169232', '#457EFF', '#169232', '#457EFF'], line: ['#169232', '#457EFF', '#169232', '#457EFF'] },
+          productionChart: { bar: ['#13C73C', '#624AFF', '#13C73C', '#624AFF'], line: ['#13C73C', '#624AFF', '#13C73C', '#624AFF'] },
+          purchaseChart: { bar: ['#FDDD64', '#5CD9CE', '#FDDD64', '#5CD9CE'], line: ['#FDDD64', '#5CD9CE', '#FDDD64', '#5CD9CE'] },
+          materialChart: { bar: ['#F4B631', '#1BCBBB', '#F4B631', '#1BCBBB'], line: ['#F4B631', '#1BCBBB', '#F4B631', '#1BCBBB'] },
+          finishedChart: { bar: ['#F4B631', '#1BCBBB', '#F4B631', '#1BCBBB'], line: ['#F4B631', '#1BCBBB', '#F4B631', '#1BCBBB'] }
+        }
+        const barColors = colorMap[domId]?.bar || ['#f5a529', '#0da323', '#f5a529', '#0da323']
+        const lineColors = colorMap[domId]?.line || ['#f5a529', '#0da323', '#f5a529', '#0da323']
 
         const option = {
           grid: {
             left: needDualYAxis ? '6%' : '6%',
             right: needDualYAxis ? '6%' : '6%',
             top: '12%',
-            bottom: '10%',
+            bottom: '8%',
             containLabel: true
           },
           tooltip: {
             trigger: 'axis',
             confine: true,
-            backgroundColor: '#f5a529',
-            borderColor: '#f5a529',
+            backgroundColor: '#fff',
+            borderColor: '#fff',
             borderRadius: 6,
             padding: [8, 12],
             textStyle: {
-              color: '#fff',
-              fontSize: 12
+              color: '#333',
+              fontSize: 11
             },
             formatter: (function(chartId, year) {
               var isAmountChart = chartId === 'marketingChart' || chartId === 'purchaseChart'
@@ -649,14 +657,14 @@ export default {
                   result += '\n'
                   for (var j = 0; j < thisYear.length; j++) {
                     var unit = getUnit(thisYear[j].seriesName)
-                    result += ' ' + thisYear[j].seriesName + '  ' + thisYear[j].value + unit + '\n'
+                    result += thisYear[j].marker + '  ' + thisYear[j].seriesName + '  ' + thisYear[j].value + unit + '\n'
                   }
                 }
                 if (lastYear.length) {
                   result += '去年同期\n'
                   for (var k = 0; k < lastYear.length; k++) {
                     var unit2 = getUnit(lastYear[k].seriesName)
-                    result += ' ' + lastYear[k].seriesName + '  ' + lastYear[k].value + unit2 + '\n'
+                    result += lastYear[k].marker + '  ' + lastYear[k].seriesName + '  ' + lastYear[k].value + unit2 + '\n'
                   }
                 }
                 return result
@@ -770,15 +778,18 @@ export default {
   margin-top: 2rpx;
   padding-bottom: 8rpx;
   overflow: visible;
+  background: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 30rpx;
 
   .section-header {
-    padding: 24rpx 0 24rpx;
+    padding: 16rpx 0;
 
     .section-title {
-      font-size: 30rpx;
+      font-size: 28rpx;
       font-weight: 600;
       color: #333;
-      padding-left: 12rpx;
+      padding-left: 16rpx;
       border-left: 6rpx solid #34c759;
     }
   }
@@ -799,15 +810,16 @@ export default {
   .data-card {
     border-radius: 12rpx;
     overflow: hidden;
-    background: linear-gradient(135deg, #edb15b 0%, #ff6b00 100%);
+    // background: linear-gradient(135deg, #edb15b 0%, #ff6b00 100%);
     // background: linear-gradient(135deg, #f8caca 0%, #F56C6C 100%);
-    box-shadow: 0 4rpx 16rpx rgba(255, 149, 0, 0.25);
+    // box-shadow: 0 4rpx 16rpx rgba(255, 149, 0, 0.25);
     padding: 20rpx;
+    color: #333;
 
     .data-header {
       font-size: 26rpx;
       font-weight: 600;
-      color: #fff;
+      // color: #fff;
       margin-bottom: 6rpx;
     }
 
@@ -822,19 +834,19 @@ export default {
       justify-content: space-between;
       // padding: 8rpx 0;
 
-      &.small {
+      // &.small {
         // padding: 6rpx 0;
-      }
+      // }
 
       .data-label {
         font-size: 24rpx;
-        color: rgba(255, 255, 255, 0.9);
+        // color: rgba(255, 255, 255, 0.9);
       }
 
       .data-value {
-        font-size: 30rpx;
-        font-weight: 700;
-        color: #fff;
+        font-size: 24rpx;
+        font-weight: 600;
+        // color: #fff;
       }
 
       .data-unit {
@@ -844,6 +856,30 @@ export default {
       }
     }
   }
+  .greenBg {
+    background-color: rgba(175, 255, 193, 0.2);
+  }
+  .blueBg {
+    background-color: rgba(145, 179, 255, 0.2);
+  }
+  .greenBg2 {
+    background-color: rgba(157, 255, 179, 0.2);
+  }
+  .purpleBg {
+    background-color: rgba(230, 226, 255, 0.5);
+  }
+  .orangeBg {
+    background-color: rgba(253, 221, 100, 0.2);
+  }
+  .blueBg2 {
+    background-color: rgba(0, 255, 233, 0.2);
+  }
+  .orangeBg2 {
+    background-color: rgba(255, 106, 0, 0.1);
+  }
+  .greenBg3 {
+    background-color: rgba(0, 194, 176, 0.1);
+  }
 }
 
 /* 图表 */
@@ -868,7 +904,7 @@ export default {
 
   .chart {
     width: 100%;
-    height: 280px;
+    height: 220px;
     min-height: 200px;
     display: block;
     position: relative;