Переглянути джерело

refactor: 优化时间时钟组件性能并移除重复代码

重构时间时钟组件,使用全局单例定时器减少性能开销
移除reviewOrderItem组件中未使用的formatWaitingTime函数
更新请求配置的baseUrl并统一组件样式语言为scss
ylong 1 місяць тому
батько
коміт
8b9de92c70

+ 1 - 1
config/request.js

@@ -1,7 +1,7 @@
 /**
  * 文档地址:https://uiadmin.net/uview-plus/js/http.html
  */
-const baseUrl = "https://bk.shuhi.com";
+const baseUrl = "https://bpi.shuhi.com";
 export function initRequest() {
     console.log("初始化了 http 请求代码");
     // 初始化请求配置

+ 0 - 14
pages/index/audit/components/reviewOrderItem.vue

@@ -62,20 +62,6 @@ const stockStatusColor = computed(() => {
     return "#999999";
 });
 
-// 格式化等待时长(毫秒转为时:分:秒)
-const formatWaitingTime = (milliseconds) => {
-    if (!milliseconds) return "00:00:00";
-
-    const totalSeconds = Math.floor(milliseconds / 1000);
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-
-    const pad = (num) => String(num).padStart(2, '0');
-
-    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-};
-
 // 超时未入库:申请复审后等待时间 >= 24 小时 且 未入库
 const isOverdue = computed(() => {
     const waitingMs = Number(props.item?.waitingTime) || 0;

+ 39 - 22
pages/index/audit/components/time-clock.vue

@@ -20,54 +20,71 @@ export default {
     },
     data() {
         return {
-            // 当前累计毫秒
-            currentMillis: Math.floor(this.initialSeconds),
-            // 定时器实例(用于清理)
-            timer: null
+            // 基础毫秒(作为起点)
+            baseMillis: Math.floor(this.initialSeconds),
+            // 启动时间戳(用于计算增量)
+            startTs: Date.now(),
+            // 全局tick推送的当前时间(订阅更新)
+            nowTs: Date.now()
         }
     },
     computed: {
-        // 格式化时间:毫秒 → 00:00:00.000 格式
+        // 格式化时间:毫秒 → 00:00:00.00 格式(毫秒两位)
         formattedTime() {
-            const totalMs = this.currentMillis
+            const elapsed = this.baseMillis + (this.nowTs - this.startTs)
+            const totalMs = Math.max(0, Math.floor(elapsed))
             const hours = String(Math.floor(totalMs / 3600000)).padStart(2, '0')
             const minutes = String(Math.floor((totalMs % 3600000) / 60000)).padStart(2, '0')
             const seconds = String(Math.floor((totalMs % 60000) / 1000)).padStart(2, '0')
-            const milliseconds = String(totalMs % 1000).padStart(3, '0')
-            return `${hours}:${minutes}:${seconds}.${milliseconds}`
+            // const ms2 = String(Math.floor((totalMs % 1000) / 10)).padStart(2, '0')
+            return `${hours}:${minutes}:${seconds}`
         }
     },
     watch: {
         // 监听初始秒数变化(对应 Vue3 的 watch 函数)
         initialSeconds: {
             handler(newVal) {
-                // 同步为毫秒值并重启计时
+                // 同步为毫秒值并重置起点
                 const safeVal = Number(newVal)
-                this.currentMillis = Number.isFinite(safeVal) ? Math.floor(safeVal) : 0
-                this.startTimer() // 重启定时器
+                this.baseMillis = Number.isFinite(safeVal) ? Math.floor(safeVal) : 0
+                this.startTs = Date.now()
             },
             immediate: true
         }
     },
     methods: {
-        // 启动计时(毫秒级递增)
-        startTimer() {
-            // 清除已有定时器,避免重复计时
-            if (this.timer) clearInterval(this.timer)
-            // 每 10ms 递增 10 毫秒(兼顾性能与精度)
-            const step = 10
-            this.timer = setInterval(() => {
-                this.currentMillis += step
-            }, step)
+        // 订阅全局tick(单例定时器,所有实例共享,降低性能开销)
+        subscribeTick() {
+            const scope = globalThis.__timeClockScope || (globalThis.__timeClockScope = {
+                subs: new Set(),
+                timer: null
+            })
+            const cb = () => { this.nowTs = Date.now() }
+            scope.subs.add(cb)
+            if (!scope.timer) {
+                // 每秒触发一次,保持跳秒显示与两位毫秒展示
+                scope.timer = setInterval(() => {
+                    const now = Date.now()
+                    scope.subs.forEach(fn => fn(now))
+                }, 1000)
+            }
+            // 返回取消订阅函数
+            return () => {
+                scope.subs.delete(cb)
+                if (scope.subs.size === 0 && scope.timer) {
+                    clearInterval(scope.timer)
+                    scope.timer = null
+                }
+            }
         }
     },
     // 初始化时启动计时(对应 Vue3 的 setup 初始化逻辑)
     mounted() {
-        this.startTimer()
+        this._unsub = this.subscribeTick()
     },
     // 组件卸载时清理定时器(避免内存泄漏,与 Vue3 一致)
     beforeDestroy() {
-        if (this.timer) clearInterval(this.timer)
+        if (this._unsub) this._unsub()
     }
 }
 </script>

+ 1 - 1
pages/index/detail/components/BookItem2.vue

@@ -46,7 +46,7 @@ const handleClose = () => {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .card {
     padding: 12px;
     display: flex;