Compare commits
3 Commits
main
...
1.3.0-beta
| Author | SHA1 | Date |
|---|---|---|
sean.zhou
|
b3adb8adb0 | 2 years ago |
|
sean.zhou
|
1f522544d6 | 2 years ago |
|
sean.zhou
|
1810c61f5a | 2 years ago |
102 changed files with 4800 additions and 16427 deletions
@ -1 +1 @@ |
|||||||
registry=https://registry.npmmirror.com/ |
registry=https://registry.npm.taobao.org/ |
||||||
@ -1,58 +0,0 @@ |
|||||||
import request, { IWorkspaceResponse } from '/@/api/http/request' |
|
||||||
import { ELocalStorageKey } from '/@/types' |
|
||||||
|
|
||||||
// DRC 链路
|
|
||||||
const DRC_API_PREFIX = '/control/api/v1' |
|
||||||
const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId) || '' |
|
||||||
|
|
||||||
export interface PostDrcBody { |
|
||||||
client_id?: string // token过期时，用于续期则必填
|
|
||||||
expire_sec?: number // 过期时间，单位秒，默认3600
|
|
||||||
} |
|
||||||
|
|
||||||
export interface DrcParams { |
|
||||||
address: string |
|
||||||
username: string |
|
||||||
password: string |
|
||||||
client_id: string |
|
||||||
expire_time: number // 过期时间
|
|
||||||
enable_tls: boolean // 是否开启tls
|
|
||||||
} |
|
||||||
|
|
||||||
// 获取 mqtt 连接认证
|
|
||||||
export async function postDrc (body: PostDrcBody): Promise<IWorkspaceResponse<DrcParams>> { |
|
||||||
const resp = await request.post(`${DRC_API_PREFIX}/workspaces/${workspaceId}/drc/connect`, body) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
|
|
||||||
export interface DrcEnterBody { |
|
||||||
client_id: string |
|
||||||
dock_sn: string |
|
||||||
expire_sec?: number // 过期时间，单位秒，默认3600
|
|
||||||
device_info?: { |
|
||||||
osd_frequency?: number |
|
||||||
hsi_frequency?: number |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export interface DrcEnterResp { |
|
||||||
sub: string[] // 需要订阅接收的topic
|
|
||||||
pub: string[] // 推送的topic地址
|
|
||||||
} |
|
||||||
|
|
||||||
// 进入飞行控制 （建立drc连接&获取云控控制权）
|
|
||||||
export async function postDrcEnter (body: DrcEnterBody): Promise<IWorkspaceResponse<DrcEnterResp>> { |
|
||||||
const resp = await request.post(`${DRC_API_PREFIX}/workspaces/${workspaceId}/drc/enter`, body) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
|
|
||||||
export interface DrcExitBody { |
|
||||||
client_id: string |
|
||||||
dock_sn: string |
|
||||||
} |
|
||||||
|
|
||||||
// 退出飞行控制 （退出drc连接&退出云控控制权）
|
|
||||||
export async function postDrcExit (body: DrcExitBody): Promise<IWorkspaceResponse<null>> { |
|
||||||
const resp = await request.post(`${DRC_API_PREFIX}/workspaces/${workspaceId}/drc/exit`, body) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
@ -1,74 +0,0 @@ |
|||||||
import request, { IWorkspaceResponse } from '/@/api/http/request' |
|
||||||
// import { ELocalStorageKey } from '/@/types'
|
|
||||||
|
|
||||||
const API_PREFIX = '/control/api/v1' |
|
||||||
// const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId) || '
|
|
||||||
|
|
||||||
// 获取飞行控制权
|
|
||||||
export async function postFlightAuth (sn: string): Promise<IWorkspaceResponse<null>> { |
|
||||||
const resp = await request.post(`${API_PREFIX}/devices/${sn}/authority/flight`) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
export enum WaylineLostControlActionInCommandFlight { |
|
||||||
CONTINUE = 0, |
|
||||||
EXEC_LOST_ACTION = 1 |
|
||||||
} |
|
||||||
export enum LostControlActionInCommandFLight { |
|
||||||
HOVER = 0, // 悬停
|
|
||||||
Land = 1, // 着陆
|
|
||||||
RETURN_HOME = 2, // 返航
|
|
||||||
} |
|
||||||
export enum ERthMode { |
|
||||||
SMART = 0, |
|
||||||
SETTING = 1 |
|
||||||
} |
|
||||||
export enum ECommanderModeLostAction { |
|
||||||
CONTINUE = 0, |
|
||||||
EXEC_LOST_ACTION = 1 |
|
||||||
} |
|
||||||
export enum ECommanderFlightMode { |
|
||||||
SMART = 0, |
|
||||||
SETTING = 1 |
|
||||||
} |
|
||||||
export interface PointBody { |
|
||||||
latitude: number; |
|
||||||
longitude: number; |
|
||||||
height: number; |
|
||||||
} |
|
||||||
export interface PostFlyToPointBody { |
|
||||||
max_speed: number, |
|
||||||
points: PointBody[] |
|
||||||
} |
|
||||||
|
|
||||||
// 飞向目标点
|
|
||||||
export async function postFlyToPoint (sn: string, body: PostFlyToPointBody): Promise<IWorkspaceResponse<null>> { |
|
||||||
const resp = await request.post(`${API_PREFIX}/devices/${sn}/jobs/fly-to-point`, body) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
|
|
||||||
// 停止飞向目标点
|
|
||||||
export async function deleteFlyToPoint (sn: string): Promise<IWorkspaceResponse<null>> { |
|
||||||
const resp = await request.delete(`${API_PREFIX}/devices/${sn}/jobs/fly-to-point`) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
|
|
||||||
export interface PostTakeoffToPointBody{ |
|
||||||
target_height: number; |
|
||||||
target_latitude: number; |
|
||||||
target_longitude: number; |
|
||||||
security_takeoff_height: number; // 安全起飞高
|
|
||||||
max_speed: number; // flyto过程中能达到的最大速度, 单位m/s 跟飞机档位有关
|
|
||||||
rc_lost_action: LostControlActionInCommandFLight; // 失控行为
|
|
||||||
rth_altitude: number; // 返航高度
|
|
||||||
exit_wayline_when_rc_lost: WaylineLostControlActionInCommandFlight; |
|
||||||
rth_mode: ERthMode; |
|
||||||
commander_mode_lost_action: ECommanderModeLostAction; |
|
||||||
commander_flight_mode: ECommanderFlightMode; |
|
||||||
commander_flight_height: number; |
|
||||||
} |
|
||||||
|
|
||||||
// 一键起飞
|
|
||||||
export async function postTakeoffToPoint (sn: string, body: PostTakeoffToPointBody): Promise<IWorkspaceResponse<null>> { |
|
||||||
const resp = await request.post(`${API_PREFIX}/devices/${sn}/jobs/takeoff-to-point`, body) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
@ -1,93 +0,0 @@ |
|||||||
import request, { IWorkspaceResponse } from '/@/api/http/request' |
|
||||||
import { CameraType, CameraMode } from '/@/types/live-stream' |
|
||||||
import { GimbalResetMode } from '/@/types/drone-control' |
|
||||||
// import { ELocalStorageKey } from '/@/types'
|
|
||||||
|
|
||||||
const API_PREFIX = '/control/api/v1' |
|
||||||
// const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId) || '
|
|
||||||
|
|
||||||
export interface PostPayloadAuthBody { |
|
||||||
payload_index: string |
|
||||||
} |
|
||||||
|
|
||||||
// 获取负载控制权
|
|
||||||
export async function postPayloadAuth (sn: string, body: PostPayloadAuthBody): Promise<IWorkspaceResponse<null>> { |
|
||||||
const resp = await request.post(`${API_PREFIX}/devices/${sn}/authority/payload`, body) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
|
|
||||||
// TODO: 画面拖动控制
|
|
||||||
export enum PayloadCommandsEnum { |
|
||||||
CameraModeSwitch = 'camera_mode_switch', |
|
||||||
CameraPhotoTake = 'camera_photo_take', |
|
||||||
CameraRecordingStart = 'camera_recording_start', |
|
||||||
CameraRecordingStop = 'camera_recording_stop', |
|
||||||
CameraFocalLengthSet = 'camera_focal_length_set', |
|
||||||
GimbalReset = 'gimbal_reset', |
|
||||||
CameraAim = 'camera_aim' |
|
||||||
} |
|
||||||
|
|
||||||
export interface PostCameraModeBody { |
|
||||||
payload_index: string |
|
||||||
camera_mode: CameraMode |
|
||||||
} |
|
||||||
|
|
||||||
export interface PostCameraPhotoBody { |
|
||||||
payload_index: string |
|
||||||
} |
|
||||||
|
|
||||||
export interface PostCameraRecordingBody { |
|
||||||
payload_index: string |
|
||||||
} |
|
||||||
|
|
||||||
export interface DeleteCameraRecordingParams { |
|
||||||
payload_index: string |
|
||||||
} |
|
||||||
|
|
||||||
export interface PostCameraFocalLengthBody { |
|
||||||
payload_index: string, |
|
||||||
camera_type: CameraType, |
|
||||||
zoom_factor: number |
|
||||||
} |
|
||||||
|
|
||||||
export interface PostGimbalResetBody{ |
|
||||||
payload_index: string, |
|
||||||
reset_mode: GimbalResetMode, |
|
||||||
} |
|
||||||
|
|
||||||
export interface PostCameraAimBody{ |
|
||||||
payload_index: string, |
|
||||||
camera_type: CameraType, |
|
||||||
locked: boolean, |
|
||||||
x: number, |
|
||||||
y: number, |
|
||||||
} |
|
||||||
|
|
||||||
export type PostPayloadCommandsBody = { |
|
||||||
cmd: PayloadCommandsEnum.CameraModeSwitch, |
|
||||||
data: PostCameraModeBody |
|
||||||
} | { |
|
||||||
cmd: PayloadCommandsEnum.CameraPhotoTake, |
|
||||||
data: PostCameraPhotoBody |
|
||||||
} | { |
|
||||||
cmd: PayloadCommandsEnum.CameraRecordingStart, |
|
||||||
data: PostCameraRecordingBody |
|
||||||
} | { |
|
||||||
cmd: PayloadCommandsEnum.CameraRecordingStop, |
|
||||||
data: DeleteCameraRecordingParams |
|
||||||
} | { |
|
||||||
cmd: PayloadCommandsEnum.CameraFocalLengthSet, |
|
||||||
data: PostCameraFocalLengthBody |
|
||||||
} | { |
|
||||||
cmd: PayloadCommandsEnum.GimbalReset, |
|
||||||
data: PostGimbalResetBody |
|
||||||
} | { |
|
||||||
cmd: PayloadCommandsEnum.CameraAim, |
|
||||||
data: PostCameraAimBody |
|
||||||
} |
|
||||||
|
|
||||||
// 发送负载名称
|
|
||||||
export async function postPayloadCommands (sn: string, body: PostPayloadCommandsBody): Promise<IWorkspaceResponse<null>> { |
|
||||||
const resp = await request.post(`${API_PREFIX}/devices/${sn}/payload/commands`, body) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
@ -1,81 +0,0 @@ |
|||||||
import request from '../http/request' |
|
||||||
import { IWorkspaceResponse } from '../http/type' |
|
||||||
import { EFlightAreaType, ESyncStatus, FlightAreaContent } from './../../types/flight-area' |
|
||||||
import { ELocalStorageKey } from '/@/types/enums' |
|
||||||
import { GeojsonCoordinate } from '/@/utils/genjson' |
|
||||||
|
|
||||||
export interface GetFlightArea { |
|
||||||
area_id: string, |
|
||||||
name: string, |
|
||||||
type: EFlightAreaType, |
|
||||||
content: FlightAreaContent, |
|
||||||
status: boolean, |
|
||||||
username: string, |
|
||||||
create_time: number, |
|
||||||
update_time: number, |
|
||||||
} |
|
||||||
|
|
||||||
export interface PostFlightAreaBody { |
|
||||||
id: string, |
|
||||||
name: string, |
|
||||||
type: EFlightAreaType, |
|
||||||
content: { |
|
||||||
properties: { |
|
||||||
color: string, |
|
||||||
clampToGround: boolean, |
|
||||||
}, |
|
||||||
geometry: { |
|
||||||
type: string, |
|
||||||
coordinates: GeojsonCoordinate | GeojsonCoordinate[][], |
|
||||||
radius?: number, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export interface FlightAreaStatus { |
|
||||||
sync_code: number, |
|
||||||
sync_status: ESyncStatus, |
|
||||||
sync_msg: string, |
|
||||||
|
|
||||||
} |
|
||||||
export interface GetDeviceStatus { |
|
||||||
device_sn: string, |
|
||||||
nickname?: string, |
|
||||||
device_name?: string, |
|
||||||
online?: boolean, |
|
||||||
flight_area_status: FlightAreaStatus, |
|
||||||
} |
|
||||||
|
|
||||||
const MAP_API_PREFIX = '/map/api/v1' |
|
||||||
|
|
||||||
const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId) || '' |
|
||||||
|
|
||||||
export async function getFlightAreaList (): Promise<IWorkspaceResponse<GetFlightArea[]>> { |
|
||||||
const resp = await request.get(`${MAP_API_PREFIX}/workspaces/${workspaceId}/flight-areas`) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
|
|
||||||
export async function changeFlightAreaStatus (area_id: string, status: boolean): Promise<IWorkspaceResponse<any>> { |
|
||||||
const resp = await request.put(`${MAP_API_PREFIX}/workspaces/${workspaceId}/flight-area/${area_id}`, { status }) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
|
|
||||||
export async function saveFlightArea (body: PostFlightAreaBody): Promise<IWorkspaceResponse<any>> { |
|
||||||
const resp = await request.post(`${MAP_API_PREFIX}/workspaces/${workspaceId}/flight-area`, body) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
|
|
||||||
export async function deleteFlightArea (area_id: string): Promise<IWorkspaceResponse<any>> { |
|
||||||
const resp = await request.delete(`${MAP_API_PREFIX}/workspaces/${workspaceId}/flight-area/${area_id}`) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
|
|
||||||
export async function syncFlightArea (device_sn: string[]): Promise<IWorkspaceResponse<any>> { |
|
||||||
const resp = await request.post(`${MAP_API_PREFIX}/workspaces/${workspaceId}/flight-area/sync`, { device_sn }) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
|
|
||||||
export async function getDeviceStatus (): Promise<IWorkspaceResponse<GetDeviceStatus[]>> { |
|
||||||
const resp = await request.get(`${MAP_API_PREFIX}/workspaces/${workspaceId}/device-status`) |
|
||||||
return resp.data |
|
||||||
} |
|
||||||
@ -1,61 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<span class="status-tag pointer"> |
|
||||||
<a-popconfirm |
|
||||||
:title="getTitle()" |
|
||||||
ok-text="Yes" |
|
||||||
cancel-text="No" |
|
||||||
placement="left" |
|
||||||
@confirm="onFirmwareStatusClick(firmware)" |
|
||||||
> |
|
||||||
<a-tag :color="firmware.firmware_status ? commonColor.NORMAL : commonColor.FAIL" |
|
||||||
:class="firmware.firmware_status ? 'border-corner ' : 'status-disable border-corner'"> |
|
||||||
{{ getText(firmware.firmware_status) }} |
|
||||||
</a-tag> |
|
||||||
</a-popconfirm> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { defineProps, defineEmits, ref, watch, computed } from 'vue' |
|
||||||
import { changeFirmareStatus } from '/@/api/manage' |
|
||||||
import { ELocalStorageKey } from '/@/types' |
|
||||||
import { Firmware, FirmwareStatusEnum } from '/@/types/device-firmware' |
|
||||||
import { commonColor } from '/@/utils/color' |
|
||||||
|
|
||||||
const props = defineProps<{ |
|
||||||
firmware: Firmware |
|
||||||
}>() |
|
||||||
|
|
||||||
const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId)! |
|
||||||
|
|
||||||
function getTitle () { |
|
||||||
return `Are you sure to set this firmware to ${getText(!props.firmware.firmware_status)}?` |
|
||||||
} |
|
||||||
|
|
||||||
function getText (status: boolean) { |
|
||||||
return status ? FirmwareStatusEnum.TRUE : FirmwareStatusEnum.FALSE |
|
||||||
} |
|
||||||
|
|
||||||
function onFirmwareStatusClick (record: Firmware) { |
|
||||||
changeFirmareStatus(workspaceId, record.firmware_id, { status: !record.firmware_status }).then((res) => { |
|
||||||
if (res.code === 0) { |
|
||||||
record.firmware_status = !record.firmware_status |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.status-disable{ |
|
||||||
opacity: 0.4; |
|
||||||
} |
|
||||||
.border-corner { |
|
||||||
border-radius: 3px; |
|
||||||
} |
|
||||||
.pointer { |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
<template> |
|
||||||
<div @click="selectCurrent"> |
|
||||||
<a-dropdown class="height-100 width-100 icon-panel"> |
|
||||||
<FlightAreaIcon :type="actionMap[selectedKey].type" :is-circle="actionMap[selectedKey].isCircle" :hide-title="true"/> |
|
||||||
<template #overlay> |
|
||||||
<a-menu @click="selectAction" mode="vertical-right" :selectedKeys="[selectedKey]"> |
|
||||||
<a-menu-item v-for="(v, k) in actionMap" :key="k"> |
|
||||||
<FlightAreaIcon :type="v.type" :is-circle="v.isCircle"/> |
|
||||||
</a-menu-item> |
|
||||||
</a-menu> |
|
||||||
</template> |
|
||||||
</a-dropdown> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { ref, defineEmits } from 'vue' |
|
||||||
import { EFlightAreaType } from '../../types/flight-area' |
|
||||||
import FlightAreaIcon from './FlightAreaIcon.vue' |
|
||||||
|
|
||||||
const emit = defineEmits(['select-action', 'click']) |
|
||||||
|
|
||||||
const actionMap: Record<string, { type: EFlightAreaType, isCircle: boolean}> = { |
|
||||||
1: { |
|
||||||
type: EFlightAreaType.DFENCE, |
|
||||||
isCircle: true, |
|
||||||
}, |
|
||||||
2: { |
|
||||||
type: EFlightAreaType.DFENCE, |
|
||||||
isCircle: false, |
|
||||||
}, |
|
||||||
3: { |
|
||||||
type: EFlightAreaType.NFZ, |
|
||||||
isCircle: true, |
|
||||||
}, |
|
||||||
4: { |
|
||||||
type: EFlightAreaType.NFZ, |
|
||||||
isCircle: false, |
|
||||||
}, |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
const selectedKey = ref<string>('1') |
|
||||||
const selectAction = (item: any) => { |
|
||||||
selectedKey.value = item.key |
|
||||||
emit('select-action', actionMap[item.key]) |
|
||||||
} |
|
||||||
const selectCurrent = () => { |
|
||||||
emit('click', actionMap[selectedKey.value]) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
.icon-panel { |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,197 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="flight-area-device-panel"> |
|
||||||
<Title title="Choose Synchronous Devices"> |
|
||||||
<div style="position: absolute; right: 10px;"> |
|
||||||
<a style="color: white;" @click="closePanel"><CloseOutlined /></a> |
|
||||||
</div> |
|
||||||
</Title> |
|
||||||
<div class="scrollbar"> |
|
||||||
<div id="data" v-if="data.length !== 0"> |
|
||||||
<div v-for="dock in data" :key="dock.device_sn"> |
|
||||||
<div class="pt5 panel flex-row" @click="selectDock(dock)" :style="{opacity: selectedDocksMap[dock.device_sn] ? 1 : 0.5 }"> |
|
||||||
<div style="width: 88%"> |
|
||||||
<div class="title"> |
|
||||||
<RobotFilled class="fz20"/> |
|
||||||
<a-tooltip :title="dock.nickname"> |
|
||||||
<div class="pr10 ml5" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ dock.nickname }}</div> |
|
||||||
</a-tooltip> |
|
||||||
</div> |
|
||||||
<div class="ml10 mr10 pr5 pl5 flex-align-center flex-row flex-justify-between" style="background: #595959;"> |
|
||||||
<div> |
|
||||||
Custom Flight Area |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<div v-if="!dock.status"> |
|
||||||
<a-tooltip title="Dock offline"> |
|
||||||
<ApiOutlined /> |
|
||||||
</a-tooltip> |
|
||||||
</div> |
|
||||||
<div v-else-if="deviceStatusMap[dock.device_sn]?.flight_area_status?.sync_status === ESyncStatus.SYNCHRONIZED"> |
|
||||||
<a-tooltip title="Data synced"> |
|
||||||
<CheckCircleTwoTone twoToneColor="#28d445"/> |
|
||||||
</a-tooltip> |
|
||||||
</div> |
|
||||||
<div v-else-if="deviceStatusMap[dock.device_sn]?.flight_area_status?.sync_status === ESyncStatus.SYNCHRONIZING |
|
||||||
|| deviceStatusMap[dock.device_sn]?.flight_area_status?.sync_status === ESyncStatus.WAIT_SYNC"> |
|
||||||
<a-tooltip title="To be synced"> |
|
||||||
<SyncOutlined spin /> |
|
||||||
</a-tooltip> |
|
||||||
</div> |
|
||||||
<div v-else> |
|
||||||
<a-tooltip :title="deviceStatusMap[dock.device_sn]?.flight_area_status?.sync_msg || 'No synchronization'"> |
|
||||||
<ExclamationCircleTwoTone twoToneColor="#e70102" /> |
|
||||||
</a-tooltip> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="box" v-if="selectedDocksMap[dock.device_sn]"> |
|
||||||
<CheckOutlined /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<DividerLine style="position: absolute; bottom: 68px;" /> |
|
||||||
<div class="flex-row flex-justify-between footer"> |
|
||||||
<a-button class="mr10" @click="closePanel">Cancel |
|
||||||
</a-button> |
|
||||||
<a-button type="primary" :disabled="confirmDisabled" @click="syncDeviceFlightArea">Sync |
|
||||||
</a-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div v-else> |
|
||||||
<a-empty :image-style="{ height: '60px', marginTop: '60px' }" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { CloseOutlined, RobotFilled, CheckOutlined, ApiOutlined, CheckCircleTwoTone, SyncOutlined, ExclamationCircleTwoTone } from '@ant-design/icons-vue' |
|
||||||
import Title from '/@/components/workspace/Title.vue' |
|
||||||
import { defineEmits, onMounted, ref, defineProps, computed } from 'vue' |
|
||||||
import { getBindingDevices } from '/@/api/manage' |
|
||||||
import { EDeviceTypeName, ELocalStorageKey } from '/@/types' |
|
||||||
import { IPage } from '/@/api/http/type' |
|
||||||
import { Device } from '/@/types/device' |
|
||||||
import DividerLine from '../workspace/DividerLine.vue' |
|
||||||
import { message } from 'ant-design-vue' |
|
||||||
import { GetDeviceStatus, syncFlightArea } from '/@/api/flight-area' |
|
||||||
import { ESyncStatus } from '/@/types/flight-area' |
|
||||||
|
|
||||||
const props = defineProps<{ |
|
||||||
data: GetDeviceStatus[] |
|
||||||
}>() |
|
||||||
const emit = defineEmits(['closePanel']) |
|
||||||
const closePanel = () => { |
|
||||||
emit('closePanel', false) |
|
||||||
} |
|
||||||
|
|
||||||
const confirmDisabled = ref(false) |
|
||||||
|
|
||||||
const deviceStatusMap = computed(() => props.data.reduce((obj: Record<string, GetDeviceStatus>, val: GetDeviceStatus) => { |
|
||||||
obj[val.device_sn] = val |
|
||||||
return obj |
|
||||||
}, {} as Record<string, GetDeviceStatus>)) |
|
||||||
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId) || '' |
|
||||||
const body: IPage = { |
|
||||||
page: 1, |
|
||||||
total: 0, |
|
||||||
page_size: 10, |
|
||||||
} |
|
||||||
const data = ref<Device[]>([]) |
|
||||||
const selectedDocksMap = ref<Record<string, boolean>>({}) |
|
||||||
|
|
||||||
const getDocks = async () => { |
|
||||||
await getBindingDevices(workspaceId, body, EDeviceTypeName.Dock).then(res => { |
|
||||||
if (res.code !== 0) { |
|
||||||
return |
|
||||||
} |
|
||||||
data.value.push(...res.data.list) |
|
||||||
body.page = res.data.pagination.page |
|
||||||
body.page_size = res.data.pagination.page_size |
|
||||||
body.total = res.data.pagination.total |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const selectDock = (dock: Device) => { |
|
||||||
if (!dock.status) { |
|
||||||
message.info(`Dock(${dock.nickname}) is offline.`) |
|
||||||
return |
|
||||||
} |
|
||||||
if (deviceStatusMap.value[dock.device_sn]?.flight_area_status?.sync_status === ESyncStatus.SYNCHRONIZING || |
|
||||||
deviceStatusMap.value[dock.device_sn]?.flight_area_status?.sync_status === ESyncStatus.WAIT_SYNC) { |
|
||||||
message.info('The dock is synchronizing.') |
|
||||||
return |
|
||||||
} |
|
||||||
selectedDocksMap.value[dock.device_sn] = !selectedDocksMap.value[dock.device_sn] |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
getDocks() |
|
||||||
const key = setInterval(() => { |
|
||||||
if (body.total === 0 || Math.ceil(body.total / body.page_size) <= body.page) { |
|
||||||
clearInterval(key) |
|
||||||
return |
|
||||||
} |
|
||||||
body.page++ |
|
||||||
getDocks() |
|
||||||
}, 1000) |
|
||||||
}) |
|
||||||
|
|
||||||
const syncDeviceFlightArea = () => { |
|
||||||
const keys = Object.keys(selectedDocksMap.value) |
|
||||||
if (keys.length === 0) { |
|
||||||
message.warn('Please select the docks that need to be synchronized.') |
|
||||||
return |
|
||||||
} |
|
||||||
confirmDisabled.value = true |
|
||||||
Object.keys(selectedDocksMap.value).forEach(k => { |
|
||||||
const device = deviceStatusMap.value[k] |
|
||||||
if (device) { |
|
||||||
device.flight_area_status = { sync_code: 0, sync_status: ESyncStatus.WAIT_SYNC, sync_msg: '' } |
|
||||||
} |
|
||||||
}) |
|
||||||
syncFlightArea(keys).then(res => { |
|
||||||
if (res.code === 0) { |
|
||||||
message.success('The devices are synchronizing...') |
|
||||||
selectedDocksMap.value = {} |
|
||||||
} |
|
||||||
}).finally(() => setTimeout(() => { |
|
||||||
confirmDisabled.value = false |
|
||||||
}, 3000)) |
|
||||||
} |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.flight-area-device-panel { |
|
||||||
position: absolute; |
|
||||||
left: 285px; |
|
||||||
width: 280px; |
|
||||||
height: 100vh; |
|
||||||
float: right; |
|
||||||
top: 0; |
|
||||||
z-index: 1000; |
|
||||||
color: white; |
|
||||||
background: #282828; |
|
||||||
.footer { |
|
||||||
position: absolute; |
|
||||||
width: 100%; |
|
||||||
bottom: 10px; |
|
||||||
padding: 10px; |
|
||||||
button { |
|
||||||
width: 45%; |
|
||||||
border: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
.scrollbar { |
|
||||||
overflow-y: auto; |
|
||||||
height: calc(100vh - 150px); |
|
||||||
} |
|
||||||
.box { |
|
||||||
font-size: 22px; |
|
||||||
line-height: 60px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,33 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="flex-row flex-align-center"> |
|
||||||
<div class="shape" :class="type" :style="isCircle ? 'border-radius: 50%;' : ''"></div> |
|
||||||
<div class="ml5" v-if="!hideTitle">{{ FlightAreaTypeTitleMap[type][isCircle ? EGeometryType.CIRCLE : EGeometryType.POLYGON] }}</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { defineProps } from 'vue' |
|
||||||
import { EFlightAreaType, EGeometryType, FlightAreaTypeTitleMap } from '../../types/flight-area' |
|
||||||
|
|
||||||
const props = defineProps<{ |
|
||||||
type: EFlightAreaType, |
|
||||||
isCircle: boolean, |
|
||||||
hideTitle?: boolean |
|
||||||
}>() |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
.nfz { |
|
||||||
border-color: red; |
|
||||||
} |
|
||||||
.dfence { |
|
||||||
border-color: $tag-green; |
|
||||||
} |
|
||||||
.shape { |
|
||||||
width: 16px; |
|
||||||
height: 16px; |
|
||||||
border-width: 3px; |
|
||||||
border-style: solid; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,89 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="panel" style="padding-top: 5px;" :class="{disable: !flightArea.status}"> |
|
||||||
<div class="title"> |
|
||||||
<a-tooltip :title="flightArea.name"> |
|
||||||
<div class="pr10" style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ flightArea.name }}</div> |
|
||||||
</a-tooltip> |
|
||||||
</div> |
|
||||||
<div class="mt5 ml10" style="color: hsla(0,0%,100%,0.35);"> |
|
||||||
<span class="mr10">Update at {{ formatDateTime(flightArea.update_time).toLocaleString() }}</span> |
|
||||||
</div> |
|
||||||
<div class="flex-row flex-justify-between flex-align-center ml10 mt5" style="color: hsla(0,0%,100%,0.65);"> |
|
||||||
<FlightAreaIcon :type="flightArea.type" :isCircle="EGeometryType.CIRCLE === flightArea.content.geometry.type"/> |
|
||||||
<div class="mr10 operate"> |
|
||||||
<a-popconfirm v-if="flightArea.status" title="Is it determined to disable the current area?" okText="Disable" @confirm="changeAreaStatus(false)"> |
|
||||||
<stop-outlined /> |
|
||||||
</a-popconfirm> |
|
||||||
<a-popconfirm v-else @confirm="changeAreaStatus(true)" title="Is it determined to enable the current area?" okText="Enable" > |
|
||||||
<check-circle-outlined /> |
|
||||||
</a-popconfirm> |
|
||||||
<EnvironmentFilled class="ml10" @click="clickLocation"/> |
|
||||||
<a-popconfirm title="Is it determined to delete the current area?" okText="Delete" okType="danger" @confirm="deleteArea"> |
|
||||||
<delete-outlined class="ml10" /> |
|
||||||
</a-popconfirm> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { defineProps, reactive, defineEmits, computed } from 'vue' |
|
||||||
import { GetFlightArea, changeFlightAreaStatus } from '../../api/flight-area' |
|
||||||
import FlightAreaIcon from './FlightAreaIcon.vue' |
|
||||||
import { formatDateTime } from '../../utils/time' |
|
||||||
import { EGeometryType } from '../../types/flight-area' |
|
||||||
import { StopOutlined, CheckCircleOutlined, DeleteOutlined, EnvironmentFilled } from '@ant-design/icons-vue' |
|
||||||
|
|
||||||
const props = defineProps<{ |
|
||||||
data: GetFlightArea |
|
||||||
}>() |
|
||||||
const emit = defineEmits(['delete', 'update', 'location']) |
|
||||||
|
|
||||||
const flightArea = computed(() => props.data) |
|
||||||
const changeAreaStatus = (status: boolean) => { |
|
||||||
changeFlightAreaStatus(props.data.area_id, status).then(res => { |
|
||||||
if (res.code === 0) { |
|
||||||
flightArea.value.status = status |
|
||||||
emit('update', flightArea) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
const deleteArea = () => { |
|
||||||
emit('delete', flightArea.value.area_id) |
|
||||||
} |
|
||||||
const clickLocation = () => { |
|
||||||
emit('location', flightArea.value.area_id) |
|
||||||
} |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.panel { |
|
||||||
background: #3c3c3c; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
margin-top: 10px; |
|
||||||
height: 90px; |
|
||||||
width: 95%; |
|
||||||
font-size: 13px; |
|
||||||
border-radius: 2px; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
.title { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
align-items: center; |
|
||||||
height: 30px; |
|
||||||
font-weight: bold; |
|
||||||
margin: 0px 10px 0 10px; |
|
||||||
} |
|
||||||
.operate > *{ |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.disable { |
|
||||||
opacity: 50%; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,43 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="flight-area-panel"> |
|
||||||
<div v-if="data.length === 0"> |
|
||||||
<a-empty :image-style="{ height: '60px', marginTop: '60px' }" /> |
|
||||||
</div> |
|
||||||
<div v-else v-for="area in flightAreaList" :key="area.area_id"> |
|
||||||
<FlightAreaItem :data="area" @delete="deleteArea" @update="updateArea" @location="clickLocation(area)"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { defineProps, defineEmits, ref, computed } from 'vue' |
|
||||||
import FlightAreaItem from './FlightAreaItem.vue' |
|
||||||
import { GetFlightArea } from '/@/api/flight-area' |
|
||||||
|
|
||||||
const emit = defineEmits(['deleteArea', 'updateArea', 'locationArea']) |
|
||||||
|
|
||||||
const props = defineProps<{ |
|
||||||
data: GetFlightArea[] |
|
||||||
}>() |
|
||||||
|
|
||||||
const flightAreaList = computed(() => props.data) |
|
||||||
|
|
||||||
const deleteArea = (areaId: string) => { |
|
||||||
emit('deleteArea', areaId) |
|
||||||
} |
|
||||||
|
|
||||||
const updateArea = (area: GetFlightArea) => { |
|
||||||
emit('updateArea', area) |
|
||||||
} |
|
||||||
|
|
||||||
const clickLocation = (area: GetFlightArea) => { |
|
||||||
emit('locationArea', area) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.flight-area-panel { |
|
||||||
overflow-y: auto; |
|
||||||
height: calc(100vh - 150px); |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,66 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="flight-area-sync-panel p10 flex-row flex-align-center" > |
|
||||||
<RobotFilled class="fz30" twoToneColor="red" fill="#00ff00"/> |
|
||||||
<div class="ml20 mr10 flex-column" @click="switchPanel"> |
|
||||||
<div class="fz18">Sync Across Devices</div> |
|
||||||
<div v-if="syncDevicesCount > 0"><a-spin /> Syncing to {{ syncDevicesCount }} devices</div> |
|
||||||
</div> |
|
||||||
<RightOutlined class="fz18" @click="switchPanel"/> |
|
||||||
<FlightAreaDevicePanel v-if="visible" @close-panel="closePanel" :data="syncDevices"/> |
|
||||||
</div> |
|
||||||
|
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { RobotFilled, RightOutlined } from '@ant-design/icons-vue' |
|
||||||
import FlightAreaDevicePanel from '/@/components/flight-area/FlightAreaDevicePanel.vue' |
|
||||||
import { computed, onMounted, ref, watch } from 'vue' |
|
||||||
import { GetDeviceStatus, getDeviceStatus } from '/@/api/flight-area' |
|
||||||
import { ESyncStatus, FlightAreaSyncProgress } from '/@/types/flight-area' |
|
||||||
import { useFlightAreaSyncProgressEvent } from './use-flight-area-sync-progress-event' |
|
||||||
|
|
||||||
const visible = ref(false) |
|
||||||
const syncDevices = ref<GetDeviceStatus[]>([]) |
|
||||||
const syncDevicesCount = computed(() => syncDevices.value.filter(device => |
|
||||||
device.flight_area_status.sync_status === ESyncStatus.SYNCHRONIZING || device.flight_area_status.sync_status === ESyncStatus.WAIT_SYNC).length) |
|
||||||
const getAllDeviceStatus = () => { |
|
||||||
getDeviceStatus().then(res => { |
|
||||||
if (res.code === 0) { |
|
||||||
syncDevices.value = res.data |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
getAllDeviceStatus() |
|
||||||
}) |
|
||||||
const switchPanel = () => { |
|
||||||
visible.value = !visible.value |
|
||||||
} |
|
||||||
const closePanel = (val: boolean) => { |
|
||||||
visible.value = val |
|
||||||
} |
|
||||||
|
|
||||||
const handleSyncProgress = (data: FlightAreaSyncProgress) => { |
|
||||||
let has = false |
|
||||||
const status = { sync_code: data.result, sync_status: data.status, sync_msg: data.message } |
|
||||||
syncDevices.value.forEach(device => { |
|
||||||
if (data.sn === device.device_sn) { |
|
||||||
device.flight_area_status = status |
|
||||||
has = true |
|
||||||
} |
|
||||||
}) |
|
||||||
if (!has) { |
|
||||||
syncDevices.value.push({ device_sn: data.sn, flight_area_status: status }) |
|
||||||
} |
|
||||||
} |
|
||||||
useFlightAreaSyncProgressEvent(handleSyncProgress) |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.flight-area-sync-panel { |
|
||||||
height: 70px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
import { FlightAreasDroneLocation } from '/@/types/flight-area' |
|
||||||
import { CommonHostWs } from '/@/websocket' |
|
||||||
import EventBus from '/@/event-bus/' |
|
||||||
import { onMounted, onBeforeUnmount } from 'vue' |
|
||||||
|
|
||||||
export function useFlightAreaDroneLocationEvent (onFlightAreaDroneLocationWs: (data: CommonHostWs<FlightAreasDroneLocation>) => void): void { |
|
||||||
function handleDroneLocationEvent (data: any) { |
|
||||||
onFlightAreaDroneLocationWs(data.data) |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
EventBus.on('flightAreasDroneLocationWs', handleDroneLocationEvent) |
|
||||||
}) |
|
||||||
|
|
||||||
onBeforeUnmount(() => { |
|
||||||
EventBus.off('flightAreasDroneLocationWs', handleDroneLocationEvent) |
|
||||||
}) |
|
||||||
} |
|
||||||
@ -1,17 +0,0 @@ |
|||||||
import EventBus from '/@/event-bus/' |
|
||||||
import { onMounted, onBeforeUnmount } from 'vue' |
|
||||||
import { FlightAreaSyncProgress } from '/@/types/flight-area' |
|
||||||
|
|
||||||
export function useFlightAreaSyncProgressEvent (onFlightAreaSyncProgressWs: (data: FlightAreaSyncProgress) => void): void { |
|
||||||
function handleSyncProgressEvent (data: FlightAreaSyncProgress) { |
|
||||||
onFlightAreaSyncProgressWs(data) |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
EventBus.on('flightAreasSyncProgressWs', handleSyncProgressEvent) |
|
||||||
}) |
|
||||||
|
|
||||||
onBeforeUnmount(() => { |
|
||||||
EventBus.off('flightAreasSyncProgressWs', handleSyncProgressEvent) |
|
||||||
}) |
|
||||||
} |
|
||||||
@ -1,30 +0,0 @@ |
|||||||
import { EFlightAreaUpdate, FlightAreaUpdate, FlightAreasDroneLocation } from '/@/types/flight-area' |
|
||||||
import { CommonHostWs } from '/@/websocket' |
|
||||||
import EventBus from '/@/event-bus/' |
|
||||||
import { onMounted, onBeforeUnmount } from 'vue' |
|
||||||
|
|
||||||
function doNothing (data: FlightAreaUpdate) { |
|
||||||
} |
|
||||||
export function useFlightAreaUpdateEvent (addFunc = doNothing, deleteFunc = doNothing, updateFunc = doNothing): void { |
|
||||||
function handleDroneLocationEvent (data: FlightAreaUpdate) { |
|
||||||
switch (data.operation) { |
|
||||||
case EFlightAreaUpdate.ADD: |
|
||||||
addFunc(data) |
|
||||||
break |
|
||||||
case EFlightAreaUpdate.UPDATE: |
|
||||||
updateFunc(data) |
|
||||||
break |
|
||||||
case EFlightAreaUpdate.DELETE: |
|
||||||
deleteFunc(data) |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
EventBus.on('flightAreasUpdateWs', handleDroneLocationEvent) |
|
||||||
}) |
|
||||||
|
|
||||||
onBeforeUnmount(() => { |
|
||||||
EventBus.off('flightAreasUpdateWs', handleDroneLocationEvent) |
|
||||||
}) |
|
||||||
} |
|
||||||
@ -1,155 +0,0 @@ |
|||||||
import { message, notification } from 'ant-design-vue' |
|
||||||
import { MapDoodleEnum } from '/@/types/map-enum' |
|
||||||
import { getRoot } from '/@/root' |
|
||||||
import { PostFlightAreaBody, saveFlightArea } from '/@/api/flight-area' |
|
||||||
import { generateCircleContent, generatePolyContent } from '/@/utils/map-layer-utils' |
|
||||||
import { GeojsonCoordinate } from '/@/utils/genjson' |
|
||||||
import { gcj02towgs84, wgs84togcj02 } from '/@/vendors/coordtransform.js' |
|
||||||
import { uuidv4 } from '/@/utils/uuid' |
|
||||||
import { CommonHostWs } from '/@/websocket' |
|
||||||
import { FlightAreasDroneLocation } from '/@/types/flight-area' |
|
||||||
import rootStore from '/@/store' |
|
||||||
import { h } from 'vue' |
|
||||||
import { useGMapCover } from '/@/hooks/use-g-map-cover' |
|
||||||
import moment from 'moment' |
|
||||||
import { DATE_FORMAT } from '/@/utils/constants' |
|
||||||
|
|
||||||
export function useFlightArea () { |
|
||||||
const root = getRoot() |
|
||||||
const store = rootStore |
|
||||||
const coverMap = store.state.coverMap |
|
||||||
|
|
||||||
let useGMapCoverHook = useGMapCover() |
|
||||||
|
|
||||||
const MIN_RADIUS = 10 |
|
||||||
function checkCircle (obj: any): boolean { |
|
||||||
if (obj.getRadius() < MIN_RADIUS) { |
|
||||||
message.error(`The radius must be greater than ${MIN_RADIUS}m.`) |
|
||||||
root.$map.remove(obj) |
|
||||||
return false |
|
||||||
} |
|
||||||
return true |
|
||||||
} |
|
||||||
|
|
||||||
function checkPolygon (obj: any): boolean { |
|
||||||
const path: any[][] = obj.getPath() |
|
||||||
if (path.length < 3) { |
|
||||||
message.error('The path of the polygon cannot be crossed.') |
|
||||||
root.$map.remove(obj) |
|
||||||
return false |
|
||||||
} |
|
||||||
// root.$aMap.GeometryUtil.doesLineLineIntersect()
|
|
||||||
return true |
|
||||||
} |
|
||||||
|
|
||||||
function setExtData (obj: any) { |
|
||||||
let ext = obj.getExtData() |
|
||||||
const id = uuidv4() |
|
||||||
const name = `${ext.type}-${moment().format(DATE_FORMAT)}` |
|
||||||
ext = Object.assign({}, ext, { id, name }) |
|
||||||
obj.setExtData(ext) |
|
||||||
return ext |
|
||||||
} |
|
||||||
function createFlightArea (obj: any) { |
|
||||||
const ext = obj.getExtData() |
|
||||||
const data = { |
|
||||||
id: ext.id, |
|
||||||
type: ext.type, |
|
||||||
name: ext.name, |
|
||||||
} |
|
||||||
let coordinates: GeojsonCoordinate | GeojsonCoordinate[][] |
|
||||||
let content |
|
||||||
switch (ext.mapType) { |
|
||||||
case 'circle': |
|
||||||
content = generateCircleContent(obj.getCenter(), obj.getRadius()) |
|
||||||
coordinates = getWgs84(content.geometry.coordinates as GeojsonCoordinate) |
|
||||||
break |
|
||||||
case 'polygon': |
|
||||||
content = generatePolyContent(obj.getPath()).content |
|
||||||
coordinates = [getWgs84(content.geometry.coordinates[0] as GeojsonCoordinate[])] |
|
||||||
break |
|
||||||
default: |
|
||||||
message.error(`Invalid type: ${obj.mapType}`) |
|
||||||
root.$map.remove(obj) |
|
||||||
return |
|
||||||
} |
|
||||||
content.geometry.coordinates = coordinates |
|
||||||
|
|
||||||
saveFlightArea(Object.assign({}, data, { content }) as PostFlightAreaBody).then(res => { |
|
||||||
if (res.code !== 0) { |
|
||||||
useGMapCoverHook.removeCoverFromMap(ext.id) |
|
||||||
} |
|
||||||
}).finally(() => root.$map.remove(obj)) |
|
||||||
} |
|
||||||
|
|
||||||
function getDrawFlightAreaCallback (obj: any) { |
|
||||||
useGMapCoverHook = useGMapCover() |
|
||||||
const ext = setExtData(obj) |
|
||||||
switch (ext.mapType) { |
|
||||||
case MapDoodleEnum.CIRCLE: |
|
||||||
if (!checkCircle(obj)) { |
|
||||||
return |
|
||||||
} |
|
||||||
break |
|
||||||
case MapDoodleEnum.POLYGON: |
|
||||||
if (!checkPolygon(obj)) { |
|
||||||
return |
|
||||||
} |
|
||||||
break |
|
||||||
default: |
|
||||||
break |
|
||||||
} |
|
||||||
createFlightArea(obj) |
|
||||||
} |
|
||||||
|
|
||||||
const getWgs84 = <T extends GeojsonCoordinate | GeojsonCoordinate[]>(coordinate: T): T => { |
|
||||||
if (coordinate[0] instanceof Array) { |
|
||||||
return (coordinate as GeojsonCoordinate[]).map(c => gcj02towgs84(c[0], c[1])) as T |
|
||||||
} |
|
||||||
return gcj02towgs84(coordinate[0], coordinate[1]) |
|
||||||
} |
|
||||||
|
|
||||||
const getGcj02 = <T extends GeojsonCoordinate | GeojsonCoordinate[]>(coordinate: T): T => { |
|
||||||
if (coordinate[0] instanceof Array) { |
|
||||||
return (coordinate as GeojsonCoordinate[]).map(c => wgs84togcj02(c[0], c[1])) as T |
|
||||||
} |
|
||||||
return wgs84togcj02(coordinate[0], coordinate[1]) |
|
||||||
} |
|
||||||
|
|
||||||
const onFlightAreaDroneLocationWs = (data: CommonHostWs<FlightAreasDroneLocation>) => { |
|
||||||
const nearArea = data.host.drone_locations.filter(val => !val.is_in_area) |
|
||||||
const inArea = data.host.drone_locations.filter(val => val.is_in_area) |
|
||||||
notification.warning({ |
|
||||||
key: `flight-area-${data.sn}`, |
|
||||||
message: `Drone(${data.sn}) flight area information`, |
|
||||||
description: h('div', |
|
||||||
[ |
|
||||||
h('div', [ |
|
||||||
h('span', { class: 'fz18' }, 'In the flight area: '), |
|
||||||
h('ul', [ |
|
||||||
...inArea.map(val => h('li', `There are ${val.area_distance} meters from the edge of the area(${coverMap[val.area_id][1]?.getText() || val.area_id}).`)) |
|
||||||
]) |
|
||||||
]), |
|
||||||
h('div', [ |
|
||||||
h('span', { class: 'fz18' }, 'Near the flight area: '), |
|
||||||
h('ul', [ |
|
||||||
...nearArea.map(val => h('li', `There are ${val.area_distance} meters from the edge of the area(${coverMap[val.area_id][1]?.getText() || val.area_id}).`)) |
|
||||||
]) |
|
||||||
]) |
|
||||||
]), |
|
||||||
duration: null, |
|
||||||
style: { |
|
||||||
width: '420px', |
|
||||||
marginTop: '-8px', |
|
||||||
marginLeft: '-28px', |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
getDrawFlightAreaCallback, |
|
||||||
getGcj02, |
|
||||||
getWgs84, |
|
||||||
onFlightAreaDroneLocationWs, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,34 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="drone-control-info-wrap"> |
|
||||||
<a-textarea v-model:value="info" placeholder="drc info" :rows="5" disabled/> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { ref, defineProps, watch } from 'vue' |
|
||||||
|
|
||||||
const props = defineProps<{ |
|
||||||
message?: string, |
|
||||||
}>() |
|
||||||
|
|
||||||
const info = ref('') |
|
||||||
watch(() => props.message, message => { |
|
||||||
info.value = message || '' |
|
||||||
}, { |
|
||||||
immediate: true |
|
||||||
}) |
|
||||||
|
|
||||||
// const emit = defineEmits(['cancel', 'confirm']) |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.drone-control-info-wrap { |
|
||||||
&::v-deep{ |
|
||||||
textarea.ant-input { |
|
||||||
background-color: #000; |
|
||||||
color: #fff; |
|
||||||
white-space: pre-wrap; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,837 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="drone-control-wrapper"> |
|
||||||
<div class="drone-control-header">Drone Flight Control</div> |
|
||||||
<div class="drone-control-box"> |
|
||||||
<div class="box"> |
|
||||||
<div class="row"> |
|
||||||
<div class="drone-control"><Button :ghost="!flightController" size="small" @click="onClickFightControl">{{ flightController ? 'Exit Remote Control' : 'Enter Remote Control'}}</Button></div> |
|
||||||
</div> |
|
||||||
<div class="row"> |
|
||||||
<div class="drone-control-direction"> |
|
||||||
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_Q)" @onmouseup="onMouseUp"> |
|
||||||
<template #icon><UndoOutlined /></template><span class="word">Q</span> |
|
||||||
</Button> |
|
||||||
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_W)" @onmouseup="onMouseUp"> |
|
||||||
<template #icon><UpOutlined/></template><span class="word">W</span> |
|
||||||
</Button> |
|
||||||
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_E)" @onmouseup="onMouseUp"> |
|
||||||
<template #icon><RedoOutlined /></template><span class="word">E</span> |
|
||||||
</Button> |
|
||||||
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.ARROW_UP)" @onmouseup="onMouseUp"> |
|
||||||
<template #icon><ArrowUpOutlined /></template> |
|
||||||
</Button> |
|
||||||
<br /> |
|
||||||
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_A)" @onmouseup="onMouseUp"> |
|
||||||
<template #icon><LeftOutlined/></template><span class="word">A</span> |
|
||||||
</Button> |
|
||||||
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_S)" @onmouseup="onMouseUp"> |
|
||||||
<template #icon><DownOutlined/></template><span class="word">S</span> |
|
||||||
</Button> |
|
||||||
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_D)" @onmouseup="onMouseUp"> |
|
||||||
<template #icon><RightOutlined/></template><span class="word">D</span> |
|
||||||
</Button> |
|
||||||
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.ARROW_DOWN)" @onmouseup="onMouseUp"> |
|
||||||
<template #icon><ArrowDownOutlined /></template> |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
<Button type="primary" size="small" danger ghost @click="handleEmergencyStop" > |
|
||||||
<template #icon><PauseCircleOutlined/></template><span>Break</span> |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
<div class="row"> |
|
||||||
<DroneControlPopover |
|
||||||
:visible="flyToPointPopoverData.visible" |
|
||||||
:loading="flyToPointPopoverData.loading" |
|
||||||
@confirm="($event) => onFlyToConfirm(true)" |
|
||||||
@cancel="($event) =>onFlyToConfirm(false)" |
|
||||||
> |
|
||||||
<template #formContent> |
|
||||||
<div class="form-content"> |
|
||||||
<div> |
|
||||||
<span class="form-label">latitude:</span> |
|
||||||
<a-input-number v-model:value="flyToPointPopoverData.latitude"/> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">longitude:</span> |
|
||||||
<a-input-number v-model:value="flyToPointPopoverData.longitude"/> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">height(m):</span> |
|
||||||
<a-input-number v-model:value="flyToPointPopoverData.height"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<Button size="small" ghost @click="onShowFlyToPopover" > |
|
||||||
<span>Fly to</span> |
|
||||||
</Button> |
|
||||||
</DroneControlPopover> |
|
||||||
<Button size="small" ghost @click="onStopFlyToPoint" > |
|
||||||
<span>Stop Fly to</span> |
|
||||||
</Button> |
|
||||||
<DroneControlPopover |
|
||||||
:visible="takeoffToPointPopoverData.visible" |
|
||||||
:loading="takeoffToPointPopoverData.loading" |
|
||||||
@confirm="($event) => onTakeoffToPointConfirm(true)" |
|
||||||
@cancel="($event) =>onTakeoffToPointConfirm(false)" |
|
||||||
> |
|
||||||
<template #formContent> |
|
||||||
<div class="form-content"> |
|
||||||
<div> |
|
||||||
<span class="form-label">latitude:</span> |
|
||||||
<a-input-number v-model:value="takeoffToPointPopoverData.latitude"/> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">longitude:</span> |
|
||||||
<a-input-number v-model:value="takeoffToPointPopoverData.longitude"/> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">height(m):</span> |
|
||||||
<a-input-number v-model:value="takeoffToPointPopoverData.height"/> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">Safe Takeoff Altitude(m):</span> |
|
||||||
<a-input-number v-model:value="takeoffToPointPopoverData.securityTakeoffHeight"/> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">Return-to-Home Altitude(m):</span> |
|
||||||
<a-input-number v-model:value="takeoffToPointPopoverData.rthAltitude"/> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">Lost Action:</span> |
|
||||||
<a-select |
|
||||||
v-model:value="takeoffToPointPopoverData.rcLostAction" |
|
||||||
style="width: 120px" |
|
||||||
:options="LostControlActionInCommandFLightOptions" |
|
||||||
></a-select> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">Wayline Lost Action:</span> |
|
||||||
<a-select |
|
||||||
v-model:value="takeoffToPointPopoverData.exitWaylineWhenRcLost" |
|
||||||
style="width: 120px" |
|
||||||
:options="WaylineLostControlActionInCommandFlightOptions" |
|
||||||
></a-select> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">Return-to-Home Mode:</span> |
|
||||||
<a-select |
|
||||||
v-model:value="takeoffToPointPopoverData.rthMode" |
|
||||||
style="width: 120px" |
|
||||||
:options="RthModeInCommandFlightOptions" |
|
||||||
></a-select> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">Commander Mode Lost Action:</span> |
|
||||||
<a-select |
|
||||||
v-model:value="takeoffToPointPopoverData.commanderModeLostAction" |
|
||||||
style="width: 120px" |
|
||||||
:options="CommanderModeLostActionInCommandFlightOptions" |
|
||||||
></a-select> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">Commander Flight Mode:</span> |
|
||||||
<a-select |
|
||||||
v-model:value="takeoffToPointPopoverData.commanderFlightMode" |
|
||||||
style="width: 120px" |
|
||||||
:options="CommanderFlightModeInCommandFlightOptions" |
|
||||||
></a-select> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">Commander Flight Height(m):</span> |
|
||||||
<a-input-number v-model:value="takeoffToPointPopoverData.commanderFlightHeight"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<Button size="small" ghost @click="onShowTakeoffToPointPopover" > |
|
||||||
<span>Take off</span> |
|
||||||
</Button> |
|
||||||
<div v-for="(cmdItem) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item"> |
|
||||||
<Button :loading="cmdItem.loading" size="small" ghost @click="sendControlCmd(cmdItem, 0)"> |
|
||||||
{{ cmdItem.operateText }} |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<Button size="small" ghost @click="openLivestreamAgora" > |
|
||||||
<span>Agora Live</span> |
|
||||||
</Button> |
|
||||||
<Button size="small" ghost @click="openLivestreamOthers" > |
|
||||||
<span>RTMP/GB28181 Live</span> |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
</DroneControlPopover> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="box"> |
|
||||||
<div class="row"> |
|
||||||
<Select v-model:value="payloadSelectInfo.value" style="width: 110px; marginRight: 5px" :options="payloadSelectInfo.options" @change="handlePayloadChange"/> |
|
||||||
<div class="drone-control"> |
|
||||||
<Button type="primary" size="small" @click="onAuthPayload">Payload Control</Button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="row"> |
|
||||||
<DroneControlPopover |
|
||||||
:visible="gimbalResetPopoverData.visible" |
|
||||||
:loading="gimbalResetPopoverData.loading" |
|
||||||
@confirm="($event) => onGimbalResetConfirm(true)" |
|
||||||
@cancel="($event) =>onGimbalResetConfirm(false)" |
|
||||||
> |
|
||||||
<template #formContent> |
|
||||||
<div class="form-content"> |
|
||||||
<div> |
|
||||||
<span class="form-label">reset mode:</span> |
|
||||||
<a-select |
|
||||||
v-model:value="gimbalResetPopoverData.resetMode" |
|
||||||
style="width: 180px" |
|
||||||
:options="GimbalResetModeOptions" |
|
||||||
></a-select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<Button size="small" ghost @click="onShowGimbalResetPopover"> |
|
||||||
<span>Gimbal Reset</span> |
|
||||||
</Button> |
|
||||||
</DroneControlPopover> |
|
||||||
<Button size="small" ghost @click="onSwitchCameraMode"> |
|
||||||
<span>Camera Mode Switch</span> |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
<div class="row"> |
|
||||||
<Button size="small" ghost @click="onStartCameraRecording"> |
|
||||||
<span>Start Recording</span> |
|
||||||
</Button> |
|
||||||
<Button size="small" ghost @click="onStopCameraRecording"> |
|
||||||
<span>Stop Recording</span> |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
<div class="row"> |
|
||||||
<Button size="small" ghost @click="onTakeCameraPhoto"> |
|
||||||
<span>Take Photo</span> |
|
||||||
</Button> |
|
||||||
<DroneControlPopover |
|
||||||
:visible="zoomFactorPopoverData.visible" |
|
||||||
:loading="zoomFactorPopoverData.loading" |
|
||||||
@confirm="($event) => onZoomFactorConfirm(true)" |
|
||||||
@cancel="($event) =>onZoomFactorConfirm(false)" |
|
||||||
> |
|
||||||
<template #formContent> |
|
||||||
<div class="form-content"> |
|
||||||
<div> |
|
||||||
<span class="form-label">camera type:</span> |
|
||||||
<a-select |
|
||||||
v-model:value="zoomFactorPopoverData.cameraType" |
|
||||||
style="width: 120px" |
|
||||||
:options="ZoomCameraTypeOptions" |
|
||||||
></a-select> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">zoom factor:</span> |
|
||||||
<a-input-number v-model:value="zoomFactorPopoverData.zoomFactor" :min="2" :max="200" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<Button size="small" ghost @click="($event) => onShowZoomFactorPopover()"> |
|
||||||
<span class="word" @click=";">Zoom</span> |
|
||||||
</Button> |
|
||||||
</DroneControlPopover> |
|
||||||
<DroneControlPopover |
|
||||||
:visible="cameraAimPopoverData.visible" |
|
||||||
:loading="cameraAimPopoverData.loading" |
|
||||||
@confirm="($event) => onCameraAimConfirm(true)" |
|
||||||
@cancel="($event) =>onCameraAimConfirm(false)" |
|
||||||
> |
|
||||||
<template #formContent> |
|
||||||
<div class="form-content"> |
|
||||||
<div> |
|
||||||
<span class="form-label">camera type:</span> |
|
||||||
<a-select |
|
||||||
v-model:value="cameraAimPopoverData.cameraType" |
|
||||||
style="width: 120px" |
|
||||||
:options="CameraTypeOptions" |
|
||||||
></a-select> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">locked:</span> |
|
||||||
<a-switch v-model:checked="cameraAimPopoverData.locked"/> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">x:</span> |
|
||||||
<a-input-number v-model:value="cameraAimPopoverData.x" :min="0" :max="1"/> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="form-label">y:</span> |
|
||||||
<a-input-number v-model:value="cameraAimPopoverData.y" :min="0" :max="1"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<Button size="small" ghost @click="($event) => onShowCameraAimPopover()"> |
|
||||||
<span class="word" @click=";">AIM</span> |
|
||||||
</Button> |
|
||||||
</DroneControlPopover> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- 信息提示 --> |
|
||||||
<DroneControlInfoPanel :message="drcInfo"></DroneControlInfoPanel> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup lang="ts"> |
|
||||||
import { defineProps, reactive, ref, watch, computed, onMounted, watchEffect } from 'vue' |
|
||||||
import { Select, message, Button } from 'ant-design-vue' |
|
||||||
import { PayloadInfo, DeviceInfoType, ControlSource, DeviceOsdCamera, DrcStateEnum } from '/@/types/device' |
|
||||||
import { useMyStore } from '/@/store' |
|
||||||
import { postDrcEnter, postDrcExit } from '/@/api/drc' |
|
||||||
import { useMqtt, DeviceTopicInfo } from './use-mqtt' |
|
||||||
import { DownOutlined, UpOutlined, LeftOutlined, RightOutlined, PauseCircleOutlined, UndoOutlined, RedoOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue' |
|
||||||
import { useManualControl, KeyCode } from './use-manual-control' |
|
||||||
import { usePayloadControl } from './use-payload-control' |
|
||||||
import { CameraMode, CameraType, CameraTypeOptions, ZoomCameraTypeOptions, CameraListItem } from '/@/types/live-stream' |
|
||||||
import { useDroneControlWsEvent } from './use-drone-control-ws-event' |
|
||||||
import { useDroneControlMqttEvent } from './use-drone-control-mqtt-event' |
|
||||||
import { |
|
||||||
postFlightAuth, LostControlActionInCommandFLight, WaylineLostControlActionInCommandFlight, ERthMode, |
|
||||||
ECommanderModeLostAction, ECommanderFlightMode |
|
||||||
} from '/@/api/drone-control/drone' |
|
||||||
import { useDroneControl } from './use-drone-control' |
|
||||||
import { |
|
||||||
GimbalResetMode, GimbalResetModeOptions, LostControlActionInCommandFLightOptions, WaylineLostControlActionInCommandFlightOptions, |
|
||||||
RthModeInCommandFlightOptions, CommanderModeLostActionInCommandFlightOptions, CommanderFlightModeInCommandFlightOptions |
|
||||||
} from '/@/types/drone-control' |
|
||||||
import DroneControlPopover from './DroneControlPopover.vue' |
|
||||||
import DroneControlInfoPanel from './DroneControlInfoPanel.vue' |
|
||||||
import { noDebugCmdList as baseCmdList, DeviceCmdItem, DeviceCmd } from '/@/types/device-cmd' |
|
||||||
import { useDockControl } from './use-dock-control' |
|
||||||
|
|
||||||
const props = defineProps<{ |
|
||||||
sn: string, |
|
||||||
deviceInfo: DeviceInfoType, |
|
||||||
payloads: null | PayloadInfo[] |
|
||||||
}>() |
|
||||||
|
|
||||||
const store = useMyStore() |
|
||||||
const clientId = computed(() => { |
|
||||||
return store.state.clientId |
|
||||||
}) |
|
||||||
|
|
||||||
const initCmdList = baseCmdList.map(cmdItem => Object.assign({}, cmdItem)) |
|
||||||
const cmdList = ref(initCmdList) |
|
||||||
|
|
||||||
const { |
|
||||||
sendDockControlCmd |
|
||||||
} = useDockControl() |
|
||||||
|
|
||||||
async function sendControlCmd (cmdItem: DeviceCmdItem, index: number) { |
|
||||||
cmdItem.loading = true |
|
||||||
const result = await sendDockControlCmd({ |
|
||||||
sn: props.sn, |
|
||||||
cmd: cmdItem.cmdKey, |
|
||||||
action: cmdItem.action |
|
||||||
}, false) |
|
||||||
if (result) { |
|
||||||
message.success('Return home successful') |
|
||||||
if (flightController.value) { |
|
||||||
exitFlightCOntrol() |
|
||||||
} |
|
||||||
} else { |
|
||||||
message.error('Failed to return home') |
|
||||||
} |
|
||||||
cmdItem.loading = false |
|
||||||
} |
|
||||||
|
|
||||||
const { flyToPoint, stopFlyToPoint, takeoffToPoint } = useDroneControl() |
|
||||||
const MAX_SPEED = 14 |
|
||||||
|
|
||||||
const flyToPointPopoverData = reactive({ |
|
||||||
visible: false, |
|
||||||
loading: false, |
|
||||||
latitude: null as null | number, |
|
||||||
longitude: null as null | number, |
|
||||||
height: null as null | number, |
|
||||||
maxSpeed: MAX_SPEED, |
|
||||||
}) |
|
||||||
|
|
||||||
function onShowFlyToPopover () { |
|
||||||
flyToPointPopoverData.visible = !flyToPointPopoverData.visible |
|
||||||
flyToPointPopoverData.loading = false |
|
||||||
flyToPointPopoverData.latitude = null |
|
||||||
flyToPointPopoverData.longitude = null |
|
||||||
flyToPointPopoverData.height = null |
|
||||||
} |
|
||||||
|
|
||||||
async function onFlyToConfirm (confirm: boolean) { |
|
||||||
if (confirm) { |
|
||||||
if (!flyToPointPopoverData.height || !flyToPointPopoverData.latitude || !flyToPointPopoverData.longitude) { |
|
||||||
message.error('Input error') |
|
||||||
return |
|
||||||
} |
|
||||||
try { |
|
||||||
await flyToPoint(props.sn, { |
|
||||||
max_speed: flyToPointPopoverData.maxSpeed, |
|
||||||
points: [ |
|
||||||
{ |
|
||||||
latitude: flyToPointPopoverData.latitude, |
|
||||||
longitude: flyToPointPopoverData.longitude, |
|
||||||
height: flyToPointPopoverData.height |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
} catch (error) { |
|
||||||
} |
|
||||||
} |
|
||||||
flyToPointPopoverData.visible = false |
|
||||||
} |
|
||||||
|
|
||||||
async function onStopFlyToPoint () { |
|
||||||
await stopFlyToPoint(props.sn) |
|
||||||
} |
|
||||||
|
|
||||||
const takeoffToPointPopoverData = reactive({ |
|
||||||
visible: false, |
|
||||||
loading: false, |
|
||||||
latitude: null as null | number, |
|
||||||
longitude: null as null | number, |
|
||||||
height: null as null | number, |
|
||||||
securityTakeoffHeight: null as null | number, |
|
||||||
maxSpeed: MAX_SPEED, |
|
||||||
rthAltitude: null as null | number, |
|
||||||
rcLostAction: LostControlActionInCommandFLight.RETURN_HOME, |
|
||||||
exitWaylineWhenRcLost: WaylineLostControlActionInCommandFlight.EXEC_LOST_ACTION, |
|
||||||
rthMode: ERthMode.SETTING, |
|
||||||
commanderModeLostAction: ECommanderModeLostAction.CONTINUE, |
|
||||||
commanderFlightMode: ECommanderFlightMode.SETTING, |
|
||||||
commanderFlightHeight: null as null | number, |
|
||||||
}) |
|
||||||
|
|
||||||
function onShowTakeoffToPointPopover () { |
|
||||||
takeoffToPointPopoverData.visible = !takeoffToPointPopoverData.visible |
|
||||||
takeoffToPointPopoverData.loading = false |
|
||||||
takeoffToPointPopoverData.latitude = null |
|
||||||
takeoffToPointPopoverData.longitude = null |
|
||||||
takeoffToPointPopoverData.securityTakeoffHeight = null |
|
||||||
takeoffToPointPopoverData.rthAltitude = null |
|
||||||
takeoffToPointPopoverData.rcLostAction = LostControlActionInCommandFLight.RETURN_HOME |
|
||||||
takeoffToPointPopoverData.exitWaylineWhenRcLost = WaylineLostControlActionInCommandFlight.EXEC_LOST_ACTION |
|
||||||
takeoffToPointPopoverData.rthMode = ERthMode.SETTING |
|
||||||
takeoffToPointPopoverData.commanderModeLostAction = ECommanderModeLostAction.CONTINUE |
|
||||||
takeoffToPointPopoverData.commanderFlightMode = ECommanderFlightMode.SETTING |
|
||||||
takeoffToPointPopoverData.commanderFlightHeight = null |
|
||||||
} |
|
||||||
|
|
||||||
async function onTakeoffToPointConfirm (confirm: boolean) { |
|
||||||
if (confirm) { |
|
||||||
if (!takeoffToPointPopoverData.height || |
|
||||||
!takeoffToPointPopoverData.latitude || |
|
||||||
!takeoffToPointPopoverData.longitude || |
|
||||||
!takeoffToPointPopoverData.securityTakeoffHeight || |
|
||||||
!takeoffToPointPopoverData.rthAltitude || |
|
||||||
!takeoffToPointPopoverData.commanderFlightHeight) { |
|
||||||
message.error('Input error') |
|
||||||
return |
|
||||||
} |
|
||||||
try { |
|
||||||
await takeoffToPoint(props.sn, { |
|
||||||
target_latitude: takeoffToPointPopoverData.latitude, |
|
||||||
target_longitude: takeoffToPointPopoverData.longitude, |
|
||||||
target_height: takeoffToPointPopoverData.height, |
|
||||||
security_takeoff_height: takeoffToPointPopoverData.securityTakeoffHeight, |
|
||||||
rth_altitude: takeoffToPointPopoverData.rthAltitude, |
|
||||||
max_speed: takeoffToPointPopoverData.maxSpeed, |
|
||||||
rc_lost_action: takeoffToPointPopoverData.rcLostAction, |
|
||||||
exit_wayline_when_rc_lost: takeoffToPointPopoverData.exitWaylineWhenRcLost, |
|
||||||
rth_mode: takeoffToPointPopoverData.rthMode, |
|
||||||
commander_mode_lost_action: takeoffToPointPopoverData.commanderModeLostAction, |
|
||||||
commander_flight_mode: takeoffToPointPopoverData.commanderFlightMode, |
|
||||||
commander_flight_height: takeoffToPointPopoverData.commanderFlightHeight, |
|
||||||
}) |
|
||||||
} catch (error) { |
|
||||||
} |
|
||||||
} |
|
||||||
takeoffToPointPopoverData.visible = false |
|
||||||
} |
|
||||||
|
|
||||||
const deviceTopicInfo: DeviceTopicInfo = reactive({ |
|
||||||
sn: props.sn, |
|
||||||
pubTopic: '', |
|
||||||
subTopic: '' |
|
||||||
}) |
|
||||||
|
|
||||||
useMqtt(deviceTopicInfo) |
|
||||||
|
|
||||||
// 飞行控制 |
|
||||||
// const drcState = computed(() => { |
|
||||||
// return store.state.deviceState?.dockInfo[props.sn]?.link_osd?.drc_state === DrcStateEnum.CONNECTED |
|
||||||
// }) |
|
||||||
const flightController = ref(false) |
|
||||||
|
|
||||||
async function onClickFightControl () { |
|
||||||
if (flightController.value) { |
|
||||||
exitFlightCOntrol() |
|
||||||
return |
|
||||||
} |
|
||||||
enterFlightControl() |
|
||||||
} |
|
||||||
|
|
||||||
// 进入飞行控制 |
|
||||||
async function enterFlightControl () { |
|
||||||
try { |
|
||||||
const { code, data } = await postDrcEnter({ |
|
||||||
client_id: clientId.value, |
|
||||||
dock_sn: props.sn, |
|
||||||
}) |
|
||||||
if (code === 0) { |
|
||||||
flightController.value = true |
|
||||||
if (data.sub && data.sub.length > 0) { |
|
||||||
deviceTopicInfo.subTopic = data.sub[0] |
|
||||||
} |
|
||||||
if (data.pub && data.pub.length > 0) { |
|
||||||
deviceTopicInfo.pubTopic = data.pub[0] |
|
||||||
} |
|
||||||
// 获取飞行控制权 |
|
||||||
if (droneControlSource.value !== ControlSource.A) { |
|
||||||
await postFlightAuth(props.sn) |
|
||||||
} |
|
||||||
message.success('Get flight control successfully') |
|
||||||
} |
|
||||||
} catch (error: any) { |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 退出飞行控制 |
|
||||||
async function exitFlightCOntrol () { |
|
||||||
try { |
|
||||||
const { code } = await postDrcExit({ |
|
||||||
client_id: clientId.value, |
|
||||||
dock_sn: props.sn, |
|
||||||
}) |
|
||||||
if (code === 0) { |
|
||||||
flightController.value = false |
|
||||||
deviceTopicInfo.subTopic = '' |
|
||||||
deviceTopicInfo.pubTopic = '' |
|
||||||
message.success('Exit flight control') |
|
||||||
} |
|
||||||
} catch (error: any) { |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// drc mqtt message |
|
||||||
const { drcInfo, errorInfo } = useDroneControlMqttEvent(props.sn) |
|
||||||
|
|
||||||
const { |
|
||||||
handleKeyup, |
|
||||||
handleEmergencyStop, |
|
||||||
resetControlState, |
|
||||||
} = useManualControl(deviceTopicInfo, flightController) |
|
||||||
|
|
||||||
function onMouseDown (type: KeyCode) { |
|
||||||
handleKeyup(type) |
|
||||||
} |
|
||||||
|
|
||||||
function onMouseUp () { |
|
||||||
resetControlState() |
|
||||||
} |
|
||||||
|
|
||||||
// 负载控制 |
|
||||||
const payloadSelectInfo = { |
|
||||||
value: null as any, |
|
||||||
controlSource: undefined as undefined | ControlSource, |
|
||||||
options: [] as any, |
|
||||||
payloadIndex: '' as string, |
|
||||||
camera: undefined as undefined | DeviceOsdCamera // 当前负载osd信息 |
|
||||||
} |
|
||||||
|
|
||||||
const handlePayloadChange = (value: string) => { |
|
||||||
const payload = props.payloads?.find(item => item.payload_sn === value) |
|
||||||
if (payload) { |
|
||||||
payloadSelectInfo.payloadIndex = payload.payload_index || '' |
|
||||||
payloadSelectInfo.controlSource = payload.control_source |
|
||||||
payloadSelectInfo.camera = undefined |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// function getCurrentCamera (cameraList: CameraListItem[], cameraIndex?: string):CameraListItem | null { |
|
||||||
// let camera = null |
|
||||||
// cameraList.forEach(item => { |
|
||||||
// if (item.camera_index === cameraIndex) { |
|
||||||
// camera = item |
|
||||||
// } |
|
||||||
// }) |
|
||||||
// return camera |
|
||||||
// } |
|
||||||
|
|
||||||
// const currentCamera = computed(() => { |
|
||||||
// return getCurrentCamera(props.deviceInfo.dock.basic_osd.live_capacity?.device_list[0]?.camera_list as CameraListItem[], camera_index) |
|
||||||
// }) |
|
||||||
// 更新负载信息 |
|
||||||
watch(() => props.payloads, (payloads) => { |
|
||||||
if (payloads && payloads.length > 0) { |
|
||||||
payloadSelectInfo.value = payloads[0].payload_sn |
|
||||||
payloadSelectInfo.controlSource = payloads[0].control_source || ControlSource.B |
|
||||||
payloadSelectInfo.payloadIndex = payloads[0].payload_index || '' |
|
||||||
payloadSelectInfo.options = payloads.map(item => ({ label: item.payload_name, value: item.payload_sn })) |
|
||||||
payloadSelectInfo.camera = undefined |
|
||||||
} else { |
|
||||||
payloadSelectInfo.value = null |
|
||||||
payloadSelectInfo.controlSource = undefined |
|
||||||
payloadSelectInfo.options = [] |
|
||||||
payloadSelectInfo.payloadIndex = '' |
|
||||||
payloadSelectInfo.camera = undefined |
|
||||||
} |
|
||||||
}, { |
|
||||||
immediate: true, |
|
||||||
deep: true |
|
||||||
}) |
|
||||||
watch(() => props.deviceInfo.device, (droneOsd) => { |
|
||||||
if (droneOsd && droneOsd.cameras) { |
|
||||||
payloadSelectInfo.camera = droneOsd.cameras.find(item => item.payload_index === payloadSelectInfo.payloadIndex) |
|
||||||
} else { |
|
||||||
payloadSelectInfo.camera = undefined |
|
||||||
} |
|
||||||
}, { |
|
||||||
immediate: true, |
|
||||||
deep: true |
|
||||||
}) |
|
||||||
|
|
||||||
// ws 消息通知 |
|
||||||
const { droneControlSource, payloadControlSource } = useDroneControlWsEvent(props.sn, payloadSelectInfo.value) |
|
||||||
watch(() => payloadControlSource, (controlSource) => { |
|
||||||
payloadSelectInfo.controlSource = controlSource.value |
|
||||||
}, { |
|
||||||
immediate: true, |
|
||||||
deep: true |
|
||||||
}) |
|
||||||
const { |
|
||||||
checkPayloadAuth, |
|
||||||
authPayload, |
|
||||||
resetGimbal, |
|
||||||
switchCameraMode, |
|
||||||
takeCameraPhoto, |
|
||||||
startCameraRecording, |
|
||||||
stopCameraRecording, |
|
||||||
changeCameraFocalLength, |
|
||||||
cameraAim, |
|
||||||
} = usePayloadControl() |
|
||||||
|
|
||||||
async function onAuthPayload () { |
|
||||||
const result = await authPayload(props.sn, payloadSelectInfo.payloadIndex) |
|
||||||
if (result) { |
|
||||||
payloadControlSource.value = ControlSource.A |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const gimbalResetPopoverData = reactive({ |
|
||||||
visible: false, |
|
||||||
loading: false, |
|
||||||
resetMode: null as null | GimbalResetMode, |
|
||||||
}) |
|
||||||
|
|
||||||
function onShowGimbalResetPopover () { |
|
||||||
gimbalResetPopoverData.visible = !gimbalResetPopoverData.visible |
|
||||||
gimbalResetPopoverData.loading = false |
|
||||||
gimbalResetPopoverData.resetMode = null |
|
||||||
} |
|
||||||
|
|
||||||
async function onGimbalResetConfirm (confirm: boolean) { |
|
||||||
if (confirm) { |
|
||||||
if (gimbalResetPopoverData.resetMode === null) { |
|
||||||
message.error('Please select reset mode') |
|
||||||
return |
|
||||||
} |
|
||||||
gimbalResetPopoverData.loading = true |
|
||||||
try { |
|
||||||
await resetGimbal(props.sn, { |
|
||||||
payload_index: payloadSelectInfo.payloadIndex, |
|
||||||
reset_mode: gimbalResetPopoverData.resetMode |
|
||||||
}) |
|
||||||
} catch (err) { |
|
||||||
} |
|
||||||
} |
|
||||||
gimbalResetPopoverData.visible = false |
|
||||||
} |
|
||||||
|
|
||||||
async function onSwitchCameraMode () { |
|
||||||
if (!checkPayloadAuth(payloadSelectInfo.controlSource)) { |
|
||||||
return |
|
||||||
} |
|
||||||
const currentCameraMode = payloadSelectInfo.camera?.camera_mode |
|
||||||
await switchCameraMode(props.sn, { |
|
||||||
payload_index: payloadSelectInfo.payloadIndex, |
|
||||||
camera_mode: currentCameraMode === CameraMode.Photo ? CameraMode.Video : CameraMode.Photo |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
async function onTakeCameraPhoto () { |
|
||||||
if (!checkPayloadAuth(payloadSelectInfo.controlSource)) { |
|
||||||
return |
|
||||||
} |
|
||||||
await takeCameraPhoto(props.sn, payloadSelectInfo.payloadIndex) |
|
||||||
} |
|
||||||
|
|
||||||
async function onStartCameraRecording () { |
|
||||||
if (!checkPayloadAuth(payloadSelectInfo.controlSource)) { |
|
||||||
return |
|
||||||
} |
|
||||||
await startCameraRecording(props.sn, payloadSelectInfo.payloadIndex) |
|
||||||
} |
|
||||||
|
|
||||||
async function onStopCameraRecording () { |
|
||||||
if (!checkPayloadAuth(payloadSelectInfo.controlSource)) { |
|
||||||
return |
|
||||||
} |
|
||||||
await stopCameraRecording(props.sn, payloadSelectInfo.payloadIndex) |
|
||||||
} |
|
||||||
|
|
||||||
const zoomFactorPopoverData = reactive({ |
|
||||||
visible: false, |
|
||||||
loading: false, |
|
||||||
cameraType: null as null | CameraType, |
|
||||||
zoomFactor: null as null | number, |
|
||||||
}) |
|
||||||
|
|
||||||
function onShowZoomFactorPopover () { |
|
||||||
zoomFactorPopoverData.visible = !zoomFactorPopoverData.visible |
|
||||||
zoomFactorPopoverData.loading = false |
|
||||||
zoomFactorPopoverData.cameraType = null |
|
||||||
zoomFactorPopoverData.zoomFactor = null |
|
||||||
} |
|
||||||
|
|
||||||
async function onZoomFactorConfirm (confirm: boolean) { |
|
||||||
if (confirm) { |
|
||||||
if (!zoomFactorPopoverData.zoomFactor || zoomFactorPopoverData.cameraType === null) { |
|
||||||
message.error('Please input Zoom Factor') |
|
||||||
return |
|
||||||
} |
|
||||||
zoomFactorPopoverData.loading = true |
|
||||||
try { |
|
||||||
await changeCameraFocalLength(props.sn, { |
|
||||||
payload_index: payloadSelectInfo.payloadIndex, |
|
||||||
camera_type: zoomFactorPopoverData.cameraType, |
|
||||||
zoom_factor: zoomFactorPopoverData.zoomFactor |
|
||||||
}) |
|
||||||
} catch (err) { |
|
||||||
} |
|
||||||
} |
|
||||||
zoomFactorPopoverData.visible = false |
|
||||||
} |
|
||||||
|
|
||||||
const cameraAimPopoverData = reactive({ |
|
||||||
visible: false, |
|
||||||
loading: false, |
|
||||||
cameraType: null as null | CameraType, |
|
||||||
locked: false, |
|
||||||
x: null as null | number, |
|
||||||
y: null as null | number, |
|
||||||
}) |
|
||||||
|
|
||||||
function onShowCameraAimPopover () { |
|
||||||
cameraAimPopoverData.visible = !cameraAimPopoverData.visible |
|
||||||
cameraAimPopoverData.loading = false |
|
||||||
cameraAimPopoverData.cameraType = null |
|
||||||
cameraAimPopoverData.locked = false |
|
||||||
cameraAimPopoverData.x = null |
|
||||||
cameraAimPopoverData.y = null |
|
||||||
} |
|
||||||
|
|
||||||
function openLivestreamOthers () { |
|
||||||
store.commit('SET_LIVESTREAM_OTHERS_VISIBLE', true) |
|
||||||
} |
|
||||||
|
|
||||||
function openLivestreamAgora () { |
|
||||||
store.commit('SET_LIVESTREAM_AGORA_VISIBLE', true) |
|
||||||
} |
|
||||||
|
|
||||||
async function onCameraAimConfirm (confirm: boolean) { |
|
||||||
if (confirm) { |
|
||||||
if (cameraAimPopoverData.cameraType === null || cameraAimPopoverData.x === null || cameraAimPopoverData.y === null) { |
|
||||||
message.error('Input error') |
|
||||||
return |
|
||||||
} |
|
||||||
try { |
|
||||||
await cameraAim(props.sn, { |
|
||||||
payload_index: payloadSelectInfo.payloadIndex, |
|
||||||
camera_type: cameraAimPopoverData.cameraType, |
|
||||||
locked: cameraAimPopoverData.locked, |
|
||||||
x: cameraAimPopoverData.x, |
|
||||||
y: cameraAimPopoverData.y, |
|
||||||
}) |
|
||||||
} catch (error) { |
|
||||||
} |
|
||||||
} |
|
||||||
cameraAimPopoverData.visible = false |
|
||||||
} |
|
||||||
|
|
||||||
watch(() => errorInfo, (errorInfo) => { |
|
||||||
if (errorInfo.value) { |
|
||||||
message.error(errorInfo.value) |
|
||||||
console.error(errorInfo.value) |
|
||||||
errorInfo.value = '' |
|
||||||
} |
|
||||||
}, { |
|
||||||
immediate: true, |
|
||||||
deep: true |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang='scss' scoped> |
|
||||||
.drone-control-wrapper{ |
|
||||||
// border-bottom: 1px solid #515151; |
|
||||||
|
|
||||||
.drone-control-header{ |
|
||||||
font-size: 14px; |
|
||||||
font-weight: 600; |
|
||||||
padding: 10px 10px 0px; |
|
||||||
} |
|
||||||
|
|
||||||
.drone-control-box { |
|
||||||
display: flex; |
|
||||||
flex-wrap: 1; |
|
||||||
.box { |
|
||||||
width: 50%; |
|
||||||
padding: 5px; |
|
||||||
border: 0.5px solid rgba(255,255,255,0.3); |
|
||||||
|
|
||||||
.row { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
padding: 2px; |
|
||||||
|
|
||||||
+ .row{ |
|
||||||
margin-bottom: 6px; |
|
||||||
} |
|
||||||
|
|
||||||
&::v-deep{ |
|
||||||
.ant-btn{ |
|
||||||
font-size: 12px; |
|
||||||
padding: 0px 4px; |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.drone-control{ |
|
||||||
&::v-deep{ |
|
||||||
|
|
||||||
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{ |
|
||||||
padding: 0 2px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.drone-control-direction{ |
|
||||||
margin-right: 10px; |
|
||||||
|
|
||||||
.ant-btn { |
|
||||||
// padding: 0px 1px; |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.word{ |
|
||||||
width: 12px; |
|
||||||
margin-left: 2px; |
|
||||||
font-size: 12px; |
|
||||||
color: #aaa; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,115 +0,0 @@ |
|||||||
<template> |
|
||||||
<a-popover :visible="state.sVisible" |
|
||||||
trigger="click" |
|
||||||
v-bind="$attrs" |
|
||||||
:overlay-class-name="overlayClassName" |
|
||||||
placement="bottom" |
|
||||||
@visibleChange=";" |
|
||||||
v-on="$attrs"> |
|
||||||
<template #content> |
|
||||||
<div class="title-content"> |
|
||||||
</div> |
|
||||||
<slot name="formContent" /> |
|
||||||
<div class="uranus-popconfirm-btns"> |
|
||||||
<a-button size="sm" |
|
||||||
@click="onCancel"> |
|
||||||
{{ cancelText || 'cancel'}} |
|
||||||
</a-button> |
|
||||||
<a-button size="sm" |
|
||||||
:loading="loading" |
|
||||||
type="primary" |
|
||||||
class="confirm-btn" |
|
||||||
@click="onConfirm"> |
|
||||||
{{ okText || 'ok' }} |
|
||||||
</a-button> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-if="$slots.default"> |
|
||||||
<slot></slot> |
|
||||||
</template> |
|
||||||
</a-popover> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { defineProps, defineEmits, reactive, watch, computed } from 'vue' |
|
||||||
|
|
||||||
const props = defineProps<{ |
|
||||||
visible?: boolean, |
|
||||||
loading?: Boolean, |
|
||||||
disabled?: Boolean, |
|
||||||
title?: String, |
|
||||||
okText?: String, |
|
||||||
cancelText?: String, |
|
||||||
width?: Number, |
|
||||||
}>() |
|
||||||
|
|
||||||
const emit = defineEmits(['cancel', 'confirm']) |
|
||||||
|
|
||||||
const state = reactive({ |
|
||||||
sVisible: false, |
|
||||||
loading: false, |
|
||||||
}) |
|
||||||
|
|
||||||
watch(() => props.visible, (val) => { |
|
||||||
state.sVisible = val || false |
|
||||||
}) |
|
||||||
|
|
||||||
const loading = computed(() => { |
|
||||||
return props.loading |
|
||||||
}) |
|
||||||
const okLabel = computed(() => { |
|
||||||
return props.loading ? '' : '确定' |
|
||||||
}) |
|
||||||
|
|
||||||
const overlayClassName = computed(() => { |
|
||||||
const classList = ['drone-control-popconfirm'] |
|
||||||
return classList.join(' ') |
|
||||||
}) |
|
||||||
|
|
||||||
function onConfirm (e: Event) { |
|
||||||
if (props.disabled) { |
|
||||||
return |
|
||||||
} |
|
||||||
emit('confirm', e) |
|
||||||
} |
|
||||||
|
|
||||||
function onCancel (e: Event) { |
|
||||||
state.sVisible = false |
|
||||||
emit('cancel', e) |
|
||||||
} |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
.drone-control-popconfirm { |
|
||||||
min-width: 300px; |
|
||||||
|
|
||||||
.uranus-popconfirm-btns{ |
|
||||||
display: flex; |
|
||||||
padding: 10px 0px; |
|
||||||
justify-content: flex-end; |
|
||||||
|
|
||||||
.confirm-btn{ |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.form-content{ |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
> div { |
|
||||||
display: flex; |
|
||||||
margin-bottom: 5px; |
|
||||||
|
|
||||||
.form-label { |
|
||||||
flex: 1 0 60px; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
> div { |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,71 +0,0 @@ |
|||||||
|
|
||||||
import { |
|
||||||
ref, |
|
||||||
watch, |
|
||||||
computed, |
|
||||||
onUnmounted, |
|
||||||
} from 'vue' |
|
||||||
import { useMyStore } from '/@/store' |
|
||||||
import { postDrc } from '/@/api/drc' |
|
||||||
import { |
|
||||||
UranusMqtt, |
|
||||||
} from '/@/mqtt' |
|
||||||
|
|
||||||
type StatusOptions = { |
|
||||||
status: 'close'; |
|
||||||
event?: CloseEvent; |
|
||||||
} | { |
|
||||||
status: 'open'; |
|
||||||
retryCount: number; |
|
||||||
} | { |
|
||||||
status: 'pending'; |
|
||||||
} |
|
||||||
|
|
||||||
export function useConnectMqtt () { |
|
||||||
const store = useMyStore() |
|
||||||
const dockOsdVisible = computed(() => { |
|
||||||
return store.state.osdVisible && store.state.osdVisible.visible && store.state.osdVisible.is_dock |
|
||||||
}) |
|
||||||
const mqttState = ref<UranusMqtt | null>(null) |
|
||||||
|
|
||||||
// 监听已打开的设备小窗 窗口数量
|
|
||||||
watch(() => dockOsdVisible.value, async (val) => { |
|
||||||
// 1.打开小窗
|
|
||||||
// 2.设备拥有飞行控制权
|
|
||||||
// 3.请求建立mqtt连接的认证信息
|
|
||||||
if (val) { |
|
||||||
if (mqttState.value) return |
|
||||||
const result = await postDrc({}) |
|
||||||
if (result?.code === 0) { |
|
||||||
const { address, client_id, username, password, expire_time } = result.data |
|
||||||
// @TODO: 校验 expire_time
|
|
||||||
mqttState.value = new UranusMqtt(address, { |
|
||||||
clientId: client_id, |
|
||||||
username, |
|
||||||
password, |
|
||||||
}) |
|
||||||
mqttState.value?.initMqtt() |
|
||||||
mqttState.value?.on('onStatus', (statusOptions: StatusOptions) => { |
|
||||||
// @TODO: 异常case
|
|
||||||
}) |
|
||||||
|
|
||||||
store.commit('SET_MQTT_STATE', mqttState.value) |
|
||||||
store.commit('SET_CLIENT_ID', client_id) |
|
||||||
} |
|
||||||
// @TODO: 认证失败case
|
|
||||||
return |
|
||||||
} |
|
||||||
// 关闭所有小窗后
|
|
||||||
// 1.销毁mqtt连接重置mqtt状态
|
|
||||||
if (mqttState?.value) { |
|
||||||
mqttState.value?.destroyed() |
|
||||||
mqttState.value = null |
|
||||||
store.commit('SET_MQTT_STATE', null) |
|
||||||
store.commit('SET_CLIENT_ID', '') |
|
||||||
} |
|
||||||
}, { immediate: true }) |
|
||||||
|
|
||||||
onUnmounted(() => { |
|
||||||
mqttState.value?.destroyed() |
|
||||||
}) |
|
||||||
} |
|
||||||
@ -1,76 +0,0 @@ |
|||||||
import { ref, onMounted, onBeforeUnmount } from 'vue' |
|
||||||
import EventBus from '/@/event-bus/' |
|
||||||
import { |
|
||||||
DRC_METHOD, |
|
||||||
DRCHsiInfo, |
|
||||||
DRCOsdInfo, |
|
||||||
DRCDelayTimeInfo, |
|
||||||
DrcResponseInfo, |
|
||||||
} from '/@/types/drc' |
|
||||||
|
|
||||||
export function useDroneControlMqttEvent (sn: string) { |
|
||||||
const drcInfo = ref('') |
|
||||||
const hsiInfo = ref('') |
|
||||||
const osdInfo = ref('') |
|
||||||
const delayInfo = ref('') |
|
||||||
const errorInfo = ref('') |
|
||||||
|
|
||||||
function handleHsiInfo (data: DRCHsiInfo) { |
|
||||||
hsiInfo.value = `method: ${DRC_METHOD.HSI_INFO_PUSH}\r\n ${JSON.stringify(data)}\r\n ` |
|
||||||
} |
|
||||||
|
|
||||||
function handleOsdInfo (data: DRCOsdInfo) { |
|
||||||
osdInfo.value = `method: ${DRC_METHOD.OSD_INFO_PUSH}\r\n ${JSON.stringify(data)}\r\n ` |
|
||||||
} |
|
||||||
|
|
||||||
function handleDelayTimeInfo (data: DRCDelayTimeInfo) { |
|
||||||
delayInfo.value = `method: ${DRC_METHOD.DELAY_TIME_INFO_PUSH}\r\n ${JSON.stringify(data)}\r\n ` |
|
||||||
} |
|
||||||
|
|
||||||
function handleDroneControlErrorInfo (data: DrcResponseInfo) { |
|
||||||
if (!data.result) { |
|
||||||
return |
|
||||||
} |
|
||||||
errorInfo.value = `Drc error code: ${data.result}, seq: ${data.output?.seq}` |
|
||||||
} |
|
||||||
|
|
||||||
function handleDroneControlMqttEvent (payload: any) { |
|
||||||
if (!payload || !payload.method) { |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
switch (payload.method) { |
|
||||||
case DRC_METHOD.HSI_INFO_PUSH: { |
|
||||||
handleHsiInfo(payload.data) |
|
||||||
break |
|
||||||
} |
|
||||||
case DRC_METHOD.OSD_INFO_PUSH: { |
|
||||||
handleOsdInfo(payload.data) |
|
||||||
break |
|
||||||
} |
|
||||||
case DRC_METHOD.DELAY_TIME_INFO_PUSH: { |
|
||||||
handleDelayTimeInfo(payload.data) |
|
||||||
break |
|
||||||
} |
|
||||||
case DRC_METHOD.DRONE_EMERGENCY_STOP: |
|
||||||
case DRC_METHOD.DRONE_CONTROL: { |
|
||||||
handleDroneControlErrorInfo(payload.data) |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
drcInfo.value = hsiInfo.value + osdInfo.value + delayInfo.value |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
EventBus.on('droneControlMqttInfo', handleDroneControlMqttEvent) |
|
||||||
}) |
|
||||||
|
|
||||||
onBeforeUnmount(() => { |
|
||||||
EventBus.off('droneControlMqttInfo', handleDroneControlMqttEvent) |
|
||||||
}) |
|
||||||
|
|
||||||
return { |
|
||||||
drcInfo: drcInfo, |
|
||||||
errorInfo: errorInfo |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,95 +0,0 @@ |
|||||||
import { message, notification } from 'ant-design-vue' |
|
||||||
import { ref, onMounted, onBeforeUnmount } from 'vue' |
|
||||||
import EventBus from '/@/event-bus/' |
|
||||||
import { EBizCode } from '/@/types' |
|
||||||
import { ControlSource } from '/@/types/device' |
|
||||||
import { ControlSourceChangeType, ControlSourceChangeInfo, FlyToPointMessage, TakeoffToPointMessage, DrcModeExitNotifyMessage, DrcStatusNotifyMessage } from '/@/types/drone-control' |
|
||||||
|
|
||||||
export interface UseDroneControlWsEventParams { |
|
||||||
} |
|
||||||
|
|
||||||
export function useDroneControlWsEvent (sn: string, payloadSn: string, funcs?: UseDroneControlWsEventParams) { |
|
||||||
const droneControlSource = ref(ControlSource.A) |
|
||||||
const payloadControlSource = ref(ControlSource.B) |
|
||||||
function onControlSourceChange (data: ControlSourceChangeInfo) { |
|
||||||
if (data.type === ControlSourceChangeType.Flight && data.sn === sn) { |
|
||||||
droneControlSource.value = data.control_source |
|
||||||
message.info(`Flight control is changed to ${droneControlSource.value}`) |
|
||||||
return |
|
||||||
} |
|
||||||
if (data.type === ControlSourceChangeType.Payload && data.sn === payloadSn) { |
|
||||||
payloadControlSource.value = data.control_source |
|
||||||
message.info(`Payload control is changed to ${payloadControlSource.value}.`) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function handleProgress (key: string, message: string, error: number) { |
|
||||||
if (error !== 0) { |
|
||||||
notification.error({ |
|
||||||
key: key, |
|
||||||
message: key + 'Error code:' + error, |
|
||||||
description: message, |
|
||||||
duration: null |
|
||||||
}) |
|
||||||
} else { |
|
||||||
notification.info({ |
|
||||||
key: key, |
|
||||||
message: key, |
|
||||||
description: message, |
|
||||||
duration: 30 |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function handleDroneControlWsEvent (payload: any) { |
|
||||||
if (!payload) { |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
switch (payload.biz_code) { |
|
||||||
case EBizCode.ControlSourceChange: { |
|
||||||
onControlSourceChange(payload.data) |
|
||||||
break |
|
||||||
} |
|
||||||
case EBizCode.FlyToPointProgress: { |
|
||||||
const { sn: deviceSn, result, message: msg } = payload.data as FlyToPointMessage |
|
||||||
if (deviceSn !== sn) return |
|
||||||
handleProgress(EBizCode.FlyToPointProgress, `device(sn: ${deviceSn}) ${msg}`, result) |
|
||||||
break |
|
||||||
} |
|
||||||
case EBizCode.TakeoffToPointProgress: { |
|
||||||
const { sn: deviceSn, result, message: msg } = payload.data as TakeoffToPointMessage |
|
||||||
if (deviceSn !== sn) return |
|
||||||
handleProgress(EBizCode.TakeoffToPointProgress, `device(sn: ${deviceSn}) ${msg}`, result) |
|
||||||
break |
|
||||||
} |
|
||||||
case EBizCode.JoystickInvalidNotify: { |
|
||||||
const { sn: deviceSn, result, message: msg } = payload.data as DrcModeExitNotifyMessage |
|
||||||
if (deviceSn !== sn) return |
|
||||||
handleProgress(EBizCode.JoystickInvalidNotify, `device(sn: ${deviceSn}) ${msg}`, result) |
|
||||||
break |
|
||||||
} |
|
||||||
case EBizCode.DrcStatusNotify: { |
|
||||||
const { sn: deviceSn, result, message: msg } = payload.data as DrcStatusNotifyMessage |
|
||||||
// handleProgress(EBizCode.DrcStatusNotify, `device(sn: ${deviceSn}) ${msg}`, result)
|
|
||||||
|
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
// eslint-disable-next-line no-unused-expressions
|
|
||||||
// console.log('payload.biz_code', payload.data)
|
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
EventBus.on('droneControlWs', handleDroneControlWsEvent) |
|
||||||
}) |
|
||||||
|
|
||||||
onBeforeUnmount(() => { |
|
||||||
EventBus.off('droneControlWs', handleDroneControlWsEvent) |
|
||||||
}) |
|
||||||
|
|
||||||
return { |
|
||||||
droneControlSource: droneControlSource, |
|
||||||
payloadControlSource: payloadControlSource |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,40 +0,0 @@ |
|||||||
import { ref } from 'vue' |
|
||||||
import { postFlyToPoint, PostFlyToPointBody, deleteFlyToPoint, postTakeoffToPoint, PostTakeoffToPointBody } from '/@/api/drone-control/drone' |
|
||||||
import { message } from 'ant-design-vue' |
|
||||||
|
|
||||||
export function useDroneControl () { |
|
||||||
const droneControlPanelVisible = ref(false) |
|
||||||
|
|
||||||
function setDroneControlPanelVisible (visible: boolean) { |
|
||||||
droneControlPanelVisible.value = visible |
|
||||||
} |
|
||||||
|
|
||||||
async function flyToPoint (sn: string, body: PostFlyToPointBody) { |
|
||||||
const { code } = await postFlyToPoint(sn, body) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Fly to') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function stopFlyToPoint (sn: string) { |
|
||||||
const { code } = await deleteFlyToPoint(sn) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Stop fly to') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function takeoffToPoint (sn: string, body: PostTakeoffToPointBody) { |
|
||||||
const { code } = await postTakeoffToPoint(sn, body) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Take off successfully') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
droneControlPanelVisible, |
|
||||||
setDroneControlPanelVisible, |
|
||||||
flyToPoint, |
|
||||||
stopFlyToPoint, |
|
||||||
takeoffToPoint |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,165 +0,0 @@ |
|||||||
import { |
|
||||||
ref, |
|
||||||
onUnmounted, |
|
||||||
watch, |
|
||||||
Ref, |
|
||||||
} from 'vue' |
|
||||||
import { message } from 'ant-design-vue' |
|
||||||
import { |
|
||||||
DRC_METHOD, |
|
||||||
DroneControlProtocol, |
|
||||||
} from '/@/types/drc' |
|
||||||
import { |
|
||||||
useMqtt, |
|
||||||
DeviceTopicInfo |
|
||||||
} from './use-mqtt' |
|
||||||
|
|
||||||
let myInterval: any |
|
||||||
|
|
||||||
export enum KeyCode { |
|
||||||
KEY_W = 'KeyW', |
|
||||||
KEY_A = 'KeyA', |
|
||||||
KEY_S = 'KeyS', |
|
||||||
KEY_D = 'KeyD', |
|
||||||
KEY_Q = 'KeyQ', |
|
||||||
KEY_E = 'KeyE', |
|
||||||
ARROW_UP = 'ArrowUp', |
|
||||||
ARROW_DOWN = 'ArrowDown', |
|
||||||
} |
|
||||||
|
|
||||||
export function useManualControl (deviceTopicInfo: DeviceTopicInfo, isCurrentFlightController: Ref<boolean>) { |
|
||||||
const activeCodeKey = ref(null) as Ref<KeyCode | null> |
|
||||||
const mqttHooks = useMqtt(deviceTopicInfo) |
|
||||||
let seq = 0 |
|
||||||
function handlePublish (params: DroneControlProtocol) { |
|
||||||
const body = { |
|
||||||
method: DRC_METHOD.DRONE_CONTROL, |
|
||||||
data: params, |
|
||||||
} |
|
||||||
handleClearInterval() |
|
||||||
myInterval = setInterval(() => { |
|
||||||
body.data.seq = seq++ |
|
||||||
seq++ |
|
||||||
window.console.log('keyCode>>>>', activeCodeKey.value, body) |
|
||||||
mqttHooks?.publishMqtt(deviceTopicInfo.pubTopic, body, { qos: 0 }) |
|
||||||
}, 50) |
|
||||||
} |
|
||||||
|
|
||||||
function handleKeyup (keyCode: KeyCode) { |
|
||||||
if (!deviceTopicInfo.pubTopic) { |
|
||||||
message.error('请确保已经建立DRC链路') |
|
||||||
return |
|
||||||
} |
|
||||||
const SPEED = 5 // check
|
|
||||||
const HEIGHT = 5 // check
|
|
||||||
const W_SPEED = 20 // 机头角速度
|
|
||||||
seq = 0 |
|
||||||
switch (keyCode) { |
|
||||||
case 'KeyA': |
|
||||||
if (activeCodeKey.value === keyCode) return |
|
||||||
handlePublish({ y: -SPEED }) |
|
||||||
activeCodeKey.value = keyCode |
|
||||||
break |
|
||||||
case 'KeyW': |
|
||||||
if (activeCodeKey.value === keyCode) return |
|
||||||
handlePublish({ x: SPEED }) |
|
||||||
activeCodeKey.value = keyCode |
|
||||||
break |
|
||||||
case 'KeyS': |
|
||||||
if (activeCodeKey.value === keyCode) return |
|
||||||
handlePublish({ x: -SPEED }) |
|
||||||
activeCodeKey.value = keyCode |
|
||||||
break |
|
||||||
case 'KeyD': |
|
||||||
if (activeCodeKey.value === keyCode) return |
|
||||||
handlePublish({ y: SPEED }) |
|
||||||
activeCodeKey.value = keyCode |
|
||||||
break |
|
||||||
case 'ArrowUp': |
|
||||||
if (activeCodeKey.value === keyCode) return |
|
||||||
handlePublish({ h: HEIGHT }) |
|
||||||
activeCodeKey.value = keyCode |
|
||||||
break |
|
||||||
case 'ArrowDown': |
|
||||||
if (activeCodeKey.value === keyCode) return |
|
||||||
handlePublish({ h: -HEIGHT }) |
|
||||||
activeCodeKey.value = keyCode |
|
||||||
break |
|
||||||
case 'KeyQ': |
|
||||||
if (activeCodeKey.value === keyCode) return |
|
||||||
handlePublish({ w: -W_SPEED }) |
|
||||||
activeCodeKey.value = keyCode |
|
||||||
break |
|
||||||
case 'KeyE': |
|
||||||
if (activeCodeKey.value === keyCode) return |
|
||||||
handlePublish({ w: W_SPEED }) |
|
||||||
activeCodeKey.value = keyCode |
|
||||||
break |
|
||||||
default: |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function handleClearInterval () { |
|
||||||
clearInterval(myInterval) |
|
||||||
myInterval = undefined |
|
||||||
} |
|
||||||
|
|
||||||
function resetControlState () { |
|
||||||
activeCodeKey.value = null |
|
||||||
seq = 0 |
|
||||||
handleClearInterval() |
|
||||||
} |
|
||||||
|
|
||||||
function onKeyup () { |
|
||||||
resetControlState() |
|
||||||
} |
|
||||||
|
|
||||||
function onKeydown (e: KeyboardEvent) { |
|
||||||
handleKeyup(e.code as KeyCode) |
|
||||||
} |
|
||||||
|
|
||||||
function startKeyboardManualControl () { |
|
||||||
window.addEventListener('keydown', onKeydown) |
|
||||||
window.addEventListener('keyup', onKeyup) |
|
||||||
} |
|
||||||
|
|
||||||
function closeKeyboardManualControl () { |
|
||||||
resetControlState() |
|
||||||
window.removeEventListener('keydown', onKeydown) |
|
||||||
window.removeEventListener('keyup', onKeyup) |
|
||||||
} |
|
||||||
|
|
||||||
watch(() => isCurrentFlightController.value, (val) => { |
|
||||||
if (val && deviceTopicInfo.pubTopic) { |
|
||||||
startKeyboardManualControl() |
|
||||||
} else { |
|
||||||
closeKeyboardManualControl() |
|
||||||
} |
|
||||||
}, { immediate: true }) |
|
||||||
|
|
||||||
onUnmounted(() => { |
|
||||||
closeKeyboardManualControl() |
|
||||||
}) |
|
||||||
|
|
||||||
function handleEmergencyStop () { |
|
||||||
if (!deviceTopicInfo.pubTopic) { |
|
||||||
message.error('请确保已经建立DRC链路') |
|
||||||
return |
|
||||||
} |
|
||||||
const body = { |
|
||||||
method: DRC_METHOD.DRONE_EMERGENCY_STOP, |
|
||||||
data: {} |
|
||||||
} |
|
||||||
resetControlState() |
|
||||||
window.console.log('handleEmergencyStop>>>>', deviceTopicInfo.pubTopic, body) |
|
||||||
mqttHooks?.publishMqtt(deviceTopicInfo.pubTopic, body, { qos: 1 }) |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
activeCodeKey, |
|
||||||
handleKeyup, |
|
||||||
handleEmergencyStop, |
|
||||||
resetControlState, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,134 +0,0 @@ |
|||||||
import { |
|
||||||
ref, |
|
||||||
reactive, |
|
||||||
computed, |
|
||||||
watch, |
|
||||||
onUnmounted, |
|
||||||
} from 'vue' |
|
||||||
import { |
|
||||||
IClientPublishOptions, |
|
||||||
IPublishPacket, |
|
||||||
} from '/@/mqtt' |
|
||||||
import { useMyStore } from '/@/store' |
|
||||||
import { |
|
||||||
DRC_METHOD, |
|
||||||
} from '/@/types/drc' |
|
||||||
import EventBus from '/@/event-bus' |
|
||||||
|
|
||||||
export interface DeviceTopicInfo{ |
|
||||||
sn: string |
|
||||||
pubTopic: string |
|
||||||
subTopic: string |
|
||||||
} |
|
||||||
|
|
||||||
type MessageMqtt = (topic: string, payload: Buffer, packet: IPublishPacket) => void | Promise<void> |
|
||||||
|
|
||||||
export function useMqtt (deviceTopicInfo: DeviceTopicInfo) { |
|
||||||
let cacheSubscribeArr: { |
|
||||||
topic: string; |
|
||||||
callback?: MessageMqtt; |
|
||||||
}[] = [] |
|
||||||
|
|
||||||
const store = useMyStore() |
|
||||||
|
|
||||||
const mqttState = computed(() => { |
|
||||||
return store.state.mqttState |
|
||||||
}) |
|
||||||
|
|
||||||
function publishMqtt (topic: string, body: object, ots?: IClientPublishOptions) { |
|
||||||
// const buffer = Buffer.from(JSON.stringify(body))
|
|
||||||
mqttState.value?.publishMqtt(topic, JSON.stringify(body), ots) |
|
||||||
} |
|
||||||
|
|
||||||
function subscribeMqtt (topic: string, handleMessageMqtt?: MessageMqtt) { |
|
||||||
mqttState.value?.subscribeMqtt(topic) |
|
||||||
const handler = handleMessageMqtt || onMessageMqtt |
|
||||||
mqttState.value?.on('onMessageMqtt', handler) |
|
||||||
cacheSubscribeArr.push({ |
|
||||||
topic, |
|
||||||
callback: handler, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function onMessageMqtt (message: any) { |
|
||||||
if (cacheSubscribeArr.findIndex(item => item.topic === message?.topic) !== -1) { |
|
||||||
const payloadStr = new TextDecoder('utf-8').decode(message?.payload) |
|
||||||
const payloadObj = JSON.parse(payloadStr) |
|
||||||
switch (payloadObj?.method) { |
|
||||||
case DRC_METHOD.HEART_BEAT: |
|
||||||
break |
|
||||||
case DRC_METHOD.DELAY_TIME_INFO_PUSH: |
|
||||||
case DRC_METHOD.HSI_INFO_PUSH: |
|
||||||
case DRC_METHOD.OSD_INFO_PUSH: |
|
||||||
case DRC_METHOD.DRONE_CONTROL: |
|
||||||
case DRC_METHOD.DRONE_EMERGENCY_STOP: |
|
||||||
EventBus.emit('droneControlMqttInfo', payloadObj) |
|
||||||
break |
|
||||||
default: |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function unsubscribeDrc () { |
|
||||||
// 销毁已订阅事件
|
|
||||||
cacheSubscribeArr.forEach(item => { |
|
||||||
mqttState.value?.off('onMessageMqtt', item.callback) |
|
||||||
mqttState.value?.unsubscribeMqtt(item.topic) |
|
||||||
}) |
|
||||||
cacheSubscribeArr = [] |
|
||||||
} |
|
||||||
|
|
||||||
// 心跳
|
|
||||||
const heartBeatSeq = ref(0) |
|
||||||
const state = reactive({ |
|
||||||
heartState: new Map<string, { |
|
||||||
pingInterval: any; |
|
||||||
}>(), |
|
||||||
}) |
|
||||||
|
|
||||||
// 监听云控控制权
|
|
||||||
watch(() => deviceTopicInfo, (val, oldVal) => { |
|
||||||
if (val.subTopic !== '') { |
|
||||||
// 1.订阅topic
|
|
||||||
subscribeMqtt(deviceTopicInfo.subTopic) |
|
||||||
// 2.发心跳
|
|
||||||
publishDrcPing(deviceTopicInfo.sn) |
|
||||||
} else { |
|
||||||
clearInterval(state.heartState.get(deviceTopicInfo.sn)?.pingInterval) |
|
||||||
state.heartState.delete(deviceTopicInfo.sn) |
|
||||||
heartBeatSeq.value = 0 |
|
||||||
} |
|
||||||
}, { immediate: true, deep: true }) |
|
||||||
|
|
||||||
function publishDrcPing (sn: string) { |
|
||||||
const body = { |
|
||||||
method: DRC_METHOD.HEART_BEAT, |
|
||||||
data: { |
|
||||||
ts: new Date().getTime(), |
|
||||||
seq: heartBeatSeq.value, |
|
||||||
}, |
|
||||||
} |
|
||||||
const pingInterval = setInterval(() => { |
|
||||||
if (!mqttState.value) return |
|
||||||
heartBeatSeq.value += 1 |
|
||||||
body.data.ts = new Date().getTime() |
|
||||||
body.data.seq = heartBeatSeq.value |
|
||||||
publishMqtt(deviceTopicInfo.pubTopic, body, { qos: 0 }) |
|
||||||
}, 1000) |
|
||||||
state.heartState.set(sn, { |
|
||||||
pingInterval, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
onUnmounted(() => { |
|
||||||
unsubscribeDrc() |
|
||||||
heartBeatSeq.value = 0 |
|
||||||
}) |
|
||||||
|
|
||||||
return { |
|
||||||
mqttState, |
|
||||||
publishMqtt, |
|
||||||
subscribeMqtt, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,120 +0,0 @@ |
|||||||
import { message } from 'ant-design-vue' |
|
||||||
import { |
|
||||||
postPayloadAuth, |
|
||||||
postPayloadCommands, |
|
||||||
PayloadCommandsEnum, |
|
||||||
PostCameraModeBody, |
|
||||||
PostCameraFocalLengthBody, |
|
||||||
PostGimbalResetBody, |
|
||||||
PostCameraAimBody, |
|
||||||
} from '/@/api/drone-control/payload' |
|
||||||
import { ControlSource } from '/@/types/device' |
|
||||||
|
|
||||||
export function usePayloadControl () { |
|
||||||
function checkPayloadAuth (controlSource?: ControlSource) { |
|
||||||
if (controlSource !== ControlSource.A) { |
|
||||||
message.error('Get Payload Control first') |
|
||||||
return false |
|
||||||
} |
|
||||||
return true |
|
||||||
} |
|
||||||
|
|
||||||
async function authPayload (sn: string, payloadIndx: string) { |
|
||||||
const { code } = await postPayloadAuth(sn, { |
|
||||||
payload_index: payloadIndx |
|
||||||
}) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Get Payload Control successfully') |
|
||||||
return true |
|
||||||
} |
|
||||||
return false |
|
||||||
} |
|
||||||
|
|
||||||
async function resetGimbal (sn: string, data: PostGimbalResetBody) { |
|
||||||
const { code } = await postPayloadCommands(sn, { |
|
||||||
cmd: PayloadCommandsEnum.GimbalReset, |
|
||||||
data: data |
|
||||||
}) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Gimbal Reset successfully') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function switchCameraMode (sn: string, data: PostCameraModeBody) { |
|
||||||
const { code } = await postPayloadCommands(sn, { |
|
||||||
cmd: PayloadCommandsEnum.CameraModeSwitch, |
|
||||||
data: data |
|
||||||
}) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Camera Mode Switch successfully') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function takeCameraPhoto (sn: string, payloadIndx: string) { |
|
||||||
const { code } = await postPayloadCommands(sn, { |
|
||||||
cmd: PayloadCommandsEnum.CameraPhotoTake, |
|
||||||
data: { |
|
||||||
payload_index: payloadIndx |
|
||||||
} |
|
||||||
}) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Take Photo successfully') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function startCameraRecording (sn: string, payloadIndx: string) { |
|
||||||
const { code } = await postPayloadCommands(sn, { |
|
||||||
cmd: PayloadCommandsEnum.CameraRecordingStart, |
|
||||||
data: { |
|
||||||
payload_index: payloadIndx |
|
||||||
} |
|
||||||
}) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Start Recording successfully') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function stopCameraRecording (sn: string, payloadIndx: string) { |
|
||||||
const { code } = await postPayloadCommands(sn, { |
|
||||||
cmd: PayloadCommandsEnum.CameraRecordingStop, |
|
||||||
data: { |
|
||||||
payload_index: payloadIndx |
|
||||||
} |
|
||||||
}) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Stop Recording successfully') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function changeCameraFocalLength (sn: string, data: PostCameraFocalLengthBody) { |
|
||||||
const { code } = await postPayloadCommands(sn, { |
|
||||||
cmd: PayloadCommandsEnum.CameraFocalLengthSet, |
|
||||||
data: data, |
|
||||||
}) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Zoom successfully') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function cameraAim (sn: string, data: PostCameraAimBody) { |
|
||||||
const { code } = await postPayloadCommands(sn, { |
|
||||||
cmd: PayloadCommandsEnum.CameraAim, |
|
||||||
data: data, |
|
||||||
}) |
|
||||||
if (code === 0) { |
|
||||||
message.success('Zoom Aim successfully') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
checkPayloadAuth, |
|
||||||
authPayload, |
|
||||||
resetGimbal, |
|
||||||
switchCameraMode, |
|
||||||
takeCameraPhoto, |
|
||||||
startCameraRecording, |
|
||||||
stopCameraRecording, |
|
||||||
changeCameraFocalLength, |
|
||||||
cameraAim, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import EventBus from '/@/event-bus/' |
||||||
|
import { onMounted, onBeforeUnmount } from 'vue' |
||||||
|
import { TaskProgressInfo } from '/@/types/task' |
||||||
|
|
||||||
|
export function useTaskProgressEvent (onTaskProgressWs: (data: TaskProgressInfo) => void): void { |
||||||
|
function handleTaskProgress (payload: any) { |
||||||
|
onTaskProgressWs(payload.data) |
||||||
|
// eslint-disable-next-line no-unused-expressions
|
||||||
|
// console.log('payload', payload.data)
|
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
EventBus.on('deviceTaskProgress', handleTaskProgress) |
||||||
|
}) |
||||||
|
|
||||||
|
onBeforeUnmount(() => { |
||||||
|
EventBus.off('deviceTaskProgress', handleTaskProgress) |
||||||
|
}) |
||||||
|
} |
||||||
@ -1,43 +0,0 @@ |
|||||||
import EventBus from '/@/event-bus/' |
|
||||||
import { onMounted, onBeforeUnmount } from 'vue' |
|
||||||
import { TaskProgressInfo, MediaStatusProgressInfo, TaskMediaHighestPriorityProgressInfo } from '/@/types/task' |
|
||||||
import { EBizCode } from '/@/types' |
|
||||||
|
|
||||||
export interface UseTaskWsEventParams { |
|
||||||
onTaskProgressWs: (data: TaskProgressInfo) => void, |
|
||||||
onTaskMediaProgressWs: (data: MediaStatusProgressInfo) => void |
|
||||||
onoTaskMediaHighestPriorityWS: (data: TaskMediaHighestPriorityProgressInfo) => void |
|
||||||
} |
|
||||||
|
|
||||||
export function useTaskWsEvent (funcs: UseTaskWsEventParams): void { |
|
||||||
function handleTaskWsEvent (payload: any) { |
|
||||||
if (!payload) { |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
switch (payload.biz_code) { |
|
||||||
case EBizCode.FlightTaskProgress: { |
|
||||||
funcs?.onTaskProgressWs(payload.data) |
|
||||||
break |
|
||||||
} |
|
||||||
case EBizCode.FlightTaskMediaProgress: { |
|
||||||
funcs?.onTaskMediaProgressWs(payload.data) |
|
||||||
break |
|
||||||
} |
|
||||||
case EBizCode.FlightTaskMediaHighestPriority: { |
|
||||||
funcs?.onoTaskMediaHighestPriorityWS(payload.data) |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
// eslint-disable-next-line no-unused-expressions
|
|
||||||
// console.log('payload', payload.data)
|
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
EventBus.on('flightTaskWs', handleTaskWsEvent) |
|
||||||
}) |
|
||||||
|
|
||||||
onBeforeUnmount(() => { |
|
||||||
EventBus.off('flightTaskWs', handleTaskWsEvent) |
|
||||||
}) |
|
||||||
} |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
<template> |
|
||||||
<Divider class="divider" /> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup> |
|
||||||
import { Divider } from 'ant-design-vue' |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.divider { |
|
||||||
margin: 10px 0; |
|
||||||
height: 1px; |
|
||||||
background-color: #4f4f4f; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,21 +0,0 @@ |
|||||||
<template> |
|
||||||
<div style="height: 40px; line-height: 50px; font-weight: 450;"> |
|
||||||
<a-row> |
|
||||||
<a-col :span="1"></a-col> |
|
||||||
<a-col :span="(23 - (extSpan || 0))">{{ title }}</a-col> |
|
||||||
<a-col :span="extSpan"><slot /></a-col> |
|
||||||
</a-row> |
|
||||||
</div> |
|
||||||
<DividerLine /> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { defineProps } from 'vue' |
|
||||||
import DividerLine from '/@/components/workspace/DividerLine.vue' |
|
||||||
|
|
||||||
const props = defineProps < { |
|
||||||
extSpan?: number, |
|
||||||
title: string, |
|
||||||
} >() |
|
||||||
|
|
||||||
</script> |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
import { nextTick, App } from 'vue' |
|
||||||
|
|
||||||
export default function useDragWindowDirective (app: App): void { |
|
||||||
app.directive('drag-window', async (el) => { |
|
||||||
await nextTick() |
|
||||||
|
|
||||||
const modal = el |
|
||||||
const header = el.getElementsByClassName('drag-title')[0] |
|
||||||
let left = 0 |
|
||||||
let top = 0 |
|
||||||
header.style.cursor = 'move' |
|
||||||
top = top || modal.offsetTop |
|
||||||
|
|
||||||
header.onpointerdown = (e: { clientX: number; clientY: number; pointerId: number }) => { |
|
||||||
const startX = e.clientX |
|
||||||
const startY = e.clientY |
|
||||||
header.left = header.offsetLeft |
|
||||||
header.top = header.offsetTop |
|
||||||
header.setPointerCapture(e.pointerId) |
|
||||||
|
|
||||||
el.onpointermove = (event: { clientX: number; clientY: number }) => { |
|
||||||
const endX = event.clientX |
|
||||||
const endY = event.clientY |
|
||||||
modal.left = header.left + (endX - startX) + left |
|
||||||
modal.top = header.top + (endY - startY) + top |
|
||||||
modal.style.left = modal.left + 'px' |
|
||||||
modal.style.top = modal.top + 'px' |
|
||||||
} |
|
||||||
el.onpointerup = () => { |
|
||||||
left = modal.left || 0 |
|
||||||
top = modal.top || 0 |
|
||||||
el.onpointermove = null |
|
||||||
el.onpointerup = null |
|
||||||
header.releasePointerCapture(e.pointerId) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
import { App } from 'vue' |
|
||||||
import useDragWindowDirective from './drag-window' |
|
||||||
|
|
||||||
export function useDirectives (app: App): void { |
|
||||||
useDragWindowDirective(app) |
|
||||||
} |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
import { GeojsonCoordinate } from '../utils/genjson' |
|
||||||
import { getRoot } from '/@/root' |
|
||||||
|
|
||||||
export function useMapTool () { |
|
||||||
const root = getRoot() |
|
||||||
const map = root.$map |
|
||||||
const AMap = root.$aMap |
|
||||||
|
|
||||||
function panTo (coordinate: GeojsonCoordinate) { |
|
||||||
map.panTo(coordinate, 100) |
|
||||||
map.setZoom(18, false, 100) |
|
||||||
} |
|
||||||
return { |
|
||||||
panTo, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,12 +0,0 @@ |
|||||||
|
|
||||||
import { |
|
||||||
IClientOptions, |
|
||||||
} from 'mqtt' |
|
||||||
|
|
||||||
export const OPTIONS: IClientOptions = { |
|
||||||
clean: true, // true: 清除会话, false: 保留会话
|
|
||||||
connectTimeout: 10000, // mqtt 超时时间
|
|
||||||
resubscribe: true, // 断开重连后，再次订阅原订阅
|
|
||||||
reconnectPeriod: 10000, // 重连间隔时间： 5s
|
|
||||||
keepalive: 1, // 心跳间隔时间：1s
|
|
||||||
} |
|
||||||
@ -1,117 +0,0 @@ |
|||||||
import EventEmitter from 'eventemitter3' |
|
||||||
import { |
|
||||||
OPTIONS, |
|
||||||
} from './config' |
|
||||||
import { |
|
||||||
connect, |
|
||||||
MqttClient, |
|
||||||
IClientPublishOptions, |
|
||||||
IPublishPacket, |
|
||||||
Packet, |
|
||||||
ISubscriptionGrant, |
|
||||||
IClientOptions, |
|
||||||
} from 'mqtt/dist/mqtt.min' |
|
||||||
|
|
||||||
export class UranusMqtt extends EventEmitter { |
|
||||||
_url: string |
|
||||||
_options?: IClientOptions |
|
||||||
_client: MqttClient | null |
|
||||||
_hasInit: boolean |
|
||||||
|
|
||||||
constructor (url?: string, options?: IClientOptions) { |
|
||||||
super() |
|
||||||
this._url = url || '' |
|
||||||
this._options = options |
|
||||||
this._client = null |
|
||||||
this._hasInit = false |
|
||||||
} |
|
||||||
|
|
||||||
initMqtt = () => { |
|
||||||
// 仅初始化一次
|
|
||||||
if (this._hasInit) return |
|
||||||
// 建立连接
|
|
||||||
this._client = connect(this._url, { |
|
||||||
...OPTIONS, |
|
||||||
...this._options, |
|
||||||
}) |
|
||||||
this._hasInit = true |
|
||||||
if (this._client) { |
|
||||||
this._client.on('reconnect', this._onReconnect) |
|
||||||
|
|
||||||
// 消息监听
|
|
||||||
this._client.on('message', this._onMessage) |
|
||||||
|
|
||||||
// 连接关闭
|
|
||||||
this._client.on('close', this._onClose) |
|
||||||
|
|
||||||
// 连接异常
|
|
||||||
this._client.on('error', this._onError) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 发布
|
|
||||||
publishMqtt = (topic: string, body: string | Buffer, opts?: IClientPublishOptions) => { |
|
||||||
if (!this._client?.connected) { |
|
||||||
this.initMqtt() |
|
||||||
} |
|
||||||
this._client?.publish(topic, body, opts || {}, (error?: Error, packet?: Packet) => { |
|
||||||
if (error) { |
|
||||||
window.console.error('mqtt publish error,', error, packet) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
// 订阅
|
|
||||||
subscribeMqtt = (topic: string) => { |
|
||||||
if (!this._client?.connected) { |
|
||||||
this.initMqtt() |
|
||||||
} |
|
||||||
window.console.log('subscribeMqtt>>>>>', topic) |
|
||||||
this._client?.subscribe(topic, (error: Error, granted: ISubscriptionGrant[]) => { |
|
||||||
window.console.log('mqtt subscribe,', error, granted) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
// 取消订阅
|
|
||||||
unsubscribeMqtt = (topic: string) => { |
|
||||||
window.console.log('mqtt unsubscribeMqtt,', topic) |
|
||||||
this._client?.unsubscribe(topic) |
|
||||||
} |
|
||||||
|
|
||||||
// 关闭 mqtt 客户端
|
|
||||||
destroyed = () => { |
|
||||||
window.console.log('mqtt destroyed') |
|
||||||
this._client?.end() |
|
||||||
} |
|
||||||
|
|
||||||
_onReconnect = () => { |
|
||||||
if (this._client) { window.console.error('mqtt reconnect,') } |
|
||||||
} |
|
||||||
|
|
||||||
_onMessage = (topic: string, payload: Buffer, packet: IPublishPacket) => { |
|
||||||
this.emit('onMessageMqtt', { topic, payload, packet }) |
|
||||||
} |
|
||||||
|
|
||||||
_onClose = () => { |
|
||||||
// 连接异常关闭会自动重连
|
|
||||||
window.console.error('mqtt close,') |
|
||||||
this.emit('onStatus', { |
|
||||||
status: 'close', |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
_onError = (error: Error) => { |
|
||||||
// 连接错误会自动重连
|
|
||||||
window.console.error('mqtt error,', error) |
|
||||||
this.emit('onStatus', { |
|
||||||
status: 'error', |
|
||||||
data: error, |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export { |
|
||||||
IClientOptions, |
|
||||||
IPublishPacket, |
|
||||||
IClientPublishOptions, |
|
||||||
} |
|
||||||
@ -1,325 +0,0 @@ |
|||||||
|
|
||||||
<template> |
|
||||||
<div class="ml20 mt20 mr20 flex-row flex-align-center flex-justify-between"> |
|
||||||
<div class="flex-row"> |
|
||||||
<a-button type="primary" @click="sVisible = true"> |
|
||||||
Click to Upload |
|
||||||
</a-button> |
|
||||||
<a-modal :visible="sVisible" |
|
||||||
title="Import Firmware File" |
|
||||||
:closable="false" |
|
||||||
@cancel="onCancel" |
|
||||||
@ok="uploadFile" |
|
||||||
centered> |
|
||||||
<a-form :rules="rules" ref="formRef" :model="uploadParam" :label-col="{ span: 6 }"> |
|
||||||
<a-form-item name="status" label="Avaliable" required> |
|
||||||
<a-switch v-model:checked="uploadParam.status" /> |
|
||||||
</a-form-item> |
|
||||||
<a-form-item name="device_name" label="Device Name" required> |
|
||||||
<a-select |
|
||||||
style="width: 220px" |
|
||||||
mode="multiple" |
|
||||||
placeholder="can choose multiple" |
|
||||||
v-model:value="uploadParam.device_name"> |
|
||||||
<a-select-option |
|
||||||
v-for="k in DeviceNameEnum" |
|
||||||
:key="k" |
|
||||||
:value="k" |
|
||||||
> |
|
||||||
{{ k }} |
|
||||||
</a-select-option> |
|
||||||
</a-select> |
|
||||||
</a-form-item> |
|
||||||
<a-form-item name="release_note" label="Release Note" required> |
|
||||||
<a-textarea v-model:value="uploadParam.release_note" showCount :maxlength="300" /> |
|
||||||
</a-form-item> |
|
||||||
<a-form-item label="File" required> |
|
||||||
<a-upload |
|
||||||
:multiple="false" |
|
||||||
:before-upload="beforeUpload" |
|
||||||
:show-upload-list="true" |
|
||||||
:file-list="fileList" |
|
||||||
:remove="removeFile" |
|
||||||
> |
|
||||||
<a-button type="primary"> |
|
||||||
<UploadOutlined /> |
|
||||||
Import Firmware File |
|
||||||
</a-button> |
|
||||||
</a-upload> |
|
||||||
</a-form-item> |
|
||||||
</a-form> |
|
||||||
</a-modal> |
|
||||||
</div> |
|
||||||
<div class="flex-row"> |
|
||||||
<div class="ml5"> |
|
||||||
<a-select |
|
||||||
style="width: 150px" |
|
||||||
v-model:value="param.firmware_status" |
|
||||||
@select="getAllFirmwares(pageParam)"> |
|
||||||
<a-select-option |
|
||||||
v-for="(key, value) in FirmwareStatusEnum" |
|
||||||
:key="key" |
|
||||||
:value="value" |
|
||||||
> |
|
||||||
{{ key }} |
|
||||||
</a-select-option> |
|
||||||
</a-select> |
|
||||||
</div> |
|
||||||
<div class="ml5"> |
|
||||||
<a-select |
|
||||||
style="width: 150px" |
|
||||||
v-model:value="param.device_name" |
|
||||||
@select="getAllFirmwares(pageParam)"> |
|
||||||
<a-select-option |
|
||||||
v-for="item in deviceNameList" |
|
||||||
:key="item.label" |
|
||||||
:value="item.value" |
|
||||||
> |
|
||||||
{{ item.label }} |
|
||||||
</a-select-option> |
|
||||||
</a-select> |
|
||||||
</div> |
|
||||||
<div class="ml5"> |
|
||||||
<a-input-search |
|
||||||
:enter-button="true" |
|
||||||
v-model:value="param.product_version" |
|
||||||
placeholder="input search verison" |
|
||||||
style="width: 250px" |
|
||||||
@search="getAllFirmwares(pageParam)"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="table flex-display flex-column"> |
|
||||||
<a-table :columns="columns" :data-source="data.firmware" :pagination="paginationProp" @change="refreshData" row-key="firmware_id" |
|
||||||
:rowClassName="(record, index) => ((index % 2) === 0 ? 'table-striped' : null)" :scroll="{ x: '100%', y: 600 }"> |
|
||||||
<template #device_name="{ record }"> |
|
||||||
<div v-for="text in record.device_name" :key="text"> |
|
||||||
{{ text }} |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template #file_size="{ record }"> |
|
||||||
<div>{{ bytesToSize(record.file_size) }}</div> |
|
||||||
</template> |
|
||||||
<template #firmware_status="{ record }"> |
|
||||||
<DeviceFirmwareStatus :firmware="record" /> |
|
||||||
</template> |
|
||||||
<template v-for="col in ['file_name', 'release_note']" #[col]="{ text }" :key="col"> |
|
||||||
<a-tooltip :title="text"> |
|
||||||
<span>{{ text }}</span> |
|
||||||
</a-tooltip> |
|
||||||
</template> |
|
||||||
|
|
||||||
</a-table> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup> |
|
||||||
import { message, notification, PaginationProps } from 'ant-design-vue' |
|
||||||
import { TableState } from 'ant-design-vue/lib/table/interface' |
|
||||||
import { onMounted, reactive, Ref, ref, UnwrapRef } from 'vue' |
|
||||||
import { IPage } from '/@/api/http/type' |
|
||||||
import { getFirmwares, importFirmareFile } from '/@/api/manage' |
|
||||||
import DeviceFirmwareStatus from '/@/components/devices/DeviceFirmwareStatus.vue' |
|
||||||
import { ELocalStorageKey } from '/@/types' |
|
||||||
import { UploadOutlined } from '@ant-design/icons-vue' |
|
||||||
import { Firmware, FirmwareQueryParam, FirmwareStatusEnum, DeviceNameEnum, FirmwareUploadParam } from '/@/types/device-firmware' |
|
||||||
import { commonColor } from '/@/utils/color' |
|
||||||
import { bytesToSize } from '/@/utils/bytes' |
|
||||||
import moment from 'moment' |
|
||||||
|
|
||||||
interface FirmwareData { |
|
||||||
firmware: Firmware[] |
|
||||||
} |
|
||||||
const columns = [ |
|
||||||
{ title: 'Model', dataIndex: 'device_name', width: 120, ellipsis: true, className: 'titleStyle', slots: { customRender: 'device_name' } }, |
|
||||||
{ title: 'File Name', dataIndex: 'file_name', width: 220, ellipsis: true, className: 'titleStyle', slots: { customRender: 'file_name' } }, |
|
||||||
{ title: 'Firmware Version', dataIndex: 'product_version', width: 180, className: 'titleStyle' }, |
|
||||||
{ title: 'File Size', dataIndex: 'file_size', width: 150, className: 'titleStyle', slots: { customRender: 'file_size' } }, |
|
||||||
{ title: 'Creator', dataIndex: 'username', width: 100, className: 'titleStyle' }, |
|
||||||
{ title: 'Release Date', dataIndex: 'released_time', width: 160, sorter: (a: Firmware, b: Firmware) => a.released_time.localeCompare(b.released_time), className: 'titleStyle' }, |
|
||||||
{ title: 'Release Note', dataIndex: 'release_note', width: 300, ellipsis: true, className: 'titleStyle', slots: { customRender: 'release_note' } }, |
|
||||||
{ title: 'Status', dataIndex: 'firmware_status', width: 100, className: 'titleStyle', slots: { customRender: 'firmware_status' } }, |
|
||||||
] |
|
||||||
|
|
||||||
const data = reactive<FirmwareData>({ |
|
||||||
firmware: [] |
|
||||||
}) |
|
||||||
|
|
||||||
const paginationProp = reactive({ |
|
||||||
pageSizeOptions: ['20', '50', '100'], |
|
||||||
showQuickJumper: true, |
|
||||||
showSizeChanger: true, |
|
||||||
pageSize: 50, |
|
||||||
current: 1, |
|
||||||
total: 0 |
|
||||||
}) |
|
||||||
|
|
||||||
const deviceNameList = ref<any[]>([{ label: 'All', value: '' }]) |
|
||||||
|
|
||||||
type Pagination = TableState['pagination'] |
|
||||||
|
|
||||||
const pageParam: IPage = { |
|
||||||
page: 1, |
|
||||||
total: 0, |
|
||||||
page_size: 50 |
|
||||||
} |
|
||||||
const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId)! |
|
||||||
|
|
||||||
const param = reactive<FirmwareQueryParam>({ |
|
||||||
product_version: '', |
|
||||||
device_name: '', |
|
||||||
firmware_status: FirmwareStatusEnum.NONE |
|
||||||
}) |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
getAllFirmwares(pageParam) |
|
||||||
for (const key in DeviceNameEnum) { |
|
||||||
const value = DeviceNameEnum[key] |
|
||||||
deviceNameList.value.push({ label: value, value: value }) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
function refreshData (page: Pagination) { |
|
||||||
pageParam.page = page?.current! |
|
||||||
pageParam.page_size = page?.pageSize! |
|
||||||
getAllFirmwares(pageParam) |
|
||||||
} |
|
||||||
|
|
||||||
function getAllFirmwares (page: IPage) { |
|
||||||
getFirmwares(workspaceId, page, param).then(res => { |
|
||||||
const firmwareList: Firmware[] = res.data.list |
|
||||||
data.firmware = firmwareList |
|
||||||
paginationProp.total = res.data.pagination.total |
|
||||||
paginationProp.current = res.data.pagination.page |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const sVisible = ref(false) |
|
||||||
const uploadParam = reactive<FirmwareUploadParam>({ |
|
||||||
device_name: [], |
|
||||||
release_note: '', |
|
||||||
status: true |
|
||||||
}) |
|
||||||
|
|
||||||
const rules = { |
|
||||||
status: [{ required: true }], |
|
||||||
release_note: [{ required: true, message: 'Please input release note.' }], |
|
||||||
device_name: [{ required: true, message: 'Please select which models this firmware belongs to.' }] |
|
||||||
} |
|
||||||
interface FileItem { |
|
||||||
uid: string; |
|
||||||
name?: string; |
|
||||||
status?: string; |
|
||||||
response?: string; |
|
||||||
url?: string; |
|
||||||
} |
|
||||||
|
|
||||||
interface FileInfo { |
|
||||||
file: FileItem; |
|
||||||
fileList: FileItem[]; |
|
||||||
} |
|
||||||
const fileList = ref<FileItem[]>([]) |
|
||||||
|
|
||||||
function beforeUpload (file: FileItem) { |
|
||||||
if (!file.name || !file.name?.endsWith('.zip')) { |
|
||||||
message.error('Format error. Please select zip file.') |
|
||||||
return false |
|
||||||
} |
|
||||||
fileList.value = [file] |
|
||||||
return false |
|
||||||
} |
|
||||||
|
|
||||||
const formRef = ref() |
|
||||||
function removeFile (file: FileItem) { |
|
||||||
fileList.value = [] |
|
||||||
} |
|
||||||
function onCancel () { |
|
||||||
formRef.value.resetFields() |
|
||||||
fileList.value = [] |
|
||||||
sVisible.value = false |
|
||||||
} |
|
||||||
|
|
||||||
const uploadFile = async () => { |
|
||||||
if (fileList.value.length === 0) { |
|
||||||
message.error('Please select at least one file.') |
|
||||||
} |
|
||||||
let uploading: string |
|
||||||
formRef.value.validate().then(async () => { |
|
||||||
const file: FileItem = fileList.value[0] |
|
||||||
const fileData = new FormData() |
|
||||||
fileData.append('file', file as any, file.name) |
|
||||||
Object.keys(uploadParam).forEach((key) => { |
|
||||||
const val = uploadParam[key as keyof FirmwareUploadParam] |
|
||||||
if (val instanceof Array) { |
|
||||||
val.forEach((value) => { |
|
||||||
fileData.append(key, value) |
|
||||||
}) |
|
||||||
} else { |
|
||||||
fileData.append(key, val.toString()) |
|
||||||
} |
|
||||||
}) |
|
||||||
const timestamp = new Date().getTime() |
|
||||||
uploading = (file.name ?? 'uploding') + timestamp |
|
||||||
notification.open({ |
|
||||||
key: uploading, |
|
||||||
message: `Uploading ${moment().format()}`, |
|
||||||
description: `[${file.name}] is uploading... `, |
|
||||||
duration: null |
|
||||||
}) |
|
||||||
importFirmareFile(workspaceId, fileData).then((res) => { |
|
||||||
if (res.code === 0) { |
|
||||||
notification.success({ |
|
||||||
message: `Uploaded ${moment().format()}`, |
|
||||||
description: `[${file.name}] file uploaded successfully. Duration: ${moment.duration(new Date().getTime() - timestamp).asSeconds()}`, |
|
||||||
duration: null |
|
||||||
}) |
|
||||||
getAllFirmwares(pageParam) |
|
||||||
} else { |
|
||||||
notification.error({ |
|
||||||
message: `Failed to upload [${file.name}]. Check and try again.`, |
|
||||||
description: `Error message: ${res.message} ${moment().format()}`, |
|
||||||
style: { color: commonColor.FAIL }, |
|
||||||
duration: null, |
|
||||||
}) |
|
||||||
} |
|
||||||
}).finally(() => { |
|
||||||
notification.close(uploading) |
|
||||||
}) |
|
||||||
fileList.value = [] |
|
||||||
formRef.value.resetFields() |
|
||||||
sVisible.value = false |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
</script> |
|
||||||
<style> |
|
||||||
|
|
||||||
.table { |
|
||||||
background-color: white; |
|
||||||
margin: 20px; |
|
||||||
padding: 20px; |
|
||||||
height: 88vh; |
|
||||||
} |
|
||||||
.table-striped { |
|
||||||
background-color: #f7f9fa; |
|
||||||
} |
|
||||||
.ant-table { |
|
||||||
border-top: 1px solid rgb(0,0,0,0.06); |
|
||||||
border-bottom: 1px solid rgb(0,0,0,0.06); |
|
||||||
} |
|
||||||
.ant-table-tbody tr td { |
|
||||||
border: 0; |
|
||||||
} |
|
||||||
.ant-table td { |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
.ant-table-thead tr th { |
|
||||||
background: white !important; |
|
||||||
border: 0; |
|
||||||
} |
|
||||||
th.ant-table-selection-column { |
|
||||||
background-color: white !important; |
|
||||||
} |
|
||||||
.ant-table-header { |
|
||||||
background-color: white !important; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,98 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="project-flight-area-wrapper height-100"> |
|
||||||
<a-spin :spinning="loading" :delay="300" tip="loading" size="large" class="height-100"> |
|
||||||
<Title title="Custom Flight Area" /> |
|
||||||
<FlightAreaPanel :data="flightAreaList" @location-area="clickArea" @delete-area="deleteAreaById"/> |
|
||||||
<DividerLine /> |
|
||||||
<FlightAreaSyncPanel /> |
|
||||||
</a-spin> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { onMounted, ref } from 'vue' |
|
||||||
import Title from '/@/components/workspace/Title.vue' |
|
||||||
import DividerLine from '/@/components/workspace/DividerLine.vue' |
|
||||||
import FlightAreaPanel from '/@/components/flight-area/FlightAreaPanel.vue' |
|
||||||
import FlightAreaSyncPanel from '/@/components/flight-area/FlightAreaSyncPanel.vue' |
|
||||||
import { GetFlightArea, deleteFlightArea, getFlightAreaList } from '/@/api/flight-area' |
|
||||||
import { useGMapCover } from '/@/hooks/use-g-map-cover' |
|
||||||
import { useMapTool } from '/@/hooks/use-map-tool' |
|
||||||
import { EFlightAreaType, EGeometryType, FlightAreaUpdate } from '/@/types/flight-area' |
|
||||||
import { useFlightArea } from '/@/components/flight-area/use-flight-area' |
|
||||||
import { useFlightAreaUpdateEvent } from '/@/components/flight-area/use-flight-area-update' |
|
||||||
|
|
||||||
const loading = ref(false) |
|
||||||
const flightAreaList = ref<GetFlightArea[]>([]) |
|
||||||
let useGMapCoverHook = useGMapCover() |
|
||||||
let useMapToolHook = useMapTool() |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
getDataList() |
|
||||||
}) |
|
||||||
const { getGcj02 } = useFlightArea() |
|
||||||
|
|
||||||
const initMapFlightArea = () => { |
|
||||||
useMapToolHook = useMapTool() |
|
||||||
useGMapCoverHook = useGMapCover() |
|
||||||
flightAreaList.value.forEach(area => { |
|
||||||
updateMapFlightArea(area) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const updateMapFlightArea = (area: GetFlightArea) => { |
|
||||||
switch (area.content.geometry.type) { |
|
||||||
case EGeometryType.CIRCLE: |
|
||||||
useGMapCoverHook.updateFlightAreaCircle(area.area_id, area.name, area.content.geometry.radius, getGcj02(area.content.geometry.coordinates), area.status, area.type) |
|
||||||
break |
|
||||||
case 'Polygon': |
|
||||||
useGMapCoverHook.updateFlightAreaPolygon(area.area_id, area.name, getGcj02(area.content.geometry.coordinates[0]), area.status, area.type) |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const getDataList = () => { |
|
||||||
loading.value = true |
|
||||||
getFlightAreaList().then(res => { |
|
||||||
flightAreaList.value = res.data |
|
||||||
setTimeout(initMapFlightArea, 2000) |
|
||||||
}).finally(() => { |
|
||||||
loading.value = false |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const deleteAreaById = (areaId: string) => { |
|
||||||
deleteFlightArea(areaId) |
|
||||||
} |
|
||||||
|
|
||||||
const deleteArea = (area: FlightAreaUpdate) => { |
|
||||||
flightAreaList.value = flightAreaList.value.filter(data => data.area_id !== area.area_id) |
|
||||||
useGMapCoverHook.removeCoverFromMap(area.area_id) |
|
||||||
} |
|
||||||
|
|
||||||
const updateArea = (area: FlightAreaUpdate) => { |
|
||||||
flightAreaList.value = flightAreaList.value.map(data => data.area_id === area.area_id ? area : data) |
|
||||||
updateMapFlightArea(area as GetFlightArea) |
|
||||||
} |
|
||||||
|
|
||||||
const addArea = (area: FlightAreaUpdate) => { |
|
||||||
flightAreaList.value.push(area as GetFlightArea) |
|
||||||
updateMapFlightArea(area as GetFlightArea) |
|
||||||
} |
|
||||||
|
|
||||||
useFlightAreaUpdateEvent(addArea, deleteArea, updateArea) |
|
||||||
|
|
||||||
const clickArea = (area: GetFlightArea) => { |
|
||||||
console.info(area) |
|
||||||
let coordinate |
|
||||||
switch (area.content.geometry.type) { |
|
||||||
case EGeometryType.CIRCLE: |
|
||||||
coordinate = getGcj02(area.content.geometry.coordinates) |
|
||||||
break |
|
||||||
case 'Polygon': |
|
||||||
coordinate = useGMapCoverHook.calcPolygonPosition(getGcj02(area.content.geometry.coordinates[0])) |
|
||||||
break |
|
||||||
} |
|
||||||
useMapToolHook.panTo(coordinate) |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,4 +0,0 @@ |
|||||||
declare module 'mqtt/dist/mqtt.min' { |
|
||||||
import MQTT from 'mqtt' |
|
||||||
export = MQTT |
|
||||||
} |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
export interface Firmware { |
|
||||||
firmware_id: string |
|
||||||
file_name: string |
|
||||||
product_version: string |
|
||||||
file_size: number |
|
||||||
device_name: string[] |
|
||||||
username: string |
|
||||||
release_note: string |
|
||||||
released_time: string |
|
||||||
firmware_status: boolean |
|
||||||
} |
|
||||||
|
|
||||||
export enum FirmwareStatusEnum { |
|
||||||
NONE = 'All', |
|
||||||
FALSE = 'Disabled', |
|
||||||
TRUE = 'Available' |
|
||||||
} |
|
||||||
|
|
||||||
export interface FirmwareQueryParam { |
|
||||||
product_version: string |
|
||||||
device_name: string |
|
||||||
firmware_status: FirmwareStatusEnum |
|
||||||
} |
|
||||||
|
|
||||||
export interface FirmwareUploadParam { |
|
||||||
device_name: string[] |
|
||||||
release_note: string |
|
||||||
status: boolean |
|
||||||
} |
|
||||||
|
|
||||||
export enum DeviceNameEnum { |
|
||||||
DJI_DOCK = 'DJI Dock', |
|
||||||
DJI_DOCK2 = 'DJI Dock2', |
|
||||||
MATRICE_30 = 'Matrice 30', |
|
||||||
MATRICE_30T = 'Matrice 30T', |
|
||||||
M3D = 'M3D', |
|
||||||
M3TD = 'M3TD', |
|
||||||
} |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
export enum DRC_METHOD { |
|
||||||
HEART_BEAT = 'heart_beat', |
|
||||||
DRONE_CONTROL = 'drone_control', // 飞行控制-虚拟摇杆
|
|
||||||
DRONE_EMERGENCY_STOP = 'drone_emergency_stop', // 急停
|
|
||||||
OSD_INFO_PUSH = 'osd_info_push', // 高频osd信息上报
|
|
||||||
HSI_INFO_PUSH = 'hsi_info_push', // 避障信息上报
|
|
||||||
DELAY_TIME_INFO_PUSH = 'delay_info_push', // 图传链路延时信息上报
|
|
||||||
} |
|
||||||
|
|
||||||
// 手动控制
|
|
||||||
export interface DroneControlProtocol { |
|
||||||
x?: number; // 水平方向速度，正值为A指令 负值为D指令 单位：m/s
|
|
||||||
y?: number; // 前进后退方向速度，正值为W指令 负值为S指令 单位：m/s
|
|
||||||
h?: number;// 上下高度值，正值为上升指令 负值为下降指令 单位：m
|
|
||||||
w?: number; // 机头角速度，正值为顺时针，负值为逆时针 单位：degree/s （web端暂无此设计）
|
|
||||||
seq?: number; // 从0计时
|
|
||||||
} |
|
||||||
|
|
||||||
// 低延时osd
|
|
||||||
export interface DRCOsdInfo { |
|
||||||
attitude_head: number;// 飞机姿态head角，单位：度
|
|
||||||
latitude: number;// 飞机经纬度
|
|
||||||
longitude: number; |
|
||||||
altitude: number; |
|
||||||
speed_x: number; |
|
||||||
speed_y: number; |
|
||||||
speed_z: number; |
|
||||||
gimbal_pitch: number;// 云台pitch角
|
|
||||||
gimbal_roll: number;// 云台roll角
|
|
||||||
gimbal_yaw: number;// 云台yaw角
|
|
||||||
} |
|
||||||
|
|
||||||
// 态势感知-HSI
|
|
||||||
export interface DRCHsiInfo { |
|
||||||
up_distance: number;// 上方的障碍物距离，单位：mm
|
|
||||||
down_distance: number;// 下方的障碍物距离，单位：mm
|
|
||||||
around_distances: number[]; // 水平方向观察点,分布在[0,360)区间，表示障碍物与飞机距离，单位为mm。 0对应机头方向正前方，顺时针分布，例如0度为机头正前方，90度为飞机正右方
|
|
||||||
up_enable: boolean; // 上视避障开关状态，true：已开启 false：已关闭
|
|
||||||
up_work: boolean; // 上视避障工作状态，true：正常工作 false：异常或离线
|
|
||||||
down_enable: boolean; // 下视避障开关状态，true：已开启 false：已关闭
|
|
||||||
down_work: boolean; // 下视避障工作状态，true：正常工作 false：异常或离线
|
|
||||||
left_enable: boolean; // 左视避障开关状态，true：已开启 false：已关闭
|
|
||||||
left_work: boolean; // 左视避障工作状态，true：正常工作 false：异常或离线
|
|
||||||
right_enable: boolean; // 右视避障开关状态，true：已开启 false：已关闭
|
|
||||||
right_work: boolean; // 右视避障工作状态，true：正常工作 false：异常或离线
|
|
||||||
front_enable: boolean; // 前视避障开关状态，true：已开启 false：已关闭
|
|
||||||
front_work: boolean; // 前视避障工作状态，true：正常工作 false：异常或离线
|
|
||||||
back_enable: boolean; // 后视避障开关状态，true：已开启 false：已关闭
|
|
||||||
back_work: boolean; // 后视避障工作状态，true：正常工作 false：异常或离线
|
|
||||||
vertical_enable: boolean; // 垂直方向综合开关状态，当本协议中上、下视开关状态均为true时，输出true：已开启，否则输出false：已关闭
|
|
||||||
vertical_work: boolean; // 垂直方向避障工作状态，当本协议中上、下视工作均为true时，输出true：正常工作，否则输出false：异常或离线
|
|
||||||
horizontal_enable: boolean; // 水平方向综合开关状态，当本协议中前、后、左、右、开关状态均为true时，输出true：已开启，否则输出false：已关闭
|
|
||||||
horizontal_work: boolean; // 水平方向避障工作综合状态，当本协议中前、后、左、右视工作均为true时，输出true：正常工作，否则输出false：异常或离线
|
|
||||||
} |
|
||||||
|
|
||||||
export interface LiveViewDelayItem { |
|
||||||
video_id: string; |
|
||||||
liveview_delay_time: number; |
|
||||||
} |
|
||||||
|
|
||||||
// 链路时延信息
|
|
||||||
export interface DRCDelayTimeInfo { |
|
||||||
sdr_cmd_delay: number; // sdr链路命令延时，单位：ms
|
|
||||||
liveview_delay_list: LiveViewDelayItem[]; |
|
||||||
} |
|
||||||
|
|
||||||
export interface DrcResponseInfo { |
|
||||||
result: number; |
|
||||||
output: { |
|
||||||
seq: number |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,83 +0,0 @@ |
|||||||
import { ControlSource } from './device' |
|
||||||
import { ECommanderModeLostAction, ERthMode, LostControlActionInCommandFLight, WaylineLostControlActionInCommandFlight } from '/@/api/drone-control/drone' |
|
||||||
|
|
||||||
export enum ControlSourceChangeType { |
|
||||||
Flight = 1, |
|
||||||
Payload = 2, |
|
||||||
} |
|
||||||
|
|
||||||
// 控制权变化消息
|
|
||||||
export interface ControlSourceChangeInfo { |
|
||||||
sn: string, |
|
||||||
type: ControlSourceChangeType, |
|
||||||
control_source: ControlSource |
|
||||||
} |
|
||||||
|
|
||||||
// 飞向目标点结果
|
|
||||||
export interface FlyToPointMessage { |
|
||||||
sn: string, |
|
||||||
result: number, |
|
||||||
message: string, |
|
||||||
} |
|
||||||
|
|
||||||
// 一键起飞结果
|
|
||||||
export interface TakeoffToPointMessage { |
|
||||||
sn: string, |
|
||||||
result: number, |
|
||||||
message: string, |
|
||||||
} |
|
||||||
|
|
||||||
// 设备端退出drc模式
|
|
||||||
export interface DrcModeExitNotifyMessage { |
|
||||||
sn: string, |
|
||||||
result: number, |
|
||||||
message: string, |
|
||||||
} |
|
||||||
|
|
||||||
// 飞行控制模式状态
|
|
||||||
export interface DrcStatusNotifyMessage { |
|
||||||
sn: string, |
|
||||||
result: number, |
|
||||||
message: string, |
|
||||||
} |
|
||||||
|
|
||||||
export const WaylineLostControlActionInCommandFlightOptions = [ |
|
||||||
{ label: 'Continue', value: WaylineLostControlActionInCommandFlight.CONTINUE }, |
|
||||||
{ label: 'Execute Lost Action', value: WaylineLostControlActionInCommandFlight.EXEC_LOST_ACTION } |
|
||||||
] |
|
||||||
|
|
||||||
export const LostControlActionInCommandFLightOptions = [ |
|
||||||
{ label: 'Return Home', value: LostControlActionInCommandFLight.RETURN_HOME }, |
|
||||||
{ label: 'Hover', value: LostControlActionInCommandFLight.HOVER }, |
|
||||||
{ label: 'Landing', value: LostControlActionInCommandFLight.Land } |
|
||||||
] |
|
||||||
|
|
||||||
export const RthModeInCommandFlightOptions = [ |
|
||||||
{ label: 'Smart Height', value: ERthMode.SMART }, |
|
||||||
{ label: 'Setting Height', value: ERthMode.SETTING } |
|
||||||
] |
|
||||||
|
|
||||||
export const CommanderModeLostActionInCommandFlightOptions = [ |
|
||||||
{ label: 'Continue', value: ECommanderModeLostAction.CONTINUE }, |
|
||||||
{ label: 'Execute Lost Action', value: ECommanderModeLostAction.EXEC_LOST_ACTION } |
|
||||||
] |
|
||||||
|
|
||||||
export const CommanderFlightModeInCommandFlightOptions = [ |
|
||||||
{ label: 'Smart Height', value: ERthMode.SMART }, |
|
||||||
{ label: 'Setting Height', value: ERthMode.SETTING } |
|
||||||
] |
|
||||||
|
|
||||||
// 云台重置模式
|
|
||||||
export enum GimbalResetMode { |
|
||||||
Recenter = 0, |
|
||||||
Down = 1, |
|
||||||
RecenterGimbalPan = 2, |
|
||||||
PitchDown = 3, |
|
||||||
} |
|
||||||
|
|
||||||
export const GimbalResetModeOptions = [ |
|
||||||
{ label: 'Gimbal Recenter', value: GimbalResetMode.Recenter }, |
|
||||||
{ label: 'Gimbal down', value: GimbalResetMode.Down }, |
|
||||||
{ label: 'Recenter Gimbal Pan', value: GimbalResetMode.RecenterGimbalPan }, |
|
||||||
{ label: 'Gimbal Pitch Down', value: GimbalResetMode.PitchDown } |
|
||||||
] |
|
||||||
@ -1,80 +0,0 @@ |
|||||||
import { GeojsonCoordinate, GeojsonPolygon } from '../utils/genjson' |
|
||||||
|
|
||||||
export enum EFlightAreaType { |
|
||||||
NFZ = 'nfz', |
|
||||||
DFENCE = 'dfence', |
|
||||||
} |
|
||||||
|
|
||||||
export enum EGeometryType { |
|
||||||
CIRCLE = 'Circle', |
|
||||||
POLYGON = 'Polygon', |
|
||||||
} |
|
||||||
|
|
||||||
export enum EFlightAreaUpdate { |
|
||||||
ADD = 'add', |
|
||||||
UPDATE = 'update', |
|
||||||
DELETE = 'delete', |
|
||||||
} |
|
||||||
|
|
||||||
export enum ESyncStatus { |
|
||||||
WAIT_SYNC = 'wait_sync', |
|
||||||
SWITCH_FAIL = 'switch_fail', |
|
||||||
SYNCHRONIZING = 'synchronizing', |
|
||||||
SYNCHRONIZED = 'synchronized', |
|
||||||
FAIL = 'fail', |
|
||||||
} |
|
||||||
|
|
||||||
export interface GeojsonCircle { |
|
||||||
type: 'Feature' |
|
||||||
properties: { |
|
||||||
color: string |
|
||||||
clampToGround?: boolean |
|
||||||
} |
|
||||||
geometry: { |
|
||||||
type: EGeometryType.CIRCLE |
|
||||||
coordinates: GeojsonCoordinate |
|
||||||
radius: number |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export interface DroneLocation { |
|
||||||
area_distance: number, |
|
||||||
area_id: string, |
|
||||||
is_in_area: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export interface FlightAreasDroneLocation { |
|
||||||
drone_locations: DroneLocation[] |
|
||||||
} |
|
||||||
|
|
||||||
export type FlightAreaContent = GeojsonCircle | GeojsonPolygon |
|
||||||
|
|
||||||
export interface FlightAreaUpdate { |
|
||||||
operation: EFlightAreaUpdate, |
|
||||||
area_id: string, |
|
||||||
name: string, |
|
||||||
type: EFlightAreaType, |
|
||||||
content: FlightAreaContent, |
|
||||||
status: boolean, |
|
||||||
username: string, |
|
||||||
create_time: number, |
|
||||||
update_time: number, |
|
||||||
} |
|
||||||
|
|
||||||
export interface FlightAreaSyncProgress { |
|
||||||
sn: string, |
|
||||||
result: number, |
|
||||||
status: ESyncStatus, |
|
||||||
message: string, |
|
||||||
} |
|
||||||
|
|
||||||
export const FlightAreaTypeTitleMap = { |
|
||||||
[EFlightAreaType.NFZ]: { |
|
||||||
[EGeometryType.CIRCLE]: 'Circular GEO Zone', |
|
||||||
[EGeometryType.POLYGON]: 'Polygonal GEO Zone', |
|
||||||
}, |
|
||||||
[EFlightAreaType.DFENCE]: { |
|
||||||
[EGeometryType.CIRCLE]: 'Circular Task Area', |
|
||||||
[EGeometryType.POLYGON]: 'Polygonal Task Area', |
|
||||||
}, |
|
||||||
} |
|
||||||
File diff suppressed because one or more lines are too long
@ -1,687 +0,0 @@ |
|||||||
|
|
||||||
//
|
|
||||||
// Copyright (c) 2013-2021 Winlin
|
|
||||||
//
|
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
//
|
|
||||||
|
|
||||||
'use strict'; |
|
||||||
|
|
||||||
function SrsError(name, message) { |
|
||||||
this.name = name; |
|
||||||
this.message = message; |
|
||||||
this.stack = (new Error()).stack; |
|
||||||
} |
|
||||||
SrsError.prototype = Object.create(Error.prototype); |
|
||||||
SrsError.prototype.constructor = SrsError; |
|
||||||
|
|
||||||
// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
|
|
||||||
// Async-awat-prmise based SRS RTC Publisher.
|
|
||||||
function SrsRtcPublisherAsync() { |
|
||||||
var self = {}; |
|
||||||
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
|
|
||||||
self.constraints = { |
|
||||||
audio: true, |
|
||||||
video: { |
|
||||||
width: { ideal: 320, max: 576 } |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
// @see https://github.com/rtcdn/rtcdn-draft
|
|
||||||
// @url The WebRTC url to play with, for example:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream
|
|
||||||
// or specifies the API port:
|
|
||||||
// webrtc://r.ossrs.net:11985/live/livestream
|
|
||||||
// or autostart the publish:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?autostart=true
|
|
||||||
// or change the app from live to myapp:
|
|
||||||
// webrtc://r.ossrs.net:11985/myapp/livestream
|
|
||||||
// or change the stream from livestream to mystream:
|
|
||||||
// webrtc://r.ossrs.net:11985/live/mystream
|
|
||||||
// or set the api server to myapi.domain.com:
|
|
||||||
// webrtc://myapi.domain.com/live/livestream
|
|
||||||
// or set the candidate(eip) of answer:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?candidate=39.107.238.185
|
|
||||||
// or force to access https API:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?schema=https
|
|
||||||
// or use plaintext, without SRTP:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?encrypt=false
|
|
||||||
// or any other information, will pass-by in the query:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?vhost=xxx
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?token=xxx
|
|
||||||
self.publish = async function (url) { |
|
||||||
var conf = self.__internal.prepareUrl(url); |
|
||||||
self.pc.addTransceiver("audio", { direction: "sendonly" }); |
|
||||||
self.pc.addTransceiver("video", { direction: "sendonly" }); |
|
||||||
//self.pc.addTransceiver("video", {direction: "sendonly"});
|
|
||||||
//self.pc.addTransceiver("audio", {direction: "sendonly"});
|
|
||||||
|
|
||||||
if (!navigator.mediaDevices && window.location.protocol === 'http:' && window.location.hostname !== 'localhost') { |
|
||||||
throw new SrsError('HttpsRequiredError', `Please use HTTPS or localhost to publish, read https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`); |
|
||||||
} |
|
||||||
var stream = await navigator.mediaDevices.getUserMedia(self.constraints); |
|
||||||
|
|
||||||
// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
|
|
||||||
stream.getTracks().forEach(function (track) { |
|
||||||
self.pc.addTrack(track); |
|
||||||
|
|
||||||
// Notify about local track when stream is ok.
|
|
||||||
self.ontrack && self.ontrack({ track: track }); |
|
||||||
}); |
|
||||||
|
|
||||||
var offer = await self.pc.createOffer(); |
|
||||||
await self.pc.setLocalDescription(offer); |
|
||||||
var session = await new Promise(function (resolve, reject) { |
|
||||||
// @see https://github.com/rtcdn/rtcdn-draft
|
|
||||||
var data = { |
|
||||||
api: conf.apiUrl, tid: conf.tid, streamurl: conf.streamUrl, |
|
||||||
clientip: null, sdp: offer.sdp |
|
||||||
}; |
|
||||||
console.log("Generated offer: ", data); |
|
||||||
|
|
||||||
const xhr = new XMLHttpRequest(); |
|
||||||
xhr.onload = function () { |
|
||||||
if (xhr.readyState !== xhr.DONE) return; |
|
||||||
if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr); |
|
||||||
const data = JSON.parse(xhr.responseText); |
|
||||||
console.log("Got answer: ", data); |
|
||||||
return data.code ? reject(xhr) : resolve(data); |
|
||||||
} |
|
||||||
xhr.open('POST', conf.apiUrl, true); |
|
||||||
xhr.setRequestHeader('Content-type', 'application/json'); |
|
||||||
xhr.send(JSON.stringify(data)); |
|
||||||
}); |
|
||||||
await self.pc.setRemoteDescription( |
|
||||||
new RTCSessionDescription({ type: 'answer', sdp: session.sdp }) |
|
||||||
); |
|
||||||
session.simulator = conf.schema + '//' + conf.urlObject.server + ':' + conf.port + '/rtc/v1/nack/'; |
|
||||||
|
|
||||||
return session; |
|
||||||
}; |
|
||||||
|
|
||||||
// Close the publisher.
|
|
||||||
self.close = function () { |
|
||||||
self.pc && self.pc.close(); |
|
||||||
self.pc = null; |
|
||||||
}; |
|
||||||
|
|
||||||
// The callback when got local stream.
|
|
||||||
// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
|
|
||||||
self.ontrack = function (event) { |
|
||||||
// Add track to stream of SDK.
|
|
||||||
self.stream.addTrack(event.track); |
|
||||||
}; |
|
||||||
|
|
||||||
// Internal APIs.
|
|
||||||
self.__internal = { |
|
||||||
defaultPath: '/rtc/v1/publish/', |
|
||||||
prepareUrl: function (webrtcUrl) { |
|
||||||
var urlObject = self.__internal.parse(webrtcUrl); |
|
||||||
|
|
||||||
// If user specifies the schema, use it as API schema.
|
|
||||||
var schema = urlObject.user_query.schema; |
|
||||||
schema = schema ? schema + ':' : window.location.protocol; |
|
||||||
|
|
||||||
var port = urlObject.port || 1985; |
|
||||||
if (schema === 'https:') { |
|
||||||
port = urlObject.port || 443; |
|
||||||
} |
|
||||||
|
|
||||||
// @see https://github.com/rtcdn/rtcdn-draft
|
|
||||||
var api = urlObject.user_query.play || self.__internal.defaultPath; |
|
||||||
if (api.lastIndexOf('/') !== api.length - 1) { |
|
||||||
api += '/'; |
|
||||||
} |
|
||||||
|
|
||||||
var apiUrl = schema + '//' + urlObject.server + ':' + port + api; |
|
||||||
for (var key in urlObject.user_query) { |
|
||||||
if (key !== 'api' && key !== 'play') { |
|
||||||
apiUrl += '&' + key + '=' + urlObject.user_query[key]; |
|
||||||
} |
|
||||||
} |
|
||||||
// Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
|
|
||||||
apiUrl = apiUrl.replace(api + '&', api + '?'); |
|
||||||
|
|
||||||
var streamUrl = urlObject.url; |
|
||||||
|
|
||||||
return { |
|
||||||
apiUrl: apiUrl, streamUrl: streamUrl, schema: schema, urlObject: urlObject, port: port, |
|
||||||
tid: Number(parseInt(new Date().getTime() * Math.random() * 100)).toString(16).slice(0, 7) |
|
||||||
}; |
|
||||||
}, |
|
||||||
parse: function (url) { |
|
||||||
// @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
|
|
||||||
var a = document.createElement("a"); |
|
||||||
a.href = url.replace("rtmp://", "http://") |
|
||||||
.replace("webrtc://", "http://") |
|
||||||
.replace("rtc://", "http://"); |
|
||||||
|
|
||||||
var vhost = a.hostname; |
|
||||||
var app = a.pathname.substring(1, a.pathname.lastIndexOf("/")); |
|
||||||
var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1); |
|
||||||
|
|
||||||
// parse the vhost in the params of app, that srs supports.
|
|
||||||
app = app.replace("...vhost...", "?vhost="); |
|
||||||
if (app.indexOf("?") >= 0) { |
|
||||||
var params = app.slice(app.indexOf("?")); |
|
||||||
app = app.slice(0, app.indexOf("?")); |
|
||||||
|
|
||||||
if (params.indexOf("vhost=") > 0) { |
|
||||||
vhost = params.slice(params.indexOf("vhost=") + "vhost=".length); |
|
||||||
if (vhost.indexOf("&") > 0) { |
|
||||||
vhost = vhost.slice(0, vhost.indexOf("&")); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// when vhost equals to server, and server is ip,
|
|
||||||
// the vhost is __defaultVhost__
|
|
||||||
if (a.hostname === vhost) { |
|
||||||
var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/; |
|
||||||
if (re.test(a.hostname)) { |
|
||||||
vhost = "__defaultVhost__"; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// parse the schema
|
|
||||||
var schema = "rtmp"; |
|
||||||
if (url.indexOf("://") > 0) { |
|
||||||
schema = url.slice(0, url.indexOf("://")); |
|
||||||
} |
|
||||||
|
|
||||||
var port = a.port; |
|
||||||
if (!port) { |
|
||||||
// Finger out by webrtc url, if contains http or https port, to overwrite default 1985.
|
|
||||||
if (schema === 'webrtc' && url.indexOf(`webrtc://${a.host}:`) === 0) { |
|
||||||
port = (url.indexOf(`webrtc://${a.host}:80`) === 0) ? 80 : 443; |
|
||||||
} |
|
||||||
|
|
||||||
// Guess by schema.
|
|
||||||
if (schema === 'http') { |
|
||||||
port = 80; |
|
||||||
} else if (schema === 'https') { |
|
||||||
port = 443; |
|
||||||
} else if (schema === 'rtmp') { |
|
||||||
port = 1935; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
var ret = { |
|
||||||
url: url, |
|
||||||
schema: schema, |
|
||||||
server: a.hostname, port: port, |
|
||||||
vhost: vhost, app: app, stream: stream |
|
||||||
}; |
|
||||||
self.__internal.fill_query(a.search, ret); |
|
||||||
|
|
||||||
// For webrtc API, we use 443 if page is https, or schema specified it.
|
|
||||||
if (!ret.port) { |
|
||||||
if (schema === 'webrtc' || schema === 'rtc') { |
|
||||||
if (ret.user_query.schema === 'https') { |
|
||||||
ret.port = 443; |
|
||||||
} else if (window.location.href.indexOf('https://') === 0) { |
|
||||||
ret.port = 443; |
|
||||||
} else { |
|
||||||
// For WebRTC, SRS use 1985 as default API port.
|
|
||||||
ret.port = 1985; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return ret; |
|
||||||
}, |
|
||||||
fill_query: function (query_string, obj) { |
|
||||||
// pure user query object.
|
|
||||||
obj.user_query = {}; |
|
||||||
|
|
||||||
if (query_string.length === 0) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
// split again for angularjs.
|
|
||||||
if (query_string.indexOf("?") >= 0) { |
|
||||||
query_string = query_string.split("?")[1]; |
|
||||||
} |
|
||||||
|
|
||||||
var queries = query_string.split("&"); |
|
||||||
for (var i = 0; i < queries.length; i++) { |
|
||||||
var elem = queries[i]; |
|
||||||
|
|
||||||
var query = elem.split("="); |
|
||||||
obj[query[0]] = query[1]; |
|
||||||
obj.user_query[query[0]] = query[1]; |
|
||||||
} |
|
||||||
|
|
||||||
// alias domain for vhost.
|
|
||||||
if (obj.domain) { |
|
||||||
obj.vhost = obj.domain; |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
self.pc = new RTCPeerConnection(null); |
|
||||||
|
|
||||||
// To keep api consistent between player and publisher.
|
|
||||||
// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
|
|
||||||
// @see https://webrtc.org/getting-started/media-devices
|
|
||||||
self.stream = new MediaStream(); |
|
||||||
|
|
||||||
return self; |
|
||||||
} |
|
||||||
|
|
||||||
// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
|
|
||||||
// Async-await-promise based SRS RTC Player.
|
|
||||||
function SrsRtcPlayerAsync() { |
|
||||||
var self = {}; |
|
||||||
|
|
||||||
// @see https://github.com/rtcdn/rtcdn-draft
|
|
||||||
// @url The WebRTC url to play with, for example:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream
|
|
||||||
// or specifies the API port:
|
|
||||||
// webrtc://r.ossrs.net:11985/live/livestream
|
|
||||||
// webrtc://r.ossrs.net:80/live/livestream
|
|
||||||
// or autostart the play:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?autostart=true
|
|
||||||
// or change the app from live to myapp:
|
|
||||||
// webrtc://r.ossrs.net:11985/myapp/livestream
|
|
||||||
// or change the stream from livestream to mystream:
|
|
||||||
// webrtc://r.ossrs.net:11985/live/mystream
|
|
||||||
// or set the api server to myapi.domain.com:
|
|
||||||
// webrtc://myapi.domain.com/live/livestream
|
|
||||||
// or set the candidate(eip) of answer:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?candidate=39.107.238.185
|
|
||||||
// or force to access https API:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?schema=https
|
|
||||||
// or use plaintext, without SRTP:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?encrypt=false
|
|
||||||
// or any other information, will pass-by in the query:
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?vhost=xxx
|
|
||||||
// webrtc://r.ossrs.net/live/livestream?token=xxx
|
|
||||||
self.play = async function (url) { |
|
||||||
var conf = self.__internal.prepareUrl(url); |
|
||||||
self.pc.addTransceiver("audio", { direction: "recvonly" }); |
|
||||||
self.pc.addTransceiver("video", { direction: "recvonly" }); |
|
||||||
//self.pc.addTransceiver("video", {direction: "recvonly"});
|
|
||||||
//self.pc.addTransceiver("audio", {direction: "recvonly"});
|
|
||||||
|
|
||||||
var offer = await self.pc.createOffer(); |
|
||||||
await self.pc.setLocalDescription(offer); |
|
||||||
var session = await new Promise(function (resolve, reject) { |
|
||||||
// @see https://github.com/rtcdn/rtcdn-draft
|
|
||||||
var data = { |
|
||||||
api: conf.apiUrl, tid: conf.tid, streamurl: conf.streamUrl, |
|
||||||
clientip: null, sdp: offer.sdp |
|
||||||
}; |
|
||||||
console.log("Generated offer: ", data); |
|
||||||
|
|
||||||
const xhr = new XMLHttpRequest(); |
|
||||||
xhr.onload = function () { |
|
||||||
if (xhr.readyState !== xhr.DONE) return; |
|
||||||
if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr); |
|
||||||
const data = JSON.parse(xhr.responseText); |
|
||||||
console.log("Got answer: ", data); |
|
||||||
return data.code ? reject(xhr) : resolve(data); |
|
||||||
} |
|
||||||
xhr.open('POST', conf.apiUrl, true); |
|
||||||
xhr.setRequestHeader('Content-type', 'application/json'); |
|
||||||
xhr.send(JSON.stringify(data)); |
|
||||||
}); |
|
||||||
await self.pc.setRemoteDescription( |
|
||||||
new RTCSessionDescription({ type: 'answer', sdp: session.sdp }) |
|
||||||
); |
|
||||||
session.simulator = conf.schema + '//' + conf.urlObject.server + ':' + conf.port + '/rtc/v1/nack/'; |
|
||||||
|
|
||||||
return session; |
|
||||||
}; |
|
||||||
|
|
||||||
// Close the player.
|
|
||||||
self.close = function () { |
|
||||||
self.pc && self.pc.close(); |
|
||||||
self.pc = null; |
|
||||||
}; |
|
||||||
|
|
||||||
// The callback when got remote track.
|
|
||||||
// Note that the onaddstream is deprecated, @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onaddstream
|
|
||||||
self.ontrack = function (event) { |
|
||||||
// https://webrtc.org/getting-started/remote-streams
|
|
||||||
self.stream.addTrack(event.track); |
|
||||||
}; |
|
||||||
|
|
||||||
// Internal APIs.
|
|
||||||
self.__internal = { |
|
||||||
defaultPath: '/rtc/v1/play/', |
|
||||||
prepareUrl: function (webrtcUrl) { |
|
||||||
var urlObject = self.__internal.parse(webrtcUrl); |
|
||||||
|
|
||||||
// If user specifies the schema, use it as API schema.
|
|
||||||
var schema = urlObject.user_query.schema; |
|
||||||
schema = schema ? schema + ':' : window.location.protocol; |
|
||||||
|
|
||||||
var port = urlObject.port || 1985; |
|
||||||
if (schema === 'https:') { |
|
||||||
port = urlObject.port || 443; |
|
||||||
} |
|
||||||
|
|
||||||
// @see https://github.com/rtcdn/rtcdn-draft
|
|
||||||
var api = urlObject.user_query.play || self.__internal.defaultPath; |
|
||||||
if (api.lastIndexOf('/') !== api.length - 1) { |
|
||||||
api += '/'; |
|
||||||
} |
|
||||||
|
|
||||||
var apiUrl = schema + '//' + urlObject.server + ':' + port + api; |
|
||||||
for (var key in urlObject.user_query) { |
|
||||||
if (key !== 'api' && key !== 'play') { |
|
||||||
apiUrl += '&' + key + '=' + urlObject.user_query[key]; |
|
||||||
} |
|
||||||
} |
|
||||||
// Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
|
|
||||||
apiUrl = apiUrl.replace(api + '&', api + '?'); |
|
||||||
|
|
||||||
var streamUrl = urlObject.url; |
|
||||||
|
|
||||||
return { |
|
||||||
apiUrl: apiUrl, streamUrl: streamUrl, schema: schema, urlObject: urlObject, port: port, |
|
||||||
tid: Number(parseInt(new Date().getTime() * Math.random() * 100)).toString(16).slice(0, 7) |
|
||||||
}; |
|
||||||
}, |
|
||||||
parse: function (url) { |
|
||||||
// @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
|
|
||||||
var a = document.createElement("a"); |
|
||||||
a.href = url.replace("rtmp://", "http://") |
|
||||||
.replace("webrtc://", "http://") |
|
||||||
.replace("rtc://", "http://"); |
|
||||||
|
|
||||||
var vhost = a.hostname; |
|
||||||
var app = a.pathname.substring(1, a.pathname.lastIndexOf("/")); |
|
||||||
var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1); |
|
||||||
|
|
||||||
// parse the vhost in the params of app, that srs supports.
|
|
||||||
app = app.replace("...vhost...", "?vhost="); |
|
||||||
if (app.indexOf("?") >= 0) { |
|
||||||
var params = app.slice(app.indexOf("?")); |
|
||||||
app = app.slice(0, app.indexOf("?")); |
|
||||||
|
|
||||||
if (params.indexOf("vhost=") > 0) { |
|
||||||
vhost = params.slice(params.indexOf("vhost=") + "vhost=".length); |
|
||||||
if (vhost.indexOf("&") > 0) { |
|
||||||
vhost = vhost.slice(0, vhost.indexOf("&")); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// when vhost equals to server, and server is ip,
|
|
||||||
// the vhost is __defaultVhost__
|
|
||||||
if (a.hostname === vhost) { |
|
||||||
var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/; |
|
||||||
if (re.test(a.hostname)) { |
|
||||||
vhost = "__defaultVhost__"; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// parse the schema
|
|
||||||
var schema = "rtmp"; |
|
||||||
if (url.indexOf("://") > 0) { |
|
||||||
schema = url.slice(0, url.indexOf("://")); |
|
||||||
} |
|
||||||
|
|
||||||
var port = a.port; |
|
||||||
if (!port) { |
|
||||||
// Finger out by webrtc url, if contains http or https port, to overwrite default 1985.
|
|
||||||
if (schema === 'webrtc' && url.indexOf(`webrtc://${a.host}:`) === 0) { |
|
||||||
port = (url.indexOf(`webrtc://${a.host}:80`) === 0) ? 80 : 443; |
|
||||||
} |
|
||||||
|
|
||||||
// Guess by schema.
|
|
||||||
if (schema === 'http') { |
|
||||||
port = 80; |
|
||||||
} else if (schema === 'https') { |
|
||||||
port = 443; |
|
||||||
} else if (schema === 'rtmp') { |
|
||||||
port = 1935; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
var ret = { |
|
||||||
url: url, |
|
||||||
schema: schema, |
|
||||||
server: a.hostname, port: port, |
|
||||||
vhost: vhost, app: app, stream: stream |
|
||||||
}; |
|
||||||
self.__internal.fill_query(a.search, ret); |
|
||||||
|
|
||||||
// For webrtc API, we use 443 if page is https, or schema specified it.
|
|
||||||
if (!ret.port) { |
|
||||||
if (schema === 'webrtc' || schema === 'rtc') { |
|
||||||
if (ret.user_query.schema === 'https') { |
|
||||||
ret.port = 443; |
|
||||||
} else if (window.location.href.indexOf('https://') === 0) { |
|
||||||
ret.port = 443; |
|
||||||
} else { |
|
||||||
// For WebRTC, SRS use 1985 as default API port.
|
|
||||||
ret.port = 1985; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return ret; |
|
||||||
}, |
|
||||||
fill_query: function (query_string, obj) { |
|
||||||
// pure user query object.
|
|
||||||
obj.user_query = {}; |
|
||||||
|
|
||||||
if (query_string.length === 0) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
// split again for angularjs.
|
|
||||||
if (query_string.indexOf("?") >= 0) { |
|
||||||
query_string = query_string.split("?")[1]; |
|
||||||
} |
|
||||||
|
|
||||||
var queries = query_string.split("&"); |
|
||||||
for (var i = 0; i < queries.length; i++) { |
|
||||||
var elem = queries[i]; |
|
||||||
|
|
||||||
var query = elem.split("="); |
|
||||||
obj[query[0]] = query[1]; |
|
||||||
obj.user_query[query[0]] = query[1]; |
|
||||||
} |
|
||||||
|
|
||||||
// alias domain for vhost.
|
|
||||||
if (obj.domain) { |
|
||||||
obj.vhost = obj.domain; |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
self.pc = new RTCPeerConnection(null); |
|
||||||
|
|
||||||
// Create a stream to add track to the stream, @see https://webrtc.org/getting-started/remote-streams
|
|
||||||
self.stream = new MediaStream(); |
|
||||||
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
|
|
||||||
self.pc.ontrack = function (event) { |
|
||||||
if (self.ontrack) { |
|
||||||
self.ontrack(event); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
return self; |
|
||||||
} |
|
||||||
|
|
||||||
// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
|
|
||||||
// Async-awat-prmise based SRS RTC Publisher by WHIP.
|
|
||||||
function SrsRtcWhipWhepAsync() { |
|
||||||
var self = {}; |
|
||||||
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
|
|
||||||
self.constraints = { |
|
||||||
audio: true, |
|
||||||
video: { |
|
||||||
width: { ideal: 320, max: 576 } |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
// See https://datatracker.ietf.org/doc/draft-ietf-wish-whip/
|
|
||||||
// @url The WebRTC url to publish with, for example:
|
|
||||||
// http://localhost:1985/rtc/v1/whip/?app=live&stream=livestream
|
|
||||||
self.publish = async function (url) { |
|
||||||
if (url.indexOf('/whip/') === -1) throw new Error(`invalid WHIP url ${url}`); |
|
||||||
|
|
||||||
self.pc.addTransceiver("audio", { direction: "sendonly" }); |
|
||||||
self.pc.addTransceiver("video", { direction: "sendonly" }); |
|
||||||
|
|
||||||
if (!navigator.mediaDevices && window.location.protocol === 'http:' && window.location.hostname !== 'localhost') { |
|
||||||
throw new SrsError('HttpsRequiredError', `Please use HTTPS or localhost to publish, read https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`); |
|
||||||
} |
|
||||||
var stream = await navigator.mediaDevices.getUserMedia(self.constraints); |
|
||||||
|
|
||||||
// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
|
|
||||||
stream.getTracks().forEach(function (track) { |
|
||||||
self.pc.addTrack(track); |
|
||||||
|
|
||||||
// Notify about local track when stream is ok.
|
|
||||||
self.ontrack && self.ontrack({ track: track }); |
|
||||||
}); |
|
||||||
|
|
||||||
var offer = await self.pc.createOffer(); |
|
||||||
await self.pc.setLocalDescription(offer); |
|
||||||
const answer = await new Promise(function (resolve, reject) { |
|
||||||
console.log("Generated offer: ", offer); |
|
||||||
|
|
||||||
const xhr = new XMLHttpRequest(); |
|
||||||
xhr.onload = function () { |
|
||||||
if (xhr.readyState !== xhr.DONE) return; |
|
||||||
if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr); |
|
||||||
const data = xhr.responseText; |
|
||||||
console.log("Got answer: ", data); |
|
||||||
return data.code ? reject(xhr) : resolve(data); |
|
||||||
} |
|
||||||
xhr.open('POST', url, true); |
|
||||||
xhr.setRequestHeader('Content-type', 'application/sdp'); |
|
||||||
xhr.send(offer.sdp); |
|
||||||
}); |
|
||||||
await self.pc.setRemoteDescription( |
|
||||||
new RTCSessionDescription({ type: 'answer', sdp: answer }) |
|
||||||
); |
|
||||||
|
|
||||||
return self.__internal.parseId(url, offer.sdp, answer); |
|
||||||
}; |
|
||||||
|
|
||||||
// See https://datatracker.ietf.org/doc/draft-ietf-wish-whip/
|
|
||||||
// @url The WebRTC url to play with, for example:
|
|
||||||
// http://localhost:1985/rtc/v1/whep/?app=live&stream=livestream
|
|
||||||
self.play = async function (url) { |
|
||||||
if (url.indexOf('/whip-play/') === -1 && url.indexOf('/whep/') === -1) throw new Error(`invalid WHEP url ${url}`); |
|
||||||
|
|
||||||
self.pc.addTransceiver("video", { direction: "recvonly" }); |
|
||||||
|
|
||||||
var offer = await self.pc.createOffer(); |
|
||||||
await self.pc.setLocalDescription(offer); |
|
||||||
const answer = await new Promise(function (resolve, reject) { |
|
||||||
console.log("Generated offer: ", offer); |
|
||||||
|
|
||||||
const xhr = new XMLHttpRequest(); |
|
||||||
xhr.onload = function () { |
|
||||||
if (xhr.readyState !== xhr.DONE) return; |
|
||||||
if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr); |
|
||||||
const data = xhr.responseText; |
|
||||||
console.log("Got answer: ", data); |
|
||||||
return data.code ? reject(xhr) : resolve(data); |
|
||||||
} |
|
||||||
xhr.open('POST', url, true); |
|
||||||
xhr.setRequestHeader('Content-type', 'application/sdp'); |
|
||||||
xhr.send(offer.sdp); |
|
||||||
}); |
|
||||||
await self.pc.setRemoteDescription( |
|
||||||
new RTCSessionDescription({ type: 'answer', sdp: answer }) |
|
||||||
); |
|
||||||
|
|
||||||
return self.__internal.parseId(url, offer.sdp, answer); |
|
||||||
}; |
|
||||||
|
|
||||||
// Close the publisher.
|
|
||||||
self.close = function () { |
|
||||||
self.pc && self.pc.close(); |
|
||||||
self.pc = null; |
|
||||||
}; |
|
||||||
|
|
||||||
// The callback when got local stream.
|
|
||||||
// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
|
|
||||||
self.ontrack = function (event) { |
|
||||||
// Add track to stream of SDK.
|
|
||||||
self.stream.addTrack(event.track); |
|
||||||
}; |
|
||||||
|
|
||||||
self.pc = new RTCPeerConnection(null); |
|
||||||
|
|
||||||
// To keep api consistent between player and publisher.
|
|
||||||
// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
|
|
||||||
// @see https://webrtc.org/getting-started/media-devices
|
|
||||||
self.stream = new MediaStream(); |
|
||||||
|
|
||||||
// Internal APIs.
|
|
||||||
self.__internal = { |
|
||||||
parseId: (url, offer, answer) => { |
|
||||||
let sessionid = offer.substr(offer.indexOf('a=ice-ufrag:') + 'a=ice-ufrag:'.length); |
|
||||||
sessionid = sessionid.substr(0, sessionid.indexOf('\n') - 1) + ':'; |
|
||||||
sessionid += answer.substr(answer.indexOf('a=ice-ufrag:') + 'a=ice-ufrag:'.length); |
|
||||||
sessionid = sessionid.substr(0, sessionid.indexOf('\n')); |
|
||||||
|
|
||||||
const a = document.createElement("a"); |
|
||||||
a.href = url; |
|
||||||
return { |
|
||||||
sessionid: sessionid, // Should be ice-ufrag of answer:offer.
|
|
||||||
simulator: a.protocol + '//' + a.host + '/rtc/v1/nack/', |
|
||||||
}; |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
|
|
||||||
self.pc.ontrack = function (event) { |
|
||||||
if (self.ontrack) { |
|
||||||
self.ontrack(event); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
return self; |
|
||||||
} |
|
||||||
|
|
||||||
// Format the codec of RTCRtpSender, kind(audio/video) is optional filter.
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
|
|
||||||
function SrsRtcFormatSenders(senders, kind) { |
|
||||||
var codecs = []; |
|
||||||
senders.forEach(function (sender) { |
|
||||||
var params = sender.getParameters(); |
|
||||||
params && params.codecs && params.codecs.forEach(function (c) { |
|
||||||
if (kind && sender.track.kind !== kind) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
if (c.mimeType.indexOf('/red') > 0 || c.mimeType.indexOf('/rtx') > 0 || c.mimeType.indexOf('/fec') > 0) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
var s = ''; |
|
||||||
|
|
||||||
s += c.mimeType.replace('audio/', '').replace('video/', ''); |
|
||||||
s += ', ' + c.clockRate + 'HZ'; |
|
||||||
if (sender.track.kind === "audio") { |
|
||||||
s += ', channels: ' + c.channels; |
|
||||||
} |
|
||||||
s += ', pt: ' + c.payloadType; |
|
||||||
|
|
||||||
codecs.push(s); |
|
||||||
}); |
|
||||||
}); |
|
||||||
return codecs.join(", "); |
|
||||||
} |
|
||||||
|
|
||||||
export default { |
|
||||||
SrsError, |
|
||||||
SrsRtcPublisherAsync, |
|
||||||
SrsRtcPlayerAsync, |
|
||||||
SrsRtcWhipWhepAsync, |
|
||||||
SrsRtcFormatSenders, |
|
||||||
} |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue