CN-240 feat: 实体列表下拉详情（部分）
This commit is contained in:
chenjinsong
@@ -16,3 +16,4 @@
|
||||
@import './views/entityExplorer/entityList/entityList';
|
||||
@import './views/entityExplorer/entityList/card';
|
||||
@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 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 0;
|
||||
margin-bottom: 1px;
|
||||
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'">
|
||||
<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
|
||||
v-for="(data, index) in listData"
|
||||
:entity="data"
|
||||
:key="index"
|
||||
:ref="`entityRow${index}`"
|
||||
:index="index"
|
||||
@showCollapse="showCollapse"
|
||||
@switchCollapse="switchCollapse"
|
||||
></entity-row>
|
||||
</div>
|
||||
</template>
|
||||
@@ -73,7 +73,7 @@ export default {
|
||||
showDetail: false,
|
||||
typeName: '',
|
||||
entityList: [],
|
||||
isCollapse: false,
|
||||
isCollapse: true,
|
||||
collapseIndex: 0
|
||||
}
|
||||
},
|
||||
@@ -103,13 +103,13 @@ export default {
|
||||
entityDetail (params) {
|
||||
this.$emit('showDetail', { ...params, icon: this.iconClass })
|
||||
},
|
||||
showCollapse (isCollapse, index) {
|
||||
switchCollapse (isCollapse, index) {
|
||||
this.isCollapse = isCollapse
|
||||
this.collapseIndex = index
|
||||
},
|
||||
cancelCollapse () {
|
||||
this.isCollapse = false
|
||||
this.$refs[`entityRow${this.collapseIndex}`].cancelCollapse()
|
||||
collapse () {
|
||||
this.isCollapse = true
|
||||
this.$refs[`entityRow${this.collapseIndex}`].collapse()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<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">
|
||||
<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 class="cn-entity__case">
|
||||
<div class="cn-entity__icon"><i :class="iconClass"></i></div>
|
||||
@@ -84,35 +84,48 @@
|
||||
<span>{{entityData.securityCount || '-'}}</span>
|
||||
</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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import entityListMixin from './entityListMixin'
|
||||
import DetailOverview from '@/views/entityExplorer/entityList/detailOverview/DetailOverview'
|
||||
export default {
|
||||
name: 'Row',
|
||||
props: {
|
||||
index: Number
|
||||
},
|
||||
components: {
|
||||
DetailOverview
|
||||
},
|
||||
mixins: [entityListMixin],
|
||||
data () {
|
||||
return {
|
||||
isCollapse: false
|
||||
isCollapse: true // 是否是折叠状态
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showCollapse () {
|
||||
/* 切换折叠状态 */
|
||||
switchCollapse () {
|
||||
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