From de9d2e95b43991fccee342ebed03b006f6fed844 Mon Sep 17 00:00:00 2001 From: zhangab Date: Tue, 23 Oct 2018 11:32:03 +0800 Subject: Build AngularJs component for usecase-ui Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab --- .../app/components/charts/bar/bar.component.html | 18 ++ .../app/components/charts/bar/bar.component.less | 0 .../components/charts/bar/bar.component.spec.ts | 25 +++ .../src/app/components/charts/bar/bar.component.ts | 15 ++ .../app/components/charts/line/line.component.html | 22 +++ .../app/components/charts/line/line.component.less | 0 .../components/charts/line/line.component.spec.ts | 25 +++ .../app/components/charts/line/line.component.ts | 79 ++++++++ .../app/components/charts/pie/pie.component.html | 24 +++ .../app/components/charts/pie/pie.component.less | 0 .../components/charts/pie/pie.component.spec.ts | 25 +++ .../src/app/components/charts/pie/pie.component.ts | 104 ++++++++++ .../app/components/details/details.component.css | 104 ++++++++++ .../app/components/details/details.component.html | 68 +++++++ .../app/components/details/details.component.less | 96 ++++++++++ .../components/details/details.component.spec.ts | 25 +++ .../app/components/details/details.component.ts | 36 ++++ .../graphiclist/graphiclist.component.css | 93 +++++++++ .../graphiclist/graphiclist.component.html | 79 ++++++++ .../graphiclist/graphiclist.component.less | 108 +++++++++++ .../graphiclist/graphiclist.component.spec.ts | 25 +++ .../graphiclist/graphiclist.component.ts | 213 +++++++++++++++++++++ 22 files changed, 1184 insertions(+) create mode 100644 usecaseui-portal/src/app/components/charts/bar/bar.component.html create mode 100644 usecaseui-portal/src/app/components/charts/bar/bar.component.less create mode 100644 usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts create mode 100644 usecaseui-portal/src/app/components/charts/bar/bar.component.ts create mode 100644 usecaseui-portal/src/app/components/charts/line/line.component.html create mode 100644 usecaseui-portal/src/app/components/charts/line/line.component.less create mode 100644 usecaseui-portal/src/app/components/charts/line/line.component.spec.ts create mode 100644 usecaseui-portal/src/app/components/charts/line/line.component.ts create mode 100644 usecaseui-portal/src/app/components/charts/pie/pie.component.html create mode 100644 usecaseui-portal/src/app/components/charts/pie/pie.component.less create mode 100644 usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts create mode 100644 usecaseui-portal/src/app/components/charts/pie/pie.component.ts create mode 100644 usecaseui-portal/src/app/components/details/details.component.css create mode 100644 usecaseui-portal/src/app/components/details/details.component.html create mode 100644 usecaseui-portal/src/app/components/details/details.component.less create mode 100644 usecaseui-portal/src/app/components/details/details.component.spec.ts create mode 100644 usecaseui-portal/src/app/components/details/details.component.ts create mode 100644 usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css create mode 100644 usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html create mode 100644 usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less create mode 100644 usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts create mode 100644 usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts (limited to 'usecaseui-portal/src/app/components') diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/components/charts/bar/bar.component.html new file mode 100644 index 00000000..a7cd0677 --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.html @@ -0,0 +1,18 @@ + +

+ bar works! +

diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.less b/usecaseui-portal/src/app/components/charts/bar/bar.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts new file mode 100644 index 00000000..d979ffb6 --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BarComponent } from './bar.component'; + +describe('BarComponent', () => { + let component: BarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts new file mode 100644 index 00000000..fa9ecbbd --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-bar', + templateUrl: './bar.component.html', + styleUrls: ['./bar.component.less'] +}) +export class BarComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.html b/usecaseui-portal/src/app/components/charts/line/line.component.html new file mode 100644 index 00000000..9a43e28c --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/line/line.component.html @@ -0,0 +1,22 @@ + +
+ Line Chart +
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.less b/usecaseui-portal/src/app/components/charts/line/line.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts b/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts new file mode 100644 index 00000000..afe70654 --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LineComponent } from './line.component'; + +describe('LineComponent', () => { + let component: LineComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LineComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LineComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts new file mode 100644 index 00000000..8bc8ebd8 --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/line/line.component.ts @@ -0,0 +1,79 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks'; + +@Component({ + selector: 'app-line', + templateUrl: './line.component.html', + styleUrls: ['./line.component.less'] +}) +export class LineComponent implements OnInit { + // 图形数据 + @Input() chartData; + // 初始化数据 + @Input() initData; + + constructor() { } + + ngOnInit() { + this.initOpts = { + renderer: 'canvas', + height: this.initData.height, + width: this.initData.width + }; + this.lineOption ={ + tooltip : this.initData.option.tooltip, + icon:'circle', + legend: this.initData.option.legend, + grid: { + left: '1%', + right: '3%', + top: '10%', + bottom: '10%', + containLabel: true + }, + xAxis: { + axisTick: { + show: false, + }, + axisLine:{ + show: false + }, + data: ['01','02','04','06','08','10','12','14','16','18','20','22','24'] + }, + yAxis: { + axisTick: { + show: false, + }, + axisLine:{ + show: false + } + }, + series : this.initData.option.series + } + } + + ngOnChanges(changes:SimpleChanges){ + + // 当有实例的时候再执行，相当于第一次不执行下面方法 + if(this.chartIntance){ + this.chartDataChange() + } + } + // 初始化图形高度 + initOpts:any; + // 折线图配置 + lineOption:any; + // 实例对象 + chartIntance:any; + // 数据变化 + updateOption:any; + chartDataChange(){ + this.updateOption = this.chartData; + } + chartInit(chart){ + this.chartIntance = chart; + } + + + +} diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.html b/usecaseui-portal/src/app/components/charts/pie/pie.component.html new file mode 100644 index 00000000..5f1e94ce --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.html @@ -0,0 +1,24 @@ + +
+ Pie Chart +
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.less b/usecaseui-portal/src/app/components/charts/pie/pie.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts new file mode 100644 index 00000000..528da25c --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PieComponent } from './pie.component'; + +describe('PieComponent', () => { + let component: PieComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PieComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PieComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts new file mode 100644 index 00000000..8a5e2100 --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts @@ -0,0 +1,104 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks'; + +@Component({ + selector: 'app-pie', + templateUrl: './pie.component.html', + styleUrls: ['./pie.component.less'] +}) +export class PieComponent implements OnInit { + // 图形数据 + @Input() chartData; + // 初始化数据 + @Input() initData; + + constructor() { } + + ngOnInit() { + this.initOpts = { + renderer: 'canvas', + height: this.initData.height + }; + this.pieOption = { + legend: this.initData.option.legend, + color:this.initData.option.color, + series : [ + { + name: this.initData.option.series[0].name, + type: 'pie', + radius : this.initData.option.series[0].radius, + center: ['50%', '45%'], + legendHoverLink: false, + hoverOffset: 5, + avoidLabelOverlap: false, + label: this.initData.option.series[0].label, + data:[ + {value:1, name:'11'} + ], + itemStyle: { + emphasis: { + shadowBlur: 5, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + } + } + + ngOnChanges(changes:SimpleChanges){ + + // 当有实例的时候再执行，相当于第一次不执行下面方法 + if(this.chartIntance){ + this.chartDataChange() + } + } + + // 初始化图形高度 + initOpts:any; + // alarm饼图 + pieOption:any; + // 实例对象 + chartIntance:any; + // 数据变化 + updateOption:any; + chartDataChange(){ + this.updateOption = this.chartData; + // 要等到updateOption渲染完再执行 + this.chartIntance.on('finished',()=>{ + this.chartIntance.dispatchAction({ + type:'highlight', + seriesIndex: 0, + dataIndex:0 + }) + // 由于所有视图变化渲染都会执行，更新完注销此事件 + this.chartIntance.off('finished') + }) + } + + chartInit(chart){ + this.chartIntance = chart; + } + + pieMouseOver(e){ + this.chartIntance.dispatchAction({ + type:'downplay' + }) + this.chartIntance.dispatchAction({ + type:'highlight', + seriesIndex: 0, + dataIndex:e.dataIndex + }) + } + + pieMouseOut(e){ + this.chartIntance.dispatchAction({ + type:'highlight', + seriesIndex: 0, + dataIndex:e.dataIndex + }) + } + + +} 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 @@ + +
+
+

HEADER INFORMATION

+
+
+
+

Version :

+

Domain :

+

Event Name : Fault_IMSSBC_Backup MPU is down

+

Event Id : 15105642034

+

EventType :

+

NfcNamingCode :

+

NfNamingCode :

+

SourceName :

+

SourceId :

+

ReportingEntityName :

+

ReportingEntityId :

+
+
+

Priority : Normal

+

ReportTime :

+

ClearTime :

+

FaultFieldsVersion :

+

Event Servrity :

+

EventSourceType :

+

EventCategory :

+

AlarmCondition :

+

SpecificProblem :

+

Status :

+

AlarmInterfaceA :

+
+
+
+
+ +

DETAIL INFORMATION

+
+ + + + Item Name + Item Value + + + + + {{data.name}} + {{data.value}} + + + +
+
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; + + 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'; + } +} 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 @@ + +
+ + + + +
+
+ + + {{MeasurementSelected}} + +
    +
  • {{item}}
    • +
+ + + + {{ReportTimeSelected}} + +
    +
  • {{item}}
    • +
+ +
+
+ +
+ +
+
+ + + + NO + Source Name + Priority + SpecificProblem + Report Time + Status + Action + + + + + + {{i+1}} + {{item.name}} + {{item.age}} + {{item.address}} + {{item.address}} + {{item.address}} + + + + + +
+
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; + + 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); + + } + +} -- cgit 1.2.3-korg