feat: 恢复资源配置

罗广辉

2026-04-01 8bb2f8984e684b6baa3b4cc335ac034192f58ea1

 applications/drone-command/src/views/resource/components/FunButton.vue

New file
@@ -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>