diff options
Diffstat (limited to 'usecaseui-portal')
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) { |