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

feat：type 22 （30%）

Browse Source
This commit is contained in:
zhangyu
2022-01-20 15:39:52 +08:00
parent d693452195
commit 086c35d174
12 changed files with 241 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/css/components/index.scss
View File

@@ -19,4 +19,5 @@
@import './views/entityExplorer/entityList/row';
@import 'views/entityExplorer/entityList/detail-overview';
@import './views/charts/panel';
@import 'views/charts/ChartIpOpenPortBar';
//@import '../chart';

24
src/assets/css/components/views/charts/ChartIpOpenPortBar.scss Normal file
View File

@@ -0,0 +1,24 @@
.chart-ip-open-port-bar {
display: flex;
.el-table--border td{
border: none !important;
}
.el-table--border th{
border-right: none !important;
}
.chart-box{
width: 30%;
height: 100%;
border: 1px solid #EBEEF5;
>.title{
height: 36px;
line-height: 36px;
box-sizing: border-box;
padding: 0 10px;
color: #909399;
font-size: 12px;
font-weight: bold;
}
}
}

4
src/assets/css/components/views/charts/chart.scss
View File

@@ -345,7 +345,9 @@
border-left: 5px solid #aeaeae;
}
}
.nz-chart-tooltip{
border-color: transparent !important;
}
.nz-chart-tooltip .cn-chart-tooltip-box{
display: flex;
.cn-chart-tooltip-content{

1
src/assets/css/themes/theme-light.scss
View File

@@ -55,6 +55,7 @@ $--content-right-background-color: #EFF2F5; //右侧背景色
$--background-color-empty: #fffffe;
$--background-color-1: #EFEFEF;
// 普通字色(覆盖element-ui内置变量)
$--color-text: #333;
$--color-text-regular: #666665;
$--border-color-light: #E7EAED;
$--chart-box-border-color: $--border-color-light;

17
src/views/charts/Chart2.vue
View File

@@ -69,6 +69,15 @@
@showLoading="showLoading"
></chart-category-bar>
<chart-ip-open-port-bar
v-else-if="isIpOpenPortBar"
:chart-info="chartInfo"
:chart-data="chartData"
:result-type="resultType"
:query-params="queryParams"
@showLoading="showLoading"
></chart-ip-open-port-bar>
<chart-table
v-else-if="isTable"
:chart-info="chartInfo"
@@ -93,7 +102,8 @@ import IpBasicInfo from '@/views/charts/charts/IpBasicInfo'
import ChartEchartLine from './charts/ChartEchartLine'
import ChartTimeBar from './charts/ChartTimeBar'
import ChartCategoryBar from './charts/ChartCategoryBar'
import ChartTable from "./charts/ChartTable";
import ChartIpOpenPortBar from './charts/ChartIpOpenPortBar'
import ChartTable from './charts/ChartTable'
import {
isEcharts,
isEchartsLine,
@@ -107,6 +117,7 @@ import {
isEchartsWithStatistics,
isEchartsTimeBar,
isEchartsCategoryBar,
isIpOpenPortBar,
isMapLine,
isMapBlock,
isSingleValueWithEcharts,
@@ -140,7 +151,8 @@ export default {
ChartEchartLine,
ChartBlock,
ChartTimeBar,
ChartCategoryBar
ChartCategoryBar,
ChartIpOpenPortBar
},
props: {
chartInfo: Object,
@@ -181,6 +193,7 @@ export default {
isEchartsLine: isEchartsLine(props.chartInfo.type),
isEchartsTimeBar: isEchartsTimeBar(props.chartInfo.type),
isEchartsCategoryBar: isEchartsCategoryBar(props.chartInfo.type),
isIpOpenPortBar: isIpOpenPortBar(props.chartInfo.type),
isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
isSingleValue: isSingleValue(props.chartInfo.type),

3
src/views/charts/PanelChart.vue
View File

@@ -184,11 +184,12 @@ export default {
const requestUrl = url || (chartParams && chartParams.url)
if (requestUrl) {
get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
console.log(testData)
if (this.chartInfo.type === 23 && testData) {
response = testData.data
} else if (this.chartInfo.type === 24 && testData) {
response = testData.data2
} else if (this.chartInfo.type === 22 && testData) {
response = testData.data3
}
if (response.code === 200) {
this.chartData = response.data.result

11
src/views/charts/charts/ChartCategoryBar.vue
View File

@@ -11,7 +11,7 @@ import { legendMapping } from '@/components/charts/chart-table-title'
import {
categoryBar
} from '@/views/charts/charts/options/bar'
import { getCharBartColor } from '@/views/charts/charts/tools'
import { getCharBartColor, categoryBarTooltipFormatter } from '@/views/charts/charts/tools'
export default {
name: 'ChartCategoryBar',
@@ -33,6 +33,11 @@ export default {
const dom = document.getElementById(id)
!this.myChart && (this.myChart = echarts.init(dom))
this.chartOption = this.$_.cloneDeep(categoryBar)
this.chartOption.tooltip.trigger = 'item'
this.chartOption.tooltip.formatter = (params) => {
const str = categoryBarTooltipFormatter(params, chartParams.direction)
return str
}
if (!chartParams.itemColorAlternately) {
this.chartOption.series[0].itemStyle.color = function (params) {
return getCharBartColor(0)
@@ -50,9 +55,9 @@ export default {
this.chartData.forEach((r, index) => {
// chartParams.direction === 'vertical' ? r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]) : r.values.map(v => [Number(v[1]), Number(v[0]) * 1000, chartParams.unitType])
if (chartParams.direction === 'horizontal') {
obj.data.push([Number(r.events), r.clientCountry + ' ' + r.clientRegion, r])
obj.data.push([Number(r.events), r.clientCountry + ' ' + r.clientRegion, chartParams.unitType])
} else {
obj.data.push([r.clientCountry + ' ' + r.clientRegion, Number(r.events), r])
obj.data.push([r.clientCountry + ' ' + r.clientRegion, Number(r.events), chartParams.unitType])
}
return obj
})

91
src/views/charts/charts/ChartIpOpenPortBar.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<div class="chart-ip-open-port-bar">
<el-table
ref="table"
class="pie-table"
:data="tableData"
style="width: 70%;border-left: none;"
tooltip-effect="light"
border="none"
:size="'mini'"
:height="'100%'">
<el-table-column
v-for="(item,index) in tableKey"
:key="index"
:label="item.label"
:prop="item.prop"
:min-width="item.width"
>
<template v-slot="scope" :column="item">
<span v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template>
</el-table-column>
</el-table>
<div class="chart-box">
<div class="title">
Protocols statistics
</div>
<div class="chart-drawing" :id="`chart${chartInfo.id}`">
</div>
</div>
</div>
</template>
<script>
import lodash from 'lodash'
export default {
name: 'ChartIpOpenPortBar',
props: {
chartInfo: Object,
chartData: [Array, Object],
resultType: Object,
queryParams: Object
},
data () {
return {
myChart: null,
chartOption: null,
tableData: [],
tableKey: [
{
label: 'Port',
prop: 'port',
width: '15%'
}, {
label: 'Protocol',
prop: 'protocol',
width: '20%'
}, {
label: 'Banner',
prop: 'banner',
width: '40%'
}, {
label: 'Updated at',
prop: 'utime',
width: '25%'
}
]
}
},
methods: {
init (id) {
this.tableData = lodash.cloneDeep(this.chartData)
}
},
watch: {
chartData: {
deep: true,
handler (n) {
console.log(n)
this.init(`chart${this.chartInfo.id}`)
}
}
}
}
</script>
<style scoped>
</style>

8
src/views/charts/charts/ChartTimeBar.vue
View File

@@ -11,7 +11,7 @@ import { legendMapping } from '@/components/charts/chart-table-title'
import {
timeBar
} from '@/views/charts/charts/options/bar'
import { getCharBartColor } from '@/views/charts/charts/tools'
import { getCharBartColor, timeBarTooltipFormatter } from '@/views/charts/charts/tools'
export default {
name: 'ChaetTimeBar',
@@ -33,6 +33,11 @@ export default {
const dom = document.getElementById(id)
!this.myChart && (this.myChart = echarts.init(dom))
this.chartOption = this.$_.cloneDeep(timeBar)
this.chartOption.tooltip.trigger = 'item'
this.chartOption.tooltip.formatter = (params) => {
const str = timeBarTooltipFormatter(params, chartParams.direction)
return str
}
if (!chartParams.itemColorAlternately) {
this.chartOption.series[0].itemStyle.color = function (params) {
return getCharBartColor(0)
@@ -107,6 +112,7 @@ export default {
return allZero
}
}
},
watch: {
chartData: {

2
src/views/charts/charts/options/bar.js
View File

@@ -34,7 +34,7 @@ export const ipOpenPortBar = {
export const categoryBar = {
tooltip: {
appendToBody: true,
trigger: 'axis',
trigger: 'item',
textStyle: {
width: '20px',
overflow: 'truncate'

29
src/views/charts/charts/testData.js
View File

@@ -59,8 +59,35 @@ const data2 = {
clientRegion: 'ShangHai',
clientId: 'CN',
events: 13000
}, {
serverCountry: 'America2',
serverRegion: 'Washington2',
serverId: 'US',
clientCountry: 'China',
clientRegion: 'ShangHai2',
clientId: 'CN',
events: 13000
}
]
}
}
export default { data, data2 }
const data3 = {
code: 200,
msg: '',
data: {
resultType: 'object',
result: [{
port: '80',
protocol: 'HTTP',
banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache',
utime: '2021-9-17 13:53:37'
}, {
port: '443',
protocol: 'HTTPS',
banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache',
utime: '2021-9-17 13:53:37'
}
]
}
}
export default { data, data2, data3 }

60
src/views/charts/charts/tools.js
View File

@@ -46,6 +46,9 @@ export function isEchartsTimeBar (type) {
export function isEchartsCategoryBar (type) {
return type === 24
}
export function isIpOpenPortBar (type) {
return type === 22
}
/* 饼图柱状图等 */
export function isEcharts (type) {
return type >= 11 && type <= 50
@@ -337,3 +340,60 @@ export function timeVerticalFormatter (params) {
str += '</div>'
return str
}
export function timeBarTooltipFormatter (params, type) {
console.log(params, type)
let index1, index0
if (type === 'vertical') {
index0 = 0
index1 = 1
} else {
index0 = 1
index1 = 0
}
let str = '<div>'
const tData = params.data[index0]
str += '<div style="margin-bottom: 5px">'
str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
str += '</div>'
str += '<div class="cn-chart-tooltip-box">'
// str += params.marker
str += `<span class="cn-chart-tooltip-content">
values
</span>`
str += `<span class="cn-chart-tooltip-value">
${unitConvert(params.data[index1], params.data[2]).join(' ')}
</span>`
str += '</div>'
str += '</div>'
return str
}
export function categoryBarTooltipFormatter (params, type) {
console.log(params, type)
let index1, index0
if (type === 'vertical') {
index0 = 0
index1 = 1
} else {
index0 = 1
index1 = 0
}
let str = '<div>'
str += '<div style="margin-bottom: 5px">'
str += params.data[index0]
str += '</div>'
str += '<div class="cn-chart-tooltip-box">'
// str += params.marker
str += `<span class="cn-chart-tooltip-content">
values
</span>`
str += `<span class="cn-chart-tooltip-value">
${unitConvert(params.data[index1], params.data[2]).join(' ')}
</span>`
str += '</div>'
str += '</div>'
return str
}