From eee121e5ab0113a6d8d49b11d02fcdd633d5f919 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’> Date: Tue, 2 Jul 2024 13:15:50 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9bui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../factoryData/components/BarChartBase.vue | 36 ++++++-- .../components/BarChartChipOEE.vue | 91 +++++++++++++++---- .../copilot/factoryData/components/Order.vue | 4 +- .../factoryData/components/ProdMonitor.vue | 60 +++++++----- .../factoryData/components/rightContainer.vue | 17 +--- src/views/copilot/factoryData/hdIndex.vue | 6 +- src/views/copilot/factoryData/index.vue | 8 +- .../report/components/produceLineBar.vue | 8 +- .../components/produceLineBarTarget.vue | 8 +- .../components/produceLineBarYearTarget.vue | 10 +- .../components/produceLineYieldBarTarget.vue | 5 +- src/views/report/produceConversion.vue | 8 +- .../report/productionSituationTablets.vue | 2 +- 13 files changed, 174 insertions(+), 89 deletions(-) diff --git a/src/views/copilot/factoryData/components/BarChartBase.vue b/src/views/copilot/factoryData/components/BarChartBase.vue index b54d83c..2e118e5 100644 --- a/src/views/copilot/factoryData/components/BarChartBase.vue +++ b/src/views/copilot/factoryData/components/BarChartBase.vue @@ -55,13 +55,35 @@ export default { options: { color: ["#FFD160", "#2760FF", "#12FFF5"], grid: { - left: "7%", - right: "7%", + left: "6%", + right: "3%", bottom: "15%", top: "15%", }, 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 = ``; + 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[0].axisValueLabel}` + + `${params[i].value + '片'}`; + } + return res; + }, }, xAxis: { axisTick: { @@ -396,11 +418,11 @@ export default { this.chart.dispose(); } this.chart = echarts.init(document.getElementById("factoryEnergyChart")); - const actualOptions = JSON.parse(JSON.stringify(this.options)); - actualOptions.xAxis.data = this.orderXAxis; - actualOptions.series[0].data = this.data; - this.actualOptions = actualOptions; - this.chart.setOption(actualOptions); + // const actualOptions = JSON.parse(JSON.stringify(this.options)); + this.options.xAxis.data = this.orderXAxis; + this.options.series[0].data = this.data; + // this.actualOptions = actualOptions; + this.chart.setOption(this.options); }, }, }; diff --git a/src/views/copilot/factoryData/components/BarChartChipOEE.vue b/src/views/copilot/factoryData/components/BarChartChipOEE.vue index 8d0ee7f..513c740 100644 --- a/src/views/copilot/factoryData/components/BarChartChipOEE.vue +++ b/src/views/copilot/factoryData/components/BarChartChipOEE.vue @@ -1,7 +1,7 @@ @@ -62,7 +62,59 @@ 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', + // // textStyle: { + // // color:'rgba(255, 255, 255, 0.85)' + // // }, + // formatter: params => { + // console.log('params', params) + // var res = `${params[0].axisValueLabel}`; + // for (var i = 0, l = params.length; i < l; i++) { + // res += + // "
" + + // `` + + // `${params[i].seriesName}` + + // `${params[i].value}`; + // } + // return res; + // }, + // }, + 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 + '片'}`; + } + return res; + }, + }, xAxis: { axisTick: { show: false, @@ -201,12 +253,12 @@ export default { }, /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ 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.options.xAxis.axisLabel.fontSize = val ? 18 : 12; + this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; + this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // if (val === false && this.isOpen === true) { // console.log(val) // this.width = 97 + '%' @@ -221,7 +273,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) { @@ -231,16 +283,17 @@ export default { } // console.log('val', val) const actualOptions = JSON.parse(JSON.stringify(this.options)) + console.log(actualOptions); // actualOptions.xAxis.data = val 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() { @@ -277,7 +330,7 @@ export default { this.chart.dispose(); } this.chart = echarts.init(this.$refs.oeeChart); - this.chart.setOption(this.actualOptions); + this.chart.setOption(this.options); }, }, }; @@ -289,8 +342,8 @@ export default { .legend { position: absolute; - top: 5.2vh; - right: 1vw; + top: 3vh; + right: 13vw; } .legend-item { @@ -347,4 +400,8 @@ export default { transform: translateY(-50%) translateX(50%); } } + .echarts-tooltip-dark { + background: #001829; + + } diff --git a/src/views/copilot/factoryData/components/Order.vue b/src/views/copilot/factoryData/components/Order.vue index 9ea4ec6..5444e2d 100644 --- a/src/views/copilot/factoryData/components/Order.vue +++ b/src/views/copilot/factoryData/components/Order.vue @@ -8,7 +8,7 @@ 工单情况 -
+
@@ -188,7 +188,7 @@ export default { height: 1px; // display: inline-block; border: 1px solid; // display: inline-block; - border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2; + border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 0%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2; backdrop-filter: blur(3px); } } diff --git a/src/views/copilot/factoryData/components/ProdMonitor.vue b/src/views/copilot/factoryData/components/ProdMonitor.vue index 64f4882..fc07f19 100644 --- a/src/views/copilot/factoryData/components/ProdMonitor.vue +++ b/src/views/copilot/factoryData/components/ProdMonitor.vue @@ -28,8 +28,8 @@
良品数量 {{ - msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0 - }} + msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0 + }}
@@ -38,8 +38,8 @@
生产数量 {{ - msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0 - }} + msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0 + }}
良品率 @@ -61,8 +61,8 @@
良品数量 {{ - msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0 - }} + msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0 + }}
@@ -71,8 +71,8 @@
生产数量 {{ - msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0 - }} + msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0 + }}
良品率 @@ -94,8 +94,8 @@
良品数量 {{ - msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0 - }} + msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0 + }}
@@ -104,8 +104,8 @@
生产数量 {{ - msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0 - }} + msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0 + }}
良品率 @@ -118,7 +118,11 @@
生产情况 - +
+ +
+
@@ -129,10 +133,12 @@ -