日常开发

src/api/request.ts

@@ -65,6 +65,8 @@ service.interceptors.response.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');
       }
@@ -89,9 +91,12 @@ service.interceptors.response.use(
       if (deviceid && router.currentRoute.value.path != '/login/qrcode') {
         router.push('/login/qrcode');
       }
-      if (deviceid == undefined && router.currentRoute.value.path != '/login') {
+      if (deviceid == undefined && router.currentRoute.value.path != '/login' && router.currentRoute.value.path != '/sunshineRun') {
         router.push('/login');
       }
+      if (deviceid == undefined && router.currentRoute.value.path == '/sunshineRun') {
+        router.push('/login/sunshineRun');
+      }
       ElMessage({ message: '请重新登录', type: 'error', duration: 5 * 1000 });
       //ElMessage({ message: message, type: 'error', duration: 5 * 1000 });
       return Promise.reject('凭证已过期，请重新登录！');

src/router/index.ts

@@ -14,6 +14,7 @@ const router = createRouter({
         { path: '/login', component: () => import('@/views/login/index.vue') },
         { path: '/login/qrcode', component: () => import('@/views/login/qrcode.vue') },
         { path: '/login/mobile', component: () => import('@/views/login/mobile.vue') },
+        { path: '/login/sunshineRun', component: () => import('@/views/login/sunshineRun.vue') },
         { path: '/train', component: () => import('@/views/train/index.vue') },
         { path: '/train/test', component: () => import('@/views/train/test.vue') },
         { path: '/train/run', component: () => import('@/views/train/run.vue') },
@@ -25,7 +26,8 @@ const router = createRouter({
         { path: '/course', component: () => import('@/views/course/index.vue') },
         { path: '/gesture', component: () => import('@/views/gesture/index.vue') },
         { path: '/analysis/index', component: () => import('@/views/analysis/index.vue') },
-        { path: '/analysis/detail', component: () => import('@/views/analysis/detail.vue') }
+        { path: '/analysis/detail', component: () => import('@/views/analysis/detail.vue') },
+        { path: '/sunshineRun', component: () => import('@/views/sunshineRun/index.vue') },
       ]
     }
   ]

src/views/login/sunshineRun.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="login">
+    <Transition :enter-active-class="proxy?.animate.error.enter">
+      <div class="login-content" :key="key">
+        <div class="login-content-center">
+          <div class="login-title"> <img src="@/assets/images/login/login.png" /></div>
+          <div class="login-input-box">
+            <div class="login-item">
+              <input class="login-input login-input-username" type="text" placeholder="请输入帐号"
+                v-model.trim="loginForm.username" />
+            </div>
+            <div class="login-item">
+              <input class="login-input login-input-password" type="password" autocomplete="off" placeholder="请输入密码"
+                v-model.trim="loginForm.password" />
+            </div>
+            <div @click="getLogin" class="login-btn">
+              <el-icon class="is-loading" v-if="loading">
+                <Loading />
+              </el-icon>
+              登 录
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup name="Login" lang="ts">
+import useAppStore from '@/store/modules/app';
+const { proxy } = getCurrentInstance() as any;
+const router = useRouter();
+
+const data = reactive<any>({
+  loginForm: {
+    username: '',
+    password: ''
+  },
+  loading: false,
+  key: 0,
+});
+
+const { loginForm, loading, key } = toRefs(data);
+
+// 登录
+const getLogin = () => {
+  let username = loginForm.value.username;
+  let password = loginForm.value.password;
+  if (!username || !password) {
+    return false;
+  }
+  loading.value = true;
+  proxy?.$modal.loading();
+  let params = {
+    username,
+    password,
+  };
+  proxy?.$http.common.login(params).then((res: any) => {
+    if (res.access_token) {
+      //保存token
+      let token = res.access_token;
+      localStorage.setItem("token", token);
+      router.push({ path: '/sunshineRun' });
+      getUserInfo();
+    }
+  }).catch(() => {
+    key.value++;
+  }).finally(() => {
+    loading.value = false;
+    proxy?.$modal?.closeLoading()
+  });
+};
+
+//获取个人信息
+const getUserInfo = () => {
+  let params = {};
+  proxy?.$http.common.getUserInfo(params).then((res: any) => {
+    //保存信息
+    if (res.data.length) {
+      let myData = res.data[0];
+      let info: any = JSON.stringify(myData);
+      localStorage.setItem("userInfo", info);
+      //修改收藏夹图标
+      proxy?.$utils.setFavicon(myData?.logo_url);
+      //跳转
+    }
+  });
+};
+
+onMounted(() => {
+  //测试环境默认密码
+  if (import.meta.env.DEV) {
+    loginForm.value.username = 'manage1';
+    loginForm.value.password = 'trops@2022';
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.login-title {
+  img {
+    width: 9.88rem;
+  }
+
+  margin-bottom: 1.8rem;
+}
+
+.login-content {
+  width: 45%;
+  height: 100vh;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .login-content-center {
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 100%;
+
+    .login-input-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      width: 100%;
+      padding: 6.8vh 0;
+      border-radius: 1.42rem;
+      opacity: 1;
+      background: linear-gradient(68deg, #1D2F3D -85%, #304453 96%);
+      box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
+
+      .login-item {
+        width: 100%;
+        margin-bottom: 2rem;
+        display: flex;
+        justify-content: center;
+
+        .login-input {
+          width: 52.6%;
+          height: 2.9rem;
+          line-height: 2.9rem;
+          border-radius: 0.83rem;
+          padding: 0 1rem;
+          text-align: center;
+          font-size: 1.65rem;
+          opacity: 1;
+          background: #EAEAEA;
+          box-sizing: border-box;
+          border: 1px solid #FFFFFF;
+          box-shadow: inset 0px 0px 10px 1px rgba(78, 78, 78, 0.5899);
+        }
+      }
+
+
+      .login-btn {
+        width: 36.7%;
+        height: 3.59rem;
+        line-height: 3.59rem;
+        border-radius: 0.83rem;
+        font-size: 2rem;
+        opacity: 1;
+        text-align: center;
+        background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
+        box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .is-loading {
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/sunshineRun/index.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="sunshineRun">
+    <div class="sunshineRun-left">
+      <div class="sunshineRun-title">智慧阳光跑</div>
+      <div class="list-box">
+        <div class="sunshineRun-columns-title">
+          <div class="title">实时数据</div>
+        </div>
+        <div class="list">
+          <ul>
+            <li></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="sunshineRun-right">
+      <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 class="right" v-if="['basketballv1', 'footballv1'].includes(parameter.project)">
+              <div class="score">{{ proxy?.$utils.runTime(item.result, true, false) }}
+              </div>
+            </div>
+            <div class="right" v-else>
+              <div class="score">{{ item.result }}
+              </div>
+              <div class="unit">{{ unit }}</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="SunshineRun" lang="ts">
+const { proxy } = getCurrentInstance() as any;
+const router = useRouter();
+const reportScrollRef = ref();
+
+const data = reactive<any>({
+  reportList: []
+});
+
+const {
+  reportList
+} = toRefs(data);
+
+
+onBeforeMount(() => {
+})
+
+onMounted(() => {
+})
+
+onBeforeUnmount(() => {
+})
+</script>
+
+<style lang="scss" scoped>
+.sunshineRun {
+  width: 100%;
+  height: 100%;
+  padding: 1.5vw 0 1vw 0;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: space-evenly;
+  background: #3BDDCE url("@/assets/images/sunshineRun/bg.png") top center no-repeat;
+  background-size: cover;
+
+  .sunshineRun-title {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    top: -1vw;
+    font-size: 38px;
+    // font-weight: bold;
+    line-height: normal;
+    letter-spacing: 6px;
+    color: #0E1824;
+    padding-left: 10%;
+  }
+
+  .sunshineRun-columns-title {
+    display: flex;
+
+    .title {
+      border-top-left-radius: 18px;
+      border-top-right-radius: 18px;
+      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);
+      font-size: 28px;
+      padding: 4px 35px;
+      letter-spacing: 5px;
+    }
+  }
+
+  .sunshineRun-left {
+    width: 76%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .list-box {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      .list {
+        width: 100%;
+        height: 100%;
+        border-radius: 18px;
+        background: linear-gradient(170deg, #276066 -13%, #09111B 87%);
+        box-sizing: border-box;
+        border: 1px solid #FFFFFF;
+        box-shadow: 0px 0px 6px 2px rgba(255, 255, 255, 0.5);
+        border-top-left-radius: 0px;
+      }
+    }
+
+  }
+
+  .sunshineRun-right {
+    width: 21%;
+    display: flex;
+    flex-direction: column;
+
+    .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;
+      display: flex;
+      flex-direction: column;
+      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;
+
+        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);
+          }
+
+          .left {
+            display: flex;
+
+            .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;
+              }
+            }
+
+          }
+
+          .right {
+            display: flex;
+            font-weight: bold;
+            align-items: center;
+
+            .score {
+              color: #ffffff;
+              font-size: 1.1rem;
+              font-family: 'Saira-ExtraBold';
+            }
+
+            .unit {
+              color: #ffffff;
+              font-size: 0.8rem;
+              margin-left: 2px;
+            }
+          }
+
+        }
+
+        &::-webkit-scrollbar {
+          width: 0px;
+        }
+
+        &::-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);
+        }
+      }
+    }
+  }
+
+}
+</style>