diff --git a/src/components/baozuo-demo2/CenterCmp.vue b/src/components/baozuo-demo2/CenterCmp.vue index 28ded78..75ecbde 100644 --- a/src/components/baozuo-demo2/CenterCmp.vue +++ b/src/components/baozuo-demo2/CenterCmp.vue @@ -7,7 +7,7 @@
- 本月工单概况 + 本月产品合格率比对
@@ -25,7 +25,7 @@
-
+
@@ -37,18 +37,21 @@
机芯直通率
+
机芯检验量：250
盖板直通率
+
盖板检验量：580
整机直通率
+
整机检测量：420
@@ -59,7 +62,7 @@
- 当月工序不良比 + 本月来料合格率
@@ -188,25 +191,24 @@ export default { data: ['机芯产量', '盖板产量'] }, rankData: [ - { name: '产品A', value: 98 }, - { name: '产品B', value: 95 }, - { name: '产品C', value: 93 }, - { name: '产品D', value: 90 }, - { name: '产品E', value: 88 }, - { name: '产品F', value: 85 }, - { name: '产品G', value: 82 }, - { name: '产品H', value: 80 }, - { name: '产品I', value: 78 }, - { name: '产品J', value: 75 } + { name: 'U1A', value: 99 }, + { name: 'U2A', value: 96 }, + { name: 'U2B', value: 90 }, + { name: 'U2C', value: 85 }, + { name: 'U1B', value: 95 }, + { name: 'U1C', value: 93 }, + { name: 'W1A', value: 82 }, + { name: 'W2A', value: 80 }, + { name: 'W3A', value: 98 }, ], rightChartData: [ - { name: '工序1', value: Math.floor(Math.random() * 1000) }, - { name: '工序2', value: Math.floor(Math.random() * 1000) }, - { name: '工序3', value: Math.floor(Math.random() * 1000) }, - { name: '工序4', value: Math.floor(Math.random() * 1000) }, - { name: '工序5', value: Math.floor(Math.random() * 1000) }, - { name: '工序6', value: Math.floor(Math.random() * 1000) }, - { name: '工序7', value: Math.floor(Math.random() * 1000) } + { name: '注塑件', value: Math.floor(Math.random() * 100) }, + { name: '五金件', value: Math.floor(Math.random() * 100) }, + { name: '橡硅胶件', value: Math.floor(Math.random() * 100) }, + { name: '包材件', value: Math.floor(Math.random() * 100) }, + { name: '电子件', value: Math.floor(Math.random() * 100) }, + { name: '组件', value: Math.floor(Math.random() * 100) }, + { name: '陶瓷', value: Math.floor(Math.random() * 100) } ], leftData: this.dataType == '3'?originalLeftData2:originalLeftData, @@ -290,6 +292,7 @@ export default { } myChart.setOption(this.option); }, + // 修改柱状图y轴配置 initRightChart() { const chart = echarts.init(document.getElementById('right-echarts-new')); const option = { @@ -316,10 +319,12 @@ export default { }, yAxis: { type: 'value', - max: 1000, + max: 100, axisLabel: { color: '#fff', - fontSize: 16 + fontSize: 23, + fontWight:'bold', + formatter: '{value}%' // 添加百分比显示 }, axisLine: { lineStyle: { @@ -347,7 +352,7 @@ export default { show: true, position: 'top', color: '#fff', - fontSize: 16 + fontSize: 18 } }] }; @@ -484,7 +489,7 @@ export default { .middle-top { padding-left: 20px; margin-top: -50px; - margin-bottom: 50px; + // margin-bottom: 30px; background-image: linear-gradient( to bottom, rgba(135, 178, 252, 0.04), /* 蓝色透明度15% */ @@ -538,6 +543,12 @@ export default { color: #fff; margin-top: -70px; } + .pass-rate-value { + font-size: 20px; + font-weight: bold; + color: #fff; + // margin-top: -20px; + } } } .center-cmp { diff --git a/src/components/baozuo-demo2/LeftChart1.vue b/src/components/baozuo-demo2/LeftChart1.vue index e4275fc..a23b5bf 100644 --- a/src/components/baozuo-demo2/LeftChart1.vue +++ b/src/components/baozuo-demo2/LeftChart1.vue @@ -1,5 +1,8 @@ @@ -45,7 +48,7 @@ export default { console.log(myChart) this.option = { title: { - text: '本月不良率推移图', + // text: '本月不良率推移图', textStyle: { fontSize: 25, fontWight:'bold', @@ -310,9 +313,25 @@ export default { #rose-chart { box-sizing: border-box; color: white; - + .chart-title { + font-size: 25px; + color: white; + font-weight: bold; + display: flex; + align-items: center; + // margin-bottom: 15px; + + &::before { + content: ''; + display: inline-block; + width: 10px; + height: 20px; + background-color: #08e5ff; // 浅蓝色 + margin-right: 10px; + } + } .pie-chart-container { - height: 100% + height:calc(100% - 30px); } } diff --git a/src/components/baozuo-demo2/LeftChart2.vue b/src/components/baozuo-demo2/LeftChart2.vue index 6135fbd..7f4ab5d 100644 --- a/src/components/baozuo-demo2/LeftChart2.vue +++ b/src/components/baozuo-demo2/LeftChart2.vue @@ -22,13 +22,31 @@ export default { dataType: { } }, + // 在data()中添加月份数据 data() { return { - option: {} + option: {}, + monthLabels: this.getRecentMonthLabels() } }, + + // 在methods中添加获取最近月份标签的方法 methods: { - createData() { + getRecentMonthLabels() { + const labels = []; + const date = new Date(); + + for (let i = 5; i >= 0; i--) { + const d = new Date(date); + d.setMonth(date.getMonth() - i); + // 格式化为"年份后两位+月份" (如2504表示2025年4月) + const year = d.getFullYear().toString().slice(-2); + const month = (d.getMonth() + 1).toString().padStart(2, '0'); + labels.push(`${year}${month}`); + } + return labels; + }, + createData() { // 模拟数据（每个柱子的总高度，单位：%） const rawData = [85, 92, 78, 95, 88, 90]; // P1-P6的合格率数据 @@ -81,7 +99,7 @@ export default { }, xAxis: { type: 'category', - data: ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'], + data: this.monthLabels, // 使用动态生成的月份标签 axisLabel: { fontSize: 23, color: '#fff', diff --git a/src/components/baozuo-demo2/index.vue b/src/components/baozuo-demo2/index.vue index f904a7e..2952ea4 100644 --- a/src/components/baozuo-demo2/index.vue +++ b/src/components/baozuo-demo2/index.vue @@ -3,7 +3,7 @@ - +
diff --git a/src/components/baozuo-demo2/pieChart.vue b/src/components/baozuo-demo2/pieChart.vue index 9ecb43f..d8c687b 100644 --- a/src/components/baozuo-demo2/pieChart.vue +++ b/src/components/baozuo-demo2/pieChart.vue @@ -124,7 +124,9 @@ formatter: function(params) { return params.value; }, - color: '#fff' + color: '#fff', + fontWeight: 'bold', + fontSize: 20 } }] }]