[完善]修改层平面图建筑栏列表显示

src/app/ui/basicinfo/basicinfo.component.ts

@@ -17,7 +17,6 @@ import { async } from '@angular/core/testing';
 import { MatTableDataSource } from '@angular/material/table';
 import { isNgTemplate } from '@angular/compiler';
 import * as _ from 'lodash';
-import Swiper from 'swiper';
 import { LookMaster } from './lookmaster.component'
 declare var AMap: any;
 

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

@@ -46,7 +46,7 @@
   <div class="headerOperate">
     <button mat-button *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" class="bigeditdeletebtn"
       [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
-      <span>{{item.name}}</span>
+      <span class="name" [title]="item.name">{{item.name}}</span>
       <span class="editdeletebtn" *ngIf="isEditPattern">
         <mat-icon (click)="editBuilding($event,item)"
           style="font-size: 23px;vertical-align:sub;margin-left: 6px;color: rgb(26, 194, 26);">create</mat-icon>

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

@@ -1,7 +1,9 @@
 @import './panel.scss';
-.icongray{
+
+.icongray {
   color: #D9D0DC;
 }
+
 .content {
   width: 100%;
   height: 100%;
@@ -11,7 +13,7 @@
   display: flex;
   flex-direction: column;
 
-  .buildingbtnchecked{
+  .buildingbtnchecked {
     background-color: #34A6FD;
     color: white;
   }
@@ -22,36 +24,46 @@
   position: relative;
   flex: 5%;
   display: flex;
-  align-items:center;
+  align-items: center;
   min-height: 40px;
   background-color: #fff;
-  .zoom{
+
+  .zoom {
     display: flex;
     align-items: center;
     margin-left: 15px;
     cursor: pointer;
-    img{
+
+    img {
       margin-right: 3px;
     }
   }
+
   .marginLeftRight {
     margin: 0 8px;
     font-size: 16px;
-    user-select: none;
+    user-select: none;
     cursor: pointer;
-    .mat-icon { vertical-align: middle; font-size: 24px; }
+
+    .mat-icon {
+      vertical-align: middle;
+      font-size: 24px;
+    }
   }
-  .nameShow{
+
+  .nameShow {
     cursor: pointer;
-    user-select: none;
+    user-select: none;
   }
-  .copytobutn{
+
+  .copytobutn {
     width: 60px;
     min-width: 60px;
     display: flex;
     justify-content: center;
   }
-  span{
+
+  span {
     height: 24px;
     line-height: 24px;
   }
@@ -59,25 +71,47 @@
 
 //头部操作栏
 .headerOperate {
-  span{
+  overflow-x: auto;
+
+  span {
     font-size: 18px;
   }
+
   flex: 5%;
   display: flex;
   align-items:center;
-  min-height: 40px;
+  min-height:45px;
   box-sizing: border-box;
   margin: 3px 0;
   background-color: white;
-  button{
+
+  button {
     border: 0.5px solid rgb(208, 211, 214);
     margin: 0 2px;
   }
-  .editdeletebtn{
+
+
+
+  .bigeditdeletebtn {
+    overflow: hidden;
+    min-width: 260px;
+    max-width: 260px;
+
+    .name {
+      display: inline-block;
+      max-width: 200px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .editdeletebtn {
     display: none;
   }
-  .bigeditdeletebtn:hover{
+
-    .editdeletebtn{
+  .bigeditdeletebtn:hover {
+    .editdeletebtn {
       display: inline-block;
     }
   }
@@ -86,9 +120,10 @@
 //功能区
 // icon统一样式
 .mat-icon {
-  cursor:pointer;
+  cursor: pointer;
   vertical-align: middle;
 }
+
 //左右两侧功能栏 统一样式
 .publicCss {
   background-color: #fff;
@@ -97,13 +132,16 @@
   height: 100%;
   top: 0;
 }
+
 .functionalDomain {
   flex: 90%;
+
   .functionalDomainContent {
     position: relative;
     width: 100%;
     height: 100%;
   }
+
   .functionalDomainLeft {
     display: flex;
     flex-direction: column;
@@ -113,7 +151,8 @@
     border: 1px solid #E6EAEE;
     width: 230px;
     left: 0;
-    .leftDragDiv{
+
+    .leftDragDiv {
       position: absolute;
       right: 0;
       height: 100%;
@@ -122,19 +161,22 @@
       cursor: e-resize;
     }
   }
+
   .functionalDomainRight {
     margin-right: 0px;
-    transition:  margin-right 0.5s;
+    transition: margin-right 0.5s;
     border: 1px solid #464646;
     width: 230px;
     right: 0;
-    
+
   }
-    //右边导航栏显示隐藏
+
+  //右边导航栏显示隐藏
   .togglePanel2 {
     margin-right: -2000px;
-    transition:  margin-right 1s;
+    transition: margin-right 1s;
   }
+
   //左侧导航栏显示隐藏
   .togglePanel {
     margin-left: -2000px;
@@ -144,17 +186,19 @@
 }
 
 //右边操作栏
-.title{
+.title {
   width: 100%;
   height: 35px;
   background-color: #464646;
-  div{
+
+  div {
     width: 50%;
     height: 35px;
     line-height: 35px;
     background-color: #595959;
     border-radius: 5px;
-    span{
+
+    span {
       color: white;
       font-size: 14px;
       font-weight: 400;
@@ -165,24 +209,28 @@
 
 
 //右侧属性
-.property{
+.property {
   display: flex;
   flex-flow: column;
-  .siteproperty{
+
+  .siteproperty {
     height: 100%;
     overflow-y: auto;
-    p{
+
+    p {
       color: #9c9fa5;
       padding-left: 5px;
     }
-    .siteproperty_size{
+
+    .siteproperty_size {
       background-color: #e3e3e3;
       width: 93%;
       margin: 0 auto;
       border-radius: 3px;
       min-height: 21px;
     }
-    .rightAttribute{
+
+    .rightAttribute {
       width: 12%;
       height: 99.5%;
       position: absolute;
@@ -192,55 +240,69 @@
       border: 2px solid #464646;
     }
   }
-  .assetsproperty{
+
+  .assetsproperty {
     overflow-y: auto;
     height: 100%;
-    p{
+
+    p {
       color: #9c9fa5;
-      margin:1px 0 3px 8px;
+      margin: 1px 0 3px 8px;
       font-size: 14px;
     }
-    span{
+
+    span {
       font-size: 15px;
     }
-    input{
+
+    input {
       height: 18px;
     }
-    .biginput{
+
+    .biginput {
       display: block;
       width: 88%;
       margin: 0 auto;
     }
-    .smallinput{
+
+    .smallinput {
       display: block;
       width: 19%;
       margin-left: 8px;
     }
-    .textarea{
+
+    .textarea {
       display: block;
       width: 88%;
       height: 50px;
       margin: 0 auto;
     }
-    .swiper-button-next{
+
+    .swiper-button-next {
       right: 6px;
     }
-    .swiper-button-prev{
+
+    .swiper-button-prev {
       left: 6px;
     }
-    .swiper-container{
+
+    .swiper-container {
       // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
       // --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
-      --swiper-navigation-size:20px;/* 设置按钮大小 */
+      --swiper-navigation-size: 20px;
+      /* 设置按钮大小 */
     }
-    .hoverred:hover{
+
+    .hoverred:hover {
       color: rgb(187, 28, 28);
     }
-    .selectDiv{
+
+    .selectDiv {
       height: 21px;
       position: relative;
       margin-bottom: 5px;
-      select{
+
+      select {
         width: 98px;
         height: 22px;
         vertical-align: middle;
@@ -251,17 +313,20 @@
         border-radius: 2px;
       }
     }
-    .colorBigDiv{
+
+    .colorBigDiv {
       width: 88%;
       margin-left: 8px;
-      .colorBigTemplateDiv{
+
-        span{
+      .colorBigTemplateDiv {
+        span {
           color: #9c9fa5;
           font-size: 14px;
           height: 26px;
           line-height: 26px;
         }
-        .colorTemplateDiv{
+
+        .colorTemplateDiv {
           width: 65%;
           height: 22px;
           display: inline-block;
@@ -269,23 +334,25 @@
           margin-left: 26px;
         }
       }
-      
+
-      .colorDiv{
+      .colorDiv {
-        .colorLi{
+        .colorLi {
           width: 24px;
           height: 24px;
           list-style: none;
           float: left;
           border: 2px solid white;
         }
-        .coloractive{
+
+        .coloractive {
           border: 2px solid black;
         }
       }
     }
-      
+
   }
 }
+
 .hideAllTreeNode {
   box-sizing: border-box;
   margin: 3px 0;
@@ -294,20 +361,29 @@
   height: 24px;
   line-height: 24px;
   display: flex;
-  label { display: inline-block; flex: 1; cursor: pointer; }
+
+  label {
+    display: inline-block;
+    flex: 1;
+    cursor: pointer;
+  }
 }
+
 //右侧消防要素
-.firecategories{
+.firecategories {
   position: relative;
   display: flex;
   flex-flow: column;
-  .firecategoriesTree{
+
+  .firecategoriesTree {
     overflow-y: auto;
     height: 100%;
-    mat-tree-node{
+
+    mat-tree-node {
       position: relative;
     }
-    .isLookCss{
+
+    .isLookCss {
       position: absolute;
       right: 6px;
     }
@@ -320,11 +396,13 @@ div:focus {
 }
 
 //没有图片时显示无图片背景图
-.noImgCss{
+.noImgCss {
   background: url(../../../assets/images/noImg.png) no-repeat center center;
-  background-size: 88% 100%;/*按比例缩放*/
+  background-size: 88% 100%;
+  /*按比例缩放*/
 }
-.input{
+
+.input {
   width: 18px;
   height: 18px;
   vertical-align: middle;
@@ -334,23 +412,26 @@ div:focus {
 
 
 // tree
-.mat-tree-node{
+.mat-tree-node {
   min-height: 0;
   height: 32px;
   line-height: 32px;
   font-size: 13px;
   cursor: pointer;
 }
-.mat-tree-node:hover{
+
+.mat-tree-node:hover {
   background-color: #ccebf8;
 }
-.isLookPattern{
+
+.isLookPattern {
   display: none;
 }
-.treeText{
+
+.treeText {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: inline-block;
   width: 65px;
-}
+}

src/styles.scss

@@ -115,6 +115,7 @@ table td.mat-footer-cell:last-of-type {
 //滚动条样式
 ::-webkit-scrollbar {
 	width: 5px;
+	height:5px;
 	background-color: white;
 }
 ::-webkit-scrollbar-thumb {