From b7a7ec5e867c4055586bb5070ca23159d06fca78 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Tue, 26 Jul 2022 22:07:53 +0800 Subject: [PATCH] =?UTF-8?q?CN-653=20feat:=20=E5=9C=B0=E5=9B=BE=E5=88=9D?= =?UTF-8?q?=E5=A7=8B=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/components/index.scss | 1 + .../css/components/views/charts2/npmMap.scss | 12 + src/views/charts/charts/ChartMap.vue | 3 +- src/views/charts/charts/IpBasicInfo.vue | 1 - src/views/charts2/Chart.vue | 6 + src/views/charts2/chart-tools.js | 1 + src/views/charts2/charts/NpmLine.vue | 9 + src/views/charts2/charts/NpmMap.vue | 99 ++- src/views/charts2/charts/mapTestData.js | 630 ++++++++++++++++++ 9 files changed, 757 insertions(+), 5 deletions(-) create mode 100644 src/assets/css/components/views/charts2/npmMap.scss create mode 100644 src/views/charts2/charts/NpmLine.vue create mode 100644 src/views/charts2/charts/mapTestData.js diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss index dd4fddee..f5fb116b 100644 --- a/src/assets/css/components/index.scss +++ b/src/assets/css/components/index.scss @@ -53,4 +53,5 @@ @import './views/charts2/npmNetworkQuantity'; @import './views/charts2/networkOverviewApps'; @import './views/charts2/npmTabs'; +@import './views/charts2/npmMap'; //@import '../chart'; diff --git a/src/assets/css/components/views/charts2/npmMap.scss b/src/assets/css/components/views/charts2/npmMap.scss new file mode 100644 index 00000000..735f0eea --- /dev/null +++ b/src/assets/css/components/views/charts2/npmMap.scss @@ -0,0 +1,12 @@ +.cn-chart__map { + height: 100%; + width: 100%; + border-radius: 4px; + overflow: hidden; + + .map-canvas { + height: 100%; + width: 100%; + background-color: #CAD2D3; + } +} diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue index e12f1bc9..9eec98df 100644 --- a/src/views/charts/charts/ChartMap.vue +++ b/src/views/charts/charts/ChartMap.vue @@ -39,7 +39,6 @@ export default { data () { return { unitTypes, - mapPictureUrl: '/Tiles/{z}/{x}/{y}.png', showMapBackButton: false, polygonSeries: null, // 世界地图series countrySeries: null, // 下钻国家series @@ -247,7 +246,7 @@ export default { }, imageSeriesFactory (dataField) { const vm = this - // emcharts实例中增加地图图案series(用来在地图上画圆点、方块、连线等) + // amcharts实例中增加地图图案series(用来在地图上画圆点、方块、连线等) const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries()) // 指定接口数据中哪个字段名代表数值 imageSeries.dataFields.value = dataField || 'count' diff --git a/src/views/charts/charts/IpBasicInfo.vue b/src/views/charts/charts/IpBasicInfo.vue index c81f1227..ba38933c 100644 --- a/src/views/charts/charts/IpBasicInfo.vue +++ b/src/views/charts/charts/IpBasicInfo.vue @@ -29,7 +29,6 @@ export default { data () { return { myChart: null, - mapPictureUrl: '/Tiles/{z}/{x}/{y}.png', entityDetectionsIpUrl: api.entityDetectionsIp, detectionsData: {} } diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue index 7e59ec5e..1d0e660b 100644 --- a/src/views/charts2/Chart.vue +++ b/src/views/charts2/Chart.vue @@ -38,6 +38,10 @@ v-else-if="chart.type === typeMapping.npm.npmMap" :chart="chart" > + @@ -54,9 +58,11 @@ import NpmTabs from '@/views/charts2/charts/NpmTabs' import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity' import NpmAppCategoryScore from '@/views/charts2/charts/NpmAppCategoryScore' import NpmMap from '@/views/charts2/charts/NpmMap' +import NpmLine from '@/views/charts2/charts/NpmLine' export default { name: 'Chart', components: { + NpmLine, NpmMap, NpmAppCategoryScore, Loading, diff --git a/src/views/charts2/chart-tools.js b/src/views/charts2/chart-tools.js index f74ac794..d460b226 100644 --- a/src/views/charts2/chart-tools.js +++ b/src/views/charts2/chart-tools.js @@ -8,6 +8,7 @@ export const typeMapping = { }, npm: { npmMap: 1, + npmLine: 101, npmAppCategoryScore: 702, npmTabs: 704, npmNetworkQuantity: 703 diff --git a/src/views/charts2/charts/NpmLine.vue b/src/views/charts2/charts/NpmLine.vue new file mode 100644 index 00000000..746024d7 --- /dev/null +++ b/src/views/charts2/charts/NpmLine.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/views/charts2/charts/NpmMap.vue b/src/views/charts2/charts/NpmMap.vue index eb041a74..c5025969 100644 --- a/src/views/charts2/charts/NpmMap.vue +++ b/src/views/charts2/charts/NpmMap.vue @@ -1,9 +1,104 @@ diff --git a/src/views/charts2/charts/mapTestData.js b/src/views/charts2/charts/mapTestData.js new file mode 100644 index 00000000..a4343856 --- /dev/null +++ b/src/views/charts2/charts/mapTestData.js @@ -0,0 +1,630 @@ +export default { + "msg": "OK", + "code": 200, + "data": { + "result": [ + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Paraguay", + "serverId": "PY", + "packets": "1", + "bytes": "106", + "sentBytes": "106" + }, + { + "receivedBytes": "27435", + "sessions": "119", + "serverCountry": "Sweden", + "serverId": "SE", + "packets": "339", + "bytes": "53044", + "sentBytes": "25609" + }, + { + "receivedBytes": "40925", + "sessions": "60", + "serverCountry": "Malaysia", + "serverId": "MY", + "packets": "888", + "bytes": "77424", + "sentBytes": "36499" + }, + { + "receivedBytes": "25755", + "sessions": "52", + "serverCountry": "Russia", + "serverId": "", + "packets": "305", + "bytes": "50811", + "sentBytes": "25056" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Nigeria", + "serverId": "NG", + "packets": "1", + "bytes": "106", + "sentBytes": "106" + }, + { + "receivedBytes": "0", + "sessions": "11", + "serverCountry": "Romania", + "serverId": "RO", + "packets": "11", + "bytes": "898", + "sentBytes": "898" + }, + { + "receivedBytes": "3840", + "sessions": "2", + "serverCountry": "Bahrain", + "serverId": "BH", + "packets": "180", + "bytes": "11040", + "sentBytes": "7200" + }, + { + "receivedBytes": "8006", + "sessions": "7", + "serverCountry": "Chile", + "serverId": "CL", + "packets": "35", + "bytes": "11307", + "sentBytes": "3301" + }, + { + "receivedBytes": "1313470", + "sessions": "229", + "serverCountry": "Japan", + "serverId": "JP", + "packets": "3391", + "bytes": "1505018", + "sentBytes": "191548" + }, + { + "receivedBytes": "504", + "sessions": "11", + "serverCountry": "Turkey", + "serverId": "TR", + "packets": "19", + "bytes": "2016", + "sentBytes": "1512" + }, + { + "receivedBytes": "1086", + "sessions": "11", + "serverCountry": "Finland", + "serverId": "FI", + "packets": "31", + "bytes": "2495", + "sentBytes": "1409" + }, + { + "receivedBytes": "0", + "sessions": "3", + "serverCountry": "Mongolia", + "serverId": "MN", + "packets": "3", + "bytes": "318", + "sentBytes": "318" + }, + { + "receivedBytes": "1064", + "sessions": "8", + "serverCountry": "Hungary", + "serverId": "HU", + "packets": "27", + "bytes": "2331", + "sentBytes": "1267" + }, + { + "receivedBytes": "17568", + "sessions": "101", + "serverCountry": "Brazil", + "serverId": "BR", + "packets": "240", + "bytes": "40517", + "sentBytes": "22949" + }, + { + "receivedBytes": "4564", + "sessions": "3", + "serverCountry": "Kuwait", + "serverId": "KW", + "packets": "46", + "bytes": "7100", + "sentBytes": "2536" + }, + { + "receivedBytes": "46123", + "sessions": "95", + "serverCountry": "Viet Nam", + "serverId": "VN", + "packets": "387", + "bytes": "72673", + "sentBytes": "26550" + }, + { + "receivedBytes": "126", + "sessions": "3", + "serverCountry": "Belgium", + "serverId": "BE", + "packets": "4", + "bytes": "394", + "sentBytes": "268" + }, + { + "receivedBytes": "0", + "sessions": "2", + "serverCountry": "Ecuador", + "serverId": "EC", + "packets": "2", + "bytes": "212", + "sentBytes": "212" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Morocco", + "serverId": "MA", + "packets": "1", + "bytes": "106", + "sentBytes": "106" + }, + { + "receivedBytes": "70985", + "sessions": "140", + "serverCountry": "India", + "serverId": "IN", + "packets": "558", + "bytes": "123995", + "sentBytes": "53010" + }, + { + "receivedBytes": "0", + "sessions": "2", + "serverCountry": "Israel", + "serverId": "IL", + "packets": "2", + "bytes": "212", + "sentBytes": "212" + }, + { + "receivedBytes": "279", + "sessions": "3", + "serverCountry": "Norway", + "serverId": "NO", + "packets": "12", + "bytes": "1054", + "sentBytes": "775" + }, + { + "receivedBytes": "0", + "sessions": "3", + "serverCountry": "Peru", + "serverId": "PE", + "packets": "3", + "bytes": "318", + "sentBytes": "318" + }, + { + "receivedBytes": "61410", + "sessions": "42", + "serverCountry": "Thailand", + "serverId": "TH", + "packets": "404", + "bytes": "90757", + "sentBytes": "29347" + }, + { + "receivedBytes": "2683", + "sessions": "9", + "serverCountry": "Ireland", + "serverId": "IE", + "packets": "31", + "bytes": "5553", + "sentBytes": "2870" + }, + { + "receivedBytes": "49653235083", + "sessions": "103792", + "serverCountry": "China", + "serverId": "CN", + "packets": "49636392", + "bytes": "51157081522", + "sentBytes": "1503846439" + }, + { + "receivedBytes": "773", + "sessions": "18", + "serverCountry": "Portugal", + "serverId": "PT", + "packets": "29", + "bytes": "2614", + "sentBytes": "1841" + }, + { + "receivedBytes": "12687", + "sessions": "29", + "serverCountry": "Canada", + "serverId": "CA", + "packets": "249", + "bytes": "35918", + "sentBytes": "23231" + }, + { + "receivedBytes": "18779", + "sessions": "79", + "serverCountry": "France", + "serverId": "FR", + "packets": "296", + "bytes": "40830", + "sentBytes": "22051" + }, + { + "receivedBytes": "3660", + "sessions": "5", + "serverCountry": "Poland", + "serverId": "PL", + "packets": "44", + "bytes": "7635", + "sentBytes": "3975" + }, + { + "receivedBytes": "18177", + "sessions": "51", + "serverCountry": "Italy", + "serverId": "IT", + "packets": "218", + "bytes": "41307", + "sentBytes": "23130" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Greece", + "serverId": "GR", + "packets": "1", + "bytes": "159", + "sentBytes": "159" + }, + { + "receivedBytes": "9896", + "sessions": "8", + "serverCountry": "Cambodia", + "serverId": "KH", + "packets": "59", + "bytes": "13885", + "sentBytes": "3989" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Iraq", + "serverId": "IQ", + "packets": "1", + "bytes": "106", + "sentBytes": "106" + }, + { + "receivedBytes": "5802", + "sessions": "1", + "serverCountry": "Iran", + "serverId": "", + "packets": "21", + "bytes": "6814", + "sentBytes": "1012" + }, + { + "receivedBytes": "15514", + "sessions": "37", + "serverCountry": "Spain", + "serverId": "ES", + "packets": "133", + "bytes": "30255", + "sentBytes": "14741" + }, + { + "receivedBytes": "0", + "sessions": "2", + "serverCountry": "Colombia", + "serverId": "CO", + "packets": "2", + "bytes": "212", + "sentBytes": "212" + }, + { + "receivedBytes": "0", + "sessions": "27", + "serverCountry": "Mexico", + "serverId": "MX", + "packets": "27", + "bytes": "2580", + "sentBytes": "2580" + }, + { + "receivedBytes": "247", + "sessions": "2", + "serverCountry": "Myanmar", + "serverId": "MM", + "packets": "28", + "bytes": "2216", + "sentBytes": "1969" + }, + { + "receivedBytes": "0", + "sessions": "8", + "serverCountry": "Slovakia", + "serverId": "SK", + "packets": "8", + "bytes": "620", + "sentBytes": "620" + }, + { + "receivedBytes": "1171", + "sessions": "20", + "serverCountry": "Austria", + "serverId": "AT", + "packets": "23", + "bytes": "2757", + "sentBytes": "1586" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Algeria", + "serverId": "DZ", + "packets": "1", + "bytes": "106", + "sentBytes": "106" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Oman", + "serverId": "OM", + "packets": "1", + "bytes": "148", + "sentBytes": "148" + }, + { + "receivedBytes": "91671", + "sessions": "187", + "serverCountry": "Germany", + "serverId": "DE", + "packets": "1321", + "bytes": "147323", + "sentBytes": "55652" + }, + { + "receivedBytes": "335", + "sessions": "2", + "serverCountry": "Bulgaria", + "serverId": "BG", + "packets": "3", + "bytes": "615", + "sentBytes": "280" + }, + { + "receivedBytes": "498", + "sessions": "1", + "serverCountry": "Laos", + "serverId": "", + "packets": "9", + "bytes": "919", + "sentBytes": "421" + }, + { + "receivedBytes": "90", + "sessions": "1", + "serverCountry": "Denmark", + "serverId": "DK", + "packets": "2", + "bytes": "180", + "sentBytes": "90" + }, + { + "receivedBytes": "19981", + "sessions": "58", + "serverCountry": "United Kingdom", + "serverId": "", + "packets": "214", + "bytes": "45834", + "sentBytes": "25853" + }, + { + "receivedBytes": "998", + "sessions": "4", + "serverCountry": "Venezuela", + "serverId": "", + "packets": "8", + "bytes": "1311", + "sentBytes": "313" + }, + { + "receivedBytes": "0", + "sessions": "6", + "serverCountry": "Argentina", + "serverId": "AR", + "packets": "6", + "bytes": "553", + "sentBytes": "553" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Luxembourg", + "serverId": "LU", + "packets": "1", + "bytes": "106", + "sentBytes": "106" + }, + { + "receivedBytes": "7188", + "sessions": "189", + "serverCountry": "Switzerland", + "serverId": "CH", + "packets": "243", + "bytes": "23417", + "sentBytes": "16229" + }, + { + "receivedBytes": "0", + "sessions": "3", + "serverCountry": "Sri Lanka", + "serverId": "LK", + "packets": "3", + "bytes": "318", + "sentBytes": "318" + }, + { + "receivedBytes": "8672", + "sessions": "38", + "serverCountry": "Philippines", + "serverId": "PH", + "packets": "339", + "bytes": "23214", + "sentBytes": "14542" + }, + { + "receivedBytes": "48638", + "sessions": "66", + "serverCountry": "Indonesia", + "serverId": "ID", + "packets": "448", + "bytes": "86156", + "sentBytes": "37518" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Bangladesh", + "serverId": "BD", + "packets": "1", + "bytes": "106", + "sentBytes": "106" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Lithuania", + "serverId": "LT", + "packets": "15", + "bytes": "1950", + "sentBytes": "1950" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Guatemala", + "serverId": "GT", + "packets": "1", + "bytes": "106", + "sentBytes": "106" + }, + { + "receivedBytes": "40098", + "sessions": "173", + "serverCountry": "South Korea", + "serverId": "", + "packets": "628", + "bytes": "88407", + "sentBytes": "48309" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "New Zealand", + "serverId": "NZ", + "packets": "1", + "bytes": "106", + "sentBytes": "106" + }, + { + "receivedBytes": "32446", + "sessions": "29", + "serverCountry": "Australia", + "serverId": "AU", + "packets": "209", + "bytes": "51532", + "sentBytes": "19086" + }, + { + "receivedBytes": "30462468", + "sessions": "1150", + "serverCountry": "United States", + "serverId": "US", + "packets": "34301", + "bytes": "31632321", + "sentBytes": "1169853" + }, + { + "receivedBytes": "0", + "sessions": "1", + "serverCountry": "Uzbekistan", + "serverId": "UZ", + "packets": "1", + "bytes": "106", + "sentBytes": "106" + }, + { + "receivedBytes": "2285", + "sessions": "6", + "serverCountry": "Czech Republic", + "serverId": "CZ", + "packets": "47", + "bytes": "5457", + "sentBytes": "3172" + }, + { + "receivedBytes": "15064", + "sessions": "11", + "serverCountry": "South Africa", + "serverId": "ZA", + "packets": "118", + "bytes": "29107", + "sentBytes": "14043" + }, + { + "receivedBytes": "0", + "sessions": "2", + "serverCountry": "Costa Rica", + "serverId": "CR", + "packets": "2", + "bytes": "212", + "sentBytes": "212" + }, + { + "receivedBytes": "20961", + "sessions": "81", + "serverCountry": "The Netherlands", + "serverId": "", + "packets": "231", + "bytes": "41709", + "sentBytes": "20748" + }, + { + "receivedBytes": "663000", + "sessions": "355", + "serverCountry": "Singapore", + "serverId": "SG", + "packets": "3065", + "bytes": "894750", + "sentBytes": "231750" + }, + { + "receivedBytes": "0", + "sessions": "3", + "serverCountry": "United Arab Emirates", + "serverId": "AE", + "packets": "3", + "bytes": "238", + "sentBytes": "238" + } + ], + "resultType": "table" + } +}