diff --git a/vue/src/system/GraphQA.vue b/vue/src/system/GraphQA.vue index 2306b22..1400339 100644 --- a/vue/src/system/GraphQA.vue +++ b/vue/src/system/GraphQA.vue @@ -130,12 +130,8 @@ export default { }, // ======================================================================= - mounted() { - this.$nextTick(() => { - setTimeout(() => { - this.getDefault() - }, 300); - }); + async mounted() { + await this.getDefault() // =============== 👇【新增】页面加载时从 localStorage 恢复数据 =============== this.restoreDataFromLocalStorage(); // ======================================================================= @@ -277,13 +273,12 @@ export default { // === 1. 构建 nodeId → label 映射 === const nodeIdToEnLabel = {}; data.nodes.forEach(node => { - nodeIdToEnLabel[node.id] = node.data.label; // e.g. "Disease" + nodeIdToEnLabel[node.id] = node.data.type; // e.g. "Disease" }); // === 2. 处理节点：根据自身 label 设置样式 === const updatedNodes = data.nodes.map(node => { - const enLabel = node.data.label; - const zhLabel = this.enToZhLabelMap[enLabel] || '其他'; // 默认回退到“其他” - const styleConf = this.parsedStyles[zhLabel] || {}; + const enLabel = node.data.type; + const styleConf = this.parsedStyles[enLabel] || {}; return { ...node, type: styleConf.nodeShape || this.nodeShape, @@ -304,8 +299,7 @@ export default { const updatedEdges = data.edges.map(edge => { console.log(edge) const sourceEnLabel = nodeIdToEnLabel[edge.source]; // e.g. "Disease" - const sourceZhLabel = this.enToZhLabelMap[sourceEnLabel] || '其他'; - const styleConf = this.parsedStyles[sourceZhLabel] || {}; + const styleConf = this.parsedStyles[sourceEnLabel] || {}; return { ...edge, @@ -342,14 +336,16 @@ export default { this._graph.destroy() this._graph = null; } + console.log(data) // === 1. 构建 nodeId → label 映射 === const nodeIdToEnLabel = {}; data.nodes.forEach(node => { - nodeIdToEnLabel[node.id] = node.type; // e.g. "Disease" + nodeIdToEnLabel[node.id] = node.data.type; // e.g. "Disease" }); + console.log(nodeIdToEnLabel) // === 2. 处理节点：根据自身 label 设置样式 === const updatedNodes = data.nodes.map(node => { - const enLabel = node.data.label; + const enLabel = node.data.type; const styleConf = this.parsedStyles[enLabel] || {}; return { ...node, @@ -478,7 +474,6 @@ export default { edge: { style: { labelText: (d) => { - console.log(d) return d.data.label}, // stroke: (d) => { // const targetLabel = this._nodeLabelMap.get(d.source); // d.target 是目标节点 ID diff --git a/vue/src/system/GraphStyle.vue b/vue/src/system/GraphStyle.vue index a120386..04497c8 100644 --- a/vue/src/system/GraphStyle.vue +++ b/vue/src/system/GraphStyle.vue @@ -52,7 +52,8 @@
- + +
@@ -80,14 +81,16 @@
- + +
- + +
@@ -136,7 +139,8 @@
- + +
@@ -164,7 +168,8 @@
- + +
@@ -507,6 +512,7 @@ export default { }, syncAndRefresh() { const label = tagToLabelMap[this.activeTags]; + console.log(this.nodeFill) if (label) { this.tagStyles[label] = { nodeShowLabel: this.nodeShowLabel, nodeFontFamily: this.nodeFontFamily, nodeFontSize: this.nodeFontSize, @@ -744,16 +750,7 @@ export default { // 4. 【新增】拦截逻辑：如果标签不全，弹出提示并返回 if (missingTags.length > 0) { - return ElMessageBox.alert( - `该方案配置不完整，无法应用。必须配齐 5 个核心标签。` + - `
目前缺失：${missingTags.join('、')}`, - '校验未通过', - { - confirmButtonText: '我知道了', - dangerouslyUseHTMLString: true, - type: 'warning' - } - ); + return ElMessage.warning('该方案配置不完整，无法应用。目前缺少：'+missingTags.join('、')); } // 获取当前正在使用的所有标签名（用于外部排他） const currentlyUsingLabels = []; @@ -902,11 +899,7 @@ export default { .some(g => g.configs.some(c => this.usingConfigIds.includes(c.id))); if (isAnyCheckedConfigUsing || isAnyCheckedGroupUsing) { - return ElMessageBox.alert( - '选中的项目中包含“正在应用”的配置，请先取消应用后再执行删除操作。', - '无法执行删除', - { type: 'error', confirmButtonText: '我知道了' } - ); + return ElMessage.warning('选中的项目中包含“正在应用”的配置，请先取消应用后再执行删除操作。'); } // 3. 最小保留数判断 (针对方案组) @@ -1144,9 +1137,11 @@ export default { .form-group select, .form-group input[type="number"] { flex: 1; padding: 5px; - border: 1px solid #e2e8f0; + border: none; border-radius: 4px; width: 100px; + box-shadow: 0 0 0 2px #EBF0FF; + outline: none; } .slider-wrapper { @@ -1178,14 +1173,11 @@ export default { .val-text-black { color: #000; - font-weight: bold; font-size: 13px; min-width: 35px; } .color-picker-border { - padding: 3px; - border: 1px solid #e2e8f0; border-radius: 4px; display: flex; } @@ -1489,7 +1481,6 @@ export default { \ No newline at end of file diff --git a/vue/src/system/KGData.vue b/vue/src/system/KGData.vue index c3912f0..868823a 100644 --- a/vue/src/system/KGData.vue +++ b/vue/src/system/KGData.vue @@ -656,8 +656,8 @@ onMounted(() => { .folder-tab-item { padding: 8px 20px; font-size: 12px; color: #86909c; cursor: pointer; background-color: #ecf2ff; border: 1px solid #dcdfe6; border-bottom: none; border-radius: 8px 8px 0 0; } .folder-tab-item.active { background-color: #f1f6ff !important; color: #2869ff; font-weight: bold; border: 2px solid #6896ff; border-bottom: 2px solid #ffffff; margin-bottom: -1px; z-index: 3; } .data-card-container { background: #ffffff; border-radius: 30px; padding: 20px 20px; box-shadow: 2px -1px 14px 4px #E1EAFF; border: 1px solid #eff4ff; position: relative; z-index: 4; } -.filter-bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; } -.filter-inputs { display: flex; gap: 35px; flex-wrap: nowrap;margin-right: 20px; } +.filter-bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px;gap: 20px } +.filter-inputs { display: flex; gap: 35px; flex-wrap: nowrap;} .input-group-inline { display: flex; align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap; } .filter-label-text { font-size: 14px; color: #165dff; font-weight: 600; flex-shrink: 0; } .search-input,.input-group-inline :deep(.el-input) { width: 200px !important;box-shadow: 0 0 0 2px #EBF0FF;border: none;border-radius: 5px; } @@ -817,18 +817,7 @@ onMounted(() => { min-height: 300px; } -.filter-bar { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 30px; -} -.filter-inputs { - display: flex; - gap: 35px; - flex-wrap: nowrap; -} .input-group-inline { display: flex; @@ -845,9 +834,6 @@ onMounted(() => { flex-shrink: 0; } -.search-input, .search-select { - width: 160px !important; -} .btn-search-ref { background: #165dff !important;