修改监控

src/views/visualization/components/JK.vue

@@ -39,29 +39,40 @@
             v-for="(item, index) in listBig"
             :key="index"
           >
-            <VideoFlv class="cursor-pointer" :url="item.url" :name="item.base_name" />
+            <VideoFlv
+              @onScreen="onScreenClick"
+              class="cursor-pointer"
+              :url="item.url"
+              :name="item.base_name"
+            />
           </div>
         </div>
         <div class="grid grid-cols-3 gap-x-6px pt-10px">
           <div class="h-66px" v-for="item in listSmall" :key="item.id">
             <VideoFlv
+              @onScreen="onScreenClick"
               class="cursor-pointer"
               :url="item.url"
               :name="item.base_name"
               :screen="true"
             />
-            <!-- @onClick="onChangeVideo(item)" -->
-            <!-- <img
-              :src="item.img"
-              class="object-cover w-full h-full"
-              alt=""
-              srcset=""
-              @click.prevent.stop="onChangeVideo(item)"
-            /> -->
           </div>
         </div>
       </div>
     </div>
+
+    <LinkModal
+      v-model:visible="visibleModal"
+      :footer="null"
+      :title1="currentModelVideo && currentModelVideo.name"
+      :width="1100"
+    >
+      <template #content>
+        <div class="w-full">
+          <VideoFlv :url="currentModelVideo.url" :screen="false" :name="currentModelVideo.name" />
+        </div>
+      </template>
+    </LinkModal>
   </Box>
 </template>
 
@@ -83,6 +94,7 @@
   import v01 from '../../../assets/images/v01.png'
   import v02 from '../../../assets/images/v02.png'
   import v03 from '../../../assets/images/v03.png'
+  import LinkModal from '../LinkModal.vue'
   export default defineComponent({
     components: {
       Box,
@@ -91,6 +103,7 @@
       Menu,
       MenuItem: Menu.Item,
       VideoFlv,
+      LinkModal,
     },
     props: ['baseId'],
     setup(props) {
@@ -102,10 +115,14 @@
         list: ref<any[]>([]),
       })
 
+      const visibleModal = ref(false)
+
       const chartRef = ref<HTMLDivElement | null>(null)
 
       const currentVido = ref<any>(null)
 
+      const currentModelVideo = ref<any>(null)
+
       const listSmall = computed(() => Data.list.slice(1, 4))
       const listBig = computed(() => Data.list.slice(0, 1))
 
@@ -173,6 +190,12 @@
         if (currentVido.value.url == e.url) return
         currentVido.value = e
       }
+
+      function onScreenClick(e) {
+        currentModelVideo.value = e
+        visibleModal.value = true
+      }
+
       const isBase = computed(() => !!props.baseId)
 
       onBeforeMount(() => {
@@ -193,10 +216,13 @@
         listSmall,
         onChangeVideo,
         currentVido,
+        currentModelVideo,
         ...toRefs(Data),
         chartRef,
         currentTabValue,
         onMenuClick,
+        visibleModal,
+        onScreenClick,
       }
     },
   })

src/views/visualization/components/VideoFlv.vue

@@ -1,37 +1,21 @@
 <template>
   <div class="w-full h-full relative">
-    <!-- <SvgIcon
-      v-if="isScreen && false"
-      name="full-screen"
-      class="text-white absolute left-15px top-15px z-20 cursor-pointer"
-      size="20"
-      @click="visibleModal = true"
-    /> -->
-
-    <video class="w-full h-full" autoplay controls ref="videoRef" muted></video>
+    <video
+      class="w-full h-full bg-gray-700 bg-opacity-30"
+      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" :width="1100">
-      <template #content>
-        <div class="w-full">
-          <VideoFlv :url="pUrl" :screen="false" :name="pName" />
-        </div>
-      </template>
-    </LinkModal>
   </div>
 </template>
 
 <script lang="ts">
   import flvjs from 'flv.js'
   import { defineComponent, ref, unref, onMounted, watch, onBeforeUnmount, computed } from 'vue'
-  // import { SvgIcon } from '/@/components/Icon'
-  import LinkModal from '../LinkModal.vue'
   export default defineComponent({
     name: 'VideoFlv',
-    components: {
-      // SvgIcon,
-      LinkModal,
-    },
     props: {
       url: {
         type: String,
@@ -51,8 +35,6 @@
       let player: any | null = null
       const pUrl = ref(props.url)
 
-      const visibleModal = ref(false)
-
       const pName = computed(() => props.name)
 
       const isScreen = computed(() => props.screen)
@@ -79,7 +61,7 @@
 
       function onScreen() {
         if (isScreen.value) {
-          visibleModal.value = true
+          emit('onScreen', { url: props.url, name: props.name })
         } else {
           emit('onClick')
         }
@@ -113,7 +95,6 @@
         onScreen,
         isScreen,
         pUrl,
-        visibleModal,
         videoRef,
       }
     },
@@ -148,4 +129,12 @@
   video::-webkit-media-controls-play-button {
     display: none;
   }
+
+  video::-webkit-media-controls {
+    display: none !important;
+  }
+
+  video::-webkit-media-controls-enclosure {
+    display: none !important;
+  }
 </style>