fix: 视频管理,左侧树联调，视频联调

src/api/videoControl/videoPreview.js

@@ -9,6 +9,23 @@ export function listAiRegionManage(query) {
     })
   }
   
+
+// 获取左侧树
+export function videoTreeListManage(query) {
+  return request({
+    url: '/yunshou/aiRegionManage/videoTreeList',
+    method: 'get',
+    params: query
+  })
+}
+// 获取根据点位ID获取设备
+export function idDevice(id) {
+  return request({
+    url: `/yunshou/aiRegionManage/getVideoInfoById/${id}`,
+    method: 'get',
+  })
+}
+
 // 查询设备列表x详情
 export function detailDevice(id) {
     return request({
@@ -62,3 +79,4 @@ export function exportDevice(data) {
     data: data
   })
 }
+

src/components/ImageUpload/index.vue

@@ -103,7 +103,6 @@ watch(() => props.modelValue, val => {
       if (typeof item === "string") {
         if (item.indexOf(baseUrl) === -1) {
           item = { name: baseUrl + item, url: baseUrl + item };
-          console.log("🚀 ~ watch ~ item:", item)
         } else {
           item = { name: item, url: item };
         }

src/components/ImgVideoUpload/index.vue

@@ -33,6 +33,7 @@
       :before-remove="handleDelete"
       :show-file-list="false"
       :headers="headers"
+      :file-list="fileList"
       :on-preview="handlePictureCardPreview"
       :class="{ hide: fileList.length >= limit }"
     >
@@ -61,6 +62,7 @@
       append-to-body
     >
       <video
+        width="100%"
         v-if="getFileType(dialogImageUrl)=='video'"
         :src="dialogImageUrl"
         controls
@@ -151,6 +153,7 @@ watch(() => props.modelValue, val => {
 
 // 上传前loading加载
 function handleBeforeUpload(file) {
+  console.log("🚀 ~ handleBeforeUpload ~ file:", file)
   let isImg = false;
   if (props.fileType.length) {
     let fileExtension = "";

src/views/algorithmControl/components/form.vue

@@ -275,7 +275,7 @@
               </el-row>
               <el-row :gutter="10" class="mb8">
                 <el-col :span="24">
-                  <el-form-item label-width="130px" label="在线体验案例图片/视频" prop="algorithmBannerVideo">
+                  <el-form-item label-width="130px" label="在线体验案例图片/视频" prop="imgVideoData">
                     <ImgVideoUpload 
                     :modelValue="imgVideoData"
                      :fileType="['png', 'jpg', 'mp4']"
@@ -515,6 +515,7 @@ function getImageUrl(url){
     form.value.cardImg=url
 }
 function getAlgorithmBannerVideo(url){
+  console.log("🚀 ~ getAlgorithmBanner ~ url:", url)
     form.value.algorithmBannerVideo=url
 }
 function getAlgorithmBanner(url){

src/views/algorithmList/components/details.vue

@@ -69,6 +69,7 @@
                        </video>
                     </div>
                     <ImgVideoUpload 
+                      v-if="form.algorithmStatus=='0'"
                       style="position: absolute;bottom: 5px;left: 26%;" 
                       :modelValue="uploadUrl" 
                       :fileType="['png', 'jpg', 'mp4']"
@@ -77,6 +78,9 @@
                       :isShowTip="false"
                       @update:modelObj="getImgObj"
                      />
+                     <div  v-else style="position: absolute;bottom: 5px;left: 26%;" class="text-style">
+                      请开启算法
+                     </div>
                     <!-- <ImageUpload :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/> -->
                   </div>
                 </el-card>
@@ -93,7 +97,7 @@
                         <source :src="'http://192.168.3.82'+nowImg" type="video/mp4" />
                     </video>
                   </div>
-                  <el-button type="primary" plain @click="openIdentify" style="margin: 10px 0;">开始识别</el-button>
+                  <el-button v-if="form.algorithmStatus=='0'" type="primary" plain @click="openIdentify" style="margin: 10px 0;">开始识别</el-button>
                 </el-card>
                 <el-card >
                   <div class="text-style" style="margin: 10px 0;">
@@ -110,8 +114,10 @@
                     </video>
                   </div>
                   <div style="display: flex;justify-content: space-between;margin: 10px 0;">
-                    <el-button type="primary" plain>重置区域</el-button>
-                    <el-button type="primary" plain>下载识别视频</el-button>
+                    <!-- <el-button type="primary" plain>重置区域</el-button> -->
+                     <div></div>
+                    <el-button type="primary" plain @click="downVideo">下载识别视频</el-button>
+                    <!-- <el-button v-if="getFileType(outFilePath)=='1'" type="primary" plain @click="downVideo">下载识别视频</el-button> -->
                   </div>
                 </el-card>
           </div>
@@ -269,6 +275,12 @@ function getFileType(fileName) {
       return "0";
     }
 }
+
+function downVideo(){
+  window.open(baseUrl+'/algorithm/images/ResDir/2024/9/2/1830503463524630529/Safety helmet wearing detection/1725261009531_1.mp4')
+
+}
+
 getDetials()
 
 </script>

src/views/algorithmList/index.vue

@@ -53,30 +53,35 @@
                   <el-button
                      type="primary"
                      plain
+                     @click="handState('')"
                   >全部</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
+                    @click="handState('0')"
                   >运行中</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
+                     @click="handState('1')"
                   >已禁用</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
+                     @click="handState('2')"
                   >已下载</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
+                     @click="handState('3')"
                   >已删除</el-button>
                </el-col>
             </el-row>
@@ -187,14 +192,9 @@
     // console.log("🚀 ~ handDetails ~ row:", row)
     router.push("/algorithmList/details/info/" + row.id);
   }
-  function handleSetSize(row) {
-    // reset();
-    // const postId = row.postId || ids.value;
-    // getPost(postId).then(response => {
-    //   form.value = response.data;
-    //   open.value = true;
-    //   title.value = "修改岗位";
-    // });
+  function handState(state) {
+    queryParams.value.algorithmStatus=state
+    getList()
   }
   function handleUpdate(row) {
     algorithmDownRef.value.handleUpdate(row)

src/views/videoControl/videoPreview/index.vue

@@ -100,7 +100,7 @@
 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 { listAiRegionManage,videoTreeListManage,idDevice } from "@/api/videoControl/videoPreview";
 import { listAlarm } from "@/api/alarmControl/index.js";
 import { onMounted, reactive, ref, } from "vue";
 const { proxy } = getCurrentInstance();
@@ -110,48 +110,8 @@ const nowText = ref("视频预览");
 const deptTreeRef = ref(null);
 const deptName = ref("");
 const deptOptions = ref(undefined);
-const algorithmList = ref([
-  {
-    name: "我的算法",
-    value: 1,
-  },
-  {
-    name: "最新算法",
-    value: 2,
-  },
-  {
-    name: "基础算法",
-    value: 3,
-  },
-  {
-    name: "智慧煤矿",
-    value: 4,
-  },
-  {
-    name: "智慧能源",
-    value: 5,
-  },
-  {
-    name: "智慧校园",
-    value: 6,
-  },
-  {
-    name: "智慧港口",
-    value: 7,
-  },
-  {
-    name: "智慧煤矿",
-    value: 8,
-  },
-  {
-    name: "智慧能源",
-    value: 9,
-  },
-  {
-    name: "智慧校园",
-    value: 10,
-  },
-]);
+const algorithmList = ref([]);
+const player=ref(null);
 const data = reactive({
   form: {
     title:'测试测试测试'
@@ -180,7 +140,8 @@ const filterNode = (value, data) => {
   return data.label.indexOf(value) !== -1;
 };
 function getTreeData() {
-  listAiRegionManage().then((res) => {
+  videoTreeListManage().then((res) => {
+      console.log("🚀 ~ videoTreeListManage ~ res:", res)
       deptOptions.value=res.data
   })
 }
@@ -191,12 +152,26 @@ function getWaringData() {
 }
 getTreeData()
 getWaringData()
-function getVideos(){
+function getVideos(str){
     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})
+    let url = str?str:'rtsp://192.168.20.211:554/av0_0'
+    player.value = new JSMpeg.Player("ws://192.168.4.232:9999/rtsp?url="+btoa(url), {canvas: canvas})
+    player.value.play()
 }
+
+// // 当需要重新加载视频流时，可以调用以下函数
+// function reloadVideoStream(str) {
+//     let canvas = document.getElementById('video')
+//     var ctx = canvas.getContext('2d');
+//     ctx.clearRect(0, 0, canvas.width, canvas.height);
+//     // 更新视频流URL
+//     player.value = new JSMpeg.Player("ws://192.168.4.232:9999/rtsp?url="+btoa(str), {canvas: canvas})
+ 
+//     // 开始解码新的视频流
+//     player.value.play();
+// }
 onMounted(() => {
+  // player.value.play()//播放
   getVideos()
 })
 
@@ -205,6 +180,11 @@ watch(deptName, (val) => {
 })
 
 function handleNodeClick(row) {
+  const treeType = row.id.split("-")[0];
+  const treeID = row.id.split("-")[1];
+  if(treeType=='点位'){
+    handlvideoPath(treeID)
+  }
 }
 
 function handAdd(row) {
@@ -216,9 +196,10 @@ function handleSetSize(row) {
 function handleUpdate(row) {
 }
 
-/** 删除按钮操作 */
-function handleDelete(row) {
-
+function handlvideoPath(id) {
+  idDevice(id).then((res) => {
+    getVideos(res.data.videoUrl)
+  })
 }
 </script>