fix 实时监控页面搭建

src/views/equipmentList/list.vue

@@ -99,6 +99,18 @@
         </div>
       </template>
     </el-dialog>
+    <!-- 查看监控对话框 -->
+    <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>
+          <el-button type="primary" class="shrink-0">绘制区域</el-button>
+        </div>
+      </template>
+      <div class="monitor-video-wrap">
+        <video ref="monitorVideoRef" class="monitor-video" controls preload="metadata" :src="monitorVideoUrl">您的浏览器不支持视频播放</video>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -125,6 +137,13 @@ const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
 });
+const dialog1 = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const monitorVideoUrl = 'http://192.168.0.214:8088/5a0db047943df198aff98b650ac9e001.mp4';
+const monitorVideoRef = ref<HTMLVideoElement>();
 
 const initFormData = {
   id: undefined,
@@ -245,8 +264,18 @@ const handleActivate = async (row?: any) => {
 };
 
 /* 查看监控 */
-const handleSee = (row?: any) => {
+const handleSee = async (row?: any) => {
-  alert('查看监控');
+  reset();
+  const _id = row?.id || ids.value[0];
+  const res = await getDeviceInfo(_id);
+  Object.assign(form.value, res.data);
+  dialog1.visible = true;
+  dialog1.title = '修改设备';
+};
+const handleMonitorDialogClose = (done: () => void) => {
+  monitorVideoRef.value?.pause();
+  monitorVideoRef.value && (monitorVideoRef.value.currentTime = 0);
+  done();
 };
 
 /** 删除按钮操作 */
@@ -273,3 +302,48 @@ onMounted(() => {
   getList();
 });
 </script>
+
+<style scoped lang="scss">
+/* 全屏监控弹窗：占满视口、禁止外层滚动，视频在可视区内尽可能放大 */
+:deep(.monitor-dialog.el-dialog) {
+  display: flex;
+  flex-direction: column;
+  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: center;
+  justify-content: center;
+  background: #000;
+}
+
+.monitor-video {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; //cover裁剪
+  background: #000;
+}
+</style>