From e081f232138b318338ffca07e7c9fcd941ac20b4 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 12 四月 2024 09:54:17 +0800
Subject: [PATCH] 1、设备综合效率分析以及设备加工工件报表页面表格高度设置为页面进入时即可拖动水平滚动条的高度 2、首页 （1）OEE标题增加月份展示，利用率等效率标题增加日期展示 （2）公司及车间级看板单击OEE车间图表跳转至设备综合效率分析页面并根据唯一编号筛选页面对应数据 （3）工段级看板单击设备效率统计仪表盘图标跳转至统计分析页面并根据唯一编号筛选页面对应数据 （4）调整折线图数据展示维度，通过当前工段下各个设备前7天的利用率、开动率和开机率轮播展示
---
src/views/dashboard/WorkshopSectionSignage.vue | 133 +++++++++++++++++++++++++++++++++++++------
1 files changed, 113 insertions(+), 20 deletions(-)
diff --git a/src/views/dashboard/WorkshopSectionSignage.vue b/src/views/dashboard/WorkshopSectionSignage.vue
index e5bf1e1..3a76eb1 100644
--- a/src/views/dashboard/WorkshopSectionSignage.vue
+++ b/src/views/dashboard/WorkshopSectionSignage.vue
@@ -151,10 +151,12 @@
gaugeChart2: '',
gaugeChart3: '',
gaugeChart4: '',
- gaugeChartData1: [],
- gaugeChartData2: [],
- gaugeChartData3: [],
- gaugeChartData4: [],
+ gaugeChartData: {
+ utilizationRate: 0,
+ startRate: 0,
+ openRate: 0,
+ overallEquipmentEfficiency: 0
+ },
barChart: '',
barChartData: [],
equipmentId: ''
@@ -168,6 +170,7 @@
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
+ if (this.lineChartCarouselTime) clearInterval(this.lineChartCarouselTime)
},
methods: {
getChartDataByApi() {
@@ -176,6 +179,7 @@
this.getRunningStateDataByApi()
this.getMonthMaintenanceNumByApi()
this.getLineChartDataByApi()
+ this.getGaugeChartDataByApi()
this.getBarChartDataByApi()
},
@@ -247,10 +251,20 @@
})
},
+ /* 璋冪敤鎺ュ彛鑾峰彇璁惧鏁堢巼缁熻 */
+ getGaugeChartDataByApi() {
+ signageApi.getEquipmentEfficiencyStatisticsApi(this.productionCode)
+ .then(res => {
+ console.log('res=', res)
+ if (res.success) this.gaugeChartData = res.result
+ this.drawGaugeChart(res.result.productionId)
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇涓婃湀OEE */
getBarChartDataByApi() {
signageApi.getEquipmentOEEMonthStatisticsApi(this.productionCode)
.then(res => {
- console.log('res=', res)
if (res.success) {
this.barChartData = res.result.map(item => {
return {
@@ -518,8 +532,20 @@
/* 缁樺埗鎶樼嚎鍥� */
drawLineChart() {
this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
+ this.lineChartData.equipmentIdList.forEach(item => {
+ if (!this.lineChartData.dataList.map(item => item.equipmentId).includes(item)) {
+ const equipmentIdObj = {
+ equipmentId: item,
+ openRate: 0,
+ startRate: 0,
+ utilizationRate: 0
+ }
+ this.lineChartData.dataList.push(equipmentIdObj)
+ }
+ })
+ const equipmentIdList = this.lineChartData.dataList.map(item => item.equipmentId)
const newData = {
- xAxis: this.lineChartData.dateList,
+ xAxis: equipmentIdList,
yAxis: [
{
name: '鍒╃敤鐜�',
@@ -664,14 +690,23 @@
}
}
],
- series: seriesData
- // dataZoom: {
- // show: false,
- // startValue: 0, // 浠庡ご寮�濮嬨��
- // endValue: 5 // 涓�娆℃�у睍绀哄嚑涓�
- // }
+ series: seriesData,
+ dataZoom: {
+ show: false,
+ startValue: 0, // 浠庡ご寮�濮嬨��
+ endValue: 6 // 涓�娆℃�у睍绀哄嚑涓�
+ }
}
this.lineChart.setOption(option, true)
+
+ if (this.lineChartData.equipmentIdList.length <= 7) return
+ this.lineChartCarouselTime = setInterval(() => {
+ newData.xAxis.push(newData.xAxis.shift())
+ newData.yAxis.forEach(item => item.value.push(item.value.shift()))
+ this.$nextTick(() => {
+ this.lineChart.setOption(option, true)
+ })
+ }, 3000)
},
/* 缁樺埗浠〃鐩樺浘琛� */
@@ -691,6 +726,7 @@
}
},
tooltip: {
+ trigger: 'item',
formatter: params => {
return params.seriesName + '锛�' + params.value + '%'
}
@@ -770,40 +806,96 @@
drawGaugeChart1(opt) {
this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
const option = Object.assign({}, opt)
- option.title.text = '鍒╃敤鐜�'
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + `鍒╃敤鐜嘸
option.series[0].name = '鍒╃敤鐜�'
- option.series[0].data = [52]
+ option.series[0].data = [this.gaugeChartData.utilizationRate]
this.gaugeChart1.setOption(option, true)
+
+ this.gaugeChart1.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: false,
+ productionId: this.gaugeChartData.productionId,
+ tierName: this.gaugeChartData.productionName
+ }
+ })
+ }
+ })
},
/* 缁樺埗寮�鍔ㄧ巼浠〃鐩樺浘琛� */
drawGaugeChart2(opt) {
this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
const option = Object.assign({}, opt)
- option.title.text = '寮�鍔ㄧ巼'
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鍔ㄧ巼'
option.series[0].name = '寮�鍔ㄧ巼'
- option.series[0].data = [21]
+ option.series[0].data = [this.gaugeChartData.startRate]
this.gaugeChart2.setOption(option, true)
+
+ this.gaugeChart2.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: false,
+ productionId: this.gaugeChartData.productionId,
+ tierName: this.gaugeChartData.productionName
+ }
+ })
+ }
+ })
},
/* 缁樺埗寮�鏈虹巼浠〃鐩樺浘琛� */
drawGaugeChart3(opt) {
this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
const option = Object.assign({}, opt)
- option.title.text = '寮�鏈虹巼'
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鏈虹巼'
option.series[0].name = '寮�鏈虹巼'
- option.series[0].data = [74]
+ option.series[0].data = [this.gaugeChartData.openRate]
this.gaugeChart3.setOption(option, true)
+
+ this.gaugeChart3.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: false,
+ productionId: this.gaugeChartData.productionId,
+ tierName: this.gaugeChartData.productionName
+ }
+ })
+ }
+ })
},
/* 缁樺埗OEE浠〃鐩樺浘琛� */
drawGaugeChart4(opt) {
this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
const option = Object.assign({}, opt)
- option.title.text = 'OEE'
+ option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE`
option.series[0].name = 'OEE'
- option.series[0].data = [88]
+ option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
this.gaugeChart4.setOption(option, true)
+
+ this.gaugeChart4.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: false,
+ productionId: this.gaugeChartData.productionId,
+ tierName: this.gaugeChartData.productionName
+ }
+ })
+ }
+ })
},
/* 缁樺埗鍗曟煴鍥� */
@@ -932,6 +1024,7 @@
}
option.title.text = `${moment().subtract(1, 'months').format('M')}鏈圤EE`
this.barChart.setOption(option, true)
+
if (this.barChartData.length <= 6) return
this.barChartCarouselTime = setInterval(() => {
this.barChartData.push(this.barChartData.shift())
--
Gitblit v1.9.3