| | |
| | | </div> |
| | | </div> |
| | | <!-- 机场OSD --> |
| | | <div class="osd-panel fz12" v-if="osdVisible.visible && osdVisible.is_dock"> |
| | | <!-- && osdVisible.is_dock --> |
| | | <div class="osd-panel fz12" v-if="osdVisible.visible"> |
| | | <div class="fz16 pl5 pr5 flex-align-center flex-row flex-justify-between" |
| | | style="border-bottom: 1px solid #515151; height: 10%;"> |
| | | <span>{{ osdVisible.gateway_callsign }}</span> |
| | | <span><a style="color: white;" @click="() => osdVisible.visible = false"> |
| | | <span><a style="color: white;" @click="closeOsdWindow"> |
| | | <CloseOutlined /> |
| | | </a></span> |
| | | </div> |
| | |
| | | </a-col> |
| | | <a-col span="11"> |
| | | <a-button :class="[showOption?'active-color':'unactive-color']" class="width-100" type="primary" :disabled="dockControlPanelVisible" size="small" |
| | | @click="setDockControlPanelVisible(true)"> |
| | | @click="openFlySetting"> |
| | | 操作 |
| | | </a-button> |
| | | </a-col> |
| | | </a-row> |
| | | <!-- 机场控制面板 --> |
| | | <DockControlPanel v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" |
| | | @close-control-panel="onCloseControlPanel"> |
| | | @close-control-panel="closeOperate"> |
| | | </DockControlPanel> |
| | | </div> |
| | | </div> |
| | | <a-row class="p5" v-if="showMonitor" justify="center" align="middle"> |
| | | <!-- <a-spin :spinning="spinning"> --> |
| | | <Jessibuca v-if="airPortUrl" :videoUrl="airPortUrl" width="100%" height="300px" /> |
| | | <Jessibuca v-if="airPortUrl" @timeout="airTimeout" :videoUrl="airPortUrl" width="100%" height="300px" /> |
| | | <!-- </a-spin> --> |
| | | </a-row> |
| | | <!-- 飞机--> |
| | |
| | | <a-row align="middle" justify="center"> |
| | | <a-col span="24"> <div v-if="deviceInfo.device?.mode_code == 14 || !deviceInfo.device" style="color:#494949;" class="flex-display flex-justify-center mt5 mb5">当前设备已关机,无法进行直播</div> </a-col> |
| | | </a-row> |
| | | <a-row align="middle" justify="center"> |
| | | <a-col span="24"> |
| | | <a-row class="p5" align="middle" justify="space-between"> |
| | | <a-col span="11"> |
| | | <a-button :disabled="deviceInfo.device?.mode_code == 14 || !deviceInfo.device?true:false" :class="[showAircraft?'active-color':'unactive-color']" class="width-100" type="primary" size="small" @click="openAircra"> |
| | | 飞行控制 |
| | | </a-button> |
| | | </a-col> |
| | | <a-col span="11"> |
| | | <a-button :class="[openDroneControl?'active-color':'unactive-color']" class="width-100" type="primary" size="small" |
| | | @click="openDeviceSetting"> |
| | | 操作 |
| | | </a-button> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <!-- 飞机直播 --> |
| | | <a-row class="p5" v-if="showAircraft"> |
| | | <!-- <a-spin :spinning="spinning"> --> |
| | | <Jessibuca v-if="aircraftUrl" :videoUrl="aircraftUrl" width="100%" height="300px" /> |
| | | <Jessibuca v-if="aircraftUrl" @timeout="flyTimeout" :videoUrl="aircraftUrl" width="100%" height="300px" /> |
| | | <!-- </a-spin> --> |
| | | </a-row> |
| | | <!-- 飞机图标信息 --> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 飞行指令 --> |
| | | <DroneControlPanel :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" :payloads="osdVisible.payloads"> |
| | | <DroneControlPanel v-model="openDroneControl" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" :payloads="osdVisible.payloads"> |
| | | </DroneControlPanel> |
| | | </div> |
| | | </div> |
| | |
| | | label: string, |
| | | more?: any |
| | | } |
| | | // 打开飞行控制 |
| | | const openDroneControl = ref(false) |
| | | const root = getRoot() |
| | | // 监控显示 |
| | | const showMonitor = ref(false) |
| | | // 操作显示 |
| | | const showOption = ref(false) |
| | | // 飞行控制显示 |
| | | const showFly = ref(false) |
| | | const mouseMode = ref(false) |
| | | const store = useMyStore() |
| | | // 机场直播地址 |
| | |
| | | // 视频列表选择值 |
| | | const videoList = ref() |
| | | const videoIndex = ref(0) |
| | | // 机场加载值 |
| | | |
| | | // 飞机视频播放地址 |
| | | const aircraftUrl = ref('') |
| | |
| | | const drawVisible = computed(() => { |
| | | return store.state.drawVisible |
| | | }) |
| | | const osdVisible = computed(() => { |
| | | return store.state.osdVisible |
| | | }) |
| | | const osdVisible = computed(() => JSON.parse(JSON.stringify(store.state.osdVisible))) |
| | | const sn = computed(() => { |
| | | return store.state.hmsInfoDetailSn |
| | | }) |
| | |
| | | return val |
| | | } |
| | | }) |
| | | |
| | | // 关闭窗口 |
| | | const closeOsdWindow = () => { |
| | | store.commit('SET_OSD_VISIBLE_INFO', false) |
| | | } |
| | | |
| | | // 打开监控权限 |
| | | const openMonitor = () => { |
| | | showMonitor.value = !showMonitor.value |
| | |
| | | videoList.value = [] |
| | | droneIndex.value = 0 |
| | | cameraIndex.value = 0 |
| | | console.log(deviceInfo, 'deviceInfo', sn.value) |
| | | await getLiveCapacity({ id: store.state.common.projectId }) |
| | | .then(res => { |
| | | if (res.code === 0) { |
| | |
| | | } |
| | | }) |
| | | aircraSelected.value = aircraftList.value[0].value |
| | | console.log(aircraftList.value, 'aircraftList.value') |
| | | flyOnStart() |
| | | } else { |
| | | showAircraft.value = false |
| | |
| | | message.error(error) |
| | | }) |
| | | } |
| | | // 机场视频超时说明可能直播被关闭需要重新开启直播 |
| | | const airTimeout = () => { |
| | | try { |
| | | onStart() |
| | | } catch (e) { |
| | | onClose() |
| | | } |
| | | } |
| | | const flyTimeout = () => { |
| | | try { |
| | | flyOnStart() |
| | | } catch (e) { |
| | | closeFly() |
| | | } |
| | | } |
| | | // 设备开始播放 |
| | | const onStart = async () => { |
| | | airPortUrl.value = '' |
| | | const videoId = droneList.value[droneIndex.value].value + '/' + cameraList.value[cameraIndex.value].value + '/' + videoList.value[videoIndex.value].value |
| | | const streamId = droneList.value[droneIndex.value].value + '-' + cameraList.value[cameraIndex.value].value + '-' + videoList.value[videoIndex.value].value |
| | | const liveURL = config.rtmpURL + streamId |
| | |
| | | aircraftList.value = [] |
| | | aircraSelected.value = '' |
| | | } |
| | | // 打开机场操作 |
| | | const openFlySetting = () => { |
| | | openDroneControl.value = false |
| | | setDockControlPanelVisible(true) |
| | | } |
| | | // 打开无人机操作 |
| | | const openDeviceSetting = () => { |
| | | setDockControlPanelVisible(false) |
| | | openDroneControl.value = !openDroneControl.value |
| | | } |
| | | watch(() => store.state.deviceStatusEvent, |
| | | data => { |
| | | if (Object.keys(data.deviceOnline).length !== 0) { |
| | |
| | | store.state.deviceStatusEvent.deviceOnline = {} as DeviceStatus |
| | | } |
| | | if (Object.keys(data.deviceOffline).length !== 0) { |
| | | // deviceTsaUpdateHook.removeMarker(data.deviceOffline.sn) |
| | | if ((data.deviceOffline.sn === osdVisible.value.sn) || (osdVisible.value.is_dock && data.deviceOffline.sn === osdVisible.value.gateway_sn)) { |
| | | osdVisible.value.visible = false |
| | | store.commit('SET_OSD_VISIBLE_INFO', osdVisible) |
| | | } |
| | | store.state.deviceStatusEvent.deviceOffline = {} |
| | | } |
| | | }, |
| | |
| | | deep: true |
| | | } |
| | | ) |
| | | |
| | | watch(() => store.state.deviceState, data => { |
| | | if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) { |
| | | if (osdVisible.value.visible && osdVisible.value.gateway_sn !== '') { |
| | |
| | | } |
| | | } |
| | | }, { |
| | | deep: true |
| | | deep: true, |
| | | }) |
| | | |
| | | watch(() => osdVisible.value, (data, oldData) => { |
| | | showMonitor.value = false |
| | | aircraftUrl.value = '' |
| | | showAircraft.value = false |
| | | aircraftList.value = [] |
| | | aircraSelected.value = '' |
| | | airPortUrl.value = '' |
| | | droneList.value = [] |
| | | if (deviceInfo.dock.basic_osd?.mode_code === 2) { |
| | | onCloseControlPanel(oldData.gateway_sn) |
| | | } else { |
| | | setDockControlPanelVisible(false) |
| | | } |
| | | }, { |
| | | deep: true, |
| | | }) |
| | | watch( |
| | | () => store.state.wsEvent, |
| | | newData => { |
| | |
| | | setDockControlPanelVisible, |
| | | onCloseControlPanel, |
| | | } = useDockControl() |
| | | |
| | | // 关闭设备控制方法 |
| | | const closeOperate = (sn:string) => { |
| | | if (deviceInfo.dock.basic_osd?.mode_code === 2) { |
| | | onCloseControlPanel(sn) |
| | | } else { |
| | | setDockControlPanelVisible(false) |
| | | } |
| | | } |
| | | // 连接或断开drc |
| | | useConnectMqtt() |
| | | |
| | |
| | | sn, |
| | | showMonitor, |
| | | showOption, |
| | | showFly, |
| | | airPortUrl, |
| | | openMonitor, |
| | | droneIndex, |
| | |
| | | aircraftList, |
| | | aircraSelected, |
| | | selectChange, |
| | | closeOperate, |
| | | closeOsdWindow, |
| | | openDroneControl, |
| | | openFlySetting, |
| | | openDeviceSetting, |
| | | airTimeout, |
| | | flyTimeout |
| | | } |
| | | } |
| | | }) |
| | |
| | | position: absolute; |
| | | min-height: 2px; |
| | | border-radius: 2px; |
| | | }</style> |
| | | } |
| | | </style> |