This commit is contained in:
hzz 2024-03-19 17:06:56 +08:00
parent bd0c7beb1b
commit 02d38ddcf5
2 changed files with 91 additions and 0 deletions

View File

@ -310,6 +310,11 @@ const routes: Array<RouteRecordRaw> = [
name: "CIFMExhibitionMainChild", name: "CIFMExhibitionMainChild",
component: () => import("../views/Exhibition/CIFM/child.vue"), component: () => import("../views/Exhibition/CIFM/child.vue"),
}, },
{
path: "/DEMOExhibition",
name: "DEMOExhibition",
component: () => import("../views/Exhibition/Demo/index.vue"),
},
{ {
path: "/ExhibitionTable_:id", path: "/ExhibitionTable_:id",
name: "ExhibitionTable", name: "ExhibitionTable",

View File

@ -0,0 +1,86 @@
<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-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 energyConsume = defineAsyncComponent(() =>
import('@/views/energyConsume/index.vue')
);
const Mechanics = defineAsyncComponent(() =>
import('@/views/Mechanics/indexNew.vue')
);
const generalEnvironmentMechanical = defineAsyncComponent(() =>
import('@/views/generalEnvironmentMechanical/index.vue')
);
let i = ref(0)
let hash = [0]
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: () => energyConsume},
{ color: '', components: () => Mechanics},
{ color: '', components: () => generalEnvironmentMechanical },
])
function getWebsocket(val) {
try {
let data = JSON.parse(val)
if (data.type == 'SwitchBigScreen') {
i.value = data.msg
}
} catch (err) {
console.log(err);
}
}
function errWebsocket(val) {
// console.log(val);
}
onMounted(() => {
connectWebsocket(null, null, getWebsocket, errWebsocket)
})
</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>