From a9ebac4eb160f674a635593d084973d05fd1154a Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Sat, 16 Oct 2021 15:50:12 +0800 Subject: [PATCH] =?UTF-8?q?CN-205=20feat:=20=E5=9C=B0=E5=9B=BE=E4=B8=8B?= =?UTF-8?q?=E9=92=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/chart.scss | 5 +- src/assets/css/common.scss | 2 +- src/utils/api.js | 7 +- src/utils/constants.js | 219 ++++++++++++++++++++++++++++++++++++- src/views/charts/Chart.vue | 65 +++++++++-- 5 files changed, 278 insertions(+), 20 deletions(-) diff --git a/src/assets/css/chart.scss b/src/assets/css/chart.scss index 1d741eaf..9337d10c 100644 --- a/src/assets/css/chart.scss +++ b/src/assets/css/chart.scss @@ -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; diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index b80eb230..29450312 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.scss @@ -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); } diff --git a/src/utils/api.js b/src/utils/api.js index 93c07e18..ad400155 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -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 diff --git a/src/utils/constants.js b/src/utils/constants.js index f365fe8f..8fed670c 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -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' +} diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue index 4bc51bdc..5e9d3f0a 100644 --- a/src/views/charts/Chart.vue +++ b/src/views/charts/Chart.vue @@ -47,6 +47,7 @@ @@ -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 })