CN-514 DNS Dashboard“自建域名服务器”图表更换
This commit is contained in:
hyx
@@ -68,8 +68,8 @@ export default {
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: this.$t('dns.selfBuiltDomainServers'),
|
||||
type: dnsServerRole.SBDNS,
|
||||
name: this.$t('dns.rtMirrors'),
|
||||
type: dnsServerRole.RTDNSM,
|
||||
value: 0
|
||||
}
|
||||
],
|
||||
@@ -90,13 +90,13 @@ export default {
|
||||
background: '#FFE1B5',
|
||||
border: '#FFB84E'
|
||||
},
|
||||
{
|
||||
background: '#FDC6C6',
|
||||
border: '#FA7777'
|
||||
},
|
||||
{
|
||||
background: '#ECC6F7',
|
||||
border: '#B620E0'
|
||||
},
|
||||
{
|
||||
background: '#FDC6C6',
|
||||
border: '#FA7777'
|
||||
}
|
||||
],
|
||||
keyMapping: [
|
||||
@@ -157,70 +157,76 @@ export default {
|
||||
methods: {
|
||||
unitConvert,
|
||||
initMap (id) {
|
||||
// 初始化插件
|
||||
const chart = am4Core.create(id, am4Maps.MapChart)
|
||||
chart.geodata = getGeoData(storageKey.iso36112WorldLow)
|
||||
chart.projection = new am4Maps.projections.Miller()
|
||||
this.myChart = shallowRef(chart)
|
||||
// 初始化多边形series（即地图series）
|
||||
this.polygonSeries = shallowRef(this.polygonSeriesFactory())
|
||||
// 如果是散点地图，再初始化散点series。DNS dashboard的地图是散点地图
|
||||
if (this.isMapPoint) {
|
||||
this.worldImageSeries = shallowRef(this.imageSeriesFactory())
|
||||
}
|
||||
// 渲染
|
||||
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
|
||||
try {
|
||||
// 初始化插件
|
||||
const chart = am4Core.create(id, am4Maps.MapChart)
|
||||
chart.geodata = getGeoData(storageKey.iso36112WorldLow)
|
||||
chart.projection = new am4Maps.projections.Miller()
|
||||
this.myChart = shallowRef(chart)
|
||||
// 初始化多边形series（即地图series）
|
||||
this.polygonSeries = shallowRef(this.polygonSeriesFactory())
|
||||
// 如果是散点地图，再初始化散点series。DNS dashboard的地图是散点地图
|
||||
if (this.isMapPoint) {
|
||||
this.worldImageSeries = shallowRef(this.imageSeriesFactory())
|
||||
}
|
||||
// 渲染
|
||||
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)
|
||||
// 地图点击事件
|
||||
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 = shallowRef(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
|
||||
ev.target.isHover = false
|
||||
const geoData = getGeoData(countryId)
|
||||
if (geoData) {
|
||||
this.countrySeries = shallowRef(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)
|
||||
if (countryId) {
|
||||
const targetMapObject = this.polygonSeries.getPolygonById(countryId)
|
||||
targetMapObject.series.chart.zoomToMapObject(targetMapObject)
|
||||
const geoData = getGeoData(countryId)
|
||||
if (geoData) {
|
||||
this.countrySeries = shallowRef(this.polygonSeriesFactory())
|
||||
this.countrySeries.geodata = geoData
|
||||
this.countryImageSeries = shallowRef(this.imageSeriesFactory())
|
||||
this.polygonSeries.hide()
|
||||
this.worldImageSeries.hide()
|
||||
const country = ev.target.dataItem.dataContext.name
|
||||
const queryParams = { ...this.queryParams, ipLocationCountry: country }
|
||||
const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
|
||||
this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
} 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 = shallowRef(this.polygonSeriesFactory())
|
||||
this.countrySeries.geodata = geoData
|
||||
this.countryImageSeries = shallowRef(this.imageSeriesFactory())
|
||||
this.polygonSeries.hide()
|
||||
this.worldImageSeries.hide()
|
||||
const country = ev.target.dataItem.dataContext.name
|
||||
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
|
||||
})
|
||||
*/
|
||||
}
|
||||
// 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
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
this.$emit('finishOneMap')
|
||||
}
|
||||
},
|
||||
polygonSeriesFactory () {
|
||||
@@ -348,15 +354,45 @@ export default {
|
||||
return ''
|
||||
})
|
||||
} else if (data && this.isMapPoint) {
|
||||
imageSeries.data = data.map(r => ({
|
||||
...this.convertMapData(r),
|
||||
id: r.ipLocationId,
|
||||
dnsServerRole: r.dnsServerRole,
|
||||
name: r.ipLocationCity || r.ipLocationProvince || r.ipLocationCountry,
|
||||
desc: this.$t(this.dnsTypeI18n(r.dnsServerRole)),
|
||||
color: this.circleColor[r.dnsServerRole.toUpperCase()].background,
|
||||
border: this.circleColor[r.dnsServerRole.toUpperCase()].border
|
||||
}))
|
||||
if (this.legends[this.currentLegendIndex].type === dnsServerRole.RTDNSM) {
|
||||
const res = new Map()
|
||||
data.forEach((item, index, arr1) => {
|
||||
if (!res.has(item.Country)) {
|
||||
res.set(item.Country, 1)
|
||||
} else {
|
||||
res.set(item.Country, res.get(item.Country) + 1)
|
||||
}
|
||||
})
|
||||
|
||||
const amData = []
|
||||
res.forEach(function (value, key) {
|
||||
const rtdnsm = {
|
||||
dnsServerRole: dnsServerRole.RTDNSM,
|
||||
count: value,
|
||||
Country: key
|
||||
}
|
||||
amData.push(rtdnsm)
|
||||
})
|
||||
imageSeries.data = amData.map(r => ({
|
||||
...this.convertMapData(r),
|
||||
id: r.ipLocationId || r.Country,
|
||||
dnsServerRole: r.dnsServerRole,
|
||||
name: r.ipLocationCity || r.ipLocationProvince || r.ipLocationCountry || r.Country,
|
||||
desc: this.$t(this.dnsTypeI18n(r.dnsServerRole)),
|
||||
color: this.circleColor[r.dnsServerRole.toUpperCase()].background,
|
||||
border: this.circleColor[r.dnsServerRole.toUpperCase()].border
|
||||
}))
|
||||
} else {
|
||||
imageSeries.data = data.map(r => ({
|
||||
...this.convertMapData(r),
|
||||
id: r.ipLocationId || r.Country,
|
||||
dnsServerRole: r.dnsServerRole,
|
||||
name: r.ipLocationCity || r.ipLocationProvince || r.ipLocationCountry || r.Country,
|
||||
desc: this.$t(this.dnsTypeI18n(r.dnsServerRole)),
|
||||
color: this.circleColor[r.dnsServerRole.toUpperCase()].background,
|
||||
border: this.circleColor[r.dnsServerRole.toUpperCase()].border
|
||||
}))
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
|
||||
Reference in New Issue
Block a user