chenjingyu
4 years ago
43 changed files with 5463 additions and 15 deletions
@ -0,0 +1,78 @@ |
|||||||
|
<div class="content"> |
||||||
|
<mat-tab-group style="height: 100%;"> |
||||||
|
<mat-tab label="单位毗邻"> |
||||||
|
<div class="allImgs"> |
||||||
|
|
||||||
|
<div class="imgBox" *ngFor="let item of AllAdjoining" > |
||||||
|
<div class="fixedImg" *ngIf="item.imageUrls.length"> |
||||||
|
<img [src]="item.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(item.imageUrls)'> |
||||||
|
</div> |
||||||
|
<div class="fixedImg" *ngIf="!item.imageUrls.length"> |
||||||
|
<img src="../../../assets/images/upload.png" (click)='imgdetails(item.imageUrls)'> |
||||||
|
</div> |
||||||
|
<div style="margin-top: 5px;"> |
||||||
|
<label style="margin-left: 25px;">建筑物名称:</label> |
||||||
|
<label style="margin-left: 25px;">{{item.name}}</label> |
||||||
|
</div> |
||||||
|
<div style="margin-top: 5px;"> |
||||||
|
<label style="margin-left: 25px;">建筑物方向:</label> |
||||||
|
<label style="margin-left: 25px;"> |
||||||
|
<label *ngIf="item.direction==0">东</label> |
||||||
|
<label *ngIf="item.direction==1">西</label> |
||||||
|
<label *ngIf="item.direction==2">南</label> |
||||||
|
<label *ngIf="item.direction==3">北</label> |
||||||
|
<label *ngIf="item.direction==4">东南</label> |
||||||
|
<label *ngIf="item.direction==5">西南</label> |
||||||
|
<label *ngIf="item.direction==6">东北</label> |
||||||
|
<label *ngIf="item.direction==7">西北</label> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div style="margin-top: 5px;"> |
||||||
|
<label style="margin-left: 25px;">图片数量:</label> |
||||||
|
<label style="margin-left: 25px;" *ngIf="item.imageUrls.length">{{item.imageUrls.length}}张</label> |
||||||
|
<label style="margin-left: 25px;" *ngIf="!item.imageUrls.length">0张</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<p style="width: 100%;text-align: center;margin-top: 25px;" *ngIf="!AllAdjoining.length">暂无数据,请前往平面图进行相关数据录入</p> |
||||||
|
</div> |
||||||
|
</mat-tab> |
||||||
|
|
||||||
|
<mat-tab label="{{item.name}}" *ngFor="let item of AllBuilding"> |
||||||
|
<div class="allImgs"> |
||||||
|
|
||||||
|
<div class="imgBox" *ngFor="let items of item.allImgs"> |
||||||
|
<div class="fixedImg" *ngIf="items.imageUrls.length"> |
||||||
|
<img [src]="items.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(items.imageUrls)'> |
||||||
|
</div> |
||||||
|
<div class="fixedImg" *ngIf="!items.imageUrls.length"><img src="../../../assets/images/upload.png" (click)='imgdetails(items.imageUrls)'></div> |
||||||
|
<div style="margin-top: 5px;"> |
||||||
|
<label style="margin-left: 25px;">建筑物名称:</label> |
||||||
|
<label style="margin-left: 25px;">{{items.name}}</label> |
||||||
|
</div> |
||||||
|
<div style="margin-top: 5px;"> |
||||||
|
<label style="margin-left: 25px;">建筑物方向:</label> |
||||||
|
<label style="margin-left: 25px;"> |
||||||
|
<label *ngIf="items.direction==0">东</label> |
||||||
|
<label *ngIf="items.direction==1">西</label> |
||||||
|
<label *ngIf="items.direction==2">南</label> |
||||||
|
<label *ngIf="items.direction==3">北</label> |
||||||
|
<label *ngIf="items.direction==4">东南</label> |
||||||
|
<label *ngIf="items.direction==5">西南</label> |
||||||
|
<label *ngIf="items.direction==6">东北</label> |
||||||
|
<label *ngIf="items.direction==7">西北</label> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div style="margin-top: 5px;"> |
||||||
|
<label style="margin-left: 25px;">图片数量:</label> |
||||||
|
<label style="margin-left: 25px;" *ngIf="items.imageUrls.length">{{items.imageUrls.length}}张</label> |
||||||
|
<label style="margin-left: 25px;" *ngIf="!items.imageUrls.length">0张</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<p style="width: 100%;text-align: center;margin-top: 25px;" *ngIf="!item.allImgs.length">暂无数据,请前往平面图进行相关数据录入</p> |
||||||
|
</div> |
||||||
|
</mat-tab> |
||||||
|
|
||||||
|
</mat-tab-group> |
||||||
|
</div> |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
padding: 10px; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
|
||||||
|
//图片外部div |
||||||
|
.allImgs { |
||||||
|
display: flex; |
||||||
|
overflow-y: auto; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
.imgBox{ |
||||||
|
width: 300px; |
||||||
|
height: 250px; |
||||||
|
margin: 25px 35px 35px 35px; |
||||||
|
display: inline-block; |
||||||
|
position: relative; |
||||||
|
.fixedImg { |
||||||
|
width: 100%; |
||||||
|
height: 170px; |
||||||
|
text-align: center; |
||||||
|
margin-bottom: 3px; |
||||||
|
img { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
max-width: 100%; |
||||||
|
height: 100%; |
||||||
|
cursor:pointer;} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//预览图片 |
||||||
|
.previewImgBox { |
||||||
|
width: 1500px; |
||||||
|
height: 700px; |
||||||
|
text-align: center; |
||||||
|
img{ |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
max-width: 100%; |
||||||
|
height: 100%;} |
||||||
|
} |
||||||
|
.previewImgBottom { |
||||||
|
text-align: center; |
||||||
|
height: 30px; |
||||||
|
margin: 20px auto; |
||||||
|
} |
||||||
|
//预览图片旋转角度 |
||||||
|
.rotateA {transform: rotate(90deg) scale(0.75);} |
||||||
|
.rotateB {transform: rotate(180deg)} |
||||||
|
.rotateC {transform: rotate(270deg) scale(0.75);} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { AllaroundComponent } from './allaround.component'; |
||||||
|
|
||||||
|
describe('AllaroundComponent', () => { |
||||||
|
let component: AllaroundComponent; |
||||||
|
let fixture: ComponentFixture<AllaroundComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ AllaroundComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(AllaroundComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,78 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||||
|
import { ImgDetails } from './imgdetails.component' |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
import { Router, ActivatedRoute } from '@angular/router'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-allaround', |
||||||
|
templateUrl: './allaround.component.html', |
||||||
|
styleUrls: ['./allaround.component.scss'] |
||||||
|
}) |
||||||
|
export class AllaroundComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private route:ActivatedRoute,) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.getAllCompany() |
||||||
|
this.getAllBuilding() |
||||||
|
} |
||||||
|
|
||||||
|
AllAdjoining:any = []; //所有单位毗邻
|
||||||
|
AllBuilding:any = []; //所有建筑 + 建筑毗邻图片
|
||||||
|
|
||||||
|
//获取所有单位毗邻图片
|
||||||
|
getAllCompany () { |
||||||
|
let id = {companyId:this.route.snapshot.queryParams.id} |
||||||
|
this.http.get('/api/CompanyAdjoins',{params:id}).subscribe(data=>{ |
||||||
|
this.AllAdjoining = data |
||||||
|
this.AllAdjoining.forEach(element => {element.imgURL = element.imageUrls[0] +'?x-oss-process=image/resize,m_fill,h_170,w_299'}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有建筑
|
||||||
|
getAllBuilding () { |
||||||
|
let id = {companyId:this.route.snapshot.queryParams.id} |
||||||
|
this.http.get('/api/Buildings',{params:id}).subscribe((data:any)=>{ |
||||||
|
if (data.length) { |
||||||
|
this.AllBuilding = data |
||||||
|
this.AllBuilding.forEach(element => { |
||||||
|
element.allImgs = [] |
||||||
|
}); |
||||||
|
this.getAllArchitecture()} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有建筑毗邻图片
|
||||||
|
getAllArchitecture () { |
||||||
|
this.AllBuilding.forEach(element => { |
||||||
|
let id = {buildingId:element.id} |
||||||
|
this.http.get('/api/BuildingAdjoins',{params:id}).subscribe(data=>{ |
||||||
|
element.allImgs = data |
||||||
|
element.allImgs.forEach(element => {element.imgURL = element.imageUrls[0] +'?x-oss-process=image/resize,m_fill,h_170,w_299'}); |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//预览图片
|
||||||
|
imgdetails(e){ |
||||||
|
if (e.length && e!=null) { |
||||||
|
let data = e |
||||||
|
const dialogRef = this.dialog.open(ImgDetails, {//调用open方法打开对话框并且携带参数过去
|
||||||
|
width: '1600px', |
||||||
|
height:'900px',data}); |
||||||
|
dialogRef.afterClosed().subscribe(); |
||||||
|
} else{ |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂无图片数据','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
<div mat-dialog-title>图片详情</div> |
||||||
|
<div class="swiper-container"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox"> |
||||||
|
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}" class="swiper-lazy" |
||||||
|
[attr.data-src]="item"> |
||||||
|
<div class="swiper-lazy-preloader"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
|
<div class="swiper-button-prev"></div> |
||||||
|
<div class="swiper-button-next"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
import { Component, OnInit, Inject, ɵConsole } from '@angular/core'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar } from '@angular/material/snack-bar'; |
||||||
|
import Swiper from 'swiper'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'imgdetails', |
||||||
|
templateUrl: './imgdetails.component.html', |
||||||
|
styleUrls: ['./allaround.component.scss'] |
||||||
|
}) |
||||||
|
export class ImgDetails { |
||||||
|
|
||||||
|
constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<ImgDetails>, |
||||||
|
@Inject(MAT_DIALOG_DATA) public data) { } |
||||||
|
testSwiper: Swiper; |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.allImages = [] |
||||||
|
this.data.forEach(element => { |
||||||
|
element = `${element}?x-oss-process=image/auto-orient,1` |
||||||
|
this.allImages.push(element) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
ngAfterViewInit() { |
||||||
|
this.testSwiper = new Swiper('.swiper-container', { |
||||||
|
lazy: true, |
||||||
|
direction: 'horizontal', |
||||||
|
loop: false, |
||||||
|
|
||||||
|
// 如果需要前进后退按钮
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
allImages:any; //展示所有的图片
|
||||||
|
rotationAngle:number=0; //旋转角度
|
||||||
|
|
||||||
|
//旋转图片
|
||||||
|
rotate () { |
||||||
|
this.rotationAngle = this.rotationAngle+90 |
||||||
|
if (this.rotationAngle === 360) {this.rotationAngle = 0} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,511 @@ |
|||||||
|
<div style="height: 100%;display: flex; flex-direction: column;"> |
||||||
|
<!-- header --> |
||||||
|
<mat-accordion> |
||||||
|
<mat-expansion-panel expanded hideToggle> |
||||||
|
<mat-expansion-panel-header> |
||||||
|
<mat-panel-title style="color: white;"> |
||||||
|
单位信息 |
||||||
|
<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 readonly 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> |
||||||
|
<mat-select disabled readonly 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 readonly 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 readonly 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 readonly matInput id="organization" name="organization" type='text' |
||||||
|
required minlength="1" |
||||||
|
[(ngModel)]="selectedorganization" |
||||||
|
readonly="value" > |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="inputbox" style="width: 700px;"> |
||||||
|
<span style="color: red;">*</span> |
||||||
|
<span>单位地址：</span> |
||||||
|
<mat-form-field style="width: 538px;"> |
||||||
|
<input readonly 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"> |
||||||
|
<input id="selectedfile" type="file" 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 class="addhouseinfo"><mat-icon style="font-size: 38px;">add_circle_outline</mat-icon></button> --> |
||||||
|
<mat-tab-group style="height: 100%;;" > |
||||||
|
<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 readonly 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 disabled readonly name="unittype" [(ngModel)]="item.buildtype"> |
||||||
|
<mat-option [value]="n.name" *ngFor="let n of allunittype">{{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 readonly 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 readonly matInput name="{{i.propertyName}}{{www}}" type='number' |
||||||
|
required="{{ i.required==true ? 'true' : 'false' }}" |
||||||
|
[(ngModel)]="i.propertyValue" |
||||||
|
|
||||||
|
> |
||||||
|
<!-- <mat-error *ngIf="isshowrule">{{rulevalue}}</mat-error> --> |
||||||
|
</mat-form-field> |
||||||
|
|
||||||
|
<!-- 如果类型是多行文本 --> |
||||||
|
<textarea readonly *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 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 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 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 readonly matInput type='text' name="{{key}}1CustomData" |
||||||
|
required |
||||||
|
[(ngModel)]="i.name"> |
||||||
|
</mat-form-field> |
||||||
|
<span>:</span> |
||||||
|
<mat-form-field> |
||||||
|
<input readonly 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 readonly 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 disabled required name="unittype" [(ngModel)]="item.buildtype"> |
||||||
|
<mat-option [value]="n.name" *ngFor="let n of allunittype">{{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 readonly 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 readonly matInput name="{{i.propertyName}}" type='number' |
||||||
|
required="{{ i.required==true ? 'true' : 'false' }}" |
||||||
|
[(ngModel)]="i.propertyValue" |
||||||
|
|
||||||
|
> |
||||||
|
<!-- <mat-error *ngIf="isshowrule">{{rulevalue}}</mat-error> --> |
||||||
|
</mat-form-field> |
||||||
|
|
||||||
|
<!-- 如果类型是多行文本 --> |
||||||
|
<textarea readonly *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 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" ><mat-icon>add_circle_outline</mat-icon></button> |
||||||
|
<button style="width: 24px;" type="button" mat-icon-button class="removedeviceinfo" ><mat-icon>remove_circle_outline</mat-icon></button> |
||||||
|
装置区名称<span style="color: red;">*</span></th> |
||||||
|
<td mat-cell *matCellDef="let element;let key = index"> |
||||||
|
<textarea readonly 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 readonly [(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 readonly [(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 readonly 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 *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" style="margin-top: 30px;margin-right: 5px;">添加储罐</button> |
||||||
|
<button *ngIf="item.buildingBasicGroups[2].submitted" type="button" mat-raised-button color="warn" 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 readonly matInput name="{{www+2}}-tanker-{{key}}" type='text' |
||||||
|
required="{{ i.required==true ? 'true' : 'false' }}" |
||||||
|
[(ngModel)]="i.propertyValue" |
||||||
|
> |
||||||
|
</mat-form-field> |
||||||
|
<textarea readonly 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" style="position: absolute;left: 0;"><mat-icon>add_circle_outline</mat-icon></button> |
||||||
|
<button type="button" mat-icon-button class="removedeviceinfo"><mat-icon>remove_circle_outline</mat-icon></button> --> |
||||||
|
罐区 </th> |
||||||
|
<td mat-cell *matCellDef="let element;let key = index"> |
||||||
|
<input readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 readonly 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 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 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 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 readonly matInput type='text' name="{{key}}1CustomData" |
||||||
|
required |
||||||
|
[(ngModel)]="i.name"> |
||||||
|
</mat-form-field> |
||||||
|
<span>:</span> |
||||||
|
<mat-form-field> |
||||||
|
<input readonly 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 color="warn">删除</button> |
||||||
|
</div> --> |
||||||
|
|
||||||
|
</form> |
||||||
|
</mat-tab> |
||||||
|
|
||||||
|
</mat-tab-group> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,271 @@ |
|||||||
|
.topbox{ |
||||||
|
height: 485px; |
||||||
|
width: 100%; |
||||||
|
color: white; |
||||||
|
// border-bottom: 1px solid black; |
||||||
|
input{ |
||||||
|
color: white; |
||||||
|
} |
||||||
|
.mainbox{ |
||||||
|
height: 100%; |
||||||
|
position: relative; |
||||||
|
.mainleft{ |
||||||
|
width:800px; |
||||||
|
height: 100%; |
||||||
|
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{ |
||||||
|
background-color:transparent!important |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@ |
|||||||
|
<div mat-dialog-title>单位照片</div> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<ng-container *ngIf="isshowimg; else elseTemplate"> |
||||||
|
<div class="imgbox"> |
||||||
|
<img class="imgitemdefault" [src]="ImgUrl"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate > |
||||||
|
<p style="text-align: center;">暂无单位图片，请先上传</p> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</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 LookMaster2 { |
||||||
|
// myControl = new FormControl();
|
||||||
|
//注入MatDialogRef，可以用来关闭对话框
|
||||||
|
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||||
|
constructor(private http: HttpClient,public dialogRef: MatDialogRef<LookMaster2>,@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,69 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'imgsdatadetail', |
||||||
|
templateUrl: './addGrouping.html', |
||||||
|
styleUrls: ['./fire-fighting-device.component.scss'] |
||||||
|
}) |
||||||
|
export class ImgsDataDetail2 { |
||||||
|
|
||||||
|
constructor(private http: HttpClient,public dialogRef: MatDialogRef<ImgsDataDetail2>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {} |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
ngAfterViewInit(): void{ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//提交表单
|
||||||
|
onSubmit (e) { |
||||||
|
if (this.data.buildingId) { //建筑新建内置项
|
||||||
|
let repeat = this.data.item.facilityItems.find(items=>items.name==e.name) |
||||||
|
if (repeat==undefined) { |
||||||
|
let header = {buildingId:this.data.buildingId, groupId:this.data.item.id} |
||||||
|
let msg = { |
||||||
|
isBuiltin: false, |
||||||
|
details: '', |
||||||
|
name: e.name, |
||||||
|
isEachFloor: false, |
||||||
|
order: this.data.item.facilityItems.length? this.data.item.facilityItems[this.data.item.facilityItems.length-1].order+1 : 0} |
||||||
|
this.http.post('/api/CompanyAccount/BuildingFacilityItems',msg,{params:header}).subscribe(data=>{ |
||||||
|
this.dialogRef.close(data); }) |
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('当前分组下禁止创建名称相同内置项','确定',config); |
||||||
|
} |
||||||
|
} else { //单位新建内置项
|
||||||
|
let repeat = this.data.facilityItems.find(item=>item.name==e.name) |
||||||
|
if (repeat==undefined) { |
||||||
|
let header = {groupId:this.data.id} |
||||||
|
let msg = { |
||||||
|
isBuiltin: false, |
||||||
|
details: '', |
||||||
|
name: e.name, |
||||||
|
isEachFloor: false, |
||||||
|
order: this.data.facilityItems.length? this.data.facilityItems[this.data.facilityItems.length-1].order+1 : 0} |
||||||
|
this.http.post('/api/CompanyAccount/CompanyFacilityItems',msg,{params:header}).subscribe(data=>{ |
||||||
|
this.dialogRef.close(data); }) |
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('当前分组下禁止创建名称相同内置项','确定',config); |
||||||
|
} |
||||||
|
} //else
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,18 @@ |
|||||||
|
<div mat-dialog-title>创建消防设施内置项</div> |
||||||
|
<div> |
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<mat-form-field> |
||||||
|
<input matInput placeholder="请输入消防设施内置项名称" required ngModel name="name" maxlength="30"> |
||||||
|
</mat-form-field> |
||||||
|
<p style="font-size: 14px; color: red; margin-bottom: 15px;">*注: 该名称不允许与当前分组内置项重名</p> |
||||||
|
|
||||||
|
<div mat-dialog-actions> |
||||||
|
<button mat-raised-button color="primary" type="submit" |
||||||
|
[disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
@ -0,0 +1,193 @@ |
|||||||
|
<div class="content"> |
||||||
|
<mat-tab-group> |
||||||
|
<mat-tab label="单位消防设施"> |
||||||
|
<div class="contentBox"> |
||||||
|
|
||||||
|
<p style="width: 100%; margin: 30px auto; text-align: center;" *ngIf="!companyBuiltInGrouping.length">暂无数据,请完善单位基本信息</p> |
||||||
|
<div style="width: 100%;margin-top: 25px;" *ngFor="let item of companyBuiltInGrouping;let key = index"> |
||||||
|
<h3 style="text-align: center;font-weight: 550;">{{item.name}}</h3> |
||||||
|
<div style="margin-bottom: 10px;"> |
||||||
|
<!-- <mat-icon title="创建" (click)='addCompanyGrouping(item)'>add_circle_outline</mat-icon> |
||||||
|
<mat-icon title="保存" style="margin-left: 25px;" (click)='editCompanyGrouping(item)'>description</mat-icon> |
||||||
|
<mat-icon title="删除" style="margin-left: 25px;" (click)='deleteCompanyGrouping(item)'>delete</mat-icon> --> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<mat-accordion multi> |
||||||
|
<mat-expansion-panel disabled> |
||||||
|
<mat-expansion-panel-header> |
||||||
|
<label class="firstContent"></label> |
||||||
|
<label class="textContent">项目</label> |
||||||
|
<label class="textContent">照片</label> |
||||||
|
<label class="totalContent">总数</label> |
||||||
|
<label class="lastTextContent">主要情况</label> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
</mat-expansion-panel> |
||||||
|
|
||||||
|
<mat-expansion-panel *ngFor="let items of item.facilityItems" disabled [expanded]=items.expanded> |
||||||
|
<mat-expansion-panel-header> |
||||||
|
<label class="firstContent"> |
||||||
|
<mat-checkbox (change)='checkedCompany($event,item,items)' [disabled]='items.isBuiltin'></mat-checkbox> |
||||||
|
</label> |
||||||
|
<label class="textContent">{{items.name}}</label> |
||||||
|
<label class="textContent"><a href="javascript:void(0)" (click)='previewImg(items)'>查看图片</a></label> |
||||||
|
<label class="totalContent">{{items.total ? items.total : '总数: 0'}}</label> |
||||||
|
|
||||||
|
<label class="lastTextContent"> |
||||||
|
<textarea readonly maxlength="250" [(ngModel)]="items.details" style="width: 80%;"></textarea> |
||||||
|
</label> |
||||||
|
|
||||||
|
<label><mat-icon (click)='SwitchBoard(items)' *ngIf="items.isBuiltin">keyboard_arrow_down</mat-icon></label> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
|
||||||
|
<div class="overflowTable"> |
||||||
|
<div class="detailsTable"> |
||||||
|
<table> |
||||||
|
<tr> |
||||||
|
<th *ngFor="let header of items.header">{{header}}</th> |
||||||
|
</tr> |
||||||
|
<tr *ngFor="let body of items.body"> |
||||||
|
<td *ngFor="let header of items.header">{{body[header]? body[header] : '暂无数据'}}</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
<div *ngFor="let tableMsg of items.loopTable" class="detailsTable"> |
||||||
|
<p style="text-align: center; font-size: 16px; margin: 5px 0;">楼层/区域名称: {{tableMsg.name? tableMsg.name: '暂无名称'}}</p> |
||||||
|
<table> |
||||||
|
<tr> |
||||||
|
<th *ngFor="let header of tableMsg.header">{{header}}</th> |
||||||
|
</tr> |
||||||
|
<tr *ngFor="let body of tableMsg.body"> |
||||||
|
<td *ngFor="let header of tableMsg.header">{{body[header]? body[header] : '暂无数据'}}</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</mat-expansion-panel> |
||||||
|
|
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div style="width: 100%;margin-top: 25px;" *ngFor="let item of companyOptionalGrouping;let key = index"> |
||||||
|
<mat-accordion multi> |
||||||
|
|
||||||
|
<mat-expansion-panel> |
||||||
|
<mat-expansion-panel-header> |
||||||
|
<h3 style="text-align: center;font-weight: 550;">{{item.name}}</h3> |
||||||
|
<!-- <mat-icon title="保存" style="margin-left: 25px;" (click)='editCompanyOptional($event,item)'>description</mat-icon> --> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
<div *ngFor="let items of item.propertyInfos" class="InputField"> |
||||||
|
<label>{{items.propertyName}}:</label> |
||||||
|
|
||||||
|
<input readonly type="text" *ngIf="items.propertyType!=1&&items.propertyType!=2&&items.propertyType!=4&&items.propertyType!=6" |
||||||
|
[(ngModel)]="items.propertyValue" name="propertyValue"> |
||||||
|
<textarea readonly maxlength="250" *ngIf="items.propertyType==1" [(ngModel)]="items.propertyValue" name="propertyValue"></textarea> |
||||||
|
<input readonly type="number" *ngIf="items.propertyType==2 ||items.propertyType==4" [(ngModel)]="items.propertyValue" name="propertyValue"> |
||||||
|
<mat-radio-group *ngIf="items.propertyType==6" [(ngModel)]="items.propertyValue" name="propertyValue"> |
||||||
|
<mat-radio-button style="margin-left: 5px;" [value]='radio.value' *ngFor="let radio of singleElection">{{radio.name}}</mat-radio-button> |
||||||
|
</mat-radio-group> |
||||||
|
</div> |
||||||
|
</mat-expansion-panel> |
||||||
|
|
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</mat-tab> |
||||||
|
|
||||||
|
<mat-tab label="{{newItem.name}}" *ngFor="let newItem of allBuildingGrouping"> |
||||||
|
<div class="contentBox"> |
||||||
|
|
||||||
|
<div style="width: 100%;margin-top: 25px;" *ngFor="let item of newItem.buildingFacilityGroups"> |
||||||
|
<h3 style="text-align: center;font-weight: 550;">{{item.name}}</h3> |
||||||
|
<div style="margin-bottom: 10px;"> |
||||||
|
<!-- <mat-icon title="创建" (click)='addBuildingGrouping(newItem,item)'>add_circle_outline</mat-icon> |
||||||
|
<mat-icon title="保存" style="margin-left: 25px;" (click)='editBuildingGrouping(newItem,item)'>description</mat-icon> |
||||||
|
<mat-icon title="删除" style="margin-left: 25px;" (click)='deleteBuildingGrouping(newItem,item)'>delete</mat-icon> --> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<mat-accordion multi> |
||||||
|
<mat-expansion-panel disabled> |
||||||
|
<mat-expansion-panel-header> |
||||||
|
<label class="firstContent"></label> |
||||||
|
<label class="textContent">项目</label> |
||||||
|
<label class="textContent">照片</label> |
||||||
|
<label class="totalContent">总数</label> |
||||||
|
<label class="lastTextContent">主要情况</label> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
</mat-expansion-panel> |
||||||
|
|
||||||
|
<mat-expansion-panel *ngFor="let items of item.facilityItems" disabled [expanded]=items.expanded> |
||||||
|
<mat-expansion-panel-header> |
||||||
|
<label class="firstContent"> |
||||||
|
<mat-checkbox (change)='checkedCompany($event,item,items)' [disabled]='items.isBuiltin'></mat-checkbox> |
||||||
|
</label> |
||||||
|
<label class="textContent">{{items.name}}</label> |
||||||
|
<label class="textContent"><a href="javascript:void(0)" (click)='previewBuildingImg(newItem,items)'>查看图片</a></label> |
||||||
|
<label class="totalContent">{{items.total ? items.total : '总数: 0'}}</label> |
||||||
|
|
||||||
|
<label class="lastTextContent"> |
||||||
|
<textarea readonly maxlength="250" [(ngModel)]="items.details" style="width: 80%;"></textarea> |
||||||
|
</label> |
||||||
|
|
||||||
|
<label><mat-icon (click)='SwitchBuildingBoard(newItem,items)' *ngIf="items.isBuiltin">keyboard_arrow_down</mat-icon></label> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
|
||||||
|
<div class="overflowTable"> |
||||||
|
<div class="detailsTable"> |
||||||
|
<table> |
||||||
|
<tr> |
||||||
|
<th *ngFor="let header of items.header">{{header}}</th> |
||||||
|
</tr> |
||||||
|
<tr *ngFor="let body of items.body"> |
||||||
|
<td *ngFor="let header of items.header">{{body[header]? body[header] : '暂无数据'}}</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
<div *ngFor="let tableMsg of items.loopTable" class="detailsTable"> |
||||||
|
<p style="text-align: center; font-size: 16px; margin: 5px 0;">楼层/区域名称: {{tableMsg.name? tableMsg.name : '暂无名称'}}</p> |
||||||
|
<table> |
||||||
|
<tr> |
||||||
|
<th *ngFor="let header of tableMsg.header">{{header}}</th> |
||||||
|
</tr> |
||||||
|
<tr *ngFor="let body of tableMsg.body"> |
||||||
|
<td *ngFor="let header of tableMsg.header">{{body[header]? body[header] : '暂无数据'}}</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</mat-expansion-panel> |
||||||
|
|
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div style="width: 100%;margin-top: 25px;" *ngFor="let item of newItem.buildingOptionalGroups"> |
||||||
|
<mat-accordion multi> |
||||||
|
|
||||||
|
<mat-expansion-panel> |
||||||
|
<mat-expansion-panel-header> |
||||||
|
<h3 style="text-align: center;font-weight: 550;">{{item.name}}</h3> |
||||||
|
<!-- <mat-icon title="保存" style="margin-left: 25px;" (click)='editBuildingOptional($event,item)'>description</mat-icon> --> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
<div *ngFor="let items of item.propertyInfos" class="InputField"> |
||||||
|
<label>{{items.propertyName}}:</label> |
||||||
|
|
||||||
|
<input readonly type="text" *ngIf="items.propertyType!=1&&items.propertyType!=2&&items.propertyType!=4&&items.propertyType!=6" |
||||||
|
[(ngModel)]="items.propertyValue" name="propertyValue"> |
||||||
|
<textarea readonly maxlength="250" *ngIf="items.propertyType==1" [(ngModel)]="items.propertyValue" name="propertyValue"></textarea> |
||||||
|
<input readonly type="number" *ngIf="items.propertyType==2 ||items.propertyType==4" [(ngModel)]="items.propertyValue" name="propertyValue"> |
||||||
|
<mat-radio-group *ngIf="items.propertyType==6" [(ngModel)]="items.propertyValue" name="propertyValue"> |
||||||
|
<mat-radio-button style="margin-left: 5px;" [value]='radio.value' *ngFor="let radio of singleElection">{{radio.name}}</mat-radio-button> |
||||||
|
</mat-radio-group> |
||||||
|
</div> |
||||||
|
</mat-expansion-panel> |
||||||
|
|
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</mat-tab> |
||||||
|
|
||||||
|
</mat-tab-group> |
||||||
|
</div> |
||||||
@ -0,0 +1,145 @@ |
|||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
padding: 10px; |
||||||
|
overflow-y: auto; |
||||||
|
.contentBox { |
||||||
|
width: 90%; |
||||||
|
height: 100%; |
||||||
|
margin: 0 auto; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.mat-icon { |
||||||
|
color: black; |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//可展开面板每一行css |
||||||
|
.mat-expansion-panel-header { |
||||||
|
padding: 3px 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.firstContent { |
||||||
|
width: 3%; |
||||||
|
} |
||||||
|
.textContent { |
||||||
|
width: 12%; |
||||||
|
color: black; |
||||||
|
text-align: center; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow:ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
.totalContent { |
||||||
|
width: 25%; |
||||||
|
color: black; |
||||||
|
text-align: center; |
||||||
|
white-space: pre-line; |
||||||
|
max-height: 48px; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
.lastTextContent { //textarea多行文本 |
||||||
|
width: 45%; |
||||||
|
color: black; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
input { |
||||||
|
height: 22px; |
||||||
|
line-height: 22px; |
||||||
|
padding-left: 5px; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
a { |
||||||
|
color: #0000ff; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//bottom用户输入框 |
||||||
|
.InputField { |
||||||
|
display: inline-block; |
||||||
|
width: 40%; |
||||||
|
text-align: right; |
||||||
|
margin: 10px 25px; |
||||||
|
input {width: 60%;} |
||||||
|
label {margin-right: 10px;} |
||||||
|
} |
||||||
|
textarea { |
||||||
|
vertical-align: middle; |
||||||
|
border-radius: 5px; |
||||||
|
padding: 5px; |
||||||
|
width: 60%; |
||||||
|
height: 36px; |
||||||
|
resize: none; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//表格样式 |
||||||
|
.overflowTable { |
||||||
|
width: 95%; |
||||||
|
margin: 0 auto; |
||||||
|
max-height: 300px; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
.detailsTable { |
||||||
|
margin: 10px 0; |
||||||
|
table { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
border-collapse:collapse; |
||||||
|
word-break:break-all; |
||||||
|
word-wrap:break-all; |
||||||
|
table-layout:fixed; |
||||||
|
th { |
||||||
|
height: 35px; |
||||||
|
border: 1px solid #999;} |
||||||
|
td { |
||||||
|
height: 35px; |
||||||
|
border: 1px solid #999;} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//滚动条样式 |
||||||
|
::-webkit-scrollbar{ |
||||||
|
width: 5px; |
||||||
|
background-color: white; |
||||||
|
} |
||||||
|
::-webkit-scrollbar-thumb{ |
||||||
|
background-color: #999; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//img图片列表页面 |
||||||
|
.imageList { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
.imageListBox { |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
.imagesBox { |
||||||
|
width: 300px; |
||||||
|
height: 200px; |
||||||
|
margin: 0 11px 0 11px; |
||||||
|
display: inline-block; |
||||||
|
img { |
||||||
|
border: 1px solid #999; |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
max-width: 100%; |
||||||
|
height: 170px; |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,538 @@ |
|||||||
|
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; |
||||||
|
import {HttpClient, HttpHeaders} from '@angular/common/http' |
||||||
|
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||||
|
import { ImgsDataDetail2 } from './addGrouping.component' |
||||||
|
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
||||||
|
import { ImagesData2 } from './imagesdata.component' |
||||||
|
import { Router,ActivatedRoute } from '@angular/router' |
||||||
|
|
||||||
|
|
||||||
|
export interface Food { |
||||||
|
value: string; |
||||||
|
name: string; |
||||||
|
} |
||||||
|
@Component({ |
||||||
|
selector: 'app-fire-fighting-device-look', |
||||||
|
templateUrl: './fire-fighting-device.component.html', |
||||||
|
styleUrls: ['./fire-fighting-device.component.scss'] |
||||||
|
}) |
||||||
|
export class FireFightingDeviceLookComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router:Router,private route:ActivatedRoute,public http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.getCompanyInformation() |
||||||
|
this.getAllBuilding() |
||||||
|
} |
||||||
|
|
||||||
|
//定义属性数据
|
||||||
|
singleElection:Food[]=[ |
||||||
|
{value:'true', name: '有'}, |
||||||
|
{value:'false', name: '无'}] |
||||||
|
|
||||||
|
companyBuiltInGrouping:any = []; //单位消防设施内置分组
|
||||||
|
companyDetails:any = []; //单位详情
|
||||||
|
companyEachDetails:any = [] //单位每层详情
|
||||||
|
companyOptionalGrouping:any = []; //单位消防设施可选分组
|
||||||
|
|
||||||
|
//获得单位基本信息
|
||||||
|
getCompanyInformation () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
this.http.get(`/api/Companies/${companyId}`).subscribe((data:any)=>{ |
||||||
|
if (data.buildingTypes.length) { |
||||||
|
let newData = {buildingType: data.buildingTypes[0].id,companyId : companyId} |
||||||
|
this.http.get('/api/CompanyFacilities',{params:newData}).subscribe((data:any)=>{ //获得单位的消防设施
|
||||||
|
this.companyBuiltInGrouping = data[0].summary.companyFacilityGroups |
||||||
|
this.companyOptionalGrouping = data[0].summary.companyOptionalGroups |
||||||
|
this.companyDetails = data[0].details |
||||||
|
this.companyEachDetails = data[0].eachDetails |
||||||
|
this.companyBuiltInGrouping.forEach(element => { //循环单位内置分组项
|
||||||
|
element.selectBuiltInGrouping = [] |
||||||
|
element.facilityItems.forEach((elements,index) => { |
||||||
|
elements.total = element.facilityCount[index] |
||||||
|
elements.expanded = false}); |
||||||
|
}); |
||||||
|
}) //http
|
||||||
|
} //if
|
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//创建单位消防设施内置分组项
|
||||||
|
addCompanyGrouping (e) { |
||||||
|
let data = e |
||||||
|
let dialogRef = this.dialog.open(ImagesData2,{data}); |
||||||
|
dialogRef.afterClosed().subscribe(data=>{ |
||||||
|
if (data) { e.facilityItems.push(data) } });
|
||||||
|
} |
||||||
|
|
||||||
|
//保存单位消防设施内置分组项
|
||||||
|
editCompanyGrouping(e) { |
||||||
|
let header = {groupId:e.id} |
||||||
|
let data = [] |
||||||
|
e.facilityItems.forEach((element,index) => { |
||||||
|
let msg = { |
||||||
|
isBuiltin: element.isBuiltin, |
||||||
|
details: element.details, |
||||||
|
name: element.name, |
||||||
|
isEachFloor: element.isEachFloor, |
||||||
|
order: element.order} |
||||||
|
data.push(msg) |
||||||
|
if (index==e.facilityItems.length-1) { |
||||||
|
this.http.post('/api/CompanyFacilityItems/Batch',data,{params:header}).subscribe(data=>{ |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据更新成功','确定',config); |
||||||
|
}) } |
||||||
|
}); //forEach
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//checked单位消防设施内置分组项时
|
||||||
|
checkedCompany (e,item,items) { |
||||||
|
if (e.checked) { |
||||||
|
item.selectBuiltInGrouping.push(items) |
||||||
|
} else { |
||||||
|
item.selectBuiltInGrouping.splice(item.selectBuiltInGrouping.findIndex(oldItem => oldItem == items), 1) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//删除消防设施内置分组项
|
||||||
|
deleteCompanyGrouping (e) { |
||||||
|
if (e.selectBuiltInGrouping.length) { |
||||||
|
let isDelete = confirm('您确定要删除吗') |
||||||
|
if (isDelete) { |
||||||
|
let msg:any = `?groupId=${e.id}` |
||||||
|
e.selectBuiltInGrouping.forEach((element,index) => { |
||||||
|
let data = `&name=${element.name}` |
||||||
|
msg = msg + data |
||||||
|
if (index === e.selectBuiltInGrouping.length-1) { |
||||||
|
this.http.delete('/api/CompanyFacilityItems/Batch' + msg).subscribe(data=>{ |
||||||
|
let deleteMsg = e.selectBuiltInGrouping |
||||||
|
deleteMsg.forEach(deleteElement => { |
||||||
|
e.facilityItems.splice(e.facilityItems.findIndex(item=>item.name==deleteElement.name),1) |
||||||
|
}); |
||||||
|
e.selectBuiltInGrouping = [] |
||||||
|
|
||||||
|
}) //http
|
||||||
|
} //if
|
||||||
|
}); //forEach
|
||||||
|
} |
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择内置分组项','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//保存单位消防设施可选分组
|
||||||
|
editCompanyOptional (e,item) { |
||||||
|
e.stopPropagation() //阻止冒泡
|
||||||
|
item.propertyInfos.forEach((element,index) => {
|
||||||
|
element.propertyValue = String(element.propertyValue) |
||||||
|
if (index == item.propertyInfos.length-1 ) { |
||||||
|
this.http.post('/api/CompanyOptionalGroups',item).subscribe(data=>{ |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据更新成功','确定',config); |
||||||
|
}) |
||||||
|
} //if
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//单位消防设施切换展开面板
|
||||||
|
SwitchBoard (e) { |
||||||
|
e.expanded = !e.expanded |
||||||
|
if (e.expanded) { //展开面板展开时
|
||||||
|
if (e.isEachFloor) { //逐层统计时
|
||||||
|
let data = this.companyEachDetails[e.name] |
||||||
|
if (data) { |
||||||
|
e.loopTable = [] |
||||||
|
data.forEach(item => { |
||||||
|
let tableMsg = {name:item.name, header:[], body:[]} |
||||||
|
item.assets[0].propertyInfos.forEach(element => { //表头
|
||||||
|
if (element.propertyType!=3) { |
||||||
|
let unit = element.physicalUnit? '('+ element.physicalUnit +')' : '' //单位
|
||||||
|
tableMsg.header.push(element.propertyName+unit)} |
||||||
|
}); |
||||||
|
item.assets.forEach(element => { //表格内容
|
||||||
|
let everyBody = {} |
||||||
|
element.propertyInfos.forEach((elements,index) => { |
||||||
|
if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) {
|
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = elements.propertyValue } |
||||||
|
if (elements.propertyType==6) {
|
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = elements.propertyValue=='1'?'是':'否' } |
||||||
|
if (elements.propertyType!=3 && elements.propertyName=='图片') {
|
||||||
|
let imgLength = [] |
||||||
|
element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} }) |
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = String(imgLength.length) }
|
||||||
|
|
||||||
|
}); //propertyInfos
|
||||||
|
tableMsg.body.push(everyBody) |
||||||
|
}); //assets
|
||||||
|
e.loopTable.push(tableMsg) |
||||||
|
}); |
||||||
|
|
||||||
|
} //data有数据时
|
||||||
|
} else { //非逐层统计时
|
||||||
|
let data = this.companyDetails[e.name] |
||||||
|
if (data) {
|
||||||
|
e.header = [] |
||||||
|
e.body = [] |
||||||
|
data[0].propertyInfos.forEach(element => { //表头
|
||||||
|
if (element.propertyType!=3) { |
||||||
|
let unit = element.physicalUnit? '('+ element.physicalUnit +')' : '' //单位
|
||||||
|
e.header.push(element.propertyName+unit)} |
||||||
|
}); |
||||||
|
data.forEach(element => { //表格内容
|
||||||
|
let everyBody = {} |
||||||
|
element.propertyInfos.forEach((elements,index) => { |
||||||
|
if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) {
|
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = elements.propertyValue } |
||||||
|
if (elements.propertyType==6) {
|
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = elements.propertyValue=='1'?'是':'否' } |
||||||
|
if (elements.propertyType!=3 && elements.propertyName=='图片') {
|
||||||
|
let imgLength = [] |
||||||
|
element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} }) |
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = String(imgLength.length) } |
||||||
|
|
||||||
|
}); |
||||||
|
e.body.push(everyBody) |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
} //非逐层统计时
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
allBuildingGrouping:any; //所有建筑的消防设施 内置分组+可选分组
|
||||||
|
//获取所有建筑
|
||||||
|
getAllBuilding () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
this.http.get('/api/Buildings',{params:{ |
||||||
|
companyId:companyId |
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
this.allBuildingGrouping = data |
||||||
|
if (this.allBuildingGrouping.length) { this.getAllBuildingFacilities() } |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有建筑的消防设施
|
||||||
|
getAllBuildingFacilities () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
this.allBuildingGrouping.forEach(element => { |
||||||
|
let header = {buildingId: element.id, buildingType: element.buildingTypes[0].id,companyId:companyId} |
||||||
|
this.http.get('/api/BuildingFacilities',{params:header}).subscribe(data=>{ |
||||||
|
element.buildingFacilityGroups = data[0].summary.buildingFacilityGroups |
||||||
|
element.buildingOptionalGroups = data[0].summary.buildingOptionalGroups |
||||||
|
element.buildingDetails = data[0].details |
||||||
|
element.buildingEachDetails = data[0].eachDetails |
||||||
|
element.buildingFacilityGroups.forEach((elements) => { //循环每个建筑内置分组项
|
||||||
|
elements.selectBuiltInGrouping = [] |
||||||
|
elements.facilityItems.forEach((newElement,index) => {
|
||||||
|
newElement.total = elements.facilityCount[index] |
||||||
|
newElement.expanded = false }); |
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//创建建筑消防设施内置分组项
|
||||||
|
addBuildingGrouping (e,item) { |
||||||
|
let data = {buildingId: e.id, item} |
||||||
|
let dialogRef = this.dialog.open(ImgsDataDetail2,{data}); |
||||||
|
dialogRef.afterClosed().subscribe(data=>{ |
||||||
|
if (data) { item.facilityItems.push(data) }
|
||||||
|
});
|
||||||
|
} |
||||||
|
|
||||||
|
//保存建筑消防设施内置分组项
|
||||||
|
editBuildingGrouping (e,item) { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
let header = {companyId:companyId,buildingId:e.id, groupId:item.id} |
||||||
|
let data = [] |
||||||
|
item.facilityItems.forEach((element,index) => { |
||||||
|
let msg = { |
||||||
|
isBuiltin: element.isBuiltin, |
||||||
|
details: element.details, |
||||||
|
name: element.name, |
||||||
|
isEachFloor: element.isEachFloor, |
||||||
|
order: element.order} |
||||||
|
data.push(msg) |
||||||
|
if (index==item.facilityItems.length-1) { |
||||||
|
this.http.post('/api/BuildingFacilityItems/Batch',data,{params:header}).subscribe(data=>{ |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据更新成功','确定',config); |
||||||
|
}) } |
||||||
|
}); //forEach
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//删除建筑消防设施内置分组项
|
||||||
|
deleteBuildingGrouping (e,item) { |
||||||
|
if (item.selectBuiltInGrouping.length) { |
||||||
|
let isDelete = confirm('您确定要删除吗') |
||||||
|
if (isDelete) { |
||||||
|
let msg:any = `?buildingId=${e.id}&groupId=${item.id}` |
||||||
|
item.selectBuiltInGrouping.forEach((element,index) => { |
||||||
|
let data = `&name=${element.name}` |
||||||
|
msg = msg + data |
||||||
|
if (index === item.selectBuiltInGrouping.length-1) { |
||||||
|
this.http.delete('/api/BuildingFacilityItems/Batch'+msg).subscribe(data=>{ |
||||||
|
let deleteMsg = item.selectBuiltInGrouping |
||||||
|
deleteMsg.forEach(deleteElement => { |
||||||
|
item.facilityItems.splice(item.facilityItems.findIndex(items=>items.name==deleteElement.name),1) |
||||||
|
}); |
||||||
|
item.selectBuiltInGrouping = [] |
||||||
|
|
||||||
|
}) //http
|
||||||
|
} //if
|
||||||
|
}) //forEach
|
||||||
|
} |
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择内置分组项','确定',config);
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//保存建筑消防设施可选分组
|
||||||
|
editBuildingOptional (e,item) { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
e.stopPropagation() //阻止冒泡
|
||||||
|
item.propertyInfos.forEach((element,index) => {
|
||||||
|
element.propertyValue = String(element.propertyValue) |
||||||
|
if (index == item.propertyInfos.length-1 ) { |
||||||
|
this.http.post('/api/BuildingOptionalGroups',item,{params:{ |
||||||
|
companyId :companyId
|
||||||
|
}}).subscribe(data=>{ |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据更新成功','确定',config); |
||||||
|
}) |
||||||
|
} //if
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//建筑消防设施切换展开面板
|
||||||
|
SwitchBuildingBoard (item,e) { |
||||||
|
e.expanded = !e.expanded |
||||||
|
if (e.expanded) { //展开面板展开时
|
||||||
|
if (e.isEachFloor) { //逐层统计时
|
||||||
|
let data = item.buildingEachDetails[e.name] |
||||||
|
if (data) { |
||||||
|
e.loopTable = [] |
||||||
|
data.forEach(item => { |
||||||
|
let tableMsg = {name:item.name, header:[], body:[]} |
||||||
|
item.assets[0].propertyInfos.forEach(element => { //表头
|
||||||
|
if (element.propertyType!=3) { |
||||||
|
let unit = element.physicalUnit? '('+ element.physicalUnit +')' : '' //单位
|
||||||
|
tableMsg.header.push(element.propertyName+unit)} |
||||||
|
}); |
||||||
|
item.assets.forEach(element => { //表格内容
|
||||||
|
let everyBody = {} |
||||||
|
element.propertyInfos.forEach((elements,index) => { |
||||||
|
if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) {
|
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = elements.propertyValue } |
||||||
|
if (elements.propertyType==6) {
|
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = elements.propertyValue=='1'?'是':'否' } |
||||||
|
if (elements.propertyType!=3 && elements.propertyName=='图片') {
|
||||||
|
let imgLength = [] |
||||||
|
element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} }) |
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = String(imgLength.length) } |
||||||
|
|
||||||
|
}); //propertyInfos
|
||||||
|
tableMsg.body.push(everyBody) |
||||||
|
}); //assets
|
||||||
|
e.loopTable.push(tableMsg) |
||||||
|
}); |
||||||
|
|
||||||
|
} //data有数据时
|
||||||
|
} else { //非逐层统计时
|
||||||
|
let data = item.buildingDetails[e.name] |
||||||
|
if (data) {
|
||||||
|
e.header = [] |
||||||
|
e.body = [] |
||||||
|
data[0].propertyInfos.forEach(element => { //表头
|
||||||
|
if (element.propertyType!=3) { |
||||||
|
let unit = element.physicalUnit? '('+ element.physicalUnit +')' : '' //单位
|
||||||
|
e.header.push(element.propertyName+unit)} |
||||||
|
}); |
||||||
|
data.forEach(element => { //表格内容
|
||||||
|
let everyBody = {} |
||||||
|
element.propertyInfos.forEach((elements,index) => { |
||||||
|
if (elements.propertyType!=3 && elements.propertyName!='图片' && elements.propertyType!=6) {
|
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = elements.propertyValue } |
||||||
|
if (elements.propertyType==6) {
|
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = elements.propertyValue=='1'?'是':'否' } |
||||||
|
if (elements.propertyType!=3 && elements.propertyName=='图片') {
|
||||||
|
let imgLength = [] |
||||||
|
element.propertyInfos.find(item=>{ if(item.propertyType==3){imgLength.push(item)} }) |
||||||
|
let unit = elements.physicalUnit? '('+ elements.physicalUnit +')' : '' //单位
|
||||||
|
everyBody[elements.propertyName+unit] = String(imgLength.length) } |
||||||
|
|
||||||
|
}); |
||||||
|
e.body.push(everyBody) |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
} //非逐层统计时
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//单位消防设施预览图片
|
||||||
|
previewImg (e) { |
||||||
|
if (e.isEachFloor) { //逐层统计时
|
||||||
|
let newData = this.companyEachDetails[e.name] |
||||||
|
if (newData) { |
||||||
|
let data = {name:e.name, images:[]} |
||||||
|
let imgName
|
||||||
|
newData.forEach(item => { |
||||||
|
item.assets.forEach(element => { |
||||||
|
element.propertyInfos.forEach( elements => {
|
||||||
|
if (elements.propertyName.includes('名称')) {imgName = elements.propertyValue} |
||||||
|
if (elements.propertyType===3) { |
||||||
|
elements.propertyName = imgName |
||||||
|
data.images.push(elements)} }); |
||||||
|
}); |
||||||
|
}); //newDate
|
||||||
|
|
||||||
|
if (data.images.length) { |
||||||
|
let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗
|
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂无图片数据','确定',config); |
||||||
|
} |
||||||
|
|
||||||
|
} else{ |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂无图片数据','确定',config); } |
||||||
|
} else { //非逐层统计时
|
||||||
|
let newData = this.companyDetails[e.name] |
||||||
|
let imgName
|
||||||
|
if (newData) { |
||||||
|
let data = {name:e.name, images:[]} |
||||||
|
newData.forEach(element => { |
||||||
|
element.propertyInfos.forEach(elements => {
|
||||||
|
if (elements.propertyName.includes('名称')) {imgName = elements.propertyValue} |
||||||
|
if (elements.propertyType===3) { |
||||||
|
elements.propertyName = imgName |
||||||
|
data.images.push(elements)} }); |
||||||
|
}); |
||||||
|
if (data.images.length) { |
||||||
|
let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗
|
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂无图片数据','确定',config); |
||||||
|
} |
||||||
|
|
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂无图片数据','确定',config); } |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//建筑消防设施预览图片
|
||||||
|
previewBuildingImg (item,e) { |
||||||
|
if (e.isEachFloor) { //逐层统计时
|
||||||
|
let newData = item.buildingEachDetails[e.name] |
||||||
|
if (newData) { |
||||||
|
let data = {name:e.name, images:[]} |
||||||
|
let imgName |
||||||
|
newData.forEach(item => { |
||||||
|
item.assets.forEach(element => { |
||||||
|
element.propertyInfos.forEach( elements => {
|
||||||
|
if (elements.propertyName.includes('名称')) {imgName = elements.propertyValue} |
||||||
|
if (elements.propertyType===3) { |
||||||
|
elements.propertyName = imgName |
||||||
|
data.images.push(elements)} }); |
||||||
|
}); |
||||||
|
}); //newDate
|
||||||
|
|
||||||
|
if (data.images.length) { |
||||||
|
let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗
|
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂无图片数据','确定',config); |
||||||
|
} |
||||||
|
|
||||||
|
} else{ |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂无图片数据','确定',config); } |
||||||
|
} else { //非逐层统计时
|
||||||
|
let newData = item.buildingDetails[e.name] |
||||||
|
let imgName
|
||||||
|
if (newData) { |
||||||
|
let data = {name:e.name, images:[]} |
||||||
|
newData.forEach(element => { |
||||||
|
element.propertyInfos.forEach(elements => {
|
||||||
|
if (elements.propertyName.includes('名称')) {imgName = elements.propertyValue} |
||||||
|
if (elements.propertyType===3) { |
||||||
|
elements.propertyName = imgName |
||||||
|
data.images.push(elements)}
|
||||||
|
}); |
||||||
|
}); |
||||||
|
if (data.images.length) { |
||||||
|
let dialogRef = this.dialog.open(ImagesData2,{width:'1350px',height:'700px',data}); //打开图片弹窗
|
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂无图片数据','确定',config); |
||||||
|
} |
||||||
|
|
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂无图片数据','确定',config); } |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,9 @@ |
|||||||
|
<div class="imageList"> |
||||||
|
<div mat-dialog-title *ngIf="data">{{data.name}}</div> |
||||||
|
<div class="imageListBox"> |
||||||
|
<div class="imagesBox" *ngFor="let item of data.images;let key = index"> |
||||||
|
<img [src]='item.newImageUrl' (click)='seeImage(key)'> |
||||||
|
<label style="display: inline-block;width: 100%;text-align: center;">{{item.propertyName}}</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||||
|
import Swiper from 'swiper'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'imagesdata', |
||||||
|
templateUrl: './imagesdata.component.html', |
||||||
|
styleUrls: ['./fire-fighting-device.component.scss'] |
||||||
|
}) |
||||||
|
export class ImagesData2 { |
||||||
|
|
||||||
|
constructor(private http: HttpClient,public dialogRef: MatDialogRef<ImagesData2>,@Inject(MAT_DIALOG_DATA) public data,public dialog: MatDialog) {} |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.data.images.forEach(element => { |
||||||
|
element.newImageUrl = `${element.propertyValue}?x-oss-process=image/resize,m_fill,h_170,w_299` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//查看大图
|
||||||
|
seeImage (index) { |
||||||
|
let data = { |
||||||
|
allImages:this.data.images, |
||||||
|
imgIndex: index} |
||||||
|
let dialogRef = this.dialog.open(previewBigImg2, |
||||||
|
{width: '1600px', |
||||||
|
height:'900px',data}); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'previewBigImg', |
||||||
|
templateUrl: './previewImg.html', |
||||||
|
styleUrls: ['../realistic-picture-look/realistic-picture.component.scss'] |
||||||
|
}) |
||||||
|
export class previewBigImg2 { |
||||||
|
|
||||||
|
constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<previewBigImg2>, |
||||||
|
@Inject(MAT_DIALOG_DATA) public data) { } |
||||||
|
testSwiper: Swiper; |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.allImages = this.data.allImages |
||||||
|
this.allImages.forEach(element => { |
||||||
|
element.previewImageUrl = `${element.propertyValue}?x-oss-process=image/auto-orient,1` //处理图片URL地址
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
ngAfterViewInit() { |
||||||
|
this.testSwiper = new Swiper('.swiper-container', { |
||||||
|
lazy: true, |
||||||
|
initialSlide: this.data.imgIndex, |
||||||
|
direction: 'horizontal', |
||||||
|
loop: false, |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 如果需要前进后退按钮
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
allImages:any; //展示所有的图片
|
||||||
|
rotationAngle:number=0; //旋转角度
|
||||||
|
|
||||||
|
//旋转图片
|
||||||
|
rotate () { |
||||||
|
this.rotationAngle = this.rotationAngle+90 |
||||||
|
if (this.rotationAngle === 360) {this.rotationAngle = 0} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<div mat-dialog-title>图片详情</div> |
||||||
|
<div class="swiper-container"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> |
||||||
|
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy"> |
||||||
|
<div class="swiper-lazy-preloader"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
|
<div class="swiper-button-prev"></div> |
||||||
|
<div class="swiper-button-next"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
@ -0,0 +1,120 @@ |
|||||||
|
<div class="content"> |
||||||
|
<mat-tab-group style="height: 100%;"> |
||||||
|
<mat-tab label="单位重点部位"> |
||||||
|
<div class="contentBox"> |
||||||
|
|
||||||
|
<div style="margin-top: 25px;"> |
||||||
|
<h3 style="text-align: center;font-weight: 550;">重点部位情况</h3> |
||||||
|
<table mat-table [dataSource]="allCompanyPosition"> |
||||||
|
<ng-container matColumnDef="mainname"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>重点部位名称</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
{{element.name}} |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="position"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>重点部位所在位置</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
{{element.position}} |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="construction"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>建筑结构</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
{{element.structure}} |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="nature"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>使用性质</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
{{element.nature}} |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="danger"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>主要危险性</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
{{element.hazards}} |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="img"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>图片</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<a href="javascript:void(0);" (click)='seeImg(element.imageUrls)' style="color: blue;">查看图片</a> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||||
|
</table> |
||||||
|
<p style="text-align: center;" *ngIf="!allCompanyPosition.length">暂无数据,请前往平面图进行相关数据录入</p> |
||||||
|
</div> |
||||||
|
<div style="margin-top: 25px; text-align: left;"> |
||||||
|
<h3 style="text-align: center;font-weight: 550;">重点提示</h3> |
||||||
|
<!-- <mat-icon title="保存" style="margin-left: 11%; cursor: pointer;" (click)='Preservation()'>description</mat-icon> --> |
||||||
|
<p class="tips"> |
||||||
|
<textarea readonly [(ngModel)]="companyInput" maxlength="500"></textarea> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</mat-tab> |
||||||
|
|
||||||
|
<mat-tab label="{{item.name}}" *ngFor="let item of allBuilding"> |
||||||
|
<div class="contentBox"> |
||||||
|
|
||||||
|
<div style="margin-top: 25px;"> |
||||||
|
<h3 style="text-align: center;font-weight: 550;">重点部位情况</h3> |
||||||
|
<table mat-table [dataSource]="item.position"> |
||||||
|
<ng-container matColumnDef="mainname"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>重点部位名称</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
{{element.name}} |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="position"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>重点部位所在位置</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
{{element.position}} |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="construction"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>建筑结构</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
{{element.structure}} |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="nature"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>使用性质</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
{{element.nature}} |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="danger"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>主要危险性</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
{{element.hazards}} |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<ng-container matColumnDef="img"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>图片</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<a href="javascript:void(0);" (click)='seeImg(element.imageUrls)' style="color: blue;">查看图片</a> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||||
|
</table> |
||||||
|
<p style="text-align: center;" *ngIf="!item.position.length">暂无数据,请前往平面图进行相关数据录入</p> |
||||||
|
</div> |
||||||
|
<div style="margin-top: 25px; text-align: left;"> |
||||||
|
<h3 style="text-align: center;font-weight: 550;">重点提示</h3> |
||||||
|
<!-- <mat-icon title="保存" style="margin-left: 11%;cursor: pointer;" (click)='PreservationBuilding(item)'>description</mat-icon> --> |
||||||
|
<p class="tips"> |
||||||
|
<textarea readonly [(ngModel)]="item.companyInput" maxlength="500"></textarea> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</mat-tab> |
||||||
|
|
||||||
|
</mat-tab-group> |
||||||
|
</div> |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
padding: 10px; |
||||||
|
overflow-y: auto; |
||||||
|
.contentBox{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
text-align: center; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
} |
||||||
|
table { |
||||||
|
width: 90%; |
||||||
|
margin: 15px auto; |
||||||
|
text-align: center; |
||||||
|
.cdk-header-cell { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//重点提示 |
||||||
|
.tips{ |
||||||
|
width: 75%; |
||||||
|
height: 150px; |
||||||
|
border: 1px solid black; |
||||||
|
border-radius: 5px; |
||||||
|
margin: 15px auto; |
||||||
|
text-align: center; |
||||||
|
padding: 25px; |
||||||
|
textarea { |
||||||
|
resize: none; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//预览图片旋转角度 |
||||||
|
.rotateA {transform: rotate(90deg) scale(0.75);} |
||||||
|
.rotateB {transform: rotate(180deg)} |
||||||
|
.rotateC {transform: rotate(270deg) scale(0.75);} |
||||||
|
//预览图片 |
||||||
|
.previewImgBox { |
||||||
|
width: 1500px; |
||||||
|
height: 700px; |
||||||
|
text-align: center; |
||||||
|
img{ |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
max-width: 100%; |
||||||
|
height: 100%;} |
||||||
|
} |
||||||
|
.previewImgBottom { |
||||||
|
text-align: center; |
||||||
|
height: 30px; |
||||||
|
margin: 20px auto; |
||||||
|
} |
||||||
@ -0,0 +1,173 @@ |
|||||||
|
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; |
||||||
|
import {HttpClient} from '@angular/common/http' |
||||||
|
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
import { KeySiteImgs2 } from './keysiteimgs.component' |
||||||
|
import { ActivatedRoute } from '@angular/router'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-key-site-look', |
||||||
|
templateUrl: './key-site.component.html', |
||||||
|
styleUrls: ['./key-site.component.scss'] |
||||||
|
}) |
||||||
|
export class KeySiteLookComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(public http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private route:ActivatedRoute,) { } |
||||||
|
|
||||||
|
displayedColumns: string[] = ['mainname', 'position', 'construction', 'nature', 'danger', 'img']; |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.getCompanyPostion() |
||||||
|
this.getCompanyTips() |
||||||
|
this.getAllBuilding() |
||||||
|
} |
||||||
|
|
||||||
|
allCompanyPosition:any = []; //所有单位重点部位
|
||||||
|
companyTips:any; //所有单位重点提示
|
||||||
|
companyInput:any; //单位重点提示数据
|
||||||
|
allBuilding:any = []; //所有建筑 + 建筑重点部位 + 建筑重点提示
|
||||||
|
|
||||||
|
//获取单位重点部位
|
||||||
|
getCompanyPostion () { |
||||||
|
let id = {companyId:this.route.snapshot.queryParams.id} |
||||||
|
this.http.get('/api/CompanyImportantLocations',{params:id}).subscribe(data=>{ |
||||||
|
this.allCompanyPosition = data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获取单位重点提示
|
||||||
|
getCompanyTips () { |
||||||
|
let id = {companyId:this.route.snapshot.queryParams.id} |
||||||
|
this.http.get('/api/CompanyImportantTips',{params:id}).subscribe((data:any)=>{ |
||||||
|
if (data) { |
||||||
|
this.companyTips = data |
||||||
|
this.companyInput = data.details} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有建筑
|
||||||
|
getAllBuilding () { |
||||||
|
let id = {companyId:this.route.snapshot.queryParams.id} |
||||||
|
this.http.get('/api/Buildings',{params:id}).subscribe((data:any)=>{ |
||||||
|
if (data.length) { |
||||||
|
this.allBuilding = data |
||||||
|
this.allBuilding.forEach(element => { |
||||||
|
element.position = [] //建筑重点部位
|
||||||
|
element.tips = null //建筑重点提示
|
||||||
|
element.companyInput = null }) //建筑重点提示数据
|
||||||
|
this.getAllBuildingPositon() |
||||||
|
this.getAllBuildingTips() |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有建筑重点部位
|
||||||
|
getAllBuildingPositon () { |
||||||
|
this.allBuilding.forEach(element => { |
||||||
|
let id = {buildingId:element.id} |
||||||
|
this.http.get('/api/BuildingImportantLocations',{params:id}).subscribe(data=>{ |
||||||
|
element.position = data |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有建筑重点提示
|
||||||
|
getAllBuildingTips () { |
||||||
|
this.allBuilding.forEach(element => { |
||||||
|
let id = {buildingId:element.id} |
||||||
|
this.http.get('/api/BuildingImportantTips',{params:id}).subscribe((data:any)=>{ |
||||||
|
if (data) { |
||||||
|
element.tips = data |
||||||
|
element.companyInput = data.details} |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//保存单位重点提示
|
||||||
|
Preservation () { |
||||||
|
if (this.companyTips) { //编辑单位重点提示
|
||||||
|
let data = { |
||||||
|
companyId: this.companyTips.companyId, |
||||||
|
id: this.companyTips.id, |
||||||
|
details: this.companyInput} |
||||||
|
this.http.put(`/api/CompanyImportantTips/${this.companyTips.id}`,data).subscribe(data=>{ |
||||||
|
this.getCompanyTips() |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据修改成功','确定',config); |
||||||
|
}) |
||||||
|
} else { //新增单位重点提示
|
||||||
|
let data = { |
||||||
|
companyId: this.route.snapshot.queryParams.id, |
||||||
|
id : "", |
||||||
|
details: this.companyInput || ""} |
||||||
|
this.http.post('/api/CompanyImportantTips',data).subscribe(data=>{ |
||||||
|
this.getCompanyTips() |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据修改成功','确定',config); |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//保存建筑重点提示
|
||||||
|
PreservationBuilding (e) { |
||||||
|
if (e.tips) { //编辑建筑重点提示
|
||||||
|
let data = { |
||||||
|
buildingId: e.id, |
||||||
|
id: e.tips.id, |
||||||
|
details: e.companyInput} |
||||||
|
this.http.put(`/api/BuildingImportantTips/${e.tips.id}`,data).subscribe(data=>{ |
||||||
|
this.toUpdate(e) |
||||||
|
}) |
||||||
|
} else { //新增重点单位提示
|
||||||
|
let data = { |
||||||
|
buildingId: e.id, |
||||||
|
details: e.companyInput || ""} |
||||||
|
this.http.post('/api/BuildingImportantTips',data).subscribe(data=>{ |
||||||
|
this.toUpdate(e) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//查看图片
|
||||||
|
seeImg (e) { |
||||||
|
if (e.length) { |
||||||
|
let data = e |
||||||
|
const dialogRef = this.dialog.open(KeySiteImgs2, {//调用open方法打开对话框并且携带参数过去
|
||||||
|
width: '1600px', |
||||||
|
height:'900px',data}); |
||||||
|
dialogRef.afterClosed().subscribe(); |
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂无图片数据','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//封装方法获取更新当前tab页重点提示
|
||||||
|
toUpdate (e) { |
||||||
|
let id = {buildingId:e.id} |
||||||
|
this.http.get('/api/BuildingImportantTips',{params:id}).subscribe((data:any)=>{ |
||||||
|
if (data) { |
||||||
|
this.allBuilding.forEach(element => { |
||||||
|
if (element.id === e.id) { |
||||||
|
element.tips = data |
||||||
|
element.companyInput = data.details} |
||||||
|
}); |
||||||
|
} // if
|
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据修改成功','确定',config); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar } from '@angular/material/snack-bar'; |
||||||
|
import Swiper from 'swiper'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'keyimgdetail', |
||||||
|
templateUrl: './keyimgdetail.component.html', |
||||||
|
styleUrls: ['./key-site.component.scss'] |
||||||
|
}) |
||||||
|
export class KeyImgDetail { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,18 @@ |
|||||||
|
<div mat-dialog-title>图片详情</div> |
||||||
|
<div class="swiper-container"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox"> |
||||||
|
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" |
||||||
|
[attr.data-src]="item"> |
||||||
|
<div class="swiper-lazy-preloader"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
|
<div class="swiper-button-prev"></div> |
||||||
|
<div class="swiper-button-next"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
import { Component, OnInit, Inject ,ViewChild} from '@angular/core'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||||
|
import Swiper from 'swiper'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'keysiteimgs', |
||||||
|
templateUrl: './keysiteimgs.component.html', |
||||||
|
styleUrls: ['./key-site.component.scss'] |
||||||
|
}) |
||||||
|
|
||||||
|
export class KeySiteImgs2 { |
||||||
|
|
||||||
|
constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<KeySiteImgs2>, |
||||||
|
@Inject(MAT_DIALOG_DATA) public data) { } |
||||||
|
testSwiper: Swiper; |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.allImages = [] |
||||||
|
this.data.forEach(element => { |
||||||
|
element = `${element}?x-oss-process=image/auto-orient,1` |
||||||
|
this.allImages.push(element) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
|
||||||
|
this.testSwiper = new Swiper('.swiper-container', { |
||||||
|
direction: 'horizontal', |
||||||
|
loop: false, |
||||||
|
lazy: true, |
||||||
|
// 如果需要前进后退按钮
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
allImages:any; //展示所有的图片
|
||||||
|
rotationAngle:number=0; //旋转角度
|
||||||
|
|
||||||
|
//旋转图片
|
||||||
|
rotate () { |
||||||
|
this.rotationAngle = this.rotationAngle+90 |
||||||
|
if (this.rotationAngle === 360) {this.rotationAngle = 0} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,18 @@ |
|||||||
|
<div mat-dialog-title>创建实景图分组</div> |
||||||
|
<div> |
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<mat-form-field> |
||||||
|
<input matInput placeholder="请输入实景图分组名称" required ngModel name="name" maxlength="20"> |
||||||
|
</mat-form-field> |
||||||
|
|
||||||
|
<div mat-dialog-actions> |
||||||
|
<button mat-raised-button color="primary" type="submit" |
||||||
|
[disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
<div mat-dialog-title>编辑实景图分组</div> |
||||||
|
<div> |
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<mat-form-field> |
||||||
|
<input matInput placeholder="实景图分组名称" required [(ngModel)]="name" name="name" maxlength="20"> |
||||||
|
</mat-form-field> |
||||||
|
|
||||||
|
<div mat-dialog-actions> |
||||||
|
<button mat-raised-button color="primary" type="submit" |
||||||
|
[disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<div mat-dialog-title>图片详情</div> |
||||||
|
<div class="swiper-container"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> |
||||||
|
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> |
||||||
|
<div class="swiper-lazy-preloader"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
|
<div class="swiper-button-prev"></div> |
||||||
|
<div class="swiper-button-next"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
@ -0,0 +1,59 @@ |
|||||||
|
<div class="content"> |
||||||
|
<div class="leftBox"> |
||||||
|
<div class="bank"> |
||||||
|
<div> |
||||||
|
<span class="title">实景图</span> |
||||||
|
<!-- <mat-icon title="创建" (click)='addReal()'>add_circle_outline</mat-icon> |
||||||
|
<mat-icon title="编辑" (click)='editReal()'>create</mat-icon> |
||||||
|
<mat-icon title="删除" (click)='delete()'>delete</mat-icon> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div *ngFor="let item of allRealPicture,let key=index" class="material" |
||||||
|
[ngClass]="{'leftFile': selectRealIndex===key}" (click)="changeReal(item,key)"> |
||||||
|
<mat-icon class="btn">folder</mat-icon><span>{{item.name}}</span> |
||||||
|
</div> |
||||||
|
<div class="material" *ngIf="!allRealPicture.length"> |
||||||
|
<span>暂无数据</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="rightBox"> |
||||||
|
<div class="topBox"> |
||||||
|
<div> |
||||||
|
<!-- <span class="title" *ngIf="selectReal">{{selectReal.name}}</span> |
||||||
|
<button mat-raised-button color="primary" class="uploadFileFixed" *ngIf="!isLoading"> |
||||||
|
上传图片 |
||||||
|
<input type="file" id="uploadFile" class="uploadFile" (change)='uploadFile($event)' ng2FileSelect [uploader]="uploader" accept="image/*"> |
||||||
|
</button> |
||||||
|
<button mat-raised-button color="primary" style="margin-left: 15px;" (click)='download()'>批量下载</button> |
||||||
|
<button mat-raised-button color="primary" style="margin-left: 15px;" *ngIf="isDownload && !isLoading" (click)='batchDownload()'>下载</button> |
||||||
|
<mat-spinner *ngIf="isLoading" diameter=25 class="isLoading"></mat-spinner> |
||||||
|
<span style="margin-left: 15px;color: red;font-size: 12px;" *ngIf="isDownload">*现为批量下载状态,如需预览图片,请关闭批量下载</span> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="bottomBox"> |
||||||
|
<div class="imgsBoxflex"> |
||||||
|
|
||||||
|
<div *ngFor="let item of allImages;let key = index" class="imgBox"> |
||||||
|
<mat-icon class="checkedImg" *ngIf="item.checked">check_circle</mat-icon> |
||||||
|
<div class="fixedImg"><img [src]="item.newImageUrl" (click)='operation(item,key)' [ngClass]="{'selectImg': item.checked}"></div> |
||||||
|
<label style="margin-left: 5px;">图片名称:</label> |
||||||
|
<input type="text" style="margin-left: 10px;" [(ngModel)]="item.nameStart" maxlength="20"> |
||||||
|
<a href="javascript:" style="margin-left: 5px;" (click)='preservationImg(item)'>保存</a> |
||||||
|
<a href="javascript:" style="margin-left: 5px;" (click)="deleteImg(item)">删除</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<p style="width: 100px;margin: 30px auto;" *ngIf="!allImages.length">暂无数据</p> |
||||||
|
</div> |
||||||
|
<mat-paginator [length]="length" |
||||||
|
[pageSize]='pageSize' |
||||||
|
[pageSizeOptions]="pageSizeOptions" |
||||||
|
(page)="chagePage($event)"> |
||||||
|
</mat-paginator> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,174 @@ |
|||||||
|
.content { |
||||||
|
margin: 0 0 0 10px; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
overflow-y: auto; |
||||||
|
display: flex; |
||||||
|
.leftBox { |
||||||
|
flex: 15%; |
||||||
|
padding-top: 10px; |
||||||
|
.bank { |
||||||
|
display: flex; |
||||||
|
padding-left: 10px; |
||||||
|
.mat-icon {margin-right: 15px;} |
||||||
|
} |
||||||
|
} |
||||||
|
.rightBox { |
||||||
|
border-left: 1px solid #999; |
||||||
|
flex: 85%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.topBox { |
||||||
|
flex: 5%; padding: 10px; |
||||||
|
display: flex; |
||||||
|
:first-child {flex: 85%;}; |
||||||
|
:last-child {flex: 15%;} |
||||||
|
} |
||||||
|
.bottomBox { |
||||||
|
flex: 95%; |
||||||
|
padding: 5px 0 0 25px; |
||||||
|
overflow: auto; |
||||||
|
.imgsBoxflex { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//icon统一样式 |
||||||
|
.mat-icon { |
||||||
|
cursor:pointer; |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
vertical-align:top; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.title {margin-right: 30px;font-weight: 500; font-size: 18px;} |
||||||
|
|
||||||
|
.material { |
||||||
|
cursor:pointer; |
||||||
|
height: 30px; |
||||||
|
font-size: 16px; |
||||||
|
margin-top: 10px; |
||||||
|
padding-left: 15px; |
||||||
|
span { |
||||||
|
max-width: 200px; |
||||||
|
display: inline-block; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow:ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
.btn { |
||||||
|
color: #FFC122; |
||||||
|
} |
||||||
|
} |
||||||
|
.imgBox{ |
||||||
|
width: 300px; |
||||||
|
height: 200px; |
||||||
|
margin: 0 35px 35px 0; |
||||||
|
display: inline-block; |
||||||
|
position: relative; |
||||||
|
.fixedImg { |
||||||
|
width: 100%; |
||||||
|
height: 170px; |
||||||
|
text-align: center; |
||||||
|
margin-bottom: 3px; |
||||||
|
img { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
max-width: 100%; |
||||||
|
height: 100%; |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
input{ |
||||||
|
font-size:12px; |
||||||
|
width: 100px; |
||||||
|
height:18px; |
||||||
|
border-radius:3px; |
||||||
|
border:1px solid #c8cccf; |
||||||
|
outline:0; |
||||||
|
text-align:left; |
||||||
|
padding-left: 5px; |
||||||
|
display:inline-block; |
||||||
|
cursor: pointer;} |
||||||
|
input::-webkit-input-placeholder{ |
||||||
|
color: #986655; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
a {display: inline-block; |
||||||
|
width: 45px; |
||||||
|
height: 24px; |
||||||
|
line-height: 24px; |
||||||
|
text-align: center; |
||||||
|
border-radius: 3px; |
||||||
|
background-color: #2196F3; |
||||||
|
font-size: 14px; |
||||||
|
color: #fff;} |
||||||
|
} |
||||||
|
.uploadFileFixed { |
||||||
|
position: relative; |
||||||
|
.uploadFile { |
||||||
|
opacity:0; |
||||||
|
display: inline-block; |
||||||
|
width: 88px; |
||||||
|
height: 36px; |
||||||
|
position: absolute; |
||||||
|
top: 0px; |
||||||
|
left: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
//分页 |
||||||
|
.mat-paginator { |
||||||
|
background-color: rgba(255,255,255,0); |
||||||
|
padding-right: 10%; |
||||||
|
} |
||||||
|
.isLoading{ |
||||||
|
display: inline-block; |
||||||
|
margin-left: 15px; |
||||||
|
top: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
//左侧实景图文件样式 |
||||||
|
.leftFile { |
||||||
|
background-color: rgba(225,225,225,0.8); |
||||||
|
} |
||||||
|
//选中图片样式 |
||||||
|
.selectImg { |
||||||
|
-webkit-filter: drop-shadow(0px 0px 5px #000); |
||||||
|
filter: drop-shadow(0px 0px 5px #000); |
||||||
|
border: 1px solid red; |
||||||
|
} |
||||||
|
.checkedImg { |
||||||
|
position: absolute; |
||||||
|
top: 1px; |
||||||
|
right: 1px; |
||||||
|
color:#00FF00; |
||||||
|
font-size: 30px; |
||||||
|
z-index: 999; |
||||||
|
} |
||||||
|
//预览图片旋转角度 |
||||||
|
.rotateA {transform: rotate(90deg) scale(0.75);} |
||||||
|
.rotateB {transform: rotate(180deg)} |
||||||
|
.rotateC {transform: rotate(270deg) scale(0.75);} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//预览图片 |
||||||
|
.previewImgBox { |
||||||
|
width: 1500px; |
||||||
|
height: 700px; |
||||||
|
text-align: center; |
||||||
|
img{ |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
max-width: 100%; |
||||||
|
height: 100%;} |
||||||
|
} |
||||||
|
.previewImgBottom { |
||||||
|
text-align: center; |
||||||
|
height: 30px; |
||||||
|
margin: 20px auto; |
||||||
|
} |
||||||
@ -0,0 +1,410 @@ |
|||||||
|
import { Component, OnInit, Inject, ViewChild } from '@angular/core'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||||
|
import { FileUploader } from 'ng2-file-upload'; |
||||||
|
import { MatPaginator } from '@angular/material/paginator'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
import Swiper from 'swiper'; |
||||||
|
import { Router,ActivatedRoute } from '@angular/router' |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-realistic-picture-look', |
||||||
|
templateUrl: './realistic-picture.component.html', |
||||||
|
styleUrls: ['./realistic-picture.component.scss'] |
||||||
|
}) |
||||||
|
export class RealisticPictureLookComponent implements OnInit { |
||||||
|
uploader:FileUploader = new FileUploader({ //初始化上传文件
|
||||||
|
url: `/api/Objects/PlanPlatform/${this.route.snapshot.queryParams.id}/RealImgs`,
|
||||||
|
method: "POST",
|
||||||
|
itemAlias: "uploadedfile", |
||||||
|
autoUpload: false, |
||||||
|
removeAfterUpload:true, |
||||||
|
});
|
||||||
|
|
||||||
|
constructor(private router:Router,private route:ActivatedRoute,private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
this.http.get('/api/RealityImageGroups',{params:{ |
||||||
|
companyId : companyId |
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
this.allRealPicture = data |
||||||
|
this.selectReal = data[0] |
||||||
|
this.getAllRealPicture() |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
companyId:any; //单位编号
|
||||||
|
allRealPicture:any=[]; //所有实景图文件
|
||||||
|
selectReal:any; //选中的实景图文件
|
||||||
|
selectRealIndex:number=0; //选中的实景图文件下标
|
||||||
|
allImages:any=[]; //实景图文件对应所有的实景图
|
||||||
|
isDownload:boolean = false; //是否批量下载
|
||||||
|
downloadList:any = []; //选中需要下载的图片
|
||||||
|
|
||||||
|
//分页
|
||||||
|
@ViewChild(MatPaginator, {static: true})
|
||||||
|
paginator: MatPaginator; |
||||||
|
length:any; //共多少条数据
|
||||||
|
pageSize:any = '12'; //每页条数
|
||||||
|
pageSizeOptions: number[] = [12] //设置每页条数
|
||||||
|
PageNumber:any; //第几页
|
||||||
|
|
||||||
|
//分页切换
|
||||||
|
chagePage (e) { |
||||||
|
this.PageNumber = e.pageIndex+1 |
||||||
|
this.getAllRealPicture() |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有实景图分组
|
||||||
|
getAllGrouping () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
this.http.get('/api/RealityImageGroups',{params:{ |
||||||
|
companyId : companyId
|
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
this.allRealPicture = data |
||||||
|
this.selectReal = data[this.selectRealIndex] |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获取实景图分组对应实景图
|
||||||
|
getAllRealPicture () { |
||||||
|
if (this.selectReal) { |
||||||
|
let data ={ |
||||||
|
groupId: this.selectReal.id, |
||||||
|
PageNumber: this.PageNumber || 1, |
||||||
|
pageSize: this.pageSize, |
||||||
|
} |
||||||
|
this.http.get('/api/RealityImages',{params:data}).subscribe((data:any)=>{ |
||||||
|
this.allImages = data.items
|
||||||
|
this.length = data.totalCount |
||||||
|
this.pageSize = data.pageSize |
||||||
|
this.downloadList = [] |
||||||
|
this.allImages.forEach(element => { //每张图片设置选中状态为false
|
||||||
|
element.newImageUrl = `/api/Objects/PlanPlatform/${element.imageUrl}?x-oss-process=image/resize,m_fill,h_170,w_299` //处理图片URL地址
|
||||||
|
element.checked = false //图片是否选中布尔值
|
||||||
|
element.nameStart = element.name.substring(0,element.name.lastIndexOf(".")); //图片名称前缀
|
||||||
|
element.nameEnd = element.name.substring(element.name.lastIndexOf("."),element.name.length); //图片名称后缀
|
||||||
|
}); |
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//切换左侧实景图文件
|
||||||
|
changeReal (e,index) { |
||||||
|
if (this.selectRealIndex != index) { |
||||||
|
this.selectReal = e |
||||||
|
this.selectRealIndex = index |
||||||
|
this.isDownload = false |
||||||
|
this.downloadList = [] |
||||||
|
this.getAllRealPicture() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//选择批量下载
|
||||||
|
download () { |
||||||
|
this.isDownload = !this.isDownload |
||||||
|
if (!this.isDownload) { //取消批量下载时数组清空
|
||||||
|
this.allImages.forEach(element => {element.checked = false}); |
||||||
|
this.downloadList = [] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 预览图片---批量选择图片
|
||||||
|
operation (e,index) { |
||||||
|
if (this.isDownload) { //批量选择图片
|
||||||
|
e.checked = !e.checked |
||||||
|
if (e.checked==true) {this.downloadList.push(e)}
|
||||||
|
else {this.downloadList.splice(this.downloadList.findIndex(item => item.id === e.id), 1)} |
||||||
|
} else { //预览图片
|
||||||
|
let data = { |
||||||
|
allImages:this.allImages, |
||||||
|
imgIndex: index} |
||||||
|
let dialogRef = this.dialog.open(previewImg3, |
||||||
|
{width: '1600px', |
||||||
|
height:'900px',data}); |
||||||
|
dialogRef.afterClosed().subscribe();
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//新建实景图文件
|
||||||
|
addReal () { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//编辑实景图文件
|
||||||
|
editReal () { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//删除实景图文件
|
||||||
|
delete () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
if (this.selectReal) { |
||||||
|
let isDelete = confirm('您确定要删除吗') |
||||||
|
if (isDelete) { |
||||||
|
this.http.delete(`/api/RealityImageGroups/${this.selectReal.id}`).subscribe(data=>{ |
||||||
|
this.http.get('/api/RealityImageGroups',{params:{ |
||||||
|
companyId : companyId |
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
this.allRealPicture = data |
||||||
|
this.selectReal = data[this.selectRealIndex] |
||||||
|
this.allImages = [] |
||||||
|
this.getAllRealPicture() |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//实景图修改
|
||||||
|
preservationImg (e) { |
||||||
|
let data = { |
||||||
|
id:e.id, |
||||||
|
name:e.nameStart+e.nameEnd, |
||||||
|
imageUrl:e.imageUrl, |
||||||
|
realityImageGroupId:e.realityImageGroupId |
||||||
|
} |
||||||
|
this.http.put(`/api/RealityImages/${e.id}`,data).subscribe(data=>{ |
||||||
|
this.getAllRealPicture() |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('图片修改成功','确定',config); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//实景图删除
|
||||||
|
deleteImg (e) { |
||||||
|
let isDelete = confirm('您确定要删除吗') |
||||||
|
if (isDelete) { |
||||||
|
this.http.delete(`/api/RealityImages/${e.id}`).subscribe(data=>{ |
||||||
|
this.getAllRealPicture() |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('图片删除成功','确定',config); |
||||||
|
}) |
||||||
|
this.http.delete(`/api/Objects/PlanPlatform/${e.imageUrl}`).subscribe(data=>{}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
isLoading:boolean = false; //loading加载
|
||||||
|
//上传文件↓
|
||||||
|
file:any; //上传的文件
|
||||||
|
objectName:any; //上传对象名
|
||||||
|
uploadId:any; //上传分块上传事件编号
|
||||||
|
|
||||||
|
//change选择文件
|
||||||
|
uploadFile (e) { |
||||||
|
if (this.selectReal) { |
||||||
|
this.file = e.target.files[0] || null //上传的文件
|
||||||
|
let URL = window.URL.createObjectURL(this.file) |
||||||
|
var img = new Image() |
||||||
|
img.src = URL |
||||||
|
let that = this |
||||||
|
img.onload = function () { |
||||||
|
if(img.width>=4096 || img.height>=5000 ){
|
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
that.snackBar.open('请选择分辨率小于4096*5000的图片','确定',config); |
||||||
|
that.uploader.clearQueue(); //清空input控件文件
|
||||||
|
(<HTMLInputElement>document.getElementById('uploadFile')).value = null //清空input框缓存
|
||||||
|
}else{ that.startUploading() } |
||||||
|
} //onload
|
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择或创建实景图文件夹','确定',config); |
||||||
|
this.uploader.clearQueue(); //清空input控件文件
|
||||||
|
(<HTMLInputElement>document.getElementById('uploadFile')).value = null //清空input框缓存
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//上传文件
|
||||||
|
startUploading () { |
||||||
|
let file = this.file || null //获取上传的文件
|
||||||
|
let fileSize = file.size || null //上传文件的总大小
|
||||||
|
let shardSize = 5 * 1024 * 1024 //5MB一个分片
|
||||||
|
let maxdSize = 20 * 1024 * 1024 //限制20MB
|
||||||
|
|
||||||
|
if (file && fileSize<=shardSize) { //上传文件<=5MB时
|
||||||
|
this.uploader.queue[0].upload();//开始上传
|
||||||
|
this.uploader.queue[0].onSuccess = (response, status, headers) => {
|
||||||
|
if (status == 201) { // 上传文件成功,上传文件后获取服务器返回的数据
|
||||||
|
let tempRes = JSON.parse(response); |
||||||
|
this.objectName = tempRes.objectName |
||||||
|
this.addRealImg() |
||||||
|
}else { // 上传文件后获取服务器返回的数据错误
|
||||||
|
let tempRes = JSON.parse(response);
|
||||||
|
}}; |
||||||
|
} else if (file && fileSize>shardSize && fileSize<maxdSize) { //上传文件>5MB时,分块上传 |
||||||
|
let data = {filename: file.name} |
||||||
|
this.isLoading = true |
||||||
|
this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.companyId}/RealImgs`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传
|
||||||
|
this.objectName = data.objectName |
||||||
|
this.uploadId = data.uploadId |
||||||
|
this.subsectionUploading() |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
PartNumberETag:any=[]; //每次返回需要保存的信息
|
||||||
|
//开始分段上传
|
||||||
|
async subsectionUploading () { |
||||||
|
let file = this.file || null //获取上传的文件
|
||||||
|
let fileSize = file.size || null //上传文件的总大小
|
||||||
|
let shardSize = 5 * 1024 * 1024 //5MB一个分片
|
||||||
|
let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
|
||||||
|
|
||||||
|
for (let i = 0;i < allSlice;i++) { //循环分段上传
|
||||||
|
let start = i * shardSize //切割文件开始位置
|
||||||
|
let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
|
||||||
|
let formData = new FormData() |
||||||
|
formData.append("file",file.slice(start, end)) |
||||||
|
|
||||||
|
//同步写法实现异步调用
|
||||||
|
let result = await new Promise((resolve, reject) => { |
||||||
|
// await 需要后面返回一个 promise 对象
|
||||||
|
this.http.post(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{ |
||||||
|
let msg = { |
||||||
|
"partNumber":data.partNumber || null, |
||||||
|
"eTag": data.eTag || null} |
||||||
|
resolve(msg) // 调用 promise 内置方法处理成功
|
||||||
|
}) |
||||||
|
}); |
||||||
|
this.PartNumberETag.push(result) |
||||||
|
if (this.PartNumberETag.length === allSlice) {this.endUploading()} |
||||||
|
}//for循环
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//完成分块上传
|
||||||
|
endUploading () { |
||||||
|
let data = this.PartNumberETag |
||||||
|
let paramsData = {uploadId:this.uploadId} |
||||||
|
this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{ |
||||||
|
this.addRealImg() //上传完成后,发送请求创建实景图
|
||||||
|
this.isLoading = false |
||||||
|
this.uploader.clearQueue(); //清空input控件文件
|
||||||
|
this.PartNumberETag =[] //清空保存返回的信息
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//上传图片成功后获取url地址发送请求创建实景图
|
||||||
|
addRealImg () { |
||||||
|
let data = { |
||||||
|
name: this.file.name, |
||||||
|
imageUrl:this.objectName, |
||||||
|
realityImageGroupId: this.selectReal.id, |
||||||
|
} |
||||||
|
this.http.post('/api/RealityImages',data).subscribe(data=>{ |
||||||
|
(<HTMLInputElement>document.getElementById('uploadFile')).value = null //清空input框缓存
|
||||||
|
this.getAllRealPicture() |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('图片上传成功','确定',config); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//批量下载↓
|
||||||
|
//开始下载
|
||||||
|
async batchDownload () { |
||||||
|
if (this.downloadList.length) { //开始批量循环下载
|
||||||
|
this.isLoading = true |
||||||
|
for (let i=0;i<this.downloadList.length;i++) { |
||||||
|
let result = await new Promise ((result,reject)=>{ |
||||||
|
this.http.get(`/api/Objects/PlanPlatform/${this.downloadList[i].imageUrl}`,{responseType: 'blob'},).subscribe(data=>{
|
||||||
|
let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
|
||||||
|
let link = document.createElement("a"); |
||||||
|
link.style.display = "none"; |
||||||
|
link.href = url; |
||||||
|
link.setAttribute("download", this.downloadList[i].name); |
||||||
|
document.body.appendChild(link); |
||||||
|
link.click(); |
||||||
|
result('success')}) |
||||||
|
}) |
||||||
|
if(i == this.downloadList.length-1) { //判断是否下载完毕
|
||||||
|
this.isLoading = false |
||||||
|
this.isDownload = false |
||||||
|
this.allImages.forEach(element => {element.checked = false}); |
||||||
|
this.downloadList = []} |
||||||
|
|
||||||
|
} //for循环
|
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择图片','确定',config);} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//预览图片组件
|
||||||
|
@Component({ |
||||||
|
selector: 'app-previewImg', |
||||||
|
templateUrl: './previewImg.html', |
||||||
|
styleUrls: ['./realistic-picture.component.scss'] |
||||||
|
}) |
||||||
|
export class previewImg3 { |
||||||
|
|
||||||
|
constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<previewImg3>, |
||||||
|
@Inject(MAT_DIALOG_DATA) public data) { } |
||||||
|
testSwiper: Swiper; |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.allImages = this.data.allImages |
||||||
|
this.allImages.forEach(element => { |
||||||
|
element.previewImageUrl = `/api/Objects/PlanPlatform/${element.imageUrl}?x-oss-process=image/auto-orient,1` //处理图片URL地址
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
ngAfterViewInit() { |
||||||
|
this.testSwiper = new Swiper('.swiper-container', { |
||||||
|
lazy: true, |
||||||
|
initialSlide: this.data.imgIndex, |
||||||
|
direction: 'horizontal', |
||||||
|
loop: false, |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 如果需要前进后退按钮
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
allImages:any; //展示所有的图片
|
||||||
|
rotationAngle:number=0; //旋转角度
|
||||||
|
|
||||||
|
//旋转图片
|
||||||
|
rotate () { |
||||||
|
this.rotationAngle = this.rotationAngle+90 |
||||||
|
if (this.rotationAngle === 360) {this.rotationAngle = 0} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,3 @@ |
|||||||
|
<div style="width: 100%;height: 100%;"> |
||||||
|
<iframe style="width: 100%;height: 100%;" src="http://39.106.78.171:8088/%E5%B9%BF%E8%A5%BF%E8%B4%B5%E6%B8%AF%E5%B8%82%E4%B8%89%E7%BB%B4%E7%81%AD%E7%81%AB%E9%A2%84%E6%A1%88/%5B%E7%BD%91%E9%A1%B5%E7%89%88%5D%E8%B4%B5%E6%B8%AF%E6%B2%B9%E5%BA%93%E4%B8%89%E7%BB%B4%E7%81%AD%E7%81%AB%E9%A2%84%E6%A1%88/" frameborder="0"></iframe> |
||||||
|
</div> |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { ThreetypePlanComponent } from './threetype-plan.component'; |
||||||
|
|
||||||
|
describe('ThreetypePlanComponent', () => { |
||||||
|
let component: ThreetypePlanComponent; |
||||||
|
let fixture: ComponentFixture<ThreetypePlanComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ ThreetypePlanComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(ThreetypePlanComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-threetype-plan', |
||||||
|
templateUrl: './threetype-plan.component.html', |
||||||
|
styleUrls: ['./threetype-plan.component.scss'] |
||||||
|
}) |
||||||
|
export class ThreetypePlanComponent implements OnInit { |
||||||
|
|
||||||
|
constructor() { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
Loading…
Reference in new issue