summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/fcaps
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/views/fcaps')
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html4
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less41
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts15
3 files changed, 38 insertions, 22 deletions
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
index ca3c1eff..921e5edb 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
@@ -1,4 +1,4 @@
-<div>
+<div class="monitor-content">
<h1>Slicing business Monitor</h1>
<div nz-row>
<div nz-col nzSpan="12" class="monitorDate">
@@ -13,7 +13,7 @@
></nz-date-picker>
</div>
</div>
- <div nz-row nzType="flex" nzGutter="16" class="charts">
+ <div nz-row nzType="flex" class="charts">
<div nz-col nzSpan="6" class="gutter-row col-boxshadow">
<h4>Slicing Use Traffic</h4>
<app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie>
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
index a100638b..f740102b 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
@@ -1,20 +1,25 @@
-.monitorDate{
- //margin-left: 2%;
- margin-top: 30px;
-}
-.businessmonitor_imagecontainer {
- width: 100%;
- margin-bottom: 20px;
-}
-.charts{
- margin: 30px 0 10px 0;
-}
-.col-boxshadow{
- padding: 25px;
- margin: 0 10px;
- border-radius: 5px;
- box-shadow: #a9a9a92e 0px 0px 15px 10px;
- h4{
- font-size: 18px;
+.monitor-content {
+ h1{
+ padding: 20px;
+ }
+ .monitorDate {
+ margin-left: 20px;
+ margin-top: 30px;
+ }
+ .businessmonitor_imagecontainer {
+ width: 100%;
+ margin-bottom: 20px;
+ }
+ .charts {
+ margin: 30px 0 10px 10px !important;
+ }
+ .col-boxshadow {
+ padding: 25px;
+ margin: 0 1%;
+ border-radius: 5px;
+ box-shadow: #a9a9a92e 0px 0px 15px 10px;
+ h4 {
+ font-size: 18px;
+ }
}
} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
index e1eee188..0ad68c55 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
@@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { SlicingTaskServices } from '.././../../core/services/slicingTaskServices';
import { pieChartconfig, lineChartconfig } from './monitorEchartsConfig';
+import *as moment from 'moment';
@Component({
selector: 'app-monitor-5g',
templateUrl: './monitor-5g.component.html',
@@ -90,6 +91,8 @@ export class Monitor5gComponent implements OnInit {
this.myhttp.getFetchTraffic(service_list, time).subscribe(res => {
const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res;
if (+result_code === 200 && slicing_usage_traffic_list.length > 0) {
+ this.trafficData = [];
+ this.trafficLegend = [];
slicing_usage_traffic_list.forEach((item) => {
this.trafficData.push({
name: item.service_id,
@@ -120,8 +123,12 @@ export class Monitor5gComponent implements OnInit {
this.myhttp.getFetchOnlineusers(service_list, time).subscribe(res => {
const { result_header: { result_code }, result_body: { slicing_online_user_list } } = res;
if (+result_code === 200) {
+ this.onlineuserXAxis = [];
+ this.onlineusersData = [];
+ this.onlineuserLegend = [];
slicing_online_user_list[0].online_user_list.map((key) => {
- this.onlineuserXAxis.push(key.timestamp)
+ let date = moment(Number(key.timestamp)).format('YYYY-MM-DD/HH:mm').split("/")[1];
+ this.onlineuserXAxis.push(date)
});
slicing_online_user_list.forEach((item) => {
this.onlineuserLegend.push(item.service_id);
@@ -148,8 +155,12 @@ export class Monitor5gComponent implements OnInit {
this.myhttp.getFetchBandwidth(service_list, time).subscribe(res => {
const { result_header: { result_code }, result_body: { slicing_total_bandwidth_list } } = res;
if (+result_code === 200) {
+ this.bandwidthXAxis = [];
+ this.bandwidthData = [];
+ this.bandwidthLegend = [];
slicing_total_bandwidth_list[0].total_bandwidth_list.map((key) => {
- this.bandwidthXAxis.push(key.timestamp)
+ let date = moment(Number(key.timestamp)).format('YYYY-MM-DD/HH:mm').split("/")[1];
+ this.bandwidthXAxis.push(date)
});
slicing_total_bandwidth_list.forEach((item) => {
this.bandwidthLegend.push(item.service_id);