CN-240 feat: 实体列表下拉详情（部分）
This commit is contained in:
chenjinsong
@@ -16,3 +16,4 @@
|
|||||||
@import './views/entityExplorer/entityList/entityList';
|
@import './views/entityExplorer/entityList/entityList';
|
||||||
@import './views/entityExplorer/entityList/card';
|
@import './views/entityExplorer/entityList/card';
|
||||||
@import './views/entityExplorer/entityList/row';
|
@import './views/entityExplorer/entityList/row';
|
||||||
|
@import './views/entityExplorer/entityList/detailOverview';
|
||||||
|
|||||||
@@ -0,0 +1,115 @@
|
|||||||
|
.entity-detail-overview {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 30px;
|
||||||
|
|
||||||
|
.overview-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
.overview__title {
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.overview__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 8px 0 0 20px;
|
||||||
|
|
||||||
|
.overview__row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 2px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&.overview__row--small-font {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.show-more {
|
||||||
|
color: #8FA1BE;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.row__label {
|
||||||
|
color: #6B717B;
|
||||||
|
padding-right: 20px;
|
||||||
|
|
||||||
|
&.row__label--width130 {
|
||||||
|
flex-basis: 130px;
|
||||||
|
padding-right: unset;
|
||||||
|
}
|
||||||
|
&.row__label--width160 {
|
||||||
|
flex-basis: 160px;
|
||||||
|
padding-right: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.row__content {
|
||||||
|
display: flex;
|
||||||
|
color: #3976CB;
|
||||||
|
|
||||||
|
.alert-level-tag {
|
||||||
|
display: flex;
|
||||||
|
padding: 1px 4px;
|
||||||
|
margin-right: 6px;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
&.alert-level-tag--high {
|
||||||
|
background-color: #ED907B;
|
||||||
|
}
|
||||||
|
&.alert-level-tag--middle {
|
||||||
|
background-color: #FFAB66;
|
||||||
|
}
|
||||||
|
&.alert-level-tag--low {
|
||||||
|
background-color: #F6C738;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.row__content--width200 {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.row__contents {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.row__content {
|
||||||
|
padding: 2px 0;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
&:last-of-type {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.row__desc {
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview__tags {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.overview__tag {
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 15px;
|
||||||
|
margin-right: 20px;
|
||||||
|
background-color: #EFF6FE;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.tag__value {
|
||||||
|
padding-right: 5px;
|
||||||
|
color: #3976CB;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.tag__desc {
|
||||||
|
color: #3976CB;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -31,6 +31,7 @@
|
|||||||
.cn-entity__case {
|
.cn-entity__case {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
padding: 16px 0;
|
padding: 16px 0;
|
||||||
margin-bottom: 1px;
|
margin-bottom: 1px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
@@ -110,5 +111,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.cn-entity__detail-overview {
|
||||||
|
flex-basis: 100%;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
.el-divider {
|
||||||
|
background-color: #EFF2F5;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,14 +7,14 @@
|
|||||||
<!-- 列表式 -->
|
<!-- 列表式 -->
|
||||||
<template v-if="listMode === 'list'">
|
<template v-if="listMode === 'list'">
|
||||||
<div class="entity-list--list">
|
<div class="entity-list--list">
|
||||||
<div v-if="isCollapse" @click="cancelCollapse" class="cn-entity__shadow"></div>
|
<div v-if="!isCollapse" @click="collapse" class="cn-entity__shadow"></div>
|
||||||
<entity-row
|
<entity-row
|
||||||
v-for="(data, index) in listData"
|
v-for="(data, index) in listData"
|
||||||
:entity="data"
|
:entity="data"
|
||||||
:key="index"
|
:key="index"
|
||||||
:ref="`entityRow${index}`"
|
:ref="`entityRow${index}`"
|
||||||
:index="index"
|
:index="index"
|
||||||
@showCollapse="showCollapse"
|
@switchCollapse="switchCollapse"
|
||||||
></entity-row>
|
></entity-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -73,7 +73,7 @@ export default {
|
|||||||
showDetail: false,
|
showDetail: false,
|
||||||
typeName: '',
|
typeName: '',
|
||||||
entityList: [],
|
entityList: [],
|
||||||
isCollapse: false,
|
isCollapse: true,
|
||||||
collapseIndex: 0
|
collapseIndex: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -103,13 +103,13 @@ export default {
|
|||||||
entityDetail (params) {
|
entityDetail (params) {
|
||||||
this.$emit('showDetail', { ...params, icon: this.iconClass })
|
this.$emit('showDetail', { ...params, icon: this.iconClass })
|
||||||
},
|
},
|
||||||
showCollapse (isCollapse, index) {
|
switchCollapse (isCollapse, index) {
|
||||||
this.isCollapse = isCollapse
|
this.isCollapse = isCollapse
|
||||||
this.collapseIndex = index
|
this.collapseIndex = index
|
||||||
},
|
},
|
||||||
cancelCollapse () {
|
collapse () {
|
||||||
this.isCollapse = false
|
this.isCollapse = true
|
||||||
this.$refs[`entityRow${this.collapseIndex}`].cancelCollapse()
|
this.$refs[`entityRow${this.collapseIndex}`].collapse()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="cn-entity--list" :style="{zIndex: isCollapse ? 1 : 'unset'}">
|
<div class="cn-entity--list" :style="{zIndex: !isCollapse ? 1 : 'unset'}">
|
||||||
<!-- 左侧下拉按钮 -->
|
<!-- 左侧下拉按钮 -->
|
||||||
<div class="cn-entity__collapse">
|
<div class="cn-entity__collapse">
|
||||||
<span @click="showCollapse" :class="{'reg-down': isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
|
<span @click="switchCollapse" :class="{'reg-down': !isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
||||||
@@ -84,35 +84,48 @@
|
|||||||
<span>{{entityData.securityCount || '-'}}</span>
|
<span>{{entityData.securityCount || '-'}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="show-detail" :style="{visibility: isCollapse ? 'visible' : 'hidden'}">{{$t('overall.detail')}}>></div>
|
<div class="show-detail" :style="{visibility: !isCollapse ? 'visible' : 'hidden'}">{{$t('overall.detail')}}>></div>
|
||||||
</div>
|
|
||||||
<div class="body__detail"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<el-collapse-transition>
|
||||||
|
<div class="cn-entity__detail-overview" v-show="!isCollapse">
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<detail-overview
|
||||||
|
:entity="entityData"
|
||||||
|
></detail-overview>
|
||||||
|
</div>
|
||||||
|
</el-collapse-transition>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import entityListMixin from './entityListMixin'
|
import entityListMixin from './entityListMixin'
|
||||||
|
import DetailOverview from '@/views/entityExplorer/entityList/detailOverview/DetailOverview'
|
||||||
export default {
|
export default {
|
||||||
name: 'Row',
|
name: 'Row',
|
||||||
props: {
|
props: {
|
||||||
index: Number
|
index: Number
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
DetailOverview
|
||||||
|
},
|
||||||
mixins: [entityListMixin],
|
mixins: [entityListMixin],
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
isCollapse: false
|
isCollapse: true // 是否是折叠状态
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
showCollapse () {
|
/* 切换折叠状态 */
|
||||||
|
switchCollapse () {
|
||||||
this.isCollapse = !this.isCollapse
|
this.isCollapse = !this.isCollapse
|
||||||
this.$emit('showCollapse', this.isCollapse, this.index)
|
this.$emit('switchCollapse', this.isCollapse, this.index)
|
||||||
},
|
},
|
||||||
cancelCollapse () {
|
/* 设为折叠状态 */
|
||||||
this.isCollapse = false
|
collapse () {
|
||||||
|
this.isCollapse = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
136
src/views/entityExplorer/entityList/detailOverview/App.vue
Normal file
136
src/views/entityExplorer/entityList/detailOverview/App.vue
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
<template>
|
||||||
|
<div class="overview-item">
|
||||||
|
<div class="overview__title">{{$t('overall.basicInfo')}}</div>
|
||||||
|
<div class="overview__content">
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label row__label--width130">APP ID</div>
|
||||||
|
<div class="row__content">XXX</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label row__label--width130">{{$t('entities.category')}}</div>
|
||||||
|
<div class="row__content">XXX</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label row__label--width130">{{$t('entities.subcategory')}}</div>
|
||||||
|
<div class="row__content">XXX</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label row__label--width130">{{$t('entities.riskLevel')}}</div>
|
||||||
|
<div class="row__content">XXX</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview-item">
|
||||||
|
<div class="overview__title">{{$t('overall.traffic')}}</div>
|
||||||
|
<div class="overview__content">
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
|
||||||
|
<div class="row__content">XXX</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label row__label--width130">{{$t('overall.mean')}}</div>
|
||||||
|
<div class="row__content">XXX</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
|
||||||
|
<div class="row__contents">
|
||||||
|
<div class="row__content">XXX</div>
|
||||||
|
<div class="row__content">XXX</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview-item">
|
||||||
|
<div class="overview__title">{{$t('overall.relationship')}}</div>
|
||||||
|
<div class="overview__content">
|
||||||
|
<div class="overview__tags">
|
||||||
|
<div class="overview__tag">
|
||||||
|
<span class="tag__value">5</span>
|
||||||
|
<span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="overview__tag">
|
||||||
|
<span class="tag__value">8</span>
|
||||||
|
<span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview-item">
|
||||||
|
<div class="overview__title">{{$t('overall.alert')}}</div>
|
||||||
|
<div class="overview__content">
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label">{{$t('entities.recentAlert')}}</div>
|
||||||
|
<div class="row__content">30</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row overview__row--small-font">
|
||||||
|
<div class="row__label row__label--width160">2011-11-15 12:23:34</div>
|
||||||
|
<div class="row__content row__content--width200">
|
||||||
|
<div class="alert-level-tag alert-level-tag--high">High</div>
|
||||||
|
<div>High RTT Times</div>
|
||||||
|
</div>
|
||||||
|
<div class="row__desc">中位数超出阈值</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row overview__row--small-font">
|
||||||
|
<div class="row__label row__label--width160">2011-11-15 12:23:34</div>
|
||||||
|
<div class="row__content row__content--width200">
|
||||||
|
<div class="alert-level-tag alert-level-tag--middle">Middle</div>
|
||||||
|
<div>High RTT Times</div>
|
||||||
|
</div>
|
||||||
|
<div class="row__desc">中位数超出阈值</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row overview__row--small-font">
|
||||||
|
<div class="row__label row__label--width160">2011-11-15 12:23:34</div>
|
||||||
|
<div class="row__content row__content--width200">
|
||||||
|
<div class="alert-level-tag alert-level-tag--low">Low</div>
|
||||||
|
<div>High RTT Times</div>
|
||||||
|
</div>
|
||||||
|
<div class="row__desc">中位数超出阈值</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row overview__row--small-font">
|
||||||
|
<div class="show-more">{{$t('overall.showMore')}}>></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview-item">
|
||||||
|
<div class="overview__title">{{$t('entities.securityEvents')}}</div>
|
||||||
|
<div class="overview__content">
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label">{{$t('entities.recentSecurity')}}</div>
|
||||||
|
<div class="row__content">20</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row overview__row--small-font">
|
||||||
|
<div class="row__label row__label--width160">2011-11-15 12:23:34</div>
|
||||||
|
<div class="row__content row__content--width200">
|
||||||
|
<div class="alert-level-tag alert-level-tag--high">High</div>
|
||||||
|
<div>High RTT Times</div>
|
||||||
|
</div>
|
||||||
|
<div class="row__desc">中位数超出阈值</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row overview__row--small-font">
|
||||||
|
<div class="row__label row__label--width160">2011-11-15 12:23:34</div>
|
||||||
|
<div class="row__content row__content--width200">
|
||||||
|
<div class="alert-level-tag alert-level-tag--middle">Middle</div>
|
||||||
|
<div>High RTT Times</div>
|
||||||
|
</div>
|
||||||
|
<div class="row__desc">中位数超出阈值</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row overview__row--small-font">
|
||||||
|
<div class="row__label row__label--width160">2011-11-15 12:23:34</div>
|
||||||
|
<div class="row__content row__content--width200">
|
||||||
|
<div class="alert-level-tag alert-level-tag--low">Low</div>
|
||||||
|
<div>High RTT Times</div>
|
||||||
|
</div>
|
||||||
|
<div class="row__desc">中位数超出阈值</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row overview__row--small-font">
|
||||||
|
<div class="show-more">{{$t('overall.showMore')}}>></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'App'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div class="entity-detail-overview">
|
||||||
|
<template v-if="entity.entityType === 'ip'">
|
||||||
|
<ip-overview></ip-overview>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="entity.entityType === 'domain'">
|
||||||
|
<domain-overview></domain-overview>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="entity.entityType === 'app'">
|
||||||
|
<app-overview></app-overview>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import App from './App'
|
||||||
|
import Domain from './Domain'
|
||||||
|
import Ip from './Ip'
|
||||||
|
export default {
|
||||||
|
/* 详情概览 */
|
||||||
|
name: 'DetailOverview',
|
||||||
|
props: {
|
||||||
|
entity: Object
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'domain-overview': Domain,
|
||||||
|
'app-overview': App,
|
||||||
|
'ip-overview': Ip
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<div class="overview-item">
|
||||||
|
<div class="overview__title"></div>
|
||||||
|
<div class="overview__content">
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label"></div>
|
||||||
|
<div class="row__content"></div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label"></div>
|
||||||
|
<div class="row__content"></div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label"></div>
|
||||||
|
<div class="row__content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Domain'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
25
src/views/entityExplorer/entityList/detailOverview/Ip.vue
Normal file
25
src/views/entityExplorer/entityList/detailOverview/Ip.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<div class="overview-item">
|
||||||
|
<div class="overview__title"></div>
|
||||||
|
<div class="overview__content">
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label"></div>
|
||||||
|
<div class="row__content"></div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label"></div>
|
||||||
|
<div class="row__content"></div>
|
||||||
|
</div>
|
||||||
|
<div class="overview__row">
|
||||||
|
<div class="row__label"></div>
|
||||||
|
<div class="row__content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Ip'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user