123

frontend/src/components/CameraView/index.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, defineExpose, defineEmits } from 'vue'
+import { ref, onMounted, onUnmounted, defineExpose, defineEmits, watch } from 'vue'
 import useWebSocket from '../../utils/websocket'
 // const cameraOne = ref("")
 // const cameraTwo = ref("");
@@ -48,33 +48,68 @@ const handleTwoMessage = (e: any) => {
   }
 }
 const cameraNumber = ref<Number>(0)
-const ws: any = useWebSocket(handleMessage, import.meta.env.VITE_WB_CAMERA_ONE_URL)
-const wsTwo: any = useWebSocket(
-  handleTwoMessage,
-  import.meta.env.VITE_WB_CAMERA_TWO_URL
-)
-const emit = defineEmits(['closeCamera'])
-// const ws = new WebSocket(import.meta.env.VITE_WB_CAMERA_ONE_URL)
-onMounted(() => {})
+const wsOne = ref<any>(null)
+const wsTwo = ref<any>(null)
+
+watch(cameraNumber,(newVal,oldVal)=>{
+  if (oldVal === 1 && wsOne.value) {
+    wsOne.value.handleClose()
+    wsOne.value = null
+  } else if (oldVal === 2 && wsTwo.value) {
+    wsTwo.value.handleClose()
+    wsTwo.value = null
+  }
+
+  if (newVal === 1) {
+    wsOne.value = useWebSocket(handleMessage, import.meta.env.VITE_WB_CAMERA_ONE_URL)
+  } else if (newVal === 2) {
+    wsTwo.value = useWebSocket(handleTwoMessage, import.meta.env.VITE_WB_CAMERA_TWO_URL)
+  }
+
+})
+
 const closeCamera = () => {
   cameraNumber.value = 0
   emit('closeCamera')
-}
-const closeWs = () => {
-  if (ws) {
-    ws.handleClose()
-  }
-}
-const closeWsTwo = () => {
-  if (wsTwo) {
-    wsTwo.handleClose()
+  // 关闭所有连接
+  if (wsOne.value) {
+    wsOne.value.handleClose()
+    wsOne.value = null
+  }
+  if (wsTwo.value) {
+    wsTwo.value.handleClose()
+    wsTwo.value = null
   }
 }
+
+// const ws: any = useWebSocket(handleMessage, import.meta.env.VITE_WB_CAMERA_ONE_URL)
+// const wsTwo: any = useWebSocket(
+//   handleTwoMessage,
+//   import.meta.env.VITE_WB_CAMERA_TWO_URL
+// )
+
+const emit = defineEmits(['closeCamera'])
+// const ws = new WebSocket(import.meta.env.VITE_WB_CAMERA_ONE_URL)
+onMounted(() => {})
+// const closeCamera = () => {
+//   cameraNumber.value = 0
+//   emit('closeCamera')
+// }
+// const closeWs = () => {
+//   if (ws) {
+//     ws.handleClose()
+//   }
+// }
+// const closeWsTwo = () => {
+//   if (wsTwo) {
+//     wsTwo.handleClose()
+//   }
+// }
 defineExpose({ cameraNumber })
-onUnmounted(() => {
-  closeWs()
-  closeWsTwo()
-})
+// onUnmounted(() => {
+//   closeWs()
+//   closeWsTwo()
+// })
 </script>
 
 <style scoped>

frontend/src/view/reasoning/index.vue

@@ -67,7 +67,7 @@ import collapseView from '../../components/collapseView/index.vue'
 import CameraView from '../../components/CameraView/index.vue'
 // Expand, Fold
 import { Plus, VideoCameraFilled } from '@element-plus/icons-vue'
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick, watch } from 'vue'
 // import { getModelList } from '../../api/user'
 import { useRoute } from 'vue-router'
 import useWebSocket from '../../utils/websocket'
@@ -93,6 +93,7 @@ const cameraFun = (val: number) => {
 }
 const closeCamera = () => {
   cameraShow.value = false
+  cameraViewRef.value.cameraNumber = 0
 }
 const reasoningList = ref<Array<any>>([])
 // const getModelListFun = async () => {