Merge remote-tracking branch 'origin/dev' into dev

src/components/FlvVideo/index.vue

@@ -26,6 +26,7 @@ const props = defineProps({
     default: false
   }
 });
+const emits = defineEmits(['onPlaying', 'onPlayError']);
 const videoRef = ref();
 let flvPlayer = ref();
 let isLoading = ref(false);
@@ -56,6 +57,7 @@ const handleVideoPlay = () => {
     flvPlayer.value.play();
     videoRef.value.addEventListener('playing', () => {
       isLoading.value = false; // 视频开始播放时关闭加载状态
+      emits('onPlaying');
     });
     //报错重连
     flvPlayer.value.on(flvjs.Events.ERROR, (errType, errDetail) => {
@@ -63,6 +65,7 @@ const handleVideoPlay = () => {
         destoryVideo();
       }
       isLoading.value = false;
+      emits('onPlayError');
     });
   }
 };

src/components/HKVideo/index.vue

@@ -1,14 +1,24 @@
 <template>
   <div class="dot-box" :style="{ width: width ? width + 'px' : '100%', height: height ? height + 'px' : '100%' }">
     <div class="video-box" @click="play_now">
-      <HikvisionPlayer
-        v-if="!reload && (isPlaying || autoplay) && !isNoLive"
-        ref="videoPlayer"
-        style="width: 100%; height: 100%; object-fit: fill"
-        @on-playing="onHkPlaying"
-        @on-play-error="onHKPlayError"
-      />
-      <FlvVideo v-if="isPlaying && isNoLive" ref="flvVideoRef" :videoUrl="dot_data.video_code" style="width: 100%; height: 100%; object-fit: fill" />
+      <template v-if="!reload && (isPlaying || autoplay)">
+        <HikvisionPlayer
+          v-if="!isNoLive"
+          ref="videoPlayer"
+          hideEnlarge
+          style="width: 100%; height: 100%; object-fit: fill"
+          @on-playing="onHkPlaying"
+          @on-play-error="onHKPlayError"
+        />
+        <FlvVideo
+          v-else
+          ref="flvVideoRef"
+          :videoUrl="dot_data.video_code"
+          style="width: 100%; height: 100%; object-fit: fill"
+          @on-playing="onHkPlaying"
+          @on-play-error="onHKPlayError"
+        />
+      </template>
       <img v-if="posterVisible" class="video-play" src="@/assets/images/video/play.png" alt="" />
       <img v-if="posterVisible && dot_data.poster" class="video-poster" :src="dot_data.poster" />
       <div v-if="errBKVisible" class="err_bk">

src/components/HKVideo/index2.vue

@@ -1,15 +1,24 @@
 <template>
   <div class="dot-box" :style="{ width: width ? width + 'px' : '100%', height: height ? height + 'px' : '100%' }">
     <div class="video-box" @click="play_now">
-      <HikvisionPlayer
-        v-if="isPlaying && !isNoLive"
-        ref="videoPlayer"
-        hideEnlarge
-        style="width: 100%; height: 100%; object-fit: fill"
-        @on-playing="onHkPlaying"
-        @on-play-error="onHKPlayError"
-      />
-      <FlvVideo v-if="isPlaying && isNoLive" ref="flvVideoRef" :videoUrl="dot_data.video_code" style="width: 100%; height: 100%; object-fit: fill" />
+      <template v-if="isPlaying">
+        <HikvisionPlayer
+          v-if="!isNoLive"
+          ref="videoPlayer"
+          hide-enlarge
+          style="width: 100%; height: 100%; object-fit: fill"
+          @on-playing="onHkPlaying"
+          @on-play-error="onHKPlayError"
+        />
+        <FlvVideo
+          v-else
+          ref="flvVideoRef"
+          :video-url="dot_data.video_code"
+          style="width: 100%; height: 100%; object-fit: fill"
+          @on-playing="onHkPlaying"
+          @on-play-error="onHKPlayError"
+        />
+      </template>
       <div class="video-header">
         <div class="label" :title="dot_data.name">{{ dot_data.name }}</div>
         <div class="video-header-right">
@@ -143,20 +152,24 @@ const changeTagsData = () => {
 };
 // 开始播放
 const play_now = async (check?: boolean) => {
-  posterVisible.value = false;
-  errBKVisible.value = false;
-  isPlaying.value = true;
-  nextTick(() => {
-    if (props.isNoLive) {
-      flvVideoRef.value.handleVideoPlay(props.dot_data.video_code);
-    } else {
-      // 视频监控数据
-      getVideoUrlById(props.dot_data.video_code).then((res) => {
-        wsUrl.value = res.data;
-        videoPlayer.value.play(wsUrl.value);
-      });
-    }
-  });
+  if (!props.dot_data || (props.dot_data && !props.dot_data.video_code)) {
+    onHKPlayError();
+  } else {
+    posterVisible.value = false;
+    errBKVisible.value = false;
+    isPlaying.value = true;
+    nextTick(() => {
+      if (props.isNoLive) {
+        flvVideoRef.value.handleVideoPlay(props.dot_data.video_code);
+      } else {
+        // 视频监控数据
+        getVideoUrlById(props.dot_data.video_code).then((res) => {
+          wsUrl.value = res.data;
+          videoPlayer.value.play(wsUrl.value);
+        });
+      }
+    });
+  }
 };
 // 停止播放
 const stop_now = async () => {

src/views/globalMap/RightMenu/UAV/DroneDetail.vue

@@ -6,9 +6,9 @@
     </div>
     <div class="dialog-content">
       <div class="video-box">
-        <HKVideo v-if="detailsData.video_code" ref="videoRef" :dot_data="detailsData" autoplay />
+        <HKVideo ref="videoRef" :dot_data="videoData" :isNoLive="isFlyVideo" autoplay />
       </div>
-      <div class="title-box">{{ detailsData.name }}</div>
+      <div class="title-box">{{ detailData.name }}</div>
       <div class="btn-box">
         <div class="btn1" @click="handleFullScreen">
           <i class="icon-full" />
@@ -28,20 +28,23 @@
         <div>机库/无人机信息</div>
       </div>
       <div class="box">
-        <i class="icon1" />
+        <div class="box-flex">
+          <i class="icon1" />
+          <div class="gradient-text">机库</div>
+        </div>
         <div class="box-right">
           <div class="box-line">
             <div class="box-item" style="flex: 1">
               <div>网速：</div>
               <div class="gradient-text">
-                {{ detailsData.hangarInfo && !!detailsData.hangarInfo.internetSpeed ? detailsData.hangarInfo.internetSpeed : '-' }}
+                {{ detailData.hangarInfo && !!detailData.hangarInfo.internetSpeed ? detailData.hangarInfo.internetSpeed : '-' }}
               </div>
               <div>kb/s</div>
             </div>
             <div class="box-item" style="flex: 1">
               <div>机房温度：</div>
               <div class="gradient-text">
-                {{ detailsData.hangarInfo && !!detailsData.hangarInfo.temperature ? detailsData.hangarInfo.temperature : '-' }}
+                {{ detailData.hangarInfo && !!detailData.hangarInfo.temperature ? detailData.hangarInfo.temperature : '-' }}
               </div>
               <div>℃</div>
             </div>
@@ -50,7 +53,7 @@
             <div class="box-item">
               <div>机库风速：</div>
               <div class="gradient-text">
-                {{ detailsData.hangarInfo && !!detailsData.hangarInfo.windSpeed ? detailsData.hangarInfo.windSpeed : '-' }}
+                {{ detailData.hangarInfo && !!detailData.hangarInfo.windSpeed ? detailData.hangarInfo.windSpeed : '-' }}
               </div>
               <div>m/s</div>
             </div>
@@ -58,20 +61,23 @@
         </div>
       </div>
       <div class="box">
-        <i class="icon2" />
+        <div class="box-flex">
+          <i class="icon2" />
+          <div class="gradient-text">无人机</div>
+        </div>
         <div class="box-right">
           <div class="box-line">
             <div class="box-item" style="flex: 1">
               <div>网速：</div>
               <div class="gradient-text">
-                {{ detailsData.droneInfo && !!detailsData.droneInfo.internetSpeed ? detailsData.droneInfo.internetSpeed : '-' }}
+                {{ detailData.droneInfo && !!detailData.droneInfo.internetSpeed ? detailData.droneInfo.internetSpeed : '-' }}
               </div>
               <div>kb/s</div>
             </div>
             <div class="box-item" style="flex: 1">
               <div>机房温度：</div>
               <div class="gradient-text">
-                {{ detailsData.droneInfo && !!detailsData.droneInfo.temperature ? detailsData.droneInfo.temperature : '-' }}
+                {{ detailData.droneInfo && !!detailData.droneInfo.temperature ? Number(detailData.fly_info.temperature).toFixed(1) : '-' }}
               </div>
               <div>℃</div>
             </div>
@@ -80,7 +86,7 @@
             <div class="box-item">
               <div>机库风速：</div>
               <div class="gradient-text">
-                {{ detailsData.droneInfo && !!detailsData.droneInfo.windSpeed ? detailsData.droneInfo.windSpeed : '-' }}
+                {{ detailData.droneInfo && !!detailData.droneInfo.windSpeed ? detailData.droneInfo.windSpeed : '-' }}
               </div>
               <div>m/s</div>
             </div>
@@ -93,51 +99,27 @@
 
 <script lang="ts" setup>
 import HKVideo from '@/components/HKVideo/index2.vue';
+interface DetailData {
+  name: string;
+  fly_url: string;
+  nest_url: string;
+}
 const props = defineProps({
   modelValue: Boolean,
+  detailData: Object as PropType<DetailData>,
   id: String
 });
 const emits = defineEmits(['update:modelValue']);
 const containerScale = inject('containerScale');
-const detailsData = ref({
-  video_code: '',
-  video_url: '',
-  fly_video: '',
-  name: '',
-  hangarInfo: {
-    internetSpeed: '',
-    temperature: '',
-    windSpeed: ''
-  },
-  droneInfo: {
-    internetSpeed: '',
-    temperature: '',
-    windSpeed: ''
-  }
-});
 let isFlyVideo = ref(false);
-
-const initData = () => {
-  const data = {
-    name: '曹江无人机机库',
-    video_code: '',
-    video_url: '44090000001320004507',
-    fly_video: 'https://mm.tjpapp.com/flv/yingyu-2019-11-01_1.flv',
-    hangarInfo: {
-      internetSpeed: '472',
-      temperature: '32',
-      windSpeed: '0.2'
-    },
-    droneInfo: {
-      internetSpeed: '472',
-      temperature: '32',
-      windSpeed: '0.2'
-    }
+const videoData = computed(() => {
+  const data = props.detailData ? props.detailData : { drone_name: '', fly_url: '', nest_url: '' };
+  return {
+    name: data.drone_name,
+    video_code: !!isFlyVideo.value ? data.fly_url : data.nest_url
   };
-  isFlyVideo.value = false;
-  data.video_code = data.video_url;
-  detailsData.value = data;
-};
+});
+
 let videoRef = ref();
 
 // 视频全屏
@@ -153,11 +135,6 @@ const handleVideoRefresh = () => {
 // 切换飞行视频
 const handleSwitchFlyVideo = () => {
   isFlyVideo.value = !isFlyVideo.value;
-  if (isFlyVideo.value) {
-    detailsData.value.video_code = detailsData.value.fly_video;
-  } else {
-    detailsData.value.video_code = detailsData.value.video_url;
-  }
   nextTick(() => {
     handleVideoRefresh();
   });
@@ -166,9 +143,6 @@ const handleSwitchFlyVideo = () => {
 const handleClose = () => {
   emits('update:modelValue', false);
 };
-onMounted(() => {
-  initData();
-});
 </script>
 
 <style lang="scss" scoped>
@@ -302,19 +276,26 @@ onMounted(() => {
       align-items: center;
       justify-content: space-between;
       padding: 6px 15px;
+      .box-flex {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 25px;
+        .gradient-text {
+          font-weight: normal;
+        }
+      }
       .icon1 {
         width: 52px;
         height: 59px;
         background: url('@/assets/images/map/rightMenu/uva/icon1.png') no-repeat;
         background-size: 100% 100%;
-        margin-right: 8px;
       }
       .icon2 {
         width: 52px;
         height: 56px;
         background: url('@/assets/images/map/rightMenu/uva/icon2.png') no-repeat;
         background-size: 100% 100%;
-        margin-right: 8px;
       }
       .box-right {
         flex: 1;

src/views/globalMap/RightMenu/UAV/index.vue

@@ -36,13 +36,13 @@
     </div>
     <div class="custom-table">
       <div class="table-content">
-        <div v-for="(item, index) in droneResourcesData.listData" :key="index" class="tr" @click="handleItem(item.id)">
+        <div v-for="(item, index) in droneResourcesData.listData" :key="index" class="tr" @click="handleItem(item)">
           <div class="td">{{ item.drone_name }}</div>
           <div class="td" style="width: 150px; flex: unset; text-align: center">{{ item.status_text }}</div>
         </div>
       </div>
     </div>
-    <DroneDetail v-if="showDetail" v-model="showDetail" :id="detailId" />
+    <DroneDetail v-if="showDetail" v-model="showDetail" :detailData="detailData" />
   </div>
 </template>
 
@@ -64,7 +64,7 @@ const queryParams = reactive({
   status_list: ['1', '2']
 });
 let showDetail = ref(false);
-let detailId = ref('');
+let detailData = ref({});
 let showTagContent = ref(false);
 // 返回数据
 const droneResourcesData = reactive({
@@ -102,8 +102,8 @@ const initData = async () => {
 };
 
 // 详情
-const handleItem = (id: string) => {
-  detailId.value = id;
+const handleItem = (item: any) => {
+  detailData.value = item;
   showDetail.value = true;
 };
 initData();