解决不同浏览器进度条速度不一致问题

src/app/babylon/model/data/mark/mark-plan-data.ts

@@ -406,7 +406,7 @@ export class MarkNodeData {
 
         let minTime = 4; //最短停留时间
 
-        let result = textNum * timeScale + 0.6 - textNum * num_dan * 0.06;
+        let result = textNum * timeScale + 1 - textNum * num_dan * 0.02;
 
 
         // let result = textNum * 0.15 + num_ch * 0.15 + num_point * 0.15 + num_dan * 0.07
@@ -415,7 +415,7 @@ export class MarkNodeData {
             result = minTime;
         }
 
-        result -= 0.06 * textNum;
+        result -= 0.05 * textNum;
 
         return result;
     }

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

@@ -547,7 +547,8 @@ export class PlanComponent implements OnInit {
     this.beforePlanNode = new MarkNodeData(-99, "请选择应急预案")
     this.isSuspend = false //初始化暂停状态
     this.progressList = []
-    window.clearInterval(this.updateTimer) //清除定时器
+    // window.clearInterval(this.updateTimer) //清除定时器
+    this.disposeProgressTimer();
   }
 
   //公用 切换选中节点
@@ -573,7 +574,8 @@ export class PlanComponent implements OnInit {
   //选中 底部一级节点 开启自动播放
   selectChildNode(item: MarkPlanData) {
     if (item.nodes.length) {
-      this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+      // this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+      this.disposeProgressTimer();
       this.isSuspend = false
       this.nzCurrent = 0
       this.beforeEmergencyPlan = item
@@ -594,29 +596,74 @@ export class PlanComponent implements OnInit {
     })
   }
 
+  /**
+   * 上一次的进度值
+   *  停止更新时需要置为undefined
+   */
+  lastProgress: undefined | number = undefined
   //更新进度条 值
-  xxx = 0
   updateProgress() {
-    window.clearInterval(this.updateTimer) //清除定时器
+    // window.clearInterval(this.updateTimer) //清除定时器
+    this.disposeProgressTimer();
     if (this.isShowLoading) { //当前为loading状态
       window.setTimeout(() => {
+        this.lastProgress = undefined;
         this.updateProgress()
       }, 0);
       return
     }
-    let time: number = this.beforePlanNode.getShowTime() || 1
+
+    /**
+     * 更新的间隔- 毫秒
+     */
+    const c_interval = 100;
+    /**
+     * 总进度比例 100-- 表示100%
+     */
+    const c_fullRatio = 100;
+
+    /**
+     * 本节点的总时长
+     */
+    let time: number = this.beforePlanNode.getShowTime() || 1;
+    time *= 1000; //换算为毫秒
+
     this.updateTimer = window.setInterval(() => {
-      this.progressList[this.nzCurrent] = Math.ceil(this.progressList[this.nzCurrent] + Number((1000 / time).toFixed(2)) / 10)
-   
-      console.log('进度百分比', this.progressList[this.nzCurrent], new Date().getTime() - this.xxx)
-      this.xxx = new Date().getTime()
-      if (this.progressList[this.nzCurrent] >= 100) {
-        this.progressList[this.nzCurrent] = 100
-        window.clearInterval(this.updateTimer) //清除定时器
+
+      // 步长- 距离上次更新进度的时间间隔（毫秒）
+      let step = 0;
+      if (this.lastProgress != undefined) {
+        step = (new Date().getTime() - this.lastProgress);
+      }
+
+      // 本次应该前进的进度比例 
+      let add = Number((c_fullRatio / time)) * step;
+
+      // 更新进度(数据层)
+      this.progressList[this.nzCurrent] = (this.progressList[this.nzCurrent] + add)
+
+      //记录时间
+      this.lastProgress = new Date().getTime()
+
+      if (this.progressList[this.nzCurrent] >= c_fullRatio) {
+        this.progressList[this.nzCurrent] = c_fullRatio
+        this.disposeProgressTimer()
+        // window.clearInterval(this.updateTimer) //清除定时器 2023/1/9 刘向辉废弃,改用disposeProgressTimer()
         !this.isSuspend ? this.autoPlay() : null
         return
       }
-    }, 1000)
+    }, c_interval)
+
+  }
+
+  /**
+   * 释放进度计时器
+   */
+  disposeProgressTimer() {
+    this.lastProgress = undefined;
+    if (this.updateTimer != undefined) {
+      window.clearInterval(this.updateTimer) //清除定时器
+    }
 
   }
 
@@ -635,7 +682,8 @@ export class PlanComponent implements OnInit {
     if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) {
       this.updateProgressList()
     }
-    this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+    // this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+    this.disposeProgressTimer();
     this.isSuspend = false //取消暂停
     this.nzCurrent = event
     this.progressList.forEach((item, index) => { index >= this.nzCurrent ? this.progressList[index] = 0 : this.progressList[index] = 100 })
@@ -655,7 +703,8 @@ export class PlanComponent implements OnInit {
     if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) {
       this.updateProgressList()
     }
-    this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+    // this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+    this.disposeProgressTimer();
     this.nzCurrent = this.nzCurrent - 1
     this.progressList.forEach((item, index) => { index >= this.nzCurrent ? this.progressList[index] = 0 : this.progressList[index] = 100 })
     this.publicToggleNode()
@@ -674,10 +723,12 @@ export class PlanComponent implements OnInit {
     let msg: string = this.isSuspend ? "目前已暂停" : "目前已开始播放"
     this.message.info(msg);
     if (this.isSuspend) { //暂停
-      window.clearInterval(this.updateTimer) //清除定时器
+      // window.clearInterval(this.updateTimer) //清除定时器
+      this.disposeProgressTimer();
       SpeakingTool.Instance.pause()
     } else { //开启
-      this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+      // this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+      this.disposeProgressTimer();
       SpeakingTool.Instance.resume()
       this.progressList.forEach((item, index) => { index > this.nzCurrent ? this.progressList[index] = 0 : null })
       if (this.progressList[this.nzCurrent] === 0) { MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true) }
@@ -691,7 +742,8 @@ export class PlanComponent implements OnInit {
       this.message.info('请选择节点');
       return
     }
-    this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+    // this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+    this.disposeProgressTimer()
     this.updateProgressList().then(res => {
       this.isSuspend = false
       this.nzCurrent = 0
@@ -712,7 +764,8 @@ export class PlanComponent implements OnInit {
     if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) {
       this.updateProgressList()
     }
-    this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+    // this.updateTimer ? window.clearInterval(this.updateTimer) : null //清除定时器
+    this.disposeProgressTimer();
     this.nzCurrent = this.nzCurrent + 1
     this.progressList.forEach((item, index) => { index >= this.nzCurrent ? this.progressList[index] = 0 : this.progressList[index] = 100 })
     this.publicToggleNode()