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

fix: 修复 npm 下钻路由参数获取及table 列表样式调整

Browse Source
This commit is contained in:
@changcode
2022-09-21 10:35:47 +08:00
parent f1de238177
commit 7e431358d4
4 changed files with 205 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/components/components/layout/layout.scss
View File

@@ -109,6 +109,9 @@
border:1px solid #C5C5C5 !important; border:1px solid #C5C5C5 !important;
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important; box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
border-radius: 2px !important; border-radius: 2px !important;
.el-row {
width: 100% !important;
}
.selected { .selected {
color: #0091ff; color: #0091ff;
font-weight: bold; font-weight: bold;

188
src/assets/css/components/views/charts2/npmAppCategoryScore.scss
View File

@@ -63,122 +63,116 @@
} }
} }
} }
.npm-app-right { .app-table.el-table {
width: calc(100% - 500px);
height: 100%;
border: 1px solid #E2E5EC; border: 1px solid #E2E5EC;
border-radius: 4px; .el-table__header-wrapper {
padding: 1px; tr th {
.app-table.el-table { padding: 5px 0;
.el-table__header-wrapper { .data-column__span {
tr th { font-size: 12px;
padding: 5px 0; color: #353636;
.data-column__span { font-weight: 600;
font-size: 12px;
color: #353636;
font-weight: 600;
}
}
}
.el-table__header-wrapper .el-table__header {
tr th:nth-last-child(-n+3) {
text-align: center;
}
}
.el-table__body-wrapper.is-scrolling-none {
height: 306px !important;
tr td {
padding: 13px 0;
}
tr td:nth-last-child(-n+3) {
text-align: center;
.data-total {
justify-content: center;
}
} }
} }
} }
.data-total { .el-table__header-wrapper .el-table__header {
display: flex !important; tr th:nth-last-child(-n+3) {
.data-total-category-icon {
i {
font-size: 16px;
margin-right: 12px;
color: #717171;
}
}
.data-total-category-value {
font-size: 12px;
color: #353636;
font-weight: 400;
cursor: pointer;
}
.data-score {
border-radius: 10px;
font-size: 12px;
color: #FFFFFF;
font-weight: 500;
height: 20px;
width: 34px;
line-height: 20px;
text-align: center; text-align: center;
} }
.data-score.data-score-red { }
background: #E26154; .el-table__body-wrapper.is-scrolling-none {
height: 306px !important;
tr td {
padding: 13px 0;
} }
.data-score.data-score-yellow { tr td:nth-last-child(-n+3) {
background: #E5A219; text-align: center;
} .data-total {
.data-score.data-score-green { justify-content: center;
background: #749F4D; }
} }
} }
.data-total-value { }
display: flex; .data-total {
justify-content: right; display: flex !important;
width: 50%; .data-total-category-icon {
i {
font-size: 16px;
margin-right: 12px;
color: #717171;
}
}
.data-total-category-value {
font-size: 12px; font-size: 12px;
color: #353636; color: #353636;
font-weight: 400; font-weight: 400;
cursor: pointer;
} }
.data-trend{ .data-score {
display: flex;
width: 50%;
}
.data-total-trend {
display: flex;
justify-content: left;
margin-left: 6px;
font-size: 12px;
justify-content: center;
margin-top: 2px;
border-radius: 10px; border-radius: 10px;
font-weight: 500;
font-size: 12px; font-size: 12px;
color: #FFFFFF;
font-weight: 500;
height: 20px; height: 20px;
padding: 0 5px; width: 34px;
line-height: 20px;
text-align: center;
} }
.data-total-trend-black { .data-score.data-score-red {
background-color: rgba(113,113,113,0.12); background: #E26154;
color: #717171;
width: 36px;
} }
.data-total-trend-green { .data-score.data-score-yellow {
background-color: rgba(126,159,84,0.12); background: #E5A219;
color: #7E9F54;
} }
.data-total-trend-red { .data-score.data-score-green {
background-color: rgba(226,97,84,0.12); background: #749F4D;
color: #E26154;
.cn-icon-rise1{
color: #E44D3E;
}
}
.el-table--group::after,.el-table--border::after, .el-table::before {
height: 0px;
}
.el-table thead {
color: $grey;
} }
} }
.data-total-value {
display: flex;
justify-content: right;
width: 50%;
font-size: 12px;
color: #353636;
font-weight: 400;
}
.data-trend{
display: flex;
width: 50%;
}
.data-total-trend {
display: flex;
justify-content: left;
margin-left: 6px;
font-size: 12px;
justify-content: center;
margin-top: 2px;
border-radius: 10px;
font-weight: 500;
font-size: 12px;
height: 20px;
padding: 0 5px;
}
.data-total-trend-black {
background-color: rgba(113,113,113,0.12);
color: #717171;
width: 36px;
}
.data-total-trend-green {
background-color: rgba(126,159,84,0.12);
color: #7E9F54;
}
.data-total-trend-red {
background-color: rgba(226,97,84,0.12);
color: #E26154;
.cn-icon-rise1{
color: #E44D3E;
}
}
.el-table--group::after,.el-table--border::after, .el-table::before {
height: 0px;
}
.el-table thead {
color: $grey;
}
} }

192
src/views/charts2/charts/npm/NpmAppCategoryScore.vue
View File

@@ -14,119 +14,117 @@
</div> </div>
</div> </div>
</div> </div>
<div class="npm-app-right"> <el-table
<el-table :id="`tabTable_${index}`"
:id="`tabTable_${index}`" :ref="`dataTable_${index}`"
:ref="`dataTable_${index}`" :data="tableData"
:data="tableData" class="app-table"
class="app-table" height="100%"
height="100%" empty-text=" "
empty-text=" " >
> <template v-for="(item, index) in customTableTitles" :key="index">
<template v-for="(item, index) in customTableTitles" :key="index"> <el-table-column class="data-column">
<el-table-column class="data-column"> <template #header>
<template #header> <span class="data-column__span">{{$t(item.label)}}</span>
<span class="data-column__span">{{$t(item.label)}}</span> </template>
</template> <template #default="scope" :column="item">
<template #default="scope" :column="item"> <div class="data-total">
<div class="data-total"> <template v-if="item.prop === 'category'">
<template v-if="item.prop === 'category'"> <span class="data-total-category-icon"><i :class="scope.row.icon"></i></span>
<span class="data-total-category-icon"><i :class="scope.row.icon"></i></span> <span class="data-total-category-value" @click="drillDownData(scope.row.i18n)">{{$t(scope.row.i18n)}}</span>
<span class="data-total-category-value" @click="drillDownData(scope.row.i18n)">{{$t(scope.row.i18n)}}</span> </template>
</template> <template v-else-if="item.prop === 'total'">
<template v-else-if="item.prop === 'total'"> <div class="data-total-value">{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}</div>
<div class="data-total-value">{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}</div> <div class="data-trend">
<div class="data-trend"> <div v-if="scope.row.bytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
<div v-if="scope.row.bytesRateChainRatio > 0" class="data-total-trend data-total-trend-red"> <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<i class="cn-icon-rise1 cn-icon"></i>&nbsp; <span v-if="scope.row.bytesRateChainRatio <= 5">
<span v-if="scope.row.bytesRateChainRatio <= 5">
{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('')}} {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('')}}
</span> </span>
<span v-else>>500.00%</span> <span v-else>>500.00%</span>
</div> </div>
<div v-else-if="scope.row.bytesRateChainRatio < 0" class="data-total-trend data-total-trend-green"> <div v-else-if="scope.row.bytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp; <i class="cn-icon-decline cn-icon"></i>&nbsp;
<span v-if="scope.row.bytesRateChainRatio >= -5"> <span v-if="scope.row.bytesRateChainRatio >= -5">
{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}} {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
</span> </span>
<span v-else>>500.00%</span> <span v-else>>500.00%</span>
</div>
<div v-else-if="scope.row.bytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div>
<div v-else></div>
</div> </div>
</template> <div v-else-if="scope.row.bytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<template v-else-if="item.prop === 'outbound'"> <i class="cn-icon-constant cn-icon"></i>
<div class="data-total-value">{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}</div> </div>
<div class="data-trend"> <div v-else></div>
<div v-if="scope.row.outboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red"> </div>
<i class="cn-icon-rise1 cn-icon"></i>&nbsp; </template>
<span v-if="scope.row.outboundBytesRateChainRatio <= 5"> <template v-else-if="item.prop === 'outbound'">
<div class="data-total-value">{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}</div>
<div class="data-trend">
<div v-if="scope.row.outboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="scope.row.outboundBytesRateChainRatio <= 5">
{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('')}} {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('')}}
</span> </span>
<span v-else>>500.00%</span> <span v-else>>500.00%</span>
</div> </div>
<div v-else-if="scope.row.outboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green"> <div v-else-if="scope.row.outboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp; <i class="cn-icon-decline cn-icon"></i>&nbsp;
<span v-if="scope.row.outboundBytesRateChainRatio >= -5"> <span v-if="scope.row.outboundBytesRateChainRatio >= -5">
{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}} {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
</span> </span>
<span v-else>>500.00%</span> <span v-else>>500.00%</span>
</div>
<div v-else-if="scope.row.outboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div>
<div v-else></div>
</div> </div>
</template> <div v-else-if="scope.row.outboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<template v-else-if="item.prop === 'inbound'"> <i class="cn-icon-constant cn-icon"></i>
<div class="data-total-value">{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}</div> </div>
<div class="data-trend"> <div v-else></div>
<div v-if="scope.row.inboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red"> </div>
<i class="cn-icon-rise1 cn-icon"></i>&nbsp; </template>
<span v-if="scope.row.inboundBytesRateChainRatio <= 5"> <template v-else-if="item.prop === 'inbound'">
<div class="data-total-value">{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}</div>
<div class="data-trend">
<div v-if="scope.row.inboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="scope.row.inboundBytesRateChainRatio <= 5">
{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('')}} {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('')}}
</span> </span>
<span v-else>>500.00%</span> <span v-else>>500.00%</span>
</div> </div>
<div v-else-if="scope.row.inboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green"> <div v-else-if="scope.row.inboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp; <i class="cn-icon-decline cn-icon"></i>&nbsp;
<span v-if="scope.row.inboundBytesRateChainRatio >= -5"> <span v-if="scope.row.inboundBytesRateChainRatio >= -5">
{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}} {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
</span> </span>
<span v-else>>500.00%</span> <span v-else>>500.00%</span>
</div>
<div v-else-if="scope.row.inboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div>
<div v-else></div>
</div> </div>
</template> <div v-else-if="scope.row.inboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<template v-else-if="item.prop === 'score'"> <i class="cn-icon-constant cn-icon"></i>
<div v-if="scope.row.score <= 2" :class="{'data-score-red': scope.row.score <= 2}" class="data-score">
{{scope.row.score}}
</div> </div>
<div v-else-if="scope.row.score <= 4" :class="{'data-score-yellow': scope.row.score <= 4}" class="data-score"> <div v-else></div>
{{scope.row.score}} </div>
</div> </template>
<div v-else-if="scope.row.score <= 6" :class="{'data-score-green': scope.row.score <= 6}" class="data-score"> <template v-else-if="item.prop === 'score'">
{{scope.row.score}} <div v-if="scope.row.score <= 2" :class="{'data-score-red': scope.row.score <= 2}" class="data-score">
</div> {{scope.row.score}}
</template> </div>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span> <div v-else-if="scope.row.score <= 4" :class="{'data-score-yellow': scope.row.score <= 4}" class="data-score">
<span v-else>-</span> {{scope.row.score}}
</div> </div>
</template> <div v-else-if="scope.row.score <= 6" :class="{'data-score-green': scope.row.score <= 6}" class="data-score">
</el-table-column> {{scope.row.score}}
</template> </div>
<template v-slot:empty> </template>
<div class="table-no-data" v-show="isNoData"> <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<div class="table-no-data__title">{{ $t('npm.noData') }}</div> <span v-else>-</span>
</div> </div>
</template> </template>
</el-table> </el-table-column>
</div> </template>
<template v-slot:empty>
<div class="table-no-data" v-show="isNoData">
<div class="table-no-data__title">{{ $t('npm.noData') }}</div>
</div>
</template>
</el-table>
</div> </div>
</template> </template>

21
src/views/charts2/charts/npm/NpmRecentEvents.vue
View File

@@ -49,10 +49,21 @@ import { get } from '@/utils/http'
import { api } from '@/utils/api' import { api } from '@/utils/api'
import { getSecond, dateFormatByAppearance } from '@/utils/date-util' import { getSecond, dateFormatByAppearance } from '@/utils/date-util'
import chartMixin from '@/views/charts2/chart-mixin' import chartMixin from '@/views/charts2/chart-mixin'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
export default { export default {
name: 'NpmRecentEvents', name: 'NpmRecentEvents',
mixins: [chartMixin], mixins: [chartMixin],
setup () {
const { query } = useRoute()
const queryCondition = ref(query.queryCondition || '')
const dimensionType = ref(query.dimensionType || '')
return {
queryCondition,
dimensionType
}
},
data () { data () {
return { return {
tableData: [], tableData: [],
@@ -74,19 +85,19 @@ export default {
methods: { methods: {
recentEventsListData () { recentEventsListData () {
// const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/) // const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : '' // const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
const condition = conditionStr.split(/["|'](.*?)["|']/) const condition = this.queryCondition.split(/["|'](.*?)["|']/)
// const type = this.$store.getters.getDimensionType // const type = this.$store.getters.getDimensionType
const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : '' // const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : ''
let url = '' let url = ''
const params = { const params = {
startTime: getSecond(this.timeFilter.startTime), startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime), endTime: getSecond(this.timeFilter.endTime),
limit: 8 limit: 8
} }
if (condition.length > 1 && type) { if (condition.length > 1 && this.dimensionType) {
params.param = condition[1] params.param = condition[1]
params.type = type params.type = this.dimensionType
params.limit = 10 params.limit = 10
url = api.npm.events.recentEventsD url = api.npm.events.recentEventsD
this.customTableTitles = [ this.customTableTitles = [