|
|
@@ -2,13 +2,20 @@
|
|
|
<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>
|
|
|
@@ -17,9 +24,10 @@
|
|
|
</swiper-slide>
|
|
|
</swiper>
|
|
|
</div>
|
|
|
- <div class="erweima"> <img :src="erweima" />
|
|
|
+ <!-- <div class="erweima">
|
|
|
+ <img :src="erweima" />
|
|
|
<span>扫码遥控</span>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<OptionWindow ref="optionWindowRef" :projectList="projectList" />
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -28,7 +36,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();
|
|
|
@@ -43,22 +51,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;
|
|
|
}
|
|
|
}
|
|
|
@@ -67,23 +75,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) => {
|
|
|
//只显示能开的
|
|
|
@@ -96,64 +104,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 = {
|
|
|
@@ -163,55 +171,59 @@ 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();
|
|
|
+ //localStorage.clear();
|
|
|
+ localStorage.removeItem('token');
|
|
|
+ localStorage.removeItem('userInfo');
|
|
|
//跳转
|
|
|
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();
|
|
|
+ localStorage.removeItem('token');
|
|
|
+ localStorage.removeItem('userInfo');
|
|
|
+ //跳转
|
|
|
+ router.push({ path: '/login/qrcode' });
|
|
|
+ } else {
|
|
|
+ proxy?.$modal.msgError(res.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {});
|
|
|
}
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 提示语
|
|
|
-*/
|
|
|
+ */
|
|
|
const getTips = () => {
|
|
|
let myTime = 7000;
|
|
|
let num = 0;
|
|
|
@@ -221,21 +233,21 @@ const getTips = () => {
|
|
|
proxy?.$modal.msgWarning({
|
|
|
message: `手向左滑切换项目`,
|
|
|
duration: 5000
|
|
|
- })
|
|
|
+ });
|
|
|
} else {
|
|
|
proxy?.$modal.msgWarning({
|
|
|
message: `举左手进入测试`,
|
|
|
duration: 5000
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
- num++
|
|
|
+ num++;
|
|
|
}
|
|
|
- }, myTime)
|
|
|
+ }, myTime);
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 获取个人信息
|
|
|
-*/
|
|
|
+ */
|
|
|
const getUserInfo = () => {
|
|
|
let params = {};
|
|
|
proxy?.$http.common.getUserInfo(params).then((res: any) => {
|
|
|
@@ -243,26 +255,25 @@ 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();
|
|
|
//跳转
|
|
|
@@ -272,27 +283,24 @@ 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) {
|
|
|
@@ -307,7 +315,7 @@ 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;
|
|
|
@@ -315,32 +323,31 @@ onBeforeMount(() => {
|
|
|
// slideChange();
|
|
|
}
|
|
|
//举左手
|
|
|
- if (e?.data?.result == "left_hand") {
|
|
|
+ if (e?.data?.result == 'left_hand') {
|
|
|
// proxy?.$modal.msgSuccess('手势指令：举左手');
|
|
|
// confirm();
|
|
|
}
|
|
|
//退出
|
|
|
- if (e?.data?.result == "exit") {
|
|
|
+ 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>
|
|
|
@@ -367,24 +374,23 @@ $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;
|
|
|
@@ -423,7 +429,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%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -440,7 +446,7 @@ $waiPadding: 6.51rem;
|
|
|
|
|
|
span {
|
|
|
display: block;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
font-size: 1rem;
|
|
|
padding-top: 3px;
|
|
|
}
|
林旭祥