解决冲突

src/views/bim/bimHome/components/ThreeView2.vue

@@ -91,6 +91,7 @@ Bus.on('clickDevice', (isParent) => {
     if (!isParent) {// 点击子级
         var clickName = bimStore().activateDevice.clickName;
         var Floor = scene.getObjectByName(clickName);
+        removeLabel();
         boxLight(Floor);
         // 拉近距离
         // nearCamera(Floor);
@@ -101,10 +102,10 @@ Bus.on('clickDevice', (isParent) => {
 // 系统树点击
 Bus.on('clickApplication', (isParent) => {
     // Todo
-    if(!isParent) {
+    if (!isParent) {
         xiaof();
     }
-   
+
 })
 
 watch(() => bimStore().activateMenu, value => {
@@ -215,7 +216,7 @@ const isSelent = (obj) => {
 }
 
 let selectedObjects = ref([]);
-let selectBoxByClick, selectBoxByMouseon, pointLabel;
+let selectBoxByClick, selectBoxByMouseon, pointLabel, selectedObject;
 var marginLeft = 0;
 var marginTop = 70;
 // 鼠标移动效果
@@ -227,7 +228,7 @@ const onMouseMove = (event) => {
     const intersects = raycaster.intersectObjects(scene.children, true);
     if (intersects.length > 0) {
         const clickedObject = intersects[0].object;
-        var selectedObject = isSelent(clickedObject);
+        selectedObject = isSelent(clickedObject);
         if (selectedObject) {
             selectedObjects[0] = selectedObject;
             if (selectBoxByMouseon) {
@@ -251,9 +252,8 @@ const onMouseDownRight = (event) => {
     if (intersects.length > 0) {
         const clickedObject = intersects[0].object;
         console.log('这是我选中的模型', clickedObject);
-        var selectedObject = isSelent(clickedObject);
-        // addLabel(selectedObject, true);
-        emit('handleRightClick', selectedObject);
+        selectedObject = isSelent(clickedObject);
+        addLabel(selectedObject, true);
     }
 }
 // 鼠标点击效果
@@ -269,7 +269,7 @@ const onMouseDown = (event) => {
     if (intersects.length > 0) {
         clickedObject = intersects[0].object;
         console.log('这是我选中的模型', clickedObject);
-        var selectedObject = isSelent(clickedObject);
+        selectedObject = isSelent(clickedObject);
         // 高亮所在区域
         boxLight(selectedObject);
         // 染色点击的模型
@@ -279,12 +279,12 @@ const onMouseDown = (event) => {
             Bus.emit('handleTreeClick', clickedObject);
             return;
         }
-        if(bimStore().activateIndex == '1') {
+        if (bimStore().activateIndex == '1') {
             // 联动左侧菜单
             Bus.emit('handleTreeClick1', clickedObject);
             return;
         }
-        
+
     }
 }
 const changeColor = (Floor) => {
@@ -417,10 +417,8 @@ const toHomeView = () => {
         scene.remove(selectBoxByClick);
     }
     // 清除标签
-    if(!isAddLabel.value) {
-        removeLabel();
-        isAddLabel.value = !isAddLabel.value;
-    }
+    removeLabel();
+    isAddLabel.value = true;
     // 清除精灵图
     controls.reset();
 }
@@ -442,44 +440,52 @@ const nearCamera = (floor) => {
 //标签
 const setLabel = () => {
     if (isAddLabel.value) {
-            let obj = scene.getObjectByName('set2');
-            addLabel(obj, false);
+        let obj = scene.getObjectByName('set2');
+        addLabel(obj, false);
     } else {
         removeLabel();
     }
     isAddLabel.value = !isAddLabel.value;
 }
 // 添加标签
-const addLabel = (obj,isShowDetail) => {
+const addLabel = (obj, isShowDetail) => {
+    removeLabel();
     // console.log(123, obj);
     centerSelectedGroup(obj);
     let text = "设备二";
-    pointLabel = createLableObj(text,isShowDetail);
+    pointLabel = createLableObj(text, isShowDetail);
     obj.add(pointLabel);
     labelRenderer.setSize(window.innerWidth, window.innerHeight);
     labelRenderer.domElement.style.position = "absolute";
     labelRenderer.domElement.style.top = 0;
     labelRenderer.domElement.style.pointerEvents = 'none';// 必须加上
     document.body.appendChild(labelRenderer.domElement);
-
     // 将呈现器的输出添加到HTML元素
     document.getElementById("dom").appendChild(renderer.domElement);
 };
-const createLableObj = (text,isShowDetail) => {
+const createLableObj = (text, isShowDetail) => {
     let laberDiv = document.createElement("div"); //创建div容器
-    if(!isShowDetail) {
+    if (!isShowDetail) {
         laberDiv.className = "laber_name";
         laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称：${text}</span><span>状态：启用</span><span>压力：50 Pa</span>`
     } else {
+        laberDiv.style.pointerEvents = 'auto';// 必须加
         laberDiv.className = "laber_name1";
-        laberDiv.innerHTML = `<div class="detail-btn">详情</div>`
+        laberDiv.innerHTML = `<div class="detail-btn">详情</div>`;
+        laberDiv.addEventListener('click', function (event) {
+            emit('handleRightClick', selectedObject);
+            console.log(labelRenderer.domElement);
+        })
     }
     let pointLabel = new CSS2DObject(laberDiv);
     return pointLabel;
 };
 const removeLabel = () => {
-    document.body.removeChild(labelRenderer.domElement);
-   
+    if(pointLabel) {
+        pointLabel.visible = false;
+    }
+    // document.body.removeChild(labelRenderer.domElement);
+
 }
 
 // 设置地板
@@ -496,18 +502,18 @@ const setBottom = () => {
 
 // 消防
 const xiaof = () => {
-    xfobj.forEach((o)=>{
-        xfadd(o,Math.random() < 0.3);
+    xfobj.forEach((o) => {
+        xfadd(o, Math.random() < 0.3);
     })
 }
 let xfobj = [];
 // 消防标签
-const xfadd = (obj,state)=> {
-    const texLoader= new THREE.TextureLoader();
+const xfadd = (obj, state) => {
+    const texLoader = new THREE.TextureLoader();
     let texture = null;
-    if(state){
-        texture= texLoader.load("/ygr.png");
-    }else{
+    if (state) {
+        texture = texLoader.load("/ygr.png");
+    } else {
         texture = texLoader.load("/yg.png");
     }
     const spriteMaterial = new THREE.SpriteMaterial({
@@ -566,8 +572,9 @@ const xfadd = (obj,state)=> {
         line-height: 24px;
     }
 }
+
 .laber_name1 {
-    width:100px;
+    width: 100px;
     height: 50px;
     border-radius: 5px;
     cursor: pointer;
@@ -576,6 +583,6 @@ const xfadd = (obj,state)=> {
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index:999;
+    z-index: 999;
 }
 </style>