feat: 首页图表

api/home/index.js

@@ -121,4 +121,67 @@ export async function getSaleOrderTrendSummary(params) {
 		return data.data
 	}
 	return Promise.reject(new Error(data.message))
-}
+}   
+
+// 仓储趋势汇总统计
+export async function getPadStockStreamStatistics(params) {
+	const data = await get(Vue.prototype.apiUrl + `/wms/outInDetailPda/pdaStockStreamStatistics`, params)
+	if (data.code == 0) {
+		return data.data
+	}
+	return Promise.reject(new Error(data.message))
+}
+
+// 仓储趋势汇总统计
+export async function getPdaFindMaterialTrend(params) {
+	const data = await get(Vue.prototype.apiUrl + `/wms/outInDetailPda/pdaFindMaterialTrend`, params)
+	if (data.code == 0) {
+		return data.data
+	}
+	return Promise.reject(new Error(data.message))
+}
+
+// 获取月统计产量
+export async function getMonthOutput(body) {
+	const data = await postJ(Vue.prototype.apiUrl + `/mes/index/monthOutput`, body)
+	if (data.code == 0) {
+		return data.data
+	}
+	return Promise.reject(new Error(data.message))
+}
+
+// 获取年度统计产量
+export async function getYearOutput(body) {
+	const data = await postJ(Vue.prototype.apiUrl + `/mes/index/yearOutput`, body)
+	if (data.code == 0) {
+		return data.data
+	}
+	return Promise.reject(new Error(data.message))
+}
+
+// 获取年度统计产量
+export async function getTendencyChart(body) {
+	const data = await postJ(Vue.prototype.apiUrl + `/mes/index/tendencyChart`, body)
+	if (data.code == 0) {
+		return data.data
+	}
+	return Promise.reject(new Error(data.message))
+}
+
+// 采购订单汇总统计
+export async function getPurchaseOrderSummary(params) {
+	const data = await get(Vue.prototype.apiUrl + `/eom/purchaseorder/v1/summary`, params)
+	if (data.code == 0) {
+		return data.data
+	}
+	return Promise.reject(new Error(data.message))
+}
+
+// 采购订单趋势汇总统计
+export async function getPurchaseOrderTrendSummary(params) {
+	const data = await get(Vue.prototype.apiUrl + `/eom/purchaseorder/v1/trendSummary`, params)
+	if (data.code == 0) {
+		return data.data
+	}
+	return Promise.reject(new Error(data.message))
+}  

manifest.json

@@ -11,8 +11,8 @@
                 "/api" : {
                     // "target" : "http://192.168.1.110:18086/",
                     // "target" : "http://123.249.79.125/api/",
+                    // "target" : "http://192.168.1.125:18086/",
                     "target" : "http://192.168.1.251:18086/",
-                    // "target" : "http://192.168.1.251:18086/",
                     // "target" : "http://110.41.182.105/api/",
                     // "target": "http://116.63.185.248:80/api",
                     // "target" : "http://192.168.1.251:18186/",

pages/home/home.vue

@@ -21,7 +21,7 @@
 			<mould v-if="roleId == 155" ref="mouldRef"></mould>
 			<!-- 备品备件 -->
 			<sparePart v-if="roleId == 150" ref="sparePartRef"></sparePart>
-
+			<!--  -->
 			<view v-if="$isAuthorities('pda:home:manage')">
 				<homeNew></homeNew>
 			</view>

pages/home/pages/manage/manage.vue

@@ -37,7 +37,7 @@
         <view class="chart-wrapper">
           <view class="chart-title">订单走势</view>
           <view class="chart-box">
-             <view id="marketingChart" class="chart"></view>
+             <l-echart ref="marketingChart" class="chart"></l-echart>
           </view>
         </view>
       </view>
@@ -78,8 +78,7 @@
         <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>
+             <l-echart ref="productionChart" class="chart"></l-echart>
           </view>
         </view>
       </view>
@@ -122,8 +121,7 @@
         <view class="chart-wrapper">
           <view class="chart-title">采购走势</view>
           <view class="chart-box">
-            <!-- <canvas canvas-id="purchaseChart" type="2d" class="chart"></canvas> -->
-             <view id="purchaseChart" class="chart"></view>
+             <l-echart ref="purchaseChart" class="chart"></l-echart>
           </view>
         </view>
       </view>
@@ -186,15 +184,13 @@
         <view class="chart-wrapper">
           <view class="chart-title">物料走势</view>
           <view class="chart-box">
-            <!-- <canvas canvas-id="materialChart" type="2d" class="chart"></canvas> -->
-             <view id="materialChart" class="chart"></view>
+             <l-echart ref="materialChart" class="chart"></l-echart>
           </view>
         </view>
         <view class="chart-wrapper">
           <view class="chart-title">成品走势</view>
           <view class="chart-box">
-            <!-- <canvas canvas-id="finishedChart" type="2d" class="chart"></canvas> -->
-             <view id="finishedChart" class="chart"></view>
+             <l-echart ref="finishedChart" class="chart"></l-echart>
           </view>
         </view>
       </view>
@@ -205,9 +201,8 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import { getSaleOrderSummary, getSaleOrderTrendSummary } from '@/api/home/index'
-let chartInstances = {}
+import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
+import { getSaleOrderSummary, getSaleOrderTrendSummary, getPadStockStreamStatistics, getPdaFindMaterialTrend, getMonthOutput, getYearOutput, getTendencyChart, getPurchaseOrderSummary, getPurchaseOrderTrendSummary } from '@/api/home/index'
 
 export default {
   data() {
@@ -219,26 +214,26 @@ export default {
         monthOrderAmount: 0
       },
       production: {
-        yearWorkOrder: 23,
-        yearTotal: 98,
-        monthWorkOrder: 23,
-        monthTotal: 98
+        yearWorkOrder: 0,
+        yearTotal: 0,
+        monthWorkOrder: 0,
+        monthTotal: 0
       },
       purchase: {
-        yearCount: 23,
-        yearAmount: 98,
-        monthCount: 23,
-        monthAmount: 98
+        yearCount: 0,
+        yearAmount: 0,
+        monthCount: 0,
+        monthAmount: 0
       },
       warehouse: {
-        yearPurchaseIn: 23,
-        yearMaterialOut: 23,
-        yearProduceIn: 98,
-        yearDeliveryOut: 98,
-        monthPurchaseIn: 23,
-        monthMaterialOut: 23,
-        monthProduceIn: 98,
-        monthDeliveryOut: 98
+        yearPurchaseIn: 0,
+        yearMaterialOut: 0,
+        yearProduceIn: 0,
+        yearDeliveryOut: 0,
+        monthPurchaseIn: 0,
+        monthMaterialOut: 0,
+        monthProduceIn: 0,
+        monthDeliveryOut: 0
       },
       currentYear: '',
       currentMonth: '',
@@ -256,37 +251,37 @@ export default {
         productionChart: {
           categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
           series: [
-            { name: '生产工单', data: [18, 22, 28, 35, 42, 48, 45, 40, 38, 45, 50, 55], type: 'bar' },
-            { name: '去年同期工单', data: [15, 20, 25, 30, 38, 42, 40, 35, 32, 38, 45, 48], type: 'bar' },
-            { name: '生产总量', data: [180, 220, 280, 350, 420, 480, 450, 400, 380, 450, 500, 550], type: 'line' },
-            { name: '去年同期总量', data: [150, 200, 250, 300, 380, 420, 400, 350, 320, 380, 450, 480], type: 'line' }
+            { name: '生产工单', data: [], type: 'bar' },
+            { name: '去年同期工单', data: [], type: 'bar' },
+            { name: '生产总量', data: [], type: 'line' },
+            { name: '去年同期总量', data: [], type: 'line' }
           ]
         },
         purchaseChart: {
           categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
           series: [
-            { name: '采购数量', data: [20, 25, 30, 38, 45, 52, 48, 42, 38, 45, 52, 58], type: 'bar' },
-            { name: '去年同期数量', data: [18, 22, 28, 35, 42, 48, 45, 38, 35, 42, 48, 52], type: 'bar' },
-            { name: '采购金额', data: [10.5, 12.5, 15.0, 19.0, 22.5, 26.0, 24.0, 21.0, 19.0, 22.5, 26.0, 29.0], type: 'line' },
-            { name: '去年同期金额', data: [9.0, 11.0, 14.0, 17.5, 21.0, 24.0, 22.5, 19.0, 17.5, 21.0, 24.0, 26.0], type: 'line' }
+            { name: '采购数量', data: [], type: 'bar' },
+            { name: '去年同期数量', data: [], type: 'bar' },
+            { name: '采购金额', data: [], type: 'line' },
+            { name: '去年同期金额', data: [], type: 'line' }
           ]
         },
         materialChart: {
           categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
           series: [
-            { name: '采购入库', data: [22, 28, 35, 42, 50, 58, 52, 45, 42, 50, 58, 65], type: 'bar' },
-            { name: '去年同期入库', data: [18, 22, 28, 35, 42, 48, 45, 38, 35, 42, 48, 52], type: 'bar' },
-            { name: '领料出库', data: [20, 25, 32, 38, 45, 52, 48, 42, 38, 45, 52, 58], type: 'line' },
-            { name: '去年同期出库', data: [15, 20, 25, 32, 38, 45, 42, 38, 35, 42, 48, 52], type: 'line' }
+            { name: '采购入库', data: [], type: 'bar' },
+            { name: '去年同期入库', data: [], type: 'bar' },
+            { name: '领料出库', data: [], type: 'line' },
+            { name: '去年同期出库', data: [], type: 'line' }
           ]
         },
         finishedChart: {
           categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
           series: [
-            { name: '生产入库', data: [18, 22, 28, 35, 42, 48, 45, 40, 38, 45, 50, 55], type: 'bar' },
-            { name: '去年同期入库', data: [15, 20, 25, 32, 38, 45, 42, 38, 35, 42, 48, 52], type: 'bar' },
-            { name: '发货出库', data: [15, 20, 25, 32, 38, 45, 42, 38, 35, 42, 48, 52], type: 'line' },
-            { name: '去年同期发货', data: [12, 18, 22, 28, 35, 42, 40, 35, 32, 38, 45, 48], type: 'line' }
+            { name: '生产入库', data: [], type: 'bar' },
+            { name: '去年同期入库', data: [], type: 'bar' },
+            { name: '发货出库', data: [], type: 'line' },
+            { name: '去年同期发货', data: [], type: 'line' }
           ]
         }
       }
@@ -298,24 +293,218 @@ export default {
     const now = new Date()
     this.currentYear = now.getFullYear()
     this.currentMonth = String(now.getMonth() + 1).padStart(2, '0')
-
+    this.getMonthOutput()
+    this.getYearOutput()
+    this.getTendencyChart()
+    this.getPadStockStreamStatistics()
+    this.getPdaFindMaterialTrend()
     this.getSaleOrderSummary()
     this.getSaleOrderTrendSummary()
+    this.getPurchaseOrderSummary()
+    this.getPurchaseOrderTrendSummary()
     // 作为备用：如果父组件没有调用 initCharts，这里兜底执行
     this.$nextTick(() => {
-      
-      if (Object.keys(chartInstances).length === 0) {
-        this.initCharts()
-      }
+      this.initCharts()
     })
   },
   beforeDestroy() {
-    Object.keys(chartInstances).forEach(key => {
-      chartInstances[key]?.dispose()
+    const chartIds = ['marketingChart', 'productionChart', 'purchaseChart', 'materialChart', 'finishedChart']
+    chartIds.forEach(id => {
+      if (this.$refs[id]) {
+        this.$refs[id].dispose()
+      }
     })
-    chartInstances = {}
   },
   methods: {
+    async getPurchaseOrderSummary() {
+      let res = await getPurchaseOrderSummary({
+        year: this.currentYear,
+        month: this.currentMonth
+      })
+      console.log('getPurchaseOrderSummary', res)
+      // res: { yearlySummary: { quantity, amount }, monthlySummary: { quantity, amount } }
+      this.purchase.yearCount = res?.yearlySummary?.quantity || 0
+      this.purchase.yearAmount = +(res?.yearlySummary?.amount / 10000).toFixed(2) || 0
+      this.purchase.monthCount = res?.monthlySummary?.quantity || 0
+      this.purchase.monthAmount = +(res?.monthlySummary?.amount / 10000).toFixed(2) || 0
+    },
+    async getPurchaseOrderTrendSummary() {
+      let res = await getPurchaseOrderTrendSummary({
+        year: this.currentYear
+      })
+      console.log('getPurchaseOrderTrendSummary', res)
+      // res: { year, trends: [{ month, quantity, amount, lastQuantity, lastAmount }] }
+
+      const trends = res?.trends || []
+      // 初始化12个月的数据，默认0
+      const quantityArr = new Array(12).fill(0)
+      const lastQuantityArr = new Array(12).fill(0)
+      const amountArr = new Array(12).fill(0)
+      const lastAmountArr = new Array(12).fill(0)
+
+      trends.forEach((item) => {
+        const idx = item.month - 1 // month 为 1-12，转为数组索引 0-11
+        if (idx >= 0 && idx < 12) {
+          quantityArr[idx] = item.quantity || 0
+          lastQuantityArr[idx] = item.lastQuantity || 0
+          amountArr[idx] = +((item.amount || 0) / 10000).toFixed(2)
+          lastAmountArr[idx] = +((item.lastAmount || 0) / 10000).toFixed(2)
+        }
+      })
+
+      // purchaseChart: 采购走势图
+      this.chartData.purchaseChart.series[0].data = quantityArr
+      this.chartData.purchaseChart.series[1].data = lastQuantityArr
+      this.chartData.purchaseChart.series[2].data = amountArr
+      this.chartData.purchaseChart.series[3].data = lastAmountArr
+
+      // 数据更新后刷新图表
+      this.$nextTick(() => {
+        if (this.$refs.purchaseChart) {
+          this.initChart('purchaseChart', this.chartData.purchaseChart)
+        }
+      })
+    },
+    async getMonthOutput() {
+      let res = await getMonthOutput()
+      console.log('getMonthOutput', res)
+      // res: { dateStr, orderCount, formedNum }
+      this.production.monthWorkOrder = res?.orderCount || 0
+      this.production.monthTotal = res?.formedNum || 0
+    },
+    async getYearOutput() {
+      let res = await getYearOutput()
+      console.log('getYearOutput', res)
+      // res: { dateStr, orderCount, formedNum }
+      this.production.yearWorkOrder = res?.orderCount || 0
+      this.production.yearTotal = res?.formedNum || 0
+    },
+    async getTendencyChart() {
+      let res = await getTendencyChart()
+      console.log('getTendencyChart', res)
+      // res: { thisYear: [{ dateStr, orderCount, formedNum }], lastYear: [...] }
+
+      const thisYearArr = Array.isArray(res?.thisYear) ? res.thisYear : []
+      const lastYearArr = Array.isArray(res?.lastYear) ? res.lastYear : []
+
+      // 初始化12个月的数据，默认0
+      const thisOrderArr = new Array(12).fill(0)   // 今年生产工单
+      const lastOrderArr = new Array(12).fill(0)   // 去年生产工单
+      const thisFormedArr = new Array(12).fill(0)  // 今年生产总量
+      const lastFormedArr = new Array(12).fill(0)  // 去年生产总量
+
+      const fillArr = (source, targetOrder, targetFormed) => {
+        source.forEach((item) => {
+          const idx = parseInt(item.dateStr, 10) - 1
+          if (idx >= 0 && idx < 12) {
+            targetOrder[idx] = item.orderCount || 0
+            targetFormed[idx] = item.formedNum || 0
+          }
+        })
+      }
+
+      fillArr(thisYearArr, thisOrderArr, thisFormedArr)
+      fillArr(lastYearArr, lastOrderArr, lastFormedArr)
+
+      // productionChart: 生产走势图
+      this.chartData.productionChart.series[0].data = thisOrderArr
+      this.chartData.productionChart.series[1].data = lastOrderArr
+      this.chartData.productionChart.series[2].data = thisFormedArr
+      this.chartData.productionChart.series[3].data = lastFormedArr
+
+      // 数据更新后刷新图表
+      this.$nextTick(() => {
+        if (this.$refs.productionChart) {
+          this.initChart('productionChart', this.chartData.productionChart)
+        }
+      })
+    },
+    async getPdaFindMaterialTrend() {
+      let res = await getPdaFindMaterialTrend()
+      console.log('getPdaFindMaterialTrend', res)
+
+      const data = Array.isArray(res) ? res : []
+      // 初始化12个月的数据，默认0
+      const cgArr = new Array(12).fill(0)      // 采购入库(今年)
+      const lastCgArr = new Array(12).fill(0)   // 采购入库(去年)
+      const llArr = new Array(12).fill(0)       // 领料出库(今年)
+      const lastLlArr = new Array(12).fill(0)   // 领料出库(去年)
+      const scArr = new Array(12).fill(0)       // 生产入库(今年)
+      const lastScArr = new Array(12).fill(0)   // 生产入库(去年)
+      const fhArr = new Array(12).fill(0)       // 发货出库(今年)
+      const lastFhArr = new Array(12).fill(0)   // 发货出库(去年)
+
+      data.forEach((item) => {
+        const idx = item.monthNum - 1 // monthNum 为 1-12，转为数组索引 0-11
+        if (idx >= 0 && idx < 12) {
+          cgArr[idx] = item.currentYearInboundCG || 0
+          lastCgArr[idx] = item.lastYearInboundCG || 0
+          llArr[idx] = item.currentYearOutboundLL || 0
+          lastLlArr[idx] = item.lastYearOutboundLL || 0
+          scArr[idx] = item.currentYearInboundSC || 0
+          lastScArr[idx] = item.lastYearInboundSC || 0
+          fhArr[idx] = item.currentYearOutboundFH || 0
+          lastFhArr[idx] = item.lastYearOutboundFH || 0
+        }
+      })
+
+      // 物料走势图：采购入库 + 领料出库
+      this.chartData.materialChart.series[0].data = cgArr
+      this.chartData.materialChart.series[1].data = lastCgArr
+      this.chartData.materialChart.series[2].data = llArr
+      this.chartData.materialChart.series[3].data = lastLlArr
+
+      // 成品走势图：生产入库 + 发货出库
+      this.chartData.finishedChart.series[0].data = scArr
+      this.chartData.finishedChart.series[1].data = lastScArr
+      this.chartData.finishedChart.series[2].data = fhArr
+      this.chartData.finishedChart.series[3].data = lastFhArr
+
+      // 数据更新后刷新图表
+      this.$nextTick(() => {
+        if (this.$refs.materialChart) {
+          this.initChart('materialChart', this.chartData.materialChart)
+        }
+        if (this.$refs.finishedChart) {
+          this.initChart('finishedChart', this.chartData.finishedChart)
+        }
+      })
+    },
+    async getPadStockStreamStatistics() {
+      // bizType 1=生产 2=采购 3=销售出库  11=领用
+      // type 1=入库 2=出库
+      let res = await getPadStockStreamStatistics()
+      console.log('getPadStockStreamStatistics', res)
+
+      // 重置默认值
+      const wh = { yearPurchaseIn: 0, monthPurchaseIn: 0, yearMaterialOut: 0, monthMaterialOut: 0, yearProduceIn: 0, monthProduceIn: 0, yearDeliveryOut: 0, monthDeliveryOut: 0 }
+
+      const data = Array.isArray(res) ? res : []
+      data.forEach(item => {
+        const monthQty = item.currentMonthQuantity || 0
+        const yearQty = item.currentYearQuantity || 0
+        switch (item.bizType) {
+          case 1: // 生产入库
+            wh.yearProduceIn = yearQty
+            wh.monthProduceIn = monthQty
+            break
+          case 2: // 采购入库
+            wh.yearPurchaseIn = yearQty
+            wh.monthPurchaseIn = monthQty
+            break
+          case 3: // 销售出库 → 发货出库
+            wh.yearDeliveryOut = yearQty
+            wh.monthDeliveryOut = monthQty
+            break
+          case 11: // 领用 → 领料出库
+            wh.yearMaterialOut = yearQty
+            wh.monthMaterialOut = monthQty
+            break
+        }
+      })
+
+      this.warehouse = wh
+    },
     async getSaleOrderTrendSummary() {
       let res = await getSaleOrderTrendSummary({
         year: this.currentYear
@@ -346,7 +535,7 @@ export default {
 
       // 数据更新后刷新图表
       this.$nextTick(() => {
-        if (chartInstances.marketingChart) {
+        if (this.$refs.marketingChart) {
           this.initChart('marketingChart', this.chartData.marketingChart)
         }
       })
@@ -382,48 +571,26 @@ export default {
     },
     initChart(domId, data) {
       this.$nextTick(() => {
-        setTimeout(() => {
-          const query = uni.createSelectorQuery().in(this)
-          query.select(`#${domId}`).boundingClientRect()
-          query.exec(res => {
-            if (!res[0]) {
-              console.error(`Element #${domId} not found`)
-              return
-            }
-            const width = res[0].width || 355
-            const height = res[0].height || 200
-            console.log('init chart:', domId, width, height)
-
-            const dom = document.getElementById(domId)
-            if (!dom) return
-
-            // 销毁旧实例，避免重复初始化
-            if (chartInstances[domId]) {
-              chartInstances[domId].dispose()
-              chartInstances[domId] = null
+        const ref = this.$refs[domId]
+        if (!ref) return
+
+        const option = {
+          grid: {
+            left: '14%',
+            right: '6%',
+            top: '12%',
+            bottom: '10%'
+          },
+          tooltip: {
+            trigger: 'axis',
+            confine: true,
+            backgroundColor: 'rgba(50, 50, 50, 0.9)',
+            borderColor: '#333',
+            textStyle: {
+              color: '#fff',
+              fontSize: 12
             }
-
-            const chart = echarts.init(dom)
-            chart.resize({ width, height })
-
-            const option = {
-              grid: {
-                left: '14%',
-                right: '6%',
-                top: '12%',
-                bottom: '10%'
-              },
-              tooltip: {
-                trigger: 'axis',
-                confine: true,
-                extraCssText: 'z-index: 99999 !important; pointer-events: auto;',
-                backgroundColor: 'rgba(50, 50, 50, 0.9)',
-                borderColor: '#333',
-                textStyle: {
-                  color: '#fff',
-                  fontSize: 12
-                }
-              },
+          },
           xAxis: {
             type: 'category',
             data: data.categories,
@@ -443,7 +610,6 @@ export default {
             axisLabel: { fontSize: 12, color: '#666' }
           },
           series: data.series.map((item, index) => {
-            console.log(item, index)
             const chartType = item.type || 'line'
             const barColors = ['#f5a529', '#0da323', '#f5a529', '#0da323']
             const lineColors = ['#f5a529', '#0da323', '#f5a529', '#0da323']
@@ -478,26 +644,9 @@ export default {
           })
         }
 
-            chart.setOption(option)
-            chartInstances[domId] = chart
-
-            // H5 修复：setOption 后 canvas 才创建，延迟强制设置交互属性
-            setTimeout(() => {
-              const canvas = dom.querySelector('canvas')
-              if (canvas) {
-                canvas.style.pointerEvents = 'auto'
-                canvas.style.touchAction = 'auto'
-              }
-            }, 100)
-
-            // 先解绑再绑定，防止重复初始化时多次绑定
-            chart.off('click')
-            // zrender 层级兜底
-            chart.getZr().on('click', (params) => {
-              console.log('zr click:', domId, params)
-            })
-          })
-        }, 100)
+        ref.init(echarts, chart => {
+          chart.setOption(option)
+        })
       })
     }
   }