CN-251 Entity-explorer 左侧筛选TOP10弹框开发
This commit is contained in:
hyx
@@ -59,4 +59,67 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-pop-custom {
|
||||
padding: 0 10px 10px 10px;
|
||||
border: 1px solid #EBEEF5;
|
||||
position: absolute;
|
||||
top: 210px;
|
||||
left: 580px;
|
||||
width: 420px;
|
||||
height:370px;
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
z-index: 999999;
|
||||
box-shadow: 0 0 10px #CCC;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-button--mini{
|
||||
padding: 5px 7px;
|
||||
}
|
||||
.pop-title{
|
||||
margin-left: 10px;
|
||||
margin-top:17px;
|
||||
font-family: Roboto-Black;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
span {
|
||||
padding-left: 6px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.filter-top-box {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
.filter-top-body{
|
||||
height: 305px;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter-top-type {
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
.top-table-percent{
|
||||
display:grid;
|
||||
grid-template-columns: 50% auto;
|
||||
grid-template-rows: 100%;
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0px;
|
||||
.top-table-progress{
|
||||
align-content: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
145
src/components/entities/EntityTop.vue
Normal file
145
src/components/entities/EntityTop.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template >
|
||||
<div class="entity-pop-custom" v-ele-click-outside="esc" v-bind:style="entityTopStyle">
|
||||
<div class="pop-title" >
|
||||
<div>
|
||||
<i :class="item.icon"></i>
|
||||
<span>{{item.label}}</span>
|
||||
</div>
|
||||
<button @click="esc" class="el-dialog__headerbtn" type="button"><i class="el-dialog__close el-icon el-icon-close"></i></button>
|
||||
</div>
|
||||
<div class="filter-top-box" >
|
||||
<div class="filter-top-body">
|
||||
<div class="filter-top-type">{{item.value}}{{$t('overall.operator')}}{{item.label}}</div>
|
||||
<el-table :data="entityTopTenData" style="width: 100%"
|
||||
:header-cell-style="tableHeaderCellStyle"
|
||||
:header-row-style="tableHeaderRowStyle"
|
||||
:row-style="rowStyle"
|
||||
class="customer-no-border-table"
|
||||
:cell-style="{'text-align':'left','padding': '1px 0','border':'0px'}">
|
||||
<el-table-column label="Top10" type="index" :index="indexMethod" width="81"/>
|
||||
<el-table-column prop="name" :label="$t('overall.country')" width="100" />
|
||||
<el-table-column prop="value" :label="$t('overall.number')" width="79" />
|
||||
<el-table-column prop="rate" :label="$t('overall.percent')" >
|
||||
<template #default="scope">
|
||||
<div class="top-table-percent">
|
||||
<div >{{ scope.row.percent }}%</div>
|
||||
<div class="top-table-progress"><el-progress :percentage="scope.row.percent" :show-text="false" color="#23BF9A" ></el-progress></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
entityTopStyle: {
|
||||
// top:'300px',
|
||||
left: '580px'
|
||||
},
|
||||
custom: [],
|
||||
item: {},
|
||||
entityTopTenData: [
|
||||
{
|
||||
name: '中国',
|
||||
value: '376',
|
||||
percent: 20
|
||||
},
|
||||
{
|
||||
name: '美国',
|
||||
value: '298',
|
||||
percent: 18
|
||||
},
|
||||
{
|
||||
name: '英国',
|
||||
value: '268',
|
||||
percent: 16
|
||||
}, {
|
||||
name: '意大利',
|
||||
value: '230',
|
||||
percent: 15
|
||||
},
|
||||
{
|
||||
name: '泰国',
|
||||
value: '210',
|
||||
percent: 13
|
||||
},
|
||||
{
|
||||
name: '越南',
|
||||
value: '190',
|
||||
percent: 10
|
||||
}, {
|
||||
name: '马尔代夫',
|
||||
value: '172',
|
||||
percent: 9
|
||||
}, {
|
||||
name: '马来西亚',
|
||||
value: '156',
|
||||
percent: 6
|
||||
},
|
||||
{
|
||||
name: '新加坡',
|
||||
value: '140',
|
||||
percent: 5
|
||||
},
|
||||
{
|
||||
name: '缅甸',
|
||||
value: '120',
|
||||
percent: 4
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
methods: {
|
||||
// 悬浮点击空白隐藏
|
||||
esc () {
|
||||
this.$emit('close')
|
||||
},
|
||||
initEntityTop (leftVal, itemVal, data) {
|
||||
// this.entityTopStyle.top = topVal+'px'
|
||||
this.entityTopStyle.left = leftVal + 'px'
|
||||
this.item = itemVal
|
||||
if (data.length > 0) {
|
||||
this.entityTopTenData = data
|
||||
}
|
||||
},
|
||||
indexMethod (index) {
|
||||
return index + 1
|
||||
},
|
||||
tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
|
||||
if (rowIndex === 0) {
|
||||
return 'padding-bottom:5px;padding-top:14px;'
|
||||
}
|
||||
},
|
||||
tableHeaderRowStyle ({ row, rowIndex }) {
|
||||
if (rowIndex === 0) {
|
||||
return 'color: #333333;font-weight: 500;font-size: 14px;'
|
||||
}
|
||||
},
|
||||
rowStyle ({ row, rowIndex }) {
|
||||
return 'height:21px;font-size: 14px;color: #666666;font-weight: 400;'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.entity-pop-custom .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -26,7 +26,8 @@ export const api = {
|
||||
entityFilter: '/interface/entity/filter',
|
||||
ipThroughput: '/interface/entity/ip/detail/throughput',
|
||||
domainThroughput: '/interface/entity/domain/detail/throughput',
|
||||
appThroughput: '/interface/entity/app/detail/throughput'
|
||||
appThroughput: '/interface/entity/app/detail/throughput',
|
||||
filterTop: '/interface/entity/filter/top'
|
||||
}
|
||||
|
||||
/* panel */
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
>
|
||||
<div class="filter__header">{{filter.title}}</div>
|
||||
<div class="filter__body">
|
||||
<div class="filter__row" v-for="(item, i) in filter.data" :key="i">
|
||||
<div class="filter__row" v-for="(item, i) in filter.data" :key="i" @click="showTopDailog(i,item,filter.type)" :ref="`entityTopTen`+i">
|
||||
<div class="row__label">
|
||||
<i :class="item.icon"></i>
|
||||
<span>{{item.label}}</span>
|
||||
@@ -17,14 +17,79 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 自定义table列 -->
|
||||
<transition name="el-zoom-in-top">
|
||||
<entity-top
|
||||
v-show="showTopTen"
|
||||
ref="entityTopTenPop"
|
||||
@close="showTopTen = false"
|
||||
></entity-top>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EntityTop from '@/components/entities/EntityTop'
|
||||
import { get } from '@/utils/http'
|
||||
import { api } from '@/utils/api'
|
||||
|
||||
export default {
|
||||
name: 'EntityFilter',
|
||||
components: {
|
||||
EntityTop
|
||||
},
|
||||
props: {
|
||||
filterData: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
topList: 'list',
|
||||
topData: [],
|
||||
showTopTen: false, // 自定义列弹框是否显示
|
||||
entityTopTenData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTopDailog (i, item, type) {
|
||||
const width = this.$refs['entityTopTen' + i].offsetWidth
|
||||
const offsetLeft = this.$refs['entityTopTen' + i].offsetLeft
|
||||
const leftVal = offsetLeft + width
|
||||
|
||||
get(api.filterTop, { entityType: type, column: item.column, top: 10 }).then(response => {
|
||||
if (response.code === 200) {
|
||||
const rlt = response.data.result
|
||||
|
||||
let sum = 0
|
||||
rlt.forEach(item => {
|
||||
sum = sum + item.value
|
||||
})
|
||||
|
||||
let curSumPercent = 0
|
||||
rlt.forEach((item, i) => {
|
||||
const per = Number(item.value * 100 / sum).toFixed(0)
|
||||
if ((i + 1) === rlt.length) {
|
||||
item.percent = 100 - curSumPercent
|
||||
} else {
|
||||
item.percent = per
|
||||
curSumPercent = Number(curSumPercent) + Number(per)
|
||||
}
|
||||
})
|
||||
this.$refs.entityTopTenPop.initEntityTop(leftVal, item, rlt)
|
||||
} else {
|
||||
this.$refs.entityTopTenPop.initEntityTop(leftVal, item, [])
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$refs.entityTopTenPop.initEntityTop(leftVal, item, [])
|
||||
}).finally(() => {
|
||||
this.showTopTen = true
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user