[消防要素]修改页面布局

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

@@ -40,11 +40,12 @@
         <!-- 平面图 -->
         <div class="planarGraph">
            <div class="planarGraphHeader">
-            <label class="overflowText">楼层/区域</label>
+           <!--  <label class="overflowText">楼层/区域</label> -->
+           <img src="../../../assets/images/处置预案.png">
           </div>
           <div >
               <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>  
-                <label class="overflowText">{{item.name}}</label>
+                <label class="overflowText" style="font-size: 18px;">{{item.name}}</label>
               </div>
           </div>
 
@@ -229,11 +230,15 @@
                 
                 <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node,$event)" class="treeNode">
                   <button mat-icon-button disabled></button>
-                  <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+                  <span style="font-size: 15px;" title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
                     {{node.name}}      
                   </span> 
                   <span  *ngIf="node.isTemplate">({{node.children.length}})</span>
-                  <span class="isLookCss" (click)="clickLookItem(node,$event)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
+                  <!-- <span class="isLookCss" (click)="clickLookItem(node,$event)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span> -->
+                  <span class="isLookCss" (click)="clickLookItem(node,$event)">
+                    <img *ngIf="node.isLook" src="../../../assets/images/show.png" alt="">
+                    <img *ngIf="!node.isLook" src="../../../assets/images/hide.png" alt="">
+                  </span>
                 </mat-tree-node>
               
               
@@ -245,11 +250,15 @@
                       {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                     </mat-icon>
                   </button>
-                  <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+                  <span style="font-size: 15px;" title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
                     {{node.name}}      
                   </span>   
                   <span  *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
-                  <span class="isLookCss" (click)="clickLookItem(node,$event)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
+                  <!-- <span class="isLookCss" (click)="clickLookItem(node,$event)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span> -->
+                  <span class="isLookCss" (click)="clickLookItem(node,$event)">
+                    <img *ngIf="node.isLook" src="../../../assets/images/show.png" alt="">
+                    <img *ngIf="!node.isLook" src="../../../assets/images/hide.png" alt="">
+                  </span>
                 </mat-tree-node>
               
               </mat-tree>

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

@@ -14,11 +14,19 @@
   .buildingbtnchecked{
     color: white;
     background-image: url("../../../assets/images/标签选中.png")!important;
+    /* background-image: -webkit-linear-gradient(bottom, #fff, #9ABCE5); 
+    -webkit-background-clip: text; 
+    -webkit-text-fill-color: transparent; */
   }
 }
 
 //头部操作栏
 .headerOperate {
+  .xinzengtop{
+    margin: 2px 30px;
+    margin-top: 8px;
+  }
+  background-image: url("../../../assets/images/top.png");
   position: relative;
   span{
     font-size: 18px;
@@ -26,9 +34,9 @@
   flex: 2%;
   display: flex;
   align-items:center;
-  min-height: 40px;
+  min-height: 45px;
   box-sizing: border-box;
-  margin: 3px 0;
+  margin: 0 0;
   
   .bigeditdeletebtn{
     margin-right: 12px;
@@ -38,7 +46,7 @@
     // align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/
     justify-content: center;
     user-select: none;
-    background-image: url("../../../assets/images/标签正常.png") ;
+    //background-image: url("../../../assets/images/标签选中.png") ;
     background-size:100% 100%;
     color: white;
     span{
@@ -48,7 +56,7 @@
   }
   .bigeditdeletebtn:hover{
     cursor: pointer; 
-    background-image: url("../../../assets/images/标签经过.png") ;
+    background-image: url("../../../assets/images/标签选中.png") ;
   }
   .bigTalkBox{
     user-select: none;
@@ -141,14 +149,14 @@
     flex: 5;
   }
   .functionalDomainLeft {
-    // background: url("../../../assets/images/列表背景.png");
+    background: url("../../../assets/images/left\ list\ .png");
     background-size: 100% 100%;
     display: flex;
     flex-direction: column;
     margin-left: 0px;
     transition: margin-left 0.5s;
     // min-width: 235px;
-    border: 1px solid #30bbec;
+    //border: 1px solid #30bbec;
     width: 235px;
     left: 0;
     z-index: 111;
@@ -163,11 +171,15 @@
     flex: 1;
   }
   .functionalDomainRight {
+    background-image:url("../../../assets/images/right\ list\ .png") ;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    -moz-background-size: 100% 100%;
     color: white;
     z-index: 1001;
     margin-right: 0px;
     transition:  margin-right 0.5s;
-    border: 1px solid #30bbec;
+    //border: 1px solid #30bbec;
     width: 235px;
     right: 0;
     flex: 1;
@@ -194,16 +206,20 @@
   display: flex;
   align-content: center;
   span{
+    //padding: 8px 8px;
+    font-size: 18px;
     display: inline-block;
     flex: 1;
     text-align: center;
+    font-family:"MicrosoftYaHei-Bold";
   }
   span:hover{
     cursor: pointer;
   }
 }
 .selectedTitle{
-  background: #0c2d44;
+  //background: #83B0E0;
+  color: #82B0E0;
 }
 
 //右侧属性
@@ -360,6 +376,7 @@
       position: absolute;
       right: 6px;
       z-index: 1000;
+
     }
   }
   .mat-tree{

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

@@ -514,6 +514,7 @@ export class planComponent implements OnInit {
 
   //选择建筑
   checkedBuilding(item,index){
+    console.log(this.checkedBuildingIndex)
     if (this.checkedBuildingIndex!=index) {
       this.beforeOneCheckedBuilding = item
       this.checkedBuildingIndex = index