视频监控全屏

src/components/Dialog/index.vue

@@ -21,6 +21,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>
@@ -68,7 +69,10 @@ interface Props {
   getTagId?: string;
   draggable?: boolean;
   customClass?: string;
+  showFull?: boolean;
+  fullScreen?: boolean;
 }
+const full = ref(false);
 const containerScale = inject('containerScale');
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
@@ -77,9 +81,11 @@ const props = withDefaults(defineProps<Props>(), {
   confirmText: '确定',
   hideFooter: false
 });
-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 '100%';
+  } else if (!!props.width) {
     return props.width;
   } else if (!!props.width) {
     return props.width;
@@ -96,7 +102,9 @@ const computedWidth = computed(() => {
   }
 });
 const computedHeight = computed(() => {
-  if (!!props.height) {
+  if (full.value || props.fullScreen) {
+    return '100%';
+  } else if (!!props.height) {
     return props.height;
   } else {
     return 'auto';
@@ -144,6 +152,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;
@@ -373,4 +385,15 @@ onMounted(() => {
   display: flex;
   flex-wrap: wrap;
 }
+.full-btn {
+  position: absolute;
+  top: 6px;
+  right: 30px;
+  width: 14px;
+  height: 14px;
+  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"
       :videoMonitorData="dot_data"
       :isNoLive="isNoLive"
       style="height: 680px"
@@ -85,6 +86,7 @@ interface Props {
   isIndex?: boolean;
   hiddenCollect?: boolean;
   isNoLive?: boolean;
+  fullScreen?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {});

src/components/HKVideo/video-dialog.vue

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

src/views/duty/eventing/CloseEventDialog.vue

@@ -195,7 +195,7 @@ const submitForm = () => {
         proxy?.$modal.msgSuccess(res.msg);
         closeDialog();
       });
-    };
+    }
   });
 };
 

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -1,98 +1,106 @@
 <template>
-  <Dialog custom-show type="xl" title="视频监控" class="dialog" hide-footer draggable @close="reset">
-    <div class="search-box">
-      <div class="box-left">
-        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-position="left">
-          <el-form-item label="区划" prop="area_code" label-width="30px">
-            <el-select
-              v-model="queryParams.area_code"
-              class="custom-select"
-              popper-class="custom-select-popper"
-              :teleported="false"
-              style="width: 150px; margin-left: 10px"
-            >
-              <el-option label="茂名市" value="" />
-              <el-option v-for="item in district_type2" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="视频来源" prop="video_from" label-width="70px">
-            <el-select
-              v-model="queryParams.video_from"
-              class="custom-select"
-              popper-class="custom-select-popper"
-              :teleported="false"
-              style="width: 150px; margin-left: 10px"
-            >
-              <el-option label="全部" value="" />
-              <el-option v-for="item in videoFromList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="实景视频" prop="video_tag" label-width="70px">
-            <el-select
-              v-model="queryParams.video_tag"
-              class="custom-select"
-              popper-class="custom-select-popper"
-              :teleported="false"
-              style="width: 120px"
-            >
-              <el-option v-for="item in video_type" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item prop="video_name">
-            <el-input v-model="queryParams.video_name" class="custom-input2" placeholder="请输入摄像头名称" style="width: 313px" />
-          </el-form-item>
-          <el-form-item style="margin-right: 0">
-            <div class="common-btn-primary" @click="handleQuery">搜索</div>
-            <div class="common-btn" @click="resetQuery">重置</div>
-          </el-form-item>
-        </el-form>
+  <Dialog custom-show type="xl" title="视频监控" class="dialog" hide-footer draggable showFull @changeFull="handleFull" @close="reset">
+    <div class="flex-box">
+      <div class="search-box">
+        <div class="box-left">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-position="left">
+            <el-form-item label="区划" prop="area_code" label-width="30px">
+              <el-select
+                v-model="queryParams.area_code"
+                class="custom-select"
+                popper-class="custom-select-popper"
+                :teleported="false"
+                style="width: 150px; margin-left: 10px"
+              >
+                <el-option label="茂名市" value="" />
+                <el-option v-for="item in district_type2" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="视频来源" prop="video_from" label-width="70px">
+              <el-select
+                v-model="queryParams.video_from"
+                class="custom-select"
+                popper-class="custom-select-popper"
+                :teleported="false"
+                style="width: 150px; margin-left: 10px"
+              >
+                <el-option label="全部" value="" />
+                <el-option v-for="item in videoFromList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="实景视频" prop="video_tag" label-width="70px">
+              <el-select
+                v-model="queryParams.video_tag"
+                class="custom-select"
+                popper-class="custom-select-popper"
+                :teleported="false"
+                style="width: 120px"
+              >
+                <el-option v-for="item in video_type" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="video_name">
+              <el-input v-model="queryParams.video_name" class="custom-input2" placeholder="请输入摄像头名称" style="width: 313px" />
+            </el-form-item>
+            <el-form-item style="margin-right: 0">
+              <div class="common-btn-primary" @click="handleQuery">搜索</div>
+              <div class="common-btn" @click="resetQuery">重置</div>
+            </el-form-item>
+          </el-form>
+        </div>
       </div>
-    </div>
-    <div style="display: flex; justify-content: flex-end; margin-bottom: 12px; margin-top: -20px">
-      <div v-show="!editVideo" class="common-btn-primary2 edit-icon" @click="activeEdit">编辑首页视频</div>
-      <div v-show="editVideo" class="edit-box">
-        <div class="flex">
-          <div v-for="(item, index) in editData" :key="index" class="box-item">
-            <div class="edit-img" :title="item.name">
-              <span class="edit-title">{{ item.name }}</span>
-              <div class="close-btn" @click="deleteItem(index)"></div>
+      <div style="display: flex; justify-content: flex-end; margin-bottom: 12px; margin-top: -20px">
+        <div v-show="!editVideo" class="common-btn-primary2 edit-icon" @click="activeEdit">编辑首页视频</div>
+        <div v-show="editVideo" class="edit-box">
+          <div class="flex">
+            <div v-for="(item, index) in editData" :key="index" class="box-item">
+              <div class="edit-img" :title="item.name">
+                <span class="edit-title">{{ item.name }}</span>
+                <div class="close-btn" @click="deleteItem(index)"></div>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="flex" style="flex-direction: column; align-items: center">
-          <div class="common-btn-primary3" style="margin-top: -25px" @click="handleSave">保存</div>
-          <div class="common-btn-danger2" @click="handleCancel">取消</div>
+          <div class="flex" style="flex-direction: column; align-items: center">
+            <div class="common-btn-primary3" style="margin-top: -25px" @click="handleSave">保存</div>
+            <div class="common-btn-danger2" @click="handleCancel">取消</div>
+          </div>
         </div>
       </div>
-    </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 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" />
-            <div :class="item.edit ? 'common-checked-active' : 'common-checked'" />
-            <div class="img" />
-            <div class="video-label">
-              <span class="label">{{ item.name }}</span>
+      <div class="border"></div>
+      <div class="video-list2">
+        <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" />
+              <div :class="item.edit ? 'common-checked-active' : 'common-checked'" />
+              <div class="img" />
+              <div class="video-label">
+                <span class="label">{{ item.name }}</span>
+              </div>
             </div>
+            <HKVideo v-else :dot_data="item" autoplay fullScreen :is-index="item.isUserVideos" @change="(data) => handleUpdateTags(item, data)" />
           </div>
-          <HKVideo v-else :dot_data="item" autoplay :is-index="item.isUserVideos" @change="(data) => handleUpdateTags(item, data)" />
         </div>
       </div>
+      <div class="footer">
+        <pagination
+          v-show="total > queryParams.pageSize"
+          v-model:page="queryParams.page"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          layout="total, prev, pager, next"
+          @pagination="getList"
+        />
+        <div v-if="total === 0" style="width: 100%; text-align: center; font-size: 16px; font-weight: bold">暂无数据</div>
+      </div>
+      <div id="container" style="display: none"></div>
     </div>
-    <div class="footer">
-      <pagination
-        v-show="total > queryParams.pageSize"
-        v-model:page="queryParams.page"
-        v-model:limit="queryParams.pageSize"
-        :total="total"
-        layout="total, prev, pager, next"
-        @pagination="getList"
-      />
-      <div v-if="total === 0" style="width: 100%; text-align: center; font-size: 16px; font-weight: bold">暂无数据</div>
-    </div>
-    <div id="container" style="display: none"></div>
   </Dialog>
   <div v-if="showTip" class="danger-tip" :style="{ zIndex: zIndex }">首页视频数量已达6个上限，如需继续操作请先取消已选择视频。</div>
 </template>
@@ -252,6 +260,26 @@ const getUserPoint = () => {
     editData.value = res.data.videoInfos;
   });
 };
+const videoParams = ref({
+  width: '288px',
+  height: '200px',
+  margin: '15px'
+});
+const handleFull = (flag) => {
+  if (flag) {
+    videoParams.value = {
+      width: 'calc(25% - 30px)',
+      height: 'calc(50% - 15px)',
+      margin: '30px'
+    };
+  } else {
+    videoParams.value = {
+      width: '288px',
+      height: '200px',
+      margin: '15px'
+    };
+  }
+};
 onMounted(() => {
   getList();
   getUserPoint();
@@ -274,6 +302,7 @@ onMounted(() => {
   }
 }
 .video-list2 {
+  flex: 1;
   display: flex;
   flex-wrap: wrap;
   padding: 0 10px;
@@ -294,7 +323,7 @@ onMounted(() => {
     align-items: center;
     &:nth-child(4),
     &:nth-child(8) {
-      margin-right: 0;
+      margin-right: 0 !important;
     }
     .video-label {
       position: absolute;
@@ -475,4 +504,9 @@ onMounted(() => {
   width: 66px;
   height: 32px;
 }
+.flex-box {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 </style>

src/views/globalMap/SwitchMapTool.vue

@@ -36,7 +36,6 @@ const mapData = computed(() => {
     } else if (['/index', '/index2', '/emergencyCommandMap', '/emergencyCommandMap2'].includes(path)) {
       zt = '一图作战';
     }
-    debugger
     let res = [];
     for (let i = 0; i < mapStore.ztMapList.length; i++) {
       if (mapStore.ztMapList[i].zt === zt) {