修改

src/views/visualization/LinkModal.vue

@@ -1,35 +1,38 @@
 <template>
-  <a-modal
+  <div class="linkmodel">
-    v-bind="$attrs"
+    <a-modal
-    :bodyStyle="{ background: '#233741', color: '#fff' }"
+      v-bind="getBindValue"
-    :width="800"
+      :bodyStyle="{ background: '#233741', color: '#fff' }"
-    destroyOnClose
+      :width="1200"
-  >
+      destroyOnClose
-    <template #closeIcon>
+      :getContainer="getContainer"
-      <img
+    >
-        class="w-22px h-22px inline text-0"
+      <template #closeIcon>
-        src="../../assets/images/model-close-icon.png"
+        <img
-        alt=""
+          class="w-22px h-22px inline text-0"
-        srcset=""
+          src="../../assets/images/model-close-icon.png"
-      />
+          alt=""
-    </template>
+          srcset=""
-    <div>
+        />
-      <div class="relative -mt-6px h-30px flex items-center">
+      </template>
-        <div
+      <div>
-          class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
+        <div class="relative -mt-6px h-30px flex items-center">
-        >
+          <div
-          {{ title1 }}
+            class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
+          >
+            {{ title1 }}
+          </div>
+        </div>
+        <div class="bg-[#1D2D35] mt-14px p-10px">
+          <slot name="content"></slot>
         </div>
       </div>
-      <div class="bg-[#1D2D35] mt-14px p-10px">
+    </a-modal>
-        <slot name="content"></slot>
+  </div>
-      </div>
-    </div>
-  </a-modal>
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue'
+  import { defineComponent, computed, ref, unref, watchEffect } from 'vue'
   import { Modal } from 'ant-design-vue'
 
   export default defineComponent({
@@ -40,9 +43,36 @@
       title1: {
         type: String,
       },
+      visible: {
+        type: Boolean,
+      },
     },
-    setup() {
+    setup(props, { attrs }) {
-      return {}
+      const modelVisible = ref(false)
+
+      const getBindValue = computed(() => {
+        const attr = {
+          ...attrs,
+          ...unref(props),
+          visible: unref(modelVisible),
+          maskClosable: false,
+        }
+        return attr
+      })
+
+      watchEffect(() => {
+        modelVisible.value = !!props.visible
+      })
+
+      const getContainer = () => {
+        if (document.body.clientWidth < 3000) return document.body
+        return document.body.querySelector(`.linkmodel`)
+      }
+
+      return {
+        getBindValue,
+        getContainer,
+      }
     },
   })
 </script>

src/views/visualization/MapModal.vue

@@ -163,6 +163,7 @@
           ...attrs,
           ...unref(props),
           visible: unref(modelVisible),
+          maskClosable: false,
         }
         return attr
       })

src/views/visualization/components/CModal.vue

@@ -305,6 +305,7 @@
           ...attrs,
           ...unref(props),
           visible: unref(modelVisible),
+          maskClosable: false,
         }
         return attr
       })

src/views/visualization/components/Footer.vue

@@ -49,9 +49,9 @@
     </div>
     <LinkModal v-model:visible="visibleModal" :footer="null" :title1="current.name">
       <template #content>
-        <div class="max-h-500px overflow-auto">
+        <div class="h-500px overflow-auto h-full">
           <div v-if="current.type == 3" v-html="current.content"> </div>
-          <div v-if="current.type == 2">
+          <div v-if="current.type == 2" class="h-full">
             <video muted autoplay controls :src="current.content" class="w-full h-full"></video>
           </div>
         </div>

src/views/visualization/components/JK.vue

@@ -37,19 +37,19 @@
         </div>
         <div class="grid grid-cols-3 gap-x-6px my-10px">
           <div class="h-66px" v-for="item in list" :key="item.id">
-            <!-- <VideoFlv
+            <VideoFlv
               :url="item.url"
               :name="item.base_name"
               :screen="false"
               @click.prevent.stop="onChangeVideo(item)"
-            /> -->
+            />
-            <img
+            <!-- <img
               :src="item.img"
               class="object-cover w-full h-full"
               alt=""
               srcset=""
               @click.prevent.stop="onChangeVideo(item)"
-            />
+            /> -->
           </div>
         </div>
       </div>
@@ -114,7 +114,6 @@
           status: 1,
           is_recommend: 1,
         })
-        // console.log(resData)
 
         Data.list = resData.splice(0, 3).map((e, index) => {
           const { rtsp_url } = e.extends

src/views/visualization/components/VideoFlv.vue

@@ -8,16 +8,10 @@
       @click="visibleModal = true"
     />
 
-    <video
+    <video class="w-full h-full" autoplay controls ref="videoRef" muted></video>
-      @click.prevent.stop="onScreen"
+    <div class="absolute left-0 w-full top-0 h-full" @click.prevent.stop="onScreen"></div>
-      class="w-full h-full"
-      autoplay
-      controls
-      ref="videoRef"
-      muted
-    ></video>
 
-    <LinkModal v-model:visible="visibleModal" :footer="null" :title1="pName">
+    <LinkModal v-model:visible="visibleModal" :footer="null" :title1="pName" width="1200px">
       <template #content>
         <div class="w-full">
           <VideoFlv :url="pUrl" :screen="false" :name="pName" />