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, watch } from 'vue';
  import { CADViewer, useCADViewer } from '/@/components/CADViewer';
  import { downLoad } from '../fileDetail.api';
  import { useRoute } from 'vue-router';

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

  const { processFile, postMessage } = useCADViewer();

  function openFile(id: string, filename: string) {
    downLoad({ id }).then((res: Blob) => {
      processFile(new File([res], filename)).then((path) => {
        postMessage('MKY_Open_Mxweb', path);
      });
    });
  }

  // 通过 props 指定文件 ID 的形式使用该组件
  watch(
    () => props.id,
    (v) => {
      if (!v) return;
      openFile(v, props.filename);
    }
  );

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

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