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

CN-53 perf: cn-53第三条，column和legend国际化

Browse Source
This commit is contained in:
chenjinsong
2021-07-14 15:40:05 +08:00
parent 2e2b197b90
commit 8a0eb23e2d
7 changed files with 183 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/charts/EchartsFrame.vue
View File

@@ -37,9 +37,14 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.cn-panel .cn-chart__echarts .pie-with-table{ .cn-panel .cn-chart__echarts {
flex: 1; .cn-chart__body.pie-with-table {
padding: 10px 40px 30px; flex-basis: 40%;
}
.cn-chart__footer.pie-with-table {
flex-basis: 60%;
padding: 10px 30px 30px;
}
} }
</style> </style>

204
src/components/charts/PieTable.vue
View File

@@ -1,72 +1,77 @@
<template> <template>
<el-table <el-table
v-loading="loading" v-loading="loading"
ref="table" ref="table"
class="pie-table" class="pie-table"
:data="pieTableData" :data="pieTableData"
style="width: 100%;border: 1px solid #E7EAED" style="width: 100%;border: 1px solid #E7EAED"
:row-key="getRowKey" :row-key="getRowKey"
@expand-change="currentChange" @expand-change="currentChange"
current-row-key="domain" current-row-key="domain"
:expand-row-keys="expandRowKeys" tooltip-effect="light"
:expand-row-keys="expandRowKeys"
:size="'mini'"
:height="'100%'">
<el-table-column type="expand" :min-width="'5%'">
<template #default="props" style="height: auto">
<el-table
tooltip-effect="light"
class="expand-table"
:data="childrenTableData"
style="width: 100%;"
:show-header="false"
:size="'mini'" :size="'mini'"
:height="'100%'"> :height="'100%'">
<el-table-column type="expand" :min-width="'5%'"> <el-table-column
<template #default="props" style="height: auto"> width="48">
<el-table </el-table-column>
class="expand-table" <el-table-column
:data="childrenTableData" v-for="(item, index) in tableTitlesOther"
style="width: 100%;" :key="index"
:show-header="false" show-overflow-tooltip
:size="'mini'" :min-width="item.width"
:height="'100%'"> :label="item.label"
<el-table-column :prop="item.prop"
min-width="5%"> #default="{row}">
</el-table-column>
<el-table-column
v-for="(item, index) in tableTitlesOther"
:key="index"
:min-width="item.width"
:label="item.label"
:prop="item.prop"
#default="{row}">
<span v-if="item.prop === 'nameColumn'"> <span v-if="item.prop === 'nameColumn'">
{{nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] : row['reputationLevel'] }} {{ nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] : row['reputationLevel'] }}
</span> </span>
<span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'" > <span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'">
{{shortFormatter(row[item.prop])}} {{ shortFormatter(row[item.prop]) }}
</span>
<span v-else>
{{row[item.prop]}}
</span>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in tableTitles"
:key="index"
:min-width="item.width"
:label="item.label"
:prop="item.prop"
#default="{row}">
<span v-if="item.prop === 'nameColumn'">
{{nameColumn === 'fqdnCategoryName' ? row['categoryName'] : row['reputationLevel'] }}
</span>
<span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'" >
{{shortFormatter(row[item.prop])}}
</span> </span>
<span v-else> <span v-else>
{{row[item.prop]}} {{ row[item.prop] }}
</span> </span>
</el-table-column> </el-table-column>
</el-table> </el-table>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in tableTitles"
:key="index"
show-overflow-tooltip
:min-width="item.width"
:label="item.label"
:prop="item.prop"
#default="{row}">
<span v-if="item.prop === 'nameColumn'">
{{ nameColumn === 'fqdnCategoryName' ? row['categoryName'] : row['reputationLevel'] }}
</span>
<span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'">
{{ shortFormatter(row[item.prop]) }}
</span>
<span v-else>
{{ row[item.prop] }}
</span>
</el-table-column>
</el-table>
</template> </template>
<script> <script>
import { shortFormatter } from '@/components/charts/chartFormatter' import { shortFormatter } from '@/components/charts/chartFormatter'
import { get } from '@/utils/http' import { get } from '@/utils/http'
import { replaceUrlPlaceholder } from '@/utils/tools' import { replaceUrlPlaceholder } from '@/utils/tools'
export default { export default {
name: 'PieTable', name: 'PieTable',
props: { props: {
@@ -91,10 +96,6 @@ export default {
}) })
} }
}, },
pieTableData: {
handler (n) {
}
},
chartInfo: { chartInfo: {
deep: true, deep: true,
immediate: true, immediate: true,
@@ -114,54 +115,54 @@ export default {
expandRowKeys: [], expandRowKeys: [],
tableTitles: [ tableTitles: [
{ {
label: this.$t('chart.pieTable.domain'), label: this.$t('common.domain'),
prop: 'domain', prop: 'domain',
width: '20%' width: '20%'
}, },
{ {
label: this.$t('chart.pieTable.nameColumn'), label: this.$t('entities.category'),
prop: 'nameColumn', prop: 'nameColumn',
width: '22%' width: '22%'
}, },
{ {
label: this.$t('chart.pieTable.sessions'), label: this.$t('common.sessions'),
prop: 'sessions', prop: 'sessions',
width: '18%' width: '18%'
}, },
{ {
label: this.$t('chart.pieTable.packets'), label: this.$t('common.packets'),
prop: 'packets', prop: 'packets',
width: '18%' width: '18%'
}, },
{ {
label: this.$t('chart.pieTable.bytes'), label: this.$t('common.bytes'),
prop: 'bytes', prop: 'bytes',
width: '18%' width: '18%'
} }
], ],
tableTitlesOther: [ tableTitlesOther: [
{ {
label: this.$t('chart.pieTable.serverIp'), label: this.$t('common.serverIp'),
prop: 'serverIp', prop: 'serverIp',
width: '20%' width: '20%'
}, },
{ {
label: this.$t('chart.pieTable.nameColumn'), label: this.$t('common.reputation'),
prop: 'nameColumn', prop: 'nameColumn',
width: '22%' width: '22%'
}, },
{ {
label: this.$t('chart.pieTable.sessions'), label: this.$t('common.sessions'),
prop: 'sessions', prop: 'sessions',
width: '18%' width: '18%'
}, },
{ {
label: this.$t('chart.pieTable.packets'), label: this.$t('common.packets'),
prop: 'packets', prop: 'packets',
width: '18%' width: '18%'
}, },
{ {
label: this.$t('chart.pieTable.bytes'), label: this.$t('common.bytes'),
prop: 'bytes', prop: 'bytes',
width: '18%' width: '18%'
} }
@@ -179,19 +180,25 @@ export default {
// this.$refs.table.toggleRowExpansion(row) // this.$refs.table.toggleRowExpansion(row)
// }, // },
currentChange (row, expandedRows) { currentChange (row, expandedRows) {
if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) { this.childrenTableData = []
this.expandRowKeys = []
} else {
this.expandRowKeys = [row.domain]
}
// this.$refs.table.toggleRowExpansion(row) // this.$refs.table.toggleRowExpansion(row)
const url = JSON.parse(this.chartInfo.params).urlChildrenTable const url = this.chartInfo.params.urlChildrenTable
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), order: this.order, domain: row.domain } const queryParams = {
startTime: parseInt(this.startTime / 1000),
endTime: parseInt(this.endTime / 1000),
order: this.order,
domain: row.domain
}
get(replaceUrlPlaceholder(url, queryParams)).then(response2 => { get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
if (response2.code === 200) { if (response2.code === 200) {
this.childrenTableData = response2.data.result this.childrenTableData = response2.data.result
} }
if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
this.expandRowKeys = []
} else {
this.expandRowKeys = [row.domain]
}
}) })
}, },
getRowKey (row) { getRowKey (row) {
@@ -202,23 +209,32 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/deep/ .el-table__expanded-cell[class*=cell]{ /deep/ .el-table__expanded-cell[class*=cell] {
padding: 0; padding: 0;
} }
.expand-table /deep/ .el-table__body .el-table__row:last-of-type td{
border: none; .expand-table /deep/ .el-table__body .el-table__row:last-of-type td {
} border: none;
.pie-table{ }
font-family: Roboto-Medium;
font-size: 14px; .pie-table {
color: #333333; font-size: 14px;
font-weight: 500; color: #333333;
} font-weight: 500;
.expand-table{
font-weight: 400; /deep/ .el-table__header-wrapper {
color: #606266; .cell {
/deep/ .el-table__body-wrapper{ color: #333;
height: auto !important;
}
} }
}
}
.expand-table {
font-weight: 400;
color: #606266;
/deep/ .el-table__body-wrapper {
height: auto !important;
}
}
</style> </style>

63
src/components/charts/chartTableTitle.js
View File

@@ -1,74 +1,81 @@
import i18n from '@/i18n'
export const allTableTitle = { export const allTableTitle = {
tableTitles10: [ tableTitles10: [
{ {
label: 'clientIp', label: i18n.global.t('common.clientIp'),
prop: 'clientIp' prop: 'clientIp'
}, },
{ {
label: 'bytes', label: i18n.global.t('common.sessions'),
prop: 'sessions'
},
{
label: i18n.global.t('common.bytes'),
prop: 'bytes' prop: 'bytes'
}, },
{ {
label: 'packets', label: i18n.global.t('common.packets'),
prop: 'packets' prop: 'packets'
},
{
label: 'sessions',
prop: 'sessions'
} }
], ],
tableTitles13: [ tableTitles13: [
{ {
label: 'serverIp', label: i18n.global.t('common.serverIp'),
prop: 'serverIp' prop: 'serverIp'
}, },
{ {
label: 'bytes', label: i18n.global.t('common.sessions'),
prop: 'sessions'
},
{
label: i18n.global.t('common.bytes'),
prop: 'bytes' prop: 'bytes'
}, },
{ {
label: 'packets', label: i18n.global.t('common.packets'),
prop: 'packets' prop: 'packets'
},
{
label: 'sessions',
prop: 'sessions'
} }
], ],
tableTitles14: [ tableTitles14: [
{ {
label: 'domain', label: i18n.global.t('common.domain'),
prop: 'domain' prop: 'domain'
}, },
{ {
label: 'bytes', label: i18n.global.t('common.sessions'),
prop: 'sessions'
},
{
label: i18n.global.t('common.bytes'),
prop: 'bytes' prop: 'bytes'
}, },
{ {
label: 'packets', label: i18n.global.t('common.packets'),
prop: 'packets' prop: 'packets'
},
{
label: 'sessions',
prop: 'sessions'
} }
], ],
tableTitles15: [ tableTitles15: [
{ {
label: 'appName', label: i18n.global.t('common.appName'),
prop: 'appName' prop: 'appName'
}, },
{ {
label: 'bytes', label: i18n.global.t('common.sessions'),
prop: 'sessions'
},
{
label: i18n.global.t('common.bytes'),
prop: 'bytes' prop: 'bytes'
}, },
{ {
label: 'packets', label: i18n.global.t('common.packets'),
prop: 'packets' prop: 'packets'
},
{
label: 'sessions',
prop: 'sessions'
} }
] ]
} }
export const legendMapping = {
bytes_received_rate: 'Bytes Received Rate',
bytes_sent_rate: 'Bytes Sent Rate',
bytes_rate: 'Bytes Rate',
session_rate: 'Session Rate'
}

5
src/components/charts/panel.scss
View File

@@ -297,7 +297,7 @@
justify-content: end; justify-content: end;
align-items: center; align-items: center;
.header__operation.header__operation--table { .header__operation.header__operation--echarts {
display: flex; display: flex;
align-items: center; align-items: center;
height: 22px; height: 22px;
@@ -352,7 +352,7 @@
} }
.option__select.select-column { .option__select.select-column {
.el-input__inner { .el-input__inner {
width: 120px; width: 86px;
padding-left: 8px; padding-left: 8px;
} }
} }
@@ -368,7 +368,6 @@
} }
} }
.cn-chart__body { .cn-chart__body {
flex: auto;
overflow-y: auto; overflow-y: auto;
.el-table { .el-table {

4
src/components/common/TimeRange/DateTimeRange.vue
View File

@@ -78,7 +78,7 @@
</template> </template>
<script> <script>
import {ref, computed} from 'vue' import { ref, computed } from 'vue'
import MyDatePicker from '../MyDatePicker' import MyDatePicker from '../MyDatePicker'
export default { export default {
@@ -105,7 +105,7 @@ export default {
components: { components: {
MyDatePicker MyDatePicker
}, },
setup(props, ctx) { setup (props, ctx) {
// data // data
const myStartTime = ref(props.startTime) const myStartTime = ref(props.startTime)
const myEndTime = ref(props.endTime) const myEndTime = ref(props.endTime)

12
src/utils/tools.js
View File

@@ -255,9 +255,9 @@ export const cancelWithChange = {
function domClick (e) { function domClick (e) {
const newValue = JSON.parse(JSON.stringify(binding.value.object)) const newValue = JSON.parse(JSON.stringify(binding.value.object))
if (unsavedChange === 'on' && !isEqual(oldValue, newValue)) { if (unsavedChange === 'on' && !isEqual(oldValue, newValue)) {
ElMessageBox.confirm(i18n.t('tip.confirmCancel'), { ElMessageBox.confirm(i18n.global.t('tip.confirmCancel'), {
confirmButtonText: i18n.t('tip.yes'), confirmButtonText: i18n.global.t('tip.yes'),
cancelButtonText: i18n.t('tip.no'), cancelButtonText: i18n.global.t('tip.no'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
if (binding.value.func) { if (binding.value.func) {
@@ -393,6 +393,12 @@ export function lineToHump (name) {
return letter.toUpperCase() return letter.toUpperCase()
}) })
} }
// 下划线转换空格首位大写
export function lineToSpace (name) {
return _.upperFirst(name.replace(/\_(\w)/g, function (all, letter) {
return ` ${letter.toUpperCase()}`
}))
}
// 驼峰转换下划线 // 驼峰转换下划线
export function humpToLine (name) { export function humpToLine (name) {
return name.replace(/([A-Z])/g, '_$1').toLowerCase() return name.replace(/([A-Z])/g, '_$1').toLowerCase()

30
src/views/charts/Chart.vue
View File

@@ -29,7 +29,7 @@
> >
<template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template> <template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
<template #operations> <template #operations>
<i class="cn-icon cn-icon-more-light"></i> <!-- <i class="cn-icon cn-icon-more-light"></i>-->
<!-- <i class="cn-icon cn-icon-refresh" @click="loadMap"></i>--> <!-- <i class="cn-icon cn-icon-refresh" @click="loadMap"></i>-->
</template> </template>
<template #default> <template #default>
@@ -47,20 +47,19 @@
{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}} {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
</template> </template>
<template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1"> <template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
<div class="header__operation header__operation--table" v-if="chart.type === 31"> <div class="header__operation header__operation--echarts" v-if="chart.type === 31">
<el-select <el-select
size="mini" size="mini"
v-model="orderPieTable" v-model="orderPieTable"
class="option__select select-topn" class="option__select select-column"
placeholder="" placeholder=""
popper-class="option-popper" popper-class="option-popper"
@change="orderPieTableChange" @change="orderPieTableChange"
> >
<el-option v-for="item in chartPieTableTopOptions" :key="item.value" :value="item.value">&nbsp{{item.name}}</el-option> <el-option v-for="item in chartPieTableTopOptions" :key="item.value" :value="item.value">&nbsp{{item.name}}</el-option>
<template #prefix>TOP&nbsp;</template>
</el-select> </el-select>
</div> </div>
<i class="cn-icon cn-icon-more-light margin-l-10"></i> <!-- <i class="cn-icon cn-icon-more-light margin-l-10"></i>-->
</template> </template>
<template #default> <template #default>
<div class="chart-drawing" :id="`chart${chartInfo.id}`"></div> <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
@@ -131,10 +130,10 @@
<span class="option__button"><i class="cn-icon cn-icon-style"></i></span> <span class="option__button"><i class="cn-icon cn-icon-style"></i></span>
<div class="icon-group-divide"></div> <div class="icon-group-divide"></div>
<span class="option__button"><i class="cn-icon cn-icon-dropdown"></i></span> <span class="option__button"><i class="cn-icon cn-icon-dropdown"></i></span>
</div>--> </div>
<div class="header__operation header__operation--table"> <div class="header__operation header__operation--table">
<span class="option__button"><i class="cn-icon cn-icon-full-screen"></i></span> <span class="option__button"><i class="cn-icon cn-icon-full-screen"></i></span>
</div> </div>-->
</template> </template>
<template #footer> <template #footer>
<chart-table-pagination <chart-table-pagination
@@ -150,7 +149,7 @@ import * as echarts from 'echarts'
import * as am4Core from '@amcharts/amcharts4/core' import * as am4Core from '@amcharts/amcharts4/core'
import * as am4Maps from '@amcharts/amcharts4/maps' import * as am4Maps from '@amcharts/amcharts4/maps'
import { shallowRef } from 'vue' import { shallowRef } from 'vue'
import { allTableTitle } from '@/components/charts/chartTableTitle' import { allTableTitle, legendMapping } from '@/components/charts/chartTableTitle'
import { import {
isEcharts, isEcharts,
isSingleValue, isSingleValue,
@@ -177,7 +176,7 @@ import StatisticsLegend from '@/components/charts/StatisticsLegend'
import ChartTablePagination from '@/components/charts/ChartTablePagination' import ChartTablePagination from '@/components/charts/ChartTablePagination'
import { chartTableDefaultPageSize, chartTableTopOptions, storageKey, chartPieTableTopOptions } from '@/utils/constants' import { chartTableDefaultPageSize, chartTableTopOptions, storageKey, chartPieTableTopOptions } from '@/utils/constants'
import { get } from '@/utils/http' import { get } from '@/utils/http'
import { replaceUrlPlaceholder, getCapitalGeo, getGeoData } from '@/utils/tools' import { replaceUrlPlaceholder, getCapitalGeo, getGeoData, lineToSpace } from '@/utils/tools'
export default { export default {
name: 'Chart', name: 'Chart',
@@ -400,7 +399,7 @@ export default {
}, },
orderPieTableChange () { orderPieTableChange () {
if (this.chart.type === 31) { if (this.chart.type === 31) {
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数 const chartParams = this.chartInfo.params || null // 图表参数
this.myChart.off('click') this.myChart.off('click')
this.initEchartsWithPieTable(chartParams) this.initEchartsWithPieTable(chartParams)
} }
@@ -409,12 +408,11 @@ export default {
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) } const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => { get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.statisticsData = response.data.result
const seriesTemplate = this.chartOption.series[0] const seriesTemplate = this.chartOption.series[0]
this.chartOption.series = response.data.result.map(r => { this.chartOption.series = response.data.result.map(r => {
return { return {
...seriesTemplate, ...seriesTemplate,
name: r.legend, name: legendMapping[r.legend] ? legendMapping[r.legend] : lineToSpace(r.legend),
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])]) data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])])
} }
}) })
@@ -501,7 +499,7 @@ export default {
}) })
}, },
tableLimitChange () { tableLimitChange () {
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数 const chartParams = this.chartInfo.params || null // 图表参数
this.initChartTable(chartParams) this.initChartTable(chartParams)
}, },
initChartTable (chartParams) { initChartTable (chartParams) {
@@ -526,7 +524,11 @@ export default {
}, },
handleSingleValue () { handleSingleValue () {
return function (value) { return function (value) {
return Number(value) < 0.01 ? '< 0.01' : this.$_.round(value, 2) if (!Number(value)) {
return 0
} else {
return Number(value) < 0.01 ? '< 0.01' : this.$_.round(value, 2)
}
} }
} }
}, },