|
|
|
|
|
|
|
|
<VideoPlayer |
|
|
<VideoPlayer |
|
|
id="emergency-video" |
|
|
id="emergency-video" |
|
|
ref="emergencyVideo" |
|
|
ref="emergencyVideo" |
|
|
style="position: absolute;left: 0;top: 0" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
:use-empty="true" |
|
|
|
|
|
> |
|
|
|
|
|
<template #empty> |
|
|
|
|
|
<div class="video__item--empty"> |
|
|
|
|
|
<img src="@/assets/images/lose-control.png"> |
|
|
|
|
|
<p>暂无信号</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</VideoPlayer> |
|
|
</div> |
|
|
</div> |
|
|
</n-drawer-content> |
|
|
</n-drawer-content> |
|
|
</n-drawer> |
|
|
</n-drawer> |
|
|
|
|
|
|
|
|
import SpeedChart from './SpeedChart.vue' |
|
|
import SpeedChart from './SpeedChart.vue' |
|
|
import { useInspectionStore } from '@/store/modules/inspection.js' |
|
|
import { useInspectionStore } from '@/store/modules/inspection.js' |
|
|
import VideoPlayer from '@/components/VideoPlayer/index.vue' |
|
|
import VideoPlayer from '@/components/VideoPlayer/index.vue' |
|
|
import { controlAir, emergencyRecord, uavInfo } from '@/api/task/index.js' |
|
|
|
|
|
|
|
|
import { controlAir, emergencyRecord, uavInfo, getTaskDetail } from '@/api/task/index.js' |
|
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
export default defineComponent({ |
|
|
name: 'WarningDrawer', |
|
|
name: 'WarningDrawer', |
|
|
|
|
|
|
|
|
operate: '悬停', |
|
|
operate: '悬停', |
|
|
control: '手动控制', |
|
|
control: '手动控制', |
|
|
chartData: {}, |
|
|
chartData: {}, |
|
|
uavFireDis: null |
|
|
|
|
|
|
|
|
uavFireDis: null, |
|
|
|
|
|
chartTimer: null, |
|
|
|
|
|
liveTimer: null |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
/* 获取抽屉的信息 */ |
|
|
/* 获取抽屉的信息 */ |
|
|
|
|
|
|
|
|
// 关闭视频播放 |
|
|
// 关闭视频播放 |
|
|
emergencyVideo.value?.disposeVideo() |
|
|
emergencyVideo.value?.disposeVideo() |
|
|
// inspectionStore.resetList() |
|
|
// inspectionStore.resetList() |
|
|
|
|
|
// 关闭定时器 |
|
|
|
|
|
clearTimer() |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const getEmergencyRecord = async(id) => { |
|
|
const getEmergencyRecord = async(id) => { |
|
|
|
|
|
|
|
|
if (value) { |
|
|
if (value) { |
|
|
// 获取无人机实时数据,绘制表格 |
|
|
// 获取无人机实时数据,绘制表格 |
|
|
// if (value.airportId) { |
|
|
// if (value.airportId) { |
|
|
// setInterval(() => { |
|
|
|
|
|
|
|
|
// data.chartTimer = setInterval(() => { |
|
|
// getUavInfo(value.airportId) |
|
|
// getUavInfo(value.airportId) |
|
|
// }, 2000) |
|
|
// }, 2000) |
|
|
// } |
|
|
// } |
|
|
// console.log(value) |
|
|
|
|
|
// setTimeout(() => { |
|
|
|
|
|
// initOriginPlayer(value) |
|
|
|
|
|
// }, 3000) |
|
|
|
|
|
|
|
|
data.liveTimer = setInterval(async() => { |
|
|
|
|
|
const res = await getTaskDetail(value.id) |
|
|
|
|
|
if (res.code === 0) { |
|
|
|
|
|
console.log(res.data) |
|
|
|
|
|
if (res.data.aiplayUrl) { |
|
|
|
|
|
console.log('有流了') |
|
|
|
|
|
clearInterval(data.liveTimer) |
|
|
|
|
|
data.liveTimer = null |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
initOriginPlayer(value) |
|
|
|
|
|
}, 3000) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, 2000) |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (res.code === 0) { |
|
|
if (res.code === 0) { |
|
|
console.log('返航成功') |
|
|
console.log('返航成功') |
|
|
|
|
|
data.operate = '悬停' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const clearTimer = () => { |
|
|
|
|
|
if (data.chartTimer) { |
|
|
|
|
|
clearInterval(data.chartTimer) |
|
|
|
|
|
data.chartTimer = null |
|
|
|
|
|
} |
|
|
|
|
|
if (data.liveTimer) { |
|
|
|
|
|
clearInterval(data.liveTimer) |
|
|
|
|
|
data.liveTimer = null |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
onBeforeUnmount(() => { |
|
|
onBeforeUnmount(() => { |
|
|
emergencyVideo.value?.disposeVideo() |
|
|
emergencyVideo.value?.disposeVideo() |
|
|
|
|
|
clearTimer() |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
return { |
|
|
return { |
|
|
|
|
|
|
|
|
transform-origin:100% 0; |
|
|
transform-origin:100% 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.video__item--empty{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
background: rgba(3, 3, 3, 1); |
|
|
|
|
|
img{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 50%; |
|
|
|
|
|
top: 45%; |
|
|
|
|
|
transform: translate(-50%,-50%); |
|
|
|
|
|
} |
|
|
|
|
|
p{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 50%; |
|
|
|
|
|
top: 60%; |
|
|
|
|
|
transform: translate(-50%,-50%); |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |