gasInjection-project/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, onUnmounted } from 'vue';
  import { CADViewer, useCADViewer } from '/@/components/CADViewer';
  import { downloadById } 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, registHook, unregistHook } = useCADViewer();

  function openFile(id: string, filename: string) {
    // 只触发一次，因为MKY_Open_Mxweb之后会自动触发MKY_Open_File_Complete钩子，导致循环
    registHook('MKY_Open_File_Complete', () => {
      unregistHook('MKY_Open_File_Complete');
      const loading = message.loading('正在下载文件', 0);
      downloadById({ id, ifMine: initByRoute }).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);
  //   }
  // );

  let initByRoute = false;

  onMounted(() => {
    const route = useRoute();
    if (route.query.id && route.query.filename) {
      initByRoute = true;
      // 通过 url query 指定文件 ID 的形式使用该组件
      openFile(route.query.id as string, route.query.filename as string);
    } else {
      // 通过 props 指定文件 ID 的形式使用该组件
      openFile(props.id, props.filename);
    }
  });

  onUnmounted(() => {
    unregistHook('MKY_Open_File_Complete');
  });
</script>

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