mky-vent-base/src/views/vent/performance/fileDetail/commen/CADViewer.vue

<template>
  <!-- 更适用于文件共享中心的CAD viewer组件，支持两种使用方法，详见下文 -->
  <CADViewer class="w-100% h-100%" :height="height" />
</template>
<script lang="ts" setup>
  import { onMounted, watch } from 'vue';
  import { CADViewer, useCADViewer } from '/@/components/CADViewer';
  import { downLoad } from '../fileDetail.api';
  import { useRoute } from 'vue-router';
  import { message } from 'ant-design-vue';

  const props = defineProps<{
    // 文件共享中心中该文件的ID
    id: string;
    // 文件名
    filename: string;
    height: number;
  }>();

  const { processFile, postMessage } = useCADViewer();

  function openFile(id: string, filename: string) {
    const loading = message.loading('正在下载文件', 0);
    downLoad({ id }).then((res: Blob) => {
      processFile(new File([res], filename))
        .then((path) => {
          postMessage('MKY_Open_Mxweb', path);
        })
        .finally(() => {
          loading();
        });
    });
  }

  watch(
    () => props.id,
    (v) => {
      if (!v) return;
      openFile(v, props.filename);
    }
  );

  onMounted(() => {
    postMessage('MKY_Open_Mxweb', window.location.origin + '/mxcad/test31.mxweb');
    const route = useRoute();
    if (route.query.id && route.query.filename) {
      // 通过 url query 指定文件 ID 的形式使用该组件
      openFile(route.query.id as string, route.query.filename as string);
    } else {
      // 通过 props 指定文件 ID 的形式使用该组件
      openFile(props.id, props.filename);
    }
  });
</script>

<style scoped lang="less">
  ::v-deep .suffix {
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    color: #fff;
  }
</style>