From 3da95fed213a21046a55b3174448fa2d09a16a45 Mon Sep 17 00:00:00 2001 From: Fanzink <460995166@qq.com> Date: Sat, 18 Mar 2023 13:58:14 +0530 Subject: [PATCH] =?UTF-8?q?'=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E5=88=86?= =?UTF-8?q?=E6=9E=90/=E4=BA=A7=E5=93=81=E8=B4=A8=E9=87=8F=E5=88=86?= =?UTF-8?q?=E6=9E=90=E5=92=8C=E4=BA=A7=E9=87=8F=E5=88=86=E6=9E=90'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/i18n/en.js | 1 + src/i18n/zh-CN.js | 1 + .../modules/monitoring/productAnalysis.vue | 24 ++- .../modules/monitoring/productQuality.vue | 203 ++++++++++++++---- 4 files changed, 176 insertions(+), 53 deletions(-) diff --git a/src/i18n/en.js b/src/i18n/en.js index 8cbb1a4..536fbca 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -408,6 +408,7 @@ t.pl = {} t.pl.title = 'Product Line' t.pl.id = 'Product Line ID' t.pl.name = 'Product Line Name' +t.pl.sum = 'Sum' t.pl.code = 'Product Line Code' t.pl.status = 'Product Line Status' t.pl.belong = 'Product Line' diff --git a/src/i18n/zh-CN.js b/src/i18n/zh-CN.js index fdb5b20..941d7e0 100644 --- a/src/i18n/zh-CN.js +++ b/src/i18n/zh-CN.js @@ -409,6 +409,7 @@ t.pl = {} t.pl.title = '产线' t.pl.id = '产线ID' t.pl.name = '产线名称' +t.pl.sum = '合计' t.pl.code = '产线编码' t.pl.status = '产线状态' t.pl.belong = '所属产线' diff --git a/src/views/modules/monitoring/productAnalysis.vue b/src/views/modules/monitoring/productAnalysis.vue index 3c66ad2..0ccdb68 100644 --- a/src/views/modules/monitoring/productAnalysis.vue +++ b/src/views/modules/monitoring/productAnalysis.vue @@ -57,15 +57,10 @@ - + - - + + moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count), name })) + { name: i18n.t('pl.sum'), prop: '1' }, + ...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count + 1), name })) /** 这一行无敌的，记一下： 1. '...'是扩展运算符，是ES6的语法，用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。例如 @@ -504,7 +500,8 @@ export default { 7.要在getDataList() 中 this.dataList = [] this.count = 0 - 初始化一下，否则连续按按钮会空 + 初始化一下，否则连续按按钮会空一个 + 8.因为后期加了个"合计"字段，所以++this.count + 1，右移一位 */ ] // console.log('this.tableConfigDynamic', this.tableConfigDynamic) @@ -512,12 +509,14 @@ export default { // this.dataListDynamic = this.parseDynamicData(res.data.data) || [] for (let i = 0; i < res.data.data.length; i++) { this.dataListDynamic[i] = res.data.data[i].records.map((item) => item.outputNum) || [] + this.dataListDynamic[i].unshift(res.data.data[i].sum) this.dataListDynamic[i].unshift(res.data.data[i].records[i].lineName) var json = {} for (var j = 0; j < this.dataListDynamic[i].length; j++) { json[j] = this.dataListDynamic[i][j] } this.dataList.push(json) + // console.log('this.dataList', this.dataList) // this.dataListDynamic[i] =JSON.stringify(this.dataListDynamic[i]) } /** echarts related */ @@ -626,6 +625,11 @@ export default { // this.echartsData4 = this.dataListDynamic[3] // 不抛出老是报shift错误 try { + // 因为又加了“合计”字段，所以再多删除一次 + this.echartsData1.shift() + this.echartsData2.shift() + this.echartsData3.shift() + this.echartsData4.shift() this.echartsData1.shift() this.echartsData2.shift() this.echartsData3.shift() diff --git a/src/views/modules/monitoring/productQuality.vue b/src/views/modules/monitoring/productQuality.vue index 230f56f..e76e90d 100644 --- a/src/views/modules/monitoring/productQuality.vue +++ b/src/views/modules/monitoring/productQuality.vue @@ -55,6 +55,21 @@ +
+ + +
+ + +
+ {{ $t('pl.choose') }} + +
- + @@ -124,6 +139,7 @@ const FakeChart = { }, data() { return { + // selectedBox: new Array(100).fill(true), calcMaxHeight, chart: null, // 新加 @@ -147,12 +163,19 @@ const FakeChart = { type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, + toolbox: { + feature: { + dataView: { show: true, readOnly: false }, + restore: { show: true }, + saveAsImage: { show: true } + } + }, legend: { - orient: 'vertical', - type: 'scroll', - top: 10, - right: 0, - width: '12%', + // orient: 'vertical', + // type: 'scroll', + // top: 10, + // right: 0, + // width: '12%', /** 修复文本太长时显示问题 */ // formatter: function (name) { // return echarts.format.truncateText(name, 120, '14px Microsoft Yahei', '...') @@ -165,6 +188,9 @@ const FakeChart = { }, xAxis: { type: 'category', + axisTick: { + alignWithLabel: true + }, data: [], // axisLine: { // show: true, @@ -187,14 +213,59 @@ const FakeChart = { // data: ['下片1', '上片1', '磨边机1', '设备13', '钢化炉2', '磨边机2', '设备15', '清洗机1', '钢化炉3'] }, - yAxis: { - type: 'value' - }, + yAxis: [ + { + type: 'value', + name: i18n.t('eq.okNum'), + position: 'left', + alignTicks: true, + axisLine: { + show: true, + lineStyle: { + color: '#5470C6' + } + }, + axisLabel: { + // formatter: '{value} pcs' + } + }, + { + type: 'value', + name: i18n.t('eq.nokNum'), + position: 'right', + alignTicks: true, + axisLine: { + show: true, + lineStyle: { + color: '#91CC75' + } + }, + axisLabel: { + // formatter: '{value} pcs' + } + }, + { + type: 'value', + name: i18n.t('eq.passRatePercent'), + position: 'right', + offset: 80, + alignTicks: true, + axisLine: { + show: true, + lineStyle: { + color: '#FAC857' + } + }, + axisLabel: { + formatter: '{value} %' + } + } + ], series: [ // dynamic { name: i18n.t('eq.okNum'), - type: 'line', + type: 'bar', data: [], label: { normal: { @@ -207,7 +278,8 @@ const FakeChart = { }, { name: i18n.t('eq.nokNum'), - type: 'line', + type: 'bar', + yAxisIndex: 1, data: [], label: { normal: { @@ -221,6 +293,7 @@ const FakeChart = { { name: i18n.t('eq.passRatePercent'), type: 'line', + yAxisIndex: 2, data: [], label: { normal: { @@ -243,7 +316,8 @@ const FakeChart = { categories: { handler: function (val, oldVal) { if (val && val !== oldVal) { - this.defaultOpts.xAxis.data.push(...val) + // this.defaultOpts.xAxis.data.push(...val) + this.defaultOpts.xAxis.data = val } }, immediate: true @@ -260,7 +334,8 @@ const FakeChart = { // this.defaultOpts.series[0].data.push 注意 handler: function (val, oldVal) { if (val && val !== oldVal) { - this.defaultOpts.series[0].data.push(...val) + // this.defaultOpts.series[0].data.push(...val) + this.defaultOpts.series[0].data = val } }, immediate: true @@ -268,7 +343,7 @@ const FakeChart = { seriesData2: { handler: function (val, oldVal) { if (val && val !== oldVal) { - this.defaultOpts.series[1].data.push(...val) + this.defaultOpts.series[1].data = val } }, immediate: true @@ -276,7 +351,7 @@ const FakeChart = { passRate: { handler: function (val, oldVal) { if (val && val !== oldVal) { - this.defaultOpts.series[2].data.push(...val) + this.defaultOpts.series[2].data = val } }, immediate: true @@ -329,6 +404,7 @@ export default { components: { BaseTable, SmallTitle, FakeChart }, data() { return { + selectedBox: new Array(100).fill(true), lineIds: [], lineList: [], // tableConfigStatic, @@ -354,6 +430,7 @@ export default { // ] // }, echartCategories: null, + echartRealtime: [], echartCheckTypes: [], interval: null } @@ -369,6 +446,9 @@ export default { this.getDataList() }, 1000 * 5 * 60) }, + beforeMount() { + this.selectedBox = new Array(100).fill(true) + }, deactivated() { if (this.interval) { clearInterval(this.interval) @@ -395,10 +475,16 @@ export default { this.showGraph = value === dict[0] ? false : true }, getDataList() { + // this.echartsData1 = [] + // this.echartsData2 = [] + // this.pass = [] this.showGraph = false this.dataType = i18n.t('table2') this.echartCategories = null this.echartCheckTypes.splice(0) + this.echartRealtime = [] + // 更新下checkbox全选 + this.selectedBox = new Array(100).fill(true) /** 设置默认日期 */ // const startTime = this.datetime[0] || moment().set({ hour: 0, minute: 0, second: 0 }).format('yyyy-MM-DDTHH:mm:ss') // const endTime = this.datetime[1] || moment().set({ hour: 23, minute: 59, second: 59 }).format('yyyy-MM-DDTHH:mm:ss') @@ -442,6 +528,7 @@ export default { this.echartCategories = this.dataListDynamic.map((item) => { return item.equipmentName }) + this.echartRealtime = this.echartCategories // this.parseTableProps(res.data.nameData) // console.log('this.dataListDynamic', this.dataListDynamic) @@ -453,34 +540,34 @@ export default { }) }, - parseTableProps(nameData) { - const subProps = [] - const labelNameMap = new Map() + // parseTableProps(nameData) { + // const subProps = [] + // const labelNameMap = new Map() - // if (nameData.length) { - // /** 处理 nameData */ - // nameData.forEach((item) => { - // if (!labelNameMap.get(item.name)) { - // labelNameMap.set(item.name, 1) - // subProps.push({ name: item.name, prop: item.name }) - // } - // }) - // } + // // if (nameData.length) { + // // /** 处理 nameData */ + // // nameData.forEach((item) => { + // // if (!labelNameMap.get(item.name)) { + // // labelNameMap.set(item.name, 1) + // // subProps.push({ name: item.name, prop: item.name }) + // // } + // // }) + // // } - this.tableConfigDynamic = [ - { type: 'index', width: 100, name: i18n.t('index') }, - { name: i18n.t('eq.sectionName'), prop: 'sectionName' }, - // ...subProps, - { name: i18n.t('eq.equipmentName'), prop: 'equipmentName' }, - { name: i18n.t('eq.okNum'), prop: 'okNum' }, - { name: i18n.t('eq.nokNum'), prop: 'nokNum' }, - { name: i18n.t('eq.passRate'), prop: 'passRate', filter: (val) => (val || val === 0 ? `${val}%` : '-') } - ] + // this.tableConfigDynamic = [ + // { type: 'index', width: 100, name: i18n.t('index') }, + // { name: i18n.t('eq.sectionName'), prop: 'sectionName' }, + // // ...subProps, + // { name: i18n.t('eq.equipmentName'), prop: 'equipmentName' }, + // { name: i18n.t('eq.okNum'), prop: 'okNum' }, + // { name: i18n.t('eq.nokNum'), prop: 'nokNum' }, + // { name: i18n.t('eq.passRate'), prop: 'passRate', filter: (val) => (val || val === 0 ? `${val}%` : '-') } + // ] - /** echarts related */ - // this.echartCategories = subProps.map((item) => item.name) - this.echartCategories = this.dataListDynamic.map((item) => item.name) - }, + // /** echarts related */ + // // this.echartCategories = subProps.map((item) => item.name) + // this.echartCategories = this.dataListDynamic.map((item) => item.name) + // }, // parseDynamicData(data) { // this.echartCheckTypes.splice(0) @@ -516,9 +603,32 @@ export default { // } // }) // }) - this.echartsData1 = this.dataListDynamic.map((item) => item.okNum) - this.echartsData2 = this.dataListDynamic.map((item) => item.nokNum) - this.pass = this.dataListDynamic.map((item) => item.passRate) + + // 新建一个echartRealtime来保存修改checkbox后实时的横坐标数据 + // this.echartRealtime = this.echartCategories + this.echartsData1 = [] + this.echartsData2 = [] + this.pass = [] + // 尝试写个改变checkbox时触发改变this.echartCategories + // console.log('this.echartRealtime1', this.echartRealtime) + // 初始化 + this.echartRealtime = [] + // 根据selectedBox的真假，动态生成横坐标和数值，运用了数组与元素合并 + for (let i = 0; i < this.echartCategories.length; i++) { + if (this.selectedBox[i] == true) { + // console.log('this.echartCategories.slice(i)',this.echartCategories.slice(i)) + // console.log( + // 'this.dataListDynamic.map((item) => item.okNum)', + // this.dataListDynamic.map((item) => item.okNum) + // ) + this.echartRealtime = [...this.echartRealtime, ...this.echartCategories.slice(i, i + 1)] + this.echartsData1 = [...this.echartsData1, this.dataListDynamic.map((item) => item.okNum)[i]] + this.echartsData2 = [...this.echartsData2, this.dataListDynamic.map((item) => item.nokNum)[i]] + this.pass = [...this.pass, this.dataListDynamic.map((item) => item.passRate)[i]] + } + } + // console.log('this.echartRealtime2', this.echartRealtime) + // console.log('this.echartsData1', this.echartsData1) // this.echartsData = result // console.log('result', result) // [ @@ -539,6 +649,13 @@ export default { }).catch((err) => { console.error(err) }) + }, + checkboxChange(val) { + // console.log('val', val) + // console.log('this.selectedBox', this.selectedBox) + this.buildGraphData() + // console.log('this.echartCategories', this.echartCategories) + // console.log('val',val) } } } -- 2.45.2