100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import {CssType, HtmlPanel} from '@deep/engine';
|
||
|
||
|
||
/**
|
||
* 传感器面板类
|
||
*/
|
||
export class SensorModal extends HtmlPanel {
|
||
private sensorData: {
|
||
sensors: Array<{
|
||
type: string;
|
||
channel: number;
|
||
position: {
|
||
x: number;
|
||
y: number;
|
||
z: number;
|
||
};
|
||
}>;
|
||
} = {
|
||
sensors: []
|
||
};
|
||
|
||
/**
|
||
* 构造函数
|
||
* @param type CSS渲染类型
|
||
*/
|
||
constructor(type: CssType = CssType.CSS3D) {
|
||
super(type);
|
||
this.updateContentFromData();
|
||
}
|
||
|
||
/**
|
||
* 更新传感器数据
|
||
* @param data 新的传感器数据
|
||
*/
|
||
updateData(data: {
|
||
sensors: Array<{
|
||
type: string;
|
||
channel: number;
|
||
position: {
|
||
x: number;
|
||
y: number;
|
||
z: number;
|
||
};
|
||
}>;
|
||
}): void {
|
||
this.sensorData = data;
|
||
this.updateContentFromData();
|
||
}
|
||
|
||
/**
|
||
* 根据数据更新弹窗内容
|
||
*/
|
||
private updateContentFromData(): void {
|
||
// 使用 cssObject 的 uuid 作为唯一标识 作为 关闭按键的id
|
||
const cssObject = this.getCssObject();
|
||
const closeButtonId = cssObject.uuid;
|
||
|
||
const content = `
|
||
<div style="font-family: Arial, sans-serif; position: relative;">
|
||
<button id="${closeButtonId}" style="position: absolute; top: 40px; right: 40px; background: #ff4444; color: white; border: none; border-radius: 20px; width: 120px; height: 120px; cursor: pointer; font-size: 80px; line-height: 1; pointer-events: auto;">×</button>
|
||
<h2 style="margin-top: 0; color: #333; font-size: 120px;">传感器数据</h2>
|
||
${this.sensorData.sensors.length > 0 ?
|
||
this.sensorData.sensors.map((sensor, index) => `
|
||
<div style="margin-bottom: 75px; padding: 60px; border: 5px solid #e0e0e0; border-radius: 20px;">
|
||
<h3 style="margin-top: 0; color: #555; font-size: 100px;">传感器 ${index + 1}</h3>
|
||
<div style="margin-bottom: 40px; font-size: 80px;">
|
||
<strong>类型:</strong> ${sensor.type}
|
||
</div>
|
||
<div style="margin-bottom: 40px; font-size: 80px;">
|
||
<strong>通道:</strong> ${sensor.channel}
|
||
</div>
|
||
<div style="margin-bottom: 40px; font-size: 80px;">
|
||
<strong>位置:</strong> (${sensor.position.x}, ${sensor.position.y}, ${sensor.position.z})
|
||
</div>
|
||
</div>
|
||
`).join('')
|
||
: '<p style="color: #999; font-size: 80px;">暂无传感器数据</p>'
|
||
}
|
||
</div>
|
||
`;
|
||
this.updateContent(content);
|
||
this.attachCloseButtonListener(closeButtonId);
|
||
}
|
||
|
||
/**
|
||
* 附加关闭按钮事件监听器
|
||
* @param buttonId 按钮ID
|
||
*/
|
||
private attachCloseButtonListener(buttonId: string): void {
|
||
// 使用 setTimeout 确保 DOM 已更新
|
||
setTimeout(() => {
|
||
const closeButton = document.getElementById(buttonId);
|
||
if (closeButton) {
|
||
closeButton.onclick = () => {
|
||
this.hide();
|
||
};
|
||
}
|
||
}, 0);
|
||
}
|
||
} |