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

[修改] H5页面显示工作区组件

develop
徐振升 5 years ago
parent
4bfbfedb56
commit
d4ddb6da33
2 changed files with 64 additions and 48 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. 110
      src/app/ui/collection-tools/collection-tools.component.html
  2. 2
      src/app/working-area/working-area.component.ts

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

@ -26,7 +26,7 @@
基本信息名称
<mat-icon [ngClass]="{'icongray': !basicInfo}">visibility</mat-icon>
</span>
<span style="user-select: none;" class="nameShow" (click)="wantToWorkClick()">
<span style="user-select: none;" class="nameShow" (click)="wantToWorkClick()">
想定作业名称
<mat-icon [ngClass]="{'icongray': !wantToWork}">visibility</mat-icon>
</span>
@ -40,14 +40,18 @@
<!-- 头部操作栏 -->
<div class="headerOperate">
<button mat-button (click)="checkedBuilding({name:'总平面图'})" [ngClass]="{'buildingbtnchecked': '总平面图' == checkedBuildingDate}">
<button mat-button (click)="checkedBuilding({name:'总平面图'})"
[ngClass]="{'buildingbtnchecked': '总平面图' == checkedBuildingDate}">
<span>总平面图</span>
</button>
<button mat-button *ngFor="let item of allBuildings" (click)="checkedBuilding(item)" class="bigeditdeletebtn" [ngClass]="{'buildingbtnchecked': item.name == checkedBuildingDate}">
<button mat-button *ngFor="let item of allBuildings" (click)="checkedBuilding(item)" class="bigeditdeletebtn"
[ngClass]="{'buildingbtnchecked': item.name == checkedBuildingDate}">
<span>{{item.name}}</span>
<span class="editdeletebtn">
<mat-icon (click)="editBuilding($event,item)" style="font-size: 16px;vertical-align:sub;margin-left: 6px;color: rgb(26, 194, 26);">create</mat-icon>
<mat-icon (click)="deleteBuilding($event,item)" style="font-size: 17px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon>
<mat-icon (click)="editBuilding($event,item)"
style="font-size: 16px;vertical-align:sub;margin-left: 6px;color: rgb(26, 194, 26);">create</mat-icon>
<mat-icon (click)="deleteBuilding($event,item)"
style="font-size: 17px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon>
</span>
</button>
<button mat-button (click)="createBuilding()">
@ -58,8 +62,8 @@
<!--功能区 -->
<div class="functionalDomain">
<div class='functionalDomainContent'>
<!-- H5Canvas -->
<!-- <app-working-area></app-working-area> -->
<!-- H5Canvas -->
<app-working-area></app-working-area>
<!-- H5Canvas -->
<div class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true}">
@ -67,13 +71,17 @@
<div class="planarGraph">
<div class="planarGraphHeader" (click)='togglePlanarGraph()'>
<label class="overflowText" style="font-weight: 550;">平面图</label>
<label class="hover"><mat-icon (click)='foundPanel($event)' class="matIcons">add</mat-icon></label>
<label class="hover">
<mat-icon (click)='foundPanel($event)' class="matIcons">add</mat-icon>
</label>
</div>
<div [hidden]="!togglePlane">
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index"
[ngClass]="{'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
<mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>
<label class="overflowText">{{item.name}}</label>
<mat-icon title="替换底图" style="float: right; margin-top: 8px;" *ngIf="selectSitePlanIndex==key" class="matIcons">photo_size_select_actual</mat-icon>
<mat-icon title="替换底图" style="float: right; margin-top: 8px;" *ngIf="selectSitePlanIndex==key"
class="matIcons">photo_size_select_actual</mat-icon>
<!-- 右边定位操作栏 -->
<!-- <div id="rightOperate">
@ -85,7 +93,7 @@
<!-- 素材库 -->
<div id="materialBank">
<div class="planarGraphHeader" (click)='toggleMaterial()'>
<div class="planarGraphHeader" (click)='toggleMaterial()'>
<label class="overflowText" style="font-weight: 550;">素材库</label>
</div>
<div style="flex: 1;overflow-y: auto;" [hidden]="!toggleMaterialBank">
@ -96,8 +104,9 @@
</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}">
<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>
@ -113,47 +122,52 @@
</div>
<div class="functionalDomainRight publicCss ">
<!-- 属性 -->
<div class="property" style="height: 50%;">
<div class="title">
<div>
<span style="user-select: none">属性</span>
</div>
<!-- 属性 -->
<div class="property" style="height: 50%;">
<div class="title">
<div>
<span style="user-select: none">属性</span>
</div>
</div>
<!-- 平面图属性 -->
<div class="siteproperty" style="user-select: none;display: none;">
<p>面积(平方米)</p>
<div class="siteproperty_size">0</div>
<p>详情</p>
<div class="siteproperty_details">
京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。
</div>
<!-- 平面图属性 -->
<div class="siteproperty" style="user-select: none;display: none;">
<p>面积(平方米)</p>
<div class="siteproperty_size">0</div>
<p>详情</p>
<div class="siteproperty_details">京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。 </div>
</div>
<!-- 素材属性 -->
<div class="assetsproperty">
<h3 style="text-align: center;font-weight: 900;">实景照片</h3>
<p>宽度(像素)</p>
<input type="text" class="biginput">
<p>高度(像素)</p>
<input type="text" class="biginput">
<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;">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="sliderValue"></mat-slider>
</div>
<!-- 素材属性 -->
<div class="assetsproperty">
<h3 style="text-align: center;font-weight: 900;">实景照片</h3>
<p>宽度(像素)</p>
<input type="text" class="biginput">
<p>高度(像素)</p>
<input type="text" class="biginput">
<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;">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;" [(ngModel)]="sliderValue"></mat-slider>
</div>
<p>是否高亮</p>
<div>
<input type="checkbox" style="width: 20px;height: 20px;vertical-align: middle;margin-left: 8px;"><span>选中高亮</span>
</div>
<p>是否高亮</p>
<div>
<input type="checkbox"
style="width: 20px;height: 20px;vertical-align: middle;margin-left: 8px;"><span>选中高亮</span>
</div>
</div>
<!-- 消防要素 -->
<div class="firecategories" style="height: 50%;">
<div class="title">
<div>
<span style="user-select: none">消防要素</span>
</div>
</div>
<!-- 消防要素 -->
<div class="firecategories" style="height: 50%;">
<div class="title">
<div>
<span style="user-select: none">消防要素</span>
</div>
</div>
</div>
</div>
</div>

2
src/app/working-area/working-area.component.ts
Unescape View File

@ -55,6 +55,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
this.backgroundImage.position.x += delX;
this.backgroundImage.position.y += delY;
this.backgroundImage.children.forEach(item => {
console.log(item.position);
});
} else if (delta < 0) {
if (this.backgroundImage.scale.x <= 0.1) {
@ -68,6 +69,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
this.backgroundImage.position.x += delX;
this.backgroundImage.position.y += delY;
this.backgroundImage.children.forEach(item => {
console.log(item.position);
});
}
}

Write Preview
Loading…
Cancel
Save