94 lines
3.7 KiB
HTML
94 lines
3.7 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>数据资产入表路径图</title>
|
|
<!-- 基础样式 -->
|
|
<link rel="stylesheet" href="../../../assets/css/style.css">
|
|
<!-- 组件样式 -->
|
|
<link rel="stylesheet" href="../../../assets/css/components/header.css">
|
|
<link rel="stylesheet" href="../../../assets/css/components/footer.css">
|
|
<!-- 页面特定样式 -->
|
|
<link rel="stylesheet" href="../../../assets/css/pages/mods/mod4-ops/data-path-tree.css">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
|
<!-- D3.js -->
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- 引入header组件 -->
|
|
<div id="header"></div>
|
|
|
|
<!-- 主要内容 -->
|
|
<div class="main-content">
|
|
<div class="container">
|
|
<div class="tech-tree-layout">
|
|
<div class="tech-tree-container">
|
|
<div class="tech-tree-header">
|
|
<h1>数据资产入表路径图</h1>
|
|
<div class="tech-tree-controls">
|
|
<button id="zoomIn">放大</button>
|
|
<button id="zoomOut">缩小</button>
|
|
<button id="resetView">重置视图</button>
|
|
</div>
|
|
</div>
|
|
<div id="techTree" class="tech-tree"></div>
|
|
</div>
|
|
|
|
<!-- 右侧详情面板 -->
|
|
<div class="detail-panel">
|
|
<div class="detail-content">
|
|
<div class="detail-header">
|
|
<h2 id="detailTitle">选择一个节点查看详情</h2>
|
|
</div>
|
|
<div class="detail-body">
|
|
<div class="info-section">
|
|
<h3>描述</h3>
|
|
<p id="detailDescription">点击左侧科技树的节点，查看详细信息。</p>
|
|
</div>
|
|
<div class="info-section">
|
|
<h3>关键步骤</h3>
|
|
<ul id="detailSteps"></ul>
|
|
</div>
|
|
<div class="info-section">
|
|
<h3>注意事项</h3>
|
|
<ul id="detailNotes"></ul>
|
|
</div>
|
|
<div class="info-section">
|
|
<h3>相关文档</h3>
|
|
<ul id="detailDocs"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 引入footer组件 -->
|
|
<div id="footer"></div>
|
|
|
|
<!-- 组件加载脚本 -->
|
|
<script>
|
|
// 加载header组件
|
|
fetch('/components/header/header.html')
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
document.getElementById('header').innerHTML = data;
|
|
})
|
|
.catch(error => console.error('Error loading header:', error));
|
|
|
|
// 加载footer组件
|
|
fetch('/components/footer/footer.html')
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
document.getElementById('footer').innerHTML = data;
|
|
})
|
|
.catch(error => console.error('Error loading footer:', error));
|
|
</script>
|
|
|
|
<!-- 页面特定脚本 -->
|
|
<script src="../../../assets/js/pages/mods/mod4-ops/data-path-tree.js"></script>
|
|
</body>
|
|
</html> |