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/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)
    }
  }
 }