582 lines
19 KiB
HTML
582 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>iFlow Engine - 2D 图纸查看器</title>
|
|
<!-- 从本地 lib 目录加载 SDK 文件 -->
|
|
<script src="./lib/iflow-engine.umd.js"></script>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f5f5f5;
|
|
height: 100vh;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 左侧控制面板 */
|
|
.sidebar {
|
|
width: 320px;
|
|
background: white;
|
|
border-right: 1px solid #e0e0e0;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
|
|
z-index: 10;
|
|
}
|
|
|
|
.sidebar h1 {
|
|
font-size: 1.3rem;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sidebar .subtitle {
|
|
font-size: 0.85rem;
|
|
color: #888;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.control-group {
|
|
background: #f9f9f9;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.control-group h2 {
|
|
font-size: 0.95rem;
|
|
color: #555;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 5px;
|
|
border-bottom: 2px solid #e0e0e0;
|
|
}
|
|
|
|
.btn-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
button {
|
|
padding: 6px 12px;
|
|
font-size: 0.85rem;
|
|
border: 1px solid #ddd;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
button:hover {
|
|
background: #f0f0f0;
|
|
border-color: #ccc;
|
|
}
|
|
|
|
button.primary {
|
|
background: #0078d4;
|
|
color: white;
|
|
border-color: #0063b1;
|
|
}
|
|
|
|
button.primary:hover {
|
|
background: #0063b1;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* URL 输入框 */
|
|
.url-input {
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
font-size: 0.85rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
}
|
|
|
|
.url-input:focus {
|
|
border-color: #0078d4;
|
|
box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
|
|
}
|
|
|
|
.url-input::placeholder {
|
|
color: #bbb;
|
|
}
|
|
|
|
/* 图层列表 */
|
|
.layer-list {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.layer-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
color: #444;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.layer-item:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.layer-item input[type="checkbox"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.layer-item label {
|
|
cursor: pointer;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 状态显示 */
|
|
.status {
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
margin-top: 8px;
|
|
padding: 8px;
|
|
background: #f0f0f0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.status .label {
|
|
font-weight: 600;
|
|
color: #555;
|
|
}
|
|
|
|
.status.success {
|
|
background: #e8f5e9;
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.status.error {
|
|
background: #ffebee;
|
|
color: #c62828;
|
|
}
|
|
|
|
.status.loading {
|
|
background: #e3f2fd;
|
|
color: #1565c0;
|
|
}
|
|
|
|
/* 右侧主内容区 */
|
|
.main-content {
|
|
flex: 1;
|
|
position: relative;
|
|
background: #eef2f5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
/* 日志区域 */
|
|
.log-area {
|
|
margin-top: 8px;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
background: #1e1e1e;
|
|
color: #d4d4d4;
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
font-size: 0.75rem;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.log-area .log-entry {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.log-area .log-entry.info { color: #569cd6; }
|
|
.log-area .log-entry.success { color: #6a9955; }
|
|
.log-area .log-entry.error { color: #f44747; }
|
|
.log-area .log-entry.warn { color: #d7ba7d; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 左侧控制面板 -->
|
|
<aside class="sidebar">
|
|
<div>
|
|
<h1>📐 2D 图纸查看器</h1>
|
|
<div class="subtitle">iFlow Engine SDK - 2D Drawing Viewer</div>
|
|
</div>
|
|
|
|
<!-- 引擎控制 -->
|
|
<div class="control-group">
|
|
<h2>🚀 引擎控制</h2>
|
|
<div class="btn-container">
|
|
<button class="primary" id="btn-init" onclick="initEngine2d()">初始化 2D 引擎</button>
|
|
</div>
|
|
<div class="btn-container" style="margin-top: 8px;">
|
|
<button id="btn-load" onclick="loadDrawing()" disabled>加载默认图纸</button>
|
|
</div>
|
|
<div style="margin-top: 10px;">
|
|
<input type="text" id="url-input" class="url-input" placeholder="输入图纸 URL 后点击切换图纸" />
|
|
</div>
|
|
<div class="btn-container" style="margin-top: 8px;">
|
|
<button class="primary" id="btn-switch" onclick="switchDrawing()" disabled>切换图纸</button>
|
|
</div>
|
|
<div id="engine-status" class="status">
|
|
<span class="label">状态:</span> 未初始化
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 视图控制 -->
|
|
<div class="control-group">
|
|
<h2>🔍 视图控制</h2>
|
|
<div class="btn-container">
|
|
<button onclick="resetView()" id="btn-reset">重置视图</button>
|
|
<button onclick="fitToView()" id="btn-fit">适应视图</button>
|
|
</div>
|
|
<div class="btn-container" style="margin-top: 8px;">
|
|
<button onclick="zoomIn()">放大</button>
|
|
<button onclick="zoomOut()">缩小</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图层控制 -->
|
|
<div class="control-group">
|
|
<h2>📑 图层控制</h2>
|
|
<div class="btn-container">
|
|
<button onclick="refreshLayers()">刷新图层</button>
|
|
<button onclick="showAllLayers()">全部显示</button>
|
|
<button onclick="hideAllLayers()">全部隐藏</button>
|
|
</div>
|
|
<div id="layer-list" class="layer-list">
|
|
<div style="color: #aaa; font-size: 0.8rem; padding: 8px;">
|
|
加载图纸后显示图层列表
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主题切换 -->
|
|
<div class="control-group">
|
|
<h2>🎨 主题</h2>
|
|
<div class="btn-container">
|
|
<button onclick="setTheme('dark')">深色</button>
|
|
<button onclick="setTheme('light')">浅色</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 日志 -->
|
|
<div class="control-group">
|
|
<h2>📋 日志</h2>
|
|
<div id="log-area" class="log-area">
|
|
<div class="log-entry info">等待初始化...</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 右侧主区域 -->
|
|
<main class="main-content">
|
|
<div id="app"></div>
|
|
</main>
|
|
|
|
<script>
|
|
// ==================== 全局变量 ====================
|
|
let bimEngine = null;
|
|
let engine2dInitialized = false;
|
|
|
|
// 默认图纸 URL
|
|
const DEFAULT_DRAWING_URL = 'https://lyz-1259524260.cos.ap-guangzhou.myqcloud.com/iflow/models/97353007-32da-4e07-b85e-8f6b0c736732';
|
|
|
|
// ==================== 日志工具 ====================
|
|
function addLog(message, type) {
|
|
type = type || 'info';
|
|
var logArea = document.getElementById('log-area');
|
|
var entry = document.createElement('div');
|
|
entry.className = 'log-entry ' + type;
|
|
var time = new Date().toLocaleTimeString();
|
|
entry.textContent = '[' + time + '] ' + message;
|
|
logArea.appendChild(entry);
|
|
logArea.scrollTop = logArea.scrollHeight;
|
|
}
|
|
|
|
function updateStatus(message, type) {
|
|
type = type || '';
|
|
var statusEl = document.getElementById('engine-status');
|
|
statusEl.className = 'status ' + type;
|
|
statusEl.innerHTML = '<span class="label">状态:</span> ' + message;
|
|
}
|
|
|
|
// ==================== 引擎初始化 ====================
|
|
window.onload = function() {
|
|
if (window.IflowEngine) {
|
|
addLog('SDK 加载成功，版本可用', 'success');
|
|
try {
|
|
var Engine = window.IflowEngine.BimEngine;
|
|
bimEngine = new Engine('app', { locale: 'zh-CN', theme: 'light' });
|
|
addLog('BimEngine 实例创建成功', 'success');
|
|
} catch (err) {
|
|
addLog('BimEngine 创建失败: ' + err.message, 'error');
|
|
updateStatus('创建失败', 'error');
|
|
}
|
|
} else {
|
|
addLog('SDK 未找到，请确保 iflow-engine.umd.js 已加载', 'error');
|
|
updateStatus('SDK 未加载', 'error');
|
|
}
|
|
};
|
|
|
|
// ==================== 初始化 2D 引擎 ====================
|
|
function initEngine2d() {
|
|
if (!bimEngine || !bimEngine.engine2d) {
|
|
addLog('BimEngine 或 engine2d 管理器不可用', 'error');
|
|
updateStatus('不可用', 'error');
|
|
return;
|
|
}
|
|
|
|
if (bimEngine.engine2d.isInitialized()) {
|
|
addLog('2D 引擎已经初始化过了', 'warn');
|
|
updateStatus('已初始化', 'success');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
updateStatus('正在初始化...', 'loading');
|
|
addLog('开始初始化 2D 引擎...');
|
|
|
|
var success = bimEngine.engine2d.initialize({
|
|
backgroundColor: 0xffffff,
|
|
gridEnabled: true,
|
|
axesEnabled: false
|
|
});
|
|
|
|
if (success) {
|
|
engine2dInitialized = true;
|
|
updateStatus('已初始化 ✓', 'success');
|
|
addLog('2D 引擎初始化成功', 'success');
|
|
document.getElementById('btn-load').disabled = false;
|
|
document.getElementById('btn-switch').disabled = false;
|
|
document.getElementById('btn-init').disabled = true;
|
|
|
|
// 监听 2D 引擎事件
|
|
bimEngine.on('engine2d:drawing-loaded', function(payload) {
|
|
addLog('图纸加载完成: ' + payload.url, 'success');
|
|
updateStatus('图纸已加载 ✓', 'success');
|
|
// 自动刷新图层列表
|
|
refreshLayers();
|
|
});
|
|
|
|
bimEngine.on('engine2d:entity-clicked', function(payload) {
|
|
addLog('实体点击: ' + JSON.stringify(payload.data));
|
|
});
|
|
|
|
bimEngine.on('engine2d:layer-changed', function(payload) {
|
|
addLog('图层变更: ' + JSON.stringify(payload.data));
|
|
});
|
|
|
|
// 自动加载图纸
|
|
loadDrawing();
|
|
} else {
|
|
updateStatus('初始化失败', 'error');
|
|
addLog('2D 引擎初始化返回 false', 'error');
|
|
}
|
|
} catch (error) {
|
|
updateStatus('初始化错误', 'error');
|
|
addLog('2D 引擎初始化错误: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ==================== 加载图纸 ====================
|
|
function loadDrawing() {
|
|
if (!bimEngine || !bimEngine.engine2d || !bimEngine.engine2d.isInitialized()) {
|
|
addLog('请先初始化 2D 引擎', 'warn');
|
|
return;
|
|
}
|
|
|
|
updateStatus('正在加载图纸...', 'loading');
|
|
addLog('开始加载图纸: ' + DEFAULT_DRAWING_URL);
|
|
|
|
try {
|
|
bimEngine.engine2d.loadDrawing(DEFAULT_DRAWING_URL).then(function() {
|
|
addLog('loadDrawing Promise 已完成', 'success');
|
|
}).catch(function(err) {
|
|
addLog('图纸加载失败: ' + err.message, 'error');
|
|
updateStatus('加载失败', 'error');
|
|
});
|
|
} catch (error) {
|
|
addLog('加载图纸错误: ' + error.message, 'error');
|
|
updateStatus('加载错误', 'error');
|
|
}
|
|
}
|
|
|
|
// ==================== 切换图纸 ====================
|
|
function switchDrawing() {
|
|
var urlInput = document.getElementById('url-input');
|
|
var newUrl = urlInput.value.trim();
|
|
|
|
if (!newUrl) {
|
|
addLog('请输入图纸 URL', 'warn');
|
|
return;
|
|
}
|
|
|
|
if (!bimEngine || !bimEngine.engine2d || !bimEngine.engine2d.isInitialized()) {
|
|
addLog('请先初始化 2D 引擎', 'warn');
|
|
return;
|
|
}
|
|
|
|
updateStatus('正在切换图纸...', 'loading');
|
|
addLog('切换图纸: ' + newUrl);
|
|
|
|
try {
|
|
bimEngine.engine2d.loadDrawing(newUrl).then(function() {
|
|
addLog('图纸切换完成', 'success');
|
|
}).catch(function(err) {
|
|
addLog('图纸切换失败: ' + err.message, 'error');
|
|
updateStatus('切换失败', 'error');
|
|
});
|
|
} catch (error) {
|
|
addLog('切换图纸错误: ' + error.message, 'error');
|
|
updateStatus('切换错误', 'error');
|
|
}
|
|
}
|
|
|
|
// ==================== 视图控制 ====================
|
|
function resetView() {
|
|
if (!bimEngine || !bimEngine.engine2d) return;
|
|
bimEngine.engine2d.resetView();
|
|
addLog('视图已重置');
|
|
}
|
|
|
|
function fitToView() {
|
|
if (!bimEngine || !bimEngine.engine2d) return;
|
|
bimEngine.engine2d.fitToView();
|
|
addLog('视图已适应');
|
|
}
|
|
|
|
function zoomIn() {
|
|
if (!bimEngine || !bimEngine.engine2d) return;
|
|
var comp = bimEngine.engine2d.getEngine2dComponent();
|
|
if (comp) {
|
|
var currentZoom = comp.getZoom();
|
|
comp.setZoom(currentZoom * 1.2);
|
|
addLog('放大至: ' + (currentZoom * 1.2).toFixed(2));
|
|
}
|
|
}
|
|
|
|
function zoomOut() {
|
|
if (!bimEngine || !bimEngine.engine2d) return;
|
|
var comp = bimEngine.engine2d.getEngine2dComponent();
|
|
if (comp) {
|
|
var currentZoom = comp.getZoom();
|
|
comp.setZoom(currentZoom / 1.2);
|
|
addLog('缩小至: ' + (currentZoom / 1.2).toFixed(2));
|
|
}
|
|
}
|
|
|
|
// ==================== 图层控制 ====================
|
|
function refreshLayers() {
|
|
if (!bimEngine || !bimEngine.engine2d) return;
|
|
|
|
var layers = bimEngine.engine2d.getLayers();
|
|
var listEl = document.getElementById('layer-list');
|
|
|
|
if (!layers || layers.length === 0) {
|
|
listEl.innerHTML = '<div style="color: #aaa; font-size: 0.8rem; padding: 8px;">暂无图层数据</div>';
|
|
addLog('未获取到图层数据', 'warn');
|
|
return;
|
|
}
|
|
|
|
listEl.innerHTML = '';
|
|
addLog('获取到 ' + layers.length + ' 个图层', 'success');
|
|
|
|
layers.forEach(function(layer, index) {
|
|
var item = document.createElement('div');
|
|
item.className = 'layer-item';
|
|
|
|
var checkbox = document.createElement('input');
|
|
checkbox.type = 'checkbox';
|
|
checkbox.checked = layer.visible !== false;
|
|
checkbox.id = 'layer-' + index;
|
|
checkbox.addEventListener('change', function() {
|
|
toggleLayer(layer.name, this.checked);
|
|
});
|
|
|
|
var label = document.createElement('label');
|
|
label.htmlFor = 'layer-' + index;
|
|
label.textContent = layer.name;
|
|
label.title = layer.name;
|
|
|
|
item.appendChild(checkbox);
|
|
item.appendChild(label);
|
|
listEl.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function toggleLayer(name, visible) {
|
|
if (!bimEngine || !bimEngine.engine2d) return;
|
|
bimEngine.engine2d.setLayerVisible(name, visible);
|
|
addLog('图层 "' + name + '" ' + (visible ? '显示' : '隐藏'));
|
|
}
|
|
|
|
function showAllLayers() {
|
|
if (!bimEngine || !bimEngine.engine2d) return;
|
|
var layers = bimEngine.engine2d.getLayers();
|
|
if (layers) {
|
|
layers.forEach(function(layer) {
|
|
bimEngine.engine2d.setLayerVisible(layer.name, true);
|
|
});
|
|
refreshLayers();
|
|
addLog('已显示所有图层', 'success');
|
|
}
|
|
}
|
|
|
|
function hideAllLayers() {
|
|
if (!bimEngine || !bimEngine.engine2d) return;
|
|
var layers = bimEngine.engine2d.getLayers();
|
|
if (layers) {
|
|
layers.forEach(function(layer) {
|
|
bimEngine.engine2d.setLayerVisible(layer.name, false);
|
|
});
|
|
refreshLayers();
|
|
addLog('已隐藏所有图层', 'warn');
|
|
}
|
|
}
|
|
|
|
// ==================== 主题切换 ====================
|
|
function setTheme(theme) {
|
|
if (bimEngine) {
|
|
bimEngine.setTheme(theme);
|
|
addLog('主题已切换为: ' + theme);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|