From b00ebd6ccb2acb975437af523f00e1f3ea881305 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期三, 15 五月 2024 17:10:51 +0800
Subject: [PATCH] 首页车间级和设备级看板仪表盘图表根据不同类型设置不同仪表盘颜色以及数值范围
---
src/views/dashboard/WorkshopSectionSignage.vue | 92 ++++++++++++++++++++++++++++++++-------------
1 files changed, 65 insertions(+), 27 deletions(-)
diff --git a/src/views/dashboard/WorkshopSectionSignage.vue b/src/views/dashboard/WorkshopSectionSignage.vue
index e967cf7..d552596 100644
--- a/src/views/dashboard/WorkshopSectionSignage.vue
+++ b/src/views/dashboard/WorkshopSectionSignage.vue
@@ -805,7 +805,7 @@
// 涓绘爣棰樻枃鏈牱寮�
fontSize: 18,
fontWeight: 'normal',
- color: '#1AD8DE',
+ color: '#1AD8DE'
}
},
tooltip: {
@@ -859,8 +859,8 @@
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: [ //琛ㄧ洏棰滆壊
[0.3, '#F56436'],//0-30%澶勭殑棰滆壊
- [0.7, '#FFFF40'],//30%-60%澶勭殑棰滆壊
- [1, '#0FC61A']//90%-100%澶勭殑棰滆壊
+ [0.6, '#FFFF40'],//30%-60%澶勭殑棰滆壊
+ [1, '#0FC61A']//60%-100%澶勭殑棰滆壊
],
width: 15//琛ㄧ洏瀹藉害
}
@@ -888,11 +888,22 @@
/* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
drawGaugeChart1(opt) {
const option = Object.assign({}, opt)
- option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + `鍒╃敤鐜嘸
- option.series[0].name = '鍒╃敤鐜�'
- option.series[0].data = [this.gaugeChartData.utilizationRate]
- this.gaugeChart1.setOption(option, true)
- this.gaugeChart1.hideLoading()
+
+ signageApi.getGaugeColorByTypeApi('lyl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + `鍒╃敤鐜嘸
+ option.series[0].name = '鍒╃敤鐜�'
+ option.series[0].data = [this.gaugeChartData.utilizationRate]
+ this.gaugeChart1.setOption(option, true)
+ this.gaugeChart1.hideLoading()
+ })
+
this.gaugeChart1.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -911,13 +922,22 @@
/* 缁樺埗寮�鍔ㄧ巼浠〃鐩樺浘琛� */
drawGaugeChart2(opt) {
- this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
const option = Object.assign({}, opt)
- option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鍔ㄧ巼'
- option.series[0].name = '寮�鍔ㄧ巼'
- option.series[0].data = [this.gaugeChartData.startRate]
- this.gaugeChart2.setOption(option, true)
- this.gaugeChart2.hideLoading()
+
+ signageApi.getGaugeColorByTypeApi('kdl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鍔ㄧ巼'
+ option.series[0].name = '寮�鍔ㄧ巼'
+ option.series[0].data = [this.gaugeChartData.startRate]
+ this.gaugeChart2.setOption(option, true)
+ this.gaugeChart2.hideLoading()
+ })
this.gaugeChart2.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -936,13 +956,22 @@
/* 缁樺埗寮�鏈虹巼浠〃鐩樺浘琛� */
drawGaugeChart3(opt) {
- this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
const option = Object.assign({}, opt)
- option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鏈虹巼'
- option.series[0].name = '寮�鏈虹巼'
- option.series[0].data = [this.gaugeChartData.openRate]
- this.gaugeChart3.setOption(option, true)
- this.gaugeChart3.hideLoading()
+
+ signageApi.getGaugeColorByTypeApi('kdl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鏈虹巼'
+ option.series[0].name = '寮�鏈虹巼'
+ option.series[0].data = [this.gaugeChartData.openRate]
+ this.gaugeChart3.setOption(option, true)
+ this.gaugeChart3.hideLoading()
+ })
this.gaugeChart3.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -961,13 +990,22 @@
/* 缁樺埗OEE浠〃鐩樺浘琛� */
drawGaugeChart4(opt) {
- this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
const option = Object.assign({}, opt)
- option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE`
- option.series[0].name = 'OEE'
- option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
- this.gaugeChart4.setOption(option, true)
- this.gaugeChart4.hideLoading()
+
+ signageApi.getGaugeColorByTypeApi('lyl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE`
+ option.series[0].name = 'OEE'
+ option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
+ this.gaugeChart4.setOption(option, true)
+ this.gaugeChart4.hideLoading()
+ })
this.gaugeChart4.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -994,7 +1032,7 @@
// 涓绘爣棰樻枃鏈牱寮�
fontSize: 18,
fontWeight: 'normal',
- color: '#1AD8DE',
+ color: '#1AD8DE'
}
},
tooltip: {
--
Gitblit v1.9.3