summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2019-01-09 16:30:41 +0800
committerzhangab <zhanganbing@chinamobile.com>2019-01-09 16:30:55 +0800
commitee500f6f43efc488033f7be223a08b0dbe087af6 (patch)
tree38e65d93bbe74ae8290ba6de8e822c71019e9947 /usecaseui-portal/src/app
parentbd4942df4f188a4ec273a5ec95c99acb1ce6bb75 (diff)
Support NS Package Query for VF-C
Change-Id: I0501df1d699baea97149a404708b55a65f15d95e Issue-ID: USECASEUI-159 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app')
-rw-r--r--usecaseui-portal/src/app/components/charts/bar/bar.component.html10
-rw-r--r--usecaseui-portal/src/app/components/charts/bar/bar.component.ts46
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.ts13
-rw-r--r--usecaseui-portal/src/app/components/charts/pie/pie.component.ts11
-rw-r--r--usecaseui-portal/src/app/home/home.component.html33
-rw-r--r--usecaseui-portal/src/app/home/home.component.less115
-rw-r--r--usecaseui-portal/src/app/home/home.component.ts214
-rw-r--r--usecaseui-portal/src/app/homes.service.ts5
8 files changed, 354 insertions, 93 deletions
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/components/charts/bar/bar.component.html
index a7cd0677..8e3e537d 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.html
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.html
@@ -13,6 +13,10 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<p>
- bar works!
-</p>
+<div echarts
+[initOpts]="initOpts"
+[options]="barOption"
+[merge]="updateOption"
+(chartInit)="chartInit($event)">
+ Bar Chart
+</div>
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
index fa9ecbbd..a7947f4e 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
selector: 'app-bar',
@@ -7,9 +8,52 @@ import { Component, OnInit } from '@angular/core';
})
export class BarComponent implements OnInit {
+ // 图形数据
+ @Input() chartData;
+ // 初始化数据
+ @Input() initData;
+
constructor() { }
ngOnInit() {
+ this.initOpts = {
+ renderer: 'canvas',
+ height: 40,
+ width: 160,
+
+ };
+ this.barOption = {
+ xAxis: this.initData.option.xAxis,
+ yAxis: {
+ type: 'category',
+ show: false,
+ axisTick: {
+ show: false
+ }
+ },
+ series: this.initData.option.series
+ }
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ // 当有实例的时候再执行,相当于第一次不执行下面方法
+ if (this.chartIntance) {
+ this.chartDataChange()
+ }
+ }
+ // 初始化图形高度
+ initOpts: any;
+ // 折线图配置
+ barOption: any;
+ // 实例对象
+ chartIntance: any;
+ // 数据变化
+ updateOption: any;
+ chartDataChange() {
+ this.updateOption = this.chartData;
+ }
+ chartInit(chart) {
+ this.chartIntance = chart;
}
}
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts
index fde63ed6..6c4279cb 100644
--- a/usecaseui-portal/src/app/components/charts/line/line.component.ts
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.ts
@@ -39,7 +39,10 @@ export class LineComponent implements OnInit {
axisLine:{
show: false
},
- data: this.initData.option.xAxis.data
+ axisLabel:{
+ color:"#3C4F8C"
+ },
+ data: this.initData.option.xAxis.data
},
yAxis: {
axisTick: {
@@ -47,6 +50,14 @@ export class LineComponent implements OnInit {
},
axisLine:{
show: false
+ },
+ axisLabel:{
+ color:"#3C4F8C"
+ },
+ splitLine:{
+ lineStyle:{
+ type:"dashed",
+ }
}
},
series : this.initData.option.series
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
index 8a5e2100..69d758e3 100644
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
+++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
@@ -20,6 +20,7 @@ export class PieComponent implements OnInit {
height: this.initData.height
};
this.pieOption = {
+ backgroundColor:this.initData.option.backgroundColor,
legend: this.initData.option.legend,
color:this.initData.option.color,
series : [
@@ -29,19 +30,13 @@ export class PieComponent implements OnInit {
radius : this.initData.option.series[0].radius,
center: ['50%', '45%'],
legendHoverLink: false,
- hoverOffset: 5,
+ hoverOffset: 3,
avoidLabelOverlap: false,
label: this.initData.option.series[0].label,
data:[
{value:1, name:'11'}
],
- itemStyle: {
- emphasis: {
- shadowBlur: 5,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
+ itemStyle: this.initData.option.series[0].itemStyle
}
]
}
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
index c93d3f76..191c67ac 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -13,21 +13,31 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<h3 class="title"> {{"Overall trend" | translate}}</h3>
-<hr>
+
+<!--<h3 class="title"> {{"Overall trend" | translate}}</h3>
+<hr> -->
<div class="content">
<div class="services">
<h4>{{"SERVICES" | translate}}</h4>
- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
- <p>{{serviceNumber}} {{"services has been created" | translate}}</p>
+ <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
+ <p>{{serviceNumber}} {{"services has been created" | translate}}</p> -->
<app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie>
- <p class="tip">View the details</p>
+ <div>
+ <h5> {{serviceNumber}} <span>cutomers and</span> {{serviceNumber}} <span>service intance</span></h5>
+ </div>
+ <div class="details">
+ <li> <div class="detailstoplin" *ngFor="let item of userdata"> <div>{{item.name}}</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar></div> <div>{{item.value1}}/{{item.value2}}</div></div> </li>
+ </div>
+ <p class="tip">View Details</p>
</div>
-
<div class="rightcontent">
<div class="rt-content">
+ <div class="alarm">
+ <h4>{{"ALARM" | translate}}</h4>
+ <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie>
+ </div>
<div class="poerformance">
- <h4>{{"PERFORMANCE" | translate}}</h4>
+ <h4>{{"DEVICES" | translate}}</h4>
<div class="pfVnf">
<h3 class="pfVnfNum">{{performanceVnfNum}}</h3>
<p>Performance VNF</p>
@@ -39,14 +49,9 @@
<img src="./assets/images/VM.png" alt="VM/PM">
</div>
</div>
- <div class="alarm">
- <h4>{{"Alarm" | translate}}</h4>
- <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie>
- </div>
</div>
-
<div class="rb-content">
- <h4>{{"Alarm" | translate}}</h4>
+ <h4>{{"VM PERFORMANCE" | translate}}</h4>
<nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
<button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
<ul nz-menu>
@@ -58,6 +63,4 @@
<app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line>
</div>
</div>
-
</div>
-
diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less
index 89abafa6..750f5a32 100644
--- a/usecaseui-portal/src/app/home/home.component.less
+++ b/usecaseui-portal/src/app/home/home.component.less
@@ -1,14 +1,14 @@
-.title {
- font: 700 18px/18px "鎬濇簮榛戜綋";
- color: #4c5e70;
- margin-bottom: 18px;
-}
-hr {
- border: none;
- height: 2px;
- background-color: #dce1e7;
- margin-bottom: 20px;
-}
+// .title {
+// font: 700 18px/18px "鎬濇簮榛戜綋";
+// color: #4c5e70;
+// margin-bottom: 18px;
+// }
+// hr {
+// border: none;
+// height: 2px;
+// background-color: #dce1e7;
+// margin-bottom: 20px;
+// }
.content {
.services {
float: left;
@@ -18,9 +18,9 @@ hr {
border-radius: 5px;
padding: 28px 22px;
h4 {
- font: 600 16px/16px "Arial";
- color: #3d4d65;
- margin-bottom: 58px;
+ font: 600 16px/16px "Arial Bold";
+ color: #3F9CFF;
+ margin-bottom: 20px;
}
h3 {
font: 400 48px/48px "Arial";
@@ -30,18 +30,67 @@ hr {
font-size: 14px;
}
}
+ h5 {
+ font: 500 16px/16px "ArialMT";
+ color:#3F9CFF;
+ margin: -2em 0 1em 0 ;
+ span {
+ font-size: 12px;
+ font-family: "Arial";
+ color:rgba(60,79,140,1);
+ }
+ span:first-child {
+ padding: 0 4PX 0 4px;
+ }
+ span:last-child {
+ padding-left: 4px;
+ }
+
+ }
p {
font: 400 14px/14px "Arial";
color: #54657e;
text-align: center;
margin-bottom: 48px;
}
+ .details {
+ li {
+ border-bottom:0.5px solid rgba(237,237,237,1);
+ border-radius:4px;
+ line-height: 45px;
+ font-size: 14px;
+ color: #3C4F8C;
+ font-family:"ArialMT";
+ .detailstoplin {
+ width: 100%;
+ height: 50px;
+ border-top: 0.5px solid #ededed;
+ border-radius: 4px;
+ div:first-child{
+ width: 20%;
+ float: left;
+ }
+ div:nth-child(2){
+ width: 65%;
+ float: left;
+ }
+ div:last-child {
+ width: 13%;
+ float: right;
+ font-size:12px;
+ font-weight: 500;
+ color:rgba(60,79,140,0.5);
+ }
+ }
+ }
+ }
.tip {
+ width: 110px;
background-color: #eceff4;
- color: #3d4d65;
+ color: #3C4F8C;
font-size: 16px;
- margin: 0 20px;
- height: 35px;
+ float: right;
+ margin-top: 53px;
line-height: 35px;
border-radius: 5px;
}
@@ -54,34 +103,44 @@ hr {
height: 220px;
margin-bottom: 18px;
.poerformance {
- float: left;
+ float: left;
+ margin-left: 2%;
background-color: #fff;
height: 100%;
width: 50%;
border-radius: 5px;
padding: 28px 26px;
+ .pfVmPm {
+ h3 {
+ color:#BD57E5;
+ }
+ }
h4 {
- font: 600 16px/16px "Arial";
- color: #3d4d65;
+ font: 600 16px/16px "Arial Bold";
+ color: #3F9CFF;
margin-bottom: 34px;
}
+
div {
height: 57px;
position: relative;
margin-bottom: 10px;
h3 {
font: 600 25px/25px "Arial";
- color: #3d4d65;
+ color: #2F6AEF;
margin-bottom: 10px;
+ padding-left: 50%;
}
p {
font: 400 12px/12px "Arial";
- color: #54657e
+ color:rgba(60,79,140,0.5);
+ padding-left: 50%;
+
}
img {
position: absolute;
top: 0;
- right: 0;
+ left: 0;
}
}
}
@@ -90,14 +149,14 @@ hr {
background-color: #fff;
height: 100%;
width: 48%;
- margin-left: 2%;
+
border-radius: 5px;
position: relative;
padding: 28px 26px;
h4 {
position: absolute;
- font: 600 16px/16px "Arial";
- color: #3d4d65;
+ font: 600 16px/16px "Arial Bold";
+ color: #3F9CFF;
}
}
}
@@ -108,8 +167,8 @@ hr {
padding: 24px 30px;
position: relative;
h4 {
- font: 600 16px/16px "Arial";
- color: #3d4d65;
+ font: 600 16px/16px "Arial Bold";
+ color: #3F9CFF;
}
nz-dropdown {
position: absolute;
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
index e893453e..29211810 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -20,6 +20,7 @@ export class HomeComponent implements OnInit {
this.getHomePerformanceData();
this.getHomeAlarmData();
this.getHomeAlarmChartData();
+ this.getHomeServiceBarData();
}
@@ -27,6 +28,7 @@ export class HomeComponent implements OnInit {
serviceNumber:number = 0;
serviceChartData:Object;
serviceChartInit:Object = {
+ backgroundColor: '#fff',
height: 300,
option:{
legend: {
@@ -35,21 +37,22 @@ export class HomeComponent implements OnInit {
bottom: '0px',
data: ['Active','Closed']
},
- color:["#3fa8eb","#1abb9b","#a4ead7"],
- series:[{
- name:"鏈嶅姟淇℃伅",
- radius : ['45%','65%'],
- avoidLabelOverlap: false,
- label:{
- normal:{
- show: false,
- position: 'center'
- },
- emphasis: {
- show: true,
- formatter:'{b}\n{c}',
- textStyle: {
- fontSize: '20',
+ color: ["#7AC0EF", "#6A86D8", "#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"],
+ series: [
+ {
+ name: "鏈嶅姟淇℃伅",
+ radius: ['50%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ normal: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ show: true,
+ formatter: '{b}\n{c}',
+ textStyle: {
+ fontSize: '18',
fontWeight: 'bold'
}
}
@@ -57,9 +60,19 @@ export class HomeComponent implements OnInit {
labelLine: {
normal: {
show: false
- }
- },
- }]
+ }
+ },
+ itemStyle: {
+ normal: {
+ borderWidth: 4,
+ borderColor: "#fff"
+ },
+ emphasis: {
+ borderWidth: 0
+ }
+ },
+ }
+ ]
}
};
// gethomeServiceData
@@ -93,25 +106,56 @@ export class HomeComponent implements OnInit {
// alarm楗煎浘
alarmChartData:Object;
alarmChartInit:Object = {
- height: 164,
+ height: 180,
option:{
legend: {
orient: 'vertical',
left: '0px',
bottom: '0px',
- data: ['Active','Closed']
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ color: "#3C4F8C"
+ },
+ data: ['Active', 'Fixed']
},
- color:["#fb6e6e","#526b75"],
- series:[{
- name:"鍛婅淇℃伅",
- radius : '55%',
- label:{
- normal:{
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#FB93C2' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1, color: '#FB7788' // 100% 澶勭殑棰滆壊
+ }],
+ globalCoord: false // 缂虹渷涓 false
+ }, {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#A6BFE4' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1, color: '#7A8BAE' // 100% 澶勭殑棰滆壊
+ }],
+ globalCoord: false // 缂虹渷涓 false
+ }],
+ series: [{
+ name: "鍛婅淇℃伅",
+ radius: '55%',
+ label: {
+ normal: {
show: false,
},
emphasis: {
show: true,
- formatter:'{b}\n{c},{d}%',
+ formatter: '{b}\n{c},{d}%',
+ color: "#3C4F8C"
}
}
}]
@@ -122,7 +166,7 @@ export class HomeComponent implements OnInit {
.subscribe((data)=>{
this.alarmChartData ={
series:[{
- data:[{name:"Active",value:data[0]},{name:"Closed",value:data[1]}]
+ data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
}]
};
})
@@ -135,7 +179,7 @@ export class HomeComponent implements OnInit {
option:{
legend: {
bottom: '0px',
- data: ['All','Active','Closed']
+ data: ['CPU', 'Memory', 'Disk']
},
xAxis:{
data:["2018-09-10 ","2018-09-11","2018-09-12","2018-09-13","2018-09-14",
@@ -144,23 +188,119 @@ export class HomeComponent implements OnInit {
},
series : [
{
- name: 'All',
- type: 'line',
- data:[30,45,34,35,43,56,36,53,42,45,44,35,32]
+ name: 'CPU',
+ type: 'line',
+ itemStyle: {
+ color: "#70ACEC"
+ },
+ data: [30, 45, 34, 35, 43, 56, 36, 53, 42, 45, 44, 35, 32]
},
{
- name: 'Active',
- type: 'line',
- data:[10,23,24,22,14,15,32,12,12,32,14,23,23]
+ name: 'Memory',
+ type: 'line',
+ itemStyle: {
+ color: "#3BCD79"
+ },
+ data: [10, 23, 24, 22, 14, 15, 32, 12, 12, 32, 14, 23, 23]
},
{
- name: 'Closed',
+ name: 'Disk',
type: 'line',
- data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
+ itemStyle: {
+ color: "#FDC288"
+ },
+ data: [20, 23, 14, 12, 34, 25, 22, 42, 52, 35, 34, 13, 13]
}
]
}
};
+
+ // services杩涘害鏉
+ servicesBarChartData: Object;
+ serviceBarChartInit: Object = {
+ option: {
+ xAxis: {
+ // data: [],
+ type: 'value',
+ show: false,
+ min: 0,
+ max: 80,
+ axisTick: {
+ show: false
+ },
+ },
+ series: [{
+ type: 'bar',
+ name: 'a',
+ silent: true,
+ animation: false,
+ data: [80],
+ stack: 'income',
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: '#7AC0EF',
+ barBorderRadius: [10, 10, 10, 10]
+ }
+ },
+ }, {
+ type: 'bar',
+ name: '',
+ animation: false,
+ silent: true,
+ data: [60],
+ tooltip: {
+ show: false
+ },
+ stack: 'income',
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: '#fff',
+ barBorderRadius: [10, 10, 10, 10]
+ }
+ },
+ label: {
+ normal: {
+ show: false,
+ }
+ },
+ }
+ ]
+ }
+ }
+ userdata;
+ getHomeServiceBarData() {
+ this.myhttp.getHomeServiceBarData()
+ .subscribe((data) => {
+ this.userdata = data.customerServiceList;
+ let Val1;
+ let Val2;
+ let MIN: number = 0;
+ let MAX: number = Val1;
+ Val1 = data.customerServiceList[1].value1;
+ Val2 = data.customerServiceList[1].value2;
+ if (Val1 > Val2) {
+ MIN = 0;
+ MAX = Val1;
+ } else {
+ MIN = Val1 - Val2;
+ MAX = Val2;
+ }
+ this.servicesBarChartData = {
+ xAxis: {
+ min: MIN,
+ max: MAX,
+ },
+ series: [
+ { data: [Val1] },
+ { data: [Val1 - Val2] },
+ ]
+ }
+ }, (err) => {
+ console.log(err);
+ })
+ }
// sourceName绛涢夋
sourceNameList = ['performanceNameOne'];
sourceNameSelected = null;
diff --git a/usecaseui-portal/src/app/homes.service.ts b/usecaseui-portal/src/app/homes.service.ts
index 625c20fc..e6d13366 100644
--- a/usecaseui-portal/src/app/homes.service.ts
+++ b/usecaseui-portal/src/app/homes.service.ts
@@ -28,6 +28,7 @@ export class HomesService {
home_performanceData: this.baseUrl + "/performance/queryAllSourceNames",
home_alarmData: this.baseUrl + "/alarm/statusCount",
home_alarmChartData: this.baseUrl + "/alarm/diagram",
+ home_servicebarData:this.baseUrl + "",
sourceNames: this.baseUrl + "/alarm/getSourceNames",
listSortMasters:this.baseUrl+"/listSortMasters",
@@ -65,6 +66,10 @@ export class HomesService {
let params = new HttpParams({ fromObject: paramsObj });
return this.http.get<any>(this.url.home_alarmChartData, { params });
}
+
+ getHomeServiceBarData(){
+ return this.http.get<any>(this.url.home_servicebarData);
+ }
// alarm data
getAlarmFormData(currentPage: number, pageSize: number, sourceName?: string, priority?: string, startTime?: string, endTime?: string, vfStatus?: string) {