18 changed files with 3239 additions and 12 deletions
@ -0,0 +1,25 @@ |
|||||||
|
<div mat-dialog-title>新增建筑</div> |
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<mat-form-field hintLabel="名字不多于20个字"> |
||||||
|
<input matInput id="name" name="name" |
||||||
|
required |
||||||
|
maxlength="20" |
||||||
|
ngModel #name="ngModel" placeholder="建筑名称" |
||||||
|
#input |
||||||
|
> |
||||||
|
<mat-hint align="end">{{input.value?.length || 0}}/20</mat-hint> |
||||||
|
</mat-form-field> |
||||||
|
|
||||||
|
<mat-form-field> |
||||||
|
<mat-select required name="unittype" ngModel #unittype="ngModel" placeholder="建筑类型"> |
||||||
|
<mat-option [value]="item.id" *ngFor="let item of allunittype" >{{item.name}}</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
|
||||||
|
<div class="btn"> |
||||||
|
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||||
|
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||||
|
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||||
|
import {FormControl} from '@angular/forms'; |
||||||
|
import { MatSnackBar } from '@angular/material/snack-bar'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'addhouseinfo', |
||||||
|
templateUrl: './addhouseinfo.component.html', |
||||||
|
styleUrls: ['./basicinfo.component.scss'] |
||||||
|
}) |
||||||
|
export class AddHouseInfo { |
||||||
|
myControl = new FormControl(); |
||||||
|
//注入MatDialogRef，可以用来关闭对话框
|
||||||
|
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||||
|
constructor(private http: HttpClient,public dialogRef: MatDialogRef<AddHouseInfo>,@Inject(MAT_DIALOG_DATA) public data) {} |
||||||
|
allunittype:any |
||||||
|
onNoClick(): void { |
||||||
|
this.dialogRef.close(); |
||||||
|
} |
||||||
|
ngOnInit(): void { |
||||||
|
// console.log(this.data)
|
||||||
|
this.getallunittype() |
||||||
|
} |
||||||
|
getallunittype(){ |
||||||
|
this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{ |
||||||
|
this.allunittype = data |
||||||
|
}) |
||||||
|
} |
||||||
|
onSubmit(value){ |
||||||
|
|
||||||
|
this.http.get("/api/Buildings",{ |
||||||
|
params:{ |
||||||
|
companyId:this.data.unitId |
||||||
|
} |
||||||
|
}).subscribe((data:any)=>{ |
||||||
|
this.data.allBuildings = data |
||||||
|
let order |
||||||
|
if(data.length == 0){ |
||||||
|
order = 0 |
||||||
|
}else{ |
||||||
|
order = data[data.length - 1].order + 1 |
||||||
|
} |
||||||
|
|
||||||
|
let buildingTypename = "" |
||||||
|
this.allunittype.forEach(item => { |
||||||
|
if(item.id == value.unittype){ |
||||||
|
buildingTypename = item.name |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
this.http.post("/api/Buildings",{ |
||||||
|
id: "", |
||||||
|
name: value.name, |
||||||
|
order: order, |
||||||
|
enabled: true, |
||||||
|
companyId: this.data.unitinfo.id, |
||||||
|
buildingTypes: [ |
||||||
|
{ |
||||||
|
id: value.unittype, |
||||||
|
name: buildingTypename |
||||||
|
} |
||||||
|
] |
||||||
|
},{params:{ |
||||||
|
companyId : this.data.unitId |
||||||
|
}}).subscribe(data=>{ |
||||||
|
this.dialogRef.close(data); |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,531 @@ |
|||||||
|
<div style="height: 100%;display: flex; flex-direction: column;"> |
||||||
|
<!-- header --> |
||||||
|
<mat-accordion> |
||||||
|
<mat-expansion-panel expanded hideToggle > |
||||||
|
<mat-expansion-panel-header style="color: black;"> |
||||||
|
<mat-panel-title> |
||||||
|
单位信息 |
||||||
|
<mat-icon style="position: absolute;right:30px;">keyboard_arrow_down</mat-icon> |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
<div class="topbox"> |
||||||
|
<form (ngSubmit)="onSubmit(form.value,form.invalid,form)" #form="ngForm" class="example-container"> |
||||||
|
<div class="mainbox" > |
||||||
|
<div class="mainleft"> |
||||||
|
<div class="inputbox" > |
||||||
|
<span style="color: red;">*</span> |
||||||
|
<span>统一社会信用代码：</span> |
||||||
|
<mat-form-field> |
||||||
|
<input matInput id="creditcode" name="creditcode" type='text' #usci="ngModel" |
||||||
|
required minlength="1" maxlength="18" |
||||||
|
[(ngModel)]="unitinfo.usci" |
||||||
|
(focus)="closeorganizationbox()" |
||||||
|
pattern="^[0-9A-HJ-NP-RTUW-Y]{2}\d{6}[0-9A-HJ-NP-RTUW-Y]{10}$"> |
||||||
|
</mat-form-field> |
||||||
|
<div *ngIf="usci.invalid && (usci.dirty || usci.touched)" class="alert-danger"> |
||||||
|
<div *ngIf="usci.errors.pattern" class="alert-danger"> |
||||||
|
统一社会信用代码格式不正确 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="inputbox"> |
||||||
|
<span style="color: red;">*</span> |
||||||
|
<span>单位类型：</span> |
||||||
|
<mat-form-field (click)="closeorganizationbox()"> |
||||||
|
<mat-select required name="unittype" [(ngModel)]="defaultbuildingTypes"> |
||||||
|
<mat-option [value]="item.id" *ngFor="let item of allunittype">{{item.name}}</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div class="inputbox"> |
||||||
|
<span style="color: red;">*</span> |
||||||
|
<span>联系人：</span> |
||||||
|
<mat-form-field> |
||||||
|
<input matInput id="linkman" name="linkman" type='text' |
||||||
|
required minlength="1" |
||||||
|
[(ngModel)]="unitinfo.contacts" |
||||||
|
(focus)="closeorganizationbox()" |
||||||
|
> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div class="inputbox"> |
||||||
|
<span style="color: red;">*</span> |
||||||
|
<span>联系电话：</span> |
||||||
|
<mat-form-field> |
||||||
|
<input matInput id="linkphone" name="linkphone" type='text' #linkphone="ngModel" |
||||||
|
required pattern="^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[35-8]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0135-9]\d{2}|66\d{2})\d{6}$" |
||||||
|
[(ngModel)]="unitinfo.phone" |
||||||
|
(focus)="closeorganizationbox()" |
||||||
|
> |
||||||
|
</mat-form-field> |
||||||
|
<div *ngIf="linkphone.invalid && (linkphone.dirty || linkphone.touched)" class="alert-danger"> |
||||||
|
<div *ngIf="linkphone.errors.pattern" class="alert-danger"> |
||||||
|
电话号码格式不正确 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="inputbox" style="width: 700px;"> |
||||||
|
<span style="color: red;">*</span> |
||||||
|
<span>辖区中队：</span> |
||||||
|
<mat-form-field style="width: 538px;"> |
||||||
|
<input matInput id="organization" name="organization" type='text' |
||||||
|
required minlength="1" |
||||||
|
[(ngModel)]="selectedorganization" |
||||||
|
(focus)="openorganizationbox()" |
||||||
|
readonly="value" > |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div id="organizationbox" class="organizationbox" *ngIf="isorganizationbox"> |
||||||
|
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> |
||||||
|
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||||
|
<button type="button" mat-icon-button disabled ></button> |
||||||
|
<li>{{node.name}}</li> |
||||||
|
</mat-tree-node> |
||||||
|
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
mat-icon-button |
||||||
|
matTreeNodeToggle |
||||||
|
[attr.aria-label]="'toggle ' + node.name"> |
||||||
|
<mat-icon class="mat-icon-rtl-mirror"> |
||||||
|
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||||
|
</mat-icon> |
||||||
|
</button> |
||||||
|
<li>{{node.name}}</li> |
||||||
|
</mat-tree-node> |
||||||
|
</mat-tree> |
||||||
|
</div> |
||||||
|
<div class="inputbox" style="width: 700px;"> |
||||||
|
<span style="color: red;">*</span> |
||||||
|
<span>单位地址：</span> |
||||||
|
<mat-form-field style="width: 538px;"> |
||||||
|
<input matInput id="unitaddress" name="unitaddress" type='text' |
||||||
|
required minlength="1" |
||||||
|
[(ngModel)]="unitinfo.address" |
||||||
|
(focus)="closeorganizationbox()"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div class="uploadimg" (click)="lookmaster()"> |
||||||
|
<span>单位照片：</span> |
||||||
|
<div class="uploadingimg"> |
||||||
|
<img [src]="imgsrc" alt="" style="width: 299px; height: 170px;" > |
||||||
|
</div> |
||||||
|
<mat-spinner *ngIf="isspinner" diameter= 50></mat-spinner> |
||||||
|
</div> |
||||||
|
<div class="image" (click)="closeorganizationbox()"> |
||||||
|
<input id="selectedfile" type="file" (change)="filechange($event)" name="imgFile" accept=".jpg,.png,.jpeg,.gif,.webp"> |
||||||
|
</div> |
||||||
|
<div class="addbtn"> |
||||||
|
<button type="submit" color="primary" class="submit1" mat-button mat-raised-button>保存</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- <div class="mainright" (click)="closeorganizationbox()"> --> |
||||||
|
<!-- 地图预留位置 --> |
||||||
|
<!-- </div> --> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</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" > |
||||||
|
<span>建筑名称：</span> |
||||||
|
<mat-form-field> |
||||||
|
<input matInput id="housename" name="housename" type='text' |
||||||
|
minlength="1" [(ngModel)]="item.name" |
||||||
|
> |
||||||
|
</mat-form-field> |
||||||
|
<span style="color: red;">*</span> |
||||||
|
</div> |
||||||
|
<div class="houseinfoinput"> |
||||||
|
<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> |
||||||
|
</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"> |
||||||
|
<input matInput 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"> |
||||||
|
<input matInput 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> |
||||||
|
|
||||||
|
<!-- 如果类型是多行文本 --> |
||||||
|
<textarea *ngIf="i.propertyType == 1" 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> |
||||||
|
</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> |
||||||
|
<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"> |
||||||
|
<input matInput name="{{i.propertyName}}" type='text' |
||||||
|
required="{{ i.required==true ? 'true' : 'false' }}" |
||||||
|
[(ngModel)]="i.propertyValue"> |
||||||
|
</mat-form-field> |
||||||
|
|
||||||
|
<!-- 如果类型是数字 --> |
||||||
|
<mat-form-field *ngIf="i.propertyType == 2"> |
||||||
|
<input matInput 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> |
||||||
|
|
||||||
|
<!-- 如果类型是多行文本 --> |
||||||
|
<textarea *ngIf="i.propertyType == 1" 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,bigkey)" 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 name="{{www+2}}-tanker-{{key}}" type='text' |
||||||
|
required="{{ i.required==true ? 'true' : 'false' }}" |
||||||
|
[(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="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-group> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,269 @@ |
|||||||
|
.topbox{ |
||||||
|
height: 485px; |
||||||
|
width: 100%; |
||||||
|
// border-bottom: 1px solid black; |
||||||
|
.mainbox{ |
||||||
|
height: 100%; |
||||||
|
position: relative; |
||||||
|
.mainleft{ |
||||||
|
width:800px; |
||||||
|
height: 100%; |
||||||
|
// background-color: yellow; |
||||||
|
float: left; |
||||||
|
.inputbox{ |
||||||
|
width: 343px; |
||||||
|
height: 58px; |
||||||
|
margin:2px 6px; |
||||||
|
float: left; |
||||||
|
text-align: end; |
||||||
|
} |
||||||
|
.organizationbox{ |
||||||
|
width:538px; |
||||||
|
height: 200px; |
||||||
|
background: white; |
||||||
|
position: absolute; |
||||||
|
top: 164px; |
||||||
|
left:166px; |
||||||
|
z-index: 100; |
||||||
|
border: 1px solid grey; |
||||||
|
overflow: auto; |
||||||
|
li{ |
||||||
|
list-style: none; |
||||||
|
|
||||||
|
} |
||||||
|
mat-tree-node{ |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
mat-tree-node:hover{ |
||||||
|
background: rgba(225, 225, 225, 0.8); |
||||||
|
} |
||||||
|
} |
||||||
|
.addbtn{ |
||||||
|
width: 695px; |
||||||
|
position: absolute; |
||||||
|
bottom: -495px; |
||||||
|
text-align: center; |
||||||
|
margin-bottom:20px; |
||||||
|
button{ |
||||||
|
margin: 0 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
.uploadimg{ |
||||||
|
width: 400px; |
||||||
|
height: 200px; |
||||||
|
float: left; |
||||||
|
margin-top:12px; |
||||||
|
position: relative; |
||||||
|
margin-left: 80px; |
||||||
|
cursor: pointer; |
||||||
|
span{ |
||||||
|
float: left; |
||||||
|
} |
||||||
|
// img{ |
||||||
|
// float: left; |
||||||
|
// } |
||||||
|
.uploadingimg{ |
||||||
|
width: 299px; |
||||||
|
height: 170px; |
||||||
|
// background: url('../../../assets/images/upload2.png') no-repeat center center; |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
top: 0px; |
||||||
|
left: 79px; |
||||||
|
border: 1px dashed gray; |
||||||
|
border-radius:3px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
.image{ |
||||||
|
// position: absolute; |
||||||
|
// top: 199px; |
||||||
|
// left: 160px; |
||||||
|
// width: 299px; |
||||||
|
// height: 170px; |
||||||
|
input{ |
||||||
|
// width: 299px; |
||||||
|
// height: 170px; |
||||||
|
width: 190px; |
||||||
|
margin-top: 160px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
// opacity:0; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
.mainright{ |
||||||
|
float: left; |
||||||
|
width: 600px; |
||||||
|
height: 400px; |
||||||
|
// position: absolute; |
||||||
|
// right: 170px; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.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; |
||||||
|
} |
||||||
|
.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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btn{ |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
button{ |
||||||
|
margin: 0 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
.mat-spinner{ |
||||||
|
margin-top: 58px; |
||||||
|
margin-left: 203px; |
||||||
|
} |
||||||
|
.mat-table{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
table{ |
||||||
|
width: 1000px; |
||||||
|
thead{ |
||||||
|
tr{ |
||||||
|
th{ |
||||||
|
width: 60px; |
||||||
|
display: block; |
||||||
|
float: left; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
tbody{ |
||||||
|
tr{ |
||||||
|
|
||||||
|
td{ |
||||||
|
width: 60px; |
||||||
|
display: block; |
||||||
|
float: left; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.deviceinfo{ |
||||||
|
// border-bottom: 1px solid black;; |
||||||
|
padding-bottom: 60px; |
||||||
|
} |
||||||
|
.tankdetailinfo{ |
||||||
|
// border-bottom: 1px solid black;; |
||||||
|
padding-bottom: 35px; |
||||||
|
table{ |
||||||
|
th{ |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.tankinfo{ |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
// height: 45px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
// .adddeviceinfo{ |
||||||
|
// // position: absolute; |
||||||
|
// // left: 0px; |
||||||
|
// } |
||||||
|
.submit1{ |
||||||
|
margin-left: -66px !important; |
||||||
|
} |
||||||
|
textarea { |
||||||
|
vertical-align: middle; |
||||||
|
border-radius: 5px; |
||||||
|
padding: 5px; |
||||||
|
width: 600px; |
||||||
|
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; |
||||||
|
img{ |
||||||
|
max-width: 1500px; |
||||||
|
max-height: 740px; |
||||||
|
} |
||||||
|
} |
||||||
|
.previewImgBottom{ |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.alert-danger { |
||||||
|
margin-top: -16px; |
||||||
|
text-align: left; |
||||||
|
padding-left: 77px; |
||||||
|
font-size: 12px; |
||||||
|
color: red; |
||||||
|
} |
||||||
|
.mat-expansion-panel{ |
||||||
|
span{ |
||||||
|
color: black; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { BasicinfoComponent } from './basicinfo.component'; |
||||||
|
|
||||||
|
describe('BasicinfoComponent', () => { |
||||||
|
let component: BasicinfoComponent; |
||||||
|
let fixture: ComponentFixture<BasicinfoComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ BasicinfoComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(BasicinfoComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,26 @@ |
|||||||
|
<div mat-dialog-title>单位照片</div> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<ng-container *ngIf="isshowimg; else elseTemplate"> |
||||||
|
<div class="imgbox"> |
||||||
|
<img class="imgitemdefault" [src]="ImgUrl"> |
||||||
|
<!-- <img class="imgitemdefault" [src]="ImgUrl" [ngClass]="{'img1': rotateA==90,'img2': rotateA==180,'img3': rotateA==270,'img4': rotateB==10,'img5': rotateB==20,'img6': rotateB==30}" > --> |
||||||
|
</div> |
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate > |
||||||
|
<p style="text-align: center;">暂无单位图片，请先上传</p> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
<!-- |
||||||
|
<div class="swiper-button-prev"></div> |
||||||
|
<div class="swiper-button-next"></div> --> |
||||||
|
|
||||||
|
|
||||||
|
<!-- <div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> --> |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,66 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||||
|
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||||
|
import {FormControl} from '@angular/forms'; |
||||||
|
import { MatSnackBar } from '@angular/material/snack-bar'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'lookmaster', |
||||||
|
templateUrl: './lookmaster.component.html', |
||||||
|
styleUrls: ['./basicinfo.component.scss'] |
||||||
|
}) |
||||||
|
export class LookMaster { |
||||||
|
// myControl = new FormControl();
|
||||||
|
//注入MatDialogRef，可以用来关闭对话框
|
||||||
|
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||||
|
constructor(private http: HttpClient,public dialogRef: MatDialogRef<LookMaster>,@Inject(MAT_DIALOG_DATA) public data) {} |
||||||
|
allunittype:any |
||||||
|
ImgUrl:string |
||||||
|
rotationAngle=0 |
||||||
|
isheng:any |
||||||
|
isshowimg:boolean |
||||||
|
onNoClick(): void { |
||||||
|
this.dialogRef.close(); |
||||||
|
} |
||||||
|
ngOnInit(): void { |
||||||
|
if(this.data.img.indexOf('?') == -1){ |
||||||
|
this.isshowimg = false |
||||||
|
}else{ |
||||||
|
this.isshowimg = true |
||||||
|
var imgurl = this.data.img.split("?") |
||||||
|
this.ImgUrl = imgurl[0] |
||||||
|
}
|
||||||
|
|
||||||
|
} |
||||||
|
//点击旋转按钮时
|
||||||
|
rotateA = 0 |
||||||
|
rotateB = 0 |
||||||
|
rotate(){ |
||||||
|
var w= document.getElementsByClassName("imgitemdefault")[0]['naturalWidth']; |
||||||
|
var h = document.getElementsByClassName("imgitemdefault")[0]['naturalHeight']; |
||||||
|
|
||||||
|
if(w > h){ |
||||||
|
this.isheng = true |
||||||
|
}else{ |
||||||
|
this.isheng = false |
||||||
|
} |
||||||
|
if(this.isheng){ |
||||||
|
this.rotateA += 90 |
||||||
|
if(this.rotateA == 360){ |
||||||
|
this.rotateA = 0 |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.rotateB += 10 |
||||||
|
if(this.rotateB == 40){ |
||||||
|
this.rotateB = 0 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,33 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-05 15:27:58 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-06 10:33:56 |
||||||
|
--> |
||||||
|
<div class="box"> |
||||||
|
<div class="addbw"> |
||||||
|
<span>添加熟悉部位:</span> |
||||||
|
<button (click)="addRoute($event)">消控室</button> |
||||||
|
<button (click)="addRoute($event)">水泵房</button> |
||||||
|
<button (click)="addRoute($event)">疏散楼梯</button> |
||||||
|
<button (click)="addRoute($event)">各楼层</button> |
||||||
|
<button (click)="addRoute($event)">楼层消火栓</button> |
||||||
|
<button (click)="addRoute($event)">水泵结合器</button> |
||||||
|
<button (click)="addRoute($event)">室外消防水源</button> |
||||||
|
</div> |
||||||
|
<div class="addRoute"> |
||||||
|
<span>添加路线:</span> |
||||||
|
<input type="text" > <!-- [(ngModel)]="knowRoute" --> |
||||||
|
<!-- <hr> --> |
||||||
|
<span class="floot" [ngClass]="{'beijicolor': chooseid ==key}" (click)="knowroutwClick($event,key)" *ngFor="let item of knowRoute; let key=index">{{item.name+item.idnum}}</span> |
||||||
|
</div> |
||||||
|
<div class="bottomAll"> |
||||||
|
<div class="upload"></div> |
||||||
|
<div class="remarks"> |
||||||
|
<span>备注：</span><br> |
||||||
|
<textarea name="" id="" cols="50" rows="10"></textarea> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
.box{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
//添加熟悉部位 |
||||||
|
.addbw{ |
||||||
|
height: 0.488281rem; |
||||||
|
width: 100%; |
||||||
|
margin: 0.488281rem 0.097656rem; |
||||||
|
button{ |
||||||
|
margin-left: 0.097656rem; |
||||||
|
} |
||||||
|
} |
||||||
|
//添加路线 |
||||||
|
.addRoute{ |
||||||
|
width: 100%; |
||||||
|
height: 1.464844rem; |
||||||
|
margin: 0.488281rem 0.097656rem; |
||||||
|
position:relative; |
||||||
|
white-space: nowrap; |
||||||
|
input{ |
||||||
|
width: 5.859375rem; |
||||||
|
margin-left: 0.097656rem; |
||||||
|
border-top: none; |
||||||
|
border-left: none; |
||||||
|
border-right: none; |
||||||
|
font-size: 0.15625rem; |
||||||
|
outline: none; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
hr{ |
||||||
|
width: 5.859375rem; |
||||||
|
margin-left: 0.78125rem |
||||||
|
|
||||||
|
} |
||||||
|
.floot{ |
||||||
|
width: 0.683594rem; |
||||||
|
height: 0.195313rem; |
||||||
|
right: 5.859375rem; |
||||||
|
//z-index: 100; |
||||||
|
position:relative; |
||||||
|
} |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: 0.15625rem; |
||||||
|
} |
||||||
|
//底部div |
||||||
|
.bottomAll{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
margin-top: 0.976563rem; |
||||||
|
display: flex; |
||||||
|
.upload{ |
||||||
|
width: 50%; |
||||||
|
height: 50%; |
||||||
|
} |
||||||
|
.remarks{ |
||||||
|
width: 50%; |
||||||
|
height: 50%; |
||||||
|
input{ |
||||||
|
height: 0.488281rem; |
||||||
|
width: 0.488281rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
//熟悉路线选中样式 |
||||||
|
.beijicolor{ |
||||||
|
border: 1px solid #000000; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { KnowRouteComponent } from './know-route.component'; |
||||||
|
|
||||||
|
describe('KnowRouteComponent', () => { |
||||||
|
let component: KnowRouteComponent; |
||||||
|
let fixture: ComponentFixture<KnowRouteComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ KnowRouteComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(KnowRouteComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
/* |
||||||
|
* @Descripttion:
|
||||||
|
* @version:
|
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-05 15:27:58 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-06 10:30:10 |
||||||
|
*/ |
||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-know-route', |
||||||
|
templateUrl: './know-route.component.html', |
||||||
|
styleUrls: ['./know-route.component.scss'] |
||||||
|
}) |
||||||
|
export class KnowRouteComponent implements OnInit { |
||||||
|
|
||||||
|
constructor() { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
} |
||||||
|
//判断选中路线的值
|
||||||
|
chooseid=-1 |
||||||
|
knowRoute=[ |
||||||
|
{name:``,idnum:""} |
||||||
|
/* {name:`柳州支队`,idnum:"🠖"} */ |
||||||
|
] |
||||||
|
|
||||||
|
//熟悉部位点击事件
|
||||||
|
addRoute(event){ |
||||||
|
//console.log(event.target.innerHTML)
|
||||||
|
//this.knowRoute+=event.target.innerHTML+"🠖"
|
||||||
|
this.knowRoute.push({name:event.target.innerHTML,idnum:"🠖"}) |
||||||
|
} |
||||||
|
//熟悉路线点击事件
|
||||||
|
knowroutwClick(event,key){ |
||||||
|
console.log(event) |
||||||
|
this.chooseid=key |
||||||
|
//event.target.style.border="1px solid #000000"
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
Loading…
Reference in new issue