From ae9b400eae985f6b6f2e33f66ee1575f72675898 Mon Sep 17 00:00:00 2001
From: lyh <925863403@qq.com>
Date: 星期六, 09 八月 2025 00:18:41 +0800
Subject: [PATCH] 添加流程节点
---
src/views/dashboard/EquipmentSignage.vue | 238 +++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 191 insertions(+), 47 deletions(-)
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 1917eca..6fb7ba7 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">
@@ -171,15 +189,22 @@
</dv-border-box-12>
</div>
</div>
+
+ <SignageModal ref="modalRef" :modalVisible="modalVisible" :modalWidth="modalWidth" :modalTitle=modalTitle
+ :modalDataApiUrl="modalDataApiUrl"
+ :modalDataApiParams="modalDataApiParams"
+ @closeModal="modalVisible=false"/>
</div>
</template>
<script>
import signageApi from '@/api/signage'
import moment from 'moment'
+ import SignageModal from './modules/SignageModal'
export default {
name: 'EquipmentSignage',
+ components: { SignageModal },
props: {
productionCode: {
type: String,
@@ -202,18 +227,24 @@
equipmentDetails: {},
buttonList: [
{
- label: '澶囦欢淇℃伅'
+ label: '澶囦欢淇℃伅',
+ pageName: '',
+ modalDataApiUrl: ''
},
{
- label: '淇濆吇璁″垝'
+ label: '淇濆吇璁″垝',
+ pageName: '',
+ modalDataApiUrl: '/eam/equipment/list'
},
{
label: '鎶ヤ慨',
- pageName: 'eam-MalfunctionRepair'
+ pageName: 'eam-MalfunctionRepair',
+ modalDataApiUrl: ''
},
{
label: '璁惧鐝',
- pageName: 'mdc-base-DeviceCalendar'
+ pageName: 'mdc-base-DeviceCalendar',
+ modalDataApiUrl: ''
}
],
lineChart: '',
@@ -231,7 +262,13 @@
},
hideLoadingDelayTime: 500,
isDisplayEquipmentDetails: false,
- isBelongToMdc: true// 鏄惁鍦╩dc璁惧琛ㄤ腑
+ isBelongToMdc: true,// 鏄惁鍦╩dc璁惧琛ㄤ腑
+ modalVisible: false,
+ modalWidth: 1048,
+ modalTitle: '',
+ modalDataApiUrl: '',
+ modalTableColumns: [],
+ modalDataApiParams: {}
}
},
created() {
@@ -258,9 +295,10 @@
if (newVal) this.lineChartWidth = '40%'
else this.lineChartWidth = '65%'
this.$nextTick(() => {
- this.lineChart.resize()
+ if (this.lineChart) this.lineChart.resize()
})
- }
+ },
+ immediate: true
}
},
methods: {
@@ -356,6 +394,66 @@
name: record.pageName,
params: { equipmentId: this.equipmentId }
})
+ } else {
+ this.$refs.modalRef.modalTableColumns = [
+ {
+ title: '#',
+ dataIndex: '',
+ key: 'rowIndex',
+ width: 60,
+ align: 'center',
+ customRender: function(t, r, index) {
+ return parseInt(index) + 1
+ }
+ },
+ {
+ width: 150,
+ align: 'center',
+ title: '璁惧缂栧彿',
+ dataIndex: 'num',
+ key: 'num'
+ },
+ {
+ width: 200,
+ align: 'center',
+ title: '璁惧鍚嶇О',
+ dataIndex: 'name',
+ key: 'name'
+ },
+ {
+ width: 200,
+ align: 'center',
+ title: '璁惧鍨嬪彿',
+ dataIndex: 'model',
+ key: 'model'
+ },
+ {
+ width: 250,
+ align: 'center',
+ title: '瑙勬牸',
+ key: 'specification',
+ dataIndex: 'specification'
+ },
+ {
+ width: 170,
+ align: 'center',
+ title: '涓嬫浜屼繚鏃堕棿',
+ key: 'nextSecondMaintenanceTime',
+ dataIndex: 'nextSecondMaintenanceTime'
+ },
+ {
+ width: 170,
+ align: 'center',
+ title: '涓嬫涓変繚鏃堕棿',
+ key: 'nextThirdMaintenanceTime',
+ dataIndex: 'nextThirdMaintenanceTime'
+ }
+ ]
+ this.modalWidth = 1248
+ this.modalTitle = record.label
+ this.modalDataApiParams = { num: this.equipmentId }
+ this.modalDataApiUrl = record.modalDataApiUrl
+ this.modalVisible = true
}
},
@@ -434,7 +532,7 @@
// 涓绘爣棰樻枃鏈牱寮�
fontSize: 18,
fontWeight: 'normal',
- color: '#1AD8DE',
+ color: '#1AD8DE'
}
},
tooltip: {
@@ -516,11 +614,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鏈圖鏃�') + 'TEEP'
+ option.series[0].name = 'TEEP'
+ 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 +648,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('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)
+ setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)
+ })
this.gaugeChart2.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -564,11 +682,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('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)
+ setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)
+ })
this.gaugeChart3.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -588,11 +716,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
@@ -611,7 +749,7 @@
xAxis: this.lineChartData.dateList,
yAxis: [
{
- name: '鍒╃敤鐜�',
+ name: 'TEEP',
value: this.lineChartData.dataList.map(item => item.utilizationRate)
},
{
@@ -623,7 +761,7 @@
value: this.lineChartData.dataList.map(item => item.overallEquipmentEfficiency)
}
],
- yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼(%)'
+ yAxisName: '鏁村勾搴EEP(%)'
}
let legendData = []
let seriesData = []
@@ -637,6 +775,13 @@
symbolSize: 8,
itemStyle: {
color: colorArr[index1]
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: 'inherit'
+ }
},
lineStyle: {
width: 2
@@ -686,7 +831,7 @@
axisLabel: {
interval: 0,
show: true,
- fontSize: 12,
+ fontSize: 14,
color: '#fff'
// rotate: -30,
},
@@ -707,7 +852,7 @@
nameTextStyle: {
color: '#1AD8DE',
fontSize: 18,
- padding: [0, 0, 0, 110]
+ padding: [0, 0, 0, 120]
},
nameGap: 25,
type: 'value',
@@ -730,12 +875,13 @@
},
{
type: 'value',
- position: 'right',
+ position: 'left',
splitNumber: 5,
max: 100,
axisLabel: {
show: true,
- color: '#fff'
+ color: '#fff',
+ fontSize:14
},
axisLine: {
show: true,
@@ -875,8 +1021,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