feat 视频位置问题修复

src/layout/components/notice/index.vue

@@ -27,7 +27,6 @@
       :title="dialog.title"
       width="500px"
       class="monitor-dialog"
-      append-to-body
       :before-close="handleMonitorDialogClose"
       fullscreen
       destroy-on-close
@@ -50,6 +49,7 @@
 import { useNoticeStore } from '@/store/modules/notice';
 import { listNotice } from '@/api/system/notice';
 import { initHls, destroyHls } from '@/utils/video';
+import { onBeforeRouteLeave } from 'vue-router';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -179,17 +179,72 @@ onMounted(() => {
     console.log('消息列表:', newsList.value);
   });
 });
+
+onBeforeRouteLeave(() => {
+  dialog.visible = false;
+  monitorVideoUrl.value = '';
+});
 </script>
 
 <style lang="scss" scoped>
 /* 全屏监控弹窗：占满视口、禁止外层滚动，视频在可视区内尽可能放大 */
-.monitor-video-stack {
+:deep(.monitor-dialog.el-dialog) {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
-  align-items: center;
+  height: 100vh;
+  max-height: 100vh;
+  margin: 0;
+  overflow: hidden;
 }
+
+:deep(.monitor-dialog .el-dialog__header) {
+  flex-shrink: 0;
+  margin-right: 0;
+}
+
+:deep(.monitor-dialog .el-dialog__body) {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.monitor-video-wrap {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  background: #000;
+}
+
+.monitor-video-stack {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
 .monitor-video {
-  height: 679px;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; //cover裁剪
+  background: #000;
+}
+
+.monitor-draw-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  cursor: crosshair;
+  background: transparent;
 }
 
 .layout-navbars-breadcrumb-user-news {

src/views/equipmentList/list.vue

@@ -112,7 +112,7 @@
     <el-dialog v-model="dialog1.visible" class="monitor-dialog" :before-close="handleMonitorDialogClose" fullscreen destroy-on-close>
       <template #header>
         <div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
-          <span class="truncate">实时监控-北门出入门监控</span>
+          <span class="truncate">实时监控</span>
           <div>
             <el-button v-if="!seeSee" type="primary" class="shrink-0" @click="drawImage()">绘制区域</el-button>
             <el-button v-if="seeSee" type="primary" class="shrink-0" @click="clearImage()">清空区域</el-button>

src/views/fileList/list.vue

@@ -14,7 +14,7 @@
             </el-form-item>
             <el-form-item label="报警时间" prop="queryTime">
               <el-date-picker
-                v-model="queryTime"
+                v-model="queryParams.queryTime"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 type="daterange"
                 range-separator="-"
@@ -51,7 +51,7 @@
         </el-row>
       </template> -->
 
-      <el-table class="monitor-dialog" v-loading="loading" border :data="demoList" @selection-change="handleSelectionChange">
+      <el-table v-loading="loading" border :data="demoList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="录像编号" align="center" prop="code" width="180" />
         <el-table-column label="文件名称" align="center" prop="videoName" min-width="170" />
@@ -71,7 +71,7 @@
       <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改测试单对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body fullscreen destroy-on-close>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" class="monitor-dialog" fullscreen destroy-on-close>
       <template #header>
         <div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
           <span class="truncate">实时监控-北门出入门监控</span>
@@ -89,6 +89,7 @@
 <script setup name="Demo" lang="ts">
 import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/fileList/index';
 import { download } from '@/utils/request';
+import { onBeforeRouteLeave } from 'vue-router';
 //import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -266,16 +267,71 @@ const handleExport = () => {
 onMounted(() => {
   getList();
 });
+
+onBeforeRouteLeave(() => {
+  dialog.visible = false;
+  monitorVideoUrl.value = '';
+});
 </script>
 
 <style lang="scss" scoped>
 /* 全屏监控弹窗：占满视口、禁止外层滚动，视频在可视区内尽可能放大 */
-.monitor-video-stack {
+:deep(.monitor-dialog.el-dialog) {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
-  align-items: center;
+  height: 100vh;
+  max-height: 100vh;
+  margin: 0;
+  overflow: hidden;
 }
+
+:deep(.monitor-dialog .el-dialog__header) {
+  flex-shrink: 0;
+  margin-right: 0;
+}
+
+:deep(.monitor-dialog .el-dialog__body) {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.monitor-video-wrap {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  background: #000;
+}
+
+.monitor-video-stack {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
 .monitor-video {
-  height: 670px;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; //cover裁剪
+  background: #000;
+}
+
+.monitor-draw-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  cursor: crosshair;
+  background: transparent;
 }
 </style>