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

2021-12-14 16:42:45 +08:00
parent 4ef3ec5a84
commit 6623f6df65
204 changed files with 17245 additions and 1841 deletions
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -0,0 +1,388 @@
+<template>
+  <div
+      class="entity-explorer"
+      :class="{'entity-explorer--show-list': showList}">
+    <!-- 顶部工具栏，在列表页显示 -->
+    <div class="explorer-top-tools" v-show="showList">
+      <DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" 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>
+    <!-- 搜索组件 -->
+    <explorer-search
+        :class="{'explorer-search--show-list': showList}"
+        :show-list="showList"
+        @search="search"
+    ></explorer-search>
+    <!-- 内容区 -->
+    <div class="explorer-container" v-if="showList">
+      <entity-filter
+        :filter-data="filterData"
+      ></entity-filter>
+      <entity-list
+        :list-data="listData"
+        :list-mode="listMode"
+      ></entity-list>
+    </div>
+    <div class="explorer-foot" v-else>
+      <div>
+        <el-divider direction="vertical"></el-divider>
+        <div class="entity-overview">
+          <div class="overview-left">
+            <span>86</span>
+            <span>APP</span>
+          </div>
+          <div class="overview-right">
+            <div class="right-row">
+              <i class="cn-icon cn-icon-increase"></i>
+              <div class="right-label">New</div>
+              <div class="right-value">51</div>
+            </div>
+            <div class="right-row">
+              <i class="cn-icon cn-icon-active"></i>
+              <div class="right-label">Active</div>
+              <div class="right-value">56</div>
+            </div>
+          </div>
+        </div>
+        <el-divider direction="vertical"></el-divider>
+        <div class="entity-overview">
+          <div class="overview-left">
+            <span>186</span>
+            <span>DOMAIN</span>
+          </div>
+          <div class="overview-right">
+            <div class="right-row">
+              <i class="cn-icon cn-icon-increase"></i>
+              <div class="right-label">New</div>
+              <div class="right-value">40</div>
+            </div>
+            <div class="right-row">
+              <i class="cn-icon cn-icon-active"></i>
+              <div class="right-label">Active</div>
+              <div class="right-value">18</div>
+            </div>
+          </div>
+        </div>
+        <el-divider direction="vertical"></el-divider>
+        <div class="entity-overview">
+          <div class="overview-left">
+            <span>861</span>
+            <span>IP</span>
+          </div>
+          <div class="overview-right">
+            <div class="right-row">
+              <i class="cn-icon cn-icon-increase"></i>
+              <div class="right-label">New</div>
+              <div class="right-value">99</div>
+            </div>
+            <div class="right-row">
+              <i class="cn-icon cn-icon-active"></i>
+              <div class="right-label">Active</div>
+              <div class="right-value">37</div>
+            </div>
+          </div>
+        </div>
+        <el-divider direction="vertical"></el-divider>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ExplorerSearch from '@/views/entityExplorer/search/ExplorerSearch'
+import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
+import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
+import EntityFilter from '@/views/entityExplorer/EntityFilter'
+import EntityList from '@/views/entityExplorer/entityList/EntityList'
+import { entityType, entityFilterType } from '@/utils/constants'
+
+export default {
+  name: 'entity-explorer',
+  components: {
+    ExplorerSearch,
+    DateTimeRange,
+    TimeRefresh,
+    EntityFilter,
+    EntityList
+  },
+  data () {
+    return {
+      showList: false,
+      listMode: 'block', // entity列表的模式，list|block
+      timeFilter: {},
+
+      filterData: [
+        {
+          type: 'ip',
+          title: entityType.ip,
+          data: [
+            {
+              label: this.$t('overall.country'),
+              column: 'country_distinct_count',
+              icon: entityFilterType.ip[0].icon,
+              value: 15
+            },
+            {
+              label: this.$t('overall.province'),
+              column: 'province_distinct_count',
+              icon: entityFilterType.ip[1].icon,
+              value: 201
+            },
+            {
+              label: this.$t('overall.city'),
+              column: 'city_distinct_count',
+              icon: entityFilterType.ip[2].icon,
+              value: 1052
+            },
+            {
+              label: this.$t('entities.asn'),
+              column: 'asn_distinct_count',
+              icon: entityFilterType.ip[3].icon,
+              value: 76
+            }
+          ]
+        },
+        {
+          type: 'app',
+          title: entityType.app,
+          data: [
+            {
+              label: this.$t('entities.category'),
+              column: 'category_distinct_count',
+              icon: entityFilterType.app[0].icon,
+              value: 15
+            },
+            {
+              label: this.$t('entities.subcategory'),
+              column: 'subcategory_distinct_count',
+              icon: entityFilterType.app[1].icon,
+              value: 201
+            },
+            {
+              label: this.$t('entities.risk'),
+              column: 'risk_distinct_count',
+              icon: entityFilterType.app[2].icon,
+              value: 1052
+            }
+          ]
+        },
+        {
+          type: 'domain',
+          title: entityType.domain,
+          data: [
+            {
+              label: this.$t('entities.domainDetail.categoryGroup'),
+              column: 'category_group_distinct_count',
+              icon: entityFilterType.domain[0].icon,
+              value: 31
+            },
+            {
+              label: this.$t('entities.category'),
+              column: 'category_distinct_count',
+              icon: entityFilterType.domain[1].icon,
+              value: 82
+            },
+            {
+              label: this.$t('entities.reputationLevel'),
+              column: 'reputation_level_distinct_count',
+              icon: entityFilterType.domain[2].icon,
+              value: 8
+            }
+          ]
+        }
+      ],
+      listData: JSON.parse(`[
+        {
+          "entityType": "app",
+          "appName": "360cn",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "suning",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "dianping",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "youku",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "qqmusic",
+          "appCategory": "media",
+          "appId": "",
+          "appRisk": "3",
+          "appSubcategory": "multimedia-streaming"
+        },
+        {
+          "entityType": "app",
+          "appName": "meituan",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "sohu",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "mqtt",
+          "appCategory": "networking",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "remote-access"
+        },
+        {
+          "entityType": "app",
+          "appName": "adjust",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "tiktok",
+          "appCategory": "media",
+          "appId": "",
+          "appRisk": "2",
+          "appSubcategory": "photo-video"
+        },
+        {
+          "entityType": "app",
+          "appName": "4399com",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "ixigua",
+          "appCategory": "media",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "Multimedia-streaming"
+        },
+        {
+          "entityType": "app",
+          "appName": "oicq",
+          "appCategory": "collaboration",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "instant-messaging"
+        },
+        {
+          "entityType": "app",
+          "appName": "digicert",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "rdp",
+          "appCategory": "networking",
+          "appId": "",
+          "appRisk": "4",
+          "appSubcategory": "remote-access"
+        },
+        {
+          "entityType": "app",
+          "appName": "163com",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "meitu",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "gitv_tv",
+          "appCategory": "media",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "Multimedia-streaming"
+        },
+        {
+          "entityType": "app",
+          "appName": "tencent",
+          "appCategory": "general-internet",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "internet-utility"
+        },
+        {
+          "entityType": "app",
+          "appName": "thunder",
+          "appCategory": "networking",
+          "appId": "",
+          "appRisk": "1",
+          "appSubcategory": "infrastructure"
+        }
+      ]`)
+    }
+  },
+  methods: {
+    timeRefreshChange () {
+
+    },
+    reload () {
+
+    },
+    search (param) {
+      if (!this.showList) {
+        this.showList = true
+      }
+      // 带参数时，只查询对应类型的entity；不带参数时，3种entity都查
+      if (param) {
+        return '1'
+      } else {
+        return ''
+      }
+    },
+    queryFilter () {
+
+    },
+    queryList () {
+
+    }
+  }
+}
+</script>
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/src/views/entityExplorer/EntityFilter.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="entity-filter-case">
+    <div class="filter-case__header">{{$t('entities.filter')}}</div>
+    <div
+        class="entity-filter"
+        v-for="(filter, index) in filterData"
+        :key="index"
+    >
+      <div class="filter__header">{{filter.title}}</div>
+      <div class="filter__body">
+        <div class="filter__row" v-for="(item, i) in filter.data" :key="i">
+          <div class="row__label">
+            <i :class="item.icon"></i>
+            <span>{{item.label}}</span>
+          </div>
+          <div class="row__value">{{item.value}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EntityFilter',
+  props: {
+    filterData: Array
+  }
+}
+</script>
--- a/src/views/entityExplorer/entityList/Card.vue
+++ b/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>
--- a/src/views/entityExplorer/entityList/EntityList.vue
+++ b/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>
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -0,0 +1,9 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'Row'
+}
+</script>
--- a/src/views/entityExplorer/search/ExplorerSearch.vue
+++ b/src/views/entityExplorer/search/ExplorerSearch.vue
@@ -0,0 +1,48 @@
+<template>
+  <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">
+        <advanced-search
+          :show-list="showList"
+          @search="search"
+        ></advanced-search>
+      </div>
+      <div class="search-symbol-inline" v-if="showList">
+        <i class="cn-icon cn-icon-help"></i>
+      </div>
+      <div v-else class="explorer-search__foot">
+        <div class="foot__item">
+          <i class="el-icon-arrow-right" style="padding-right: 5px;"></i>
+          <span>{{$t('search.searchHistory')}}</span>
+        </div>
+        <div class="foot__item">
+          <span @click="search">{{$t('overall.explore')}}</span>
+          <el-divider direction="vertical"></el-divider>
+          <span>{{$t('overall.help')}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AdvancedSearch from '@/components/advancedSearch/AdvancedSearch'
+export default {
+  name: 'CnSearch',
+  components: {
+    AdvancedSearch
+  },
+  props: {
+    showList: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    search (param) {
+      this.$emit('search', param)
+    }
+  }
+}
+</script>