feat：新首页优化

pages/home/homeNew.vue

@@ -137,25 +137,14 @@
 			manage
 		},
 		onShow() {
-			this.init()
-			let _this = this
-			uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
-			uni.$on('scancodedate', function(data) {
-				console.log(data, '-----scancodedate')
-				_this.cbScancodedate(data)
-			})
-			// this.getStatistics()
-			// this.Scancodedate()
+			// NOTE: 当 homeNew 作为子组件嵌入 home.vue 时，以下 UniApp 页面级钩子不会被调用。
+			// 相关逻辑已迁移到 mounted() 中执行。
 		},
 		onReady() {
-			this.getHomeData()
-			setTimeout(() => {
-				this.$refs.manageRef?.initCharts()
-			}, 300)
+			// NOTE: 当 homeNew 作为子组件嵌入 home.vue 时，UniApp 页面级钩子不会被调用。
+			// getHomeData() 已迁移到 mounted() 中执行。
 		},
 		onLoad() {
-			// this.getHomeData()
-			// this.getStatistics()
 		},
 		onUnload() {
 			uni.$off('scancodedate')
@@ -163,6 +152,19 @@
 		onHide() {
 			uni.$off('scancodedate')
 		},
+		mounted() {
+			this.init()
+			this.getHomeData()
+			setTimeout(() => {
+				this.$refs.manageRef?.initCharts()
+			}, 300)
+			let _this = this
+			uni.$off('scancodedate')
+			uni.$on('scancodedate', function(data) {
+				console.log(data, '-----scancodedate')
+				_this.cbScancodedate(data)
+			})
+		},
 		data() {
 			return {
 				noticeList: [],

pages/home/pages/manage/manage.vue

@@ -9,12 +9,12 @@
         <view class="data-cards">
           <view class="data-card orange" @click="toSaleOrderDetail('year')">
             <view class="data-header">本年度</view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row">
               <text class="data-label">订单数量</text>
               <text class="data-value">{{ marketing.yearOrderCount }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row">
               <text class="data-label">订单金额</text>
               <text class="data-value">{{ marketing.yearOrderAmount }}<text class="data-unit">万元</text></text>
@@ -22,12 +22,12 @@
           </view>
           <view class="data-card orange" @click="toSaleOrderDetail('month')">
             <view class="data-header">本月</view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row">
               <text class="data-label">订单数量</text>
               <text class="data-value">{{ marketing.monthOrderCount }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row">
               <text class="data-label">订单金额</text>
               <text class="data-value">{{ marketing.monthOrderAmount }}<text class="data-unit">万元</text></text>
@@ -35,6 +35,7 @@
           </view>
         </view>
         <view class="chart-wrapper">
+          <view class="chart-title">订单走势</view>
           <view class="chart-box">
              <view id="marketingChart" class="chart"></view>
           </view>
@@ -55,7 +56,7 @@
               <text class="data-label">生产工单</text>
               <text class="data-value">{{ production.yearWorkOrder }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row">
               <text class="data-label">生产总量</text>
               <text class="data-value">{{ production.yearTotal }}<text class="data-unit">件</text></text>
@@ -67,7 +68,7 @@
               <text class="data-label">生产工单</text>
               <text class="data-value">{{ production.monthWorkOrder }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row">
               <text class="data-label">生产总量</text>
               <text class="data-value">{{ production.monthTotal }}<text class="data-unit">件</text></text>
@@ -75,6 +76,7 @@
           </view>
         </view>
         <view class="chart-wrapper">
+          <view class="chart-title">生产走势</view>
           <view class="chart-box">
             <!-- <canvas canvas-id="productionChart" type="2d" class="chart"></canvas> -->
              <view id="productionChart" class="chart"></view>
@@ -92,12 +94,12 @@
         <view class="data-cards">
           <view class="data-card orange" @click="toPurchaseOrderDetail('year')">
             <view class="data-header">本年度</view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row">
               <text class="data-label">采购数量</text>
               <text class="data-value">{{ purchase.yearCount }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row">
               <text class="data-label">采购金额</text>
               <text class="data-value">{{ purchase.yearAmount }}<text class="data-unit">万元</text></text>
@@ -105,12 +107,12 @@
           </view>
           <view class="data-card orange" @click="toPurchaseOrderDetail('month')">
             <view class="data-header">本月</view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row">
               <text class="data-label">采购数量</text>
               <text class="data-value">{{ purchase.monthCount }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row">
               <text class="data-label">采购金额</text>
               <text class="data-value">{{ purchase.monthAmount }}<text class="data-unit">万元</text></text>
@@ -136,22 +138,22 @@
         <view class="data-cards">
           <view class="data-card orange">
             <view class="data-header">年度出入库</view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row small">
               <text class="data-label">采购入库</text>
               <text class="data-value">{{ warehouse.yearPurchaseIn }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row small">
               <text class="data-label">领料出库</text>
               <text class="data-value">{{ warehouse.yearMaterialOut }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row small">
               <text class="data-label">生产入库</text>
               <text class="data-value">{{ warehouse.yearProduceIn }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row small">
               <text class="data-label">发货出库</text>
               <text class="data-value">{{ warehouse.yearDeliveryOut }}</text>
@@ -159,22 +161,22 @@
           </view>
           <view class="data-card orange">
             <view class="data-header">本月出入库</view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row small">
               <text class="data-label">采购入库</text>
               <text class="data-value">{{ warehouse.monthPurchaseIn }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row small">
               <text class="data-label">领料出库</text>
               <text class="data-value">{{ warehouse.monthMaterialOut }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row small">
               <text class="data-label">生产入库</text>
               <text class="data-value">{{ warehouse.monthProduceIn }}</text>
             </view>
-            <view class="data-divider"></view>
+            <!-- <view class="data-divider"></view> -->
             <view class="data-row small">
               <text class="data-label">发货出库</text>
               <text class="data-value">{{ warehouse.monthDeliveryOut }}</text>
@@ -287,20 +289,21 @@ export default {
       }
     }
   },
-  onReady() {
-    console.log('onReady11111111111111111111111111111111111111')
+  // NOTE: manage 作为 homeNew 的子组件使用时，UniApp 页面级钩子(onReady/onLoad/onUnload)不会触发。
+  // initCharts() 由父组件 homeNew 在 mounted 中通过 $refs.manageRef?.initCharts() 调用。
+  mounted() {
+    // 作为备用：如果父组件没有调用 initCharts，这里兜底执行
     this.$nextTick(() => {
-      console.log('onReady - initCharts')
-      this.initCharts()
+      if (Object.keys(chartInstances).length === 0) {
+        this.initCharts()
+      }
     })
   },
-  onLoad() {
-    console.log('onLoad22222222222222222222222222222222222222')
-  },
-  onUnload() {
+  beforeDestroy() {
     Object.keys(chartInstances).forEach(key => {
       chartInstances[key]?.dispose()
     })
+    chartInstances = {}
   },
   methods: {
     toSaleOrderDetail(type) {
@@ -342,14 +345,9 @@ export default {
             bottom: 30
           },
           tooltip: {
-            show: true,
             trigger: 'axis',
-            axisPointer: {
-              type: 'cross',
-              label: {
-                backgroundColor: '#6a7985'
-              }
-            },
+            // 注意: triggerOn: 'click' 会劫持 click 事件，导致自定义 chart.on('click') 失效。
+            // 使用默认的 'mousemove'，移动端自动降级为 touch。
             backgroundColor: 'rgba(50, 50, 50, 0.9)',
             borderColor: '#333',
             textStyle: {
@@ -361,7 +359,7 @@ export default {
             type: 'category',
             data: data.categories,
             axisLine: { lineStyle: { color: '#e5e5e5' } },
-            axisLabel: { fontSize: 10, color: '#666' },
+            axisLabel: { fontSize: 12, color: '#666' },
             axisTick: { show: false }
           },
           yAxis: {
@@ -373,12 +371,13 @@ export default {
             splitLine: {
               lineStyle: { color: '#e5e5e5', type: 'dashed' }
             },
-            axisLabel: { fontSize: 10, color: '#666' }
+            axisLabel: { fontSize: 12, color: '#666' }
           },
           series: data.series.map((item, index) => {
+            console.log(item, index)
             const chartType = item.type || 'line'
-            const barColors = ['#34c759', '#8bc34a', '#00bcd4', '#9c27b0']
-            const lineColors = ['#ff9500', '#faad14', '#e91e63', '#9c27b0']
+            const barColors = ['#f5a529', '#0da323', '#f5a529', '#0da323']
+            const lineColors = ['#f5a529', '#0da323', '#f5a529', '#0da323']
 
             if (chartType === 'bar') {
               return {
@@ -412,6 +411,12 @@ export default {
 
         chart.setOption(option)
         chartInstances[domId] = chart
+
+        // 先解绑再绑定，防止重复初始化时多次绑定
+        chart.off('click')
+        chart.on('click', (params) => {
+          console.log('chart click:', domId, params.name, params)
+        })
       })
     }
   }
@@ -458,7 +463,7 @@ export default {
   .data-card {
     border-radius: 12rpx;
     overflow: hidden;
-    background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
+    background: linear-gradient(135deg, #edb15b 0%, #ff6b00 100%);
     box-shadow: 0 4rpx 16rpx rgba(255, 149, 0, 0.25);
     padding: 20rpx;
 
@@ -478,10 +483,10 @@ export default {
       display: flex;
       align-items: baseline;
       justify-content: space-between;
-      padding: 8rpx 0;
+      // padding: 8rpx 0;
 
       &.small {
-        padding: 6rpx 0;
+        // padding: 6rpx 0;
       }
 
       .data-label {
@@ -506,7 +511,7 @@ export default {
 
 /* 图表 */
 .chart-wrapper {
-  padding: 16rpx 20rpx 8rpx;
+  padding: 0 20rpx 8rpx;
 
   .chart-title {
     font-size: 26rpx;