This commit is contained in:
parent
16ed8e8b61
commit
f5812a995c
|
|
@ -0,0 +1,388 @@
|
|||
<template>
|
||||
<div class="dxf-viewer-root">
|
||||
<div class="dxf-sidebar">
|
||||
<div class="sidebar-title">图层列表</div>
|
||||
<ul class="layer-list">
|
||||
<li
|
||||
v-for="(layer, idx) in layerList"
|
||||
:key="layer.layerName"
|
||||
:class="{ active: idx === selectedLayerIndex }"
|
||||
@click="selectLayer(idx)"
|
||||
>
|
||||
{{ layer.layerName }} <span class="entity-count">({{ layer.entities.length }})</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dxf-main">
|
||||
<div class="entity-list">
|
||||
<div class="entity-title">图元列表</div>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(entity, i) in selectedLayerEntities"
|
||||
:key="entity.id"
|
||||
:class="{ selected: selectedEntityId === entity.id }"
|
||||
@click="selectEntity(entity.id)"
|
||||
>
|
||||
<span class="entity-type">{{ entity.entityType }}</span>
|
||||
<span class="entity-id">#{{ entity.id }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="threejs-container" ref="threeContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as THREE from 'three'
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
||||
|
||||
export default {
|
||||
name: 'DxfLayerEntityViewer',
|
||||
props: {
|
||||
entities: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
layerList: [],
|
||||
selectedLayerIndex: 0,
|
||||
selectedEntityId: null,
|
||||
scene: null,
|
||||
camera: null,
|
||||
renderer: null,
|
||||
controls: null,
|
||||
entityMeshMap: {}, // id: mesh
|
||||
scaleFactor: 1, // 动态计算
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
minX: 0,
|
||||
minY: 0,
|
||||
maxX: 0,
|
||||
maxY: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedLayerEntities() {
|
||||
if (!this.layerList.length) return []
|
||||
return this.layerList[this.selectedLayerIndex].entities
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
entities: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.prepareLayers(val)
|
||||
this.$nextTick(() => {
|
||||
this.initThree()
|
||||
})
|
||||
}
|
||||
},
|
||||
selectedLayerIndex() {
|
||||
this.highlightEntities()
|
||||
},
|
||||
selectedEntityId() {
|
||||
this.highlightEntities()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.onWindowResize)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.onWindowResize)
|
||||
if (this.renderer) {
|
||||
this.renderer.dispose()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
prepareLayers(entities) {
|
||||
// 分组
|
||||
const map = {}
|
||||
entities.forEach(e => {
|
||||
if (!map[e.layerName]) map[e.layerName] = []
|
||||
map[e.layerName].push(e)
|
||||
})
|
||||
this.layerList = Object.keys(map).map(layerName => ({
|
||||
layerName,
|
||||
entities: map[layerName]
|
||||
}))
|
||||
this.selectedLayerIndex = 0
|
||||
this.selectedEntityId = null
|
||||
},
|
||||
selectLayer(idx) {
|
||||
this.selectedLayerIndex = idx
|
||||
this.selectedEntityId = null
|
||||
},
|
||||
selectEntity(id) {
|
||||
this.selectedEntityId = id
|
||||
},
|
||||
initThree() {
|
||||
// 清理
|
||||
if (this.renderer && this.$refs.threeContainer) {
|
||||
this.$refs.threeContainer.innerHTML = ''
|
||||
}
|
||||
this.scene = new THREE.Scene()
|
||||
this.camera = new THREE.PerspectiveCamera(
|
||||
60,
|
||||
this.$refs.threeContainer.clientWidth / this.$refs.threeContainer.clientHeight,
|
||||
0.1,
|
||||
100000
|
||||
)
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
|
||||
this.renderer.setSize(
|
||||
this.$refs.threeContainer.clientWidth,
|
||||
this.$refs.threeContainer.clientHeight
|
||||
)
|
||||
this.renderer.setClearColor(0xf0f2f5, 1)
|
||||
this.$refs.threeContainer.appendChild(this.renderer.domElement)
|
||||
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
|
||||
this.controls.enableDamping = true
|
||||
this.controls.dampingFactor = 0.05
|
||||
this.controls.screenSpacePanning = true
|
||||
// 灯光
|
||||
this.scene.add(new THREE.AmbientLight(0xffffff, 0.6))
|
||||
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8)
|
||||
dirLight.position.set(100, 100, 100)
|
||||
this.scene.add(dirLight)
|
||||
// 网格
|
||||
const gridHelper = new THREE.GridHelper(100, 10, 0x444444, 0x888888)
|
||||
this.scene.add(gridHelper)
|
||||
// 坐标轴
|
||||
const axesHelper = new THREE.AxesHelper(50)
|
||||
this.scene.add(axesHelper)
|
||||
// 渲染实体
|
||||
this.renderAllEntities()
|
||||
this.animate()
|
||||
},
|
||||
renderAllEntities() {
|
||||
// 计算边界
|
||||
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
|
||||
this.entityMeshMap = {}
|
||||
this.entities.forEach(entity => {
|
||||
const geometry = entity.geometry ? JSON.parse(entity.geometry) : null
|
||||
if (!geometry) return
|
||||
if (entity.entityType === 'LINE') {
|
||||
if (Array.isArray(geometry.start)) {
|
||||
minX = Math.min(minX, geometry.start[0], geometry.end[0])
|
||||
minY = Math.min(minY, geometry.start[1], geometry.end[1])
|
||||
maxX = Math.max(maxX, geometry.start[0], geometry.end[0])
|
||||
maxY = Math.max(maxY, geometry.start[1], geometry.end[1])
|
||||
}
|
||||
} else if (entity.entityType === 'CIRCLE') {
|
||||
if (Array.isArray(geometry.center)) {
|
||||
minX = Math.min(minX, geometry.center[0] - geometry.radius)
|
||||
minY = Math.min(minY, geometry.center[1] - geometry.radius)
|
||||
maxX = Math.max(maxX, geometry.center[0] + geometry.radius)
|
||||
maxY = Math.max(maxY, geometry.center[1] + geometry.radius)
|
||||
}
|
||||
}
|
||||
})
|
||||
this.minX = minX
|
||||
this.minY = minY
|
||||
this.maxX = maxX
|
||||
this.maxY = maxY
|
||||
this.offsetX = (minX + maxX) / 2
|
||||
this.offsetY = (minY + maxY) / 2
|
||||
|
||||
// 缩放适配，保持宽高比
|
||||
const containerWidth = this.$refs.threeContainer.clientWidth
|
||||
const containerHeight = this.$refs.threeContainer.clientHeight
|
||||
const rangeX = maxX - minX
|
||||
const rangeY = maxY - minY
|
||||
const scaleX = (containerWidth * 0.8) / rangeX
|
||||
const scaleY = (containerHeight * 0.8) / rangeY
|
||||
this.scaleFactor = Math.min(scaleX, scaleY)
|
||||
|
||||
// 渲染
|
||||
this.entities.forEach(entity => {
|
||||
const geometry = entity.geometry ? JSON.parse(entity.geometry) : null
|
||||
if (!geometry) return
|
||||
const color = this.getColor(entity.color)
|
||||
const material = new THREE.LineBasicMaterial({ color, linewidth: 1 })
|
||||
let mesh = null
|
||||
if (entity.entityType === 'LINE') {
|
||||
const start = this.transformPoint(geometry.start)
|
||||
const end = this.transformPoint(geometry.end)
|
||||
const points = [start, end]
|
||||
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points)
|
||||
mesh = new THREE.Line(lineGeometry, material)
|
||||
} else if (entity.entityType === 'CIRCLE') {
|
||||
const center = this.transformPoint(geometry.center)
|
||||
const radius = geometry.radius * this.scaleFactor
|
||||
const circleGeometry = new THREE.CircleGeometry(radius, 64)
|
||||
mesh = new THREE.LineLoop(circleGeometry, material)
|
||||
mesh.position.set(center.x, center.y, center.z)
|
||||
}
|
||||
if (mesh) {
|
||||
mesh.userData = { entityId: entity.id, layerName: entity.layerName }
|
||||
this.scene.add(mesh)
|
||||
this.entityMeshMap[entity.id] = mesh
|
||||
}
|
||||
})
|
||||
// 居中相机
|
||||
this.camera.position.set(0, 0, Math.max(containerWidth, containerHeight))
|
||||
this.camera.lookAt(0, 0, 0)
|
||||
if (this.controls) this.controls.update()
|
||||
this.highlightEntities()
|
||||
},
|
||||
transformPoint(point) {
|
||||
return new THREE.Vector3(
|
||||
(point[0] - this.offsetX) * this.scaleFactor,
|
||||
(point[1] - this.offsetY) * this.scaleFactor,
|
||||
0
|
||||
)
|
||||
},
|
||||
highlightEntities() {
|
||||
// 只高亮当前层和选中实体
|
||||
Object.values(this.entityMeshMap).forEach(mesh => {
|
||||
mesh.material.color.set(0xcccccc)
|
||||
mesh.material.linewidth = 2
|
||||
})
|
||||
// 高亮当前层
|
||||
const currentLayer = this.layerList[this.selectedLayerIndex]
|
||||
if (currentLayer) {
|
||||
currentLayer.entities.forEach(entity => {
|
||||
const mesh = this.entityMeshMap[entity.id]
|
||||
if (mesh) mesh.material.color.set(0x409EFF)
|
||||
})
|
||||
}
|
||||
// 高亮选中实体
|
||||
if (this.selectedEntityId) {
|
||||
const mesh = this.entityMeshMap[this.selectedEntityId]
|
||||
if (mesh) mesh.material.color.set(0xff0000)
|
||||
}
|
||||
},
|
||||
transformPoint(point) {
|
||||
return new THREE.Vector3(
|
||||
(point[0] - this.offsetX) * this.scaleFactor,
|
||||
(point[1] - this.offsetY) * this.scaleFactor,
|
||||
0
|
||||
)
|
||||
},
|
||||
getColor(colorIndex) {
|
||||
const colors = {
|
||||
1: 0xff0000, 2: 0xffff00, 3: 0x00ff00, 4: 0x00ffff,
|
||||
5: 0x0000ff, 6: 0xff00ff, 7: 0xffffff, 256: 0x000000
|
||||
}
|
||||
return colors[colorIndex] || 0x00aaff
|
||||
},
|
||||
animate() {
|
||||
requestAnimationFrame(this.animate)
|
||||
if (this.controls) this.controls.update()
|
||||
if (this.renderer && this.scene && this.camera) {
|
||||
this.renderer.render(this.scene, this.camera)
|
||||
}
|
||||
},
|
||||
onWindowResize() {
|
||||
if (this.camera && this.renderer && this.$refs.threeContainer) {
|
||||
this.camera.aspect = this.$refs.threeContainer.clientWidth / this.$refs.threeContainer.clientHeight
|
||||
this.camera.updateProjectionMatrix()
|
||||
this.renderer.setSize(
|
||||
this.$refs.threeContainer.clientWidth,
|
||||
this.$refs.threeContainer.clientHeight
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dxf-viewer-root {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
background: #f0f2f5;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
.dxf-sidebar {
|
||||
width: 200px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
padding: 0 0 0 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
padding: 16px 0 8px 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
}
|
||||
.layer-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.layer-list li {
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
border-left: 4px solid transparent;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
.layer-list li.active {
|
||||
background: #f0f7ff;
|
||||
border-left: 4px solid #409EFF;
|
||||
color: #409EFF;
|
||||
}
|
||||
.entity-count {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.dxf-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
.entity-list {
|
||||
width: 220px;
|
||||
background: #f7f9fc;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
padding: 0 0 0 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.entity-title {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
padding: 16px 0 8px 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
}
|
||||
.entity-list ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.entity-list li {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
border-left: 4px solid transparent;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.entity-list li.selected {
|
||||
background: #fff7f7;
|
||||
border-left: 4px solid #ff4d4f;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
.entity-type {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
.entity-id {
|
||||
color: #bbb;
|
||||
font-size: 12px;
|
||||
}
|
||||
.threejs-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: #f0f2f5;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue