[新增]平面图基本完成

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

@@ -8,12 +8,24 @@
     <div class="bigeditdeletebtn" *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
       <span>{{item.name}}</span>
     </div>
-    <div class="bigTalkBox" style="position: absolute;right: 26px;" (click)="openTalkDiv()">
-      <mat-icon>settings_voice</mat-icon>
+    <div class="bigTalkBox" style="position: absolute;right: 26px;">
+      <mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon>
       <div class="talkBox" *ngIf="isOpenTalk">
         <div class="btndiv"> 
           <div>泵房</div>
           <div>控制室</div>
+          
+        </div>
+        <div class="bottomDiv">
+          <div>
+            <mat-icon>settings_voice</mat-icon>
+          </div>
+          <div>
+            按住说话
+          </div>
+          <div>
+            <mat-icon>search</mat-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -38,7 +50,7 @@
 
       </div>
       <!-- H5Canvas -->
-      <div class="canvas">
+      <div class="canvas" style="padding:3px 5px;padding-bottom: 15px;">
         <app-working-area #canvas [init]='this'></app-working-area>
       </div>
       <!-- H5Canvas -->
@@ -101,22 +113,29 @@
                 <input class="input" [(ngModel)]="isHighLight" type="checkbox">
                 <span style="font-size: 14px;">选中高亮</span>
               </div> -->
-              <div class="colorBigDiv" *ngIf="canvasAssetObj.FillMode == 0">
+              <div *ngIf="canvasAssetObj.FillMode == 0" style="margin-top: 6px;">
                 <div class="colorBigTemplateDiv">
-                  <span>颜色</span>
+                  <span style="
+                  font-size: 16px;
+                  color: #d0e0f4;
+                  padding-left: 7px;
+                  letter-spacing:3px;
+                  margin: 5px 0;">颜色</span>
                   <div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
 
                   </div>
                 </div>
-                <div class="colorDiv"> 
+                <!-- <div class="colorDiv"> 
                   <ul>
                       <li class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li>
                   </ul>
-                </div>
-                <span style="color: #9c9fa5;font-size: 14px;">透明度</span>
-                <mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
+                </div> -->
+                <p>透明度</p>
+                <!-- <span style="color: #9c9fa5;font-size: 14px;">透明度</span> -->
+                <!-- <mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
                   [(ngModel)]="colorDivSliderValue" (change)="colorDivSliderChange()"></mat-slider>
-                <span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
+                <span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span> -->
+                <div class="siteproperty_size">{{colorDivSliderValue}}%</div>
               </div>
               <div *ngFor="let item of PropertyInfos;index as key ">
                 <!-- 单行文本 -->
@@ -143,9 +162,9 @@
                     <p style="width: 40%;display: inline-block;">{{item.PropertyName}}</p>
                     <span style="width: 26%;text-align:right;font-size: 13px;">{{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}}</span>
                
-                    <div style="position: relative;;width: 89%;border:1px solid rgb(208, 211, 214);height: 100px;margin: 6px auto;" class="swiper-container">
+                    <div style="position: relative;;width: 89%;border:1px solid rgb(208, 211, 214);height: 140px;margin: 6px auto;" class="swiper-container">
                       <div id="viewerjs" class="swiper-wrapper" [ngClass]="{'noImgCss': imagesArr.length == 0}">
-                        <div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"><img [src]="img.PropertyValue + '?x-oss-process=image/resize,m_fixed,h_100,w_100'" alt="" [attr.data-original]="img.PropertyValue"></div>
+                        <div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"><img [src]="img.PropertyValue + '?x-oss-process=image/resize,m_fixed,h_140,w_140'" alt="" [attr.data-original]="img.PropertyValue"></div>
                       </div>
                       <!-- 如果需要导航按钮 -->
                       <div class="swiper-button-next"></div>

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

@@ -14,6 +14,7 @@
   .buildingbtnchecked{
     // background-color: #e46b03;
     color: white;
+    background-image: url("../../../assets/images/标签选中.png")!important;
   }
 }
 
@@ -38,22 +39,28 @@
     // align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/
     justify-content: center;
     user-select: none;
-    background-image: url("../../../assets/images/numbg.png") ;
+    background-image: url("../../../assets/images/标签正常.png") ;
     background-size:100% 100%;
     color: white;
     span{
-      margin: 0 13px  ;
+      padding: 0 13px;
+      padding-right: 18px;
     }
   }
   .bigeditdeletebtn:hover{
-    cursor: pointer;
+    cursor: pointer; 
+    background-image: url("../../../assets/images/标签经过.png") ;
   }
   .bigTalkBox{
     user-select: none;
-    right: 26px;
+    .titleIcon{
+      font-size: 33px;
+      vertical-align: sub;
+      color: white;
+    }
     .talkBox{
-      width: 330px;
-      height: 360px;
+      width: 309px;
+      height: 326px;  
       border: 1px solid #30bbec;
       background-color: #013a64;
       opacity: .9 ;
@@ -63,9 +70,47 @@
       z-index: 2000;
       .btndiv{
         div{
-          border-radius: 8px;
+          border-radius: 18px;
+          width: 70px;
+          height: 30px;
+          text-align: center;
+          line-height: 30px;
+          display: inline-block;
+          font-size: 13px;
+          color: white;
+          cursor: pointer;
+          
+        }
+        div:nth-child(1){
+          background-color: #fe9400;
+          margin: 10px;
+        }
+        div:nth-child(2){
+          background-color: #f95e5a;
+        }
+      }
+      .bottomDiv{
+        position: absolute;
+        bottom:6px;
+        width: 100%;
+        height: 32px;
+        line-height: 32px;
+        display: flex;
+        color: white;
+        text-align: center;
+        div:nth-child(1){
+          flex: 1;
+        }
+        div:nth-child(2){
+          flex: 6;
+          color: #409eff;
+          background: url('../../../assets/images/输入框.png');
+          background-size: 100% 100%;
+        }
+        div:nth-child(3){
+          flex: 1;
+
         }
-        div:flist
       }
     }
   }
@@ -97,9 +142,8 @@
     flex: 5;
   }
   .functionalDomainLeft {
-
-    background-color: #113e5e;
-    // opacity: 0.8;
+    // background: url("../../../assets/images/列表背景.png");
+    background-size: 100% 100%;
     display: flex;
     flex-direction: column;
     margin-left: 0px;
@@ -121,7 +165,7 @@
   }
   .functionalDomainRight {
     color: white;
-    background-color: #113e5e;
+    // background-color: #113e5e;
     z-index: 1001;
     margin-right: 0px;
     transition:  margin-right 0.5s;
@@ -271,21 +315,7 @@
     .colorBigDiv{
       width: 88%;
       margin-left: 8px;
-      .colorBigTemplateDiv{
-        span{
-          color: #9c9fa5;
-          font-size: 14px;
-          height: 26px;
-          line-height: 26px;
-        }
-        .colorTemplateDiv{
-          width: 65%;
-          height: 22px;
-          display: inline-block;
-          vertical-align: middle;
-          margin-left: 26px;
-        }
-      }
+      
       
       .colorDiv{
         .colorLi{
@@ -300,7 +330,21 @@
         }
       }
     }
-      
+    .colorBigTemplateDiv{
+      span{
+        color: #9c9fa5;
+        font-size: 14px;
+        height: 26px;
+        line-height: 26px;
+      }
+      .colorTemplateDiv{
+        width: 65%;
+        height: 22px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 26px;
+      }
+    }
   }
 }
 //右侧消防要素

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

@@ -695,7 +695,7 @@ export class planComponent implements OnInit {
   //陈鹏飞↓↓↓
   //陈鹏飞↓↓↓
   //陈鹏飞↓↓↓
-  params = {companyId: "5e9964caa760a059e84512e9"}
+  params = {companyId: "5eaa261766f97891845a6caa"}
   allFireElements:any = []; //当前 单位/建筑 下的消防要素
 
   isShowAttribute:boolean = true; //属性栏 是否显示 默认数据