[完善] 左侧菜单工作栏完善

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

@@ -15,13 +15,59 @@
     <mat-drawer-container class='functionalDomainContent' [hasBackdrop]='false'>
       <mat-drawer #drawer opened='true' class='functionalDomainLeft'>
 
-      </mat-drawer>
+        <!-- 平面图 -->
+        <mat-accordion id="panel">
+          <mat-expansion-panel expanded>
+            <mat-expansion-panel-header class="panelHeader">
+              <label class="overflowText" style="font-weight: 550;">平面图</label>
+              <label class="hover"><mat-icon (click)='foundPanel($event)'>add</mat-icon></label>
+            </mat-expansion-panel-header>
+            <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
+              <mat-icon *ngIf="!item.imageUrl">broken_image</mat-icon>
+              <label class="overflowText">{{item.name}}</label>
+              <mat-icon title="替换底图" style="float: right; margin-top: 8px;" *ngIf="selectSitePlanIndex==key">photo_size_select_actual</mat-icon>
+              <!-- 右边定位操作栏 -->
+              <div id="rightOperate">
+
+              </div>
+              <!-- 右边定位操作栏 -->
+            </div>
+          </mat-expansion-panel>
+        </mat-accordion>
+
+        <!-- 素材库 -->
+        <mat-accordion id="panel">
+          <mat-expansion-panel>
+            <mat-expansion-panel-header class="panelHeader">
+              <label class="overflowText" style="font-weight: 550;">素材库</label>
+            </mat-expansion-panel-header>
+
+            <mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
+              <mat-expansion-panel (opened)='opened(item)'>
+                <mat-expansion-panel-header>
+                  <label class="text">{{item.name}}</label>
+                </mat-expansion-panel-header>
 
+                <div class="panelLibraryFlex">
+                  <div class="imgBox" *ngFor="let items of item.images;let key = index" [title]="items.name" (click)='selectImg(item,items,key)'
+                   [ngClass]="{'selectImg': selectLibrary==item.name && selectImageIndex==key}">
+                    <img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
+                    <p class="overflowText">{{items.name}}</p>
+                  </div>
+                </div>
+
+              </mat-expansion-panel>
+            </mat-accordion>
+
+          </mat-expansion-panel>
+        </mat-accordion>
+
+      </mat-drawer>
       <mat-drawer-content id='functionalDomainRight'>
         <div id="h5Unity">
           <div id='h5Canvas'>
             <!-- H5Canvas -->
-            <app-working-area></app-working-area>
+            <!-- <app-working-area></app-working-area> -->
           </div>
         </div>
 

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

@@ -1,3 +1,4 @@
+@import './panel.scss';
 .content {
   width: 100%;
   height: 93%;
@@ -24,18 +25,14 @@
 }
 
 //功能区
-//滚动条样式
-::-webkit-scrollbar{
-  width: 5px;
-  background-color: white;
-}
-::-webkit-scrollbar-thumb{
-  background-color: #999;
+.mat-icon {
+  color: #8E909F;
+  cursor:pointer;
+  vertical-align: middle;
 }
 .mat-drawer:not(.mat-drawer-side) {
   box-shadow: none;
   border: 1px solid #E6EAEE;
-  background-color: #E6EAEE;
 }
 .functionalDomain {
   flex: 90%;
@@ -44,10 +41,12 @@
     height: 100%;
   }
   .functionalDomainLeft {
+    min-width: 150px;
     width: 13%;
     height: 100%;
   }
   #functionalDomainRight {
+    min-width: 100px;
     background-color: #fff;
     height: 100%;
     display: flex;
@@ -69,4 +68,4 @@
       background-color: #E6EAEE;
     }
   }
-}
+}

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-collection-tools',
@@ -7,9 +8,73 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CollectionToolsComponent implements OnInit {
 
-  constructor() { }
+  constructor(private http:HttpClient,) { }
 
   ngOnInit(): void {
+    this.getAllLibrary()
+    this.getSitePlan()
   }
 
+  sitePlanData:any = []; //总平面图数据
+  selectingSitePlan:any; //选中的平面图
+  selectSitePlanIndex:number; //选中的平面图index
+
+  //获取总平面图
+  getSitePlan () {
+    this.http.get('/api/CompanyAccount/SitePlans').subscribe(data=>{
+      this.sitePlanData = data
+      if (this.sitePlanData.length) { //数据不为空时
+        this.selectingSitePlan = this.sitePlanData[0]
+        this.selectSitePlanIndex = 0 
+      }
+    })
+  }
+
+  //新增平面图 
+  foundPanel (e) {
+    e.stopPropagation()
+  }
+
+  //点击选中平面图时
+  selectSitePlan (item,index) {
+    this.selectingSitePlan = item
+    this.selectSitePlanIndex = index
+  }
+
+  allLibrary:any = []; //所有素材库 + 素材
+  selectLibrary:any; //选中的素材库
+  selectImage:any; //选中的素材库图片
+  selectImageIndex:number; //选中的素材库图片index
+
+  //获取素材库
+  getAllLibrary () {
+    this.http.get('/api/AssetLibraries?tag=input').subscribe((data:any)=>{
+      data.forEach(element => {
+        element.images = []
+      });
+      this.allLibrary = data
+    })
+  }
+
+  //素材库展开面板展开时
+  opened (e) {
+    if (!e.images.length) { //当前素材库没加载素材时
+      this.http.get(`/api/Assets?libraryId=${e.id}`).subscribe((data:any)=>{
+        data.forEach(element => {
+          element.imageUrl = element.imageUrl + '?x-oss-process=image/auto-orient,1' //压缩图片
+        });
+        e.images = data
+      })
+    }
+  }
+
+  //点击选中素材库图片时
+  selectImg (item,items,index) {
+    this.selectLibrary = item.name
+    this.selectImage = items
+    this.selectImageIndex = index
+  }
+
+
+
 }

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

@@ -0,0 +1,87 @@
+.panelHeader {
+  background: linear-gradient(to top,#cdced1,#FFF);
+}
+#panel{
+ .hover {
+   width: 18px;
+   height: 18px;
+   margin-left: 40%;
+   border: 1px solid #8E909F;
+   border-radius: 3px;
+   .mat-icon {font-size: 18px;}
+ }
+  .hover:hover { 
+    background-color: #4DA5FA;
+    .mat-icon {color: #fff;}
+  }
+  #panelLibrary .text{
+    box-sizing: border-box;
+    margin-left: 10px;
+  }
+}
+
+//平面图
+.sitePlanContent {
+  width: 100%;
+  height: 36px;
+  line-height: 36px;
+  box-sizing: border-box;
+  padding: 0 10px 0 25px;
+  cursor:pointer;
+  .mat-icon {
+    font-size: 20px;
+  }
+}
+//右边操作栏
+#rightOperate{
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: -36px;
+  right: -100px;
+  z-index: 999;
+  background-color: #999;
+}
+
+//素材库图片flex
+.panelLibraryFlex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between; /* 水平居中 */
+  .imgBox {
+    width: 70px;
+    height: 100px;
+    display: inline-block;
+    text-align: center;
+    border-radius: 3px;
+    margin: 5px 0;
+    img {
+      width: 70px;
+      height: auto;
+      max-height: 70px;
+      cursor:pointer;
+    }
+    p {
+      font-size: 12px;
+      cursor:pointer;
+    }
+  }
+}
+
+//文本溢出
+.overflowText {
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}
+//选中平面图时
+.selectSitePlan {
+  color: #fff;
+  background-color: #6BC2FF;
+}
+//选中素材库图片时
+.selectImg {
+  color: #fff;
+  background-color: #4DA5FA;
+}

src/app/working-area/working-area.component.ts

@@ -30,7 +30,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.createCanvas();
-      this.createBackgroundImage();
+      this.createBackgroundButton();
     }, 0);
   }
 

src/styles.scss

@@ -70,4 +70,12 @@ table td.mat-footer-cell:last-of-type{
  }
 .mat-tab-body-wrapper{
   overflow: auto!important
+}
+//滚动条样式
+::-webkit-scrollbar{
+  width: 5px;
+  background-color: white;
+}
+::-webkit-scrollbar-thumb{
+  background-color: #999;
 }