CN-64 feat: 搜索框联动，其他一些细节调整

2021-08-13 09:39:02 +08:00
parent 6eb33efa7a
commit c1bcc9394d
16 changed files with 340 additions and 171 deletions
--- a/src/components/charts/ChartSingleValue.vue
+++ b/src/components/charts/ChartSingleValue.vue
@@ -11,14 +11,14 @@
        <slot name="title"></slot>
      </div>
    </div>
-    <div class="single-value__content" v-if="type === 52" style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;padding: 0px 10px">
-      <div class="content__title" style="height: 20%;">
+    <div class="single-value__content" v-if="type === 52">
+      <div class="content__title">
        <slot name="title"></slot>
      </div>
-      <div class="content__data" style="height: 20%;">
+      <div class="content__data">
        <slot name="data"></slot>
      </div>
-      <div class="content__chart" style="height: 40%;">
+      <div class="content__chart">
        <slot name="chart"></slot>
      </div>
    </div>
--- a/src/components/charts/panel.scss
+++ b/src/components/charts/panel.scss
@@ -41,13 +41,6 @@
    height: 100%;
    width: 100%;
  }
-  &>.cn-chart.cn-chart__echarts--statistics {
-    border: none;
-    box-shadow: none;
-    .cn-chart__header {
-      border-bottom: none;
-    }
-  }
  &>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map {
    display: flex;
    flex-direction: column;
@@ -178,6 +171,36 @@
      }
    }
  }
+  &>.cn-chart__single-value.cn-chart__single-value--chart {
+    display: flex;
+    padding: 13px 20px;
+
+    .single-value__content {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      flex-direction: column;
+
+      .content__title {
+        display: flex;
+        align-items: center;
+        height: 30%;
+        font-size: 16px;
+        color: #666666;
+      }
+      .content__data {
+        display: flex;
+        align-items: center;
+        height: 25%;
+        font-size: 24px;
+        color: #333333;
+        font-weight: bold;
+      }
+      .content__chart {
+        flex: auto
+      }
+    }
+  }
  &>.cn-chart__title {
    display: flex;
    align-items: center;
@@ -409,6 +432,13 @@
    }
  }
 }
+.cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane>.cn-chart {
+  border: none;
+  box-shadow: none;
+  .cn-chart__header {
+    border-bottom: none;
+  }
+}
 .option-popper {
  .el-select-dropdown__item {
    height: 24px;
--- a/src/components/entities/EntityList.vue
+++ b/src/components/entities/EntityList.vue
@@ -5,23 +5,23 @@
        <div class="cn-entity__header">
          <div class="header__icon"><i :class="iconClass"></i></div>
          <div class="header__content" :title="d.ip||d.domainName||d.appName">
-            <template v-if="entityType === 'ip'">{{d.ip || 'Unknown'}}</template>
-            <template v-else-if="entityType === 'domain'">{{d.domainName || 'Unknown'}}</template>
-            <template v-else-if="entityType === 'app'">{{d.appName || 'Unknown'}}</template>
+            <template v-if="from === 'ip'">{{d.ip || 'Unknown'}}</template>
+            <template v-else-if="from === 'domain'">{{d.domainName || 'Unknown'}}</template>
+            <template v-else-if="from === 'app'">{{d.appName || 'Unknown'}}</template>
          </div>
        </div>
        <div class="cn-entity__body" style="position: relative;">
-          <div class="content__desc" v-if="entityType !== 'ip'" style="color: #999999; width: 200px; position: absolute; top: 33px;right: -9px ;font-size: 12px;">
-            <template v-if="entityType === 'domain'" style="color: #999999; width: 200px;">
+          <div class="content__desc" v-if="from !== 'ip'" style="color: #999999; width: 200px; position: absolute; top: 33px;right: -9px ;font-size: 12px;">
+            <template v-if="from === 'domain'">
              <span class="desc__label">{{$t('entities.reputationLevel')}}:</span>
              <span>{{d.reputationLevel || '-'}}</span>
            </template>
-            <template v-else-if="entityType === 'app'" style="color: #999999; width: 200px; margin:0px 35px;">
+            <template v-else-if="from === 'app'">
              <span class="desc__label">{{$t('entities.risk')}}:</span>
              <span>{{d.appRisk || '-'}}</span>
            </template>
          </div>
-          <template v-if="entityType === 'ip'">
+          <template v-if="from === 'ip'">
            <div class="body__row">
              <span class="body__row-label"><i class="cn-icon cn-icon-category"></i>&nbsp;{{$t('overall.country')}}:</span>
              <div class="body__row-value" :title="d.country">{{d.country || '-'}}</div>
@@ -37,7 +37,7 @@
            <div class="body__detail"
                 @click="entityDetail({clientIP: d.ip}, [{key: 'clientIP', label: $t('overall.clientIp')}, {key: 'serverIP', label: $t('overall.serverIp')}])">{{$t('overall.detail')}}></div>
          </template>
-          <template v-else-if="entityType === 'domain'">
+          <template v-else-if="from === 'domain'">
            <div class="body__row">
              <span class="body__row-label"><i class="cn-icon cn-icon-category"></i>&nbsp;{{$t('entities.Group')}}:</span>
              <div class="body__row-value" :title="d.categoryGroup">{{d.categoryGroup || '-'}}</div>
@@ -52,7 +52,7 @@
            </div>
            <div class="body__detail" @click="entityDetail({domain: d.domainName})">{{$t('overall.detail')}}></div>
          </template>
-          <template v-else-if="entityType === 'app'">
+          <template v-else-if="from === 'app'">
            <div class="body__row">
              <span class="body__row-label"><i class="cn-icon cn-icon-risk"></i>&nbsp;APP ID:</span>
              <div class="body__row-value" :title="d.appId">{{d.appId || '-'}}</div>
@@ -79,7 +79,6 @@
          :currentPage="pageObj.pageNo"
          :page-size="pageObj.pageSize"
          :total="pageObj.total"
-          :page-sizes="[30, 50, 100]"
          layout="total, prev, pager, next"
      ></el-pagination>
    </div>
@@ -91,7 +90,7 @@ export default {
  name: 'EntityList',
  props: {
    listData: Array,
-    entityType: String,
+    from: String,
    pageObj: Object
  },
  data () {
@@ -103,7 +102,7 @@ export default {
  computed: {
    circleColor () {
      let color
-      switch (this.entityType) {
+      switch (this.from) {
        case ('ip'): {
          color = '#E8FBF9'
          break
@@ -122,7 +121,7 @@ export default {
    },
    iconClass () {
      let className
-      switch (this.entityType) {
+      switch (this.from) {
        case ('ip'): {
          className = 'cn-icon cn-icon-ip ip-green'
          break
@@ -160,11 +159,7 @@ export default {
    scrollbarToTop () {
      this.$nextTick(() => {
        const wraps = document.querySelectorAll('.el-table__body-wrapper')
-        wraps.forEach(wrap => {
-          if (wrap._ps_) {
-            wrap.scrollTop = 0
-          }
-        })
+        wraps.scrollTop = 0
      })
    },
    entityDetail (params, tabs = []) {
--- a/src/components/entities/LeftFilter.vue
+++ b/src/components/entities/LeftFilter.vue
@@ -87,6 +87,8 @@ export default {
      } else {
        this.currentDataBottom = this.$_.cloneDeep(data)
      }
+      console.info(this.currentDataTop)
+      console.info(this.currentDataBottom)
      this.$emit('select', data, node, index, column)
    },
    showMore (filterData) {
@@ -94,8 +96,6 @@ export default {
        this.$emit('showMore', filterData.column)
      }
    },
-    loadFilter (node, resolve, f) {
-    },
    dataEqual (obj1, obj2) {
      if (!obj1 || !obj2) {
        return false
--- a/src/components/entities/entities.scss
+++ b/src/components/entities/entities.scss
@@ -144,7 +144,7 @@
      margin-top: 23px;

      .el-pager {
-        li:last-of-type {
+        .btn-quicknext + li {
          display: none;
        }
      }
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -2,15 +2,26 @@
  <div class="cn-header">
 <!--    <div class="left-menu&#45;&#45;pin" :class="false ? 'left-menu&#45;&#45;pin-normal' : 'left-menu&#45;&#45;pin-reverse'" @click="shrink"><i :class="{'icon-reverse': false}" class="el-icon-s-fold"></i></div>-->
    <!--导航面包屑-->
-    <div style="flex-grow: 1;display: flex;padding: 0 70px;align-items: center">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item v-for="item in breadcrumb" :key="item">{{item}}</el-breadcrumb-item>
+    <div class="header__left">
+      <span @click="shrink" class="shrink-button" :class="{'shrink-button--collapse': isShrink}"><i class="cn-icon cn-icon-expand"></i></span>
+      <el-breadcrumb separator="/" style="padding-left: 20px; padding-top: 6px;">
+        <el-breadcrumb-item :title="item" v-for="item in breadcrumb" :key="item" style="display: inline-block; max-width: 300px; height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+          {{item}}
+        </el-breadcrumb-item>
      </el-breadcrumb>
+      <el-select
+          size="small"
+          v-model="from"
+          v-if="showEntityTypeSelector"
+          style="padding-left: 25px; width: 130px;"
+      >
+        <el-option v-for="(value, key) in entityType" :key="key" :label="value" :value="key"></el-option>
+      </el-select>
    </div>
    <!--个人操作-->
    <div class="personal">
      <el-dropdown>
-        <div class="header-menu--item">Language</div>
+        <div class="header-menu--item"><i class="cn-icon cn-icon-language"></i></div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
@@ -25,7 +36,7 @@
      <el-dropdown>
        <div class='login-user header-menu--item'>{{username}}&nbsp;<i class="cn-icon cn-icon-arrow-down"></i></div>
        <template #dropdown>
-          <el-dropdown-menu #dropdown>
+          <el-dropdown-menu>
            <el-dropdown-item>
              <div id="header-to-changepin" @click="showPinDialog">Change pin</div>
            </el-dropdown-item>
@@ -42,6 +53,8 @@

 <script>
 import { useRoute } from 'vue-router'
+import { get } from '@/utils/http'
+import { entityType, storageKey } from '@/utils/constants'
 export default {
  name: 'Header',
  data () {
@@ -67,36 +80,68 @@ export default {
          name: this.$t('dnsServiceInsights')
        }, {
          path: '/entityExplorer',
-          parentName: this.$t('overall.dashboard'),
-          name: this.$t('overall.entityExplorer')
+          parentName: this.$t('overall.entities'),
+          name: this.$t('overall.entityExplorer'),
+          childName: ''
        }, {
          path: '/user',
-          parentName: this.$t('overall.dashboard'),
-          name: this.$t('user')
+          parentName: this.$t('overall.setting'),
+          name: this.$t('overall.user')
        }, {
          path: '/role',
-          parentName: this.$t('overall.dashboard'),
-          name: this.$t('role')
+          parentName: this.$t('overall.setting'),
+          name: this.$t('overall.role')
        }, {
          path: '/operationLog',
-          parentName: this.$t('overall.dashboard'),
+          parentName: this.$t('overall.setting'),
          name: this.$t('overall.operationLog')
        }, {
          path: '/i18n',
-          parentName: this.$t('overall.dashboard'),
-          name: this.$t('l18n')
+          parentName: this.$t('overall.setting'),
+          name: 'I18N'
        }
-      ]
+      ],
+      from: '' // entity类型
    }
  },
  computed: {
    breadcrumb () {
      const breadcrumb = this.breadcrumbMap.find(b => this.path === b.path)
-      return breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
+      const breadcrumbArray = breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
+      if (breadcrumbArray.length > 0 && breadcrumb.childName) {
+        breadcrumbArray.push(breadcrumb.childName)
+      }
+      return breadcrumbArray
    },
    path () {
      const { path } = useRoute()
      return path
+    },
+    showEntityTypeSelector () {
+      return this.$store.getters.getShowEntityTypeSelector
+    },
+    isShrink () {
+      return this.$store.getters.getIsShrink
+    },
+    entityName () {
+      return this.$store.getters.entityName
+    }
+  },
+  watch: {
+    from (n) {
+      this.$store.commit('entityTypeChange', n)
+    },
+    entityName (n) {
+      const breadcrumb = this.breadcrumbMap.find(b => b.path === '/entityExplorer')
+      breadcrumb.childName = n
+    }
+  },
+  mounted () {
+    this.from = Object.keys(this.entityType)[0]
+  },
+  setup () {
+    return {
+      entityType // 所有entity类型，用于header下拉框选择
    }
  },
  methods: {
@@ -111,6 +156,8 @@ export default {
      this.showChangePin = true
    },
    logout () {
+      sessionStorage.removeItem(storageKey.token)
+      get('/logout')
    },
    refreshLang () {
      this.language = localStorage.getItem('cn-language')
@@ -120,6 +167,7 @@ export default {
      })
    },
    shrink () {
+      this.$store.commit('isShrink', !this.isShrink)
    }
  }
 }
@@ -130,6 +178,22 @@ export default {
  display: flex;
  height: 50px;

+  .header__left {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+
+    .shrink-button {
+      margin-left: 20px;
+      color: #A4ADB5;
+      cursor: pointer;
+      transition: all linear .4s;
+
+      &.shrink-button--collapse {
+        transform: rotateY(180deg);
+      }
+    }
+  }
  .header-menu {
    display: flex;
    justify-content: flex-end;
--- a/src/components/layout/LeftMenu.vue
+++ b/src/components/layout/LeftMenu.vue
@@ -26,7 +26,7 @@
            :index="`${index}`">
          <template #title>
            <i :class="menu.icon"></i>
-            <span :title="menu.name">{{menu.i18n ? $t(menu.i18n) : menu.name}}</span>
+            <span :title="$t(menu.i18n)">{{menu.i18n ? $t(menu.i18n) : menu.name}}</span>
          </template>
          <template v-for="(secondMenu, secondIndex) in menu.children">
            <el-submenu
@@ -38,7 +38,7 @@
              </template>
              <template v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`">
                <el-menu-item
-                    :title="thirdMenu.name"
+                    :title="$t(thirdMenu.i18n)"
                    v-if="thirdMenu.state === 1"
                    :index="thirdMenu.route">
                  {{thirdMenu.i18n ? $t(thirdMenu.i18n) : thirdMenu.name}}
@@ -46,7 +46,7 @@
              </template>
            </el-submenu>
            <el-menu-item
-                :title="secondMenu.name"
+                :title="$t(secondMenu.i18n)"
                v-else-if="secondMenu.state === 1"
                :key="secondIndex * 100"
                :index="secondMenu.route">
@@ -55,7 +55,7 @@
          </template>
        </el-submenu>
        <el-menu-item
-            :title="menu.name"
+            :title="menu.i18n"
            v-else-if="menu.state === 1"
            :key="index + 'a'"
            :index="menu.route">
@@ -132,6 +132,30 @@ export default {
 </script>

 <style lang="scss">
+// el-submenu  active字色
+.el-submenu.is-active .el-submenu__title,
+.el-submenu.is-active .el-submenu__title>i,
+.el-menu-item.is-active {
+  color: white !important;
+}
+// el-submenu  active且open背景色
+.el-submenu__title:not(.is-active):hover, .el-menu-item:not(.is-active):hover, .el-menu-item:not(.is-active):focus {
+  background-color: mix($--color-white, $--menu-background-color, 7%) !important;
+}
+.is-active.is-opened {
+  .el-submenu__title, .el-menu-item:not(.is-active) {
+    background-color: $--menu-hover-background-color !important;
+  }
+}
+.el-menu-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.is-active {
+    background-color: $--color-primary;
+  }
+}
+
 .left-menu {
  display: flex;
  flex-direction: column;
@@ -154,31 +178,6 @@ export default {
    border-right: none;
    overflow: auto;

-    // el-submenu  active字色
-    .el-submenu.is-active .el-submenu__title,
-    .el-submenu.is-active .el-submenu__title>i,
-    .el-menu-item.is-active {
-      color: white !important;
-    }
-
-    // el-submenu  active且open背景色
-    .el-submenu__title:not(.is-active):hover, .el-menu-item:not(.is-active):hover, .el-menu-item:not(.is-active):focus {
-      background-color: mix($--color-white, $--menu-background-color, 7%) !important;
-    }
-    .is-active.is-opened {
-      .el-submenu__title, .el-menu-item:not(.is-active) {
-        background-color: $--menu-hover-background-color !important;
-      }
-    }
-    .el-menu-item {
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &.is-active {
-        background-color: $--color-primary;
-      }
-    }
-
    .el-menu-item, .el-submenu__title {
      height: 46px;
      line-height: 46px;