@ -4,145 +4,141 @@
< div class = "drone-control-box" > < div class = "drone-control-box" >
< div class = "box" > < div class = "box" >
< div class = "row" > < div class = "row" >
< div class = "drone-control" > < Button :ghost ="!flightController" size = "small" @click ="onClickFightControl" > {{ flightController ? ' Exit Remote Control ' : ' Enter Remote Control ' }} < / Button > < / div > < div class = "drone-control" > < Button :ghost ="!flightController" size = "small" @click ="onClickFightControl" > {{
flightController ? 'Exit Remote Control' : 'Enter Remote Control' } } < / Button > < / div >
< / div > < / div >
< div class = "row" > < div class = "row" >
< div class = "drone-control-direction" > < div class = "drone-control-direction" >
< Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_Q)" @onmouseup ="onMouseUp" > < Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_Q)" @onmouseup ="onMouseUp" >
< template # icon > < UndoOutlined / > < / template > < span class = "word" > Q < / span > < template # icon >
< UndoOutlined / >
< / template > < span class = "word" > Q < / span >
< / Button > < / Button >
< Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_W)" @onmouseup ="onMouseUp" > < Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_W)" @onmouseup ="onMouseUp" >
< template # icon > < UpOutlined / > < / template > < span class = "word" > W < / span > < template # icon >
< UpOutlined / >
< / template > < span class = "word" > W < / span >
< / Button > < / Button >
< Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_E)" @onmouseup ="onMouseUp" > < Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_E)" @onmouseup ="onMouseUp" >
< template # icon > < RedoOutlined / > < / template > < span class = "word" > E < / span > < template # icon >
< RedoOutlined / >
< / template > < span class = "word" > E < / span >
< / Button > < / Button >
< Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.ARROW_UP)" @onmouseup ="onMouseUp" > < Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.ARROW_UP)" @onmouseup ="onMouseUp" >
< template # icon > < ArrowUpOutlined / > < / template > < template # icon >
< ArrowUpOutlined / >
< / template >
< / Button > < / Button >
< br / > < br / >
< Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_A)" @onmouseup ="onMouseUp" > < Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_A)" @onmouseup ="onMouseUp" >
< template # icon > < LeftOutlined / > < / template > < span class = "word" > A < / span > < template # icon >
< LeftOutlined / >
< / template > < span class = "word" > A < / span >
< / Button > < / Button >
< Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_S)" @onmouseup ="onMouseUp" > < Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_S)" @onmouseup ="onMouseUp" >
< template # icon > < DownOutlined / > < / template > < span class = "word" > S < / span > < template # icon >
< DownOutlined / >
< / template > < span class = "word" > S < / span >
< / Button > < / Button >
< Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_D)" @onmouseup ="onMouseUp" > < Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.KEY_D)" @onmouseup ="onMouseUp" >
< template # icon > < RightOutlined / > < / template > < span class = "word" > D < / span > < template # icon >
< RightOutlined / >
< / template > < span class = "word" > D < / span >
< / Button > < / Button >
< Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.ARROW_DOWN)" @onmouseup ="onMouseUp" > < Button size = "small" ghost @mousedown ="onMouseDown(KeyCode.ARROW_DOWN)" @onmouseup ="onMouseUp" >
< template # icon > < ArrowDownOutlined / > < / template > < template # icon >
< ArrowDownOutlined / >
< / template >
< / Button > < / Button >
< / div > < / div >
< Button type = "primary" size = "small" danger ghost @click ="handleEmergencyStop" > < Button type = "primary" size = "small" danger ghost @click ="handleEmergencyStop" >
< template # icon > < PauseCircleOutlined / > < / template > < span > Break < / span > < template # icon >
< PauseCircleOutlined / >
< / template > < span > Break < / span >
< / Button > < / Button >
< / div > < / div >
< div class = "row" > < div class = "row" >
< DroneControlPopover < DroneControlPopover :visible ="flyToPointPopoverData.visible" :loading ="flyToPointPopoverData.loading"
: visible = "flyToPointPopoverData.visible" @ confirm = "($event) => onFlyToConfirm(true)" @ cancel = "($event) => onFlyToConfirm(false)" >
: loading = "flyToPointPopoverData.loading"
@ confirm = "($event) => onFlyToConfirm(true)"
@ cancel = "($event) =>onFlyToConfirm(false)"
>
< template # formContent > < template # formContent >
< div class = "form-content" > < div class = "form-content" >
< div > < div >
< span class = "form-label" > latitude : < / span > < span class = "form-label" > latitude : < / span >
< a -input -number v -model :value ="flyToPointPopoverData.latitude" / > < a -input -number v -model :value ="flyToPointPopoverData.latitude" / >
< / div > < / div >
< div > < div >
< span class = "form-label" > longitude : < / span > < span class = "form-label" > longitude : < / span >
< a -input -number v -model :value ="flyToPointPopoverData.longitude" / > < a -input -number v -model :value ="flyToPointPopoverData.longitude" / >
< / div > < / div >
< div > < div >
< span class = "form-label" > height ( m ) : < / span > < span class = "form-label" > height ( m ) : < / span >
< a -input -number v -model :value ="flyToPointPopoverData.height" / > < a -input -number v -model :value ="flyToPointPopoverData.height" / >
< / div > < / div >
< / div > < / div >
< / template > < / template >
< Button size = "small" ghost @click ="onShowFlyToPopover" > < Button size = "small" ghost @click ="onShowFlyToPopover" >
< span > Fly to < / span > < span > Fly to < / span >
< / Button > < / Button >
< / DroneControlPopover > < / DroneControlPopover >
< Button size = "small" ghost @click ="onStopFlyToPoint" > < Button size = "small" ghost @click ="onStopFlyToPoint" >
< span > Stop Fly to < / span > < span > Stop Fly to < / span >
< / Button > < / Button >
< DroneControlPopover < DroneControlPopover :visible ="takeoffToPointPopoverData.visible" :loading ="takeoffToPointPopoverData.loading"
: visible = "takeoffToPointPopoverData.visible" @ confirm = "($event) => onTakeoffToPointConfirm(true)" @ cancel = "($event) => onTakeoffToPointConfirm(false)" >
: loading = "takeoffToPointPopoverData.loading"
@ confirm = "($event) => onTakeoffToPointConfirm(true)"
@ cancel = "($event) =>onTakeoffToPointConfirm(false)"
>
< template # formContent > < template # formContent >
< div class = "form-content" > < div class = "form-content" >
< div > < div >
< span class = "form-label" > latitude : < / span > < span class = "form-label" > latitude : < / span >
< a -input -number v -model :value ="takeoffToPointPopoverData.latitude" / > < a -input -number v -model :value ="takeoffToPointPopoverData.latitude" / >
< / div > < / div >
< div > < div >
< span class = "form-label" > longitude : < / span > < span class = "form-label" > longitude : < / span >
< a -input -number v -model :value ="takeoffToPointPopoverData.longitude" / > < a -input -number v -model :value ="takeoffToPointPopoverData.longitude" / >
< / div > < / div >
< div > < div >
< span class = "form-label" > height ( m ) : < / span > < span class = "form-label" > height ( m ) : < / span >
< a -input -number v -model :value ="takeoffToPointPopoverData.height" / > < a -input -number v -model :value ="takeoffToPointPopoverData.height" / >
< / div > < / div >
< div > < div >
< span class = "form-label" > Safe Takeoff Altitude ( m ) : < / span > < span class = "form-label" > Safe Takeoff Altitude ( m ) : < / span >
< a -input -number v -model :value ="takeoffToPointPopoverData.securityTakeoffHeight" / > < a -input -number v -model :value ="takeoffToPointPopoverData.securityTakeoffHeight" / >
< / div > < / div >
< div > < div >
< span class = "form-label" > Return - to - Home Altitude ( m ) : < / span > < span class = "form-label" > Return - to - Home Altitude ( m ) : < / span >
< a -input -number v -model :value ="takeoffToPointPopoverData.rthAltitude" / > < a -input -number v -model :value ="takeoffToPointPopoverData.rthAltitude" / >
< / div > < / div >
< div > < div >
< span class = "form-label" > Lost Action : < / span > < span class = "form-label" > Lost Action : < / span >
< a -select < a -select v -model :value ="takeoffToPointPopoverData.rcLostAction" style = "width: 120px"
v - model : value = "takeoffToPointPopoverData.rcLostAction" : options = "LostControlActionInCommandFLightOptions" > < / a - s e l e c t >
style = "width: 120px"
: options = "LostControlActionInCommandFLightOptions"
> < / a - s e l e c t >
< / div > < / div >
< div > < div >
< span class = "form-label" > Wayline Lost Action : < / span > < span class = "form-label" > Wayline Lost Action : < / span >
< a -select < a -select v -model :value ="takeoffToPointPopoverData.exitWaylineWhenRcLost" style = "width: 120px"
v - model : value = "takeoffToPointPopoverData.exitWaylineWhenRcLost" : options = "WaylineLostControlActionInCommandFlightOptions" > < / a - s e l e c t >
style = "width: 120px"
: options = "WaylineLostControlActionInCommandFlightOptions"
> < / a - s e l e c t >
< / div > < / div >
< div > < div >
< span class = "form-label" > Return - to - Home Mode : < / span > < span class = "form-label" > Return - to - Home Mode : < / span >
< a -select < a -select v -model :value ="takeoffToPointPopoverData.rthMode" style = "width: 120px"
v - model : value = "takeoffToPointPopoverData.rthMode" : options = "RthModeInCommandFlightOptions" > < / a - s e l e c t >
style = "width: 120px"
: options = "RthModeInCommandFlightOptions"
> < / a - s e l e c t >
< / div > < / div >
< div > < div >
< span class = "form-label" > Commander Mode Lost Action : < / span > < span class = "form-label" > Commander Mode Lost Action : < / span >
< a -select < a -select v -model :value ="takeoffToPointPopoverData.commanderModeLostAction" style = "width: 120px"
v - model : value = "takeoffToPointPopoverData.commanderModeLostAction" : options = "CommanderModeLostActionInCommandFlightOptions" > < / a - s e l e c t >
style = "width: 120px"
: options = "CommanderModeLostActionInCommandFlightOptions"
> < / a - s e l e c t >
< / div > < / div >
< div > < div >
< span class = "form-label" > Commander Flight Mode : < / span > < span class = "form-label" > Commander Flight Mode : < / span >
< a -select < a -select v -model :value ="takeoffToPointPopoverData.commanderFlightMode" style = "width: 120px"
v - model : value = "takeoffToPointPopoverData.commanderFlightMode" : options = "CommanderFlightModeInCommandFlightOptions" > < / a - s e l e c t >
style = "width: 120px"
: options = "CommanderFlightModeInCommandFlightOptions"
> < / a - s e l e c t >
< / div > < / div >
< div > < div >
< span class = "form-label" > Commander Flight Height ( m ) : < / span > < span class = "form-label" > Commander Flight Height ( m ) : < / span >
< a -input -number v -model :value ="takeoffToPointPopoverData.commanderFlightHeight" / > < a -input -number v -model :value ="takeoffToPointPopoverData.commanderFlightHeight" / >
< / div > < / div >
< / div > < / div >
< / template > < / template >
< Button size = "small" ghost @click ="onShowTakeoffToPointPopover" > < Button size = "small" ghost @click ="onShowTakeoffToPointPopover" >
< span > Take off < / span > < span > Take off < / span >
< / Button > < / Button >
< div v-for ="(cmdItem) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item" > < div v-for ="(cmdItem) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item" >
@ -151,115 +147,95 @@
< / Button > < / Button >
< / div > < / div >
< div > < div >
< Button size = "small" ghost @click ="openLivestreamAgora" > < Button size = "small" ghost @click ="openLivestreamAgora" >
< span > Agora Live < / span > < span > Agora Live < / span >
< / Button > < / Button >
< Button size = "small" ghost @click ="openLivestreamOthers" > < Button size = "small" ghost @click ="openLivestreamOthers" >
< span > RTMP / GB28181 Live < / span > < span > RTMP / GB28181 Live < / span >
< / Button > < / Button >
< / div > < / div >
< / DroneControlPopover > < / DroneControlPopover >
< / div > < / 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 >
< div class = "row" > < div class = "box" >
< DroneControlPopover < div class = "row" >
: visible = "gimbalResetPopoverData.visible" < Select v -model :value ="payloadSelectInfo.value" style = "width: 110px; margin-right: 5px"
: loading = "gimbalResetPopoverData.loading" : options = "payloadSelectInfo.options" @ change = "handlePayloadChange" / >
@ confirm = "($event) => onGimbalResetConfirm(true)" < div class = "drone-control" >
@ cancel = "($event) =>onGimbalResetConfirm(false)" < Button type = "primary" size = "small" @click ="onAuthPayload" > Payload Control < / Button >
> < / div >
< template # formContent > < / div >
< div class = "form-content" > < div class = "row" >
< div > < DroneControlPopover :visible ="gimbalResetPopoverData.visible" :loading ="gimbalResetPopoverData.loading"
< span class = "form-label" > reset mode : < / span > @ confirm = "($event) => onGimbalResetConfirm(true)" @ cancel = "($event) => onGimbalResetConfirm(false)" >
< a -select < template # formContent >
v - model : value = "gimbalResetPopoverData.resetMode" < div class = "form-content" >
style = "width: 180px" < div >
: options = "GimbalResetModeOptions" < span class = "form-label" > reset mode : < / span >
> < / a - s e l e c t > < a -select v -model :value ="gimbalResetPopoverData.resetMode" style = "width: 180px"
: options = "GimbalResetModeOptions" > < / a - s e l e c t >
< / div >
< / div > < / div >
< / div > < / template >
< / template > < Button size = "small" ghost @click ="onShowGimbalResetPopover" >
< Button size = "small" ghost @click ="onShowGimbalResetPopover" > < span > Gimbal Reset < / span >
< span > Gimbal Reset < / span > < / Button >
< / DroneControlPopover >
< Button size = "small" ghost @click ="onSwitchCameraMode" >
< span > Camera Mode Switch < / span >
< / Button > < / Button >
< / DroneControlPopover > < / div >
< Button size = "small" ghost @click ="onSwitchCameraMode" > < div class = "row" >
< span > Camera Mode Switch < / span > < Button size = "small" ghost @click ="onStartCameraRecording" >
< / Button > < span > Start Recording < / span >
< / 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 - s e l e c t >
< / 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 > < / Button >
< / DroneControlPopover > < Button size = "small" ghost @click ="onStopCameraRecording" >
< DroneControlPopover < span > Stop Recording < / span >
: visible = "cameraAimPopoverData.visible" < / Button >
: loading = "cameraAimPopoverData.loading" < / div >
@ confirm = "($event) => onCameraAimConfirm(true)" < div class = "row" >
@ cancel = "($event) =>onCameraAimConfirm(false)" < 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 - s e l e c t >
< / 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 > < template # formContent >
< div class = "form-content" > < div class = "form-content" >
< div > < div >
< span class = "form-label" > camera type : < / span > < span class = "form-label" > camera type : < / span >
< a -select < a -select v -model :value ="cameraAimPopoverData.cameraType" style = "width: 120px"
v - model : value = "cameraAimPopoverData.cameraType" : options = "CameraTypeOptions" > < / a - s e l e c t >
style = "width: 120px"
: options = "CameraTypeOptions"
> < / a - s e l e c t >
< / div > < / div >
< div > < div >
< span class = "form-label" > locked : < / span > < span class = "form-label" > locked : < / span >
< a -switch v -model :checked ="cameraAimPopoverData.locked" / > < a -switch v -model :checked ="cameraAimPopoverData.locked" / >
< / div > < / div >
< div > < div >
< span class = "form-label" > x : < / span > < span class = "form-label" > x : < / span >
< a -input -number v -model :value ="cameraAimPopoverData.x" :min ="0" :max ="1" / > < a -input -number v -model :value ="cameraAimPopoverData.x" :min ="0" :max ="1" / >
< / div > < / div >
< div > < div >
< span class = "form-label" > y : < / span > < span class = "form-label" > y : < / span >
< a -input -number v -model :value ="cameraAimPopoverData.y" :min ="0" :max ="1" / > < a -input -number v -model :value ="cameraAimPopoverData.y" :min ="0" :max ="1" / >
< / div > < / div >
< / div > < / div >
< / template > < / template >
@ -267,9 +243,9 @@
< span class = "word" @click =";" > AIM < / span > < span class = "word" @click =";" > AIM < / span >
< / Button > < / Button >
< / DroneControlPopover > < / DroneControlPopover >
< / div >
< / div > < / div >
< / div > < / div >
< / div >
<!-- 信息提示 -- > <!-- 信息提示 -- >
< DroneControlInfoPanel :message ="drcInfo" > < / DroneControlInfoPanel > < DroneControlInfoPanel :message ="drcInfo" > < / DroneControlInfoPanel >
< / div > < / div >
@ -420,11 +396,11 @@ function onShowTakeoffToPointPopover () {
async function onTakeoffToPointConfirm ( confirm : boolean ) { async function onTakeoffToPointConfirm ( confirm : boolean ) {
if ( confirm ) { if ( confirm ) {
if ( ! takeoffToPointPopoverData . height || if ( ! takeoffToPointPopoverData . height ||
! takeoffToPointPopoverData . latitude || ! takeoffToPointPopoverData . latitude ||
! takeoffToPointPopoverData . longitude || ! takeoffToPointPopoverData . longitude ||
! takeoffToPointPopoverData . securityTakeoffHeight || ! takeoffToPointPopoverData . securityTakeoffHeight ||
! takeoffToPointPopoverData . rthAltitude || ! takeoffToPointPopoverData . rthAltitude ||
! takeoffToPointPopoverData . commanderFlightHeight ) { ! takeoffToPointPopoverData . commanderFlightHeight ) {
message . error ( 'Input error' ) message . error ( 'Input error' )
return return
} }
@ -772,10 +748,10 @@ watch(() => errorInfo, (errorInfo) => {
< / script > < / script >
< style lang = 'scss' scoped > < style lang = 'scss' scoped >
. drone - control - wrapper { . drone - control - wrapper {
/ / b o r d e r - b o t t o m : 1 p x s o l i d # 5 1 5 1 5 1 ; / / b o r d e r - b o t t o m : 1 p x s o l i d # 5 1 5 1 5 1 ;
. drone - control - header { . drone - control - header {
font - size : 14 px ; font - size : 14 px ;
font - weight : 600 ; font - weight : 600 ;
padding : 10 px 10 px 0 px ; padding : 10 px 10 px 0 px ;
@ -784,39 +760,35 @@ watch(() => errorInfo, (errorInfo) => {
. drone - control - box { . drone - control - box {
display : flex ; display : flex ;
flex - wrap : 1 ; flex - wrap : 1 ;
. box { . box {
width : 50 % ; width : 50 % ;
padding : 5 px ; padding : 5 px ;
border : 0.5 px solid rgba ( 255 , 255 , 255 , 0.3 ) ; border : 0.5 px solid rgba ( 255 , 255 , 255 , 0.3 ) ;
. row { . row {
display : flex ; display : flex ;
flex - wrap : wrap ; flex - wrap : wrap ;
padding : 2 px ; padding : 2 px ;
+ . row { + . row {
margin - bottom : 6 px ; margin - bottom : 6 px ;
} }
& : : v - deep { : deep ( . ant - btn ) {
. ant - btn { font - size : 12 px ;
font - size : 12 px ; padding : 0 px 4 px ;
padding : 0 px 4 px ; margin - right : 5 px ;
margin - right : 5 px ;
}
} }
} }
. drone - control { . drone - control {
& : : v - deep { : deep ( . ant - select - single : not ( . ant - select - customize - input ) . ant - select - selector ) {
padding : 0 2 px ;
. ant - select - single : not ( . ant - select - customize - input ) . ant - select - selector {
padding : 0 2 px ;
}
} }
} }
. drone - control - direction { . drone - control - direction {
margin - right : 10 px ; margin - right : 10 px ;
. ant - btn { . ant - btn {
@ -824,7 +796,7 @@ watch(() => errorInfo, (errorInfo) => {
margin - right : 0 ; margin - right : 0 ;
} }
. word { . word {
width : 12 px ; width : 12 px ;
margin - left : 2 px ; margin - left : 2 px ;
font - size : 12 px ; font - size : 12 px ;
pmy
11 months ago