日常开发

src/api/request.ts

@@ -24,6 +24,8 @@ service.interceptors.request.use(
       let deviceid = localStorage.getItem('deviceid');
       if (router.currentRoute.value.path == '/gesture' || (deviceid && router.currentRoute.value.path != '/login/qrcode')) {
         router.push('/login/qrcode');
+      } else if (router.currentRoute.value.path == '/sunshineRun') {
+        router.push('/login/sunshineRun');
       } else {
         router.push('/login');
       }

src/router/permission.ts

@@ -1,5 +1,5 @@
 import router from './index';
-const whiteList = ['/login', '/login/qrcode', '/login/mobile', '/analysis/index', '/analysis/detail'];
+const whiteList = ['/login', '/login/qrcode', '/login/mobile', '/login/sunshineRun', '/analysis/index', '/analysis/detail'];
 const routers = router.getRoutes().map((item) => {
   return item.path;
 });
@@ -23,7 +23,9 @@ router.beforeEach(async (to, from, next) => {
       next({ path: '/' });
     } else if (to.path === '/login/qrcode') {
       next({ path: '/gesture' });
-    } else {
+    } else if (to.path === '/login/sunshineRun') {
+      next({ path: '/sunshineRun' });
+    }  else {
       next();
     }
   } else {
@@ -41,6 +43,8 @@ router.beforeEach(async (to, from, next) => {
       // 否则全部重定向到登录页
       if (to.path === '/gesture') {
         next(`/login/qrcode`);
+      }if (to.path === '/sunshineRun') {
+        next(`/login/sunshineRun`);
       } else {
         next(`/login`);
       }

src/views/sunshineRun/index.vue

@@ -6,7 +6,7 @@
         <div class="sunshineRun-columns-title">
           <div class="title">实时数据</div>
         </div>
-        <div class="list">
+        <div class="testList">
           <ul>
             <li></li>
           </ul>
@@ -14,32 +14,39 @@
       </div>
     </div>
     <div class="sunshineRun-right">
-      <div class="sunshineRun-columns-title">
-        <div class="title">排行榜</div>
+      <div class="toolList">
+        <div class="li">{{ date }}</div><div class="li btn screen" :class="{ 'on': screen, 'off': !screen }" @click="getFullScreen"></div>
+        <div class="li btn closeBtn" @click="confirmExit"></div>
+        
       </div>
-      <div class="reportList">
-        <ul>
-          <li v-for="(item, index) in reportList" :key="index">
-            <div class="left">
-              <div class="pic"><img :src="item.face_pic || item.logo_url || item.student_icon_url" /></div>
-              <div class="txt">
-                <div>
-                  <div class="name">{{ item.student_name }}</div>
-                  <div class="className">{{ item.class_name }}</div>
+      <div class="list-box">
+        <div class="sunshineRun-columns-title">
+          <div class="title">排行榜</div>
+        </div>
+        <div class="reportList">
+          <ul>
+            <li v-for="(item, index) in reportList" :key="index">
+              <div class="left">
+                <div class="pic"><img :src="item.face_pic || item.logo_url || item.student_icon_url" /></div>
+                <div class="txt">
+                  <div>
+                    <div class="name">{{ item.student_name }}</div>
+                    <div class="className">{{ item.class_name }}</div>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="right" v-if="['basketballv1', 'footballv1'].includes(parameter.project)">
-              <div class="score">{{ proxy?.$utils.runTime(item.result, true, false) }}
+              <div class="right" v-if="['basketballv1', 'footballv1'].includes(parameter.project)">
+                <div class="score">{{ proxy?.$utils.runTime(item.result, true, false) }}
+                </div>
               </div>
-            </div>
-            <div class="right" v-else>
-              <div class="score">{{ item.result }}
+              <div class="right" v-else>
+                <div class="score">{{ item.result }}
+                </div>
+                <div class="unit">{{ unit }}</div>
               </div>
-              <div class="unit">{{ unit }}</div>
-            </div>
-          </li>
-        </ul>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
@@ -49,17 +56,92 @@
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const reportScrollRef = ref();
+const myInfo: any = localStorage.getItem("userInfo");
 
 const data = reactive<any>({
-  reportList: []
+  userInfo: {},//用户信息
+  reportList: [],
+  date: "",//当前时间
+  screen: true
 });
 
 const {
-  reportList
+  userInfo,
+  reportList,
+  date,
+  screen
 } = toRefs(data);
 
+/**
+ * 更新时间
+*/
+const setDate = () => {
+  date.value = proxy?.$utils.getDate();
+  setTimeout(setDate, 1000);
+};
+
+
+/**
+ * 屏幕模式
+*/
+const getFullScreen = () => {
+  screen.value = !screen.value;
+  localStorage.setItem("screen", screen.value);
+  proxy?.$utils.fullScreen();
+};
+
+/**
+ * 确定退出
+*/
+const confirmExit = async () => {
+  if (import.meta.env.DEV) {
+    proxy?.$modal.msgSuccess('测试环境免密退出');
+    await proxy?.$http.common.logout({}).then((res: any) => {
+    });
+    proxy?.$modal?.closeLoading()
+    //清空缓存
+    localStorage.clear();
+    //跳转
+    router.push({ path: '/login/sunshineRun' });
+  } else {
+    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) {
+        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();
+            //跳转
+            router.push({ path: '/login/sunshineRun' });
+          } else {
+            proxy?.$modal.msgError(res.message);
+          }
+        });
+      }
+    }).finally(() => {
+    });
+  }
+};
 
 onBeforeMount(() => {
+  setDate();
+  //屏幕
+  let screenData = localStorage.getItem("screen");
+  if (screenData != undefined && screenData == 'false') {
+    screen.value = false;
+  } else {
+    screen.value = true;
+  }
+  //用户信息
+  userInfo.value = JSON.parse(myInfo);
 })
 
 onMounted(() => {
@@ -118,7 +200,7 @@ onBeforeUnmount(() => {
       flex-direction: column;
       height: 100%;
 
-      .list {
+      .testList {
         width: 100%;
         height: 100%;
         border-radius: 18px;
@@ -136,125 +218,166 @@ onBeforeUnmount(() => {
     width: 21%;
     display: flex;
     flex-direction: column;
+    position: relative;
 
-    .sunshineRun-right-title {}
-
-    .reportList {
-      width: 100%;
-      border-radius: 18px;
-      background: radial-gradient(90% 90% at 50% 100%, #38869E 0%, #38869E 50%, #17323D 100%);
-      box-sizing: border-box;
-      border: 1px solid #FFFFFF;
+    .list-box {
       display: flex;
       flex-direction: column;
       height: 100%;
-      border-top-left-radius: 0px;
 
-      .title {
-        height: 7.05vh;
-        line-height: 7.05vh;
+      .reportList {
         width: 100%;
-        text-align: center;
-        color: #1A293A;
-        font-size: 1.65rem;
-        background: radial-gradient(120% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
-      }
-
-      ul {
+        border-radius: 18px;
+        background: radial-gradient(90% 90% at 50% 100%, #38869E 0%, #38869E 50%, #17323D 100%);
+        box-sizing: border-box;
+        border: 1px solid #FFFFFF;
+        display: flex;
+        flex-direction: column;
         height: 100%;
-        overflow-y: scroll;
-
-        li {
-          border-bottom: 1px solid #48677E;
-          padding: 8px 30px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          cursor: pointer;
-          transition: all 0.2s;
-
-          &:hover {
-            background: rgba(255, 255, 255, 0.4);
-          }
+        border-top-left-radius: 0px;
 
-          .left {
+        .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;
+
+          li {
+            border-bottom: 1px solid #48677E;
+            padding: 8px 30px;
             display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+            transition: all 0.2s;
 
-            .pic {
-              width: 7.5vh;
-              height: 7.5vh;
-              border-radius: 50%;
+            &:hover {
+              background: rgba(255, 255, 255, 0.4);
+            }
+
+            .left {
               display: flex;
-              justify-content: center;
-              align-items: center;
-              overflow: hidden;
-              box-sizing: border-box;
-              border: 1px solid rgba(255, 255, 255, 0.5);
-              margin-right: 13px;
-              flex-shrink: 0;
-
-              img {
-                width: 100%;
+
+              .pic {
+                width: 7.5vh;
+                height: 7.5vh;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                overflow: hidden;
+                box-sizing: border-box;
+                border: 1px solid rgba(255, 255, 255, 0.5);
+                margin-right: 13px;
+                flex-shrink: 0;
+
+                img {
+                  width: 100%;
+                }
               }
+
+              .txt {
+                display: flex;
+                align-items: center;
+
+                .name {
+                  color: #F9F9F9;
+                  font-size: 1.38rem;
+                }
+
+                .className {
+                  color: #13ED84;
+                  font-size: 1.1rem;
+                }
+              }
+
             }
 
-            .txt {
+            .right {
               display: flex;
+              font-weight: bold;
               align-items: center;
 
-              .name {
-                color: #F9F9F9;
-                font-size: 1.38rem;
+              .score {
+                color: #ffffff;
+                font-size: 1.1rem;
+                font-family: 'Saira-ExtraBold';
               }
 
-              .className {
-                color: #13ED84;
-                font-size: 1.1rem;
+              .unit {
+                color: #ffffff;
+                font-size: 0.8rem;
+                margin-left: 2px;
               }
             }
 
           }
 
-          .right {
-            display: flex;
-            font-weight: bold;
-            align-items: center;
-
-            .score {
-              color: #ffffff;
-              font-size: 1.1rem;
-              font-family: 'Saira-ExtraBold';
-            }
+          &::-webkit-scrollbar {
+            width: 0px;
+          }
 
-            .unit {
-              color: #ffffff;
-              font-size: 0.8rem;
-              margin-left: 2px;
-            }
+          &::-webkit-scrollbar-thumb {
+            border-width: 2px;
+            border-radius: 4px;
+            border-style: dashed;
+            border-color: transparent;
+            background-color: rgba(216, 216, 216, 0.8);
+            background-clip: padding-box;
           }
 
+          &::-webkit-scrollbar-button:hover {
+            border-radius: 6px;
+            background: rgba(216, 216, 216, 0.8);
+          }
         }
+      }
+    }
 
-        &::-webkit-scrollbar {
-          width: 0px;
-        }
+    .toolList {
+      position: absolute;
+      right: 0;
+      top: -1vw;
+      color: #09111B;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
 
-        &::-webkit-scrollbar-thumb {
-          border-width: 2px;
-          border-radius: 4px;
-          border-style: dashed;
-          border-color: transparent;
-          background-color: rgba(216, 216, 216, 0.8);
-          background-clip: padding-box;
-        }
+      .li {
+        margin-left: 15px;
+      }
 
-        &::-webkit-scrollbar-button:hover {
-          border-radius: 6px;
-          background: rgba(216, 216, 216, 0.8);
-        }
+      .btn {
+        width: 14px;
+        height: 14px;
+        display: block;
+        cursor: pointer;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100% auto;
+      }
+
+      .closeBtn {
+        background-image: url("@/assets/images/sunshineRun/close.png");
+      }
+
+      .screen.on {
+        background-image: url("@/assets/images/sunshineRun/screen1.png");
+      }
+
+      .screen.off {
+        background-image: url("@/assets/images/sunshineRun/screen2.png");
       }
     }
-  }
 
+  }
 }
 </style>