shaojiahao
/
AX.Angular9DataCollection
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[新增]保存平面图时增加遮罩层

develop
邵佳豪 4 years ago
parent
c125c52f7e
commit
eae92e3ba9
10 changed files with 312 additions and 258 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      proxy.config.json
  2. 3
      src/app/app.component.html
  3. 12
      src/app/app.component.scss
  4. 9
      src/app/app.component.ts
  5. 4
      src/app/app.module.ts
  6. 18
      src/app/mask-layer.service.ts
  7. 488
      src/app/ui/collection-tools/collection-tools.component.html
  8. 15
      src/app/ui/collection-tools/collection-tools.component.ts
  9. 1
      src/app/ui/ui.component.html

2
proxy.config.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"/api": { "/api": {
"target": "http://39.106.78.171:8000", "target": "http://121.37.20.190:8000/",
"secure": false, "secure": false,
"changeOrigin": true "changeOrigin": true
} }

3
src/app/app.component.html
Unescape View File

@ -1 +1,4 @@
<router-outlet></router-outlet> <router-outlet></router-outlet>
<div class="maskLayer" *ngIf="isMaskLayerShow">
<mat-spinner [diameter]='50'></mat-spinner>
</div>

12
src/app/app.component.scss
Unescape View File

@ -0,0 +1,12 @@
.maskLayer{
position: absolute;
left: 0;
top: 0;
z-index: 2000;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
display: flex;
justify-content: center;
align-items: center;
}

9
src/app/app.component.ts
Unescape View File

@ -4,6 +4,7 @@ import { Data } from './interface'
import { Router,ActivatedRoute } from '@angular/router' import { Router,ActivatedRoute } from '@angular/router'
import {CacheTokenService} from './http-interceptors/cache-token.service'//引入服务 import {CacheTokenService} from './http-interceptors/cache-token.service'//引入服务
import { CookieService } from 'ngx-cookie-service'; import { CookieService } from 'ngx-cookie-service';
import { MaskLayerService } from './mask-layer.service';
@ -14,9 +15,15 @@ import { CookieService } from 'ngx-cookie-service';
}) })
export class AppComponent { export class AppComponent {
constructor(private http:HttpClient,private router:Router,public token:CacheTokenService,private cookieService: CookieService) { } constructor(private maskLayerService:MaskLayerService, private http:HttpClient,private router:Router,public token:CacheTokenService,private cookieService: CookieService) { }
isMaskLayerShow:boolean = false
ngOnInit(): void { ngOnInit(): void {
//监听遮罩层
this.maskLayerService.getMessage().subscribe((message: any)=>{
this.isMaskLayerShow = message
});
var token = this.cookieService.get("token") var token = this.cookieService.get("token")
var refreshToken = this.cookieService.get("refreshToken"); var refreshToken = this.cookieService.get("refreshToken");
if(token && refreshToken) { if(token && refreshToken) {

4
src/app/app.module.ts
Unescape View File

@ -20,6 +20,7 @@ import { TreeService } from'./http-interceptors/tree.service'
import { CookieService } from 'ngx-cookie-service';//cookie插件 import { CookieService } from 'ngx-cookie-service';//cookie插件
import { CountdownModule } from 'ngx-countdown'; //倒计时插件 import { CountdownModule } from 'ngx-countdown'; //倒计时插件
import { MTokenK1Component } from './m-token-k1/m-token-k1.component'; import { MTokenK1Component } from './m-token-k1/m-token-k1.component';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -39,7 +40,8 @@ import { MTokenK1Component } from './m-token-k1/m-token-k1.component';
PagesModule, PagesModule,
FormsModule, FormsModule,
HttpClientModule, HttpClientModule,
CountdownModule CountdownModule,
MatProgressSpinnerModule
], ],
providers: [httpInterceptorProviders, CacheTokenService,TreeService,CookieService], providers: [httpInterceptorProviders, CacheTokenService,TreeService,CookieService],
bootstrap: [AppComponent] bootstrap: [AppComponent]

18
src/app/mask-layer.service.ts
Unescape View File

@ -0,0 +1,18 @@
import { Injectable } from '@angular/core';
import {ReplaySubject} from "rxjs";
import { Observable } from "rxjs";
@Injectable({
providedIn: 'root'
})
export class MaskLayerService {
private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1);
/** * 向其他组件发送信息 *
* @param message 需要发送的信息 * @returns {Observavle<any>} */
public sendMessage(message: any) {
this._sendMessage.next(message);
}
public getMessage(): Observable <any> {
return this._sendMessage.asObservable();
}
constructor() { }
}

488
src/app/ui/collection-tools/collection-tools.component.html
Unescape View File

@ -50,287 +50,289 @@
<!--功能区 --> <!--功能区 -->
<div class="functionalDomain"> <div class="functionalDomain">
<div class='functionalDomainContent' id="functionalDomainContent"> <div class='functionalDomainContent' id="functionalDomainContent">
<!-- H5Canvas --> <!-- H5Canvas -->
<app-working-area #canvas></app-working-area> <app-working-area #canvas></app-working-area>
<!-- H5Canvas --> <!-- H5Canvas -->
<div id="leftDiv" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true}" style="user-select: none"> <div id="leftDiv" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true}" style="user-select: none">
<div class="leftDragDiv" (mousedown)="leftDivMouseDown($event)"></div> <div class="leftDragDiv" (mousedown)="leftDivMouseDown($event)"></div>
<!-- 平面图 --> <!-- 平面图 -->
<div class="planarGraph"> <div class="planarGraph">
<div class="planarGraphHeader" (click)='togglePlanarGraph()'> <div class="planarGraphHeader" (click)='togglePlanarGraph()'>
<mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon> <mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon> <mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon>
<label class="overflowText" style="font-weight: 550;">平面图</label> <label class="overflowText" style="font-weight: 550;">平面图</label>
<label class="hover" *ngIf="isEditPattern"> <label class="hover" *ngIf="isEditPattern">
<mat-icon (click)='foundPanel($event)'>add</mat-icon> <mat-icon (click)='foundPanel($event)'>add</mat-icon>
</label> </label>
</div> </div>
<div [hidden]="!togglePlane" > <div [hidden]="!togglePlane" >
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index"
[ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'> [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
<label class="overflowText planEveryRow"><mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}</label> <label class="overflowText planEveryRow"><mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}</label>
<a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern" title="替换底图" > <a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern" 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>
<a href="javascript:;" id="a-uploadImg" *ngIf="selectSitePlanIndex==key && !item.imageUrl && isEditPattern" title="上传底图" > <a href="javascript:;" id="a-uploadImg" *ngIf="selectSitePlanIndex==key && !item.imageUrl && isEditPattern" title="上传底图" >
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*"> <input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
<img src="../../../assets/images/upload.jpg"> <img src="../../../assets/images/upload.jpg">
</a> </a>
<!-- 右边定位操作栏 --> <!-- 右边定位操作栏 -->
<div id="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern" (click)="$event.stopPropagation();"> <div id="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern" (click)="$event.stopPropagation();">
<p class="functionButton"> <p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up</mat-icon> <mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up</mat-icon>
</p> </p>
<p class="functionButton"> <p class="functionButton">
<mat-icon class="functionIcon" title="编辑属性" (click)='editPlaneData(item)'>edit</mat-icon> <mat-icon class="functionIcon" title="编辑属性" (click)='editPlaneData(item)'>edit</mat-icon>
<mat-icon class="functionIcon" title="删除" (click)="deletePlaneData(item)">delete</mat-icon> <mat-icon class="functionIcon" title="删除" (click)="deletePlaneData(item)">delete</mat-icon>
</p> </p>
<p class="functionButton"> <p class="functionButton">
<mat-icon class="functionIcon" title="旋转底图" (click)='revolveImg(item)'>cached</mat-icon> <mat-icon class="functionIcon" title="旋转底图" (click)='revolveImg(item)'>cached</mat-icon>
<mat-icon class="functionIcon" title="复制" (click)="duplicateLayer(item)">library_books</mat-icon> <mat-icon class="functionIcon" title="复制" (click)="duplicateLayer(item)">library_books</mat-icon>
</p> </p>
<p class="functionButton"> <p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="下移" (click)='moveDown(item,key)'>keyboard_arrow_down</mat-icon> <mat-icon class="functionIcon bigFunctionIcon" title="下移" (click)='moveDown(item,key)'>keyboard_arrow_down</mat-icon>
</p> </p>
</div>
<!-- 右边定位操作栏 -->
</div> </div>
<!-- 右边定位操作栏 -->
</div> </div>
</div> </div>
</div>
<!-- 素材库 --> <!-- 素材库 -->
<div id="materialBank" *ngIf="isEditPattern"> <div id="materialBank" *ngIf="isEditPattern">
<div class="planarGraphHeader" (click)='toggleMaterial()'> <div class="planarGraphHeader" (click)='toggleMaterial()'>
<mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon> <mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon> <mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon>
<label class="overflowText" style="font-weight: 550;">素材库</label> <label class="overflowText" style="font-weight: 550;">素材库</label>
</div> </div>
<div style="flex: 1;overflow-y: auto;" [hidden]="!toggleMaterialBank"> <div style="flex: 1;overflow-y: auto;" [hidden]="!toggleMaterialBank">
<mat-accordion *ngFor="let item of allLibrary" id="panelLibrary"> <mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
<mat-expansion-panel (opened)='opened(item)'> <mat-expansion-panel (opened)='opened(item)'>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<label class="text">{{item.name}}</label> <label class="text">{{item.name}}</label>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="panelLibraryFlex"> <div class="panelLibraryFlex">
<div class="imgBox" *ngFor="let items of item.images;let key = index" [title]="items.name" <div class="imgBox" *ngFor="let items of item.images;let key = index" [title]="items.name"
(click)='selectImg(item,items,key)' (click)='selectImg(item,items,key)'
[ngClass]="{'selectImg': selectLibrary==item.name && selectImageIndex==key}"> [ngClass]="{'selectImg': selectLibrary==item.name && selectImageIndex==key}">
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'"> <img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p> <p class="overflowText">{{items.name}}</p>
</div>
</div> </div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>
<div id="rightDiv" class="functionalDomainRight publicCss " [ngClass]="{'togglePanel2': toggleExpandPanelRight==true}" style="user-select: none"> </mat-expansion-panel>
<!-- 右侧div鼠标拖动div --> </mat-accordion>
<div style="width: 3px;height: 100%;position: absolute;left: 0;cursor: e-resize;z-index: 1000;" (mousedown)="rightDivMouseDown($event)"></div>
<!-- 属性 -->
<div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" style="height: 50%;">
<div class="title">
<div>
<span style="user-select: none">属性</span>
</div> </div>
</div> </div>
<!-- 平面图属性 -->
<div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute">
<p>面积(平方米)</p>
<div class="siteproperty_size">{{canvasData.selectStorey.area}}</div>
<p>详情</p>
<div class="siteproperty_size">
{{canvasData.selectStorey.details}}
</div>
</div>
<!-- 素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && !isShowAttribute">
<h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
<div *ngIf="canvasAssetObj.InteractiveMode == 0"> </div>
<p>宽度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern"> <div id="rightDiv" class="functionalDomainRight publicCss " [ngClass]="{'togglePanel2': toggleExpandPanelRight==true}" style="user-select: none">
<p>高度(像素)</p> <!-- 右侧div鼠标拖动div -->
<input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern"> <div style="width: 3px;height: 100%;position: absolute;left: 0;cursor: e-resize;z-index: 1000;" (mousedown)="rightDivMouseDown($event)"></div>
<p>角度</p> <!-- 属性 -->
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;"> <div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" style="height: 50%;">
<input type="number" class="smallinput" [(ngModel)]="sliderValue" <div class="title">
oninput="if(value>360)value=360;if(value<0)value=0;" (input)="assetAngleIunput()" [disabled]="!isEditPattern"> <div>
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;" <span style="user-select: none">属性</span>
[(ngModel)]="sliderValue" (change)="assetAngleIunput()" [disabled]="!isEditPattern"></mat-slider>
</div> </div>
</div> </div>
<!-- 如果是多点连线 --> <!-- 平面图属性 -->
<div *ngIf="canvasAssetObj.InteractiveMode == 1 || canvasAssetObj.InteractiveMode == 3"> <div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute">
<p>厚度</p> <p>面积(平方米)</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;"> <div class="siteproperty_size">{{canvasData.selectStorey.area}}</div>
<input type="number" class="smallinput" [(ngModel)]="sliderValueThickness" <p>详情</p>
oninput="if(value>999)value=999;if(value<0)value=0;" (input)="assetThicknessIunput()" [disabled]="!isEditPattern"> <div class="siteproperty_size">
<mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;" {{canvasData.selectStorey.details}}
[(ngModel)]="sliderValueThickness" (change)="assetThicknessIunput()" [disabled]="!isEditPattern"></mat-slider>
</div> </div>
</div> </div>
<!-- 素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && !isShowAttribute">
<h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
<p style="margin-top: 4px;margin-bottom: 0px;">是否高亮</p> <div *ngIf="canvasAssetObj.InteractiveMode == 0">
<div> <p>宽度(像素)</p>
<input class="input" [(ngModel)]="isHighLight" type="checkbox" [disabled]="!isEditPattern"> <input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern">
<span style="font-size: 14px;">选中高亮</span> <p>高度(像素)</p>
</div> <input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern">
<div class="colorBigDiv" *ngIf="canvasAssetObj.FillMode == 0"> <p>角度</p>
<div class="colorBigTemplateDiv"> <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<span>颜色</span> <input type="number" class="smallinput" [(ngModel)]="sliderValue"
<div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}"> oninput="if(value>360)value=360;if(value<0)value=0;" (input)="assetAngleIunput()" [disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="sliderValue" (change)="assetAngleIunput()" [disabled]="!isEditPattern"></mat-slider>
</div> </div>
</div> </div>
<div class="colorDiv" *ngIf="isEditPattern"> <!-- 如果是多点连线 -->
<ul> <div *ngIf="canvasAssetObj.InteractiveMode == 1 || canvasAssetObj.InteractiveMode == 3">
<li (click)="selectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li> <p>厚度</p>
</ul> <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
</div> <input type="number" class="smallinput" [(ngModel)]="sliderValueThickness"
<span style="color: #9c9fa5;font-size: 14px;">透明度</span> oninput="if(value>999)value=999;if(value<0)value=0;" (input)="assetThicknessIunput()" [disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;" <mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="colorDivSliderValue" (change)="colorDivSliderChange()" [disabled]="!isEditPattern"></mat-slider> [(ngModel)]="sliderValueThickness" (change)="assetThicknessIunput()" [disabled]="!isEditPattern"></mat-slider>
<span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span> </div>
</div>
<div *ngFor="let item of PropertyInfos;index as key ">
<!-- 单行文本 -->
<div *ngIf="item.PropertyType == 0">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="text" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern">
</div> </div>
<!-- 多行文本 -->
<div *ngIf="item.PropertyType == 1"> <p style="margin-top: 4px;margin-bottom: 0px;">是否高亮</p>
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p> <div>
<textarea class="textarea" name="" id="" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern"></textarea> <input class="input" [(ngModel)]="isHighLight" type="checkbox" [disabled]="!isEditPattern">
<span style="font-size: 14px;">选中高亮</span>
</div> </div>
<!-- 数值 --> <div class="colorBigDiv" *ngIf="canvasAssetObj.FillMode == 0">
<div *ngIf="item.PropertyType == 2"> <div class="colorBigTemplateDiv">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p> <span>颜色</span>
<input type="number" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern"> <div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
</div>
</div>
<div class="colorDiv" *ngIf="isEditPattern">
<ul>
<li (click)="selectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li>
</ul>
</div>
<span style="color: #9c9fa5;font-size: 14px;">透明度</span>
<mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
[(ngModel)]="colorDivSliderValue" (change)="colorDivSliderChange()" [disabled]="!isEditPattern"></mat-slider>
<span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
</div> </div>
<!-- 图片数量 --> <div *ngFor="let item of PropertyInfos;index as key ">
<div *ngIf="item.PropertyType == 4" style="height: 140px;"> <!-- 单行文本 -->
<div style="position: relative;width: 100%;height: 21px;margin: 1px 0;"> <div *ngIf="item.PropertyType == 0">
<p style="width: 40%;display: inline-block;">{{item.PropertyName}}</p> <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<span style="width: 26%;text-align:right;font-size: 13px;">{{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}}</span> <input type="text" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern">
<input id="inputimg" [disabled]="!isEditPattern" *ngIf="isImgNumCss" accept="image/*" (change)="selectFile($event)" type="file" style="width: 33%;position: absolute;right: 10px;top: 1px;opacity: 0;z-index: 100;cursor: pointer;height: 21px;"> </div>
<div style="width: 33%;height: 21px;line-height: 21px;text-align: center;position: absolute;right: 10px;top: 1px;z-index: 99;border: 1px solid rgb(208, 211, 214);border-radius: 2px;font-size: 13px;cursor: pointer;" (click)="imgNumBeyond()">添加</div> <!-- 多行文本 -->
<div *ngIf="item.PropertyType == 1">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<textarea class="textarea" name="" id="" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern"></textarea>
</div>
<!-- 数值 -->
<div *ngIf="item.PropertyType == 2">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="number" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern">
</div>
<!-- 图片数量 -->
<div *ngIf="item.PropertyType == 4" style="height: 140px;">
<div style="position: relative;width: 100%;height: 21px;margin: 1px 0;">
<p style="width: 40%;display: inline-block;">{{item.PropertyName}}</p>
<span style="width: 26%;text-align:right;font-size: 13px;">{{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}}</span>
<input id="inputimg" [disabled]="!isEditPattern" *ngIf="isImgNumCss" accept="image/*" (change)="selectFile($event)" type="file" style="width: 33%;position: absolute;right: 10px;top: 1px;opacity: 0;z-index: 100;cursor: pointer;height: 21px;">
<div style="width: 33%;height: 21px;line-height: 21px;text-align: center;position: absolute;right: 10px;top: 1px;z-index: 99;border: 1px solid rgb(208, 211, 214);border-radius: 2px;font-size: 13px;cursor: pointer;" (click)="imgNumBeyond()">添加</div>
<div style="position: relative;;width: 89%;border:1px solid rgb(208, 211, 214);height: 100px;margin: 6px auto;" class="swiper-container"> <div style="position: relative;;width: 89%;border:1px solid rgb(208, 211, 214);height: 100px;margin: 6px auto;" class="swiper-container">
<div id="viewerjs" class="swiper-wrapper" [ngClass]="{'noImgCss': imagesArr.length == 0}"> <div id="viewerjs" class="swiper-wrapper" [ngClass]="{'noImgCss': imagesArr.length == 0}">
<div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"><img [src]="img.PropertyValue + '?x-oss-process=image/resize,m_fixed,h_100,w_100'" alt="" [attr.data-original]="img.PropertyValue"></div> <div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"><img [src]="img.PropertyValue + '?x-oss-process=image/resize,m_fixed,h_100,w_100'" alt="" [attr.data-original]="img.PropertyValue"></div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<span style="position: absolute;right: 2px;top: 2px;cursor: pointer;z-index: 200;" *ngIf="isEditPattern">
<mat-icon class="hoverred" (click)="deleteImg()">delete</mat-icon>
</span>
</div> </div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<span style="position: absolute;right: 2px;top: 2px;cursor: pointer;z-index: 200;" *ngIf="isEditPattern">
<mat-icon class="hoverred" (click)="deleteImg()">delete</mat-icon>
</span>
</div> </div>
</div> </div>
</div> <!-- 方向 -->
<!-- 方向 --> <div *ngIf="item.PropertyType == 5" class="selectDiv">
<div *ngIf="item.PropertyType == 5" class="selectDiv"> <p style="display: inline-block;">{{item.PropertyName}}</p>
<p style="display: inline-block;">{{item.PropertyName}}</p> <select (change)="direction(item,$event)" [disabled]="!isEditPattern">
<select (change)="direction(item,$event)" [disabled]="!isEditPattern"> <option value ="0" [selected]="item.PropertyValue ==0">东</option>
<option value ="0" [selected]="item.PropertyValue ==0">东</option> <option value ="1" [selected]="item.PropertyValue ==1">西</option>
<option value ="1" [selected]="item.PropertyValue ==1">西</option> <option value ="2" [selected]="item.PropertyValue ==2">南</option>
<option value ="2" [selected]="item.PropertyValue ==2">南</option> <option value ="3" [selected]="item.PropertyValue ==3">北</option>
<option value ="3" [selected]="item.PropertyValue ==3">北</option> <option value ="4" [selected]="item.PropertyValue ==4">东南</option>
<option value ="4" [selected]="item.PropertyValue ==4">东南</option> <option value ="5" [selected]="item.PropertyValue ==5">西南</option>
<option value ="5" [selected]="item.PropertyValue ==5">西南</option> <option value ="6" [selected]="item.PropertyValue ==6">东北</option>
<option value ="6" [selected]="item.PropertyValue ==6">东北</option> <option value ="7" [selected]="item.PropertyValue ==7">西北</option>
<option value ="7" [selected]="item.PropertyValue ==7">西北</option> </select>
</select> </div>
</div> <!-- 布尔值 是1或否0 -->
<!-- 布尔值 是1或否0 --> <div *ngIf="item.PropertyType == 6">
<div *ngIf="item.PropertyType == 6"> <p>{{item.PropertyName}}</p>
<p>{{item.PropertyName}}</p> <input [disabled]="!isEditPattern" [checked]="item.PropertyValue == 1" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span>
<input [disabled]="!isEditPattern" [checked]="item.PropertyValue == 1" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span> <input [disabled]="!isEditPattern" [checked]="item.PropertyValue == 0" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
<input [disabled]="!isEditPattern" [checked]="item.PropertyValue == 0" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span> </div>
</div> <!-- 供给区域 -->
<!-- 供给区域 --> <div *ngIf="item.PropertyType == 7" class="selectDiv">
<div *ngIf="item.PropertyType == 7" class="selectDiv"> <p style="display: inline-block;">{{item.PropertyName}}</p>
<p style="display: inline-block;">{{item.PropertyName}}</p> <select (change)="supplyArea(item,$event)" [disabled]="!isEditPattern">
<select (change)="supplyArea(item,$event)" [disabled]="!isEditPattern"> <option value ="0" [selected]="item.PropertyValue ==0">全部</option>
<option value ="0" [selected]="item.PropertyValue ==0">全部</option> <option value ="1" [selected]="item.PropertyValue ==1">高区</option>
<option value ="1" [selected]="item.PropertyValue ==1">高区</option> <option value ="2" [selected]="item.PropertyValue ==2">中区</option>
<option value ="2" [selected]="item.PropertyValue ==2">中区</option> <option value ="3" [selected]="item.PropertyValue ==3">低区</option>
<option value ="3" [selected]="item.PropertyValue ==3">低区</option> <option value ="4" [selected]="item.PropertyValue ==4">高中区</option>
<option value ="4" [selected]="item.PropertyValue ==4">高中区</option> <option value ="5" [selected]="item.PropertyValue ==5">高低区</option>
<option value ="5" [selected]="item.PropertyValue ==5">高低区</option> <option value ="6" [selected]="item.PropertyValue ==6">中低区</option>
<option value ="6" [selected]="item.PropertyValue ==6">中低区</option> </select>
</select> </div>
</div> <!-- 供给类型 -->
<!-- 供给类型 --> <div *ngIf="item.PropertyType == 8" class="selectDiv">
<div *ngIf="item.PropertyType == 8" class="selectDiv"> <p style="display: inline-block;">{{item.PropertyName}}</p>
<p style="display: inline-block;">{{item.PropertyName}}</p> <select (change)="supplyType(item,$event)" value="4" [disabled]="!isEditPattern">
<select (change)="supplyType(item,$event)" value="4" [disabled]="!isEditPattern"> <option value ="0" [selected]="item.PropertyValue ==0">消火栓</option>
<option value ="0" [selected]="item.PropertyValue ==0">消火栓</option> <option value ="1" [selected]="item.PropertyValue ==1">喷淋</option>
<option value ="1" [selected]="item.PropertyValue ==1">喷淋</option> <option value ="2" [selected]="item.PropertyValue ==2">水幕</option>
<option value ="2" [selected]="item.PropertyValue ==2">水幕</option> <option value ="3" [selected]="item.PropertyValue ==3">泡沫</option>
<option value ="3" [selected]="item.PropertyValue ==3">泡沫</option> <option value ="4" [selected]="item.PropertyValue ==4">消防</option>
<option value ="4" [selected]="item.PropertyValue ==4">消防</option> </select>
</select> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- 消防要素 --> <!-- 消防要素 -->
<div id="firecategories" class="firecategories" style="height: 50%;"> <div id="firecategories" class="firecategories" style="height: 50%;">
<!-- 素材属性div鼠标拖动div --> <!-- 素材属性div鼠标拖动div -->
<div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;" (mousedown)="firecategoriesDivMouseDown($event)"></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 class="title">
<div> <div>
<span style="user-select: none">消防要素</span> <span style="user-select: none">消防要素</span>
</div>
</div> </div>
</div>
<div class="firecategoriesTree"> <div class="firecategoriesTree">
<!-- 消防列表树写在这里 --> <!-- 消防列表树写在这里 -->
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" > <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
<mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" > <mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" >
<button mat-icon-button disabled></button> <button mat-icon-button disabled></button>
<span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}"> <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
{{node.name}} {{node.name}}
</span> </span>
<span *ngIf="node.isTemplate">({{node.children.length}})</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> <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
</mat-tree-node> </mat-tree-node>
<mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)"> <mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)">
<button mat-icon-button <button mat-icon-button
matTreeNodeToggle matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name"> [attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror"> <mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon> </mat-icon>
</button> </button>
<span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}"> <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
{{node.name}} {{node.name}}
</span> </span>
<span *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</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> <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
</mat-tree-node> </mat-tree-node>
</mat-tree> </mat-tree>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!--功能区 --> <!--功能区 -->
</div>
</div> </div>

15
src/app/ui/collection-tools/collection-tools.component.ts
Unescape View File

@ -9,6 +9,7 @@ import {FlatTreeControl} from '@angular/cdk/tree';
import {WorkingAreaComponent} from '../../working-area/working-area.component' import {WorkingAreaComponent} from '../../working-area/working-area.component'
import {CanvasShareDataService} from '../../canvas-share-data.service' //引入服务 import {CanvasShareDataService} from '../../canvas-share-data.service' //引入服务
import Viewer from 'viewerjs'; import Viewer from 'viewerjs';
import { MaskLayerService } from 'src/app/mask-layer.service';
@Component({ @Component({
selector: 'app-collection-tools', selector: 'app-collection-tools',
templateUrl: './collection-tools.component.html', templateUrl: './collection-tools.component.html',
@ -18,7 +19,7 @@ export class CollectionToolsComponent implements OnInit {
@ViewChild('canvas') canvas:WorkingAreaComponent; //父组件中获得子组件的引用 @ViewChild('canvas') canvas:WorkingAreaComponent; //父组件中获得子组件的引用
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService) { } constructor(private maskLayerService:MaskLayerService, private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService) { }
// tree配置 // tree配置
private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数 private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
return { return {
@ -518,7 +519,7 @@ export class CollectionToolsComponent implements OnInit {
//更新用于统计的数据 //更新用于统计的数据
this.canvasData.updateBuildingData() this.canvasData.updateBuildingData()
this.maskLayerService.sendMessage(true)
if (this.selectingSitePlan && this.selectingSitePlan.id) { if (this.selectingSitePlan && this.selectingSitePlan.id) {
this.saveNum = [] this.saveNum = []
let SitePlanData = JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData)); let SitePlanData = JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData));
@ -553,6 +554,7 @@ export class CollectionToolsComponent implements OnInit {
this.http.post("/api/CompanyAccount/SitePlanData",SitePlanData).subscribe(data => { this.http.post("/api/CompanyAccount/SitePlanData",SitePlanData).subscribe(data => {
this.saveNum.push("1") this.saveNum.push("1")
if(this.saveNum.length == 5){ if(this.saveNum.length == 5){
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false this.canvasData.isChange = false
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -571,6 +573,7 @@ export class CollectionToolsComponent implements OnInit {
this.http.post("/api/CompanyAccount/CompanyData",CompanyData).subscribe(data => { this.http.post("/api/CompanyAccount/CompanyData",CompanyData).subscribe(data => {
this.saveNum.push("1") this.saveNum.push("1")
if(this.saveNum.length == 5){ if(this.saveNum.length == 5){
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false this.canvasData.isChange = false
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -590,6 +593,7 @@ export class CollectionToolsComponent implements OnInit {
this.http.post("/api/CompanyAccount/CompanyAdjoins/Batch",CompanyAdjoins).subscribe(data => { this.http.post("/api/CompanyAccount/CompanyAdjoins/Batch",CompanyAdjoins).subscribe(data => {
this.saveNum.push("1") this.saveNum.push("1")
if(this.saveNum.length == 5){ if(this.saveNum.length == 5){
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false this.canvasData.isChange = false
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -609,6 +613,7 @@ export class CollectionToolsComponent implements OnInit {
this.http.post("/api/CompanyAccount/CompanyImportantLocations/Batch",CompanyImportantLocations).subscribe(data => { this.http.post("/api/CompanyAccount/CompanyImportantLocations/Batch",CompanyImportantLocations).subscribe(data => {
this.saveNum.push("1") this.saveNum.push("1")
if(this.saveNum.length == 5){ if(this.saveNum.length == 5){
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false this.canvasData.isChange = false
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -628,6 +633,7 @@ export class CollectionToolsComponent implements OnInit {
this.http.post("/api/CompanyAccount/CompanyFacilityAssets/Batch",CompanyFacilityAssets).subscribe(data => { this.http.post("/api/CompanyAccount/CompanyFacilityAssets/Batch",CompanyFacilityAssets).subscribe(data => {
this.saveNum.push("1") this.saveNum.push("1")
if(this.saveNum.length == 5){ if(this.saveNum.length == 5){
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false this.canvasData.isChange = false
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -648,6 +654,7 @@ export class CollectionToolsComponent implements OnInit {
this.http.post("/api/CompanyAccount/BuildingAreaData",SitePlanData).subscribe(data => { this.http.post("/api/CompanyAccount/BuildingAreaData",SitePlanData).subscribe(data => {
this.saveNum.push("1") this.saveNum.push("1")
if(this.saveNum.length == 5){ if(this.saveNum.length == 5){
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false this.canvasData.isChange = false
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -666,6 +673,7 @@ export class CollectionToolsComponent implements OnInit {
this.http.post("/api/CompanyAccount/BuildingData",CompanyData).subscribe(data => { this.http.post("/api/CompanyAccount/BuildingData",CompanyData).subscribe(data => {
this.saveNum.push("1") this.saveNum.push("1")
if(this.saveNum.length == 5){ if(this.saveNum.length == 5){
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false this.canvasData.isChange = false
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -685,6 +693,7 @@ export class CollectionToolsComponent implements OnInit {
this.http.post(`/api/CompanyAccount/BuildingAdjoins/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingAdjoins).subscribe(data => { this.http.post(`/api/CompanyAccount/BuildingAdjoins/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingAdjoins).subscribe(data => {
this.saveNum.push("1") this.saveNum.push("1")
if(this.saveNum.length == 5){ if(this.saveNum.length == 5){
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false this.canvasData.isChange = false
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -704,6 +713,7 @@ export class CollectionToolsComponent implements OnInit {
this.http.post(`/api/CompanyAccount/BuildingImportantLocations/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingImportantLocations).subscribe(data => { this.http.post(`/api/CompanyAccount/BuildingImportantLocations/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingImportantLocations).subscribe(data => {
this.saveNum.push("1") this.saveNum.push("1")
if(this.saveNum.length == 5){ if(this.saveNum.length == 5){
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false this.canvasData.isChange = false
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -723,6 +733,7 @@ export class CollectionToolsComponent implements OnInit {
this.http.post(`/api/CompanyAccount/BuildingFacilityAssets/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingFacilityAssets).subscribe(data => { this.http.post(`/api/CompanyAccount/BuildingFacilityAssets/Batch?buildingId=${this.canvasData.selectStorey.buildingId}`,buildingFacilityAssets).subscribe(data => {
this.saveNum.push("1") this.saveNum.push("1")
if(this.saveNum.length == 5){ if(this.saveNum.length == 5){
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false this.canvasData.isChange = false
let config = new MatSnackBarConfig(); let config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';

1
src/app/ui/ui.component.html
Unescape View File

@ -1 +0,0 @@
<p>ui works!</p>
Write Preview
Loading…
Cancel
Save