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

fix: 实体代码整理

Browse Source
This commit is contained in:
chenjinsong
2022-03-27 13:04:47 +08:00
parent 8513bc4f20
commit 5fbd73103f
15 changed files with 384 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -299,13 +299,12 @@ import {
isMapLine,
isMapBlock,
isSingleValueWithEcharts,
isSingleValueWithEchartsTemp,
isSingleValueWithPercent,
isRelationShip,
isTabs,
isGroup,
isSankey,
isIpBasicInfo,
isIpOpenPort,
isIpHostedDomain,
isDomainWhois,
isDomainDnsRecord,
@@ -441,9 +440,7 @@ export default {
isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
isSingleValue: isSingleValue(props.chartInfo.type),
isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(
props.chartInfo.type
),
isSingleValueWithPercent: isSingleValueWithPercent(props.chartInfo.type),
isRelationShip: isRelationShip(props.chartInfo.type),
isTable: isTable(props.chartInfo.type),
isBasicTable: isBasicTable(props.chartInfo.type),
@@ -458,7 +455,6 @@ export default {
isSankey: isSankey(props.chartInfo.type),
isIpBasicInfo: isIpBasicInfo(props.chartInfo.type),
isIpHostedDomain: isIpHostedDomain(props.chartInfo.type),
isIpOpenPort: isIpOpenPort(props.chartInfo.type),
isDomainWhois: isDomainWhois(props.chartInfo.type),
isDomainDnsRecord: isDomainDnsRecord(props.chartInfo.type),
isCryptocurrencyEventList: isCryptocurrencyEventList(

12
src/views/charts/Panel.vue
View File

@@ -45,7 +45,11 @@ import { ref } from 'vue'
import { panelTypeAndRouteMapping } from '@/utils/constants'
import { api, getPanelList, getChartList } from '@/utils/api'
import { getNowTime } from '@/utils/date-util'
import { getGroupHeight, getTypeCategory } from '@/views/charts/charts/tools'
import {
isGroup,
isBlock,
getGroupHeight
} from './charts/tools'
export default {
name: 'Panel',
@@ -115,7 +119,7 @@ export default {
recursionParamsConvert (chart) {
chart.params = chart.params ? JSON.parse(chart.params) : {}
chart.firstShow = false
if (chart.type === 94) {
if (isGroup(chart.type)) {
chart.oldH = chart.h
/* chart.params = {
collapse: false
@@ -125,10 +129,10 @@ export default {
chart.h = 1
}
}
if (chart.type === 95) {
if (isBlock(chart.type)) {
let sumGroup = 0
chart.children.forEach(item => {
if (item.type === 94) {
if (isGroup(item.type)) {
sumGroup++
}
})

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

@@ -26,7 +26,7 @@
<!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
<chart
ref="chart"
v-if="((!isGroup) || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle "
v-if="(!isGroup || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle "
:chart-data="chartData"
:result-type="resultType"
:chart-info="chartInfo"
@@ -65,13 +65,13 @@ import {
isMapLine,
isMapBlock,
isSingleValueWithEcharts,
isSingleValueWithEchartsTemp,
isSingleValueWithPercent,
isRelationShip,
isTabs,
isGroup,
isSankey,
isIpBasicInfo,
isIpOpenPort,
isIpOpenPortBar,
isIpHostedDomain,
isDomainWhois,
isDomainDnsRecord,
@@ -212,7 +212,7 @@ export default {
}
this.chartData = response.data.result
this.resultType = response.data.resultType
if (this.chartInfo.type === 12) {
if (isEchartsWithStatistics(this.chartInfo.type)) {
const newArr = []
_.forEach(this.chartData, function (value, key) {
_.forEach(value.values, function (value, key) {
@@ -251,16 +251,16 @@ export default {
}
}).finally(() => {
setTimeout(() => {
if(!(this.chartInfo.type === 33 || this.chartInfo.type === 34) ){
if(!(isIpHostedDomain(this.chartInfo.type) || isAppRelatedDomain(this.chartInfo.type)) ){
this.loading = false
}else if(!this.chartData || this.chartData.length === 0){
this.loading = false
}
}, 200)
})
} else if (this.chartInfo.type === 94) {
} else if (isGroup(this.chartInfo.type)) {
this.chartInfo.children = [...this.chartInfo.children]
} else if (this.chartInfo.type === 95) {
} else if (isBlock(this.chartInfo.type)) {
if (!this.chartInfo.firstShow) {
this.chartInfo.firstShow = true
} else {
@@ -410,7 +410,7 @@ export default {
isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
isSingleValue: isSingleValue(props.chartInfo.type),
isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(props.chartInfo.type),
isSingleValueWithPercent: isSingleValueWithPercent(props.chartInfo.type),
isRelationShip: isRelationShip(props.chartInfo.type),
isTable: isTable(props.chartInfo.type),
isActiveIpTable: isActiveIpTable(props.chartInfo.type),
@@ -424,7 +424,7 @@ export default {
isSankey: isSankey(props.chartInfo.type),
isIpBasicInfo: isIpBasicInfo(props.chartInfo.type),
isIpHostedDomain: isIpHostedDomain(props.chartInfo.type),
isIpOpenPort: isIpOpenPort(props.chartInfo.type),
isIpOpenPortBar: isIpOpenPortBar(props.chartInfo.type),
isDomainWhois: isDomainWhois(props.chartInfo.type),
isDomainDnsRecord: isDomainDnsRecord(props.chartInfo.type),
isCryptocurrencyEventList: isCryptocurrencyEventList(props.chartInfo.type),

15
src/views/charts/PanelChartList.vue
View File

@@ -22,7 +22,7 @@
:y="item.y"
:static="item.static"
:ref="'grid-item' + item.id"
:isResizable = "item.type === 'group' ? false: null"
:isResizable="isGroup ? false: null"
dragAllowFrom=".chart-header"
dragIgnoreFrom=".chart-header__tools"
v-bind="anchorPoint(item)"
@@ -188,18 +188,7 @@ export default {
})
setTimeout(() => {
this.copyDataList.forEach(item => {
// if (item.type === 95) {
// console.log(item.h, item.name)
// item.children.forEach(children => {
// console.log(children.name, children.h, children.y)
// })
// let parentH = 1.5
// parentH += getGroupHeight(item.children)
// if (parentH !== item.h) {
// item.h = parentH
// }
// }
if (item.type === 94 && !item.firstShow) {
if (isGroup(item.type) && !item.firstShow) {
item.firstShow = true
this.copyDataList = [...this.copyDataList]
this.emitter.emit('groupParentCalcHeight', { chart: item, childrenList: this.copyDataList })

18
src/views/charts/charts/ChartBlock.vue
View File

@@ -10,24 +10,36 @@
<script>
import chartMixin from '@/views/charts/charts/chart-mixin'
import _ from 'lodash'
export default {
name: 'ChartBlock',
mixins: [chartMixin],
data () {
return {
dataList: [],
time: {},
firstShow: false
}
},
mounted () {
this.dataList = JSON.parse(JSON.stringify(this.chartInfo.children))
this.firstShow = true
},
methods: {
reload () {
this.dataList = JSON.parse(JSON.stringify(this.chartInfo.children))
this.dataList = _.cloneDeep(this.dataList)
}
},
setup (props) {
const copyAndSort = dataList => {
const list = _.cloneDeep(dataList)
return list.sort((data1, data2) => {
return data1.x - data2.x
})
}
const dataList = copyAndSort(props.chartInfo.children)
return {
copyAndSort,
dataList
}
}
}

106
src/views/charts/charts/ChartMap.vue
View File

@@ -109,67 +109,65 @@ export default {
chart.geodata = getGeoData(storageKey.iso36112WorldLow)
chart.projection = new am4Maps.projections.Miller()
this.myChart = chart
setTimeout(() => {
this.polygonSeries = this.polygonSeriesFactory()
this.polygonSeries = this.polygonSeriesFactory()
if (this.isMapPoint) {
this.worldImageSeries = this.imageSeriesFactory()
}
if (this.isMapPoint) {
this.worldImageSeries = this.imageSeriesFactory()
}
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
// 地图点击事件
if (this.isMapBlock) {
this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
const countryId = ev.target.dataItem.dataContext.id
if (countryId) {
ev.target.series.chart.zoomToMapObject(ev.target)
ev.target.isHover = false
const geoData = getGeoData(countryId)
if (geoData) {
this.countrySeries = this.polygonSeriesFactory()
this.countrySeries.geodata = geoData
this.polygonSeries.hide()
const country = ev.target.dataItem.dataContext.serverCountry
const queryParams = { ...this.queryParams, country }
const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
}
}
})
} else if (this.isMapPoint) {
this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
const countryId = ev.target.dataItem.dataContext.id
// 地图点击事件
if (this.isMapBlock) {
this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
const countryId = ev.target.dataItem.dataContext.id
if (countryId) {
ev.target.series.chart.zoomToMapObject(ev.target)
ev.target.isHover = false
if (countryId) {
const targetMapObject = this.polygonSeries.getPolygonById(countryId)
targetMapObject.series.chart.zoomToMapObject(targetMapObject)
const geoData = getGeoData(countryId)
if (geoData) {
this.countrySeries = this.polygonSeriesFactory()
this.countrySeries.geodata = geoData
this.countryImageSeries = this.imageSeriesFactory()
this.polygonSeries.hide()
this.worldImageSeries.hide()
const country = ev.target.dataItem.dataContext.location
const queryParams = { ...this.queryParams, ipLocationCountry: country }
const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
}
const geoData = getGeoData(countryId)
if (geoData) {
this.countrySeries = this.polygonSeriesFactory()
this.countrySeries.geodata = geoData
this.polygonSeries.hide()
const country = ev.target.dataItem.dataContext.serverCountry
const queryParams = { ...this.queryParams, country }
const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
}
})
}
// dns地图legend上的数据
if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
setTimeout(() => {
this.chartInfo.params.legendUrl.forEach((url, i) => {
getData(url).then(data => {
this.legends[i].value = data
})
}
})
} else if (this.isMapPoint) {
this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
const countryId = ev.target.dataItem.dataContext.id
ev.target.isHover = false
if (countryId) {
const targetMapObject = this.polygonSeries.getPolygonById(countryId)
targetMapObject.series.chart.zoomToMapObject(targetMapObject)
const geoData = getGeoData(countryId)
if (geoData) {
this.countrySeries = this.polygonSeriesFactory()
this.countrySeries.geodata = geoData
this.countryImageSeries = this.imageSeriesFactory()
this.polygonSeries.hide()
this.worldImageSeries.hide()
const country = ev.target.dataItem.dataContext.location
const queryParams = { ...this.queryParams, ipLocationCountry: country }
const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
}
}
})
}
// dns地图legend上的数据
if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
setTimeout(() => {
this.chartInfo.params.legendUrl.forEach((url, i) => {
getData(url).then(data => {
this.legends[i].value = data
})
})
}
})
})
}
},
polygonSeriesFactory () {
const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())

61
src/views/charts/charts/ChartSingleValue.vue
View File

@@ -4,7 +4,7 @@
:class="singleValueClass(type)"
:style="{ backgroundColor: color }"
>
<div class="single-value-icon__box" v-if="type !== 54">
<div class="single-value-icon__box" v-if="!isCommon3SingleValue(type)">
<div
class="single-value__icon"
:style="`background-color: ${
@@ -17,7 +17,7 @@
></i>
</div>
</div>
<div class="single-value__content" v-if="type === 51">
<div class="single-value__content" v-if="isCommonSingleValue(type)">
<div class="content__data">
<span>{{
handleSingleValue[0] || handleSingleValue[0] === 0
@@ -34,7 +34,7 @@
</div>
<div
class="single-value__content single-value__content--with-chart"
v-if="type === 52"
v-if="isSingleValueWithEcharts(type)"
>
<div class="content__title">
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
@@ -61,7 +61,7 @@
<div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
</div>
</div>
<div class="single-value__content" v-if="type === 53">
<div class="single-value__content" v-if="isCommon2SingleValue(type)">
<div class="content__title">
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
@@ -76,7 +76,7 @@
<span class="single-value__unit">{{ handleSingleValue[1] }}</span>
</div>
</div>
<div class="single-value__content" v-if="type === 54">
<div class="single-value__content" v-if="isCommon3SingleValue(type)">
<div class="single-value-icon__box">
<div class="single-value__icon">
<!-- 使用图标-->
@@ -102,7 +102,7 @@
</div>
</div>
<div class="single-value__content" v-if="type === 55">
<div class="single-value__content" v-if="isSingleValueWithPercent(type)">
<div>
<div class="content__title">
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
@@ -131,8 +131,13 @@ import { unitTypes } from '@/utils/constants'
import { get } from '@/utils/http'
import { replaceUrlPlaceholder } from '@/utils/tools'
import * as echarts from 'echarts'
import { getOption, getChartColor } from '@/views/charts/charts/tools'
import _ from 'lodash'
import {
getOption,
getChartColor,
isCommonSingleValue,
isSingleValueWithEcharts,
isCommon2SingleValue, isSingleValueWithPercent, isCommon3SingleValue
} from '@/views/charts/charts/tools'
export default {
name: 'chartSingleValue',
@@ -188,38 +193,30 @@ export default {
singleValueClass () {
return function (type) {
let c
switch (type) {
case 51: {
c = 'cn-chart__single-value--icon-left'
break
}
case 55: {
c = 'cn-chart__single-value--icon-doh'
break
}
case 52: {
c = 'cn-chart__single-value--chart'
break
}
case 53: {
c = 'cn-chart__single-value--icon-right'
break
}
case 54: {
c = 'cn-chart__single-value--icon-right--color'
break
}
default:
break
if (this.isCommonSingleValue(type)) {
c = 'cn-chart__single-value--icon-left'
} else if (this.isSingleValueWithEcharts(type)) {
c = 'cn-chart__single-value--chart'
} else if (this.isCommon2SingleValue(type)) {
c = 'cn-chart__single-value--icon-right'
} else if (this.isCommon3SingleValue(type)) {
c = 'cn-chart__single-value--icon-right--color'
} else if (this.isSingleValueWithPercent(type)) {
c = 'cn-chart__single-value--icon-doh'
}
return c
}
}
},
methods: {
isCommonSingleValue,
isSingleValueWithEcharts,
isCommon2SingleValue,
isCommon3SingleValue,
isSingleValueWithPercent,
chartSingleValueTotal () {
const chartParams = this.$_.get(this.chartInfo, 'params') || {}
if (this.type === 52) {
if (isSingleValueWithEcharts(this.type)) {
const dom = document.getElementById(`chart${this.chartInfo.id}`)
const myChart = echarts.init(dom)
this.chartOption = this.$_.cloneDeep(getOption(this.type))

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

@@ -17,43 +17,32 @@ export function getCharBartColor (index) {
}
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: 32, option: pieWithTable }, // 带表格饼图
{ value: 33, option: ipHostedDomain }, // ip详情--托管域名
{ value: 34, option: ipHostedDomain }, // app详情--相关域名
{ value: 42, option: relationShip }, // 关系图
{ value: 43, option: sankey }, // 桑基图
{ value: 52, option: singleValueLine } // 单值图中的折线图
{ value: 101, option: line }, // 常规折线图
{ value: 102, option: lineWithStatistics }, // 带统计表格的折线图
{ value: 103, option: lineStack }, // 折线堆叠图
{ value: 202, option: ipOpenPortBar }, // ip详情--开放端口的柱状图
{ value: 203, option: timeBar }, // 矿机所属单位
{ value: 204, option: categoryBar }, // 挖矿事件统计
{ value: 301, option: pieWithTable }, // 常规饼图
{ value: 302, option: pieWithTable }, // 带表格饼图
{ value: 303, option: ipHostedDomain }, // ip详情--托管域名
{ value: 304, option: ipHostedDomain }, // app详情--相关域名
{ value: 402, option: relationShip }, // 关系图
{ value: 403, option: sankey }, // 桑基图
{ value: 502, option: singleValueLine } // 单值图中的折线图
]
export function getOption (type) {
const mapping = typeOptionMappings.find(m => m.value === type)
return mapping && mapping.option ? _.cloneDeep(mapping.option) : null
}
/* 柱状图:挖矿事件统计(time类型柱状图) */
export function isEchartsTimeBar (type) {
return type === 23
}
/* 柱状图:矿机所属单位(category类型柱状图) */
export function isEchartsCategoryBar (type) {
return type === 24
}
export function isIpOpenPortBar (type) {
return type === 22
}
/* 饼图柱状图等 */
export function isEcharts (type) {
return type >= 11 && type <= 50
return type >= 101 && type <= 500
}
/* 地图 */
export function isMap (type) {
return type >= 1 && type <= 10
return type >= 1 && type <= 100
}
/* 连线地图 */
export function isMapLine (type) {
@@ -67,117 +56,137 @@ export function isMapBlock (type) {
export function isMapPoint (type) {
return type === 3
}
/* 普通折线图 */
export function isEchartsLine (type) {
return type === 11
}
/* 普通饼图 */
export function isEchartsPie (type) {
return type === 32
}
/* 带统计的折线图 */
export function isEchartsWithStatistics (type) {
return type === 12
}
/* 关系图 */
export function isRelationShip (type) {
return type === 42
}
/* 桑基图 */
export function isSankey (type) {
return type === 43
}
/* 单值 */
export function isSingleValue (type) {
return type >= 51 && type <= 60
}
/* 带折线图的单值 */
export function isSingleValueWithEcharts (type) {
return type === 52
}
/* 带折线图的单值 */
export function isSingleValueWithEchartsTemp (type) {
return type === 55
}
/* 带Table的饼图 */
export function isEchartsWithTable (type) {
return type === 31
}
/* table */
export function isTable (type) {
return type >= 61 && type <= 70
}
/* basic table */
export function isBasicTable (type) {
return type === 61
}
/* table */
export function isActiveIpTable (type) {
return type === 63
}
/* title */
export function isTitle (type) {
return type === 93
}
/* tabs */
export function isTabs (type) {
return type === 91
}
/* IP实体基本信息 */
export function isIpBasicInfo (type) {
return type === 4
}
/* 普通折线图 */
export function isEchartsLine (type) {
return type === 101
}
/* 带统计的折线图 */
export function isEchartsWithStatistics (type) {
return type === 102
}
/* IP实体开放端口 */
export function isIpOpenPort (type) {
return type === 22
export function isIpOpenPortBar (type) {
return type === 202
}
/* 柱状图:挖矿事件统计(time类型柱状图) */
export function isEchartsTimeBar (type) {
return type === 203
}
/* 柱状图:矿机所属单位(category类型柱状图) */
export function isEchartsCategoryBar (type) {
return type === 204
}
/* 带Table的饼图 */
export function isEchartsWithTable (type) {
return type === 301
}
/* 普通饼图 */
export function isEchartsPie (type) {
return type === 302
}
/* IP实体托管域名 */
export function isIpHostedDomain (type) {
return type === 33
return type === 303
}
/* APP实体相关域名 */
export function isAppRelatedDomain (type) {
return type === 34
return type === 304
}
/* APP实体基本信息 */
export function isAppBasicInfo (type) {
return type === 82
/* 关系图 */
export function isRelationShip (type) {
return type === 402
}
/* DOMAIN实体Whois */
export function isDomainWhois (type) {
return type === 83
/* 桑基图 */
export function isSankey (type) {
return type === 403
}
/* 单值 */
export function isSingleValue (type) {
return type >= 501 && type <= 600
}
/* 常规单值图 */
export function isCommonSingleValue (type) {
return type === 501
}
/* 带折线图的单值 */
export function isSingleValueWithEcharts (type) {
return type === 502
}
/* 常规单值图2 */
export function isCommon2SingleValue (type) {
return type === 503
}
/* 常规单值图3 */
export function isCommon3SingleValue (type) {
return type === 504
}
/* 带折线图的单值 */
export function isSingleValueWithPercent (type) {
return type === 505
}
/* table */
export function isTable (type) {
return type >= 601 && type <= 700
}
/* basic table */
export function isBasicTable (type) {
return type === 601
}
/* DOMAIN实体DNS记录 */
export function isDomainDnsRecord (type) {
return type === 62
return type === 602
}
/* table */
export function isActiveIpTable (type) {
return type === 603
}
/* APP实体基本信息 */
export function isAppBasicInfo (type) {
return type === 702
}
/* DOMAIN实体Whois */
export function isDomainWhois (type) {
return type === 703
}
/* 告警信息 */
export function isAlarmInfo (type) {
return type === 84
return type === 704
}
/* 近期挖矿事件 */
export function isCryptocurrencyEventList (type) {
return type === 85
return type === 705
}
/* 单支持情况统计 */
export function isSingleSupportStatistics (type) {
return type === 86
return type === 706
}
/* 两个支持情况统计 */
export function isTwoSupportStatistics (type) {
return type === 87
return type === 707
}
/* 域名递归解析 */
export function isDomainRecursiveResolve (type) {
return type === 88
return type === 708
}
/* tabs */
export function isTabs (type) {
return type === 801
}
/* title */
export function isTitle (type) {
return type === 803
}
/* 组 */
export function isGroup (type) {
return type === 94
return type === 804
}
/* 实体详情块 */
export function isBlock (type) {
return type === 95
return type === 805
}
/* 根据type获取图表分类 */
@@ -215,7 +224,7 @@ export function getLayout (type) {
if (!isSingleValue(type) && !isTitle(type)) {
layout.push(layoutConstant.HEADER)
}
if (type === 12 || type === 31) {
if (isEchartsWithStatistics(type) || isEchartsWithTable(type)) {
layout.push(layoutConstant.FOOTER)
}
return layout