CN-205 feat: 地图下钻
This commit is contained in:
chenjinsong
@@ -27,11 +27,12 @@
|
||||
}
|
||||
.chart__loading {
|
||||
position: absolute;
|
||||
height: calc(100% - 50px);
|
||||
top: 50px;
|
||||
height: calc(100% - 47px);
|
||||
top: 47px;
|
||||
width: 100%;
|
||||
background-color: #fefefe;
|
||||
z-index: 1;
|
||||
opacity: .9;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
|
||||
@@ -68,5 +68,5 @@ th *:first-letter,
|
||||
/* 淡化amcharts的logo */
|
||||
g [aria-labelledby$=-title] {
|
||||
opacity: 0.1;
|
||||
transform: translate(calc(100% - 76px), calc(100% - 25px));
|
||||
transform: translateX(calc(100% - 52px)) scale(.7);
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
* @description 1.定义api；2.定义通用查询方法，函数名应为 获取详情getItem、获取列表getItemList。例如getUser、getUserList
|
||||
*/
|
||||
import { get, post } from '@/utils/http'
|
||||
import axios from 'axios'
|
||||
import { sortByOrderNum } from '@/permission'
|
||||
import { storageKey } from '@/utils/constants'
|
||||
|
||||
@@ -116,8 +117,10 @@ export async function getI18n () {
|
||||
/* 获得原始的3611-2 json字符串数据 */
|
||||
export async function getIso36112JsonData (suffix) {
|
||||
const request = new Promise(resolve => {
|
||||
get(`${process.env.BASE_URL}geojson/${suffix}`).then(response => {
|
||||
resolve(JSON.stringify(response))
|
||||
axios({
|
||||
url: `${window.location.protocol}//${window.location.host}:${window.location.port}/geojson/${suffix}.json`,
|
||||
}).then(response => {
|
||||
resolve(response.data || response || null)
|
||||
})
|
||||
})
|
||||
return await request
|
||||
|
||||
@@ -19,11 +19,6 @@ export const storageKey = {
|
||||
unsavedChange: 'cn-unsaved-change'
|
||||
}
|
||||
|
||||
export const iso36112 = {
|
||||
[storageKey.iso36112Capital]: 'data/countriesWithCapital.json',
|
||||
[storageKey.iso36112WorldLow]: 'worldChinaLow.json'
|
||||
}
|
||||
|
||||
// 统一定义跳转来源
|
||||
export const fromRoute = {
|
||||
trafficSummary: 'trafficSummary',
|
||||
@@ -85,3 +80,217 @@ export const unitTypes = {
|
||||
export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
|
||||
export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
|
||||
export const chartPieTableTopOptions = [{ name: 'Sessions', value: 'sessions' }, { name: 'Packets', value: 'packets' }, { name: 'Bytes', value: 'bytes' }] // table类型图表的TOP-N选项
|
||||
|
||||
export const iso36112 = {
|
||||
[storageKey.iso36112Capital]: 'data/countriesWithCapital',
|
||||
[storageKey.iso36112WorldLow]: 'worldChinaLow',
|
||||
IE: 'irelandLow',
|
||||
MM: 'myanmarLow',
|
||||
TZ: 'tanzaniaLow',
|
||||
BS: 'bahamasLow',
|
||||
DM: 'dominicaLow',
|
||||
VC: 'saintVincentLow',
|
||||
BG: 'bulgariaLow',
|
||||
SK: 'slovakiaLow',
|
||||
UZ: 'uzbekistanLow',
|
||||
IS: 'icelandLow',
|
||||
CA: 'canadaLow',
|
||||
AT: 'austriaLow',
|
||||
DO: 'dominicanRepublicLow',
|
||||
MY: 'malaysiaLow',
|
||||
BW: 'botswanaLow',
|
||||
SH: 'saintHelenaLow',
|
||||
NO: 'norway2020Low',
|
||||
CF: 'centralAfricanRepublicLow',
|
||||
GA: 'gabonLow',
|
||||
GD: 'grenadaLow',
|
||||
RU: 'russiaLow',
|
||||
FR: 'franceLow',
|
||||
TJ: 'tajikistanLow',
|
||||
CU: 'cubaLow',
|
||||
NP: 'nepalLow',
|
||||
ZW: 'zimbabweLow',
|
||||
CW: 'curacaoLow',
|
||||
GW: 'guineaBissauLow',
|
||||
EE: 'estoniaLow',
|
||||
AG: 'antiguaBarbudaLow',
|
||||
TT: 'trinidadTobagoLow',
|
||||
BF: 'burkinaFasoLow',
|
||||
LI: 'liechtensteinLow',
|
||||
OM: 'omanLow',
|
||||
GY: 'guyanaLow',
|
||||
GR: 'greeceLow',
|
||||
KG: 'kyrgyzstanLow',
|
||||
SD: 'sudanLow',
|
||||
AE: 'uaeLow',
|
||||
KY: 'caymanIslandsLow',
|
||||
LA: 'laosLow',
|
||||
LT: 'lithuaniaLow',
|
||||
UG: 'ugandaLow',
|
||||
MR: 'mauritaniaLow',
|
||||
SS: 'southSudan2015Low',
|
||||
SI: 'sloveniaLow',
|
||||
MX: 'mexicoLow',
|
||||
GH: 'ghanaLow',
|
||||
GN: 'guineaLow',
|
||||
BB: 'barbadosLow',
|
||||
HN: 'hondurasLow',
|
||||
SN: 'senegalLow',
|
||||
BD: 'bangladeshLow',
|
||||
BQ: 'bonaireSintEustatiusSabaLow',
|
||||
CC: 'cocosKeelingLow',
|
||||
HR: 'croatiaLow',
|
||||
PL: 'polandLow',
|
||||
ST: 'saoTomePrincipeLow',
|
||||
TC: 'turksCaicosLow',
|
||||
GT: 'guatemalaLow',
|
||||
IT: 'italyLow',
|
||||
RW: 'rwandaLow',
|
||||
LC: 'saintLuciaLow',
|
||||
TL: 'timorLesteLow',
|
||||
CZ: 'czechiaLow',
|
||||
GQ: 'equatorialGuineaLow',
|
||||
FJ: 'fijiEastLow',
|
||||
MA: 'moroccoLow',
|
||||
DJ: 'djiboutiLow',
|
||||
NE: 'nigerLow',
|
||||
LV: 'latviaLow',
|
||||
RS: 'serbiaLow',
|
||||
PE: 'peruLow',
|
||||
SE: 'swedenLow',
|
||||
GE: 'georgiaLow',
|
||||
DE: 'bosniaHerzegovinaLow',
|
||||
AF: 'afghanistanLow',
|
||||
AR: 'argentinaLow',
|
||||
KE: 'kenyaLow',
|
||||
AS: 'americanSamoaLow',
|
||||
FI: 'finlandLow',
|
||||
IR: 'iranLow',
|
||||
UY: 'uruguayLow',
|
||||
SA: 'saudiArabiaLow',
|
||||
EC: 'ecuadorLow',
|
||||
AW: 'arubaLow',
|
||||
ZA: 'southAfricaLow',
|
||||
PM: 'stPierreMiquelonLow',
|
||||
SC: 'seychellesLow',
|
||||
MG: 'madagascarProvinceLow',
|
||||
YE: 'yemenLow',
|
||||
BR: 'brazilLow',
|
||||
ML: 'maliLow',
|
||||
CL: 'chileLow',
|
||||
LB: 'lebanonLow',
|
||||
DZ: 'algeriaLow',
|
||||
FO: 'faroeIslandsLow',
|
||||
VE: 'venezuelaLow',
|
||||
CR: 'costaRicaLow',
|
||||
GP: 'guadeloupeLow',
|
||||
SV: 'elSalvadorLow',
|
||||
LK: 'sriLankaLow',
|
||||
KZ: 'kazakhstanLow',
|
||||
NL: 'netherlandsLow',
|
||||
GM: 'gambiaLow',
|
||||
TR: 'turkeyLow',
|
||||
be: 'belgiumLow',
|
||||
PA: 'panamaLow',
|
||||
AZ: 'azerbaijanLow',
|
||||
PT: 'portugalLow',
|
||||
VA: 'vaticanLow',
|
||||
MW: 'malawiLow',
|
||||
KN: 'stKittsNevisLow',
|
||||
NI: 'nicaraguaLow',
|
||||
MD: 'moldovaLow',
|
||||
IN: 'indiaLow',
|
||||
MZ: 'mozambiqueLow',
|
||||
WS: 'samoaLow',
|
||||
ET: 'ethiopiaLow',
|
||||
MV: 'maldivesLow',
|
||||
TH: 'thailandLow',
|
||||
PH: 'philippinesLow',
|
||||
MQ: 'martiniqueLow',
|
||||
KP: 'northKoreaLow',
|
||||
PR: 'puertoRicoLow',
|
||||
CV: 'capeVerdeLow',
|
||||
TG: 'togoLow',
|
||||
AL: 'albaniaLow',
|
||||
SJ: 'svalbardLow',
|
||||
BH: 'bahrainLow',
|
||||
AU: 'australiaLow',
|
||||
BI: 'burundiLow',
|
||||
QA: 'qatarLow',
|
||||
TD: 'chadLow',
|
||||
BZ: 'belizeLow',
|
||||
GS: 'georgiaSouthOssetiaLow',
|
||||
MS: 'montserratLow',
|
||||
BM: 'bermudaLow',
|
||||
ZM: 'zambiaLow',
|
||||
JP: 'japanLow',
|
||||
JO: 'jordanLow',
|
||||
BT: 'bhutanLow',
|
||||
NZ: 'newZealandLow',
|
||||
MK: 'northMacedoniaLow',
|
||||
TN: 'tunisiaLow',
|
||||
bl: 'stBarthelemyLow',
|
||||
PY: 'paraguayLow',
|
||||
ID: 'indonesiaLow',
|
||||
HT: 'haitiLow',
|
||||
FK: 'falklandIslandsLow',
|
||||
MP: 'northernMarianaLow',
|
||||
PS: 'palestineLow',
|
||||
CD: 'congoDRLow',
|
||||
AM: 'armeniaLow',
|
||||
DK: 'denmarkLow',
|
||||
NG: 'nigeriaLow',
|
||||
RO: 'romaniaLow',
|
||||
ER: 'eritreaLow',
|
||||
BN: 'bruneiDarussalamLow',
|
||||
AO: 'angolaLow',
|
||||
BA: 'bosniaHerzegovinaCantonsLow',
|
||||
PK: 'pakistanLow',
|
||||
GL: 'greenlandLow',
|
||||
TM: 'turkmenistanLow',
|
||||
BJ: 'beninLow',
|
||||
CI: 'cotedIvoireLow',
|
||||
CN: 'chinaLow',
|
||||
CH: 'switzerlandLow',
|
||||
VG: 'britishVirginIslandsLow',
|
||||
VI: 'usVirginIslandsLow',
|
||||
IL: 'israelLow',
|
||||
SR: 'surinameLow',
|
||||
CO: 'colombiaLow',
|
||||
MT: 'maltaLow',
|
||||
CM: 'cameroonLow',
|
||||
LY: 'libyaLow',
|
||||
IQ: 'iraqLow',
|
||||
UA: 'ukraineLow',
|
||||
VN: 'vietnamLow',
|
||||
KH: 'cambodiaLow',
|
||||
AI: 'anguillaLow',
|
||||
ME: 'montenegroLow',
|
||||
SB: 'solomonIslandsLow',
|
||||
KR: 'southKoreaLow',
|
||||
GB: 'ukLow',
|
||||
SG: 'singaporeLow',
|
||||
EG: 'egyptLow',
|
||||
CY: 'cyprusLow',
|
||||
KM: 'comorosLow',
|
||||
GU: 'guamLow',
|
||||
HK: 'hongKongLow',
|
||||
SO: 'somaliaLow',
|
||||
NA: 'namibiaLow',
|
||||
HU: 'hungaryLow',
|
||||
BY: 'belarusLow',
|
||||
BO: 'boliviaLow',
|
||||
GF: 'frenchGuianaLow',
|
||||
US: 'usaLow',
|
||||
SL: 'sierraLeoneLow',
|
||||
SM: 'sanMarinoLow',
|
||||
AD: 'andorraLow',
|
||||
ES: 'spainLow',
|
||||
KW: 'kuwaitLow',
|
||||
CG: 'congoLow',
|
||||
LU: 'luxembourgLow',
|
||||
JM: 'jamaicaLow',
|
||||
SY: 'syriaLow',
|
||||
SZ: 'eswatiniLow',
|
||||
MN: 'mongoliaLow'
|
||||
}
|
||||
|
||||
@@ -47,6 +47,7 @@
|
||||
</template>
|
||||
<template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
|
||||
<template #operations>
|
||||
<span class="header__operation-btn" v-show="showMapBackButton" @click="mapBack"><i class="cn-icon el-icon-back"></i></span>
|
||||
<el-popover trigger="hover" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
|
||||
<template #reference>
|
||||
<span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
|
||||
@@ -70,7 +71,9 @@
|
||||
<div class="chart-drawing" style="padding: 0 36px 30px 0;" :id="`chart${chartInfo.id}`"></div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
|
||||
<template v-else>
|
||||
<div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
|
||||
</template>
|
||||
</template>
|
||||
</chart-map>
|
||||
<!-- echarts类的图，如饼图、柱状图、折线图等 -->
|
||||
@@ -560,6 +563,7 @@ export default {
|
||||
value: '-',
|
||||
icon: ''
|
||||
},
|
||||
showMapBackButton: false, // 下钻之后控制是否显示返回上一层按钮
|
||||
standaloneTimeRange: { // 单个图表刷新时，重新获取时间范围，且不影响到其他图
|
||||
use: false,
|
||||
startTime: '',
|
||||
@@ -584,7 +588,9 @@ export default {
|
||||
throttle: null, // 节流器
|
||||
isError: false, // 接口响应是否报错
|
||||
errorInfo: '', // 接口具体错误信息
|
||||
polygonSeries: null
|
||||
polygonSeries: null, // 世界地图series
|
||||
countrySeries: null, // 下钻国家series
|
||||
baseMapSeriesName: ['Container', 'MapChart']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -596,9 +602,7 @@ export default {
|
||||
try {
|
||||
const chartParams = this.chartInfo.params
|
||||
if (this.isMap) {
|
||||
const { chart, polygonSeries } = this.initMap(`chart${this.chartInfo.id}`)
|
||||
this.myChart = chart
|
||||
this.polygonSeries = polygonSeries
|
||||
this.initMap(`chart${this.chartInfo.id}`)
|
||||
if (chartParams) {
|
||||
this.loadMap(this.polygonSeries)
|
||||
}
|
||||
@@ -802,26 +806,58 @@ export default {
|
||||
const chart = am4Core.create(id, am4Maps.MapChart)
|
||||
chart.geodata = getGeoData(storageKey.iso36112WorldLow)
|
||||
chart.projection = new am4Maps.projections.Miller()
|
||||
this.myChart = chart
|
||||
const polygonSeries = chart.series.push(new am4Maps.MapPolygonSeries())
|
||||
polygonSeries.useGeodata = true
|
||||
polygonSeries.exclude = ['AQ'] // 排除南极洲
|
||||
polygonSeries.tooltip.getFillFromObject = false
|
||||
polygonSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
|
||||
this.polygonSeries = polygonSeries
|
||||
const polygonTemplate = polygonSeries.mapPolygons.template
|
||||
polygonTemplate.tooltipHTML = this.generateTooltipHTML()
|
||||
polygonSeries.tooltip.getFillFromObject = false
|
||||
polygonSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
|
||||
polygonTemplate.nonScalingStroke = true
|
||||
polygonTemplate.strokeWidth = 0.5
|
||||
polygonTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
|
||||
polygonTemplate.events.on('hit', ev => {
|
||||
const countryId = ev.target.dataItem.dataContext.id
|
||||
if (countryId) {
|
||||
ev.target.series.chart.zoomToMapObject(ev.target)
|
||||
ev.target.isHover = false
|
||||
this.countrySeries = chart.series.push(new am4Maps.MapPolygonSeries())
|
||||
this.countrySeries.tooltip.getFillFromObject = false
|
||||
this.countrySeries.tooltip.background.fill = am4Core.color('#FFFFFF')
|
||||
const countryTemplate = this.countrySeries.mapPolygons.template
|
||||
countryTemplate.tooltipHTML = this.generateTooltipHTML()
|
||||
countryTemplate.nonScalingStroke = true
|
||||
countryTemplate.strokeWidth = 0.5
|
||||
countryTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
|
||||
const geoData = getGeoData(countryId)
|
||||
if (geoData) {
|
||||
this.countrySeries.geodata = geoData
|
||||
this.polygonSeries.hide()
|
||||
this.loadMap(this.countrySeries, ev.target.dataItem.dataContext.serverCountry)
|
||||
}
|
||||
}
|
||||
})
|
||||
return {
|
||||
chart,
|
||||
polygonSeries
|
||||
}
|
||||
},
|
||||
loadMap (polygonSeries) {
|
||||
loadMap (polygonSeries, country) {
|
||||
this.loading = true
|
||||
// 清除数据
|
||||
polygonSeries.data.splice(0)
|
||||
// 清除legend
|
||||
this.myChart.children.each((s, i) => {
|
||||
if (s.className !== 'Container') {
|
||||
this.myChart.children.removeIndex(i)
|
||||
}
|
||||
})
|
||||
|
||||
this.showMapBackButton = !!country
|
||||
const chartParams = this.chartInfo.params
|
||||
const queryParams = { ...this.queryTimeRange, country: '', region: '', ...this.entity } // 统计数据的查询参数
|
||||
const queryParams = { ...this.queryTimeRange, country: country || '', region: '', ...this.entity } // 统计数据的查询参数
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
if (response.code === 200 && !this.$_.isEmpty(response.data.result)) {
|
||||
const data = response.data.result
|
||||
@@ -898,7 +934,8 @@ export default {
|
||||
})
|
||||
})
|
||||
imageSeries.data = pointData
|
||||
} else if (this.isMapBlock) {
|
||||
}
|
||||
if (this.isMapBlock) {
|
||||
const sumData = []
|
||||
data.forEach(r => {
|
||||
const hit = sumData.find(s => s.id === r.serverId)
|
||||
@@ -909,6 +946,7 @@ export default {
|
||||
} else {
|
||||
sumData.push({
|
||||
id: r.serverId,
|
||||
serverCountry: r.serverCountry,
|
||||
key,
|
||||
labelText,
|
||||
value
|
||||
@@ -976,6 +1014,13 @@ export default {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
mapBack () {
|
||||
this.countrySeries.hide()
|
||||
this.loadMap(this.polygonSeries)
|
||||
this.polygonSeries.show()
|
||||
this.myChart.goHome()
|
||||
},
|
||||
// 获取最新时间
|
||||
getCurrentTimeRange (callback) {
|
||||
this.$emit('getCurrentTimeRange', ({ startTime, endTime }) => {
|
||||
callback({ startTime, endTime })
|
||||
|
||||
Reference in New Issue
Block a user