1、修改视频播放和地址获取的逻辑顺序

2、添加专注模式和画布锁定

src/views/military/modules/ai/aiMonitorArea/DtAiMonitorAreaList.vue

@@ -75,14 +75,16 @@
 
   // 显示组件
   function videoCheck(record) {
-    videoVisible.value = true;
     // 获取查看相机信息
-    getCameraInfo(record);
+    getCameraInfo(record).then(() => {
+      // 打开弹窗
+      videoVisible.value = true;
+    });
   }
 
   // 获取单个相机信息
   function getCameraInfo(record) {
-    defHttp.get({ url: '/military/camera/setting/queryById', params: { id: record.cameraId } }).then((res) => {
+    return defHttp.get({ url: '/military/camera/setting/queryById', params: { id: record.cameraId } }).then((res) => {
       // 获取rtsp地址
       rtspUrl.value = res.preRtsp;
     });

src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue

@@ -49,7 +49,7 @@
     const res = ipcRenderer.sendSync('closeRtsp', props.videoUrl);
     msg.value = res.msg;
   };
-
+  // 关闭窗口
   function handleCancel() {
     nextTick(() => {
       // 关闭窗口
@@ -58,13 +58,10 @@
       close();
     });
   }
-
+  // 挂载完毕打开视频
-  watch(
+  onMounted(() => {
-    () => props.videoUrl,
+    open();
-    (newVal, oldVal) => {
+  });
-      open();
-    }
-  );
 </script>
 <style lang="less" scoped>
   .mpegPlayer {

src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue

@@ -4,7 +4,14 @@
       <a-row>
         <a-col :span="24">
           <a-form-item label="监控相机" v-bind="validateInfos.cameraId">
-            <a-tree-select v-model:value="formData.cameraId" allow-clear :treeData="cameraList" :disabled="disabled" placeholder="请选择监控相机">
+            <a-tree-select
+              ref="cameraTree"
+              v-model:value="formData.cameraId"
+              allow-clear
+              :treeData="cameraList"
+              :disabled="disabled"
+              placeholder="请选择监控相机"
+            >
             </a-tree-select>
           </a-form-item>
         </a-col>
@@ -45,12 +52,12 @@
 
         <a-col :span="24">
           <a-form-item label="模型范围数据" v-bind="validateInfos.areaData">
-            <a-textarea v-model:value="formData.areaData" rows="4" placeholder="请输入模型范围数据" :disabled="disabled" />
+            <a-textarea v-model:value="formData.areaData" :rows="4" placeholder="请输入模型范围数据" :disabled="disabled" />
           </a-form-item>
         </a-col>
         <a-col :span="24">
           <a-form-item label="画图数据" v-bind="validateInfos.drawdata">
-            <a-textarea v-model:value="formData.drawdata" rows="4" placeholder="请输入画图数据" :disabled="disabled"></a-textarea>
+            <a-textarea v-model:value="formData.drawdata" :rows="4" placeholder="请输入画图数据" :disabled="disabled"></a-textarea>
           </a-form-item>
         </a-col>
         <!-- <a-col :span="24">
@@ -96,13 +103,15 @@
   // 引入视频标注组件
   import SelectCom from '../selectCom/SelectCom.vue';
 
+  // 相机选择树
+  const cameraTree = ref(null);
   // 相机地址列表
   const cameraList: any = ref([]);
   // rtsp地址
   const rtspUrl = ref('');
   // 获取单个相机信息
   function getCameraInfo() {
-    defHttp.get({ url: '/military/camera/setting/queryById', params: { id: formData.cameraId } }).then((res) => {
+    return defHttp.get({ url: '/military/camera/setting/queryById', params: { id: formData.cameraId } }).then((res) => {
       // 获取rtsp地址
       rtspUrl.value = res.preRtsp;
     });
@@ -179,9 +188,9 @@
       )
       .then((res) => {
         if (res.success) {
-          console.log(res.result);
+          // console.log(res.result);
-
           cameraList.value = handleCameraTree(res.result);
+          // console.log(cameraList);
         }
       });
   }
@@ -194,7 +203,7 @@
       let item = data[i];
       obj.title = item.name;
       obj.value = obj.key = item.id;
-      // obj.selectable = false;
+      obj.disabled = item.children ? true : false;
       if (item.children && item.children.length > 0) {
         obj.children = [];
         // obj.key = i + 1;
@@ -236,9 +245,10 @@
   const videoVisible = ref(false);
   // 显示组件
   function videoShow() {
-    videoVisible.value = true;
     // 获取监控相机信息
-    getCameraInfo();
+    getCameraInfo().then(() => {
+      videoVisible.value = true;
+    });
   }
 
   // 表单禁用

src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue

@@ -8,7 +8,6 @@
   <a-modal
     :keyboard="false"
     :maskClosable="false"
-    :mask="false"
     :forceRender="true"
     :visible="visible"
     :title="title"
@@ -22,7 +21,7 @@
     </a-row>
     <a-row class="operate_area">
       <div>
-        <a-space :size="18">
+        <a-space :size="12">
           <a-button shape="round" size="middle" @click="change(0)"> <ApiOutlined /> 退出创建</a-button>
           <a-button type="primary" shape="circle" size="large" @click="change(1)" title="创建矩形">
             <img class="icon_style" src="./assets/rect_icon.png" />
@@ -39,6 +38,8 @@
           <a-button type="primary" shape="circle" size="large" @click="change(5)" title="创建圆">
             <img class="icon_style" src="./assets/circle_icon.png" />
           </a-button>
+          <a-button type="primary" shape="round" size="middle" @click="onFocus()"><AimOutlined />专注模式</a-button>
+          <a-button type="primary" shape="round" size="middle" @click="lock()"><LinkOutlined />锁定/解锁</a-button>
           <a-button type="primary" shape="round" danger size="middle" @click="clear()"> <FormatPainterOutlined />清除标注 </a-button>
         </a-space>
       </div>
@@ -58,7 +59,7 @@
 </template>
 <script lang="ts" setup>
   import { ref, getCurrentInstance, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
-  import { ApiOutlined, FormatPainterOutlined } from '@ant-design/icons-vue';
+  import { ApiOutlined, FormatPainterOutlined, AimOutlined, LinkOutlined } from '@ant-design/icons-vue';
   const { proxy }: any = getCurrentInstance();
   const props = defineProps({
     title: {
@@ -93,6 +94,10 @@
   const { ipcRenderer } = require('electron');
   // DOM承载实例
   const mpegPlayer = ref();
+  // 参数配置对象
+  const playOption = ref({
+    decodeFirstFrame: true,
+  });
   // 消息
   const msg = ref('');
   // 播放容器
@@ -101,7 +106,7 @@
   const open = () => {
     const res = ipcRenderer.sendSync('openRtsp', props.videoUrl);
     if (res.code === 200) {
-      player.value = new MpegPlayer.VideoElement(mpegPlayer.value, res.ws);
+      player.value = new MpegPlayer.VideoElement(mpegPlayer.value, res.ws, playOption);
     }
     msg.value = res.msg;
   };
@@ -127,12 +132,18 @@
   function change(num: any) {
     instance.createType = num;
   }
-
+  // 清除标注数据
-  // 清楚标注数据
   function clear() {
     instance.setData([]);
   }
-
+  // 专注模式
+  function onFocus() {
+    instance.setFocusMode(!instance.focusMode);
+  }
+  // 锁定/解锁画布
+  function lock() {
+    instance.lock = !instance.lock;
+  }
   // 保存数据
   function save() {
     /* 保存绘制数据，用于回显 */
@@ -236,18 +247,11 @@
     }
   }
 
-  watch(
-    () => props.videoUrl,
-    (newVal, oldVal) => {
-      open();
-    }
-  );
-
   onMounted(() => {
+    // 播放视频
+    open();
     // 添加键盘事件监听
     document.addEventListener('keydown', changeSelect);
-    //打开窗口就打开监控
-    // open();
     // 载入绘图数据
     if (props.labelData == '') {
       option.value = [];
@@ -274,7 +278,7 @@
     instance.ctrlRadius = 4;
     // 图片加载完成
     instance.on('load', (src: any) => {
-      console.log('image load', src);
+      // console.log('image load', src);
     });
 
     // 添加
@@ -308,11 +312,11 @@
     // });
     // 选中
     instance.on('select', (shape: any) => {
-      console.log('选中', shape);
+      // console.log('选中', shape);
     });
     // 更新
     instance.on('updated', (result: any) => {
-      console.log('更新', result);
+      // console.log('更新', result);
     });
   });
   // 在组件卸载时移除事件监听