From 1d51fad6282ef591158ad82c862d02822691a76a Mon Sep 17 00:00:00 2001 From: qiuyt Date: Wed, 19 Mar 2025 11:55:01 +0800 Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E5=8D=95=E6=8D=AE=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/collect/CollectOrderStatsNew.vue | 499 ++++++++++----------- 1 file changed, 237 insertions(+), 262 deletions(-) diff --git a/src/views/collect/CollectOrderStatsNew.vue b/src/views/collect/CollectOrderStatsNew.vue index f2b96801..020d5496 100644 --- a/src/views/collect/CollectOrderStatsNew.vue +++ b/src/views/collect/CollectOrderStatsNew.vue @@ -11,7 +11,7 @@ size="mini" label-width="100px" > - + - - - - 重置 - - 查询 - - + + + + + 重置 + + 查询 + + + + + - @@ -69,7 +72,7 @@
- 已上传医保 + 已上传单据 {{ stats.alreadyUploadingCount }} @@ -91,7 +94,7 @@
- 未上传医保 + 未上传单据 @@ -113,7 +116,7 @@
- 上传失败医保 + 上传失败单据 {{ stats.uploadingFailCount }} @@ -122,7 +125,7 @@
-
+
@@ -143,35 +146,29 @@ - - - -
- - -
+ + +
+ +
- + - -
+ + + + - -
+ + + + - - + +
@@ -248,11 +245,19 @@ export default { buyerCentage: 0, salesCentage: 0, codeCount: 0, - buyerScanCount: 0, - salesScanCount: 0, + fifoSplitOneCount:0, fifoSplitTwoCount:0, + buyerScanCount: 0, + salesScanCount: 0, + buyerScanCountReturn: 0, + salesScanCountReturn: 0, + + buyerScanSumCount: 0, + salesScanSumCount: 0, + buyerScanSumCountReturn: 0, + salesScanSumCountReturn: 0, }, // 待办================================================== @@ -371,11 +376,18 @@ export default { buyerCentage:res.data.buyerCentage, salesCentage:res.data.salesCentage, codeCount:res.data.codeCount, - buyerScanCount: res.data.buyerScanCount, - salesScanCount: res.data.salesScanCount, fifoSplitOneCount:res.data.fifoSplitOneCount, fifoSplitTwoCount:res.data.fifoSplitTwoCount, + buyerScanCount: res.data.buyerScanCount, + salesScanCount: res.data.salesScanCount, + buyerScanCountReturn: res.data.buyerScanCountReturn, + salesScanCountReturn: res.data.salesScanCountReturn, + + buyerScanSumCount: res.data.buyerScanSumCount, + salesScanSumCount: res.data.salesScanSumCount, + buyerScanSumCountReturn: res.data.buyerScanSumCountReturn, + salesScanSumCountReturn: res.data.salesScanSumCountReturn, } this.initStatsChart1(); @@ -402,10 +414,19 @@ export default { }, initStatsChart1(){ const dataArr = [ - this.stats.buyerScanCount,this.stats.salesScanCount + this.stats.buyerScanCount,this.stats.buyerScanCountReturn, + this.stats.salesScanCount,this.stats.salesScanCountReturn ]; console.log('dataArr',dataArr); this.statsChart1 = { + title: { + text: '单据已上传码数', + left: 'center', + textStyle: { + fontSize: 24, // 字体大小设置为 24，可按需调整 + fontWeight: 'bold' // 字体设置为粗体 + } + }, color: ['#01c6fd'], grid: { left: '5%', @@ -421,7 +442,7 @@ export default { xAxis: [ { type: 'category', - data: ['医保采购上传码数', '医保销售上传码数'], + data: ['采购入库', '采购退货','销售出库','销售退货'], axisLine: { lineStyle: { color: '#01c6fd' @@ -480,47 +501,43 @@ export default { ] }; }, - initStatsChart2(){ - let colors = ["#d30101","#ffca29", "#01c6fd"]; - let piedata = { - name: "医保上传率", - type: "pie", - radius: ["40%", "65%", "65%"], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: 4, - borderColor: "rgba(0,0,0,0)", - borderWidth: 2, + initStatsChart2() { + // 定义颜色数组 + let colors = ["#d30101", "#ffca29", "#01c6fd"]; + + // 计算各项数据的值 + let notUploadedCount = this.stats.codeCount - (this.stats.salesScanCount + this.stats.buyerScanCount); + let buyerScanCount = this.stats.buyerScanCount; + let salesScanCount = this.stats.salesScanCount; + + // 定义进度条所需的数据 + let barData = [ + { + value: notUploadedCount, + name: "医保未上传码数", + itemStyle: { + color: colors[0] + } }, + { + value: buyerScanCount, + name: "医保采购上传码数", + itemStyle: { + color: colors[1] + } + }, + { + value: salesScanCount, + name: "医保销售上传码数", + itemStyle: { + color: colors[2] + } + } + ]; - color: colors, - data: [ - { - value: this.stats.codeCount -(this.stats.salesScanCount+this.stats.buyerScanCount) , - name: "医保未上传码数", - label: { - shadowColor: colors[0], - }, - }, - { - value: this.stats.buyerScanCount, - name: "医保采购上传码数", - label: { - shadowColor: colors[1], - }, - }, - { - value: this.stats.salesScanCount, - name: "医保销售上传码数", - label: { - shadowColor: colors[2], - }, - }, - ], - }; + // 配置 ECharts 图表为进度条样式 this.statsChart2 = { title: { - // zlevel: 0, text: '医保上传率', top: "center", left: "center", @@ -530,220 +547,176 @@ export default { color: "#000000", fontSize: 24, fontWeight: "bold", - lineHeight: 20, + lineHeight: 20 }, name: { color: "#000000", - lineHeight: 20, - }, - }, - }, + lineHeight: 20 + } + } + } }, tooltip: { trigger: "item", backgroundColor: "rgba(0,0,0,.6)", borderColor: "rgba(147, 235, 248, .8)", textStyle: { - color: "#000000", - }, + color: "#fff" + } }, legend: { show: false, top: "5%", - left: "center", + left: "center" + }, + xAxis: { + show: false + }, + yAxis: { + type: 'category', + data: barData.map(item => item.name), + axisLabel: { + color: '#000000', + fontSize: 12 + }, + axisLine: { + show: false + }, + axisTick: { + show: false + } }, series: [ - //展示圆点 { - ...piedata, - tooltip: {show: true}, + name: '医保上传情况', + type: 'bar', + data: barData, label: { - formatter: " {b|{b}} \n {c|{c}个}", - // position: "outside", - rich: { - b: { - color: "#000000", - fontSize: 12, - lineHeight: 26, - }, - c: { - color: "#2b91c2", - fontSize: 14, - }, - per: { - color: "#2b91c2", - fontSize: 14, - }, - }, - }, - labelLine: { - length: 10, // 第一段线 长度 - length2: 18, // 第二段线 长度 show: true, - + position: 'right', + formatter: '{c}个', + color: '#2b91c2', + fontSize: 14 }, - emphasis: { - show: true, - }, - }, - { - ...piedata, - tooltip: {show: true}, - itemStyle: {}, - label: { - backgroundColor: "inherit", //圆点颜色，auto：映射的系列色 - height: 0, - width: 0, - lineHeight: 0, - borderRadius: 2.5, - shadowBlur: 8, - shadowColor: "auto", - padding: [2.5, -2.5, 2.5, -2.5], - normal: { - show: true, - position: 'inner', - formatter: "{d}%", - color: "#fff", - }, - }, - labelLine: { - length: 20, // 第一段线 长度 - length2: 36, // 第二段线 长度 - show: false, - }, - }, - ], + barWidth: 20 + } + ] }; }, initStatsChart3(){ - let colors = ["#d30101", "#01c6fd"]; - let piedata = { - name: "赋码方式", - type: "pie", - radius: ["42%", "65%", "65%"], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: 4, - borderColor: "rgba(0,0,0,0)", - borderWidth: 2, - }, - color: colors, - data: [ - { - value: this.stats.fifoSplitOneCount , - name: "拆零赋码数", - label: { - shadowColor: colors[0], - }, - }, - { - value: this.stats.fifoSplitTwoCount, - name: "整取赋码数", - label: { - shadowColor: colors[1], - }, - }, +// 模拟数据，可根据实际情况修改 + var data = [ + { name: '销售退货', uploaded: this.stats.salesScanCountReturn, total: this.stats.salesScanSumCountReturn }, + { name: '销售出库', uploaded: this.stats.salesScanSumCount, total: this.stats.salesScanSumCount }, + { name: '采购退货', uploaded: this.stats.buyerScanSumCountReturn, total: this.stats.buyerScanSumCountReturn }, + { name: '采购入库', uploaded: this.stats.buyerScanSumCount, total: this.stats.buyerScanSumCount }, + ]; - ], - }; - this.statsChart3 = { +// 处理 y 轴数据 + var yAxisData = []; + data.forEach(item => { + yAxisData.push(item.name + ' - 未上传'); + yAxisData.push(item.name + ' - 已上传'); + }); + +// 处理系列数据并归一化 + var seriesData = []; + data.forEach(item => { + const total = item.total; + const uploaded = item.uploaded; + const notUploaded = total - uploaded; + if (total === 0) { + seriesData.push(0); + seriesData.push(0); + } else { + const uploadedPercentage = (uploaded / total) * 100; + const notUploadedPercentage = (notUploaded / total) * 100; + seriesData.push(notUploadedPercentage); + seriesData.push(uploadedPercentage); + } + }); +// 配置项 + this.statsChart3 = { title: { - // zlevel: 0, - text: '赋码类型比率', - top: "center", - left: "center", + text: '单据上传率', + left: 'center', textStyle: { - rich: { - value: { - color: "#000000", - fontSize: 24, - fontWeight: "bold", - lineHeight: 20, - }, - name: { - color: "#000000", - lineHeight: 20, - }, - }, - }, + fontSize: 24, // 字体大小设置为 24，可按需调整 + fontWeight: 'bold' // 字体设置为粗体 + } }, - tooltip: { - trigger: "item", - backgroundColor: "rgba(0,0,0,.6)", - borderColor: "rgba(147, 235, 248, .8)", - textStyle: { - color: "#000000", - }, + grid: { + left: '15%', + top: '5%', // 减小顶部空白区域，可根据需求调整 + bottom: '5%', // 减小底部空白区域，可根据需求调整 + right: '10%' // 可根据需要调整右侧空白区域 }, - legend: { + xAxis: { show: false, - top: "5%", - left: "center", + min: 0, + max: 100 // 固定 x 轴范围 + }, + yAxis: { + type: 'category', + data: yAxisData, + axisTick: { show: false }, + axisLine: { show: false }, + axisLabel: { fontSize: 14 }, + boundaryGap: [0, 0.1] }, series: [ - //展示圆点 { - ...piedata, - tooltip: {show: true}, - label: { - formatter: " {b|{b}} \n {c|{c}个}", - // position: "outside", - rich: { - b: { - color: "#000000", - fontSize: 12, - lineHeight: 26, - }, - c: { - color: "#2b91c2", - fontSize: 14, - }, - per: { - color: "#2b91c2", - fontSize: 14, - }, - }, - }, - labelLine: { - length: 20, // 第一段线 长度 - length2: 36, // 第二段线 长度 - show: true, - - }, - emphasis: { - show: true, + type: 'bar', + data: seriesData, + barWidth: 20, + barCategoryGap: '-90%', + itemStyle: { + color: function (params) { + return params.dataIndex % 2 === 0? '#01c6fd' : '#00b611'; + } }, - }, - { - ...piedata, - tooltip: {show: true}, - itemStyle: {}, label: { - backgroundColor: "inherit", //圆点颜色，auto：映射的系列色 - height: 0, - width: 0, - lineHeight: 0, - borderRadius: 2.5, - shadowBlur: 8, - shadowColor: "auto", - padding: [2.5, -2.5, 2.5, -2.5], - normal: { - show: true, - position: 'inner', - formatter: "{d}%", - color: "#fff", - }, - }, - labelLine: { - length: 20, // 第一段线 长度 - length2: 36, // 第二段线 长度 - show: false, + show: true, + position: 'right', + formatter: function (params) { + var index = Math.floor(params.dataIndex / 2); + // 处理 total 为 0 的情况，避免出现 NaN + const total = data[index].total; + const value = params.value; + const percentage = total === 0? '0.00' : value.toFixed(2); + return `${percentage}%`; + } }, - }, - ], + z: 10 + } + ] }; }, + formatDate(date) { + + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; + }, + initDate(){ + // 获取当前月份的第一天和最后一天 + const now = new Date(); + const year = now.getFullYear(); + const month = now.getMonth() + 1; + + // 构建本月第一天的日期 + const firstDay = new Date(year, month - 1, 1); + const formattedFirstDay = this.formatDate(firstDay); + + // 构建本月最后一天的日期 + const lastDay = new Date(year, month, 0); + const formattedLastDay = this.formatDate(lastDay); + + // 将格式化后的日期赋值给 actDateRange + this.actDateRange = [formattedFirstDay, formattedLastDay]; + } }, mounted() { @@ -756,6 +729,8 @@ export default { this.getList() }) + console.log('this.actDateRange',this.actDateRange) + this.initDate() } }