[完善]根据文档修正字体，拖动div，图片放大等功能

src/app/ui/collection-tools/collection-tools.component.html

@@ -4,8 +4,10 @@
     <button mat-button (click)="toggle()">
       <mat-icon style="vertical-align: middle;">toc</mat-icon>
     </button>
-
-    <span style="color: gray;margin-right: 10px;">图标大小</span>
+    <button mat-button (click)="toggle2()">
+      <mat-icon style="vertical-align: middle;">list</mat-icon>
+    </button>
+    <span style="color: gray;margin-right: 10px;margin-left: 10px;">图标大小</span>
     <mat-form-field style="margin-top: 3px;">
       <mat-select (selectionChange)='iconScale()' [(ngModel)]="selected">
         <mat-option value="1">正常</mat-option>
@@ -14,26 +16,26 @@
       </mat-select>
     </mat-form-field>
     <button (click)="copyAsset()" class="copytobutn" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
-      <mat-icon>library_books</mat-icon>
+      <mat-icon style="padding-bottom: 7px;">library_books</mat-icon>
     </button>
 
     <button (click)="pasteAsset()" class="copytobutn" mat-button title="粘贴" *ngIf="isEditPattern">
-      <mat-icon>screen_share</mat-icon>
+      <mat-icon style="padding-bottom: 7px;">screen_share</mat-icon>
     </button>
 
     <span style="margin-right:20px;user-select: none;margin-left: 12px;" class="nameShow" (click)="basicInfoClick()">
       基本信息名称
       <mat-icon [ngClass]="{'icongray': !basicInfo}">visibility</mat-icon>
     </span>
-    <span style="user-select: none;" class="nameShow" (click)="wantToWorkClick()">
+    <!-- <span style="user-select: none;" class="nameShow" (click)="wantToWorkClick()">
       想定作业名称
       <mat-icon [ngClass]="{'icongray': !wantToWork}">visibility</mat-icon>
-    </span>
+    </span> -->
 
-    <span style="position: absolute;right: 20px;cursor: pointer;">
+    <span style="position: absolute;right: 60px;cursor: pointer;">
       <mat-icon title="查看/编辑模式" (click)="lookpat()" *ngIf="isEditPattern">tv</mat-icon>
       <mat-icon title="查看/编辑模式" (click)="editpat()" *ngIf="!isEditPattern">create</mat-icon>
-      <mat-icon *ngIf="isEditPattern " style="margin-left: 8px;" title="保存" (click)="saveSite()">description</mat-icon>
+      <mat-icon *ngIf="isEditPattern " style="margin-left: 12px;" title="保存" (click)="saveSite()">description</mat-icon>
     </span>
   </div>
 
@@ -48,9 +50,9 @@
       <span>{{item.name}}</span>
       <span class="editdeletebtn" *ngIf="isEditPattern">
         <mat-icon (click)="editBuilding($event,item)"
-          style="font-size: 16px;vertical-align:sub;margin-left: 6px;color: rgb(26, 194, 26);">create</mat-icon>
+          style="font-size: 23px;vertical-align:sub;margin-left: 6px;color: rgb(26, 194, 26);">create</mat-icon>
         <mat-icon (click)="deleteBuilding($event,item)"
-          style="font-size: 17px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon>
+          style="font-size: 23px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon>
       </span>
     </button>
     <button mat-button (click)="createBuilding()" *ngIf="isEditPattern">
@@ -66,7 +68,7 @@
       <app-working-area #canvas></app-working-area>
       <!-- H5Canvas -->
       <div id="leftDiv" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true}" style="user-select: none">
-
+        <div class="leftDragDiv"  (mousedown)="leftDivMouseDown($event)"></div>
         <!-- 平面图 -->
         <div class="planarGraph">
           <div class="planarGraphHeader" (click)='togglePlanarGraph()'>
@@ -142,7 +144,7 @@
 
       </div>
 
-      <div id="rightDiv" class="functionalDomainRight publicCss " style="user-select: none">
+      <div id="rightDiv" class="functionalDomainRight publicCss " [ngClass]="{'togglePanel2': toggleExpandPanelRight==true}" style="user-select: none">
         <!-- 右侧div鼠标拖动div -->
         <div style="width: 3px;height: 100%;position: absolute;left: 0;cursor: e-resize;z-index: 1000;" (mousedown)="rightDivMouseDown($event)"></div>
         <!-- 属性 -->

src/app/ui/collection-tools/collection-tools.component.scss

@@ -35,7 +35,11 @@
     display: flex;
     justify-content: center;
   }
-  font-size: 15px;
+  font-size: 18px;
+  mat-icon{
+    font-size: 26px;
+    vertical-align: text-top;
+  }
   span{
     height: 24px;
     line-height: 24px;
@@ -44,13 +48,16 @@
 
 //头部操作栏
 .headerOperate {
+  span{
+    font-size: 18px;
+  }
   flex: 5%;
   display: flex;
   align-items:center;
   min-height: 40px;
   box-sizing: border-box;
   margin: 3px 0;
-  background-color: #ECF0F3;
+  background-color: white;
   button{
     border: 0.5px solid rgb(208, 211, 214);
     margin: 0 2px;
@@ -91,20 +98,36 @@
     flex-direction: column;
     margin-left: 0px;
     transition: margin-left 0.5s;
-    min-width: 150px;
+    min-width: 160px;
     border: 1px solid #E6EAEE;
     width: 230px;
     left: 0;
+    .leftDragDiv{
+      position: absolute;
+      right: 0;
+      height: 100%;
+      width: 3px;
+      z-index: 1000;
+      cursor: e-resize;
+    }
   }
   .functionalDomainRight {
+    margin-right: 0px;
+    transition:  margin-right 0.5s;
     border: 1px solid #464646;
     width: 230px;
     right: 0;
+    
+  }
+    //右边导航栏显示隐藏
+  .togglePanel2 {
+    margin-right: -2000px;
+    transition:  margin-right 1s;
   }
   //左侧导航栏显示隐藏
   .togglePanel {
-    margin-left: -300px;
-    transition: margin-left 0.5s;
+    margin-left: -2000px;
+    transition: margin-left 1s;
   }
 
 }

src/app/ui/collection-tools/collection-tools.component.ts

@@ -157,7 +157,22 @@ export class CollectionToolsComponent implements OnInit {
       document.onmouseup = null;
     }
   }
-
+  //左侧div边框宽度调节
+  leftDivMouseDown(e){
+    document.onmousemove = (ev) => {
+      let bodyWidth = document.body.clientWidth //网页宽度
+      let maxWidth = bodyWidth - 260 - this.element.nativeElement.querySelector('#rightDiv').clientWidth  //最大宽度
+      if(ev.clientX - 240 >= maxWidth){
+        this.element.nativeElement.querySelector('#leftDiv').style.width = maxWidth + 'px'
+      }else{
+        this.element.nativeElement.querySelector('#leftDiv').style.width = ev.clientX - 260 + 'px';
+      }
+    }
+    document.onmouseup = () => {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    }
+  }
   
   //放大图标
   iconScale(){
@@ -952,12 +967,17 @@ export class CollectionToolsComponent implements OnInit {
   isShowProperty:boolean = false //属性栏 是否有东西
 
   toggleExpandPanel:boolean = false; //可展开面板展开或关闭
+  toggleExpandPanelRight:boolean = false; //可展开面板展开或关闭
   togglePlane:boolean = true; //可展开面板平面图 显隐
   toggleMaterialBank:boolean = false; //可展开面板素材库 显隐
   //可展开面板展开或关闭
   toggle () {
     this.toggleExpandPanel = !this.toggleExpandPanel
   }
+  //可展开面板展开或关闭
+  toggle2 () {
+    this.toggleExpandPanelRight = !this.toggleExpandPanelRight
+  }
   //可展开面板 平面图 展开或关闭
   togglePlanarGraph () {
     this.togglePlane = !this.togglePlane
@@ -1549,7 +1569,7 @@ export class ViewDetails {
   // myControl = new FormControl();
   //注入MatDialogRef，可以用来关闭对话框
   //要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
-  constructor(private http: HttpClient,public dialogRef: MatDialogRef<ViewDetails>,@Inject(MAT_DIALOG_DATA) public data) {}
+  constructor(private http: HttpClient,public dialogRef: MatDialogRef<ViewDetails>,@Inject(MAT_DIALOG_DATA) public data,private element: ElementRef) {}
   imagesArr = this.data.imagesArr
   onNoClick(): void {
     this.dialogRef.close();
@@ -1571,5 +1591,16 @@ export class ViewDetails {
   closeDialog(){
     this.dialogRef.close();
   }
+  count = 10
+  zoomimg(e) {
+    if(this.count != 1 || e.wheelDelta >= 120){
+      if(e.wheelDelta >= 120){
+        this.count++
+      }else{
+        this.count--
+      }
+    }
+    e.srcElement.style.zoom = this.count + '0%'
+  }
 
 }

src/app/ui/collection-tools/viewdetails.html

@@ -5,7 +5,17 @@
     
     <div class="swiper-wrapper">
         <div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr">
-            <img style="max-width: 96%;max-height: 100%;" [src]="img.PropertyValue" alt="">
+            <img id="bigimg" (mousewheel)="zoomimg($event)" style="
+            max-width: 96%;
+            max-height: 100%;
+            min-width: 1px;
+            min-height: 1px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            margin: auto;" [src]="img.PropertyValue" alt="">
         </div>
     </div>
       <!-- 如果需要导航按钮 -->

src/app/ui/fire-fighting-device/fire-fighting-device.component.scss

@@ -114,8 +114,6 @@ textarea {
   background-color: #999;
 }
 
-
-
 //img图片列表页面
 .imageList {
   width: 100%;