perf: 单值图样式微调

src/assets/css/components/views/charts/chartSingleValue.scss

@@ -88,12 +88,13 @@
     align-items: center;
     height: 100%;
     width: 100%;
+    .single-value-icon__box {
+      flex: 0 0 80px;
+    }
     .single-value__icon {
       background-color: $--chart-single-value-icon-background-color;
       border-radius: 50%;
       position: relative;
-      margin-right: 7.5%;
-      margin-bottom: 6%;
       width: 56px;
       height: 56px;
       i {
@@ -109,6 +110,7 @@
       display: flex;
       height: 100%;
       flex-direction: column;
+      padding: 0 10px;
       .content__title {
         display: flex;
         align-items: center;
@@ -141,13 +143,16 @@
       flex-direction: row-reverse;
       justify-content: space-between;
       align-items: center;
+
       .single-value-icon__box {
         padding-right: 30px;
+
         .single-value__icon {
           border-radius: 50%;
           position: relative;
           margin-right: 7.5%;
           margin-top: 30%;
+
           .cn-icon-svg {
             width: 50px;
             height: 50px;

src/components/layout/Header.vue

@@ -106,43 +106,6 @@ export default {
       username: 'admin', // sessionStorage.getItem('cn-username'),
       language: localStorage.getItem('cn-language') ? localStorage.getItem('cn-language') : 'en',
       showChangePin: false,
-      breadcrumbMap: [
-        {
-          path: '/panel/trafficSummary',
-          parentName: this.$t('overall.dashboard'),
-          name: this.$t('trafficSummary.trafficSummary')
-        },
-        {
-          path: '/panel/networkAppPerformance',
-          parentName: this.$t('overall.dashboard'),
-          name: this.$t('networkAppPerformance.networkAppPerformance')
-        }, {
-          path: '/panel/dnsServiceInsights',
-          parentName: this.$t('overall.dashboard'),
-          name: this.$t('dnsServiceInsights')
-        }, {
-          path: '/entityExplorer',
-          parentName: this.$t('overall.entities'),
-          name: this.$t('overall.entityExplorer'),
-          childName: ''
-        }, {
-          path: '/user',
-          parentName: this.$t('overall.setting'),
-          name: this.$t('overall.user')
-        }, {
-          path: '/role',
-          parentName: this.$t('overall.setting'),
-          name: this.$t('overall.role')
-        }, {
-          path: '/operationLog',
-          parentName: this.$t('overall.setting'),
-          name: this.$t('overall.operationLog')
-        }, {
-          path: '/i18n',
-          parentName: this.$t('overall.setting'),
-          name: 'I18N'
-        }
-      ],
       from: '', // entity类型
       changePassForm: {
         oldPwd: '',
@@ -158,7 +121,17 @@ export default {
   },
   computed: {
     breadcrumb () {
-      const breadcrumb = this.breadcrumbMap.find(b => this.path === b.path)
+      const breadcrumbMap = []
+      this.$store.getters.menuList.forEach(menu => {
+        if (this.$_.isEmpty(menu.children) && menu.route) {
+          breadcrumbMap.push({ name: this.$t(menu.i18n), path: menu.route })
+        } else if (!this.$_.isEmpty(menu.children)) {
+          menu.children.forEach(child => {
+            breadcrumbMap.push({ name: child.i18n ? this.$t(child.i18n) : child.name, parentName: menu.i18n ? this.$t(menu.i18n) : menu.name, path: child.route })
+          })
+        }
+      })
+      const breadcrumb = breadcrumbMap.find(b => this.path === b.path)
       return breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
     },
     path () {

src/views/charts/charts/ChartSingleValue.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cn-chart__single-value chart-header-position" :class="singleValueClass(type)" :style="{backgroundColor:color}">
-    <div class="single-value-icon__box"  v-if="type !== 54">
+    <div class="single-value-icon__box" v-if="type !== 54">
-      <div class="single-value__icon"><i :class="icon"></i></div>
+      <div class="single-value__icon" :style="`background-color: ${chartInfo.params.iconBackgroundColor || ''}`"><i :class="icon" :style="`color: ${chartInfo.params.iconColor || ''}`"></i></div>
     </div>
     <div class="single-value__content" v-if="type === 51">
       <div class="content__data">