feat: chart颜色定义/单值图样式优化等

src/components/charts/ChartSingleValue.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cn-chart cn-chart__single-value" :class="singleValueClass(type)">
     <div class="single-value-icon__box">
-      <div class="single-value__icon"><i class="el-icon-apple"></i></div>
+      <div class="single-value__icon"><i :class="icon"></i></div>
     </div>
     <div class="single-value__content" v-if="type === 51">
       <div class="content__data">
@@ -22,7 +22,8 @@
 export default {
   name: 'ChartSingleValue',
   props: {
-    type: Number
+    type: Number,
+    icon: String
   },
   computed: {
     singleValueClass () {

src/components/charts/chart-options.js

@@ -5,7 +5,10 @@
 */
 import { format } from 'echarts'
 import _ from 'lodash'
-export const chartColor = ['#73A0FA', '#73DEB3', '#F7C739', '#EB7E65', '#FFAB67', '#A285D2', '#FFA8CB']
+export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
+  '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
+  '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
+  '#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
 export function getChartColor (index) {
   return chartColor[index % chartColor.length]
 }

src/components/charts/panel.scss

@@ -55,21 +55,18 @@
   }
   &>.cn-chart__single-value.cn-chart__single-value--icon-left {
     display: flex;
-    justify-content: center;
     align-items: center;
-    grid-template-columns:(5,200px);
 
-    .single-value-icon__box{
-      height: 70px;
-      flex: 4;
+    .single-value-icon__box {
       display: flex;
-      justify-content: space-around;
       align-items: center;
-
+      justify-content: center;
+      flex: 0 0 40%;
     }
 
     .single-value__icon {
-      margin-right: 7.5%;
+      display: flex;
+      justify-content: center;
       width: 72px;
       height: 72px;
       background-color: $--chart-single-value-icon-background-color;
@@ -77,18 +74,17 @@
 
       i {
         display: flex;
-        justify-content: space-around;
         align-items: center;
-        margin-top: 25px;
         font-size: 28px;
         color: $--color-primary;
       }
     }
 
     .single-value__content {
-      flex: 6;
       display: flex;
       flex-direction: column;
+      max-width: 60%;
+      padding-right: 10px;
 
       .content__data {
         padding-bottom: 7%;
@@ -97,7 +93,6 @@
         font-weight: bold;
       }
       .content__title {
-        width: 206px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

src/components/layout/LeftMenu.vue

@@ -21,7 +21,7 @@
         @select="jump">
       <template v-for="(menu, index) in menuList">
         <el-submenu
-            v-if="menu.children && menu.children.length > 0"
+            v-if="menu.children && menu.children.length > 0 && menu.state === 1"
             :key="index"
             :index="`${index}`">
           <template #title>
@@ -29,32 +29,31 @@
             <span>{{menu.i18n ? $t(menu.i18n) : menu.name}}</span>
           </template>
           <template v-for="(secondMenu, secondIndex) in menu.children">
-            <template v-if="secondMenu.children && secondMenu.children.length > 0">
-              <el-submenu
-                  :key="secondIndex"
-                  :index="`${index}-${secondIndex}`">
-                <template #title>
-                  <span class="data-column__span">{{secondMenu.i18n ? $t(secondMenu.i18n) : secondMenu.name}}</span>
-                </template>
+            <el-submenu
+                v-if="secondMenu.children && secondMenu.children.length > 0 && secondMenu.state === 1"
+                :key="secondIndex"
+                :index="`${index}-${secondIndex}`">
+              <template #title>
+                <span class="data-column__span">{{secondMenu.i18n ? $t(secondMenu.i18n) : secondMenu.name}}</span>
+              </template>
+              <template v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`">
                 <el-menu-item
-                    v-for="(thirdMenu, thirdIndex) in secondMenu.children"
-                    :key="`${index}-${secondIndex}-${thirdIndex}`"
+                    v-if="thirdMenu.state === 1"
                     :index="thirdMenu.route">
                   {{thirdMenu.i18n ? $t(thirdMenu.i18n) : thirdMenu.name}}
                 </el-menu-item>
-              </el-submenu>
-            </template>
-            <template v-else>
-              <el-menu-item
-                  :key="secondIndex"
-                  :index="secondMenu.route">
-                {{secondMenu.i18n ? $t(secondMenu.i18n) : secondMenu.name}}
-              </el-menu-item>
-            </template>
+              </template>
+            </el-submenu>
+            <el-menu-item
+                v-else-if="secondMenu.state === 1"
+                :key="secondIndex * 100"
+                :index="secondMenu.route">
+              {{secondMenu.i18n ? $t(secondMenu.i18n) : secondMenu.name}}
+            </el-menu-item>
           </template>
         </el-submenu>
         <el-menu-item
-            v-else
+            v-else-if="menu.state === 1"
             :key="index + 'a'"
             :index="menu.route">
           <i :class="menu.icon"></i>