summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html13
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less15
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts43
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts36
4 files changed, 103 insertions, 4 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 74a88dc7..baf43f43 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
@@ -3,6 +3,7 @@
<div nz-col nzSpan="12" class="monitorDate">
<nz-date-picker
nzShowTime
+ [nzShowToday]="false"
nzFormat="yyyy-MM-dd HH:mm:ss"
nzPlaceHolder="Select Time"
ngModel
@@ -11,6 +12,18 @@
></nz-date-picker>
</div>
</div>
+ <div nz-row nzType="flex" nzGutter="16" 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>
+ </div>
+ <div nz-col nzSpan="9" class="gutter-row col-boxshadow">
+ col-9
+ </div>
+ <div nz-col nzSpan="9" class="gutter-row col-boxshadow">
+ col-9
+ </div>
+ </div>
<div class="slicing-resource-table">
<div class="slicing-resource-table-list">
<nz-table
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 cad2aeaa..152dc218 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,4 +1,19 @@
.monitorDate{
margin-left: 2%;
margin-top: 30px;
+}
+.businessmonitor_imagecontainer {
+ width: 100%;
+ margin-bottom: 20px;
+}
+.charts{
+ margin: 30px 0px;
+}
+.col-boxshadow{
+ padding: 25px;
+ 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 5511c1c0..e7d05ced 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,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import {SlicingTaskServices} from '.././../../core/services/slicingTaskServices';
+import {pieChartconfig} from './monitorEchartsConfig';
@Component({
selector: 'app-monitor-5g',
templateUrl: './monitor-5g.component.html',
@@ -17,9 +18,12 @@ export class Monitor5gComponent implements OnInit {
total: number = 0;
loading = false;
trafficData: any[] =[];
+ trafficLegend: any[] =[];
onlineusersData: any[] =[];
bandwidthData: any[] =[];
- selectDate: Date = null;
+ selectDate: number = 0;
+ trafficChartInit :Object = pieChartconfig;
+ trafficChartData :Object;
ngOnInit() {
this.getBusinessList()
}
@@ -45,16 +49,24 @@ export class Monitor5gComponent implements OnInit {
}
onDateChange(result: Date): void {
console.log('Selected Time: ', result);
+ if(result === null){
+ this.selectDate = 0;
+ this.getChartsData()
+ }
}
onDateOk(result: Date): void {
console.log('onOk', result);
- this.selectDate = result;
+ this.selectDate = result.valueOf();
+ this.getChartsData();
}
getChartsData = (time = new Date().getTime()) => {
if (!this.listOfData.length) {
return false;
}
+ if(this.selectDate !==0){
+ time = this.selectDate
+ }
const service_list = [];
this.listOfData.forEach(item => {
service_list.push({service_id: item.service_instance_id});
@@ -66,8 +78,31 @@ export class Monitor5gComponent implements OnInit {
fetchTrafficData(service_list, time){
this.myhttp.getFetchTraffic(service_list,time).subscribe (res => {
const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res;
- if (+result_code === 200) {
- this.trafficData = slicing_usage_traffic_list;
+ if (+result_code === 200 && slicing_usage_traffic_list.length >0) {
+ console.log(this.trafficChartInit,"----trafficChartInit")
+ slicing_usage_traffic_list.forEach((item)=>{
+ this.trafficData.push({
+ name:item.service_id,
+ value:item.traffic_data
+ });
+ this.trafficLegend.push(item.service_id)
+ });
+ this.trafficChartData = {
+ legend:{
+ orient: 'vertical',
+ left: '0px',
+ bottom: '0px',
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ color: "#3C4F8C"
+ },
+ data: this.trafficLegend
+ },
+ series: [{
+ data: this.trafficData
+ }]
+ };
}
})
}
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts
new file mode 100644
index 00000000..59ed7f25
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts
@@ -0,0 +1,36 @@
+export const pieChartconfig = {
+ height: 320,
+ option: {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}\n{c},{d}%'
+ },
+ legend: {
+ orient: 'vertical',
+ left: '0px',
+ bottom: '0px',
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ color: "#3C4F8C"
+ },
+ data: []
+ },
+ color: ["#7AC0EF", "#FB7788","#6A86D8","#A6BFE4","#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"],
+ series: [{
+ name: "",
+ radius: '55%',
+ center: ['50%', '45%'],
+ label: {
+ normal: {
+ show: false,
+ },
+ emphasis: {
+ show: false,
+ formatter: '{b}\n{c},{d}%',
+ color: "#3C4F8C"
+ }
+ }
+ }]
+ }
+}; \ No newline at end of file