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

0
2.md
View File

4
README.md
View File

@@ -29,7 +29,7 @@ npm run lint
### 3.图表组件库
图表：echarts5.0
地图：amCharts
地图：amCharts4
拖拽 & Resize：Vue-grid-layout  https://jbaysolutions.github.io/vue-grid-layout/guide/
### 4.响应式方案
@@ -51,7 +51,7 @@ https://www.lodashjs.com/
多个单词时，应该以高阶的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾
eg：`SearchButtonClear.vue` 反例：`ClearSearchButton.vue`
- **文件夹**
使用小写，单词间使用连字符`-`连接，或使用驼峰格式
使用小写，单词间使用连字符`-`连接，或使用驼峰格式
eg：`right-box`、`rightBox`

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

92
src/views/entityExplorer/entityList/Row.vue
View File

@@ -101,17 +101,17 @@
<!-- 曲线-->
<div
class="row__charts"
:id="`entityDetailSend${entityType}`"
:id="`entityDetailSend${entityType}${listMode}`"
v-if="entityData.entityType === 'domain'"
></div>
<div
class="row__charts"
:id="`entityDetailSend${entityType}`"
:id="`entityDetailSend${entityType}${listMode}`"
v-if="entityData.entityType === 'app'"
></div>
<div
class="row__charts"
:id="`entityDetailSend${entityType}`"
:id="`entityDetailSend${entityType}${listMode}`"
v-if="entityData.entityType === 'ip'"
></div>
</div>
@@ -136,17 +136,17 @@
<div
class="row__charts"
:id="`entityDetailReceived${entityType}`"
:id="`entityDetailReceived${entityType}${listMode}`"
v-if="entityData.entityType === 'domain'"
></div>
<div
class="row__charts"
:id="`entityDetailReceived${entityType}`"
:id="`entityDetailReceived${entityType}${listMode}`"
v-if="entityData.entityType === 'app'"
></div>
<div
class="row__charts"
:id="`entityDetailReceived${entityType}`"
:id="`entityDetailReceived${entityType}${listMode}`"
v-if="entityData.entityType === 'ip'"
></div>
</div>
@@ -166,10 +166,9 @@
</div>
<div
class="show-detail"
:style="{ visibility: !isCollapse ? 'visible' : 'hidden' }"
@click="showDetail"
>
{{ $t('overall.detail') }}>>
{{ $t('overall.detail') }}>
</div>
</div>
</div>
@@ -188,29 +187,24 @@
</template>
<script>
import entityListMixin from './entityListMixin'
import DetailOverview from '@/views/entityExplorer/entityList/detailOverview/DetailOverview'
import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import entityDetailMixin from './detailOverview/entityDetailMixin'
import entityListMixin from './entityListMixin'
import relatedServer from '@/mixins/relatedServer'
import { api } from '@/utils/api'
export default {
name: 'Row',
props: {
index: Number,
timeFilter: Object
timeFilter: Object,
listMode: String
},
components: {
DetailOverview
},
mixins: [entityListMixin, entityDetailMixin, relatedServer],
mixins: [entityListMixin, relatedServer],
data () {
return {
isCollapse: true, // 是否是折叠状态
trafficUrl: '',
entityType: ''
isCollapse: true // 是否是折叠状态
}
},
computed: {
@@ -236,58 +230,6 @@ export default {
return '-'
}
}
},
entityType () {
let type
switch (this.entityData.entityType) {
case 'ip': {
type = this.entityData.ipAddr
break
}
case 'domain': {
type = this.entityData.domainName
break
}
case 'app': {
type = this.entityData.appName
break
}
default:
break
}
this.entityType = type
return type
}
},
watch: {
entityData: {
deep: true,
handler (n) {
if (n.entityType) {
switch (n.entityType) {
case 'ip': {
this.trafficUrl = api.entityIpDetailTraffic
break
}
case 'domain': {
this.trafficUrl = api.entityDomainDetailTraffic
break
}
case 'app': {
this.trafficUrl = api.entityAppDetailTraffic
break
}
default:
break
}
}
}
}
},
setup () {
return {
unitConvert,
unitTypes
}
},
methods: {
@@ -299,16 +241,6 @@ export default {
/* 设为折叠状态 */
collapse () {
this.isCollapse = true
},
getQueryParams () {
const queryParams = {
startTime: parseInt(this.timeFilter.startTime / 1000),
endTime: parseInt(this.timeFilter.endTime / 1000),
appName: this.entityType,
domain: this.entityType,
ip: this.entityType
}
return queryParams
}
}
}

11
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -224,7 +224,7 @@ export default {
icon: 'cn-icon cn-icon-time',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.avgRoundTripTime'
},
{
@@ -232,7 +232,7 @@ export default {
icon: 'cn-icon cn-icon-http',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.httpResponseLatency'
},
{
@@ -240,7 +240,7 @@ export default {
icon: 'cn-icon cn-icon-ssl',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.sslConLatency'
},
{
@@ -248,7 +248,7 @@ export default {
icon: 'cn-icon cn-icon-package-loss',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.sequenceGapLossPercent'
},
{
@@ -256,7 +256,7 @@ export default {
icon: 'cn-icon cn-icon-upload',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.pktRetransPercent'
}
],
@@ -295,6 +295,7 @@ export default {
this.$nextTick(() => {
setTimeout(() => {
this.chartGetMap()
this.queryRelated()
}, 250)
})
},

11
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -229,7 +229,7 @@ export default {
icon: 'cn-icon cn-icon-time',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.avgRoundTripTime'
},
{
@@ -237,7 +237,7 @@ export default {
icon: 'cn-icon cn-icon-http',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.httpResponseLatency'
},
{
@@ -245,7 +245,7 @@ export default {
icon: 'cn-icon cn-icon-ssl',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.sslConLatency'
},
{
@@ -253,7 +253,7 @@ export default {
icon: 'cn-icon cn-icon-package-loss',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.sequenceGapLossPercent'
},
{
@@ -261,7 +261,7 @@ export default {
icon: 'cn-icon cn-icon-upload',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.pktRetransPercent'
}
],
@@ -316,6 +316,7 @@ export default {
setTimeout(() => {
this.chartGetMap()
this.getBasicProperties()
this.queryRelated()
}, 250)
})
},

11
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -211,7 +211,7 @@ export default {
icon: 'cn-icon cn-icon-time',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.avgRoundTripTime'
},
{
@@ -219,7 +219,7 @@ export default {
icon: 'cn-icon cn-icon-http',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.httpResponseLatency'
},
{
@@ -227,7 +227,7 @@ export default {
icon: 'cn-icon cn-icon-ssl',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.sslConLatency'
},
{
@@ -235,7 +235,7 @@ export default {
icon: 'cn-icon cn-icon-package-loss',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.sequenceGapLossPercent'
},
{
@@ -243,7 +243,7 @@ export default {
icon: 'cn-icon cn-icon-upload',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.pktRetransPercent'
}
],
@@ -302,6 +302,7 @@ export default {
this.$nextTick(() => {
setTimeout(() => {
this.chartGetMap()
this.queryRelated()
}, 250)
})
},

235
src/views/entityExplorer/entityList/entityListMixin.js
View File

@@ -5,17 +5,21 @@ import * as echarts from 'echarts'
import { entityListLineOption } from '@/views/charts/charts/chart-options'
import { riskLevelMapping, unitTypes } from '@/utils/constants'
import { getSecond } from '@/utils/date-util'
import unitConvert from '@/utils/unit-convert'
export default {
props: {
entity: Object,
timeFilter: {},
listMode: ''
listMode: String
},
data () {
return {
entityData: {},
chartOption: null
trafficUrl: '',
chartOption: null,
unitTypes,
unitConvert
}
},
computed: {
@@ -38,6 +42,26 @@ export default {
}
return className
},
entityType () {
let type
switch (this.entityData.entityType) {
case 'ip': {
type = this.entityData.ipAddr
break
}
case 'domain': {
type = this.entityData.domainName
break
}
case 'app': {
type = this.entityData.appName
break
}
default:
break
}
return type
},
entityName () {
let name
switch (this.entityData.entityType) {
@@ -57,25 +81,6 @@ export default {
}
return name
},
queryUrl () {
let url
switch (this.entityData.entityType) {
case ('ip'): {
url = api.ipBytes
break
}
case ('domain'): {
url = api.domainBytes
break
}
case ('app'): {
url = api.appBytes
break
}
default: break
}
return url
},
appRisk () {
return function (level) {
const m = riskLevelMapping.find(mapping => {
@@ -128,26 +133,6 @@ export default {
})
window.open(href, '_blank')
},
queryTraffic () {
const queryParams = {
startTime: parseInt(this.timeFilter.startTime / 1000),
endTime: parseInt(this.timeFilter.endTime / 1000),
entityType: this.entityData.entityType,
name: this.entityName
}
get(api.entityTraffic, queryParams).then(response => {
if (response.code === 200) {
response.data.result.forEach(t => {
if (t.legend === 'bytesSentRate') {
this.entityData.bytesSentRate = t.aggregation.last
}
if (t.legend === 'bytesReceivedRate') {
this.entityData.bytesReceivedRate = t.aggregation.last
}
})
}
})
},
querySecurity () {
const queryParams = {
startTime: getSecond(this.timeFilter.startTime),
@@ -174,7 +159,7 @@ export default {
}
get(url, queryParams).then(response => {
if (response.code === 200) {
this.entityData.securityCount = response.data.result && response.data.result.length
this.entityData.securityCount = response.data.result ? response.data.result.length : 0
}
})
},
@@ -204,99 +189,129 @@ export default {
}
get(url, queryParams).then(response => {
if (response.code === 200) {
this.entityData.performanceCount = response.data.result && response.data.result.length
this.entityData.performanceCount = response.data.result ? response.data.result.length : 0
}
})
},
queryTrafficLine () {
let chartOption
this.chartOption = this.$_.cloneDeep(entityListLineOption)
get(this.queryUrl, this.queryParams).then(response => {
if (response.code === 200) {
const seriesTemplate = this.chartOption.series[0]
const series = response.data.result.map((r, i) => {
if (r.legend === 'bytes_sent_rate') {
return {
...seriesTemplate,
name: this.$t('entities.sentThroughput'), // 'bytes_sent_rate',//legendMapping[`ip_${r.legend}`],
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
getQueryParams () {
return {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
appName: this.entityType,
domain: this.entityType,
ip: this.entityType
}
},
queryEntityDetailTraffic () {
get(this.trafficUrl, this.getQueryParams()).then(response => {
if (response.code === 200 && response.data.result && response.data.result.length > 0) {
let sentSeries
let receivedSeries
response.data.result.forEach(t => {
if (t.legend === 'bytesRate') {
this.entityData.max = t.aggregation.max
this.entityData.avg = t.aggregation.avg
this.entityData.p50 = t.aggregation.p50
this.entityData.p90 = t.aggregation.p90
} else if (t.legend === 'bytesSentRate') {
this.entityData.bytesSentRate = _.nth(t.values, -3)[1]
sentSeries = {
name: this.$t('entities.sentThroughput'),
type: 'line',
legendHoverLink: false,
itemStyle: {
normal: {
color: '#69b072',
lineStyle: {
width: 1.5
width: 1
}
}
},
smooth: true,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#f0fff8'
},
{
offset: 1,
color: '#f0fff8'
}
])
}
color: '#69b072',
data: _.dropRight(t.values, 2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
showSymbol: false
}
} else if (r.legend === 'bytes_received_rate') {
return {
...seriesTemplate,
name: this.$t('entities.receivedThroughput'), // legendMapping[`ip_${r.legend}`],
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
} else if (t.legend === 'bytesReceivedRate') {
this.entityData.bytesReceivedRate = t.aggregation.last
receivedSeries = {
name: this.$t('entities.receivedThroughput'),
type: 'line',
legendHoverLink: false,
itemStyle: {
normal: {
color: '#7899c6',
lineStyle: {
width: 1.5
width: 1
}
}
},
smooth: true,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#f0f4ff'
},
{
offset: 1,
color: '#f0f4ff'
}
])
}
color: '#7899c6',
data: t.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
showSymbol: false
}
}
return {}
})
chartOption = {
...this.chartOption,
series
if (this.listMode === 'block') {
const chart = echarts.init(document.getElementById(`entityListChart${this.entityName}${this.listMode}`))
chart.setOption({
...this.chartOption,
series: [sentSeries, receivedSeries]
})
} else if (this.listMode === 'list') {
const sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}${this.listMode}`))
const receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}${this.listMode}`))
sentChart.setOption({
...this.chartOption,
series: [sentSeries]
})
receivedChart.setOption({
...this.chartOption,
series: [receivedSeries]
})
}
}
}).finally(() => {
this.$nextTick(() => {
if (chartOption) {
const myChart = echarts.init(document.getElementById(`entityListChart${this.entityName}`))
myChart.setOption(chartOption)
}
})
setTimeout(() => {
try {
this.$nextTick(() => {
this.sentChart && this.sentChart.resize()
this.receivedChart && this.receivedChart.resize()
})
} catch (e) {}
}, 250)
})
}
},
mounted () {
this.entityData = _.cloneDeep(this.entity)
setTimeout(() => { this.queryTraffic() })
setTimeout(() => { this.querySecurity() })
setTimeout(() => { this.queryPerformance() })
if (this.listMode === 'block') {
setTimeout(() => { this.queryTrafficLine() })
watch: {
entityData: {
deep: true,
handler (n) {
if (n.entityType) {
switch (n.entityType) {
case 'ip': {
this.trafficUrl = api.entityIpDetailTraffic
break
}
case 'domain': {
this.trafficUrl = api.entityDomainDetailTraffic
break
}
case 'app': {
this.trafficUrl = api.entityAppDetailTraffic
break
}
default:
break
}
}
}
}
},
mounted () {
this.chartOption = _.cloneDeep(entityListLineOption)
this.entityData = _.cloneDeep(this.entity)
setTimeout(() => {
this.querySecurity()
this.queryEntityDetailTraffic()
this.queryPerformance()
})
}
}