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/EquipmentSignage.vue | 127 ++++++++++++++++++++++++++---------------
1 files changed, 80 insertions(+), 47 deletions(-)
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 9b445fa..6c954df 100644
--- a/src/views/dashboard/EquipmentSignage.vue
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -69,6 +69,9 @@
<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 +122,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="click(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>
@@ -189,6 +192,7 @@
},
data() {
return {
+ equipmentId: '2140223',
equipmentList: [
{
equipmentId: '2140223',
@@ -250,8 +254,23 @@
standard: '鏃�',
depart: '杞ф満涓績',
workshopSection: '407涓�宸ユ',
- operator: 'admin'
+ operator: 'admin',
+ equipmentStatus: 0
},
+ buttonList: [
+ {
+ label: '澶囦欢淇℃伅'
+ },
+ {
+ label: '淇濆吇璁″垝'
+ },
+ {
+ label: '鎶ヤ慨'
+ },
+ {
+ label: '璁惧鐝'
+ }
+ ],
lineChart: '',
lineChartData: [],
gaugeChart1: '',
@@ -261,17 +280,17 @@
gaugeChartData1: [],
gaugeChartData2: [],
gaugeChartData3: [],
- gaugeChartData4: [],
- equipmentId: '2140223'
+ gaugeChartData4: []
}
+ },
+ created() {
+ console.log('瑙﹀彂閲嶆柊鍒涘缓')
+ this.equipmentId = this.productionCode
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
this.drawCharts()
this.getChartDataByApi()
- },
- activated() {
- this.handleWindowResize()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
@@ -279,6 +298,10 @@
methods: {
selectEquipment(record) {
this.equipmentId = record.equipmentId
+ },
+
+ click(record) {
+ window.alert(record.label)
},
getChartDataByApi() {
@@ -303,12 +326,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 +343,7 @@
},
series: [
{
- name: '鍒╃敤鐜�',
+ name: '',
type: 'gauge',
radius: '80%',
center: ['50%', '60%'], // 榛樿鍏ㄥ眬灞呬腑
@@ -354,9 +379,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 +396,7 @@
}
}
},
- data: [{ value: 100 }]
+ data: []
}
]
}
@@ -385,7 +410,9 @@
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 = [56]
this.gaugeChart1.setOption(option, true)
},
@@ -393,7 +420,9 @@
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 = [23]
this.gaugeChart2.setOption(option, true)
},
@@ -401,7 +430,9 @@
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 = [44]
this.gaugeChart3.setOption(option, true)
},
@@ -409,7 +440,9 @@
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 = [78]
this.gaugeChart4.setOption(option, true)
},
@@ -432,7 +465,7 @@
value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
}
],
- yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼'
+ yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼(%)'
}
let legendData = []
let seriesData = []
@@ -466,6 +499,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 +519,7 @@
itemGap: 10,
textStyle: {
fontSize: 14,
- color: '#ccc'
+ color: '#fff'
}
},
xAxis: {
@@ -485,13 +529,13 @@
interval: 0,
show: true,
fontSize: 12,
- color: '#50729A'
+ color: '#fff'
// rotate: -30,
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -503,9 +547,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 +557,7 @@
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -522,7 +566,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
},
@@ -532,12 +576,12 @@
splitNumber: 5,
axisLabel: {
show: true,
- color: '#50729A'
+ color: '#fff'
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -546,7 +590,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
}
@@ -581,17 +625,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 +635,7 @@
}
table {
- color: #eee;
+ color: #fff;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
@@ -620,7 +653,7 @@
th {
font-weight: bold;
- background-color: #10695D;
+ background-color: #1CB29D;
position: sticky;
z-index: 9999;
top: 0;
@@ -643,7 +676,7 @@
}
.info-card-container {
- background-color: #67C23A;
+ background-color: #0FC61A;
padding: 5px;
border-radius: 3px;
@@ -687,7 +720,7 @@
}
/deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {
- color: #eee;
+ color: #fff;
font-size: 16px;
}
--
Gitblit v1.9.3