diff options
Diffstat (limited to 'usecaseui-portal/src/app/components/graphiclist')
5 files changed, 518 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css new file mode 100644 index 00000000..7268b5dc --- /dev/null +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css @@ -0,0 +1,93 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content .title { + border-radius: 5px 5px 0 0; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 0; +} +.content .title ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; +} +.content .title ul li { + list-style: none; + padding-left: 32px; + width: 100%; + border-left: 1px solid #eceff4; +} +.content .title ul li h5 { + font: 500 14px "Arial"; + color: #3d4d65; +} +.content .title ul li p { + font: 500 24px "Arial"; + color: #3fa8eb; + margin-bottom: 0; +} +.content .title ul li:nth-child(1) { + border: none; +} +.content .chart { + background-color: #fff; + position: relative; + border-radius: 5px; + margin-bottom: 20px; + height: 106px; +} +.content .chart .select { + padding: 20px 50px; + width: 70%; + float: left; +} +.content .chart .select nz-dropdown { + margin-right: 20px; +} +.content .chart .select nz-dropdown a { + font: 700 12px "Arial"; + color: #3d4d65; +} +.content .chart .select nz-dropdown a:hover { + color: #3fa8eb; +} +.content .chart .AlarmChart { + width: 25%; + padding-top: 7px; + float: left; +} +.content .tablelist { + background-color: #fff; + padding: 24px 10px 0px; + border-radius: 0 0 5px 5px; +} +.content .tablelist .action { + padding: 10px 0 0 20px; +} +.content .tablelist .action .details { + display: inline-block; + width: 16px; + height: 16px; + background: url(../../../assets/images/icon.png) center -113px; +} +.content .tablelist .action .details:hover { + background: url(../../../assets/images/icon.png) no-repeat center -128px; +} diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html new file mode 100644 index 00000000..19c7d853 --- /dev/null +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html @@ -0,0 +1,79 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<div class="content"> + <!-- <div class="title"> + <ul> + <li><h5>CPU</h5> <p>{{alarmList.all }}</p></li> + <li><h5>Memory</h5> <p>{{alarmList.closed }}</p></li> + <li><h5>Disk</h5> <p>{{alarmList.alarm }}</p></li> + </ul> + </div> --> + <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()"> + <app-line [initData]="alarmChartInitBig" [chartData]="alarmChartDataBig"></app-line> + </nz-modal> + <div class="chart"> + <div class="select"> + <nz-dropdown [nzTrigger]="'click'"> + <a nz-dropdown> + {{MeasurementSelected}} <i class="anticon anticon-down"></i> + </a> + <ul nz-menu> + <li nz-menu-item (click)="choseMeasurement(item)" *ngFor="let item of MeasurementList">{{item}}</li> + </ul> + </nz-dropdown> + <nz-dropdown [nzTrigger]="'click'"> + <a nz-dropdown> + {{ReportTimeSelected}} <i class="anticon anticon-down"></i> + </a> + <ul nz-menu> + <li nz-menu-item (click)="choseReportTime(item)" *ngFor="let item of ReportTimeList">{{item}}</li> + </ul> + </nz-dropdown> + </div> + <div class="AlarmChart" (click)="showModalMiddle()"> + <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + </div> + <!-- <button class="open-close" [ngClass]="{'open-close-active':alarmShow}" (click)="alarmShow=!alarmShow"></button> --> + </div> + <div class="tablelist"> + <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger [nzPageSizeOptions]="[5,10,15,20]" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="5%">NO</th> + <th nzWidth="20%">Source Name</th> + <th nzWidth="10%">Priority</th> + <th nzWidth="20%">SpecificProblem</th> + <th nzWidth="20%">Report Time</th> + <th nzWidth="15%">Status</th> + <th nzWidth="10%">Action</th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.name}}</td> + <td>{{item.age}}</td> + <td>{{item.address}}</td> + <td>{{item.address}}</td> + <td>{{item.address}}</td> + <td><a class="action" (click)="detailShow(i+1)"><i class="details"></i></a></td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> +</div> diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less new file mode 100644 index 00000000..30fea328 --- /dev/null +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less @@ -0,0 +1,108 @@ +.content { + .title { + border-radius: 5px 5px 0 0; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 0; + ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; + li { + list-style: none; + padding-left: 32px; + width: 100%; + border-left: 1px solid #eceff4; + h5 { + font: 500 14px "Arial"; + color: #3d4d65; + } + p { + font: 500 24px "Arial"; + color: #3fa8eb; + margin-bottom: 0; + } + } + li:nth-child(1){ + border: none; + } + } + } + .chart { + background-color: #fff; + position: relative; + border-radius: 5px; + margin-bottom: 20px; + height: 106px; + .select { + padding: 20px 50px; + width: 70%; + float: left; + nz-dropdown { + margin-right: 20px; + a { + font: 700 12px "Arial"; + color: #3d4d65; + &:hover { + color: #3fa8eb; + } + } + } + } + .AlarmChart { + // height: 0px; + // border-bottom: 1px solid #f5f5f5; + // transition: all 0.3s linear; + width: 25%; + padding-top: 7px; + float: left; + } + // .alarmChart-active { + // height: 386px; + // } + // .open-close { + // width: 50px; + // height: 25px; + // position: absolute; + // left: 50%; + // bottom: 0px; + // transform: translate(-25px,0); + // border: none; + // outline: none; + // cursor: pointer; + // background-color: #fff; + // background: url(../../../assets/images/open-close.png) no-repeat center -27px; + // &:hover { + // background: url(../../../assets/images/open-close.png) no-repeat center -79px; + // } + // } + // .open-close-active { + // background: url(../../../assets/images/open-close.png) center -1px; + // &:hover { + // background: url(../../../assets/images/open-close.png) no-repeat center -53px; + // } + // } + } + .tablelist { + background-color: #fff; + padding: 24px 10px 0px; + border-radius: 0 0 5px 5px; + .action{ + padding: 10px 0 0 20px; + .details{ + display: inline-block; + width: 16px; + height: 16px; + background: url(../../../assets/images/icon.png) center -113px; + &:hover { + background: url(../../../assets/images/icon.png) no-repeat center -128px; + } + } + } + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts new file mode 100644 index 00000000..013db38a --- /dev/null +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GraphiclistComponent } from './graphiclist.component'; + +describe('GraphiclistComponent', () => { + let component: GraphiclistComponent; + let fixture: ComponentFixture<GraphiclistComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GraphiclistComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GraphiclistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts new file mode 100644 index 00000000..fc86ee0d --- /dev/null +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts @@ -0,0 +1,213 @@ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; + +@Component({ + selector: 'app-graphiclist', + templateUrl: './graphiclist.component.html', + styleUrls: ['./graphiclist.component.less'] +}) +export class GraphiclistComponent implements OnInit { + + constructor() { } + isVisibleMiddle = false; + + showModalMiddle(): void { + this.isVisibleMiddle = true; + } + handleOkMiddle(): void { + console.log('click ok'); + this.isVisibleMiddle = false; + } + handleCancelMiddle(): void { + this.isVisibleMiddle = false; + } + + ngOnInit() { + } + + // 筛选框（下拉框） + MeasurementList = ['aaaa','bbbb','cccc','dddddDDDD']; + MeasurementSelected = "Measurement"; + ReportTimeList = ['aaaa','bbbb','cccc','ddddd']; + ReportTimeSelected = "ReportTime"; + choseMeasurement(item){ + console.log(item); + this.MeasurementSelected = item; + } + choseReportTime(item){ + console.log(item); + this.ReportTimeSelected = item; + } + + sort(e){ + + } + // 数量统计 + alarmList = { + all:22439, + closed:37923, + alarm: 12342 + } + + //折线图 + alarmChartData:Object; + alarmChartInit:Object = { + height:100, + width:290, + option:{ + tooltip : { + show : false, + }, + legend: { + show :false, + }, + series: [ + { + name: 'Memory', + type: 'bar', + legendHoverLink: true, + barWidth: "25%", + //timeframe_one + data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45], + itemStyle: { + color: "#3fa8eb" + }, + } + ] + } + }; + //折线图 + alarmChartDataBig:Object; + alarmChartInitBig:Object = { + height:240, + width:500, + option:{ + tooltip : { + show : true, + trigger: 'axis', + }, + legend: { + bottom: 'bottom', + data: ['Memory'] + }, + series: [ + { + name: 'Memory', + type: 'bar', + legendHoverLink: true, + barWidth: "25%", + //timeframe_one + data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45], + itemStyle: { + color: "#3fa8eb" + }, + } + ] + } + }; + + //表格数据 + dataSet = [ + { + name : 'John Brown', + age : 32, + expand : false, + address : 'New York No. 1', + description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' + }, + { + name : 'Aim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Xim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'aoe Black', + age : 32, + expand : false, + address : 'Sidney No. 1', + description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' + } + ]; + + @Output() detailData = new EventEmitter(); + detailShow(id){ + let prems = { + id:id, + detailShow: true + } + this.detailData.emit(prems); + + } + +} |