content Alarm function modification

Change-Id: I9e37bed3cf619fcd60f3b638f3816a8781111cc2
Issue-ID: USECASEUI-165
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

4 files changed, 183 insertions, 260 deletions

diff --git a/usecaseui-portal/src/app/alarm/alarm.component.css b/usecaseui-portal/src/app/alarm/alarm.component.css
index 757a55b6..cb6a8edc 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.css
+++ b/usecaseui-portal/src/app/alarm/alarm.component.css
@@ -24,6 +24,13 @@ hr {
   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";
@@ -64,6 +71,12 @@ hr {
   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;
@@ -72,19 +85,14 @@ hr {
 ::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;
@@ -95,29 +103,27 @@ hr {
   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;
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html
index 8f95de37..fcb0e70e 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.html
+++ b/usecaseui-portal/src/app/alarm/alarm.component.html
@@ -14,100 +14,95 @@
     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>
-        &nbsp;&nbsp;
-        <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>
-        &nbsp;&nbsp;
-        <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>
+    &nbsp;&nbsp;
+    <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>
+    &nbsp;&nbsp;
+    <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
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less
index 2d05c703..dc07bdc6 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.less
+++ b/usecaseui-portal/src/app/alarm/alarm.component.less
@@ -1,3 +1,18 @@
+/*
+    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;
@@ -10,7 +25,10 @@ hr {
     margin-bottom: 20px;
 }
 .select {
+    clear: both;
     .query_criteria {
+        width: 75%;
+        float: left;
         span {
             display: inline-block;
             font: 700 14px "Arial";
@@ -53,10 +71,14 @@ hr {
             }
         }
     }
-   
+    .thumbnail {
+        width: 25%;
+        height: 90px;
+        float: left;
+        margin-top: 8px;
+    }
 }
 // model style
-
 ::ng-deep .vertical-center-modal {
     display: flex;
     align-items: center;
@@ -65,53 +87,47 @@ hr {
 ::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;
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts
index 72dd5181..42b05b16 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.ts
+++ b/usecaseui-portal/src/app/alarm/alarm.component.ts
@@ -1,3 +1,18 @@
+/*
+    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';
@@ -41,18 +56,11 @@ export class AlarmComponent implements OnInit {
   }
 
   // 筛选框（下拉框）
-  // 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');
@@ -73,16 +81,11 @@ export class AlarmComponent implements OnInit {
   onChange(result: Date): void {
     console.log('onChange: ', result);
   }
-  // search(){
-  //   this.myhttp.getAlarmFormData().subscribe
-
-  // }
   sort(e){
 
   }
   // 数量统计
   alarmList = {
-    all:22439,
     closed:37923,
     Action: 12342
   }
@@ -250,101 +253,6 @@ export class AlarmComponent implements OnInit {
       ]
     }
   };
-  //表格数据
-  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;
   // 显示隐藏动画
@@ -371,9 +279,7 @@ export class AlarmComponent implements OnInit {
 };
   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');
     })
   }