From 287fff7d78ff5055ea039b4533eacffd9e0682c4 Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Thu, 25 Nov 2021 11:34:37 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../left-domain/left-domain.component.ts | 25 ++-- src/app/pages/pages.module.ts | 11 +- src/app/pages/plan/plan.component.html | 23 ++-- src/app/pages/plan/plan.component.scss | 8 +- src/app/pages/plan/plan.component.ts | 123 ++++++++++++++---- 5 files changed, 136 insertions(+), 54 deletions(-) diff --git a/src/app/pages/left-domain/left-domain.component.ts b/src/app/pages/left-domain/left-domain.component.ts index 0de4d11..407baef 100644 --- a/src/app/pages/left-domain/left-domain.component.ts +++ b/src/app/pages/left-domain/left-domain.component.ts @@ -211,26 +211,24 @@ export class LeftDomainComponent implements OnInit { selectNode(item: MarkPlanData, e: MarkNodeData) { if (this.selectPlanId != item.id || this.selectNodeId != e.id) { //选中 if (!MarkWindow.instance.currentMarkNodeInfo) { //未选中节点 - PlanComponent.instance.beforeEmergencyPlan = item - PlanComponent.instance.beforePlanNode = e - PlanComponent.instance.nzCurrent = -1 - PlanComponent.instance.timer? window.clearTimeout(PlanComponent.instance.timer) : null //清除定时器 + this.updateFatherData() //更新/初始化父组件 数据 this.selectPlanId = item.id this.selectNodeId = e.id MarkWindow.instance.selectMarkNode(item.id, e.id) + PlanComponent.instance.beforeEmergencyPlan = item + PlanComponent.instance.beforePlanNode = MarkWindow.instance.currentMarkNodeInfo.nodeData } else { //已选中节点 let isTrue = true; if (ModeManager.currentMode == ModeType.Edit) { isTrue = confirm('切换节点后,没保存的信息将会丢失!') } if (isTrue) { - PlanComponent.instance.beforeEmergencyPlan = item - PlanComponent.instance.beforePlanNode = e - PlanComponent.instance.nzCurrent = -1 - PlanComponent.instance.timer? window.clearTimeout(PlanComponent.instance.timer) : null //清除定时器 + this.updateFatherData() //更新/初始化父组件 数据 this.selectPlanId = item.id this.selectNodeId = e.id MarkWindow.instance.selectMarkNode(item.id, e.id) + PlanComponent.instance.beforeEmergencyPlan = item + PlanComponent.instance.beforePlanNode = MarkWindow.instance.currentMarkNodeInfo.nodeData } } } else if (this.selectPlanId === item.id && this.selectNodeId === e.id) { //取消选中 @@ -241,8 +239,7 @@ export class LeftDomainComponent implements OnInit { if (isTrue) { PlanComponent.instance.beforeEmergencyPlan = new MarkPlanData(-99, "请选择节点") PlanComponent.instance.beforePlanNode = new MarkNodeData(-99, "请选择节点") - PlanComponent.instance.nzCurrent = -1 - PlanComponent.instance.timer? window.clearTimeout(PlanComponent.instance.timer) : null //清除定时器 + this.updateFatherData() //更新/初始化父组件 数据 this.selectPlanId = null this.selectNodeId = null MarkWindow.instance.selectMarkNode(null, null) @@ -250,6 +247,14 @@ export class LeftDomainComponent implements OnInit { } } + //更新/初始化父组件 数据 + updateFatherData() { + PlanComponent.instance.nzCurrent = -1 + PlanComponent.instance.isSuspend = true //暂停 + PlanComponent.instance.timer? window.clearTimeout(PlanComponent.instance.timer) : null //清除定时器 + PlanComponent.instance.updateTimer? window.clearTimeout(PlanComponent.instance.updateTimer) : null //清除定时器 + } + saveDisposalDialog: boolean = false; //整体保存预案 弹窗 saveType: number = null; //新建保存/保存到已有 弹窗 allNodeList: any[] = []; //所有根节点/节点 diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index c30a97f..bdeda40 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -32,6 +32,10 @@ import { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzTreeModule } from 'ng-zorro-antd/tree'; import { NzCollapseModule } from 'ng-zorro-antd/collapse'; import { NzStepsModule } from 'ng-zorro-antd/steps'; +import { NzTableModule } from 'ng-zorro-antd/table'; +import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; +import { NzProgressModule } from 'ng-zorro-antd/progress'; import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component'; import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component'; import { EquipmentInfoComponent } from './equipment-info/equipment-info.component'; @@ -42,9 +46,7 @@ import { EditequipmentComponent } from './equipment-info/editequipment/editequip import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; import { PlanAdminComponent } from './plan-admin/plan-admin.component'; import { GetOutOfLineDetailsComponent } from './today-warning/get-out-of-line-details/get-out-of-line-details.component'; -import { NzTableModule } from 'ng-zorro-antd/table'; -import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; -import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; + @NgModule({ declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, @@ -83,7 +85,8 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; NzStepsModule, NzTableModule, NzCheckboxModule, - NzTimePickerModule + NzTimePickerModule, + NzProgressModule ], entryComponents: [AddequipmentComponent, EditequipmentComponent,GetOutOfLineDetailsComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] diff --git a/src/app/pages/plan/plan.component.html b/src/app/pages/plan/plan.component.html index 0217cb3..4e0838b 100644 --- a/src/app/pages/plan/plan.component.html +++ b/src/app/pages/plan/plan.component.html @@ -158,20 +158,19 @@ diff --git a/src/app/pages/plan/plan.component.scss b/src/app/pages/plan/plan.component.scss index de97d92..12e7da1 100644 --- a/src/app/pages/plan/plan.component.scss +++ b/src/app/pages/plan/plan.component.scss @@ -362,9 +362,13 @@ } label:nth-child(2){ flex: 1; + display: flex; overflow: hidden; - //.anticon{ font-size: 16px; color: #23D9FF; } - img{ height: 35px; width: auto; vertical-align: top; } + .progress{ + display: flex; + div { flex: 1; line-height: 30px; } + img{ width: 27px; height: 35px; display: block; cursor: pointer; } + } } label:last-child{ width: 15%; diff --git a/src/app/pages/plan/plan.component.ts b/src/app/pages/plan/plan.component.ts index 73877d9..c033142 100644 --- a/src/app/pages/plan/plan.component.ts +++ b/src/app/pages/plan/plan.component.ts @@ -339,6 +339,8 @@ export class PlanComponent implements OnInit { nzCurrent: number = -1; //当前选择 预案节点Index isSuspend: boolean = false; //是否暂停 自动切换节点 timer: any; //定时器 + progressList: number[] = []; //进度条 条/值 + updateTimer: any; //更新进度条定时器 //初始化 应急预案模块 initializePlan() { @@ -346,14 +348,21 @@ export class PlanComponent implements OnInit { this.beforePlanNode = new MarkNodeData(-99, "请选择节点") this.isSuspend = false //初始化暂停状态 window.clearTimeout(this.timer) //清除定时器 + this.progressList = [] + window.clearTimeout(this.updateTimer) //清除定时器 } //公用 切换选中节点 publicToggleNode() { - this.beforePlanNode = this.beforeEmergencyPlan.nodes[this.nzCurrent] - this.leftDomain.selectPlanId = this.beforeEmergencyPlan.id - this.leftDomain.selectNodeId = this.beforePlanNode.id - MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true) + return new Promise((resolve, reject) => { + this.beforePlanNode = this.beforeEmergencyPlan.nodes[this.nzCurrent] + this.leftDomain.selectPlanId = this.beforeEmergencyPlan.id + this.leftDomain.selectNodeId = this.beforePlanNode.id + MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true) + this.beforePlanNode = MarkWindow.instance.currentMarkNodeInfo.nodeData + this.updateProgress() //更新进度条 + resolve(true) + }) } //选中 底部一级节点 开启自动播放 @@ -363,10 +372,14 @@ export class PlanComponent implements OnInit { let isTrue = confirm("即将开始播放节点") if (isTrue) { this.timer? window.clearTimeout(this.timer) : null //清除定时器 + this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 this.nzCurrent = 0 this.beforeEmergencyPlan = item - this.publicToggleNode() - !this.isSuspend? this.autoPlay() : null + this.updateProgressList().then(res=>{ + this.publicToggleNode().then(data=>{ + !this.isSuspend? this.autoPlay() : null + }) + }) } } else { this.message.info('暂无数据节点'); @@ -374,31 +387,55 @@ export class PlanComponent implements OnInit { } } - //自动播放-切换接点 - autoPlay() { - if (this.nzCurrent >= this.beforeEmergencyPlan.nodes.length - 1) { - this.nzCurrent = this.nzCurrent + 1 - this.isSuspend = false //初始化暂停状态 - window.clearTimeout(this.timer) //清除定时器 - this.message.info('已播放至最后一节点'); + //更新进度条 值 + updateProgress() { + if (this.progressList[this.nzCurrent] >= 100) { + this.progressList[this.nzCurrent] = 100 + window.clearTimeout(this.updateTimer) //清除定时器 return } - let time: number = this.beforePlanNode.getShowTime() - console.log(`所需${time}s`) + let time: number = this.beforePlanNode.getShowTime() || 1 + this.updateTimer = window.setTimeout(()=>{ + this.progressList[this.nzCurrent] = this.progressList[this.nzCurrent] + Math.ceil(100 / time) + this.updateProgress() + },1000) + } + + //更新进度条 条数 + updateProgressList() { + return new Promise((resolve, reject) => { + this.progressList = [] + this.beforeEmergencyPlan.nodes.forEach(item=>{ this.progressList.push(0) }) + resolve(true) + }) + } + + //自动播放-切换接点 + autoPlay() { + let time: number = this.beforePlanNode.getShowTime() || 1 this.timer = window.setTimeout(()=>{ + if (this.nzCurrent >= this.beforeEmergencyPlan.nodes.length - 1) { + this.isSuspend = false //初始化暂停状态 + window.clearTimeout(this.timer) //清除定时器 + this.message.info('已播放至最后一节点'); + return + } this.nzCurrent = this.nzCurrent + 1 - this.publicToggleNode() - !this.isSuspend? this.autoPlay() : null + this.publicToggleNode().then(data=>{ + !this.isSuspend? this.autoPlay() : null + }) },time * 1000) } //切换预案节点 changePlanNode(event){ - if (event === this.beforeEmergencyPlan.nodes.length) { - return + if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) { + this.updateProgressList() } this.timer? window.clearTimeout(this.timer) : null //清除定时器 + this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 this.nzCurrent = event + this.progressList[this.nzCurrent] = 0 this.publicToggleNode() } @@ -412,10 +449,16 @@ export class PlanComponent implements OnInit { this.message.info('目前已经是第一节点'); return } + if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) { + this.updateProgressList() + } this.timer? window.clearTimeout(this.timer) : null //清除定时器 + this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 this.nzCurrent = this.nzCurrent - 1 - this.publicToggleNode() - !this.isSuspend? this.autoPlay() : null + this.progressList[this.nzCurrent] = 0 + this.publicToggleNode().then(data=>{ + //!this.isSuspend? this.autoPlay() : null + }) } //切换预案节点 暂停 @@ -424,13 +467,21 @@ export class PlanComponent implements OnInit { this.message.info('请选择节点'); return } + if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) { + this.updateProgressList() + } this.isSuspend = isSuspend let msg: string = this.isSuspend? "目前已暂停" : "目前已开始播放" this.message.info(msg); if (this.isSuspend) { //暂停 window.clearTimeout(this.timer) //清除定时器 + window.clearTimeout(this.updateTimer) //清除定时器 } else { //开启 + this.timer? window.clearTimeout(this.timer) : null //清除定时器 + this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 + this.progressList.forEach((item,index)=>{ index >= this.nzCurrent? this.progressList[index] = 0 : null }) MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true) + this.updateProgress() this.autoPlay() } } @@ -442,9 +493,13 @@ export class PlanComponent implements OnInit { return } this.timer? window.clearTimeout(this.timer) : null //清除定时器 - this.nzCurrent = 0 - this.publicToggleNode() - !this.isSuspend? this.autoPlay() : null + this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 + this.updateProgressList().then(res=>{ + this.nzCurrent = 0 + this.publicToggleNode().then(data=>{ + !this.isSuspend? this.autoPlay() : null + }) + }) } //切换预案节点 下一个 @@ -457,10 +512,26 @@ export class PlanComponent implements OnInit { this.message.info('目前已经是最后一个节点'); return } + if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) { + this.updateProgressList() + } this.timer? window.clearTimeout(this.timer) : null //清除定时器 + this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器 this.nzCurrent = this.nzCurrent + 1 - this.publicToggleNode() - !this.isSuspend? this.autoPlay() : null + this.progressList[this.nzCurrent] = 0 + this.publicToggleNode().then(data=>{ + //!this.isSuspend? this.autoPlay() : null + }) + } + + //获取进度条 flex分布 + getProgressFlex(e: MarkNodeData):string { + let length: number = 0 + this.beforeEmergencyPlan.nodes.forEach(item=>{ + length = length + (item.getShowTime() || 1) + }) + let percentage: number = (e.getShowTime() || 1) / length + return `${percentage * 100}%` } //选中应急预案 设备