[Update] 更新排版和修复bug

src/app/elements/asset-tree/asset-tree.component.ts

@@ -47,14 +47,6 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
     if (this.Data) {
       this.draw();
     }
-    // clearInterval(this.timer);
-    //
-    // this.timer = setInterval(() => {
-    //   if (this.Data) {
-    //     this.draw();
-    //     clearInterval(this.timer);
-    //   }
-    // }, 100);
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -113,10 +105,15 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
             });
             assets[vv['id'] + '@' + vvv['id']] = true;
           }
-
         });
       });
     });
+    this.nodes.sort(function(node1, node2) {
+      if (node1.isParent && !node2.isParent) {
+        return -1;
+      }
+      return node1.name < node2.name ? -1 : 1;
+    });
     $.fn.zTree.init($('#ztree'), this.setting, this.nodes);
   }
 

src/app/elements/term/term.component.css

@@ -13,6 +13,7 @@ div {
   white-space: nowrap;
   display: inline-block;
   height: 100%;
+  background: #0d8ddb;
 }
 
 div.terminal div span {

src/app/elements/term/term.component.ts

@@ -46,15 +46,15 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
         term.row = parseInt(this._cookie.get('rows'), 10);
       }
     } else {
-      term.col = Math.floor(jQuery(this.el.nativeElement).width() / jQuery('#liuzheng').width() * 8) - 3;
-      term.row = Math.floor(jQuery(this.el.nativeElement).height() / jQuery('#liuzheng').height()) - 3;
+      term.col = Math.floor(jQuery(this.el.nativeElement).width() / jQuery('#marker').width() * 6) - 3;
+      term.row = Math.floor(jQuery(this.el.nativeElement).height() / jQuery('#marker').height()) - 3;
       term.term = this.term;
     }
     this.term.open(this.el.nativeElement, true);
     const that = this;
     window.onresize = function () {
-      term.col = Math.floor(jQuery(that.el.nativeElement).width() / jQuery('#liuzheng').width() * 8) - 3;
-      term.row = Math.floor(jQuery(that.el.nativeElement).height() / jQuery('#liuzheng').height()) - 3;
+      term.col = Math.floor(jQuery(that.el.nativeElement).width() / jQuery('#marker').width() * 6) - 3;
+      term.row = Math.floor(jQuery(that.el.nativeElement).height() / jQuery('#marker').height());
       if (term.col < 80) {
         term.col = 80;
       }

src/app/pages/control/control.component.html

 <div class="container-fluid row" fxLayout="row" ngxSplit="row">
-  <div fxFlex="20%" ngxSplitArea *ngIf="DataStore.leftbarshow">
+  <div fxFlex="1 1 20%" minBasis="100px" maxBasis="800px" fxFlexFill ngxSplitArea *ngIf="DataStore.leftbarshow">
     <pages-control-cleftbar></pages-control-cleftbar>
   </div>
-  <div fxFlex="15px" ngxSplitHandle ></div>
-  <div fxFlex>
+  <div fxFlex="0" ngxSplitHandle></div>
+  <div fxFlex="1 1 80%" ngxSplitArea class="content">
     <pages-control-control></pages-control-control>
   </div>
 </div>
+

src/app/pages/control/control/control.component.html

 <div fxLayout="column" ngxSplit="column" style="width: 100%;height: 100%;">
-  <div fxflex="0 0 50px" class="search">
+  <div fxFlex="1 1 30px" class="search">
     <pages-control-nav></pages-control-nav>
   </div>
   <div fxFlex>
@@ -15,9 +15,9 @@
                           [userid]="m.user.id"
                           *ngIf="m.type=='rdp'">
       </elements-guacamole>
-      <elements-settings [index]="i"
-                         *ngIf="m.type=='settings'">
-      </elements-settings>
+      <!--<elements-settings [index]="i"-->
+                         <!--*ngIf="m.type=='settings'">-->
+      <!--</elements-settings>-->
     </div>
   </div>
 </div>

src/app/pages/control/control/controlnav/nav.component.css

@@ -2,6 +2,7 @@
   height: 30px;
   overflow-y: hidden;
   overflow-x: auto;
+  position: relative;
 }
 
 .tabs ul li.disconnected {
@@ -32,7 +33,7 @@
 
 .tabs ul li.active {
   box-sizing: border-box;
-  border-bottom: 5px solid #19aa8d !important;
+  border-bottom: 3px solid #19aa8d !important;
 }
 
 .tabs ul li span {
@@ -43,7 +44,8 @@
   font-family: 'Roboto', sans-serif;
   font-size: 13px;
   text-decoration: none;
-  padding: 8px 20px 6px 15px;
+  padding-left: 24px;
+  line-height: 26px;
   cursor: default;
   width: 115px;
   height: 21px;
@@ -66,7 +68,8 @@
 }
 
 .tabs ul li.active span {
-  padding: 5px 20px 4px 15px;
+  padding-left: 24px;
+  line-height: 26px;
   color: white;
   height: 18px;
 }

src/app/pages/control/control/controlnav/nav.component.html

 <div class="scroll-botton">
-  &nbsp; <a class="left" (click)="scrollleft()"><i class="fa fa-caret-left"></i></a>
   &nbsp;
+  <a class="left" (click)="scrollleft()"><i class="fa fa-caret-left"></i></a>
   <a class="right" (click)="scrollright()"><i class="fa fa-caret-right"></i></a>
   &nbsp;
 </div>

src/index.html

@@ -10,7 +10,6 @@
 </head>
 <body>
 <app-root></app-root>
-<span id="liuzheng" style="display: none">liuzheng</span>
-
+<span id="marker" style="display: none">marker</span>
 </body>
 </html>

src/styles.css

@@ -16,7 +16,7 @@ app-root {
   height: 100%;
 }
 
-#liuzheng {
+#marker {
   position: fixed;
   top: 0;
   left: 0;