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/WorkshopSectionSignage.vue | 146 ++++++++++++++++++++++++++++-------------------- 1 files changed, 85 insertions(+), 61 deletions(-) diff --git a/src/views/dashboard/WorkshopSectionSignage.vue b/src/views/dashboard/WorkshopSectionSignage.vue index a925756..e010ce2 100644 --- a/src/views/dashboard/WorkshopSectionSignage.vue +++ b/src/views/dashboard/WorkshopSectionSignage.vue @@ -13,7 +13,7 @@ <div style="flex:0.5;display: flex;flex-direction:column;align-items: center"> <dv-decoration-11 style="width:90%;height:60px;color: #ccc;font-size: 20px">涓変繚璁″垝</dv-decoration-11> <div class="support-plan-container"> - <div class="support-plan-item" style="background:#67C23A"> + <div class="support-plan-item" style="background:#5FE0AF"> <div>涓変繚鏈湀璁″垝</div> <div class="plan-value-container"> <div class="plan-value">{{thisMonthMaintenancePlanNum}}</div> @@ -27,7 +27,7 @@ <div>鍙�</div> </div> </div> - <div class="support-plan-item" style="background:#E6A23C"> + <div class="support-plan-item" style="background:#FCAA29"> <div>寤舵湡</div> <div class="plan-value-container"> <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div> @@ -41,7 +41,7 @@ <div>鍙�</div> </div> </div> - <div class="support-plan-item" style="background:#719D8E"> + <div class="support-plan-item" style="background:#D6BC52"> <div>涓嬫湀璁″垝</div> <div class="plan-value-container"> <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div> @@ -71,12 +71,12 @@ <div id="line_chart" style="width:100%;height: 400px;"></div> </dv-border-box-9> </div> - <div style="width: 30%"> + + <div style="width: 30%" class="right-col"> <dv-border-box-9 style="padding: 15px"> <a-form layout="inline" @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })"> <a-form-item label="璁惧缂栧彿"> - <!--<a-input v-model="equipmentId" size="large"></a-input>--> <a-auto-complete v-model="equipmentId" placeholder="鍥炶溅閿煡璇�" @@ -86,10 +86,10 @@ </a-form-item> </a-form> <div style="display: flex;flex-wrap: wrap"> - <div id="gauge_chart1" style="width:50%;height: 200px;"></div> - <div id="gauge_chart2" style="width:50%;height: 200px;"></div> - <div id="gauge_chart3" style="width:50%;height: 200px;"></div> - <div id="gauge_chart4" style="width:50%;height: 200px;"></div> + <div id="gauge_chart1" class="gauge-chart"></div> + <div id="gauge_chart2" class="gauge-chart"></div> + <div id="gauge_chart3" class="gauge-chart"></div> + <div id="gauge_chart4" class="gauge-chart"></div> </div> <div id="bar_chart" style="width:100%;height: 330px;"></div> </dv-border-box-9> @@ -293,15 +293,14 @@ // 涓绘爣棰樻枃鏈牱寮� fontSize: 18, fontWeight: 'normal', - color: '#00A8AC' + color: '#1AD8DE' } }, tooltip: { trigger: 'item', formatter: function(params) { - if (params.name !== '') { - return `${params.name}:${params.value}(${params.percent}%)` - } + return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' + + '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}锛�${params.percent}%锛塦 } }, legend: { @@ -330,9 +329,9 @@ radius: ['40%', '60%'], center: ['50%', '50%'], color: [ - '#0AA012', - '#237E48', - '#757160' + '#0FC61A', + '#0DAF15', + '#8B8B8B' ], label: { position: 'outside', @@ -372,15 +371,14 @@ // 涓绘爣棰樻枃鏈牱寮� fontSize: 18, fontWeight: 'normal', - color: '#00A8AC' + color: '#1AD8DE' } }, tooltip: { trigger: 'item', formatter: function(params) { - if (params.name !== '') { - return `${params.name}:${params.value}(${params.percent}%)` - } + return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' + + '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}锛�${params.percent}%锛塦 } }, legend: { @@ -409,9 +407,9 @@ radius: ['40%', '60%'], center: ['50%', '50%'], color: [ - '#00CED1', - '#B85B38', - '#A8985D' + '#24F2F5', + '#F56436', + '#FFFF40' ], label: { position: 'outside', @@ -451,15 +449,14 @@ // 涓绘爣棰樻枃鏈牱寮� fontSize: 18, fontWeight: 'normal', - color: '#00A8AC' + color: '#1AD8DE' } }, tooltip: { trigger: 'item', formatter: function(params) { - if (params.name !== '') { - return `${params.name}:${params.value}(${params.percent}%)` - } + return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' + + '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}锛�${params.percent}%锛塦 } }, legend: { @@ -489,10 +486,10 @@ radius: ['35%', '55%'], center: ['50%', '50%'], color: [ - '#686869', - '#AA6349', - '#968A5E', - '#5D975D' + '#8B8B8B', + '#F56436', + '#FFFF40', + '#0FC61A' ], label: { position: 'outside', @@ -534,18 +531,18 @@ yAxis: [ { name: '鍒╃敤鐜�', - value: [200, 600, 550, 360, 520, 520, 630, 780, 230, 420, 650, 700] + value: [200, 600, 550, 360, 520, 520, 630] }, { name: '寮�鍔ㄧ巼', - value: [230, 630, 440, 400, 740, 800, 600, 900, 700, 400, 700, 400] + value: [230, 630, 440, 400, 740, 800, 600] }, { name: '寮�鏈虹巼', - value: [900, 700, 400, 700, 800, 605, 730, 600, 700, 900, 400, 605] + value: [900, 700, 400, 700, 800, 605, 730] } ], - yAxisName: '鍓�7澶╁埄鐢ㄧ巼' + yAxisName: '鍓�7澶╁埄鐢ㄧ巼(%)' } let legendData = [] let seriesData = [] @@ -579,6 +576,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: { @@ -588,7 +596,7 @@ itemGap: 10, textStyle: { fontSize: 14, - color: '#ccc' + color: '#fff' } }, xAxis: { @@ -598,13 +606,13 @@ interval: 0, show: true, fontSize: 12, - color: '#50729A' + color: '#fff' // rotate: -30, }, axisLine: { show: true, lineStyle: { - color: '#50729A' + color: '#fff' } }, axisTick: { @@ -616,9 +624,9 @@ { name: newData.yAxisName, nameTextStyle: { - color: '#00A8AC', + color: '#1AD8DE', fontSize: 18, - padding: [0, 0, 0, 80] + padding: [0, 0, 0, 110] }, nameGap: 30, type: 'value', @@ -626,7 +634,7 @@ axisLine: { show: true, lineStyle: { - color: '#50729A' + color: '#fff' } }, axisTick: { @@ -635,7 +643,7 @@ splitLine: { show: false, lineStyle: { - color: '#3E4A82' + color: '#fff' } } }, @@ -645,12 +653,12 @@ splitNumber: 5, axisLabel: { show: true, - color: '#50729A' + color: '#fff' }, axisLine: { show: true, lineStyle: { - color: '#50729A' + color: '#fff' } }, axisTick: { @@ -659,7 +667,7 @@ splitLine: { show: false, lineStyle: { - color: '#3E4A82' + color: '#fff' } } } @@ -695,12 +703,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%', @@ -710,7 +720,7 @@ }, series: [ { - name: '鍒╃敤鐜�', + name: '', type: 'gauge', radius: '80%', center: ['50%', '60%'], // 榛樿鍏ㄥ眬灞呬腑 @@ -746,9 +756,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//琛ㄧ洏瀹藉害 } @@ -763,7 +773,7 @@ } } }, - data: [{ value: 100 }] + data: [] } ] } @@ -778,6 +788,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 = [52] this.gaugeChart1.setOption(option, true) }, @@ -786,6 +798,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 = [21] this.gaugeChart2.setOption(option, true) }, @@ -794,6 +808,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 = [74] this.gaugeChart3.setOption(option, true) }, @@ -802,6 +818,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 = [88] this.gaugeChart4.setOption(option, true) }, @@ -820,7 +838,7 @@ // 涓绘爣棰樻枃鏈牱寮� fontSize: 18, fontWeight: 'normal', - color: '#00A8AC', + color: '#1AD8DE', fontWeight: 'bold' } }, @@ -850,7 +868,7 @@ data: xAisData, axisLine: { lineStyle: { - color: '#50729A' + color: '#fff' } }, axisLabel: { @@ -873,15 +891,15 @@ position: 'left', axisLabel: { formatter: '{value}', - color: '#50729A' + color: '#fff' }, axisTick: { - show: false + show: true }, axisLine: { show: true, lineStyle: { - color: '#50729A' + color: '#fff' } }, splitLine: { @@ -896,7 +914,7 @@ axisLine: { show: true, lineStyle: { - color: '#50729A' + color: '#fff' } } } @@ -906,7 +924,7 @@ data: this.barChartData, barWidth: '25%', itemStyle: { - color: '#129FC6', + color: '#17C1F0', barBorderRadius: [10, 10, 10, 10] }, label: { @@ -918,7 +936,7 @@ }, position: 'inside', textStyle: { - color: '#50729A', + color: '#fff', fontSize: 18 } } @@ -986,7 +1004,7 @@ .back-nav { width: 100px; height: 30px; - color: #eee; + color: #fff; position: absolute; top: 50px; left: 10px; @@ -1030,7 +1048,13 @@ text-align: center; font-weight: bold; } + } + .right-col { + .gauge-chart { + width: 50%; + height: 200px; + } } } } -- Gitblit v1.9.3