dataV-xunfei/src/views/controller/index.vue

<script setup lang='ts'>
import water from "./components/water.vue"
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" @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" @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" @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" @click="changeImg(4)">
				<water cid="img4"/>
				<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173128418571732.jpg"/>
			</div>
		</div>
  </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: calc(100vh - 35px - 10px);
	}
	.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>