[新增]消防要素显示隐藏按钮

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

@@ -285,6 +285,7 @@
                 <button mat-icon-button disabled></button>
                 {{node.name}}
                 <span *ngIf="node.isTemplate">({{node.children.length}})</span>
+                <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
               </mat-tree-node>
             
             
@@ -298,6 +299,7 @@
                 </button>
                 {{node.name}} 
                 <span *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
+                <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
               </mat-tree-node>
              
             </mat-tree>

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

@@ -1,4 +1,7 @@
 @import './panel.scss';
+.icongray{
+  color: #D9D0DC;
+}
 .content {
   width: 100%;
   height: 93%;
@@ -8,9 +11,6 @@
   display: flex;
   flex-direction: column;
 
-  .icongray{
-    color: #D9D0DC;
-  }
   .buildingbtnchecked{
     background-color: #34A6FD;
     color: white;
@@ -189,15 +189,9 @@
     .swiper-button-next{
       right: 6px;
     }
-    // .swiper-button-next:after{
-    //   font-size: 20px;
-    // }
     .swiper-button-prev{
       left: 6px;
     }
-    // .swiper-button-prev:after{
-    //   font-size: 20px;
-    // }
     .swiper-container{
       // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
       // --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
@@ -231,12 +225,21 @@
   .firecategoriesTree{
     overflow-y: auto;
     height: 100%;
+    mat-tree-node{
+      position: relative;
+    }
+    .isLookCss{
+      position: absolute;
+      right: 6px;
+    }
   }
 }
 
+// 解决轮播图蓝框问题
 div:focus {
   outline: none;
 }
+
 //没有图片时显示无图片背景图
 .noImgCss{
   background: url(../../../assets/images/noImg.png) no-repeat center center;

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

@@ -25,10 +25,11 @@ export class CollectionToolsComponent implements OnInit {
       expandable: !!node.children && node.children.length > 0,
       name: node.name || node.Name,
       level: level,
-      id: node.id,
+      id: node.id || node.Id,
       children:node.children,
       isTemplate:node.isTemplate,
       isNewElement:node.isNewElement,
+      isLook:node.isLook,
       node:node
     };
   }
@@ -299,11 +300,13 @@ export class CollectionToolsComponent implements OnInit {
     this.canvasAssetObj.Width = this.assetWidth
     // this.proObject.Width = this.assetWidth
   }
+  
   //素材高度输入框改变
   assetHeightIunput(){
     this.canvasAssetObj.Height = this.assetHeight
     // this.proObject.Height = this.assetHeight
   }
+
   //素材角度输入框改变
   assetAngleIunput(){
     this.canvasAssetObj.Angle = this.sliderValue
@@ -326,6 +329,7 @@ export class CollectionToolsComponent implements OnInit {
       document.onmouseup = null;
     }
   }
+
   //消防要素div边框高度调节
   firecategoriesDivMouseDown(e){
     document.onmousemove = (ev) => {
@@ -350,6 +354,7 @@ export class CollectionToolsComponent implements OnInit {
   assetHighLightIunput(){
 
   }
+
   //动态属性素材input框值改变
   assetInputChange(i,e){
     let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
@@ -357,6 +362,7 @@ export class CollectionToolsComponent implements OnInit {
     })
     this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
   }
+
   //动态属性素材布尔值框改变radio
   assetRadioChange(i,boolean){
     let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
@@ -380,6 +386,7 @@ export class CollectionToolsComponent implements OnInit {
     let imgFile = e.target.files[0] || null //上传的文件
     this.startUploading(imgFile)
   }
+
   objectName:any //上传对象名
   startUploading (imgFile) {
     let _this = this
@@ -483,11 +490,9 @@ export class CollectionToolsComponent implements OnInit {
       }, 0);
       //此处需要把 this.canvasAssetObj这个传入对象 返回给canvas ↓↓↓↓↓↓↓↓↓↓
 
-
-
-
     }
   }
+
   //动态属性方向select选择框
   direction(i,e){
     let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
@@ -496,6 +501,7 @@ export class CollectionToolsComponent implements OnInit {
     this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
 
   }
+
   //动态属性供给区域select选择框
   supplyArea(i,e){
     let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
@@ -503,6 +509,7 @@ export class CollectionToolsComponent implements OnInit {
     })
     this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
   }
+
   //动态属性供给类型select选择框
   supplyType(i,e){
     let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
@@ -519,6 +526,7 @@ export class CollectionToolsComponent implements OnInit {
 
     // this.setAssetsProperty(this.proObject) //测试
   }
+
   ngAfterViewInit(): void {
     // 监听canvas组件选中素材事件
     this.canvas.on("select",obj=>{
@@ -533,10 +541,12 @@ export class CollectionToolsComponent implements OnInit {
   basicInfoClick(){
     this.basicInfo = !this.basicInfo
   }
+
   //点击想定作业名称
   wantToWorkClick(){
     this.wantToWork = !this.wantToWork
   }
+
   //进入编辑模式
   editpat(){
     this.isEditPat = true
@@ -545,6 +555,7 @@ export class CollectionToolsComponent implements OnInit {
     config.duration = 3000
     this.snackBar.open('进入编辑模式','确定',config);
   }
+
   //进入查看模式
   lookpat(){
     this.isEditPat = false
@@ -553,16 +564,19 @@ export class CollectionToolsComponent implements OnInit {
     config.duration = 3000
     this.snackBar.open('进入查看模式','确定',config);
   }
+
   //保存平面图
   saveSite(){
     
   }
+
   //获得所有的建筑物
   getAllBuildings(){
     this.http.get("/api/CompanyAccount/Buildings").subscribe(data=>{
       this.allBuildings = data
     })
   }
+
   //创建建筑
   createBuilding(){
     let data = this.allBuildings
@@ -582,6 +596,7 @@ export class CollectionToolsComponent implements OnInit {
       }
     });  
   }
+
   //选择建筑
   checkedBuilding(item,index){
     if (this.checkedBuildingIndex!=index) {
@@ -594,6 +609,7 @@ export class CollectionToolsComponent implements OnInit {
       }
     }
   }
+
   //编辑建筑
   editBuilding(e,item){
     e.stopPropagation();
@@ -613,6 +629,7 @@ export class CollectionToolsComponent implements OnInit {
       }
     });  
   }
+
   //删除建筑
   deleteBuilding(e,item){
     e.stopPropagation();
@@ -638,23 +655,28 @@ export class CollectionToolsComponent implements OnInit {
     }
   }
 
+  storeyData //将建筑素材和当前楼层素材合二为一
+
   //处理 tree 数据结构
   handleTreeData (storeyData) {
+    this.storeyData = storeyData
+
     let data = this.allFireElements //所有消防要素
     let treeData = [] //tree型 处理完成后的数据
     data.forEach(element => {
       element.isTemplate = true //添加模板标识
+      element.isLook = true //添加是否可见标识
       element.children = []
       if(storeyData){
         for(let key in storeyData.data){
           if(element.id == storeyData.data[key].FireElementId){
             storeyData.data[key].isTemplate = false
+            storeyData.data[key].isLook = true
             element.isNewElement = true
             element.children.push(storeyData.data[key])
           }
         }
       }
-      
       data.forEach(item => { if (item.parentId == element.id) {element.children.push(item)} });
     });
     data.forEach(element => {
@@ -671,11 +693,48 @@ export class CollectionToolsComponent implements OnInit {
     }
   }
 
+  //点击数节点的显示隐藏icon
+  clickLookItem(node){
+
+    //修改素材islook属性
+    for(let key in this.storeyData.data){
+      if(key == node.id){
+        this.storeyData.data[key].isLook = !this.storeyData.data[key].isLook
+      }
+    }
+    
+    
+    this.allFireElements.forEach(item=>{
+      if(item.id == node.id){
+        item.isLook = !item.isLook
+      }
+    })
+
+    function updateChildrenIsLook(node, childHandleCb) {
+      if(node.children && node.children.length != 0){
+          node.children.forEach(item => {
+              item.isLook = !item.isLook
+              if (childHandleCb) {
+                  childHandleCb(item)
+              }
+          })
+      }
+    }
+    updateChildrenIsLook(node, (child) => {
+      updateChildrenIsLook(child, null)
+    })
+
+    this.dataSource.data = [...this.dataSource.data]
+    this.treeControl.expandAll()
+
+  }
+
   //封装 刷新 tree 数据
   renovateTreeData () {
     let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id
     let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据 
     let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据
+
     for(let key in companyBuildingData.data){
       if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下
         storeyData.data[key] = companyBuildingData.data[key]