From 709b1cb4e19f7ee0b12fe2cc84b5f77f1c530b13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Tue, 3 Dec 2024 13:23:15 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF=E5=9C=B0?= =?UTF-8?q?=E5=9D=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/board/production/secondFloor.vue | 749 +++++++++++++----- 1 file changed, 563 insertions(+), 186 deletions(-) diff --git a/hw-ui/src/views/board/production/secondFloor.vue b/hw-ui/src/views/board/production/secondFloor.vue index 31a958dc..68d3f1b4 100644 --- a/hw-ui/src/views/board/production/secondFloor.vue +++ b/hw-ui/src/views/board/production/secondFloor.vue @@ -1,30 +1,83 @@ @@ -63,17 +129,16 @@ export default { completeAmount: [0, 0, 0, 0], diff: [0, 0, 0, 0] }, - time: parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}'), title: [ - '工序生产进度', - '工序名称对比', + '工单计划', + '小时产量', '七日产量对比', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ' + '粉尘数据走势', + '设备时长统计', + '计划数量:', + '完成数量:', + '差异值:', + '产线状态:' ], titlePosition: [ { @@ -85,7 +150,7 @@ export default { left: 75 }, { - top: 70.3, + top: 63, left: 5.5 }, { @@ -127,14 +192,13 @@ export default { } }, mounted() { - setInterval(() => { - this.time = parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}') - }, 1000) this.getData() window.onresize = () => { this.$refs.chart1.chart.resize() + this.$refs.chart2.chart.resize() this.$refs.chart3.chart.resize() + this.$refs.chart4.chart.resize() } }, methods: { @@ -151,81 +215,117 @@ export default { } }) }) - this.$refs.chart1.setData({ - tooltip: {}, - radar: { - indicator: [ - { name: '打磨', max: 6500 }, - { name: '折弯', max: 16000 }, - { name: '组装', max: 30000 }, - { name: '下料', max: 38000 }, - { name: '机加', max: 52000 }, - { name: '1', max: 25000 } - ] - }, - series: [ - { - name: '时间', - type: 'radar', - // areaStyle: {normal: {}}, - data: [ - { - value: [4300, 10000, 28000, 35000, 50000, 19000], - name: '时间' - } - ] - } - ] + selectLatestWorkOrder().then(e => { + this.topData.planAmount = [...[0, 0, 0, 0], ...(e.data.planAmount || 0).toString().split('')].slice(-4) + this.topData.completeAmount = [...[0, 0, 0, 0], ...(e.data.completeAmount || 0).toString().split('')].slice(-4) + this.topData.diff = [...[0, 0, 0, 0], ...Math.abs((parseFloat(e.data.planAmount) - parseFloat(e.data.completeAmount)) || 0).toString().split('')].slice(-4) }) - this.$refs.chart3.setData({ - grid: { - top: 30, - left: '2%', - right: '5%', - bottom: '2%', - containLabel: true - }, - legend: { - textStyle: { - color: '#fff' - } - }, - - tooltip: { - trigger: 'axis' - }, - xAxis: { - type: 'category', - data: [1, 2, 3], - axisLabel: { - margin: 10, - color: '#ffffff63' + getLineStatus().then(e => { + this.LineStatus = e.msg === 'True' + }) + getHourProduction().then(e => { + this.$refs.chart1.setData({ + tooltip: { + trigger: 'axis', + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' + } }, - axisLine: { - show: false + grid: { + left: '0', + right: '4%', + bottom: '0', + top: 20, + containLabel: true }, - axisTick: { - show: true, - lineStyle: { - color: '#ffffff1f' + xAxis: { + type: 'category', + data: e.data.map(v => v.hour), + axisLine: { + lineStyle: { + color: 'white' + } + }, + axisLabel: { + // interval: 0, + // rotate: 40, + textStyle: { + fontFamily: 'Microsoft YaHei' + } } }, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: '#ffffff1f' - } - } - }, - yAxis: [ - { + + yAxis: { type: 'value', + axisLine: { + show: false, + lineStyle: { + color: 'white' + } + }, + splitLine: { + show: false + }, + axisLabel: {} + }, + series: [ + { + name: '数量', + label: { + normal: { + show: true, + position: 'top', + textStyle: { + color: '#a8aab0', + fontStyle: 'normal', + fontFamily: '微软雅黑', + fontSize: 0.75 * vw + } + } + }, + type: 'bar', + barWidth: '30%', + barMaxWidth: 50, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#39ffff' + }, + { + offset: 1, + color: '#5affa6' + } + ]) + } + }, + data: e.data.map(v => v.amount) + } + ] + }) + }) + getDayProduction().then(e => { + this.$refs.chart2.setData({ + grid: { + top: 30, + left: '2%', + right: '5%', + bottom: '2%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: e.data.map(v => v.day), axisLabel: { margin: 10, color: '#ffffff63' }, - + axisLine: { + show: false + }, axisTick: { show: true, lineStyle: { @@ -233,53 +333,376 @@ export default { } }, splitLine: { - show: true, + show: false, lineStyle: { type: 'dashed', color: '#ffffff1f' } + } + }, + yAxis: [ + { + type: 'value', + axisLabel: { + margin: 10, + color: '#ffffff63' + }, + + axisTick: { + show: true, + lineStyle: { + color: '#ffffff1f' + } + }, + splitLine: { + show: false, + lineStyle: { + type: 'dashed', + color: '#ffffff1f' + } + }, + axisLine: { + lineStyle: { + color: '#fff', + width: 2 + } + } + } + ], + series: [ + { + name: '产量', + type: 'line', + smooth: true, //是否平滑曲线显示 + showAllSymbol: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + normal: { + color: '#fff' // 线条颜色 + } + }, + label: { + show: true, + position: 'top', + textStyle: { + color: '#fff' + } + }, + itemStyle: { + color: 'red', + borderColor: '#fff', + borderWidth: 3 + }, + tooltip: { + show: false + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: '#eb64fb' + }, + { + offset: 1, + color: '#3fbbff0d' + } + ], + false + ) + } + }, + data: e.data.map(v => v.instock_amount) + } + ] + }) + }) + dustAnalysis().then(e => { + this.$refs.chart3.setData({ + grid: { + top: 30, + left: '2%', + right: '5%', + bottom: '2%', + containLabel: true + }, + legend: { + textStyle: { + color: '#fff' + } + }, + + tooltip: { + trigger: 'axis' + }, + xAxis: { + type: 'category', + data: e.data.map(v => parseTime(v.recodeTime)), + axisLabel: { + margin: 10, + color: '#ffffff63' }, axisLine: { + show: false + }, + axisTick: { + show: true, lineStyle: { - color: '#fff', - width: 2 - } - } - } - ], - series: [ - { - name: '1', - type: 'line', - smooth: true, //是否平滑曲线显示 - showAllSymbol: true, - symbol: 'circle', - symbolSize: 6, - lineStyle: { - normal: { - color: '#fff' // 线条颜色 + color: '#ffffff1f' } }, - label: { + splitLine: { show: true, - position: 'top', - textStyle: { - color: '#fff' + lineStyle: { + type: 'dashed', + color: '#ffffff1f' } + } + }, + yAxis: [ + { + type: 'value', + axisLabel: { + margin: 10, + color: '#ffffff63' + }, + + axisTick: { + show: true, + lineStyle: { + color: '#ffffff1f' + } + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#ffffff1f' + } + }, + axisLine: { + lineStyle: { + color: '#fff', + width: 2 + } + } + } + ], + series: [ + { + name: 'pm1', + type: 'line', + smooth: true, //是否平滑曲线显示 + showAllSymbol: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + normal: { + color: '#fff' // 线条颜色 + } + }, + label: { + show: true, + position: 'top', + textStyle: { + color: '#fff' + } + }, + itemStyle: { + color: 'red', + borderColor: '#fff', + borderWidth: 3 + }, + tooltip: { + // show: false, + }, + data: e.data.map(v => v.pm1) }, - itemStyle: { - color: 'red', - borderColor: '#fff', - borderWidth: 3 - }, - tooltip: { - // show: false, + { + name: 'pm2', + type: 'line', + smooth: true, //是否平滑曲线显示 + showAllSymbol: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + normal: { + color: '#f0f' // 线条颜色 + } + }, + label: { + show: true, + position: 'top', + textStyle: { + color: '#fff' + } + }, + itemStyle: { + color: 'red', + borderColor: '#fff', + borderWidth: 3 + }, + tooltip: { + // show: false, + }, + data: e.data.map(v => v.pm2) }, - data: [1, 2, 3] - } - ] + { + name: 'pm10', + type: 'line', + smooth: true, //是否平滑曲线显示 + showAllSymbol: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + normal: { + color: '#ff0' // 线条颜色 + } + }, + label: { + show: true, + position: 'top', + textStyle: { + color: '#fff' + } + }, + itemStyle: { + color: 'red', + borderColor: '#fff', + borderWidth: 3 + }, + tooltip: { + // show: false, + }, + data: e.data.map(v => v.pm10) + } + ] + }) }) + deviceTimeCount().then(e => { + console.log(e) + this.$refs.chart4.setData({ + grid: { + top: 30, + left: '2%', + right: '5%', + bottom: '2%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: e.data.map(v => parseTime(v.hour)), + axisLabel: { + margin: 10, + color: '#ffffff63' + }, + axisLine: { + show: false + }, + axisTick: { + show: true, + lineStyle: { + color: '#ffffff1f' + } + }, + splitLine: { + show: false, + lineStyle: { + type: 'dashed', + color: '#ffffff1f' + } + } + }, + yAxis: [ + { + type: 'value', + axisLabel: { + margin: 10, + color: '#ffffff63' + }, + axisTick: { + show: true, + lineStyle: { + color: '#ffffff1f' + } + }, + splitLine: { + show: false, + lineStyle: { + type: 'dashed', + color: '#ffffff1f' + } + }, + axisLine: { + lineStyle: { + color: '#fff', + width: 2 + } + } + } + ], + series: [ + { + name: '产量', + type: 'line', + smooth: true, //是否平滑曲线显示 + showAllSymbol: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + normal: { + color: '#fff' // 线条颜色 + } + }, + label: { + show: true, + position: 'top', + textStyle: { + color: '#fff' + } + }, + itemStyle: { + color: 'red', + borderColor: '#fff', + borderWidth: 3 + }, + tooltip: { + show: false + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: '#eb64fb' + }, + { + offset: 1, + color: '#3fbbff0d' + } + ], + false + ) + } + }, + data: e.data.map(v => v.timeCount) + } + ] + }) + }) } } } @@ -287,7 +710,7 @@ export default {