添加设备实时查看功能

src/router/index.js

@@ -8,6 +8,7 @@ import UserListVue from "@/views/UserList.vue";
 import ImVue from "@/views/Im.vue";
 import CIDListVue from "@/views/CIDList.vue";
 import CIDLog from "@/views/CIDLog.vue";
+import DeviceRealVP from "@/views/DeviceRealVP.vue";
 
 const routes = [
     {
@@ -30,6 +31,11 @@ const routes = [
         name: 'Device',
         component: DeviceListVue
     },
+    {
+        path: '/deviceRealVP',
+        name: 'DeviceRealVP',
+        component: DeviceRealVP
+    },
     {
         path: '/im',
         name: 'Im',

src/views/DeviceList.vue

@@ -101,6 +101,11 @@ export default {
         console.log(e);
       }
     },
+    playRealVp(index) {
+      var id = this.tableData[index].ID;
+      localStorage.setItem("realvp_device_id", id);
+      router.push("/deviceRealVP");
+    },
     async deleteDevice(index) {
       var id = this.tableData[index].ID;
       var delete_data = {
@@ -416,7 +421,7 @@ export default {
               label="设备信息"
               width="150"
             ></el-table-column>
-            <el-table-column label="操作" width="300">
+            <el-table-column label="操作" width="350">
               <template #default="scope">
                 <el-button
                   type="primary"
@@ -436,6 +441,12 @@ export default {
                   @click.prevent="deleteDevice(scope.$index)"
                   >删除</el-button
                 >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="playRealVp(scope.$index)"
+                  >播放实时</el-button
+                >
                 <!-- <el-button type="danger" size="mini">删除</el-button> -->
               </template>
             </el-table-column>

src/views/DeviceRealVP.vue

@@ -0,0 +1,121 @@
+<template>
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/device')"
+      >设备</el-button
+    >
+  <div>
+    <!-- 使用:src绑定base64图片 -->
+    <img :src="base64Image" alt="Base64 Image" />
+  </div>
+</template>
+  <script>
+import { ref, onMounted, inject, onUnmounted } from "vue";
+import router from "@/router/index.js";
+export default {
+  data() {
+    return {
+      circleUrl:
+        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+      device_id: -1,
+      base64Image:"",
+      cnt: 0,
+      intervalId: null,
+      tokenData: {
+        token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+        to_user_id: this.to_user_id,
+      },
+      intervalId: ref(null),
+      timerId: null, // 用于存储定时器的ID
+    };
+  },
+  methods: {
+    handleMenuSelect(val) {
+      router.push(val);
+    },
+    connectWebSocket() {
+      // 连接WebSocket
+      let _this = this;
+      if (typeof WebSocket == "undefined") {
+        console.log("浏览器不支持WebSocket");
+      } else {
+        console.log("浏览器支持WebSocket");
+        let socketUrl =
+          "wss://gep.ljsea.xyz/device/get_real_time_image?device_id=" +
+          this.device_id +
+          "&token=" +
+          this.tokenData.token;
+
+        // console.log("socketUrl:", socketUrl);
+        if (this.socket != null) {
+          this.socket.close();
+          this.socket = null;
+        }
+        // 开启一个websocket服务
+        this.socket = new WebSocket(socketUrl);
+        //打开事件
+        this.socket.onopen = function () {
+          this.loading = false;
+          alert("连接成功");
+        };
+        this.socket.onerror = (error) => {
+          console.error("WebSocket Error:", error);
+        };
+        //关闭事件
+        this.socket.onclose = function () {
+          alert("连接已关闭!");
+          router.push("/user");
+        };
+        //  浏览器端收消息，获得从服务端发送过来的文本消息
+        this.socket.onmessage = async function (msg) {
+          //console.log("收到数据====" + msg.data);
+          let data = JSON.parse(msg.data); // 对收到的json数据进行解析， 类似这样的：
+          console.log("收到数据====" + data);
+          // 如果服务器端发送过来的json数据
+          if (data.type == "img") {
+            _this.base64Image = 'data:image/png;base64,'+data.data
+
+//            console.log("收到数据====" + msg.data);
+          } else if (data.type == "offline") {
+            alert("对方已下线");
+            _this.socket.close();
+            router.push("/user");
+          }
+        };
+      }
+    },
+  },
+  // 生命周期钩子,在组件挂载完成后被调用
+  mounted() {
+    this.device_id = localStorage.getItem("realvp_device_id");
+    this.connectWebSocket();
+  },
+  // 生命周期钩子,在组件卸载之前被调用
+  onUnmounted() {
+    this.socket.close();
+  },
+};
+</script>
+    <style>
+.tip {
+  color: white;
+  text-align: center;
+  border-radius: 10px;
+  font-family: sans-serif;
+  padding: 10px;
+  width: auto;
+  display: inline-block !important;
+  display: inline;
+}
+.right {
+  background-color: deepskyblue;
+}
+.left {
+  background-color: forestgreen;
+}
+</style>
+