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. 28
      src/app/gis-management/plan-list/openPlanTool.scss
  4. 7
      src/app/gis-management/plan-list/plan-list.component.ts
  5. 3
      src/app/pipes/boolean.pipe.ts
  6. 87
      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. 3
      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. 163
      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 = []; //所有单位毗邻

28
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)=>{ } );
} }

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

@ -49,11 +49,12 @@ export class state implements PipeTransform {
@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 if (!value) {
return '空'
} else { } else {
return value return value
} }

87
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;">
@ -192,7 +196,7 @@
</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,

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

@ -47,7 +47,7 @@ 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';
@ -64,7 +64,6 @@ 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'

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 {
} }
} }
} }

163
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 var AMap: any
declare global {
interface Window {
deleteMarker: 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) {
@ -1314,29 +1337,32 @@ export class CollectionToolsPlanComponent implements OnInit {
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,7 +1414,7 @@ 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
@ -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"
@ -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