fuse-code/src/views/positioning/index.vue

<template>
    <RightFillPano>
    <template #header>
      <div class="tabs">
        <span class="tabs-left">行动录制</span>
        <div class="tabs-right">
            <span v-if="!isRecord"></span>
            <span v-else class="timer-display">{{ formatTime(recordingTime) }}</span>
            <span class="tabs-right-img">
                <img v-show="!isRecord" src="@/assets/record_n.svg" alt="" @click="startRecord('start')">
                <img v-show="isRecord" src="@/assets/record_s.svg" alt="" @click="startRecord('stop')">
            </span>
        </div>
      </div>
    </template>
    <mediaList />
  </RightFillPano>
</template>

<script lang="ts" setup>
import { RightFillPano } from "@/layout";
import { postAddPathInPosition } from '@/api'
import mediaList from "./components/mediaList.vue";
import { nextTick, reactive, ref, watchEffect, onUnmounted } from "vue";
import { positionList, enterOld, enterEdit } from "@/store";
import { loadPack } from '@/utils'

const isRecord = ref(false);
const startTime = ref<number>(0);
const endTime = ref<number>(0);
const recordingTime = ref<number>(0);
let timer: NodeJS.Timeout | null = null;

nextTick(() => {
//   enterEdit();
});

// 格式化时间为 HH:MM:SS 格式
const formatTime = (seconds: number): string => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

const startRecord = (type: string) => {
    if (type === 'start') {
        // 开始录制
        isRecord.value = true;
        startTime.value = Date.now(); // 记录开始时间戳
        recordingTime.value = 0;
        
        // 启动计时器，每秒更新一次
        timer = setInterval(() => {
            recordingTime.value = Math.floor((Date.now() - startTime.value) / 1000);
        }, 1000);
        let isSave = false;
    } else {
        // 停止录制
        isRecord.value = false;
        endTime.value = Date.now(); // 记录结束时间戳
        
        // 清除计时器
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
        
        // 重置录制时间
        recordingTime.value = 0;
        
        console.log('录制时间段:', {
            startTime: startTime.value,
            endTime: endTime.value,
            duration: endTime.value - startTime.value
        });
        // 这里调path接口传路线数据过去,有几个设备就生成几个path
        positionList.value.forEach((pos: any) => {
          postAddPathInPosition({}, startTime.value, endTime.value)
        });
        // enterOld(async () => {})
    }
};

// 组件卸载时清理计时器
onUnmounted(() => {
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
});
</script>

<style lang="scss" scoped>
.tabs {
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -20px;
  padding: 0 20px;
  margin-bottom: 20px;
  .tabs-left {
    font-size: 16px;
    font-weight: blod;
    color: #fff;
  }
  .tabs-right {
    display: flex;
    align-items: center;
    gap: 10px;
    .timer-display {
      font-family: 'Courier New', monospace;
      font-weight: bold;
      color: #FFFFFF;
      font-size: 14px;
      min-width: 65px;
      text-align: center;
    }
    .tabs-right-img {
     display: flex;
     align-items: center;
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>