99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<ul :style="{ width: `${list.length * 1920}px` }">
|
||
|
|
<li v-for="(item, index) in list"
|
||
|
|
:style="{ 'background-color': item.color, transform: `translateX(-${i * 1920}px)` }"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<component :is="item.components()" v-model="socketMsg" :label="item.label" v-if="hash.includes(index)"></component>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed,defineAsyncComponent } from 'vue'
|
||
|
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||
|
|
const Germanyindex = defineAsyncComponent(() =>
|
||
|
|
import('@/views/Exhibition/Germany/index.vue')
|
||
|
|
);
|
||
|
|
const Germanychild = defineAsyncComponent(() =>
|
||
|
|
import('@/views/Exhibition/Germany/child.vue')
|
||
|
|
);
|
||
|
|
let i = ref(0)
|
||
|
|
let hash = [0]
|
||
|
|
let socketMsg = ref({})
|
||
|
|
let timer = null
|
||
|
|
let time = 60000
|
||
|
|
watch(i, (val) => {
|
||
|
|
if (val < 0) {
|
||
|
|
i.value = 0
|
||
|
|
}
|
||
|
|
if (val > list.length - 1) {
|
||
|
|
i.value = list.length - 1
|
||
|
|
}
|
||
|
|
if (!hash.includes(i.value)) {
|
||
|
|
hash.push(i.value)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
let list = reactive([
|
||
|
|
{ color: '', components: () => Germanyindex, label: ''},
|
||
|
|
{ color: '', components: () => Germanychild, label: 'child1'},
|
||
|
|
{ color: '', components: () => Germanychild, label: 'child2'},
|
||
|
|
{ color: '', components: () => Germanychild, label: 'child3'},
|
||
|
|
])
|
||
|
|
function getWebsocket(val) {
|
||
|
|
try {
|
||
|
|
let data = JSON.parse(val)
|
||
|
|
|
||
|
|
socketMsg.value = data
|
||
|
|
// if (data.type == 'SwitchBigScreen') {
|
||
|
|
// i.value = data.msg
|
||
|
|
// }
|
||
|
|
|
||
|
|
} catch (err) {
|
||
|
|
console.log(err);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
function errWebsocket(val) {
|
||
|
|
// console.log(val);
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
setInterval(() => {
|
||
|
|
i.value++
|
||
|
|
if (i.value > list.length - 1) {
|
||
|
|
i.value = 0
|
||
|
|
}
|
||
|
|
}, time)
|
||
|
|
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
||
|
|
})
|
||
|
|
onUnmounted(() => {
|
||
|
|
clearInterval(timer)
|
||
|
|
closeWebsocket()
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
width: 1920px;
|
||
|
|
height: 1080px;
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
width: 1920px;
|
||
|
|
height: 100%;
|
||
|
|
/* transition: all 0.5s; */
|
||
|
|
}
|
||
|
|
</style>
|