<template>
|
<div class="manualControl">
|
<div class="manualControlBg">
|
<div class="manualControlBorder">
|
<div class="manualControlCenter">
|
<img :src="controlCenterImg" alt="" />
|
</div>
|
</div>
|
<div
|
v-for="item in list3"
|
:key="item.name"
|
:style="item.style"
|
class="operateBtn"
|
:title="item.name"
|
:class="item.active ? 'active' : ''"
|
@click="item.handle"
|
></div>
|
<SvgIcon
|
v-for="(item, index) in list3"
|
:name="item.svg"
|
:class="`${'btnIcon-' + index} btnIcon ${item.active ? 'active' : ''}`"
|
:style="item.imgStyle"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import controlCenterImg from '@/assets/images/taskManagement/taskIntermediateContent/controlCenter.png'
|
import SvgIcon from '@/components/SvgIcon.vue'
|
import EventBus from '@/event-bus'
|
|
const isAutoControl = inject('isAutoControl')
|
|
const list3 = computed(() => [
|
{ name: '自动控制', svg: 'autoControl', style: { top: '-70%' }, active: isAutoControl.value, handle: autoControl },
|
{ name: '继续任务', svg: 'continueTask', style: { left: '70%' }, active: false, handle: autoControl },
|
{
|
name: '手动控制',
|
svg: 'manualControl',
|
style: { top: '70%' },
|
active: !isAutoControl.value,
|
handle: manualControl,
|
},
|
{ name: '返航/取消返航', svg: 'turnBack', style: { left: '-70%' }, active: false, handle: turnBack },
|
])
|
|
function autoControl() {
|
isAutoControl.value = true
|
EventBus.emit('controlPanel-cancelControl')
|
}
|
|
function manualControl() {
|
EventBus.emit('controlPanel-control')
|
}
|
|
function turnBack() {
|
isAutoControl.value = true
|
EventBus.emit('controlPanel-returnOrCancelReturn')
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.manualControl {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 188px;
|
height: 188px;
|
background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
|
border-radius: 40px 40px 40px 40px;
|
|
.manualControlBg {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
width: 165px;
|
height: 165px;
|
border-radius: 50%;
|
position: relative;
|
background: radial-gradient(circle, #5d5c5e 0%, #514f52 50%, #3d3b3d 100%);
|
|
.operateBtn {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
transform: rotate(45deg);
|
|
&:hover {
|
cursor: pointer;
|
//background: radial-gradient(circle, #5d5c5e 0%, #514f52 50%, #3d3b3d 100%);
|
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
|
}
|
}
|
|
.btnIcon {
|
position: absolute;
|
font-size: 24px;
|
pointer-events: none;
|
color: #8e8e8f;
|
|
&.active {
|
color: #fff;
|
}
|
|
&-0 {
|
left: 50%;
|
top: 20px;
|
transform: translateX(-50%);
|
}
|
|
&-1 {
|
top: 50%;
|
right: 20px;
|
transform: translateY(-50%);
|
}
|
|
&-2 {
|
bottom: 20px;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
&-3 {
|
top: 50%;
|
left: 20px;
|
transform: translateY(-50%);
|
}
|
}
|
|
.manualControlBorder {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 135px;
|
height: 135px;
|
border-radius: 50%;
|
border: 2px solid #ffffff;
|
|
.manualControlCenter {
|
z-index: 5;
|
width: 50px;
|
height: 50px;
|
background: #404040;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 18px;
|
height: 18px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
