更新了互动场景

src/router/index.ts

@@ -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',

src/views/controller/index.vue

@@ -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;

src/views/scene/index.vue

@@ -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>