diff --git a/public/template6.html b/public/template6.html new file mode 100644 index 00000000..8e016994 --- /dev/null +++ b/public/template6.html @@ -0,0 +1,4881 @@ + + + + + 网络服务质量监测报告(IDC精简版) + + + + +
网络服务质量监测报告(IDC精简版)
+
一.整体流量概况
+
1.流量规模概况
+
+
表1 整体流量概况
+ + + + + + + + + + + + + + + + + + + + + +
速率均值速率谷值速率分位值速率峰值速率均值环比总流量总流量环比
451.24 Gbps83.98 Gbps +
+
+
+
+
+
P50
+
+
+
9.31 Gbps
+
+
+
+
+
+
P90
+
+
+
7856.09 Gbps
+
+
+
+
+
+
P99
+
+
+
902.70 Gbps
+
+
+ 		1.02 Tbps0.05%1.02 Tbps0.05%
+
+
* 流量速率分位值计算方式：
以5分钟为时间粒度计算平均流量速率vi，取观测时间范围内的{v1, v2, v3……vn}的分位值，下同。 +
+
+
* 环比计算方式：
计算当前统计值与上一个统计周期（一天前）的统计值相比的变化率，下同。 +
+
+
+
+ + +
图1 当日流量变化曲线
+
+
+ +
2.服务质量概况
+
+
表2 域内访问域外流量的服务质量
+ + + + + + + + + + + + + + + + + + + + + + + + +
服务质量指标分位值峰值均值均值环比
TCP会话创建延迟 +
+
+
+
+
+
P50
+
+
+
499.31 ms
+
+
+
+
+
+
P90
+
+
+
786.09 ms
+
+
+
+
+
+
P99
+
+
+
902.70 ms
+
+
+ 		902.42 ms36.30 ms8.14%
缺包率 +
+
+
+
+
+
P50
+
+
+
3%
+
+
+
+
+
+
P90
+
+
+
4%
+
+
+
+
+
+
P99
+
+
+
5%
+
+
+ 		902.42 %36.30 %8.14%
+
+
+
表3 域外访问域内流量的服务质量
+ + + + + + + + + + + + + + + + + + + + + + + + +
服务质量指标分位值峰值均值均值环比
TCP会话创建延迟 +
+
+
+
+
+
P50
+
+
+
499.31 ms
+
+
+
+
+
+
P90
+
+
+
786.09 ms
+
+
+
+
+
+
P99
+
+
+
902.70 ms
+
+
+ 		902.42 ms36.30 ms8.14%
缺包率 +
+
+
+
+
+
P50
+
+
+
499.31%
+
+
+
+
+
+
P90
+
+
+
786.09%
+
+
+
+
+
+
P99
+
+
+
902.70%
+
+
+ 		902.42%36.30%8.14%
+
+ +
二.业务流量排名
+
+
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
APP流量速率douyinwechartaeraweraecccdouyin2douyin3douyin4douyin5douyin6douyin7
P5055.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
P9055.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
P9955.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps
峰值55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
均值55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
+
图2 TOP10 APP流量情况
+
+ +
三.业务质量概况
+
+
表4 TOP10 APP服务质量情况
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
APP流量占比TCP会话延迟(ms)缺包率
P50 P90 P99均值均值环比P50 P90 P99均值均值环比
douyin6.12% +
+
+
+
+
+
P50
+
+
+
124 ms
+
+
+
+
+
+
P90
+
+
+
143 ms
+
+
+
+
+
+
P99
+
+
+
15 ms
+
+
+ 		27.60 ms2.10% +
+
+
+
+
+
P50
+
+
+
0.01%
+
+
+
+
+
+
P90
+
+
+
0.01%
+
+
+
+
+
+
P99
+
+
+
0.02%
+
+
+ 		0.05%-0.05%
+
+ +
四.地理位置分布
+
1.各省份流量分布
+ +
+
+ + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
APP流量速率北京四川重庆广西台湾日本海南内蒙古河北安徽
P5055.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
P9055.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
P9955.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps
峰值55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
均值55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
+
图3 TOP10省份访问流量分布
+
+
+ + + + + + + + + + + + + +
西宁太原西安
+
+
+ + +
+
+ 		+
+
+ + +
+
+ 		+
+
+ + +
+
+
+
+
图4 TOP3省份访问的主要APP的流量占比
+ +
+ + + + + + + + + + + + + +
douyinwechataaaa
+
+
+ + +
+
+ 		+
+
+ + +
+
+ 		+
+
+ + +
+
+
+
+
图5 访问TOP3 APP的各省份流量占比
+ +
2.省内各地区流量分布
+ +
+
+ + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
APP流量速率北京四川重庆广西台湾日本海南内蒙古河北安徽
P5055.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
P9055.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
P9955.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps
峰值55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
均值55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps27.60 Gbps55.63 Gbps
+
图6 TOP10省内各地区流量分布
+
+ +
+ + + + + + + + + + + + + +
西宁太原西安
+
+
+ + +
+
+ 		+
+
+ + +
+
+ 		+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
图7 TOP3省内各地区访问的主要APP的流量分布
+ +
+ + + + + + + + + + + + + +
douyinwechataaaa
+
+
+ + +
+
+ 		+
+
+ + +
+
+ 		+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
图8 访问TOP3 APP的省内各地区流量占比
+ + + + diff --git a/src/assets/css/components/views/charts/panel.scss b/src/assets/css/components/views/charts/panel.scss index 1b8ea2b5..4d430663 100644 --- a/src/assets/css/components/views/charts/panel.scss +++ b/src/assets/css/components/views/charts/panel.scss @@ -1,5 +1,4 @@ .cn-panel2 { - position: relative; .panel__time { position: absolute; right: 10px; @@ -10,6 +9,7 @@ margin-left: 10px; } } + position: relative; .chart-list { &>.vue-grid-layout>.vue-grid-item, &>.dns-screen { &>.panel-chart { @@ -507,7 +507,18 @@ } } } - +.cn-panel2__whole-screen { + height: calc(100vh - 50px); + width: 100%; + padding: 20px 10px 0 10px; + transition: .2s all linear; + opacity: 1; +} +.cn-panel2__whole-screen.cn-panel2__whole-screen--collapse { + height: 0 !important; + padding-top: 0; + opacity: 0; +} .entity-detail-tool { display: flex; justify-content: space-between; diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue index 62cd54ef..9e85538e 100644 --- a/src/views/charts/Chart.vue +++ b/src/views/charts/Chart.vue @@ -21,7 +21,6 @@ :entity="entity" @getChartData="getChartData" @showLoading="showLoading" - @finishOneMap="finishOneMap" > -
-
-
- - -
- - - - +
+
+ +
-
-
-
-
+
+
+
+ + +
+
+
+
+ + +
+
+
- - diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue index 028a2852..152e8d00 100644 --- a/src/views/charts/PanelChart.vue +++ b/src/views/charts/PanelChart.vue @@ -41,7 +41,6 @@ :time-filter="timeFilter" @getChartData="getChartData" @showLoading="showLoading" - @handleSpecialChartFinishState="handleSpecialChartFinishState" :tabHandleClickType="tabHandleClickType" >
@@ -151,8 +150,7 @@ export default { } ] // table的所有数据 }, - tabHandleClickType: '', - isFinish: false + tabHandleClickType: '' } }, computed: { @@ -266,38 +264,21 @@ export default { } }).finally(() => { this.loading = false - this.handleFinishState() }) } else if (this.isGroup || this.isTabs) { this.$refs.chart.$refs.chart.reload() - this.handleFinishState() } else if (this.isBlock) { if (!this.chartInfo.firstShow) { this.chartInfo.firstShow = true } else { this.$refs.chart.$refs.chart.reload() } - this.handleFinishState() } } catch (e) { console.error(e) setTimeout(() => { this.loading = false - this.handleFinishState() }, 200) - } finally { - this.handleFinishState() - } - }, - handleSpecialChartFinishState () { - this.$emit('finishOne') - }, - handleFinishState () { - if (!this.isMap) { - if (!this.isFinish) { - this.isFinish = true - this.$emit('finishOne') - } } }, handleQueryParams () { diff --git a/src/views/charts/PanelChartList.vue b/src/views/charts/PanelChartList.vue index 919a7b7d..61d2a0d1 100644 --- a/src/views/charts/PanelChartList.vue +++ b/src/views/charts/PanelChartList.vue @@ -1,18 +1,8 @@