✨ feat: 增加乐跑记录时间选择

src/pages/admin/lepaoRecords/lepaoRecords.vue

@@ -24,6 +24,12 @@
                   <a-input v-model="queryData.email" placeholder="请输入通知邮箱" allow-clear />
                 </a-form-item>
               </a-col>
+              <a-col :span="12">
+                <a-form-item field="queryTime" label="乐跑时间">
+                  <a-range-picker v-model="queryData.queryTime" show-time format="YYYY-MM-DD HH:mm" value-format="x"
+                    @ok="getRecords()" />
+                </a-form-item>
+              </a-col>
             </a-row>
           </a-form>
         </a-col>
@@ -161,6 +167,7 @@ import { ref, reactive, onUnmounted, onMounted, h } from 'vue'
 import { adminLepaoRecords } from '@/api/lepao'
 import { Notification } from '@arco-design/web-vue'
 import { IconSearch } from '@arco-design/web-vue/es/icon'
+import { getSemesterTimestamps } from '@/utils/util'
 
 const data = ref([])
 const loading = ref(false)
@@ -168,7 +175,8 @@ const loading = ref(false)
 const queryData = reactive({
   name: '',
   lepao_account: '',
-  email: ''
+  email: '',
+  queryTime: []
 })
 
 const pagination = reactive({
@@ -188,6 +196,7 @@ const reset = () => {
   queryData.lepao_account = ''
   queryData.email = ''
   queryData.area = ''
+  queryData.queryTime = getSemesterTimestamps()
   getRecords()
 }
 
@@ -272,6 +281,7 @@ const stopPolling = () => {
 }
 
 onMounted(async () => {
+  queryData.queryTime = getSemesterTimestamps()
   getRecordsAsync()
   startPolling()
 })
@@ -280,7 +290,6 @@ onMounted(async () => {
 onUnmounted(() => {
   stopPolling()
 })
-
 </script>
 
 <style scoped lang="less">

src/pages/lepao/lepaoRecords/index.vue

@@ -24,6 +24,12 @@
                   <a-input v-model="queryData.email" placeholder="请输入通知邮箱" allow-clear />
                 </a-form-item>
               </a-col>
+              <a-col :span="12">
+                <a-form-item field="queryTime" label="乐跑时间">
+                  <a-range-picker v-model="queryData.queryTime" show-time format="YYYY-MM-DD HH:mm" value-format="x"
+                    @ok="getRecords()" />
+                </a-form-item>
+              </a-col>
             </a-row>
           </a-form>
         </a-col>
@@ -100,9 +106,15 @@
           <a-table-column title="状态" ellipsis tooltip :width="130">
             <template #cell="{ record }">
               <div class="state">
-                <div class="state" v-if="record.state === 0"><div class="circle zero"></div>乐跑进行中</div>
-                <div class="state" v-else-if="record.state === 1"><div class="circle one" ></div>乐跑成功</div>
-                <div class="state" v-else><div class="circle else" ></div>乐跑失败</div>
+                <div class="state" v-if="record.state === 0">
+                  <div class="circle zero"></div>乐跑进行中
+                </div>
+                <div class="state" v-else-if="record.state === 1">
+                  <div class="circle one"></div>乐跑成功
+                </div>
+                <div class="state" v-else>
+                  <div class="circle else"></div>乐跑失败
+                </div>
               </div>
             </template>
           </a-table-column>
@@ -117,7 +129,7 @@
           </a-table-column>
           <a-table-column title="乐跑距离" :width="100" ellipsis tooltip>
             <template #cell="{ record }">
-              {{ record.distance ? `${Number(record.distance).toFixed(2)} Km` : '' }} 
+              {{ record.distance ? `${Number(record.distance).toFixed(2)} Km` : '' }}
             </template>
           </a-table-column>
           <a-table-column title="跑步时长" :width="100" ellipsis tooltip>
@@ -127,7 +139,7 @@
           </a-table-column>
           <a-table-column title="平均配速" :width="90" ellipsis tooltip>
             <template #cell="{ record }">
-              {{ record.distance ? calculatePace(record.time, record.distance): ''}}
+              {{ record.distance ? calculatePace(record.time, record.distance) : '' }}
             </template>
           </a-table-column>
           <a-table-column title="开始时间" :width="145" ellipsis tooltip>
@@ -135,14 +147,15 @@
               {{ stramptoTime(record.startTime) }}
             </template>
           </a-table-column>
-           <a-table-column title="结束时间" :width="145" ellipsis tooltip>
+          <a-table-column title="结束时间" :width="145" ellipsis tooltip>
             <template #cell="{ record }">
               {{ record.endTime ? stramptoTime(record.endTime) : '' }}
             </template>
           </a-table-column>
           <a-table-column title="" :width="100" fixed="right">
             <template #cell="{ record }">
-              <a-button @click="$router.push(`/lepao/recordDetail/${record.id}`)" v-if="record.state === 1">查看详情</a-button>
+              <a-button @click="$router.push(`/lepao/recordDetail/${record.id}`)"
+                v-if="record.state === 1">查看详情</a-button>
             </template>
           </a-table-column>
         </template>
@@ -153,13 +166,13 @@
 </template>
 
 <script setup>
-import { ref, reactive, onUnmounted, onMounted, h } from 'vue'
+import { ref, reactive, onMounted, h } from 'vue'
 import { lepaoRecords } from '@/api/lepao'
 import { Notification } from '@arco-design/web-vue'
 import { IconSearch } from '@arco-design/web-vue/es/icon'
 import { useUserStore } from '@/store/modules/user'
 import { useRoute } from 'vue-router'
-import { getNotice } from '@/utils/util'
+import { getNotice, getSemesterTimestamps } from '@/utils/util'
 
 const notice = ref('')
 
@@ -183,7 +196,8 @@ getuser()
 const queryData = reactive({
   name: '',
   lepao_account: '',
-  email: ''
+  email: '',
+  queryTime: []
 })
 
 const pagination = reactive({
@@ -203,6 +217,7 @@ const reset = () => {
   queryData.lepao_account = ''
   queryData.email = ''
   queryData.area = ''
+  queryData.queryTime = getSemesterTimestamps()
   getRecords()
 }
 
@@ -267,36 +282,11 @@ function formatSecondsToMinSec(totalSeconds) {
   return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
 }
 
-let timer = null
-
-// 轮询
-const startPolling = () => {
-  if (!timer) {
-    timer = setInterval(async () => {
-      await getRecords()
-    }, 5000)
-  }
-}
-
-// 停止轮询
-const stopPolling = () => {
-  if (timer) {
-    clearInterval(timer)
-    timer = null
-  }
-}
-
-onMounted(async () => {
-  getRecordsAsync()
+onMounted(() => {
+  queryData.queryTime = getSemesterTimestamps()
+  getRecords()
   GetNotice()
-  startPolling()
 })
-
-// 组件销毁时停止轮询
-onUnmounted(() => {
-  stopPolling()
-})
-
 </script>
 
 <style scoped lang="less">