From 02d38ddcf5a80c980d3a928eda60acad6c6d705b Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Tue, 19 Mar 2024 17:06:56 +0800
Subject: [PATCH] update

---
 src/router/index.ts                 |  5 ++
 src/views/Exhibition/Demo/index.vue | 86 +++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 src/views/Exhibition/Demo/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 30c9a4e..d29d939 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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",
diff --git a/src/views/Exhibition/Demo/index.vue b/src/views/Exhibition/Demo/index.vue
new file mode 100644
index 0000000..5ceceb6
--- /dev/null
+++ b/src/views/Exhibition/Demo/index.vue
@@ -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>