feat:drawing

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Change-Id: Ifef7f2e08a18220f0464227352993479b3db0d70
Issue-ID: USECASEUI-527

11 files changed, 141 insertions, 7 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
index e95e2452..7fd459cc 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
@@ -18,7 +18,7 @@
                                <p>Note: If coverageArea is not at all provided by the user (as it is an optional input, and also optional in Service Profile), we will assume that the entire network is required to be covered. For Coverage Area Number, please enter the rectangle grid numbers corresponding to the physical coverage areas that you see on the map image. The following image shows the rectangular grid numbers for a coverage area, you can take it as an example:</p> 
                                 <img src="../../../../../../assets/images/coverageAreaMap.png" class="detail-img"/>
                             </div>
-                            <span class="detail-icon" *ngIf="item.key === 'coverageAreaNumber'" (mouseover)="detailFn(item.coverflag)" (mouseleave)="detailFn(item.coverflag)" >?</span>
+                            <img src="../../../../../../assets/images/ask-img.png" alt="" class="detail-icon" *ngIf="item.key === 'coverageAreaNumber'" (mouseover)="detailFn(item.coverflag)" (mouseleave)="detailFn(item.coverflag)" />
                     </nz-tooltip>
                     <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
                         *ngIf="item.type === 'radio'">
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less
index c0b15eb3..4feac5d7 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less
@@ -40,7 +40,7 @@
   text-indent: 2em;
   position: absolute;
   right: -200px;
-  top: -458px;
+  top: -430px;
   color:#ffffff;
   p{
     padding: 10px 10px 0 10px;
@@ -49,7 +49,10 @@
 }
 .detail-icon{
   position: absolute;
-   right: -16px;
+   right: -26px;
+   bottom:-2px;
+   width:20px;
+   height:20px;
 cursor: pointer;
 
 }
@@ -58,7 +61,7 @@ cursor: pointer;
   content: '';
     display: block;
     position: absolute;
-    right: 178px;
+    right: 175px;
     bottom: -16px;
     border: 20px solid transparent;
     border: 8px solid transparent;
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];
             }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
index 640ba3b4..bcd024ec 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
@@ -61,8 +61,9 @@
                             </div>
                         </td>
                         <td>
+                            <!-- [ngClass]="{'cannotclick':data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100'}" -->
                             <a (click)="showdetail(data)"
-                                [ngClass]="{'cannotclick':data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100'}">View
+                               >View
                                 Detail</a>
                         </td>
                     </tr>
diff --git a/usecaseui-portal/src/assets/images/an-img.png b/usecaseui-portal/src/assets/images/an-img.png
new file mode 100644
index 00000000..15434978
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/an-img.png
diff --git a/usecaseui-portal/src/assets/images/ask-img.png b/usecaseui-portal/src/assets/images/ask-img.png
new file mode 100644
index 00000000..76a74ebe
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/ask-img.png
diff --git a/usecaseui-portal/src/assets/images/cn-cloud-img.jpg b/usecaseui-portal/src/assets/images/cn-cloud-img.jpg
new file mode 100644
index 00000000..4a484db1
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/cn-cloud-img.jpg
diff --git a/usecaseui-portal/src/assets/images/cn-img.jpg b/usecaseui-portal/src/assets/images/cn-img.jpg
new file mode 100644
index 00000000..dbf5ed5b
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/cn-img.jpg
diff --git a/usecaseui-portal/src/assets/images/tn-edge-img.png b/usecaseui-portal/src/assets/images/tn-edge-img.png
new file mode 100644
index 00000000..c4093e30
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/tn-edge-img.png