From 81c4af0cc8dda00d57ce1dc8777d0dd0a50f86f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’> Date: Wed, 3 Jul 2024 16:28:41 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/copilot/components/BarChartBase.vue | 57 +++++++++---- .../copilot/components/ftoBarChartBase.vue | 59 +++++++++---- .../components/sub/bar/BarChartChipOEE.vue | 49 ++++++++--- .../components/sub/bar/BarChartChipTrans.vue | 53 ++++++++---- .../components/sub/chip/ChipRateItem.vue | 4 +- .../factoryData/components/BarChartBase.vue | 3 +- .../components/BarChartChipOEE.vue | 8 +- .../copilot/factoryData/components/Order.vue | 7 +- .../factoryData/components/ProdMonitor.vue | 2 +- .../copilot/factoryData/components/button.vue | 4 +- .../factoryData/components/leftContainer.vue | 7 +- .../factoryData/components/rightContainer.vue | 3 +- src/views/copilot/factoryData/index.vue | 2 +- src/views/dashboard/charts/ChipYieldChart.vue | 83 ++++++++++++++----- src/views/dashboard/charts/LeftChartBase.vue | 36 ++++---- src/views/dashboard/charts/RightChartBase.vue | 33 ++++---- src/views/produce/data/lineChart.vue | 10 ++- .../components/produceLineYieldBarTarget.vue | 8 +- src/views/report/produceConversion.vue | 8 +- 19 files changed, 290 insertions(+), 146 deletions(-) diff --git a/src/views/copilot/components/BarChartBase.vue b/src/views/copilot/components/BarChartBase.vue index 0707453..633ad01 100644 --- a/src/views/copilot/components/BarChartBase.vue +++ b/src/views/copilot/components/BarChartBase.vue @@ -62,7 +62,32 @@ export default { top: "15%", containLabel: true, }, - tooltip: {}, + tooltip: { + trigger: "axis", + axisPointer: { + // type: "cross", + crossStyle: { + color: "rgba(237,237,237,0.5)", + }, + }, + extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', + backgroundColor: '#001829', + borderColor: '#001829', + formatter: params => { + console.log('params', params) + var res = `${params[0].axisValueLabel}`; + for (var i = 0, l = params.length; i < l; i++) { + let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' + // console.log(item.color, color); + res += + "
" + + `` + + `${params[i].seriesName}` + + `${params[i].value ? params[i].value + '片' : 0 + '片'}`; + } + return res; + }, + }, xAxis: { axisTick: { show: false, @@ -188,13 +213,13 @@ export default { this.canvasReset() }, isFullscreen(val) { - this.actualOptions.series.map((item) => { + this.options.series.map((item) => { item.barWidth = val ? 18 : 12; }); - this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; - this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; - this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; - this.initChart(this.actualOptions); + this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; + this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; + this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + this.initChart(this.options); // this.actualOptions.series.map((item) => { // item.barWidth = val ? 18 : 12; // }); @@ -209,14 +234,14 @@ export default { this.initChart(this.options); return; } - const actualOptions = JSON.parse(JSON.stringify(this.options)); - console.log('actualOptions', this.options) - actualOptions.series[0].data = val[0].data; - actualOptions.series[0].name = val[0].name; - actualOptions.series[1].data = val?.[1]?.data || []; - actualOptions.series[1].name = val?.[1]?.name || ""; - this.actualOptions = actualOptions; - this.initChart(actualOptions); + // const actualOptions = JSON.parse(JSON.stringify(this.options)); + // console.log('actualOptions', this.options) + this.options.series[0].data = val[0].data; + this.options.series[0].name = val[0].name; + this.options.series[1].data = val?.[1]?.data || []; + this.options.series[1].name = val?.[1]?.name || ""; + // this.actualOptions = actualOptions; + this.initChart(this.options); }, }, mounted() { @@ -225,7 +250,7 @@ export default { this.isFullscreen = screenfull.isFullscreen; }); } - this.actualOptions = this.options + // this.actualOptions = this.options this.canvasReset(); window.addEventListener("resize", this.canvasReset); }, @@ -249,7 +274,7 @@ export default { this.chart.dispose(); } this.chart = echarts.init(this.$refs.chart); - this.chart.setOption(this.actualOptions); + this.chart.setOption(this.options); }, }, }; diff --git a/src/views/copilot/components/ftoBarChartBase.vue b/src/views/copilot/components/ftoBarChartBase.vue index 5021f78..ccf405e 100644 --- a/src/views/copilot/components/ftoBarChartBase.vue +++ b/src/views/copilot/components/ftoBarChartBase.vue @@ -1,7 +1,7 @@ @@ -63,7 +63,32 @@ export default { top: "15%", containLabel: true, }, - tooltip: {}, + tooltip: { + trigger: "axis", + axisPointer: { + // type: "cross", + crossStyle: { + color: "rgba(237,237,237,0.5)", + }, + }, + extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', + backgroundColor: '#001829', + borderColor: '#001829', + formatter: params => { + console.log('params', params) + var res = `${params[0].axisValueLabel}`; + for (var i = 0, l = params.length; i < l; i++) { + let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' + // console.log(item.color, color); + res += + "
" + + `` + + `${params[i].seriesName}` + + `${params[i].value ? params[i].value + '片' : 0 + '片'}`; + } + return res; + }, + }, xAxis: { axisTick: { show: false, @@ -189,13 +214,13 @@ export default { this.canvasReset() }, isFullscreen(val) { - this.actualOptions.series.map((item) => { + this.options.series.map((item) => { item.barWidth = val ? 18 : 12; }); - this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; - this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; - this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; - this.initChart(this.actualOptions); + this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; + this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; + this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + this.initChart(this.options); // this.actualOptions.series.map((item) => { // item.barWidth = val ? 18 : 12; // }); @@ -210,14 +235,14 @@ export default { this.initChart(this.options); return; } - const actualOptions = JSON.parse(JSON.stringify(this.options)); - console.log('actualOptions', this.options) - actualOptions.series[0].data = val[0].data; - actualOptions.series[0].name = val[0].name; - actualOptions.series[1].data = val[1].data; - actualOptions.series[1].name = val[1].name; - this.actualOptions = actualOptions; - this.initChart(actualOptions); + // const actualOptions = JSON.parse(JSON.stringify(this.options)); + // console.log('actualOptions', this.options) + this.options.series[0].data = val[0].data; + this.options.series[0].name = val[0].name; + this.options.series[1].data = val[1].data; + this.options.series[1].name = val[1].name; + // this.actualOptions = actualOptions; + this.initChart(this.options); }, }, mounted() { @@ -226,7 +251,7 @@ export default { this.isFullscreen = screenfull.isFullscreen; }); } - this.actualOptions = this.options + // this.actualOptions = this.options this.canvasReset(); window.addEventListener("resize", this.canvasReset); }, @@ -250,7 +275,7 @@ export default { this.chart.dispose(); } this.chart = echarts.init(this.$refs.ftoChart); - this.chart.setOption(this.actualOptions); + this.chart.setOption(this.options); }, }, }; diff --git a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue index 6d7f58f..6ae8025 100644 --- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue +++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue @@ -1,7 +1,7 @@ @@ -62,7 +62,32 @@ export default { top: "15%", containLabel: true, }, - tooltip: {}, + tooltip: { + trigger: "axis", + axisPointer: { + // type: "cross", + crossStyle: { + color: "rgba(237,237,237,0.5)", + }, + }, + extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', + backgroundColor: '#001829', + borderColor: '#001829', + formatter: params => { + console.log('params', params) + var res = `${params[0].axisValueLabel}`; + for (var i = 0, l = params.length; i < l; i++) { + let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' + // console.log(item.color, color); + res += + "
" + + `` + + `${params[i].seriesName}` + + `${params[i].value ? params[i].value + '片' : 0 + '片'}`; + } + return res; + }, + }, xAxis: { axisTick: { show: false, @@ -241,7 +266,7 @@ export default { // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; - this.initChart(this.actualOptions) + this.initChart(this.options) this.canvasReset() }, series(val) { @@ -252,14 +277,14 @@ export default { // console.log('val', val) const actualOptions = JSON.parse(JSON.stringify(this.options)) console.log(actualOptions) - actualOptions.series[0].data = val[0].data; - actualOptions.series[0].name = val[0].name; - actualOptions.series[1].data = val?.[1]?.data; - actualOptions.series[1].name = val?.[1]?.name; - actualOptions.series[2].data = val?.[2]?.data || []; - actualOptions.series[2].name = val?.[2]?.name || ""; + this.options.series[0].data = val[0].data; + this.options.series[0].name = val[0].name; + this.options.series[1].data = val?.[1]?.data; + this.options.series[1].name = val?.[1]?.name; + this.options.series[2].data = val?.[2]?.data || []; + this.options.series[2].name = val?.[2]?.name || ""; this.actualOptions = actualOptions; - this.initChart(actualOptions); + this.initChart(this.options); }, }, mounted() { @@ -273,7 +298,7 @@ export default { this.isFullscreen = screenfull.isFullscreen; }); } - this.actualOptions = this.options + // this.actualOptions = this.options this.canvasReset(); window.addEventListener("resize", this.canvasReset); }, @@ -296,7 +321,7 @@ export default { this.chart.dispose(); } this.chart = echarts.init(this.$refs.oeeChart); - this.chart.setOption(this.actualOptions); + this.chart.setOption(this.options); }, }, }; diff --git a/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue b/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue index 848f32d..4a60f44 100644 --- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue +++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue @@ -1,7 +1,7 @@ @@ -62,7 +62,32 @@ export default { top: "15%", containLabel: true, }, - tooltip: {}, + tooltip: { + trigger: "axis", + axisPointer: { + // type: "cross", + crossStyle: { + color: "rgba(237,237,237,0.5)", + }, + }, + extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', + backgroundColor: '#001829', + borderColor: '#001829', + formatter: params => { + console.log('params', params) + var res = `${params[0].axisValueLabel}`; + for (var i = 0, l = params.length; i < l; i++) { + let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' + // console.log(item.color, color); + res += + "
" + + `` + + `${params[i].seriesName}` + + `${params[i].value ? params[i].value + '片' : 0 + '片'}`; + } + return res; + }, + }, xAxis: { axisTick: { show: false, @@ -241,7 +266,7 @@ export default { // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; - this.initChart(this.actualOptions) + this.initChart(this.options) this.canvasReset() }, series(val) { @@ -250,15 +275,15 @@ export default { return; } console.log(val) - const actualOptions = JSON.parse(JSON.stringify(this.options)) - actualOptions.series[0].data = val[0].data; - actualOptions.series[0].name = val[0].name; - actualOptions.series[1].data = val?.[1]?.data || []; - actualOptions.series[1].name = val?.[1]?.name || ""; - actualOptions.series[2].data = val?.[2]?.data || []; - actualOptions.series[2].name = val?.[2]?.name || ""; - this.actualOptions = actualOptions; - this.initChart(actualOptions); + // const actualOptions = JSON.parse(JSON.stringify(this.options)) + this.options.series[0].data = val[0].data; + this.options.series[0].name = val[0].name; + this.options.series[1].data = val?.[1]?.data || []; + this.options.series[1].name = val?.[1]?.name || ""; + this.options.series[2].data = val?.[2]?.data || []; + this.options.series[2].name = val?.[2]?.name || ""; + // this.actualOptions = actualOptions; + this.initChart(this.options); }, }, mounted() { @@ -272,7 +297,7 @@ export default { this.isFullscreen = screenfull.isFullscreen; }); } - this.actualOptions = this.options + // this.actualOptions = this.options this.canvasReset(); window.addEventListener("resize", this.canvasReset); }, @@ -295,7 +320,7 @@ export default { this.chart.dispose(); } this.chart = echarts.init(this.$refs.oeeChart); - this.chart.setOption(this.actualOptions); + this.chart.setOption(this.options); }, }, }; diff --git a/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue b/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue index cee0804..40c8a68 100644 --- a/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue +++ b/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue @@ -318,6 +318,8 @@ export default { .legend-item { margin-left: 15px; display: flex; + font-size: 16px; + // font-weight: 600; flex-direction: column; // align-items: center; align-items: flex-start; @@ -371,8 +373,6 @@ export default { background: #003982; } .legend-item__value { - font-size: 24px; - font-weight: 600; } } diff --git a/src/views/copilot/factoryData/components/BarChartBase.vue b/src/views/copilot/factoryData/components/BarChartBase.vue index 2e118e5..76c4f9f 100644 --- a/src/views/copilot/factoryData/components/BarChartBase.vue +++ b/src/views/copilot/factoryData/components/BarChartBase.vue @@ -80,7 +80,7 @@ export default { res += `` + `${params[0].axisValueLabel}` + - `${params[i].value + '片'}`; + `${params[i].value ? params[i].value + '片' : 0 + '片'}`; } return res; }, @@ -117,6 +117,7 @@ export default { yAxis: { type: "value", name: "单位/片", + position: 'left', nameTextStyle: { color: "rgba(255, 255, 255, 0.7)", fontSize: 12, diff --git a/src/views/copilot/factoryData/components/BarChartChipOEE.vue b/src/views/copilot/factoryData/components/BarChartChipOEE.vue index 513c740..de0191e 100644 --- a/src/views/copilot/factoryData/components/BarChartChipOEE.vue +++ b/src/views/copilot/factoryData/components/BarChartChipOEE.vue @@ -1,7 +1,7 @@ @@ -110,7 +110,7 @@ export default { "
" + `` + `${params[i].seriesName}` + - `${params[i].value + '片'}`; + `${params[i].value ? params[i].value + '片' : 0 + '片'}`; } return res; }, @@ -132,6 +132,7 @@ export default { }, yAxis: { name: "单位/片", + position: 'left', nameTextStyle: { color: "#fff", fontSize: 12, @@ -337,6 +338,7 @@ export default {