邵佳豪 3 years ago
parent
commit
320d5c5a9a
  1. 58
      src/app/pages/left-domain/left-domain.component.html
  2. 39
      src/app/pages/left-domain/left-domain.component.scss
  3. 136
      src/app/pages/left-domain/left-domain.component.ts
  4. 12
      src/app/pages/plan/plan.component.html
  5. 29
      src/app/pages/plan/plan.component.scss
  6. 16
      src/app/pages/plan/plan.component.ts

58
src/app/pages/left-domain/left-domain.component.html

@ -91,6 +91,64 @@
</ng-template>
</div>
<!-- 消防设施 -->
<!-- 处置预案 -->
<div class="publicBox disposalPlan" *ngIf="beforeFence === 7 && allMarkPlanData">
<div class="interval" *ngFor="let item of allMarkPlanData.datas;let key = index;">
<div class="publicDisposal disposalHeader">
{{item.name}}<label><i nz-icon nzType="plus-circle" nzTheme="outline" (click)="addNodePop = item.id;"></i><i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal(item)"></i></label>
</div>
<ul>
<li class="publicDisposal disposalContent" *ngFor="let items of item.nodes;let keys = index;">
<span (click)='selectNode(item,items)' [ngClass]="{'selectNode': selectNodeId == items.id && selectPlanId == item.id}">{{items.name}}</span>
<label><i nz-icon nzType="save" nzTheme="outline" (click)="saveDisposal(item.id,items.id)"></i><i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal(item,items)"></i></label>
</li>
</ul>
</div>
</div>
<!-- 处置预案 -->
<!-- 弹窗 -->
<nz-modal [(nzVisible)]="addDisposalPop || addNodePop" nzTitle="创建预案/节点" (nzOnCancel)="addDisposalPop = false; addNodePop = null;" (nzOnOk)="addDisposal(form.value)" [nzOkDisabled]='name.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 name="name" required/>
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<nz-modal [(nzVisible)]="saveDisposalDialog" nzTitle="处置节点保存" (nzOnCancel)="saveDisposalDialog = false;" [nzFooter]="null">
<div class="submitBottom">
<button (click)='saveNode(true)'>新建节点并保存</button><button (click)='saveNode(false)'>保存到已有节点</button>
</div>
</nz-modal>
<nz-modal [(nzVisible)]="saveType" [nzTitle]="saveType === 1? '新建节点并保存' : '保存到已有节点'" (nzOnCancel)="saveType = null;" (nzOnOk)="saveDisposalNode(saveForm.value)">
<form nz-form #saveForm='ngForm'>
<nz-form-item *ngIf="saveType === 1">
<nz-form-label [nzSpan]="6">节点名称<span style="color: red;">*</span></nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #name='ngModel' ngModel name="name" required/>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="saveType === 1">
<nz-form-label [nzSpan]="6"><span></span>节点</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请选择节点">
<nz-select #root='ngModel'ngModel name="root" required>
<nz-option *ngFor="let item of allNodeList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="saveType === 2">
<nz-form-label [nzSpan]="6">节点</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请选择节点">
<nz-select #node='ngModel'ngModel name="node" required>
<nz-option *ngFor="let item of allNodeList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<!-- 弹窗 -->
</div>
<div class="childBottom" *ngIf="beforeFence === 0">

39
src/app/pages/left-domain/left-domain.component.scss

@ -76,4 +76,43 @@
// }
.fireFacilities{ //消防设施
.treeRow{ width: 100%; display: flex; height: 30px; line-height: 30px; p:first-child{ flex: 1; }; p{ margin: 0; padding: 0; .anticon{ margin-right: 5px; font-size: 16px; } } }
}
.disposalPlan{ //处置预案
.interval{ margin-top: 10px; } //分隔div
font-size: 15px;
ul,li { width: 100%; }
li:before{ content: ""; width: 5px; height: 5px; border-radius: 50%; display: inline-block; vertical-align: 3px; background: #23D9FF; margin-right: 10px; }
.publicDisposal{
height: 35px;
line-height: 35px;
color: #23D9FF;
padding-left: 20px;
label{ float: right; .anticon{ margin-right: 15px; font-size: 18px; cursor: pointer; } }
span{ cursor: pointer; }
}
.disposalContent { color: #fff; .anticon{ color: #23D9FF; } }
.disposalHeader {
background: rgba(35, 153, 255, 0.41);
border: 1px solid rgba(35, 217, 255, 0.4);
}
.selectNode{ color: red; } //选中节点样式
}
//弹窗
.submitBottom{
button {
cursor: pointer;
padding: 0;
width: 150px;
height: 30px;
line-height: 30px;
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
background: #e2e8f0;
color: #000;
border: none;
outline: none;
}
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly; /* 水平居中 */
}

136
src/app/pages/left-domain/left-domain.component.ts

@ -5,6 +5,11 @@ import { PlanComponent } from '../plan/plan.component';
import { FacilityInfoUIItem } from "../../babylon/view/facilityinfoinscene-window/facilityinfo-ui-item";
import { ConfigManager } from 'src/app/babylon/controller/config-manager';
import { FacilityType } from 'src/app/babylon/model/data/model-data/model-data-facility';
import { EventManager } from 'src/app/babylon/controller/event-manager/event-manager';
import { Event_GetAllMarkPlanData } from 'src/app/babylon/controller/event-manager/events/event-get-markplandata-success';
import { AllMarkPlanData, MarkNodeData, MarkPlanData } from 'src/app/babylon/model/data/mark/mark-plan-data';
import { MarkWindow } from 'src/app/babylon/view/mark-window/mark-window';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'app-left-domain',
@ -13,7 +18,7 @@ import { FacilityType } from 'src/app/babylon/model/data/model-data/model-data-f
})
export class LeftDomainComponent implements OnInit {
constructor() { }
constructor(private message: NzMessageService) { }
ngOnInit(): void {
this.initComponent()
@ -23,8 +28,6 @@ export class LeftDomainComponent implements OnInit {
beforeFence: number; //当前选中功能栏
FacilityList: FacilityInfoUIItem[] = []; //统计设备 list
selectFacilityId: string = null; //选中设备 ID
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
treeData: NzTreeNodeOptions[] = []; //tree data
//初始化组件
initComponent(type?: number) {
@ -39,6 +42,13 @@ export class LeftDomainComponent implements OnInit {
//处理 设备data
handleFacility() {
if (this.beforeFence === 7) { //应急预案
MarkWindow.instance? this.allMarkPlanData= MarkWindow.instance.allMarkPlanData : null
EventManager.addListener(Event_GetAllMarkPlanData, (data: Event_GetAllMarkPlanData)=>{
this.allMarkPlanData = data.data
})
return
}
let list: FacilityInfoUIItem[] = []
FacilityInfoInSceneWindow.instance.facilityInfoUIItemes.forEach(item=>{
if (this.beforeFence === 1) { //加油机
@ -67,6 +77,9 @@ export class LeftDomainComponent implements OnInit {
}
}
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
treeData: NzTreeNodeOptions[] = []; //tree data
//处理 treeData
handleTreeData(list: FacilityInfoUIItem[]) {
this.treeData = []
@ -137,6 +150,123 @@ export class LeftDomainComponent implements OnInit {
}
}
allMarkPlanData: AllMarkPlanData; //处置预案节点数据
selectPlanId: number;
selectNodeId: number;
addDisposalPop: boolean = false; //显示/隐藏 创建预案 弹窗
addNodePop: number = null; //显示/隐藏 创建节点 父节点ID
//创建预案/节点
addDisposal(e) {
if (this.addDisposalPop) { //创建预案
MarkWindow.instance.createMarkPlaneData(e.name)
this.addDisposalPop = false
} else { //创建节点
MarkWindow.instance.createMarkNodeData(this.addNodePop,e.name)
this.addNodePop = null
}
}
//删除预案/节点
deleteDisposal(item: MarkPlanData, e?: MarkNodeData) {
let isTrue = confirm('您确定要删除吗')
if (isTrue) {
if (!e) {
MarkWindow.instance.deleteMarkPlaneData(item.id)
} else {
MarkWindow.instance.deleteMarkNodeData(item.id, e.id)
}
}
}
//选中 数据节点
selectNode(item: MarkPlanData, e: MarkNodeData) {
if (this.selectPlanId != item.id || this.selectNodeId != e.id) { //选中
if (!MarkWindow.instance.currentMarkNodeInfo) { //未选中节点
this.selectPlanId = item.id
this.selectNodeId = e.id
MarkWindow.instance.selectMarkNode(item.id,e.id)
} else { //已选中节点
let isTrue = confirm('切换节点后,没保存的信息将会丢失!')
if (isTrue) {
this.selectPlanId = item.id
this.selectNodeId = e.id
MarkWindow.instance.selectMarkNode(item.id,e.id)
}
}
} else if (this.selectPlanId === item.id && this.selectNodeId === e.id) { //取消选中
let isTrue = confirm('切换节点后,没保存的信息将会丢失!')
if (isTrue) {
this.selectPlanId = null
this.selectNodeId = null
MarkWindow.instance.selectMarkNode(null,null)
}
}
}
saveDisposalDialog: boolean = false; //整体保存预案 弹窗
saveType: number = null; //新建保存/保存到已有 弹窗
allNodeList: any[] = []; //所有根节点/节点
//保存-1
saveDisposal(markPlanId: number = null, nodeId: number = null) {
if (!MarkWindow.instance.currentMarkNodeInfo) { //未选中节点
this.message.info('还没有进行标绘,无法保存');
return
}
if (markPlanId === null && nodeId === null) { // 整体弹窗保存
this.saveDisposalDialog = true
} else {
if (this.selectPlanId === markPlanId && this.selectNodeId === nodeId) {
MarkWindow.instance.saveToOldNode(markPlanId,nodeId)
} else {
let isTrue = confirm('是否覆盖要保存的节点?')
isTrue? MarkWindow.instance.saveToOldNode(markPlanId,nodeId) : null
}
}
}
//保存-2
saveNode(isNew: boolean) {
this.saveDisposalDialog = false
if (isNew) { //新建节点并保存
this.saveType = 1
this.allNodeList = MarkWindow.instance.allMarkPlanData.datas
} else { //保存到已有节点
this.saveType = 2
this.allNodeList = []
MarkWindow.instance.allMarkPlanData.datas.forEach(item => {
item.nodes.forEach(element=>{
let node = {
id: element.id,
parrentId: item.id,
name: element.name,
}
this.allNodeList.push(node)
})
});
}
}
//保存-3
saveDisposalNode(e) {
if (this.saveType === 1) { //新建节点并保存
if (!e.name || !e.root) {
this.message.info('请完善表单')
return
}
MarkWindow.instance.createNewNodeAndSave(e.root.id,e.name)
this.saveType = null
} else { //保存到已有节点
if (!e.node) {
this.message.info('请完善表单')
return
}
MarkWindow.instance.saveToOldNode(e.node.parrentId,e.node.id)
this.saveType = null
}
}
//编辑信息
editInfo() {

12
src/app/pages/plan/plan.component.html

@ -19,7 +19,7 @@
<div class="leftChildComponent" *ngIf="isShowChildComponent" [ngStyle]="{ 'left': isShowLeftBuilding? '15%' : null }">
<div class="leftChildHeader">
<div><i nz-icon nzType="star" nzTheme="outline"></i></div>
<div><p>{{allFence[selectFence]}}</p></div>
<div>{{allFence[selectFence]}}<i nz-icon nzType="plus-circle" nzTheme="outline" *ngIf="selectFence === 7" (click)="noticeChildComponent(true)"></i><i nz-icon nzType="save" nzTheme="outline" *ngIf="selectFence === 7" (click)="noticeChildComponent(false)"></i></div>
<div (click)="toggleHeaderFence(selectFence)" title="关闭"><i nz-icon nzType="close-circle" nzTheme="outline"></i></div>
</div>
<div class="leftChildCenter"><app-left-domain #leftDomain></app-left-domain></div>
@ -46,19 +46,17 @@
</div>
</div>
<!-- 左侧建筑栏 -->
<!-- 底部图标栏 -->
<div class="bottomIcons">
<div class="autoScroll"><i nz-icon nzType="left" nzTheme="outline" (click)="bottomScroll(0)"></i></div>
<!-- 右侧图标栏 -->
<div class="rightIcons">
<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="rightTopFast">

29
src/app/pages/plan/plan.component.scss

@ -100,6 +100,8 @@
letter-spacing: 3px;
font-style: italic;
flex: 1;
.anticon{ margin-left: 65px; font-size: 18px; color: #23D9FF; vertical-align: -4px; }
.anticon:last-child { margin-left: 10px; }
}
div:last-child{
width: 30px;
@ -176,28 +178,29 @@
transition: margin-left 0.5s;
}
//底部图标栏
.bottomIcons{
width: 80%;
height: 60px;
line-height: 60px;
//右侧图标栏
.rightIcons{
width: 60px;
height: 70%;
position: absolute;
left: 0;
right: 0;
bottom: 0px;
top: 0;
bottom: 0;
right: 1%;
margin: auto;/*这行代码是关键*/
color: #fff;
background: rgba(0,17,33,0.7);
border-radius: 10px 10px 0px 0px;
border-radius: 10px;
display: flex;
box-sizing: border-box;
padding: 1px;
flex-direction: column;
align-items: center;
overflow: hidden;
.autoScroll{ width: 30px; text-align: center; }
.bottomCenter{
flex: 1;
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
.everyIcon {
width: 100px;
width: 60px;
height: 58px;
line-height: normal;
text-align: center;

16
src/app/pages/plan/plan.component.ts

@ -59,17 +59,14 @@ export class PlanComponent implements OnInit {
loginStatus.getInstitutionListFromServe((result: InsitutionDataSimple[], data: any) => {
if (ModeManager.institutionDemoKey == ModeManager.c_demoKey_null) { //无指定测试单位,则为正式启动,根据当前单位key寻找
let key = 'ceshi';
// console.log("获取数据", data);
let find = data.find(item => { return item.key === key })
if (find) { //如果在data中找到了对应的单位key,则表示已经有三维数据,直接进入
// console.log("找到已有单位" + key);
this.beforeOneSatus = StatusManager.getStatus<LoginSatus>(LoginSatus);
this.beforeOneSatus.onSelectInsSuccess(find)
} else { //如果没有找到对应的单位key,则调用新建单位
let isAdd = confirm('没有单位name,是否进行初始化?')
if (isAdd) {
let name = 'ceshi';
console.log("没找到单位,新建" + key);
loginStatus.createInsitution(key, name);
}
}
@ -94,7 +91,7 @@ export class PlanComponent implements OnInit {
//开发模式 选择单位 弹窗
modelInit(InsList) { }
allFence: string[] = ["基本信息", "加油机", "油罐设备", "消防设施", "安全疏散", "输油管线", "油气回收", "应急处置"]; //头部 功能栏
allFence: string[] = ["基本信息", "加油机", "油罐设备", "消防设施", "安全疏散", "输油管线", "油气回收", "应急预案"]; //头部 功能栏
selectFence: number = -1; //选中 头部功能栏
isShowChildComponent: boolean = false; //是否 显示左侧子组件
@ViewChild('leftDomain') leftDomain: LeftDomainComponent; //子组件引用
@ -141,6 +138,17 @@ export class PlanComponent implements OnInit {
return fenceType
}
//子组件 创建预案/保存
noticeChildComponent(type: boolean) {
if (this.isShowChildComponent && this.leftDomain) {
if (type) { //创建预案
this.leftDomain.addDisposalPop = true
} else { //整体保存
this.leftDomain.saveDisposal()
}
}
}
//切换 头部罩棚
toggleHeaderAwning(isOpen: boolean) {
this.isOpenAwning = isOpen;

Loading…
Cancel
Save