[Feat 0000] 瓦斯地质图CAD预览器开发

src/views/vent/cad/GasGeoViewer.vue

@@ -1,23 +1,42 @@
 <template>
-  <!-- 更适用于文件共享中心的CAD viewer组件，支持两种使用方法，详见下文 -->
-  <CADViewer class="w-100% h-100%" />
+  <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 } from 'vue';
+  import { onMounted, onUnmounted, ref } from 'vue';
   import { CADViewer, useCADViewer } from '/@/components/CADViewer';
-  import { queryGasGeoMap } from './cad.api';
+  // 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();
 
-  function openFile() {
-    // 只触发一次，因为MKY_Open_Mxweb之后会自动触发MKY_Open_File_Complete钩子，导致循环
-    registHook('MKY_Open_File_Complete', () => {
-      unregistHook('MKY_Open_File_Complete');
-      queryGasGeoMap({}).then(({ id }) => {
-        processFile(id).then((path) => {
-          postMessage('MKY_Open_Mxweb', path);
-        });
-      });
+  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);
     });
   }
 
@@ -32,7 +51,13 @@
   // let initByRoute = false;
 
   onMounted(() => {
-    openFile();
+    // 只触发一次，因为MKY_Open_Mxweb之后会自动触发MKY_Open_File_Complete钩子，导致循环
+    registHook('MKY_Open_File_Complete', () => {
+      unregistHook('MKY_Open_File_Complete');
+      getTreeList().then(() => {
+        openFile(selected.value.id);
+      });
+    });
   });
 
   onUnmounted(() => {
@@ -43,6 +68,39 @@
 <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;

src/views/vent/monitorManager/alarmMonitor/common/predictionCurve.vue

@@ -14,9 +14,10 @@
   import { ref, watch } from 'vue';
   import EchartLine3 from './echartLine3.vue';
 
+  // well i know this is trash but the time is reaching
   const props = defineProps<{
     /** 测点图配置，该测点图在每次数据更新时追加曲线数据，但如果需要更新图表，那么需要更改id来告知组件 */
-    chart: { id: number | string; label: string; time: []; data: [number, number, number]; monitorData: number[] };
+    chart: { id: number | string; label: string; time: []; data: [number, number, number, number]; monitorData: number[] };
     timeout?: number;
   }>();