<template>
|
<div class="drone-warp">
|
<div class="tabs-list">
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
<el-tab-pane label="机场" name="first">
|
<el-select v-model="selectedValue" placeholder="请选择" style="width: 240px">
|
<el-option
|
v-for="item in cardList"
|
:key="item.id"
|
:label="item.nickname"
|
:value="item.workspace_id"
|
/>
|
</el-select>
|
</el-tab-pane>
|
<el-tab-pane label="遥控器" name="second">
|
<el-select v-model="selectedValue" placeholder="请选择" style="width: 240px">
|
<el-option
|
v-for="item in cardList"
|
:key="item.id"
|
:label="item.nickname"
|
:value="item.workspace_id"
|
/>
|
</el-select>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="airport-type">
|
<p>无人机型号</p>
|
</div>
|
<div class="video-play">
|
<video v-show="videoUrl" class="video-js" :src="videoSrc" :id="videoPlayerId"></video>
|
<el-empty v-show="videoUrl == ''" description="当前设备已关机，无法进行直播" :image="imageUrl"></el-empty>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted } from 'vue'
|
import type { TabsPaneContext } from 'element-plus'
|
import { projectCard } from './components/data'
|
import { getPlatformByUser } from '@/api/manage'
|
import videojs from 'video.js'
|
import { startLivestream, getLiveCapacity } from '@/api/manage'
|
import { CURRENT_CONFIG as config } from '@/api/http/config'
|
|
const activeName = ref('first')
|
|
const videoPlayerId = ref('videoPlayerId')
|
// loading
|
const spinning = ref<boolean>(false)
|
// 选中值
|
const selectedValue = ref<String>('')
|
const selectedId = ref<String>('')
|
// 机场/遥控器列表
|
const cardList = ref<projectCard[]>([])
|
// 视频地址
|
const videoUrl = ref<String>('')
|
// 设置图片地址
|
const imageUrl = new URL('@/assets/images/norecord.png', import.meta.url).href// ref<String>('@/assets/images/norecord.png')
|
|
// 下拉事件
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
console.log(tab, event)
|
}
|
|
const videoSrc = ref('')
|
|
// 页面初始化
|
const init = async () => {
|
spinning.value = true
|
const res = await getPlatformByUser().catch(e => {
|
spinning.value = false
|
})
|
// 默认第一个机场
|
selectedValue.value = res.data[0].nickname
|
selectedId.value = res.data[0].workspace_id
|
cardList.value = res.data
|
// 加载视频接口
|
loadVideo()
|
// cesium.removeAllPoint()
|
// cesium.removeAllDataSource()
|
spinning.value = false
|
}
|
|
// 加载该设备的视频信息
|
const loadVideo = async () => {
|
await getLiveCapacity({ id: selectedId.value }).then((res) => {
|
console.log('草草草草', res)
|
if (res.code != 0) return
|
const resultData = res.data || {}
|
const airport = resultData[1] // 会返回机场 和 无人机视频
|
// if (airport == undefined) return
|
const cameras_list = airport.cameras_list || []
|
const videos_list = airport?.cameras_list?.[0].videos_list || []
|
const videoId = airport.sn + '/' + cameras_list[0].index + '/' + videos_list[0].index
|
const streamId = airport.sn + '-' + cameras_list[0].index + '-' + videos_list[0].index
|
// 根据机场视频信息，更新无人机视频
|
startLivestream({
|
url: config.rtmpURL + streamId,
|
video_id: videoId,
|
url_type: 1,
|
video_quality: 1,
|
type: 2,
|
}).then((res) => {
|
console.log('获取视频地址',res)
|
videoUrl.value = res.data.fmp4_url
|
viewVideo(res.data.fmp4_url)
|
})
|
})
|
}
|
|
// 视频展示
|
async function viewVideo (url: string) {
|
console.log(url, 'cccc')
|
// videoSrc.value = url
|
// return
|
// showVideo.value = true
|
// await nextTick()
|
const player = videojs(videoPlayerId.value, {
|
autoplay: true, // 自动播放
|
controls: true, // 控件 设置为true，控件才会显示
|
fullscreenToggle: true, // 是否显示全屏按钮
|
playToggle: true, // 是否显示播放按钮
|
progressControl: true, // 是否显示进度条。除了boolean，还可以设置一个ProgressControlOptions对象，更详细的配置进度条。
|
volumePanel: true, // 是否显示音量。除了boolean，还可以设置一个VolumePanelOptions对象，更详细的配置音量组件。
|
pictureInPictureToggle: false, // 是否显示画中画按钮
|
remainingTimeDisplay: true, // 是否显示时长
|
|
})
|
|
player.src(url)
|
player.on('ended', () => {
|
// showVideo.value = false
|
})
|
|
player.on('error', () => {
|
const error = player.error()
|
console.log('video error:' + error.code + '-' + error.message)
|
})
|
}
|
|
onMounted(() => {
|
init()
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
.drone-warp {
|
height: 100vh;
|
.airport-type {
|
margin-top: 2%;
|
height: 6%;
|
width: 100%;
|
background: rgba(31, 198, 255, 0.12);
|
border: 1px solid rgba(0, 175, 255, 0.3);
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
p {
|
font-size: 16px;
|
color: #1fc6ff;
|
line-height: 40px;
|
margin-left: 10px;
|
cursor: pointer;
|
|
&:first-child {
|
margin: 0;
|
}
|
}
|
}
|
.video-play {
|
width: 100%;
|
height: calc(100vh - 50%);
|
}
|
}
|
</style>
|
