gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-893 单测用例--下钻table

Browse Source
This commit is contained in:
hyx
2023-02-28 11:49:13 +08:00
parent a55ab9fb15
commit 9fddf7914d
3 changed files with 576 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/utils/tools.js
View File

@@ -878,9 +878,9 @@ export async function getDnsMapData (type) {
} }
export function handleSpecialValue (value) { export function handleSpecialValue (value) {
if (value) { if (value) {
value = value.replaceAll("'", "\\\\'") value.replace(/\'/g, "\\\\'")
.replaceAll('"', '\\"') .replace(/\"/g, '\\"')
.replaceAll('&', '%26') .replace(/\&/g, '%26')
} }
return value return value
} }

36
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
View File

@@ -24,6 +24,7 @@
border border
:cell-style="tableCellStyle" :cell-style="tableCellStyle"
:header-cell-style="tableHeaderCellStyle" :header-cell-style="tableHeaderCellStyle"
:row-class-name="rowClassName"
:class="tableClass" :class="tableClass"
height="100%" height="100%"
empty-text=" " empty-text=" "
@@ -47,7 +48,7 @@
<template #default="scope" :column="item"> <template #default="scope" :column="item">
<template v-if="item.columnType === tableColumnType.chainRatio" > <template v-if="item.columnType === tableColumnType.chainRatio" >
<div class="data-total" > <div class="data-total" >
<div class="data-value"> <div class="data-value" :test-id="`data-value-${item.prop}${scope.row.index}`">
<template v-if="showUnit && item.unit"> <template v-if="showUnit && item.unit">
{{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], item.unit).join(' ') : '-'):'' }} {{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], item.unit).join(' ') : '-'):'' }}
</template> </template>
@@ -55,16 +56,16 @@
{{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }} {{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }}
</template> </template>
</div> </div>
<div class="data-trend"> <div class="data-trend" :test-id="`data-trend-all-${item.prop}${scope.row.index}`">
<template v-if="scope.row[item.prop]"> <template v-if="scope.row[item.prop]">
<div v-if="scope.row[item.prop][1] === 'up'" class="data-total-trend data-total-trend-red"> <div v-if="scope.row[item.prop][1] === 'up'" class="data-total-trend data-total-trend-red" :test-id="`data-trend-${item.prop}${scope.row.index}`">
<i class="cn-icon-rise1 cn-icon"></i><span>{{scope.row[item.prop][2]}}</span> <i class="cn-icon-rise1 cn-icon" :test-id="`data-trend-icon-${item.prop}${scope.row.index}`"></i><span :test-id="`data-trend-value-${item.prop}${scope.row.index}`">{{scope.row[item.prop][2]}}</span>
</div> </div>
<div v-else-if="scope.row[item.prop][1] === 'down'" class="data-total-trend data-total-trend-green"> <div v-else-if="scope.row[item.prop][1] === 'down'" class="data-total-trend data-total-trend-green" :test-id="`data-trend-${item.prop}${scope.row.index}`">
<i class="cn-icon-decline cn-icon"></i><span>{{scope.row[item.prop][2]}}</span> <i class="cn-icon-decline cn-icon" :test-id="`data-trend-icon-${item.prop}${scope.row.index}`"></i><span :test-id="`data-trend-value-${item.prop}${scope.row.index}`">{{scope.row[item.prop][2]}}</span>
</div> </div>
<div v-else-if="scope.row[item.prop][1] === 'noChange'" class="data-total-trend data-total-trend-black"> <div v-else-if="scope.row[item.prop][1] === 'noChange'" class="data-total-trend data-total-trend-black" :test-id="`data-trend-${item.prop}${scope.row.index}`">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon" :test-id="`data-trend-icon-${item.prop}${scope.row.index}`"></i>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@@ -74,7 +75,7 @@
</div> </div>
</template> </template>
<template v-else-if="item.columnType === tableColumnType.dillDown" > <template v-else-if="item.columnType === tableColumnType.dillDown" >
<div v-if="isOnlyRead" > <div v-if="isOnlyRead" :test-id="`dnsMapType-${scope.row.index}`">
<template v-if="tableType === fromRoute.dnsServiceInsights && isDnsMapType"> <template v-if="tableType === fromRoute.dnsServiceInsights && isDnsMapType">
{{dnsMapData.get(scope.row['tab'])}} {{dnsMapData.get(scope.row['tab'])}}
</template> </template>
@@ -82,7 +83,7 @@
{{scope.row['tab']}} {{scope.row['tab']}}
</template> </template>
</div> </div>
<div v-else class="data-click" @click="handleTabValue(item.name,scope.row['tab'])"> <div v-else class="data-click" :test-id="`dnsMapType-${scope.row.index}`" @click="handleTabValue(item.name,scope.row['tab'])">
<template v-if="tableType === fromRoute.dnsServiceInsights && isDnsMapType"> <template v-if="tableType === fromRoute.dnsServiceInsights && isDnsMapType">
{{dnsMapData.get(scope.row['tab'])}} {{dnsMapData.get(scope.row['tab'])}}
</template> </template>
@@ -94,10 +95,10 @@
<template v-else-if="item.columnType === tableColumnType.percent" > <template v-else-if="item.columnType === tableColumnType.percent" >
<div class="dns-in-ex"> <div class="dns-in-ex">
<div class="dns-percent-pic"> <div class="dns-percent-pic">
<div v-if="scope.row[item.prop][0] !== false" class="div-green" id="green" :style="`width:${scope.row[item.prop][0]}`"></div> <div v-if="scope.row[item.prop][0] !== false" class="div-green" id="green" :test-id="`percent-green-${scope.row.index}`" :style="`width:${scope.row[item.prop][0]}`"></div>
<div v-if="scope.row[item.prop][0] !== false" class="div-yellow" id="yellow" :style="`width:${scope.row[item.prop][1]}`"></div> <div v-if="scope.row[item.prop][0] !== false" class="div-yellow" id="yellow" :test-id="`percent-yellow-${scope.row.index}`" :style="`width:${scope.row[item.prop][1]}`"></div>
</div> </div>
<div class="dns-percent">{{scope.row[item.prop][2]}}</div> <div class="dns-percent" :test-id="`percent-value-${scope.row.index}`">{{scope.row[item.prop][2]}}</div>
</div> </div>
</template> </template>
<template v-else-if="item.prop === 'score'" > <template v-else-if="item.prop === 'score'" >
@@ -105,10 +106,10 @@
<div v-if="scope.row.score <= 2" class="data-score data-score-red" > <div v-if="scope.row.score <= 2" class="data-score data-score-red" >
{{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '0'}} {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '0'}}
</div> </div>
<div v-else-if="scope.row.score <= 4" class="data-score data-score-yellow" > <div v-else-if="scope.row.score <= 4" class="data-score data-score-yellow" :test-id="`score-${scope.row.index}`">
{{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '0'}} {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '0'}}
</div> </div>
<div v-else-if="scope.row.score <= 6" class="data-score data-score-green" > <div v-else-if="scope.row.score <= 6" class="data-score data-score-green" :test-id="`score-${scope.row.index}`">
{{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '0'}} {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '0'}}
</div> </div>
</div> </div>
@@ -326,6 +327,10 @@ export default {
}, },
mixins: [chartMixin], mixins: [chartMixin],
methods: { methods: {
rowClassName ({ row, rowIndex }) {
// 把每一行的索引放进row
row.index = rowIndex
},
/* 参数 extraParams 额外请求参数 */ /* 参数 extraParams 额外请求参数 */
getChartData (extraParams = {}) { getChartData (extraParams = {}) {
this.initState() this.initState()
@@ -1053,7 +1058,6 @@ export default {
type: tabList[0].prop type: tabList[0].prop
} }
this.changeUrlTabState() this.changeUrlTabState()
// const condition = this.$store.getters.getQueryCondition
const condition = this.getQueryCondition() const condition = this.getQueryCondition()
if (condition) { if (condition) {
queryParams = { queryParams = {

553
test/views/charts2/charts/networkOverview/NetworkOverviewTabs.test.js Normal file
View File

File diff suppressed because one or more lines are too long