加了路由，简单预览模式实现

src/views/tunnel/preview.vue

@@ -0,0 +1,169 @@
+<template>
+    <div id="main">
+        <div class="box-top">
+            <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
+            <div class="tunnel-title"></div>
+            <manage-length class="tunnel-length"></manage-length>
+            <div class="top-right">
+                <div class="current-site">
+                    当前站点：<span>{{ currentSite }}</span>
+                    <div class="toggle"></div>
+                </div>
+                <div class="current-user">
+                    上午好：<span>{{ currentUser }}</span>
+                    <span>今天是：{{ currentDate }}</span>
+                    <div class="logout" @click="handleLogout"></div>
+                </div>
+            </div>
+        </div>
+        <tunnel-scene id="tunnel-box" />
+    </div>
+</template>
+<script setup>
+import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
+import ManageBtn from "@/components/manageBtn/index.vue";
+import ManageLength from "@/components/manageLength/index.vue";
+import { dateFormat } from "@/utils/date.js";
+import { onMounted } from "vue";
+import { getToken } from "@/utils/auth";
+import { useAuthStore } from "@/store/userstore.js";
+import { getLargeScreen, getLargeScreenInfo } from "@/api/largeScreen";
+import { ElMessageBox } from "element-plus";
+
+const authStore = useAuthStore();
+const router = useRouter();
+const selectIndex = ref(-1);
+const showFan = ref(false);
+const drawerLeft = ref(true);
+const drawerRight = ref(true);
+const currentSite = ref("松江站");
+const currentUser = ref("admin");
+const currentDate = ref(dateFormat());
+const tunnelBtn = ref();
+const tunnelList = ref([]);
+const routeList = ref([]);
+let socket = reactive("");
+const serialNumber = ref("SC00DY00GH00ELBT");
+let token = getToken();
+let send = {
+    type: "ping",
+};
+const largeScreenData = ref(null);
+const socketData = reactive({
+    leftData: [],
+    windPressure: [],
+    sensor: [],
+});
+
+onMounted(() => {
+    nextTick(() => {
+        showFan.value = true;
+    });
+    getOtherInfo()
+    getScreenInfo();
+});
+
+const getOtherInfo = async () => {
+    await getLargeScreenInfo().then((res) => {
+        if (res?.code === 1000) {
+            routeList.value = res.data.routeList
+            currentSite.value = res.data.siteOption[0].label
+            tunnelList.value = res.data.tunnelOption
+        }
+    });
+};
+const getScreenInfo = async () => {
+    await getLargeScreen(1).then((res) => {
+        if (res?.code === 1000) {
+            largeScreenData.value = res.data;
+        }
+    });
+};
+const manageSelect = (index) => {
+    console.log("首页点击-", index);
+    if (index === 0) {
+        router.push("/site");
+    } else if (index === 1) {
+        router.push("/tunnel/1");
+    }
+};
+const closeLeft = () => {
+    drawerLeft.value = !drawerLeft.value;
+};
+const closeRight = () => {
+    drawerRight.value = !drawerRight.value;
+};
+const handleLogout = () => {
+    ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        authStore.userLogout();
+        router.push("/login");
+    })
+};
+const previousBtn = () => {
+    tunnelBtn.value.prev();
+};
+const nextBtn = () => {
+    tunnelBtn.value.next();
+};
+
+const initWebSocket = () => {
+    // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
+    let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
+    console.log(wsUrl);
+    socket = new WebSocket(wsUrl);
+    //连接发生错误的回调方法
+    socket.onerror = function () {
+        console.log("ws连接发生错误");
+    };
+    //连接成功建立的回调方法
+    socket.onopen = function () {
+        console.log("ws连接成功");
+    };
+    //接收到消息的回调方法
+    socket.onmessage = function (event) {
+        console.log("服务器返回的信息: ", JSON.parse(event.data));
+        const type = JSON.parse(event.data).type;
+        const data = JSON.parse(event.data).data;
+        if (type === "equipment") {
+            data.forEach((item) => {
+                if (item.typeKey === "frequency") {
+                    socketData.leftData = data;
+                } else if (item.typeKey === "windPressure") {
+                    socketData.windPressure = data;
+                } else if (item.typeKey === "sensor") {
+                    socketData.sensor = data;
+                }
+            });
+        }
+    };
+    //连接关闭的回调方法
+    socket.onclose = function () {
+        console.log("ws连接关闭");
+        // initWebSocket()
+    };
+    setInterval(() => {
+        socket.send(JSON.stringify(send));
+    }, 30000);
+};
+const closeSocket = () => {
+    socket.close();
+};
+initWebSocket();
+</script>
+  
+<style lang="scss" scoped>
+#main {
+    height: 100%;
+    width: 100%;
+    background-color: #072348;
+
+    #tunnel-box {
+        height: 100%;
+    }
+}
+</style>
+