417 lines
9.5 KiB
Vue
417 lines
9.5 KiB
Vue
<template>
|
||
<div class="tool-detail-page">
|
||
|
||
<!-- 计时器显示 -->
|
||
<n-card size="small" title="计时器">
|
||
<div class="timer-display">
|
||
<span class="time-main">{{ formatTimeMain(data.timeDisplay) }}</span>
|
||
<span class="time-milliseconds">{{ formatTimeMilliseconds(data.timeDisplay) }}</span>
|
||
</div>
|
||
</n-card>
|
||
|
||
<!-- 控制按钮 -->
|
||
<n-card size="small" title="控制">
|
||
<n-flex justify="center" gap="12">
|
||
<n-button
|
||
type="success"
|
||
:disabled="data.isRunning"
|
||
@click="startTimer"
|
||
>开始</n-button>
|
||
<n-button
|
||
type="warning"
|
||
:disabled="!data.isRunning"
|
||
@click="pauseTimer"
|
||
>暂停</n-button>
|
||
<n-button
|
||
type="error"
|
||
@click="resetTimer"
|
||
>重置</n-button>
|
||
<n-button
|
||
type="primary"
|
||
@click="recordTime"
|
||
>记录</n-button>
|
||
</n-flex>
|
||
</n-card>
|
||
|
||
<!-- 设置 -->
|
||
<n-card size="small" title="设置">
|
||
<n-form
|
||
class="form-no-feedback"
|
||
label-align="left"
|
||
label-placement="top"
|
||
label-width="auto"
|
||
>
|
||
<!-- 计时模式 -->
|
||
<n-form-item label="计时模式">
|
||
<n-radio-group v-model:value="data.timerMode">
|
||
<n-radio-button label="正计时" :value="'countUp'" />
|
||
<n-radio-button label="倒计时" :value="'countDown'" />
|
||
</n-radio-group>
|
||
</n-form-item>
|
||
|
||
<!-- 倒计时时间设置 -->
|
||
<n-form-item label="倒计时设置" v-if="data.timerMode === 'countDown'">
|
||
<n-input-group>
|
||
<n-input-number
|
||
v-model:value="data.countDownTime.hours"
|
||
:min="0"
|
||
:max="99"
|
||
:precision="0"
|
||
:step="1"
|
||
></n-input-number>
|
||
<span class="time-separator">时</span>
|
||
<n-input-number
|
||
v-model:value="data.countDownTime.minutes"
|
||
:min="0"
|
||
:max="59"
|
||
:precision="0"
|
||
:step="1"
|
||
></n-input-number>
|
||
<span class="time-separator">分</span>
|
||
<n-input-number
|
||
v-model:value="data.countDownTime.seconds"
|
||
:min="0"
|
||
:max="59"
|
||
:precision="0"
|
||
:step="1"
|
||
></n-input-number>
|
||
<span class="time-separator">秒</span>
|
||
</n-input-group>
|
||
</n-form-item>
|
||
</n-form>
|
||
</n-card>
|
||
|
||
<!-- 时间记录 -->
|
||
<n-card size="small" title="时间记录">
|
||
<div class="records-content">
|
||
<div
|
||
v-if="data.records.length === 0"
|
||
class="no-records"
|
||
>暂无记录</div>
|
||
<div
|
||
v-for="(record, index) in data.records"
|
||
:key="record.id"
|
||
class="record-item"
|
||
>
|
||
<span class="record-index">{{ index + 1 }}</span>
|
||
<span class="record-time">{{ formatTime(record.time) }}</span>
|
||
<span class="record-timestamp">{{ formatDateTime(record.timestamp) }}</span>
|
||
</div>
|
||
</div>
|
||
<n-button
|
||
type="error"
|
||
size="small"
|
||
class="clear-records-btn"
|
||
@click="clearRecords"
|
||
>清空记录</n-button>
|
||
</n-card>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
NButton, NCard, NFlex, NForm, NFormItem, NInputGroup, NInputNumber, NRadioButton, NRadioGroup,
|
||
} from 'naive-ui';
|
||
|
||
import {
|
||
reactive, onBeforeUnmount, watch,
|
||
} from 'vue';
|
||
|
||
import {
|
||
getCommonDateTime,
|
||
} from '@frost-utils/javascript/common/index';
|
||
|
||
import {
|
||
$dialog, $notification,
|
||
} from '@/assets/js/naive-ui';
|
||
|
||
/** 数据 */
|
||
const data = reactive({
|
||
/** 计时器模式：countUp（正计时）, countDown（倒计时） */
|
||
timerMode: 'countUp',
|
||
/** 是否正在运行 */
|
||
isRunning: false,
|
||
/** 当前显示时间（毫秒） */
|
||
timeDisplay: 0,
|
||
/** 倒计时时间设置 */
|
||
countDownTime: {
|
||
hours: 0,
|
||
minutes: 5,
|
||
seconds: 0
|
||
},
|
||
/** 计时器ID */
|
||
timerID: null,
|
||
/** 开始时间戳 */
|
||
startTime: 0,
|
||
/** 已运行时间 */
|
||
elapsedTime: 0,
|
||
/** 时间记录 */
|
||
records: [],
|
||
/** 记录ID */
|
||
recordID: 0,
|
||
});
|
||
|
||
/** 格式化时间显示（主时间部分：HH:MM:SS） */
|
||
function formatTimeMain(milliseconds) {
|
||
|
||
let totalSeconds = Math.floor(milliseconds / 1000);
|
||
let hours = Math.floor(totalSeconds / 3600);
|
||
let minutes = Math.floor((totalSeconds % 3600) / 60);
|
||
let seconds = totalSeconds % 60;
|
||
|
||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||
|
||
}
|
||
|
||
/** 格式化时间显示（毫秒部分：.SSS） */
|
||
function formatTimeMilliseconds(milliseconds) {
|
||
let ms = milliseconds % 1000;
|
||
return `.${ms.toString().padStart(3, '0')}`;
|
||
}
|
||
|
||
/** 格式化完整时间显示（用于记录和提示） */
|
||
function formatTime(milliseconds) {
|
||
return `${formatTimeMain(milliseconds)}${formatTimeMilliseconds(milliseconds)}`;
|
||
}
|
||
|
||
/** 格式化日期时间 */
|
||
function formatDateTime(timestamp) {
|
||
return getCommonDateTime(timestamp);
|
||
}
|
||
|
||
/** 开始计时器 */
|
||
function startTimer() {
|
||
|
||
if (data.timerMode === 'countUp') {
|
||
|
||
// 正计时模式
|
||
data.startTime = Date.now() - data.elapsedTime;
|
||
data.timerID = setInterval(() => {
|
||
data.elapsedTime = Date.now() - data.startTime;
|
||
data.timeDisplay = data.elapsedTime;
|
||
}, 10); // 每10毫秒更新一次，提高毫秒显示精度
|
||
|
||
} else {
|
||
|
||
// 倒计时模式
|
||
if (data.timeDisplay === 0) {
|
||
// 如果是首次开始或重置后开始，设置倒计时时间
|
||
const { hours, minutes, seconds } = data.countDownTime;
|
||
data.timeDisplay = (hours * 3600 + minutes * 60 + seconds) * 1000;
|
||
}
|
||
|
||
data.startTime = Date.now() + data.timeDisplay;
|
||
data.timerID = setInterval(() => {
|
||
|
||
data.timeDisplay = Math.max(0, data.startTime - Date.now());
|
||
data.elapsedTime = (data.startTime - data.timeDisplay) - data.startTime + data.timeDisplay;
|
||
|
||
// 倒计时结束
|
||
if (data.timeDisplay === 0) {
|
||
pauseTimer();
|
||
notify({
|
||
message: '倒计时结束！',
|
||
type: 'success',
|
||
title: '提示'
|
||
});
|
||
}
|
||
|
||
}, 10); // 每10毫秒更新一次，提高毫秒显示精度
|
||
|
||
}
|
||
|
||
data.isRunning = true;
|
||
|
||
}
|
||
|
||
/** 暂停计时器 */
|
||
function pauseTimer() {
|
||
if (data.timerID) {
|
||
clearInterval(data.timerID);
|
||
data.timerID = null;
|
||
data.isRunning = false;
|
||
}
|
||
}
|
||
|
||
/** 重置计时器 */
|
||
function resetTimer() {
|
||
pauseTimer();
|
||
data.elapsedTime = 0;
|
||
data.timeDisplay = 0;
|
||
}
|
||
|
||
/** 记录时间 */
|
||
function recordTime() {
|
||
|
||
data.recordID += 1;
|
||
data.records.push({
|
||
id: data.recordID,
|
||
time: data.timeDisplay,
|
||
timestamp: Date.now()
|
||
});
|
||
|
||
notify({
|
||
message: `已记录时间: ${formatTime(data.timeDisplay)}`,
|
||
type: 'info',
|
||
title: '记录成功'
|
||
});
|
||
|
||
}
|
||
|
||
/** 清空记录 */
|
||
function clearRecords() {
|
||
$dialog.create({
|
||
content: '确定要清空所有时间记录吗？',
|
||
negativeText: '取消',
|
||
positiveText: '确定',
|
||
title: '确认',
|
||
type: 'default',
|
||
onPositiveClick: () => {
|
||
data.records = [];
|
||
data.recordID = 0;
|
||
},
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @description 提示信息
|
||
* @param {object} options
|
||
* @param {number} options.duration
|
||
* @param {string} options.message
|
||
* @param {string} options.title
|
||
* @param {string} options.type
|
||
*/
|
||
function notify(options) {
|
||
|
||
let {
|
||
duration = 3000,
|
||
message = '',
|
||
title = '提示',
|
||
type = 'info',
|
||
} = options;
|
||
|
||
return $notification.create({
|
||
content: message,
|
||
duration: duration,
|
||
title: title,
|
||
type: type,
|
||
});
|
||
|
||
}
|
||
|
||
/** 监听计时模式切换 */
|
||
watch(
|
||
() => data.timerMode,
|
||
() => {
|
||
// 切换模式时重置计时器
|
||
resetTimer();
|
||
}
|
||
);
|
||
|
||
/** 监听倒计时时间设置变化 */
|
||
watch(
|
||
() => [data.countDownTime.hours, data.countDownTime.minutes, data.countDownTime.seconds],
|
||
() => {
|
||
// 只有在倒计时模式且计时器未运行时，才更新显示时间
|
||
if (data.timerMode === 'countDown' && !data.isRunning && data.timeDisplay === 0) {
|
||
const { hours, minutes, seconds } = data.countDownTime;
|
||
data.timeDisplay = (hours * 3600 + minutes * 60 + seconds) * 1000;
|
||
}
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
onBeforeUnmount(() => {
|
||
if (data.timerID) {
|
||
clearInterval(data.timerID);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.timer-display {
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
color: #2196F3;
|
||
font-family: 'Courier New', monospace;
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
|
||
.time-main {
|
||
font-size: 48px;
|
||
}
|
||
|
||
.time-milliseconds {
|
||
font-size: 32px;
|
||
color: #666;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
|
||
.time-separator {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 8px;
|
||
font-size: 16px;
|
||
color: #666;
|
||
}
|
||
|
||
.records-content {
|
||
padding: 8px 16px;
|
||
border: 1px solid #F0F0F0;
|
||
border-radius: 4px;
|
||
background-color: #FFF;
|
||
line-height: 1.6;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
margin-bottom: 12px;
|
||
|
||
.record-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 4px 0;
|
||
border-bottom: 1px dashed #F0F0F0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.record-index {
|
||
width: 30px;
|
||
color: #999;
|
||
}
|
||
|
||
.record-time {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
color: #2196F3;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.record-timestamp {
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.no-records {
|
||
text-align: center;
|
||
color: #999;
|
||
padding: 20px 0;
|
||
}
|
||
}
|
||
|
||
.clear-records-btn {
|
||
display: block;
|
||
margin-left: auto;
|
||
}
|
||
</style>
|