阳光跑排行榜逻辑优化

src/components/RankingWindow/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Transition :enter-active-class="proxy?.animate.rankingWindow.enter" :leave-active-class="proxy?.animate.rankingWindow.leave">
     <div class="mask" v-if="rankingState">
-      <Ranking :imWindow="true" @getClose="close"></Ranking>
+      <Ranking :imWindow="true" @getClose="restart"></Ranking>
     </div>
   </Transition>
 </template>
@@ -24,11 +24,16 @@ const open = () => {
 //关闭
 const close = () => {
   rankingState.value = false;
+};
+
+//重新其他
+const restart = () => {
   emit('getClose', false);
 };
 
 //暴露给父组件用
 defineExpose({
+  rankingState,
   open,
   close
 })

src/views/sunshineRun/index.vue

@@ -28,11 +28,8 @@
                   <img class="noPic"
                     v-else src="@/assets/images/common/noImg.png" /> -->
                   <div class="nameBox">{{ item.name }}</div>
-                  <div
-                    class="pic"
-                    v-if="item.student_id && item.student_icon_url"
-                    :style="{ backgroundImage: 'url(' + item.student_icon_url + ')' }"
-                  ></div>
+                  <div class="pic" v-if="item.student_id && item.student_icon_url"
+                    :style="{ backgroundImage: 'url(' + item.student_icon_url + ')' }"></div>
                   <div class="con">
                     <!-- <div class="name">{{ item.name }}</div> -->
                     <div class="score">
@@ -57,7 +54,8 @@
             <ul>
               <li v-for="(item, index) in reportList" :key="index">
                 <div class="left">
-                  <div class="pai" :class="{ 'pai1': item.rankid == 1, 'pai2': item.rankid == 2, 'pai3': item.rankid == 3 }">
+                  <div class="pai"
+                    :class="{ 'pai1': item.rankid == 1, 'pai2': item.rankid == 2, 'pai3': item.rankid == 3 }">
                     <div>{{ item.rankid }}</div>
                   </div>
                   <!-- <div class="pic"><img :src="item.icon" /></div> -->
@@ -78,7 +76,7 @@
         </div>
       </div>
     </div>
-    <!-- <RankingWindow ref="rankingWindowRef" @getClose="openRanking"></RankingWindow> -->
+    <RankingWindow ref="rankingWindowRef" @getClose="openRanking"></RankingWindow>
   </div>
 </template>
 
@@ -88,8 +86,7 @@ const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const myInfo: any = localStorage.getItem('userInfo');
 const { sunshineRunWs, startConnect } = useSunshineRunSocket();
-// const rankingWindowRef = ref();
-
+const rankingWindowRef = ref();
 const data = reactive<any>({
   timerManager: {}, //计时器管理
   userInfo: {}, //用户信息
@@ -133,7 +130,7 @@ const confirmExit = async () => {
   if (import.meta.env.DEV) {
     getClearTimer();
     proxy?.$modal.msgSuccess('测试环境免密退出');
-    await proxy?.$http.common.logout({}).then((res: any) => {});
+    await proxy?.$http.common.logout({}).then((res: any) => { });
     proxy?.$modal?.closeLoading();
     //清空缓存
     // localStorage.clear();
@@ -155,7 +152,7 @@ const confirmExit = async () => {
           };
           proxy?.$http.common.checkPassword(params).then(async (res: any) => {
             if (res.status === 200 || res.status === 1) {
-              await proxy?.$http.common.logout({}).then((res: any) => {});
+              await proxy?.$http.common.logout({}).then((res: any) => { });
               proxy?.$modal?.closeLoading();
               //清空缓存
               // localStorage.clear();
@@ -169,7 +166,7 @@ const confirmExit = async () => {
           });
         }
       })
-      .finally(() => {});
+      .finally(() => { });
   }
 };
 
@@ -240,7 +237,7 @@ const getSunshineRunPushData = async () => {
     password: 'fb083a6fe1e14600910b06977c1d037e',
     school_id: '3'
   };
-  await proxy?.$http.common.sunshineRunPushData(params).then((res: any) => {});
+  await proxy?.$http.common.sunshineRunPushData(params).then((res: any) => { });
 };
 
 /**
@@ -248,8 +245,9 @@ const getSunshineRunPushData = async () => {
  */
 const initSunshineRun = () => {
   sunshineRunWs((e: any) => {
-    console.log('eeeee', e);
-    // openRanking();
+    //console.log('eeeee', e);
+    //定时打开排行榜
+    openRanking();
     if (e?.wksid) {
       startConnect();
     }
@@ -262,9 +260,8 @@ const initSunshineRun = () => {
         return !ids.includes(item.student_id);
       });
       testList.value = [...e.data, ...list];
-      //清除之前的重新执行定时打开排行榜
-      // closeRanking();
-      // openRanking();
+      //定时打开排行榜
+      openRanking();
       //模拟数据
       // setInterval(() => {
       //   getSunshineRunPushData();
@@ -280,9 +277,8 @@ const initSunshineRun = () => {
         testList.value.splice(myIndex, 1); //删除数据
       }
       testList.value.unshift(e.data); //插入数据
-      //清除之前的重新执行定时打开排行榜
-      // closeRanking();
-      // openRanking();
+      //定时打开排行榜
+      openRanking();
     }
   });
 };
@@ -290,20 +286,19 @@ const initSunshineRun = () => {
 /**
  * 定时打开排行榜
  */
-// const openRanking = () => {
-//   clearTimeout(timer.value);
-//   timer.value = setTimeout(() => {
-//     rankingWindowRef.value.open();
-//   }, 1000 * 60 * 5);
-// };
-
-/**
- * 关闭排行榜
- */
-// const closeRanking = () => {
-//   rankingWindowRef.value.close();
-//   clearTimeout(timer.value);
-// };
+const openRanking = () => {
+  clearTimeout(timer.value);
+  if (rankingWindowRef.value.rankingState) {
+    rankingWindowRef.value.close();
+  }
+  console.log("timer.value", timer.value)
+  // 设置新的定时器，6秒后执行
+  timer.value = setTimeout(() => {
+    if (!rankingWindowRef.value.rankingState) {
+      rankingWindowRef.value.open();
+    }
+  }, 1000 * 60 * 5);
+};
 
 onBeforeMount(() => {
   //获取当前时间
@@ -319,8 +314,6 @@ onBeforeMount(() => {
   }
   //单位
   unit.value = 'M';
-  //初始化手势
-  initSunshineRun();
   //排行榜
   getAutoplay();
 });
@@ -340,10 +333,12 @@ onBeforeMount(() => {
 //   { immediate: true }
 // );
 
-onMounted(() => {});
+onMounted(() => {
+  //初始化WS
+  initSunshineRun();
+});
 
 onBeforeUnmount(() => {
-  // closeRanking();
   getClearTimer();
 });
 </script>