fix:视频预览对接

src/api/videoControl/videoPreview.js

+import request from '@/utils/request'
+
+// 获取左侧树
+export function listAiRegionManage(query) {
+    return request({
+      url: '/yunshou/aiRegionManage/list',
+      method: 'get',
+      params: query
+    })
+  }
+  
+// 查询设备列表x详情
+export function detailDevice(id) {
+    return request({
+      url: `/yunshou/aiDevice/${id}`,
+      method: 'get',
+    })
+  }
+
+// 修改设备状态
+export function updateStatusDevice(query) {
+    return request({
+      url: `/yunshou/aiDevice/updateStatus`,
+      method: 'get',
+      params: query
+    })
+  }
+  
+
+// 新增设备列表
+export function addDevice(data) {
+  return request({
+    url: '/yunshou/aiDevice',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改设备列表
+export function updateDevice(data) {
+    return request({
+      url: '/yunshou/aiDevice',
+      method: 'put',
+      data: data
+    })
+  }
+  
+
+// 删除设备列表
+export function deleteDevice(ids) {
+  return request({
+    url: `/yunshou/aiDevice/${ids}`,
+    method: 'delete'
+  })
+}
+
+// 导出设备列表
+export function exportDevice(data) {
+  return request({
+    url: `/yunshou/aiDevice/export`,
+    method: 'post',
+    data: data
+  })
+}

src/views/videoControl/videoPreview/index.vue

@@ -54,7 +54,8 @@
                 shadow="hover"
               >
                 <template v-slot:default>
-                  <img src="@/assets/images/picStream.png" style="width: 100%" />
+                  <!-- <img src="@/assets/images/picStream.png" style="width: 100%" /> -->
+                  <canvas id="video" style="width: 100%" ></canvas>
                 </template>
               </el-card>
             </div>
@@ -78,7 +79,7 @@
                 shadow="hover"
               >
               <template v-slot:default>
-                <img src="@/assets/images/picStream.png" style="width: 100%" />
+                <img src="@/assets/images/default.png" style="width: 100%" />
                 <el-form :model="form" label-width="100px">
                   <el-form-item label="预警设备：">{{ form.title }} </el-form-item>
                   <el-form-item label="登录信息：">{{ form.title }}</el-form-item>
@@ -100,6 +101,9 @@
 <script setup name="Index">
 import { ArrowDown } from "@element-plus/icons-vue";
 import { Search } from "@element-plus/icons-vue";
+import '@/utils/jsmpeg.min'
+import { listAiRegionManage } from "@/api/videoControl/videoPreview";
+import { onMounted, reactive, ref, } from "vue";
 const { proxy } = getCurrentInstance();
 const algFormRef = ref(null);
 const nowText = ref("视频预览");
@@ -174,6 +178,21 @@ const filterNode = (value, data) => {
   if (!value) return true;
   return data.label.indexOf(value) !== -1;
 };
+function getTreeData() {
+  listAiRegionManage().then((res) => {
+      deptOptions.value=res.data
+  })
+}
+getTreeData()
+
+function getVideos(){
+    let canvas = document.getElementById('video')
+    let url = 'rtsp://192.168.20.211:554/av0_0'
+    let player = new JSMpeg.Player("ws://192.168.4.232:9999/rtsp?url="+btoa(url), {canvas: canvas})
+}
+onMounted(() => {
+  getVideos()
+})
 
 // function closeNow(){
 //     const routerArr=useTagsViewStore().visitedViews