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

CN-409 Entity Explorer--详情页图表开发

Browse Source
This commit is contained in:
hyx
2022-03-23 18:50:03 +08:00
parent af2544466f
commit 47a77d5870
5 changed files with 100 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -251,7 +251,9 @@ export default {
}
}).finally(() => {
setTimeout(() => {
this.loading = false
if(!(this.chartInfo.type === 33 || this.chartInfo.type === 34)){
this.loading = false
}
}, 200)
})
} else if (this.chartInfo.type === 94) {

78
src/views/charts/charts/ChartEchartAppRelateDomain.vue
View File

@@ -25,6 +25,7 @@ import {
ipHostedDomain
} from '@/views/charts/charts/options/pie'
import chartEchartMixin from './chart-echart-mixin'
import { get,post } from '@/utils/http'
export default {
name: 'ChartEchartAppRelateDomain',
@@ -38,26 +39,65 @@ export default {
methods: {
initEcharts (id) {
this.initDom(id, 2)
const chartParams = this.chartInfo.params
const domains = this.chartData.toString()
//const domains = "office.com,dbank.com"
this.$emit('showLoading', true)
this.chartOption.series[0].data = [
{
name: 'test1',
value: 32
},
{
name: 'test2',
value: 21
},
{
name: 'test3',
value: 20
},
{
name: 'test4',
value: 7
}
]
this.loadEchart(2)
let typeUrl = chartParams.byCategoryUrl.slice(0,chartParams.byCategoryUrl.indexOf('?'))
let reputationUrlUrl = chartParams.byReputationUrl.slice(0,chartParams.byReputationUrl.indexOf('?'))
const byType = new Promise(resolve => {
post(typeUrl, { domains: domains }).then(response => {
//post(replaceUrlPlaceholder(chartParams.byCategoryUrl, { domains: domains })).then(response => {
if (response.code === 200) {
if (this.$_.isEmpty(response.data.result)) {
// this.noData0 = true
} else {
// this.noData0 = false
//const chartOption = this.$_.cloneDeep(this.chartOption)
const data = response.data.result.map(d => {
return {
data: d,
name: d.categoryName,
value: parseInt(d.uniqDomains),
unitType: chartParams.unitType
}
})
this.chartOption.series[0].data = data
}
}
}).finally(() =>{
resolve()
})
})
const byReputation = new Promise(resolve => {
post(reputationUrlUrl, { domains: domains }).then(response => {
if (response.code === 200) {
if (this.$_.isEmpty(response.data.result)) {
// this.noData1 = true
} else {
// this.noData1 = false
//const chartOption = this.$_.cloneDeep(this.chartOption)
const data = response.data.result.map(d => {
return {
data: d,
name: d.reputationLevel,
value: parseInt(d.uniqDomains),
unitType: chartParams.unitType
}
})
this.chartOption2.series[0].data = data
//this.myChart2.setOption(chartOption)
}
}
}).finally(() =>{
resolve()
})
})
Promise.all([byType, byReputation]).finally(response => {
this.loadEchart(2)
})
}
}
}

39
src/views/charts/charts/ChartEchartIpHostedDomain.vue
View File

@@ -21,10 +21,6 @@
</template>
<script>
import * as echarts from 'echarts'
import {
ipHostedDomain
} from '@/views/charts/charts/options/pie'
import { replaceUrlPlaceholder } from '@/utils/tools'
import { get } from '@/utils/http'
import chartEchartMixin from './chart-echart-mixin'
@@ -43,57 +39,56 @@ export default {
initEcharts (id) {
this.initDom(id, 2)
const chartParams = this.chartInfo.params
this.$emit('showLoading', true)
const domains = this.chartData.toString()
const byType = new Promise(resolve => {
get(replaceUrlPlaceholder(chartParams.byTypeUrl, { ip: this.entity.ip })).then(response => {
get(replaceUrlPlaceholder(chartParams.byCategoryUrl, { domains: domains })).then(response => {
if (response.code === 200) {
if (this.$_.isEmpty(response.data.result)) {
// this.noData0 = true
} else {
// this.noData0 = false
const chartOption = this.$_.cloneDeep(this.chartOption)
//chartOption = this.$_.cloneDeep(this.chartOption)
const data = response.data.result.map(d => {
return {
data: d,
name: d.category,
value: parseInt(d.count),
name: d.categoryName,
value: parseInt(d.uniqDomains),
unitType: chartParams.unitType
}
})
chartOption.series[0].data = data
this.myChart.setOption(chartOption)
this.chartOption.series[0].data = data
//this.myChart.setOption(this.chartOption)
}
}
resolve()
resolve()
})
})
const byCredit = new Promise(resolve => {
get(replaceUrlPlaceholder(chartParams.byCreditUrl, { ip: this.entity.ip })).then(response => {
get(replaceUrlPlaceholder(chartParams.byReputationUrl, { domains: domains })).then(response => {
if (response.code === 200) {
if (this.$_.isEmpty(response.data.result)) {
// this.noData1 = true
} else {
// this.noData1 = false
const chartOption = this.$_.cloneDeep(this.chartOption)
//this.chartOption2 = this.$_.cloneDeep(this.chartOption)
const data = response.data.result.map(d => {
return {
data: d,
name: d.reputation,
value: parseInt(d.count),
name: d.reputationLevel,
value: parseInt(d.uniqDomains),
unitType: chartParams.unitType
}
})
chartOption.series[0].data = data
this.myChart2.setOption(chartOption)
this.chartOption2.series[0].data = data
// this.myChart2.setOption(this.chartOption2)
}
}
resolve()
resolve()
})
})
Promise.all([byType, byCredit]).finally(response => {
setTimeout(() => {
this.$emit('showLoading', false)
}, 1000)
this.loadEchart(2)
})
}
}

6
src/views/charts/charts/chart-echart-mixin.js
View File

@@ -31,7 +31,8 @@ export default {
},
data () {
return {
chartOption: null
chartOption: null,
chartOption2: null
}
},
methods: {
@@ -41,6 +42,7 @@ export default {
const dom2 = document.getElementById(id + '-1')
!this.myChart && (this.myChart = echarts.init(dom))
!this.myChart2 && (this.myChart2 = echarts.init(dom2))
this.chartOption2 = this.$_.cloneDeep(getOption(this.chartInfo.type))
} else {
const dom = document.getElementById(id)
!this.myChart && (this.myChart = echarts.init(dom))
@@ -81,7 +83,7 @@ export default {
this.myChart.setOption(this.chartOption)
this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart))
if (chartNum && chartNum == 2) {
this.myChart2.setOption(this.chartOption)
this.myChart2.setOption(this.chartOption2)
this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
}
const _this = this

20
src/views/charts/charts/options/pie.js
View File

@@ -56,7 +56,7 @@ export const ipHostedDomain = {
legend: {
orient: 'vertical',
type: 'plain',
right: '8%',
left: '67%',
top: 'middle',
icon: 'circle',
itemWidth: 10, // 设置宽度
@@ -64,7 +64,10 @@ export const ipHostedDomain = {
itemGap: 20,
tooltip: {
show: true
}
},
formatter: function (name) {
return name.length > 9 ? name.substr(0, 9) + '...' : name
},
},
series: [
{
@@ -76,9 +79,20 @@ export const ipHostedDomain = {
label: {
formatter: '{d}%'
},
//right:'20%',
labelLine:{
length:6,
length2:6
} ,
tooltip: {
formatter: function (param, index, callback) {
return `${param.name}: ${unitConvert(param.value, param.data.unitType).join(' ')}`
if(param.data.unitType){
let tip = unitConvert(param.value, param.data.unitType)
tip = tip?tip.join(' '):''
return `${param.name}: ${tip}`
}else {
return `${param.name}: ${param.value}`
}
}
},
emphasis: {