wangrong
2026-08-30 4c949c0dc9bcae785c281c9d8125295f09810b15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { defineStore, storeToRefs } from 'pinia'
import { store } from '../../index'
import { dvMainStoreWithOut } from './dvMain'
import { swap } from '@/utils/utils'
import { useEmitt } from '@/hooks/web/useEmitt'
import { getComponentById, getCurInfo } from '@/store/modules/data-visualization/common'
import ChartCarouselTooltip from '@/views/chart/components/js/g2plot_tooltip_carousel'
 
const dvMainStore = dvMainStoreWithOut()
const { curComponentIndex, curComponent } = storeToRefs(dvMainStore)
 
export const layerStore = defineStore('layer', {
  actions: {
    upComponent(componentId?) {
      const curInfo = getCurInfo(componentId)
      if (curInfo) {
        const { index, componentData } = curInfo
        // 上移图层 index,表示元素在数组中越往后
        if (index < componentData.length - 1) {
          swap(componentData, index, index + 1)
          curComponentIndex.value = index + 1
        }
      }
    },
 
    downComponent(componentId?) {
      const curInfo = getCurInfo(componentId)
      if (curInfo) {
        const { index, componentData } = curInfo
        // 下移图层 index,表示元素在数组中越往前
        if (index > 0) {
          swap(componentData, index, index - 1)
          curComponentIndex.value = index - 1
        }
      }
    },
 
    topComponent(componentId?) {
      // 置顶
      const curInfo = getCurInfo(componentId)
      if (curInfo) {
        const { index, componentData, targetComponent } = curInfo
        if (index < componentData.length - 1) {
          componentData.splice(index, 1)
          componentData.push(targetComponent)
          curComponentIndex.value = componentData.length - 1
        }
      }
    },
 
    bottomComponent(componentId?) {
      // 置底
      const curInfo = getCurInfo(componentId)
      if (curInfo) {
        const { index, componentData, targetComponent } = curInfo
        if (index > 0) {
          componentData.splice(index, 1)
          componentData.unshift(targetComponent)
          curComponentIndex.value = 0
        }
      }
    },
 
    hideComponentWithComponent(componentId?) {
      const targetComponent = getComponentById(componentId)
      // 隐藏
      if (targetComponent) {
        targetComponent.isShow = false
      }
    },
    hideComponent(componentId?) {
      const targetComponent = getComponentById(componentId)
      // 隐藏
      if (targetComponent) {
        targetComponent.isShow = false
      }
    },
    showComponent(componentId?) {
      // 显示
      const targetComponent = getComponentById(componentId)
      if (targetComponent) {
        targetComponent.isShow = true
        if (targetComponent.component == 'Group') {
          targetComponent.propValue.forEach(item => {
            if (item.innerType?.indexOf('table') !== -1 || item?.innerType?.indexOf('map') !== -1) {
              setTimeout(() => {
                useEmitt().emitter.emit('renderChart-' + item.id)
              }, 400)
            }
          })
        } else if (
          targetComponent?.innerType?.indexOf('table') !== -1 ||
          targetComponent?.innerType?.indexOf('map') !== -1
        ) {
          setTimeout(() => {
            useEmitt().emitter.emit('renderChart-' + curComponent.value.id)
          }, 400)
        }
      }
    },
    pausedTooltipCarousel(componentId?) {
      const targetComponent = getComponentById(componentId)
      // 暂停轮播
      if (targetComponent) {
        ChartCarouselTooltip.paused(componentId)
      }
    },
    resumeTooltipCarousel(componentId?) {
      const targetComponent = getComponentById(componentId)
      // 恢复轮播
      if (targetComponent) {
        ChartCarouselTooltip.resume(componentId)
      }
    }
  }
})
 
export const layerStoreWithOut = () => {
  return layerStore(store)
}