vent-template/src/views/vent/cad/GasGeoViewer.vue

<template>
  <div class="content">
    <div class="left-box">
      <FileSystem :selected="selected" :list="treeData" @on-click="openFile" />
    </div>
    <div class="right-box">
      <CADViewer class="w-100% h-100%" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, onUnmounted, ref } from 'vue';
  import { CADViewer, useCADViewer } from '/@/components/CADViewer';
  // import { queryGasGeoMap } from './cad.api';
  import FileSystem from '../performance/fileDetail/commen/fileSystem.vue';
  import { getTree } from '../performance/fileDetail/fileDetail.api';

  const selected = ref<any>({});
  const treeData = ref<any[]>([]);

  const { processFile, postMessage, registHook, unregistHook } = useCADViewer();

  async function getTreeList() {
    // 瓦斯地质图
    const { records } = await getTree({ parentId: '1871508264848617473', pageNo: 1, pageSize: 1000 });
    treeData.value = records.map((e) => {
      return {
        id: e.id,
        isFolder: false,
        title: e.fileName,
      };
    });
    selected.value = treeData.value[0];
  }

  function openFile(id?: string) {
    if (!id) return;
    processFile(id).then((path) => {
      postMessage('MKY_Open_Mxweb', path);
    });
  }

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

  // let initByRoute = false;

  onMounted(() => {
    // 只触发一次，因为MKY_Open_Mxweb之后会自动触发MKY_Open_File_Complete钩子，导致循环
    registHook('MKY_Open_File_Complete', () => {
      unregistHook('MKY_Open_File_Complete');
      getTreeList().then(() => {
        openFile(selected.value.id);
      });
    });
  });

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

<style scoped lang="less">
  @import '/@/design/theme.less';

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 999;

    .left-box {
      width: 18%;
      height: 100%;
      padding: 10px;
      border: 1px solid var(--vent-device-manager-box-border);
      background: var(--vent-device-manager-box-bg);
      overflow-y: auto;
      // box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
    }

    .right-box {
      width: 82%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
    }

    .list {
      height: calc(100% - 49px);
      position: relative;
    }
  }

  ::v-deep .suffix {
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    color: var(--vent-font-color);
  }
</style>