fix: 还原实体列表界面和样式

2023-06-16 10:14:44 +08:00
parent 871461cf4e
commit e9357465c1
10 changed files with 258 additions and 461 deletions
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -10,9 +10,10 @@
      right: 10px;

      .search__suffix {
-        //margin-left: 8px;
+        margin-left: 8px; // 新版实体列表改版，后续记得解开

-        .cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
+        .cn-icon-search-advance, .cn-icon-search-normal {
+        //.cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
          color: #A6AAAE;
          font-size: 18px;
        }
--- a/src/assets/css/components/views/entityExplorer/entityList/card.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/card.scss
@@ -5,7 +5,7 @@
  background: #FFFFFF;
  border-radius: 2px;
  transition: all .2s;
-  border: 1px solid #E2E5EC;
+  //border: 1px solid #E2E5EC; 新版实体列表改版，后续记得解开

  &:hover .cn-entity__header .header__content {

--- a/src/assets/css/components/views/entityExplorer/entityList/row.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss
@@ -1,8 +1,9 @@
 .cn-entity--list {
  display: flex;
-  border: 1px #E2E5EC solid;
-  margin-bottom: 10px;
-  border-radius: 4px;
+  //border: 1px #E2E5EC solid;
+  //margin-bottom: 10px;
+  //border-radius: 4px;
+  // 新版实体列表改版，后续记得解开

  .cn-entity__collapse {
    margin-bottom: 1px;
@@ -12,8 +13,8 @@
    justify-content: center;
    align-items: flex-start;
    background-color: #F3F7FA;
-    border-radius: 4px 0 0 4px;
-
+    //border-radius: 4px 0 0 4px;
+    // 新版实体列表改版，后续记得解开
    span {
      transform: rotate(0);
      transition: all linear .2s;
@@ -40,12 +41,12 @@
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
-    align-content: center;
+    //align-content: center;
    padding: 16px 0;
    margin-bottom: 1px;
    background-color: white;
-    border-radius: 0 4px 4px 0;
-
+    //border-radius: 0 4px 4px 0;
+    // 新版实体列表改版，后续记得解开
    .cn-entity__icon {
      margin-left: 26px;
      margin-right: 10px;
@@ -76,12 +77,13 @@
        font-size: 16px;
        padding-bottom: 3px;
        color: #333333;
-        .cn-entity__header-title {
-          margin-right: 10px;
-        }
-        .cn-entity__header-tag {
-
-        }
+        //.cn-entity__header-title {
+        //  margin-right: 10px;
+        //}
+        //.cn-entity__header-tag {
+        //
+        //}
+        // 新版实体列表改版，后续记得解开
      }

      .cn-entity__body {
@@ -166,18 +168,20 @@
            flex-shrink: 0;
            padding: 0 30px;
            font-size: 12px;
-            color: #2C72C6;
-            font-weight: 400;
-            margin-top: -17px;
+            color: #3976CB;
+            //color: #2C72C6;
+            //font-weight: 400;
+            //margin-top: -17px;
+            // 新版实体列表改版，后续记得解开

            &:hover {
              cursor: pointer;
            }

-            i {
-              font-size: 12px;
-              margin-right: 5px;
-            }
+            //i {
+            //  font-size: 12px;
+            //  margin-right: 5px;
+            //}
          }
        }
      }
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -75,10 +75,13 @@
    </div>
    <div class="tag-search__add" @click="addCondition">{{$t('entities.advancedSearch.add')}}</div>
    <div class="search__suffixes search__suffixes--tag-mode">
-      <div class="search__suffix" style="margin-right: 12px" @click="changeMode">
+      <div class="search__suffix" @click="changeMode">
+<!--        新版实体列表改版，后续记得解开-->
+<!--      <div class="search__suffix" style="margin-right: 12px" @click="changeMode">-->
        <i class="cn-icon cn-icon-search-normal"></i>
      </div>
-      <div class="search__suffix new-search__suffix" @click="search">
+      <div class="search__suffix" @click="search">
+<!--      <div class="search__suffix new-search__suffix" @click="search">-->
        <i class="el-icon-search"></i>
      </div>
    </div>
@@ -416,19 +419,20 @@ export default {
 }
 </script>

-<style lang="scss">
-.new-search__suffix {
-  width: 41px;
-  height: 41px;
-  line-height: 41px;
-  background: #38ACD2;
-  text-align: center;
-  margin-top: -10px;
-  margin-right: -10px;
+<!--// 新版实体列表改版，后续记得解开-->
+<!--<style lang="scss">-->
+<!--.new-search__suffix {-->
+<!--  width: 41px;-->
+<!--  height: 41px;-->
+<!--  line-height: 41px;-->
+<!--  background: #38ACD2;-->
+<!--  text-align: center;-->
+<!--  margin-top: -10px;-->
+<!--  margin-right: -10px;-->

-  .el-icon-search {
-    color: #fff !important;
-    margin-top: 9px !important;
-  }
-}
-</style>
+<!--  .el-icon-search {-->
+<!--    color: #fff !important;-->
+<!--    margin-top: 9px !important;-->
+<!--  }-->
+<!--}-->
+<!--</style>-->
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -4,12 +4,13 @@
  ></textarea>
  <div class="search__suffixes search__suffixes--text-mode">
    <div class="search__suffix" @click="changeMode">
-      <i class="cn-icon cn-icon-filter"></i>
+      <i class="cn-icon cn-icon-search-advance"></i>
    </div>
-    <div class="search__suffix-close" @click="cleanParams">
-      <i class="el-icon-error"></i>
-    </div>
-    <div class="search__suffix new-search__suffix" @click="search">
+<!--    <div class="search__suffix-close" @click="cleanParams">-->
+<!--      <i class="el-icon-error"></i>-->
+<!--    </div>-->
+<!--    <div class="search__suffix new-search__suffix" @click="search">-->
+    <div class="search__suffix" @click="search">
      <i class="el-icon-search"></i>
    </div>
  </div>
@@ -41,9 +42,9 @@ export default {
  },
  emits: ['changeMode', 'search'],
  methods: {
-    cleanParams () {
-      toRaw(this.codeMirror).setValue('')
-    },
+    // cleanParams () {
+    //   toRaw(this.codeMirror).setValue('')
+    // },
    initCodeMirror () {
      this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
        mode: {
@@ -158,28 +159,28 @@ export default {
 }
 </script>

-<style lang="scss">
-.search__suffix-close {
-  .el-icon-error {
-    font-size: 17px;
-    color: #C4C4C4;
-    margin: 0 12px;
-    cursor: pointer;
-  }
-}
+<!--<style lang="scss">-->
+<!--.search__suffix-close {-->
+<!--  .el-icon-error {-->
+<!--    font-size: 17px;-->
+<!--    color: #C4C4C4;-->
+<!--    margin: 0 12px;-->
+<!--    cursor: pointer;-->
+<!--  }-->
+<!--}-->

-.new-search__suffix {
-  width: 41px;
-  height: 41px;
-  line-height: 41px;
-  background: #38ACD2;
-  text-align: center;
-  margin-top: -10px;
-  margin-right: -10px;
+<!--.new-search__suffix {-->
+<!--  width: 41px;-->
+<!--  height: 41px;-->
+<!--  line-height: 41px;-->
+<!--  background: #38ACD2;-->
+<!--  text-align: center;-->
+<!--  margin-top: -10px;-->
+<!--  margin-right: -10px;-->

-  .el-icon-search {
-    color: #fff !important;
-    margin-top: 9px !important;
-  }
-}
-</style>
+<!--  .el-icon-search {-->
+<!--    color: #fff !important;-->
+<!--    margin-top: 9px !important;-->
+<!--  }-->
+<!--}-->
+<!--</style>-->
--- a/src/components/layout/Container.vue
+++ b/src/components/layout/Container.vue
@@ -20,7 +20,9 @@ export default {
    entityDetectionStyle () {
      const route = this.$route.name !== undefined ? this.$route.name : this.$route
      if (listScrollPath.indexOf(route.path) > -1) {
-        const style = 'overflow:auto;'
+        // 新版实体列表改版，后续记得解开
+        const style = route.path === listScrollPath[0] ? 'overflow:auto;background-color: #EFF2F5;' : 'overflow:auto;'
+        // const style = 'overflow:auto;'
        return style
      } else {
        return ''
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -3,11 +3,18 @@
      class="entity-explorer"
      :class="{'entity-explorer--show-list': showList}">
    <!-- 顶部工具栏，在列表页显示 -->
-    <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">
+<!--    <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 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">
@@ -15,7 +22,7 @@
          <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>
+<!--    </div>-->
    <!-- 搜索组件 -->
    <explorer-search
        ref="search"
@@ -25,9 +32,9 @@
    ></explorer-search>

    <!--todo静态数据，之后记得修改-->
-    <div class="explorer-result" v-if="showList">
-      8,866 results，IP 2666，Domain 3200，APP 3000
-    </div>
+<!--    <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,382 +1,150 @@
 <template >
  <div class="entity-filter-case">
-    <div class="filter-case__header">{{ $t('entities.filter1') }}</div>
-
-    <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-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__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 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>
-        <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 {
-      filterData: [
-        {
-          icon: 'cn-icon cn-icon-registration-country',
-          title: 'Top Countries',
+      topList: 'list',
+      topData: [],
+      entityTopTenData: [],
+      currentColumn: {},
      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
+      loading: false,
+      popoverData: [],
+      itemData: {}
    }
-          ]
  },
-        {
-          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
+  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
          }
-          ]
-        },
-        {
-          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
+        })
+        this.totalCount = count
      }
-          ]
-        },
-        {
-          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: {
-    /**
-     * 判断文字是否溢出，超出则鼠标移入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
+    showTopDialog (i, item, filter) {
+      if (this.currentColumn.column === item.column && item.showTopTen) {
+        item.showTopTen = false
+        return
      }
+      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, data) {
-      this.$emit('filter', name, data)
+    filter (name, topData) {
+      this.showTopDialog('', topData)
+      console.log('打印数据', name, topData)
+      this.$emit('filter', name, topData)
    }
  }
 }
 </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,12 +9,14 @@
    <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" 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 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&#45;&#45;small entity-tag&#45;&#45;level-two-positive margin-r-6">信息技术</span>-->
+<!--            <span style="width: 50px;" class="entity-tag entity-tag&#45;&#45;small entity-tag&#45;&#45;level-two-normal margin-r-6">互联网</span>-->
+<!--          </span>-->
        </div>
        <div class="cn-entity__body">
          <div class="body__basic-info">
@@ -131,21 +133,27 @@
                  </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="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 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>
+<!--            新版实体列表改版，后续记得解开-->
+<!--            <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>
      </div>
--- a/src/views/entityExplorer/search/ExplorerSearch.vue
+++ b/src/views/entityExplorer/search/ExplorerSearch.vue
@@ -2,7 +2,9 @@
  <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" style="border: 1px #DEDEDE solid;height: 42px;">
+      <div class="explorer-search__input">
+      <!--新版实体列表改版，后续记得解开-->
+      <!--<div class="explorer-search__input" style="border: 1px #DEDEDE solid;height: 42px;">-->
        <advanced-search
          ref="search"
          :column-list="columnList"