fix: 还原实体界面修改

This commit is contained in:
刘洪洪
2024-11-28 17:14:49 +08:00
parent d039a08773
commit b1612f2b40
2 changed files with 204 additions and 68 deletions

View File

@@ -7,7 +7,6 @@ import axios from 'axios'
import { sortByOrderNum } from '@/permission'
import { storageKey } from '@/utils/constants'
const apiVersion = BASE_CONFIG.apiVersion
const apiVersion2 = BASE_CONFIG.apiVersion2
export const api = {
// 系统相关
@@ -355,32 +354,24 @@ export const api = {
ipTrafficMap: apiVersion + '/entity/explorer/detail/traffic/map/ip', // ip流量地图
appTrafficMap: apiVersion + '/entity/explorer/detail/traffic/map/app', // app流量地图
summaryCount: apiVersion + '/entity/explorer/query/summaryCount', // 实体基数统计
aggCountry: apiVersion2 + '/entity/explorer/top/aggCountry', // 国家实体基数统计
aggIPAsn: apiVersion2 + '/entity/explorer/top/agg-ip-asn', // ASN实体基数统计
aggCity: apiVersion2 + '/entity/explorer/top/aggCity', // 城市实体基数统计
aggIPIsp: apiVersion2 + '/entity/explorer/top/agg-ip-isp', // ip-iap实体基数统计
aggPort: apiVersion2 + '/entity/explorer/top/aggPort', // 端口实体基数统计
aggDomain: apiVersion2 + '/entity/explorer/top/aggDomainCategory', // 域名类别实体基数统计
aggAppCategory: apiVersion2 + '/entity/explorer/top/aggAppCategory', // app类别实体基数统计
aggTag: apiVersion2 + '/entity/explorer/top/aggTag', // 标签实体基数统计
aggCountry: apiVersion + '/entity/explorer/top/aggCountry', // 国家实体基数统计
aggIPAsn: apiVersion + '/entity/explorer/top/agg-ip-asn', // ASN实体基数统计
aggCity: apiVersion + '/entity/explorer/top/aggCity', // 城市实体基数统计
aggIPIsp: apiVersion + '/entity/explorer/top/agg-ip-isp', // ip-iap实体基数统计
aggPort: apiVersion + '/entity/explorer/top/aggPort', // 端口实体基数统计
aggDomain: apiVersion + '/entity/explorer/top/aggDomainCategory', // 域名类别实体基数统计
aggAppCategory: apiVersion + '/entity/explorer/top/aggAppCategory', // app类别实体基数统计
aggTag: apiVersion + '/entity/explorer/top/aggTag', // 标签实体基数统计
domainSecurity: apiVersion + '/entity/explorer/detail/event/security/domain', // domain安全事件详情
ipSecurity: apiVersion + '/entity/explorer/detail/event/security/ip', // ip安全事件详情
appSecurity: apiVersion + '/entity/explorer/detail/event/security/app', // app安全事件详情
domainEventPerformance: apiVersion + '/entity/explorer/detail/event/performance/domain', // domain服务质量详情
ipEventPerformance: apiVersion + '/entity/explorer/detail/event/performance/ip', // ip服务质量详情
appEventPerformance: apiVersion + '/entity/explorer/detail/event/performance/app', // app服务质量详情
entityActive: apiVersion2 + '/entity/explorer/overview/active', // entity首页active数据概览
entityActive: apiVersion + '/entity/explorer/overview/active', // entity首页active数据概览
entityNew: apiVersion + '/entity/explorer/overview/new', // entity首页new数据概览
entityTotal: apiVersion2 + '/entity/explorer/overview/total', // entity首页total数据概览
subscriberRelatedApp: apiVersion + '/entity/explorer/detail/subscriber/relate/apps', // subscriber相关app
aggOperator: apiVersion2 + '/entity/explorer/top/aggOperator', // cell实体基数统计
aggSuperAdminArea: apiVersion2 + '/entity/explorer/top/aggSuperAdminArea', // 地区实体基数统计
aggTechnology: apiVersion2 + '/entity/explorer/top/aggTechnology', // 通信技术实体基数统计
cellBasicInfo: apiVersion2 + '/entity/detail/basic/cell', // cell实体响应
cellThroughput: apiVersion2 + '/entity/explorer/detail/traffic/throughput/cell', // cell实体流量信息
cellPerformance: apiVersion2 + '/entity/explorer/detail/traffic/performance/cell', // cell网络质量
activeSubscriberTrend: apiVersion2 + '/entity/detail/cell/activeSubscriberTrend', // cell中活跃的subscriber趋势统计
activeSubscriberInfo: apiVersion2 + '/entity/detail/cell/activeSubscriberInfo' // 活跃Subscriber地图列表
entityTotal: apiVersion + '/entity/explorer/overview/total', // entity首页total数据概览
subscriberRelatedApp: apiVersion + '/entity/explorer/detail/subscriber/relate/apps' // subscriber相关app
}
},
location: {

View File

@@ -73,12 +73,12 @@
</div>
<div class="explorer-foot" v-if="!showList">
<div v-for="item in homeEntityList" :key="item.name">
<div>
<el-divider direction="vertical"></el-divider>
<div class="entity-overview">
<div class="overview-left">
<span class="overview-left-loading">
<span class="overview-left-loading-span">{{ item.name }}</span>
<span class="overview-left-loading-span">APP</span>
</span>
</div>
<div class="overview-right">
@@ -86,8 +86,8 @@
<i class="cn-icon cn-icon-proportion entity-explorer-total__icon"></i>
<div class="right-label">{{ $t('network.total') }}</div>
<div class="right-label-loading">
<loading :loading="item.loadingTotal" size="small"></loading>
<div class="right-value">{{ numberWithCommas(item.total) }}</div>
<loading :loading="loadingApp" size="small"></loading>
<div class="right-value">{{ numberWithCommas(entityAppTotal) }}</div>
</div>
</div>
@@ -95,17 +95,107 @@
<i class="cn-icon cn-icon-active"></i>
<div class="right-label">{{ $t('entity.active') }}</div>
<div class="right-label-loading">
<loading :loading="item.loadingActive" size="small"></loading>
<loading :loading="loadingAppActive" size="small"></loading>
<div class="right-value-block">
<span class="margin-r-6">{{ numberWithCommas(item.active) }}</span>
<span class="margin-r-6">{{ numberWithCommas(entityAppActive) }}</span>
<span class="last-hour">{{ $t('entity.inLastHour') }}</span>
</div>
</div>
</div>
</div>
</div>
<el-divider direction="vertical"></el-divider>
<div class="entity-overview">
<div class="overview-left">
<span class="overview-left-loading">
<span class="overview-left-loading-span">{{$t('overall.domain')}}</span>
</span>
</div>
<div class="overview-right">
<div class="right-row margin-b-6">
<i class="cn-icon cn-icon-proportion entity-explorer-total__icon"></i>
<div class="right-label">{{ $t('network.total') }}</div>
<div class="right-label-loading">
<loading :loading="loadingDomain" size="small"></loading>
<div class="right-value">{{ numberWithCommas(entityDomainTotal) }}</div>
</div>
</div>
<div class="right-row">
<i class="cn-icon cn-icon-active"></i>
<div class="right-label">{{ $t('entity.active') }}</div>
<div class="right-label-loading">
<loading :loading="loadingDomainActive" size="small"></loading>
<div class="right-value-block">
<span class="margin-r-6">{{ numberWithCommas(entityDomainActive) }}</span>
<span class="last-hour">{{ $t('entity.inLastHour') }}</span>
</div>
</div>
</div>
</div>
</div>
<el-divider direction="vertical"></el-divider>
<div class="entity-overview">
<div class="overview-left">
<span class="overview-left-loading">
<span class="overview-left-loading-span">IP</span>
</span>
</div>
<div class="overview-right">
<div class="right-row margin-b-6">
<i class="cn-icon cn-icon-proportion entity-explorer-total__icon"></i>
<div class="right-label">{{ $t('network.total') }}</div>
<div class="right-label-loading">
<loading :loading="loadingIp" size="small"></loading>
<div class="right-value">{{ numberWithCommas(entityIpTotal) }}</div>
</div>
</div>
<div class="right-row">
<i class="cn-icon cn-icon-active"></i>
<div class="right-label">{{ $t('entity.active') }}</div>
<div class="right-label-loading">
<loading :loading="loadingIpActive" size="small"></loading>
<div class="right-value-block">
<span class="margin-r-6">{{ numberWithCommas(entityIpActive) }}</span>
<span class="last-hour">{{ $t('entity.inLastHour') }}</span>
</div>
</div>
</div>
</div>
</div>
<el-divider direction="vertical"></el-divider>
<div class="entity-overview">
<div class="overview-left">
<span class="overview-left-loading">
<span class="overview-left-loading-span">{{ $t('overall.subscriber') }}</span>
</span>
</div>
<div class="overview-right">
<div class="right-row margin-b-6">
<i class="cn-icon cn-icon-proportion entity-explorer-total__icon"></i>
<div class="right-label">{{ $t('network.total') }}</div>
<div class="right-label-loading">
<loading :loading="loadingIp" size="small"></loading>
<div class="right-value">{{ numberWithCommas(entitySubscriberTotal) }}</div>
</div>
</div>
<div class="right-row">
<i class="cn-icon cn-icon-active"></i>
<div class="right-label">{{ $t('entity.active') }}</div>
<div class="right-label-loading">
<loading :loading="loadingSubscriberActive" size="small"></loading>
<div class="right-value-block">
<span class="margin-r-6">{{ numberWithCommas(entitySubscriberActive) }}</span>
<span class="last-hour">{{ $t('entity.inLastHour') }}</span>
</div>
</div>
</div>
</div>
</div>
<el-divider direction="vertical"></el-divider>
</div>
<el-divider direction="vertical"></el-divider>
</div>
</div>
</template>
@@ -121,7 +211,11 @@ import { getNowDate, getNowTime, getSecond } from '@/utils/date-util'
import { ref } from 'vue'
import _ from 'lodash'
import Loading from '@/components/common/Loading'
import { overwriteUrl, urlParamsHandler, numberWithCommas } from '@/utils/tools'
import {
overwriteUrl,
urlParamsHandler,
numberWithCommas
} from '@/utils/tools'
import Parser from '@/components/advancedSearch/meta/parser'
import { handleErrorTip, invalidErrorTip } from '@/components/advancedSearch/meta/error'
import { columnList } from '@/utils/static-data'
@@ -142,6 +236,23 @@ export default {
return {
showList: false,
listMode: 'list', // entity列表的模式list|block
entityAppTotal: '-',
entityAppNew: '-',
entityAppActive: '-',
entityDomainTotal: '-',
entityDomainNew: '-',
entityDomainActive: '-',
entityIpTotal: '-',
entityIpNew: '-',
entityIpActive: '-',
entitySubscriberTotal: '-',
entitySubscriberNew: '-',
entitySubscriberActive: '-',
newFilterData: [
{
icon: 'cn-icon cn-icon-registration-country',
@@ -222,6 +333,17 @@ export default {
str: '',
metaList: [],
listLoading: false,
// 实体详情搜索页面 底部列表
loadingApp: false,
loadingDomain: false,
loadingIp: false,
loadingSubscriber: false,
// Active
loadingAppActive: false,
loadingDomainActive: false,
loadingIpActive: false,
loadingSubscriberActive: false,
initFlag: true, // 初始化标志避免初始化时pageSize和pageNo会调用搜索
timer: null, // 初始化标志的延时器,需要销毁
summaryCount: {
@@ -232,14 +354,7 @@ export default {
subscriberCount: 0
},
loadingCount: false, // 实体基数统计的loading
keywordList: [],
// 首页实体计数
homeEntityList: [
{ name: 'APP', total: '-', loadingTotal: false, active: '-', loadingActive: false },
{ name: this.$t('overall.domain'), total: '-', loadingTotal: false, active: '-', loadingActive: false },
{ name: 'IP', total: '-', loadingTotal: false, active: '-', loadingActive: false },
{ name: this.$t('overall.subscriber'), total: '-', loadingTotal: false, active: '-', loadingActive: false }
]
keywordList: []
}
},
methods: {
@@ -495,27 +610,22 @@ export default {
this.newFilterData[index].loading = true
if (req) {
req.then(response => {
if (response.status === 200 && response.data.data.data) {
if (response.data.data.data.length >= 5) {
if (response.status === 200 && response.data.data.list) {
if (response.data.data.list.length >= 5) {
this.newFilterData[index].showNum = 5
} else {
this.newFilterData[index].showNum = response.data.data.data.length
this.newFilterData[index].showNum = response.data.data.list.length
}
this.newFilterData[index].data = []
response.data.data.data.forEach(item => {
response.data.data.list.forEach(item => {
let obj = {
label: item.value,
topColumn: this.newFilterData[index].topColumn,
value: item.count,
value: item.uniqueEntities,
showNum: 5
}
for (const ite in item) {
if (ite !== 'count') {
obj.label = item[ite]
}
}
if (index === 0) {
obj.flag = item.label // 接口字段名称为'China'svg名称为'CN'通过countryNameIdMapping进行转换
obj.flag = item.value // 接口字段名称为'China'svg名称为'CN'通过countryNameIdMapping进行转换
}
if (index === 4) {
obj = {
@@ -523,7 +633,7 @@ export default {
topColumn1: this.newFilterData[index].topColumn1,
port: item.port,
l7Protocol: item.l7Protocol,
value: item.count,
value: item.uniqueEntities,
showNum: 5
}
}
@@ -595,46 +705,81 @@ export default {
this.loadingCount = false
})
},
getEntityIndexData () {
this.homeEntityList.forEach(item => {
item.loadingTotal = true
item.loadingActive = true
queryListTotal (params) {
const queryParams = {
...params,
startTime: getSecond(params.startTime),
endTime: getSecond(params.endTime)
}
axios.get(api.entityListTotal, { params: queryParams }).then(response => {
if (response.status === 200) {
this.pageObj.total = response.data.data.result
}
}).catch(e => {
this.$message.error(this.errorMsgHandler(e))
console.error(e)
})
},
handleQ (params) {
return Object.keys(params).map(param => {
return `${param}='${params[param]}'`
}).join(' AND ')
},
getEntityIndexData () {
// Total
this.loadingApp = true
this.loadingDomain = true
this.loadingIp = true
this.loadingSubscriber = true
// Active
this.loadingAppActive = true
this.loadingDomainActive = true
this.loadingIpActive = true
this.loadingSubscriberActive = true
axios.get(api.entity.entityList.entityTotal).then(response => {
if (response.status === 200) {
this.homeEntityList[0].total = response.data.data.appCount || '-'
this.homeEntityList[1].total = response.data.data.domainCount || '-'
this.homeEntityList[2].total = response.data.data.ipCount || '-'
this.homeEntityList[3].total = response.data.data.subscriberCount || '-'
this.homeEntityList[4].total = response.data.data.cellCount || '-'
this.entityDomainTotal = response.data.data.domainCount
this.entityIpTotal = response.data.data.ipCount
this.entityAppTotal = response.data.data.appCount
this.entitySubscriberTotal = response.data.data.subscriberCount
}
}).catch(e => {
this.$message.error(this.errorMsgHandler(e))
console.error(e)
}).finally(() => {
this.homeEntityList.forEach(item => {
item.loadingTotal = false
})
this.loadingDomain = false
this.loadingIp = false
this.loadingApp = false
this.loadingSubscriber = false
})
// Active
axios.get(api.entity.entityList.entityActive).then(response => {
if (response.status === 200) {
this.homeEntityList[0].active = response.data.data.appCount || '-'
this.homeEntityList[1].active = response.data.data.domainCount || '-'
this.homeEntityList[2].active = response.data.data.ipCount || '-'
this.homeEntityList[3].active = response.data.data.subscriberCount || '-'
this.homeEntityList[4].active = response.data.data.cellCount || '-'
this.entityDomainActive = response.data.data.domainCount
this.entityIpActive = response.data.data.ipCount
this.entityAppActive = response.data.data.appCount
this.entitySubscriberActive = response.data.data.subscriberCount
}
}).catch((e) => {
this.$message.error(this.errorMsgHandler(e))
console.error(e)
}).finally(() => {
this.homeEntityList.forEach(item => {
item.loadingActive = false
})
this.loadingDomainActive = false
this.loadingIpActive = false
this.loadingAppActive = false
this.loadingSubscriberActive = false
})
},
setListMode (mode) {
this.listMode = mode
const newParam = {
listMode: mode
}
this.reloadUrl(newParam)
},
/**
* 向地址栏添加/删除参数
*/