summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/components/details
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:03 +0800
committerzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:05 +0800
commitde9d2e95b43991fccee342ebed03b006f6fed844 (patch)
tree0667c51a30fd3fed71fec797136d8adefc7d7baf /usecaseui-portal/src/app/components/details
parent101e5e37f4ece60af8d08020c7e4bd8f473adce7 (diff)
Build AngularJs component for usecase-ui
Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/components/details')
-rw-r--r--usecaseui-portal/src/app/components/details/details.component.css104
-rw-r--r--usecaseui-portal/src/app/components/details/details.component.html68
-rw-r--r--usecaseui-portal/src/app/components/details/details.component.less96
-rw-r--r--usecaseui-portal/src/app/components/details/details.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/components/details/details.component.ts36
5 files changed, 329 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/components/details/details.component.css b/usecaseui-portal/src/app/components/details/details.component.css
new file mode 100644
index 00000000..0d450d28
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.css
@@ -0,0 +1,104 @@
+/*
+ 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 .header {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 30px 28px 0;
+ position: relative;
+ margin-bottom: 30px;
+ border: 1px solid #e4e4e4;
+}
+.content .header hr {
+ margin: 0;
+ border: none;
+ height: 1px;
+ background-color: #e4e4e4;
+}
+.content .header h2 {
+ font: 700 24px/18px 'Times New Roman';
+ color: #3fa8eb;
+ text-align: center;
+ margin-bottom: 27px;
+}
+.content .header span.tildeimg {
+ position: absolute;
+ left: 50%;
+ top: 71px;
+ width: 60px;
+ height: 10px;
+ transform: translate(-30px, 0);
+ background: url(../../../assets/images/tildeimg.png) no-repeat center center;
+ background-color: #fff;
+}
+.content .header .headerlist {
+ display: flex;
+}
+.content .header .headerlist div {
+ width: 100%;
+}
+.content .header .headerlist div p {
+ font: 400 14px 'Arial';
+ color: #323437;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 18px 0 15px;
+}
+.content .header .headerlist div p span {
+ display: inline-block;
+ width: 50%;
+ text-align: right;
+ font: 700 14px 'Arial';
+ color: #3fa8eb;
+}
+.content hr {
+ margin: 0;
+ border: none;
+ height: 1px;
+ background-color: #e4e4e4;
+}
+.content button {
+ width: 88px;
+ height: 22px;
+ position: absolute;
+ left: 50%;
+ transform: translate(-44px, 0);
+ border: none;
+ outline: none;
+ cursor: pointer;
+ background-color: #fff;
+ background: url(../../../assets/images/open-close2.png) no-repeat center -22px;
+}
+.content button:hover {
+ background: url(../../../assets/images/open-close2.png) no-repeat center -66px;
+}
+.content .buttonActive {
+ transform: translate(-44px, -22px);
+ background: url(../../../assets/images/open-close2.png) no-repeat center 0px;
+}
+.content .buttonActive:hover {
+ background: url(../../../assets/images/open-close2.png) no-repeat center -44px;
+}
+.content h2.detailtitle {
+ font: 700 24px/18px 'Times New Roman';
+ color: #3fa8eb;
+ text-align: center;
+ margin-bottom: 15px;
+ padding-top: 25px;
+}
+.content .detailInformatioin {
+ overflow: hidden;
+}
diff --git a/usecaseui-portal/src/app/components/details/details.component.html b/usecaseui-portal/src/app/components/details/details.component.html
new file mode 100644
index 00000000..b5c576c7
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.html
@@ -0,0 +1,68 @@
+<!--
+ 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="header">
+ <h2>HEADER INFORMATION</h2>
+ <hr> <span class="tildeimg"></span>
+ <div class="headerlist">
+ <div class="leftlist">
+ <p> <span>Version :</span> </p>
+ <p> <span>Domain :</span> </p>
+ <p> <span>Event Name :</span> Fault_IMSSBC_Backup MPU is down </p>
+ <p> <span>Event Id :</span> 15105642034 </p>
+ <p> <span>EventType :</span> </p>
+ <p> <span>NfcNamingCode :</span> </p>
+ <p> <span>NfNamingCode :</span> </p>
+ <p> <span>SourceName :</span> </p>
+ <p> <span>SourceId :</span> </p>
+ <p> <span>ReportingEntityName :</span> </p>
+ <p> <span>ReportingEntityId :</span> </p>
+ </div>
+ <div class="rightlist">
+ <p> <span>Priority :</span> Normal </p>
+ <p> <span>ReportTime :</span> </p>
+ <p> <span>ClearTime :</span> </p>
+ <p> <span>FaultFieldsVersion :</span> </p>
+ <p> <span>Event Servrity :</span> </p>
+ <p> <span>EventSourceType :</span> </p>
+ <p> <span>EventCategory :</span> </p>
+ <p> <span>AlarmCondition :</span> </p>
+ <p> <span>SpecificProblem :</span> </p>
+ <p> <span>Status :</span> </p>
+ <p> <span>AlarmInterfaceA :</span> </p>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <button [ngClass]="{'buttonActive':moredetailShow}" (click)="slideUpDown()"></button>
+ <h2 class="detailtitle">DETAIL INFORMATION</h2>
+ <div class="detailInformatioin" [@slideUpDown]='state'>
+ <nz-table #detailTable [nzData]="detailData" [nzShowPagination]="false" nzSize="small" [nzBordered]="true">
+ <thead>
+ <tr>
+ <th nzWidth="18%">Item Name</th>
+ <th >Item Value</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let data of detailTable.data">
+ <td>{{data.name}}</td>
+ <td>{{data.value}}</td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+</div>
diff --git a/usecaseui-portal/src/app/components/details/details.component.less b/usecaseui-portal/src/app/components/details/details.component.less
new file mode 100644
index 00000000..ad81d8a6
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.less
@@ -0,0 +1,96 @@
+
+.content {
+ .header {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 30px 28px 0;
+ position: relative;
+ margin-bottom: 30px;
+ border: 1px solid #e4e4e4;
+ hr {
+ margin: 0;
+ border: none;
+ height: 1px;
+ background-color: #e4e4e4;
+ }
+ h2 {
+ font: 700 24px/18px 'Times New Roman';
+ color: #3fa8eb;
+ text-align: center;
+ margin-bottom: 27px;
+ }
+ span.tildeimg {
+ position: absolute;
+ left: 50%;
+ top: 71px;
+ width: 60px;
+ height: 10px;
+ transform: translate(-30px,0);
+ background: url(../../../assets/images/tildeimg.png) no-repeat center center;
+ background-color: #fff;
+ }
+ .headerlist {
+ display: flex;
+ div {
+ width: 100%;
+ p {
+ font: 400 14px 'Arial';
+ color: #323437;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 18px 0 15px;
+ span {
+ display: inline-block;
+ width: 50%;
+ text-align: right;
+ font: 700 14px 'Arial';
+ color: #3fa8eb;
+ }
+ }
+ }
+ }
+ }
+ hr {
+ margin: 0;
+ border: none;
+ height: 1px;
+ background-color: #e4e4e4;
+ }
+ button {
+ width: 88px;
+ height: 22px;
+ position: absolute;
+ left: 50%;
+ transform: translate(-44px,0);
+ border: none;
+ outline: none;
+ cursor: pointer;
+ background-color: #fff;
+ background: url(../../../assets/images/open-close2.png) no-repeat center -22px;
+ &:hover {
+ background: url(../../../assets/images/open-close2.png) no-repeat center -66px;
+ }
+ }
+ .buttonActive {
+ transform: translate(-44px,-22px);
+ background: url(../../../assets/images/open-close2.png) no-repeat center -0px;
+ &:hover {
+ background: url(../../../assets/images/open-close2.png) no-repeat center -44px;
+ }
+ }
+ h2.detailtitle {
+ font: 700 24px/18px 'Times New Roman';
+ color: #3fa8eb;
+ text-align: center;
+ margin-bottom: 15px;
+ padding-top: 25px;
+ }
+ .detailInformatioin {
+ // transition: all 0.3s linear;
+ overflow: hidden;
+ }
+ .detailshow {
+
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/details/details.component.spec.ts b/usecaseui-portal/src/app/components/details/details.component.spec.ts
new file mode 100644
index 00000000..1d5cbeb8
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+ let component: DetailsComponent;
+ let fixture: ComponentFixture<DetailsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DetailsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DetailsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/components/details/details.component.ts b/usecaseui-portal/src/app/components/details/details.component.ts
new file mode 100644
index 00000000..f9e6474b
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { slideUpDown } from '../../animates';
+
+@Component({
+ selector: 'app-details',
+ templateUrl: './details.component.html',
+ styleUrls: ['./details.component.less'],
+ animations: [ slideUpDown ]
+})
+export class DetailsComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+ ngOnChanges(changes){
+ console.log(changes);
+ }
+ // 详情显示
+ moredetailShow = false;
+ @Input() detailId;
+ detailData = [
+ {name:"DNS.AttDnsQuery",value:"0"},
+ {name:"DNS.SuccDnsQuery",value:"0"},
+ {name:"DNS.SuccDnsQuery",value:"0"},
+ {name:"DNS.SuccDnsQuery",value:"0"},
+ {name:"DNS.SuccDnsQuery",value:"0"},
+ {name:"sssssss",value:"1111"},
+ ]
+ state = 'up'
+ slideUpDown(){
+ this.moredetailShow = !this.moredetailShow;
+ this.state = this.state === 'up' ? 'down' : 'up';
+ }
+}