From e64eb88fdb13c6e679d1c88305bf190c4c3c2500 Mon Sep 17 00:00:00 2001 From: zhangab Date: Thu, 1 Nov 2018 15:25:20 +0800 Subject: Fix VNF Performance Query Bugs Change-Id: Iffdb5e556ee94f1d7584b767d16ab35687a895cc Issue-ID: USECASEUI-165 Signed-off-by: zhangab --- .../graphiclist/graphiclist.component.css | 43 +++------- .../graphiclist/graphiclist.component.html | 98 +++++++++------------- .../graphiclist/graphiclist.component.less | 52 +++++++----- .../graphiclist/graphiclist.component.ts | 92 ++++---------------- 4 files changed, 101 insertions(+), 184 deletions(-) (limited to 'usecaseui-portal/src/app/components') diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css index 7268b5dc..e3912fca 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css @@ -1,18 +1,3 @@ -/* - 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; @@ -48,31 +33,29 @@ border: none; } .content .chart { - background-color: #fff; position: relative; border-radius: 5px; margin-bottom: 20px; - height: 106px; + height: 70px; } .content .chart .select { - padding: 20px 50px; + padding: 20px 20px 20px 0px; 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 span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; } -.content .chart .select nz-dropdown a:hover { - color: #3fa8eb; +.content .chart .select .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; } -.content .chart .AlarmChart { - width: 25%; - padding-top: 7px; - float: left; +.content .chart .select .search span { + color: #fff; + font-weight: 400; } .content .tablelist { background-color: #fff; diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html index 19c7d853..8a1e64da 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html @@ -14,66 +14,44 @@ limitations under the License. -->
- - - - -
-
- - - {{MeasurementSelected}} - -
    -
  • {{item}}
    • -
- - - - {{ReportTimeSelected}} - -
    -
  • {{item}}
    • -
- + +
+
+ Report Time: + + + +
-
- +
+ + + + NO + Source Name + Priority + SpecificProblem + Report Time + Status + Action + + + + + + {{i+1}} + {{item.name}} + {{item.age}} + {{item.address}} + {{item.address}} + {{item.address}} + + + + +
-
-
- - - - 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/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less index 30fea328..f6f1435b 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less @@ -34,34 +34,48 @@ } } .chart { - background-color: #fff; + // background-color: #fff; position: relative; border-radius: 5px; margin-bottom: 20px; - height: 106px; + height: 70px; .select { - padding: 20px 50px; + padding: 20px 20px 20px 0px; width: 70%; float: left; - nz-dropdown { - margin-right: 20px; - a { - font: 700 12px "Arial"; - color: #3d4d65; - &:hover { - color: #3fa8eb; - } + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; } } + // 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 { + // // height: 0px; + // // border-bottom: 1px solid #f5f5f5; + // // transition: all 0.3s linear; + // width: 25%; + // padding-top: 7px; + // float: left; + // } // .alarmChart-active { // height: 386px; // } diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts index fc86ee0d..6eaf19f4 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import * as addDays from 'date-fns/add_days'; @Component({ selector: 'app-graphiclist', @@ -8,18 +9,18 @@ import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@an export class GraphiclistComponent implements OnInit { constructor() { } - isVisibleMiddle = false; + // isVisibleMiddle = false; - showModalMiddle(): void { - this.isVisibleMiddle = true; - } - handleOkMiddle(): void { - console.log('click ok'); - this.isVisibleMiddle = false; - } - handleCancelMiddle(): void { - this.isVisibleMiddle = false; - } + // showModalMiddle(): void { + // this.isVisibleMiddle = true; + // } + // handleOkMiddle(): void { + // console.log('click ok'); + // this.isVisibleMiddle = false; + // } + // handleCancelMiddle(): void { + // this.isVisibleMiddle = false; + // } ngOnInit() { } @@ -37,74 +38,15 @@ export class GraphiclistComponent implements OnInit { console.log(item); this.ReportTimeSelected = item; } + // Date screening + dateRange = [ addDays(new Date(), -30), new Date() ]; + onChange(result: Date): void { + console.log('onChange: ', result); + } 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 = [ { -- cgit 1.2.3-korg