summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/components/graphiclist
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/components/graphiclist')
-rw-r--r--usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css93
-rw-r--r--usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html79
-rw-r--r--usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less108
-rw-r--r--usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts213
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);
+
+ }
+
+}