From 92361ded2ce8d53e3362cda27bcb0a662506e2cf Mon Sep 17 00:00:00 2001 From: xiangxy Date: Mon, 29 May 2023 19:41:08 +0800 Subject: [PATCH] one --- src/pages/modules/homepage/one.vue | 318 ++++++++++++++++++++++++++++- 1 file changed, 316 insertions(+), 2 deletions(-) diff --git a/src/pages/modules/homepage/one.vue b/src/pages/modules/homepage/one.vue index 2fd4a58..533a60e 100644 --- a/src/pages/modules/homepage/one.vue +++ b/src/pages/modules/homepage/one.vue @@ -75,6 +75,24 @@ +
+
+
+
本周混料生产
+
+
+
+
+
+
+
+
本周压制生产
+
+
+
+
+
+
@@ -92,7 +110,9 @@ export default { myCharts01: '', myCharts02: '', myCharts03: '', - myCharts04: '' + myCharts04: '', + myCharts05: '', + myCharts06: '' } }, mounted () { @@ -100,6 +120,8 @@ export default { this.setEchart02() this.setEchart03() this.setEchart04() + this.setEchart05() + this.setEchart06() }, methods: { setEchart03 () { @@ -393,6 +415,297 @@ export default { }) } }, + setEchart05 () { + let date = [] + let data1 = [] + this.arrL2.map(e => { + date.push(e.date) + data1.push(e.elbow_qty) + }) + let option = { + grid: { + top: 50, + left: 0, + right: 0, + bottom: 0, + containLabel: true + }, + legend: { + icon: 'rect', + textStyle: { + color: '#fff', + fontSize: 14, + lineHeight: 14 + }, + itemGap: 30.86, + itemWidth: 14.16, + itemHeight: 7.38, + data: [{name: '产量（kg）', itemStyle: {color: '#0E90FD'}}] + }, + xAxis: { + type: 'category', + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + width: 2, + color: '#8FABBF' + } + }, + axisLabel: { + interval: 0, + textStyle: { + color: '#8FABBF', + fontSize: 16 + }, + rotate: 50 + }, + data: date + }, + yAxis: { + type: 'value', + axisLine: { + show: false + }, + splitNumber: 2, + axisTick: { + show: false + }, + axisLabel: { + textStyle: { + color: '#8FABBF', + fontSize: 14 + } + }, + splitLine: { + show: true, + lineStyle: { + type: [8, 4], + dashOffset: 4, + color: '#8FABBF' + } + } + }, + series: [ + { + name: '产量（kg）', + type: 'bar', + barWidth: '8', + itemStyle: { + normal: { + color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 1, + color: 'rgba(96,112,128,0.10)', + opacity: 1 + }, + { + offset: 0, + color: '#0E90FD', + opacity: 0.1 + } + ]) + } + }, + data: data1 + } + ] + } + let echart = document.getElementById('echart_d05') + if (this.myCharts05 !== '') { + this.myCharts05.dispose() + } + if (echart !== null) { + this.myCharts05 = this.$echarts.init(echart) + this.myCharts05.setOption(option) + window.addEventListener('resize', () => { + this.myCharts05.resize() + }) + } + }, + setEchart06 () { + let data1 = [] + let data2 = [] + let data3 = [] + let data4 = [] + let device = [] + this.echartData1.map(e => { + data1.push(e.data1) + data2.push(e.data2) + data3.push(e.data3) + data4.push(e.data4) + device.push(e.device) + }) + let option = { + grid: { + top: 50, + left: 0, + right: 0, + bottom: 0, + containLabel: true + }, + legend: { + icon: 'rect', + textStyle: { + color: '#fff', + fontSize: 14, + lineHeight: 14 + }, + itemGap: 30.86, + itemWidth: 14.16, + itemHeight: 7.38, + data: [{name: '正常运行', itemStyle: {color: '#33CCCC'}}, {name: '故障', itemStyle: {color: '#EAAD24'}}, {name: '待机', itemStyle: {color: '#0E90FD'}}, {name: '关机', itemStyle: {color: '#c9c9c9'}}] + }, + xAxis: { + type: 'category', + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + width: 2, + color: '#8FABBF' + } + }, + axisLabel: { + interval: 0, + textStyle: { + color: '#8FABBF', + fontSize: 16 + } + }, + data: device + }, + yAxis: { + type: 'value', + axisLine: { + show: false + }, + splitNumber: 2, + axisTick: { + show: false + }, + axisLabel: { + textStyle: { + color: '#8FABBF', + fontSize: 14 + } + }, + splitLine: { + show: true, + lineStyle: { + type: [8, 4], + dashOffset: 4, + color: '#8FABBF' + } + } + }, + series: [ + { + name: '正常运行', + type: 'bar', + barWidth: '8', + itemStyle: { + normal: { + color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#33CCCC', + opacity: 1 + }, + { + offset: 1, + color: 'rgba(31,89,89,0.25)', + opacity: 0.25 + } + ]) + } + }, + data: data1 + }, + { + name: '故障', + type: 'bar', + barWidth: '8', + itemStyle: { + normal: { + color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#B68845', + opacity: 1 + }, + { + offset: 1, + color: 'rgba(134,98,45,0.25)', + opacity: 0.25 + } + ]) + } + }, + data: data2 + }, + { + name: '待机', + type: 'bar', + barWidth: '8', + itemStyle: { + normal: { + color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 1, + color: 'rgba(96,112,128,0.10)', + opacity: 1 + }, + { + offset: 0, + color: '#0E90FD', + opacity: 0.1 + } + ]) + } + }, + data: data3 + }, + { + name: '关机', + type: 'bar', + barWidth: '8', + itemStyle: { + normal: { + color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#c9c9c9', + opacity: 1 + }, + { + offset: 1, + color: 'rgba(148,145,145,0.25)', + opacity: 0.25 + } + ]) + } + }, + data: data4 + } + ] + } + let echart = document.getElementById('echart_06') + // if (this.myCharts06 !== '') { + // this.myCharts06.dispose() + // } + if (echart !== null) { + this.myCharts06 = this.$echarts.init(echart) + this.myCharts06.setOption(option) + window.addEventListener('resize', () => { + this.myCharts06.resize() + }) + } + }, setEchart10 () { let total = [100, 200, 120, 133, 80, 155, 250] let names = [10, 20, 30, 40, 50, 60, 70] @@ -712,9 +1025,10 @@ export default { flex-direction row .box2 clear both - _wh(100%, 38%) + _wh(100%, 37%) _fj() flex-direction row + margin-bottom 1% .item_title _font(46px, 100%, #fff,,,) display inline-block