CN-257 Entity Explorer--接口对接

2022-01-04 14:54:26 +08:00
parent 1ebc5f76f5
commit e764fc4b69
9 changed files with 451 additions and 187 deletions
--- a/src/assets/css/components/views/entityExplorer/entityList/detailOverview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detailOverview.scss
@@ -83,6 +83,14 @@
              padding-bottom: 0;
            }
          }
+          .row__charts-msg {
+            width:105px;
+          }
+          .row__charts {
+            height:20px;
+            width:60px;
+            padding-left:5px;
+          }
        }
        .row__desc {
          color: #666666;
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -37,8 +37,26 @@ export const api = {
  entitySecurityNum: '/interface/entity/list/detectionNum',
  ipBytes: '/interface/entity/detail/ip/bytes',
  domainBytes: '/interface/entity/detail/domain/bytes',
-  appBytes: '/interface/entity/detail/app/bytes'
-
+  appBytes: '/interface/entity/detail/app/bytes',
+  // app detail
+  entityAppDetailTraffic: '/interface/entity/detail/overview/app/traffic',
+  entityAppDetailRelation: '/interface/entity/detail/overview/app/relation',
+  entityAppDetailAlert: '/interface/entity/detail/overview/app/alert',
+  entityAppDetailSecurity: '/interface/entity/detail/overview/app/security',
+  // domain detail
+  entityDomainDetailBasic: '/interface/entity/detail/overview/domain/basic',
+  entityDomainDetailTraffic: '/interface/entity/detail/overview/domain/traffic',
+  entityDomainDetailRelation: '/interface/entity/detail/overview/domain/relation',
+  entityDomainDetailNetworkQuantity: '/interface/entity/detail/overview/domain/networkQuantity',
+  entityDomainDetailLinkIn: '/interface/entity/detail/overview/domain/linkIn',
+  entityDomainDetailLinkOut: '/interface/entity/detail/overview/domain/linkOut',
+  entityDomainDetailAlert: '/interface/entity/detail/overview/domain/alert',
+  entityDomainDetailSecurity: '/interface/entity/detail/overview/domain/security',
+  // ip detail
+  entityIpDetailTraffic: '/interface/entity/detail/overview/ip/traffic',
+  entityIpDetailRelation: '/interface/entity/detail/overview/ip/relation',
+  entityIpDetailAlert: '/interface/entity/detail/overview/ip/alert',
+  entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security'
 }

 /* panel */
--- a/src/views/entityExplorer/entityList/EntityList.vue
+++ b/src/views/entityExplorer/entityList/EntityList.vue
@@ -26,6 +26,7 @@
          <entity-card
              v-for="(data, index) in listData"
              :entity="data"
+              :index="index"
              :listMode="listMode"
              :timeFilter="timeFilter"
              :key="index"
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -4,19 +4,19 @@
    <div class="overview__content">
      <div class="overview__row">
        <div class="row__label row__label--width130">APP ID</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.appId|| '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('entities.category')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.appCategory|| '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('entities.subcategory')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.appSubcategory || '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('entities.riskLevel')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.appRisk || '-'}}</div>
      </div>
    </div>
  </div>
@@ -25,17 +25,25 @@
    <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 class="row__content">{{entityData.max}} Kb/s</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('overall.mean')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.avg}} Kb/s</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 class="row__content">
+            <div class="row__charts-msg">{{$t('overall.sent')}}：{{entityData.bytesSentRate}}bps</div>
+            <!-- 曲线-->
+            <div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
+          </div>
+          <div class="row__content">
+            <div class="row__charts-msg">{{$t('overall.received')}}：{{entityData.bytesReceivedRate}}bps</div>
+            <!-- 曲线-->
+            <div class="row__charts" :id="`entityDetailReceived${entityData.appName}`" ></div>
+          </div>
        </div>
      </div>
    </div>
@@ -45,11 +53,11 @@
    <div class="overview__content">
      <div class="overview__tags">
        <div class="overview__tag">
-          <span class="tag__value">5</span>
+          <span class="tag__value">{{entityData.domainCount}}</span>
          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
        </div>
        <div class="overview__tag">
-          <span class="tag__value">8</span>
+          <span class="tag__value">{{entityData.ipCount}}</span>
          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
        </div>
      </div>
@@ -60,31 +68,15 @@
    <div class="overview__content">
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentAlert')}}</div>
-        <div class="row__content">30</div>
+        <div class="row__content">{{entityData.alertNum || '-'}}</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="overview__row overview__row--small-font"   v-for="alert in entityData.alertList">
+        <div class="row__label row__label--width160">{{alert.startTime}}</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 class="alert-level-tag alert-level-tag--high">{{alert.alertSeverity}}</div>
+          <div>{{alert.alertName}}</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 class="row__desc"></div>
      </div>
      <div class="overview__row overview__row--small-font">
        <div class="show-more">{{$t('overall.showMore')}}>></div>
@@ -96,31 +88,15 @@
    <div class="overview__content">
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentSecurity')}}</div>
-        <div class="row__content">20</div>
+        <div class="row__content">{{entityData.securityNum || '-'}}</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="overview__row overview__row--small-font"   v-for="security in entityData.securityList">
+        <div class="row__label row__label--width160">{{security.startTime}}</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 class="alert-level-tag alert-level-tag--high">{{security.securitySeverity}}</div>
+          <div>{{security.sourceName}}</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 class="row__desc"></div>
      </div>
      <div class="overview__row overview__row--small-font">
        <div class="show-more">{{$t('overall.showMore')}}>></div>
@@ -130,7 +106,44 @@
 </template>

 <script>
+import { api } from '@/utils/api'
+import entityDetailMixin from './entityDetailMixin'
+
 export default {
-  name: 'App'
+  name: 'App',
+  props: {
+    // entity: Object
+  },
+  mixins: [entityDetailMixin],
+  data () {
+    return {
+      // entityData: {}
+      entityType: 'app',
+      trafficUrl: api.entityAppDetailTraffic,
+      relationUrl: api.entityAppDetailRelation,
+      alertUrl: api.entityAppDetailAlert,
+      securityUrl: api.entityAppDetailSecurity,
+      listMode: 'list'
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    getQueryParams () {
+      const now = new Date()
+      const queryParams = {
+        startTime: Math.floor(now.getTime() / 1000 - 3600),
+        endTime: Math.floor(now.getTime() / 1000),
+        appName: this.entityData.appName
+      }
+      return queryParams
+    },
+    handleRelationData (result) {
+      this.entityData.domainCount = result.domainCount
+      this.entityData.ipCount = result.ipCount
+    }
+
+  }
 }
 </script>
--- a/src/views/entityExplorer/entityList/detailOverview/DetailOverview.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/DetailOverview.vue
@@ -1,13 +1,13 @@
 <template>
  <div class="entity-detail-overview">
    <template v-if="entity.entityType === 'ip'">
-      <ip-overview></ip-overview>
+      <ip-overview :entity="entity"></ip-overview>
    </template>
    <template v-else-if="entity.entityType === 'domain'">
-      <domain-overview></domain-overview>
+      <domain-overview :entity="entity"></domain-overview>
    </template>
    <template v-else-if="entity.entityType === 'app'">
-      <app-overview></app-overview>
+      <app-overview :entity="entity"></app-overview>
    </template>
  </div>
 </template>
@@ -16,6 +16,7 @@
 import App from './App'
 import Domain from './Domain'
 import Ip from './Ip'
+
 export default {
  /* 详情概览 */
  name: 'DetailOverview',
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -4,27 +4,27 @@
    <div class="overview__content">
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('entities.category')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.domainCategory || '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('entities.domainDetail.categoryGroup')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.domainCategoryGroup || '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('entities.reputationLevel')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.domainReputationScore || '-'}}</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 class="row__content">{{entityData.domainWhoisAddress || '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('entities.org')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.domainWhoisOrg || '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('overall.remark')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.domainDescription || '-'}}</div>
      </div>
    </div>
  </div>
@@ -33,17 +33,25 @@
    <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 class="row__content">{{entityData.max}} Kb/s</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('overall.mean')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.avg}} Kb/s</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 class="row__content">
+            <div class="row__charts-msg">{{$t('overall.sent')}}：{{entityData.bytesSentRate}}bps</div>
+            <!-- 曲线-->
+            <div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
+          </div>
+          <div class="row__content">
+            <div class="row__charts-msg">{{$t('overall.received')}}：{{entityData.bytesReceivedRate}}bps</div>
+            <!-- 曲线-->
+            <div class="row__charts" :id="`entityDetailReceived${entityData.domainName}`" ></div>
+          </div>
        </div>
      </div>
    </div>
@@ -53,11 +61,11 @@
    <div class="overview__content">
      <div class="overview__tags">
        <div class="overview__tag">
-          <span class="tag__value">5</span>
+          <span class="tag__value">{{entityData.appCount}}</span>
          <span class="tag__desc">{{$t('entities.relatedApp')}}</span>
        </div>
        <div class="overview__tag">
-          <span class="tag__value">8</span>
+          <span class="tag__value">{{entityData.ipCount}}</span>
          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
        </div>
      </div>
@@ -69,7 +77,7 @@
      <div class="overview__row">
        <single-value
            :type="51"
-            icon="cn-icon cn-icon-sub-category"
+            icon="cn-icon cn-icon-time"
            class="cn-chart__single-value--detail-overview"
            :loading="false"
            style="width: 180px;"
@@ -78,63 +86,63 @@
            <span>{{$t('entities.avgRoundTripTime')}}</span>
          </template>
          <template #data>
-            <span>12ms</span>
+            <span>{{entityData.establishLatency?entityData.establishLatency+'ms':'-'}}</span>
          </template>
        </single-value>
        <single-value
            :type="51"
-            icon="cn-icon cn-icon-sub-category"
+            icon="cn-icon cn-icon-http"
            class="cn-chart__single-value--detail-overview"
            :loading="false"
            style="width: 180px;"
        >
          <template #title>
-            <span>{{$t('entities.avgRoundTripTime')}}</span>
+            <span>{{$t('entities.httpResponseLatency')}}</span>
          </template>
          <template #data>
-            <span>12ms</span>
+            <span>{{entityData.httpResponseLatency?entityData.httpResponseLatency+'ms':'-'}}</span>
          </template>
        </single-value>
        <single-value
            :type="51"
-            icon="cn-icon cn-icon-sub-category"
+            icon="cn-icon cn-icon-ssl"
            class="cn-chart__single-value--detail-overview"
            :loading="false"
            style="width: 180px;"
        >
          <template #title>
-            <span>{{$t('entities.avgRoundTripTime')}}</span>
+            <span>{{$t('entities.sslConLatency')}}</span>
          </template>
          <template #data>
-            <span>12ms</span>
+            <span>{{entityData.sslConLatency?entityData.sslConLatency+'ms':'-'}}</span>
          </template>
        </single-value>
        <single-value
            :type="51"
-            icon="cn-icon cn-icon-sub-category"
+            icon="cn-icon cn-icon-package-loss"
            class="cn-chart__single-value--detail-overview"
            :loading="false"
            style="width: 180px;"
        >
          <template #title>
-            <span>{{$t('entities.avgRoundTripTime')}}</span>
+            <span>{{$t('entities.sequenceGapLossPercent')}}</span>
          </template>
          <template #data>
-            <span>12ms</span>
+            <span>{{entityData.sequenceGapLossPercent?entityData.sequenceGapLossPercent+'%':'-'}}</span>
          </template>
        </single-value>
        <single-value
            :type="51"
-            icon="cn-icon cn-icon-sub-category"
+            icon="cn-icon cn-icon-upload"
            class="cn-chart__single-value--detail-overview"
            :loading="false"
            style="width: 180px;"
        >
          <template #title>
-            <span>{{$t('entities.avgRoundTripTime')}}</span>
+            <span>{{$t('entities.pktRetransPercent')}}</span>
          </template>
          <template #data>
-            <span>12ms</span>
+            <span>{{entityData.pktRetransPercent?entityData.pktRetransPercent+'%':'-'}}</span>
          </template>
        </single-value>
      </div>
@@ -145,12 +153,12 @@
    <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>
+          <span class="tag__value">{{entityData.linkOutPercent?entityData.linkOutPercent+'%':'-'}}</span>
        </div>
        <div class="overview__tag">
-          <span class="tag__value">80%</span>
          <span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
+          <span class="tag__value">{{entityData.linkInPercent?entityData.linkInPercent+'%':'-'}}</span>
        </div>
      </div>
    </div>
@@ -160,31 +168,15 @@
    <div class="overview__content">
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentAlert')}}</div>
-        <div class="row__content">30</div>
+        <div class="row__content">{{entityData.alertNum || '-'}}</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="overview__row overview__row--small-font"  v-for="alert in entityData.alertList">
+        <div class="row__label row__label--width160">{{alert.startTime}}</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 class="alert-level-tag alert-level-tag--high">{{alert.alertSeverity}}</div>
+          <div>{{alert.alertName}}</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 class="row__desc"></div>
      </div>
      <div class="overview__row overview__row--small-font">
        <div class="show-more">{{$t('overall.showMore')}}>></div>
@@ -196,31 +188,15 @@
    <div class="overview__content">
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentSecurity')}}</div>
-        <div class="row__content">20</div>
+        <div class="row__content">{{entityData.securityNum || '-'}}</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="overview__row overview__row--small-font" v-for="security in entityData.securityList">
+        <div class="row__label row__label--width160">{{security.startTime}}</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 class="alert-level-tag alert-level-tag--high">{{security.securitySeverity}}</div>
+          <div>{{security.sourceName}}</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 class="row__desc"></div>
      </div>
      <div class="overview__row overview__row--small-font">
        <div class="show-more">{{$t('overall.showMore')}}>></div>
@@ -231,10 +207,46 @@

 <script>
 import SingleValue from '@/components/charts/ChartSingleValue'
+import { api } from '@/utils/api'
+import entityDetailMixin from './entityDetailMixin'
+
 export default {
  name: 'Domain',
  components: {
    SingleValue
+  },
+  props: {
+    entity: Object
+  },
+  mixins: [entityDetailMixin],
+  data () {
+    return {
+      entityData: {},
+      entityType: 'domain',
+      trafficUrl: api.entityDomainDetailTraffic,
+      relationUrl: api.entityDomainDetailRelation,
+      networkQuantityUrl: api.entityDomainDetailNetworkQuantity,
+      linkInUrl: api.entityDomainDetailLinkIn,
+      linkOutUrl: api.entityDomainDetailLinkOut,
+      alertUrl: api.entityDomainDetailAlert,
+      securityUrl: api.entityDomainDetailSecurity,
+      listMode: 'list'
+    }
+  },
+  methods: {
+    getQueryParams () {
+      const now = new Date()
+      const queryParams = {
+        startTime: Math.floor(now.getTime() / 1000 - 3600),
+        endTime: Math.floor(now.getTime() / 1000),
+        domain: this.entityData.domainName
+      }
+      return queryParams
+    },
+    handleRelationData (result) {
+      this.entityData.appCount = result.appCount
+      this.entityData.ipCount = result.ipCount
+    }
  }
 }
 </script>
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -4,11 +4,11 @@
    <div class="overview__content">
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('overall.location')}}</div>
-        <div class="row__content">China, Beijing</div>
+        <div class="row__content">{{entityData.ipLocationCountry || '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">ASN</div>
-        <div class="row__content">24537</div>
+        <div class="row__content">{{entityData.ipAsn || '-'}}</div>
      </div>
    </div>
  </div>
@@ -17,17 +17,25 @@
    <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 class="row__content">{{entityData.max}} Kb/s</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('overall.mean')}}</div>
-        <div class="row__content">XXX</div>
+        <div class="row__content">{{entityData.avg}} Kb/s</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 class="row__content">
+            <div class="row__charts-msg">{{$t('overall.sent')}}：{{entityData.bytesSentRate}}bps</div>
+            <!-- 曲线-->
+            <div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`" ></div>
+          </div>
+          <div class="row__content">
+            <div class="row__charts-msg">{{$t('overall.received')}}：{{entityData.bytesReceivedRate}}bps</div>
+            <!-- 曲线-->
+            <div class="row__charts" :id="`entityDetailReceived${entityData.ipAddr}`" ></div>
+          </div>
        </div>
      </div>
    </div>
@@ -37,11 +45,11 @@
    <div class="overview__content">
      <div class="overview__tags">
        <div class="overview__tag">
-          <span class="tag__value">5</span>
+          <span class="tag__value">{{entityData.domainCount}}</span>
          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
        </div>
        <div class="overview__tag">
-          <span class="tag__value">8</span>
+          <span class="tag__value">{{entityData.appCount}}</span>
          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
        </div>
      </div>
@@ -52,31 +60,15 @@
    <div class="overview__content">
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentAlert')}}</div>
-        <div class="row__content">30</div>
+        <div class="row__content">{{entityData.alertNum || '-'}}</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="overview__row overview__row--small-font" v-for="alert in entityData.alertList">
+        <div class="row__label row__label--width160">{{alert.startTime}}</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 class="alert-level-tag alert-level-tag--high">{{alert.alertSeverity}}</div>
+          <div>{{alert.alertName}}</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 class="row__desc"></div>
      </div>
      <div class="overview__row overview__row--small-font">
        <div class="show-more">{{$t('overall.showMore')}}>></div>
@@ -88,31 +80,15 @@
    <div class="overview__content">
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentSecurity')}}</div>
-        <div class="row__content">20</div>
+        <div class="row__content">{{entityData.securityNum || '-'}}</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="overview__row overview__row--small-font" v-for="security in entityData.securityList">
+        <div class="row__label row__label--width160">{{security.startTime}}</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 class="alert-level-tag alert-level-tag--high">{{security.securitySeverity}}</div>
+          <div>{{security.sourceName}}</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 class="row__desc"></div>
      </div>
      <div class="overview__row overview__row--small-font">
        <div class="show-more">{{$t('overall.showMore')}}>></div>
@@ -122,7 +98,37 @@
 </template>

 <script>
+import entityDetailMixin from './entityDetailMixin'
+import { api } from '@/utils/api'
+
 export default {
-  name: 'Ip'
+  name: 'Ip',
+  mixins: [entityDetailMixin],
+  data () {
+    return {
+      // entityData: {}
+      entityType: 'ip',
+      trafficUrl: api.entityIpDetailTraffic,
+      relationUrl: api.entityIpDetailRelation,
+      alertUrl: api.entityIpDetailAlert,
+      securityUrl: api.entityIpDetailSecurity,
+      listMode: 'list'
+    }
+  },
+  methods: {
+    getQueryParams () {
+      const now = new Date()
+      const queryParams = {
+        startTime: Math.floor(now.getTime() / 1000 - 3600),
+        endTime: Math.floor(now.getTime() / 1000),
+        ip: this.entityData.ipAddr
+      }
+      return queryParams
+    },
+    handleRelationData (result) {
+      this.entityData.appCount = result.appCount
+      this.entityData.domainCount = result.domainCount
+    }
+  }
 }
 </script>
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
@@ -0,0 +1,205 @@
+import _ from 'lodash'
+import { get } from '@/utils/http'
+import * as echarts from 'echarts'
+import { entityListLineOption } from '@/components/charts/chart-options'
+import { unitTypes } from '@/utils/constants'
+
+export default {
+  props: {
+    entity: Object
+  },
+  data () {
+    return {
+      entityData: {
+        domainCount: 0,
+        appCount: 0,
+        ipCount: 0,
+        securityNum: 0,
+        alertNum: 0,
+        chartOptionSent: null,
+        chartOptionReceived: null,
+        chartOption: null,
+        sentChart: null,
+        receivedChart: null
+      }
+    }
+  },
+  computed: {
+    entityName () {
+      let name
+      switch (this.entityData.entityType) {
+        case ('ip'): {
+          name = this.entity.ipAddr
+          break
+        }
+        case ('domain'): {
+          name = this.entity.domainName
+          break
+        }
+        case ('app'): {
+          name = this.entity.appName
+          break
+        }
+        default: break
+      }
+      return name
+    }
+  },
+  methods: {
+    queryEntityDetailTraffic () {
+      this.sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}`))
+      this.receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}`))
+      get(this.trafficUrl, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          response.data.result.forEach(t => {
+            if (t.legend === 'bytesRate') {
+              this.entityData.max = t.aggregation.max
+              this.entityData.avg = t.aggregation.avg
+            } else if (t.legend === 'bytesSentRate') {
+              this.entityData.bytesSentRate = t.aggregation.last
+              this.chartOptionSent = {
+                ...this.chartOption,
+                series: [
+                  {
+                    name: this.$t('entities.sentThroughput'),
+                    type: 'line',
+                    legendHoverLink: false,
+                    itemStyle: {
+                      normal: {
+                        lineStyle: {
+                          width: 1
+                        }
+                      }
+                    },
+                    color: '#69b072',
+                    data: t.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
+                    showSymbol: false
+                  }
+                ]
+              }
+            } else if (t.legend === 'bytesReceivedRate') {
+              this.entityData.bytesReceivedRate = t.aggregation.last
+              this.chartOptionReceived = {
+                ...this.chartOption,
+                series: [
+                  {
+                    name: this.$t('entities.receivedThroughput'),
+                    type: 'line',
+                    legendHoverLink: false,
+                    itemStyle: {
+                      normal: {
+                        lineStyle: {
+                          width: 1
+                        }
+                      }
+                    },
+                    color: '#7899c6',
+                    data: t.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
+                    showSymbol: false
+                  }
+                ]
+              }
+            }
+          })
+        }
+        this.sentChart.setOption(this.chartOptionSent)
+        this.receivedChart.setOption(this.chartOptionReceived)
+      }).finally(() => {
+        setTimeout(() => {
+          this.$nextTick(() => {
+            this.sentChart && this.sentChart.resize()
+            this.receivedChart && this.receivedChart.resize()
+          })
+        }, 250)
+      })
+    },
+
+    queryEntityDetailRelation () {
+      get(this.relationUrl, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.handleRelationData(response.data.result)
+        }
+      })
+    },
+
+    queryEntityDetailNetworkQuantity () {
+      if (this.networkQuantityUrl) {
+        get(this.networkQuantityUrl, this.getQueryParams()).then(response => {
+          if (response.code === 200) {
+            this.entityData.establishLatency = response.data.result.establishLatency
+            this.entityData.httpResponseLatency = response.data.result.httpResponseLatency
+            this.entityData.sslConLatency = response.data.result.sslConLatency
+            this.entityData.sequenceGapLossPercent = response.data.result.sequenceGapLossPercent
+            this.entityData.pktRetransPercent = response.data.result.pktRetransPercent
+          }
+        })
+      }
+    },
+
+    queryEntityDetailLinkInUrl () {
+      if (this.linkInUrl) {
+        get(this.linkInUrl, this.getQueryParams()).then(response => {
+          if (response.code === 200 && response.data.aggregation) {
+            const sum = response.data.aggregation.sum
+            const max = response.data.aggregation.max
+            this.entityData.linkInPercent = (parseFloat(max / sum) * 100).toFixed(2)
+          }
+        })
+      }
+    },
+
+    queryEntityDetailLinkOutUrl () {
+      if (this.linkOutUrl) {
+        get(this.linkOutUrl, this.getQueryParams()).then(response => {
+          if (response.code === 200 && response.data.aggregation) {
+            const sum = response.data.aggregation.sum
+            const max = response.data.aggregation.max
+            this.entityData.linkOutPercent = (parseFloat(max / sum) * 100).toFixed(2)
+          }
+        })
+      }
+    },
+
+    queryEntityDetailAlert () {
+      get(this.alertUrl, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.entityData.alertNum = response.data.result.length
+          this.entityData.alertList = response.data.result
+        }
+      })
+    },
+
+    queryEntityDetailSecurity () {
+      get(this.securityUrl, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.entityData.securityNum = response.data.result.length
+          this.entityData.securityList = response.data.result
+        }
+      })
+    },
+
+    queryEntityDetail () {
+      this.queryEntityDetailTraffic()
+      this.queryEntityDetailRelation()
+      this.queryEntityDetailAlert()
+      this.queryEntityDetailSecurity()
+      if (this.entityData.entityType === 'domain') {
+        this.queryEntityDetailNetworkQuantity()
+        this.queryEntityDetailLinkOutUrl()
+        this.queryEntityDetailLinkInUrl()
+      }
+    }
+  },
+  setup () {
+    return {
+      chartOption: entityListLineOption
+    }
+  },
+  mounted () {
+    if (this.listMode === 'list') {
+      this.entityData = _.cloneDeep(this.entity)
+      this.chartOption = _.cloneDeep(entityListLineOption)
+      setTimeout(() => { this.queryEntityDetail() })
+    }
+  }
+}
--- a/src/views/entityExplorer/entityList/entityListMixin.js
+++ b/src/views/entityExplorer/entityList/entityListMixin.js
@@ -85,7 +85,7 @@ export default {
              startTime: Math.floor(now.getTime() / 1000 - 3600),
              endTime: Math.floor(now.getTime() / 1000)
            },
-            ip: this.entityData.ipAddr
+            ip: this.entityData.ip
          }
          break
        }
@@ -142,7 +142,7 @@ export default {
    queryAlert () {
      get(api.entityAlertNum, { entityType: this.entityData.entityType, name: this.entityName }).then(response => {
        if (response.code === 200) {
-          this.entityData.securityCount = response.data.result[0].value
+          this.entityData.alertCount = response.data.result[0].value
        }
      })
    },