import { SelectionModel } from '@angular/cdk/collections'; import { Component, Inject, OnInit } from '@angular/core'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatTableDataSource } from '@angular/material/table'; import { NzFormatEmitEvent } from 'ng-zorro-antd/tree'; @Component({ selector: 'app-create-test-score', templateUrl: './create-test-score.component.html', styleUrls: ['./create-test-score.component.scss'] }) export class CreateTestScoreComponent implements OnInit { constructor(public dialog: MatDialog) { } selectedTab:number = 1 //选中的选项卡 selectTab(index){ this.selectedTab = index } ngOnInit(): void { } //模拟预案数据 planDatas:any = [ {name:'5楼电路故障灾情扑救',or:'上海总队',time:'2020-09-24',isOpen:'未公开',level:'总队',scroe:0}, {name:'6楼电路故障灾情扑救',or:'上海总队',time:'2020-09-24',isOpen:'未公开',level:'总队',scroe:0}, {name:'7楼电路故障灾情扑救',or:'上海总队',time:'2020-09-24',isOpen:'未公开',level:'总队',scroe:0} ] defaultCheckedKeys = []; //指定选中复选框的树节点 key值 defaultExpandedKeys = []; //展开指定的树节点 key值 defaultSelectedKeys = []; //指定选中的树节点 key值 examScore:any = 0//整个试卷的总分 //模拟单位数据 unitDatas:any = [ {name:'富丽华大酒店1',score:0,basicInfoScore:0,basicInfoNodes : [ { title: '单位信息', key: '0-0', expanded: true, zIndex : '0', itemScore: 0, sumScore: 0, children: [ {title: '统一社会信用代码',key: '1',isLeaf:true}, {title: '单位类型',key: '2',isLeaf:true}, {title: '联系人',key: '3',isLeaf:true}, {title: '联系电话',key: '4',isLeaf:true}, {title: '辖区中队',key: '5',isLeaf:true}, {title: '单位地址',key: '6',isLeaf:true} ] }, { title: '建筑信息', key: '0-1', expanded: true, zIndex : '0', itemScore: 0, sumScore: 0, children: [ { title: '面积', key: '0-1-0-0',isLeaf:true}, { title: '高度', key: '0-1-0-1',isLeaf:true}, { title: '层数', key: '0-1-0-2',isLeaf:true} ] }, ],aroundScore:0,aroundNodes :[ { title: '单位四周毗邻', key: '11', expanded: true, zIndex : '0', itemScore: 0, sumScore: 0, children: [ {title: '东方向',key: '55',isLeaf:true}, ] }, { title: '建筑四周毗邻', key: '22', expanded: true, zIndex : '0', itemScore: 0, sumScore: 0, children: [ {title: '东方向',key: '55',isLeaf:true}, ] }, ]}, {name:'富丽华大酒店2',score:0,basicInfoScore:0} ] calculateScore(key){//计算分数 //key代表第几个建筑 //计算当前建筑基本信息分数 var basicInfoScore = 0 this.unitDatas[key].basicInfoNodes.forEach(element => { basicInfoScore += Number(element.sumScore) }) this.unitDatas[key].basicInfoScore = basicInfoScore //计算当前建筑四周毗邻分数 var aroundScore = 0 this.unitDatas[key].aroundNodes.forEach(element => { aroundScore += Number(element.sumScore) }) this.unitDatas[key].aroundScore = aroundScore //计算整个单位的总分 var unitScore = 0 this.unitDatas[key].score = basicInfoScore + aroundScore + 0 //计算整个试卷的总分 let examScore = 0 this.unitDatas.forEach(element => { examScore += Number(element.score) }) this.examScore = examScore } //tree的选择事件 nzEvent(event: NzFormatEmitEvent,key): void { if(event.node.level == 0){//如果点击第一层 let itemTrue = [] event.node.origin.children.forEach(item => { if(item.checked){ itemTrue.push(item) } }) event.node.origin.sumScore = event.node.origin.itemScore * itemTrue.length this.calculateScore(key)//更新标题栏分数 }else{ let itemTrue = [] event.node.parentNode.origin.children.forEach(item => { if(item.checked){ itemTrue.push(item) } }) event.node.parentNode.origin.sumScore = event.node.parentNode.origin.itemScore * itemTrue.length this.calculateScore(key)//更新标题栏分数 } } //每项分数动态计算 itemScore(node,key){ let itemTrue = [] node.origin.children.forEach(item => { if(item.checked){ itemTrue.push(item) } }) node.origin.sumScore = node.origin.itemScore * itemTrue.length this.calculateScore(key)//更新标题栏分数 } //总分数动态计算 sumScore(node,key){ //key代表第几个建筑 let itemTrue = [] node.origin.children.forEach(item => { if(item.checked){ itemTrue.push(item) } }) node.origin.itemScore = node.origin.sumScore / itemTrue.length this.calculateScore(key)//更新标题栏分数 } //添加预案 addPlan(){ const dialogRef = this.dialog.open(AddPlanDialog, { width: '380px', height: '136px', data: {} }); dialogRef.afterClosed().subscribe(result => { console.log('The dialog was closed'); }); } //每条预案分数增加在试卷分数 planItemScore(item){ this.examScore += item.score } } //添加预案1 @Component({ selector: 'addplan-dialog', templateUrl: 'addPlan.html', styleUrls: ['addPlan.scss'] }) export class AddPlanDialog { constructor(public dialog: MatDialog,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data: any) {} onNoClick(): void { this.dialogRef.close(); } close(){ this.dialogRef.close(); } //选择想要添加的预案类型 （已存在或者自定义） selectType(type){ const dialogRef = this.dialog.open(AddPlanTwoDialog, { id:'addPlanTwo', data: {type} }); dialogRef.afterClosed().subscribe(result => { console.log('The dialog was closed'); }); } } const ELEMENT_DATA: any = [ {id: 1, name: '五楼电梯故障', people:'上海总队',time:'2020-06-15',level:'总队'}, {id: 2, name: '故障搜救', people:'超级管理员',time:'2020-06-15',level:'总队'}, {id: 3, name: '故障搜救', people:'超级管理员',time:'2020-06-15',level:'总队'}, {id: 4, name: '五楼电梯故障', people:'上海总队',time:'2020-06-15',level:'总队'}, ]; //添加预案2 @Component({ selector: 'addplantwo-dialog', templateUrl: 'addPlanTwo.html', styleUrls: ['addPlanTwo.scss'] }) export class AddPlanTwoDialog { constructor(public dialog: MatDialog,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data: any) {} planType:any = this.data.type == 1 ? true : false//显示的预案类型 displayedColumns: string[] = ['select', 'name', 'people', 'time', 'level']; dataSource = new MatTableDataSource(ELEMENT_DATA); selection = new SelectionModel(true, []); isAllSelected() { const numSelected = this.selection.selected.length; const numRows = this.dataSource.data.length; return numSelected === numRows; } masterToggle() { this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row)); } ngOnInit(): void { } onNoClick(): void { this.dialogRef.close(); } close(){ this.dialogRef.close(); } }