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/BranchFactorySignage.vue | 253 +++++++++++++++++++++++++++++--------------------- 1 files changed, 146 insertions(+), 107 deletions(-) diff --git a/src/views/dashboard/BranchFactorySignage.vue b/src/views/dashboard/BranchFactorySignage.vue index 997f634..066d3f9 100644 --- a/src/views/dashboard/BranchFactorySignage.vue +++ b/src/views/dashboard/BranchFactorySignage.vue @@ -11,21 +11,21 @@ <div class="back-nav" @click="$emit('backToLastSignage','Index')" v-if="userType===4"> <dv-decoration-7>涓婁竴绾�</dv-decoration-7> </div> - <dv-border-box-9 style="padding: 40px 20px 0"> + <dv-border-box-9 style="padding: 30px 20px 0"> <!--<div class="first-title">M D C 鍏� 缃� 鎬� 鏁� : 6 0 3 鍙�</div>--> <div id="running_state_chart" style="width:100%;height: 400px;"></div> <div id="efficiency_chart" style="width: 100%;height: 350px"></div> </dv-border-box-9> </div> <div style="width: 42%" class="middle-col"> - <dv-border-box-9 style="padding: 40px 20px 0"> + <dv-border-box-9 style="padding: 30px 20px 0"> <!--<div class="first-title">璁� 澶� 鍙� 璐� 鎬� 鏁� : 1 0 2 2 鍙�</div>--> <div style="display: flex"> <div id="tech_condition_chart" style="width:50%;height: 420px;"></div> <div id="warranty_malfunction_chart" style="width:50%;height: 420px;"></div> </div> <div class="support-plan-container"> - <div class="support-plan-item" style="background:#719D8E"> + <div class="support-plan-item" style="background:#5FE0AF"> <div>鏈湀涓変繚璁″垝</div> <div class="plan-value-container"> <div class="plan-value">{{thisMonthMaintenancePlanNum}}</div> @@ -39,7 +39,7 @@ <div>鍙�</div> </div> </div> - <div class="support-plan-item" style="background:#A8985D"> + <div class="support-plan-item" style="background:#D6BC52"> <div>涓嬫湀涓変繚璁″垝</div> <div class="plan-value-container"> <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div> @@ -60,9 +60,9 @@ </dv-border-box-9> </div> <div style="width: 32%"> - <dv-border-box-9 style="padding: 30px 0"> - <div id="bar_chart" style="width:100%;height: 250px;"></div> - <div id="double_bar_chart" style="width:100%;height: 300px;"></div> + <dv-border-box-9 style="padding: 30px 0 20px"> + <div id="bar_chart" style="width:100%;height: 280px;"></div> + <div id="double_bar_chart" style="width:100%;height: 280px;"></div> <div style="padding: 0 20px;"> <dv-scroll-board :config="problemConfig" style="width:100%;height:220px"/> </div> @@ -74,6 +74,7 @@ <script> import signageApi from '@/api/signage' + import moment from 'moment' export default { name: 'BranchFactorySignage', @@ -255,22 +256,21 @@ const option = { title: { show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true - text: '璁惧杩愯鐘舵�佺粺璁�', // 涓绘爣棰樻枃鏈� + text: '璁惧鐘舵��', // 涓绘爣棰樻枃鏈� x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊� y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊� textStyle: { // 涓绘爣棰樻枃鏈牱寮� 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: { @@ -301,10 +301,10 @@ radius: ['40%', '60%'], center: ['53%', '50%'], color: [ - '#686869', - '#AA6349', - '#968A5E', - '#5D975D' + '#8B8B8B', + '#F56436', + '#FFFF40', + '#0FC61A' ], label: { position: 'outside', @@ -345,44 +345,45 @@ const data = this.efficiencyData const colorArray = [ { - top: '#61927F', - bottom: '#61927F' - }, { - top: '#629480', - bottom: '#629480' + top: '#79CEAA', + bottom: '#79CEAA' + }, + { + top: '#F589A2', + bottom: '#F589A2' + }, + { + top: '#6FBF9D', + bottom: '#6FBF9D' }, { top: '#66DFE2', bottom: '#66DFE2' }, { - top: '#9FE6B8', - bottom: '#9FE6B8' + top: '#A7F0C1', + bottom: '#A7F0C1' }, { - top: '#FEDA5B', - bottom: '#FEDA5B' + top: '#FAE893', + bottom: '#FAE893' }, { - top: '#FF9F7F', - bottom: '#FF9F7F' - }, - { - top: '#F87091', - bottom: '#F87091' + top: '#F7B7A0', + bottom: '#F7B7A0' } ] const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100] const option = { title: { show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true - text: '璁惧鍒╃敤鐜�', // 涓绘爣棰樻枃鏈� + text: '', // 涓绘爣棰樻枃鏈� x: 'left', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊� y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊� textStyle: { // 涓绘爣棰樻枃鏈牱寮� fontSize: 18, fontWeight: 'normal', - color: '#fff' + color: '#1AD8DE' } }, grid: { @@ -429,7 +430,7 @@ axisLabel: { show: true, textStyle: { - color: '#d9e7fa', + color: '#fff', fontSize: '14', fontWeight: 'bolder' }, @@ -527,14 +528,23 @@ } ] } + option.title.text = `${moment().format('M鏈圖鏃�')}鍒╃敤鐜嘸 this.efficiencyChart.setOption(option, true) this.efficiencyChart.on('click', params => { // 鐐瑰嚮瑙﹀彂鐨勪负鏌辩姸浣擄紝闄ゆ闄ゅ鏄爣棰� if (params.componentType === 'series') { console.log('seriesParams===========', params) - const productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId - const tierName = this.efficiencyData.find(item => item.productionCode === params.name).name + let productionId + let tierName + // 鐐瑰嚮鐨勬槸鏌变綋鐨勫�硷紝鍚﹀垯鐐瑰嚮鐨勪负鏌变綋鑳屾櫙闃村奖 + if (params.seriesIndex === 0) { + productionId = params.data.productionId + tierName = params.data.name + } else { + productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId + tierName = this.efficiencyData.find(item => item.productionCode === params.name).name + } this.$router.push({ name: 'mdc-base-StatisticsChart', params: { isEquipment: false, productionId, tierName } @@ -560,15 +570,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: { @@ -597,9 +606,9 @@ radius: ['40%', '60%'], center: ['50%', '60%'], color: [ - '#0AA012', - '#237E48', - '#757160' + '#0FC61A', + '#0DAF15', + '#8B8B8B' ], label: { position: 'outside', @@ -640,15 +649,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: { @@ -677,9 +685,9 @@ radius: ['40%', '60%'], center: ['50%', '60%'], color: [ - '#00CED1', - '#B85B38', - '#A8985D' + '#24F2F5', + '#F56436', + '#FFFF40' ], label: { position: 'outside', @@ -711,7 +719,9 @@ this.maintenanceConfig = { indexHeader: '搴忓彿', header: ['杞﹂棿', '鏃ユ湡', '鍐呭'], - headerBGC: '#266C86', + headerBGC: '#2C8BB2', + oddRowBGC: '#244B58', + evenRowBGC: '#295562', rowNum: 1, data: this.twoMaintenanceChartData, index: true, @@ -724,6 +734,18 @@ drawBarChart() { this.barChart = this.$echarts.init(document.getElementById('bar_chart')) const option = { + title: { + show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true + text: 'OEE杞﹂棿', // 涓绘爣棰樻枃鏈� + x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊� + y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊� + textStyle: { + // 涓绘爣棰樻枃鏈牱寮� + fontSize: 18, + fontWeight: 'normal', + color: '#1AD8DE' + } + }, tooltip: { trigger: 'axis', axisPointer: { @@ -741,7 +763,7 @@ left: '10%' }, xAxis: [{ - name: 'OEE杞﹂棿', + name: '', nameLocation: 'middle', nameGap: 40, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺� type: 'category', @@ -759,7 +781,8 @@ margin: 6 // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈 }, axisTick: { - show: false + show: true, + alignWithLabel: true } }], yAxis: [{ @@ -780,6 +803,7 @@ } }, splitLine: { + show: false, lineStyle: { color: 'rgba(255,255,255,0.12)' } @@ -790,8 +814,9 @@ data: this.barChartData, barWidth: '15%', itemStyle: { - color: '#7DB17F' + color: '#55D6A5' }, + showBackground: true, label: { show: true, lineHeight: 10, @@ -814,7 +839,7 @@ drawDoubleBarChart() { this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart')) const option = { - color: ['#4992FF', '#4DC0B1'], + color: ['#409EFF', '#0FC61A'], tooltip: { confine: true, formatter: function(params) { @@ -838,7 +863,7 @@ formatter: ['{a|{name}}'].join('\n'), textStyle: { fontSize: 14, - color: '#6A93B9', + color: '#fff', height: 8, rich: { a: { @@ -858,58 +883,61 @@ }, axisLabel: { fontSize: 12, - color: '#6A93B9' + color: '#fff' }, axisTick: { - show: false + show: true } }, - yAxis: [{ - name: '%', - type: 'value', - min: 0, - minInterval: 1, - splitArea: { - show: false - }, - axisLine: { - show: false - }, - axisTick: { - show: false - }, - splitLine: { - lineStyle: { - color: 'rgba(255, 255, 255, 0.15)' - // type: 'dashed', // dotted 铏氱嚎 + yAxis: [ + { + name: '%', + nameTextStyle: { + color: '#fff' + }, + type: 'value', + min: 0, + minInterval: 1, + axisLine: { + show: true + }, + axisTick: { + show: true + }, + splitLine: { + show: false, + lineStyle: { + color: 'rgba(255, 255, 255, 0.15)' + // type: 'dashed', // dotted 铏氱嚎 + } + }, + axisLabel: { + fontSize: 12, + color: '#fff', + fontFamily: 'Bebas' } }, - axisLabel: { - fontSize: 12, - color: '#6A93B9', - fontFamily: 'Bebas' - } - }, { - type: 'value', - axisLine: { - show: false - }, - axisTick: { - show: false - }, - splitLine: { - show: false - }, - axisLabel: { - fontSize: 12, - formatter: '{value}%', // 鍙充晶Y杞存枃瀛楁樉绀� - fontFamily: 'Bebas', - color: '#6A93B9' - }, - splitArea: { - show: false - } - }], + { + type: 'value', + axisLine: { + show: true + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + fontSize: 12, + formatter: '{value}%', // 鍙充晶Y杞存枃瀛楁樉绀� + fontFamily: 'Bebas', + color: '#6A93B9' + }, + splitArea: { + show: false + } + }], series: [{ type: 'bar', barWidth: 15, @@ -959,10 +987,21 @@ this.problemConfig = { indexHeader: '搴忓彿', header: ['鏃堕棿', '闂鍐呭'], - headerBGC: '#83B883', - oddRowBGC: '#556955', - evenRowBGC: '#556955', - data: [], + headerBGC: '#86D186', + oddRowBGC: '#7CBF7C', + evenRowBGC: '#7CBF7C', + data: [ + // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], + // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], + // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], + // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], + // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], + // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], + // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], + // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], + // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], + // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'] + ], index: true, columnWidth: [100, 300, 300], align: ['center'] @@ -1011,7 +1050,7 @@ .back-nav { width: 100px; height: 30px; - color: #eee; + color: #fff; position: absolute; top: 25px; left: 25px; -- Gitblit v1.9.3