From eedea1498658f6c6a07cbad256bca1ab8218ea06 Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Wed, 13 Feb 2019 09:41:51 +0800 Subject: Fix instance instantiation for CCVPN Change-Id: I0f9eefab631fabfaf8ea73f35a65a505e91b5bdf Issue-ID: USECASEUI-220 Signed-off-by: guochuyicmri --- .../ccvpn-creation/ccvpn-creation.component.css | 258 +++++--- .../ccvpn-creation/ccvpn-creation.component.html | 646 +++++++++++---------- .../app/ccvpn-creation/ccvpn-creation.component.ts | 11 + 3 files changed, 552 insertions(+), 363 deletions(-) (limited to 'usecaseui-portal/src/app/ccvpn-creation') diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css index 35fdbef5..54b92d03 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css @@ -25,80 +25,125 @@ hr { margin-bottom: 10px; } .model { - background-color: #fff; - height: 90%; + background-color: #F7F8FC; + /*height: 100%;*/ overflow-y: auto; } +.creation-model{ + position: relative; +} +.top-title{ /*2019.01.22 add*/ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; +} .model .back { position: absolute; top: 10px; right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; + border-radius:4px; + color: #fff; + border: none!important; + border-color:rgba(0,0,0,0)!important; +} +.top-title h3.title { + height: 35px; + width: 80%; + /*font: 700 20px/20px "Arial";*/ + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; + /*top:10px;*/ + +} +.model .submit{ + position: absolute; + width:84px; + height: 35px; + top: 10px; + right: 85px; + color: #fff; + font-size: 18px; + background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; + border-radius:4px; + border: none!important; + border-color:rgba(0,0,0,0)!important; +} +.model .submit:hover,.model .back:hover,.model .site>button:hover,.model .sitegroup>button:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + border: none; } .model .creation { - position: relative; - width: 60%; - height: 100%; + width: 100%; + /*height: 60vh;*/ 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%; + height: 40px; + width: 24.5%; + margin-bottom: 40px; } .model .creation .sotnvpn ul li span { display: inline-block; width: 110px; font: 700 14px "Arial"; - color: #3fa8eb; + color: #3C4F8C; vertical-align: middle; } .model .creation .sotnvpn ul li input { - width: 165px; + width: 234px; + height: 40px; + border-radius:4px; + outline: none; } /* Site List */ /* addsite model */ .model .sitemodel { position: absolute; - z-index: 10; - left: 10px; + z-index: 1001; + left: 100px; top: 60px; background-color: #fff; - box-shadow: 0px 0px 20px #000; - width: 60%; + /*box-shadow: 0px 0px 20px #000;*/ + width:650px; + /*width:1300px;px*/ max-height: 90%; - border-radius: 5px; + border-radius:2px; 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 h3,.sitegroupmodal>h3{ + width: 92%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + /*padding-left: 10px;*/ + color: #06A7E2; + /*color: #ffffff;*/ + /*background:linear-gradient(90deg,rgba(7,169,225,1) 0%,rgba(48,217,196,1) 100%);*/ + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; } .model .sitemodel .inputs { padding: 10px 20px 0; @@ -106,21 +151,46 @@ hr { .model .sitemodel .inputs ul li { display: inline-block; height: 35px; + line-height: 35px; width: 49.5%; } .model .sitemodel .inputs ul li span { display: inline-block; - width: 110px; - font: 700 14px "Arial"; - color: #3fa8eb; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; vertical-align: middle; + float: left; } -.model .sitemodel .inputs input { - width: 165px; +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select { + width: 156px; + float: right; + margin-right: 30px; } .model .sitemodel .action { - float: left; - padding: 10px; + text-align: center; + margin-top: 30px; + margin-bottom: 20px; +} + +.model .sitemodel .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 15px; +} +.model .sitemodel .action button:nth-child(2),.sitemodel h3 button{ + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + color: #fff; +} +.model .sitemodel .action button:nth-child(2):hover,.sitemodel h3 button:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; } .model nz-table tbody td i.anticon:hover { @@ -129,6 +199,24 @@ hr { } /* site table */ +.model .site>button,.model .sitegroup>button,.sitemodel h3>button{ + width:36px; + height:36px; + color: #fff; + background:linear-gradient(270deg,rgba(63,156,255,1) 0%,rgba(98,193,246,1) 100%); + border-radius:4px; + border: none!important; +} +.sitemodel h3>button{ + float: right; + width: 30px; + height: 30px; + margin-right: 15px; +} +.model nz-table tbody th{ + color:rgba(60,79,140,0.5); + font-size: 16px; +} .model .site nz-table tbody td i.anticon:hover { color: #3fa8eb; cursor: pointer; @@ -136,49 +224,75 @@ hr { /* WAN Port */ /* Site Group List */ -.model .sitegroup .sitegroupmodal { + +.model .sitegroupmodal { position: absolute; - z-index: 10; - left: 200px; - top: 300px; - background-color: #fff; - box-shadow: 0px 0px 20px #000; - width: 330px; - border-radius: 5px; + z-index: 1001; + width: 360px!important; + height: 376px!important; + left:35%; + top:40%; + margin-top: -188px; + margin-left: -180px; + background: #ffffff; } -.model .sitegroup .sitegroupmodal h3 { - height: 30px; - font: 700 16px/30px "Arial"; - border-bottom: 1px solid #aaa; - padding-left: 10px; +.sitegroupmodal .list-div{ + width: 100%; + height: 32px !important; + line-height: 32px; + margin-bottom: 10px; } -.model .sitegroup .sitegroupmodal .inputs { - padding: 10px 20px 0; +.sitegroupmodal .list-div > span { + line-height: 32px !important; + color: #3C4F8C; + margin-left: 30px; } -.model .sitegroup .sitegroupmodal span { - display: inline-block; - width: 100px; - margin-bottom: 10px; +.sitegroupmodal .list-div input, .sitegroupmodal .list-div nz-select { + margin-right: 50px; } -.model .sitegroup .sitegroupmodal .inputs input { - width: 165px; +.sitegroupmodal .action{ + text-align: center; + margin-top: 30px; } -.model .sitegroup .sitegroupmodal .action { - float: right; - padding: 10px; +.sitegroupmodal .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 8px; +} +.sitegroupmodal .action button:nth-child(2){ + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + color: #fff; +} +.sitegroupmodal .action button:nth-child(2):hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; +} +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; + background: rgba(0, 0, 0, 0.65); + top:0; } -/* 图 */ +/* chart */ .model .chart { - width: 40%; + width: 100%; padding: 10px; - height: 100%; + /*height: 30vh;*/ border-left: 10px solid #f3f3f3; + margin-bottom: 30px; + box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5); } .model .chart #createChart { width: 100%; - height: 80%; + /*height: 50vh;*/ margin-top: 20px; position: relative; } @@ -193,3 +307,7 @@ hr { overflow: hidden; text-overflow: ellipsis; } +.model .creation .sotnvpn,.model .creation .site,.model .creation .sitegroup{ + background: #fff; + padding: 30px; +} diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html index 15486238..1b54b7bc 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html @@ -13,301 +13,361 @@ See the License for the specific language governing permissions and limitations under the License. --> -

Services List

-
-
- - -
-

{{createParams.commonParams.templateType}} Instance Creation

-
-

SOTN VPN Info

-
    -
  • Name:
    • -
  • Description:
    • -
  • Start Time: - - -
    • -
  • End Time: - - -
    • -
  • COS: - - - - -
    • -
  • Reroute Enabled:
    • -
  • Service Level Specification:
    • -
  • Dual Link: - - - - - -
    • -
  • CIR:
    • -
  • EIR:
    • -
  • CBS:
    • -
  • EBS:
    • -
  • Color Aware:
    • -
  • Coupling Flag:
    • -
-
- -
-

Site List

- - - - - NO. - Name - Description - Post Code - Address - VLAN - Action - - - - - - {{i+1}} - {{item.baseData.name}} - {{item.baseData.description}} - {{item.baseData.postcode}} - {{item.baseData.address}} - {{item.baseData.vlan}} - -   - - - - - - -
- -
-

Site_Group List

- -
-

Site_Group

-
- Group Name:
- Topology: - - - - - - - - - Site Name - Role - - - - - - {{ item.siteName }} - - - - - - - - - -
-
- - -
-
- - - - NO. - Group Name - Topology - Sites - Role - Action - - - - - - {{i+1}} - {{item.name}} - {{item.topology}} - {{item.sites}} - {{item.role}} - -   - - - - - - -
+ + +
+ +
+

{{createParams.commonParams.templateType}} Instance Creation

+
+ + +
+
+ +
+ Create Service + {{createParams.commonParams.templateType}} +
+ + + + + + + + {{ item.name }} + + - Create -
- -
-

Site_Enterprise Service

-
-
    -
  • Name:
    • -
  • Description:
    • -
  • Type: - - - - -
    • -
  • Role: - - - - -
    • -
  • PostCode:
    • -
  • VLAN:
    • -
  • Address: - - - -
    • -
+ + +
-
-

CPE

-
-
    -
  • Name:
    • -
  • Version:
    • -
  • ESN:
    • -
  • Class: - - - - -
    • -
  • System IP:
    • -
  • Vendor:
    • -
  • Type:
    • -
-
-

WAN Port

-
- - - - NO. - Name - Description - PortType - PortNumber - IPAddress - Action - - - - - - {{i+1}} - {{item.sitewanport_name}} - {{item.sitewanport_description}} - {{item.sitewanport_portType}} - {{item.sitewanport_portNumber}} - {{item.sitewanport_ipAddress}} - - - - - - - -
- -
    -
  • Name:
    • - -
  • Description:
    • -
  • Port Type: - - - - - - - - -
    • -
  • Port Number:
    • -
  • Ip Address:
    • -
  • Provider IP Address:
    • -
  • Transport Nerwork:
    • -
  • Input Bandwidth:
    • -
  • Output Bandwidth:
    • -
- +
+ + +
+ +
    +
  • Name:
    • +
  • Description:
    • +
  • Start Time: + + +
    • +
  • End Time: + + +
    • +
  • COS: + + + + +
    • +
  • Reroute Enabled: + +
    • +
  • Service Level Specification:
    • +
  • Dual Link: + + + + + +
    • +
  • CIR:
    • +
  • EIR:
    • +
  • CBS:
    • +
  • EBS:
    • +
  • Color Aware: + +
    • +
  • Coupling Flag: + +
    • +
+
+ + +
+ + + + + + NO. + Name + Description + Post Code + Address + VLAN + Action + + + + + + {{i+1}} + {{item.baseData.name}} + {{item.baseData.description}} + {{item.baseData.postcode}} + {{item.baseData.address}} + {{item.baseData.vlan}} + +   + + + + + + +
+ + +
+ + + + + + NO. + Group Name + Topology + Sites + Role + Action + + + + + + {{i+1}} + {{item.name}} + {{item.topology}} + {{item.sites}} + {{item.role}} + + +   + + + + + + +
+ +
+ +
+

Site_Enterprise Service

+
+
    +
  • Name:
    • +
  • Description:
    • +
  • Type: + + + + +
    • +
  • Role: + + + + +
    • +
  • PostCode:
    • +
  • VLAN:
    • +
  • Address: + + + + +
    • +
+
+
+

CPE

+
+
    +
  • Name:
    • +
  • Version:
    • +
  • ESN:
    • +
  • Class: + + + + +
    • +
  • System IP:
    • +
  • Vendor:
    • +
  • Type:
    • +
+
+

WAN Port + +

+
+ + + + NO. + Name + Description + PortType + PortNumber + IPAddress + + + + + Action + + + + + + {{i+1}} + {{item.sitewanport_name}} + {{item.sitewanport_description}} + {{item.sitewanport_portType}} + {{item.sitewanport_portNumber}} + {{item.sitewanport_ipAddress}} + + + + + + + +
+ +
    +
  • Name:
    • + +
  • Description: +
    • +
  • Port Type: + + + + + + + + +
    • +
  • Port Number: +
    • +
  • Ip Address:
    • +
  • Provider IP Address: +
    • +
  • Transport Nerwork: +
    • +
  • Input Bandwidth: +
    • +
  • Output Bandwidth: +
    • +
+ +
-
- - -
-
- -
- Create Service - {{createParams.commonParams.templateType}} -
- - - - - - - - {{ item.name }} - - - - -
-
- +
+ + +
+
+ +
+

Site_Group

+
+
+ Group Name: + +
+
+ Topology: + + + + +
+ + + + + Site Name + Role + + + + + + {{ item.siteName }} + + + + + + + + + +
+
+ + +
+
+
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts index 4dd3f5c2..ace7ac42 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -19,11 +19,22 @@ export class CcvpnCreationComponent implements OnInit { @Input() namesTranslate; //输入项参数名字转换 @Output() closeCreate = new EventEmitter(); + //tabBarStyle + tabBarStyle = { + "height": "58px", + "width": "528px", + "box-shadow": "none", + "margin": "0", + "border-radius": "4px 4px 0px 0px" + }; templateParameters = {}; getTemParameters(){ //获取模板参数 let chosedtemplates = Object.values(this.createParams.templates); // console.log(this.createParams); console.log(chosedtemplates); //模板id数组 + if(this.createParams.commonParams.templateType == 'SOTN'){ + this.tabBarStyle["width"]="351px"; + } let types = ["sotnvpn","site","sdwanvpn"]; chosedtemplates.forEach((item,index)=>{ this.myhttp.getTemplateParameters(types[index],item) -- cgit 1.2.3-korg