[新增]消防设施tree完成

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

@@ -1136,10 +1136,12 @@ export class CollectionToolsComponent implements OnInit {
   handleTreeData (storeyData) {
     //storeyData为当前楼层拥有的消防设施
     this.storeyData = storeyData
-    let data = this.allFireElements //所有消防要素模板
+    let data = JSON.parse(JSON.stringify(this.allFireElements))  //所有消防要素模板
+    console.log(data)
     let treeData = [] //tree型 处理完成后的数据
 
     data.forEach(element => {
+      element.key = element.id
       element.isTemplate = true //添加模板标识
       element.isLook = true //添加是否可见标识
       element.name != '其他' ? element.children = [] : null
@@ -1314,37 +1316,17 @@ export class CollectionToolsComponent implements OnInit {
 
   }
 
-  //计算 可视区域内宽度, 是否缩放背景图
-  backGroundScale () {
-    // let that = this
-    // let dad = this.element.nativeElement.querySelector('.functionalDomainContent').clientWidth
-    // let dadHeight = this.element.nativeElement.querySelector('.functionalDomainContent').clientHeight
-    // let left = this.element.nativeElement.querySelector('.functionalDomainLeft').clientWidth
-    // let right = this.element.nativeElement.querySelector('.functionalDomainRight').clientWidth
-    // let imgWidth = dad - left - right//可视区域内 宽度
-    // let img = new Image()
-    // img.src = this.selectingSitePlan.imageUrl;
-    // img.onload = function(){
-    //   if (img.height > dadHeight && img.width > imgWidth) {
-    //     let width = imgWidth/img.width
-    //     let height = dadHeight/img.height
-    //     that.canvas.setBackgroundScale((width>height? height : width)-0.005)
-    //     return
-    //   } else if (img.height > dadHeight) {
-    //     that.canvas.setBackgroundScale((dadHeight/img.height)-0.005)
-    //     return
-    //   } else if (img.width > imgWidth) {
-    //     that.canvas.setBackgroundScale((imgWidth/img.width)-0.005)
-    //     return
-    //   }
-    // };
-  }
 
   //打开消防设施考题设定
   openFireExamination () {
+    console.log(1,this.beforeOneCheckedBuilding)
     let treeData = JSON.parse( JSON.stringify(this.dataSource.data) )
-    let data = { treeData: treeData }
+    let buildFloorData = {
-    let dialogRef = this.dialog.open(examinationQuestions,{data});
+      buildingData:this.beforeOneCheckedBuilding,
+      floorData:this.selectingSitePlan
+    }
+    let data = { treeData: treeData,oldRealData:this.storeyData ,buildFloorData:buildFloorData}
+    // let dialogRef = this.dialog.open(examinationQuestions,{data});
   }
 
   //上传考题
@@ -1369,12 +1351,13 @@ export class CollectionToolsComponent implements OnInit {
     let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据 
     let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据
 
-    for(let key in companyBuildingData.data){
+    // for(let key in companyBuildingData.data){
-      if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下
+    //   if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下
-        storeyData.data[key] = companyBuildingData.data[key]
+    //     storeyData.data[key] = companyBuildingData.data[key]
-      }
+    //   }
-    }
+    // }
     for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到   其他   数组
+      storeyData.data[key].key = storeyData.data[key].Id
       let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId )
       if (!noMatch) {
         this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key])

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

@@ -3,7 +3,8 @@
   <div style="max-height: 300px;overflow-y: auto; margin: 25px 0;">
     <!-- 消防列表树 -->
     <nz-tree
-    [nzData]="data.treeData"
+    #nzTreeComponent
+    [nzData]="renderData"
     nzCheckable
     nzMultiple
     [nzCheckedKeys]="defaultCheckedKeys"
@@ -17,7 +18,7 @@
     </nz-tree>
     <ng-template #nzTreeTemplate let-node let-origin="origin">
         <div class="treeNodeTemplate">
-            <label class="overflowText textNode">{{node.origin.name}}</label>
+            <label class="overflowText textNode">{{node.origin.name || node.origin.Name}}</label>
         </div>
     </ng-template>
     <!-- 消防列表树 -->

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

@@ -17,18 +17,111 @@ export class examinationQuestions {
     constructor(private http:HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<any>,
     @Inject(MAT_DIALOG_DATA) public data) {}
 
+    @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+
     defaultCheckedKeys = []; //指定选中复选框的树节点 key值
     defaultExpandedKeys = []; //展开指定的树节点 key值
     defaultSelectedKeys = []; //指定选中的树节点 key值
+    renderData:any
     ngOnInit(): void {
-      console.log(this.data.treeData)
+      this.renderData = this.data.treeData
+      if(JSON.parse(sessionStorage.getItem('tree型数据')) && JSON.parse(sessionStorage.getItem('tree型数据'))[this.data.buildFloorData.floorData.id]){
+        console.log(123,JSON.parse(sessionStorage.getItem('tree型数据'))[this.data.buildFloorData.floorData.id])
+        this.defaultCheckedKeys = JSON.parse(sessionStorage.getItem('tree型数据'))[this.data.buildFloorData.floorData.id]
+      }
+      this.data.treeData.forEach(element => {
+        if(element.isTemplate){
+          element.isLeaf = false
+        }else{
+          element.isLeaf = true
+        }
+        if(element.children && element.children.length != 0){
+          element.children.forEach(ele => {
+            if(ele.isTemplate){
+              ele.isLeaf = false
+            }else{
+              ele.isLeaf = true
+            }
+            if(ele.children && ele.children.length != 0){
+              ele.children.forEach(item => {
+                if(item.isTemplate){
+                  item.isLeaf = false
+                }else{
+                  item.isLeaf = true
+                }
+                
+              });
+          }})
+        }
+      })
     }
     nzEvent($event){
-      
+      console.log($event)
     }
     //提交
     submit () {
-      console.log(this.data)
+
+      let oldTreeData = this.nzTreeComponent.getCheckedNodeList()
+
+      let alltreedata = JSON.parse(sessionStorage.getItem("tree型数据")) 
+      let keyArr = []
+      oldTreeData.forEach(element => {
+        keyArr.push(element.origin.key)
+      })
+      if(alltreedata){
+        //如果已经保存过当前楼层则替换
+        alltreedata[this.data.buildFloorData.floorData.id] = keyArr
+        sessionStorage.setItem('tree型数据',JSON.stringify(alltreedata))
+      }else{
+        alltreedata = {} 
+        alltreedata[this.data.buildFloorData.floorData.id] = keyArr
+        sessionStorage.setItem('tree型数据',JSON.stringify(alltreedata))
+      }
+      
+
+      let checkList = []  //只存真实素材
+      for (const key in this.data.oldRealData.data) {
+        let element = this.data.oldRealData.data[key]
+        let isChecked = (this.nzTreeComponent.getTreeNodeByKey(key)).isChecked
+        isChecked? checkList.push(element) : null
+      }
+      //存储真实素材数据
+      
+      let obj = {
+        name:this.data.buildFloorData.buildingData.name + '-' + this.data.buildFloorData.floorData.name,
+        key:this.data.buildFloorData.floorData.id,
+        children:checkList
+      }
+
+      let data = JSON.parse(sessionStorage.getItem("试卷id")) 
+
+      if(data && data.length != 0){
+        let ind = null
+        data.forEach((item,index) => {
+          if(item.key == obj.key){
+            ind = index
+          }
+        })
+        if(ind){
+          if(checkList.length != 0){
+            data[ind].children = checkList
+          }else{
+            data.splice(ind,1)
+          }
+          
+        }else{
+          data.push(obj)
+        }
+        sessionStorage.setItem("试卷id",JSON.stringify(data))
+      }else{
+        data = []
+        data[0] = obj
+        console.log(123,data)
+        sessionStorage.setItem("试卷id",JSON.stringify(data))
+      }
+      
+
+      
     }
 
 }
@@ -42,30 +135,23 @@ export class uploadQuestions {
 
     constructor(private http:HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<any>,
     @Inject(MAT_DIALOG_DATA) public data) {}
-    // tree配置
+ 
-    private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
+    defaultCheckedKeys = []; //指定选中复选框的树节点 key值
-      return {
+    defaultExpandedKeys = []; //展开指定的树节点 key值
-        expandable: !!node.children && node.children.length > 0,
+    defaultSelectedKeys = []; //指定选中的树节点 key值
-        name: node.name || node.Name,
+    renderData:any
-        level: level,
-        id: node.id || node.Id,
-        children:node.children,
-        isTemplate:node.isTemplate,
-        isNewElement:node.isNewElement,
-        isLook:node.isLook,
-        isLookPattern:node.isLookPattern || null
-      };
-    }
-    treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
-    treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
-    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
-    hasChild = (_: number, node: any) => node.expandable;
-
     ngOnInit(): void {
-      this.dataSource.data = this.data.treeData
+      let data = JSON.parse(sessionStorage.getItem("试卷id"))
-      this.treeControl.expandAll()
+      data.forEach(item => {
+        item.children.forEach(i => {
+          i.isLeaf = true
+        })
+      })
+      this.renderData = data
+    }
+    nzEvent($event){
+      console.log($event)
     }
-
     //上传
     submit () {
       console.log(this.data.question)

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

@@ -1,37 +1,30 @@
-<div style="min-width: 260px;">
+<div style="min-width: 260px;" id="uploadfiretree">
   <div style="text-align: center;font-weight: 550;">上传</div>
   <div style="padding-left: 10px; font-size: 14px; font-weight: 550;margin: 5px 0;">考试要点</div>
   <div style="margin-bottom: 25px;">
     <textarea style="width: 100%;background-color: #dfe0e0;border: none;outline: none;height: 50px;border-radius: 5px;resize: none;" placeholder="请填写考试要点" [(ngModel)]="data.question.keynote"></textarea>
   </div>
   <div style="padding-left: 10px; font-size: 14px; font-weight: 550;margin: 5px 0;">考核消防设施</div>
-  <div style="max-height: 200px;overflow-y: auto;margin-bottom: 25px;">
+  <div style="height: 200px;overflow-y: auto;margin-bottom: 25px;">
     <!-- 消防列表树 -->
-    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" cdkDropList [cdkDropListData]="dataSource">
+    <nz-tree
-
+    #nzTreeComponent
-      <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' class="treeNode">
+    [nzData]="renderData"
-        <button mat-icon-button disabled></button>
+    nzMultiple
-        <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+    [nzCheckedKeys]="defaultCheckedKeys"
-          {{node.name}}      
+    [nzExpandedKeys]="defaultExpandedKeys"
-        </span> 
+    [nzSelectedKeys]="defaultSelectedKeys"
-        <span  *ngIf="node.isTemplate">({{node.children.length}})</span>
+    (nzClick)="nzEvent($event)"
-        <mat-checkbox style="margin-left: auto;" color=primary></mat-checkbox>
+    (nzExpandChange)="nzEvent($event)"
-      </mat-tree-node>
+    (nzCheckBoxChange)="nzEvent($event)"
-
+    [nzTreeTemplate]="nzTreeTemplate"
-      <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="treeNode" >
+    >
-        <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
+    </nz-tree>
-          <mat-icon class="mat-icon-rtl-mirror">
+    <ng-template #nzTreeTemplate let-node let-origin="origin">
-            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+        <div class="treeNodeTemplate">
-          </mat-icon>
+            <label class="overflowText textNode">{{node.origin.name || node.origin.Name}}</label>
-        </button>
+        </div>
-        <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+    </ng-template>
-          {{node.name}}      
-        </span>   
-        <span  *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
-        <mat-checkbox style="margin-left: auto;" color=primary></mat-checkbox>
-      </mat-tree-node>
-
-    </mat-tree>
     <!-- 消防列表树 -->
   </div>
   <div style="text-align: center;">

src/assets/css/ngZorroTree.css

@@ -347,7 +347,9 @@
 #createtestscore,#nodeTree .ant-tree .ant-tree-switcher {
   line-height: 22px;
 }
-
+#uploadfiretree .ant-tree .ant-tree-switcher {
+  line-height: 20px;
+}
 .ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon,
 .ant-tree .ant-tree-switcher .ant-tree-switcher-icon {
   font-size: 10px;