<!--
- Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+ Copyright (C) 2019 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.
</a>
</li>
<hr> -->
- <li nz-submenu>
+ <!-- <li nz-submenu>
<span title><i class="anticon anticon-setting"></i> {{"Monitor" | translate}} </span>
<ul>
<li nz-menu-item><a routerLink='alarm'> {{"Alarm" | translate}} </a></li>
<li nz-menu-item><a routerLink='performance/performance-vnf'> {{"Performance" | translate}}</a></li>
</ul>
- </li>
+ </li> -->
<hr>
<li nz-menu-item>
<a routerLink="network">
})
export class BarComponent implements OnInit {
- // ͼÐÎÊý¾Ý
+ // 图形数据
@Input() chartData;
- // ³õʼ»¯Êý¾Ý
+ // 初始化数据
@Input() initData;
constructor() { }
ngOnInit() {
this.initOpts = {
renderer: 'canvas',
- height: 40,
- width: 160,
+ height: 200,
+ width: 280,
};
this.barOption = {
+ tooltip: this.initData.option.tooltip,
+ grid: this.initData.option.grid,
xAxis: this.initData.option.xAxis,
- yAxis: {
- type: 'category',
- show: false,
- axisTick: {
- show: false
- }
- },
+ yAxis:this.initData.option.yAxis,
series: this.initData.option.series
}
}
ngOnChanges(changes: SimpleChanges) {
- // µ±ÓÐʵÀýµÄʱºòÔÙÖ´ÐУ¬Ï൱ÓÚµÚÒ»´Î²»Ö´ÐÐÏÂÃæ·½·¨
+ // 当有实例的时候再执行,相当于第一次不执行下面方法
if (this.chartIntance) {
this.chartDataChange()
}
}
- // ³õʼ»¯Í¼Ðθ߶È
+ // 初始化图形高度
initOpts: any;
- // ÕÛÏßͼÅäÖÃ
+ // 折线图配置
barOption: any;
- // ʵÀý¶ÔÏó
+ // 实例对象
chartIntance: any;
- // Êý¾Ý±ä»¯
+ // 数据变化
updateOption: any;
chartDataChange() {
this.updateOption = this.chartData;
legend: this.initData.option.legend,
dataZoom: this.initData.option.dataZoom,
grid: {
- left: '1%',
+ left: '0%',
right: '3%',
top: '10%',
- bottom: '10%',
+ bottom: '18%',
containLabel: true
},
xAxis: {
}
ngOnChanges(changes:SimpleChanges){
-
// 当有实例的时候再执行,相当于第一次不执行下面方法
if(this.chartIntance){
this.chartDataChange()
name: this.initData.option.series[0].name,
type: 'pie',
radius : this.initData.option.series[0].radius,
- center: ['50%', '45%'],
+ center:this.initData.option.series[0].center,
legendHoverLink: false,
hoverOffset: 3,
avoidLabelOverlap: false,
label: this.initData.option.series[0].label,
data:[
- {value:1, name:'11'}
+ {value:5, name:'11'},
+ {value:8, name:'22'},
+ {value:10, name:'33'},
+ {value:20, name:'44'},
+ {value:60, name:'55'},
+
],
itemStyle: this.initData.option.series[0].itemStyle
}
<!--
- Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+ Copyright (C) 2019 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.
+/*
+ Copyright (C) 2019 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.
+*/
import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
import { HomesService } from '../homes.service';
import { slideToRight } from '../animates';
{
name: "服务信息",
radius: ['50%', '70%'],
+ center:['50%', '45%'],
avoidLabelOverlap: false,
label: {
normal: {
series: [{
name: "告警信息",
radius: '55%',
+ center:['50%', '45%'],
label: {
normal: {
show: false,
<!--
- Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+ Copyright (C) 2019 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.
<!-- nsList -->
<div class="list" *ngIf="tab === 'NS'">
<!-- <h3 class="title"> Onboard {{tabTitle}} </h3> -->
- <div class="listupload">
- <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
- <p class="ant-upload-drag-icon">
- <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
- </p>
- <p class="ant-upload-text">Click or drag CSAR File here</p>
- <p class="ant-upload-hint"></p>
- </nz-upload>
- <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
- style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
- {{ nsuploading ? 'Uploading' : 'Start Upload' }}
- </button>
- </div>
- <div class="listlin"></div>
- <div class="listfile">
- <div>
- <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div>
- <div class="listfilebgc">
- <div>111</div>
- <div class="color">pnf-test.csar</div>
- <div>
- <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress>
+ <div style="width:100%;">
+ <div class="listupload">
+ <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
+ <p class="ant-upload-drag-icon">
+ <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+ </p>
+ <p class="ant-upload-text">Click or drag CSAR File here</p>
+ <p class="ant-upload-hint"></p>
+ </nz-upload>
+ <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
+ style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
+ {{ nsuploading ? 'Uploading' : 'Start Upload' }}
+ </button>
+ </div>
+ <div class="listlin"></div>
+ <div class="listfile">
+ <div>
+ <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div>
+ <div class="listfilebgc">
+ <div>111</div>
+ <div class="color">pnf-test.csar</div>
+ <div>
+ <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress>
+ </div>
+ <div>456</div>
</div>
- <div>456</div>
- </div>
- <div class="listfilebgc">
- <div>111</div>
- <div class="color">pnf-test.csar</div>
- <div class="color">
- <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress>
+ <div class="listfilebgc">
+ <div>111</div>
+ <div class="color">pnf-test.csar</div>
+ <div class="color">
+ <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress>
+ </div>
+ <div>456</div>
+ </div>
+ <div class="listfilebgc">
+ <div>111</div>
+ <div>pnf-test.csar</div>
+ <div class="color">File upload completed</div>
+ <div>456</div>
+ </div>
+ <div class="listfilebgc">
+ <div>111</div>
+ <div>pnf-test.csar</div>
+ <div class="color">File upload completed</div>
+ <div>456</div>
+ </div>
+ <div class="listfilebgc">
+ <div>111</div>
+ <div class="color">pnf-test.csar</div>
+ <div>File upload completed</div>
+ <div>456</div>
</div>
- <div>456</div>
- </div>
- <div class="listfilebgc">
- <div>111</div>
- <div>pnf-test.csar</div>
- <div class="color">File upload completed</div>
- <div>456</div>
- </div>
- <div class="listfilebgc">
- <div>111</div>
- <div>pnf-test.csar</div>
- <div class="color">File upload completed</div>
- <div>456</div>
- </div>
- <div class="listfilebgc">
- <div>111</div>
- <div class="color">pnf-test.csar</div>
- <div>File upload completed</div>
- <div>456</div>
</div>
</div>
-
</div>
<nz-spin [nzSpinning]="isSpinning">
<div class="mask" *ngIf="isSpinning"></div>
</nz-table>
</nz-spin>
<!-- <div style="margin-top:8px;">
- Loading state£º
+ Loading state:
<nz-switch [(ngModel)]="isSpinning"></nz-switch>
</div> -->
+/*
+ Copyright (C) 2019 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;
// padding: 10px;
.listupload {
width: 22%;
- float: left;
+ vertical-align: top;
+ display: inline-block;
margin-left: 13%;
}
.listlin {
- float: left;
+ vertical-align: top;
+ display: inline-block;
width: 1%;
margin-left: 10%;
height: 177px;
border-right: 2px solid #EEEEEE;
}
.listfile {
- float: left;
- width: 44%;
+ width: 43%;
+ vertical-align: top;
+ display: inline-block;
margin-left: 10%;
.listfilebgc {
background-color: #fff;
+/*
+ Copyright (C) 2019 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.
+*/
import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
import { Component, OnInit, HostBinding } from '@angular/core';
// import { MyhttpService } from '../../myhttp.service';
//url
url = {
// line up
- //ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content',
- //vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',
- //pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content'
- // 本地
- ns: 'https://jsonplaceholder.typicode.com/posts/',
- vnf: 'https://jsonplaceholder.typicode.com/posts/',
- pnf: 'https://jsonplaceholder.typicode.com/posts/',
+ ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content',
+ vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',
+ pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content'
+ // line local
+ //ns: 'https://jsonplaceholder.typicode.com/posts/',
+ //vnf: 'https://jsonplaceholder.typicode.com/posts/',
+ //pnf: 'https://jsonplaceholder.typicode.com/posts/',
};
constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService, private modalService: NzModalService) { }
<!--
- Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+ Copyright (C) 2019 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.
// 详情页迷你表格样式
.detailInformatioin {
- nz-table {
- .ant-table-small {
- border-color: #dfdfe0;
- border-right: 0;
- .ant-table-content {
- border-color: #dfdfe0;
- .ant-table-body > table {
- padding: 0;
- .ant-table-thead > tr > th {
- background-color: #f0f2f5;
- font-weight: 700;
- font-size: 18px;
- padding: 2px 15px;
- border-color: #dfdfe0;
- }
- .ant-table-tbody > tr > td {
- background-color: #f0f2f5;
- font-size: 14px;
- padding: 2px 15px;
- color: #323437;
+ nz-table {
+ .ant-table-small {
border-color: #dfdfe0;
- }
+ border-right: 0;
+ .ant-table-content {
+ border-color: #dfdfe0;
+ .ant-table-body > table {
+ padding: 0;
+ .ant-table-thead > tr > th {
+ background-color: #f0f2f5;
+ font-weight: 700;
+ font-size: 16px;
+ padding: 2px 15px;
+ border-color: #dfdfe0;
+ }
+ .ant-table-tbody > tr > td {
+ background-color: #f0f2f5;
+ font-size: 14px;
+ padding: 2px 15px;
+ color: #323437;
+ border-color: #dfdfe0;
+ }
+ }
+ }
}
- }
}
- }
}
// 日期选择插件背景颜色
}
}
// onboard-vnf-vm页面调整
-// 頭部導航
+// 头部导航
.ant-tabs-bar {
box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
border-bottom:none !important;
padding-left: 15px !important;
padding-top: 14px !important;
}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container {
+ height: 55px !important;
+}
+// 头部导航按钮
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
background-color: #fff !important;
border: 1px solid #fff !important;