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

src/components/content/tunnelScene/sceneClass/demo.js

@@ -370,8 +370,8 @@ export default class Demo {
 
     // 初始化风机颜色
     this.equMap.get("equ_fan").traverse((v) => {
-      // v.material = new this.THREE.MeshBasicMaterial();
-      // v.material.color = new this.THREE.Color("#191a05");
+      v.material = new this.THREE.MeshBasicMaterial();
+      v.material.color = new this.THREE.Color(0xC0C0C0);
       if (/^leaf/.test(v.name) || /^roller/.test(v.name)) {
         group.add(v.clone());
         v.visible = false;
@@ -513,6 +513,7 @@ export default class Demo {
     for (const item of this.tunnelConfigEquipment) {
       //使用api取拿到附着点
       let pointmodel = this.scene.getObjectByName(item.pointName)
+      // pointmodel.hasDevice = true;
       let formInfo = {
         equipmentType: item.equipmentType, //设备类型
         chooseEquipment: item.equipmentName, //设备选择(设备名称)

src/router/index.js

@@ -8,7 +8,7 @@ const routes = [
   {
     path: '/login',
     name: 'login',
-    component: ()=>import('@/views/login/index.vue'),
+    component: () => import('@/views/login/index.vue'),
     meta: {
       hidden: true,
       title: '登录'
@@ -23,6 +23,15 @@ const routes = [
       breadcrumb: true
     }
   },
+  {
+    path: '/preview',
+    name: 'tunnelpreview',
+    component: () => import('@/views/tunnel/preview.vue'),
+    meta: {
+      title: '预览首页',
+      breadcrumb: true
+    }
+  },
   {
     path: '/debug',
     name: 'debug',
@@ -65,26 +74,26 @@ const router = createRouter({
   history: createWebHashHistory(),
   routes,
 });
-router.beforeEach( (to,form,next)=>{
-    NProgress.start()
-    if(!getToken()) {
-      if (to.path === '/login') {
-        next()
-        NProgress.done()
-      } else {
-        next({path: '/login'})
-      }
-    }else {
-      console.log('有token')
-      if(to.path === '/login') {
-        next('/')
-        NProgress.done()
-      }else {
-        next()
-      }
+router.beforeEach((to, form, next) => {
+  NProgress.start()
+  if (!getToken()) {
+    if (to.path === '/login') {
+      next()
+      NProgress.done()
+    } else {
+      next({ path: '/login' })
     }
+  } else {
+    console.log('有token')
+    if (to.path === '/login') {
+      next('/')
+      NProgress.done()
+    } else {
+      next()
+    }
+  }
 })
-router.afterEach(()=>{
+router.afterEach(() => {
   NProgress.done()
 })
 

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>
+