index.vue
3.15 KB
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
<template>
<!-- 工作台相关 -->
<div class="go-chart">
<n-layout>
<layout-header-pro>
<template #left>
<header-left-btn></header-left-btn>
</template>
<template #center>
<header-title></header-title>
</template>
<template #ri-left>
<header-right-btn></header-right-btn>
</template>
</layout-header-pro>
<n-layout-content content-style="overflow:hidden; display: flex">
<div style="overflow:hidden; display: flex">
<content-charts></content-charts>
<content-layers></content-layers>
</div>
<content-configurations></content-configurations>
</n-layout-content>
</n-layout>
</div>
<!-- 右键 -->
<n-dropdown
placement="bottom-start"
trigger="manual"
size="small"
:x="mousePosition.x"
:y="mousePosition.y"
:options="menuOptions"
:show="chartEditStore.getRightMenuShow"
:on-clickoutside="onClickOutSide"
@select="handleMenuSelect"
></n-dropdown>
<!-- 加载蒙层 -->
<content-load></content-load>
</template>
<script setup lang="ts">
import { loadAsyncComponent } from '@/utils'
import { LayoutHeaderPro } from '@/layout/components/LayoutHeaderPro'
import { useContextMenu } from './hooks/useContextMenu.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
const chartHistoryStoreStore = useChartHistoryStore()
const chartEditStore = useChartEditStore()
const t = window['$t']
// 记录初始化
chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)
/**
* THINGS_KIT 修改了部分重写引入，升级版本这里有冲突
* 源文件 './ContentHeader/headerRightBtn/index.vue' ./ContentHeader/headerLeftBtn/index.vue'
* 修改后 './ContentHeader/headerRightBtn/external/index.vue' ./ContentHeader/headerLeftBtn/external/index.vue'
* 源文件 './ContentConfigurations/index.vue'
* 修改后 './ContentConfigurations/external/index.vue'
*/
const HeaderLeftBtn = loadAsyncComponent(() => import('./ContentHeader/headerLeftBtn/external/index.vue'))//修改引入路径！！！
const HeaderRightBtn = loadAsyncComponent(() => import('./ContentHeader/headerRightBtn/external/index.vue'))//修改引入路径！！！
const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle/index.vue'))
const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/external/index.vue'))//修改引入路径！！！
const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))
// 右键
const {
menuOptions,
onClickOutSide,
mousePosition,
handleMenuSelect
} = useContextMenu()
menuOptions.value.forEach(item=>{
if(item.label){
item.label = t(item.label)
}
})
</script>
<style lang="scss" scoped>
@include go("chart") {
height: 100vh;
width: 100vw;
overflow: hidden;
@include background-image("background-image");
}
</style>