更新了互动场景
This commit is contained in:
parent
deaa9f4fe9
commit
fedce3f5f5
|
|
@ -23,7 +23,11 @@ const routes: RouteRecordRaw[] = [
|
|||
name: 'con',
|
||||
component: () => import('@/views/controller/index.vue'),
|
||||
},
|
||||
|
||||
{
|
||||
path: '/scene',
|
||||
name: 'scene',
|
||||
component: () => import('@/views/scene/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
name: '404',
|
||||
|
|
|
|||
|
|
@ -1,25 +1,72 @@
|
|||
<script setup lang='ts'>
|
||||
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>
|
||||
|
||||
<template>
|
||||
<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 id="img1" class="img-list-item">
|
||||
<div id="img1" class="img-list-item" @click="changeImg(1)">
|
||||
<water cid="img1"/>
|
||||
<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173032d02895995.jpg"/>
|
||||
</div>
|
||||
<div id="img2" class="img-list-item">
|
||||
<div id="img2" class="img-list-item" @click="changeImg(2)">
|
||||
<water cid="img2"/>
|
||||
<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173052de7b64557.jpg"/>
|
||||
</div>
|
||||
<div id="img3" class="img-list-item">
|
||||
<div id="img3" class="img-list-item" @click="changeImg(3)">
|
||||
<water cid="img3"/>
|
||||
<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173108d32b37266.jpg"/>
|
||||
</div>
|
||||
<div id="img4" class="img-list-item">
|
||||
<div id="img4" class="img-list-item" @click="changeImg(4)">
|
||||
<water cid="img4"/>
|
||||
<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173128418571732.jpg"/>
|
||||
</div>
|
||||
|
|
@ -31,6 +78,20 @@ import { NImage } from 'naive-ui'
|
|||
.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: calc(100vh - 35px - 10px);
|
||||
}
|
||||
.img-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
// 假设用户uid为1
|
||||
const uid = 1
|
||||
// 浏览器监听user-1频道的消息，也就是用户uid为1的用户消息
|
||||
const user_channel = connection.subscribe(`user-${uid}`)
|
||||
console.log(user_channel)
|
||||
// 当user-1频道有message事件的消息时
|
||||
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>
|
||||
Loading…
Reference in New Issue