✨ feat: 针对重工乐跑进行了若干优化

src/pages/admin/lepaoAccount/accountList.vue

@@ -104,40 +104,40 @@
                     <a-tag color="red" v-else>关闭</a-tag>
                 </template>
                 <template #num="{ record }">
-                    {{ record.target_count != record.total_num ? `${record.total_num} / ${record.target_count}` :
-                        '已完成' }}
-                </template>
-                <template #state="{ record }">
-                    <div v-if="record.state === 0" class="state">
-                        <div class="circle zero"></div>需登录
-                    </div>
-                    <div v-else-if="record.state === 1" class="state">
-                        <div class="circle one"></div>正常
-                    </div>
-                    <div v-else class="state">
-                        <div class="circle else"></div>状态异常
-                    </div>
-                </template>
+                    {{ record.target_count != record.total_num ? `${record.total_num} / ${(record.target_count === 0 ||
+                        record.target_count < record.total_num) ? '∞' : record.target_count}` : '已完成' }} </template>
+                        <template #state="{ record }">
+                            <div v-if="record.state === 0" class="state">
+                                <div class="circle zero"></div>需登录
+                            </div>
+                            <div v-else-if="record.state === 1" class="state">
+                                <div class="circle one"></div>正常
+                            </div>
+                            <div v-else class="state">
+                                <div class="circle else"></div>状态异常
+                            </div>
+                        </template>
 
-                <template #auto_time="{ record }">
-                    {{ autoTimeLabel(record) }}
-                </template>
-                <template #create_time="{ record }">
-                    {{ stramptoTime(record.create_time) }}
-                </template>
+                        <template #auto_time="{ record }">
+                            {{ autoTimeLabel(record) }}
+                        </template>
+                        <template #create_time="{ record }">
+                            {{ stramptoTime(record.create_time) }}
+                        </template>
 
-                <template #optional="{ record }">
-                    <a-dropdown :popup-max-height="false" trigger="hover">
-                        <a-button>操作 <icon-down /></a-button>
-                        <template #content>
-                            <a-doption @click="editAccount(record)"><icon-edit /> 编辑账号</a-doption>
-                            <a-doption @click="SingleRun(record)"><icon-play-circle /> 开始单次乐跑</a-doption>
-                            <a-doption @click="ChangeAutoRun(record)"><icon-translate /> {{ record.auto_run ? '关闭' :
-                                '开启' }}自动乐跑</a-doption>
-                            <a-doption @click="DeleteAccount(record)"><icon-minus-circle /> 解绑账号</a-doption>
+                        <template #optional="{ record }">
+                            <a-dropdown :popup-max-height="false" trigger="hover">
+                                <a-button>操作 <icon-down /></a-button>
+                                <template #content>
+                                    <a-doption @click="editAccount(record)"><icon-edit /> 编辑账号</a-doption>
+                                    <a-doption @click="SingleRun(record)"><icon-play-circle /> 开始单次乐跑</a-doption>
+                                    <a-doption @click="ChangeAutoRun(record)"><icon-translate /> {{ record.auto_run ?
+                                        '关闭' :
+                                        '开启' }}自动乐跑</a-doption>
+                                    <a-doption @click="DeleteAccount(record)"><icon-minus-circle /> 解绑账号</a-doption>
+                                </template>
+                            </a-dropdown>
                         </template>
-                    </a-dropdown>
-                </template>
             </a-table>
         </a-card>
     </div>

src/pages/admin/lepaoRecords/lepaoRecords.vue

@@ -157,7 +157,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, h } from 'vue'
+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'
@@ -191,9 +191,14 @@ const reset = () => {
   getRecords()
 }
 
+const getRecordsAsync = async () => {
+  loading.value = true
+  await getRecords()
+  loading.value = false
+}
+
 const getRecords = async () => {
   try {
-    loading.value = true
     const reqData = {
       ...queryData,
       pagesize: pagination.pagesize,
@@ -212,8 +217,6 @@ const getRecords = async () => {
       title: '获取乐跑记录失败！',
       content: error.message || '请稍后再试'
     })
-  } finally {
-    loading.value = false
   }
 }
 
@@ -249,7 +252,35 @@ function formatSecondsToMinSec(totalSeconds) {
   return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
 }
 
-getRecords()
+let timer = null
+
+// 轮询
+const startPolling = () => {
+  if (!timer) {
+    timer = setInterval(async () => {
+      await getRecords()
+    }, 5000)
+  }
+}
+
+// 停止轮询
+const stopPolling = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+onMounted(async () => {
+  getRecordsAsync()
+  startPolling()
+})
+
+// 组件销毁时停止轮询
+onUnmounted(() => {
+  stopPolling()
+})
+
 </script>
 
 <style scoped lang="less">

src/pages/admin/lepaoRecords/recordDetail.vue

@@ -76,7 +76,7 @@ onMounted(() => {
 })
 
 const stramptoTime = (time) => {
-    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
 }
 
 function calculatePace(seconds, kilometers) {

src/pages/lepao/lepaoRecords/index.vue

@@ -142,7 +142,7 @@
           </a-table-column>
           <a-table-column title="" :width="100" fixed="right">
             <template #cell="{ record }">
-              <a-button @click="$router.push(`/lepao/recordDetail/${record.id}`)">查看详情</a-button>
+              <a-button @click="$router.push(`/lepao/recordDetail/${record.id}`)" v-if="record.state === 1">查看详情</a-button>
             </template>
           </a-table-column>
         </template>
@@ -153,7 +153,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, h } from 'vue'
+import { ref, reactive, onUnmounted, 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'
@@ -206,9 +206,14 @@ const reset = () => {
   getRecords()
 }
 
+const getRecordsAsync = async () => {
+  loading.value = true
+  await getRecords()
+  loading.value = false
+}
+
 const getRecords = async () => {
   try {
-    loading.value = true
     const reqData = {
       ...queryData,
       pagesize: pagination.pagesize,
@@ -227,8 +232,6 @@ const getRecords = async () => {
       title: '获取乐跑记录失败！',
       content: error.message || '请稍后再试'
     })
-  } finally {
-    loading.value = false
   }
 }
 
@@ -246,7 +249,7 @@ const handlePageSizeChange = (size) => {
 }
 
 const stramptoTime = (time) => {
-  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
 }
 
 function calculatePace(seconds, kilometers) {
@@ -264,8 +267,36 @@ function formatSecondsToMinSec(totalSeconds) {
   return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
 }
 
-getRecords()
-GetNotice()
+let timer = null
+
+// 轮询
+const startPolling = () => {
+  if (!timer) {
+    timer = setInterval(async () => {
+      await getRecords()
+    }, 5000)
+  }
+}
+
+// 停止轮询
+const stopPolling = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+onMounted(async () => {
+  getRecordsAsync()
+  GetNotice()
+  startPolling()
+})
+
+// 组件销毁时停止轮询
+onUnmounted(() => {
+  stopPolling()
+})
+
 </script>
 
 <style scoped lang="less">

src/pages/lepao/lepaoRecords/recordDetail.vue

@@ -74,7 +74,7 @@ onMounted(() => {
 })
 
 const stramptoTime = (time) => {
-    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
 }
 
 function calculatePace(seconds, kilometers) {

src/pages/path/pathDetail.vue

@@ -86,7 +86,7 @@ const getPathDetail = async (id) => {
         info.value = [
             { label: '路径ID', value: res.data.id },
             { label: '跑区名称', value: res.data.run_zone_name },
-            { label: '跑步距离', value: res.data.distance + ' Km' },
+            { label: '跑步距离', value: Number(res.data.distance).toFixed(2) + ' Km' },
             { label: '跑步时长', value: formatSecondsToMinSec(res.data.time) },
             { label: '平均配速', value: res.data.speed },
             { label: '审核状态', value: getState(res.data.state) }

src/pages/path/pathList.vue

@@ -67,6 +67,9 @@
                     current: pagination.current,
                     total: pagination.total
                 }" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
+                <template #distance="{ record }">
+                    {{ Number(record.distance).toFixed(2) }} Km
+                </template>
                 <template #time="{ record }">
                     {{ formatSecondsToMinSec(record.time) }}
                 </template>
@@ -117,7 +120,7 @@ const columns = [{
     dataIndex: 'run_zone_name',
 }, {
     title: '跑步距离(Km)',
-    dataIndex: 'distance',
+    slotName: 'distance',
 }, {
     title: '用时',
     slotName: 'time'