Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

# Conflicts:
#	src/views/charts/Chart.vue

src/assets/css/common.scss

@@ -12,6 +12,7 @@ body {
   margin: 0 !important;
   padding: 0 !important;
   cursor: default !important;
+  overflow: hidden;
 }
 
 /*---滚动条默认显示样式--*/
@@ -53,3 +54,9 @@ th *:first-letter,
 .header__operations *:first-letter {
   text-transform: capitalize;
 }
+
+.outer-box {
+  padding: 10px;
+  height: 100%;
+  width: 100%;
+}

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1624011302849') format('woff2'),
+  src: url('iconfont.woff2?t=1625552111572') format('woff2'),
-       url('iconfont.woff?t=1624011302849') format('woff'),
+       url('iconfont.woff?t=1625552111572') format('woff'),
-       url('iconfont.ttf?t=1624011302849') format('truetype');
+       url('iconfont.ttf?t=1625552111572') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-ip:before {
+  content: "\e73d";
+}
+
+.cn-icon-app:before {
+  content: "\e73e";
+}
+
+.cn-icon-domain:before {
+  content: "\e73f";
+}
+
+.cn-icon-cloud:before {
+  content: "\e73c";
+}
+
+.cn-icon-user:before {
+  content: "\e73a";
+}
+
+.cn-icon-pin:before {
+  content: "\e73b";
+}
+
 .cn-icon-view:before {
   content: "\e702";
 }
@@ -165,7 +189,7 @@
   content: "\e714";
 }
 
-.cn-icon-entitles:before {
+.cn-icon-entities:before {
   content: "\e715";
 }
 

src/assets/css/font/iconfont.json

@@ -1,310 +0,0 @@
-{
-  "id": "2614877",
-  "name": "Cyber Narrator",
-  "font_family": "cn-icon",
-  "css_prefix_text": "cn-icon-",
-  "description": "",
-  "glyphs": [
-    {
-      "icon_id": "20712322",
-      "name": "view",
-      "font_class": "view1",
-      "unicode": "e702",
-      "unicode_decimal": 59138
-    },
-    {
-      "icon_id": "21907756",
-      "name": "更多操作1",
-      "font_class": "more3",
-      "unicode": "e739",
-      "unicode_decimal": 59193
-    },
-    {
-      "icon_id": "16827143",
-      "name": "编辑",
-      "font_class": "edit",
-      "unicode": "e68c",
-      "unicode_decimal": 59020
-    },
-    {
-      "icon_id": "16827146",
-      "name": "删除",
-      "font_class": "delete",
-      "unicode": "e68f",
-      "unicode_decimal": 59023
-    },
-    {
-      "icon_id": "21119423",
-      "name": "更  多",
-      "font_class": "more1",
-      "unicode": "e677",
-      "unicode_decimal": 58999
-    },
-    {
-      "icon_id": "16827151",
-      "name": "设置",
-      "font_class": "gear",
-      "unicode": "e694",
-      "unicode_decimal": 59028
-    },
-    {
-      "icon_id": "21209541",
-      "name": "Add",
-      "font_class": "add",
-      "unicode": "e738",
-      "unicode_decimal": 59192
-    },
-    {
-      "icon_id": "22325159",
-      "name": "向上",
-      "font_class": "xiangshang",
-      "unicode": "e732",
-      "unicode_decimal": 59186
-    },
-    {
-      "icon_id": "22325160",
-      "name": "向下",
-      "font_class": "xiangxia",
-      "unicode": "e737",
-      "unicode_decimal": 59191
-    },
-    {
-      "icon_id": "22324980",
-      "name": "左箭头",
-      "font_class": "arrow-left",
-      "unicode": "e735",
-      "unicode_decimal": 59189
-    },
-    {
-      "icon_id": "22324981",
-      "name": "右箭头",
-      "font_class": "arrow-right",
-      "unicode": "e736",
-      "unicode_decimal": 59190
-    },
-    {
-      "icon_id": "22320764",
-      "name": "id",
-      "font_class": "id",
-      "unicode": "e734",
-      "unicode_decimal": 59188
-    },
-    {
-      "icon_id": "22318866",
-      "name": "地理位置",
-      "font_class": "position",
-      "unicode": "e72e",
-      "unicode_decimal": 59182
-    },
-    {
-      "icon_id": "22318867",
-      "name": "DNS",
-      "font_class": "dns",
-      "unicode": "e72f",
-      "unicode_decimal": 59183
-    },
-    {
-      "icon_id": "22318868",
-      "name": "子分类",
-      "font_class": "sub-category",
-      "unicode": "e730",
-      "unicode_decimal": 59184
-    },
-    {
-      "icon_id": "22318869",
-      "name": "风险",
-      "font_class": "risk",
-      "unicode": "e731",
-      "unicode_decimal": 59185
-    },
-    {
-      "icon_id": "22318871",
-      "name": "类别",
-      "font_class": "category",
-      "unicode": "e733",
-      "unicode_decimal": 59187
-    },
-    {
-      "icon_id": "22292878",
-      "name": "告警",
-      "font_class": "alert",
-      "unicode": "e72d",
-      "unicode_decimal": 59181
-    },
-    {
-      "icon_id": "22292845",
-      "name": "下拉",
-      "font_class": "dropdown",
-      "unicode": "e724",
-      "unicode_decimal": 59172
-    },
-    {
-      "icon_id": "22292846",
-      "name": "下载",
-      "font_class": "download",
-      "unicode": "e725",
-      "unicode_decimal": 59173
-    },
-    {
-      "icon_id": "22292847",
-      "name": "选中",
-      "font_class": "check",
-      "unicode": "e726",
-      "unicode_decimal": 59174
-    },
-    {
-      "icon_id": "22292848",
-      "name": "刷新",
-      "font_class": "refresh",
-      "unicode": "e727",
-      "unicode_decimal": 59175
-    },
-    {
-      "icon_id": "22292849",
-      "name": "中英文",
-      "font_class": "language",
-      "unicode": "e728",
-      "unicode_decimal": 59176
-    },
-    {
-      "icon_id": "22292850",
-      "name": "更多",
-      "font_class": "more",
-      "unicode": "e729",
-      "unicode_decimal": 59177
-    },
-    {
-      "icon_id": "22292851",
-      "name": "样式",
-      "font_class": "style",
-      "unicode": "e72a",
-      "unicode_decimal": 59178
-    },
-    {
-      "icon_id": "22292852",
-      "name": "展开",
-      "font_class": "expand",
-      "unicode": "e72b",
-      "unicode_decimal": 59179
-    },
-    {
-      "icon_id": "22292853",
-      "name": "最大化",
-      "font_class": "full-screen",
-      "unicode": "e72c",
-      "unicode_decimal": 59180
-    },
-    {
-      "icon_id": "22292732",
-      "name": "重传",
-      "font_class": "upload",
-      "unicode": "e71f",
-      "unicode_decimal": 59167
-    },
-    {
-      "icon_id": "22292733",
-      "name": "丢包率",
-      "font_class": "package-loss",
-      "unicode": "e720",
-      "unicode_decimal": 59168
-    },
-    {
-      "icon_id": "22292734",
-      "name": "HTTP",
-      "font_class": "http",
-      "unicode": "e721",
-      "unicode_decimal": 59169
-    },
-    {
-      "icon_id": "22292735",
-      "name": "时间",
-      "font_class": "time",
-      "unicode": "e722",
-      "unicode_decimal": 59170
-    },
-    {
-      "icon_id": "22292736",
-      "name": "SSL",
-      "font_class": "ssl",
-      "unicode": "e723",
-      "unicode_decimal": 59171
-    },
-    {
-      "icon_id": "22292709",
-      "name": "根域名",
-      "font_class": "root-domain",
-      "unicode": "e71d",
-      "unicode_decimal": 59165
-    },
-    {
-      "icon_id": "22292704",
-      "name": "DOH域名",
-      "font_class": "doh-domain",
-      "unicode": "e71a",
-      "unicode_decimal": 59162
-    },
-    {
-      "icon_id": "22290483",
-      "name": "递归域名",
-      "font_class": "recursive-domain",
-      "unicode": "e71b",
-      "unicode_decimal": 59163
-    },
-    {
-      "icon_id": "22290484",
-      "name": "权威域名",
-      "font_class": "authoritative-domain",
-      "unicode": "e71c",
-      "unicode_decimal": 59164
-    },
-    {
-      "icon_id": "22290486",
-      "name": "顶级域名",
-      "font_class": "top-level-domain",
-      "unicode": "e71e",
-      "unicode_decimal": 59166
-    },
-    {
-      "icon_id": "22290435",
-      "name": "Dashboard",
-      "font_class": "dashboard",
-      "unicode": "e714",
-      "unicode_decimal": 59156
-    },
-    {
-      "icon_id": "22290436",
-      "name": "Entitles",
-      "font_class": "entitles",
-      "unicode": "e715",
-      "unicode_decimal": 59157
-    },
-    {
-      "icon_id": "22290437",
-      "name": "Incidents",
-      "font_class": "incidents",
-      "unicode": "e716",
-      "unicode_decimal": 59158
-    },
-    {
-      "icon_id": "22290438",
-      "name": "Artifacts Brower",
-      "font_class": "artifacts-brower",
-      "unicode": "e717",
-      "unicode_decimal": 59159
-    },
-    {
-      "icon_id": "22290439",
-      "name": "Setting",
-      "font_class": "setting",
-      "unicode": "e718",
-      "unicode_decimal": 59160
-    },
-    {
-      "icon_id": "22290440",
-      "name": "Reports",
-      "font_class": "reports",
-      "unicode": "e719",
-      "unicode_decimal": 59161
-    }
-  ]
-}

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">
@@ -12,8 +12,8 @@
       </div>
     </div>
     <div class="single-value__content" v-if="type === 53">
-      <div class="content__title">嘻嘻</div>
+      <div class="content__title"></div>
-      <div class="content__data">11112</div>
+      <div class="content__data"></div>
     </div>
   </div>
 </template>
@@ -22,7 +22,8 @@
 export default {
   name: 'ChartSingleValue',
   props: {
-    type: Number
+    type: Number,
+    icon: String
   },
   computed: {
     singleValueClass () {

src/components/charts/chart-options.js

@@ -6,7 +6,10 @@
 import { format } from 'echarts'
 import { shortFormatter } from './chartFormatter'
 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;
       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/entities/entities.scss

@@ -0,0 +1,10 @@
+.cn-entities {
+  display: grid;
+  grid-template-rows: 32px auto;
+  grid-template-columns: 250px auto;
+  grid-gap: 10px 20px;
+  padding: 20px;
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+}

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
+                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"
+                    v-if="thirdMenu.state === 1"
-                    :key="`${index}-${secondIndex}-${thirdIndex}`"
                     :index="thirdMenu.route">
                   {{thirdMenu.i18n ? $t(thirdMenu.i18n) : thirdMenu.name}}
                 </el-menu-item>
-              </el-submenu>
               </template>
-            <template v-else>
+            </el-submenu>
             <el-menu-item
-                  :key="secondIndex"
+                v-else-if="secondMenu.state === 1"
+                :key="secondIndex * 100"
                 :index="secondMenu.route">
               {{secondMenu.i18n ? $t(secondMenu.i18n) : secondMenu.name}}
             </el-menu-item>
           </template>
-          </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>

src/router/index.js

@@ -25,6 +25,10 @@ const routes = [
       {
         path: '/operationLog',
         component: () => import('@/views/settings/OperationLog')
+      },
+      {
+        path: '/entityExplorer',
+        component: () => import('@/views/entities/EntityExplorer')
       }
     ]
   }

src/utils/tools.js

@@ -433,7 +433,7 @@ export function getCapitalGeo (countryId) {
   return data[countryId]
 }
 
-export function JSONParse (data) {
+function JSONParse (data) {
   const firstParse = JSON.parse(data)
   if (typeof firstParse === 'string') {
     return JSON.parse(firstParse)

src/views/charts/Chart.vue

@@ -79,9 +79,10 @@
       v-else-if="isSingleValue"
       :type="chartInfo.type"
       :style="computePosition"
+      :icon="singleValue.icon"
   >
-    <template #title><span title="TCP Connection Establish Time">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span></template>
+    <template #title><span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span></template>
-    <template #data>{{singleValue}}</template>
+    <template #data>{{singleValue.value}}</template>
   </single-value>
   <!-- 表格 -->
   <chart-table
@@ -140,7 +141,6 @@
 import * as echarts from 'echarts'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
-import am4GeoDataWorldLow from '@amcharts/amcharts4-geodata/worldChinaLow'
 import { shallowRef } from 'vue'
 
 import {
@@ -166,9 +166,9 @@ import ChartMap from '@/components/charts/ChartMap'
 import PieTable from '@/components/charts/PieTable'
 import StatisticsLegend from '@/components/charts/StatisticsLegend'
 import ChartTablePagination from '@/components/charts/ChartTablePagination'
-import { chartTableDefaultPageSize, chartTableTopOptions, chartPieTableTopOptions } from '@/utils/constants'
+import { chartTableDefaultPageSize, chartTableTopOptions, storageKey, chartPieTableTopOptions } from '@/utils/constants'
 import { get } from '@/utils/http'
-import { replaceUrlPlaceholder, getCapitalGeo } from '@/utils/tools'
+import { replaceUrlPlaceholder, getCapitalGeo, getGeoData } from '@/utils/tools'
 
 export default {
   name: 'Chart',
@@ -201,7 +201,10 @@ export default {
         currentPageData: [] // table当前页的数据
       },
       pieTableData: [],
-      singleValue: '-',
+      singleValue: {
+        value: '-',
+        icon: ''
+      },
       activeTab: '',
       statisticsData: [],
       orderPieTable: chartPieTableTopOptions[0].value,
@@ -371,10 +374,11 @@ export default {
         }
       } else if (this.isSingleValue) {
         if (chartParams) {
+          this.singleValue.icon = chartParams.icon
           const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
           get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
             if (response.code === 200) {
-              this.singleValue = response.data.result
+              this.singleValue.value = response.data.result
             }
           })
         }
@@ -395,7 +399,7 @@ export default {
     },
     initMap (id) {
       const chart = am4Core.create(id, am4Maps.MapChart)
-      chart.geodata = am4GeoDataWorldLow
+      chart.geodata = getGeoData(storageKey.iso36112WorldLow)
       chart.projection = new am4Maps.projections.Miller()
       const polygonSeries = chart.series.push(new am4Maps.MapPolygonSeries())
       polygonSeries.useGeodata = true

src/views/entities/EntityExplorer.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="outer-box">
+    <div class="cn-entities">
+      <div style="background-color: lightcyan"></div>
+      <div style="background-color: lightcyan"></div>
+      <div style="background-color: lightcyan"></div>
+      <div style="background-color: lightcyan"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EntityExplorer'
+}
+</script>
+
+<style lang="scss">
+@import '~@/components/entities/entities.scss';
+</style>