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