设备视频

.eslintrc.js

@@ -3,9 +3,10 @@ module.exports = {
     browser: true,
     commonjs: true,
     es2021: true,
-    node: true
+    node: true,
   },
-  extends: ['standard', 'plugin:vue/vue3-essential'],
+  parser: 'vue-eslint-parser',
+  extends: ['standard','eslint:recommended', 'plugin:vue/vue3-essential'],
   parserOptions: {
     ecmaVersion: 12,
     parser: '@typescript-eslint/parser'

package.json

@@ -53,6 +53,7 @@
     "vite-plugin-style-import": "^1.0.1",
     "vite-plugin-svg-icons": "^1.0.5",
     "vite-plugin-vconsole": "^1.1.0",
+    "vue-eslint-parser": "^9.3.1",
     "vue-tsc": "^0.0.24"
   },
   "license": "ISC",

src/api/manage.ts

@@ -69,6 +69,13 @@ export const getLiveCapacity = async function (body: {}): Promise<IWorkspaceResp
   return result.data
 }
 
+// 设备信息
+export const getLiveSnCapacity = async function (id:any): Promise<IWorkspaceResponse<any>> {
+  const url = `${HTTP_PREFIX}/live/capacity?sn=${id}`
+  const result = await request.get(url)
+  return result.data
+} 
+
 // Start Livestream
 export const startLivestream = async function (body: {}): Promise<IWorkspaceResponse<any>> {
   const url = `${HTTP_PREFIX}/live/streams/start`

src/components/GMap.vue

@@ -140,14 +140,14 @@
             {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }}
           </div>
         </div>
-        <div class="fz14">
-          <div @click="play()">直播视频</div>
+        <div class="fz14 content-padding">
+          <div @click="play()" class="video-btn"><a style="color: white;"><VideoCameraOutlined /></a>直播视频</div>
         </div>
       </div>
       <div class="live" v-if="showLive">
         <!-- <div>2222</div> -->
         <!-- <router-view :name="routeName" /> -->
-        <LiveNewOthers></LiveNewOthers>
+        <LiveNewOthers ref="liveStreamRef"></LiveNewOthers>
       </div>
     </div>
     <!-- <div class="osd-panel2 fz12">
@@ -430,7 +430,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue'
+import { computed, defineComponent, onMounted, reactive, ref, watch, nextTick } from 'vue'
 import {
   generateLineContent,
   generatePointContent,
@@ -459,7 +459,7 @@ import {
   BorderOutlined, LineOutlined, CloseOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,
   ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined,
   FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined,
-  EyeInvisibleOutlined
+  EyeInvisibleOutlined, VideoCameraOutlined
 } from '@ant-design/icons-vue'
 import { EDeviceTypeName } from '../types'
 import DockControlPanel from './g-map/DockControlPanel.vue'
@@ -485,6 +485,7 @@ export default defineComponent({
     CloudOutlined,
     CloudFilled,
     FolderOpenOutlined,
+    VideoCameraOutlined,
     RobotFilled,
     ArrowUpOutlined,
     ArrowDownOutlined,
@@ -502,7 +503,7 @@ export default defineComponent({
     const root = getRoot()
     // const routeName = ref<string>('LiveOthers')
     const showLive = ref(false)
-
+    const liveStreamRef = ref()
     const mouseMode = ref(false)
     const store = useMyStore()
     const state = reactive({
@@ -660,9 +661,11 @@ export default defineComponent({
       mouseMode.value = bool
     }
     function play () {
-      console.log(222)
       // routeName.value = 'LiveOthers'
-      showLive.value = true
+      showLive.value = !showLive.value
+      nextTick(() => {
+        showLive.value ? liveStreamRef.value.onStart() : liveStreamRef.value.onStop()
+      })
     }
 
     // dock 控制面板
@@ -769,7 +772,7 @@ export default defineComponent({
       // layer.id = 'private_layer' + uuidv4()
       // layer?.elements.push(resource)
       if (layer?.elements) {
-        ;(layer?.elements as any[]).push(resource)
+        (layer?.elements as any[]).push(resource)
       }
       // console.log('layers', layers)
       // store.commit('SET_LAYER_INFO', layers)
@@ -840,6 +843,7 @@ export default defineComponent({
     return {
       draw,
       play,
+      liveStreamRef,
       showLive,
       // routeName,
       mouseMode,
@@ -911,6 +915,17 @@ export default defineComponent({
   color: #fff;
   border-radius: 2px;
   /* opacity: 0.8; */
+  .content-padding{
+    padding:16px;
+    .video-btn{
+      cursor:pointer;
+      text-align: center;
+      padding:2px 16px;
+      width:160px;
+      background-color:#1fa3f6;
+
+    }
+  }
 }
 .live{
   background: #000;

src/components/livestream-newOthers.vue

@@ -8,7 +8,6 @@
       class="mt20"
     ></video>
     <p class="fz24">Live streaming source selection</p>
-
     <div class="">
       <template v-if="liveState && isDockLive">
         <span class="mr10">Lens:</span>
@@ -17,7 +16,7 @@
         </a-radio-group>
       </template>
       <template v-else>
-      <a-select
+      <!-- <a-select
         style="width: 100px"
         placeholder="Select Live Type"
         @select="onLiveTypeSelect"
@@ -30,8 +29,8 @@
         >
           {{ item.label }}
         </a-select-option>
-      </a-select>
-      <a-select
+      </a-select> -->
+      <!-- <a-select
         class="ml10"
         style="width:100px"
         placeholder="Select Drone"
@@ -44,8 +43,8 @@
           @click="onDroneSelect(item)"
           >{{ item.label }}</a-select-option
         >
-      </a-select>
-      <a-select
+      </a-select> -->
+      <!-- <a-select
         class="ml10"
         style="width:100px"
         placeholder="Select Camera"
@@ -58,7 +57,7 @@
           @click="onCameraSelect(item)"
           >{{ item.label }}</a-select-option
         >
-      </a-select>
+      </a-select> -->
       <!-- <a-select
         class="ml10"
         style="width:150px"
@@ -99,10 +98,10 @@
     </div>
     <div class="flex-row flex-justify-center flex-align-center" style="margin-bottom: 20px;">
       <a-button v-if="liveState && isDockLive" type="primary" large @click="onSwitch">Switch Lens</a-button>
-      <a-button v-else type="primary" large @click="onStart">Play</a-button>
+      <!-- <a-button v-else type="primary" large @click="onStart">Play</a-button>
       <a-button class="ml20" type="primary" large @click="onStop"
         >Stop</a-button
-      >
+      > -->
       <!-- <a-button class="ml20" type="primary" large @click="onUpdateQuality"
         >Update Clarity</a-button
       >
@@ -115,11 +114,13 @@
 
 <script lang="ts" setup>
 import { message } from 'ant-design-vue'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, computed, ref } from 'vue'
 import { CURRENT_CONFIG as config } from '/@/api/http/config'
-import { changeLivestreamLens, getLiveCapacity, setLivestreamQuality, startLivestream, stopLivestream } from '/@/api/manage'
+import { changeLivestreamLens, getLiveSnCapacity, setLivestreamQuality, startLivestream, stopLivestream } from '/@/api/manage'
 import { getRoot } from '/@/root'
+import { useMyStore } from '/@/store'
 import jswebrtc from '/@/vendors/jswebrtc.min.js'
+const store = useMyStore()
 const root = getRoot()
 
 interface SelectOption {
@@ -173,16 +174,18 @@ const videoList = ref()
 const droneSelected = ref()
 const cameraSelected = ref()
 const videoSelected = ref()
-const claritySelected = ref()
+const claritySelected = ref(0)
 const videoId = ref()
 const liveState = ref<boolean>(false)
-const livetypeSelected = ref()
+const livetypeSelected = ref(1)
 const rtspData = ref()
 const lensList = ref<string[]>([])
 const lensSelected = ref<String>()
 const isDockLive = ref(false)
 const nonSwitchable = 'normal'
-
+const osdVisible = computed(() => {
+  return store.state.osdVisible
+})
 const onRefresh = async () => {
   droneList.value = []
   cameraList.value = []
@@ -190,7 +193,7 @@ const onRefresh = async () => {
   droneSelected.value = null
   cameraSelected.value = null
   videoSelected.value = null
-  await getLiveCapacity({})
+  await getLiveSnCapacity(osdVisible.value.sn)
     .then(res => {
       console.log(res)
       if (res.code === 0) {
@@ -207,7 +210,7 @@ const onRefresh = async () => {
           livestreamSource.value.forEach((ele: any) => {
             temp.push({ label: ele.name + '-' + ele.sn, value: ele.sn, more: ele.cameras_list })
           })
-          droneList.value = temp
+          droneSelected.value = temp[0].value
         }
       }
     })
@@ -231,9 +234,6 @@ const onStart = async () => {
   )
   const timestamp = new Date().getTime().toString()
   if (
-    livetypeSelected.value == null ||
-    droneSelected.value == null ||
-    cameraSelected.value == null ||
     claritySelected.value == null
   ) {
     message.warn('waring: not select live para!!!')
@@ -366,6 +366,7 @@ const onDroneSelect = (val: SelectOption) => {
     temp.push({ label: ele.name, value: ele.index, more: ele.videos_list })
   })
   cameraList.value = temp
+  cameraSelected.value = cameraList.value[0].value
 }
 const onCameraSelect = (val: SelectOption) => {
   cameraSelected.value = val.value
@@ -412,6 +413,8 @@ const onSwitch = () => {
     }
   })
 }
+defineExpose({ onStart, onStop })
+
 </script>
 
 <style lang="scss" scoped>

src/pages/page-web/projects/tsa.vue

@@ -137,12 +137,11 @@
         </a-collapse-panel>
       </a-collapse>
       <a-collapse :bordered="false" expandIconPosition="right" accordion style="background: #232323;">
-        <a-collapse-panel :key="EDeviceTypeName.Aircraft" header="Online Devices" style="border-bottom: 1px solid #4f4f4f;">
-          <div v-if="onlineDevices.data.length === 0" style="height: 150px; color: white;">
-            <div style="background: red;" @click="cheshi">设备测试</div>
+        <a-collapse-panel v-if='!onlineDevices.data.length' :key="EDeviceTypeName.Aircraft" header="Online Devices" style="border-bottom: 1px solid #4f4f4f;">
+          <div style="height: 150px; color: white;">
             <a-empty :image="noData" :image-style="{ height: '60px' }" />
           </div>
-          <div v-else class="fz12" style="color: white;">
+          <div   class="fz12" style="color: white;" v-else>
             <div v-for="device in onlineDevices.data" :key="device.sn" style="background: #3c3c3c; height: 90px; width: 250px; margin-bottom: 10px;">
               <div class="battery-slide" v-if="deviceInfo[device.sn]">
                 <div style="background: #535759; width: 100%;"></div>