561 lines
15 KiB
Vue
561 lines
15 KiB
Vue
<template>
|
|
<div class="workshop-visualization">
|
|
<div class="workshop-container">
|
|
<!-- 3D 场景容器 -->
|
|
<div ref="sceneContainer" class="scene-container"></div>
|
|
|
|
<!-- 顶部状态栏 -->
|
|
<div class="top-bar">
|
|
<a-space direction="vertical" :size="4">
|
|
<div class="title">智能车间可视化系统</div>
|
|
<div class="subtitle">实时监控 · 数据驱动 · 智能分析</div>
|
|
</a-space>
|
|
<div class="time-display">{{ currentTime }}</div>
|
|
</div>
|
|
|
|
<!-- 左侧面板 - 设备状态 -->
|
|
<div class="left-panel">
|
|
<DeviceStatusPanel :devices="deviceData" @select-device="handleSelectDevice" />
|
|
</div>
|
|
|
|
<!-- 右侧面板 - 生产数据 -->
|
|
<div class="right-panel">
|
|
<ProductionDataPanel :productionData="productionData" />
|
|
</div>
|
|
|
|
<!-- 底部工具栏 -->
|
|
<div class="bottom-toolbar">
|
|
<a-space>
|
|
<a-button type="primary" @click="resetCamera">重置视角</a-button>
|
|
<a-button @click="toggleAutoRotate">自动旋转: {{ autoRotate ? '开' : '关' }}</a-button>
|
|
<a-button @click="toggleWireframe">线框模式</a-button>
|
|
<a-button @click="refreshData">刷新数据</a-button>
|
|
</a-space>
|
|
</div>
|
|
|
|
<!-- 设备详情弹窗 -->
|
|
<a-modal v-model:open="showDeviceDetail" title="设备详情" :footer="null" width="600px">
|
|
<DeviceDetail :device="selectedDevice" @close="showDeviceDetail = false" />
|
|
</a-modal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
|
import * as THREE from 'three';
|
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
|
import DeviceStatusPanel from './components/DeviceStatusPanel.vue';
|
|
import ProductionDataPanel from './components/ProductionDataPanel.vue';
|
|
import DeviceDetail from './components/DeviceDetail.vue';
|
|
|
|
// 时间显示
|
|
const currentTime = ref('');
|
|
const updateTime = () => {
|
|
const now = new Date();
|
|
currentTime.value = now.toLocaleString('zh-CN', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
});
|
|
};
|
|
updateTime();
|
|
const timer = setInterval(updateTime, 1000);
|
|
|
|
// Three.js 相关变量
|
|
const sceneContainer = ref<HTMLDivElement>();
|
|
let scene: THREE.Scene | null = null;
|
|
let camera: THREE.PerspectiveCamera | null = null;
|
|
let renderer: THREE.WebGLRenderer | null = null;
|
|
let controls: OrbitControls | null = null;
|
|
let animationId: number | null = null;
|
|
const autoRotate = ref(true);
|
|
const wireframeMode = ref(false);
|
|
|
|
// 设备数据
|
|
const deviceData = ref([
|
|
{
|
|
id: 'DEV001',
|
|
name: '数控机床 #1',
|
|
type: 'CNC机床',
|
|
status: 'running',
|
|
temperature: 65,
|
|
efficiency: 92,
|
|
location: { x: 0, y: 0, z: 0 },
|
|
production: 150,
|
|
maintenance: '正常',
|
|
operator: '张工',
|
|
},
|
|
{
|
|
id: 'DEV002',
|
|
name: '数控机床 #2',
|
|
type: 'CNC机床',
|
|
status: 'idle',
|
|
temperature: 45,
|
|
efficiency: 88,
|
|
location: { x: 8, y: 0, z: 0 },
|
|
production: 120,
|
|
maintenance: '正常',
|
|
operator: '李工',
|
|
},
|
|
{
|
|
id: 'DEV003',
|
|
name: '工业机器人 #1',
|
|
type: '机器人',
|
|
status: 'running',
|
|
temperature: 55,
|
|
efficiency: 95,
|
|
location: { x: 0, y: 0, z: 8 },
|
|
production: 200,
|
|
maintenance: '正常',
|
|
operator: '王工',
|
|
},
|
|
{
|
|
id: 'DEV004',
|
|
name: '工业机器人 #2',
|
|
type: '机器人',
|
|
status: 'warning',
|
|
temperature: 78,
|
|
efficiency: 70,
|
|
location: { x: 8, y: 0, z: 8 },
|
|
production: 180,
|
|
maintenance: '需要检查',
|
|
operator: '赵工',
|
|
},
|
|
{
|
|
id: 'DEV005',
|
|
name: '自动化流水线',
|
|
type: '流水线',
|
|
status: 'running',
|
|
temperature: 40,
|
|
efficiency: 90,
|
|
location: { x: 4, y: 0, z: 4 },
|
|
production: 500,
|
|
maintenance: '正常',
|
|
operator: '系统',
|
|
},
|
|
{
|
|
id: 'DEV006',
|
|
name: '检测设备',
|
|
type: '检测设备',
|
|
status: 'stopped',
|
|
temperature: 30,
|
|
efficiency: 0,
|
|
location: { x: -4, y: 0, z: 4 },
|
|
production: 0,
|
|
maintenance: '维护中',
|
|
operator: '孙工',
|
|
},
|
|
]);
|
|
|
|
// 生产数据
|
|
const productionData = computed(() => ({
|
|
totalProduction: deviceData.value.reduce((sum, dev) => sum + dev.production, 0),
|
|
efficiency: Math.round(deviceData.value.reduce((sum, dev) => sum + dev.efficiency, 0) / deviceData.value.length),
|
|
deviceCount: deviceData.value.length,
|
|
runningDevices: deviceData.value.filter((dev) => dev.status === 'running').length,
|
|
warningDevices: deviceData.value.filter((dev) => dev.status === 'warning').length,
|
|
stoppedDevices: deviceData.value.filter((dev) => dev.status === 'stopped').length,
|
|
}));
|
|
|
|
// 设备详情
|
|
const selectedDevice = ref<any>(null);
|
|
const showDeviceDetail = ref(false);
|
|
|
|
const handleSelectDevice = (device: any) => {
|
|
selectedDevice.value = device;
|
|
showDeviceDetail.value = true;
|
|
};
|
|
|
|
// 初始化Three.js场景
|
|
const initScene = () => {
|
|
if (!sceneContainer.value) return;
|
|
|
|
// 创建场景
|
|
scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x1a1a2e);
|
|
|
|
// 创建相机
|
|
camera = new THREE.PerspectiveCamera(
|
|
60,
|
|
sceneContainer.value.clientWidth / sceneContainer.value.clientHeight,
|
|
0.1,
|
|
1000
|
|
);
|
|
camera.position.set(20, 15, 20);
|
|
|
|
// 创建渲染器
|
|
renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(sceneContainer.value.clientWidth, sceneContainer.value.clientHeight);
|
|
renderer.shadowMap.enabled = true;
|
|
sceneContainer.value.appendChild(renderer.domElement);
|
|
|
|
// 添加控制器
|
|
controls = new OrbitControls(camera, renderer.domElement);
|
|
controls.enableDamping = true;
|
|
controls.dampingFactor = 0.05;
|
|
controls.autoRotate = autoRotate.value;
|
|
controls.autoRotateSpeed = 2;
|
|
|
|
// 添加灯光
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
|
|
scene.add(ambientLight);
|
|
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
|
directionalLight.position.set(10, 20, 10);
|
|
directionalLight.castShadow = true;
|
|
scene.add(directionalLight);
|
|
|
|
const pointLight = new THREE.PointLight(0x00ffff, 0.5);
|
|
pointLight.position.set(0, 10, 0);
|
|
scene.add(pointLight);
|
|
|
|
// 创建车间地面
|
|
createWorkshopFloor();
|
|
|
|
// 创建设备模型
|
|
deviceData.value.forEach((device) => {
|
|
createDeviceModel(device);
|
|
});
|
|
|
|
// 添加网格辅助
|
|
const gridHelper = new THREE.GridHelper(30, 30, 0x444444, 0x333333);
|
|
scene.add(gridHelper);
|
|
|
|
// 添加坐标轴辅助
|
|
const axesHelper = new THREE.AxesHelper(5);
|
|
scene.add(axesHelper);
|
|
|
|
// 窗口大小调整处理
|
|
window.addEventListener('resize', onWindowResize);
|
|
|
|
// 开始动画循环
|
|
animate();
|
|
};
|
|
|
|
// 创建车间地面
|
|
const createWorkshopFloor = () => {
|
|
if (!scene) return;
|
|
|
|
const floorGeometry = new THREE.PlaneGeometry(30, 30);
|
|
const floorMaterial = new THREE.MeshStandardMaterial({
|
|
color: 0x2a2a4a,
|
|
roughness: 0.8,
|
|
metalness: 0.2,
|
|
});
|
|
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
|
floor.rotation.x = -Math.PI / 2;
|
|
floor.position.y = -0.1;
|
|
floor.receiveShadow = true;
|
|
scene.add(floor);
|
|
|
|
// 添加车间分隔线
|
|
const lineMaterial = new THREE.LineBasicMaterial({ color: 0x4a4a6a });
|
|
const points: THREE.Vector3[] = [];
|
|
for (let i = -15; i <= 15; i += 10) {
|
|
points.push(new THREE.Vector3(i, 0.1, -15));
|
|
points.push(new THREE.Vector3(i, 0.1, 15));
|
|
points.push(new THREE.Vector3(-15, 0.1, i));
|
|
points.push(new THREE.Vector3(15, 0.1, i));
|
|
}
|
|
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
|
|
const lines = new THREE.LineSegments(lineGeometry, lineMaterial);
|
|
scene.add(lines);
|
|
};
|
|
|
|
// 创建设备模型
|
|
const createDeviceModel = (device: any) => {
|
|
if (!scene) return;
|
|
|
|
const group = new THREE.Group();
|
|
group.userData = { deviceId: device.id };
|
|
|
|
// 根据设备类型创建不同的模型
|
|
let mainGeometry: THREE.BoxGeometry;
|
|
let height = 2;
|
|
|
|
if (device.type === 'CNC机床') {
|
|
mainGeometry = new THREE.BoxGeometry(3, height, 2);
|
|
} else if (device.type === '机器人') {
|
|
mainGeometry = new THREE.BoxGeometry(1.5, height, 1.5);
|
|
} else if (device.type === '流水线') {
|
|
mainGeometry = new THREE.BoxGeometry(8, height * 0.5, 1.5);
|
|
} else {
|
|
mainGeometry = new THREE.BoxGeometry(2, height, 2);
|
|
}
|
|
|
|
// 根据设备状态设置颜色
|
|
let color = 0x4CAF50; // 运行中 - 绿色
|
|
if (device.status === 'idle') color = 0xFFC107; // 空闲 - 黄色
|
|
if (device.status === 'warning') color = 0xFF5722; // 警告 - 橙色
|
|
if (device.status === 'stopped') color = 0xF44336; // 停止 - 红色
|
|
|
|
const mainMaterial = new THREE.MeshStandardMaterial({
|
|
color: color,
|
|
roughness: 0.3,
|
|
metalness: 0.7,
|
|
wireframe: wireframeMode.value,
|
|
});
|
|
|
|
const mainMesh = new THREE.Mesh(mainGeometry, mainMaterial);
|
|
mainMesh.position.y = height / 2;
|
|
mainMesh.castShadow = true;
|
|
mainMesh.receiveShadow = true;
|
|
group.add(mainMesh);
|
|
|
|
// 添加设备标识
|
|
const labelGeometry = new THREE.BoxGeometry(0.5, 1, 0.1);
|
|
const labelMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
|
|
const label = new THREE.Mesh(labelGeometry, labelMaterial);
|
|
label.position.y = height + 0.5;
|
|
group.add(label);
|
|
|
|
// 添加灯光效果（运行中的设备）
|
|
if (device.status === 'running') {
|
|
const light = new THREE.PointLight(color, 1, 5);
|
|
light.position.set(0, height + 1, 0);
|
|
group.add(light);
|
|
}
|
|
|
|
// 设置位置
|
|
group.position.set(device.location.x - 4, 0, device.location.z - 4);
|
|
|
|
scene.add(group);
|
|
};
|
|
|
|
// 窗口大小调整
|
|
const onWindowResize = () => {
|
|
if (!camera || !renderer || !sceneContainer.value) return;
|
|
camera.aspect = sceneContainer.value.clientWidth / sceneContainer.value.clientHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(sceneContainer.value.clientWidth, sceneContainer.value.clientHeight);
|
|
};
|
|
|
|
// 动画循环
|
|
const animate = () => {
|
|
animationId = requestAnimationFrame(animate);
|
|
if (controls) {
|
|
controls.update();
|
|
}
|
|
if (renderer && scene && camera) {
|
|
renderer.render(scene, camera);
|
|
}
|
|
};
|
|
|
|
// 重置相机
|
|
const resetCamera = () => {
|
|
if (!camera || !controls) return;
|
|
camera.position.set(20, 15, 20);
|
|
camera.lookAt(0, 0, 0);
|
|
controls.reset();
|
|
};
|
|
|
|
// 切换自动旋转
|
|
const toggleAutoRotate = () => {
|
|
autoRotate.value = !autoRotate.value;
|
|
if (controls) {
|
|
controls.autoRotate = autoRotate.value;
|
|
}
|
|
};
|
|
|
|
// 切换线框模式
|
|
const toggleWireframe = () => {
|
|
wireframeMode.value = !wireframeMode.value;
|
|
if (scene) {
|
|
scene.traverse((object) => {
|
|
if (object instanceof THREE.Mesh && object.material instanceof THREE.MeshStandardMaterial) {
|
|
object.material.wireframe = wireframeMode.value;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
// 刷新数据
|
|
const refreshData = () => {
|
|
// 模拟数据更新
|
|
deviceData.value.forEach((device) => {
|
|
device.temperature += Math.floor(Math.random() * 5) - 2;
|
|
device.efficiency = Math.max(0, Math.min(100, device.efficiency + Math.floor(Math.random() * 10) - 5));
|
|
if (device.status === 'running') {
|
|
device.production += Math.floor(Math.random() * 5);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 清理资源
|
|
const cleanup = () => {
|
|
if (animationId) {
|
|
cancelAnimationFrame(animationId);
|
|
}
|
|
window.removeEventListener('resize', onWindowResize);
|
|
if (renderer) {
|
|
renderer.dispose();
|
|
}
|
|
if (scene) {
|
|
scene.traverse((object) => {
|
|
if (object instanceof THREE.Mesh) {
|
|
if (object.geometry) {
|
|
object.geometry.dispose();
|
|
}
|
|
if (object.material instanceof THREE.Material) {
|
|
object.material.dispose();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
initScene();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
cleanup();
|
|
clearInterval(timer);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.workshop-visualization {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #0a0a1a;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.workshop-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.scene-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.top-bar {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 20, 40, 0.8);
|
|
border: 1px solid #00d4ff;
|
|
border-radius: 8px;
|
|
padding: 12px 24px;
|
|
backdrop-filter: blur(10px);
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 40px;
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
|
|
}
|
|
|
|
.title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #00d4ff;
|
|
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 14px;
|
|
color: #7ec8e3;
|
|
}
|
|
|
|
.time-display {
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
font-family: 'Courier New', monospace;
|
|
background: rgba(0, 212, 255, 0.2);
|
|
padding: 6px 16px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 212, 255, 0.3);
|
|
}
|
|
|
|
.left-panel {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 300px;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
z-index: 50;
|
|
}
|
|
|
|
.right-panel {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 320px;
|
|
z-index: 50;
|
|
}
|
|
|
|
.bottom-toolbar {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 20, 40, 0.9);
|
|
border: 1px solid #00d4ff;
|
|
border-radius: 8px;
|
|
padding: 12px 24px;
|
|
backdrop-filter: blur(10px);
|
|
z-index: 100;
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
|
|
}
|
|
|
|
/* 自定义滚动条 */
|
|
:deep(.ant-list-item) {
|
|
background: rgba(0, 20, 40, 0.8);
|
|
border: 1px solid rgba(0, 212, 255, 0.3);
|
|
margin-bottom: 8px;
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
:deep(.ant-list-item:hover) {
|
|
border-color: #00d4ff;
|
|
box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
:deep(.ant-modal-content) {
|
|
background: rgba(0, 20, 40, 0.95);
|
|
border: 1px solid #00d4ff;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
:deep(.ant-modal-header) {
|
|
background: rgba(0, 40, 80, 0.8);
|
|
border-bottom: 1px solid #00d4ff;
|
|
}
|
|
|
|
:deep(.ant-modal-title) {
|
|
color: #00d4ff;
|
|
}
|
|
|
|
:deep(.ant-btn-primary) {
|
|
background: linear-gradient(135deg, #0066cc, #00d4ff);
|
|
border: none;
|
|
box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
}
|
|
|
|
:deep(.ant-btn) {
|
|
color: #ffffff;
|
|
background: rgba(0, 40, 80, 0.8);
|
|
border: 1px solid #00d4ff;
|
|
}
|
|
|
|
:deep(.ant-btn:hover) {
|
|
border-color: #00d4ff;
|
|
box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
}
|
|
</style>
|