直播

Web/src/components/airport/components/InfoModal.vue

@@ -92,7 +92,7 @@
                   <div style="display: flex;align-items: center;">
                     <img :src="uploadSrc">
                     <div>
-                      {{ 0 }}
+                      {{ state.uploadQuantity }}/{{ state.uploadTotal }}
                     </div>
                   </div>
                 </a-tooltip>
@@ -118,27 +118,27 @@
         </div>
         <div class="content-aircraft-head-right-select">
           <div v-if="state.airportLiveVisible">
-            <a-select style="width: 125px;margin-right: 5px;" placeholder="摄像头" v-model:value="state.cameraValue">
-              <a-select-option v-for="item in state.cameraList" :key="item.value" :value="item.value"
-                @click="onCameraSelect(item)">
+            <a-select style="width: 125px;margin-right: 5px;" placeholder="摄像头" v-model:value="airportLive.cameraValue">
+              <a-select-option v-for="item in airportLive.cameraList" :key="item.value" :value="item.value"
+                @click="onDockCameraSelect(item)">
                 {{ item.label }}
               </a-select-option>
             </a-select>
-            <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度" v-model:value="state.clarityValue"
-              @select="onClaritySelect">
+            <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度"
+              v-model:value="airportLive.clarityValue">
               <a-select-option v-for="item in clarityList" :key="item.value" :value="item.value">
                 {{ item.label }}
               </a-select-option>
             </a-select>
             <a-tooltip title="播放">
-              <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onStart" />
+              <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onDockStartLive" />
             </a-tooltip>
             <a-tooltip title="停止">
-              <a-button :icon="h(PoweroffOutlined)" @click="onStop" />
+              <a-button :icon="h(PoweroffOutlined)" @click="onDockStopLive" />
             </a-tooltip>
           </div>
         </div>
-        <LivePlayer :text="state.playerText" :url="state.playerUrl" v-if="state.airportLiveVisible" />
+        <LivePlayer :text="airportLive.playerText" :url="airportLive.playerUrl" v-if="state.airportLiveVisible" />
       </div>
     </div>
     <!--  飞机-->
@@ -192,29 +192,30 @@
           </div>
           <div class="content-aircraft-head-right-select">
             <div v-if="state.deviceLiveVisible">
-              <a-select style="width: 125px;margin-right: 5px;" placeholder="摄像头" v-model:value="state.cameraValue">
-                <a-select-option v-for="item in state.cameraList" :key="item.value" :value="item.value"
-                  @click="onCameraSelect(item)">
+              <a-select style="width: 125px;margin-right: 5px;" placeholder="摄像头"
+                v-model:value="deviceLive.cameraValue">
+                <a-select-option v-for="item in deviceLive.cameraList" :key="item.value" :value="item.value"
+                  @click="onDeviceCameraSelect(item)">
                   {{ item.label }}
                 </a-select-option>
               </a-select>
-              <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度" v-model:value="state.clarityValue"
-                @select="onClaritySelect">
+              <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度"
+                v-model:value="deviceLive.clarityValue">
                 <a-select-option v-for="item in clarityList" :key="item.value" :value="item.value">
                   {{ item.label }}
                 </a-select-option>
               </a-select>
               <a-tooltip title="播放">
-                <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onStart" />
+                <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onDeviceStartLive" />
               </a-tooltip>
               <a-tooltip title="停止">
-                <a-button :icon="h(PoweroffOutlined)" @click="onStop" />
+                <a-button :icon="h(PoweroffOutlined)" @click="onDeviceStopLive" />
               </a-tooltip>
             </div>
           </div>
         </div>
       </div>
-      <LivePlayer :text="state.playerText" :url="state.playerUrl" v-if="state.deviceLiveVisible" />
+      <LivePlayer :text="deviceLive.playerText" :url="deviceLive.playerUrl" v-if="state.deviceLiveVisible" />
       <div class="battery-slide">
         <div style="background: #535759;" class="width-100"></div>
         <div class="capacity-percent" :style="{ width: capacity + '%' }"></div>
@@ -398,6 +399,7 @@ import DroneControlPanel from '../../g-map/DroneControlPanel.vue'
 import { useDockControl } from '../../g-map/use-dock-control';
 import { useMyStore } from '/@/store';
 import { getTextByModeCode, getTextByDockModeCode } from '/@/utils/index'
+import EventBus from '/@/event-bus'
 import { EModeCode, EDockModeCode } from '/@/types/device';
 
 interface Props {
@@ -598,9 +600,22 @@ const clarityList: SelectOption[] = [
 ]
 
 interface State {
+  uploadQuantity: number,
+  uploadTotal: number,
   airportLiveVisible: boolean,
   deviceLiveVisible: boolean,
   droneControlPanelVisible: boolean,
+}
+
+const state: State = reactive({
+  uploadQuantity: 0,
+  uploadTotal: 0,
+  airportLiveVisible: false,
+  deviceLiveVisible: false,
+  droneControlPanelVisible: false,
+})
+
+interface AirportLive {
   cameraList: SelectOption[],
   cameraValue?: string,
   videoList: SelectOption[],
@@ -611,10 +626,29 @@ interface State {
   playerUrl: string,
 }
 
-const state: State = reactive({
-  airportLiveVisible: false,
-  deviceLiveVisible: false,
-  droneControlPanelVisible: false,
+const airportLive: AirportLive = reactive({
+  cameraList: [],
+  cameraValue: undefined,
+  videoList: [],
+  videoValue: undefined,
+  clarityValue: 0,
+  videoId: '',
+  playerText: '',
+  playerUrl: '',
+})
+
+interface DeviceLive {
+  cameraList: SelectOption[],
+  cameraValue?: string,
+  videoList: SelectOption[],
+  videoValue?: string,
+  clarityValue: number,
+  videoId: string,
+  playerText: string,
+  playerUrl: string,
+}
+
+const deviceLive: DeviceLive = reactive({
   cameraList: [],
   cameraValue: undefined,
   videoList: [],
@@ -629,16 +663,30 @@ const fetchLiveCapacity = async () => {
   try {
     const res = await getLiveCapacity({});
     if (res.code === 0) {
+      const dockInfo = res.data.filter((item: any) => item.sn === props.osdInfo.gateway_sn)[0];
       const deviceInfo = res.data.filter((item: any) => item.sn === props.osdInfo.sn)[0];
-      const cameras_list = deviceInfo.cameras_list || [];
-      const cameraList = cameras_list.map((item: any) => {
-        return {
-          label: item.name,
-          value: item.index,
-          more: item.videos_list
-        }
-      })
-      state.cameraList = cameraList;
+      const getDockCameraList = (list: any) => {
+        const cameraList = list.map((item: any) => {
+          return {
+            label: item.name,
+            value: item.index,
+            more: item.videos_list
+          }
+        })
+        airportLive.cameraList = cameraList;
+      }
+      const getDeviceCameraList = (list: any) => {
+        const cameraList = list.map((item: any) => {
+          return {
+            label: item.name,
+            value: item.index,
+            more: item.videos_list
+          }
+        })
+        deviceLive.cameraList = cameraList;
+      }
+      getDockCameraList(dockInfo.cameras_list || []);
+      getDeviceCameraList(deviceInfo.cameras_list || []);
     }
   } catch (e: any) {
     console.error(e);
@@ -646,11 +694,21 @@ const fetchLiveCapacity = async () => {
 }
 
 onMounted(async () => {
-  await fetchLiveCapacity()
+  function handleTaskWsEvent(payload: any) {
+    if (!payload) {
+      return
+    }
+    state.uploadQuantity = payload.uploaded_file_count;
+    state.uploadTotal = payload.expected_file_count;
+  }
+  onMounted(() => {
+    EventBus.on('flightTaskWs', handleTaskWsEvent)
+  })
+  await fetchLiveCapacity();
 })
 
-const onCameraSelect = (record: SelectOption) => {
-  state.cameraValue = record.value;
+const onDockCameraSelect = (record: SelectOption) => {
+  airportLive.cameraValue = record.value;
   if (!record.more) {
     return
   }
@@ -661,37 +719,95 @@ const onCameraSelect = (record: SelectOption) => {
       more: ele.switch_video_types
     }
   })
-  state.videoList = videoList;
+  airportLive.videoList = videoList;
   if (videoList.length === 0) {
     return;
   }
   const firstVideo: SelectOption = videoList[0];
-  state.videoValue = firstVideo.value;
+  airportLive.videoValue = firstVideo.value;
 }
 
-const onClaritySelect = (value: any) => {
-  state.clarityValue = value;
+const onDockStartLive = async () => {
+  const { cameraValue, videoValue } = airportLive;
+  if (!cameraValue) {
+    return message.warn('请选择摄像头');
+  }
+  const videoId = `${props.osdInfo.gateway_sn}/${cameraValue}/${videoValue || 'normal-0'}`;
+  airportLive.videoId = videoId;
+  try {
+    const res = await startLivestream({
+      video_id: videoId,
+      url_type: 1,// RTMP 
+      video_quality: airportLive.clarityValue
+    });
+    if (res.code !== 0) {
+      airportLive.playerText = res.message;
+    } else {
+      const playerUrl = res.data.url;
+      airportLive.playerText = '';
+      airportLive.playerUrl = playerUrl;
+      message.success('已开启直播');
+    }
+  } catch (e: any) {
+    console.error(e);
+  }
+}
+
+const onDockStopLive = async () => {
+  const { cameraValue, videoValue } = airportLive;
+  if (!cameraValue) {
+    return message.warn('请选择摄像头');
+  }
+  const videoId = `${props.osdInfo.gateway_sn}/${cameraValue}/${videoValue || 'normal-0'}`;
+  const res = await stopLivestream({
+    video_id: videoId,
+  });
+  if (res.code === 0) {
+    airportLive.videoId = '';
+    airportLive.playerUrl = '';
+    message.success('已停止直播');
+  }
+}
+
+const onDeviceCameraSelect = (record: SelectOption) => {
+  deviceLive.cameraValue = record.value;
+  if (!record.more) {
+    return
+  }
+  const videoList = record.more.map((ele: any) => {
+    return {
+      label: ele.type,
+      value: ele.index,
+      more: ele.switch_video_types
+    }
+  })
+  deviceLive.videoList = videoList;
+  if (videoList.length === 0) {
+    return;
+  }
+  const firstVideo: SelectOption = videoList[0];
+  deviceLive.videoValue = firstVideo.value;
 }
 
-const onStart = async () => {
-  const { cameraValue, videoValue } = state;
+const onDeviceStartLive = async () => {
+  const { cameraValue, videoValue } = deviceLive;
   if (!cameraValue) {
     return message.warn('请选择摄像头');
   }
   const videoId = `${props.osdInfo.sn}/${cameraValue}/${videoValue || 'normal-0'}`;
-  state.videoId = videoId;
+  deviceLive.videoId = videoId;
   try {
     const res = await startLivestream({
       video_id: videoId,
       url_type: 1,// RTMP 
-      video_quality: state.clarityValue
+      video_quality: deviceLive.clarityValue
     });
     if (res.code !== 0) {
-      state.playerText = res.message;
+      deviceLive.playerText = res.message;
     } else {
       const playerUrl = res.data.url;
-      state.playerText = '';
-      state.playerUrl = playerUrl;
+      deviceLive.playerText = '';
+      deviceLive.playerUrl = playerUrl;
       message.success('已开启直播');
     }
   } catch (e: any) {
@@ -699,8 +815,8 @@ const onStart = async () => {
   }
 }
 
-const onStop = async () => {
-  const { cameraValue, videoValue } = state;
+const onDeviceStopLive = async () => {
+  const { cameraValue, videoValue } = deviceLive;
   if (!cameraValue) {
     return message.warn('请选择摄像头');
   }
@@ -709,8 +825,8 @@ const onStop = async () => {
     video_id: videoId,
   });
   if (res.code === 0) {
-    state.videoId = '';
-    state.playerUrl = '';
+    deviceLive.videoId = '';
+    deviceLive.playerUrl = '';
     message.success('已停止直播');
   }
 }

Web/src/components/onLineDevice/components/InfoModal.vue

@@ -55,17 +55,16 @@
                   {{ item.label }}
                 </a-select-option>
               </a-select>
-              <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度" v-model:value="state.clarityValue"
-                @select="onClaritySelect">
+              <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度" v-model:value="state.clarityValue">
                 <a-select-option v-for="item in clarityList" :key="item.value" :value="item.value">
                   {{ item.label }}
                 </a-select-option>
               </a-select>
               <a-tooltip title="播放">
-                <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onStart" />
+                <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onStartLive" />
               </a-tooltip>
               <a-tooltip title="停止">
-                <a-button :icon="h(PoweroffOutlined)" @click="onStop" />
+                <a-button :icon="h(PoweroffOutlined)" @click="onStopLive" />
               </a-tooltip>
             </div>
           </div>
@@ -231,7 +230,6 @@ import batteryThreeSrc from '../icons/batteryThree.svg';
 import batteryFourSrc from '../icons/batteryFour.svg';
 import windSrc from '../icons/info/wind.svg';
 import homeSrc from '../icons/info/home.svg';
-import { CURRENT_CONFIG as config } from '/@/api/http/config';
 import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage';
 import { getTextByModeCode } from '/@/utils/index'
 
@@ -454,11 +452,7 @@ const onCameraSelect = (record: SelectOption) => {
   state.videoValue = firstVideo.value;
 }
 
-const onClaritySelect = (value: any) => {
-  state.clarityValue = value;
-}
-
-const onStart = async () => {
+const onStartLive = async () => {
   const { cameraValue, videoValue } = state;
   if (!cameraValue) {
     return message.warn('请选择摄像头');
@@ -484,7 +478,7 @@ const onStart = async () => {
   }
 }
 
-const onStop = async () => {
+const onStopLive = async () => {
   const { cameraValue, videoValue } = state;
   if (!cameraValue) {
     return message.warn('请选择摄像头');