From 88476a52e2f415becbed122416a4ca137016f49c Mon Sep 17 00:00:00 2001
From: wangyuerg <wangyuerg@chinamobile.com>
Date: Fri, 5 Mar 2021 16:59:51 +0800
Subject: feat:drawing

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Change-Id: Ifef7f2e08a18220f0464227352993479b3db0d70
Issue-ID: USECASEUI-527
---
 .../slicing-business-model.component.html          | 57 ++++++++++++++++++++-
 .../slicing-business-model.component.less          | 59 ++++++++++++++++++++++
 .../slicing-business-model.component.ts            | 18 ++++++-
 3 files changed, 132 insertions(+), 2 deletions(-)

(limited to 'usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model')

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
index 217e8bb4..3195783b 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
@@ -30,7 +30,62 @@
     </nz-list>
     <nz-list class="taskmodel_list" nzBordered [nzHeader]="'End to End Topology:'" [nzFooter]="null">
         <div>status:{{status}}</div>
-        <img style="width: 100%;" src="assets/images/slicing-business-management/example.png" alt="example" />
+        <!-- <img style="width: 100%;" src="assets/images/slicing-business-management/example.png" alt="example" /> -->
         <!-- <img src="assets/images/slicing-business-management/server.svg" /> -->
+        <div class="warp">
+            <div class="header">
+                <p>AN</p>
+                <p>TN</p>
+                <p>CN</p>
+            </div>
+            <ul class="list-box">
+                <li>
+                    <p>
+                        <img src="../../../../../../../assets/images/an-img.png" class="anImg"/>
+                    </p>
+                    <p>{{outerData.anVersion}}</p>
+                </li>
+                <li class="vLan-line">
+                    <p >
+                       vLan:{{outerData.vLanText}}
+                    </p>
+                    <p class="online-vlan"></p>
+                </li>
+                <li>
+                    <p>{{outerData.tnVersion}}</p>
+                    <p>
+                        <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/>
+                    </p>
+                    <p>{{outerData.tnText}}<br/>Gateway</p>
+                </li>
+                <li class="three-box" >
+                    <p>{{outerData.mbps}} Mbps/yyyG</p>
+                    <p>
+                       {{outerData.msText}} ms
+                    </p>
+                    <p  [ngClass]="{'online-type':outerData.orchestration_status!=='deactivated','offline-type':outerData.orchestration_status=='deactivated'}"></p>
+                    <p class="">Link Type:{{outerData.linkType}}</p>
+                </li>
+                <li>
+                    <p>{{outerData.tnEndVersion}}</p>
+                    <p>
+                        <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/>
+                    </p>
+                    <p>{{outerData.tnEndText}}<br/>Gateway</p>
+                </li>
+                <li class="vLan-line">
+                    <p >
+                       vLan:{{outerData.cnVlan}}
+                    </p>
+                    <p class="online-vlan"></p>
+                </li>
+                <li>
+                    <p>
+                        <img src="../../../../../../../assets/images/cn-cloud-img.jpg" class="cnCloud"/>
+                    </p>
+                    <p>{{outerData.cnVersion}}</p>
+                </li>
+            </ul>
+        </div>
     </nz-list>
 </nz-spin>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
index afccd61f..60dc8e59 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
@@ -1,3 +1,62 @@
 .taskmodel_list{
     margin-top: 20px;
 }
+a{
+    text-decoration: none;
+}
+.header{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 40px;
+    line-height: 40px;
+    color:#000;
+    margin:10px 20px;
+}
+.anImg{
+    width: 60px;
+    height: 85px;
+}
+.list-box{
+    display: flex;
+    justify-content:center;
+    align-items: center;
+   
+}
+.list-box li{
+    position: relative;
+}
+.clear{
+    clear: both;
+}
+.online-vlan{
+  width: 100px;
+  height: 1px;
+  background: #000;
+}
+.online-type{
+  width: 200px;
+  height: 3px;
+  background: #6a9bd0;
+}
+.offline-type{
+    width: 200px;
+    height: 3px;
+    background: #7e848a;
+}
+.vLan-line{
+    text-align: center;
+    top:-20px;
+}
+.tnImg{
+    width: 85px;
+    height: 85px;
+}
+.three-box{
+  text-align: center;
+    top:-20px;
+}
+.cnCloud{
+    width: 230px;
+    height: 160px;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
index b0207fd7..0bffccf5 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
@@ -24,9 +24,24 @@ export class SlicingBusinessModelComponent implements OnInit {
     nsiInfo: any[] = [];
     taskModel: boolean = false;
     isSpinning: boolean = true;
-    status: string = ""
+    status: string = "";
     ngOnInit() {
         console.log(this.businessId, "id",this.outerData);
+        const param = {
+            anVersion:'10.2.3.4.5',
+            vLanText:'111',
+            tnVersion:'10.0.1.1.1',
+            tnText:'TN EDGEText',
+            mbps:'333',
+            msText:'555',
+            linkType:'p2p/mp2p',
+            tnEndVersion:'10.1.1.1',
+            tnEndText:'TN EDGEText',
+            cnVlan:'66',
+            cnVersion:'1.1.2.3'
+        }
+        this.outerData = {...this.outerData,...param}
+        console.log('new',this.outerData)
         this.status = this.outerData.orchestration_status
         this.getDetail()
     }
@@ -46,6 +61,7 @@ export class SlicingBusinessModelComponent implements OnInit {
             });
             this.businessRequirement = [{ ...business_demand_info, area }];
             this.NSTinfo = [nst_info];
+            console.log('ngs',this.NSTinfo)
             if (nsi_info.nsi_id !== null) {
                 this.nsiInfo = [nsi_info];
             }
-- 
cgit 1.2.3-korg