|
|
|
|
|
|
|
|
</n-icon> |
|
|
</n-icon> |
|
|
</div> |
|
|
</div> |
|
|
<div class="square__panel"> |
|
|
<div class="square__panel"> |
|
|
<n-icon size="24" color="#fff"> |
|
|
|
|
|
<PlusOutlined /> |
|
|
|
|
|
</n-icon> |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
class="panel__button" |
|
|
|
|
|
@mousedown="handleEvent('down',{yuntai:'05'})" |
|
|
|
|
|
@mouseup="handleEvent('up',{yuntai:'05'})" |
|
|
|
|
|
@mouseleave="handleEvent('leave',{yuntai:'05'})" |
|
|
|
|
|
> |
|
|
|
|
|
<n-icon size="24" color="#fff"> |
|
|
|
|
|
<PlusOutlined /> |
|
|
|
|
|
</n-icon> |
|
|
|
|
|
</div> |
|
|
<p>焦距</p> |
|
|
<p>焦距</p> |
|
|
<n-icon size="24" color="#fff"> |
|
|
|
|
|
<LineOutlined /> |
|
|
|
|
|
</n-icon> |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
class="panel__button" |
|
|
|
|
|
@mousedown="handleEvent('down',{yuntai:'06'})" |
|
|
|
|
|
@mouseup="handleEvent('up',{yuntai:'06'})" |
|
|
|
|
|
@mouseleave="handleEvent('leave',{yuntai:'06'})" |
|
|
|
|
|
> |
|
|
|
|
|
<n-icon size="24" color="#fff"> |
|
|
|
|
|
<LineOutlined /> |
|
|
|
|
|
</n-icon> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="panel__title">云台控制</div> |
|
|
<div class="panel__title">云台控制</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</n-icon> |
|
|
</n-icon> |
|
|
</div> |
|
|
</div> |
|
|
<div class="crcle__panel"> |
|
|
<div class="crcle__panel"> |
|
|
<div class="pannel__item item-1" @click="handleClick(1)" /> |
|
|
|
|
|
<div class="pannel__item item-2" @click="handleClick(1)" /> |
|
|
|
|
|
<div class="pannel__item item-3" @click="handleClick(1)" /> |
|
|
|
|
|
<div class="pannel__item item-4" @click="handleClick(1)" /> |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-for="(item,index) in moveList" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
class="pannel__item" |
|
|
|
|
|
:class="`item-${index+1}`" |
|
|
|
|
|
@mousedown="handleEvent('down',item.list,item.key)" |
|
|
|
|
|
@mouseup="handleEvent('up',item.list,item.key)" |
|
|
|
|
|
@mouseleave="handleEvent('leave',item.list,item.key)" |
|
|
|
|
|
/> |
|
|
<n-icon class="top" size="24" color="#fff"> |
|
|
<n-icon class="top" size="24" color="#fff"> |
|
|
<UpOutlined /> |
|
|
<UpOutlined /> |
|
|
</n-icon> |
|
|
</n-icon> |
|
|
|
|
|
|
|
|
default: () => ['camera', 'locus'] |
|
|
default: () => ['camera', 'locus'] |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
emits: ['start', 'reset'], |
|
|
|
|
|
|
|
|
emits: ['instruct'], |
|
|
setup(props, { emit }) { |
|
|
setup(props, { emit }) { |
|
|
const data = reactive({ |
|
|
const data = reactive({ |
|
|
cameraShow: true, |
|
|
cameraShow: true, |
|
|
|
|
|
|
|
|
let reset = {} |
|
|
let reset = {} |
|
|
if (key) { |
|
|
if (key) { |
|
|
params.pwm = data.config[key] |
|
|
params.pwm = data.config[key] |
|
|
reset = { yaogan: '12', pwm: '200' } |
|
|
|
|
|
|
|
|
reset = { yaogan: '12', pwm: data.config.move } |
|
|
} else { |
|
|
} else { |
|
|
reset = { yuntai: '09' } |
|
|
reset = { yuntai: '09' } |
|
|
} |
|
|
} |
|
|
switch (event) { |
|
|
switch (event) { |
|
|
case 'down': |
|
|
case 'down': |
|
|
data.hasEvent = true |
|
|
data.hasEvent = true |
|
|
emit('start', params) |
|
|
|
|
|
|
|
|
emit('instruct', params) |
|
|
break |
|
|
break |
|
|
case 'up': |
|
|
case 'up': |
|
|
if (data.hasEvent) { |
|
|
if (data.hasEvent) { |
|
|
emit('reset', reset) |
|
|
|
|
|
|
|
|
emit('instruct', reset) |
|
|
data.hasEvent = false |
|
|
data.hasEvent = false |
|
|
} |
|
|
} |
|
|
break |
|
|
break |
|
|
case 'leave': |
|
|
case 'leave': |
|
|
if (data.hasEvent) { |
|
|
if (data.hasEvent) { |
|
|
emit('reset', reset) |
|
|
|
|
|
|
|
|
emit('instruct', reset) |
|
|
data.hasEvent = false |
|
|
data.hasEvent = false |
|
|
} |
|
|
} |
|
|
break |
|
|
break |
|
|
|
|
|
|
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
justify-content: space-around; |
|
|
justify-content: space-around; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
.panel__button{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
.n-icon{ |
|
|
|
|
|
pointer-events: none; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
&.open{ |
|
|
&.open{ |
|
|
transition: width 1s; |
|
|
transition: width 1s; |