更新了互动场景

This commit is contained in:
weipengfei 2023-10-18 17:52:00 +08:00
parent deaa9f4fe9
commit fedce3f5f5
3 changed files with 180 additions and 6 deletions

View File

@ -23,7 +23,11 @@ const routes: RouteRecordRaw[] = [
name: 'con', name: 'con',
component: () => import('@/views/controller/index.vue'), component: () => import('@/views/controller/index.vue'),
}, },
{
path: '/scene',
name: 'scene',
component: () => import('@/views/scene/index.vue'),
},
{ {
path: '/404', path: '/404',
name: '404', name: '404',

View File

@ -1,25 +1,72 @@
<script setup lang='ts'> <script setup lang='ts'>
import water from "./components/water.vue" import water from "./components/water.vue"
import { NImage } from 'naive-ui' import { ref } from "vue"
import axios from "axios"
const showIframe = ref(false)
const iframeSRC = ref("")
if(!localStorage.getItem('order4')){
console.error('请到缓存设置指令: order1~4; ', '场景指令: scene--URI, 视频指令: mp4--URI', '例如: order1 secen--http://shop.lihai.cn/#/admin');
}
const changeImg = (e: number)=>{
// switch(e){
// case 1: iframeSRC.value = "https://goview.lihaink.cn/#/chart/preview/62";break;
// case 2: iframeSRC.value = "https://goview.lihaink.cn/#/chart/preview/110";break;
// case 3: iframeSRC.value = "https://goview.lihaink.cn/#/chart/preview/84";break;
// case 4: iframeSRC.value = "https://goview.lihaink.cn/#/chart/preview/74";break;
// }
// showIframe.value = true;
switch(e){
case 1: nowOrder.value = localStorage.getItem('order1');break;
case 2: nowOrder.value = localStorage.getItem('order2');break;
case 3: nowOrder.value = localStorage.getItem('order3');;break;
case 4: nowOrder.value = localStorage.getItem('order4');;break;
}
submitOrder(e)
}
const nowOrder = ref<string|null>("")
const url = ref("")
const submitOrder = (e: number)=>{
if(!nowOrder.value) return console.log('请到缓存设置指令: order'+e, '场景指令: scene--URI, 视频指令: mp4--URI');
if(url.value==`https://chat.lihaink.cn/index/push?name=${nowOrder.value}`) return console.log('当前指令已经发送过,请切换其他指令');
url.value = `https://chat.lihaink.cn/index/push?name=${nowOrder.value}`
axios.get(`https://chat.lihaink.cn/index/push?name=${btoa(nowOrder.value)}`).then(()=>{
console.log('发送成功', e);
}).catch((err)=>{
console.log('发送失败', err);
})
}
const back = ()=>{
showIframe.value = false
}
</script> </script>
<template> <template>
<div class="w-full h-full white"> <div class="w-full h-full white">
<!-- <div v-if="showIframe" class="w-full h-full" style="box-sizing: border-box;padding-top: 10px;">
<div class="btn" @click="back">返回</div>
<iframe class="iframe" :src="iframeSRC"></iframe>
</div> -->
<div class="img-list w-full h-full"> <div class="img-list w-full h-full">
<div id="img1" class="img-list-item"> <div id="img1" class="img-list-item" @click="changeImg(1)">
<water cid="img1"/> <water cid="img1"/>
<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173032d02895995.jpg"/> <img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173032d02895995.jpg"/>
</div> </div>
<div id="img2" class="img-list-item"> <div id="img2" class="img-list-item" @click="changeImg(2)">
<water cid="img2"/> <water cid="img2"/>
<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173052de7b64557.jpg"/> <img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173052de7b64557.jpg"/>
</div> </div>
<div id="img3" class="img-list-item"> <div id="img3" class="img-list-item" @click="changeImg(3)">
<water cid="img3"/> <water cid="img3"/>
<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173108d32b37266.jpg"/> <img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173108d32b37266.jpg"/>
</div> </div>
<div id="img4" class="img-list-item"> <div id="img4" class="img-list-item" @click="changeImg(4)">
<water cid="img4"/> <water cid="img4"/>
<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173128418571732.jpg"/> <img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173128418571732.jpg"/>
</div> </div>
@ -31,6 +78,20 @@ import { NImage } from 'naive-ui'
.white{ .white{
background-color: #101014; background-color: #101014;
color: #fff; color: #fff;
.btn{
margin-left: 20px;
margin-bottom: 7px;
border: 1px solid #51d6a9;
border-radius: 3px;
width: 50px;
text-align: center;
height: 28px;
line-height: 28px;
}
.iframe{
width: 100%;
height: calc(100vh - 35px - 10px);
}
.img-list{ .img-list{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

109
src/views/scene/index.vue Normal file
View File

@ -0,0 +1,109 @@
<script setup lang='ts'>
import { ref, nextTick, onMounted, shallowRef } from "vue"
const iframeSRC = ref("https://goview.lihaink.cn/#/chart/preview/62")
const MP4SRC = ref("")
const isVideo = ref(false)
const videoRef = ref(null)
const loadStorage = ()=>{
if(localStorage.getItem('scene')) iframeSRC.value = localStorage.getItem('scene');
}
onMounted(()=>{
loadStorage();
})
const connection = new Push({
url: 'wss://chat.lihaink.cn/zhanti/push', // websocket
app_key: 'aaea61749929eb53a4bd75a1474c1d27',
auth: '/plugin/webman/push/auth', // ()
})
const showIframe = ref(true)
// uid1
const uid = 1
// user-1uid1
const user_channel = connection.subscribe(`user-${uid}`)
console.log(user_channel)
// user-1message
user_channel.on('message', (data: any) => {
try {
// data
console.log('收到命令', data)
if(data.content.includes('scene--')){
showIframe.value = false
isVideo.value = false;
console.log(data.content.substring(7));
iframeSRC.value = data.content.substring(7);
nextTick(()=>{
showIframe.value = true;
})
}
else if(data.content.includes('mp4--')){
isVideo.value = false;
showIframe.value = false;
console.log(data.content.substring(5));
MP4SRC.value = data.content.substring(5);
isVideo.value = true;
nextTick(()=>{
videoRef.value.play();
showIframe.value = true;
})
}
} catch (error) {
console.log(error);
}
})
</script>
<template>
<div class="w-full h-full white">
<iframe v-if="showIframe&&!isVideo" class="iframe" :src="iframeSRC"></iframe>
<video ref="videoRef" v-else-if="!showIframe&&isVideo" class="iframe" :src="MP4SRC" loop controls/>
</div>
</template>
<style lang="scss" scoped>
.white{
background-color: #101014;
color: #fff;
.btn{
margin-left: 20px;
margin-bottom: 7px;
border: 1px solid #51d6a9;
border-radius: 3px;
width: 50px;
text-align: center;
height: 28px;
line-height: 28px;
}
.iframe{
width: 100%;
height: 100%;
}
.img-list{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 10px;
.img-list-item{
box-sizing: border-box;
height: 50%;
width: 50%;
padding: 10px;
overflow: hidden;
img{
width: 100%;
height: 100%;
}
/* border: 1px solid darkblue; */
/* background-color: aquamarine; */
}
}
}
</style>