视频全屏

src/components/Dialog/index.vue

@@ -20,6 +20,7 @@
           <i :class="tags && tags.length > 0 ? 'collectFill' : 'collect'" @click="handleShowAddTag" />
         </div>
       </div>
+      <div v-if="showFull" class="full-btn" @click="handleFull" />
       <i class="decoration" />
       <i class="dialog-close" @click="closeDialog" />
     </div>
@@ -66,6 +67,8 @@ interface Props {
   headerType?: string;
   getTagId?: string;
   draggable?: boolean;
+  showFull?: boolean;
+  fullScreen?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
@@ -74,10 +77,13 @@ const props = withDefaults(defineProps<Props>(), {
   confirmText: '确定',
   hideFooter: false
 });
+const full = ref(false);
 const containerScale = inject('containerScale');
-const emit = defineEmits(['update:modelValue', 'close', 'confirm', 'changeTagsData']);
+const emit = defineEmits(['update:modelValue', 'close', 'confirm', 'changeTagsData', 'changeFull']);
 const computedWidth = computed(() => {
-  if (!!props.width) {
+  if (full.value || props.fullScreen) {
+    return '8960px';
+  } else if (!!props.width) {
     return props.width;
   } else if (props.type === 'xs') {
     return '1080px';
@@ -92,7 +98,9 @@ const computedWidth = computed(() => {
   }
 });
 const computedHeight = computed(() => {
-  if (!!props.height) {
+  if (full.value || props.fullScreen) {
+    return '2520px';
+  } else if (!!props.height) {
     return props.height;
   } else if (props.type === 'xs') {
     return '435px';
@@ -137,6 +145,10 @@ let showAddTag = ref(false);
 const handleShowAddTag = () => {
   showAddTag.value = true;
 };
+const handleFull = () => {
+  full.value = !full.value;
+  emit('changeFull', full.value);
+};
 const getData = (needUpdate?: boolean) => {
   getVideoTagInfo({ video_code: props.getTagId }).then((res) => {
     tags.value = res.data;
@@ -362,4 +374,15 @@ onMounted(() => {
   display: flex;
   flex-wrap: wrap;
 }
+.full-btn {
+  position: absolute;
+  top: 20px;
+  right: 130px;
+  width: 34px;
+  height: 34px;
+  background: url('@/assets/images/video/enlarge.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+  z-index: 9;
+}
 </style>

src/components/HKVideo/index2.vue

@@ -50,6 +50,7 @@
     <video-dialog
       v-if="showFullScreenDialog"
       v-model="showFullScreenDialog"
+      :fullScreen="fullScreen"
       :video-monitor-data="dot_data"
       :is-no-live="isNoLive"
       @change-tags-data="getData"
@@ -84,6 +85,7 @@ interface Props {
   isIndex?: boolean;
   hiddenCollect?: boolean;
   isNoLive?: boolean;
+  fullScreen?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {});

src/components/HKVideo/video-dialog.vue

@@ -6,6 +6,7 @@
     :title="videoMonitorData.name ? videoMonitorData.name : '视频'"
     :get-tag-id="isNoLive ? '' : videoMonitorData.video_code"
     hide-footer
+    :fullScreen="fullScreen"
     draggable
     @changeTagsData="changeTagsData"
     @close="handleClose"
@@ -21,6 +22,7 @@ interface Props {
   modelValue: boolean;
   isNoLive?: boolean;
   videoMonitorData: any;
+  fullScreen?: boolean;
 }
 
 const props = defineProps<Props>();

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog custom-show type="xl" title="视频监控" class="dialog" height="1330px" hide-footer draggable @close="reset">
+  <Dialog custom-show type="xl" title="视频监控" class="dialog" height="1330px" showFull hide-footer draggable @changeFull="handleFull" @close="reset">
     <div class="search-box">
       <div class="box-left">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-position="left">
@@ -67,7 +67,13 @@
     </div>
     <div class="border"></div>
     <div class="video-list2">
-      <div v-for="(item, index) in dialogListData" :key="index" class="video-box" @click="selectItem(item)">
+      <div
+        v-for="(item, index) in dialogListData"
+        :key="index"
+        class="video-box"
+        :style="{ width: videoParams.width, height: videoParams.height, marginRight: videoParams.margin }"
+        @click="selectItem(item)"
+      >
         <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center">
           <div v-if="editVideo">
             <div v-if="item.edit" class="active-tag" />
@@ -77,7 +83,7 @@
               <span class="label">{{ item.name }}</span>
             </div>
           </div>
-          <HKVideo v-else :dot_data="item" autoplay :is-index="item.isUserVideos" @change="(data) => handleUpdateTags(item, data)" />
+          <HKVideo v-else :dot_data="item" autoplay fullScreen :is-index="item.isUserVideos" @change="(data) => handleUpdateTags(item, data)" />
         </div>
       </div>
     </div>
@@ -253,6 +259,26 @@ const getUserPoint = () => {
     editData.value = res.data.videoInfos;
   });
 };
+const videoParams = ref({
+  width: '790px',
+  height: '356px',
+  margin: '35.06px'
+});
+const handleFull = (flag) => {
+  if (flag) {
+    videoParams.value = {
+      width: '2140px',
+      height: '960px',
+      margin: '80px'
+    };
+  } else {
+    videoParams.value = {
+      width: '790px',
+      height: '356px',
+      margin: '35.06px'
+    };
+  }
+};
 onMounted(() => {
   getList();
   getUserPoint();
@@ -278,6 +304,7 @@ onMounted(() => {
   .video-box {
     width: 790px;
     height: 356px;
+    width: 25%;
     margin-right: 35.06px;
     cursor: pointer;
     cursor: pointer;
@@ -292,7 +319,7 @@ onMounted(() => {
     align-items: center;
     &:nth-child(4),
     &:nth-child(8) {
-      margin-right: 0;
+      margin-right: 0 !important;
     }
     .video-label {
       position: absolute;

src/views/globalMap/RightMenu/OnlinePlotting/LayerDetail.vue

@@ -234,6 +234,7 @@ onMounted(() => {
   background-size: 100% 100%;
   padding: 0 5px;
   display: flex;
+  justify-content: center;
   align-items: center;
   cursor: pointer;
   .icon1 {