优化阳光跑排行榜弹窗

src/components/RankingWindow/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
+  <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>
     </div>

src/utils/animate.ts

@@ -54,6 +54,11 @@ const sunshineRun = {
   leave: animatePrefix + 'animate__fadeOut'
 };
 
+const rankingWindow = {
+  enter: animatePrefix + 'animate__zoomIn',
+  leave: animatePrefix + 'animate__zoomOut'
+};
+
 export default {
   mask,
   dialog,
@@ -64,5 +69,6 @@ export default {
   run,
   error,
   hand,
-  sunshineRun
+  sunshineRun,
+  rankingWindow
 };

src/views/sunshineRun/index.vue

@@ -28,13 +28,18 @@
                   <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">
                       <div class="quanshu">{{ item.ring_count || 0 }}<i>圈</i></div>
-                      <div>{{ item.distance }}<span>{{ unit }}</span></div>
+                      <div>
+                        {{ item.distance }}<span>{{ unit }}</span>
+                      </div>
                     </div>
                   </div>
                 </li>
@@ -52,8 +57,7 @@
             <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> -->
@@ -65,8 +69,7 @@
                   </div>
                 </div>
                 <div class="right">
-                  <div class="score">{{ item.run_distance }}
-                  </div>
+                  <div class="score">{{ item.run_distance }}</div>
                   <div class="unit">{{ unit }}</div>
                 </div>
               </li>
@@ -83,66 +86,55 @@
 import { useSunshineRunSocket } from '@/utils/sunshineRunWs';
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
-const myInfo: any = localStorage.getItem("userInfo");
+const myInfo: any = localStorage.getItem('userInfo');
 const { sunshineRunWs, startConnect } = useSunshineRunSocket();
 const rankingWindowRef = ref();
 
 const data = reactive<any>({
-  timerManager: {},//计时器管理
-  userInfo: {},//用户信息
-  testList: [],//测试列表
-  reportList: [],//排行榜
-  date: "",//当前时间
-  unit: "",//单位
-  screen: true,//全屏控制
+  timerManager: {}, //计时器管理
+  userInfo: {}, //用户信息
+  testList: [], //测试列表
+  reportList: [], //排行榜
+  date: '', //当前时间
+  unit: '', //单位
+  screen: true, //全屏控制
   studentPage: {
     current: 1,
     size: 8,
     pages: 1
   }, //学生分页
-  timer: null,//排行榜定时弹窗状态
+  timer: null //排行榜定时弹窗状态
 });
 
-const {
-  timerManager,
-  userInfo,
-  testList,
-  reportList,
-  date,
-  unit,
-  screen,
-  studentPage,
-  timer,
-} = toRefs(data);
+const { timerManager, userInfo, testList, reportList, date, unit, screen, studentPage, timer } = toRefs(data);
 
 /**
  * 更新时间
-*/
+ */
 const setDate = () => {
   timerManager.value.currentTime = setInterval(() => {
     date.value = proxy?.$utils.getDate();
-  }, 1000)
+  }, 1000);
 };
 
 /**
  * 屏幕模式
-*/
+ */
 const getFullScreen = () => {
   screen.value = !screen.value;
-  localStorage.setItem("screen", screen.value);
+  localStorage.setItem('screen', screen.value);
   proxy?.$utils.fullScreen();
 };
 
 /**
  * 确定退出
-*/
+ */
 const confirmExit = async () => {
   if (import.meta.env.DEV) {
     getClearTimer();
     proxy?.$modal.msgSuccess('测试环境免密退出');
-    await proxy?.$http.common.logout({}).then((res: any) => {
-    });
-    proxy?.$modal?.closeLoading()
+    await proxy?.$http.common.logout({}).then((res: any) => {});
+    proxy?.$modal?.closeLoading();
     //清空缓存
     // localStorage.clear();
     localStorage.removeItem('token');
@@ -150,49 +142,50 @@ const confirmExit = async () => {
     //跳转
     router.push({ path: '/login/sunshineRun' });
   } else {
-    let myInfo: any = localStorage.getItem("userInfo");
+    let myInfo: any = localStorage.getItem('userInfo');
     let userInfo = JSON.parse(myInfo);
-    proxy?.$modal.prompt(`【${userInfo.login_name}】，请输入密码`, 'password').then((e: any) => {
-      // console.log("e", e)
-      if (e.action == 'confirm' && e.value) {
-        getClearTimer();
-        let params = {
-          password: e.value
-        };
-        proxy?.$http.common.checkPassword(params).then(async (res: any) => {
-          if (res.status === 200 || res.status === 1) {
-            await proxy?.$http.common.logout({}).then((res: any) => {
-            });
-            proxy?.$modal?.closeLoading()
-            //清空缓存
-            // localStorage.clear();
-            localStorage.removeItem('token');
-            localStorage.removeItem('userInfo');
-            //跳转
-            router.push({ path: '/login/sunshineRun' });
-          } else {
-            proxy?.$modal.msgError(res.message);
-          }
-        });
-      }
-    }).finally(() => {
-    });
+    proxy?.$modal
+      .prompt(`【${userInfo.login_name}】，请输入密码`, 'password')
+      .then((e: any) => {
+        // console.log("e", e)
+        if (e.action == 'confirm' && e.value) {
+          getClearTimer();
+          let params = {
+            password: e.value
+          };
+          proxy?.$http.common.checkPassword(params).then(async (res: any) => {
+            if (res.status === 200 || res.status === 1) {
+              await proxy?.$http.common.logout({}).then((res: any) => {});
+              proxy?.$modal?.closeLoading();
+              //清空缓存
+              // localStorage.clear();
+              localStorage.removeItem('token');
+              localStorage.removeItem('userInfo');
+              //跳转
+              router.push({ path: '/login/sunshineRun' });
+            } else {
+              proxy?.$modal.msgError(res.message);
+            }
+          });
+        }
+      })
+      .finally(() => {});
   }
 };
 
 /**
  * 清空定时任务
-*/
+ */
 const getClearTimer = (data?: any) => {
   if (data) {
     //清除指定
-    clearInterval(timerManager.value[data])
+    clearInterval(timerManager.value[data]);
     timerManager.value[data] = null;
   } else {
     //清除全部
     for (let key in timerManager.value) {
       if (timerManager.value.hasOwnProperty(key)) {
-        clearInterval(timerManager.value[key])
+        clearInterval(timerManager.value[key]);
         timerManager.value[key] = null;
       }
     }
@@ -201,11 +194,11 @@ const getClearTimer = (data?: any) => {
 
 /**
  * 获取排名
-*/
+ */
 const getStudentList = () => {
   let params: any = {
     page: studentPage.value.current,
-    per_page: studentPage.value.size,
+    per_page: studentPage.value.size
   };
   proxy?.$http.ranking.sunshineRunRanking(params).then((res: any) => {
     if (res.status == 200) {
@@ -218,14 +211,14 @@ const getStudentList = () => {
 
 /**
  * 计算页码
-*/
+ */
 const getPages = (data: any) => {
   studentPage.value.pages = Math.ceil(data / studentPage.value.size);
 };
 
 /**
  * 自动切换排行榜
-*/
+ */
 const getAutoplay = () => {
   getStudentList();
   timerManager.value.autoplayTime = setInterval(() => {
@@ -241,23 +234,22 @@ const getAutoplay = () => {
 
 /**
  * 获取模拟数据
-*/
+ */
 const getSunshineRunPushData = async () => {
   let params = {
-    password: "fb083a6fe1e14600910b06977c1d037e",
-    school_id: "3"
+    password: 'fb083a6fe1e14600910b06977c1d037e',
+    school_id: '3'
   };
-  await proxy?.$http.common.sunshineRunPushData(params).then((res: any) => {
-
-  });
+  await proxy?.$http.common.sunshineRunPushData(params).then((res: any) => {});
 };
 
 /**
  * 加载WS
-*/
+ */
 const initSunshineRun = () => {
   sunshineRunWs((e: any) => {
-    console.log("eeeee", e)
+    console.log('eeeee', e);
+    openRanking();
     if (e?.wksid) {
       startConnect();
     }
@@ -265,11 +257,14 @@ const initSunshineRun = () => {
     if (e?.cmd == 'sunlight_init_result' && e?.data.length) {
       let ids = e.data.map((item: any) => {
         return item.student_id;
-      })
+      });
       let list = testList.value.filter((item: any) => {
         return !ids.includes(item.student_id);
-      })
+      });
       testList.value = [...e.data, ...list];
+      //清除之前的重新执行定时打开排行榜
+      closeRanking();
+      openRanking();
       //模拟数据
       // setInterval(() => {
       //   getSunshineRunPushData();
@@ -279,12 +274,15 @@ const initSunshineRun = () => {
     if (e?.cmd == 'sunlight_one_result' && e?.data) {
       let myIndex = testList.value.findIndex((item: any) => {
         return item.student_id == e.data.student_id;
-      })
+      });
       if (myIndex != -1) {
         //如果已经存在就删除
-        testList.value.splice(myIndex, 1);//删除数据
+        testList.value.splice(myIndex, 1); //删除数据
       }
-      testList.value.unshift(e.data);//插入数据
+      testList.value.unshift(e.data); //插入数据
+      //清除之前的重新执行定时打开排行榜
+      closeRanking();
+      openRanking();
     }
   });
 };
@@ -293,13 +291,25 @@ const initSunshineRun = () => {
  * 关闭排行榜后继续执行定时任务
  */
 const getClose = () => {
+  openRanking();
+};
+
+/**
+ * 定时打开排行榜
+ */
+const openRanking = () => {
   timer.value = setTimeout(() => {
-    if (testList.value.length == 0) {
-      rankingWindowRef.value.open();
-    }
+    rankingWindowRef.value.open();
   }, 1000 * 60 * 0.5);
 };
 
+/**
+ * 关闭排行榜
+ */
+const closeRanking = () => {
+  rankingWindowRef.value.close();
+  clearTimeout(timer.value);
+};
 
 onBeforeMount(() => {
   //获取当前时间
@@ -307,45 +317,41 @@ onBeforeMount(() => {
   //用户信息
   userInfo.value = JSON.parse(myInfo);
   //屏幕
-  let screenData = localStorage.getItem("screen");
+  let screenData = localStorage.getItem('screen');
   if (screenData != undefined && screenData == 'false') {
     screen.value = false;
   } else {
     screen.value = true;
   }
   //单位
-  unit.value = "M";
+  unit.value = 'M';
   //初始化手势
   initSunshineRun();
   //排行榜
   getAutoplay();
-})
+});
 
 /**
  * 监听数据
  */
-watch(
-  () => testList.value.length,
-  (v) => {
-    if (v == 0) {
-      timer.value = setTimeout(() => {
-        rankingWindowRef.value.open();
-      }, 1000 * 60 * 0.5);
-    } else {
-      rankingWindowRef.value.close();
-      clearTimeout(timer.value);
-    }
-  },
-  { immediate: true }
-);
-
-onMounted(() => {
-})
+// watch(
+//   () => testList.value.length,
+//   (v) => {
+//     if (v == 0) {
+//       openRanking();
+//     } else {
+//       closeRanking();
+//     }
+//   },
+//   { immediate: true }
+// );
+
+onMounted(() => {});
 
 onBeforeUnmount(() => {
+  closeRanking();
   getClearTimer();
-  clearTimeout(timer.value);
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -356,7 +362,7 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  background: #3BDDCE url("@/assets/images/sunshineRun/bg.png") top center no-repeat;
+  background: #3bddce url('@/assets/images/sunshineRun/bg.png') top center no-repeat;
   background-size: cover;
 
   .sunshineRun-top {
@@ -390,7 +396,7 @@ onBeforeUnmount(() => {
         position: absolute;
         right: 0;
         top: 2vh;
-        color: #EFEFEF;
+        color: #efefef;
         font-size: 2.5vh;
         display: flex;
         align-items: center;
@@ -411,15 +417,15 @@ onBeforeUnmount(() => {
         }
 
         .closeBtn {
-          background-image: url("@/assets/images/sunshineRun/close.png");
+          background-image: url('@/assets/images/sunshineRun/close.png');
         }
 
         .screen.on {
-          background-image: url("@/assets/images/sunshineRun/screen1.png");
+          background-image: url('@/assets/images/sunshineRun/screen1.png');
         }
 
         .screen.off {
-          background-image: url("@/assets/images/sunshineRun/screen2.png");
+          background-image: url('@/assets/images/sunshineRun/screen2.png');
         }
       }
     }
@@ -437,12 +443,12 @@ onBeforeUnmount(() => {
         height: 5vh;
         line-height: 5vh;
         font-size: 3vh;
-        color: #1A293A;
+        color: #1a293a;
         padding: 0px 2vw;
         letter-spacing: 3px;
         border-top-left-radius: 2vh;
         border-top-right-radius: 2vh;
-        background: radial-gradient(374% 336% at 36% 50%, #FFFFFF 0%, #07FFE7 100%);
+        background: radial-gradient(374% 336% at 36% 50%, #ffffff 0%, #07ffe7 100%);
         box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
       }
     }
@@ -464,9 +470,9 @@ onBeforeUnmount(() => {
           border-radius: 2vh;
           overflow-x: hidden;
           overflow-y: scroll;
-          background: linear-gradient(170deg, #276066 -13%, #09111B 87%);
+          background: linear-gradient(170deg, #276066 -13%, #09111b 87%);
           box-sizing: border-box;
-          border: 1px solid #FFFFFF;
+          border: 1px solid #ffffff;
           box-shadow: 0px 0px 6px 2px rgba(255, 255, 255, 0.5);
           border-top-left-radius: 0px;
 
@@ -488,7 +494,6 @@ onBeforeUnmount(() => {
             background: rgba(26, 62, 78, 1);
           }
 
-
           ul {
             display: flex;
             flex-wrap: wrap;
@@ -535,7 +540,7 @@ onBeforeUnmount(() => {
                 width: 100%;
                 height: 100%;
                 background-size: cover;
-                background-position: center
+                background-position: center;
               }
 
               .noPic {
@@ -572,7 +577,7 @@ onBeforeUnmount(() => {
                 .score {
                   width: 100%;
                   font-size: 1.8vw;
-                  color: #00FFE8;
+                  color: #00ffe8;
                   font-family: 'Saira-ExtraBold';
                   font-style: italic;
                   line-height: 1;
@@ -615,9 +620,9 @@ onBeforeUnmount(() => {
           width: 100%;
           border-radius: 2vh;
           overflow: hidden;
-          background: radial-gradient(90% 90% at 50% 100%, #38869E 0%, #38869E 50%, #17323D 100%);
+          background: radial-gradient(90% 90% at 50% 100%, #38869e 0%, #38869e 50%, #17323d 100%);
           box-sizing: border-box;
-          border: 1px solid #FFFFFF;
+          border: 1px solid #ffffff;
           display: flex;
           flex-direction: column;
           height: 100%;
@@ -629,7 +634,7 @@ onBeforeUnmount(() => {
 
             li {
               height: calc(100% / 8);
-              border-bottom: 1px solid #48677E;
+              border-bottom: 1px solid #48677e;
               padding: 0px 5%;
               display: flex;
               justify-content: space-between;
@@ -652,7 +657,7 @@ onBeforeUnmount(() => {
                   height: 2vw;
                   line-height: 1;
                   text-align: center;
-                  color: #F9F9F9;
+                  color: #f9f9f9;
                   font-size: 1.5vw;
                   font-family: 'Saira-ExtraBold';
                   margin-right: 10%;
@@ -670,17 +675,17 @@ onBeforeUnmount(() => {
                 }
 
                 .pai1 {
-                  background: url("@/assets/images/ranking/pai1.png") left center no-repeat;
+                  background: url('@/assets/images/ranking/pai1.png') left center no-repeat;
                   background-size: 100% 100%;
                 }
 
                 .pai2 {
-                  background: url("@/assets/images/ranking/pai2.png") left center no-repeat;
+                  background: url('@/assets/images/ranking/pai2.png') left center no-repeat;
                   background-size: 100% 100%;
                 }
 
                 .pai3 {
-                  background: url("@/assets/images/ranking/pai3.png") left center no-repeat;
+                  background: url('@/assets/images/ranking/pai3.png') left center no-repeat;
                   background-size: 100% 100%;
                 }
 
@@ -707,18 +712,17 @@ onBeforeUnmount(() => {
                   align-items: center;
 
                   .name {
-                    color: #F9F9F9;
+                    color: #f9f9f9;
                     // font-size: 1vw;
                     font-size: 1.6vw;
                   }
 
                   .className {
-                    color: #13ED84;
+                    color: #13ed84;
                     // font-size: 0.8vw;
                     font-size: 1vw;
                   }
                 }
-
               }
 
               .right {
@@ -740,7 +744,6 @@ onBeforeUnmount(() => {
                   display: inline-block;
                 }
               }
-
             }
 
             &::-webkit-scrollbar {