CN-1086: 实体列表静态页面开发

2023-06-15 18:48:47 +08:00
parent eb493edc02
commit 71b0d5e053
17 changed files with 780 additions and 159 deletions
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -3,13 +3,18 @@
      class="entity-explorer"
      :class="{'entity-explorer--show-list': showList}">
    <!-- 顶部工具栏，在列表页显示 -->
-    <div class="explorer-top-tools" v-show="showList">
-      <DateTimeRange :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
-      <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
-      <el-button-group size="mini">
-        <el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
-        <el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
-      </el-button-group>
+    <div class="explorer-top-tools explorer-top-tools-new" v-show="showList">
+      <div class="explorer-detection-top-tools">
+        <div class="explorer-top-tools-title">{{$t('network.entity')}}</div>
+      </div>
+      <div class="explorer-top-tools">
+        <DateTimeRange :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
+        <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
+        <el-button-group size="mini">
+          <el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
+          <el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
+        </el-button-group>
+      </div>
    </div>
    <!-- 搜索组件 -->
    <explorer-search
@@ -18,6 +23,11 @@
        :show-list="showList"
        @search="search"
    ></explorer-search>
+
+    <!--todo静态数据，之后记得修改-->
+    <div class="explorer-result" v-if="showList">
+      8,866 results，IP 2666，Domain 3200，APP 3000
+    </div>
    <!-- 内容区 -->
    <div class="explorer-container" v-if="showList"  style="height: calc(100% - 20px); flex-direction: column">
      <div style="display: flex; height: auto;">
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/src/views/entityExplorer/EntityFilter.vue
@@ -1,149 +1,382 @@
-<template >
+<template>
  <div class="entity-filter-case">
-    <div class="filter-case__header">{{$t('entities.filter')}}</div>
-    <div
-        class="entity-filter"
-        v-for="(filters, index) in filterData"
-        :key="index"
-    >
-      <div class="filter__header">{{filters.title}}</div>
-      <div class="filter__body">
+    <div class="filter-case__header">{{ $t('entities.filter1') }}</div>

-        <div class="filter__row" v-for="(item, i) in filters.data" :key="i">
-          <el-popover popper-class="filter__row-popover" placement="right-start" :width="440" v-model:visible="item.showTopTen">
-            <template #reference>
-              <div class="filter__row-popover" @click="showTopDialog(i, item, filters)">
-                <div class="row__label">
-                  <i :class="item.icon"></i>
-                  <span>{{item.label}}</span>
-                </div>
-                <div class="row__value">
-                  <loading :loading="loadingLeft" size="small"></loading>
-                  <span>{{item.value}}</span>
-                </div>
-              </div>
-            </template>
-            <entity-top
-              ref="entityTopTenPop"
-              :loading="loading"
-              :popover-data="popoverData"
-              :item-data="itemData"
-              :total-count="totalCount"
-              :top-column="item.topColumn"
-              @filter="filter"
-            ></entity-top>
-          </el-popover>
+    <div class="entity-filter" v-for="(item, index) in filterData" :key="index">
+      <div class="filter__header">
+        <i :class="item.icon"></i>
+        {{ item.title }}
+      </div>
+
+      <div class="filter__body">
+        <div class="filter__body-item" v-for="(data, i) in item.data" :key="i" @click="filter(data.label, data)">
+          <div class="filter__body-item-left">
+            <div v-if="data.flag">
+              <img :src="require(`../../../public/images/flag/${data.flag}.svg`)" class="filter-country-flag"/>
+            </div>
+            <div v-else class="filter__body-item-left-index">{{ i }}</div>
+            <div class="filter__body-item-left-label">
+              <el-tooltip :content="data.label" placement="top" effect="light" :disabled="disabledLabel">
+                <span @mouseenter="handleMouse(`filter${index}${i}`)" :id="`filter${index}${i}`">{{ data.label }}</span>
+              </el-tooltip>
+            </div>
+          </div>
+
+          <div class="filter__body-item-right">{{ data.value }}</div>
        </div>
+        <div class="filter-hr"></div>
      </div>
    </div>
  </div>
 </template>

 <script>
-import EntityTop from '@/views/entityExplorer/EntityTop'
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
-import Loading from '@/components/common/Loading'
 export default {
  name: 'EntityFilter',
-  components: {
-    Loading,
-    EntityTop
-  },
-  props: {
-    filterData: Array,
-    q: String,
-    timeFilter: Object,
-    loadingLeft: Boolean
-  },
  data () {
    return {
-      topList: 'list',
-      topData: [],
-      entityTopTenData: [],
-      currentColumn: {},
-      totalCount: 0,
-      loading: false,
-      popoverData: [],
-      itemData: {}
-    }
-  },
-  watch: {
-    currentColumn (n, o) {
-      if (n.column === 'dnsServerOrgCount') {
-        this.totalCount = this.filterData[3].orgTotalCount
-      } else if (n.column === 'dnsServerSoftwareCount') {
-        this.totalCount = this.filterData[3].softwareTotalCount
-      } else if (n.column === 'dnsServerOsCount') {
-        this.totalCount = this.filterData[3].osTotalCount
-      } else if (n.column === 'categoryDistinctCount' && n.type === 'app') {
-        this.totalCount = this.filterData[1].totalCount
-      } else {
-        let count = 0
-        this.filterData.forEach(f => {
-          const filter = f.data.some(d => d.column === n.column)
-          if (filter) {
-            count = f.totalCount
-          }
-        })
-        this.totalCount = count
-      }
+      filterData: [
+        {
+          icon: 'cn-icon cn-icon-registration-country',
+          title: 'Top Countries',
+          totalCount: 0,
+          data: [
+            {
+              label: 'China',
+              flag: '011-china',
+              topColumn: 'ip_location_country', // top弹框查询字段
+              value: 364
+            },
+            {
+              label: 'Australia',
+              flag: '142-australia',
+              topColumn: 'ip_location_country', // top弹框查询字段
+              value: 226
+            },
+            {
+              label: 'South Korea',
+              flag: '218-south korea',
+              topColumn: 'ip_location_country', // top弹框查询字段
+              value: 120
+            },
+            {
+              label: 'Germany',
+              flag: '207-germany',
+              topColumn: 'ip_location_country', // top弹框查询字段
+              value: 120
+            },
+            {
+              label: 'America',
+              flag: '185-united states of america',
+              topColumn: 'ip_location_country', // top弹框查询字段
+              value: 120
+            }
+          ]
+        },
+        {
+          icon: 'cn-icon cn-icon-city',
+          title: 'Top Cities',
+          totalCount: 0,
+          data: [
+            {
+              label: 'Beijing',
+              topColumn: 'ip_location_city', // top弹框查询字段
+              value: 364
+            },
+            {
+              label: 'Shanghai',
+              topColumn: 'ip_location_city', // top弹框查询字段
+              value: 226
+            },
+            {
+              label: 'Guangzhou',
+              topColumn: 'ip_location_city', // top弹框查询字段
+              value: 120
+            },
+            {
+              label: 'Hangzhou',
+              topColumn: 'ip_location_city', // top弹框查询字段
+              value: 64
+            },
+            {
+              label: 'Shenzhen',
+              topColumn: 'ip_location_city', // top弹框查询字段
+              value: 48
+            }
+          ]
+        },
+        {
+          icon: 'cn-icon cn-icon-org',
+          title: 'Top Oranization',
+          totalCount: 0,
+          data: [
+            {
+              label: 'China internet network information Center',
+              topColumn: 'ip_location_org', // top弹框查询字段
+              value: 364
+            },
+            {
+              label: 'Educause',
+              topColumn: 'ip_location_org', // top弹框查询字段
+              value: 226
+            },
+            {
+              label: 'Telecommunication tokelau company',
+              topColumn: 'ip_location_org', // top弹框查询字段
+              value: 120
+            },
+            {
+              label: 'Universidad del valle de guatemala',
+              topColumn: 'ip_location_org', // top弹框查询字段
+              value: 64
+            },
+            {
+              label: 'Internet systems consortium',
+              topColumn: 'ip_location_org', // top弹框查询字段
+              value: 48
+            }
+          ]
+        },
+        {
+          icon: 'cn-icon cn-icon-tag',
+          title: 'Top Tags',
+          totalCount: 0,
+          data: [
+            {
+              label: 'Internet',
+              topColumn: 'ip_location_tag', // top弹框查询字段
+              value: 364
+            },
+            {
+              label: 'Virus software',
+              topColumn: 'ip_location_tag', // top弹框查询字段
+              value: 226
+            },
+            {
+              label: 'Information Technology',
+              topColumn: 'ip_location_tag', // top弹框查询字段
+              value: 120
+            },
+            {
+              label: 'Information Technology',
+              topColumn: 'ip_location_tag', // top弹框查询字段
+              value: 64
+            },
+            {
+              label: 'Security software',
+              topColumn: 'ip_location_tag', // top弹框查询字段
+              value: 48
+            }
+          ]
+        },
+        {
+          icon: 'cn-icon cn-icon-category2',
+          title: 'Top Domain Categories',
+          totalCount: 0,
+          data: [
+            {
+              label: 'Business and Economy',
+              topColumn: 'ip_location_category', // top弹框查询字段
+              value: 364
+            },
+            {
+              label: 'Games',
+              topColumn: 'ip_location_category', // top弹框查询字段
+              value: 226
+            },
+            {
+              label: 'Society',
+              topColumn: 'ip_location_category', // top弹框查询字段
+              value: 120
+            },
+            {
+              label: 'Government',
+              topColumn: 'ip_location_category', // top弹框查询字段
+              value: 64
+            },
+            {
+              label: 'Computer and Internet Info',
+              topColumn: 'ip_location_category', // top弹框查询字段
+              value: 48
+            }
+          ]
+        },
+        {
+          icon: 'cn-icon cn-icon-category2',
+          title: 'Top App Categories',
+          totalCount: 0,
+          data: [
+            {
+              label: 'Media',
+              topColumn: 'ip_location_category', // top弹框查询字段
+              value: 364
+            },
+            {
+              label: 'Networking',
+              topColumn: 'ip_location_category', // top弹框查询字段
+              value: 226
+            },
+            {
+              label: 'Collaboration',
+              topColumn: 'ip_location_category', // top弹框查询字段
+              value: 120
+            },
+            {
+              label: 'Bussiness-systems',
+              topColumn: 'ip_location_category', // top弹框查询字段
+              value: 64
+            },
+            {
+              label: 'General-internet',
+              topColumn: 'ip_location_category', // top弹框查询字段
+              value: 48
+            }
+          ]
+        },
+        {
+          icon: 'cn-icon cn-icon-as',
+          title: 'Top ASNs',
+          totalCount: 0,
+          data: [
+            {
+              label: 'AS4837',
+              topColumn: 'ip_location_asn', // top弹框查询字段
+              value: 364
+            },
+            {
+              label: 'AS9808',
+              topColumn: 'ip_location_asn', // top弹框查询字段
+              value: 226
+            },
+            {
+              label: 'AS4134',
+              topColumn: 'ip_location_asn', // top弹框查询字段
+              value: 120
+            },
+            {
+              label: 'AS37963',
+              topColumn: 'ip_location_asn', // top弹框查询字段
+              value: 64
+            },
+            {
+              label: 'AS54994',
+              topColumn: 'ip_location_asn', // top弹框查询字段
+              value: 48
+            }
+          ]
+        }
+      ],
+      disabledLabel: true
    }
  },
  methods: {
-    showTopDialog (i, item, filter) {
-      if (this.currentColumn.column === item.column && item.showTopTen) {
-        item.showTopTen = false
-        return
+    /**
+     * 判断文字是否溢出，超出则鼠标移入tooltip显示，否则鼠标移入不显示
+     * @param id
+     */
+    handleMouse (id) {
+      const dom = document.getElementById(id)
+      if (dom) {
+        const width = document.getElementById(id).offsetWidth
+        this.disabledLabel = width < 180
+      } else {
+        this.disabledLabel = true
      }
-      this.filterData.forEach(f => {
-        f.data.forEach(ff => {
-          ff.showTopTen = false
-        })
-      })
-      item.showTopTen = true
-      this.currentColumn = {
-        column: item.column,
-        type: filter.type
-      }
-      const queryParams = {
-        q: this.q,
-        entityType: filter.type,
-        column: item.topColumn,
-        top: 10,
-        startTime: parseInt(this.timeFilter.startTime / 1000),
-        endTime: parseInt(this.timeFilter.endTime / 1000)
-      }
-      this.loading = true
-      this.popoverData = []
-      this.itemData = {}
-      get(api.filterTop, queryParams).then(response => {
-        if (response.code === 200) {
-          if (this.currentColumn.column === item.column) {
-            if (filter.type === 'dns') {
-              this.popoverData = response.data.result.filter(f => {
-                return f.count > 0
-              })
-            } else {
-              this.popoverData = response.data.result
-            }
-            this.itemData = item
-          }
-        } else {
-          this.popoverData = []
-          this.itemData = item
-        }
-        this.loading = false
-      }).catch(e => {
-        this.popoverData = []
-        this.itemData = item
-        this.loading = false
-      })
    },
-    filter (name, topData) {
-      this.showTopDialog('', topData)
-      this.$emit('filter', name, topData)
+    filter (name, data) {
+      this.$emit('filter', name, data)
    }
  }
 }
 </script>
+
+<style lang="scss" scoped>
+.entity-filter-case {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  margin-right: 10px;
+  overflow: auto;
+  z-index: 1;
+  border: 1px solid rgba(226, 229, 236, 1) !important;
+  border-radius: 4px !important;
+
+  .filter__header {
+    height: 46px;
+    line-height: 46px;
+    margin: 0 20px;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+  }
+
+  .filter__body {
+    width: calc(100% - 40px);
+    margin: 0 20px;
+
+    .filter-hr {
+      width: calc(100% + 20px);
+      margin-left: -10px;
+      margin-top: 10px;
+      height: 1px;
+      background: #EFF2F5;
+      //background: #000;
+    }
+
+    .filter__body-item {
+      height: 26px;
+      line-height: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+
+      .filter__body-item-left {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 400;
+
+        .filter-country-flag {
+          width: 18px;
+          height: 12px;
+        }
+
+        .filter__body-item-left-index {
+          width: 16px;
+          height: 16px;
+          line-height: 16px;
+          text-align: center;
+          background: #EFF2F5;
+          border-radius: 2px;
+          margin-right: 6px;
+          font-family: NotoSansHans-Black;
+          font-size: 9px;
+          color: #96A2B0;
+          font-weight: 900;
+        }
+
+        .filter__body-item-left-label {
+          max-width: 180px;
+          font-family: NotoSansSChineseRegular;
+          font-size: 14px;
+          color: #353636;
+          font-weight: 400;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .filter__body-item-right {
+        flex-shrink: 0;
+        font-family: NotoSansSChineseRegular;
+        font-size: 12px;
+        color: #717171;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -9,8 +9,12 @@
    <div class="cn-entity__case">
      <div class="cn-entity__icon"><i :class="iconClass"></i></div>
      <div class="cn-entity__row">
-        <div class="cn-entity__header">
-          {{ entityData.ipAddr || entityData.domainName || entityData.appName || 'Unknown' }}
+        <div class="cn-entity__header" style="display: flex">
+          <span class="cn-entity__header-title">{{ entityData.ipAddr || entityData.domainName || entityData.appName || 'Unknown' }}</span>
+          <span class="entity-detail" style="display: flex">
+            <span style="width: 62px;" class="entity-tag entity-tag--small entity-tag--level-two-positive margin-r-6">信息技术</span>
+            <span style="width: 50px;" class="entity-tag entity-tag--small entity-tag--level-two-normal margin-r-6">互联网</span>
+          </span>
        </div>
        <div class="cn-entity__body">
          <div class="body__basic-info">
@@ -127,19 +131,20 @@
                  </div>
                </div>
              </div>
-              <div class="basic-info__item">
-                <i class="cn-icon cn-icon-entity-alert"></i>
-                <span>{{ $t('entities.recentAlert') }}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{ entityData.performanceCount }}</span>
-              </div>
-              <div class="basic-info__item">
-                <i class="cn-icon cn-icon-safe"></i>
-                <span>{{ $t('entities.recentSecurity') }}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{ entityData.securityCount }}</span>
-              </div>
+<!--              <div class="basic-info__item">-->
+<!--                <i class="cn-icon cn-icon-entity-alert"></i>-->
+<!--                <span>{{ $t('entities.recentAlert') }}&nbsp;:&nbsp;&nbsp;</span>-->
+<!--                <span>{{ entityData.performanceCount }}</span>-->
+<!--              </div>-->
+<!--              <div class="basic-info__item">-->
+<!--                <i class="cn-icon cn-icon-safe"></i>-->
+<!--                <span>{{ $t('entities.recentSecurity') }}&nbsp;:&nbsp;&nbsp;</span>-->
+<!--                <span>{{ entityData.securityCount }}</span>-->
+<!--              </div>-->
            </div>
-            <div class="show-detail" @click="showDetail">
-              {{ $t('overall.detail') }}>
+            <div class="show-detail">
+              <div @click="showDetail"><i class="cn-icon cn-icon-detail"></i>{{ $t('overall.detail') }} ></div>
+              <div><i class="cn-icon cn-icon-graph"></i>{{ $t('entities.graph') }} ></div>
            </div>
          </div>
        </div>
--- a/src/views/entityExplorer/search/ExplorerSearch.vue
+++ b/src/views/entityExplorer/search/ExplorerSearch.vue
@@ -2,7 +2,7 @@
  <div class="explorer-search">
    <div class="explorer-search__title" v-show="!showList">{{$t('search.title')}}</div>
    <div class="explorer-search__input-case" :class="{'explorer-search__input-case--question-mark-in-line': showList}">
-      <div class="explorer-search__input">
+      <div class="explorer-search__input" style="border: 1px #DEDEDE solid;height: 42px;">
        <advanced-search
          ref="search"
          :column-list="columnList"