关闭弹窗后关闭流

klp-ui/src/views/index.vue

@@ -129,13 +129,13 @@ export default {
           bgColor: 'bg-indigo-500',
           link: '/system/menu'
         },
-        {
-          title: 'WebSocket测试',
-          description: '实时通信功能测试',
-          icon: 'fas fa-comments',
-          bgColor: 'bg-teal-500',
-          link: '/websocket-test.html'
-        }
+        // {
+        //   title: 'WebSocket测试',
+        //   description: '实时通信功能测试',
+        //   icon: 'fas fa-comments',
+        //   bgColor: 'bg-teal-500',
+        //   link: '/websocket-test.html'
+        // }
       ],
       resourceCharts: [
         { name: 'CPU使用率', value: 65 },

klp-ui/src/views/wms/video/index.vue

@@ -139,14 +139,21 @@
       </div>
     </el-dialog>
 
-    <el-dialog :title="title" :visible.sync="openVideo" width="800px" append-to-body>
+    <el-dialog 
+      :title="title" 
+      :visible.sync="openVideo" 
+      width="800px" 
+      v-loading="loading" 
+      element-loading-text="正在加载视频流..." 
+      @close="handleCloseVideo"
+      append-to-body>
       <vue-flv-player :autoplay="true" :controls="true" :muted="true" ref="myPlayer" :source="videoUrl" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { listCameraManagement, getCameraManagement, delCameraManagement, addCameraManagement, updateCameraManagement, getFlvVideoStream } from "@/api/wms/cameraManagement";
+import { listCameraManagement, getCameraManagement, delCameraManagement, addCameraManagement, updateCameraManagement, getFlvVideoStream, closeVideoStream } from "@/api/wms/cameraManagement";
 
 export default {
   name: "CameraManagement", 
@@ -314,9 +321,22 @@ export default {
       }, `cameraManagement_${new Date().getTime()}.xlsx`)
     },
     handlePlay(row) {
+      this.loading = true;
+      this.openVideo = true;
+      this.form = row;
       getFlvVideoStream(row.cameraId).then(response => {
-        console.log(response);
-        this.videoUrl = response.data;
+        this.videoUrl = response.data.httpFmp4;
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+        this.$modal.msgError("获取视频流失败");
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    handleCloseVideo() {
+      closeVideoStream(this.form.cameraId).then(response => {
+        this.$modal.msgSuccess("关闭成功");
       });
     }
   }