[新增]四周毗邻tree渲染

src/app/examiner/create-test-score/create-test-score.component.html

@@ -74,7 +74,7 @@
                                         </nz-tree>
                                         <ng-template #nzTreeTemplate let-node let-origin="origin">
                                             <div class="treeNodeTemplate">
-                                                <label title="{{node.origin.name}}" class="overflowText textNode">{{node.origin.name}}</label>
+                                                <label class="overflowText textNode">{{node.origin.name}}</label>
                                                 <div class="scoreDiv" *ngIf="node.level == '0'">
                                                     <span class="colorspan lookitem" (click)="lookTreeNode(node)">查看</span>
                                                 </div>
@@ -85,7 +85,7 @@
                                 </mat-expansion-panel>
                             </mat-accordion>
                             <!-- 四周毗邻 -->
-                            <!-- <mat-accordion>
+                            <mat-accordion *ngIf="unit.aroundNodes.length != 0">
                                 <mat-expansion-panel style="box-shadow: 0 0 black;" expanded>
                                   <mat-expansion-panel-header  collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F5FDFE;">
                                     <mat-panel-title>
@@ -116,16 +116,16 @@
                                         </nz-tree>
                                         <ng-template #nzTreeTemplate let-node let-origin="origin">
                                             <div class="treeNodeTemplate">
-                                                <label title="{{node.origin.name}}" class="overflowText textNode">{{node.origin.name}}</label>
+                                                <label class="overflowText textNode">{{node.origin.title ? node.origin.title : node.origin.name}}</label>
                                                 <div class="scoreDiv" *ngIf="node.level == '0'">
-                                                    <span class="colorspan lookitem">查看</span>
+                                                    <span class="colorspan lookitem" (click)="lookTreeNode(node)">查看</span>
                                                 </div>
                                              
                                             </div>
                                         </ng-template>
                                   </div>
                                 </mat-expansion-panel>
-                            </mat-accordion> -->
+                            </mat-accordion>
                         </div>
                     </div>
                     <div class="fightdeploydiv" *ngIf="selectedTab == 2">

src/app/examiner/create-test-score/create-test-score.component.ts

@@ -17,8 +17,8 @@ export class CreateTestScoreComponent implements OnInit {
     this.selectedTab = index
   }
   ngOnInit(): void {
-    console.log(12345,)
     this.getUnitData()
+    this.getAround()
   }
 
   //模拟单位数据
@@ -91,7 +91,7 @@ export class CreateTestScoreComponent implements OnInit {
       element.basicInfoItemScore = 0
 
       this.http.get(`/api/Companies/${element.id}`).subscribe((data:any)=>{
-        console.log('单位信息',index,data)
+        // console.log('单位信息',index,data)
         let unitData = {
           name: '单位信息',
           type:'基本信息',
@@ -137,7 +137,7 @@ export class CreateTestScoreComponent implements OnInit {
                   buildingType:data[i].buildingTypes[0].id
                 }
               }).subscribe((buildingsData:any)=>{
-                console.log(1234,buildingsData)
+                // console.log(1234,buildingsData)
                 buildingsData.name = data[i].name
                 buildingsData.buildingType = data[i].buildingTypes[0].name
                 
@@ -173,7 +173,6 @@ export class CreateTestScoreComponent implements OnInit {
                     })
                     y.tabledata = dest
                     tabledata = dest
-                    console.log('pppp',y)
                     y.tabledata[0].data.forEach((x,key) => {
                       if(x.propertyValue){
                         x.key = (Math.random()*10000000).toString(16).substr(0,4)+(new Date()).getTime()+Math.random().toString().substr(2,5)
@@ -192,36 +191,122 @@ export class CreateTestScoreComponent implements OnInit {
                       }
                     })
                   }
-                 
+                  if(propertyInfosArr.length != 0){
-                  element.basicInfoNodes.push({
+                    element.basicInfoNodes.push({
-                    name:y.name != '基本信息' ? buildingsData.name + '-' + y.name : buildingsData.name ,
+                      name:y.name != '基本信息' ? buildingsData.name + '-' + y.name : buildingsData.name ,
-                    type:'基本信息',
+                      type:'基本信息',
-                    expanded: false,
+                      expanded: false,
-                    key:(Math.random()*10000000).toString(16).substr(0,4)+(new Date()).getTime()+Math.random().toString().substr(2,5),
+                      key:(Math.random()*10000000).toString(16).substr(0,4)+(new Date()).getTime()+Math.random().toString().substr(2,5),
-                    children:propertyInfosArr,
+                      children:propertyInfosArr,
-                    tabledata:tabledata ? tabledata : null
+                      tabledata:tabledata ? tabledata : null
-                  })
+                    })
-  
+                    element.basicInfoNodes = [...element.basicInfoNodes]
-                  element.basicInfoNodes = [...element.basicInfoNodes]
+                  }
+                  
                 })
                 
                 resolve(i)
               })
             })
           }
-          console.log(987,this.unitId)
+          // console.log(987,this.unitId)
         })
 
       }) 
      
     })
   }
+  //获取四周毗邻数据
+  getAround(){
+    this.unitId.forEach((element,index) => {
+      element.aroundScore = 0
+      element.aroundItemScore = 0
+      element.aroundNodes = []
+      //获得当前单位的单位毗邻
+      let id = {companyId:element.id}
+      this.http.get('/api/CompanyAdjoins',{params:id}).subscribe((data:any)=>{
+        // console.log(index+'四周毗邻',data)
+        data.forEach(item => {
+          item.direction == 0 ? item.title = '东方向' : null
+          item.direction == 1 ? item.title = '西方向' : null
+          item.direction == 2 ? item.title = '南方向' : null
+          item.direction == 3 ? item.title = '北方向' : null
+          item.direction == 4 ? item.title = '东南方向' : null
+          item.direction == 5 ? item.title = '西南方向' : null
+          item.direction == 6 ? item.title = '东北方向' : null
+          item.direction == 7 ? item.title = '西北方向' : null
+          item.isLeaf = true
+        })
+        //如果存在单位毗邻
+        if(data.length != 0){
+          this.unitId[index].aroundNodes.push({
+            name: '单位毗邻',
+            key: (Math.random()*10000000).toString(16).substr(0,4)+(new Date()).getTime()+Math.random().toString().substr(2,5),
+            expanded: false,
+            type:'四周毗邻',
+            children: data
+          })
+          element.aroundNodes = [...element.aroundNodes]
+        }
+        
+      })
 
+      //获得当前单位的建筑毗邻
+      this.http.get('/api/Buildings',{params:id}).subscribe((data:any)=>{
+        if (data.length) {   
+          getAllArchitecture(data)
+        }
+      })
+      let that = this
+      async function getAllArchitecture(buildongsdata){
+        for (let i = 0, length = buildongsdata.length; i < length; i++){
+          let id = {buildingId:buildongsdata[i].id}
+          let result = await new Promise((resolve, reject) => {
+            that.http.get('/api/BuildingAdjoins',{params:id}).subscribe((data:any)=>{
+              data.forEach(item => {
+                item.direction == 0 ? item.title = '东方向' : null
+                item.direction == 1 ? item.title = '西方向' : null
+                item.direction == 2 ? item.title = '南方向' : null
+                item.direction == 3 ? item.title = '北方向' : null
+                item.direction == 4 ? item.title = '东南方向' : null
+                item.direction == 5 ? item.title = '西南方向' : null
+                item.direction == 6 ? item.title = '东北方向' : null
+                item.direction == 7 ? item.title = '西北方向' : null
+                item.isLeaf = true
+              })
+              if(data.length != 0){
+                that.unitId[index].aroundNodes.push({
+                  name: buildongsdata[i].name,
+                  key: (Math.random()*10000000).toString(16).substr(0,4)+(new Date()).getTime()+Math.random().toString().substr(2,5),
+                  expanded: false,
+                  type:'四周毗邻',
+                  children: data
+                })
+                element.aroundNodes = [...element.aroundNodes]
+              }
+              resolve('1')
+            })
+          })  
+        }
+
+      }
+    })
+  }
 
 
   //查看树节点
   lookTreeNode(node){
-    console.log(node.origin)
+    // console.log(node.origin)
+    const dialogRef = this.dialog.open(LookTreeNodeDialog, {
+      // width: '380px',
+      // height: '136px',
+      id:'lookTreeNode',
+      data: node.origin
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+    });
   }
 
 
@@ -283,7 +368,7 @@ export class CreateTestScoreComponent implements OnInit {
             i.checked ? selectedNum.push(i) : ''
           })
         })
-        console.log(7894,selectedNum)
+        // console.log(7894,selectedNum)
         if(selectedNum.length != 0 ){
           this.unitId[key].aroundScore ? this.unitId[key].aroundItemScore = this.unitId[key].aroundScore / selectedNum.length : null
         }else{
@@ -429,3 +514,30 @@ export class AddPlanTwoDialog {
   }
 
 }
+
+
+//查看答案
+@Component({
+  selector: 'lookTreeNode-dialog',
+  templateUrl: 'lookTreeNode.html',
+  styleUrls: ['lookTreeNode.scss']
+})
+export class LookTreeNodeDialog {
+
+  constructor(public dialog: MatDialog,public dialogRef: MatDialogRef<LookTreeNodeDialog>,@Inject(MAT_DIALOG_DATA) public data: any) {}
+
+  
+  ngOnInit(): void {
+    console.log(this.data)
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  //取消
+  close(){
+    this.dialogRef.close();
+  }
+
+}

src/app/examiner/create-test-score/lookTreeNode.html

@@ -0,0 +1,29 @@
+<div>
+    <!-- 非表格类 -->
+    <table *ngIf="!data.tabledata && data.type != '四周毗邻'">
+        <tr>
+            <td *ngFor="let item of data.children">{{item.name}}</td>
+        </tr>
+        <tr>
+            <td *ngFor="let item of data.children">{{item.value || item.propertyValue}}</td>
+        </tr>
+    </table>
+    <!-- 表格类 -->
+    <table *ngIf="data.tabledata">
+        <tr>
+            <td *ngFor="let item of data.tabledata">{{item.propertyName}}</td>
+        </tr>
+        <tr *ngFor="let item of data.tabledata[0].data;let key = index">
+            <td *ngFor="let i of data.tabledata">{{i.data[key]. propertyValue}}</td>
+        </tr>
+    </table>
+
+    <table *ngIf="data.type == '四周毗邻'">
+        <tr>
+            <td *ngFor="let item of data.children">{{item.title}}</td>
+        </tr>
+        <tr>
+            <td *ngFor="let item of data.children">{{item.name}}</td>
+        </tr>
+    </table>
+</div>

src/app/examiner/create-test-score/lookTreeNode.scss

@@ -0,0 +1,16 @@
+table,table tr th, table tr td { border: 1px solid #EEF1F5; }
+table { text-align: center; border-collapse: collapse; padding:2px;}  
+table{
+    width: 100%;
+    font-size: 15px;
+    tr{
+        height: 35px;
+        td{
+            box-sizing: border-box;
+            padding: 6px;
+        }
+    }
+    tr:nth-child(1){              
+        background: #F5FDFE;
+    }
+}

src/app/examiner/examiner.module.ts

@@ -46,7 +46,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import { myPaginator } from '../ui/my-paginator';
-import { AddPlanDialog, AddPlanTwoDialog, CreateTestScoreComponent } from './create-test-score/create-test-score.component';
+import { AddPlanDialog, AddPlanTwoDialog, CreateTestScoreComponent, LookTreeNodeDialog } from './create-test-score/create-test-score.component';
 import { NavigationModule } from '../navigation/navigation.module';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { ExaminerIndexComponent } from './examiner-index/examiner-index.component';
@@ -54,7 +54,7 @@ import { ExaminerIndexComponent } from './examiner-index/examiner-index.componen
 
 
 @NgModule({
-  declarations: [CreateTestScoreComponent,AddPlanDialog,AddPlanTwoDialog],
+  declarations: [CreateTestScoreComponent,AddPlanDialog,AddPlanTwoDialog,LookTreeNodeDialog],
   imports: [
     CommonModule,
     examinerRoutingModule,

src/styles.scss

@@ -96,7 +96,7 @@ table td.mat-footer-cell:last-of-type{
 	}
 }
 //弹出框样式取消padding
-#addPlanTwo{
+#addPlanTwo,#lookTreeNode{
 	padding: 0;
 	.mat-elevation-z8{
 		box-shadow:none