|
|
|
|
@ -0,0 +1,466 @@
|
|
|
|
|
<div class="content"> |
|
|
|
|
<!-- header头部 --> |
|
|
|
|
<div class="header"> |
|
|
|
|
<button mat-button (click)="toggle()"> |
|
|
|
|
<mat-icon style="vertical-align: middle;">toc</mat-icon> |
|
|
|
|
</button> |
|
|
|
|
<button mat-button (click)="toggle2()"> |
|
|
|
|
<mat-icon style="vertical-align: middle;">list</mat-icon> |
|
|
|
|
</button> |
|
|
|
|
|
|
|
|
|
<span [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()"> |
|
|
|
|
基本信息名称 |
|
|
|
|
<mat-icon>visibility</mat-icon> |
|
|
|
|
</span> |
|
|
|
|
|
|
|
|
|
<span class="marginLeftRight"> |
|
|
|
|
<mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选 |
|
|
|
|
</span> |
|
|
|
|
<span class="marginLeftRight"> |
|
|
|
|
<mat-checkbox color="primary" [(ngModel)]="isShowLegend" (change)='changeLegend($event)' [disabled]='this.canvasData.selectPanelPoint.BackgroundImageUrl'></mat-checkbox> 显示图例 |
|
|
|
|
</span> |
|
|
|
|
|
|
|
|
|
<button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern"> |
|
|
|
|
复制<mat-icon>library_books</mat-icon> |
|
|
|
|
</button> |
|
|
|
|
<button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern"> |
|
|
|
|
粘贴<mat-icon>screen_share</mat-icon> |
|
|
|
|
</button> |
|
|
|
|
|
|
|
|
|
<span title="适应缩放" class="zoom" (click)="adaptZoom()"> |
|
|
|
|
<img src="/assets/images/适应缩放.png" alt=""> |
|
|
|
|
适应缩放 |
|
|
|
|
</span> |
|
|
|
|
<span title="重置缩放" class="zoom" (click)="resetZoom()"> |
|
|
|
|
<img src="/assets/images/重置缩放.png" alt=""> |
|
|
|
|
重置缩放 |
|
|
|
|
</span> |
|
|
|
|
<span style="position: absolute;right: 60px;cursor: pointer;"> |
|
|
|
|
<mat-icon title="查看/编辑模式" (click)="lookpat()" *ngIf="isEditPattern">tv</mat-icon> |
|
|
|
|
<mat-icon title="查看/编辑模式" (click)="editpat()" *ngIf="!isEditPattern">create</mat-icon> |
|
|
|
|
<mat-icon *ngIf="isEditPattern " style="margin-left: 12px;" title="保存" (click)="saveSite()">description</mat-icon> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 头部操作栏 --> |
|
|
|
|
<div class="headerOperate"> |
|
|
|
|
<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> |
|
|
|
|
<span class="editdeletebtn" *ngIf="isEditPattern"> |
|
|
|
|
<mat-icon (click)="editBuilding($event,item)" |
|
|
|
|
style="font-size: 23px;vertical-align:sub;margin-left: 6px;color: rgb(26, 194, 26);">create</mat-icon> |
|
|
|
|
<mat-icon (click)="deleteBuilding($event,item)" |
|
|
|
|
style="font-size: 23px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon> |
|
|
|
|
</span> |
|
|
|
|
</button> |
|
|
|
|
<button mat-button (click)="createBuilding()" *ngIf="isEditPattern"> |
|
|
|
|
<span style="font-size: 24px;">+</span> |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!--功能区 --> |
|
|
|
|
<div class="functionalDomain"> |
|
|
|
|
<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" style="flex: 1;max-height: 700px;overflow-y: auto;overflow-x: hidden;" class="sitePlanContentBox"> |
|
|
|
|
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" |
|
|
|
|
[ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)' (mouseenter)="hoverSitePlan(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" class="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 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> |
|
|
|
|
<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> |
|
|
|
|
</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> |
|
|
|
|
</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> |
|
|
|
|
<!-- 如果是多点连线 --> |
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
</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> |
|
|
|
|
<!-- 多行文本 --> |
|
|
|
|
<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> |
|
|
|
|
</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> |
|
|
|
|
<!-- 如果是多点连线 --> |
|
|
|
|
<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> |
|
|
|
|
</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> |
|
|
|
|
<!-- 供给区域 --> |
|
|
|
|
<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 id="firecategories" class="firecategories" style="height: 50%;"> |
|
|
|
|
<!-- 素材属性div鼠标拖动div --> |
|
|
|
|
<div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;" (mousedown)="firecategoriesDivMouseDown($event)"></div> |
|
|
|
|
|
|
|
|
|
<div class="title"> |
|
|
|
|
<div> |
|
|
|
|
<span style="user-select: none">消防要素</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="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;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> |
|
|
|
|
|
