CN-240 feat: 实体列表下拉详情（部分）

2021-12-31 10:55:49 +08:00
parent 21018274d5
commit e37e967b5d
12 changed files with 630 additions and 197 deletions
--- a/src/assets/css/components/components/charts/panel.scss
+++ b/src/assets/css/components/components/charts/panel.scss
@@ -697,6 +697,24 @@
 //  border: 1px solid #0091ff;
 //  border-radius: 2px;
 //}
+.cn-chart__single-value.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
+  .single-value__icon {
+    width: 38px;
+    height: 38px;
+
+    i {
+      font-size: 15px;
+    }
+  }
+  .single-value__content {
+    .content__data {
+      font-size: 14px;
+    }
+    .content__title {
+      font-size: 12px;
+    }
+  }
+}
 .cn-chart__single-value.cn-chart__single-value--icon-left {
  display: flex;
  align-items: center;
--- a/src/assets/css/components/views/entityExplorer/entityFilter.scss
+++ b/src/assets/css/components/views/entityExplorer/entityFilter.scss
@@ -66,7 +66,7 @@
    position: absolute;
    top: 210px;
    left: 580px;
-    width: 420px;
+    width: 440px;
    color: #606266;
    background: #fff;
    border-radius: 4px;
--- a/src/assets/css/components/views/entityExplorer/search/explorerSearch.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorerSearch.scss
@@ -6,6 +6,7 @@
  background-image: url('~@/assets/img/cn-explore-bg.svg');
  background-repeat: no-repeat;
  background-position: 0 100%;
+  background-size: 100%;
  margin-bottom: 10px;

  &.explorer-search--show-list {
--- a/src/components/advancedSearch/AdvancedSearch.vue
+++ b/src/components/advancedSearch/AdvancedSearch.vue
@@ -2,7 +2,8 @@
  <el-input
      class="advanced-search"
      :class="{'advanced-search--show-list': showList}"
-      v-model="searchContent"
+      v-model="searchContentTemp"
+      @keyup.enter="enter"
  >
    <template #suffix>
      <div class="search__suffixes" v-if="!showList">
@@ -37,12 +38,72 @@ export default {
  },
  data () {
    return {
-      searchContent: ''
+      searchContentTemp: '', // 搜索框内的文本内容，按回车键后为searchContent赋值
+      searchContent: '', // 查询语句
+      searchParams: null // 搜索参数，格式为[{ name: xxx, value: xxx }, ...]
    }
  },
  methods: {
    search () {
-      this.$emit('search', this.searchContent)
+      this.$emit('search', this.searchParams)
+    },
+    reset () {
+      this.searchParams = null
+      this.searchParams = []
+    },
+    addParams (params) {
+      if (params) {
+        const newParams = { ...this.searchParams, ...params }
+        this.searchContentTemp = this.objToStr(newParams)
+        this.enter()
+      }
+    },
+    strToObj (n) {
+      const paramsArr = n.split(/\s[aA][nN][dD]\s/)
+      const paramsObj = {}
+      paramsArr.forEach(string => {
+        const param = string.split('=')
+        if (param.length > 1) {
+          let value = param[1].trim()
+          const valueArr = value.split('"')
+          if (valueArr.length > 2) {
+            value = valueArr[1].trim()
+          }
+          paramsObj[param[0].trim()] = value
+        }
+      })
+      return paramsObj
+    },
+    objToStr (obj) {
+      return Object.keys(obj).map(k => {
+        return `${k}="${obj[k]}"`
+      }).join(' AND ')
+    },
+    enter () {
+      if (!this.searchContentTemp) {
+        this.reset()
+      } else {
+        this.searchContent = this.searchContentTemp
+      }
+    }
+  },
+  watch: {
+    searchContent (n) {
+      if (n) {
+        this.searchParams = this.strToObj(n)
+      } else {
+        this.reset()
+      }
+      this.searchContentTemp !== n && (this.searchContentTemp = n)
+    },
+    searchParams: {
+      deep: true,
+      handler (n) {
+        if (n) {
+          // 请求接口，获取左侧过滤条件和右侧entity列表
+          this.search()
+        }
+      }
    }
  }
 }
--- a/src/components/entities/EntityTop.vue
+++ b/src/components/entities/EntityTop.vue
@@ -1,37 +1,44 @@
 <template >
-    <div class="entity-pop-custom" v-ele-click-outside="esc"  v-bind:style="entityTopStyle">
-        <div class="pop-title" >
-            <div>
-                <i :class="item.icon"></i>
-                <span>{{item.label}}</span>
-            </div>
-            <button @click="esc" class="el-dialog__headerbtn" type="button"><i class="el-dialog__close el-icon el-icon-close"></i></button>
-        </div>
-        <div class="filter-top-box" >
-            <div class="filter-top-body">
-                <div class="filter-top-type">{{item.value}}{{$t('overall.operator')}}{{item.label}}</div>
-                <el-table :data="entityTopTenData" style="width: 100%"
-                          :header-cell-style="tableHeaderCellStyle"
-                          :header-row-style="tableHeaderRowStyle"
-                          :row-style="rowStyle"
-                          class="customer-no-border-table"
-                          :cell-style="{'text-align':'left','padding': '1px 0','border':'0px'}">
-                    <el-table-column label="Top10" type="index" :index="indexMethod" width="81"/>
-                    <el-table-column prop="name" :label="item.label" width="100" />
-                    <el-table-column prop="value" :label="$t('overall.number')" width="79" />
-                    <el-table-column prop="rate" :label="$t('overall.percent')" >
-                        <template #default="scope">
-                            <div class="top-table-percent" >
-                                <div >{{ scope.row.percent }}%</div>
-                                <div class="top-table-progress" ><el-progress :percentage="scope.row.percent" :show-text="false" color="#23BF9A" ></el-progress></div>
-                            </div>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-        </div>
-
+  <div class="entity-pop-custom" v-ele-click-outside="esc"  v-bind:style="entityTopStyle">
+    <div class="pop-title" >
+      <div>
+        <i :class="item.icon"></i>
+        <span>{{item.label}}</span>
+      </div>
+      <button @click="esc" class="el-dialog__headerbtn" type="button"><i class="el-dialog__close el-icon el-icon-close"></i></button>
    </div>
+    <div class="filter-top-box" >
+      <div class="filter-top-body">
+        <div class="filter-top-type">{{item.value}}{{$t('overall.operator')}}{{item.label}}</div>
+        <el-table
+            :data="entityTopTenData"
+            :header-cell-style="tableHeaderCellStyle"
+            :header-row-style="tableHeaderRowStyle"
+            :row-style="rowStyle"
+            :cell-style="{'text-align':'left','padding': '1px 0','border':'0px'}"
+            class="customer-no-border-table"
+            style="width: 100%"
+            @row-click="filter"
+        >
+          <el-table-column label="Top10" type="index" :index="indexMethod" width="81"/>
+          <el-table-column prop="name" :label="item.label" width="120">
+            <template #default="scope">
+              <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" :title="scope.row.name">{{scope.row.name}}</div>
+            </template>
+          </el-table-column>
+            <el-table-column prop="count" :label="$t('overall.number')" width="79" />
+            <el-table-column prop="percent" :label="$t('overall.percent')" >
+              <template #default="scope">
+                <div class="top-table-percent" >
+                  <div >{{ scope.row.percent }}%</div>
+                  <div class="top-table-progress"><el-progress :percentage="scope.row.percent" :show-text="false" color="#23BF9A"></el-progress></div>
+                </div>
+              </template>
+            </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
 </template>

 <script>
@@ -46,55 +53,7 @@ export default {
      },
      custom: [],
      item: {},
-      entityTopTenData: [
-        {
-          name: '中国',
-          value: '376',
-          percent: 20
-        },
-        {
-          name: '美国',
-          value: '298',
-          percent: 18
-        },
-        {
-          name: '英国',
-          value: '268',
-          percent: 16
-        }, {
-          name: '意大利',
-          value: '230',
-          percent: 15
-        },
-        {
-          name: '泰国',
-          value: '210',
-          percent: 13
-        },
-        {
-          name: '越南',
-          value: '190',
-          percent: 10
-        }, {
-          name: '马尔代夫',
-          value: '172',
-          percent: 9
-        }, {
-          name: '马来西亚',
-          value: '156',
-          percent: 6
-        },
-        {
-          name: '新加坡',
-          value: '140',
-          percent: 5
-        },
-        {
-          name: '缅甸',
-          value: '120',
-          percent: 4
-        }
-      ]
+      entityTopTenData: []
    }
  },
  created () {
@@ -107,12 +66,20 @@ export default {
    esc () {
      this.$emit('close')
    },
-    initEntityTop (leftVal, itemVal, data) {
+    filter (row) {
+      this.$emit('filter', row.name, this.item)
+    },
+    initEntityTop (leftVal, itemVal, data, totalCount) {
      // this.entityTopStyle.top = topVal+'px'
      this.entityTopStyle.left = leftVal + 'px'
      this.item = itemVal
      if (data.length > 0) {
-        this.entityTopTenData = data
+        this.entityTopTenData = data.map(d => {
+          return {
+            ...d,
+            percent: (parseFloat(d.count / totalCount) * 100).toFixed(2)
+          }
+        })
      }
    },
    indexMethod (index) {
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -21,9 +21,10 @@ export const api = {
  // 业务
  panel: '/visual/panel',
  chart: '/visual/chart',
-  entityList: '/interface/entity/list',
+  entityList: '/interface/entity/list/basic',
  entityCount: '/interface/entity/total',
-  entityFilter: '/interface/entity/filter',
+  entityFilter: '/interface/entity/filter/count',
+  entityFilterTop: '/interface/entity/filter/top',
  ipThroughput: '/interface/entity/ip/detail/throughput',
  domainThroughput: '/interface/entity/domain/detail/throughput',
  appThroughput: '/interface/entity/app/detail/throughput',
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -13,6 +13,7 @@
    </div>
    <!-- 搜索组件 -->
    <explorer-search
+        ref="search"
        :class="{'explorer-search--show-list': showList}"
        :show-list="showList"
        @search="search"
@@ -21,6 +22,9 @@
    <div class="explorer-container" v-if="showList">
      <entity-filter
        :filter-data="filterData"
+        :search-params="searchParams"
+        :time-filter="timeFilter"
+        @filter="filter"
      ></entity-filter>
      <entity-list
        :list-data="listData"
@@ -115,7 +119,10 @@ export default {
    return {
      showList: false,
      listMode: 'list', // entity列表的模式，list|block
-      timeFilter: {},
+      timeFilter: {
+        startTime: 1639989600,
+        endTime: 1639992840
+      },

      entityAppTotal: '-',
      entityAppNew: '-',
@@ -129,86 +136,106 @@ export default {
      entityIpNew: '-',
      entityIpActive: '-',

+      searchParams: {},
+      showFilter: ['ip', 'app', 'domain'], // ip,domain,app
+      pageObj: {
+        pageNo: 1,
+        pageSize: 20
+      },
      filterData: [
        {
          type: 'ip',
          title: entityType.ip,
+          totalCount: 0,
          data: [
            {
              label: this.$t('overall.country'),
              column: 'country_distinct_count',
+              topColumn: 'ip_location_country', // top弹框查询字段
              icon: entityFilterType.ip[0].icon,
-              value: 15
+              value: 0
            },
            {
              label: this.$t('overall.province'),
              column: 'province_distinct_count',
+              topColumn: 'ip_location_province', // top弹框查询字段
              icon: entityFilterType.ip[1].icon,
-              value: 201
+              value: 0
            },
            {
              label: this.$t('overall.city'),
              column: 'city_distinct_count',
+              topColumn: 'ip_location_city', // top弹框查询字段
              icon: entityFilterType.ip[2].icon,
-              value: 1052
+              value: 0
            },
            {
              label: this.$t('entities.asn'),
              column: 'asn_distinct_count',
+              topColumn: 'ip_asn', // top弹框查询字段
              icon: entityFilterType.ip[3].icon,
-              value: 76
+              value: 0
            }
          ]
        },
        {
          type: 'app',
          title: entityType.app,
+          totalCount: 0,
          data: [
            {
              label: this.$t('entities.category'),
              column: 'category_distinct_count',
+              topColumn: 'app_category', // top弹框查询字段
              icon: entityFilterType.app[0].icon,
-              value: 15
+              value: 0
            },
            {
              label: this.$t('entities.subcategory'),
              column: 'subcategory_distinct_count',
+              topColumn: 'app_subcategory', // top弹框查询字段
              icon: entityFilterType.app[1].icon,
-              value: 201
+              value: 0
            },
            {
              label: this.$t('entities.risk'),
              column: 'risk_distinct_count',
+              topColumn: 'app_risk', // top弹框查询字段
              icon: entityFilterType.app[2].icon,
-              value: 1052
+              value: 0
            }
          ]
        },
        {
          type: 'domain',
          title: entityType.domain,
+          totalCount: 0,
          data: [
            {
              label: this.$t('entities.domainDetail.categoryGroup'),
              column: 'category_group_distinct_count',
+              topColumn: 'domain_category_group', // top弹框查询字段
              icon: entityFilterType.domain[0].icon,
-              value: 31
+              value: 0
            },
            {
              label: this.$t('entities.category'),
              column: 'category_distinct_count',
+              topColumn: 'domain_category', // top弹框查询字段
              icon: entityFilterType.domain[1].icon,
-              value: 82
+              value: 0
            },
            {
              label: this.$t('entities.reputationLevel'),
              column: 'reputation_level_distinct_count',
+              topColumn: 'domain_reputation_level', // top弹框查询字段
              icon: entityFilterType.domain[2].icon,
-              value: 8
+              value: 0
            }
          ]
        }
      ],
+      // listData: []
      listData: JSON.parse(`[
        {
          "entityType": "app",
@@ -219,20 +246,20 @@ export default {
          "appSubcategory": "internet-utility"
        },
        {
-          "entityType": "app",
-          "appName": "suning",
-          "appCategory": "general-internet",
-          "appId": "",
-          "appRisk": "1",
-          "appSubcategory": "internet-utility"
+          "domainCategory": "Streaming Media",
+          "domainCategoryGroup": "IT Resources",
+          "domainReputationScore": 79,
+          "domainName": "9ddm.com",
+          "entityType": "domain",
+          "domainReputationLevel": "Low Risk"
        },
        {
-          "entityType": "app",
-          "appName": "dianping",
-          "appCategory": "general-internet",
-          "appId": "",
-          "appRisk": "1",
-          "appSubcategory": "internet-utility"
+          "ipAsn": "",
+          "ipLocationCountry": "China",
+          "entityType": "ip",
+          "ipLocation_province": "Other",
+          "ipAddr": "116.178.30.96",
+          "ipLocationCity": "Other"
        },
        {
          "entityType": "app",
@@ -380,22 +407,69 @@ export default {
    reload () {

    },
-    search (param) {
+    search (params) {
+      this.searchParams = params
      if (!this.showList) {
        this.showList = true
      }
      // 带参数时，只查询对应类型的entity；不带参数时，3种entity都查
-      if (param) {
-        return '1'
+      if (params && Object.keys(params).length > 0) {
+        this.queryFilter({ entityType: 'ip', q: this.handleQ(params), ...this.timeFilter })
+        this.queryFilter({ entityType: 'app', q: this.handleQ(params), ...this.timeFilter })
+        this.queryFilter({ entityType: 'domain', q: this.handleQ(params), ...this.timeFilter })
+        this.queryList({ q: this.handleQ(params), ...this.timeFilter, ...this.pageObj })
      } else {
-        return ''
+        this.queryFilter({ entityType: 'ip', ...this.timeFilter })
+        this.queryFilter({ entityType: 'app', ...this.timeFilter })
+        this.queryFilter({ entityType: 'domain', ...this.timeFilter })
+        this.queryList({ ...this.timeFilter, ...this.pageObj })
      }
    },
-    queryFilter () {
-
+    /* filter组件内点击后查询 */
+    filter (name, topData) {
+      const params = {}
+      params[topData.topColumn] = name
+      this.$refs.search.addParams(params)
    },
-    queryList () {
-
+    /* 查询filter数据 */
+    queryFilter (params) {
+      get(api.entityFilter, params).then(response => {
+        if (response.data.result) {
+          switch (params.entityType) {
+            case 'ip': {
+              this.filterData[0].data.forEach(d => {
+                d.value = response.data.result[d.column]
+              })
+              this.filterData[0].totalCount = response.data.result.count
+              break
+            }
+            case 'app': {
+              this.filterData[1].data.forEach(d => {
+                d.value = response.data.result[d.column]
+              })
+              this.filterData[1].totalCount = response.data.result.count
+              break
+            }
+            case 'domain': {
+              this.filterData[2].data.forEach(d => {
+                d.value = response.data.result[d.column]
+              })
+              this.filterData[2].totalCount = response.data.result.count
+              break
+            }
+          }
+        }
+      })
+    },
+    queryList (params) {
+      get(api.entityList, params).then(response => {
+        this.listData = response.data.result
+      })
+    },
+    handleQ (params) {
+      return Object.keys(params).map(param => {
+        return `${param}="${params[param]}"`
+      }).join(' AND ')
    },

    getEntityIndexData () {
@@ -404,28 +478,28 @@ export default {
        if (response.code === 200) {
          this.entityAppTotal = response.data.result
        }
-      }),
+      })
      get(api.entityTotal, { entityType: 'domain' }).then(response => {
        if (response.code === 200) {
          this.entityDomainTotal = response.data.result
        }
-      }),
+      })
      get(api.entityTotal, { entityType: 'ip' }).then(response => {
        if (response.code === 200) {
          this.entityIpTotal = response.data.result
        }
-      }),
+      })
      // New
      get(api.entityNew, { entityType: 'app' }).then(response => {
        if (response.code === 200) {
          this.entityAppNew = response.data.result
        }
-      }),
+      })
      get(api.entityNew, { entityType: 'domain' }).then(response => {
        if (response.code === 200) {
          this.entityDomainNew = response.data.result
        }
-      }),
+      })
      get(api.entityNew, { entityType: 'ip' }).then(response => {
        if (response.code === 200) {
          this.entityIpNew = response.data.result
@@ -436,12 +510,12 @@ export default {
        if (response.code === 200) {
          this.entityAppActive = response.data.result
        }
-      }),
+      })
      get(api.entityActive, { entityType: 'domain' }).then(response => {
        if (response.code === 200) {
          this.entityDomainActive = response.data.result
        }
-      }),
+      })
      get(api.entityActive, { entityType: 'ip' }).then(response => {
        if (response.code === 200) {
          this.entityIpActive = response.data.result
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/src/views/entityExplorer/EntityFilter.vue
@@ -1,32 +1,33 @@
 <template >
-    <div class="entity-filter-case " >
-      <div class="filter-case__header">{{$t('entities.filter')}}</div>
-      <div
-          class="entity-filter"
-          v-for="(filter, index) in filterData"
-          :key="index"
-      >
-        <div class="filter__header">{{filter.title}}</div>
-        <div class="filter__body">
-          <div class="filter__row" v-for="(item, i) in filter.data" :key="i"  @click="showTopDailog(i,item,filter.type)"  :ref="`entityTopTen`+i">
-            <div class="row__label">
-              <i :class="item.icon"></i>
-              <span>{{item.label}}</span>
-            </div>
-            <div class="row__value">{{item.value}}</div>
+  <div class="entity-filter-case " >
+    <div class="filter-case__header">{{$t('entities.filter')}}</div>
+    <div
+        class="entity-filter"
+        v-for="(filter, index) in filterData"
+        :key="index"
+    >
+      <div class="filter__header">{{filter.title}}</div>
+      <div class="filter__body">
+        <div class="filter__row" v-for="(item, i) in filter.data" :key="i"  @click="showTopDialog(i, item, filter)"  :ref="`entityTopTen`+i">
+          <div class="row__label">
+            <i :class="item.icon"></i>
+            <span>{{item.label}}</span>
          </div>
+          <div class="row__value">{{item.value}}</div>
        </div>
      </div>
-        <!-- 自定义table列 -->
-        <transition name="el-zoom-in-top">
-            <entity-top
-                    v-show="showTopTen"
-                    ref="entityTopTenPop"
-                    @close="showTopTen = false"
-            ></entity-top>
-        </transition>
-
    </div>
+    <!-- 自定义table列 -->
+    <transition name="el-zoom-in-top">
+      <entity-top
+          v-show="showTopTen"
+          ref="entityTopTenPop"
+          @filter="filter"
+          @close="showTopTen = false"
+      ></entity-top>
+    </transition>
+
+  </div>

 </template>

@@ -41,7 +42,9 @@ export default {
    EntityTop
  },
  props: {
-    filterData: Array
+    filterData: Array,
+    searchParams: Object,
+    timeFilter: Object
  },
  data () {
    return {
@@ -52,44 +55,30 @@ export default {
    }
  },
  methods: {
-    showTopDailog (i, item, type) {
+    showTopDialog (i, item, filter) {
+      const type = filter.type
      const width = this.$refs['entityTopTen' + i].offsetWidth
      const offsetLeft = this.$refs['entityTopTen' + i].offsetLeft
      const leftVal = offsetLeft + width

-      get(api.filterTop, { entityType: type, column: item.column, top: 10 }).then(response => {
+      get(api.filterTop, { entityType: type, q: this.searchParams, column: item.topColumn, top: 10, ...this.timeFilter }).then(response => {
        if (response.code === 200) {
-          const rlt = response.data.result
-
-          let sum = 0
-          rlt.forEach(item => {
-            sum = sum + item.value
-          })
-
-          let curSumPercent = 0
-          rlt.forEach((item, i) => {
-            const per = Number(item.value * 100 / sum).toFixed(0)
-            if ((i + 1) === rlt.length) {
-              item.percent = 100 - curSumPercent
-            } else {
-              item.percent = per
-              curSumPercent = Number(curSumPercent) + Number(per)
-            }
-          })
-          this.$refs.entityTopTenPop.initEntityTop(leftVal, item, rlt)
+          this.$refs.entityTopTenPop.initEntityTop(leftVal, item, response.data.result, filter.totalCount)
        } else {
-          this.$refs.entityTopTenPop.initEntityTop(leftVal, item, [])
+          this.$refs.entityTopTenPop.initEntityTop(leftVal, item, [], filter.totalCount)
        }
      }).catch(e => {
-        this.$refs.entityTopTenPop.initEntityTop(leftVal, item, [])
+        this.$refs.entityTopTenPop.initEntityTop(leftVal, item, [], filter.totalCount)
      }).finally(() => {
        this.showTopTen = true
      })
+    },
+    filter (name, topData) {
+      this.showTopTen = false
+      this.$emit('filter', name, topData)
    }
  },
  mounted () {
-
  }
-
 }
 </script>
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -13,18 +13,18 @@
            <div class="basic-info">
              <template v-if="entityData.entityType === 'ip'">
                <div class="basic-info__item">
-                  <i class="cn-icon cn-icon-country">$t('overall.country')&nbsp;:&nbsp;&nbsp;</i>
-                  <span>$t('overall.country')&nbsp;:&nbsp;&nbsp;</span>
+                  <i class="cn-icon cn-icon-country"></i>
+                  <span>{{$t('overall.country')}}&nbsp;:&nbsp;&nbsp;</span>
                  <span>{{entityData.ipLocationCountry || '-'}}</span>
                </div>
                <div class="basic-info__item">
                  <i class="cn-icon cn-icon-position"></i>
-                  <span>$t('overall.region')&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{$t('overall.region')}}&nbsp;:&nbsp;&nbsp;</span>
                  <span>{{entityData.ipLocationProvince ? (entityData.ipLocationProvince + ', ' + entityData.ipLocationCity) : '-'}}</span>
                </div>
                <div class="basic-info__item">
                  <i class="cn-icon cn-icon-cloud"></i>
-                  <span>$t('overall.asn')&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{$t('entities.asn')}}&nbsp;:&nbsp;&nbsp;</span>
                  <span>{{entityData.ipAsn || '-'}}</span>
                </div>
              </template>
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -1,25 +1,240 @@
 <template>
  <div class="overview-item">
-    <div class="overview__title"></div>
+    <div class="overview__title">{{$t('overall.basicInfo')}}</div>
    <div class="overview__content">
      <div class="overview__row">
-        <div class="row__label"></div>
-        <div class="row__content"></div>
+        <div class="row__label row__label--width130">{{$t('entities.category')}}</div>
+        <div class="row__content">XXX</div>
      </div>
      <div class="overview__row">
-        <div class="row__label"></div>
-        <div class="row__content"></div>
+        <div class="row__label row__label--width130">{{$t('entities.domainDetail.categoryGroup')}}</div>
+        <div class="row__content">XXX</div>
      </div>
      <div class="overview__row">
-        <div class="row__label"></div>
-        <div class="row__content"></div>
+        <div class="row__label row__label--width130">{{$t('entities.reputationLevel')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('entities.registration')}}</div>
+        <div class="row__content">China, Beijing</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('entities.org')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.remark')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.traffic')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.mean')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
+        <div class="row__contents">
+          <div class="row__content">XXX</div>
+          <div class="row__content">XXX</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.relationship')}}</div>
+    <div class="overview__content">
+      <div class="overview__tags">
+        <div class="overview__tag">
+          <span class="tag__value">5</span>
+          <span class="tag__desc">{{$t('entities.relatedApp')}}</span>
+        </div>
+        <div class="overview__tag">
+          <span class="tag__value">8</span>
+          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.networkQuality')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <single-value
+            :type="51"
+            icon="cn-icon cn-icon-sub-category"
+            class="cn-chart__single-value--detail-overview"
+            :loading="false"
+            style="width: 180px;"
+        >
+          <template #title>
+            <span>{{$t('entities.avgRoundTripTime')}}</span>
+          </template>
+          <template #data>
+            <span>12ms</span>
+          </template>
+        </single-value>
+        <single-value
+            :type="51"
+            icon="cn-icon cn-icon-sub-category"
+            class="cn-chart__single-value--detail-overview"
+            :loading="false"
+            style="width: 180px;"
+        >
+          <template #title>
+            <span>{{$t('entities.avgRoundTripTime')}}</span>
+          </template>
+          <template #data>
+            <span>12ms</span>
+          </template>
+        </single-value>
+        <single-value
+            :type="51"
+            icon="cn-icon cn-icon-sub-category"
+            class="cn-chart__single-value--detail-overview"
+            :loading="false"
+            style="width: 180px;"
+        >
+          <template #title>
+            <span>{{$t('entities.avgRoundTripTime')}}</span>
+          </template>
+          <template #data>
+            <span>12ms</span>
+          </template>
+        </single-value>
+        <single-value
+            :type="51"
+            icon="cn-icon cn-icon-sub-category"
+            class="cn-chart__single-value--detail-overview"
+            :loading="false"
+            style="width: 180px;"
+        >
+          <template #title>
+            <span>{{$t('entities.avgRoundTripTime')}}</span>
+          </template>
+          <template #data>
+            <span>12ms</span>
+          </template>
+        </single-value>
+        <single-value
+            :type="51"
+            icon="cn-icon cn-icon-sub-category"
+            class="cn-chart__single-value--detail-overview"
+            :loading="false"
+            style="width: 180px;"
+        >
+          <template #title>
+            <span>{{$t('entities.avgRoundTripTime')}}</span>
+          </template>
+          <template #data>
+            <span>12ms</span>
+          </template>
+        </single-value>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('entities.accessLink')}}</div>
+    <div class="overview__content">
+      <div class="overview__tags">
+        <div class="overview__tag">
+          <span class="tag__value">50%</span>
+          <span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
+        </div>
+        <div class="overview__tag">
+          <span class="tag__value">80%</span>
+          <span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.alert')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.recentAlert')}}</div>
+        <div class="row__content">30</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--high">High</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--middle">Middle</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--low">Low</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="show-more">{{$t('overall.showMore')}}>></div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('entities.securityEvents')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.recentSecurity')}}</div>
+        <div class="row__content">20</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--high">High</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--middle">Middle</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--low">Low</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="show-more">{{$t('overall.showMore')}}>></div>
      </div>
    </div>
  </div>
 </template>

 <script>
+import SingleValue from '@/components/charts/ChartSingleValue'
 export default {
-  name: 'Domain'
+  name: 'Domain',
+  components: {
+    SingleValue
+  }
 }
 </script>
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -1,18 +1,121 @@
 <template>
  <div class="overview-item">
-    <div class="overview__title"></div>
+    <div class="overview__title">{{$t('overall.basicInfo')}}</div>
    <div class="overview__content">
      <div class="overview__row">
-        <div class="row__label"></div>
-        <div class="row__content"></div>
+        <div class="row__label row__label--width130">{{$t('overall.location')}}</div>
+        <div class="row__content">China, Beijing</div>
      </div>
      <div class="overview__row">
-        <div class="row__label"></div>
-        <div class="row__content"></div>
+        <div class="row__label row__label--width130">ASN</div>
+        <div class="row__content">24537</div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.traffic')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
+        <div class="row__content">XXX</div>
      </div>
      <div class="overview__row">
-        <div class="row__label"></div>
-        <div class="row__content"></div>
+        <div class="row__label row__label--width130">{{$t('overall.mean')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
+        <div class="row__contents">
+          <div class="row__content">XXX</div>
+          <div class="row__content">XXX</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.relationship')}}</div>
+    <div class="overview__content">
+      <div class="overview__tags">
+        <div class="overview__tag">
+          <span class="tag__value">5</span>
+          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
+        </div>
+        <div class="overview__tag">
+          <span class="tag__value">8</span>
+          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.alert')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.recentAlert')}}</div>
+        <div class="row__content">30</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--high">High</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--middle">Middle</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--low">Low</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="show-more">{{$t('overall.showMore')}}>></div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('entities.securityEvents')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.recentSecurity')}}</div>
+        <div class="row__content">20</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--high">High</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--middle">Middle</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--low">Low</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="show-more">{{$t('overall.showMore')}}>></div>
      </div>
    </div>
  </div>
--- a/src/views/entityExplorer/search/ExplorerSearch.vue
+++ b/src/views/entityExplorer/search/ExplorerSearch.vue
@@ -4,6 +4,7 @@
    <div class="explorer-search__input-case" :class="{'explorer-search__input-case--question-mark-in-line': showList}">
      <div class="explorer-search__input">
        <advanced-search
+          ref="search"
          :show-list="showList"
          @search="search"
        ></advanced-search>
@@ -40,8 +41,11 @@ export default {
    }
  },
  methods: {
-    search (param) {
-      this.$emit('search', param)
+    search (params) {
+      this.$emit('search', params)
+    },
+    addParams (params) {
+      this.$refs.search.addParams(params)
    }
  }
 }