From 115bd56702e2ce09b7a7c1e6bb5e93e2f6174cdf Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 16 Apr 2025 20:50:13 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/ControlPanel/BaseControl.vue | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 156 insertions(+), 0 deletions(-)
diff --git a/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/ControlPanel/BaseControl.vue b/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/ControlPanel/BaseControl.vue
new file mode 100644
index 0000000..aacaf7d
--- /dev/null
+++ b/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/ControlPanel/BaseControl.vue
@@ -0,0 +1,156 @@
+<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"
+ :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() {
+ 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;
+ 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>
--
Gitblit v1.9.3