perf: entities部分内容

src/components/entities/LeftFilter.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="entity-left-filter">
+    <div class="filter__header">{{$t('entities.filter')}}</div>
+    <div class="filter__body">
+      <el-collapse v-model="active">
+        <el-collapse-item
+            v-for="(f, i) in filterData"
+            :key="i"
+            :title="f.title"
+            :name="`${i}`"
+            class="filter__collapse"
+        >
+          <el-tree
+              :data="f.data"
+          >
+            <template #default="{ node, data }">
+              <span>{{data[f.key]}}-{{data.count}}</span>
+            </template>
+          </el-tree>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LeftFilter',
+  props: {
+    filterData: Array
+  },
+  data () {
+    return {
+      active: ['1']
+    }
+  },
+  mounted () {
+    console.info(this.filterData)
+  }
+}
+</script>
+
+<style lang="scss">
+.entity-left-filter {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border: 1px solid $--right-box-border-color;
+
+  .filter__header {
+    background-color: #FAFAFA;
+    padding-left: 8px;
+    height: 36px;
+    line-height: 36px;
+    color: #333;
+    font-size: 14px;
+  }
+  .filter__body {
+    display: flex;
+    flex-direction: column;
+
+    .filter__collapse {
+      max-height: 50%;
+
+      .el-collapse-item__header {
+        padding-left: 10px;
+      }
+    }
+  }
+}
+</style>

src/utils/api.js

@@ -5,7 +5,6 @@
 */
 import { get, post } from '@/utils/http'
 import { sortByOrderNum } from '@/permission'
-import { storageKey, iso36112 } from '@/utils/constants'
 
 export const api = {
   // 系统相关
@@ -14,7 +13,10 @@ export const api = {
   dict: '/sys/dict',
   // 业务
   panel: '/visual/panel',
-  chart: '/visual/chart'
+  chart: '/visual/chart',
+  entityIpFilter: '/interface/entity/ip/filter',
+  entityDomainFilter: '/interface/entity/domain/filter',
+  entityAppFilter: '/interface/entity/app/filter'
 }
 /* panel */
 export async function getPanelList (params) {
@@ -30,6 +32,18 @@ export async function getChartList (params) {
 export async function getChart (id) {
   return await getData(`${api.chart}/${id}`)
 }
+/* ip类型entity过滤器数据 */
+export async function getEntityIpFilterList (params) {
+  return await getData(api.entityIpFilter, params, true)
+}
+/* domain类型entity过滤器数据 */
+export async function getEntityDomainFilterList (params) {
+  return await getData(api.entityDomainFilter, params, true)
+}
+/* app类型entity过滤器数据 */
+export async function getEntityAppFilterList (params) {
+  return await getData(api.entityAppFilter, params, true)
+}
 /* 字典 */
 export async function getDictList (params) {
   return await getData(api.dict, params, true)
@@ -39,7 +53,7 @@ export async function getData (url, params = {}, isQueryList) {
   const request = new Promise(resolve => {
     get(url, params).then(response => {
       if (response.code === 200) {
-        resolve(isQueryList ? response.data.list : response.data)
+        resolve(isQueryList ? response.data.list || response.data.result : response.data || response.data.result)
       }
     })
   })

src/utils/constants.js

@@ -44,6 +44,12 @@ export const position = {
   }
 }
 
+export const entityType = {
+  ip: 'IP',
+  domain: 'Domain',
+  app: 'APP'
+}
+
 export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
 export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
 export const chartPieTableTopOptions = [{ name: 'Sessions', value: 'sessions' }, { name: 'Packets', value: 'packets' }, { name: 'Bytes', value: 'bytes' }] // table类型图表的TOP-N选项

src/views/entities/EntityExplorer.vue

@@ -1,17 +1,127 @@
 <template>
   <div class="outer-box">
     <div class="cn-entities">
-      <div style="background-color: lightcyan"></div>
-      <div style="background-color: lightcyan"></div>
-      <div style="background-color: lightcyan"></div>
+      <el-select
+          size="small"
+          style="width: 100%"
+          v-model="filterType"
+      >
+        <el-option v-for="(value, key) in entityType" :key="key" :label="value" :value="key"></el-option>
+      </el-select>
+      <el-input
+          v-model="searchContent"
+          size="small"
+          style="width: 100%"
+          type="text"
+      >
+        <template #prefix>
+          <span style="padding-left: 4px"><i class="el-icon-search"></i></span>
+        </template>
+      </el-input>
+      <!-- 筛选区域 -->
+      <left-filter
+          :filter-data="filterData"
+      ></left-filter>
+      <!-- 内容区域 -->
       <div style="background-color: lightcyan"></div>
     </div>
   </div>
 </template>
 
 <script>
+import { entityType } from '@/utils/constants'
+import { ref } from 'vue'
+import LeftFilter from '@/components/entities/LeftFilter'
+import { getEntityIpFilterList, getEntityDomainFilterList, getEntityAppFilterList } from '@/utils/api'
 export default {
-  name: 'EntityExplorer'
+  name: 'EntityExplorer',
+  data () {
+    return {
+      searchContent: '',
+      filterData: []
+    }
+  },
+  components: {
+    LeftFilter
+  },
+  methods: {
+    async loadData (filterType, conditionGroup) {
+      let data
+      switch (filterType) {
+        case 'ip': {
+          data = await getEntityIpFilterList({ type: conditionGroup })
+          break
+        }
+        case 'domain': {
+          data = await getEntityDomainFilterList({ type: conditionGroup })
+          break
+        }
+        case 'app': {
+          data = await getEntityAppFilterList({ type: conditionGroup })
+          break
+        }
+        default: break
+      }
+      return data
+    }
+  },
+  watch: {
+    filterType (n) {
+      const requests = []
+      const data = []
+      switch (n) {
+        case 'ip': {
+          requests.push(this.loadData(n, 'country'))
+          requests.push(this.loadData(n, 'asn'))
+          data.push({ title: this.$t('entities.countryOrRegion'), key: 'country' })
+          data.push({ title: this.$t('entities.systemNumber'), key: 'asn' })
+          break
+        }
+        case 'domain': {
+          requests.push(this.loadData(n, 'group'))
+          requests.push(this.loadData(n, 'level'))
+          data.push({ title: this.$t('entities.group'), key: 'group' })
+          data.push({ title: this.$t('entities.level'), key: 'level' })
+          break
+        }
+        case 'app': {
+          requests.push(this.loadData(n, 'category'))
+          requests.push(this.loadData(n, 'risk'))
+          data.push({ title: this.$t('entities.category'), key: 'category' })
+          data.push({ title: this.$t('entities.risk'), key: 'risk' })
+          break
+        }
+        default: break
+      }
+      Promise.all(requests).then(responses => {
+        data.forEach((d, i) => {
+          d.data = responses[i]
+        })
+        this.filterData = data
+      })
+    }
+  },
+  async mounted () {
+    const country = await this.loadData(this.filterType, 'country')
+    const asn = await this.loadData(this.filterType, 'asn')
+    this.filterData.push({
+      title: this.$t('entities.countryOrRegion'),
+      key: 'country',
+      data: country
+    })
+    this.filterData.push({
+      title: this.$t('entities.systemNumber'),
+      key: 'asn',
+      data: asn
+    })
+  },
+  setup () {
+    const filterType = ref(Object.keys(entityType)[0])
+    return {
+      entityType,
+      filterType
+    }
+  }
 }
 </script>