From d7e53e63dd6c435e226d9f08cde31ca35131c911 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 14 四月 2025 15:30:33 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TextbookReader
---
src/views/components/pomodoro.vue | 197 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 197 insertions(+), 0 deletions(-)
diff --git a/src/views/components/pomodoro.vue b/src/views/components/pomodoro.vue
new file mode 100644
index 0000000..29c5393
--- /dev/null
+++ b/src/views/components/pomodoro.vue
@@ -0,0 +1,197 @@
+<template>
+ <el-dialog v-model="dialogVisable" title="鐣寗闂归挓" width="500" >
+ <div class="ring-box">
+ <span class="title-txt">鍝嶉搩鏃堕暱</span>
+ <el-switch v-model="pageData.isRing" :disabled="isRuning" />
+ <el-input-number v-model="pageData.ringTime" :disabled="isRuning" :min="1" step-strictly />
+ </div>
+ <p class="prompt-txt ring-title">浠ョ涓哄崟浣�</p>
+ <div class="border" ></div>
+ <ul class="sustain-box">
+ <li>
+ <span class="title-txt">鎸佺画鏃堕棿</span>
+ <span class="label-txt" >涓撴敞鏃堕棿</span>
+ <el-input-number v-model="pageData.workTime" :disabled="isRuning" :min="1" step-strictly />
+ </li>
+ <li>
+ <span class="title-txt"></span>
+ <span class="label-txt">鐭紤鎭�</span>
+ <el-input-number v-model="pageData.shortTime" :disabled="isRuning" :min="0" step-strictly />
+ </li>
+ <li>
+ <span class="title-txt"></span>
+ <span class="label-txt">闀夸紤鎭�</span>
+ <el-input-number v-model="pageData.longTime" :disabled="isRuning" :min="0" step-strictly />
+ </li>
+ </ul>
+ <p class="prompt-txt ring-title" >浠ュ垎閽熶负鍗曚綅</p>
+ <div class="border" ></div>
+ <div>
+ <el-button type="primary" @click="startFun" >寮�濮�</el-button>
+ <el-button type="primary" @click="pauseFun" >鍋滄</el-button>
+ <el-button @click="resetFun">閲嶇疆</el-button>
+ <el-button @click="handleRestFun(false)" >闀夸紤鎭�</el-button>
+ <el-button @click="handleRestFun(true)">鐭紤鎭�</el-button>
+ </div>
+ {{ formatTime(pageData.currentTime) }}
+ </el-dialog>
+ <!-- <video src="../../assets/audio/涔拌荆妞掍篃鐢ㄥ埜.mp3" ref="audioRef"></video> -->
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { ref, reactive, defineExpose ,watchEffect } from 'vue'
+import {useFormatData} from '@/hooks/public'
+const isShow =ref<boolean>(false) // 鎮诞妗嗘槸鍚︽樉绀�
+const audioRef = ref<HTMLAudioElement>() // 闊抽瀹炰緥
+const dialogVisable = ref<boolean>(false) // 寮圭獥鐘舵��
+const timerInterval = ref<any>(null) // 璁℃椂鍣ㄥ疄渚�
+const isRuning = ref<boolean>(false) // 璁℃椂鍣ㄦ槸鍚﹁繍琛�
+const isBreak = ref<boolean>(false) // true 浼戞伅 false 宸ヤ綔
+const isShortTime = ref<boolean>(false) // 闀跨煭浼戞伅妯″紡
+const pageData = reactive({
+ isRing: true, // 鏄惁鍝嶉搩
+ ringTime: 5, // 鍝嶉搩鏃堕暱 绉�
+ workTime: 25, // 宸ヤ綔鏃堕暱 鍒嗛挓
+ saveWorkTime: 0, // 鍓╀綑宸ヤ綔鏃堕棿
+ shortTime: 5, // 鐭紤鎭�
+ longTime: 5, // 闀夸紤鎭�
+ currentTime:0, // 鏄剧ず鏃堕棿 绉�
+})
+const { formatTime } = useFormatData()
+watchEffect(() => {
+ pageData.currentTime = pageData.workTime * 60
+})
+watchEffect(() => {
+ if(!isBreak.value) pageData.saveWorkTime = pageData.currentTime
+})
+const setDialogVisable = (value: boolean) => {
+ dialogVisable.value = value
+}
+ // 寮�濮嬭鏃�
+const startFun = () => {
+ isShow.value = true
+ isRuning.value = true
+ timerInterval.value = setInterval(() => {
+ if(pageData.currentTime > 0) {
+ pageData.currentTime--
+ } else {
+ playAudio()
+ if(isBreak.value) {
+ // 宸ヤ綔鏃堕棿璧嬪��
+ isBreak.value = false
+ if( pageData.saveWorkTime) {
+ pageData.currentTime = pageData.saveWorkTime
+ ElMessage.success('浼戞伅缁撴潫锛屽紑濮嬪涔犲惂锛�')
+ } else {
+ clearInterval(timerInterval.value)
+ isRuning.value = false
+ ElMessage.success('瀛︿範缁撴潫')
+ }
+
+ } else {
+ // 浼戞伅鏃堕棿璧嬪��
+ isBreak.value = true
+ pageData.currentTime = isShortTime.value ? pageData.shortTime * 60 : pageData.longTime * 60
+ ElMessage.success('浼戞伅涓�涓嬪惂锛�')
+ }
+ }
+
+ }, 1000)
+ dialogVisable.value = false
+}
+// 鏆傚仠璁℃椂
+const pauseFun = () => {
+ isRuning.value = false
+ if(timerInterval.value) {
+ clearInterval(timerInterval.value)
+ }
+}
+// 閲嶇疆璁℃椂鍣�
+const resetFun = () => {
+ isRuning.value = false
+ isBreak.value = false
+ pauseFun()
+ pageData.currentTime = pageData.workTime * 60
+}
+// 浼戞伅鎸夐挳
+const startBreak = () => {
+ if(isRuning.value && !isBreak.value) {
+ if(pageData.shortTime || pageData.longTime) {
+ pageData.saveWorkTime = pageData.currentTime
+ isBreak.value = true
+ pageData.currentTime = isShortTime.value ? pageData.shortTime * 60 : pageData.longTime * 60
+ ElMessage.success('寮�濮嬩紤鎭�')
+ } else {
+ ElMessage.warning('鏆傛湭璁剧疆浼戞伅鏃堕棿')
+ }
+ }
+}
+// 寮�濮嬪搷閾�
+const playAudio = () => {
+ audioRef.value!.currentTime = 0
+ audioRef.value?.play()
+ setTimeout(() => {
+ pauseAudio()
+ },pageData.ringTime * 1000)
+}
+ // 鏆傚仠鍝嶉搩
+const pauseAudio = () => {
+ audioRef.value?.pause()
+}
+
+// 闀跨煭浼戞伅
+const handleRestFun = (value:boolean) => {
+ isShortTime.value = value
+ startBreak()
+}
+
+defineExpose({
+ isShow,
+ isRuning,
+ pageData,
+ setDialogVisable,
+ startFun,
+ pauseFun,
+ resetFun,
+ handleRestFun
+})
+</script>
+
+<style lang="less" scoped>
+.prompt-txt {
+ margin-top: 10px;
+ font-size: 12px;
+ color: #b7b7b7;
+}
+.title-txt {
+ color: #2c2c2c;
+ width: 4em;
+}
+.label-txt {
+ width: 4em;
+ color:#707070 ;
+}
+.ring-box {
+ width: 300px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.ring-title {
+ padding-left: 150px;
+}
+.sustain-box {
+ width: 300px;
+ li {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ }
+}
+.border {
+ height: 1px;
+ background-color:#cecece ;
+ margin: 10px 0;
+}
+</style>
--
Gitblit v1.9.1