105 changed files with 6650 additions and 197 deletions
@ -1,6 +1,6 @@ |
|||||||
{ |
{ |
||||||
"/api": { |
"/api": { |
||||||
"target": "http://39.106.78.171:8000", |
"target": "http://121.37.20.190:8000", |
||||||
"secure": false, |
"secure": false, |
||||||
"changeOrigin": true |
"changeOrigin": true |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,172 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-24 09:22:17 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-26 17:11:54 |
||||||
|
--> |
||||||
|
<div class="content" id="allaround"> |
||||||
|
<!-- <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 style="margin: 10px 0;"> |
||||||
|
<mat-accordion class="tableContent"> |
||||||
|
<mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
||||||
|
<mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead"> |
||||||
|
<mat-panel-title style="font-size: 14px;" > |
||||||
|
单位毗邻 |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header > |
||||||
|
|
||||||
|
|
||||||
|
<div class="colum" *ngFor="let item of AllAdjoining"> |
||||||
|
<div class="left"> |
||||||
|
<img [src]="item.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(item.imageUrls)'> |
||||||
|
</div> |
||||||
|
<div class="right" > |
||||||
|
<div class="rightone"> |
||||||
|
<span>建筑名称：{{item.name}}</span> |
||||||
|
</div> |
||||||
|
<div class="righttwo"> |
||||||
|
<span>建筑方向：</span> |
||||||
|
<span> |
||||||
|
<span *ngIf="item.direction==0">东</span> |
||||||
|
<span *ngIf="item.direction==1">西</span> |
||||||
|
<span *ngIf="item.direction==2">南</span> |
||||||
|
<span *ngIf="item.direction==3">北</span> |
||||||
|
<span *ngIf="item.direction==4">东南</span> |
||||||
|
<span *ngIf="item.direction==5">西南</span> |
||||||
|
<span *ngIf="item.direction==6">东北</span> |
||||||
|
<span *ngIf="item.direction==7">西北</span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="righthree"> |
||||||
|
<span>图片数量：</span> |
||||||
|
<span *ngIf="item.imageUrls.length">{{item.imageUrls.length}}张</span> |
||||||
|
<span *ngIf="!item.imageUrls.length">0张</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
<div *ngFor="let item of AllBuilding" style="margin-bottom: 10px;"> |
||||||
|
<mat-accordion class="tableContent" > |
||||||
|
<mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
||||||
|
<mat-expansion-panel-header class="panelhead" collapsedHeight ='40px' expandedHeight='40px' class="panelhead"> |
||||||
|
<mat-panel-title style="font-size: 14px;"> |
||||||
|
{{item.name}} |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header > |
||||||
|
<div class="colum" *ngFor="let items of item.allImgs"> |
||||||
|
<div class="left"> |
||||||
|
<img [src]="items.imgURL" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='imgdetails(items.imageUrls)'> |
||||||
|
</div> |
||||||
|
<div class="right" > |
||||||
|
<div class="rightone"> |
||||||
|
<span>建筑名称：{{items.name}}</span> |
||||||
|
</div> |
||||||
|
<div class="righttwo"> |
||||||
|
<span>建筑方向：</span> |
||||||
|
<span> |
||||||
|
<span *ngIf="items.direction==0">东</span> |
||||||
|
<span *ngIf="items.direction==1">西</span> |
||||||
|
<span *ngIf="items.direction==2">南</span> |
||||||
|
<span *ngIf="items.direction==3">北</span> |
||||||
|
<span *ngIf="items.direction==4">东南</span> |
||||||
|
<span *ngIf="items.direction==5">西南</span> |
||||||
|
<span *ngIf="items.direction==6">东北</span> |
||||||
|
<span *ngIf="items.direction==7">西北</span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="righthree"> |
||||||
|
<span>图片数量：</span> |
||||||
|
<span *ngIf="items.imageUrls.length">{{items.imageUrls.length}}张</span> |
||||||
|
<span *ngIf="!items.imageUrls.length">0张</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
*{ |
||||||
|
-webkit-touch-callout: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
//padding: 10px; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
.tableContent{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
.panelhead{ |
||||||
|
//position: relative; |
||||||
|
height: 44px; |
||||||
|
background-color: #F2F9FF; |
||||||
|
} |
||||||
|
.colum{ |
||||||
|
width: 100%; |
||||||
|
margin-top: 3%; |
||||||
|
margin-bottom: 3%; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
.left{ |
||||||
|
width: 45%; |
||||||
|
//height: 140px; |
||||||
|
img{ |
||||||
|
width: 140px; |
||||||
|
height: 100px; |
||||||
|
margin-left: 13%; |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.right{ |
||||||
|
width: 40%; |
||||||
|
margin-top: 4%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.rightone{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.righttwo{ |
||||||
|
margin-top: 3%; |
||||||
|
} |
||||||
|
.righthree{ |
||||||
|
margin-top: 3%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//图片外部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,91 @@ |
|||||||
|
/* |
||||||
|
* @Descripttion:
|
||||||
|
* @version:
|
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-26 17:10:54 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-27 16:12:22 |
||||||
|
*/ |
||||||
|
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 = []; //所有建筑 + 建筑毗邻图片
|
||||||
|
//单位相关数据
|
||||||
|
unitId:string = sessionStorage.getItem('unitId') |
||||||
|
//5ee19fe06f91049f5e23e937
|
||||||
|
//5fb78554919f2b44e464017e
|
||||||
|
//获取所有单位毗邻图片
|
||||||
|
getAllCompany () { |
||||||
|
let id = {companyId:this.unitId} |
||||||
|
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.unitId} |
||||||
|
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 |
||||||
|
/* console.log(element) |
||||||
|
console.log(element.allImgs) */ |
||||||
|
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,83 @@ |
|||||||
|
<div class="box" id="gisbasicinfo"> |
||||||
|
<div class="unitPhotographBox"> |
||||||
|
<p>单位照片</p> |
||||||
|
<div class="imgbox" id="viewerjs"> |
||||||
|
<img [src]="unitInfo.imageUrl ? unitInfo.imageUrl : noImg" alt="" [attr.data-original]="unitInfo.imageUrl ? unitInfo.imageUrl.split('?')[0] :''"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="unitInfoBox"> |
||||||
|
<p>单位信息</p> |
||||||
|
<table> |
||||||
|
<tr> |
||||||
|
<td>统一社会信用代码</td> |
||||||
|
<td>{{unitInfo.usci}}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>单位类型</td> |
||||||
|
<td>{{unitInfo.buildingTypes ? unitInfo.buildingTypes[0].name : ''}}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>联系人</td> |
||||||
|
<td>{{unitInfo.contacts}}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>联系电话</td> |
||||||
|
<td>{{unitInfo.phone}}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>辖区中队</td> |
||||||
|
<td>{{unitInfo.organizationName}}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>单位地址</td> |
||||||
|
<td>{{unitInfo.address}}</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
<div class="buildingsBox"> |
||||||
|
<p>建筑信息</p> |
||||||
|
<mat-accordion *ngFor="let item of buildingsData"> |
||||||
|
<mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
||||||
|
<mat-expansion-panel-header style="position: relative;padding-left: 0;"> |
||||||
|
<mat-panel-title> |
||||||
|
{{item.name}} |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
|
||||||
|
<div *ngFor="let i of item.details"> |
||||||
|
<div *ngFor="let n of i.buildingBasicGroups;let key = index"> |
||||||
|
<p>{{key+1 + '.' +n.name}}</p> |
||||||
|
<!-- 输入框文本类(基本信息) --> |
||||||
|
<div *ngIf="n.type == 0"> |
||||||
|
<table> |
||||||
|
<tr *ngFor="let p of n.propertyInfos"> |
||||||
|
<td>{{p.propertyName}}<span *ngIf="p.physicalUnit">({{p.physicalUnit}})</span></td> |
||||||
|
<td>{{p.propertyValue}}</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
<!-- 多行表格(储罐信息) --> |
||||||
|
<div *ngIf="n.type == 1"> |
||||||
|
<table> |
||||||
|
<tr *ngFor="let p of n.tabledata"> |
||||||
|
<td>{{p.propertyName}}<span *ngIf="p.physicalUnit">({{p.physicalUnit}})</span></td> |
||||||
|
<td *ngFor="let o of p.data">{{o.propertyValue}}</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<p *ngIf="i.buildingCustomData.customProperties.length != 0 && (i.buildingCustomData.customProperties[0].name ||i.buildingCustomData.customProperties[0].value)">{{i.buildingBasicGroups.length + 1}}.自定义信息</p> |
||||||
|
<div *ngIf="i.buildingCustomData.customProperties.length != 0 && (i.buildingCustomData.customProperties[0].name ||i.buildingCustomData.customProperties[0].value)"> |
||||||
|
<table> |
||||||
|
<tr *ngFor="let c of i.buildingCustomData.customProperties"> |
||||||
|
<td>{{c.name}}</td> |
||||||
|
<td>{{c.value}}</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
|
||||||
|
table,table tr th, table tr td { border: 1px solid #EEF1F5; } |
||||||
|
table { text-align: center; border-collapse: collapse; padding:2px;} |
||||||
|
*{ |
||||||
|
-webkit-touch-callout: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
|
|
||||||
|
.box{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
font-family: Source Han Sans CN; |
||||||
|
color: #333333; |
||||||
|
padding: 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
//头部单位照片 |
||||||
|
.unitPhotographBox{ |
||||||
|
width: 100%; |
||||||
|
p{ |
||||||
|
height: 14px; |
||||||
|
font-size: 14px; |
||||||
|
font-family: Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 14px; |
||||||
|
color: #333333; |
||||||
|
opacity: 1; |
||||||
|
margin: 10px 0 ; |
||||||
|
} |
||||||
|
.imgbox{ |
||||||
|
width: 180px; |
||||||
|
height: 140px; |
||||||
|
img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
//单位信息 |
||||||
|
.unitInfoBox{ |
||||||
|
width: 100%; |
||||||
|
p{ |
||||||
|
height: 14px; |
||||||
|
font-size: 14px; |
||||||
|
font-family: Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 14px; |
||||||
|
color: #333333; |
||||||
|
opacity: 1; |
||||||
|
margin: 10px 0; |
||||||
|
} |
||||||
|
table{ |
||||||
|
width: 100%; |
||||||
|
tr{ |
||||||
|
height: 35px; |
||||||
|
td:nth-child(1){ |
||||||
|
width: 40%; |
||||||
|
} |
||||||
|
} |
||||||
|
tr:nth-child(odd){ |
||||||
|
background: #F2F9FF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
//建筑信息 |
||||||
|
.buildingsBox{ |
||||||
|
p{ |
||||||
|
margin: 10px 0; |
||||||
|
} |
||||||
|
table{ |
||||||
|
width: 100%; |
||||||
|
tr{ |
||||||
|
height: 35px; |
||||||
|
td:nth-child(1){ |
||||||
|
width: 40%; |
||||||
|
} |
||||||
|
} |
||||||
|
tr:nth-child(odd){ |
||||||
|
background: #F2F9FF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { BasicInfoComponent } from './basic-info.component'; |
||||||
|
|
||||||
|
describe('BasicInfoComponent', () => { |
||||||
|
let component: BasicInfoComponent; |
||||||
|
let fixture: ComponentFixture<BasicInfoComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ BasicInfoComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(BasicInfoComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,170 @@ |
|||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import Viewer from 'viewerjs'; |
||||||
|
class unitInfo { |
||||||
|
id: string; |
||||||
|
name: string; //单位信息名字
|
||||||
|
usci: string; //单位信用代码
|
||||||
|
contacts: string; //联系人
|
||||||
|
phone: string; //联系电话
|
||||||
|
address: string; //单位地址
|
||||||
|
imageUrl: string; //图片地址
|
||||||
|
location: string; //单位地理位置
|
||||||
|
modifiedTime: string; //信息修改时间
|
||||||
|
organizationId: string; //所属组织机构
|
||||||
|
organizationName: string; //组织机构名称
|
||||||
|
buildingTypes: [ |
||||||
|
{ |
||||||
|
id:string; |
||||||
|
name:string; |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-basic-info', |
||||||
|
templateUrl: './basic-info.component.html', |
||||||
|
styleUrls: ['./basic-info.component.scss'] |
||||||
|
}) |
||||||
|
export class BasicInfoComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private http: HttpClient) { } |
||||||
|
|
||||||
|
unitId:string;//单位相关数据
|
||||||
|
|
||||||
|
unitInfo:unitInfo = {
|
||||||
|
id: '', |
||||||
|
name: '', //单位信息名字
|
||||||
|
usci: '', //单位信用代码
|
||||||
|
contacts: '', //联系人
|
||||||
|
phone: '', //联系电话
|
||||||
|
address: '', //单位地址
|
||||||
|
imageUrl: '', //图片地址
|
||||||
|
location: '', //单位地理位置
|
||||||
|
modifiedTime: '', //信息修改时间
|
||||||
|
organizationId: '', //所属组织机构
|
||||||
|
organizationName: '', //组织机构名称
|
||||||
|
buildingTypes: [ |
||||||
|
{ |
||||||
|
id:'', |
||||||
|
name:'' |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
noImg:string = '../../../assets/images/noImg.png' |
||||||
|
gallery:any //Viewer实例
|
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.everyInin() |
||||||
|
} |
||||||
|
|
||||||
|
//每次初始化 加载 组件调用方法
|
||||||
|
everyInin () { |
||||||
|
this.unitId = sessionStorage.getItem('unitId') |
||||||
|
if (this.unitId) { |
||||||
|
this.getUnitInfo().then(()=>{ |
||||||
|
setTimeout(() => { |
||||||
|
this.gallery = new Viewer(document.getElementById('viewerjs'),{ url: 'data-original' }); |
||||||
|
},0); |
||||||
|
}); |
||||||
|
this.getAllBuildingsInfo() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//获得单位信息
|
||||||
|
async getUnitInfo(){ |
||||||
|
let result = await new Promise((resolve, reject) => { |
||||||
|
this.http.get(`/api/Companies/${this.unitId}`).subscribe((data:any)=>{ |
||||||
|
resolve('获取单位信息成功') |
||||||
|
this.unitInfo = data |
||||||
|
})
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
buildingsData:any |
||||||
|
//获得所有建筑信息
|
||||||
|
getAllBuildingsInfo(){ |
||||||
|
this.http.get("/api/Buildings",{ |
||||||
|
params:{ |
||||||
|
companyId:this.unitId |
||||||
|
} |
||||||
|
}).subscribe(async (data:any)=>{ |
||||||
|
this.buildingsData = data |
||||||
|
for (let i = 0, length = data.length; i < length; i++){ |
||||||
|
const result = await new Promise((resolve) =>{ |
||||||
|
this.http.get("/api/BuildingBasicInfos",{ // 循环请求当前单位建筑每一个建筑的信息保存到数组中
|
||||||
|
params:{ |
||||||
|
companyId :this.unitId, |
||||||
|
buildingId:data[i].id, |
||||||
|
buildingType:data[i].buildingTypes[0].id |
||||||
|
} |
||||||
|
}).subscribe((buildingsData:any)=>{ |
||||||
|
//获得当前建筑自定义信息并且添加到item自定义属性上
|
||||||
|
let _data = buildingsData |
||||||
|
_data[0].buildingCustomData = {} |
||||||
|
_data[0].buildingCustomData.customProperties = [] |
||||||
|
this.http.get("/api/BuildingCustomData",{params:{ |
||||||
|
buildingId:data[i].id |
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
_data[0].buildingCustomData = data |
||||||
|
if(data && data.customProperties.length != 0){ |
||||||
|
_data[0].isCustomData = true |
||||||
|
}else{ |
||||||
|
_data[0].isCustomData = false |
||||||
|
_data[0].buildingCustomData ={ |
||||||
|
id: "", |
||||||
|
customProperties: [ |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
value: "" |
||||||
|
} |
||||||
|
], |
||||||
|
buildingId: _data[0].buildingId |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
//如果是表格类需要处理数据
|
||||||
|
// console.log(i,buildingsData)
|
||||||
|
buildingsData[0].buildingBasicGroups.forEach(element => { |
||||||
|
if(element.type == 1){ |
||||||
|
|
||||||
|
var map = {}, |
||||||
|
dest:any = []; |
||||||
|
for(var i = 0; i < element.propertyInfos.length; i++){ |
||||||
|
var ai = element.propertyInfos[i]; |
||||||
|
if(!map[ai.propertyName]){ |
||||||
|
dest.push({ |
||||||
|
propertyName: ai.propertyName, |
||||||
|
data: [ai] |
||||||
|
}); |
||||||
|
map[ai.propertyName] = ai; |
||||||
|
}else{ |
||||||
|
for(var j = 0; j < dest.length; j++){ |
||||||
|
var dj = dest[j]; |
||||||
|
if(dj.propertyName == ai.propertyName){ |
||||||
|
dj.data.push(ai); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
//根据行数确定在循环数组中的index
|
||||||
|
dest.forEach(item => { |
||||||
|
item.data.sort(function(a,b){ |
||||||
|
return Number(a.tag) - Number(b.tag)
|
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
element.tabledata = dest |
||||||
|
} |
||||||
|
}); |
||||||
|
this.buildingsData[i].details = buildingsData |
||||||
|
resolve(i) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-26 09:03:44 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-27 14:31:48 |
||||||
|
--> |
||||||
|
<div class="content"> |
||||||
|
<div class="center" *ngFor="let item of CADList"> |
||||||
|
<div class="up"> |
||||||
|
<div class="left"> |
||||||
|
<span>{{item.name}}</span> |
||||||
|
</div> |
||||||
|
<div class="right" (click)="checkedCAD($event,item)"> |
||||||
|
<img src="../../../assets/images/download.png"> |
||||||
|
<span>下载</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="down"> |
||||||
|
<span>日期:{{item.creationTime|date:'yyyy-MM-dd'}}</span> |
||||||
|
<span style="margin-left: 5%;">大小：{{item.fileLength}}M</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
*{ |
||||||
|
-webkit-touch-callout: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
|
.content{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
overflow-x: hidden; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
font-size: 14px; |
||||||
|
.center{ |
||||||
|
width: 100%; |
||||||
|
border: 1px solid #EEF1F5; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.up{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
margin-top: 2%; |
||||||
|
span{ |
||||||
|
color: #0080FF; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.left{ |
||||||
|
width: 70%; |
||||||
|
span{ |
||||||
|
margin-left: 7.5%; |
||||||
|
margin-top: 5%; |
||||||
|
} |
||||||
|
} |
||||||
|
.right{ |
||||||
|
width: 30%; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.down{ |
||||||
|
margin: 2% 0 3% 5%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { CadDrawComponent } from './cad-draw.component'; |
||||||
|
|
||||||
|
describe('CadDrawComponent', () => { |
||||||
|
let component: CadDrawComponent; |
||||||
|
let fixture: ComponentFixture<CadDrawComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ CadDrawComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(CadDrawComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,308 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
||||||
|
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
import { ActivatedRoute } from '@angular/router'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-cad-draw', |
||||||
|
templateUrl: './cad-draw.component.html', |
||||||
|
styleUrls: ['./cad-draw.component.scss'] |
||||||
|
}) |
||||||
|
export class CadDrawComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private route:ActivatedRoute,) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.companyId = this.unitId |
||||||
|
this.getAllCAD() |
||||||
|
} |
||||||
|
unitId:any = sessionStorage.getItem('unitId') |
||||||
|
|
||||||
|
displayedColumns: string[] = ['checked', 'name', 'time', 'state','size']; |
||||||
|
|
||||||
|
companyId:any; //单位编号
|
||||||
|
CADList:any=[]; //所有CAD图
|
||||||
|
selectCAD:any = []; //选中的CAD图
|
||||||
|
|
||||||
|
//获取所有CAD图
|
||||||
|
getAllCAD () { |
||||||
|
let id = {companyId:this.unitId} |
||||||
|
this.http.get('/api/CadData',{params:id}).subscribe(data=>{ |
||||||
|
this.CADList = data |
||||||
|
this.selectCAD = [] |
||||||
|
this.CADList.forEach(element => { |
||||||
|
element.loading = false |
||||||
|
element.suffix = element.cadUrl.substring(element.cadUrl.lastIndexOf("."),element.cadUrl.length); //图名后缀
|
||||||
|
element.fileLength = (element.fileLength/1024/1024).toFixed(2)}); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//change CAD图checked
|
||||||
|
checkedCAD (e,element) { |
||||||
|
/* if (e.checked) { |
||||||
|
this.selectCAD.push(element) |
||||||
|
} else { |
||||||
|
this.selectCAD.splice(this.selectCAD.findIndex(item => item.id === element.id), 1)} */ |
||||||
|
this.selectCAD.splice(this.selectCAD.findIndex(item => item.id === element.id), 1) |
||||||
|
this.selectCAD.push(element) |
||||||
|
this.readFile() |
||||||
|
} |
||||||
|
|
||||||
|
//打开上传文件窗口
|
||||||
|
openReadFile() { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//打开编辑文件窗口
|
||||||
|
editFile () { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//删除CAD图
|
||||||
|
deleteCAD () { |
||||||
|
if (this.selectCAD.length) { |
||||||
|
let isDelete = confirm('您确定要删除吗') |
||||||
|
let arr = [] |
||||||
|
if (isDelete) { |
||||||
|
this.selectCAD.forEach( async (element,index) => { |
||||||
|
let result = await new Promise((result,reject)=>{ |
||||||
|
this.http.delete(`/api/CadData/${element.id}`).subscribe(data=>{result(index)}) |
||||||
|
this.http.delete(`/api/Objects/PlanPlatform/${element.cadUrl}`).subscribe(data=>{}) |
||||||
|
}) |
||||||
|
arr.push(result) |
||||||
|
if (arr.length == this.selectCAD.length) { |
||||||
|
this.getAllCAD() |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('删除CAD图纸成功','确定',config);} |
||||||
|
}); |
||||||
|
} |
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择CAD图纸','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//上传文件↓
|
||||||
|
file:any; //上传的文件
|
||||||
|
fileName:any; //上传文件name
|
||||||
|
uploadisLoading:boolean = false; //进度条loading加载
|
||||||
|
uploadProgress:number=0; //进度条进度
|
||||||
|
objectName:any; //上传对象名
|
||||||
|
uploadId:any; //上传分块上传事件编号
|
||||||
|
|
||||||
|
//上传文件
|
||||||
|
startUploading () { |
||||||
|
let file = this.file || null //获取上传的文件
|
||||||
|
let fileSize = file.size || null //上传文件的总大小
|
||||||
|
let shardSize = 5 * 1024 * 1024 //5MB一个分片
|
||||||
|
|
||||||
|
if (file && fileSize<=shardSize) { //上传文件<=5MB时
|
||||||
|
let formData = new FormData() |
||||||
|
formData.append("file",file) |
||||||
|
this.http.post(`/api/Objects/PlanPlatform/${this.companyId}/CAD`,formData).subscribe((data:any)=>{ |
||||||
|
this.objectName = data.objectName |
||||||
|
this.addCADData() |
||||||
|
}) |
||||||
|
} else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
|
||||||
|
let data = {filename: file.name} |
||||||
|
this.uploadisLoading = true |
||||||
|
this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.companyId}/CAD`,{},{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) |
||||||
|
this.uploadProgress = Number((i/allSlice).toFixed(2))*100 |
||||||
|
|
||||||
|
if (this.PartNumberETag.length === allSlice) { |
||||||
|
this.uploadProgress = 100 |
||||||
|
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.addCADData() |
||||||
|
this.uploadProgress = 0; |
||||||
|
this.uploadisLoading = false |
||||||
|
this.PartNumberETag =[] //清空保存返回的信息
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//取消分块上传
|
||||||
|
cancel () { |
||||||
|
this.http.delete(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}`).subscribe(data=>{ |
||||||
|
this.uploadProgress = 0; |
||||||
|
this.uploadisLoading= false |
||||||
|
this.PartNumberETag =[] //清空保存返回的信息
|
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('取消上传成功!','确定',config); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//上传成功创建CAD
|
||||||
|
addCADData () { |
||||||
|
let data = { |
||||||
|
name: this.fileName, |
||||||
|
cadUrl: this.objectName, |
||||||
|
fileLength: this.file.size, |
||||||
|
creationTime: new Date(), |
||||||
|
companyId: this.companyId |
||||||
|
} |
||||||
|
this.http.post('/api/CadData',data).subscribe(data=>{ |
||||||
|
this.getAllCAD() |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//下载↓
|
||||||
|
selectDownloadFile:any; //选择下载的文件
|
||||||
|
download:any; //下载文件元数据
|
||||||
|
downloadisLoading:boolean = false; //进度条loading加载
|
||||||
|
downloadProgress:number=0; //进度条进度
|
||||||
|
|
||||||
|
//读取下载文件信息
|
||||||
|
readFile () { |
||||||
|
if (this.selectCAD.length===1) { |
||||||
|
this.selectDownloadFile = this.selectCAD[0] |
||||||
|
this.http.get('/api/ObjectMetadata/PlanPlatform/'+this.selectDownloadFile.cadUrl).subscribe(data=>{ |
||||||
|
this.download = data |
||||||
|
this.downloadFile() |
||||||
|
}) |
||||||
|
} else if (this.selectCAD.length>1) { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('暂时不支持批量下载','确定',config) |
||||||
|
} else if (!this.selectCAD.length) { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择CAD图纸','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//初始化下载
|
||||||
|
downloadFile () { |
||||||
|
let file = this.download |
||||||
|
let fileSize = file.fileLength//下载文件的总大小
|
||||||
|
let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB
|
||||||
|
|
||||||
|
if (file && fileSize<=shardSize) { //<=10MB时直接下载
|
||||||
|
this.downloadisLoading = true |
||||||
|
this.setFileLoading() |
||||||
|
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{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.selectDownloadFile.name+this.selectDownloadFile.suffix); |
||||||
|
document.body.appendChild(link); |
||||||
|
link.click(); |
||||||
|
this.downloadisLoading = false |
||||||
|
this.setFileLoading() |
||||||
|
}) |
||||||
|
} else if (file && fileSize>shardSize) { //>10MB时分块下载
|
||||||
|
this.blockingDownload() //分段下载
|
||||||
|
this.downloadisLoading = true |
||||||
|
this.setFileLoading() |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//分段下载并合并
|
||||||
|
async blockingDownload () { |
||||||
|
let file = this.download |
||||||
|
let fileSize = file.fileLength //下载文件的总大小
|
||||||
|
let shardSize = 3 * 1024 * 1024 //3MB一个分片
|
||||||
|
let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
|
||||||
|
let allFile:any = [] //所有的file分段
|
||||||
|
|
||||||
|
for (let i=0;i<allSlice;i++) { |
||||||
|
let start = i * shardSize //每次下载文件开始位置
|
||||||
|
let end = Math.min(fileSize, start + shardSize-1); //每次下载文件结束为止
|
||||||
|
|
||||||
|
let result = await new Promise ((result,reject)=>{ |
||||||
|
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{ |
||||||
|
result(data) })
|
||||||
|
}) |
||||||
|
allFile.push(result) |
||||||
|
this.downloadProgress = Number((i/allSlice).toFixed(2))*100 |
||||||
|
|
||||||
|
if (allFile.length === allSlice) { //合并文件输出给浏览器
|
||||||
|
let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
|
||||||
|
let link = document.createElement("a"); |
||||||
|
link.style.display = "none"; |
||||||
|
link.href = url; |
||||||
|
link.setAttribute("download", this.selectDownloadFile.name+this.selectDownloadFile.suffix); |
||||||
|
document.body.appendChild(link); |
||||||
|
link.click(); |
||||||
|
this.downloadProgress = 0 |
||||||
|
this.downloadisLoading = false |
||||||
|
this.setFileLoading() |
||||||
|
} |
||||||
|
|
||||||
|
} //for循环
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//取消分块下载
|
||||||
|
cancelDowload () { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//封装函数设置当前文件loading状态
|
||||||
|
setFileLoading () { |
||||||
|
let id = this.selectDownloadFile.id |
||||||
|
this.CADList.forEach(element => { |
||||||
|
if (element.id === id) { element.loading = !element.loading } |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-23 09:28:54 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-27 16:17:53 |
||||||
|
--> |
||||||
|
<div class="content"> |
||||||
|
|
||||||
|
<div id="firefacilities" *ngFor="let item of companyBuiltInGrouping;let key = index" style="margin-top: 10px;"> |
||||||
|
<mat-accordion class="tableContent" > |
||||||
|
<mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
||||||
|
<mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead"> |
||||||
|
<mat-panel-title style="font-size: 14px;" > |
||||||
|
{{item.name}} |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header > |
||||||
|
<div class="column" *ngFor="let items of item.facilityItems"> |
||||||
|
<div class="up"> |
||||||
|
<div class="left"> |
||||||
|
<span style="margin-left: 25px;margin-top: 3%;white-space: nowrap;">项目：{{items.name}}</span> |
||||||
|
</div> |
||||||
|
<div class="centernum"> |
||||||
|
<span style="margin-left: 35px;">{{items.total ? items.total : '总数: 0'}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="down"> |
||||||
|
<span style="margin-left: 25px;margin-top: 3%;">主要情况：{{items.details}}</span> |
||||||
|
</div> |
||||||
|
<div class="imgdown"> |
||||||
|
<span style="margin-left: 25px;color: #0080FF;"><a style="color: #0080FF;" href="javascript:void(0)" (click)='previewImg(items)'>查看图片</a></span> |
||||||
|
<label style="float: right;margin-right: 10%;cursor:pointer" (click)='SwitchBoard(items)'><input style="margin-right: 5px;cursor:pointer" [(ngModel)]="items.expanded?down:open" readonly><img [src]="items.expanded?imgsrcdown:imgsrcopen" (click)='SwitchBoard(items)' ></label> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="overflowTable" *ngIf="items.expanded"> |
||||||
|
<div class="detailsTable"> |
||||||
|
<table> |
||||||
|
<tr *ngFor="let header of items.header"> |
||||||
|
<th >{{header}}</th> |
||||||
|
<td *ngFor="let body of items.body">{{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 *ngFor="let header of items.header"> |
||||||
|
<th >{{header}}</th> |
||||||
|
<td *ngFor="let body of items.body">{{body[header]? body[header] : '暂无数据'}}</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,222 @@ |
|||||||
|
*{ |
||||||
|
-webkit-touch-callout: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
//box-sizing: border-box; |
||||||
|
//padding: 10px; |
||||||
|
overflow-y: auto; |
||||||
|
.contentBox { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
margin: 0 auto; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
.tableContent{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
.panelhead{ |
||||||
|
//height: 24px; |
||||||
|
background-color: #F2F9FF; |
||||||
|
} |
||||||
|
.column{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
border-bottom: 8px solid #EEF1F5; |
||||||
|
.up{ |
||||||
|
width: 100%; |
||||||
|
margin-top: 3%; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
.left{ |
||||||
|
width: 40%; |
||||||
|
} |
||||||
|
.centernum{ |
||||||
|
//width: 25%; |
||||||
|
color: black; |
||||||
|
text-align: center; |
||||||
|
white-space: pre-line; |
||||||
|
max-height: 48px; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.down{ |
||||||
|
width: 100%; |
||||||
|
/* display: flex; |
||||||
|
justify-content: space-around; */ |
||||||
|
span{ |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
} |
||||||
|
.downtable{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.imgdown{ |
||||||
|
margin-top: 3%; |
||||||
|
span{ |
||||||
|
color: #0080FF; |
||||||
|
} |
||||||
|
input{ |
||||||
|
border:none; |
||||||
|
outline: none; |
||||||
|
text-align: right; |
||||||
|
color: #0080FF; |
||||||
|
} |
||||||
|
img{ |
||||||
|
height: 8px; |
||||||
|
width: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.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; |
||||||
|
} |
||||||
|
tr:nth-child(odd){ |
||||||
|
background: #F2F9FF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//滚动条样式 |
||||||
|
::-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,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { FireFacilitiesComponent } from './fire-facilities.component'; |
||||||
|
|
||||||
|
describe('FireFacilitiesComponent', () => { |
||||||
|
let component: FireFacilitiesComponent; |
||||||
|
let fixture: ComponentFixture<FireFacilitiesComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ FireFacilitiesComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(FireFacilitiesComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,529 @@ |
|||||||
|
/* |
||||||
|
* @Descripttion:
|
||||||
|
* @version:
|
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-23 09:28:54 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-27 16:25:30 |
||||||
|
*/ |
||||||
|
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-facilities', |
||||||
|
templateUrl: './fire-facilities.component.html', |
||||||
|
styleUrls: ['./fire-facilities.component.scss'] |
||||||
|
}) |
||||||
|
export class FireFacilitiesComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router:Router,private route:ActivatedRoute,public http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.getCompanyInformation() |
||||||
|
this.getAllBuilding() |
||||||
|
|
||||||
|
} |
||||||
|
unitId:any = sessionStorage.getItem('unitId') |
||||||
|
//定义属性数据
|
||||||
|
singleElection:Food[]=[ |
||||||
|
{value:'true', name: '有'}, |
||||||
|
{value:'false', name: '无'}] |
||||||
|
|
||||||
|
companyBuiltInGrouping:any = []; //单位消防设施内置分组
|
||||||
|
companyDetails:any = []; //单位详情
|
||||||
|
companyEachDetails:any = [] //单位每层详情
|
||||||
|
companyOptionalGrouping:any = []; //单位消防设施可选分组
|
||||||
|
open="详情" |
||||||
|
down="收起" |
||||||
|
imgsrcopen="../../../assets/images/routdown2.png" |
||||||
|
imgsrcdown="../../../assets/images/routup2.png" |
||||||
|
tableshow=true |
||||||
|
|
||||||
|
//获得单位基本信息
|
||||||
|
getCompanyInformation () { |
||||||
|
//let companyId = this.route.snapshot.queryParams.id
|
||||||
|
let companyId = this.unitId |
||||||
|
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}); |
||||||
|
}); |
||||||
|
if(sessionStorage.getItem("tabsindex") == "4"){ |
||||||
|
this.companyBuiltInGrouping = [this.companyBuiltInGrouping[1]] |
||||||
|
this.companyOptionalGrouping = [] |
||||||
|
} |
||||||
|
if(sessionStorage.getItem("tabsindex") == "5"){ |
||||||
|
this.companyBuiltInGrouping.splice(1,1) |
||||||
|
} |
||||||
|
}) //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.unitId |
||||||
|
this.http.get('/api/Buildings',{params:{ |
||||||
|
companyId:companyId |
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
this.allBuildingGrouping = data |
||||||
|
if (this.allBuildingGrouping.length) { this.getAllBuildingFacilities() } |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有建筑的消防设施
|
||||||
|
getAllBuildingFacilities () { |
||||||
|
let companyId = this.unitId |
||||||
|
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 }); |
||||||
|
}); |
||||||
|
|
||||||
|
if(sessionStorage.getItem("tabsindex") == "4"){ |
||||||
|
element.buildingFacilityGroups = [element.buildingFacilityGroups[1]] |
||||||
|
element.buildingOptionalGroups = [] |
||||||
|
} |
||||||
|
if(sessionStorage.getItem("tabsindex") == "5"){ |
||||||
|
element.buildingFacilityGroups.splice(1,1) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//保存建筑消防设施内置分组项
|
||||||
|
editBuildingGrouping (e,item) { |
||||||
|
let companyId = this.unitId |
||||||
|
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
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//保存建筑消防设施可选分组
|
||||||
|
editBuildingOptional (e,item) { |
||||||
|
let companyId = this.unitId |
||||||
|
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,90 @@ |
|||||||
|
/* |
||||||
|
* @Descripttion:
|
||||||
|
* @version:
|
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-23 09:46:16 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-23 09:53:45 |
||||||
|
*/ |
||||||
|
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-facilities.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.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,25 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-23 09:46:16 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-27 08:47:38 |
||||||
|
--> |
||||||
|
<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,174 @@ |
|||||||
|
.content { |
||||||
|
margin: 0 0 0 10px; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
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,64 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-20 15:45:31 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-25 18:41:18 |
||||||
|
--> |
||||||
|
<div class="content"> |
||||||
|
|
||||||
|
|
||||||
|
<div class="center" id="functionpartition"> |
||||||
|
<div style="margin: 10px 0;"> |
||||||
|
<mat-accordion class="tableContent"> |
||||||
|
<mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
||||||
|
<mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead"> |
||||||
|
<mat-panel-title style="font-size: 14px;"> |
||||||
|
单位功能分区 |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
|
||||||
|
<div class="column" *ngFor="let item of companyFunctionalZoning"> |
||||||
|
<div class="up"> |
||||||
|
<span style="color: #0080FF;">区域：{{item.region}}</span> |
||||||
|
</div> |
||||||
|
<div class="areacenter"> |
||||||
|
<span>面积：{{item.area}}</span> |
||||||
|
</div> |
||||||
|
<div class="down"> |
||||||
|
<span style="display: inline-block;">基本情况：{{item.details}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div style="margin-bottom: 10px;" *ngFor="let item of allBuildingFunctionalZoning;let key = index"> |
||||||
|
<mat-accordion class="tableContent"> |
||||||
|
<mat-expansion-panel > |
||||||
|
<mat-expansion-panel-header class="panelhead"> |
||||||
|
<mat-panel-title style="font-size: 14px;"> |
||||||
|
{{item.name}} |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
|
||||||
|
<div class="column" *ngFor="let item of companyFunctionalZoning"> |
||||||
|
<div class="up"> |
||||||
|
<span style="color: #0080FF;">区域：{{item.region}}</span> |
||||||
|
</div> |
||||||
|
<div class="areacenter"> |
||||||
|
<span>面积：{{item.area}}</span> |
||||||
|
</div> |
||||||
|
<div class="down"> |
||||||
|
<span style="display: inline-block;">基本情况：{{item.details}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
@ -0,0 +1,81 @@ |
|||||||
|
*{ |
||||||
|
-webkit-touch-callout: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
//padding: 10px 0 0 10px; |
||||||
|
display: flex; |
||||||
|
.column{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
border-bottom: 1px solid #EEF1F5; |
||||||
|
.up{ |
||||||
|
width: 100%; |
||||||
|
margin-top: 3%; |
||||||
|
} |
||||||
|
.areacenter{ |
||||||
|
margin-top: 1%; |
||||||
|
} |
||||||
|
.down{ |
||||||
|
margin-top: 1%; |
||||||
|
margin-bottom: 2%; |
||||||
|
} |
||||||
|
span{ |
||||||
|
margin-left: 8%; |
||||||
|
//@at-root: 5%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.center{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.tableContent { |
||||||
|
//margin-left: 10px; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
.panelhead{ |
||||||
|
height: 44px; |
||||||
|
background-color: #F2F9FF; |
||||||
|
} |
||||||
|
table { |
||||||
|
border:1px solid #0094ff; |
||||||
|
border-collapse:collapse; |
||||||
|
td,th{ |
||||||
|
border:1px solid #0094ff; |
||||||
|
} |
||||||
|
width: 90%; |
||||||
|
text-align: center; |
||||||
|
margin: 0 auto; |
||||||
|
.cdk-header-cell { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
textarea { |
||||||
|
border-radius: 5px; |
||||||
|
padding: 5px; |
||||||
|
width: 80%; |
||||||
|
height: 36px; |
||||||
|
resize: none; |
||||||
|
scrollbar-base-color:#0080FF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//icon统一样式 |
||||||
|
.mat-icon { |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { FunctionPartitionComponent } from './function-partition.component'; |
||||||
|
|
||||||
|
describe('FunctionPartitionComponent', () => { |
||||||
|
let component: FunctionPartitionComponent; |
||||||
|
let fixture: ComponentFixture<FunctionPartitionComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ FunctionPartitionComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(FunctionPartitionComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,219 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
||||||
|
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
import { Router,ActivatedRoute } from '@angular/router' |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-function-partition', |
||||||
|
templateUrl: './function-partition.component.html', |
||||||
|
styleUrls: ['./function-partition.component.scss'] |
||||||
|
}) |
||||||
|
export class FunctionPartitionComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router:Router,private route:ActivatedRoute,private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.companyId = this.unitId |
||||||
|
this.getAllCompany() |
||||||
|
this.getAllBuilding() |
||||||
|
} |
||||||
|
|
||||||
|
displayedColumns: string[] = ['checked', 'region', 'measure', 'situation']; |
||||||
|
unitId:any = sessionStorage.getItem('unitId') |
||||||
|
|
||||||
|
companyId:any; //单位编号
|
||||||
|
companyFunctionalZoning:any=[]; //所有单位功能分区属性
|
||||||
|
selectFunctionalZoning:any=[]; //选中的单位功能分区属性
|
||||||
|
|
||||||
|
//获得所有单位功能分区属性
|
||||||
|
getAllCompany () { |
||||||
|
let companyId = this.unitId |
||||||
|
this.http.get('/api/CompanyFunctionalDivisions',{params:{ |
||||||
|
companyId:companyId |
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
this.companyFunctionalZoning = data |
||||||
|
this.selectFunctionalZoning = [] |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//新建单位功能分区属性
|
||||||
|
addCompany () { |
||||||
|
let companyId = this.route.snapshot.queryParams.id |
||||||
|
let data = {companyId:companyId, region:'', area:0, details:''} |
||||||
|
this.companyFunctionalZoning.push(data) |
||||||
|
this.preservation() |
||||||
|
} |
||||||
|
|
||||||
|
//保存单位功能分区属性
|
||||||
|
preservation () { |
||||||
|
let companyId = this.unitId |
||||||
|
if (this.companyFunctionalZoning.length) { |
||||||
|
this.http.post('/api/CompanyFunctionalDivisions/Batch',this.companyFunctionalZoning,{params:{ |
||||||
|
companyId:companyId |
||||||
|
}}).subscribe(data=>{ |
||||||
|
this.getAllCompany() |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据更新成功','确定',config); |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//单位功能分区checked选择
|
||||||
|
changeCompany (ele,e) { |
||||||
|
if (e.checked) { |
||||||
|
this.selectFunctionalZoning.push(ele.id) |
||||||
|
} else { |
||||||
|
this.selectFunctionalZoning.splice(this.selectFunctionalZoning.findIndex(item => item === ele.id), 1) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//删除单位功能分区属性
|
||||||
|
delete () { |
||||||
|
let companyId = this.unitId |
||||||
|
if (this.selectFunctionalZoning.length) { |
||||||
|
let isDelete = confirm('您确定要删除吗') |
||||||
|
if (isDelete) { |
||||||
|
this.http.post('/api/CompanyFunctionalDivisions/Batch',this.companyFunctionalZoning,{params:{ |
||||||
|
companyId:companyId |
||||||
|
}}).subscribe(data=>{ |
||||||
|
const options = { |
||||||
|
headers: new HttpHeaders({'Content-Type': 'application/json',}), |
||||||
|
body:this.selectFunctionalZoning} |
||||||
|
this.http.delete(`/api/CompanyFunctionalDivisions/Batch`,options).subscribe(data=>{ |
||||||
|
this.getAllCompany() |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据更新成功','确定',config); |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} else if (!this.selectFunctionalZoning.length) { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择单位功能分区','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//建筑功能分区↓
|
||||||
|
allBuilding:any = []; //所有建筑
|
||||||
|
allBuildingFunctionalZoning:any = []; //所有建筑的功能分区
|
||||||
|
selectBuildingFunctionalZoning:any = []; //选中的建筑的功能分区
|
||||||
|
|
||||||
|
//获得所有建筑
|
||||||
|
getAllBuilding () { |
||||||
|
let companyId = this.unitId |
||||||
|
this.http.get(`/api/Buildings`,{params:{ |
||||||
|
companyId:companyId |
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
if (data.length) { |
||||||
|
this.allBuilding = data |
||||||
|
this.allBuilding.forEach(element => { //为每个建筑添加一个 功能分区对象
|
||||||
|
element.functionalZoning = null |
||||||
|
}); |
||||||
|
this.getAllBuildingFunctionalZoning() |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获得所有建筑的功能分区
|
||||||
|
getAllBuildingFunctionalZoning () { |
||||||
|
this.selectBuildingFunctionalZoning = [] |
||||||
|
this.allBuildingFunctionalZoning = [] |
||||||
|
this.allBuilding.forEach(element => { |
||||||
|
let data={buildingId: element.id} |
||||||
|
this.http.get(`/api/BuildingFunctionalDivisions`,{params:data}).subscribe((data:any)=>{ |
||||||
|
if (data.length) { |
||||||
|
element.functionalZoning = data |
||||||
|
this.selectBuildingFunctionalZoning.push([]) //拥有建筑功能分区的提前push空数组
|
||||||
|
this.allBuildingFunctionalZoning.push(element) } |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//封装函数刷新当前建筑功能分区
|
||||||
|
updateCurrent (e,index) { |
||||||
|
let data= {buildingId: e.id} |
||||||
|
this.http.get(`/api/BuildingFunctionalDivisions`,{params:data}).subscribe((data:any)=>{ |
||||||
|
this.selectBuildingFunctionalZoning[index] = [] |
||||||
|
this.allBuildingFunctionalZoning[index].functionalZoning = data |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('数据更新成功','确定',config); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//创建建筑功能分区
|
||||||
|
addPartition () { |
||||||
|
} |
||||||
|
|
||||||
|
//创建建筑功能分区属性
|
||||||
|
addBuilding (e,index) { |
||||||
|
let data = {buildingId:e.id, region:'', area:0, details:''} |
||||||
|
this.http.post('/api/BuildingFunctionalDivisions',data).subscribe(data=>{ |
||||||
|
this.preservationBuilding(e,index) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//保存建筑功能分区属性
|
||||||
|
preservationBuilding (e,index) { |
||||||
|
let data ={buildingId:e.id} |
||||||
|
this.http.post(`/api/BuildingFunctionalDivisions/Batch`,this.allBuildingFunctionalZoning[index].functionalZoning,{params:data}).subscribe(data=>{ |
||||||
|
this.updateCurrent(e,index) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//建筑功能分区checked选择
|
||||||
|
changeBuilding (ele,e,index) { |
||||||
|
if (e.checked) { |
||||||
|
this.selectBuildingFunctionalZoning[index].push(ele.id) |
||||||
|
} else { |
||||||
|
this.selectBuildingFunctionalZoning[index].splice(this.selectBuildingFunctionalZoning[index].findIndex(item => item === ele.id), 1) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//删除建筑功能分区
|
||||||
|
deleteBuilding (e,index) { |
||||||
|
if (this.selectBuildingFunctionalZoning[index].length) { |
||||||
|
let isDelete = confirm('您确定要删除吗') |
||||||
|
if (isDelete) { |
||||||
|
let data ={buildingId:e.id} |
||||||
|
this.http.post(`/api/BuildingFunctionalDivisions/Batch`,this.allBuildingFunctionalZoning[index].functionalZoning,{params:data}).subscribe(data=>{ |
||||||
|
const options = { |
||||||
|
headers: new HttpHeaders({'Content-Type': 'application/json',}), |
||||||
|
body:this.selectBuildingFunctionalZoning[index], |
||||||
|
params:{buildingId:e.id}} |
||||||
|
this.http.delete(`/api/BuildingFunctionalDivisions/Batch`,options).subscribe(data=>{ |
||||||
|
this.selectBuildingFunctionalZoning[index].forEach((element,newIndex) => { |
||||||
|
this.allBuildingFunctionalZoning[index].functionalZoning.splice(this.allBuildingFunctionalZoning[index].functionalZoning.findIndex(item=>item.id==element),1) |
||||||
|
if (newIndex==this.selectBuildingFunctionalZoning[index].length-1) { |
||||||
|
if (this.allBuildingFunctionalZoning[index].functionalZoning.length) { |
||||||
|
this.updateCurrent(e,index) |
||||||
|
} else { |
||||||
|
this.selectBuildingFunctionalZoning.splice(index,1) |
||||||
|
this.allBuildingFunctionalZoning.splice(index,1)} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} else if (!this.selectBuildingFunctionalZoning[index].length) { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择建筑功能分区','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
<div> |
||||||
|
<span mat-dialog-title>选择要下载的文件:</span> |
||||||
|
<!-- <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> --> |
||||||
|
|
||||||
|
<div class="fileDiv" *ngFor="let item of fileDatas;let key = index" style="height: 28px;line-height: 28px;position: relative;" (click)="addurl(item,key)"> |
||||||
|
<mat-icon style="color: #FFC122;">insert_drive_file</mat-icon> |
||||||
|
<span style="position: absolute;left: 30px; font-size: 14px;width: 215px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title={{item.fileName}}>{{item.fileName ? item.fileName : name }}</span> |
||||||
|
<span style="position: absolute;left: 260px;font-size: 14px;">文件大小：{{ item.filePige }} M</span> |
||||||
|
<mat-icon *ngIf="key == selectedFileIndex" style="color: #FFC122;" style="position: absolute;left: 243px;font-size: 16px;top: 6px;">check_circle</mat-icon> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="btn" style="margin-top: 30px;"> |
||||||
|
<button type="button" (click)="confirm()" class="savebtn" mat-raised-button color="primary" style="margin-right: 5px;">确定</button> |
||||||
|
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- </form> --> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
.fileDiv{ |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.fileDiv:hover{ |
||||||
|
background-color: #fafafa; |
||||||
|
} |
||||||
|
.btn{ |
||||||
|
text-align: center; |
||||||
|
button{ |
||||||
|
margin: 0 3px; |
||||||
|
} |
||||||
|
} |
||||||
@ -1,3 +1,204 @@ |
|||||||
<div id="map" class="mapbox"> |
|
||||||
|
|
||||||
|
<div class="content"> |
||||||
|
<div id="map"></div> |
||||||
|
<div id="container" style="height: 100%;"></div> |
||||||
|
<!-- 左上搜索框 --> |
||||||
|
<div class="searchInput"> |
||||||
|
<div style="height: 36px; overflow: hidden; position: relative;"> |
||||||
|
<input type="text" [(ngModel)]="searchText" placeholder="请输入地址"> |
||||||
|
<label class="clearIcon" title="清除" (click)='clear()' *ngIf="searchText || allCompany.length">×</label> |
||||||
|
<button (click)='search()'><mat-icon>search</mat-icon></button> |
||||||
|
</div> |
||||||
|
<div class="searchDataDiv"> |
||||||
|
<div class="searchCompany" *ngFor="let item of allCompany" (click)='selectCompany(item)'> |
||||||
|
<p class="overflowText" title="{{item.name}}">{{item.name?item.name : '暂无单位名称'}}</p> |
||||||
|
<p class="overflowText" title="{{item.address}}">{{item.address?item.address : '暂无单位地址'}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 左上搜索框 --> |
||||||
|
|
||||||
|
<!-- 导航路线 --> |
||||||
|
<div class="routeGIS" *ngIf="isShowRouteGIS"> |
||||||
|
<div class="routeHeader"> |
||||||
|
<label style="bottom: 8px; left: 38px;" class="routeGISPublicIcon" (click)='clearGISRoute()'>清除路线</label> |
||||||
|
<label style="bottom: 8px; left: 275px;" class="routeGISPublicIcon" (click)='queryGISRoute()'>查询</label> |
||||||
|
<label style="top: -3px; right: 7px; font-size: 24px;" class="routeGISPublicIcon" (click)='closeRouteGIS()' title="关闭">×</label> |
||||||
|
<div class="routeLeft" (click)='exchangeGISRoute()'><mat-icon>import_export</mat-icon></div> |
||||||
|
<div class="routeContent"> |
||||||
|
<div class="routeEveryRow"> |
||||||
|
<label class="routeText">起</label> |
||||||
|
<input type="text" list="start" [(ngModel)]="routeStart" (ngModelChange)="routeChange(0)"> |
||||||
|
<datalist id="start"> |
||||||
|
<option *ngFor="let item of routeStartList" value="{{item.district}} {{item.name}}"> |
||||||
|
</datalist> |
||||||
|
<label class="routeClear" *ngIf="routeStart" (click)='deleteSearchGIS(0)'>×</label> |
||||||
|
</div> |
||||||
|
<div class="routeEveryRow"> |
||||||
|
<label class="routeText">终</label> |
||||||
|
<input type="text" list="end" [(ngModel)]="routeEnd" (ngModelChange)="routeChange(1)"> |
||||||
|
<datalist id="end"> |
||||||
|
<option *ngFor="let item of routeEndList" value="{{item.district}} {{item.name}}"> |
||||||
|
</datalist> |
||||||
|
<label class="routeClear" *ngIf="routeEnd" (click)='deleteSearchGIS(1)'>×</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="routeCenter" *ngIf="routes.steps.length"> |
||||||
|
<div style="text-align: center;"> |
||||||
|
<button class="routeType" [ngClass]="{'selectRouteType': selectType}" (click)='toggleRoute(true)'>推荐方案</button> |
||||||
|
<button class="routeType" [ngClass]="{'selectRouteType': !selectType}" (click)='toggleRoute(false)'>躲避拥堵</button> |
||||||
|
</div> |
||||||
|
<div class="routeTypeExplain" style="text-align: center; font-weight: 550;"> |
||||||
|
<label>约{{ routes.time / 60 | number:'0.0-0' }}分钟</label> |
||||||
|
<label>{{ routes.distance / 1000 | number:'0.1-1' }}公里</label> |
||||||
|
</div> |
||||||
|
<div class="routeTypeExplain" style="color: rgb(176, 180, 184); margin-top: -10px;"> |
||||||
|
<label>途径</label> |
||||||
|
<span *ngFor="let item of routes.steps">{{item.road? item.road + '>' : null}}</span> |
||||||
|
</div> |
||||||
|
<div class="routeCenterTB" title="{{routeStart}}"> |
||||||
|
<p style="background-color: #0080FF;">起</p><label style="font-weight: 550;">{{routeStart}}</label> |
||||||
|
</div> |
||||||
|
<div class="routeCenterTB" *ngFor="let item of routes.steps" style="border-bottom: 1px solid rgb(223, 212, 212);" title="{{item.instruction}}"> |
||||||
|
<p class="orientation" *ngIf="item.orientation == '西'">←</p> |
||||||
|
<p class="orientation" *ngIf="item.orientation == '北'">↑</p> |
||||||
|
<p class="orientation" *ngIf="item.orientation == '东'">→</p> |
||||||
|
<p class="orientation" *ngIf="item.orientation == '南'">↓</p> |
||||||
|
<p class="orientation" *ngIf="item.orientation == '西北'">↖</p> |
||||||
|
<p class="orientation" *ngIf="item.orientation == '西南'">↙</p> |
||||||
|
<p class="orientation" *ngIf="item.orientation == '东北'">↗</p> |
||||||
|
<p class="orientation" *ngIf="item.orientation == '东南'">↘</p> |
||||||
|
<label>{{item.instruction}}</label> |
||||||
|
</div> |
||||||
|
<div class="routeCenterTB" title="{{routeEnd}}"> |
||||||
|
<p style="background-color: rgb(250, 21, 21);">终</p><label style="font-weight: 550;">{{routeEnd}}</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 导航路线 --> |
||||||
|
|
||||||
|
<!-- 左侧 --> |
||||||
|
<div class="leftDiv" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}"> |
||||||
|
<app-left-working (onCustomEvent)="closeDiv()" #appLeft></app-left-working> |
||||||
|
</div> |
||||||
|
<img *ngIf="showLeftDiv" class="leftHide publicButton" title="隐藏" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}" (click)='toggleLeft(false)' src="../../../assets//images/showhide.png" alt=""> |
||||||
|
<img class="leftShow publicButton" title="显示" *ngIf="!leftDivState && showLeftDiv" (click)='toggleLeft(true)' src="../../../assets//images/showhide.png" alt=""> |
||||||
|
<!-- 左侧 --> |
||||||
|
|
||||||
|
<!-- 右上角 --> |
||||||
|
<div class="rightTopBox"> |
||||||
|
|
||||||
|
<div class="topbox"> |
||||||
|
<div (click)="clickTitle(key)" *ngFor="let item of titleList;let key = index" class="titleItem" [ngClass]="{'selectedItem': key == selectedTitle}"> |
||||||
|
<img [src]="item.iconImg" alt=""> |
||||||
|
<span>{{item.name}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="contantbox"> |
||||||
|
<div *ngIf="selectedTitle == 0" class="keyUnitBox"> |
||||||
|
|
||||||
|
<form [formGroup]="keyUnitForm" class="inputList" (submit)='ketUnitSubmit(keyUnitForm.value)'> |
||||||
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
||||||
|
<mat-checkbox color="primary" formControlName="allSelectedUnit" (change)="selectedAllUnit($event)">全选</mat-checkbox> |
||||||
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
||||||
|
</div> |
||||||
|
<div class="inputItem"> |
||||||
|
<mat-checkbox *ngFor="let unit of units.controls;let i = index" color="primary" [formControl]="unit"> |
||||||
|
{{keyUnitList[i].name}} |
||||||
|
</mat-checkbox> |
||||||
|
</div> |
||||||
|
<div class="btnbox"> |
||||||
|
<div> |
||||||
|
<span>显示范围 : </span> |
||||||
|
<mat-form-field> |
||||||
|
<select matNativeControl formControlName="areaUnit" [(ngModel)]="unitAreaDefault"> |
||||||
|
<option value="0">当前视野范围</option> |
||||||
|
<option value="200">200米</option> |
||||||
|
<option value="500">500米</option> |
||||||
|
<option value="1000">1000米</option> |
||||||
|
<option value="1500">1500米</option> |
||||||
|
<option value="2000">2000米</option> |
||||||
|
<option value="2500">2500米</option> |
||||||
|
<option value="3000">3000米</option> |
||||||
|
<option value="4000">4000米</option> |
||||||
|
<option value="5000">5000米</option> |
||||||
|
</select> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="submit" id="submit">确定</button> |
||||||
|
<button class="cancel" type="button" (click)="resetUnit()">取消显示</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div *ngIf="selectedTitle == 1" class="waterBox"> |
||||||
|
<form [formGroup]="watertForm" class="inputList" (submit)='waterSubmit(watertForm.value)'> |
||||||
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
||||||
|
<mat-checkbox color="primary" formControlName="allSelectedWater" (change)="selectedAllWater($event)">全选</mat-checkbox> |
||||||
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
||||||
|
</div> |
||||||
|
<div class="inputItem"> |
||||||
|
<mat-checkbox *ngFor="let water of waters.controls;let i = index" color="primary" [formControl]="water"> |
||||||
|
{{waterList[i].name}} |
||||||
|
</mat-checkbox> |
||||||
|
</div> |
||||||
|
<div class="btnbox"> |
||||||
|
<div> |
||||||
|
<span>显示范围 : </span> |
||||||
|
<mat-form-field> |
||||||
|
<select matNativeControl formControlName="areaWater" [(ngModel)]="waterAreaDefault"> |
||||||
|
<option value="0">当前视野范围</option> |
||||||
|
<option value="200">200米</option> |
||||||
|
<option value="500">500米</option> |
||||||
|
<option value="1000">1000米</option> |
||||||
|
<option value="1500">1500米</option> |
||||||
|
<option value="2000">2000米</option> |
||||||
|
<option value="2500">2500米</option> |
||||||
|
<option value="3000">3000米</option> |
||||||
|
<option value="4000">4000米</option> |
||||||
|
<option value="5000">5000米</option> |
||||||
|
</select> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="submit" id="submit2">确定</button> |
||||||
|
<button class="cancel" type="button" (click)="resetWater()">取消显示</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div *ngIf="selectedTitle == 2" class="distanceBox"> |
||||||
|
<div> |
||||||
|
<input type="radio" name='func' [(ngModel)]="checkRadio" value='rule' (click)="measure('rule')" checked><span class="input-text" style="margin-right: 15px;"> 距离测量</span> |
||||||
|
<input type="radio" name='func' [(ngModel)]="checkRadio" value='measureArea' (click)="measure('measureArea')"><span class="input-text"> 面积测量</span> |
||||||
|
</div> |
||||||
|
<button class="clearbutton" (click)="clearnAll()">清除</button> |
||||||
|
</div> |
||||||
|
<div *ngIf="selectedTitle == 3" class="coverageBox"> |
||||||
|
<div class="topbox"> |
||||||
|
<span>图层</span> |
||||||
|
<div style="display: flex;align-items: center;"> |
||||||
|
<mat-slide-toggle [(ngModel)]="satelliteModel" (change)='satelliteChange($event)' color="primary" labelPosition='before' style="margin-right: 25px;">卫星图层</mat-slide-toggle> |
||||||
|
<mat-slide-toggle [(ngModel)]="loadModel" (change)='loadChange($event)' color="primary" labelPosition='before'>路网图层</mat-slide-toggle> |
||||||
|
<mat-icon (click)="closertdiv()" style="margin-left: 10px;">clear</mat-icon> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="contantbox"> |
||||||
|
<div [ngClass]="{'selectedPattern': mapPattern}"> |
||||||
|
<img src="../../../assets/images/2D.jpg" alt="" (click)="mapPatternChange('2D')"> |
||||||
|
<span> 2D </span> |
||||||
|
</div> |
||||||
|
<div [ngClass]="{'selectedPattern': !mapPattern}"> |
||||||
|
<img src="../../../assets/images/3D.jpg" alt="" (click)="mapPatternChange('3D')"> |
||||||
|
<span> 3D </span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 右上角 --> |
||||||
</div> |
</div> |
||||||
|
|||||||
@ -1,84 +1,366 @@ |
|||||||
.mapbox{ |
.content { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
|
min-width: 1024px; |
||||||
|
min-height: 768px; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 1px; |
||||||
|
position: relative; |
||||||
|
#map { width: 100%; height: 100%; } |
||||||
} |
} |
||||||
|
|
||||||
|
//左侧工作区 |
||||||
|
.leftDiv { |
||||||
|
width: 400px; |
||||||
|
height: 100%; |
||||||
|
background-color: #fff; |
||||||
|
overflow: hidden; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
z-index: 10; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 3px; |
||||||
|
} |
||||||
|
//左侧工作区 显隐图标 |
||||||
|
.publicButton { |
||||||
|
display: block; |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
color: #fff; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
margin-top: -15px; |
||||||
|
z-index: 11; |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
.leftHide { |
||||||
|
left: 400px; |
||||||
|
} |
||||||
|
.leftShow { |
||||||
|
left: 0px;; |
||||||
|
} |
||||||
|
.leftDivShow { |
||||||
|
margin-left: 0px; |
||||||
|
transition: margin-left 0.5s; |
||||||
|
} |
||||||
|
.leftDivHide { |
||||||
|
margin-left: -500px; |
||||||
|
transition: margin-left 0.5s; |
||||||
|
} |
||||||
|
|
||||||
|
//文本溢出 |
||||||
|
.overflowText { |
||||||
|
overflow: hidden; |
||||||
|
text-overflow:ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
.mat-icon, label, button, p, span {cursor:pointer;} |
||||||
|
//左上搜索 |
||||||
|
.searchInput { |
||||||
|
width: 340px; |
||||||
|
max-height: 500px; |
||||||
|
overflow: hidden; |
||||||
|
position: absolute; |
||||||
|
left: 30px; |
||||||
|
top: 15px; |
||||||
|
z-index: 5; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.clearIcon { |
||||||
|
position: absolute; |
||||||
|
color: rgb(73, 71, 71); |
||||||
|
top: 0px; |
||||||
|
right: 40px; |
||||||
|
width: 36px; |
||||||
|
height: 36px; |
||||||
|
display: inline-block; |
||||||
|
font-size: 24px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.searchDataDiv { |
||||||
|
background-color: #fff; |
||||||
|
flex: 1; |
||||||
|
overflow-y: auto; |
||||||
|
border-right: 1px solid rgb(228, 225, 225); |
||||||
|
box-shadow: inset 0px 0px 3px #bdb8b8; |
||||||
|
} |
||||||
|
input { |
||||||
|
width: 300px; |
||||||
|
height: 36px; |
||||||
|
outline: none; |
||||||
|
border-radius: 8px 0 0 8px; |
||||||
|
box-sizing: border-box; |
||||||
|
padding-left: 5px; |
||||||
|
border: 1px solid rgb(228, 225, 225); |
||||||
|
} |
||||||
|
button { |
||||||
|
width: 40px; |
||||||
|
height: 36px; |
||||||
|
border-radius: 0px 8px 8px 0; |
||||||
|
float: right; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
background-color: #0080FF; |
||||||
|
.mat-icon { |
||||||
|
font-size: 26px; |
||||||
|
vertical-align: bottom; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.searchCompany { |
||||||
|
width: 100%; |
||||||
|
height: 26px; |
||||||
|
margin: 3px 0; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-self: center; |
||||||
|
p { flex: 1; font-size: 14px; padding-left: 10px; } |
||||||
|
:last-child { color: #999; font-size: 10px; } |
||||||
|
} |
||||||
|
} |
||||||
|
.searchCompany:hover { background-color: rgb(228, 228, 228);cursor:pointer; } |
||||||
|
|
||||||
|
//左侧导航路线 |
||||||
|
.routeGIS { |
||||||
|
width: 340px; |
||||||
|
max-height: 700px; |
||||||
|
overflow: hidden; |
||||||
|
position: absolute; |
||||||
|
border-radius: 10px; |
||||||
|
background-color: #0080FF; |
||||||
|
left: 30px; |
||||||
|
top: 15px; |
||||||
|
z-index: 6; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.routeHeader { |
||||||
|
width: 100%; |
||||||
|
height: 130px; |
||||||
|
min-height: 130px; |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
.routeLeft { |
||||||
|
width: 26px; |
||||||
|
text-align: center; |
||||||
|
margin: 0 5px; |
||||||
|
box-sizing: border-box; |
||||||
|
.mat-icon { font-size: 24px; color: #fff; } |
||||||
|
} |
||||||
|
.routeContent { |
||||||
|
flex: 1; |
||||||
|
//起点终点 input |
||||||
|
.routeEveryRow { |
||||||
|
position: relative; |
||||||
|
height: 30px; |
||||||
|
margin: 3px 0; |
||||||
|
label { position: absolute; color: #fff; } |
||||||
|
.routeText { |
||||||
|
font-size: 14px; |
||||||
|
top: 5.5px; |
||||||
|
left: 5px; |
||||||
|
} |
||||||
|
.routeClear { |
||||||
|
top: 0px; |
||||||
|
right: 18px; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
input { |
||||||
|
width: 80%; |
||||||
|
padding-left: 25px; |
||||||
|
height: 30px; |
||||||
|
border-radius: 5px; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
color: #fff; |
||||||
|
background-color: #0874DE; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
//导航内容区 |
||||||
|
.routeCenter::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
|
.routeCenter { |
||||||
|
width: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
box-sizing: border-box; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 0 0 10px 10px; |
||||||
|
border: 1px solid rgb(201, 197, 197); |
||||||
|
>div { |
||||||
|
width: 100%; |
||||||
|
height: 30px; |
||||||
|
line-height: 30px; |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 5px 0; |
||||||
|
font-size: 12px; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow:ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} //div |
||||||
|
>div:not(:first-child){ padding: 0 10px; box-sizing: border-box; } |
||||||
|
.routeTypeExplain label { margin: 0 10px; } |
||||||
|
.routeCenterTB { |
||||||
|
p { display: inline-block; margin-right: 10px; width: 30px; height: 30px; border-radius: 50%; color: #fff; text-align: center; font-size: 14px; } |
||||||
|
.orientation { color: #0080FF; } |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.routeGISPublicIcon { position: absolute; color: #fff; font-size: 14px; } //导航 定位部分公共样式 |
||||||
|
//选择路线 方案 button |
||||||
|
.routeType { margin: 0 10px; outline: none; border: none; background-color: transparent; font-size: 14px; font-weight: 550; color: rgb(122, 116, 116); } |
||||||
|
.selectRouteType { color: #0080FF; } |
||||||
|
|
||||||
|
//右上角div |
||||||
|
.rightTopBox{ |
||||||
|
width: 480px; |
||||||
|
position: absolute; |
||||||
|
right: 30px; |
||||||
|
top: 15px; |
||||||
|
.topbox{ |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 6px; |
||||||
|
align-items: center; |
||||||
|
.titleItem{ |
||||||
|
cursor: pointer; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
color: #0080FF; |
||||||
|
height: 100%; |
||||||
|
img{ |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
.selectedItem{ |
||||||
|
border-bottom: 2px solid #0080FF; |
||||||
|
} |
||||||
|
} |
||||||
|
.contantbox{ |
||||||
|
width: 100%; |
||||||
|
background: #fff; |
||||||
|
margin-top: 3px; |
||||||
|
border-radius: 6px; |
||||||
|
.keyUnitBox,.waterBox,.coverageBox{ |
||||||
|
box-sizing: border-box; |
||||||
|
padding:8px 15px; |
||||||
|
// cursor: default; |
||||||
|
font-size: 14px; |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
.inputList{ |
||||||
|
.inputItem{ |
||||||
|
margin-top: 8px; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
mat-checkbox{ |
||||||
|
margin-right: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
.btnbox{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
button{ |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.submit{ |
||||||
|
width: 68px; |
||||||
|
height: 30px; |
||||||
|
text-align: center; |
||||||
|
border: 0; |
||||||
|
background: #0080FF; |
||||||
|
opacity: 1; |
||||||
|
border-radius: 4px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.cancel{ |
||||||
|
width: 96px; |
||||||
|
height: 30px; |
||||||
|
background: #EEF1F5; |
||||||
|
opacity: 1; |
||||||
|
border-radius: 4px; |
||||||
|
border: 0; |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.coverageBox{ |
||||||
|
|
||||||
|
.topbox{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.contantbox{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
div{ |
||||||
|
width: 140px; |
||||||
|
height: 100px; |
||||||
|
position: relative; |
||||||
|
margin-right: 16px; |
||||||
|
border: 2px solid #fff; |
||||||
|
box-sizing: border-box; |
||||||
|
img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
span{ |
||||||
|
position: absolute; |
||||||
|
right: 2px; |
||||||
|
bottom: 2px; |
||||||
|
display: inline-block; |
||||||
|
background-color: #0080FF; |
||||||
|
color: #fff; |
||||||
|
padding: 0 2px; |
||||||
|
} |
||||||
|
} |
||||||
|
.selectedPattern{ |
||||||
|
border: 4px solid #0080FF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//测距离 |
||||||
|
.distanceBox{ |
||||||
|
box-sizing: border-box; |
||||||
|
padding:8px 15px; |
||||||
|
display: flex; |
||||||
// .content-window-card { |
justify-content: center; |
||||||
// position: relative; |
align-items: center; |
||||||
// box-shadow: none; |
div{ |
||||||
// bottom: 0; |
display: flex; |
||||||
// left: 0; |
align-items: center; |
||||||
// width: auto; |
span{ |
||||||
// padding: 0; |
cursor: default; |
||||||
// } |
} |
||||||
|
} |
||||||
// .content-window-card p { |
.clearbutton{ |
||||||
// height: 20px; |
border: none; |
||||||
// } |
border-radius: 4px; |
||||||
|
background-color:#FF3636; |
||||||
// .custom-info { |
text-align: center; |
||||||
// border: solid 1px silver; |
padding: 8px 20px; |
||||||
// } |
margin-left: 20px; |
||||||
// div.info-top { |
margin-top: 5px; |
||||||
// position: relative; |
font-size: 14px; |
||||||
// background: none repeat scroll 0 0 #F9F9F9; |
color: #FFFFFF; |
||||||
// border-bottom: 1px solid #CCC; |
outline-color: #FFFFFF; |
||||||
// border-radius: 5px 5px 0 0; |
} |
||||||
// } |
} |
||||||
|
|
||||||
// div.info-top div { |
|
||||||
// display: inline-block; |
|
||||||
// color: #333333; |
|
||||||
// font-size: 14px; |
|
||||||
// font-weight: bold; |
|
||||||
// line-height: 31px; |
|
||||||
// padding: 0 10px; |
|
||||||
// } |
|
||||||
|
|
||||||
// div.info-top img { |
|
||||||
// position: absolute; |
|
||||||
// top: 10px; |
|
||||||
// right: 10px; |
|
||||||
// transition-duration: 0.25s; |
|
||||||
// } |
|
||||||
|
|
||||||
// div.info-top img:hover { |
|
||||||
// box-shadow: 0px 0px 5px #000; |
|
||||||
// } |
|
||||||
|
|
||||||
// div.info-middle { |
|
||||||
// font-size: 12px; |
|
||||||
// padding: 10px 6px; |
|
||||||
// line-height: 20px; |
|
||||||
// } |
|
||||||
|
|
||||||
// div.info-bottom { |
|
||||||
// height: 0px; |
|
||||||
// width: 100%; |
|
||||||
// clear: both; |
|
||||||
// text-align: center; |
|
||||||
// } |
|
||||||
|
|
||||||
// div.info-bottom img { |
|
||||||
// position: relative; |
|
||||||
// z-index: 104; |
|
||||||
// } |
|
||||||
|
|
||||||
// span { |
|
||||||
// margin-left: 5px; |
|
||||||
// font-size: 11px; |
|
||||||
// } |
|
||||||
|
|
||||||
// .info-middle img { |
|
||||||
// float: left; |
|
||||||
// margin-right: 6px; |
|
||||||
// } |
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,53 @@ |
|||||||
|
<div class="box"> |
||||||
|
<div class="title"> |
||||||
|
{{data.name}}预案 |
||||||
|
<span class="closeicon" (click)="closeDiv()"><mat-icon>clear</mat-icon></span> |
||||||
|
</div> |
||||||
|
<div class="contant"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="unitinfo"> |
||||||
|
<span>单位名称: {{data.name}}</span> |
||||||
|
<span>辖区中队: {{data.organizationName}}</span> |
||||||
|
<span>单位类型: {{data.buildingTypes[0].name}}</span> |
||||||
|
<span>单位地址: {{data.address}}</span> |
||||||
|
</div> |
||||||
|
<div class="btnbox"> |
||||||
|
<span class="btn" (click)="lookUnitDetails()">查看详情</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="tablebox"> |
||||||
|
<table> |
||||||
|
<tr> |
||||||
|
<td>预案名称</td> |
||||||
|
<td>添加人</td> |
||||||
|
<td>修改时间</td> |
||||||
|
<td>预案类型</td> |
||||||
|
<td>审核状态</td> |
||||||
|
<td>是否公开</td> |
||||||
|
<td>编制级别</td> |
||||||
|
<td>操作</td> |
||||||
|
</tr> |
||||||
|
<tr *ngFor="let item of allPlanComponents"> |
||||||
|
<td>{{item.name}}</td> |
||||||
|
<td>{{item.creatorName}}</td> |
||||||
|
<td>{{item.modifiedTime | date:'yyyy-MM-dd'}}</td> |
||||||
|
<td>{{item.planType | plantype}}</td> |
||||||
|
<td>{{item.auditStatus | auditsatus}}</td> |
||||||
|
<td>{{item.openRange}}</td> |
||||||
|
<td>{{item.planLevel | planlevel}}</td> |
||||||
|
<td> |
||||||
|
<span class="btn" (click)="lookPlan(item)">查看</span> |
||||||
|
<span class="btn" (click)="readFile(item)" [ngClass]="{'grey': item.planMode == '1' || item.planMode == '2' || item.planMode == '3'}">下载</span> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="progressBox" *ngIf="downloadisLoading"> |
||||||
|
|
||||||
|
<!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> --> |
||||||
|
<span title="{{downloadFileName}}" style="font-size: 12px;margin-left: 45px;" class="filename">{{downloadFileName}}</span> |
||||||
|
<span style="font-size: 12px;position: absolute;margin-left:14px;">下载中...</span> |
||||||
|
<mat-progress-bar mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,123 @@ |
|||||||
|
// table,table tr th, table tr td { border: 1px solid #EEF1F5; } |
||||||
|
table { text-align: center; border-collapse: collapse; padding:2px;} |
||||||
|
*{ |
||||||
|
-webkit-touch-callout: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
.box{ |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
cursor: default; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.title{ |
||||||
|
width: 100%; |
||||||
|
height: 48px; |
||||||
|
line-height: 48px; |
||||||
|
text-align: center; |
||||||
|
background: #0080FF; |
||||||
|
font-size: 18px; |
||||||
|
color: #ffffff; |
||||||
|
position: relative; |
||||||
|
.closeicon{ |
||||||
|
position: absolute; |
||||||
|
right: 12px; |
||||||
|
top: 4px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.contant{ |
||||||
|
flex: 1; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px 50px; |
||||||
|
border: 1px solid gray; |
||||||
|
.topbox{ |
||||||
|
display: flex; |
||||||
|
margin-bottom: 20px; |
||||||
|
.unitinfo{ |
||||||
|
width: 92%; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow:ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
span{ |
||||||
|
margin-right: 50px; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
.btnbox{ |
||||||
|
width: 8%; |
||||||
|
.btn{ |
||||||
|
color: #0080FF; |
||||||
|
font-size: 15px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
.tablebox{ |
||||||
|
table{ |
||||||
|
table-layout:fixed; |
||||||
|
width: 100%; |
||||||
|
font-size: 15px; |
||||||
|
tr{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
min-height: 36px; |
||||||
|
td{ |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
tr:nth-child(odd){ |
||||||
|
background: #F2F9FF; |
||||||
|
} |
||||||
|
.btn{ |
||||||
|
font-size: 15px; |
||||||
|
color: #0080FF; |
||||||
|
margin: 0 5px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.grey{ |
||||||
|
color: grey; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
//进度条 |
||||||
|
.progressBox{ |
||||||
|
line-height: 49px; |
||||||
|
height: 49px; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
display: inline-block; |
||||||
|
width: 100%; |
||||||
|
button{ |
||||||
|
float: right; |
||||||
|
} |
||||||
|
.progress{ |
||||||
|
display: inline-block; |
||||||
|
position: absolute; |
||||||
|
width: 500px; |
||||||
|
top: 23px; |
||||||
|
left: 220px; |
||||||
|
} |
||||||
|
.filename{ |
||||||
|
display: inline-block; |
||||||
|
width: 80px; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
<div class="shareBox"> |
||||||
|
<div class="title"> |
||||||
|
<span class="name">分享</span> |
||||||
|
<span class="close" (click)="closeDiv()"><mat-icon>clear</mat-icon></span> |
||||||
|
</div> |
||||||
|
<div class="selectTime"> |
||||||
|
<div class="divitembox"> |
||||||
|
<div class="divitem" [ngClass]="{'selectedtime': key == selectedTimeIndex}" (click)="selectedTime(key)" *ngFor="let item of selectetime;let key = index">{{item.name}}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="qrcodebox"> |
||||||
|
<p class="p1">{{data.buildingType}}</p> |
||||||
|
<p class="p2">{{data.address}}</p> |
||||||
|
<div class="qrcodeimg" id="qrcode"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="saveqrcode" (click)="downloadFile ()"> |
||||||
|
保存图片 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="urlbox"> |
||||||
|
<p> |
||||||
|
【安信科创】为您分享了<span style="color: #0080FF;">{{data.buildingType}}</span>的信息，您可复制下面的网址在浏览器中打开查看，该网址【今日有效】 |
||||||
|
</p> |
||||||
|
<div class="urldiv"> |
||||||
|
{{data.url}} |
||||||
|
</div> |
||||||
|
<div class="saveqrcode" (click)="copyUrl()"> |
||||||
|
复制链接 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,127 @@ |
|||||||
|
//头部title |
||||||
|
.title{ |
||||||
|
width: 100%; |
||||||
|
height: 42px; |
||||||
|
line-height: 42px; |
||||||
|
background: #0080FF; |
||||||
|
text-align: center; |
||||||
|
position: relative; |
||||||
|
.name{ |
||||||
|
font-size: 20px; |
||||||
|
font-family: Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
.close{ |
||||||
|
position: absolute; |
||||||
|
right: 12px; |
||||||
|
top: 6px; |
||||||
|
color: #fff; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.mat-dialog-container{ |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
//有效时间选择 |
||||||
|
.selectTime{ |
||||||
|
margin: 18px 0; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
.divitembox{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.divitem{ |
||||||
|
width: 100px; |
||||||
|
height: 36px; |
||||||
|
line-height: 36px; |
||||||
|
background: #EEF1F5; |
||||||
|
font-size: 16px; |
||||||
|
font-family: Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
color: #333333; |
||||||
|
opacity: 0.4; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.divitem:first-child{ |
||||||
|
border-radius: 4px 0px 0px 4px; |
||||||
|
} |
||||||
|
.divitem:last-child{ |
||||||
|
border-radius: 0px 4px 4px 0px; |
||||||
|
} |
||||||
|
.selectedtime{ |
||||||
|
background: #0080FF; |
||||||
|
opacity: 1; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
} |
||||||
|
//二维码区域 |
||||||
|
.qrcodebox{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.p1{ |
||||||
|
font-size: 16px; |
||||||
|
color: #0080FF; |
||||||
|
} |
||||||
|
.p2{ |
||||||
|
font-size: 14px; |
||||||
|
color: #333333; |
||||||
|
opacity: 0.4; |
||||||
|
margin: 5px 0 18px 0; |
||||||
|
} |
||||||
|
.qrcodeimg{ |
||||||
|
width: 200px; |
||||||
|
height: 200px; |
||||||
|
} |
||||||
|
.saveqrcode{ |
||||||
|
width: 96px; |
||||||
|
height: 30px; |
||||||
|
background: #0080FF; |
||||||
|
line-height: 30px; |
||||||
|
border-radius: 4px; |
||||||
|
margin: 18px 0; |
||||||
|
color: #FFFFFF; |
||||||
|
text-align: center; |
||||||
|
font-size: 14px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
//链接区域 |
||||||
|
.urlbox{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
p{ |
||||||
|
width: 500px; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.urldiv{ |
||||||
|
display: block; |
||||||
|
font-size: 10px; |
||||||
|
width: 500px; |
||||||
|
background: #EEF1F5; |
||||||
|
border-radius: 4px; |
||||||
|
padding: 3px; |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 15px 0; |
||||||
|
word-wrap: break-word; |
||||||
|
word-break: normal; |
||||||
|
white-space:normal |
||||||
|
} |
||||||
|
.saveqrcode{ |
||||||
|
width: 96px; |
||||||
|
height: 30px; |
||||||
|
background: #0080FF; |
||||||
|
line-height: 30px; |
||||||
|
border-radius: 4px; |
||||||
|
color: #FFFFFF; |
||||||
|
text-align: center; |
||||||
|
font-size: 14px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-24 10:57:16 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-25 17:32:17 |
||||||
|
--> |
||||||
|
<div class="content" id="keysite"> |
||||||
|
<div style="margin: 10px 0;"> |
||||||
|
<mat-accordion class="tableContent"> |
||||||
|
<mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
||||||
|
<mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead"> |
||||||
|
<mat-panel-title style="font-size: 14px;"> |
||||||
|
单位重点部位 |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header > |
||||||
|
<div class="colum" *ngFor="let element of allCompanyPosition"> |
||||||
|
<div class="up"> |
||||||
|
<div class="left" > |
||||||
|
<img [src]="element.imageUrls[0]" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='seeImg(element.imageUrls)'> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="rightone"> |
||||||
|
<span style="color: #0080FF;">{{element.name}}</span> |
||||||
|
</div> |
||||||
|
<div class="righttwo"> |
||||||
|
<span>所在地址：{{element.position}}</span> |
||||||
|
</div> |
||||||
|
<div class="righthree"> |
||||||
|
<span>建筑结构：{{element.structure}}</span> |
||||||
|
</div> |
||||||
|
<div class="rightfour"> |
||||||
|
<span>使用性质：{{element.nature}}</span> |
||||||
|
</div> |
||||||
|
<div class="rightfive"> |
||||||
|
<span>主要危险：{{element.hazards}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="down"> |
||||||
|
<textarea readonly [(ngModel)]="companyInput" ></textarea> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngFor="let item of allBuilding" style="margin-bottom: 10px;"> |
||||||
|
<mat-accordion class="tableContent" > |
||||||
|
<mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
||||||
|
<mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' class="panelhead"> |
||||||
|
<mat-panel-title style="font-size: 14px;"> |
||||||
|
{{item.name}} |
||||||
|
</mat-panel-title> |
||||||
|
<!-- <mat-icon>keyboard_arrow_down</mat-icon> --> |
||||||
|
</mat-expansion-panel-header > |
||||||
|
<div class="colum" *ngFor="let element of item.position"> |
||||||
|
<div class="up"> |
||||||
|
<div class="left" > |
||||||
|
<img [src]="element.imageUrls[0]" onerror="javascript:this.src='../../../assets/images/upload.png'" (click)='seeImg(element.imageUrls)'> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="rightone"> |
||||||
|
<span style="color: #0080FF;">{{element.name}}</span> |
||||||
|
</div> |
||||||
|
<div class="righttwo"> |
||||||
|
<span>所在地址：{{element.position}}</span> |
||||||
|
</div> |
||||||
|
<div class="righthree"> |
||||||
|
<span>建筑结构：{{element.structure}}</span> |
||||||
|
</div> |
||||||
|
<div class="rightfour"> |
||||||
|
<span>使用性质：{{element.nature}}</span> |
||||||
|
</div> |
||||||
|
<div class="rightfive"> |
||||||
|
<span>主要危险：{{element.hazards}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="down"> |
||||||
|
<textarea readonly [(ngModel)]="companyInput" ></textarea> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,139 @@ |
|||||||
|
*{ |
||||||
|
-webkit-touch-callout: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
//padding: 10px; |
||||||
|
overflow-y: auto; |
||||||
|
.contentBox{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
text-align: center; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.tableContent{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
.panelhead{ |
||||||
|
//height: 44px; |
||||||
|
background-color: #F2F9FF; |
||||||
|
} |
||||||
|
.colum{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.up{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
margin-top: 3%; |
||||||
|
.left{ |
||||||
|
width: 40%; |
||||||
|
height: 120px; |
||||||
|
|
||||||
|
//margin-left: 4%; |
||||||
|
img{ |
||||||
|
float: right; |
||||||
|
width: 140px; |
||||||
|
height: 120px; |
||||||
|
cursor: pointer; |
||||||
|
//padding-left: 7%; |
||||||
|
//margin-right: 3%; |
||||||
|
} |
||||||
|
} |
||||||
|
.right{ |
||||||
|
width: 60%; |
||||||
|
//margin-top: 4%; |
||||||
|
margin-left: 3%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.rightone{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.righttwo{ |
||||||
|
margin-top: 1%; |
||||||
|
} |
||||||
|
.righthree{ |
||||||
|
margin-top: 1%; |
||||||
|
} |
||||||
|
.rightfour{ |
||||||
|
margin-top: 1%; |
||||||
|
} |
||||||
|
.rightfive{ |
||||||
|
margin-top: 1%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.down{ |
||||||
|
width: 100%; |
||||||
|
height: 150px; |
||||||
|
margin-top: 5%; |
||||||
|
textarea{ |
||||||
|
width: 95%; |
||||||
|
height: 80%; |
||||||
|
margin: 3%; |
||||||
|
border: none; |
||||||
|
background-color: #EEF1F5; |
||||||
|
scrollbar-base-color:#0080FF; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
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,195 @@ |
|||||||
|
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() |
||||||
|
} |
||||||
|
unitId:any = sessionStorage.getItem('unitId') |
||||||
|
|
||||||
|
allCompanyPosition:any = []; //所有单位重点部位
|
||||||
|
companyTips:any; //所有单位重点提示
|
||||||
|
companyInput:any; //单位重点提示数据
|
||||||
|
allBuilding:any = []; //所有建筑 + 建筑重点部位 + 建筑重点提示
|
||||||
|
|
||||||
|
//获取单位重点部位
|
||||||
|
getCompanyPostion () { |
||||||
|
let id = {companyId:this.unitId} |
||||||
|
this.http.get('/api/CompanyImportantLocations',{params:id}).subscribe(data=>{ |
||||||
|
this.allCompanyPosition = data |
||||||
|
this.allCompanyPosition.forEach(element => { |
||||||
|
if(element.imageUrls[0]!=undefined){ |
||||||
|
element.imageUrls[0]+= '?x-oss-process=image/resize,m_fill,h_140,w_120' |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//获取单位重点提示
|
||||||
|
getCompanyTips () { |
||||||
|
let id = {companyId:this.unitId} |
||||||
|
this.http.get('/api/CompanyImportantTips',{params:id}).subscribe((data:any)=>{ |
||||||
|
if (data) { |
||||||
|
this.companyTips = data |
||||||
|
this.companyInput = data.details} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有建筑
|
||||||
|
getAllBuilding () { |
||||||
|
let id = {companyId:this.unitId} |
||||||
|
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 |
||||||
|
element.position.forEach(element => { |
||||||
|
if(element.imageUrls[0]!=undefined){ |
||||||
|
element.imageUrls[0]+= '?x-oss-process=image/resize,m_fill,h_140,w_120' |
||||||
|
} |
||||||
|
}); |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有建筑重点提示
|
||||||
|
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.unitId, |
||||||
|
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>0){ |
||||||
|
var index=e[0].lastIndexOf("\?"); |
||||||
|
if(index!=-1){ |
||||||
|
e[0]=e[0].substring(0,index) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
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); |
||||||
|
} |
||||||
|
this.getCompanyPostion() |
||||||
|
this.getAllBuildingPositon() |
||||||
|
} |
||||||
|
|
||||||
|
//封装方法获取更新当前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,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,71 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-25 15:44:29 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-26 16:33:40 |
||||||
|
--> |
||||||
|
<div class="center" id="gis"> |
||||||
|
|
||||||
|
<div class="title"> |
||||||
|
<p>{{selectCompany.name? selectCompany.name : '暂无单位名称'}}</p> |
||||||
|
<span (click)="closeDiv()">关闭</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<mat-tab-group style="flex: 1;overflow-y: auto;" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)"> |
||||||
|
|
||||||
|
<mat-tab label="基本信息"> |
||||||
|
<ng-template matTabContent> |
||||||
|
<app-basic-info #baseInfo></app-basic-info> |
||||||
|
</ng-template> |
||||||
|
</mat-tab> |
||||||
|
<mat-tab label="平面图"> |
||||||
|
<ng-template matTabContent> |
||||||
|
<app-plan-list></app-plan-list> |
||||||
|
</ng-template> |
||||||
|
</mat-tab> |
||||||
|
<mat-tab label="四周毗邻"> |
||||||
|
<ng-template matTabContent> |
||||||
|
<app-allaround></app-allaround> |
||||||
|
</ng-template> |
||||||
|
</mat-tab> |
||||||
|
<mat-tab label="消防设施"> |
||||||
|
<ng-template matTabContent> |
||||||
|
<app-fire-facilities></app-fire-facilities> |
||||||
|
</ng-template> |
||||||
|
</mat-tab> |
||||||
|
<mat-tab label="重点部位"> |
||||||
|
<ng-template matTabContent> |
||||||
|
<app-key-site-look></app-key-site-look> |
||||||
|
</ng-template> |
||||||
|
</mat-tab> |
||||||
|
<mat-tab label="功能分区"> |
||||||
|
<ng-template matTabContent> |
||||||
|
<app-function-partition></app-function-partition> |
||||||
|
</ng-template> |
||||||
|
</mat-tab> |
||||||
|
<mat-tab label="实景图"> |
||||||
|
<ng-template matTabContent> |
||||||
|
<app-realistic-picture-look></app-realistic-picture-look> |
||||||
|
</ng-template> |
||||||
|
</mat-tab> |
||||||
|
<mat-tab label="CAD"> |
||||||
|
<ng-template matTabContent> |
||||||
|
<app-cad-draw></app-cad-draw> |
||||||
|
</ng-template> |
||||||
|
</mat-tab> |
||||||
|
<!-- <mat-tab label="六熟悉"> |
||||||
|
<ng-template matTabContent> |
||||||
|
六熟悉 |
||||||
|
</ng-template> |
||||||
|
</mat-tab> |
||||||
|
<mat-tab label="实战演练"> |
||||||
|
<ng-template matTabContent> |
||||||
|
实战演练 |
||||||
|
</ng-template> |
||||||
|
</mat-tab> --> |
||||||
|
|
||||||
|
</mat-tab-group> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
.center { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.title{ |
||||||
|
height: 28px; |
||||||
|
line-height: 28px; |
||||||
|
position: relative; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 400; |
||||||
|
color: #0080FF; |
||||||
|
opacity: 1; |
||||||
|
p{ |
||||||
|
text-align: center; |
||||||
|
cursor: default;; |
||||||
|
} |
||||||
|
span{ |
||||||
|
position: absolute; |
||||||
|
right: 10px; |
||||||
|
top: 0; |
||||||
|
font-size: 14px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
span:hover{ |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -1,20 +1,20 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
import { GisLabelingComponent } from './gis-labeling.component'; |
import { LeftWorkingComponent } from './left-working.component'; |
||||||
|
|
||||||
describe('GisLabelingComponent', () => { |
describe('LeftWorkingComponent', () => { |
||||||
let component: GisLabelingComponent; |
let component: LeftWorkingComponent; |
||||||
let fixture: ComponentFixture<GisLabelingComponent>; |
let fixture: ComponentFixture<LeftWorkingComponent>; |
||||||
|
|
||||||
beforeEach(async(() => { |
beforeEach(async(() => { |
||||||
TestBed.configureTestingModule({ |
TestBed.configureTestingModule({ |
||||||
declarations: [ GisLabelingComponent ] |
declarations: [ LeftWorkingComponent ] |
||||||
}) |
}) |
||||||
.compileComponents(); |
.compileComponents(); |
||||||
})); |
})); |
||||||
|
|
||||||
beforeEach(() => { |
beforeEach(() => { |
||||||
fixture = TestBed.createComponent(GisLabelingComponent); |
fixture = TestBed.createComponent(LeftWorkingComponent); |
||||||
component = fixture.componentInstance; |
component = fixture.componentInstance; |
||||||
fixture.detectChanges(); |
fixture.detectChanges(); |
||||||
}); |
}); |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
<div style="width: 100%;height: 100%;"> |
||||||
|
<app-collection-tools-plan #plan></app-collection-tools-plan> |
||||||
|
</div> |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
<div class="planlist" id="planlist"> |
||||||
|
<div style="margin: 10px 0;"> |
||||||
|
<mat-accordion> |
||||||
|
<mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
||||||
|
<mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F2F9FF;"> |
||||||
|
<mat-panel-title> |
||||||
|
总平面图 |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
<div class="contant"> |
||||||
|
<div class="contantitem" *ngFor="let item of sitePlanItems"> |
||||||
|
<div> |
||||||
|
<img (click)="openPlan(item,-1)" [src]="item.imageUrl ? item.imageUrl+'?x-oss-process=image/resize,m_fill,h_110,w_110' : '../../../assets/images/noImg.png'" alt=""> |
||||||
|
</div> |
||||||
|
<p>{{item.name}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
<div *ngFor="let item of allBuildings;let key=index" style="margin-bottom: 10px;"> |
||||||
|
<mat-accordion > |
||||||
|
<mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> |
||||||
|
<mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F2F9FF;"> |
||||||
|
<mat-panel-title> |
||||||
|
{{item.name}} |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header> |
||||||
|
<ng-template matExpansionPanelContent> |
||||||
|
<div class="contant"> |
||||||
|
<div class="contantitem" *ngFor="let i of item.plandata"> |
||||||
|
<div> |
||||||
|
<img (click)="openPlan(i,key)" [src]="i.imageUrl ? i.imageUrl+'?x-oss-process=image/resize,m_fill,h_110,w_110' : '../../../assets/images/noImg.png'" alt=""> |
||||||
|
</div> |
||||||
|
<p>{{i.name}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ng-template> |
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
*{ |
||||||
|
-webkit-touch-callout: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
|
|
||||||
|
.planlist{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
.contant{ |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
.contantitem{ |
||||||
|
div{ |
||||||
|
width: 110px; |
||||||
|
height: 110px; |
||||||
|
img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
p{ |
||||||
|
text-align: center; |
||||||
|
font-size: 14px; |
||||||
|
margin: 2px 0; |
||||||
|
width: 110px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { PlanListComponent } from './plan-list.component'; |
||||||
|
|
||||||
|
describe('PlanListComponent', () => { |
||||||
|
let component: PlanListComponent; |
||||||
|
let fixture: ComponentFixture<PlanListComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ PlanListComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(PlanListComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { Component, Inject, OnInit, Renderer2, ViewChild } from '@angular/core'; |
||||||
|
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar } from '@angular/material/snack-bar'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-plan-list', |
||||||
|
templateUrl: './plan-list.component.html', |
||||||
|
styleUrls: ['./plan-list.component.scss'] |
||||||
|
}) |
||||||
|
export class PlanListComponent implements OnInit { |
||||||
|
constructor(private http: HttpClient,public snackBar: MatSnackBar,public dialog: MatDialog) { } |
||||||
|
|
||||||
|
//单位相关数据
|
||||||
|
unitId:any = sessionStorage.getItem('unitId') |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.getAllBuildings() |
||||||
|
this.getSitePlan() |
||||||
|
} |
||||||
|
|
||||||
|
//获得所有的建筑物
|
||||||
|
allBuildings:any |
||||||
|
getAllBuildings(){ |
||||||
|
this.http.get("/api/Buildings",{ |
||||||
|
params:{ |
||||||
|
companyId : this.unitId |
||||||
|
} |
||||||
|
}).subscribe((data:any)=>{ |
||||||
|
data.forEach((item,index) => { |
||||||
|
let params = { buildingId: item.id } |
||||||
|
item.plandata = [] |
||||||
|
this.http.get('/api/BuildingAreas',{params}).subscribe(data=>{ |
||||||
|
item.plandata = data |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.allBuildings = data |
||||||
|
}) |
||||||
|
} |
||||||
|
//获取总平面图
|
||||||
|
sitePlanItems:any |
||||||
|
getSitePlan () { |
||||||
|
let params = {companyId: this.unitId} |
||||||
|
this.http.get('/api/SitePlans',{params:params}).subscribe(data=>{ |
||||||
|
this.sitePlanItems = data |
||||||
|
}) |
||||||
|
} |
||||||
|
//打开采集工具
|
||||||
|
openPlan(item,index){ |
||||||
|
sessionStorage.setItem("gisplan",'look') |
||||||
|
sessionStorage.setItem("companyId",this.unitId) |
||||||
|
let data = {select: item, key: index, allBuildings: this.allBuildings} |
||||||
|
let dialogRef = this.dialog.open(OpenPlanToolDialog,{//调用open方法打开对话框并且携带参数过去
|
||||||
|
width: '1500px', |
||||||
|
height:'850px', |
||||||
|
id:'openPlanToolDialog', |
||||||
|
data |
||||||
|
}); |
||||||
|
dialogRef.afterClosed().subscribe( (data)=>{ } ); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//查看预案
|
||||||
|
@Component({ |
||||||
|
selector: 'lookPlan-dialog', |
||||||
|
templateUrl: './openPlanTool.html', |
||||||
|
styleUrls: ['./openPlanTool.scss'] |
||||||
|
}) |
||||||
|
export class OpenPlanToolDialog { |
||||||
|
|
||||||
|
constructor(public http: HttpClient,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<OpenPlanToolDialog>, |
||||||
|
@Inject(MAT_DIALOG_DATA) public data,private render2: Renderer2,public dialog: MatDialog) {} |
||||||
|
|
||||||
|
@ViewChild( 'plan',{static: false} ) plan:any //子组件
|
||||||
|
|
||||||
|
ngOnInit() { |
||||||
|
} |
||||||
|
|
||||||
|
ngAfterViewInit(): void { |
||||||
|
this.noticePlan() |
||||||
|
} |
||||||
|
|
||||||
|
//通知 子组件 传递参数
|
||||||
|
noticePlan () { |
||||||
|
let parameter = { //查询 节点 对应 建筑/楼层 index,id
|
||||||
|
buildingIndex: this.data.key, //总平面图/建筑 index
|
||||||
|
storeyId: this.data.select.id |
||||||
|
} |
||||||
|
this.http.get("/api/Buildings",{params:{companyId : sessionStorage.getItem('unitId')} }).subscribe((data:any)=>{ |
||||||
|
this.plan.allBuildings = data |
||||||
|
this.plan.seekPanelPoint(parameter) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
//关闭弹窗
|
||||||
|
closeDiv(){ |
||||||
|
this.dialogRef.close() |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -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,32 @@ |
|||||||
|
<!-- |
||||||
|
* @Descripttion: |
||||||
|
* @version: |
||||||
|
* @Author: sueRimn |
||||||
|
* @Date: 2020-11-25 09:03:26 |
||||||
|
* @LastEditors: sueRimn |
||||||
|
* @LastEditTime: 2020-11-27 16:19:50 |
||||||
|
--> |
||||||
|
<div class="content" id="realisticpicture"> |
||||||
|
|
||||||
|
<mat-accordion class="tableContent" > |
||||||
|
<mat-expansion-panel *ngFor="let item of allRealPicture,let key=index" (opened)="changeReal(item,key)"> |
||||||
|
<mat-expansion-panel-header class="panelhead" collapsedHeight ='40px' expandedHeight='40px'> |
||||||
|
<mat-panel-title style="font-size: 14px;" > |
||||||
|
{{item.name}} |
||||||
|
</mat-panel-title> |
||||||
|
</mat-expansion-panel-header > |
||||||
|
<div class="colum" > |
||||||
|
<div class="imghe" *ngFor="let items of allImages;let key = index"> |
||||||
|
<div *ngIf="allImages.length!=0"><img [src]="items.newImageUrl" (click)='operation(items,key)' [ngClass]="{'selectImg': items.checked}"></div> |
||||||
|
|
||||||
|
<label style="margin-left: 6%;"><input type="text" style="margin-left: 6px;" [(ngModel)]="items.nameStart" readonly></label> |
||||||
|
</div> |
||||||
|
<div class="zanwu" *ngIf="allImages.length==0"> |
||||||
|
<span>暂无数据</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</mat-expansion-panel> |
||||||
|
</mat-accordion> |
||||||
|
</div> |
||||||
@ -0,0 +1,229 @@ |
|||||||
|
*{ |
||||||
|
-webkit-touch-callout: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
scrollbar-width: none; /* Firefox */ |
||||||
|
} |
||||||
|
::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
|
.content { |
||||||
|
//margin: 0 0 0 10px; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
margin-top: 10px; |
||||||
|
.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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.tableContent{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
.panelhead{ |
||||||
|
height: 44px; |
||||||
|
background-color: #F2F9FF; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.colum{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
.zanwu{ |
||||||
|
width: 100%; |
||||||
|
height: 30px; |
||||||
|
margin-top: 10px; |
||||||
|
span{ |
||||||
|
height: 40px; |
||||||
|
margin-top: 15px; |
||||||
|
margin-left: 5%; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
.imghe{ |
||||||
|
width: 50%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
img{ |
||||||
|
width: 170px; |
||||||
|
height: 100px; |
||||||
|
margin-left: 5%; |
||||||
|
margin-top: 7%; |
||||||
|
} |
||||||
|
input{ |
||||||
|
width: 80%; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//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,417 @@ |
|||||||
|
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.unitId |
||||||
|
this.http.get('/api/RealityImageGroups',{params:{ |
||||||
|
companyId : companyId |
||||||
|
}}).subscribe((data:any)=>{ |
||||||
|
this.allRealPicture = data |
||||||
|
this.selectReal = data[0] |
||||||
|
this.getAllRealPicture() |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
unitId:any = sessionStorage.getItem('unitId') |
||||||
|
|
||||||
|
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.unitId |
||||||
|
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
|
||||||
|
// console.log(789,this.allImages)
|
||||||
|
this.length = data.totalCount |
||||||
|
this.pageSize = data.pageSize |
||||||
|
this.downloadList = [] |
||||||
|
//console.log(this.allImages)
|
||||||
|
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) { |
||||||
|
//this.allImages=[]
|
||||||
|
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.unitId |
||||||
|
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} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 308 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 569 B |
|
After Width: | Height: | Size: 306 B |
|
After Width: | Height: | Size: 190 B |
|
After Width: | Height: | Size: 942 B |
|
After Width: | Height: | Size: 508 B |
|
After Width: | Height: | Size: 409 B |
|
After Width: | Height: | Size: 233 B |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 315 B |
|
After Width: | Height: | Size: 402 B |
|
After Width: | Height: | Size: 255 B |
|
After Width: | Height: | Size: 55 B |
|
After Width: | Height: | Size: 143 B |
|
After Width: | Height: | Size: 191 B |
|
After Width: | Height: | Size: 144 B |
|
After Width: | Height: | Size: 196 B |
|
After Width: | Height: | Size: 331 B |
|
After Width: | Height: | Size: 596 B |
|
After Width: | Height: | Size: 284 B |
|
After Width: | Height: | Size: 392 B |
|
After Width: | Height: | Size: 782 B |
|
After Width: | Height: | Size: 791 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 739 B |
|
After Width: | Height: | Size: 904 B |
|
After Width: | Height: | Size: 812 B |
|
After Width: | Height: | Size: 799 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 754 B |
|
After Width: | Height: | Size: 885 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue