fix last; 访问地址提取为变量

src/components/UeVideo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ue-wrapper">
-    <div class="connect-status" v-show="connectStatus!=='连接成功'">连接状态：{{ connectStatus }}</div>
+    <div class="connect-status" v-show="connectStatus !== '连接成功'">连接状态：{{ connectStatus }}</div>
     <div ref="videoContainerRef" class="video-container"></div>
     <dialog id="login-dialog" data-bs-theme="dark">
       <h2 class="mb-3 fs-6">登录以获取场景资源</h2>
@@ -23,8 +23,9 @@
 </template>
 
 <script setup>
-import { onMounted, ref, getCurrentInstance } from 'vue'
+import { onMounted, ref, getCurrentInstance, onBeforeUnmount } from 'vue'
 import axios from 'axios';
+import baseUrl from '@/utils/peer-stream'
 
 const { proxy } = getCurrentInstance()
 
@@ -77,6 +78,8 @@ const sendDataChannelCommand = (command) => {
     // Call the send method on the custom peer-stream element
     (peerStreamRef.value).emitMessage((JSON.parse(command)));
     console.log('Sending command:', command);
+  } else {
+    console.warn('Send failed, stream is not connected:', command);
   }
 }
 
@@ -90,44 +93,39 @@ const loginMsg = ref('')
 function handleLogin(e) {
   e.preventDefault();
   console.log(form.value)
-  const baseUrl = 'http://10.1.161.53:3000'
-  axios.post(`${baseUrl}/auth/login`, form.value)
-  .then(response => {
-    if (response.status === 201) {
-      localStorage.setItem('token', response.data.access_token);
-      // 获取场景列表
-      axios({
-        method: 'get',
-        url: baseUrl + '/scenePermission',
-        headers: {
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        }
-      }).then(res => {
-        if(res.data) {
-          const targetScene = res.data.find(row => row.name === "低空经济")
-          if(!targetScene) {
-            loginMsg.value = '未发现场景资源'
-            return
+  axios.post(`http://${baseUrl}/auth/login`, form.value)
+    .then(response => {
+      if (response.status === 201) {
+        localStorage.setItem('token', response.data.access_token);
+        // 获取场景列表
+        axios({
+          method: 'get',
+          url: `http://${baseUrl}/scenePermission`,
+          headers: {
+            'Authorization': `Bearer ${localStorage.getItem('token')}`
           }
-          wsConnect(targetScene.scene_id, targetScene.permission, localStorage.getItem('token'));
-          // 添加全局调用监听
-          proxy.$bus.on('callUE', (command) => {
-            sendDataChannelCommand(command)
-          })
-          // 关闭弹窗和页面loading
-          const dialog = document.getElementById('login-dialog')
-          dialog.close()
-          proxy.$bus.emit('toggleLoading', false)
-        }
-      })
-    } else {
+        }).then(res => {
+          if (res.data) {
+            const targetScene = res.data.find(row => row.name === "低空经济")
+            if (!targetScene) {
+              loginMsg.value = '未发现场景资源'
+              return
+            }
+            wsConnect(targetScene.scene_id, targetScene.permission, localStorage.getItem('token'));
+            // 关闭弹窗和页面loading
+            const dialog = document.getElementById('login-dialog')
+            dialog.close()
+            proxy.$bus.emit('toggleLoading', false)
+          }
+        })
+      } else {
+        loginMsg.value = '登录失败'
+      }
+    })
+    .catch((e) => {
+      console.log(e)
       loginMsg.value = '登录失败'
-    }
-  })
-  .catch((e) => {
-    console.log(e)
-    loginMsg.value = '登录失败'
-  })
+    })
 }
 
 onMounted(() => {
@@ -144,6 +142,15 @@ onMounted(() => {
   // setTimeout(() => {
   //   proxy.$bus.emit('toggleLoading', false)
   // }, 1000);
+
+  // 添加全局调用监听
+  proxy.$bus.on('callUE', (command) => {
+    sendDataChannelCommand(command)
+  })
+})
+
+onBeforeUnmount(() => {
+  proxy.$bus.off('callUE')
 })
 
 </script>

src/utils/peer-stream.js

@@ -1,4 +1,7 @@
 '5.1.3';
+// const base = '58.34.215.19:3000'  // 互联网
+const base = '10.1.161.53:3000'
+
 // Must be kept in sync with JavaScriptKeyCodeToFKey C++ array.
 // special keycodes different from KeyboardEvent.keyCode
 const SpecialKeyCodes = {
@@ -211,8 +214,7 @@ class PeerStream extends HTMLVideoElement {
     this.viewMode = this.dataset.viewMode;
     this.token = this.dataset.token;
     const wsUrl =
-      'ws:10.1.161.53:3000' + 
-      `?sceneId=${this.sceneId}&token=${this.token}&&view_mode=${this.viewMode}`;
+      'ws:'+ base + `?sceneId=${this.sceneId}&token=${this.token}&&view_mode=${this.viewMode}`;
     this.ws = new WebSocket(wsUrl, 'peer-stream');
     this.ws.onerror;
     this.ws.onopen = () => {
@@ -922,3 +924,5 @@ class PeerStream extends HTMLVideoElement {
 }
 
 customElements.define('peer-stream', PeerStream, { extends: 'video' });
+
+export default base

src/views/Home.vue

@@ -84,7 +84,7 @@
           <div class="header"><span>网格规划</span></div>
           <ul class="main">
             <li v-for="item in dialogData.legend">
-              <input checked type="checkbox" class="form-check-input mt-0" @change="(e)=>handleToggleLayer(e, item)">
+              <input checked type="checkbox" class="form-check-input mt-0" @change="(e) => handleToggleLayer(e, item)">
               <i :style="{ backgroundColor: item.color }"></i>
               <span>{{ item.label }}</span>
             </li>
@@ -178,7 +178,8 @@
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="(item, index) in dialogData.uavList" @click="handlePickUav(item)" :class="{'active': item.isOn}">
+                <tr v-for="(item, index) in dialogData.uavList" @click="handlePickUav(item)"
+                  :class="{ 'active': item.isOn }">
                   <td style="padding-left: 10px;">{{ index + 1 }}</td>
                   <td>{{ item.seriesNo }}</td>
                   <td>{{ item.owner }}</td>
@@ -271,8 +272,9 @@ const tools = ref([
 
 // 开始无人机模拟
 function startUavDemo(routeName) {
+  // console.log('startUavDemo', routeName)
   proxy.$bus.emit('callUE', getUeFn(routeName))
-  if(routeName==='initUavNormal') {
+  if (routeName === 'initUavNormal') {
     // 添加路径样式
     proxy.$bus.emit('callUE', getUeFn('createLineGo'))
   }
@@ -285,9 +287,9 @@ function startUavDemo(routeName) {
 }
 
 // 结束无人机模拟
-function endUavDemo(routeName) {
-  proxy.$bus.emit('callUE', getUeFn('endFollowUav'))
-  if(routeName==='initUavNormal') {
+function endUavDemo(routeName, reset = true) {
+  proxy.$bus.emit('callUE', getUeFn(routeName))
+  if (routeName === 'initUavNormal') {
     // 清除路径样式
     proxy.$bus.emit('callUE', getUeFn('clearLineGo'))
   }
@@ -318,7 +320,7 @@ function handleClickTool(tool) {
         if (tool.isOn) {
           startUavDemo('initUavFall')
         } else {
-          endUavDemo()
+          endUavDemo('initUavFall')
         }
         break;
     }
@@ -460,13 +462,14 @@ const dialogData = reactive({
 
 function handleToggleLayer(e, item) {
   item.isOn = e.target.checked
-  if(!(item.id)) return
+  if (!(item.id)) return
   proxy.$bus.emit('callUE', getUeFn('toggleGrid', { Id: item.id, Visible: item.isOn }))
 }
 
 function handlePickUav(item) {
+  // console.log('handlePickUav', item)
   item.isOn = !(item.isOn)
-  if(item.isOn) {
+  if (item.isOn) {
     startUavDemo('initUavNormal')
   } else {
     endUavDemo('initUavNormal')

vite.config.js

@@ -8,6 +8,9 @@ export default defineConfig({
   plugins: [
     vue()
   ],
+  build: {
+    outDir: 'low_altitude_web'
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
@@ -39,5 +42,5 @@ export default defineConfig({
       ]
     }
   },
-  base: '/low_altitude/',
+  base: '/low_altitude/'
 })