From 8bb2f8984e684b6baa3b4cc335ac034192f58ea1 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Wed, 01 Apr 2026 15:43:28 +0800
Subject: [PATCH] feat: 恢复资源配置
---
applications/drone-command/src/views/resource/components/FunButton.vue | 151 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 151 insertions(+), 0 deletions(-)
diff --git a/applications/drone-command/src/views/resource/components/FunButton.vue b/applications/drone-command/src/views/resource/components/FunButton.vue
new file mode 100644
index 0000000..4a4c38e
--- /dev/null
+++ b/applications/drone-command/src/views/resource/components/FunButton.vue
@@ -0,0 +1,151 @@
+<template>
+ <div class="fun-button-container">
+ <template v-for="(item, index) in tooltipList" :key="index">
+ <el-popover
+ effect="dark"
+ placement="right"
+ :trigger="item.isClick ? 'click' : 'hover'"
+ popper-class="function-popover"
+ v-if="item.show"
+ >
+ <div>
+ <div>{{ item.label[Number(item.isSelected)] }}</div>
+ </div>
+ <template #reference v-if="item.show">
+ <div
+ :class="['currency-box', { 'actived-blue': item.isSelected && item.isSelectColor && item.showActive }]"
+ @click="item.event(item, index)"
+ >
+ <img :src="item.icon[Number(item.isSelected)]" alt="_icon" />
+ </div>
+ </template>
+ </el-popover>
+ </template>
+ </div>
+
+ <BoxSelect v-if="isShowBoxSelect" @upDateBoxSelect="upDateBoxSelect" />
+ <DrawPolygon v-if="isShowDrawPolygon" @upDateDrawState="upDateDrawState" />
+</template>
+
+<script setup>
+import { useStore } from 'vuex'
+import drawPng from '@/assets/images/home/territory/draw.png'
+import noDrawPng from '@/assets/images/home/territory/no-draw.png'
+import boxSelectPng from '@/assets/images/home/territory/box-select.png'
+
+import BoxSelect from './BoxSelect.vue'
+import DrawPolygon from './DrawPolygon.vue'
+
+const isBoxSelect = defineModel('isBoxSelect')
+const isDrawPolygon = defineModel('isDrawPolygon')
+const isShowBoxSelect = ref(false)
+const isShowDrawPolygon = ref(false)
+
+const isDrawPolygonSelect = ref(false)
+
+watch(isBoxSelect, newVal => {
+ if (newVal === false) {
+ isShowBoxSelect.value = newVal
+
+ setBoxSelect(null, 1, newVal)
+ }
+})
+
+watch(isDrawPolygon, newVal => {
+ if (newVal === false) {
+ isShowDrawPolygon.value = newVal
+
+ setDrawState(null, 0, newVal)
+ }
+})
+
+const tooltipList = ref([
+ {
+ showActive: true,
+ label: ['重新绘制', '取消绘制'],
+ isSelectColor: true,
+ isSelected: false,
+ icon: [drawPng, noDrawPng],
+ event: setDrawState,
+ show: isDrawPolygon,
+ },
+
+ {
+ showActive: true,
+ label: ['框选', '取消框选'],
+ isSelectColor: true,
+ isSelected: false,
+ icon: [boxSelectPng, boxSelectPng],
+ event: setBoxSelect,
+ show: isBoxSelect,
+ },
+])
+
+function setDrawState(value, index, show = null) {
+ if (show != null) {
+ tooltipList.value[index].isSelected = show
+ } else {
+ tooltipList.value[index].isSelected = !tooltipList.value[index].isSelected
+ }
+
+ isShowDrawPolygon.value = tooltipList.value[index].isSelected
+ isDrawPolygonSelect.value = tooltipList.value[index].isSelected
+}
+
+function upDateDrawState(show = false) {
+ setDrawState(null, 0, show)
+}
+
+function setBoxSelect(value, index, show = null) {
+ if (show != null) {
+ tooltipList.value[index].isSelected = show
+ } else {
+ tooltipList.value[index].isSelected = !tooltipList.value[index].isSelected
+ }
+
+ isShowBoxSelect.value = tooltipList.value[index].isSelected
+}
+
+function upDateBoxSelect(show = false) {
+ setBoxSelect(null, 1, show)
+}
+
+defineExpose({
+ upDateDrawState,
+ isDrawPolygonSelect,
+})
+</script>
+
+<style lang="scss" scoped>
+.fun-button-container {
+ position: absolute;
+ top: 50px;
+ left: 23%;
+ transform: translate(100%, 0);
+}
+
+.currency-box {
+ width: 45px;
+ height: 45px;
+ border-radius: 3px;
+ background: url('@/assets/images/home/territory/newcon_box.png');
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ cursor: pointer;
+ margin-bottom: 8px;
+ pointer-events: all;
+
+ img {
+ width: 31px;
+ // height: 31px;
+ }
+}
+
+.actived-blue {
+ background-image: none;
+ // background-color: #409eff;
+ background-color: rgba(23, 124, 198, 0.7);
+}
+</style>
--
Gitblit v1.9.3