fl-web-component 0.1.0

package/packages/components/model/index.vue

@@ -0,0 +1,3413 @@
+<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,
+      DetectTree,
+      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>