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

CN-229 Cyptocurrency--挖矿事件统计新图表开发

Browse Source 
CN-230 Cyptocurrency--矿机所属单位新图表开发
This commit is contained in:
hyx
2021-12-13 10:16:41 +08:00
parent 88b3cf1351
commit cbcd837031
4 changed files with 796 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/charts/ChartTableActiveIp.vue
View File

@@ -22,8 +22,8 @@
>
<el-table-column>
<template #default="{ row }">
<div class="header__icon"><i class="cn-icon cn-icon-ip ip-green"></i></div>
<div class="content__name" >
<div class="active-ip__icon"><i class="cn-icon cn-icon-ip ip-green"></i></div>
<div class="active-ip__content" >
{{row['name']}}
</div>
</template>
@@ -85,7 +85,7 @@ export default {
<style>
.header__icon {
.active-ip__icon {
overflow: hidden;
position: absolute;
top: 8px;
@@ -103,7 +103,7 @@ export default {
.ip-green {
color: #23BF9A;
}
.content__name {
.active-ip__content {
position: absolute;
top: 7px;
left: 35px;

183
src/components/charts/chart-options.js
View File

@@ -11,9 +11,13 @@ export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
'#73BFDE', '#3BA172', '#FC8452', '#9960B4',
'#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
'#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
export const chartBarColor = [ '#0F8AB2', '#57CBAC']
export function getChartColor (index) {
return chartColor[index % chartColor.length]
}
export function getCharBartColor (index) {
return chartBarColor[index % chartBarColor.length]
}
const line = {
tooltip: {
appendToBody: true,
@@ -464,11 +468,116 @@ const ipOpenPortBar = {
barCategoryGap: '10%'
}]
}
const categoryBar = {
tooltip: {
appendToBody: true,
trigger: 'axis',
textStyle: {
width: '20px',
overflow: 'truncate'
},
formatter: categoryVerticalFormatter,
show: true,
className: 'nz-chart-tooltip',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: false }
},
grid: {
top: 20,
left: 10,
right: 25,
bottom: 20,
containLabel:true
},
yAxis: {
type: 'value',
axisTick: { show: false },
axisLine: { show: false }
},
color:chartColor,
series: [{
barWidth: 15,
data: [],
type: 'bar',
label: { show: false},
barCategoryGap: '10%',
itemStyle: {
color: function(params) {
return getCharBartColor([params.dataIndex])
},
}
}]
}
const timeBar = {
tooltip: {
appendToBody: true,
trigger: 'axis',
textStyle: {
width: '20px',
overflow: 'truncate'
},
formatter: timeVerticalFormatter,
show: true,
className: 'nz-chart-tooltip',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
},
xAxis: {
type: 'time',
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
interval: 0,
//rotate: -40, //设置日期显示样式（倾斜度）
formatter: function (value) {//在这里写你需要的时间格式
var t_date = new Date(value);
return [t_date.getMonth() + 1, t_date.getDate()].join('/')+ " " + [t_date.getHours(), t_date.getMinutes()].join(':');
}
}
},
grid: {
top: 20,
left: 25,
right: 25,
bottom: 20,
containLabel:true
},
yAxis: {
type: 'value',
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
formatter: function (value, index, a, b) {
return unitConvert(value, unitTypes.number).join(' ')
}
},
minInterval: 1
},
color:chartColor,
series: [{
barWidth: 15,
data: [],
type: 'bar',
label: { show: false},
barCategoryGap: '10%',
itemStyle: {
color: function(params) {
return getCharBartColor([params.dataIndex])
},
}
}]
}
const typeOptionMappings = [
{ value: 11, option: line }, // 常规折线图
{ value: 12, option: lineWithStatistics }, // 带统计表格的折线图
{ value: 13, option: lineStack }, // 折线堆叠图
{ value: 22, option: ipOpenPortBar }, // ip详情--开放端口的柱状图
{ value: 23, option: timeBar }, // 矿机所属单位
{ value: 24, option: categoryBar }, // 挖矿事件统计
{ value: 31, option: pieWithTable }, // 常规折线图
{ value: 33, option: ipHostedDomain }, // ip详情--托管域名
{ value: 34, option: ipHostedDomain }, // app详情--相关域名
@@ -499,6 +608,14 @@ export function getTypeCategory (type) {
return typeCategory.TABS
}
}
/* 柱状图:挖矿事件统计(time类型柱状图) */
export function isEchartsTimeBar (type) {
return type == 23
}
/* 柱状图:矿机所属单位(category类型柱状图) */
export function isEchartsCategoryBar (type) {
return type == 24
}
/* 饼图柱状图等 */
export function isEcharts (type) {
return type >= 11 && type <= 50
@@ -631,3 +748,69 @@ function axiosFormatter (params) {
str += '</div>'
return str
}
export function timeVerticalFormatter (params) {
let str = '<div>'
params.forEach((item, i) => {
const tData = item.data[0]
if (i === 0) {
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 += item.marker
str += `<span class="cn-chart-tooltip-content">
${item.seriesName}
</span>`
str += `<span class="cn-chart-tooltip-value">
${unitConvert(item.data[1], item.data[2]).join(' ')}
</span>`
str += '</div>'
})
str += '</div>'
return str
}
export function timeHorizontalFormatter (params) {
let str = '<div>'
params.forEach((item, i) => {
const tData = item.data[1]
if (i === 0) {
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 += item.marker
str += `<span class="cn-chart-tooltip-content">
${item.seriesName}
</span>`
str += `<span class="cn-chart-tooltip-value">
${unitConvert(item.data[0], item.data[2]).join(' ')}
</span>`
str += '</div>'
})
str += '</div>'
return str
}
export function categoryHorizontalFormatter (params) {
let str = '<div>'
params.forEach((item, i) => {
str += '<div class="cn-chart-tooltip-box">'
str += item.data[1]+': ' + item.data[0]
str += '</div>'
})
str += '</div>'
return str
}
export function categoryVerticalFormatter (params) {
let str = '<div>'
params.forEach((item, i) => {
str += '<div class="cn-chart-tooltip-box">'
str += item.data[0]+': ' + item.data[1]
str += '</div>'
})
str += '</div>'
return str
}

15
src/components/rightBox/settings/ChartBox.vue
View File

@@ -56,7 +56,7 @@
<el-option :key="panelTypeAndRouteMapping.trafficSummary" :label="$t('trafficSummary.trafficSummary')" :value="panelTypeAndRouteMapping.trafficSummary"></el-option>
<el-option :key="panelTypeAndRouteMapping.networkAppPerformance" :label="$t('networkAppPerformance.networkAppPerformance')" :value="panelTypeAndRouteMapping.networkAppPerformance"></el-option>
<el-option :key="panelTypeAndRouteMapping.cyptocurrency" :label="$t('cyptocurrency.cyptocurrency')" :value="panelTypeAndRouteMapping.cyptocurrency"></el-option>
<el-option :key="panelTypeAndRouteMapping.cyptocurrency" :label="$t('overall.cyptocurrency')" :value="panelTypeAndRouteMapping.cyptocurrency"></el-option>
<el-option :key="panelTypeAndRouteMapping.dnsServiceInsights" :label="$t('dnsServiceInsights.dnsServiceInsights')" :value="panelTypeAndRouteMapping.dnsServiceInsights"></el-option>
<el-option :key="panelTypeAndRouteMapping.ipEntityDetail" :label="$t('entities.ipEntityDetail')" :value="panelTypeAndRouteMapping.ipEntityDetail"></el-option>
<el-option :key="panelTypeAndRouteMapping.domainEntityDetail" :label="$t('entities.domainEntityDetail')" :value="panelTypeAndRouteMapping.domainEntityDetail"></el-option>
@@ -287,6 +287,14 @@ export default {
value: 22,
label: 'bar-2',
remark: '开放端口'
}, {
value: 23,
label: 'bar-3',
remark: '挖矿事件统计(time类型柱状图)'
}, {
value: 24,
label: 'bar-4',
remark: '矿机所属单位(category类型柱状图)'
},
{
value: 32,
@@ -324,6 +332,11 @@ export default {
value: 84,
label: 'list-2',
remark: 'DNS记录'
},
{
value: 85,
label: 'list-3',
remark: '近期挖矿事件'
}
]
}

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

@@ -271,6 +271,7 @@
</template>
</el-select>
</div>
<span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
</template>
</chart-table-active-ip>
<!-- 表格 -->
@@ -536,6 +537,8 @@ import {
layoutConstant,
isEchartsWithTable,
isEchartsWithStatistics,
isEchartsTimeBar,
isEchartsCategoryBar,
isMapLine,
isMapBlock,
isSingleValueWithEcharts,
@@ -550,7 +553,8 @@ import {
isDomainDnsRecord,
isAppBasicInfo,
isAppRelatedDomain,
getChartColor
getChartColor, chartBarColor,timeVerticalFormatter,timeHorizontalFormatter,
categoryHorizontalFormatter,categoryVerticalFormatter, getCharBartColor
} from '@/components/charts/chart-options'
import ChartError from '@/components/charts/ChartError'
import EchartsFrame from '@/components/charts/EchartsFrame'
@@ -630,7 +634,6 @@ export default {
num: 345
}
], // table的所有数据
currentPageData: [] // table当前页的数据
},
pieTableData: [],
singleValue: {
@@ -708,6 +711,10 @@ export default {
this.initIpHostedDomain(chartParams)
} else if (this.isAppRelatedDomain) {
this.initAppRelatedDomain(chartParams)
} else if (this.isEchartsTimeBar) {
this.initEchartsTimeBar(chartParams)
}else if (this.isEchartsCategoryBar) {
this.initEchartsCategoryBar(chartParams)
} else{
this.initECharts(chartParams)
}
@@ -1646,6 +1653,328 @@ export default {
}, 250)
})
},
handleTimeChartOption(chartParams,dataArray){
let direction = 'vertical'
if(chartParams.direction){
direction = chartParams.direction
if(direction=='horizontal'){//柱状图水平方向
this.chartOption.xAxis = {
axisTick: { show: false },
axisLine: { show: false },
type: 'value',
axisLabel: {
formatter: function (value, index, a, b) {
return unitConvert(value, unitTypes.number).join(' ')
}
},
}
this.chartOption.yAxis = {
type: 'category',
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
interval: 0,
//rotate: -40, //设置日期显示样式（倾斜度）
formatter: function (value) {//在这里写你需要的时间格式
return window.$dayJs.tz(Number(value)).format('M/D H:m')
}
},
axisPointer: {//y轴上显示指针对应的值
show: true,
},
}
} else if(direction=='vertical'){//柱状图竖直方向
this.chartOption.yAxis = {
axisTick: { show: false },
axisLine: { show: false },
type: 'value',
axisLabel: {
formatter: function (value, index, a, b) {
return unitConvert(value, unitTypes.number).join(' ')
}
},
minInterval: 1
}
this.chartOption.xAxis = {
type: 'category',
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
interval: 0,
//rotate: -40, //设置日期显示样式（倾斜度）
formatter: function (value) {//在这里写你需要的时间格式
return window.$dayJs.tz(Number(value)).format('M/D H:m')
}
},
axisPointer: {//y轴上显示指针对应的值
show: true,
},
}
}
}
let itemColorAlternately = false//true|false 柱体色是否轮替
if(chartParams.itemColorAlternately){
itemColorAlternately = chartParams.itemColorAlternately
}
this.chartOption.tooltip = {
...this.chartOption.tooltip,
formatter: (direction=='horizontal')?timeHorizontalFormatter:timeVerticalFormatter
}
this.chartOption.series = {
...this.chartOption.series[0],
name: this.chartInfo.name,
data: dataArray,
itemStyle: {
color: function(params) {
if(itemColorAlternately){
return getCharBartColor([params.dataIndex])
}else {
return getCharBartColor(0)
}
},
}
}
},
initEchartsTimeBar (chartParams) {
const queryParams = { ...this.queryTimeRange, ...this.entity }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
if (this.$_.isEmpty(response.data.result)) {
this.noData = true
return
} else {
this.noData = false
}
let dataArray = []
if(chartParams.direction=='vertical') {//柱状图竖直方向
dataArray = response.data.result[0].values.map((r, i) => {
return [Number(r[0]),Number(r[1]),chartParams.unitType]
})
}else if(chartParams.direction=='horizontal') {//柱状图水平方向
dataArray = response.data.result[0].values.map((r, i) => {
return [ Number(r[1]),Number(r[0]),chartParams.unitType]
})
}
this.handleTimeChartOption(chartParams,dataArray)
} else {
this.isError = true
this.noData = true
this.errorInfo = response.msg || response.message || 'Unknown'
//产生测试数据
this.initTestTimeBarData(chartParams)
}
this.myChart.setOption(this.chartOption)
}).finally(() => {
setTimeout(() => {
this.loading = false
this.$nextTick(() => {
this.echartsResize()
})
}, 250)
})
},
initTestTimeBarData(chartParams){
this.noData = false
let data = [[1612113120000, "9"], [1612113220000, "2"],[1612113320000, "3"], [1612113420000, "4"],[1612113520000, "1"],[1612113620000, "5"],[1612113720000, "7"],[1612113820000, "9"]]
let dataArray = []
if(chartParams.direction=='vertical') {//柱状图竖直方向
dataArray = data.map((r, i) => {
return [r[0],Number(r[1]),chartParams.unitType]
})
}else if(chartParams.direction=='horizontal') {//柱状图水平方向
dataArray = data.map((r, i) => {
return [ Number(r[1]),r[0],chartParams.unitType]
})
}
this.handleTimeChartOption(chartParams,dataArray)
},
initEchartsCategoryBar (chartParams) {
const queryParams = { ...this.queryTimeRange, ...this.entity }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
if (this.$_.isEmpty(response.data.result)) {
this.noData = true
return
} else {
this.noData = false
}
let dataArray = []
if(chartParams.direction=='horizontal'){//柱状图水平方向
dataArray = response.data.result.map((r, i) => {return [r.num,r.name]})
} else if(chartParams.direction=='vertical'){//柱状图竖直方向
dataArray = response.data.result.map((r, i) => {return [r.name,r.num]})
}
this.handleCategoryChartOption(chartParams,dataArray)
} else {
this.isError = true
this.noData = true
this.errorInfo = response.msg || response.message || 'Unknown'
//产生测试数据
this.initTestCategoryBarData(chartParams)
}
this.myChart.setOption(this.chartOption)
}).finally(() => {
setTimeout(() => {
this.loading = false
this.$nextTick(() => {
this.echartsResize()
})
}, 250)
})
},
handleCategoryChartOption(chartParams,dataArray){
let xType = 'category'
let yType = 'value'
let direction = 'vertical'
if(chartParams.direction){
direction = chartParams.direction
if(direction=='horizontal'){//柱状图水平方向
xType = 'value'
yType = 'category'
} else if(direction=='vertical'){//柱状图竖直方向
xType = 'category'
yType = 'value'
}
}
let itemColorAlternately = false//true|false 柱体色是否轮替
if(chartParams.itemColorAlternately){
itemColorAlternately = chartParams.itemColorAlternately
}
this.chartOption.tooltip = {
...this.chartOption.tooltip,
formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter,
}
this.chartOption.xAxis = {
...this.chartOption.xAxis,
type: xType
}
this.chartOption.yAxis = {
...this.chartOption.yAxis,
type: yType
}
this.chartOption.series = {
...this.chartOption.series[0],
data: dataArray,
itemStyle: {
color: function(params) {
if(itemColorAlternately){
return getCharBartColor([params.dataIndex])
}else {
return getCharBartColor(0)
}
},
}
}
},
initTestCategoryBarData(chartParams){
this.noData = false
let xType = 'category'
let yType = 'value'
let direction = 'vertical'
if(chartParams.direction){
direction = chartParams.direction
if(direction=='horizontal'){//柱状图水平方向
xType = 'value'
yType = 'category'
} else if(direction=='vertical'){//柱状图竖直方向
xType = 'category'
yType = 'value'
}
}
let itemColorAlternately = false//true|false 柱体色是否轮替
if(chartParams.itemColorAlternately){
itemColorAlternately = chartParams.itemColorAlternately
}
let dataArray = []
if(direction=='horizontal'){//柱状图水平方向
dataArray = [
[240,'中国出版集团公司'],
[200,'中国铁路总公司'],
[175,'中国烟草总公司'],
[140,'中国邮政集团公司'],
[99,'中国石油天然气集团公司']
]
} else if(direction=='vertical'){//柱状图竖直方向
dataArray = [
['中国出版集团公司',240],
['中国铁路总公司',200],
['中国烟草总公司',175],
['中国邮政集团公司',140],
['中国石油天然气集团公司',99]
]
}
this.chartOption = {
tooltip: {
appendToBody: true,
trigger: 'axis',
textStyle: {
width: '20px',
overflow: 'truncate'
},
formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter,
show: true,
className: 'nz-chart-tooltip',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
},
xAxis:{
type: xType,
axisTick: { show: false },
axisLine: { show: false }
},
yAxis:{
type: yType,
axisTick: { show: false },
axisLine: { show: false }
},
grid: {
top: 20,
left: 10,
right: 25,
bottom: 20,
containLabel:true
},
color:chartBarColor,
series: [{
barWidth: 15,
data: dataArray,
type: 'bar',
label: {show: false},
barCategoryGap: '10%',
itemStyle: {
color: function(params) {
if(itemColorAlternately){
return getCharBartColor([params.dataIndex])
}else {
return getCharBartColor(0)
}
},
}
}]
}
},
initEchartsWithStatistics (chartParams) {
const queryParams = { ...this.queryTimeRange, ...this.entity }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
@@ -1959,6 +2288,8 @@ export default {
chartActiveIpTableOrderOptions,
chartPieTableTopOptions,
isEcharts: isEcharts(props.chart.type),
isEchartsTimeBar:isEchartsTimeBar(props.chart.type),
isEchartsCategoryBar:isEchartsCategoryBar(props.chart.type),
isEchartsWithTable: isEchartsWithTable(props.chart.type),
isEchartsWithStatistics: isEchartsWithStatistics(props.chart.type),
isSingleValue: isSingleValue(props.chart.type),