1、视频智能监控范围表单 添加 所属场景字段

2、添加表单验证

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

@@ -18,7 +18,7 @@ export const columns: BasicColumn[] = [
     title: '监控相机',
     align: 'center',
     dataIndex: 'cameraId_dictText',
-    width: 150,
+    width: 200,
   },
   {
     title: '监控模型',
@@ -36,6 +36,11 @@ export const columns: BasicColumn[] = [
     align: 'center',
     dataIndex: 'drawdata',
   },
+  {
+    title: '所属场景',
+    align: 'center',
+    dataIndex: 'sceneId_dictText',
+  },
   // ,
   // {
   //   title: '备注',
@@ -43,11 +48,6 @@ export const columns: BasicColumn[] = [
   //   dataIndex: 'remark',
   // },
   // {
-  //   title: '备用2',
-  //   align: "center",
-  //   dataIndex: 'field2'
-  // },
-  // {
   //   title: '备用3',
   //   align: "center",
   //   dataIndex: 'field3'

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

@@ -1,3 +1,9 @@
+<!-- 
+  查看监控
+
+  目录位置：AI智能化区域监控 -> 视频智能监控范围 -> 查看监控
+  功能概述：rtsp视频流播放
+ -->
 <template>
   <a-modal :visible="visible" :title="title" width="1080px" @cancel="handleCancel" destroyOnClose>
     <a-row>

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

@@ -1,9 +1,9 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
+    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="rules" :model="formData">
       <a-row>
         <a-col :span="24">
-          <a-form-item label="监控相机" v-bind="validateInfos.cameraId">
+          <a-form-item label="监控相机" v-bind="validateInfos.cameraId" name="cameraId">
             <a-tree-select
               ref="cameraTree"
               v-model:value="formData.cameraId"
@@ -60,17 +60,22 @@
             <a-textarea v-model:value="formData.drawdata" :rows="4" placeholder="请输入画图数据" :disabled="disabled"></a-textarea>
           </a-form-item>
         </a-col>
+        <a-col :span="24">
+          <a-form-item label="所属场景" v-bind="validateInfos.sceneId" name="sceneId">
+            <!-- <a-input v-model:value="formData.sceneId" placeholder="请输入所属场景" :disabled="disabled"></a-input> -->
+            <a-select v-model:value="formData.sceneId" placeholder="请选择所属场景" :disabled="disabled">
+              <template :key="code.sceneCode" v-for="code in sceneCodeList">
+                <a-select-option :value="code.sceneCode">{{ code.sceneName }}</a-select-option>
+              </template>
+            </a-select>
+          </a-form-item>
+        </a-col>
         <!-- <a-col :span="24">
           <a-form-item label="备注" v-bind="validateInfos.remark">
             <a-input v-model:value="formData.remark" placeholder="请输入备注" :disabled="disabled"></a-input>
           </a-form-item>
         </a-col> -->
         <!-- 
-        <a-col :span="24">
-          <a-form-item label="备用2" v-bind="validateInfos.field2">
-            <a-input v-model:value="formData.field2" placeholder="请输入备用2" :disabled="disabled"></a-input>
-          </a-form-item>
-        </a-col>
         <a-col :span="24">
           <a-form-item label="备用3" v-bind="validateInfos.field3">
             <a-input v-model:value="formData.field3" placeholder="请输入备用3" :disabled="disabled"></a-input>
@@ -100,6 +105,7 @@
   import { saveOrUpdate } from '../DtAiMonitorArea.api';
   import { Form } from 'ant-design-vue';
   import locationPng from '@/assets/images/getLocation.png';
+  import type { Rule } from 'ant-design-vue/es/form';
   // 引入视频标注组件
   import SelectCom from '../selectCom/SelectCom.vue';
 
@@ -123,6 +129,15 @@
   const getmodelCodeList = () => {
     return defHttp.get({ url: '/military/dtAiModel/list' }, { isTransformResponse: false });
   };
+  // 场景编码
+  const sceneCodeList: any = ref([]);
+  // 获取场景编码
+  const getsceneCodeList = () => {
+    defHttp.get({ url: '/military/msMapScene/list' }, { isTransformResponse: false }).then((res) => {
+      sceneCodeList.value = res.result.records;
+    });
+  };
+
   const props = defineProps({
     formDisabled: { type: Boolean, default: false },
     formData: { type: Object, default: () => {} },
@@ -137,10 +152,10 @@
     modelName: '',
     areaData: '',
     drawdata: '',
+    sceneId: '',
     // rtspUrl: '',
     cameraId: undefined,
     remark: '',
-    field2: '',
     field3: '',
     sysAreaCode: '',
     sysUnitCode: '',
@@ -151,11 +166,18 @@
   const confirmLoading = ref<boolean>(false);
   //表单验证
   const validatorRules = {};
+  const rules: Record<string, Rule[]> = {
+    cameraId: [{ required: true, message: '请选择监控相机！' }],
+    modelCode: [{ required: true, message: '请输入监控模型！' }],
+    sceneId: [{ required: true, message: '请选择所属场景！' }],
+  };
   const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
 
   onMounted(() => {
     // 获取相机数据
     getCameraList();
+    // 获取场景编码
+    getsceneCodeList();
     //获取模型编码
     getmodelCodeList().then((response) => {
       if (response.success) {
@@ -286,7 +308,9 @@
    */
   async function submitForm() {
     // 触发表单验证
-    await validate();
+    // await validate();
+
+    formRef.value.validate().then(async () => {
       confirmLoading.value = true;
       const isUpdate = ref<boolean>(false);
       //时间格式化
@@ -317,6 +341,7 @@
         .finally(() => {
           confirmLoading.value = false;
         });
+    });
   }
 
   defineExpose({

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

@@ -58,7 +58,7 @@
   </a-modal>
 </template>
 <script lang="ts" setup>
-  import { ref, getCurrentInstance, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+  import { ref, getCurrentInstance, onMounted, onBeforeUnmount, nextTick } from 'vue';
   import { ApiOutlined, FormatPainterOutlined, AimOutlined, LinkOutlined } from '@ant-design/icons-vue';
   const { proxy }: any = getCurrentInstance();
   const props = defineProps({