diff --git a/src/views/dashboard1/index.less b/src/views/dashboard1/index.less index 72ad2c2..6359a11 100644 --- a/src/views/dashboard1/index.less +++ b/src/views/dashboard1/index.less @@ -2,32 +2,41 @@ width: 1920px; height: 1080px; position: relative; + z-index: 0; overflow: hidden; - background-image: url("./assets/头部动画.webp"), url("./assets/头部动画.png"), - url("./assets/整体边框_静态图片.png"), url("./assets/底部动画.webp"), - url("./assets/底部动画.png"), url("./assets/头部动画_左侧点.webp"), - url("./assets/头部动画_左侧点.png"), url("./assets/头部动画_右侧点.webp"), - url("./assets/头部动画_右侧点.png"); - background-position: top, - top, - center, - bottom, - bottom, - left top, - left top, - right top, - right top; - background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, - no-repeat, no-repeat; - background-size: 100%, - 100%, - 100% 100%, - 100%, - 100%, - auto, - auto, - auto, - auto; + + &:after { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + pointer-events: none; + background-image: url("./assets/头部动画.webp"), url("./assets/头部动画.png"), + url("./assets/整体边框_静态图片.png"), url("./assets/底部动画.webp"), + url("./assets/底部动画.png"), url("./assets/头部动画_左侧点.webp"), + url("./assets/头部动画_左侧点.png"), url("./assets/头部动画_右侧点.webp"), + url("./assets/头部动画_右侧点.png"); + background-position: top, + top, + center, + bottom, + bottom, + left top, + left top, + right top, + right top; + background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, + no-repeat, no-repeat; + background-size: 100%, + 100%, + 100% 100%, + 100%, + 100%, + auto, + auto, + auto, + auto; + } &:before { content: "管廊巡检机器人综合管理平台"; @@ -38,7 +47,10 @@ -webkit-text-fill-color: transparent; font-family: YouSheBiaoTiHei, system-ui; font-size: 42px; - position: relative; + position: absolute; + top: 0; + left: 0; + right: 0; z-index: 2; display: flex; align-items: center; @@ -48,8 +60,9 @@ } .background { - position: relative; - z-index: -1; + position: absolute; + inset: 0; + z-index: 0; width: 100%; height: 100%; object-fit: cover; @@ -57,6 +70,7 @@ .main { position: absolute; + z-index: 2; width: 100%; height: 100%; top: 0; diff --git a/src/views/dashboard1/pages/IntegratedCenterPage.vue b/src/views/dashboard1/pages/IntegratedCenterPage.vue index d25366f..fea1d7d 100644 --- a/src/views/dashboard1/pages/IntegratedCenterPage.vue +++ b/src/views/dashboard1/pages/IntegratedCenterPage.vue @@ -284,14 +284,11 @@ const streamLoading = ref(false); const streamError = ref(""); const controlWsStatus = ref("未连接"); const controlError = ref(""); -const controlReconnectLimit = 5; -const controlReconnectDelay = 2000; let streamPeerConnection = null; let streamRequestId = 0; let controlSocket = null; let controlRequestSeed = 0; let controlReconnectTimer = null; -let controlReconnectAttempts = 0; let controlSocketManualClose = false; let chassisControlTimer = null; let ptzControlTimer = null; @@ -629,17 +626,11 @@ function scheduleControlReconnect() { if (controlSocketManualClose || controlReconnectTimer !== null) { return; } - if (controlReconnectAttempts >= controlReconnectLimit) { - controlWsStatus.value = "连接失败"; - controlError.value = "控制 WebSocket 连接失败,请检查 /ws/ros 服务或登录状态"; - return; - } - controlReconnectAttempts += 1; - controlWsStatus.value = `重连中(${controlReconnectAttempts}/${controlReconnectLimit})`; + controlWsStatus.value = "重连中"; controlReconnectTimer = window.setTimeout(() => { controlReconnectTimer = null; connectControlSocket(); - }, controlReconnectDelay); + }, 2e3); } function connectControlSocket() { if (controlSocket && (controlSocket.readyState === WebSocket.OPEN || controlSocket.readyState === WebSocket.CONNECTING)) { @@ -648,17 +639,13 @@ function connectControlSocket() { controlSocketManualClose = false; controlError.value = ""; controlWsStatus.value = "连接中"; - const socket = new WebSocket(buildControlWsUrl()); - controlSocket = socket; - socket.onopen = () => { - controlReconnectAttempts = 0; + controlSocket = new WebSocket(buildControlWsUrl()); + controlSocket.onopen = () => { controlWsStatus.value = "已连接"; }; - socket.onmessage = (event) => { + controlSocket.onmessage = (event) => { if (event.data === "ping") { - if (socket.readyState === WebSocket.OPEN) { - socket.send("pong"); - } + controlSocket?.send("pong"); return; } if (event.data === "pong") { @@ -689,27 +676,18 @@ function connectControlSocket() { console.error(error); } }; - socket.onerror = () => { - if (socket === controlSocket) { - controlError.value = "控制 WebSocket 连接异常"; - } + controlSocket.onerror = () => { + controlError.value = "控制 WebSocket 连接异常"; }; - socket.onclose = (event) => { - if (socket !== controlSocket) { - return; - } - controlSocket = null; + controlSocket.onclose = () => { controlWsStatus.value = "未连接"; - if (controlSocketManualClose || event.code === 1000) { - return; - } + controlSocket = null; scheduleControlReconnect(); }; - return socket; + return controlSocket; } function closeControlSocket() { controlSocketManualClose = true; - controlReconnectAttempts = 0; if (controlReconnectTimer !== null) { window.clearTimeout(controlReconnectTimer); controlReconnectTimer = null; @@ -718,10 +696,8 @@ function closeControlSocket() { controlWsStatus.value = "未连接"; return; } - const socket = controlSocket; + controlSocket.close(); controlSocket = null; - socket.onclose = null; - socket.close(1000, "manual close"); controlWsStatus.value = "未连接"; } function sendControlMessage(type, data) { @@ -729,7 +705,6 @@ function sendControlMessage(type, data) { controlError.value = "当前机器人缺少设备标识"; return; } - controlReconnectAttempts = 0; const socket = connectControlSocket(); const payload = { type,