fl-web-component 1.2.11 → 1.2.13

package/packages/components/model/index.vue

@@ -1,3425 +0,0 @@
-<template>
-  <div id="blocker">
-    <!-- 顶部按钮-->
-    <!-- :currentRoute="currentRoute" -->
-    <!-- @layerConfig="layerConfig" -->
-    <!-- @setHandleVisiable="setHandleVisiable" -->
-    <!-- drawName="" -->
-    <!-- 工具栏 -->
-    <CheckProofingModel
-      ref="checkProofingModel"
-      class="check-proofing-container"
-      @click="importProofModel"
-      :defaultParams="defaultParams"
-    />
-    <HeaderButton
-      v-show="showForScreenshot"
-      class="header-button-container"
-      ref="headerButton"
-      :canvasShow="true"
-      :closeRightOperationType="closeRightOperationType"
-      :proofingModel="proofingModel"
-      @rightOperation="headerRightOperation"
-    />
-    <ProofConfig
-      v-show="showForScreenshot"
-      ref="proofConfig"
-      class="proof-config-container"
-      @viewVersion="viewVersion"
-      @publishVersion="publishVersion"
-      :defaultParams="defaultParams"
-    />
-    <!-- <el-card class="tree-container">
-        <el-tabs v-model="activeName" :stretch="true">
-          <el-tab-pane label="工厂树" name="pbsTree">
-            <PbsTree
-              class="tree-box-item-card"
-              v-show="showForScreenshot"
-              ref="pbsTree"
-              @pbsNodeClick="pbsNodeClick"
-              @checkChange="checkChange"
-            />
-          </el-tab-pane>
-          <el-tab-pane label="碰撞报告" name="detectTree">
-            <DetectTree
-              class="tree-box-item-card"
-              v-show="showForScreenshot"
-              ref="detectTree"
-              @locate="locateByDetect"
-              @highlight="highlightByDetect"
-              :treeData="detectTreeData"
-            />
-          </el-tab-pane>
-        </el-tabs>
-      </el-card> -->
-    <PbsTree
-      class="tree-container"
-      v-show="showForScreenshot && showPbsTreePanel"
-      ref="pbsTree"
-      @pbsNodeClick="pbsNodeClick"
-      @checkChange="checkChange"
-    />
-    <!-- 模型 -->
-    <div id="instructions"></div>
-    <!-- 批注画板 -->
-    <div id="konva-drawing-board" v-show="showDrawingBoard"></div>
-
-    <!-- 工具栏 -->
-    <!-- <ToolBtn
-        v-if="toolBtnSetting.toolBtn.all"
-        :setting="toolBtnSetting.toolBtn"
-        ref="toolBtn"
-        @handleBtnEvent="handleBtnEvent"
-        @home="home"
-        @firstPer="firstPer"
-      /> -->
-    <!-- 测量 -->
-    <!-- <MeasureType v-if="ctrlPanel['measure']" @measure="handleMeasure" /> -->
-
-    <!-- 属性按钮 -->
-    <!-- <PropsBtn v-show="showForScreenshot" @lookDetails="lookPropsDetails" /> -->
-    <!-- 校审按钮 -->
-    <!-- <ProofBtn v-show="showForScreenshot" @lookDetails="lookProofDetails" /> -->
-    <!-- 碰撞检测按钮 -->
-    <!-- <DetectBtn v-show="showForScreenshot" @lookDetails="lookDetectDetails" /> -->
-
-    <!-- <el-button
-        v-show="showForScreenshot"
-        type="primary"
-        size="small"
-        @click="toggleDrawToolbar"
-        class="draw-btn"
-        :disabled="disableDrawBtn"
-        >批注工具栏</el-button
-      > -->
-    <div class="right-panel-container">
-      <!-- 属性面板 -->
-      <PropsPanel
-        class="props-panel-container"
-        ref="propsPanel"
-        v-if="showForScreenshot && showPropsPanel"
-        @rightOperation="rightOperation"
-      />
-      <!-- 校审面板 -->
-      <ProofPanel
-        class="proof-panel-container"
-        ref="proofPanel"
-        v-show="showForScreenshot && showProofPanel"
-        :defaultParams="defaultParams"
-        :proofData="proofData"
-        :showProofDetail="showProofDetail"
-        :readOnlyMode="readOnlyMode"
-        @selectRow="handleClickProofList"
-        @deleteRow="handleDeleteProofList"
-        @clickEditBtn="handleProofEditBtn"
-        @clickAddBtn="handleProofAddBtn"
-        @clickCancelBtn="handleProofCancelBtn"
-        @clickSaveBtn="handleProofSavelBtn"
-        @rightOperation="rightOperation"
-      />
-      <!-- 碰撞检查 -->
-      <DetectPanel
-        class="detect-panel-container"
-        ref="detectPanel"
-        v-if="showForScreenshot && showDetectPanel"
-        :defaultParams="defaultParams"
-        :treeData="detectTreeData"
-        @showReport="focusDetectTree"
-        @rightOperation="rightOperation"
-        @locate="locateByDetect"
-        @highlight="highlightByDetect"
-        @getDetectCheckTree="getDetectCheckTree"
-      />
-    </div>
-    <!-- 定位 -->
-    <LocationPanel
-      v-if="locationPanelShow"
-      :position="position"
-      ref="locationPanel"
-      @sureLocation="postLocation"
-      @cancel="cancelLocation"
-    />
-    <!-- 裁切 -->
-    <!-- <ClippingType v-if="ctrlPanel['clipping']" @clippingType="clippingType" /> -->
-
-    <!-- 点击批注添加时触发, 画板模式  closeDrawing: 退出添加批注功能 -->
-    <div v-if="showForScreenshot && showToolbar" class="toolbar_show toolbar-container">
-      <!-- 批注工具栏 -->
-      <DrawToolbar
-        ref="drawToolbar"
-        @closeDrawing="closeDrawing"
-        @handleDraw="handleDrawAnnotation"
-        @handleClear="handleClearAnnotation"
-        @colorChange="handleColorChange"
-        @save="preHandleProofSavelBtn"
-      />
-    </div>
-    <!-- 第一人称 -->
-    <el-dialog v-if="firstPerFlag" width="35%" :visible.sync="firstPerFlag">
-      <FirstPerPanel @start="start" />
-    </el-dialog>
-  </div>
-</template>
-<script>
-import CameraControls from 'camera-controls';
-import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
-import {
-  proofInit,
-  getModelByGroup,
-  getPropertyByGroup,
-  upload,
-  checkProofingModel,
-  getProjectId,
-  getDesignIp,
-  getOriginalPbsTree,
-  getTopology,
-} from './api/index.js';
-import { loading, loadingClose } from './utils/index';
-import _ from 'lodash';
-import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
-import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
-import helvetikerFont from 'three/examples/fonts/helvetiker_regular.typeface.json';
-import AnnotationDraw from './utils/annotation-tool';
-import Konva from 'konva';
-import cursors from './utils/cursor';
-import html2canvas from 'html2canvas';
-import MeasureDistance from './utils/threejs/measure-distance.js';
-import MeasureArea from './utils/threejs/measure-area.js';
-import MeasureAngle from './utils/threejs/measure-angle.js';
-import MeasureVolume from './utils/threejs/measure-volume.js';
-import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
-import { LDrawUtils } from 'three/examples/jsm/utils/LDrawUtils.js';
-import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
-import ProofConfig from './components/proof-config.vue';
-import ProofPanel from './components/proof-panel.vue';
-import CheckProofingModel from './components/check-proofing-model.vue';
-import PbsTree from './components/pbs-tree.vue';
-import DetectTree from './components/detect-tree';
-import PropsPanel from './components/props-panel.vue';
-import CollisionSystem from './utils/detect-v1';
-import { MeshLineGeometry, MeshLineMaterial, raycast } from 'meshline';
-
-// 初始值都为null的变量
-var [animateId, recordAlphaBatch, threeMeasure, gui, cube] = (function* (v) {
-  while (true) yield v;
-})(null);
-
-// 初始值都为false
-var [
-  renderEnabled,
-  roaming,
-  moveForward,
-  moveBackward,
-  moveLeft,
-  moveRight,
-  canJump,
-  roaming,
-  listenerMouse,
-  isWalking,
-  isWalkingPaused,
-  clickKey,
-  addRoamingFlag,
-  markFlag,
-] = (function* (v) {
-  while (true) yield v;
-})(false);
-
-// 初始值都为数组 []
-var [clippingMesh, bombData, globePlanes] = (function* (v) {
-  while (true) yield v;
-})([]);
-
-// 初始值都为数字 0
-var [timeStamp, fpsClock, firstTime, lastTime] = (function* (v) {
-  while (true) yield v;
-})(0);
-
-// 初始值为空{}
-var [batchTable] = (function* (v) {
-  while (true) yield v;
-})({});
-var spaceUp = true; // 处理一直按着空格连续跳的问题
-var singleFrameTime = 1 / 30;
-var renderEnabled = false;
-
-var renderer,
-  camera,
-  scene,
-  modelGroup,
-  cameraControls,
-  instructions,
-  timeOut,
-  labelRenderer,
-  raycaster,
-  mouse,
-  intersect,
-  clock,
-  horizontalRaycaster,
-  downRaycaster,
-  velocity,
-  direction,
-  rotation,
-  pointControls,
-  previousModel;
-let oldCheckedNodes = [];
-var removeSpeed = 5000; //控制器移动速度
-var upSpeed = 5000; //控制跳起时的速度
-var modelClickEvent = '',
-  clippingType = '';
-var intersectsObject = [];
-
-var targetObj = null,
-  konvaStage = null,
-  konvaLayer = null,
-  annotationTool = null,
-  inspectionRect = null;
-
-const GEOM_TYPES = {
-  geom_3d: 53248,
-  geom_3d_text: 53249,
-  geom_3d_mtext: 53250,
-  geom_3d_obj: 53251,
-  geom_2d: 57344,
-  geom_2d_text: 57345,
-  geom_2d_mtext: 57346,
-  geom_2d_circle: 57347,
-  geom_2d_arc: 57348,
-  geom_2d_ellipse: 57349,
-  geom_2d_ellipseArc: 57350,
-  geom_2d_others: 57351,
-};
-const INSTANCES_TYPES = {
-  TEXTANNO: 'TEXTANNO',
-};
-const STAGE_MODEL_TYPE = {
-  PID: 1,
-  REALITY: 2,
-};
-
-var guiParams = {
-  x轴: 0,
-  y轴: 0,
-  z轴: 0,
-};
-
-export default {
-  name: 'GraphicModel',
-  // beforeRouteUpdate(to, from, next) {
-  //   // 离开该组件所对应的特定路由时触发的事件
-  //   // window.location.reload(); // TODO 临时刷新，待优化
-  //   // console.log(to)
-  //   // console.log(from)
-  //   // this.mounted();
-  //   next();
-  // },
-  data() {
-    return {
-      proofingModel: false,
-      showPropsPanel: false,
-      showProofPanel: false,
-      showDetectPanel: false,
-      showPbsTreePanel: true,
-      canvasLoading: false, // 批注下画板
-      showToolbar: false,
-      showDrawingBoard: false,
-      checkedToolbarItem: false,
-      drawing: false,
-      drawingType: '',
-      disableDrawBtn: true,
-      showForScreenshot: true,
-      defaultParams: {
-        projectId: null,
-        stageId: null,
-        version: null,
-      },
-      dataServerParams: {
-        toProjId: null,
-        toStagId: null,
-        toVersion: null,
-      },
-      activeName: 'pbsTree',
-      maxAltitude: 0,
-      firstPerFlag: false, // 第一视角弹框
-      isFirstPer: false, // 不再出现弹框
-      detectTreeData: [],
-      roamPanelName: '漫游',
-      roamingPath: [],
-      locationPanelShow: false,
-      // 操作按钮互斥, 弹出面板也要互斥, 记录控制面板的变量
-      ctrlPanel: {
-        view: false,
-        mark: false,
-        roaming: false,
-        material: false,
-        light: false,
-        clipping: false,
-        measure: false,
-        pid: false,
-        spotLight: false,
-        bomb: false,
-        alpha: false,
-        locationUser: false,
-      },
-      toolBtnSetting: {
-        property: true,
-        rightClick: false,
-        leftClick: true,
-        leftBtnId: [0, 1], //左侧按钮列表的id，默认为[]，为全部显示
-        modelBrowser: false,
-        treeShow: false,
-        scene: false,
-        toolBtn: {
-          all: true,
-          // home: false,
-          // view: true,
-          // mark: true,
-          // roaming: true,
-          // material: true,
-          // light: true,
-          clipping: true,
-          measure: true,
-          // pid: false,
-          // spotLight: true,
-          // bomb: true,
-          firstPer: true,
-          drawing: true,
-          // alpha: true,
-          // locationUser: true
-        },
-      },
-      modelCenter: {
-        x: 0,
-        y: 0,
-        z: 0,
-      },
-      closeRightOperationType: {
-        type: '',
-        close: true,
-      },
-      proofData: {
-        stageId: '',
-        version: null,
-        position: '',
-        projectId: '',
-        relevant: '',
-        previewScreenshotData: '',
-        problemPrintscreenId: '',
-      },
-      showProofDetail: false,
-      proofConfig: {
-        viewVersion: null,
-      },
-      // onceRenderFlag: true,   // 首次渲染标识
-    };
-  },
-  computed: {
-    activedToolBtn() {
-      let actived = false;
-      for (const key in this.ctrlPanel) {
-        if (this.ctrlPanel[key] === true) {
-          actived = true;
-        }
-      }
-      return actived;
-    },
-    readOnlyMode() {
-      return !!this.defaultParams.version;
-    },
-  },
-  components: {
-    ProofConfig,
-    ProofPanel,
-    CheckProofingModel,
-    PbsTree,
-    PropsPanel,
-    // PbsTree: () => import("./components/pbs-tree"),
-    // DetectTree: () => import("./components/detect-tree"),
-    // PropsPanel: () => import("./components/props-panel.vue"),
-    // ProofPanel: () => import("./components/proof-panel.vue"),
-    DetectPanel: () => import('./components/detect-panel.vue'),
-    DrawToolbar: () => import('./components/annotation-toolbar.vue'),
-    // MeasureType: () => import('./components/measure-type.vue'),
-    // ClippingType: () => import('./components/clipping-type.vue'),
-    LocationPanel: () => import('./components/location-panel.vue'),
-    FirstPerPanel: () => import('./components/firstPer-panel.vue'),
-    HeaderButton: () => import('./components/header-button.vue'),
-    // CheckProofingModel: () => import("./components/check-proofing-model.vue"),
-  },
-  beforeRouteEnter(to, from, next) {
-    if (!to.query.version) {
-      localStorage.removeItem('proofHistoryVersion');
-    }
-    next();
-  },
-  beforeRouteLeave(to, from, next) {
-    try {
-      this.$refs.proofPanel.clearUpdateModelInterval();
-      this.resetData();
-      this.$modal.closeLoading();
-      next();
-    } catch (err) {
-      console.log(err);
-      next();
-    }
-  },
-  created() {
-    this.defaultParams.projectId = this.$route.query.projectId;
-    this.defaultParams.version = this.$route.query.version;
-
-    console.log('defaultParams', this.defaultParams);
-    CameraControls.install({ THREE: this.THREE });
-    fpsClock = new this.THREE.Clock();
-    raycaster = new this.THREE.Raycaster();
-    mouse = new this.THREE.Vector2();
-    this.initData();
-  },
-  mounted() {
-    if (this.defaultParams.version) {
-      this.init();
-      this.proofingModel = true;
-    } else {
-      // 检测模型是否正在校对中
-      this.$modal.loading('加载中...');
-      checkProofingModel(this.defaultParams)
-        .then((proofingModel) => {
-          if (proofingModel) {
-            this.proofingModel = true;
-            this.init();
-            // this.$refs.proofPanel.IfUpdateModel(this.defaultParams);
-            this.$refs.proofConfig.abledProofPublishBtn();
-          } else {
-            this.$refs.proofConfig.ableImportModelBtn();
-            this.$refs.checkProofingModel.showCheckProofingModel();
-            this.$modal.closeLoading();
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-          this.$modal.closeLoading();
-        });
-    }
-  },
-  watch: {
-    showToolbar(val) {
-      if (val === false && konvaStage) {
-        this.$nextTick(() => {
-          // this.clearPreViewAnn();
-          konvaStage.container().style.cursor = 'default';
-        });
-      }
-    },
-    checkedToolbarItem(val) {
-      const div = document.getElementById('konva-drawing-board');
-
-      if (val) {
-        div.style.pointerEvents = 'auto';
-      } else {
-        this.drawingType = '';
-        div.style.pointerEvents = 'none';
-      }
-    },
-  },
-  methods: {
-    // 初始化模型服务
-    proofInit() {
-      loading('加载中...');
-
-      proofInit(this.defaultParams)
-        .then((res) => {
-          console.log(this.$refs);
-          // this.$refs.pbsTree.getPbsTree(this.defaultParams);
-          // this.$refs.detectTree.getPbsTree(this.defaultParams);
-
-          // 同时请求 ip 和 projectid
-          // const requests = [getDesignIp(), getProjectId({
-          //   projectId: this.defaultParams.projectId
-          // })];
-
-          // console.log(requests)
-
-          // return Promise.all(requests)
-
-          return getProjectId({
-            projectId: this.defaultParams.projectId,
-            version: this.defaultParams.version,
-          });
-        })
-        .catch((err) => {
-          console.error(err);
-        })
-        .finally(() => {
-          loadingClose();
-        })
-        .then((res) => {
-          try {
-            // const ip = res[0];
-            const { data } = res;
-            this.dataServerParams.toProjId = data.toProjId; // 此处是校审项目 id 映射的业务项目 id;
-            this.dataServerParams.toStagId = data.toStagId;
-            this.dataServerParams.toVersion = data.toVersion;
-
-            this.$refs.pbsTree.getPbsTree({
-              // ip,
-              toProjId: this.dataServerParams.toProjId,
-              toStagId: this.dataServerParams.toStagId,
-              toVersion: this.dataServerParams.toVersion,
-            });
-          } catch (err) {
-            console.error(err);
-          }
-        });
-    },
-    // 初始化操作
-    init() {
-      instructions = document.getElementById('instructions');
-      this.proofInit();
-      this.$nextTick(() => {
-        this.initAnnotation('konva-drawing-board');
-        this.loadDrawData();
-      });
-      this.draw();
-      setTimeout(() => {
-        this.timeRender();
-      }, 100);
-    },
-    // 绘制
-    draw() {
-      modelGroup = new this.THREE.Group();
-      this.initLabelRender();
-      this.initRender();
-      this.initScene();
-      this.initCamera({ type: 'orthographic' });
-      this.initLight();
-      const _this = this;
-
-      window.onresize = this.onWindowResize;
-      renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
-      renderer.domElement.addEventListener('mousedown', this.setOrbitPoint, false);
-
-      renderer.domElement.addEventListener('wheel', (e) => {
-        // canvas 禁止事件穿透
-        if (annotationTool) {
-          annotationTool.destroy();
-          annotationTool = null;
-        }
-        this.showDrawingBoard = false;
-      });
-      cameraControls.addEventListener('wake', (e) => {
-        renderEnabled = true;
-        listenerMouse = true;
-      });
-      cameraControls.addEventListener('sleep', (e) => {
-        renderEnabled = false;
-      });
-      cameraControls.addEventListener('controlstart', (res) => {
-        // this.resetOrbitPoint();
-        // window.controlstart = res;
-        // canvas 禁止事件穿透
-        this.clearPreViewAnn();
-        this.showDrawingBoard = false;
-        renderEnabled = true;
-        listenerMouse = true;
-      });
-      this.animate();
-    },
-    // 初始化无需视图绑定的内部变量
-    initData() {
-      this.propertyGroup = {};
-
-      // 缓存模型源数据
-      this.groupCache = {};
-
-      // 缓存属性源数据
-      this.groupPropsCache = {};
-
-      // 首次渲染标识
-      this.onceRenderFlag = true;
-      this.pickedModel = {
-        last: null,
-        current: null,
-      };
-    },
-    initHelper() {
-      const { stageId, version } = this.defaultParams;
-      if (stageId == STAGE_MODEL_TYPE.PID) {
-        const gridHelper = this.renderGridHelper();
-        scene.add(gridHelper);
-      } else {
-        const axesHelper = new this.THREE.AxesHelper(10000);
-        scene.add(axesHelper);
-      }
-    },
-    renderGridHelper(
-      size = 1000,
-      divisions = 100,
-      color1 = 0x444444,
-      color2 = 0x888888,
-      orient = 'z',
-    ) {
-      color1 = new this.THREE.Color(color1);
-      color2 = new this.THREE.Color(color2);
-
-      const center = divisions / 2;
-      const step = size / divisions;
-      const halfSize = size / 2;
-
-      const vertices = [],
-        colors = [];
-
-      for (let i = 0, j = 0, k = -halfSize; i <= divisions; i++, k += step) {
-        if (orient === 'x') {
-          vertices.push(0, -halfSize, k, 0, halfSize, k);
-          vertices.push(0, k, -halfSize, 0, k, halfSize);
-        } else if (orient === 'y') {
-          vertices.push(-halfSize, 0, k, halfSize, 0, k);
-          vertices.push(k, 0, -halfSize, k, 0, halfSize);
-        } else if (orient === 'z') {
-          vertices.push(-halfSize, k, 0, halfSize, k, 0);
-          vertices.push(k, -halfSize, 0, k, halfSize, 0);
-        }
-
-        const color = i === center ? color1 : color2;
-
-        color.toArray(colors, j);
-        j += 3;
-        color.toArray(colors, j);
-        j += 3;
-        color.toArray(colors, j);
-        j += 3;
-        color.toArray(colors, j);
-        j += 3;
-      }
-
-      const geometry = new this.THREE.BufferGeometry();
-      geometry.setAttribute('position', new this.THREE.Float32BufferAttribute(vertices, 3));
-      geometry.setAttribute('color', new this.THREE.Float32BufferAttribute(colors, 3));
-
-      const material = new this.THREE.LineBasicMaterial({
-        vertexColors: true,
-        toneMapped: false,
-      });
-
-      return new this.THREE.LineSegments(geometry, material);
-    },
-    /* 属性区域 */
-    // 查看属性
-    lookPropsDetails(val) {
-      this.$set(this, 'showPropsPanel', val);
-      if (!val) {
-        this.$set(this, 'detailsData', {});
-      }
-    },
-    // 查看属性
-    lookProofDetails(val) {
-      this.$set(this, 'showProofPanel', val);
-      if (!val) {
-        this.$set(this, 'proofDetailsData', {});
-      }
-    },
-
-    // 点击碰撞检查
-    lookDetectDetails(val) {
-      this.$refs.detectPanel.init(
-        { queryParams: { ...this.defaultParams, rebuild: 0 } },
-        { contentType: 'application/x-www-form-urlencoded' },
-      );
-    },
-
-    // 初始化渲染器
-    initRender() {
-      renderer = new this.THREE.WebGLRenderer({
-        antialias: true,
-        powerPreference: 'high-performance',
-        alpha: true,
-        logarithmicDepthBuffer: true,
-        preserveDrawingBuffer: true, //保留图形缓冲区 TODO 临时截图使用
-      });
-      renderer.setPixelRatio(window.devicePixelRatio * 2);
-      renderer.setSize(window.innerWidth, window.innerHeight);
-      renderer.sortObjects = false;
-      renderer.domElement.id = 'three-model';
-      //告诉渲染器需要阴影效果
-      renderer.shadowMap.enabled = true;
-      renderer.toneMapping = this.THREE.ACESFilmicToneMapping;
-      renderer.toneMappingExposure = 1.0;
-      renderer.outputEncoding = this.THREE.sRGBEncoding;
-      instructions.appendChild(renderer.domElement);
-    },
-    // 初始化文字画布
-    initLabelRender() {
-      labelRenderer = new CSS2DRenderer();
-      labelRenderer.setSize(window.innerWidth, window.innerHeight);
-      labelRenderer.domElement.style.position = 'absolute';
-      labelRenderer.domElement.style.top = '0px';
-      labelRenderer.domElement.style.pointerEvents = 'none';
-      instructions.appendChild(labelRenderer.domElement);
-    },
-    // 初始化相机
-    initCamera(options = {}) {
-      const { stageId } = this.defaultParams;
-      if (stageId == STAGE_MODEL_TYPE.PID) {
-        // 正投影相机
-        const width = window.innerWidth; //canvas画布宽度
-        const height = window.innerHeight; //canvas画布高度
-        const k = width / height; //canvas画布宽高比
-        const s = 200; //控制left, right, top, bottom范围大小
-        camera = new this.THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);
-        // camera.position.set(300, 300, 300);
-        // camera.lookAt(new this.THREE.Vector3(300, 300, 0));
-      } else {
-        camera = new this.THREE.PerspectiveCamera(
-          45,
-          window.innerWidth / window.innerHeight,
-          0.1,
-          10000,
-        );
-      }
-
-      this.initCameraControls();
-    },
-
-    // 初始化场景
-    initScene() {
-      scene = new this.THREE.Scene();
-
-      // const mat4 = new this.THREE.Matrix4();
-      // //生成绕x轴旋转90度的矩阵
-      // mat4.makeRotationX(-Math.PI/2);
-      // scene.applyMatrix4(mat4);
-      // window.scene = scene; // TODO delete
-      // window.three = this.THREE;
-    },
-
-    // 初始化控件
-    initCameraControls() {
-      cameraControls = new CameraControls(camera, renderer.domElement);
-      cameraControls.dollyToCursor = true;
-      cameraControls.smoothTime = 0.1;
-      cameraControls.draggingSmoothTime = 0.05;
-      cameraControls.truckSpeed = 2.0;
-      cameraControls.infinityDolly = true;
-      cameraControls.minDistance = 10;
-      cameraControls.dollySpeed = 0.15; // 鼠标滚轮每次移动速度倍率
-      // window.cameraControls = cameraControls; // TODO delete
-    },
-    // 初始化光源
-    initLight() {
-      const pmremGenerator = new this.THREE.PMREMGenerator(renderer);
-      scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.06).texture;
-    },
-    // resetOrbitPoint() {
-    // return; // todo
-    // const _v3A = new this.THREE.Vector3();
-    // _v3A.set( 0, 0, -1 ).applyQuaternion( cameraControls._camera.quaternion );
-    // _v3A.multiplyScalar( cameraControls._spherical.radius );
-    // _v3A.add( cameraControls._camera.position );
-
-    // cameraControls.setFocalOffset( 0, 0, 0, false );
-    // cameraControls.moveTo( _v3A.x, _v3A.y, _v3A.z, false );
-
-    // cameraControls.reset(false);
-    // cameraControls.normalizeRotations();
-    // cameraControls.truck(0, 0)
-    // cameraControls.setFocalOffset(0, 0, 0, false);
-    // camera.position.set(0, 0, 0)
-    // camera.lookAt(new this.THREE.Vector3(0, 0, 0))
-    // camera.updateProjectionMatrix()
-
-    // cameraControls.setOrbitPoint(0, 0, 0, true)
-    // cameraControls.update();
-    // },
-    // 动画
-    animate() {
-      const delta = fpsClock.getDelta();
-      timeStamp += delta;
-      animateId = requestAnimationFrame(this.animate);
-      if (timeStamp > singleFrameTime) {
-        cameraControls.enabled && cameraControls.update(timeStamp);
-        this.firstPerspective();
-        renderEnabled = true;
-        labelRenderer.render(scene, camera);
-
-        if (renderEnabled) {
-          renderer.render(scene, camera);
-        }
-        timeStamp = timeStamp % singleFrameTime;
-      }
-    },
-    // 延迟渲染
-    timeRender() {
-      // 设置为可渲染
-      renderEnabled = true;
-      if (timeOut) {
-        clearTimeout(timeOut);
-      }
-      timeOut = setTimeout(() => {
-        renderEnabled = false;
-      }, 1500);
-    },
-    // details面板创建
-    detailsMounted() {
-      if (this.entityId) {
-        this.$refs.propsPanel.getModelProperty(
-          this.entityId,
-          this.projectId,
-          intersect.object.userData.pbsId,
-          intersect.object.userData.version,
-        ); // intersect.object.userData.pbsId
-      }
-    },
-
-    // 左击事件
-    mouseClick(event) {
-      // this.resetOrbitPoint();
-      lastTime = new Date().getTime();
-      if (event.button === 0) {
-        if (lastTime - firstTime < 300) {
-          clickKey = true;
-          listenerMouse = false;
-        }
-        if (clickKey) {
-          if (roaming || listenerMouse) {
-            listenerMouse = false;
-            return;
-          }
-          this.modelClick(event, 'left', modelClickEvent);
-          clickKey = false;
-        }
-      } else if (event.button === 2) {
-        if (lastTime - firstTime < 300) {
-          // this.rightClick(event)
-        }
-      }
-    },
-    // 鼠标按下事件
-    setOrbitPoint(event) {
-      // this.resetOrbitPoint();
-      firstTime = new Date().getTime();
-      renderer.domElement.onmouseup = () => {
-        lastTime = new Date().getTime();
-        if (lastTime - firstTime < 300) {
-          clickKey = true;
-          listenerMouse = false;
-        }
-      };
-
-      if (event.button === 0) {
-        const elRect = renderer.domElement.getBoundingClientRect();
-        const canvasX = event.clientX - elRect.left;
-        const canvasY = event.clientY - elRect.top;
-        const mousePoint = new this.THREE.Vector2();
-        mousePoint.set(
-          (canvasX / elRect.width) * 2.0 - 1.0,
-          ((elRect.height - canvasY) / elRect.height) * 2.0 - 1.0,
-        );
-        // camera.updateMatrixWorld()
-        raycaster.setFromCamera(mousePoint, camera);
-        const intersects = raycaster.intersectObjects(scene.children, true);
-        const obj = intersects && intersects.length > 0 ? intersects[0] : null;
-        if (obj) {
-          cameraControls.setOrbitPoint(obj.point.x, obj.point.y, obj.point.z, false);
-          cameraControls.update();
-        }
-      }
-    },
-    highlightModel(model) {
-      if (typeof model == 'string' && model == 'reset') {
-        model = null;
-      }
-      // 非首次
-      if (this.pickedModel.last) {
-        // 同一模型
-        if (model && this.pickedModel.last.name == model.name) {
-          return;
-        } else {
-          // 恢复上个模型颜色
-          this.changeModelColor({
-            groupModel: this.pickedModel.last,
-            type: 'reset',
-          });
-        }
-      }
-      this.pickedModel.last = model;
-
-      // 保存颜色
-      if (model) {
-        this.changeModelColor({
-          groupModel: model,
-          color: new this.THREE.Color(0x53a8ff),
-        });
-      }
-    },
-    changeModelColor({ groupModel, color, type = 'highlight' }) {
-      groupModel.children.forEach((item) => {
-        if (item.type === 'Mesh') {
-          if (type == 'toggleHighlight') {
-            // 碰撞报告 - 节点高亮的开关，点击高亮，再次点击取消高亮（此高亮与下面的模型点击高亮是两种高亮，且只显示最后一次处理的高亮）
-            if (item.material.userData.toggleColor) {
-              // 恢复颜色：恢复原来的颜色
-              if (item.material.userData.highlightColor) {
-                // 如果原色是模型点击高亮
-                item.material.color = item.material.userData.highlightColor;
-              } else {
-                // 否则恢复原来的颜色
-                item.material.color = item.material.userData.originalColor;
-              }
-              item.material.userData.toggleColor = null;
-            } else if (item.material.userData.highlightColor) {
-              // 更新颜色：若存在模型点击高亮，则覆盖
-              item.material.userData.toggleColor = color;
-              item.material.color = color;
-            } else {
-              // 更新颜色：若为原色，则正常高亮
-              item.material.userData.originalColor = item.material.color;
-              item.material.userData.toggleColor = color;
-              item.material.color = color;
-            }
-          } else if (type == 'reset') {
-            // 模型点击 - 恢复颜色：恢复原来的颜色
-            if (item.material.userData.toggleColor) {
-              item.material.color = item.material.userData.toggleColor;
-            } else {
-              item.material.color = item.material.userData.originalColor;
-            }
-            item.material.userData.highlightColor = null;
-          } else if (type == 'highlight') {
-            // 模型点击 - 更新颜色：高亮当前颜色
-            if (!item.material.userData.toggleColor) {
-              // 如果没有碰撞报告高亮，则保存原来的颜色
-              item.material.userData.originalColor = item.material.color;
-            }
-            item.material.userData.highlightColor = color;
-            item.material.color = color;
-          }
-        }
-      });
-
-      this.timeRender();
-    },
-    // 模型点击事件
-    modelClick(event, type, eventType) {
-      if (recordAlphaBatch !== null) {
-        this.editAlpha(recordAlphaBatch, 'alpha', 1.0, true);
-        recordAlphaBatch = null;
-      }
-      //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
-      mouse.x = (event.clientX / instructions.offsetWidth) * 2 - 1;
-      mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
-      // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
-      raycaster.setFromCamera(mouse, camera);
-      // 获取raycaster直线和所有模型相交的数组集合
-      const intersects = raycaster.intersectObjects(scene.children, true);
-      console.log('当前点击模型', intersects[0]);
-      if (intersects.length > 0) {
-        // 判断点击的是不是上一次选中的
-        intersect = intersects[0];
-        // 为了兼容之前的模型数据, 更换模型解析后 模型浏览树数据的entityId与batchId相等
-        switch (eventType) {
-          //根据entityId获取相关的属性信息
-          case 'showPropsPanel':
-            this.$refs.propsPanel.getPropertiesByEntity(this.entityId, this.projectId, this.pbsId);
-            break;
-          // 点击事件
-          default:
-            const modelId = intersect.object.userData.instanceName;
-            const params = {
-              modelId,
-              propertyGroup: this.propertyGroup,
-            };
-
-            this.pickedModel.current = intersect.object.parent;
-
-            if (!this.activedToolBtn) {
-              this.highlightModel(this.pickedModel.current);
-              this.$refs.pbsTree.scrollTo(this.pickedModel.current.name);
-              if (type === 'left' && this.showPropsPanel) {
-                this.$refs.propsPanel.getModelProperty(params);
-              }
-            }
-
-            // 剖切
-            if (this.ctrlPanel.clipping && clippingType === 'local') {
-              // for(let i = 0; i < this.pickedModel.current.children.length; i++){
-              console.log(this.pickedModel.current);
-              console.log(LDrawUtils.mergeObject(this.pickedModel.current));
-              this.controlModel(LDrawUtils.mergeObject(this.pickedModel.current).children[0]);
-              // }
-            }
-            // this.getDataByEntityId(event, type, intersect.object)
-            break;
-        }
-      } else {
-        this.highlightModel('reset');
-        this.$refs.propsPanel?.resetProperties();
-        // renderer.autoClear = true
-        //点击区域未获取模型对象
-        this.entityId = '';
-        intersect = undefined;
-        // this.recoverColor()
-        // this.clearCopyMesh()
-        // this.clearEntites()
-        switch (eventType) {
-          default:
-            if (type === 'left') {
-              this.leftClickDown && iframe.postMessage('leftClick', {});
-            }
-            break;
-        }
-      }
-    },
-    /**
-     * 根据几何体的类型绘制对应的模型
-     * @param {Object} geom- 几何体对象，包含类型和其他属性
-     * @param {String} instanceName- 实例名称，用于标记模型
-     * @return {Object}- 绘制的模型对象
-     */
-    drawModel(geom, instanceName) {
-      let model;
-
-      if (geom.type == GEOM_TYPES.geom_2d || geom.type == GEOM_TYPES.geom_2d_others) {
-        model = this.draw2Dmodel(geom, instanceName);
-        // model = new this.THREE.Object(geom, this.material);
-      } else if (geom.type == GEOM_TYPES.geom_2d_text) {
-        model = this.drawText(geom, instanceName);
-      } else if (
-        geom.type == GEOM_TYPES.geom_2d_circle ||
-        geom.type == GEOM_TYPES.geom_2d_arc ||
-        geom.type == GEOM_TYPES.geom_2d_ellipse ||
-        geom.type == GEOM_TYPES.geom_2d_ellipseArc
-      ) {
-        model = this.drawCurve(geom, instanceName);
-      } else {
-        model = this.draw3Dmodel(geom, instanceName);
-      }
-      return model;
-    },
-    /**
-     * 绘制曲线
-     *
-     * @param {Object} geom- 包含曲线信息的几何体对象
-     * @param {String} instanceName- 曲线实例的名称
-     * @return {Object}- 包含曲线模型和曲线信息的对象
-     */
-    drawCurve(geom, instanceName) {
-      let { points, normals } = geom;
-      let aX = points[0];
-      let aY = points[1];
-      let aZ = points[2];
-      let xrad = points[3];
-      let yrad = points[4];
-      let startAngle = points[5];
-      let endAngle = points[6];
-
-      let curve = new this.THREE.EllipseCurve(
-        0,
-        0,
-        xrad,
-        yrad,
-        startAngle,
-        endAngle,
-        false, // 曲线方向为逆时针
-      );
-      let curvePoints = curve.getPoints(50);
-      let list = [];
-      for (let i = 0; i < curvePoints.length; i++) {
-        const { x, y } = curvePoints[i];
-        list.push(x);
-        list.push(parseFloat(y));
-
-        // // 根据角度计算动态 Z 值（例如正弦波动）
-        // const angle = Math.atan2(y, x); // 当前点的极角
-        // const z = Math.sin(angle * 2) * 2; // Z轴动态变化
-        // list.push(z); // 将原始的 z 坐标添加到列表中
-        list.push(parseFloat(0)); // 将原始的 z 坐标添加到列表中
-      }
-
-      const model = this.build2Dmodel(geom, { points: list, normals });
-      model.rotation.x = -Math.PI / 2;
-      model.position.set(aX, aY, aZ);
-      model.userData.instanceName = instanceName;
-      return model;
-    },
-    // 绘制 3D 模型
-    draw3Dmodel(geom, instanceName) {
-      const geometry = new this.THREE.BufferGeometry();
-
-      geometry.setIndex(geom.triangles);
-      const position = new Float32Array(geom.points);
-      const normal = new Float32Array(geom.normals);
-      geometry.setAttribute('position', new this.THREE.BufferAttribute(position, 3));
-      geometry.setAttribute('normal', new this.THREE.BufferAttribute(normal, 3));
-
-      const { color } = geom.prop;
-      const material = new this.THREE.MeshStandardMaterial({
-        color: new this.THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`),
-        side: this.THREE.DoubleSide,
-        transparent: false, // 确保透明属性关闭
-        opacity: 1, // 确保不透明
-        metalness: 0.8,
-        roughness: 0.5,
-        // lightMapIntensity: 0.7,
-        envMapIntensity: 0.5, // 调低环境贴图的强度
-      });
-      const mesh = new this.THREE.Mesh(geometry, material);
-      // mesh.geometry.computeBoundingBox();
-      mesh.userData.instanceName = instanceName;
-
-      return mesh;
-    },
-    // 根据 triangles 分割 points, 生成线
-    getPointsForLine(points, triangles) {
-      let result = [];
-
-      // 数组顶部添加 0 标志位应对索引
-      triangles.unshift(0);
-
-      // 遍历三角形索引数组
-      for (let i = 0; i < triangles.length; i++) {
-        const sliceStartFlag = triangles[i];
-        const sliceEndFlag = triangles[i + 1];
-
-        // 如果有下一个切片索引，则将当前切片的点坐标添加到结果数组中
-        if (sliceEndFlag) {
-          result.push(points.slice(sliceStartFlag * 3, sliceEndFlag * 3));
-        }
-      }
-
-      // 返回提取出的线条点坐标数组
-      return result;
-    },
-    /**
-     * 绘制 2D 模型的方法
-     *
-     * @param {Object} geom - 包含几何体信息的对象
-     * @param {String} instanceName - 模型实例的名称
-     * @returns {Object} - 包含所有 2D 模型的组对象
-     */
-    draw2Dmodel(geom, instanceName) {
-      const points = this.getPointsForLine(geom.points, geom.triangles);
-      const normals = this.getPointsForLine(geom.normals, geom.triangles);
-      const group = new this.THREE.Group();
-
-      for (let i = 0; i < points.length; i++) {
-        const line = this.build2Dmodel(geom, {
-          points: points[i],
-          normals: normals[i],
-        });
-        line.userData.instanceName = instanceName;
-        group.add(line);
-      }
-      return group;
-    },
-    // 绘制 2D 模型
-    build2Dmodel(geom, lineInfo) {
-      const { points, normals } = lineInfo;
-
-      // const geometry = new LineGeometry()
-      const geometry = new this.THREE.BufferGeometry();
-
-      const position = new Float32Array(points);
-      const normal = new Float32Array(normals);
-
-      geometry.setAttribute('position', new this.THREE.BufferAttribute(position, 3));
-      geometry.setAttribute('normal', new this.THREE.BufferAttribute(normal, 3));
-
-      const { color, linewidth } = geom.prop;
-
-      const material = new MeshLineMaterial({
-        color: new this.THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`),
-        lineWidth: 0.2 * linewidth,
-      });
-      // const line = new Line2( geometry, material );
-      // line.computeLineDistances();
-      const lineGeometry = new MeshLineGeometry();
-      lineGeometry.setPoints(geometry);
-
-      const mesh = new this.THREE.Mesh(lineGeometry, material);
-      mesh.raycast = raycast;
-
-      return mesh;
-
-      // // const material = new LineMaterial({
-      // // 	color: new this.THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`),
-      // // 	linewidth: linewidth,
-      // // 	// dashed: false,
-      // // })
-      // const material = new this.THREE.LineBasicMaterial({
-      //   color: new this.THREE.Color(
-      //     `rgb(${color[0]}, ${color[1]}, ${color[2]})`
-      //   ),
-      //   linewidth: linewidth,
-      // });
-      // // const line = new Line2( geometry, material );
-      // // line.computeLineDistances();
-      // const line = new this.THREE.Line(geometry, material);
-
-      return line;
-    },
-    // drawText 方法，用于渲染 2D 或 3D 文字
-    drawText(geom, instanceName) {
-      const { prop, text, points, normals } = geom;
-      const { color, linewidth, fontsize, fontname, rotate, italic, widthscale } = prop;
-
-      var loader = new FontLoader();
-      var font = loader.parse(helvetikerFont);
-      var geometry = new TextGeometry(`${text}`, {
-        font: font, // 字体格式
-        size: fontsize, // 字体大小
-        height: 1, // 字体深度
-        curveSegments: 11, // 曲线控制点数
-        bevelEnabled: true, // 斜角
-        bevelThickness: 0.1, // 斜角的深度
-        bevelSize: 1, // 斜角的大小
-        bevelSegments: 1, // 斜角段数
-      });
-      // const { stageId } = this.defaultParams;
-
-      const normal = new Float32Array(normals);
-      // 设置几何体的顶点法线属性.attributes.normal
-      geometry.setAttribute('normal', new this.THREE.BufferAttribute(normal, 3));
-
-      const colors = color.split(',');
-      var mat = new this.THREE.MeshBasicMaterial({
-        color: new this.THREE.Color(`rgb(${colors[0]}, ${colors[1]}, ${colors[2]})`),
-        // opacity: 1,
-        // shininess: 1,
-      });
-
-      const mesh = new this.THREE.Mesh(geometry, mat);
-
-      // if (stageId == STAGE_MODEL_TYPE.PID) {
-      //   mesh.translateX(-(fontsize / 2));
-      //   mesh.translateY(-(fontsize / 2));
-      // }
-
-      mesh.position.set(points[0], points[1], points[2]);
-      if (rotate) {
-        console.log('rotate', rotate, mesh);
-        mesh.rotateY(rotate);
-      }
-      mesh.rotateX(-Math.PI / 2);
-      mesh.translateX(-(fontsize / 2));
-      mesh.translateY(-(fontsize / 2));
-
-      mesh.userData.instanceName = instanceName;
-
-      return mesh;
-    },
-    /**
-     * 根据组 ID 获取模型信息
-     *
-     * @param {string} groupId - 要获取模型信息的组 ID
-     * @returns {Promise}
-     */
-    getModelsByGroup(groupId) {
-      return new Promise((resolve) => {
-        const param = {
-          groupId: groupId,
-          // ...this.defaultParams,
-          ...this.dataServerParams,
-        };
-
-        if (!this.groupCache[groupId]) {
-          getModelByGroup(param)
-            .then((res) => {
-              const modelsInfo = (this.groupCache[groupId] = res);
-              console.log(modelsInfo);
-              resolve(modelsInfo);
-            })
-            .catch((err) => {
-              resolve(err);
-            });
-        } else {
-          resolve(this.groupCache[groupId]);
-        }
-
-        console.log('groupCache', this.groupCache);
-
-        // getModelByGroup(param).then((res) => {
-        //   const modelsInfo = res;
-        //   console.log(modelsInfo);
-        //   resolve(modelsInfo);
-        // }).catch((err) => {
-        //   resolve(err);
-        // });
-      });
-    },
-
-    getPropertyByGroup(groupId) {
-      const param = {
-        groupId: groupId,
-        // ...this.defaultParams,
-        ...this.dataServerParams,
-      };
-      if (!this.groupPropsCache[groupId]) {
-        getPropertyByGroup(param)
-          .then((res) => {
-            const propInfo = (this.groupPropsCache[groupId] = res);
-            console.log(propInfo);
-            Object.assign(this.propertyGroup, propInfo);
-          })
-          .catch((err) => {
-            console.log(err);
-          });
-      } else {
-        Object.assign(this.propertyGroup, this.groupPropsCache[groupId]);
-      }
-    },
-    /**
-     * 比较新选中节点与旧选中节点，获取新增和移除的节点
-     * @param {Array} newCheckedNodes - 新选中的节点数组
-     * @returns {Object} - 包含新增和移除节点的对象
-     */
-    diffCheckedNodes(newCheckedNodes) {
-      // 找出新增的元素
-      const addNodes = _.difference(newCheckedNodes, oldCheckedNodes);
-      // 找出删除的元素
-      const removedNodes = _.difference(oldCheckedNodes, newCheckedNodes);
-
-      console.log('oldCheckedNodes', oldCheckedNodes);
-      oldCheckedNodes = newCheckedNodes;
-      console.log('newCheckedNodes', newCheckedNodes);
-      console.log('add:', addNodes); // 输出新增的元素
-      console.log('Removed:', removedNodes); // 输出删除的元素
-      return {
-        addNodes,
-        removedNodes,
-      };
-    },
-    resetData() {
-      oldCheckedNodes = [];
-    },
-    // 勾选 pbs 树渲染对应模型
-    checkChange(nodes) {
-      console.log('nodes', nodes);
-      const { addNodes, removedNodes } = this.diffCheckedNodes(nodes);
-
-      const handleNodes = addNodes.length ? addNodes : removedNodes;
-      const nodeState = addNodes.length ? 'add' : 'removed';
-      this.getModelByNode(handleNodes, nodeState);
-    },
-    /**
-     * 根据节点获取模型
-     * @param {Array} nodes - 节点数组
-     * @param {String} type - 操作类型，可能是 "add" 或 "remove"
-     */
-    async getModelByNode(nodes, type) {
-      loading('加载中...');
-      // nodes = ['1274011493561532418']
-      for (let i = 0; i < nodes.length; i++) {
-        const models = await this.getModelsByGroup(nodes[i]);
-        models && this.handleModel(models, type);
-
-        type == 'add' && this.getPropertyByGroup(nodes[i]);
-      }
-
-      console.log(this.onceRenderFlag);
-      console.log(this.groupPropsCache);
-      if (this.onceRenderFlag && scene.children.length) {
-        // this.initHelper();
-        let box3 = new this.THREE.Box3().setFromObject(scene);
-        this.setModelCenter(box3);
-        this.setCameraConfig();
-
-        this.onceRenderFlag = false;
-      }
-      // 关闭加载提示
-      loadingClose();
-    },
-    // async getModelByNode(nodes, type) {
-    //   loading("加载中...");
-    //   const promiseGroup = [];
-    //   for (let i = 0; i < nodes.length; i++) {
-    //     // const models = await this.getModelsByGroup(nodes[i]);
-    //     // models && this.handleModel(models, type);
-    //     const models = this.getModelsByGroup(nodes[i])
-    //     promiseGroup.push(models);
-
-    //     models.then((models) => {
-    //       this.handleModel(models, type);
-    //     });
-    //   }
-    //   Promise.all(promiseGroup).then(() => {
-    //     // 关闭加载提示
-    //     loadingClose();
-    //   }).catch((error) => {
-    //     this.$message({
-    //       type: "error",
-    //       message: err.msg,
-    //     });
-    //     // 关闭加载提示
-    //     loadingClose();
-    //   })
-    // },
-
-    // 点击 pbs 节点定位模型`
-    // 这里应该是有问题的 因为给的是groupId groupName等信息，并没有具体能找到模型实体的id，所以要不就再新增一个接口
-    // 还有一个问题是 定位应该是定位到某一个实体上 所以 tree的信息还得重新获取一下 因为这里写的是模拟的数据 现在接口服务关闭了
-    pbsNodeClick(node) {
-      const obj = scene.getObjectByName(node);
-      console.log(obj);
-
-      if (obj) {
-        this.clearPreViewAnn();
-        this.showDrawingBoard = true;
-        this.disableDrawBtn = true;
-        this.showToolbar = false;
-        if (annotationTool) {
-          annotationTool.destroy();
-          annotationTool = null;
-        }
-
-        if (this.showPropsPanel) {
-          const params = {
-            modelId: obj.name,
-            propertyGroup: this.propertyGroup,
-            // ...this.defaultParams,
-          };
-
-          this.$refs.propsPanel.getModelProperty(params);
-        }
-
-        if (obj.children.length) {
-          cameraControls.fitToBox(obj, true);
-        }
-
-        this.highlightModel(obj);
-      }
-    },
-    locateModel(node) {
-      const obj = scene.getObjectByName(node);
-
-      if (obj) {
-        cameraControls.fitToBox(obj, true);
-      }
-    },
-    // 相机定位
-    animateCamera(
-      cameraTargetX,
-      cameraTargetY,
-      cameraTargetZ,
-      controlsTargetX,
-      controlsTargetY,
-      controlsTargetZ,
-      moveSmooth = false,
-      offset,
-    ) {
-      // this.resetOrbitPoint(); // 还原轨道中心点
-
-      // offset && cameraControls.setOrbitPoint( 0, 0, 0, false )
-
-      cameraControls.setLookAt(
-        cameraTargetX,
-        cameraTargetY,
-        cameraTargetZ,
-        controlsTargetX,
-        controlsTargetY,
-        controlsTargetZ,
-        moveSmooth,
-      );
-
-      offset && cameraControls.setFocalOffset(offset.x, offset.y, offset.z, false);
-      cameraControls.update(0);
-    },
-    // 根据 pbs 信息绘制 pbs 模型树
-    handleModel(modelInfo, type) {
-      const instances = modelInfo.instances;
-      const isInstanceChildren = modelInfo.type && modelInfo.type === 'instanceChildren';
-
-      const drawObjs = isInstanceChildren
-        ? modelInfo.drawObjs
-        : this.formatDrawObjs(modelInfo.drawObjs);
-
-      for (let i = 0; i < instances.length; i++) {
-        // if(_.isEmpty(instances[i])){
-        // 	continue;
-        // }
-        const drawId = instances[i].drawObject;
-        const instanceName = instances[i].instanceId;
-        const targetGroup = scene.getObjectByProperty('name', instanceName);
-        // 如果找不到目标组（即首次勾选PBS树节点），则加载模型
-        if (!targetGroup) {
-          const group = new this.THREE.Group();
-          group.name = instances[i].instanceId;
-          group.userData.tags = instances[i].tags?.toUpperCase();
-          group.userData.category = instances[i].category;
-          group.userData.bounding = instances[i].bounding;
-
-          const matrix4 = instances[i].matrix.val;
-
-          if (instances[i].children && instances[i].children.length) {
-            const childrenModelInfo = {
-              instances: instances[i].children,
-              drawObjs,
-              type: 'instanceChildren',
-              parentGroup: group,
-            };
-
-            this.handleModel(childrenModelInfo, type);
-          }
-
-          if (drawObjs[drawId]) {
-            drawObjs[drawId]['geoms'].forEach((item) => {
-              const model = this.drawModel(item, instanceName);
-              // intersectsObject.push(model);
-
-              group.add(model);
-            });
-            const m4 = new this.THREE.Matrix4();
-            m4.elements = matrix4;
-            group.applyMatrix4(m4);
-
-            if (isInstanceChildren) {
-              // modelGroup.add(group);
-              modelInfo.parentGroup.add(group);
-            } else {
-              modelGroup.add(group);
-            }
-          }
-
-          // 如果是列表中的最后一个实例，则将模型组添加到场景中
-          // 子实例不需要执行
-          if (i == instances.length - 1 && !isInstanceChildren) {
-            scene.add(modelGroup);
-          }
-          // 如果找到了目标组，并且是新增操作，则显示模型
-        } else if (targetGroup && type == 'add') {
-          targetGroup.visible = true;
-          targetGroup.layers.set(0);
-          // 如果找到了目标组，并且是移除操作，则隐藏模型
-        } else if (targetGroup && type == 'removed') {
-          targetGroup.visible = false;
-          targetGroup.layers.set(1);
-        }
-      }
-      this.timeRender();
-    },
-    /**
-     * 将数组数据转换为键值对形式的 JSON 对象
-     * @param {Array} data - 包含对象的数组，每个对象都有一个 drawObjId 属性
-     * @returns {Object}
-     */
-    formatDrawObjs(data) {
-      const obj = {};
-      data.forEach((item) => {
-        obj[item.drawObjId] = item;
-      });
-      return obj;
-    },
-    initAnnotation(domId) {
-      // canvas 禁止事件穿透
-      const div = document.getElementById('konva-drawing-board');
-      div.style.pointerEvents = 'none';
-
-      const app = document.getElementById('app');
-      konvaStage = new Konva.Stage({
-        className: 'stage',
-        container: domId,
-        width: app.clientWidth,
-        height: app.clientHeight,
-        draggable: false,
-      });
-      // window.konvaStage = konvaStage; // TODO delete
-
-      // konvaStage.container().style.background = "rgb(33,40,48)";
-      konvaLayer = new Konva.Layer({
-        name: 'konva-layer',
-      });
-      konvaStage.add(konvaLayer);
-      konvaLayer.draw();
-      var scaleBy = 1.5;
-      // konvaStage.on("wheel", (e) => {
-      //   e.evt.preventDefault();
-      //   var oldScale = konvaStage.scaleX();
-      //   var pointer = konvaStage.getPointerPosition();
-      //   var mousePointTo = {
-      //     x: (pointer.x - konvaStage.x()) / oldScale,
-      //     y: (pointer.y - konvaStage.y()) / oldScale,
-      //   };
-      //   // how to scale? Zoom in? Or zoom out?
-      //   let direction = e.evt.deltaY > 0 ? -1 : 1;
-      //   if (e.evt.ctrlKey) {
-      //     direction = -direction;
-      //   }
-      //   var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
-      //   konvaStage.scale({ x: newScale, y: newScale });
-      //   var newPos = {
-      //     x: pointer.x - mousePointTo.x * newScale,
-      //     y: pointer.y - mousePointTo.y * newScale,
-      //   };
-      //   konvaStage.position(newPos);
-      // });
-      konvaStage.on('click', (e) => {
-        const position = konvaStage.getPointerPosition();
-        const x = (position.x - konvaStage.getX()) / konvaStage.scaleX();
-        const y = (position.y - konvaStage.getY()) / konvaStage.scaleY();
-        inspectionRect.setX(x);
-        inspectionRect.setY(y);
-        if (e.target.attrs.hasOwnProperty('className') && e.target.attrs.className === 'stage') {
-          const obj = this.getIntersects(inspectionRect.getClientRect());
-          targetObj = obj.length > 0 ? obj[obj.length - 1] : null;
-        } else {
-          targetObj = e.target;
-        }
-        // console.log(targetObj)
-        if (targetObj === null || targetObj.attrs.name === 'annotation-shape') return;
-        this.entityId = targetObj.attrs.entityId;
-        if (e.evt.button === 0) {
-          this.svgClick(targetObj);
-        } else if (e.evt.button === 2) {
-          // 为2是右击
-          this.rightClick(targetObj);
-        }
-      });
-      konvaStage.on('contextmenu', (e) => {
-        e.evt.preventDefault();
-      });
-    },
-    // 碰撞检测
-    getIntersects(rect) {
-      let l = konvaLayer.children.length;
-      let intersects = [];
-      for (let index = 0; index < l; index++) {
-        const ele = konvaLayer.children[index];
-        if (ele.attrs.name !== 'intersect-rect') {
-          const boundingRect = ele.getClientRect();
-          if (
-            !(
-              rect.x + rect.width < boundingRect.x ||
-              boundingRect.x + boundingRect.width < rect.x ||
-              rect.y + rect.height < boundingRect.y ||
-              boundingRect.y + boundingRect.height < rect.y
-            )
-          ) {
-            intersects.push(ele);
-          }
-        }
-      }
-      return intersects;
-    },
-
-    handleDrawAnnotation(parmas = {}) {
-      this.showDrawingBoard = true;
-      this.checkedToolbarItem = true;
-      parmas.type = parmas.type || '';
-      this.drawingType = parmas.type;
-      this.drawingStrokeWidth = parmas.strokeWidth;
-      // 需要开启禁止拖动
-      switch (parmas.type) {
-        case 'Rect':
-          konvaStage.container().style.cursor = 'crosshair'; // `url('${cursors.eraser}') 15 15, auto`
-          break;
-        case 'Line':
-          konvaStage.container().style.cursor = `url('${cursors.pen}') 15 15, auto`;
-          break;
-        case 'Circle':
-          konvaStage.container().style.cursor = 'crosshair';
-          break;
-        case 'Rubber':
-          konvaStage.container().style.cursor = `url('${cursors.eraser}') 10 28, auto`;
-          break;
-        case 'Text':
-          konvaStage.container().style.cursor = `url('${cursors.text}') 15 15, auto`;
-          break;
-      }
-      // konvaStage.draggable(false);
-      if (annotationTool) {
-        annotationTool.updateType({
-          type: parmas.type,
-          strokeWidth: parmas.strokeWidth,
-        });
-      } else {
-        annotationTool = new AnnotationDraw.AnnotationTool(
-          konvaStage,
-          konvaLayer,
-          parmas.type,
-          parmas.strokeWidth,
-        );
-        annotationTool.start();
-        // window.annotationTool = annotationTool; // TODO delete
-      }
-    },
-    handleClearAnnotation() {
-      this.handleDrawAnnotation();
-      if (annotationTool) {
-        annotationTool.clearLayer();
-      }
-    },
-    handleColorChange(val) {
-      if (annotationTool) {
-        annotationTool.updateColor(val);
-      }
-    },
-
-    locationAnnotation(id) {
-      // this.leftAllDrawings = false
-      // this.leftDrawingStructure = false
-      // this.avatarImage = item.path
-      // this.proxyImageShow = true
-      // 获取标注的列表添加到图纸中并且定位
-      // 清除上一次查看的标注
-      this.clearPreViewAnn();
-      getMarkOne(id)
-        .then((res) => {
-          console.log(res);
-          if (res.code === 200 && res.data) {
-            const x = Number(res.data.x);
-            const y = Number(res.data.y);
-            const z = Number(res.data.z);
-            konvaStage.setX(x);
-            konvaStage.setY(y);
-            konvaStage.scale({
-              x: z,
-              y: z,
-            });
-            // this.drawCallbackData(res.data.relevant);
-          }
-        })
-        .catch();
-    },
-    viewingDraw() {
-      konvaStage.draggable(false); // 不可移动
-    },
-    editingDraw() {
-      konvaStage.draggable(false); // 不可移动
-    },
-    // 保存标记后的图片
-    handleSaveAnnotation() {
-      this.handleDrawAnnotation();
-      if (!annotationTool.layer?.children?.length) {
-        return;
-      }
-      // this.$refs.drawToolbar.showToolbar = false; // 关闭画板工具条
-      this.showToolbar = false; // 关闭画板工具条
-      this.canvasLoading = true;
-      const annotationArr = [];
-      annotationTool.layer.children.forEach((item) => {
-        annotationArr.push(item.attrs);
-      });
-
-      return annotationArr;
-      console.log(JSON.stringify(annotationArr));
-      // this.screenshot(JSON.stringify(annotationArr));
-    },
-    /* 保存批注
-      将当前可视窗口使用html2canvas插件的照相机功能,保存为图片
-      将图片及该批注图片相对于svg的位置及大小发给后端
-      下次点击批注图片时,将SVG位置及大小实时更新 */
-    async screenshot() {
-      this.showForScreenshot = false;
-      let canvasID = document.getElementById('app'); // this.$refs.drawingDisplay
-
-      let canvas;
-      await new Promise((resolve) => {
-        this.$nextTick(async () => {
-          canvas = await html2canvas(canvasID, {
-            allowTaint: true,
-            useCORS: true,
-          });
-          resolve();
-        });
-      });
-
-      let urlData = canvas.toDataURL('image/jpeg', 1.0);
-      this.showForScreenshot = true;
-      return urlData;
-      // this.uploadScreenshot(urlData)
-      // if (res.code === 200) {
-      //   await this.uploadByUrl(res.data.link, file);
-      //   const obj = {
-      //     documentId: this.presentDrawing,
-      //     path: res.data.path,
-      //     projectId: this.projectId,
-      //     name: dataNow,
-      //     x: konvaStage.x().toString(),
-      //     y: konvaStage.y().toString(),
-      //     z: konvaStage.scaleX().toString(),
-      //     relevant: annotationArr,
-      //   };
-      //   const data2 = await addMark(obj);
-      //   if (data2.code === 200) {
-      //     this.$message.success("保存成功");
-      //     this.closeDrawing();
-      //   } else {
-      //     this.canvasLoading = false;
-      //   }
-      // } else {
-      //   this.canvasLoading = false;
-      // }
-    },
-    uploadScreenshot(urlData) {
-      // 上传文件
-      const arr = urlData.split(',');
-      const mime = arr[0].match(/:(.*?);/)[1]; // 此处得到的为文件类型
-      const bstr = window.atob(arr[1]); // 此处将base64解码
-      let n = bstr.length;
-      const u8arr = new Uint8Array(n);
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-      const dataNow = Date.now();
-      const file = new File([u8arr], `newCanvas${dataNow}.jpeg`, {
-        type: mime,
-      });
-      const fileData = new FormData();
-      fileData.append('file', file);
-      return upload(fileData);
-    },
-    /* 解决跨域 */
-    uploadByUrl(url, data) {
-      return fetch(url, {
-        mode: 'cors',
-        headers: { 'Content-Type': 'application/octet-stream' },
-        method: 'PUT',
-        body: data,
-      });
-    },
-    /* 添加批注触发,打开画板模式 */
-    toggleDrawToolbar(status) {
-      // this.canvasShow = false
-      // 打开工具栏
-      const _setOpenToolbarState = () => {
-        this.leftAllDrawings = false;
-        this.leftDrawingStructure = false;
-        this.showToolbar = true;
-      };
-      // 关闭工具栏
-      const _setCloseToolbarState = () => {
-        this.leftAllDrawings = false;
-        this.leftDrawingStructure = false;
-        this.showToolbar = false;
-        this.checkedToolbarItem = false;
-      };
-
-      if (typeof status == 'boolean') {
-        // 明确设置工具栏状态
-        if (status === false) {
-          _setCloseToolbarState();
-        } else {
-          _setOpenToolbarState();
-        }
-      } else {
-        // toggle工具栏
-        if (this.showToolbar) {
-          _setCloseToolbarState();
-        } else {
-          _setOpenToolbarState();
-        }
-      }
-
-      // if (status != undefined ? status === false : this.showToolbar) {
-      //   // 关闭工具栏
-      //   this.leftAllDrawings = false;
-      //   this.leftDrawingStructure = false;
-      //   this.showToolbar = false;
-      //   this.checkedToolbarItem = false;
-      //   // this.checkedToolbarItem = this.clearPreViewAnn();
-      //   // this.$set(this, "rightType", "");
-      // } else if (
-      //   status != undefined ? status === true : this.showToolbar === false
-      // ) {
-      //   // this.checkedToolbarItem = this.clearPreViewAnn();
-      //   // this.$set(this, "rightType", "");
-      // }
-    },
-    // 获取图纸数据并加载
-    loadDrawData(id, parmas, callback) {
-      if (this.$route.path.indexOf('DrawingDisplay') > 0) {
-        this.$modal.loading('正在加载，请稍后...');
-      }
-      // recordDocumentId = this.presentDrawing;
-      this.$set(this, 'presentDrawing', id);
-      konvaLayer.destroyChildren();
-      konvaStage.scale({
-        x: 1,
-        y: 1,
-      });
-      konvaStage.setX(0);
-      konvaStage.setY(0);
-      inspectionRect = new Konva.Rect({
-        width: 1,
-        height: 1,
-        x: 0,
-        y: 0,
-        stroke: '#000',
-        strokeWidth: 0.2,
-        name: 'intersect-rect',
-        visible: false,
-      });
-      konvaLayer.add(inspectionRect);
-      return;
-      getDocPreview(id)
-        .then((res) => {
-          let dxf = null;
-          if (res.type == 0) {
-            const parser = new DxfParser();
-            dxf = parser.parse(res.dxf);
-            let json = JSON.stringify(dxf);
-            let pat = {};
-            pat.json = json;
-            pat.docId = id;
-            addDrawingJson(pat);
-          }
-          if (res.type == 1) {
-            dxf = JSON.parse(res.dxf);
-          }
-          let entities = formatEntity(dxf.entities); // dxf.entities;
-          let layers = dxf.tables.layer.layers;
-          for (let key in layers) {
-            let color = getColors()[layers[key].colorIndex];
-            color = 'rgb(' + color + ')';
-            if (entities[key]) {
-              let group = new Konva.Group({
-                x: 0,
-                y: 0,
-                name: key,
-                entityId: key,
-                isGroup: true,
-                visible: true,
-              });
-              let l = entities[key].length;
-              for (let i = 0; i < l; i++) {
-                let type = entities[key][i].type;
-
-                handleFn(type, dxf, entities[key][i], group, key, color, konvaLayer);
-              }
-              konvaLayer.add(group);
-            }
-          }
-          const newScale = 1;
-          konvaStage.scale({
-            x: newScale,
-            y: newScale,
-          });
-          const boundingRect = konvaLayer.getClientRect();
-          const x = this.$refs.svgDraw.clientWidth / 2 - Math.ceil(boundingRect.width) / 2;
-          const y =
-            this.$refs.svgDraw.clientHeight / 2 -
-            (Math.ceil(boundingRect.height) / 2 + boundingRect.y);
-          konvaStage.setX(x);
-          konvaStage.setY(y);
-          activedSvgPan.zoom.x = newScale;
-          activedSvgPan.zoom.y = newScale;
-          activedSvgPan.x = x;
-          activedSvgPan.y = y;
-          setTimeout(() => {
-            if (this.entityId) {
-              this.rightOpenType(this.rightType, this.entityId, true); // 右侧窗口打开时数据更新
-              this.getOnlyId(this.entityId);
-              this.svgCenteredMagnification(this.entityId);
-            }
-            callback && callback(parmas);
-          }, 300);
-          this.$modal.closeLoading();
-        })
-        .catch((err) => {
-          console.log(err);
-          this.$modal.closeLoading();
-          this.$message({
-            type: 'error',
-            message: err.msg,
-          });
-          konvaLayer.removeChildren();
-        });
-    },
-    /* 批注退出添加 */
-    closeDrawing() {
-      this.entityId = ''; // 添加批注时,清空entityId
-      // if (this.oldTargetNode.length !== 0) this.resetHightLight([]); // 添加批注时,清空高亮
-      this.showToolbar = false;
-      this.proxyImageShow = false;
-      this.canvasLoading = false;
-      this.showDrawingBoard = false;
-      this.checkedToolbarItem = false;
-
-      if (annotationTool) {
-        annotationTool.destroy();
-        annotationTool = null;
-      }
-      // konvaStage.draggable(true);
-      konvaStage.container().style.cursor = 'pointer';
-      this.$set(this, 'rightType', 'annotation');
-    },
-    clearPreViewAnn() {
-      const lists = konvaStage.find('.annotation-shape');
-      lists.forEach((item) => {
-        item.destroy();
-      });
-    },
-    handleDeleteProofList() {
-      this.clearPreViewAnn();
-      this.closeDrawing();
-    },
-    preHandleProofSavelBtn() {
-      setTimeout(() => {
-        this.handleProofSavelBtn();
-      });
-    },
-    async handleProofSavelBtn() {
-      const cameraViewTag = this.getViewTag();
-      const viewAnnotation = this.handleSaveAnnotation();
-
-      this.proofData.version = this.defaultParams.version;
-      this.proofData.position = JSON.stringify(cameraViewTag);
-
-      // if (_.isEmpty(data.id)) {
-      this.proofData.projectId = this.defaultParams.projectId;
-      // }
-      this.proofData.relevant = viewAnnotation
-        ? JSON.stringify(viewAnnotation)
-        : JSON.stringify('');
-
-      loading('视点截图中...');
-      const previewScreenshotData = await this.screenshot()
-        .catch((err) => {
-          this.$message({
-            type: 'error',
-            message: err.msg,
-          });
-        })
-        .finally(() => {
-          loadingClose();
-        });
-
-      this.$refs.proofPanel.openAnnotationDetailDialog();
-
-      this.$set(this.proofData, 'previewScreenshotData', previewScreenshotData);
-      // this.proofData.previewScreenshotData = previewScreenshotData;
-
-      const screenshotMsg = await this.uploadScreenshot(previewScreenshotData);
-
-      if (screenshotMsg.code == 200) {
-        this.proofData.problemPrintscreenId = screenshotMsg.msg;
-      }
-      console.log(this.proofData);
-
-      // console.log(this.proofData.previewScreenshotData)
-
-      // this.$set(this, "proofData", this.proofData);
-
-      // this.$refs.proofPanel.saveForm(
-      //   proofData,
-      //   () => {
-      //     this.toggleDrawToolbar(false);
-      //     this.disableDrawBtn = false;
-      //   },
-      //   () => {
-      //     this.disableDrawBtn = true;
-      //   }
-      // );
-
-      this.checkedToolbarItem = false;
-    },
-
-    handleClickProofList(data) {
-      const { position, relevant } = data;
-      const { cameraPosition, cameraTarget, offset } = JSON.parse(position);
-
-      console.log('跳转视点', cameraPosition, cameraTarget, offset);
-
-      // 视点
-      this.animateCamera(
-        cameraPosition.x,
-        cameraPosition.y,
-        cameraPosition.z,
-        cameraTarget.x,
-        cameraTarget.y,
-        cameraTarget.z,
-        true,
-        offset,
-      );
-      this.clearPreViewAnn();
-      this.highlightModel('reset');
-
-      if (relevant) {
-        // this.showToolbar = true;
-
-        // TODO 暂用 setTimeout
-        setTimeout(() => {
-          this.showDrawingBoard = true;
-          this.disableDrawBtn = true;
-          this.showToolbar = false;
-          if (annotationTool) {
-            annotationTool.destroy();
-            annotationTool = null;
-          }
-
-          const formatRelevant = JSON.parse(relevant);
-          formatRelevant && this.handleLoadAnnotation(formatRelevant);
-        }, 300);
-      }
-    },
-    // 将标注添加到图纸中
-    handleLoadAnnotation(lists) {
-      lists.forEach((item) => {
-        switch (item.type) {
-          case 'Rect':
-            const rect = new Konva.Rect({
-              name: item.name,
-              x: item.x,
-              y: item.y,
-              width: item.width,
-              height: item.height,
-              stroke: item.stroke,
-              strokeWidth: item.strokeWidth,
-              visible: true,
-              draggable: true,
-              type: item.type,
-            });
-            rect.on('mousedown', (e) => {
-              e.cancelBubble = true;
-            });
-
-            rect.on('click', (e) => {
-              e.cancelBubble = true;
-              if (this.drawingType === 'Rubber') {
-                rect.destroy();
-              }
-            });
-
-            konvaLayer.add(rect);
-            break;
-          case 'Circle':
-            const circle = new Konva.Circle({
-              name: item.name,
-              x: item.x,
-              y: item.y,
-              radius: item.radius < 0 ? 0 : item.radius,
-              stroke: item.stroke,
-              strokeWidth: item.strokeWidth,
-              visible: true,
-              draggable: true,
-              type: item.type,
-            });
-            circle.on('mousedown', (e) => {
-              e.cancelBubble = true;
-            });
-
-            circle.on('click', (e) => {
-              e.cancelBubble = true;
-              if (this.drawingType === 'Rubber') {
-                circle.destroy();
-              }
-            });
-
-            konvaLayer.add(circle);
-            break;
-          case 'Line':
-            const line = new Konva.Line({
-              name: item.name,
-              points: item.points,
-              stroke: item.stroke,
-              strokeWidth: item.strokeWidth,
-              lineCap: item.lineCap,
-              lineJoin: item.lineJoin,
-              visible: true,
-              draggable: true,
-              type: item.type,
-            });
-            line.on('mousedown', (e) => {
-              e.cancelBubble = true;
-            });
-
-            line.on('click', (e) => {
-              e.cancelBubble = true;
-              if (this.drawingType === 'Rubber') {
-                line.destroy();
-              }
-            });
-
-            konvaLayer.add(line);
-            break;
-          case 'Text':
-            const textNode = new Konva.Text({
-              name: item.name,
-              x: item.x,
-              y: item.y,
-              width: item.width,
-              text: item.text,
-              fontSize: item.fontSize,
-              fill: item.fill,
-              visible: true,
-              draggable: true,
-              type: item.type,
-            });
-            textNode.on('mousedown', (e) => {
-              e.cancelBubble = true;
-            });
-
-            textNode.on('click', (e) => {
-              e.cancelBubble = true;
-              if (this.drawingType === 'Rubber') {
-                textNode.destroy();
-              }
-            });
-
-            konvaLayer.add(textNode);
-            break;
-        }
-      });
-      console.log(konvaLayer);
-    },
-    handleProofEditBtn(detailData) {
-      this.toggleDrawToolbar(true);
-      this.disableDrawBtn = false;
-
-      this.proofData = Object.assign(this.proofData, detailData);
-    },
-    handleProofAddBtn() {
-      this.toggleDrawToolbar(true);
-      this.clearPreViewAnn();
-      this.disableDrawBtn = false;
-
-      this.resetProofData();
-    },
-    resetProofData() {
-      this.proofData.stageId = '';
-      this.proofData.version = null;
-      this.proofData.position = '';
-      this.proofData.projectId = '';
-      this.proofData.relevant = '';
-      this.proofData.previewScreenshotData = '';
-      this.proofData.problemPrintscreenId = '';
-      this.proofData.description = '';
-      this.proofData.remark = '';
-      this.proofData.status = '';
-      this.proofData.createTime = '';
-      this.proofData.replyTime = '';
-      this.proofData.postId = '';
-      this.proofData.solveBy = '';
-      delete this.proofData.id;
-    },
-    handleProofCancelBtn() {
-      this.toggleDrawToolbar(false);
-      this.clearPreViewAnn();
-      this.disableDrawBtn = true;
-    },
-    // 添加视点
-    getViewTag() {
-      // todo
-      const delta = fpsClock.getDelta();
-      timeStamp += delta;
-      // cameraControls.update(timeStamp);
-
-      const cameraPosition = cameraControls.getPosition();
-      const cameraTarget = cameraControls.getTarget();
-      const offset = cameraControls.getFocalOffset();
-
-      const element = cameraControls.camera.matrix.elements;
-
-      console.log('获取视点', cameraPosition, cameraTarget);
-
-      const vector = {
-        x: [element[0], element[1], element[2], element[3]],
-        y: [element[4], element[5], element[6], element[7]],
-        z: [element[8], element[9], element[10], element[11]],
-      };
-
-      const up = cameraControls.camera.up;
-      return { cameraPosition, cameraTarget, vector, up, offset };
-    },
-    locateByDetect(data, node) {
-      console.log('locateByDetect', data, node);
-      this.pbsNodeClick(node.objectid);
-    },
-    highlightByDetect(data, node) {
-      console.log('highlightByDetect', data, node);
-
-      const obj = scene.getObjectByName(node.objectid);
-      this.changeModelColor({
-        groupModel: obj,
-        color: new this.THREE.Color(0xff0000),
-        type: 'toggleHighlight',
-      });
-    },
-    focusDetectTree() {
-      this.activeName = 'detectTree';
-    },
-    getDetectCheckTree() {
-      const param = this.dataServerParams;
-      getTopology(param).then((topologyData) => {
-        const collisionSystem = new CollisionSystem({ scene, topologyData });
-        this.detectTreeData = collisionSystem.run();
-      });
-    },
-    // 工具按钮互斥操作
-    handleBtnEvent(val) {
-      if (previousModel) {
-        this.recoverColor();
-      }
-      // 新增功能互斥
-      addRoamingFlag = false;
-      markFlag = false;
-      // 关闭新增标注弹框
-      this.$set(this, 'markPanelShow', false);
-      this.$set(this, 'locationPanelShow', false);
-      // 清除漫游点
-      if (this.roamingPath.length > 0) {
-        this.delTipsLabel();
-        this.roamingPath = [];
-        this.removeMesh(points);
-        this.removeMesh(line);
-      }
-      for (let key in this.ctrlPanel) {
-        modelClickEvent = '';
-        if (key !== 'pid' && val.event !== 'pid') {
-          const flag = val.flag === key ? !this.ctrlPanel[key] : false;
-          this.$set(this.ctrlPanel, key, flag);
-        } else if (val.event === 'pid') {
-          const flag = val.flag ? true : false;
-          this.$set(this.ctrlPanel, 'pid', flag);
-        }
-      }
-      if (val.event === 'drawing' && !this.disableDrawBtn) {
-        this.toggleDrawToolbar();
-      }
-      this.btnOperate(val.event, this.ctrlPanel[val.event]);
-    },
-    // 不同按钮的操作事项
-    btnOperate(e, flag) {
-      // 打开pid 不参与互斥
-      if (e !== 'pid') {
-        // 清空标注
-        this.clearEntites();
-        // this.cancelLocation()
-        // this.removeMoveMark()
-        // // 清空漫游
-        // this.viewRoaming(false)
-        // 关闭剖切
-        if (clippingType) {
-          clippingType === 'all' ? this.clearAllClipping() : this.clearLocalClipping();
-          clippingType = '';
-        }
-        // 关闭测量
-        if (threeMeasure) this.measure(false);
-        // 关闭聚光灯
-        // if (spotLight) {
-        //   this.clearSpotLight()
-        //   this.initLight()
-        // }
-        // 恢复爆炸
-        // this.bomb(0, 'all')
-      }
-      modelClickEvent = '';
-      switch (e) {
-        case 'view':
-          modelClickEvent = flag ? 'view' : '';
-          break;
-        case 'mark':
-          if (!flag) {
-            this.handleAddMark(false);
-            this.clearEntites();
-          }
-          modelClickEvent = flag ? 'mark' : '';
-          break;
-        // case 'locationUser':
-        //   if (!flag) {
-        //     this.cancelLocation()
-        //   }
-        //   break;
-        case 'roaming':
-          this.viewRoaming(flag);
-          modelClickEvent = flag ? 'roaming' : '';
-          break;
-        case 'material':
-          break;
-        case 'light':
-          flag ? this.clearMeasure() : '';
-          modelClickEvent = flag ? 'light' : '';
-          break;
-        case 'measure':
-          modelClickEvent = !flag ? '' : 'measure';
-          this.measure(flag);
-          break;
-        case 'bomb':
-          modelClickEvent = !flag ? '' : 'bomb';
-          break;
-        case 'spotLight':
-          if (flag) {
-            this.initSpotLight();
-            modelClickEvent = 'spotLight';
-          } else {
-            this.clearSpotLight();
-            modelClickEvent = '';
-          }
-          break;
-        case 'pid':
-          if (flag) {
-            modelClickEvent = 'pid';
-          } else {
-            modelClickEvent = '';
-          }
-          this.$nextTick(() => {
-            this.onContainerResize();
-          });
-          break;
-        case 'clipping':
-          if (!flag) {
-            modelClickEvent = '';
-            clippingType === 'all' ? this.clearAllClipping() : this.clearLocalClipping();
-            clippingType = '';
-          } else {
-            modelClickEvent = 'clipping';
-          }
-          break;
-        case 'alpha':
-          if (flag) {
-            modelClickEvent = 'alphaControl';
-          } else {
-            modelClickEvent = '';
-            this.alphaReset();
-          }
-      }
-    },
-    // 测量类型
-    handleMeasure(type) {
-      if (threeMeasure) {
-        threeMeasure.close();
-        threeMeasure = null;
-      }
-      renderEnabled = true;
-      switch (type) {
-        case 'distance':
-          threeMeasure = new MeasureDistance.MeasureDistance(
-            renderer,
-            scene,
-            camera,
-            instructions.offsetWidth,
-            instructions.offsetHeight,
-          );
-          threeMeasure.start();
-          break;
-        case 'area':
-          threeMeasure = new MeasureArea.MeasureArea(
-            renderer,
-            scene,
-            camera,
-            instructions.offsetWidth,
-            instructions.offsetHeight,
-          );
-          threeMeasure.start();
-          break;
-        case 'angle':
-          threeMeasure = new MeasureAngle.MeasureAngle(
-            renderer,
-            scene,
-            camera,
-            instructions.offsetWidth,
-            instructions.offsetHeight,
-          );
-          threeMeasure.start();
-          break;
-        case 'volume':
-          threeMeasure = new MeasureVolume.MeasureVolume(
-            renderer,
-            scene,
-            camera,
-            instructions.offsetWidth,
-            instructions.offsetHeight,
-          );
-          threeMeasure.start();
-          break;
-      }
-    },
-    // 测量
-    measure(val) {
-      if (!val && threeMeasure) {
-        threeMeasure.close();
-        threeMeasure = null;
-        this.timeRender();
-      }
-    },
-    /**
-     * 主视角
-     */
-    home() {
-      if (roaming) {
-        this.disposeRoaming();
-      }
-      const obj = scene.getObjectByName('rootModel');
-      if (obj) {
-        this.setModelCenter(obj.userData.boundingBox, true);
-      }
-      // this.animateCamera(cameraControls._position0.x, cameraControls._position0.y, cameraControls._position0.z, cameraControls._target0.x, cameraControls._target0.y, cameraControls._target0.z)
-      // this.timeRender()
-    },
-    setModelCenter(boundingBox, flag) {
-      // this.resetOrbitPoint();
-      const box3 = new this.THREE.Box3(boundingBox.min, boundingBox.max);
-      const center = new this.THREE.Vector3();
-      box3.getCenter(center);
-      const size = box3.getSize(new this.THREE.Vector3());
-
-      // cameraControls.setOrbitPoint(
-      //   center.x, center.y, center.z, false
-      // )
-      // cameraControls.update()
-
-      camera.position.set(center.x, center.y + size.y, center.z + size.z / 2);
-      camera.lookAt(new this.THREE.Vector3(center.x, center.y, center.z));
-      this.animateCamera(
-        center.x,
-        center.y + size.y,
-        center.z + size.z / 2,
-        center.x,
-        center.y,
-        center.z,
-        flag,
-      );
-      camera.updateProjectionMatrix();
-    },
-    /* 第一视角区域 */
-    // 出现弹框
-    firstPer() {
-      if (this.ctrlPanel['pid']) {
-        this.$confirm('确定关闭pid?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        })
-          .then(() => {
-            // 关闭其余面板
-            for (let key in this.ctrlPanel) {
-              this.$set(this.ctrlPanel, key, false);
-            }
-            this.onWindowResize();
-            this.isFirstPer = sessionStorage.getItem('isFirstPer');
-            // 判断是否出现弹框
-            if (this.isFirstPer === 'true') {
-              this.start(true);
-            } else {
-              this.firstPerFlag = true;
-            }
-          })
-          .catch(() => {
-            return false;
-          });
-      } else {
-        // 关闭其余面板
-        for (let key in this.ctrlPanel) {
-          this.$set(this.ctrlPanel, key, false);
-        }
-        this.isFirstPer = sessionStorage.getItem('isFirstPer');
-        // 判断是否出现弹框
-        if (this.isFirstPer === 'true') {
-          this.start(true);
-        } else {
-          this.firstPerFlag = true;
-        }
-      }
-    },
-    // 开始第一视角
-    start(val) {
-      // this.timeRender()
-      // 记录是否不再出现弹框
-      this.isFirstPer = val;
-      sessionStorage.setItem('isFirstPer', val);
-      clock = new this.THREE.Clock();
-      horizontalRaycaster = new this.THREE.Raycaster(
-        new this.THREE.Vector3(),
-        new this.THREE.Vector3(),
-        0,
-        10,
-      );
-      downRaycaster = new this.THREE.Raycaster(
-        new this.THREE.Vector3(),
-        new this.THREE.Vector3(0, -1, 0),
-        0,
-        10,
-      );
-      // downRaycaster.params = {
-      //   Mesh: { threshold: 5000 },
-      //   Line: { threshold: 15000 },
-      //   Points: { threshold: 5000 },
-      //   LOD: { threshold: 5000 },
-      //   Sprite: { threshold: 5000 }
-      // }
-      // downRaycaster.params = {
-      //   Mesh: { threshold: 200 },
-      //   Line: { threshold: 200 },
-      //   Points: { threshold: 200 },
-      //   LOD: { threshold: 200 },
-      //   Sprite: { threshold: 200 }
-      // }
-
-      velocity = new this.THREE.Vector3(); //移动速度变量
-      direction = new this.THREE.Vector3(); //移动的方向变量
-      rotation = new this.THREE.Vector3(); //当前的相机朝向
-      this.firstPerFlag = false;
-      this.initPointerLock();
-    },
-    // 键盘监听事件
-    onKeyDown(event) {
-      if (!event.keyCode) return;
-      // this.timeRender()
-      switch (event.keyCode) {
-        // 向左
-        case 37:
-        case 65:
-          moveLeft = true;
-          break;
-        // 向右
-        case 39:
-        case 68:
-          moveRight = true;
-          break;
-        // 向前
-        case 38:
-        case 87:
-          moveForward = true;
-          break;
-        // 向后
-        case 40:
-        case 83:
-          moveBackward = true;
-          break;
-        // 跳跃
-        case 32:
-          if (canJump && spaceUp) velocity.y += upSpeed;
-          canJump = false;
-          spaceUp = false;
-          break;
-      }
-    },
-    onKeyUp(event) {
-      if (!event.keyCode) return;
-      // this.timeRender()
-      switch (event.keyCode) {
-        // 前进
-        case 38:
-        case 87:
-          moveForward = false;
-          break;
-        // 向左
-        case 37:
-        case 65:
-          moveLeft = false;
-          break;
-        // 后退
-        case 40:
-        case 83:
-          moveBackward = false;
-          break;
-        // 向右
-        case 39:
-        case 68:
-          moveRight = false;
-          break;
-        // 跳跃
-        case 32:
-          spaceUp = true;
-          break;
-      }
-    },
-    // 页面是否锁定
-    initPointerLock() {
-      pointControls = new PointerLockControls(camera, renderer.domElement);
-      // 相机位置
-      // pointControls.getObject().position.set(camera.position.x, camera.position.y, camera.position.z)
-      pointControls.getObject().position.set(0, 3 - this.maxAltitude / 10, 0);
-      // pointControls.getObject().position.set(camera.position.x, 3 - this.maxAltitude / 10, camera.position.y)
-      pointControls.lock();
-      // 锁定
-      pointControls.addEventListener('lock', () => {
-        cameraControls.enabled = false;
-        this.toolBtnSetting.toolBtn.all = false;
-        window.addEventListener('keydown', this.onKeyDown, false);
-        window.addEventListener('keyup', this.onKeyUp, false);
-        renderer.domElement.removeEventListener('mouseup', this.mouseClick, false);
-        renderer.domElement.removeEventListener('mousedown', this.setOrbitPoint, false);
-        // renderer.domElement.removeEventListener('contextmenu', this.rightClick)
-      });
-      // 解锁
-      pointControls.addEventListener('unlock', () => {
-        cameraControls.enabled = true;
-        // 返回初始视角
-        this.home();
-        this.toolBtnSetting.toolBtn.all = true;
-        window.removeEventListener('keydown', this.onKeyDown);
-        window.removeEventListener('keyup', this.onKeyUp);
-        renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
-        renderer.domElement.addEventListener('mousedown', this.setOrbitPoint, false);
-        // renderer.domElement.addEventListener('contextmenu', this.rightClick, false)
-      });
-      // 鼠标转动
-      pointControls.addEventListener('change', () => {
-        // this.timeRender()
-      });
-      scene.add(pointControls.getObject());
-    },
-    // 第一视角运动
-    firstPerspective() {
-      if (!cameraControls.enabled && pointControls) {
-        // 获取到控制器对象
-        var control = pointControls.getObject();
-        // 获取刷新时间
-        var delta = clock.getDelta();
-        // velocity每次的速度，为了保证有过渡
-        velocity.x -= velocity.x * 10.0 * delta;
-        velocity.z -= velocity.z * 10.0 * delta;
-        velocity.y -= 9.8 * 100.0 * delta; // 默认下降的速度
-        // 获取当前按键的方向并获取朝哪个方向移动
-        direction.z = Number(moveForward) - Number(moveBackward);
-        direction.x = Number(moveRight) - Number(moveLeft);
-        // 将法向量的值归一化
-        direction.normalize();
-        // 碰撞检测
-        // rotation.copy(control.getWorldDirection(rotation))
-        // var m = new this.THREE.Matrix4()
-        // if (direction.z > 0) {
-        // 	if (direction.x > 0) {
-        // 		m.makeRotationY(Math.PI / 4)
-        // 	} else if (direction.x < 0) {
-        // 		m.makeRotationY(-Math.PI / 4)
-        // 	} else {
-        // 		m.makeRotationY(0)
-        // 	}
-        // } else if (direction.z < 0) {
-        // 	if (direction.x > 0) {
-        // 		m.makeRotationY((Math.PI / 4) * 3)
-        // 	} else if (direction.x < 0) {
-        // 		m.makeRotationY((-Math.PI / 4) * 3)
-        // 	} else {
-        // 		m.makeRotationY(Math.PI)
-        // 	}
-        // } else {
-        // 	if (direction.x > 0) {
-        // 		m.makeRotationY(Math.PI / 2)
-        // 	} else if (direction.x < 0) {
-        // 		m.makeRotationY(-Math.PI / 2)
-        // 	}
-        // }
-        // rotation.applyMatrix4(m)
-        // horizontalRaycaster.set(control.position, rotation)
-        // var horizontalIntersections = horizontalRaycaster.intersectObjects(
-        // 	scene.children,
-        // 	true
-        // )
-        // var horOnObject = horizontalIntersections.length > 0
-        // 判断移动方向修改速度方向
-        // if (!horOnObject) {
-        if (moveForward || moveBackward) velocity.z -= direction.z * removeSpeed * delta;
-        if (moveLeft || moveRight) velocity.x -= direction.x * removeSpeed * delta;
-        // }
-        // 复制相机的位置
-        downRaycaster.ray.origin.copy(control.position);
-        // 获取相机靠下5的位置
-        downRaycaster.ray.origin.y += 10;
-
-        // const foundMeshes = this.findMeshByName(scene.children[0], '2.655.2-MODELELEM-o.160.80.66ee82db-160');
-        // const foundMeshes = this.findMeshByName(scene.children[0], '2.667.2-MODELELEM-o.160.a.1923d213481-160');
-
-        // console.log(foundMeshes[0].children)
-        // 判断是否停留在了立方体上面
-        // var intersections = downRaycaster.intersectObjects(foundMeshes[0].children, true)
-        var intersections = downRaycaster.intersectObjects(scene.children, true);
-
-        // var intersections = downRaycaster.intersectObjects(intersectsObject, false)
-        // const intersected = intersectsObject.find((item) => {
-        //     return item.userData.instanceName === '2.655.2-MODELELEM-o.160.80.66ee82db-160'
-        //   }
-        // )
-        // console.log(intersected)
-        // console.log('downRaycaster.ray.origin', downRaycaster.ray.origin.x, downRaycaster.ray.origin.y, downRaycaster.ray.origin.z)
-        // console.log('downRaycaster.ray', JSON.stringify(downRaycaster.ray))
-
-        // var intersections = downRaycaster.intersectObjects(scene.children[0], true)
-        var onObject = intersections.length > 0;
-        if (onObject === true) {
-          // console.log('onObject', intersections)
-          velocity.y = Math.max(0, velocity.y);
-          canJump = true;
-        }
-        // 根据速度值移动控制器
-        pointControls.moveRight(-velocity.x * delta);
-        pointControls.moveForward(-velocity.z * delta);
-        control.position.y += velocity.y * delta;
-        // 保证控制器的y轴在平面上
-        if (control.position.y < 3 - this.maxAltitude / 10) {
-          velocity.y = -this.maxAltitude / 10;
-          control.position.y = 3 - this.maxAltitude / 10;
-          canJump = true;
-
-          // console.log('control.position.y', control.position.y)
-        }
-      }
-    },
-    findMeshByName(scene, meshName) {
-      const foundMeshes = [];
-      scene.traverse((child) => {
-        if (child.name === meshName) {
-          foundMeshes.push(child);
-        }
-      });
-      return foundMeshes;
-    },
-    // 清除 取消标注的点
-    clearEntites() {
-      if (scene && scene.getObjectByName('mark-label')) {
-        let sprit = scene.getObjectByName('mark-label');
-        scene.remove(sprit);
-        this.clearEntites();
-      }
-      // 清除 取消弹框
-      if (scene && scene.getObjectByName('bullet-box-label')) {
-        let sprit = scene.getObjectByName('bullet-box-label');
-        scene.remove(sprit);
-        this.clearEntites();
-      }
-      return;
-    },
-    // 获取mesh的中心点
-    getMeshCenterAndVolume(mesh) {
-      const box = new this.THREE.Box3().setFromObject(mesh);
-      const center = new this.THREE.Vector3();
-      const volume = box.getSize(new this.THREE.Vector3());
-      box.getCenter(center);
-      return {
-        center: center,
-        box: volume,
-      };
-    },
-    createVirtualClippingBox(size, data, clippingPlanes) {
-      const center = [data.center.x, data.center.y, data.center.z];
-
-      if (cube) {
-        cube.geometry.dispose();
-        cube.material.dispose();
-        scene.remove(cube);
-        cube = null;
-        // transformControl.visible = false
-      }
-      const geo = new this.THREE.BoxGeometry(Math.abs(size.x), Math.abs(size.y), Math.abs(size.z));
-      const m = new this.THREE.MeshStandardMaterial({
-        color: 0xffffff,
-        transparent: true,
-        opacity: 0.2,
-        side: this.THREE.DoubleSide,
-        clippingPlanes: clippingPlanes,
-        needsUpdate: true,
-      });
-      cube = new this.THREE.Mesh(geo, m);
-      cube.name = 'virtualClippingBox';
-      scene.add(cube);
-      const v3 = new this.THREE.Vector3(
-        center[0] - this.modelCenter.x,
-        center[1] - this.modelCenter.y,
-        center[2] - this.modelCenter.z,
-      );
-      cube.position.set(v3.x, v3.y, v3.z);
-      // cube.userData.box = new this.THREE.Vector3(size.x, size.y, size.z)
-    },
-    changeClippingVal(index, type) {
-      clippingMesh.forEach((item) => {
-        item.material.clippingPlanes[index].constant += operate[type];
-      });
-      this.timeRender();
-    },
-    clippingType(val) {
-      if (clippingType === val) {
-        // 清除全局剖切效果
-        this.clearAllClipping();
-        clippingType = '';
-      } else if (val === 'all') {
-        clippingType = val;
-        // 先清除局部剖切效果
-        this.clearLocalClipping();
-        // 添加全部剖切效果
-        const box3 = new this.THREE.Box3();
-        box3.expandByObject(scene.children[0]);
-        const size = box3.getSize(new this.THREE.Vector3());
-        globePlanes = [Math.ceil(size.x), Math.ceil(size.y), Math.ceil(size.z)];
-        renderer.clippingPlanes = [
-          new this.THREE.Plane(new this.THREE.Vector3(-1, 0, 0), globePlanes[0]),
-          new this.THREE.Plane(new this.THREE.Vector3(0, -1, 0), globePlanes[1]),
-          new this.THREE.Plane(new this.THREE.Vector3(0, 0, -1), globePlanes[2]),
-        ];
-        guiParams = {
-          x轴: globePlanes[0],
-          y轴: globePlanes[1],
-          z轴: globePlanes[2],
-        };
-        this.addClippingGui('全局剖切', renderer.clippingPlanes);
-      } else {
-        // 清除全局剖切效果
-        this.clearAllClipping();
-      }
-    },
-    // 添加剖切轴工具
-    addClippingGui(title, objClipp1, objClipp2) {
-      gui = new GUI({
-        title: title,
-      });
-      gui
-        .add(guiParams, 'x轴')
-        .min(-guiParams['x轴'])
-        .max(guiParams['x轴'])
-        .onChange((d) => {
-          objClipp1[0].constant = d;
-          objClipp2 && (objClipp2[0].constant = d);
-        });
-      gui
-        .add(guiParams, 'y轴')
-        .min(-guiParams['y轴'])
-        .max(guiParams['y轴'])
-        .onChange((d) => {
-          objClipp1[1].constant = d;
-          objClipp2 && (objClipp2[1].constant = d);
-        });
-      gui
-        .add(guiParams, 'z轴')
-        .min(-guiParams['z轴'])
-        .max(guiParams['z轴'])
-        .onChange((d) => {
-          objClipp1[2].constant = d;
-          objClipp2 && (objClipp2[2].constant = d);
-        });
-    },
-    // 在全局剖切下恢复原状
-    clearAllClipping() {
-      if (renderer) {
-        renderer.clippingPlanes = Object.freeze([]);
-      }
-      gui && gui.destroy();
-    },
-    // 清除上一步骤的切片
-    clearClipping() {
-      clippingMesh.forEach((item) => {
-        item.material.clippingPlanes = Object.freeze([]);
-        item.material.needsUpdate = true;
-      });
-      clippingMesh.splice(0);
-    },
-    // 清除局部剖切效果
-    clearLocalClipping() {
-      guiParams = {
-        x轴: 0,
-        y轴: 0,
-        z轴: 0,
-      };
-      gui && gui.destroy();
-      this.clearClipping();
-      this.clearClippingTools();
-    },
-    // 清除辅助剖切的工具
-    clearClippingTools() {
-      batchTable = {};
-      bombData.splice(0);
-      if (cube) {
-        cube.material.dispose();
-        cube.geometry.dispose();
-        cube.clear();
-        scene.remove(cube);
-        cube = null;
-      }
-    },
-    // 剖切模型
-    controlModel(model) {
-      this.clearClipping();
-      // 创建剖切面
-      const box3 = new this.THREE.Box3();
-      box3.expandByObject(model);
-      const size = box3.getSize(new this.THREE.Vector3());
-      const data = this.getMeshCenterAndVolume(model);
-      const center = [data.center.x, data.center.y, data.center.z];
-
-      let constant = {
-        x: Math.abs(center[0] - this.modelCenter.x + size.x / 2),
-        y: Math.abs(center[1] - this.modelCenter.y + size.y / 2),
-        z: Math.abs(center[2] - this.modelCenter.z + size.z / 2),
-      };
-      const clippingPlanes = [
-        new this.THREE.Plane(new this.THREE.Vector3(-1, 0, 0), constant.x),
-        new this.THREE.Plane(new this.THREE.Vector3(0, -1, 0), constant.y),
-        new this.THREE.Plane(new this.THREE.Vector3(0, 0, -1), constant.z),
-      ];
-
-      // const geometry = new this.THREE.BoxGeometry(Math.abs(size.x), Math.abs(size.y), Math.abs(size.z));
-      // const material = new this.THREE.MeshBasicMaterial( {
-      //   color: 0x00ff00,
-      //   transparent: true,
-      //   opacity: 0.2,
-      //   side: this.THREE.DoubleSide,
-      // } );
-      // const mesh = new this.THREE.Mesh( geometry, material );
-      // mesh.position.set(model.position.x, model.position.y, model.position.z)
-      // mesh.material.clippingPlanes = clippingPlanes
-      // mesh.needsUpdate = true;
-
-      // mesh.add(model)
-      // scene.add(mesh)
-      model.material.clippingPlanes = clippingPlanes;
-      model.needsUpdate = true;
-
-      // 添加虚拟盒子
-      this.createVirtualClippingBox(size, data, clippingPlanes);
-      renderer.localClippingEnabled = true;
-      guiParams = {
-        x轴: Math.ceil(constant.x),
-        y轴: Math.ceil(constant.y),
-        z轴: Math.ceil(constant.z),
-      };
-      this.addClippingGui('局部剖切', model.material.clippingPlanes, cube.material.clippingPlanes);
-    },
-    // 动态设置视角滚轮的距离
-    setCameraConfig() {
-      let box3 = new this.THREE.Box3().setFromObject(scene);
-      let size = new this.THREE.Vector3();
-      box3.getSize(size);
-      const maxBorder = Math.max(size.x, size.y, size.z);
-
-      cameraControls.camera.far = maxBorder * 50; // 设置相机的远裁剪面
-
-      cameraControls.minDistance = maxBorder * 0.05; // 动态设置视角滚轮的距离
-
-      camera.updateProjectionMatrix();
-    },
-    /* 右侧显示窗口
-      type: this.rightType所记录的数据 */
-    rightOperation(type) {
-      // this.mutualExclusionPoint();
-      // 控制右侧显示的弹窗
-      // 第一步 判断type 是否与 rightType 相等 如果相等 就是关闭对应的窗口
-      switch (type) {
-        case 'proof':
-          if (this.showProofPanel) {
-            this.closeRightOperationType = {
-              type: type,
-              close: true,
-            };
-          } else {
-            this.closeRightOperationType = {
-              type: type,
-              close: false,
-            };
-          }
-          this.showProofPanel = !this.showProofPanel;
-          break;
-        case 'detect':
-          if (this.showDetectPanel) {
-            this.closeRightOperationType = {
-              type: type,
-              close: true,
-            };
-          } else {
-            this.closeRightOperationType = {
-              type: type,
-              close: false,
-            };
-          }
-          this.showDetectPanel = !this.showDetectPanel;
-          break;
-        case 'property':
-          if (this.showPropsPanel) {
-            this.closeRightOperationType = {
-              type: type,
-              close: true,
-            };
-          } else {
-            this.closeRightOperationType = {
-              type: type,
-              close: false,
-            };
-          }
-          this.showPropsPanel = !this.showPropsPanel;
-          break;
-      }
-      // if (this.rightType === type) {
-      //   this.$set(this, "rightType", "");
-      // } else {
-      //   // 如果不相等 就是切到其他面板 那么就要关闭上一步操作
-      //   this.$set(this, "rightType", type);
-      // }
-    },
-    headerRightOperation(type) {
-      this.clearHeaderRightOperation();
-      // 第一步 判断type 是否与 rightType 相等 如果相等 就是关闭对应的窗口
-      switch (type) {
-        case 'proof':
-          this.showProofPanel = !this.showProofPanel;
-          break;
-        case 'detect':
-          if (!scene.children.length) {
-            this.$message({
-              type: 'warning',
-              message: '请先加载模型',
-            });
-            return;
-          }
-
-          this.showDetectPanel = !this.showDetectPanel;
-
-          if (this.showDetectPanel && this.showProofPanel) {
-            this.showProofPanel = false;
-            this.handleClearAnnotation();
-            this.handleDeleteProofList();
-
-            this.closeRightOperationType = {
-              type: 'proof',
-              close: true,
-            };
-          }
-
-          break;
-        case 'property':
-          this.showPropsPanel = !this.showPropsPanel;
-
-          if (this.showPropsPanel) {
-            const modelId = this.pickedModel.current?.name;
-            const params = {
-              modelId,
-              propertyGroup: this.propertyGroup,
-            };
-            this.$nextTick(() => {
-              this.$refs.propsPanel.getModelProperty(params);
-            });
-          }
-
-          break;
-        case 'clipping-all': // 剖切
-          this.clippingType('all');
-          break;
-        case 'distance': // 测量
-        case 'area':
-        case 'angle':
-          this.handleMeasure(type);
-          break;
-        case 'first-person':
-          this.firstPer();
-          break;
-        case 'pbsTree':
-          this.showPbsTreePanel = !this.showPbsTreePanel;
-          break;
-        case 'annotate':
-          if (this.defaultParams.version) {
-            this.$message({
-              type: 'warning',
-              message: '校审历史中无法使用批注功能',
-            });
-            return;
-          }
-          if (this.showProofPanel) {
-            this.toggleDrawToolbar();
-          } else {
-            this.$message({
-              type: 'warning',
-              message: '请在添加或编辑校审意见中使用',
-            });
-          }
-          break;
-      }
-    },
-    clearHeaderRightOperation() {
-      this.measure(false);
-      this.clearAllClipping();
-    },
-    // 清除操作
-    clearRight(type) {
-      // switch (type) {
-      //   case "searching":
-      //     this.resetRelationSvg2(this.$refs.searching.resetRelationDom); // 在检索状态下 关闭后 需要清除页面高亮的节点
-      //     break;
-      //   case "inspection":
-      //     oldSubsidiaryNode.length > 0 &&
-      //       this.resetHightSubsidiaryLight([]);
-      //     recordConCharArr.length > 0 && this.resetHighLightConChar();
-      //     break;
-      //   case "property":
-      //     this.getSvgRed();
-      //     break;
-      //   case "annotation":
-      //     this.clearPreViewAnn();
-      //     break;
-      // }
-    },
-    viewVersion(item) {
-      // this.$set(this.proofConfig, 'viewVersion', item)
-      this.proofConfig.viewVersion = item;
-
-      // const params = {}
-      // if(item && item.id){
-      //   params.version = item.id
-      // }
-
-      this.redirectPage(item);
-    },
-    redirectPage(params) {
-      const queryParams = {
-        projectId: (params && params.projectId) || this.defaultParams.projectId,
-      };
-
-      if (params && params.id) {
-        queryParams.version = params.id;
-      }
-      this.$router.replace({
-        path: '/proof-model',
-        query: queryParams,
-      });
-      window.location.reload();
-    },
-    importProofModel() {
-      this.$refs.proofConfig.openImportModelDialog();
-    },
-    publishVersion() {
-      this.redirectPage();
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-#blocker {
-  // height: 100%;
-  // width: 100%;
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  // background-color: #2c375d;
-  // background-color: #f0f0f0;
-  // z-index: 2;
-  // display: none;
-}
-#instructions {
-  width: 100%;
-  height: calc(100% - 58px);
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, #b3d6ff 100%);
-
-  // display: flex;
-  // flex-direction: row;
-  // box-sizing: border-box;
-  // padding: 5px;
-  // height: 100%;
-}
-#konva-drawing-board {
-  // z-index: 1;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-}
-::v-deep .measure-label-canvas {
-  // position: absolute;
-  // z-index: 999;
-  pointer-events: none !important;
-}
-.toolbar_show {
-  position: absolute;
-  top: 27px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
-}
-.draw-btn {
-  position: absolute;
-  bottom: 10px;
-  left: 50%;
-}
-.right-panel-container {
-  display: flex;
-  position: fixed;
-  top: 60px;
-  right: 0;
-  z-index: 10;
-  // height: calc(100% - 35px);
-}
-::v-deep .el-tabs__item {
-  color: #fff;
-
-  &.is-active {
-    color: #409eff;
-  }
-}
-// wbs、pbs树样式
-.tree-container {
-  position: fixed;
-  height: calc(100% - 58px);
-  width: 300px;
-  padding: 20px 20px 10px;
-  left: 0px;
-  top: 58px;
-  background: #dff0fb;
-  border: none;
-  border-radius: 10px;
-  box-sizing: border-box;
-  z-index: 10;
-}
-::v-deep .el-card__body {
-  padding: 0;
-}
-
-::v-deep .tips-label {
-  width: 65px;
-  color: BLACK;
-  font: 12px Helvetica;
-  padding: 5px;
-  text-align: center;
-  vertical-align: middle;
-  background-color: KHAKI;
-}
-
-::v-deep .measure-label {
-  max-width: 100px;
-  margin-top: -1em;
-  border: 10px;
-  border-radius: 5px;
-  padding: 3px 10px;
-  cursor: pointer;
-  color: rgb(0, 155, 234);
-  background-color: rgb(244, 244, 244);
-  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.25);
-}
-::v-deep .circle-tag {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: #009bea;
-}
-::v-deep .measure-label-font {
-  word-break: break-all;
-}
-::v-deep .props-panel-container,
-::v-deep .proof-panel-container,
-::v-deep .detect-panel-container {
-  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.4);
-  border-radius: 10px;
-  margin: 0 5px;
-  z-index: 10;
-}
-::v-deep .proof-config-container {
-  position: fixed;
-  right: 0;
-  z-index: 10;
-  top: 12px;
-  .history-dialog {
-    position: fixed;
-    left: 40%;
-    top: 5px;
-  }
-}
-::v-deep .header-button-container {
-  position: fixed;
-  z-index: 10;
-  top: 0;
-  background: #fff;
-}
-::v-deep .check-proofing-container {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
-<style>
-.lil-gui:nth-child(1) {
-  top: 200px;
-}
-.lil-gui:nth-child(2) {
-  top: 400px;
-}
-</style>