summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:03 +0800
committerzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:05 +0800
commitde9d2e95b43991fccee342ebed03b006f6fed844 (patch)
tree0667c51a30fd3fed71fec797136d8adefc7d7baf /usecaseui-portal/src
parent101e5e37f4ece60af8d08020c7e4bd8f473adce7 (diff)
Build AngularJs component for usecase-ui
Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src')
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.css138
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.html113
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.less132
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.ts380
-rw-r--r--usecaseui-portal/src/app/animates.ts42
-rw-r--r--usecaseui-portal/src/app/app-routing.module.ts41
-rw-r--r--usecaseui-portal/src/app/app.component.css39
-rw-r--r--usecaseui-portal/src/app/app.component.html80
-rw-r--r--usecaseui-portal/src/app/app.component.less32
-rw-r--r--usecaseui-portal/src/app/app.component.spec.ts27
-rw-r--r--usecaseui-portal/src/app/app.component.ts34
-rw-r--r--usecaseui-portal/src/app/app.module.ts98
-rw-r--r--usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css195
-rw-r--r--usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html313
-rw-r--r--usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts548
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css138
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html336
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts368
-rw-r--r--usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css97
-rw-r--r--usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html135
-rw-r--r--usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts40
-rw-r--r--usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts1195
-rw-r--r--usecaseui-portal/src/app/components/charts/bar/bar.component.html18
-rw-r--r--usecaseui-portal/src/app/components/charts/bar/bar.component.less0
-rw-r--r--usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/components/charts/bar/bar.component.ts15
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.html22
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.less0
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.ts79
-rw-r--r--usecaseui-portal/src/app/components/charts/pie/pie.component.html24
-rw-r--r--usecaseui-portal/src/app/components/charts/pie/pie.component.less0
-rw-r--r--usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/components/charts/pie/pie.component.ts104
-rw-r--r--usecaseui-portal/src/app/components/details/details.component.css104
-rw-r--r--usecaseui-portal/src/app/components/details/details.component.html68
-rw-r--r--usecaseui-portal/src/app/components/details/details.component.less96
-rw-r--r--usecaseui-portal/src/app/components/details/details.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/components/details/details.component.ts36
-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
-rw-r--r--usecaseui-portal/src/app/dataInterface.ts38
-rw-r--r--usecaseui-portal/src/app/home/home.component.css157
-rw-r--r--usecaseui-portal/src/app/home/home.component.html63
-rw-r--r--usecaseui-portal/src/app/home/home.component.less145
-rw-r--r--usecaseui-portal/src/app/home/home.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/home/home.component.ts166
-rw-r--r--usecaseui-portal/src/app/myhttp.service.ts266
-rw-r--r--usecaseui-portal/src/app/networkHttpservice.service.ts99
-rw-r--r--usecaseui-portal/src/app/networkHttpservice.service1.ts97
-rw-r--r--usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css75
-rw-r--r--usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html79
-rw-r--r--usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less61
-rw-r--r--usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts159
-rw-r--r--usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css126
-rw-r--r--usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html64
-rw-r--r--usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less115
-rw-r--r--usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts92
-rw-r--r--usecaseui-portal/src/app/performance/performance.component.css26
-rw-r--r--usecaseui-portal/src/app/performance/performance.component.html17
-rw-r--r--usecaseui-portal/src/app/performance/performance.component.less11
-rw-r--r--usecaseui-portal/src/app/performance/performance.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/performance/performance.component.ts16
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css59
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html61
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less50
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts61
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.css132
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.html185
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.less127
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.ts511
-rw-r--r--usecaseui-portal/src/app/services/services.component.html18
-rw-r--r--usecaseui-portal/src/app/services/services.component.less0
-rw-r--r--usecaseui-portal/src/app/services/services.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/services/services.component.ts15
-rw-r--r--usecaseui-portal/src/assets/i18n/en.json22
-rw-r--r--usecaseui-portal/src/assets/i18n/zh.json22
-rw-r--r--usecaseui-portal/src/assets/images/VM.pngbin0 -> 16116 bytes
-rw-r--r--usecaseui-portal/src/assets/images/VNF.pngbin0 -> 16051 bytes
-rw-r--r--usecaseui-portal/src/assets/images/VNF1.pngbin0 -> 15833 bytes
-rw-r--r--usecaseui-portal/src/assets/images/VNF2.pngbin0 -> 17784 bytes
-rw-r--r--usecaseui-portal/src/assets/images/VNF3.pngbin0 -> 13353 bytes
-rw-r--r--usecaseui-portal/src/assets/images/bigcloud.pngbin0 -> 7969 bytes
-rw-r--r--usecaseui-portal/src/assets/images/cloud-city1.pngbin0 -> 17808 bytes
-rw-r--r--usecaseui-portal/src/assets/images/cloud-county1.pngbin0 -> 3062 bytes
-rw-r--r--usecaseui-portal/src/assets/images/cloud-out.pngbin0 -> 3364 bytes
-rw-r--r--usecaseui-portal/src/assets/images/cloud-site.pngbin0 -> 3110 bytes
-rw-r--r--usecaseui-portal/src/assets/images/domain.pngbin0 -> 3695 bytes
-rw-r--r--usecaseui-portal/src/assets/images/icon.pngbin0 -> 4670550 bytes
-rw-r--r--usecaseui-portal/src/assets/images/loading.gifbin0 -> 3694 bytes
-rw-r--r--usecaseui-portal/src/assets/images/open-close.pngbin0 -> 16054 bytes
-rw-r--r--usecaseui-portal/src/assets/images/open-close2.pngbin0 -> 17251 bytes
-rw-r--r--usecaseui-portal/src/assets/images/out-domain.pngbin0 -> 3552 bytes
-rw-r--r--usecaseui-portal/src/assets/images/site.pngbin0 -> 2363 bytes
-rw-r--r--usecaseui-portal/src/assets/images/tildeimg.pngbin0 -> 896670 bytes
-rw-r--r--usecaseui-portal/src/assets/images/tp.pngbin0 -> 1612 bytes
-rw-r--r--usecaseui-portal/src/assets/json/LogicalLinksData.json168
-rw-r--r--usecaseui-portal/src/assets/json/alarmFormData.json371
-rw-r--r--usecaseui-portal/src/assets/json/allotted-resources.json122
-rw-r--r--usecaseui-portal/src/assets/json/allotted-resources2.json1
-rw-r--r--usecaseui-portal/src/assets/json/configuration_files/inputNamesTranslate.json63
-rw-r--r--usecaseui-portal/src/assets/json/configuration_files/servicesCategory.json34
-rw-r--r--usecaseui-portal/src/assets/json/configuration_files/templateCategory.json6
-rw-r--r--usecaseui-portal/src/assets/json/createService.json7
-rw-r--r--usecaseui-portal/src/assets/json/customers.json82
-rw-r--r--usecaseui-portal/src/assets/json/deleteService.json4
-rw-r--r--usecaseui-portal/src/assets/json/detailsData.json19
-rw-r--r--usecaseui-portal/src/assets/json/homeAllData.json23
-rw-r--r--usecaseui-portal/src/assets/json/homePerformanceChartData.json4
-rw-r--r--usecaseui-portal/src/assets/json/instanceTableData.json505
-rw-r--r--usecaseui-portal/src/assets/json/instanceTableData2.json388
-rw-r--r--usecaseui-portal/src/assets/json/instanceTableData3.json2
-rw-r--r--usecaseui-portal/src/assets/json/instanceTableData4.json1
-rw-r--r--usecaseui-portal/src/assets/json/netWorkD3Data.json94
-rw-r--r--usecaseui-portal/src/assets/json/netWorkD3Data2.json246
-rw-r--r--usecaseui-portal/src/assets/json/onboardTableData.json103
-rw-r--r--usecaseui-portal/src/assets/json/p_interfaces1.json17
-rw-r--r--usecaseui-portal/src/assets/json/p_interfaces2.json17
-rw-r--r--usecaseui-portal/src/assets/json/pnfdetail-domain.json29
-rw-r--r--usecaseui-portal/src/assets/json/progress.json13
-rw-r--r--usecaseui-portal/src/assets/json/sdwanvpnServiceTemplateParameters.json57
-rw-r--r--usecaseui-portal/src/assets/json/serviceTemplates.json19
-rw-r--r--usecaseui-portal/src/assets/json/serviceTemplates2.json43
-rw-r--r--usecaseui-portal/src/assets/json/serviceTypes.json18
-rw-r--r--usecaseui-portal/src/assets/json/servicesList.json4
-rw-r--r--usecaseui-portal/src/assets/json/servicesTableData.json127
-rw-r--r--usecaseui-portal/src/assets/json/siteAddressData.json39
-rw-r--r--usecaseui-portal/src/assets/json/siteServiceTemplateParameters.json308
-rw-r--r--usecaseui-portal/src/assets/json/sotn-connectivity.json94
-rw-r--r--usecaseui-portal/src/assets/json/sotn-connectivity2.json1
-rw-r--r--usecaseui-portal/src/assets/json/sotnvpnServiceTemplateParameters.json225
-rw-r--r--usecaseui-portal/src/assets/json/specific_link _nfo.json52
-rw-r--r--usecaseui-portal/src/assets/json/status.json3
-rw-r--r--usecaseui-portal/src/assets/json/status2.json1
-rw-r--r--usecaseui-portal/src/assets/json/url.json8
-rw-r--r--usecaseui-portal/src/assets/json/vpnbinding.json82
-rw-r--r--usecaseui-portal/src/environments/environment.prod.ts3
-rw-r--r--usecaseui-portal/src/environments/environment.ts8
-rw-r--r--usecaseui-portal/src/favicon.icobin0 -> 5430 bytes
-rw-r--r--usecaseui-portal/src/index.html29
-rw-r--r--usecaseui-portal/src/main.ts12
-rw-r--r--usecaseui-portal/src/my-theme.css18190
-rw-r--r--usecaseui-portal/src/my-theme.less11
-rw-r--r--usecaseui-portal/src/polyfills.ts81
-rw-r--r--usecaseui-portal/src/styles.css113
-rw-r--r--usecaseui-portal/src/styles.less117
-rw-r--r--usecaseui-portal/src/test.ts20
-rw-r--r--usecaseui-portal/src/tsconfig.app.json13
-rw-r--r--usecaseui-portal/src/tsconfig.spec.json19
-rw-r--r--usecaseui-portal/src/typings.d.ts5
160 files changed, 31111 insertions, 0 deletions
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 @@
+<!--
+ 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.
+-->
+<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;">Alarm</span> <span *ngIf="detailshow">>
+ Details</span> </h3>
+<hr>
+<div class="select" [@showHideAnimate]="state">
+ <div class="query_criteria">
+ <span>Source Name: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+ <a>{{item.name}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ &nbsp;&nbsp;
+ <span>Priority: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList">
+ <a>{{item}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ &nbsp;&nbsp;
+ <span>Status: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList">
+ <a>{{item}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ <br> <br>
+ <span>Report Time: </span>
+ <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
+
+ <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
+ </div>
+</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="content" [@showHideAnimate]="state">
+ <div class="title">
+ <ul>
+ <li>
+ <h5>All</h5>
+ <p>{{alarmList.all }}</p>
+ </li>
+ <li>
+ <h5>Closed</h5>
+ <p>{{alarmList.closed }}</p>
+ </li>
+ <li>
+ <h5>Action</h5>
+ <p>{{alarmList.Action }}</p>
+ </li>
+ </ul>
+ <div class="thumbnail" (click)="showModalMiddle()">
+ <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+ </div>
+ </div>
+ <div class="tablelist">
+ <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [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 list; 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 class="action"><a (click)="detailShow()"><i class="details"></i></a></td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ </div>
+</div>
+<div [@showHideAnimate]="state2">
+ <app-details></app-details>
+</div> \ 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<AlarmComponent>;
+
+ 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');
+ })
+ }
+}
diff --git a/usecaseui-portal/src/app/animates.ts b/usecaseui-portal/src/app/animates.ts
new file mode 100644
index 00000000..cde7e568
--- /dev/null
+++ b/usecaseui-portal/src/app/animates.ts
@@ -0,0 +1,42 @@
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+// 路由动画
+export const slideToRight = trigger('routerAnimate', [
+ // 定义void表示空状态下
+ state('void', style({ position:'fixed', zIndex:'-1' })), //不明白为啥要加定位出场动画才生效
+ // * 表示任何状态
+ state('*', style({ })),
+ // 进场动画
+ transition(':enter', [
+ style({transform: 'translateX(-100%)'}),
+ animate('.5s ease-in-out')
+ ]),
+ // 出场动画
+ transition(':leave', [
+ animate('.5s ease-in-out', style({transform: 'translateX(100%)'}) )
+ ])
+]);
+// 详情页显示隐藏动画
+export const showHideAnimate = trigger('showHideAnimate', [
+ state('show', style({
+ transform: 'scale(1)',
+ display:'block',
+ })),
+ state('hide', style({
+ transform: 'scale(0)',
+ display:'none'
+ })),
+ transition('show => hide', animate('300ms ease-in')),
+ transition('hide => show', animate('300ms ease-out'))
+]);
+// 详情页显示隐藏动画
+export const slideUpDown = trigger('slideUpDown', [
+ state('down', style({
+ height: "*"
+ })),
+ state('up', style({
+ height: "0"
+ })),
+ transition('down => up', animate('300ms ease-in')),
+ transition('up => down', animate('300ms ease-out'))
+]); \ No newline at end of file
diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts
new file mode 100644
index 00000000..7fe7361c
--- /dev/null
+++ b/usecaseui-portal/src/app/app-routing.module.ts
@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+
+import { HomeComponent } from './home/home.component';
+import { ServicesComponent } from './services/services.component';
+import { ServicesListComponent } from './services/services-list/services-list.component';
+import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component';
+import { AlarmComponent } from './alarm/alarm.component';
+import { PerformanceComponent } from './performance/performance.component';
+import { PerformanceVnfComponent } from './performance/performance-vnf/performance-vnf.component';
+import { PerformanceVmComponent } from './performance/performance-vm/performance-vm.component';
+
+import { CcvpnNetworkComponent } from './ccvpn-network/ccvpn-network.component';
+
+// import { DetailsComponent } from './details/details.component';
+
+const ServicesChildRoutes: Routes = [
+ { path: 'services-list', component: ServicesListComponent},
+ { path: 'onboard-vnf-vm', component: OnboardVnfVmComponent},
+ { path: '**', redirectTo: 'services-list' }
+]
+
+const routes: Routes = [
+ { path: 'home', component: HomeComponent},
+ // { path: 'services', component: ServicesComponent, children:ServicesChildRoutes}, //暂时不是子路由结构
+ { path: 'services/services-list', component: ServicesListComponent},
+ { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent},
+ { path: 'alarm', component: AlarmComponent},
+ { path: 'performance', component: PerformanceComponent},
+ { path: 'performance/performance-vnf', component: PerformanceVnfComponent},
+ { path: 'performance/performance-vm', component: PerformanceVmComponent},
+ { path: 'network', component: CcvpnNetworkComponent },
+ { path: '**', redirectTo: 'home', pathMatch: 'full'}
+];
+
+@NgModule({
+ imports: [ RouterModule.forRoot(routes) ],
+ exports: [ RouterModule ]
+})
+export class AppRoutingModule {}
diff --git a/usecaseui-portal/src/app/app.component.css b/usecaseui-portal/src/app/app.component.css
new file mode 100644
index 00000000..f25d3262
--- /dev/null
+++ b/usecaseui-portal/src/app/app.component.css
@@ -0,0 +1,39 @@
+/*
+ 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.
+*/
+nz-layout nz-sider ul li {
+ margin: 0;
+ font-size: 16px;
+}
+nz-layout nz-sider ul li span {
+ font-size: 16px;
+}
+nz-layout nz-sider ul li i {
+ width: 16px;
+ height: 16px;
+}
+nz-layout nz-sider ul li .icon-services {
+ background: url(../assets/images/icon.png) no-repeat 0px -16px;
+}
+nz-layout nz-sider ul li ul li {
+ font-size: 12px;
+}
+nz-layout nz-sider ul hr {
+ margin: 0 auto;
+ background-color: #39434f;
+ height: 1px;
+ border: none;
+ width: 80%;
+}
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
new file mode 100644
index 00000000..8e189e73
--- /dev/null
+++ b/usecaseui-portal/src/app/app.component.html
@@ -0,0 +1,80 @@
+<!--
+ 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.
+-->
+<nz-layout>
+ <nz-sider nzWidth='260' style="overflow: auto; height: 100vh; position: fixed; left: 0">
+ <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 260px;">
+ <li nz-menu-item nzSelected>
+ <a routerLink="home">
+ <span title>
+ <i class="anticon anticon-home"></i>
+ <span> {{"Home" | translate}} </span>
+ </span>
+ </a>
+ </li>
+ <hr>
+ <li nz-submenu>
+ <span title><i class="anticon anticon-home"></i> {{"Services" | translate}} </span>
+ <ul>
+ <li nz-menu-item><a routerLink='services/services-list'> {{"Services List" | translate}}</a></li>
+ <li nz-menu-item><a routerLink='services/onboard-vnf-vm'> Onboard VNF/VM </a></li>
+ </ul>
+ </li>
+ <!-- <hr>
+ <li nz-menu-item>
+ <a routerLink="alarm">
+ <span title>
+ <i class="anticon anticon-mail"></i>
+ <span> {{"Alarm" | translate}} </span>
+ </span>
+ </a>
+ </li>
+ <hr> -->
+ <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>
+ <hr>
+ <li nz-menu-item>
+ <a routerLink="network">
+ <span title>
+ <i class="anticon anticon-share-alt"></i>
+ <span> {{"Network" | translate}} </span>
+ </span>
+ </a>
+ </li>
+ </ul>
+ <button (click)="changeLanguage('zh')" >{{"zh" | translate}}</button>
+ <button (click)="changeLanguage('en')" >{{"en" | translate}}</button>
+ <select name="Language" id="" [(ngModel)]="selectLanguage" (change)="changeLanguage1()">
+ <option *ngFor="let item of Language" value="{{item}}">{{item | translate}}</option>
+ </select>
+
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
+ <button nz-button nz-dropdown><span>{{selectLanguage | translate}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="changeLanguage2(item)" *ngFor="let item of Language">
+ <a>{{item | translate}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ </nz-sider>
+ <nz-layout style="margin-left: 260px; padding: 20px 32px; height:100vh; position:relative;">
+ <router-outlet></router-outlet>
+ </nz-layout>
+</nz-layout>
diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less
new file mode 100644
index 00000000..a805166e
--- /dev/null
+++ b/usecaseui-portal/src/app/app.component.less
@@ -0,0 +1,32 @@
+nz-layout {
+ nz-sider {
+ ul {
+ li {
+ margin: 0;
+ font-size: 16px;
+ span {
+ font-size: 16px;
+ }
+ i {
+ width: 16px;
+ height: 16px;
+ }
+ .icon-services {
+ background: url(../assets/images/icon.png) no-repeat 0px -16px;
+ }
+ ul {
+ li{
+ font-size: 12px;
+ }
+ }
+ }
+ hr {
+ margin: 0 auto;
+ background-color: #39434f;
+ height: 1px;
+ border: none;
+ width: 80%;
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/app.component.spec.ts b/usecaseui-portal/src/app/app.component.spec.ts
new file mode 100644
index 00000000..bcbdf36b
--- /dev/null
+++ b/usecaseui-portal/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ AppComponent
+ ],
+ }).compileComponents();
+ }));
+ it('should create the app', async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+ it(`should have as title 'app'`, async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app.title).toEqual('app');
+ }));
+ it('should render title in a h1 tag', async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ fixture.detectChanges();
+ const compiled = fixture.debugElement.nativeElement;
+ expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+ }));
+});
diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts
new file mode 100644
index 00000000..be13c1a1
--- /dev/null
+++ b/usecaseui-portal/src/app/app.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.less']
+})
+export class AppComponent {
+ constructor(private translate:TranslateService){
+ translate.addLangs(['en', 'zh']);
+ translate.setDefaultLang('en');
+ // translate.use('en');
+ }
+ changeLanguage(Language): void {
+ switch(Language){
+ case 'en':
+ this.translate.use('en');
+ break;
+ case 'zh':
+ this.translate.use('zh');
+ }
+ }
+ // 多语言
+ Language:String[] = ["zh","en"];
+ selectLanguage = "en";
+ changeLanguage1(){
+ this.translate.use(this.selectLanguage);
+ }
+ changeLanguage2(item){
+ this.translate.use(item);
+ }
+}
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
new file mode 100644
index 00000000..7c24f110
--- /dev/null
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -0,0 +1,98 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { NZ_I18N, en_US } from 'ng-zorro-antd';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+export function HttpLoaderFactory(httpClient: HttpClient) {
+ return new TranslateHttpLoader(httpClient, '../assets/i18n/', '.json');
+}
+
+import { AppRoutingModule } from './app-routing.module';
+
+//注册语言包
+import { registerLocaleData } from '@angular/common';
+import en from '@angular/common/locales/en';
+registerLocaleData(en);
+
+//自定义组件
+import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { ServicesComponent } from './services/services.component';
+import { ServicesListComponent } from './services/services-list/services-list.component';
+import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component';
+import { AlarmComponent } from './alarm/alarm.component';
+import { PerformanceComponent } from './performance/performance.component';
+import { PerformanceVnfComponent } from './performance/performance-vnf/performance-vnf.component';
+import { PerformanceVmComponent } from './performance/performance-vm/performance-vm.component';
+import { CcvpnNetworkComponent } from './ccvpn-network/ccvpn-network.component';
+import { CcvpnDetailComponent } from './ccvpn-detail/ccvpn-detail.component';
+import { CcvpnCreationComponent } from './ccvpn-creation/ccvpn-creation.component';
+
+import { DetailsComponent } from './components/details/details.component';
+import { GraphiclistComponent } from './components/graphiclist/graphiclist.component';
+
+import { BarComponent } from './components/charts/bar/bar.component';
+import { LineComponent } from './components/charts/line/line.component';
+import { PieComponent } from './components/charts/pie/pie.component';
+
+import {PathLocationStrategy, LocationStrategy, HashLocationStrategy} from '@angular/common';
+// 自定义服务
+import { MyhttpService } from './myhttp.service';
+import { networkHttpservice } from './networkHttpservice.service';
+
+@NgModule({
+ providers : [
+ { provide: LocationStrategy, useClass: HashLocationStrategy },
+ { provide: NZ_I18N, useValue: en_US },
+ MyhttpService,
+ networkHttpservice
+ ],
+ declarations: [
+ AppComponent,
+ HomeComponent,
+
+ ServicesComponent,
+ ServicesListComponent,
+ OnboardVnfVmComponent,
+
+ AlarmComponent,
+
+ PerformanceComponent,
+ PerformanceVnfComponent,
+ PerformanceVmComponent,
+ DetailsComponent,
+ PieComponent,
+ LineComponent,
+ BarComponent,
+ GraphiclistComponent,
+
+ CcvpnNetworkComponent,
+ CcvpnDetailComponent,
+ CcvpnCreationComponent,
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpClientModule,
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useFactory: HttpLoaderFactory,
+ deps: [HttpClient]
+ }
+ }),
+ BrowserAnimationsModule,
+ NgZorroAntdModule.forRoot(),
+ NgxEchartsModule,
+ AppRoutingModule
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { } \ No newline at end of file
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
new file mode 100644
index 00000000..35fdbef5
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
@@ -0,0 +1,195 @@
+/*
+ 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: 10px;
+}
+.model {
+ background-color: #fff;
+ height: 90%;
+ overflow-y: auto;
+}
+.model .back {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+.model .creation {
+ position: relative;
+ width: 60%;
+ height: 100%;
+ overflow-y: auto;
+ border-radius: 5px;
+ padding: 15px;
+}
+.model .creation h3.title {
+ height: 20px;
+ font: 700 20px/20px "Arial";
+ color: #666;
+}
+.model .creation h3 {
+ height: 20px;
+ font: 700 16px/20px "Arial";
+ margin: 5px 0px;
+ color: #000;
+}
+.model .creation .submit {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+/* SOTN VPN */
+.model .creation .sotnvpn ul li {
+ display: inline-block;
+ height: 35px;
+ width: 49.5%;
+}
+.model .creation .sotnvpn ul li span {
+ display: inline-block;
+ width: 110px;
+ font: 700 14px "Arial";
+ color: #3fa8eb;
+ vertical-align: middle;
+}
+.model .creation .sotnvpn ul li input {
+ width: 165px;
+}
+/* Site List */
+/* addsite model */
+.model .sitemodel {
+ position: absolute;
+ z-index: 10;
+ left: 10px;
+ top: 60px;
+ background-color: #fff;
+ box-shadow: 0px 0px 20px #000;
+ width: 60%;
+ max-height: 90%;
+ border-radius: 5px;
+ overflow-y: auto;
+}
+.model .sitemodel h3 {
+ height: 30px;
+ font: 700 16px/30px "Arial";
+ border-bottom: 1px solid #aaa;
+ padding-left: 10px;
+}
+.model .sitemodel h4 {
+ height: 30px;
+ font: 700 16px/30px "Arial";
+ padding-left: 10px;
+ background-color: #ddd;
+}
+.model .sitemodel .inputs {
+ padding: 10px 20px 0;
+}
+.model .sitemodel .inputs ul li {
+ display: inline-block;
+ height: 35px;
+ width: 49.5%;
+}
+.model .sitemodel .inputs ul li span {
+ display: inline-block;
+ width: 110px;
+ font: 700 14px "Arial";
+ color: #3fa8eb;
+ vertical-align: middle;
+}
+.model .sitemodel .inputs input {
+ width: 165px;
+}
+.model .sitemodel .action {
+ float: left;
+ padding: 10px;
+}
+
+.model nz-table tbody td i.anticon:hover {
+ color: #3fa8eb;
+ cursor: pointer;
+}
+
+/* site table */
+.model .site nz-table tbody td i.anticon:hover {
+ color: #3fa8eb;
+ cursor: pointer;
+}
+/* WAN Port */
+
+/* Site Group List */
+.model .sitegroup .sitegroupmodal {
+ position: absolute;
+ z-index: 10;
+ left: 200px;
+ top: 300px;
+ background-color: #fff;
+ box-shadow: 0px 0px 20px #000;
+ width: 330px;
+ border-radius: 5px;
+}
+.model .sitegroup .sitegroupmodal h3 {
+ height: 30px;
+ font: 700 16px/30px "Arial";
+ border-bottom: 1px solid #aaa;
+ padding-left: 10px;
+}
+.model .sitegroup .sitegroupmodal .inputs {
+ padding: 10px 20px 0;
+}
+.model .sitegroup .sitegroupmodal span {
+ display: inline-block;
+ width: 100px;
+ margin-bottom: 10px;
+}
+.model .sitegroup .sitegroupmodal .inputs input {
+ width: 165px;
+}
+.model .sitegroup .sitegroupmodal .action {
+ float: right;
+ padding: 10px;
+}
+
+
+/* 图 */
+.model .chart {
+ width: 40%;
+ padding: 10px;
+ height: 100%;
+ border-left: 10px solid #f3f3f3;
+}
+.model .chart #createChart {
+ width: 100%;
+ height: 80%;
+ margin-top: 20px;
+ position: relative;
+}
+.model .chart #createChart .siteNameP {
+ position: fixed;
+ border: 5px;
+ padding: 3px 5px;
+ color: #fff;
+ background: #999;
+ box-shadow: 0px 0px 20px #000;
+ max-width: 100px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
new file mode 100644
index 00000000..15486238
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
@@ -0,0 +1,313 @@
+<!--
+ 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.
+-->
+<h3 class="title"> Services List </h3>
+<hr>
+<div class="model">
+ <!-- 创建数据 -->
+ <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button>
+ <div class="creation fl">
+ <h3 class="title">{{createParams.commonParams.templateType}} Instance Creation</h3>
+ <div class="sotnvpn clearfix">
+ <h3>SOTN VPN Info</h3>
+ <ul>
+ <li><span>Name:</span> <input nz-input [(ngModel)]="sotnInfo.name"></li>
+ <li><span>Description:</span> <input nz-input [(ngModel)]="sotnInfo.description"></li>
+ <li><span>Start Time:</span>
+ <nz-date-picker [(ngModel)]="sotnInfo.startTime"
+ (ngModelChange)="startTimeChange($event)"
+ nzPlaceHolder="start time"
+ nzShowTime>
+ </nz-date-picker>
+ </li>
+ <li><span>End Time:</span>
+ <nz-date-picker [(ngModel)]="sotnInfo.endTime"
+ (ngModelChange)="endTimeChange($event)"
+ nzPlaceHolder="end time"
+ nzShowTime>
+ </nz-date-picker>
+ </li>
+ <li><span>COS:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="sotnInfo.COS" nzAllowClear nzPlaceHolder="Choose">
+ <nz-option nzValue="premium" nzLabel="premium"></nz-option>
+ <nz-option nzValue="standard" nzLabel="standard"></nz-option>
+ </nz-select>
+ </li>
+ <li><span>Reroute Enabled:</span> <nz-switch [(ngModel)]="sotnInfo.reroute"></nz-switch> </li>
+ <li><span>Service Level Specification:</span> <input nz-input [(ngModel)]="sotnInfo.SLS"></li>
+ <li><span>Dual Link:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="sotnInfo.dualLink" nzAllowClear nzPlaceHolder="Choose">
+ <nz-option nzValue="no_protection" nzLabel="no_protection"></nz-option>
+ <nz-option nzValue="static_1+1" nzLabel="static_1+1"></nz-option>
+ <nz-option nzValue="permanent_1+1" nzLabel="permanent_1+1"></nz-option>
+ </nz-select>
+ </li>
+ <li><span>CIR:</span> <input nz-input [(ngModel)]="sotnInfo.CIR"></li>
+ <li><span>EIR:</span> <input nz-input [(ngModel)]="sotnInfo.EIR"></li>
+ <li><span>CBS:</span> <input nz-input [(ngModel)]="sotnInfo.CBS"></li>
+ <li><span>EBS:</span> <input nz-input [(ngModel)]="sotnInfo.EBS"></li>
+ <li><span>Color Aware:</span> <nz-switch [(ngModel)]="sotnInfo.colorAware"></nz-switch> </li>
+ <li><span>Coupling Flag:</span> <nz-switch [(ngModel)]="sotnInfo.couplingFlag"></nz-switch> </li>
+ </ul>
+ </div>
+
+ <div class="site">
+ <h3>Site List</h3>
+ <button nz-button (click)="addSite()">Add Site</button>
+ <nz-table #siteTable [nzData]="siteTableData"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th nzWidth="10%"> NO. </th>
+ <th nzWidth="15%"> Name </th>
+ <th nzWidth="15%"> Description </th>
+ <th nzWidth="15%"> Post Code </th>
+ <th nzWidth="15%"> Address </th>
+ <th nzWidth="15%"> VLAN </th>
+ <th nzWidth="15%"> Action </th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="siteTable.data" let-i="index"> -->
+ <tr *ngFor="let item of siteTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.baseData.name}}</td>
+ <td>{{item.baseData.description}}</td>
+ <td>{{item.baseData.postcode}}</td>
+ <td>{{item.baseData.address}}</td>
+ <td>{{item.baseData.vlan}}</td>
+ <td>
+ <span class="action" (click)="editSite(i+1)"><i class="anticon anticon-edit"></i></span> &nbsp;
+ <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ </div>
+
+ <div class="sitegroup" *ngIf="createParams.commonParams.templateType == 'CCVPN'">
+ <h3>Site_Group List</h3>
+ <button nz-button (click)="addSiteGroup()">Add Group</button>
+ <div class="sitegroupmodal" *ngIf="siteGroupModelShow">
+ <h3>Site_Group</h3>
+ <div class="inputs">
+ <span>Group Name:</span> <input nz-input [(ngModel)]="siteGroupModelData.name"> <br>
+ <span>Topology:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="siteGroupModelData.topology" nzAllowClear nzPlaceHolder="Choose">
+ <nz-option nzValue="full-mesh" nzLabel="full-mesh"></nz-option>
+ <nz-option nzValue="hub-spoke" nzLabel="hub-spoke"></nz-option>
+ </nz-select>
+ <nz-table #groupModalTable [nzData]="siteGroupModalTableData" [nzLoading]="loading" [nzShowPagination]="false" nzSize="small">
+ <thead>
+ <tr>
+ <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="groupModal_checkAll($event)"></th>
+ <th> Site Name</th>
+ <th> Role</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let item of groupModalTable.data; let i = index;">
+ <td nzShowCheckbox [nzDisabled]="item.disabled" [(nzChecked)]="item.checked" (nzCheckedChange)="refreshStatus($event)"></td>
+ <td>{{ item.siteName }}</td>
+ <td>
+ <nz-select style="width: 80px;" [(ngModel)]="item.role"
+ nzAllowClear nzPlaceHolder="Choose"
+ [nzDisabled]="siteGroupModelData.topology != 'hub-spoke'">
+ <nz-option nzValue="hub" nzLabel="hub"></nz-option>
+ <nz-option nzValue="spoke" nzLabel="spoke"></nz-option>
+ </nz-select>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+ <div class="action">
+ <button nz-button nzType="primary" (click)="addsitegroup_OK()">OK</button>
+ <button nz-button nzType="primary" (click)="addsitegroup_cancel()">Cancel</button>
+ </div>
+ </div>
+ <nz-table #siteGroupTable [nzData]="siteGroupTableData"
+ [nzLoading]="loading"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th nzWidth="10%"> NO. </th>
+ <th nzWidth="20%"> Group Name </th>
+ <th nzWidth="20%"> Topology </th>
+ <th nzWidth="20%"> Sites </th>
+ <th nzWidth="15%"> Role </th>
+ <th nzWidth="15%"> Action </th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="siteGroupTable.data" let-i="index"> -->
+ <tr *ngFor="let item of siteGroupTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.name}}</td>
+ <td>{{item.topology}}</td>
+ <td>{{item.sites}}</td>
+ <td>{{item.role}}</td>
+ <td>
+ <span class="action" (click)="editGroupSite(i+1)"><i class="anticon anticon-edit"></i></span> &nbsp;
+ <span class="action" (click)="deleteGroupSite(i+1)"><i class="anticon anticon-delete"></i></span>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ </div>
+
+ <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><span>Create</span></button>
+ </div>
+ <!-- site模态框 -->
+ <div class="sitemodel" *ngIf="siteModelShow">
+ <h3>Site_Enterprise Service</h3>
+ <div class="inputs">
+ <ul>
+ <li><span>Name:</span> <input nz-input [(ngModel)]="siteBaseData.name"></li>
+ <li><span>Description:</span> <input nz-input [(ngModel)]="siteBaseData.description"></li>
+ <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Type:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.type" nzAllowClear nzPlaceHolder="Choose">
+ <nz-option nzValue="single-gateway" nzLabel="single-gateway"></nz-option>
+ <nz-option nzValue="dual-gateway" nzLabel="dual-gateway"></nz-option>
+ </nz-select>
+ </li>
+ <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Role:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.role" nzAllowClear nzPlaceHolder="Choose">
+ <nz-option nzValue="dsvpn-hub" nzLabel="dsvpn-hub"></nz-option>
+ <nz-option nzValue="sd-wan-edge" nzLabel="sd-wan-edge"></nz-option>
+ </nz-select>
+ </li>
+ <li><span>PostCode:</span> <input nz-input [(ngModel)]="siteBaseData.postcode"></li>
+ <li><span>VLAN:</span> <input nz-input [(ngModel)]="siteBaseData.vlan"></li>
+ <li><span>Address:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.address" nzAllowClear nzPlaceHolder="Choose">
+ <nz-option *ngFor="let item of siteModeAddress" nzValue="{{item}}" nzLabel="{{item}}"></nz-option>
+ </nz-select>
+ </li>
+ </ul>
+ </div>
+ <div *ngIf="createParams.commonParams.templateType == 'CCVPN'">
+ <h4>CPE</h4>
+ <div class="inputs">
+ <ul>
+ <li><span>Name:</span> <input nz-input [(ngModel)]="siteCpeData.device_name"></li>
+ <li><span>Version:</span> <input nz-input [(ngModel)]="siteCpeData.device_version"></li>
+ <li><span>ESN:</span> <input nz-input [(ngModel)]="siteCpeData.device_esn"></li>
+ <li><span>Class:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="siteCpeData.device_class" nzAllowClear nzPlaceHolder="Choose">
+ <nz-option nzValue="VNF" nzLabel="VNF"></nz-option>
+ <nz-option nzValue="PNF" nzLabel="PNF"></nz-option>
+ </nz-select>
+ </li>
+ <li><span>System IP:</span> <input nz-input [(ngModel)]="siteCpeData.device_systemIp"></li>
+ <li><span>Vendor:</span> <input nz-input [(ngModel)]="siteCpeData.device_vendor"></li>
+ <li><span>Type:</span> <input nz-input [(ngModel)]="siteCpeData.device_type"></li>
+ </ul>
+ </div>
+ <h4>WAN Port</h4>
+ <div>
+ <nz-table #siteModalTable [nzData]="siteWanData"
+ [nzLoading]="loading"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th nzWidth="10%"> NO. </th>
+ <th nzWidth="15%"> Name </th>
+ <th nzWidth="15%"> Description </th>
+ <th nzWidth="15%"> PortType </th>
+ <th nzWidth="18%"> PortNumber </th>
+ <th nzWidth="17%"> IPAddress </th>
+ <th nzWidth="10%"> Action </th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> -->
+ <tr *ngFor="let item of siteModalTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.sitewanport_name}}</td>
+ <td>{{item.sitewanport_description}}</td>
+ <td>{{item.sitewanport_portType}}</td>
+ <td>{{item.sitewanport_portNumber}}</td>
+ <td>{{item.sitewanport_ipAddress}}</td>
+ <td>
+ <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit"></i></span>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ </div>
+ <nz-modal [(nzVisible)]="wanPortModal" nzWidth="400" nzTitle="WAN Port Edit" (nzOnCancel)="wanPortModal_Cancel()" (nzOnOk)="wanPortModal_Ok()">
+ <ul class="wanPortModalList">
+ <li><span>Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_name"></li>
+ <!-- <li><span>Device Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_deviceName"></li> -->
+ <li><span>Description:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_description"></li>
+ <li><span>Port Type:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear nzPlaceHolder="Choose">
+ <nz-option nzValue="GE" nzLabel="GE"></nz-option>
+ <nz-option nzValue="FE" nzLabel="FE"></nz-option>
+ <nz-option nzValue="XGE" nzLabel="XGE"></nz-option>
+ <nz-option nzValue="LTE" nzLabel="LTE"></nz-option>
+ <nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option>
+ <nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option>
+ </nz-select>
+ </li>
+ <li><span>Port Number:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber"></li>
+ <li><span>Ip Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress"></li>
+ <li><span>Provider IP Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_providerIpAddress"></li>
+ <li><span>Transport Nerwork:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_transportNetworkName"></li>
+ <li><span>Input Bandwidth:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_inputBandwidth"></li>
+ <li><span>Output Bandwidth:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_outputBandwidth"></li>
+ </ul>
+ </nz-modal>
+ </div>
+
+ <div class="action">
+ <button nz-button nzType="primary" (click)="addsite_OK()">OK</button>
+ <button nz-button nzType="primary" (click)="addsite_cancel()">Cancel</button>
+ </div>
+ </div>
+ <!-- 图 -->
+ <div class="chart fr">
+ Create Service
+ {{createParams.commonParams.templateType}}
+ <div id="createChart">
+ <svg width="100%" height="100%">
+ <line *ngFor="let item of lines" x1=50% y1="45%" [attr.x2]="item.x2" y2="72%" style="stroke:#3fa8eb;stroke-width:2"/>
+ <image xlink:href="./assets/images/cloud-site.png"
+ x="25%" y="30%" width="50%"/>
+ <!-- <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666">{{createParams.commonParams.templateType}}</text> -->
+ <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666"></text>
+ <g *ngFor="let item of siteImage"
+ (mouseover)="showSite($event,item)"
+ (mousemove)="moveSite($event,item)"
+ (mouseout)="hideSite($event)">
+ <image
+ xlink:href="./assets/images/site.png"
+ [attr.x]="item.x" y="65%" width="80px"/>
+ <text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}</text>
+ </g>
+
+ </svg>
+ <!-- <p class="siteNameP" [ngStyle]="siteNameStyle">{{ siteName }}</p> -->
+ </div>
+ </div>
+
+</div>
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts
new file mode 100644
index 00000000..922bd9ea
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CcvpnCreationComponent } from './ccvpn-creation.component';
+
+describe('CcvpnCreationComponent', () => {
+ let component: CcvpnCreationComponent;
+ let fixture: ComponentFixture<CcvpnCreationComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ CcvpnCreationComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CcvpnCreationComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
new file mode 100644
index 00000000..ffc354c7
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
@@ -0,0 +1,548 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MyhttpService } from '../myhttp.service';
+
+@Component({
+ selector: 'app-ccvpn-creation',
+ templateUrl: './ccvpn-creation.component.html',
+ styleUrls: ['./ccvpn-creation.component.css']
+})
+export class CcvpnCreationComponent implements OnInit {
+
+ constructor(private myhttp:MyhttpService) { }
+
+ ngOnInit() {
+ this.getSiteAddressList();
+ this.getTemParameters();
+ }
+
+ @Input() createParams;
+ @Input() namesTranslate; //输入项参数名字转换
+ @Output() closeCreate = new EventEmitter();
+
+ templateParameters = {};
+ getTemParameters(){ //获取模板参数
+ let chosedtemplates = Object.values(this.createParams.templates);
+ // console.log(this.createParams);
+ console.log(chosedtemplates); //模板id数组
+ let types = ["sotnvpn","site","sdwanvpn"];
+ chosedtemplates.forEach((item,index)=>{
+ this.myhttp.getTemplateParameters(types[index],item)
+ .subscribe((data)=>{
+ if(index === 0){
+ this.templateParameters["sotnvpn"] = data;
+ this.sotnNames = data.inputs.map((item)=>{return item.name}); //云的真实名字
+ }else if(index === 1){
+ this.templateParameters["site"] = data;
+ let wanportnames = {};
+ this.siteNames = data.inputs.map((item)=>{return item.name}); //site中所有真实名字,没有分组,放在一起了
+ this.siteNames.forEach((item)=>{
+ if(item.includes("_device_")){
+ this.siteCpeNames.push(item);
+ }else if(item.includes("_sitewanport_")){
+ let firstName = item.split("_")[0];
+ wanportnames[firstName]?wanportnames[firstName].push(item):wanportnames[firstName]=[item];
+ }else {
+ this.siteBaseNames.push(item);
+ }
+ })
+ this.siteWanNames = Object.values(wanportnames);
+ this.siteWanNames.forEach((item)=>{
+ this.siteWanData.push(this.siteWanParams); //根据wanport组添加表格中
+ })
+ // console.log(this.sotnNames)
+ // console.log(this.siteNames)
+ // console.log(this.siteBaseNames)
+ // console.log(this.siteCpeNames)
+ // console.log(this.siteWanNames)
+ // console.log(this.siteWanData)
+ }else if(index === 2){
+ this.templateParameters["sdwan"] = data;
+ this.siteGroupNames = data.inputs.map((item)=>{return item.name}); //sdwanvpn真实名字
+ // console.log(this.siteGroupNames);
+ }
+
+ },(err)=>{
+
+ })
+ })
+
+ }
+ // SOTN VPN Info 输入参数
+ sotnInfo = {
+ name:null,description:null,
+ startTime:null,endTime:null,
+ COS:"premium",reroute:false,
+ SLS:null,dualLink:false,
+ CIR:null,EIR:null,
+ CBS:null,EBS:null,
+ colorAware:false,couplingFlag:false
+ }
+ sotnNames = [] //真实名字
+
+ startTimeChange(event){
+ console.log(event)
+ }
+ endTimeChange(event){
+ console.log(event)
+ }
+
+
+ // Site List
+ siteTableData = [
+
+ ]
+ siteModeAddress = [];//site地址,筛选框数据,本地配置文件
+ siteNames = [];//site中所有真实名字,未分组,模拟真实请求情况;
+
+ siteBaseData = { //模态框数据,输入参数,绑定数据
+ name:null,
+ description:null,
+ type:null,
+ role:null,
+ postcode:null,
+ address:null,
+ vlan:null,
+ sotnVpnName:null, //SOTN VPN Info中name
+ controlPoint:null, //site group里面site的Role设置为spoke时,传递site group里面Role设置为hub的site name;否则传递空白
+ groupRole:null, //site group的role
+ groupName:null, //site group的name
+ emails:null,// 不显示传空
+ latitude:null,//
+ longitude:null,//
+ clientSignal:null//
+ };
+ siteBaseNames = [] //真实名字
+ // cpe 编辑
+ siteCpeData = {
+ device_name:null,
+ device_version:null,
+ device_esn:null,
+ device_class:null,
+ device_systemIp:null,
+ device_vendor:null,
+ device_type:null
+ };
+ siteCpeNames = [] //真实名字
+ // Wan Port 编辑
+ siteWanData = []; //wan port 表格绑定数据
+ siteWanParams = { //每一行数据详细参数,模态框
+ sitewanport_name:null,
+ sitewanport_deviceName:null,
+ sitewanport_description:null,
+ sitewanport_portType:null,
+ sitewanport_portNumber:null,
+ sitewanport_ipAddress:null,
+ sitewanport_providerIpAddress:null,
+ sitewanport_transportNetworkName:null,
+ sitewanport_inputBandwidth:null,
+ sitewanport_outputBandwidth:null
+ };
+ siteWanNames = [] //真实名字
+ wanPortModal = false; //模态框显示隐藏
+ wanPortEditNum = 0;//编辑哪行
+ editWanPort(num){
+ this.wanPortModal = true;
+ this.wanPortEditNum = num;
+ this.siteWanParams = Object.assign({},this.siteWanData[num-1]);
+ }
+ wanPortModal_Ok(){
+ let inputsData = Object.assign({},this.siteWanParams); //新建对象,断开原引用,因为后面要清空模态框
+ inputsData.sitewanport_deviceName = this.siteCpeData.device_name;
+ this.siteWanData[this.wanPortEditNum-1] = inputsData;
+ this.siteWanData = [...this.siteWanData]; //表格刷新
+ Object.keys(this.siteWanParams).forEach((item)=>{ //清空模态框
+ this.siteWanParams[item] = null;
+ })
+ this.wanPortModal = false;
+ console.log(this.siteWanData)
+ }
+ wanPortModal_Cancel(){
+ this.wanPortModal = false;
+ }
+
+
+ // 获取site地址,手动文件
+ getSiteAddressList(){
+ this.myhttp.getSiteAddress()
+ .subscribe((data)=>{
+ console.log(data);
+ this.siteModeAddress = data.map((item)=>{ return item.location});
+ },(err)=>{
+ console.log(err);
+ })
+ }
+ siteModelShow = false;
+ addSite(){
+ this.siteModelShow = true;
+ this.isEdit = 0;
+ }
+ // addsite模态框按钮
+ isEdit = 0; //编辑序号,No值,0表示增加
+ addsite_OK(){
+ this.siteBaseData.sotnVpnName = this.sotnInfo.name;
+ // let inputsData = Object.assign({},this.siteBaseData,this.siteCpeData,this.siteWanData); //新建对象,断开原引用,因为后面要清空模态框
+ let inputs = {};
+ inputs["baseData"] = Object.assign({},this.siteBaseData);
+ inputs["cpeData"] = Object.assign({},this.siteCpeData);
+ inputs["wanportData"] = this.siteWanData.map((item)=>{
+ return Object.assign({},item);
+ })
+ console.log(inputs);
+ if(this.isEdit){
+ // 编辑状态不增加
+ this.siteTableData[this.isEdit-1] = inputs;
+ this.siteTableData = [...this.siteTableData]; //表格刷新
+ this.siteGroupTableData.forEach((item)=>{ //site修改名字后,更新组中sites值
+ if(item.sites.split(";").filter((d)=>{return d!=""}).includes(this.lastSiteName)){
+ item.sites = item.sites.replace(this.lastSiteName,this.siteBaseData.name);
+ }
+ })
+ }else{
+ // this.siteTableData.push(inputs);//使用 push 或者 splice 修改 nzData 失效 当加上[nzFrontPagination]="false" 时,生效
+ this.siteTableData = [...this.siteTableData,inputs];
+ }
+
+ Object.keys(this.siteBaseData).forEach((item)=>{ //清空模态框
+ this.siteBaseData[item] = null;
+ })
+ Object.keys(this.siteCpeData).forEach((item)=>{ //清空模态框
+ this.siteCpeData[item] = null;
+ })
+ this.siteWanData.forEach((item)=>{
+ Object.keys(item).forEach((item2)=>{
+ item[item2] = null;
+ })
+ })
+ // console.log(this.siteTableData);
+ this.lastSiteName = null;
+ this.drawImage(this.siteTableData);
+ this.siteModelShow = false;
+ }
+ addsite_cancel(){
+ Object.keys(this.siteBaseData).forEach((item)=>{ //清空模态框
+ this.siteBaseData[item] = null;
+ })
+ Object.keys(this.siteCpeData).forEach((item)=>{ //清空模态框
+ this.siteCpeData[item] = null;
+ })
+ this.siteWanData.forEach((item)=>{
+ Object.keys(item).forEach((item2)=>{
+ item[item2] = null;
+ })
+ })
+ this.lastSiteName = null;
+ this.siteModelShow = false;
+ }
+ lastSiteName = null; //当site修改之后,若修改了名字,则需要更新group中sites的名字
+ editSite(num){ //编辑修改选中site信息
+ this.siteModelShow = true;
+ this.isEdit=num;
+ this.siteBaseData = Object.assign({},this.siteTableData[num-1].baseData);
+ this.siteCpeData = Object.assign({},this.siteTableData[num-1].cpeData);
+ this.siteWanData = this.siteTableData[num-1].wanportData.map((item)=>{return Object.assign({},item)});
+ this.lastSiteName = this.siteBaseData.name;
+ }
+ deleteSite(num){
+ let deleteSiteName = this.siteTableData[num-1].baseData.name; //删除的site中name
+ let groupSites = [];
+ this.siteGroupTableData.forEach((item)=>{ groupSites.push(...item.sites.split(";").filter((d)=>{return d!=""})) });
+ if(groupSites.includes(deleteSiteName)){
+ alert("this site has in grouplist;can't delete!")
+ return false;
+ }
+ this.siteTableData = this.siteTableData.filter((d,i) => i !== num-1);
+ // this.siteTableData.splice(num-1,1); //模板中加上[nzFrontPagination]="false" 时,生效
+ this.drawImage(this.siteTableData);
+
+ // let groupIndex = this.siteGroupTableData.findIndex((item)=>{return item.sites.split(";").includes(deleteSiteName)});
+ // console.log(groupIndex)
+ // this.deleteGroupSite(groupIndex + 1); //删除时首行编号为1
+ }
+
+ // site节点图形描绘
+ lines=[];
+ siteImage=[];
+ drawImage(sitelist){
+ let cx = 200;
+ let cy = 200;
+ let r = 180;
+ let startAngle = -210 * (Math.PI/180);
+ let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1;
+
+ this.lines = sitelist.map((item,index)=>{
+ let x = cx + Math.cos(startAngle - step*index)*r;
+ let y = cy + Math.sin(startAngle - step*index)*r;
+ return {img:"line",site:item.baseData.name,x1:cx,y1:cy,x2:x,y2:y}
+ })
+ this.siteImage = this.lines.map((item)=>{
+ return {img:"site",name:item.site,x:item.x2 - 40,y:item.y2 - 40}
+ })
+ }
+
+ siteName=null;
+ siteNameStyle = {
+ 'display':'none',
+ 'left':'0',
+ 'top':'0'
+ }
+ showSite($event,item){
+ this.siteName = item.name;
+ this.siteNameStyle.display = 'block';
+ }
+ moveSite($event,item){
+ this.siteNameStyle.left = $event.clientX + "px";
+ this.siteNameStyle.top = $event.clientY - 35 + "px";
+ }
+ hideSite($event){
+ this.siteNameStyle.display = 'none';
+ }
+ // siteGroup List
+ siteGroupTableData = [
+
+ ]
+ siteGroupModelData = {
+ name:null,
+ topology:null,
+ sites:null,
+ role:null
+ }
+ siteGroupModelShow = false;
+ siteGroupModalTableData = [];// ==> siteTableData?
+ siteGroupNames=[]; //sdwanvpn真实名字
+
+ // 勾选框
+ allChecked = false;
+ indeterminate = false;
+ groupModal_checkAll(value){
+ this.siteGroupModalTableData.forEach(data => {
+ if (!data.disabled) {
+ data.checked = value;
+ }
+ });
+ this.refreshStatus();
+ }
+ refreshStatus(){
+ const allChecked = this.siteGroupModalTableData.filter(item => !item.disabled).every(item => item.checked === true);
+ const allUnChecked = this.siteGroupModalTableData.filter(item => !item.disabled).every(item => !item.checked);
+ this.allChecked = allChecked;
+ this.indeterminate = (!allChecked) && (!allUnChecked);
+ }
+
+ addSiteGroup(){
+ this.isGroupEdit = 0;
+ this.siteGroupModelShow = true;
+ let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//循环组中是否已经选用了某个site,若存在 则新组不可选
+ // console.log(checkedSite);
+ this.siteTableData.forEach((item,index)=>{
+ if(checkedSite.includes(item.baseData.name)){
+ this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:true})
+ }else {
+ this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:false})
+ }
+ })
+ }
+ // addsiteGroup模态框按钮
+ addsitegroup_OK(){ //将模态框中的值赋给表中对应项--->将选中的site中的groupRole、groupName、controlPoint更新--->
+ //拷贝数据判断是增加或编辑,更新表中数据---> 清除模态框中数据,便于下次添加,关闭模态框
+ console.log(this.siteGroupModalTableData);
+ this.siteGroupModelData.sites=""; //置空组成员名字,写成""方便+= ,若为null +=时会转成 "null"
+ this.siteGroupModelData.role=""; //
+ let site_controlPoint = this.siteGroupModalTableData.map((item)=>{ if(item.checked&&item.role=="hub"){ return item.siteName}}).filter((item)=>{return item!=undefined});
+ // console.log(site_controlPoint);
+ this.siteGroupModalTableData.forEach((item,index)=>{ //模态框中site顺序和 表中site顺序一致
+ if(item.checked){
+ this.siteGroupModelData.sites += item.siteName+";";
+ this.siteGroupModelData.role += item.role+";";
+ this.siteTableData[index].baseData.groupRole = item.role; //site group的role
+ this.siteTableData[index].baseData.groupName = this.siteGroupModelData.name; //site group的name
+ if(item.role == "spoke"){
+ this.siteTableData[index].baseData.controlPoint = site_controlPoint.join(); //site group里面site的Role设置为spoke时,传递site group里面Role设置为hub的site name;否则传递空白
+ }
+ }
+ })
+
+ let inputsData = {};
+ Object.assign(inputsData,this.siteGroupModelData);
+ if(this.isGroupEdit){
+ // 编辑状态不增加
+ this.siteGroupTableData[this.isGroupEdit-1] = inputsData;
+ this.siteGroupTableData = [...this.siteGroupTableData]; //表格刷新
+ }else{
+ // this.siteTableData.push(inputsData);//使用 push 或者 splice 修改 nzData 失效
+ this.siteGroupTableData = [...this.siteGroupTableData,inputsData];
+ }
+
+ Object.keys(this.siteGroupModelData).forEach((item)=>{
+ this.siteGroupModelData[item] = null;
+ })
+ this.siteGroupModalTableData = [];
+ this.siteGroupModelShow = false;
+ }
+ addsitegroup_cancel(){
+ this.siteGroupModalTableData = [];
+ this.siteGroupModelShow = false;
+ }
+ isGroupEdit = 0; //编辑序号,No值,0表示增加
+ editGroupSite(num){ //将当前编辑的行数据填入模态框--->获取当前编辑项sites名--->判断更新模态框中site项状态
+ this.siteGroupModelShow = true;
+ this.isGroupEdit=num;
+ this.siteGroupModelData = Object.assign({},this.siteGroupTableData[num-1]);
+ console.log(this.siteGroupModelData)
+ let editSites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //获取组中的site名
+ // console.log(editSites);
+ let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//循环组中是否已经选用了某个site,若存在 则新组不可选
+ // console.log(checkedSite);
+ this.siteTableData.forEach((item,index)=>{
+ if(editSites.includes(item.baseData.name)){//先将编辑组中的site 中这三个值还原,否则减少某个site时 不会更新不选中的
+ item.baseData.groupRole = null; //site group的role
+ item.baseData.groupName = null; //site group的name
+ item.baseData.controlPoint = null;
+ this.siteGroupModalTableData.push({siteName:item.baseData.name,role:item.baseData.groupRole,checked:true,disabled:false})
+ }else
+ if(checkedSite.includes(item.baseData.name)){
+ this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:true})
+ }else {
+ this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:false})
+ }
+ })
+
+ }
+ deleteGroupSite(num){
+ let deleteSiteGroupsites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //删除的site中name
+ this.siteGroupTableData = this.siteGroupTableData.filter((d,i) => i !== num-1);
+ this.siteTableData.forEach((item,index)=>{
+ if(deleteSiteGroupsites.includes(item.baseData.name)){
+ item.baseData.groupRole = null; //site group的role
+ item.baseData.groupName = null; //site group的name
+ item.baseData.controlPoint = null;
+ }
+ })
+ }
+
+
+
+ // 提交创建数据
+ submit(){
+ let globalCustomerId = this.createParams.commonParams.customer.id;
+ let globalServiceType = this.createParams.commonParams.serviceType;
+ let sotnInputs = {};
+ // 由于请求模板不一样,所以外层需要循环请求回来的真实名字,内层循环本地参数,将当前值赋给真实名字
+ this.sotnNames.forEach((name)=>{
+ for(let key in this.sotnInfo){
+ let nameParts = this.namesTranslate.sotnNameTranslate[key].split("_");
+ if(name.startsWith(nameParts[0])&&name.endsWith(nameParts[1])){
+ sotnInputs[name] = this.sotnInfo[key];
+ break;
+ }
+ }
+ })
+ console.log(sotnInputs);
+ let vpnbody = {
+ service:{
+ name:this.sotnInfo.name,
+ description:this.sotnInfo.description,
+ serviceInvariantUuid:this.templateParameters["sotnvpn"].invariantUUID, //template.invariantUUID, //serviceDefId
+ serviceUuid:this.templateParameters["sotnvpn"].uuid, //template.uuid, // uuid ?? templateId
+ globalSubscriberId:globalCustomerId, //customer.id
+ serviceType:globalServiceType, //serviceType.value
+ parameters:{
+ locationConstraints:[],
+ resources:[],
+ requestInputs:sotnInputs
+ }
+ }
+ }
+
+ let sitebody = this.siteTableData.map((site)=>{
+ let siteInputs = {};
+ this.siteBaseNames.forEach((basename)=>{
+ for(let key in site.baseData){
+ let namePart = this.namesTranslate.siteNameTranslate.baseNames[key];
+ if(basename.endsWith(namePart)){
+ siteInputs[basename] = site.baseData[key];
+ break;
+ }
+ }
+ })
+ this.siteCpeNames.forEach((cpename)=>{
+ for(let key in site.cpeData){
+ let namePart = this.namesTranslate.siteNameTranslate.cpeNames[key];
+ if(cpename.endsWith(namePart)){
+ siteInputs[cpename] = site.cpeData[key];
+ break;
+ }
+ }
+ })
+ this.siteWanNames.forEach((item,index)=>{
+ item.forEach((wanportname)=>{
+ for(let key in site.wanportData[index]){
+ let namePart = this.namesTranslate.siteNameTranslate.wanportNames[key];
+ if(wanportname.endsWith(namePart)){
+ siteInputs[wanportname] = site.wanportData[index][key];
+ break;
+ }
+ }
+ })
+ })
+
+ return {
+ service:{
+ name:site.baseData.name,
+ description:site.baseData.description,
+ serviceInvariantUuid:this.templateParameters["site"].invariantUUID,
+ serviceUuid:this.templateParameters["site"].uuid,
+ globalSubscriberId:globalCustomerId,
+ serviceType:globalServiceType,
+ parameters:{
+ locationConstraints:[],
+ resources:[],
+ requestInputs:siteInputs
+ }
+ }
+ }
+ });
+ console.log(sitebody);
+
+ let groupbody = this.siteGroupTableData.map((item)=>{
+ let siteGroupInputs = {};
+ this.siteGroupNames.forEach((name)=>{
+ for(let key in item){
+ let nameParts = this.namesTranslate.siteGroupNameTranslate[key].split("_");
+ if(name.startsWith(nameParts[0])&&name.endsWith(nameParts[1])){
+ siteGroupInputs[name] = item[key];
+ break;
+ }
+ }
+ })
+ return {
+ service:{
+ name:item.name,
+ description:item.topology,
+ serviceInvariantUuid:this.templateParameters["sdwan"].invariantUUID,
+ serviceUuid:this.templateParameters["sdwan"].uuid,
+ globalSubscriberId:globalCustomerId,
+ serviceType:globalServiceType,
+ parameters:{
+ locationConstraints:[],
+ resources:[],
+ requestInputs:siteGroupInputs
+ }
+ }
+ }
+ })
+ console.log(groupbody);
+
+ let createObj = {
+ vpnbody:vpnbody,
+ sitebody:sitebody,
+ groupbody:groupbody
+ }
+
+ this.closeCreate.emit(createObj);
+
+ }
+
+ goback(){
+ this.closeCreate.emit();
+ }
+}
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
new file mode 100644
index 00000000..710bd104
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.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: 10px;
+}
+.model {
+ background-color: #fff;
+ height: 90%;
+ overflow-y: auto;
+}
+.model .back {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+.model .detaildata {
+ position: relative;
+ width: 60%;
+ height: 100%;
+ overflow-y: auto;
+ border-radius: 5px;
+ padding: 15px;
+}
+.model .detaildata h3.title {
+ height: 20px;
+ font: 700 20px/20px "Arial";
+ color: #666;
+}
+.model .detaildata h3 {
+ height: 20px;
+ font: 700 16px/20px "Arial";
+ margin: 5px 0px;
+ color: #000;
+}
+/* SOTN VPN */
+.model .detaildata .sotnvpn ul li {
+ display: inline-block;
+ height: 35px;
+ width: 49.5%;
+}
+.model .detaildata .sotnvpn ul li span {
+ display: inline-block;
+ width: 110px;
+ font: 700 14px "Arial";
+ color: #3fa8eb;
+ vertical-align: middle;
+}
+/* site Detail */
+.model .detaildata .site .siteDetail {
+ position: fixed;
+ z-index: 10;
+ left: 260px;
+ top: 50px;
+ background-color: #fff;
+ box-shadow: 0px 0px 20px #000;
+ width: 50%;
+ max-height: 85%;
+ border-radius: 5px;
+ overflow-y: auto;
+}
+.model .detaildata .site h3 {
+ margin: 0;
+ height: 30px;
+ font: 700 16px/30px "Arial";
+ padding-left: 10px;
+ background-color: #ddd;
+}
+.model .detaildata .site h3 .closeDetail {
+ cursor: pointer;
+ padding: 2px 15px;
+ color: #3fa8eb;
+}
+.model .detaildata .site ul li {
+ padding-left: 5px;
+ display: inline-block;
+ height: 35px;
+ width: 32%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.model .detaildata .site ul li span {
+ display: inline-block;
+ width: 95px;
+ font: 700 14px "Arial";
+ color: #3fa8eb;
+ vertical-align: middle;
+}
+
+/* 图 */
+.model .chart {
+ width: 40%;
+ padding: 10px;
+ height: 100%;
+ border-left: 10px solid #f3f3f3;
+}
+.model .chart #detailChart {
+ position: relative;
+ width: 100%;
+ height: 80%;
+ margin-top: 20px;
+}
+.model .chart #detailChart .cloudcounty {
+ cursor: pointer;
+}
+
+.model .chart #detailChart .couldDetail {
+ position: absolute;
+ left: 50%;
+ top: 10px;
+ width: 80%;
+ transform: translate(-50%,0);
+ height: 160px;
+ background-color: #aaa;
+ border-radius: 5px;
+ box-shadow: 0px 0px 20px #000;
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
new file mode 100644
index 00000000..33d56eb9
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
@@ -0,0 +1,336 @@
+<!--
+ 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.
+-->
+<h3 class="title"> Services List </h3>
+<hr>
+<div class="model">
+ <!-- 详情数据 -->
+ <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button>
+ <div class="detaildata fl">
+ <h3 class="title">{{detailParams.sotnvpnSer['service-instance-name']}} Instance Detail</h3>
+ <div class="sotnvpn clearfix">
+ <h3>SOTN VPN Info</h3>
+ <ul>
+ <li><span>Name:</span> {{sotnVpnInfo.name}}</li>
+ <li><span>Description:</span> {{sotnVpnInfo.description}} </li>
+ <li><span>Start Time:</span> {{sotnVpnInfo.startTime}}</li>
+ <li><span>End Time:</span> {{sotnVpnInfo.endTime}} </li>
+ <li><span>COS:</span> {{sotnVpnInfo.COS}}</li>
+ <li><span>Reroute Enable:</span> {{sotnVpnInfo.reroute}} </li>
+ <li><span>Service Level Specification:</span> {{sotnVpnInfo.SLS}}</li>
+ <li><span>DualLink:</span> {{sotnVpnInfo.dualLink}} </li>
+ <li><span>CIR:</span> {{sotnVpnInfo.CIR}}</li>
+ <li><span>EIR:</span> {{sotnVpnInfo.EIR}} </li>
+ <li><span>CBS:</span> {{sotnVpnInfo.CBS}}</li>
+ <li><span>EBS:</span> {{sotnVpnInfo.EBS}} </li>
+ <li><span>Color Aware:</span> {{sotnVpnInfo.colorAware}}</li>
+ <li><span>Coupling Flag:</span> {{sotnVpnInfo.couplingFlag}} </li>
+ </ul>
+ </div>
+
+ <div class="site">
+ <h3>Site List</h3>
+ <nz-table #nzTable [nzData]="siteList"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th nzWidth="10%"> NO. </th>
+ <th nzWidth="15%"> Name </th>
+ <th nzWidth="20%"> Description </th>
+ <th nzWidth="15%"> Post Code </th>
+ <th nzWidth="15%"> Address </th>
+ <th nzWidth="15%"> VLAN </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.baseNames.name}}</td>
+ <td>{{item.baseNames.description}}</td>
+ <td>{{item.baseNames.postcode}}</td>
+ <td>{{item.baseNames.address}}</td>
+ <td>{{item.baseNames.vlan}}</td>
+ <td (click)="showSiteDetail(item)"> <a href="javascript:;">Detail</a> </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ <div class="siteDetail" *ngIf="siteDetail">
+ <h3>Site_Enterprise Service <span class="closeDetail fr" (click)="siteDetail=false">X</span></h3>
+ <ul>
+ <li><span>Name:</span> {{ siteDetailData.baseNames.name}}</li>
+ <li><span>Description:</span> {{ siteDetailData.baseNames.description }} </li>
+ <li *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"><span>Type:</span> {{ siteDetailData.baseNames.type }} </li>
+ <li *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"><span>Role:</span> {{ siteDetailData.baseNames.role }} </li>
+ <li><span>PostCode:</span> {{ siteDetailData.baseNames.postcode }} </li>
+ <li><span>VLAN:</span> {{ siteDetailData.baseNames.vlan }}</li>
+ <li><span>Address:</span> {{ siteDetailData.baseNames.address }}</li>
+ <li><span>ClientSignal:</span> {{ siteDetailData.baseNames.clientSignal }}</li>
+ <li><span>ControlPoint:</span> {{ siteDetailData.baseNames.controlPoint }}</li>
+ <li><span>Emails:</span> {{ siteDetailData.baseNames.emails }}</li>
+ <li><span>GroupName:</span> {{ siteDetailData.baseNames.groupName }}</li>
+ <li><span>GroupRole:</span> {{ siteDetailData.baseNames.groupRole }}</li>
+ <li><span>Latitude:</span> {{ siteDetailData.baseNames.latitude }}</li>
+ <li><span>Longitude:</span> {{ siteDetailData.baseNames.longitude }}</li>
+ <li><span>SotnVpnName:</span> {{ siteDetailData.baseNames.sotnVpnName }}</li>
+ </ul>
+ <div *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'">
+ <h3>CPE</h3>
+ <ul>
+ <li><span>Name:</span> {{siteDetailData.cpeNames.device_name}}</li>
+ <li><span>Version:</span> {{ siteDetailData.cpeNames.device_version }} </li>
+ <li><span>ESN:</span> {{ siteDetailData.cpeNames.device_esn }} </li>
+ <li><span>Class:</span> {{ siteDetailData.cpeNames.device_class }} </li>
+ <li><span>System IP:</span> {{ siteDetailData.cpeNames.device_systemIp }} </li>
+ <li><span>Vendor:</span> {{ siteDetailData.cpeNames.device_vendor }}</li>
+ <li><span>Type:</span> {{ siteDetailData.cpeNames.device_type }}</li>
+ </ul>
+ <h3>WAN Port</h3>
+ <nz-table #nzTable [nzData]="siteDetailData.wanportNames"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th nzWidth="10%"> NO. </th>
+ <th nzWidth="15%"> Name </th>
+ <th nzWidth="20%"> Description </th>
+ <th nzWidth="15%"> PortType </th>
+ <th nzWidth="15%"> PortNumber </th>
+ <th nzWidth="15%"> IPAddress </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.sitewanport_name}}</td>
+ <td>{{item.sitewanport_description}}</td>
+ <td>{{item.sitewanport_portType}}</td>
+ <td>{{item.sitewanport_portNumber}}</td>
+ <td>{{item.sitewanport_ipAddress}}</td>
+ <td (click)="showWanportDetail(item)"> <a href="javascript:;">Detail</a> </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ <nz-modal [(nzVisible)]="wanPortModal" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
+ <ng-template #modalTitle>
+ WAN Port Detail
+ </ng-template>
+
+ <ng-template #modalContent>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Name </span> {{wanPortDetail.sitewanport_name}}</p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Description: </span> {{wanPortDetail.sitewanport_description}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Type: </span> {{wanPortDetail.sitewanport_portType}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Number: </span> {{wanPortDetail.sitewanport_portNumber}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Ip Address: </span> {{wanPortDetail.sitewanport_ipAddress}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Provider IP Address: </span> {{wanPortDetail.sitewanport_providerIpAddress}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Transport Nerwork: </span> {{wanPortDetail.sitewanport_transportNetworkName}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Input Bandwidth: </span> {{wanPortDetail.sitewanport_inputBandwidth}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Output Bandwidth: </span> {{wanPortDetail.sitewanport_outputBandwidth}} </p>
+ </ng-template>
+
+ <ng-template #modalFooter>
+ <!-- <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button> -->
+ </ng-template>
+ </nz-modal>
+ </div>
+
+ </div>
+ </div>
+
+ <div class="sitegroup" *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'">
+ <h3>Site_Group List</h3>
+ <nz-table #nzTable [nzData]="siteGroupList"
+ [nzLoading]="loading"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th nzWidth="10%"> NO. </th>
+ <th nzWidth="20%"> Group Name </th>
+ <th nzWidth="20%"> Topology </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.topology}}</td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ </div>
+ </div>
+ <!-- 图 -->
+ <div class="chart fr">
+
+ <div id="detailChart">
+ <!-- <svg width="100%" height="100%">
+ <line *ngFor="let item of lines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#3fa8eb;stroke-width:2"/>
+ <image xlink:href="./assets/images/cloud-county.png"
+ class="cloudcounty"
+ (click)="toggleClick()"
+ (mouseover)="hoverShowcould()"
+ (mouseout)="hoverHidecould()"
+ x="175" y="175" height="50px" width="50px"/>
+ <image *ngFor="let item of siteImage"
+ xlink:href="./assets/images/cloud-city.png"
+ [attr.x]="item.x" [attr.y]="item.y" height="50px" width="50px"/>
+ </svg>
+ <div class="couldDetail" *ngIf="hoverShow || clickShow">
+
+ </div> -->
+ <svg width="100%" height="100%" style="position: relative">
+ <!--背景大图-->
+ <image xlink:href="./assets/images/bigcloud.png"
+ class="backgroundcloud"
+ width="100%"
+ style="position: absolute;z-index:-1">
+ </image>
+ <!--tp,site,domain之间的连线-->
+ <line *ngFor="let item of detailLines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#FFC000; stroke-width:2"></line>
+ <line *ngIf="detailSites" x1="45%" y1="30%" x2="75%" y2="20%" style="stroke:#FFC000; stroke-width:2"></line>
+ <!--本地domain-->
+ <g class="clouds">
+ <image xlink:href="./assets/images/domain.png"
+ id="domain1"
+ width="20%"
+ x="10%" y="10%"
+ ></image>
+ <text dx="12%" dy="16%" style="font-size: 14px; fill:#666;width: 20px;">
+ {{vpns[0].domain}}
+ </text>
+ </g>
+ <g *ngIf="vpns[1]" class="clouds">
+ <image xlink:href="./assets/images/domain.png"
+ id="domain2"
+ width="20%"
+ x="40%" y="13%"
+ ></image>
+ <text dx="43%" dy="19%" style="font-size: 14px; fill: #666;width: 20px;">
+ {{vpns[1].domain}}
+ </text>
+ </g>
+ <!--domain1下连接的tp-->
+ <g class="clouds">
+ <image xlink:href="./assets/images/tp.png"
+ class="tp"
+ id="tp1"
+ height="16" width="20"
+ x="15%" y="25%"
+ ></image>
+ <text dx="18%" dy="27%" style="font-size: 14px; fill: #666;width: 20px;">
+ {{vpns[0].sitetpname}}
+ </text>
+ </g>
+ <g class="clouds">
+ <image xlink:href="./assets/images/tp.png"
+ class="tp"
+ id="tp2"
+ height="16" width="20"
+ x="30%" y="10%"
+ ></image>
+ <text dx="30%" dy="6%" style="font-size: 14px; fill: #666;width: 20px;">
+ {{vpns[0].othertpname}}
+ </text>
+ </g>
+ <!--domain2下连接的tp-->
+ <g *ngIf="vpns[1]" class="clouds">
+ <image xlink:href="./assets/images/tp.png"
+ class="tp"
+ id="tp3"
+ height="16" width="20"
+ x="40%" y="10%"
+ ></image>
+ <text dx="40%" dy="9%" style="font-size: 14px; fill: #666;width: 20px;">
+ {{vpns[1].othertpname}}
+ </text>
+ </g>
+ <g *ngIf="vpns[1]" class="clouds">
+ <image xlink:href="./assets/images/tp.png"
+ class="tp"
+ id="tp4"
+ height="16" width="20"
+ x="43%" y="28%"
+ ></image>
+ <text dx="46%" dy="30%" style="font-size: 14px; fill: #666;width: 20px;">
+ {{vpns[1].sitetpname}}
+ </text>
+ </g>
+ <!--外部云-->
+ <g class="clouds">
+ <image xlink:href="./assets/images/out-domain.png"
+ id="extent-cloud"
+ height="70.8" width="120"
+ x="66%" y="12%"
+ ></image>
+ <text dx="68%" dy="18%" style="font-size: 14px; fill: #666;width: 20px;">
+ SP Partent Network
+ </text>
+ </g>
+ <!--本地的2个site-->
+ <g class="clouds">
+ <image xlink:href="./assets/images/site.png"
+ id="site1"
+ height="59" width="100"
+ x="0%" y="48%"
+ ></image>
+ <text dx="2%" dy="53%" style="font-size: 14px; fill: #666;width: 20px;">
+ {{localSite[0]["service-instance-name"]}}
+ </text>
+ </g>
+ <g *ngIf="!detailSites" class="clouds">
+ <image xlink:href="./assets/images/site.png"
+ id="site2"
+ height="59" width="100"
+ x="25%" y="48%"
+ ></image>
+ <text dx="26%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;">
+ {{localSite[1]["service-instance-name"]}}
+ </text>
+ </g>
+ <!--外部的2个site-->
+ <g *ngIf="!detailSites" class="clouds">
+ <image xlink:href="./assets/images/site.png"
+ id="site3"
+ height="59" width="100"
+ x="50%" y="48%"
+ ></image>
+ <text dx="52%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;">
+ {{outerSite[1]["service-instance-name"]}}
+ </text>
+ </g>
+ <g class="clouds">
+ <image xlink:href="./assets/images/site.png"
+ id="site4"
+ height="59" width="100"
+ x="75%" y="48%"
+ ></image>
+ <text dx="80%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;">
+ {{outerSite[0]["service-instance-name"]}}
+ </text>
+ </g>
+ </svg>
+ </div>
+ </div>
+
+</div>
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts
new file mode 100644
index 00000000..dc5d34d9
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CcvpnDetailComponent } from './ccvpn-detail.component';
+
+describe('CcvpnDetailComponent', () => {
+ let component: CcvpnDetailComponent;
+ let fixture: ComponentFixture<CcvpnDetailComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ CcvpnDetailComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CcvpnDetailComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
new file mode 100644
index 00000000..c9d60ef8
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
@@ -0,0 +1,368 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MyhttpService } from '../myhttp.service';
+import * as d3 from 'd3';
+
+@Component({
+ selector: 'app-ccvpn-detail',
+ templateUrl: './ccvpn-detail.component.html',
+ styleUrls: ['./ccvpn-detail.component.css']
+})
+export class CcvpnDetailComponent implements OnInit {
+
+ constructor(private myhttp:MyhttpService) { }
+
+ ngOnInit() {
+ // this.getDetails();
+ this.dataInit();
+ this.drawImages();
+ }
+
+ @Input() detailParams;
+ @Input() namesTranslate;
+ @Output() closeDetail = new EventEmitter();
+
+ sotnVpnInfo:any;
+ siteList=[];
+ siteGroupList=[];
+ dataInit(){
+ // 循环真实参数,对比名字转换配置文件,将真实参数名字改成通用名字
+ this.sotnVpnInfo = JSON.parse(this.detailParams.sotnvpnSer['input-parameters']).service.parameters.requestInputs;
+ for(let key in this.sotnVpnInfo){
+ for(let key2 in this.namesTranslate.sotnNameTranslate){
+ let partnames = this.namesTranslate.sotnNameTranslate[key2].split("_");
+ if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
+ this.sotnVpnInfo[key2] = this.sotnVpnInfo[key];
+ break;
+ }
+ }
+ }
+
+ this.siteList = this.detailParams.siteSer.map((item)=>{
+ return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
+ })
+ this.siteList.forEach((oneSite,idex)=>{
+ oneSite["baseNames"]={};oneSite["cpeNames"]={};oneSite["wanportNames"]=[];
+ for(let key in oneSite){
+ let hasfind = false;
+ if(key == "baseNames" || key == "cpeNames" || key == "wanportNames"){ continue };
+ for(let key2 in this.namesTranslate.siteNameTranslate.baseNames){
+ if(key.endsWith(this.namesTranslate.siteNameTranslate.baseNames[key2])){
+ oneSite["baseNames"][key2] = oneSite[key];
+ hasfind = true;
+ break;
+ }
+ }
+ if(hasfind){ continue };
+ for(let key3 in this.namesTranslate.siteNameTranslate.cpeNames){
+ if(key.endsWith(this.namesTranslate.siteNameTranslate.cpeNames[key3])){
+ oneSite["cpeNames"][key3] = oneSite[key];
+ hasfind = true;
+ break;
+ }
+ }
+ if(hasfind){ continue };
+ let wanportStartName = key.split("_")[0];
+ // 先分组,后面再变换名字
+ let theItem = oneSite["wanportNames"].find((item,index)=>{
+ if(item){
+ return Object.keys(item)[0].startsWith(wanportStartName)
+ }
+ })
+ theItem?theItem[key]=oneSite[key]:oneSite["wanportNames"].push({[key]:oneSite[key]})
+ }
+ let wanportTs = Object.values(this.namesTranslate.siteNameTranslate.wanportNames);
+ oneSite["wanportNames"].forEach((item)=>{
+ for(let key in item){
+ let newName = wanportTs.find((name)=>{
+ return key.endsWith(name);
+ })
+ newName?item[newName]=item[key]:null;
+ }
+ })
+
+ })
+
+ this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{
+ return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
+ })
+ this.siteGroupList.forEach((oneSiteGroup)=>{
+ for(let key in oneSiteGroup){
+ for(let key2 in this.namesTranslate.siteGroupNameTranslate){
+ let partnames = this.namesTranslate.siteGroupNameTranslate[key2].split("_");
+ if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
+ oneSiteGroup[key2] = oneSiteGroup[key];
+ break;
+ }
+ }
+ }
+ })
+ console.log(this.siteList)
+ this.drawImage(this.siteList);
+ }
+
+ // site详情
+ siteDetailData={baseNames:{},cpeNames:{},wanportNames:[]};
+ siteDetail = false;
+ showSiteDetail(item){
+ this.siteDetail = true;
+ this.siteDetailData = item;
+ }
+
+ wanPortModal = false;
+ wanPortDetail = {};
+ showWanportDetail(item){
+ this.wanPortModal = true;
+ this.wanPortDetail = item;
+ }
+ handleCancel(){
+ this.wanPortModal = false;
+ }
+
+ // sitegroup详情
+
+ // site节点图形描绘
+ // site分类,根据site查tp pnf --> allotted-resource
+ localSite = [];//本地site
+ outerSite = [];//外部site
+
+ getSiteAResource(){
+ return new Promise((res,rej)=>{
+ this.detailParams.siteSer.forEach((site)=>{
+ site["relationship-list"]["relationship"].find((item)=>{return item["related-to"]=="site-resource"})?this.localSite.push(site):this.outerSite.push(site);
+ })
+
+ if(this.localSite[0]["service-instance-name"].startsWith("Dc")){
+ this.localSite.reverse();
+ }
+
+ if(this.outerSite[0]["service-instance-name"].startsWith("Dc")){
+ this.outerSite.reverse();
+ }
+
+ // 本地site获取tp pnf
+ this.localSite.forEach((site)=>{
+ let obj = {
+ customerId: this.detailParams.customer.id,
+ serviceType: this.detailParams.serviceType,
+ serviceId: site["service-instance-id"]
+ }
+ this.myhttp.getAllottedResource(obj)
+ .subscribe((data)=>{
+ // console.log(data);
+ let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"});
+ // console.log(resource);
+ let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"];
+ // console.log(tps_pnfs);
+ // site.pnfname = tps_pnfs.find((item)=>{return item["relationship-key"]=="pnf.pnf-name"})["relationship-value"];
+ site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"];
+ // // 通过pnfname获取domain(network-resource);
+ // this.myhttp.getPnfDetail(site.pnfname)
+ // .subscribe((data2)=>{
+ // // console.log(data2);
+ // let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"];
+ // site.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"];
+ // res("sites-domain");
+ // })
+ res("sites-domain");
+ })
+ })
+ })
+ }
+ //通过sotn 查vpn-id --> tp pnf --> allotted-resource
+ relation = {sotn:{
+ name:"sotn1",
+ vpns:[
+ {
+ name:"vpn1",
+ domain:"domain1",
+ site:"site1",
+ tps:[
+ {name:"tp1",lineto:"site1"},
+ {name:"tp2",lineto:"domain1"}
+ ]
+ },
+ {
+ name:"vpn2",
+ domain:"domain2",
+ site:"site2",
+ tps:[
+ {name:"tp3",lineto:"site2"},
+ {name:"tp4",lineto:"domain2"}
+ ]
+ }
+ ]
+ }};
+
+ vpns = [{name: "", tps: [], domain: "", sitetpname: "", othertpname: ""}];
+ getSotnAresource(){
+ return new Promise((res,rej)=>{
+ let connectivityId = this.detailParams.sotnvpnSer["relationship-list"]["relationship"]
+ .find((item)=>{return item["related-to"]=="connectivity"})["relationship-data"]
+ .find((item2)=>{return item2["relationship-key"]=="connectivity.connectivity-id"})["relationship-value"];
+ this.myhttp.getSotnConnectivity(connectivityId)
+ .subscribe((data)=>{
+ // console.log(data); //默认一个connectivityId只能查到一个connectivity
+ let vpns = data.connectivity[0]["relationship-list"]["relationship"]
+ .filter((item)=>{ return item["related-to"]=="vpn-binding"})
+ .map((item2)=>{return item2["relationship-data"].find((item3)=>{return item3["relationship-key"]=="vpn-binding.vpn-id"})["relationship-value"]});
+ console.log(vpns);
+ this.detailParams.sotnvpnSer.vpns = vpns.map((item)=>{return {name:item}});
+ this.detailParams.sotnvpnSer.vpns.forEach((vpn,index)=>{
+ this.myhttp.getVpnBinding(vpn.name)
+ .subscribe((data2)=>{
+ // console.log(data2); //默认一个vpnid只能查到一个vpnbinding
+ let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"]
+ .filter((item)=>{ return item["related-to"]=="p-interface"})
+ .map((item2)=>{return item2["relationship-data"]});
+ let pnfname = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="pnf.pnf-name"})["relationship-value"]});
+ let tpnames = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="p-interface.interface-name"})["relationship-value"]});
+ // console.log(pnfname)
+ // console.log(tpnames)
+ vpn.tps = tpnames;
+ // let thissite = this.localSite.find((item)=>{return item.pnfname == pnfname[0]}); //查找site上pnfname相同的项,即同domain
+ // console.log(thissite);
+ // thissite.tpsotnname = tpsotnnames.find((item)=>{return item!=thissite.tpsitename});
+ // 通过pnfname获取domain(network-resource);
+ this.myhttp.getPnfDetail(pnfname[0])
+ .subscribe((data2)=>{
+ // console.log(data2);
+ let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"];
+ vpn.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"];
+ if(this.localSite[index]){
+ vpn.sitetpname = this.localSite.find((site)=>{return tpnames.includes(site.tpsitename)}).tpsitename;
+ console.log(tpnames)
+ console.log(vpn.sitetpname)
+ vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname});
+ }else{
+ vpn.sitetpname = this.localSite[0].tpsitename;
+ vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname});
+ }
+
+ this.vpns = this.detailParams.sotnvpnSer.vpns;
+ res("sotn-domain");
+ // console.log(vpn);
+ })
+
+ })
+ })
+ })
+ })
+ }
+
+ drawImages(){
+
+ this.getSiteAResource().then((data)=>{
+ console.log(data);
+ return this.getSotnAresource()
+ }).then((data)=>{
+ console.log(data);
+ console.log(this.localSite);
+ this.detailSites = this.detailParams.sotnvpnSer.Type == "CCVPN"?false:true;
+ this.detailParams.sotnvpnSer.Type == "CCVPN"?null:this.detailLines.length = this.detailLines.length-3;
+ // 当只有一个vpn的时候
+ if(this.detailParams.sotnvpnSer.Type == "CCVPN" && this.vpns.length == 1){
+ let line = {
+ "x1":"32%","y1":"12%","x2":"32%","y2":"50%"//t2--site2 当本地云只有一朵的时候,tp2与本地site2相连
+ }
+ this.detailLines.length = this.detailLines.length-6;
+ this.detailLines.push(line);
+ // 当本地site有两个的时候
+ if(this.localSite.length==2){
+ let line = {
+ "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3
+ }
+ this.detailLines.push(line);
+ }
+ // 当外部site有两个的时候
+ if(this.outerSite.length==2){
+ let line = {
+ "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3
+ }
+ this.detailLines.push(line);
+ }
+ }
+ })
+ // let allnodes = [this.getSiteAResource(),this.getSotnAresource()];
+ // Promise.all(allnodes).then((data)=>{
+ // console.log(data)
+ // console.log(this.localSite);
+
+
+ // })
+ }
+
+ detailSites=false;
+ detailLines=[ //详情拓扑图连线的坐标
+ {
+ "x1":"5%","y1":"50%","x2":"17%","y2":"25%"//site1--tp1
+ },
+ {
+ "x1":"22%","y1":"20%","x2":"17%","y2":"25%"//tp1--domian1
+ }
+ ,
+ {
+ "x1":"26%","y1":"15%","x2":"30%","y2":"12%"//domian1--tp2
+ },
+
+ {
+ "x1":"80%","y1":"20%","x2":"85%","y2":"50%"//out-domain--site4
+ },
+
+ {
+ "x1":"50%","y1":"22%","x2":"45%","y2":"28%"//tp4--domian2
+ },
+ {
+ "x1":"40%","y1":"11%","x2":"50%","y2":"15%"//domian2--tp3
+ },
+ {
+ "x1":"32%","y1":"11%","x2":"41%","y2":"11%"//tp2--tp3
+ },
+
+ {
+ "x1":"45%","y1":"30%","x2":"35%","y2":"50%"//site2--tp4
+ },
+ {
+ "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3
+ },
+ {
+ "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3
+ }
+ ];
+ lines=[];
+ siteImage=[];
+ drawImage(sitelist){
+ let cx = 200;
+ let cy = 200;
+ let r = 150;
+ let startAngle = -210 * (Math.PI/180);
+ let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1;
+
+ this.lines = sitelist.map((item,index)=>{
+ let x = cx + Math.cos(startAngle - step*index)*r;
+ let y = cy + Math.sin(startAngle - step*index)*r;
+ return {img:"line",x1:cx,y1:cy,x2:x,y2:y}
+ })
+ this.siteImage = this.lines.map((item)=>{
+ return {img:"site",x:item.x2 - 25,y:item.y2 - 25}
+ })
+ console.log(this.siteImage,this.lines)
+ }
+ clickShow = false;
+ hoverShow = false;
+ toggleClick(){
+ this.clickShow = !this.clickShow;
+ }
+ hoverShowcould(){
+ this.hoverShow = true;
+ }
+ hoverHidecould(){
+ this.hoverShow = false;
+ }
+
+
+
+ goback(){
+ this.closeDetail.emit();
+ }
+
+}
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
new file mode 100644
index 00000000..2ac88d32
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
@@ -0,0 +1,97 @@
+/*
+ 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.
+*/
+.outer{
+ width: 20%;
+ float: left;
+}
+.content{
+ width: 100px;
+ margin: 30px 0;
+}
+
+.tips{
+ margin: 20px auto;
+ padding:0 5px;
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
+ border: 1px gainsboro solid;
+ border-radius: 10px;
+}
+.submit,.delete,.add{
+ padding:10px 20px;
+ width: 100px;
+ margin: 0 auto;
+ background: dodgerblue;
+ border: none;
+ border-radius: 10px;
+ color: #fff;
+ cursor: pointer;
+}
+/*.line-click{*/
+ /*cursor: pointer !important;*/
+/*}*/
+
+
+#tpContainer{
+ width:100%;
+ /*height: 80%;*/
+ float: left;
+}
+.model {
+ padding: 15px;
+ height: 100%;
+ width: 100%;
+}
+.model .creation {
+ /*margin-top:-4%;*/
+ background-color: #fff;
+ /*float: left;*/
+ width: 20%;
+ position: absolute;
+ right: 1%;
+ border-radius: 5px;
+ box-shadow: 0 0 10px #9e9e9e;
+ padding: 10px;
+ height: 80vh;
+ overflow: auto;
+}
+.model .creation .v_color{
+ height: 17px;
+ float: left;
+ margin-left: -11px;
+ margin-top: 5px;
+ border-left: 4px #3fa8eb solid;
+}
+.w_font4{
+ font-weight: 400;
+}
+.title-span{
+ margin-left: 10%;
+ font-size: 12px;
+}
+.red-span{
+ color: red;
+ margin-right: 3px;
+}
+.choose li nz-select,.choose li input{
+ display: block !important;
+ margin: 5px 10% 15px;
+ width: 80%;
+}
+
+
+
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
new file mode 100644
index 00000000..4fbe4875
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
@@ -0,0 +1,135 @@
+<!--
+ 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="model">
+ <!--图表-->
+ <div class="tips">
+ 请根据以下操作,来配置您的网络
+ </div>
+ <button nz-button nzType="primary" style="margin-top: 2px;display: block" (click)="showForm()">Add Link</button>
+ <div id="tpContainer" style="overflow: hidden;"></div>
+ <!--弹出框-->
+ <div class="creation" id="d3_form" *ngIf="isVisible==true">
+ <span class="v_color"></span>
+ <h3 class="w_font4">Set Attribtes</h3>
+ <ul class="choose">
+ <li>
+ <span class="title-span"><span class="red-span">*</span>Link Name </span>
+ <input nz-input [(ngModel)]="linkName" maxlength="20">
+ </li>
+ </ul>
+ <h4>Left Port</h4>
+ <ul class="choose">
+ <li>
+ <span class="title-span"><span class="red-span">*</span>Network </span>
+ <nz-select [(ngModel)]="networkVal1" nzShowSearch nzAllowClear (ngModelChange)="network1Change($event)">
+ <nz-option *ngFor="let option of networkOption" [nzLabel]="option.network" [nzValue]="option.network"></nz-option>
+ </nz-select>
+ </li>
+ <li>
+ <span class="title-span"> <span class="red-span">*</span>Node </span>
+ <nz-select [(ngModel)]="selectedNode1" nzShowSearch nzAllowClear (ngModelChange)="node1Change($event)">
+ <nz-option *ngFor="let node of nodeOption1[networkVal1]" [nzValue]="node" [nzLabel]="node"></nz-option>
+ </nz-select>
+ </li>
+ <li>
+ <span class="title-span"><span class="red-span">*</span>Terminal Point </span>
+ <!-- <input nz-input id="city-one" value=""> -->
+ <nz-select [(ngModel)]="selecteTpName1" nzShowSearch nzAllowClear>
+ <nz-option *ngFor="let tp of tpOption1" [nzValue]="tp" [nzLabel]="tp"></nz-option>
+ </nz-select>
+ </li>
+ </ul>
+ <h4>Right Port</h4>
+ <label nz-checkbox [(ngModel)]="inputshow">Partner Network</label>
+ <ul class="choose">
+ <li>
+ <span class="title-span"><span *ngIf="inputshow" class="red-span">*</span>Host Url</span>
+ <input nz-input [(ngModel)]="cloudUrl" [disabled]='!inputshow' [attr.disabled] ='!inputshow?true:undefined'>
+ </li>
+ <li>
+ <span class="title-span"><span class="red-span">*</span>Network </span>
+ <input nz-input *ngIf="inputshow" [(ngModel)]="cloudNetwork">
+ <nz-select *ngIf="!inputshow" [(ngModel)]="networkVal2" nzShowSearch nzAllowClear (ngModelChange)="network2Change($event)">
+ <nz-option *ngFor="let option of networkOption" [nzLabel]="option.network" [nzValue]="option.network"> </nz-option>
+ </nz-select>
+ </li>
+ <li>
+ <span class="title-span"><span class="red-span">*</span>Node </span>
+ <input nz-input *ngIf="inputshow" [(ngModel)]="cloudNode">
+ <nz-select *ngIf="!inputshow" [(ngModel)]="selectedNode2" nzShowSearch nzAllowClear (ngModelChange)="node2Change($event)">
+ <nz-option *ngFor="let node of nodeOption1[networkVal2]" [nzValue]="node" [nzLabel]="node"></nz-option>
+ </nz-select>
+ </li>
+ <li>
+ <span class="title-span"><span class="red-span">*</span>Terminal Point </span>
+ <input nz-input *ngIf="inputshow" [(ngModel)]="cloudTp">
+ <nz-select *ngIf="!inputshow" [(ngModel)]="selecteTpName2" nzShowSearch nzAllowClear>
+ <nz-option *ngFor="let tp of tpOption2" [nzValue]="tp" [nzLabel]="tp"></nz-option>
+ </nz-select>
+ </li>
+ </ul>
+ <button nz-button nzType="primary" nzSize="small" style="width: 60px;" (click)="submitForm()">OK</button>
+ <button nz-button nzType="default" nzSize="small" style="width: 60px;" (click)="hideForm()">Cancel</button>
+ </div>
+ <div class="creation" id="delbox" *ngIf="delBoxisVisible==true">
+ <span class="v_color"></span>
+ <h3 class="w_font4">Set Attribtes</h3>
+ <ul class="choose">
+ <li>
+ <span class="title-span">Link Name </span>
+ <input nz-input [(ngModel)]="delLinkname" disabled="disabled">
+ </li>
+ </ul>
+ <h4>Left Port</h4>
+ <ul class="choose">
+ <li>
+ <span class="title-span">Network </span>
+ <input nz-input [(ngModel)]="delNetwork1" disabled="disabled">
+ </li>
+ <li>
+ <span class="title-span">Node </span>
+ <input nz-input [(ngModel)]="delNode1" disabled="disabled">
+ </li>
+ <li>
+ <span class="title-span">Terminal Point </span>
+ <input nz-input [(ngModel)]="delTp1" disabled="disabled">
+ </li>
+ </ul>
+ <h4>Right Port</h4>
+ <ul class="choose">
+ <li *ngIf="delcloud">
+ <span class="title-span">Host Url</span>
+ <input nz-input [(ngModel)]="delcloudUrl" disabled="disabled">
+ </li>
+ <li>
+ <span class="title-span">Network </span>
+ <input nz-input [(ngModel)]="delNetwork2" disabled="disabled">
+ </li>
+ <li>
+ <span class="title-span">Node </span>
+ <input nz-input [(ngModel)]="delNode2" disabled="disabled">
+ </li>
+ <li>
+ <span class="title-span">Terminal Point </span>
+ <input nz-input [(ngModel)]="delTp2" disabled="disabled">
+ </li>
+ </ul>
+ <button nz-button nzType="primary" nzSize="small" class="del-button" style="width: 90px;" (click)="delLink()" *ngIf="!delcloud">delete Link</button>
+ <button nz-button nzType="primary" nzSize="small" class="del-button" style="width: 90px;" (click)="delCloudLink()" *ngIf="delcloud">delete Link</button>
+ <button nz-button nzType="default" nzSize="small" class="del-button" style="width: 60px;" (click)="hideForm()">Cancel</button>
+ </div>
+</div>
+
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts
new file mode 100644
index 00000000..03cc5065
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+ 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.
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CcvpnNetworkComponent } from './ccvpn-network.component';
+
+describe('CcvpnNetworkComponent', () => {
+ let component: CcvpnNetworkComponent;
+ let fixture: ComponentFixture<CcvpnNetworkComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ CcvpnNetworkComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CcvpnNetworkComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
new file mode 100644
index 00000000..0174aa77
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
@@ -0,0 +1,1195 @@
+/*
+ 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.
+*/
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import * as d3 from 'd3';
+import * as $ from 'jquery';
+import {networkHttpservice} from '../networkHttpservice.service';
+
+@Component({
+ selector: 'app-ccvpn-network',
+ templateUrl: './ccvpn-network.component.html',
+ styleUrls: ['./ccvpn-network.component.css']
+})
+export class CcvpnNetworkComponent implements OnInit {
+
+ constructor(private myhttp: networkHttpservice) {
+ }
+
+ ngOnInit() {
+ var thisNg = this;
+ thisNg.getD3Data();
+
+
+ //本地云TP端口断开连线 ,直接点击线可删除连线
+ $('#tpContainer').on('click', '.line-local', function () {
+ thisNg.isVisible = false;
+ thisNg.delBoxisVisible = true;
+ thisNg.delcloud = false;
+
+ thisNg.delTp1 = $(this).attr('data-tp1');
+ thisNg.delTp2 = $(this).attr('data-tp2');
+ thisNg.delNode1 = $(this).attr('data-node1');
+ thisNg.delNode2 = $(this).attr('data-node2');
+ thisNg.delVersion = $(this).attr('data-version');
+ thisNg.delLinkname = $(this).attr('data-link');
+
+ thisNg.delLinkIndex = $(this);
+ let dataD3 = thisNg.d3Data;
+ for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network
+ if (dataD3[p]['name'] == thisNg.delTp1) {
+ thisNg.network.push(dataD3[p]['source']['name']);
+ }
+ if (dataD3[p]['name'] == thisNg.delTp2) {
+ thisNg.network.push(dataD3[p]['source']['name']);
+ }
+ }
+ thisNg.delNetwork1 = thisNg.network[0];
+ thisNg.delNetwork2 = thisNg.network[1];
+ });
+
+ //外部云 断开连线 ,直接点击线可删除连线
+ $('#tpContainer').on('click', '.cloudline', function () {
+ thisNg.isVisible = false;
+ thisNg.delBoxisVisible = true;
+ thisNg.delcloud = true;
+
+ thisNg.delTp1 = $(this).attr('data-tp1');
+ thisNg.delTp2 = $(this).attr('data-tp2');
+ thisNg.delNode1 = $(this).attr('data-node1');
+ thisNg.delNode2 = $(this).attr('data-node2');
+ thisNg.delVersion = $(this).attr('data-version');
+ thisNg.delNetwork1 = $(this).attr('data-network');
+ thisNg.delNetwork2 =$(this).attr('data-cloudnetwork');
+ thisNg.delcloudUrl =$(this).attr('data-url');
+ thisNg.delLinkname = $(this).attr('data-link');
+ thisNg.aaiId =$(this).attr('data-aaiid');
+ thisNg.getCloudUrl(thisNg.aaiId,thisNg);
+ });
+ }
+
+ addLinkDisabled = true;
+ isVisible = false;
+ outCloudShow = false;
+ inputshow = false;
+ delBoxisVisible = false;
+
+ d3Data = [];//D3渲染需要的数据
+ logicalLinks = [];//logicalLinks接口返回的已有的连线数据
+ linkName=null;//连线的名字link-name
+ networkOption = [];//表单network下拉选框填充的数据
+ nodeOption1 = {};//node下拉选框填充的数据
+ tpOption1 = [];//node下拉选框填充的数据
+ tpOption2 = [];//node下拉选框填充的数据
+ networkVal1 = null;//network1下拉框默认数据
+ networkVal2 = null;//network2下拉框默认数据
+ selectedNode1 = null;//node1下拉框默认数据
+ selectedNode2 = null;//node2下拉框默认数据
+ selecteTpName1 = null;//TP1下拉框默认数据
+ selecteTpName2 = null;//TP2下拉框默认数据
+ cloudUrl = null;//外部云URL地址
+ cloudNetwork = null;//外部云network名称
+ cloudNode = null;//外部云Node名称
+ cloudTp = null;//外部云Tp名称
+ dataCloud=[];//外部云的信息
+ dataCloudLink=[];
+ aaiId="";
+ charge=-200;
+
+ //删除连线时 右侧框显示的数据
+ delLinkname=null;
+ delNetwork1 = null;
+ delNode1 = null;
+ delTp1 = null;
+ delcloudUrl = null;
+ delNetwork2 = null;
+ delNode2 = null;
+ delTp2 = null;
+ delVersion = null;
+ delLinkIndex = null;
+ network = [];
+ delcloud = false;
+
+ winWidth = $('.content').width();
+ winHeight = $('.content').height();
+
+
+ imgmap = {
+ '1': '../assets/images/cloud-county1.png',
+ '2': '../assets/images/cloud-city1.png',
+ '3': '../assets/images/cloud-out.png',
+ };
+ tpoption = {
+ container: '#tpContainer',
+ data: '',
+ width: 1000,
+ height: this.winHeight
+ };
+
+ showForm(): void {
+ if (this.addLinkDisabled == false) {
+ this.isVisible = true;
+ this.delBoxisVisible = false;
+ }
+ }
+
+ hideForm(): void {
+ this.isVisible = false;
+ this.delBoxisVisible = false;
+ this.linkName=null;
+ this.networkVal1 = null;//初始化network1下拉框默认数据
+ this.networkVal2 = null;//初始化network2下拉框默认数据
+ this.selectedNode1 = null;//初始化node1下拉框默认数据
+ this.selectedNode2 = null;//初始化node2下拉框默认数据
+ this.selecteTpName1 = null;//初始化TP1下拉框默认数据
+ this.selecteTpName2 = null;//初始化TP2下拉框默认数据
+ // this.localUrl=null;//本地云URL地址
+ this.cloudUrl = null;//外部云URL地址
+ this.cloudNetwork = null;//外部云network名称
+ this.cloudNode = null;//外部云Node名称
+ this.cloudTp = null;//外部云Tp名称
+ }
+
+
+ tpName=null;
+ tpNameStyle = {
+ 'display':'none',
+ 'left':'0',
+ 'top':'0'
+ };
+ showtp($event,item){
+ console.log(111111111)
+ this.tpName = item;
+ this.tpNameStyle.display = 'block';
+ }
+ movetp($event,item){
+ this.tpNameStyle.left = $event.clientX + "px";
+ this.tpNameStyle.top = $event.clientY - 35 + "px";
+ }
+ hidetp($event){
+ this.tpNameStyle.display = 'none';
+ }
+
+ //获取云图数据
+ getD3Data() {
+ this.myhttp.getNetworkD3Data()
+ .subscribe((data) => {
+ if(data.length==0){
+ this.addLinkDisabled = false;
+ return;
+ };
+ for(let ii=0;ii<data.length;ii++){
+ if(data[ii]["aaiId"]!=""){
+ this.dataCloud=data.splice(ii,1)
+ }
+ }
+ for (var i = 0; i < data.length; i++) {
+ let name1 = {}, name2 = {};
+ let nodess = [];
+ name1['name'] = name2['network'] = data[i]['networkId'];
+ name1['type'] = '1';
+ name1['source'] = i;
+ this.d3Data.push(name1);
+ for (let c = 0; c < data[i]["pnfs"].length; c++) {
+ nodess.push(data[i]['pnfs'][c]['pnfName']);
+ this.nodeOption1[name2['network']] = nodess;
+ }
+ this.networkOption.push(name2);
+ }
+ console.log(this.networkOption)
+ for (var i = 0; i < data.length; i++) {
+ let tp_length = data[i]['tps'].length;
+ for (var h = 0; h < tp_length; h++) {
+ let name2 = {};
+ let interface_name = data[i]['tps'][h]['interface-name'];
+ name2['name'] = interface_name;
+ name2['type'] = '2';
+ name2['source'] = i;
+ this.d3Data.push(name2);
+ }
+ }
+ for (let b = 0; b < this.d3Data.length; b++) {
+ this.d3Data[b]['target'] = b;
+ }
+ this.initPosition(this.d3Data);
+ setTimeout(this.render(this.d3Data, this.imgmap,this.dataCloud,this.charge,data),0)
+ }, (err) => {
+ console.log(err);
+ });
+
+ }
+
+ //获取云图初始的连线状态 getlogicalLinksData
+ getLinksData() {
+ this.myhttp.getLogicalLinksData()
+ .subscribe((data) => {
+ console.log(data["status"])
+ if (data["status"]=="FAILED") {
+ return;
+ }
+ for (let i = 0; i < data["logical-link"].length; i++) {
+ if(data["logical-link"][i]["relationship-list"]["relationship"].length>2){
+ this.dataCloudLink=data["logical-link"].splice(i,1);
+ }
+ }
+ console.log(this.dataCloudLink)
+ for (let i = 0; i < data["logical-link"].length; i++) {
+ let textval = [];
+ textval[0] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
+ textval[1] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
+ textval[2] = data['logical-link'][i]['resource-version'];//version
+ textval[3] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
+ textval[4] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
+ textval[5] = data['logical-link'][i]['operational-status'];
+ textval[6] = data['logical-link'][i]['link-name'];
+ this.logicalLinks.push(textval);
+ this.chose(textval);
+ }
+ if(this.dataCloudLink.length>0){
+ this.getcloudLine(this.dataCloudLink)
+ }
+ }, (err) => {
+ console.log(err);
+ });
+ }
+
+ //D3云图渲染
+ render(nodes, imgmap,dataCloud,charge,dataD3) {
+ var thiss = this;
+ var _this = this.tpoption,
+ width = null,
+ height = _this.height;
+ if (_this.width > 800) {
+ width = _this.width;
+ } else {
+ width = 800;
+ }
+
+ var str="";
+ for(var i=0;i<10;i++){
+ str+="<div>这是div"+i+"</div>"
+ }
+
+ if(dataD3.length<=4){
+ charge=-850;
+ }else if(dataD3.length>4 && dataD3.length<=6) {
+ charge=-700;
+ }else if(dataD3.length>6 && dataD3.length<=10) {
+ charge=-600;
+ }else {
+ charge=-150;
+ }
+ var svg = d3.select(_this.container).append('svg')
+ .attr('width', width)
+ .attr('height', height)
+ .attr('id', 'content-svg')
+ .style('pointer-events', 'all'),
+ graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'),
+
+ _g_nodes = graph.selectAll('g.node')
+ .data(nodes)
+ .enter()
+ .append('g')
+ .style('display', function (d) {
+ var display = 'block';
+ switch (d.type) {
+ case '1':
+ display = 'none';
+ break;
+ case '2':
+ display = 'none';
+ break;
+ default:
+ break;
+ }
+ return display;
+ })
+ .style('cursor', 'pointer')
+ .attr('class', 'node'),
+
+ _g_lines = graph.selectAll('line.line')
+ .data(nodes)
+ .enter()
+ .append('g')
+ .style('display', 'none')
+ .attr('class', 'line');
+
+
+ _g_lines.append('line')
+ .style('stroke', '#93c62d'
+ )
+ .style('stroke-width', 2);
+
+ _g_nodes.append('image')
+ .attr('width', function (d) {
+ var width = 40;
+ switch (d.type) {
+ case '1':
+ width = 4.4 * width;
+ break;
+ case '2':
+ width = 0.12 * width;
+ break;
+ default:
+ break;
+ }
+ return width;
+ })
+ .attr('height', function (d) {
+ var height = 20;
+ switch (d.type) {
+ case '1':
+ height = 3.5 * height;
+ break;
+ case '2':
+ height = 0.2 * height;
+ break;
+ default:
+ break;
+ }
+ return height;
+ })
+ .attr('xlink:href', function (d) {
+ return imgmap[d.type];
+ });
+
+ _g_nodes.append('text')
+ .text(function (d) {
+ return d.name;
+ })
+ .style('transform', function (d) {
+ var x = null;
+ var y = null;
+ switch (d.type) {
+ case '1':
+ x = 7;
+ y = -7;
+ break;
+ case '2':
+ x = 1;
+ y = -2;
+ break;
+ default:
+ break;
+ }
+ return 'translate(' + x + '%,' + y + '%)';
+ })
+ .style('font-size', function (d) {
+ var size = 14;
+ switch (d.type) {
+ case '1':
+ size = 14;
+ break;
+ case '2':
+ size = 12;
+ break;
+ default:
+ break;
+ }
+ return size;
+ })
+ .style('fill', function (d) {
+ var color = '#666';
+ switch (d.type) {
+ case '1':
+ color = '#666';
+ break;
+ case '2':
+ color = '#666';
+ break;
+ default:
+ break;
+ }
+ return color;
+ })
+ .style('font-weight', '500');
+
+
+ //线上添加自定义属性
+ _g_lines.each(function (d, i) {
+ var _this = d3.select(this);
+ if (d.name) {
+ _this.attr('data-text', d.name);
+ }
+ });
+ var force = d3.layout.force()
+ .size([1000,this.winHeight])
+ .linkDistance(5)
+ // .theta(0)
+ .charge(charge)
+ .nodes(nodes)
+ .links(nodes)
+ .start();
+ // let distanceMax2=1;
+ // force.distanceMax = function(_) {
+ // return arguments.length ? (distanceMax2 = _ * _, force) : Math.sqrt(distanceMax2);
+ // };
+ //添加拖拽行为
+ // _g_nodes.call(this.getDragBehavior(force));
+
+
+ force.on('tick', function (d) {
+ nodes.forEach(function(d,i){
+
+ d.x = d.x - 25 < 0 ? 25 : d.x ;
+ d.x = d.x + 25 > width ? width - 25 : d.x ;
+ d.y = d.y - 15 < 0 ? 15 : d.y ;
+ d.y = d.y + 15> height ? height - 15 : d.y ;
+ });
+ if(force.alpha()<=0.1){
+
+
+ _g_nodes.style('display', function (d) {
+
+
+ var display = 'block';
+ switch (d.type) {
+ case '1':
+ display = 'block';
+ break;
+ case '2':
+ display = 'none';
+ break;
+ default:
+ break;
+ }
+ return display;
+ });
+
+ _g_lines.select('line')
+ .attr('x1', function (d) {
+ return d.source.x;
+ })
+ .attr('y1', function (d) {
+ return d.source.y;
+ })
+ .attr('x2', function (d) {
+ return d.target.x;
+ })
+ .attr('y2', function (d) {
+ return d.target.y;
+ });
+
+ _g_nodes.attr('transform', function (d) {
+ // console.log(d)
+ // if(d["type"]==1){
+ // d["x"]=400;
+ // d["y"]=400;
+ // }else {
+ // d["x"]=d["x"];
+ // d["y"]=d["y"]
+ // }
+ var image = d3.select(this).select('image')[0][0],
+ halfWidth = parseFloat(image.attributes[0]['value']) / 2,
+ halfHeight = parseFloat(image.attributes[1]['value']) / 2;
+
+
+ return 'translate(' + (d.x - halfWidth) + ',' + (d.y - halfHeight) + ')';
+ });
+
+ _g_nodes.select('text').attr('dy', function (d) {
+ var image = this.previousSibling,
+ height = parseFloat(image.attributes[1]['value']),
+ fontSize = 12;
+ return height + 1.5 * fontSize;
+ });
+
+
+ }
+
+ });
+
+ force.on('end', function () {
+
+ force.stop();
+ if(dataCloud.length>0){
+ thiss.getoutCloud(dataCloud,imgmap);
+ }
+ thiss.getLinksData();
+ thiss.addLinkDisabled = false;
+ });
+
+ };
+
+ //拓扑图拖拽效果
+ getDragBehavior(force) {
+
+ return d3.behavior.drag()
+ .origin(function (d) {
+ return d;
+ })
+ .on('dragstart', dragstart)
+ .on('drag', dragging)
+ .on('dragend', dragend);
+
+ function dragstart(d) {
+ d3.event.sourceEvent.stopPropagation();
+ d3.select(this).classed('dragging', true);
+ force.start();
+ }
+
+ function dragging(d) {
+ d.x = d3.event.x;
+ d.y = d3.event.y;
+ }
+
+ function dragend(d) {
+ d3.select(this).classed('dragging', false);
+ }
+
+ }
+
+ //初始化节点位置
+ initPosition(datas) {
+ let origin = [this.tpoption.width / 2, this.tpoption.height / 2];
+ let points = this.getVertices(origin, Math.min(this.tpoption.width/2, this.tpoption.height/2), datas.length);
+ datas.forEach((item, i) => {
+ item.x = points[i].x;
+ item.y = points[i].y;
+ });
+ }
+
+ //根据多边形获取定位点
+ getVertices(origin, r, n) {
+ if (typeof n !== 'number') return;
+ var ox = origin[0];
+ var oy = origin[1];
+ var angle = 30 * n / n;
+ var i = 0;
+ var points = [];
+ var tempAngle = 0;
+ while (i < n) {
+ tempAngle = (i * angle * Math.PI) / 180;
+ points.push({
+ x: ox - r * Math.sin(tempAngle),
+ y: oy - r * Math.cos(tempAngle),
+ });
+ i++;
+ }
+ return points;
+ }
+
+ //渲染外部云
+ getoutCloud(dataCloud,imgmap) {
+ var _this = this,
+ width;
+ let networkId=dataCloud[0]["networkId"];
+ if (_this.tpoption.width > 800) {
+ width = _this.tpoption.width;
+ } else {
+ width = 800;
+ }
+ var svg = d3.select('#content-svg');
+ svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
+ var out = d3.select('#out');
+ out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
+ out.append('text').text(networkId)
+ .style('transform', 'translate(0,0)')
+ .style('font-size', '16')
+ .style('font-weight', '400')
+ .attr('dx', '40')
+ .attr('dy', '70')
+ .style('fill', '#666');
+ }
+
+ //外部云连接
+ getcloudLine(dataCloudLink) {
+ let textval = [];
+ textval[0] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
+ textval[1] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
+ textval[2] = dataCloudLink[0]['resource-version'];//version
+ textval[3] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
+ textval[4] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
+ textval[5] = dataCloudLink[0]['operational-status'];//status
+ textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId
+ textval[7] =this.dataCloud[0]["networkId"];
+ console.log(this.dataCloud);
+ let dataD3=this.d3Data;
+ for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network
+ if (dataD3[p]['name'] == textval[0]) {
+ textval[8] =dataD3[p]['source']['name'];//network1
+ }
+ }
+ textval[9] =dataCloudLink[0]["link-name"];
+
+ let lines_json = {};
+ var _this = this,
+ width;
+ if (_this.tpoption.width > 800) {
+ width = _this.tpoption.width;
+ } else {
+ width = 800;
+ }
+ for (let i = 0; i < $(".node").length; i++) {
+ if ($('.node').eq(i).find('text').html() == textval[0]) {
+ //获取二级的x,y坐标
+ $('.node').eq(i).show();
+ var translates = $('.node').eq(i).css('transform');
+ lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+ lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+ lines_json['x2'] = width - 100;
+ lines_json['y2'] = 100;
+ }
+ }
+ var x1 = lines_json['x1'];
+ var y1 = lines_json['y1'];
+ var x2 = lines_json['x2'];
+ var y2 = lines_json['y2'];
+ var color='#14bb58';
+ if(textval[5]=="up"){
+ color='#14bb58';
+ }else {
+ color='red';
+ }
+ var line = "<line class='line cloudline ' stroke='"+color+"' stroke-width='2' style='cursor:pointer'></line>";
+ var svg = d3.select('#graph');
+ $(".cloudline").remove();
+ $('#graph').prepend(line);
+ $('.cloudline').attr({
+ x1: x1 + 100,
+ y1: y1 + 10,
+ x2: x2,
+ y2: y2,
+ 'data-tp1': textval[0],
+ 'data-tp2': textval[1],
+ 'data-version': textval[2],
+ 'data-node1':textval[3],
+ 'data-node2':textval[4],
+ 'data-network':textval[8],
+ 'data-cloudnetwork':textval[7],
+ 'data-url':"",
+ 'data-aaiid':textval[6],
+ "data-link":textval[9]
+ });
+ svg.html(svg.html());
+ }
+
+ //查询外部云host url地址
+ getCloudUrl(aaiId,thisNg){
+ this.myhttp.queryCloudUrl(aaiId)
+ .subscribe((data) => {
+ thisNg.delcloudUrl=data["service-url"];
+ }, (err) => {
+ console.log(err);
+ });
+ }
+
+
+ //右侧表单下拉选框数据填充 三级联动
+ //Left Port
+ network1Change(value: string): void {
+ this.selectedNode1 = this.nodeOption1[value][0];
+ this.getPInterfaces1();
+ }
+
+ node1Change(): void {
+ this.getPInterfaces1();
+ }
+
+ //获取指定node下的TP数据
+ getPInterfaces1() {
+ let params = {
+ pnfName: this.selectedNode1,
+ };
+ this.myhttp.getPInterfacesData1(params)
+ .subscribe((data) => {
+ this.tpOption1 = [];
+ for (let i = 0; i < data.length; i++) {
+ let tpName = data[i]['interface-name'];
+ this.tpOption1.push(tpName);
+ }
+ this.selecteTpName1 = this.tpOption1[0];
+ }, (err) => {
+ // console.log(err);
+ });
+ }
+
+ //Right Port
+ network2Change(value: string): void {
+ this.selectedNode2 = this.nodeOption1[value][0];
+ this.getPInterfaces2();
+ }
+
+ node2Change(): void {
+ this.getPInterfaces2();
+ }
+
+ //获取指定node下的TP数据
+ getPInterfaces2() {
+ let params = {
+ pnfName: this.selectedNode2,
+ };
+ this.myhttp.getPInterfacesData2(params)
+ .subscribe((data) => {
+ this.tpOption2 = [];
+ for (let i = 0; i < data.length; i++) {
+ let tpName = data[i]['interface-name'];
+ this.tpOption2.push(tpName);
+ }
+ this.selecteTpName2 = this.tpOption2[0];
+ }, (err) => {
+ // console.log(err);
+ });
+ }
+
+ //提交表单,连线
+ submitForm(): void {
+ //当页面ONAP未选中,即本地云端TP连线
+ var _thiss = this;
+ if (this.inputshow == false) {
+ if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.networkVal2 == null || this.selectedNode2 == null || this.selecteTpName2 == null) {
+ alert('服务端口不能为空,请选择端口信息');
+ return;
+ } else if (this.networkVal1 == this.networkVal2) {
+ alert('同一云服务下的TP端口不能相连!');
+ return;
+ }
+ let tp_links = [],
+ tp1 = this.selecteTpName1,
+ tp2 = this.selecteTpName2;
+ for (let i = 0; i < $(".line-local").length; i++) {
+ let data_text1 = $('.line-local').eq(i).attr('data-tp1');
+ let data_text2 = $('.line-local').eq(i).attr('data-tp2');
+ tp_links.push(data_text1);
+ tp_links.push(data_text2);
+ }
+ if (tp_links.indexOf(tp1) != -1 || tp_links.indexOf(tp2) != -1) {
+ alert('此端口号连线已存在!');
+ return;
+ }
+ this.createTpLinks();
+
+ } else {
+ //当页面ONAP选中,即创建外部云,连线
+ if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.cloudUrl == null || this.cloudNetwork == null || this.cloudNode == null || this.cloudTp == null) {
+ alert('服务端口信息不能为空,请填写完整的端口信息');
+ return;
+ }
+ let tp_links = [],
+ tp1 = this.selecteTpName1;
+ for (let i = 0; i < $(".line-local").length; i++) {
+ let data_text1 = $('.line-local').eq(i).attr('data-tp1');
+ tp_links.push(data_text1);
+ }
+ if (tp_links.indexOf(tp1) != -1) {
+ alert('此端口号连线已存在!');
+ return;
+ }
+ Promise
+ .all([this.createCloudNetwork(), this.createPnfs(), this.createCloudTp(), this.createCloudLinks()])
+ .then(function (results) {
+ console.log(results);
+ if (results.indexOf('FAIL') == -1) {
+ // _thiss.queryOutCloudLink();
+ _thiss.outCloudShow = true;
+ _thiss.outCloud(_thiss.imgmap);
+ setTimeout(_thiss.cloudLine(_thiss.networkVal1, _thiss.selectedNode1, _thiss.selecteTpName1, _thiss.cloudUrl, _thiss.cloudNetwork, _thiss.cloudNode, _thiss.cloudTp, 121211,"up",_thiss.linkName), 0);
+ _thiss.hideForm();
+ } else {
+ console.log('失败');
+ }
+ });
+
+ }
+ }
+
+ //创建tp连线 调用接口createLink
+ createTpLinks() {
+ let params = {
+ 'link-name': this.linkName,
+ 'in-maint': false,
+ 'link-type': 'cross-link',
+ 'speed-value': '10000',
+ 'operational-status': 'up',
+ 'relationship-list': {
+ 'relationship': [
+ {
+ 'related-to': this.selecteTpName1,
+ 'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1
+ },
+ {
+ 'related-to': this.selecteTpName2,
+ 'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2
+ }
+ ]
+ }
+ };
+ this.myhttp.createLink(params)
+ .subscribe((data) => {
+ if (data["status"] == 'SUCCESS') {
+ this.queryAddLink();
+ }
+ }, (err) => {
+ // console.log(err);
+ alert('系统忙,连接失败!');
+ });
+ }
+
+ //创建tp连接线后马上查询新增的连线
+ queryAddLink() {
+ let linkName=this.linkName,
+ selecteTpName1 = this.selecteTpName1,
+ selecteTpName2 = this.selecteTpName2,
+ selectedNode1 = this.selectedNode1,
+ selectedNode2 = this.selectedNode2;
+ let params = {
+ 'link-name': selecteTpName1 + '_' + selecteTpName2,
+ };
+ this.myhttp.querySpecificLinkInfo(params)
+ .subscribe((data) => {
+ let version = data['resource-version'],
+ operational_status = data['operational-status'];
+ let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status,linkName];
+ this.hideForm();
+ this.chose(textval);
+ }, (err) => {
+ // console.log(err);
+ alert('系统忙,连接失败!');
+ });
+ }
+
+ //两个TP之间的连线 坐标获取
+ chose(textval) {
+ var lines_json = {};
+ lines_json['tp1'] = textval[0];
+ lines_json['tp2'] = textval[1];
+ lines_json['version'] = textval[2];
+ lines_json['node1'] = textval[3];
+ lines_json['node2'] = textval[4];
+ lines_json['status'] = textval[5];
+ lines_json['linkname'] = textval[6];
+ for (let i = 0; i < $(".node").length; i++) {
+ if ($('.node').eq(i).find('text').html() == textval[0]) {
+ $('.node').eq(i).show();
+ //获取二级的x,y坐标
+ var translates = $('.node').eq(i).css('transform');
+ lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+ lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+ }
+ if ($('.node').eq(i).find('text').html() == textval[1]) {
+ $('.node').eq(i).show();
+ var translates = $('.node').eq(i).css('transform');
+ lines_json['x2'] = parseFloat(translates.substring(7).split(',')[4]);
+ lines_json['y2'] = parseFloat(translates.substring(7).split(',')[5]);
+ }
+ }
+
+ this.addLine(lines_json);
+ }
+
+ //两个TP之间的连线 连线渲染
+ addLine(lines) {
+ let tp1 = lines.tp1;
+ let tp2 = lines.tp2;
+ let version = lines.version;
+ let node1 = lines.node1;
+ let node2 = lines.node2;
+ let status = lines.status;
+ let linkname = lines.linkname;
+ let x1 = lines.x1;
+ let y1 = lines.y1 + 5;
+ let x2 = lines.x2;
+ let y2 = lines.y2 + 5;
+ let color = '#14bb58';
+ if (status == 'up') {
+ color = '#14bb58';
+ } else {
+ color = 'red';
+ }
+ let line = '<line class=\'line line-local \' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
+ let svg = d3.select('#graph');
+ $('#graph').prepend(line);
+ $('.line').first().attr({
+ x1: x1,
+ y1: y1,
+ x2: x2,
+ y2: y2,
+ 'data-tp1': tp1,
+ 'data-tp2': tp2,
+ 'data-version': version,
+ 'data-node1': node1,
+ 'data-node2': node2,
+ "data-link":linkname
+ });
+ svg.html(svg.html());
+ }
+
+ //创建外部云连线后,马上查询连线
+ queryOutCloudLink() {
+ let networkVal1 = this.networkVal1,
+ selectedNode1 = this.selectedNode1,
+ selecteTpName1 = this.selecteTpName1,
+ cloudUrl = this.cloudUrl,
+ cloudNetWork = this.cloudNetwork,
+ cloudNode = this.cloudNode,
+ cloudTp = this.cloudTp,
+ linkname=this.linkName;
+ let params = {
+ 'link-name': linkname,
+ };
+ this.myhttp.querySpecificLinkInfo(params)
+ .subscribe((data) => {
+ let version = data['resource-version'];
+ let status = data['operational-status'];
+ let link_name = data['link-name'];
+ this.outCloudShow = true;
+ this.outCloud(this.imgmap);
+ setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version,status,link_name), 0);
+ }, (err) => {
+ // console.log(err);
+ alert('系统忙,连接失败!');
+ });
+ }
+
+ //新增外部云
+ outCloud(imgmap) {
+ var _this = this,
+ width;
+ if (_this.tpoption.width > 800) {
+ width = _this.tpoption.width;
+ } else {
+ width = 800;
+ }
+ var svg = d3.select('#content-svg');
+ svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
+ var out = d3.select('#out');
+ out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
+ out.append('text').text('Partner Network')
+ .style('transform', 'translate(0,0)')
+ .style('font-size', '16')
+ .style('font-weight', 'bold')
+ .attr('dx', '40')
+ .attr('dy', '70')
+ .style('fill', '#fff');
+ }
+
+ //新增 外部云连接
+ cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version,status,link_name) {
+ let lines_json = {};
+ var _this = this,
+ width;
+ if (_this.tpoption.width > 800) {
+ width = _this.tpoption.width;
+ } else {
+ width = 800;
+ }
+ for (let i = 0; i < $(".node").length; i++) {
+ if ($('.node').eq(i).find('text').html() == networkVal1) {
+ //获取二级的x,y坐标
+ var translates = $('.node').eq(i).css('transform');
+ lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+ lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+ lines_json['x2'] = width - 100;
+ lines_json['y2'] = 100;
+ }
+ }
+ var x1 = lines_json['x1'];
+ var y1 = lines_json['y1'];
+ var x2 = lines_json['x2'];
+ var y2 = lines_json['y2'];
+ var color='#14bb58';
+ if(status=="up"){
+ color='#14bb58';
+ }else {
+ color='red';
+ }
+ var line = "<line class='line cloudline ' stroke='"+color+"' stroke-width='2' style='cursor:pointer'></line>";
+ var svg = d3.select('#graph');
+ $(".cloudline").remove();
+ $('#graph').prepend(line);
+ $('.cloudline').attr({
+ x1: x1 + 100,
+ y1: y1 + 10,
+ x2: x2,
+ y2: y2,
+ 'data-tp1': selecteTpName1,
+ 'data-tp2': cloudTp,
+ 'data-version': version,
+ 'data-node1':selectedNode1,
+ 'data-node2':cloudNode,
+ 'data-network':networkVal1,
+ 'data-cloudnetwork':cloudNetWork,
+ 'data-url':cloudUrl,
+ "data-link":link_name
+ });
+ svg.html(svg.html());
+ }
+
+ //创建外部云,连线时调用以下4个接口:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks
+ createCloudNetwork() {
+ let _thiss = this;
+ let params = {
+ 'selflink': this.cloudUrl,
+ 'network-id': this.cloudNetwork,
+ 'provider-id': '',
+ 'client-id': '',
+ 'te-topo-id': ''
+ };
+ var pro = new Promise(function (resolve, reject) {
+ //做一些异步操作
+ _thiss.myhttp.createNetwrok(params)
+ .subscribe((data) => {
+ resolve(data["status"]);
+ }, (err) => {
+ console.log(err);
+ });
+ });
+ return pro;
+ }
+
+ createPnfs() {
+ let _thiss = this;
+ let params= {
+ "pnf-name": this.cloudNode,
+ "pnf-id": "",
+ "in-maint": "",
+ "admin-status": "up",
+ "operational-status": "up",
+ "relationship-list": {
+ "relationship": {
+ "related-to": "network-resource",
+ "relationship-label": "tosca.relationships.network.LinksTo",
+ "related-link": "/aai/v13/network/network-resources/network-resource/"+this.cloudNetwork,
+ "relationship-data": {
+ "relationship-key": "network-resource.network-id",
+ "relationship-value": this.cloudNetwork
+ }
+ }
+ }
+ };
+ var pro = new Promise(function (resolve, reject) {
+ //做一些异步操作
+ _thiss.myhttp.createNetwrok(params)
+ .subscribe((data) => {
+ resolve(data["status"]);
+ }, (err) => {
+ console.log(err);
+ });
+ });
+ return pro;
+ }
+
+ createCloudTp() {
+ let _thiss = this;
+ let params= {
+ "interface-name": this.cloudTp,
+ "speed-value": "100000",
+ "in-maint": "true",
+ "network-ref": "",
+ "transparent": "",
+ "operational-status": "up",
+ };
+ let cloudNodeName=this.cloudNode;
+
+ var pro = new Promise(function (resolve, reject) {
+ //做一些异步操作
+ _thiss.myhttp.createTp(params,cloudNodeName)
+ .subscribe((data) => {
+ resolve(data["status"]);
+ }, (err) => {
+ // console.log(err);
+ });
+ });
+ return pro;
+ }
+
+ createCloudLinks() {
+ let _thiss = this;
+ let params={
+ "link-name": this.linkName,
+ "in-maint": "",
+ "link-type": "",
+ "speed-value": "",
+ "relationship-list": {
+ "relationship" : [
+ {
+ "related-to": this.selecteTpName1,
+ "related-link": "/aai/v13/network/pnfs/pnf/"+this.selectedNode1+"/p-interfaces/p-interface/"+this.selecteTpName1
+ },
+ {
+ "related-to": this.cloudTp,
+ "related-link": "/aai/v13/network/pnfs/pnf/"+this.cloudNode+"/p-interfaces/p-interface/"+this.cloudTp
+ }
+ ]
+ }
+ };
+ var pro = new Promise(function (resolve, reject) {
+ //做一些异步操作
+ _thiss.myhttp.createCloudLink(params)
+ .subscribe((data) => {
+ resolve(data["status"]);
+ }, (err) => {
+ // console.log(err);
+ });
+ });
+ return pro;
+ }
+
+ //本地云TP端口 删除连线 调用接口deleteLink
+ delLink(): void {
+ let deltp1 = this.delTp1,
+ deltp2 = this.delTp2,
+ version = this.delVersion,
+ delLinkIndex = this.delLinkIndex;
+ let params = {
+ 'logical-link': this.delLinkname,
+ 'resource-version': version,
+ };
+ this.myhttp.deleteLink(params)
+ .subscribe((data) => {
+ if (data["status"] == 'SUCCESS') {
+ this.delLine(deltp1, deltp2);
+ console.log(delLinkIndex)
+ delLinkIndex.remove();
+ }
+ }, (err) => {
+ console.log(err);
+ });
+ }
+
+ delLine(val1, val2) {
+ for (let i = 0; i < $(".node").length; i++) {
+ if ($('.node').eq(i).find('text').html() == val1) {
+ $('.node').eq(i).hide();
+ }
+ if ($('.node').eq(i).find('text').html() == val2) {
+ $('.node').eq(i).hide();
+ }
+ }
+ this.delBoxisVisible = false;
+ }
+
+ //外部云 删除连线 调用接口deleteCloudLine
+ delCloudLink() : void {
+ let deltp1 = this.delTp1,
+ deltp2 = this.delTp2,
+ version = this.delVersion;
+ let params = {
+ 'logical-link': this.delLinkname,
+ 'resource-version': version,
+ };
+ this.myhttp.deleteLink(params)
+ .subscribe((data) => {
+ console.log(data)
+ if (data["status"] == 'SUCCESS') {
+ this.delLine(deltp1, deltp2);
+ $('.cloudline').remove();
+ }
+ }, (err) => {
+ console.log(err);
+ });
+ }
+
+}
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 @@
+<!--
+ 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.
+-->
+<p>
+ bar works!
+</p>
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
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.less
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<BarComponent>;
+
+ 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 @@
+<!--
+ 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 echarts
+[initOpts]="initOpts"
+[options]="lineOption"
+[merge]="updateOption"
+(chartInit)="chartInit($event)">
+ Line Chart
+</div>
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
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.less
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<LineComponent>;
+
+ 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 @@
+<!--
+ 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 echarts
+[initOpts]="initOpts"
+[options]="pieOption"
+[merge]="updateOption"
+(chartInit)="chartInit($event)"
+(chartMouseOver)="pieMouseOver($event)"
+(chartMouseOut)="pieMouseOut($event)">
+ Pie Chart
+</div> \ 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
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.less
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<PieComponent>;
+
+ 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 @@
+<!--
+ 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="header">
+ <h2>HEADER INFORMATION</h2>
+ <hr> <span class="tildeimg"></span>
+ <div class="headerlist">
+ <div class="leftlist">
+ <p> <span>Version :</span> </p>
+ <p> <span>Domain :</span> </p>
+ <p> <span>Event Name :</span> Fault_IMSSBC_Backup MPU is down </p>
+ <p> <span>Event Id :</span> 15105642034 </p>
+ <p> <span>EventType :</span> </p>
+ <p> <span>NfcNamingCode :</span> </p>
+ <p> <span>NfNamingCode :</span> </p>
+ <p> <span>SourceName :</span> </p>
+ <p> <span>SourceId :</span> </p>
+ <p> <span>ReportingEntityName :</span> </p>
+ <p> <span>ReportingEntityId :</span> </p>
+ </div>
+ <div class="rightlist">
+ <p> <span>Priority :</span> Normal </p>
+ <p> <span>ReportTime :</span> </p>
+ <p> <span>ClearTime :</span> </p>
+ <p> <span>FaultFieldsVersion :</span> </p>
+ <p> <span>Event Servrity :</span> </p>
+ <p> <span>EventSourceType :</span> </p>
+ <p> <span>EventCategory :</span> </p>
+ <p> <span>AlarmCondition :</span> </p>
+ <p> <span>SpecificProblem :</span> </p>
+ <p> <span>Status :</span> </p>
+ <p> <span>AlarmInterfaceA :</span> </p>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <button [ngClass]="{'buttonActive':moredetailShow}" (click)="slideUpDown()"></button>
+ <h2 class="detailtitle">DETAIL INFORMATION</h2>
+ <div class="detailInformatioin" [@slideUpDown]='state'>
+ <nz-table #detailTable [nzData]="detailData" [nzShowPagination]="false" nzSize="small" [nzBordered]="true">
+ <thead>
+ <tr>
+ <th nzWidth="18%">Item Name</th>
+ <th >Item Value</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let data of detailTable.data">
+ <td>{{data.name}}</td>
+ <td>{{data.value}}</td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+</div>
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<DetailsComponent>;
+
+ 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 @@
+<!--
+ 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);
+
+ }
+
+}
diff --git a/usecaseui-portal/src/app/dataInterface.ts b/usecaseui-portal/src/app/dataInterface.ts
new file mode 100644
index 00000000..fe42594e
--- /dev/null
+++ b/usecaseui-portal/src/app/dataInterface.ts
@@ -0,0 +1,38 @@
+
+interface homeData {
+ services:{
+ number:number,
+ chartdata:Object[]
+ },
+ performance:{
+ per_Vnf:number,
+ per_VmPm:number
+ },
+ alarm:{
+ chartdata:Object[]
+ },
+ Vm_performance:{
+ names:string[]
+ }
+};
+
+interface homeVmLineData {
+ CPU:number[],
+ Memory:number[]
+}
+
+interface servicesSelectData {
+ customer:string[],
+ serviceType:string[]
+}
+
+interface servicesTableData {
+ total:number,
+ tableList:string[]
+}
+
+interface onboardTableData {
+ total:number,
+ tableList:string[]
+}
+export {homeData, homeVmLineData, servicesSelectData, servicesTableData, onboardTableData}
diff --git a/usecaseui-portal/src/app/home/home.component.css b/usecaseui-portal/src/app/home/home.component.css
new file mode 100644
index 00000000..d2e51e40
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.css
@@ -0,0 +1,157 @@
+/*
+ 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;
+}
+.content .services {
+ float: left;
+ background-color: #fff;
+ width: 30%;
+ height: 628px;
+ border-radius: 5px;
+ padding: 28px 22px;
+}
+.content .services h4 {
+ font: 600 16px/16px "Arial";
+ color: #3d4d65;
+ margin-bottom: 58px;
+}
+.content .services h3 {
+ font: 400 48px/48px "Arial";
+ color: #3fa8eb;
+ text-align: center;
+}
+.content .services h3 span {
+ font-size: 14px;
+}
+.content .services p {
+ font: 400 14px/14px "Arial";
+ color: #54657e;
+ text-align: center;
+ margin-bottom: 48px;
+}
+.content .services .tip {
+ background-color: #eceff4;
+ color: #3d4d65;
+ font-size: 16px;
+ margin: 0 20px;
+ height: 35px;
+ line-height: 35px;
+ border-radius: 5px;
+}
+.content .rightcontent {
+ float: left;
+ padding-left: 15px;
+ width: 70%;
+}
+.content .rightcontent .rt-content {
+ height: 220px;
+ margin-bottom: 18px;
+}
+.content .rightcontent .rt-content .poerformance {
+ float: left;
+ background-color: #fff;
+ height: 100%;
+ width: 50%;
+ border-radius: 5px;
+ padding: 28px 26px;
+}
+.content .rightcontent .rt-content .poerformance h4 {
+ font: 600 16px/16px "Arial";
+ color: #3d4d65;
+ margin-bottom: 34px;
+}
+.content .rightcontent .rt-content .poerformance div {
+ height: 57px;
+ position: relative;
+ margin-bottom: 10px;
+}
+.content .rightcontent .rt-content .poerformance div h3 {
+ font: 600 25px/25px "Arial";
+ color: #3d4d65;
+ margin-bottom: 10px;
+}
+.content .rightcontent .rt-content .poerformance div p {
+ font: 400 12px/12px "Arial";
+ color: #54657e;
+}
+.content .rightcontent .rt-content .poerformance div img {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+.content .rightcontent .rt-content .alarm {
+ float: left;
+ background-color: #fff;
+ height: 100%;
+ width: 48%;
+ margin-left: 2%;
+ border-radius: 5px;
+ position: relative;
+ padding: 28px 26px;
+}
+.content .rightcontent .rt-content .alarm h4 {
+ position: absolute;
+ font: 600 16px/16px "Arial";
+ color: #3d4d65;
+}
+.content .rightcontent .rb-content {
+ height: 390px;
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 24px 30px;
+ position: relative;
+}
+.content .rightcontent .rb-content h4 {
+ font: 600 16px/16px "Arial";
+ color: #3d4d65;
+}
+.content .rightcontent .rb-content nz-dropdown {
+ position: absolute;
+ top: 24px;
+ right: 30px;
+}
+.content .rightcontent .rb-content nz-dropdown button {
+ width: 170px;
+ height: 35px;
+ background-color: #eceff4;
+ text-align: left;
+ border-color: #cad3df;
+}
+.content .rightcontent .rb-content nz-dropdown button span {
+ display: inline-block;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 14px;
+}
+.content .rightcontent .rb-content nz-dropdown button i {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+}
+.content .rightcontent .rb-content #pfVmChartLine {
+ width: 100%;
+ height: 318px;
+}
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
new file mode 100644
index 00000000..b2fa5eb4
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -0,0 +1,63 @@
+<!--
+ 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.
+-->
+<h3 class="title"> {{"Overall trend" | translate}}</h3>
+<hr>
+<div class="content">
+ <div class="services">
+ <h4>{{"SERVICES" | translate}}</h4>
+ <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
+ <p>{{serviceNumber}} {{"services has been created" | translate}}</p>
+ <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie>
+ <p class="tip">View the details</p>
+ </div>
+
+ <div class="rightcontent">
+ <div class="rt-content">
+ <div class="poerformance">
+ <h4>{{"PERFORMANCE" | translate}}</h4>
+ <div class="pfVnf">
+ <h3 class="pfVnfNum">126</h3>
+ <p>Performance VNF</p>
+ <img src="../../assets/images/VNF.png" alt="VNF">
+ </div>
+ <div class="pfVmPm">
+ <h3 class="pfVmPmNum">286</h3>
+ <p>Performance VM/PM</p>
+ <img src="../../assets/images/VM.png" alt="VM/PM">
+ </div>
+ </div>
+ <div class="alarm">
+ <h4>{{"Alarm" | translate}}</h4>
+ <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie>
+ </div>
+ </div>
+
+ <div class="rb-content">
+ <h4>{{"VM Performance" | translate}}</h4>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
+ <button nz-button nz-dropdown><span>{{vmPerformanceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="vmPerformanceNameSelect(item)" *ngFor="let item of vmPerformanceNames">
+ <a>{{item}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ <app-line [initData]="performanceChartInit" [chartData]="performanceChartData"></app-line>
+ </div>
+ </div>
+
+</div>
+
diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less
new file mode 100644
index 00000000..89abafa6
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.less
@@ -0,0 +1,145 @@
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 20px;
+}
+.content {
+ .services {
+ float: left;
+ background-color: #fff;
+ width: 30%;
+ height: 628px;
+ border-radius: 5px;
+ padding: 28px 22px;
+ h4 {
+ font: 600 16px/16px "Arial";
+ color: #3d4d65;
+ margin-bottom: 58px;
+ }
+ h3 {
+ font: 400 48px/48px "Arial";
+ color: #3fa8eb;
+ text-align: center;
+ span {
+ font-size: 14px;
+ }
+ }
+ p {
+ font: 400 14px/14px "Arial";
+ color: #54657e;
+ text-align: center;
+ margin-bottom: 48px;
+ }
+ .tip {
+ background-color: #eceff4;
+ color: #3d4d65;
+ font-size: 16px;
+ margin: 0 20px;
+ height: 35px;
+ line-height: 35px;
+ border-radius: 5px;
+ }
+ }
+ .rightcontent {
+ float: left;
+ padding-left: 15px;
+ width: 70%;
+ .rt-content {
+ height: 220px;
+ margin-bottom: 18px;
+ .poerformance {
+ float: left;
+ background-color: #fff;
+ height: 100%;
+ width: 50%;
+ border-radius: 5px;
+ padding: 28px 26px;
+ h4 {
+ font: 600 16px/16px "Arial";
+ color: #3d4d65;
+ margin-bottom: 34px;
+ }
+ div {
+ height: 57px;
+ position: relative;
+ margin-bottom: 10px;
+ h3 {
+ font: 600 25px/25px "Arial";
+ color: #3d4d65;
+ margin-bottom: 10px;
+ }
+ p {
+ font: 400 12px/12px "Arial";
+ color: #54657e
+ }
+ img {
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
+ }
+ }
+ .alarm {
+ float: left;
+ background-color: #fff;
+ height: 100%;
+ width: 48%;
+ margin-left: 2%;
+ border-radius: 5px;
+ position: relative;
+ padding: 28px 26px;
+ h4 {
+ position: absolute;
+ font: 600 16px/16px "Arial";
+ color: #3d4d65;
+ }
+ }
+ }
+ .rb-content {
+ height: 390px;
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 24px 30px;
+ position: relative;
+ h4 {
+ font: 600 16px/16px "Arial";
+ color: #3d4d65;
+ }
+ nz-dropdown {
+ position: absolute;
+ top: 24px;
+ right: 30px;
+ button {
+ width: 170px;
+ height: 35px;
+ background-color: #eceff4;
+ text-align: left;
+ border-color: #cad3df;
+ span {
+ display: inline-block;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 14px;
+ }
+ i {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ }
+ }
+ //下拉框中的样式在style.less中,下拉框是在body中额外临时生成的
+ }
+ #pfVmChartLine {
+ width: 100%;
+ height: 318px;
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/home/home.component.spec.ts b/usecaseui-portal/src/app/home/home.component.spec.ts
new file mode 100644
index 00000000..490e81bd
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+ let component: HomeComponent;
+ let fixture: ComponentFixture<HomeComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HomeComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HomeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
new file mode 100644
index 00000000..39fab25d
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -0,0 +1,166 @@
+import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import { MyhttpService } from '../myhttp.service';
+import { slideToRight } from '../animates';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: './home.component.html',
+ styleUrls: ['./home.component.less'],
+ animations: [ slideToRight ]
+})
+export class HomeComponent implements OnInit {
+ @HostBinding('@routerAnimate') routerAnimateState;
+
+ constructor(private myhttp: MyhttpService) { }
+
+ ngOnInit() {
+ this.getHomeAllData();
+ }
+
+ // alarm饼图
+ alarmChartData:Object;
+ alarmChartInit:Object = {
+ height: 164,
+ option:{
+ legend: {
+ orient: 'vertical',
+ left: '0px',
+ bottom: '0px',
+ data: ['Active','Closed']
+ },
+ color:["#fb6e6e","#526b75"],
+ series:[{
+ name:"告警信息",
+ radius : '55%',
+ label:{
+ normal:{
+ show: false,
+ },
+ emphasis: {
+ show: true,
+ formatter:'{b}\n{c},{d}%',
+ }
+ }
+ }]
+ }
+ };
+
+ // services饼图
+ serviceNumber:number = 0;
+ serviceChartData:Object;
+ serviceChartInit:Object = {
+ height: 300,
+ option:{
+ legend: {
+ orient: 'vertical',
+ left: '0px',
+ bottom: '0px',
+ data: ['Active','Closed']
+ },
+ color:["#3fa8eb","#1abb9b","#a4ead7"],
+ series:[{
+ name:"服务信息",
+ radius : ['45%','65%'],
+ avoidLabelOverlap: false,
+ label:{
+ normal:{
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ show: true,
+ formatter:'{b}\n{c}',
+ textStyle: {
+ fontSize: '20',
+ fontWeight: 'bold'
+ }
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ }]
+ }
+ };
+
+ // Performance线图
+ performanceChartData:Object;
+ performanceChartInit:Object = {
+ height:320,
+ option:{
+ legend: {
+ bottom: '0px',
+ data: ['CPU','Memory']
+ },
+ series : [
+ {
+ name: 'CPU',
+ type: 'line',
+ data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
+ },
+ {
+ name: 'Memory',
+ type: 'line',
+ data:[10,23,24,22,14,15,32,12,12,32,14,23,23]
+ }
+ ]
+ }
+ };
+ getPerformanceChartData(){
+ let paramsObj = {
+ vmPerformanceName:this.vmPerformanceNameSelected
+ }
+ this.myhttp.getHomePerformanceChartData(paramsObj)
+ .subscribe((data)=>{
+ this.performanceChartData = {
+ series:[
+ {data:data.CPU},
+ {data:data.Memory}
+ ]
+ }
+ },(err)=>{
+ console.log(err);
+ })
+ }
+
+ // vm筛选框
+ vmPerformanceNames = ['performanceNameOne'];
+ vmPerformanceNameSelected = this.vmPerformanceNames[0];
+ vmPerformanceNameSelect(item){
+ if(this.vmPerformanceNameSelected != item){
+ console.log(item);
+ this.vmPerformanceNameSelected = item;
+ this.getPerformanceChartData()
+ }
+ }
+
+ // 获取数据
+ getHomeAllData(){
+ this.myhttp.getAllHomeData()
+ .subscribe(
+ (data)=>{
+ console.log(data);
+ this.alarmChartData ={
+ series:[{
+ data:data.alarm.chartdata
+ }]
+ };
+ this.serviceNumber = data.services.number;
+ this.serviceChartData ={
+ series:[{
+ data:data.services.chartdata
+ }]
+ };
+ this.vmPerformanceNames = data.Vm_performance.names;
+ this.vmPerformanceNameSelected = this.vmPerformanceNames[0];
+ this.getPerformanceChartData();
+ },
+ (err)=>{
+ console.log(err);
+ }
+ )
+ }
+
+}
diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts
new file mode 100644
index 00000000..09f13a49
--- /dev/null
+++ b/usecaseui-portal/src/app/myhttp.service.ts
@@ -0,0 +1,266 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { homeData, homeVmLineData, servicesSelectData, servicesTableData, onboardTableData} from './dataInterface';
+
+
+
+@Injectable()
+export class MyhttpService {
+
+ constructor(private http: HttpClient) { }
+
+ baseUrl = "./assets/json";
+ url={
+ allhome:this.baseUrl + "/homeAllData.json",
+ homeLineData:this.baseUrl + "/homePerformanceChartData.json",
+ serviceSelectList:this.baseUrl + "/servicesList.json", //customer、serviceType
+ servicesTableData:this.baseUrl + "/servicesTableData.json",
+ onboardTableData:this.baseUrl + "/onboardTableData.json",
+
+ customers:this.baseUrl + "/customers.json?",
+ serviceType:this.baseUrl + "/serviceTypes.json?*_*",
+ servicesCategory:this.baseUrl + "/configuration_files/servicesCategory.json?",
+ serviceInstanceList:this.baseUrl + "/instanceTableData4.json?",
+ serviceTemplates:this.baseUrl + "/serviceTemplates2.json?",
+ templateCategory:this.baseUrl + "/configuration_files/templateCategory.json?",
+ templateParameters:this.baseUrl + "/*_*" + "ServiceTemplateParameters.json?",
+ addressData: this.baseUrl + "/siteAddressData.json?",
+ createService:this.baseUrl + "/createService.json?",
+ inputNamesTransform: this.baseUrl + "/configuration_files/inputNamesTranslate.json?",
+ deleteService: this.baseUrl + "/deleteService.json?",
+ progress:this.baseUrl + "/progress.json?",
+
+ allottedResource:this.baseUrl + "/allotted-resources2.json?",
+ pnfDetail:this.baseUrl + "/pnfdetail-domain.json?",
+ connectivity:this.baseUrl + "/sotn-connectivity2.json?",
+ vpnBinding:this.baseUrl + "/vpnbinding.json?",
+ alarmFormData:this.baseUrl + "/alarmFormData.json?"
+ }
+
+ // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1';
+ // baseUrl = '/api/usecaseui-server/v1';
+ // url={
+ // allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0",
+ // homeLineData:this.baseUrl + "/...........",
+ // serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx",
+ // servicesTableData:this.baseUrl + "/xxxxxxxx.json",
+ // onboardTableData:this.baseUrl + "/xxxxxxx.json",
+
+
+ // customers:this.baseUrl + "/uui-lcm/customers",
+ // serviceType:this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions",
+ // servicesCategory: "./assets/json/configuration_files/servicesCategory.json",
+ // serviceInstanceList:this.baseUrl + '/uui-sotn/getServiceInstanceList',
+ // serviceTemplates:this.baseUrl + "/uui-lcm/service-templates",
+ // templateCategory: "./assets/json/configuration_files/templateCategory.json",
+ // templateParameters:this.baseUrl + "/uui-lcm/service-templates/" + "*_*" +"?toscaModelPath=",
+ // addressData: this.baseUrl + "/uui-sotn/getOssInvenory",
+ // createService:this.baseUrl + "/uui-lcm/services",
+ // inputNamesTransform: "./assets/json/configuration_files/inputNamesTranslate.json?",
+ // deleteService: this.baseUrl + "/uui-lcm/services/",
+ // progress:this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/",
+
+ // allottedResource:this.baseUrl + "/uui-sotn/getAllottedResources",
+ // pnfDetail:this.baseUrl + "/uui-sotn/getPnfInfo/",
+ // connectivity:this.baseUrl + "/uui-sotn/getConnectivityInfo/",
+ // vpnBinding:this.baseUrl + "/uui-sotn/getPinterfaceByVpnId/"
+ // }
+
+ // home页数据
+ getAllHomeData() {
+ return this.http.get<homeData>(this.url.allhome);
+ }
+ //home页折线图数据
+ getHomePerformanceChartData(paramsObj){
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<homeVmLineData>(this.url.homeLineData,{params});
+ }
+
+ // servicesList数据
+ // getServicesSelectData():Observable<HttpResponse<servicesSelectData>>{
+ // return this.http.get<servicesSelectData>(this.url.serviceSelectList,{observe:'response'});
+ // }
+ getServicesTableData(paramsObj):Observable<HttpResponse<servicesTableData>>{
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<servicesTableData>(this.url.servicesTableData,{observe:'response',params});
+ }
+
+ // onboard数据
+ getOnboardTableData(paramsObj):Observable<HttpResponse<onboardTableData>>{
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<onboardTableData>(this.url.onboardTableData,{observe:'response',params});
+ }
+
+
+
+
+
+ testObservable(){
+ let myObservable = new Observable((observer)=>{
+ observer.next(1);
+ observer.next((n)=>{
+ console.log(3+n);
+ })
+ setTimeout(()=>{
+ observer.next(66666)
+ },100)
+ observer.next(()=>{
+ setTimeout((n)=>{
+ console.log("9999---" + n);
+ },10)
+ })
+ // observer.error(2);
+ // observer.complete();
+ });
+
+ myObservable.subscribe((e)=>{
+ if(typeof e == "function"){
+ e(5)
+ }
+ console.log(e);
+ },(err)=>{
+ console.log(err);
+ },()=>{
+ console.log(555);
+ })
+ }
+
+ //---------------------------------------------------------------------------------
+
+ // 获取所有customers
+ getAllCustomers(){
+ return this.http.get<any>(this.url.customers);
+ // return this.http.jsonp<Object[]>('http://127.0.0.1:5500/customers.json',"callback");// 测试用 :请求数据需要用回调函数包裹
+ }
+
+ // 获取相应的serviceType
+ getServiceTypes(customer){
+ let url = this.url.serviceType.replace("*_*",customer.id);
+ return this.http.get<any>(url);
+ }
+ // 获取服务分类信息,本地配置文件
+ getServicesCategory(){
+ return this.http.get<any>(this.url.servicesCategory);
+ }
+ // list表格数据
+ getInstanceTableData(paramsObj){
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(this.url.serviceInstanceList,{params});
+ }
+
+ // // 服务详情数据
+ // getInstanceDetails(id){
+ // let url = this.baseUrl + "/detailsData.json?id=" + id;
+ // return this.http.get<instanceDetail>(url);
+ // }
+
+ // 获取所有模板类型
+ getAllServiceTemplates(){
+ return this.http.get<any>(this.url.serviceTemplates);
+ }
+
+ // 获取模板分类信息,本地配置文件
+ getTemplateCategory(){
+ return this.http.get<any>(this.url.servicesCategory);
+ }
+ // 获取模板输入项参数
+ getTemplateParameters(type,template){
+ let url = this.url.templateParameters.replace("*_*",type) + template.toscaModelURL; //本地模拟
+ // let url = this.url.templateParameters.replace("*_*",template.uuid) + template.toscaModelURL;
+ return this.http.get<any>(url);
+ }
+ // siteAddress 地址
+ getSiteAddress(){
+ return this.http.get<any>(this.url.addressData);
+ }
+
+ // 创建接口
+ createInstance(requestBody){
+ return this.http.get<any>(this.url.createService); //本地模拟
+ // return this.http.post<any>(this.url.createService,requestBody);
+ }
+
+ // 输入参数名字转换
+ inputNamesTransform(){
+ return this.http.get(this.url.inputNamesTransform);
+ }
+
+ // 删除接口
+ deleteInstance(obj){
+ let httpOptions = {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'Accept':'application/json',
+ 'Authorization':'Basic SW5mcmFQb3J0YWxDbGllbnQ6cGFzc3dvcmQxJA=='
+ }),
+ body:{
+ 'globalSubscriberId': obj.globalSubscriberId,
+ 'serviceType': obj.serviceType
+ }
+ };
+ return this.http.get<any>(this.url.deleteService); //本地模拟
+ // return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
+ }
+
+ // 查询进度接口
+ getProgress(obj){
+ let url = this.url.progress.replace("*_*",obj.serviceId) + obj.operationId;
+ return this.http.get<any>(url);
+ }
+
+ // 获取allotted-resource 能获取tp和pnf值
+ getAllottedResource(obj){
+ let params = new HttpParams({fromObject:obj});
+ let url = this.url.allottedResource;
+ return this.http.get<any>(url,{params});
+ }
+ //通过pnf值获取对应的domain (network-resource)
+ getPnfDetail(name){
+ let url = this.url.pnfDetail + name;
+ return this.http.get<any>(url);
+ }
+ //通过sotn 获取connectivity ,查找vpn-id
+ getSotnConnectivity(id){
+ let url = this.url.connectivity + id;
+ return this.http.get<any>(url);
+ }
+ //通过vpn-id 查找tp和pnf
+ getVpnBinding(id){
+ let url = this.url.vpnBinding + id;
+ return this.http.get<any>(url);
+ }
+ // 时间格式化 毫秒转正常值
+ dateformater(vmstime){
+ if(!vmstime){
+ return ''
+ }
+ let mstime = Number((vmstime + '').slice(0,13));
+ let time = new Date(mstime);
+ let year = time.getFullYear();
+ let month = time.getMonth() + 1;
+ let day = time.getDate();
+ let hours = time.getHours();
+ let minutes = time.getMinutes();
+ let seconds = time.getSeconds();
+ let formattime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
+ return formattime;
+ }
+
+ // alarm表格数据
+ // getAlarmFormData(pageNumber:number,pageSaze:number,name?:string,Priority?:string,Status?:string,Report?:string){
+ // return this.http.post<any>(this.url.alarmFormData,{
+ // pageNumber:pageNumber,
+ // pageSaze:pageSaze,
+ // name:name,
+ // Priority:Priority,
+ // Status:Status,
+ // Report:Report
+ // });
+ // }
+
+
+ getAlarmFormData(pageNumber:number,pageSaze:number,name?:string,Priority?:string,Status?:string,Report?:string){
+ return this.http.get<any>(this.url.alarmFormData+'?pageNumber='+pageNumber+'?pageSaze'+pageSaze+'?name'+name+'?Priority'+Priority+'?Status'+Status+'?Report'+Report);
+ }
+}
diff --git a/usecaseui-portal/src/app/networkHttpservice.service.ts b/usecaseui-portal/src/app/networkHttpservice.service.ts
new file mode 100644
index 00000000..5e713d7f
--- /dev/null
+++ b/usecaseui-portal/src/app/networkHttpservice.service.ts
@@ -0,0 +1,99 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+
+interface tablelist {
+ total:number,
+ list:Object[]
+}
+interface d3list {
+ total:number,
+ list:Object[]
+}
+
+@Injectable()
+export class networkHttpservice {
+
+ constructor(private http:HttpClient) { }
+
+ baseUrl = "./assets/json/";
+ // list表格数据
+ getInstanceTableData(paramsObj){
+ let url = this.baseUrl + "instanceTableData.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<tablelist>(url,{params});
+ }
+ //d3数据
+ getNetworkD3Data(){
+ let url = this.baseUrl + "netWorkD3Data.json";
+ // let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url);
+ }
+ //初始化连线 logical-links
+ getLogicalLinksData(){
+ let url = this.baseUrl + "LogicalLinksData.json";
+ // let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url);
+ }
+ //查询指定的node对应的tp数据
+ getPInterfacesData1(paramsObj){
+ let url = this.baseUrl + "p_interfaces1.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url,{params});
+ }
+ getPInterfacesData2(paramsObj){
+ let url = this.baseUrl + "p_interfaces2.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url,{params});
+ }
+ //创建连线接口
+ createLink(paramsObj){
+ let url = this.baseUrl+ "status.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url,{params});
+ }
+ //查询指定的单个连接线 接口
+ querySpecificLinkInfo(paramsObj){
+ let url = this.baseUrl+ "specific_link _nfo.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url,{params});
+ }
+
+ //查询 外部云host this.url地址 接口
+ queryCloudUrl(paramsObj){
+ let url = this.baseUrl+ "url.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url,{params});
+ }
+
+ //创建外部云newwork接口
+ createNetwrok(paramsObj){
+ let url = this.baseUrl+ "status.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url,{params});
+ }
+ //创建外部云pnf接口
+ createPnf(paramsObj){
+ let url = this.baseUrl+ "status.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url,{params});
+ }
+ //创建外部云Tp接口
+ createTp(paramsObj,cloudNodeName){
+ console.log(cloudNodeName)
+ let url = this.baseUrl+ "status.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url,{params});
+ }
+ //创建外部云link接口
+ createCloudLink(paramsObj){
+ let url = this.baseUrl+ "status.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url,{params});
+ }
+ //删除连线
+ deleteLink(paramsObj){
+ let url = this.baseUrl+ "status.json";
+ let params = new HttpParams({fromObject:paramsObj});
+ return this.http.get<any>(url,{params});
+ }
+}
diff --git a/usecaseui-portal/src/app/networkHttpservice.service1.ts b/usecaseui-portal/src/app/networkHttpservice.service1.ts
new file mode 100644
index 00000000..edb4df7c
--- /dev/null
+++ b/usecaseui-portal/src/app/networkHttpservice.service1.ts
@@ -0,0 +1,97 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+
+
+@Injectable()
+export class networkHttpservice {
+
+ constructor(private http:HttpClient) { }
+
+ // baseUrl = "./assets/json/";//本地环境
+ // url={
+ // "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json",
+ // "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json",
+ // "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json",
+ // "getPInterfacesData2":this.baseUrl + "p_interfaces1.json",
+ // "createLink":this.baseUrl + "status.json",
+ // "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json",
+ // "queryCloudUrl":this.baseUrl + "url.json",
+ // "createNetwrok":this.baseUrl + "status.json",
+ // "createPnf":this.baseUrl + "status.json",
+ // "createTp":this.baseUrl + "status.json",
+ // "createCloudLink":this.baseUrl + "status.json",
+ // "createCloudUrl":this.baseUrl + "status.json",
+ // "deleteLink":this.baseUrl + "status.json",
+ // };
+ // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//线上环境
+ // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//线上环境
+ baseUrl = "/api/usecaseui-server/v1/uui-sotn/";//线上环境
+ url={
+ "getNetworkD3Data":this.baseUrl + "getNetWorkResources",
+ "getLogicalLinksData":this.baseUrl + "getLogicalLinks",
+ "getPInterfacesData1":this.baseUrl + "getPinterfaceByPnfName/",
+ "getPInterfacesData2":this.baseUrl + "getPinterfaceByPnfName/",
+ "createLink":this.baseUrl + "createLink/",
+ "querySpecificLinkInfo":this.baseUrl + "getSpecificLogicalLink/",
+ "queryCloudUrl":this.baseUrl + "getHostUrl/",
+ "createNetwrok":this.baseUrl + "createTopoNetwork/",
+ "createPnf":this.baseUrl + "createPnf/",
+ "createTp":this.baseUrl + "pnf/",
+ "createCloudLink":this.baseUrl + "createLink/",
+ "createCloudUrl":this.baseUrl + "createHostUrl/",
+ "deleteLink":this.baseUrl + "deleteLink/",
+ };
+ //d3数据
+ getNetworkD3Data(){
+ return this.http.get<any>(this.url["getNetworkD3Data"]);
+ }
+ //初始化连线 logical-links
+ getLogicalLinksData(){
+ return this.http.get<any>(this.url["getLogicalLinksData"]);
+ }
+ //查询指定的node对应的tp数据
+ getPInterfacesData1(paramsObj){
+ return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]);
+ }
+ getPInterfacesData2(paramsObj){
+ return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]);
+ }
+ //创建连线接口
+ createLink(paramsObj){
+ return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj);
+ }
+ //查询指定的单个连接线 接口
+ querySpecificLinkInfo(paramsObj){
+ return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]);
+ }
+ //查询 外部云host this.url地址 接口
+ queryCloudUrl(aaiId){
+ return this.http.get<any>(this.url["queryCloudUrl"]+aaiId);
+ }
+ //创建外部云newwork接口
+ createNetwrok(paramsObj){
+ return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-id"],paramsObj);
+ }
+ //创建外部云pnf接口
+ createPnf(paramsObj){
+ return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj);
+ }
+ //创建外部云Tp接口
+ createTp(paramsObj,cloudNodeName){
+ let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint";
+ return this.http.put<any>(this.url["createTp"]+str,paramsObj);
+ }
+ //创建外部云link接口
+ createCloudLink(paramsObj){
+ return this.http.put<any>(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj);
+ }
+ //创建外部云host url接口
+ createCloudUrl(paramsObj){
+ return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj);
+ }
+ //删除连线
+ deleteLink(paramsObj){
+ let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"];
+ return this.http.delete<any>((this.url["deleteLink"]+str));
+ }
+}
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css
new file mode 100644
index 00000000..079a409c
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css
@@ -0,0 +1,75 @@
+/*
+ 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 {
+ margin-bottom: 20px;
+}
+.select span {
+ display: inline-block;
+ font: 700 14px "Arial";
+ color: #4c5e70;
+}
+.select nz-dropdown {
+ vertical-align: middle;
+}
+.select nz-dropdown :hover {
+ border-color: #147dc2;
+}
+.select nz-dropdown button {
+ width: 165px;
+ height: 30px;
+ background-color: #eceff4;
+ text-align: left;
+ border-color: #9fa9ab;
+}
+.select nz-dropdown button span {
+ font-weight: 400;
+ display: inline-block;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-top: 2px;
+}
+.select nz-dropdown button i {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+.select .submit {
+ margin-left: 20px;
+ vertical-align: middle;
+ height: 30px;
+ padding: 0 10px;
+}
+.select .submit span {
+ color: #fff;
+ font-weight: 400;
+}
+.content {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 12px;
+}
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html
new file mode 100644
index 00000000..76d2485e
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.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.
+-->
+<!-- <h3 class="title">
+ <span (click)="performanceShow()" style="cursor:pointer;">Performance VM</span>
+ <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span>
+ <span *ngIf="detailshow">> Details </span>
+</h3>
+<hr>
+<div class="select" [@showHideAnimate]="state">
+ <span>Source Name: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+ <a>{{item}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ &nbsp;&nbsp;
+ <span>ReportingEntityName: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{ReportingEntityNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseReportingEntityName(item)" *ngFor="let item of ReportingEntityNameList">
+ <a>{{item}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><i class="anticon anticon-plus-circle-o"></i><span>Submit</span></button>
+</div>
+<div class="content" [@showHideAnimate]="state">
+ <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [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="20%">ReportingEntityName</th>
+ <th nzWidth="10%">Type</th>
+ <th nzWidth="15%">CPU</th>
+ <th nzWidth="10%">Memory</th>
+ <th nzWidth="10%">Disk</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.address}}</td>
+ <td>{{item.age}}</td>
+ <td>{{item.address}}</td>
+ <td>{{item.age}}</td>
+ <td>{{item.age}}</td>
+ <td><a (click)="graphicShow()">Delete</a></td>
+ </tr> -->
+ <!-- </ng-template> -->
+ <!-- </tbody>
+ </nz-table>
+</div>
+<div [@showHideAnimate]="state2">
+ <app-graphiclist (detailData)="detailShow($event)"></app-graphiclist>
+</div>
+<div [@showHideAnimate]="state3">
+ <app-details [detailId]="detailId"></app-details>
+</div> -->
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less
new file mode 100644
index 00000000..8a9005c5
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less
@@ -0,0 +1,61 @@
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 20px;
+}
+.select {
+ margin-bottom: 20px;
+ 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中额外临时生成的
+ }
+ .submit {
+ margin-left: 20px;
+ vertical-align: middle;
+ height: 30px;
+ padding: 0 10px;
+ span {
+ color: #fff;
+ font-weight: 400;
+ }
+ }
+}
+.content {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 12px;
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts
new file mode 100644
index 00000000..fd441da3
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformanceVmComponent } from './performance-vm.component';
+
+describe('PerformanceVmComponent', () => {
+ let component: PerformanceVmComponent;
+ let fixture: ComponentFixture<PerformanceVmComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PerformanceVmComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PerformanceVmComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts
new file mode 100644
index 00000000..1fb099c9
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts
@@ -0,0 +1,159 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { slideToRight, showHideAnimate } from '../../animates';
+
+@Component({
+ selector: 'app-performance-vm',
+ templateUrl: './performance-vm.component.html',
+ styleUrls: ['./performance-vm.component.less'],
+ animations: [ slideToRight, showHideAnimate ]
+})
+export class PerformanceVmComponent implements OnInit {
+ @HostBinding('@routerAnimate') routerAnimateState;
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+ // 筛选框(下拉框)
+ sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD'];
+ sourceNameSelected = this.sourceNameList[0];
+ ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd'];
+ ReportingEntityNameSelected = this.ReportingEntityNameList[0];
+ choseSourceName(item){
+ console.log(item);
+ this.sourceNameSelected = item;
+ }
+ choseReportingEntityName(item){
+ console.log(item);
+ this.ReportingEntityNameSelected = item;
+ }
+
+ //表格数据
+ 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.'
+ }
+ ];
+
+ //详情页标题显示
+ graphicshow = false;
+ detailshow = false;
+ // 显示隐藏动画
+ state = "show";
+ state2 = "hide";
+ state3 = "hide";
+ performanceShow() {
+ this.state = 'show';
+ this.state2 = 'hide';
+ this.state3 = 'hide';
+ this.graphicshow = false;
+ this.detailshow = false;
+ }
+ graphicShow() {
+ this.state = 'hide';
+ this.state2 = 'show';
+ this.state3 = 'hide';
+ this.graphicshow = true;
+ this.detailshow = false;
+ }
+ // 选中id
+ detailId:number;
+ detailShow(prems) {
+ this.state = 'hide';
+ this.state2 = 'hide';
+ this.state3 = 'show';
+ this.graphicshow = true;
+ this.detailshow = true;
+ console.log(prems);
+ this.detailId = prems.id;
+ }
+
+}
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
new file mode 100644
index 00000000..4ed015fe
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
@@ -0,0 +1,126 @@
+/*
+ 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 {
+ margin-bottom: 20px;
+}
+.select span {
+ display: inline-block;
+ font: 700 14px "Arial";
+ color: #4c5e70;
+}
+.select nz-dropdown {
+ vertical-align: middle;
+}
+.select nz-dropdown :hover {
+ border-color: #147dc2;
+}
+.select nz-dropdown button {
+ width: 165px;
+ height: 30px;
+ background-color: #eceff4;
+ text-align: left;
+ border-color: #9fa9ab;
+}
+.select nz-dropdown button span {
+ font-weight: 400;
+ display: inline-block;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-top: 2px;
+}
+.select nz-dropdown button i {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+.select .submit {
+ margin-left: 20px;
+ vertical-align: middle;
+ height: 30px;
+ padding: 0 10px;
+}
+.select .submit span {
+ color: #fff;
+ font-weight: 400;
+}
+.content {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 12px;
+}
+.content .vnfs {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+.content .vnfs .vnf {
+ width: 18%;
+ height: 200px;
+ margin: 5px;
+ padding: 20px;
+ border-radius: 2px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s linear;
+}
+.content .vnfs .vnf:hover {
+ background-color: #f5f5f5;
+ transform: scale(1.02);
+}
+.content .vnfs .vnf h3 {
+ font-size: 14px;
+ color: #3fa8eb;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-bottom: 0;
+}
+.content .vnfs .vnf .intro {
+ text-align: left;
+ font-size: 12px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ word-wrap: break-word;
+ word-break: break-all;
+}
+.content .vnfs .empty {
+ width: 18%;
+ height: 200px;
+ margin: 5px;
+ border-radius: 2px;
+}
+.content .pages {
+ height: 25px;
+ margin: 20px 10px;
+ position: relative;
+}
+.content .pages nz-pagination {
+ float: right;
+}
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
new file mode 100644
index 00000000..0b398703
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
@@ -0,0 +1,64 @@
+<!--
+ 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.
+-->
+<h3 class="title">
+ <span (click)="performanceShow()" style="cursor:pointer;">Performance VNF</span>
+ <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span>
+ <span *ngIf="detailshow">> Details </span>
+</h3>
+<hr>
+<div class="select" [@showHideAnimate]="state">
+ <span>Source Name: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+ <a>{{item}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ &nbsp;&nbsp;
+ <span>ReportingEntityName: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{ReportingEntityNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseReportingEntityName(item)" *ngFor="let item of ReportingEntityNameList">
+ <a>{{item}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><i class="anticon anticon-plus-circle-o"></i><span>Submit</span></button>
+</div>
+<div class="content" [@showHideAnimate]="state">
+ <div class="vnfs">
+ <div class="vnf" *ngFor="let item of vnfsData" (click)="graphicShow()">
+ <img src="../../../assets/images/VNF3.png" alt="VNF3">
+ <h3>Mfvs_MMEManaxxdeafsfdf</h3>
+ <div class="intro">
+ Mfvs_MMEMa naxxdfdafa fafad a afeaf sfdff doafe oghaiod aaafeageageagfdavzvdagewag
+ </div>
+ </div>
+ <div class="empty" *ngFor="let empty of emptys"></div>
+ </div>
+ <div class="pages">
+ <nz-pagination [(nzPageIndex)]="current" [nzTotal]="500" [nzSize]="'small'" [nzPageSize]="10" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper></nz-pagination>
+ </div>
+</div>
+<div [@showHideAnimate]="state2">
+ <app-graphiclist (detailData)="detailShow($event)"></app-graphiclist>
+</div>
+<div [@showHideAnimate]="state3">
+ <app-details [detailId]="detailId"></app-details>
+</div>
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
new file mode 100644
index 00000000..977ef5c0
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
@@ -0,0 +1,115 @@
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 20px;
+}
+.select {
+ margin-bottom: 20px;
+ 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中额外临时生成的
+ }
+ .submit {
+ margin-left: 20px;
+ vertical-align: middle;
+ height: 30px;
+ padding: 0 10px;
+ span {
+ color: #fff;
+ font-weight: 400;
+ }
+ }
+}
+
+.content {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 12px;
+ .vnfs {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ .vnf {
+ // width: 180px;
+ width: 18%;
+ height: 200px;
+ margin: 5px;
+ padding: 20px;
+ border-radius: 2px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s linear;
+ &:hover {
+ background-color: #f5f5f5;
+ transform: scale(1.02);
+ }
+ h3 {
+ font-size: 14px;
+ color: #3fa8eb;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-bottom: 0;
+ }
+ .intro {
+ text-align: left;
+ font-size: 12px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ word-wrap:break-word;
+ word-break:break-all;
+ }
+ }
+ .empty {
+ // width: 180px;
+ width: 18%;
+ height: 200px;
+ margin: 5px;
+ border-radius: 2px;
+ }
+ }
+ .pages {
+ height: 25px;
+ margin: 20px 10px;
+ position: relative;
+ nz-pagination {
+ float: right;
+ }
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts
new file mode 100644
index 00000000..c535b737
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformanceVnfComponent } from './performance-vnf.component';
+
+describe('PerformanceVnfComponent', () => {
+ let component: PerformanceVnfComponent;
+ let fixture: ComponentFixture<PerformanceVnfComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PerformanceVnfComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PerformanceVnfComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
new file mode 100644
index 00000000..d2e8d991
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
@@ -0,0 +1,92 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { slideToRight, showHideAnimate } from '../../animates';
+
+@Component({
+ selector: 'app-performance-vnf',
+ templateUrl: './performance-vnf.component.html',
+ styleUrls: ['./performance-vnf.component.less'],
+ animations: [ slideToRight, showHideAnimate ]
+})
+export class PerformanceVnfComponent implements OnInit {
+ @HostBinding('@routerAnimate') routerAnimateState;
+ constructor() { }
+
+ ngOnInit() {
+ let _this = this;
+ setTimeout(function(){
+ // 在路由切换时加载图片造成动画卡顿,先完成动画再加载图片
+ _this.vnfsData = [
+ {name:"aaa",text:"oahgieango"},
+ {name:"aaa",text:"oahgieango"},
+ {name:"aaa",text:"oahgieango"},
+ {name:"aaa",text:"oahgieango"},
+ {name:"aaa",text:"oahgieango"},
+ {name:"aaa",text:"oahgieango"},
+ {name:"aaa",text:"oahgieango"},
+ {name:"aaa",text:"oahgieango"},
+ {name:"aaa",text:"oahgieango"},
+ {name:"aaa",text:"oahgieango"},
+ {name:"aaa",text:"oahgieango"}
+ ];
+ _this.emptys = new Array(15-_this.vnfsData.length);
+ },300)
+ }
+
+ // 筛选框(下拉框)
+ sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD'];
+ sourceNameSelected = this.sourceNameList[0];
+ ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd'];
+ ReportingEntityNameSelected = this.ReportingEntityNameList[0];
+ choseSourceName(item){
+ console.log(item);
+ this.sourceNameSelected = item;
+ }
+ choseReportingEntityName(item){
+ console.log(item);
+ this.ReportingEntityNameSelected = item;
+ }
+
+ submit(){
+
+ }
+ // vnfs数据
+ vnfsData = [];
+ emptys = []; //补空盒子用
+ // 分页
+ current = 1; //当前页码
+
+ //详情页标题显示
+ graphicshow = false;
+ detailshow = false;
+ // 显示隐藏动画
+ state = "show";
+ state2 = "hide";
+ state3 = "hide";
+ performanceShow() {
+ this.state = 'show';
+ this.state2 = 'hide';
+ this.state3 = 'hide';
+ this.graphicshow = false;
+ this.detailshow = false;
+ }
+ graphicShow() {
+ this.state = 'hide';
+ this.state2 = 'show';
+ this.state3 = 'hide';
+ this.graphicshow = true;
+ this.detailshow = false;
+ }
+ // 选中id
+ detailId:number;
+ detailShow(prems) {
+ this.state = 'hide';
+ this.state2 = 'hide';
+ this.state3 = 'show';
+ this.graphicshow = true;
+ this.detailshow = true;
+ console.log(prems);
+ this.detailId = prems.id;
+ }
+
+
+}
diff --git a/usecaseui-portal/src/app/performance/performance.component.css b/usecaseui-portal/src/app/performance/performance.component.css
new file mode 100644
index 00000000..cf63a829
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance.component.css
@@ -0,0 +1,26 @@
+/*
+ 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;
+}
diff --git a/usecaseui-portal/src/app/performance/performance.component.html b/usecaseui-portal/src/app/performance/performance.component.html
new file mode 100644
index 00000000..c092e876
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance.component.html
@@ -0,0 +1,17 @@
+<!--
+ 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.
+-->
+<h3 class="title"> Performance </h3>
+<hr>
diff --git a/usecaseui-portal/src/app/performance/performance.component.less b/usecaseui-portal/src/app/performance/performance.component.less
new file mode 100644
index 00000000..2b1949a5
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance.component.less
@@ -0,0 +1,11 @@
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 20px;
+}
diff --git a/usecaseui-portal/src/app/performance/performance.component.spec.ts b/usecaseui-portal/src/app/performance/performance.component.spec.ts
new file mode 100644
index 00000000..1bdc919d
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformanceComponent } from './performance.component';
+
+describe('PerformanceComponent', () => {
+ let component: PerformanceComponent;
+ let fixture: ComponentFixture<PerformanceComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PerformanceComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PerformanceComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/performance/performance.component.ts b/usecaseui-portal/src/app/performance/performance.component.ts
new file mode 100644
index 00000000..12405e9e
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-performance',
+ templateUrl: './performance.component.html',
+ styleUrls: ['./performance.component.less']
+})
+export class PerformanceComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+
+ }
+
+}
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
new file mode 100644
index 00000000..a1cc6455
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
@@ -0,0 +1,59 @@
+/*
+ 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;
+}
+.list {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 10px;
+}
+.list nz-table tbody td span.onboarding {
+ font-size: 12px;
+ color: #147dc2;
+}
+.list nz-table tbody td span.onboarded {
+ font-size: 14px;
+ color: #147dc2;
+}
+.list nz-table tbody td span.updating {
+ font-size: 12px;
+ color: blue;
+}
+.list nz-table tbody td span.deleting {
+ font-size: 12px;
+ color: red;
+}
+.list nz-table tbody td span.invalid {
+ font-size: 14px;
+ color: purple;
+}
+.list nz-table tbody td i.anticon {
+ cursor: pointer;
+ font-size: 18px;
+ padding: 2px;
+}
+.list nz-table tbody td i.anticon:hover {
+ color: #147dc2;
+}
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
new file mode 100644
index 00000000..d5286a3a
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -0,0 +1,61 @@
+<!--
+ 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.
+-->
+<h3 class="title"> Onboard VNF </h3>
+<hr>
+<div class="list">
+ <nz-table #nzTable [nzData]="tableData"
+ nzShowSizeChanger
+ [nzFrontPagination]="false"
+ [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]"
+ [nzTotal]= 'total'
+ [(nzPageSize)]="pageSize"
+ [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading"
+ nzSize="middle"
+ (nzPageIndexChange)="searchData()"
+ (nzPageSizeChange)="searchData(true)">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
+ <th nzWidth="20%">Type</th>
+ <th nzWidth="15%">Version</th>
+ <th nzWidth="20%">Status</th>
+ <th nzWidth="15%">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.type}}</td>
+ <td>{{item.version}}</td>
+ <td>
+ <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+ 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+ <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+ </td>
+ <td>
+ <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i>
+ <i class="anticon anticon-delete" (click)="deleteService()"></i>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+</div> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
new file mode 100644
index 00000000..ab118737
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
@@ -0,0 +1,50 @@
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 20px;
+}
+.list {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 10px;
+ nz-table {
+ tbody {
+ td {
+ span.onboarding {
+ font-size: 12px;
+ color: #147dc2;
+ }
+ span.onboarded {
+ font-size: 14px;
+ color: #147dc2;
+ }
+ span.updating {
+ font-size: 12px;
+ color: blue;
+ }
+ span.deleting {
+ font-size: 12px;
+ color: red;
+ }
+ span.invalid {
+ font-size: 14px;
+ color: purple;
+ }
+ i.anticon {
+ cursor: pointer;
+ font-size: 18px;
+ padding: 2px;
+ &:hover{
+ color: #147dc2;
+ }
+ }
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
new file mode 100644
index 00000000..0e49f656
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OnboardVnfVmComponent } from './onboard-vnf-vm.component';
+
+describe('OnboardVnfVmComponent', () => {
+ let component: OnboardVnfVmComponent;
+ let fixture: ComponentFixture<OnboardVnfVmComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ OnboardVnfVmComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(OnboardVnfVmComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
new file mode 100644
index 00000000..c42b3ce3
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { MyhttpService } from '../../myhttp.service';
+import { slideToRight } from '../../animates';
+
+@Component({
+ selector: 'app-onboard-vnf-vm',
+ templateUrl: './onboard-vnf-vm.component.html',
+ styleUrls: ['./onboard-vnf-vm.component.less'],
+ animations: [ slideToRight ]
+})
+export class OnboardVnfVmComponent implements OnInit {
+ @HostBinding('@routerAnimate') routerAnimateState;
+ constructor(private myhttp: MyhttpService) { }
+
+ ngOnInit() {
+ this.getTableData();
+ }
+
+
+ //表格数据
+ tableData = [];
+ pageIndex = 1;
+ pageSize = 10;
+ total = 100;
+ loading = false;
+ sortName = null;
+ sortValue = null;
+ getTableData(){
+ // 查询参数: 当前页码,每页条数,排序方式
+ let paramsObj = {
+ pageIndex:this.pageIndex,
+ pageSize:this.pageSize,
+ nameSort:this.sortValue
+ }
+ this.myhttp.getOnboardTableData(paramsObj)
+ .subscribe((data)=>{
+ console.log(data);
+ this.total = data.body.total;
+ this.tableData = data.body.tableList;
+ },(err)=>{
+ console.log(err);
+ })
+ }
+ sort(sort: { key: string, value: string }): void {
+ console.log(sort);
+ this.sortName = sort.key;
+ this.sortValue = sort.value;
+ this.getTableData();
+ }
+ searchData(reset:boolean = false){
+ console.log(reset)
+ this.getTableData();
+ }
+ updataService(){
+ console.log("updataService!");
+ }
+ deleteService(){
+ console.log("deleteService!");
+ }
+
+}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css
new file mode 100644
index 00000000..eaf8fddb
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.css
@@ -0,0 +1,132 @@
+/*
+ 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;
+}
+.action {
+ margin-bottom: 20px;
+}
+.action span {
+ display: inline-block;
+ font: 700 14px "Arial";
+ color: #4c5e70;
+}
+.action nz-dropdown {
+ vertical-align: middle;
+}
+.action nz-dropdown :hover {
+ border-color: #147dc2;
+}
+.action nz-dropdown button {
+ width: 165px;
+ height: 30px;
+ background-color: #eceff4;
+ text-align: left;
+ border-color: #9fa9ab;
+}
+.action nz-dropdown button span {
+ font-weight: 400;
+ display: inline-block;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-top: 2px;
+}
+.action nz-dropdown button i {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+.action .create {
+ float: right;
+ height: 30px;
+ padding: 0 10px;
+}
+.action .create span {
+ color: #fff;
+ font-weight: 400;
+}
+.list {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 10px;
+}
+.list nz-table tbody td span.active {
+ font-size: 14px;
+ color: #147dc2;
+}
+.list nz-table tbody td span.closed {
+ font-size: 14px;
+ color: red;
+}
+.list nz-table tbody td span.onboarding {
+ font-size: 12px;
+ color: #147dc2;
+}
+.list nz-table tbody td span.updating {
+ font-size: 12px;
+ color: blue;
+}
+.list nz-table tbody td span.deleting {
+ font-size: 12px;
+ color: red;
+}
+.list nz-table tbody td span.creating {
+ font-size: 12px;
+ color: green;
+}
+.list nz-table tbody td i.anticon {
+ cursor: pointer;
+ font-size: 18px;
+ padding: 2px;
+}
+.list nz-table tbody td i.anticon:hover {
+ color: #147dc2;
+}
+.list nz-table tbody tr.childtr td {
+ font-size: 12px;
+ color: #147dc2;
+}
+.detailComponent {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100vh;
+ background-color: #f3f3f3;
+ overflow-y: auto;
+ padding: 20px 32px;
+ z-index: 3;
+}
+.createComponent {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100vh;
+ background-color: #f3f3f3;
+ overflow-y: auto;
+ padding: 20px 32px;
+ z-index: 3;
+}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
new file mode 100644
index 00000000..e0866524
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -0,0 +1,185 @@
+<!--
+ 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.
+-->
+<h3 class="title"> Services List </h3>
+<hr>
+<div class="action">
+ <span>Customer: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu style="max-height: 200px; overflow: auto;">
+ <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
+ <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+
+ &nbsp;&nbsp;
+ <span>Service Type: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu style="max-height: 200px; overflow: auto;">
+ <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
+ <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+
+ <button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
+ <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
+ <p>Content one</p>
+ <p>Content two</p>
+ <p>Content three</p>
+ </nz-modal>
+ <button class="create" nz-button [nzType]="'primary'" (click)="showModal2()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
+ <nz-modal [(nzVisible)]="isVisible2" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk2()">
+ <span style="display:inline-block;width:70px;">Service: </span>
+ <nz-select style="width: 165px;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()">
+ <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> -->
+ <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option>
+ <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option>
+ </nz-select>
+
+ <hr>
+ <span>SOTN VPN: </span>
+ <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear >
+ <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+ </nz-select>
+
+ <span> SITE: </span>
+ <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear >
+ <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+ </nz-select>
+
+ <div *ngIf="templateTypeSelected == 'CCVPN'">
+ <br>
+ <span style="display:inline-block;width:70px;">SD-WAN: </span>
+ <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear >
+ <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+ </nz-select>
+ </div>
+ </nz-modal>
+</div>
+<div class="list">
+ <nz-table *ngIf="1"
+ #nzTable [nzData]="tableData"
+ nzShowSizeChanger
+ [nzFrontPagination]="false"
+ [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]"
+ [nzTotal]= 'total'
+ [(nzPageSize)]="pageSize"
+ [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading"
+ [nzSize]="'middle'"
+ [nzScroll]="{ y: '58vh' }"
+ (nzPageIndexChange)="searchData()"
+ (nzPageSizeChange)="searchData(true)">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="5%"></th>
+ <th nzWidth="20%" nzShowSort nzSortKey="name">Service Instance Id</th>
+ <th nzWidth="20%">Name</th>
+ <th nzWidth="15%">Type</th>
+ <th nzWidth="20%">Status</th>
+ <th nzWidth="15%">Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
+ <tr>
+ <td>{{i+1}}</td>
+ <td [nzShowExpand]="data.children[0]" [(nzExpand)]="data.expand"></td>
+ <td>{{data.serviceId}}</td>
+ <td>{{data.name}}</td>
+ <td>{{data.type}}</td>
+ <td>
+ <span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
+ 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status}}</span>
+ <nz-progress *ngIf="data.status!='Active' && data.status!='Closed'" [nzPercent]="data.progress"></nz-progress>
+ </td>
+ <td>
+ <i class="anticon anticon-setting" (click)="scaleService()"></i>
+ <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i>
+ <i class="anticon anticon-delete" (click)="deleteService()"></i>
+ </td>
+ </tr>
+ <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.children">
+ <td></td>
+ <td></td>
+ <td>{{item.serviceId}}</td>
+ <td>{{item.name}}</td>
+ <td colspan="3">{{item.type}}</td>
+ </tr>
+ </ng-template>
+ </tbody>
+ </nz-table>
+ <nz-table *ngIf="1"
+ #nzTable2 [nzData]="tableData2"
+ nzShowSizeChanger
+ [nzFrontPagination]="true"
+ [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]"
+ [(nzPageSize)]="pageSize"
+ [(nzPageIndex)]='pageIndex'
+ nzSize="middle"
+ [nzScroll]="{ y: '58vh' }">
+ <thead nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO.</th>
+ <th nzWidth="20%"> Instance ID </th>
+ <th nzWidth="20%">Instance Name</th>
+ <!-- <th nzWidth="10%">Type</th> -->
+ <th nzWidth="25%">Description</th>
+ <th nzWidth="15%">Status</th>
+ <th nzWidth="10%">Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="nzTable2.data" let-i="index"> -->
+ <tr *ngFor="let item of nzTable2.data; let i = index; ">
+ <td>{{pageSize*(pageIndex-1) + i+1}}</td>
+ <td>{{item.sotnvpnSer['service-instance-id']}}</td>
+ <td>{{item.sotnvpnSer['service-instance-name']}}</td>
+ <!-- <td>{{item.type}}</td> -->
+ <td>{{item.sotnvpnSer.description}}</td>
+ <td>
+ <span *ngIf="item.sotnvpnSer.status!='creating' && item.sotnvpnSer.status!='deleting'">{{item.sotnvpnSer.status}}</span>
+ <span *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [ngClass]="{'deleting':item.sotnvpnSer.status=='deleting','creating':item.sotnvpnSer.status=='creating'}">{{item.sotnvpnSer.status}}</span>
+ <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress>
+ </td>
+ <td>
+ <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
+ (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
+ <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
+ (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+</div>
+
+<div class="detailComponent" *ngIf="detailshow">
+ <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData" (closeDetail)="detailshow = false;"></app-ccvpn-detail>
+</div>
+<div class="createComponent" *ngIf="createshow">
+ <app-ccvpn-creation
+ [createParams]="createData"
+ [namesTranslate]="namesTranslate"
+ (closeCreate)="closeCreate($event)">
+ </app-ccvpn-creation>
+</div>
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
new file mode 100644
index 00000000..7e8ff80e
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -0,0 +1,127 @@
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 20px;
+}
+.action {
+ margin-bottom: 20px;
+ 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中额外临时生成的
+ }
+ .create {
+ float: right;
+ height: 30px;
+ padding: 0 10px;
+ span {
+ color: #fff;
+ font-weight: 400;
+ }
+ }
+}
+.list {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 10px;
+ nz-table {
+ tbody {
+ td {
+ span.active {
+ font-size: 14px;
+ color: #147dc2;
+ }
+ span.closed {
+ font-size: 14px;
+ color: red;
+ }
+ span.onboarding{
+ font-size: 12px;
+ color: #147dc2;
+ }
+ span.updating{
+ font-size: 12px;
+ color: blue;
+ }
+ span.deleting {
+ font-size: 12px;
+ color: red;
+ }
+ span.creating {
+ font-size: 12px;
+ color: green;
+ }
+ i.anticon {
+ cursor: pointer;
+ font-size: 18px;
+ padding: 2px;
+ &:hover{
+ color: #147dc2;
+ }
+ }
+ }
+ tr.childtr {
+ td {
+ font-size: 12px;
+ color: #147dc2;
+ }
+ }
+ }
+ }
+}
+
+.detailComponent {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100vh;
+ background-color: #f3f3f3;
+ overflow-y: auto;
+ padding: 20px 32px;
+ z-index: 3;
+}
+.createComponent {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100vh;
+ background-color: #f3f3f3;
+ overflow-y: auto;
+ padding: 20px 32px;
+ z-index: 3;
+}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts
new file mode 100644
index 00000000..61440dc3
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicesListComponent } from './services-list.component';
+
+describe('ServicesListComponent', () => {
+ let component: ServicesListComponent;
+ let fixture: ComponentFixture<ServicesListComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ServicesListComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ServicesListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
new file mode 100644
index 00000000..d893070d
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -0,0 +1,511 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { MyhttpService } from '../../myhttp.service';
+import { slideToRight } from '../../animates';
+import { NzModalService } from 'ng-zorro-antd';
+
+@Component({
+ selector: 'app-services-list',
+ templateUrl: './services-list.component.html',
+ styleUrls: ['./services-list.component.less'],
+ animations: [ slideToRight ]
+})
+export class ServicesListComponent implements OnInit {
+ @HostBinding('@routerAnimate') routerAnimateState;
+ constructor(private myhttp: MyhttpService, private modalService: NzModalService) { }
+
+ ngOnInit() {
+ this.getallCustomers();
+ this.getTemplateSubTypes();
+ this.inputNamests();
+ }
+ // 筛选框(下拉框)customer servicetype
+ customerList = [];
+ customerSelected = {name:null,id:null};
+ serviceTypeList = [];
+ serviceTypeSelected = {name:null,id:null};
+
+ // 获取所有customer
+ getallCustomers(){
+ this.myhttp.getAllCustomers()
+ .subscribe((data)=>{
+ this.customerList = data.map((item)=>{return {name:item["subscriber-name"],id:item["global-customer-id"]}});
+ this.customerSelected = this.customerList[0];
+ this.choseCustomer(this.customerSelected);
+ // console.log(this.customers)
+ })
+ }
+
+ choseCustomer(item){
+ this.customerSelected = item;
+ this.myhttp.getServiceTypes(this.customerSelected)
+ .subscribe((data)=>{
+ this.serviceTypeList = data.map((item)=>{return {name:item["service-type"]}});
+ this.serviceTypeSelected = this.serviceTypeList[0];
+ this.choseServiceType(this.serviceTypeSelected);
+ // console.log(this.listServiceTypes);
+ })
+ }
+ choseServiceType(item){
+ this.serviceTypeSelected = item;
+ this.getTableData();
+ }
+
+ // 模态框(对话框) create
+ isVisible = false;
+ showModal(): void {
+ this.isVisible = true;
+ }
+ handleOk(): void {
+ console.log('Button ok clicked!');
+ this.isVisible = false;
+ }
+ handleCancel(): void {
+ console.log('Button cancel clicked!');
+ this.isVisible = false;
+ this.isVisible2 = false;
+ }
+
+ // 创建模态框2(对话框) create -------------------------------
+ isVisible2 = false;
+ showModal2(): void {
+ this.isVisible2 = true;
+ this.templates1 = []; //多次创建会push累积名字,从新置空
+ this.templates2 = [];
+ this.templates3 = [];
+ this.getAlltemplates();
+ }
+ // 服务
+ templateTypeSelected = "SOTN";
+ choseTemplateType(){
+ // this.filterTemplates();//分类
+ }
+ // 模板
+ templates = []; templates1;templates2;templates3;
+ template1={name:null};
+ template2={name:null};
+ template3={name:null};
+ // 模板分类数据,创建、获取实例分类共用
+ templateSubTypes = {}; //子类,sotnvpn、site、sdwan
+ getTemplateSubTypes(){
+ this.myhttp.getServicesCategory()
+ .subscribe((data)=>{
+ this.templateSubTypes = data;
+ },(err)=>{
+ console.log("getTemplateTypes err")
+ })
+ }
+
+ getAlltemplates(){ //获取所有模板类型
+ this.myhttp.getAllServiceTemplates()
+ .subscribe((data)=>{
+ console.log(data)
+ this.templates = data;
+ this.template1 = data[0];
+ this.template2 = data[1];
+ this.template3 = data[2];
+ // this.filterTemplates();//分类
+ },(err)=>{
+
+ })
+ }
+ // filterTemplates(){ //模板类型分类,本地配置文件
+ // this.templates1 = [];
+ // this.templates2 = [];
+ // this.templates3 = [];
+ // this.templates.forEach((item)=>{
+ // this.templateSubTypes[this.templateTypeSelected].sotnvpn.find((d)=>{
+ // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID
+ // })?this.templates1.push(item):null;
+ // this.templateSubTypes[this.templateTypeSelected].site.find((d)=>{
+ // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID
+ // })?this.templates2.push(item):null;
+ // if(this.templateTypeSelected=="CCVPN"){
+ // this.templateSubTypes[this.templateTypeSelected].sdwan.find((d)=>{
+ // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID
+ // })?this.templates3.push(item):null;
+ // }
+ // })
+ // this.template1 = this.templates1[0];
+ // this.template2 = this.templates2[0];
+ // if(this.templates3[0]){
+ // this.template3 = this.templates3[0];
+ // }
+ // }
+
+
+ // 确定、取消
+ createshow = false;
+ createData:Object={};
+ handleOk2(): void {
+ console.log('Button ok clicked!');
+ this.isVisible2 = false;
+ let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}};
+ let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}};
+
+ this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2;
+ this.createshow = true;
+ }
+ // handleCancel(): void {
+ // console.log('Button cancel clicked!');
+ // this.isVisible2 = false;
+ // }
+
+
+ //表格数据
+ tableData = [];
+ pageIndex = 1;
+ pageSize = 10;
+ total = 100;
+ loading = false;
+ sortName = null;
+ sortValue = null;
+ getTableData(){
+ // 查询参数: customer serviceType 当前页码,每页条数,排序方式
+ let paramsObj = {
+ customer:this.customerSelected,
+ serviceType:this.serviceTypeSelected,
+ pageIndex:this.pageIndex,
+ pageSize:this.pageSize,
+ serviceIdSort:this.sortValue
+ }
+ this.myhttp.getServicesTableData(paramsObj)
+ .subscribe((data)=>{
+ console.log(data);
+ this.total = data.body.total;
+ this.tableData = data.body.tableList;
+ },(err)=>{
+ console.log(err);
+ })
+ }
+ sort(sort: { key: string, value: string }): void {
+ console.log(sort);
+ this.sortName = sort.key;
+ this.sortValue = sort.value;
+ this.getTableData();
+ }
+ searchData(reset:boolean = false){
+ console.log(reset)
+ this.getTableData();
+ }
+
+ scaleService(){
+ console.log("scaleService!");
+ }
+ updataService(){
+ console.log("updataService!");
+ }
+ deleteService(){
+ console.log("deleteService!");
+ }
+
+ //表格数据
+ tableData2 = [];
+ getTableData2(){
+ let params = {
+ customerId:this.customerSelected.id,
+ serviceType:this.serviceTypeSelected
+ }
+ this.myhttp.getInstanceTableData(params)
+ .subscribe((data)=>{
+ this.pageIndex = 1;
+ this.tableData2 = [];
+ console.log(data)
+ // data.results.forEach((item)=>{
+ // item["sotnvpnSer"] = item["service-subscription"]["service-instances"]["service-instance"].find((d)=>{
+ // return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{
+ // return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
+ // })?item["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{
+ // return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
+ // })?item["Type"]="CCVPN":null
+ // })
+
+ // if(item["sotnvpnSer"]){
+ // this.tableData2.push(item);
+ // }
+ // })
+
+ //---------数据结构有问题,模拟只有一组数据情况---------//
+ data["sotnvpnSer"] = data["service-instance"].find((d)=>{
+ return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{
+ return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
+ })?d["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{
+ return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
+ })?d["Type"]="CCVPN":null
+ })
+ let inputParams = JSON.parse(data["sotnvpnSer"]["input-parameters"]).service.parameters.requestInputs;
+ let descriptionName = Object.keys(inputParams).find((item)=>{ return item.endsWith("_description")});
+ data["sotnvpnSer"]["description"] = inputParams[descriptionName];
+ data["sotnvpnSer"]["status"] = "Active";
+ this.tableData2.push(data);
+
+ console.log(this.tableData2)
+ },(err)=>{
+ console.log(err);
+ })
+ }
+
+ // 显示详情
+ detailshow = false;
+ detailData:Object;
+ showDetail(service){
+ service["siteSer"]=[];
+ service["sdwanSer"]=[];
+ service["customer"]=this.customerSelected;
+ service["serviceType"] = this.serviceTypeSelected;
+ // service["service-subscription"]["service-instances"]["service-instance"].forEach((item)=>{
+ // this.templateSubTypes[service.Type].site.find((d)=>{
+ // return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
+ // })?service["siteSer"].push(item):null;
+ // if(service.Type=="CCVPN"){
+ // this.templateSubTypes[service.Type].sdwan.find((d)=>{
+ // return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
+ // })?service["sdwanSer"].push(item):null;
+ // }
+ // })
+ service["service-instance"].forEach((item)=>{
+ this.templateSubTypes[service.sotnvpnSer.Type].site.find((d)=>{
+ return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
+ })?service["siteSer"].push(item):null;
+ if(service.sotnvpnSer.Type=="CCVPN"){
+ this.templateSubTypes[service.sotnvpnSer.Type].sdwan.find((d)=>{
+ return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
+ })?service["sdwanSer"].push(item):null;
+ }
+ })
+ this.detailshow = true;
+ this.detailData = service;
+ console.log(service);
+ }
+ // 删除 确认模态框
+ deleteInstace(service){
+ // 创建确认框
+ this.modalService.confirm({
+ nzTitle : 'Are you sure delete this instance?',
+ nzContent : `Instance ID: <b class="deleteModelContent"> ${service.sotnvpnSer["service-instance-id"]}</b>`,
+ nzOkText : 'Yes',
+ nzOkType : 'danger',
+ nzOnOk : () => {
+ console.log(service);
+ let allprogress = {}; //所有进度值,以operationId为键
+ let querypros = []; //所有查询
+ service.sotnvpnSer.rate = 0;
+ service.sotnvpnSer.status = "deleting";
+ // let deletePros = service["service-subscription"]["service-instances"]["service-instance"].map((item)=>{
+ // let id = item["service-instance-id"];
+ // return new Promise((res,rej)=>{
+ // this.myhttp.deleteInstance(id)
+ // .subscribe((data)=>{
+ // let obj = {serviceId:id,operationId:data.operationId}
+ // let updata = (prodata)=>{
+ // allprogress[prodata.operationId] = prodata.progress;
+ // let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
+ // service.sotnvpnSer["rate"]=average;
+ // }
+ // querypros.push(this.queryProgress(obj,updata));
+ // res();
+ // })
+ // })
+ // })
+ let deletePros = service["service-instance"].map((item)=>{
+ let params = {
+ globalSubscriberId:this.customerSelected.id,
+ serviceType:this.serviceTypeSelected,
+ serviceInstanceId:item["service-instance-id"]
+ }
+ return new Promise((res,rej)=>{
+ this.myhttp.deleteInstance(params)
+ .subscribe((data)=>{
+ let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId}
+ let updata = (prodata)=>{
+ allprogress[prodata.operationId] = prodata.progress;
+ let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
+ service.sotnvpnSer["rate"]=average;
+ }
+ querypros.push(this.queryProgress(obj,updata));
+ res();
+ })
+ })
+ })
+ console.log(deletePros)
+ Promise.all(deletePros).then(()=>{
+ Promise.all(querypros).then((data)=>{
+ console.log(data);
+ service.sotnvpnSer.rate = 100;
+ service.sotnvpnSer.status = "deleted";
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ })
+ })
+
+ },
+ nzCancelText: 'No',
+ nzOnCancel : () => console.log('Cancel')
+ });
+ }
+
+
+ closeCreate(obj){
+ if(!obj){
+ this.createshow = false; //关闭创建窗口
+ return false;
+ }
+ this.createshow = false; //关闭创建窗口
+ console.log(obj);
+ let newData; //主表格中新创建的服务数据
+ let stageNum = 0; //不同阶段进度,用于后续服务进度相加;
+ // --------------------------------------------------------------------------
+ // obj.groupbody.map((group)=>{ //所有创建
+ // return this.createService(group)
+ // })
+ // obj.sitebody.map((group)=>{ //所有创建
+ // console.log(group)
+ // return this.createService(group)
+ // })
+ // -----------------------------------------------------------------------------
+ this.createService(obj.vpnbody).then((data)=>{
+ console.log(data)
+ newData = { //主表格中新创建的服务数据
+ 'service-instance-id':data["serviceId"],
+ 'service-instance-name':obj.vpnbody.service.name,
+ description:obj.vpnbody.service.description,
+ status:"creating",
+ rate:0,
+ }
+ this.tableData2 = [{sotnvpnSer:newData},...this.tableData2];
+ let updata = (prodata)=>{
+ newData.rate = Math.floor(prodata.progress/3);
+ }
+ let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
+ return this.queryProgress(queryParams,updata);
+ }).then((data)=>{
+ console.log(data);
+ stageNum = newData.rate; //阶段进度值更新;
+ let allprogress = {}; //所有进度值,以operationId为键
+ let querypros = []; //所有查询
+ let createPros = obj.groupbody.map((group)=>{ //所有创建
+ return this.createService(group).then((data)=>{
+ console.log(data);
+ let updata = (prodata)=>{
+ allprogress[prodata.operationId] = prodata.progress;
+ let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress))
+ newData.rate = Math.floor(average/3) + stageNum;
+ }
+ let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
+ querypros.push(this.queryProgress(queryParams,updata))
+ })
+ })
+
+ return new Promise((res)=>{
+ Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕
+ Promise.all(querypros).then((data)=>{
+ console.log(data);
+ res("site--begin");
+ })
+ })
+ })
+ }).then((data)=>{
+ console.log(data);
+ stageNum = newData.rate; //阶段进度值更新;
+ let allprogress = {};
+ let querypros = []; //所有查询
+ let createPros = obj.sitebody.map((group)=>{ //所有创建
+ return this.createService(group).then((data)=>{
+ console.log(data);
+ let updata = (prodata)=>{
+ allprogress[prodata.operationId] = prodata.progress;
+ let average =((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress))
+ newData.rate = Math.floor(average/3) + stageNum;
+ }
+ let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
+ querypros.push(this.queryProgress(queryParams,updata))
+ })
+ })
+ console.log(createPros);
+ Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕
+ Promise.all(querypros).then((data)=>{
+ console.log(data);
+ newData.rate = 100;
+ newData.status = "completed";
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ })
+ })
+ })
+
+ }
+
+ createService(params){
+ let mypromise = new Promise((res,rej)=>{
+ this.myhttp.createInstance(params)
+ .subscribe((data)=>{
+
+ res(data.service);
+ })
+ })
+ return mypromise;
+ }
+
+ queryProgress(obj,callback){
+ let mypromise = new Promise((res,rej)=>{
+ // let data = {
+ // operationStatus:{
+ // "operationId": "XXXXXX",
+ // "operation": "create|delete|update|scale",
+ // "result": "finished|error|processing",
+ // "reason": "",
+ // "userId": "",
+ // "operationContent": "Be creating pop.",
+ // "progress": 0,
+ // "operateAt": "",
+ // "finishedAt": ""
+ // }
+ // }
+ let requery = ()=>{
+ this.myhttp.getProgress(obj)
+ .subscribe((data)=>{
+ if(data.operationStatus.progress==undefined){
+ console.log(data);
+ setTimeout(()=>{
+ requery();
+ },5000)
+ return false;
+ }
+ if(data.operationStatus.progress < 100){
+ callback(data.operationStatus);
+ setTimeout(()=>{
+ requery();
+ },5000)
+ }else {
+ res(data.operationStatus);
+ }
+ })
+ // setTimeout(()=>{
+ // console.log(data.operationStatus.progress)
+ // data.operationStatus.progress++;
+ // if(data.operationStatus.progress<100){
+ // callback(data.operationStatus);
+ // requery()
+ // }else{
+ // callback(data.operationStatus);
+ // res(data.operationStatus)
+ // }
+ // },100)
+ }
+ requery();
+ })
+ return mypromise;
+ }
+
+
+ // 名字转换参数匹配 --> 传给子组件用
+ namesTranslate:Object;
+ inputNamests(){
+ this.myhttp.inputNamesTransform()
+ .subscribe((data)=>{
+ this.namesTranslate = data;
+ })
+ }
+
+}
diff --git a/usecaseui-portal/src/app/services/services.component.html b/usecaseui-portal/src/app/services/services.component.html
new file mode 100644
index 00000000..c4fddfc0
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services.component.html
@@ -0,0 +1,18 @@
+<!--
+ 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.
+-->
+<p>
+ services works!
+</p>
diff --git a/usecaseui-portal/src/app/services/services.component.less b/usecaseui-portal/src/app/services/services.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services.component.less
diff --git a/usecaseui-portal/src/app/services/services.component.spec.ts b/usecaseui-portal/src/app/services/services.component.spec.ts
new file mode 100644
index 00000000..2e76b9f9
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicesComponent } from './services.component';
+
+describe('ServicesComponent', () => {
+ let component: ServicesComponent;
+ let fixture: ComponentFixture<ServicesComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ServicesComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ServicesComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/services/services.component.ts b/usecaseui-portal/src/app/services/services.component.ts
new file mode 100644
index 00000000..eec235b4
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-services',
+ templateUrl: './services.component.html',
+ styleUrls: ['./services.component.less']
+})
+export class ServicesComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json
new file mode 100644
index 00000000..9b191f8e
--- /dev/null
+++ b/usecaseui-portal/src/assets/i18n/en.json
@@ -0,0 +1,22 @@
+{
+ "Language":"--:",
+ "zh":"Chinese",
+ "en":"English",
+
+ "app-component":"--:",
+ "Home":"Home",
+ "Services":"Services",
+ "Services List":"Services List",
+ "Alarm":"Alarm",
+ "Performance":"Performance",
+ "Monitor":"Monitor",
+ "Network":"Network",
+
+ "home-component":"--:",
+ "Overall trend":"Overall trend",
+ "SERVICES":"SERVICES",
+ "services":"services",
+ "services has been created":"services has been created",
+ "PERFORMANCE":"PERFORMANCE",
+ "VM Performance":"VM Performance"
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/i18n/zh.json b/usecaseui-portal/src/assets/i18n/zh.json
new file mode 100644
index 00000000..c360c822
--- /dev/null
+++ b/usecaseui-portal/src/assets/i18n/zh.json
@@ -0,0 +1,22 @@
+{
+ "Language":"--:",
+ "zh":"中文",
+ "en":"英文",
+
+ "app-component":"--:",
+ "Home":"首页",
+ "Services":"服务",
+ "Services List":"服务列表",
+ "Alarm":"告警",
+ "Monitor":"监控",
+ "Performance":"性能",
+ "Network":"网云",
+
+ "home-component":"--:",
+ "Overall trend":"总体趋势",
+ "SERVICES":"服务",
+ "services":"条服务",
+ "services has been created":"条已创建的服务",
+ "PERFORMANCE":"性能",
+ "VM Performance":"VM 性能"
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/images/VM.png b/usecaseui-portal/src/assets/images/VM.png
new file mode 100644
index 00000000..72b31a5d
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/VM.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/VNF.png b/usecaseui-portal/src/assets/images/VNF.png
new file mode 100644
index 00000000..21b64db0
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/VNF.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/VNF1.png b/usecaseui-portal/src/assets/images/VNF1.png
new file mode 100644
index 00000000..0d37bebe
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/VNF1.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/VNF2.png b/usecaseui-portal/src/assets/images/VNF2.png
new file mode 100644
index 00000000..70a43a7c
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/VNF2.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/VNF3.png b/usecaseui-portal/src/assets/images/VNF3.png
new file mode 100644
index 00000000..e5904344
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/VNF3.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/bigcloud.png b/usecaseui-portal/src/assets/images/bigcloud.png
new file mode 100644
index 00000000..23bf7375
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/bigcloud.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/cloud-city1.png b/usecaseui-portal/src/assets/images/cloud-city1.png
new file mode 100644
index 00000000..051f7749
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/cloud-city1.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/cloud-county1.png b/usecaseui-portal/src/assets/images/cloud-county1.png
new file mode 100644
index 00000000..feb6a4a8
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/cloud-county1.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/cloud-out.png b/usecaseui-portal/src/assets/images/cloud-out.png
new file mode 100644
index 00000000..aeec4fdd
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/cloud-out.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/cloud-site.png b/usecaseui-portal/src/assets/images/cloud-site.png
new file mode 100644
index 00000000..97db0518
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/cloud-site.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/domain.png b/usecaseui-portal/src/assets/images/domain.png
new file mode 100644
index 00000000..68027b23
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/domain.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/icon.png b/usecaseui-portal/src/assets/images/icon.png
new file mode 100644
index 00000000..3c6f04e4
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/icon.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/loading.gif b/usecaseui-portal/src/assets/images/loading.gif
new file mode 100644
index 00000000..57a6df2c
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/loading.gif
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/open-close.png b/usecaseui-portal/src/assets/images/open-close.png
new file mode 100644
index 00000000..27e8f305
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/open-close.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/open-close2.png b/usecaseui-portal/src/assets/images/open-close2.png
new file mode 100644
index 00000000..0dd00861
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/open-close2.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/out-domain.png b/usecaseui-portal/src/assets/images/out-domain.png
new file mode 100644
index 00000000..6bcdd552
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/out-domain.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/site.png b/usecaseui-portal/src/assets/images/site.png
new file mode 100644
index 00000000..b63bc2ee
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/site.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/tildeimg.png b/usecaseui-portal/src/assets/images/tildeimg.png
new file mode 100644
index 00000000..e39a315d
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/tildeimg.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/images/tp.png b/usecaseui-portal/src/assets/images/tp.png
new file mode 100644
index 00000000..9daf005b
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/tp.png
Binary files differ
diff --git a/usecaseui-portal/src/assets/json/LogicalLinksData.json b/usecaseui-portal/src/assets/json/LogicalLinksData.json
new file mode 100644
index 00000000..99487f9d
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/LogicalLinksData.json
@@ -0,0 +1,168 @@
+{
+ "logical-link": [
+ {
+ "link-name": "cross-link-1",
+ "in-maint": false,
+ "link-type": "cross-link",
+ "resource-version": "1536029865021",
+ "operational-status": "up",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "p-interface",
+ "relationship-label": "tosca.relationships.network.LinksTo",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf2000/p-interfaces/p-interface/nodeId-78.78.78.78-ltpId-1",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf2000"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "nodeId-78.78.78.78-ltpId-1"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ },
+ {
+ "related-to": "p-interface",
+ "relationship-label": "tosca.relationships.network.LinksTo",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-1",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf1000"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "nodeId-79.79.79.79-ltpId-1"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "link-name": "cross-link-3",
+ "in-maint": false,
+ "link-type": "cross-link",
+ "resource-version": "1536029865021",
+ "operational-status": "up",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "p-interface",
+ "relationship-label": "tosca.relationships.network.LinksTo",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf2000/p-interfaces/p-interface/nodeId-78.78.78.78-ltpId-3",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf2000"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "nodeId-78.78.78.78-ltpId-3"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ },
+ {
+ "related-to": "p-interface",
+ "relationship-label": "tosca.relationships.network.LinksTo",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-3",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf1000"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "nodeId-79.79.79.79-ltpId-3"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "link-name": "cross-link-2",
+ "in-maint": false,
+ "link-type": "cross-link",
+ "resource-version": "1536029865021",
+ "operational-status": "up",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "p-interface",
+ "relationship-label": "tosca.relationships.network.LinksTo",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf3000/p-interfaces/p-interface/nodeId-80.80.80.80-ltpId-1",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf3000"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "nodeId-80.80.80.80-ltpId-1"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ },
+ {
+ "related-to": "p-interface",
+ "relationship-label": "tosca.relationships.network.LinksTo",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf-cloud/p-interfaces/p-interface/cloud-tp",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf-cloud"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "cloud-tp"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ },
+ {
+ "related-to": "ext-aai-network",
+ "relationship-label": "org.onap.relationships.inventory.BelongsTo",
+ "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/gongjie666",
+ "relationship-data": [
+ {
+ "relationship-key": "ext-aai-network.aai-id",
+ "relationship-value": "gongjie666"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ ]
+}
diff --git a/usecaseui-portal/src/assets/json/alarmFormData.json b/usecaseui-portal/src/assets/json/alarmFormData.json
new file mode 100644
index 00000000..fc97ae0c
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/alarmFormData.json
@@ -0,0 +1,371 @@
+{
+ "totalRecolds": 22,
+ "list": [
+ {
+ "id": 11,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-1001",
+ "sourceName": "shentao-test-1001",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1513630880000000",
+ "lastEpochMicroSec": "1513630880000000",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 12,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-1002",
+ "sourceName": "shentao-test-1002",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1513630880000000",
+ "lastEpochMicroSec": "1513630880000000",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 13,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-1003",
+ "sourceName": "shentao-test-1003",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1513630880000000",
+ "lastEpochMicroSec": "1513630880000000",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 14,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-2001",
+ "sourceName": "shentao-test-2001",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1513630880000000",
+ "lastEpochMicroSec": "1513630880000000",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 15,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-2002",
+ "sourceName": "shentao-test-2002",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1513630880000000",
+ "lastEpochMicroSec": "1513630880000000",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 16,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-2003",
+ "sourceName": "shentao-test-2003",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1513630880000000",
+ "lastEpochMicroSec": "1513630880000000",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 17,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-2004",
+ "sourceName": "vnf_a_1",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1516784364860",
+ "lastEpochMicroSec": "1516784364860",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 18,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-2005",
+ "sourceName": "shentao-test-2005",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1516784364860",
+ "lastEpochMicroSec": "1516784364860",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 19,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-3001",
+ "sourceName": "shentao-test-3001",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1516784364860",
+ "lastEpochMicroSec": "1516784364860",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 20,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-3003",
+ "sourceName": "vnf_a_3",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1516784364860",
+ "lastEpochMicroSec": "1516784364860",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 21,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailureCleared",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "shentao-test-3004",
+ "sourceName": "vnf_a_3",
+ "reportingEntityId": null,
+ "reportingEntityName": "Multi-Cloud",
+ "priority": "High",
+ "startEpochMicrosec": "1516784364860",
+ "lastEpochMicroSec": "1516784364860",
+ "startEpochMicrosecCleared": "112",
+ "lastEpochMicroSecCleared": "112",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ },
+ {
+ "id": 22,
+ "version": "3",
+ "eventName": "Fault_MultiCloud_VMFailure",
+ "domain": "fault",
+ "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015",
+ "eventType": null,
+ "nfcNamingCode": null,
+ "nfNamingCode": null,
+ "sourceId": "vnf_a_20180205_2",
+ "sourceName": "vnf_b_3",
+ "reportingEntityId": null,
+ "reportingEntityName": "vnf_a_20180205_2",
+ "priority": "High",
+ "startEpochMicrosec": "1516784364860",
+ "lastEpochMicroSec": "1516784364860",
+ "startEpochMicrosecCleared": "",
+ "lastEpochMicroSecCleared": "",
+ "sequence": "0",
+ "faultFieldsVersion": "2",
+ "eventServrity": "CRITICAL",
+ "eventSourceType": "other",
+ "eventCategory": null,
+ "alarmCondition": "Guest_Os_Failure",
+ "specificProblem": "Fault_MultiCloud_VMFailure",
+ "vfStatus": "Active",
+ "alarmInterfaceA": "aaaa",
+ "status": "active"
+ }
+ ],
+ "countActive": 12,
+ "reportingEntityNameList": [
+ "vnf_a_20180205_2",
+ "Multi-Cloud"
+ ],
+ "sourceNameList": [
+ "shentao-test-2001",
+ "shentao-test-3001",
+ "shentao-test-1001",
+ "shentao-test-2002",
+ "vnf_a_3",
+ "shentao-test-1002",
+ "shentao-test-2003",
+ "vnf_b_3",
+ "shentao-test-1003",
+ "vnf_a_1",
+ "shentao-test-2005"
+ ]
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/allotted-resources.json b/usecaseui-portal/src/assets/json/allotted-resources.json
new file mode 100644
index 00000000..0b39894c
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/allotted-resources.json
@@ -0,0 +1,122 @@
+{
+ "allotted-resource": [
+ {
+ "id": "1114feec-1aef-4890-abba-f8f3a906935f",
+ "description": "1114feec-1aef-4890-abba-f8f3a906935f",
+ "selflink": "",
+ "model-invariant-id": "f714feec-1aef-4890-abba-f8f3a906935f",
+ "model-version-id": "709919b7-75fd-4e49-8398-67853323ff55",
+ "resource-version": "1535708424249",
+ "orchestration-status": "",
+ "operational-status": "",
+ "type": "",
+ "role": "spoke",
+ "allotted-resource-name": "sdwan ar",
+ "access-provider-id": "",
+ "access-client-id": "",
+ "access-topology-id": "",
+ "access-node-id": "",
+ "access-ltp-id": "",
+ "cvlan": "",
+ "vpn-name": "SDWANVPNInfra",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "service-instance",
+ "relationship-label": "org.onap.relationships.inventory.Uses",
+ "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/35e88f8e-473f-4d88-92f8-6739a42baa23",
+ "relationship-data": [
+ {
+ "relationship-key": "customer.global-customer-id",
+ "relationship-value": "Democcy"
+ },
+ {
+ "relationship-key": "service-subscription.service-type",
+ "relationship-value": "CCVPN"
+ },
+ {
+ "relationship-key": "service-instance.service-instance-id",
+ "relationship-value": "35e88f8e-473f-4d88-92f8-6739a42baa23"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "service-instance.service-instance-name",
+ "property-value": "SDWANVPNInfra1"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "id": "aa14feec-1aef-4890-abba-f8f3a906935f",
+ "description": "aa14feec-1aef-4890-abba-f8f3a906935f",
+ "selflink": "",
+ "model-invariant-id": "97c4a3c6-2943-41af-8717-2f3183f944be",
+ "model-version-id": "44b777ee-9793-465d-8053-d8e86d2e2362",
+ "resource-version": "1536135116833",
+ "orchestration-status": "",
+ "operational-status": "",
+ "type": "",
+ "role": "",
+ "allotted-resource-name": "ston ar",
+ "access-provider-id": "1000",
+ "access-client-id": "3333",
+ "access-topology-id": "100",
+ "access-node-id": "10.10.10.10",
+ "access-ltp-id": "1",
+ "cvlan": "",
+ "vpn-name": "SOTNVPNInfra",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "service-instance",
+ "relationship-label": "org.onap.relationships.inventory.Uses",
+ "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0",
+ "relationship-data": [
+ {
+ "relationship-key": "customer.global-customer-id",
+ "relationship-value": "Democcy"
+ },
+ {
+ "relationship-key": "service-subscription.service-type",
+ "relationship-value": "CCVPN"
+ },
+ {
+ "relationship-key": "service-instance.service-instance-id",
+ "relationship-value": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "service-instance.service-instance-name",
+ "property-value": "SOTNVPNInfra"
+ }
+ ]
+ },
+ {
+ "related-to": "p-interface",
+ "relationship-label": "org.onap.relationships.inventory.Uses",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-2",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf1000"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "nodeId-79.79.79.79-ltpId-2"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ ]
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/allotted-resources2.json b/usecaseui-portal/src/assets/json/allotted-resources2.json
new file mode 100644
index 00000000..29262e5d
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/allotted-resources2.json
@@ -0,0 +1 @@
+{"allotted-resource":[{"id":"8beee9a7-abf0-4c98-8073-1d4d03e50033","description":"sdwan-attachment","selflink":"","model-invariant-id":"3d369bb8-5546-41d4-a3e7-a2557295ae40","model-version-id":"78ed8099-90a5-49b4-a400-89f38a7cbe6e","resource-version":"1537857961665","orchestration-status":"","operational-status":"","type":"","role":"spoke","allotted-resource-name":"sdwan ar","access-provider-id":"","access-client-id":"","access-topology-id":"","access-node-id":"","access-ltp-id":"","cvlan":"","vpn-name":"SDWANVPNInfra","relationship-list":{"relationship":[{"related-to":"service-instance","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/15e88f8e-473f-4d88-92f8-6739a42baa2g","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}],"related-to-property":[{"property-key":"service-instance.service-instance-name","property-value":"SDWANVPNInfra"}]}]}},{"id":"28f2b69e-c489-48fa-b974-166104eb15c9","description":"sotn-attachment","selflink":"","model-invariant-id":"d92ce7ca-ca87-4830-972e-83ae9857ded7","model-version-id":"3704879e-b07e-4a15-b8fd-f047f966a261","resource-version":"1537858263268","orchestration-status":"","operational-status":"","type":"","role":"spoke","allotted-resource-name":"sotn ar","access-provider-id":"","access-client-id":"","access-topology-id":"","access-node-id":"","access-ltp-id":"","cvlan":"","vpn-name":"SOTNVPNInfra","relationship-list":{"relationship":[{"related-to":"service-instance","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"service-instance.service-instance-name","property-value":"SOTNVPNInfra"}]},{"related-to":"p-interface","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/network/pnfs/pnf/11.11.11.11/p-interfaces/p-interface/nodeId-11.11.11.11-ltpId-36","relationship-data":[{"relationship-key":"pnf.pnf-name","relationship-value":"11.11.11.11"},{"relationship-key":"p-interface.interface-name","relationship-value":"nodeId-79.79.79.79-ltpId-2"}],"related-to-property":[{"property-key":"p-interface.prov-status"}]}]}}]} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/configuration_files/inputNamesTranslate.json b/usecaseui-portal/src/assets/json/configuration_files/inputNamesTranslate.json
new file mode 100644
index 00000000..9a91307f
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/configuration_files/inputNamesTranslate.json
@@ -0,0 +1,63 @@
+{
+ "sotnNameTranslate":{
+ "name":"sotnconnectivity_name",
+ "description":"sotnconnectivity_description",
+ "startTime":"sotnconnectivity_startTime",
+ "endTime":"sotnconnectivity_endTime",
+ "COS":"sotnconnectivity_COS",
+ "reroute":"sotnconnectivity_reroute",
+ "SLS":"sotnconnectivity_SLS",
+ "dualLink":"sotnconnectivity_dualLink",
+ "CIR":"sotnconnectivity_cir",
+ "EIR":"sotnconnectivity_eir",
+ "CBS":"sotnconnectivity_cbs",
+ "EBS":"sotnconnectivity_ebs",
+ "colorAware":"sotnconnectivity_colorAware",
+ "couplingFlag":"sotnconnectivity_couplingFlag"
+ },
+ "siteNameTranslate":{
+ "baseNames":{
+ "name":"site_name",
+ "description":"site_description",
+ "type":"site_type",
+ "role":"site_role",
+ "postcode":"site_postcode",
+ "address":"site_address",
+ "vlan":"sotncondition_cVLAN",
+ "sotnVpnName":"sotncondition_sotnVpnName",
+ "controlPoint":"site_controlPoint",
+ "groupRole":"sdwancondition_role",
+ "groupName":"sdwancondition_sdwanVpnName",
+ "emails":"site_emails",
+ "latitude":"site_latitude",
+ "longitude":"site_longitude",
+ "clientSignal":"sotncondition_clientSignal"
+ },
+ "cpeNames":{
+ "device_name":"device_name",
+ "device_version":"device_version",
+ "device_esn":"device_esn",
+ "device_class":"device_class",
+ "device_systemIp":"device_systemIp",
+ "device_vendor":"device_vendor",
+ "device_type":"device_type"
+ },
+ "wanportNames":{
+ "sitewanport_name":"sitewanport_name",
+ "sitewanport_deviceName":"sitewanport_deviceName",
+ "sitewanport_description":"sitewanport_description",
+ "sitewanport_portType":"sitewanport_portType",
+ "sitewanport_portNumber":"sitewanport_portNumber",
+ "sitewanport_ipAddress":"sitewanport_ipAddress",
+ "sitewanport_providerIpAddress":"sitewanport_providerIpAddress",
+ "sitewanport_transportNetworkName":"sitewanport_transportNetworkName",
+ "sitewanport_inputBandwidth":"sitewanport_inputBandwidth",
+ "sitewanport_outputBandwidth":"sitewanport_outputBandwidth"
+ }
+ },
+ "siteGroupNameTranslate":{
+ "name":"sdwanconnectivity_name",
+ "topology":"sdwanconnectivity_topology"
+ }
+
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/configuration_files/servicesCategory.json b/usecaseui-portal/src/assets/json/configuration_files/servicesCategory.json
new file mode 100644
index 00000000..574a8bb4
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/configuration_files/servicesCategory.json
@@ -0,0 +1,34 @@
+
+{
+ "SOTN":{
+ "sotnvpn":[
+ {"model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f","model-version-id": "4ca96a53-2e18-4297-8dc7-5776fdf6871b"}
+ ],
+ "site":[
+ {"model-invariant-id": "342ff5e8-5592-4455-a537-a81172c9d541","model-version-id": "ea8bb4d2-00ea-4aeb-ad76-20ac8cb1c99c"},
+ {"model-invariant-id": "a7029145-4294-4664-b619-00dc959a1ff6","model-version-id": "cb756ffb-8d91-49fb-86f7-12ceb2b13158"}
+ ]
+ },
+ "CCVPN":{
+ "sotnvpn":[
+ {"model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f","model-version-id": "54836196-c411-4690-af98-900c1c3aadd7"},
+ {"model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f","model-version-id": "4ca96a53-2e18-4297-8dc7-5776fdf6871b"},
+ {"model-invariant-id": "35661c6e-4a15-4990-8d8a-d247ddcf0110","model-version-id": "f38e13a7-6ba6-4f06-901d-02206faa2687"},
+ {"model-invariant-id": "bafa365f-4056-4ad3-a039-d6b3e3e0fd35","model-version-id": "fdbb8ddd-3325-4840-a156-9ad601b9366c"}
+ ],
+ "site":[
+ {"model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70","model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838"},
+ {"model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70","model-version-id": "4b4b3ef8-6747-4111-b9e0-81cf251c0068"},
+ {"model-invariant-id": "a7029145-4294-4664-b619-00dc959a1ff6","model-version-id": "cb756ffb-8d91-49fb-86f7-12ceb2b13158"},
+ {"model-invariant-id": "313abb16-d454-4a64-a39d-2ed4bb7713a3","model-version-id": "95f9c7aa-8a0e-4568-86f7-ab980a4556a1"},
+ {"model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974"}
+ ],
+ "sdwan":[
+ {"model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8","model-version-id": "462f84e5-f0e5-44c5-ab95-38fb4bf77064"},
+ {"model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8","model-version-id": "d0a4af63-570c-40b3-a26f-ef11366f0a03"},
+ {"model-invariant-id": "2cefdc20-a29d-4792-a151-3653a6a20d45","model-version-id": "a306b8d6-3873-46fe-921a-623e279d5548"},
+ {"model-invariant-id": "e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id": "20d9e7dc-f030-4230-af79-ba0bde7cbe2e"}
+ ]
+ }
+}
+
diff --git a/usecaseui-portal/src/assets/json/configuration_files/templateCategory.json b/usecaseui-portal/src/assets/json/configuration_files/templateCategory.json
new file mode 100644
index 00000000..dca42795
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/configuration_files/templateCategory.json
@@ -0,0 +1,6 @@
+{
+ "sotnvpntypes":["uuidxxx","uuidxxxx"],
+ "sitetypes":["uuidaaa","uuidaaaa"],
+ "sdwantypes":["uuidbbb","uuidbbbb"]
+}
+
diff --git a/usecaseui-portal/src/assets/json/createService.json b/usecaseui-portal/src/assets/json/createService.json
new file mode 100644
index 00000000..f1d64485
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/createService.json
@@ -0,0 +1,7 @@
+
+{
+ "service":{
+ "serviceId":"044377e5-3dd4-4f84-86a0-02dab3c43bc5",
+ "operationId":"1e606677-7864-4bec-b50c-adcd858e4cd8"
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/customers.json b/usecaseui-portal/src/assets/json/customers.json
new file mode 100644
index 00000000..9c66eff4
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/customers.json
@@ -0,0 +1,82 @@
+
+
+[
+ {
+ "global-customer-id": "Democcy",
+ "subscriber-name": "Democcy",
+ "subscriber-type": "INFRA",
+ "resource-version": "1535601196964"
+ },
+ {
+ "global-customer-id": "support",
+ "subscriber-name": "testccccccccsssssssssseeeeeeeeeee",
+ "subscriber-type": "CUST",
+ "resource-version": "1536069070995"
+ },
+ {
+ "global-customer-id": "Demonstration",
+ "subscriber-name": "Demonstration",
+ "subscriber-type": "INFRA",
+ "resource-version": "1535080521665"
+ },
+ {
+ "global-customer-id": "Orange",
+ "subscriber-name": "test",
+ "subscriber-type": "CUST",
+ "resource-version": "1535865156826"
+ },
+ {
+ "global-customer-id": "Orange5",
+ "subscriber-name": "test",
+ "subscriber-type": "CUST",
+ "resource-version": "1529978907607"
+ },
+ {
+ "global-customer-id": "wale",
+ "subscriber-name": "test",
+ "subscriber-type": "CUST",
+ "resource-version": "1536058660948"
+ },
+ {
+ "global-customer-id": "kiwi",
+ "subscriber-name": "test",
+ "subscriber-type": "CUST",
+ "resource-version": "1536042103511"
+ },
+ {
+ "global-customer-id": "Apple",
+ "subscriber-name": "test",
+ "subscriber-type": "CUST",
+ "resource-version": "1535971300786"
+ },
+ {
+ "global-customer-id": "Tiger",
+ "subscriber-name": "test",
+ "subscriber-type": "CUST",
+ "resource-version": "1535977578133"
+ },
+ {
+ "global-customer-id": "Deer",
+ "subscriber-name": "test",
+ "subscriber-type": "CUST",
+ "resource-version": "1535988232470"
+ },
+ {
+ "global-customer-id": "Bear",
+ "subscriber-name": "test",
+ "subscriber-type": "CUST",
+ "resource-version": "1536041229105"
+ },
+ {
+ "global-customer-id": "Panda",
+ "subscriber-name": "test",
+ "subscriber-type": "CUST",
+ "resource-version": "1536038628045"
+ },
+ {
+ "global-customer-id": "Lion",
+ "subscriber-name": "test",
+ "subscriber-type": "CUST",
+ "resource-version": "1535986050695"
+ }
+]
diff --git a/usecaseui-portal/src/assets/json/deleteService.json b/usecaseui-portal/src/assets/json/deleteService.json
new file mode 100644
index 00000000..19a7ab5e
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/deleteService.json
@@ -0,0 +1,4 @@
+
+{
+ "operationId":"1e606677-7864-4bec-b50c-adcd858e4cd8"
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/detailsData.json b/usecaseui-portal/src/assets/json/detailsData.json
new file mode 100644
index 00000000..41ee87b8
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/detailsData.json
@@ -0,0 +1,19 @@
+{
+ "sotnVpnInfo":{
+ "name":"xdwgwe","description":"hahahah",
+ "startTime":"2017-07-03","endTime":"2018-07-05",
+ "COS":"premium","reroute":"Yes",
+ "SLS":"sfsadf","dualLink":"Yes",
+ "CIR":"dafdafd","EIR":"sddddddd",
+ "CBS":"dafdaf","EBS":"qqqqqqqwwwwwww",
+ "colorAware":"Yes","couplingFlag":"No"
+ },
+ "siteList":[
+ {"name":"xiaoming","description":"congming","postcode":"xxxx","address":"beijing","sotnVpnName":"buzhid","vlan":"aaa"},
+ {"name":"xiaogang","description":"congming","postcode":"xxxx","address":"guangzhou","sotnVpnName":"buzhid","vlan":"aaa"}
+ ],
+ "siteGroupList":[
+ {"id":"123","name":"sssiy","topology":"hahahha","sites":"xxxxx","rloe":"eeexxxx"},
+ {"id":"3333","name":"sssiy","topology":"hahahha","sites":"xxxxx","rloe":"eeexxxx"}
+ ]
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/homeAllData.json b/usecaseui-portal/src/assets/json/homeAllData.json
new file mode 100644
index 00000000..ce4e5d6e
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/homeAllData.json
@@ -0,0 +1,23 @@
+{
+ "services":{
+ "number":200,
+ "chartdata":[
+ {"value":125, "name":"user1"},
+ {"value":290, "name":"user2"},
+ {"value":220, "name":"user3"}
+ ]
+ },
+ "performance":{
+ "per_Vnf":154,
+ "per_VmPm":325
+ },
+ "alarm":{
+ "chartdata":[
+ {"value":325,"name":"Active"},
+ {"value":200,"name":"Closed"}
+ ]
+ },
+ "Vm_performance":{
+ "names":["aaaaa","bbbbb","ccccc","ddddd","eeeee"]
+ }
+}
diff --git a/usecaseui-portal/src/assets/json/homePerformanceChartData.json b/usecaseui-portal/src/assets/json/homePerformanceChartData.json
new file mode 100644
index 00000000..c3848893
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/homePerformanceChartData.json
@@ -0,0 +1,4 @@
+{
+ "CPU":[30,43,24,32,34,35,42,62,52,35,34,33,43],
+ "Memory":[24,23,24,12,34,15,22,22,32,15,24,13,23]
+}
diff --git a/usecaseui-portal/src/assets/json/instanceTableData.json b/usecaseui-portal/src/assets/json/instanceTableData.json
new file mode 100644
index 00000000..73f12873
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/instanceTableData.json
@@ -0,0 +1,505 @@
+{
+ "service-instance": [
+ {
+ "service-instance-id": "35e88f8e-473f-4d88-92f8-6739a42baa23",
+ "service-instance-name": "SDWANVPNInfra1",
+ "service-type": "E2E Service",
+ "service-role": "E2E Service",
+ "model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8",
+ "model-version-id": "462f84e5-f0e5-44c5-ab95-38fb4bf77064",
+ "resource-version": "1535687551051",
+ "input-parameters": "{\n \"service\":{\n \"name\":\"SDWANVPNInfra\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"88dcb2f0-085b-4548-8b93-0882e37d25d8\",\n \"serviceUuid\":\"462f84e5-f0e5-44c5-ab95-38fb4bf77064\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"CMCCVPN\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "sdwan-vpn",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/sdwan-vpns/sdwan-vpn/4efe6dff-acfc-4d13-a3fd-1177d3c08e89",
+ "relationship-data": [
+ {
+ "relationship-key": "sdwan-vpn.sdwan-vpn-id",
+ "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e89"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "sdwan-vpn.sdwan-vpn-name",
+ "property-value": "vdfvpn"
+ }
+ ]
+ },
+ {
+ "related-to": "sp-partner",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d00",
+ "relationship-data": [
+ {
+ "relationship-key": "sp-partner.sp-partner-id",
+ "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d00"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "sp-partner.sp-partner-id",
+ "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d00"
+ }
+ ]
+ },
+ {
+ "related-to": "allotted-resource",
+ "relationship-label": "org.onap.relationships.inventory.Uses",
+ "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/189b87a5-72fe-4197-a307-6929c3831f81/allotted-resources/allotted-resource/2214feec-1aef-4890-abba-f8f3a906935f",
+ "relationship-data": [
+ {
+ "relationship-key": "customer.global-customer-id",
+ "relationship-value": "Democcy"
+ },
+ {
+ "relationship-key": "service-subscription.service-type",
+ "relationship-value": "CCVPN"
+ },
+ {
+ "relationship-key": "service-instance.service-instance-id",
+ "relationship-value": "189b87a5-72fe-4197-a307-6929c3831f81"
+ },
+ {
+ "relationship-key": "allotted-resource.id",
+ "relationship-value": "2214feec-1aef-4890-abba-f8f3a906935f"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "allotted-resource.description",
+ "property-value": "2214feec-1aef-4890-abba-f8f3a906935f"
+ },
+ {
+ "property-key": "allotted-resource.allotted-resource-name",
+ "property-value": "sdwan ar"
+ }
+ ]
+ },
+ {
+ "related-to": "allotted-resource",
+ "relationship-label": "org.onap.relationships.inventory.Uses",
+ "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/089b87a5-72fe-4197-a307-6929c3831f80/allotted-resources/allotted-resource/1114feec-1aef-4890-abba-f8f3a906935f",
+ "relationship-data": [
+ {
+ "relationship-key": "customer.global-customer-id",
+ "relationship-value": "Democcy"
+ },
+ {
+ "relationship-key": "service-subscription.service-type",
+ "relationship-value": "CCVPN"
+ },
+ {
+ "relationship-key": "service-instance.service-instance-id",
+ "relationship-value": "089b87a5-72fe-4197-a307-6929c3831f80"
+ },
+ {
+ "relationship-key": "allotted-resource.id",
+ "relationship-value": "1114feec-1aef-4890-abba-f8f3a906935f"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "allotted-resource.description",
+ "property-value": "1114feec-1aef-4890-abba-f8f3a906935f"
+ },
+ {
+ "property-key": "allotted-resource.allotted-resource-name",
+ "property-value": "sdwan ar"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "service-instance-id": "15e88f8e-473f-4d88-92f8-6739a42baa2g",
+ "service-instance-name": "SDWANVPNInfra",
+ "service-type": "E2E Service",
+ "service-role": "E2E Service",
+ "model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8",
+ "model-version-id": "462f84e5-f0e5-44c5-ab95-38fb4bf77064",
+ "resource-version": "1535687578298",
+ "input-parameters": "{\n \"service\":{\n \"name\":\"SDWANVPNInfra\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"88dcb2f0-085b-4548-8b93-0882e37d25d8\",\n \"serviceUuid\":\"462f84e5-f0e5-44c5-ab95-38fb4bf77064\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"CMCCVPN\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "sdwan-vpn",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/sdwan-vpns/sdwan-vpn/4efe6dff-acfc-4d13-a3fd-1177d3c08e86",
+ "relationship-data": [
+ {
+ "relationship-key": "sdwan-vpn.sdwan-vpn-id",
+ "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e86"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "sdwan-vpn.sdwan-vpn-name",
+ "property-value": "cmccvpn"
+ }
+ ]
+ },
+ {
+ "related-to": "sp-partner",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d11",
+ "relationship-data": [
+ {
+ "relationship-key": "sp-partner.sp-partner-id",
+ "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d11"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "sp-partner.sp-partner-id",
+ "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d11"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "service-instance-id": "089b87a5-72fe-4197-a307-6929c3831f80",
+ "service-instance-name": "SiteBeijing",
+ "service-type": "E2E Service",
+ "service-role": "E2E Service",
+ "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+ "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838",
+ "resource-version": "1535686434430",
+ "input-parameters": "{\n \"service\":{\n \"name\":\"SiteService\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE1\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "sp-partner",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d22",
+ "relationship-data": [
+ {
+ "relationship-key": "sp-partner.sp-partner-id",
+ "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d22"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "sp-partner.sp-partner-id",
+ "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d22"
+ }
+ ]
+ },
+ {
+ "related-to": "device",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/devices/device/6e0d83f3-f4f5-4a24-9462-712b52ac6700",
+ "relationship-data": [
+ {
+ "relationship-key": "device.device-id",
+ "relationship-value": "6e0d83f3-f4f5-4a24-9462-712b52ac6700"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "device.device-name"
+ }
+ ]
+ },
+ {
+ "related-to": "wan-port-config",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/aaa3e552-08c4-4697-aeeb-d8d3e09ce58e",
+ "relationship-data": [
+ {
+ "relationship-key": "wan-port-config.wan-port-config-id",
+ "relationship-value": "aaa3e552-08c4-4697-aeeb-d8d3e09ce58e"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "wan-port-config.wan-port-config-name",
+ "property-value": "mpls"
+ }
+ ]
+ },
+ {
+ "related-to": "site-resource",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/site-resources/site-resource/aa2de9d8-d76b-4134-b5f1-41e79056adbe",
+ "relationship-data": [
+ {
+ "relationship-key": "site-resource.site-resource-id",
+ "relationship-value": "aa2de9d8-d76b-4134-b5f1-41e79056adbe"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "site-resource.site-resource-name",
+ "property-value": "cmcc-spokesite"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "service-instance-id": "189b87a5-72fe-4197-a307-6929c3831f81",
+ "service-instance-name": "SiteBeijingDC",
+ "service-type": "E2E Service",
+ "service-role": "E2E Service",
+ "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+ "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838",
+ "resource-version": "1535686458510",
+ "input-parameters": "{\n \"service\":{\n \"name\":\"SiteService\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE2\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "sp-partner",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d33",
+ "relationship-data": [
+ {
+ "relationship-key": "sp-partner.sp-partner-id",
+ "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d33"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "sp-partner.sp-partner-id",
+ "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d33"
+ }
+ ]
+ },
+ {
+ "related-to": "site-resource",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/site-resources/site-resource/bb2de9d8-d76b-4134-b5f1-41e79056adbe",
+ "relationship-data": [
+ {
+ "relationship-key": "site-resource.site-resource-id",
+ "relationship-value": "bb2de9d8-d76b-4134-b5f1-41e79056adbe"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "site-resource.site-resource-name",
+ "property-value": "cmcc-hubsite"
+ }
+ ]
+ },
+ {
+ "related-to": "device",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/devices/device/6e0d83f3-f4f5-4a24-9462-712b52ac6711",
+ "relationship-data": [
+ {
+ "relationship-key": "device.device-id",
+ "relationship-value": "6e0d83f3-f4f5-4a24-9462-712b52ac6711"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "device.device-name",
+ "property-value": "cmcc_hub"
+ }
+ ]
+ },
+ {
+ "related-to": "wan-port-config",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/bba3e552-08c4-4697-aeeb-d8d3e09ce58e",
+ "relationship-data": [
+ {
+ "relationship-key": "wan-port-config.wan-port-config-id",
+ "relationship-value": "bba3e552-08c4-4697-aeeb-d8d3e09ce58e"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "wan-port-config.wan-port-config-name",
+ "property-value": "mpls"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "service-instance-id": "289b87a5-72fe-4197-a307-6929c3831f82",
+ "service-instance-name": "SiteLondonDC",
+ "service-type": "E2E Service",
+ "service-role": "E2E Service",
+ "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+ "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838",
+ "resource-version": "1535686481928",
+ "input-parameters": "{\n \"service\":{\n \"name\":\"SiteService\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE3\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "sp-partner",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d44",
+ "relationship-data": [
+ {
+ "relationship-key": "sp-partner.sp-partner-id",
+ "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d44"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "sp-partner.sp-partner-id",
+ "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d44"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "service-instance-id": "389b87a5-72fe-4197-a307-6929c3831f83",
+ "service-instance-name": "SiteLondon",
+ "service-type": "E2E Service",
+ "service-role": "E2E Service",
+ "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+ "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838",
+ "resource-version": "1535686521672",
+ "input-parameters": "{\n \"service\":{\n \"name\":\"SiteService\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE4\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "sp-partner",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d55",
+ "relationship-data": [
+ {
+ "relationship-key": "sp-partner.sp-partner-id",
+ "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d55"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "sp-partner.sp-partner-id",
+ "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d55"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "service-instance-id": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0",
+ "service-instance-name": "SOTNVPNInfra",
+ "service-type": "E2E Service",
+ "service-role": "E2E Service",
+ "model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f",
+ "model-version-id": "54836196-c411-4690-af98-900c1c3aadd7",
+ "resource-version": "1535685742159",
+ "input-parameters": "{\n \"service\":{\n \"name\":\"SOTNVPNInfra\",\n \"description\":\"SOTNVPNInfra\",\n \"serviceInvariantUuid\":\"21886a96-0664-47a3-beae-766952f2059f\",\n \"serviceUuid\":\"54836196-c411-4690-af98-900c1c3aadd7\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SOTNConnectivity 0\",\n \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sotnconnectivity0_eir\":\"1000\",\n \"sotnconnectivity0_cir\":\"1000\",\n \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n \"sotnconnectivity0_ebs\":\"1000\",\n \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n \"sotnconnectivity0_dualLink\":\"true\",\n \"sotnconnectivity0_reroute\":\"false\",\n \"sotnconnectivity0_cbs\":\"1000\",\n \"sotnconnectivity0_name\":\"SOTN L2\",\n \"sotnconnectivity0_SLS\":\"\",\n \"sotnconnectivity0_description\":\"\",\n \"sotnconnectivity0_couplingFlag\":\"\",\n \"sotnconnectivity0_colorAware\":\"\",\n \"sotnconnectivity0_COS\":\"standard\"\n }\n }\n }\n}",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "sp-partner",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d99",
+ "relationship-data": [
+ {
+ "relationship-key": "sp-partner.sp-partner-id",
+ "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d99"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "sp-partner.sp-partner-id",
+ "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d99"
+ }
+ ]
+ },
+ {
+ "related-to": "connectivity",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/connectivities/connectivity/4efe6dff-acfc-4d13-a3fd-1177d3c08e84",
+ "relationship-data": [
+ {
+ "relationship-key": "connectivity.connectivity-id",
+ "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e84"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "connectivity.etht-svc-name",
+ "property-value": "SOTNVPNInfra"
+ }
+ ]
+ },
+ {
+ "related-to": "allotted-resource",
+ "relationship-label": "org.onap.relationships.inventory.Uses",
+ "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/189b87a5-72fe-4197-a307-6929c3831f81/allotted-resources/allotted-resource/bb14feec-1aef-4890-abba-f8f3a906935f",
+ "relationship-data": [
+ {
+ "relationship-key": "customer.global-customer-id",
+ "relationship-value": "Democcy"
+ },
+ {
+ "relationship-key": "service-subscription.service-type",
+ "relationship-value": "CCVPN"
+ },
+ {
+ "relationship-key": "service-instance.service-instance-id",
+ "relationship-value": "189b87a5-72fe-4197-a307-6929c3831f81"
+ },
+ {
+ "relationship-key": "allotted-resource.id",
+ "relationship-value": "bb14feec-1aef-4890-abba-f8f3a906935f"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "allotted-resource.description",
+ "property-value": "bb14feec-1aef-4890-abba-f8f3a906935f"
+ },
+ {
+ "property-key": "allotted-resource.allotted-resource-name",
+ "property-value": "ston ar"
+ }
+ ]
+ },
+ {
+ "related-to": "allotted-resource",
+ "relationship-label": "org.onap.relationships.inventory.Uses",
+ "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/089b87a5-72fe-4197-a307-6929c3831f80/allotted-resources/allotted-resource/aa14feec-1aef-4890-abba-f8f3a906935f",
+ "relationship-data": [
+ {
+ "relationship-key": "customer.global-customer-id",
+ "relationship-value": "Democcy"
+ },
+ {
+ "relationship-key": "service-subscription.service-type",
+ "relationship-value": "CCVPN"
+ },
+ {
+ "relationship-key": "service-instance.service-instance-id",
+ "relationship-value": "089b87a5-72fe-4197-a307-6929c3831f80"
+ },
+ {
+ "relationship-key": "allotted-resource.id",
+ "relationship-value": "aa14feec-1aef-4890-abba-f8f3a906935f"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "allotted-resource.description",
+ "property-value": "aa14feec-1aef-4890-abba-f8f3a906935f"
+ },
+ {
+ "property-key": "allotted-resource.allotted-resource-name",
+ "property-value": "ston ar"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ ]
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/instanceTableData2.json b/usecaseui-portal/src/assets/json/instanceTableData2.json
new file mode 100644
index 00000000..d29f5f59
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/instanceTableData2.json
@@ -0,0 +1,388 @@
+{
+ "results": [
+ {
+ "service-subscription": {
+ "service-type": "{service-type}",
+ "temp-ub-sub-account-id": "some sub account",
+ "service-type-id":"sotn",
+ "service-instances": {
+ "service-instance": [
+ {
+ "service-instance-id": "uuidxxx",
+ "service-instance-name": "dddd1",
+ "environment-context": "some context 1",
+ "workload-context": "some workload 1",
+ "input-parameters": "request parameters 1",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 2",
+ "service-instance-name": "some name 2",
+ "environment-context": "some context 2",
+ "workload-context": "some workload 2",
+ "input-parameters": "request parameters 2",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 3",
+ "service-instance-name": "some name 3",
+ "environment-context": "some context 3",
+ "workload-context": "some workload 3",
+ "input-parameters": "request parameters 3",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ ]
+ },
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ },
+ {
+ "service-subscription": {
+ "service-type": "{service-type}",
+ "temp-ub-sub-account-id": "some sub account",
+ "service-type-id":"sotn",
+ "service-instances": {
+ "service-instance": [
+ {
+ "service-instance-id": "some id 1",
+ "service-instance-name": "some name 1",
+ "environment-context": "some context 1",
+ "workload-context": "some workload 1",
+ "input-parameters": "request parameters 1",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 2",
+ "service-instance-name": "some name 2",
+ "environment-context": "some context 2",
+ "workload-context": "some workload 2",
+ "input-parameters": "request parameters 2",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 3",
+ "service-instance-name": "some name 3",
+ "environment-context": "some context 3",
+ "workload-context": "some workload 3",
+ "input-parameters": "request parameters 3",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ ]
+ },
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ },
+ {
+ "service-subscription": {
+ "service-type": "{service-type}",
+ "temp-ub-sub-account-id": "some sub account",
+ "service-type-id":"sotn",
+ "service-instances": {
+ "service-instance": [
+ {
+ "service-instance-id": "some id 1",
+ "service-instance-name": "some name 1",
+ "environment-context": "some context 1",
+ "workload-context": "some workload 1",
+ "input-parameters": "request parameters 1",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "uuidaaaa",
+ "service-instance-name": "dddd6",
+ "environment-context": "some context 2",
+ "workload-context": "some workload 2",
+ "input-parameters": "request parameters 2",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 3",
+ "service-instance-name": "some name 3",
+ "environment-context": "some context 3",
+ "workload-context": "some workload 3",
+ "input-parameters": "request parameters 3",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ ]
+ },
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ },
+ {
+ "service-subscription": {
+ "service-type": "{service-type}",
+ "temp-ub-sub-account-id": "some sub account",
+ "service-type-id":"ccvpn",
+ "service-instances": {
+ "service-instance": [
+ {
+ "service-instance-id": "some id 1",
+ "service-instance-name": "some name 1",
+ "environment-context": "some context 1",
+ "workload-context": "some workload 1",
+ "input-parameters": "request parameters 1",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 2",
+ "service-instance-name": "some name 2",
+ "environment-context": "some context 2",
+ "workload-context": "some workload 2",
+ "input-parameters": "request parameters 2",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 3",
+ "service-instance-name": "some name 3",
+ "environment-context": "some context 3",
+ "workload-context": "some workload 3",
+ "input-parameters": "request parameters 3",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ ]
+ },
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ },
+ {
+ "service-subscription": {
+ "service-type": "{service-type}",
+ "temp-ub-sub-account-id": "some sub account",
+ "service-type-id":"ccvpn",
+ "service-instances": {
+ "service-instance": [
+ {
+ "service-instance-id": "some id 1",
+ "service-instance-name": "some name 1",
+ "environment-context": "some context 1",
+ "workload-context": "some workload 1",
+ "input-parameters": "request parameters 1",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 2",
+ "service-instance-name": "some name 2",
+ "environment-context": "some context 2",
+ "workload-context": "some workload 2",
+ "input-parameters": "request parameters 2",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 3",
+ "service-instance-name": "some name 3",
+ "environment-context": "some context 3",
+ "workload-context": "some workload 3",
+ "input-parameters": "request parameters 3",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ ]
+ },
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ },
+ {
+ "service-subscription": {
+ "service-type": "{service-type}",
+ "temp-ub-sub-account-id": "some sub account",
+ "service-type-id":"ccvpn",
+ "service-instances": {
+ "service-instance": [
+ {
+ "service-instance-id": "some id 1",
+ "service-instance-name": "some name 1",
+ "environment-context": "some context 1",
+ "workload-context": "some workload 1",
+ "input-parameters": "request parameters 1",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 2",
+ "service-instance-name": "some name 2",
+ "environment-context": "some context 2",
+ "workload-context": "some workload 2",
+ "input-parameters": "request parameters 2",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 3",
+ "service-instance-name": "some name 3",
+ "environment-context": "some context 3",
+ "workload-context": "some workload 3",
+ "input-parameters": "request parameters 3",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ ]
+ },
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ },
+ {
+ "service-subscription": {
+ "service-type": "{service-type}",
+ "temp-ub-sub-account-id": "some sub account",
+ "service-type-id":"ccvpn",
+ "service-instances": {
+ "service-instance": [
+ {
+ "service-instance-id": "some id 1",
+ "service-instance-name": "some name 1",
+ "environment-context": "some context 1",
+ "workload-context": "some workload 1",
+ "input-parameters": "request parameters 1",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 2",
+ "service-instance-name": "some name 2",
+ "environment-context": "some context 2",
+ "workload-context": "some workload 2",
+ "input-parameters": "request parameters 2",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 3",
+ "service-instance-name": "some name 3",
+ "environment-context": "some context 3",
+ "workload-context": "some workload 3",
+ "input-parameters": "request parameters 3",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ ]
+ },
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ },
+ {
+ "service-subscription": {
+ "service-type": "{service-type}",
+ "temp-ub-sub-account-id": "some sub account",
+ "service-type-id":"ccvpn",
+ "service-instances": {
+ "service-instance": [
+ {
+ "service-instance-id": "some id 1",
+ "service-instance-name": "some name 1",
+ "environment-context": "some context 1",
+ "workload-context": "some workload 1",
+ "input-parameters": "request parameters 1",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 2",
+ "service-instance-name": "some name 2",
+ "environment-context": "some context 2",
+ "workload-context": "some workload 2",
+ "input-parameters": "request parameters 2",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ },
+ {
+ "service-instance-id": "some id 3",
+ "service-instance-name": "some name 3",
+ "environment-context": "some context 3",
+ "workload-context": "some workload 3",
+ "input-parameters": "request parameters 3",
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ ]
+ },
+ "relationship-list": {
+ "relationship" : [
+ ]
+ }
+ }
+ }
+ ]
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/instanceTableData3.json b/usecaseui-portal/src/assets/json/instanceTableData3.json
new file mode 100644
index 00000000..98777289
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/instanceTableData3.json
@@ -0,0 +1,2 @@
+
+{"service-instance":[{"service-instance-id":"8e07f832-3f50-4657-9b44-010049e8b488","service-instance-name":"SOTNVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"bafa365f-4056-4ad3-a039-d6b3e3e0fd35","model-version-id":"fdbb8ddd-3325-4840-a156-9ad601b9366c","resource-version":"1537769390960","input-parameters":"{\n \"service\":{\n \"name\":\"SOTNVPNInfra\",\n \"description\":\"SOTNVPNInfra\",\n \"serviceInvariantUuid\":\"bafa365f-4056-4ad3-a039-d6b3e3e0fd35\",\n \"serviceUuid\":\"fdbb8ddd-3325-4840-a156-9ad601b9366c\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SOTNConnectivity 0\",\n \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sotnconnectivity0_eir\":\"1000\",\n \"sotnconnectivity0_cir\":\"1000\",\n \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n \"sotnconnectivity0_ebs\":\"1000\",\n \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n \"sotnconnectivity0_dualLink\":\"true\",\n \"sotnconnectivity0_reroute\":\"false\",\n \"sotnconnectivity0_cbs\":\"1000\",\n \"sotnconnectivity0_name\":\"SOTN L2\",\n \"sotnconnectivity0_SLS\":\"\",\n \"sotnconnectivity0_description\":\"\",\n \"sotnconnectivity0_couplingFlag\":\"\",\n \"sotnconnectivity0_colorAware\":\"\",\n \"sotnconnectivity0_COS\":\"standard\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"connectivity","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/connectivities/connectivity/2e359c75-2af3-4fea-9550-a893edeab8b5","relationship-data":[{"relationship-key":"connectivity.connectivity-id","relationship-value":"2e359c75-2af3-4fea-9550-a893edeab8b5"}],"related-to-property":[{"property-key":"connectivity.etht-svc-name","property-value":"vpn1"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}]}]}},{"service-instance-id":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205","service-instance-name":"DcLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537769721422","input-parameters":"{\n \"service\":{\n \"name\":\"DcLondon\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/2cacf49c-7c09-4155-b18a-4468dce34083","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"2cacf49c-7c09-4155-b18a-4468dce34083"}],"related-to-property":[{"property-key":"device.device-name","property-value":"TravelDevice"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/f288d54e-be09-46d3-bb1f-38729ec74bb5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"f288d54e-be09-46d3-bb1f-38729ec74bb5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/99866f05-9749-456e-8909-61eebf08373e","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"99866f05-9749-456e-8909-61eebf08373e"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/afab2cc0-28c9-4fd3-bf03-01c8034f8191","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"afab2cc0-28c9-4fd3-bf03-01c8034f8191"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/167a285b-0875-41ff-8ed1-1178db6f3133","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/d519761d-c89c-4164-86c7-8f74952eea65","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"d519761d-c89c-4164-86c7-8f74952eea65"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/65f21c28-8b19-4769-8f08-174e2afa5488","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"65f21c28-8b19-4769-8f08-174e2afa5488"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"ston ar"}]}]}},{"service-instance-id":"0ea94797-3772-40ff-b6fb-69f06c533be3","service-instance-name":"SDWANVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537769801383","input-parameters":"{\n \"service\":{\n \"name\":\"SDWANVPNInfra\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"CMCCVPN\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sdwan-vpn","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/sdwan-vpns/sdwan-vpn/0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e","relationship-data":[{"relationship-key":"sdwan-vpn.sdwan-vpn-id","relationship-value":"0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e"}],"related-to-property":[{"property-key":"sdwan-vpn.sdwan-vpn-name"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/15e88f8e-473f-4d88-92f8-6739a42baa2g","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}]}]}},{"service-instance-id":"f08067b8-a07b-4c41-b750-5f9b35281e67","service-instance-name":"siteFangshanQu","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537779181775","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/506b87a5-72fe-4197-a307-6929c3871ab2/service-data/service-topology/","input-parameters":"{\n \"service\":{\n \"name\":\"siteFangshanQu\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/506b87a5-72fe-4197-a307-6929c3871ab2","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}]}]}},{"service-instance-id":"6a6478d1-f62f-439c-8f16-6038a44af8c3","service-instance-name":"SDWANVPNInfra-2","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537779569094","input-parameters":"{\n \"service\":{\n \"name\":\"SDWANVPNInfra-2\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"CMCCVPN\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/de888731-eac8-454c-bbb2-927a85ba2d1c","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}]}]}},{"service-instance-id":"fd0b9f0a-0d5c-4f69-a3dc-fb9cabde9db8","service-instance-name":"DcXichengQuBeijing","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537779392307","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/289b87a5-72fe-4197-a307-6929c3831f82/service-data/service-topology/","input-parameters":"{\n \"service\":{\n \"name\":\"DcXichengQuBeijing\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/289b87a5-72fe-4197-a307-6929c3831f82","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"289b87a5-72fe-4197-a307-6929c3831f82"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"289b87a5-72fe-4197-a307-6929c3831f82"}]}]}},{"service-instance-id":"2d55a540-f6d3-4108-9bb4-290574b87a6c","service-instance-name":"siteLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537770265132","input-parameters":"{\n \"service\":{\n \"name\":\"siteLondon\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/52ae7944-12b3-4766-848e-e43088947af9","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"52ae7944-12b3-4766-848e-e43088947af9"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/a22193fc-d1b5-41a7-9033-14339838b0c5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"a22193fc-d1b5-41a7-9033-14339838b0c5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/9fc7c231-1b71-49e6-8390-e92b707e7615","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"9fc7c231-1b71-49e6-8390-e92b707e7615"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/f0cf1e06-7be8-4602-83cb-60d87d8e7ef3","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"f0cf1e06-7be8-4602-83cb-60d87d8e7ef3"}],"related-to-property":[{"property-key":"device.device-name","property-value":"CentSpokeDevice"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/3addd6b9-b05f-4841-881c-1ce2c753513f","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/f1523ca9-6b56-482e-b3a4-a2f8dcbfba12","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"f1523ca9-6b56-482e-b3a4-a2f8dcbfba12"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/d1a6b573-0595-4468-bab9-02465c295618","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"d1a6b573-0595-4468-bab9-02465c295618"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]}]}}]} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/instanceTableData4.json b/usecaseui-portal/src/assets/json/instanceTableData4.json
new file mode 100644
index 00000000..ad8767e0
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/instanceTableData4.json
@@ -0,0 +1 @@
+{"service-instance":[{"service-instance-id":"8e07f832-3f50-4657-9b44-010049e8b488","service-instance-name":"SOTNVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"bafa365f-4056-4ad3-a039-d6b3e3e0fd35","model-version-id":"fdbb8ddd-3325-4840-a156-9ad601b9366c","resource-version":"1537769390960","input-parameters":"{\n \"service\":{\n \"name\":\"SOTNVPNInfra\",\n \"description\":\"SOTNVPNInfra\",\n \"serviceInvariantUuid\":\"bafa365f-4056-4ad3-a039-d6b3e3e0fd35\",\n \"serviceUuid\":\"fdbb8ddd-3325-4840-a156-9ad601b9366c\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SOTNConnectivity 0\",\n \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sotnconnectivity0_eir\":\"1000\",\n \"sotnconnectivity0_cir\":\"1000\",\n \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n \"sotnconnectivity0_ebs\":\"1000\",\n \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n \"sotnconnectivity0_dualLink\":\"true\",\n \"sotnconnectivity0_reroute\":\"false\",\n \"sotnconnectivity0_cbs\":\"1000\",\n \"sotnconnectivity0_name\":\"SOTN L2\",\n \"sotnconnectivity0_SLS\":\"\",\n \"sotnconnectivity0_description\":\"\",\n \"sotnconnectivity0_couplingFlag\":\"\",\n \"sotnconnectivity0_colorAware\":\"\",\n \"sotnconnectivity0_COS\":\"standard\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"connectivity","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/connectivities/connectivity/2e359c75-2af3-4fea-9550-a893edeab8b5","relationship-data":[{"relationship-key":"connectivity.connectivity-id","relationship-value":"2e359c75-2af3-4fea-9550-a893edeab8b5"}],"related-to-property":[{"property-key":"connectivity.etht-svc-name","property-value":"vpn1"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/2d55a540-f6d3-4108-9bb4-290574b87a6c/allotted-resources/allotted-resource/666085a7-132e-4a32-b9de-e58ecea3476a","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"2d55a540-f6d3-4108-9bb4-290574b87a6c"},{"relationship-key":"allotted-resource.id","relationship-value":"666085a7-132e-4a32-b9de-e58ecea3476a"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205/allotted-resources/allotted-resource/562adc96-7fbe-435e-bd6d-ff4b8a0a7920","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205"},{"relationship-key":"allotted-resource.id","relationship-value":"562adc96-7fbe-435e-bd6d-ff4b8a0a7920"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]}]}},{"service-instance-id":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205","service-instance-name":"DcLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537866016457","input-parameters":"{\n \"service\":{\n \"name\":\"DcLondon\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra\",\n \"sitevf_site_address\":\"University College London,Gower Street,London\",\n \"sitevf_site_controlPoint\":\"VDF_VCPE\",\n \"sitevf_site_description\":\"VDF_vGW\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"DcLondon\",\n \"sitevf_site_postcode\":\"N200095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/2cacf49c-7c09-4155-b18a-4468dce34083","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"2cacf49c-7c09-4155-b18a-4468dce34083"}],"related-to-property":[{"property-key":"device.device-name","property-value":"TravelDevice"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/f288d54e-be09-46d3-bb1f-38729ec74bb5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"f288d54e-be09-46d3-bb1f-38729ec74bb5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/99866f05-9749-456e-8909-61eebf08373e","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"99866f05-9749-456e-8909-61eebf08373e"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/afab2cc0-28c9-4fd3-bf03-01c8034f8191","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"afab2cc0-28c9-4fd3-bf03-01c8034f8191"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/167a285b-0875-41ff-8ed1-1178db6f3133","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/d519761d-c89c-4164-86c7-8f74952eea65","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"d519761d-c89c-4164-86c7-8f74952eea65"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/65f21c28-8b19-4769-8f08-174e2afa5488","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"65f21c28-8b19-4769-8f08-174e2afa5488"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"ston ar"}]}]}},{"service-instance-id":"0ea94797-3772-40ff-b6fb-69f06c533be3","service-instance-name":"SDWANVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537864894560","input-parameters":"{\n \"service\":{\n \"name\":\"SDWANVPNInfra\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"SDWANVPNInfra\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sdwan-vpn","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/sdwan-vpns/sdwan-vpn/0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e","relationship-data":[{"relationship-key":"sdwan-vpn.sdwan-vpn-id","relationship-value":"0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e"}],"related-to-property":[{"property-key":"sdwan-vpn.sdwan-vpn-name"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/15e88f8e-473f-4d88-92f8-6739a42baa2g","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/2d55a540-f6d3-4108-9bb4-290574b87a6c/allotted-resources/allotted-resource/c797bba9-eb90-4825-b1c2-adbd1a31101f","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"2d55a540-f6d3-4108-9bb4-290574b87a6c"},{"relationship-key":"allotted-resource.id","relationship-value":"c797bba9-eb90-4825-b1c2-adbd1a31101f"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205/allotted-resources/allotted-resource/9a7329e6-8961-4008-9dbe-adeacfcd20da","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205"},{"relationship-key":"allotted-resource.id","relationship-value":"9a7329e6-8961-4008-9dbe-adeacfcd20da"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]}]}},{"service-instance-id":"f08067b8-a07b-4c41-b750-5f9b35281e67","service-instance-name":"siteFangshanQu","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537867265890","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/506b87a5-72fe-4197-a307-6929c3871ab2/service-data/service-topology/","input-parameters":"{\n \"service\":{\n \"name\":\"siteFangshanQu\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra-2\",\n \"sitevf_site_address\":\"CMCC International Data Center,Hongkong\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_vGW\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"siteFangshanQu\",\n \"sitevf_site_postcode\":\"999077\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/506b87a5-72fe-4197-a307-6929c3871ab2","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}]}]}},{"service-instance-id":"6a6478d1-f62f-439c-8f16-6038a44af8c3","service-instance-name":"SDWANVPNInfra-2","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537779569094","input-parameters":"{\n \"service\":{\n \"name\":\"SDWANVPNInfra-2\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"CMCCVPN\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/de888731-eac8-454c-bbb2-927a85ba2d1c","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}]}]}},{"service-instance-id":"fd0b9f0a-0d5c-4f69-a3dc-fb9cabde9db8","service-instance-name":"DcXichengQuBeijing","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537867379064","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/289b87a5-72fe-4197-a307-6929c3831f82/service-data/service-topology/","input-parameters":"{\n \"service\":{\n \"name\":\"DcXichengQuBeijing\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra\",\n \"sitevf_site_address\":\"Chuangxin Building,Tianningsi,Xicheng,Beijing\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_vGW\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"DcXichengQuBeijing\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/289b87a5-72fe-4197-a307-6929c3831f82","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"289b87a5-72fe-4197-a307-6929c3831f82"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"289b87a5-72fe-4197-a307-6929c3831f82"}]}]}},{"service-instance-id":"2d55a540-f6d3-4108-9bb4-290574b87a6c","service-instance-name":"siteLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537866122803","input-parameters":"{\n \"service\":{\n \"name\":\"siteLondon\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra-2\",\n \"sitevf_site_address\":\"VDF International Data Center,Hongkong\",\n \"sitevf_site_controlPoint\":\"VDF_VCPE\",\n \"sitevf_site_description\":\"VDF_vGW\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"siteLondon\",\n \"sitevf_site_postcode\":\"999077\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/52ae7944-12b3-4766-848e-e43088947af9","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"52ae7944-12b3-4766-848e-e43088947af9"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/a22193fc-d1b5-41a7-9033-14339838b0c5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"a22193fc-d1b5-41a7-9033-14339838b0c5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/9fc7c231-1b71-49e6-8390-e92b707e7615","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"9fc7c231-1b71-49e6-8390-e92b707e7615"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/f0cf1e06-7be8-4602-83cb-60d87d8e7ef3","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"f0cf1e06-7be8-4602-83cb-60d87d8e7ef3"}],"related-to-property":[{"property-key":"device.device-name","property-value":"CentSpokeDevice"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/3addd6b9-b05f-4841-881c-1ce2c753513f","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/f1523ca9-6b56-482e-b3a4-a2f8dcbfba12","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"f1523ca9-6b56-482e-b3a4-a2f8dcbfba12"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/d1a6b573-0595-4468-bab9-02465c295618","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"d1a6b573-0595-4468-bab9-02465c295618"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]}]}}]} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/netWorkD3Data.json b/usecaseui-portal/src/assets/json/netWorkD3Data.json
new file mode 100644
index 00000000..0dbfd939
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/netWorkD3Data.json
@@ -0,0 +1,94 @@
+[
+ {
+ "networkId": "1000",
+ "pnfs": [
+ {
+ "pnfName": "pnf1000"
+ }
+ ],
+ "tps": [
+ {
+ "interface-name": "nodeId-78.78.78.78-ltpId-5"
+ },
+ {
+ "interface-name": "nodeId-78.78.78.78-ltpId-4"
+ },
+ {
+ "interface-name": "nodeId-78.78.78.78-ltpId-1"
+ },
+ {
+ "interface-name": "nodeId-78.78.78.78-ltpId-3"
+ },
+ {
+ "interface-name": "nodeId-78.78.78.78-ltpId-2"
+ }
+ ],
+ "aaiId":""
+ },
+ {
+ "networkId": "2000",
+ "pnfs": [
+ {
+ "pnfName": "pnf2000"
+ }
+ ],
+ "tps": [
+ {
+ "interface-name": "nodeId-79.79.79.79-ltpId-5"
+ },
+ {
+ "interface-name": "nodeId-79.79.79.79-ltpId-4"
+ },
+ {
+ "interface-name": "nodeId-79.79.79.79-ltpId-1"
+ },
+ {
+ "interface-name": "nodeId-79.79.79.79-ltpId-3"
+ },
+ {
+ "interface-name": "nodeId-79.79.79.79-ltpId-2"
+ }
+ ],
+ "aaiId":""
+ },
+ {
+ "networkId": "3000",
+ "pnfs": [
+ {
+ "pnfName": "pnf3000"
+ }
+ ],
+ "tps": [
+ {
+ "interface-name": "nodeId-80.80.80.80-ltpId-5"
+ },
+ {
+ "interface-name": "nodeId-80.80.80.80-ltpId-4"
+ },
+ {
+ "interface-name": "nodeId-80.80.80.80-ltpId-1"
+ },
+ {
+ "interface-name": "nodeId-80.80.80.80-ltpId-3"
+ },
+ {
+ "interface-name": "nodeId-80.80.80.80-ltpId-2"
+ }
+ ],
+ "aaiId":""
+ },
+ {
+ "networkId": "cloud-network",
+ "pnfs": [
+ {
+ "pnfName": "pnf-cloud"
+ }
+ ],
+ "tps": [
+ {
+ "interface-name": "cloud-tp"
+ }
+ ],
+ "aaiId":"gongjie666"
+ }
+]
diff --git a/usecaseui-portal/src/assets/json/netWorkD3Data2.json b/usecaseui-portal/src/assets/json/netWorkD3Data2.json
new file mode 100644
index 00000000..1ab07822
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/netWorkD3Data2.json
@@ -0,0 +1,246 @@
+[
+ {
+ "network-resource": {
+ "network-id": "成都市",
+ "pnfs": {
+ "pnf": [
+ {
+ "pnf-name": "双流区"
+ },
+ {
+ "pnf-name": "武侯区"
+ },
+ {
+ "pnf-name": "金牛区"
+ }
+ ]
+ },
+ "tp": [
+ {
+ "p-interface": {
+ "interface-name": "东升街",
+ "network-ref": "some ref",
+ "transparent": "some value",
+ "speed-value": "some speed",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "logical-link",
+ "related-link": "url of logical-link",
+ "relationship-data": {
+ "relationship-key": "logical-link.link-name",
+ "relationship-value": "some name"
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ "p-interface": {
+ "interface-name": "浆洗街",
+ "network-ref": "some ref",
+ "transparent": "some value",
+ "speed-value": "some speed",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "logical-link",
+ "related-link": "url of logical-link",
+ "relationship-data": {
+ "relationship-key": "logical-link.link-name",
+ "relationship-value": "some name"
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ "p-interface": {
+ "interface-name": "抚琴街",
+ "network-ref": "some ref",
+ "transparent": "some value",
+ "speed-value": "some speed",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "logical-link",
+ "related-link": "url of logical-link",
+ "relationship-data": {
+ "relationship-key": "logical-link.link-name",
+ "relationship-value": "some name"
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "vpn-binding",
+ "related-link": "url of vpn-binding",
+ "relationship-data": {
+ "relationship-key": "vpn-binding.vpn-id",
+ "relationship-value": "some id"
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ "network-resource": {
+ "network-id": "重庆市",
+ "pnfs": {
+ "pnf": [
+ {
+ "pnf-name": "沙坪坝区"
+ },
+ {
+ "pnf-name": "南岸区"
+ },
+ {
+ "pnf-name": "江北区"
+ }
+ ]
+ },
+ "tp": [
+ {
+ "p-interface": {
+ "interface-name": "万州",
+ "network-ref": "some ref",
+ "transparent": "some value",
+ "speed-value": "some speed",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "logical-link",
+ "related-link": "url of logical-link",
+ "relationship-data": {
+ "relationship-key": "logical-link.link-name",
+ "relationship-value": "some name"
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ "p-interface": {
+ "interface-name": "南川",
+ "network-ref": "some ref",
+ "transparent": "some value",
+ "speed-value": "some speed",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "logical-link",
+ "related-link": "url of logical-link",
+ "relationship-data": {
+ "relationship-key": "logical-link.link-name",
+ "relationship-value": "some name"
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ "p-interface": {
+ "interface-name": "武隆",
+ "network-ref": "some ref",
+ "transparent": "some value",
+ "speed-value": "some speed",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "logical-link",
+ "related-link": "url of logical-link",
+ "relationship-data": {
+ "relationship-key": "logical-link.link-name",
+ "relationship-value": "some name"
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ "p-interface": {
+ "interface-name": "江津",
+ "network-ref": "some ref",
+ "transparent": "some value",
+ "speed-value": "some speed",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "logical-link",
+ "related-link": "url of logical-link",
+ "relationship-data": {
+ "relationship-key": "logical-link.link-name",
+ "relationship-value": "some name"
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ "p-interface": {
+ "interface-name": "合川",
+ "network-ref": "some ref",
+ "transparent": "some value",
+ "speed-value": "some speed",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "logical-link",
+ "related-link": "url of logical-link",
+ "relationship-data": {
+ "relationship-key": "logical-link.link-name",
+ "relationship-value": "some name"
+ }
+ }
+ ]
+ }
+ }
+ },
+ {
+ "p-interface": {
+ "interface-name": "巫山",
+ "network-ref": "some ref",
+ "transparent": "some value",
+ "speed-value": "some speed",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "logical-link",
+ "related-link": "url of logical-link",
+ "relationship-data": {
+ "relationship-key": "logical-link.link-name",
+ "relationship-value": "some name"
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "vpn-binding",
+ "related-link": "url of vpn-binding",
+ "relationship-data": {
+ "relationship-key": "vpn-binding.vpn-id",
+ "relationship-value": "some id"
+ }
+ }
+ ]
+ }
+ }
+ }
+ ]
diff --git a/usecaseui-portal/src/assets/json/onboardTableData.json b/usecaseui-portal/src/assets/json/onboardTableData.json
new file mode 100644
index 00000000..56e5b323
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/onboardTableData.json
@@ -0,0 +1,103 @@
+{
+ "total":245,
+ "tableList":[
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Onboarding",
+ "progress": 35
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Onboarding",
+ "progress": 86
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Invalid",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Onboarded",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Onboarded",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Invalid",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Invalid",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Invalid",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Invalid",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Invalid",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Invalid",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Invalid",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Invalid",
+ "progress": 100
+ },
+ {
+ "name":"Demo_vims_zte",
+ "type":"NS",
+ "version":"1.0",
+ "status":"Invalid",
+ "progress": 100
+ }
+ ]
+}
diff --git a/usecaseui-portal/src/assets/json/p_interfaces1.json b/usecaseui-portal/src/assets/json/p_interfaces1.json
new file mode 100644
index 00000000..399c21b9
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/p_interfaces1.json
@@ -0,0 +1,17 @@
+[
+ {
+ "interface-name": "nodeId-78.78.78.78-ltpId-5"
+ },
+ {
+ "interface-name": "nodeId-78.78.78.78-ltpId-4"
+ },
+ {
+ "interface-name": "nodeId-78.78.78.78-ltpId-3"
+ },
+ {
+ "interface-name": "nodeId-78.78.78.78-ltpId-2"
+ },
+ {
+ "interface-name": "nodeId-78.78.78.78-ltpId-1"
+ }
+]
diff --git a/usecaseui-portal/src/assets/json/p_interfaces2.json b/usecaseui-portal/src/assets/json/p_interfaces2.json
new file mode 100644
index 00000000..4baf8b85
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/p_interfaces2.json
@@ -0,0 +1,17 @@
+[
+ {
+ "interface-name": "nodeId-79.79.79.79-ltpId-5"
+ },
+ {
+ "interface-name": "nodeId-79.79.79.79-ltpId-4"
+ },
+ {
+ "interface-name": "nodeId-79.79.79.79-ltpId-3"
+ },
+ {
+ "interface-name": "nodeId-79.79.79.79-ltpId-2"
+ },
+ {
+ "interface-name": "nodeId-79.79.79.79-ltpId-1"
+ }
+]
diff --git a/usecaseui-portal/src/assets/json/pnfdetail-domain.json b/usecaseui-portal/src/assets/json/pnfdetail-domain.json
new file mode 100644
index 00000000..c337bd97
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/pnfdetail-domain.json
@@ -0,0 +1,29 @@
+{
+ "pnf-name": "pnf1000",
+ "pnf-id": "79.79.79.79",
+ "in-maint": true,
+ "resource-version": "1536028638695",
+ "admin-status": "up",
+ "operational-status": "up",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "network-resource",
+ "relationship-label": "tosca.relationships.network.LinksTo",
+ "related-link": "/aai/v13/network/network-resources/network-resource/1000",
+ "relationship-data": [
+ {
+ "relationship-key": "network-resource.network-id",
+ "relationship-value": "1000"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "network-resource.network-id",
+ "property-value": "1000"
+ }
+ ]
+ }
+ ]
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/progress.json b/usecaseui-portal/src/assets/json/progress.json
new file mode 100644
index 00000000..1a36c1e2
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/progress.json
@@ -0,0 +1,13 @@
+{
+ "operationStatus":{
+ "operationId": "XXXXXX",
+ "operation": "create|delete|update|scale",
+ "result": "finished|error|processing",
+ "reason": "",
+ "userId": "",
+ "operationContent": "Be creating pop.",
+ "progress": 0,
+ "operateAt": "",
+ "finishedAt": ""
+ }
+}
diff --git a/usecaseui-portal/src/assets/json/sdwanvpnServiceTemplateParameters.json b/usecaseui-portal/src/assets/json/sdwanvpnServiceTemplateParameters.json
new file mode 100644
index 00000000..cabf0e12
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/sdwanvpnServiceTemplateParameters.json
@@ -0,0 +1,57 @@
+{
+ "invariantUUID": "88dcb2f0-085b-4548-8b93-0882e37d25d8",
+ "uuid": "462f84e5-f0e5-44c5-ab95-38fb4bf77064",
+ "name": "SDWANVPNInfraService",
+ "type": "Service",
+ "version": "null",
+ "description": "SDWAN VPN Infra",
+ "category": "E2E Service",
+ "subcategory": "null",
+ "customizationUuid": "null",
+ "inputs": [
+ {
+ "name": "sdwanconnectivity0_topology",
+ "type": "string",
+ "description": "full mesh, hub-spoke",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sdwanconnectivity0_name",
+ "type": "string",
+ "description": "the name of this VPM object",
+ "isRequired": "true",
+ "defaultValue": "null"
+ }
+ ],
+ "nestedTemplates": [
+ {
+ "invariantUUID": "f99a9a23-c88e-44ff-a4dc-22b88675d278",
+ "uuid": "7baa7742-3a13-4288-8330-868015adc340",
+ "name": "SDWANConnectivity",
+ "type": "VL",
+ "version": "1.0",
+ "description": "Represents SDWAN Connectivity.",
+ "category": "Generic",
+ "subcategory": "Infrastructure",
+ "customizationUuid": "94ec574b-2306-4cbd-8214-09662b040f73",
+ "inputs": [
+ {
+ "name": "sdwanconnectivity0_topology",
+ "type": "string",
+ "description": "full mesh, hub-spoke",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sdwanconnectivity0_name",
+ "type": "string",
+ "description": "the name of this VPM object",
+ "isRequired": "true",
+ "defaultValue": "null"
+ }
+ ],
+ "nestedTemplates": []
+ }
+ ]
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/serviceTemplates.json b/usecaseui-portal/src/assets/json/serviceTemplates.json
new file mode 100644
index 00000000..8de26a7d
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/serviceTemplates.json
@@ -0,0 +1,19 @@
+
+[
+ {"name":"template1","uuid":"uuidxxx","invariantUUID":"dddd1","version":"1.20"},
+ {"name":"template2","uuid":"uuidxxx","invariantUUID":"dddd2","version":"1.20"},
+ {"name":"template3","uuid":"uuidxxxx","invariantUUID":"dddd3","version":"1.20"},
+ {"name":"template4","uuid":"uuidaaa","invariantUUID":"dddd4","version":"1.20"},
+ {"name":"template5","uuid":"uuidaaa","invariantUUID":"dddd5","version":"1.20"},
+ {"name":"template6","uuid":"uuidaaaa","invariantUUID":"dddd6","version":"1.20"},
+ {"name":"template7","uuid":"uuidbbb","invariantUUID":"dddd7","version":"1.20"},
+ {"name":"template8","uuid":"uuidbbb","invariantUUID":"dddd8","version":"1.20"},
+ {"name":"template9","uuid":"uuidbbbb","invariantUUID":"dddd9","version":"1.20"},
+ {"name":"template10","uuid":"uuidaaaa","invariantUUID":"dddd10","version":"1.20"},
+ {"name":"template11","uuid":"uuidxxx","invariantUUID":"dddd11","version":"1.20"},
+ {"name":"template12","uuid":"uuidccc","invariantUUID":"dddd12","version":"1.20"},
+ {"name":"template13","uuid":"uuidccc","invariantUUID":"dddd13","version":"1.20"},
+ {"name":"template14","uuid":"uuidccc","invariantUUID":"dddd14","version":"1.20"},
+ {"name":"template15","uuid":"uuidxxx","invariantUUID":"dddd15","version":"1.20"},
+ {"name":"template16","uuid":"uuidbbbb","invariantUUID":"dddd16","version":"1.20"}
+]
diff --git a/usecaseui-portal/src/assets/json/serviceTemplates2.json b/usecaseui-portal/src/assets/json/serviceTemplates2.json
new file mode 100644
index 00000000..93202786
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/serviceTemplates2.json
@@ -0,0 +1,43 @@
+
+[
+ {
+ "uuid": "d0a4af63-570c-40b3-a26f-ef11366f0a03",
+ "invariantUUID": "88dcb2f0-085b-4548-8b93-0882e37d25d8",
+ "name": "SDWANVPNInfraService",
+ "version": "2.0",
+ "toscaModelURL": "/sdc/v1/catalog/services/d0a4af63-570c-40b3-a26f-ef11366f0a03/toscaModel",
+ "category": "E2E Service"
+ },
+ {
+ "uuid": "4ca96a53-2e18-4297-8dc7-5776fdf6871b",
+ "invariantUUID": "21886a96-0664-47a3-beae-766952f2059f",
+ "name": "SOTNVPNInfraService",
+ "version": "2.0",
+ "toscaModelURL": "/sdc/v1/catalog/services/4ca96a53-2e18-4297-8dc7-5776fdf6871b/toscaModel",
+ "category": "E2E Service"
+ },
+ {
+ "uuid": "ea8bb4d2-00ea-4aeb-ad76-20ac8cb1c99c",
+ "invariantUUID": "342ff5e8-5592-4455-a537-a81172c9d541",
+ "name": "sowsiteservice",
+ "version": "3.0",
+ "toscaModelURL": "/sdc/v1/catalog/services/ea8bb4d2-00ea-4aeb-ad76-20ac8cb1c99c/toscaModel",
+ "category": "E2E Service"
+ },
+ {
+ "uuid": "cb756ffb-8d91-49fb-86f7-12ceb2b13158",
+ "invariantUUID": "a7029145-4294-4664-b619-00dc959a1ff6",
+ "name": "SiteServiceV3",
+ "version": "1.0",
+ "toscaModelURL": "/sdc/v1/catalog/services/cb756ffb-8d91-49fb-86f7-12ceb2b13158/toscaModel",
+ "category": "E2E Service"
+ },
+ {
+ "uuid": "4b4b3ef8-6747-4111-b9e0-81cf251c0068",
+ "invariantUUID": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+ "name": "SiteService",
+ "version": "2.0",
+ "toscaModelURL": "/sdc/v1/catalog/services/4b4b3ef8-6747-4111-b9e0-81cf251c0068/toscaModel",
+ "category": "E2E Service"
+ }
+]
diff --git a/usecaseui-portal/src/assets/json/serviceTypes.json b/usecaseui-portal/src/assets/json/serviceTypes.json
new file mode 100644
index 00000000..cb1c20a5
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/serviceTypes.json
@@ -0,0 +1,18 @@
+
+[
+ {
+ "service-type": "CCVPN",
+ "temp-ub-sub-account-id": "sotnaccount",
+ "resource-version": "1535601345780"
+ },
+ {
+ "service-type": "SOTN",
+ "temp-ub-sub-account-id": "sotnaccount",
+ "resource-version": "1535601330040"
+ },
+ {
+ "service-type": "CCVPN1",
+ "temp-ub-sub-account-id": "sotnaccount",
+ "resource-version": "1536111036667"
+ }
+] \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/servicesList.json b/usecaseui-portal/src/assets/json/servicesList.json
new file mode 100644
index 00000000..61ddb7a5
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/servicesList.json
@@ -0,0 +1,4 @@
+{
+ "customer":["aaaaa","bbbbb","ccccc","ddddd"],
+ "serviceType":["aaaaa","bbbbbb","cccc","ddddddd"]
+}
diff --git a/usecaseui-portal/src/assets/json/servicesTableData.json b/usecaseui-portal/src/assets/json/servicesTableData.json
new file mode 100644
index 00000000..07d4cbe2
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/servicesTableData.json
@@ -0,0 +1,127 @@
+{
+ "total":365,
+ "tableList":[
+ {
+ "serviceId":"foeigiaaegaf",
+ "name":"demo-test5",
+ "type":"voLTE type",
+ "status":"Active",
+ "progress": 100,
+ "expand": false,
+ "children":[
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+ ]
+ },
+ {
+ "serviceId":"foeigiaaegaf",
+ "name":"demo-test5",
+ "type":"voLTE type",
+ "status":"Closed",
+ "progress": 100,
+ "expand" : false,
+ "children":[
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+ ]
+ },
+ {
+ "serviceId":"foeigiaaegaf",
+ "name":"demo-test5",
+ "type":"voLTE type",
+ "status":"Onboarding",
+ "progress": 50,
+ "expand" : false,
+ "children":[
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+ ]
+ },
+ {
+ "serviceId":"foeigiaaegaf",
+ "name":"demo-test5",
+ "type":"voLTE type",
+ "status":"Deleting",
+ "progress": 25,
+ "expand": false,
+ "children":[
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+ ]
+ },
+ {
+ "serviceId":"foeigiaaegaf",
+ "name":"demo-test5",
+ "type":"voLTE type",
+ "status":"Updating",
+ "progress": 45,
+ "expand": false,
+ "children":[
+
+ ]
+ },
+ {
+ "serviceId":"foeigiaaegaf",
+ "name":"demo-test5",
+ "type":"voLTE type",
+ "status":"Creating",
+ "progress": 60,
+ "expand": false,
+ "children":[
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+ ]
+ },
+ {
+ "serviceId":"foeigiaaegaf",
+ "name":"demo-test5",
+ "type":"voLTE type",
+ "status":"Creating",
+ "progress": 60,
+ "expand": false,
+ "children":[
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+ ]
+ },
+ {
+ "serviceId":"foeigiaaegaf",
+ "name":"demo-test5",
+ "type":"voLTE type",
+ "status":"Creating",
+ "progress": 60,
+ "expand": false,
+ "children":[
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+ ]
+ },
+ {
+ "serviceId":"foeigiaaegaf",
+ "name":"demo-test5",
+ "type":"voLTE type",
+ "status":"Creating",
+ "progress": 60,
+ "expand": false,
+ "children":[
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+ ]
+ },
+ {
+ "serviceId":"foeigiaaegaf",
+ "name":"demo-test5",
+ "type":"voLTE type",
+ "status":"Creating",
+ "progress": 60,
+ "expand": false,
+ "children":[
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+ {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+ ]
+ }
+ ]
+}
diff --git a/usecaseui-portal/src/assets/json/siteAddressData.json b/usecaseui-portal/src/assets/json/siteAddressData.json
new file mode 100644
index 00000000..4b080f50
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/siteAddressData.json
@@ -0,0 +1,39 @@
+[
+ {
+ "location" : "Chuangxin Building,Tianningsi,Xicheng,Beijing",
+ "access-provider-id": "3333",
+ "access-client-id": "4444",
+ "access-topology-id": "11",
+ "access-node-id": "10.10.10.10",
+ "access-ltp-id": "1",
+ "host" : ""
+ },
+ {
+ "location" : "CMCC International Data Center,Hongkong",
+ "access-provider-id": "3333",
+ "access-client-id": "4444",
+ "access-topology-id": "11",
+ "access-node-id": "10.10.10.10",
+ "access-ltp-id": "2",
+ "host" : ""
+ },
+ {
+ "location" : "VDF International Data Center,Hongkong",
+ "access-provider-id": "pid000",
+ "access-client-id": "cid000",
+ "access-topology-id": "tid000",
+ "access-node-id": "11.11.11.11",
+ "access-ltp-id": "2",
+ "host" : "http://10.10.10.10"
+ },
+ {
+ "location" : "University College London,Gower Street,London",
+ "access-provider-id": "5555",
+ "access-client-id": "6666",
+ "access-topology-id": "22",
+ "access-node-id": "11.11.11.11",
+ "access-ltp-id": "2",
+ "host" : "http://10.10.10.10"
+ }
+]
+
diff --git a/usecaseui-portal/src/assets/json/siteServiceTemplateParameters.json b/usecaseui-portal/src/assets/json/siteServiceTemplateParameters.json
new file mode 100644
index 00000000..53368e32
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/siteServiceTemplateParameters.json
@@ -0,0 +1,308 @@
+{
+ "invariantUUID": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+ "uuid": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838",
+ "name": "SiteService",
+ "type": "Service",
+ "version": "null",
+ "description": "Site Service",
+ "category": "E2E Service",
+ "subcategory": "null",
+ "customizationUuid": "null",
+ "inputs": [
+ {
+ "name": "internet_sitewanport_deviceName",
+ "type": "string",
+ "description": "The device name in the site",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "mpls_sitewanport_description",
+ "type": "string",
+ "description": "The description of the WAN port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sitevf_site_type",
+ "type": "string",
+ "description": "The gateway option is used for SDWAN connectivity",
+ "isRequired": "true",
+ "defaultValue": "Single Gateway"
+ },
+ {
+ "name": "sitevf_site_longitude",
+ "type": "string",
+ "description": "The longitude of the site",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "mpls_sitewanport_outputBandwidth",
+ "type": "string",
+ "description": "The output bandwidth of the WAN port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "devicevf_device_esn",
+ "type": "string",
+ "description": "Device serial number",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sitevf_site_role",
+ "type": "string",
+ "description": "This is used for SDWAN only",
+ "isRequired": "true",
+ "defaultValue": "dsvpn-hub"
+ },
+ {
+ "name": "internet_sitewanport_providerIpAddress",
+ "type": "string",
+ "description": "The provider IP address of the provider CE",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnvpnattachmentvf_sotncondition_cVLAN",
+ "type": "string",
+ "description": "The cvlan for the site used for ethernet type connectivity.",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sitevf_site_address",
+ "type": "string",
+ "description": "the address of this site",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "mpls_sitewanport_portType",
+ "type": "string",
+ "description": "the port type of the device.1 GE, 2 FE, 3 XGE, 4 LTE, 5 xDSL(ATM), 6 xSDL(PTM)",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "mpls_sitewanport_transportNetworkName",
+ "type": "string",
+ "description": "The transport network of the WAN port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "internet_sitewanport_inputBandwidth",
+ "type": "string",
+ "description": "The input bandwidth of the WAN port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "mpls_sitewanport_portNumber",
+ "type": "string",
+ "description": "the port number of the device",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "internet_sitewanport_description",
+ "type": "string",
+ "description": "The description of the WAN port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "internet_sitewanport_transportNetworkName",
+ "type": "string",
+ "description": "The transport network of the WAN port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sitevf_site_latitude",
+ "type": "string",
+ "description": "The latitude of the site",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sitevf_site_controlPoint",
+ "type": "string",
+ "description": "The control point of the site,only for sd-wan-edge",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "internet_sitewanport_outputBandwidth",
+ "type": "string",
+ "description": "The output bandwidth of the WAN port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sitevf_site_name",
+ "type": "string",
+ "description": "the name of this site",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sitevf_site_description",
+ "type": "string",
+ "description": "The description of the site",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnvpnattachmentvf_sotncondition_clientSignal",
+ "type": "string",
+ "description": "The client signal for the site used for client type connectivity.",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "internet_sitewanport_portType",
+ "type": "string",
+ "description": "the port type of the device.1 GE, 2 FE, 3 XGE, 4 LTE, 5 xDSL(ATM), 6 xSDL(PTM)",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "internet_sitewanport_name",
+ "type": "string",
+ "description": "The name of the WAN port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "mpls_sitewanport_deviceName",
+ "type": "string",
+ "description": "The device name in the site",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "mpls_sitewanport_providerIpAddress",
+ "type": "string",
+ "description": "The provider IP address of the provider CE",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "mpls_sitewanport_inputBandwidth",
+ "type": "string",
+ "description": "The input bandwidth of the WAN port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sitevf_site_emails",
+ "type": "string",
+ "description": "the emails of this site",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "devicevf_device_class",
+ "type": "string",
+ "description": "The class should be VNF/PNF",
+ "isRequired": "true",
+ "defaultValue": "PNF"
+ },
+ {
+ "name": "sdwanvpnattachmentvf_sdwancondition_role",
+ "type": "string",
+ "description": "the role of the site.hub/spoke.",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "mpls_sitewanport_ipAddress",
+ "type": "string",
+ "description": "The public IP of the WAN Port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "devicevf_device_name",
+ "type": "string",
+ "description": "the name of the device",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sdwanvpnattachmentvf_sdwancondition_sdwanVpnName",
+ "type": "string",
+ "description": "The device Id of the site",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "internet_sitewanport_portNumber",
+ "type": "string",
+ "description": "the port number of the device",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnvpnattachmentvf_sotncondition_sotnVpnName",
+ "type": "string",
+ "description": "References the SOTN VPN Infra service",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "devicevf_device_type",
+ "type": "string",
+ "description": "The type of the device",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sitevf_site_postcode",
+ "type": "string",
+ "description": "The postcode of the site",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "devicevf_device_version",
+ "type": "string",
+ "description": "The version of the device",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "devicevf_device_vendor",
+ "type": "string",
+ "description": "The vendor of the device",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "mpls_sitewanport_name",
+ "type": "string",
+ "description": "The name of the WAN port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "devicevf_device_systemIp",
+ "type": "string",
+ "description": "The system ip of the device",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "internet_sitewanport_ipAddress",
+ "type": "string",
+ "description": "The public IP of the WAN Port",
+ "isRequired": "true",
+ "defaultValue": "null"
+ }
+ ],
+ "nestedTemplates": []
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/sotn-connectivity.json b/usecaseui-portal/src/assets/json/sotn-connectivity.json
new file mode 100644
index 00000000..6ac0a453
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/sotn-connectivity.json
@@ -0,0 +1,94 @@
+{
+ "connectivity": [
+ {
+ "connectivity-id": "4efe6dff-acfc-4d13-a3fd-1177d3c08e84",
+ "bandwidth-profile-name": "vpn1",
+ "vpn-type": "ethernet",
+ "color-aware": "c1",
+ "coupling-flag": "c2",
+ "etht-svc-name": "SOTNVPNInfra",
+ "access-provider-id": "10",
+ "access-client-id": "10",
+ "access-topology-id": "10",
+ "access-node-id": "10.10.10.10",
+ "access-ltp-id": "14",
+ "connectivity-selflink": "restconf/config/GENERIC-RESOURCE-API:services/service/10/service-data/networks/network/3efe6dff-acfc-4d13-a3fd-1177d3c08e88/network-data/",
+ "operational-status": "Created",
+ "model-customization-id": "b44071c8-04fd-4d6b-b6af-772cbfaa1129",
+ "model-invariant-id": "1b9c677d-fddf-4b70-938b-925a7fa57d43",
+ "model-version-id": "218df3c3-50dd-4c26-9e36-4771387bb771",
+ "resource-version": "1535684533349",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "vpn-binding",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/vpn-bindings/vpn-binding/pnf1000-vpn1",
+ "relationship-data": [
+ {
+ "relationship-key": "vpn-binding.vpn-id",
+ "relationship-value": "pnf1000-vpn1"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "vpn-binding.vpn-name",
+ "property-value": "pnf1000-vpn1"
+ },
+ {
+ "property-key": "vpn-binding.vpn-type",
+ "property-value": "ethernet"
+ }
+ ]
+ },
+ {
+ "related-to": "service-instance",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0",
+ "relationship-data": [
+ {
+ "relationship-key": "customer.global-customer-id",
+ "relationship-value": "Democcy"
+ },
+ {
+ "relationship-key": "service-subscription.service-type",
+ "relationship-value": "CCVPN"
+ },
+ {
+ "relationship-key": "service-instance.service-instance-id",
+ "relationship-value": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "service-instance.service-instance-name",
+ "property-value": "SOTNVPNInfra"
+ }
+ ]
+ },
+ {
+ "related-to": "vpn-binding",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/vpn-bindings/vpn-binding/pnf2000-vpn1",
+ "relationship-data": [
+ {
+ "relationship-key": "vpn-binding.vpn-id",
+ "relationship-value": "pnf2000-vpn1"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "vpn-binding.vpn-name",
+ "property-value": "pnf2000-vpn1"
+ },
+ {
+ "property-key": "vpn-binding.vpn-type",
+ "property-value": "ethernet"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ ]
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/sotn-connectivity2.json b/usecaseui-portal/src/assets/json/sotn-connectivity2.json
new file mode 100644
index 00000000..7bd55bf0
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/sotn-connectivity2.json
@@ -0,0 +1 @@
+{"connectivity":[{"connectivity-id":"4424ea5a-3603-4040-baa9-4046ed533fe5","bandwidth-profile-name":"vpn1","vpn-type":"ethernet","color-aware":"true","coupling-flag":"true","etht-svc-name":"vpn1","access-provider-id":"","access-client-id":"","access-topology-id":"","access-node-id":"","access-ltp-id":"","connectivity-selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0/service-data/networks/network/4424ea5a-3603-4040-baa9-4046ed533fe5/network-data/","operational-status":"Active","model-customization-id":"2bafc8aa-c60c-4a17-a658-db4cbca07fac","model-invariant-id":"5d0ada6b-de04-4624-9410-3baab839cd6f","model-version-id":"15e21930-3248-4148-b071-a2a9be1f9889","resource-version":"1537623789475","relationship-list":{"relationship":[{"related-to":"vpn-binding","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/vpn-bindings/vpn-binding/11.11.11.11-vpn1","relationship-data":[{"relationship-key":"vpn-binding.vpn-id","relationship-value":"11.11.11.11-vpn1"}],"related-to-property":[{"property-key":"vpn-binding.vpn-name","property-value":"11.11.11.11-vpn1"},{"property-key":"vpn-binding.vpn-type","property-value":"ethernet"}]},{"related-to":"service-instance","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"service-instance.service-instance-name","property-value":"SOTNVPNInfra"}]},{"related-to":"vpn-binding","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/vpn-bindings/vpn-binding/12.12.12.12-vpn1","relationship-data":[{"relationship-key":"vpn-binding.vpn-id","relationship-value":"12.12.12.12-vpn1"}],"related-to-property":[{"property-key":"vpn-binding.vpn-name","property-value":"12.12.12.12-vpn1"},{"property-key":"vpn-binding.vpn-type","property-value":"ethernet"}]}]}}]} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/sotnvpnServiceTemplateParameters.json b/usecaseui-portal/src/assets/json/sotnvpnServiceTemplateParameters.json
new file mode 100644
index 00000000..21abcda1
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/sotnvpnServiceTemplateParameters.json
@@ -0,0 +1,225 @@
+{
+ "invariantUUID": "21886a96-0664-47a3-beae-766952f2059f",
+ "uuid": "54836196-c411-4690-af98-900c1c3aadd7",
+ "name": "SOTNVPNInfraService",
+ "type": "Service",
+ "version": "null",
+ "description": "SOTN VPN Infra Service",
+ "category": "E2E Service",
+ "subcategory": "null",
+ "customizationUuid": "null",
+ "inputs": [
+ {
+ "name": "sotnconnectivity0_eir",
+ "type": "string",
+ "description": "The eir for SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_cir",
+ "type": "string",
+ "description": "The cir for SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_endTime",
+ "type": "string",
+ "description": "End Time",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_ebs",
+ "type": "string",
+ "description": "The ebs for SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_startTime",
+ "type": "string",
+ "description": "Start Time",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_dualLink",
+ "type": "boolean",
+ "description": "is Active/standby enabled",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_reroute",
+ "type": "boolean",
+ "description": "Whether to support automatic rerouting",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_cbs",
+ "type": "string",
+ "description": "The cbs for SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_name",
+ "type": "string",
+ "description": "the name of the SOTN connectivity",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_SLS",
+ "type": "string",
+ "description": "Business Service Level",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_description",
+ "type": "string",
+ "description": "The description of the SOTN connectivity",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_couplingFlag",
+ "type": "boolean",
+ "description": "The couplingFlag for SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_colorAware",
+ "type": "boolean",
+ "description": "The colorAware of the SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_COS",
+ "type": "string",
+ "description": "Business Class of Service of VPN",
+ "isRequired": "true",
+ "defaultValue": "standard"
+ }
+ ],
+ "nestedTemplates": [
+ {
+ "invariantUUID": "1b9c677d-fddf-4b70-938b-925a7fa57d43",
+ "uuid": "218df3c3-50dd-4c26-9e36-4771387bb771",
+ "name": "SOTNConnectivity",
+ "type": "VL",
+ "version": "1.0",
+ "description": "Represents a sotn Connectivity",
+ "category": "Generic",
+ "subcategory": "Infrastructure",
+ "customizationUuid": "b44071c8-04fd-4d6b-b6af-772cbfaa1129",
+ "inputs": [
+ {
+ "name": "sotnconnectivity0_eir",
+ "type": "string",
+ "description": "The eir for SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_cir",
+ "type": "string",
+ "description": "The cir for SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_endTime",
+ "type": "string",
+ "description": "End Time",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_ebs",
+ "type": "string",
+ "description": "The ebs for SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_startTime",
+ "type": "string",
+ "description": "Start Time",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_dualLink",
+ "type": "boolean",
+ "description": "is Active/standby enabled",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_reroute",
+ "type": "boolean",
+ "description": "Whether to support automatic rerouting",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_cbs",
+ "type": "string",
+ "description": "The cbs for SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_name",
+ "type": "string",
+ "description": "the name of the SOTN connectivity",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_SLS",
+ "type": "string",
+ "description": "Business Service Level",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_description",
+ "type": "string",
+ "description": "The description of the SOTN connectivity",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_couplingFlag",
+ "type": "boolean",
+ "description": "The couplingFlag for SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_colorAware",
+ "type": "boolean",
+ "description": "The colorAware of the SOTN connectivity. Only for Ethernet type",
+ "isRequired": "true",
+ "defaultValue": "null"
+ },
+ {
+ "name": "sotnconnectivity0_COS",
+ "type": "string",
+ "description": "Business Class of Service of VPN",
+ "isRequired": "true",
+ "defaultValue": "standard"
+ }
+ ],
+ "nestedTemplates": []
+ }
+ ]
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/specific_link _nfo.json b/usecaseui-portal/src/assets/json/specific_link _nfo.json
new file mode 100644
index 00000000..e9911409
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/specific_link _nfo.json
@@ -0,0 +1,52 @@
+{
+ "link-name": "nodeId-79.79.79.79-ltpId-4_nodeId-78.78.78.78-ltpId-4",
+ "in-maint": false,
+ "link-type": "some type",
+ "speed-value": "some speed",
+ "resource-version": "1536212883031",
+ "operational-status": "up",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "p-interface",
+ "relationship-label": "tosca.relationships.network.LinksTo",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-4",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf1000"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "nodeId-79.79.79.79-ltpId-4"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ },
+ {
+ "related-to": "p-interface",
+ "relationship-label": "tosca.relationships.network.LinksTo",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf2000/p-interfaces/p-interface/nodeId-78.78.78.78-ltpId-4",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf2000"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "nodeId-78.78.78.78-ltpId-4"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ }
+ ]
+ }
+}
diff --git a/usecaseui-portal/src/assets/json/status.json b/usecaseui-portal/src/assets/json/status.json
new file mode 100644
index 00000000..eeff6f35
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/status.json
@@ -0,0 +1,3 @@
+{
+ "status":"SUCCESS"
+}
diff --git a/usecaseui-portal/src/assets/json/status2.json b/usecaseui-portal/src/assets/json/status2.json
new file mode 100644
index 00000000..05e0a4fc
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/status2.json
@@ -0,0 +1 @@
+"fail"
diff --git a/usecaseui-portal/src/assets/json/url.json b/usecaseui-portal/src/assets/json/url.json
new file mode 100644
index 00000000..e84b42d8
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/url.json
@@ -0,0 +1,8 @@
+{
+ "esr-system-info-id": "gongjie666",
+ "service-url": "http://10.10.10.10:8080/",
+ "user-name": "demo",
+ "password": "demo123456!",
+ "system-type": "ONAP",
+ "resource-version": "1536221798873"
+}
diff --git a/usecaseui-portal/src/assets/json/vpnbinding.json b/usecaseui-portal/src/assets/json/vpnbinding.json
new file mode 100644
index 00000000..04ff2a6d
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/vpnbinding.json
@@ -0,0 +1,82 @@
+{
+ "vpn-binding": [
+ {
+ "vpn-id": "pnf1000-vpn1",
+ "vpn-name": "pnf1000-vpn1",
+ "vpn-type": "ethernet",
+ "access-provider-id": "5555",
+ "access-client-id": "6666",
+ "access-topology-id": "100",
+ "src-access-node-id": "10.10.10.10",
+ "src-access-ltp-id": "14",
+ "dst-access-node-id": "10.10.10.10",
+ "dst-access-ltp-id": "2",
+ "operational-status": "Created",
+ "model-customization-id": "",
+ "model-invariant-id": "",
+ "model-version-id": "",
+ "resource-version": "1536135677693",
+ "relationship-list": {
+ "relationship": [
+ {
+ "related-to": "connectivity",
+ "relationship-label": "org.onap.relationships.inventory.PartOf",
+ "related-link": "/aai/v13/network/connectivities/connectivity/4efe6dff-acfc-4d13-a3fd-1177d3c08e84",
+ "relationship-data": [
+ {
+ "relationship-key": "connectivity.connectivity-id",
+ "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e84"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "connectivity.etht-svc-name",
+ "property-value": "SOTNVPNInfra"
+ }
+ ]
+ },
+ {
+ "related-to": "p-interface",
+ "relationship-label": "org.onap.relationships.inventory.BindsTo",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-2",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf1000"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "nodeId-79.79.79.79-ltpId-2"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ },
+ {
+ "related-to": "p-interface",
+ "relationship-label": "org.onap.relationships.inventory.BindsTo",
+ "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-1",
+ "relationship-data": [
+ {
+ "relationship-key": "pnf.pnf-name",
+ "relationship-value": "pnf1000"
+ },
+ {
+ "relationship-key": "p-interface.interface-name",
+ "relationship-value": "nodeId-79.79.79.79-ltpId-1"
+ }
+ ],
+ "related-to-property": [
+ {
+ "property-key": "p-interface.prov-status"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ ]
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/environments/environment.prod.ts b/usecaseui-portal/src/environments/environment.prod.ts
new file mode 100644
index 00000000..3612073b
--- /dev/null
+++ b/usecaseui-portal/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
diff --git a/usecaseui-portal/src/environments/environment.ts b/usecaseui-portal/src/environments/environment.ts
new file mode 100644
index 00000000..b7f639ae
--- /dev/null
+++ b/usecaseui-portal/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+ production: false
+};
diff --git a/usecaseui-portal/src/favicon.ico b/usecaseui-portal/src/favicon.ico
new file mode 100644
index 00000000..8081c7ce
--- /dev/null
+++ b/usecaseui-portal/src/favicon.ico
Binary files differ
diff --git a/usecaseui-portal/src/index.html b/usecaseui-portal/src/index.html
new file mode 100644
index 00000000..f8281491
--- /dev/null
+++ b/usecaseui-portal/src/index.html
@@ -0,0 +1,29 @@
+<!--
+ 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.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Uui2</title>
+ <base href="/">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+ <app-root></app-root>
+</body>
+</html>
diff --git a/usecaseui-portal/src/main.ts b/usecaseui-portal/src/main.ts
new file mode 100644
index 00000000..91ec6da5
--- /dev/null
+++ b/usecaseui-portal/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+ .catch(err => console.log(err));
diff --git a/usecaseui-portal/src/my-theme.css b/usecaseui-portal/src/my-theme.css
new file mode 100644
index 00000000..ac66bcc9
--- /dev/null
+++ b/usecaseui-portal/src/my-theme.css
@@ -0,0 +1,18190 @@
+/*
+ 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.
+*/
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
+/* stylelint-disable at-rule-no-unknown */
+@font-face {
+ font-family: "Monospaced Number";
+ src: local("Tahoma");
+ unicode-range: U+30-39;
+}
+@font-face {
+ font-family: "Chinese Quote";
+ src: local("PingFang SC"), local("SimSun");
+ unicode-range: U+2018, U+2019, U+201c, U+201d;
+}
+html,
+body {
+ width: 100%;
+ height: 100%;
+}
+input::-ms-clear,
+input::-ms-reveal {
+ display: none;
+}
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+html {
+ font-family: sans-serif;
+ line-height: 1.15;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ -ms-overflow-style: scrollbar;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+article,
+aside,
+dialog,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section {
+ display: block;
+}
+body {
+ margin: 0;
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ background-color: #fff;
+}
+[tabindex="-1"]:focus {
+ outline: none !important;
+}
+hr {
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin-top: 0;
+ margin-bottom: .5em;
+ color: rgba(0, 0, 0, 0.85);
+ font-weight: 500;
+}
+p {
+ margin-top: 0;
+ margin-bottom: 1em;
+}
+abbr[title],
+abbr[data-original-title] {
+ text-decoration: underline;
+ text-decoration: underline dotted;
+ cursor: help;
+ border-bottom: 0;
+}
+address {
+ margin-bottom: 1em;
+ font-style: normal;
+ line-height: inherit;
+}
+input[type="text"],
+input[type="password"],
+input[type="number"],
+textarea {
+ -webkit-appearance: none;
+}
+ol,
+ul,
+dl {
+ margin-top: 0;
+ margin-bottom: 1em;
+}
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+ margin-bottom: 0;
+}
+dt {
+ font-weight: 500;
+}
+dd {
+ margin-bottom: .5em;
+ margin-left: 0;
+}
+blockquote {
+ margin: 0 0 1em;
+}
+dfn {
+ font-style: italic;
+}
+b,
+strong {
+ font-weight: bolder;
+}
+small {
+ font-size: 80%;
+}
+sub,
+sup {
+ position: relative;
+ font-size: 75%;
+ line-height: 0;
+ vertical-align: baseline;
+}
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
+a {
+ color: #1890ff;
+ background-color: transparent;
+ text-decoration: none;
+ outline: none;
+ cursor: pointer;
+ transition: color .3s;
+ -webkit-text-decoration-skip: objects;
+}
+a:focus {
+ text-decoration: underline;
+ text-decoration-skip: ink;
+}
+a:hover {
+ color: #40a9ff;
+}
+a:active {
+ color: #096dd9;
+}
+a:active,
+a:hover {
+ outline: 0;
+ text-decoration: none;
+}
+a[disabled] {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+ pointer-events: none;
+}
+pre,
+code,
+kbd,
+samp {
+ font-family: Consolas, Menlo, Courier, monospace;
+ font-size: 1em;
+}
+pre {
+ margin-top: 0;
+ margin-bottom: 1em;
+ overflow: auto;
+}
+figure {
+ margin: 0 0 1em;
+}
+img {
+ vertical-align: middle;
+ border-style: none;
+}
+svg:not(:root) {
+ overflow: hidden;
+}
+a,
+area,
+button,
+[role="button"],
+input:not([type=range]),
+label,
+select,
+summary,
+textarea {
+ touch-action: manipulation;
+}
+table {
+ border-collapse: collapse;
+}
+caption {
+ padding-top: .75em;
+ padding-bottom: .3em;
+ color: rgba(0, 0, 0, 0.45);
+ text-align: left;
+ caption-side: bottom;
+}
+th {
+ text-align: inherit;
+}
+input,
+button,
+select,
+optgroup,
+textarea {
+ margin: 0;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ color: inherit;
+}
+button,
+input {
+ overflow: visible;
+}
+button,
+select {
+ text-transform: none;
+}
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ padding: 0;
+ border-style: none;
+}
+input[type="radio"],
+input[type="checkbox"] {
+ box-sizing: border-box;
+ padding: 0;
+}
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+ -webkit-appearance: listbox;
+}
+textarea {
+ overflow: auto;
+ resize: vertical;
+}
+fieldset {
+ min-width: 0;
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+legend {
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ padding: 0;
+ margin-bottom: .5em;
+ font-size: 1.5em;
+ line-height: inherit;
+ color: inherit;
+ white-space: normal;
+}
+progress {
+ vertical-align: baseline;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+[type="search"] {
+ outline-offset: -2px;
+ -webkit-appearance: none;
+}
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+ font: inherit;
+ -webkit-appearance: button;
+}
+output {
+ display: inline-block;
+}
+summary {
+ display: list-item;
+}
+template {
+ display: none;
+}
+[hidden] {
+ display: none !important;
+}
+mark {
+ padding: .2em;
+ background-color: #feffe6;
+}
+::selection {
+ background: #1890ff;
+ color: #fff;
+}
+.clearfix {
+ zoom: 1;
+}
+.clearfix:before,
+.clearfix:after {
+ content: " ";
+ display: table;
+}
+.clearfix:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+@font-face {
+ font-family: 'anticon';
+ src: url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.eot');
+ /* IE9*/
+ src: url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.woff') format('woff'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.ttf') format('truetype'), /* iOS 4.1- */ url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.svg#iconfont') format('svg');
+}
+.anticon {
+ display: inline-block;
+ font-style: normal;
+ vertical-align: baseline;
+ text-align: center;
+ text-transform: none;
+ line-height: 1;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+.anticon:before {
+ display: block;
+ font-family: "anticon" !important;
+}
+.anticon-step-forward:before {
+ content: "\e600";
+}
+.anticon-step-backward:before {
+ content: "\e601";
+}
+.anticon-forward:before {
+ content: "\e602";
+}
+.anticon-backward:before {
+ content: "\e603";
+}
+.anticon-caret-right:before {
+ content: "\e604";
+}
+.anticon-caret-left:before {
+ content: "\e605";
+}
+.anticon-caret-down:before {
+ content: "\e606";
+}
+.anticon-caret-up:before {
+ content: "\e607";
+}
+.anticon-right-circle:before {
+ content: "\e608";
+}
+.anticon-circle-right:before {
+ content: "\e608";
+}
+.anticon-caret-circle-right:before {
+ content: "\e608";
+}
+.anticon-left-circle:before {
+ content: "\e609";
+}
+.anticon-circle-left:before {
+ content: "\e609";
+}
+.anticon-caret-circle-left:before {
+ content: "\e609";
+}
+.anticon-up-circle:before {
+ content: "\e60a";
+}
+.anticon-circle-up:before {
+ content: "\e60a";
+}
+.anticon-caret-circle-up:before {
+ content: "\e60a";
+}
+.anticon-down-circle:before {
+ content: "\e60b";
+}
+.anticon-circle-down:before {
+ content: "\e60b";
+}
+.anticon-caret-circle-down:before {
+ content: "\e60b";
+}
+.anticon-right-circle-o:before {
+ content: "\e60c";
+}
+.anticon-circle-o-right:before {
+ content: "\e60c";
+}
+.anticon-caret-circle-o-right:before {
+ content: "\e60c";
+}
+.anticon-left-circle-o:before {
+ content: "\e60d";
+}
+.anticon-circle-o-left:before {
+ content: "\e60d";
+}
+.anticon-caret-circle-o-left:before {
+ content: "\e60d";
+}
+.anticon-up-circle-o:before {
+ content: "\e60e";
+}
+.anticon-circle-o-up:before {
+ content: "\e60e";
+}
+.anticon-caret-circle-o-up:before {
+ content: "\e60e";
+}
+.anticon-down-circle-o:before {
+ content: "\e60f";
+}
+.anticon-circle-o-down:before {
+ content: "\e60f";
+}
+.anticon-caret-circle-o-down:before {
+ content: "\e60f";
+}
+.anticon-verticle-left:before {
+ content: "\e610";
+}
+.anticon-verticle-right:before {
+ content: "\e611";
+}
+.anticon-rollback:before {
+ content: "\e612";
+}
+.anticon-retweet:before {
+ content: "\e613";
+}
+.anticon-shrink:before {
+ content: "\e614";
+}
+.anticon-arrows-alt:before {
+ content: "\e615";
+}
+.anticon-arrow-salt:before {
+ content: "\e615";
+}
+.anticon-reload:before {
+ content: "\e616";
+}
+.anticon-double-right:before {
+ content: "\e617";
+}
+.anticon-double-left:before {
+ content: "\e618";
+}
+.anticon-arrow-down:before {
+ content: "\e619";
+}
+.anticon-arrow-up:before {
+ content: "\e61a";
+}
+.anticon-arrow-right:before {
+ content: "\e61b";
+}
+.anticon-arrow-left:before {
+ content: "\e61c";
+}
+.anticon-down:before {
+ content: "\e61d";
+}
+.anticon-up:before {
+ content: "\e61e";
+}
+.anticon-right:before {
+ content: "\e61f";
+}
+.anticon-left:before {
+ content: "\e620";
+}
+.anticon-minus-square-o:before {
+ content: "\e621";
+}
+.anticon-minus-circle:before {
+ content: "\e622";
+}
+.anticon-minus-circle-o:before {
+ content: "\e623";
+}
+.anticon-minus:before {
+ content: "\e624";
+}
+.anticon-plus-circle-o:before {
+ content: "\e625";
+}
+.anticon-plus-circle:before {
+ content: "\e626";
+}
+.anticon-plus:before {
+ content: "\e627";
+}
+.anticon-info-circle:before {
+ content: "\e628";
+}
+.anticon-info-circle-o:before {
+ content: "\e629";
+}
+.anticon-info:before {
+ content: "\e62a";
+}
+.anticon-exclamation:before {
+ content: "\e62b";
+}
+.anticon-exclamation-circle:before {
+ content: "\e62c";
+}
+.anticon-exclamation-circle-o:before {
+ content: "\e62d";
+}
+.anticon-close-circle:before {
+ content: "\e62e";
+}
+.anticon-cross-circle:before {
+ content: "\e62e";
+}
+.anticon-close-circle-o:before {
+ content: "\e62f";
+}
+.anticon-cross-circle-o:before {
+ content: "\e62f";
+}
+.anticon-check-circle:before {
+ content: "\e630";
+}
+.anticon-check-circle-o:before {
+ content: "\e631";
+}
+.anticon-check:before {
+ content: "\e632";
+}
+.anticon-close:before {
+ content: "\e633";
+}
+.anticon-cross:before {
+ content: "\e633";
+}
+.anticon-customer-service:before {
+ content: "\e634";
+}
+.anticon-customerservice:before {
+ content: "\e634";
+}
+.anticon-credit-card:before {
+ content: "\e635";
+}
+.anticon-code-o:before {
+ content: "\e636";
+}
+.anticon-book:before {
+ content: "\e637";
+}
+.anticon-bars:before {
+ content: "\e639";
+}
+.anticon-question:before {
+ content: "\e63a";
+}
+.anticon-question-circle:before {
+ content: "\e63b";
+}
+.anticon-question-circle-o:before {
+ content: "\e63c";
+}
+.anticon-pause:before {
+ content: "\e63d";
+}
+.anticon-pause-circle:before {
+ content: "\e63e";
+}
+.anticon-pause-circle-o:before {
+ content: "\e63f";
+}
+.anticon-clock-circle:before {
+ content: "\e640";
+}
+.anticon-clock-circle-o:before {
+ content: "\e641";
+}
+.anticon-swap:before {
+ content: "\e642";
+}
+.anticon-swap-left:before {
+ content: "\e643";
+}
+.anticon-swap-right:before {
+ content: "\e644";
+}
+.anticon-plus-square-o:before {
+ content: "\e645";
+}
+.anticon-frown:before {
+ content: "\e646";
+}
+.anticon-frown-circle:before {
+ content: "\e646";
+}
+.anticon-ellipsis:before {
+ content: "\e647";
+}
+.anticon-copy:before {
+ content: "\e648";
+}
+.anticon-menu-fold:before {
+ content: "\e9ac";
+}
+.anticon-mail:before {
+ content: "\e659";
+}
+.anticon-logout:before {
+ content: "\e65a";
+}
+.anticon-link:before {
+ content: "\e65b";
+}
+.anticon-area-chart:before {
+ content: "\e65c";
+}
+.anticon-line-chart:before {
+ content: "\e65d";
+}
+.anticon-home:before {
+ content: "\e65e";
+}
+.anticon-laptop:before {
+ content: "\e65f";
+}
+.anticon-star:before {
+ content: "\e660";
+}
+.anticon-star-o:before {
+ content: "\e661";
+}
+.anticon-folder:before {
+ content: "\e662";
+}
+.anticon-filter:before {
+ content: "\e663";
+}
+.anticon-file:before {
+ content: "\e664";
+}
+.anticon-exception:before {
+ content: "\e665";
+}
+.anticon-meh:before {
+ content: "\e666";
+}
+.anticon-meh-circle:before {
+ content: "\e666";
+}
+.anticon-meh-o:before {
+ content: "\e667";
+}
+.anticon-shopping-cart:before {
+ content: "\e668";
+}
+.anticon-save:before {
+ content: "\e669";
+}
+.anticon-user:before {
+ content: "\e66a";
+}
+.anticon-video-camera:before {
+ content: "\e66b";
+}
+.anticon-to-top:before {
+ content: "\e66c";
+}
+.anticon-team:before {
+ content: "\e66d";
+}
+.anticon-tablet:before {
+ content: "\e66e";
+}
+.anticon-solution:before {
+ content: "\e66f";
+}
+.anticon-search:before {
+ content: "\e670";
+}
+.anticon-share-alt:before {
+ content: "\e671";
+}
+.anticon-setting:before {
+ content: "\e672";
+}
+.anticon-poweroff:before {
+ content: "\e6d5";
+}
+.anticon-picture:before {
+ content: "\e674";
+}
+.anticon-phone:before {
+ content: "\e675";
+}
+.anticon-paper-clip:before {
+ content: "\e676";
+}
+.anticon-notification:before {
+ content: "\e677";
+}
+.anticon-mobile:before {
+ content: "\e678";
+}
+.anticon-menu-unfold:before {
+ content: "\e9ad";
+}
+.anticon-inbox:before {
+ content: "\e67a";
+}
+.anticon-lock:before {
+ content: "\e67b";
+}
+.anticon-qrcode:before {
+ content: "\e67c";
+}
+.anticon-play-circle:before {
+ content: "\e6d0";
+}
+.anticon-play-circle-o:before {
+ content: "\e6d1";
+}
+.anticon-tag:before {
+ content: "\e6d2";
+}
+.anticon-tag-o:before {
+ content: "\e6d3";
+}
+.anticon-tags:before {
+ content: "\e67d";
+}
+.anticon-tags-o:before {
+ content: "\e67e";
+}
+.anticon-cloud-o:before {
+ content: "\e67f";
+}
+.anticon-cloud:before {
+ content: "\e680";
+}
+.anticon-cloud-upload:before {
+ content: "\e681";
+}
+.anticon-cloud-download:before {
+ content: "\e682";
+}
+.anticon-cloud-download-o:before {
+ content: "\e683";
+}
+.anticon-cloud-upload-o:before {
+ content: "\e684";
+}
+.anticon-environment:before {
+ content: "\e685";
+}
+.anticon-environment-o:before {
+ content: "\e686";
+}
+.anticon-eye:before {
+ content: "\e687";
+}
+.anticon-eye-o:before {
+ content: "\e688";
+}
+.anticon-camera:before {
+ content: "\e689";
+}
+.anticon-camera-o:before {
+ content: "\e68a";
+}
+.anticon-windows:before {
+ content: "\e68b";
+}
+.anticon-apple:before {
+ content: "\e68c";
+}
+.anticon-apple-o:before {
+ content: "\e6d4";
+}
+.anticon-android:before {
+ content: "\e938";
+}
+.anticon-android-o:before {
+ content: "\e68d";
+}
+.anticon-aliwangwang:before {
+ content: "\e68e";
+}
+.anticon-aliwangwang-o:before {
+ content: "\e68f";
+}
+.anticon-export:before {
+ content: "\e691";
+}
+.anticon-edit:before {
+ content: "\e692";
+}
+.anticon-circle-down-o:before {
+ content: "\e693";
+}
+.anticon-circle-down-:before {
+ content: "\e694";
+}
+.anticon-appstore-o:before {
+ content: "\e695";
+}
+.anticon-appstore:before {
+ content: "\e696";
+}
+.anticon-scan:before {
+ content: "\e697";
+}
+.anticon-file-text:before {
+ content: "\e698";
+}
+.anticon-folder-open:before {
+ content: "\e699";
+}
+.anticon-hdd:before {
+ content: "\e69a";
+}
+.anticon-ie:before {
+ content: "\e69b";
+}
+.anticon-file-jpg:before {
+ content: "\e69c";
+}
+.anticon-like:before {
+ content: "\e64c";
+}
+.anticon-like-o:before {
+ content: "\e69d";
+}
+.anticon-dislike:before {
+ content: "\e64b";
+}
+.anticon-dislike-o:before {
+ content: "\e69e";
+}
+.anticon-delete:before {
+ content: "\e69f";
+}
+.anticon-enter:before {
+ content: "\e6a0";
+}
+.anticon-pushpin-o:before {
+ content: "\e6a1";
+}
+.anticon-pushpin:before {
+ content: "\e6a2";
+}
+.anticon-heart:before {
+ content: "\e6a3";
+}
+.anticon-heart-o:before {
+ content: "\e6a4";
+}
+.anticon-pay-circle:before {
+ content: "\e6a5";
+}
+.anticon-pay-circle-o:before {
+ content: "\e6a6";
+}
+.anticon-smile:before {
+ content: "\e6a7";
+}
+.anticon-smile-circle:before {
+ content: "\e6a7";
+}
+.anticon-smile-o:before {
+ content: "\e6a8";
+}
+.anticon-frown-o:before {
+ content: "\e6a9";
+}
+.anticon-calculator:before {
+ content: "\e6aa";
+}
+.anticon-message:before {
+ content: "\e6ab";
+}
+.anticon-chrome:before {
+ content: "\e6ac";
+}
+.anticon-github:before {
+ content: "\e6ad";
+}
+.anticon-file-unknown:before {
+ content: "\e6af";
+}
+.anticon-file-excel:before {
+ content: "\e6b0";
+}
+.anticon-file-ppt:before {
+ content: "\e6b1";
+}
+.anticon-file-word:before {
+ content: "\e6b2";
+}
+.anticon-file-pdf:before {
+ content: "\e6b3";
+}
+.anticon-desktop:before {
+ content: "\e6b4";
+}
+.anticon-upload:before {
+ content: "\e6b6";
+}
+.anticon-download:before {
+ content: "\e6b7";
+}
+.anticon-pie-chart:before {
+ content: "\e6b8";
+}
+.anticon-unlock:before {
+ content: "\e6ba";
+}
+.anticon-calendar:before {
+ content: "\e6bb";
+}
+.anticon-windows-o:before {
+ content: "\e6bc";
+}
+.anticon-dot-chart:before {
+ content: "\e6bd";
+}
+.anticon-bar-chart:before {
+ content: "\e6be";
+}
+.anticon-code:before {
+ content: "\e6bf";
+}
+.anticon-api:before {
+ content: "\e951";
+}
+.anticon-plus-square:before {
+ content: "\e6c0";
+}
+.anticon-minus-square:before {
+ content: "\e6c1";
+}
+.anticon-close-square:before {
+ content: "\e6c2";
+}
+.anticon-close-square-o:before {
+ content: "\e6c3";
+}
+.anticon-check-square:before {
+ content: "\e6c4";
+}
+.anticon-check-square-o:before {
+ content: "\e6c5";
+}
+.anticon-fast-backward:before {
+ content: "\e6c6";
+}
+.anticon-fast-forward:before {
+ content: "\e6c7";
+}
+.anticon-up-square:before {
+ content: "\e6c8";
+}
+.anticon-down-square:before {
+ content: "\e6c9";
+}
+.anticon-left-square:before {
+ content: "\e6ca";
+}
+.anticon-right-square:before {
+ content: "\e6cb";
+}
+.anticon-right-square-o:before {
+ content: "\e6cc";
+}
+.anticon-left-square-o:before {
+ content: "\e6cd";
+}
+.anticon-down-square-o:before {
+ content: "\e6ce";
+}
+.anticon-up-square-o:before {
+ content: "\e6cf";
+}
+.anticon-loading:before {
+ content: "\e64d";
+}
+.anticon-loading-3-quarters:before {
+ content: "\e6ae";
+}
+.anticon-bulb:before {
+ content: "\e649";
+}
+.anticon-select:before {
+ content: "\e64a";
+}
+.anticon-addfile:before,
+.anticon-file-add:before {
+ content: "\e910";
+}
+.anticon-addfolder:before,
+.anticon-folder-add:before {
+ content: "\e914";
+}
+.anticon-switcher:before {
+ content: "\e913";
+}
+.anticon-rocket:before {
+ content: "\e90f";
+}
+.anticon-dingding:before {
+ content: "\e923";
+}
+.anticon-dingding-o:before {
+ content: "\e925";
+}
+.anticon-bell:before {
+ content: "\e64e";
+}
+.anticon-disconnect:before {
+ content: "\e64f";
+}
+.anticon-database:before {
+ content: "\e650";
+}
+.anticon-compass:before {
+ content: "\e6db";
+}
+.anticon-barcode:before {
+ content: "\e652";
+}
+.anticon-hourglass:before {
+ content: "\e653";
+}
+.anticon-key:before {
+ content: "\e654";
+}
+.anticon-flag:before {
+ content: "\e655";
+}
+.anticon-layout:before {
+ content: "\e656";
+}
+.anticon-login:before {
+ content: "\e657";
+}
+.anticon-printer:before {
+ content: "\e673";
+}
+.anticon-sound:before {
+ content: "\e6e9";
+}
+.anticon-usb:before {
+ content: "\e6d7";
+}
+.anticon-skin:before {
+ content: "\e6d8";
+}
+.anticon-tool:before {
+ content: "\e6d9";
+}
+.anticon-sync:before {
+ content: "\e6da";
+}
+.anticon-wifi:before {
+ content: "\e6d6";
+}
+.anticon-car:before {
+ content: "\e6dc";
+}
+.anticon-copyright:before {
+ content: "\e6de";
+}
+.anticon-schedule:before {
+ content: "\e6df";
+}
+.anticon-user-add:before {
+ content: "\e6ed";
+}
+.anticon-user-delete:before {
+ content: "\e6e0";
+}
+.anticon-usergroup-add:before {
+ content: "\e6dd";
+}
+.anticon-usergroup-delete:before {
+ content: "\e6e1";
+}
+.anticon-man:before {
+ content: "\e6e2";
+}
+.anticon-woman:before {
+ content: "\e6ec";
+}
+.anticon-shop:before {
+ content: "\e6e3";
+}
+.anticon-gift:before {
+ content: "\e6e4";
+}
+.anticon-idcard:before {
+ content: "\e6e5";
+}
+.anticon-medicine-box:before {
+ content: "\e6e6";
+}
+.anticon-red-envelope:before {
+ content: "\e6e7";
+}
+.anticon-coffee:before {
+ content: "\e6e8";
+}
+.anticon-trademark:before {
+ content: "\e651";
+}
+.anticon-safety:before {
+ content: "\e6ea";
+}
+.anticon-wallet:before {
+ content: "\e6eb";
+}
+.anticon-bank:before {
+ content: "\e6ee";
+}
+.anticon-trophy:before {
+ content: "\e6ef";
+}
+.anticon-contacts:before {
+ content: "\e6f0";
+}
+.anticon-global:before {
+ content: "\e6f1";
+}
+.anticon-shake:before {
+ content: "\e94f";
+}
+.anticon-fork:before {
+ content: "\e6f2";
+}
+.anticon-dashboard:before {
+ content: "\e99a";
+}
+.anticon-profile:before {
+ content: "\e999";
+}
+.anticon-table:before {
+ content: "\e998";
+}
+.anticon-warning:before {
+ content: "\e997";
+}
+.anticon-form:before {
+ content: "\e996";
+}
+.anticon-spin:before {
+ display: inline-block;
+ animation: loadingCircle 1s infinite linear;
+}
+.anticon-weibo-square:before {
+ content: "\e6f5";
+}
+.anticon-weibo-circle:before {
+ content: "\e6f4";
+}
+.anticon-taobao-circle:before {
+ content: "\e6f3";
+}
+.anticon-html5:before {
+ content: "\e9c7";
+}
+.anticon-weibo:before {
+ content: "\e9c6";
+}
+.anticon-twitter:before {
+ content: "\e9c5";
+}
+.anticon-wechat:before {
+ content: "\e9c4";
+}
+.anticon-youtube:before {
+ content: "\e9c3";
+}
+.anticon-alipay-circle:before {
+ content: "\e9c2";
+}
+.anticon-taobao:before {
+ content: "\e9c1";
+}
+.anticon-skype:before {
+ content: "\e9c0";
+}
+.anticon-qq:before {
+ content: "\e9bf";
+}
+.anticon-medium-workmark:before {
+ content: "\e9be";
+}
+.anticon-gitlab:before {
+ content: "\e9bd";
+}
+.anticon-medium:before {
+ content: "\e9bc";
+}
+.anticon-linkedin:before {
+ content: "\e9bb";
+}
+.anticon-google-plus:before {
+ content: "\e9ba";
+}
+.anticon-dropbox:before {
+ content: "\e9b9";
+}
+.anticon-facebook:before {
+ content: "\e9b8";
+}
+.anticon-codepen:before {
+ content: "\e9b7";
+}
+.anticon-amazon:before {
+ content: "\e9b6";
+}
+.anticon-google:before {
+ content: "\e9b5";
+}
+.anticon-codepen-circle:before {
+ content: "\e9b4";
+}
+.anticon-alipay:before {
+ content: "\e9b3";
+}
+.anticon-ant-design:before {
+ content: "\e9b2";
+}
+.anticon-aliyun:before {
+ content: "\e9f4";
+}
+.anticon-zhihu:before {
+ content: "\e703";
+}
+.anticon-file-markdown:before {
+ content: "\e704";
+}
+.anticon-slack:before {
+ content: "\e705";
+}
+.anticon-slack-square:before {
+ content: "\e706";
+}
+.anticon-behance:before {
+ content: "\e707";
+}
+.anticon-behance-square:before {
+ content: "\e708";
+}
+.anticon-dribbble:before {
+ content: "\e709";
+}
+.anticon-dribbble-square:before {
+ content: "\e70a";
+}
+.anticon-instagram:before {
+ content: "\e70b";
+}
+.anticon-yuque:before {
+ content: "\e70c";
+}
+.fade-enter,
+.fade-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.fade-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.fade-enter.fade-enter-active,
+.fade-appear.fade-appear-active {
+ animation-name: antFadeIn;
+ animation-play-state: running;
+}
+.fade-leave.fade-leave-active {
+ animation-name: antFadeOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.fade-enter,
+.fade-appear {
+ opacity: 0;
+ animation-timing-function: linear;
+}
+.fade-leave {
+ animation-timing-function: linear;
+}
+@keyframes antFadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@keyframes antFadeOut {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+.move-up-enter,
+.move-up-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.move-up-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.move-up-enter.move-up-enter-active,
+.move-up-appear.move-up-appear-active {
+ animation-name: antMoveUpIn;
+ animation-play-state: running;
+}
+.move-up-leave.move-up-leave-active {
+ animation-name: antMoveUpOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.move-up-enter,
+.move-up-appear {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-up-leave {
+ animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.move-down-enter,
+.move-down-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.move-down-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.move-down-enter.move-down-enter-active,
+.move-down-appear.move-down-appear-active {
+ animation-name: antMoveDownIn;
+ animation-play-state: running;
+}
+.move-down-leave.move-down-leave-active {
+ animation-name: antMoveDownOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.move-down-enter,
+.move-down-appear {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-down-leave {
+ animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.move-left-enter,
+.move-left-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.move-left-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.move-left-enter.move-left-enter-active,
+.move-left-appear.move-left-appear-active {
+ animation-name: antMoveLeftIn;
+ animation-play-state: running;
+}
+.move-left-leave.move-left-leave-active {
+ animation-name: antMoveLeftOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.move-left-enter,
+.move-left-appear {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-left-leave {
+ animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.move-right-enter,
+.move-right-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.move-right-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.move-right-enter.move-right-enter-active,
+.move-right-appear.move-right-appear-active {
+ animation-name: antMoveRightIn;
+ animation-play-state: running;
+}
+.move-right-leave.move-right-leave-active {
+ animation-name: antMoveRightOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.move-right-enter,
+.move-right-appear {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-right-leave {
+ animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+@keyframes antMoveDownIn {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateY(100%);
+ opacity: 0;
+ }
+ 100% {
+ transform-origin: 0 0;
+ transform: translateY(0%);
+ opacity: 1;
+ }
+}
+@keyframes antMoveDownOut {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateY(0%);
+ opacity: 1;
+ }
+ 100% {
+ transform-origin: 0 0;
+ transform: translateY(100%);
+ opacity: 0;
+ }
+}
+@keyframes antMoveLeftIn {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ 100% {
+ transform-origin: 0 0;
+ transform: translateX(0%);
+ opacity: 1;
+ }
+}
+@keyframes antMoveLeftOut {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateX(0%);
+ opacity: 1;
+ }
+ 100% {
+ transform-origin: 0 0;
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+}
+@keyframes antMoveRightIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 0 0;
+ transform: translateX(100%);
+ }
+ 100% {
+ opacity: 1;
+ transform-origin: 0 0;
+ transform: translateX(0%);
+ }
+}
+@keyframes antMoveRightOut {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateX(0%);
+ opacity: 1;
+ }
+ 100% {
+ transform-origin: 0 0;
+ transform: translateX(100%);
+ opacity: 0;
+ }
+}
+@keyframes antMoveUpIn {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+ 100% {
+ transform-origin: 0 0;
+ transform: translateY(0%);
+ opacity: 1;
+ }
+}
+@keyframes antMoveUpOut {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateY(0%);
+ opacity: 1;
+ }
+ 100% {
+ transform-origin: 0 0;
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+}
+@keyframes loadingCircle {
+ 0% {
+ transform-origin: 50% 50%;
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform-origin: 50% 50%;
+ transform: rotate(360deg);
+ }
+}
+.slide-up-enter,
+.slide-up-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.slide-up-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.slide-up-enter.slide-up-enter-active,
+.slide-up-appear.slide-up-appear-active {
+ animation-name: antSlideUpIn;
+ animation-play-state: running;
+}
+.slide-up-leave.slide-up-leave-active {
+ animation-name: antSlideUpOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.slide-up-enter,
+.slide-up-appear {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-up-leave {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+.slide-down-enter,
+.slide-down-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.slide-down-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.slide-down-enter.slide-down-enter-active,
+.slide-down-appear.slide-down-appear-active {
+ animation-name: antSlideDownIn;
+ animation-play-state: running;
+}
+.slide-down-leave.slide-down-leave-active {
+ animation-name: antSlideDownOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.slide-down-enter,
+.slide-down-appear {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-down-leave {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+.slide-left-enter,
+.slide-left-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.slide-left-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.slide-left-enter.slide-left-enter-active,
+.slide-left-appear.slide-left-appear-active {
+ animation-name: antSlideLeftIn;
+ animation-play-state: running;
+}
+.slide-left-leave.slide-left-leave-active {
+ animation-name: antSlideLeftOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.slide-left-enter,
+.slide-left-appear {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-left-leave {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+.slide-right-enter,
+.slide-right-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.slide-right-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.slide-right-enter.slide-right-enter-active,
+.slide-right-appear.slide-right-appear-active {
+ animation-name: antSlideRightIn;
+ animation-play-state: running;
+}
+.slide-right-leave.slide-right-leave-active {
+ animation-name: antSlideRightOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.slide-right-enter,
+.slide-right-appear {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-right-leave {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+@keyframes antSlideUpIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 0% 0%;
+ transform: scaleY(0.8);
+ }
+ 100% {
+ opacity: 1;
+ transform-origin: 0% 0%;
+ transform: scaleY(1);
+ }
+}
+@keyframes antSlideUpOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 0% 0%;
+ transform: scaleY(1);
+ }
+ 100% {
+ opacity: 0;
+ transform-origin: 0% 0%;
+ transform: scaleY(0.8);
+ }
+}
+@keyframes antSlideDownIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 100% 100%;
+ transform: scaleY(0.8);
+ }
+ 100% {
+ opacity: 1;
+ transform-origin: 100% 100%;
+ transform: scaleY(1);
+ }
+}
+@keyframes antSlideDownOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 100% 100%;
+ transform: scaleY(1);
+ }
+ 100% {
+ opacity: 0;
+ transform-origin: 100% 100%;
+ transform: scaleY(0.8);
+ }
+}
+@keyframes antSlideLeftIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 0% 0%;
+ transform: scaleX(0.8);
+ }
+ 100% {
+ opacity: 1;
+ transform-origin: 0% 0%;
+ transform: scaleX(1);
+ }
+}
+@keyframes antSlideLeftOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 0% 0%;
+ transform: scaleX(1);
+ }
+ 100% {
+ opacity: 0;
+ transform-origin: 0% 0%;
+ transform: scaleX(0.8);
+ }
+}
+@keyframes antSlideRightIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 100% 0%;
+ transform: scaleX(0.8);
+ }
+ 100% {
+ opacity: 1;
+ transform-origin: 100% 0%;
+ transform: scaleX(1);
+ }
+}
+@keyframes antSlideRightOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 100% 0%;
+ transform: scaleX(1);
+ }
+ 100% {
+ opacity: 0;
+ transform-origin: 100% 0%;
+ transform: scaleX(0.8);
+ }
+}
+.swing-enter,
+.swing-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.swing-enter.swing-enter-active,
+.swing-appear.swing-appear-active {
+ animation-name: antSwingIn;
+ animation-play-state: running;
+}
+@keyframes antSwingIn {
+ 0%,
+ 100% {
+ transform: translateX(0);
+ }
+ 20% {
+ transform: translateX(-10px);
+ }
+ 40% {
+ transform: translateX(10px);
+ }
+ 60% {
+ transform: translateX(-5px);
+ }
+ 80% {
+ transform: translateX(5px);
+ }
+}
+.zoom-enter,
+.zoom-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-enter.zoom-enter-active,
+.zoom-appear.zoom-appear-active {
+ animation-name: antZoomIn;
+ animation-play-state: running;
+}
+.zoom-leave.zoom-leave-active {
+ animation-name: antZoomOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-enter,
+.zoom-appear {
+ transform: scale(0);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-leave {
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-big-enter,
+.zoom-big-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-big-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-big-enter.zoom-big-enter-active,
+.zoom-big-appear.zoom-big-appear-active {
+ animation-name: antZoomBigIn;
+ animation-play-state: running;
+}
+.zoom-big-leave.zoom-big-leave-active {
+ animation-name: antZoomBigOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-big-enter,
+.zoom-big-appear {
+ transform: scale(0);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-big-leave {
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-big-fast-enter,
+.zoom-big-fast-appear {
+ animation-duration: 0.1s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-big-fast-leave {
+ animation-duration: 0.1s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-big-fast-enter.zoom-big-fast-enter-active,
+.zoom-big-fast-appear.zoom-big-fast-appear-active {
+ animation-name: antZoomBigIn;
+ animation-play-state: running;
+}
+.zoom-big-fast-leave.zoom-big-fast-leave-active {
+ animation-name: antZoomBigOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-big-fast-enter,
+.zoom-big-fast-appear {
+ transform: scale(0);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-big-fast-leave {
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-up-enter,
+.zoom-up-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-up-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-up-enter.zoom-up-enter-active,
+.zoom-up-appear.zoom-up-appear-active {
+ animation-name: antZoomUpIn;
+ animation-play-state: running;
+}
+.zoom-up-leave.zoom-up-leave-active {
+ animation-name: antZoomUpOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-up-enter,
+.zoom-up-appear {
+ transform: scale(0);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-up-leave {
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-down-enter,
+.zoom-down-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-down-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-down-enter.zoom-down-enter-active,
+.zoom-down-appear.zoom-down-appear-active {
+ animation-name: antZoomDownIn;
+ animation-play-state: running;
+}
+.zoom-down-leave.zoom-down-leave-active {
+ animation-name: antZoomDownOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-down-enter,
+.zoom-down-appear {
+ transform: scale(0);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-down-leave {
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-left-enter,
+.zoom-left-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-left-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-left-enter.zoom-left-enter-active,
+.zoom-left-appear.zoom-left-appear-active {
+ animation-name: antZoomLeftIn;
+ animation-play-state: running;
+}
+.zoom-left-leave.zoom-left-leave-active {
+ animation-name: antZoomLeftOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-left-enter,
+.zoom-left-appear {
+ transform: scale(0);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-left-leave {
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-right-enter,
+.zoom-right-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-right-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.zoom-right-enter.zoom-right-enter-active,
+.zoom-right-appear.zoom-right-appear-active {
+ animation-name: antZoomRightIn;
+ animation-play-state: running;
+}
+.zoom-right-leave.zoom-right-leave-active {
+ animation-name: antZoomRightOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-right-enter,
+.zoom-right-appear {
+ transform: scale(0);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-right-leave {
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+@keyframes antZoomIn {
+ 0% {
+ opacity: 0;
+ transform: scale(0.2);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+@keyframes antZoomOut {
+ 0% {
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0.2);
+ }
+}
+@keyframes antZoomBigIn {
+ 0% {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+@keyframes antZoomBigOut {
+ 0% {
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+}
+@keyframes antZoomUpIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 50% 0%;
+ transform: scale(0.8);
+ }
+ 100% {
+ transform-origin: 50% 0%;
+ transform: scale(1);
+ }
+}
+@keyframes antZoomUpOut {
+ 0% {
+ transform-origin: 50% 0%;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 0%;
+ transform: scale(0.8);
+ }
+}
+@keyframes antZoomLeftIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 0% 50%;
+ transform: scale(0.8);
+ }
+ 100% {
+ transform-origin: 0% 50%;
+ transform: scale(1);
+ }
+}
+@keyframes antZoomLeftOut {
+ 0% {
+ transform-origin: 0% 50%;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform-origin: 0% 50%;
+ transform: scale(0.8);
+ }
+}
+@keyframes antZoomRightIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 100% 50%;
+ transform: scale(0.8);
+ }
+ 100% {
+ transform-origin: 100% 50%;
+ transform: scale(1);
+ }
+}
+@keyframes antZoomRightOut {
+ 0% {
+ transform-origin: 100% 50%;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform-origin: 100% 50%;
+ transform: scale(0.8);
+ }
+}
+@keyframes antZoomDownIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 50% 100%;
+ transform: scale(0.8);
+ }
+ 100% {
+ transform-origin: 50% 100%;
+ transform: scale(1);
+ }
+}
+@keyframes antZoomDownOut {
+ 0% {
+ transform-origin: 50% 100%;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 100%;
+ transform: scale(0.8);
+ }
+}
+.ant-motion-collapse {
+ overflow: hidden;
+}
+.ant-motion-collapse-active {
+ transition: height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+}
+nz-affix {
+ display: block;
+}
+.ant-affix {
+ position: fixed;
+ z-index: 10;
+}
+.ant-alert {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ padding: 8px 15px 8px 37px;
+ border-radius: 4px;
+}
+.ant-alert.ant-alert-no-icon {
+ padding: 8px 15px;
+}
+.ant-alert-icon {
+ top: 12.5px;
+ left: 16px;
+ position: absolute;
+}
+.ant-alert-description {
+ font-size: 14px;
+ line-height: 22px;
+ display: none;
+}
+.ant-alert-success {
+ border: 1px solid #b7eb8f;
+ background-color: #f6ffed;
+}
+.ant-alert-success .ant-alert-icon {
+ color: #52c41a;
+}
+.ant-alert-info {
+ border: 1px solid #91d5ff;
+ background-color: #e6f7ff;
+}
+.ant-alert-info .ant-alert-icon {
+ color: #1890ff;
+}
+.ant-alert-warning {
+ border: 1px solid #ffe58f;
+ background-color: #fffbe6;
+}
+.ant-alert-warning .ant-alert-icon {
+ color: #faad14;
+}
+.ant-alert-error {
+ border: 1px solid #ffa39e;
+ background-color: #fff1f0;
+}
+.ant-alert-error .ant-alert-icon {
+ color: #f5222d;
+}
+.ant-alert-close-icon {
+ font-size: 12px;
+ position: absolute;
+ right: 16px;
+ top: 8px;
+ line-height: 22px;
+ overflow: hidden;
+ cursor: pointer;
+}
+.ant-alert-close-icon .anticon-cross {
+ color: rgba(0, 0, 0, 0.45);
+ transition: color .3s;
+}
+.ant-alert-close-icon .anticon-cross:hover {
+ color: #404040;
+}
+.ant-alert-close-text {
+ position: absolute;
+ right: 16px;
+}
+.ant-alert-with-description {
+ padding: 15px 15px 15px 64px;
+ position: relative;
+ border-radius: 4px;
+ color: #54657e;
+ line-height: 1.5;
+}
+.ant-alert-with-description.ant-alert-no-icon {
+ padding: 15px;
+}
+.ant-alert-with-description .ant-alert-icon {
+ position: absolute;
+ top: 16px;
+ left: 24px;
+ font-size: 24px;
+}
+.ant-alert-with-description .ant-alert-close-icon {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ cursor: pointer;
+ font-size: 14px;
+}
+.ant-alert-with-description .ant-alert-message {
+ font-size: 16px;
+ color: rgba(0, 0, 0, 0.85);
+ display: block;
+ margin-bottom: 4px;
+}
+.ant-alert-with-description .ant-alert-description {
+ display: block;
+}
+.ant-alert.ant-alert-close {
+ height: 0 !important;
+ margin: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ transform-origin: 50% 0;
+}
+.ant-alert-slide-up-leave {
+ animation: antAlertSlideUpOut 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ animation-fill-mode: both;
+}
+.ant-alert-banner {
+ border-radius: 0;
+ border: 0;
+ margin-bottom: 0;
+}
+@keyframes antAlertSlideUpIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 0% 0%;
+ transform: scaleY(0);
+ }
+ 100% {
+ opacity: 1;
+ transform-origin: 0% 0%;
+ transform: scaleY(1);
+ }
+}
+@keyframes antAlertSlideUpOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 0% 0%;
+ transform: scaleY(1);
+ }
+ 100% {
+ opacity: 0;
+ transform-origin: 0% 0%;
+ transform: scaleY(0);
+ }
+}
+.ant-anchor {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ padding-left: 2px;
+}
+.ant-anchor-wrapper {
+ background-color: #fff;
+ overflow: auto;
+ padding-left: 4px;
+ margin-left: -4px;
+}
+.ant-anchor-ink {
+ position: absolute;
+ height: 100%;
+ left: 0;
+ top: 0;
+}
+.ant-anchor-ink:before {
+ content: ' ';
+ position: relative;
+ width: 2px;
+ height: 100%;
+ display: block;
+ background-color: #e8e8e8;
+ margin: 0 auto;
+}
+.ant-anchor-ink-ball {
+ display: none;
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ border-radius: 8px;
+ border: 2px solid #1890ff;
+ background-color: #fff;
+ left: 50%;
+ transition: top 0.3s ease-in-out;
+ transform: translateX(-50%);
+}
+.ant-anchor-ink-ball.visible {
+ display: inline-block;
+}
+.ant-anchor.fixed .ant-anchor-ink .ant-anchor-ink-ball {
+ display: none;
+}
+.ant-anchor-link {
+ padding: 8px 0 8px 16px;
+ line-height: 1;
+}
+.ant-anchor-link-title {
+ display: block;
+ position: relative;
+ transition: all .3s;
+ color: #54657e;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 8px;
+}
+.ant-anchor-link-title:only-child {
+ margin-bottom: 0;
+}
+.ant-anchor-link-active > .ant-anchor-link-title {
+ color: #1890ff;
+}
+.ant-anchor-link .ant-anchor-link {
+ padding-top: 6px;
+ padding-bottom: 6px;
+}
+.ant-select-auto-complete {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.ant-select-auto-complete.ant-select .ant-select-selection {
+ border: 0;
+ box-shadow: none;
+}
+.ant-select-auto-complete.ant-select .ant-select-selection__rendered {
+ margin-left: 0;
+ margin-right: 0;
+ height: 100%;
+ line-height: 32px;
+}
+.ant-select-auto-complete.ant-select .ant-select-selection__placeholder {
+ margin-left: 12px;
+ margin-right: 12px;
+}
+.ant-select-auto-complete.ant-select .ant-select-selection--single {
+ height: auto;
+}
+.ant-select-auto-complete.ant-select .ant-select-search--inline {
+ position: static;
+ float: left;
+}
+.ant-select-auto-complete.ant-select-allow-clear .ant-select-selection:hover .ant-select-selection__rendered {
+ margin-right: 0 !important;
+}
+.ant-select-auto-complete.ant-select .ant-input {
+ background: transparent;
+ border-width: 1px;
+ line-height: 1.5;
+ height: 32px;
+}
+.ant-select-auto-complete.ant-select .ant-input:focus,
+.ant-select-auto-complete.ant-select .ant-input:hover {
+ border-color: #40a9ff;
+}
+.ant-select-auto-complete.ant-select-lg .ant-select-selection__rendered {
+ line-height: 40px;
+}
+.ant-select-auto-complete.ant-select-lg .ant-input {
+ padding-top: 6px;
+ padding-bottom: 6px;
+ height: 40px;
+}
+.ant-select-auto-complete.ant-select-sm .ant-select-selection__rendered {
+ line-height: 24px;
+}
+.ant-select-auto-complete.ant-select-sm .ant-input {
+ padding-top: 1px;
+ padding-bottom: 1px;
+ height: 24px;
+}
+.ant-avatar {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+ text-align: center;
+ background: #ccc;
+ color: #fff;
+ white-space: nowrap;
+ position: relative;
+ overflow: hidden;
+ vertical-align: middle;
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+ border-radius: 16px;
+}
+.ant-avatar-image {
+ background: transparent;
+}
+.ant-avatar > * {
+ line-height: 32px;
+}
+.ant-avatar.ant-avatar-icon {
+ font-size: 18px;
+}
+.ant-avatar-lg {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ border-radius: 20px;
+}
+.ant-avatar-lg > * {
+ line-height: 40px;
+}
+.ant-avatar-lg.ant-avatar-icon {
+ font-size: 24px;
+}
+.ant-avatar-sm {
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+ border-radius: 12px;
+}
+.ant-avatar-sm > * {
+ line-height: 24px;
+}
+.ant-avatar-sm.ant-avatar-icon {
+ font-size: 14px;
+}
+.ant-avatar-square {
+ border-radius: 4px;
+}
+.ant-avatar > img {
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+.ant-back-top {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ z-index: 10;
+ position: fixed;
+ right: 100px;
+ bottom: 50px;
+ height: 40px;
+ width: 40px;
+ cursor: pointer;
+}
+.ant-back-top-content {
+ height: 40px;
+ width: 40px;
+ border-radius: 20px;
+ background-color: rgba(0, 0, 0, 0.45);
+ color: #fff;
+ text-align: center;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ overflow: hidden;
+}
+.ant-back-top-content:hover {
+ background-color: #54657e;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-back-top-icon {
+ margin: 12px auto;
+ width: 14px;
+ height: 16px;
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) 100%/100% no-repeat;
+}
+@media screen and (max-width: 768px) {
+ .ant-back-top {
+ right: 60px;
+ }
+}
+@media screen and (max-width: 480px) {
+ .ant-back-top {
+ right: 20px;
+ }
+}
+.ant-badge {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ display: inline-block;
+ line-height: 1;
+ vertical-align: middle;
+}
+.ant-badge-count {
+ position: absolute;
+ transform: translateX(-50%);
+ top: -10px;
+ height: 20px;
+ border-radius: 10px;
+ min-width: 20px;
+ background: #f5222d;
+ color: #fff;
+ line-height: 20px;
+ text-align: center;
+ padding: 0 6px;
+ font-size: 12px;
+ font-weight: normal;
+ white-space: nowrap;
+ transform-origin: -10% center;
+ box-shadow: 0 0 0 1px #fff;
+}
+.ant-badge-count a,
+.ant-badge-count a:hover {
+ color: #fff;
+}
+.ant-badge-multiple-words {
+ padding: 0 8px;
+}
+.ant-badge-dot {
+ position: absolute;
+ transform: translateX(-50%);
+ transform-origin: 0 center;
+ top: -3px;
+ height: 6px;
+ width: 6px;
+ border-radius: 100%;
+ background: #f5222d;
+ z-index: 10;
+ box-shadow: 0 0 0 1px #fff;
+}
+.ant-badge-status {
+ line-height: inherit;
+ vertical-align: baseline;
+}
+.ant-badge-status-dot {
+ width: 6px;
+ height: 6px;
+ display: inline-block;
+ border-radius: 50%;
+ vertical-align: middle;
+ position: relative;
+ top: -1px;
+}
+.ant-badge-status-success {
+ background-color: #52c41a;
+}
+.ant-badge-status-processing {
+ background-color: #1890ff;
+ position: relative;
+}
+.ant-badge-status-processing:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ border: 1px solid #1890ff;
+ content: '';
+ animation: antStatusProcessing 1.2s infinite ease-in-out;
+}
+.ant-badge-status-default {
+ background-color: #d9d9d9;
+}
+.ant-badge-status-error {
+ background-color: #f5222d;
+}
+.ant-badge-status-warning {
+ background-color: #faad14;
+}
+.ant-badge-status-text {
+ color: #54657e;
+ font-size: 14px;
+ margin-left: 8px;
+}
+.ant-badge-zoom-appear,
+.ant-badge-zoom-enter {
+ animation: antZoomBadgeIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+ animation-fill-mode: both;
+}
+.ant-badge-zoom-leave {
+ animation: antZoomBadgeOut 0.3s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+ animation-fill-mode: both;
+}
+.ant-badge-not-a-wrapper .ant-scroll-number {
+ top: auto;
+ display: block;
+ position: relative;
+ transform: none !important;
+}
+@keyframes antStatusProcessing {
+ 0% {
+ transform: scale(0.8);
+ opacity: 0.5;
+ }
+ 100% {
+ transform: scale(2.4);
+ opacity: 0;
+ }
+}
+.ant-scroll-number {
+ overflow: hidden;
+}
+.ant-scroll-number-only {
+ display: inline-block;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ height: 20px;
+}
+.ant-scroll-number-only > p {
+ height: 20px;
+ margin: 0;
+}
+@keyframes antZoomBadgeIn {
+ 0% {
+ opacity: 0;
+ transform: scale(0) translateX(-50%);
+ }
+ 100% {
+ transform: scale(1) translateX(-50%);
+ }
+}
+@keyframes antZoomBadgeOut {
+ 0% {
+ transform: scale(1) translateX(-50%);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0) translateX(-50%);
+ }
+}
+.ant-breadcrumb {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ color: rgba(0, 0, 0, 0.45);
+ font-size: 14px;
+}
+.ant-breadcrumb .anticon {
+ font-size: 12px;
+}
+.ant-breadcrumb a {
+ color: rgba(0, 0, 0, 0.45);
+ transition: color .3s;
+}
+.ant-breadcrumb a:hover {
+ color: #40a9ff;
+}
+.ant-breadcrumb > span:last-child {
+ color: #54657e;
+}
+.ant-breadcrumb > span:last-child .ant-breadcrumb-separator {
+ display: none;
+}
+.ant-breadcrumb-separator {
+ margin: 0 8px;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-breadcrumb-link > .anticon + span {
+ margin-left: 4px;
+}
+.ant-btn {
+ line-height: 1.5;
+ display: inline-block;
+ font-weight: 400;
+ text-align: center;
+ touch-action: manipulation;
+ cursor: pointer;
+ background-image: none;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ padding: 0 15px;
+ font-size: 14px;
+ border-radius: 4px;
+ height: 32px;
+ user-select: none;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ position: relative;
+ color: #54657e;
+ background-color: #fff;
+ border-color: #d9d9d9;
+}
+.ant-btn > .anticon {
+ line-height: 1;
+}
+.ant-btn,
+.ant-btn:active,
+.ant-btn:focus {
+ outline: 0;
+}
+.ant-btn:not([disabled]):hover {
+ text-decoration: none;
+}
+.ant-btn:not([disabled]):active {
+ outline: 0;
+ transition: none;
+}
+.ant-btn.disabled,
+.ant-btn[disabled] {
+ cursor: not-allowed;
+}
+.ant-btn.disabled > *,
+.ant-btn[disabled] > * {
+ pointer-events: none;
+}
+.ant-btn-lg {
+ padding: 0 15px;
+ font-size: 16px;
+ border-radius: 4px;
+ height: 40px;
+}
+.ant-btn-sm {
+ padding: 0 7px;
+ font-size: 14px;
+ border-radius: 4px;
+ height: 24px;
+}
+.ant-btn > a:only-child {
+ color: currentColor;
+}
+.ant-btn > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn:hover,
+.ant-btn:focus {
+ color: #40a9ff;
+ background-color: #fff;
+ border-color: #40a9ff;
+}
+.ant-btn:hover > a:only-child,
+.ant-btn:focus > a:only-child {
+ color: currentColor;
+}
+.ant-btn:hover > a:only-child:after,
+.ant-btn:focus > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn:active,
+.ant-btn.active {
+ color: #096dd9;
+ background-color: #fff;
+ border-color: #096dd9;
+}
+.ant-btn:active > a:only-child,
+.ant-btn.active > a:only-child {
+ color: currentColor;
+}
+.ant-btn:active > a:only-child:after,
+.ant-btn.active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn.disabled,
+.ant-btn[disabled],
+.ant-btn.disabled:hover,
+.ant-btn[disabled]:hover,
+.ant-btn.disabled:focus,
+.ant-btn[disabled]:focus,
+.ant-btn.disabled:active,
+.ant-btn[disabled]:active,
+.ant-btn.disabled.active,
+.ant-btn[disabled].active {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+}
+.ant-btn.disabled > a:only-child,
+.ant-btn[disabled] > a:only-child,
+.ant-btn.disabled:hover > a:only-child,
+.ant-btn[disabled]:hover > a:only-child,
+.ant-btn.disabled:focus > a:only-child,
+.ant-btn[disabled]:focus > a:only-child,
+.ant-btn.disabled:active > a:only-child,
+.ant-btn[disabled]:active > a:only-child,
+.ant-btn.disabled.active > a:only-child,
+.ant-btn[disabled].active > a:only-child {
+ color: currentColor;
+}
+.ant-btn.disabled > a:only-child:after,
+.ant-btn[disabled] > a:only-child:after,
+.ant-btn.disabled:hover > a:only-child:after,
+.ant-btn[disabled]:hover > a:only-child:after,
+.ant-btn.disabled:focus > a:only-child:after,
+.ant-btn[disabled]:focus > a:only-child:after,
+.ant-btn.disabled:active > a:only-child:after,
+.ant-btn[disabled]:active > a:only-child:after,
+.ant-btn.disabled.active > a:only-child:after,
+.ant-btn[disabled].active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn:hover,
+.ant-btn:focus,
+.ant-btn:active,
+.ant-btn.active {
+ background: #fff;
+}
+.ant-btn > i,
+.ant-btn > span {
+ pointer-events: none;
+}
+.ant-btn-primary {
+ color: #fff;
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.ant-btn-primary > a:only-child {
+ color: currentColor;
+}
+.ant-btn-primary > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-primary:hover,
+.ant-btn-primary:focus {
+ color: #fff;
+ background-color: #40a9ff;
+ border-color: #40a9ff;
+}
+.ant-btn-primary:hover > a:only-child,
+.ant-btn-primary:focus > a:only-child {
+ color: currentColor;
+}
+.ant-btn-primary:hover > a:only-child:after,
+.ant-btn-primary:focus > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-primary:active,
+.ant-btn-primary.active {
+ color: #fff;
+ background-color: #096dd9;
+ border-color: #096dd9;
+}
+.ant-btn-primary:active > a:only-child,
+.ant-btn-primary.active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-primary:active > a:only-child:after,
+.ant-btn-primary.active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-primary.disabled,
+.ant-btn-primary[disabled],
+.ant-btn-primary.disabled:hover,
+.ant-btn-primary[disabled]:hover,
+.ant-btn-primary.disabled:focus,
+.ant-btn-primary[disabled]:focus,
+.ant-btn-primary.disabled:active,
+.ant-btn-primary[disabled]:active,
+.ant-btn-primary.disabled.active,
+.ant-btn-primary[disabled].active {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+}
+.ant-btn-primary.disabled > a:only-child,
+.ant-btn-primary[disabled] > a:only-child,
+.ant-btn-primary.disabled:hover > a:only-child,
+.ant-btn-primary[disabled]:hover > a:only-child,
+.ant-btn-primary.disabled:focus > a:only-child,
+.ant-btn-primary[disabled]:focus > a:only-child,
+.ant-btn-primary.disabled:active > a:only-child,
+.ant-btn-primary[disabled]:active > a:only-child,
+.ant-btn-primary.disabled.active > a:only-child,
+.ant-btn-primary[disabled].active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-primary.disabled > a:only-child:after,
+.ant-btn-primary[disabled] > a:only-child:after,
+.ant-btn-primary.disabled:hover > a:only-child:after,
+.ant-btn-primary[disabled]:hover > a:only-child:after,
+.ant-btn-primary.disabled:focus > a:only-child:after,
+.ant-btn-primary[disabled]:focus > a:only-child:after,
+.ant-btn-primary.disabled:active > a:only-child:after,
+.ant-btn-primary[disabled]:active > a:only-child:after,
+.ant-btn-primary.disabled.active > a:only-child:after,
+.ant-btn-primary[disabled].active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) {
+ border-right-color: #40a9ff;
+ border-left-color: #40a9ff;
+}
+.ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child):disabled {
+ border-color: #d9d9d9;
+}
+.ant-btn-group .ant-btn-primary:first-child:not(:last-child) {
+ border-right-color: #40a9ff;
+}
+.ant-btn-group .ant-btn-primary:first-child:not(:last-child)[disabled] {
+ border-right-color: #d9d9d9;
+}
+.ant-btn-group .ant-btn-primary:last-child:not(:first-child),
+.ant-btn-group .ant-btn-primary + .ant-btn-primary {
+ border-left-color: #40a9ff;
+}
+.ant-btn-group .ant-btn-primary:last-child:not(:first-child)[disabled],
+.ant-btn-group .ant-btn-primary + .ant-btn-primary[disabled] {
+ border-left-color: #d9d9d9;
+}
+.ant-btn-ghost {
+ color: #54657e;
+ background-color: transparent;
+ border-color: #d9d9d9;
+}
+.ant-btn-ghost > a:only-child {
+ color: currentColor;
+}
+.ant-btn-ghost > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-ghost:hover,
+.ant-btn-ghost:focus {
+ color: #40a9ff;
+ background-color: transparent;
+ border-color: #40a9ff;
+}
+.ant-btn-ghost:hover > a:only-child,
+.ant-btn-ghost:focus > a:only-child {
+ color: currentColor;
+}
+.ant-btn-ghost:hover > a:only-child:after,
+.ant-btn-ghost:focus > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-ghost:active,
+.ant-btn-ghost.active {
+ color: #096dd9;
+ background-color: transparent;
+ border-color: #096dd9;
+}
+.ant-btn-ghost:active > a:only-child,
+.ant-btn-ghost.active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-ghost:active > a:only-child:after,
+.ant-btn-ghost.active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-ghost.disabled,
+.ant-btn-ghost[disabled],
+.ant-btn-ghost.disabled:hover,
+.ant-btn-ghost[disabled]:hover,
+.ant-btn-ghost.disabled:focus,
+.ant-btn-ghost[disabled]:focus,
+.ant-btn-ghost.disabled:active,
+.ant-btn-ghost[disabled]:active,
+.ant-btn-ghost.disabled.active,
+.ant-btn-ghost[disabled].active {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+}
+.ant-btn-ghost.disabled > a:only-child,
+.ant-btn-ghost[disabled] > a:only-child,
+.ant-btn-ghost.disabled:hover > a:only-child,
+.ant-btn-ghost[disabled]:hover > a:only-child,
+.ant-btn-ghost.disabled:focus > a:only-child,
+.ant-btn-ghost[disabled]:focus > a:only-child,
+.ant-btn-ghost.disabled:active > a:only-child,
+.ant-btn-ghost[disabled]:active > a:only-child,
+.ant-btn-ghost.disabled.active > a:only-child,
+.ant-btn-ghost[disabled].active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-ghost.disabled > a:only-child:after,
+.ant-btn-ghost[disabled] > a:only-child:after,
+.ant-btn-ghost.disabled:hover > a:only-child:after,
+.ant-btn-ghost[disabled]:hover > a:only-child:after,
+.ant-btn-ghost.disabled:focus > a:only-child:after,
+.ant-btn-ghost[disabled]:focus > a:only-child:after,
+.ant-btn-ghost.disabled:active > a:only-child:after,
+.ant-btn-ghost[disabled]:active > a:only-child:after,
+.ant-btn-ghost.disabled.active > a:only-child:after,
+.ant-btn-ghost[disabled].active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-dashed {
+ color: #54657e;
+ background-color: #fff;
+ border-color: #d9d9d9;
+ border-style: dashed;
+}
+.ant-btn-dashed > a:only-child {
+ color: currentColor;
+}
+.ant-btn-dashed > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-dashed:hover,
+.ant-btn-dashed:focus {
+ color: #40a9ff;
+ background-color: #fff;
+ border-color: #40a9ff;
+}
+.ant-btn-dashed:hover > a:only-child,
+.ant-btn-dashed:focus > a:only-child {
+ color: currentColor;
+}
+.ant-btn-dashed:hover > a:only-child:after,
+.ant-btn-dashed:focus > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-dashed:active,
+.ant-btn-dashed.active {
+ color: #096dd9;
+ background-color: #fff;
+ border-color: #096dd9;
+}
+.ant-btn-dashed:active > a:only-child,
+.ant-btn-dashed.active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-dashed:active > a:only-child:after,
+.ant-btn-dashed.active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-dashed.disabled,
+.ant-btn-dashed[disabled],
+.ant-btn-dashed.disabled:hover,
+.ant-btn-dashed[disabled]:hover,
+.ant-btn-dashed.disabled:focus,
+.ant-btn-dashed[disabled]:focus,
+.ant-btn-dashed.disabled:active,
+.ant-btn-dashed[disabled]:active,
+.ant-btn-dashed.disabled.active,
+.ant-btn-dashed[disabled].active {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+}
+.ant-btn-dashed.disabled > a:only-child,
+.ant-btn-dashed[disabled] > a:only-child,
+.ant-btn-dashed.disabled:hover > a:only-child,
+.ant-btn-dashed[disabled]:hover > a:only-child,
+.ant-btn-dashed.disabled:focus > a:only-child,
+.ant-btn-dashed[disabled]:focus > a:only-child,
+.ant-btn-dashed.disabled:active > a:only-child,
+.ant-btn-dashed[disabled]:active > a:only-child,
+.ant-btn-dashed.disabled.active > a:only-child,
+.ant-btn-dashed[disabled].active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-dashed.disabled > a:only-child:after,
+.ant-btn-dashed[disabled] > a:only-child:after,
+.ant-btn-dashed.disabled:hover > a:only-child:after,
+.ant-btn-dashed[disabled]:hover > a:only-child:after,
+.ant-btn-dashed.disabled:focus > a:only-child:after,
+.ant-btn-dashed[disabled]:focus > a:only-child:after,
+.ant-btn-dashed.disabled:active > a:only-child:after,
+.ant-btn-dashed[disabled]:active > a:only-child:after,
+.ant-btn-dashed.disabled.active > a:only-child:after,
+.ant-btn-dashed[disabled].active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-danger {
+ color: #f5222d;
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+}
+.ant-btn-danger > a:only-child {
+ color: currentColor;
+}
+.ant-btn-danger > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-danger:hover {
+ color: #fff;
+ background-color: #ff4d4f;
+ border-color: #ff4d4f;
+}
+.ant-btn-danger:hover > a:only-child {
+ color: currentColor;
+}
+.ant-btn-danger:hover > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-danger:focus {
+ color: #ff4d4f;
+ background-color: #fff;
+ border-color: #ff4d4f;
+}
+.ant-btn-danger:focus > a:only-child {
+ color: currentColor;
+}
+.ant-btn-danger:focus > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-danger:active,
+.ant-btn-danger.active {
+ color: #fff;
+ background-color: #cf1322;
+ border-color: #cf1322;
+}
+.ant-btn-danger:active > a:only-child,
+.ant-btn-danger.active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-danger:active > a:only-child:after,
+.ant-btn-danger.active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-danger.disabled,
+.ant-btn-danger[disabled],
+.ant-btn-danger.disabled:hover,
+.ant-btn-danger[disabled]:hover,
+.ant-btn-danger.disabled:focus,
+.ant-btn-danger[disabled]:focus,
+.ant-btn-danger.disabled:active,
+.ant-btn-danger[disabled]:active,
+.ant-btn-danger.disabled.active,
+.ant-btn-danger[disabled].active {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+}
+.ant-btn-danger.disabled > a:only-child,
+.ant-btn-danger[disabled] > a:only-child,
+.ant-btn-danger.disabled:hover > a:only-child,
+.ant-btn-danger[disabled]:hover > a:only-child,
+.ant-btn-danger.disabled:focus > a:only-child,
+.ant-btn-danger[disabled]:focus > a:only-child,
+.ant-btn-danger.disabled:active > a:only-child,
+.ant-btn-danger[disabled]:active > a:only-child,
+.ant-btn-danger.disabled.active > a:only-child,
+.ant-btn-danger[disabled].active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-danger.disabled > a:only-child:after,
+.ant-btn-danger[disabled] > a:only-child:after,
+.ant-btn-danger.disabled:hover > a:only-child:after,
+.ant-btn-danger[disabled]:hover > a:only-child:after,
+.ant-btn-danger.disabled:focus > a:only-child:after,
+.ant-btn-danger[disabled]:focus > a:only-child:after,
+.ant-btn-danger.disabled:active > a:only-child:after,
+.ant-btn-danger[disabled]:active > a:only-child:after,
+.ant-btn-danger.disabled.active > a:only-child:after,
+.ant-btn-danger[disabled].active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-circle,
+.ant-btn-circle-outline {
+ width: 32px;
+ padding: 0;
+ font-size: 16px;
+ border-radius: 50%;
+ height: 32px;
+}
+.ant-btn-circle.ant-btn-lg,
+.ant-btn-circle-outline.ant-btn-lg {
+ width: 40px;
+ padding: 0;
+ font-size: 18px;
+ border-radius: 50%;
+ height: 40px;
+}
+.ant-btn-circle.ant-btn-sm,
+.ant-btn-circle-outline.ant-btn-sm {
+ width: 24px;
+ padding: 0;
+ font-size: 14px;
+ border-radius: 50%;
+ height: 24px;
+}
+.ant-btn:before {
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ bottom: -1px;
+ right: -1px;
+ background: #fff;
+ opacity: 0.35;
+ content: '';
+ border-radius: inherit;
+ z-index: 1;
+ transition: opacity .2s;
+ pointer-events: none;
+ display: none;
+}
+.ant-btn .anticon {
+ transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-btn.ant-btn-loading:before {
+ display: block;
+}
+.ant-btn.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) {
+ padding-left: 29px;
+ pointer-events: none;
+ position: relative;
+}
+.ant-btn.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) .anticon {
+ margin-left: -14px;
+}
+.ant-btn-sm.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) {
+ padding-left: 24px;
+}
+.ant-btn-sm.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) .anticon {
+ margin-left: -17px;
+}
+.ant-btn-group {
+ position: relative;
+ display: inline-block;
+}
+.ant-btn-group > .ant-btn {
+ position: relative;
+ line-height: 30px;
+}
+.ant-btn-group > .ant-btn:hover,
+.ant-btn-group > .ant-btn:focus,
+.ant-btn-group > .ant-btn:active,
+.ant-btn-group > .ant-btn.active {
+ z-index: 2;
+}
+.ant-btn-group > .ant-btn:disabled {
+ z-index: 0;
+}
+.ant-btn-group-lg > .ant-btn {
+ padding: 0 15px;
+ font-size: 16px;
+ border-radius: 4px;
+ height: 40px;
+ line-height: 38px;
+}
+.ant-btn-group-sm > .ant-btn {
+ padding: 0 7px;
+ font-size: 14px;
+ border-radius: 4px;
+ height: 24px;
+ line-height: 22px;
+}
+.ant-btn-group-sm > .ant-btn > .anticon {
+ font-size: 14px;
+}
+.ant-btn-group .ant-btn + .ant-btn,
+.ant-btn + .ant-btn-group,
+.ant-btn-group span + .ant-btn,
+.ant-btn-group .ant-btn + span,
+.ant-btn-group + .ant-btn,
+.ant-btn-group + .ant-btn-group {
+ margin-left: -1px;
+}
+.ant-btn-group .ant-btn:not(:first-child):not(:last-child) {
+ border-radius: 0;
+}
+.ant-btn-group > .ant-btn:first-child,
+.ant-btn-group > span:first-child > .ant-btn {
+ margin-left: 0;
+}
+.ant-btn-group > .ant-btn:first-child:not(:last-child),
+.ant-btn-group > span:first-child:not(:last-child) > .ant-btn {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+}
+.ant-btn-group > .ant-btn:last-child:not(:first-child),
+.ant-btn-group > span:last-child:not(:first-child) > .ant-btn {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+}
+.ant-btn-group > .ant-btn-group {
+ float: left;
+}
+.ant-btn-group > .ant-btn-group:not(:first-child):not(:last-child) > .ant-btn {
+ border-radius: 0;
+}
+.ant-btn-group > .ant-btn-group:first-child:not(:last-child) > .ant-btn:last-child {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ padding-right: 8px;
+}
+.ant-btn-group > .ant-btn-group:last-child:not(:first-child) > .ant-btn:first-child {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ padding-left: 8px;
+}
+.ant-btn:not(.ant-btn-circle):not(.ant-btn-circle-outline).ant-btn-icon-only {
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.ant-btn:focus > span,
+.ant-btn:active > span {
+ position: relative;
+}
+.ant-btn > .anticon + span,
+.ant-btn > span + .anticon {
+ margin-left: 8px;
+}
+.ant-btn-clicked:after {
+ content: '';
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ bottom: -1px;
+ right: -1px;
+ border-radius: inherit;
+ border: 0 solid #1890ff;
+ opacity: 0.4;
+ animation: buttonEffect .4s;
+ display: block;
+}
+.ant-btn-danger.ant-btn-clicked:after {
+ border-color: #f5222d;
+}
+.ant-btn-background-ghost {
+ background: transparent !important;
+ border-color: #fff;
+ color: #fff;
+}
+.ant-btn-background-ghost.ant-btn-primary {
+ color: #1890ff;
+ background-color: transparent;
+ border-color: #1890ff;
+}
+.ant-btn-background-ghost.ant-btn-primary > a:only-child {
+ color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-primary > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-primary:hover,
+.ant-btn-background-ghost.ant-btn-primary:focus {
+ color: #40a9ff;
+ background-color: transparent;
+ border-color: #40a9ff;
+}
+.ant-btn-background-ghost.ant-btn-primary:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary:focus > a:only-child {
+ color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-primary:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary:focus > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-primary:active,
+.ant-btn-background-ghost.ant-btn-primary.active {
+ color: #096dd9;
+ background-color: transparent;
+ border-color: #096dd9;
+}
+.ant-btn-background-ghost.ant-btn-primary:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary.active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-primary:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary.active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-primary.disabled,
+.ant-btn-background-ghost.ant-btn-primary[disabled],
+.ant-btn-background-ghost.ant-btn-primary.disabled:hover,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:hover,
+.ant-btn-background-ghost.ant-btn-primary.disabled:focus,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:focus,
+.ant-btn-background-ghost.ant-btn-primary.disabled:active,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:active,
+.ant-btn-background-ghost.ant-btn-primary.disabled.active,
+.ant-btn-background-ghost.ant-btn-primary[disabled].active {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+}
+.ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-danger {
+ color: #f5222d;
+ background-color: transparent;
+ border-color: #f5222d;
+}
+.ant-btn-background-ghost.ant-btn-danger > a:only-child {
+ color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-danger > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-danger:hover,
+.ant-btn-background-ghost.ant-btn-danger:focus {
+ color: #ff4d4f;
+ background-color: transparent;
+ border-color: #ff4d4f;
+}
+.ant-btn-background-ghost.ant-btn-danger:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger:focus > a:only-child {
+ color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-danger:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger:focus > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-danger:active,
+.ant-btn-background-ghost.ant-btn-danger.active {
+ color: #cf1322;
+ background-color: transparent;
+ border-color: #cf1322;
+}
+.ant-btn-background-ghost.ant-btn-danger:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger.active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-danger:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger.active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-danger.disabled,
+.ant-btn-background-ghost.ant-btn-danger[disabled],
+.ant-btn-background-ghost.ant-btn-danger.disabled:hover,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:hover,
+.ant-btn-background-ghost.ant-btn-danger.disabled:focus,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:focus,
+.ant-btn-background-ghost.ant-btn-danger.disabled:active,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:active,
+.ant-btn-background-ghost.ant-btn-danger.disabled.active,
+.ant-btn-background-ghost.ant-btn-danger[disabled].active {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+}
+.ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child {
+ color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-btn-two-chinese-chars:first-letter {
+ letter-spacing: .34em;
+}
+.ant-btn-two-chinese-chars > * {
+ letter-spacing: .34em;
+ margin-right: -0.34em;
+}
+@keyframes buttonEffect {
+ to {
+ opacity: 0;
+ top: -6px;
+ left: -6px;
+ bottom: -6px;
+ right: -6px;
+ border-width: 6px;
+ }
+}
+a.ant-btn {
+ line-height: 30px;
+}
+a.ant-btn-lg {
+ line-height: 38px;
+}
+a.ant-btn-sm {
+ line-height: 22px;
+}
+.ant-fullcalendar {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ outline: none;
+ border-top: 1px solid #d9d9d9;
+}
+.ant-fullcalendar-month-select {
+ margin-left: 5px;
+}
+.ant-fullcalendar-header {
+ padding: 11px 16px 11px 0;
+ text-align: right;
+}
+.ant-fullcalendar-header .ant-select-dropdown {
+ text-align: left;
+}
+.ant-fullcalendar-header .ant-radio-group {
+ margin-left: 8px;
+ text-align: left;
+}
+.ant-fullcalendar-header label.ant-radio-button {
+ height: 22px;
+ line-height: 20px;
+ padding: 0 10px;
+}
+.ant-fullcalendar-date-panel {
+ position: relative;
+ outline: none;
+}
+.ant-fullcalendar-calendar-body {
+ padding: 8px 12px;
+}
+.ant-fullcalendar table {
+ border-collapse: collapse;
+ max-width: 100%;
+ background-color: transparent;
+ width: 100%;
+ height: 256px;
+}
+.ant-fullcalendar table,
+.ant-fullcalendar th,
+.ant-fullcalendar td {
+ border: 0;
+}
+.ant-fullcalendar td {
+ position: relative;
+}
+.ant-fullcalendar-calendar-table {
+ border-spacing: 0;
+ margin-bottom: 0;
+}
+.ant-fullcalendar-column-header {
+ line-height: 18px;
+ padding: 0;
+ width: 33px;
+ text-align: center;
+}
+.ant-fullcalendar-column-header .ant-fullcalendar-column-header-inner {
+ display: block;
+ font-weight: normal;
+}
+.ant-fullcalendar-week-number-header .ant-fullcalendar-column-header-inner {
+ display: none;
+}
+.ant-fullcalendar-month,
+.ant-fullcalendar-date {
+ text-align: center;
+ transition: all .3s;
+}
+.ant-fullcalendar-value {
+ display: block;
+ margin: 0 auto;
+ color: #54657e;
+ border-radius: 2px;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ background: transparent;
+ line-height: 24px;
+ transition: all .3s;
+}
+.ant-fullcalendar-value:hover {
+ background: #e6f7ff;
+ cursor: pointer;
+}
+.ant-fullcalendar-value:active {
+ background: #1890ff;
+ color: #fff;
+}
+.ant-fullcalendar-month-panel-cell .ant-fullcalendar-value {
+ width: 48px;
+}
+.ant-fullcalendar-today .ant-fullcalendar-value,
+.ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value {
+ box-shadow: 0 0 0 1px #1890ff inset;
+}
+.ant-fullcalendar-selected-day .ant-fullcalendar-value,
+.ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value {
+ background: #1890ff;
+ color: #fff;
+}
+.ant-fullcalendar-disabled-cell-first-of-row .ant-fullcalendar-value {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+.ant-fullcalendar-disabled-cell-last-of-row .ant-fullcalendar-value {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+.ant-fullcalendar-last-month-cell .ant-fullcalendar-value,
+.ant-fullcalendar-next-month-btn-day .ant-fullcalendar-value {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-fullcalendar-month-panel-table {
+ table-layout: fixed;
+ width: 100%;
+ border-collapse: separate;
+}
+.ant-fullcalendar-content {
+ position: absolute;
+ width: 100%;
+ left: 0;
+ bottom: -9px;
+}
+.ant-fullcalendar-fullscreen {
+ border-top: 0;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-table {
+ table-layout: fixed;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-header .ant-radio-group {
+ margin-left: 16px;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-header label.ant-radio-button {
+ height: 32px;
+ line-height: 30px;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-date {
+ text-align: left;
+ margin: 0 4px;
+ display: block;
+ color: #54657e;
+ height: 116px;
+ padding: 4px 8px;
+ border-top: 2px solid #e8e8e8;
+ transition: background .3s;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month:hover,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-date:hover {
+ background: #e6f7ff;
+ cursor: pointer;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month:active,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-date:active {
+ background: #bae7ff;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-column-header {
+ text-align: right;
+ padding-right: 12px;
+ padding-bottom: 5px;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-value {
+ text-align: right;
+ background: transparent;
+ width: auto;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-value {
+ color: #54657e;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-month,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-date {
+ border-top-color: #1890ff;
+ background: transparent;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-value {
+ box-shadow: none;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-month,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-date {
+ background: #e6f7ff;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-value {
+ color: #1890ff;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-last-month-cell .ant-fullcalendar-date,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-date {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-content {
+ height: 90px;
+ overflow-y: auto;
+ position: static;
+ width: auto;
+ left: auto;
+ bottom: auto;
+}
+.ant-fullcalendar-disabled-cell .ant-fullcalendar-date,
+.ant-fullcalendar-disabled-cell .ant-fullcalendar-date:hover {
+ cursor: not-allowed;
+}
+.ant-fullcalendar-disabled-cell:not(.ant-fullcalendar-today) .ant-fullcalendar-date,
+.ant-fullcalendar-disabled-cell:not(.ant-fullcalendar-today) .ant-fullcalendar-date:hover {
+ background: transparent;
+}
+.ant-fullcalendar-disabled-cell .ant-fullcalendar-value {
+ color: rgba(0, 0, 0, 0.25);
+ border-radius: 0;
+ width: auto;
+ cursor: not-allowed;
+}
+.ant-card {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ background: #fff;
+ border-radius: 2px;
+ position: relative;
+ transition: all .3s;
+}
+.ant-card-hoverable {
+ cursor: pointer;
+}
+.ant-card-hoverable:hover {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+ border-color: rgba(0, 0, 0, 0.09);
+}
+.ant-card-bordered {
+ border: 1px solid #e8e8e8;
+}
+.ant-card-head {
+ background: #fff;
+ border-bottom: 1px solid #e8e8e8;
+ padding: 0 24px;
+ border-radius: 2px 2px 0 0;
+ zoom: 1;
+ margin-bottom: -1px;
+ min-height: 48px;
+}
+.ant-card-head:before,
+.ant-card-head:after {
+ content: " ";
+ display: table;
+}
+.ant-card-head:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-card-head:before,
+.ant-card-head:after {
+ content: " ";
+ display: table;
+}
+.ant-card-head:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-card-head-wrapper {
+ display: flex;
+}
+.ant-card-head-title {
+ font-size: 16px;
+ padding: 16px 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ color: rgba(0, 0, 0, 0.85);
+ font-weight: 500;
+ display: inline-block;
+ flex: 1;
+}
+.ant-card-head .ant-tabs {
+ margin-bottom: -17px;
+ clear: both;
+}
+.ant-card-head .ant-tabs-bar {
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-card-extra {
+ float: right;
+ padding: 17.5px 0;
+ text-align: right;
+ margin-left: auto;
+}
+.ant-card-body {
+ padding: 24px;
+ zoom: 1;
+}
+.ant-card-body:before,
+.ant-card-body:after {
+ content: " ";
+ display: table;
+}
+.ant-card-body:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-card-body:before,
+.ant-card-body:after {
+ content: " ";
+ display: table;
+}
+.ant-card-body:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-card-contain-grid .ant-card-body {
+ margin: -1px 0 0 -1px;
+ padding: 0;
+}
+.ant-card-grid {
+ border-radius: 0;
+ border: 0;
+ box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8, 1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
+ width: 33.33%;
+ float: left;
+ padding: 24px;
+ transition: all .3s;
+}
+.ant-card-grid:hover {
+ position: relative;
+ z-index: 1;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.ant-card-contain-tabs .ant-card-head-title {
+ padding-bottom: 0;
+ min-height: 32px;
+}
+.ant-card-contain-tabs .ant-card-extra {
+ padding-bottom: 0;
+}
+.ant-card-cover > * {
+ width: 100%;
+ display: block;
+}
+.ant-card-actions {
+ border-top: 1px solid #e8e8e8;
+ background: #fafafa;
+ zoom: 1;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.ant-card-actions:before,
+.ant-card-actions:after {
+ content: " ";
+ display: table;
+}
+.ant-card-actions:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-card-actions:before,
+.ant-card-actions:after {
+ content: " ";
+ display: table;
+}
+.ant-card-actions:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-card-actions > li {
+ float: left;
+ text-align: center;
+ margin: 12px 0;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-card-actions > li > span {
+ display: inline-block;
+ font-size: 14px;
+ cursor: pointer;
+ line-height: 22px;
+ min-width: 32px;
+ position: relative;
+}
+.ant-card-actions > li > span:hover {
+ color: #1890ff;
+ transition: color .3s;
+}
+.ant-card-actions > li > span > .anticon {
+ font-size: 16px;
+}
+.ant-card-actions > li > span a {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-card-actions > li > span a:hover {
+ color: #1890ff;
+}
+.ant-card-actions > li:not(:last-child) {
+ border-right: 1px solid #e8e8e8;
+}
+.ant-card-wider-padding .ant-card-head {
+ padding: 0 32px;
+}
+.ant-card-wider-padding .ant-card-body {
+ padding: 24px 32px;
+}
+.ant-card-padding-transition .ant-card-head,
+.ant-card-padding-transition .ant-card-body {
+ transition: padding .3s;
+}
+.ant-card-padding-transition .ant-card-extra {
+ transition: right .3s;
+}
+.ant-card-type-inner .ant-card-head {
+ padding: 0 24px;
+ background: #fafafa;
+}
+.ant-card-type-inner .ant-card-head-title {
+ padding: 12px 0;
+ font-size: 14px;
+}
+.ant-card-type-inner .ant-card-body {
+ padding: 16px 24px;
+}
+.ant-card-type-inner .ant-card-extra {
+ padding: 13.5px 0;
+}
+.ant-card-meta {
+ margin: -4px 0;
+ zoom: 1;
+}
+.ant-card-meta:before,
+.ant-card-meta:after {
+ content: " ";
+ display: table;
+}
+.ant-card-meta:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-card-meta:before,
+.ant-card-meta:after {
+ content: " ";
+ display: table;
+}
+.ant-card-meta:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-card-meta-avatar {
+ padding-right: 16px;
+ float: left;
+}
+.ant-card-meta-detail {
+ overflow: hidden;
+}
+.ant-card-meta-detail > div:not(:last-child) {
+ margin-bottom: 8px;
+}
+.ant-card-meta-title {
+ font-size: 16px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ color: rgba(0, 0, 0, 0.85);
+ font-weight: 500;
+}
+.ant-card-meta-description {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-card-loading .ant-card-body {
+ user-select: none;
+ padding: 0;
+}
+.ant-card-loading-content {
+ padding: 24px;
+}
+.ant-card-loading-content p {
+ margin: 0;
+}
+.ant-card-loading-block {
+ display: inline-block;
+ margin: 5px 2% 0 0;
+ height: 14px;
+ border-radius: 2px;
+ background: linear-gradient(90deg, rgba(207, 216, 220, 0.2), rgba(207, 216, 220, 0.4), rgba(207, 216, 220, 0.2));
+ animation: card-loading 1.4s ease infinite;
+ background-size: 600% 600%;
+}
+@keyframes card-loading {
+ 0%,
+ 100% {
+ background-position: 0 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+}
+.ant-carousel {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.ant-carousel .slick-slider {
+ position: relative;
+ display: block;
+ box-sizing: border-box;
+ -webkit-touch-callout: none;
+ -ms-touch-action: pan-y;
+ touch-action: pan-y;
+ -webkit-tap-highlight-color: transparent;
+}
+.ant-carousel .slick-list {
+ position: relative;
+ overflow: hidden;
+ display: block;
+ margin: 0;
+ padding: 0;
+}
+.ant-carousel .slick-list:focus {
+ outline: none;
+}
+.ant-carousel .slick-list.dragging {
+ cursor: pointer;
+}
+.ant-carousel .slick-slider .slick-track,
+.ant-carousel .slick-slider .slick-list {
+ transform: translate3d(0, 0, 0);
+}
+.ant-carousel .slick-track {
+ position: relative;
+ left: 0;
+ top: 0;
+ display: block;
+}
+.ant-carousel .slick-track:before,
+.ant-carousel .slick-track:after {
+ content: "";
+ display: table;
+}
+.ant-carousel .slick-track:after {
+ clear: both;
+}
+.slick-loading .ant-carousel .slick-track {
+ visibility: hidden;
+}
+.ant-carousel .slick-slide {
+ float: left;
+ height: 100%;
+ min-height: 1px;
+ display: none;
+}
+[dir="rtl"] .ant-carousel .slick-slide {
+ float: right;
+}
+.ant-carousel .slick-slide img {
+ display: block;
+}
+.ant-carousel .slick-slide.slick-loading img {
+ display: none;
+}
+.ant-carousel .slick-slide.dragging img {
+ pointer-events: none;
+}
+.ant-carousel .slick-initialized .slick-slide {
+ display: block;
+}
+.ant-carousel .slick-loading .slick-slide {
+ visibility: hidden;
+}
+.ant-carousel .slick-vertical .slick-slide {
+ display: block;
+ height: auto;
+ border: 1px solid transparent;
+}
+.ant-carousel .slick-arrow.slick-hidden {
+ display: none;
+}
+.ant-carousel .slick-prev,
+.ant-carousel .slick-next {
+ position: absolute;
+ display: block;
+ height: 20px;
+ width: 20px;
+ line-height: 0;
+ font-size: 0;
+ cursor: pointer;
+ background: transparent;
+ color: transparent;
+ top: 50%;
+ margin-top: -10px;
+ padding: 0;
+ border: 0;
+ outline: none;
+}
+.ant-carousel .slick-prev:hover,
+.ant-carousel .slick-next:hover,
+.ant-carousel .slick-prev:focus,
+.ant-carousel .slick-next:focus {
+ outline: none;
+ background: transparent;
+ color: transparent;
+}
+.ant-carousel .slick-prev:hover:before,
+.ant-carousel .slick-next:hover:before,
+.ant-carousel .slick-prev:focus:before,
+.ant-carousel .slick-next:focus:before {
+ opacity: 1;
+}
+.ant-carousel .slick-prev.slick-disabled:before,
+.ant-carousel .slick-next.slick-disabled:before {
+ opacity: 0.25;
+}
+.ant-carousel .slick-prev {
+ left: -25px;
+}
+.ant-carousel .slick-prev:before {
+ content: "←";
+}
+.ant-carousel .slick-next {
+ right: -25px;
+}
+.ant-carousel .slick-next:before {
+ content: "→";
+}
+.ant-carousel .slick-dots {
+ position: absolute;
+ bottom: 12px;
+ list-style: none;
+ display: block;
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 3px;
+}
+.ant-carousel .slick-dots li {
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ text-align: center;
+ margin: 0 2px;
+ padding: 0;
+}
+.ant-carousel .slick-dots li button {
+ border: 0;
+ cursor: pointer;
+ background: #fff;
+ opacity: 0.3;
+ display: block;
+ width: 16px;
+ height: 3px;
+ border-radius: 1px;
+ outline: none;
+ font-size: 0;
+ color: transparent;
+ transition: all .5s;
+ padding: 0;
+}
+.ant-carousel .slick-dots li button:hover,
+.ant-carousel .slick-dots li button:focus {
+ opacity: 0.75;
+}
+.ant-carousel .slick-dots li.slick-active button {
+ background: #fff;
+ opacity: 1;
+ width: 24px;
+}
+.ant-carousel .slick-dots li.slick-active button:hover,
+.ant-carousel .slick-dots li.slick-active button:focus {
+ opacity: 1;
+}
+.ant-carousel-vertical .slick-dots {
+ width: 3px;
+ bottom: auto;
+ right: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ height: auto;
+}
+.ant-carousel-vertical .slick-dots li {
+ margin: 0 2px;
+ vertical-align: baseline;
+}
+.ant-carousel-vertical .slick-dots li button {
+ width: 3px;
+ height: 16px;
+}
+.ant-carousel-vertical .slick-dots li.slick-active button {
+ width: 3px;
+ height: 24px;
+}
+.ant-cascader {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.ant-cascader-input.ant-input {
+ background-color: transparent !important;
+ cursor: pointer;
+ width: 100%;
+ display: block;
+}
+.ant-cascader-picker {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ background-color: #fff;
+ border-radius: 4px;
+ outline: 0;
+}
+.ant-cascader-picker-with-value .ant-cascader-picker-label {
+ color: transparent;
+}
+.ant-cascader-picker-disabled {
+ cursor: not-allowed;
+ background: #f5f5f5;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-cascader-picker-disabled .ant-cascader-input {
+ cursor: not-allowed;
+}
+.ant-cascader-picker:focus .ant-cascader-input {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-cascader-picker-label {
+ position: absolute;
+ left: 0;
+ height: 20px;
+ line-height: 20px;
+ top: 50%;
+ margin-top: -10px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ width: 100%;
+ padding: 0 12px;
+}
+.ant-cascader-picker-clear {
+ opacity: 0;
+ position: absolute;
+ right: 12px;
+ z-index: 2;
+ background: #fff;
+ top: 50%;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.25);
+ width: 12px;
+ height: 12px;
+ margin-top: -6px;
+ line-height: 12px;
+ cursor: pointer;
+ transition: color 0.3s ease, opacity 0.15s ease;
+}
+.ant-cascader-picker-clear:hover {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-cascader-picker:hover .ant-cascader-picker-clear {
+ opacity: 1;
+}
+.ant-cascader-picker-arrow {
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ right: 12px;
+ width: 12px;
+ height: 12px;
+ font-size: 12px;
+ margin-top: -6px;
+ line-height: 12px;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-cascader-picker-arrow:before {
+ transition: transform .2s;
+}
+.ant-cascader-picker-arrow.ant-cascader-picker-arrow-expand:before {
+ transform: rotate(180deg);
+}
+.ant-cascader-picker-small .ant-cascader-picker-clear,
+.ant-cascader-picker-small .ant-cascader-picker-arrow {
+ right: 8px;
+}
+.ant-cascader-menus {
+ font-size: 14px;
+ background: #fff;
+ position: absolute;
+ z-index: 1050;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ white-space: nowrap;
+}
+.ant-cascader-menus ul,
+.ant-cascader-menus ol {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.ant-cascader-menus-empty,
+.ant-cascader-menus-hidden {
+ display: none;
+}
+.ant-cascader-menus.slide-up-enter.slide-up-enter-active.ant-cascader-menus-placement-bottomLeft,
+.ant-cascader-menus.slide-up-appear.slide-up-appear-active.ant-cascader-menus-placement-bottomLeft {
+ animation-name: antSlideUpIn;
+}
+.ant-cascader-menus.slide-up-enter.slide-up-enter-active.ant-cascader-menus-placement-topLeft,
+.ant-cascader-menus.slide-up-appear.slide-up-appear-active.ant-cascader-menus-placement-topLeft {
+ animation-name: antSlideDownIn;
+}
+.ant-cascader-menus.slide-up-leave.slide-up-leave-active.ant-cascader-menus-placement-bottomLeft {
+ animation-name: antSlideUpOut;
+}
+.ant-cascader-menus.slide-up-leave.slide-up-leave-active.ant-cascader-menus-placement-topLeft {
+ animation-name: antSlideDownOut;
+}
+.ant-cascader-menu {
+ display: inline-block;
+ vertical-align: top;
+ min-width: 111px;
+ height: 180px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ border-right: 1px solid #e8e8e8;
+ overflow: auto;
+}
+.ant-cascader-menu:first-child {
+ border-radius: 4px 0 0 4px;
+}
+.ant-cascader-menu:last-child {
+ border-right-color: transparent;
+ margin-right: -1px;
+ border-radius: 0 4px 4px 0;
+}
+.ant-cascader-menu:only-child {
+ border-radius: 4px;
+}
+.ant-cascader-menu-item {
+ padding: 5px 12px;
+ line-height: 22px;
+ cursor: pointer;
+ white-space: nowrap;
+ transition: all 0.3s;
+}
+.ant-cascader-menu-item:hover {
+ background: #e6f7ff;
+}
+.ant-cascader-menu-item-disabled {
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-cascader-menu-item-disabled:hover {
+ background: transparent;
+}
+.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
+.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
+ background: #f5f5f5;
+ font-weight: 600;
+}
+.ant-cascader-menu-item-expand {
+ position: relative;
+ padding-right: 24px;
+}
+.ant-cascader-menu-item-expand:after {
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e61f";
+ display: inline-block;
+ font-size: 12px;
+ font-size: 8px \9;
+ transform: scale(0.66666667) rotate(0deg);
+ color: rgba(0, 0, 0, 0.45);
+ position: absolute;
+ right: 12px;
+}
+:root .ant-cascader-menu-item-expand:after {
+ font-size: 12px;
+}
+.ant-cascader-menu-item-loading:after {
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e64d";
+ animation: loadingCircle 1s infinite linear;
+}
+.ant-cascader-menu-item .ant-cascader-menu-item-keyword {
+ color: #f5222d;
+}
+@keyframes antCheckboxEffect {
+ 0% {
+ transform: scale(1);
+ opacity: 0.5;
+ }
+ 100% {
+ transform: scale(1.6);
+ opacity: 0;
+ }
+}
+.ant-checkbox {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ white-space: nowrap;
+ cursor: pointer;
+ outline: none;
+ display: inline-block;
+ line-height: 1;
+ position: relative;
+ vertical-align: middle;
+ top: -0.09em;
+}
+.ant-checkbox-wrapper:hover .ant-checkbox-inner,
+.ant-checkbox:hover .ant-checkbox-inner,
+.ant-checkbox-input:focus + .ant-checkbox-inner {
+ border-color: #1890ff;
+}
+.ant-checkbox-checked:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 2px;
+ border: 1px solid #1890ff;
+ content: '';
+ animation: antCheckboxEffect 0.36s ease-in-out;
+ animation-fill-mode: both;
+ visibility: hidden;
+}
+.ant-checkbox:hover:after,
+.ant-checkbox-wrapper:hover .ant-checkbox:after {
+ visibility: visible;
+}
+.ant-checkbox-inner {
+ position: relative;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 16px;
+ height: 16px;
+ border: 1px solid #d9d9d9;
+ border-radius: 2px;
+ background-color: #fff;
+ transition: all .3s;
+}
+.ant-checkbox-inner:after {
+ transform: rotate(45deg) scale(0);
+ position: absolute;
+ left: 4.57142857px;
+ top: 1.14285714px;
+ display: table;
+ width: 5.71428571px;
+ height: 9.14285714px;
+ border: 2px solid #fff;
+ border-top: 0;
+ border-left: 0;
+ content: ' ';
+ transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+}
+.ant-checkbox-input {
+ position: absolute;
+ left: 0;
+ z-index: 1;
+ cursor: pointer;
+ opacity: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+}
+.ant-checkbox-indeterminate .ant-checkbox-inner:after {
+ content: ' ';
+ transform: scale(1);
+ position: absolute;
+ left: 2.42857143px;
+ top: 5.92857143px;
+ width: 9.14285714px;
+ height: 1.14285714px;
+}
+.ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner:after {
+ border-color: rgba(0, 0, 0, 0.25);
+}
+.ant-checkbox-checked .ant-checkbox-inner:after {
+ transform: rotate(45deg) scale(1);
+ position: absolute;
+ display: table;
+ border: 2px solid #fff;
+ border-top: 0;
+ border-left: 0;
+ content: ' ';
+ transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}
+.ant-checkbox-checked .ant-checkbox-inner,
+.ant-checkbox-indeterminate .ant-checkbox-inner {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.ant-checkbox-disabled {
+ cursor: not-allowed;
+}
+.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after {
+ animation-name: none;
+ border-color: rgba(0, 0, 0, 0.25);
+}
+.ant-checkbox-disabled .ant-checkbox-input {
+ cursor: not-allowed;
+}
+.ant-checkbox-disabled .ant-checkbox-inner {
+ border-color: #d9d9d9 !important;
+ background-color: #f5f5f5;
+}
+.ant-checkbox-disabled .ant-checkbox-inner:after {
+ animation-name: none;
+ border-color: #f5f5f5;
+}
+.ant-checkbox-disabled + span {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+}
+.ant-checkbox-wrapper {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ line-height: unset;
+ cursor: pointer;
+ display: inline-block;
+}
+.ant-checkbox-wrapper + .ant-checkbox-wrapper {
+ margin-left: 8px;
+}
+.ant-checkbox-wrapper + span,
+.ant-checkbox + span {
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.ant-checkbox-group {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+}
+.ant-checkbox-group-item {
+ display: inline-block;
+ margin-right: 8px;
+}
+.ant-checkbox-group-item:last-child {
+ margin-right: 0;
+}
+.ant-checkbox-group-item + .ant-checkbox-group-item {
+ margin-left: 0;
+}
+.ant-collapse {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ background-color: #fafafa;
+ border-radius: 4px;
+ border: 1px solid #d9d9d9;
+ border-bottom: 0;
+}
+.ant-collapse > .ant-collapse-item {
+ border-bottom: 1px solid #d9d9d9;
+}
+.ant-collapse > .ant-collapse-item:last-child,
+.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
+ border-radius: 0 0 4px 4px;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header {
+ line-height: 22px;
+ padding: 12px 0 12px 40px;
+ color: rgba(0, 0, 0, 0.85);
+ cursor: pointer;
+ position: relative;
+ transition: all .3s;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .arrow {
+ font-style: normal;
+ vertical-align: baseline;
+ text-align: center;
+ text-transform: none;
+ line-height: 1;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ transform: rotate(0);
+ font-size: 12px;
+ position: absolute;
+ display: inline-block;
+ line-height: 46px;
+ vertical-align: top;
+ transition: transform 0.24s;
+ top: 0;
+ left: 16px;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .arrow:before {
+ display: block;
+ font-family: "anticon" !important;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .arrow:before {
+ content: "\E61F";
+}
+.ant-collapse > .ant-collapse-item.ant-collapse-no-arrow > .ant-collapse-header {
+ padding-left: 12px;
+}
+.ant-collapse-anim-active {
+ transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.ant-collapse-content {
+ overflow: hidden;
+ color: #54657e;
+ padding: 0 16px;
+ background-color: #fff;
+ border-top: 1px solid #d9d9d9;
+}
+.ant-collapse-content > .ant-collapse-content-box {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+.ant-collapse-content-inactive {
+ display: none;
+}
+.ant-collapse-item:last-child > .ant-collapse-content {
+ border-radius: 0 0 4px 4px;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header[aria-expanded="true"] .arrow {
+ transform: rotate(90deg);
+}
+.ant-collapse-borderless {
+ background-color: #fff;
+ border: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item {
+ border-bottom: 1px solid #d9d9d9;
+}
+.ant-collapse-borderless > .ant-collapse-item:last-child,
+.ant-collapse-borderless > .ant-collapse-item:last-child .ant-collapse-header {
+ border-radius: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content {
+ background-color: transparent;
+ border-top: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+ padding-top: 4px;
+}
+.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
+.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.cdk-overlay-container {
+ pointer-events: none;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ position: fixed;
+ z-index: 1000;
+}
+.cdk-overlay-backdrop {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-tap-highlight-color: transparent;
+ transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+ opacity: 0;
+ position: absolute;
+ pointer-events: auto;
+ z-index: 1000;
+}
+.cdk-overlay-pane {
+ position: absolute;
+ pointer-events: auto;
+ z-index: 1000;
+}
+.ant-table-td-right-sticky + .ant-table-td-right-sticky {
+ box-shadow: none;
+}
+.ant-table-th-right-sticky + .ant-table-th-right-sticky {
+ box-shadow: none;
+}
+.ant-table-th-left-sticky,
+.ant-table-th-right-sticky,
+.ant-table-td-right-sticky,
+.ant-table-td-left-sticky {
+ position: sticky;
+ z-index: 1;
+}
+.ant-table-td-left-sticky,
+.ant-table-td-right-sticky {
+ background: #fff;
+}
+.ant-table-scroll-position-middle .ant-table-th-left-sticky,
+.ant-table-scroll-position-middle .ant-table-td-left-sticky {
+ box-shadow: 6px 0 6px 0px rgba(0, 0, 0, 0.05);
+}
+.ant-table-scroll-position-middle .ant-table-th-right-sticky,
+.ant-table-scroll-position-middle .ant-table-td-right-sticky {
+ box-shadow: -6px 0 6px 0px rgba(0, 0, 0, 0.05);
+}
+.ant-table-scroll-position-left .ant-table-th-right-sticky,
+.ant-table-scroll-position-left .ant-table-td-right-sticky {
+ box-shadow: -6px 0 6px 0px rgba(0, 0, 0, 0.05);
+}
+.ant-table-scroll-position-right .ant-table-th-left-sticky,
+.ant-table-scroll-position-right .ant-table-td-left-sticky {
+ box-shadow: 6px 0 6px 0px rgba(0, 0, 0, 0.05);
+}
+.ant-table-bordered.ant-table-scroll-position-middle .ant-table-th-left-sticky,
+.ant-table-bordered.ant-table-scroll-position-middle .ant-table-td-left-sticky {
+ border-left: 1px solid #e8e8e8;
+}
+.ant-table-bordered.ant-table-scroll-position-middle .ant-table-th-right-sticky,
+.ant-table-bordered.ant-table-scroll-position-middle .ant-table-td-right-sticky {
+ border-right: 1px solid #e8e8e8;
+}
+.ant-table-bordered.ant-table-scroll-position-left .ant-table-th-right-sticky,
+.ant-table-bordered.ant-table-scroll-position-left .ant-table-td-right-sticky {
+ border-right: 1px solid #e8e8e8;
+}
+.ant-table-bordered.ant-table-scroll-position-right .ant-table-th-left-sticky,
+.ant-table-bordered.ant-table-scroll-position-right .ant-table-td-left-sticky {
+ border-left: 1px solid #e8e8e8;
+}
+.ant-calendar-picker-container {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ z-index: 1050;
+}
+.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-topLeft,
+.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-topRight,
+.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-topLeft,
+.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-topRight {
+ animation-name: antSlideDownIn;
+}
+.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-bottomLeft,
+.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-bottomRight,
+.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-bottomLeft,
+.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-bottomRight {
+ animation-name: antSlideUpIn;
+}
+.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-topLeft,
+.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-topRight {
+ animation-name: antSlideDownOut;
+}
+.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-bottomLeft,
+.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-bottomRight {
+ animation-name: antSlideUpOut;
+}
+.ant-calendar-picker {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ display: inline-block;
+ outline: none;
+ transition: opacity 0.3s;
+}
+.ant-calendar-picker-input {
+ outline: none;
+ display: block;
+}
+.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) {
+ border-color: #1890ff;
+}
+.ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled) {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-calendar-picker-clear,
+.ant-calendar-picker-icon {
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ right: 12px;
+ top: 50%;
+ margin-top: -7px;
+ line-height: 14px;
+ font-size: 12px;
+ transition: all .3s;
+ user-select: none;
+}
+.ant-calendar-picker-clear {
+ opacity: 0;
+ z-index: 1;
+ color: rgba(0, 0, 0, 0.25);
+ background: #fff;
+ pointer-events: none;
+ cursor: pointer;
+}
+.ant-calendar-picker-clear:hover {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-calendar-picker:hover .ant-calendar-picker-clear {
+ opacity: 1;
+ pointer-events: auto;
+}
+.ant-calendar-picker-icon {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-picker-icon:after {
+ content: "\e6bb";
+ font-family: "anticon";
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.25);
+ display: inline-block;
+ line-height: 1;
+}
+.ant-calendar-picker-small .ant-calendar-picker-clear,
+.ant-calendar-picker-small .ant-calendar-picker-icon {
+ right: 8px;
+}
+.ant-calendar {
+ position: relative;
+ outline: none;
+ width: 280px;
+ border: 1px solid #fff;
+ list-style: none;
+ font-size: 14px;
+ text-align: left;
+ background-color: #fff;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ background-clip: padding-box;
+ line-height: 1.5;
+}
+.ant-calendar-input-wrap {
+ height: 34px;
+ padding: 6px 10px;
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-calendar-input {
+ border: 0;
+ width: 100%;
+ cursor: auto;
+ outline: 0;
+ height: 22px;
+ color: #54657e;
+ background: #fff;
+}
+.ant-calendar-input::-moz-placeholder {
+ color: #bfbfbf;
+ opacity: 1;
+}
+.ant-calendar-input:-ms-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-calendar-input::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-calendar-week-number {
+ width: 286px;
+}
+.ant-calendar-week-number-cell {
+ text-align: center;
+}
+.ant-calendar-header {
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ user-select: none;
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-calendar-header a:hover {
+ color: #40a9ff;
+}
+.ant-calendar-header .ant-calendar-century-select,
+.ant-calendar-header .ant-calendar-decade-select,
+.ant-calendar-header .ant-calendar-year-select,
+.ant-calendar-header .ant-calendar-month-select {
+ padding: 0 2px;
+ font-weight: 500;
+ display: inline-block;
+ color: rgba(0, 0, 0, 0.85);
+ line-height: 40px;
+}
+.ant-calendar-header .ant-calendar-century-select-arrow,
+.ant-calendar-header .ant-calendar-decade-select-arrow,
+.ant-calendar-header .ant-calendar-year-select-arrow,
+.ant-calendar-header .ant-calendar-month-select-arrow {
+ display: none;
+}
+.ant-calendar-header .ant-calendar-prev-century-btn,
+.ant-calendar-header .ant-calendar-next-century-btn,
+.ant-calendar-header .ant-calendar-prev-decade-btn,
+.ant-calendar-header .ant-calendar-next-decade-btn,
+.ant-calendar-header .ant-calendar-prev-month-btn,
+.ant-calendar-header .ant-calendar-next-month-btn,
+.ant-calendar-header .ant-calendar-prev-year-btn,
+.ant-calendar-header .ant-calendar-next-year-btn {
+ position: absolute;
+ top: 0;
+ color: rgba(0, 0, 0, 0.45);
+ font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+ padding: 0 5px;
+ font-size: 16px;
+ display: inline-block;
+ line-height: 40px;
+}
+.ant-calendar-header .ant-calendar-prev-century-btn,
+.ant-calendar-header .ant-calendar-prev-decade-btn,
+.ant-calendar-header .ant-calendar-prev-year-btn {
+ left: 7px;
+}
+.ant-calendar-header .ant-calendar-prev-century-btn:after,
+.ant-calendar-header .ant-calendar-prev-decade-btn:after,
+.ant-calendar-header .ant-calendar-prev-year-btn:after {
+ content: '«';
+}
+.ant-calendar-header .ant-calendar-next-century-btn,
+.ant-calendar-header .ant-calendar-next-decade-btn,
+.ant-calendar-header .ant-calendar-next-year-btn {
+ right: 7px;
+}
+.ant-calendar-header .ant-calendar-next-century-btn:after,
+.ant-calendar-header .ant-calendar-next-decade-btn:after,
+.ant-calendar-header .ant-calendar-next-year-btn:after {
+ content: '»';
+}
+.ant-calendar-header .ant-calendar-prev-month-btn {
+ left: 29px;
+}
+.ant-calendar-header .ant-calendar-prev-month-btn:after {
+ content: '‹';
+}
+.ant-calendar-header .ant-calendar-next-month-btn {
+ right: 29px;
+}
+.ant-calendar-header .ant-calendar-next-month-btn:after {
+ content: '›';
+}
+.ant-calendar-body {
+ padding: 8px 12px;
+}
+.ant-calendar table {
+ border-collapse: collapse;
+ max-width: 100%;
+ background-color: transparent;
+ width: 100%;
+}
+.ant-calendar table,
+.ant-calendar th,
+.ant-calendar td {
+ border: 0;
+ text-align: center;
+}
+.ant-calendar-calendar-table {
+ border-spacing: 0;
+ margin-bottom: 0;
+}
+.ant-calendar-column-header {
+ line-height: 18px;
+ width: 33px;
+ padding: 6px 0;
+ text-align: center;
+}
+.ant-calendar-column-header .ant-calendar-column-header-inner {
+ display: block;
+ font-weight: normal;
+}
+.ant-calendar-week-number-header .ant-calendar-column-header-inner {
+ display: none;
+}
+.ant-calendar-cell {
+ padding: 3px 0;
+ height: 30px;
+}
+.ant-calendar-date {
+ display: block;
+ margin: 0 auto;
+ color: #54657e;
+ border-radius: 2px;
+ width: 24px;
+ height: 24px;
+ line-height: 22px;
+ border: 1px solid transparent;
+ padding: 0;
+ background: transparent;
+ text-align: center;
+ transition: background 0.3s ease;
+}
+.ant-calendar-date-panel {
+ position: relative;
+}
+.ant-calendar-date:hover {
+ background: #e6f7ff;
+ cursor: pointer;
+}
+.ant-calendar-date:active {
+ color: #fff;
+ background: #40a9ff;
+}
+.ant-calendar-today .ant-calendar-date {
+ border-color: #1890ff;
+ font-weight: bold;
+ color: #1890ff;
+}
+.ant-calendar-last-month-cell .ant-calendar-date,
+.ant-calendar-next-month-btn-day .ant-calendar-date {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-selected-day .ant-calendar-date {
+ background: #1890ff;
+ color: #fff;
+ border: 1px solid transparent;
+}
+.ant-calendar-selected-day .ant-calendar-date:hover {
+ background: #1890ff;
+}
+.ant-calendar-disabled-cell .ant-calendar-date {
+ cursor: not-allowed;
+ color: #bcbcbc;
+ background: #f5f5f5;
+ border-radius: 0;
+ width: auto;
+ border: 1px solid transparent;
+}
+.ant-calendar-disabled-cell .ant-calendar-date:hover {
+ background: #f5f5f5;
+}
+.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date {
+ position: relative;
+ margin-right: 5px;
+ padding-left: 5px;
+}
+.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date:before {
+ content: " ";
+ position: absolute;
+ top: -1px;
+ left: 5px;
+ width: 24px;
+ height: 24px;
+ border: 1px solid #bcbcbc;
+ border-radius: 2px;
+}
+.ant-calendar-disabled-cell-first-of-row .ant-calendar-date {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+.ant-calendar-disabled-cell-last-of-row .ant-calendar-date {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+.ant-calendar-footer {
+ border-top: 1px solid #e8e8e8;
+ line-height: 38px;
+ padding: 0 12px;
+}
+.ant-calendar-footer:empty {
+ border-top: 0;
+}
+.ant-calendar-footer-btn {
+ text-align: center;
+ display: block;
+}
+.ant-calendar-footer-extra + .ant-calendar-footer-btn {
+ border-top: 1px solid #e8e8e8;
+ margin: 0 -12px;
+ padding: 0 12px;
+}
+.ant-calendar .ant-calendar-today-btn,
+.ant-calendar .ant-calendar-clear-btn {
+ display: inline-block;
+ text-align: center;
+ margin: 0 0 0 8px;
+}
+.ant-calendar .ant-calendar-today-btn-disabled,
+.ant-calendar .ant-calendar-clear-btn-disabled {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+}
+.ant-calendar .ant-calendar-today-btn:only-child,
+.ant-calendar .ant-calendar-clear-btn:only-child {
+ margin: 0;
+}
+.ant-calendar .ant-calendar-clear-btn {
+ display: none;
+ position: absolute;
+ right: 5px;
+ text-indent: -76px;
+ overflow: hidden;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ line-height: 20px;
+ top: 7px;
+ margin: 0;
+}
+.ant-calendar .ant-calendar-clear-btn:after {
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e62e";
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.25);
+ display: inline-block;
+ line-height: 1;
+ width: 20px;
+ text-indent: 43px;
+ transition: color 0.3s ease;
+}
+.ant-calendar .ant-calendar-clear-btn:hover:after {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-calendar .ant-calendar-ok-btn {
+ display: inline-block;
+ font-weight: 400;
+ text-align: center;
+ touch-action: manipulation;
+ cursor: pointer;
+ background-image: none;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ padding: 0 15px;
+ height: 32px;
+ user-select: none;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ position: relative;
+ color: #fff;
+ background-color: #1890ff;
+ border-color: #1890ff;
+ padding: 0 7px;
+ font-size: 14px;
+ border-radius: 4px;
+ height: 24px;
+ line-height: 22px;
+}
+.ant-calendar .ant-calendar-ok-btn > .anticon {
+ line-height: 1;
+}
+.ant-calendar .ant-calendar-ok-btn,
+.ant-calendar .ant-calendar-ok-btn:active,
+.ant-calendar .ant-calendar-ok-btn:focus {
+ outline: 0;
+}
+.ant-calendar .ant-calendar-ok-btn:not([disabled]):hover {
+ text-decoration: none;
+}
+.ant-calendar .ant-calendar-ok-btn:not([disabled]):active {
+ outline: 0;
+ transition: none;
+}
+.ant-calendar .ant-calendar-ok-btn.disabled,
+.ant-calendar .ant-calendar-ok-btn[disabled] {
+ cursor: not-allowed;
+}
+.ant-calendar .ant-calendar-ok-btn.disabled > *,
+.ant-calendar .ant-calendar-ok-btn[disabled] > * {
+ pointer-events: none;
+}
+.ant-calendar .ant-calendar-ok-btn-lg {
+ padding: 0 15px;
+ font-size: 16px;
+ border-radius: 4px;
+ height: 40px;
+}
+.ant-calendar .ant-calendar-ok-btn-sm {
+ padding: 0 7px;
+ font-size: 14px;
+ border-radius: 4px;
+ height: 24px;
+}
+.ant-calendar .ant-calendar-ok-btn > a:only-child {
+ color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-calendar .ant-calendar-ok-btn:hover,
+.ant-calendar .ant-calendar-ok-btn:focus {
+ color: #fff;
+ background-color: #40a9ff;
+ border-color: #40a9ff;
+}
+.ant-calendar .ant-calendar-ok-btn:hover > a:only-child,
+.ant-calendar .ant-calendar-ok-btn:focus > a:only-child {
+ color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn:hover > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn:focus > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-calendar .ant-calendar-ok-btn:active,
+.ant-calendar .ant-calendar-ok-btn.active {
+ color: #fff;
+ background-color: #096dd9;
+ border-color: #096dd9;
+}
+.ant-calendar .ant-calendar-ok-btn:active > a:only-child,
+.ant-calendar .ant-calendar-ok-btn.active > a:only-child {
+ color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn:active > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn.active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-calendar .ant-calendar-ok-btn.disabled,
+.ant-calendar .ant-calendar-ok-btn[disabled],
+.ant-calendar .ant-calendar-ok-btn.disabled:hover,
+.ant-calendar .ant-calendar-ok-btn[disabled]:hover,
+.ant-calendar .ant-calendar-ok-btn.disabled:focus,
+.ant-calendar .ant-calendar-ok-btn[disabled]:focus,
+.ant-calendar .ant-calendar-ok-btn.disabled:active,
+.ant-calendar .ant-calendar-ok-btn[disabled]:active,
+.ant-calendar .ant-calendar-ok-btn.disabled.active,
+.ant-calendar .ant-calendar-ok-btn[disabled].active {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+}
+.ant-calendar .ant-calendar-ok-btn.disabled > a:only-child,
+.ant-calendar .ant-calendar-ok-btn[disabled] > a:only-child,
+.ant-calendar .ant-calendar-ok-btn.disabled:hover > a:only-child,
+.ant-calendar .ant-calendar-ok-btn[disabled]:hover > a:only-child,
+.ant-calendar .ant-calendar-ok-btn.disabled:focus > a:only-child,
+.ant-calendar .ant-calendar-ok-btn[disabled]:focus > a:only-child,
+.ant-calendar .ant-calendar-ok-btn.disabled:active > a:only-child,
+.ant-calendar .ant-calendar-ok-btn[disabled]:active > a:only-child,
+.ant-calendar .ant-calendar-ok-btn.disabled.active > a:only-child,
+.ant-calendar .ant-calendar-ok-btn[disabled].active > a:only-child {
+ color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn.disabled > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn[disabled] > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn.disabled:hover > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn[disabled]:hover > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn.disabled:focus > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn[disabled]:focus > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn.disabled:active > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn[disabled]:active > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn.disabled.active > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn[disabled].active > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+ cursor: not-allowed;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled > a:only-child {
+ color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled:hover {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled:hover > a:only-child {
+ color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled:hover > a:only-child:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+}
+.ant-calendar-range-picker-input {
+ background-color: transparent;
+ border: 0;
+ height: 99%;
+ outline: 0;
+ width: 44%;
+ text-align: center;
+}
+.ant-calendar-range-picker-input::-moz-placeholder {
+ color: #bfbfbf;
+ opacity: 1;
+}
+.ant-calendar-range-picker-input:-ms-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-calendar-range-picker-input::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-calendar-range-picker-input[disabled] {
+ cursor: not-allowed;
+}
+.ant-calendar-range-picker-separator {
+ color: rgba(0, 0, 0, 0.45);
+ width: 10px;
+ display: inline-block;
+ height: 100%;
+ vertical-align: top;
+}
+.ant-calendar-range {
+ width: 552px;
+ overflow: hidden;
+}
+.ant-calendar-range .ant-calendar-date-panel::after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+.ant-calendar-range-part {
+ width: 50%;
+ position: relative;
+}
+.ant-calendar-range-left {
+ float: left;
+}
+.ant-calendar-range-left .ant-calendar-time-picker-inner {
+ border-right: 1.5px solid #e8e8e8;
+}
+.ant-calendar-range-right {
+ float: right;
+}
+.ant-calendar-range-right .ant-calendar-time-picker-inner {
+ border-left: 1.5px solid #e8e8e8;
+}
+.ant-calendar-range-middle {
+ position: absolute;
+ left: 50%;
+ width: 20px;
+ margin-left: -132px;
+ text-align: center;
+ height: 34px;
+ line-height: 34px;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-calendar-range-right .ant-calendar-date-input-wrap {
+ margin-left: -118px;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-range-middle {
+ margin-left: -12px;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-range-right .ant-calendar-date-input-wrap {
+ margin-left: 0;
+}
+.ant-calendar-range .ant-calendar-input-wrap {
+ position: relative;
+ height: 34px;
+}
+.ant-calendar-range .ant-calendar-input,
+.ant-calendar-range .ant-calendar-time-picker-input {
+ position: relative;
+ display: inline-block;
+ padding: 4px 11px;
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ background-color: #fff;
+ background-image: none;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ transition: all .3s;
+ height: 24px;
+ border: 0;
+ box-shadow: none;
+ padding-left: 0;
+ padding-right: 0;
+}
+.ant-calendar-range .ant-calendar-input::-moz-placeholder,
+.ant-calendar-range .ant-calendar-time-picker-input::-moz-placeholder {
+ color: #bfbfbf;
+ opacity: 1;
+}
+.ant-calendar-range .ant-calendar-input:-ms-input-placeholder,
+.ant-calendar-range .ant-calendar-time-picker-input:-ms-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-calendar-range .ant-calendar-input::-webkit-input-placeholder,
+.ant-calendar-range .ant-calendar-time-picker-input::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-calendar-range .ant-calendar-input:hover,
+.ant-calendar-range .ant-calendar-time-picker-input:hover {
+ border-color: #40a9ff;
+}
+.ant-calendar-range .ant-calendar-input:focus,
+.ant-calendar-range .ant-calendar-time-picker-input:focus {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-calendar-range .ant-calendar-input-disabled,
+.ant-calendar-range .ant-calendar-time-picker-input-disabled {
+ background-color: #f5f5f5;
+ opacity: 1;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-range .ant-calendar-input-disabled:hover,
+.ant-calendar-range .ant-calendar-time-picker-input-disabled:hover {
+ border-color: #e6d8d8;
+}
+textarea.ant-calendar-range .ant-calendar-input,
+textarea.ant-calendar-range .ant-calendar-time-picker-input {
+ max-width: 100%;
+ height: auto;
+ vertical-align: bottom;
+ transition: all .3s, height 0s;
+ min-height: 32px;
+}
+.ant-calendar-range .ant-calendar-input-lg,
+.ant-calendar-range .ant-calendar-time-picker-input-lg {
+ padding: 6px 11px;
+ height: 40px;
+ font-size: 16px;
+}
+.ant-calendar-range .ant-calendar-input-sm,
+.ant-calendar-range .ant-calendar-time-picker-input-sm {
+ padding: 1px 7px;
+ height: 24px;
+}
+.ant-calendar-range .ant-calendar-input:focus,
+.ant-calendar-range .ant-calendar-time-picker-input:focus {
+ box-shadow: none;
+}
+.ant-calendar-range .ant-calendar-time-picker-icon {
+ display: none;
+}
+.ant-calendar-range.ant-calendar-week-number {
+ width: 574px;
+}
+.ant-calendar-range.ant-calendar-week-number .ant-calendar-range-part {
+ width: 286px;
+}
+.ant-calendar-range .ant-calendar-year-panel,
+.ant-calendar-range .ant-calendar-month-panel,
+.ant-calendar-range .ant-calendar-decade-panel {
+ top: 34px;
+}
+.ant-calendar-range .ant-calendar-month-panel .ant-calendar-year-panel {
+ top: 0;
+}
+.ant-calendar-range .ant-calendar-decade-panel-table,
+.ant-calendar-range .ant-calendar-year-panel-table,
+.ant-calendar-range .ant-calendar-month-panel-table {
+ height: 208px;
+}
+.ant-calendar-range .ant-calendar-in-range-cell {
+ border-radius: 0;
+ position: relative;
+}
+.ant-calendar-range .ant-calendar-in-range-cell > div {
+ position: relative;
+ z-index: 1;
+}
+.ant-calendar-range .ant-calendar-in-range-cell:before {
+ content: '';
+ display: block;
+ background: #e6f7ff;
+ border-radius: 0;
+ border: 0;
+ position: absolute;
+ top: 4px;
+ bottom: 4px;
+ left: 0;
+ right: 0;
+}
+div.ant-calendar-range-quick-selector {
+ text-align: left;
+}
+div.ant-calendar-range-quick-selector > a {
+ margin-right: 8px;
+}
+.ant-calendar-range .ant-calendar-header,
+.ant-calendar-range .ant-calendar-month-panel-header,
+.ant-calendar-range .ant-calendar-year-panel-header {
+ border-bottom: 0;
+}
+.ant-calendar-range .ant-calendar-body,
+.ant-calendar-range .ant-calendar-month-panel-body,
+.ant-calendar-range .ant-calendar-year-panel-body {
+ border-top: 1px solid #e8e8e8;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker {
+ height: 207px;
+ width: 100%;
+ top: 68px;
+ z-index: 2;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-panel {
+ height: 267px;
+ margin-top: -34px;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-inner {
+ padding-top: 40px;
+ height: 100%;
+ background: none;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-combobox {
+ display: inline-block;
+ height: 100%;
+ background-color: #fff;
+ border-top: 1px solid #e8e8e8;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-select {
+ height: 100%;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-select ul {
+ max-height: 100%;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
+ margin-right: 8px;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-today-btn {
+ margin: 8px 12px;
+ height: 22px;
+ line-height: 22px;
+}
+.ant-calendar-range-with-ranges.ant-calendar-time .ant-calendar-time-picker {
+ height: 247px;
+}
+.ant-calendar-range-with-ranges.ant-calendar-time .ant-calendar-time-picker-panel {
+ height: 281px;
+}
+.ant-calendar-range.ant-calendar-show-time-picker .ant-calendar-body {
+ border-top-color: transparent;
+}
+.ant-calendar-time-picker {
+ position: absolute;
+ width: 100%;
+ top: 40px;
+ background-color: #fff;
+}
+.ant-calendar-time-picker-panel {
+ z-index: 1050;
+ position: absolute;
+ width: 100%;
+}
+.ant-calendar-time-picker-inner {
+ display: inline-block;
+ position: relative;
+ outline: none;
+ list-style: none;
+ font-size: 14px;
+ text-align: left;
+ background-color: #fff;
+ background-clip: padding-box;
+ line-height: 1.5;
+ overflow: hidden;
+ width: 100%;
+}
+.ant-calendar-time-picker-combobox {
+ width: 100%;
+}
+.ant-calendar-time-picker-column-1,
+.ant-calendar-time-picker-column-1 .ant-calendar-time-picker-select {
+ width: 100%;
+}
+.ant-calendar-time-picker-column-2 .ant-calendar-time-picker-select {
+ width: 50%;
+}
+.ant-calendar-time-picker-column-3 .ant-calendar-time-picker-select {
+ width: 33.33%;
+}
+.ant-calendar-time-picker-column-4 .ant-calendar-time-picker-select {
+ width: 25%;
+}
+.ant-calendar-time-picker-input-wrap {
+ display: none;
+}
+.ant-calendar-time-picker-select {
+ float: left;
+ font-size: 14px;
+ border-right: 1px solid #e8e8e8;
+ box-sizing: border-box;
+ overflow: hidden;
+ position: relative;
+ height: 226px;
+}
+.ant-calendar-time-picker-select:hover {
+ overflow-y: auto;
+}
+.ant-calendar-time-picker-select:first-child {
+ border-left: 0;
+ margin-left: 0;
+}
+.ant-calendar-time-picker-select:last-child {
+ border-right: 0;
+}
+.ant-calendar-time-picker-select ul {
+ list-style: none;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ max-height: 206px;
+}
+.ant-calendar-time-picker-select li {
+ text-align: center;
+ list-style: none;
+ box-sizing: content-box;
+ margin: 0;
+ width: 100%;
+ height: 24px;
+ line-height: 24px;
+ cursor: pointer;
+ user-select: none;
+ transition: background 0.3s ease;
+}
+.ant-calendar-time-picker-select li:last-child:after {
+ content: '';
+ height: 202px;
+ display: block;
+}
+.ant-calendar-time-picker-select li:hover {
+ background: #e6f7ff;
+}
+li.ant-calendar-time-picker-select-option-selected {
+ background: #f5f5f5;
+ font-weight: bold;
+}
+li.ant-calendar-time-picker-select-option-disabled {
+ color: rgba(0, 0, 0, 0.25);
+}
+li.ant-calendar-time-picker-select-option-disabled:hover {
+ background: transparent;
+ cursor: not-allowed;
+}
+.ant-calendar-time .ant-calendar-day-select {
+ padding: 0 2px;
+ font-weight: 500;
+ display: inline-block;
+ color: rgba(0, 0, 0, 0.85);
+ line-height: 34px;
+}
+.ant-calendar-time .ant-calendar-footer {
+ position: relative;
+ height: auto;
+}
+.ant-calendar-time .ant-calendar-footer-btn {
+ text-align: right;
+}
+.ant-calendar-time .ant-calendar-footer .ant-calendar-today-btn {
+ float: left;
+ margin: 0;
+}
+.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
+ display: inline-block;
+ margin-right: 8px;
+}
+.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn-disabled {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-month-panel {
+ position: absolute;
+ top: 1px;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 10;
+ border-radius: 4px;
+ background: #fff;
+ outline: none;
+}
+.ant-calendar-month-panel > div {
+ height: 100%;
+}
+.ant-calendar-month-panel-hidden {
+ display: none;
+}
+.ant-calendar-month-panel-header {
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ user-select: none;
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-calendar-month-panel-header a:hover {
+ color: #40a9ff;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-century-select,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-year-select,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-month-select {
+ padding: 0 2px;
+ font-weight: 500;
+ display: inline-block;
+ color: rgba(0, 0, 0, 0.85);
+ line-height: 40px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-century-select-arrow,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select-arrow,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-year-select-arrow,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-month-select-arrow {
+ display: none;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn {
+ position: absolute;
+ top: 0;
+ color: rgba(0, 0, 0, 0.45);
+ font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+ padding: 0 5px;
+ font-size: 16px;
+ display: inline-block;
+ line-height: 40px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn {
+ left: 7px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn:after,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn:after,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn:after {
+ content: '«';
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn {
+ right: 7px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn:after,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn:after,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn:after {
+ content: '»';
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn {
+ left: 29px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn:after {
+ content: '‹';
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn {
+ right: 29px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn:after {
+ content: '›';
+}
+.ant-calendar-month-panel-body {
+ height: calc(100% - 40px);
+}
+.ant-calendar-month-panel-table {
+ table-layout: fixed;
+ width: 100%;
+ height: 100%;
+ border-collapse: separate;
+}
+.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
+ background: #1890ff;
+ color: #fff;
+}
+.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover {
+ background: #1890ff;
+ color: #fff;
+}
+.ant-calendar-month-panel-cell {
+ text-align: center;
+}
+.ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month,
+.ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month:hover {
+ cursor: not-allowed;
+ color: #bcbcbc;
+ background: #f5f5f5;
+}
+.ant-calendar-month-panel-month {
+ display: inline-block;
+ margin: 0 auto;
+ color: #54657e;
+ background: transparent;
+ text-align: center;
+ height: 24px;
+ line-height: 24px;
+ padding: 0 8px;
+ border-radius: 2px;
+ transition: background 0.3s ease;
+}
+.ant-calendar-month-panel-month:hover {
+ background: #e6f7ff;
+ cursor: pointer;
+}
+.ant-calendar-year-panel {
+ position: absolute;
+ top: 1px;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 10;
+ border-radius: 4px;
+ background: #fff;
+ outline: none;
+}
+.ant-calendar-year-panel > div {
+ height: 100%;
+}
+.ant-calendar-year-panel-hidden {
+ display: none;
+}
+.ant-calendar-year-panel-header {
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ user-select: none;
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-calendar-year-panel-header a:hover {
+ color: #40a9ff;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-century-select,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-year-select,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-month-select {
+ padding: 0 2px;
+ font-weight: 500;
+ display: inline-block;
+ color: rgba(0, 0, 0, 0.85);
+ line-height: 40px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-century-select-arrow,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select-arrow,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-year-select-arrow,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-month-select-arrow {
+ display: none;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn {
+ position: absolute;
+ top: 0;
+ color: rgba(0, 0, 0, 0.45);
+ font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+ padding: 0 5px;
+ font-size: 16px;
+ display: inline-block;
+ line-height: 40px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn {
+ left: 7px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn:after,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn:after,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn:after {
+ content: '«';
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn {
+ right: 7px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn:after,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn:after,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn:after {
+ content: '»';
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn {
+ left: 29px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn:after {
+ content: '‹';
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn {
+ right: 29px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn:after {
+ content: '›';
+}
+.ant-calendar-year-panel-body {
+ height: calc(100% - 40px);
+}
+.ant-calendar-year-panel-table {
+ table-layout: fixed;
+ width: 100%;
+ height: 100%;
+ border-collapse: separate;
+}
+.ant-calendar-year-panel-cell {
+ text-align: center;
+}
+.ant-calendar-year-panel-year {
+ display: inline-block;
+ margin: 0 auto;
+ color: #54657e;
+ background: transparent;
+ text-align: center;
+ height: 24px;
+ line-height: 24px;
+ padding: 0 8px;
+ border-radius: 2px;
+ transition: background 0.3s ease;
+}
+.ant-calendar-year-panel-year:hover {
+ background: #e6f7ff;
+ cursor: pointer;
+}
+.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year {
+ background: #1890ff;
+ color: #fff;
+}
+.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover {
+ background: #1890ff;
+ color: #fff;
+}
+.ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year,
+.ant-calendar-year-panel-next-decade-cell .ant-calendar-year-panel-year {
+ user-select: none;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-decade-panel {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 10;
+ background: #fff;
+ border-radius: 4px;
+ outline: none;
+}
+.ant-calendar-decade-panel-hidden {
+ display: none;
+}
+.ant-calendar-decade-panel-header {
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ user-select: none;
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-calendar-decade-panel-header a:hover {
+ color: #40a9ff;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-century-select,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-decade-select,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-year-select,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-month-select {
+ padding: 0 2px;
+ font-weight: 500;
+ display: inline-block;
+ color: rgba(0, 0, 0, 0.85);
+ line-height: 40px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-century-select-arrow,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-decade-select-arrow,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-year-select-arrow,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-month-select-arrow {
+ display: none;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn {
+ position: absolute;
+ top: 0;
+ color: rgba(0, 0, 0, 0.45);
+ font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+ padding: 0 5px;
+ font-size: 16px;
+ display: inline-block;
+ line-height: 40px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn {
+ left: 7px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn:after,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn:after,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn:after {
+ content: '«';
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn {
+ right: 7px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn:after,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn:after,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn:after {
+ content: '»';
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn {
+ left: 29px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn:after {
+ content: '‹';
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn {
+ right: 29px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn:after {
+ content: '›';
+}
+.ant-calendar-decade-panel-body {
+ height: calc(100% - 40px);
+}
+.ant-calendar-decade-panel-table {
+ table-layout: fixed;
+ width: 100%;
+ height: 100%;
+ border-collapse: separate;
+}
+.ant-calendar-decade-panel-cell {
+ text-align: center;
+ white-space: nowrap;
+}
+.ant-calendar-decade-panel-decade {
+ display: inline-block;
+ margin: 0 auto;
+ color: #54657e;
+ background: transparent;
+ text-align: center;
+ height: 24px;
+ line-height: 24px;
+ padding: 0 6px;
+ border-radius: 2px;
+ transition: background 0.3s ease;
+}
+.ant-calendar-decade-panel-decade:hover {
+ background: #e6f7ff;
+ cursor: pointer;
+}
+.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade {
+ background: #1890ff;
+ color: #fff;
+}
+.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover {
+ background: #1890ff;
+ color: #fff;
+}
+.ant-calendar-decade-panel-last-century-cell .ant-calendar-decade-panel-decade,
+.ant-calendar-decade-panel-next-century-cell .ant-calendar-decade-panel-decade {
+ user-select: none;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-month .ant-calendar-month-header-wrap {
+ position: relative;
+ height: 288px;
+}
+.ant-calendar-month .ant-calendar-month-panel,
+.ant-calendar-month .ant-calendar-year-panel {
+ top: 0;
+ height: 100%;
+}
+.ant-calendar-week-number-cell {
+ opacity: 0.5;
+}
+.ant-calendar-week-number .ant-calendar-body tr {
+ transition: all .3s;
+ cursor: pointer;
+}
+.ant-calendar-week-number .ant-calendar-body tr:hover {
+ background: #e6f7ff;
+}
+.ant-calendar-week-number .ant-calendar-body tr.ant-calendar-active-week {
+ background: #bae7ff;
+ font-weight: bold;
+}
+.ant-calendar-week-number .ant-calendar-body tr .ant-calendar-selected-day .ant-calendar-date,
+.ant-calendar-week-number .ant-calendar-body tr .ant-calendar-selected-day:hover .ant-calendar-date {
+ background: transparent;
+ color: #54657e;
+}
+.ant-divider {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ background: #e8e8e8;
+}
+.ant-divider,
+.ant-divider-vertical {
+ margin: 0 8px;
+ display: inline-block;
+ height: 0.9em;
+ width: 1px;
+ vertical-align: middle;
+ position: relative;
+ top: -0.06em;
+}
+.ant-divider-horizontal {
+ display: block;
+ height: 1px;
+ width: 100%;
+ margin: 24px 0;
+}
+.ant-divider-horizontal.ant-divider-with-text {
+ display: table;
+ white-space: nowrap;
+ text-align: center;
+ background: transparent;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.85);
+ font-size: 16px;
+ margin: 16px 0;
+}
+.ant-divider-horizontal.ant-divider-with-text:before,
+.ant-divider-horizontal.ant-divider-with-text:after {
+ content: '';
+ display: table-cell;
+ position: relative;
+ top: 50%;
+ width: 50%;
+ border-top: 1px solid #e8e8e8;
+ transform: translateY(50%);
+}
+.ant-divider-inner-text {
+ display: inline-block;
+ padding: 0 24px;
+}
+.ant-divider-horizontal.ant-divider-with-text-left {
+ display: table;
+ white-space: nowrap;
+ text-align: center;
+ background: transparent;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.85);
+ font-size: 14px;
+ margin: 16px 0;
+}
+.ant-divider-horizontal.ant-divider-with-text-left:before {
+ content: '';
+ display: table-cell;
+ position: relative;
+ top: 50%;
+ width: 5%;
+ border-top: 1px solid #e8e8e8;
+ transform: translateY(50%);
+}
+.ant-divider-horizontal.ant-divider-with-text-left:after {
+ content: '';
+ display: table-cell;
+ position: relative;
+ top: 50%;
+ width: 95%;
+ border-top: 1px solid #e8e8e8;
+ transform: translateY(50%);
+}
+.ant-divider-horizontal.ant-divider-with-text-left-inner-text {
+ display: inline-block;
+ padding: 0 10px;
+}
+.ant-divider-horizontal.ant-divider-with-text-right {
+ display: table;
+ white-space: nowrap;
+ text-align: center;
+ background: transparent;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.85);
+ font-size: 14px;
+ margin: 16px 0;
+}
+.ant-divider-horizontal.ant-divider-with-text-right:before {
+ content: '';
+ display: table-cell;
+ position: relative;
+ top: 50%;
+ width: 95%;
+ border-top: 1px solid #e8e8e8;
+ transform: translateY(50%);
+}
+.ant-divider-horizontal.ant-divider-with-text-right:after {
+ content: '';
+ display: table-cell;
+ position: relative;
+ top: 50%;
+ width: 5%;
+ border-top: 1px solid #e8e8e8;
+ transform: translateY(50%);
+}
+.ant-divider-horizontal.ant-divider-with-text-right-inner-text {
+ display: inline-block;
+ padding: 0 10px;
+}
+.ant-divider-dashed {
+ background: none;
+ border-top: 1px dashed #e8e8e8;
+}
+.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed {
+ border-top: 0;
+}
+.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed:before,
+.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed:after {
+ border-style: dashed none none;
+}
+.ant-dropdown {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ left: -9999px;
+ top: -9999px;
+ z-index: 1050;
+ display: block;
+}
+.ant-dropdown-wrap {
+ position: relative;
+}
+.ant-dropdown-wrap .ant-btn > .anticon-down {
+ display: inline-block;
+ font-size: 12px;
+ font-size: 10px \9;
+ transform: scale(0.83333333) rotate(0deg);
+}
+:root .ant-dropdown-wrap .ant-btn > .anticon-down {
+ font-size: 12px;
+}
+.ant-dropdown-wrap .anticon-down:before {
+ transition: transform .2s;
+}
+.ant-dropdown-wrap-open .anticon-down:before {
+ transform: rotate(180deg);
+}
+.ant-dropdown-hidden,
+.ant-dropdown-menu-hidden {
+ display: none;
+}
+.ant-dropdown-menu {
+ outline: none;
+ position: relative;
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ text-align: left;
+ background-color: #fff;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ background-clip: padding-box;
+}
+.ant-dropdown-menu-item-group-title {
+ color: rgba(0, 0, 0, 0.45);
+ padding: 5px 12px;
+ transition: all .3s;
+}
+.ant-dropdown-menu-submenu-popup {
+ position: absolute;
+ z-index: 1050;
+}
+.ant-dropdown-menu-item,
+.ant-dropdown-menu-submenu-title {
+ padding: 5px 12px;
+ margin: 0;
+ clear: both;
+ font-size: 14px;
+ font-weight: normal;
+ color: #54657e;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: all .3s;
+ line-height: 22px;
+}
+.ant-dropdown-menu-item > a,
+.ant-dropdown-menu-submenu-title > a {
+ color: #54657e;
+ display: block;
+ padding: 5px 12px;
+ margin: -5px -12px;
+ transition: all .3s;
+}
+.ant-dropdown-menu-item > a:focus,
+.ant-dropdown-menu-submenu-title > a:focus {
+ text-decoration: none;
+}
+.ant-dropdown-menu-item-selected,
+.ant-dropdown-menu-submenu-title-selected,
+.ant-dropdown-menu-item-selected > a,
+.ant-dropdown-menu-submenu-title-selected > a {
+ color: #1890ff;
+ background-color: #e6f7ff;
+}
+.ant-dropdown-menu-item:hover,
+.ant-dropdown-menu-submenu-title:hover {
+ background-color: #e6f7ff;
+}
+.ant-dropdown-menu-item-disabled,
+.ant-dropdown-menu-submenu-title-disabled {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+}
+.ant-dropdown-menu-item-disabled:hover,
+.ant-dropdown-menu-submenu-title-disabled:hover {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #fff;
+ cursor: not-allowed;
+}
+.ant-dropdown-menu-item:first-child,
+.ant-dropdown-menu-submenu-title:first-child,
+.ant-dropdown-menu-item:first-child > a,
+.ant-dropdown-menu-submenu-title:first-child > a {
+ border-radius: 4px 4px 0 0;
+}
+.ant-dropdown-menu-item:last-child,
+.ant-dropdown-menu-submenu-title:last-child,
+.ant-dropdown-menu-item:last-child > a,
+.ant-dropdown-menu-submenu-title:last-child > a {
+ border-radius: 0 0 4px 4px;
+}
+.ant-dropdown-menu-item:only-child,
+.ant-dropdown-menu-submenu-title:only-child,
+.ant-dropdown-menu-item:only-child > a,
+.ant-dropdown-menu-submenu-title:only-child > a {
+ border-radius: 4px;
+}
+.ant-dropdown-menu-item-divider,
+.ant-dropdown-menu-submenu-title-divider {
+ height: 1px;
+ overflow: hidden;
+ background-color: #e8e8e8;
+ line-height: 0;
+}
+.ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow,
+.ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow {
+ position: absolute;
+ right: 8px;
+}
+.ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow:after,
+.ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow:after {
+ font-family: "anticon" !important;
+ font-style: normal;
+ content: "\e61f";
+ color: rgba(0, 0, 0, 0.45);
+ display: inline-block;
+ font-size: 12px;
+ font-size: 10px \9;
+ transform: scale(0.83333333) rotate(0deg);
+}
+:root .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow:after,
+:root .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow:after {
+ font-size: 12px;
+}
+.ant-dropdown-menu-submenu-title {
+ padding-right: 26px;
+}
+.ant-dropdown-menu-submenu-title:first-child,
+.ant-dropdown-menu-submenu-title:last-child {
+ border-radius: 0;
+}
+.ant-dropdown-menu-submenu-vertical {
+ position: relative;
+}
+.ant-dropdown-menu-submenu-vertical > .ant-dropdown-menu {
+ top: 0;
+ left: 100%;
+ position: absolute;
+ min-width: 100%;
+ margin-left: 4px;
+ transform-origin: 0 0;
+}
+.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title,
+.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow:after {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-dropdown-menu-submenu:first-child .ant-dropdown-menu-submenu-title {
+ border-radius: 4px 4px 0 0;
+}
+.ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title {
+ border-radius: 0 0 4px 4px;
+}
+.ant-dropdown.slide-down-enter.slide-down-enter-active.ant-dropdown-placement-bottomLeft,
+.ant-dropdown.slide-down-appear.slide-down-appear-active.ant-dropdown-placement-bottomLeft,
+.ant-dropdown.slide-down-enter.slide-down-enter-active.ant-dropdown-placement-bottomCenter,
+.ant-dropdown.slide-down-appear.slide-down-appear-active.ant-dropdown-placement-bottomCenter,
+.ant-dropdown.slide-down-enter.slide-down-enter-active.ant-dropdown-placement-bottomRight,
+.ant-dropdown.slide-down-appear.slide-down-appear-active.ant-dropdown-placement-bottomRight {
+ animation-name: antSlideUpIn;
+}
+.ant-dropdown.slide-up-enter.slide-up-enter-active.ant-dropdown-placement-topLeft,
+.ant-dropdown.slide-up-appear.slide-up-appear-active.ant-dropdown-placement-topLeft,
+.ant-dropdown.slide-up-enter.slide-up-enter-active.ant-dropdown-placement-topCenter,
+.ant-dropdown.slide-up-appear.slide-up-appear-active.ant-dropdown-placement-topCenter,
+.ant-dropdown.slide-up-enter.slide-up-enter-active.ant-dropdown-placement-topRight,
+.ant-dropdown.slide-up-appear.slide-up-appear-active.ant-dropdown-placement-topRight {
+ animation-name: antSlideDownIn;
+}
+.ant-dropdown.slide-down-leave.slide-down-leave-active.ant-dropdown-placement-bottomLeft,
+.ant-dropdown.slide-down-leave.slide-down-leave-active.ant-dropdown-placement-bottomCenter,
+.ant-dropdown.slide-down-leave.slide-down-leave-active.ant-dropdown-placement-bottomRight {
+ animation-name: antSlideUpOut;
+}
+.ant-dropdown.slide-up-leave.slide-up-leave-active.ant-dropdown-placement-topLeft,
+.ant-dropdown.slide-up-leave.slide-up-leave-active.ant-dropdown-placement-topCenter,
+.ant-dropdown.slide-up-leave.slide-up-leave-active.ant-dropdown-placement-topRight {
+ animation-name: antSlideDownOut;
+}
+.ant-dropdown-trigger .anticon-down,
+.ant-dropdown-link .anticon-down {
+ display: inline-block;
+ font-size: 12px;
+ font-size: 10px \9;
+ transform: scale(0.83333333) rotate(0deg);
+}
+:root .ant-dropdown-trigger .anticon-down,
+:root .ant-dropdown-link .anticon-down {
+ font-size: 12px;
+}
+.ant-dropdown-button {
+ white-space: nowrap;
+}
+.ant-dropdown-button.ant-btn-group > .ant-btn:last-child:not(:first-child) {
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.ant-dropdown-button .anticon-down {
+ display: inline-block;
+ font-size: 12px;
+ font-size: 10px \9;
+ transform: scale(0.83333333) rotate(0deg);
+}
+:root .ant-dropdown-button .anticon-down {
+ font-size: 12px;
+}
+.ant-dropdown-menu-dark,
+.ant-dropdown-menu-dark .ant-dropdown-menu {
+ background: #2a3542;
+}
+.ant-dropdown-menu-dark .ant-dropdown-menu-item,
+.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title,
+.ant-dropdown-menu-dark .ant-dropdown-menu-item > a {
+ color: rgba(255, 255, 255, 0.65);
+}
+.ant-dropdown-menu-dark .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow:after,
+.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow:after,
+.ant-dropdown-menu-dark .ant-dropdown-menu-item > a .ant-dropdown-menu-submenu-arrow:after {
+ color: rgba(255, 255, 255, 0.65);
+}
+.ant-dropdown-menu-dark .ant-dropdown-menu-item:hover,
+.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover,
+.ant-dropdown-menu-dark .ant-dropdown-menu-item > a:hover {
+ color: #fff;
+ background: transparent;
+}
+.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected,
+.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected:hover,
+.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected > a {
+ background: #1890ff;
+ color: #fff;
+}
+.ant-form {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.ant-form legend {
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-bottom: 20px;
+ font-size: 16px;
+ line-height: inherit;
+ color: rgba(0, 0, 0, 0.45);
+ border: 0;
+ border-bottom: 1px solid #d9d9d9;
+}
+.ant-form label {
+ font-size: 14px;
+}
+.ant-form input[type="search"] {
+ box-sizing: border-box;
+}
+.ant-form input[type="radio"],
+.ant-form input[type="checkbox"] {
+ line-height: normal;
+}
+.ant-form input[type="file"] {
+ display: block;
+}
+.ant-form input[type="range"] {
+ display: block;
+ width: 100%;
+}
+.ant-form select[multiple],
+.ant-form select[size] {
+ height: auto;
+}
+.ant-form input[type="file"]:focus,
+.ant-form input[type="radio"]:focus,
+.ant-form input[type="checkbox"]:focus {
+ outline: thin dotted;
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+}
+.ant-form output {
+ display: block;
+ padding-top: 15px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+}
+.ant-form-item-required:before {
+ display: inline-block;
+ margin-right: 4px;
+ content: "*";
+ font-family: SimSun;
+ line-height: 1;
+ font-size: 14px;
+ color: #f5222d;
+}
+.ant-form-hide-required-mark .ant-form-item-required:before {
+ display: none;
+}
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"].disabled,
+input[type="checkbox"].disabled {
+ cursor: not-allowed;
+}
+.ant-radio-inline.disabled,
+.ant-radio-vertical.disabled,
+.ant-checkbox-inline.disabled,
+.ant-checkbox-vertical.disabled {
+ cursor: not-allowed;
+}
+.ant-radio.disabled label,
+.ant-checkbox.disabled label {
+ cursor: not-allowed;
+}
+.ant-form-item {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ margin-bottom: 24px;
+ vertical-align: top;
+ transition: margin 0.15s steps(1);
+}
+.ant-form-item label {
+ position: relative;
+}
+.ant-form-item label > .anticon {
+ vertical-align: top;
+ font-size: 14px;
+}
+.ant-form-item-control > .ant-form-item:last-child,
+.ant-form-item [class^="ant-col-"] > .ant-form-item:only-child {
+ margin-bottom: -24px;
+}
+.ant-form-item-control {
+ line-height: 39.9999px;
+ position: relative;
+ zoom: 1;
+}
+.ant-form-item-control:before,
+.ant-form-item-control:after {
+ content: " ";
+ display: table;
+}
+.ant-form-item-control:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-form-item-control:before,
+.ant-form-item-control:after {
+ content: " ";
+ display: table;
+}
+.ant-form-item-control:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-form-item-children {
+ position: relative;
+}
+.ant-form-item-with-help {
+ margin-bottom: 5px;
+ transition: none;
+}
+.ant-form-item-label {
+ text-align: right;
+ vertical-align: middle;
+ line-height: 39.9999px;
+ display: inline-block;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.ant-form-item-label label {
+ color: rgba(0, 0, 0, 0.85);
+}
+.ant-form-item-label label:after {
+ content: ":";
+ margin: 0 8px 0 2px;
+ position: relative;
+ top: -0.5px;
+}
+.ant-form-item .ant-switch {
+ margin: 2px 0 4px;
+}
+.ant-form-item-no-colon .ant-form-item-label label:after {
+ content: " ";
+}
+.ant-form-explain,
+.ant-form-extra {
+ color: rgba(0, 0, 0, 0.45);
+ line-height: 1.5;
+ transition: color 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+ margin-top: -2px;
+}
+.ant-form-extra {
+ padding-top: 4px;
+}
+.ant-form-text {
+ display: inline-block;
+ padding-right: 8px;
+}
+.ant-form-split {
+ display: block;
+ text-align: center;
+}
+form .has-feedback .ant-input {
+ padding-right: 24px;
+}
+form .has-feedback > .ant-select .ant-select-arrow,
+form .has-feedback > .ant-select .ant-select-selection__clear,
+form .has-feedback :not(.ant-input-group-addon) > .ant-select .ant-select-arrow,
+form .has-feedback :not(.ant-input-group-addon) > .ant-select .ant-select-selection__clear {
+ right: 28px;
+}
+form .has-feedback > .ant-select .ant-select-selection-selected-value,
+form .has-feedback :not(.ant-input-group-addon) > .ant-select .ant-select-selection-selected-value {
+ padding-right: 42px;
+}
+form .has-feedback .ant-cascader-picker-arrow {
+ margin-right: 17px;
+}
+form .has-feedback .ant-cascader-picker-clear {
+ right: 28px;
+}
+form .has-feedback .ant-input-search:not(.ant-input-search-enter-button) .ant-input-suffix {
+ right: 28px;
+}
+form .has-feedback .ant-calendar-picker-icon,
+form .has-feedback .ant-time-picker-icon,
+form .has-feedback .ant-calendar-picker-clear,
+form .has-feedback .ant-time-picker-clear {
+ right: 28px;
+}
+form textarea.ant-input {
+ height: auto;
+}
+form .ant-upload {
+ background: transparent;
+}
+form input[type="radio"],
+form input[type="checkbox"] {
+ width: 14px;
+ height: 14px;
+}
+form .ant-radio-inline,
+form .ant-checkbox-inline {
+ display: inline-block;
+ vertical-align: middle;
+ font-weight: normal;
+ cursor: pointer;
+ margin-left: 8px;
+}
+form .ant-radio-inline:first-child,
+form .ant-checkbox-inline:first-child {
+ margin-left: 0;
+}
+form .ant-checkbox-vertical,
+form .ant-radio-vertical {
+ display: block;
+}
+form .ant-checkbox-vertical + .ant-checkbox-vertical,
+form .ant-radio-vertical + .ant-radio-vertical {
+ margin-left: 0;
+}
+form .ant-input-number + .ant-form-text {
+ margin-left: 8px;
+}
+form .ant-select,
+form .ant-cascader-picker {
+ width: 100%;
+}
+form .ant-input-group .ant-select,
+form .ant-input-group .ant-cascader-picker {
+ width: auto;
+}
+form .ant-input-group-wrapper {
+ vertical-align: middle;
+ position: relative;
+ top: -1px;
+}
+.ant-input-group-wrap .ant-select-selection {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+}
+.ant-input-group-wrap .ant-select-selection:hover {
+ border-color: #d9d9d9;
+}
+.ant-input-group-wrap .ant-select-selection--single {
+ margin-left: -1px;
+ height: 40px;
+ background-color: #eee;
+}
+.ant-input-group-wrap .ant-select-selection--single .ant-select-selection__rendered {
+ padding-left: 8px;
+ padding-right: 25px;
+ line-height: 30px;
+}
+.ant-input-group-wrap .ant-select-open .ant-select-selection {
+ border-color: #d9d9d9;
+ box-shadow: none;
+}
+.ant-form-vertical .ant-form-item-label,
+.ant-col-24.ant-form-item-label,
+.ant-col-xl-24.ant-form-item-label {
+ padding: 0 0 8px;
+ margin: 0;
+ display: block;
+ text-align: left;
+ line-height: 1.5;
+}
+.ant-form-vertical .ant-form-item-label label:after,
+.ant-col-24.ant-form-item-label label:after,
+.ant-col-xl-24.ant-form-item-label label:after {
+ display: none;
+}
+.ant-form-vertical .ant-form-item {
+ padding-bottom: 8px;
+}
+.ant-form-vertical .ant-form-item-control {
+ line-height: 1.5;
+}
+.ant-form-vertical .ant-form-explain,
+.ant-form-vertical .ant-form-extra {
+ margin-top: 2px;
+ margin-bottom: -4px;
+}
+@media (max-width: 575px) {
+ .ant-form-item-label,
+ .ant-form-item-control-wrapper {
+ display: block;
+ width: 100%;
+ }
+ .ant-form-item-label {
+ padding: 0 0 8px;
+ margin: 0;
+ display: block;
+ text-align: left;
+ line-height: 1.5;
+ }
+ .ant-form-item-label label:after {
+ display: none;
+ }
+ .ant-col-xs-24.ant-form-item-label {
+ padding: 0 0 8px;
+ margin: 0;
+ display: block;
+ text-align: left;
+ line-height: 1.5;
+ }
+ .ant-col-xs-24.ant-form-item-label label:after {
+ display: none;
+ }
+}
+@media (max-width: 767px) {
+ .ant-col-sm-24.ant-form-item-label {
+ padding: 0 0 8px;
+ margin: 0;
+ display: block;
+ text-align: left;
+ line-height: 1.5;
+ }
+ .ant-col-sm-24.ant-form-item-label label:after {
+ display: none;
+ }
+}
+@media (max-width: 991px) {
+ .ant-col-md-24.ant-form-item-label {
+ padding: 0 0 8px;
+ margin: 0;
+ display: block;
+ text-align: left;
+ line-height: 1.5;
+ }
+ .ant-col-md-24.ant-form-item-label label:after {
+ display: none;
+ }
+}
+@media (max-width: 1199px) {
+ .ant-col-lg-24.ant-form-item-label {
+ padding: 0 0 8px;
+ margin: 0;
+ display: block;
+ text-align: left;
+ line-height: 1.5;
+ }
+ .ant-col-lg-24.ant-form-item-label label:after {
+ display: none;
+ }
+}
+@media (max-width: 1599px) {
+ .ant-col-xl-24.ant-form-item-label {
+ padding: 0 0 8px;
+ margin: 0;
+ display: block;
+ text-align: left;
+ line-height: 1.5;
+ }
+ .ant-col-xl-24.ant-form-item-label label:after {
+ display: none;
+ }
+}
+.ant-form-inline .ant-form-item {
+ display: inline-block;
+ margin-right: 16px;
+ margin-bottom: 0;
+}
+.ant-form-inline .ant-form-item-with-help {
+ margin-bottom: 24px;
+}
+.ant-form-inline .ant-form-item > .ant-form-item-control-wrapper,
+.ant-form-inline .ant-form-item > .ant-form-item-label {
+ display: inline-block;
+ vertical-align: middle;
+}
+.ant-form-inline .ant-form-text {
+ display: inline-block;
+}
+.ant-form-inline .has-feedback {
+ display: inline-block;
+}
+.ant-form-inline .ant-form-explain {
+ position: absolute;
+}
+.has-success.has-feedback .ant-form-item-children:after,
+.has-warning.has-feedback .ant-form-item-children:after,
+.has-error.has-feedback .ant-form-item-children:after,
+.is-validating.has-feedback .ant-form-item-children:after {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ visibility: visible;
+ pointer-events: none;
+ width: 32px;
+ height: 20px;
+ line-height: 20px;
+ margin-top: -10px;
+ text-align: center;
+ font-size: 14px;
+ animation: zoomIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "";
+ z-index: 1;
+}
+.has-success.has-feedback .ant-form-item-children:after {
+ animation-name: diffZoomIn1 !important;
+ content: '\e630';
+ color: #52c41a;
+}
+.has-warning .ant-form-explain,
+.has-warning .ant-form-split {
+ color: #faad14;
+}
+.has-warning .ant-input,
+.has-warning .ant-input:hover {
+ border-color: #faad14;
+}
+.has-warning .ant-input:focus {
+ border-color: #ffc53d;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.has-warning .ant-input:not([disabled]):hover {
+ border-color: #faad14;
+}
+.has-warning .ant-calendar-picker-open .ant-calendar-picker-input {
+ border-color: #ffc53d;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.has-warning .ant-input-prefix {
+ color: #faad14;
+}
+.has-warning .ant-input-group-addon {
+ color: #faad14;
+ border-color: #faad14;
+ background-color: #fff;
+}
+.has-warning .has-feedback {
+ color: #faad14;
+}
+.has-warning.has-feedback .ant-form-item-children:after {
+ content: '\e62c';
+ color: #faad14;
+ animation-name: diffZoomIn3 !important;
+}
+.has-warning .ant-select-selection {
+ border-color: #faad14;
+}
+.has-warning .ant-select-open .ant-select-selection,
+.has-warning .ant-select-focused .ant-select-selection {
+ border-color: #ffc53d;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.has-warning .ant-calendar-picker-icon:after,
+.has-warning .ant-time-picker-icon:after,
+.has-warning .ant-picker-icon:after,
+.has-warning .ant-select-arrow,
+.has-warning .ant-cascader-picker-arrow {
+ color: #faad14;
+}
+.has-warning .ant-input-number,
+.has-warning .ant-time-picker-input {
+ border-color: #faad14;
+}
+.has-warning .ant-input-number-focused,
+.has-warning .ant-time-picker-input-focused,
+.has-warning .ant-input-number:focus,
+.has-warning .ant-time-picker-input:focus {
+ border-color: #ffc53d;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.has-warning .ant-input-number:not([disabled]):hover,
+.has-warning .ant-time-picker-input:not([disabled]):hover {
+ border-color: #faad14;
+}
+.has-warning .ant-cascader-picker:focus .ant-cascader-input {
+ border-color: #ffc53d;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.has-error .ant-form-explain,
+.has-error .ant-form-split {
+ color: #f5222d;
+}
+.has-error .ant-input,
+.has-error .ant-input:hover {
+ border-color: #f5222d;
+}
+.has-error .ant-input:focus {
+ border-color: #ff4d4f;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.has-error .ant-input:not([disabled]):hover {
+ border-color: #f5222d;
+}
+.has-error .ant-calendar-picker-open .ant-calendar-picker-input {
+ border-color: #ff4d4f;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.has-error .ant-input-prefix {
+ color: #f5222d;
+}
+.has-error .ant-input-group-addon {
+ color: #f5222d;
+ border-color: #f5222d;
+ background-color: #fff;
+}
+.has-error .has-feedback {
+ color: #f5222d;
+}
+.has-error.has-feedback .ant-form-item-children:after {
+ content: '\e62e';
+ color: #f5222d;
+ animation-name: diffZoomIn2 !important;
+}
+.has-error .ant-select-selection {
+ border-color: #f5222d;
+}
+.has-error .ant-select-open .ant-select-selection,
+.has-error .ant-select-focused .ant-select-selection {
+ border-color: #ff4d4f;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.has-error .ant-select.ant-select-auto-complete .ant-input:focus {
+ border-color: #f5222d;
+}
+.has-error .ant-input-group-addon .ant-select-selection {
+ border-color: transparent;
+ box-shadow: none;
+}
+.has-error .ant-calendar-picker-icon:after,
+.has-error .ant-time-picker-icon:after,
+.has-error .ant-picker-icon:after,
+.has-error .ant-select-arrow,
+.has-error .ant-cascader-picker-arrow {
+ color: #f5222d;
+}
+.has-error .ant-input-number,
+.has-error .ant-time-picker-input {
+ border-color: #f5222d;
+}
+.has-error .ant-input-number-focused,
+.has-error .ant-time-picker-input-focused,
+.has-error .ant-input-number:focus,
+.has-error .ant-time-picker-input:focus {
+ border-color: #ff4d4f;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.has-error .ant-input-number:not([disabled]):hover,
+.has-error .ant-time-picker-input:not([disabled]):hover {
+ border-color: #f5222d;
+}
+.has-error .ant-mention-wrapper .ant-mention-editor,
+.has-error .ant-mention-wrapper .ant-mention-editor:not([disabled]):hover {
+ border-color: #f5222d;
+}
+.has-error .ant-mention-wrapper.ant-mention-active:not([disabled]) .ant-mention-editor,
+.has-error .ant-mention-wrapper .ant-mention-editor:not([disabled]):focus {
+ border-color: #ff4d4f;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.has-error .ant-cascader-picker:focus .ant-cascader-input {
+ border-color: #ff4d4f;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.is-validating.has-feedback .ant-form-item-children:after {
+ display: inline-block;
+ animation: loadingCircle 1s infinite linear;
+ content: "\e64d";
+ color: #1890ff;
+}
+.ant-advanced-search-form .ant-form-item {
+ margin-bottom: 24px;
+}
+.show-help-enter,
+.show-help-appear {
+ animation-duration: 0.15s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.show-help-leave {
+ animation-duration: 0.15s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.show-help-enter.show-help-enter-active,
+.show-help-appear.show-help-appear-active {
+ animation-name: antShowHelpIn;
+ animation-play-state: running;
+}
+.show-help-leave.show-help-leave-active {
+ animation-name: antShowHelpOut;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.show-help-enter,
+.show-help-appear {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.show-help-leave {
+ animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+@keyframes antShowHelpIn {
+ 0% {
+ opacity: 0;
+ transform: translateY(-5px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+@keyframes antShowHelpOut {
+ to {
+ opacity: 0;
+ transform: translateY(-5px);
+ }
+}
+@keyframes diffZoomIn1 {
+ 0% {
+ transform: scale(0);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+@keyframes diffZoomIn2 {
+ 0% {
+ transform: scale(0);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+@keyframes diffZoomIn3 {
+ 0% {
+ transform: scale(0);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+.ant-row {
+ position: relative;
+ margin-left: 0;
+ margin-right: 0;
+ height: auto;
+ zoom: 1;
+ display: block;
+ box-sizing: border-box;
+}
+.ant-row:before,
+.ant-row:after {
+ content: " ";
+ display: table;
+}
+.ant-row:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-row:before,
+.ant-row:after {
+ content: " ";
+ display: table;
+}
+.ant-row:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-row-flex {
+ display: flex;
+ flex-flow: row wrap;
+}
+.ant-row-flex:before,
+.ant-row-flex:after {
+ display: flex;
+}
+.ant-row-flex-start {
+ justify-content: flex-start;
+}
+.ant-row-flex-center {
+ justify-content: center;
+}
+.ant-row-flex-end {
+ justify-content: flex-end;
+}
+.ant-row-flex-space-between {
+ justify-content: space-between;
+}
+.ant-row-flex-space-around {
+ justify-content: space-around;
+}
+.ant-row-flex-top {
+ align-items: flex-start;
+}
+.ant-row-flex-middle {
+ align-items: center;
+}
+.ant-row-flex-bottom {
+ align-items: flex-end;
+}
+.ant-col {
+ position: relative;
+ display: block;
+}
+.ant-col-1, .ant-col-xs-1, .ant-col-sm-1, .ant-col-md-1, .ant-col-lg-1, .ant-col-2, .ant-col-xs-2, .ant-col-sm-2, .ant-col-md-2, .ant-col-lg-2, .ant-col-3, .ant-col-xs-3, .ant-col-sm-3, .ant-col-md-3, .ant-col-lg-3, .ant-col-4, .ant-col-xs-4, .ant-col-sm-4, .ant-col-md-4, .ant-col-lg-4, .ant-col-5, .ant-col-xs-5, .ant-col-sm-5, .ant-col-md-5, .ant-col-lg-5, .ant-col-6, .ant-col-xs-6, .ant-col-sm-6, .ant-col-md-6, .ant-col-lg-6, .ant-col-7, .ant-col-xs-7, .ant-col-sm-7, .ant-col-md-7, .ant-col-lg-7, .ant-col-8, .ant-col-xs-8, .ant-col-sm-8, .ant-col-md-8, .ant-col-lg-8, .ant-col-9, .ant-col-xs-9, .ant-col-sm-9, .ant-col-md-9, .ant-col-lg-9, .ant-col-10, .ant-col-xs-10, .ant-col-sm-10, .ant-col-md-10, .ant-col-lg-10, .ant-col-11, .ant-col-xs-11, .ant-col-sm-11, .ant-col-md-11, .ant-col-lg-11, .ant-col-12, .ant-col-xs-12, .ant-col-sm-12, .ant-col-md-12, .ant-col-lg-12, .ant-col-13, .ant-col-xs-13, .ant-col-sm-13, .ant-col-md-13, .ant-col-lg-13, .ant-col-14, .ant-col-xs-14, .ant-col-sm-14, .ant-col-md-14, .ant-col-lg-14, .ant-col-15, .ant-col-xs-15, .ant-col-sm-15, .ant-col-md-15, .ant-col-lg-15, .ant-col-16, .ant-col-xs-16, .ant-col-sm-16, .ant-col-md-16, .ant-col-lg-16, .ant-col-17, .ant-col-xs-17, .ant-col-sm-17, .ant-col-md-17, .ant-col-lg-17, .ant-col-18, .ant-col-xs-18, .ant-col-sm-18, .ant-col-md-18, .ant-col-lg-18, .ant-col-19, .ant-col-xs-19, .ant-col-sm-19, .ant-col-md-19, .ant-col-lg-19, .ant-col-20, .ant-col-xs-20, .ant-col-sm-20, .ant-col-md-20, .ant-col-lg-20, .ant-col-21, .ant-col-xs-21, .ant-col-sm-21, .ant-col-md-21, .ant-col-lg-21, .ant-col-22, .ant-col-xs-22, .ant-col-sm-22, .ant-col-md-22, .ant-col-lg-22, .ant-col-23, .ant-col-xs-23, .ant-col-sm-23, .ant-col-md-23, .ant-col-lg-23, .ant-col-24, .ant-col-xs-24, .ant-col-sm-24, .ant-col-md-24, .ant-col-lg-24 {
+ position: relative;
+ min-height: 1px;
+ padding-left: 0;
+ padding-right: 0;
+}
+.ant-col-1, .ant-col-2, .ant-col-3, .ant-col-4, .ant-col-5, .ant-col-6, .ant-col-7, .ant-col-8, .ant-col-9, .ant-col-10, .ant-col-11, .ant-col-12, .ant-col-13, .ant-col-14, .ant-col-15, .ant-col-16, .ant-col-17, .ant-col-18, .ant-col-19, .ant-col-20, .ant-col-21, .ant-col-22, .ant-col-23, .ant-col-24 {
+ float: left;
+ flex: 0 0 auto;
+}
+.ant-col-24 {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+}
+.ant-col-push-24 {
+ left: 100%;
+}
+.ant-col-pull-24 {
+ right: 100%;
+}
+.ant-col-offset-24 {
+ margin-left: 100%;
+}
+.ant-col-order-24 {
+ order: 24;
+}
+.ant-col-23 {
+ display: block;
+ box-sizing: border-box;
+ width: 95.83333333%;
+}
+.ant-col-push-23 {
+ left: 95.83333333%;
+}
+.ant-col-pull-23 {
+ right: 95.83333333%;
+}
+.ant-col-offset-23 {
+ margin-left: 95.83333333%;
+}
+.ant-col-order-23 {
+ order: 23;
+}
+.ant-col-22 {
+ display: block;
+ box-sizing: border-box;
+ width: 91.66666667%;
+}
+.ant-col-push-22 {
+ left: 91.66666667%;
+}
+.ant-col-pull-22 {
+ right: 91.66666667%;
+}
+.ant-col-offset-22 {
+ margin-left: 91.66666667%;
+}
+.ant-col-order-22 {
+ order: 22;
+}
+.ant-col-21 {
+ display: block;
+ box-sizing: border-box;
+ width: 87.5%;
+}
+.ant-col-push-21 {
+ left: 87.5%;
+}
+.ant-col-pull-21 {
+ right: 87.5%;
+}
+.ant-col-offset-21 {
+ margin-left: 87.5%;
+}
+.ant-col-order-21 {
+ order: 21;
+}
+.ant-col-20 {
+ display: block;
+ box-sizing: border-box;
+ width: 83.33333333%;
+}
+.ant-col-push-20 {
+ left: 83.33333333%;
+}
+.ant-col-pull-20 {
+ right: 83.33333333%;
+}
+.ant-col-offset-20 {
+ margin-left: 83.33333333%;
+}
+.ant-col-order-20 {
+ order: 20;
+}
+.ant-col-19 {
+ display: block;
+ box-sizing: border-box;
+ width: 79.16666667%;
+}
+.ant-col-push-19 {
+ left: 79.16666667%;
+}
+.ant-col-pull-19 {
+ right: 79.16666667%;
+}
+.ant-col-offset-19 {
+ margin-left: 79.16666667%;
+}
+.ant-col-order-19 {
+ order: 19;
+}
+.ant-col-18 {
+ display: block;
+ box-sizing: border-box;
+ width: 75%;
+}
+.ant-col-push-18 {
+ left: 75%;
+}
+.ant-col-pull-18 {
+ right: 75%;
+}
+.ant-col-offset-18 {
+ margin-left: 75%;
+}
+.ant-col-order-18 {
+ order: 18;
+}
+.ant-col-17 {
+ display: block;
+ box-sizing: border-box;
+ width: 70.83333333%;
+}
+.ant-col-push-17 {
+ left: 70.83333333%;
+}
+.ant-col-pull-17 {
+ right: 70.83333333%;
+}
+.ant-col-offset-17 {
+ margin-left: 70.83333333%;
+}
+.ant-col-order-17 {
+ order: 17;
+}
+.ant-col-16 {
+ display: block;
+ box-sizing: border-box;
+ width: 66.66666667%;
+}
+.ant-col-push-16 {
+ left: 66.66666667%;
+}
+.ant-col-pull-16 {
+ right: 66.66666667%;
+}
+.ant-col-offset-16 {
+ margin-left: 66.66666667%;
+}
+.ant-col-order-16 {
+ order: 16;
+}
+.ant-col-15 {
+ display: block;
+ box-sizing: border-box;
+ width: 62.5%;
+}
+.ant-col-push-15 {
+ left: 62.5%;
+}
+.ant-col-pull-15 {
+ right: 62.5%;
+}
+.ant-col-offset-15 {
+ margin-left: 62.5%;
+}
+.ant-col-order-15 {
+ order: 15;
+}
+.ant-col-14 {
+ display: block;
+ box-sizing: border-box;
+ width: 58.33333333%;
+}
+.ant-col-push-14 {
+ left: 58.33333333%;
+}
+.ant-col-pull-14 {
+ right: 58.33333333%;
+}
+.ant-col-offset-14 {
+ margin-left: 58.33333333%;
+}
+.ant-col-order-14 {
+ order: 14;
+}
+.ant-col-13 {
+ display: block;
+ box-sizing: border-box;
+ width: 54.16666667%;
+}
+.ant-col-push-13 {
+ left: 54.16666667%;
+}
+.ant-col-pull-13 {
+ right: 54.16666667%;
+}
+.ant-col-offset-13 {
+ margin-left: 54.16666667%;
+}
+.ant-col-order-13 {
+ order: 13;
+}
+.ant-col-12 {
+ display: block;
+ box-sizing: border-box;
+ width: 50%;
+}
+.ant-col-push-12 {
+ left: 50%;
+}
+.ant-col-pull-12 {
+ right: 50%;
+}
+.ant-col-offset-12 {
+ margin-left: 50%;
+}
+.ant-col-order-12 {
+ order: 12;
+}
+.ant-col-11 {
+ display: block;
+ box-sizing: border-box;
+ width: 45.83333333%;
+}
+.ant-col-push-11 {
+ left: 45.83333333%;
+}
+.ant-col-pull-11 {
+ right: 45.83333333%;
+}
+.ant-col-offset-11 {
+ margin-left: 45.83333333%;
+}
+.ant-col-order-11 {
+ order: 11;
+}
+.ant-col-10 {
+ display: block;
+ box-sizing: border-box;
+ width: 41.66666667%;
+}
+.ant-col-push-10 {
+ left: 41.66666667%;
+}
+.ant-col-pull-10 {
+ right: 41.66666667%;
+}
+.ant-col-offset-10 {
+ margin-left: 41.66666667%;
+}
+.ant-col-order-10 {
+ order: 10;
+}
+.ant-col-9 {
+ display: block;
+ box-sizing: border-box;
+ width: 37.5%;
+}
+.ant-col-push-9 {
+ left: 37.5%;
+}
+.ant-col-pull-9 {
+ right: 37.5%;
+}
+.ant-col-offset-9 {
+ margin-left: 37.5%;
+}
+.ant-col-order-9 {
+ order: 9;
+}
+.ant-col-8 {
+ display: block;
+ box-sizing: border-box;
+ width: 33.33333333%;
+}
+.ant-col-push-8 {
+ left: 33.33333333%;
+}
+.ant-col-pull-8 {
+ right: 33.33333333%;
+}
+.ant-col-offset-8 {
+ margin-left: 33.33333333%;
+}
+.ant-col-order-8 {
+ order: 8;
+}
+.ant-col-7 {
+ display: block;
+ box-sizing: border-box;
+ width: 29.16666667%;
+}
+.ant-col-push-7 {
+ left: 29.16666667%;
+}
+.ant-col-pull-7 {
+ right: 29.16666667%;
+}
+.ant-col-offset-7 {
+ margin-left: 29.16666667%;
+}
+.ant-col-order-7 {
+ order: 7;
+}
+.ant-col-6 {
+ display: block;
+ box-sizing: border-box;
+ width: 25%;
+}
+.ant-col-push-6 {
+ left: 25%;
+}
+.ant-col-pull-6 {
+ right: 25%;
+}
+.ant-col-offset-6 {
+ margin-left: 25%;
+}
+.ant-col-order-6 {
+ order: 6;
+}
+.ant-col-5 {
+ display: block;
+ box-sizing: border-box;
+ width: 20.83333333%;
+}
+.ant-col-push-5 {
+ left: 20.83333333%;
+}
+.ant-col-pull-5 {
+ right: 20.83333333%;
+}
+.ant-col-offset-5 {
+ margin-left: 20.83333333%;
+}
+.ant-col-order-5 {
+ order: 5;
+}
+.ant-col-4 {
+ display: block;
+ box-sizing: border-box;
+ width: 16.66666667%;
+}
+.ant-col-push-4 {
+ left: 16.66666667%;
+}
+.ant-col-pull-4 {
+ right: 16.66666667%;
+}
+.ant-col-offset-4 {
+ margin-left: 16.66666667%;
+}
+.ant-col-order-4 {
+ order: 4;
+}
+.ant-col-3 {
+ display: block;
+ box-sizing: border-box;
+ width: 12.5%;
+}
+.ant-col-push-3 {
+ left: 12.5%;
+}
+.ant-col-pull-3 {
+ right: 12.5%;
+}
+.ant-col-offset-3 {
+ margin-left: 12.5%;
+}
+.ant-col-order-3 {
+ order: 3;
+}
+.ant-col-2 {
+ display: block;
+ box-sizing: border-box;
+ width: 8.33333333%;
+}
+.ant-col-push-2 {
+ left: 8.33333333%;
+}
+.ant-col-pull-2 {
+ right: 8.33333333%;
+}
+.ant-col-offset-2 {
+ margin-left: 8.33333333%;
+}
+.ant-col-order-2 {
+ order: 2;
+}
+.ant-col-1 {
+ display: block;
+ box-sizing: border-box;
+ width: 4.16666667%;
+}
+.ant-col-push-1 {
+ left: 4.16666667%;
+}
+.ant-col-pull-1 {
+ right: 4.16666667%;
+}
+.ant-col-offset-1 {
+ margin-left: 4.16666667%;
+}
+.ant-col-order-1 {
+ order: 1;
+}
+.ant-col-0 {
+ display: none;
+}
+.ant-col-push-0 {
+ left: auto;
+}
+.ant-col-pull-0 {
+ right: auto;
+}
+.ant-col-push-0 {
+ left: auto;
+}
+.ant-col-pull-0 {
+ right: auto;
+}
+.ant-col-offset-0 {
+ margin-left: 0;
+}
+.ant-col-order-0 {
+ order: 0;
+}
+.ant-col-xs-1, .ant-col-xs-2, .ant-col-xs-3, .ant-col-xs-4, .ant-col-xs-5, .ant-col-xs-6, .ant-col-xs-7, .ant-col-xs-8, .ant-col-xs-9, .ant-col-xs-10, .ant-col-xs-11, .ant-col-xs-12, .ant-col-xs-13, .ant-col-xs-14, .ant-col-xs-15, .ant-col-xs-16, .ant-col-xs-17, .ant-col-xs-18, .ant-col-xs-19, .ant-col-xs-20, .ant-col-xs-21, .ant-col-xs-22, .ant-col-xs-23, .ant-col-xs-24 {
+ float: left;
+ flex: 0 0 auto;
+}
+.ant-col-xs-24 {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+}
+.ant-col-xs-push-24 {
+ left: 100%;
+}
+.ant-col-xs-pull-24 {
+ right: 100%;
+}
+.ant-col-xs-offset-24 {
+ margin-left: 100%;
+}
+.ant-col-xs-order-24 {
+ order: 24;
+}
+.ant-col-xs-23 {
+ display: block;
+ box-sizing: border-box;
+ width: 95.83333333%;
+}
+.ant-col-xs-push-23 {
+ left: 95.83333333%;
+}
+.ant-col-xs-pull-23 {
+ right: 95.83333333%;
+}
+.ant-col-xs-offset-23 {
+ margin-left: 95.83333333%;
+}
+.ant-col-xs-order-23 {
+ order: 23;
+}
+.ant-col-xs-22 {
+ display: block;
+ box-sizing: border-box;
+ width: 91.66666667%;
+}
+.ant-col-xs-push-22 {
+ left: 91.66666667%;
+}
+.ant-col-xs-pull-22 {
+ right: 91.66666667%;
+}
+.ant-col-xs-offset-22 {
+ margin-left: 91.66666667%;
+}
+.ant-col-xs-order-22 {
+ order: 22;
+}
+.ant-col-xs-21 {
+ display: block;
+ box-sizing: border-box;
+ width: 87.5%;
+}
+.ant-col-xs-push-21 {
+ left: 87.5%;
+}
+.ant-col-xs-pull-21 {
+ right: 87.5%;
+}
+.ant-col-xs-offset-21 {
+ margin-left: 87.5%;
+}
+.ant-col-xs-order-21 {
+ order: 21;
+}
+.ant-col-xs-20 {
+ display: block;
+ box-sizing: border-box;
+ width: 83.33333333%;
+}
+.ant-col-xs-push-20 {
+ left: 83.33333333%;
+}
+.ant-col-xs-pull-20 {
+ right: 83.33333333%;
+}
+.ant-col-xs-offset-20 {
+ margin-left: 83.33333333%;
+}
+.ant-col-xs-order-20 {
+ order: 20;
+}
+.ant-col-xs-19 {
+ display: block;
+ box-sizing: border-box;
+ width: 79.16666667%;
+}
+.ant-col-xs-push-19 {
+ left: 79.16666667%;
+}
+.ant-col-xs-pull-19 {
+ right: 79.16666667%;
+}
+.ant-col-xs-offset-19 {
+ margin-left: 79.16666667%;
+}
+.ant-col-xs-order-19 {
+ order: 19;
+}
+.ant-col-xs-18 {
+ display: block;
+ box-sizing: border-box;
+ width: 75%;
+}
+.ant-col-xs-push-18 {
+ left: 75%;
+}
+.ant-col-xs-pull-18 {
+ right: 75%;
+}
+.ant-col-xs-offset-18 {
+ margin-left: 75%;
+}
+.ant-col-xs-order-18 {
+ order: 18;
+}
+.ant-col-xs-17 {
+ display: block;
+ box-sizing: border-box;
+ width: 70.83333333%;
+}
+.ant-col-xs-push-17 {
+ left: 70.83333333%;
+}
+.ant-col-xs-pull-17 {
+ right: 70.83333333%;
+}
+.ant-col-xs-offset-17 {
+ margin-left: 70.83333333%;
+}
+.ant-col-xs-order-17 {
+ order: 17;
+}
+.ant-col-xs-16 {
+ display: block;
+ box-sizing: border-box;
+ width: 66.66666667%;
+}
+.ant-col-xs-push-16 {
+ left: 66.66666667%;
+}
+.ant-col-xs-pull-16 {
+ right: 66.66666667%;
+}
+.ant-col-xs-offset-16 {
+ margin-left: 66.66666667%;
+}
+.ant-col-xs-order-16 {
+ order: 16;
+}
+.ant-col-xs-15 {
+ display: block;
+ box-sizing: border-box;
+ width: 62.5%;
+}
+.ant-col-xs-push-15 {
+ left: 62.5%;
+}
+.ant-col-xs-pull-15 {
+ right: 62.5%;
+}
+.ant-col-xs-offset-15 {
+ margin-left: 62.5%;
+}
+.ant-col-xs-order-15 {
+ order: 15;
+}
+.ant-col-xs-14 {
+ display: block;
+ box-sizing: border-box;
+ width: 58.33333333%;
+}
+.ant-col-xs-push-14 {
+ left: 58.33333333%;
+}
+.ant-col-xs-pull-14 {
+ right: 58.33333333%;
+}
+.ant-col-xs-offset-14 {
+ margin-left: 58.33333333%;
+}
+.ant-col-xs-order-14 {
+ order: 14;
+}
+.ant-col-xs-13 {
+ display: block;
+ box-sizing: border-box;
+ width: 54.16666667%;
+}
+.ant-col-xs-push-13 {
+ left: 54.16666667%;
+}
+.ant-col-xs-pull-13 {
+ right: 54.16666667%;
+}
+.ant-col-xs-offset-13 {
+ margin-left: 54.16666667%;
+}
+.ant-col-xs-order-13 {
+ order: 13;
+}
+.ant-col-xs-12 {
+ display: block;
+ box-sizing: border-box;
+ width: 50%;
+}
+.ant-col-xs-push-12 {
+ left: 50%;
+}
+.ant-col-xs-pull-12 {
+ right: 50%;
+}
+.ant-col-xs-offset-12 {
+ margin-left: 50%;
+}
+.ant-col-xs-order-12 {
+ order: 12;
+}
+.ant-col-xs-11 {
+ display: block;
+ box-sizing: border-box;
+ width: 45.83333333%;
+}
+.ant-col-xs-push-11 {
+ left: 45.83333333%;
+}
+.ant-col-xs-pull-11 {
+ right: 45.83333333%;
+}
+.ant-col-xs-offset-11 {
+ margin-left: 45.83333333%;
+}
+.ant-col-xs-order-11 {
+ order: 11;
+}
+.ant-col-xs-10 {
+ display: block;
+ box-sizing: border-box;
+ width: 41.66666667%;
+}
+.ant-col-xs-push-10 {
+ left: 41.66666667%;
+}
+.ant-col-xs-pull-10 {
+ right: 41.66666667%;
+}
+.ant-col-xs-offset-10 {
+ margin-left: 41.66666667%;
+}
+.ant-col-xs-order-10 {
+ order: 10;
+}
+.ant-col-xs-9 {
+ display: block;
+ box-sizing: border-box;
+ width: 37.5%;
+}
+.ant-col-xs-push-9 {
+ left: 37.5%;
+}
+.ant-col-xs-pull-9 {
+ right: 37.5%;
+}
+.ant-col-xs-offset-9 {
+ margin-left: 37.5%;
+}
+.ant-col-xs-order-9 {
+ order: 9;
+}
+.ant-col-xs-8 {
+ display: block;
+ box-sizing: border-box;
+ width: 33.33333333%;
+}
+.ant-col-xs-push-8 {
+ left: 33.33333333%;
+}
+.ant-col-xs-pull-8 {
+ right: 33.33333333%;
+}
+.ant-col-xs-offset-8 {
+ margin-left: 33.33333333%;
+}
+.ant-col-xs-order-8 {
+ order: 8;
+}
+.ant-col-xs-7 {
+ display: block;
+ box-sizing: border-box;
+ width: 29.16666667%;
+}
+.ant-col-xs-push-7 {
+ left: 29.16666667%;
+}
+.ant-col-xs-pull-7 {
+ right: 29.16666667%;
+}
+.ant-col-xs-offset-7 {
+ margin-left: 29.16666667%;
+}
+.ant-col-xs-order-7 {
+ order: 7;
+}
+.ant-col-xs-6 {
+ display: block;
+ box-sizing: border-box;
+ width: 25%;
+}
+.ant-col-xs-push-6 {
+ left: 25%;
+}
+.ant-col-xs-pull-6 {
+ right: 25%;
+}
+.ant-col-xs-offset-6 {
+ margin-left: 25%;
+}
+.ant-col-xs-order-6 {
+ order: 6;
+}
+.ant-col-xs-5 {
+ display: block;
+ box-sizing: border-box;
+ width: 20.83333333%;
+}
+.ant-col-xs-push-5 {
+ left: 20.83333333%;
+}
+.ant-col-xs-pull-5 {
+ right: 20.83333333%;
+}
+.ant-col-xs-offset-5 {
+ margin-left: 20.83333333%;
+}
+.ant-col-xs-order-5 {
+ order: 5;
+}
+.ant-col-xs-4 {
+ display: block;
+ box-sizing: border-box;
+ width: 16.66666667%;
+}
+.ant-col-xs-push-4 {
+ left: 16.66666667%;
+}
+.ant-col-xs-pull-4 {
+ right: 16.66666667%;
+}
+.ant-col-xs-offset-4 {
+ margin-left: 16.66666667%;
+}
+.ant-col-xs-order-4 {
+ order: 4;
+}
+.ant-col-xs-3 {
+ display: block;
+ box-sizing: border-box;
+ width: 12.5%;
+}
+.ant-col-xs-push-3 {
+ left: 12.5%;
+}
+.ant-col-xs-pull-3 {
+ right: 12.5%;
+}
+.ant-col-xs-offset-3 {
+ margin-left: 12.5%;
+}
+.ant-col-xs-order-3 {
+ order: 3;
+}
+.ant-col-xs-2 {
+ display: block;
+ box-sizing: border-box;
+ width: 8.33333333%;
+}
+.ant-col-xs-push-2 {
+ left: 8.33333333%;
+}
+.ant-col-xs-pull-2 {
+ right: 8.33333333%;
+}
+.ant-col-xs-offset-2 {
+ margin-left: 8.33333333%;
+}
+.ant-col-xs-order-2 {
+ order: 2;
+}
+.ant-col-xs-1 {
+ display: block;
+ box-sizing: border-box;
+ width: 4.16666667%;
+}
+.ant-col-xs-push-1 {
+ left: 4.16666667%;
+}
+.ant-col-xs-pull-1 {
+ right: 4.16666667%;
+}
+.ant-col-xs-offset-1 {
+ margin-left: 4.16666667%;
+}
+.ant-col-xs-order-1 {
+ order: 1;
+}
+.ant-col-xs-0 {
+ display: none;
+}
+.ant-col-push-0 {
+ left: auto;
+}
+.ant-col-pull-0 {
+ right: auto;
+}
+.ant-col-xs-push-0 {
+ left: auto;
+}
+.ant-col-xs-pull-0 {
+ right: auto;
+}
+.ant-col-xs-offset-0 {
+ margin-left: 0;
+}
+.ant-col-xs-order-0 {
+ order: 0;
+}
+@media (min-width: 576px) {
+ .ant-col-sm-1, .ant-col-sm-2, .ant-col-sm-3, .ant-col-sm-4, .ant-col-sm-5, .ant-col-sm-6, .ant-col-sm-7, .ant-col-sm-8, .ant-col-sm-9, .ant-col-sm-10, .ant-col-sm-11, .ant-col-sm-12, .ant-col-sm-13, .ant-col-sm-14, .ant-col-sm-15, .ant-col-sm-16, .ant-col-sm-17, .ant-col-sm-18, .ant-col-sm-19, .ant-col-sm-20, .ant-col-sm-21, .ant-col-sm-22, .ant-col-sm-23, .ant-col-sm-24 {
+ float: left;
+ flex: 0 0 auto;
+ }
+ .ant-col-sm-24 {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ }
+ .ant-col-sm-push-24 {
+ left: 100%;
+ }
+ .ant-col-sm-pull-24 {
+ right: 100%;
+ }
+ .ant-col-sm-offset-24 {
+ margin-left: 100%;
+ }
+ .ant-col-sm-order-24 {
+ order: 24;
+ }
+ .ant-col-sm-23 {
+ display: block;
+ box-sizing: border-box;
+ width: 95.83333333%;
+ }
+ .ant-col-sm-push-23 {
+ left: 95.83333333%;
+ }
+ .ant-col-sm-pull-23 {
+ right: 95.83333333%;
+ }
+ .ant-col-sm-offset-23 {
+ margin-left: 95.83333333%;
+ }
+ .ant-col-sm-order-23 {
+ order: 23;
+ }
+ .ant-col-sm-22 {
+ display: block;
+ box-sizing: border-box;
+ width: 91.66666667%;
+ }
+ .ant-col-sm-push-22 {
+ left: 91.66666667%;
+ }
+ .ant-col-sm-pull-22 {
+ right: 91.66666667%;
+ }
+ .ant-col-sm-offset-22 {
+ margin-left: 91.66666667%;
+ }
+ .ant-col-sm-order-22 {
+ order: 22;
+ }
+ .ant-col-sm-21 {
+ display: block;
+ box-sizing: border-box;
+ width: 87.5%;
+ }
+ .ant-col-sm-push-21 {
+ left: 87.5%;
+ }
+ .ant-col-sm-pull-21 {
+ right: 87.5%;
+ }
+ .ant-col-sm-offset-21 {
+ margin-left: 87.5%;
+ }
+ .ant-col-sm-order-21 {
+ order: 21;
+ }
+ .ant-col-sm-20 {
+ display: block;
+ box-sizing: border-box;
+ width: 83.33333333%;
+ }
+ .ant-col-sm-push-20 {
+ left: 83.33333333%;
+ }
+ .ant-col-sm-pull-20 {
+ right: 83.33333333%;
+ }
+ .ant-col-sm-offset-20 {
+ margin-left: 83.33333333%;
+ }
+ .ant-col-sm-order-20 {
+ order: 20;
+ }
+ .ant-col-sm-19 {
+ display: block;
+ box-sizing: border-box;
+ width: 79.16666667%;
+ }
+ .ant-col-sm-push-19 {
+ left: 79.16666667%;
+ }
+ .ant-col-sm-pull-19 {
+ right: 79.16666667%;
+ }
+ .ant-col-sm-offset-19 {
+ margin-left: 79.16666667%;
+ }
+ .ant-col-sm-order-19 {
+ order: 19;
+ }
+ .ant-col-sm-18 {
+ display: block;
+ box-sizing: border-box;
+ width: 75%;
+ }
+ .ant-col-sm-push-18 {
+ left: 75%;
+ }
+ .ant-col-sm-pull-18 {
+ right: 75%;
+ }
+ .ant-col-sm-offset-18 {
+ margin-left: 75%;
+ }
+ .ant-col-sm-order-18 {
+ order: 18;
+ }
+ .ant-col-sm-17 {
+ display: block;
+ box-sizing: border-box;
+ width: 70.83333333%;
+ }
+ .ant-col-sm-push-17 {
+ left: 70.83333333%;
+ }
+ .ant-col-sm-pull-17 {
+ right: 70.83333333%;
+ }
+ .ant-col-sm-offset-17 {
+ margin-left: 70.83333333%;
+ }
+ .ant-col-sm-order-17 {
+ order: 17;
+ }
+ .ant-col-sm-16 {
+ display: block;
+ box-sizing: border-box;
+ width: 66.66666667%;
+ }
+ .ant-col-sm-push-16 {
+ left: 66.66666667%;
+ }
+ .ant-col-sm-pull-16 {
+ right: 66.66666667%;
+ }
+ .ant-col-sm-offset-16 {
+ margin-left: 66.66666667%;
+ }
+ .ant-col-sm-order-16 {
+ order: 16;
+ }
+ .ant-col-sm-15 {
+ display: block;
+ box-sizing: border-box;
+ width: 62.5%;
+ }
+ .ant-col-sm-push-15 {
+ left: 62.5%;
+ }
+ .ant-col-sm-pull-15 {
+ right: 62.5%;
+ }
+ .ant-col-sm-offset-15 {
+ margin-left: 62.5%;
+ }
+ .ant-col-sm-order-15 {
+ order: 15;
+ }
+ .ant-col-sm-14 {
+ display: block;
+ box-sizing: border-box;
+ width: 58.33333333%;
+ }
+ .ant-col-sm-push-14 {
+ left: 58.33333333%;
+ }
+ .ant-col-sm-pull-14 {
+ right: 58.33333333%;
+ }
+ .ant-col-sm-offset-14 {
+ margin-left: 58.33333333%;
+ }
+ .ant-col-sm-order-14 {
+ order: 14;
+ }
+ .ant-col-sm-13 {
+ display: block;
+ box-sizing: border-box;
+ width: 54.16666667%;
+ }
+ .ant-col-sm-push-13 {
+ left: 54.16666667%;
+ }
+ .ant-col-sm-pull-13 {
+ right: 54.16666667%;
+ }
+ .ant-col-sm-offset-13 {
+ margin-left: 54.16666667%;
+ }
+ .ant-col-sm-order-13 {
+ order: 13;
+ }
+ .ant-col-sm-12 {
+ display: block;
+ box-sizing: border-box;
+ width: 50%;
+ }
+ .ant-col-sm-push-12 {
+ left: 50%;
+ }
+ .ant-col-sm-pull-12 {
+ right: 50%;
+ }
+ .ant-col-sm-offset-12 {
+ margin-left: 50%;
+ }
+ .ant-col-sm-order-12 {
+ order: 12;
+ }
+ .ant-col-sm-11 {
+ display: block;
+ box-sizing: border-box;
+ width: 45.83333333%;
+ }
+ .ant-col-sm-push-11 {
+ left: 45.83333333%;
+ }
+ .ant-col-sm-pull-11 {
+ right: 45.83333333%;
+ }
+ .ant-col-sm-offset-11 {
+ margin-left: 45.83333333%;
+ }
+ .ant-col-sm-order-11 {
+ order: 11;
+ }
+ .ant-col-sm-10 {
+ display: block;
+ box-sizing: border-box;
+ width: 41.66666667%;
+ }
+ .ant-col-sm-push-10 {
+ left: 41.66666667%;
+ }
+ .ant-col-sm-pull-10 {
+ right: 41.66666667%;
+ }
+ .ant-col-sm-offset-10 {
+ margin-left: 41.66666667%;
+ }
+ .ant-col-sm-order-10 {
+ order: 10;
+ }
+ .ant-col-sm-9 {
+ display: block;
+ box-sizing: border-box;
+ width: 37.5%;
+ }
+ .ant-col-sm-push-9 {
+ left: 37.5%;
+ }
+ .ant-col-sm-pull-9 {
+ right: 37.5%;
+ }
+ .ant-col-sm-offset-9 {
+ margin-left: 37.5%;
+ }
+ .ant-col-sm-order-9 {
+ order: 9;
+ }
+ .ant-col-sm-8 {
+ display: block;
+ box-sizing: border-box;
+ width: 33.33333333%;
+ }
+ .ant-col-sm-push-8 {
+ left: 33.33333333%;
+ }
+ .ant-col-sm-pull-8 {
+ right: 33.33333333%;
+ }
+ .ant-col-sm-offset-8 {
+ margin-left: 33.33333333%;
+ }
+ .ant-col-sm-order-8 {
+ order: 8;
+ }
+ .ant-col-sm-7 {
+ display: block;
+ box-sizing: border-box;
+ width: 29.16666667%;
+ }
+ .ant-col-sm-push-7 {
+ left: 29.16666667%;
+ }
+ .ant-col-sm-pull-7 {
+ right: 29.16666667%;
+ }
+ .ant-col-sm-offset-7 {
+ margin-left: 29.16666667%;
+ }
+ .ant-col-sm-order-7 {
+ order: 7;
+ }
+ .ant-col-sm-6 {
+ display: block;
+ box-sizing: border-box;
+ width: 25%;
+ }
+ .ant-col-sm-push-6 {
+ left: 25%;
+ }
+ .ant-col-sm-pull-6 {
+ right: 25%;
+ }
+ .ant-col-sm-offset-6 {
+ margin-left: 25%;
+ }
+ .ant-col-sm-order-6 {
+ order: 6;
+ }
+ .ant-col-sm-5 {
+ display: block;
+ box-sizing: border-box;
+ width: 20.83333333%;
+ }
+ .ant-col-sm-push-5 {
+ left: 20.83333333%;
+ }
+ .ant-col-sm-pull-5 {
+ right: 20.83333333%;
+ }
+ .ant-col-sm-offset-5 {
+ margin-left: 20.83333333%;
+ }
+ .ant-col-sm-order-5 {
+ order: 5;
+ }
+ .ant-col-sm-4 {
+ display: block;
+ box-sizing: border-box;
+ width: 16.66666667%;
+ }
+ .ant-col-sm-push-4 {
+ left: 16.66666667%;
+ }
+ .ant-col-sm-pull-4 {
+ right: 16.66666667%;
+ }
+ .ant-col-sm-offset-4 {
+ margin-left: 16.66666667%;
+ }
+ .ant-col-sm-order-4 {
+ order: 4;
+ }
+ .ant-col-sm-3 {
+ display: block;
+ box-sizing: border-box;
+ width: 12.5%;
+ }
+ .ant-col-sm-push-3 {
+ left: 12.5%;
+ }
+ .ant-col-sm-pull-3 {
+ right: 12.5%;
+ }
+ .ant-col-sm-offset-3 {
+ margin-left: 12.5%;
+ }
+ .ant-col-sm-order-3 {
+ order: 3;
+ }
+ .ant-col-sm-2 {
+ display: block;
+ box-sizing: border-box;
+ width: 8.33333333%;
+ }
+ .ant-col-sm-push-2 {
+ left: 8.33333333%;
+ }
+ .ant-col-sm-pull-2 {
+ right: 8.33333333%;
+ }
+ .ant-col-sm-offset-2 {
+ margin-left: 8.33333333%;
+ }
+ .ant-col-sm-order-2 {
+ order: 2;
+ }
+ .ant-col-sm-1 {
+ display: block;
+ box-sizing: border-box;
+ width: 4.16666667%;
+ }
+ .ant-col-sm-push-1 {
+ left: 4.16666667%;
+ }
+ .ant-col-sm-pull-1 {
+ right: 4.16666667%;
+ }
+ .ant-col-sm-offset-1 {
+ margin-left: 4.16666667%;
+ }
+ .ant-col-sm-order-1 {
+ order: 1;
+ }
+ .ant-col-sm-0 {
+ display: none;
+ }
+ .ant-col-push-0 {
+ left: auto;
+ }
+ .ant-col-pull-0 {
+ right: auto;
+ }
+ .ant-col-sm-push-0 {
+ left: auto;
+ }
+ .ant-col-sm-pull-0 {
+ right: auto;
+ }
+ .ant-col-sm-offset-0 {
+ margin-left: 0;
+ }
+ .ant-col-sm-order-0 {
+ order: 0;
+ }
+}
+@media (min-width: 768px) {
+ .ant-col-md-1, .ant-col-md-2, .ant-col-md-3, .ant-col-md-4, .ant-col-md-5, .ant-col-md-6, .ant-col-md-7, .ant-col-md-8, .ant-col-md-9, .ant-col-md-10, .ant-col-md-11, .ant-col-md-12, .ant-col-md-13, .ant-col-md-14, .ant-col-md-15, .ant-col-md-16, .ant-col-md-17, .ant-col-md-18, .ant-col-md-19, .ant-col-md-20, .ant-col-md-21, .ant-col-md-22, .ant-col-md-23, .ant-col-md-24 {
+ float: left;
+ flex: 0 0 auto;
+ }
+ .ant-col-md-24 {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ }
+ .ant-col-md-push-24 {
+ left: 100%;
+ }
+ .ant-col-md-pull-24 {
+ right: 100%;
+ }
+ .ant-col-md-offset-24 {
+ margin-left: 100%;
+ }
+ .ant-col-md-order-24 {
+ order: 24;
+ }
+ .ant-col-md-23 {
+ display: block;
+ box-sizing: border-box;
+ width: 95.83333333%;
+ }
+ .ant-col-md-push-23 {
+ left: 95.83333333%;
+ }
+ .ant-col-md-pull-23 {
+ right: 95.83333333%;
+ }
+ .ant-col-md-offset-23 {
+ margin-left: 95.83333333%;
+ }
+ .ant-col-md-order-23 {
+ order: 23;
+ }
+ .ant-col-md-22 {
+ display: block;
+ box-sizing: border-box;
+ width: 91.66666667%;
+ }
+ .ant-col-md-push-22 {
+ left: 91.66666667%;
+ }
+ .ant-col-md-pull-22 {
+ right: 91.66666667%;
+ }
+ .ant-col-md-offset-22 {
+ margin-left: 91.66666667%;
+ }
+ .ant-col-md-order-22 {
+ order: 22;
+ }
+ .ant-col-md-21 {
+ display: block;
+ box-sizing: border-box;
+ width: 87.5%;
+ }
+ .ant-col-md-push-21 {
+ left: 87.5%;
+ }
+ .ant-col-md-pull-21 {
+ right: 87.5%;
+ }
+ .ant-col-md-offset-21 {
+ margin-left: 87.5%;
+ }
+ .ant-col-md-order-21 {
+ order: 21;
+ }
+ .ant-col-md-20 {
+ display: block;
+ box-sizing: border-box;
+ width: 83.33333333%;
+ }
+ .ant-col-md-push-20 {
+ left: 83.33333333%;
+ }
+ .ant-col-md-pull-20 {
+ right: 83.33333333%;
+ }
+ .ant-col-md-offset-20 {
+ margin-left: 83.33333333%;
+ }
+ .ant-col-md-order-20 {
+ order: 20;
+ }
+ .ant-col-md-19 {
+ display: block;
+ box-sizing: border-box;
+ width: 79.16666667%;
+ }
+ .ant-col-md-push-19 {
+ left: 79.16666667%;
+ }
+ .ant-col-md-pull-19 {
+ right: 79.16666667%;
+ }
+ .ant-col-md-offset-19 {
+ margin-left: 79.16666667%;
+ }
+ .ant-col-md-order-19 {
+ order: 19;
+ }
+ .ant-col-md-18 {
+ display: block;
+ box-sizing: border-box;
+ width: 75%;
+ }
+ .ant-col-md-push-18 {
+ left: 75%;
+ }
+ .ant-col-md-pull-18 {
+ right: 75%;
+ }
+ .ant-col-md-offset-18 {
+ margin-left: 75%;
+ }
+ .ant-col-md-order-18 {
+ order: 18;
+ }
+ .ant-col-md-17 {
+ display: block;
+ box-sizing: border-box;
+ width: 70.83333333%;
+ }
+ .ant-col-md-push-17 {
+ left: 70.83333333%;
+ }
+ .ant-col-md-pull-17 {
+ right: 70.83333333%;
+ }
+ .ant-col-md-offset-17 {
+ margin-left: 70.83333333%;
+ }
+ .ant-col-md-order-17 {
+ order: 17;
+ }
+ .ant-col-md-16 {
+ display: block;
+ box-sizing: border-box;
+ width: 66.66666667%;
+ }
+ .ant-col-md-push-16 {
+ left: 66.66666667%;
+ }
+ .ant-col-md-pull-16 {
+ right: 66.66666667%;
+ }
+ .ant-col-md-offset-16 {
+ margin-left: 66.66666667%;
+ }
+ .ant-col-md-order-16 {
+ order: 16;
+ }
+ .ant-col-md-15 {
+ display: block;
+ box-sizing: border-box;
+ width: 62.5%;
+ }
+ .ant-col-md-push-15 {
+ left: 62.5%;
+ }
+ .ant-col-md-pull-15 {
+ right: 62.5%;
+ }
+ .ant-col-md-offset-15 {
+ margin-left: 62.5%;
+ }
+ .ant-col-md-order-15 {
+ order: 15;
+ }
+ .ant-col-md-14 {
+ display: block;
+ box-sizing: border-box;
+ width: 58.33333333%;
+ }
+ .ant-col-md-push-14 {
+ left: 58.33333333%;
+ }
+ .ant-col-md-pull-14 {
+ right: 58.33333333%;
+ }
+ .ant-col-md-offset-14 {
+ margin-left: 58.33333333%;
+ }
+ .ant-col-md-order-14 {
+ order: 14;
+ }
+ .ant-col-md-13 {
+ display: block;
+ box-sizing: border-box;
+ width: 54.16666667%;
+ }
+ .ant-col-md-push-13 {
+ left: 54.16666667%;
+ }
+ .ant-col-md-pull-13 {
+ right: 54.16666667%;
+ }
+ .ant-col-md-offset-13 {
+ margin-left: 54.16666667%;
+ }
+ .ant-col-md-order-13 {
+ order: 13;
+ }
+ .ant-col-md-12 {
+ display: block;
+ box-sizing: border-box;
+ width: 50%;
+ }
+ .ant-col-md-push-12 {
+ left: 50%;
+ }
+ .ant-col-md-pull-12 {
+ right: 50%;
+ }
+ .ant-col-md-offset-12 {
+ margin-left: 50%;
+ }
+ .ant-col-md-order-12 {
+ order: 12;
+ }
+ .ant-col-md-11 {
+ display: block;
+ box-sizing: border-box;
+ width: 45.83333333%;
+ }
+ .ant-col-md-push-11 {
+ left: 45.83333333%;
+ }
+ .ant-col-md-pull-11 {
+ right: 45.83333333%;
+ }
+ .ant-col-md-offset-11 {
+ margin-left: 45.83333333%;
+ }
+ .ant-col-md-order-11 {
+ order: 11;
+ }
+ .ant-col-md-10 {
+ display: block;
+ box-sizing: border-box;
+ width: 41.66666667%;
+ }
+ .ant-col-md-push-10 {
+ left: 41.66666667%;
+ }
+ .ant-col-md-pull-10 {
+ right: 41.66666667%;
+ }
+ .ant-col-md-offset-10 {
+ margin-left: 41.66666667%;
+ }
+ .ant-col-md-order-10 {
+ order: 10;
+ }
+ .ant-col-md-9 {
+ display: block;
+ box-sizing: border-box;
+ width: 37.5%;
+ }
+ .ant-col-md-push-9 {
+ left: 37.5%;
+ }
+ .ant-col-md-pull-9 {
+ right: 37.5%;
+ }
+ .ant-col-md-offset-9 {
+ margin-left: 37.5%;
+ }
+ .ant-col-md-order-9 {
+ order: 9;
+ }
+ .ant-col-md-8 {
+ display: block;
+ box-sizing: border-box;
+ width: 33.33333333%;
+ }
+ .ant-col-md-push-8 {
+ left: 33.33333333%;
+ }
+ .ant-col-md-pull-8 {
+ right: 33.33333333%;
+ }
+ .ant-col-md-offset-8 {
+ margin-left: 33.33333333%;
+ }
+ .ant-col-md-order-8 {
+ order: 8;
+ }
+ .ant-col-md-7 {
+ display: block;
+ box-sizing: border-box;
+ width: 29.16666667%;
+ }
+ .ant-col-md-push-7 {
+ left: 29.16666667%;
+ }
+ .ant-col-md-pull-7 {
+ right: 29.16666667%;
+ }
+ .ant-col-md-offset-7 {
+ margin-left: 29.16666667%;
+ }
+ .ant-col-md-order-7 {
+ order: 7;
+ }
+ .ant-col-md-6 {
+ display: block;
+ box-sizing: border-box;
+ width: 25%;
+ }
+ .ant-col-md-push-6 {
+ left: 25%;
+ }
+ .ant-col-md-pull-6 {
+ right: 25%;
+ }
+ .ant-col-md-offset-6 {
+ margin-left: 25%;
+ }
+ .ant-col-md-order-6 {
+ order: 6;
+ }
+ .ant-col-md-5 {
+ display: block;
+ box-sizing: border-box;
+ width: 20.83333333%;
+ }
+ .ant-col-md-push-5 {
+ left: 20.83333333%;
+ }
+ .ant-col-md-pull-5 {
+ right: 20.83333333%;
+ }
+ .ant-col-md-offset-5 {
+ margin-left: 20.83333333%;
+ }
+ .ant-col-md-order-5 {
+ order: 5;
+ }
+ .ant-col-md-4 {
+ display: block;
+ box-sizing: border-box;
+ width: 16.66666667%;
+ }
+ .ant-col-md-push-4 {
+ left: 16.66666667%;
+ }
+ .ant-col-md-pull-4 {
+ right: 16.66666667%;
+ }
+ .ant-col-md-offset-4 {
+ margin-left: 16.66666667%;
+ }
+ .ant-col-md-order-4 {
+ order: 4;
+ }
+ .ant-col-md-3 {
+ display: block;
+ box-sizing: border-box;
+ width: 12.5%;
+ }
+ .ant-col-md-push-3 {
+ left: 12.5%;
+ }
+ .ant-col-md-pull-3 {
+ right: 12.5%;
+ }
+ .ant-col-md-offset-3 {
+ margin-left: 12.5%;
+ }
+ .ant-col-md-order-3 {
+ order: 3;
+ }
+ .ant-col-md-2 {
+ display: block;
+ box-sizing: border-box;
+ width: 8.33333333%;
+ }
+ .ant-col-md-push-2 {
+ left: 8.33333333%;
+ }
+ .ant-col-md-pull-2 {
+ right: 8.33333333%;
+ }
+ .ant-col-md-offset-2 {
+ margin-left: 8.33333333%;
+ }
+ .ant-col-md-order-2 {
+ order: 2;
+ }
+ .ant-col-md-1 {
+ display: block;
+ box-sizing: border-box;
+ width: 4.16666667%;
+ }
+ .ant-col-md-push-1 {
+ left: 4.16666667%;
+ }
+ .ant-col-md-pull-1 {
+ right: 4.16666667%;
+ }
+ .ant-col-md-offset-1 {
+ margin-left: 4.16666667%;
+ }
+ .ant-col-md-order-1 {
+ order: 1;
+ }
+ .ant-col-md-0 {
+ display: none;
+ }
+ .ant-col-push-0 {
+ left: auto;
+ }
+ .ant-col-pull-0 {
+ right: auto;
+ }
+ .ant-col-md-push-0 {
+ left: auto;
+ }
+ .ant-col-md-pull-0 {
+ right: auto;
+ }
+ .ant-col-md-offset-0 {
+ margin-left: 0;
+ }
+ .ant-col-md-order-0 {
+ order: 0;
+ }
+}
+@media (min-width: 992px) {
+ .ant-col-lg-1, .ant-col-lg-2, .ant-col-lg-3, .ant-col-lg-4, .ant-col-lg-5, .ant-col-lg-6, .ant-col-lg-7, .ant-col-lg-8, .ant-col-lg-9, .ant-col-lg-10, .ant-col-lg-11, .ant-col-lg-12, .ant-col-lg-13, .ant-col-lg-14, .ant-col-lg-15, .ant-col-lg-16, .ant-col-lg-17, .ant-col-lg-18, .ant-col-lg-19, .ant-col-lg-20, .ant-col-lg-21, .ant-col-lg-22, .ant-col-lg-23, .ant-col-lg-24 {
+ float: left;
+ flex: 0 0 auto;
+ }
+ .ant-col-lg-24 {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ }
+ .ant-col-lg-push-24 {
+ left: 100%;
+ }
+ .ant-col-lg-pull-24 {
+ right: 100%;
+ }
+ .ant-col-lg-offset-24 {
+ margin-left: 100%;
+ }
+ .ant-col-lg-order-24 {
+ order: 24;
+ }
+ .ant-col-lg-23 {
+ display: block;
+ box-sizing: border-box;
+ width: 95.83333333%;
+ }
+ .ant-col-lg-push-23 {
+ left: 95.83333333%;
+ }
+ .ant-col-lg-pull-23 {
+ right: 95.83333333%;
+ }
+ .ant-col-lg-offset-23 {
+ margin-left: 95.83333333%;
+ }
+ .ant-col-lg-order-23 {
+ order: 23;
+ }
+ .ant-col-lg-22 {
+ display: block;
+ box-sizing: border-box;
+ width: 91.66666667%;
+ }
+ .ant-col-lg-push-22 {
+ left: 91.66666667%;
+ }
+ .ant-col-lg-pull-22 {
+ right: 91.66666667%;
+ }
+ .ant-col-lg-offset-22 {
+ margin-left: 91.66666667%;
+ }
+ .ant-col-lg-order-22 {
+ order: 22;
+ }
+ .ant-col-lg-21 {
+ display: block;
+ box-sizing: border-box;
+ width: 87.5%;
+ }
+ .ant-col-lg-push-21 {
+ left: 87.5%;
+ }
+ .ant-col-lg-pull-21 {
+ right: 87.5%;
+ }
+ .ant-col-lg-offset-21 {
+ margin-left: 87.5%;
+ }
+ .ant-col-lg-order-21 {
+ order: 21;
+ }
+ .ant-col-lg-20 {
+ display: block;
+ box-sizing: border-box;
+ width: 83.33333333%;
+ }
+ .ant-col-lg-push-20 {
+ left: 83.33333333%;
+ }
+ .ant-col-lg-pull-20 {
+ right: 83.33333333%;
+ }
+ .ant-col-lg-offset-20 {
+ margin-left: 83.33333333%;
+ }
+ .ant-col-lg-order-20 {
+ order: 20;
+ }
+ .ant-col-lg-19 {
+ display: block;
+ box-sizing: border-box;
+ width: 79.16666667%;
+ }
+ .ant-col-lg-push-19 {
+ left: 79.16666667%;
+ }
+ .ant-col-lg-pull-19 {
+ right: 79.16666667%;
+ }
+ .ant-col-lg-offset-19 {
+ margin-left: 79.16666667%;
+ }
+ .ant-col-lg-order-19 {
+ order: 19;
+ }
+ .ant-col-lg-18 {
+ display: block;
+ box-sizing: border-box;
+ width: 75%;
+ }
+ .ant-col-lg-push-18 {
+ left: 75%;
+ }
+ .ant-col-lg-pull-18 {
+ right: 75%;
+ }
+ .ant-col-lg-offset-18 {
+ margin-left: 75%;
+ }
+ .ant-col-lg-order-18 {
+ order: 18;
+ }
+ .ant-col-lg-17 {
+ display: block;
+ box-sizing: border-box;
+ width: 70.83333333%;
+ }
+ .ant-col-lg-push-17 {
+ left: 70.83333333%;
+ }
+ .ant-col-lg-pull-17 {
+ right: 70.83333333%;
+ }
+ .ant-col-lg-offset-17 {
+ margin-left: 70.83333333%;
+ }
+ .ant-col-lg-order-17 {
+ order: 17;
+ }
+ .ant-col-lg-16 {
+ display: block;
+ box-sizing: border-box;
+ width: 66.66666667%;
+ }
+ .ant-col-lg-push-16 {
+ left: 66.66666667%;
+ }
+ .ant-col-lg-pull-16 {
+ right: 66.66666667%;
+ }
+ .ant-col-lg-offset-16 {
+ margin-left: 66.66666667%;
+ }
+ .ant-col-lg-order-16 {
+ order: 16;
+ }
+ .ant-col-lg-15 {
+ display: block;
+ box-sizing: border-box;
+ width: 62.5%;
+ }
+ .ant-col-lg-push-15 {
+ left: 62.5%;
+ }
+ .ant-col-lg-pull-15 {
+ right: 62.5%;
+ }
+ .ant-col-lg-offset-15 {
+ margin-left: 62.5%;
+ }
+ .ant-col-lg-order-15 {
+ order: 15;
+ }
+ .ant-col-lg-14 {
+ display: block;
+ box-sizing: border-box;
+ width: 58.33333333%;
+ }
+ .ant-col-lg-push-14 {
+ left: 58.33333333%;
+ }
+ .ant-col-lg-pull-14 {
+ right: 58.33333333%;
+ }
+ .ant-col-lg-offset-14 {
+ margin-left: 58.33333333%;
+ }
+ .ant-col-lg-order-14 {
+ order: 14;
+ }
+ .ant-col-lg-13 {
+ display: block;
+ box-sizing: border-box;
+ width: 54.16666667%;
+ }
+ .ant-col-lg-push-13 {
+ left: 54.16666667%;
+ }
+ .ant-col-lg-pull-13 {
+ right: 54.16666667%;
+ }
+ .ant-col-lg-offset-13 {
+ margin-left: 54.16666667%;
+ }
+ .ant-col-lg-order-13 {
+ order: 13;
+ }
+ .ant-col-lg-12 {
+ display: block;
+ box-sizing: border-box;
+ width: 50%;
+ }
+ .ant-col-lg-push-12 {
+ left: 50%;
+ }
+ .ant-col-lg-pull-12 {
+ right: 50%;
+ }
+ .ant-col-lg-offset-12 {
+ margin-left: 50%;
+ }
+ .ant-col-lg-order-12 {
+ order: 12;
+ }
+ .ant-col-lg-11 {
+ display: block;
+ box-sizing: border-box;
+ width: 45.83333333%;
+ }
+ .ant-col-lg-push-11 {
+ left: 45.83333333%;
+ }
+ .ant-col-lg-pull-11 {
+ right: 45.83333333%;
+ }
+ .ant-col-lg-offset-11 {
+ margin-left: 45.83333333%;
+ }
+ .ant-col-lg-order-11 {
+ order: 11;
+ }
+ .ant-col-lg-10 {
+ display: block;
+ box-sizing: border-box;
+ width: 41.66666667%;
+ }
+ .ant-col-lg-push-10 {
+ left: 41.66666667%;
+ }
+ .ant-col-lg-pull-10 {
+ right: 41.66666667%;
+ }
+ .ant-col-lg-offset-10 {
+ margin-left: 41.66666667%;
+ }
+ .ant-col-lg-order-10 {
+ order: 10;
+ }
+ .ant-col-lg-9 {
+ display: block;
+ box-sizing: border-box;
+ width: 37.5%;
+ }
+ .ant-col-lg-push-9 {
+ left: 37.5%;
+ }
+ .ant-col-lg-pull-9 {
+ right: 37.5%;
+ }
+ .ant-col-lg-offset-9 {
+ margin-left: 37.5%;
+ }
+ .ant-col-lg-order-9 {
+ order: 9;
+ }
+ .ant-col-lg-8 {
+ display: block;
+ box-sizing: border-box;
+ width: 33.33333333%;
+ }
+ .ant-col-lg-push-8 {
+ left: 33.33333333%;
+ }
+ .ant-col-lg-pull-8 {
+ right: 33.33333333%;
+ }
+ .ant-col-lg-offset-8 {
+ margin-left: 33.33333333%;
+ }
+ .ant-col-lg-order-8 {
+ order: 8;
+ }
+ .ant-col-lg-7 {
+ display: block;
+ box-sizing: border-box;
+ width: 29.16666667%;
+ }
+ .ant-col-lg-push-7 {
+ left: 29.16666667%;
+ }
+ .ant-col-lg-pull-7 {
+ right: 29.16666667%;
+ }
+ .ant-col-lg-offset-7 {
+ margin-left: 29.16666667%;
+ }
+ .ant-col-lg-order-7 {
+ order: 7;
+ }
+ .ant-col-lg-6 {
+ display: block;
+ box-sizing: border-box;
+ width: 25%;
+ }
+ .ant-col-lg-push-6 {
+ left: 25%;
+ }
+ .ant-col-lg-pull-6 {
+ right: 25%;
+ }
+ .ant-col-lg-offset-6 {
+ margin-left: 25%;
+ }
+ .ant-col-lg-order-6 {
+ order: 6;
+ }
+ .ant-col-lg-5 {
+ display: block;
+ box-sizing: border-box;
+ width: 20.83333333%;
+ }
+ .ant-col-lg-push-5 {
+ left: 20.83333333%;
+ }
+ .ant-col-lg-pull-5 {
+ right: 20.83333333%;
+ }
+ .ant-col-lg-offset-5 {
+ margin-left: 20.83333333%;
+ }
+ .ant-col-lg-order-5 {
+ order: 5;
+ }
+ .ant-col-lg-4 {
+ display: block;
+ box-sizing: border-box;
+ width: 16.66666667%;
+ }
+ .ant-col-lg-push-4 {
+ left: 16.66666667%;
+ }
+ .ant-col-lg-pull-4 {
+ right: 16.66666667%;
+ }
+ .ant-col-lg-offset-4 {
+ margin-left: 16.66666667%;
+ }
+ .ant-col-lg-order-4 {
+ order: 4;
+ }
+ .ant-col-lg-3 {
+ display: block;
+ box-sizing: border-box;
+ width: 12.5%;
+ }
+ .ant-col-lg-push-3 {
+ left: 12.5%;
+ }
+ .ant-col-lg-pull-3 {
+ right: 12.5%;
+ }
+ .ant-col-lg-offset-3 {
+ margin-left: 12.5%;
+ }
+ .ant-col-lg-order-3 {
+ order: 3;
+ }
+ .ant-col-lg-2 {
+ display: block;
+ box-sizing: border-box;
+ width: 8.33333333%;
+ }
+ .ant-col-lg-push-2 {
+ left: 8.33333333%;
+ }
+ .ant-col-lg-pull-2 {
+ right: 8.33333333%;
+ }
+ .ant-col-lg-offset-2 {
+ margin-left: 8.33333333%;
+ }
+ .ant-col-lg-order-2 {
+ order: 2;
+ }
+ .ant-col-lg-1 {
+ display: block;
+ box-sizing: border-box;
+ width: 4.16666667%;
+ }
+ .ant-col-lg-push-1 {
+ left: 4.16666667%;
+ }
+ .ant-col-lg-pull-1 {
+ right: 4.16666667%;
+ }
+ .ant-col-lg-offset-1 {
+ margin-left: 4.16666667%;
+ }
+ .ant-col-lg-order-1 {
+ order: 1;
+ }
+ .ant-col-lg-0 {
+ display: none;
+ }
+ .ant-col-push-0 {
+ left: auto;
+ }
+ .ant-col-pull-0 {
+ right: auto;
+ }
+ .ant-col-lg-push-0 {
+ left: auto;
+ }
+ .ant-col-lg-pull-0 {
+ right: auto;
+ }
+ .ant-col-lg-offset-0 {
+ margin-left: 0;
+ }
+ .ant-col-lg-order-0 {
+ order: 0;
+ }
+}
+@media (min-width: 1200px) {
+ .ant-col-xl-1, .ant-col-xl-2, .ant-col-xl-3, .ant-col-xl-4, .ant-col-xl-5, .ant-col-xl-6, .ant-col-xl-7, .ant-col-xl-8, .ant-col-xl-9, .ant-col-xl-10, .ant-col-xl-11, .ant-col-xl-12, .ant-col-xl-13, .ant-col-xl-14, .ant-col-xl-15, .ant-col-xl-16, .ant-col-xl-17, .ant-col-xl-18, .ant-col-xl-19, .ant-col-xl-20, .ant-col-xl-21, .ant-col-xl-22, .ant-col-xl-23, .ant-col-xl-24 {
+ float: left;
+ flex: 0 0 auto;
+ }
+ .ant-col-xl-24 {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ }
+ .ant-col-xl-push-24 {
+ left: 100%;
+ }
+ .ant-col-xl-pull-24 {
+ right: 100%;
+ }
+ .ant-col-xl-offset-24 {
+ margin-left: 100%;
+ }
+ .ant-col-xl-order-24 {
+ order: 24;
+ }
+ .ant-col-xl-23 {
+ display: block;
+ box-sizing: border-box;
+ width: 95.83333333%;
+ }
+ .ant-col-xl-push-23 {
+ left: 95.83333333%;
+ }
+ .ant-col-xl-pull-23 {
+ right: 95.83333333%;
+ }
+ .ant-col-xl-offset-23 {
+ margin-left: 95.83333333%;
+ }
+ .ant-col-xl-order-23 {
+ order: 23;
+ }
+ .ant-col-xl-22 {
+ display: block;
+ box-sizing: border-box;
+ width: 91.66666667%;
+ }
+ .ant-col-xl-push-22 {
+ left: 91.66666667%;
+ }
+ .ant-col-xl-pull-22 {
+ right: 91.66666667%;
+ }
+ .ant-col-xl-offset-22 {
+ margin-left: 91.66666667%;
+ }
+ .ant-col-xl-order-22 {
+ order: 22;
+ }
+ .ant-col-xl-21 {
+ display: block;
+ box-sizing: border-box;
+ width: 87.5%;
+ }
+ .ant-col-xl-push-21 {
+ left: 87.5%;
+ }
+ .ant-col-xl-pull-21 {
+ right: 87.5%;
+ }
+ .ant-col-xl-offset-21 {
+ margin-left: 87.5%;
+ }
+ .ant-col-xl-order-21 {
+ order: 21;
+ }
+ .ant-col-xl-20 {
+ display: block;
+ box-sizing: border-box;
+ width: 83.33333333%;
+ }
+ .ant-col-xl-push-20 {
+ left: 83.33333333%;
+ }
+ .ant-col-xl-pull-20 {
+ right: 83.33333333%;
+ }
+ .ant-col-xl-offset-20 {
+ margin-left: 83.33333333%;
+ }
+ .ant-col-xl-order-20 {
+ order: 20;
+ }
+ .ant-col-xl-19 {
+ display: block;
+ box-sizing: border-box;
+ width: 79.16666667%;
+ }
+ .ant-col-xl-push-19 {
+ left: 79.16666667%;
+ }
+ .ant-col-xl-pull-19 {
+ right: 79.16666667%;
+ }
+ .ant-col-xl-offset-19 {
+ margin-left: 79.16666667%;
+ }
+ .ant-col-xl-order-19 {
+ order: 19;
+ }
+ .ant-col-xl-18 {
+ display: block;
+ box-sizing: border-box;
+ width: 75%;
+ }
+ .ant-col-xl-push-18 {
+ left: 75%;
+ }
+ .ant-col-xl-pull-18 {
+ right: 75%;
+ }
+ .ant-col-xl-offset-18 {
+ margin-left: 75%;
+ }
+ .ant-col-xl-order-18 {
+ order: 18;
+ }
+ .ant-col-xl-17 {
+ display: block;
+ box-sizing: border-box;
+ width: 70.83333333%;
+ }
+ .ant-col-xl-push-17 {
+ left: 70.83333333%;
+ }
+ .ant-col-xl-pull-17 {
+ right: 70.83333333%;
+ }
+ .ant-col-xl-offset-17 {
+ margin-left: 70.83333333%;
+ }
+ .ant-col-xl-order-17 {
+ order: 17;
+ }
+ .ant-col-xl-16 {
+ display: block;
+ box-sizing: border-box;
+ width: 66.66666667%;
+ }
+ .ant-col-xl-push-16 {
+ left: 66.66666667%;
+ }
+ .ant-col-xl-pull-16 {
+ right: 66.66666667%;
+ }
+ .ant-col-xl-offset-16 {
+ margin-left: 66.66666667%;
+ }
+ .ant-col-xl-order-16 {
+ order: 16;
+ }
+ .ant-col-xl-15 {
+ display: block;
+ box-sizing: border-box;
+ width: 62.5%;
+ }
+ .ant-col-xl-push-15 {
+ left: 62.5%;
+ }
+ .ant-col-xl-pull-15 {
+ right: 62.5%;
+ }
+ .ant-col-xl-offset-15 {
+ margin-left: 62.5%;
+ }
+ .ant-col-xl-order-15 {
+ order: 15;
+ }
+ .ant-col-xl-14 {
+ display: block;
+ box-sizing: border-box;
+ width: 58.33333333%;
+ }
+ .ant-col-xl-push-14 {
+ left: 58.33333333%;
+ }
+ .ant-col-xl-pull-14 {
+ right: 58.33333333%;
+ }
+ .ant-col-xl-offset-14 {
+ margin-left: 58.33333333%;
+ }
+ .ant-col-xl-order-14 {
+ order: 14;
+ }
+ .ant-col-xl-13 {
+ display: block;
+ box-sizing: border-box;
+ width: 54.16666667%;
+ }
+ .ant-col-xl-push-13 {
+ left: 54.16666667%;
+ }
+ .ant-col-xl-pull-13 {
+ right: 54.16666667%;
+ }
+ .ant-col-xl-offset-13 {
+ margin-left: 54.16666667%;
+ }
+ .ant-col-xl-order-13 {
+ order: 13;
+ }
+ .ant-col-xl-12 {
+ display: block;
+ box-sizing: border-box;
+ width: 50%;
+ }
+ .ant-col-xl-push-12 {
+ left: 50%;
+ }
+ .ant-col-xl-pull-12 {
+ right: 50%;
+ }
+ .ant-col-xl-offset-12 {
+ margin-left: 50%;
+ }
+ .ant-col-xl-order-12 {
+ order: 12;
+ }
+ .ant-col-xl-11 {
+ display: block;
+ box-sizing: border-box;
+ width: 45.83333333%;
+ }
+ .ant-col-xl-push-11 {
+ left: 45.83333333%;
+ }
+ .ant-col-xl-pull-11 {
+ right: 45.83333333%;
+ }
+ .ant-col-xl-offset-11 {
+ margin-left: 45.83333333%;
+ }
+ .ant-col-xl-order-11 {
+ order: 11;
+ }
+ .ant-col-xl-10 {
+ display: block;
+ box-sizing: border-box;
+ width: 41.66666667%;
+ }
+ .ant-col-xl-push-10 {
+ left: 41.66666667%;
+ }
+ .ant-col-xl-pull-10 {
+ right: 41.66666667%;
+ }
+ .ant-col-xl-offset-10 {
+ margin-left: 41.66666667%;
+ }
+ .ant-col-xl-order-10 {
+ order: 10;
+ }
+ .ant-col-xl-9 {
+ display: block;
+ box-sizing: border-box;
+ width: 37.5%;
+ }
+ .ant-col-xl-push-9 {
+ left: 37.5%;
+ }
+ .ant-col-xl-pull-9 {
+ right: 37.5%;
+ }
+ .ant-col-xl-offset-9 {
+ margin-left: 37.5%;
+ }
+ .ant-col-xl-order-9 {
+ order: 9;
+ }
+ .ant-col-xl-8 {
+ display: block;
+ box-sizing: border-box;
+ width: 33.33333333%;
+ }
+ .ant-col-xl-push-8 {
+ left: 33.33333333%;
+ }
+ .ant-col-xl-pull-8 {
+ right: 33.33333333%;
+ }
+ .ant-col-xl-offset-8 {
+ margin-left: 33.33333333%;
+ }
+ .ant-col-xl-order-8 {
+ order: 8;
+ }
+ .ant-col-xl-7 {
+ display: block;
+ box-sizing: border-box;
+ width: 29.16666667%;
+ }
+ .ant-col-xl-push-7 {
+ left: 29.16666667%;
+ }
+ .ant-col-xl-pull-7 {
+ right: 29.16666667%;
+ }
+ .ant-col-xl-offset-7 {
+ margin-left: 29.16666667%;
+ }
+ .ant-col-xl-order-7 {
+ order: 7;
+ }
+ .ant-col-xl-6 {
+ display: block;
+ box-sizing: border-box;
+ width: 25%;
+ }
+ .ant-col-xl-push-6 {
+ left: 25%;
+ }
+ .ant-col-xl-pull-6 {
+ right: 25%;
+ }
+ .ant-col-xl-offset-6 {
+ margin-left: 25%;
+ }
+ .ant-col-xl-order-6 {
+ order: 6;
+ }
+ .ant-col-xl-5 {
+ display: block;
+ box-sizing: border-box;
+ width: 20.83333333%;
+ }
+ .ant-col-xl-push-5 {
+ left: 20.83333333%;
+ }
+ .ant-col-xl-pull-5 {
+ right: 20.83333333%;
+ }
+ .ant-col-xl-offset-5 {
+ margin-left: 20.83333333%;
+ }
+ .ant-col-xl-order-5 {
+ order: 5;
+ }
+ .ant-col-xl-4 {
+ display: block;
+ box-sizing: border-box;
+ width: 16.66666667%;
+ }
+ .ant-col-xl-push-4 {
+ left: 16.66666667%;
+ }
+ .ant-col-xl-pull-4 {
+ right: 16.66666667%;
+ }
+ .ant-col-xl-offset-4 {
+ margin-left: 16.66666667%;
+ }
+ .ant-col-xl-order-4 {
+ order: 4;
+ }
+ .ant-col-xl-3 {
+ display: block;
+ box-sizing: border-box;
+ width: 12.5%;
+ }
+ .ant-col-xl-push-3 {
+ left: 12.5%;
+ }
+ .ant-col-xl-pull-3 {
+ right: 12.5%;
+ }
+ .ant-col-xl-offset-3 {
+ margin-left: 12.5%;
+ }
+ .ant-col-xl-order-3 {
+ order: 3;
+ }
+ .ant-col-xl-2 {
+ display: block;
+ box-sizing: border-box;
+ width: 8.33333333%;
+ }
+ .ant-col-xl-push-2 {
+ left: 8.33333333%;
+ }
+ .ant-col-xl-pull-2 {
+ right: 8.33333333%;
+ }
+ .ant-col-xl-offset-2 {
+ margin-left: 8.33333333%;
+ }
+ .ant-col-xl-order-2 {
+ order: 2;
+ }
+ .ant-col-xl-1 {
+ display: block;
+ box-sizing: border-box;
+ width: 4.16666667%;
+ }
+ .ant-col-xl-push-1 {
+ left: 4.16666667%;
+ }
+ .ant-col-xl-pull-1 {
+ right: 4.16666667%;
+ }
+ .ant-col-xl-offset-1 {
+ margin-left: 4.16666667%;
+ }
+ .ant-col-xl-order-1 {
+ order: 1;
+ }
+ .ant-col-xl-0 {
+ display: none;
+ }
+ .ant-col-push-0 {
+ left: auto;
+ }
+ .ant-col-pull-0 {
+ right: auto;
+ }
+ .ant-col-xl-push-0 {
+ left: auto;
+ }
+ .ant-col-xl-pull-0 {
+ right: auto;
+ }
+ .ant-col-xl-offset-0 {
+ margin-left: 0;
+ }
+ .ant-col-xl-order-0 {
+ order: 0;
+ }
+}
+@media (min-width: 1600px) {
+ .ant-col-xxl-1, .ant-col-xxl-2, .ant-col-xxl-3, .ant-col-xxl-4, .ant-col-xxl-5, .ant-col-xxl-6, .ant-col-xxl-7, .ant-col-xxl-8, .ant-col-xxl-9, .ant-col-xxl-10, .ant-col-xxl-11, .ant-col-xxl-12, .ant-col-xxl-13, .ant-col-xxl-14, .ant-col-xxl-15, .ant-col-xxl-16, .ant-col-xxl-17, .ant-col-xxl-18, .ant-col-xxl-19, .ant-col-xxl-20, .ant-col-xxl-21, .ant-col-xxl-22, .ant-col-xxl-23, .ant-col-xxl-24 {
+ float: left;
+ flex: 0 0 auto;
+ }
+ .ant-col-xxl-24 {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ }
+ .ant-col-xxl-push-24 {
+ left: 100%;
+ }
+ .ant-col-xxl-pull-24 {
+ right: 100%;
+ }
+ .ant-col-xxl-offset-24 {
+ margin-left: 100%;
+ }
+ .ant-col-xxl-order-24 {
+ order: 24;
+ }
+ .ant-col-xxl-23 {
+ display: block;
+ box-sizing: border-box;
+ width: 95.83333333%;
+ }
+ .ant-col-xxl-push-23 {
+ left: 95.83333333%;
+ }
+ .ant-col-xxl-pull-23 {
+ right: 95.83333333%;
+ }
+ .ant-col-xxl-offset-23 {
+ margin-left: 95.83333333%;
+ }
+ .ant-col-xxl-order-23 {
+ order: 23;
+ }
+ .ant-col-xxl-22 {
+ display: block;
+ box-sizing: border-box;
+ width: 91.66666667%;
+ }
+ .ant-col-xxl-push-22 {
+ left: 91.66666667%;
+ }
+ .ant-col-xxl-pull-22 {
+ right: 91.66666667%;
+ }
+ .ant-col-xxl-offset-22 {
+ margin-left: 91.66666667%;
+ }
+ .ant-col-xxl-order-22 {
+ order: 22;
+ }
+ .ant-col-xxl-21 {
+ display: block;
+ box-sizing: border-box;
+ width: 87.5%;
+ }
+ .ant-col-xxl-push-21 {
+ left: 87.5%;
+ }
+ .ant-col-xxl-pull-21 {
+ right: 87.5%;
+ }
+ .ant-col-xxl-offset-21 {
+ margin-left: 87.5%;
+ }
+ .ant-col-xxl-order-21 {
+ order: 21;
+ }
+ .ant-col-xxl-20 {
+ display: block;
+ box-sizing: border-box;
+ width: 83.33333333%;
+ }
+ .ant-col-xxl-push-20 {
+ left: 83.33333333%;
+ }
+ .ant-col-xxl-pull-20 {
+ right: 83.33333333%;
+ }
+ .ant-col-xxl-offset-20 {
+ margin-left: 83.33333333%;
+ }
+ .ant-col-xxl-order-20 {
+ order: 20;
+ }
+ .ant-col-xxl-19 {
+ display: block;
+ box-sizing: border-box;
+ width: 79.16666667%;
+ }
+ .ant-col-xxl-push-19 {
+ left: 79.16666667%;
+ }
+ .ant-col-xxl-pull-19 {
+ right: 79.16666667%;
+ }
+ .ant-col-xxl-offset-19 {
+ margin-left: 79.16666667%;
+ }
+ .ant-col-xxl-order-19 {
+ order: 19;
+ }
+ .ant-col-xxl-18 {
+ display: block;
+ box-sizing: border-box;
+ width: 75%;
+ }
+ .ant-col-xxl-push-18 {
+ left: 75%;
+ }
+ .ant-col-xxl-pull-18 {
+ right: 75%;
+ }
+ .ant-col-xxl-offset-18 {
+ margin-left: 75%;
+ }
+ .ant-col-xxl-order-18 {
+ order: 18;
+ }
+ .ant-col-xxl-17 {
+ display: block;
+ box-sizing: border-box;
+ width: 70.83333333%;
+ }
+ .ant-col-xxl-push-17 {
+ left: 70.83333333%;
+ }
+ .ant-col-xxl-pull-17 {
+ right: 70.83333333%;
+ }
+ .ant-col-xxl-offset-17 {
+ margin-left: 70.83333333%;
+ }
+ .ant-col-xxl-order-17 {
+ order: 17;
+ }
+ .ant-col-xxl-16 {
+ display: block;
+ box-sizing: border-box;
+ width: 66.66666667%;
+ }
+ .ant-col-xxl-push-16 {
+ left: 66.66666667%;
+ }
+ .ant-col-xxl-pull-16 {
+ right: 66.66666667%;
+ }
+ .ant-col-xxl-offset-16 {
+ margin-left: 66.66666667%;
+ }
+ .ant-col-xxl-order-16 {
+ order: 16;
+ }
+ .ant-col-xxl-15 {
+ display: block;
+ box-sizing: border-box;
+ width: 62.5%;
+ }
+ .ant-col-xxl-push-15 {
+ left: 62.5%;
+ }
+ .ant-col-xxl-pull-15 {
+ right: 62.5%;
+ }
+ .ant-col-xxl-offset-15 {
+ margin-left: 62.5%;
+ }
+ .ant-col-xxl-order-15 {
+ order: 15;
+ }
+ .ant-col-xxl-14 {
+ display: block;
+ box-sizing: border-box;
+ width: 58.33333333%;
+ }
+ .ant-col-xxl-push-14 {
+ left: 58.33333333%;
+ }
+ .ant-col-xxl-pull-14 {
+ right: 58.33333333%;
+ }
+ .ant-col-xxl-offset-14 {
+ margin-left: 58.33333333%;
+ }
+ .ant-col-xxl-order-14 {
+ order: 14;
+ }
+ .ant-col-xxl-13 {
+ display: block;
+ box-sizing: border-box;
+ width: 54.16666667%;
+ }
+ .ant-col-xxl-push-13 {
+ left: 54.16666667%;
+ }
+ .ant-col-xxl-pull-13 {
+ right: 54.16666667%;
+ }
+ .ant-col-xxl-offset-13 {
+ margin-left: 54.16666667%;
+ }
+ .ant-col-xxl-order-13 {
+ order: 13;
+ }
+ .ant-col-xxl-12 {
+ display: block;
+ box-sizing: border-box;
+ width: 50%;
+ }
+ .ant-col-xxl-push-12 {
+ left: 50%;
+ }
+ .ant-col-xxl-pull-12 {
+ right: 50%;
+ }
+ .ant-col-xxl-offset-12 {
+ margin-left: 50%;
+ }
+ .ant-col-xxl-order-12 {
+ order: 12;
+ }
+ .ant-col-xxl-11 {
+ display: block;
+ box-sizing: border-box;
+ width: 45.83333333%;
+ }
+ .ant-col-xxl-push-11 {
+ left: 45.83333333%;
+ }
+ .ant-col-xxl-pull-11 {
+ right: 45.83333333%;
+ }
+ .ant-col-xxl-offset-11 {
+ margin-left: 45.83333333%;
+ }
+ .ant-col-xxl-order-11 {
+ order: 11;
+ }
+ .ant-col-xxl-10 {
+ display: block;
+ box-sizing: border-box;
+ width: 41.66666667%;
+ }
+ .ant-col-xxl-push-10 {
+ left: 41.66666667%;
+ }
+ .ant-col-xxl-pull-10 {
+ right: 41.66666667%;
+ }
+ .ant-col-xxl-offset-10 {
+ margin-left: 41.66666667%;
+ }
+ .ant-col-xxl-order-10 {
+ order: 10;
+ }
+ .ant-col-xxl-9 {
+ display: block;
+ box-sizing: border-box;
+ width: 37.5%;
+ }
+ .ant-col-xxl-push-9 {
+ left: 37.5%;
+ }
+ .ant-col-xxl-pull-9 {
+ right: 37.5%;
+ }
+ .ant-col-xxl-offset-9 {
+ margin-left: 37.5%;
+ }
+ .ant-col-xxl-order-9 {
+ order: 9;
+ }
+ .ant-col-xxl-8 {
+ display: block;
+ box-sizing: border-box;
+ width: 33.33333333%;
+ }
+ .ant-col-xxl-push-8 {
+ left: 33.33333333%;
+ }
+ .ant-col-xxl-pull-8 {
+ right: 33.33333333%;
+ }
+ .ant-col-xxl-offset-8 {
+ margin-left: 33.33333333%;
+ }
+ .ant-col-xxl-order-8 {
+ order: 8;
+ }
+ .ant-col-xxl-7 {
+ display: block;
+ box-sizing: border-box;
+ width: 29.16666667%;
+ }
+ .ant-col-xxl-push-7 {
+ left: 29.16666667%;
+ }
+ .ant-col-xxl-pull-7 {
+ right: 29.16666667%;
+ }
+ .ant-col-xxl-offset-7 {
+ margin-left: 29.16666667%;
+ }
+ .ant-col-xxl-order-7 {
+ order: 7;
+ }
+ .ant-col-xxl-6 {
+ display: block;
+ box-sizing: border-box;
+ width: 25%;
+ }
+ .ant-col-xxl-push-6 {
+ left: 25%;
+ }
+ .ant-col-xxl-pull-6 {
+ right: 25%;
+ }
+ .ant-col-xxl-offset-6 {
+ margin-left: 25%;
+ }
+ .ant-col-xxl-order-6 {
+ order: 6;
+ }
+ .ant-col-xxl-5 {
+ display: block;
+ box-sizing: border-box;
+ width: 20.83333333%;
+ }
+ .ant-col-xxl-push-5 {
+ left: 20.83333333%;
+ }
+ .ant-col-xxl-pull-5 {
+ right: 20.83333333%;
+ }
+ .ant-col-xxl-offset-5 {
+ margin-left: 20.83333333%;
+ }
+ .ant-col-xxl-order-5 {
+ order: 5;
+ }
+ .ant-col-xxl-4 {
+ display: block;
+ box-sizing: border-box;
+ width: 16.66666667%;
+ }
+ .ant-col-xxl-push-4 {
+ left: 16.66666667%;
+ }
+ .ant-col-xxl-pull-4 {
+ right: 16.66666667%;
+ }
+ .ant-col-xxl-offset-4 {
+ margin-left: 16.66666667%;
+ }
+ .ant-col-xxl-order-4 {
+ order: 4;
+ }
+ .ant-col-xxl-3 {
+ display: block;
+ box-sizing: border-box;
+ width: 12.5%;
+ }
+ .ant-col-xxl-push-3 {
+ left: 12.5%;
+ }
+ .ant-col-xxl-pull-3 {
+ right: 12.5%;
+ }
+ .ant-col-xxl-offset-3 {
+ margin-left: 12.5%;
+ }
+ .ant-col-xxl-order-3 {
+ order: 3;
+ }
+ .ant-col-xxl-2 {
+ display: block;
+ box-sizing: border-box;
+ width: 8.33333333%;
+ }
+ .ant-col-xxl-push-2 {
+ left: 8.33333333%;
+ }
+ .ant-col-xxl-pull-2 {
+ right: 8.33333333%;
+ }
+ .ant-col-xxl-offset-2 {
+ margin-left: 8.33333333%;
+ }
+ .ant-col-xxl-order-2 {
+ order: 2;
+ }
+ .ant-col-xxl-1 {
+ display: block;
+ box-sizing: border-box;
+ width: 4.16666667%;
+ }
+ .ant-col-xxl-push-1 {
+ left: 4.16666667%;
+ }
+ .ant-col-xxl-pull-1 {
+ right: 4.16666667%;
+ }
+ .ant-col-xxl-offset-1 {
+ margin-left: 4.16666667%;
+ }
+ .ant-col-xxl-order-1 {
+ order: 1;
+ }
+ .ant-col-xxl-0 {
+ display: none;
+ }
+ .ant-col-push-0 {
+ left: auto;
+ }
+ .ant-col-pull-0 {
+ right: auto;
+ }
+ .ant-col-xxl-push-0 {
+ left: auto;
+ }
+ .ant-col-xxl-pull-0 {
+ right: auto;
+ }
+ .ant-col-xxl-offset-0 {
+ margin-left: 0;
+ }
+ .ant-col-xxl-order-0 {
+ order: 0;
+ }
+}
+.ant-input {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ display: inline-block;
+ padding: 4px 11px;
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ background-color: #fff;
+ background-image: none;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ transition: all .3s;
+}
+.ant-input::-moz-placeholder {
+ color: #bfbfbf;
+ opacity: 1;
+}
+.ant-input:-ms-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-input::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-input:hover {
+ border-color: #40a9ff;
+}
+.ant-input:focus {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-input-disabled {
+ background-color: #f5f5f5;
+ opacity: 1;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-input-disabled:hover {
+ border-color: #e6d8d8;
+}
+textarea.ant-input {
+ max-width: 100%;
+ height: auto;
+ vertical-align: bottom;
+ transition: all .3s, height 0s;
+ min-height: 32px;
+}
+.ant-input-lg {
+ padding: 6px 11px;
+ height: 40px;
+ font-size: 16px;
+}
+.ant-input-sm {
+ padding: 1px 7px;
+ height: 24px;
+}
+.ant-input-group {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ display: table;
+ border-collapse: separate;
+ border-spacing: 0;
+ width: 100%;
+}
+.ant-input-group[class*="col-"] {
+ float: none;
+ padding-left: 0;
+ padding-right: 0;
+}
+.ant-input-group > [class*="col-"] {
+ padding-right: 8px;
+}
+.ant-input-group > [class*="col-"]:last-child {
+ padding-right: 0;
+}
+.ant-input-group-addon,
+.ant-input-group-wrap,
+.ant-input-group > .ant-input {
+ display: table-cell;
+}
+.ant-input-group-addon:not(:first-child):not(:last-child),
+.ant-input-group-wrap:not(:first-child):not(:last-child),
+.ant-input-group > .ant-input:not(:first-child):not(:last-child) {
+ border-radius: 0;
+}
+.ant-input-group-addon,
+.ant-input-group-wrap {
+ width: 1px;
+ white-space: nowrap;
+ vertical-align: middle;
+}
+.ant-input-group-wrap > * {
+ display: block !important;
+}
+.ant-input-group .ant-input {
+ float: left;
+ width: 100%;
+ margin-bottom: 0;
+}
+.ant-input-group .ant-input:focus {
+ z-index: 1;
+}
+.ant-input-group-addon {
+ padding: 0 11px;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 1;
+ color: #54657e;
+ text-align: center;
+ background-color: #fafafa;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ position: relative;
+ transition: all .3s;
+}
+.ant-input-group-addon .ant-select {
+ margin: -5px -11px;
+}
+.ant-input-group-addon .ant-select .ant-select-selection {
+ background-color: inherit;
+ margin: -1px;
+ border: 1px solid transparent;
+ box-shadow: none;
+}
+.ant-input-group-addon .ant-select-open .ant-select-selection,
+.ant-input-group-addon .ant-select-focused .ant-select-selection {
+ color: #1890ff;
+}
+.ant-input-group-addon > i:only-child:after {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+.ant-input-group > .ant-input:first-child,
+.ant-input-group-addon:first-child {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+}
+.ant-input-group > .ant-input:first-child .ant-select .ant-select-selection,
+.ant-input-group-addon:first-child .ant-select .ant-select-selection {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+}
+.ant-input-group > .ant-input-affix-wrapper:not(:first-child) .ant-input {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+}
+.ant-input-group > .ant-input-affix-wrapper:not(:last-child) .ant-input {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+}
+.ant-input-group-addon:first-child {
+ border-right: 0;
+}
+.ant-input-group-addon:last-child {
+ border-left: 0;
+}
+.ant-input-group > .ant-input:last-child,
+.ant-input-group-addon:last-child {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+}
+.ant-input-group > .ant-input:last-child .ant-select .ant-select-selection,
+.ant-input-group-addon:last-child .ant-select .ant-select-selection {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+}
+.ant-input-group-lg .ant-input,
+.ant-input-group-lg > .ant-input-group-addon {
+ padding: 6px 11px;
+ height: 40px;
+ font-size: 16px;
+}
+.ant-input-group-sm .ant-input,
+.ant-input-group-sm > .ant-input-group-addon {
+ padding: 1px 7px;
+ height: 24px;
+}
+.ant-input-group-lg .ant-select-selection--single {
+ height: 40px;
+}
+.ant-input-group-sm .ant-select-selection--single {
+ height: 24px;
+}
+.ant-input-group .ant-input-affix-wrapper {
+ display: table-cell;
+ width: 100%;
+ float: left;
+}
+.ant-input-group.ant-input-group-compact {
+ display: block;
+ zoom: 1;
+}
+.ant-input-group.ant-input-group-compact:before,
+.ant-input-group.ant-input-group-compact:after {
+ content: " ";
+ display: table;
+}
+.ant-input-group.ant-input-group-compact:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-input-group.ant-input-group-compact:before,
+.ant-input-group.ant-input-group-compact:after {
+ content: " ";
+ display: table;
+}
+.ant-input-group.ant-input-group-compact:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-input-group.ant-input-group-compact > * {
+ border-radius: 0;
+ border-right-width: 0;
+ vertical-align: top;
+ float: none;
+ display: inline-block;
+}
+.ant-input-group.ant-input-group-compact .ant-input {
+ float: none;
+ z-index: auto;
+}
+.ant-input-group.ant-input-group-compact > .ant-select > .ant-select-selection,
+.ant-input-group.ant-input-group-compact > .ant-calendar-picker .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-select-auto-complete .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-cascader-picker .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-mention-wrapper .ant-mention-editor,
+.ant-input-group.ant-input-group-compact > .ant-time-picker .ant-time-picker-input {
+ border-radius: 0;
+ border-right-width: 0;
+}
+.ant-input-group.ant-input-group-compact > *:first-child,
+.ant-input-group.ant-input-group-compact > .ant-select:first-child > .ant-select-selection,
+.ant-input-group.ant-input-group-compact > .ant-calendar-picker:first-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-select-auto-complete:first-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-cascader-picker:first-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-mention-wrapper:first-child .ant-mention-editor,
+.ant-input-group.ant-input-group-compact > .ant-time-picker:first-child .ant-time-picker-input {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+.ant-input-group.ant-input-group-compact > *:last-child,
+.ant-input-group.ant-input-group-compact > .ant-select:last-child > .ant-select-selection,
+.ant-input-group.ant-input-group-compact > .ant-calendar-picker:last-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-select-auto-complete:last-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-cascader-picker:last-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-mention-wrapper:last-child .ant-mention-editor,
+.ant-input-group.ant-input-group-compact > .ant-time-picker:last-child .ant-time-picker-input {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-right-width: 1px;
+}
+.ant-input-group-wrapper {
+ display: inline-block;
+ vertical-align: top;
+ width: 100%;
+}
+.ant-input-affix-wrapper {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ display: inline-block;
+ width: 100%;
+}
+.ant-input-affix-wrapper .ant-input {
+ z-index: 1;
+}
+.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
+ border-color: #40a9ff;
+}
+.ant-input-affix-wrapper .ant-input-prefix,
+.ant-input-affix-wrapper .ant-input-suffix {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 2;
+ line-height: 0;
+ color: #54657e;
+}
+.ant-input-affix-wrapper .ant-input-prefix :not(.anticon),
+.ant-input-affix-wrapper .ant-input-suffix :not(.anticon) {
+ line-height: 1.5;
+}
+.ant-input-affix-wrapper .ant-input-prefix {
+ left: 12px;
+}
+.ant-input-affix-wrapper .ant-input-suffix {
+ right: 12px;
+}
+.ant-input-affix-wrapper .ant-input:not(:first-child) {
+ padding-left: 30px;
+}
+.ant-input-affix-wrapper .ant-input:not(:last-child) {
+ padding-right: 30px;
+}
+.ant-input-affix-wrapper .ant-input {
+ min-height: 100%;
+}
+.ant-input-search-icon {
+ pointer-events: none;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-input-search:not(.ant-input-search-small) > .ant-input-suffix {
+ right: 12px;
+}
+.ant-input-search > .ant-input-suffix > .ant-input-search-button {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.ant-input-search > .ant-input-suffix > .ant-input-search-button > .anticon-search {
+ font-size: 16px;
+}
+.ant-input-search.ant-input-search-enter-button > .ant-input {
+ padding-right: 46px;
+}
+.ant-input-search.ant-input-search-enter-button > .ant-input-suffix {
+ right: 0;
+}
+.ant-input-number {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ box-sizing: border-box;
+ list-style: none;
+ position: relative;
+ padding: 4px 11px;
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ background-color: #fff;
+ background-image: none;
+ transition: all .3s;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ width: 90px;
+}
+.ant-input-number::-moz-placeholder {
+ color: #bfbfbf;
+ opacity: 1;
+}
+.ant-input-number:-ms-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-input-number::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-input-number:hover {
+ border-color: #40a9ff;
+}
+.ant-input-number:focus {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-input-number-disabled {
+ background-color: #f5f5f5;
+ opacity: 1;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-input-number-disabled:hover {
+ border-color: #e6d8d8;
+}
+textarea.ant-input-number {
+ max-width: 100%;
+ height: auto;
+ vertical-align: bottom;
+ transition: all .3s, height 0s;
+ min-height: 32px;
+}
+.ant-input-number-lg {
+ padding: 6px 11px;
+ height: 40px;
+ font-size: 16px;
+}
+.ant-input-number-sm {
+ padding: 1px 7px;
+ height: 24px;
+}
+.ant-input-number-handler {
+ text-align: center;
+ line-height: 0;
+ height: 50%;
+ overflow: hidden;
+ color: rgba(0, 0, 0, 0.45);
+ position: relative;
+ transition: all 0.1s linear;
+ display: block;
+ width: 100%;
+ font-weight: bold;
+}
+.ant-input-number-handler:active {
+ background: #f4f4f4;
+}
+.ant-input-number-handler:hover .ant-input-number-handler-up-inner,
+.ant-input-number-handler:hover .ant-input-number-handler-down-inner {
+ color: #40a9ff;
+}
+.ant-input-number-handler-up-inner,
+.ant-input-number-handler-down-inner {
+ font-style: normal;
+ vertical-align: baseline;
+ text-align: center;
+ text-transform: none;
+ line-height: 1;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ line-height: 12px;
+ user-select: none;
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ transition: all 0.1s linear;
+ display: inline-block;
+ font-size: 12px;
+ font-size: 7px \9;
+ transform: scale(0.58333333) rotate(0deg);
+ right: 4px;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-input-number-handler-up-inner:before,
+.ant-input-number-handler-down-inner:before {
+ display: block;
+ font-family: "anticon" !important;
+}
+:root .ant-input-number-handler-up-inner,
+:root .ant-input-number-handler-down-inner {
+ font-size: 12px;
+}
+.ant-input-number:hover {
+ border-color: #40a9ff;
+}
+.ant-input-number-focused {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-input-number-disabled {
+ background-color: #f5f5f5;
+ opacity: 1;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-input-number-disabled:hover {
+ border-color: #e6d8d8;
+}
+.ant-input-number-disabled .ant-input-number-input {
+ cursor: not-allowed;
+ background-color: #f5f5f5;
+}
+.ant-input-number-disabled .ant-input-number-handler-wrap {
+ display: none;
+}
+.ant-input-number-input {
+ width: 100%;
+ text-align: left;
+ outline: 0;
+ -moz-appearance: textfield;
+ height: 30px;
+ transition: all 0.3s linear;
+ color: #54657e;
+ background-color: #fff;
+ border: 0;
+ border-radius: 4px;
+ padding: 0 11px;
+ display: block;
+}
+.ant-input-number-input::-moz-placeholder {
+ color: #bfbfbf;
+ opacity: 1;
+}
+.ant-input-number-input:-ms-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-input-number-input::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-input-number-input[disabled] {
+ background-color: #f5f5f5;
+ opacity: 1;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-input-number-input[disabled]:hover {
+ border-color: #e6d8d8;
+}
+.ant-input-number-lg {
+ padding: 0;
+ font-size: 16px;
+}
+.ant-input-number-lg input {
+ height: 38px;
+}
+.ant-input-number-sm {
+ padding: 0;
+}
+.ant-input-number-sm input {
+ height: 22px;
+ padding: 0 7px;
+}
+.ant-input-number-handler-wrap {
+ border-left: 1px solid #d9d9d9;
+ width: 22px;
+ height: 100%;
+ background: #fff;
+ position: absolute;
+ top: 0;
+ right: 0;
+ opacity: 0;
+ border-radius: 0 4px 4px 0;
+ transition: opacity 0.24s linear 0.1s;
+ z-index: 2;
+}
+.ant-input-number-handler-wrap:hover .ant-input-number-handler {
+ height: 40%;
+}
+.ant-input-number:hover .ant-input-number-handler-wrap {
+ opacity: 1;
+}
+.ant-input-number-handler-up {
+ cursor: pointer;
+}
+.ant-input-number-handler-up-inner {
+ top: 50%;
+ margin-top: -6px;
+}
+.ant-input-number-handler-up-inner:before {
+ text-align: center;
+ content: "\e61e";
+}
+.ant-input-number-handler-up:hover {
+ height: 60% !important;
+}
+.ant-input-number-handler-down {
+ border-top: 1px solid #d9d9d9;
+ top: -1px;
+ cursor: pointer;
+}
+.ant-input-number-handler-down-inner {
+ top: 50%;
+ margin-top: -6px;
+}
+.ant-input-number-handler-down-inner:before {
+ text-align: center;
+ content: "\e61d";
+}
+.ant-input-number-handler-down:hover {
+ height: 60% !important;
+}
+.ant-input-number-handler-up-disabled,
+.ant-input-number-handler-down-disabled {
+ cursor: not-allowed;
+}
+.ant-input-number-handler-up-disabled:hover .ant-input-number-handler-up-inner,
+.ant-input-number-handler-down-disabled:hover .ant-input-number-handler-down-inner {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-layout {
+ display: flex;
+ flex-direction: column;
+ flex: auto;
+ background: #f0f2f5;
+}
+.ant-layout,
+.ant-layout * {
+ box-sizing: border-box;
+}
+.ant-layout.ant-layout-has-sider {
+ flex-direction: row;
+}
+.ant-layout.ant-layout-has-sider > .ant-layout,
+.ant-layout.ant-layout-has-sider > .ant-layout-content {
+ overflow-x: hidden;
+}
+.ant-layout-header,
+.ant-layout-footer {
+ flex: 0 0 auto;
+}
+.ant-layout-header {
+ background: #2a3542;
+ padding: 0 50px;
+ height: 64px;
+ line-height: 64px;
+}
+.ant-layout-footer {
+ background: #f0f2f5;
+ padding: 24px 50px;
+ color: #54657e;
+ font-size: 14px;
+}
+.ant-layout-content {
+ flex: auto;
+}
+.ant-layout-sider {
+ transition: all .2s;
+ position: relative;
+ background: #2a3542;
+ /* fix firefox can't set width smaller than content on flex item */
+ min-width: 0;
+}
+.ant-layout-sider-children {
+ height: 100%;
+ padding-top: 0.1px;
+ margin-top: -0.1px;
+}
+.ant-layout-sider-has-trigger {
+ padding-bottom: 48px;
+}
+.ant-layout-sider-right {
+ order: 1;
+}
+.ant-layout-sider-trigger {
+ position: fixed;
+ text-align: center;
+ bottom: 0;
+ cursor: pointer;
+ height: 48px;
+ line-height: 48px;
+ color: #fff;
+ background: #002140;
+ z-index: 1;
+ transition: all .2s;
+}
+.ant-layout-sider-zero-width > * {
+ overflow: hidden;
+}
+.ant-layout-sider-zero-width-trigger {
+ position: absolute;
+ top: 64px;
+ right: -36px;
+ text-align: center;
+ width: 36px;
+ height: 42px;
+ line-height: 42px;
+ background: #2a3542;
+ color: #fff;
+ font-size: 18px;
+ border-radius: 0 4px 4px 0;
+ cursor: pointer;
+ transition: background .3s ease;
+}
+.ant-layout-sider-zero-width-trigger:hover {
+ background: #3f4955;
+}
+.ant-list {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+}
+.ant-list * {
+ outline: none;
+}
+.ant-list-pagination {
+ margin-top: 24px;
+ text-align: right;
+}
+.ant-list-more {
+ margin-top: 12px;
+ text-align: center;
+}
+.ant-list-more button {
+ padding-left: 32px;
+ padding-right: 32px;
+}
+.ant-list-spin {
+ text-align: center;
+ min-height: 40px;
+}
+.ant-list-empty-text {
+ color: rgba(0, 0, 0, 0.45);
+ font-size: 14px;
+ padding: 16px;
+ text-align: center;
+}
+.ant-list-item {
+ align-items: center;
+ display: flex;
+ padding-top: 12px;
+ padding-bottom: 12px;
+}
+.ant-list-item-meta {
+ align-items: flex-start;
+ display: flex;
+ flex: 1;
+ font-size: 0;
+}
+.ant-list-item-meta-avatar {
+ margin-right: 16px;
+}
+.ant-list-item-meta-content {
+ flex: 1 0;
+}
+.ant-list-item-meta-title {
+ color: #54657e;
+ margin-bottom: 4px;
+ font-size: 14px;
+ line-height: 22px;
+}
+.ant-list-item-meta-title > a {
+ color: #54657e;
+ transition: all .3s;
+}
+.ant-list-item-meta-title > a:hover {
+ color: #1890ff;
+}
+.ant-list-item-meta-description {
+ color: rgba(0, 0, 0, 0.45);
+ font-size: 14px;
+ line-height: 22px;
+}
+.ant-list-item-content {
+ display: flex;
+ flex: 1;
+ justify-content: flex-end;
+}
+.ant-list-item-content-single {
+ justify-content: flex-start;
+}
+.ant-list-item-action {
+ font-size: 0;
+ flex: 0 0 auto;
+ margin-left: 48px;
+ padding: 0;
+ list-style: none;
+}
+.ant-list-item-action > li {
+ display: inline-block;
+ color: rgba(0, 0, 0, 0.45);
+ cursor: pointer;
+ padding: 0 8px;
+ position: relative;
+ font-size: 14px;
+ line-height: 22px;
+ text-align: center;
+}
+.ant-list-item-action > li:first-child {
+ padding-left: 0;
+}
+.ant-list-item-action-split {
+ background-color: #e8e8e8;
+ margin-top: -7px;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ width: 1px;
+ height: 14px;
+}
+.ant-list-item-main {
+ display: flex;
+ flex: 1;
+}
+.ant-list-header,
+.ant-list-footer {
+ padding-top: 12px;
+ padding-bottom: 12px;
+}
+.ant-list-empty {
+ color: rgba(0, 0, 0, 0.45);
+ padding: 16px 0;
+ font-size: 12px;
+ text-align: center;
+}
+.ant-list-split .ant-list-item {
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-list-split .ant-list-item:last-child {
+ border-bottom: none;
+}
+.ant-list-split .ant-list-header {
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-list-loading .ant-list-spin-nested-loading {
+ min-height: 32px;
+}
+.ant-list-something-after-last-item .ant-list-item:last-child {
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-list-lg .ant-list-item {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+.ant-list-sm .ant-list-item {
+ padding-top: 8px;
+ padding-bottom: 8px;
+}
+.ant-list-vertical .ant-list-item {
+ display: block;
+}
+.ant-list-vertical .ant-list-item-extra-wrap {
+ display: flex;
+}
+.ant-list-vertical .ant-list-item-main {
+ display: block;
+ flex: 1;
+}
+.ant-list-vertical .ant-list-item-extra {
+ margin-left: 58px;
+}
+.ant-list-vertical .ant-list-item-meta {
+ margin-bottom: 16px;
+}
+.ant-list-vertical .ant-list-item-meta-avatar {
+ display: none;
+}
+.ant-list-vertical .ant-list-item-meta-title {
+ color: rgba(0, 0, 0, 0.85);
+ margin-bottom: 12px;
+ font-size: 16px;
+ line-height: 24px;
+}
+.ant-list-vertical .ant-list-item-content {
+ display: block;
+ color: #54657e;
+ font-size: 14px;
+ margin-bottom: 16px;
+}
+.ant-list-vertical .ant-list-item-action {
+ margin-left: auto;
+}
+.ant-list-vertical .ant-list-item-action > li {
+ padding: 0 16px;
+}
+.ant-list-vertical .ant-list-item-action > li:first-child {
+ padding-left: 0;
+}
+.ant-list-grid .ant-list-item {
+ border-bottom: none;
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-bottom: 20px;
+}
+.ant-list-grid .ant-list-item-content {
+ display: block;
+}
+.ant-list-bordered {
+ border-radius: 4px;
+ border: 1px solid #d9d9d9;
+}
+.ant-list-bordered .ant-list-header {
+ padding-left: 24px;
+ padding-right: 24px;
+}
+.ant-list-bordered .ant-list-footer {
+ padding-left: 24px;
+ padding-right: 24px;
+}
+.ant-list-bordered .ant-list-item {
+ border-bottom: 1px solid #e8e8e8;
+ padding-left: 24px;
+ padding-right: 24px;
+}
+.ant-list-bordered .ant-list-pagination {
+ margin: 16px 24px;
+}
+.ant-list-bordered.ant-list-sm .ant-list-item {
+ padding-left: 16px;
+ padding-right: 16px;
+}
+.ant-list-bordered.ant-list-sm .ant-list-header,
+.ant-list-bordered.ant-list-sm .ant-list-footer {
+ padding: 8px 16px;
+}
+.ant-list-bordered.ant-list-lg .ant-list-header,
+.ant-list-bordered.ant-list-lg .ant-list-footer {
+ padding: 16px 24px;
+}
+@media screen and (max-width: 768px) {
+ .ant-list-item-action {
+ margin-left: 24px;
+ }
+ .ant-list-vertical .ant-list-item-extra {
+ margin-left: 24px;
+ }
+}
+@media screen and (max-width: 480px) {
+ .ant-list-item {
+ flex-wrap: wrap;
+ }
+ .ant-list-item-action {
+ margin-left: 12px;
+ }
+ .ant-list-vertical .ant-list-item-extra-wrap {
+ flex-wrap: wrap-reverse;
+ }
+ .ant-list-vertical .ant-list-item-main {
+ min-width: 220px;
+ }
+ .ant-list-vertical .ant-list-item-extra {
+ margin-left: 0;
+ }
+}
+.ant-mention-wrapper {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ display: inline-block;
+ width: 100%;
+ vertical-align: middle;
+}
+.ant-mention-wrapper .ant-mention-editor {
+ position: relative;
+ display: inline-block;
+ padding: 4px 11px;
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ color: #54657e;
+ background-color: #fff;
+ background-image: none;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ transition: all .3s;
+ min-height: 32px;
+ height: auto;
+ line-height: 1.5;
+ padding: 0;
+ display: block;
+}
+.ant-mention-wrapper .ant-mention-editor::-moz-placeholder {
+ color: #bfbfbf;
+ opacity: 1;
+}
+.ant-mention-wrapper .ant-mention-editor:-ms-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-mention-wrapper .ant-mention-editor::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-mention-wrapper .ant-mention-editor:hover {
+ border-color: #40a9ff;
+}
+.ant-mention-wrapper .ant-mention-editor:focus {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-mention-wrapper .ant-mention-editor-disabled {
+ background-color: #f5f5f5;
+ opacity: 1;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-mention-wrapper .ant-mention-editor-disabled:hover {
+ border-color: #e6d8d8;
+}
+textarea.ant-mention-wrapper .ant-mention-editor {
+ max-width: 100%;
+ height: auto;
+ vertical-align: bottom;
+ transition: all .3s, height 0s;
+ min-height: 32px;
+}
+.ant-mention-wrapper .ant-mention-editor-lg {
+ padding: 6px 11px;
+ height: 40px;
+ font-size: 16px;
+}
+.ant-mention-wrapper .ant-mention-editor-sm {
+ padding: 1px 7px;
+ height: 24px;
+}
+.ant-mention-wrapper .ant-mention-editor-wrapper {
+ overflow-y: auto;
+ height: auto;
+}
+.ant-mention-wrapper.ant-mention-active:not(.disabled) .ant-mention-editor {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-mention-wrapper.disabled .ant-mention-editor {
+ background-color: #f5f5f5;
+ opacity: 1;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-mention-wrapper.disabled .ant-mention-editor:hover {
+ border-color: #e6d8d8;
+}
+.ant-mention-wrapper .public-DraftEditorPlaceholder-root {
+ position: absolute;
+ pointer-events: none;
+}
+.ant-mention-wrapper .public-DraftEditorPlaceholder-root .public-DraftEditorPlaceholder-inner {
+ color: #bfbfbf;
+ opacity: 1;
+ outline: none;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ height: auto;
+ padding: 5px 11px;
+}
+.ant-mention-wrapper .DraftEditor-editorContainer .public-DraftEditor-content {
+ height: auto;
+ padding: 5px 11px;
+}
+.ant-mention-dropdown {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ margin-top: 1.5em;
+ max-height: 250px;
+ min-width: 120px;
+ background-color: #fff;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ border-radius: 4px;
+ z-index: 1050;
+ left: -9999px;
+ top: -9999px;
+ position: absolute;
+ outline: none;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+.ant-mention-dropdown-placement-top {
+ margin-top: -0.1em;
+}
+.ant-mention-dropdown-notfound.ant-mention-dropdown-item {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-mention-dropdown-notfound.ant-mention-dropdown-item .anticon-loading {
+ color: #1890ff;
+ text-align: center;
+ display: block;
+}
+.ant-mention-dropdown-item {
+ position: relative;
+ display: block;
+ padding: 5px 12px;
+ line-height: 22px;
+ font-weight: normal;
+ color: #54657e;
+ white-space: nowrap;
+ cursor: pointer;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ transition: background 0.3s;
+}
+.ant-mention-dropdown-item:hover {
+ background-color: #e6f7ff;
+}
+.ant-mention-dropdown-item.focus,
+.ant-mention-dropdown-item-active {
+ background-color: #e6f7ff;
+}
+.ant-mention-dropdown-item-disabled {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+}
+.ant-mention-dropdown-item-disabled:hover {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #fff;
+ cursor: not-allowed;
+}
+.ant-mention-dropdown-item-selected,
+.ant-mention-dropdown-item-selected:hover {
+ background-color: #f5f5f5;
+ font-weight: bold;
+ color: #54657e;
+}
+.ant-mention-dropdown-item-divider {
+ height: 1px;
+ margin: 1px 0;
+ overflow: hidden;
+ background-color: #e8e8e8;
+ line-height: 0;
+}
+.ant-menu {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ outline: none;
+ margin-bottom: 0;
+ padding-left: 0;
+ list-style: none;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ color: #54657e;
+ background: #fff;
+ line-height: 0;
+ transition: background .3s, width .2s;
+ zoom: 1;
+}
+.ant-menu:before,
+.ant-menu:after {
+ content: " ";
+ display: table;
+}
+.ant-menu:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-menu:before,
+.ant-menu:after {
+ content: " ";
+ display: table;
+}
+.ant-menu:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-menu ul,
+.ant-menu ol {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.ant-menu-hidden {
+ display: none;
+}
+.ant-menu-item-group-title {
+ color: rgba(0, 0, 0, 0.45);
+ font-size: 14px;
+ line-height: 1.5;
+ padding: 8px 16px;
+ transition: all .3s;
+}
+.ant-menu-submenu,
+.ant-menu-submenu-inline {
+ transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-item:active,
+.ant-menu-submenu-title:active {
+ background: #e6f7ff;
+}
+.ant-menu-submenu .ant-menu-sub {
+ cursor: initial;
+ transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-item > a {
+ display: block;
+ color: #54657e;
+}
+.ant-menu-item > a:hover {
+ color: #3fa8eb;
+}
+.ant-menu-item > a:focus {
+ text-decoration: none;
+}
+.ant-menu-item > a:before {
+ position: absolute;
+ background-color: transparent;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ content: '';
+}
+.ant-menu-item-divider {
+ height: 1px;
+ overflow: hidden;
+ background-color: #e8e8e8;
+ line-height: 0;
+}
+.ant-menu-item:hover,
+.ant-menu-item-active,
+.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+.ant-menu-submenu-active,
+.ant-menu-submenu-title:hover {
+ color: #3fa8eb;
+}
+.ant-menu-horizontal .ant-menu-item,
+.ant-menu-horizontal .ant-menu-submenu {
+ margin-top: -1px;
+}
+.ant-menu-horizontal > .ant-menu-item:hover,
+.ant-menu-horizontal > .ant-menu-item-active,
+.ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-title:hover {
+ background-color: transparent;
+}
+.ant-menu-item-selected {
+ color: #3fa8eb;
+}
+.ant-menu-item-selected > a,
+.ant-menu-item-selected > a:hover {
+ color: #3fa8eb;
+}
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+ background-color: #e6f7ff;
+}
+.ant-menu-inline,
+.ant-menu-vertical,
+.ant-menu-vertical-left {
+ border-right: 1px solid #e8e8e8;
+}
+.ant-menu-vertical-right {
+ border-left: 1px solid #e8e8e8;
+}
+.ant-menu-vertical.ant-menu-sub,
+.ant-menu-vertical-left.ant-menu-sub,
+.ant-menu-vertical-right.ant-menu-sub {
+ border-right: 0;
+ padding: 0;
+ transform-origin: 0 0;
+}
+.ant-menu-vertical.ant-menu-sub .ant-menu-item,
+.ant-menu-vertical-left.ant-menu-sub .ant-menu-item,
+.ant-menu-vertical-right.ant-menu-sub .ant-menu-item {
+ border-right: 0;
+ margin-left: 0;
+ left: 0;
+}
+.ant-menu-vertical.ant-menu-sub .ant-menu-item:after,
+.ant-menu-vertical-left.ant-menu-sub .ant-menu-item:after,
+.ant-menu-vertical-right.ant-menu-sub .ant-menu-item:after {
+ border-right: 0;
+}
+.ant-menu-vertical.ant-menu-sub > .ant-menu-item,
+.ant-menu-vertical-left.ant-menu-sub > .ant-menu-item,
+.ant-menu-vertical-right.ant-menu-sub > .ant-menu-item,
+.ant-menu-vertical.ant-menu-sub > .ant-menu-submenu,
+.ant-menu-vertical-left.ant-menu-sub > .ant-menu-submenu,
+.ant-menu-vertical-right.ant-menu-sub > .ant-menu-submenu {
+ transform-origin: 0 0;
+}
+.ant-menu-horizontal.ant-menu-sub,
+.ant-menu-vertical.ant-menu-sub,
+.ant-menu-vertical-left.ant-menu-sub,
+.ant-menu-vertical-right.ant-menu-sub {
+ min-width: 160px;
+}
+.ant-menu-item,
+.ant-menu-submenu-title {
+ cursor: pointer;
+ margin: 0;
+ padding: 0 20px;
+ position: relative;
+ display: block;
+ white-space: nowrap;
+ transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-item .anticon,
+.ant-menu-submenu-title .anticon {
+ min-width: 14px;
+ margin-right: 10px;
+ transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-item .anticon + span,
+.ant-menu-submenu-title .anticon + span {
+ transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ opacity: 1;
+}
+.ant-menu > .ant-menu-item-divider {
+ height: 1px;
+ margin: 1px 0;
+ overflow: hidden;
+ padding: 0;
+ line-height: 0;
+ background-color: #e8e8e8;
+}
+.ant-menu-submenu-popup {
+ position: absolute;
+ border-radius: 4px;
+ z-index: 1050;
+}
+.ant-menu-submenu > .ant-menu {
+ background-color: #fff;
+ border-radius: 4px;
+}
+.ant-menu-submenu > .ant-menu-submenu-title:after {
+ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow {
+ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ position: absolute;
+ top: 50%;
+ right: 16px;
+ width: 10px;
+}
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
+ content: '';
+ position: absolute;
+ vertical-align: baseline;
+ background: #fff;
+ background-image: linear-gradient(to right, #54657e, #54657e);
+ width: 6px;
+ height: 1.5px;
+ border-radius: 2px;
+ transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
+ transform: rotate(45deg) translateY(-2px);
+}
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
+ transform: rotate(-45deg) translateY(2px);
+}
+.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before {
+ background: linear-gradient(to right, #3fa8eb, #3fa8eb);
+}
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
+ transform: rotate(-45deg) translateX(2px);
+}
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
+ transform: rotate(45deg) translateX(-2px);
+}
+.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow {
+ transform: translateY(-2px);
+}
+.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
+ transform: rotate(-45deg) translateX(-2px);
+}
+.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
+ transform: rotate(45deg) translateX(2px);
+}
+.ant-menu-vertical .ant-menu-submenu-selected,
+.ant-menu-vertical-left .ant-menu-submenu-selected,
+.ant-menu-vertical-right .ant-menu-submenu-selected {
+ color: #3fa8eb;
+}
+.ant-menu-vertical .ant-menu-submenu-selected > a,
+.ant-menu-vertical-left .ant-menu-submenu-selected > a,
+.ant-menu-vertical-right .ant-menu-submenu-selected > a {
+ color: #3fa8eb;
+}
+.ant-menu-horizontal {
+ border: 0;
+ border-bottom: 1px solid #e8e8e8;
+ box-shadow: none;
+ line-height: 46px;
+}
+.ant-menu-horizontal > .ant-menu-item,
+.ant-menu-horizontal > .ant-menu-submenu {
+ position: relative;
+ top: 1px;
+ float: left;
+ border-bottom: 2px solid transparent;
+}
+.ant-menu-horizontal > .ant-menu-item:hover,
+.ant-menu-horizontal > .ant-menu-submenu:hover,
+.ant-menu-horizontal > .ant-menu-item-active,
+.ant-menu-horizontal > .ant-menu-submenu-active,
+.ant-menu-horizontal > .ant-menu-item-open,
+.ant-menu-horizontal > .ant-menu-submenu-open,
+.ant-menu-horizontal > .ant-menu-item-selected,
+.ant-menu-horizontal > .ant-menu-submenu-selected {
+ border-bottom: 2px solid #3fa8eb;
+ color: #3fa8eb;
+}
+.ant-menu-horizontal > .ant-menu-item > a,
+.ant-menu-horizontal > .ant-menu-submenu > a {
+ display: block;
+ color: #54657e;
+}
+.ant-menu-horizontal > .ant-menu-item > a:hover,
+.ant-menu-horizontal > .ant-menu-submenu > a:hover {
+ color: #3fa8eb;
+}
+.ant-menu-horizontal:after {
+ content: "\20";
+ display: block;
+ height: 0;
+ clear: both;
+}
+.ant-menu-vertical .ant-menu-item,
+.ant-menu-vertical-left .ant-menu-item,
+.ant-menu-vertical-right .ant-menu-item,
+.ant-menu-inline .ant-menu-item {
+ position: relative;
+}
+.ant-menu-vertical .ant-menu-item:after,
+.ant-menu-vertical-left .ant-menu-item:after,
+.ant-menu-vertical-right .ant-menu-item:after,
+.ant-menu-inline .ant-menu-item:after {
+ content: "";
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 3px solid #3fa8eb;
+ transform: scaleY(0.0001);
+ opacity: 0;
+ transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.ant-menu-vertical .ant-menu-item,
+.ant-menu-vertical-left .ant-menu-item,
+.ant-menu-vertical-right .ant-menu-item,
+.ant-menu-inline .ant-menu-item,
+.ant-menu-vertical .ant-menu-submenu-title,
+.ant-menu-vertical-left .ant-menu-submenu-title,
+.ant-menu-vertical-right .ant-menu-submenu-title,
+.ant-menu-inline .ant-menu-submenu-title {
+ padding: 0 16px;
+ font-size: 14px;
+ line-height: 50px;
+ height: 50px;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.ant-menu-vertical .ant-menu-submenu,
+.ant-menu-vertical-left .ant-menu-submenu,
+.ant-menu-vertical-right .ant-menu-submenu,
+.ant-menu-inline .ant-menu-submenu {
+ padding-bottom: 0.01px;
+}
+.ant-menu-vertical .ant-menu-item:not(:last-child),
+.ant-menu-vertical-left .ant-menu-item:not(:last-child),
+.ant-menu-vertical-right .ant-menu-item:not(:last-child),
+.ant-menu-inline .ant-menu-item:not(:last-child) {
+ margin-bottom: 8px;
+}
+.ant-menu-vertical > .ant-menu-item,
+.ant-menu-vertical-left > .ant-menu-item,
+.ant-menu-vertical-right > .ant-menu-item,
+.ant-menu-inline > .ant-menu-item,
+.ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
+.ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title,
+.ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title,
+.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
+ line-height: 50px;
+ height: 50px;
+}
+.ant-menu-inline {
+ width: 100%;
+}
+.ant-menu-inline .ant-menu-selected:after,
+.ant-menu-inline .ant-menu-item-selected:after {
+ transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+ opacity: 1;
+ transform: scaleY(1);
+}
+.ant-menu-inline .ant-menu-item,
+.ant-menu-inline .ant-menu-submenu-title {
+ width: calc(100% + 1px);
+}
+.ant-menu-inline .ant-menu-submenu-title {
+ padding-right: 34px;
+}
+.ant-menu-inline-collapsed {
+ width: 80px;
+}
+.ant-menu-inline-collapsed > .ant-menu-item,
+.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
+.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
+ left: 0;
+ text-overflow: clip;
+ padding: 0 32px !important;
+}
+.ant-menu-inline-collapsed > .ant-menu-item .ant-menu-submenu-arrow,
+.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .ant-menu-submenu-arrow,
+.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow {
+ display: none;
+}
+.ant-menu-inline-collapsed > .ant-menu-item .anticon,
+.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .anticon,
+.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .anticon {
+ font-size: 16px;
+ line-height: 50px;
+ margin: 0;
+}
+.ant-menu-inline-collapsed > .ant-menu-item .anticon + span,
+.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .anticon + span,
+.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span {
+ max-width: 0;
+ display: inline-block;
+ opacity: 0;
+}
+.ant-menu-inline-collapsed-tooltip {
+ pointer-events: none;
+}
+.ant-menu-inline-collapsed-tooltip .anticon {
+ display: none;
+}
+.ant-menu-inline-collapsed-tooltip a {
+ color: rgba(255, 255, 255, 0.85);
+}
+.ant-menu-inline-collapsed .ant-menu-item-group-title {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding-left: 4px;
+ padding-right: 4px;
+}
+.ant-menu-item-group-list {
+ margin: 0;
+ padding: 0;
+}
+.ant-menu-item-group-list .ant-menu-item,
+.ant-menu-item-group-list .ant-menu-submenu-title {
+ padding: 0 16px 0 28px;
+}
+.ant-menu-root.ant-menu-vertical,
+.ant-menu-root.ant-menu-vertical-left,
+.ant-menu-root.ant-menu-vertical-right,
+.ant-menu-root.ant-menu-inline {
+ box-shadow: none;
+}
+.ant-menu-sub.ant-menu-inline {
+ padding: 0;
+ border: 0;
+ box-shadow: none;
+ border-radius: 0;
+}
+.ant-menu-sub.ant-menu-inline > .ant-menu-item,
+.ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
+ line-height: 50px;
+ height: 50px;
+ list-style-type: disc;
+ list-style-position: inside;
+}
+.ant-menu-sub.ant-menu-inline .ant-menu-item-group-title {
+ padding-left: 32px;
+}
+.ant-menu-item-disabled,
+.ant-menu-submenu-disabled {
+ color: rgba(0, 0, 0, 0.25) !important;
+ cursor: not-allowed;
+ background: none;
+ border-color: transparent !important;
+}
+.ant-menu-item-disabled > a,
+.ant-menu-submenu-disabled > a {
+ color: rgba(0, 0, 0, 0.25) !important;
+ pointer-events: none;
+}
+.ant-menu-item-disabled > .ant-menu-submenu-title,
+.ant-menu-submenu-disabled > .ant-menu-submenu-title {
+ color: rgba(0, 0, 0, 0.25) !important;
+ cursor: not-allowed;
+}
+.ant-menu-dark,
+.ant-menu-dark .ant-menu-sub {
+ color: #fff;
+ background: #2a3542;
+}
+.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow {
+ opacity: .45;
+ transition: all .3s;
+}
+.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
+ background: #fff;
+}
+.ant-menu-dark.ant-menu-submenu-popup {
+ background: transparent;
+}
+.ant-menu-dark .ant-menu-inline.ant-menu-sub {
+ background: #2a3542;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
+}
+.ant-menu-dark.ant-menu-horizontal {
+ border-bottom-color: #2a3542;
+}
+.ant-menu-dark.ant-menu-horizontal > .ant-menu-item,
+.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu {
+ border-color: #2a3542;
+ border-bottom: 0;
+}
+.ant-menu-dark .ant-menu-item,
+.ant-menu-dark .ant-menu-item-group-title,
+.ant-menu-dark .ant-menu-item > a {
+ color: #fff;
+}
+.ant-menu-dark.ant-menu-inline,
+.ant-menu-dark.ant-menu-vertical,
+.ant-menu-dark.ant-menu-vertical-left,
+.ant-menu-dark.ant-menu-vertical-right {
+ border-right: 0;
+}
+.ant-menu-dark.ant-menu-inline .ant-menu-item,
+.ant-menu-dark.ant-menu-vertical .ant-menu-item,
+.ant-menu-dark.ant-menu-vertical-left .ant-menu-item,
+.ant-menu-dark.ant-menu-vertical-right .ant-menu-item {
+ border-right: 0;
+ margin-left: 0;
+ left: 0;
+}
+.ant-menu-dark.ant-menu-inline .ant-menu-item:after,
+.ant-menu-dark.ant-menu-vertical .ant-menu-item:after,
+.ant-menu-dark.ant-menu-vertical-left .ant-menu-item:after,
+.ant-menu-dark.ant-menu-vertical-right .ant-menu-item:after {
+ border-right: 0;
+}
+.ant-menu-dark.ant-menu-inline .ant-menu-item,
+.ant-menu-dark.ant-menu-inline .ant-menu-submenu-title {
+ width: 100%;
+}
+.ant-menu-dark .ant-menu-item:hover,
+.ant-menu-dark .ant-menu-item-active,
+.ant-menu-dark .ant-menu-submenu-active,
+.ant-menu-dark .ant-menu-submenu-open,
+.ant-menu-dark .ant-menu-submenu-selected,
+.ant-menu-dark .ant-menu-submenu-title:hover {
+ background-color: transparent;
+ color: #3fa8eb;
+}
+.ant-menu-dark .ant-menu-item:hover > a,
+.ant-menu-dark .ant-menu-item-active > a,
+.ant-menu-dark .ant-menu-submenu-active > a,
+.ant-menu-dark .ant-menu-submenu-open > a,
+.ant-menu-dark .ant-menu-submenu-selected > a,
+.ant-menu-dark .ant-menu-submenu-title:hover > a {
+ color: #3fa8eb;
+}
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow {
+ opacity: 1;
+}
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before {
+ background: #3fa8eb;
+}
+.ant-menu-dark .ant-menu-item-selected {
+ border-right: 0;
+ color: #3fa8eb;
+}
+.ant-menu-dark .ant-menu-item-selected:after {
+ border-right: 0;
+}
+.ant-menu-dark .ant-menu-item-selected > a,
+.ant-menu-dark .ant-menu-item-selected > a:hover {
+ color: #3fa8eb;
+}
+.ant-menu.ant-menu-dark .ant-menu-item-selected,
+.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
+ background-color: #3d4a59;
+}
+.ant-menu-dark .ant-menu-item-disabled,
+.ant-menu-dark .ant-menu-submenu-disabled,
+.ant-menu-dark .ant-menu-item-disabled > a,
+.ant-menu-dark .ant-menu-submenu-disabled > a {
+ opacity: 0.8;
+ color: rgba(255, 255, 255, 0.35) !important;
+}
+.ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title,
+.ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title {
+ color: rgba(255, 255, 255, 0.35) !important;
+}
+.ant-message {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: fixed;
+ z-index: 1010;
+ width: 100%;
+ top: 16px;
+ left: 0;
+ pointer-events: none;
+}
+.ant-message-notice {
+ padding: 8px;
+ text-align: center;
+}
+.ant-message-notice:first-child {
+ margin-top: -8px;
+}
+.ant-message-notice-content {
+ padding: 10px 16px;
+ border-radius: 4px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ background: #fff;
+ display: inline-block;
+ pointer-events: all;
+}
+.ant-message-success .anticon {
+ color: #52c41a;
+}
+.ant-message-error .anticon {
+ color: #f5222d;
+}
+.ant-message-warning .anticon {
+ color: #faad14;
+}
+.ant-message-info .anticon,
+.ant-message-loading .anticon {
+ color: #1890ff;
+}
+.ant-message .anticon {
+ margin-right: 8px;
+ font-size: 16px;
+ top: 1px;
+ position: relative;
+}
+.ant-message-notice.move-up-leave.move-up-leave-active {
+ animation-name: MessageMoveOut;
+ overflow: hidden;
+ animation-duration: .3s;
+}
+@keyframes MessageMoveOut {
+ 0% {
+ opacity: 1;
+ max-height: 150px;
+ padding: 8px;
+ }
+ 100% {
+ opacity: 0;
+ max-height: 0;
+ padding: 0;
+ }
+}
+.ant-modal {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ width: auto;
+ margin: 0 auto;
+ top: 100px;
+ padding-bottom: 24px;
+}
+.ant-modal-wrap {
+ position: fixed;
+ overflow: auto;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ -webkit-overflow-scrolling: touch;
+ outline: 0;
+}
+.ant-modal-title {
+ margin: 0;
+ font-size: 16px;
+ line-height: 22px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.85);
+}
+.ant-modal-content {
+ position: relative;
+ background-color: #fff;
+ border: 0;
+ border-radius: 4px;
+ background-clip: padding-box;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.ant-modal-close {
+ cursor: pointer;
+ border: 0;
+ background: transparent;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 10;
+ font-weight: 700;
+ line-height: 1;
+ text-decoration: none;
+ transition: color .3s;
+ color: rgba(0, 0, 0, 0.45);
+ outline: 0;
+ padding: 0;
+}
+.ant-modal-close-x {
+ display: block;
+ font-style: normal;
+ vertical-align: baseline;
+ text-align: center;
+ text-transform: none;
+ text-rendering: auto;
+ width: 56px;
+ height: 56px;
+ line-height: 56px;
+ font-size: 16px;
+}
+.ant-modal-close-x:before {
+ content: "\e633";
+ display: block;
+ font-family: "anticon" !important;
+}
+.ant-modal-close:focus,
+.ant-modal-close:hover {
+ color: #444;
+ text-decoration: none;
+}
+.ant-modal-header {
+ padding: 16px 24px;
+ border-radius: 4px 4px 0 0;
+ background: #fff;
+ color: #54657e;
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-modal-body {
+ padding: 24px;
+ font-size: 14px;
+ line-height: 1.5;
+}
+.ant-modal-footer {
+ border-top: 1px solid #e8e8e8;
+ padding: 10px 16px;
+ text-align: right;
+ border-radius: 0 0 4px 4px;
+}
+.ant-modal-footer button + button {
+ margin-left: 8px;
+ margin-bottom: 0;
+}
+.ant-modal.zoom-enter,
+.ant-modal.zoom-appear {
+ animation-duration: 0.3s;
+ transform: none;
+ opacity: 0;
+}
+.ant-modal-mask {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ background-color: #373737;
+ background-color: rgba(0, 0, 0, 0.65);
+ height: 100%;
+ z-index: 1000;
+ filter: alpha(opacity=50);
+}
+.ant-modal-mask-hidden {
+ display: none;
+}
+.ant-modal-open {
+ overflow: hidden;
+}
+@media (max-width: 768px) {
+ .ant-modal {
+ width: auto !important;
+ margin: 10px;
+ }
+ .vertical-center-modal .ant-modal {
+ flex: 1;
+ }
+}
+.ant-confirm .ant-modal-header {
+ display: none;
+}
+.ant-confirm .ant-modal-close {
+ display: none;
+}
+.ant-confirm .ant-modal-body {
+ padding: 32px 32px 24px;
+}
+.ant-confirm-body-wrapper {
+ zoom: 1;
+}
+.ant-confirm-body-wrapper:before,
+.ant-confirm-body-wrapper:after {
+ content: " ";
+ display: table;
+}
+.ant-confirm-body-wrapper:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-confirm-body-wrapper:before,
+.ant-confirm-body-wrapper:after {
+ content: " ";
+ display: table;
+}
+.ant-confirm-body-wrapper:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-confirm-body .ant-confirm-title {
+ color: rgba(0, 0, 0, 0.85);
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 22px;
+}
+.ant-confirm-body .ant-confirm-content {
+ margin-left: 38px;
+ font-size: 14px;
+ color: #54657e;
+ margin-top: 8px;
+}
+.ant-confirm-body > .anticon {
+ font-size: 22px;
+ margin-right: 16px;
+ float: left;
+ min-height: 48px;
+}
+.ant-confirm .ant-confirm-btns {
+ margin-top: 24px;
+ float: right;
+}
+.ant-confirm .ant-confirm-btns button + button {
+ margin-left: 8px;
+ margin-bottom: 0;
+}
+.ant-confirm-error .ant-confirm-body > .anticon {
+ color: #f5222d;
+}
+.ant-confirm-warning .ant-confirm-body > .anticon,
+.ant-confirm-confirm .ant-confirm-body > .anticon {
+ color: #faad14;
+}
+.ant-confirm-info .ant-confirm-body > .anticon {
+ color: #1890ff;
+}
+.ant-confirm-success .ant-confirm-body > .anticon {
+ color: #52c41a;
+}
+.ant-notification {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: fixed;
+ z-index: 1010;
+ width: 384px;
+ max-width: calc(100vw - 32px);
+ margin-right: 24px;
+}
+.ant-notification-topLeft,
+.ant-notification-bottomLeft {
+ margin-left: 24px;
+ margin-right: 0;
+}
+.ant-notification-topLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
+.ant-notification-bottomLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
+.ant-notification-topLeft .ant-notification-fade-appear.ant-notification-fade-appear-active,
+.ant-notification-bottomLeft .ant-notification-fade-appear.ant-notification-fade-appear-active {
+ animation-name: NotificationLeftFadeIn;
+}
+.ant-notification-notice {
+ padding: 16px 24px;
+ border-radius: 4px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ background: #fff;
+ line-height: 1.5;
+ position: relative;
+ margin-bottom: 16px;
+ overflow: hidden;
+}
+.ant-notification-notice-message {
+ font-size: 16px;
+ color: rgba(0, 0, 0, 0.85);
+ margin-bottom: 8px;
+ line-height: 24px;
+ display: inline-block;
+}
+.ant-notification-notice-message-single-line-auto-margin {
+ width: calc(384px - 24px * 2 - 24px - 48px - 100%);
+ background-color: transparent;
+ pointer-events: none;
+ display: block;
+ max-width: 4px;
+}
+.ant-notification-notice-message-single-line-auto-margin:before {
+ content: '';
+ display: block;
+ padding-bottom: 100%;
+}
+.ant-notification-notice-description {
+ font-size: 14px;
+}
+.ant-notification-notice-closable .ant-notification-notice-message {
+ padding-right: 24px;
+}
+.ant-notification-notice-with-icon .ant-notification-notice-message {
+ font-size: 16px;
+ margin-left: 48px;
+ margin-bottom: 4px;
+}
+.ant-notification-notice-with-icon .ant-notification-notice-description {
+ margin-left: 48px;
+ font-size: 14px;
+}
+.ant-notification-notice-icon {
+ position: absolute;
+ font-size: 24px;
+ line-height: 24px;
+ margin-left: 4px;
+}
+.ant-notification-notice-icon-success {
+ color: #52c41a;
+}
+.ant-notification-notice-icon-info {
+ color: #1890ff;
+}
+.ant-notification-notice-icon-warning {
+ color: #faad14;
+}
+.ant-notification-notice-icon-error {
+ color: #f5222d;
+}
+.ant-notification-notice-close-x:after {
+ font-size: 14px;
+ content: "\e633";
+ font-family: "anticon";
+ cursor: pointer;
+}
+.ant-notification-notice-close {
+ position: absolute;
+ right: 22px;
+ top: 16px;
+ color: rgba(0, 0, 0, 0.45);
+ outline: none;
+}
+a.ant-notification-notice-close:focus {
+ text-decoration: none;
+}
+.ant-notification-notice-close:hover {
+ color: #404040;
+}
+.ant-notification-notice-btn {
+ float: right;
+ margin-top: 16px;
+}
+.ant-notification .notification-fade-effect {
+ animation-duration: 0.24s;
+ animation-fill-mode: both;
+ animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-notification-fade-enter,
+.ant-notification-fade-appear {
+ opacity: 0;
+ animation-duration: 0.24s;
+ animation-fill-mode: both;
+ animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+ animation-play-state: paused;
+}
+.ant-notification-fade-leave {
+ animation-duration: 0.24s;
+ animation-fill-mode: both;
+ animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+ animation-duration: 0.2s;
+ animation-play-state: paused;
+}
+.ant-notification-fade-enter.ant-notification-fade-enter-active,
+.ant-notification-fade-appear.ant-notification-fade-appear-active {
+ animation-name: NotificationFadeIn;
+ animation-play-state: running;
+}
+.ant-notification-fade-leave.ant-notification-fade-leave-active {
+ animation-name: NotificationFadeOut;
+ animation-play-state: running;
+}
+@keyframes NotificationFadeIn {
+ 0% {
+ opacity: 0;
+ left: 384px;
+ }
+ 100% {
+ left: 0;
+ opacity: 1;
+ }
+}
+@keyframes NotificationLeftFadeIn {
+ 0% {
+ opacity: 0;
+ right: 384px;
+ }
+ 100% {
+ right: 0;
+ opacity: 1;
+ }
+}
+@keyframes NotificationFadeOut {
+ 0% {
+ opacity: 1;
+ margin-bottom: 16px;
+ padding-top: 16px 24px;
+ padding-bottom: 16px 24px;
+ max-height: 150px;
+ }
+ 100% {
+ opacity: 0;
+ margin-bottom: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ max-height: 0;
+ }
+}
+.ant-pagination {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.ant-pagination ul,
+.ant-pagination ol {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.ant-pagination:after {
+ content: " ";
+ display: block;
+ height: 0;
+ clear: both;
+ overflow: hidden;
+ visibility: hidden;
+}
+.ant-pagination-total-text {
+ display: inline-block;
+ vertical-align: middle;
+ height: 32px;
+ line-height: 30px;
+ margin-right: 8px;
+}
+.ant-pagination-item {
+ cursor: pointer;
+ border-radius: 4px;
+ user-select: none;
+ min-width: 32px;
+ height: 32px;
+ line-height: 30px;
+ text-align: center;
+ list-style: none;
+ display: inline-block;
+ vertical-align: middle;
+ border: 1px solid #d9d9d9;
+ background-color: #fff;
+ margin-right: 8px;
+ font-family: Arial;
+ outline: 0;
+}
+.ant-pagination-item a {
+ text-decoration: none;
+ color: #54657e;
+ transition: none;
+ margin: 0 6px;
+}
+.ant-pagination-item:focus,
+.ant-pagination-item:hover {
+ transition: all .3s;
+ border-color: #1890ff;
+}
+.ant-pagination-item:focus a,
+.ant-pagination-item:hover a {
+ color: #1890ff;
+}
+.ant-pagination-item-active {
+ border-color: #1890ff;
+ font-weight: 500;
+}
+.ant-pagination-item-active a {
+ color: #1890ff;
+}
+.ant-pagination-item-active:focus,
+.ant-pagination-item-active:hover {
+ border-color: #40a9ff;
+}
+.ant-pagination-item-active:focus a,
+.ant-pagination-item-active:hover a {
+ color: #40a9ff;
+}
+.ant-pagination-jump-prev,
+.ant-pagination-jump-next {
+ outline: 0;
+}
+.ant-pagination-jump-prev:after,
+.ant-pagination-jump-next:after {
+ content: "•••";
+ display: block;
+ letter-spacing: 2px;
+ color: rgba(0, 0, 0, 0.25);
+ text-align: center;
+}
+.ant-pagination-jump-prev:focus:after,
+.ant-pagination-jump-next:focus:after,
+.ant-pagination-jump-prev:hover:after,
+.ant-pagination-jump-next:hover:after {
+ color: #1890ff;
+ display: inline-block;
+ font-size: 12px;
+ font-size: 8px \9;
+ transform: scale(0.66666667) rotate(0deg);
+ letter-spacing: -1px;
+ font-family: "anticon";
+}
+:root .ant-pagination-jump-prev:focus:after,
+:root .ant-pagination-jump-next:focus:after,
+:root .ant-pagination-jump-prev:hover:after,
+:root .ant-pagination-jump-next:hover:after {
+ font-size: 12px;
+}
+.ant-pagination-jump-prev:focus:after,
+.ant-pagination-jump-prev:hover:after {
+ content: "\e620\e620";
+}
+.ant-pagination-jump-next:focus:after,
+.ant-pagination-jump-next:hover:after {
+ content: "\e61f\e61f";
+}
+.ant-pagination-prev,
+.ant-pagination-jump-prev,
+.ant-pagination-jump-next {
+ margin-right: 8px;
+}
+.ant-pagination-prev,
+.ant-pagination-next,
+.ant-pagination-jump-prev,
+.ant-pagination-jump-next {
+ font-family: Arial;
+ cursor: pointer;
+ color: #54657e;
+ border-radius: 4px;
+ list-style: none;
+ min-width: 32px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ transition: all .3s;
+ display: inline-block;
+ vertical-align: middle;
+}
+.ant-pagination-prev,
+.ant-pagination-next {
+ outline: 0;
+}
+.ant-pagination-prev a,
+.ant-pagination-next a {
+ color: #54657e;
+ user-select: none;
+}
+.ant-pagination-prev:hover a,
+.ant-pagination-next:hover a {
+ border-color: #40a9ff;
+}
+.ant-pagination-prev .ant-pagination-item-link,
+.ant-pagination-next .ant-pagination-item-link {
+ border: 1px solid #d9d9d9;
+ background-color: #fff;
+ border-radius: 4px;
+ outline: none;
+ display: block;
+ transition: all .3s;
+}
+.ant-pagination-prev .ant-pagination-item-link:after,
+.ant-pagination-next .ant-pagination-item-link:after {
+ font-size: 12px;
+ display: block;
+ height: 30px;
+ font-family: "anticon";
+ text-align: center;
+ font-weight: 500;
+}
+.ant-pagination-prev:focus .ant-pagination-item-link,
+.ant-pagination-next:focus .ant-pagination-item-link,
+.ant-pagination-prev:hover .ant-pagination-item-link,
+.ant-pagination-next:hover .ant-pagination-item-link {
+ border-color: #1890ff;
+ color: #1890ff;
+}
+.ant-pagination-prev .ant-pagination-item-link:after {
+ content: "\e620";
+ display: block;
+}
+.ant-pagination-next .ant-pagination-item-link:after {
+ content: "\e61f";
+ display: block;
+}
+.ant-pagination-disabled,
+.ant-pagination-disabled:hover,
+.ant-pagination-disabled:focus {
+ cursor: not-allowed;
+}
+.ant-pagination-disabled a,
+.ant-pagination-disabled:hover a,
+.ant-pagination-disabled:focus a,
+.ant-pagination-disabled .ant-pagination-item-link,
+.ant-pagination-disabled:hover .ant-pagination-item-link,
+.ant-pagination-disabled:focus .ant-pagination-item-link {
+ border-color: #d9d9d9;
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+}
+.ant-pagination-slash {
+ margin: 0 10px 0 5px;
+}
+.ant-pagination-options {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 16px;
+}
+.ant-pagination-options-size-changer.ant-select {
+ display: inline-block;
+ margin-right: 8px;
+}
+.ant-pagination-options-quick-jumper {
+ display: inline-block;
+ vertical-align: top;
+ height: 32px;
+ line-height: 32px;
+}
+.ant-pagination-options-quick-jumper input {
+ position: relative;
+ display: inline-block;
+ padding: 4px 11px;
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ background-color: #fff;
+ background-image: none;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ transition: all .3s;
+ margin: 0 8px;
+ width: 50px;
+}
+.ant-pagination-options-quick-jumper input::-moz-placeholder {
+ color: #bfbfbf;
+ opacity: 1;
+}
+.ant-pagination-options-quick-jumper input:-ms-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-pagination-options-quick-jumper input::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-pagination-options-quick-jumper input:hover {
+ border-color: #40a9ff;
+}
+.ant-pagination-options-quick-jumper input:focus {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-pagination-options-quick-jumper input-disabled {
+ background-color: #f5f5f5;
+ opacity: 1;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-pagination-options-quick-jumper input-disabled:hover {
+ border-color: #e6d8d8;
+}
+textarea.ant-pagination-options-quick-jumper input {
+ max-width: 100%;
+ height: auto;
+ vertical-align: bottom;
+ transition: all .3s, height 0s;
+ min-height: 32px;
+}
+.ant-pagination-options-quick-jumper input-lg {
+ padding: 6px 11px;
+ height: 40px;
+ font-size: 16px;
+}
+.ant-pagination-options-quick-jumper input-sm {
+ padding: 1px 7px;
+ height: 24px;
+}
+.ant-pagination-simple .ant-pagination-prev,
+.ant-pagination-simple .ant-pagination-next {
+ height: 24px;
+ line-height: 24px;
+ vertical-align: top;
+}
+.ant-pagination-simple .ant-pagination-prev .ant-pagination-item-link,
+.ant-pagination-simple .ant-pagination-next .ant-pagination-item-link {
+ border: 0;
+ height: 24px;
+}
+.ant-pagination-simple .ant-pagination-prev .ant-pagination-item-link:after,
+.ant-pagination-simple .ant-pagination-next .ant-pagination-item-link:after {
+ height: 24px;
+ line-height: 24px;
+}
+.ant-pagination-simple .ant-pagination-simple-pager {
+ display: inline-block;
+ margin-right: 8px;
+ height: 24px;
+}
+.ant-pagination-simple .ant-pagination-simple-pager input {
+ margin-right: 8px;
+ box-sizing: border-box;
+ background-color: #fff;
+ border-radius: 4px;
+ border: 1px solid #d9d9d9;
+ outline: none;
+ padding: 0 6px;
+ height: 100%;
+ text-align: center;
+ transition: border-color 0.3s;
+}
+.ant-pagination-simple .ant-pagination-simple-pager input:hover {
+ border-color: #1890ff;
+}
+.ant-pagination.mini .ant-pagination-total-text,
+.ant-pagination.mini .ant-pagination-simple-pager {
+ height: 24px;
+ line-height: 24px;
+}
+.ant-pagination.mini .ant-pagination-item {
+ margin: 0;
+ min-width: 24px;
+ height: 24px;
+ line-height: 22px;
+}
+.ant-pagination.mini .ant-pagination-item:not(.ant-pagination-item-active) {
+ background: transparent;
+ border-color: transparent;
+}
+.ant-pagination.mini .ant-pagination-prev,
+.ant-pagination.mini .ant-pagination-next {
+ margin: 0;
+ min-width: 24px;
+ height: 24px;
+ line-height: 24px;
+}
+.ant-pagination.mini .ant-pagination-prev .ant-pagination-item-link,
+.ant-pagination.mini .ant-pagination-next .ant-pagination-item-link {
+ border-color: transparent;
+ background: transparent;
+}
+.ant-pagination.mini .ant-pagination-prev .ant-pagination-item-link:after,
+.ant-pagination.mini .ant-pagination-next .ant-pagination-item-link:after {
+ height: 24px;
+ line-height: 24px;
+}
+.ant-pagination.mini .ant-pagination-jump-prev,
+.ant-pagination.mini .ant-pagination-jump-next {
+ height: 24px;
+ line-height: 24px;
+ margin-right: 0;
+}
+.ant-pagination.mini .ant-pagination-options {
+ margin-left: 2px;
+}
+.ant-pagination.mini .ant-pagination-options-quick-jumper {
+ height: 24px;
+ line-height: 24px;
+}
+.ant-pagination.mini .ant-pagination-options-quick-jumper input {
+ padding: 1px 7px;
+ height: 24px;
+ width: 44px;
+}
+@media only screen and (max-width: 992px) {
+ .ant-pagination-item-after-jump-prev,
+ .ant-pagination-item-before-jump-next {
+ display: none;
+ }
+}
+@media only screen and (max-width: 576px) {
+ .ant-pagination-options {
+ display: none;
+ }
+}
+.ant-popover {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1030;
+ cursor: auto;
+ user-select: text;
+ white-space: normal;
+ font-weight: normal;
+ text-align: left;
+}
+.ant-popover:after {
+ content: "";
+ position: absolute;
+ background: rgba(255, 255, 255, 0.01);
+}
+.ant-popover-hidden {
+ display: none;
+}
+.ant-popover-placement-top,
+.ant-popover-placement-topLeft,
+.ant-popover-placement-topRight {
+ padding-bottom: 9px;
+}
+.ant-popover-placement-right,
+.ant-popover-placement-rightTop,
+.ant-popover-placement-rightBottom {
+ padding-left: 9px;
+}
+.ant-popover-placement-bottom,
+.ant-popover-placement-bottomLeft,
+.ant-popover-placement-bottomRight {
+ padding-top: 9px;
+}
+.ant-popover-placement-left,
+.ant-popover-placement-leftTop,
+.ant-popover-placement-leftBottom {
+ padding-right: 9px;
+}
+.ant-popover-inner {
+ background-color: #fff;
+ background-clip: padding-box;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.ant-popover-title {
+ min-width: 177px;
+ margin: 0;
+ padding: 5px 16px 4px;
+ min-height: 32px;
+ border-bottom: 1px solid #e8e8e8;
+ color: rgba(0, 0, 0, 0.85);
+ font-weight: 500;
+}
+.ant-popover-inner-content {
+ padding: 12px 16px;
+ color: #54657e;
+}
+.ant-popover-message {
+ padding: 4px 0 12px;
+ font-size: 14px;
+ color: #54657e;
+}
+.ant-popover-message > .anticon {
+ color: #faad14;
+ line-height: 1.6;
+ position: absolute;
+}
+.ant-popover-message-title {
+ padding-left: 22px;
+}
+.ant-popover-buttons {
+ text-align: right;
+ margin-bottom: 4px;
+}
+.ant-popover-buttons button {
+ margin-left: 8px;
+}
+.ant-popover-arrow {
+ background: #fff;
+ width: 7.07106781px;
+ height: 7.07106781px;
+ transform: rotate(45deg);
+ position: absolute;
+ display: block;
+ border-color: transparent;
+ border-style: solid;
+}
+.ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow {
+ bottom: 6px;
+ box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+}
+.ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow {
+ left: 50%;
+ transform: translateX(-50%) rotate(45deg);
+}
+.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow {
+ left: 16px;
+}
+.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow {
+ right: 16px;
+}
+.ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow {
+ left: 6px;
+ box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+}
+.ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow {
+ top: 50%;
+ transform: translateY(-50%) rotate(45deg);
+}
+.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow {
+ top: 12px;
+}
+.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow {
+ bottom: 12px;
+}
+.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow {
+ top: 6px;
+ box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.06);
+}
+.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow {
+ left: 50%;
+ transform: translateX(-50%) rotate(45deg);
+}
+.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow {
+ left: 16px;
+}
+.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow {
+ right: 16px;
+}
+.ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow {
+ right: 6px;
+ box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+}
+.ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow {
+ top: 50%;
+ transform: translateY(-50%) rotate(45deg);
+}
+.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow {
+ top: 12px;
+}
+.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow {
+ bottom: 12px;
+}
+.ant-progress {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+}
+.ant-progress-line {
+ width: 100%;
+ font-size: 14px;
+ position: relative;
+}
+.ant-progress-small.ant-progress-line,
+.ant-progress-small.ant-progress-line .ant-progress-text .anticon {
+ font-size: 12px;
+}
+.ant-progress-outer {
+ display: inline-block;
+ width: 100%;
+ margin-right: 0;
+ padding-right: 0;
+}
+.ant-progress-show-info .ant-progress-outer {
+ padding-right: calc(2em + 8px);
+ margin-right: calc(-2em - 8px);
+}
+.ant-progress-inner {
+ display: inline-block;
+ width: 100%;
+ background-color: #f5f5f5;
+ border-radius: 100px;
+ vertical-align: middle;
+ position: relative;
+}
+.ant-progress-circle-trail {
+ stroke: #f5f5f5;
+}
+.ant-progress-circle-path {
+ stroke: #1890ff;
+ animation: ant-progress-appear 0.3s;
+}
+.ant-progress-success-bg,
+.ant-progress-bg {
+ border-radius: 100px;
+ background-color: #1890ff;
+ transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+ position: relative;
+}
+.ant-progress-success-bg {
+ background-color: #52c41a;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.ant-progress-text {
+ word-break: normal;
+ width: 2em;
+ text-align: left;
+ font-size: 1em;
+ margin-left: 8px;
+ vertical-align: middle;
+ display: inline-block;
+ color: rgba(0, 0, 0, 0.45);
+ line-height: 1;
+}
+.ant-progress-text .anticon {
+ font-size: 14px;
+}
+.ant-progress-status-active .ant-progress-bg:before {
+ content: "";
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: #fff;
+ border-radius: 10px;
+ animation: ant-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
+}
+.ant-progress-status-exception .ant-progress-bg {
+ background-color: #f5222d;
+}
+.ant-progress-status-exception .ant-progress-text {
+ color: #f5222d;
+}
+.ant-progress-status-exception .ant-progress-circle-path {
+ stroke: #f5222d;
+}
+.ant-progress-status-success .ant-progress-bg {
+ background-color: #52c41a;
+}
+.ant-progress-status-success .ant-progress-text {
+ color: #52c41a;
+}
+.ant-progress-status-success .ant-progress-circle-path {
+ stroke: #52c41a;
+}
+.ant-progress-circle .ant-progress-inner {
+ position: relative;
+ line-height: 1;
+ background-color: transparent;
+}
+.ant-progress-circle .ant-progress-text {
+ display: block;
+ position: absolute;
+ width: 100%;
+ text-align: center;
+ line-height: 1;
+ top: 50%;
+ transform: translateY(-50%);
+ left: 0;
+ margin: 0;
+ color: #54657e;
+}
+.ant-progress-circle .ant-progress-text .anticon {
+ font-size: 1.16666667em;
+}
+.ant-progress-circle.ant-progress-status-exception .ant-progress-text {
+ color: #f5222d;
+}
+.ant-progress-circle.ant-progress-status-success .ant-progress-text {
+ color: #52c41a;
+}
+@keyframes ant-progress-active {
+ 0% {
+ opacity: 0.1;
+ width: 0;
+ }
+ 20% {
+ opacity: 0.5;
+ width: 0;
+ }
+ 100% {
+ opacity: 0;
+ width: 100%;
+ }
+}
+.ant-radio-group {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+ line-height: unset;
+}
+.ant-radio-wrapper {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+ position: relative;
+ white-space: nowrap;
+ margin-right: 8px;
+ cursor: pointer;
+}
+.ant-radio {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ white-space: nowrap;
+ outline: none;
+ display: inline-block;
+ position: relative;
+ line-height: 1;
+ vertical-align: text-bottom;
+ cursor: pointer;
+}
+.ant-radio-wrapper:hover .ant-radio .ant-radio-inner,
+.ant-radio:hover .ant-radio-inner,
+.ant-radio-focused .ant-radio-inner {
+ border-color: #1890ff;
+}
+.ant-radio-checked:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ border: 1px solid #1890ff;
+ content: '';
+ animation: antRadioEffect 0.36s ease-in-out;
+ animation-fill-mode: both;
+ visibility: hidden;
+}
+.ant-radio:hover:after,
+.ant-radio-wrapper:hover .ant-radio:after {
+ visibility: visible;
+}
+.ant-radio-inner {
+ position: relative;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 16px;
+ height: 16px;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 100px;
+ border-color: #d9d9d9;
+ background-color: #fff;
+ transition: all 0.3s;
+}
+.ant-radio-inner:after {
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ left: 3px;
+ top: 3px;
+ border-radius: 4px;
+ display: table;
+ border-top: 0;
+ border-left: 0;
+ content: ' ';
+ background-color: #1890ff;
+ opacity: 0;
+ transform: scale(0);
+ transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.ant-radio-input {
+ position: absolute;
+ left: 0;
+ z-index: 1;
+ cursor: pointer;
+ opacity: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+}
+.ant-radio-checked .ant-radio-inner {
+ border-color: #1890ff;
+}
+.ant-radio-checked .ant-radio-inner:after {
+ transform: scale(0.875);
+ opacity: 1;
+ transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.ant-radio-disabled .ant-radio-inner {
+ border-color: #d9d9d9 !important;
+ background-color: #f5f5f5;
+}
+.ant-radio-disabled .ant-radio-inner:after {
+ background-color: #ccc;
+}
+.ant-radio-disabled .ant-radio-input {
+ cursor: not-allowed;
+}
+.ant-radio-disabled + span {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+}
+span.ant-radio + * {
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.ant-radio-button-wrapper {
+ margin: 0;
+ height: 32px;
+ line-height: 30px;
+ color: #54657e;
+ display: inline-block;
+ transition: all 0.3s ease;
+ cursor: pointer;
+ border: 1px solid #d9d9d9;
+ border-left: 0;
+ border-top-width: 1.02px;
+ background: #fff;
+ padding: 0 15px;
+ position: relative;
+}
+.ant-radio-button-wrapper a {
+ color: #54657e;
+}
+.ant-radio-button-wrapper > .ant-radio-button {
+ margin-left: 0;
+ display: block;
+ width: 0;
+ height: 0;
+}
+.ant-radio-group-large .ant-radio-button-wrapper {
+ height: 40px;
+ line-height: 38px;
+ font-size: 16px;
+}
+.ant-radio-group-small .ant-radio-button-wrapper {
+ height: 24px;
+ line-height: 22px;
+ padding: 0 7px;
+}
+.ant-radio-button-wrapper:not(:first-child)::before {
+ content: "";
+ display: block;
+ top: 0;
+ left: -1px;
+ width: 1px;
+ height: 100%;
+ position: absolute;
+ background-color: #d9d9d9;
+}
+.ant-radio-button-wrapper:first-child {
+ border-radius: 4px 0 0 4px;
+ border-left: 1px solid #d9d9d9;
+}
+.ant-radio-button-wrapper:last-child {
+ border-radius: 0 4px 4px 0;
+}
+.ant-radio-button-wrapper:first-child:last-child {
+ border-radius: 4px;
+}
+.ant-radio-button-wrapper:hover,
+.ant-radio-button-wrapper-focused {
+ color: #1890ff;
+ position: relative;
+}
+.ant-radio-button-wrapper .ant-radio-inner,
+.ant-radio-button-wrapper input[type="checkbox"],
+.ant-radio-button-wrapper input[type="radio"] {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+.ant-radio-button-wrapper-checked {
+ background: #fff;
+ border-color: #1890ff;
+ color: #1890ff;
+ box-shadow: -1px 0 0 0 #1890ff;
+ z-index: 1;
+}
+.ant-radio-button-wrapper-checked::before {
+ background-color: #1890ff !important;
+ opacity: 0.1;
+}
+.ant-radio-button-wrapper-checked:first-child {
+ border-color: #1890ff;
+ box-shadow: none !important;
+}
+.ant-radio-button-wrapper-checked:hover {
+ border-color: #40a9ff;
+ box-shadow: -1px 0 0 0 #40a9ff;
+ color: #40a9ff;
+}
+.ant-radio-button-wrapper-checked:active {
+ border-color: #096dd9;
+ box-shadow: -1px 0 0 0 #096dd9;
+ color: #096dd9;
+}
+.ant-radio-button-wrapper-disabled {
+ border-color: #d9d9d9;
+ background-color: #f5f5f5;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-radio-button-wrapper-disabled:first-child,
+.ant-radio-button-wrapper-disabled:hover {
+ border-color: #d9d9d9;
+ background-color: #f5f5f5;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-radio-button-wrapper-disabled:first-child {
+ border-left-color: #d9d9d9;
+}
+.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
+ color: #fff;
+ background-color: #e6e6e6;
+ border-color: #d9d9d9;
+ box-shadow: none;
+}
+@keyframes antRadioEffect {
+ 0% {
+ transform: scale(1);
+ opacity: 0.5;
+ }
+ 100% {
+ transform: scale(1.6);
+ opacity: 0;
+ }
+}
+.ant-rate {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ line-height: unset;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ font-size: 20px;
+ display: inline-block;
+ color: #fadb14;
+ outline: none;
+}
+.ant-rate-disabled .ant-rate-star {
+ cursor: not-allowed;
+}
+.ant-rate-disabled .ant-rate-star:hover {
+ transform: scale(1);
+}
+.ant-rate-star {
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+ margin-right: 8px;
+ position: relative;
+ transition: all .3s;
+ color: inherit;
+ cursor: pointer;
+}
+.ant-rate-star-first,
+.ant-rate-star-second {
+ user-select: none;
+ transition: all .3s;
+ color: #e8e8e8;
+}
+.ant-rate-star-focused,
+.ant-rate-star:hover {
+ transform: scale(1.1);
+}
+.ant-rate-star-first {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ opacity: 0;
+}
+.ant-rate-star-half .ant-rate-star-first,
+.ant-rate-star-half .ant-rate-star-second {
+ opacity: 1;
+}
+.ant-rate-star-half .ant-rate-star-first,
+.ant-rate-star-full .ant-rate-star-second {
+ color: inherit;
+}
+.ant-rate-text {
+ margin-left: 8px;
+ display: inline-block;
+ font-size: 14px;
+}
+.ant-select {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+ position: relative;
+}
+.ant-select ul,
+.ant-select ol {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.ant-select > ul > li > a {
+ padding: 0;
+ background-color: #fff;
+}
+.ant-select-arrow {
+ display: inline-block;
+ font-style: normal;
+ vertical-align: baseline;
+ text-align: center;
+ text-transform: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ position: absolute;
+ top: 50%;
+ right: 11px;
+ line-height: 1;
+ margin-top: -6px;
+ transform-origin: 50% 50%;
+ color: rgba(0, 0, 0, 0.25);
+ font-size: 12px;
+}
+.ant-select-arrow:before {
+ display: block;
+ font-family: "anticon" !important;
+}
+.ant-select-arrow * {
+ display: none;
+}
+.ant-select-arrow:before {
+ content: '\e61d';
+ transition: transform .3s;
+}
+.ant-select-selection {
+ outline: none;
+ user-select: none;
+ box-sizing: border-box;
+ display: block;
+ background-color: #fff;
+ border-radius: 4px;
+ border: 1px solid #d9d9d9;
+ border-top-width: 1.02px;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-select-selection:hover {
+ border-color: #40a9ff;
+}
+.ant-select-focused .ant-select-selection,
+.ant-select-selection:focus,
+.ant-select-selection:active {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-select-selection__clear {
+ display: inline-block;
+ font-style: normal;
+ vertical-align: baseline;
+ text-align: center;
+ text-transform: none;
+ text-rendering: auto;
+ opacity: 0;
+ position: absolute;
+ right: 11px;
+ z-index: 1;
+ background: #fff;
+ top: 50%;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.25);
+ width: 12px;
+ height: 12px;
+ margin-top: -6px;
+ line-height: 12px;
+ cursor: pointer;
+ transition: color 0.3s ease, opacity 0.15s ease;
+}
+.ant-select-selection__clear:before {
+ display: block;
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e62e";
+}
+.ant-select-selection__clear:hover {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-select-selection:hover .ant-select-selection__clear {
+ opacity: 1;
+}
+.ant-select-selection-selected-value {
+ float: left;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 100%;
+ padding-right: 20px;
+}
+.ant-select-disabled {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-select-disabled .ant-select-selection {
+ background: #f5f5f5;
+ cursor: not-allowed;
+}
+.ant-select-disabled .ant-select-selection:hover,
+.ant-select-disabled .ant-select-selection:focus,
+.ant-select-disabled .ant-select-selection:active {
+ border-color: #d9d9d9;
+ box-shadow: none;
+}
+.ant-select-disabled .ant-select-selection__clear {
+ display: none;
+ visibility: hidden;
+ pointer-events: none;
+}
+.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice {
+ background: #f5f5f5;
+ color: #aaa;
+ padding-right: 10px;
+}
+.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice__remove {
+ display: none;
+}
+.ant-select-selection--single {
+ height: 32px;
+ position: relative;
+ cursor: pointer;
+}
+.ant-select-selection__rendered {
+ display: block;
+ margin-left: 11px;
+ margin-right: 11px;
+ position: relative;
+ line-height: 30px;
+}
+.ant-select-selection__rendered:after {
+ content: '.';
+ visibility: hidden;
+ pointer-events: none;
+ display: inline-block;
+ width: 0;
+}
+.ant-select-lg {
+ font-size: 16px;
+}
+.ant-select-lg .ant-select-selection--single {
+ height: 40px;
+}
+.ant-select-lg .ant-select-selection__rendered {
+ line-height: 38px;
+}
+.ant-select-lg .ant-select-selection--multiple {
+ min-height: 40px;
+}
+.ant-select-lg .ant-select-selection--multiple .ant-select-selection__rendered li {
+ height: 32px;
+ line-height: 32px;
+}
+.ant-select-lg .ant-select-selection--multiple .ant-select-selection__clear {
+ top: 20px;
+}
+.ant-select-sm .ant-select-selection--single {
+ height: 24px;
+}
+.ant-select-sm .ant-select-selection__rendered {
+ line-height: 22px;
+ margin: 0 7px;
+}
+.ant-select-sm .ant-select-selection--multiple {
+ min-height: 24px;
+}
+.ant-select-sm .ant-select-selection--multiple .ant-select-selection__rendered li {
+ height: 16px;
+ line-height: 14px;
+}
+.ant-select-sm .ant-select-selection--multiple .ant-select-selection__clear {
+ top: 12px;
+}
+.ant-select-sm .ant-select-selection__clear,
+.ant-select-sm .ant-select-arrow {
+ right: 8px;
+}
+.ant-select-disabled .ant-select-selection__choice__remove {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: default;
+}
+.ant-select-disabled .ant-select-selection__choice__remove:hover {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-select-search__field__wrap {
+ display: inline-block;
+ position: relative;
+}
+.ant-select-selection__placeholder,
+.ant-select-search__field__placeholder {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 9px;
+ color: #bfbfbf;
+ line-height: 20px;
+ height: 20px;
+ max-width: 100%;
+ margin-top: -10px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: left;
+}
+.ant-select-search__field__placeholder {
+ left: 12px;
+}
+.ant-select-search__field__mirror {
+ position: absolute;
+ top: 0;
+ left: -9999px;
+ white-space: pre;
+ pointer-events: none;
+}
+.ant-select-search--inline {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+}
+.ant-select-search--inline .ant-select-search__field__wrap {
+ width: 100%;
+ height: 100%;
+}
+.ant-select-search--inline .ant-select-search__field {
+ border-width: 0;
+ font-size: 100%;
+ height: 100%;
+ width: 100%;
+ background: transparent;
+ outline: 0;
+ border-radius: 4px;
+ line-height: 1;
+}
+.ant-select-search--inline > i {
+ float: right;
+}
+.ant-select-selection--multiple {
+ min-height: 32px;
+ cursor: text;
+ padding-bottom: 3px;
+ zoom: 1;
+}
+.ant-select-selection--multiple:before,
+.ant-select-selection--multiple:after {
+ content: " ";
+ display: table;
+}
+.ant-select-selection--multiple:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-select-selection--multiple:before,
+.ant-select-selection--multiple:after {
+ content: " ";
+ display: table;
+}
+.ant-select-selection--multiple:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-select-selection--multiple .ant-select-search--inline {
+ float: left;
+ position: static;
+ width: auto;
+ padding: 0;
+ max-width: 100%;
+}
+.ant-select-selection--multiple .ant-select-search--inline .ant-select-search__field {
+ max-width: 100%;
+ width: 0.75em;
+}
+.ant-select-selection--multiple .ant-select-selection__rendered {
+ margin-left: 5px;
+ margin-bottom: -3px;
+ height: auto;
+}
+.ant-select-selection--multiple .ant-select-selection__placeholder {
+ margin-left: 6px;
+}
+.ant-select-selection--multiple > ul > li,
+.ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
+ margin-top: 3px;
+ height: 24px;
+ line-height: 22px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice {
+ color: #54657e;
+ background-color: #fafafa;
+ border: 1px solid #e8e8e8;
+ border-radius: 2px;
+ cursor: default;
+ float: left;
+ margin-right: 4px;
+ max-width: 99%;
+ position: relative;
+ overflow: hidden;
+ transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ padding: 0 20px 0 10px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__disabled {
+ padding: 0 10px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__content {
+ display: inline-block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+ transition: margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove {
+ font-style: normal;
+ vertical-align: baseline;
+ text-align: center;
+ text-transform: none;
+ line-height: 1;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: rgba(0, 0, 0, 0.45);
+ line-height: inherit;
+ cursor: pointer;
+ font-weight: bold;
+ transition: all .3s;
+ display: inline-block;
+ font-size: 12px;
+ font-size: 10px \9;
+ transform: scale(0.83333333) rotate(0deg);
+ position: absolute;
+ right: 4px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove:before {
+ display: block;
+ font-family: "anticon" !important;
+}
+:root .ant-select-selection--multiple .ant-select-selection__choice__remove {
+ font-size: 12px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove:hover {
+ color: #404040;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove:before {
+ content: "\e633";
+}
+.ant-select-selection--multiple .ant-select-selection__clear {
+ top: 16px;
+}
+.ant-select-allow-clear .ant-select-selection--multiple .ant-select-selection__rendered {
+ margin-right: 20px;
+}
+.ant-select-open .ant-select-arrow:before {
+ transform: rotate(180deg);
+}
+.ant-select-open .ant-select-selection {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-select-combobox .ant-select-arrow {
+ display: none;
+}
+.ant-select-combobox .ant-select-search--inline {
+ height: 100%;
+ width: 100%;
+ float: none;
+}
+.ant-select-combobox .ant-select-search__field__wrap {
+ width: 100%;
+ height: 100%;
+}
+.ant-select-combobox .ant-select-search__field {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 1;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ box-shadow: none;
+}
+.ant-select-combobox.ant-select-allow-clear .ant-select-selection:hover .ant-select-selection__rendered {
+ margin-right: 20px;
+}
+.ant-select-dropdown {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ color: #54657e;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ background-color: #fff;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ border-radius: 4px;
+ box-sizing: border-box;
+ z-index: 1050;
+ left: -9999px;
+ top: -9999px;
+ position: absolute;
+ outline: none;
+ font-size: 14px;
+}
+.ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-bottomLeft,
+.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-bottomLeft {
+ animation-name: antSlideUpIn;
+}
+.ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-topLeft,
+.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-topLeft {
+ animation-name: antSlideDownIn;
+}
+.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-bottomLeft {
+ animation-name: antSlideUpOut;
+}
+.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-topLeft {
+ animation-name: antSlideDownOut;
+}
+.ant-select-dropdown-hidden {
+ display: none;
+}
+.ant-select-dropdown-menu {
+ outline: none;
+ margin-bottom: 0;
+ padding-left: 0;
+ list-style: none;
+ max-height: 250px;
+ overflow: auto;
+}
+.ant-select-dropdown-menu-item-group-list {
+ margin: 0;
+ padding: 0;
+}
+.ant-select-dropdown-menu-item-group-list > .ant-select-dropdown-menu-item {
+ padding-left: 20px;
+}
+.ant-select-dropdown-menu-item-group-title {
+ color: rgba(0, 0, 0, 0.45);
+ padding: 0 12px;
+ height: 32px;
+ line-height: 32px;
+ font-size: 12px;
+}
+.ant-select-dropdown-menu-item {
+ position: relative;
+ display: block;
+ padding: 5px 12px;
+ line-height: 22px;
+ font-weight: normal;
+ color: #54657e;
+ white-space: nowrap;
+ cursor: pointer;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ transition: background 0.3s ease;
+}
+.ant-select-dropdown-menu-item:hover {
+ background-color: #e6f7ff;
+}
+.ant-select-dropdown-menu-item:first-child {
+ border-radius: 4px 4px 0 0;
+}
+.ant-select-dropdown-menu-item:last-child {
+ border-radius: 0 0 4px 4px;
+}
+.ant-select-dropdown-menu-item-disabled {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+}
+.ant-select-dropdown-menu-item-disabled:hover {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #fff;
+ cursor: not-allowed;
+}
+.ant-select-dropdown-menu-item-selected,
+.ant-select-dropdown-menu-item-selected:hover {
+ background-color: #fafafa;
+ font-weight: 600;
+ color: #54657e;
+}
+.ant-select-dropdown-menu-item-active {
+ background-color: #e6f7ff;
+}
+.ant-select-dropdown-menu-item-divider {
+ height: 1px;
+ margin: 1px 0;
+ overflow: hidden;
+ background-color: #e8e8e8;
+ line-height: 0;
+}
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:after {
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e632";
+ color: transparent;
+ display: inline-block;
+ font-size: 12px;
+ font-size: 10px \9;
+ transform: scale(0.83333333) rotate(0deg);
+ transition: all 0.2s ease;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: 12px;
+ font-weight: bold;
+ text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
+}
+:root .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:after {
+ font-size: 12px;
+}
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover:after {
+ color: #ddd;
+}
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-disabled:after {
+ display: none;
+}
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:after,
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:hover:after {
+ color: #1890ff;
+ display: inline-block;
+}
+.ant-select-dropdown-container-open .ant-select-dropdown,
+.ant-select-dropdown-open .ant-select-dropdown {
+ display: block;
+}
+.ant-slider {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ margin: 14px 6px 10px;
+ padding: 4px 0;
+ height: 12px;
+ cursor: pointer;
+}
+.ant-slider-vertical {
+ width: 12px;
+ height: 100%;
+ margin: 6px 10px;
+ padding: 0 4px;
+}
+.ant-slider-vertical .ant-slider-rail {
+ height: 100%;
+ width: 4px;
+}
+.ant-slider-vertical .ant-slider-track {
+ width: 4px;
+}
+.ant-slider-vertical .ant-slider-handle {
+ margin-left: -5px;
+ margin-bottom: -7px;
+}
+.ant-slider-vertical .ant-slider-mark {
+ top: 0;
+ left: 12px;
+ width: 18px;
+ height: 100%;
+}
+.ant-slider-vertical .ant-slider-mark-text {
+ left: 4px;
+ white-space: nowrap;
+}
+.ant-slider-vertical .ant-slider-step {
+ width: 4px;
+ height: 100%;
+}
+.ant-slider-vertical .ant-slider-dot {
+ top: auto;
+ left: 2px;
+ margin-bottom: -4px;
+}
+.ant-slider-with-marks {
+ margin-bottom: 28px;
+}
+.ant-slider-rail {
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ border-radius: 2px;
+ background-color: #f5f5f5;
+ transition: background-color 0.3s;
+}
+.ant-slider-track {
+ position: absolute;
+ height: 4px;
+ border-radius: 4px;
+ background-color: #91d5ff;
+ transition: background-color 0.3s ease;
+}
+.ant-slider-handle {
+ position: absolute;
+ margin-left: -7px;
+ margin-top: -5px;
+ width: 14px;
+ height: 14px;
+ cursor: pointer;
+ border-radius: 50%;
+ border: solid 2px #91d5ff;
+ background-color: #fff;
+ transition: border-color 0.3s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+}
+.ant-slider-handle:focus {
+ border-color: #46a6ff;
+ box-shadow: 0 0 0 5px #8cc8ff;
+ outline: none;
+}
+.ant-slider-handle.ant-tooltip-open {
+ border-color: #1890ff;
+}
+.ant-slider:hover .ant-slider-rail {
+ background-color: #e1e1e1;
+}
+.ant-slider:hover .ant-slider-track {
+ background-color: #69c0ff;
+}
+.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
+ border-color: #69c0ff;
+}
+.ant-slider-mark {
+ position: absolute;
+ top: 14px;
+ left: 0;
+ width: 100%;
+ font-size: 14px;
+}
+.ant-slider-mark-text {
+ position: absolute;
+ display: inline-block;
+ vertical-align: middle;
+ text-align: center;
+ cursor: pointer;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-slider-mark-text-active {
+ color: #54657e;
+}
+.ant-slider-step {
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ background: transparent;
+}
+.ant-slider-dot {
+ position: absolute;
+ top: -2px;
+ margin-left: -4px;
+ width: 8px;
+ height: 8px;
+ border: 2px solid #e8e8e8;
+ background-color: #fff;
+ cursor: pointer;
+ border-radius: 50%;
+ vertical-align: middle;
+}
+.ant-slider-dot:first-child {
+ margin-left: -4px;
+}
+.ant-slider-dot:last-child {
+ margin-left: -4px;
+}
+.ant-slider-dot-active {
+ border-color: #8cc8ff;
+}
+.ant-slider-disabled {
+ cursor: not-allowed;
+}
+.ant-slider-disabled .ant-slider-track {
+ background-color: rgba(0, 0, 0, 0.25) !important;
+}
+.ant-slider-disabled .ant-slider-handle,
+.ant-slider-disabled .ant-slider-dot {
+ border-color: rgba(0, 0, 0, 0.25) !important;
+ background-color: #fff;
+ cursor: not-allowed;
+ box-shadow: none;
+}
+.ant-slider-disabled .ant-slider-mark-text,
+.ant-slider-disabled .ant-slider-dot {
+ cursor: not-allowed !important;
+}
+.ant-spin {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ color: #1890ff;
+ vertical-align: middle;
+ text-align: center;
+ opacity: 0;
+ position: absolute;
+ transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ display: none;
+}
+.ant-spin-spinning {
+ opacity: 1;
+ position: static;
+ display: inline-block;
+}
+.ant-spin-nested-loading {
+ position: relative;
+}
+.ant-spin-nested-loading > div > .ant-spin {
+ position: absolute;
+ height: 100%;
+ max-height: 320px;
+ width: 100%;
+ z-index: 4;
+}
+.ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -10px;
+}
+.ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
+ position: absolute;
+ top: 50%;
+ width: 100%;
+ padding-top: 5px;
+ text-shadow: 0 1px 2px #fff;
+}
+.ant-spin-nested-loading > div > .ant-spin.ant-spin-show-text .ant-spin-dot {
+ margin-top: -20px;
+}
+.ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-dot {
+ margin: -7px;
+}
+.ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-text {
+ padding-top: 2px;
+}
+.ant-spin-nested-loading > div > .ant-spin-sm.ant-spin-show-text .ant-spin-dot {
+ margin-top: -17px;
+}
+.ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-dot {
+ margin: -16px;
+}
+.ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-text {
+ padding-top: 11px;
+}
+.ant-spin-nested-loading > div > .ant-spin-lg.ant-spin-show-text .ant-spin-dot {
+ margin-top: -26px;
+}
+.ant-spin-container {
+ position: relative;
+ zoom: 1;
+}
+.ant-spin-container:before,
+.ant-spin-container:after {
+ content: " ";
+ display: table;
+}
+.ant-spin-container:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-spin-container:before,
+.ant-spin-container:after {
+ content: " ";
+ display: table;
+}
+.ant-spin-container:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-spin-blur {
+ overflow: hidden;
+ opacity: 0.7;
+ -webkit-filter: blur(0.5px);
+ filter: blur(0.5px);
+ /* autoprefixer: off */
+ filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false);
+ -webkit-transform: translateZ(0);
+}
+.ant-spin-blur:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: #fff;
+ opacity: 0.3;
+ transition: all .3s;
+ z-index: 10;
+}
+.ant-spin-tip {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-spin-dot {
+ position: relative;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+}
+.ant-spin-dot i {
+ width: 9px;
+ height: 9px;
+ border-radius: 100%;
+ background-color: #1890ff;
+ transform: scale(0.75);
+ display: block;
+ position: absolute;
+ opacity: 0.3;
+ animation: antSpinMove 1s infinite linear alternate;
+ transform-origin: 50% 50%;
+}
+.ant-spin-dot i:nth-child(1) {
+ left: 0;
+ top: 0;
+}
+.ant-spin-dot i:nth-child(2) {
+ right: 0;
+ top: 0;
+ animation-delay: 0.4s;
+}
+.ant-spin-dot i:nth-child(3) {
+ right: 0;
+ bottom: 0;
+ animation-delay: 0.8s;
+}
+.ant-spin-dot i:nth-child(4) {
+ left: 0;
+ bottom: 0;
+ animation-delay: 1.2s;
+}
+.ant-spin-dot-spin {
+ transform: rotate(45deg);
+ animation: antRotate 1.2s infinite linear;
+}
+.ant-spin-sm .ant-spin-dot {
+ width: 14px;
+ height: 14px;
+}
+.ant-spin-sm .ant-spin-dot i {
+ width: 6px;
+ height: 6px;
+}
+.ant-spin-lg .ant-spin-dot {
+ width: 32px;
+ height: 32px;
+}
+.ant-spin-lg .ant-spin-dot i {
+ width: 14px;
+ height: 14px;
+}
+.ant-spin.ant-spin-show-text .ant-spin-text {
+ display: block;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+ /* IE10+ */
+ .ant-spin-blur {
+ background: #fff;
+ opacity: 0.5;
+ }
+}
+@keyframes antSpinMove {
+ to {
+ opacity: 1;
+ }
+}
+@keyframes antRotate {
+ to {
+ transform: rotate(405deg);
+ }
+}
+.ant-steps {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ font-size: 0;
+ width: 100%;
+ display: flex;
+}
+.ant-steps-item {
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ flex: 1;
+ overflow: hidden;
+}
+.ant-steps-item:last-child {
+ flex: none;
+}
+.ant-steps-item:last-child .ant-steps-item-tail,
+.ant-steps-item:last-child .ant-steps-item-title:after {
+ display: none;
+}
+.ant-steps-item-icon,
+.ant-steps-item-content {
+ display: inline-block;
+ vertical-align: top;
+}
+.ant-steps-item-icon {
+ border: 1px solid rgba(0, 0, 0, 0.25);
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ border-radius: 32px;
+ font-size: 16px;
+ margin-right: 8px;
+ transition: background-color 0.3s, border-color 0.3s;
+ font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.ant-steps-item-icon > .ant-steps-icon {
+ line-height: 1;
+ top: -1px;
+ color: #1890ff;
+ position: relative;
+}
+.ant-steps-item-tail {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ top: 12px;
+ padding: 0 10px;
+}
+.ant-steps-item-tail:after {
+ content: '';
+ display: inline-block;
+ background: #e8e8e8;
+ height: 1px;
+ border-radius: 1px;
+ width: 100%;
+ transition: background .3s;
+}
+.ant-steps-item-title {
+ font-size: 16px;
+ color: #54657e;
+ display: inline-block;
+ padding-right: 16px;
+ position: relative;
+ line-height: 32px;
+}
+.ant-steps-item-title:after {
+ content: '';
+ height: 1px;
+ width: 9999px;
+ background: #e8e8e8;
+ display: block;
+ position: absolute;
+ top: 16px;
+ left: 100%;
+}
+.ant-steps-item-description {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-steps-item-wait .ant-steps-item-icon {
+ border-color: rgba(0, 0, 0, 0.25);
+ background-color: #fff;
+}
+.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+ background: rgba(0, 0, 0, 0.25);
+}
+.ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-title {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-title:after {
+ background-color: #e8e8e8;
+}
+.ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-description {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-steps-item-wait > .ant-steps-item-tail:after {
+ background-color: #e8e8e8;
+}
+.ant-steps-item-process .ant-steps-item-icon {
+ border-color: #1890ff;
+ background-color: #fff;
+}
+.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
+ color: #1890ff;
+}
+.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+ background: #1890ff;
+}
+.ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-title {
+ color: rgba(0, 0, 0, 0.85);
+}
+.ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-title:after {
+ background-color: #e8e8e8;
+}
+.ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-description {
+ color: #54657e;
+}
+.ant-steps-item-process > .ant-steps-item-tail:after {
+ background-color: #e8e8e8;
+}
+.ant-steps-item-process .ant-steps-item-icon {
+ background: #1890ff;
+}
+.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
+ color: #fff;
+}
+.ant-steps-item-process .ant-steps-item-title {
+ font-weight: 500;
+}
+.ant-steps-item-finish .ant-steps-item-icon {
+ border-color: #1890ff;
+ background-color: #fff;
+}
+.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
+ color: #1890ff;
+}
+.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+ background: #1890ff;
+}
+.ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-title {
+ color: #54657e;
+}
+.ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-title:after {
+ background-color: #1890ff;
+}
+.ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-description {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-steps-item-finish > .ant-steps-item-tail:after {
+ background-color: #1890ff;
+}
+.ant-steps-item-error .ant-steps-item-icon {
+ border-color: #f5222d;
+ background-color: #fff;
+}
+.ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon {
+ color: #f5222d;
+}
+.ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+ background: #f5222d;
+}
+.ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-title {
+ color: #f5222d;
+}
+.ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-title:after {
+ background-color: #e8e8e8;
+}
+.ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-description {
+ color: #f5222d;
+}
+.ant-steps-item-error > .ant-steps-item-tail:after {
+ background-color: #e8e8e8;
+}
+.ant-steps-item.ant-steps-next-error .ant-steps-item-title:after {
+ background: #f5222d;
+}
+.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {
+ margin-right: 16px;
+ white-space: nowrap;
+}
+.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:last-child {
+ margin-right: 0;
+}
+.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:last-child .ant-steps-item-title {
+ padding-right: 0;
+}
+.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-tail {
+ display: none;
+}
+.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-description {
+ max-width: 140px;
+}
+.ant-steps-item-custom .ant-steps-item-icon {
+ background: none;
+ border: 0;
+ width: auto;
+ height: auto;
+}
+.ant-steps-item-custom .ant-steps-item-icon > .ant-steps-icon {
+ font-size: 24px;
+ line-height: 32px;
+ top: 0;
+ left: 0.5px;
+ width: 32px;
+ height: 32px;
+}
+.ant-steps-item-custom.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
+ color: #1890ff;
+}
+.ant-steps-small.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {
+ margin-right: 12px;
+}
+.ant-steps-small.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:last-child {
+ margin-right: 0;
+}
+.ant-steps-small .ant-steps-item-icon {
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+ text-align: center;
+ border-radius: 24px;
+ font-size: 12px;
+}
+.ant-steps-small .ant-steps-item-title {
+ font-size: 14px;
+ line-height: 24px;
+ padding-right: 12px;
+}
+.ant-steps-small .ant-steps-item-title:after {
+ top: 12px;
+}
+.ant-steps-small .ant-steps-item-description {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-steps-small .ant-steps-item-tail {
+ top: 8px;
+ padding: 0 8px;
+}
+.ant-steps-small .ant-steps-item-custom .ant-steps-item-icon {
+ width: inherit;
+ height: inherit;
+ line-height: inherit;
+ border-radius: 0;
+ border: 0;
+ background: none;
+}
+.ant-steps-small .ant-steps-item-custom .ant-steps-item-icon > .ant-steps-icon {
+ font-size: 24px;
+ line-height: 24px;
+ transform: none;
+}
+.ant-steps-vertical {
+ display: block;
+}
+.ant-steps-vertical .ant-steps-item {
+ display: block;
+ overflow: visible;
+}
+.ant-steps-vertical .ant-steps-item-icon {
+ float: left;
+ margin-right: 16px;
+}
+.ant-steps-vertical .ant-steps-item-content {
+ min-height: 48px;
+ overflow: hidden;
+ display: block;
+}
+.ant-steps-vertical .ant-steps-item-title {
+ line-height: 32px;
+}
+.ant-steps-vertical .ant-steps-item-description {
+ padding-bottom: 12px;
+}
+.ant-steps-vertical > .ant-steps-item > .ant-steps-item-tail {
+ position: absolute;
+ left: 16px;
+ top: 0;
+ height: 100%;
+ width: 1px;
+ padding: 38px 0 6px;
+}
+.ant-steps-vertical > .ant-steps-item > .ant-steps-item-tail:after {
+ height: 100%;
+ width: 1px;
+}
+.ant-steps-vertical > .ant-steps-item:not(:last-child) > .ant-steps-item-tail {
+ display: block;
+}
+.ant-steps-vertical > .ant-steps-item > .ant-steps-item-content > .ant-steps-item-title:after {
+ display: none;
+}
+.ant-steps-vertical.ant-steps-small .ant-steps-item-tail {
+ position: absolute;
+ left: 12px;
+ top: 0;
+ padding: 30px 0 6px;
+}
+.ant-steps-vertical.ant-steps-small .ant-steps-item-title {
+ line-height: 24px;
+}
+@media (max-width: 480px) {
+ .ant-steps-horizontal.ant-steps-label-horizontal {
+ display: block;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item {
+ display: block;
+ overflow: visible;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-icon {
+ float: left;
+ margin-right: 16px;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-content {
+ min-height: 48px;
+ overflow: hidden;
+ display: block;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-title {
+ line-height: 32px;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-description {
+ padding-bottom: 12px;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-tail {
+ position: absolute;
+ left: 16px;
+ top: 0;
+ height: 100%;
+ width: 1px;
+ padding: 38px 0 6px;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-tail:after {
+ height: 100%;
+ width: 1px;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item:not(:last-child) > .ant-steps-item-tail {
+ display: block;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-content > .ant-steps-item-title:after {
+ display: none;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal.ant-steps-small .ant-steps-item-tail {
+ position: absolute;
+ left: 12px;
+ top: 0;
+ padding: 30px 0 6px;
+ }
+ .ant-steps-horizontal.ant-steps-label-horizontal.ant-steps-small .ant-steps-item-title {
+ line-height: 24px;
+ }
+}
+.ant-steps-label-vertical .ant-steps-item {
+ overflow: visible;
+}
+.ant-steps-label-vertical .ant-steps-item-tail {
+ padding: 0 24px;
+ margin-left: 48px;
+}
+.ant-steps-label-vertical .ant-steps-item-content {
+ display: block;
+ text-align: center;
+ margin-top: 8px;
+ width: 140px;
+}
+.ant-steps-label-vertical .ant-steps-item-icon {
+ display: inline-block;
+ margin-left: 36px;
+}
+.ant-steps-label-vertical .ant-steps-item-title {
+ padding-right: 0;
+}
+.ant-steps-label-vertical .ant-steps-item-title:after {
+ display: none;
+}
+.ant-steps-label-vertical .ant-steps-item-description {
+ text-align: left;
+}
+.ant-steps-dot .ant-steps-item-title {
+ line-height: 1.5;
+}
+.ant-steps-dot .ant-steps-item-tail {
+ width: 100%;
+ top: 2px;
+ margin: 0 0 0 70px;
+ padding: 0;
+}
+.ant-steps-dot .ant-steps-item-tail:after {
+ height: 3px;
+ width: calc(100% - 20px);
+ margin-left: 12px;
+}
+.ant-steps-dot .ant-steps-item:first-child .ant-steps-icon-dot {
+ left: 2px;
+}
+.ant-steps-dot .ant-steps-item-icon {
+ padding-right: 0;
+ width: 8px;
+ height: 8px;
+ line-height: 8px;
+ border: 0;
+ margin-left: 67px;
+ background: transparent;
+}
+.ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot {
+ float: left;
+ width: 100%;
+ height: 100%;
+ border-radius: 100px;
+ position: relative;
+ transition: all .3s;
+ /* expand hover area */
+}
+.ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot:after {
+ content: "";
+ background: rgba(0, 0, 0, 0.001);
+ width: 60px;
+ height: 32px;
+ position: absolute;
+ top: -12px;
+ left: -26px;
+}
+.ant-steps-dot .ant-steps-item-process .ant-steps-item-icon {
+ width: 10px;
+ height: 10px;
+ line-height: 10px;
+}
+.ant-steps-dot .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon-dot {
+ top: -1px;
+}
+.ant-steps-vertical.ant-steps-dot .ant-steps-item-icon {
+ margin-left: 0;
+ margin-top: 8px;
+}
+.ant-steps-vertical.ant-steps-dot .ant-steps-item-tail {
+ margin: 0;
+ left: -9px;
+ top: 2px;
+ padding: 22px 0 4px;
+}
+.ant-steps-vertical.ant-steps-dot .ant-steps-item:first-child .ant-steps-icon-dot {
+ left: 0;
+}
+.ant-steps-vertical.ant-steps-dot .ant-steps-item-process .ant-steps-icon-dot {
+ left: -2px;
+}
+.ant-switch {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ display: inline-block;
+ box-sizing: border-box;
+ height: 22px;
+ min-width: 44px;
+ line-height: 20px;
+ vertical-align: middle;
+ border-radius: 100px;
+ border: 1px solid transparent;
+ background-color: rgba(0, 0, 0, 0.25);
+ cursor: pointer;
+ transition: all 0.36s;
+ user-select: none;
+}
+.ant-switch-inner {
+ color: #fff;
+ font-size: 12px;
+ margin-left: 24px;
+ margin-right: 6px;
+ display: block;
+}
+.ant-switch:before,
+.ant-switch:after {
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ left: 1px;
+ top: 1px;
+ border-radius: 18px;
+ background-color: #fff;
+ content: " ";
+ cursor: pointer;
+ transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.ant-switch:after {
+ box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
+}
+.ant-switch:active:before,
+.ant-switch:active:after {
+ width: 24px;
+}
+.ant-switch:before {
+ content: "\e64d";
+ font-family: anticon;
+ animation: loadingCircle 1s infinite linear;
+ text-align: center;
+ background: transparent;
+ z-index: 1;
+ display: none;
+ font-size: 12px;
+}
+.ant-switch-loading:before {
+ display: inline-block;
+ color: #54657e;
+}
+.ant-switch-checked.ant-switch-loading:before {
+ color: #1890ff;
+}
+.ant-switch:focus {
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+ outline: 0;
+}
+.ant-switch:focus:hover {
+ box-shadow: none;
+}
+.ant-switch-small {
+ height: 16px;
+ min-width: 28px;
+ line-height: 14px;
+}
+.ant-switch-small .ant-switch-inner {
+ margin-left: 18px;
+ margin-right: 3px;
+ font-size: 12px;
+}
+.ant-switch-small:before,
+.ant-switch-small:after {
+ width: 12px;
+ height: 12px;
+}
+.ant-switch-small:active:before,
+.ant-switch-small:active:after {
+ width: 16px;
+}
+.ant-switch-small.ant-switch-checked:before,
+.ant-switch-small.ant-switch-checked:after {
+ left: 100%;
+ margin-left: -12.5px;
+}
+.ant-switch-small.ant-switch-checked .ant-switch-inner {
+ margin-left: 3px;
+ margin-right: 18px;
+}
+.ant-switch-small:active.ant-switch-checked:before,
+.ant-switch-small:active.ant-switch-checked:after {
+ margin-left: -16.5px;
+}
+.ant-switch-small.ant-switch-loading:before {
+ animation: AntSwitchSmallLoadingCircle 1s infinite linear;
+ font-weight: bold;
+}
+.ant-switch-checked {
+ background-color: #1890ff;
+}
+.ant-switch-checked .ant-switch-inner {
+ margin-left: 6px;
+ margin-right: 24px;
+}
+.ant-switch-checked:before,
+.ant-switch-checked:after {
+ left: 100%;
+ margin-left: -19px;
+}
+.ant-switch-checked:active:before,
+.ant-switch-checked:active:after {
+ margin-left: -25px;
+}
+.ant-switch-loading,
+.ant-switch-disabled {
+ pointer-events: none;
+ opacity: 0.4;
+}
+@keyframes AntSwitchSmallLoadingCircle {
+ 0% {
+ transform-origin: 50% 50%;
+ transform: rotate(0deg) scale(0.66667);
+ }
+ 100% {
+ transform-origin: 50% 50%;
+ transform: rotate(360deg) scale(0.66667);
+ }
+}
+.ant-table-wrapper {
+ zoom: 1;
+}
+.ant-table-wrapper:before,
+.ant-table-wrapper:after {
+ content: " ";
+ display: table;
+}
+.ant-table-wrapper:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-table-wrapper:before,
+.ant-table-wrapper:after {
+ content: " ";
+ display: table;
+}
+.ant-table-wrapper:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-table {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ border-radius: 4px 4px 0 0;
+ clear: both;
+}
+.ant-table-body {
+ transition: opacity .3s;
+}
+.ant-table table {
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+ text-align: left;
+ border-radius: 4px 4px 0 0;
+}
+.ant-table-thead > tr > th {
+ background: #fafafa;
+ transition: background .3s ease;
+ text-align: left;
+ color: rgba(0, 0, 0, 0.85);
+ font-weight: 500;
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-table-thead > tr > th:first-child {
+ border-top-left-radius: 4px;
+}
+.ant-table-thead > tr > th:last-child {
+ border-top-right-radius: 4px;
+}
+.ant-table-thead > tr > th[colspan] {
+ text-align: center;
+ border-bottom: 0;
+}
+.ant-table-thead > tr > th .anticon-filter,
+.ant-table-thead > tr > th .ant-table-filter-icon {
+ position: relative;
+ margin-left: 8px;
+ font-size: 14px;
+ cursor: pointer;
+ color: rgba(0, 0, 0, 0.45);
+ transition: all .3s;
+ width: 14px;
+ font-weight: normal;
+ vertical-align: text-bottom;
+}
+.ant-table-thead > tr > th .anticon-filter:hover,
+.ant-table-thead > tr > th .ant-table-filter-icon:hover {
+ color: #54657e;
+}
+.ant-table-thead > tr > th .ant-table-column-sorter + .anticon-filter {
+ margin-left: 4px;
+}
+.ant-table-thead > tr > th .ant-table-filter-selected.anticon-filter {
+ color: #1890ff;
+}
+.ant-table-thead > tr > th.ant-table-column-has-filters {
+ overflow: hidden;
+}
+.ant-table-tbody > tr > td {
+ border-bottom: 1px solid #e8e8e8;
+ transition: all .3s;
+}
+.ant-table-thead > tr,
+.ant-table-tbody > tr {
+ transition: all .3s;
+}
+.ant-table-thead > tr.ant-table-row-hover > td,
+.ant-table-tbody > tr.ant-table-row-hover > td,
+.ant-table-thead > tr:hover > td,
+.ant-table-tbody > tr:hover > td {
+ background: #e6f7ff;
+}
+.ant-table-thead > tr:hover {
+ background: none;
+}
+.ant-table-footer {
+ padding: 16px 16px;
+ background: #fafafa;
+ border-radius: 0 0 4px 4px;
+ position: relative;
+ border-top: 1px solid #e8e8e8;
+}
+.ant-table-footer:before {
+ content: '';
+ height: 1px;
+ background: #fafafa;
+ position: absolute;
+ top: -1px;
+ width: 100%;
+ left: 0;
+}
+.ant-table.ant-table-bordered .ant-table-footer {
+ border: 1px solid #e8e8e8;
+}
+.ant-table-title {
+ padding: 16px 0;
+ position: relative;
+ top: 1px;
+ border-radius: 4px 4px 0 0;
+}
+.ant-table.ant-table-bordered .ant-table-title {
+ border: 1px solid #e8e8e8;
+ padding-left: 16px;
+ padding-right: 16px;
+}
+.ant-table-title + .ant-table-content {
+ position: relative;
+ border-radius: 4px 4px 0 0;
+ overflow: hidden;
+}
+.ant-table-bordered .ant-table-title + .ant-table-content,
+.ant-table-bordered .ant-table-title + .ant-table-content table {
+ border-radius: 0;
+}
+.ant-table-without-column-header .ant-table-title + .ant-table-content,
+.ant-table-without-column-header table {
+ border-radius: 0;
+}
+.ant-table-tbody > tr.ant-table-row-selected td {
+ background: #fafafa;
+}
+.ant-table-thead > tr > th.ant-table-column-sort {
+ background: #f5f5f5;
+}
+.ant-table-thead > tr > th,
+.ant-table-tbody > tr > td {
+ padding: 16px 16px;
+ word-break: break-all;
+}
+.ant-table-thead > tr > th.ant-table-selection-column-custom {
+ padding-left: 16px;
+ padding-right: 0;
+}
+.ant-table-thead > tr > th.ant-table-selection-column,
+.ant-table-tbody > tr > td.ant-table-selection-column {
+ text-align: center;
+ min-width: 62px;
+ width: 62px;
+}
+.ant-table-thead > tr > th.ant-table-selection-column .ant-radio-wrapper,
+.ant-table-tbody > tr > td.ant-table-selection-column .ant-radio-wrapper {
+ margin-right: 0;
+}
+.ant-table-expand-icon-th,
+.ant-table-row-expand-icon-cell {
+ text-align: center;
+ min-width: 50px;
+ width: 50px;
+}
+.ant-table-header {
+ background: #fafafa;
+ overflow: hidden;
+}
+.ant-table-header table {
+ border-radius: 4px 4px 0 0;
+}
+.ant-table-loading {
+ position: relative;
+}
+.ant-table-loading .ant-table-body {
+ background: #fff;
+ opacity: 0.5;
+}
+.ant-table-loading .ant-table-spin-holder {
+ height: 20px;
+ line-height: 20px;
+ left: 50%;
+ top: 50%;
+ margin-left: -30px;
+ position: absolute;
+}
+.ant-table-loading .ant-table-with-pagination {
+ margin-top: -20px;
+}
+.ant-table-loading .ant-table-without-pagination {
+ margin-top: 10px;
+}
+.ant-table-column-sorter {
+ position: relative;
+ margin-left: 8px;
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ vertical-align: middle;
+ text-align: center;
+ font-weight: normal;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-table-column-sorter-up,
+.ant-table-column-sorter-down {
+ line-height: 6px;
+ display: block;
+ width: 14px;
+ height: 6px;
+ cursor: pointer;
+ position: relative;
+}
+.ant-table-column-sorter-up:hover .anticon,
+.ant-table-column-sorter-down:hover .anticon {
+ color: #69c0ff;
+}
+.ant-table-column-sorter-up.on .anticon-caret-up,
+.ant-table-column-sorter-down.on .anticon-caret-up,
+.ant-table-column-sorter-up.on .anticon-caret-down,
+.ant-table-column-sorter-down.on .anticon-caret-down {
+ color: #1890ff;
+}
+.ant-table-column-sorter-up:after,
+.ant-table-column-sorter-down:after {
+ position: absolute;
+ content: '';
+ height: 30px;
+ width: 14px;
+ left: 0;
+}
+.ant-table-column-sorter-up:after {
+ bottom: 0;
+}
+.ant-table-column-sorter-down:after {
+ top: 0;
+}
+.ant-table-column-sorter .anticon-caret-up,
+.ant-table-column-sorter .anticon-caret-down {
+ display: inline-block;
+ font-size: 12px;
+ font-size: 8px \9;
+ transform: scale(0.66666667) rotate(0deg);
+ line-height: 4px;
+ height: 4px;
+ transition: all .3s;
+}
+:root .ant-table-column-sorter .anticon-caret-up,
+:root .ant-table-column-sorter .anticon-caret-down {
+ font-size: 12px;
+}
+.ant-table-bordered .ant-table-header > table,
+.ant-table-bordered .ant-table-body > table,
+.ant-table-bordered .ant-table-fixed-left table,
+.ant-table-bordered .ant-table-fixed-right table {
+ border: 1px solid #e8e8e8;
+ border-right: 0;
+ border-bottom: 0;
+}
+.ant-table-bordered.ant-table-empty .ant-table-placeholder {
+ border-left: 1px solid #e8e8e8;
+ border-right: 1px solid #e8e8e8;
+}
+.ant-table-bordered.ant-table-fixed-header .ant-table-header > table {
+ border-bottom: 0;
+}
+.ant-table-bordered.ant-table-fixed-header .ant-table-body > table {
+ border-top: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+.ant-table-bordered.ant-table-fixed-header .ant-table-body-inner > table {
+ border-top: 0;
+}
+.ant-table-bordered.ant-table-fixed-header .ant-table-placeholder {
+ border: 0;
+}
+.ant-table-bordered .ant-table-thead > tr > th {
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-table-bordered .ant-table-thead > tr > th,
+.ant-table-bordered .ant-table-tbody > tr > td {
+ border-right: 1px solid #e8e8e8;
+}
+.ant-table-placeholder {
+ position: relative;
+ padding: 16px 16px;
+ background: #fff;
+ border-bottom: 1px solid #e8e8e8;
+ text-align: center;
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.45);
+ z-index: 1;
+}
+.ant-table-placeholder .anticon {
+ margin-right: 4px;
+}
+.ant-table-pagination.ant-pagination {
+ margin: 16px 0;
+ float: right;
+}
+.ant-table-filter-dropdown {
+ min-width: 96px;
+ margin-left: -8px;
+ background: #fff;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.ant-table-filter-dropdown .ant-dropdown-menu {
+ border: 0;
+ box-shadow: none;
+ border-radius: 4px 4px 0 0;
+}
+.ant-table-filter-dropdown .ant-dropdown-menu-without-submenu {
+ max-height: 400px;
+ overflow-x: hidden;
+}
+.ant-table-filter-dropdown .ant-dropdown-menu-item > label + span {
+ padding-right: 0;
+}
+.ant-table-filter-dropdown .ant-dropdown-menu-sub {
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.ant-table-filter-dropdown .ant-dropdown-menu .ant-dropdown-submenu-contain-selected .ant-dropdown-menu-submenu-title:after {
+ color: #1890ff;
+ font-weight: bold;
+ text-shadow: 0 0 2px #bae7ff;
+}
+.ant-table-filter-dropdown .ant-dropdown-menu-item {
+ overflow: hidden;
+}
+.ant-table-filter-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-item:last-child,
+.ant-table-filter-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title {
+ border-radius: 0;
+}
+.ant-table-filter-dropdown-btns {
+ overflow: hidden;
+ padding: 7px 8px;
+ border-top: 1px solid #e8e8e8;
+}
+.ant-table-filter-dropdown-link {
+ color: #1890ff;
+}
+.ant-table-filter-dropdown-link:hover {
+ color: #40a9ff;
+}
+.ant-table-filter-dropdown-link:active {
+ color: #096dd9;
+}
+.ant-table-filter-dropdown-link.confirm {
+ float: left;
+}
+.ant-table-filter-dropdown-link.clear {
+ float: right;
+}
+.ant-table-selection-select-all-custom {
+ margin-right: 4px !important;
+}
+.ant-table-selection .anticon-down {
+ color: rgba(0, 0, 0, 0.45);
+ transition: all .3s;
+}
+.ant-table-selection-menu {
+ min-width: 96px;
+ margin-top: 5px;
+ margin-left: -30px;
+ background: #fff;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.ant-table-selection-menu .ant-action-down {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-table-selection-down {
+ cursor: pointer;
+ padding: 0;
+ display: inline-block;
+ line-height: 1;
+}
+.ant-table-selection-down:hover .anticon-down {
+ color: #666;
+}
+.ant-table-row-expand-icon {
+ cursor: pointer;
+ display: inline-block;
+ width: 17px;
+ height: 17px;
+ text-align: center;
+ line-height: 14px;
+ border: 1px solid #e8e8e8;
+ user-select: none;
+ background: #fff;
+}
+.ant-table-row-expanded:after {
+ content: '-';
+}
+.ant-table-row-collapsed:after {
+ content: '+';
+}
+.ant-table-row-spaced {
+ visibility: hidden;
+}
+.ant-table-row-spaced:after {
+ content: '.';
+}
+.ant-table-row[class*="ant-table-row-level-0"] .ant-table-selection-column > span {
+ display: inline-block;
+}
+tr.ant-table-expanded-row,
+tr.ant-table-expanded-row:hover {
+ background: #fbfbfb;
+}
+.ant-table .ant-table-row-indent + .ant-table-row-expand-icon {
+ margin-right: 8px;
+}
+.ant-table-scroll {
+ overflow: auto;
+ overflow-x: hidden;
+}
+.ant-table-scroll table {
+ width: auto;
+ min-width: 100%;
+}
+.ant-table-body-inner {
+ height: 100%;
+}
+.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+ position: relative;
+ background: #fff;
+}
+.ant-table-fixed-header .ant-table-body-inner {
+ overflow: scroll;
+}
+.ant-table-fixed-header .ant-table-scroll .ant-table-header {
+ overflow: scroll;
+ padding-bottom: 20px;
+ margin-bottom: -20px;
+}
+.ant-table-fixed-left,
+.ant-table-fixed-right {
+ position: absolute;
+ top: 0;
+ overflow: hidden;
+ transition: box-shadow 0.3s ease;
+ border-radius: 0;
+}
+.ant-table-fixed-left table,
+.ant-table-fixed-right table {
+ width: auto;
+ background: #fff;
+}
+.ant-table-fixed-header .ant-table-fixed-left .ant-table-body-outer .ant-table-fixed,
+.ant-table-fixed-header .ant-table-fixed-right .ant-table-body-outer .ant-table-fixed {
+ border-radius: 0;
+}
+.ant-table-fixed-left {
+ left: 0;
+ box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);
+}
+.ant-table-fixed-left .ant-table-header {
+ overflow-y: hidden;
+}
+.ant-table-fixed-left .ant-table-body-inner {
+ margin-right: -20px;
+ padding-right: 20px;
+}
+.ant-table-fixed-header .ant-table-fixed-left .ant-table-body-inner {
+ padding-right: 0;
+}
+.ant-table-fixed-left,
+.ant-table-fixed-left table {
+ border-radius: 4px 0 0 0;
+}
+.ant-table-fixed-left .ant-table-thead > tr > th:last-child {
+ border-top-right-radius: 0;
+}
+.ant-table-fixed-right {
+ right: 0;
+ box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);
+}
+.ant-table-fixed-right,
+.ant-table-fixed-right table {
+ border-radius: 0 4px 0 0;
+}
+.ant-table-fixed-right .ant-table-expanded-row {
+ color: transparent;
+ pointer-events: none;
+}
+.ant-table-fixed-right .ant-table-thead > tr > th:first-child {
+ border-top-left-radius: 0;
+}
+.ant-table.ant-table-scroll-position-left .ant-table-fixed-left {
+ box-shadow: none;
+}
+.ant-table.ant-table-scroll-position-right .ant-table-fixed-right {
+ box-shadow: none;
+}
+.ant-table-middle > .ant-table-title,
+.ant-table-middle > .ant-table-footer {
+ padding: 12px 8px;
+}
+.ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td {
+ padding: 12px 8px;
+}
+.ant-table-small {
+ border: 1px solid #e8e8e8;
+ border-radius: 4px;
+}
+.ant-table-small > .ant-table-title,
+.ant-table-small > .ant-table-footer {
+ padding: 8px 8px;
+}
+.ant-table-small > .ant-table-title {
+ border-bottom: 1px solid #e8e8e8;
+ top: 0;
+}
+.ant-table-small > .ant-table-content > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-body > table,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table {
+ border: 0;
+ padding: 0 8px;
+}
+.ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td {
+ padding: 8px 8px;
+}
+.ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th {
+ background: #fff;
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table {
+ padding: 0;
+}
+.ant-table-small > .ant-table-content .ant-table-header {
+ background: #fff;
+}
+.ant-table-small > .ant-table-content .ant-table-placeholder,
+.ant-table-small > .ant-table-content .ant-table-row:last-child td {
+ border-bottom: 0;
+}
+.ant-table-small.ant-table-bordered {
+ border-right: 0;
+}
+.ant-table-small.ant-table-bordered .ant-table-title {
+ border: 0;
+ border-bottom: 1px solid #e8e8e8;
+ border-right: 1px solid #e8e8e8;
+}
+.ant-table-small.ant-table-bordered .ant-table-content {
+ border-right: 1px solid #e8e8e8;
+}
+.ant-table-small.ant-table-bordered .ant-table-footer {
+ border: 0;
+ border-top: 1px solid #e8e8e8;
+ border-right: 1px solid #e8e8e8;
+}
+.ant-table-small.ant-table-bordered .ant-table-footer:before {
+ display: none;
+}
+.ant-table-small.ant-table-bordered .ant-table-placeholder {
+ border-left: 0;
+ border-bottom: 0;
+}
+.ant-table-small.ant-table-bordered .ant-table-thead > tr > th:last-child,
+.ant-table-small.ant-table-bordered .ant-table-tbody > tr > td:last-child {
+ border-right: none;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container {
+ height: 40px;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-ink-bar {
+ visibility: hidden;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+ margin: 0;
+ border: 1px solid #e8e8e8;
+ border-bottom: 0;
+ border-radius: 4px 4px 0 0;
+ background: #fafafa;
+ margin-right: 2px;
+ padding: 0 16px;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ line-height: 38px;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+ background: #fff;
+ border-color: #e8e8e8;
+ color: #1890ff;
+ padding-bottom: 1px;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-inactive {
+ padding: 0;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-wrap {
+ margin-bottom: 0;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab .anticon-close {
+ color: rgba(0, 0, 0, 0.45);
+ transition: all .3s;
+ font-size: 12px;
+ margin-left: 3px;
+ margin-right: -5px;
+ overflow: hidden;
+ vertical-align: middle;
+ width: 16px;
+ height: 16px;
+ height: 14px;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab .anticon-close:hover {
+ color: rgba(0, 0, 0, 0.85);
+}
+.ant-tabs.ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane,
+.ant-tabs.ant-tabs-editable-card .ant-tabs-content > .ant-tabs-tabpane {
+ transition: none !important;
+}
+.ant-tabs.ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane-inactive,
+.ant-tabs.ant-tabs-editable-card .ant-tabs-content > .ant-tabs-tabpane-inactive {
+ overflow: hidden;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:hover .anticon-close {
+ opacity: 1;
+}
+.ant-tabs-extra-content {
+ line-height: 40px;
+}
+.ant-tabs-extra-content .ant-tabs-new-tab {
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
+ cursor: pointer;
+ border-radius: 2px;
+ border: 1px solid #e8e8e8;
+ font-size: 12px;
+ color: #54657e;
+ transition: all .3s;
+}
+.ant-tabs-extra-content .ant-tabs-new-tab:hover {
+ color: #1890ff;
+ border-color: #1890ff;
+}
+.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container {
+ height: auto;
+}
+.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+ border-bottom: 1px solid #e8e8e8;
+ margin-bottom: 8px;
+}
+.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+ padding-bottom: 4px;
+}
+.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:last-child {
+ margin-bottom: 8px;
+}
+.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-new-tab {
+ width: 90%;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-left > .ant-tabs-bar .ant-tabs-nav-wrap {
+ margin-right: 0;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-left > .ant-tabs-bar .ant-tabs-tab {
+ border-right: 0;
+ border-radius: 4px 0 0 4px;
+ margin-right: 1px;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-left > .ant-tabs-bar .ant-tabs-tab-active {
+ margin-right: -1px;
+ padding-right: 18px;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-right > .ant-tabs-bar .ant-tabs-nav-wrap {
+ margin-left: 0;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-right > .ant-tabs-bar .ant-tabs-tab {
+ border-left: 0;
+ border-radius: 0 4px 4px 0;
+ margin-left: 1px;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-right > .ant-tabs-bar .ant-tabs-tab-active {
+ margin-left: -1px;
+ padding-left: 18px;
+}
+.ant-tabs.ant-tabs-card.ant-tabs-bottom > .ant-tabs-bar .ant-tabs-tab {
+ border-bottom: 1px solid #e8e8e8;
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
+}
+.ant-tabs.ant-tabs-card.ant-tabs-bottom > .ant-tabs-bar .ant-tabs-tab-active {
+ color: #1890ff;
+ padding-bottom: 0;
+ padding-top: 1px;
+}
+.ant-tabs {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ overflow: hidden;
+ zoom: 1;
+}
+.ant-tabs:before,
+.ant-tabs:after {
+ content: " ";
+ display: table;
+}
+.ant-tabs:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-tabs:before,
+.ant-tabs:after {
+ content: " ";
+ display: table;
+}
+.ant-tabs:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-tabs-ink-bar {
+ z-index: 1;
+ position: absolute;
+ left: 0;
+ bottom: 1px;
+ box-sizing: border-box;
+ height: 2px;
+ background-color: #1890ff;
+ transform-origin: 0 0;
+}
+.ant-tabs-bar {
+ border-bottom: 1px solid #e8e8e8;
+ margin: 0 0 16px 0;
+ outline: none;
+ transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-tabs-nav-container {
+ overflow: hidden;
+ font-size: 14px;
+ line-height: 1.5;
+ box-sizing: border-box;
+ position: relative;
+ white-space: nowrap;
+ margin-bottom: -1px;
+ transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ zoom: 1;
+}
+.ant-tabs-nav-container:before,
+.ant-tabs-nav-container:after {
+ content: " ";
+ display: table;
+}
+.ant-tabs-nav-container:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-tabs-nav-container:before,
+.ant-tabs-nav-container:after {
+ content: " ";
+ display: table;
+}
+.ant-tabs-nav-container:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-tabs-nav-container-scrolling {
+ padding-left: 32px;
+ padding-right: 32px;
+}
+.ant-tabs-bottom .ant-tabs-bar {
+ border-bottom: none;
+ border-top: 1px solid #e8e8e8;
+}
+.ant-tabs-bottom .ant-tabs-ink-bar {
+ bottom: auto;
+ top: 1px;
+}
+.ant-tabs-bottom .ant-tabs-nav-container {
+ margin-bottom: 0;
+ margin-top: -1px;
+}
+.ant-tabs-tab-prev,
+.ant-tabs-tab-next {
+ user-select: none;
+ z-index: 2;
+ width: 0;
+ height: 100%;
+ cursor: pointer;
+ border: 0;
+ background-color: transparent;
+ position: absolute;
+ text-align: center;
+ color: rgba(0, 0, 0, 0.45);
+ transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ opacity: 0;
+ pointer-events: none;
+}
+.ant-tabs-tab-prev.ant-tabs-tab-arrow-show,
+.ant-tabs-tab-next.ant-tabs-tab-arrow-show {
+ opacity: 1;
+ width: 32px;
+ height: 100%;
+ pointer-events: auto;
+}
+.ant-tabs-tab-prev:hover,
+.ant-tabs-tab-next:hover {
+ color: #54657e;
+}
+.ant-tabs-tab-prev-icon,
+.ant-tabs-tab-next-icon {
+ font-style: normal;
+ font-weight: bold;
+ font-variant: normal;
+ line-height: inherit;
+ vertical-align: baseline;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ text-transform: none;
+}
+.ant-tabs-tab-prev-icon:before,
+.ant-tabs-tab-next-icon:before {
+ display: block;
+ font-family: "anticon" !important;
+ display: inline-block;
+ font-size: 12px;
+ font-size: 10px \9;
+ transform: scale(0.83333333) rotate(0deg);
+}
+:root .ant-tabs-tab-prev-icon:before,
+:root .ant-tabs-tab-next-icon:before {
+ font-size: 12px;
+}
+.ant-tabs-tab-btn-disabled {
+ cursor: not-allowed;
+}
+.ant-tabs-tab-btn-disabled,
+.ant-tabs-tab-btn-disabled:hover {
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-tabs-tab-next {
+ right: 2px;
+}
+.ant-tabs-tab-next-icon:before {
+ content: "\e61f";
+}
+.ant-tabs-tab-prev {
+ left: 0;
+}
+.ant-tabs-tab-prev-icon:before {
+ content: "\e620";
+}
+:root .ant-tabs-tab-prev {
+ filter: none;
+}
+.ant-tabs-nav-wrap {
+ overflow: hidden;
+ margin-bottom: -1px;
+}
+.ant-tabs-nav-scroll {
+ overflow: hidden;
+ white-space: nowrap;
+}
+.ant-tabs-nav {
+ box-sizing: border-box;
+ padding-left: 0;
+ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ position: relative;
+ margin: 0;
+ list-style: none;
+ display: inline-block;
+}
+.ant-tabs-nav:before,
+.ant-tabs-nav:after {
+ display: table;
+ content: " ";
+}
+.ant-tabs-nav:after {
+ clear: both;
+}
+.ant-tabs-nav .ant-tabs-tab-disabled {
+ pointer-events: none;
+ cursor: default;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-tabs-nav .ant-tabs-tab {
+ display: inline-block;
+ height: 100%;
+ margin: 0 32px 0 0;
+ padding: 12px 16px;
+ box-sizing: border-box;
+ position: relative;
+ transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ cursor: pointer;
+ text-decoration: none;
+}
+.ant-tabs-nav .ant-tabs-tab:last-child {
+ margin-right: 0;
+}
+.ant-tabs-nav .ant-tabs-tab:hover {
+ color: #40a9ff;
+}
+.ant-tabs-nav .ant-tabs-tab:active {
+ color: #096dd9;
+}
+.ant-tabs-nav .ant-tabs-tab .anticon {
+ margin-right: 8px;
+}
+.ant-tabs-nav .ant-tabs-tab-active {
+ color: #1890ff;
+ font-weight: 500;
+}
+.ant-tabs-large .ant-tabs-nav-container {
+ font-size: 16px;
+}
+.ant-tabs-large .ant-tabs-tab {
+ padding: 16px;
+}
+.ant-tabs-small .ant-tabs-nav-container {
+ font-size: 14px;
+}
+.ant-tabs-small .ant-tabs-tab {
+ padding: 8px 16px;
+}
+.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content {
+ width: 100%;
+}
+.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content > .ant-tabs-tabpane {
+ flex-shrink: 0;
+ width: 100%;
+ transition: opacity .45s;
+ opacity: 1;
+}
+.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content > .ant-tabs-tabpane-inactive {
+ opacity: 0;
+ height: 0;
+ padding: 0 !important;
+ pointer-events: none;
+}
+.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content-animated {
+ display: flex;
+ flex-direction: row;
+ will-change: margin-left;
+ transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-tabs-vertical > .ant-tabs-bar {
+ border-bottom: 0;
+ height: 100%;
+}
+.ant-tabs-vertical > .ant-tabs-bar-tab-prev,
+.ant-tabs-vertical > .ant-tabs-bar-tab-next {
+ width: 32px;
+ height: 0;
+ transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-tabs-vertical > .ant-tabs-bar-tab-prev.ant-tabs-tab-arrow-show,
+.ant-tabs-vertical > .ant-tabs-bar-tab-next.ant-tabs-tab-arrow-show {
+ width: 100%;
+ height: 32px;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab {
+ float: none;
+ margin: 0 0 16px 0;
+ padding: 8px 24px;
+ display: block;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab:last-child {
+ margin-bottom: 0;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-extra-content {
+ text-align: center;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-scroll {
+ width: auto;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-container,
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-wrap {
+ height: 100%;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-container {
+ margin-bottom: 0;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-container.ant-tabs-nav-container-scrolling {
+ padding: 32px 0;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-wrap {
+ margin-bottom: 0;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav {
+ width: 100%;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-ink-bar {
+ width: 2px;
+ left: auto;
+ height: auto;
+ top: 0;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab-next {
+ width: 100%;
+ bottom: 0;
+ height: 32px;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab-next-icon:before {
+ content: "\e61d";
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab-prev {
+ top: 0;
+ width: 100%;
+ height: 32px;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab-prev-icon:before {
+ content: "\e61e";
+}
+.ant-tabs-vertical > .ant-tabs-content {
+ overflow: hidden;
+ width: auto;
+ margin-top: 0 !important;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar {
+ float: left;
+ border-right: 1px solid #e8e8e8;
+ margin-right: -1px;
+ margin-bottom: 0;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar .ant-tabs-tab {
+ text-align: right;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar .ant-tabs-nav-container {
+ margin-right: -1px;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar .ant-tabs-nav-wrap {
+ margin-right: -1px;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar .ant-tabs-ink-bar {
+ right: 1px;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-content {
+ padding-left: 24px;
+ border-left: 1px solid #e8e8e8;
+}
+.ant-tabs-vertical.ant-tabs-right > .ant-tabs-bar {
+ float: right;
+ border-left: 1px solid #e8e8e8;
+ margin-left: -1px;
+ margin-bottom: 0;
+}
+.ant-tabs-vertical.ant-tabs-right > .ant-tabs-bar .ant-tabs-nav-container {
+ margin-left: -1px;
+}
+.ant-tabs-vertical.ant-tabs-right > .ant-tabs-bar .ant-tabs-nav-wrap {
+ margin-left: -1px;
+}
+.ant-tabs-vertical.ant-tabs-right > .ant-tabs-bar .ant-tabs-ink-bar {
+ left: 1px;
+}
+.ant-tabs-vertical.ant-tabs-right > .ant-tabs-content {
+ padding-right: 24px;
+ border-right: 1px solid #e8e8e8;
+}
+.ant-tabs-bottom > .ant-tabs-bar {
+ margin-bottom: 0;
+ margin-top: 16px;
+}
+.ant-tabs-top .ant-tabs-ink-bar-animated,
+.ant-tabs-bottom .ant-tabs-ink-bar-animated {
+ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-tabs-left .ant-tabs-ink-bar-animated,
+.ant-tabs-right .ant-tabs-ink-bar-animated {
+ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.no-flex > .ant-tabs-content-animated,
+.ant-tabs-no-animation > .ant-tabs-content-animated,
+.ant-tabs-vertical > .ant-tabs-content-animated {
+ transform: none !important;
+ margin-left: 0 !important;
+}
+.no-flex > .ant-tabs-content > .ant-tabs-tabpane-inactive,
+.ant-tabs-no-animation > .ant-tabs-content > .ant-tabs-tabpane-inactive,
+.ant-tabs-vertical > .ant-tabs-content > .ant-tabs-tabpane-inactive {
+ display: none;
+}
+.ant-tag {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+ line-height: 20px;
+ height: 22px;
+ padding: 0 7px;
+ border-radius: 4px;
+ border: 1px solid #d9d9d9;
+ background: #fafafa;
+ font-size: 12px;
+ transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+ opacity: 1;
+ margin-right: 8px;
+ cursor: pointer;
+ white-space: nowrap;
+}
+.ant-tag:hover {
+ opacity: 0.85;
+}
+.ant-tag,
+.ant-tag a,
+.ant-tag a:hover {
+ color: #54657e;
+}
+.ant-tag > a:first-child:last-child {
+ display: inline-block;
+ margin: 0 -8px;
+ padding: 0 8px;
+}
+.ant-tag .anticon-cross {
+ display: inline-block;
+ font-size: 12px;
+ font-size: 10px \9;
+ transform: scale(0.83333333) rotate(0deg);
+ cursor: pointer;
+ margin-left: 3px;
+ transition: all .3s;
+ color: rgba(0, 0, 0, 0.45);
+ font-weight: bold;
+}
+:root .ant-tag .anticon-cross {
+ font-size: 12px;
+}
+.ant-tag .anticon-cross:hover {
+ color: rgba(0, 0, 0, 0.85);
+}
+.ant-tag-has-color {
+ border-color: transparent;
+}
+.ant-tag-has-color,
+.ant-tag-has-color a,
+.ant-tag-has-color a:hover,
+.ant-tag-has-color .anticon-cross,
+.ant-tag-has-color .anticon-cross:hover {
+ color: #fff;
+}
+.ant-tag-checkable {
+ background-color: transparent;
+ border-color: transparent;
+}
+.ant-tag-checkable:not(.ant-tag-checkable-checked):hover {
+ color: #1890ff;
+}
+.ant-tag-checkable:active,
+.ant-tag-checkable-checked {
+ color: #fff;
+}
+.ant-tag-checkable-checked {
+ background-color: #1890ff;
+}
+.ant-tag-checkable:active {
+ background-color: #096dd9;
+}
+.ant-tag-close {
+ width: 0 !important;
+ padding: 0;
+ margin: 0;
+}
+.ant-tag-zoom-enter,
+.ant-tag-zoom-appear {
+ animation: antFadeIn 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ animation-fill-mode: both;
+}
+.ant-tag-zoom-leave {
+ animation: antZoomOut 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ animation-fill-mode: both;
+}
+.ant-tag-pink {
+ color: #eb2f96;
+ background: #fff0f6;
+ border-color: #ffadd2;
+}
+.ant-tag-pink-inverse {
+ background: #eb2f96;
+ border-color: #eb2f96;
+ color: #fff;
+}
+.ant-tag-magenta {
+ color: #eb2f96;
+ background: #fff0f6;
+ border-color: #ffadd2;
+}
+.ant-tag-magenta-inverse {
+ background: #eb2f96;
+ border-color: #eb2f96;
+ color: #fff;
+}
+.ant-tag-red {
+ color: #f5222d;
+ background: #fff1f0;
+ border-color: #ffa39e;
+}
+.ant-tag-red-inverse {
+ background: #f5222d;
+ border-color: #f5222d;
+ color: #fff;
+}
+.ant-tag-volcano {
+ color: #fa541c;
+ background: #fff2e8;
+ border-color: #ffbb96;
+}
+.ant-tag-volcano-inverse {
+ background: #fa541c;
+ border-color: #fa541c;
+ color: #fff;
+}
+.ant-tag-orange {
+ color: #fa8c16;
+ background: #fff7e6;
+ border-color: #ffd591;
+}
+.ant-tag-orange-inverse {
+ background: #fa8c16;
+ border-color: #fa8c16;
+ color: #fff;
+}
+.ant-tag-yellow {
+ color: #fadb14;
+ background: #feffe6;
+ border-color: #fffb8f;
+}
+.ant-tag-yellow-inverse {
+ background: #fadb14;
+ border-color: #fadb14;
+ color: #fff;
+}
+.ant-tag-gold {
+ color: #faad14;
+ background: #fffbe6;
+ border-color: #ffe58f;
+}
+.ant-tag-gold-inverse {
+ background: #faad14;
+ border-color: #faad14;
+ color: #fff;
+}
+.ant-tag-cyan {
+ color: #13c2c2;
+ background: #e6fffb;
+ border-color: #87e8de;
+}
+.ant-tag-cyan-inverse {
+ background: #13c2c2;
+ border-color: #13c2c2;
+ color: #fff;
+}
+.ant-tag-lime {
+ color: #a0d911;
+ background: #fcffe6;
+ border-color: #eaff8f;
+}
+.ant-tag-lime-inverse {
+ background: #a0d911;
+ border-color: #a0d911;
+ color: #fff;
+}
+.ant-tag-green {
+ color: #52c41a;
+ background: #f6ffed;
+ border-color: #b7eb8f;
+}
+.ant-tag-green-inverse {
+ background: #52c41a;
+ border-color: #52c41a;
+ color: #fff;
+}
+.ant-tag-blue {
+ color: #1890ff;
+ background: #e6f7ff;
+ border-color: #91d5ff;
+}
+.ant-tag-blue-inverse {
+ background: #1890ff;
+ border-color: #1890ff;
+ color: #fff;
+}
+.ant-tag-geekblue {
+ color: #2f54eb;
+ background: #f0f5ff;
+ border-color: #adc6ff;
+}
+.ant-tag-geekblue-inverse {
+ background: #2f54eb;
+ border-color: #2f54eb;
+ color: #fff;
+}
+.ant-tag-purple {
+ color: #722ed1;
+ background: #f9f0ff;
+ border-color: #d3adf7;
+}
+.ant-tag-purple-inverse {
+ background: #722ed1;
+ border-color: #722ed1;
+ color: #fff;
+}
+.ant-time-picker-panel {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ z-index: 1050;
+ position: absolute;
+}
+.ant-time-picker-panel-inner {
+ position: relative;
+ outline: none;
+ list-style: none;
+ font-size: 14px;
+ text-align: left;
+ background-color: #fff;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ background-clip: padding-box;
+ overflow: hidden;
+ left: -2px;
+}
+.ant-time-picker-panel-input {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ width: 100%;
+ cursor: auto;
+ outline: 0;
+}
+.ant-time-picker-panel-input::-moz-placeholder {
+ color: #bfbfbf;
+ opacity: 1;
+}
+.ant-time-picker-panel-input:-ms-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-time-picker-panel-input::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-time-picker-panel-input-wrap {
+ box-sizing: border-box;
+ position: relative;
+ padding: 7px 2px 7px 12px;
+ border-bottom: 1px solid #e8e8e8;
+}
+.ant-time-picker-panel-input-invalid {
+ border-color: red;
+}
+.ant-time-picker-panel-clear-btn {
+ position: absolute;
+ right: 8px;
+ cursor: pointer;
+ overflow: hidden;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ line-height: 20px;
+ top: 7px;
+ margin: 0;
+}
+.ant-time-picker-panel-clear-btn:after {
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.25);
+ display: inline-block;
+ line-height: 1;
+ width: 20px;
+ transition: color 0.3s ease;
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e62e";
+}
+.ant-time-picker-panel-clear-btn:hover:after {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-time-picker-panel-narrow .ant-time-picker-panel-input-wrap {
+ max-width: 112px;
+}
+.ant-time-picker-panel-select {
+ float: left;
+ font-size: 14px;
+ border-left: 1px solid #e8e8e8;
+ box-sizing: border-box;
+ width: 56px;
+ overflow: hidden;
+ position: relative;
+ max-height: 192px;
+}
+.ant-time-picker-panel-select:hover {
+ overflow-y: auto;
+}
+.ant-time-picker-panel-select:first-child {
+ border-left: 0;
+ margin-left: 0;
+}
+.ant-time-picker-panel-select:last-child {
+ border-right: 0;
+}
+.ant-time-picker-panel-select:only-child {
+ width: 100%;
+}
+.ant-time-picker-panel-select ul {
+ list-style: none;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0 0 160px;
+ width: 100%;
+}
+.ant-time-picker-panel-select li {
+ list-style: none;
+ box-sizing: content-box;
+ margin: 0;
+ padding: 0 0 0 12px;
+ width: 100%;
+ height: 32px;
+ line-height: 32px;
+ text-align: left;
+ cursor: pointer;
+ user-select: none;
+ transition: background 0.3s;
+}
+.ant-time-picker-panel-select li:hover {
+ background: #e6f7ff;
+}
+li.ant-time-picker-panel-select-option-selected {
+ background: #f5f5f5;
+ font-weight: bold;
+}
+li.ant-time-picker-panel-select-option-selected:hover {
+ background: #f5f5f5;
+}
+li.ant-time-picker-panel-select-option-disabled {
+ color: rgba(0, 0, 0, 0.25);
+}
+li.ant-time-picker-panel-select-option-disabled:hover {
+ background: transparent;
+ cursor: not-allowed;
+}
+.ant-time-picker-panel-combobox {
+ zoom: 1;
+}
+.ant-time-picker-panel-combobox:before,
+.ant-time-picker-panel-combobox:after {
+ content: " ";
+ display: table;
+}
+.ant-time-picker-panel-combobox:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-time-picker-panel-combobox:before,
+.ant-time-picker-panel-combobox:after {
+ content: " ";
+ display: table;
+}
+.ant-time-picker-panel-combobox:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-time-picker-panel-addon {
+ padding: 8px;
+ border-top: 1px solid #e8e8e8;
+}
+.ant-time-picker-panel.slide-up-enter.slide-up-enter-active.ant-time-picker-panel-placement-topLeft,
+.ant-time-picker-panel.slide-up-enter.slide-up-enter-active.ant-time-picker-panel-placement-topRight,
+.ant-time-picker-panel.slide-up-appear.slide-up-appear-active.ant-time-picker-panel-placement-topLeft,
+.ant-time-picker-panel.slide-up-appear.slide-up-appear-active.ant-time-picker-panel-placement-topRight {
+ animation-name: antSlideDownIn;
+}
+.ant-time-picker-panel.slide-up-enter.slide-up-enter-active.ant-time-picker-panel-placement-bottomLeft,
+.ant-time-picker-panel.slide-up-enter.slide-up-enter-active.ant-time-picker-panel-placement-bottomRight,
+.ant-time-picker-panel.slide-up-appear.slide-up-appear-active.ant-time-picker-panel-placement-bottomLeft,
+.ant-time-picker-panel.slide-up-appear.slide-up-appear-active.ant-time-picker-panel-placement-bottomRight {
+ animation-name: antSlideUpIn;
+}
+.ant-time-picker-panel.slide-up-leave.slide-up-leave-active.ant-time-picker-panel-placement-topLeft,
+.ant-time-picker-panel.slide-up-leave.slide-up-leave-active.ant-time-picker-panel-placement-topRight {
+ animation-name: antSlideDownOut;
+}
+.ant-time-picker-panel.slide-up-leave.slide-up-leave-active.ant-time-picker-panel-placement-bottomLeft,
+.ant-time-picker-panel.slide-up-leave.slide-up-leave-active.ant-time-picker-panel-placement-bottomRight {
+ animation-name: antSlideUpOut;
+}
+.ant-time-picker {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ display: inline-block;
+ outline: none;
+ transition: opacity .3s;
+ width: 128px;
+}
+.ant-time-picker-input {
+ position: relative;
+ display: inline-block;
+ padding: 4px 11px;
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ background-color: #fff;
+ background-image: none;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ transition: all .3s;
+}
+.ant-time-picker-input::-moz-placeholder {
+ color: #bfbfbf;
+ opacity: 1;
+}
+.ant-time-picker-input:-ms-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-time-picker-input::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+.ant-time-picker-input:hover {
+ border-color: #40a9ff;
+}
+.ant-time-picker-input:focus {
+ border-color: #40a9ff;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-time-picker-input-disabled {
+ background-color: #f5f5f5;
+ opacity: 1;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-time-picker-input-disabled:hover {
+ border-color: #e6d8d8;
+}
+textarea.ant-time-picker-input {
+ max-width: 100%;
+ height: auto;
+ vertical-align: bottom;
+ transition: all .3s, height 0s;
+ min-height: 32px;
+}
+.ant-time-picker-input-lg {
+ padding: 6px 11px;
+ height: 40px;
+ font-size: 16px;
+}
+.ant-time-picker-input-sm {
+ padding: 1px 7px;
+ height: 24px;
+}
+.ant-time-picker-input[disabled] {
+ background-color: #f5f5f5;
+ opacity: 1;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-time-picker-input[disabled]:hover {
+ border-color: #e6d8d8;
+}
+.ant-time-picker-open {
+ opacity: 0;
+}
+.ant-time-picker-icon {
+ position: absolute;
+ user-select: none;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ width: 14px;
+ height: 14px;
+ line-height: 14px;
+ right: 11px;
+ color: rgba(0, 0, 0, 0.25);
+ top: 50%;
+ margin-top: -7px;
+}
+.ant-time-picker-icon:after {
+ content: "\e641";
+ font-family: "anticon";
+ color: rgba(0, 0, 0, 0.25);
+ display: block;
+ line-height: 1;
+}
+.ant-time-picker-large .ant-time-picker-input {
+ padding: 6px 11px;
+ height: 40px;
+ font-size: 16px;
+}
+.ant-time-picker-small .ant-time-picker-input {
+ padding: 1px 7px;
+ height: 24px;
+}
+.ant-time-picker-small .ant-time-picker-icon {
+ right: 7px;
+}
+.ant-timeline {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.ant-timeline-item {
+ position: relative;
+ padding: 0 0 20px;
+ list-style: none;
+ margin: 0;
+ font-size: 14px;
+}
+.ant-timeline-item-tail {
+ position: absolute;
+ left: 4px;
+ top: 0.75em;
+ height: 100%;
+ border-left: 2px solid #e8e8e8;
+}
+.ant-timeline-item-pending .ant-timeline-item-head {
+ font-size: 12px;
+}
+.ant-timeline-item-pending .ant-timeline-item-tail {
+ display: none;
+}
+.ant-timeline-item-head {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ background-color: #fff;
+ border-radius: 100px;
+ border: 2px solid transparent;
+}
+.ant-timeline-item-head-blue {
+ border-color: #1890ff;
+ color: #1890ff;
+}
+.ant-timeline-item-head-red {
+ border-color: #f5222d;
+ color: #f5222d;
+}
+.ant-timeline-item-head-green {
+ border-color: #52c41a;
+ color: #52c41a;
+}
+.ant-timeline-item-head-custom {
+ position: absolute;
+ text-align: center;
+ line-height: 1;
+ margin-top: 0;
+ border: 0;
+ height: auto;
+ border-radius: 0;
+ padding: 3px 1px;
+ transform: translate(-50%, -50%);
+ top: 5px;
+ left: 5px;
+ width: auto;
+}
+.ant-timeline-item-content {
+ padding: 0 0 0 18px;
+ position: relative;
+ top: -6px;
+}
+.ant-timeline-item-last .ant-timeline-item-tail {
+ border-left: 2px dotted #e8e8e8;
+ display: none;
+}
+.ant-timeline-item-last .ant-timeline-item-content {
+ min-height: 48px;
+}
+.ant-timeline.ant-timeline-pending .ant-timeline-item-last .ant-timeline-item-tail {
+ display: block;
+}
+.ant-tooltip {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ z-index: 1060;
+ display: block;
+ visibility: visible;
+}
+.ant-tooltip-hidden {
+ display: none;
+}
+.ant-tooltip-placement-top,
+.ant-tooltip-placement-topLeft,
+.ant-tooltip-placement-topRight {
+ padding-bottom: 8px;
+}
+.ant-tooltip-placement-right,
+.ant-tooltip-placement-rightTop,
+.ant-tooltip-placement-rightBottom {
+ padding-left: 8px;
+}
+.ant-tooltip-placement-bottom,
+.ant-tooltip-placement-bottomLeft,
+.ant-tooltip-placement-bottomRight {
+ padding-top: 8px;
+}
+.ant-tooltip-placement-left,
+.ant-tooltip-placement-leftTop,
+.ant-tooltip-placement-leftBottom {
+ padding-right: 8px;
+}
+.ant-tooltip-inner {
+ max-width: 250px;
+ padding: 6px 8px;
+ color: #fff;
+ text-align: left;
+ text-decoration: none;
+ background-color: rgba(0, 0, 0, 0.75);
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ min-height: 32px;
+}
+.ant-tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+.ant-tooltip-placement-top .ant-tooltip-arrow,
+.ant-tooltip-placement-topLeft .ant-tooltip-arrow,
+.ant-tooltip-placement-topRight .ant-tooltip-arrow {
+ bottom: 3px;
+ border-width: 5px 5px 0;
+ border-top-color: rgba(0, 0, 0, 0.75);
+}
+.ant-tooltip-placement-top .ant-tooltip-arrow {
+ left: 50%;
+ margin-left: -5px;
+}
+.ant-tooltip-placement-topLeft .ant-tooltip-arrow {
+ left: 16px;
+}
+.ant-tooltip-placement-topRight .ant-tooltip-arrow {
+ right: 16px;
+}
+.ant-tooltip-placement-right .ant-tooltip-arrow,
+.ant-tooltip-placement-rightTop .ant-tooltip-arrow,
+.ant-tooltip-placement-rightBottom .ant-tooltip-arrow {
+ left: 3px;
+ border-width: 5px 5px 5px 0;
+ border-right-color: rgba(0, 0, 0, 0.75);
+}
+.ant-tooltip-placement-right .ant-tooltip-arrow {
+ top: 50%;
+ margin-top: -5px;
+}
+.ant-tooltip-placement-rightTop .ant-tooltip-arrow {
+ top: 8px;
+}
+.ant-tooltip-placement-rightBottom .ant-tooltip-arrow {
+ bottom: 8px;
+}
+.ant-tooltip-placement-left .ant-tooltip-arrow,
+.ant-tooltip-placement-leftTop .ant-tooltip-arrow,
+.ant-tooltip-placement-leftBottom .ant-tooltip-arrow {
+ right: 3px;
+ border-width: 5px 0 5px 5px;
+ border-left-color: rgba(0, 0, 0, 0.75);
+}
+.ant-tooltip-placement-left .ant-tooltip-arrow {
+ top: 50%;
+ margin-top: -5px;
+}
+.ant-tooltip-placement-leftTop .ant-tooltip-arrow {
+ top: 8px;
+}
+.ant-tooltip-placement-leftBottom .ant-tooltip-arrow {
+ bottom: 8px;
+}
+.ant-tooltip-placement-bottom .ant-tooltip-arrow,
+.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow,
+.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
+ top: 3px;
+ border-width: 0 5px 5px;
+ border-bottom-color: rgba(0, 0, 0, 0.75);
+}
+.ant-tooltip-placement-bottom .ant-tooltip-arrow {
+ left: 50%;
+ margin-left: -5px;
+}
+.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow {
+ left: 16px;
+}
+.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
+ right: 16px;
+}
+.ant-transfer {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+}
+.ant-transfer-list {
+ border: 1px solid #d9d9d9;
+ display: inline-block;
+ border-radius: 4px;
+ vertical-align: middle;
+ position: relative;
+ width: 180px;
+ height: 200px;
+ padding-top: 34px;
+}
+.ant-transfer-list-with-footer {
+ padding-bottom: 34px;
+}
+.ant-transfer-list-search {
+ padding: 0 8px;
+}
+.ant-transfer-list-search-action {
+ color: rgba(0, 0, 0, 0.25);
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ bottom: 4px;
+ width: 28px;
+ line-height: 32px;
+ text-align: center;
+}
+.ant-transfer-list-search-action .anticon {
+ transition: all .3s;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-transfer-list-search-action .anticon:hover {
+ color: rgba(0, 0, 0, 0.45);
+}
+span.ant-transfer-list-search-action {
+ pointer-events: none;
+}
+.ant-transfer-list-header {
+ padding: 6px 12px;
+ border-radius: 4px 4px 0 0;
+ background: #fff;
+ color: #54657e;
+ border-bottom: 1px solid #e8e8e8;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+}
+.ant-transfer-list-header-title {
+ position: absolute;
+ right: 12px;
+}
+.ant-transfer-list-body {
+ font-size: 14px;
+ position: relative;
+ height: 100%;
+}
+.ant-transfer-list-body-search-wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 4px;
+ width: 100%;
+}
+.ant-transfer-list-body-with-search {
+ padding-top: 40px;
+}
+.ant-transfer-list-content {
+ height: 100%;
+ overflow: auto;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+.ant-transfer-list-content > .LazyLoad {
+ animation: transferHighlightIn 1s;
+}
+.ant-transfer-list-content-item {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding: 6px 12px;
+ min-height: 32px;
+ transition: all .3s;
+}
+.ant-transfer-list-content-item > span {
+ padding-right: 0;
+}
+.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover {
+ cursor: pointer;
+ background-color: #e6f7ff;
+}
+.ant-transfer-list-content-item-disabled {
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-transfer-list-body-not-found {
+ padding-top: 0;
+ color: rgba(0, 0, 0, 0.25);
+ text-align: center;
+ display: none;
+ position: absolute;
+ top: 50%;
+ width: 100%;
+ margin-top: -10px;
+}
+.ant-transfer-list-content:empty + .ant-transfer-list-body-not-found {
+ display: block;
+}
+.ant-transfer-list-footer {
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+}
+.ant-transfer-operation {
+ display: inline-block;
+ overflow: hidden;
+ margin: 0 8px;
+ vertical-align: middle;
+}
+.ant-transfer-operation .ant-btn {
+ display: block;
+}
+.ant-transfer-operation .ant-btn:first-child {
+ margin-bottom: 4px;
+}
+.ant-transfer-operation .ant-btn .anticon {
+ font-size: 12px;
+}
+@keyframes transferHighlightIn {
+ 0% {
+ background: #bae7ff;
+ }
+ 100% {
+ background: transparent;
+ }
+}
+.ant-tree-checkbox {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ white-space: nowrap;
+ cursor: pointer;
+ outline: none;
+ display: inline-block;
+ line-height: 1;
+ position: relative;
+ vertical-align: middle;
+ top: -0.09em;
+}
+.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner,
+.ant-tree-checkbox:hover .ant-tree-checkbox-inner,
+.ant-tree-checkbox-input:focus + .ant-tree-checkbox-inner {
+ border-color: #1890ff;
+}
+.ant-tree-checkbox-checked:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 2px;
+ border: 1px solid #1890ff;
+ content: '';
+ animation: antCheckboxEffect 0.36s ease-in-out;
+ animation-fill-mode: both;
+ visibility: hidden;
+}
+.ant-tree-checkbox:hover:after,
+.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox:after {
+ visibility: visible;
+}
+.ant-tree-checkbox-inner {
+ position: relative;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 16px;
+ height: 16px;
+ border: 1px solid #d9d9d9;
+ border-radius: 2px;
+ background-color: #fff;
+ transition: all .3s;
+}
+.ant-tree-checkbox-inner:after {
+ transform: rotate(45deg) scale(0);
+ position: absolute;
+ left: 4.57142857px;
+ top: 1.14285714px;
+ display: table;
+ width: 5.71428571px;
+ height: 9.14285714px;
+ border: 2px solid #fff;
+ border-top: 0;
+ border-left: 0;
+ content: ' ';
+ transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+}
+.ant-tree-checkbox-input {
+ position: absolute;
+ left: 0;
+ z-index: 1;
+ cursor: pointer;
+ opacity: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+}
+.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner:after {
+ content: ' ';
+ transform: scale(1);
+ position: absolute;
+ left: 2.42857143px;
+ top: 5.92857143px;
+ width: 9.14285714px;
+ height: 1.14285714px;
+}
+.ant-tree-checkbox-indeterminate.ant-tree-checkbox-disabled .ant-tree-checkbox-inner:after {
+ border-color: rgba(0, 0, 0, 0.25);
+}
+.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after {
+ transform: rotate(45deg) scale(1);
+ position: absolute;
+ display: table;
+ border: 2px solid #fff;
+ border-top: 0;
+ border-left: 0;
+ content: ' ';
+ transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}
+.ant-tree-checkbox-checked .ant-tree-checkbox-inner,
+.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.ant-tree-checkbox-disabled {
+ cursor: not-allowed;
+}
+.ant-tree-checkbox-disabled.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after {
+ animation-name: none;
+ border-color: rgba(0, 0, 0, 0.25);
+}
+.ant-tree-checkbox-disabled .ant-tree-checkbox-input {
+ cursor: not-allowed;
+}
+.ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
+ border-color: #d9d9d9 !important;
+ background-color: #f5f5f5;
+}
+.ant-tree-checkbox-disabled .ant-tree-checkbox-inner:after {
+ animation-name: none;
+ border-color: #f5f5f5;
+}
+.ant-tree-checkbox-disabled + span {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+}
+.ant-tree-checkbox-wrapper {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ line-height: unset;
+ cursor: pointer;
+ display: inline-block;
+}
+.ant-tree-checkbox-wrapper + .ant-tree-checkbox-wrapper {
+ margin-left: 8px;
+}
+.ant-tree-checkbox-wrapper + span,
+.ant-tree-checkbox + span {
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.ant-tree-checkbox-group {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+}
+.ant-tree-checkbox-group-item {
+ display: inline-block;
+ margin-right: 8px;
+}
+.ant-tree-checkbox-group-item:last-child {
+ margin-right: 0;
+}
+.ant-tree-checkbox-group-item + .ant-tree-checkbox-group-item {
+ margin-left: 0;
+}
+.ant-tree {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: block;
+}
+.ant-tree ol,
+.ant-tree ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.ant-tree li {
+ padding: 4px 0;
+ margin: 0;
+ list-style: none;
+ white-space: nowrap;
+ outline: 0;
+}
+.ant-tree li span[draggable],
+.ant-tree li span[draggable="true"] {
+ user-select: none;
+ border-top: 2px transparent solid;
+ border-bottom: 2px transparent solid;
+ margin-top: -2px;
+ /* Required to make elements draggable in old WebKit */
+ -khtml-user-drag: element;
+ -webkit-user-drag: element;
+}
+.ant-tree li.drag-over > span[draggable] {
+ background-color: #1890ff;
+ color: white;
+ opacity: 0.8;
+}
+.ant-tree li.drag-over-gap-top > span[draggable] {
+ border-top-color: #1890ff;
+}
+.ant-tree li.drag-over-gap-bottom > span[draggable] {
+ border-bottom-color: #1890ff;
+}
+.ant-tree li.filter-node > span {
+ color: #f5222d !important;
+ font-weight: 500 !important;
+}
+.ant-tree li ul {
+ margin: 0;
+ padding: 0 0 0 18px;
+}
+.ant-tree li .ant-tree-node-content-wrapper {
+ display: inline-block;
+ padding: 0 5px;
+ border-radius: 2px;
+ margin: 0;
+ cursor: pointer;
+ text-decoration: none;
+ vertical-align: top;
+ color: #54657e;
+ transition: all .3s;
+ position: relative;
+ height: 24px;
+ line-height: 24px;
+}
+.ant-tree li .ant-tree-node-content-wrapper:hover {
+ background-color: #e6f7ff;
+}
+.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+ background-color: #bae7ff;
+}
+.ant-tree li .ant-tree-node-content-wrapper .font-red {
+ color: #FF5500;
+}
+.ant-tree li span {
+ cursor: pointer;
+}
+.ant-tree li span.ant-tree-checkbox {
+ margin: 4px 4px 0 2px;
+}
+.ant-tree li span.ant-tree-switcher,
+.ant-tree li span.ant-tree-iconEle {
+ margin: 0;
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+ display: inline-block;
+ vertical-align: middle;
+ border: 0 none;
+ cursor: pointer;
+ outline: none;
+ text-align: center;
+}
+.ant-tree li span.ant-tree-icon_loading {
+ background: #fff;
+}
+.ant-tree li span.ant-tree-icon_loading:after {
+ display: inline-block;
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\E64D";
+ animation: loadingCircle 1s infinite linear;
+ color: #1890ff;
+}
+.ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
+ cursor: default;
+}
+.ant-tree li span.ant-tree-switcher.ant-tree-switcher_open:after {
+ font-size: 12px;
+ font-size: 7px \9;
+ transform: scale(0.58333333) rotate(0deg);
+ display: inline-block;
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e606";
+ font-weight: bold;
+ transition: transform .3s;
+}
+:root .ant-tree li span.ant-tree-switcher.ant-tree-switcher_open:after {
+ font-size: 12px;
+}
+.ant-tree li span.ant-tree-switcher.ant-tree-switcher_close:after {
+ font-size: 12px;
+ font-size: 7px \9;
+ transform: scale(0.58333333) rotate(0deg);
+ display: inline-block;
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e606";
+ font-weight: bold;
+ transition: transform .3s;
+}
+:root .ant-tree li span.ant-tree-switcher.ant-tree-switcher_close:after {
+ font-size: 12px;
+}
+.ant-tree li span.ant-tree-switcher.ant-tree-switcher_close:after {
+ transform: rotate(270deg) scale(0.59);
+}
+.ant-tree li:last-child > span.ant-tree-switcher:before,
+.ant-tree li:last-child > span.ant-tree-iconEle:before {
+ display: none;
+}
+.ant-tree > li:first-child {
+ padding-top: 7px;
+}
+.ant-tree > li:last-child {
+ padding-bottom: 7px;
+}
+.ant-tree-child-tree {
+ display: none;
+}
+.ant-tree-child-tree-open {
+ display: block;
+}
+li.ant-tree-treenode-disabled > span,
+li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper,
+li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span,
+li.ant-tree-treenode-disabled > span.ant-tree-switcher {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: not-allowed;
+}
+li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper:hover {
+ background: transparent;
+}
+.ant-tree-icon__open {
+ margin-right: 2px;
+ vertical-align: top;
+}
+.ant-tree-icon__close {
+ margin-right: 2px;
+ vertical-align: top;
+}
+.ant-tree.ant-tree-show-line li {
+ position: relative;
+}
+.ant-tree.ant-tree-show-line li span.ant-tree-switcher {
+ background: #fff;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher-noop:after {
+ font-size: 12px;
+ font-size: 12px \9;
+ transform: scale(1) rotate(0deg);
+ display: inline-block;
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e664";
+ vertical-align: baseline;
+ font-weight: normal;
+ transition: transform .3s;
+}
+:root .ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher-noop:after {
+ font-size: 12px;
+}
+.ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher_open:after {
+ font-size: 12px;
+ font-size: 12px \9;
+ transform: scale(1) rotate(0deg);
+ display: inline-block;
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e621";
+ vertical-align: baseline;
+ font-weight: normal;
+ transition: transform .3s;
+}
+:root .ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher_open:after {
+ font-size: 12px;
+}
+.ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher_close:after {
+ font-size: 12px;
+ font-size: 12px \9;
+ transform: scale(1) rotate(0deg);
+ display: inline-block;
+ font-family: 'anticon';
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "\e645";
+ vertical-align: baseline;
+ font-weight: normal;
+ transition: transform .3s;
+}
+:root .ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher_close:after {
+ font-size: 12px;
+}
+.ant-tree.ant-tree-show-line > nz-tree-node:not(:last-child) > li:before,
+.ant-tree.ant-tree-show-line .ant-tree-child-tree > nz-tree-node:not(:last-child) > li:before {
+ content: ' ';
+ width: 1px;
+ border-left: 1px solid #d9d9d9;
+ height: 100%;
+ position: absolute;
+ left: 12px;
+ margin: 22px 0;
+}
+.ant-tree.ant-tree-show-line .ant-tree-child-tree > nz-tree-node:last-child > li:before {
+ content: ' ';
+ width: 1px;
+ border-left: 0px solid #d9d9d9;
+ height: 100%;
+ position: absolute;
+ left: 12px;
+ margin: 22px 0;
+}
+.ant-upload {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ outline: 0;
+}
+.ant-upload p {
+ margin: 0;
+}
+.ant-upload-btn {
+ display: block;
+ width: 100%;
+ outline: none;
+}
+.ant-upload input[type="file"] {
+ cursor: pointer;
+}
+.ant-upload.ant-upload-select {
+ display: inline-block;
+}
+.ant-upload.ant-upload-select-picture-card {
+ border: 1px dashed #d9d9d9;
+ width: 104px;
+ height: 104px;
+ border-radius: 4px;
+ background-color: #fafafa;
+ text-align: center;
+ cursor: pointer;
+ transition: border-color 0.3s ease;
+ vertical-align: top;
+ margin-right: 8px;
+ margin-bottom: 8px;
+ display: table;
+}
+.ant-upload.ant-upload-select-picture-card > .ant-upload {
+ width: 100%;
+ height: 100%;
+ display: table-cell;
+ text-align: center;
+ vertical-align: middle;
+ padding: 8px;
+}
+.ant-upload.ant-upload-select-picture-card:hover {
+ border-color: #1890ff;
+}
+.ant-upload.ant-upload-drag {
+ border: 1px dashed #d9d9d9;
+ transition: border-color 0.3s;
+ cursor: pointer;
+ border-radius: 4px;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ padding: 16px 0;
+ background: #fafafa;
+}
+.ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-upload-disabled) {
+ border: 2px dashed #40a9ff;
+}
+.ant-upload.ant-upload-drag.ant-upload-disabled {
+ cursor: not-allowed;
+}
+.ant-upload.ant-upload-drag .ant-upload-btn {
+ display: table;
+ height: 100%;
+}
+.ant-upload.ant-upload-drag .ant-upload-drag-container {
+ display: table-cell;
+ vertical-align: middle;
+}
+.ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover {
+ border-color: #40a9ff;
+}
+.ant-upload.ant-upload-drag p.ant-upload-drag-icon {
+ margin-bottom: 20px;
+}
+.ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon {
+ font-size: 48px;
+ color: #40a9ff;
+}
+.ant-upload.ant-upload-drag p.ant-upload-text {
+ font-size: 16px;
+ margin: 0 0 4px;
+ color: rgba(0, 0, 0, 0.85);
+}
+.ant-upload.ant-upload-drag p.ant-upload-hint {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-upload.ant-upload-drag .anticon-plus {
+ font-size: 30px;
+ transition: all .3s;
+ color: rgba(0, 0, 0, 0.25);
+}
+.ant-upload.ant-upload-drag .anticon-plus:hover {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-upload.ant-upload-drag:hover .anticon-plus {
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-upload-list {
+ font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #54657e;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ zoom: 1;
+}
+.ant-upload-list:before,
+.ant-upload-list:after {
+ content: " ";
+ display: table;
+}
+.ant-upload-list:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-upload-list:before,
+.ant-upload-list:after {
+ content: " ";
+ display: table;
+}
+.ant-upload-list:after {
+ clear: both;
+ visibility: hidden;
+ font-size: 0;
+ height: 0;
+}
+.ant-upload-list-item {
+ margin-top: 8px;
+ font-size: 14px;
+ position: relative;
+ height: 22px;
+}
+.ant-upload-list-item-name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ padding-left: 22px;
+ width: 100%;
+ display: inline-block;
+}
+.ant-upload-list-item-info {
+ height: 100%;
+ padding: 0 12px 0 4px;
+ transition: background-color 0.3s;
+}
+.ant-upload-list-item-info > span {
+ display: block;
+}
+.ant-upload-list-item-info .anticon-loading,
+.ant-upload-list-item-info .anticon-paper-clip {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.45);
+ position: absolute;
+ top: 5px;
+}
+.ant-upload-list-item .anticon-cross {
+ display: inline-block;
+ font-size: 12px;
+ font-size: 10px \9;
+ transform: scale(0.83333333) rotate(0deg);
+ transition: all .3s;
+ opacity: 0;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ right: 4px;
+ color: rgba(0, 0, 0, 0.45);
+ line-height: 22px;
+}
+:root .ant-upload-list-item .anticon-cross {
+ font-size: 12px;
+}
+.ant-upload-list-item .anticon-cross:hover {
+ color: #54657e;
+}
+.ant-upload-list-item:hover .ant-upload-list-item-info {
+ background-color: #e6f7ff;
+}
+.ant-upload-list-item:hover .anticon-cross {
+ opacity: 1;
+}
+.ant-upload-list-item-error,
+.ant-upload-list-item-error .anticon-paper-clip,
+.ant-upload-list-item-error .ant-upload-list-item-name {
+ color: #f5222d;
+}
+.ant-upload-list-item-error .anticon-cross {
+ opacity: 1;
+ color: #f5222d !important;
+}
+.ant-upload-list-item-progress {
+ line-height: 0;
+ font-size: 14px;
+ position: absolute;
+ width: 100%;
+ bottom: -12px;
+ padding-left: 26px;
+}
+.ant-upload-list-picture .ant-upload-list-item,
+.ant-upload-list-picture-card .ant-upload-list-item {
+ padding: 8px;
+ border-radius: 4px;
+ border: 1px solid #d9d9d9;
+ height: 66px;
+ position: relative;
+}
+.ant-upload-list-picture .ant-upload-list-item:hover,
+.ant-upload-list-picture-card .ant-upload-list-item:hover {
+ background: transparent;
+}
+.ant-upload-list-picture .ant-upload-list-item-error,
+.ant-upload-list-picture-card .ant-upload-list-item-error {
+ border-color: #f5222d;
+}
+.ant-upload-list-picture .ant-upload-list-item-info,
+.ant-upload-list-picture-card .ant-upload-list-item-info {
+ padding: 0;
+}
+.ant-upload-list-picture .ant-upload-list-item:hover .ant-upload-list-item-info,
+.ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info {
+ background: transparent;
+}
+.ant-upload-list-picture .ant-upload-list-item-uploading,
+.ant-upload-list-picture-card .ant-upload-list-item-uploading {
+ border-style: dashed;
+}
+.ant-upload-list-picture .ant-upload-list-item-thumbnail,
+.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
+ width: 48px;
+ height: 48px;
+ position: absolute;
+ top: 8px;
+ left: 8px;
+}
+.ant-upload-list-picture .ant-upload-list-item-thumbnail img,
+.ant-upload-list-picture-card .ant-upload-list-item-thumbnail img {
+ width: 48px;
+ height: 48px;
+ display: block;
+ overflow: hidden;
+}
+.ant-upload-list-picture .ant-upload-list-item-thumbnail.anticon:before,
+.ant-upload-list-picture-card .ant-upload-list-item-thumbnail.anticon:before {
+ line-height: 48px;
+ font-size: 24px;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-upload-list-picture .ant-upload-list-item-name,
+.ant-upload-list-picture-card .ant-upload-list-item-name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin: 0 0 0 8px;
+ line-height: 44px;
+ transition: all .3s;
+ padding-left: 48px;
+ padding-right: 8px;
+ max-width: 100%;
+ display: inline-block;
+ box-sizing: border-box;
+}
+.ant-upload-list-picture .ant-upload-list-item-uploading .ant-upload-list-item-name,
+.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-name {
+ line-height: 28px;
+}
+.ant-upload-list-picture .ant-upload-list-item-progress,
+.ant-upload-list-picture-card .ant-upload-list-item-progress {
+ padding-left: 56px;
+ margin-top: 0;
+ bottom: 14px;
+ width: calc(100% - 24px);
+}
+.ant-upload-list-picture .anticon-cross,
+.ant-upload-list-picture-card .anticon-cross {
+ position: absolute;
+ right: 8px;
+ top: 8px;
+ line-height: 1;
+}
+.ant-upload-list-picture-card {
+ display: inline;
+}
+.ant-upload-list-picture-card.ant-upload-list:after {
+ display: none;
+}
+.ant-upload-list-picture-card .ant-upload-list-item {
+ float: left;
+ width: 104px;
+ height: 104px;
+ margin: 0 8px 8px 0;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-info {
+ height: 100%;
+ position: relative;
+ overflow: hidden;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-info:before {
+ content: ' ';
+ position: absolute;
+ z-index: 1;
+ background-color: rgba(0, 0, 0, 0.5);
+ transition: all .3s;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+}
+.ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info:before {
+ opacity: 1;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-actions {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 10;
+ white-space: nowrap;
+ opacity: 0;
+ transition: all .3s;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye-o,
+.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete {
+ z-index: 10;
+ transition: all .3s;
+ cursor: pointer;
+ font-size: 16px;
+ width: 16px;
+ color: rgba(255, 255, 255, 0.85);
+ margin: 0 4px;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye-o:hover,
+.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete:hover {
+ color: #fff;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-info:hover + .ant-upload-list-item-actions,
+.ant-upload-list-picture-card .ant-upload-list-item-actions:hover {
+ opacity: 1;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-thumbnail,
+.ant-upload-list-picture-card .ant-upload-list-item-thumbnail img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: static;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-name {
+ margin: 8px 0 0;
+ padding: 0;
+ text-align: center;
+ line-height: 1.5;
+ display: none;
+}
+.ant-upload-list-picture-card .anticon-picture + .ant-upload-list-item-name {
+ display: block;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-uploading.ant-upload-list-item {
+ background-color: #fafafa;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info {
+ height: auto;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info:before,
+.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info .anticon-eye-o,
+.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info .anticon-delete {
+ display: none;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-uploading-text {
+ margin-top: 18px;
+ color: rgba(0, 0, 0, 0.45);
+}
+.ant-upload-list-picture-card .ant-upload-list-item-progress {
+ padding-left: 0;
+ bottom: 32px;
+}
+.ant-upload-list .ant-upload-success-icon {
+ color: #52c41a;
+ font-weight: bold;
+}
+.ant-upload-list .ant-upload-animate-enter,
+.ant-upload-list .ant-upload-animate-leave,
+.ant-upload-list .ant-upload-animate-inline-enter,
+.ant-upload-list .ant-upload-animate-inline-leave {
+ animation-duration: .3s;
+ animation-fill-mode: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.ant-upload-list .ant-upload-animate-enter {
+ animation-name: uploadAnimateIn;
+}
+.ant-upload-list .ant-upload-animate-leave {
+ animation-name: uploadAnimateOut;
+}
+.ant-upload-list .ant-upload-animate-inline-enter {
+ animation-name: uploadAnimateInlineIn;
+}
+.ant-upload-list .ant-upload-animate-inline-leave {
+ animation-name: uploadAnimateInlineOut;
+}
+@keyframes uploadAnimateIn {
+ from {
+ height: 0;
+ margin: 0;
+ opacity: 0;
+ padding: 0;
+ }
+}
+@keyframes uploadAnimateOut {
+ to {
+ height: 0;
+ margin: 0;
+ padding: 0;
+ opacity: 0;
+ }
+}
+@keyframes uploadAnimateInlineIn {
+ from {
+ width: 0;
+ height: 0;
+ margin: 0;
+ opacity: 0;
+ padding: 0;
+ }
+}
+@keyframes uploadAnimateInlineOut {
+ to {
+ width: 0;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ opacity: 0;
+ }
+}
diff --git a/usecaseui-portal/src/my-theme.less b/usecaseui-portal/src/my-theme.less
new file mode 100644
index 00000000..946b8afb
--- /dev/null
+++ b/usecaseui-portal/src/my-theme.less
@@ -0,0 +1,11 @@
+@import "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less";
+
+@menu-inline-toplevel-item-height: 50px;
+@menu-item-height: 50px;
+@menu-highlight-color: #3fa8eb;
+@text-color: #54657e;
+@menu-dark-item-selected-bg: #3d4a59;
+@menu-dark-color: #fff;
+@menu-dark-highlight-color: #3fa8eb;
+@layout-header-background: #2a3542;
+@menu-dark-submenu-bg: #2a3542;
diff --git a/usecaseui-portal/src/polyfills.ts b/usecaseui-portal/src/polyfills.ts
new file mode 100644
index 00000000..199ac5d1
--- /dev/null
+++ b/usecaseui-portal/src/polyfills.ts
@@ -0,0 +1,81 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/weak-map';
+import 'core-js/es6/set';
+import 'core-js/es7/array';
+import 'core-js/es7/object';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js'; // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/usecaseui-portal/src/styles.css b/usecaseui-portal/src/styles.css
new file mode 100644
index 00000000..2b7176e6
--- /dev/null
+++ b/usecaseui-portal/src/styles.css
@@ -0,0 +1,113 @@
+/*
+ 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.
+*/
+/* You can add global styles to this file, and also import other style files */
+.ant-dropdown-menu .ant-dropdown-menu-item:hover,
+.ant-dropdown-menu .ant-dropdown-menu-submenu-title:hover {
+ background-color: #3fa8eb;
+}
+nz-table .ant-table-thead > tr > th {
+ color: #3fa8eb;
+}
+nz-table .ant-spin-container nz-pagination ul .ant-pagination-options .ant-pagination-options-size-changer.ant-select {
+ position: absolute;
+ left: 0;
+}
+.detailInformatioin nz-table .ant-table-small {
+ border-color: #dfdfe0;
+ border-right: 0;
+}
+.detailInformatioin nz-table .ant-table-small .ant-table-content {
+ border-color: #dfdfe0;
+}
+.detailInformatioin nz-table .ant-table-small .ant-table-content .ant-table-body > table {
+ padding: 0;
+}
+.detailInformatioin nz-table .ant-table-small .ant-table-content .ant-table-body > table .ant-table-thead > tr > th {
+ background-color: #f0f2f5;
+ font-weight: 700;
+ font-size: 14px;
+ padding: 2px 15px;
+ border-color: #dfdfe0;
+}
+.detailInformatioin nz-table .ant-table-small .ant-table-content .ant-table-body > table .ant-table-tbody > tr > td {
+ background-color: #f0f2f5;
+ font-size: 14px;
+ padding: 2px 15px;
+ color: #323437;
+ border-color: #dfdfe0;
+}
+.ant-calendar-picker .ant-input {
+ background-color: #eceff4;
+ border-color: #9fa9ab;
+}
+nz-pagination ul .ant-pagination-options .ant-pagination-options-size-changer.ant-select {
+ position: absolute;
+ left: 0;
+}
+html,
+body,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+a,
+span {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ list-style: none;
+ text-decoration: none;
+}
+body {
+ padding: 0 !important;
+}
+.fl {
+ float: left;
+}
+.fr {
+ float: right;
+}
+.clearfix:after {
+ content: "";
+ height: 0;
+ line-height: 0;
+ display: block;
+ visibility: hidden;
+ clear: both;
+}
+.deleteModelContent {
+ color: red;
+}
+/* WAN Port */
+.wanPortModalList li {
+ height: 35px;
+}
+.wanPortModalList li > span {
+ display: inline-block;
+ width: 165px;
+ font: 700 14px "Arial";
+ color: #3fa8eb;
+ vertical-align: middle;
+}
+.wanPortModalList li input {
+ width: 165px;
+}
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
new file mode 100644
index 00000000..5429a9c1
--- /dev/null
+++ b/usecaseui-portal/src/styles.less
@@ -0,0 +1,117 @@
+/* You can add global styles to this file, and also import other style files */
+// 下拉框背景hover状态颜色
+.ant-dropdown-menu {
+ .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
+ background-color: #3fa8eb;
+ }
+}
+// 表格每页条数选项单位置
+nz-table {
+ .ant-table-thead>tr>th {
+ color: #3fa8eb; //标题字体颜色
+ }
+ .ant-spin-container {
+ nz-pagination {
+ ul {
+ .ant-pagination-options {
+ .ant-pagination-options-size-changer.ant-select{
+ position: absolute;
+ left: 0;
+ }
+ }
+ }
+ }
+ }
+}
+
+// 详情页迷你表格样式
+.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: 14px;
+ 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;
+ }
+ }
+ }
+ }
+ }
+}
+
+// 日期选择插件背景颜色
+.ant-calendar-picker {
+ .ant-input {
+ background-color: #eceff4;
+ border-color: #9fa9ab;
+ }
+}
+// 分页每页条数选项单位置
+nz-pagination {
+ ul {
+ .ant-pagination-options {
+ .ant-pagination-options-size-changer.ant-select{
+ position: absolute;
+ left: 0;
+ }
+ }
+ }
+}
+
+html,body,div,h1,h2,h3,h4,h5,h6,p,ul,li,a,span {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ list-style: none;
+ text-decoration: none;
+}
+body {
+ padding: 0 !important;
+}
+.fl {
+ float: left;
+}
+.fr {
+ float: right;
+}
+.clearfix:after{
+ content:"";
+ height:0;
+ line-height:0;
+ display:block;
+ visibility:hidden;
+ clear:both
+}
+.deleteModelContent {
+ color: red;
+}
+
+/* WAN Port */
+.wanPortModalList li {
+ height: 35px;
+ >span{
+ display: inline-block;
+ width: 165px;
+ font: 700 14px "Arial";
+ color: #3fa8eb;
+ vertical-align: middle;
+ }
+ input {
+ width: 165px;
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/test.ts b/usecaseui-portal/src/test.ts
new file mode 100644
index 00000000..16317897
--- /dev/null
+++ b/usecaseui-portal/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/usecaseui-portal/src/tsconfig.app.json b/usecaseui-portal/src/tsconfig.app.json
new file mode 100644
index 00000000..39ba8dba
--- /dev/null
+++ b/usecaseui-portal/src/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../out-tsc/app",
+ "baseUrl": "./",
+ "module": "es2015",
+ "types": []
+ },
+ "exclude": [
+ "test.ts",
+ "**/*.spec.ts"
+ ]
+}
diff --git a/usecaseui-portal/src/tsconfig.spec.json b/usecaseui-portal/src/tsconfig.spec.json
new file mode 100644
index 00000000..ac22a298
--- /dev/null
+++ b/usecaseui-portal/src/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../out-tsc/spec",
+ "baseUrl": "./",
+ "module": "commonjs",
+ "types": [
+ "jasmine",
+ "node"
+ ]
+ },
+ "files": [
+ "test.ts"
+ ],
+ "include": [
+ "**/*.spec.ts",
+ "**/*.d.ts"
+ ]
+}
diff --git a/usecaseui-portal/src/typings.d.ts b/usecaseui-portal/src/typings.d.ts
new file mode 100644
index 00000000..ef5c7bd6
--- /dev/null
+++ b/usecaseui-portal/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+ id: string;
+}