From 8aa68903c3623d9cead316166e26c9a5e34c6c90 Mon Sep 17 00:00:00 2001
From: ihzero <ihzero@163.com>
Date: Thu, 8 Dec 2022 11:53:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/visualization/LinkModal.vue         | 86 +++++++++++++------
 src/views/visualization/MapModal.vue          |  1 +
 src/views/visualization/components/CModal.vue |  1 +
 src/views/visualization/components/Footer.vue |  4 +-
 src/views/visualization/components/JK.vue     |  9 +-
 .../visualization/components/VideoFlv.vue     | 12 +--
 6 files changed, 69 insertions(+), 44 deletions(-)

diff --git a/src/views/visualization/LinkModal.vue b/src/views/visualization/LinkModal.vue
index 50d911d3..83ecae2d 100644
--- a/src/views/visualization/LinkModal.vue
+++ b/src/views/visualization/LinkModal.vue
@@ -1,35 +1,38 @@
 <template>
-  <a-modal
-    v-bind="$attrs"
-    :bodyStyle="{ background: '#233741', color: '#fff' }"
-    :width="800"
-    destroyOnClose
-  >
-    <template #closeIcon>
-      <img
-        class="w-22px h-22px inline text-0"
-        src="../../assets/images/model-close-icon.png"
-        alt=""
-        srcset=""
-      />
-    </template>
-    <div>
-      <div class="relative -mt-6px h-30px flex items-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 }}
+  <div class="linkmodel">
+    <a-modal
+      v-bind="getBindValue"
+      :bodyStyle="{ background: '#233741', color: '#fff' }"
+      :width="1200"
+      destroyOnClose
+      :getContainer="getContainer"
+    >
+      <template #closeIcon>
+        <img
+          class="w-22px h-22px inline text-0"
+          src="../../assets/images/model-close-icon.png"
+          alt=""
+          srcset=""
+        />
+      </template>
+      <div>
+        <div class="relative -mt-6px h-30px flex items-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 }}
+          </div>
+        </div>
+        <div class="bg-[#1D2D35] mt-14px p-10px">
+          <slot name="content"></slot>
         </div>
       </div>
-      <div class="bg-[#1D2D35] mt-14px p-10px">
-        <slot name="content"></slot>
-      </div>
-    </div>
-  </a-modal>
+    </a-modal>
+  </div>
 </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() {
-      return {}
+    setup(props, { attrs }) {
+      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>
diff --git a/src/views/visualization/MapModal.vue b/src/views/visualization/MapModal.vue
index 91dc080b..e7ee807b 100644
--- a/src/views/visualization/MapModal.vue
+++ b/src/views/visualization/MapModal.vue
@@ -163,6 +163,7 @@
           ...attrs,
           ...unref(props),
           visible: unref(modelVisible),
+          maskClosable: false,
         }
         return attr
       })
diff --git a/src/views/visualization/components/CModal.vue b/src/views/visualization/components/CModal.vue
index 1153e769..2c55cbc5 100644
--- a/src/views/visualization/components/CModal.vue
+++ b/src/views/visualization/components/CModal.vue
@@ -305,6 +305,7 @@
           ...attrs,
           ...unref(props),
           visible: unref(modelVisible),
+          maskClosable: false,
         }
         return attr
       })
diff --git a/src/views/visualization/components/Footer.vue b/src/views/visualization/components/Footer.vue
index 8f390e55..0dc283c2 100644
--- a/src/views/visualization/components/Footer.vue
+++ b/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>
diff --git a/src/views/visualization/components/JK.vue b/src/views/visualization/components/JK.vue
index e8f9be62..139661e2 100644
--- a/src/views/visualization/components/JK.vue
+++ b/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
diff --git a/src/views/visualization/components/VideoFlv.vue b/src/views/visualization/components/VideoFlv.vue
index b53661f6..c9ce4e34 100644
--- a/src/views/visualization/components/VideoFlv.vue
+++ b/src/views/visualization/components/VideoFlv.vue
@@ -8,16 +8,10 @@
       @click="visibleModal = true"
     />
 
-    <video
-      @click.prevent.stop="onScreen"
-      class="w-full h-full"
-      autoplay
-      controls
-      ref="videoRef"
-      muted
-    ></video>
+    <video class="w-full h-full" autoplay controls ref="videoRef" muted></video>
+    <div class="absolute left-0 w-full top-0 h-full" @click.prevent.stop="onScreen"></div>
 
-    <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" />