98 lines
3.2 KiB
Vue
98 lines
3.2 KiB
Vue
<template>
|
|
<NConfigProvider :theme="darkNTheme">
|
|
<!-- 工作台相关 -->
|
|
<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>
|
|
</NConfigProvider>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { loadAsyncComponent, acquiesceAsyncComponent } 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';
|
|
import { useDarkThemeHook, useThemeOverridesHook, useCode, useLang } from '@/hooks'
|
|
import { NConfigProvider } from 'naive-ui'
|
|
// 暗黑主题
|
|
const darkNTheme = useDarkThemeHook()
|
|
|
|
const chartHistoryStoreStore = useChartHistoryStore();
|
|
const chartEditStore = useChartEditStore();
|
|
|
|
// 记录初始化
|
|
chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas);
|
|
|
|
const HeaderLeftBtn = acquiesceAsyncComponent(
|
|
() => import('./ContentHeader/headerLeftBtn/index.vue'),
|
|
);
|
|
const HeaderRightBtn = acquiesceAsyncComponent(
|
|
() => import('./ContentHeader/headerRightBtn/index.vue'),
|
|
);
|
|
const HeaderTitle = acquiesceAsyncComponent(
|
|
() => import('./ContentHeader/headerTitle/index.vue'),
|
|
);
|
|
const ContentLayers = acquiesceAsyncComponent(() => import('./ContentLayers/index.vue'));
|
|
const ContentCharts = acquiesceAsyncComponent(() => import('./ContentCharts/index.vue'));
|
|
const ContentConfigurations = acquiesceAsyncComponent(
|
|
() => import('./ContentConfigurations/index.vue'),
|
|
);
|
|
const ContentLoad = acquiesceAsyncComponent(() => import('./ContentLoad/index.vue'));
|
|
|
|
// 右键
|
|
const { menuOptions, onClickOutSide, mousePosition, handleMenuSelect } = useContextMenu();
|
|
// 阻止页面ctrl+鼠标滚轮进行缩放
|
|
document.addEventListener(
|
|
'wheel',
|
|
function (event) {
|
|
if (event.ctrlKey) {
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
{ passive: false },
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@include go('chart') {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
@include background-image('background-image');
|
|
}
|
|
</style>
|