2021-12-21 14:57:31 +08:00
|
|
|
<template>
|
2022-01-26 15:46:25 +08:00
|
|
|
<!-- 工作台相关 -->
|
2021-12-21 14:57:31 +08:00
|
|
|
<div class="go-chart">
|
|
|
|
<n-layout>
|
2022-01-05 18:04:41 +08:00
|
|
|
<HeaderPro>
|
|
|
|
<template #left>
|
|
|
|
<HeaderLeftBtn />
|
|
|
|
</template>
|
2022-01-05 20:52:49 +08:00
|
|
|
<template #center>
|
|
|
|
<HeaderTitle />
|
|
|
|
</template>
|
2022-01-05 18:04:41 +08:00
|
|
|
<template #ri-left>
|
|
|
|
<HeaderRightBtn />
|
|
|
|
</template>
|
|
|
|
</HeaderPro>
|
2022-01-06 13:45:51 +08:00
|
|
|
<n-layout-content content-style="overflow:hidden; display: flex">
|
|
|
|
<ContentCharts />
|
2022-01-09 17:12:35 +08:00
|
|
|
<ContentLayers />
|
2022-01-06 15:37:44 +08:00
|
|
|
<ContentDetails />
|
2022-01-05 21:05:55 +08:00
|
|
|
</n-layout-content>
|
2021-12-21 14:57:31 +08:00
|
|
|
</n-layout>
|
|
|
|
</div>
|
2022-01-31 23:37:43 +08:00
|
|
|
<!-- 右键 -->
|
|
|
|
<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"
|
|
|
|
/>
|
2021-12-21 14:57:31 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2022-01-20 21:25:35 +08:00
|
|
|
import { loadAsyncComponent } from '@/utils'
|
2021-12-21 14:57:31 +08:00
|
|
|
import { HeaderPro } from '@/layout/components/HeaderPro'
|
2022-01-31 23:37:43 +08:00
|
|
|
import { useContextMenu } from './hooks/useContextMenu.hook'
|
|
|
|
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
|
|
|
|
const chartEditStore = useChartEditStoreStore()
|
2022-01-20 21:25:35 +08:00
|
|
|
|
|
|
|
const HeaderLeftBtn = loadAsyncComponent(() =>
|
2022-01-26 15:46:25 +08:00
|
|
|
import('./HeaderLeftBtn/index.vue')
|
2022-01-20 21:25:35 +08:00
|
|
|
)
|
|
|
|
const HeaderRightBtn = loadAsyncComponent(() =>
|
2022-01-26 15:46:25 +08:00
|
|
|
import('./HeaderRightBtn/index.vue')
|
2022-01-20 21:25:35 +08:00
|
|
|
)
|
|
|
|
const HeaderTitle = loadAsyncComponent(() =>
|
2022-01-26 15:46:25 +08:00
|
|
|
import('./HeaderTitle/index.vue')
|
2022-01-20 21:25:35 +08:00
|
|
|
)
|
|
|
|
const ContentLayers = loadAsyncComponent(() =>
|
2022-01-26 15:46:25 +08:00
|
|
|
import('./ContentLayers/index.vue')
|
2022-01-20 21:25:35 +08:00
|
|
|
)
|
|
|
|
const ContentCharts = loadAsyncComponent(() =>
|
2022-01-26 15:46:25 +08:00
|
|
|
import('./ContentCharts/index.vue')
|
2022-01-20 21:25:35 +08:00
|
|
|
)
|
|
|
|
const ContentDetails = loadAsyncComponent(() =>
|
2022-01-26 15:46:25 +08:00
|
|
|
import('./ContentDetails/index.vue')
|
2022-01-20 21:25:35 +08:00
|
|
|
)
|
2022-01-31 23:37:43 +08:00
|
|
|
|
|
|
|
// 右键
|
|
|
|
const {
|
|
|
|
menuOptions,
|
|
|
|
onClickoutside,
|
|
|
|
mousePosition,
|
|
|
|
handleContextMenu,
|
|
|
|
handleMenuSelect
|
|
|
|
} = useContextMenu()
|
2021-12-21 14:57:31 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2022-01-20 21:25:35 +08:00
|
|
|
@include go('chart') {
|
2022-01-15 14:56:48 +08:00
|
|
|
height: 100vh;
|
|
|
|
width: 100vw;
|
2021-12-21 14:57:31 +08:00
|
|
|
overflow: hidden;
|
|
|
|
@include background-image('background-image');
|
|
|
|
}
|
|
|
|
</style>
|