shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

header完善

dev
陈鹏飞 3 years ago
parent
0f9b669815
commit
07826ed09a
8 changed files with 159 additions and 76 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. 158
      src/app/pages/plan/plan.component.html
  2. 45
      src/app/pages/plan/plan.component.scss
  3. 32
      src/app/pages/plan/plan.component.ts
  4. BIN
      src/assets/images/awningHide.png
  5. BIN
      src/assets/images/awningShow.png
  6. BIN
      src/assets/images/heightFinding.png
  7. BIN
      src/assets/images/measuredArea.png
  8. BIN
      src/assets/images/rangeFinding.png

158
src/app/pages/plan/plan.component.html
Unescape View File

@ -1,85 +1,99 @@
<div class="loading" *ngIf="isShowLoading"><nz-spin nzSimple [nzSize]="'large'"></nz-spin></div>
<div class="content">
<canvas id="center"></canvas>
<!-- 左侧建筑栏 -->
<div class="showLeftBuilding" title="显示" *ngIf="!isShowLeftBuilding" (click)="toggleLeftBuilding(true)"><i nz-icon nzType="right" nzTheme="outline"></i></div>
<div class="leftBuilding" [ngClass]="{'isShowLeftBuilding': isShowLeftBuilding === false}">
<div class="hideLeft"><i nz-icon nzType="close" nzTheme="outline" title="隐藏" (click)="toggleLeftBuilding(false)"></i></div>
<div class="leftHeader">
<h1><label>模型列表</label></h1>
<button nz-button nzType="primary" (click)="addBuildingPop = true">新建</button>
</div>
<div class="leftCenter">
<div class="everyBuilding" *ngFor="let item of buildingUIItems" (click)='selectLeftBuilding(item)' [ngClass]="{'selectLeftBuilding': beforeOneBuildingID == item.getBuildingID()}">
<label style="flex: 1;" class="overflowText modelTitle">{{item.getBuildingName()}}</label>
<label style="width: 65px; overflow: hidden;">
<i nz-icon nzType="plus-circle" nzTheme="outline" title="聚焦" (click)="positionModelBuilding($event,item)"></i>
<i nz-icon nzType="edit" nzTheme="outline" title="编辑" (click)="editModelBuilding($event,item)" style="margin: 0 5px;"></i>
<i nz-icon nzType="delete" nzTheme="outline" title="删除" (click)="deleteModelBuilding($event,item)"></i>
</label>
</div>
<div class="header">
<button *ngFor="let item of allFence; let key = index;" [ngClass]="{'selectFence': selectFence === key}" (click)="toggleHeaderFence(key)">{{item}}</button>
<div class="rightFence">
<img src="../../../assets/images/awningShow.png" [hidden]="!isOpenAwning" (click)="toggleHeaderAwning(false)">
<img src="../../../assets/images/awningHide.png" [hidden]="isOpenAwning" (click)="toggleHeaderAwning(true)">
<img src="../../../assets/images/rangeFinding.png" title="测量距离" (click)="toggleMeasure(1)" [ngClass]="{'selectRightTopFast': selectMeasure == 1}">
<img src="../../../assets/images/heightFinding.png" title="测量高度" (click)="toggleMeasure(2)" [ngClass]="{'selectRightTopFast': selectMeasure == 2}">
<img src="../../../assets/images/measuredArea.png" title="测量面积" (click)="toggleMeasure(3)" [ngClass]="{'selectRightTopFast': selectMeasure == 3}">
</div>
</div>
<!-- 左侧建筑栏 -->
<!-- 底部图标栏 -->
<div class="bottomIcons">
<div class="autoScroll"><i nz-icon nzType="left" nzTheme="outline" (click)="bottomScroll(0)"></i></div>
<div class="bottomCenter" id="bottomCenter">
<div class="everyIcon" (click)='selectBottomIcon(item)' *ngFor="let item of allFacilityUIItemes" [ngClass]="{'selectLeftIcon': beforeOneIcon == item.getIconID()}">
<img [src]="item.getIconURL()">
<p>{{item.getIconName()}}</p>
<div class="center">
<canvas id="center"></canvas>
<!-- 左侧建筑栏 -->
<div class="showLeftBuilding" title="显示" *ngIf="!isShowLeftBuilding" (click)="toggleLeftBuilding(true)"><i nz-icon nzType="right" nzTheme="outline"></i></div>
<div class="leftBuilding" [ngClass]="{'isShowLeftBuilding': isShowLeftBuilding === false}">
<div class="hideLeft"><i nz-icon nzType="close" nzTheme="outline" title="隐藏" (click)="toggleLeftBuilding(false)"></i></div>
<div class="leftHeader">
<h1><label>模型列表</label></h1>
<button nz-button nzType="primary" (click)="addBuildingPop = true">新建</button>
</div>
<div class="leftCenter">
<div class="everyBuilding" *ngFor="let item of buildingUIItems" (click)='selectLeftBuilding(item)' [ngClass]="{'selectLeftBuilding': beforeOneBuildingID == item.getBuildingID()}">
<label style="flex: 1;" class="overflowText modelTitle">{{item.getBuildingName()}}</label>
<label style="width: 65px; overflow: hidden;">
<i nz-icon nzType="plus-circle" nzTheme="outline" title="聚焦" (click)="positionModelBuilding($event,item)"></i>
<i nz-icon nzType="edit" nzTheme="outline" title="编辑" (click)="editModelBuilding($event,item)" style="margin: 0 5px;"></i>
<i nz-icon nzType="delete" nzTheme="outline" title="删除" (click)="deleteModelBuilding($event,item)"></i>
</label>
</div>
</div>
</div>
<div class="autoScroll"><i nz-icon nzType="right" nzTheme="outline" (click)="bottomScroll(1)"></i></div>
</div>
<!-- 底部图标栏 -->
<!-- 右上角快捷栏 -->
<div class="rightTopFast">
<div class="publicFast leftFunction">
<button title="获取设备" (click)="getDevice()">获</button>
<button title="清空设备" (click)="clearDevice()">清</button>
<!-- 左侧建筑栏 -->
<!-- 底部图标栏 -->
<div class="bottomIcons">
<div class="autoScroll"><i nz-icon nzType="left" nzTheme="outline" (click)="bottomScroll(0)"></i></div>
<div class="bottomCenter" id="bottomCenter">
<div class="everyIcon" (click)='selectBottomIcon(item)' *ngFor="let item of allFacilityUIItemes" [ngClass]="{'selectLeftIcon': beforeOneIcon == item.getIconID()}">
<img [src]="item.getIconURL()">
<p>{{item.getIconName()}}</p>
</div>
</div>
<div class="autoScroll"><i nz-icon nzType="right" nzTheme="outline" (click)="bottomScroll(1)"></i></div>
</div>
<div class="publicFast leftFast">
<button title="平移" (click)="translation()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 0}"></button>
<button title="旋转" (click)="revolve()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 1}"></button>
<button title="缩放" (click)="scale()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 2}"></button>
<button title="吸附" (click)="adsorb()" [ngClass]="{'leftFastIsTure': selectAdsorb }"></button>
<button title="切换至顶视图" (click)="toggleTopLevelView()" [ngClass]="{'leftFastIsTure': topLevelView }"></button>
<!-- 底部图标栏 -->
<!-- 右上角快捷栏 -->
<div class="rightTopFast">
<div class="publicFast leftFunction">
<button title="获取设备" (click)="getDevice()">获</button>
<button title="清空设备" (click)="clearDevice()">清</button>
</div>
<div class="publicFast leftFast">
<button title="平移" (click)="translation()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 0}"></button>
<button title="旋转" (click)="revolve()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 1}"></button>
<button title="缩放" (click)="scale()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 2}"></button>
<button title="吸附" (click)="adsorb()" [ngClass]="{'leftFastIsTure': selectAdsorb }"></button>
<button title="切换至顶视图" (click)="toggleTopLevelView()" [ngClass]="{'leftFastIsTure': topLevelView }"></button>
</div>
<div style="margin: 0 10px;background-color: #0080FF;" title="保存"><button (click)="preserve()"><i nz-icon nzType="save" nzTheme="outline" style="font-size: 20px;"></i></button></div>
</div>
<div style="margin: 0 10px;background-color: #0080FF;" title="保存"><button (click)="preserve()"><i nz-icon nzType="save" nzTheme="outline" style="font-size: 20px;"></i></button></div>
<!-- 右上角快捷栏 -->
<!-- 新增/编辑左侧建筑弹窗 -->
<nz-modal [(nzVisible)]="addBuildingPop || editBuildingPop" nzTitle="创建/编辑建筑" (nzOnCancel)="addBuildingPop = false; editBuildingPop = null;" (nzOnOk)="addModelBuilding(form.value)" [nzOkDisabled]='name.invalid||modelType.invalid'>
<form nz-form #form='ngForm'>
<nz-form-item>
<nz-form-label [nzSpan]="6">名称</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #name='ngModel' [(ngModel)]="modelBuilding.name" name="name" required/>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">请选择模型类型</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请选择必填项">
<nz-select #modelType='ngModel' [(ngModel)]="modelBuilding.modelType" name="modelType" required>
<nz-option nzValue="normal" nzLabel="建筑物"></nz-option>
<nz-option nzValue="environment" nzLabel="场景"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">上传文件</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请上传文件">
<a href="javascript:;" class="uploadBackGround"><input type="file" (change)='selectFile($event)' multiple>上传文件<i nz-icon nzType="cloud-upload" nzTheme="outline"></i></a>
<p *ngIf="uploadList.length" style="font-size: 14px; text-align: left; max-height: 500px; overflow: hidden;">选择文件: <label *ngFor="let item of uploadList">{{item.name}}, </label></p>
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<!-- 新增/编辑左侧建筑弹窗 -->
</div>
<!-- 右上角快捷栏 -->
<!-- 新增/编辑左侧建筑弹窗 -->
<nz-modal [(nzVisible)]="addBuildingPop || editBuildingPop" nzTitle="创建/编辑建筑" (nzOnCancel)="addBuildingPop = false; editBuildingPop = null;" (nzOnOk)="addModelBuilding(form.value)" [nzOkDisabled]='name.invalid||modelType.invalid'>
<form nz-form #form='ngForm'>
<nz-form-item>
<nz-form-label [nzSpan]="6">名称</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #name='ngModel' [(ngModel)]="modelBuilding.name" name="name" required/>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">请选择模型类型</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请选择必填项">
<nz-select #modelType='ngModel' [(ngModel)]="modelBuilding.modelType" name="modelType" required>
<nz-option nzValue="normal" nzLabel="建筑物"></nz-option>
<nz-option nzValue="environment" nzLabel="场景"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">上传文件</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请上传文件">
<a href="javascript:;" class="uploadBackGround"><input type="file" (change)='selectFile($event)' multiple>上传文件<i nz-icon nzType="cloud-upload" nzTheme="outline"></i></a>
<p *ngIf="uploadList.length" style="font-size: 14px; text-align: left; max-height: 500px; overflow: hidden;">选择文件: <label *ngFor="let item of uploadList">{{item.name}}, </label></p>
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<!-- 新增/编辑左侧建筑弹窗 -->
</div>

45
src/app/pages/plan/plan.component.scss
Unescape View File

@ -2,7 +2,10 @@
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
padding: 0px 10px 10px 10px;
display: flex;
flex-direction: column;
.center { flex: 1; overflow: hidden; position: relative; border: 1px solid #2399FF; box-shadow: 0px 0px 16px #2399FF; }
canvas{ width: 100%; height: 100%; border: none; outline: none; }
}
.loading{ //loading
@ -25,6 +28,40 @@
white-space: nowrap;
}
//头部 功能栏
.header{
width: 100%;
height: 50px;
text-align: center;
overflow: hidden;
position: relative;
button {
box-sizing: border-box;
width: 120px;
height: 36px;
line-height: 36px;
color: #fff;
border: 1px solid #23D9FF;
outline: none;
background: linear-gradient(180deg, #000D21 0%, #002751 42%, #57A9FF 100%);
border-radius: 0px;
cursor: pointer;
margin: 7px 10px 0px;
padding: 0;
}
.selectFence { background: linear-gradient(180deg, #000D21 0%, #00404D 49%, #23D9FF 100%); } //选种样式
.rightFence{
position: absolute;
top: 0px;
right: 0px;
width: 200px;
height: 50px;
line-height: 50px;
img { cursor: pointer; box-sizing: border-box; width: 36px; height: 36px; margin-left: 10px; }
}
.selectRightTopFast { border: 1px solid #fff; } //选种样式
}
//左侧建筑
.showLeftBuilding{
width: 30px;
@ -32,7 +69,7 @@
line-height: 30px;
text-align: center;
position: absolute;
left: 1px;
left: 0px;
top: 50%;
margin-top: -15px;
color: #48A5FF;
@ -43,7 +80,7 @@
width: 230px;
height: 70%;
position: absolute;
left: 1px;
left: 0px;
top: 0;
bottom: 0;
margin: auto;/*这行代码是关键*/
@ -94,7 +131,7 @@
position: absolute;
left: 0;
right: 0;
bottom: 1px;
bottom: 0px;
margin: auto;/*这行代码是关键*/
color: #fff;
background: rgba(0,17,33,0.7);

32
src/app/pages/plan/plan.component.ts
Unescape View File

@ -92,6 +92,38 @@ export class PlanComponent implements OnInit {
//开发模式 选择单位 弹窗
modelInit(InsList) { }
allFence: string[] = ["基本信息", "加油机", "油罐设备", "消防设施", "安全疏散", "输油管线", "油气回收", "应急处置"]; //头部 功能栏
selectFence: number = 0; //选中 头部功能栏
isOpenAwning: boolean = true; //是否 打开罩棚
selectMeasure: number = 0; //当前选择 测量工具
//切换 头部功能栏
toggleHeaderFence(type: number) {
this.selectFence = type
}
//切换 头部罩棚
toggleHeaderAwning(isOpen: boolean) {
this.isOpenAwning = isOpen
}
//切换 测量工具
toggleMeasure(type: number) {
if (this.selectMeasure != type) { //切换工具
this.selectMeasure = type
if (type === 1) {
ToolbarWindow.instance.measureDistance()
} else if (type === 2) {
ToolbarWindow.instance.measureHeight()
} else {
ToolbarWindow.instance.measureArea()
}
} else { //关闭测量工具
this.selectMeasure = 0
ToolbarWindow.instance.endMeasure()
}
}
buildingUIItems: BuildingUIItem[] = []; //左侧 建筑list
beforeOneBuildingID: string = null; //选中 左侧建筑ID
modelBuilding: modelBuilding = new modelBuilding(); //创建/编辑 建筑ngModel数据

BIN
src/assets/images/awningHide.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/images/awningShow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/images/heightFinding.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/images/measuredArea.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/images/rangeFinding.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

Write Preview
Loading…
Cancel
Save