Browse Source

[完善]gis打开平面图宽高自适应,总平面图样式完善,gis平面图添加标点功能

zhuzhou
邵佳豪 4 years ago
parent
commit
c32ea806b0
  1. 4
      src/app/gis-management/allaround/allaround.component.html
  2. 2
      src/app/gis-management/allaround/allaround.component.ts
  3. 30
      src/app/gis-management/plan-list/openPlanTool.scss
  4. 7
      src/app/gis-management/plan-list/plan-list.component.ts
  5. 37
      src/app/pipes/boolean.pipe.ts
  6. 89
      src/app/plan-audit/wait-examineer/wait-examineer.component.html
  7. 14
      src/app/plan-audit/wait-examineer/wait-examineer.component.scss
  8. 40
      src/app/plan-audit/wait-examineer/wait-examineer.component.ts
  9. 103
      src/app/plan-management/plan-management.module.ts
  10. 67
      src/app/ui/collection-tools-plan/collection-tools.component.html
  11. 1
      src/app/ui/collection-tools-plan/collection-tools.component.scss
  12. 193
      src/app/ui/collection-tools-plan/collection-tools.component.ts
  13. 1
      src/main.ts
  14. 34
      src/styles.scss

4
src/app/gis-management/allaround/allaround.component.html

@ -46,7 +46,7 @@
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
</div> </div>
<div *ngFor="let item of AllBuilding" style="margin-bottom: 10px;"> <!-- <div *ngFor="let item of AllBuilding" style="margin-bottom: 10px;">
<mat-accordion class="tableContent" > <mat-accordion class="tableContent" >
<mat-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> <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-expansion-panel-header class="panelhead" collapsedHeight ='40px' expandedHeight='40px' class="panelhead">
@ -86,6 +86,6 @@
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
</div> </div> -->
</div> </div>

2
src/app/gis-management/allaround/allaround.component.ts

@ -26,7 +26,7 @@ export class AllaroundComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.getAllCompany() this.getAllCompany()
this.getAllBuilding() // this.getAllBuilding()
} }
AllAdjoining:any = []; //所有单位毗邻 AllAdjoining:any = []; //所有单位毗邻

30
src/app/gis-management/plan-list/openPlanTool.scss

@ -1,16 +1,16 @@
.divbox{ .divbox {
width: 1500px; width: 100%;
height:850px height: 100%;
}
@media screen and (max-width:1400px){
.divbox{
width: 950px;
height: 618px;
}
}
@media screen and (min-width:1400px) and (max-width:1600px){
.divbox{
width: 1100px;
height: 660px;
}
} }
// @media screen and (max-width:1400px){
// .divbox{
// width: 100%;
// height: 618px;
// }
// }
// @media screen and (min-width:1400px) and (max-width:1600px){
// .divbox{
// width: 100%;
// height: 660px;
// }
// }

7
src/app/gis-management/plan-list/plan-list.component.ts

@ -50,9 +50,14 @@ export class PlanListComponent implements OnInit {
sessionStorage.setItem("gisplan",'look') sessionStorage.setItem("gisplan",'look')
sessionStorage.setItem("companyId",this.unitId) sessionStorage.setItem("companyId",this.unitId)
let data = {select: item, key: index, allBuildings: this.allBuildings} let data = {select: item, key: index, allBuildings: this.allBuildings}
let width = Math.round(document.body.clientWidth * 0.8) + 'px'
let height = Math.round(document.body.clientHeight * 0.9) + 'px'
// console.log('宽度',width)
let dialogRef = this.dialog.open(OpenPlanToolDialog,{//调用open方法打开对话框并且携带参数过去 let dialogRef = this.dialog.open(OpenPlanToolDialog,{//调用open方法打开对话框并且携带参数过去
id:'openPlanToolDialog', id:'openPlanToolDialog',
data data,
width:width,
height:height
}); });
dialogRef.afterClosed().subscribe( (data)=>{ } ); dialogRef.afterClosed().subscribe( (data)=>{ } );
} }

37
src/app/pipes/boolean.pipe.ts

@ -1,60 +1,61 @@
import { Pipe, PipeTransform } from '@angular/core'; import { Pipe, PipeTransform } from '@angular/core';
import { isno , PlanTypeEnum , AuditStatusEnum , PlanLevelEnum} from '../interface' import { isno, PlanTypeEnum, AuditStatusEnum, PlanLevelEnum } from '../interface'
@Pipe({name: 'isno'}) @Pipe({ name: 'isno' })
export class IsnoPipe implements PipeTransform { export class IsnoPipe implements PipeTransform {
transform(value: boolean): string { transform(value: boolean): string {
if(value){ if (value) {
var x = 0 var x = 0
}else{ } else {
x=1 x = 1
} }
return isno[x] return isno[x]
} }
} }
@Pipe({name: 'plantype'}) @Pipe({ name: 'plantype' })
export class PlanType implements PipeTransform { export class PlanType implements PipeTransform {
transform(value: number): string { transform(value: number): string {
return PlanTypeEnum[value] return PlanTypeEnum[value]
} }
} }
@Pipe({name: 'auditsatus'}) @Pipe({ name: 'auditsatus' })
export class AuditSatus implements PipeTransform { export class AuditSatus implements PipeTransform {
transform(value: number): string { transform(value: number): string {
return AuditStatusEnum[value] return AuditStatusEnum[value]
} }
} }
@Pipe({name: 'planlevel'}) @Pipe({ name: 'planlevel' })
export class PlanLevel implements PipeTransform { export class PlanLevel implements PipeTransform {
transform(value: number): string { transform(value: number): string {
return PlanLevelEnum[value] return PlanLevelEnum[value]
} }
} }
@Pipe({name: 'state'}) @Pipe({ name: 'state' })
export class state implements PipeTransform { export class state implements PipeTransform {
transform(value: number): string { transform(value: number): string {
if(value == 3){ if (value == 3) {
return '维护中' return '维护中'
}else if(value == 4){ } else if (value == 4) {
return '维护通过审核' return '维护通过审核'
}else if(value == 5){ } else if (value == 5) {
return '维护驳回审核' return '维护驳回审核'
}else{ } else {
return '未维护' return '未维护'
} }
} }
} }
@Pipe({name: 'differentContentTitle'}) @Pipe({ name: 'differentContentTitle' })
export class differentContentTitle implements PipeTransform { export class differentContentTitle implements PipeTransform {
transform(value: string): string { transform(value: string): string {
console.log(666,typeof(value)) if (typeof (value) == 'boolean' && value) {
if(typeof(value) == 'boolean' && value){
return '是' return '是'
}else if(typeof(value) == 'boolean' && !value){ } else if (typeof (value) == 'boolean' && !value) {
return '否' return '否'
}else{ } else if (!value) {
return '空'
} else {
return value return value
} }

89
src/app/plan-audit/wait-examineer/wait-examineer.component.html

@ -97,11 +97,11 @@
<button mat-raised-button style="color: #FFFFFF;background-color: #38D984;float: right;" <button mat-raised-button style="color: #FFFFFF;background-color: #38D984;float: right;"
(click)='agree()'>同意</button> (click)='agree()'>同意</button>
</div> </div>
<!-- <div class="rightheadone" style="display: block;"> <div class="rightheadone" style="display: block;">
<button mat-raised-button color="primary" (click)="buttonChange()">{{isallDate?'显示变更数据':'显示完整数据'}} </button> <button mat-raised-button color="primary" (click)="buttonChange()">{{isallDate?'显示变更数据':'显示完整数据'}} </button>
<button mat-raised-button *ngIf="isallDate" style="background-color: #FFCC00; color: #FFFFFF;" <!-- <button mat-raised-button *ngIf="isallDate" style="background-color: #FFCC00; color: #FFFFFF;"
(click)="preview()"><img src="../../../assets/images/change.png" style="margin-bottom: 2px;"> 预览得分</button> (click)="preview()"><img src="../../../assets/images/change.png" style="margin-bottom: 2px;"> 预览得分</button> -->
</div> --> </div>
</div> </div>
<!-- 数据变更div --> <!-- 数据变更div -->
@ -109,7 +109,7 @@
<div *ngIf="showtype == 3" id="firefacilities" style="margin: 10px;"> <div *ngIf="showtype == 3" id="firefacilities" style="margin: 10px;">
<mat-accordion class="tableContent" multi> <mat-accordion class="tableContent" multi>
<!-- 基本信息 --> <!-- 基本信息 -->
<mat-expansion-panel *ngIf="this.differentContentOfUnitInfo[0].childrens.length != 0" expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> <mat-expansion-panel *ngIf="this.differentContentOfUnitInfo[0].childrens.length != 0" expanded>
<mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead" <mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead"
style="background-color: #2196F3;"> style="background-color: #2196F3;">
<mat-panel-title style="font-size: 16px;color: #FFFFFF;"> <mat-panel-title style="font-size: 16px;color: #FFFFFF;">
@ -118,7 +118,7 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="accordingin"> <div class="accordingin">
<mat-accordion> <mat-accordion>
<mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> <mat-expansion-panel expanded hideToggle>
<mat-expansion-panel-header collapsedHeight='30px' expandedHeight='30px' class="panelhead"> <mat-expansion-panel-header collapsedHeight='30px' expandedHeight='30px' class="panelhead">
<mat-panel-title style="font-size: 16px;color:#2196F3;"> <mat-panel-title style="font-size: 16px;color:#2196F3;">
<mat-icon style="font-size: 18px;width: 18px;height: 18px;">border_color</mat-icon> <mat-icon style="font-size: 18px;width: 18px;height: 18px;">border_color</mat-icon>
@ -131,9 +131,9 @@
<ng-container *ngIf="i.propertyName == 'imageUrl'; else elseTemplate"> <ng-container *ngIf="i.propertyName == 'imageUrl'; else elseTemplate">
<td> <td>
<span class="spantext" style="vertical-align: top;"></span> <span class="spantext" style="vertical-align: top;"></span>
<img class="spantext" style="width: 150px;height: 105px;" [src]="i.oldValue" alt=""> <img (click)="lookImg(i.oldValue)" class="spantext" style="width: 150px;height: 105px;" [src]="i.oldValue" alt="">
<span class="spantext" style="vertical-align: top;">变更为</span> <span class="spantext" style="vertical-align: top;">变更为</span>
<img class="spantext" style="width: 150px;height: 105px;" [src]="i.newValue" alt=""> <img (click)="lookImg(i.newValue)" class="spantext" style="width: 150px;height: 105px;" [src]="i.newValue" alt="">
</td> </td>
</ng-container> </ng-container>
<ng-template #elseTemplate> <ng-template #elseTemplate>
@ -151,7 +151,7 @@
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>
<!-- 建筑信息 --> <!-- 建筑信息 -->
<mat-expansion-panel *ngIf="this.differentContentOfBuildingsInfo.childrens.length != 0" expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> <mat-expansion-panel *ngIf="this.differentContentOfBuildingsInfo.childrens.length != 0" expanded>
<mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead" <mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead"
style="background-color: #2196F3;"> style="background-color: #2196F3;">
<mat-panel-title style="font-size: 16px;color: #FFFFFF;"> <mat-panel-title style="font-size: 16px;color: #FFFFFF;">
@ -160,11 +160,15 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="accordingin"> <div class="accordingin">
<mat-accordion *ngFor="let item of this.differentContentOfBuildingsInfo.childrens"> <mat-accordion *ngFor="let item of this.differentContentOfBuildingsInfo.childrens">
<mat-expansion-panel *ngIf="item.childrens.length != 0" expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> <mat-expansion-panel expanded hideToggle>
<mat-expansion-panel-header collapsedHeight='30px' expandedHeight='30px' class="panelhead"> <mat-expansion-panel-header collapsedHeight='30px' expandedHeight='30px' class="panelhead">
<mat-panel-title style="font-size: 16px;color:#2196F3;"> <mat-panel-title style="font-size: 16px;color:#2196F3;">
<mat-icon style="font-size: 18px;width: 18px;height: 18px;">border_color</mat-icon> <mat-icon style="font-size: 18px;width: 18px;height: 18px;">border_color</mat-icon>
<span>{{item.propertyName}}</span> <span>{{item.propertyName}}
-<span *ngIf="item.operation == 1">修改</span>
<span *ngIf="item.operation == 0">新增</span>
<span *ngIf="item.operation == 2">删除</span>
</span>
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<table> <table>
@ -183,7 +187,7 @@
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>
<!-- 功能分区 --> <!-- 功能分区 -->
<mat-expansion-panel *ngIf="this.differentContentOfFunction.length != 0" expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> <mat-expansion-panel *ngIf="this.differentContentOfFunction.length != 0" expanded>
<mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead" <mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead"
style="background-color: #2196F3;"> style="background-color: #2196F3;">
<mat-panel-title style="font-size: 16px;color: #FFFFFF;"> <mat-panel-title style="font-size: 16px;color: #FFFFFF;">
@ -191,8 +195,8 @@
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="accordingin"> <div class="accordingin">
<mat-accordion *ngFor="let item of this.differentContentOfFunction"> <mat-accordion *ngFor="let item of this.differentContentOfFunction" >
<mat-expansion-panel *ngIf="item.childrens.length != 0" expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;"> <mat-expansion-panel expanded hideToggle>
<mat-expansion-panel-header collapsedHeight='30px' expandedHeight='30px' class="panelhead"> <mat-expansion-panel-header collapsedHeight='30px' expandedHeight='30px' class="panelhead">
<mat-panel-title style="font-size: 16px;color:#2196F3;"> <mat-panel-title style="font-size: 16px;color:#2196F3;">
<mat-icon style="font-size: 18px;width: 18px;height: 18px;">border_color</mat-icon> <mat-icon style="font-size: 18px;width: 18px;height: 18px;">border_color</mat-icon>
@ -215,6 +219,59 @@
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>
<!-- 实景图 --> <!-- 实景图 -->
<mat-expansion-panel *ngIf="this.differentContentOfPicture[0].childrens.length != 0" expanded>
<mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead"
style="background-color: #2196F3;">
<mat-panel-title style="font-size: 16px;color: #FFFFFF;">
实景图
</mat-panel-title>
</mat-expansion-panel-header>
<div class="accordingin">
<mat-accordion *ngFor="let item of this.differentContentOfPicture[0].childrens">
<mat-expansion-panel expanded hideToggle>
<mat-expansion-panel-header collapsedHeight='30px' expandedHeight='30px' class="panelhead">
<mat-panel-title style="font-size: 16px;color:#2196F3;">
<mat-icon style="font-size: 18px;width: 18px;height: 18px;">border_color</mat-icon>
<!-- 文件夹名字 -->
<span *ngIf="item.operation == 1">修改</span>
<span *ngIf="item.operation == 0">新增</span>
<span *ngIf="item.operation == 2">删除</span>
文件夹
<span>{{- item.propertyName}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<!-- 新增文件夹 -->
<table *ngIf="item.operation == 0" class="addFiles">
<tr>
<th>新增图片</th>
<td>
<img (click)="lookImg(i.imageUrl)" *ngFor="let i of item.newValue" [src]="'/api/Objects/PlanPlatform/'+i.imageUrl" alt="">
</td>
</tr>
</table>
<!-- 修改文件夹内容 -->
<table *ngIf="item.operation == 1" class="addFiles">
<tr *ngFor="let i of item.childrens[0].childrens">
<th *ngIf="i.operation == '0'">新增图片</th>
<th *ngIf="i.operation == '1'">修改图片名称</th>
<th *ngIf="i.operation == '2'">删除图片</th>
<td *ngIf="i.operation != '1'">
<img (click)="lookImg(i.newValue)" [src]="'/api/Objects/PlanPlatform/'+i.newValue" alt="">
</td>
<td *ngIf="i.operation == '1'">
<span class="spantext"></span>
<span class="spantext buleColor">{{i.childrens[0].oldValue}}</span>
<span class="spantext">变更为</span>
<span class="spantext buleColor">{{i.childrens[0].newValue}}</span>
</td>
</tr>
</table>
</mat-expansion-panel>
</mat-accordion>
</div>
</mat-expansion-panel>
</mat-accordion> </mat-accordion>
</div> </div>
</div> </div>
@ -322,3 +379,7 @@
<div class="bar" id="indexbar"></div> <div class="bar" id="indexbar"></div>
<div class="zhu" id="zhu"></div> <div class="zhu" id="zhu"></div>
</div> </div>
<div id="viewerjs">
</div>

14
src/app/plan-audit/wait-examineer/wait-examineer.component.scss

@ -2,6 +2,9 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
img{
cursor: pointer;
}
.boxleft { .boxleft {
height: 100%; height: 100%;
width: 45%; width: 45%;
@ -287,6 +290,17 @@ td {
} }
} }
} }
.addFiles{
tr{
td{
img{
width: 150px;
height: 105px;
margin-right: 6px;
}
}
}
}
.onebuilding { .onebuilding {
display: flex; display: flex;
margin: 5px 0; margin: 5px 0;

40
src/app/plan-audit/wait-examineer/wait-examineer.component.ts

@ -13,9 +13,12 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial
import { HttpClient } from '@angular/common/http' import { HttpClient } from '@angular/common/http'
declare var CryptoJS declare var CryptoJS
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { Viewer } from 'photo-sphere-viewer'; import { Viewer as photoViewer } from 'photo-sphere-viewer';
import Viewer from 'viewerjs';
declare var echarts: any; declare var echarts: any;
@Component({ @Component({
selector: 'app-wait-examineer', selector: 'app-wait-examineer',
templateUrl: './wait-examineer.component.html', templateUrl: './wait-examineer.component.html',
@ -130,7 +133,25 @@ export class WaitExamineerComponent implements OnInit {
this.getAlltabledate() this.getAlltabledate()
} }
lookImg(imgUrl){
console.log(imgUrl)
let dom = document.getElementById(`viewerjs`)
let pObjs = dom.childNodes;
let node = document.createElement("img")
node.style.display = "none";
node.src = "/api/Objects/PlanPlatform/" + imgUrl;
node.id = 'imgxxx'
dom.appendChild(node)
setTimeout(() => {
let viewer = new Viewer(document.getElementById(`viewerjs`), {
hidden:()=>{
dom.removeChild(pObjs[0]);
viewer.destroy();
}
});
node.click();
}, 0);
}
//radio点击事件 //radio点击事件
viewer//全景图对象 viewer//全景图对象
waterData: any//需要传递给子组件的水源信息 waterData: any//需要传递给子组件的水源信息
@ -146,20 +167,21 @@ export class WaitExamineerComponent implements OnInit {
differentContentOfPicture: any//当前单位变更数据 之 实景图 differentContentOfPicture: any//当前单位变更数据 之 实景图
radioClick(e, item) { radioClick(e, item) {
this.selectedItem = item this.selectedItem = item
// console.log('当前选择的单位',this.selectedItem)
// console.log('当前选择的信息',JSON.parse(this.selectedItem.differentContent) ) // console.log('当前选择的信息',JSON.parse(this.selectedItem.differentContent) )
if(item.contentType == 11){
let differentContent = JSON.parse(this.selectedItem.differentContent) let differentContent = JSON.parse(this.selectedItem.differentContent)
// 单位信息 // 单位信息
this.differentContentOfUnitInfo = differentContent.filter(item => item.propertyName == 'basicInfo') this.differentContentOfUnitInfo = differentContent.filter(item => item.propertyName == 'basicInfo')
// 实景图 // 实景图
this.differentContentOfPicture = differentContent.filter(item => item.propertyName == 'realityImageGroups') this.differentContentOfPicture = differentContent.filter(item => item.propertyName == 'realityImageGroups')
//建筑信息 //建筑信息
this.differentContentOfBuildingsInfo = JSON.parse(JSON.stringify(differentContent.filter(item => item.propertyName == 'buildings')[0])) this.differentContentOfBuildingsInfo = JSON.parse(JSON.stringify(differentContent.filter(item => item.propertyName == 'buildings')[0]))
this.differentContentOfBuildingsInfo.childrens.forEach(element => { this.differentContentOfBuildingsInfo.childrens.forEach(element => {
element.childrens = element.childrens.filter(item => item.isObj == false) element.childrens = element.childrens.filter(item => item.isObj == false)
}); });
console.log('当前选择的单位的实景图',this.differentContentOfBuildingsInfo)
//功能分区 //功能分区
let differentContentOfFunction = JSON.parse(JSON.stringify(differentContent.filter(item => item.propertyName == 'buildings')[0])) let differentContentOfFunction = JSON.parse(JSON.stringify(differentContent.filter(item => item.propertyName == 'buildings')[0]))
this.differentContentOfFunction = [] this.differentContentOfFunction = []
@ -171,7 +193,11 @@ export class WaitExamineerComponent implements OnInit {
} }
}); });
}); });
console.log('功能分区', this.differentContentOfFunction)
}
// console.log('功能分区', this.differentContentOfFunction)
@ -236,7 +262,7 @@ export class WaitExamineerComponent implements OnInit {
obj.innerHTML = '' obj.innerHTML = ''
} }
window.setTimeout(() => { window.setTimeout(() => {
this.viewer = new Viewer({ this.viewer = new photoViewer({
container: document.querySelector('#viewer'), container: document.querySelector('#viewer'),
panorama: '/api/Objects/PlanPlatform/' + this.fetchUrl, panorama: '/api/Objects/PlanPlatform/' + this.fetchUrl,

103
src/app/plan-management/plan-management.module.ts

@ -2,76 +2,75 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { PlanManagementRoutingModule } from './plan-management-routing.module'; import { PlanManagementRoutingModule } from './plan-management-routing.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import {A11yModule} from '@angular/cdk/a11y'; import { A11yModule } from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop'; import { DragDropModule } from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal'; import { PortalModule } from '@angular/cdk/portal';
import {ScrollingModule} from '@angular/cdk/scrolling'; import { ScrollingModule } from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper'; import { CdkStepperModule } from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table'; import { CdkTableModule } from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree'; import { CdkTreeModule } from '@angular/cdk/tree';
import {MatAutocompleteModule} from '@angular/material/autocomplete'; import { MatAutocompleteModule } from '@angular/material/autocomplete';
import {MatBadgeModule} from '@angular/material/badge'; import { MatBadgeModule } from '@angular/material/badge';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet'; import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import {MatButtonModule} from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle'; import { MatButtonToggleModule } from '@angular/material/button-toggle';
import {MatCardModule} from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import {MatChipsModule} from '@angular/material/chips'; import { MatChipsModule } from '@angular/material/chips';
import {MatStepperModule} from '@angular/material/stepper'; import { MatStepperModule } from '@angular/material/stepper';
import {MatDatepickerModule} from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker';
import {MatDialogModule} from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
import {MatDividerModule} from '@angular/material/divider'; import { MatDividerModule } from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion'; import { MatExpansionModule } from '@angular/material/expansion';
import {MatGridListModule} from '@angular/material/grid-list'; import { MatGridListModule } from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import {MatListModule} from '@angular/material/list'; import { MatListModule } from '@angular/material/list';
import {MatMenuModule} from '@angular/material/menu'; import { MatMenuModule } from '@angular/material/menu';
import {MatNativeDateModule, MatRippleModule} from '@angular/material/core'; import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import {MatPaginatorModule} from '@angular/material/paginator'; import { MatPaginatorModule } from '@angular/material/paginator';
import {MatProgressBarModule} from '@angular/material/progress-bar'; import { MatProgressBarModule } from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio'; import { MatRadioModule } from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav'; import { MatSidenavModule } from '@angular/material/sidenav';
import {MatSliderModule} from '@angular/material/slider'; import { MatSliderModule } from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import {MatSnackBarModule} from '@angular/material/snack-bar'; import { MatSnackBarModule } from '@angular/material/snack-bar';
import {MatSortModule} from '@angular/material/sort'; import { MatSortModule } from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table'; import { MatTableModule } from '@angular/material/table';
import {MatTabsModule} from '@angular/material/tabs'; import { MatTabsModule } from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar'; import { MatToolbarModule } from '@angular/material/toolbar';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import {MatTreeModule} from '@angular/material/tree'; import { MatTreeModule } from '@angular/material/tree';
import { EntryPlanComponent } from './entry-plan/entry-plan.component'; import { EntryPlanComponent } from './entry-plan/entry-plan.component';
import { PassPlanComponent, UnitInfo } from './pass-plan/pass-plan.component'; import { PassPlanComponent, UnitInfo } from './pass-plan/pass-plan.component';
import { OpenPlanComponent } from './open-plan/open-plan.component'; import { OpenPlanComponent } from './open-plan/open-plan.component';
import { EntryPlanLookComponent, AddPlanone, DownloadFile, AuditResult, ChangeName } from './entry-plan-look/entry-plan-look.component'; import { EntryPlanLookComponent, AddPlanone, DownloadFile, AuditResult, ChangeName, ImgDetails } from './entry-plan-look/entry-plan-look.component';
import { PlanType, AuditSatus, PlanLevel, state } from '../pipes/boolean.pipe'; import { PlanType, AuditSatus, PlanLevel, state } from '../pipes/boolean.pipe';
import { WebLookComponent } from './web-look/web-look.component'; import { WebLookComponent } from './web-look/web-look.component';
import { OnetwoEntryPlanComponent } from './onetwo-entry-plan/onetwo-entry-plan.component'; import { OnetwoEntryPlanComponent } from './onetwo-entry-plan/onetwo-entry-plan.component';
import { newunitComponent} from './onetwo-entry-plan/onetwo-entry-plan.component'; import { newunitComponent } from './onetwo-entry-plan/onetwo-entry-plan.component';
import { MeetPlanComponent } from './meet-plan/meet-plan.component'; import { MeetPlanComponent } from './meet-plan/meet-plan.component';
import { newunitMeet }from './meet-plan/meet-plan.component'; import { newunitMeet } from './meet-plan/meet-plan.component';
import { TypePlanComponent } from './type-plan/type-plan.component'; import { TypePlanComponent } from './type-plan/type-plan.component';
import { newunitType }from './type-plan/type-plan.component'; import { newunitType } from './type-plan/type-plan.component';
import { PsViewer } from './entry-plan-look/entry-plan-look.component' import { PsViewer } from './entry-plan-look/entry-plan-look.component'
import { onetwoAuditResult } from './onetwo-entry-plan/onetwo-entry-plan.component'; import { onetwoAuditResult } from './onetwo-entry-plan/onetwo-entry-plan.component';
import { meetAuditResult }from './meet-plan/meet-plan.component'; import { meetAuditResult } from './meet-plan/meet-plan.component';
import { typeAuditResult } from './type-plan/type-plan.component'; import { typeAuditResult } from './type-plan/type-plan.component';
import { MaintainUpComponent } from './maintain-up/maintain-up.component' import { MaintainUpComponent } from './maintain-up/maintain-up.component'
import { GkPsViewer } from './pass-plan/pass-plan.component' import { GkPsViewer } from './pass-plan/pass-plan.component'
import { GkhtmlPsViewer }from './open-plan/open-plan.component'; import { GkhtmlPsViewer } from './open-plan/open-plan.component';
import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component' import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component'
import { ImgDetails } from './entry-plan-look/entry-plan-look.component'
@NgModule({ @NgModule({
declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent,AddPlanone,PlanType,AuditSatus,PlanLevel,DownloadFile,AuditResult,ChangeName, declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent, AddPlanone, PlanType, AuditSatus, PlanLevel, DownloadFile, AuditResult, ChangeName,
WebLookComponent, OnetwoEntryPlanComponent,newunitComponent, MeetPlanComponent,newunitMeet, TypePlanComponent,newunitType,PsViewer,onetwoAuditResult,meetAuditResult, WebLookComponent, OnetwoEntryPlanComponent, newunitComponent, MeetPlanComponent, newunitMeet, TypePlanComponent, newunitType, PsViewer, onetwoAuditResult, meetAuditResult,
typeAuditResult, MaintainUpComponent,GkPsViewer,GkhtmlPsViewer,UnitInfo, ReinforcePlanComponent, state,ImgDetails], typeAuditResult, MaintainUpComponent, GkPsViewer, GkhtmlPsViewer, UnitInfo, ReinforcePlanComponent, state, ImgDetails],
imports: [ imports: [
CommonModule, CommonModule,
PlanManagementRoutingModule, PlanManagementRoutingModule,
@ -120,6 +119,6 @@ import { ImgDetails } from './entry-plan-look/entry-plan-look.component'
MatTooltipModule, MatTooltipModule,
MatTreeModule MatTreeModule
], ],
exports:[PlanType, AuditSatus, PlanLevel, state] exports: [PlanType, AuditSatus, PlanLevel, state]
}) })
export class PlanManagementModule { } export class PlanManagementModule { }

67
src/app/ui/collection-tools-plan/collection-tools.component.html

@ -7,7 +7,10 @@
<button mat-button (click)="toggle2()"> <button mat-button (click)="toggle2()">
<mat-icon style="vertical-align: middle; color: #279FFF;">list</mat-icon> <mat-icon style="vertical-align: middle; color: #279FFF;">list</mat-icon>
</button> </button>
<span [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()">
基本信息名称
<mat-icon>visibility</mat-icon>
</span>
<span class="marginLeftRight"> <span class="marginLeftRight">
<mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选 <mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选
</span> </span>
@ -52,7 +55,7 @@
<!-- H5Canvas --> <!-- H5Canvas -->
<app-working-area *ngIf="!isGis" #canvas [init]='this'></app-working-area> <app-working-area *ngIf="!isGis" #canvas [init]='this'></app-working-area>
<!-- gis --> <!-- gis -->
<div *ngIf="isGis" id="container" style="width: 100%;height: 100%;"></div> <div *ngIf="isGis" id="planContainer" style="width: 100%;height: 100%;"></div>
<!-- H5Canvas --> <!-- H5Canvas -->
<div id="leftDiv" (mousewheel)="$event.stopPropagation()" class='functionalDomainLeft publicCss' <div id="leftDiv" (mousewheel)="$event.stopPropagation()" class='functionalDomainLeft publicCss'
@ -81,8 +84,8 @@
<img src="../../../assets/images/force.png" *ngIf="item.force && item.force==2"> <img src="../../../assets/images/force.png" *ngIf="item.force && item.force==2">
<img src="../../../assets/images/noForce.png" *ngIf="item.force && item.force==1"> <img src="../../../assets/images/noForce.png" *ngIf="item.force && item.force==1">
</a> </a>
<a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern && pattern && !item.isGis" <a href="javascript:;" class="a-upload"
title="替换底图"> *ngIf="selectSitePlanIndex==key && isEditPattern && pattern && !item.isGis" title="替换底图">
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*"> <input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
<mat-icon class="matIcons">photo_size_select_actual</mat-icon> <mat-icon class="matIcons">photo_size_select_actual</mat-icon>
</a> </a>
@ -167,7 +170,7 @@
(mousedown)="rightDivMouseDown($event)"></div> (mousedown)="rightDivMouseDown($event)"></div>
<!-- 属性 --> <!-- 属性 -->
<div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" <div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property"
style="height: 100%;background-color: white;"> style="height: 50%;background-color: white;">
<div class="rightTitle">属性</div> <div class="rightTitle">属性</div>
<!-- 平面图属性 --> <!-- 平面图属性 -->
<div class="siteproperty" style="user-select: none" <div class="siteproperty" style="user-select: none"
@ -481,6 +484,60 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 消防要素 -->
<div id="firecategories" class="firecategories" style="height: 50%;">
<!-- 素材属性div鼠标拖动div -->
<div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;"
(mousedown)="firecategoriesDivMouseDown($event)"></div>
<!-- <div class="title">
<div>
<span style="user-select: none">消防要素</span>
</div>
</div> -->
<div class="rightTitle">消防要素</div>
<div class="firecategoriesTree">
<div class="hideAllTreeNode" (click)='toggoleAllTreenode()' *ngIf="allFireElements.length">
<label>全部显示/隐藏</label>
<mat-icon [ngClass]="{'icongray': hideAllTreenode == false}">visibility</mat-icon>
</div>
<!-- 消防列表树写在这里 -->
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}"
*matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26'
(click)="clickTreeNode(node)" class="treeNode">
<button mat-icon-button disabled></button>
<span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
{{node.name}}
</span>
<span *ngIf="node.isTemplate">({{node.children.length}})</span>
<span class="isLookCss" (click)="clickLookItem(node)">
<mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon>
</span>
</mat-tree-node>
<mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}"
*matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)"
class="treeNode">
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
{{node.name}}
</span>
<span *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
<span class="isLookCss" (click)="clickLookItem(node)">
<mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon>
</span>
</mat-tree-node>
</mat-tree>
</div>
</div>
</div> </div>
</div> </div>

1
src/app/ui/collection-tools-plan/collection-tools.component.scss

@ -455,3 +455,4 @@ div:focus {
} }
} }
} }

193
src/app/ui/collection-tools-plan/collection-tools.component.ts

@ -17,8 +17,14 @@ import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-scor
import { MaskLayerService } from 'src/app/mask-layer.service'; import { MaskLayerService } from 'src/app/mask-layer.service';
import * as ObjectID from 'bson-objectid'; import * as ObjectID from 'bson-objectid';
import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem'; import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
declare var AMap: any
declare global {
interface Window {
deleteMarker: any;
}
}
declare var AMap:any
@Component({ @Component({
selector: 'app-collection-tools-plan', selector: 'app-collection-tools-plan',
templateUrl: './collection-tools.component.html', templateUrl: './collection-tools.component.html',
@ -28,7 +34,7 @@ export class CollectionToolsPlanComponent implements OnInit {
@ViewChild('canvas') canvas: WorkingAreaComponent; //父组件中获得子组件的引用 @ViewChild('canvas') canvas: WorkingAreaComponent; //父组件中获得子组件的引用
constructor(public _ngZone: NgZone, private maskLayerService: MaskLayerService, private tabbarService: TabbarAndScoreService, private http: HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, private element: ElementRef, public canvasData: CanvasShareDataService, private router: Router, private route: ActivatedRoute) { } constructor(public renderer2: Renderer2, public _ngZone: NgZone, private maskLayerService: MaskLayerService, private tabbarService: TabbarAndScoreService, private http: HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, private element: ElementRef, public canvasData: CanvasShareDataService, private router: Router, private route: ActivatedRoute) { }
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
// tree配置 // tree配置
private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数 private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
@ -80,6 +86,7 @@ export class CollectionToolsPlanComponent implements OnInit {
gallery//viewerJs实例 gallery//viewerJs实例
//设置属性框 //设置属性框
setAssetsProperty(obj) { setAssetsProperty(obj) {
console.log(obj)
//初始化viewerJs实例 //初始化viewerJs实例
setTimeout(() => { setTimeout(() => {
obj.PropertyInfos.forEach(item => { obj.PropertyInfos.forEach(item => {
@ -465,11 +472,12 @@ export class CollectionToolsPlanComponent implements OnInit {
multipleAssetData: any//当前多选的素材 multipleAssetData: any//当前多选的素材
firstMultipleAssetData: any//当前多选的第一个素材 firstMultipleAssetData: any//当前多选的第一个素材
ngOnInit(): void { ngOnInit(): void {
let _this = this let _this = this
AxMessageSystem.addListener('selectionChanged', () => { AxMessageSystem.addListener('selectionChanged', () => {
if (this.canvas.selection.size() == 1) {//如果是单选 if (this.canvas.selection.size() == 1) {//如果是单选
this.isMultipleAsset = false this.isMultipleAsset = false
// console.log('单选',this.canvas.selection.first().assetData) console.log('单选', this.canvas.selection.first().assetData)
this.setAssetsProperty(this.canvas.selection.first().assetData) this.setAssetsProperty(this.canvas.selection.first().assetData)
} else if (this.canvas.selection.size()) { } else if (this.canvas.selection.size()) {
this.isShowProperty = true this.isShowProperty = true
@ -1227,6 +1235,21 @@ export class CollectionToolsPlanComponent implements OnInit {
} }
this.canvas.setHighlight(iconHighLightArr) this.canvas.setHighlight(iconHighLightArr)
} }
hideAllTreenode: boolean = true; //全部显示/隐藏tree节点
toggoleAllTreenode() {
this.hideAllTreenode = !this.hideAllTreenode
let list = []
this.allFireElements.forEach(element => {
if (element.isTemplate) { this.hideAllTreenode ? element.isLook = false : element.isLook = true }
})
this.treeControl.dataNodes.forEach(item => {
this.hideAllTreenode ? item.isLook = false : item.isLook = true
item.level === 0 ? list.push(item) : null
})
list.forEach(item => {
this.clickLookItem(item)
})
}
//点击数节点的显示隐藏icon //点击数节点的显示隐藏icon
clickLookItem(node) { clickLookItem(node) {
@ -1301,7 +1324,7 @@ export class CollectionToolsPlanComponent implements OnInit {
//封装 刷新 tree 数据 //封装 刷新 tree 数据
async renovateTreeData(isRefresh: boolean = true) { async renovateTreeData(isRefresh: boolean = true) {
// this.allFireElements[this.allFireElements.length-1].children = [] // this.allFireElements[this.allFireElements.length-1].children = []
if(!this.selectingSitePlan.isGis){ if (!this.selectingSitePlan.isGis) {
isRefresh ? await this.canvas.refresh() : null isRefresh ? await this.canvas.refresh() : null
this.canvas.setNameVisible(this.basicInfo, 0) this.canvas.setNameVisible(this.basicInfo, 0)
this.canvas.setNameVisible(this.wantToWork, 1) this.canvas.setNameVisible(this.wantToWork, 1)
@ -1309,34 +1332,37 @@ export class CollectionToolsPlanComponent implements OnInit {
isRefresh ? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false isRefresh ? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false
isRefresh ? this.isShowProperty = true : null isRefresh ? this.isShowProperty = true : null
isRefresh ? this.isShowAttribute = true : null isRefresh ? this.isShowAttribute = true : null
}else{ } else {
//加载高德地图 //加载高德地图
this.toLoadGis() this.toLoadGis()
} }
// let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id
// let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据 let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据
// let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据 let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据
// for(let key in companyBuildingData.data){ for(let key in companyBuildingData.data){
// if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下 if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下
// storeyData.data[key] = companyBuildingData.data[key] storeyData.data[key] = companyBuildingData.data[key]
// } }
// } }
// for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到 其他 数组 for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到 其他 数组
// let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId ) let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId )
// if (!noMatch && storeyData.data[key].Id != "图例") { if (!noMatch && storeyData.data[key].Id != "图例") {
// this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key]) this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key])
// } }
// } }
// this.handleTreeData(storeyData) //处理tree数据结构 this.handleTreeData(storeyData) //处理tree数据结构
} }
map:any map: any
toLoadGis(){ toLoadGis() {
this.map = new AMap.Map('container', { this.map = new AMap.Map('planContainer', {
viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D', viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D',
zoom:11, //初始化地图层级 zoom: 11, //初始化地图层级
center: [116.397428, 39.90923] //初始化地图中心点 });
this.map.setCity('上海市');
this.map.on('click', (e) => {
this.showInfoClick(e)
}); });
} }
@ -1388,15 +1414,15 @@ export class CollectionToolsPlanComponent implements OnInit {
//获取总平面图 //获取总平面图
getSitePlan() { getSitePlan() {
// let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素 let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素
let planData = this.getSitePlanCompanyData() //获取 单位 数据 let planData = this.getSitePlanCompanyData() //获取 单位 数据
this.http.get('/api/SitePlans', { params: this.params }).subscribe(data => { this.http.get('/api/SitePlans', { params: this.params }).subscribe(data => {
this.sitePlanData = data this.sitePlanData = data
this.selectingSitePlan = this.sitePlanData[0] || {} this.selectingSitePlan = this.sitePlanData[0] || {}
this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据 this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据
if(this.sitePlanData.length != 0 && this.sitePlanData[0].isGis){ if (this.sitePlanData.length != 0 && this.sitePlanData[0].isGis) {
this.isGis = true this.isGis = true
}else{ } else {
this.isGis = false this.isGis = false
} }
this.selectSitePlanIndex = 0 this.selectSitePlanIndex = 0
@ -1411,7 +1437,7 @@ export class CollectionToolsPlanComponent implements OnInit {
//获取建筑 楼层/区域 废弃 //获取建筑 楼层/区域 废弃
getBuildingSitePlan(item) { getBuildingSitePlan(item) {
let params = { buildingId: item.id } let params = { buildingId: item.id }
// let fireData = this.getFireElements(item.buildingTypes[0].id || '') //获取建筑下 消防要素 let fireData = this.getFireElements(item.buildingTypes[0].id || '') //获取建筑下 消防要素
let planData = this.getBuildingData(params) //获取 建筑 数据 let planData = this.getBuildingData(params) //获取 建筑 数据
this.http.get('/api/BuildingAreas', { params }).subscribe(data => { this.http.get('/api/BuildingAreas', { params }).subscribe(data => {
this.sitePlanData = data this.sitePlanData = data
@ -1452,6 +1478,7 @@ export class CollectionToolsPlanComponent implements OnInit {
getSitePlanCompanyData() { getSitePlanCompanyData() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.http.get('/api/CompanyData', { params: this.params }).subscribe((data: any) => { this.http.get('/api/CompanyData', { params: this.params }).subscribe((data: any) => {
console.log('单位数据', data)
this.canvasData.originalcompanyBuildingData = data || {} // 单位原数据 this.canvasData.originalcompanyBuildingData = data || {} // 单位原数据
this.canvasData.originalcompanyBuildingData.data ? this.canvasData.originalcompanyBuildingData.data = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {} this.canvasData.originalcompanyBuildingData.data ? this.canvasData.originalcompanyBuildingData.data = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {}
this.canvasData.originalcompanyBuildingData.version = "2.0" this.canvasData.originalcompanyBuildingData.version = "2.0"
@ -1465,6 +1492,7 @@ export class CollectionToolsPlanComponent implements OnInit {
getSitePlanStorey(e) { getSitePlanStorey(e) {
let params = { sitePlanId: e.id } let params = { sitePlanId: e.id }
this.http.get(`/api/SitePlanData`, { params }).subscribe((data: any) => { this.http.get(`/api/SitePlanData`, { params }).subscribe((data: any) => {
console.log('平面图数据', data)
this.canvasData.originaleveryStoreyData = data || {} // 楼层原数据 this.canvasData.originaleveryStoreyData = data || {} // 楼层原数据
this.canvasData.originaleveryStoreyData.data ? this.canvasData.originaleveryStoreyData.data = JSON.parse(this.canvasData.originaleveryStoreyData.data) : this.canvasData.originaleveryStoreyData.data = {} this.canvasData.originaleveryStoreyData.data ? this.canvasData.originaleveryStoreyData.data = JSON.parse(this.canvasData.originaleveryStoreyData.data) : this.canvasData.originaleveryStoreyData.data = {}
this.canvasData.originaleveryStoreyData.version = "2.0" this.canvasData.originaleveryStoreyData.version = "2.0"
@ -1499,12 +1527,12 @@ export class CollectionToolsPlanComponent implements OnInit {
} }
//点击选中 平面图 楼层/区域 时 //点击选中 平面图 楼层/区域 时
isGis:boolean isGis: boolean
selectSitePlan(item, index) { selectSitePlan(item, index) {
console.log('点击楼层',item) console.log('点击楼层', item)
if(item.isGis){ if (item.isGis) {
this.isGis = true this.isGis = true
}else{ } else {
this.isGis = false this.isGis = false
} }
@ -1654,7 +1682,7 @@ export class CollectionToolsPlanComponent implements OnInit {
//旋转底图 //旋转底图
revolveImg(item) { revolveImg(item) {
if(item.isGis){ if (item.isGis) {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
config.duration = 3000 config.duration = 3000
@ -1744,7 +1772,7 @@ export class CollectionToolsPlanComponent implements OnInit {
//复制图层 平面图 楼层/区域 //复制图层 平面图 楼层/区域
duplicateLayer(item) { duplicateLayer(item) {
if(item.isGis){ if (item.isGis) {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
config.duration = 3000 config.duration = 3000
@ -1938,12 +1966,103 @@ export class CollectionToolsPlanComponent implements OnInit {
//点击选中素材库图片时 //点击选中素材库图片时
selectImg(item, items, index) { selectImg(item, items, index) {
//如果是gis
this.selectLibrary = item.name this.selectLibrary = item.name
this.selectImage = items this.selectImage = items
// console.log('选中图片',this.selectImage)
this.selectImageIndex = index this.selectImageIndex = index
if (this.isGis) {
console.log(this.map)
} else {
this.canvasData.selectTemplateData = items this.canvasData.selectTemplateData = items
this.canvas.beginPaint() this.canvas.beginPaint()
} }
}
//存储当前gis平面图的所有图标信息
planData = []
//存储当前gis平面图的所有marker信息
planDataMarkers = []
//地图单击事件
clickId
showInfoClick(e) {
if (!this.selectImage.imageUrl) {
return
}
let id = ObjectID.default.generate()
// console.log('点击了地图', e)
// 新增点标记
// 点标记显示内容,HTML要素字符串
let markerContent = '' +
'<div class="custom-content-marker" id="xxxx">' +
`<img src="${this.selectImage.imageUrl}">` +
`<div class="close-btn" id="${id}" onclick='deleteMarker()'>X</div>` +
'</div>';
// 将 icon 传入 marker
let startMarker = new AMap.Marker({
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
// 将 html 传给 content
content: markerContent,
// 以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
draggable: true,
});
startMarker.id = id
startMarker.on('click', (e) => {
this.clickId = e.target.id
for (let index = 0; index < this.planData.length; index++) {
const item = this.planData[index];
if (item.id == e.target.id) {
this.setAssetsProperty(item)
return
}
}
});
startMarker.on('dragend', (e) => {
console.log('拖拽完成', e)
this.clickId = e.target.id
for (let index = 0; index < this.planData.length; index++) {
const item = this.planData[index];
if (item.id == e.target.id) {
//修改最终坐标数据
item.point = { x: e.lnglat.lng, y: e.lnglat.lat }
return
}
}
});
//将图标数据添加
let itemData = JSON.parse(JSON.stringify(this.selectImage))
itemData.id = id
itemData.point = { x: e.lnglat.lng, y: e.lnglat.lat }
this.planData.push(itemData)
//将marker点添加
this.planDataMarkers.push(startMarker)
this.map.add(startMarker);
//点击关闭按钮
window.deleteMarker = () => {
//清除地图标点
this.planDataMarkers.forEach((element, index) => {
if (element.id == this.clickId) {
this.planDataMarkers[index].setMap(null);
}
});
//删除指定数据
for (let index = 0; index < this.planData.length; index++) {
const item = this.planData[index];
if (item.id == this.clickId) {
this.planData.splice(index, 1)
return
}
}
}
}

1
src/main.ts

@ -3,6 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
if (environment.production) { if (environment.production) {
enableProdMode(); enableProdMode();
} }

34
src/styles.scss

@ -117,6 +117,9 @@ table td.mat-footer-cell:last-of-type{
.mat-expansion-indicator::after { .mat-expansion-indicator::after {
color: #fff; color: #fff;
} }
mat-expansion-panel{
box-shadow: 0 0 black;border: 1px solid #EEF1F5;
}
} }
//gis标点弹出框样式 //gis标点弹出框样式
#gispopupbox{ #gispopupbox{
@ -233,3 +236,34 @@ td{
} }
} }
#planContainer{
.custom-content-marker {
position: relative;
width: 28px;
height: 28px;
}
.custom-content-marker img {
width: 100%;
height: 100%;
}
.custom-content-marker .close-btn {
position: absolute;
top: -6px;
right: -8px;
width: 15px;
height: 15px;
font-size: 12px;
background: #ccc;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}
.custom-content-marker .close-btn:hover{
background: #666;
}
}
Loading…
Cancel
Save