From 28189102d735bfc2c41720d1ef292bd9024b49f2 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期四, 18 四月 2024 11:21:01 +0800
Subject: [PATCH] 1、首页 （1）设备级看板单击设备效率统计仪表盘图标跳转至统计分析页面并根据唯一编号筛选页面对应数据 （2）设备级看板点击设备班次按钮跳转至工作日历页面并根据设备编号筛选页面对应数据 （3）增加所有层级看板图表数据加载动画 （4）公司级以及分厂级看板利用率胶囊以及上月OEE车间单柱图表轴线刻度最大值采用动态设置方式而非固定100% （5）工段级看板上月OEE单柱图表轴线刻度最大值采用动态设置方式而非固定100% （6）工段级看板单击前7天利用率图表跳转至统计分析页面并根据唯一编号筛选页面对应数据 （7）工段级看板单击上月OEE图表跳转至设备综合效率分析页面并根据唯一编号筛选页面对应数据 2、调整全局导航栏页签间距，以便能在不超出导航栏的情况下同时放置更多页面页签
---
src/views/dashboard/EquipmentSignage.vue | 356 +++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 236 insertions(+), 120 deletions(-)
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 9b445fa..9c24579 100644
--- a/src/views/dashboard/EquipmentSignage.vue
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -21,9 +21,10 @@
<th>璁惧缂栧彿</th>
<th>鍨嬪彿</th>
</tr>
- <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)">
+ <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)"
+ :style="{backgroundColor:equipmentId===item.equipmentId?'#1D94D4':''}">
<td>{{item.equipmentId}}</td>
- <td>{{item.equipmentType}}</td>
+ <td>{{item.equipmentModel}}</td>
</tr>
</table>
</div>
@@ -68,6 +69,9 @@
</a-descriptions-item>
<a-descriptions-item label="鎿嶄綔宸�">
{{equipmentInfo.operator}}
+ </a-descriptions-item>
+ <a-descriptions-item label="璁惧鐘舵��">
+ {{equipmentInfo.equipmentStatus}}
</a-descriptions-item>
</a-descriptions>
</dv-border-box-11>
@@ -119,10 +123,10 @@
</div>
<div style="display: flex;justify-content: space-evenly;font-size: 20px;padding: 0 50px">
- <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">澶囦欢淇℃伅</dv-decoration-11>
- <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">淇濆吇璁″垝</dv-decoration-11>
- <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">鎶ヤ慨</dv-decoration-11>
- <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">璁惧鐝</dv-decoration-11>
+ <div v-for="(item,index) in buttonList" :key="index" @click="navigateToPage(item)"
+ style="width: 200px;height: 70px;margin: 0 10px;cursor: pointer">
+ <dv-decoration-11>{{item.label}}</dv-decoration-11>
+ </div>
</div>
</div>
</dv-border-box-12>
@@ -183,62 +187,18 @@
type: String,
default: ''
},
+ workshopSectionProductionCode: {
+ type: String,
+ default: ''
+ },
userType: {
type: Number
}
},
data() {
return {
- equipmentList: [
- {
- equipmentId: '2140223',
- equipmentType: 'CV4160'
- },
- {
- equipmentId: '2140224',
- equipmentType: 'CV4161'
- },
- {
- equipmentId: '2140225',
- equipmentType: 'CV4162'
- },
- {
- equipmentId: '2140226',
- equipmentType: 'CV4163'
- },
- {
- equipmentId: '2140227',
- equipmentType: 'CV4164'
- },
- {
- equipmentId: '2140227',
- equipmentType: 'CV4165'
- },
- {
- equipmentId: '2140228',
- equipmentType: 'CV4166'
- },
- {
- equipmentId: '2140229',
- equipmentType: 'CV4167'
- },
- {
- equipmentId: '2140230',
- equipmentType: 'CV4168'
- },
- {
- equipmentId: '2140231',
- equipmentType: 'CV4169'
- },
- {
- equipmentId: '2140232',
- equipmentType: 'CV4170'
- },
- {
- equipmentId: '2140233',
- equipmentType: 'CV4171'
- }
- ],
+ equipmentId: '',
+ equipmentList: [],
equipmentInfo: {
equipmentId: '2511563154',
ABCSymbol: '3312321421',
@@ -250,45 +210,138 @@
standard: '鏃�',
depart: '杞ф満涓績',
workshopSection: '407涓�宸ユ',
- operator: 'admin'
+ operator: 'admin',
+ equipmentStatus: 0
},
+ buttonList: [
+ {
+ label: '澶囦欢淇℃伅'
+ },
+ {
+ label: '淇濆吇璁″垝'
+ },
+ {
+ label: '鎶ヤ慨'
+ },
+ {
+ label: '璁惧鐝',
+ pageName: 'mdc-base-DeviceCalendar'
+ }
+ ],
lineChart: '',
lineChartData: [],
gaugeChart1: '',
gaugeChart2: '',
gaugeChart3: '',
gaugeChart4: '',
- gaugeChartData1: [],
- gaugeChartData2: [],
- gaugeChartData3: [],
- gaugeChartData4: [],
- equipmentId: '2140223'
+ gaugeChartData: {
+ utilizationRate: 0,
+ startRate: 0,
+ openRate: 0,
+ overallEquipmentEfficiency: 0
+ },
+ hideLoadingDelayTime: 500
}
+ },
+ created() {
+ this.equipmentId = this.productionCode
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
- this.drawCharts()
- this.getChartDataByApi()
- },
- activated() {
- this.handleWindowResize()
+ this.getEquipmentListByApi()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
},
methods: {
- selectEquipment(record) {
- this.equipmentId = record.equipmentId
+ getEquipmentListByApi() {
+ // 棣栭〉涓�杩涘叆鍗宠澶囩骇鎴栧伐娈电骇鏃讹紝workshopSectionProductionCode涓虹┖锛岄粯璁ゆ煡璇㈢涓�涓溅闂翠腑绗竴涓伐娈典笅鐨勮澶囧垪琛�
+ signageApi.getEquipmentListApi(this.workshopSectionProductionCode)
+ .then(res => {
+ if (res.success) {
+ this.equipmentList = res.result
+ if (!this.productionCode && this.equipmentList.length > 0) this.equipmentId = this.equipmentList[0].equipmentId
+ }
+ })
+ .finally(() => {
+ // 姝ゅ涓轰繚璇乪quipmentId姝ｅ父璧嬪�煎悗鍐嶈皟鐢ㄦ帴鍙ｈ幏鍙栧浘琛ㄦ暟鎹紙寮傛锛�
+ this.getChartDataByApi()
+ })
},
getChartDataByApi() {
-
+ this.getGaugeChartDataByApi()
+ this.getLineChartDataByApi()
},
- /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
- drawCharts() {
- this.drawGaugeChart()
- this.drawLineChart()
+ selectEquipment(record) {
+ if (record.equipmentId === this.equipmentId) return
+ this.equipmentId = record.equipmentId
+ this.getChartDataByApi()
+ },
+
+ navigateToPage(record) {
+ if (record.pageName) {
+ this.$router.push({
+ name: record.pageName,
+ params: { equipmentId: this.equipmentId }
+ })
+ }
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇璁惧鏁堢巼缁熻 */
+ getGaugeChartDataByApi() {
+ this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
+ this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
+ this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
+ this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
+ this.gaugeChart1.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart2.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart3.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart4.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+
+ signageApi.getEquipmentLevelEfficiencyStatisticsApi(this.equipmentId)
+ .then(res => {
+ if (res.success) this.gaugeChartData = res.result
+ this.drawGaugeChart()
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇鏁村勾搴﹀埄鐢ㄧ巼 */
+ getLineChartDataByApi() {
+ this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
+ this.lineChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+
+ signageApi.getEquipmentAnnualEfficiencyStatisticsApi(this.equipmentId)
+ .then(res => {
+ if (res.success) this.lineChartData = res.result
+ this.drawLineChart()
+ })
},
/* 缁樺埗浠〃鐩樺浘琛� */
@@ -303,12 +356,14 @@
// 涓绘爣棰樻枃鏈牱寮�
fontSize: 18,
fontWeight: 'normal',
- color: '#00A8AC',
+ color: '#1AD8DE',
fontWeight: 'bold'
}
},
tooltip: {
- formatter: '{a} <br/>{b} : {c}%'
+ formatter: params => {
+ return params.seriesName + '锛�' + params.value + '%'
+ }
},
grid: {
left: '1%',
@@ -318,7 +373,7 @@
},
series: [
{
- name: '鍒╃敤鐜�',
+ name: '',
type: 'gauge',
radius: '80%',
center: ['50%', '60%'], // 榛樿鍏ㄥ眬灞呬腑
@@ -354,9 +409,9 @@
axisLine: {
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: [ //琛ㄧ洏棰滆壊
- [0.3, '#E7781E'],//0-30%澶勭殑棰滆壊
- [0.7, '#C5C039'],//30%-60%澶勭殑棰滆壊
- [1, '#21C77F']//90%-100%澶勭殑棰滆壊
+ [0.3, '#F56436'],//0-30%澶勭殑棰滆壊
+ [0.7, '#FFFF40'],//30%-60%澶勭殑棰滆壊
+ [1, '#0FC61A']//90%-100%澶勭殑棰滆壊
],
width: 15//琛ㄧ洏瀹藉害
}
@@ -371,7 +426,7 @@
}
}
},
- data: [{ value: 100 }]
+ data: []
}
]
}
@@ -383,56 +438,115 @@
/* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
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 = [this.gaugeChartData.utilizationRate]
this.gaugeChart1.setOption(option, true)
+ setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)
+
+ 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: true,
+ productionId: this.equipmentId,
+ tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
+ }
+ })
+ }
+ })
},
/* 缁樺埗寮�鍔ㄧ巼浠〃鐩樺浘琛� */
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 = [this.gaugeChartData.startRate]
this.gaugeChart2.setOption(option, true)
+ setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)
+
+ 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: true,
+ productionId: this.equipmentId,
+ tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
+ }
+ })
+ }
+ })
},
/* 缁樺埗寮�鏈虹巼浠〃鐩樺浘琛� */
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 = [this.gaugeChartData.openRate]
this.gaugeChart3.setOption(option, true)
+ setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)
+
+ 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: true,
+ productionId: this.equipmentId,
+ tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
+ }
+ })
+ }
+ })
},
/* 缁樺埗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 = [this.gaugeChartData.overallEquipmentEfficiency]
this.gaugeChart4.setOption(option, true)
+ setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)
+
+ 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-OEEAnalysis',
+ params: { isEquipment: true, productionId: this.equipmentId }
+ })
+ }
+ })
},
/* 缁樺埗鎶樼嚎鍥� */
drawLineChart() {
- this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
const newData = {
- xAxis: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ xAxis: this.lineChartData.dateList,
yAxis: [
{
name: '鍒╃敤鐜�',
- value: [20, 60, 50, 60, 20, 50, 60, 70, 23, 40, 60, 70]
+ value: this.lineChartData.dataList.map(item => item.utilizationRate)
},
{
name: '寮�鍔ㄧ巼',
- value: [23, 60, 44, 40, 74, 80, 60, 90, 70, 40, 70, 40]
+ value: this.lineChartData.dataList.map(item => item.startRate)
},
{
name: 'OEE',
- value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
+ value: this.lineChartData.dataList.map(item => item.overallEquipmentEfficiency)
}
],
- yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼'
+ yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼(%)'
}
let legendData = []
let seriesData = []
@@ -466,6 +580,17 @@
trigger: 'axis',
axisPointer: {
type: 'shadow'
+ },
+ formatter: function(params) {
+ let result = ''
+ params.forEach((item, index) => {
+ let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}锛�${item.value}%`
+ if (index === 0) {
+ result = `<span style="font-weight:bolder;">${item.name}</span>`
+ }
+ result += '<br />' + dom
+ })
+ return result
}
},
legend: {
@@ -475,7 +600,7 @@
itemGap: 10,
textStyle: {
fontSize: 14,
- color: '#ccc'
+ color: '#fff'
}
},
xAxis: {
@@ -485,13 +610,13 @@
interval: 0,
show: true,
fontSize: 12,
- color: '#50729A'
+ color: '#fff'
// rotate: -30,
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -503,9 +628,9 @@
{
name: newData.yAxisName,
nameTextStyle: {
- color: '#00A8AC',
+ color: '#1AD8DE',
fontSize: 18,
- padding: [0, 0, 0, 90]
+ padding: [0, 0, 0, 110]
},
nameGap: 25,
type: 'value',
@@ -513,7 +638,7 @@
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -522,7 +647,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
},
@@ -530,14 +655,15 @@
type: 'value',
position: 'right',
splitNumber: 5,
+ max: 100,
axisLabel: {
show: true,
- color: '#50729A'
+ color: '#fff'
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -546,7 +672,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
}
@@ -554,6 +680,7 @@
series: seriesData
}
this.lineChart.setOption(option, true)
+ setTimeout(() => this.lineChart.hideLoading(), this.hideLoadingDelayTime)
},
/**
@@ -581,17 +708,6 @@
.left-col {
padding: 0 10px 0;
- .back-nav {
- width: 100px;
- height: 30px;
- color: #eee;
- position: absolute;
- top: 15px;
- left: 15px;
- cursor: pointer;
- z-index: 9999
- }
-
.equipmentId-container {
height: 100%;
color: #eee;
@@ -602,7 +718,7 @@
}
table {
- color: #eee;
+ color: #fff;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
@@ -620,7 +736,7 @@
th {
font-weight: bold;
- background-color: #10695D;
+ background-color: #1CB29D;
position: sticky;
z-index: 9999;
top: 0;
@@ -643,7 +759,7 @@
}
.info-card-container {
- background-color: #67C23A;
+ background-color: #0FC61A;
padding: 5px;
border-radius: 3px;
@@ -687,7 +803,7 @@
}
/deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {
- color: #eee;
+ color: #fff;
font-size: 16px;
}
--
Gitblit v1.9.3