shaojiahao
/
ShangHaiAcquisitionPlatform
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[完善] 总平面图完善

master
陈鹏飞 4 years ago
parent
38fa37487b
commit
30900a1386
3 changed files with 426 additions and 435 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/app/navigation/navigation.component.html
  2. 722
      src/app/ui/collection-tools/collection-tools.component.html
  3. 137
      src/app/ui/collection-tools/collection-tools.component.ts

2
src/app/navigation/navigation.component.html
Unescape View File

@ -8,7 +8,7 @@
<!-- basicinfo -->
<li [routerLink]="['/datacollection/basicinfo']" routerLinkActive="router-link-active">基本信息</li>
<!-- plan -->
<li [routerLink]="['/datacollection/collectionTools']" routerLinkActive="router-link-active">层平面图</li>
<li [routerLink]="['/datacollection/collectionTools']" routerLinkActive="router-link-active">平面图</li>
<!-- allaround -->
<li [routerLink]="['/datacollection/allaround']" routerLinkActive="router-link-active">四周毗邻</li>
<!-- fire-fighting-device -->

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

@ -44,6 +44,10 @@
<!-- 头部操作栏 -->
<div class="headerOperate">
<button mat-button (click)="checkedBuilding({name:'总平面图'},-1)"
[ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">
<span>总平面图</span>
</button>
<button mat-button *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" class="bigeditdeletebtn"
[ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
<span>{{item.name}}</span>
@ -61,404 +65,406 @@
<!--功能区 -->
<div class="functionalDomain">
<div class='functionalDomainContent' id="functionalDomainContent">
<div class='functionalDomainContent' id="functionalDomainContent">
<!-- H5Canvas -->
<app-working-area #canvas></app-working-area>
<!-- H5Canvas -->
<div id="leftDiv" (mousewheel)="$event.stopPropagation()" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true}" style="user-select: none">
<div class="leftDragDiv" (mousedown)="leftDivMouseDown($event)"></div>
<!-- 平面图 -->
<div class="planarGraph">
<div class="planarGraphHeader" (click)='togglePlanarGraph()'>
<mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon>
<label class="overflowText" style="font-weight: 550;">平面图</label>
<label class="hover" *ngIf="isEditPattern">
<mat-icon (click)='foundPanel($event)'>add</mat-icon>
</label>
</div>
<div [hidden]="!togglePlane" >
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index"
[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>
<a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern" title="替换底图" >
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
<mat-icon class="matIcons">photo_size_select_actual</mat-icon>
</a>
<a href="javascript:;" id="a-uploadImg" *ngIf="selectSitePlanIndex==key && !item.imageUrl && isEditPattern" title="上传底图" >
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
<img src="../../../assets/images/upload.jpg">
</a>
<!-- 右边定位操作栏 -->
<div id="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern" (click)="$event.stopPropagation();">
<p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up</mat-icon>
</p>
<p class="functionButton">
<mat-icon class="functionIcon" title="编辑属性" (click)='editPlaneData(item)'>edit</mat-icon>
<mat-icon class="functionIcon" title="删除" (click)="deletePlaneData(item)">delete</mat-icon>
</p>
<p class="functionButton">
<mat-icon class="functionIcon" title="旋转底图" (click)='revolveImg(item)'>cached</mat-icon>
<mat-icon class="functionIcon" title="复制" (click)="duplicateLayer(item)">library_books</mat-icon>
</p>
<p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="下移" (click)='moveDown(item,key)'>keyboard_arrow_down</mat-icon>
</p>
<!-- H5Canvas -->
<app-working-area #canvas></app-working-area>
<!-- H5Canvas -->
<div id="leftDiv" (mousewheel)="$event.stopPropagation()" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true}" style="user-select: none">
<div class="leftDragDiv" (mousedown)="leftDivMouseDown($event)"></div>
<!-- 平面图 -->
<div class="planarGraph">
<div class="planarGraphHeader" (click)='togglePlanarGraph()'>
<mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon>
<label class="overflowText" style="font-weight: 550;">平面图</label>
<label class="hover" *ngIf="isEditPattern">
<mat-icon (click)='foundPanel($event)'>add</mat-icon>
</label>
</div>
<div [hidden]="!togglePlane" >
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index"
[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>
<a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern" title="替换底图" >
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
<mat-icon class="matIcons">photo_size_select_actual</mat-icon>
</a>
<a href="javascript:;" id="a-uploadImg" *ngIf="selectSitePlanIndex==key && !item.imageUrl && isEditPattern" title="上传底图" >
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
<img src="../../../assets/images/upload.jpg">
</a>
<!-- 右边定位操作栏 -->
<div id="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern" (click)="$event.stopPropagation();">
<p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up</mat-icon>
</p>
<p class="functionButton">
<mat-icon class="functionIcon" title="编辑属性" (click)='editPlaneData(item)'>edit</mat-icon>
<mat-icon class="functionIcon" title="删除" (click)="deletePlaneData(item)">delete</mat-icon>
</p>
<p class="functionButton">
<mat-icon class="functionIcon" title="旋转底图" (click)='revolveImg(item)'>cached</mat-icon>
<mat-icon class="functionIcon" title="复制" (click)="duplicateLayer(item)">library_books</mat-icon>
</p>
<p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="下移" (click)='moveDown(item,key)'>keyboard_arrow_down</mat-icon>
</p>
</div>
<!-- 右边定位操作栏 -->
</div>
<!-- 右边定位操作栏 -->
</div>
</div>
</div>
<!-- 素材库 -->
<div id="materialBank" *ngIf="isEditPattern">
<div class="planarGraphHeader" (click)='toggleMaterial()'>
<mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon>
<label class="overflowText" style="font-weight: 550;">素材库</label>
</div>
<div style="flex: 1;overflow-y: auto;" [hidden]="!toggleMaterialBank">
<div>
<input type="text" class="searchLibrary" [(ngModel)]="searchInput" (ngModelChange)="libraryChange()">
<div class="panelLibraryFlex" *ngIf="searchLibrary.length">
<div class="imgBox" *ngFor="let items of searchLibrary;let key = index" [title]="items.name"
[ngClass]="{'selectImg': selectLibrary=='搜索' && selectImageIndex==key}" (click)='selectImg({name:"搜索"},items,key)'>
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p>
<!-- 素材库 -->
<div id="materialBank" *ngIf="isEditPattern">
<div class="planarGraphHeader" (click)='toggleMaterial()'>
<mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon>
<label class="overflowText" style="font-weight: 550;">素材库</label>
</div>
<div style="flex: 1;overflow-y: auto;" [hidden]="!toggleMaterialBank">
<div>
<input type="text" class="searchLibrary" [(ngModel)]="searchInput" (ngModelChange)="libraryChange()">
<div class="panelLibraryFlex" *ngIf="searchLibrary.length">
<div class="imgBox" *ngFor="let items of searchLibrary;let key = index" [title]="items.name"
[ngClass]="{'selectImg': selectLibrary=='搜索' && selectImageIndex==key}" (click)='selectImg({name:"搜索"},items,key)'>
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p>
</div>
</div>
</div>
</div>
<ng-container *ngIf="!searchLibrary.length">
<mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
<mat-expansion-panel (opened)='opened(item)'>
<mat-expansion-panel-header>
<label class="text">{{item.name}}</label>
</mat-expansion-panel-header>
<ng-container *ngIf="!searchLibrary.length">
<mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
<mat-expansion-panel (opened)='opened(item)'>
<mat-expansion-panel-header>
<label class="text">{{item.name}}</label>
</mat-expansion-panel-header>
<div class="panelLibraryFlex">
<div class="imgBox" *ngFor="let items of item.images;let key = index" [title]="items.name"
(click)='selectImg(item,items,key)'
[ngClass]="{'selectImg': selectLibrary==item.name && selectImageIndex==key}">
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p>
<div class="panelLibraryFlex">
<div class="imgBox" *ngFor="let items of item.images;let key = index" [title]="items.name"
(click)='selectImg(item,items,key)'
[ngClass]="{'selectImg': selectLibrary==item.name && selectImageIndex==key}">
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p>
</div>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</ng-container>
</div>
</div>
</div>
<div id="rightDiv" (mousewheel)="$event.stopPropagation()" class="functionalDomainRight publicCss " [ngClass]="{'togglePanel2': toggleExpandPanelRight==true}" style="user-select: none">
<!-- 右侧div鼠标拖动div -->
<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>
</mat-expansion-panel>
</mat-accordion>
</ng-container>
</div>
</div>
<!-- 平面图属性 -->
<div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute && !isMultipleAsset">
<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 && !isMultipleAsset">
<h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
<div *ngIf="canvasAssetObj.InteractiveMode == 0">
<p>宽度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern">
<p>高度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="sliderValue"
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 id="rightDiv" (mousewheel)="$event.stopPropagation()" class="functionalDomainRight publicCss " [ngClass]="{'togglePanel2': toggleExpandPanelRight==true}" style="user-select: none">
<!-- 右侧div鼠标拖动div -->
<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 *ngIf="canvasAssetObj.Name == '普通墙' || canvasAssetObj.Name == '承重墙'">
<p>厚度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="sliderValueThickness"
oninput="if(value>999)value=999;if(value<0)value=0;" (input)="assetThicknessIunput()" [disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="sliderValueThickness" (change)="assetThicknessIunput()" [disabled]="!isEditPattern"></mat-slider>
<!-- 平面图属性 -->
<div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute && !isMultipleAsset">
<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 && !isMultipleAsset">
<h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
<p style="margin-top: 4px;margin-bottom: 0px;">是否高亮</p>
<div>
<input class="input" [(ngModel)]="isHighLight" type="checkbox" [disabled]="!isEditPattern">
<span style="font-size: 14px;">选中高亮</span>
</div>
<div class="colorBigDiv" *ngIf="canvasAssetObj.FillMode == 0">
<div class="colorBigTemplateDiv">
<span>颜色</span>
<div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
<div *ngIf="canvasAssetObj.InteractiveMode == 0">
<p>宽度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern">
<p>高度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="sliderValue"
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 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 *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 *ngIf="canvasAssetObj.Name == '普通墙' || canvasAssetObj.Name == '承重墙'">
<p>厚度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="sliderValueThickness"
oninput="if(value>999)value=999;if(value<0)value=0;" (input)="assetThicknessIunput()" [disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="sliderValueThickness" (change)="assetThicknessIunput()" [disabled]="!isEditPattern"></mat-slider>
</div>
</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>
<p style="margin-top: 4px;margin-bottom: 0px;">是否高亮</p>
<div>
<input class="input" [(ngModel)]="isHighLight" type="checkbox" [disabled]="!isEditPattern">
<span style="font-size: 14px;">选中高亮</span>
</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 class="colorBigDiv" *ngIf="canvasAssetObj.FillMode == 0">
<div class="colorBigTemplateDiv">
<span>颜色</span>
<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 *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 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 *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 *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 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>
<!-- 如果需要导航按钮 -->
<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 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 *ngIf="item.PropertyType == 5" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select (change)="direction(item,$event)" [disabled]="!isEditPattern">
<option value ="0" [selected]="item.PropertyValue =='0'">东</option>
<option value ="1" [selected]="item.PropertyValue =='1'">西</option>
<option value ="2" [selected]="item.PropertyValue =='2'">南</option>
<option value ="3" [selected]="item.PropertyValue =='3'">北</option>
<option value ="4" [selected]="item.PropertyValue =='4'">东南</option>
<option value ="5" [selected]="item.PropertyValue =='5'">西南</option>
<option value ="6" [selected]="item.PropertyValue =='6'">东北</option>
<option value ="7" [selected]="item.PropertyValue =='7'">西北</option>
</select>
</div>
<!-- 布尔值 是1或否0 -->
<div *ngIf="item.PropertyType == 6">
<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 == '0'" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
</div>
<!-- 供给区域 -->
<div *ngIf="item.PropertyType == 7" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select (change)="supplyArea(item,$event)" [disabled]="!isEditPattern">
<option value ="0" [selected]="item.PropertyValue =='0'">全部</option>
<option value ="1" [selected]="item.PropertyValue =='1'">高区</option>
<option value ="2" [selected]="item.PropertyValue =='2'">中区</option>
<option value ="3" [selected]="item.PropertyValue =='3'">低区</option>
<option value ="4" [selected]="item.PropertyValue =='4'">高中区</option>
<option value ="5" [selected]="item.PropertyValue =='5'">高低区</option>
<option value ="6" [selected]="item.PropertyValue =='6'">中低区</option>
</select>
</div>
<!-- 供给类型 -->
<div *ngIf="item.PropertyType == 8" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select (change)="supplyType(item,$event)" value="4" [disabled]="!isEditPattern">
<option value ="0" [selected]="item.PropertyValue =='0'">消火栓</option>
<option value ="1" [selected]="item.PropertyValue =='1'">喷淋</option>
<option value ="2" [selected]="item.PropertyValue =='2'">水幕</option>
<option value ="3" [selected]="item.PropertyValue =='3'">泡沫</option>
<option value ="4" [selected]="item.PropertyValue =='4'">消防</option>
</select>
</div>
</div>
</div>
<!-- 框选多个素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && isMultipleAsset">
<div *ngIf="multipleAsset.InteractiveMode == 0">
<p>宽度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Width" (input)="multipleAssetWidthInput()" [disabled]="!isEditPattern">
<p>高度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Height" (input)="multipleAssetHeightInput()" [disabled]="!isEditPattern">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Angle"
oninput="if(value>360)value=360;if(value<0)value=0;" (input)="multipleAssetAngleInput()" [disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Angle" (change)="multipleAssetAngleInput()" [disabled]="!isEditPattern"></mat-slider>
</div>
<!-- 方向 -->
<div *ngIf="item.PropertyType == 5" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select (change)="direction(item,$event)" [disabled]="!isEditPattern">
<option value ="0" [selected]="item.PropertyValue =='0'">东</option>
<option value ="1" [selected]="item.PropertyValue =='1'">西</option>
<option value ="2" [selected]="item.PropertyValue =='2'">南</option>
<option value ="3" [selected]="item.PropertyValue =='3'">北</option>
<option value ="4" [selected]="item.PropertyValue =='4'">东南</option>
<option value ="5" [selected]="item.PropertyValue =='5'">西南</option>
<option value ="6" [selected]="item.PropertyValue =='6'">东北</option>
<option value ="7" [selected]="item.PropertyValue =='7'">西北</option>
</select>
</div>
<!-- 布尔值 是1或否0 -->
<div *ngIf="item.PropertyType == 6">
<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 == '0'" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
</div>
<!-- 供给区域 -->
<div *ngIf="item.PropertyType == 7" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select (change)="supplyArea(item,$event)" [disabled]="!isEditPattern">
<option value ="0" [selected]="item.PropertyValue =='0'">全部</option>
<option value ="1" [selected]="item.PropertyValue =='1'">高区</option>
<option value ="2" [selected]="item.PropertyValue =='2'">中区</option>
<option value ="3" [selected]="item.PropertyValue =='3'">低区</option>
<option value ="4" [selected]="item.PropertyValue =='4'">高中区</option>
<option value ="5" [selected]="item.PropertyValue =='5'">高低区</option>
<option value ="6" [selected]="item.PropertyValue =='6'">中低区</option>
</select>
</div>
<!-- 供给类型 -->
<div *ngIf="item.PropertyType == 8" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select (change)="supplyType(item,$event)" value="4" [disabled]="!isEditPattern">
<option value ="0" [selected]="item.PropertyValue =='0'">消火栓</option>
<option value ="1" [selected]="item.PropertyValue =='1'">喷淋</option>
<option value ="2" [selected]="item.PropertyValue =='2'">水幕</option>
<option value ="3" [selected]="item.PropertyValue =='3'">泡沫</option>
<option value ="4" [selected]="item.PropertyValue =='4'">消防</option>
</select>
</div>
</div>
<!-- 如果是多点连线 -->
<div *ngIf="multipleAsset.InteractiveMode == 1 || multipleAsset.InteractiveMode == 3">
<p>厚度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Thickness"
oninput="if(value>999)value=999;if(value<0)value=0;" (input)="multipleAssetThicknessInput()" [disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Thickness" (change)="multipleAssetThicknessInput()" [disabled]="!isEditPattern"></mat-slider>
</div>
</div>
<div class="colorBigDiv" *ngIf="multipleAsset.FillMode == 0">
<div class="colorBigTemplateDiv">
<span>颜色</span>
<div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
<!-- 框选多个素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && isMultipleAsset">
<div *ngIf="multipleAsset.InteractiveMode == 0">
<p>宽度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Width" (input)="multipleAssetWidthInput()" [disabled]="!isEditPattern">
<p>高度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Height" (input)="multipleAssetHeightInput()" [disabled]="!isEditPattern">
<p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Angle"
oninput="if(value>360)value=360;if(value<0)value=0;" (input)="multipleAssetAngleInput()" [disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Angle" (change)="multipleAssetAngleInput()" [disabled]="!isEditPattern"></mat-slider>
</div>
</div>
<div class="colorDiv" *ngIf="isEditPattern">
<ul>
<li (click)="multipleAssetSelectcolor(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)="multipleColorDivSliderChange()" [disabled]="!isEditPattern"></mat-slider>
<span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
</div>
<div *ngFor="let item of multipleAsset.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" [name]="item.PropertyName" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern">
</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="" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(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" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern">
</div>
<!-- 方向 -->
<!-- <div *ngIf="item.PropertyType == 5 " class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="direction(item,$event)" [disabled]="!isEditPattern">
<option value ="0" [selected]="item.PropertyValue =='0'">东</option>
<option value ="1" [selected]="item.PropertyValue =='1'">西</option>
<option value ="2" [selected]="item.PropertyValue =='2'">南</option>
<option value ="3" [selected]="item.PropertyValue =='3'">北</option>
<option value ="4" [selected]="item.PropertyValue =='4'">东南</option>
<option value ="5" [selected]="item.PropertyValue =='5'">西南</option>
<option value ="6" [selected]="item.PropertyValue =='6'">东北</option>
<option value ="7" [selected]="item.PropertyValue =='7'">西北</option>
</select>
</div> -->
<!-- 布尔值 是1或否0 -->
<div *ngIf="item.PropertyType == 6">
<p>{{item.PropertyName}}</p>
<input value='1' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'1')"><span>是</span>
<input value='0' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'0')"><span>否</span>
<!-- 如果是多点连线 -->
<div *ngIf="multipleAsset.InteractiveMode == 1 || multipleAsset.InteractiveMode == 3">
<p>厚度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Thickness"
oninput="if(value>999)value=999;if(value<0)value=0;" (input)="multipleAssetThicknessInput()" [disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Thickness" (change)="multipleAssetThicknessInput()" [disabled]="!isEditPattern"></mat-slider>
</div>
</div>
<!-- 供给区域 -->
<div *ngIf="item.PropertyType == 7" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern">
<option value ="0">全部</option>
<option value ="1">高区</option>
<option value ="2">中区</option>
<option value ="3">低区</option>
<option value ="4">高中区</option>
<option value ="5">高低区</option>
<option value ="6">中低区</option>
</select>
<div class="colorBigDiv" *ngIf="multipleAsset.FillMode == 0">
<div class="colorBigTemplateDiv">
<span>颜色</span>
<div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
</div>
</div>
<div class="colorDiv" *ngIf="isEditPattern">
<ul>
<li (click)="multipleAssetSelectcolor(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)="multipleColorDivSliderChange()" [disabled]="!isEditPattern"></mat-slider>
<span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
</div>
<!-- 供给类型 -->
<div *ngIf="item.PropertyType == 8" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern">
<option value ="0">消火栓</option>
<option value ="1">喷淋</option>
<option value ="2">水幕</option>
<option value ="3">泡沫</option>
<option value ="4">消防</option>
</select>
<div *ngFor="let item of multipleAsset.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" [name]="item.PropertyName" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern">
</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="" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(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" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern">
</div>
<!-- 方向 -->
<!-- <div *ngIf="item.PropertyType == 5 " class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="direction(item,$event)" [disabled]="!isEditPattern">
<option value ="0" [selected]="item.PropertyValue =='0'">东</option>
<option value ="1" [selected]="item.PropertyValue =='1'">西</option>
<option value ="2" [selected]="item.PropertyValue =='2'">南</option>
<option value ="3" [selected]="item.PropertyValue =='3'">北</option>
<option value ="4" [selected]="item.PropertyValue =='4'">东南</option>
<option value ="5" [selected]="item.PropertyValue =='5'">西南</option>
<option value ="6" [selected]="item.PropertyValue =='6'">东北</option>
<option value ="7" [selected]="item.PropertyValue =='7'">西北</option>
</select>
</div> -->
<!-- 布尔值 是1或否0 -->
<div *ngIf="item.PropertyType == 6">
<p>{{item.PropertyName}}</p>
<input value='1' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'1')"><span>是</span>
<input value='0' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'0')"><span>否</span>
</div>
<!-- 供给区域 -->
<div *ngIf="item.PropertyType == 7" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern">
<option value ="0">全部</option>
<option value ="1">高区</option>
<option value ="2">中区</option>
<option value ="3">低区</option>
<option value ="4">高中区</option>
<option value ="5">高低区</option>
<option value ="6">中低区</option>
</select>
</div>
<!-- 供给类型 -->
<div *ngIf="item.PropertyType == 8" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern">
<option value ="0">消火栓</option>
<option value ="1">喷淋</option>
<option value ="2">水幕</option>
<option value ="3">泡沫</option>
<option value ="4">消防</option>
</select>
</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 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>
<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" >
<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)" >
<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;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" >
<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)">
<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>
<mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)">
<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>
</div>
</div>

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

@ -3,12 +3,12 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import {leftFunctionalDomainComponent,editPlaneFigureComponent} from './leftFunctionalDomain'
import Swiper from 'swiper';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {FlatTreeControl} from '@angular/cdk/tree';
import {WorkingAreaComponent} from '../../working-area/working-area.component'
import {CanvasShareDataService} from '../../canvas-share-data.service' //引入服务
import Viewer from 'viewerjs';
import Swiper from 'swiper';
import * as ObjectID from 'bson-objectid';
import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
@Component({
@ -48,9 +48,9 @@ export class CollectionToolsComponent implements OnInit {
selected = "1" //图标大小选择框
allBuildings //该单位所有建筑
beforeOneCheckedBuilding:any; //当前点击选择的建筑
checkedBuildingIndex:number = 0; //当前点击选择的建筑index
isEditPat:boolean = true; //当前是否是编辑模式
beforeOneCheckedBuilding:any = {name:"总平面图"}; //当前点击选择的建筑
checkedBuildingIndex:number = -1 //当前点击选择的建筑index
isEditPat:boolean = true //当前是否是编辑模式
assetName:String//素材名称
assetWidth:number//素材宽度
@ -306,7 +306,7 @@ export class CollectionToolsComponent implements OnInit {
formData.append("file",file)
await new Promise((resolve,reject)=>{
this.http.delete(`/api/Objects/WebPlan2D/${companyId}/${file.name}?x-oss-process=image/resize,m_fixed,h_100,w_100`).subscribe(data=>{
console.log('删除缩略图成功')
// console.log('删除缩略图成功')
resolve('删除缩略图成功')
})
})
@ -440,13 +440,10 @@ export class CollectionToolsComponent implements OnInit {
this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
this.canvasData.isChange = true
}
isMultiSelect:boolean = false; // 多选/单选 切换
changeMultiSelect (e) { this.canvas.setMulitSelect(this.isMultiSelect) }
isShowLegend:boolean = true; //图例是否显示
changeLegend (e) { this.canvasData.selectPanelPoint.BackgroundImageUrl? null : this.canvas.setLegendVisible(this.isShowLegend) }
isMultipleAsset:boolean = false//框选多个素材属性显隐
multipleAsset:any = {
Width:null,
@ -459,7 +456,6 @@ export class CollectionToolsComponent implements OnInit {
multipleAssetData:any//当前多选的素材
firstMultipleAssetData:any//当前多选的第一个素材
ngOnInit(): void {
let _this = this
AxMessageSystem.addListener('selectionChanged', ()=>{
if(this.canvas.selection.size() == 1){//如果是单选
@ -513,6 +509,8 @@ export class CollectionToolsComponent implements OnInit {
}, this)
this.getAllLibrary()
this.getAllBuildings()
let that = this
window.setTimeout(()=>{
document.getElementById("functionalDomainContent").oncontextmenu = function (event) {
@ -521,7 +519,7 @@ export class CollectionToolsComponent implements OnInit {
event.preventDefault();
};
})
}
//多选宽度共同改变
multipleAssetWidthInput(){
@ -623,11 +621,13 @@ export class CollectionToolsComponent implements OnInit {
})
}
ngAfterViewInit(): void {
this.getAllBuildings(true)
// 监听canvas组件新增素材事件
this.canvas.on("canvasDataChanged",obj=>{
this.getSitePlan()
//监听数据变化后
this.canvas.on('canvasDataChanged',()=>{
// 收到数据表示共享数据发生变化
this.renovateTreeData(false)
})
});
}
copyAssetData:any //存储用于复制的素材
@ -647,12 +647,19 @@ export class CollectionToolsComponent implements OnInit {
}
basicInfo:boolean = true //基本信息名称显隐
wantToWork:boolean = true //想定作业名称显隐
//点击基本信息名称
basicInfoClick(){
this.basicInfo = !this.basicInfo
this.canvas.setNameVisible(this.basicInfo,0)
}
// //点击想定作业名称
// wantToWorkClick(){
// this.wantToWork = !this.wantToWork
// this.canvas.setNameVisible(this.basicInfo,1)
// }
isEditPattern:boolean = true //是否为编辑模式
//进入编辑模式
editpat(){
@ -678,7 +685,7 @@ export class CollectionToolsComponent implements OnInit {
//更新用于统计的数据
this.canvasData.updateBuildingData()
if (this.selectingSitePlan && this.selectingSitePlan.id) {
this.saveNum = []
let SitePlanData = JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData));
@ -761,7 +768,11 @@ export class CollectionToolsComponent implements OnInit {
config.verticalPosition = 'top';
config.duration = 3000
this.canvasData.isChange = true
this.snackBar.open('单位毗邻保存失败','确定',config);
if(err == 'infos 有重复方向！'){
this.snackBar.open('单位毗邻同步失败,存在相同方向','确定',config);
}else{
this.snackBar.open('单位毗邻同步失败','确定',config);
}
})
//批量保存单位重点部位
@ -780,7 +791,7 @@ export class CollectionToolsComponent implements OnInit {
config.verticalPosition = 'top';
config.duration = 3000
this.canvasData.isChange = true
this.snackBar.open('单位重点部位保存失败','确定',config);
this.snackBar.open('单位重点部位同步失败','确定',config);
})
//批量保存单位消防设施素材
@ -799,7 +810,7 @@ export class CollectionToolsComponent implements OnInit {
config.verticalPosition = 'top';
config.duration = 3000
this.canvasData.isChange = true
this.snackBar.open('单位消防设施素材保存失败','确定',config);
this.snackBar.open('单位消防设施素材同步失败','确定',config);
})
}else{ //如果是建筑
@ -856,7 +867,11 @@ export class CollectionToolsComponent implements OnInit {
config.verticalPosition = 'top';
config.duration = 3000
this.canvasData.isChange = true
this.snackBar.open('建筑毗邻保存失败','确定',config);
if(err == 'infos 有重复方向！'){
this.snackBar.open('建筑毗邻同步失败,存在相同方向','确定',config);
}else{
this.snackBar.open('建筑毗邻同步失败','确定',config);
}
})
//批量保存建筑重点部位
@ -875,7 +890,7 @@ export class CollectionToolsComponent implements OnInit {
config.verticalPosition = 'top';
config.duration = 3000
this.canvasData.isChange = true
this.snackBar.open('建筑重点部位保存失败','确定',config);
this.snackBar.open('建筑重点部位同步失败','确定',config);
})
//批量保存建筑消防设施素材
@ -894,7 +909,7 @@ export class CollectionToolsComponent implements OnInit {
config.verticalPosition = 'top';
config.duration = 3000
this.canvasData.isChange = true
this.snackBar.open('建筑消防设施素材保存失败','确定',config);
this.snackBar.open('建筑消防设施素材同步失败','确定',config);
})
}
@ -909,14 +924,9 @@ export class CollectionToolsComponent implements OnInit {
}
//获得所有的建筑物
getAllBuildings(init:boolean = false){
this.http.get("/api/CompanyAccount/Buildings").subscribe((data:any)=>{
getAllBuildings(){
this.http.get("/api/CompanyAccount/Buildings").subscribe(data=>{
this.allBuildings = data
if (init) {
this.checkedBuildingIndex = 0
data && data.length? this.beforeOneCheckedBuilding = data[0] : this.beforeOneCheckedBuilding = {id:null, buildingTypes:[{id:null}]}
this.getBuildingSitePlan(this.beforeOneCheckedBuilding)
}
})
}
@ -930,7 +940,7 @@ export class CollectionToolsComponent implements OnInit {
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('创建成功','确定',config);
this.allBuildings.length? this.getAllBuildings() : this.getAllBuildings(true)
this.getAllBuildings()
}else if (data == "创建失败") {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
@ -1008,13 +1018,18 @@ export class CollectionToolsComponent implements OnInit {
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('删除成功','确定',config);
this.getAllBuildings(true)
this.http.get("/api/CompanyAccount/Buildings").subscribe(data=>{
this.allBuildings = data
this.beforeOneCheckedBuilding = {name:"总平面图"}
this.checkedBuildingIndex = -1
this.getSitePlan()
})
},err=>{
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('删除失败','确定',config);
this.getAllBuildings(true)
this.getAllBuildings()
})
}
}
@ -1023,7 +1038,7 @@ export class CollectionToolsComponent implements OnInit {
//处理 tree 数据结构
handleTreeData (storeyData) {
this.hideAllTreenode = true
this.storeyData = storeyData
let data = this.allFireElements //所有消防要素模板
let treeData = [] //tree型 处理完成后的数据
@ -1062,6 +1077,7 @@ export class CollectionToolsComponent implements OnInit {
if (!element.parentId) { treeData.push(element) }
});
this.dataSource.data = treeData
this.treeControl.expandAll()
}
@ -1173,31 +1189,6 @@ export class CollectionToolsComponent implements OnInit {
this.canvas.setIconVisible(iconVisibleArr,!node.isLook)
}
//计算 可视区域内宽度, 是否缩放背景图
backGroundScale () {
// let that = this
// let dad = document.querySelector('.functionalDomainContent').clientWidth
// let dadHeight = document.querySelector('.functionalDomainContent').clientHeight
// let left = document.querySelector('.functionalDomainLeft').clientWidth
// let right = document.querySelector('.functionalDomainRight').clientWidth
// let imgWidth = dad - left - right//可视区域内 宽度
// let img = new Image()
// img.src = this.selectingSitePlan.imageUrl;
// img.onload = function(){
// if (img.height > dadHeight && img.width > imgWidth) {
// let width = imgWidth/img.width
// let height = dadHeight/img.height
// that.canvas.setBackgroundScale((width>height? height : width)-0.005)
// return
// } else if (img.height > dadHeight) {
// that.canvas.setBackgroundScale((dadHeight/img.height)-0.005)
// return
// } else if (img.width > imgWidth) {
// that.canvas.setBackgroundScale((imgWidth/img.width)-0.005)
// return
// }
// };
}
//封装 刷新 tree 数据
async renovateTreeData (isRefresh:boolean = true) {
@ -1224,6 +1215,7 @@ export class CollectionToolsComponent implements OnInit {
}
}
this.handleTreeData(storeyData) //处理tree数据结构
}
@ -1419,26 +1411,19 @@ export class CollectionToolsComponent implements OnInit {
//新增平面图 楼层/区域
foundPanel (e) {
e.stopPropagation()
if (this.beforeOneCheckedBuilding.id) {
let data = {
isBuilding: this.checkedBuildingIndex==-1? false:true,
Panel: this.beforeOneCheckedBuilding,
order: this.sitePlanData.length? this.sitePlanData[this.sitePlanData.length-1].order+1:0,
}
let dialogRef = this.dialog.open(leftFunctionalDomainComponent,{data});
dialogRef.afterClosed().subscribe(data=>{
if (data =='总平面图') {
this.renovateSitePlan()
} else if (data =='建筑') {
this.renovateBuilding()
}
})
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请选择建筑','确定',config);
let data = {
isBuilding: this.checkedBuildingIndex==-1? false:true,
Panel: this.beforeOneCheckedBuilding,
order: this.sitePlanData.length? this.sitePlanData[this.sitePlanData.length-1].order+1:0,
}
let dialogRef = this.dialog.open(leftFunctionalDomainComponent,{data});
dialogRef.afterClosed().subscribe(data=>{
if (data =='总平面图') {
this.renovateSitePlan()
} else if (data =='建筑') {
this.renovateBuilding()
}
})
}
//编辑平面图 楼层/区域

Write Preview
Loading…
Cancel
Save