feat: update

src/app/ControlPage/control/control.component.css

-app-element-term, div {
+div, app-element-term, app-element-guacamole {
   height: 100%;
   display: none;
 }

src/app/ControlPage/control/control.component.html

@@ -10,4 +10,11 @@
                     [ngClass]="{'active':i==NavList.Active}"
                     *ngIf="m.type=='ssh'">
   </app-element-term>
+  <app-element-guacamole [host]="m.host"
+                         [userid]="m.user.id"
+                         [index]="i"
+                         [ngClass]="{'active':i==NavList.Active}"
+                         *ngIf="m.type=='rdp'">
+
+  </app-element-guacamole>
 </div>

src/app/ControlPage/control/controlnav/controlnav.component.css

@@ -81,3 +81,19 @@
   padding: 5px 20px 4px 15px;
   height: 18px;
 }
+
+/*
+ *  scrollbar
+ */
+.tabs::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5;
+}
+
+.tabs::-webkit-scrollbar {
+  height: 1px;
+}
+
+.tabs::-webkit-scrollbar-thumb {
+  background-color: #19aa8d;
+}

src/app/elements/guacamole/guacamole.component.html

-<div>
-  <iframe src="{{target}}"></iframe>
-</div>
+<iframe [src]="trust(target)"></iframe>

src/app/elements/guacamole/guacamole.component.scss

+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: white;
+}

src/app/elements/guacamole/guacamole.component.ts

 import {Component, Input, OnInit} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+import {NavList} from '../../ControlPage/control/control.component';
 
 @Component({
   selector: 'app-element-guacamole',
@@ -6,13 +8,24 @@ import {Component, Input, OnInit} from '@angular/core';
   styleUrls: ['./guacamole.component.scss']
 })
 export class ElementGuacamoleComponent implements OnInit {
-  @Input() target: string;
+  @Input() host: any;
+  @Input() userid: any;
+  @Input() index: number;
+  target: string;
 
-  constructor() {
+  constructor(private sanitizer: DomSanitizer) {
   }
 
   ngOnInit() {
-    this.target = '/guacamole/?asset_id=' + '&system_user_id=' + '';
+    // this.target = '/guacamole/?asset_id=' + '&system_user_id=' + '';
+    this.target = 'https://www.baidu.com';
   }
 
+  trust(url) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+  Disconnect() {
+    NavList.List[this.index].connected = false;
+  }
 }