LinYeFangHuo/src/views/chart/index.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"
    />
    <!-- 加载蒙层 -->
    <content-load></content-load>
    <n-modal
      class="go-chart-data-monaco-editor"
      v-model:show="chartEditStore.getSaveGroupImgShow"
      :mask-closable="false"
    >
      <n-card
        :bordered="false"
        role="dialog"
        size="small"
        aria-modal="true"
        style="width: 400px; height: 400px"
      >
        <template #header>
          <n-space>
            <n-text>上传组件预览图</n-text>
          </n-space>
        </template>

        <template #header-extra> </template>
        <n-layout has-sider sider-placement="right">
          <n-layout style="height: 340px; padding-right: 20px">
            <!-- 编辑主体 -->
            <n-upload
              :default-file-list="previewFileList"
              list-type="image-card"
              @finish="handleFinish"
              max="1"
              @beforeUpload="beforeUpload"
            />
            <n-text class="go-ml-2" depth="2">上传多组合组件预览图</n-text>
          </n-layout>
        </n-layout>

        <template #action>
          <n-space justify="space-between">
            <div class="go-flex-items-center">
              <n-tag :bordered="false" type="primary">
                <template #icon>
                  <n-icon :component="DocumentTextIcon" />
                </template>
                说明
              </n-tag>
              <n-text class="go-ml-2" depth="2">上传多组合组件预览图</n-text>
            </div>

            <n-space>
              <n-button size="medium" @click="closeModel">取消</n-button>
              <n-button size="medium" type="primary" @click="saveCopyData">保存</n-button>
            </n-space>
          </n-space>
        </template>
      </n-card>
    </n-modal>
  </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';
  import { icon } from '@/plugins';
  import { ref } from 'vue';
  import { useGlobSetting } from '@/hooks/setting';
  import { uploadFile } from '@/api/demo/files';

  const { apiUrl } = useGlobSetting();
  const uploadFileUrl = apiUrl + '/api/Files/Upload';
  const { DocumentTextIcon } = icon.ionicons5;
  // 暗黑主题
  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 },
  );
  const previewFileList = ref([]);
  // 关闭弹窗
  const closeModel = () => {
    chartEditStore.setSaveGroupImgShow(false);
  };
  const filePath = ref();
  // 保存多组合组件
  const saveCopyData = () => {
    if (!filePath.value) {
      window['$message'].warning('预览图不能为空');
      return;
    }
    chartEditStore.saveToGroup(filePath.value);
    closeModel();
  };
  const beforeUpload = async (options) => {
    const Loading = window['$loading'];
    Loading && Loading.start();
    let uploadParams = new FormData();
    uploadParams.append('files', options.file.file);
    const uploadRes = await uploadFile(uploadParams);
    if (uploadRes.length > 0) {
      window['$message'].success('上传成功！');
      filePath.value = uploadRes[0].filePath;
      Loading && Loading.finish();
    } else {
      window['$message'].error('上传失败！');
    }
  };
</script>

<style lang="scss" scoped>
  @include go('chart') {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    @include background-image('background-image');
  }
</style>