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-08-04 15:47:47 +08:00
parent 6b89d4346d
commit 3471cb159f
8 changed files with 68 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/images/flag/Unknown.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="12px" viewBox="0 0 18 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>未知</title>
<g id="🥇Entity" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Entity_Explore【domain展开】" transform="translate(-180.000000, -216.000000)">
<g id="未知" transform="translate(180.000000, 216.000000)">
<rect id="矩形" fill="#EFF2F5" x="0" y="0" width="18" height="12"></rect>
<g transform="translate(2.000000, 3.000000)" fill="#96A2B0" fill-rule="nonzero">
<polygon id="路径" points="1.513 2.957 1.035 2 0.991 2 1.13 2.957 1.13 6.131 0 6.131 0 0 0.869 0 3.174 3.243 3.635 4.174 3.679 4.174 3.539 3.243 3.539 0.043 4.67 0.043 4.67 6.174 3.8 6.174"></polygon>
<path d="M12.261,4.783 L10.391,4.783 L9.93,6.131 L8.739,6.131 L10.93,0 L11.808,0 L14,6.131 L12.748,6.131 L12.261,4.783 Z M10.696,3.827 L12,3.827 L11.548,2.47 L11.365,1.513 L11.321,1.513 L11.138,2.478 L10.696,3.827 Z" id="形状"></path>
<polygon id="路径" points="8.101 0 5.367 6.174 6.396 6.174 9.123 0"></polygon>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

7
src/assets/css/components/views/entityExplorer/entity-explorer.scss
View File

@@ -88,12 +88,17 @@
color: #353636;
font-weight: 400;
}
.explorer-container {
.explorer-container, .explorer-container-new {
display: flex;
overflow: visible; /*overflow: hidden;*/
height: calc(100% - 120px);
position: relative;
}
.explorer-container-new {
height: calc(100% - 62px);
flex-direction: column;
width: calc(100% - 340px);
}
.explorer-foot {
display: flex;
justify-content: center;

11
src/assets/css/components/views/entityExplorer/entity-filter.scss
View File

@@ -56,11 +56,6 @@
color: #353636;
font-weight: 400;
.filter-country-flag {
width: 18px;
height: 12px;
}
.filter__body-item-left-index {
width: 16px;
height: 16px;
@@ -99,3 +94,9 @@
}
}
}
.filter-country-flag {
width: 18px;
height: 12px;
margin-right: 6px;
}

4
src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
View File

@@ -107,8 +107,8 @@ $font-size: 12px;
}
.graph-list-country-flag {
width: 16px;
height: 14px;
width: 14px;
height: 10px;
margin-right: 5px;
}

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

@@ -25,7 +25,7 @@
:time-filter="timeFilter"
@filter="filter"
></entity-filter>
<div class="explorer-container" style="height: calc(100% - 62px);flex-direction: column;width: 100%;">
<div class="explorer-container explorer-container-new">
<explorer-search
ref="search"
:class="{'explorer-search--show-list': showList}"
@@ -662,9 +662,9 @@ export default {
if (item.code === 200 && item.data.list) {
this.newFilterData[index].data = []
item.data.list.forEach(item => {
const obj = { label: item.value, flag: '011-china', topColumn: 'Country', value: item.uniqueEntities }
const obj = { label: item.value, topColumn: 'Country', value: item.uniqueEntities }
if (index === 0) {
obj.flag = item.uniqueEntities // 接口字段名称为'China'，目前svg名称为'011-china'，后续再指定方案调整
obj.flag = item.value // 接口字段名称为'China'，svg名称为'CN'，通过countryNameIdMapping进行转换
}
if (index === 1) {
obj.topColumn = 'City'

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

@@ -15,11 +15,11 @@
<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 class="filter__body-item-left-index">{{ i+1 }}</div>
<div v-if="data.flag">
<img v-if="data.flag===countryNameIdMapping.Unknown || !countryNameIdMapping[data.flag]" src="../../../public/images/flag/Unknown.svg" class="filter-country-flag">
<img v-else :src="require(`../../../public/images/flag/${countryNameIdMapping[data.flag]}.png`)" class="filter-country-flag"/>
</div>
<div v-else class="filter__body-item-left-index">{{ i+1 }}</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>
@@ -42,6 +42,7 @@
<script>
import Loading from '@/components/common/Loading'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import { countryNameIdMapping } from '@/utils/constants'
export default {
name: 'EntityFilter',
components: { ChartNoData, Loading },
@@ -65,7 +66,8 @@ export default {
},
data () {
return {
disabledLabel: true
disabledLabel: true,
countryNameIdMapping
}
},
methods: {

17
src/views/entityExplorer/entityGraph/GraphEntityList.vue
View File

@@ -39,8 +39,11 @@
<div class="graph-list-item-block">
<div class="graph-list-item padding-b-4">
<div class="graph-list-item-label">{{ $t('overall.location') }}:</div>
<div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;">
<!-- <img :src="require(`../../../../public/images/flag/${item.flag}.svg`)" class="graph-list-country-flag"/>-->
<div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;line-height: 14px;">
<div style="line-height: 10px">
<img v-if="getCountry(item.detail)===countryNameIdMapping.Unknown || !countryNameIdMapping[getCountry(item.detail)]" src="../../../../public/images/flag/Unknown.svg" class="graph-list-country-flag">
<img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[getCountry(item.detail)]}.png`)" class="graph-list-country-flag" >
</div>
<span>{{ $_.get(item.detail, 'location.city', '-') }}</span>
</div>
</div>
@@ -105,7 +108,7 @@
<script>
import Loading from '@/components/common/Loading'
import { riskLevelMapping } from '@/utils/constants'
import { riskLevelMapping, countryNameIdMapping } from '@/utils/constants'
import { scrollToTop } from '@/utils/tools'
import _ from 'lodash'
@@ -119,6 +122,11 @@ export default {
type: Boolean
}
},
data () {
return {
countryNameIdMapping
}
},
components: {
Loading
},
@@ -181,6 +189,9 @@ export default {
expandList () {
// 继续拓展ip列表，传递信息，调用接口
this.$emit('expandList', _.get(this.node, 'id'))
},
getCountry (detail) {
return this.$_.get(detail, 'location.country') || 'Unknown'
}
},
mounted () {

15
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -4,7 +4,16 @@
<div class="overview__content">
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.location')}}</div>
<div class="row__content">{{ipLocationRegion(entity.location)}}</div>
<div class="row__content">
<div v-if="entity.location" style="display: flex">
<div v-if="entity.location.country">
<img v-if="entity.location.country===countryNameIdMapping.Unknown || !countryNameIdMapping[entity.location.country]" src="../../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
<img v-else :src="require(`../../../../../public/images/flag/${countryNameIdMapping[entity.location.country]}.png`)" class="filter-country-flag" >
</div>
{{ipLocationRegion(entity.location)}}
</div>
<div v-else>-</div>
</div>
</div>
<div class="overview__row">
<div class="row__label row__label--width130">ASN</div>
@@ -248,6 +257,7 @@ import relatedServer from '@/mixins/relatedServer'
import { dateFormatByAppearance, getMillisecond, getSecond } from '@/utils/date-util'
import Loading from '@/components/common/Loading'
import axios from 'axios'
import { countryNameIdMapping } from '@/utils/constants'
export default {
name: 'Ip',
@@ -345,7 +355,8 @@ export default {
loadingAlert: false,
loadingSecurityEvents: false,
loadingMap: false,
openPort: '-'
openPort: '-',
countryNameIdMapping
}
},
computed: {