Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/Sinopec-Anxin

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[] = []; //所有根节点/节点

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]

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>

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%;

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}%`
   }
 
   //选中应急预案 设备