mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
<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">
|
|
<content-charts></content-charts>
|
|
<content-layers></content-layers>
|
|
<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>
|
|
</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()
|
|
|
|
// 记录初始化
|
|
chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)
|
|
|
|
const HeaderLeftBtn = loadAsyncComponent(() => import('./ContentHeader/headerLeftBtn/index.vue'))
|
|
const HeaderRightBtn = loadAsyncComponent(() => import('./ContentHeader/headerRightBtn/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/index.vue'))
|
|
|
|
// 右键
|
|
const {
|
|
menuOptions,
|
|
onClickOutSide,
|
|
mousePosition,
|
|
handleMenuSelect
|
|
} = useContextMenu()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@include go("chart") {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
@include background-image("background-image");
|
|
}
|
|
</style>
|