From 9e2da2ddc2c6cd970fd3e9addf061bc3fa5eb982 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’> Date: Fri, 29 Dec 2023 09:00:00 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.dev | 6 +- src/assets/icons/svg/energyMonitoring.svg | 14 + src/assets/icons/svg/eqAlarm.svg | 14 + src/assets/icons/svg/eqMonitoring.svg | 17 + src/assets/icons/svg/productLine.svg | 14 + src/assets/icons/svg/scrap.svg | 16 + src/views/OperationalOverview/coldBoard.vue | 1316 ++++++----------- .../components/baseTable.vue | 5 +- .../components/doubleYChart .vue | 177 +-- .../components/linearBarChart.vue | 163 +- .../components/pileBarChart.vue | 235 +++ .../OperationalOverview/processingBoard.vue | 459 +++--- 12 files changed, 1153 insertions(+), 1283 deletions(-) create mode 100644 src/assets/icons/svg/energyMonitoring.svg create mode 100644 src/assets/icons/svg/eqAlarm.svg create mode 100644 src/assets/icons/svg/eqMonitoring.svg create mode 100644 src/assets/icons/svg/productLine.svg create mode 100644 src/assets/icons/svg/scrap.svg create mode 100644 src/views/OperationalOverview/components/pileBarChart.vue diff --git a/.env.dev b/.env.dev index 40a1806e..a3f5a522 100644 --- a/.env.dev +++ b/.env.dev @@ -1,12 +1,12 @@ ### # @Author: Do not edit # @Date: 2023-08-29 09:40:39 - # @LastEditTime: 2023-12-18 13:35:00 + # @LastEditTime: 2023-12-29 08:57:36 # @LastEditors: zhp # @Description: ### # 开发环境配置 -ENV = 'development' +ENV = 'development' # 页面标题 VUE_APP_TITLE = MES系统 @@ -19,7 +19,7 @@ VUE_APP_BASE_API = 'http://192.168.0.33:48082' # VUE_APP_BASE_API = 'http://192.168.1.49:48082' # VUE_APP_BASE_API = 'http://192.168.1.8:48082' # VUE_APP_BASE_API = 'http://192.168.4.159:48080' -# VUE_APP_BASE_API = 'http://192.168.1.56:48082' +# VUE_APP_BASE_API = 'http://192.168.1.104:48082' # VUE_APP_BASE_API = 'http://192.168.1.62:48082' # VUE_APP_BASE_API = 'http://192.168.1.78:48082' diff --git a/src/assets/icons/svg/energyMonitoring.svg b/src/assets/icons/svg/energyMonitoring.svg new file mode 100644 index 00000000..ba27b0f4 --- /dev/null +++ b/src/assets/icons/svg/energyMonitoring.svg @@ -0,0 +1,14 @@ + + + 能源监控 + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/svg/eqAlarm.svg b/src/assets/icons/svg/eqAlarm.svg new file mode 100644 index 00000000..7b37c5be --- /dev/null +++ b/src/assets/icons/svg/eqAlarm.svg @@ -0,0 +1,14 @@ + + + 报警 + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/svg/eqMonitoring.svg b/src/assets/icons/svg/eqMonitoring.svg new file mode 100644 index 00000000..66ac7afa --- /dev/null +++ b/src/assets/icons/svg/eqMonitoring.svg @@ -0,0 +1,17 @@ + + + 设备监控 + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/svg/productLine.svg b/src/assets/icons/svg/productLine.svg new file mode 100644 index 00000000..a05d5c87 --- /dev/null +++ b/src/assets/icons/svg/productLine.svg @@ -0,0 +1,14 @@ + + + 库存管理 + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/svg/scrap.svg b/src/assets/icons/svg/scrap.svg new file mode 100644 index 00000000..5f72b0e5 --- /dev/null +++ b/src/assets/icons/svg/scrap.svg @@ -0,0 +1,16 @@ + + + 缺陷 + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/views/OperationalOverview/coldBoard.vue b/src/views/OperationalOverview/coldBoard.vue index 3127d186..57e845e9 100644 --- a/src/views/OperationalOverview/coldBoard.vue +++ b/src/views/OperationalOverview/coldBoard.vue @@ -1,213 +1,163 @@ + - @@ -1165,9 +823,11 @@ export default { .flex-1 { flex: 1 1; } - .h-full { - height: calc(100vh); + +.h-full { + height: calc(100vh - 150px); } + /* .container-main { min-height: calc(100vh - 10em); } */ diff --git a/src/views/OperationalOverview/components/baseTable.vue b/src/views/OperationalOverview/components/baseTable.vue index 52fc5ca8..83fbf703 100644 --- a/src/views/OperationalOverview/components/baseTable.vue +++ b/src/views/OperationalOverview/components/baseTable.vue @@ -1,7 +1,7 @@ @@ -16,9 +16,8 @@ style="width: 100%; background: transparent" > diff --git a/src/views/OperationalOverview/components/doubleYChart .vue b/src/views/OperationalOverview/components/doubleYChart .vue index 3b91bfb8..7355968c 100644 --- a/src/views/OperationalOverview/components/doubleYChart .vue +++ b/src/views/OperationalOverview/components/doubleYChart .vue @@ -1,7 +1,7 @@ @@ -60,98 +60,17 @@ export default { data() { return { chart: null, - series: [] + nameList: [], + series: [{ + type: 'bar', + data: [], + barWidth: 6 + }] } }, mounted() { console.log('mounted') console.log('borderRadius: ', this.borderRadius) - - this.series = [ - { - name: this.dataList[0].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[0].topColor }, - { offset: 1, color: this.dataList[0].bottomColor } - ]), - barBorderRadius: this.borderRadius - }, - data: this.dataList[0].data, - barWidth: 6 - }, - { - name: this.dataList[1].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[1].topColor }, - { offset: 1, color: this.dataList[1].bottomColor } - ]), - barBorderRadius: this.borderRadius - }, - data: this.dataList[1].data, - barWidth: 6 - }, - { - name: this.dataList[2].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[2].topColor }, - { offset: 1, color: this.dataList[2].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[2].data, - barWidth: 6 - }, - { - name: this.dataList[3].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[3].topColor }, - { offset: 1, color: this.dataList[3].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[3].data, - barWidth: 6 - }, - { - name: this.dataList[4].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[4].topColor }, - { offset: 1, color: this.dataList[4].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[4].data, - barWidth: 6 - }, - { - name: this.dataList[5].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[5].topColor }, - { offset: 1, color: this.dataList[5].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[5].data, - barWidth: 6 - } - ] - this.$nextTick(() => { this.initChart() }) @@ -164,8 +83,50 @@ export default { this.chart = null }, methods: { - initChart() { - console.log(1) + initChart(nameList, passRateList, outputNumList) { + let series= [ + { + name: '产线产量', + type: 'bar', + yAxisIndex: 1, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: '#9DD5FF' }, + { offset: 1, color: '#1295FF' } + ]) + // barBorderRadius: this.borderRadius + }, + barWidth: 12, + data: outputNumList + }, + { + name: '产线良品率', + type: 'line', + yAxisIndex: 0, + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(255, 209, 96, 0.18)' + }, + { + offset: 1, + color: 'rgba(255, 234, 153, 0)' + } + ]) + }, + itemStyle: { + normal: { + color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色 + lineStyle: { + color: 'rgba(255, 209, 96, 1)' //改变折线颜色 + } + } + }, + data: passRateList + } + ] const colors = ['#5470C6', '#91CC75', '#EE6666'] this.chart = echarts.init(document.getElementById(this.id)) this.chart.setOption({ @@ -177,7 +138,12 @@ export default { } }, grid: { - right: '20%' + left: "3%", + right: "4%", + bottom: "3%", + width: 'auto', + height: "auto", + containLabel: true }, legend: { data: ['产线产量', '产线良品率'], @@ -205,7 +171,7 @@ export default { color: '#213259' } }, - data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线'] + data: nameList }, // yAxis: { @@ -236,8 +202,7 @@ export default { axisLabel: { textStyle: { color: '#ced1d5', // 坐标值得具体的颜色 - formatter: '{value} 片' - + formatter: '{value}%' } }, splitLine: { @@ -295,29 +260,7 @@ export default { // }, } ], - series: [ - { - name: '产线产量', - type: 'bar', - yAxisIndex: 1, - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#9DD5FF' }, - { offset: 1, color: '#1295FF' } - ]) - // barBorderRadius: this.borderRadius - }, - data: [ - 2032, 3032, 1802, 2932, 2322, 2613, 2873, 2561 - ] - }, - { - name: '产线良品率', - type: 'line', - yAxisIndex: 0, - data: [98, 97, 94, 97.6, 98.2, 98.2, 97.4, 98.5] - } - ] + series: series }) } } diff --git a/src/views/OperationalOverview/components/linearBarChart.vue b/src/views/OperationalOverview/components/linearBarChart.vue index 9dea0694..a2e9f1c1 100644 --- a/src/views/OperationalOverview/components/linearBarChart.vue +++ b/src/views/OperationalOverview/components/linearBarChart.vue @@ -41,113 +41,39 @@ export default { type: Boolean, default: false }, - nameList: { - type: Array, - default: () => [] - }, - dataList: { - type: Array, - default: () => [] - } + // nameList: { + // type: Array, + // default: () => [] + // }, + // dataList: { + // type: Array, + // default: () => [] + // } }, data() { return { chart: null, - series: [] + nameList: [], + series: [{ + type: 'bar', + data: [], + barWidth: 6 + + }] } }, mounted() { console.log('mounted') console.log('borderRadius: ', this.borderRadius) - - this.series = [ - { - name: this.dataList[0].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[0].topColor }, - { offset: 1, color: this.dataList[0].bottomColor } - ]), - barBorderRadius: this.borderRadius - }, - data: this.dataList[0].data, - barWidth: 6 - }, - { - name: this.dataList[1].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[1].topColor }, - { offset: 1, color: this.dataList[1].bottomColor } - ]), - barBorderRadius: this.borderRadius - }, - data: this.dataList[1].data, - barWidth: 6 - }, - { - name: this.dataList[2].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[2].topColor }, - { offset: 1, color: this.dataList[2].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[2].data, - barWidth: 6 - }, - { - name: this.dataList[3].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[3].topColor }, - { offset: 1, color: this.dataList[3].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[3].data, - barWidth: 6 - }, - { - name: this.dataList[4].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[4].topColor }, - { offset: 1, color: this.dataList[4].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[4].data, - barWidth: 6 - }, - { - name: this.dataList[5].name, - type: 'bar', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: this.dataList[5].topColor }, - { offset: 1, color: this.dataList[5].bottomColor } - ]), - // borderRadius: [5, 5, 0, 0] - barBorderRadius: this.borderRadius - }, - data: this.dataList[5].data, - barWidth: 6 - } - ] - - this.$nextTick(() => { - this.initChart() - }) + // console.log('33333', this.dataList) + // let arr = [] + // this.dataList.forEach(ele => { + // console.log(ele); + // this.series = [] + this.initChart() + // this.$nextTick(() => { + // // this.initChart() + // }) }, beforeDestroy() { if (!this.chart) { @@ -157,9 +83,20 @@ export default { this.chart = null }, methods: { - initChart() { - console.log(1) + initChart(nameList,dataList) { + // console.log(1) this.chart = echarts.init(document.getElementById(this.id)) + if (dataList.length !== 0) { + // this.$set(this.series, "data", dataList); + this.series = [{ + type: 'bar', + data: dataList, + barWidth: 6 + }] + } + if (nameList.length !== 0) { + this.nameList = nameList + } this.chart.setOption({ tooltip: { trigger: 'axis', @@ -216,19 +153,19 @@ export default { }, type: 'value' }, - legend: { - itemHeight: 10, - itemWidth: 10, - x: 'center', // 可设定图例在左、右、居中 - y: 'top', // 可设定图例在上、下、居中 - show: this.showLegend, - data: this.dataList, - right: '1%', - textStyle: { - fontSize: 12 * this.beilv, - color: '#ced1d5' - } - }, + // legend: { + // itemHeight: 10, + // itemWidth: 10, + // x: 'center', // 可设定图例在左、右、居中 + // y: 'top', // 可设定图例在上、下、居中 + // show: this.showLegend, + // data: this.dataList, + // right: '1%', + // textStyle: { + // fontSize: 12 * this.beilv, + // color: '#ced1d5' + // } + // }, series: this.series }) } diff --git a/src/views/OperationalOverview/components/pileBarChart.vue b/src/views/OperationalOverview/components/pileBarChart.vue new file mode 100644 index 00000000..01d7a6b3 --- /dev/null +++ b/src/views/OperationalOverview/components/pileBarChart.vue @@ -0,0 +1,235 @@ + + + + diff --git a/src/views/OperationalOverview/processingBoard.vue b/src/views/OperationalOverview/processingBoard.vue index 76e95645..33f03ab2 100644 --- a/src/views/OperationalOverview/processingBoard.vue +++ b/src/views/OperationalOverview/processingBoard.vue @@ -2,16 +2,16 @@ * @Author: zwq * @Date: 2021-07-19 15:18:30 * @LastEditors: zhp - * @LastEditTime: 2023-12-19 14:25:07 + * @LastEditTime: 2023-12-28 10:22:06 * @Description: -->