feat: entity列表（部分）、css架构更改

src/views/entityExplorer/entityList/Card.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="cn-entity--block">
+    <div class="cn-entity__header">
+      <div class="header__content" :title="entityData.ipAddr||entityData.domainName||entityData.appName">
+        <div class="header__icon"><i :class="iconClass"></i></div>
+        <template v-if="entityData.entityType === 'ip'">
+          <div class="content__name"  style="top:31px;">
+            {{entityData.ipAddr || 'Unknown'}}
+          </div>
+        </template>
+        <template v-else-if="entityData.entityType === 'domain'">
+          <div class="content__name" >
+            {{entityData.domainName || 'Unknown'}}
+          </div>
+          <div class="content__desc" >
+            <span class="desc__label">{{$t('entities.reputationLevel')}}:&nbsp;</span>
+            <span>{{entityData.domainReputationLevel || '-'}}</span>
+          </div>
+        </template>
+        <template v-else-if="entityData.entityType === 'app'">
+          <div class="content__name" >
+            {{entityData.appName || 'Unknown'}}
+          </div>
+          <div class="content__desc" >
+            <span class="desc__label">{{$t('entities.risk')}}:&nbsp;</span>
+            <span>{{entityData.appRisk || '-'}}</span>
+          </div>
+        </template>
+      </div>
+      <div class="header__bottom__line"></div>
+    </div>
+    <div class="cn-entity__body">
+      <template v-if="entityData.entityType === 'ip'">
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-country" ></i>{{$t('overall.country')}}：</span>
+          <div class="body__row-value" :title="entityData.ipLocationCountry">{{entityData.ipLocationCountry || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-position"></i>{{$t('overall.province')}}：</span>
+          <div class="body__row-value" :title="entityData.ipLocationProvince ? (entityData.ipLocationProvince + ', ' + entityData.ipLocationCity) : '-'">{{entityData.ipLocationProvince ? (entityData.ipLocationProvince + ', ' + entityData.ipLocationCity) : '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-cloud"></i>{{$t('entities.asn')}}：</span>
+          <div class="body__row-value" :title="entityData.ipAsn">{{entityData.ipAsn || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-entity-alert"></i>{{$t('entities.recentAlert')}}：</span>
+          <div class="body__row-value" :title="entityData.alertCount">{{entityData.alertCount || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-safe"></i>{{$t('entities.recentSecurity')}}：</span>
+          <div class="body__row-value" :title="entityData.securityCount">{{entityData.securityCount || '-'}}</div>
+        </div>
+        <!-- 曲线-->
+        <div class="body__drawing-box">
+          <div class="body__drawing" :id="`entityListChart${entityData.ipAddr}`"></div>
+        </div>
+        <div class="body__statics">
+          <div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon"></i>{{entityData.bytesReceivedRate || 0}} bps</div>
+          <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise"></i>{{entityData.bytesSentRate || 0}} bps</div>
+          <div class="body__detail" @click="entityDetail({ip: entityData.ipAddr, type: 4})">{{$t('overall.detail')}}></div>
+        </div>
+      </template>
+      <template v-else-if="entityData.entityType === 'domain'">
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-category"></i>{{$t('entities.Group')}}：</span>
+          <div class="body__row-value" :title="entityData.domainCategoryGroup">{{entityData.domainCategoryGroup || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-sub-category"></i>{{$t('entities.categoryName')}}：</span>
+          <div class="body__row-value" :title="entityData.domainCategory">{{entityData.domainCategory || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-credit"></i>{{$t('entities.credit')}}：</span>
+          <div class="body__row-value" :title="entityData.domainReputationScore">{{entityData.domainReputationScore || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-entity-alert"></i>{{$t('entities.recentAlert')}}：</span>
+          <div class="body__row-value" :title="entityData.alertCount">{{entityData.alertCount || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-safe"></i>{{$t('entities.recentSecurity')}}：</span>
+          <div class="body__row-value" :title="entityData.securityCount">{{entityData.securityCount || '-'}}</div>
+        </div>
+        <!-- 曲线-->
+        <div class="body__drawing-box">
+          <div class="body__drawing" :id="`entityListChart${entityData.domainName}`"></div>
+        </div>
+        <div class="body__statics">
+          <div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon"></i>{{entityData.bytesReceivedRate || 0}} bps</div>
+          <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise"></i>{{entityData.bytesSentRate || 0}} bps</div>
+          <div class="body__detail" @click="entityDetail({domain: entityData.domainName, type: 5})">{{$t('overall.detail')}}></div>
+        </div>
+      </template>
+      <template v-else-if="entityData.entityType === 'app'">
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-id"></i>APP ID：</span>
+          <div class="body__row-value" :title="entityData.appId">{{entityData.appId || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-category"></i>{{$t('entities.category')}}：</span>
+          <div class="body__row-value" :title="entityData.appCategory">{{entityData.appCategory || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-sub-category"></i>{{$t('entities.subcategory')}}：</span>
+          <div class="body__row-value" :title="entityData.appSubategory">{{entityData.appSubategory || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-entity-alert"></i>{{$t('entities.recentAlert')}}：</span>
+          <div class="body__row-value" :title="entityData.alertCount">{{entityData.alertCount || '-'}}</div>
+        </div>
+        <div class="body__row">
+          <span class="body__row-label"><i class="cn-icon cn-icon-safe"></i>{{$t('entities.recentSecurity')}}：</span>
+          <div class="body__row-value" :title="entityData.securityCount">{{entityData.securityCount || '-'}}</div>
+        </div>
+        <!-- 曲线-->
+        <div class="body__drawing-box">
+          <div class="body__drawing" :id="`entityListChart${entityData.appId}`"></div>
+        </div>
+        <div class="body__statics">
+          <div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon"></i>{{entityData.bytesReceivedRate || 0}} bps</div>
+          <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise"></i>{{entityData.bytesSentRate || 0}} bps</div>
+          <div class="body__detail" @click="entityDetail({app: entityData.appName, type: 6})">{{$t('overall.detail')}}></div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+export default {
+  name: 'Card',
+  props: {
+    entity: Object
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    entityDetail (entity) {
+
+    },
+    queryTraffic () {
+
+    },
+    querySecurity () {
+
+    },
+    queryAlert () {
+
+    }
+  },
+  computed: {
+    iconClass () {
+      let className
+      switch (this.entityData.entityType) {
+        case ('ip'): {
+          className = 'cn-icon cn-icon-ip domain-blue'
+          break
+        }
+        case ('domain'): {
+          className = 'cn-icon cn-icon-domain domain-blue'
+          break
+        }
+        case ('app'): {
+          className = 'cn-icon cn-icon-app domain-blue'
+          break
+        }
+        default: break
+      }
+      return className
+    }
+  },
+  mounted () {
+    setTimeout(() => { this.queryTraffic() })
+    setTimeout(() => { this.querySecurity() })
+    setTimeout(() => { this.queryAlert() })
+  },
+  setup (props) {
+    const entityData = _.cloneDeep(props.entity)
+    return {
+      entityData
+    }
+  }
+}
+</script>

src/views/entityExplorer/entityList/EntityList.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="entity-list">
+    <div class="entity__loading" v-show="loading">
+      <i class="el-icon-loading"></i>
+    </div>
+    <div class="entity-list__content">
+      <!-- 列表式 -->
+      <template v-if="listMode === 'list'">
+        <div class="entity-list--list">
+          <entity-row
+              v-for="(data, index) in listData"
+              :entity="data"
+              :key="index"
+          ></entity-row>
+        </div>
+      </template>
+      <!-- 卡片式 -->
+      <template v-else-if="listMode === 'block'">
+        <div class="entity-list--block">
+          <entity-card
+              v-for="(data, index) in listData"
+              :entity="data"
+              :key="index"
+          ></entity-card>
+        </div>
+      </template>
+    </div>
+    <div class="entity-list__pagination">
+<!--      <el-pagination
+              @size-change="size"
+              @prev-click="prev"
+              @next-click="next"
+              @current-change="current"
+              :currentPage="pageObj.pageNo"
+              :page-size="pageObj.pageSize"
+              :total="pageObj.total"
+              layout="total, prev, pager, next"
+      ></el-pagination>-->
+    </div>
+  </div>
+</template>
+
+<script>
+import Card from '@/views/entityExplorer/entityList/Card'
+import Row from '@/views/entityExplorer/entityList/Row'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import * as echarts from 'echarts'
+import { getChartColor, entityListLineOption } from '@/components/charts/chart-options'
+import { legendMapping } from '@/components/charts/chart-table-title'
+import unitConvert from '@/utils/unit-convert'
+import { unitTypes } from '@/utils/constants'
+
+export default {
+  name: 'EntityList',
+  props: {
+    listData: Array,
+    from: String,
+    pageObj: Object,
+    loading: Boolean,
+    listMode: String
+  },
+  components: {
+    'entity-card': Card,
+    'entity-row': Row
+  },
+  data () {
+    return {
+      showDetail: false,
+      typeName: '',
+      entityList: []
+    }
+  },
+  methods: {
+    size (val) {
+      this.$emit('pageSize', val)
+    },
+    // 点击上一页箭头
+    prev () {
+      this.scrollbarToTop()
+    },
+    // 点击下一页箭头
+    next () {
+      this.scrollbarToTop()
+    },
+    // currentPage 改变时会触发
+    current (val) {
+      this.$emit('pageNo', val)
+      this.scrollbarToTop()
+    },
+    scrollbarToTop () {
+      this.$nextTick(() => {
+        const wraps = document.querySelectorAll('.el-table__body-wrapper')
+        wraps.scrollTop = 0
+      })
+    },
+    entityDetail (params) {
+      this.$emit('showDetail', { ...params, icon: this.iconClass })
+    }
+  }
+}
+</script>

src/views/entityExplorer/entityList/Row.vue

@@ -0,0 +1,9 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'Row'
+}
+</script>