林旭祥 1 ヶ月 前
コミット
2892640d2c
2 ファイル変更120 行追加126 行削除
  1. 118 124
      src/views/gesture/index.vue
  2. 2 2
      src/views/login/mobile.vue

+ 118 - 124
src/views/gesture/index.vue

@@ -2,20 +2,13 @@
   <div class="gesture">
     <Header :showTool="true" @confirmExit="getLogout" :key="key"></Header>
     <div class="menu" v-if="projectList.length" :key="projectList.length">
-      <swiper
-        :slides-per-view="5"
-        :space-between="0"
-        :loop="true"
-        :observe-parents="true"
-        :observer="true"
-        :centered-slides="true"
-        :modules="[Navigation]"
-        @swiper="onSwiper"
-      >
+      <swiper :slides-per-view="5" :space-between="0" :loop="true" :observe-parents="true" :observer="true"
+        :centered-slides="true" :modules="[Navigation]"
+        @swiper="onSwiper">
         <swiper-slide v-for="(item, index) in projectList" :key="index" @click="getOption(item)">
           <div class="li">
             <div>
-              <div class="pic"><img :src="'static/images/train/' + item.key + '.png'" /></div>
+              <div class="pic"><img :src="'static/images/train/' + item.key + '.png'"></div>
               <div class="name">
                 {{ item.name }}
               </div>
@@ -24,8 +17,7 @@
         </swiper-slide>
       </swiper>
     </div>
-    <div class="erweima">
-      <img :src="erweima" />
+    <div class="erweima"> <img :src="erweima" />
       <span>扫码遥控</span>
     </div>
     <OptionWindow ref="optionWindowRef" :projectList="projectList" />
@@ -36,7 +28,7 @@
 import { useWebSocket } from '@/utils/handWs';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Navigation } from 'swiper/modules';
-import QRCode from 'qrcode';
+import QRCode from "qrcode";
 import 'swiper/css';
 import 'swiper/scss/navigation';
 const { handWs, startDevice, startHand, stateHand } = useWebSocket();
@@ -51,22 +43,22 @@ const data = reactive<any>({
   device_info: {},
   erweima: '',
   sid: '',
-  key: 0
+  key: 0,
 });
 const { mySwiper, projectList, timerManager, device_info, erweima, sid, key } = toRefs(data);
 
 /**
  * 清空定时任务
- */
+*/
 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;
       }
     }
@@ -75,23 +67,23 @@ const getClearTimer = (data?: any) => {
 
 /**
  * 初始化项目
- */
+*/
 const getInitExam = () => {
   getExam();
   //定时刷新
   timerManager.value.exam = setInterval(() => {
     getExam();
-  }, 5000);
+  }, 5000)
 };
 
 /**
  * 获取项目
- */
+*/
 const getExam = async () => {
   let myList = device_info.value?.project_list || [];
   let examList = myList.map((item: any) => {
     return item.exam_name;
-  });
+  })
   await proxy?.$http.train.projectList().then((res: any) => {
     projectList.value = proxy?.$utils.getProject(res.exams).filter((item: any) => {
       //只显示能开的
@@ -104,64 +96,64 @@ const getExam = async () => {
 
 /**
  * 获取实例
- */
+*/
 const onSwiper = ($ev: any) => {
-  console.log('1111111', $ev);
+  console.log("1111111", $ev)
   mySwiper.value = $ev;
-  slidePrev();
+  slidePrev()
 };
 
 /**
  * 切换上一页
- */
+*/
 const slidePrev = () => {
   mySwiper.value.slidePrev();
 };
 
 /**
  * 切换下一页
- */
+*/
 const slideNext = () => {
   mySwiper.value.slideNext();
 };
 
 /**
  * 启动切换
- */
+*/
 const slideChange = () => {
   // if (projectList.value.length <= 3) {
   //   slidePrev()
   // } else {
   //   slideNext();
   // }
-  slidePrev();
+  slidePrev()
 };
 
 /**
  * 进入项目
- */
+*/
 const getOption = (data: any) => {
   confirm(data);
 };
 
 /**
  * 确定并进入
- */
+*/
 const confirm = (myProject?: any) => {
   let project = myProject || projectList.value[mySwiper.value.realIndex];
-  console.log('projectList.value', projectList.value);
-  console.log('mySwiper.value', mySwiper.value);
-  console.log('mySwiper.value.realIndex', mySwiper.value.realIndex);
-  console.log('project', project);
+  console.log("projectList.value", projectList.value)
+  console.log("mySwiper.value", mySwiper.value)
+  console.log("mySwiper.value.realIndex", mySwiper.value.realIndex)
+  console.log("project", project)
   if (project == undefined) {
-    proxy?.$modal.msgError('获取不到项目信息');
+    proxy?.$modal.msgError("获取不到项目信息");
     return false;
   }
   let obj = device_info.value.project_list.find((item: any) => {
     return item.exam_name == project.key;
-  });
+  })
   if (obj == undefined) {
-    proxy?.$modal.msgError('该项目没有配置参数');
+    proxy?.$modal.msgError("该项目没有配置参数");
     return false;
   }
   let data = {
@@ -171,83 +163,79 @@ const confirm = (myProject?: any) => {
     ctrl: obj?.area_ctrl_id || '',
     time: obj?.test_time || '',
     music: obj?.music_info?.url || '',
-    handcontroller: device_info.value.handcontroller_id
-  };
+    handcontroller: device_info.value.handcontroller_id,
+  }
   optionWindowRef.value.getGesture(project, data);
 };
 
 /**
  * 退出
- */
+*/
 const getLogout = async () => {
   if (import.meta.env.DEV) {
     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();
     //跳转
     router.push({ path: '/login/qrcode' });
   } 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) {
-          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/qrcode' });
-            } 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) {
+        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/qrcode' });
+          } else {
+            proxy?.$modal.msgError(res.message);
+          }
+        });
+      }
+    }).finally(() => {
+    });
   }
 };
 
 /**
  * 提示语
- */
+*/
 const getTips = () => {
-  let myTime = 10000;
+  let myTime = 7000;
   let num = 0;
   timerManager.value.tips = setInterval(() => {
     if (projectList.value.length) {
-      // if (num % 2 == 0) {
-      //   proxy?.$modal.msgWarning({
-      //     message: `手向左滑切换项目`,
-      //     duration: 5000
-      //   })
-      // } else {
-      //   proxy?.$modal.msgWarning({
-      //     message: `举左手进入测试`,
-      //     duration: 5000
-      //   })
-      // }
-      proxy?.$modal.msgWarning({
-        message: `举左手进入测试`,
-        duration: 5000
-      });
-      num++;
+      if (num % 2 == 0) {
+        proxy?.$modal.msgWarning({
+          message: `手向左滑切换项目`,
+          duration: 5000
+        })
+      } else {
+        proxy?.$modal.msgWarning({
+          message: `举左手进入测试`,
+          duration: 5000
+        })
+      }
+      num++
     }
-  }, myTime);
+  }, myTime)
 };
 
 /**
  * 获取个人信息
- */
+*/
 const getUserInfo = () => {
   let params = {};
   proxy?.$http.common.getUserInfo(params).then((res: any) => {
@@ -255,25 +243,26 @@ const getUserInfo = () => {
     if (res.data.length) {
       let myData = res.data[0];
       let info = JSON.stringify(myData);
-      localStorage.setItem('userInfo', info);
+      localStorage.setItem("userInfo", info);
       //修改收藏夹图标
       proxy?.$utils.setFavicon(myData?.logo_url);
-      key.value = key.value + 1; //更新头部LOGO
+      key.value = key.value + 1//更新头部LOGO
     }
   });
 };
 
 /**
  * 获取设备项目
- */
+*/
 const getDevice = async () => {
-  let deviceid = localStorage.getItem('deviceid') || '';
+  let deviceid = localStorage.getItem("deviceid") || '';
   if (deviceid) {
-    startDevice({ deviceid: deviceid });
+    startDevice({ deviceid: deviceid })
   } else {
     proxy?.$modal.msgError(`缺少设备信息请重新登录!`);
-    await proxy?.$http.common.logout({}).then((res: any) => {});
-    proxy?.$modal?.closeLoading();
+    await proxy?.$http.common.logout({}).then((res: any) => {
+    });
+    proxy?.$modal?.closeLoading()
     //清空缓存
     localStorage.clear();
     //跳转
@@ -283,24 +272,27 @@ const getDevice = async () => {
 
 /**
  * 获取二维码
- */
+*/
 const getErweima = () => {
-  let deviceid = localStorage.getItem('deviceid') || '';
-  QRCode.toDataURL(`${location.origin}/#/login/mobile?sid=${sid}&deviceid=${deviceid}`).then((res: any) => {
-    erweima.value = res;
-  });
-};
+  let deviceid = localStorage.getItem("deviceid") || '';
+  QRCode.toDataURL(
+    `${location.origin}/#/login/mobile?sid=${sid}&deviceid=${deviceid}`
+  )
+    .then((res: any) => {
+      erweima.value = res;
+    })
+}
 
 onBeforeMount(() => {
   //加载设备WS
   handWs((e: any) => {
-    if (router.currentRoute.value.path != '/gesture') {
+    if(router.currentRoute.value.path != '/gesture'){
       return false;
     }
     // console.log("eeeee", e)
     if (e?.wksid) {
       //获取设备项目
-      getDevice();
+      getDevice()
     }
     //接收设备信息
     if (e?.device_info) {
@@ -315,39 +307,40 @@ onBeforeMount(() => {
       startHand(handcontroller_id);
     }
     //左滑动
-    if (e?.data?.result == 'next_item') {
+    if (e?.data?.result == "next_item") {
       // proxy?.$modal.msgSuccess('手势指令:左滑动');
-      if (projectList.value.length == 0) {
-        return false;
-      }
-      slideChange();
+      // if (projectList.value.length == 0) {
+      //   return false;
+      // }
+      // slideChange();
     }
     //举左手
-    if (e?.data?.result == 'left_hand') {
-      proxy?.$modal.msgSuccess('手势指令:举左手');
-      confirm();
+    if (e?.data?.result == "left_hand") {
+      // proxy?.$modal.msgSuccess('手势指令:举左手');
+      // confirm();
     }
     //退出
-    // if (e?.data?.result == "exit") {
-    //   proxy?.$modal.msgSuccess('手势指令:交叉手');
-    // }
+    if (e?.data?.result == "exit") {
+      // proxy?.$modal.msgSuccess('手势指令:交叉手');
+    }
     //刷新
-    if (e?.data?.result == 'refresh') {
-      window.location.reload();
+    if (e?.data?.result == "refresh") {
+      window.location.reload()
     }
   });
-});
+})
 onMounted(() => {
   getUserInfo();
   //登录码
   getErweima();
   //提示语
   // getTips();
-});
+
+})
 onBeforeUnmount(() => {
   getClearTimer();
   ElMessage.closeAll();
-});
+})
 </script>
 
 <style lang="scss" scoped>
@@ -374,23 +367,24 @@ $waiPadding: 6.51rem;
     display: flex;
     justify-content: center;
     align-items: center;
-    background: radial-gradient(96% 96% at 2% 32%, #ffffff 0%, #fcfdfd 54%, #e1e4e7 100%);
+    background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
     cursor: pointer;
 
     .name {
       width: 100%;
       font-size: 2.48rem;
-      color: #1a293a;
+      color: #1A293A;
       padding: 0.5rem 0;
       text-align: center;
     }
 
+
     .pic {
       width: 11.36vw;
       height: 11.36vw;
       border-radius: 50%;
-      background: radial-gradient(78% 78% at 53% 50%, #07121a 0%, #2a4256 49%, #5180a9 100%);
-      box-shadow: 0px 0px 2px 2px #ffffff;
+      background: radial-gradient(78% 78% at 53% 50%, #07121A 0%, #2A4256 49%, #5180A9 100%);
+      box-shadow: 0px 0px 2px 2px #FFFFFF;
       margin-bottom: 2vh;
       overflow: hidden;
       display: flex;
@@ -429,7 +423,7 @@ $waiPadding: 6.51rem;
     transform: scale(1);
 
     .li {
-      background: radial-gradient(167% 126% at 97% 6%, #35ffc6 0%, #00ffe8 100%);
+      background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
     }
   }
 }
@@ -446,7 +440,7 @@ $waiPadding: 6.51rem;
 
   span {
     display: block;
-    color: #ffffff;
+    color: #FFFFFF;
     font-size: 1rem;
     padding-top: 3px;
   }

+ 2 - 2
src/views/login/mobile.vue

@@ -25,9 +25,9 @@
           <div class="login-item">
             <div @click="getCmdtest(2)" class="login-btn" style="width:100%;">2、举左手(确认)</div>
           </div>
-          <!-- <div class="login-item">
+          <div class="login-item">
             <div @click="getCmdtest(3)" class="login-btn" style="width:100%;">3、双手胸前交叉(退出)</div>
-          </div> -->
+          </div>
           <div class="login-item" style="margin-bottom: 0;">
             <div @click="getCmdtest(4)" class="login-btn" style="width:100%;">4、刷新</div>
           </div>