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 --- usecaseui-portal/src/app/alarm/alarm.component.css | 138 ++++++++ .../src/app/alarm/alarm.component.html | 113 ++++++ .../src/app/alarm/alarm.component.less | 132 +++++++ .../src/app/alarm/alarm.component.spec.ts | 25 ++ usecaseui-portal/src/app/alarm/alarm.component.ts | 380 +++++++++++++++++++++ 5 files changed, 788 insertions(+) create mode 100644 usecaseui-portal/src/app/alarm/alarm.component.css create mode 100644 usecaseui-portal/src/app/alarm/alarm.component.html create mode 100644 usecaseui-portal/src/app/alarm/alarm.component.less create mode 100644 usecaseui-portal/src/app/alarm/alarm.component.spec.ts create mode 100644 usecaseui-portal/src/app/alarm/alarm.component.ts (limited to 'usecaseui-portal/src/app/alarm') diff --git a/usecaseui-portal/src/app/alarm/alarm.component.css b/usecaseui-portal/src/app/alarm/alarm.component.css new file mode 100644 index 00000000..757a55b6 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.css @@ -0,0 +1,138 @@ +/* + 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: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select .query_criteria span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.select .query_criteria nz-dropdown { + vertical-align: middle; +} +.select .query_criteria nz-dropdown :hover { + border-color: #147dc2; +} +.select .query_criteria nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.select .query_criteria nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.select .query_criteria nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.select .query_criteria .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; +} +.select .query_criteria .search span { + color: #fff; + font-weight: 400; +} +::ng-deep .vertical-center-modal { + display: flex; + align-items: center; + justify-content: center; +} +::ng-deep .vertical-center-modal .ant-modal { + top: 0; +} +.content { + clear: both; + padding-top: 20px; +} +.content .title { + border-radius: 5px 5px 5px 5px; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 20px; + clear: both; +} +.content .title ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; + width: 70%; + float: left; +} +.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 .title .thumbnail { + width: 25%; + height: 90px; + float: left; + margin-top: 8px; +} +.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/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html new file mode 100644 index 00000000..8f95de37 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.html @@ -0,0 +1,113 @@ + +

Alarm > + Details

+
+
+
+ Source Name: + + + + +    + Priority: + + + + +    + Status: + + + + +

+ Report Time: + + + +
+
+ + + +
+
+
    +
  • +
    All
    +

    {{alarmList.all }}

    +
    • +
  • +
    Closed
    +

    {{alarmList.closed }}

    +
    • +
  • +
    Action
    +

    {{alarmList.Action }}

    +
    • +
+
+ +
+
+
+ + + + NO + Source Name + Priority + SpecificProblem + Report Time + Status + Action + + + + + + {{i+1}} + {{item.name}} + {{item.age}} + {{item.address}} + {{item.address}} + {{item.address}} + + + + + +
+
+
+ +
\ 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 new file mode 100644 index 00000000..2d05c703 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.less @@ -0,0 +1,132 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + .query_criteria { + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + nz-dropdown { + vertical-align: middle; + :hover{ + border-color: #147dc2; + } + button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; + span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } + } + +} +// model style + +::ng-deep .vertical-center-modal { + display: flex; + align-items: center; + justify-content: 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; + } + } + li:nth-child(1){ + border: none; + } + } + .thumbnail { + width: 25%; + height: 90px; + float: left; + margin-top: 8px; + } + } + .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; + } + } + } + } +} diff --git a/usecaseui-portal/src/app/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts new file mode 100644 index 00000000..c7f5a738 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlarmComponent } from './alarm.component'; + +describe('AlarmComponent', () => { + let component: AlarmComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AlarmComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AlarmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts new file mode 100644 index 00000000..72dd5181 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.ts @@ -0,0 +1,380 @@ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { MyhttpService } from '../myhttp.service'; +import * as addDays from 'date-fns/add_days'; +import { showHideAnimate, slideToRight } from '../animates'; + +@Component({ + selector: 'app-alarm', + templateUrl: './alarm.component.html', + styleUrls: ['./alarm.component.less'], + animations: [ + showHideAnimate, slideToRight + ] +}) +export class AlarmComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; //路由动画 + public pageNumber:number=1; + public pageSize:number=5; + public name:string=''; + public Priority:string =''; + public Status:string =''; + public Report:string =''; + list: any; + + + constructor( + private myhttp:MyhttpService) { } + isVisibleMiddle = false; + + showModalMiddle(): void { + this.isVisibleMiddle = true; + } + handleOkMiddle(): void { + console.log('click ok'); + this.isVisibleMiddle = false; + } + handleCancelMiddle(): void { + this.isVisibleMiddle = false; + } + ngOnInit() { + this.getAlarmFormData(); + } + + // 筛选框（下拉框） + // 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']; + prioritySelected = this.priorityList[0]; + statusList = ['aaaa','bbbb','cccc','ddddd']; + statusSelected = this.statusList[0]; + choseSourceName(item){ + console.log(item,'item1'); + this.sourceNameSelected = item; + } + chosePriority(item){ + console.log(item); + this.prioritySelected = item; + } + choseStatus(item){ + console.log(item); + this.statusSelected = item; + } + + // 日期筛选 + dateRange = [ addDays(new Date(), -30), new Date() ]; + + onChange(result: Date): void { + console.log('onChange: ', result); + } + // search(){ + // this.myhttp.getAlarmFormData().subscribe + + // } + sort(e){ + + } + // 数量统计 + alarmList = { + all:22439, + closed:37923, + Action: 12342 + } + + //折线图縮略圖 + alarmChartData:Object; + alarmChartInit:Object = { + height:100, + width:290, + option:{ + tooltip : { + show : false, + trigger: 'axis', + }, + legend: { + show :false, + bottom: '0px', + data: ['All', 'Active', 'Closed'] + }, + series: [ + { + name: 'All', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_one + data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65], + itemStyle: { + color: "#526b75" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + }, + { + name: 'Active', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12], + itemStyle: { + color: "#fb6e6e" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + }, + { + name: 'Closed', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5], + itemStyle: { + color: "#3fa8eb" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + } + ] + } + }; + getAlarmChartData(){ + let paramsObj = { + alarmSourceName:this.sourceNameSelected + } + this.myhttp.getHomePerformanceChartData(paramsObj) + .subscribe((data)=>{ + this.alarmChartData = { + series:[ + {data:data.CPU}, + {data:data.CPU}, + {data:data.Memory} + ] + } + },(err)=>{ + console.log(err); + }) + } + //折线图放大圖 + alarmChartDataBig:Object; + alarmChartInitBig:Object = { + height:240, + width:500, + option:{ + tooltip : { + show : true, + trigger: 'axis', + }, + legend: { + show :true, + bottom: '0px', + data: ['All', 'Active', 'Closed'] + }, + series: [ + { + name: 'All', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_one + data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65], + itemStyle: { + color: "#526b75" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + }, + { + name: 'Active', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12], + itemStyle: { + color: "#fb6e6e" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + }, + { + name: 'Closed', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5], + itemStyle: { + color: "#3fa8eb" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + } + ] + } + }; + //表格数据 + 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; + // 显示隐藏动画 + state = "show"; + state2 = "hide"; + detailShow() { + this.state = 'hide'; + this.state2 = 'show'; + this.detailshow = true; + } + detailHide() { + this.state = 'show'; + this.state2 = 'hide'; + this.detailshow = false; + } + getSelects:Object = { + countAll:0, + countClose:0, + countActive:0, + eventNameList:[], + sourceIdList:[], + reportingEntityNameList:[], + sourceNameList:[], +}; + 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'); + }) + } +} -- cgit 1.2.3-korg