import { reactive, onMounted, toRefs, computed } from 'vue' import { getBackTime } from '@/http/api' import { useStore } from '@/store/root' import { useRouter } from 'vue-router' import { useStatistics } from '@/composables/useStatistics' export const useHandleScreen = callback => { const router = useRouter() const store = useStore() const backSocket = computed(() => store.config?.backSocket) const version = computed(() => store.config?.version) const state = reactive({ isWall: false, //当前是回到首页还是回到屏保 messageWS: null, autoTimer: null, times: [], //总时间 timer: null, //首页定时器 wallTimer: null, //屏保定时器 countDownNum: 0, //回到首页倒计时时间 countDownToWall: 0, //回到屏保倒计时时间 countDownGif: false, //是否显示倒计时gif动图 title: computed(() => (!state.isWall ? '即将进入首页' : '即将进入屏幕保护')) }) //socket发送消息 function send(msg) { try { state?.messageWS?.send(msg) } catch (error) { console.log(error) } } //获取返回时长 async function _getBackTime() { try { const { data } = await getBackTime() state.times = data state.countDownNum = data[0] state.countDownToWall = data[1] } catch (error) { console.log('error: ', error) } } //当前操作页是否首页专用 function rootPromise() { clearTimeout(state.isRootTimer) return new Promise(resolve => { state.isRootTimer = setTimeout(() => { resolve() }, state.times[0] * 1000) }) } //回到首页专用 function indexPromise() { return new Promise(resolve => { state.timer = setInterval(() => { state.countDownNum-- if (state.countDownNum > 0 && state.countDownNum <= 5) { if (!state.countDownGif) { state.countDownGif = true } } if (state.countDownNum <= 0) { clearInterval(state.timer) state.countDownGif = false state.countDownNum = state.times[0] callback && callback() resolve() } }, 1000) }) } //屏保专用 function wallpaperPromise() { clearInterval(state.wallTimer) state.countDownToWall = state.times[1] return new Promise(resolve => { state.wallTimer = setInterval(() => { state.countDownToWall-- if (state.countDownToWall > 0 && state.countDownToWall <= 5) { if (!state.countDownGif) { state.isWall = true state.countDownGif = true } } if (state.countDownToWall <= 0) { clearInterval(state.wallTimer) state.countDownGif = false state.isWall = false state.countDownToWall = state.times[1] callback && callback() send('pcscreensavers') resolve() } }, 1000) }) } //初始化与容器通信的websocket function initWebSocket() { try { state.messageWS = new WebSocket(backSocket.value) //连接成功 state.messageWS.onopen = setOnopenMessage //收到消息的回调 state.messageWS.onmessage = setOnmessageMessage } catch (error) { console.log(error) } } //websocket连接成功 function setOnopenMessage() { console.log('message to container success') send(`version:${version.value}`) } //接收数据 async function setOnmessageMessage() { if (state.times[1] !== 0) { await wallpaperPromise() } } //超过一分钟未操作回到首页 const checkHandleScreen = () => { useStatistics('device') clearInterval(state.timer) clearInterval(state.wallTimer) clearTimeout(state.autoTimer) clearTimeout(state.isRootTimer) state.countDownNum = state.times[0] state.countDownToWall = state.times[1] state.countDownGif = false state.isWall = false state.autoTimer = setTimeout(async () => { if (state.times[0] !== 0) { if (router.currentRoute.value.fullPath !== '/index') { await indexPromise() } if ((state.times[1] === 0 && router.currentRoute.value.fullPath === '/index') || (state.times[0] === 0 && state.times[1] === 0)) { await rootPromise() callback && callback() } } if (state.times[1] !== 0) { await wallpaperPromise() } }, 400) } //初始化相关数据 function initMessage() { _getBackTime() initWebSocket() } onMounted(initMessage) return { ...toRefs(state), checkHandleScreen, send } }