gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
刘洪洪
2023-06-16 10:14:44 +08:00
parent 871461cf4e
commit e9357465c1
10 changed files with 258 additions and 461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/components/components/advancedSearch/advanced-search2.scss
View File

@@ -10,9 +10,10 @@
right: 10px; right: 10px;
.search__suffix { .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; color: #A6AAAE;
font-size: 18px; font-size: 18px;
} }

2
src/assets/css/components/views/entityExplorer/entityList/card.scss
View File

@@ -5,7 +5,7 @@
background: #FFFFFF; background: #FFFFFF;
border-radius: 2px; border-radius: 2px;
transition: all .2s; transition: all .2s;
border: 1px solid #E2E5EC; //border: 1px solid #E2E5EC; 新版实体列表改版，后续记得解开
&:hover .cn-entity__header .header__content { &:hover .cn-entity__header .header__content {

46
src/assets/css/components/views/entityExplorer/entityList/row.scss
View File

@@ -1,8 +1,9 @@
.cn-entity--list { .cn-entity--list {
display: flex; display: flex;
border: 1px #E2E5EC solid; //border: 1px #E2E5EC solid;
margin-bottom: 10px; //margin-bottom: 10px;
border-radius: 4px; //border-radius: 4px;
// 新版实体列表改版，后续记得解开
.cn-entity__collapse { .cn-entity__collapse {
margin-bottom: 1px; margin-bottom: 1px;
@@ -12,8 +13,8 @@
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
background-color: #F3F7FA; background-color: #F3F7FA;
border-radius: 4px 0 0 4px; //border-radius: 4px 0 0 4px;
// 新版实体列表改版，后续记得解开
span { span {
transform: rotate(0); transform: rotate(0);
transition: all linear .2s; transition: all linear .2s;
@@ -40,12 +41,12 @@
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; //align-content: center;
padding: 16px 0; padding: 16px 0;
margin-bottom: 1px; margin-bottom: 1px;
background-color: white; background-color: white;
border-radius: 0 4px 4px 0; //border-radius: 0 4px 4px 0;
// 新版实体列表改版，后续记得解开
.cn-entity__icon { .cn-entity__icon {
margin-left: 26px; margin-left: 26px;
margin-right: 10px; margin-right: 10px;
@@ -76,12 +77,13 @@
font-size: 16px; font-size: 16px;
padding-bottom: 3px; padding-bottom: 3px;
color: #333333; color: #333333;
.cn-entity__header-title { //.cn-entity__header-title {
margin-right: 10px; // margin-right: 10px;
} //}
.cn-entity__header-tag { //.cn-entity__header-tag {
//
} //}
// 新版实体列表改版，后续记得解开
} }
.cn-entity__body { .cn-entity__body {
@@ -166,18 +168,20 @@
flex-shrink: 0; flex-shrink: 0;
padding: 0 30px; padding: 0 30px;
font-size: 12px; font-size: 12px;
color: #2C72C6; color: #3976CB;
font-weight: 400; //color: #2C72C6;
margin-top: -17px; //font-weight: 400;
//margin-top: -17px;
// 新版实体列表改版，后续记得解开
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
i { //i {
font-size: 12px; // font-size: 12px;
margin-right: 5px; // margin-right: 5px;
} //}
} }
} }
} }

38
src/components/advancedSearch/TagMode.vue
View File

@@ -75,10 +75,13 @@
</div> </div>
<div class="tag-search__add" @click="addCondition">{{$t('entities.advancedSearch.add')}}</div> <div class="tag-search__add" @click="addCondition">{{$t('entities.advancedSearch.add')}}</div>
<div class="search__suffixes search__suffixes--tag-mode"> <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> <i class="cn-icon cn-icon-search-normal"></i>
</div> </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> <i class="el-icon-search"></i>
</div> </div>
</div> </div>
@@ -416,19 +419,20 @@ export default {
} }
</script> </script>
<style lang="scss"> <!--// 新版实体列表改版，后续记得解开-->
.new-search__suffix { <!--<style lang="scss">-->
width: 41px; <!--.new-search__suffix {-->
height: 41px; <!-- width: 41px;-->
line-height: 41px; <!-- height: 41px;-->
background: #38ACD2; <!-- line-height: 41px;-->
text-align: center; <!-- background: #38ACD2;-->
margin-top: -10px; <!-- text-align: center;-->
margin-right: -10px; <!-- margin-top: -10px;-->
<!-- margin-right: -10px;-->
.el-icon-search { <!-- .el-icon-search {-->
color: #fff !important; <!-- color: #fff !important;-->
margin-top: 9px !important; <!-- margin-top: 9px !important;-->
} <!-- }-->
} <!--}-->
</style> <!--</style>-->

63
src/components/advancedSearch/TextMode.vue
View File

@@ -4,12 +4,13 @@
></textarea> ></textarea>
<div class="search__suffixes search__suffixes--text-mode"> <div class="search__suffixes search__suffixes--text-mode">
<div class="search__suffix" @click="changeMode"> <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>
<div class="search__suffix-close" @click="cleanParams"> <!-- <div class="search__suffix-close" @click="cleanParams">-->
<i class="el-icon-error"></i> <!-- <i class="el-icon-error"></i>-->
</div> <!-- </div>-->
<div class="search__suffix new-search__suffix" @click="search"> <!-- <div class="search__suffix new-search__suffix" @click="search">-->
<div class="search__suffix" @click="search">
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
</div> </div>
</div> </div>
@@ -41,9 +42,9 @@ export default {
}, },
emits: ['changeMode', 'search'], emits: ['changeMode', 'search'],
methods: { methods: {
cleanParams () { // cleanParams () {
toRaw(this.codeMirror).setValue('') // toRaw(this.codeMirror).setValue('')
}, // },
initCodeMirror () { initCodeMirror () {
this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, { this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
mode: { mode: {
@@ -158,28 +159,28 @@ export default {
} }
</script> </script>
<style lang="scss"> <!--<style lang="scss">-->
.search__suffix-close { <!--.search__suffix-close {-->
.el-icon-error { <!-- .el-icon-error {-->
font-size: 17px; <!-- font-size: 17px;-->
color: #C4C4C4; <!-- color: #C4C4C4;-->
margin: 0 12px; <!-- margin: 0 12px;-->
cursor: pointer; <!-- cursor: pointer;-->
} <!-- }-->
} <!--}-->
.new-search__suffix { <!--.new-search__suffix {-->
width: 41px; <!-- width: 41px;-->
height: 41px; <!-- height: 41px;-->
line-height: 41px; <!-- line-height: 41px;-->
background: #38ACD2; <!-- background: #38ACD2;-->
text-align: center; <!-- text-align: center;-->
margin-top: -10px; <!-- margin-top: -10px;-->
margin-right: -10px; <!-- margin-right: -10px;-->
.el-icon-search { <!-- .el-icon-search {-->
color: #fff !important; <!-- color: #fff !important;-->
margin-top: 9px !important; <!-- margin-top: 9px !important;-->
} <!-- }-->
} <!--}-->
</style> <!--</style>-->

4
src/components/layout/Container.vue
View File

@@ -20,7 +20,9 @@ export default {
entityDetectionStyle () { entityDetectionStyle () {
const route = this.$route.name !== undefined ? this.$route.name : this.$route const route = this.$route.name !== undefined ? this.$route.name : this.$route
if (listScrollPath.indexOf(route.path) > -1) { 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 return style
} else { } else {
return '' return ''

25
src/views/entityExplorer/EntityExplorer.vue
View File

@@ -3,11 +3,18 @@
class="entity-explorer" class="entity-explorer"
:class="{'entity-explorer--show-list': showList}"> :class="{'entity-explorer--show-list': showList}">
<!-- 顶部工具栏，在列表页显示 --> <!-- 顶部工具栏，在列表页显示 -->
<div class="explorer-top-tools explorer-top-tools-new" v-show="showList"> <!-- <div class="explorer-top-tools explorer-top-tools-new" v-show="showList">-->
<div class="explorer-detection-top-tools"> <!-- <div class="explorer-detection-top-tools">-->
<div class="explorer-top-tools-title">{{$t('network.entity')}}</div> <!-- <div class="explorer-top-tools-title">{{$t('network.entity')}}</div>-->
</div> <!-- </div>-->
<div class="explorer-top-tools"> <!-- <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"/> <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"/> <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
<el-button-group size="mini"> <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 size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
</el-button-group> </el-button-group>
</div> </div>
</div> <!-- </div>-->
<!-- 搜索组件 --> <!-- 搜索组件 -->
<explorer-search <explorer-search
ref="search" ref="search"
@@ -25,9 +32,9 @@
></explorer-search> ></explorer-search>
<!--todo静态数据，之后记得修改--> <!--todo静态数据，之后记得修改-->
<div class="explorer-result" v-if="showList"> <!-- <div class="explorer-result" v-if="showList">-->
8,866 results，IP 2666，Domain 3200，APP 3000 <!-- 8,866 results，IP 2666，Domain 3200，APP 3000-->
</div> <!-- </div>-->
<!-- 内容区 --> <!-- 内容区 -->
<div class="explorer-container" v-if="showList" style="height: calc(100% - 20px); flex-direction: column"> <div class="explorer-container" v-if="showList" style="height: calc(100% - 20px); flex-direction: column">
<div style="display: flex; height: auto;"> <div style="display: flex; height: auto;">

486
src/views/entityExplorer/EntityFilter.vue
View File

@@ -1,382 +1,150 @@
<template> <template >
<div class="entity-filter-case"> <div class="entity-filter-case">
<div class="filter-case__header">{{ $t('entities.filter1') }}</div> <div class="filter-case__header">{{$t('entities.filter')}}</div>
<div
<div class="entity-filter" v-for="(item, index) in filterData" :key="index"> class="entity-filter"
<div class="filter__header"> v-for="(filters, index) in filterData"
<i :class="item.icon"></i> :key="index"
{{ item.title }} >
</div> <div class="filter__header">{{filters.title}}</div>
<div class="filter__body"> <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>
<div class="filter-hr"></div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <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 { export default {
name: 'EntityFilter', name: 'EntityFilter',
components: {
Loading,
EntityTop
},
props: {
filterData: Array,
q: String,
timeFilter: Object,
loadingLeft: Boolean
},
data () { data () {
return { return {
filterData: [ topList: 'list',
{ topData: [],
icon: 'cn-icon cn-icon-registration-country', entityTopTenData: [],
title: 'Top Countries', currentColumn: {},
totalCount: 0, totalCount: 0,
data: [ loading: false,
{ popoverData: [],
label: 'China', itemData: {}
flag: '011-china', }
topColumn: 'ip_location_country', // top弹框查询字段 },
value: 364 watch: {
}, currentColumn (n, o) {
{ if (n.column === 'dnsServerOrgCount') {
label: 'Australia', this.totalCount = this.filterData[3].orgTotalCount
flag: '142-australia', } else if (n.column === 'dnsServerSoftwareCount') {
topColumn: 'ip_location_country', // top弹框查询字段 this.totalCount = this.filterData[3].softwareTotalCount
value: 226 } else if (n.column === 'dnsServerOsCount') {
}, this.totalCount = this.filterData[3].osTotalCount
{ } else if (n.column === 'categoryDistinctCount' && n.type === 'app') {
label: 'South Korea', this.totalCount = this.filterData[1].totalCount
flag: '218-south korea', } else {
topColumn: 'ip_location_country', // top弹框查询字段 let count = 0
value: 120 this.filterData.forEach(f => {
}, const filter = f.data.some(d => d.column === n.column)
{ if (filter) {
label: 'Germany', count = f.totalCount
flag: '207-germany', }
topColumn: 'ip_location_country', // top弹框查询字段 })
value: 120 this.totalCount = count
}, }
{
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: { methods: {
/** showTopDialog (i, item, filter) {
* 判断文字是否溢出，超出则鼠标移入tooltip显示，否则鼠标移入不显示 if (this.currentColumn.column === item.column && item.showTopTen) {
* @param id item.showTopTen = false
*/ return
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, data) { filter (name, topData) {
this.$emit('filter', name, data) this.showTopDialog('', topData)
console.log('打印数据', name, topData)
this.$emit('filter', name, topData)
} }
} }
} }
</script> </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>

46
src/views/entityExplorer/entityList/Row.vue
View File

@@ -9,12 +9,14 @@
<div class="cn-entity__case"> <div class="cn-entity__case">
<div class="cn-entity__icon"><i :class="iconClass"></i></div> <div class="cn-entity__icon"><i :class="iconClass"></i></div>
<div class="cn-entity__row"> <div class="cn-entity__row">
<div class="cn-entity__header" style="display: flex"> <div class="cn-entity__header">
<span class="cn-entity__header-title">{{ entityData.ipAddr || entityData.domainName || entityData.appName || 'Unknown' }}</span> {{ entityData.ipAddr || entityData.domainName || entityData.appName || 'Unknown' }}
<span class="entity-detail" style="display: flex"> <!-- <div class="cn-entity__header" style="display: flex">-->
<span style="width: 62px;" class="entity-tag entity-tag--small entity-tag--level-two-positive margin-r-6">信息技术</span> <!-- <span class="cn-entity__header-title">{{ entityData.ipAddr || entityData.domainName || entityData.appName || 'Unknown' }}</span>-->
<span style="width: 50px;" class="entity-tag entity-tag--small entity-tag--level-two-normal margin-r-6">互联网</span> <!-- <span class="entity-detail" style="display: flex">-->
</span> <!-- <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>
<div class="cn-entity__body"> <div class="cn-entity__body">
<div class="body__basic-info"> <div class="body__basic-info">
@@ -131,21 +133,27 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="basic-info__item">--> <!--新版实体列表改版，去除这一段-->
<!-- <i class="cn-icon cn-icon-entity-alert"></i>--> <div class="basic-info__item">
<!-- <span>{{ $t('entities.recentAlert') }}&nbsp;:&nbsp;&nbsp;</span>--> <i class="cn-icon cn-icon-entity-alert"></i>
<!-- <span>{{ entityData.performanceCount }}</span>--> <span>{{ $t('entities.recentAlert') }}&nbsp;:&nbsp;&nbsp;</span>
<!-- </div>--> <span>{{ entityData.performanceCount }}</span>
<!-- <div class="basic-info__item">--> </div>
<!-- <i class="cn-icon cn-icon-safe"></i>--> <div class="basic-info__item">
<!-- <span>{{ $t('entities.recentSecurity') }}&nbsp;:&nbsp;&nbsp;</span>--> <i class="cn-icon cn-icon-safe"></i>
<!-- <span>{{ entityData.securityCount }}</span>--> <span>{{ $t('entities.recentSecurity') }}&nbsp;:&nbsp;&nbsp;</span>
<!-- </div>--> <span>{{ entityData.securityCount }}</span>
</div>
<!--新版实体列表改版，去除这一段-->
</div> </div>
<div class="show-detail"> <div class="show-detail" @click="showDetail">
<div @click="showDetail"><i class="cn-icon cn-icon-detail"></i>{{ $t('overall.detail') }} ></div> {{ $t('overall.detail') }}>
<div><i class="cn-icon cn-icon-graph"></i>{{ $t('entities.graph') }} ></div>
</div> </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> </div>
</div> </div>

4
src/views/entityExplorer/search/ExplorerSearch.vue
View File

@@ -2,7 +2,9 @@
<div class="explorer-search"> <div class="explorer-search">
<div class="explorer-search__title" v-show="!showList">{{$t('search.title')}}</div> <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-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 <advanced-search
ref="search" ref="search"
:column-list="columnList" :column-list="columnList"