CN-240 feat: 实体列表下拉详情（部分）
This commit is contained in:
chenjinsong
@@ -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