Browse Source

[新增]预案模板自定义新增

tangshan
your name 3 years ago
parent
commit
2a86de88f0
  1. 65
      src/app/ui/plan-template/plan-template.component.html
  2. 276
      src/app/ui/plan-template/plan-template.component.ts
  3. 17
      src/app/ui/plan-template/zdyaddgroup.html
  4. 5
      src/app/ui/ui.module.ts

65
src/app/ui/plan-template/plan-template.component.html

@ -40,15 +40,15 @@
<span>{{unitName}}</span>
</div>
<div class="rightheadtwo">
<button mat-raised-button color="primary" style="margin-right: 20px;" (click)='save()'>保存</button>
<button mat-raised-button color="primary" style="margin-right: 10px;" (click)='addGroupClick()' >新增分组</button>
<button mat-raised-button color="primary" style="margin-right: 10px;" (click)='zdyaddGroup()' >自定义分组</button>
</div>
</div>
<div class="rightbody">
<mat-accordion *ngFor="let item of group;let zi=index;TrackBy:trackByFn" multi>
<mat-accordion *ngFor="let item of group;let zi=index;TrackBy:trackByFn" multi >
<!-- 基本信息 -->
<mat-expansion-panel (opened)="openpan(zi)" (closed)='closepan()' *ngIf="item.completed" style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;" MatAccordionTogglePosition='after'>
<mat-expansion-panel (opened)="openpan(zi)" (closed)='closepan()' *ngIf="item.completed" style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;" expanded hideToggle disabled><!-- expanded hideToggle disabled -->
<mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead">
<mat-panel-title class="paneltitle">
<div style="width: 100%;height: 100%;display: flex;">
@ -60,7 +60,11 @@
<div class="caozuotwo">
<img src="../../../assets/images/toppaixu.png" alt="" style="height: 15px;position: relative;top: 3px;" (click)='topPai(zi)' *ngIf="zi!=0">
<img src="../../../assets/images/downpaixu.png" alt="" style="height: 15px;position: relative;top: 3px;left: 1px;" (click)='downPai(zi)'*ngIf="zi!=group.length-1">
<div *ngIf="item.groupName!='预案附件'&&item.groupName!='交通水源'&&item.groupName!='重点图示'" class="addinfo" (click)='addAttribute(item.groupName)'>
<div *ngIf="item.groupName=='单位概况'" class="addinfo" (click)='zdyaddAttribute()'>
<img src="../../../assets/images/update.png" style="height: 15px;margin-top: 4px;margin-left: 5px;">
<span style="margin-left: 2px;">自定义</span>
</div>
<div *ngIf="item.groupName!='预案附件'&&item.groupName!='交通水源'&&item.groupName!='重点图示'" class="addinfo" (click)='addAttribute(zi,item.groupName)'>
<img src="../../../assets/images/update.png" style="height: 15px;margin-top: 4px;margin-left: 5px;">
<span style="margin-left: 2px;">编辑</span>
</div>
@ -87,8 +91,8 @@
</div>
<div class="caozuo">
<button mat-raised-button color="#ECF6FF" (click)='delAttribute(item.groupName,element.surveyName)'><img src="../../../assets/images/deletehui.png"> 删除</button>
<button mat-raised-button color="primary" style="margin-right: 10px;" (click)='addAttInfo(element.surveyName)'
*ngIf="item.groupName=='单位概况'&&(element.surveyName=='单位基本信息'||element.surveyName=='建筑信息'||element.surveyName=='进攻通道'||element.surveyName=='消防设施')"><img src="../../../assets/images/addbai.png"> 编辑</button>
<button mat-raised-button color="primary" style="margin-right: 10px;" (click)='addAttInfo(element.surveyName,suri)'
*ngIf="item.groupName=='单位概况'&&(element.surveyName!='四周毗邻'&&element.surveyName!='重点部位'&&element.surveyName!='功能分区')"><img src="../../../assets/images/addbai.png"> 编辑</button>
<img src="../../../assets/images/downpaixu.png" alt="" style="height: 15px;position: relative;top: 15px;left: 1px;margin-right: 5px;float: right;" (click)='zaiDown(zi,suri)'>
<img src="../../../assets/images/toppaixu.png" alt="" style="height: 15px;position: relative;top: 15px;float: right;" (click)='zaiTop(zi,suri)'>
</div>
@ -232,7 +236,54 @@
</div>
</div>
</div>
<!--自定义属性-->
<div class="disaster" *ngIf="element.zdy!=undefined ">
<div class="attack" *ngFor="let zdy of element.attinf;let attributei=index">
<div class="attackLeft">
<div class="attackleftHead">
<input type="text" placeholder="请输入内容" [(ngModel)]="zdy.headName">
</div>
<div class="attackleftTable">
<!--表格类型-->
<table *ngIf="zdy.level==1">
<thead>
<th *ngFor="let itemth of zdy.tableth;let tablethi=index;TrackBy:trackByFn"><input type="text"
placeholder="请输入内容" [(ngModel)]="zdy.tableth[tablethi]"></th>
</thead>
</table>
<!--文本区域-->
<textarea *ngIf="zdy.level==3" [(ngModel)]="zdy.tableth"></textarea>
<!--输入框-->
<div class="inputtext" *ngIf="zdy.level==2">
<div class="inputj" style="height: 100%;width: 100%;"
*ngFor="let itemth of zdy.tableth;let tablethi=index;TrackBy:trackByFn">
<div style="height: 100%;width: 100%;"
*ngFor="let itemthj of zdy.tableth[tablethi];let tablethj=index;TrackBy:trackByFn">
<input type="text" placeholder="请输入内容" style="background-color: #E8E9E9;width: 40%;"
[(ngModel)]="itemthj.head">
<input type="text" placeholder="请输入内容" style="width: 60%;" [(ngModel)]="itemthj.body">
</div>
</div>
</div>
<!--树形图-->
<!-- <div style="height: 500px;width: 100%;" *ngIf="element.level==4">
<tree-diagram [data]="element.tableth" ></tree-diagram>
</div> -->
</div>
</div>
<div class="attackRight">
<div class="rightButton">
<img src="../../../assets/images/toppaixu.png" alt="" style="height: 15px;position: relative;top: 3px;" (click)='adyTop(suri,attributei)'>
<img src="../../../assets/images/downpaixu.png" alt="" style="height: 15px;position: relative;top: 3px;left: 1px;margin-right: 5px;" (click)='adyDown(suri,attributei)'>
<button mat-raised-button color="primary" (click)='zdyattackAdd(suri,attributei,zdy.level)'
*ngIf="zdy.level==1"><img src="../../../assets/images/addbai.png"> 新增</button>
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
(click)='zdyDelDisaster(suri,attributei)'><img src="../../../assets/images/deletehui.png">
删除</button>
</div>
</div>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>

276
src/app/ui/plan-template/plan-template.component.ts

@ -265,8 +265,31 @@ export class PlanTemplateComponent implements OnInit {
})
});
}
console.log(this.newleftTabledata)
}
//自定义新增分组
zdyaddGroup(){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
if(this.unitName==undefined){
this.snackBar.open('请选择预案模板!','确定',config);
}else{
const dialogRef = this.dialog.open(zdyaddGroup, {//调用open方法打开对话框并且携带参数过去
width: '340px',
height:'200px',
disableClose:true,
data:this.newleftTabledata[this.leftclicki].data==null?null:this.newleftTabledata[this.leftclicki].data==0?null:this.newleftTabledata[this.leftclicki].data
});
dialogRef.afterClosed().subscribe(result => {
console.log(result)
if(result!=undefined){
this.newleftTabledata[this.leftclicki].data.push({groupName:result,completed: true,attribute:[],zdy:true})
}
});
}
}
//删除分组
deleteGroup(groupName){
@ -283,7 +306,9 @@ export class PlanTemplateComponent implements OnInit {
}
//新增属性
groupName
addAttribute(groupName){
ziint=0
addAttribute(zi,groupName){
this.ziint=zi
this.groupPanle=true
this.groupName=groupName
if(groupName=='单位概况'){
@ -348,6 +373,26 @@ export class PlanTemplateComponent implements OnInit {
this.groupPanle=true
this.accordion.closeAll()
}
//自定义新增属性
zdyaddAttribute(){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
const dialogRef = this.dialog.open(zdyaddattinf, {//调用open方法打开对话框并且携带参数过去
width: '340px',
height:'200px',
disableClose:true,
data:this.newleftTabledata[this.leftclicki].data==null?null:this.newleftTabledata[this.leftclicki].data==0?null:this.newleftTabledata[this.leftclicki].data
});
dialogRef.afterClosed().subscribe(result => {
console.log(result)
if(result!=undefined){
this.newleftTabledata[this.leftclicki].data[0].attribute.push({completed: true, surveyName: result,zdy:true,attinf:[]})
}
console.log(this.group)
});
this.accordion.closeAll()
}
//删除具体属性
delAttribute(groupName,surveyName){
let isTrue = confirm('您确定要删除吗')
@ -367,13 +412,49 @@ export class PlanTemplateComponent implements OnInit {
}
//新增属性信息
danweiInfTable=[]
addAttInfo(surveyName){
if(surveyName=='进攻通道'){
if(this.group[0].attribute[4].attinf==undefined){
this.group[0].attribute[4].attinf=[]
this.group[0].attribute[4].attinf.push({head:'',tableth:[],completed:true})
}else{
this.group[0].attribute[4].attinf.push({head:'',tableth:[],completed:true})
addAttInfo(surveyName,suri){
if(surveyName!='单位基本信息'&&surveyName!='建筑信息'&&surveyName!='四周毗邻'&&surveyName!='消防设施'&&surveyName!='重点部位'&&surveyName!='功能分区'){
if(surveyName=='进攻通道'){
if(this.group[0].attribute[suri].attinf==undefined){
this.group[0].attribute[suri].attinf=[]
this.group[0].attribute[suri].attinf.push({head:'',tableth:[],completed:true})
}else{
this.group[0].attribute[suri].attinf.push({head:'',tableth:[],completed:true})
}
}
else{
const dialogRef = this.dialog.open(zdydisaster, {//调用open方法打开对话框并且携带参数过去
width: '340px',
height:'450px',
disableClose:true,
data:this.group
});
dialogRef.afterClosed().subscribe(result => {
console.log(result)
if(result!=undefined){
this.group[0].attribute.forEach((value,index,array)=>{
if(array[index].surveyName==surveyName){
if(array[index].attinf==undefined){
array[index].attinf=[]
array[index].attinf.push(result)
}else{
array[index].attinf.push(result)
}
if(result.level==2){
for(var i=0;i<result.hNumber;i++){
array[index].attinf[array[index].attinf.length-1].tableth.push([{head:'',body:''}])
for(var j=0;j<result.lieNumber-1;j++){
array[index].attinf[array[index].attinf.length-1].tableth[i].push({head:'',body:''})
}
}
}
}
})
}
//console.log(this.newleftTabledata)
});
}
}else{
@ -385,7 +466,7 @@ export class PlanTemplateComponent implements OnInit {
data:{newleftTabledata:this.newleftTabledata,surveyName:surveyName,leftclicki:this.leftclicki}
});
dialogRef.afterClosed().subscribe(result => {
console.log(result)
//console.log(result)
if(result!=undefined){
this.newleftTabledata[this,this.leftclicki].data.forEach((value,index,array)=>{
if(value.groupName=='单位概况'){
@ -463,7 +544,27 @@ export class PlanTemplateComponent implements OnInit {
}
}
//进攻通道
//单位概况自定义新增表格数据
zdyattackAdd(suri,i,level){
/* this.group[0].attribute.forEach((value,index,array)=>{
if (array[index].groupName==name) {
if(level==1){
this.group[index].attribute[i].tableth.push('')
}else if(level==2){
this.group[index].attribute[i].tableth.push({head:'',body:''})
}
}
}) */
this.group[0].attribute[suri].attinf[i].tableth.push('')
}
//单位概况自定义删除一条数据
zdyDelDisaster(suri,attributei){
let isTrue = confirm('您确定要删除该条信息吗')
if(isTrue){
this.group[0].attribute[suri].attinf.splice(attributei,1)
}
}
//进攻通道,灾情设定及其他增加表格数据
attackAdd(name,i,level){
@ -624,15 +725,14 @@ export class PlanTemplateComponent implements OnInit {
}
//第二层向上排序
zaiTop(zi,attributei){
console.log(zi,attributei)
var temp
if(attributei!=0){
for (let index = attributei-1; index >=0; index--) {
if(this.group[zi].attribute[index].completed){
temp=this.group[zi].attribute[index]
temp=this.group[zi].attribute[index]
this.group[zi].attribute[index]=this.group[zi].attribute[attributei]
this.group[zi].attribute[attributei]=temp
return
}
return
}
@ -644,12 +744,10 @@ export class PlanTemplateComponent implements OnInit {
var temp
if (attributei!=this.group[zi].attribute.length-1) {
for (let index = attributei+1; index < this.group[zi].attribute.length; index++) {
if(this.group[zi].attribute[index].completed){
temp=this.group[zi].attribute[index]
this.group[zi].attribute[index]=this.group[zi].attribute[attributei]
this.group[zi].attribute[attributei]=temp
return
}
temp=this.group[zi].attribute[index]
this.group[zi].attribute[index]=this.group[zi].attribute[attributei]
this.group[zi].attribute[attributei]=temp
return
}
@ -720,6 +818,38 @@ export class PlanTemplateComponent implements OnInit {
}
}
//单位概况自定义内容向上排序
adyTop(suri,attributei){
var temp
if(attributei!=0){
for (let index = attributei-1; index >=0; index--) {
if(this.group[0].attribute[suri].completed){
temp=this.group[0].attribute[suri].attinf[index]
this.group[0].attribute[suri].attinf[index]=this.group[0].attribute[suri].attinf[attributei]
this.group[0].attribute[suri].attinf[attributei]=temp
return
}
}
}
}
//自定义单位概况内容乡下排序
adyDown(suri,attributei){
var temp
if (attributei!=this.group[0].attribute[suri].attinf.length-1) {
for (let index = attributei+1; index < this.group[0].attribute[suri].attinf.length; index++) {
if(this.group[0].attribute[suri].completed){
temp=this.group[0].attribute[suri].attinf[index]
this.group[0].attribute[suri].attinf[index]=this.group[0].attribute[suri].attinf[attributei]
this.group[0].attribute[suri].attinf[attributei]=temp
return
}
}
}
}
}
//新建预案
@Component({
@ -930,6 +1060,35 @@ export class addGroup{
}
}
//自定义新增分组
@Component({
selector: 'zdyaddGroup',
templateUrl: './zdyaddgroup.html',
styleUrls: ['./addgroup.scss']
})
export class zdyaddGroup{
constructor(private http: HttpClient,public dialogRef: MatDialogRef<addGroup>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}
ngOnInit(): void{
//console.log(this.data)
}
groupName
//取消按钮
close(){
this.dialogRef.close();
}
//确定提交
newGroup(){
console.log(this.groupName)
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
if(this.groupName==''||this.groupName==undefined){
this.snackBar.open('请输入分组名称!','确定',config);
}else{
this.dialogRef.close(this.groupName);
}
}
}
//单位概况新增弹窗
@Component({
selector: 'adddwsurvey',
@ -971,6 +1130,35 @@ defineClick(){
this.dialogRef.close(this.addwsurvey)
}
}
//单位概况自定义新增弹窗
@Component({
selector: 'zdyaddattinf',
templateUrl: './zdyaddgroup.html',
styleUrls: ['./addgroup.scss']
})
export class zdyaddattinf{
constructor(private http: HttpClient,public dialogRef: MatDialogRef<addGroup>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}
ngOnInit(): void{
//console.log(this.data)
}
groupName
//取消按钮
close(){
this.dialogRef.close();
}
//确定提交
newGroup(){
console.log(this.groupName)
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
if(this.groupName==''||this.groupName==undefined){
this.snackBar.open('请输入属性名称!','确定',config);
}else{
this.dialogRef.close(this.groupName);
}
}
}
//编辑单位概况单位基本信息属性信息弹窗
@Component({
selector: 'addattinf',
@ -1087,7 +1275,51 @@ defineClick(){
this.addAttinfBuild:this.data.surveyName=='消防设施'?this.addAttinfFile:this.facilityItems)
}
}
//单位概况自定义新增四个分类
@Component({
selector: 'zdydisaster',
templateUrl: './Disaster.html',
styleUrls: ['./addKeyname.scss']
})
export class zdydisaster{
constructor(private http: HttpClient,public dialogRef: MatDialogRef<disaster>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}
ngOnInit(): void{
console.log(this.data)
}
level//类型
headName//表头名称
lieNumber//列数
hNumber//行数
//取消按钮
close(){
this.dialogRef.close();
}
//确定按钮
newdisaster(){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
if(this.level==undefined||this.level==''){
this.snackBar.open('请选择类型!','确定',config);
}else if(this.headName==undefined||this.headName==''){
this.snackBar.open('请输入表头名称!','确定',config);
}else{
let tree={
json:[],
name: ''
}
let attrubute={
headName:this.headName,
level:this.level,
tableth:this.level==1||this.level==2?[]:this.level==3?'':tree,
lieNumber:this.lieNumber,
hNumber:this.hNumber
}
this.dialogRef.close(attrubute);
}
}
}
//灾情设定弹窗
@Component({
selector: 'disaster',

17
src/app/ui/plan-template/zdyaddgroup.html

@ -0,0 +1,17 @@
<div class="box">
<div class="top">
<span>自定义新增</span>
</div>
<div class="center">
<div class="group" >
<label style="margin-right: 10px;">自定义名称:</label>
<mat-form-field class="example-full-width">
<input matInput placeholder="请输入自定义名称" autocomplete="off" [(ngModel)]="groupName" required>
</mat-form-field>
</div>
</div>
<div class="bottom">
<button mat-raised-button color="primary" (click)='newGroup()' style="margin-left: 50px;">确定</button>
<button mat-raised-button style="margin-left: 20px;" (click)="close()">取消</button>
</div>
</div>

5
src/app/ui/ui.module.ts

@ -93,6 +93,9 @@ import { addattinf } from './plan-template/plan-template.component'
import { disaster } from './plan-template/plan-template.component'
import { BrowserModule } from '@angular/platform-browser';
import { TreeDiagramModule } from './ng-tree-diagram/src/ng-tree-diagram';
import { zdyaddGroup } from './plan-template/plan-template.component'
import { zdyaddattinf } from './plan-template/plan-template.component'
import { zdydisaster } from './plan-template/plan-template.component'
@NgModule({
declarations: [UiComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,
@ -104,7 +107,7 @@ import { TreeDiagramModule } from './ng-tree-diagram/src/ng-tree-diagram';
addBuiltInAttributeComponent, addOptionalComponent, addOptionalAttributeComponent, editBuiltInAttributeComponent, editOptionalAttributeComponent, CollectionToolsComponent, WorkingAreaComponent,
CreateBuilding, EditBuilding, leftFunctionalDomainComponent, editPlaneFigureComponent, saveOneDialog, saveTwoDialog, addDisposalNodeComponent, editDisposalNodeComponent, CollectionToolsPlanComponent,
CreateBuildingPlan, EditBuildingPlan, leftFunctionalDomainComponentPlan, editPlaneFigureComponentPlan, addOffices, editOffices, addBGCDisposalNodeComponent, CollectionToolsBuildingComponent, CreateBuildingBuilding,
EditBuildingBuilding, leftFunctionalDomainBuildingComponent, editPlaneFigureBuildingComponent, Organization, PlanTemplateComponent, addPlanname, upPlanname, addGroup, adddwsurvey, addattinf,disaster],
EditBuildingBuilding, leftFunctionalDomainBuildingComponent, editPlaneFigureBuildingComponent, Organization, PlanTemplateComponent, addPlanname, upPlanname, addGroup, adddwsurvey, addattinf,disaster,zdyaddGroup,zdyaddattinf,zdydisaster],
imports: [
CommonModule,

Loading…
Cancel
Save