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 @@
</ul>
</nz-dropdown-menu>
<label>
- <nz-steps *ngIf="beforeEmergencyPlan.nodes && beforeEmergencyPlan.nodes.length" [nzCurrent]="nzCurrent" [nzProgressDot]="progressTemplate" (nzIndexChange)="changePlanNode($event)">
- <nz-step *ngFor="let item of beforeEmergencyPlan.nodes;" title="{{item.name}}"></nz-step>
- <nz-step></nz-step>
- </nz-steps>
- <ng-template #progressTemplate let-index="index">
- <img src="../../../assets/images/stepIcon.png" style="margin-left: -100%;" *ngIf="index != beforeEmergencyPlan.nodes.length">
- </ng-template>
+ <ng-container *ngIf="beforeEmergencyPlan.nodes && beforeEmergencyPlan.nodes.length">
+ <div class="progress" *ngFor="let item of beforeEmergencyPlan.nodes;let key = index;" title="{{item.name}}" [ngStyle]="{'flex': getProgressFlex(item)}">
+ <img src="../../../assets/images/stepIcon.png" (click)="changePlanNode(key)">
+ <div><nz-progress [nzShowInfo]="false" [nzPercent]="progressList[key]" nzStrokeColor="#1890FF" nzStatus="active"></nz-progress></div>
+ </div>
+ </ng-container>
</label>
<label>
- <i nz-icon nzType="backward" nzTheme="outline" (click)="toLast()"></i>
- <i nz-icon nzType="pause" nzTheme="outline" (click)="suspend(true)" [hidden]="isSuspend"></i>
- <i nz-icon nzType="play-circle" nzTheme="outline" (click)="suspend(false)" [hidden]="!isSuspend"></i>
- <i nz-icon nzType="border" nzTheme="outline" (click)="initialize()"></i>
- <i nz-icon nzType="forward" nzTheme="outline" (click)="toNext()"></i>
+ <i nz-icon nzType="backward" nzTheme="outline" (click)="toLast()" title="上一个节点"></i>
+ <i nz-icon nzType="pause" nzTheme="outline" (click)="suspend(true)" [hidden]="isSuspend" title="暂停"></i>
+ <i nz-icon nzType="play-circle" nzTheme="outline" (click)="suspend(false)" [hidden]="!isSuspend" title="开启"></i>
+ <i nz-icon nzType="border" nzTheme="outline" (click)="initialize()" title="初始化"></i>
+ <i nz-icon nzType="forward" nzTheme="outline" (click)="toNext()" title="下一个节点"></i>
</label>
</div>
</div>
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}%`
}
//选中应急预案 设备