diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue index dc0a66a8..413e322e 100644 --- a/src/views/charts/charts/ChartMap.vue +++ b/src/views/charts/charts/ChartMap.vue @@ -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)