From d6803b83a827a62fa29737c31104c3ee9bc194d8 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期一, 08 四月 2024 10:18:41 +0800
Subject: [PATCH] 1、全局菜单栏新增点击父级菜单标题后在导航栏展开父级所有下一级菜单功能 2、登录页面按照新需求调整整体布局及样式 3、优化首页看板页面图表视图
---
src/views/dashboard/EquipmentSignage.vue | 113 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 71 insertions(+), 42 deletions(-)
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 9b445fa..04ac89e 100644
--- a/src/views/dashboard/EquipmentSignage.vue
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -119,10 +119,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 +189,7 @@
},
data() {
return {
+ equipmentId: '2140223',
equipmentList: [
{
equipmentId: '2140223',
@@ -252,6 +253,20 @@
workshopSection: '407涓�宸ユ',
operator: 'admin'
},
+ buttonList: [
+ {
+ label: '澶囦欢淇℃伅'
+ },
+ {
+ label: '淇濆吇璁″垝'
+ },
+ {
+ label: '鎶ヤ慨'
+ },
+ {
+ label: '璁惧鐝'
+ }
+ ],
lineChart: '',
lineChartData: [],
gaugeChart1: '',
@@ -261,17 +276,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 +294,10 @@
methods: {
selectEquipment(record) {
this.equipmentId = record.equipmentId
+ },
+
+ click(record) {
+ window.alert(record.label)
},
getChartDataByApi() {
@@ -303,12 +322,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 +339,7 @@
},
series: [
{
- name: '鍒╃敤鐜�',
+ name: '',
type: 'gauge',
radius: '80%',
center: ['50%', '60%'], // 榛樿鍏ㄥ眬灞呬腑
@@ -354,9 +375,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 +392,7 @@
}
}
},
- data: [{ value: 100 }]
+ data: []
}
]
}
@@ -386,6 +407,8 @@
this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
const option = Object.assign({}, opt)
option.title.text = '鍒╃敤鐜�'
+ option.series[0].name = '鍒╃敤鐜�'
+ option.series[0].data = [56]
this.gaugeChart1.setOption(option, true)
},
@@ -394,6 +417,8 @@
this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
const option = Object.assign({}, opt)
option.title.text = '寮�鍔ㄧ巼'
+ option.series[0].name = '寮�鍔ㄧ巼'
+ option.series[0].data = [23]
this.gaugeChart2.setOption(option, true)
},
@@ -402,6 +427,8 @@
this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
const option = Object.assign({}, opt)
option.title.text = '寮�鏈虹巼'
+ option.series[0].name = '寮�鏈虹巼'
+ option.series[0].data = [44]
this.gaugeChart3.setOption(option, true)
},
@@ -410,6 +437,8 @@
this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
const option = Object.assign({}, opt)
option.title.text = 'OEE'
+ option.series[0].name = 'OEE'
+ option.series[0].data = [78]
this.gaugeChart4.setOption(option, true)
},
@@ -432,7 +461,7 @@
value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
}
],
- yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼'
+ yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼(%)'
}
let legendData = []
let seriesData = []
@@ -466,6 +495,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 +515,7 @@
itemGap: 10,
textStyle: {
fontSize: 14,
- color: '#ccc'
+ color: '#fff'
}
},
xAxis: {
@@ -485,13 +525,13 @@
interval: 0,
show: true,
fontSize: 12,
- color: '#50729A'
+ color: '#fff'
// rotate: -30,
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -503,9 +543,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 +553,7 @@
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -522,7 +562,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
},
@@ -532,12 +572,12 @@
splitNumber: 5,
axisLabel: {
show: true,
- color: '#50729A'
+ color: '#fff'
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -546,7 +586,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
}
@@ -581,17 +621,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 +631,7 @@
}
table {
- color: #eee;
+ color: #fff;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
@@ -620,7 +649,7 @@
th {
font-weight: bold;
- background-color: #10695D;
+ background-color: #1CB29D;
position: sticky;
z-index: 9999;
top: 0;
@@ -643,7 +672,7 @@
}
.info-card-container {
- background-color: #67C23A;
+ background-color: #0FC61A;
padding: 5px;
border-radius: 3px;
@@ -687,7 +716,7 @@
}
/deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {
- color: #eee;
+ color: #fff;
font-size: 16px;
}
--
Gitblit v1.9.3