diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue
index 9e5ce14..667935e 100644
--- a/src/views/earthMap/edit/EarthComp.vue
+++ b/src/views/earthMap/edit/EarthComp.vue
@@ -627,9 +627,6 @@
             this.clearAlarmModel(eventSerialNum)
           }
         })
-        $mitt.on('fly', function (callback) {   
-          that.fly(callback)
-        })
       }
 
 
@@ -844,7 +841,7 @@
 
       });
     }
-    async fly(callback:any = null) {
+    async fly() {
       let position, rotation, viewDistance, duration;
       //
       let parentData =
@@ -869,11 +866,6 @@
           rotation = [data.rotationX, data.rotationY, data.rotationZ];
           viewDistance = data.viewDistance;
           duration = data.duration ? data.duration : 0;
-          // 处理mitt事件
-            if(callback){
-              callback(position,rotation,viewDistance,duration);
-              return
-            }
           this._earth.camera.flyTo(position, viewDistance, rotation, duration);
           // 地图复原事件
           window.$flyTo = this.flyTo = () => {
@@ -885,11 +877,6 @@
           rotation = [parentData[0].rotationX, parentData[0].rotationY, parentData[0].rotationZ];
           viewDistance = parentData[0].viewDistance;
           duration = parentData[0].duration;
-          // 处理mitt事件
-            if(callback){
-                callback(position,rotation,viewDistance,duration);
-                return
-            }
           // 先飞入到能看见红旗
           this._earth.camera.flyTo(position, viewDistance, rotation, duration);
           // 地图复原事件
diff --git a/src/views/military/modules/ai/aiModel/DtAiModel.data.ts b/src/views/military/modules/ai/aiModel/DtAiModel.data.ts
index 47fe12f..779fe6a 100644
--- a/src/views/military/modules/ai/aiModel/DtAiModel.data.ts
+++ b/src/views/military/modules/ai/aiModel/DtAiModel.data.ts
@@ -1,54 +1,53 @@
-import {BasicColumn} from '/@/components/Table';
-import {FormSchema} from '/@/components/Table';
-import { rules} from '/@/utils/helper/validator';
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { rules } from '/@/utils/helper/validator';
 import { render } from '/@/utils/common/renderUtils';
 //列表数据
 export const columns: BasicColumn[] = [
   {
     title: '模型编号',
-    align: "center",
-    dataIndex: 'modelCode'
+    align: 'center',
+    dataIndex: 'modelCode',
   },
   {
     title: '模型名称',
-    align: "center",
-    dataIndex: 'modelName'
+    align: 'center',
+    dataIndex: 'modelName',
   },
   {
     title: '备注',
-    align: "center",
-    dataIndex: 'remark'
-  },
-  {
-    title: '备用1',
-    align: "center",
-    dataIndex: 'field1'
-  },
-  {
-    title: '备用2',
-    align: "center",
-    dataIndex: 'field2'
-  },
-  {
-    title: '备用3',
-    align: "center",
-    dataIndex: 'field3'
-  },
-  {
-    title: '所属区域',
-    align: "center",
-    dataIndex: 'sysAreaCode'
-  },
-  {
-    title: '所属单位',
-    align: "center",
-    dataIndex: 'sysUnitCode'
-  },
+    align: 'center',
+    dataIndex: 'remark',
+  },
+  // {
+  //   title: '备用1',
+  //   align: "center",
+  //   dataIndex: 'field1'
+  // },
+  // {
+  //   title: '备用2',
+  //   align: "center",
+  //   dataIndex: 'field2'
+  // },
+  // {
+  //   title: '备用3',
+  //   align: "center",
+  //   dataIndex: 'field3'
+  // },
+  // {
+  //   title: '所属区域',
+  //   align: "center",
+  //   dataIndex: 'sysAreaCode'
+  // },
+  // {
+  //   title: '所属单位',
+  //   align: "center",
+  //   dataIndex: 'sysUnitCode'
+  // },
 ];
 
 //查询数据
-export const searchFormSchema: FormSchema[] = [
-];
+export const searchFormSchema: FormSchema[] = [];
 
 //表单数据
 export const formSchema: FormSchema[] = [
@@ -92,7 +91,7 @@ export const formSchema: FormSchema[] = [
     field: 'sysUnitCode',
     component: 'Input',
   },
-	// TODO 主键隐藏字段，目前写死为ID
+  // TODO 主键隐藏字段，目前写死为ID
   {
     label: '',
     field: 'id',
diff --git a/src/views/military/modules/ai/aiModel/components/DtAiModelForm.vue b/src/views/military/modules/ai/aiModel/components/DtAiModelForm.vue
index ffc706a..34c44d7 100644
--- a/src/views/military/modules/ai/aiModel/components/DtAiModelForm.vue
+++ b/src/views/military/modules/ai/aiModel/components/DtAiModelForm.vue
@@ -17,7 +17,7 @@
             <a-input v-model:value="formData.remark" placeholder="请输入备注" :disabled="disabled"></a-input>
           </a-form-item>
         </a-col>
-        <a-col :span="24">
+        <!-- <a-col :span="24">
           <a-form-item label="备用1" v-bind="validateInfos.field1">
             <a-input v-model:value="formData.field1" placeholder="请输入备用1" :disabled="disabled"></a-input>
           </a-form-item>
@@ -41,7 +41,7 @@
           <a-form-item label="所属单位" v-bind="validateInfos.sysUnitCode">
             <a-input v-model:value="formData.sysUnitCode" placeholder="请输入所属单位" :disabled="disabled"></a-input>
           </a-form-item>
-        </a-col>
+        </a-col> -->
       </a-row>
     </a-form>
   </a-spin>
@@ -54,48 +54,46 @@
   import { getValueType } from '/@/utils';
   import { saveOrUpdate } from '../DtAiModel.api';
   import { Form } from 'ant-design-vue';
-  
+
   const props = defineProps({
     formDisabled: { type: Boolean, default: false },
-    formData: { type: Object, default: ()=>{} },
-    formBpm: { type: Boolean, default: true }
+    formData: { type: Object, default: () => {} },
+    formBpm: { type: Boolean, default: true },
   });
   const formRef = ref();
   const useForm = Form.useForm;
   const emit = defineEmits(['register', 'ok']);
   const formData = reactive<Record<string, any>>({
     id: '',
-    modelCode: '',   
-    modelName: '',   
-    remark: '',   
-    field1: '',   
-    field2: '',   
-    field3: '',   
-    sysAreaCode: '',   
-    sysUnitCode: '',   
+    modelCode: '',
+    modelName: '',
+    remark: '',
+    field1: '',
+    field2: '',
+    field3: '',
+    sysAreaCode: '',
+    sysUnitCode: '',
   });
   const { createMessage } = useMessage();
   const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
   const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
   const confirmLoading = ref<boolean>(false);
   //表单验证
-  const validatorRules = {
-  };
+  const validatorRules = {};
   const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
 
   // 表单禁用
-  const disabled = computed(()=>{
-    if(props.formBpm === true){
-      if(props.formData.disabled === false){
+  const disabled = computed(() => {
+    if (props.formBpm === true) {
+      if (props.formData.disabled === false) {
         return false;
-      }else{
+      } else {
         return true;
       }
     }
     return props.formDisabled;
   });
 
-  
   /**
    * 新增
    */
@@ -152,7 +150,6 @@
       });
   }
 
-
   defineExpose({
     add,
     edit,
diff --git a/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorArea.data.ts b/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorArea.data.ts
index 873d87c..04b8373 100644
--- a/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorArea.data.ts
+++ b/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorArea.data.ts
@@ -1,69 +1,70 @@
-import {BasicColumn} from '/@/components/Table';
-import {FormSchema} from '/@/components/Table';
-import { rules} from '/@/utils/helper/validator';
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { rules } from '/@/utils/helper/validator';
 import { render } from '/@/utils/common/renderUtils';
 //列表数据
 export const columns: BasicColumn[] = [
   {
     title: '模型编号',
-    align: "center",
-    dataIndex: 'modelCode'
+    align: 'center',
+    dataIndex: 'modelCode',
+    width: 100,
   },
   {
     title: '模型名称',
-    align: "center",
-    dataIndex: 'modelName'
+    align: 'center',
+    dataIndex: 'modelName',
   },
   {
-    title: '模型范围数据',
-    align: "center",
-    dataIndex: 'areaData'
-  },
-  {
-    title: '画图数据',
-    align: "center",
-    dataIndex: 'drawdata'
-  },
-  {
-    title: '相机id',
-    align: "center",
-    dataIndex: 'cameraId'
-  },
-  {
-    title: '备注',
-    align: "center",
-    dataIndex: 'remark'
-  },
-  {
-    title: '备用1',
-    align: "center",
-    dataIndex: 'field1'
+    title: 'rtsp地址',
+    align: 'center',
+    dataIndex: 'rtspUrl',
   },
   {
-    title: '备用2',
-    align: "center",
-    dataIndex: 'field2'
+    title: 'webrtc地址',
+    align: 'center',
+    dataIndex: 'webrtcUrl',
   },
   {
-    title: '备用3',
-    align: "center",
-    dataIndex: 'field3'
-  },
-  {
-    title: '所属区域',
-    align: "center",
-    dataIndex: 'sysAreaCode'
+    title: '模型范围数据',
+    align: 'center',
+    dataIndex: 'areaData',
   },
   {
-    title: '所属单位',
-    align: "center",
-    dataIndex: 'sysUnitCode'
-  },
+    title: '画图数据',
+    align: 'center',
+    dataIndex: 'drawdata',
+  },
+  // ,
+  // {
+  //   title: '备注',
+  //   align: 'center',
+  //   dataIndex: 'remark',
+  // },
+  // {
+  //   title: '备用2',
+  //   align: "center",
+  //   dataIndex: 'field2'
+  // },
+  // {
+  //   title: '备用3',
+  //   align: "center",
+  //   dataIndex: 'field3'
+  // },
+  // {
+  //   title: '所属区域',
+  //   align: "center",
+  //   dataIndex: 'sysAreaCode'
+  // },
+  // {
+  //   title: '所属单位',
+  //   align: "center",
+  //   dataIndex: 'sysUnitCode'
+  // },
 ];
 
 //查询数据
-export const searchFormSchema: FormSchema[] = [
-];
+export const searchFormSchema: FormSchema[] = [];
 
 //表单数据
 export const formSchema: FormSchema[] = [
@@ -88,18 +89,18 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
   },
   {
-    label: '相机id',
-    field: 'cameraId',
+    label: 'rtsp地址',
+    field: 'rtspUrl',
     component: 'Input',
   },
   {
-    label: '备注',
-    field: 'remark',
+    label: 'webrtc地址',
+    field: 'webrtcUrl',
     component: 'Input',
   },
   {
-    label: '备用1',
-    field: 'field1',
+    label: '备注',
+    field: 'remark',
     component: 'Input',
   },
   {
@@ -122,7 +123,7 @@ export const formSchema: FormSchema[] = [
     field: 'sysUnitCode',
     component: 'Input',
   },
-	// TODO 主键隐藏字段，目前写死为ID
+  // TODO 主键隐藏字段，目前写死为ID
   {
     label: '',
     field: 'id',
diff --git a/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorAreaList.vue b/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorAreaList.vue
index 9a5b0dd..3401094 100644
--- a/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorAreaList.vue
+++ b/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorAreaList.vue
@@ -53,6 +53,8 @@
     </BasicTable>
     <!-- 表单区域 -->
     <DtAiMonitorAreaModal ref="registerModal" @success="handleSuccess"></DtAiMonitorAreaModal>
+    <!-- 查看监控 -->
+    <CheckCom v-if="videoVisible"></CheckCom>
   </div>
 </template>
 
@@ -64,7 +66,13 @@
   import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './DtAiMonitorArea.api';
   import { downloadFile } from '/@/utils/common/renderUtils';
   import DtAiMonitorAreaModal from './components/DtAiMonitorAreaModal.vue';
-
+  import CheckCom from './checkCom/CheckCom.vue';
+  // 查看监控弹窗
+  const videoVisible = ref(false);
+  // 显示组件
+  function videoCheck(record) {
+    videoVisible.value = true;
+  }
   const formRef = ref();
   const queryParam = reactive<any>({});
   const toggleSearchStatus = ref<boolean>(false);
@@ -78,7 +86,7 @@
       canResize: false,
       useSearchForm: false,
       actionColumn: {
-        width: 120,
+        width: 180,
         fixed: 'right',
       },
       beforeFetch: (params) => {
@@ -156,6 +164,10 @@
    */
   function getTableAction(record) {
     return [
+      {
+        label: '查看监控',
+        onClick: videoCheck.bind(null, record),
+      },
       {
         label: '编辑',
         onClick: handleEdit.bind(null, record),
@@ -198,6 +210,10 @@
     //刷新数据
     reload();
   }
+
+  defineExpose({
+    videoVisible,
+  });
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue b/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
new file mode 100644
index 0000000..bf2292f
--- /dev/null
+++ b/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
@@ -0,0 +1,72 @@
+<template>
+  <a-modal :visible="visible" :title="title" width="1080px" @cancel="handleCancel" destroyOnClose>
+    <a-row>
+      <div class="mpegPlayer" ref="mpegPlayer"></div>
+    </a-row>
+    <template #footer="">
+      <a-button @click="handleCancel">关闭</a-button>
+    </template>
+  </a-modal>
+</template>
+<script lang="ts" setup>
+  import { ref, getCurrentInstance, onMounted, nextTick } from 'vue';
+  const { proxy }: any = getCurrentInstance();
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '查看监控',
+    },
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    // rtsp视频流地址
+    videoUrl: {
+      type: String,
+      default: 'rtsp://admin:hk123456@192.168.1.71:554/',
+    },
+  });
+
+  /* 播放rtsp视频相关 */
+  import MpegPlayer from 'jsmpeg-player';
+  const { ipcRenderer } = require('electron');
+  // DOM承载实例
+  const mpegPlayer = ref();
+  // 消息
+  const msg = ref('');
+  // 播放容器
+  let player: any = ref(null);
+  // 开启播放
+  const open = () => {
+    const res = ipcRenderer.sendSync('openRtsp', props.videoUrl);
+    if (res.code === 200) {
+      player.value = new MpegPlayer.VideoElement(mpegPlayer.value, res.ws);
+    }
+    msg.value = res.msg;
+  };
+  // 关闭播放
+  const close = () => {
+    const res = ipcRenderer.sendSync('closeRtsp', props.videoUrl);
+    msg.value = res.msg;
+  };
+
+  function handleCancel() {
+    nextTick(() => {
+      // 关闭窗口
+      proxy.$parent.videoVisible = false;
+      // 关闭播放
+      close();
+    });
+  }
+
+  onMounted(() => {
+    open();
+  });
+</script>
+<style lang="less" scoped>
+  .mpegPlayer {
+    width: 100%;
+    height: 580px;
+    background: #000;
+  }
+</style>
diff --git a/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue b/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
index 12362ea..efb245d 100644
--- a/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
+++ b/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
@@ -12,31 +12,53 @@
             <a-input v-model:value="formData.modelName" placeholder="请输入模型名称" :disabled="disabled"></a-input>
           </a-form-item>
         </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"/>
+        <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-form-item label="画图数据" v-bind="validateInfos.drawdata">
-            <a-input v-model:value="formData.drawdata" placeholder="请输入画图数据" :disabled="disabled"></a-input>
+          <a-form-item label="rtsp地址" v-bind="validateInfos.rtspUrl">
+            <a-tree-select
+              v-model:value="formData.rtspUrl"
+              @change="getvideoUrl($event, 'rtsp')"
+              allow-clear
+              :treeData="cameraList"
+              :disabled="disabled"
+              placeholder="请选择rtsp地址"
+            >
+            </a-tree-select>
           </a-form-item>
         </a-col>
         <a-col :span="24">
-          <a-form-item label="相机id" v-bind="validateInfos.cameraId">
-            <a-input v-model:value="formData.cameraId" placeholder="请输入相机id" :disabled="disabled"></a-input>
+          <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 :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 label="模型范围数据" v-bind="validateInfos.areaData">
+            <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="备用1" v-bind="validateInfos.field1">
-            <a-input v-model:value="formData.field1" placeholder="请输入备用1" :disabled="disabled"></a-input>
+          <a-form-item label="画图数据" v-bind="validateInfos.drawdata">
+            <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.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>
@@ -56,10 +78,16 @@
           <a-form-item label="所属单位" v-bind="validateInfos.sysUnitCode">
             <a-input v-model:value="formData.sysUnitCode" placeholder="请输入所属单位" :disabled="disabled"></a-input>
           </a-form-item>
-        </a-col>
+        </a-col> -->
       </a-row>
     </a-form>
   </a-spin>
+  <SelectCom
+    v-if="videoVisible"
+    :videoUrl="formData.rtspUrl"
+    v-model:labelData="formData.drawdata"
+    v-model:locationData="formData.areaData"
+  ></SelectCom>
 </template>
 
 <script lang="ts" setup>
@@ -69,51 +97,130 @@
   import { getValueType } from '/@/utils';
   import { saveOrUpdate } from '../DtAiMonitorArea.api';
   import { Form } from 'ant-design-vue';
-  
+  import locationPng from '@/assets/images/getLocation.png';
+  // 引入视频标注组件
+  import SelectCom from '../selectCom/SelectCom.vue';
+
+  // 相机地址列表
+  const cameraList: any = ref([]);
+
   const props = defineProps({
     formDisabled: { type: Boolean, default: false },
-    formData: { type: Object, default: ()=>{} },
-    formBpm: { type: Boolean, default: true }
+    formData: { type: Object, default: () => {} },
+    formBpm: { type: Boolean, default: true },
   });
   const formRef = ref();
   const useForm = Form.useForm;
   const emit = defineEmits(['register', 'ok']);
   const formData = reactive<Record<string, any>>({
     id: '',
-    modelCode: '',   
-    modelName: '',   
-    areaData: '',   
-    drawdata: '',   
-    cameraId: '',   
-    remark: '',   
-    field1: '',   
-    field2: '',   
-    field3: '',   
-    sysAreaCode: '',   
-    sysUnitCode: '',   
+    modelCode: '',
+    modelName: '',
+    areaData: '',
+    drawdata: '',
+    rtspUrl: '',
+    webrtcUrl: '',
+    remark: '',
+    field2: '',
+    field3: '',
+    sysAreaCode: '',
+    sysUnitCode: '',
   });
   const { createMessage } = useMessage();
   const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
   const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
   const confirmLoading = ref<boolean>(false);
   //表单验证
-  const validatorRules = {
-  };
+  const validatorRules = {};
   const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
 
+  onMounted(() => {
+    getCameraList();
+  });
+  // 获取所有相机列表数据
+  function getCameraList() {
+    defHttp
+      .get(
+        {
+          url: '/military/camera/site/getSiteCameraInfo',
+          params: { pageNo: 1, pageSize: 9999 },
+        },
+        {
+          isTransformResponse: false,
+        }
+      )
+      .then((res) => {
+        if (res.success) {
+          cameraList.value = handleCameraTree(res.result);
+        }
+      });
+  }
+
+  // 处理相机树状数据
+  function handleCameraTree(data, index = undefined) {
+    let arr: any = [];
+    for (let i = 0; i < data.length; i++) {
+      let obj: any = {};
+      let item = data[i];
+      obj.title = item.name;
+      obj.value = obj.key = item.id;
+      // obj.selectable = false;
+      if (item.children && item.children.length > 0) {
+        obj.children = [];
+        // obj.key = i + 1;
+        let indexValue: any = index ? index + '-' + (i + 1) : i + 1;
+        obj.children = handleCameraTree(item.children, indexValue);
+      } else {
+        // obj.key = index !== undefined ? index + '-' + (i + 1) : (i + 1) + '';
+        // let tmp = (obj.key + '').split('-').length;
+        // obj.selectable = tmp >= 3;
+      }
+      // obj.key = index !== undefined ? index + '-' + (i + 1) : (i + 1) + '';
+      arr.push(obj);
+    }
+    return arr;
+  }
+
+  // 获取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 = '';
+        }
+      });
+  }
+
+  // 标绘组件显隐
+  const videoVisible = ref(false);
+  // 显示组件
+  function videoShow() {
+    videoVisible.value = true;
+  }
+
   // 表单禁用
-  const disabled = computed(()=>{
-    if(props.formBpm === true){
-      if(props.formData.disabled === false){
+  const disabled = computed(() => {
+    if (props.formBpm === true) {
+      if (props.formData.disabled === false) {
         return false;
-      }else{
+      } else {
         return true;
       }
     }
     return props.formDisabled;
   });
 
-  
   /**
    * 新增
    */
@@ -170,11 +277,11 @@
       });
   }
 
-
   defineExpose({
     add,
     edit,
     submitForm,
+    videoVisible,
   });
 </script>
 
@@ -184,4 +291,10 @@
     overflow-y: auto;
     padding: 24px 24px 24px 24px;
   }
+  .dwImg {
+    width: 10%;
+    height: 10%;
+    margin-left: 3%;
+    cursor: pointer !important;
+  }
 </style>
diff --git a/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue b/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
new file mode 100644
index 0000000..3b95ebb
--- /dev/null
+++ b/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
@@ -0,0 +1,360 @@
+<!-- 
+  标注组件1.0
+
+  目录位置：AI智能化区域监控 -> 视频智能监控范围 -> 标注区域
+  功能概述：引入轻量级图片2d标注组件canvas-select,通过添加透明图层,与rtsp视频流结合,实现视频监控区域标注
+ -->
+<template>
+  <a-modal
+    :keyboard="false"
+    :maskClosable="false"
+    :mask="false"
+    :forceRender="true"
+    :visible="visible"
+    :title="title"
+    width="1080px"
+    @cancel="handleCancel"
+    destroyOnClose
+  >
+    <a-row class="video_area">
+      <canvas ref="canvas" class="container"></canvas>
+      <div class="mpegPlayer" ref="mpegPlayer"></div>
+    </a-row>
+    <a-row class="operate_area">
+      <div class="area_box">
+        <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="创建矩形">
+            <img class="icon_style" src="./assets/rect_icon.png" />
+          </a-button>
+          <a-button type="primary" shape="circle" size="large" @click="change(2)" title="创建多边形">
+            <img class="icon_style" src="./assets/polo_icon.png" />
+          </a-button>
+          <a-button type="primary" shape="circle" size="large" @click="change(3)" title="创建标记点">
+            <img class="icon_style" src="./assets/point_icon.png" />
+          </a-button>
+          <a-button type="primary" shape="circle" size="large" @click="change(4)" title="创建线">
+            <img class="icon_style" src="./assets/line_icon.png" />
+          </a-button>
+          <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" danger size="middle" @click="clear()"> <FormatPainterOutlined />清除标注 </a-button>
+        </a-space>
+      </div>
+    </a-row>
+    <template #footer="">
+      <a-popconfirm title="是否保存标注?" ok-text="确认" cancel-text="取消" @confirm="handleOk()" @cancel="handleCancel">
+        <a-button type="primary">保存</a-button>
+      </a-popconfirm>
+    </template>
+  </a-modal>
+</template>
+<script lang="ts" setup>
+  import { ref, getCurrentInstance, onMounted, onBeforeUnmount, nextTick } from 'vue';
+  import { ApiOutlined, FormatPainterOutlined } from '@ant-design/icons-vue';
+  const { proxy }: any = getCurrentInstance();
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '区域标注',
+    },
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    // rtsp视频流地址
+    videoUrl: {
+      type: String,
+      default: 'rtsp://admin:hk123456@192.168.1.71:554/',
+    },
+    // 绘制数据——回显
+    labelData: {
+      type: String,
+      default: '',
+    },
+    // 点位数据——传递
+    locationData: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const emit = defineEmits(['update:label-data', 'update:location-data']);
+
+  /* 播放rtsp视频相关 */
+  import MpegPlayer from 'jsmpeg-player';
+  const { ipcRenderer } = require('electron');
+  // DOM承载实例
+  const mpegPlayer = ref();
+  // 消息
+  const msg = ref('');
+  // 播放容器
+  let player: any = ref(null);
+  // 开启播放
+  const open = () => {
+    const res = ipcRenderer.sendSync('openRtsp', props.videoUrl);
+    if (res.code === 200) {
+      player.value = new MpegPlayer.VideoElement(mpegPlayer.value, res.ws);
+    }
+    msg.value = res.msg;
+  };
+  // 关闭播放
+  const close = () => {
+    const res = ipcRenderer.sendSync('closeRtsp', props.videoUrl);
+    msg.value = res.msg;
+  };
+
+  /* 标注区域相关 */
+  // 导入2d绘图插件canvas-Select
+  import CanvasSelect from 'canvas-select';
+  // canvas实例
+  const canvas = ref(null);
+  // 导入透明静态图片
+  const hideUrl = new URL('./assets/hide.png', import.meta.url).href;
+  // 标注实例
+  let instance: any = ref(null);
+  // 图形标注列表
+  const option: any = ref([]);
+
+  // 选择绘制工具
+  function change(num: any) {
+    instance.createType = num;
+  }
+
+  // 清楚标注数据
+  function clear() {
+    instance.setData([]);
+  }
+
+  // 保存数据
+  function save() {
+    /* 保存绘制数据，用于回显 */
+    // 清除所有激活状态
+    instance.dataset.forEach((item) => {
+      item.active = false;
+    });
+    // 更新标注数据到表单
+    emit('update:label-data', JSON.stringify(instance.dataset));
+    /* 保存区域界限节点数据，用于后端分析 */
+    // 二次处理
+    const newData = instance.dataset.map((item) => {
+      let typeString;
+      switch (item.type) {
+        case 1:
+          typeString = 'rect';
+          break;
+        case 2:
+          typeString = 'polygon';
+          break;
+        case 3:
+          typeString = 'dot';
+          break;
+        case 4:
+          typeString = 'line';
+          break;
+        case 5:
+          typeString = 'circle';
+          break;
+        default:
+          typeString = '';
+      }
+
+      const newShape: any = {
+        type: typeString,
+        coor: item.coor,
+      };
+
+      if (item.type === 5) {
+        // 如果type为5（circle），则添加radius属性
+        newShape.radius = item.radius;
+      }
+
+      return newShape;
+    });
+    // 更新节点数据到表单
+    emit('update:location-data', JSON.stringify(newData));
+  }
+  // 删除选中图形 backspace / 回退绘制节点 esc
+  function changeSelect(event) {
+    if (event.keyCode == 8) {
+      // 删除选中图形
+      instance.dataset = instance.dataset.filter((item) => !item.active);
+      // 更新视图
+      instance.update();
+    } else if (event.keyCode == 27) {
+      // 是否节点已删除完毕
+      let delete_status = 0;
+      // 回退绘制节点
+      instance.dataset.forEach((item) => {
+        if (item.active === true && item.creating === true) {
+          // 矩形
+          if (item.type == 1) {
+            if (item.coor.length > 1) {
+              // 回退
+              item.coor = [];
+              // 删除完毕
+              delete_status = 1;
+            }
+          }
+          // 圆形
+          else if (item.type == 5) {
+            if (item.coor.length > 1) {
+              // 回退
+              item.coor = [];
+              item.radius = 0;
+              // 删除完毕
+              delete_status = 1;
+            }
+          }
+          // 其他图形
+          else {
+            if (item.coor.length > 1) {
+              // 回退上一个节点
+              item.coor.pop();
+            } else {
+              // 删除完毕
+              delete_status = 1;
+            }
+          }
+          // 更新视图
+          instance.update();
+        }
+      });
+      if (delete_status === 1) {
+        // 删除残余数据
+        instance.dataset = instance.dataset.filter((item) => !item.active);
+        // 更新视图
+        instance.update();
+      }
+    }
+  }
+
+  onMounted(() => {
+    // 添加键盘事件监听
+    document.addEventListener('keydown', changeSelect);
+    //打开窗口就打开监控
+    open();
+    // 载入绘图数据
+    if (props.labelData == '') {
+      option.value = [];
+    } else {
+      option.value = JSON.parse(props.labelData);
+    }
+    // 创建实例
+    instance = new CanvasSelect('.container', hideUrl);
+    // 标签最大长度
+    instance.labelMaxLen = 10;
+    // 禁用滚动缩放
+    instance.scrollZoom = false;
+    // 图形数据赋值到实例
+    instance.setData(option.value);
+    // 形状边线宽度
+    instance.lineWidth = 2;
+    // 标签字体
+    instance.labelFont = '12px Arial';
+    // 标签填充颜色
+    instance.labelFillStyle = '#fa4545';
+    // 标签文字颜色
+    instance.textFillStyle = '#fff';
+    // 控制点半径
+    instance.ctrlRadius = 4;
+    // 图片加载完成
+    instance.on('load', (src: any) => {
+      console.log('image load', src);
+    });
+
+    // 添加
+    instance.on('add', (info: any) => {
+      // 添加默认标签
+      switch (instance.createType) {
+        case 1:
+          info.label = '矩形防区';
+          break;
+        case 2:
+          info.label = '多边形防区';
+          break;
+        case 3:
+          info.label = '标记点位';
+          break;
+        case 4:
+          info.label = '报警界线';
+          break;
+        case 5:
+          info.label = '圆形防区';
+          break;
+        default:
+          info.label = '未定义';
+      }
+      // 更新画布
+      instance.update();
+    });
+    // 删除 - 弃用内置删除方法
+    // instance.on('delete', (info: any) => {
+    //   console.log('删除', info);
+    // });
+    // 选中
+    instance.on('select', (shape: any) => {
+      console.log('选中', shape);
+    });
+    // 更新
+    instance.on('updated', (result: any) => {
+      console.log('更新', result);
+    });
+  });
+  // 在组件卸载时移除事件监听
+  // 考虑到你想要的是在页面卸载前移除事件监听，因此这里使用了`beforeUnmount`
+  // 如果你希望在页面卸载后再移除事件监听，可以使用`onUnmounted`
+  onBeforeUnmount(() => {
+    document.removeEventListener('keydown', changeSelect);
+  });
+  // 确定
+  async function handleOk() {
+    // 保存提交
+    save();
+    // 关闭窗口
+    handleCancel();
+  }
+  // 取消
+  function handleCancel() {
+    nextTick(() => {
+      // 关闭窗口
+      proxy.$parent.videoVisible = false;
+      // 关闭播放
+      close();
+    });
+  }
+</script>
+<style lang="less" scoped>
+  .video_area {
+    width: 100%;
+    height: 580px;
+    margin: 0 auto;
+    position: relative;
+    .container {
+      width: 1080px;
+      height: 580px;
+      position: absolute;
+      z-index: 9999;
+      left: 0;
+      top: 0;
+    }
+    .mpegPlayer {
+      width: 100%;
+      height: 100%;
+      background: #000;
+    }
+  }
+  .operate_area {
+    width: 100%;
+    margin: 10px auto;
+    .area_box {
+      margin: 0 auto;
+    }
+    .icon_style {
+      width: 24px;
+      height: 24px;
+      margin: 0 auto;
+    }
+  }
+</style>
diff --git a/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/circle_icon.png b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/circle_icon.png
new file mode 100644
index 0000000..4941739
Binary files /dev/null and b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/circle_icon.png differ
diff --git a/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/hide.png b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/hide.png
new file mode 100644
index 0000000..d7579c3
Binary files /dev/null and b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/hide.png differ
diff --git a/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/line_icon.png b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/line_icon.png
new file mode 100644
index 0000000..8202a05
Binary files /dev/null and b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/line_icon.png differ
diff --git a/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/point_icon.png b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/point_icon.png
new file mode 100644
index 0000000..376a059
Binary files /dev/null and b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/point_icon.png differ
diff --git a/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/polo_icon.png b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/polo_icon.png
new file mode 100644
index 0000000..bfd3211
Binary files /dev/null and b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/polo_icon.png differ
diff --git a/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/rect_icon.png b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/rect_icon.png
new file mode 100644
index 0000000..ead0020
Binary files /dev/null and b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/rect_icon.png differ
diff --git a/src/views/military/modules/ai/monitorArea/components/DtMonitorAreaForm.vue b/src/views/military/modules/ai/monitorArea/components/DtMonitorAreaForm.vue
index e7229ae..4f58e1f 100644
--- a/src/views/military/modules/ai/monitorArea/components/DtMonitorAreaForm.vue
+++ b/src/views/military/modules/ai/monitorArea/components/DtMonitorAreaForm.vue
@@ -75,6 +75,9 @@
   </a-spin>
   <!-- <Area v-if="mapVisible" v-model:areaData="formData.areaData" v-model:drawData="formData.drawData" ></Area> -->
   <!-- <AreaByXbsjEarthUI :visible="mapVisible" v-model:areaData="formData.areaData" v-model:drawData="formData.drawData"></AreaByXbsjEarthUI> -->
+  <!-- <EarthMapModal v-model:areaData="formData.areaData" v-model:drawData="formData.drawData" :visible="mapVisible"
+    :enableTile="false" :enablePointer="true" @closeWin="() => { mapVisible = false }" @clearAreaData="clearAreaData">
+  </EarthMapModal> -->
   <VCEarthViewer v-if="mapVisible" v-model:areaData="formData.areaData" v-model:drawData="formData.drawData"> </VCEarthViewer>
 </template>
 
@@ -91,7 +94,7 @@
   import VCEarthViewer from './VCEarthViewer.vue';
   import Area from '@/views/military/modules/ai/MonitorArea/components/Area.vue';
   import AreaByXbsjEarthUI from '@/views/military/modules/ai/MonitorArea/components/AreaByXbsjEarthUI.vue';
- 
+  import EarthMapModal from '/@/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue';
   import locationPng from '@/assets/images/getLocation.png';
 
   import { FormatPainterOutlined } from '@ant-design/icons-vue';
diff --git a/src/views/system/loginmini/CanvasVideoPage.vue b/src/views/system/loginmini/CanvasVideoPage.vue
index a1c06d4..7d56279 100644
--- a/src/views/system/loginmini/CanvasVideoPage.vue
+++ b/src/views/system/loginmini/CanvasVideoPage.vue
@@ -45,8 +45,8 @@
         <a-button type="primary" @click="save()"><FileDoneOutlined />保存</a-button>
       </div>
     </div>
-    <div class="right">
-      <pre>
+    <!-- <div class="right">
+        <pre>
             1.设置 instance.createType 指定需要创建形状类型。
 
             2.创建矩形时，按住鼠标左键拖动完成创建。
@@ -60,9 +60,8 @@
             6.鼠标滚轮缩放画布。
 
             7.选中形状，Backspace删除。
-        </pre
-      >
-    </div>
+        </pre>
+      </div> -->
   </div>
 </template>
 
@@ -95,7 +94,7 @@
   const mouseX = ref(0);
   const mouseY = ref(0);
   const isRightMouseDown = ref(false);
-  //
+
   // 开启rtsp播放
   const open = () => {
     const res = ipcRenderer.sendSync('openRtsp', rtspUrl.value);
@@ -252,7 +251,7 @@
     width: 800px;
     height: 480px;
     position: absolute;
-    z-index: 999;
+    z-index: 999999;
     left: 0;
     top: 0;
   }