From 20a24c996d4c5bd448d575e5590f0262556f043a Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 7 Jul 2021 15:28:11 +0800
Subject: [PATCH 1/7] =?UTF-8?q?perf:=20entity=E6=9E=B6=E5=AD=90=E3=80=81?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=89=8D=E7=AB=AF=E4=BD=93=E7=A7=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/common.scss            |  6 ++++++
 src/components/entities/entities.scss | 10 ++++++++++
 src/utils/tools.js                    |  2 +-
 src/views/charts/Chart.vue            |  7 +++----
 src/views/entities/EntityExplorer.vue | 13 ++++++++++---
 5 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 src/components/entities/entities.scss

diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index e60b3cef..dc43eb28 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -54,3 +54,9 @@ th *:first-letter,
 .header__operations *:first-letter {
   text-transform: capitalize;
 }
+
+.outer-box {
+  padding: 10px;
+  height: 100%;
+  width: 100%;
+}
diff --git a/src/components/entities/entities.scss b/src/components/entities/entities.scss
new file mode 100644
index 00000000..adcb8d33
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 12b7aa39..b1b5c6a6 100644
--- a/src/utils/tools.js
+++ b/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)
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index a5fbd2f4..fa5ceec3 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -140,7 +140,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 +165,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 } from '@/utils/constants'
+import { chartTableDefaultPageSize, chartTableTopOptions, storageKey } 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',
@@ -430,7 +429,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
diff --git a/src/views/entities/EntityExplorer.vue b/src/views/entities/EntityExplorer.vue
index 260376e7..77ad4d9b 100644
--- a/src/views/entities/EntityExplorer.vue
+++ b/src/views/entities/EntityExplorer.vue
@@ -1,5 +1,12 @@
 <template>
-  <div></div>
+  <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>
@@ -8,6 +15,6 @@ export default {
 }
 </script>
 
-<style>
-
+<style lang="scss">
+@import '~@/components/entities/entities.scss';
 </style>

From 5d24c9cdce69a340c36c42a8012cb3bb26b93c83 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 7 Jul 2021 15:51:52 +0800
Subject: [PATCH 2/7] =?UTF-8?q?CN-49=20feat=20=EF=BC=9A=20=E9=A5=BC?=
 =?UTF-8?q?=E5=9B=BE=E8=B0=83=E6=95=B4=20&&=20=E6=95=B0=E5=80=BC=E8=BF=87?=
 =?UTF-8?q?=E5=A4=A7=E7=9A=84=E5=8D=95=E4=BD=8D=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/chart.scss                  |  18 ++-
 src/assets/css/tableCommon.scss            |  13 ++-
 src/components/charts/PieTable.vue         | 121 +++++++++++++++++++--
 src/components/charts/StatisticsLegend.vue |   3 +-
 src/components/charts/chart-options.js     |  58 +++++++---
 src/components/charts/chartFormatter.js    |  21 ++++
 src/components/charts/panel.scss           | 113 +++++++++++++++++++
 src/components/common/Pagination.vue       |   1 -
 src/utils/constants.js                     |   1 +
 src/views/charts/Chart.vue                 | 120 ++++++++++++--------
 src/views/charts/Panel.vue                 |   1 +
 11 files changed, 388 insertions(+), 82 deletions(-)
 create mode 100644 src/components/charts/chartFormatter.js

diff --git a/src/assets/css/chart.scss b/src/assets/css/chart.scss
index e0b64e3f..6ee893d6 100644
--- a/src/assets/css/chart.scss
+++ b/src/assets/css/chart.scss
@@ -1,13 +1,21 @@
-.nz-chart-tooltip > div > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1){
+.nz-chart-tooltip .cn-chart-tooltip-box{
   display: flex;
-  span {
-    float: none;
-  }
-  > span:nth-of-type(2){
+  .cn-chart-tooltip-content{
     flex: 1;
     display: inline-block;
     overflow: hidden;
     text-overflow:ellipsis;
     white-space: nowrap;
+    font-size:14px;
+    color:#666;
+    font-weight:400;
+    margin-left:2px ;
+  }
+  .cn-chart-tooltip-value{
+    float:right;
+    margin-left:20px;
+    font-size:14px;
+    color:#666;
+    font-weight:900;
   }
 }
diff --git a/src/assets/css/tableCommon.scss b/src/assets/css/tableCommon.scss
index 901d3bd5..a9798238 100644
--- a/src/assets/css/tableCommon.scss
+++ b/src/assets/css/tableCommon.scss
@@ -44,7 +44,7 @@
       height: 44px;
       background-color: white;
       border: 1px solid #E6EAED;
-      
+
     }
 
     .top-tool-right {
@@ -134,7 +134,7 @@
         color: #666666;
         font-size: 14px;
         text-align: center;
-        
+
         line-height: 40px;
 
         &.sub-list-tab--active {
@@ -156,7 +156,7 @@
     background-color: #e6eaed;
     position: absolute;
     z-index: 1;
-    
+
     user-select: none;
     color: #5f6368;
     cursor: ns-resize;
@@ -188,7 +188,7 @@
     position: relative;
     padding: 0 20px;
     width: 100%;
-    
+
     flex: auto;
     height: calc(100% - 58px);
 
@@ -356,7 +356,7 @@
   left: 270px !important;
   margin-top: -3px !important;
   box-shadow: none;
-  
+
   border-radius: 0;
   border-color: #c7c7c7;
 
@@ -391,3 +391,6 @@
 .margin-r-20{
   margin-right: 20px;
 }
+.margin-l-10{
+  margin-left: 10px;
+}
diff --git a/src/components/charts/PieTable.vue b/src/components/charts/PieTable.vue
index 7a31de6e..63c0727b 100644
--- a/src/components/charts/PieTable.vue
+++ b/src/components/charts/PieTable.vue
@@ -1,9 +1,11 @@
 <template>
     <el-table
             v-loading="loading"
+            ref="table"
             class="pie-table"
-            :data="tableData"
+            :data="pieTableData"
             style="width: 100%;border: 1px solid #E7EAED"
+            @expand-change="expandChange"
             :size="'mini'"
             :height="'100%'">
         <el-table-column type="expand" :min-width="'5%'">
@@ -19,11 +21,21 @@
                             min-width="5%">
                     </el-table-column>
                     <el-table-column
-                            v-for="(item, index) in tableTitles"
+                            v-for="(item, index) in tableTitlesOther"
                             :key="index"
                             :min-width="item.width"
                             :label="item.label"
-                            :prop="item.prop">
+                            :prop="item.prop"
+                            #default="{row}">
+            <span v-if="item.prop === 'nameColumn'">
+                {{nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] : row['reputationLevel'] }}
+            </span>
+                        <span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'" >
+                {{shortFormatter(row[item.prop])}}
+            </span>
+                        <span v-else>
+                {{row[item.prop]}}
+            </span>
                     </el-table-column>
                 </el-table>
             </template>
@@ -33,51 +45,144 @@
                 :key="index"
                 :min-width="item.width"
                 :label="item.label"
-                :prop="item.prop">
+                :prop="item.prop"
+                #default="{row}">
+            <span v-if="item.prop === 'nameColumn'">
+                {{nameColumn === 'fqdnCategoryName' ? row['categoryName'] : row['reputationLevel'] }}
+            </span>
+            <span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'" >
+                {{shortFormatter(row[item.prop])}}
+            </span>
+            <span v-else>
+                {{row[item.prop]}}
+            </span>
         </el-table-column>
     </el-table>
 </template>
 
 <script>
+import { shortFormatter } from '@/components/charts/chartFormatter'
+import { get } from '@/utils/http'
+import { replaceUrlPlaceholder } from '@/utils/tools'
 export default {
   name: 'PieTable',
   props: {
-    tableData: Array
+    tableData: Array,
+    chartInfo: Object,
+    order: String,
+    startTime: {
+      type: Number
+    },
+    endTime: {
+      type: Number
+    }
   },
   watch: {
     tableData: {
       deep: true,
       immediate: true,
       handler (n) {
+        this.pieTableData = JSON.parse((JSON.stringify(n)))
+        this.pieTableData.forEach(item => {
+          item.children = []
+        })
+      }
+    },
+    pieTableData: {
+      handler (n) {
+      }
+    },
+    chartInfo: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        if (n && n.params) {
+          this.nameColumn = JSON.parse(n.params).nameColumn
+        }
       }
     }
   },
   data () {
     return {
       loading: false,
+      nameColumn: '',
+      pieTableData: [],
       tableTitles: [
         {
           label: this.$t('chart.pieTable.domain'),
           prop: 'domain',
           width: '20%'
         },
+        {
+          label: this.$t('chart.pieTable.nameColumn'),
+          prop: 'nameColumn',
+          width: '22%'
+        },
         {
           label: this.$t('chart.pieTable.sessions'),
           prop: 'sessions',
-          width: '25%'
+          width: '18%'
         },
         {
           label: this.$t('chart.pieTable.packets'),
           prop: 'packets',
-          width: '25%'
+          width: '18%'
         },
         {
           label: this.$t('chart.pieTable.bytes'),
           prop: 'bytes',
-          width: '25%'
+          width: '18%'
+        }
+      ],
+      tableTitlesOther: [
+        {
+          label: this.$t('chart.pieTable.serverIp'),
+          prop: 'serverIp',
+          width: '20%'
+        },
+        {
+          label: this.$t('chart.pieTable.nameColumn'),
+          prop: 'nameColumn',
+          width: '22%'
+        },
+        {
+          label: this.$t('chart.pieTable.sessions'),
+          prop: 'sessions',
+          width: '18%'
+        },
+        {
+          label: this.$t('chart.pieTable.packets'),
+          prop: 'packets',
+          width: '18%'
+        },
+        {
+          label: this.$t('chart.pieTable.bytes'),
+          prop: 'bytes',
+          width: '18%'
         }
       ]
     }
+  },
+  methods: {
+    shortFormatter: shortFormatter,
+    // rowChange (echartParams) {
+    //   const nameColumnKey = this.nameColumn === 'fqdnCategoryName' ? 'categoryName' : 'reputationLevel'
+    //   const row = this.pieTableData.find(item => echartParams.name === item[nameColumnKey])
+    //   this.toggleRowExpansion(row)
+    // },
+    // toggleRowExpansion (row) {
+    //   this.$refs.table.toggleRowExpansion(row)
+    // },
+    expandChange (row) {
+      const nameColumnKey = this.nameColumn === 'fqdnCategoryName' ? 'categoryName' : 'reputationLevel'
+      const url = JSON.parse(this.chartInfo.params).urlChildrenTable
+      const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), order: this.order, domain: row.domain }
+      get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
+        if (response2.code === 200) {
+          row.children = response2.data.result
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/components/charts/StatisticsLegend.vue b/src/components/charts/StatisticsLegend.vue
index b8897136..7b611d6a 100644
--- a/src/components/charts/StatisticsLegend.vue
+++ b/src/components/charts/StatisticsLegend.vue
@@ -13,7 +13,6 @@ export default {
       immediate: true,
       deep: true,
       handler (n) {
-        // console.info(n)
       }
     }
   }
@@ -22,4 +21,4 @@ export default {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index da2ab6ba..8cc78fc4 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -4,6 +4,7 @@
  * @description chart option和一些工具
 */
 import { format } from 'echarts'
+import { shortFormatter } from './chartFormatter'
 import _ from 'lodash'
 export const chartColor = ['#73A0FA', '#73DEB3', '#F7C739', '#EB7E65', '#FFAB67', '#A285D2', '#FFA8CB']
 export function getChartColor (index) {
@@ -17,9 +18,7 @@ const line = {
       width: '20px',
       overflow: 'truncate'
     },
-    // formatter: () =>{
-    //   return '1'
-    // }
+    formatter: axiosFormatter,
     className: 'nz-chart-tooltip',
     extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
   },
@@ -27,7 +26,11 @@ const line = {
     type: 'time'
   },
   yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      formatter: shortFormatter
+    }
+
   },
   animation: false,
   grid: {
@@ -71,9 +74,7 @@ const lineWithStatistics = {
       width: '20px',
       overflow: 'truncate'
     },
-    // formatter: () =>{
-    //   return '1'
-    // }
+    formatter: axiosFormatter,
     className: 'nz-chart-tooltip',
     extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
   },
@@ -82,7 +83,11 @@ const lineWithStatistics = {
   },
   animation: false,
   yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      formatter: shortFormatter
+    }
+
   },
   color: chartColor,
   grid: {
@@ -114,9 +119,7 @@ const lineStack = {
       width: '20px',
       overflow: 'truncate'
     },
-    // formatter: () =>{
-    //   return '1'
-    // }
+    formatter: axiosFormatter,
     className: 'nz-chart-tooltip',
     extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
   },
@@ -125,7 +128,11 @@ const lineStack = {
   },
   color: chartColor,
   yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      formatter: shortFormatter
+    }
+
   },
   grid: {
     left: 55,
@@ -183,6 +190,7 @@ const pieWithTable = {
   series: [
     {
       type: 'pie',
+      selectedMode: 'single',
       radius: ['42%', '70%'],
       center: ['30%', '50%'],
       data: [],
@@ -290,6 +298,26 @@ export function getLayout (type) {
 function tooLongFormatter (name) {
   return format.truncateText(name, 110, '12')
 }
-// function axiosFormatter(params) {
-//
-// }
+function axiosFormatter (params) {
+  let str = '<div>'
+  const sum = 0
+  params.forEach((item, i) => {
+    const tData = item.data[0]
+    if (i === 0) {
+      str += '<div style="margin-bottom: 5px">'
+      str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
+      str += '</div>'
+    }
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += `<span class="cn-chart-tooltip-value">
+        ${shortFormatter(item.data[1])}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
diff --git a/src/components/charts/chartFormatter.js b/src/components/charts/chartFormatter.js
new file mode 100644
index 00000000..65ed67a4
--- /dev/null
+++ b/src/components/charts/chartFormatter.js
@@ -0,0 +1,21 @@
+const shortList = [' ', 'K', 'Mil', 'Bil', 'Til', 'Quadrillion', 'Quintillion']
+function asciiCompute (num, ascii, units, dot = 2) {
+  if (!num && num !== 0 && num !== '0') {
+    return ''
+  }
+  num = Number(num)
+  let carry = 0
+  if (num > 1) {
+    const log = Math.log(num) / Math.log(ascii)
+    carry = parseInt(log)
+    num = num / Math.pow(ascii, carry)
+  }
+  if (Number.isInteger(num)) {
+    return num + ' ' + units[carry]
+  } else {
+    return num.toFixed(dot) + ' ' + units[carry]
+  }
+}
+export function shortFormatter (value, index, dot = 2) {
+  return asciiCompute(value, 1000, shortList, dot)
+}
diff --git a/src/components/charts/panel.scss b/src/components/charts/panel.scss
index 3f72a5a3..d592682c 100644
--- a/src/components/charts/panel.scss
+++ b/src/components/charts/panel.scss
@@ -257,6 +257,110 @@
       flex: auto;
       overflow-y: auto;
 
+      .el-table {
+        padding: 0 10px;
+
+        &:before {
+          height: 0;
+        }
+        thead {
+          color: #333;
+        }
+        th.is-leaf, td {
+          border-bottom: none;
+        }
+        th {
+          padding-bottom: 5px;
+        }
+        td {
+          padding: 4px 0;
+          color: #333;
+        }
+      }
+    }
+  }
+  &>.cn-chart__echarts {
+    .cn-chart__header {
+      border-bottom: 1px solid $--content-right-background-color;
+      .header__operations {
+        display: flex;
+        justify-content: end;
+        align-items: center;
+
+        .header__operation.header__operation--table {
+          display: flex;
+          align-items: center;
+          height: 22px;
+          margin-left: 10px;
+          color: $--color-primary;
+          border: 1px solid $--color-primary;
+          border-radius: $--border-radius-primary;
+
+          .option__button {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            padding: 0 5px;
+            cursor: pointer;
+            background-color: white;
+            transition: all linear .2s;
+          }
+          .option__button:hover {
+            background-color: #EFF2F5;
+          }
+          .option__button.icon-group-item:first-of-type:not(:last-of-type) {
+            padding: 0 5px 0 0;
+          }
+          .option__button.icon-group-item:last-of-type:not(:first-of-type) {
+            padding: 0 0 0 5px;
+          }
+          .option__select {
+            .el-input__inner {
+              width: 120px;
+              padding-right: 20px;
+              border: none;
+              height: 100%;
+              line-height: 20px;
+              color: $--color-primary;
+            }
+            .el-input__prefix > div {
+              font-weight: normal;
+              line-height: 19px;
+              color: $--color-primary;
+            }
+            .el-input__suffix {
+              display: flex;
+              .el-input__suffix-inner {
+                line-height: 14px;
+                .el-select__caret {
+                  line-height: 14px;
+                  width: 16px;
+                  color: $--color-primary;
+                }
+              }
+            }
+          }
+          .option__select.select-column {
+            .el-input__inner {
+              width: 120px;
+              padding-left: 8px;
+            }
+          }
+          .icon-group-divide {
+            height: 14px;
+            width: 1px;
+            background-color: $--color-primary;
+          }
+          i {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+    .cn-chart__body {
+      flex: auto;
+      overflow-y: auto;
+
       .el-table {
         padding: 0 10px;
 
@@ -287,3 +391,12 @@
     font-size: 12px;
   }
 }
+//.cn-chart-select{
+//  display: flex;
+//  align-items: center;
+//  height: 22px;
+//  margin-left: 10px;
+//  color: #0091ff;
+//  border: 1px solid #0091ff;
+//  border-radius: 2px;
+//}
diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue
index 14399080..c5600d04 100644
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -231,7 +231,6 @@ export default {
       immediate: true,
       deep: true,
       handler (n, o) {
-        // console.log(n)
       }
     }
   }
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 7dd27eb5..28558f64 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -46,3 +46,4 @@ export const position = {
 
 export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
 export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
+export const chartPieTableTopOptions = [{ name: 'Sessions', value: 'sessions' }, { name: 'Packets', value: 'packets' }, { name: 'Bytes', value: 'bytes' }] // table类型图表的TOP-N选项
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index c190f113..2aa7bd47 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -44,21 +44,22 @@
   >
     <template #title v-if="layout.indexOf(layoutConstant.HEADER) > -1">
       {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
-      <span v-if="isEchartsWithTable">
+    </template>
+    <template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
+      <div class="header__operation header__operation--table">
         <el-select
                 size="mini"
-                v-model="table.limit"
+                v-model="orderPieTable"
                 class="option__select select-topn"
                 placeholder=""
                 popper-class="option-popper"
+                @change="orderPieTableChange"
         >
-          <el-option v-for="item in chartTableTopOptions" :key="item" :value="item">TOP&nbsp;{{item}}</el-option>
+          <el-option v-for="item in chartPieTableTopOptions" :key="item.value" :value="item.value">&nbsp{{item.name}}</el-option>
           <template #prefix>TOP&nbsp;</template>
         </el-select>
-      </span>
-    </template>
-    <template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
-      <i class="cn-icon cn-icon-more-light"></i>
+      </div>
+      <i class="cn-icon cn-icon-more-light margin-l-10"></i>
     </template>
     <template #default>
       <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
@@ -66,7 +67,7 @@
     <template #footer v-if="layout.indexOf(layoutConstant.FOOTER) > -1" :class="{}">
       <!-- 带Table的饼图，展示Table -->
       <template v-if="isEchartsWithTable">
-        <pie-table :tableData="pieTableData" ref="pieTable"/>
+        <pie-table :tableData="pieTableData" ref="pieTable" :chartInfo="chartInfo" :start-time="startTime" :end-time="endTime" :order="orderPieTable"/>
       </template>
       <template v-else-if="isEchartsWithStatistics">
         <statistics-legend :data="statisticsData"></statistics-legend>
@@ -165,7 +166,7 @@ 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 } from '@/utils/constants'
+import { chartTableDefaultPageSize, chartTableTopOptions, chartPieTableTopOptions } from '@/utils/constants'
 import { get } from '@/utils/http'
 import { replaceUrlPlaceholder, getCapitalGeo } from '@/utils/tools'
 
@@ -202,11 +203,14 @@ export default {
       pieTableData: [],
       singleValue: '-',
       activeTab: '',
-      statisticsData: []
+      statisticsData: [],
+      orderPieTable: chartPieTableTopOptions[0].value,
+      selectPieChartName: ''
     }
   },
   methods: {
     initChart () {
+      const self = this
       const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
       if (this.isMap) {
         this.myChart = this.initMap(`chart${this.chartInfo.id}`)
@@ -303,41 +307,7 @@ export default {
         this.myChart = echarts.init(dom)
         if (chartParams) {
           if (this.isEchartsWithTable) {
-            const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10 } // 统计数据的查询参数
-            const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: this.endTime, limit: 10 } // 统计数据的查询参数
-            get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
-              if (response.code === 200) {
-                const data = response.data.result
-                this.chartOption.series[0].data = data.map(d => {
-                  return {
-                    data: d,
-                    name: d[chartParams.nameColumn],
-                    value: parseInt(d[chartParams.valueColumn])
-                  }
-                })
-                if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
-                  this.chartOption.legend.type = 'scroll'
-                }
-                this.myChart.setOption(this.chartOption)
-                this.$nextTick(() => {
-                  this.myChart.resize()
-                })
-                tableQueryParams[chartParams.nameColumn] = data[0][chartParams.nameColumn]
-                get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
-                  if (response2.code === 200) {
-                    this.pieTableData = response2.data.result
-                  }
-                })
-              }
-            })
-
-            this.myChart.on('click', function (echartParams) {
-              get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response => {
-                if (response.code === 200) {
-                  this.pieTableData = response.data.result
-                }
-              })
-            })
+            this.chartWithPieTableInit(chartParams)
           } else if (this.isEchartsWithStatistics) {
             const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
             get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
@@ -443,7 +413,64 @@ export default {
     },
     getTargetPageData (pageNum, pageSize, tableData) {
       return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
-    }
+    },
+    orderPieTableChange () {
+      const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
+      this.myChart.off('click')
+      this.chartWithPieTableInit(chartParams)
+    },
+    chartWithPieTableInit (chartParams) {
+      chartParams.valueColumn = this.orderPieTable
+      const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable } // 统计数据的查询参数
+      const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: this.endTime, limit: 10, order: this.orderPieTable } // 统计数据的查询参数
+      tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方
+      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+        if (response.code === 200) {
+          const data = response.data.result
+          this.chartOption.series[0].data = data.map(d => {
+            if (chartParams.nameColumn === 'fqdnCategoryName') {
+              tableQueryParams[chartParams.nameColumn].push(d[chartParams.nameColumn])
+            }
+            return {
+              data: d,
+              name: d[chartParams.nameColumn],
+              value: parseInt(d[chartParams.valueColumn])
+            }
+          })
+          if (tableQueryParams[chartParams.nameColumn].length) {
+            // tableQueryParams[chartParams.nameColumn] = JSON.stringify(tableQueryParams[chartParams.nameColumn])
+          }
+          if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
+            this.chartOption.legend.type = 'scroll'
+          }
+          this.myChart.setOption(this.chartOption)
+          this.$nextTick(() => {
+            this.myChart.resize()
+          })
+          get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
+            if (response2.code === 200) {
+              this.pieTableData = response2.data.result
+            }
+          })
+        }
+      })
+
+      this.myChart.on('click', function (echartParams) {
+        const childrenParams = { startTime: parseInt(self.startTime / 1000), endTime: parseInt(self.endTime / 1000), limit: 10 }
+        childrenParams[chartParams.nameColumn] = echartParams.name
+        if (self.selectPieChartName === echartParams.name) {
+          self.selectPieChartName = ''
+          childrenParams[chartParams.nameColumn] = tableQueryParams[chartParams.nameColumn]
+        } else {
+          self.selectPieChartName = echartParams.name
+        }
+        get(replaceUrlPlaceholder(chartParams.urlTable, childrenParams)).then(response2 => {
+          if (response2.code === 200) {
+            self.pieTableData = response2.data.result
+          }
+        })
+      })
+    },
   },
   computed: {
     computePosition () {
@@ -465,6 +492,7 @@ export default {
       chartInfo,
       layoutConstant,
       chartTableTopOptions,
+      chartPieTableTopOptions,
       chartOption: getOption(props.chart.type),
       isEcharts: isEcharts(props.chart.type),
       isEchartsWithTable: isEchartsWithTable(props.chart.type),
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index de997dc7..53132a0d 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -101,6 +101,7 @@ export default {
           chart.i = chart.id
           return chart
         })
+        // this.chartList = [this.chartList[7], this.chartList[12]]
       }
     },
     timeRefreshChange () {

From 793870cefdedec3c81507fd45bad87837da6c0d9 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 7 Jul 2021 17:34:19 +0800
Subject: [PATCH 3/7] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E7=9A=84=E7=9B=B8=E5=85=B3bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/PieTable.vue | 37 ++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/charts/PieTable.vue b/src/components/charts/PieTable.vue
index 63c0727b..4f1c762c 100644
--- a/src/components/charts/PieTable.vue
+++ b/src/components/charts/PieTable.vue
@@ -5,14 +5,17 @@
             class="pie-table"
             :data="pieTableData"
             style="width: 100%;border: 1px solid #E7EAED"
-            @expand-change="expandChange"
+            :row-key="getRowKey"
+            @expand-change="currentChange"
+            current-row-key="domain"
+            :expand-row-keys="expandRowKeys"
             :size="'mini'"
             :height="'100%'">
         <el-table-column type="expand" :min-width="'5%'">
-            <template #default="props">
+            <template #default="props" style="height: auto">
                 <el-table
                         class="expand-table"
-                        :data=" props.row.children"
+                        :data="childrenTableData"
                         style="width: 100%;"
                         :show-header="false"
                         :size="'mini'"
@@ -107,6 +110,8 @@ export default {
       loading: false,
       nameColumn: '',
       pieTableData: [],
+      childrenTableData: [],
+      expandRowKeys: [],
       tableTitles: [
         {
           label: this.$t('chart.pieTable.domain'),
@@ -173,24 +178,33 @@ export default {
     // toggleRowExpansion (row) {
     //   this.$refs.table.toggleRowExpansion(row)
     // },
-    expandChange (row) {
-      const nameColumnKey = this.nameColumn === 'fqdnCategoryName' ? 'categoryName' : 'reputationLevel'
+    currentChange (row, expandedRows) {
+      if (this.expandRowKeys[0] && row.domain === this.expandRowKeys[0].domain) {
+        this.expandRowKeys = []
+      } else {
+        this.expandRowKeys = [row.domain]
+      }
+
+      // this.$refs.table.toggleRowExpansion(row)
       const url = JSON.parse(this.chartInfo.params).urlChildrenTable
       const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), order: this.order, domain: row.domain }
       get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
         if (response2.code === 200) {
-          row.children = response2.data.result
+          this.childrenTableData = response2.data.result
         }
       })
+    },
+    getRowKey (row) {
+      return row.domain
     }
   }
 }
 </script>
 
-<style scoped>
-/deep/ .el-table__expanded-cell[class*=cell]{
-    padding: 0;
-}
+<style scoped lang="scss">
+    /deep/ .el-table__expanded-cell[class*=cell]{
+        padding: 0;
+    }
     .expand-table /deep/ .el-table__body .el-table__row:last-of-type td{
         border: none;
     }
@@ -203,5 +217,8 @@ export default {
     .expand-table{
         font-weight: 400;
         color: #606266;
+        /deep/ .el-table__body-wrapper{
+            height: auto !important;
+        }
     }
 </style>

From b8b75f0ae2077e8c8b0e1cc6342678d4406ec364 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 7 Jul 2021 17:57:25 +0800
Subject: [PATCH 4/7] =?UTF-8?q?style=EF=BC=9A=E9=A5=BC=E5=9B=BE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/chart-options.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index 47e9dcea..211e9908 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -194,6 +194,10 @@ const pieWithTable = {
     {
       type: 'pie',
       selectedMode: 'single',
+      itemStyle: {
+        borderRadius: 5,
+        borderWidth: 1
+      },
       radius: ['42%', '70%'],
       center: ['30%', '50%'],
       data: [],

From 5f2fd9f07ec5702b1312c6d71958c13e8fde7110 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 7 Jul 2021 18:33:05 +0800
Subject: [PATCH 5/7] =?UTF-8?q?style=EF=BC=9A=20=E5=8E=BB=E9=99=A4?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/PieTable.vue     | 2 +-
 src/components/charts/chart-options.js | 6 +-----
 src/views/charts/Chart.vue             | 1 +
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/charts/PieTable.vue b/src/components/charts/PieTable.vue
index 4f1c762c..9770c468 100644
--- a/src/components/charts/PieTable.vue
+++ b/src/components/charts/PieTable.vue
@@ -179,7 +179,7 @@ export default {
     //   this.$refs.table.toggleRowExpansion(row)
     // },
     currentChange (row, expandedRows) {
-      if (this.expandRowKeys[0] && row.domain === this.expandRowKeys[0].domain) {
+      if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
         this.expandRowKeys = []
       } else {
         this.expandRowKeys = [row.domain]
diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index 211e9908..b098968d 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -188,16 +188,12 @@ const pieWithTable = {
     itemHeight: 10, // 设置高度
     itemGap: 20,
     selectedMode: false,
-    formatter: tooLongFormatter
+    // formatter: tooLongFormatter
   },
   series: [
     {
       type: 'pie',
       selectedMode: 'single',
-      itemStyle: {
-        borderRadius: 5,
-        borderWidth: 1
-      },
       radius: ['42%', '70%'],
       center: ['30%', '50%'],
       data: [],
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 28cb689a..0735acef 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -424,6 +424,7 @@ export default {
       this.chartWithPieTableInit(chartParams)
     },
     chartWithPieTableInit (chartParams) {
+      const self = this
       chartParams.valueColumn = this.orderPieTable
       const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable } // 统计数据的查询参数
       const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: this.endTime, limit: 10, order: this.orderPieTable } // 统计数据的查询参数

From f1eb48e7edd95d2ed6e9bbdc743808208c6ab7a6 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 7 Jul 2021 18:47:52 +0800
Subject: [PATCH 6/7] =?UTF-8?q?feat=EF=BC=9A=20=E6=B7=BB=E5=8A=A0=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=9A=84=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/charts/Chart.vue | 40 +++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 0735acef..378a472d 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -103,6 +103,7 @@
             class="option__select select-topn"
             placeholder=""
             popper-class="option-popper"
+            @change="tabelLimtChange"
         >
           <el-option v-for="item in chartTableTopOptions" :key="item" :value="item">TOP&nbsp;{{item}}</el-option>
           <template #prefix>TOP&nbsp;</template>
@@ -115,6 +116,7 @@
             class="option__select select-column"
             :placeholder="$t('common.field')"
             popper-class="option-popper"
+            @change="tabelLimtChange"
         >
           <el-option v-for="item in table.tableColumns" :key="item" :value="item">{{item}}</el-option>
         </el-select>
@@ -195,7 +197,7 @@ export default {
       table: {
         pageSize: chartTableDefaultPageSize,
         limit: chartTableTopOptions[0], // top-n
-        orderBy: '',
+        orderBy: 'sessions',
         tableColumns: [], // table字段
         tableData: [], // table的所有数据
         currentPageData: [] // table当前页的数据
@@ -356,21 +358,7 @@ export default {
         }
       } else if (this.isTable) {
         if (chartParams) {
-          const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 100, order: 'sessions' }
-          get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
-            if (response.code === 200) {
-              const tableColumns = new Set()
-              response.data.result.forEach(d => {
-                Object.keys(d).forEach(k => {
-                  tableColumns.add(k)
-                })
-              })
-              this.table.tableColumns = tableColumns
-              this.table.tableData = response.data.result
-              this.table.orderBy = this.table.tableColumns[0]
-              this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
-            }
-          })
+          this.initChartTable(chartParams)
         }
       } else if (this.isSingleValue) {
         if (chartParams) {
@@ -476,6 +464,26 @@ export default {
         })
       })
     },
+    tabelLimtChange () {
+      const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
+      this.initChartTable(chartParams)
+    },
+    initChartTable (chartParams) {
+      const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: this.table.limit, order: this.table.orderBy }
+      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+        if (response.code === 200) {
+          const tableColumns = new Set()
+          response.data.result.forEach(d => {
+            Object.keys(d).forEach(k => {
+              tableColumns.add(k)
+            })
+          })
+          this.table.tableColumns = Array.from(tableColumns)
+          this.table.tableData = response.data.result
+          this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
+        }
+      })
+    }
   },
   computed: {
     computePosition () {

From 33823581424a80aeb4a1c470210e56ded19f1d49 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 7 Jul 2021 22:58:52 +0800
Subject: [PATCH 7/7] =?UTF-8?q?perf:=20entities=E9=83=A8=E5=88=86=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/entities/LeftFilter.vue |  72 +++++++++++++++
 src/utils/api.js                       |  20 ++++-
 src/utils/constants.js                 |   6 ++
 src/views/entities/EntityExplorer.vue  | 118 ++++++++++++++++++++++++-
 4 files changed, 209 insertions(+), 7 deletions(-)
 create mode 100644 src/components/entities/LeftFilter.vue

diff --git a/src/components/entities/LeftFilter.vue b/src/components/entities/LeftFilter.vue
new file mode 100644
index 00000000..50d9bcf5
--- /dev/null
+++ b/src/components/entities/LeftFilter.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="entity-left-filter">
+    <div class="filter__header">{{$t('entities.filter')}}</div>
+    <div class="filter__body">
+      <el-collapse v-model="active">
+        <el-collapse-item
+            v-for="(f, i) in filterData"
+            :key="i"
+            :title="f.title"
+            :name="`${i}`"
+            class="filter__collapse"
+        >
+          <el-tree
+              :data="f.data"
+          >
+            <template #default="{ node, data }">
+              <span>{{data[f.key]}}-{{data.count}}</span>
+            </template>
+          </el-tree>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LeftFilter',
+  props: {
+    filterData: Array
+  },
+  data () {
+    return {
+      active: ['1']
+    }
+  },
+  mounted () {
+    console.info(this.filterData)
+  }
+}
+</script>
+
+<style lang="scss">
+.entity-left-filter {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border: 1px solid $--right-box-border-color;
+
+  .filter__header {
+    background-color: #FAFAFA;
+    padding-left: 8px;
+    height: 36px;
+    line-height: 36px;
+    color: #333;
+    font-size: 14px;
+  }
+  .filter__body {
+    display: flex;
+    flex-direction: column;
+
+    .filter__collapse {
+      max-height: 50%;
+
+      .el-collapse-item__header {
+        padding-left: 10px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/utils/api.js b/src/utils/api.js
index 5fc4feb9..82be99c9 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -5,7 +5,6 @@
 */
 import { get, post } from '@/utils/http'
 import { sortByOrderNum } from '@/permission'
-import { storageKey, iso36112 } from '@/utils/constants'
 
 export const api = {
   // 系统相关
@@ -14,7 +13,10 @@ export const api = {
   dict: '/sys/dict',
   // 业务
   panel: '/visual/panel',
-  chart: '/visual/chart'
+  chart: '/visual/chart',
+  entityIpFilter: '/interface/entity/ip/filter',
+  entityDomainFilter: '/interface/entity/domain/filter',
+  entityAppFilter: '/interface/entity/app/filter'
 }
 /* panel */
 export async function getPanelList (params) {
@@ -30,6 +32,18 @@ export async function getChartList (params) {
 export async function getChart (id) {
   return await getData(`${api.chart}/${id}`)
 }
+/* ip类型entity过滤器数据 */
+export async function getEntityIpFilterList (params) {
+  return await getData(api.entityIpFilter, params, true)
+}
+/* domain类型entity过滤器数据 */
+export async function getEntityDomainFilterList (params) {
+  return await getData(api.entityDomainFilter, params, true)
+}
+/* app类型entity过滤器数据 */
+export async function getEntityAppFilterList (params) {
+  return await getData(api.entityAppFilter, params, true)
+}
 /* 字典 */
 export async function getDictList (params) {
   return await getData(api.dict, params, true)
@@ -39,7 +53,7 @@ export async function getData (url, params = {}, isQueryList) {
   const request = new Promise(resolve => {
     get(url, params).then(response => {
       if (response.code === 200) {
-        resolve(isQueryList ? response.data.list : response.data)
+        resolve(isQueryList ? response.data.list || response.data.result : response.data || response.data.result)
       }
     })
   })
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 28558f64..ac76dcd3 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -44,6 +44,12 @@ export const position = {
   }
 }
 
+export const entityType = {
+  ip: 'IP',
+  domain: 'Domain',
+  app: 'APP'
+}
+
 export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
 export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
 export const chartPieTableTopOptions = [{ name: 'Sessions', value: 'sessions' }, { name: 'Packets', value: 'packets' }, { name: 'Bytes', value: 'bytes' }] // table类型图表的TOP-N选项
diff --git a/src/views/entities/EntityExplorer.vue b/src/views/entities/EntityExplorer.vue
index 77ad4d9b..bfd1a0f9 100644
--- a/src/views/entities/EntityExplorer.vue
+++ b/src/views/entities/EntityExplorer.vue
@@ -1,17 +1,127 @@
 <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>
+      <el-select
+          size="small"
+          style="width: 100%"
+          v-model="filterType"
+      >
+        <el-option v-for="(value, key) in entityType" :key="key" :label="value" :value="key"></el-option>
+      </el-select>
+      <el-input
+          v-model="searchContent"
+          size="small"
+          style="width: 100%"
+          type="text"
+      >
+        <template #prefix>
+          <span style="padding-left: 4px"><i class="el-icon-search"></i></span>
+        </template>
+      </el-input>
+      <!-- 筛选区域 -->
+      <left-filter
+          :filter-data="filterData"
+      ></left-filter>
+      <!-- 内容区域 -->
       <div style="background-color: lightcyan"></div>
     </div>
   </div>
 </template>
 
 <script>
+import { entityType } from '@/utils/constants'
+import { ref } from 'vue'
+import LeftFilter from '@/components/entities/LeftFilter'
+import { getEntityIpFilterList, getEntityDomainFilterList, getEntityAppFilterList } from '@/utils/api'
 export default {
-  name: 'EntityExplorer'
+  name: 'EntityExplorer',
+  data () {
+    return {
+      searchContent: '',
+      filterData: []
+    }
+  },
+  components: {
+    LeftFilter
+  },
+  methods: {
+    async loadData (filterType, conditionGroup) {
+      let data
+      switch (filterType) {
+        case 'ip': {
+          data = await getEntityIpFilterList({ type: conditionGroup })
+          break
+        }
+        case 'domain': {
+          data = await getEntityDomainFilterList({ type: conditionGroup })
+          break
+        }
+        case 'app': {
+          data = await getEntityAppFilterList({ type: conditionGroup })
+          break
+        }
+        default: break
+      }
+      return data
+    }
+  },
+  watch: {
+    filterType (n) {
+      const requests = []
+      const data = []
+      switch (n) {
+        case 'ip': {
+          requests.push(this.loadData(n, 'country'))
+          requests.push(this.loadData(n, 'asn'))
+          data.push({ title: this.$t('entities.countryOrRegion'), key: 'country' })
+          data.push({ title: this.$t('entities.systemNumber'), key: 'asn' })
+          break
+        }
+        case 'domain': {
+          requests.push(this.loadData(n, 'group'))
+          requests.push(this.loadData(n, 'level'))
+          data.push({ title: this.$t('entities.group'), key: 'group' })
+          data.push({ title: this.$t('entities.level'), key: 'level' })
+          break
+        }
+        case 'app': {
+          requests.push(this.loadData(n, 'category'))
+          requests.push(this.loadData(n, 'risk'))
+          data.push({ title: this.$t('entities.category'), key: 'category' })
+          data.push({ title: this.$t('entities.risk'), key: 'risk' })
+          break
+        }
+        default: break
+      }
+      Promise.all(requests).then(responses => {
+        data.forEach((d, i) => {
+          d.data = responses[i]
+        })
+        this.filterData = data
+      })
+    }
+  },
+  async mounted () {
+    const country = await this.loadData(this.filterType, 'country')
+    const asn = await this.loadData(this.filterType, 'asn')
+    this.filterData.push({
+      title: this.$t('entities.countryOrRegion'),
+      key: 'country',
+      data: country
+    })
+    this.filterData.push({
+      title: this.$t('entities.systemNumber'),
+      key: 'asn',
+      data: asn
+    })
+  },
+  setup () {
+    const filterType = ref(Object.keys(entityType)[0])
+    return {
+      entityType,
+      filterType
+    }
+  }
 }
 </script>