tropsCode/src/views/gesture/index.vue

<template>
  <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-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="name">
                {{ item.name }}
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="erweima"> <img :src="erweima" />
      <span>扫码遥控</span>
    </div>
    <OptionWindow ref="optionWindowRef" :projectList="projectList" />
  </div>
</template>

<script setup name="Gesture" lang="ts">
import { useWebSocket } from '@/utils/handWs';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation } from 'swiper/modules';
import QRCode from "qrcode";
import 'swiper/css';
import 'swiper/scss/navigation';
const { handWs, startDevice, startHand, stateHand } = useWebSocket();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;
const optionWindowRef = ref();
const data = reactive<any>({
  mySwiper: {},
  projectList: [],
  timerManager: {},
  device_info: {},
  erweima: '',
  sid: '',
  key: 0,
});
const { mySwiper, projectList, timerManager, device_info, erweima, sid, key } = toRefs(data);

/**
 * 清空定时任务
*/
const getClearTimer = (data?: any) => {
  if (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])
        timerManager.value[key] = null;
      }
    }
  }
};

/**
 * 初始化项目
*/
const getInitExam = () => {
  getExam();
  //定时刷新
  timerManager.value.exam = setInterval(() => {
    getExam();
  }, 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) => {
      //只显示能开的
      return item.area.length > 0 && examList.includes(item.key);
      //return item.area.length > 0;
    });
    // console.log("projectList.value", projectList.value)
  });
};

/**
 * 获取实例
*/
const onSwiper = ($ev: any) => {
  console.log("1111111", $ev)
  mySwiper.value = $ev;
  slidePrev()
};

/**
 * 切换上一页
*/
const slidePrev = () => {
  mySwiper.value.slidePrev();
};

/**
 * 切换下一页
*/
const slideNext = () => {
  mySwiper.value.slideNext();
};

/**
 * 启动切换
*/
const slideChange = () => {
  // if (projectList.value.length <= 3) {
  //   slidePrev()
  // } else {
  //   slideNext();
  // }
  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)
  if (project == undefined) {
    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("该项目没有配置参数");
    return false;
  }
  let data = {
    gesture: obj.gesture ? true : false,
    demo: obj?.demo || 0,
    area: obj?.area_test_id || '',
    ctrl: obj?.area_ctrl_id || '',
    time: obj?.test_time || '',
    music: obj?.music_info?.url || '',
    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()
    //清空缓存
    localStorage.clear();
    //跳转
    router.push({ path: '/login/qrcode' });
  } 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/qrcode' });
          } else {
            proxy?.$modal.msgError(res.message);
          }
        });
      }
    }).finally(() => {
    });
  }
};

/**
 * 提示语
*/
const getTips = () => {
  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
        })
      }
      num++
    }
  }, myTime)
};

/**
 * 获取个人信息
*/
const getUserInfo = () => {
  let params = {};
  proxy?.$http.common.getUserInfo(params).then((res: any) => {
    //保存信息
    if (res.data.length) {
      let myData = res.data[0];
      let info = JSON.stringify(myData);
      localStorage.setItem("userInfo", info);
      //修改收藏夹图标
      proxy?.$utils.setFavicon(myData?.logo_url);
      key.value = key.value + 1//更新头部LOGO
    }
  });
};

/**
 * 获取设备项目
*/
const getDevice = async () => {
  let deviceid = localStorage.getItem("deviceid") || '';
  if (deviceid) {
    startDevice({ deviceid: deviceid })
  } else {
    proxy?.$modal.msgError(`缺少设备信息请重新登录！`);
    await proxy?.$http.common.logout({}).then((res: any) => {
    });
    proxy?.$modal?.closeLoading()
    //清空缓存
    localStorage.clear();
    //跳转
    router.push({ path: '/login/qrcode' });
  }
};

/**
 * 获取二维码
*/
const getErweima = () => {
  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'){
      return false;
    }
    // console.log("eeeee", e)
    if (e?.wksid) {
      //获取设备项目
      getDevice()
    }
    //接收设备信息
    if (e?.device_info) {
      device_info.value = e.device_info;
      let handcontroller_id = device_info.value.handcontroller_id;
      stateHand(handcontroller_id);
      getInitExam();
    }
    //获取手势状态
    if (e?.cmd == 'get_handcontroller_state' && e?.state == 0) {
      let handcontroller_id = device_info.value.handcontroller_id;
      startHand(handcontroller_id);
    }
    //左滑动
    if (e?.data?.result == "next_item") {
      proxy?.$modal.msgSuccess('手势指令：左滑动');
      if (projectList.value.length == 0) {
        return false;
      }
      slideChange();
    }
    //举左手
    if (e?.data?.result == "left_hand") {
      proxy?.$modal.msgSuccess('手势指令：举左手');
      confirm();
    }
    //退出
    if (e?.data?.result == "exit") {
      proxy?.$modal.msgSuccess('手势指令：交叉手');
    }
    //刷新
    if (e?.data?.result == "refresh") {
      window.location.reload()
    }
  });
})
onMounted(() => {
  getUserInfo();
  //登录码
  getErweima();
  //提示语
  // getTips();

})
onBeforeUnmount(() => {
  getClearTimer();
  ElMessage.closeAll();
})
</script>

<style lang="scss" scoped>
$topPadding: 5.19rem;
$waiPadding: 6.51rem;

.menu {
  width: calc(100% - ($waiPadding * 2));
  height: 100vh;
  margin: 0 auto;
  display: flex;
  align-items: center;

  .li {
    // width: calc((100% / 6) - 1rem + (1rem/6));
    // margin-right: 1rem;
    // margin-bottom: 1rem;
    width: 100%;
    height: 100%;
    padding: 3vh 0;
    border-radius: 1.6rem;
    box-sizing: border-box;
    box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
    display: flex;
    justify-content: center;
    align-items: center;
    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;
      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;
      margin-bottom: 2vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      img {
        max-width: 88%;
        max-height: 88%;
        transition: all 1s;
      }
    }

    &:hover {
      img {
        transform: translateY(-0.5vw);
      }
    }
  }

  .swiper {
    width: 100%;
  }

  .swiper-slide {
    transform: scale(0.8);
    transition: all 0.3s ease-in-out;
    border-radius: 1.6rem;
    opacity: 0.6;
    overflow: hidden;
  }

  .swiper-slide-active {
    opacity: 1;
    transform: scale(1);

    .li {
      background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
    }
  }
}

.erweima {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  text-align: center;

  img {
    width: 6.625rem;
  }

  span {
    display: block;
    color: #FFFFFF;
    font-size: 1rem;
    padding-top: 3px;
  }
}
</style>