From 60ee938092d03b75d99821bb86ba058230ffb4f7 Mon Sep 17 00:00:00 2001 From: ljx <864490211@qq.com> Date: Wed, 28 May 2025 10:53:04 +0800 Subject: [PATCH] =?UTF-8?q?q=3D6=20=E6=81=92=E9=80=9A=E8=BE=BE=E6=95=B0?= =?UTF-8?q?=E5=AD=97=E5=8C=96=E6=99=BA=E8=83=BD=E5=B7=A5=E5=8E=82=E8=B4=A8?= =?UTF-8?q?=E9=87=8F=E7=9C=8B=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 2 + src/components/baozuo-demo2/CenterCmp.vue | 58 ++++++++++++++-------- src/components/baozuo-demo2/LeftChart1.vue | 3 +- src/components/baozuo-demo2/LeftChart2.vue | 3 +- src/components/baozuo-demo2/index.vue | 4 +- src/components/baozuo-demo2/pieChart.vue | 35 +++++++++++-- 6 files changed, 76 insertions(+), 29 deletions(-) diff --git a/src/App.vue b/src/App.vue index 59eda61..9591c06 100644 --- a/src/App.vue +++ b/src/App.vue @@ -36,6 +36,8 @@ export default { this.currentComponent = 'datav2'; } else if (this.dataType == '5') { this.currentComponent = 'datav3'; + } else if (this.dataType == '6'){ + this.currentComponent = 'datav2'; } else { this.currentComponent = 'datav'; } diff --git a/src/components/baozuo-demo2/CenterCmp.vue b/src/components/baozuo-demo2/CenterCmp.vue index 4948cdf..ef6a0ac 100644 --- a/src/components/baozuo-demo2/CenterCmp.vue +++ b/src/components/baozuo-demo2/CenterCmp.vue @@ -30,28 +30,28 @@
当日检验量
-
{{ middleTopData.inspection }}
+
{{ dataType == '6'?middleTopData2.inspection:middleTopData.inspection }}
-
机芯直通率
-
机芯检验量：250
+
{{dataType=='6'?'进水直通率': '机芯直通率'}}
+
{{dataType=='6'?'进水检验量': '机芯检验量'}}：250
-
盖板直通率
-
盖板检验量：580
+
{{dataType=='6'?'排水直通率': '盖板直通率'}}
+
{{dataType=='6'?'排水检验量': '盖板检验量'}}：580
-
整机直通率
-
整机检测量：420
+
{{dataType=='6'?'按钮直通率': '整机直通率'}}
+
{{dataType=='6'?'按钮检测量': '整机检测量'}}：420
@@ -99,7 +99,7 @@ export default { { icon: require(`@/img/icons/12.png`), name: '派工未完成数', value: '2500' }, { icon: require(`@/img/icons/12.png`), name: '派工完成率', value: '92.6%' } ]; - const originalLeftData2 = [ + const originalLeftData2 = [ { icon: require(`@/img/icons/12.png`), name: '派工数量', value: testRes.data.yx_v_scgdgk[0]["派工数量"] }, { icon: require(`@/img/icons/12.png`), name: '未完工数量', value: testRes.data.yx_v_scgdgk[0]["未完成数量"] }, { icon: require(`@/img/icons/12.png`), name: '工单完成率', value: (testRes.data.yx_v_scgdgk[0]["未完成数量"]/testRes.data.yx_v_scgdgk[0]["派工数量"]).toFixed(2)*100+'%' } @@ -160,6 +160,12 @@ export default { coverPassRate: 88, wholePassRate: 95 }, + middleTopData2: { + inspection: 876, + corePassRate: 97, + coverPassRate: 99, + wholePassRate: 95 + }, oiloption:{ grid:{ top:'5%',left:'0%',right:'5%',bottom:'5%' @@ -202,14 +208,23 @@ export default { { name: 'W3A', value: 98 }, ], rightChartData: [ - { name: '注塑件', value: 98 }, - { name: '五金件', value: 99 }, - { name: '橡硅胶件', value: 100 }, - { name: '包材件', value: 99 }, - { name: '电子件', value: 92 }, - { name: '组件', value: 92 }, - { name: '陶瓷', value: 94 } - ], + { name: '注塑件', value: 98 }, + { name: '五金件', value: 99 }, + { name: '橡硅胶件', value: 100 }, + { name: '包材件', value: 99 }, + { name: '电子件', value: 92 }, + { name: '组件', value: 92 }, + { name: '陶瓷', value: 94 } + ], + rightChartData2: [ + { name: '注塑件', value: 100 }, + { name: '五金件', value: 97 }, + { name: '橡硅胶件', value: 100 }, + { name: '包材件', value: 99 }, + { name: '原料', value: 100 }, + { name: '组件', value: 99 }, + { name: '陶瓷', value: 99 } + ], leftData: this.dataType == '3'?originalLeftData2:originalLeftData, rightData: this.dataType == '3'?originalRightData2:originalRightData @@ -225,6 +240,7 @@ export default { // 修改柱状图y轴配置 initRightChart() { const chart = echarts.init(document.getElementById('right-echarts-new')); + let chartData = this.dataType == '6'?this.rightChartData2:this.rightChartData; const option = { legend: { icon: 'rect', @@ -247,7 +263,7 @@ export default { }, xAxis: { type: 'category', - data: this.rightChartData.map(item => item.name), + data: chartData.map(item => item.name), axisLabel: { color: '#fff', fontSize: 20, @@ -281,7 +297,7 @@ export default { }, series: [{ type: 'bar', - data: this.rightChartData.map(item => item.value), + data: chartData.map(item => item.value), barWidth: '40%', itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -317,11 +333,11 @@ export default { }, initGaugeCharts() { // 机芯直通率 - this.initGaugeChart('gauge-chart-1', this.middleTopData.corePassRate); + this.initGaugeChart('gauge-chart-1', this.dataType == '6'?this.middleTopData2.corePassRate: this.middleTopData.corePassRate); // 盖板直通率 - this.initGaugeChart('gauge-chart-2', this.middleTopData.coverPassRate); + this.initGaugeChart('gauge-chart-2', this.dataType == '6'?this.middleTopData2.coverPassRate: this.middleTopData.coverPassRate); // 整机直通率 - this.initGaugeChart('gauge-chart-3', this.middleTopData.wholePassRate); + this.initGaugeChart('gauge-chart-3', this.dataType == '6'?this.middleTopData2.coverPassRate:this.middleTopData.wholePassRate); }, // 修改仪表盘样式部分 // 修改initGaugeChart方法 diff --git a/src/components/baozuo-demo2/LeftChart1.vue b/src/components/baozuo-demo2/LeftChart1.vue index 3997133..60d7e09 100644 --- a/src/components/baozuo-demo2/LeftChart1.vue +++ b/src/components/baozuo-demo2/LeftChart1.vue @@ -51,7 +51,8 @@ export default { const generateData = () => { return dates.map((date, index) => { const day = parseInt(date.split('-')[1]); - return day <= currentDay ? (Math.random() * 10).toFixed(2) : 0; + let step = this.dataType == '6'? 6 : 10; + return day <= currentDay ? (Math.random() * step).toFixed(2) : 0; }); }; diff --git a/src/components/baozuo-demo2/LeftChart2.vue b/src/components/baozuo-demo2/LeftChart2.vue index 1366450..bd8c927 100644 --- a/src/components/baozuo-demo2/LeftChart2.vue +++ b/src/components/baozuo-demo2/LeftChart2.vue @@ -48,7 +48,8 @@ export default { }, createData() { // 模拟数据（每个柱子的总高度，单位：%） - const rawData = [95, 92, 98, 95, 98, 90]; // P1-P6的合格率数据 + + const rawData =this.dataType == '6'?[95, 100, 98, 99, 98, 100] : [95, 92, 98, 95, 98, 90]; // P1-P6的合格率数据 // 将数据按 10% 分段，生成堆叠数据 const generateStackData = (value) => { diff --git a/src/components/baozuo-demo2/index.vue b/src/components/baozuo-demo2/index.vue index 2952ea4..fdfce19 100644 --- a/src/components/baozuo-demo2/index.vue +++ b/src/components/baozuo-demo2/index.vue @@ -3,7 +3,7 @@ - +
@@ -59,6 +59,8 @@ export default { this.dataType = '整机'; }else if(dataTypeParam === '3'){ this.dataType = '3'; + }else if(dataTypeParam === '6'){ + this.dataType = '6'; }else{ this.dataType = ''; // 如果不是 '1'，则设置为空 } diff --git a/src/components/baozuo-demo2/pieChart.vue b/src/components/baozuo-demo2/pieChart.vue index 9ee68e3..a7b586a 100644 --- a/src/components/baozuo-demo2/pieChart.vue +++ b/src/components/baozuo-demo2/pieChart.vue @@ -14,11 +14,9 @@ }, chartData: { type: Object, - }, - props: { + }, dataType: { } - }, }, data() { return { @@ -39,7 +37,7 @@ }, methods: { createData() { - let chartData = [ + let arr = [ { value: 35, name: "外观不良", @@ -65,7 +63,34 @@ name: "其他不良", }, ]; - + let arr2 = [ + { + value: 35, + name: "外观不良", + }, + { + value: 20, + name: "尺寸不良", + }, + { + value: 16, + name: "功能不良", + }, + { + value: 12, + name: "包装不良", + }, + { + value: 12, + name: "标签不良", + }, + { + value: 27, + name: "其他不良", + }, + ]; + let chartData = this.dataType == '6'?arr2 : arr; + console.log(this.dataType,chartData) var myChart = echarts.init(document.getElementById('pieId-new')); this.option = {