解决div和相机控制器冲突的问题，新增选中是否近景选项

src/views/yhlywsytst/yhlywsytst/index.vue

@@ -7,20 +7,20 @@
     <!-- 视角工具栏-->
     <div class="toolButton2">
       <div class="flex1 text-center">
-           <el-select  :popper-append-to-body='false'  style="width: 100px;background-color: rgba(0, 0, 0, 0.0);"  @change="flowPieDataChange"  v-model="flowPieData" clearable placeholder="绘制流动">
+        <el-select :popper-append-to-body='false' style="width: 100px;background-color: rgba(0, 0, 0, 0.0);"
+          @change="flowPieDataChange" v-model="flowPieData" clearable placeholder="绘制流动">
           <el-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
             {{ item.name }}
           </el-option>
         </el-select>
       </div>
       <div class="flex1 text-center">
-         <el-switch
-          style="color: #fff ;"
-           v-model="flowDirection"
-           active-text="正向"
-           inactive-text="反向">
+        <el-switch style="color: #fff ;font-size: 12px;" v-model="flowDirection" active-text="正向" inactive-text="反向">
         </el-switch>
       </div>
+      <div class="flex1 text-center">
+        <el-checkbox v-model="xzjj">选中时近景</el-checkbox>
+      </div>
 
     </div>
 
@@ -57,10 +57,8 @@
       </div>
     </div> -->
     <!-- 右侧操作边框-->
-    <div v-show='selectedModel.name' class="rightOpt">
-      <!-- 33% 分割-->
-      <div class="full padding5" style="height: 33%;">
-        <!-- title-->
+    <div v-show='selectedModel.name' class="rightOpt" ref="rightOpt">
+      <div class="full padding5" style="height: 100%;">
         <div class="optTitle">
           {{selectedModel.name?selectedModel.name+'的':''}}设备信息
         </div>
@@ -70,7 +68,7 @@
           <i class="bottomL"></i>
           <i class="bottomR"></i>
           <div class="full">
-            <!-- 一级内容-->
+
 
 
           </div>
@@ -133,20 +131,23 @@
         this.init()
         this.tdClick()
         this.getData()
+        this.canNotMousedown([
+          this.$refs.rightOpt
+        ])
       })
 
     },
     beforeDestroy() {
       this.viewer.canRequestAnimationFrame = false
     },
-    deactivated(){
+    deactivated() {
       this.viewer.canRequestAnimationFrame = false
     },
-    activated(){
+    activated() {
       try {
         this.viewer.canRequestAnimationFrame = true
         this.viewer.reInit()
-      }catch(e){
+      } catch (e) {
         rconsole.error(e)
       }
 
@@ -155,7 +156,8 @@
     },
     data() {
       return {
-        flowDirection:true,
+        xzjj: true,
+        flowDirection: true,
         flowPieData: '',
         /* 流向数据*/
         allPieData: [],
@@ -174,8 +176,8 @@
 
       }
     },
-    watch:{
-      flowDirection(){
+    watch: {
+      flowDirection() {
         if (this.allFlowObject) {
           this.allFlowObject.forEach((item) => {
             item.reverseMapRotation();
@@ -184,7 +186,16 @@
       }
     },
     methods: {
-      flowPieDataChange(val){
+      /* 解决com和 相机控制器事件冲突的问题*/
+      canNotMousedown(domList) {
+        domList.forEach(vdom => {
+          vdom.addEventListener('mousedown', function(event) {
+            event.preventDefault();
+          });
+        })
+
+      },
+      flowPieDataChange(val) {
         this.handlerAllFlow()
       },
       /* 绘制流动方法
@@ -220,8 +231,8 @@
             o.points.forEach((item) => {
               box.expandByPoint(new THREE.Vector3(...item));
             });
-              let point=box.max
-              let finallyPoint = this.getCameraPosition(5,point )
+            let point = box.max
+            let finallyPoint = this.getCameraPosition(5, point)
             this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z)
           }
         });
@@ -239,7 +250,7 @@
             this.allPieData = data.filter((item) => {
               return item.children.some((child) => child.data.length >= 2);
             });
-            console.log( this.allPieData,' this.allPieData')
+            console.log(this.allPieData, ' this.allPieData')
           })
       },
       /* 流向动画*/
@@ -247,7 +258,7 @@
         const viewer = this.viewer;
         const points = positions.map(
           /* 根据本身的模型定位来*/
-          (item) => new THREE.Vector3(item[0] / 1000-42, item[2] / 1000-10, -item[1] / 1000)
+          (item) => new THREE.Vector3(item[0] / 1000 - 42, item[2] / 1000 - 10, -item[1] / 1000)
         );
         const flowObject = new VT.TubeLine({
           points: points,
@@ -394,10 +405,10 @@
               return
             }
             let model
-            if(intersects[0].object.name==''){
-               model= intersects[1].object
-            }else{
-               model= intersects[0].object
+            if (intersects[0].object.name == '') {
+              model = intersects[1].object
+            } else {
+              model = intersects[0].object
             }
 
             this.selectedModel = model
@@ -426,10 +437,13 @@
               wireframe: false,
             })
             /* */
-
+            if (this.xzjj) {
               let point = intersects[0].point
               let finallyPoint = this.getCameraPosition(5, point)
               this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z)
+            }
+
+
 
           }
         })
@@ -509,17 +523,36 @@
 </script>
 
 <style scoped lang="scss">
+  ::v-deep .el-switch__core {
+    height: 16px;
+  }
 
- ::v-deep .el-switch__label{
+  ::v-deep .el-switch__core::after {
+    height: 12px;
+  }
+
+  ::v-deep .el-switch__label {
     color: #fff;
+
+  }
+
+  ::v-deep .el-checkbox__label {
+    color: #fff !important;
+  }
+
+  ::v-deep .el-switch__label * {
+    font-size: 12px !important;
   }
-  ::v-deep .el-switch__label.is-active{
+
+  ::v-deep .el-switch__label.is-active {
     color: #26c6f0;
   }
+
   ::v-deep .el-input__inner {
     background-color: rgba(0, 0, 0, 0.0);
     color: #fff;
   }
+
   .nullbp {
     border: 0;
     padding: 0;
@@ -566,9 +599,10 @@
     line-height: 40px;
     min-width: 250px;
     color: #fff;
-    font-size: 13px;
+    font-size: 12px;
     // background-color: #07417a;
   }
+
   .toolButton2 {
     display: flex;
     margin-top: 18px;
@@ -577,7 +611,7 @@
     z-index: 12;
     height: 40px;
     line-height: 40px;
-    min-width: 250px;
+    min-width: 350px;
     color: #26c6f0;
     font-size: 13px;
     // background-color: #07417a;