src/views/visualization/LinkModal.vue

@@ -1,38 +1,35 @@
 <template>
-  <div class="linkmodel">
+  <a-modal
-    <a-modal
+    v-bind="$attrs"
-      v-bind="getBindValue"
+    :bodyStyle="{ background: '#233741', color: '#fff' }"
-      :bodyStyle="{ background: '#233741', color: '#fff' }"
+    :width="800"
-      :width="1200"
+    destroyOnClose
-      destroyOnClose
+  >
-      :getContainer="getContainer"
+    <template #closeIcon>
-    >
+      <img
-      <template #closeIcon>
+        class="w-22px h-22px inline text-0"
-        <img
+        src="../../assets/images/model-close-icon.png"
-          class="w-22px h-22px inline text-0"
+        alt=""
-          src="../../assets/images/model-close-icon.png"
+        srcset=""
-          alt=""
+      />
-          srcset=""
+    </template>
-        />
+    <div>
-      </template>
+      <div class="relative -mt-6px h-30px flex items-center">
-      <div>
+        <div
-        <div class="relative -mt-6px h-30px flex items-center">
+          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="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 }}
-          >
-            {{ title1 }}
-          </div>
-        </div>
-        <div class="bg-[#1D2D35] mt-14px p-10px">
-          <slot name="content"></slot>
         </div>
       </div>
-    </a-modal>
+      <div class="bg-[#1D2D35] mt-14px p-10px">
-  </div>
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </a-modal>
 </template>
 
 <script lang="ts">
-  import { defineComponent, computed, ref, unref, watchEffect } from 'vue'
+  import { defineComponent } from 'vue'
   import { Modal } from 'ant-design-vue'
 
   export default defineComponent({
@@ -43,36 +40,9 @@
       title1: {
         type: String,
       },
-      visible: {
-        type: Boolean,
-      },
     },
-    setup(props, { attrs }) {
+    setup() {
-      const modelVisible = ref(false)
+      return {}
-
-      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,7 +163,6 @@
           ...attrs,
           ...unref(props),
           visible: unref(modelVisible),
-          maskClosable: false,
         }
         return attr
       })

src/views/visualization/components/CModal.vue

@@ -305,7 +305,6 @@
           ...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="h-500px overflow-auto h-full">
+        <div class="max-h-500px overflow-auto">
           <div v-if="current.type == 3" v-html="current.content"> </div>
-          <div v-if="current.type == 2" class="h-full">
+          <div v-if="current.type == 2">
             <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,8 +114,7 @@
           status: 1,
           is_recommend: 1,
         })
-
+        // console.log(resData)
-        currentVido.value = null
 
         Data.list = resData.splice(0, 3).map((e, index) => {
           const { rtsp_url } = e.extends

src/views/visualization/components/VideoFlv.vue

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