From 7c38e9cf9fd161a0e296a047e904eeaf65d96f9f Mon Sep 17 00:00:00 2001
From: qushaowei <qushaowei@163.com>
Date: 星期二, 16 四月 2024 09:25:05 +0800
Subject: [PATCH] 校验修改
---
src/views/dashboard/EquipmentSignage.vue | 120 ++++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 76 insertions(+), 44 deletions(-)
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 615b2f6..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,8 +280,7 @@
gaugeChartData1: [],
gaugeChartData2: [],
gaugeChartData3: [],
- gaugeChartData4: [],
- equipmentId: '2140223'
+ gaugeChartData4: []
}
},
created() {
@@ -280,6 +298,10 @@
methods: {
selectEquipment(record) {
this.equipmentId = record.equipmentId
+ },
+
+ click(record) {
+ window.alert(record.label)
},
getChartDataByApi() {
@@ -304,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%',
@@ -319,7 +343,7 @@
},
series: [
{
- name: '鍒╃敤鐜�',
+ name: '',
type: 'gauge',
radius: '80%',
center: ['50%', '60%'], // 榛樿鍏ㄥ眬灞呬腑
@@ -355,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//琛ㄧ洏瀹藉害
}
@@ -372,7 +396,7 @@
}
}
},
- data: [{ value: 100 }]
+ data: []
}
]
}
@@ -386,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)
},
@@ -394,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)
},
@@ -402,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)
},
@@ -410,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)
},
@@ -433,7 +465,7 @@
value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
}
],
- yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼'
+ yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼(%)'
}
let legendData = []
let seriesData = []
@@ -467,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: {
@@ -476,7 +519,7 @@
itemGap: 10,
textStyle: {
fontSize: 14,
- color: '#ccc'
+ color: '#fff'
}
},
xAxis: {
@@ -486,13 +529,13 @@
interval: 0,
show: true,
fontSize: 12,
- color: '#50729A'
+ color: '#fff'
// rotate: -30,
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -504,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',
@@ -514,7 +557,7 @@
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -523,7 +566,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
},
@@ -533,12 +576,12 @@
splitNumber: 5,
axisLabel: {
show: true,
- color: '#50729A'
+ color: '#fff'
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -547,7 +590,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
}
@@ -582,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;
@@ -603,7 +635,7 @@
}
table {
- color: #eee;
+ color: #fff;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
@@ -621,7 +653,7 @@
th {
font-weight: bold;
- background-color: #10695D;
+ background-color: #1CB29D;
position: sticky;
z-index: 9999;
top: 0;
@@ -644,7 +676,7 @@
}
.info-card-container {
- background-color: #67C23A;
+ background-color: #0FC61A;
padding: 5px;
border-radius: 3px;
@@ -688,7 +720,7 @@
}
/deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {
- color: #eee;
+ color: #fff;
font-size: 16px;
}
--
Gitblit v1.9.3