修改表单，视频流地址通过相机id获取

src/views/military/modules/ai/aiMonitorArea/DtAiMonitorArea.data.ts

@@ -4,26 +4,27 @@ import { rules } from '/@/utils/helper/validator';
 import { render } from '/@/utils/common/renderUtils';
 //列表数据
 export const columns: BasicColumn[] = [
+  // {
+  //   title: '模型名称',
+  //   align: 'center',
+  //   dataIndex: 'modelName',
+  // },
+  // {
+  //   title: 'rtsp地址',
+  //   align: 'center',
+  //   dataIndex: 'rtspUrl',
+  // },
   {
-    title: '模型编号',
-    align: 'center',
-    dataIndex: 'modelCode',
-    width: 100,
-  },
-  {
-    title: '模型名称',
-    align: 'center',
-    dataIndex: 'modelName',
-  },
-  {
-    title: 'rtsp地址',
+    title: '监控相机',
     align: 'center',
-    dataIndex: 'rtspUrl',
+    dataIndex: 'cameraId_dictText',
+    width: 150,
   },
   {
-    title: 'webrtc地址',
+    title: '监控模型',
     align: 'center',
-    dataIndex: 'webrtcUrl',
+    dataIndex: 'modelCode_dictText',
+    width: 150,
   },
   {
     title: '模型范围数据',

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

@@ -54,7 +54,7 @@
     <!-- 表单区域 -->
     <DtAiMonitorAreaModal ref="registerModal" @success="handleSuccess"></DtAiMonitorAreaModal>
     <!-- 查看监控 -->
-    <CheckCom v-if="videoVisible"></CheckCom>
+    <CheckCom v-if="videoVisible" :videoUrl="rtspUrl"></CheckCom>
   </div>
 </template>
 
@@ -67,12 +67,27 @@
   import { downloadFile } from '/@/utils/common/renderUtils';
   import DtAiMonitorAreaModal from './components/DtAiMonitorAreaModal.vue';
   import CheckCom from './checkCom/CheckCom.vue';
+  import { defHttp } from '/@/utils/http/axios';
   // 查看监控弹窗
   const videoVisible = ref(false);
+  // rtsp视频地址
+  const rtspUrl = ref('');
+
   // 显示组件
   function videoCheck(record) {
     videoVisible.value = true;
+    // 获取查看相机信息
+    getCameraInfo(record);
   }
+
+  // 获取单个相机信息
+  function getCameraInfo(record) {
+    defHttp.get({ url: '/military/camera/setting/queryById', params: { id: record.cameraId } }).then((res) => {
+      // 获取rtsp地址
+      rtspUrl.value = res.preRtsp;
+    });
+  }
+
   const formRef = ref();
   const queryParam = reactive<any>({});
   const toggleSearchStatus = ref<boolean>(false);

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

@@ -9,7 +9,7 @@
   </a-modal>
 </template>
 <script lang="ts" setup>
-  import { ref, getCurrentInstance, onMounted, nextTick } from 'vue';
+  import { ref, getCurrentInstance, onMounted, nextTick, watch } from 'vue';
   const { proxy }: any = getCurrentInstance();
   const props = defineProps({
     title: {
@@ -23,7 +23,7 @@
     // rtsp视频流地址
     videoUrl: {
       type: String,
-      default: 'rtsp://admin:hk123456@192.168.1.71:554/',
+      default: '',
     },
   });
 
@@ -59,9 +59,12 @@
     });
   }
 
-  onMounted(() => {
+  watch(
+    () => props.videoUrl,
+    (newVal, oldVal) => {
       open();
-  });
+    }
+  );
 </script>
 <style lang="less" scoped>
   .mpegPlayer {

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

@@ -3,21 +3,33 @@
     <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
       <a-row>
         <a-col :span="24">
-          <a-form-item label="模型编号" v-bind="validateInfos.modelCode">
-            <a-input v-model:value="formData.modelCode" placeholder="请输入模型编号" :disabled="disabled"></a-input>
+          <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>
           </a-form-item>
         </a-col>
         <a-col :span="24">
+          <a-form-item label="监控模型" v-bind="validateInfos.modelCode" name="modelCode">
+            <!-- <a-input v-model:value="formData.modelCode" placeholder="请输入模型编号" :disabled="disabled"></a-input> -->
+            <a-select v-model:value="formData.modelCode" placeholder="请选择监控模型" :disabled="disabled">
+              <template :key="code.modelCode" v-for="code in modelCodeList">
+                <a-select-option :value="code.modelCode">{{ code.modelName }}</a-select-option>
+              </template>
+            </a-select>
+          </a-form-item>
+        </a-col>
+
+        <!-- <a-col :span="24">
           <a-form-item label="模型名称" v-bind="validateInfos.modelName">
             <a-input v-model:value="formData.modelName" placeholder="请输入模型名称   " :disabled="disabled"></a-input>
           </a-form-item>
-        </a-col>
+        </a-col> -->
         <a-col :span="24" v-show="!disabled">
           <a-form-item label="标注区域">
             <img :src="locationPng" @click="videoShow" class="dwImg" alt="绘制标注数据" />
           </a-form-item>
         </a-col>
-        <a-col :span="24">
+        <!-- <a-col :span="24">
           <a-form-item label="rtsp地址" v-bind="validateInfos.rtspUrl">
             <a-tree-select
               v-model:value="formData.rtspUrl"
@@ -29,20 +41,8 @@
             >
             </a-tree-select>
           </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="webrtc地址" v-bind="validateInfos.webrtcUrl">
-            <a-tree-select
-              v-model:value="formData.webrtcUrl"
-              @change="getvideoUrl($event, 'webrtc')"
-              allow-clear
-              :treeData="cameraList"
-              :disabled="disabled"
-              placeholder="请选择webrtc地址"
-            >
-            </a-tree-select>
-          </a-form-item>
-        </a-col>
+        </a-col> -->
+
         <a-col :span="24">
           <a-form-item label="模型范围数据" v-bind="validateInfos.areaData">
             <a-textarea v-model:value="formData.areaData" rows="4" placeholder="请输入模型范围数据" :disabled="disabled" />
@@ -82,12 +82,7 @@
       </a-row>
     </a-form>
   </a-spin>
-  <SelectCom
-    v-if="videoVisible"
-    :videoUrl="formData.rtspUrl"
-    v-model:labelData="formData.drawdata"
-    v-model:locationData="formData.areaData"
-  ></SelectCom>
+  <SelectCom v-if="videoVisible" :videoUrl="rtspUrl" v-model:labelData="formData.drawdata" v-model:locationData="formData.areaData"></SelectCom>
 </template>
 
 <script lang="ts" setup>
@@ -103,7 +98,22 @@
 
   // 相机地址列表
   const cameraList: any = ref([]);
+  // rtsp地址
+  const rtspUrl = ref('');
+  // 获取单个相机信息
+  function getCameraInfo() {
+    defHttp.get({ url: '/military/camera/setting/queryById', params: { id: formData.cameraId } }).then((res) => {
+      // 获取rtsp地址
+      rtspUrl.value = res.preRtsp;
+    });
+  }
 
+  // 模型编码
+  const modelCodeList: any = ref([]);
+  // 获取模型编码
+  const getmodelCodeList = () => {
+    return defHttp.get({ url: '/military/dtAiModel/list' }, { isTransformResponse: false });
+  };
   const props = defineProps({
     formDisabled: { type: Boolean, default: false },
     formData: { type: Object, default: () => {} },
@@ -114,12 +124,12 @@
   const emit = defineEmits(['register', 'ok']);
   const formData = reactive<Record<string, any>>({
     id: '',
-    modelCode: '',
+    modelCode: undefined,
     modelName: '',
     areaData: '',
     drawdata: '',
-    rtspUrl: '',
-    webrtcUrl: '',
+    // rtspUrl: '',
+    cameraId: undefined,
     remark: '',
     field2: '',
     field3: '',
@@ -135,7 +145,25 @@
   const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
 
   onMounted(() => {
+    // 获取相机数据
     getCameraList();
+    //获取模型编码
+    getmodelCodeList().then((response) => {
+      if (response.success) {
+        // console.log(response.result.records);
+        let res: any = [];
+        response.result.records.forEach((item) => {
+          let ele = {
+            modelCode: item.modelCode,
+            modelName: item.modelName,
+          };
+          res.push(ele);
+        });
+        if (res.length == response.result.records.length) {
+          modelCodeList.value = res;
+        }
+      }
+    });
   });
   // 获取所有相机列表数据
   function getCameraList() {
@@ -151,6 +179,8 @@
       )
       .then((res) => {
         if (res.success) {
+          console.log(res.result);
+
           cameraList.value = handleCameraTree(res.result);
         }
       });
@@ -182,31 +212,33 @@
   }
 
   // 获取rtspUrl - 根据站点id获取信息
-  function getvideoUrl(event, urlType) {
-    defHttp
-      .get(
-        {
-          url: '/military/camera/setting/queryById',
-          params: { id: event },
-        },
-        { isTransformResponse: false }
-      )
-      .then((res) => {
-        if (urlType == 'rtsp') {
-          formData.rtspUrl = res.result.preRtsp;
-          formData.webrtcUrl = '';
-        } else {
-          formData.webrtcUrl = res.result.webcastAddress;
-          formData.rtspUrl = '';
-        }
-      });
-  }
+  // function getvideoUrl(event, urlType) {
+  //   defHttp
+  //     .get(
+  //       {
+  //         url: '/military/camera/setting/queryById',
+  //         params: { id: event },
+  //       },
+  //       { isTransformResponse: false }
+  //     )
+  //     .then((res) => {
+  //       if (urlType == 'rtsp') {
+  //         formData.rtspUrl = res.result.preRtsp;
+  //         formData.webrtcUrl = '';
+  //       } else {
+  //         formData.webrtcUrl = res.result.webcastAddress;
+  //         formData.rtspUrl = '';
+  //       }
+  //     });
+  // }
 
   // 标绘组件显隐
   const videoVisible = ref(false);
   // 显示组件
   function videoShow() {
     videoVisible.value = true;
+    // 获取监控相机信息
+    getCameraInfo();
   }
 
   // 表单禁用

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

@@ -21,7 +21,7 @@
       <div class="mpegPlayer" ref="mpegPlayer"></div>
     </a-row>
     <a-row class="operate_area">
-      <div class="area_box">
+      <div>
         <a-space :size="18">
           <a-button shape="round" size="middle" @click="change(0)"> <ApiOutlined /> 退出创建</a-button>
           <a-button type="primary" shape="circle" size="large" @click="change(1)" title="创建矩形">
@@ -42,6 +42,12 @@
           <a-button type="primary" shape="round" danger size="middle" @click="clear()"> <FormatPainterOutlined />清除标注 </a-button>
         </a-space>
       </div>
+      <div>
+        <a-card size="small" :bordered="false" style="width: 200px; height: 80px">
+          <p>1.ESC键回退节点</p>
+          <p>2.BackSpace键删除图形</p>
+        </a-card>
+      </div>
     </a-row>
     <template #footer="">
       <a-popconfirm title="是否保存标注?" ok-text="确认" cancel-text="取消" @confirm="handleOk()" @cancel="handleCancel">
@@ -51,7 +57,7 @@
   </a-modal>
 </template>
 <script lang="ts" setup>
-  import { ref, getCurrentInstance, onMounted, onBeforeUnmount, nextTick } from 'vue';
+  import { ref, getCurrentInstance, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
   import { ApiOutlined, FormatPainterOutlined } from '@ant-design/icons-vue';
   const { proxy }: any = getCurrentInstance();
   const props = defineProps({
@@ -66,7 +72,7 @@
     // rtsp视频流地址
     videoUrl: {
       type: String,
-      default: 'rtsp://admin:hk123456@192.168.1.71:554/',
+      default: '',
     },
     // 绘制数据——回显
     labelData: {
@@ -230,11 +236,18 @@
     }
   }
 
+  watch(
+    () => props.videoUrl,
+    (newVal, oldVal) => {
+      open();
+    }
+  );
+
   onMounted(() => {
     // 添加键盘事件监听
     document.addEventListener('keydown', changeSelect);
     //打开窗口就打开监控
-    open();
+    // open();
     // 载入绘图数据
     if (props.labelData == '') {
       option.value = [];
@@ -331,6 +344,7 @@
     height: 580px;
     margin: 0 auto;
     position: relative;
+    background: #000;
     .container {
       width: 1080px;
       height: 580px;
@@ -347,10 +361,9 @@
   }
   .operate_area {
     width: 100%;
-    margin: 10px auto;
-    .area_box {
-      margin: 0 auto;
-    }
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
     .icon_style {
       width: 24px;
       height: 24px;