详情标签

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);
@@ -91,10 +92,10 @@ Bus.on('clickDevice', (isParent) => {
 // 系统树点击
 Bus.on('clickApplication', (isParent) => {
     // Todo
-    if(!isParent) {
+    if (!isParent) {
         xiaof();
     }
-   
+
 })
 
 watch(() => bimStore().activateMenu, value => {
@@ -129,8 +130,8 @@ const loadSence = () => {
     gltfLoader.load('/jzc/scene.gltf', (gltf) => {
         var model = gltf.scene;
         roamdObjects = model.children[0].children;
-        model.traverse((obj)=>{
-            if (enableGroup.indexOf(obj.name) != -1){
+        model.traverse((obj) => {
+            if (enableGroup.indexOf(obj.name) != -1) {
                 xfobj.push(obj);
             }
         });
@@ -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,20 +235,20 @@ 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') {
+        if (bimStore().activateIndex == '0') {
             // 联动左侧菜单
             Bus.emit('handleTreeClick', clickedObject);
             return;
         }
-        if(bimStore().activateIndex == '1') {
+        if (bimStore().activateIndex == '1') {
             // 联动左侧菜单
             Bus.emit('handleTreeClick1', clickedObject);
             return;
         }
-        
+
     }
 }
 
@@ -377,10 +377,8 @@ const toHomeView = () => {
         scene.remove(selectBoxByClick);
     }
     // 清除标签
-    if(!isAddLabel.value) {
-        removeLabel();
-        isAddLabel.value = !isAddLabel.value;
-    }
+    removeLabel();
+    isAddLabel.value = true;
     // 清除精灵图
     controls.reset();
 }
@@ -402,44 +400,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);
+
 }
 
 // 设置地板
@@ -456,18 +462,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({
@@ -526,8 +532,9 @@ const xfadd = (obj,state)=> {
         line-height: 24px;
     }
 }
+
 .laber_name1 {
-    width:100px;
+    width: 100px;
     height: 50px;
     border-radius: 5px;
     cursor: pointer;
@@ -536,6 +543,6 @@ const xfadd = (obj,state)=> {
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index:999;
+    z-index: 999;
 }
 </style>