fix: 实体列表左侧筛选条件调整
This commit is contained in:
@changcode
@@ -3,6 +3,8 @@
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
margin-right: 10px;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
|
||||
.filter-case__header {
|
||||
background-color: #E1E6ED;
|
||||
@@ -31,19 +33,22 @@
|
||||
.filter__body {
|
||||
padding: 11px 0 21px 0;
|
||||
.filter__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
height: 26px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all linear .2s;
|
||||
.filter__row-popover {
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&:hover, &.filter__row--active {
|
||||
background-color: #F3F7FA;
|
||||
}
|
||||
.row__label {
|
||||
font-size: 14px;
|
||||
flex: 8;
|
||||
i {
|
||||
color: #8FA1BE;
|
||||
}
|
||||
@@ -56,6 +61,8 @@
|
||||
color: #666;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
.chart__loading i.el-icon-loading {
|
||||
font-size: 18px;
|
||||
top: calc(50% - 10px);
|
||||
@@ -65,53 +72,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-pop-custom {
|
||||
padding: 0 10px 10px 10px;
|
||||
border: 1px solid #EBEEF5;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
.filter__row-popover {
|
||||
.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;
|
||||
i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.entity-pop-custom {
|
||||
.filter-top-box {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
.filter-top-body{
|
||||
height: fit-content;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.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;
|
||||
@@ -126,4 +96,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template >
|
||||
<div class="entity-pop-custom" style="width: 440px" v-ele-click-outside="esc">
|
||||
<div class="entity-pop-custom" v-ele-click-outside="esc">
|
||||
<div class="pop-title">
|
||||
<div>
|
||||
<i :class="item.icon"></i>
|
||||
<span>{{item.label}}</span>
|
||||
<i :class="itemData.icon"></i>
|
||||
<span>{{itemData.label}}</span>
|
||||
</div>
|
||||
</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">
|
||||
<loading :loading="loading"></loading>
|
||||
<div class="filter-top-type">{{item.value}}{{$t('overall.operator')}}{{item.label}}</div>
|
||||
<div class="filter-top-type">{{itemData.value}}{{$t('overall.operator')}}{{itemData.label}}</div>
|
||||
<el-table
|
||||
:data="entityTopTenData"
|
||||
:data="popoverData"
|
||||
:header-cell-style="tableHeaderCellStyle"
|
||||
:header-row-style="tableHeaderRowStyle"
|
||||
:row-style="rowStyle"
|
||||
@@ -22,17 +22,19 @@
|
||||
@row-click="filter"
|
||||
>
|
||||
<el-table-column label="Top10" type="index" :index="indexMethod" width="81"/>
|
||||
<el-table-column prop="name" :label="item.label" width="120">
|
||||
<el-table-column prop="name" :label="itemData.label" width="120">
|
||||
<template #default="scope">
|
||||
<div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" :title="scope.row.name">{{scope.row.name}}</div>
|
||||
<div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" :title="scope.row.name">
|
||||
{{valueHandle(scope.row.name, topColumn) || 'unknown'}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="count" :label="$t('overall.number')" width="79" />
|
||||
<el-table-column prop="percent" :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>
|
||||
{{(totalCount === 0 ? 0 : parseFloat(scope.row.count / totalCount) * 100).toFixed(2)}}%
|
||||
<div class="top-table-progress"><el-progress :percentage="(totalCount === 0 ? 0 : parseFloat(scope.row.count / totalCount) * 100).toFixed(2)" :show-text="false" color="#23BF9A"></el-progress></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -49,46 +51,26 @@ import Loading from '@/components/common/Loading'
|
||||
export default {
|
||||
components: { Loading },
|
||||
props: {
|
||||
loading: Boolean
|
||||
loading: Boolean,
|
||||
popoverData: Array,
|
||||
itemData: Object,
|
||||
totalCount: Number
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
entityTopStyle: {
|
||||
top: 0,
|
||||
left: 0
|
||||
},
|
||||
custom: [],
|
||||
item: {},
|
||||
entityTopTenData: []
|
||||
custom: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 悬浮点击空白隐藏
|
||||
esc () {
|
||||
this.$emit('close')
|
||||
this.item = {}
|
||||
this.entityTopTenData = []
|
||||
},
|
||||
filter (row) {
|
||||
this.$emit('filter', row.name, this.item)
|
||||
},
|
||||
initEntityTop (itemVal, data, totalCount) {
|
||||
this.item = itemVal
|
||||
if (data.length > 0) {
|
||||
this.entityTopTenData = data.map(d => {
|
||||
return {
|
||||
...d,
|
||||
name: this.valueHandle(d.name, this.item.topColumn) || 'unknown',
|
||||
percent: (parseFloat(d.count / totalCount) * 100).toFixed(2)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.entityTopTenData = []
|
||||
}
|
||||
},
|
||||
indexMethod (index) {
|
||||
return index + 1
|
||||
},
|
||||
esc () {
|
||||
this.$emit('close')
|
||||
},
|
||||
filter (row) {
|
||||
this.$emit('filter', row.name, this.itemData)
|
||||
},
|
||||
valueHandle (value, columnName) {
|
||||
if (columnName === 'app_risk') {
|
||||
const m = riskLevelMapping.find(mapping => {
|
||||
@@ -111,9 +93,6 @@ export default {
|
||||
rowStyle ({ row, rowIndex }) {
|
||||
return 'height:21px;font-size: 14px;color: #666666;font-weight: 400;'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -3,12 +3,16 @@
|
||||
<div class="filter-case__header">{{$t('entities.filter')}}</div>
|
||||
<div
|
||||
class="entity-filter"
|
||||
v-for="(filter, index) in filterData"
|
||||
v-for="(filters, index) in filterData"
|
||||
:key="index"
|
||||
>
|
||||
<div class="filter__header">{{filter.title}}</div>
|
||||
<div class="filter__header">{{filters.title}}</div>
|
||||
<div class="filter__body">
|
||||
<div class="filter__row" v-for="(item, i) in filter.data" :key="i" @click="showTopDialog(i, item, filter)" :ref="'entityTopTen' + i + filter.type">
|
||||
|
||||
<div class="filter__row" v-for="(item, i) in filters.data" :key="i">
|
||||
<el-popover popper-class="filter__row-popover" placement="right" :width="440" trigger="click">
|
||||
<template #reference>
|
||||
<div class="filter__row-popover" @click="showTopDialog(i, item, filters)">
|
||||
<div class="row__label">
|
||||
<i :class="item.icon"></i>
|
||||
<span>{{item.label}}</span>
|
||||
@@ -18,22 +22,22 @@
|
||||
<span>{{item.value}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 自定义table列 -->
|
||||
<transition name="el-zoom-in-top">
|
||||
</template>
|
||||
<entity-top
|
||||
:style="location"
|
||||
v-show="showTopTen"
|
||||
ref="entityTopTenPop"
|
||||
:loading="loading"
|
||||
:popover-data="popoverData"
|
||||
:item-data="itemData"
|
||||
:total-count="totalCount"
|
||||
@filter="filter"
|
||||
v-show="showTopTen"
|
||||
@close="showTopTen = false"
|
||||
></entity-top>
|
||||
</transition>
|
||||
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -56,23 +60,19 @@ export default {
|
||||
return {
|
||||
topList: 'list',
|
||||
topData: [],
|
||||
showTopTen: false, // 自定义列弹框是否显示
|
||||
entityTopTenData: [],
|
||||
location: {
|
||||
top: 0,
|
||||
left: 0
|
||||
},
|
||||
showTopTen: false, // 自定义列弹框是否显示
|
||||
currentColumn: '',
|
||||
loading: false
|
||||
loading: false,
|
||||
popoverData: [],
|
||||
itemData: {},
|
||||
totalCount: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTopDialog (i, item, filter) {
|
||||
this.currentColumn = item.column
|
||||
const type = filter.type
|
||||
this.location.left = '17.5rem'
|
||||
const offsetTop = this.$refs['entityTopTen' + i + filter.type].offsetTop
|
||||
this.location.top = offsetTop + 'px'
|
||||
this.showTopTen = true
|
||||
const queryParams = {
|
||||
q: this.q,
|
||||
@@ -83,16 +83,21 @@ export default {
|
||||
this.loading = true
|
||||
get(api.filterTop, queryParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
console.info(this.currentColumn, item.column)
|
||||
if (this.currentColumn === item.column) {
|
||||
this.$refs.entityTopTenPop.initEntityTop(item, response.data.result, filter.totalCount)
|
||||
this.popoverData = response.data.result
|
||||
this.itemData = item
|
||||
this.totalCount = filter.totalCount
|
||||
}
|
||||
} else {
|
||||
this.$refs.entityTopTenPop.initEntityTop(item, [], filter.totalCount)
|
||||
this.popoverData = []
|
||||
this.itemData = item
|
||||
this.totalCount = filter.totalCount
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(e => {
|
||||
this.$refs.entityTopTenPop.initEntityTop(item, [], filter.totalCount)
|
||||
this.popoverData = []
|
||||
this.itemData = item
|
||||
this.totalCount = filter.totalCount
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user