SatTaskView任务视图组件

<script setup lang="ts">
import type { SatTaskViewItem, SatMenuItem } from 'sat-earth'
const myComponentData: SatMenuItem & SatTaskViewItem = reactive({
  name: 'MyComponent',
  label: '我的组件',
  icon: {
    class: 'fa-paper-plane-o',
  },
  enable: true,
  active: true,
  eleId: 'MyComponent',
  onActive() {
    changeDataActive(this, true)
  },
})
const customMenuData = computed(() => {
  return [myComponentData]
})

const changeDataEnable = (item: SatMenuItem, flag: boolean) => {
  item.enable = flag
  item.active = flag
}
const changeDataActive = (item: SatMenuItem, flag: boolean) => {
  item.active = flag
}
</script>
<template>
  <SatGlobe>
    <SatTaskView
      :task-view-list="customMenuData.filter((item) => item.enable)"
    />
    <SatMenu>
      <SatSource />
      <SatMapPart />
      <SatLocation />
      <SatMeasure />
      <SatPlot />
      <SatPicture />
      <template #custom-enable>
        <SatMenuTree
          :custom="true"
          :tree-data="customMenuData.filter((i) => i.enable)"
          @custom-click="changeDataEnable($event, true)"
          @custom-close-click="changeDataEnable($event, false)"
        />
      </template>
      <template #custom>
        <SatMenuTree
          :custom="true"
          :tree-data="customMenuData"
          @custom-click="changeDataEnable($event, true)"
        />
      </template>
    </SatMenu>
    <SatPanel
      v-if="myComponentData.enable"
      v-show="myComponentData.active"
      :id="myComponentData.eleId"
      :is-minimize="true"
      :minimize-event="() => changeDataActive(myComponentData, false)"
      :close-event="() => changeDataEnable(myComponentData, false)"
      :is-close="true"
      :title="myComponentData.name"
      :drag-initial-value="{ x: 40, y: 30 }"
    >
      my-component
    </SatPanel>
  </SatGlobe>
</template>