详情标签

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

@@ -81,6 +81,7 @@ Bus.on('clickDevice', (isParent) => {
     if (!isParent) {// 点击子级
         var clickName = bimStore().activateDevice.clickName;
         var Floor = scene.getObjectByName(clickName);
+        removeLabel();
         boxLight(Floor);
         // 拉近距离
         // nearCamera(Floor);
@@ -182,7 +183,7 @@ const isSelent = (obj) => {
 }
 
 let selectedObjects = ref([]);
-let selectBoxByClick, selectBoxByMouseon, pointLabel;
+let selectBoxByClick, selectBoxByMouseon, pointLabel, selectedObject;
 var marginLeft = 0;
 var marginTop = 70;
 // 鼠标移动效果
@@ -194,7 +195,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) {
@@ -218,9 +219,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);
     }
 }
 // 鼠标点击效果
@@ -235,7 +235,7 @@ const onMouseDown = (event) => {
     if (intersects.length > 0) {
         const clickedObject = intersects[0].object;
         console.log('这是我选中的模型', clickedObject);
-        var selectedObject = isSelent(clickedObject);
+        selectedObject = isSelent(clickedObject);
         // 高亮所在区域
         boxLight(selectedObject);
         if (bimStore().activateIndex == '0') {
@@ -377,10 +377,8 @@ const toHomeView = () => {
         scene.remove(selectBoxByClick);
     }
     // 清除标签
-    if(!isAddLabel.value) {
     removeLabel();
-        isAddLabel.value = !isAddLabel.value;
-    }
+    isAddLabel.value = true;
     // 清除精灵图
     controls.reset();
 }
@@ -411,6 +409,7 @@ const setLabel = () => {
 }
 // 添加标签
 const addLabel = (obj, isShowDetail) => {
+    removeLabel();
     // console.log(123, obj);
     centerSelectedGroup(obj);
     let text = "设备二";
@@ -421,7 +420,6 @@ const addLabel = (obj,isShowDetail) => {
     labelRenderer.domElement.style.top = 0;
     labelRenderer.domElement.style.pointerEvents = 'none';// 必须加上
     document.body.appendChild(labelRenderer.domElement);
-
     // 将呈现器的输出添加到HTML元素
     document.getElementById("dom").appendChild(renderer.domElement);
 };
@@ -431,14 +429,22 @@ const createLableObj = (text,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);
 
 }
 
@@ -526,6 +532,7 @@ const xfadd = (obj,state)=> {
         line-height: 24px;
     }
 }
+
 .laber_name1 {
     width: 100px;
     height: 50px;