update
This commit is contained in:
parent
bd0c7beb1b
commit
02d38ddcf5
@ -310,6 +310,11 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name: "CIFMExhibitionMainChild",
|
||||
component: () => import("../views/Exhibition/CIFM/child.vue"),
|
||||
},
|
||||
{
|
||||
path: "/DEMOExhibition",
|
||||
name: "DEMOExhibition",
|
||||
component: () => import("../views/Exhibition/Demo/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/ExhibitionTable_:id",
|
||||
name: "ExhibitionTable",
|
||||
|
86
src/views/Exhibition/Demo/index.vue
Normal file
86
src/views/Exhibition/Demo/index.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user