diff --git a/src/components/CheckTable.vue b/src/components/CheckTable.vue index 060b636..bd63024 100644 --- a/src/components/CheckTable.vue +++ b/src/components/CheckTable.vue @@ -217,6 +217,10 @@ export default { padding: 10px; } + .el-tabs >>> .el-tabs__item{ + padding: 0 10px; + } + .check-item { padding: 10px; } diff --git a/src/components/ThreeViewerDebug.vue b/src/components/ThreeViewerDebug.vue index 8cb2e5f..61e733b 100644 --- a/src/components/ThreeViewerDebug.vue +++ b/src/components/ThreeViewerDebug.vue @@ -111,7 +111,7 @@ export default { meshList: [], selectedMeshInfo: null, raycaster: new THREE.Raycaster(), - mouse: new THREE.Vector2() + mouse: new THREE.Vector2(), }; }, mounted () { @@ -264,7 +264,6 @@ export default { // 遍历模型所有子元素 this.model.traverse((child) => { if (child.isMesh) { - console.log(7777, child) child.material.emissiveMap = child.material.map; child.castShadow = true; // 让模型产生阴影 child.receiveShadow = true; // 让模型接受阴影 @@ -274,6 +273,7 @@ export default { let path = TextureName[name] if(path) { + console.log(7777, child, name, path) if(this.textureObj[name]) { child.material = this.textureObj[name] child.material.needsUpdate = true; @@ -426,7 +426,7 @@ export default { selectedObjects ); outlinePass.selectedObjects = selectedObjects; - outlinePass.edgeStrength = 10.0; // 边框的亮度 + outlinePass.edgeStrength = 2.0; // 边框的亮度 outlinePass.edgeGlow = 0.5; // 光晕[0,1] outlinePass.usePatternTexture = false; // 是否使用父级的材质 outlinePass.edgeThickness = 1.0; // 边框宽度 @@ -469,47 +469,53 @@ export default { const angleStep = (Math.PI * 2) / this.annotations.length this.annotations.forEach((annotation, index) => { - let position = annotation.position && annotation.position[0] ? annotation.position[0] : { x: 0, y: 0, z: 0 } - let position2 = { x: position.x + 0.1, y: position.y + 0.05, z: position.z } - // 创建标注标签 - const labelDiv = document.createElement('div') - labelDiv.className = 'annotation-label' - labelDiv.textContent = `${index + 1} ${annotation.name}` - labelDiv.style.cssText = ` - background: rgba(64, 158, 255, 0.9); - color: white; - padding: 5px 10px; - border-radius: 4px; - font-size: 12px; - cursor: pointer; - white-space: nowrap; - pointer-events: auto; - ` - labelDiv.addEventListener('click', () => { - this.onAnnotationClick(annotation, index) - }) + if(annotation.position) { + let position = annotation.position && annotation.position[0] ? annotation.position[0] : { x: 0, y: 0, z: 0 } + let position2 = annotation.position && annotation.position[1] ? annotation.position[1] : { x: 0, y: 0, z: 0 } + // 创建标注标签 + const labelDiv = document.createElement('div') + labelDiv.className = 'annotation-label' + labelDiv.textContent = `${annotation.name}` + labelDiv.style.cssText = ` + background: rgba(64, 158, 255, 0.9); + color: white; + padding: 5px 10px; + border-radius: 4px; + font-size: 12px; + cursor: pointer; + white-space: nowrap; + pointer-events: auto; + ` + labelDiv.addEventListener('click', () => { + this.onAnnotationClick(annotation, index) + }) - const label = new CSS2DObject(labelDiv) - label.position.set(position2.x, position2.y, position2.z) - label.userData = { annotation, index } - - this.scene.add(label) - this.annotationObjects.push(label) + const label = new CSS2DObject(labelDiv) + label.position.set(position2.x, position2.y, position2.z) + label.userData = { annotation, index } + + this.scene.add(label) + this.annotationObjects.push(label) - // 创建连接线 - const points = [ - new THREE.Vector3(position.x, position.y, position.z), - new THREE.Vector3(position2.x, position2.y, position2.z) - ] - const geometry = new THREE.BufferGeometry().setFromPoints(points) - const material = new THREE.LineBasicMaterial({ - color: 0x409eff, - transparent: true, - opacity: 0.5 - }) - const line = new THREE.Line(geometry, material) - this.scene.add(line) - this.annotationObjects.push(line) + // 创建连接线 + const points = [ + new THREE.Vector3(position.x, position.y, position.z), + new THREE.Vector3(position2.x, position2.y, position2.z) + ] + const geometry = new THREE.BufferGeometry().setFromPoints(points) + const material = new THREE.LineBasicMaterial({ + color: 0x409eff, + transparent: true, + opacity: 0.5 + }) + const line = new THREE.Line(geometry, material) + this.scene.add(line) + this.annotationObjects.push(line) + + }else { + this.annotationObjects.push('') + this.annotationObjects.push('') + } }) }, onAnnotationClick(annotation, index) { @@ -553,6 +559,8 @@ export default { } // 高亮选中的部件 + + console.log(8888, this.annotationObjects, index) this.selectedPart = index this.annotationObjects.forEach((obj, i) => { const objIndex = Math.floor(i / 2) @@ -593,6 +601,42 @@ export default { console.log('点击的部件:', this.selectedMeshInfo); } + + // console.log('我点击了') + // // const raycaster = new THREE.Raycaster(); + // // const mouse = new THREE.Vector2(); + // // // 计算鼠标在屏幕上的位置并转换为Normalized device coordinates (NDC) + // // console.log(this.sceneDomElement.clientWidth, window.innerWidth) + // // mouse.x = (event.clientX / window.innerWidth) * 2 - 1; + // // mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; + + // // // 更新Raycaster的射线位置和方向 + // // raycaster.setFromCamera(mouse, this.camera); + // if(!this.sceneDomElement) return + // let getBoundingClientRect = this.sceneDomElement.getBoundingClientRect() + // // 屏幕坐标转标准设备坐标 + // let x = ((event.clientX - getBoundingClientRect .left) / this.sceneDomElement.offsetWidth) * 2 - 1;// 标准设备横坐标 + // let y = -((event.clientY - getBoundingClientRect .top) / this.sceneDomElement.offsetHeight) * 2 + 1;// 标准设备纵坐标 + // let standardVector = new THREE.Vector3(x, y, 1);// 标准设备坐标 + // // 标准设备坐标转世界坐标 + // let worldVector = standardVector.unproject(this.camera); + // // 射线投射方向单位向量(worldVector坐标减相机位置坐标) + // let ray = worldVector.sub(this.camera.position).normalize(); + // // 创建射线投射器对象 + // let rayCaster = new THREE.Raycaster(this.camera.position, ray); + + // // 计算物体和射线的交点 + // const intersects = rayCaster.intersectObjects(this.model.children, true); + // if (intersects.length !== 0 && intersects[0].object instanceof THREE.Mesh) { + // // this.controls.target.copy(intersects[0].point); + // let selectedObject = intersects[0].object; + // let selectedObjects = []; + // selectedObjects.push(selectedObject.parent); + // this.outlineObj(selectedObjects); + // } else { + // console.log('没找到', this.composer) + // this.composer = null + // } }, copyPosition() { diff --git a/src/data/data.json b/src/data/data.json index b291e2f..a392779 100644 --- a/src/data/data.json +++ b/src/data/data.json @@ -65,6 +65,18 @@ "content": [ "不低于 80cm，直径不低于 16mm 的软铜线", "一次端引线应采用绝缘铜线，引线绝缘层的工频电压绝缘耐受水平不低于 18kV" + ], + "position": [ + { + "x": 0.409, + "y": 0.193, + "z": 0.084 + }, + { + "x": 0.259, + "y": 0.353, + "z": 0.084 + } ] }, { @@ -77,12 +89,36 @@ "name": "螺栓螺母", "content": [ "避雷器的金属材料（连接板、螺栓螺母紧固件等金属部位）均应采用热浸镀锌钢（镀锌层厚度应不小于 86µm）或 316L 不锈钢以防腐防锈" + ], + "position": [ + { + "x": -0.024, + "y": 0.263, + "z": 0.001 + }, + { + "x": -0.45, + "y": 0.363, + "z": 0.001 + } ] }, { "name": "线夹", "content": [ "配置 JLG 挂钩引流线夹" + ], + "position": [ + { + "x": 0.612, + "y": 0.422, + "z": -0.012 + }, + { + "x": 0.512, + "y": 0.522, + "z": -0.02 + } ] }, { @@ -90,6 +126,18 @@ "content": [ "引线两端需要配置绝缘罩，位置 1：避雷器与引线连接位置（支柱绝缘子与引线连接位置）", "位置 2：引线与导线连接位置（JLG 挂钩引流线夹位置）" + ], + "position": [ + { + "x": -0.069, + "y": 0.111, + "z": -0.011 + }, + { + "x": -0.35, + "y": 0.161, + "z": -0.011 + } ] } ] @@ -151,6 +199,11 @@ "x": 0, "y": 0.245, "z": 0.015 + }, + { + "x": 0.1, + "y": 0.315, + "z": 0.015 } ] }, @@ -165,6 +218,11 @@ "x": 0.019, "y": -0.055, "z": 0.019 + }, + { + "x": 0.119, + "y": -0.005, + "z": 0.019 } ] }, @@ -172,13 +230,6 @@ "name": "铭牌", "content": [ "标记制造厂名或商标、制造日期、额定电压、额定机械负荷、结构高度和产品编号" - ], - "position": [ - { - "x": 0.019, - "y": -0.055, - "z": 0.019 - } ] } ] @@ -244,6 +295,18 @@ "name": "基座材质", "content": [ "不锈钢 (不低于 S304，厚度不小于 5mm) 或热镀锌钢板 (镀层不小于 70μm，厚度不小于 3mm)" + ], + "position": [ + { + "x": 0.2, + "y": -0.006, + "z": 0.043 + }, + { + "x": 0.4, + "y": -0.006, + "z": 0.043 + } ] }, { diff --git a/src/views/ModelDetail.vue b/src/views/ModelDetail.vue index 0593c83..6e0b187 100644 --- a/src/views/ModelDetail.vue +++ b/src/views/ModelDetail.vue @@ -254,7 +254,7 @@ export default { } .table-section { - width: 450px; + width: 40%; overflow: hidden; }