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. 45
      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. 80
      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. 197
      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-accordion>
</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-expansion-panel style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
<mat-expansion-panel-header class="panelhead" collapsedHeight ='40px' expandedHeight='40px' class="panelhead">
@ -86,6 +86,6 @@
</mat-expansion-panel>
</mat-accordion>
</div>
</div> -->
</div>

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

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

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

@ -1,16 +1,16 @@
.divbox{
width: 1500px;
height:850px
}
@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;
}
.divbox {
width: 100%;
height: 100%;
}
// @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("companyId",this.unitId)
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方法打开对话框并且携带参数过去
id:'openPlanToolDialog',
data
data,
width:width,
height:height
});
dialogRef.afterClosed().subscribe( (data)=>{ } );
}

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

@ -1,60 +1,61 @@
import { Pipe, PipeTransform } from '@angular/core';
import { isno , PlanTypeEnum , AuditStatusEnum , PlanLevelEnum} from '../interface'
@Pipe({name: 'isno'})
import { isno, PlanTypeEnum, AuditStatusEnum, PlanLevelEnum } from '../interface'
@Pipe({ name: 'isno' })
export class IsnoPipe implements PipeTransform {
transform(value: boolean): string {
if(value){
var x = 0
}else{
x=1
if (value) {
var x = 0
} else {
x = 1
}
return isno[x]
}
}
@Pipe({name: 'plantype'})
@Pipe({ name: 'plantype' })
export class PlanType implements PipeTransform {
transform(value: number): string {
return PlanTypeEnum[value]
}
}
@Pipe({name: 'auditsatus'})
@Pipe({ name: 'auditsatus' })
export class AuditSatus implements PipeTransform {
transform(value: number): string {
return AuditStatusEnum[value]
}
}
@Pipe({name: 'planlevel'})
export class PlanLevel implements PipeTransform {
@Pipe({ name: 'planlevel' })
export class PlanLevel implements PipeTransform {
transform(value: number): string {
return PlanLevelEnum[value]
}
}
@Pipe({name: 'state'})
export class state implements PipeTransform {
@Pipe({ name: 'state' })
export class state implements PipeTransform {
transform(value: number): string {
if(value == 3){
if (value == 3) {
return '维护中'
}else if(value == 4){
} else if (value == 4) {
return '维护通过审核'
}else if(value == 5){
} else if (value == 5) {
return '维护驳回审核'
}else{
} else {
return '未维护'
}
}
}
@Pipe({name: 'differentContentTitle'})
export class differentContentTitle implements PipeTransform {
@Pipe({ name: 'differentContentTitle' })
export class differentContentTitle implements PipeTransform {
transform(value: string): string {
console.log(666,typeof(value))
if(typeof(value) == 'boolean' && value){
if (typeof (value) == 'boolean' && value) {
return '是'
}else if(typeof(value) == 'boolean' && !value){
} else if (typeof (value) == 'boolean' && !value) {
return '否'
}else{
} else if (!value) {
return '空'
} else {
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;"
(click)='agree()'>同意</button>
</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 *ngIf="isallDate" style="background-color: #FFCC00; color: #FFFFFF;"
(click)="preview()"><img src="../../../assets/images/change.png" style="margin-bottom: 2px;"> 预览得分</button>
</div> -->
<!-- <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> -->
</div>
</div>
<!-- 数据变更div -->
@ -109,7 +109,7 @@
<div *ngIf="showtype == 3" id="firefacilities" style="margin: 10px;">
<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"
style="background-color: #2196F3;">
<mat-panel-title style="font-size: 16px;color: #FFFFFF;">
@ -118,7 +118,7 @@
</mat-expansion-panel-header>
<div class="accordingin">
<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-panel-title style="font-size: 16px;color:#2196F3;">
<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">
<td>
<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>
<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>
</ng-container>
<ng-template #elseTemplate>
@ -151,7 +151,7 @@
</div>
</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"
style="background-color: #2196F3;">
<mat-panel-title style="font-size: 16px;color: #FFFFFF;">
@ -160,11 +160,15 @@
</mat-expansion-panel-header>
<div class="accordingin">
<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-panel-title style="font-size: 16px;color:#2196F3;">
<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-expansion-panel-header>
<table>
@ -183,7 +187,7 @@
</div>
</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"
style="background-color: #2196F3;">
<mat-panel-title style="font-size: 16px;color: #FFFFFF;">
@ -191,8 +195,8 @@
</mat-panel-title>
</mat-expansion-panel-header>
<div class="accordingin">
<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-accordion *ngFor="let item of this.differentContentOfFunction" >
<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>
@ -215,6 +219,59 @@
</div>
</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>
</div>
</div>
@ -322,3 +379,7 @@
<div class="bar" id="indexbar"></div>
<div class="zhu" id="zhu"></div>
</div>
<div id="viewerjs">
</div>

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

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

80
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'
declare var CryptoJS
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;
@Component({
selector: 'app-wait-examineer',
templateUrl: './wait-examineer.component.html',
@ -130,7 +133,25 @@ export class WaitExamineerComponent implements OnInit {
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点击事件
viewer//全景图对象
waterData: any//需要传递给子组件的水源信息
@ -146,32 +167,37 @@ export class WaitExamineerComponent implements OnInit {
differentContentOfPicture: any//当前单位变更数据 之 实景图
radioClick(e, item) {
this.selectedItem = item
// console.log('当前选择的单位',this.selectedItem)
// console.log('当前选择的信息',JSON.parse(this.selectedItem.differentContent) )
let differentContent = JSON.parse(this.selectedItem.differentContent)
// 单位信息
this.differentContentOfUnitInfo = differentContent.filter(item => item.propertyName == 'basicInfo')
// 实景图
this.differentContentOfPicture = differentContent.filter(item => item.propertyName == 'realityImageGroups')
//建筑信息
this.differentContentOfBuildingsInfo = JSON.parse(JSON.stringify(differentContent.filter(item => item.propertyName == 'buildings')[0]))
this.differentContentOfBuildingsInfo.childrens.forEach(element => {
element.childrens = element.childrens.filter(item => item.isObj == false)
});
//功能分区
let differentContentOfFunction = JSON.parse(JSON.stringify(differentContent.filter(item => item.propertyName == 'buildings')[0]))
this.differentContentOfFunction = []
differentContentOfFunction.childrens.forEach(item => {
item.childrens.forEach(i => {
if (i.propertyName == "buildingFunctionalDivisions") {
i.propertyName = item.propertyName
this.differentContentOfFunction.push(i)
}
if(item.contentType == 11){
let differentContent = JSON.parse(this.selectedItem.differentContent)
// 单位信息
this.differentContentOfUnitInfo = differentContent.filter(item => item.propertyName == 'basicInfo')
// 实景图
this.differentContentOfPicture = differentContent.filter(item => item.propertyName == 'realityImageGroups')
//建筑信息
this.differentContentOfBuildingsInfo = JSON.parse(JSON.stringify(differentContent.filter(item => item.propertyName == 'buildings')[0]))
this.differentContentOfBuildingsInfo.childrens.forEach(element => {
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]))
this.differentContentOfFunction = []
differentContentOfFunction.childrens.forEach(item => {
item.childrens.forEach(i => {
if (i.propertyName == "buildingFunctionalDivisions") {
i.propertyName = item.propertyName
this.differentContentOfFunction.push(i)
}
});
});
});
console.log('功能分区', this.differentContentOfFunction)
}
// console.log('功能分区', this.differentContentOfFunction)
@ -236,7 +262,7 @@ export class WaitExamineerComponent implements OnInit {
obj.innerHTML = ''
}
window.setTimeout(() => {
this.viewer = new Viewer({
this.viewer = new photoViewer({
container: document.querySelector('#viewer'),
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 { PlanManagementRoutingModule } from './plan-management-routing.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import {A11yModule} from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatBadgeModule} from '@angular/material/badge';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatCardModule} from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatChipsModule} from '@angular/material/chips';
import {MatStepperModule} from '@angular/material/stepper';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatListModule} from '@angular/material/list';
import {MatMenuModule} from '@angular/material/menu';
import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {MatTabsModule} from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatTreeModule} from '@angular/material/tree';
import { A11yModule } from '@angular/cdk/a11y';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { EntryPlanComponent } from './entry-plan/entry-plan.component';
import { PassPlanComponent, UnitInfo } from './pass-plan/pass-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 { WebLookComponent } from './web-look/web-look.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 { newunitMeet }from './meet-plan/meet-plan.component';
import { newunitMeet } from './meet-plan/meet-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 { 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 { MaintainUpComponent } from './maintain-up/maintain-up.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 { ImgDetails } from './entry-plan-look/entry-plan-look.component'
@NgModule({
declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent,AddPlanone,PlanType,AuditSatus,PlanLevel,DownloadFile,AuditResult,ChangeName,
WebLookComponent, OnetwoEntryPlanComponent,newunitComponent, MeetPlanComponent,newunitMeet, TypePlanComponent,newunitType,PsViewer,onetwoAuditResult,meetAuditResult,
typeAuditResult, MaintainUpComponent,GkPsViewer,GkhtmlPsViewer,UnitInfo, ReinforcePlanComponent, state,ImgDetails],
declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent, AddPlanone, PlanType, AuditSatus, PlanLevel, DownloadFile, AuditResult, ChangeName,
WebLookComponent, OnetwoEntryPlanComponent, newunitComponent, MeetPlanComponent, newunitMeet, TypePlanComponent, newunitType, PsViewer, onetwoAuditResult, meetAuditResult,
typeAuditResult, MaintainUpComponent, GkPsViewer, GkhtmlPsViewer, UnitInfo, ReinforcePlanComponent, state, ImgDetails],
imports: [
CommonModule,
PlanManagementRoutingModule,
@ -120,6 +119,6 @@ import { ImgDetails } from './entry-plan-look/entry-plan-look.component'
MatTooltipModule,
MatTreeModule
],
exports:[PlanType, AuditSatus, PlanLevel, state]
exports: [PlanType, AuditSatus, PlanLevel, state]
})
export class PlanManagementModule { }

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

@ -7,7 +7,10 @@
<button mat-button (click)="toggle2()">
<mat-icon style="vertical-align: middle; color: #279FFF;">list</mat-icon>
</button>
<span [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()">
基本信息名称
<mat-icon>visibility</mat-icon>
</span>
<span class="marginLeftRight">
<mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选
</span>
@ -52,7 +55,7 @@
<!-- H5Canvas -->
<app-working-area *ngIf="!isGis" #canvas [init]='this'></app-working-area>
<!-- gis -->
<div *ngIf="isGis" id="container" style="width: 100%;height: 100%;"></div>
<div *ngIf="isGis" id="planContainer" style="width: 100%;height: 100%;"></div>
<!-- H5Canvas -->
<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/noForce.png" *ngIf="item.force && item.force==1">
</a>
<a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern && pattern && !item.isGis"
title="替换底图">
<a href="javascript:;" class="a-upload"
*ngIf="selectSitePlanIndex==key && isEditPattern && pattern && !item.isGis" title="替换底图">
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
<mat-icon class="matIcons">photo_size_select_actual</mat-icon>
</a>
@ -167,7 +170,7 @@
(mousedown)="rightDivMouseDown($event)"></div>
<!-- 属性 -->
<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="siteproperty" style="user-select: none"
@ -481,6 +484,60 @@
</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>

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

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

197
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 * as ObjectID from 'bson-objectid';
import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
declare var AMap: any
declare global {
interface Window {
deleteMarker: any;
}
}
declare var AMap:any
@Component({
selector: 'app-collection-tools-plan',
templateUrl: './collection-tools.component.html',
@ -28,7 +34,7 @@ export class CollectionToolsPlanComponent implements OnInit {
@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;
// tree配置
private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
@ -80,6 +86,7 @@ export class CollectionToolsPlanComponent implements OnInit {
gallery//viewerJs实例
//设置属性框
setAssetsProperty(obj) {
console.log(obj)
//初始化viewerJs实例
setTimeout(() => {
obj.PropertyInfos.forEach(item => {
@ -465,11 +472,12 @@ export class CollectionToolsPlanComponent implements OnInit {
multipleAssetData: any//当前多选的素材
firstMultipleAssetData: any//当前多选的第一个素材
ngOnInit(): void {
let _this = this
AxMessageSystem.addListener('selectionChanged', () => {
if (this.canvas.selection.size() == 1) {//如果是单选
this.isMultipleAsset = false
// console.log('单选',this.canvas.selection.first().assetData)
console.log('单选', this.canvas.selection.first().assetData)
this.setAssetsProperty(this.canvas.selection.first().assetData)
} else if (this.canvas.selection.size()) {
this.isShowProperty = true
@ -1227,6 +1235,21 @@ export class CollectionToolsPlanComponent implements OnInit {
}
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
clickLookItem(node) {
@ -1301,7 +1324,7 @@ export class CollectionToolsPlanComponent implements OnInit {
//封装 刷新 tree 数据
async renovateTreeData(isRefresh: boolean = true) {
// this.allFireElements[this.allFireElements.length-1].children = []
if(!this.selectingSitePlan.isGis){
if (!this.selectingSitePlan.isGis) {
isRefresh ? await this.canvas.refresh() : null
this.canvas.setNameVisible(this.basicInfo, 0)
this.canvas.setNameVisible(this.wantToWork, 1)
@ -1309,34 +1332,37 @@ export class CollectionToolsPlanComponent implements OnInit {
isRefresh ? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false
isRefresh ? this.isShowProperty = true : null
isRefresh ? this.isShowAttribute = true : null
}else{
} else {
//加载高德地图
this.toLoadGis()
}
// let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id
// let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据
// let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据
// for(let key in companyBuildingData.data){
// if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下
// storeyData.data[key] = companyBuildingData.data[key]
// }
// }
// for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到 其他 数组
// let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId )
// if (!noMatch && storeyData.data[key].Id != "图例") {
// this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key])
// }
// }
// this.handleTreeData(storeyData) //处理tree数据结构
}
map:any
toLoadGis(){
this.map = new AMap.Map('container', {
let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id
let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据
let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据
for(let key in companyBuildingData.data){
if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下
storeyData.data[key] = companyBuildingData.data[key]
}
}
for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到 其他 数组
let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId )
if (!noMatch && storeyData.data[key].Id != "图例") {
this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key])
}
}
this.handleTreeData(storeyData) //处理tree数据结构
}
map: any
toLoadGis() {
this.map = new AMap.Map('planContainer', {
viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D',
zoom:11, //初始化地图层级
center: [116.397428, 39.90923] //初始化地图中心点
zoom: 11, //初始化地图层级
});
this.map.setCity('上海市');
this.map.on('click', (e) => {
this.showInfoClick(e)
});
}
@ -1388,15 +1414,15 @@ export class CollectionToolsPlanComponent implements OnInit {
//获取总平面图
getSitePlan() {
// let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素
let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素
let planData = this.getSitePlanCompanyData() //获取 单位 数据
this.http.get('/api/SitePlans', { params: this.params }).subscribe(data => {
this.sitePlanData = data
this.selectingSitePlan = 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
}else{
} else {
this.isGis = false
}
this.selectSitePlanIndex = 0
@ -1411,7 +1437,7 @@ export class CollectionToolsPlanComponent implements OnInit {
//获取建筑 楼层/区域 废弃
getBuildingSitePlan(item) {
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) //获取 建筑 数据
this.http.get('/api/BuildingAreas', { params }).subscribe(data => {
this.sitePlanData = data
@ -1452,6 +1478,7 @@ export class CollectionToolsPlanComponent implements OnInit {
getSitePlanCompanyData() {
return new Promise((resolve, reject) => {
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 = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {}
this.canvasData.originalcompanyBuildingData.version = "2.0"
@ -1465,6 +1492,7 @@ export class CollectionToolsPlanComponent implements OnInit {
getSitePlanStorey(e) {
let params = { sitePlanId: e.id }
this.http.get(`/api/SitePlanData`, { params }).subscribe((data: any) => {
console.log('平面图数据', 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"
@ -1499,12 +1527,12 @@ export class CollectionToolsPlanComponent implements OnInit {
}
//点击选中 平面图 楼层/区域 时
isGis:boolean
isGis: boolean
selectSitePlan(item, index) {
console.log('点击楼层',item)
if(item.isGis){
console.log('点击楼层', item)
if (item.isGis) {
this.isGis = true
}else{
} else {
this.isGis = false
}
@ -1654,7 +1682,7 @@ export class CollectionToolsPlanComponent implements OnInit {
//旋转底图
revolveImg(item) {
if(item.isGis){
if (item.isGis) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
@ -1744,7 +1772,7 @@ export class CollectionToolsPlanComponent implements OnInit {
//复制图层 平面图 楼层/区域
duplicateLayer(item) {
if(item.isGis){
if (item.isGis) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
@ -1938,11 +1966,102 @@ export class CollectionToolsPlanComponent implements OnInit {
//点击选中素材库图片时
selectImg(item, items, index) {
//如果是gis
this.selectLibrary = item.name
this.selectImage = items
// console.log('选中图片',this.selectImage)
this.selectImageIndex = index
this.canvasData.selectTemplateData = items
this.canvas.beginPaint()
if (this.isGis) {
console.log(this.map)
} else {
this.canvasData.selectTemplateData = items
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 { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}

34
src/styles.scss

@ -117,6 +117,9 @@ table td.mat-footer-cell:last-of-type{
.mat-expansion-indicator::after {
color: #fff;
}
mat-expansion-panel{
box-shadow: 0 0 black;border: 1px solid #EEF1F5;
}
}
//gis标点弹出框样式
#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