|
|
@@ -1,1931 +0,0 @@
|
|
|
-// 全局元素索引(将由Python动态注入)
|
|
|
-// const elementIndex = {};
|
|
|
-
|
|
|
-// 卡片展开/收起功能
|
|
|
-function toggleCardDetails(cardId) {
|
|
|
- const detailsElement = document.getElementById(cardId + '-details');
|
|
|
- const cardElement = document.querySelector('[data-card-id="' + cardId + '"]');
|
|
|
-
|
|
|
- if (!detailsElement || !cardElement) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 切换显示/隐藏
|
|
|
- if (detailsElement.style.display === 'none' || !detailsElement.style.display) {
|
|
|
- detailsElement.style.display = 'block';
|
|
|
- cardElement.classList.add('expanded');
|
|
|
- // 更新图标
|
|
|
- const toggleIcon = cardElement.querySelector('.toggle-icon');
|
|
|
- if (toggleIcon) {
|
|
|
- toggleIcon.textContent = '▲';
|
|
|
- }
|
|
|
- } else {
|
|
|
- detailsElement.style.display = 'none';
|
|
|
- cardElement.classList.remove('expanded');
|
|
|
- // 更新图标
|
|
|
- const toggleIcon = cardElement.querySelector('.toggle-icon');
|
|
|
- if (toggleIcon) {
|
|
|
- toggleIcon.textContent = '▼';
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 显示元素详情模态框
|
|
|
-function showElementDetail(elementId) {
|
|
|
- const elem = elementIndex[elementId];
|
|
|
- if (!elem) return;
|
|
|
-
|
|
|
- // 创建模态框
|
|
|
- const modal = document.createElement('div');
|
|
|
- modal.className = 'element-modal-backdrop';
|
|
|
- modal.onclick = function(e) {
|
|
|
- if (e.target === modal) {
|
|
|
- document.body.removeChild(modal);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 创建模态框内容
|
|
|
- const modalContent = document.createElement('div');
|
|
|
- modalContent.className = 'element-modal-content';
|
|
|
- modalContent.onclick = function(e) {
|
|
|
- e.stopPropagation();
|
|
|
- };
|
|
|
-
|
|
|
- // 构建内容
|
|
|
- let html = '<div class="modal-header">';
|
|
|
- html += '<h3>' + elem.name + '</h3>';
|
|
|
- html += '<button class="modal-close" onclick="this.closest(\'.element-modal-backdrop\').remove()">×</button>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- html += '<div class="modal-body">';
|
|
|
-
|
|
|
- // 描述
|
|
|
- if (elem.description) {
|
|
|
- html += '<div class="modal-section">';
|
|
|
- html += '<strong>描述:</strong>';
|
|
|
- html += '<p>' + elem.description + '</p>';
|
|
|
- html += '</div>';
|
|
|
- }
|
|
|
-
|
|
|
- // 类型和维度
|
|
|
- html += '<div class="modal-section">';
|
|
|
- html += '<strong>类型:</strong> ' + elem.type;
|
|
|
- if (elem.dimension && elem.dimension.一级) {
|
|
|
- html += ' / ' + elem.dimension.一级;
|
|
|
- if (elem.dimension.二级) {
|
|
|
- html += ' / ' + elem.dimension.二级;
|
|
|
- }
|
|
|
- }
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- // 分类
|
|
|
- if (elem.category) {
|
|
|
- html += '<div class="modal-section">';
|
|
|
- html += '<strong>分类:</strong>';
|
|
|
- if (typeof elem.category === 'object') {
|
|
|
- html += ' ' + (elem.category.一级分类 || '');
|
|
|
- if (elem.category.二级分类) {
|
|
|
- html += ' / ' + elem.category.二级分类;
|
|
|
- }
|
|
|
- } else {
|
|
|
- html += ' ' + elem.category;
|
|
|
- }
|
|
|
- html += '</div>';
|
|
|
- }
|
|
|
-
|
|
|
- // 跳转到Tab3查看完整信息
|
|
|
- html += '<div class="modal-footer">';
|
|
|
- html += '<button class="modal-btn" onclick="jumpToElement(\'' + elem.id + '\')">查看完整信息</button>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- modalContent.innerHTML = html;
|
|
|
- modal.appendChild(modalContent);
|
|
|
- document.body.appendChild(modal);
|
|
|
-}
|
|
|
-
|
|
|
-// 跳转到元素详情(Tab3)
|
|
|
-function jumpToElement(elementId) {
|
|
|
- // 关闭模态框
|
|
|
- const modal = document.querySelector('.element-modal-backdrop');
|
|
|
- if (modal) {
|
|
|
- modal.remove();
|
|
|
- }
|
|
|
-
|
|
|
- // 切换到Tab3
|
|
|
- switchTab('tab3');
|
|
|
-
|
|
|
- // 等待DOM更新后滚动到元素
|
|
|
- setTimeout(function() {
|
|
|
- const elemItem = document.querySelector('[data-elem-id="' + elementId + '"]');
|
|
|
- if (elemItem) {
|
|
|
- // 展开所有父级容器
|
|
|
- let parent = elemItem.parentElement;
|
|
|
- while (parent) {
|
|
|
- if (parent.classList.contains('collapsed')) {
|
|
|
- parent.classList.remove('collapsed');
|
|
|
- }
|
|
|
- parent = parent.parentElement;
|
|
|
- }
|
|
|
-
|
|
|
- // 滚动到元素并高亮
|
|
|
- elemItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
|
- elemItem.classList.add('highlight-pulse');
|
|
|
- setTimeout(function() {
|
|
|
- elemItem.classList.remove('highlight-pulse');
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }, 100);
|
|
|
-}
|
|
|
-
|
|
|
-// Tab切换功能
|
|
|
-function switchTab(tabId) {
|
|
|
- // 隐藏所有tab内容
|
|
|
- const allTabs = document.querySelectorAll('.tab-content');
|
|
|
- allTabs.forEach(tab => {
|
|
|
- tab.style.display = 'none';
|
|
|
- });
|
|
|
-
|
|
|
- // 移除所有tab的active类
|
|
|
- const allTabButtons = document.querySelectorAll('.tab');
|
|
|
- allTabButtons.forEach(btn => {
|
|
|
- btn.classList.remove('active');
|
|
|
- });
|
|
|
-
|
|
|
- // 显示选中的tab内容
|
|
|
- document.getElementById(tabId).style.display = 'block';
|
|
|
-
|
|
|
- // 给选中的tab按钮添加active类
|
|
|
- if (event && event.target) {
|
|
|
- event.target.classList.add('active');
|
|
|
- } else {
|
|
|
- // 程序化切换时,手动添加active类
|
|
|
- document.querySelectorAll('.tab').forEach((btn, idx) => {
|
|
|
- if ((tabId === 'tab1' && idx === 0) ||
|
|
|
- (tabId === 'tab2' && idx === 1) ||
|
|
|
- (tabId === 'tab3' && idx === 2) ||
|
|
|
- (tabId === 'tab4' && idx === 3) ||
|
|
|
- (tabId === 'tab5' && idx === 4)) {
|
|
|
- btn.classList.add('active');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 如果切换到tab4,重新绘制连线
|
|
|
- if (tabId === 'tab4') {
|
|
|
- setTimeout(() => {
|
|
|
- drawAllConnections();
|
|
|
- }, 100);
|
|
|
- }
|
|
|
-
|
|
|
- // Tab5 不在切换时自动绘制连线,只在点击卡片时绘制
|
|
|
-}
|
|
|
-
|
|
|
-// 展开/收起段落功能
|
|
|
-function toggleCollapse(element) {
|
|
|
- const listItem = element.closest('.paragraph-item');
|
|
|
- if (!listItem.classList.contains('collapsible')) {
|
|
|
- return;
|
|
|
- }
|
|
|
- listItem.classList.toggle('collapsed');
|
|
|
-}
|
|
|
-
|
|
|
-// 展开/收起段落详细内容
|
|
|
-function toggleDetails(element) {
|
|
|
- const detailsContainer = element.closest('.paragraph-item')
|
|
|
- .querySelector('.paragraph-details');
|
|
|
- if (detailsContainer) {
|
|
|
- detailsContainer.classList.toggle('collapsed');
|
|
|
- const toggleBtn = element.closest('.paragraph-header')
|
|
|
- .querySelector('.details-toggle-btn');
|
|
|
- if (detailsContainer.classList.contains('collapsed')) {
|
|
|
- toggleBtn.innerHTML = '<span class="details-icon">▶</span> 查看详细内容';
|
|
|
- } else {
|
|
|
- toggleBtn.innerHTML = '<span class="details-icon">▶</span> 隐藏详细内容';
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// Tab3: 展开/收起第一层级(实质/形式)
|
|
|
-function toggleLevel1(element) {
|
|
|
- element.classList.toggle('collapsed');
|
|
|
-}
|
|
|
-
|
|
|
-// Tab3: 展开/收起第二层级(具体元素/具体概念/抽象概念)
|
|
|
-function toggleLevel2(element) {
|
|
|
- element.classList.toggle('collapsed');
|
|
|
-}
|
|
|
-
|
|
|
-// Tab3: 展开/收起分类组
|
|
|
-function toggleCategoryGroup(element) {
|
|
|
- const categoryGroup = element.closest('.category-group');
|
|
|
- if (categoryGroup && categoryGroup.classList.contains('collapsible')) {
|
|
|
- categoryGroup.classList.toggle('collapsed');
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// Tab3: 展开/收起二级分类组
|
|
|
-function toggleSubcategoryGroup(element) {
|
|
|
- const subcategoryGroup = element.closest('.subcategory-group');
|
|
|
- if (subcategoryGroup && subcategoryGroup.classList.contains('collapsible')) {
|
|
|
- subcategoryGroup.classList.toggle('collapsed');
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// Tab3: 展开/收起元素详情
|
|
|
-function toggleElementDetails(element) {
|
|
|
- const elementItem = element.closest('.element-item');
|
|
|
- const detailsContainer = elementItem.querySelector('.element-details');
|
|
|
-
|
|
|
- if (detailsContainer) {
|
|
|
- event.stopPropagation();
|
|
|
- elementItem.classList.toggle('expanded');
|
|
|
- detailsContainer.classList.toggle('collapsed');
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// Tab3: 全部展开/收起所有层级
|
|
|
-function toggleAllLevels(expand) {
|
|
|
- // 第一层级
|
|
|
- const level1Headers = document.querySelectorAll('.level1-header');
|
|
|
- level1Headers.forEach(header => {
|
|
|
- if (expand) {
|
|
|
- header.classList.remove('collapsed');
|
|
|
- } else {
|
|
|
- header.classList.add('collapsed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 第二层级
|
|
|
- const level2Headers = document.querySelectorAll('.level2-header');
|
|
|
- level2Headers.forEach(header => {
|
|
|
- if (expand) {
|
|
|
- header.classList.remove('collapsed');
|
|
|
- } else {
|
|
|
- header.classList.add('collapsed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 分类组
|
|
|
- const categoryGroups = document.querySelectorAll('.category-group.collapsible');
|
|
|
- categoryGroups.forEach(group => {
|
|
|
- if (expand) {
|
|
|
- group.classList.remove('collapsed');
|
|
|
- } else {
|
|
|
- group.classList.add('collapsed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 二级分类组
|
|
|
- const subcategoryGroups = document.querySelectorAll('.subcategory-group.collapsible');
|
|
|
- subcategoryGroups.forEach(group => {
|
|
|
- if (expand) {
|
|
|
- group.classList.remove('collapsed');
|
|
|
- } else {
|
|
|
- group.classList.add('collapsed');
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 旧版本兼容:保持toggleAllCategories函数
|
|
|
-function toggleAllCategories(expand) {
|
|
|
- toggleAllLevels(expand);
|
|
|
-}
|
|
|
-
|
|
|
-// 页面加载完成后初始化
|
|
|
-document.addEventListener('DOMContentLoaded', function() {
|
|
|
- console.log('脚本结果可视化页面已加载');
|
|
|
-
|
|
|
- // 初始化Tab4连线图
|
|
|
- if (document.getElementById('tab4')) {
|
|
|
- initializeRelationshipGraph();
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-// ===== Tab4 关系图功能 =====
|
|
|
-
|
|
|
-// 初始化关系图
|
|
|
-function initializeRelationshipGraph() {
|
|
|
- // 延迟执行以确保DOM完全加载
|
|
|
- setTimeout(() => {
|
|
|
- // 初始状态:隐藏所有右侧节点
|
|
|
- resetRelationshipView();
|
|
|
-
|
|
|
- // 监听窗口大小变化,重新绘制连线
|
|
|
- window.addEventListener('resize', debounce(() => {
|
|
|
- if (selectedSubstanceId && relationshipData[selectedSubstanceId]) {
|
|
|
- drawSelectedSubstanceConnections(selectedSubstanceId, relationshipData[selectedSubstanceId]);
|
|
|
- }
|
|
|
- }, 300));
|
|
|
- }, 100);
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制所有连线
|
|
|
-function drawAllConnections() {
|
|
|
- if (typeof relationshipData === 'undefined') {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const svg = document.getElementById('relationship-svg');
|
|
|
- if (!svg) return;
|
|
|
-
|
|
|
- // 清空现有连线
|
|
|
- svg.innerHTML = '';
|
|
|
-
|
|
|
- // 遍历所有实质点
|
|
|
- Object.keys(relationshipData).forEach(substanceId => {
|
|
|
- const relations = relationshipData[substanceId];
|
|
|
-
|
|
|
- // 绘制到灵感点的连线
|
|
|
- relations.inspiration.forEach(rel => {
|
|
|
- // 兼容新结构(支撑)和旧结构(相似度分数)
|
|
|
- const score = rel.avg_score !== undefined ? rel.avg_score : (rel.support_reason !== undefined ? 1.0 : 0.5);
|
|
|
- drawConnection(substanceId, rel.target, 'inspiration', score);
|
|
|
- });
|
|
|
-
|
|
|
- // 绘制到目的点的连线
|
|
|
- relations.purpose.forEach(rel => {
|
|
|
- const score = rel.avg_score !== undefined ? rel.avg_score : (rel.support_reason !== undefined ? 1.0 : 0.5);
|
|
|
- drawConnection(substanceId, rel.target, 'purpose', score);
|
|
|
- });
|
|
|
-
|
|
|
- // 绘制到关键点的连线
|
|
|
- relations.keypoint.forEach(rel => {
|
|
|
- const score = rel.avg_score !== undefined ? rel.avg_score : (rel.support_reason !== undefined ? 1.0 : 0.5);
|
|
|
- drawConnection(substanceId, rel.target, 'keypoint', score);
|
|
|
- });
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制单条连线
|
|
|
-function drawConnection(sourceId, targetId, type, score) {
|
|
|
- const svg = document.getElementById('relationship-svg');
|
|
|
- if (!svg) return;
|
|
|
-
|
|
|
- const sourceNode = document.querySelector(`.substance-node[data-id="${sourceId}"]`);
|
|
|
- const targetNode = document.querySelector(`.target-node[data-id="${targetId}"]`);
|
|
|
-
|
|
|
- if (!sourceNode || !targetNode) return;
|
|
|
-
|
|
|
- // 获取节点位置
|
|
|
- const sourceRect = sourceNode.getBoundingClientRect();
|
|
|
- const targetRect = targetNode.getBoundingClientRect();
|
|
|
- const containerRect = svg.parentElement.getBoundingClientRect();
|
|
|
-
|
|
|
- // 计算相对于SVG容器的位置
|
|
|
- const x1 = sourceRect.right - containerRect.left;
|
|
|
- const y1 = sourceRect.top + sourceRect.height / 2 - containerRect.top;
|
|
|
- const x2 = targetRect.left - containerRect.left;
|
|
|
- const y2 = targetRect.top + targetRect.height / 2 - containerRect.top;
|
|
|
-
|
|
|
- // 创建贝塞尔曲线路径
|
|
|
- const midX = (x1 + x2) / 2;
|
|
|
- const path = `M ${x1} ${y1} Q ${midX} ${y1}, ${midX} ${(y1 + y2) / 2} T ${x2} ${y2}`;
|
|
|
-
|
|
|
- // 创建path元素
|
|
|
- const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
|
- pathElement.setAttribute('d', path);
|
|
|
- pathElement.setAttribute('class', `connection-line ${type}`);
|
|
|
- pathElement.setAttribute('fill', 'none');
|
|
|
- pathElement.setAttribute('data-source', sourceId);
|
|
|
- pathElement.setAttribute('data-target', targetId);
|
|
|
- pathElement.setAttribute('data-type', type);
|
|
|
- pathElement.setAttribute('data-score', score);
|
|
|
-
|
|
|
- svg.appendChild(pathElement);
|
|
|
-}
|
|
|
-
|
|
|
-// 高亮相关关系
|
|
|
-function highlightRelationships(substanceId) {
|
|
|
- if (typeof relationshipData === 'undefined') {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 清除之前的高亮
|
|
|
- clearHighlights();
|
|
|
-
|
|
|
- // 高亮当前实质点
|
|
|
- const substanceNode = document.querySelector(`.substance-node[data-id="${substanceId}"]`);
|
|
|
- if (substanceNode) {
|
|
|
- substanceNode.classList.add('highlighted');
|
|
|
- }
|
|
|
-
|
|
|
- // 获取相关关系
|
|
|
- const relations = relationshipData[substanceId];
|
|
|
- if (!relations) return;
|
|
|
-
|
|
|
- // 高亮相关的目标点
|
|
|
- [...relations.inspiration, ...relations.purpose, ...relations.keypoint].forEach(rel => {
|
|
|
- const targetNode = document.querySelector(`.target-node[data-id="${rel.target}"]`);
|
|
|
- if (targetNode) {
|
|
|
- targetNode.classList.add('highlighted');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 高亮相关的连线
|
|
|
- const lines = document.querySelectorAll(`.connection-line[data-source="${substanceId}"]`);
|
|
|
- lines.forEach(line => {
|
|
|
- line.classList.add('highlighted');
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 清除所有高亮
|
|
|
-function clearHighlights() {
|
|
|
- // 清除节点高亮
|
|
|
- document.querySelectorAll('.node.highlighted').forEach(node => {
|
|
|
- node.classList.remove('highlighted');
|
|
|
- });
|
|
|
-
|
|
|
- // 清除连线高亮
|
|
|
- document.querySelectorAll('.connection-line.highlighted').forEach(line => {
|
|
|
- line.classList.remove('highlighted');
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 防抖函数
|
|
|
-function debounce(func, wait) {
|
|
|
- let timeout;
|
|
|
- return function executedFunction(...args) {
|
|
|
- const later = () => {
|
|
|
- clearTimeout(timeout);
|
|
|
- func(...args);
|
|
|
- };
|
|
|
- clearTimeout(timeout);
|
|
|
- timeout = setTimeout(later, wait);
|
|
|
- };
|
|
|
-}
|
|
|
-
|
|
|
-// ===== Tab4 新增:点击选择实质点功能 =====
|
|
|
-
|
|
|
-let selectedSubstanceId = null;
|
|
|
-
|
|
|
-// 选择实质点,展示关联关系
|
|
|
-function selectSubstance(substanceId) {
|
|
|
- if (typeof relationshipData === 'undefined') {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 如果点击已选中的实质点,不做处理
|
|
|
- if (selectedSubstanceId === substanceId) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- selectedSubstanceId = substanceId;
|
|
|
-
|
|
|
- // 显示重置按钮
|
|
|
- const resetBtn = document.querySelector('.reset-btn');
|
|
|
- if (resetBtn) {
|
|
|
- resetBtn.style.display = 'block';
|
|
|
- }
|
|
|
-
|
|
|
- // 获取关系数据
|
|
|
- const relations = relationshipData[substanceId];
|
|
|
- if (!relations) return;
|
|
|
-
|
|
|
- // 收集所有关联的节点ID
|
|
|
- const relatedNodeIds = new Set();
|
|
|
-
|
|
|
- // 添加灵感点
|
|
|
- relations.inspiration.forEach(rel => {
|
|
|
- relatedNodeIds.add(rel.target);
|
|
|
- });
|
|
|
-
|
|
|
- // 添加目的点
|
|
|
- relations.purpose.forEach(rel => {
|
|
|
- relatedNodeIds.add(rel.target);
|
|
|
- });
|
|
|
-
|
|
|
- // 添加关键点
|
|
|
- relations.keypoint.forEach(rel => {
|
|
|
- relatedNodeIds.add(rel.target);
|
|
|
- });
|
|
|
-
|
|
|
- // 添加关联的实质点
|
|
|
- relations.substance.forEach(rel => {
|
|
|
- relatedNodeIds.add(rel.target);
|
|
|
- });
|
|
|
-
|
|
|
- // 高亮左侧选中的实质点
|
|
|
- document.querySelectorAll('.substance-node').forEach(node => {
|
|
|
- if (node.getAttribute('data-id') === substanceId) {
|
|
|
- node.classList.add('selected');
|
|
|
- node.classList.remove('dimmed');
|
|
|
- } else {
|
|
|
- node.classList.remove('selected');
|
|
|
- node.classList.add('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 右侧节点:只显示关联的节点
|
|
|
- document.querySelectorAll('.target-node').forEach(node => {
|
|
|
- const nodeId = node.getAttribute('data-id');
|
|
|
- if (relatedNodeIds.has(nodeId)) {
|
|
|
- node.classList.add('visible');
|
|
|
- node.classList.remove('hidden');
|
|
|
- } else {
|
|
|
- node.classList.remove('visible');
|
|
|
- node.classList.add('hidden');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 根据右侧节点的可见性,控制section的显示
|
|
|
- document.querySelectorAll('.target-section').forEach(section => {
|
|
|
- const visibleNodes = section.querySelectorAll('.target-node.visible');
|
|
|
- if (visibleNodes.length > 0) {
|
|
|
- section.classList.add('has-visible-nodes');
|
|
|
- section.classList.remove('all-hidden');
|
|
|
- } else {
|
|
|
- section.classList.remove('has-visible-nodes');
|
|
|
- section.classList.add('all-hidden');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 重新绘制连线(只绘制选中实质点的连线)
|
|
|
- drawSelectedSubstanceConnections(substanceId, relations);
|
|
|
-}
|
|
|
-
|
|
|
-// 重置视图
|
|
|
-function resetRelationshipView() {
|
|
|
- selectedSubstanceId = null;
|
|
|
-
|
|
|
- // 隐藏重置按钮
|
|
|
- const resetBtn = document.querySelector('.reset-btn');
|
|
|
- if (resetBtn) {
|
|
|
- resetBtn.style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 左侧实质点:移除所有高亮和变暗
|
|
|
- document.querySelectorAll('.substance-node').forEach(node => {
|
|
|
- node.classList.remove('selected', 'dimmed');
|
|
|
- });
|
|
|
-
|
|
|
- // 右侧节点:隐藏所有节点
|
|
|
- document.querySelectorAll('.target-node').forEach(node => {
|
|
|
- node.classList.remove('visible');
|
|
|
- node.classList.add('hidden');
|
|
|
- });
|
|
|
-
|
|
|
- // 隐藏所有section
|
|
|
- document.querySelectorAll('.target-section').forEach(section => {
|
|
|
- section.classList.remove('has-visible-nodes');
|
|
|
- section.classList.add('all-hidden');
|
|
|
- });
|
|
|
-
|
|
|
- // 清空连线
|
|
|
- const svg = document.getElementById('relationship-svg');
|
|
|
- if (svg) {
|
|
|
- svg.innerHTML = '';
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制选中实质点的连线
|
|
|
-function drawSelectedSubstanceConnections(substanceId, relations) {
|
|
|
- const svg = document.getElementById('relationship-svg');
|
|
|
- if (!svg) return;
|
|
|
-
|
|
|
- // 清空现有连线
|
|
|
- svg.innerHTML = '';
|
|
|
-
|
|
|
- // 绘制到灵感点的连线
|
|
|
- relations.inspiration.forEach(rel => {
|
|
|
- // 兼容新结构(支撑)和旧结构(相似度分数)
|
|
|
- const score = rel.avg_score !== undefined ? rel.avg_score : (rel.support_reason !== undefined ? 1.0 : 0.5);
|
|
|
- drawConnection(substanceId, rel.target, 'inspiration', score);
|
|
|
- });
|
|
|
-
|
|
|
- // 绘制到目的点的连线
|
|
|
- relations.purpose.forEach(rel => {
|
|
|
- const score = rel.avg_score !== undefined ? rel.avg_score : (rel.support_reason !== undefined ? 1.0 : 0.5);
|
|
|
- drawConnection(substanceId, rel.target, 'purpose', score);
|
|
|
- });
|
|
|
-
|
|
|
- // 绘制到关键点的连线
|
|
|
- relations.keypoint.forEach(rel => {
|
|
|
- const score = rel.avg_score !== undefined ? rel.avg_score : (rel.support_reason !== undefined ? 1.0 : 0.5);
|
|
|
- drawConnection(substanceId, rel.target, 'keypoint', score);
|
|
|
- });
|
|
|
-
|
|
|
- // 绘制到其他实质点的连线
|
|
|
- relations.substance.forEach(rel => {
|
|
|
- drawConnection(substanceId, rel.target, 'substance', rel.common_count / 10);
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// ===== Tab4 新版支撑关系图功能 =====
|
|
|
-
|
|
|
-let selectedSupportSubstanceId = null;
|
|
|
-let selectedSupportTargetId = null;
|
|
|
-
|
|
|
-// 选择实质点(新版)
|
|
|
-function selectSubstance(substanceId) {
|
|
|
- if (typeof supportRelationships === 'undefined') {
|
|
|
- console.error('supportRelationships not defined');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 如果点击已选中的实质点,不做处理
|
|
|
- if (selectedSupportSubstanceId === substanceId) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- selectedSupportSubstanceId = substanceId;
|
|
|
- selectedSupportTargetId = null;
|
|
|
-
|
|
|
- // 清空画布
|
|
|
- clearSupportCanvas();
|
|
|
-
|
|
|
- // 获取关系数据
|
|
|
- const relations = supportRelationships.substance_to_target[substanceId];
|
|
|
- if (!relations) {
|
|
|
- console.error('No relations found for substance:', substanceId);
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 高亮选中的实质点,其他变暗
|
|
|
- document.querySelectorAll('.substance-card').forEach(card => {
|
|
|
- if (card.getAttribute('data-id') === substanceId) {
|
|
|
- card.classList.add('selected');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- } else {
|
|
|
- card.classList.remove('selected');
|
|
|
- card.classList.add('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 清除所有目标点的状态
|
|
|
- document.querySelectorAll('.target-card').forEach(card => {
|
|
|
- card.classList.remove('selected', 'dimmed', 'highlighted');
|
|
|
- });
|
|
|
-
|
|
|
- // 根据关系数据高亮相关的目标点
|
|
|
- const relatedTargets = new Set();
|
|
|
-
|
|
|
- relations.inspiration.forEach(rel => {
|
|
|
- relatedTargets.add(rel.target_id);
|
|
|
- });
|
|
|
- relations.purpose.forEach(rel => {
|
|
|
- relatedTargets.add(rel.target_id);
|
|
|
- });
|
|
|
- relations.keypoint.forEach(rel => {
|
|
|
- relatedTargets.add(rel.target_id);
|
|
|
- });
|
|
|
-
|
|
|
- // 高亮相关的目标点,其他变暗
|
|
|
- document.querySelectorAll('.target-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (relatedTargets.has(cardId)) {
|
|
|
- card.classList.add('highlighted');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- } else {
|
|
|
- card.classList.add('dimmed');
|
|
|
- card.classList.remove('highlighted');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 绘制支撑关系(使用Sankey风格或树状结构)
|
|
|
- drawSupportRelationships(substanceId, relations);
|
|
|
-}
|
|
|
-
|
|
|
-// 选择目标点(反向查看)
|
|
|
-function selectTarget(targetType, targetIndex) {
|
|
|
- if (typeof supportRelationships === 'undefined') {
|
|
|
- console.error('supportRelationships not defined');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const targetId = `${targetType}-${targetIndex}`;
|
|
|
-
|
|
|
- // 如果点击已选中的目标点,不做处理
|
|
|
- if (selectedSupportTargetId === targetId) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- selectedSupportSubstanceId = null;
|
|
|
- selectedSupportTargetId = targetId;
|
|
|
-
|
|
|
- // 清空画布
|
|
|
- clearSupportCanvas();
|
|
|
-
|
|
|
- // 获取反向关系数据
|
|
|
- const relations = supportRelationships.target_to_substance[targetId];
|
|
|
- if (!relations) {
|
|
|
- console.error('No relations found for target:', targetId);
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 清除所有实质点的状态
|
|
|
- document.querySelectorAll('.substance-card').forEach(card => {
|
|
|
- card.classList.remove('selected', 'dimmed', 'highlighted');
|
|
|
- });
|
|
|
-
|
|
|
- // 高亮选中的目标点,其他变暗
|
|
|
- document.querySelectorAll('.target-card').forEach(card => {
|
|
|
- if (card.getAttribute('data-id') === targetId) {
|
|
|
- card.classList.add('selected');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- } else {
|
|
|
- card.classList.remove('selected');
|
|
|
- card.classList.add('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 收集所有支撑该目标点的实质点ID
|
|
|
- const supportingSubstances = new Set();
|
|
|
- relations.concrete_elements.forEach(item => supportingSubstances.add(item.substance_id));
|
|
|
- relations.concrete_concepts.forEach(item => supportingSubstances.add(item.substance_id));
|
|
|
- relations.abstract_concepts.forEach(item => supportingSubstances.add(item.substance_id));
|
|
|
-
|
|
|
- // 高亮支撑的实质点,其他变暗
|
|
|
- document.querySelectorAll('.substance-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (supportingSubstances.has(cardId)) {
|
|
|
- card.classList.add('highlighted');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- } else {
|
|
|
- card.classList.add('dimmed');
|
|
|
- card.classList.remove('highlighted');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 绘制反向支撑关系
|
|
|
- drawReverseSupportRelationships(targetId, relations);
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制支撑关系(实质点 → 目标点)
|
|
|
-function drawSupportRelationships(substanceId, relations) {
|
|
|
- const canvas = document.getElementById('support-canvas');
|
|
|
- if (!canvas) return;
|
|
|
-
|
|
|
- // 清空并移除占位文本
|
|
|
- const placeholder = canvas.querySelector('.placeholder-text');
|
|
|
- if (placeholder) {
|
|
|
- placeholder.style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 创建可视化内容
|
|
|
- let html = '<div class="support-flow">\n';
|
|
|
- html += '<div class="flow-title">支撑关系</div>\n';
|
|
|
-
|
|
|
- // 显示来源实质点
|
|
|
- const substanceData = supportRelationships.substance_to_target[substanceId];
|
|
|
- html += '<div class="flow-source">\n';
|
|
|
- html += '<div class="flow-node substance-flow-node">\n';
|
|
|
- html += `<div class="flow-node-label">${substanceData.type || '实质点'}</div>\n`;
|
|
|
- html += `<div class="flow-node-name">${substanceData.name || substanceId}</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- html += '</div>\n';
|
|
|
-
|
|
|
- // 显示支撑的目标点(分类)
|
|
|
- html += '<div class="flow-targets">\n';
|
|
|
-
|
|
|
- if (relations.inspiration && relations.inspiration.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">灵感点</div>\n';
|
|
|
- relations.inspiration.forEach(rel => {
|
|
|
- html += `<div class="flow-target-item inspiration-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${rel.point}</div>\n`;
|
|
|
- // 兼容新结构(支撑理由)和旧结构(相似度分数)
|
|
|
- if (rel.support_reason !== undefined) {
|
|
|
- html += `<div class="flow-target-score">支撑</div>\n`;
|
|
|
- } else if (rel.avg_score !== undefined) {
|
|
|
- const score = (rel.avg_score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- }
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- if (relations.purpose && relations.purpose.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">目的点</div>\n';
|
|
|
- relations.purpose.forEach(rel => {
|
|
|
- html += `<div class="flow-target-item purpose-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${rel.point}</div>\n`;
|
|
|
- // 兼容新结构(支撑理由)和旧结构(相似度分数)
|
|
|
- if (rel.support_reason !== undefined) {
|
|
|
- html += `<div class="flow-target-score">支撑</div>\n`;
|
|
|
- } else if (rel.avg_score !== undefined) {
|
|
|
- const score = (rel.avg_score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- }
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- if (relations.keypoint && relations.keypoint.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">关键点</div>\n';
|
|
|
- relations.keypoint.forEach(rel => {
|
|
|
- html += `<div class="flow-target-item keypoint-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${rel.point}</div>\n`;
|
|
|
- // 兼容新结构(支撑理由)和旧结构(相似度分数)
|
|
|
- if (rel.support_reason !== undefined) {
|
|
|
- html += `<div class="flow-target-score">支撑</div>\n`;
|
|
|
- } else if (rel.avg_score !== undefined) {
|
|
|
- const score = (rel.avg_score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- }
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- html += '</div>\n';
|
|
|
- html += '</div>\n';
|
|
|
-
|
|
|
- // 插入到画布
|
|
|
- canvas.insertAdjacentHTML('beforeend', html);
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制反向支撑关系(目标点 ← 实质点)
|
|
|
-function drawReverseSupportRelationships(targetId, relations) {
|
|
|
- const canvas = document.getElementById('support-canvas');
|
|
|
- if (!canvas) return;
|
|
|
-
|
|
|
- // 清空并移除占位文本
|
|
|
- const placeholder = canvas.querySelector('.placeholder-text');
|
|
|
- if (placeholder) {
|
|
|
- placeholder.style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 创建可视化内容
|
|
|
- let html = '<div class="support-flow reverse">\n';
|
|
|
- html += '<div class="flow-title">被以下实质点支撑</div>\n';
|
|
|
-
|
|
|
- // 显示目标点
|
|
|
- html += '<div class="flow-source">\n';
|
|
|
- html += '<div class="flow-node target-flow-node">\n';
|
|
|
- html += `<div class="flow-node-label">目标点</div>\n`;
|
|
|
- html += `<div class="flow-node-name">${targetId}</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- html += '</div>\n';
|
|
|
-
|
|
|
- // 显示支撑的实质点(分类)
|
|
|
- html += '<div class="flow-targets">\n';
|
|
|
-
|
|
|
- if (relations.concrete_elements && relations.concrete_elements.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">具体元素</div>\n';
|
|
|
- relations.concrete_elements.forEach(item => {
|
|
|
- const score = (item.score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-item concrete-element-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${item.name}</div>\n`;
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- if (relations.concrete_concepts && relations.concrete_concepts.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">具体概念</div>\n';
|
|
|
- relations.concrete_concepts.forEach(item => {
|
|
|
- const score = (item.score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-item concrete-concept-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${item.name}</div>\n`;
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- if (relations.abstract_concepts && relations.abstract_concepts.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">抽象概念</div>\n';
|
|
|
- relations.abstract_concepts.forEach(item => {
|
|
|
- const score = (item.score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-item abstract-concept-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${item.name}</div>\n`;
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- html += '</div>\n';
|
|
|
- html += '</div>\n';
|
|
|
-
|
|
|
- // 插入到画布
|
|
|
- canvas.insertAdjacentHTML('beforeend', html);
|
|
|
-}
|
|
|
-
|
|
|
-// 清空支撑关系画布
|
|
|
-function clearSupportCanvas() {
|
|
|
- const canvas = document.getElementById('support-canvas');
|
|
|
- if (!canvas) return;
|
|
|
-
|
|
|
- // 移除所有flow相关元素
|
|
|
- const flows = canvas.querySelectorAll('.support-flow');
|
|
|
- flows.forEach(flow => flow.remove());
|
|
|
-
|
|
|
- // 重新显示占位文本
|
|
|
- const placeholder = canvas.querySelector('.placeholder-text');
|
|
|
- if (placeholder) {
|
|
|
- placeholder.style.display = 'flex';
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// ===== Tab5 实质与形式双向支撑关系图功能 =====
|
|
|
-
|
|
|
-let selectedLeftTargetType = null; // 左侧选题点类型:inspiration/keypoint/purpose
|
|
|
-let selectedLeftTargetIdx = null; // 左侧选题点索引
|
|
|
-let selectedTab5SubstanceId = null; // 选中的实质点ID (Tab5专用)
|
|
|
-let selectedFormId = null; // 选中的形式点ID
|
|
|
-let selectedRightTargetType = null; // 右侧选题点类型:inspiration/keypoint/purpose
|
|
|
-let selectedRightTargetIdx = null; // 右侧选题点索引
|
|
|
-
|
|
|
-// 选择左侧选题点(来自实质点支撑关系)
|
|
|
-function selectLeftTarget(targetType, targetIdx) {
|
|
|
- if (typeof tab5Relationships === 'undefined') {
|
|
|
- console.error('tab5Relationships not defined');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 如果点击已选中的目标点,重置显示所有元素
|
|
|
- if (selectedLeftTargetType === targetType && selectedLeftTargetIdx === targetIdx) {
|
|
|
- resetTab5Selection();
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 重置其他选择
|
|
|
- resetTab5Selection();
|
|
|
-
|
|
|
- selectedLeftTargetType = targetType;
|
|
|
- selectedLeftTargetIdx = targetIdx;
|
|
|
-
|
|
|
- // 高亮选中的目标点
|
|
|
- document.querySelectorAll('.tab5-left-targets .target-card').forEach(card => {
|
|
|
- const dataType = card.getAttribute('data-type');
|
|
|
- const dataId = card.getAttribute('data-id');
|
|
|
- const fullId = `${targetType}-${targetIdx}`;
|
|
|
-
|
|
|
- if (dataId === fullId) {
|
|
|
- card.classList.add('selected');
|
|
|
- card.classList.remove('dimmed', 'hidden');
|
|
|
- } else {
|
|
|
- card.classList.remove('selected');
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 形式点全部隐藏
|
|
|
- document.querySelectorAll('.tab5-forms .form-card').forEach(card => {
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('selected', 'highlighted', 'dimmed');
|
|
|
- });
|
|
|
-
|
|
|
- // 右侧选题点全部隐藏
|
|
|
- document.querySelectorAll('.tab5-right-targets .target-card').forEach(card => {
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('selected', 'highlighted', 'dimmed');
|
|
|
- });
|
|
|
-
|
|
|
- // 获取反向关系:哪些实质点支撑这个目标点(直接使用完整的targetIdx)
|
|
|
- const targetId = `${targetType}-${targetIdx}`;
|
|
|
- const supportingSubstances = tab5Relationships.target_from_substance[targetId];
|
|
|
-
|
|
|
- if (supportingSubstances && supportingSubstances.length > 0) {
|
|
|
- // 高亮支撑的实质点
|
|
|
- const substanceIds = new Set(supportingSubstances.map(s => s.substance_id));
|
|
|
-
|
|
|
- document.querySelectorAll('.tab5-substances .substance-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (substanceIds.has(cardId)) {
|
|
|
- card.classList.add('highlighted');
|
|
|
- card.classList.remove('dimmed', 'hidden');
|
|
|
- } else {
|
|
|
- card.classList.remove('highlighted');
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 绘制连线(只连接当前显示的卡片)
|
|
|
- setTimeout(() => {
|
|
|
- drawFormAllConnections();
|
|
|
- }, 50);
|
|
|
-}
|
|
|
-
|
|
|
-// 选择实质点
|
|
|
-function selectSubstance(substanceId) {
|
|
|
- if (typeof tab5Relationships === 'undefined') {
|
|
|
- console.error('tab5Relationships not defined');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 如果点击已选中的实质点,重置显示所有元素
|
|
|
- if (selectedTab5SubstanceId === substanceId) {
|
|
|
- resetTab5Selection();
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 重置其他选择
|
|
|
- resetTab5Selection();
|
|
|
-
|
|
|
- selectedTab5SubstanceId = substanceId;
|
|
|
-
|
|
|
- // 高亮选中的实质点
|
|
|
- document.querySelectorAll('.tab5-substances .substance-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (cardId === substanceId) {
|
|
|
- card.classList.add('selected');
|
|
|
- card.classList.remove('dimmed', 'hidden');
|
|
|
- } else {
|
|
|
- card.classList.remove('selected');
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 形式点全部隐藏(先全部隐藏,后面再显示有关联的)
|
|
|
- document.querySelectorAll('.tab5-forms .form-card').forEach(card => {
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('selected', 'highlighted', 'dimmed');
|
|
|
- });
|
|
|
-
|
|
|
- // 右侧选题点全部隐藏
|
|
|
- document.querySelectorAll('.tab5-right-targets .target-card').forEach(card => {
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('selected', 'highlighted', 'dimmed');
|
|
|
- });
|
|
|
-
|
|
|
- // 获取这个实质点支撑的选题点
|
|
|
- const relations = tab5Relationships.substance_to_target[substanceId];
|
|
|
-
|
|
|
- if (relations) {
|
|
|
- const leftTargets = new Set();
|
|
|
-
|
|
|
- relations.inspiration.forEach(rel => leftTargets.add(rel.target_id));
|
|
|
- relations.purpose.forEach(rel => leftTargets.add(rel.target_id));
|
|
|
- relations.keypoint.forEach(rel => leftTargets.add(rel.target_id));
|
|
|
-
|
|
|
- // 高亮左侧相关选题点
|
|
|
- document.querySelectorAll('.tab5-left-targets .target-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (leftTargets.has(cardId)) {
|
|
|
- card.classList.add('highlighted');
|
|
|
- card.classList.remove('dimmed', 'hidden');
|
|
|
- } else {
|
|
|
- card.classList.remove('highlighted');
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 高亮支撑这个实质点的形式点(反向关系)
|
|
|
- const supportingForms = tab5Relationships.substance_from_form[substanceId];
|
|
|
- if (supportingForms && supportingForms.length > 0) {
|
|
|
- const formIds = new Set(supportingForms.map(f => f.form_id));
|
|
|
-
|
|
|
- document.querySelectorAll('.tab5-forms .form-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (formIds.has(cardId)) {
|
|
|
- card.classList.add('highlighted');
|
|
|
- card.classList.remove('dimmed', 'hidden');
|
|
|
- }
|
|
|
- // 注意:这里不对其他形式点再次隐藏,因为已经在前面全部隐藏了
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 绘制连线(只连接当前显示的卡片)
|
|
|
- setTimeout(() => {
|
|
|
- drawFormAllConnections();
|
|
|
- }, 50);
|
|
|
-}
|
|
|
-
|
|
|
-// 选择形式点
|
|
|
-function selectForm(formId) {
|
|
|
- if (typeof tab5Relationships === 'undefined') {
|
|
|
- console.error('tab5Relationships not defined');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 如果点击已选中的形式点,重置显示所有元素
|
|
|
- if (selectedFormId === formId) {
|
|
|
- resetTab5Selection();
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 重置其他选择
|
|
|
- resetTab5Selection();
|
|
|
-
|
|
|
- selectedFormId = formId;
|
|
|
-
|
|
|
- // 高亮选中的形式点
|
|
|
- document.querySelectorAll('.tab5-forms .form-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (cardId === formId) {
|
|
|
- card.classList.add('selected');
|
|
|
- card.classList.remove('dimmed', 'hidden');
|
|
|
- } else {
|
|
|
- card.classList.remove('selected');
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 实质点全部隐藏(先全部隐藏,后面再显示有关联的)
|
|
|
- document.querySelectorAll('.tab5-substances .substance-card').forEach(card => {
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('selected', 'highlighted', 'dimmed');
|
|
|
- });
|
|
|
-
|
|
|
- // 左侧选题点全部隐藏
|
|
|
- document.querySelectorAll('.tab5-left-targets .target-card').forEach(card => {
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('selected', 'highlighted', 'dimmed');
|
|
|
- });
|
|
|
-
|
|
|
- // 获取这个形式点支撑的选题点
|
|
|
- const relations = tab5Relationships.form_to_target[formId];
|
|
|
-
|
|
|
- if (relations) {
|
|
|
- const rightTargets = new Set();
|
|
|
-
|
|
|
- relations.inspiration.forEach(rel => rightTargets.add(rel.target_id));
|
|
|
- relations.purpose.forEach(rel => rightTargets.add(rel.target_id));
|
|
|
- relations.keypoint.forEach(rel => rightTargets.add(rel.target_id));
|
|
|
-
|
|
|
- // 高亮右侧相关选题点
|
|
|
- document.querySelectorAll('.tab5-right-targets .target-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (rightTargets.has(cardId)) {
|
|
|
- card.classList.add('highlighted');
|
|
|
- card.classList.remove('dimmed', 'hidden');
|
|
|
- } else {
|
|
|
- card.classList.remove('highlighted');
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 高亮这个形式点支撑的实质点
|
|
|
- const supportedSubstances = tab5Relationships.form_to_substance[formId];
|
|
|
- if (supportedSubstances && supportedSubstances.length > 0) {
|
|
|
- const substanceIds = new Set(supportedSubstances.map(s => s.substance_id));
|
|
|
-
|
|
|
- document.querySelectorAll('.tab5-substances .substance-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (substanceIds.has(cardId)) {
|
|
|
- card.classList.add('highlighted');
|
|
|
- card.classList.remove('dimmed', 'hidden');
|
|
|
- }
|
|
|
- // 注意:这里不对其他实质点再次隐藏,因为已经在前面全部隐藏了
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 绘制连线(只连接当前显示的卡片)
|
|
|
- setTimeout(() => {
|
|
|
- drawFormAllConnections();
|
|
|
- }, 50);
|
|
|
-}
|
|
|
-
|
|
|
-// 选择右侧选题点(来自形式点支撑关系)
|
|
|
-function selectRightTarget(targetType, targetIdx) {
|
|
|
- if (typeof tab5Relationships === 'undefined') {
|
|
|
- console.error('tab5Relationships not defined');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 如果点击已选中的目标点,重置显示所有元素
|
|
|
- if (selectedRightTargetType === targetType && selectedRightTargetIdx === targetIdx) {
|
|
|
- resetTab5Selection();
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 重置其他选择
|
|
|
- resetTab5Selection();
|
|
|
-
|
|
|
- selectedRightTargetType = targetType;
|
|
|
- selectedRightTargetIdx = targetIdx;
|
|
|
-
|
|
|
- // 高亮选中的目标点
|
|
|
- document.querySelectorAll('.tab5-right-targets .target-card').forEach(card => {
|
|
|
- const dataType = card.getAttribute('data-type');
|
|
|
- const dataId = card.getAttribute('data-id');
|
|
|
- const fullId = `${targetType}-${targetIdx}`;
|
|
|
-
|
|
|
- if (dataId === fullId) {
|
|
|
- card.classList.add('selected');
|
|
|
- card.classList.remove('dimmed', 'hidden');
|
|
|
- } else {
|
|
|
- card.classList.remove('selected');
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 实质点全部隐藏
|
|
|
- document.querySelectorAll('.tab5-substances .substance-card').forEach(card => {
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('selected', 'highlighted', 'dimmed');
|
|
|
- });
|
|
|
-
|
|
|
- // 左侧选题点全部隐藏
|
|
|
- document.querySelectorAll('.tab5-left-targets .target-card').forEach(card => {
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('selected', 'highlighted', 'dimmed');
|
|
|
- });
|
|
|
-
|
|
|
- // 获取反向关系:哪些形式点支撑这个目标点(直接使用完整的targetIdx)
|
|
|
- const targetId = `${targetType}-${targetIdx}`;
|
|
|
- const supportingForms = tab5Relationships.target_from_form[targetId];
|
|
|
-
|
|
|
- if (supportingForms && supportingForms.length > 0) {
|
|
|
- // 高亮支撑的形式点
|
|
|
- const formIds = new Set(supportingForms.map(f => f.form_id));
|
|
|
-
|
|
|
- document.querySelectorAll('.tab5-forms .form-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (formIds.has(cardId)) {
|
|
|
- card.classList.add('highlighted');
|
|
|
- card.classList.remove('dimmed', 'hidden');
|
|
|
- } else {
|
|
|
- card.classList.remove('highlighted');
|
|
|
- card.classList.add('hidden');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 绘制连线(只连接当前显示的卡片)
|
|
|
- setTimeout(() => {
|
|
|
- drawFormAllConnections();
|
|
|
- }, 50);
|
|
|
-}
|
|
|
-
|
|
|
-// 重置Tab5所有选择
|
|
|
-function resetTab5Selection() {
|
|
|
- selectedLeftTargetType = null;
|
|
|
- selectedLeftTargetIdx = null;
|
|
|
- selectedSubstanceId = null;
|
|
|
- selectedFormId = null;
|
|
|
- selectedRightTargetType = null;
|
|
|
- selectedRightTargetIdx = null;
|
|
|
-
|
|
|
- // 清除所有高亮、选中和隐藏状态
|
|
|
- document.querySelectorAll('#tab5 .target-card, #tab5 .substance-card, #tab5 .form-card').forEach(card => {
|
|
|
- card.classList.remove('selected', 'dimmed', 'highlighted', 'hidden');
|
|
|
- });
|
|
|
-
|
|
|
- // 清除所有连线
|
|
|
- const svg = document.getElementById('tab5-connection-svg');
|
|
|
- if (svg) {
|
|
|
- svg.innerHTML = '';
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 选择目标点(反向查看)
|
|
|
-function selectFormTarget(targetType, targetId) {
|
|
|
- if (typeof formSupportRelationships === 'undefined') {
|
|
|
- console.error('formSupportRelationships not defined');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- let fullTargetId;
|
|
|
- if (targetType === 'substance') {
|
|
|
- fullTargetId = `substance-${targetId}`;
|
|
|
- } else {
|
|
|
- fullTargetId = `${targetType}-${targetId}`;
|
|
|
- }
|
|
|
-
|
|
|
- // 如果点击已选中的目标点,不做处理
|
|
|
- if (selectedFormTargetId === fullTargetId) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- selectedFormId = null;
|
|
|
- selectedFormTargetId = fullTargetId;
|
|
|
-
|
|
|
- // 清空画布
|
|
|
- clearFormSupportCanvas();
|
|
|
-
|
|
|
- // 获取反向关系数据
|
|
|
- const relations = formSupportRelationships.target_to_form[fullTargetId];
|
|
|
- if (!relations) {
|
|
|
- console.error('No relations found for target:', fullTargetId);
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 清除所有形式点的状态
|
|
|
- document.querySelectorAll('.form-card').forEach(card => {
|
|
|
- card.classList.remove('selected', 'dimmed', 'highlighted');
|
|
|
- });
|
|
|
-
|
|
|
- // 高亮选中的目标点,其他变暗
|
|
|
- document.querySelectorAll('#tab5 .target-card').forEach(card => {
|
|
|
- if (card.getAttribute('data-id') === fullTargetId) {
|
|
|
- card.classList.add('selected');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- } else {
|
|
|
- card.classList.remove('selected');
|
|
|
- card.classList.add('dimmed');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 收集所有支撑该目标点的形式点ID
|
|
|
- const supportingForms = new Set();
|
|
|
-
|
|
|
- if (relations.concrete_element_forms) {
|
|
|
- relations.concrete_element_forms.forEach(item => supportingForms.add(item.form_id));
|
|
|
- }
|
|
|
- if (relations.concrete_concept_forms) {
|
|
|
- relations.concrete_concept_forms.forEach(item => supportingForms.add(item.form_id));
|
|
|
- }
|
|
|
- if (relations.overall_forms) {
|
|
|
- relations.overall_forms.forEach(item => supportingForms.add(item.form_id));
|
|
|
- }
|
|
|
- if (relations.forms) {
|
|
|
- relations.forms.forEach(item => supportingForms.add(item.form_id));
|
|
|
- }
|
|
|
-
|
|
|
- // 高亮支撑的形式点,其他变暗
|
|
|
- document.querySelectorAll('.form-card').forEach(card => {
|
|
|
- const cardId = card.getAttribute('data-id');
|
|
|
- if (supportingForms.has(cardId)) {
|
|
|
- card.classList.add('highlighted');
|
|
|
- card.classList.remove('dimmed');
|
|
|
- } else {
|
|
|
- card.classList.add('dimmed');
|
|
|
- card.classList.remove('highlighted');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 绘制反向支撑关系
|
|
|
- drawReverseFormSupportRelationships(fullTargetId, relations);
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制形式点支撑关系(形式点 → 目标点)
|
|
|
-function drawFormSupportRelationships(formId, relations) {
|
|
|
- const canvas = document.getElementById('form-support-canvas');
|
|
|
- if (!canvas) return;
|
|
|
-
|
|
|
- // 清空并移除占位文本
|
|
|
- const placeholder = canvas.querySelector('.placeholder-text');
|
|
|
- if (placeholder) {
|
|
|
- placeholder.style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 创建可视化内容
|
|
|
- let html = '<div class="support-flow">\n';
|
|
|
- html += '<div class="flow-title">支撑关系</div>\n';
|
|
|
-
|
|
|
- // 显示来源形式点
|
|
|
- html += '<div class="flow-source">\n';
|
|
|
- html += '<div class="flow-node form-flow-node">\n';
|
|
|
- html += `<div class="flow-node-label">${relations.type || '形式点'}</div>\n`;
|
|
|
- html += `<div class="flow-node-name">${relations.name || formId}</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- html += '</div>\n';
|
|
|
-
|
|
|
- // 显示支撑的目标点(分类)
|
|
|
- html += '<div class="flow-targets">\n';
|
|
|
-
|
|
|
- if (relations.inspiration && relations.inspiration.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">灵感点</div>\n';
|
|
|
- relations.inspiration.forEach(rel => {
|
|
|
- html += `<div class="flow-target-item inspiration-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${rel.point}</div>\n`;
|
|
|
- // 兼容新结构(支撑理由)和旧结构(相似度分数)
|
|
|
- if (rel.support_reason !== undefined) {
|
|
|
- html += `<div class="flow-target-score">支撑</div>\n`;
|
|
|
- } else if (rel.avg_score !== undefined) {
|
|
|
- const score = (rel.avg_score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- }
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- if (relations.purpose && relations.purpose.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">目的点</div>\n';
|
|
|
- relations.purpose.forEach(rel => {
|
|
|
- html += `<div class="flow-target-item purpose-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${rel.point}</div>\n`;
|
|
|
- // 兼容新结构(支撑理由)和旧结构(相似度分数)
|
|
|
- if (rel.support_reason !== undefined) {
|
|
|
- html += `<div class="flow-target-score">支撑</div>\n`;
|
|
|
- } else if (rel.avg_score !== undefined) {
|
|
|
- const score = (rel.avg_score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- }
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- if (relations.keypoint && relations.keypoint.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">关键点</div>\n';
|
|
|
- relations.keypoint.forEach(rel => {
|
|
|
- html += `<div class="flow-target-item keypoint-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${rel.point}</div>\n`;
|
|
|
- // 兼容新结构(支撑理由)和旧结构(相似度分数)
|
|
|
- if (rel.support_reason !== undefined) {
|
|
|
- html += `<div class="flow-target-score">支撑</div>\n`;
|
|
|
- } else if (rel.avg_score !== undefined) {
|
|
|
- const score = (rel.avg_score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- }
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- if (relations.substance && relations.substance.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">实质点</div>\n';
|
|
|
- relations.substance.forEach(rel => {
|
|
|
- const score = (rel.avg_score * 100).toFixed(0);
|
|
|
- let flowClass = '';
|
|
|
- if (rel.type === '具体元素') {
|
|
|
- flowClass = 'concrete-element-flow';
|
|
|
- } else if (rel.type === '具体概念') {
|
|
|
- flowClass = 'concrete-concept-flow';
|
|
|
- } else if (rel.type === '抽象概念') {
|
|
|
- flowClass = 'abstract-concept-flow';
|
|
|
- }
|
|
|
- html += `<div class="flow-target-item ${flowClass}">\n`;
|
|
|
- html += `<div class="flow-target-text">${rel.name} <span style="font-size:0.8em;color:#6c757d;">(${rel.type})</span></div>\n`;
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- html += '</div>\n';
|
|
|
- html += '</div>\n';
|
|
|
-
|
|
|
- // 插入到画布
|
|
|
- canvas.insertAdjacentHTML('beforeend', html);
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制反向形式点支撑关系(目标点 ← 形式点)
|
|
|
-function drawReverseFormSupportRelationships(targetId, relations) {
|
|
|
- const canvas = document.getElementById('form-support-canvas');
|
|
|
- if (!canvas) return;
|
|
|
-
|
|
|
- // 清空并移除占位文本
|
|
|
- const placeholder = canvas.querySelector('.placeholder-text');
|
|
|
- if (placeholder) {
|
|
|
- placeholder.style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 创建可视化内容
|
|
|
- let html = '<div class="support-flow reverse">\n';
|
|
|
- html += '<div class="flow-title">被以下形式点支撑</div>\n';
|
|
|
-
|
|
|
- // 显示目标点
|
|
|
- html += '<div class="flow-source">\n';
|
|
|
- html += '<div class="flow-node target-flow-node">\n';
|
|
|
- html += `<div class="flow-node-label">目标点</div>\n`;
|
|
|
- html += `<div class="flow-node-name">${targetId}</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- html += '</div>\n';
|
|
|
-
|
|
|
- // 显示支撑的形式点(分类)
|
|
|
- html += '<div class="flow-targets">\n';
|
|
|
-
|
|
|
- if (relations.concrete_element_forms && relations.concrete_element_forms.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">具体元素形式</div>\n';
|
|
|
- relations.concrete_element_forms.forEach(item => {
|
|
|
- const score = (item.score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-item concrete-element-form-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${item.name}</div>\n`;
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- if (relations.concrete_concept_forms && relations.concrete_concept_forms.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">具体概念形式</div>\n';
|
|
|
- relations.concrete_concept_forms.forEach(item => {
|
|
|
- const score = (item.score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-item concrete-concept-form-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${item.name}</div>\n`;
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- if (relations.overall_forms && relations.overall_forms.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">整体形式</div>\n';
|
|
|
- relations.overall_forms.forEach(item => {
|
|
|
- const score = (item.score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-item overall-form-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${item.name}</div>\n`;
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- if (relations.forms && relations.forms.length > 0) {
|
|
|
- html += '<div class="flow-target-group">\n';
|
|
|
- html += '<div class="flow-target-label">形式点</div>\n';
|
|
|
- relations.forms.forEach(item => {
|
|
|
- const score = (item.score * 100).toFixed(0);
|
|
|
- html += `<div class="flow-target-item form-flow">\n`;
|
|
|
- html += `<div class="flow-target-text">${item.name} <span style="font-size:0.8em;color:#6c757d;">(${item.type})</span></div>\n`;
|
|
|
- html += `<div class="flow-target-score">相似度: ${score}%</div>\n`;
|
|
|
- html += '</div>\n';
|
|
|
- });
|
|
|
- html += '</div>\n';
|
|
|
- }
|
|
|
-
|
|
|
- html += '</div>\n';
|
|
|
- html += '</div>\n';
|
|
|
-
|
|
|
- // 插入到画布
|
|
|
- canvas.insertAdjacentHTML('beforeend', html);
|
|
|
-}
|
|
|
-
|
|
|
-// 清空形式点支撑关系画布
|
|
|
-function clearFormSupportCanvas() {
|
|
|
- const canvas = document.getElementById('form-support-canvas');
|
|
|
- if (!canvas) return;
|
|
|
-
|
|
|
- // 移除所有flow相关元素
|
|
|
- const flows = canvas.querySelectorAll('.support-flow');
|
|
|
- flows.forEach(flow => flow.remove());
|
|
|
-
|
|
|
- // 重新显示占位文本
|
|
|
- const placeholder = canvas.querySelector('.placeholder-text');
|
|
|
- if (placeholder) {
|
|
|
- placeholder.style.display = 'flex';
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// ===== Tab5 连线绘制功能 =====
|
|
|
-
|
|
|
-// 绘制Tab5所有连线
|
|
|
-function drawFormAllConnections() {
|
|
|
- if (typeof tab5Relationships === 'undefined') {
|
|
|
- console.log('tab5Relationships not defined, skipping connection drawing');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const svg = document.getElementById('tab5-connection-svg');
|
|
|
- if (!svg) {
|
|
|
- console.log('SVG container not found');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 清空现有连线
|
|
|
- svg.innerHTML = '';
|
|
|
-
|
|
|
- // 1. 绘制左侧选题点到实质点的连线(反向关系)
|
|
|
- drawLeftTargetToSubstanceConnections(svg);
|
|
|
-
|
|
|
- // 2. 绘制实质点到形式点的连线(支撑关系)
|
|
|
- drawSubstanceToFormConnections(svg);
|
|
|
-
|
|
|
- // 3. 绘制形式点到右侧选题点的连线
|
|
|
- drawFormToRightTargetConnections(svg);
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制左侧选题点到实质点的连线
|
|
|
-function drawLeftTargetToSubstanceConnections(svg) {
|
|
|
- const targetFromSubstance = tab5Relationships.target_from_substance;
|
|
|
-
|
|
|
- Object.keys(targetFromSubstance).forEach(targetId => {
|
|
|
- const substances = targetFromSubstance[targetId];
|
|
|
-
|
|
|
- substances.forEach(substanceData => {
|
|
|
- const sourceCard = document.querySelector(`.tab5-left-targets .target-card[data-id="${targetId}"]`);
|
|
|
- const targetCard = document.querySelector(`.tab5-substances .substance-card[data-id="${substanceData.substance_id}"]`);
|
|
|
-
|
|
|
- if (sourceCard && targetCard && !sourceCard.classList.contains('hidden') && !targetCard.classList.contains('hidden')) {
|
|
|
- drawTab5Connection(
|
|
|
- svg,
|
|
|
- sourceCard,
|
|
|
- targetCard,
|
|
|
- 'left-target-substance',
|
|
|
- targetId,
|
|
|
- substanceData.substance_id,
|
|
|
- {
|
|
|
- score: substanceData.score,
|
|
|
- substanceName: substanceData.name,
|
|
|
- type: substanceData.type
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制实质点到形式点的连线
|
|
|
-function drawSubstanceToFormConnections(svg) {
|
|
|
- const formToSubstance = tab5Relationships.form_to_substance;
|
|
|
-
|
|
|
- Object.keys(formToSubstance).forEach(formId => {
|
|
|
- const substances = formToSubstance[formId];
|
|
|
-
|
|
|
- substances.forEach(substanceData => {
|
|
|
- const sourceCard = document.querySelector(`.tab5-substances .substance-card[data-id="${substanceData.substance_id}"]`);
|
|
|
- const targetCard = document.querySelector(`.tab5-forms .form-card[data-id="${formId}"]`);
|
|
|
-
|
|
|
- if (sourceCard && targetCard && !sourceCard.classList.contains('hidden') && !targetCard.classList.contains('hidden')) {
|
|
|
- drawTab5Connection(
|
|
|
- svg,
|
|
|
- sourceCard,
|
|
|
- targetCard,
|
|
|
- 'substance-form',
|
|
|
- substanceData.substance_id,
|
|
|
- formId,
|
|
|
- {
|
|
|
- substanceName: substanceData.name,
|
|
|
- formName: tab5Relationships.form_to_target[formId]?.name || ''
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制形式点到右侧选题点的连线
|
|
|
-function drawFormToRightTargetConnections(svg) {
|
|
|
- const formToTarget = tab5Relationships.form_to_target;
|
|
|
-
|
|
|
- Object.keys(formToTarget).forEach(formId => {
|
|
|
- const relations = formToTarget[formId];
|
|
|
-
|
|
|
- // 绘制到灵感点的连线
|
|
|
- relations.inspiration.forEach(rel => {
|
|
|
- const sourceCard = document.querySelector(`.tab5-forms .form-card[data-id="${formId}"]`);
|
|
|
- const targetCard = document.querySelector(`.tab5-right-targets .target-card[data-id="${rel.target_id}"]`);
|
|
|
-
|
|
|
- if (sourceCard && targetCard && !sourceCard.classList.contains('hidden') && !targetCard.classList.contains('hidden')) {
|
|
|
- // 兼容新结构(支撑)和旧结构(相似度分数)
|
|
|
- const score = rel.avg_score !== undefined ? rel.avg_score : (rel.support_reason !== undefined ? 1.0 : 0.5);
|
|
|
- drawTab5Connection(
|
|
|
- svg,
|
|
|
- sourceCard,
|
|
|
- targetCard,
|
|
|
- 'form-inspiration',
|
|
|
- formId,
|
|
|
- rel.target_id,
|
|
|
- {
|
|
|
- score: score,
|
|
|
- point: rel.point,
|
|
|
- formName: relations.name
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 绘制到目的点的连线
|
|
|
- relations.purpose.forEach(rel => {
|
|
|
- const sourceCard = document.querySelector(`.tab5-forms .form-card[data-id="${formId}"]`);
|
|
|
- const targetCard = document.querySelector(`.tab5-right-targets .target-card[data-id="${rel.target_id}"]`);
|
|
|
-
|
|
|
- if (sourceCard && targetCard && !sourceCard.classList.contains('hidden') && !targetCard.classList.contains('hidden')) {
|
|
|
- // 兼容新结构(支撑)和旧结构(相似度分数)
|
|
|
- const score = rel.avg_score !== undefined ? rel.avg_score : (rel.support_reason !== undefined ? 1.0 : 0.5);
|
|
|
- drawTab5Connection(
|
|
|
- svg,
|
|
|
- sourceCard,
|
|
|
- targetCard,
|
|
|
- 'form-purpose',
|
|
|
- formId,
|
|
|
- rel.target_id,
|
|
|
- {
|
|
|
- score: score,
|
|
|
- point: rel.point,
|
|
|
- formName: relations.name
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 绘制到关键点的连线
|
|
|
- relations.keypoint.forEach(rel => {
|
|
|
- const sourceCard = document.querySelector(`.tab5-forms .form-card[data-id="${formId}"]`);
|
|
|
- const targetCard = document.querySelector(`.tab5-right-targets .target-card[data-id="${rel.target_id}"]`);
|
|
|
-
|
|
|
- if (sourceCard && targetCard && !sourceCard.classList.contains('hidden') && !targetCard.classList.contains('hidden')) {
|
|
|
- // 兼容新结构(支撑)和旧结构(相似度分数)
|
|
|
- const score = rel.avg_score !== undefined ? rel.avg_score : (rel.support_reason !== undefined ? 1.0 : 0.5);
|
|
|
- drawTab5Connection(
|
|
|
- svg,
|
|
|
- sourceCard,
|
|
|
- targetCard,
|
|
|
- 'form-keypoint',
|
|
|
- formId,
|
|
|
- rel.target_id,
|
|
|
- {
|
|
|
- score: score,
|
|
|
- point: rel.point,
|
|
|
- formName: relations.name
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 绘制单条Tab5连线
|
|
|
-function drawTab5Connection(svg, sourceCard, targetCard, connectionType, sourceId, targetId, metadata) {
|
|
|
- const svgContainer = svg.parentElement;
|
|
|
- const containerRect = svgContainer.getBoundingClientRect();
|
|
|
- const sourceRect = sourceCard.getBoundingClientRect();
|
|
|
- const targetRect = targetCard.getBoundingClientRect();
|
|
|
-
|
|
|
- // 计算连线起点和终点
|
|
|
- let x1, y1, x2, y2;
|
|
|
-
|
|
|
- if (connectionType === 'left-target-substance') {
|
|
|
- // 左侧选题点到实质点:从右边连到左边
|
|
|
- x1 = sourceRect.right - containerRect.left;
|
|
|
- y1 = sourceRect.top + sourceRect.height / 2 - containerRect.top;
|
|
|
- x2 = targetRect.left - containerRect.left;
|
|
|
- y2 = targetRect.top + targetRect.height / 2 - containerRect.top;
|
|
|
- } else if (connectionType === 'substance-form') {
|
|
|
- // 实质点到形式点:从右边连到左边
|
|
|
- x1 = sourceRect.right - containerRect.left;
|
|
|
- y1 = sourceRect.top + sourceRect.height / 2 - containerRect.top;
|
|
|
- x2 = targetRect.left - containerRect.left;
|
|
|
- y2 = targetRect.top + targetRect.height / 2 - containerRect.top;
|
|
|
- } else {
|
|
|
- // 形式点到右侧选题点:从右边连到左边
|
|
|
- x1 = sourceRect.right - containerRect.left;
|
|
|
- y1 = sourceRect.top + sourceRect.height / 2 - containerRect.top;
|
|
|
- x2 = targetRect.left - containerRect.left;
|
|
|
- y2 = targetRect.top + targetRect.height / 2 - containerRect.top;
|
|
|
- }
|
|
|
-
|
|
|
- // 创建贝塞尔曲线路径
|
|
|
- const midX = (x1 + x2) / 2;
|
|
|
- const path = `M ${x1} ${y1} Q ${midX} ${y1}, ${midX} ${(y1 + y2) / 2} T ${x2} ${y2}`;
|
|
|
-
|
|
|
- // 创建path元素
|
|
|
- const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
|
- pathElement.setAttribute('d', path);
|
|
|
- pathElement.setAttribute('class', `tab5-connection-line ${connectionType}`);
|
|
|
- pathElement.setAttribute('fill', 'none');
|
|
|
- pathElement.setAttribute('stroke-width', '2');
|
|
|
- pathElement.setAttribute('data-source-id', sourceId);
|
|
|
- pathElement.setAttribute('data-target-id', targetId);
|
|
|
- pathElement.setAttribute('data-connection-type', connectionType);
|
|
|
-
|
|
|
- // 保存元数据以供点击时使用
|
|
|
- pathElement.setAttribute('data-metadata', JSON.stringify(metadata));
|
|
|
-
|
|
|
- // 添加点击事件
|
|
|
- pathElement.style.cursor = 'pointer';
|
|
|
- pathElement.addEventListener('click', function(e) {
|
|
|
- e.stopPropagation();
|
|
|
- showConnectionDetail(connectionType, sourceId, targetId, metadata);
|
|
|
- });
|
|
|
-
|
|
|
- // 添加hover效果
|
|
|
- pathElement.addEventListener('mouseenter', function() {
|
|
|
- this.setAttribute('stroke-width', '4');
|
|
|
- this.style.filter = 'drop-shadow(0 0 6px rgba(0,0,0,0.3))';
|
|
|
- });
|
|
|
-
|
|
|
- pathElement.addEventListener('mouseleave', function() {
|
|
|
- this.setAttribute('stroke-width', '2');
|
|
|
- this.style.filter = 'none';
|
|
|
- });
|
|
|
-
|
|
|
- svg.appendChild(pathElement);
|
|
|
-}
|
|
|
-
|
|
|
-// 显示连线详情模态框
|
|
|
-function showConnectionDetail(connectionType, sourceId, targetId, metadata) {
|
|
|
- // 创建模态框
|
|
|
- const modal = document.createElement('div');
|
|
|
- modal.className = 'connection-modal-backdrop';
|
|
|
- modal.onclick = function(e) {
|
|
|
- if (e.target === modal) {
|
|
|
- document.body.removeChild(modal);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 创建模态框内容
|
|
|
- const modalContent = document.createElement('div');
|
|
|
- modalContent.className = 'connection-modal-content';
|
|
|
- modalContent.onclick = function(e) {
|
|
|
- e.stopPropagation();
|
|
|
- };
|
|
|
-
|
|
|
- // 构建内容
|
|
|
- let html = '<div class="modal-header">';
|
|
|
- html += '<h3>连线关系详情</h3>';
|
|
|
- html += '<button class="modal-close" onclick="this.closest(\'.connection-modal-backdrop\').remove()">×</button>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- html += '<div class="modal-body">';
|
|
|
-
|
|
|
- // 根据连接类型显示不同内容
|
|
|
- if (connectionType === 'left-target-substance') {
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">连接类型:</div>';
|
|
|
- html += '<div class="connection-value">选题点 → 实质点</div>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">实质点:</div>';
|
|
|
- html += '<div class="connection-value">' + (metadata.substanceName || sourceId) + '</div>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">实质点类型:</div>';
|
|
|
- html += '<div class="connection-value">' + (metadata.type || '-') + '</div>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- if (metadata.score !== undefined) {
|
|
|
- const scorePercent = (metadata.score * 100).toFixed(1);
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">相似度评分:</div>';
|
|
|
- html += '<div class="connection-value score-value">' + scorePercent + '%</div>';
|
|
|
- html += '</div>';
|
|
|
- }
|
|
|
-
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">说明:</div>';
|
|
|
- html += '<div class="connection-value">该实质点支撑了这个选题点的内容,相似度越高表示关联性越强</div>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- } else if (connectionType === 'substance-form') {
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">连接类型:</div>';
|
|
|
- html += '<div class="connection-value">实质点 → 形式点</div>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">实质点:</div>';
|
|
|
- html += '<div class="connection-value">' + (metadata.substanceName || sourceId) + '</div>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">形式点:</div>';
|
|
|
- html += '<div class="connection-value">' + (metadata.formName || targetId) + '</div>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">说明:</div>';
|
|
|
- html += '<div class="connection-value">该形式点是对实质点的具体表现形式</div>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- } else if (connectionType.startsWith('form-')) {
|
|
|
- const targetType = connectionType.split('-')[1]; // inspiration, purpose, keypoint
|
|
|
- const targetTypeLabel = {
|
|
|
- 'inspiration': '灵感点',
|
|
|
- 'purpose': '目的点',
|
|
|
- 'keypoint': '关键点'
|
|
|
- }[targetType] || targetType;
|
|
|
-
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">连接类型:</div>';
|
|
|
- html += '<div class="connection-value">形式点 → ' + targetTypeLabel + '</div>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">形式点:</div>';
|
|
|
- html += '<div class="connection-value">' + (metadata.formName || sourceId) + '</div>';
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- if (metadata.point) {
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">' + targetTypeLabel + ':</div>';
|
|
|
- html += '<div class="connection-value">' + metadata.point + '</div>';
|
|
|
- html += '</div>';
|
|
|
- }
|
|
|
-
|
|
|
- if (metadata.score !== undefined) {
|
|
|
- const scorePercent = (metadata.score * 100).toFixed(1);
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">相似度评分:</div>';
|
|
|
- html += '<div class="connection-value score-value">' + scorePercent + '%</div>';
|
|
|
- html += '</div>';
|
|
|
- }
|
|
|
-
|
|
|
- html += '<div class="connection-detail-section">';
|
|
|
- html += '<div class="connection-label">说明:</div>';
|
|
|
- html += '<div class="connection-value">该形式点支撑了这个选题点的呈现,相似度越高表示形式与选题的契合度越高</div>';
|
|
|
- html += '</div>';
|
|
|
- }
|
|
|
-
|
|
|
- html += '</div>';
|
|
|
-
|
|
|
- modalContent.innerHTML = html;
|
|
|
- modal.appendChild(modalContent);
|
|
|
- document.body.appendChild(modal);
|
|
|
-}
|