diff options
Diffstat (limited to 'usecaseui-portal/src/app/components')
4 files changed, 101 insertions, 184 deletions
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css index 7268b5dc..e3912fca 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css @@ -1,18 +1,3 @@ -/* - 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; @@ -48,31 +33,29 @@ border: none; } .content .chart { - background-color: #fff; position: relative; border-radius: 5px; margin-bottom: 20px; - height: 106px; + height: 70px; } .content .chart .select { - padding: 20px 50px; + padding: 20px 20px 20px 0px; 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 span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; } -.content .chart .select nz-dropdown a:hover { - color: #3fa8eb; +.content .chart .select .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; } -.content .chart .AlarmChart { - width: 25%; - padding-top: 7px; - float: left; +.content .chart .select .search span { + color: #fff; + font-weight: 400; } .content .tablelist { background-color: #fff; diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html index 19c7d853..8a1e64da 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html @@ -14,66 +14,44 @@ 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> + <!-- <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"> + <span>Report Time: </span> + <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker> + + <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button> + </div> </div> - <div class="AlarmChart" (click)="showModalMiddle()"> - <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + <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> - <!-- <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> +
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less index 30fea328..f6f1435b 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less @@ -34,34 +34,48 @@ } } .chart { - background-color: #fff; + // background-color: #fff; position: relative; border-radius: 5px; margin-bottom: 20px; - height: 106px; + height: 70px; .select { - padding: 20px 50px; + padding: 20px 20px 20px 0px; width: 70%; float: left; - nz-dropdown { - margin-right: 20px; - a { - font: 700 12px "Arial"; - color: #3d4d65; - &:hover { - color: #3fa8eb; - } + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; } } + // 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 { + // // height: 0px; + // // border-bottom: 1px solid #f5f5f5; + // // transition: all 0.3s linear; + // width: 25%; + // padding-top: 7px; + // float: left; + // } // .alarmChart-active { // height: 386px; // } diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts index fc86ee0d..6eaf19f4 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import * as addDays from 'date-fns/add_days'; @Component({ selector: 'app-graphiclist', @@ -8,18 +9,18 @@ import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@an export class GraphiclistComponent implements OnInit { constructor() { } - isVisibleMiddle = false; + // isVisibleMiddle = false; - showModalMiddle(): void { - this.isVisibleMiddle = true; - } - handleOkMiddle(): void { - console.log('click ok'); - this.isVisibleMiddle = false; - } - handleCancelMiddle(): void { - this.isVisibleMiddle = false; - } + // showModalMiddle(): void { + // this.isVisibleMiddle = true; + // } + // handleOkMiddle(): void { + // console.log('click ok'); + // this.isVisibleMiddle = false; + // } + // handleCancelMiddle(): void { + // this.isVisibleMiddle = false; + // } ngOnInit() { } @@ -37,74 +38,15 @@ export class GraphiclistComponent implements OnInit { console.log(item); this.ReportTimeSelected = item; } + // Date screening + dateRange = [ addDays(new Date(), -30), new Date() ]; + onChange(result: Date): void { + console.log('onChange: ', result); + } 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 = [ { |