background-color: #dce1e7;
margin-bottom: 20px;
}
+.select {
+ clear: both;
+}
+.select .query_criteria {
+ width: 75%;
+ float: left;
+}
.select .query_criteria span {
display: inline-block;
font: 700 14px "Arial";
color: #fff;
font-weight: 400;
}
+.select .thumbnail {
+ width: 25%;
+ height: 90px;
+ float: left;
+ margin-top: 8px;
+}
::ng-deep .vertical-center-modal {
display: flex;
align-items: center;
::ng-deep .vertical-center-modal .ant-modal {
top: 0;
}
-.content {
- clear: both;
- padding-top: 20px;
-}
-.content .title {
+.titles {
border-radius: 5px 5px 5px 5px;
background-color: #fff;
height: 106px;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
- clear: both;
}
-.content .title ul {
+.titles ul {
display: flex;
display: -webkit-flex;
justify-content: space-around;
width: 70%;
float: left;
}
-.content .title ul li {
+.titles ul li {
list-style: none;
padding-left: 32px;
width: 100%;
border-left: 1px solid #eceff4;
}
-.content .title ul li h5 {
+.titles ul li h5 {
font: 500 14px "Arial";
color: #3d4d65;
}
-.content .title ul li p {
+.titles ul li p {
font: 500 24px "Arial";
color: #3fa8eb;
margin-bottom: 0;
}
-.content .title ul li:nth-child(1) {
+.titles ul li:nth-child(1) {
border: none;
}
-.content .title .thumbnail {
- width: 25%;
- height: 90px;
- float: left;
- margin-top: 8px;
+.content {
+ clear: both;
+ padding-top: 20px;
}
.content .tablelist {
background-color: #fff;
limitations under the License.
-->
<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;">Alarm</span> <span *ngIf="detailshow">>
- Details</span> </h3>
+ Details</span> </h3>
<hr>
-<div class="select" [@showHideAnimate]="state">
- <div class="query_criteria">
- <span>Source Name: </span>
- <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
- <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
- <ul nz-menu>
- <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
- <a>{{item.name}}</a>
- </li>
- </ul>
- </nz-dropdown>
-
- <span>Priority: </span>
- <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
- <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button>
- <ul nz-menu>
- <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList">
- <a>{{item}}</a>
- </li>
- </ul>
- </nz-dropdown>
-
- <span>Status: </span>
- <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
- <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button>
- <ul nz-menu>
- <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList">
- <a>{{item}}</a>
- </li>
- </ul>
- </nz-dropdown>
- <br> <br>
- <span>Report Time: </span>
- <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
+<div class="titles" [@showHideAnimate]="state">
+<ul>
+ <li>
+ <h5>Closed</h5>
+ <p>{{alarmList.closed }}</p>
+ </li>
+ <li>
+ <h5>Action</h5>
+ <p>{{alarmList.Action }}</p>
+ </li>
+</ul>
- <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
- </div>
</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="content" [@showHideAnimate]="state">
- <div class="title">
- <ul>
- <li>
- <h5>All</h5>
- <p>{{alarmList.all }}</p>
+<div class="select" [@showHideAnimate]="state">
+<div class="query_criteria">
+ <span>Source Name: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+ <a>{{item}}</a>
</li>
- <li>
- <h5>Closed</h5>
- <p>{{alarmList.closed }}</p>
+ </ul>
+ </nz-dropdown>
+
+ <span>Priority: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList">
+ <a>{{item}}</a>
</li>
- <li>
- <h5>Action</h5>
- <p>{{alarmList.Action }}</p>
+ </ul>
+ </nz-dropdown>
+
+ <span>Status: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList">
+ <a>{{item}}</a>
</li>
</ul>
- <div class="thumbnail" (click)="showModalMiddle()">
- <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
- </div>
- </div>
- <div class="tablelist">
- <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [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 list; 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 class="action"><a (click)="detailShow()"><i class="details"></i></a></td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
- </div>
+ </nz-dropdown>
+ <br> <br>
+ <span>Report Time: </span>
+ <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
+
+ <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
+</div>
+<div class="thumbnail" (click)="showModalMiddle()">
+ <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+</div>
+</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="content" [@showHideAnimate]="state">
+<div class="tablelist">
+ <nz-table #nzTable [nzData]="list" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [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>
+ <tr *ngFor="let item of list; let i = index;">
+ <td>{{i+1}}</td>
+ <td>{{item.sourceName}}</td>
+ <td>{{item.priority}}</td>
+ <td>{{item.specificProblem}}</td>
+ <td>{{item.sequence}}</td>
+ <td>{{item.status}}</td>
+ <td class="action"><a (click)="detailShow()"><i class="details"></i></a></td>
+ </tr>
+ </tbody>
+ </nz-table>
+</div>
</div>
<div [@showHideAnimate]="state2">
-
<app-details></app-details>
+<app-details></app-details>
</div>
\ No newline at end of file
+/*
+ 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.
+*/
.title {
font: 700 18px/18px "思源黑体";
color: #4c5e70;
margin-bottom: 20px;
}
.select {
+ clear: both;
.query_criteria {
+ width: 75%;
+ float: left;
span {
display: inline-block;
font: 700 14px "Arial";
}
}
}
-
+ .thumbnail {
+ width: 25%;
+ height: 90px;
+ float: left;
+ margin-top: 8px;
+ }
}
// model style
-
::ng-deep .vertical-center-modal {
display: flex;
align-items: center;
::ng-deep .vertical-center-modal .ant-modal {
top: 0;
}
-
-.content {
- clear: both;
- padding-top: 20px;
- .title {
- border-radius: 5px 5px 5px 5px;
- background-color: #fff;
- height: 106px;
- border-bottom: 1px solid #f0f0f0;
- margin-bottom: 20px;
- clear: both;
- ul {
- display: flex;
- display: -webkit-flex;
- justify-content: space-around;
- align-items: center;
- padding: 0;
- margin: 0;
- height: 100%;
- width: 70%;
- float: left;
- 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;
- }
+.titles {
+ border-radius: 5px 5px 5px 5px;
+ background-color: #fff;
+ height: 106px;
+ border-bottom: 1px solid #f0f0f0;
+ margin-bottom: 20px;
+ // clear: both;
+ ul {
+ display: flex;
+ display: -webkit-flex;
+ justify-content: space-around;
+ align-items: center;
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ width: 70%;
+ float: left;
+ li {
+ list-style: none;
+ padding-left: 32px;
+ width: 100%;
+ border-left: 1px solid #eceff4;
+ h5 {
+ font: 500 14px "Arial";
+ color: #3d4d65;
}
- li:nth-child(1){
- border: none;
+ p {
+ font: 500 24px "Arial";
+ color: #3fa8eb;
+ margin-bottom: 0;
}
}
- .thumbnail {
- width: 25%;
- height: 90px;
- float: left;
- margin-top: 8px;
+ li:nth-child(1){
+ border: none;
}
}
+
+}
+.content {
+ clear: both;
+ padding-top: 20px;
.tablelist {
background-color: #fff;
padding: 24px 10px 0px;
+/*
+ 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.
+*/
import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
import { MyhttpService } from '../myhttp.service';
import * as addDays from 'date-fns/add_days';
}
// 筛选框（下拉框）
- // sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD'];
- sourceNameList=[
- {key:null,name:'请选择'},
- {key:1,name:'aaaa'},
- {key:2,name:'bbbb'},
- {key:3,name:'cccc'},
- {key:4,name:'dddddDDDDDDDDDDDDDDD'}
- ]
- sourceNameSelected = this.sourceNameList[0].name;
- priorityList = ['aaaa','bbbb','cccc','ddddd'];
+ sourceNameList = ['---auto---','shentao-test-1001','vnf_a_1','cccc','dddddDDDDDDD'];
+ sourceNameSelected = this.sourceNameList[0];
+ priorityList = ['---auto---','Critical','Major','Minor','Warning'];
prioritySelected = this.priorityList[0];
- statusList = ['aaaa','bbbb','cccc','ddddd'];
+ statusList = ['---auto---','active','Close'];
statusSelected = this.statusList[0];
choseSourceName(item){
console.log(item,'item1');
onChange(result: Date): void {
console.log('onChange: ', result);
}
- // search(){
- // this.myhttp.getAlarmFormData().subscribe
-
- // }
sort(e){
}
// 数量统计
alarmList = {
- all:22439,
closed:37923,
Action: 12342
}
]
}
};
- //表格数据
- 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.'
- }
- ];
-
//详情页标题显示
detailshow = false;
// 显示隐藏动画
};
getAlarmFormData(){
this.myhttp.getAlarmFormData(this.pageNumber,this.pageSize,this.name,this.Priority,this.Status,this.Report).subscribe((data)=>{
- if(data.retCode ==200){
this.list = data.list;
- }
console.log(data,'data');
})
}
Code Review / usecase-ui.git / commitdiff