From e7b175bc3aca09d9a00ce309f183358b4d5f5918 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期二, 02 四月 2024 16:17:40 +0800
Subject: [PATCH] 1、首页优化各层级看板视图，使色彩更加鲜艳明亮 2、用户管理页面首页权限字段增加无权限选项值，且默认值为无权限进入首页后无法查看任何看板
---
src/views/dashboard/EquipmentSignage.vue | 97 ++++++++++++++++++++++++++++++++++--------------
1 files changed, 68 insertions(+), 29 deletions(-)
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 615b2f6..0938c54 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,8 +276,7 @@
gaugeChartData1: [],
gaugeChartData2: [],
gaugeChartData3: [],
- gaugeChartData4: [],
- equipmentId: '2140223'
+ gaugeChartData4: []
}
},
created() {
@@ -280,6 +294,10 @@
methods: {
selectEquipment(record) {
this.equipmentId = record.equipmentId
+ },
+
+ click(record) {
+ window.alert(record.label)
},
getChartDataByApi() {
@@ -304,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%',
@@ -319,7 +339,7 @@
},
series: [
{
- name: '鍒╃敤鐜�',
+ name: '',
type: 'gauge',
radius: '80%',
center: ['50%', '60%'], // 榛樿鍏ㄥ眬灞呬腑
@@ -355,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//琛ㄧ洏瀹藉害
}
@@ -372,7 +392,7 @@
}
}
},
- data: [{ value: 100 }]
+ data: []
}
]
}
@@ -387,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)
},
@@ -395,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)
},
@@ -403,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)
},
@@ -411,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)
},
@@ -433,7 +461,7 @@
value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
}
],
- yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼'
+ yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼(%)'
}
let legendData = []
let seriesData = []
@@ -467,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: {
@@ -476,7 +515,7 @@
itemGap: 10,
textStyle: {
fontSize: 14,
- color: '#ccc'
+ color: '#fff'
}
},
xAxis: {
@@ -486,13 +525,13 @@
interval: 0,
show: true,
fontSize: 12,
- color: '#50729A'
+ color: '#fff'
// rotate: -30,
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -504,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',
@@ -514,7 +553,7 @@
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -523,7 +562,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
},
@@ -533,12 +572,12 @@
splitNumber: 5,
axisLabel: {
show: true,
- color: '#50729A'
+ color: '#fff'
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -547,7 +586,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
}
@@ -585,7 +624,7 @@
.back-nav {
width: 100px;
height: 30px;
- color: #eee;
+ color: #fff;
position: absolute;
top: 15px;
left: 15px;
@@ -603,7 +642,7 @@
}
table {
- color: #eee;
+ color: #fff;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
@@ -621,7 +660,7 @@
th {
font-weight: bold;
- background-color: #10695D;
+ background-color: #1CB29D;
position: sticky;
z-index: 9999;
top: 0;
@@ -644,7 +683,7 @@
}
.info-card-container {
- background-color: #67C23A;
+ background-color: #0FC61A;
padding: 5px;
border-radius: 3px;
@@ -688,7 +727,7 @@
}
/deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {
- color: #eee;
+ color: #fff;
font-size: 16px;
}
--
Gitblit v1.9.3