// 全局变量,用于保存当前选中的节点数据 let selectedNodeData = null; /** * 根据节点数据递归生成树形结构(返回
  • 元素) * 假设节点数据格式: * { * "node_name":node.name, * "node_path":node.path, * "node_status":node.status, * "node_bwork":node.bwork, * "node_vultype":node.vul_type, * "node_vulgrade":node.vul_grade, * children: [ { ... }, { ... } ] * } */ function generateTreeHTML(nodeData) { const li = document.createElement("li"); const nodeSpan = document.createElement("span"); nodeSpan.className = "tree-node"; //设置data属性 nodeSpan.setAttribute("data-node_name", nodeData.node_name); nodeSpan.setAttribute("data-node_path", nodeData.node_path); nodeSpan.setAttribute("data-node_status", nodeData.node_status); nodeSpan.setAttribute("data-node_bwork", nodeData.node_bwork); nodeSpan.setAttribute("data-node_vultype", nodeData.node_vultype); nodeSpan.setAttribute("data-node_vulgrade", nodeData.node_vulgrade || ""); nodeSpan.setAttribute("data-node_workstatus",nodeData.node_workstatus); if(nodeData.node_workstatus ===0){ nodeSpan.classList.add("no-work"); }else { nodeSpan.classList.remove("no-work"); } // 根据漏洞级别添加样式 if (nodeData.node_vulgrade) { nodeSpan.classList.remove("no-work"); if (nodeData.node_vulgrade === "低危") { nodeSpan.classList.add("vul-low"); } else if (nodeData.node_vulgrade === "中危") { nodeSpan.classList.add("vul-medium"); } else if (nodeData.node_vulgrade === "高危") { nodeSpan.classList.add("vul-high"); } } // 创建容器用于存放切换图标与文本 const container = document.createElement("div"); container.className = "node-container"; // 如果有子节点,则添加切换图标 if (nodeData.children && nodeData.children.length > 0) { const toggleIcon = document.createElement("span"); toggleIcon.className = "toggle-icon"; toggleIcon.textContent = "-"; // 默认展开时显示“-” container.appendChild(toggleIcon); } //节点文本 const textSpan = document.createElement("span"); textSpan.className = "node-text"; textSpan.textContent = nodeData.node_name; container.appendChild(textSpan); nodeSpan.appendChild(container); li.appendChild(nodeSpan); //如果存在子节点,递归生成子节点列表 if (nodeData.children && nodeData.children.length > 0) { const ul = document.createElement("ul"); nodeData.children.forEach((child) => { ul.appendChild(generateTreeHTML(child)); }); li.appendChild(ul); } return li; } // 绑定所有节点的点击事件 function bindTreeNodeEvents() { document.querySelectorAll(".tree-node").forEach((el) => { el.addEventListener("click", (event) => { // 阻止事件冒泡,避免点击时展开折叠影响 event.stopPropagation(); // 清除之前选中的节点样式 document .querySelectorAll(".tree-node.selected") .forEach((node) => node.classList.remove("selected")); // 当前节点标记为选中 el.classList.add("selected"); // 读取 data 属性更新右侧显示 const nodeName = el.getAttribute("data-node_name"); const status = el.getAttribute("data-node_status"); const nodepath = el.getAttribute("data-node_path"); const nodebwork = el.getAttribute("data-node_bwork"); const vulType = el.getAttribute("data-node_vultype"); const vulLevel = el.getAttribute("data-node_vulgrade"); const workstatus = el.getAttribute("data-node_workstatus"); //selectedNodeData = { nodeName, status, vulType, vulLevel,nodepath,nodebwork }; // 示例中默认填充 selectedNodeData = { node_name: nodeName, node_path: nodepath, status: status, node_bwork: nodebwork, vul_type: vulType, vul_grade: vulLevel || "-", workstatus: workstatus }; //刷新界面内容 update_select_node_data_show(nodeName,status,vulType,vulLevel,workstatus,nodebwork) }); // 双击事件:展开/收缩子节点区域 el.addEventListener("dblclick", (event) => { event.stopPropagation(); // 找到该节点下的