修改

src/api/sys/other.ts

@@ -432,3 +432,14 @@ export function devicePoints(type, mode: ErrorMessageMode = 'none') {
     },
   )
 }
+
+export function getLive(id, mode: ErrorMessageMode = 'none') {
+  return defHttp.get(
+    {
+      url: `/api/devices/${id}/live`,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}

src/components/LiveVideo/index.vue

@@ -1,30 +1,47 @@
 <template>
-  <div class="w-full h-full" v-if="!!url">
+  <LiveVideo :type="type" :url="url" />
-    <M3u8 v-bind="getProps" :url="url" v-if="isM3u8" />
-    <Flv v-bind="getProps" :url="url" v-else />
-  </div>
 </template>
 <script setup lang="ts">
-  import { computed, unref } from 'vue'
+  import { onMounted, ref, onBeforeUnmount } from 'vue'
-  import M3u8 from './m3up.vue'
+  import { getLive } from '/@/api/sys/other'
-  import Flv from './flv.vue'
+  import LiveVideo from './index1.vue'
-  import { useAttrs } from '/@/hooks/core/useAttrs'
+
   const props = defineProps({
-    url: {
+    id: {
-      type: String,
+      type: [String, Number],
-      default: '',
     },
   })
-
+  const type = ref('')
-  const attrs = useAttrs()
+  const url = ref('')
-
+  const expires = ref(60)
-  const getProps = computed(() => {
+  let timer: any = null
-    return {
+  onMounted(() => {
-      ...unref(attrs),
+    getLiveById()
-      ...unref(props),
-    }
   })
-  const isM3u8 = computed(() => {
+
-    return props.url.includes('.m3u8')
+  async function getLiveById() {
+    if (props.id == null) return
+    try {
+      const data = await getLive(props.id)
+
+      type.value = data.type
+      url.value = data.address
+      expires.value = data.expires
+      refresh()
+    } catch (error) {}
+  }
+
+  //根据expires定时刷新getLiveById
+  function refresh() {
+    if (expires.value <= 0) {
+      return
+    }
+    timer = setTimeout(() => {
+      getLiveById()
+    }, expires.value * 1000)
+  }
+
+  onBeforeUnmount(() => {
+    timer && clearTimeout(timer)
   })
 </script>

src/components/LiveVideo/index1.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="w-full h-full" v-if="!!url">
+    <iframe class="h-full w-full" v-if="type == 'iframe'" :src="url"></iframe>
+    <M3u8 v-bind="getProps" :url="url" v-if="type == 'm3u8'" />
+    <Flv v-bind="getProps" :url="url" v-if="type == 'flv'" />
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, unref } from 'vue'
+  import M3u8 from './m3up.vue'
+  import Flv from './flv.vue'
+  import { useAttrs } from '/@/hooks/core/useAttrs'
+  const props = defineProps({
+    url: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+    },
+  })
+
+  const attrs = useAttrs()
+
+  const getProps = computed(() => {
+    return {
+      ...unref(attrs),
+      ...unref(props),
+    }
+  })
+</script>

src/views/main/monitor/components/LiveBroadcast.vue

@@ -8,7 +8,7 @@
       >
         <template #renderItem="{ item }">
           <List-item>
-            <LiveBroadcastItem :url="socketUrl" :item="item" :key="item.id" />
+            <LiveBroadcastItem :url="socketUrl" :item="item" :key="item.id" :id="item.id" />
           </List-item>
         </template>
       </List>

src/views/main/monitor/components/LiveBroadcastItem.vue

@@ -9,7 +9,7 @@
         >
         <div class="absolute left-0 w-full top-0 h-full">
           <!-- <video class="w-full h-full" autoplay controls ref="videoRef" muted></video> -->
-          <LiveVideo v-if="liveUrl" class="w-full h-full" :url="liveUrl" />
+          <LiveVideo :id="item.id" class="w-full h-full" />
         </div>
       </div>
     </template>

src/views/visualization/MapModal.vue

@@ -153,9 +153,14 @@
       const isSZ = computed(() => deviceList.value.findIndex((e) => e.type == '水质设备') >= 0)
       const isSB = computed(() => deviceList.value.length)
 
-      const modelWidth = computed(
+      const modelWidth = computed(() => {
-        () => (boxWidth + 10) * Math.ceil((cropsList.value.length + 4) / 2) + 60,
+        //array去重复
-      )
+        // const arr = [...new Set(Object.values(deviceList?.value ?? {})?.map(({ type }) => type))]
+        // // const arr = deviceList.value.map(({ type }) => console.log(type))
+        // console.log(arr)
+
+        return (boxWidth + 10) * Math.ceil((cropsList.value.length + 4) / 2) + 60
+      })
 
       async function getData() {
         const resData = await getAgriculturalBasicDetails(props.baseId)

src/views/visualization/components/JK.vue

@@ -37,23 +37,23 @@
             class="h-130px"
             :class="{ '!h-160px': isBase }"
             v-for="(item, index) in listBig"
-            :key="item.url + index"
+            :key="index"
           >
             <VideoFlv
               @onScreen="onScreenClick"
               class="cursor-pointer"
-              :url="item.url"
+              :id="item.id"
               :name="item.base_name"
             />
           </div>
         </div>
         <div class="overflow-y-auto h-80px" v-if="isBase">
           <div class="grid grid-cols-3 gap-x-6px pt-10px" v-for="(ar, i) in listSmall" :key="i">
-            <div class="h-66px" v-for="item in ar" :key="item.id">
+            <div class="h-66px" v-for="(item, i) in ar" :key="i">
               <VideoFlv
                 @onScreen="onScreenClick"
                 class="cursor-pointer"
-                :url="item.url"
+                :id="item.id"
                 :name="item.base_name"
                 :screen="true"
               />
@@ -72,8 +72,8 @@
       <template #content>
         <div class="w-full">
           <VideoFlv
-            v-if="currentModelVideo.url"
+            v-if="currentModelVideo.id"
-            :url="currentModelVideo.url"
+            :id="currentModelVideo.id"
             :screen="false"
             :name="currentModelVideo.name"
           />

src/views/visualization/components/JK1.vue

@@ -38,8 +38,8 @@
             <VideoFlv
               @onScreen="onScreenClick"
               class="cursor-pointer"
-              :url="listBig.url"
+              :id="listBig.id"
-              :key="listBig.url"
+              :key="listBig.id"
               :name="listBig.monitoring_point"
             />
           </div>
@@ -56,8 +56,8 @@
       <template #content>
         <div class="w-full">
           <VideoFlv
-            v-if="currentModelVideo.url"
+            v-if="currentModelVideo.id"
-            :url="currentModelVideo.url"
+            :id="currentModelVideo.id"
             :screen="false"
             :name="currentModelVideo.name"
           />

src/views/visualization/components/VideoFlv.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="w-full h-full relative">
-    <LiveVideo v-if="url" class="bg-gray-700 bg-opacity-30" :url="url" />
+    <LiveVideo :key="id" v-if="id" class="bg-gray-700 bg-opacity-30 w-full h-full" :id="id" />
     <div class="absolute left-0 w-full top-0 h-full" @click.prevent.stop="onScreen"></div>
   </div>
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, computed } from 'vue'
+  import { defineComponent, computed } from 'vue'
   import LiveVideo from '/@/components/LiveVideo/index.vue'
   export default defineComponent({
     name: 'VideoFlv',
@@ -14,8 +14,8 @@
       LiveVideo,
     },
     props: {
-      url: {
+      id: {
-        type: String,
+        type: [String, Number],
         default: null,
       },
       screen: {
@@ -28,15 +28,13 @@
       },
     },
     setup(props, { emit }) {
-      const pUrl = ref(props.url)
-
       const pName = computed(() => props.name)
 
       const isScreen = computed(() => props.screen)
 
       function onScreen() {
         if (isScreen.value) {
-          emit('onScreen', { url: props.url, name: props.name })
+          emit('onScreen', { id: props.id, name: props.name })
         } else {
           emit('onClick')
         }
@@ -46,7 +44,6 @@
         pName,
         onScreen,
         isScreen,
-        pUrl,
       }
     },
   })