From 29772c7ad776b27ec854a79b0892addd70dd4fd0 Mon Sep 17 00:00:00 2001
From: chentianrui <chentianrui@noreply.localhost>
Date: Sat, 2 Aug 2025 14:53:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20templates/html=5Ftemplate.?=
 =?UTF-8?q?html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/html_template.html | 1982 ++++++++++++++++++++++++++++++++++
 1 file changed, 1982 insertions(+)
 create mode 100644 templates/html_template.html
diff --git a/templates/html_template.html b/templates/html_template.html
new file mode 100644
index 0000000..101b17e
--- /dev/null
+++ b/templates/html_template.html
@@ -0,0 +1,1982 @@
+<!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="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.12/css/layui.min.css">
+    <style>
+        body {
+            background: #f0f2f5;
+            font-family: 'Microsoft YaHei', sans-serif;
+        }
+
+        .kg-container {
+            height: 100vh;
+            display: flex;
+            overflow: hidden;
+        }
+
+        .kg-sidebar {
+            width: 350px;
+            background: #fff;
+            border-right: 1px solid #e6e6e6;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+            min-width: 200px;
+            max-width: 600px;
+        }
+
+        .kg-sidebar-header {
+            padding: 15px 20px;
+            background: linear-gradient(135deg, #1E9FFF, #5FB878);
+            color: white;
+            font-size: 16px;
+            font-weight: bold;
+            text-align: center;
+        }
+
+        .kg-resizer {
+            width: 5px;
+            background: #e6e6e6;
+            cursor: col-resize;
+            position: relative;
+            transition: background-color 0.2s;
+        }
+
+        .kg-resizer:hover {
+            background: #1E9FFF;
+        }
+
+        .kg-main {
+            flex: 1;
+            padding: 15px;
+            overflow-y: auto;
+            background: #f0f2f5;
+        }
+
+        /* 自定义滚动条 */
+        .kg-sidebar::-webkit-scrollbar,
+        .kg-main::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .kg-sidebar::-webkit-scrollbar-track,
+        .kg-main::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+
+        .kg-sidebar::-webkit-scrollbar-thumb,
+        .kg-main::-webkit-scrollbar-thumb {
+            background: #c1c1c1;
+            border-radius: 3px;
+        }
+
+        .kg-sidebar::-webkit-scrollbar-thumb:hover,
+        .kg-main::-webkit-scrollbar-thumb:hover {
+            background: #a8a8a8;
+        }
+        
+        /* 调整表格样式 */
+        .layui-table-cell {
+            height: auto;
+            line-height: 28px;
+        }
+        
+        /* 节点头部样式 */
+        .node-header {
+            background: linear-gradient(135deg, #1E9FFF, #5FB878);
+            color: white;
+            padding: 20px;
+            border-radius: 6px;
+            margin-bottom: 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .node-header-left {
+            flex: 1;
+        }
+
+        .node-header-right {
+            margin-left: 20px;
+        }
+
+        /* 树节点选中状态 */
+        .layui-tree-entry.selected {
+            background-color: #e6f7ff !important;
+            border-left: 3px solid #1E9FFF;
+        }
+
+        .layui-tree-entry.selected .layui-tree-txt {
+            color: #1E9FFF !important;
+            font-weight: bold;
+        }
+
+        /* 工具条样式 */
+        .table-toolbar {
+            margin-bottom: 10px;
+            padding: 10px;
+            background: #fff;
+            border-radius: 4px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        .column-filter {
+            display: inline-block;
+            margin-right: 10px;
+        }
+
+        .column-filter .layui-form-checkbox {
+            margin-right: 5px;
+        }
+
+        .project-division-tree {
+            width: 100%;
+            overflow: auto;
+            margin-top: 10px;
+        }
+
+        .project-division-table {
+            width: 100%;
+            border-collapse: collapse;
+            table-layout: fixed;
+        }
+
+        .project-division-table tr {
+            border-bottom: 1px solid #e6e6e6;
+        }
+
+        .project-division-table td {
+            padding: 8px;
+            vertical-align: middle;
+        }
+
+        .tree-node {
+            width: 60%;
+            text-align: left;
+        }
+
+        .tree-price {
+            width: 20%;
+            text-align: right;
+        }
+
+        .tree-indent {
+            display: flex;
+            align-items: center;
+        }
+
+        .tree-toggle {
+            cursor: pointer;
+            margin-right: 5px;
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            text-align: center;
+            line-height: 16px;
+        }
+
+        .tree-row:hover {
+            background-color: #f2f2f2;
+        }
+
+        .tree-children {
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div class="kg-container">
+        <!-- 左侧边栏 -->
+        <div class="kg-sidebar">
+            <div class="kg-sidebar-header">
+                <i class="layui-icon layui-icon-tree"></i>
+                知识图谱目录
+            </div>
+            <!-- 左侧树形菜单容器 -->
+            <div id="left-tree" style="padding: 10px; overflow-y: auto; flex: 1;"></div>
+        </div>
+
+        <!-- 拖拽分隔条 -->
+        <div class="kg-resizer" id="resizer"></div>
+
+        <!-- 右侧主内容 -->
+        <div class="kg-main">
+            <!-- 欢迎页 -->
+            <div id="welcome-container" class="layui-text" style="text-align: center; margin-top: 100px;">
+                <i class="layui-icon layui-icon-tree" style="font-size: 64px; color: #d2d2d2;"></i>
+                    <h2>欢迎使用知识图谱可视化系统</h2>
+                    <p>点击左侧树状结构中的任意节点，查看详细信息</p>
+            </div>
+            
+            <!-- 节点详情容器 -->
+            <div id="node-details" style="display: none;">
+                <!-- 节点头部信息 -->
+                <div class="node-header">
+                    <div class="node-header-left">
+                        <h2 id="node-title"></h2>
+                        <p id="node-id"></p>
+                    </div>
+                    <div class="node-header-right">
+                        <button class="layui-btn layui-btn-normal" id="cost-preview-btn">
+                            <i class="layui-icon layui-icon-rmb"></i> 费用预览
+                        </button>
+                        <button class="layui-btn layui-btn-normal" id="export-excel-btn" style="margin-left: 10px;">
+                            <i class="layui-icon layui-icon-download-circle"></i> 导出工程Excel
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- 树状结构容器 -->
+                <div class="layui-card">
+                    <div class="layui-card-body">
+                        <div id="tree-structure-container"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.12/layui.min.js"></script>
+    <script>
+        layui.use(['layer', 'element', 'table', 'treeTable', 'tree', 'util', 'form'], function() {
+            const layer = layui.layer;
+            const element = layui.element;
+            const table = layui.table;
+            const treeTable = layui.treeTable;
+            const tree = layui.tree;
+            const util = layui.util;
+            const form = layui.form;
+
+            class KnowledgeGraphUI {
+                constructor() {
+                    this.selectedNodeId = null;
+                    this.costPreviewData = new Map(); // 存储费用预览数据
+                    this.selectedTreeNode = null; // 存储当前选中的树节点DOM
+                    this.projectPropertyChildrenData = new Map(); // 存储工程属性节点的子节点数据
+                    this.init();
+                    this.initResizer();
+                    this.initColumnConfig();
+                    this.initToolbar();
+                }
+
+                // 初始化列配置
+                initColumnConfig() {
+                    // 不同节点类型的列配置
+                    this.columnConfigs = {
+                        'default': {
+                            children: [
+                                {field: 'title', title: '节点类型', minWidth: 200, show: true},
+                                {field: 'name', title: '名称', minWidth: 150, show: true},
+                                {field: 'guid', title: 'GUID', minWidth: 280, show: true},
+                                {field: 'type', title: '类型', minWidth: 100, show: true}
+                            ],
+                            costPreview: [
+                                {field: 'name', title: '费用项名称', minWidth: 200, show: true},
+                                {field: 'amount', title: '数量', width: 100, show: true},
+                                {field: 'unit', title: '单位', width: 80, show: true},
+                                {field: 'unitPrice', title: '单价', width: 120, show: true},
+                                {field: 'totalPrice', title: '合计', width: 120, show: true}
+                            ]
+                        },
+                        'ProjectDivision': {
+                            children: [
+                                {field: 'title', title: '节点类型', minWidth: 200, show: true},
+                                {field: 'name', title: '项目名称', minWidth: 200, show: true},
+                                {field: 'guid', title: 'GUID', minWidth: 280, show: false},
+                                {field: 'code', title: '项目编码', minWidth: 120, show: true},
+                                {field: 'description', title: '描述', minWidth: 300, show: true}
+                            ]
+                        },
+                        'ProjectDivisionSet': {
+                            children: [
+                                {field: 'name', title: '项目名称', minWidth: 300, show: true},
+                                {field: 'totalPriceWithTax', title: '合价含税', width: 150, show: true},
+                                {field: 'totalPriceWithoutTax', title: '合价不含税', width: 150, show: true}
+                            ]
+                        },
+                        'Equipment': {
+                            children: [
+                                {field: 'title', title: '设备类型', minWidth: 150, show: true},
+                                {field: 'name', title: '设备名称', minWidth: 200, show: true},
+                                {field: 'model', title: '型号', minWidth: 150, show: true},
+                                {field: 'specification', title: '规格', minWidth: 200, show: true},
+                                {field: 'manufacturer', title: '厂家', minWidth: 150, show: true}
+                            ]
+                        },
+                        'MaterialandmachineCostItem': {
+                            costPreview: [
+                                {field: 'name', title: '费用项名称', minWidth: 200, show: true},
+                                {field: 'type', title: '类型', width: 100, show: true},
+                                {field: 'supply', title: '供货方', width: 120, show: true},
+                                {field: 'code', title: '编码', width: 120, show: true},
+                                {field: 'unit', title: '单位', width: 80, show: true},
+                                {field: 'amount', title: '数量', width: 100, show: true},
+                                {field: 'budgetPrice', title: '预算价', width: 120, show: true},
+                                {field: 'marketPrice', title: '市场价', width: 120, show: true},
+                                {field: 'totalBudget', title: '预算合价', width: 120, show: true},
+                                {field: 'totalMarket', title: '市场合价', width: 120, show: true},
+                                {field: 'priceDiff', title: '价差', width: 120, show: true}
+                            ]
+                        },
+                        'CostItem': {
+                            costPreview: [
+                                {field: 'name', title: '费用项名称', minWidth: 200, show: true},
+                                {field: 'cost', title: '费用', width: 120, show: true},
+                                {field: 'unique_id', title: '唯一ID', width: 280, show: false},
+                                {field: 'id', title: 'ID', width: 100, show: false}
+                            ]
+                        }
+                    };
+                }
+
+                // 初始化工具条事件
+                initToolbar() {
+                    // 子节点列设置
+                    document.getElementById('column-filter-btn').addEventListener('click', () => {
+                        this.toggleColumnFilters('children');
+                    });
+
+                    // 费用预览列设置
+                    document.getElementById('cost-column-filter-btn').addEventListener('click', () => {
+                        this.toggleColumnFilters('costPreview');
+                    });
+
+                    // 刷新按钮
+                    document.getElementById('refresh-btn').addEventListener('click', () => {
+                        if (this.selectedNodeId) {
+                            this.selectNode(this.selectedNodeId, this.selectedTreeNode);
+                        }
+                    });
+
+                    document.getElementById('cost-refresh-btn').addEventListener('click', () => {
+                        if (this.selectedNodeId && this.costPreviewData.has(this.selectedNodeId)) {
+                            this.renderCostPreviewData(this.costPreviewData.get(this.selectedNodeId));
+                        }
+                    });
+                    
+                    // 费用预览按钮
+                    document.getElementById('cost-item-btn').addEventListener('click', () => {
+                        if (this.selectedNodeId && this.costPreviewData.has(this.selectedNodeId)) {
+                            // 更新按钮状态
+                            document.getElementById('cost-item-btn').classList.add('layui-btn-disabled');
+                            document.getElementById('material-machine-btn').classList.remove('layui-btn-disabled');
+                            
+                            // 渲染费用项数据
+                            this.renderCostPreviewTable(this.costPreviewData.get(this.selectedNodeId), 'CostItem');
+                        }
+                    });
+                    
+                    // 材机列表按钮
+                    document.getElementById('material-machine-btn').addEventListener('click', () => {
+                        if (this.selectedNodeId && this.costPreviewData.has(this.selectedNodeId)) {
+                            // 更新按钮状态
+                            document.getElementById('material-machine-btn').classList.add('layui-btn-disabled');
+                            document.getElementById('cost-item-btn').classList.remove('layui-btn-disabled');
+                            
+                            // 渲染材机列表数据
+                            this.renderCostPreviewTable(this.costPreviewData.get(this.selectedNodeId), 'MaterialandmachineCostItem');
+                        }
+                    });
+                }
+
+                // 切换列过滤器显示
+                toggleColumnFilters(type) {
+                    const filterId = type === 'children' ? 'column-filters' : 'cost-column-filters';
+                    const filterDiv = document.getElementById(filterId);
+                    
+                    if (filterDiv.style.display === 'none') {
+                        this.renderColumnFilters(type);
+                        filterDiv.style.display = 'block';
+                    } else {
+                        filterDiv.style.display = 'none';
+                    }
+                }
+
+                // 渲染列过滤器
+                renderColumnFilters(type) {
+                    const nodeType = this.getCurrentNodeType();
+                    const config = this.columnConfigs[nodeType] || this.columnConfigs['default'];
+                    const columns = config[type] || [];
+                    
+                    const filterId = type === 'children' ? 'column-filters' : 'cost-column-filters';
+                    const filterDiv = document.getElementById(filterId);
+                    
+                    let html = '<div class="layui-form">';
+                    columns.forEach((col, index) => {
+                        const checked = col.show ? 'checked' : '';
+                        html += `
+                            <div class="column-filter">
+                                <input type="checkbox" name="col_${type}_${index}" title="${col.title}" ${checked} lay-filter="column-filter">
+                            </div>
+                        `;
+                    });
+                    html += '</div>';
+                    
+                    filterDiv.innerHTML = html;
+                    form.render('checkbox');
+                    
+                    // 监听复选框变化
+                    form.on('checkbox(column-filter)', (data) => {
+                        const match = data.elem.name.match(/col_(\w+)_(\d+)/);
+                        if (match) {
+                            const tableType = match[1];
+                            const colIndex = parseInt(match[2]);
+                            const isChecked = data.elem.checked;
+                            
+                            this.updateColumnVisibility(tableType, colIndex, isChecked);
+                        }
+                    });
+                }
+
+                // 更新列可见性
+                updateColumnVisibility(type, colIndex, isVisible) {
+                    const nodeType = this.getCurrentNodeType();
+                    const config = this.columnConfigs[nodeType] || this.columnConfigs['default'];
+                    
+                    if (config[type] && config[type][colIndex]) {
+                        config[type][colIndex].show = isVisible;
+                        
+                        // 重新渲染表格
+                        if (type === 'children') {
+                            this.renderChildrenTreeTable(this.currentChildrenData || []);
+                        } else if (type === 'costPreview') {
+                            // 使用当前选中的节点ID获取费用数据
+                            const costData = this.costPreviewData.get(this.selectedNodeId);
+                            if (costData) {
+                                // 检查当前显示的是哪种类型的费用数据
+                                const costItemBtn = document.getElementById('cost-item-btn');
+                                const materialMachineBtn = document.getElementById('material-machine-btn');
+                                
+                                if (costItemBtn.classList.contains('layui-btn-disabled')) {
+                                    this.renderCostPreviewTable(costData, 'CostItem');
+                                } else if (materialMachineBtn.classList.contains('layui-btn-disabled')) {
+                                    this.renderCostPreviewTable(costData, 'MaterialandmachineCostItem');
+                                } else {
+                                    this.renderCostPreviewTable(costData);
+                                }
+                            } else {
+                                this.renderCostPreviewTable(null);
+                            }
+                        }
+                    }
+                }
+
+                // 获取当前节点类型
+                getCurrentNodeType() {
+                    // 检查当前选中节点的类型
+                    if (this.selectedNodeId) {
+                        const node = this.allNodes ? this.allNodes[this.selectedNodeId] : null;
+                        if (node) {
+                            // 根据节点类型返回对应的配置
+                            if (node.type === 'ProjectDivisionSet' || 
+                                (node.name && (node.name.includes('项目划分') || node.name.includes('工程量')))
+                            ) {
+                                return 'ProjectDivisionSet';
+                            } else if (node.type === 'ProjectPropertySet' || 
+                                (node.name && node.name === '工程属性')
+                            ) {
+                                return 'ProjectPropertySet';
+                            } else if (node.type === 'Equipment') {
+                                return 'Equipment';
+                            } else if (node.type === 'ProjectDivision') {
+                                return 'ProjectDivision';
+                            }
+                        }
+                    }
+                    // 默认返回default配置
+                    return 'default';
+                }
+
+                async init() {
+                    await this.loadTree();
+                }
+
+                // 初始化拖拽功能
+                initResizer() {
+                    const resizer = document.getElementById('resizer');
+                    const sidebar = document.querySelector('.kg-sidebar');
+                    let isResizing = false;
+
+                    resizer.addEventListener('mousedown', (e) => {
+                        isResizing = true;
+                        document.addEventListener('mousemove', handleMouseMove);
+                        document.addEventListener('mouseup', handleMouseUp);
+                        e.preventDefault();
+                    });
+
+                    function handleMouseMove(e) {
+                        if (!isResizing) return;
+                        const newWidth = e.clientX;
+                        if (newWidth >= 200 && newWidth <= 600) {
+                            sidebar.style.width = newWidth + 'px';
+                        }
+                    }
+
+                    function handleMouseUp() {
+                        isResizing = false;
+                        document.removeEventListener('mousemove', handleMouseMove);
+                        document.removeEventListener('mouseup', handleMouseUp);
+                    }
+                }
+
+                async loadTree() {
+                    try {
+                        // 显示加载层
+                        const loadIndex = layer.load(2);
+                        
+                        const response = await fetch('/api/tree');
+                        const data = await response.json();
+                        
+                        // 关闭加载层
+                        layer.close(loadIndex);
+                        
+                        if (data.error) {
+                            layer.msg('加载失败: ' + data.error, {icon: 2});
+                            return;
+                        }
+
+                        // 存储所有节点数据，用于父节点查找
+                        this.allNodes = data.all_nodes;
+                        
+                        // 预处理费用预览数据
+                        this.processCostPreviewData(data.roots);
+
+                        this.renderLayuiTree(data.roots);
+                    } catch (error) {
+                        layer.msg('网络错误: ' + error.message, {icon: 2});
+                    }
+                }
+
+                // 预处理费用预览数据
+                processCostPreviewData(nodes) {
+                    nodes.forEach(node => {
+                        if (node.children) {
+                            // 查找费用预览节点
+                            const costPreviewNode = node.children.find(child => 
+                                child.name && child.name.includes('费用预览')
+                            );
+                            
+                            if (costPreviewNode && costPreviewNode.children) {
+                                // 将费用预览数据存储到当前节点
+                                this.costPreviewData.set(node.id, costPreviewNode.children);
+                            }
+                            
+                            // 递归处理子节点
+                            this.processCostPreviewData(node.children);
+                        }
+                    });
+                }
+
+                renderLayuiTree(nodes) {
+                    // 将API返回的数据转换为Layui tree组件所需的格式
+                    const treeData = this.formatTreeData(nodes, 1);
+                    
+                    // 渲染树组件
+                    tree.render({
+                        elem: '#left-tree',
+                        data: treeData,
+                        showLine: true,
+                        click: (obj) => {
+                            this.selectNode(obj.data.id, obj.elem);
+                        }
+                    });
+                }
+                
+                formatTreeData(nodes, level = 1) {
+                    return nodes.map(node => {
+                        // 检查是否是费用预览节点
+                        if (node.name && node.name.includes('费用预览')) {
+                            // 将费用预览数据存储到父节点
+                            if (node.children) {
+                                // 找到父节点ID（这里需要根据实际数据结构调整）
+                                const parentId = this.findParentNodeId(node.id);
+                                if (parentId) {
+                                    this.costPreviewData.set(parentId, node.children);
+                                }
+                            }
+                            return null; // 不显示费用预览节点
+                        }
+
+                        const item = {
+                            title: node.name || node.label, // 只显示名称
+                            id: node.id,
+                            spread: level <= 3 // 自动展开到第三层级
+                        };
+
+                        // 检查是否是工程属性节点
+                        const isProjectPropertyNode = node.type === 'ProjectPropertySet' || (node.name && node.name === '工程属性');
+                        // 检查是否是项目划分集节点
+                        const isProjectDivisionSet = node.type === 'ProjectDivisionSet' || (node.name && (node.name.includes('项目划分') || node.name.includes('工程量')));
+
+                        if (node.children && node.children.length > 0) {
+                            // 如果是工程属性节点，不在树中显示其子节点，而是存储起来
+                            if (isProjectPropertyNode) {
+                                // 存储工程属性节点的子节点，以便在右侧显示
+                                this.projectPropertyChildrenData.set(node.id, node.children);
+                                
+                                // 检查是否有费用预览子节点
+                                const costPreviewChild = node.children.find(child => 
+                                    child.name && child.name.includes('费用预览')
+                                );
+                                if (costPreviewChild && costPreviewChild.children) {
+                                    this.costPreviewData.set(node.id, costPreviewChild.children);
+                                }
+                            } else if (isProjectDivisionSet) {
+                                // 对于项目划分集节点，正常处理子节点
+                                const filteredChildren = this.formatTreeData(node.children, level + 1).filter(child => child !== null);
+                                if (filteredChildren.length > 0) {
+                                    item.children = filteredChildren;
+                                }
+                                
+                                // 检查是否有费用预览子节点
+                                const costPreviewChild = node.children.find(child => 
+                                    child.name && child.name.includes('费用预览')
+                                );
+                                if (costPreviewChild && costPreviewChild.children) {
+                                    this.costPreviewData.set(node.id, costPreviewChild.children);
+                                }
+                            } else {
+                                // 对于非工程属性节点，正常处理子节点
+                                const filteredChildren = this.formatTreeData(node.children, level + 1).filter(child => child !== null);
+                                if (filteredChildren.length > 0) {
+                                    item.children = filteredChildren;
+                                }
+                                
+                                // 检查是否有费用预览子节点
+                                const costPreviewChild = node.children.find(child => 
+                                    child.name && child.name.includes('费用预览')
+                                );
+                                if (costPreviewChild && costPreviewChild.children) {
+                                    this.costPreviewData.set(node.id, costPreviewChild.children);
+                                }
+                            }
+                        }
+                        
+                        return item;
+                    }).filter(item => item !== null);
+                }
+
+                // 查找父节点ID的辅助方法
+                findParentNodeId(nodeId) {
+                    // 遍历所有节点，查找包含该节点作为子节点的父节点
+                    for (const [parentId, node] of Object.entries(this.allNodes || {})) {
+                        if (node.children && node.children.some(child => child.id === nodeId)) {
+                            return parseInt(parentId);
+                        }
+                    }
+                    return null;
+                }
+
+                async selectNode(nodeId, elem) {
+                    this.selectedNodeId = nodeId;
+                    this.selectedTreeNode = elem;
+
+                    // 更新选中状态
+                    this.updateSelectedState(elem);
+
+                    // 显示加载层
+                    const loadIndex = layer.load(2);
+
+                    try {
+                        // 获取节点基本信息
+                        const response = await fetch(`/api/node/${nodeId}`);
+                        const data = await response.json();
+                        
+                        if (data.error) {
+                            layer.msg('加载失败: ' + data.error, {icon: 2});
+                            layer.close(loadIndex);
+                            return;
+                        }
+                        
+                        // 获取节点费用信息
+                        const costResponse = await fetch(`/api/node/${nodeId}/cost`);
+                        const costData = await costResponse.json();
+                        
+                        // 存储费用数据
+                        if (!costData.error) {
+                            this.costPreviewData.set(nodeId, costData);
+                        }
+
+                        // 检查是否是工程属性节点，如果是则使用已存储的子节点数据
+                        const isProjectPropertyNode = 
+                            data.node && data.node.labels && 
+                            data.node.labels.includes('ProjectPropertySet');
+                        
+                        if (isProjectPropertyNode && this.projectPropertyChildrenData.has(nodeId)) {
+                            // 使用预先存储的工程属性子节点数据
+                            const storedChildren = this.projectPropertyChildrenData.get(nodeId);
+                            // 将存储的子节点数据转换为API返回的格式
+                            const formattedChildren = storedChildren.map(child => {
+                                return {
+                                    id: child.id,
+                                    labels: [child.type],
+                                    properties: {
+                                        name: child.name,
+                                        ...child
+                                    }
+                                };
+                            });
+                            
+                            // 合并API返回的子节点和存储的子节点
+                            const allChildren = [...(data.children || []), ...formattedChildren];
+                            
+                            // 递归获取所有子节点
+                            const fullChildren = await this.getAllChildrenRecursively(allChildren);
+                            
+                            // 关闭加载层
+                            layer.close(loadIndex);
+                            
+                            this.renderNodeDetails(data.node, fullChildren);
+                        } else {
+                            // 对于非工程属性节点，递归获取所有子节点
+                            const fullChildren = await this.getAllChildrenRecursively(data.children || []);
+                            
+                            // 关闭加载层
+                            layer.close(loadIndex);
+                            
+                            this.renderNodeDetails(data.node, fullChildren);
+                        }
+                    } catch (error) {
+                        layer.close(loadIndex);
+                        layer.msg('网络错误: ' + error.message, {icon: 2});
+                    }
+                }
+
+                updateSelectedState(elem) {
+                    // 移除所有选中状态
+                    document.querySelectorAll('.layui-tree-entry.selected').forEach(entry => {
+                        entry.classList.remove('selected');
+                    });
+                    
+                    // 添加当前选中状态
+                    if (elem && elem[0]) {
+                        elem[0].classList.add('selected');
+                    }
+                }
+
+                renderNodeDetails(node, children) {
+                    // 隐藏欢迎页，显示节点详情
+                    document.getElementById('welcome-container').style.display = 'none';
+                    document.getElementById('node-details').style.display = 'block';
+                    
+                    // 设置节点标题和ID
+                    document.getElementById('node-title').innerText = node.labels ? node.labels.join(', ') : '节点';
+                    document.getElementById('node-id').innerHTML = `<i class="layui-icon layui-icon-key"></i> 节点ID: ${node.id}`;
+                    
+                    // 存储当前子节点数据
+                    this.currentChildrenData = children || [];
+                    
+                    // 渲染树状结构
+                    this.renderTreeStructure(node, this.currentChildrenData);
+                    
+                    // 添加费用预览按钮点击事件
+                    document.getElementById('cost-preview-btn').addEventListener('click', () => {
+                        this.showCostPreviewDialog(node.id);
+                    });
+                    
+                    // 添加导出Excel按钮点击事件
+                    document.getElementById('export-excel-btn').addEventListener('click', () => {
+                        this.exportToExcel(node.id);
+                    });
+                }
+                
+                renderTreeStructure(node, children) {
+                    // 获取表格容器
+                    const container = document.getElementById('tree-structure-container');
+                    
+                    // 清空容器
+                    container.innerHTML = '';
+                    
+                    // 检查是否是项目划分集节点或其子节点
+                    const nodeType = this.getCurrentNodeType();
+                    let isProjectDivisionSet = nodeType === 'ProjectDivisionSet';
+                    
+                    // 检查当前节点是否为项目划分集的子节点
+                    if (!isProjectDivisionSet && this.selectedNodeId) {
+                        // 尝试查找父节点
+                        const parentId = this.findParentNodeId(this.selectedNodeId);
+                        if (parentId) {
+                            const parentNode = this.allNodes[parentId];
+                            if (parentNode && (parentNode.type === 'ProjectDivisionSet' || 
+                                (parentNode.name && (parentNode.name.includes('项目划分') || parentNode.name.includes('工程量'))))) {
+                                isProjectDivisionSet = true;
+                            }
+                        }
+                    }
+                    
+                    // 准备树表格数据
+                    const treeData = this.buildTreeStructureData(node, children);
+                    
+                    // 创建树状表格容器
+                    const treeContainer = document.createElement('div');
+                    treeContainer.className = 'project-division-tree';
+                    
+                    // 创建表格
+                    const table = document.createElement('table');
+                    table.className = 'project-division-table';
+                    
+                    // 添加表格内容
+                    const tableBody = document.createElement('tbody');
+                    tableBody.innerHTML = this.buildTreeStructureHTML(treeData);
+                    table.appendChild(tableBody);
+                    
+                    // 添加到容器
+                    treeContainer.appendChild(table);
+                    container.appendChild(treeContainer);
+                    
+                    // 添加样式
+                    this.addTreeStructureStyles();
+                    
+                    // 添加展开/折叠事件监听
+                    this.addTreeToggleListeners();
+                }
+                
+                showCostPreviewDialog(nodeId) {
+                    // 获取费用预览数据
+                    const costData = this.costPreviewData.get(parseInt(nodeId));
+                    
+                    if (!costData) {
+                        layer.msg('该节点没有费用预览数据');
+                        return;
+                    }
+                    
+                    // 创建弹窗
+                    layer.open({
+                        type: 1,
+                        title: '费用预览',
+                        area: ['800px', '600px'],
+                        content: '<div class="layui-tab layui-tab-card">' +
+                            '<ul class="layui-tab-title">' +
+                            '<li class="layui-this">费用项</li>' +
+                            '<li>材机列表</li>' +
+                            '</ul>' +
+                            '<div class="layui-tab-content">' +
+                            '<div class="layui-tab-item layui-show">' +
+                            '<div id="cost-preview-container"></div>' +
+                            '</div>' +
+                            '<div class="layui-tab-item">' +
+                            '<div id="material-machine-container"></div>' +
+                            '</div>' +
+                            '</div>' +
+                            '</div>',
+                        success: () => {
+                            // 渲染费用预览表格
+                            this.renderCostPreviewTable(costData, 'CostItem', 'cost-preview-container');
+                            this.renderCostPreviewTable(costData, 'MaterialandmachineCostItem', 'material-machine-container');
+                            
+                            // 初始化Tab
+                            element.render('tab');
+                        }
+                    });
+                }
+                
+                renderPropertyTable(node) {
+                    const propertyData = [];
+                    
+                    if (node.properties && Object.keys(node.properties).length > 0) {
+                        Object.entries(node.properties).forEach(([key, value]) => {
+                            propertyData.push({
+                                key: key,
+                                value: this.formatValue(value)
+                            });
+                        });
+                    }
+                    
+                    // 使用Layui表格组件渲染属性
+                    table.render({
+                        elem: '#property-table-container',
+                        data: propertyData,
+                        cols: [[
+                            {field: 'key', title: '属性名', width: '30%', sort: true},
+                            {field: 'value', title: '属性值', width: '70%'}
+                        ]],
+                        skin: 'line',
+                        even: true,
+                        text: {
+                            none: '该节点没有属性'
+                        }
+                    });
+                }
+                
+                renderChildrenTreeTable(children) {
+                    // 获取当前节点类型的列配置
+                    const nodeType = this.getCurrentNodeType();
+                    
+                    // 检查是否是项目划分集节点或其子节点
+                    let isProjectDivisionSet = nodeType === 'ProjectDivisionSet';
+                    
+                    // 检查当前节点是否为项目划分集的子节点
+                    if (!isProjectDivisionSet && this.selectedNodeId) {
+                        // 尝试查找父节点
+                        const parentId = this.findParentNodeId(this.selectedNodeId);
+                        if (parentId) {
+                            const parentNode = this.allNodes[parentId];
+                            if (parentNode && (parentNode.type === 'ProjectDivisionSet' || 
+                                (parentNode.name && (parentNode.name.includes('项目划分') || parentNode.name.includes('工程量'))))) {
+                                isProjectDivisionSet = true;
+                            }
+                        }
+                    }
+                    
+                    // 获取适用的列配置
+                    const config = isProjectDivisionSet ? 
+                        this.columnConfigs['ProjectDivisionSet'] : 
+                        (this.columnConfigs[nodeType] || this.columnConfigs['default']);
+                    
+                    const columnConfig = config.children || this.columnConfigs['default'].children;
+                    
+                    // 获取表格容器
+                    const container = document.getElementById('children-table-container');
+                    
+                    // 清空容器
+                    container.innerHTML = '';
+                    
+                    // 如果是项目划分集节点或其子节点，使用自定义树状表格渲染
+                    if (isProjectDivisionSet) {
+                        // 准备树表格数据
+                        const treeData = this.buildProjectDivisionTreeData(children);
+                        
+                        // 使用自定义方法渲染项目划分集树状表格
+                        this.renderProjectDivisionAsTree(treeData);
+                    } else {
+                        // 对于非项目划分集节点，使用原有的渲染方式
+                        // 准备树表格数据
+                        const treeData = [];
+                        
+                        // 处理子节点数据
+                        for (const child of children) {
+                            const item = {
+                                id: child.id,
+                                name: child.properties ? child.properties.name : '',
+                                title: child.labels ? child.labels.join(', ') : '子节点'
+                            };
+                            
+                            // 添加属性
+                            if (child.properties) {
+                                // 根据配置添加属性
+                                columnConfig.forEach(col => {
+                                    if (child.properties[col.field]) {
+                                        item[col.field] = child.properties[col.field];
+                                    }
+                                });
+                                
+                                // 添加常用属性
+                                if (child.properties.name) item.name = child.properties.name;
+                                if (child.properties.GUID) item.guid = child.properties.GUID;
+                                if (child.properties.type) item.type = child.properties.type;
+                                if (child.properties.code) item.code = child.properties.code;
+                                if (child.properties.description) item.description = child.properties.description;
+                                
+                                // 将所有属性序列化为JSON存储，用于详情查看
+                                item.allProperties = JSON.stringify(child.properties);
+                            }
+                            
+                            treeData.push(item);
+                        }
+                        
+                        // 构建列配置
+                        const cols = [];
+                        
+                        // 添加可见的列
+                        columnConfig.forEach(col => {
+                            if (col.show) {
+                                cols.push({
+                                    field: col.field,
+                                    title: col.title,
+                                    minWidth: col.minWidth || col.width || 150,
+                                    width: col.width
+                                });
+                            }
+                        });
+                        
+                        // 添加操作列
+                        cols.push({
+                            title: '操作',
+                            width: 150,
+                            templet: d => {
+                                return `<div class="layui-btn-group">
+                                    <button class="layui-btn layui-btn-xs" lay-event="view">查看</button>
+                                    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">详情</button>
+                                </div>`;
+                            }
+                        });
+                        
+                        // 使用 treeTable 渲染
+                        treeTable.render({
+                            elem: '#children-table-container',
+                            data: treeData,
+                            tree: {
+                                iconIndex: 0,
+                                isPidData: false,
+                                idName: 'id',
+                                childName: 'children',
+                                view: {
+                                    showIcon: true,
+                                    showLine: true,
+                                    indent: 20,
+                                    dblClickExpand: false
+                                }
+                            },
+                            cols: [cols],
+                            text: {
+                                none: '该节点没有子节点'
+                            },
+                            page: false
+                        });
+                        
+                        // 监听表格操作
+                        treeTable.on('tool(children-table-container)', obj => {
+                            const data = obj.data;
+                            if (obj.event === 'view') {
+                                this.selectNode(data.id);
+                            } else if (obj.event === 'detail') {
+                                this.showNodeDetailLayer(data);
+                            }
+                        });
+                    }
+                }
+
+                renderProjectDivisionAsTree(treeData) {
+                    const container = document.getElementById('children-table-container');
+                    
+                    // 创建树状表格容器
+                    const treeContainer = document.createElement('div');
+                    treeContainer.className = 'project-division-tree';
+                    
+                    // 创建表格
+                    const table = document.createElement('table');
+                    table.className = 'project-division-table';
+                    
+                    // 添加表格内容
+                    const tableBody = document.createElement('tbody');
+                    tableBody.innerHTML = this.buildProjectDivisionTreeHTML(treeData);
+                    table.appendChild(tableBody);
+                    
+                    // 添加到容器
+                    treeContainer.appendChild(table);
+                    container.appendChild(treeContainer);
+                    
+                    // 添加样式
+                    this.addProjectDivisionTreeStyles();
+                    
+                    // 添加展开/折叠事件监听
+                    this.addTreeToggleListeners();
+                }
+
+                buildProjectDivisionTreeData(children) {
+                    const treeData = [];
+                    
+                    // 处理子节点数据
+                    for (const child of children) {
+                        const item = {
+                            id: child.id,
+                            children: []
+                        };
+                        
+                        // 添加属性
+                        if (child.properties) {
+                            // 添加标准属性
+                            item.mark = child.properties.mark || '';
+                            item.code = child.properties.code || '';
+                            item.name = child.properties.name || '';
+                            item.specification = child.properties.specification || child.properties.规格型号 || '';
+                            item.unit = child.properties.unit || child.properties.单位 || '';
+                            item.formula = child.properties.formula || child.properties.计算式 || '';
+                            item.amount = child.properties.amount || child.properties.数量 || '';
+                            item.unitPriceWithTax = child.properties.unitPriceWithTax || child.properties.单价含税 || '';
+                            item.unitPriceWithoutTax = child.properties.unitPriceWithoutTax || child.properties.单价不含税 || '';
+                            item.totalPriceWithTax = child.properties.totalPriceWithTax || child.properties.合价含税 || '';
+                            item.totalPriceWithoutTax = child.properties.totalPriceWithoutTax || child.properties.合价不含税 || '';
+                            item.taxIndex = child.properties.taxIndex || child.properties.取费索引 || '';
+                            item.remark = child.properties.remark || child.properties.备注 || '';
+                            
+                            // 将所有属性序列化为JSON存储，用于详情查看
+                            item.allProperties = JSON.stringify(child.properties);
+                        }
+                        
+                        // 处理子节点
+                        if (child.children && child.children.length > 0) {
+                            item.children = this.buildProjectDivisionTreeData(child.children);
+                        }
+                        
+                        treeData.push(item);
+                    }
+                    
+                    return treeData;
+                }
+
+                buildProjectDivisionTreeHTML(treeData, level = 0) {
+                    let html = '';
+                    
+                    // 添加表头行
+                    if (level === 0) {
+                        html += `<tr class="tree-header">
+                            <th class="tree-col-name">项目名称</th>
+                            <th class="tree-col-spec">规格型号</th>
+                            <th class="tree-col-unit">单位</th>
+                            <th class="tree-col-formula">计算式</th>
+                            <th class="tree-col-amount">数量</th>
+                            <th class="tree-col-price">单价含税</th>
+                            <th class="tree-col-price">单价不含税</th>
+                            <th class="tree-col-total">合价含税</th>
+                            <th class="tree-col-total">合价不含税</th>
+                            <th class="tree-col-tax">取费表</th>
+                            <th class="tree-col-remark">备注</th>
+                        </tr>`;
+                    }
+                    
+                    // 生成行数据
+                    treeData.forEach((item, index) => {
+                        const hasChildren = item.children && item.children.length > 0;
+                        const toggleClass = hasChildren ? 'tree-toggle' : '';
+                        const toggleIcon = hasChildren ? '<i class="layui-icon layui-icon-triangle-d"></i>' : '<i class="layui-icon layui-icon-file"></i>';
+                        const nodeClass = hasChildren ? 'parent-node' : 'leaf-node';
+                        
+                        // 创建行
+                        html += `<tr class="tree-row ${nodeClass}" data-id="${item.id}" data-level="${level}">`;
+                        
+                        // 项目名称列（带缩进和图标）
+                        html += `<td class="tree-col-name">
+                            <div class="tree-indent" style="padding-left: ${level * 20}px">
+                                <span class="${toggleClass}">${toggleIcon}</span>
+                                <span class="node-code">${item.code ? item.code : ''}</span>
+                                <span class="node-name">${item.name || '未命名项目'}</span>
+                            </div>
+                        </td>`;
+                        
+                        // 规格型号列
+                        html += `<td class="tree-col-spec">${item.specification || ''}</td>`;
+                        
+                        // 单位列
+                        html += `<td class="tree-col-unit">${item.unit || ''}</td>`;
+                        
+                        // 计算式列
+                        html += `<td class="tree-col-formula">${item.formula || ''}</td>`;
+                        
+                        // 数量列
+                        html += `<td class="tree-col-amount">${item.amount || ''}</td>`;
+                        
+                        // 单价含税列
+                        html += `<td class="tree-col-price">${item.unitPriceWithTax || ''}</td>`;
+                        
+                        // 单价不含税列
+                        html += `<td class="tree-col-price">${item.unitPriceWithoutTax || ''}</td>`;
+                        
+                        // 合价含税列
+                        html += `<td class="tree-col-total">${item.totalPriceWithTax || ''}</td>`;
+                        
+                        // 合价不含税列
+                        html += `<td class="tree-col-total">${item.totalPriceWithoutTax || ''}</td>`;
+                        
+                        // 取费表列
+                        html += `<td class="tree-col-tax">${item.taxIndex || ''}</td>`;
+                        
+                        // 备注列
+                        html += `<td class="tree-col-remark">${item.remark || ''}</td>`;
+                        
+                        html += '</tr>';
+                        
+                        // 递归处理子节点
+                        if (hasChildren) {
+                            html += this.buildProjectDivisionTreeHTML(item.children, level + 1);
+                        }
+                    });
+                    
+                    return html;
+                }
+
+                addTreeToggleListeners() {
+                    // 为所有可展开/折叠的节点添加点击事件
+                    document.querySelectorAll('.tree-toggle').forEach(toggle => {
+                        toggle.addEventListener('click', (e) => {
+                            const icon = e.currentTarget.querySelector('i');
+                            const row = e.currentTarget.closest('tr');
+                            const level = parseInt(row.dataset.level);
+                            const nodeId = row.dataset.id;
+                            
+                            // 找到所有下一级节点
+                            let nextRow = row.nextElementSibling;
+                            let childrenVisible = icon.classList.contains('layui-icon-triangle-d');
+                            
+                            while (nextRow && parseInt(nextRow.dataset.level) > level) {
+                                if (parseInt(nextRow.dataset.level) === level + 1) {
+                                    // 直接子节点的显示/隐藏状态切换
+                                    if (childrenVisible) {
+                                        nextRow.style.display = 'none';
+                                        
+                                        // 同时隐藏所有子节点的子节点
+                                        let childRow = nextRow.nextElementSibling;
+                                        while (childRow && parseInt(childRow.dataset.level) > level + 1) {
+                                            childRow.style.display = 'none';
+                                            childRow = childRow.nextElementSibling;
+                                        }
+                                    } else {
+                                        nextRow.style.display = '';
+                                    }
+                                }
+                                nextRow = nextRow.nextElementSibling;
+                            }
+                            
+                            // 切换图标
+                            if (childrenVisible) {
+                                icon.classList.remove('layui-icon-triangle-d');
+                                icon.classList.add('layui-icon-triangle-r');
+                            } else {
+                                icon.classList.remove('layui-icon-triangle-r');
+                                icon.classList.add('layui-icon-triangle-d');
+                            }
+                            
+                            e.stopPropagation();
+                        });
+                    });
+                    
+                    // 为行添加点击事件，显示详细信息
+                    document.querySelectorAll('.tree-row').forEach(row => {
+                        row.addEventListener('click', (e) => {
+                            if (!e.target.closest('.tree-toggle')) {
+                                const nodeId = row.dataset.id;
+                                if (nodeId) {
+                                    this.selectNode(nodeId);
+                                }
+                            }
+                        });
+                    });
+                }
+
+                addProjectDivisionTreeStyles() {
+                    // 检查是否已经添加了样式
+                    if (!document.getElementById('project-division-tree-styles')) {
+                        const style = document.createElement('style');
+                        style.id = 'project-division-tree-styles';
+                        style.textContent = `
+                            .project-division-tree {
+                                width: 100%;
+                                overflow: auto;
+                                margin-top: 10px;
+                            }
+                            
+                            .project-division-table {
+                                width: 100%;
+                                border-collapse: collapse;
+                                table-layout: fixed;
+                            }
+                            
+                            .project-division-table tr {
+                                border-bottom: 1px solid #e6e6e6;
+                                height: 40px;
+                            }
+                            
+                            .project-division-table td {
+                                padding: 8px;
+                                vertical-align: middle;
+                            }
+                            
+                            .tree-node {
+                                width: 70%;
+                                text-align: left;
+                            }
+                            
+                            .tree-price {
+                                width: 30%;
+                                text-align: right;
+                            }
+                            
+                            .price-item {
+                                color: #666;
+                                font-size: 13px;
+                                margin-bottom: 3px;
+                            }
+                            
+                            .tree-indent {
+                                display: flex;
+                                align-items: center;
+                                position: relative;
+                            }
+                            
+                            .tree-toggle {
+                                cursor: pointer;
+                                margin-right: 8px;
+                                display: inline-block;
+                                width: 16px;
+                                height: 16px;
+                                text-align: center;
+                                line-height: 16px;
+                            }
+                            
+                            .node-code {
+                                color: #999;
+                                font-size: 12px;
+                                margin-right: 5px;
+                            }
+                            
+                            .node-name {
+                                font-weight: normal;
+                                margin-right: 10px;
+                            }
+                            
+                            .parent-node .node-name {
+                                font-weight: bold;
+                                color: #1E9FFF;
+                            }
+                            
+                            .tree-row:hover {
+                                background-color: #f2f2f2;
+                            }
+                            
+                            /* 树状连接线样式 */
+                            .tree-row .tree-indent {
+                                position: relative;
+                            }
+                            
+                            .tree-row[data-level="1"] .tree-indent:before,
+                            .tree-row[data-level="2"] .tree-indent:before,
+                            .tree-row[data-level="3"] .tree-indent:before,
+                            .tree-row[data-level="4"] .tree-indent:before,
+                            .tree-row[data-level="5"] .tree-indent:before {
+                                content: '';
+                                position: absolute;
+                                left: 7px;
+                                top: -8px;
+                                height: calc(100% + 16px);
+                                border-left: 1px dotted #ccc;
+                            }
+                            
+                            .tree-row[data-level="1"] .tree-indent:after,
+                            .tree-row[data-level="2"] .tree-indent:after,
+                            .tree-row[data-level="3"] .tree-indent:after,
+                            .tree-row[data-level="4"] .tree-indent:after,
+                            .tree-row[data-level="5"] .tree-indent:after {
+                                content: '';
+                                position: absolute;
+                                left: 7px;
+                                top: 50%;
+                                width: 12px;
+                                border-top: 1px dotted #ccc;
+                            }
+                            
+                            /* 颜色标记 */
+                            .leaf-node .layui-icon-file {
+                                color: #5FB878;
+                            }
+                            
+                            .parent-node .layui-icon-triangle-d,
+                            .parent-node .layui-icon-triangle-r {
+                                color: #1E9FFF;
+                            }
+                        `;
+                        document.head.appendChild(style);
+                    }
+                }
+
+                // 导出Excel方法
+                exportToExcel(nodeId) {
+                    // 显示加载层
+                    const loadIndex = layer.load(2, {shade: [0.3, '#fff']});
+                    
+                    // 请求导出API（传入任意节点ID，后端会忽略）
+                    fetch(`/api/export/${nodeId}`)
+                        .then(response => {
+                            if (!response.ok) {
+                                throw new Error('导出失败');
+                            }
+                            return response.blob();
+                        })
+                        .then(blob => {
+                            // 创建下载链接
+                            const url = window.URL.createObjectURL(blob);
+                            const a = document.createElement('a');
+                            a.href = url;
+                            a.download = '工程知识图谱.xlsx';
+                            document.body.appendChild(a);
+                            a.click();
+                            window.URL.revokeObjectURL(url);
+                            
+                            // 关闭加载层
+                            layer.close(loadIndex);
+                            layer.msg('导出成功', {icon: 1});
+                        })
+                        .catch(error => {
+                            // 关闭加载层
+                            layer.close(loadIndex);
+                            layer.msg('导出失败: ' + error.message, {icon: 2});
+                        });
+                }
+
+                renderRelationTable(relationships) {
+                    table.render({
+                        elem: '#relation-table-container',
+                        data: relationships || [],
+                        cols: [[
+                            {type: 'numbers', title: '序号', width: 60},
+                            {field: 'type', title: '关系类型', minWidth: 150},
+                            {field: 'direction', title: '方向', width: 80, templet: d => {
+                                return d.direction === 'OUTGOING' ? '出' : '入';
+                            }},
+                            {field: 'targetNodeId', title: '目标节点ID', minWidth: 150},
+                            {field: 'targetNodeLabels', title: '目标节点类型', minWidth: 150},
+                            {title: '操作', width: 80, templet: d => {
+                                return '<button class="layui-btn layui-btn-xs" lay-event="navigate">查看</button>';
+                            }}
+                        ]],
+                        text: {
+                            none: '该节点没有关系数据'
+                        }
+                    });
+                    
+                    // 监听表格操作
+                    table.on('tool(relation-table-container)', obj => {
+                        if (obj.event === 'navigate') {
+                            this.selectNode(obj.data.targetNodeId);
+                        }
+                    });
+                }
+                
+                showNodeDetailLayer(data) {
+                    let properties = {};
+                    try {
+                        if (data.allProperties) {
+                            properties = JSON.parse(data.allProperties);
+                        }
+                    } catch (e) {
+                        console.error('解析属性JSON失败:', e);
+                    }
+                    
+                    // 构建详情表格数据
+                    const detailData = [
+                        {key: 'ID', value: data.id},
+                        {key: '节点类型', value: data.title}
+                    ];
+                    
+                    // 添加所有属性
+                    Object.entries(properties).forEach(([key, value]) => {
+                        detailData.push({key, value: this.formatValue(value)});
+                    });
+                    
+                    // 创建弹出层
+                    layer.open({
+                        type: 1,
+                        title: '节点详情',
+                        area: ['600px', '500px'],
+                        content: '<div id="detail-table-container" style="padding: 15px;"></div>',
+                        success: () => {
+                            // 渲染详情表格
+                            table.render({
+                                elem: '#detail-table-container',
+                                data: detailData,
+                                cols: [[
+                                    {field: 'key', title: '属性名', width: '30%'},
+                                    {field: 'value', title: '属性值', width: '70%'}
+                                ]],
+                                skin: 'line',
+                                even: true
+                            });
+                        }
+                    });
+                }
+
+                formatValue(value) {
+                    if (value === null || value === undefined) {
+                        return '-';
+                    }
+                    if (typeof value === 'object') {
+                        return JSON.stringify(value);
+                    }
+                    return String(value);
+                }
+
+                // 新增方法：渲染费用预览数据（包括费用集信息和默认表格）
+                renderCostPreviewData(costData) {
+                    // 清除之前的费用集信息卡片
+                    const costInfoContainer = document.getElementById('cost-info-container');
+                    costInfoContainer.innerHTML = '';
+                    
+                    // 重置按钮状态
+                    document.getElementById('cost-item-btn').classList.add('layui-btn-disabled');
+                    document.getElementById('material-machine-btn').classList.remove('layui-btn-disabled');
+                    
+                    if (!costData || (!costData.cost_items && !costData.cost_sets)) {
+                        // 如果没有费用数据，渲染空表格
+                        this.renderCostPreviewTable(null);
+                        return;
+                    }
+                    
+                    // 如果有CostSet信息，在表格上方显示
+                    if (costData.cost_sets && costData.cost_sets.length > 0) {
+                        const costSetInfo = document.createElement('div');
+                        costSetInfo.className = 'layui-card';
+                        costSetInfo.style.marginBottom = '10px';
+                        costSetInfo.innerHTML = `
+                            <div class="layui-card-header">费用集信息</div>
+                            <div class="layui-card-body">
+                                ${costData.cost_sets.map(set => `
+                                    <p><strong>名称:</strong> ${set.name || '未命名费用集'}</p>
+                                    ${set.properties && set.properties.GUID ? `<p><strong>GUID:</strong> ${set.properties.GUID}</p>` : ''}
+                                `).join('')}
+                            </div>
+                        `;
+                        
+                        costInfoContainer.appendChild(costSetInfo);
+                    }
+                    
+                    // 默认渲染CostItem类型的费用预览表格
+                    this.renderCostPreviewTable(costData, 'CostItem');
+                }
+
+                // 新增方法：渲染费用预览表格
+                renderCostPreviewTable(costData, filterType = null, containerId = 'cost-preview-container') {
+                    if (!costData || (!costData.cost_items && !costData.cost_sets)) {
+                        // 如果没有费用数据，渲染空表格
+                        table.render({
+                            elem: `#${containerId}`,
+                            data: [],
+                            cols: [[
+                                {type: 'numbers', title: '序号', width: 60},
+                                {field: 'name', title: '费用项名称', minWidth: 200},
+                                {field: 'cost', title: '费用', width: 120}
+                            ]],
+                            skin: 'line',
+                            even: true,
+                            text: {
+                                none: '该节点没有费用预览数据'
+                            }
+                        });
+                        return;
+                    }
+                    
+                    // 准备费用预览表格数据
+                    let costItems = costData.cost_items || [];
+                    
+                    // 如果指定了过滤类型，只显示该类型的费用项
+                    if (filterType) {
+                        costItems = costItems.filter(item => {
+                            const itemType = item.labels && item.labels.length > 0 ? item.labels[0] : '';
+                            return itemType === filterType;
+                        });
+                    }
+                    
+                    // 处理费用项数据
+                    const tableData = costItems.map(item => {
+                        const props = item.properties || {};
+                        const itemType = item.labels && item.labels.length > 0 ? item.labels[0] : '';
+                        
+                        // 基本数据结构
+                        const tableItem = {
+                            id: item.id,
+                            name: props.name || '未命名费用项',
+                            type: props.type || itemType
+                        };
+                        
+                        // 根据节点类型添加不同的属性
+                        if (itemType === 'MaterialandmachineCostItem') {
+                            // 材料机械费用项
+                            tableItem.supply = props.供货方 || '';
+                            tableItem.code = props.编码 || '';
+                            tableItem.unit = props.单位 || '';
+                            tableItem.amount = props.数量 || 0;
+                            tableItem.budgetPrice = props.预算价不含税 || 0;
+                            tableItem.marketPrice = props.市场价不含税 || 0;
+                            tableItem.totalBudget = props.预算价合价 || 0;
+                            tableItem.totalMarket = props.市场价合价 || 0;
+                            tableItem.priceDiff = props.价差 || 0;
+                        } else if (itemType === 'CostItem') {
+                            // 普通费用项
+                            tableItem.cost = props.cost || 0;
+                            tableItem.unique_id = props.unique_id || '';
+                        } else {
+                            // 其他类型的费用项
+                            if (props.amount !== undefined) tableItem.amount = props.amount;
+                            if (props.unit !== undefined) tableItem.unit = props.unit;
+                            if (props.unitPrice !== undefined) tableItem.unitPrice = props.unitPrice;
+                            if (props.totalPrice !== undefined) tableItem.totalPrice = props.totalPrice;
+                            if (props.cost !== undefined) tableItem.cost = props.cost;
+                        }
+                        
+                        return tableItem;
+                    });
+                    
+                    // 获取适合的列配置
+                    let columnConfig;
+                    if (filterType && this.columnConfigs[filterType]) {
+                        // 使用指定类型的列配置
+                        columnConfig = this.columnConfigs[filterType].costPreview;
+                    } else if (tableData.length > 0) {
+                        // 根据第一个项目的类型决定使用哪种列配置
+                        const firstItemType = tableData[0].type;
+                        if (this.columnConfigs[firstItemType]) {
+                            columnConfig = this.columnConfigs[firstItemType].costPreview;
+                        } else {
+                            columnConfig = this.columnConfigs['default'].costPreview;
+                        }
+                    } else {
+                        columnConfig = this.columnConfigs['default'].costPreview;
+                    }
+                    
+                    // 构建列配置
+                    const cols = [
+                        {type: 'numbers', title: '序号', width: 60}
+                    ];
+                    
+                    // 添加可见的列
+                    columnConfig.forEach(col => {
+                        if (col.show) {
+                            cols.push({
+                                field: col.field,
+                                title: col.title,
+                                minWidth: col.minWidth || col.width || 100,
+                                width: col.width
+                            });
+                        }
+                    });
+                    
+                    // 渲染费用预览表格
+                    table.render({
+                        elem: `#${containerId}`,
+                        data: tableData,
+                        cols: [cols],
+                        skin: 'line',
+                        even: true,
+                        text: {
+                            none: filterType === 'CostItem' ? 
+                                  '该节点没有费用预览数据' : 
+                                  '该节点没有材机列表数据'
+                        }
+                    });
+                }
+
+                buildTreeStructureData(node, children) {
+                    // 处理子节点数据
+                    const treeData = [];
+                    
+                    // 处理子节点数据
+                    for (const child of children) {
+                        // 增强过滤条件，过滤掉费用预览相关节点
+                        if (
+                            (child.name && child.name.includes('费用预览')) ||
+                            (child.properties && child.properties.name && child.properties.name.includes('费用预览')) ||
+                            (child.labels && child.labels.some(label => label.includes('Cost'))) ||
+                            (child.type && child.type.includes('Cost'))
+                        ) {
+                            continue;
+                        }
+                        
+                        const item = {
+                            id: child.id,
+                            children: []
+                        };
+                        
+                        // 添加属性
+                        if (child.properties) {
+                            // 添加标准属性
+                            item.code = child.properties.code || '';
+                            item.name = child.properties.name || '';
+                            item.specification = child.properties.specification || child.properties.规格型号 || '';
+                            item.unit = child.properties.unit || child.properties.单位 || '';
+                            item.formula = child.properties.formula || child.properties.计算式 || '';
+                            item.amount = child.properties.amount || child.properties.数量 || '';
+                            item.unitPriceWithTax = child.properties.unitPriceWithTax || child.properties.单价含税 || '';
+                            item.unitPriceWithoutTax = child.properties.unitPriceWithoutTax || child.properties.单价不含税 || '';
+                            item.totalPriceWithTax = child.properties.totalPriceWithTax || child.properties.合价含税 || '';
+                            item.totalPriceWithoutTax = child.properties.totalPriceWithoutTax || child.properties.合价不含税 || '';
+                            item.taxIndex = child.properties.taxIndex || child.properties.取费索引 || '';
+                            item.remark = child.properties.remark || child.properties.备注 || '';
+                            
+                            // 将所有属性序列化为JSON存储，用于详情查看
+                            item.allProperties = JSON.stringify(child.properties);
+                        }
+                        
+                        // 处理子节点
+                        if (child.children && child.children.length > 0) {
+                            item.children = this.buildTreeStructureData(child, child.children);
+                        }
+                        
+                        treeData.push(item);
+                    }
+                    
+                    return treeData;
+                }
+                
+                buildTreeStructureHTML(treeData, level = 0) {
+                    let html = '';
+                    
+                    // 添加表头行
+                    if (level === 0) {
+                        html += `<tr class="tree-header">
+                            <th class="tree-col-name">项目名称</th>
+                            <th class="tree-col-spec">规格型号</th>
+                            <th class="tree-col-unit">单位</th>
+                            <th class="tree-col-formula">计算式</th>
+                            <th class="tree-col-amount">数量</th>
+                            <th class="tree-col-price">单价含税</th>
+                            <th class="tree-col-price">单价不含税</th>
+                            <th class="tree-col-total">合价含税</th>
+                            <th class="tree-col-total">合价不含税</th>
+                            <th class="tree-col-tax">取费表</th>
+                            <th class="tree-col-remark">备注</th>
+                        </tr>`;
+                    }
+                    
+                    // 生成行数据
+                    treeData.forEach((item, index) => {
+                        const hasChildren = item.children && item.children.length > 0;
+                        const toggleClass = hasChildren ? 'tree-toggle' : '';
+                        const toggleIcon = hasChildren ? '<i class="layui-icon layui-icon-triangle-d"></i>' : '<i class="layui-icon layui-icon-file"></i>';
+                        const nodeClass = hasChildren ? 'parent-node' : 'leaf-node';
+                        
+                        // 创建行
+                        html += `<tr class="tree-row ${nodeClass}" data-id="${item.id}" data-level="${level}">`;
+                        
+                        // 项目名称列（带缩进和图标）
+                        html += `<td class="tree-col-name">
+                            <div class="tree-indent" style="padding-left: ${level * 20}px">
+                                <span class="${toggleClass}">${toggleIcon}</span>
+                                <span class="node-code">${item.code ? item.code : ''}</span>
+                                <span class="node-name">${item.name || '未命名项目'}</span>
+                            </div>
+                        </td>`;
+                        
+                        // 规格型号列
+                        html += `<td class="tree-col-spec">${item.specification || ''}</td>`;
+                        
+                        // 单位列
+                        html += `<td class="tree-col-unit">${item.unit || ''}</td>`;
+                        
+                        // 计算式列
+                        html += `<td class="tree-col-formula">${item.formula || ''}</td>`;
+                        
+                        // 数量列
+                        html += `<td class="tree-col-amount">${item.amount || ''}</td>`;
+                        
+                        // 单价含税列
+                        html += `<td class="tree-col-price">${item.unitPriceWithTax || ''}</td>`;
+                        
+                        // 单价不含税列
+                        html += `<td class="tree-col-price">${item.unitPriceWithoutTax || ''}</td>`;
+                        
+                        // 合价含税列
+                        html += `<td class="tree-col-total">${item.totalPriceWithTax || ''}</td>`;
+                        
+                        // 合价不含税列
+                        html += `<td class="tree-col-total">${item.totalPriceWithoutTax || ''}</td>`;
+                        
+                        // 取费表列
+                        html += `<td class="tree-col-tax">${item.taxIndex || ''}</td>`;
+                        
+                        // 备注列
+                        html += `<td class="tree-col-remark">${item.remark || ''}</td>`;
+                        
+                        html += '</tr>';
+                        
+                        // 递归处理子节点
+                        if (hasChildren) {
+                            html += this.buildTreeStructureHTML(item.children, level + 1);
+                        }
+                    });
+                    
+                    return html;
+                }
+
+                addTreeStructureStyles() {
+                    // 检查是否已经添加了样式
+                    if (!document.getElementById('tree-structure-styles')) {
+                        const style = document.createElement('style');
+                        style.id = 'tree-structure-styles';
+                        style.textContent = `
+                            .project-division-tree {
+                                width: 100%;
+                                overflow: auto;
+                                margin-top: 10px;
+                            }
+                            
+                            .project-division-table {
+                                width: 100%;
+                                border-collapse: collapse;
+                                table-layout: fixed;
+                            }
+                            
+                            .project-division-table tr {
+                                border-bottom: 1px solid #e6e6e6;
+                                height: 40px;
+                            }
+                            
+                            .project-division-table td, .project-division-table th {
+                                padding: 8px;
+                                vertical-align: middle;
+                                border-right: 1px solid #e6e6e6;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                            }
+                            
+                            .tree-header {
+                                background-color: #f2f2f2;
+                                font-weight: bold;
+                            }
+                            
+                            .tree-col-name {
+                                width: 200px;
+                                text-align: left;
+                            }
+                            
+                            .tree-col-spec {
+                                width: 100px;
+                                text-align: center;
+                            }
+                            
+                            .tree-col-unit {
+                                width: 60px;
+                                text-align: center;
+                            }
+                            
+                            .tree-col-formula {
+                                width: 100px;
+                                text-align: center;
+                            }
+                            
+                            .tree-col-amount {
+                                width: 80px;
+                                text-align: right;
+                            }
+                            
+                            .tree-col-price {
+                                width: 100px;
+                                text-align: right;
+                            }
+                            
+                            .tree-col-total {
+                                width: 120px;
+                                text-align: right;
+                            }
+                            
+                            .tree-col-tax {
+                                width: 100px;
+                                text-align: center;
+                            }
+                            
+                            .tree-col-remark {
+                                width: 100px;
+                                text-align: left;
+                            }
+                            
+                            .tree-indent {
+                                display: flex;
+                                align-items: center;
+                                position: relative;
+                            }
+                            
+                            .tree-toggle {
+                                cursor: pointer;
+                                margin-right: 8px;
+                                display: inline-block;
+                                width: 16px;
+                                height: 16px;
+                                text-align: center;
+                                line-height: 16px;
+                            }
+                            
+                            .node-code {
+                                color: #999;
+                                font-size: 12px;
+                                margin-right: 5px;
+                            }
+                            
+                            .node-name {
+                                font-weight: normal;
+                                margin-right: 10px;
+                            }
+                            
+                            .parent-node .node-name {
+                                font-weight: bold;
+                                color: #1E9FFF;
+                            }
+                            
+                            .tree-row:hover {
+                                background-color: #f2f2f2;
+                            }
+                            
+                            /* 树状连接线样式 */
+                            .tree-row .tree-indent {
+                                position: relative;
+                            }
+                            
+                            .tree-row[data-level="1"] .tree-indent:before,
+                            .tree-row[data-level="2"] .tree-indent:before,
+                            .tree-row[data-level="3"] .tree-indent:before,
+                            .tree-row[data-level="4"] .tree-indent:before,
+                            .tree-row[data-level="5"] .tree-indent:before {
+                                content: '';
+                                position: absolute;
+                                left: 7px;
+                                top: -8px;
+                                height: calc(100% + 16px);
+                                border-left: 1px dotted #ccc;
+                            }
+                            
+                            .tree-row[data-level="1"] .tree-indent:after,
+                            .tree-row[data-level="2"] .tree-indent:after,
+                            .tree-row[data-level="3"] .tree-indent:after,
+                            .tree-row[data-level="4"] .tree-indent:after,
+                            .tree-row[data-level="5"] .tree-indent:after {
+                                content: '';
+                                position: absolute;
+                                left: 7px;
+                                top: 50%;
+                                width: 12px;
+                                border-top: 1px dotted #ccc;
+                            }
+                            
+                            /* 颜色标记 */
+                            .leaf-node .layui-icon-file {
+                                color: #5FB878;
+                            }
+                            
+                            .parent-node .layui-icon-triangle-d,
+                            .parent-node .layui-icon-triangle-r {
+                                color: #1E9FFF;
+                            }
+                            
+                            /* 费用预览按钮样式 */
+                            .cost-preview-btn {
+                                padding: 0 10px;
+                            }
+                        `;
+                        document.head.appendChild(style);
+                    }
+                }
+
+                async getAllChildrenRecursively(children) {
+                    const allChildren = [...children];
+                    
+                    for (const child of allChildren) {
+                        if (child.id) {
+                            try {
+                                // 获取子节点的子节点
+                                const response = await fetch(`/api/node/${child.id}`);
+                                const data = await response.json();
+                                
+                                if (data.children && data.children.length > 0) {
+                                    // 递归获取子节点的子节点
+                                    const grandChildren = await this.getAllChildrenRecursively(data.children);
+                                    
+                                    // 将子节点的子节点添加到子节点的children属性中
+                                    child.children = grandChildren;
+                                }
+                            } catch (error) {
+                                console.error('获取子节点失败:', error);
+                            }
+                        }
+                    }
+                    
+                    return allChildren;
+                }
+            }
+
+            // 初始化应用
+            new KnowledgeGraphUI();
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
