日常开发

src/api/module/common.ts

@@ -195,5 +195,14 @@ export default {
         auth: false //不要鉴权
       }
     });
-  }
+  },
+
+  //模拟阳光跑数据
+  sunshineRunPushData: (data: any) => {
+    return req({
+      url: '/test/sunlight/pushdata',
+      method: 'post',
+      data: data
+    });
+  },
 };

src/api/module/test.ts

@@ -1,8 +1,17 @@
 import req from '../request';
 
 export default {
-  //获取测试列表
-  getTaskList: (data: any) => {
+  //常规任务
+  freeTasksList: (data: any) => {
+    return req({
+      url: '/task/task_list',
+      method: 'get',
+      data: data
+    });
+  },
+
+  //常规任务
+  conventionTasksList: (data: any) => {
     return req({
       url: '/task/common_list',
       method: 'get',

src/components/OptionWindow/index.vue

@@ -314,7 +314,7 @@ const confirm = () => {
   if (props.parentData.id) {
     optionForm.value.taskId = props.parentData.id;
     optionForm.value.standard = props.parentData.exam_type; //0考试 1体测
-    optionForm.value.taskCate = props.parentData.exam_type ? 1 : 0; //0自由 1常规
+    optionForm.value.taskCate = props.parentData.task_cate
   }
 
   loading.value = true;

src/utils/animate.ts

@@ -50,8 +50,8 @@ const hand = {
 };
 
 const sunshineRun = {
-  enter: animatePrefix + 'animate__fadeInBottomRight',
-  leave: animatePrefix + 'animate__fadeOutBottomLeft'
+  enter: animatePrefix + 'animate__fadeIn',
+  leave: animatePrefix + 'animate__fadeOut'
 };
 
 export default {

src/utils/sunshineRunWs.ts

@@ -0,0 +1,105 @@
+import io from 'socket.io-client';
+import { ref, onMounted, onUnmounted, onBeforeUnmount } from 'vue';
+import useAppStore from '@/store/modules/app';
+// import router from '@/router';
+
+// let socketHand: any = null; //ws实例对象
+// socketHand = io(address + '/', {
+//   transports: ['websocket', 'polling'],
+//   query: {
+//     type: 'hand',
+//     Authorization: token ? myToken : ''
+//   }
+// });
+
+export function useSunshineRunSocket() {
+  const address: any = import.meta.env.VITE_APP_BASE_API;
+  const token: any = localStorage.getItem('token');
+  const deviceid: any = localStorage.getItem('deviceid');
+  const myToken: any = 'JWT ' + token;
+
+  // let socketHand: any = useAppStore().getSocketHand() || null; //ws实例对象
+  // if (socketHand == null) {
+  //   socketHand = io(address + '/', {
+  //     transports: ['websocket', 'polling'],
+  //     query: {
+  //       type: 'hand',
+  //       Authorization: token ? myToken : '',
+  //     }
+  //   });
+  //   useAppStore().setSocketHand(socketHand);
+  // }
+
+  let socketHand: any = null; //ws实例对象
+  socketHand = io(address + '/', {
+    transports: ['websocket', 'polling'],
+    query: {
+      type: 'sunshineRun',
+      Authorization: token ? myToken : ''
+    }
+  });
+
+  function sunshineRunWs(callback: any) {
+    if (socketHand == null) {
+      return false;
+    }
+    callback({
+      wksid: socketHand.id
+    });
+    socketHand.on('connect', (e: any) => {
+      callback(e);
+    });
+    socketHand.on('my_response', (e: any) => {
+      callback(e);
+    });
+    socketHand.on('sunlight_result', (e: any) => {
+      callback(e);
+    });
+    socketHand.on('disconnect', (e: any) => {
+      callback(e);
+    });
+  }
+
+  /**
+   * 发送消息
+   */
+  function sendMessage(type: string, data: any, callback?: () => void) {
+    if (socketHand == null) {
+      return false;
+    }
+    if (socketHand.connected) {
+      callback = callback || function () {};
+      socketHand.emit(type, data, callback);
+    }
+  }
+
+  /**
+   * 开始连接
+   */
+  function startConnect(data?: any, callback?: any) {
+    sendMessage(
+      'fe_sunlight_init',
+      {
+        cmd:"sunlight_init"
+      },
+      () => {}
+    );
+  }
+
+  onBeforeUnmount(() => {
+    // if (socketHand) {
+    //   // if(['/gesture'].includes(router.currentRoute.value.path)){
+    //   //   socketHand.close();
+    //   //   socketHand = null;
+    //   // }
+    //   socketHand = null;
+    // }
+    // getClearTimer();
+    if (socketHand) {
+      socketHand.close();
+      socketHand = null;
+    }
+  });
+
+  return { sunshineRunWs, sendMessage, startConnect };
+}

src/utils/trainWs.ts

@@ -263,6 +263,7 @@ export function useWs() {
         data: 'start_' + examId,
         class_id: parameter.classes,
         exam_type: parameter.standard,
+        task_id: parameter.taskId,
         task_cate: parameter.taskCate,
         gesture: parameter.gesture,
         demo: parameter.demo,

src/views/sunshineRun/index.vue

@@ -22,16 +22,14 @@
           </div>
           <div class="testList">
             <ul>
-              <TransitionGroup :enter-active-class="proxy?.animate.sunshineRun.enter"
-                :leave-active-class="proxy?.animate.sunshineRun.leave">
+              <TransitionGroup>
                 <li v-for="(item, index) in testList" :key="item.student_id">
-                  <img v-if="item.student_id && (item.face_pic || item.logo_url)"
-                    :src="item.face_pic || item.logo_url" /><img class="noPic" v-else
-                    src="@/assets/images/common/noImg.png" />
+                  <img v-if="item.student_id && item.student_icon_url" :src="item.student_icon_url" /><img class="noPic"
+                    v-else src="@/assets/images/common/noImg.png" />
                   <div class="con">
-                    <div class="name">{{ item.student_name }}</div>
+                    <div class="name">{{ item.name }}</div>
                     <div class="score">
-                      {{ item.score }}<span>{{ unit }}</span>
+                      {{ item.distance }}<span>{{ unit }}</span>
                     </div>
                   </div>
                 </li>
@@ -49,6 +47,7 @@
             <ul>
               <li v-for="(item, index) in reportList" :key="index">
                 <div class="left">
+                  <div class="pai" :class="{ 'pai1': item.rank == 1, 'pai2': item.rank == 2, 'pai3': item.rank == 3 }">{{ item.rank }}</div>
                   <div class="pic"><img :src="item.face_pic || item.logo_url || item.student_icon_url" /></div>
                   <div class="txt">
                     <div>
@@ -72,9 +71,11 @@
 </template>
 
 <script setup name="SunshineRun" lang="ts">
+import { useSunshineRunSocket } from '@/utils/sunshineRunWs';
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const myInfo: any = localStorage.getItem("userInfo");
+const { sunshineRunWs, startConnect } = useSunshineRunSocket();
 
 const data = reactive<any>({
   timerManager: {},//计时器管理
@@ -84,7 +85,11 @@ const data = reactive<any>({
   date: "",//当前时间
   unit: "",//单位
   screen: true,//全屏控制
-  key: 1
+  studentPage: {
+    current: 1,
+    size: 8,
+    pages: 1
+  }, //学生分页
 });
 
 const {
@@ -95,7 +100,7 @@ const {
   date,
   unit,
   screen,
-  key
+  studentPage,
 } = toRefs(data);
 
 /**
@@ -176,6 +181,95 @@ const getClearTimer = (data?: any) => {
   }
 };
 
+/**
+ * 获取排名
+*/
+const getStudentList = () => {
+  let params: any = {
+    page: studentPage.value.current,
+    per_page: studentPage.value.size,
+  };
+  proxy?.$http.ranking.studentRanking(params).then((res: any) => {
+    if (res.status == 200) {
+      let list: any = res.data;
+      reportList.value = list;
+      getPages(res.total);
+    }
+  });
+};
+
+/**
+ * 计算页码
+*/
+const getPages = (data: any) => {
+  studentPage.value.pages = Math.ceil(data / studentPage.value.size);
+};
+
+/**
+ * 自动切换排行榜
+*/
+const getAutoplay = () => {
+  getStudentList();
+  setInterval(() => {
+    // 切换页码
+    if (studentPage.value.current >= studentPage.value.pages || studentPage.value.current >= 5) {
+      studentPage.value.current = 1;
+    } else {
+      studentPage.value.current++;
+    }
+    getStudentList();
+  }, 10000);
+};
+
+/**
+ * 获取模拟数据
+*/
+const getSunshineRunPushData = async () => {
+  let params = {
+    password: "fb083a6fe1e14600910b06977c1d037e",
+    school_id: "3"
+  };
+  await proxy?.$http.common.sunshineRunPushData(params).then((res: any) => {
+
+  });
+};
+
+/**
+ * 加载WS
+*/
+const initSunshineRun = () => {
+  sunshineRunWs((e: any) => {
+    console.log("eeeee", e)
+    if (e?.wksid) {
+      startConnect();
+    }
+    //接收第一次成绩列表
+    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];
+      //模拟数据
+      // setInterval(() => {
+      //   getSunshineRunPushData();
+      // }, 1000)
+    }
+    //接收推送数据
+    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 != undefined) {
+        testList.value.splice(myIndex, 1);
+      }
+      testList.value.unshift(e.data);
+    }
+  });
+};
+
 onBeforeMount(() => {
   //获取当前时间
   setDate();
@@ -190,19 +284,10 @@ onBeforeMount(() => {
   }
   //单位
   unit.value = "M";
-  setInterval(() => {
-    key.value++;
-    let obj = {
-      face_pic: "",
-      student_id: key.value,
-      student_name: key.value + "测试一",
-      score: "99999"
-    }
-    testList.value.push(obj)
-  }, 100)
-  // setInterval(() => {
-  //   testList.value.shift()
-  // }, 3000)
+  //初始化手势
+  initSunshineRun();
+  //排行榜
+  getAutoplay();
 })
 
 onMounted(() => {
@@ -260,7 +345,7 @@ onBeforeUnmount(() => {
         display: flex;
         align-items: center;
         text-shadow: 1px 1px 1px #a3a3a3;
-        
+
         .li {
           margin-left: 25px;
         }
@@ -441,39 +526,57 @@ onBeforeUnmount(() => {
           height: 100%;
           border-top-left-radius: 0px;
 
-          .title {
-            height: 7.05vh;
-            line-height: 7.05vh;
-            width: 100%;
-            text-align: center;
-            color: #1A293A;
-            font-size: 1.65rem;
-            background: radial-gradient(120% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
-          }
-
           ul {
             height: 100%;
-            overflow-y: scroll;
+            // overflow-y: scroll;
 
             li {
+              height: calc(100% / 8);
               border-bottom: 1px solid #48677E;
-              padding: 8px 30px;
+              padding: 0px 20px;
               display: flex;
               justify-content: space-between;
               align-items: center;
-              cursor: pointer;
               transition: all 0.2s;
+              box-sizing: border-box;
 
-              &:hover {
-                background: rgba(255, 255, 255, 0.4);
-              }
+              // &:hover {
+              //   background: rgba(255, 255, 255, 0.4);
+              // }
 
               .left {
                 display: flex;
+                align-items: center;
+                width: 70%;
+
+                .pai {
+                  width: 40px;
+                  height: 30px;
+                  text-align: center;
+                  color: #F9F9F9;
+                  font-size: 1.2vw;
+                  font-family: 'Saira-ExtraBold';
+                  margin-right: 10px;
+                }
+
+                .pai1 {
+                  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-size: 100% 100%;
+                }
+
+                .pai3 {
+                  background: url("@/assets/images/ranking/pai3.png") left center no-repeat;
+                  background-size: 100% 100%;
+                }
 
                 .pic {
-                  width: 7.5vh;
-                  height: 7.5vh;
+                  width: 7vh;
+                  height: 7vh;
                   border-radius: 50%;
                   display: flex;
                   justify-content: center;
@@ -495,32 +598,33 @@ onBeforeUnmount(() => {
 
                   .name {
                     color: #F9F9F9;
-                    font-size: 1.38rem;
+                    font-size: 1vw;
                   }
 
                   .className {
                     color: #13ED84;
-                    font-size: 1.1rem;
+                    font-size: 0.8vw;
                   }
                 }
 
               }
 
               .right {
-                display: flex;
-                font-weight: bold;
-                align-items: center;
+                font-family: 'Saira-ExtraBold';
 
                 .score {
                   color: #ffffff;
-                  font-size: 1.1rem;
-                  font-family: 'Saira-ExtraBold';
+                  font-size: 1vw;
+                  font-style: italic;
+                  display: inline-block;
                 }
 
                 .unit {
                   color: #ffffff;
-                  font-size: 0.8rem;
+                  font-size: 0.7vw;
                   margin-left: 2px;
+                  font-family: 'Saira-ExtraBold';
+                  display: inline-block;
                 }
               }
 

src/views/test/index.vue

@@ -87,12 +87,30 @@ const getProjectTaskList = () => {
  * 获取测试列表
 */
 const getTaskList = () => {
+  //自由
+  let params1 = {};
+  proxy?.$http.test.freeTasksList(params1).then((res: any) => {
+    let list = res.data.map((item: any) => {
+      item.type = item.test_type;
+      item.task_cate = 0;
+      return item;
+    });
+    taskList.value.push(...list);
+  });
+
+
+  //常规
   let today = dayjs().format('YYYY-MM-DD')
-  let params = {
+  let params2 = {
     start_time: today
   };
-  proxy?.$http.test.getTaskList(params).then((res: any) => {
-    taskList.value = res.data;
+  proxy?.$http.test.conventionTasksList(params2).then((res: any) => {
+    let list = res.data.map((item: any) => {
+      item.type = item.exam_type;
+      item.task_cate = 1;
+      return item;
+    });
+    taskList.value.push(...list);
   });
 };