shaojiahao
/
ShangHaiAcquisitionPlatform
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[更新]单位基本信息采集页面替换为最新版本

master
邵佳豪 4 years ago
parent
08fa88ef5d
commit
a00efe911c
3 changed files with 631 additions and 2862 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 708
      src/app/ui/basicinfo/basicinfo.component.html
  2. 133
      src/app/ui/basicinfo/basicinfo.component.scss
  3. 2652
      src/app/ui/basicinfo/basicinfo.component.ts

708
src/app/ui/basicinfo/basicinfo.component.html
Unescape View File

@ -65,7 +65,7 @@
</div>
<div class="inputbox" style="width: 700px;">
<span style="color: red;">*</span>
<span>消防救援站：</span>
<span>辖区中队：</span>
<mat-form-field style="width: 538px;">
<input matInput id="organization" name="organization" type='text'
required minlength="1"
@ -159,598 +159,210 @@
</div>
</mat-expansion-panel>
</mat-accordion>
<!-- body -->
<div class="bottombox" style="flex: 70%;overflow-y: auto;" >
<div class="houseinfobox" style="height: 100%; overflow-y: auto;padding-bottom: 64px; box-sizing:border-box">
<!-- 创建建筑按钮 -->
<button type="button" mat-icon-button (click)="addhouseinfo()" class="addhouseinfo"><mat-icon style="font-size: 38px;">add_circle_outline</mat-icon></button>
<mat-tab-group style="height: 100%;;" (focusChange)="selecttab($event)" >
<mat-tab [label]="item.username" *ngFor="let item of houses;let key = index">
<form style="height: 100%; overflow-y:auto; display: block;" (ngSubmit)="onSubmit2(form.value,item,key,form.invalid)" #form="ngForm" class="example-container">
<!-- 正常建筑 -->
<div class="highinfo" *ngIf="item.tongyong">
<div class="houseinfoinput" >
<div class="bodyBox" id="basicInfoBody">
<div>
<button type="button" mat-icon-button (click)="addhouseinfo()" class="addBuilding"><mat-icon>add_circle_outline</mat-icon></button>
</div>
<div style="height: 100%; box-sizing:border-box;overflow-y: auto;padding-left: 26px;">
<mat-tab-group style="height: 100%;" [selectedIndex]="selectedIndex" (selectedTabChange)="selectedTabChange($event)">
<mat-tab *ngFor="let item of houses;let key = index" label="{{item.name}}">
<ng-template matTabContent>
<form *ngIf="item.data && item.data.length!=0" style="height: 100%; overflow-y:auto; display: block;" (ngSubmit)="onSubmitBuildingInfo(form.value,item,key,form.invalid)" #form="ngForm" class="example-container">
<div class="buildInfoInput" >
<span>建筑名称：</span>
<mat-form-field>
<input matInput id="housename" name="housename" type='text'
minlength="1" [(ngModel)]="item.name"
>
<input required matInput name="buildingName" type='text' minlength="1" [(ngModel)]="item.name">
</mat-form-field>
<span style="color: red;">*</span>
</div>
<div class="houseinfoinput">
<div class="buildInfoInput">
<span>建筑类型：</span>
<mat-form-field>
<mat-select name="unittype" [(ngModel)]="item.buildtype">
<mat-option [value]="n.name" *ngFor="let n of allunittype" (click)="templatebuildtype(n,item,key)">{{n.name}}</mat-option>
<mat-select name="buildingTypeName" [(ngModel)]="item.buildingTypes[0].name">
<mat-option [value]="n.name" *ngFor="let n of allunittype" (click)="templateBuildtype(n,item,key)">{{n.name}}</mat-option>
</mat-select>
</mat-form-field>
<span style="color: red;">*</span>
</div>
<div *ngFor="let item of item.buildingBasicGroups;let www = index" style="float: left;">
<h1 style="font-size: 22px;">{{item.name}}</h1>
<div class="houseinfoinput" *ngFor="let i of item.propertyInfos" style="float: left;margin-left: 250px;position: relative;">
<span>{{i.propertyName}}<span *ngIf="i.physicalUnit">({{i.physicalUnit}})</span>：</span>
<!-- 如果类型是文本 -->
<mat-form-field *ngIf="i.propertyType == 0 && i.propertyName != '耐火等级'">
<input matInput id="floorspace" name="{{i.propertyName}}{{www}}" type='text'
required="{{ i.required==true ? 'true' : 'false' }}"
[(ngModel)]="i.propertyValue">
</mat-form-field>
<!-- 如果类型是数字 -->
<mat-form-field *ngIf="i.propertyType == 2 && i.propertyName != '耐火等级'">
<input matInput id="floorspace" name="{{i.propertyName}}{{www}}" type='number'
required="{{ i.required==true ? 'true' : 'false' }}"
[(ngModel)]="i.propertyValue"
(change)="inputchange($event,i.ruleName,i.ruleValue,i)"
>
<!-- <mat-error *ngIf="isshowrule">{{rulevalue}}</mat-error> -->
</mat-form-field>
<!-- 如果类型是耐火等级 -->
<mat-form-field *ngIf="i.propertyName == '耐火等级'">
<mat-select name="{{i.propertyName}}{{www}}" required="{{ i.required==true ? 'true' : 'false' }}" placeholder="请选择耐火等级" [(ngModel)]="i.propertyValue">
<mat-option value="0">1级</mat-option>
<mat-option value="1">2级</mat-option>
<mat-option value="2">3级</mat-option>
<mat-option value="3">其它</mat-option>
</mat-select>
</mat-form-field>
<!-- 如果类型是多行文本 -->
<textarea *ngIf="i.propertyType == 1 && i.propertyName != '耐火等级'" style="width: 180px;height: 60px;" required="{{ i.required==true ? 'true' : 'false' }}" [(ngModel)]="i.propertyValue" name="{{i.propertyName}}{{key}}"></textarea>
<span style="color: red;" *ngIf="i.required">*</span>
<div *ngIf="i.isshowrule" style="position: absolute;
left: 205px;
top: 45px;
font-size: 11px;
color: red;">
<span>{{i.rulevalue}}</span>
<div *ngFor="let element of item.data[0].buildingBasicGroups;let groupsIndex = index "style="float: left;width:100%">
<!-- 类型为表单并且不是 罐区 -->
<div *ngIf="element.type == 0 && element.name.indexOf('罐区') == -1">
<p style="font-size: 22px;">{{element.name}}</p>
<div class="buildInfoInput" *ngFor="let i of element.propertyInfos;let inputIndex = index" style="float: left;margin-left: 250px;position: relative;">
<span>{{i.propertyName}}<span *ngIf="i.physicalUnit">({{i.physicalUnit}})</span>：</span>
<!-- 如果类型是文本 -->
<mat-form-field *ngIf="i.propertyType == 0 && i.propertyName != '耐火等级'">
<input matInput id="floorspace" name="{{groupsIndex}}{{inputIndex}}" type='text'
required="{{ i.required==true ? 'true' : 'false' }}"
[(ngModel)]="i.propertyValue">
</mat-form-field>
<!-- 如果类型是数字 -->
<mat-form-field *ngIf="i.propertyType == 2 && i.propertyName != '耐火等级'">
<input matInput id="floorspace" name="{{groupsIndex}}{{inputIndex}}" type='number'
required="{{ i.required==true ? 'true' : 'false' }}"
[(ngModel)]="i.propertyValue"
(change)="inputchange($event,i.ruleName,i.ruleValue,i)"
>
</mat-form-field>
<!-- 如果类型是耐火等级 -->
<mat-form-field *ngIf="i.propertyName == '耐火等级'">
<mat-select name="{{groupsIndex}}{{inputIndex}}" required="{{ i.required==true ? 'true' : 'false' }}" placeholder="请选择耐火等级" [(ngModel)]="i.propertyValue">
<mat-option value="0">1级</mat-option>
<mat-option value="1">2级</mat-option>
<mat-option value="2">3级</mat-option>
<mat-option value="3">其它</mat-option>
</mat-select>
</mat-form-field>
<!-- 如果类型是多行文本 -->
<textarea *ngIf="i.propertyType == 1 && i.propertyName != '耐火等级'" style="width: 180px;height: 60px;" required="{{ i.required==true ? 'true' : 'false' }}" [(ngModel)]="i.propertyValue" name="{{groupsIndex}}{{inputIndex}}"></textarea>
<span style="color: red;" *ngIf="i.required">*</span>
<div *ngIf="i.isshowrule" style="position: absolute;left: 205px;top: 45px;font-size: 11px;color: red;">
<span>{{i.rulevalue}}</span>
</div>
</div>
</div>
</div>
<div class="CustomData" style="width: 200px;">
<mat-checkbox (change)="checkCustomData($event)" name="checkbuilding" [(ngModel)]="item.isCustomData" style="float: left;margin-right: 10px;"></mat-checkbox>
<h1 style="font-size: 22px;width: 200px;">自定义信息</h1>
</div>
<div *ngIf="item.isCustomData" style="position: relative;">
<button style="position: absolute;left: 0;" type="button" mat-icon-button (click)="addCustomData(item)" class="addCustomData"><mat-icon style="font-size: 38px;">add_circle_outline</mat-icon></button>
<button style="position: absolute;left:60px;" type="button" mat-icon-button (click)="deleteCustomData(item)" class="deleteCustomData"><mat-icon style="font-size: 38px;">remove_circle_outline</mat-icon></button>
<div class="houseinfoinput" style="float: left;margin-left: 250px;" *ngFor="let i of item.buildingCustomData.customProperties;let key = index">
<mat-form-field>
<input matInput type='text' name="{{key}}1CustomData"
required
[(ngModel)]="i.name">
</mat-form-field>
<span>:</span>
<mat-form-field>
<input matInput type='text' name="{{key}}2CustomData"
required
[(ngModel)]="i.value">
</mat-form-field>
<span style="color: red;" *ngIf="i.required">*</span>
</div>
</div>
</div>
<!-- 石油化工 -->
<div class="highinfo" *ngIf="item.isshiyou;let bigkey = index">
<div class="basicinfobox">
<div class="houseinfoinput">
<span>建筑名称：</span>
<mat-form-field>
<input matInput id="housename" name="housename" type='text'
required minlength="1" [(ngModel)]="item.name"
>
</mat-form-field>
<span style="color: red;">*</span>
</div>
<div class="houseinfoinput" >
<span>建筑类型：</span>
<mat-form-field>
<mat-select required name="unittype" [(ngModel)]="item.buildtype">
<mat-option [value]="n.name" *ngFor="let n of allunittype" (click)="templatebuildtype(n,item,key)">{{n.name}}</mat-option>
</mat-select>
</mat-form-field>
<span style="color: red;">*</span>
<!-- 类型为表格 并且不是 罐区 -->
<div *ngIf="element.type == 1 && element.name.indexOf('罐区') == -1">
<p style="font-size: 22px;">
<mat-checkbox color="primary" (change)="checkboxChange(element,$event,item)" *ngIf="element.isOptional" [name]="element.name" [(ngModel)]="element.submitted" style="float: left;margin-right: 10px;"></mat-checkbox>
{{element.name}}
</p>
<table *ngIf="element.submitted">
<tr>
<th *ngFor="let item of element.propertyInfos[0].origin;let index = index">
<button *ngIf="index == 0" style="width: 24px;" type="button" mat-icon-button class="addline" (click)="addline(element.propertyInfos)"><mat-icon>add_circle_outline</mat-icon></button>
<button *ngIf="index == 0" style="width: 24px;" type="button" mat-icon-button class="removeline" (click)="removeline(element.propertyInfos)"><mat-icon>remove_circle_outline</mat-icon></button>
{{item.propertyName}}
<span style="color: red;" *ngIf="item.required">*</span>
</th>
</tr>
<tr *ngFor="let item of element.propertyInfos;let line = index">
<td *ngFor="let i of item.origin;let list = index">
<input *ngIf="i.propertyType != 1" style="height:45px" class="tankinfo" name="{{element.name}}{{line + 1}}-{{list + 1}}" type="{{i.propertyType == 0 ? 'text' : 'number'}}"
required="{{ i.required==true ? 'true' : 'false' }}" [(ngModel)]="i.propertyValue">
<textarea class="tankinfo" *ngIf="i.propertyType == 1" required="{{ i.required==true ? 'true' : 'false' }}" [(ngModel)]="i.propertyValue" name="{{element.name}}{{line + 1}}{{list + 1}}">
</textarea>
</td>
</tr>
</table>
</div>
<h1 style="font-size: 22px;">{{item.buildingBasicGroups[0].name}}</h1>
<div class="houseinfoinput" *ngFor="let i of item.buildingBasicGroups[0].propertyInfos;let smkey = index" style="float: left;margin-left: 250px;position: relative;">
<span>{{i.propertyName}} <span *ngIf="i.physicalUnit">({{i.physicalUnit}})</span> ：</span>
<!-- 如果类型是文本 -->
<mat-form-field *ngIf="i.propertyType == 0 && i.propertyName != '耐火等级'">
<input matInput id="floorspace" name="{{i.propertyName}}" type='text'
required="{{ i.required==true ? 'true' : 'false' }}"
[(ngModel)]="i.propertyValue">
</mat-form-field>
<!-- 如果类型是数字 -->
<mat-form-field *ngIf="i.propertyType == 2 && i.propertyName != '耐火等级'">
<input matInput id="floorspace" name="{{i.propertyName}}" type='number'
required="{{ i.required==true ? 'true' : 'false' }}"
[(ngModel)]="i.propertyValue"
(change)="inputchange($event,i.ruleName,i.ruleValue,i)"
>
<!-- <mat-error *ngIf="isshowrule">{{rulevalue}}</mat-error> -->
</mat-form-field>
<!-- 如果类型是耐火等级 -->
<mat-form-field *ngIf="i.propertyName == '耐火等级'">
<mat-select name="{{i.propertyName}}" required="{{ i.required==true ? 'true' : 'false' }}" placeholder="请选择耐火等级" [(ngModel)]="i.propertyValue">
<mat-option value="0">1级</mat-option>
<mat-option value="1">2级</mat-option>
<mat-option value="2">3级</mat-option>
<mat-option value="3">其它</mat-option>
</mat-select>
</mat-form-field>
<!-- 如果类型是多行文本 -->
<textarea *ngIf="i.propertyType == 1 && i.propertyName != '耐火等级'" style="width: 180px;height: 60px;" required="{{ i.required==true ? 'true' : 'false' }}" [(ngModel)]="i.propertyValue" name="{{i.propertyName}}"></textarea>
<span style="color: red;" *ngIf="i.required">*</span>
<div *ngIf="i.isshowrule" style="position: absolute;
left: 205px;
top: 45px;
font-size: 11px;
color: red;">
<span>{{i.rulevalue}}</span>
</div>
</div>
</div>
<!-- 装置信息 -->
<div class="deviceinfo" >
<div style="width: 200px;">
<mat-checkbox (change)="checkboxchange(item.buildingBasicGroups[1].submitted,$event)" name="item.buildingBasicGroups[1].name" *ngIf="item.buildingBasicGroups[1].isOptional" [(ngModel)]="item.buildingBasicGroups[1].submitted" style="float: left;margin-right: 10px;"></mat-checkbox>
<h1 style="font-size: 22px;width: 200px;">{{item.buildingBasicGroups[1].name}}</h1>
</div>
<table mat-table [dataSource]="devicedataSourcebox[item.buildingId]" class="mat-elevation-z8" *ngIf="item.buildingBasicGroups[1].submitted">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
<button style="width: 24px;" type="button" mat-icon-button class="adddeviceinfo2" (click)="adddeviceinfo(item)"><mat-icon>add_circle_outline</mat-icon></button>
<button style="width: 24px;" type="button" mat-icon-button class="removedeviceinfo" (click)="removedeviceinfo(item)"><mat-icon>remove_circle_outline</mat-icon></button>
装置区名称<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<textarea style="width: 100px;" [(ngModel)]="element.name" name="{{key}}1" required></textarea>
</td>
</ng-container>
<ng-container matColumnDef="flow">
<th mat-header-cell *matHeaderCellDef>工艺流程<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<textarea [(ngModel)]="element.flow" name="{{key}}2" required></textarea>
</td>
</ng-container>
<ng-container matColumnDef="danger">
<th mat-header-cell *matHeaderCellDef>火灾危险性<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<textarea [(ngModel)]="element.danger" name="{{key}}3" required></textarea>
</td>
</ng-container>
<ng-container matColumnDef="payattentionto">
<th mat-header-cell *matHeaderCellDef>灭火注意事项</th>
<td mat-cell *matCellDef="let element;let key = index">
<textarea style="width: 100px;" [(ngModel)]="element.payattentionto" name="{{key}}4"></textarea>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<!-- 储罐信息 -->
<div style="width: 200px;">
<mat-checkbox (change)="checkboxchange(item,$event)" *ngIf="item.buildingBasicGroups[2].isOptional" name="item.buildingBasicGroups[2].name" [(ngModel)]="item.buildingBasicGroups[2].submitted" style="float: left;margin-right: 10px;"></mat-checkbox>
<h1 style="font-size: 22px;width: 200px;">储罐信息</h1>
</div>
<button *ngIf="item.buildingBasicGroups[2].submitted" type="button" mat-raised-button color="primary" (click)="addtankbox(item,'石油化工类')" style="margin-top: 30px;margin-right: 5px;">添加储罐</button>
<button *ngIf="item.buildingBasicGroups[2].submitted" type="button" mat-raised-button color="warn" (click)="removetankbox(item,bigkey)" style="margin-top: 30px;" matTooltip="会将此建筑处于末尾的储罐移除">移除末尾储罐</button>
<div *ngIf="item.buildingBasicGroups[2].submitted" style="margin-top: 30px;">
<div class="tankinfo" *ngFor="let x of item.bigfor;let www = index">
<!-- 罐区基本信息 -->
<p style="font-size: 22px; width: 200px;">{{x[0].name}}</p>
<div class="basicinfobox" >
<div class="houseinfoinput" *ngFor="let i of x[0].propertyInfos;let key = index" style="line-height: 65px;">
<span>{{i.propertyName}} {{i.physicalUnit}}：</span>
<mat-form-field *ngIf="i.propertyType == 0">
<input matInput id="floorspace" name="{{www+2}}-tanker-{{key}}" type='text'
<!-- 类型为表单 是罐区-->
<div *ngIf="element.type == 0 && element.name.indexOf('罐区') != -1">
<p style="font-size: 22px;">
<mat-checkbox color="primary" (change)="checkboxChange(element,$event,item)" *ngIf="element.isOptional && element.name == '罐区1'" [name]="element.name" [(ngModel)]="element.submitted" style="float: left;margin-right: 10px;"></mat-checkbox>
<span *ngIf="element.name == '罐区1'">罐区信息</span>
</p>
<div *ngIf="element.submitted" >
<p *ngIf="element.name == '罐区1'" style="margin: 5px 0;">
<button type="button" mat-raised-button color="primary" (click)="addTankBox(item,groupsIndex)" style="margin-right: 5px;">添加罐区</button>
<button type="button" mat-raised-button color="warn" (click)="removeTankBox(item,groupsIndex)" matTooltip="会将此建筑处于末尾的罐区移除">移除末尾罐区</button>
</p>
<p style="font-size: 22px;">{{element.name}}</p>
<div class="buildInfoInput" *ngFor="let i of element.propertyInfos;let inputIndex = index" style="float: left;margin-left: 250px;position: relative;">
<span>{{i.propertyName}}<span *ngIf="i.physicalUnit">({{i.physicalUnit}})</span>：</span>
<!-- 如果类型是文本 -->
<mat-form-field *ngIf="i.propertyType == 0 && i.propertyName != '耐火等级'">
<input matInput id="floorspace" name="{{groupsIndex}}{{inputIndex}}" type='text'
required="{{ i.required==true ? 'true' : 'false' }}"
[(ngModel)]="i.propertyValue"
>
[(ngModel)]="i.propertyValue">
</mat-form-field>
<textarea style="width: 180px;height: 45px;" *ngIf="i.propertyType == 1" [(ngModel)]="i.propertyValue" name="{{www+2}}-tanker-{{key}}"></textarea>
<span style="color: red;" *ngIf="i.required">*</span>
</div>
</div>
<!-- 罐区储罐信息 -->
<p style="font-size: 22px; width: 200px;">{{x[1].name}}</p>
<div class="tankdetailinfo">
<table #table mat-table [dataSource]="x[1].propertyInfos" class="mat-elevation-z8" style="position: relative;">
<ng-container matColumnDef="tank">
<th mat-header-cell *matHeaderCellDef>
<button type="button" mat-icon-button class="adddeviceinfo" (click)="adddeviceinfo2(www,item,'石油化工类')" style="position: absolute;left: 0;"><mat-icon>add_circle_outline</mat-icon></button>
<button type="button" mat-icon-button class="removedeviceinfo" (click)="removedeviceinfo3(www,item)"><mat-icon>remove_circle_outline</mat-icon></button>
罐区 </th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tank}}tank{{key}}" type='text'
[(ngModel)]="element.tank">
</td>
</ng-container>
<ng-container matColumnDef="tankid">
<th mat-header-cell *matHeaderCellDef>储罐编号<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tankid}}tank{{key}}" type='text'
required
[(ngModel)]="element.tankid">
</td>
</ng-container>
<ng-container matColumnDef="tankmedium">
<th mat-header-cell *matHeaderCellDef>储存介质<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tankmedium}}tank{{key}}" type='text'
required
[(ngModel)]="element.tankmedium">
</td>
</ng-container>
<ng-container matColumnDef="tanktype">
<th mat-header-cell *matHeaderCellDef>储罐类型<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tanktype}}tank{{key}}" type='text'
required
[(ngModel)]="element.tanktype">
</td>
</ng-container>
<ng-container matColumnDef="tankcapacity">
<th mat-header-cell *matHeaderCellDef>容量(m³)<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tankcapacity}}tank{{key}}" type='text'
required
[(ngModel)]="element.tankcapacity">
</td>
</ng-container>
<ng-container matColumnDef="tankdiameter">
<th mat-header-cell *matHeaderCellDef>直径(m)<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tankdiameter}}tank{{key}}" type='text'
required
[(ngModel)]="element.tankdiameter">
</td>
</ng-container>
<ng-container matColumnDef="tankheight">
<th mat-header-cell *matHeaderCellDef>高度(m)<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tankheight}}tank{{key}}" type='text'
required
[(ngModel)]="element.tankheight">
</td>
</ng-container>
<ng-container matColumnDef="tanktectum">
<th mat-header-cell *matHeaderCellDef>顶盖形式</th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tanktectum}}tank{{key}}" type='text'
[(ngModel)]="element.tanktectum">
</td>
</ng-container>
<ng-container matColumnDef="tanktexture">
<th mat-header-cell *matHeaderCellDef>浮盘材质</th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tanktexture}}tank{{key}}" type='text'
[(ngModel)]="element.tanktexture">
</td>
</ng-container>
<ng-container matColumnDef="platetype">
<th mat-header-cell *matHeaderCellDef>浮盘类型</th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.platetype}}tank{{key}}" type='text'
[(ngModel)]="element.platetype">
</td>
</ng-container>
<ng-container matColumnDef="foamgeneratorid">
<th mat-header-cell *matHeaderCellDef>泡沫产生器型号</th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.foamgeneratorid}}tank{{key}}" type='text'
[(ngModel)]="element.foamgeneratorid">
</td>
</ng-container>
<ng-container matColumnDef="foamgeneratortype">
<th mat-header-cell *matHeaderCellDef>泡沫产生器形式</th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.foamgeneratortype}}tank{{key}}" type='text'
[(ngModel)]="element.foamgeneratortype">
</td>
</ng-container>
<ng-container matColumnDef="isprotect">
<th mat-header-cell *matHeaderCellDef>是否设置氮封惰化保护装置</th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.isprotect}}tank{{key}}" type='text'
[(ngModel)]="element.isprotect">
</td>
</ng-container>
<ng-container matColumnDef="fendinggroyneheight">
<th mat-header-cell *matHeaderCellDef>防护堤高度(m)<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.fendinggroyneheight}}tank{{key}}" type='text'
required
[(ngModel)]="element.fendinggroyneheight">
</td>
</ng-container>
<ng-container matColumnDef="portnum">
<th mat-header-cell *matHeaderCellDef>半固定泡沫灭火接口数量</th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.portnum}}tank{{key}}" type='text'
[(ngModel)]="element.portnum">
</td>
</ng-container>
<ng-container matColumnDef="else">
<th mat-header-cell *matHeaderCellDef>其它设施</th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.else}}tank{{key}}" type='text'
[(ngModel)]="element.else">
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns2;"></tr>
</table>
</div>
</div>
</div>
<div class="CustomData" style="width: 200px;margin-top: 60px;">
<mat-checkbox (change)="checkCustomData($event)" name="checkbuilding" [(ngModel)]="item.isCustomData" style="float: left;margin-right: 10px;"></mat-checkbox>
<h1 style="font-size: 22px;width: 200px;">自定义信息</h1>
</div>
<div *ngIf="item.isCustomData" style="position: relative;">
<button style="position: absolute;left: 0;font-size: 11px;" type="button" mat-icon-button (click)="addCustomData(item)" class="addCustomData"><mat-icon style="font-size: 38px;">add_circle_outline</mat-icon></button>
<button style="position: absolute;left:60px;" type="button" mat-icon-button (click)="deleteCustomData(item)" class="deleteCustomData"><mat-icon style="font-size: 38px;">remove_circle_outline</mat-icon></button>
<div class="houseinfoinput" style="float: left;margin-left: 250px;" *ngFor="let i of item.buildingCustomData.customProperties;let key = index">
<mat-form-field>
<input matInput type='text' name="{{key}}1CustomData"
required
[(ngModel)]="i.name">
</mat-form-field>
<span>:</span>
<mat-form-field>
<input matInput type='text' name="{{key}}2CustomData"
required
[(ngModel)]="i.value">
</mat-form-field>
<span style="color: red;" *ngIf="i.required">*</span>
</div>
</div>
</div>
<!-- 加油站 -->
<div class="highinfo" *ngIf="item.jiayou;let bigkey = index">
<div class="basicinfobox">
<div class="houseinfoinput">
<span>建筑名称：</span>
<mat-form-field>
<input matInput id="housename" name="housename" type='text'
required minlength="1" [(ngModel)]="item.name"
>
</mat-form-field>
<span style="color: red;">*</span>
</div>
<div class="houseinfoinput" >
<span>建筑类型：</span>
<mat-form-field>
<mat-select required name="unittype" [(ngModel)]="item.buildtype">
<mat-option [value]="n.name" *ngFor="let n of allunittype" (click)="templatebuildtype(n,item,key)">{{n.name}}</mat-option>
</mat-select>
</mat-form-field>
<span style="color: red;">*</span>
</div>
<h1 style="font-size: 22px;">{{item.buildingBasicGroups[0].name}}</h1>
<div class="houseinfoinput" *ngFor="let i of item.buildingBasicGroups[0].propertyInfos;let smkey = index" style="float: left;margin-left: 250px;position: relative;">
<span>{{i.propertyName}} <span *ngIf="i.physicalUnit">({{i.physicalUnit}})</span> ：</span>
<!-- 如果类型是文本 -->
<mat-form-field *ngIf="i.propertyType == 0 && i.propertyName != '耐火等级'">
<input matInput id="floorspace" name="{{i.propertyName}}" type='text'
required="{{ i.required==true ? 'true' : 'false' }}"
[(ngModel)]="i.propertyValue">
</mat-form-field>
<!-- 如果类型是数字 -->
<mat-form-field *ngIf="i.propertyType == 2 && i.propertyName != '耐火等级'">
<input matInput id="floorspace" name="{{i.propertyName}}" type='number'
required="{{ i.required==true ? 'true' : 'false' }}"
[(ngModel)]="i.propertyValue"
(change)="inputchange($event,i.ruleName,i.ruleValue,i)"
>
<!-- <mat-error *ngIf="isshowrule">{{rulevalue}}</mat-error> -->
</mat-form-field>
<!-- 如果类型是耐火等级 -->
<mat-form-field *ngIf="i.propertyName == '耐火等级'">
<mat-select name="{{i.propertyName}}" required="{{ i.required==true ? 'true' : 'false' }}" placeholder="请选择耐火等级" [(ngModel)]="i.propertyValue">
<mat-option value="0">1级</mat-option>
<mat-option value="1">2级</mat-option>
<mat-option value="2">3级</mat-option>
<mat-option value="3">其它</mat-option>
</mat-select>
</mat-form-field>
<!-- 如果类型是多行文本 -->
<textarea *ngIf="i.propertyType == 1 && i.propertyName != '耐火等级'" style="width: 180px;height: 60px;" required="{{ i.required==true ? 'true' : 'false' }}" [(ngModel)]="i.propertyValue" name="{{i.propertyName}}"></textarea>
<span style="color: red;" *ngIf="i.required">*</span>
<div *ngIf="i.isshowrule" style="position: absolute;
left: 205px;
top: 45px;
font-size: 11px;
color: red;">
<span>{{i.rulevalue}}</span>
</div>
</div>
</div>
<!-- 装置信息 -->
<!-- 储罐信息 -->
<div style="width: 200px;">
<mat-checkbox (change)="checkboxchange(item,$event)" *ngIf="item.buildingBasicGroups[2].isOptional" name="item.buildingBasicGroups[2].name" [(ngModel)]="item.buildingBasicGroups[2].submitted" style="float: left;margin-right: 10px;"></mat-checkbox>
<h1 style="font-size: 22px;width: 200px;">储罐信息</h1>
</div>
<button *ngIf="item.buildingBasicGroups[2].submitted" type="button" mat-raised-button color="primary" (click)="addtankbox(item,'加油站')" style="margin-top: 30px;margin-right: 5px;">添加储罐</button>
<button *ngIf="item.buildingBasicGroups[2].submitted" type="button" mat-raised-button color="warn" (click)="removetankbox(item,bigkey)" style="margin-top: 30px;" matTooltip="会将此建筑处于末尾的储罐移除">移除末尾储罐</button>
<div *ngIf="item.buildingBasicGroups[2].submitted" style="margin-top: 30px;">
<div class="tankinfo" *ngFor="let x of item.bigfor;let www = index">
<!-- 罐区基本信息 -->
<p style="font-size: 22px; width: 200px;">{{x[0].name}}</p>
<div class="basicinfobox" >
<div class="houseinfoinput" *ngFor="let i of x[0].propertyInfos;let key = index" style="line-height: 65px;">
<span>{{i.propertyName}} {{i.physicalUnit}}：</span>
<mat-form-field *ngIf="i.propertyType == 0">
<input matInput id="floorspace" name="{{www+2}}-tanker-{{key}}" type='text'
<!-- 如果类型是数字 -->
<mat-form-field *ngIf="i.propertyType == 2 && i.propertyName != '耐火等级'">
<input matInput id="floorspace" name="{{groupsIndex}}{{inputIndex}}" type='number'
required="{{ i.required==true ? 'true' : 'false' }}"
[(ngModel)]="i.propertyValue"
(change)="inputchange($event,i.ruleName,i.ruleValue,i)"
>
</mat-form-field>
<textarea style="width: 180px;height: 45px;" *ngIf="i.propertyType == 1" [(ngModel)]="i.propertyValue" name="{{www+2}}-tanker-{{key}}"></textarea>
<!-- 如果类型是耐火等级 -->
<mat-form-field *ngIf="i.propertyName == '耐火等级'">
<mat-select name="{{groupsIndex}}{{inputIndex}}" required="{{ i.required==true ? 'true' : 'false' }}" placeholder="请选择耐火等级" [(ngModel)]="i.propertyValue">
<mat-option value="0">1级</mat-option>
<mat-option value="1">2级</mat-option>
<mat-option value="2">3级</mat-option>
<mat-option value="3">其它</mat-option>
</mat-select>
</mat-form-field>
<!-- 如果类型是多行文本 -->
<textarea *ngIf="i.propertyType == 1 && i.propertyName != '耐火等级'" style="width: 180px;height: 60px;" required="{{ i.required==true ? 'true' : 'false' }}" [(ngModel)]="i.propertyValue" name="{{groupsIndex}}{{inputIndex}}"></textarea>
<span style="color: red;" *ngIf="i.required">*</span>
<div *ngIf="i.isshowrule" style="position: absolute;left: 205px;top: 45px;font-size: 11px;color: red;">
<span>{{i.rulevalue}}</span>
</div>
</div>
</div>
<!-- 罐区储罐信息 -->
<p style="font-size: 22px; width: 200px;">{{x[1].name}}</p>
<div class="tankdetailinfo">
<table #table mat-table [dataSource]="x[1].propertyInfos" class="mat-elevation-z8" style="position: relative;">
<ng-container matColumnDef="tankid">
<th mat-header-cell *matHeaderCellDef>
<button type="button" mat-icon-button class="adddeviceinfo" (click)="adddeviceinfo2(www,item,'加油站')" style="position: absolute;left: 0;"><mat-icon>add_circle_outline</mat-icon></button>
<button type="button" mat-icon-button class="removedeviceinfo" (click)="removedeviceinfo3(www,item)"><mat-icon>remove_circle_outline</mat-icon></button>
储罐编号<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tankid}}tank{{key}}" type='text'
required
[(ngModel)]="element.tankid">
</td>
</ng-container>
<ng-container matColumnDef="tankmedium">
<th mat-header-cell *matHeaderCellDef>储存介质<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tankmedium}}tank{{key}}" type='text'
required
[(ngModel)]="element.tankmedium">
</td>
</ng-container>
<ng-container matColumnDef="tanktype">
<th mat-header-cell *matHeaderCellDef>储罐类型<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tanktype}}tank{{key}}" type='text'
required
[(ngModel)]="element.tanktype">
</td>
</ng-container>
<ng-container matColumnDef="tankcapacity">
<th mat-header-cell *matHeaderCellDef>容量(m³)<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tankcapacity}}tank{{key}}" type='text'
required
[(ngModel)]="element.tankcapacity">
</td>
</ng-container>
<ng-container matColumnDef="tankdiameter">
<th mat-header-cell *matHeaderCellDef>直径(m)<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tankdiameter}}tank{{key}}" type='text'
required
[(ngModel)]="element.tankdiameter">
</td>
</ng-container>
<ng-container matColumnDef="tankheight">
<th mat-header-cell *matHeaderCellDef>高度(m)<span style="color: red;">*</span></th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.tankheight}}tank{{key}}" type='text'
required
[(ngModel)]="element.tankheight">
</td>
</ng-container>
<ng-container matColumnDef="else">
<th mat-header-cell *matHeaderCellDef>其它设施</th>
<td mat-cell *matCellDef="let element;let key = index">
<input style="height:45px" class="tankinfo" name="{{www}}{{element.else}}tank{{key}}" type='text'
[(ngModel)]="element.else">
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns3"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns3;"></tr>
</table>
</div>
</div>
<!-- 类型为表格 是罐区 -->
<div *ngIf="element.type == 1 && element.name.indexOf('罐区') != -1">
<p style="font-size: 22px;" *ngIf="element.submitted">
{{element.name}}
</p>
<table *ngIf="element.submitted">
<tr>
<th *ngFor="let item of element.propertyInfos[0].origin;let index = index">
<button *ngIf="index == 0" style="width: 24px;" type="button" mat-icon-button class="addline" (click)="addline(element.propertyInfos)"><mat-icon>add_circle_outline</mat-icon></button>
<button *ngIf="index == 0" style="width: 24px;" type="button" mat-icon-button class="removeline" (click)="removeline(element.propertyInfos)"><mat-icon>remove_circle_outline</mat-icon></button>
{{item.propertyName}}
<span style="color: red;" *ngIf="item.required">*</span>
</th>
</tr>
<tr *ngFor="let item of element.propertyInfos;let line = index">
<td *ngFor="let i of item.origin;let list = index">
<input type="{{i.propertyType == 0 ? 'text' : 'number'}}" style="height:45px" class="tankinfo" name="{{element.name}}{{line + 1}}-{{list + 1}}"
required="{{ i.required==true ? 'true' : 'false' }}" [(ngModel)]="i.propertyValue">
</td>
</tr>
</table>
</div>
</div>
<div class="CustomData" style="width: 200px;margin-top: 60px;">
<mat-checkbox (change)="checkCustomData($event)" name="checkbuilding" [(ngModel)]="item.isCustomData" style="float: left;margin-right: 10px;"></mat-checkbox>
<mat-checkbox color="primary" (change)="checkCustomData($event)" name="checkbuilding" [(ngModel)]="item.isCustomData" style="float: left;margin-right: 10px;"></mat-checkbox>
<h1 style="font-size: 22px;width: 200px;">自定义信息</h1>
</div>
<div *ngIf="item.isCustomData" style="position: relative;">
<button style="position: absolute;left: 0;font-size: 11px;" type="button" mat-icon-button (click)="addCustomData(item)" class="addCustomData"><mat-icon style="font-size: 38px;">add_circle_outline</mat-icon></button>
<button style="position: absolute;left:60px;" type="button" mat-icon-button (click)="deleteCustomData(item)" class="deleteCustomData"><mat-icon style="font-size: 38px;">remove_circle_outline</mat-icon></button>
<div class="houseinfoinput" style="float: left;margin-left: 250px;" *ngFor="let i of item.buildingCustomData.customProperties;let key = index">
<div style="position: relative;" *ngIf="item.isCustomData">
<button style="position: absolute;left: 100px;top: 5px;" type="button" mat-icon-button (click)="addCustomData(item)" class="addCustomData">
<mat-icon>add_circle_outline</mat-icon>
</button>
<button style="position: absolute;left:150px;top: 5px;" type="button" mat-icon-button (click)="popCustomData(item)" class="deleteCustomData">
<mat-icon>remove_circle_outline</mat-icon>
</button>
<div class="houseinfoinput" style="float: left;margin-left: 250px;" *ngFor="let i of item.customData.customProperties;let key = index">
<mat-form-field>
<input matInput type='text' name="{{key}}1CustomData"
<input matInput type='text' name="customData{{key}}Name"
required
[(ngModel)]="i.name">
</mat-form-field>
<span>:</span>
<mat-form-field>
<input matInput type='text' name="{{key}}2CustomData"
<input matInput type='text' name="customData{{key}}Value"
required
[(ngModel)]="i.value">
</mat-form-field>
<span style="color: red;" *ngIf="i.required">*</span>
</div>
</div>
<div class="infobtnbox">
<button type="submit" mat-button mat-raised-button color="primary">保存</button>
<button type="button" mat-raised-button (click)="deletedbuilding(item,key)" color="warn">删除</button>
</div>
</form>
</ng-template>
</div>
<div class="infobtnbox">
<button type="submit()" mat-button mat-raised-button color="primary" >保存</button>
<button type="button" mat-raised-button (click)="deletedbuilding(item)" color="warn">删除</button>
</div>
</form>
</mat-tab>
</mat-tab>
</mat-tab-group>
</div>
</div>
</div>

133
src/app/ui/basicinfo/basicinfo.component.scss
Unescape View File

@ -153,49 +153,32 @@
}
}
}
.bottombox{
// height:400px;
width: 100%;
// background-color: skyblue;
.bottomtitle{
height: 60px;
// background-color: orange;
line-height: 60px;
border-top: 1px solid black;
border-bottom: 1px solid black;
.bodyBox{
flex: 70%;overflow-y: auto;
position: relative;
.addBuilding{
position: absolute;
z-index: 999;
left: 0;
top: 3px;
}
.houseinfobox{
// height:340px;
overflow: auto;
.addhouseinfo{
float: left;
}
.infobtnbox{
margin-left: 800px;
position: absolute;
top: 30px;
right: 75px;
button{
width: 80px;
height: 40px;
margin: 0 12px;
margin-top: 15px;
}
}
.infotitle{
font-size: 28px;
font-weight: 900;
margin-left: 180px;
}
.houseinfoinput{
width: 393px;
text-align: end;
margin-left:240px;
.buildInfoInput{
width: 393px;
text-align: end;
margin-left:240px;
}
.infobtnbox{
position: absolute;
top: 30px;
right: 75px;
button{
width: 80px;
height: 40px;
margin: 0 12px;
margin-top: 15px;
}
}
}
.btn{
width: 100%;
text-align: center;
@ -207,37 +190,29 @@
margin-top: 58px;
margin-left: 203px;
}
.mat-table{
width: 99%;
}
table{
width: 1000px;
thead{
tr{
th{
width: 60px;
display: block;
float: left;
}
width: 99%;
tr{
display: flex;
td,th{
flex: 1;
}
}
tbody{
tr{
th{
display: flex;
align-items: center;
justify-content: center;
td{
width: 60px;
display: block;
float: left;
text-align: center;
}
}
input{
border: 0px ;
}
}
}
table,table tr th, table tr td { border: 0.1px solid gray; }
table { text-align: center; border-collapse: collapse; padding:2px;}
.deviceinfo{
// border-bottom: 1px solid black;;
padding-bottom: 60px;
}
.tankdetailinfo{
@ -251,14 +226,10 @@ table{
}
.tankinfo{
display: block;
width: 100%;
// height: 45px;
width: 97.5%;
text-align: center;
border: 0px;
}
// .adddeviceinfo{
// // position: absolute;
// // left: 0px;
// }
.submit1{
margin-left: -66px !important;
}
@ -270,31 +241,7 @@ textarea {
height: 110px;
resize: none;
}
//预览图片旋转角度
.img1{
transform:rotate(90deg) scale(0.55);
height: 100%;
}
.img2{
transform:rotate(180deg);
// height: 100%;
}
.img3{
transform:rotate(270deg) scale(0.55);
// height: 100%;
}
.img4{
transform:rotate(90deg) scale(1.3);
// height: 100%;
}
.img5{
transform:rotate(180deg);
// height: 100%;
}
.img6{
transform:rotate(270deg) scale(1.3);
// height: 100%;
}
.imgbox{
text-align: center;
height: 750px;

2652
src/app/ui/basicinfo/basicinfo.component.ts
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save