From b00ebd6ccb2acb975437af523f00e1f3ea881305 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期三, 15 五月 2024 17:10:51 +0800
Subject: [PATCH] 首页车间级和设备级看板仪表盘图表根据不同类型设置不同仪表盘颜色以及数值范围
---
src/views/dashboard/EquipmentSignage.vue | 124 ++++++++++++++++++++++++++++++-----------
1 files changed, 90 insertions(+), 34 deletions(-)
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 1917eca..9345f9f 100644
--- a/src/views/dashboard/EquipmentSignage.vue
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -67,9 +67,6 @@
<a-descriptions-item label="宸ユ">
{{equipmentInfo.workShopName|equipmentInfoDisplay}}
</a-descriptions-item>
- <a-descriptions-item label="鎿嶄綔宸�">
- {{operationCertificateInfo.realname|equipmentInfoDisplay}}
- </a-descriptions-item>
<a-descriptions-item label="璁惧鐘舵��">
{{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}
</a-descriptions-item>
@@ -79,16 +76,26 @@
<dv-border-box-11 title="鎿嶄綔璇佷俊鎭�" class="info-container" style="flex:2;">
<a-descriptions :column="1">
<a-descriptions-item label="鎿嶄綔璇佺紪鍙�">
- {{operationCertificateInfo.num|equipmentInfoDisplay}}
+ <a-tooltip>
+ <template slot="title">
+ {{operationCertificateInfo.num|equipmentInfoDisplay}}
+ </template>
+ {{operationCertificateInfo.num|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
<a-descriptions-item label="褰撳墠鍛ㄦ湡鍒嗘暟">
{{operationCertificateInfo.currentCycleScore|equipmentInfoDisplay}}
</a-descriptions-item>
- <a-descriptions-item label="鍙戣瘉鏃ユ湡">
- {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}
+ <a-descriptions-item label="鍙戣瘉/鎴鏃ユ湡">
+ <a-tooltip>
+ <template slot="title" v-if="operationCertificateInfo.issueDate||operationCertificateInfo.endTime">
+ {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}/{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
+ </template>
+ {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}/{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
- <a-descriptions-item label="鍛ㄦ湡鎴鏃ユ湡">
- {{operationCertificateInfo.endTime|equipmentInfoDisplay}}
+ <a-descriptions-item label="鎿嶄綔宸�">
+ {{operationCertificateInfo.realname|equipmentInfoDisplay}}
</a-descriptions-item>
</a-descriptions>
</dv-border-box-11>
@@ -96,10 +103,20 @@
<dv-border-box-11 title="缁存姢淇℃伅" class="info-container" style="flex:2;">
<a-descriptions :column="1">
<a-descriptions-item label="涓嬫涓変繚鏃ユ湡">
- {{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
+ <a-tooltip>
+ <template slot="title" v-if="equipmentInfo.nextThirdMaintenanceTime">
+ {{equipmentInfo.nextThirdMaintenanceTime}}
+ </template>
+ {{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
<a-descriptions-item label="涓嬫浜屼繚鏃ユ湡">
- {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
+ <a-tooltip>
+ <template slot="title" v-if="equipmentInfo.nextSecondMaintenanceTime">
+ {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
+ </template>
+ {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
<a-descriptions-item label="鎶�鏈姸鎬�">
{{equipmentInfo.technology_status|equipmentInfoDisplay}}
@@ -113,7 +130,8 @@
<div style="display: flex;justify-content:space-evenly;flex: 1">
<div style="width: 45%;" class="info-card-container">
<div class="info-card-title">鏈湀鎶ヤ慨娆℃暟</div>
- <div class="info-card-value" style="color: #EAC910">{{equipmentInfo.repairCount|equipmentInfoDisplay}}</div>
+ <div class="info-card-value" style="color: #EAC910">{{equipmentInfo.repairCount|equipmentInfoDisplay}}
+ </div>
</div>
<div style="width: 45%;" class="info-card-container">
@@ -434,7 +452,7 @@
// 涓绘爣棰樻枃鏈牱寮�
fontSize: 18,
fontWeight: 'normal',
- color: '#1AD8DE',
+ color: '#1AD8DE'
}
},
tooltip: {
@@ -516,11 +534,21 @@
/* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
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)
- setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)
+
+ 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)
+ setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)
+ })
this.gaugeChart1.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -540,11 +568,21 @@
/* 缁樺埗寮�鍔ㄧ巼浠〃鐩樺浘琛� */
drawGaugeChart2(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.startRate]
- this.gaugeChart2.setOption(option, true)
- setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)
+
+ 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.startRate]
+ this.gaugeChart2.setOption(option, true)
+ setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)
+ })
this.gaugeChart2.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -564,11 +602,21 @@
/* 缁樺埗寮�鏈虹巼浠〃鐩樺浘琛� */
drawGaugeChart3(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.openRate]
- this.gaugeChart3.setOption(option, true)
- setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)
+
+ 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.openRate]
+ this.gaugeChart3.setOption(option, true)
+ setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)
+ })
this.gaugeChart3.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -588,11 +636,21 @@
/* 缁樺埗OEE浠〃鐩樺浘琛� */
drawGaugeChart4(opt) {
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)
- setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)
+
+ 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)
+ setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)
+ })
this.gaugeChart4.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -875,8 +933,6 @@
padding-bottom: 25px;
white-space: nowrap;
overflow: hidden;
- -ms-text-overflow: ellipsis;
- text-overflow: ellipsis;
}
/deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {
--
Gitblit v1.9.3