hanyuqing
/
KGPython
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'hanyuqing' of http://124.70.32.114:3100/hanyuqing/KGPython into mh 

# Conflicts:
#	vue/src/system/GraphDemo.vue
#	vue/src/system/GraphStyle.vue
mh
hanyuqing 3 months ago
parent
8397cfff53 4e2e024f2b
commit
0a1c63cef3
4 changed files with 325 additions and 457 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      vue/src/system/GraphBuilder.vue
  2. 80
      vue/src/system/GraphDemo.vue
  3. 438
      vue/src/system/GraphQA.vue
  4. 16
      vue/src/system/GraphStyle.vue

2
vue/src/system/GraphBuilder.vue
View File

@ -335,11 +335,13 @@ export default {
allSelect(msg){ allSelect(msg){
if (msg.entities && msg.entities.length > 0) { if (msg.entities && msg.entities.length > 0) {
msg.entities.forEach(ent => { msg.entities.forEach(ent => {
ent.selected=true
this.selectedEntities.push(ent); this.selectedEntities.push(ent);
}); });
} }
if (msg.relations && msg.relations.length > 0) { if (msg.relations && msg.relations.length > 0) {
msg.relations.forEach(rel => { msg.relations.forEach(rel => {
rel.selected=true
this.selectedRelations.push(rel); this.selectedRelations.push(rel);
}); });
} }

80
vue/src/system/GraphDemo.vue
View File

@ -134,13 +134,6 @@
</div> </div>
</div> </div>
<div class="graph-viewport"> <div class="graph-viewport">
<GraphToolbar
ref="toolbarRef"
v-if="_graph"
:graph="_graph"
class="toolbar-position"
style="position: absolute; top: 40px; left: 750px; z-index: 1000; width: auto;"
/>
<div ref="graphContainer" class="graph-container" id="container"></div> <div ref="graphContainer" class="graph-container" id="container"></div>
</div> </div>
</section> </section>
@ -162,18 +155,14 @@ import {
import {Graph, Tooltip} from '@antv/g6'; import {Graph, Tooltip} from '@antv/g6';
import Menu from "@/components/Menu.vue"; import Menu from "@/components/Menu.vue";
import {a} from "vue-router/dist/devtools-EWN81iOl.mjs"; import {a} from "vue-router/dist/devtools-EWN81iOl.mjs";
import GraphToolbar from "@/components/GraphToolbar.vue";
import Fuse from 'fuse.js'; import Fuse from 'fuse.js';
import {ElMessage} from "element-plus";
import {getGraphStyleActive} from "@/api/style"; import {getGraphStyleActive} from "@/api/style";
export default { export default {
name: 'Display', name: 'Display',
components: {Menu, GraphToolbar}, components: {Menu},
data() { data() {
return { return {
_graph: null,
G6: null, // 添加这个 G6: null, // 添加这个
// 节点样式 // 节点样式
nodeShowLabel: true, nodeShowLabel: true,
@ -1212,67 +1201,10 @@ export default {
${sourceName} — ${rel} —> ${targetName} ${sourceName} — ${rel} —> ${targetName}
</div>`; </div>`;
}, },
}, },])
{
type: 'toolbar',
onClick: (id) => {
if (id === 'reset') {
// 1. 如果是重置，直接在本地执行方法
this.localResetGraph();
} else if (this.$refs.toolbarRef) {
// 2. 其他功能（放大、导出等）继续交给组件处理
this.$refs.toolbarRef.handleToolbarAction(id);
}
},
getItems: () => {
return [
{id: 'zoom-in', value: 'zoom-in', title: '放大'},
{id: 'zoom-out', value: 'zoom-out', title: '缩小'},
{id: 'auto-fit', value: 'auto-fit', title: '聚焦'},
{id: 'reset', value: 'reset', title: '重置'},
{id: 'export', value: 'export', title: '导出图谱'},
];
},
},
])
}
},
localResetGraph() {
// 1. 检查图表实例和数据是否存在
if (!this._graph) return;
if (!this.defaultData || !this.defaultData.nodes) {
this.$message.warning("未找到可重置的数据源");
return;
}
try {
// 2. 彻底清理鼠标指针状态
const canvas = this._graph.getCanvas();
if (canvas && typeof canvas.setCursor === 'function') {
canvas.setCursor('default');
} }
// 3. 彻底销毁当前图谱实例
// 销毁会移除所有 DOM 节点和事件监听，彻底解决 EventBoundary 问题
this._graph.destroy();
this._graph = null;
// 4. 重新初始化
this.$nextTick(() => {
// initGraph 内部会自动读取 this.defaultData
this.initGraph();
// 5. 重新构建分类索引（因为 destroy 也会清空之前的交互索引）
this.buildCategoryIndex();
this.$message.success("图谱已重置");
});
} catch (err) {
console.error('重置图谱失败:', err);
// 降级处理：如果销毁失败，尝试刷新页面（可选）
// location.reload();
}
}, },
updateGraph(data) { updateGraph(data) {
@ -1544,7 +1476,6 @@ button:hover {
width: 16px; width: 16px;
} }
/*.search-btn:hover { /*.search-btn:hover {
background-color: rgba(34, 101, 244, 0.64); background-color: rgba(34, 101, 244, 0.64);
border-radius: 50%; border-radius: 50%;
@ -1593,13 +1524,11 @@ button:hover {
padding: 0 2px 0px 15px; padding: 0 2px 0px 15px;
justify-content: space-between; justify-content: space-between;
} }
.d-title{ .d-title{
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
} }
.d-count{ .d-count{
font-size: 9px; font-size: 9px;
background-color: #5989F0; background-color: #5989F0;
@ -1647,13 +1576,11 @@ button:hover {
text-align: left; text-align: left;
font-size: 12px; font-size: 12px;
} }
.disease-body{ .disease-body{
width: 360px; width: 360px;
overflow: scroll; overflow: scroll;
height: 74vh; height: 74vh;
} }
/* 隐藏滚动条，但允许滚动 */ /* 隐藏滚动条，但允许滚动 */
.disease-body { .disease-body {
/* Firefox */ /* Firefox */
@ -1706,6 +1633,7 @@ button:hover {
} }
/* 自定义选中后的样式 */ /* 自定义选中后的样式 */
/deep/ .radio-disease .el-radio__input.is-checked+.el-radio__label { /deep/ .radio-disease .el-radio__input.is-checked+.el-radio__label {
color: rgb(153, 10, 0); color: rgb(153, 10, 0);
@ -1714,11 +1642,9 @@ button:hover {
/deep/ .radio-drug .el-radio__input.is-checked+.el-radio__label { /deep/ .radio-drug .el-radio__input.is-checked+.el-radio__label {
color: #52c41a; color: #52c41a;
} }
/deep/ .radio-check .el-radio__input.is-checked+.el-radio__label { /deep/ .radio-check .el-radio__input.is-checked+.el-radio__label {
color: #1890ff; color: #1890ff;
} }
/* 自定义下拉样式 */ /* 自定义下拉样式 */
.select-container { .select-container {
position: relative; position: relative;

438
vue/src/system/GraphQA.vue
View File

@ -63,12 +63,6 @@
<!-- 右侧：知识图谱 --> <!-- 右侧：知识图谱 -->
<div class="knowledge-graph"> <div class="knowledge-graph">
<GraphToolbar
v-if="_graph"
:graph="_graph"
ref="toolbarRef"
/>
<div ref="graphContainer" class="graph-container" id="container"></div> <div ref="graphContainer" class="graph-container" id="container"></div>
</div> </div>
</div> </div>
@ -81,19 +75,19 @@
import Menu from "@/components/Menu.vue"; import Menu from "@/components/Menu.vue";
import {qaAnalyze} from "@/api/qa"; import {qaAnalyze} from "@/api/qa";
import {Graph} from "@antv/g6"; import {Graph} from "@antv/g6";
import {getGraph} from "@/api/graph";
import {getGraphStyleActive} from "@/api/style"; import {getGraphStyleActive} from "@/api/style";
import GraphToolbar from '@/components/GraphToolbar.vue';
export default { export default {
name: 'GraghQA', name: 'GraghQA',
components: { Menu, GraphToolbar }, components: {Menu},
data() { data() {
return { return {
_graph: null,
query:"", query:"",
answers:[], answers:[],
selected:0, selected:0,
// 节点基础样式 // 节点样式
nodeShowLabel: true, nodeShowLabel: true,
nodeFontSize: 12, nodeFontSize: 12,
nodeFontColor: '#fff', nodeFontColor: '#fff',
@ -104,7 +98,7 @@ export default {
nodeLineWidth: 2, nodeLineWidth: 2,
nodeFontFamily: 'Microsoft YaHei, sans-serif', nodeFontFamily: 'Microsoft YaHei, sans-serif',
// 边基础样式 // 边样式
edgeShowLabel: true, edgeShowLabel: true,
edgeFontSize: 10, edgeFontSize: 10,
edgeFontColor: '#666666', edgeFontColor: '#666666',
@ -114,6 +108,7 @@ export default {
edgeEndArrow: true, edgeEndArrow: true,
edgeFontFamily: 'Microsoft YaHei, sans-serif', edgeFontFamily: 'Microsoft YaHei, sans-serif',
queryRecord:"", queryRecord:"",
isSending:false, isSending:false,
configs:[], configs:[],
@ -125,31 +120,41 @@ export default {
Symptom: '症状', Symptom: '症状',
Other: '其他' Other: '其他'
} }
}; };
}, },
// =============== 👇【新增】组件内路由守卫：离开当前路由时触发 ===============
beforeRouteLeave(to, from, next) { beforeRouteLeave(to, from, next) {
this.saveDataToLocalStorage(); this.saveDataToLocalStorage();
next(); next(); // 允许导航
}, },
// =======================================================================
async mounted() { async mounted() {
await this.getDefault(); await this.getDefault()
// =============== 👇【新增】页面加载时从 localStorage 恢复数据 ===============
this.restoreDataFromLocalStorage(); this.restoreDataFromLocalStorage();
// =======================================================================
// this.answers=[]
// 如果有初始数据，可以初始化图谱（可选）
if (this.answers.length > 0) { if (this.answers.length > 0) {
this.initGraph(this.answers[this.selected].result); this.initGraph(this.answers[0].result);
// console.log(this.answers[0].result)
} }
}, },
beforeUnmount() { beforeUnmount() {
// =============== 👇【新增】组件销毁前也保存一次（兼容非路由跳转场景）==============
this.saveDataToLocalStorage(); this.saveDataToLocalStorage();
// 移除页面卸载监听（如果用了 beforeunload）
window.removeEventListener('beforeunload', this.handleBeforeUnload); window.removeEventListener('beforeunload', this.handleBeforeUnload);
// =======================================================================
}, },
created() { created() {
// =============== 👇【新增】监听页面刷新/关闭事件 ===============
window.addEventListener('beforeunload', this.handleBeforeUnload); window.addEventListener('beforeunload', this.handleBeforeUnload);
// =======================================================================
}, },
methods: { methods: {
safeParseStyles(stylesStr) { safeParseStyles(stylesStr) {
try { try {
@ -159,7 +164,6 @@ export default {
return {}; return {};
} }
}, },
async getDefault(){ async getDefault(){
const response = await getGraphStyleActive(); const response = await getGraphStyleActive();
const data = response.data; const data = response.data;
@ -168,23 +172,27 @@ export default {
this.parsedStyles = {}; this.parsedStyles = {};
return; return;
} }
// 只取第一个（即 is_active=1 的组）
const activeGroup = data[0]; const activeGroup = data[0];
this.configs = Array.isArray(activeGroup.configs) ? activeGroup.configs : []; this.configs = Array.isArray(activeGroup.configs) ? activeGroup.configs : [];
// 构建 label -> style 映射
const styleMap = {}; const styleMap = {};
this.configs.forEach(config => { this.configs.forEach(config => {
const label = config.current_label; const label = config.current_label;
styleMap[label] = this.safeParseStyles(config.styles); styleMap[label] = this.safeParseStyles(config.styles);
}); });
this.parsedStyles = styleMap; this.parsedStyles = styleMap;
console.log(this.parsedStyles)
}, },
buildNodeLabelMap(nodes) { buildNodeLabelMap(nodes) {
this._nodeLabelMap = new Map(); this._nodeLabelMap = new Map();
nodes.forEach(node => { nodes.forEach(node => {
this._nodeLabelMap.set(node.id, node.data?.type || 'default'); this._nodeLabelMap.set(node.id, node.data?.type || 'default');
}); });
}, },
// =============== 👇【新增】统一的数据保存方法 ===============
saveDataToLocalStorage() { saveDataToLocalStorage() {
try { try {
localStorage.setItem('graphQA_queryRecord', this.queryRecord); localStorage.setItem('graphQA_queryRecord', this.queryRecord);
@ -194,110 +202,89 @@ export default {
console.warn('⚠️ 无法保存到 localStorage:', e); console.warn('⚠️ 无法保存到 localStorage:', e);
} }
}, },
// =======================================================================
// =============== 👇【新增】统一的数据恢复方法 ===============
restoreDataFromLocalStorage() { restoreDataFromLocalStorage() {
try { try {
const savedQuery = localStorage.getItem('graphQA_queryRecord'); const savedQuery = localStorage.getItem('graphQA_queryRecord');
const savedAnswers = localStorage.getItem('graphQA_answers'); const savedAnswers = localStorage.getItem('graphQA_answers');
if (savedQuery !== null) this.queryRecord = savedQuery;
if (savedQuery !== null) {
this.queryRecord = savedQuery;
}
if (savedAnswers !== null) { if (savedAnswers !== null) {
this.answers = JSON.parse(savedAnswers); this.answers = JSON.parse(savedAnswers);
// 确保 selected 不越界
if (this.answers.length > 0) { if (this.answers.length > 0) {
this.selected = Math.min(this.selected, this.answers.length - 1); this.selected = Math.min(this.selected, this.answers.length - 1);
} }
} }
console.log('✅ 数据已从 localStorage 恢复');
} catch (e) { } catch (e) {
console.warn('⚠️ 无法从 localStorage 恢复数据:', e); console.warn('⚠️ 无法从 localStorage 恢复数据:', e);
// 出错时清空（避免脏数据）
localStorage.removeItem('graphQA_queryRecord');
localStorage.removeItem('graphQA_answers');
} }
}, },
// =======================================================================
// =============== 👇【新增】处理页面关闭/刷新的兜底保存 ===============
handleBeforeUnload(event) { handleBeforeUnload(event) {
this.saveDataToLocalStorage(); this.saveDataToLocalStorage();
// 注意：现代浏览器通常不显示自定义消息
event.preventDefault(); event.preventDefault();
event.returnValue = ''; event.returnValue = ''; // 必须设置才能触发提示（但实际可能不显示）
}, },
selectGraph(index){ selectGraph(index){
this.selected = index; this.selected=index
if(this.answers.length>0){ if(this.answers.length>0){
this.formatData(this.answers[index].result); this.formatData(this.answers[index].result)
} }
},
},
handleSearch(){ handleSearch(){
this.isSending = true; this.isSending=true
this.answers = []; this.answers=[]
if (this._graph) this._graph.clear(); if (this._graph){
this._graph.clear()
let data = { text: this.query }; }
this.queryRecord = this.query; let data={
this.query = ""; text:this.query
}
this.queryRecord=this.query
this.query=""
// this.answers=[{"answer":"糖尿病患者应避免高糖食物，如糖果、甜点、含糖饮料等，以防止血糖波动。",
// "result":{"nodes":[{"id":"e0a8410b-c5ee-47d4-acbe-b7ae5f111fd4","label":"糖尿病","type":"疾病"},{"id":"89f9498b-7a83-4361-889b-f96dfdfb802c","label":"血糖波动","type":"症状"},{"id":"03201620-ba9f-4957-b7d3-f89c5a115e37","label":"高糖食物","type":"其他类型"},{"id":"b0bace0a-eedc-485c-90d3-0a5378dc5556","label":"糖果","type":"其他类型"},{"id":"ffc12d7b-60e5-4ffa-a945-a0769f6e1047","label":"甜点","type":"其他类型"},{"id":"a7e94ee7-072b-456f-bc0c-354545851c38","label":"含糖饮料","type":"其他类型"}],"edges":[{"source":"e0a8410b-c5ee-47d4-acbe-b7ae5f111fd4","target":"03201620-ba9f-4957-b7d3-f89c5a115e37","label":"关联"},{"source":"e0a8410b-c5ee-47d4-acbe-b7ae5f111fd4","target":"b0bace0a-eedc-485c-90d3-0a5378dc5556","label":"关联"},{"source":"e0a8410b-c5ee-47d4-acbe-b7ae5f111fd4","target":"ffc12d7b-60e5-4ffa-a945-a0769f6e1047","label":"关联"},{"source":"e0a8410b-c5ee-47d4-acbe-b7ae5f111fd4","target":"a7e94ee7-072b-456f-bc0c-354545851c38","label":"关联"},{"source":"e0a8410b-c5ee-47d4-acbe-b7ae5f111fd4","target":"89f9498b-7a83-4361-889b-f96dfdfb802c","label":"导致"}]}}]
// this.initGraph(this.answers[0].result)
// this.formatData(this.answers[0].result)
qaAnalyze(data).then(res=>{ qaAnalyze(data).then(res=>{
this.answers = res; this.answers=res
if (this.answers && this.answers.length > 0) { if(this.answers.length>0){
this.initGraph(this.answers[0].result); this.initGraph(this.answers[0].result)
} }
this.isSending = false; this.isSending=false
}).catch(err => { })
console.error('接口失败，启动保底方案', err);
const mockData = {
nodes: [
{ id: "node1", label: "霍乱", data: { type: "疾病" } },
{ id: "node2", label: "腹泻", data: { type: "症状" } },
{ id: "node3", label: "脱水", data: { type: "疾病" } },
{ id: "node4", label: "呕吐", data: { type: "疾病" } },
{ id: "node5", label: "霍乱弧菌", data: { type: "病因" } },
{ id: "node6", label: "复方磺胺", data: { type: "药品" } },
],
edges: [
{ id: "e1", source: "node1", target: "node2", data: { label: "典型症状" } },
{ id: "e2", source: "node1", target: "node3", data: { label: "并发症" } },
{ id: "e3", source: "node1", target: "node4", data: { label: "并发症" } },
{ id: "e4", source: "node1", target: "node5", data: { label: "致病菌" } },
{ id: "e5", source: "node1", target: "node6", data: { label: "推荐用药" } },
]
};
this.answers = [{ answer: "连接失败，显示预览版。", result: mockData }];
this.initGraph(this.answers[0].result);
this.isSending = false;
});
}, },
formatData(data){ formatData(data){
const typeMap = { '疾病': 'Disease', '药品': 'Drug', '药物': 'Drug', '症状': 'Symptom', '检查': 'Check', '病因': 'Cause' }; // this._graph.stopLayout();
const getStandardLabel = (rawType) => typeMap[rawType] || rawType; // this.clearGraphState();
// === 1. 构建 nodeId → label 映射 ===
const nodeIdToData = {}; const nodeIdToEnLabel = {};
data.nodes.forEach(node => { data.nodes.forEach(node => {
nodeIdToData[node.id] = { nodeIdToEnLabel[node.id] = node.data.type; // e.g. "Disease"
enLabel: getStandardLabel(node.data.type),
rawType: node.data.type
};
}); });
// === 2. 处理节点：根据自身 label 设置样式 ===
const updatedNodes = data.nodes.map(node => { const updatedNodes = data.nodes.map(node => {
const enLabel = getStandardLabel(node.data.type); const enLabel = node.data.type;
const styleConf = this.parsedStyles[enLabel] || {}; const styleConf = this.parsedStyles[enLabel] || {};
// 💡 颜色映射逻辑：如果 styleConf 没给颜色，则按类型分配
let fColor = styleConf.nodeFill;
if (!fColor) {
if (node.data.type === '疾病') fColor = '#EF4444';
else if (node.data.type === '药品' || node.data.type === '药物') fColor = '#91cc75';
else if (node.data.type === '症状') fColor = '#fac858';
else if (node.data.type === '检查') fColor = '#336eee';
else fColor = this.nodeFill;
}
return { return {
...node, ...node,
type: styleConf.nodeShape || this.nodeShape, type: styleConf.nodeShape || this.nodeShape,
data: { ...node.data, label: enLabel, name: node.label },
style: { style: {
...node.style,
size: styleConf.nodeSize || this.nodeSize, size: styleConf.nodeSize || this.nodeSize,
fill: fColor, fill: styleConf.nodeFill || this.nodeFill,
stroke: styleConf.nodeStroke || this.nodeStroke, stroke: styleConf.nodeStroke || this.nodeStroke,
lineWidth: styleConf.nodeLineWidth || this.nodeLineWidth, lineWidth: styleConf.nodeLineWidth || this.nodeLineWidth,
label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true, label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true,
@ -308,97 +295,64 @@ export default {
}; };
}); });
// === 3. 处理边：根据 source 节点的 label 设置样式 ===
const updatedEdges = data.edges.map(edge => { const updatedEdges = data.edges.map(edge => {
const sourceInfo = nodeIdToData[edge.source]; console.log(edge)
const styleConf = this.parsedStyles[sourceInfo.enLabel] || {}; const sourceEnLabel = nodeIdToEnLabel[edge.source]; // e.g. "Disease"
const styleConf = this.parsedStyles[sourceEnLabel] || {};
// 💡 边颜色逻辑：跟随源节点类型
let eStroke = styleConf.edgeStroke;
if (!eStroke) {
if (sourceInfo.rawType === '疾病') eStroke = 'rgba(239, 68, 68, 0.4)';
else if (sourceInfo.rawType === '药品' || sourceInfo.rawType === '药物') eStroke = 'rgba(145, 204, 117, 0.4)';
else if (sourceInfo.rawType === '症状') eStroke = 'rgba(250, 200, 88, 0.4)';
else eStroke = this.edgeStroke;
}
return { return {
...edge, ...edge,
id: edge.data?.relationship?.id || edge.id, id: edge.data?.relationship?.id || edge.id,
type: styleConf.edgeType ||this.edgeType, type: styleConf.edgeType ||this.edgeType,
style: { style: {
...edge.style,
endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true, endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true,
stroke: eStroke, stroke: styleConf.edgeStroke || this.edgeStroke,
lineWidth: styleConf.edgeLineWidth || this.edgeLineWidth, lineWidth: styleConf.edgeLineWidth || this.edgeLineWidth,
label: styleConf.edgeShowLabel !== undefined ? styleConf.edgeShowLabel : false, label: styleConf.edgeShowLabel !== undefined ? styleConf.edgeShowLabel : false,
labelFontSize: styleConf.edgeFontSize || this.edgeFontSize, labelFontSize: styleConf.edgeFontSize || this.edgeFontSize,
labelFontFamily: styleConf.edgeFontFamily || this.edgeFontFamily, labelFontFamily: styleConf.edgeFontFamily || this.edgeFontFamily,
labelFill: styleConf.edgeFontColor || this.edgeFontColor labelFill: styleConf.edgeFontColor || this.edgeFontColor
}, }
data: { ...edge.data, label: edge.data?.label || "" },
}; };
}); });
const pureData = JSON.parse(JSON.stringify({ nodes: updatedNodes, edges: updatedEdges })); // === 4. 更新图数据 ===
this.updateGraph(pureData); let updatedData = {
}, nodes: updatedNodes,
edges: updatedEdges
};
updateGraph(data) { this.updateGraph(updatedData)
if (!this._graph) return;
this._graph.setData(data);
this._graph.render();
}, },
updateGraph(data) {
if (!this._graph) return
localResetGraph() { this._graph.setData(data)
if (!this._graph) return; this._graph.render()
const currentResult = this.answers[this.selected]?.result;
if (!currentResult) return;
this._graph.destroy();
this._graph = null;
this.$nextTick(() => {
this.initGraph(currentResult);
this.$message.success("图谱已重置");
});
}, },
initGraph(data) { initGraph(data) {
const typeMap = { '疾病': 'Disease', '药品': 'Drug', '药物': 'Drug', '症状': 'Symptom', '检查': 'Check', '病因': 'Cause' };
const getStandardLabel = (rawType) => typeMap[rawType] || rawType;
if (this._graph!=null){ if (this._graph!=null){
this._graph.destroy(); this._graph.destroy()
this._graph = null; this._graph = null;
} }
console.log(data)
const nodeIdToData = {}; // === 1. 构建 nodeId → label 映射 ===
const nodeIdToEnLabel = {};
data.nodes.forEach(node => { data.nodes.forEach(node => {
nodeIdToData[node.id] = { nodeIdToEnLabel[node.id] = node.data.type; // e.g. "Disease"
enLabel: getStandardLabel(node.data.type),
rawType: node.data.type
};
}); });
console.log(nodeIdToEnLabel)
// === 2. 处理节点：根据自身 label 设置样式 ===
const updatedNodes = data.nodes.map(node => { const updatedNodes = data.nodes.map(node => {
const enLabel = getStandardLabel(node.data.type); const enLabel = node.data.type;
const styleConf = this.parsedStyles[enLabel] || {}; const styleConf = this.parsedStyles[enLabel] || {};
let fColor = styleConf.nodeFill;
if (!fColor) {
if (node.data.type === '疾病') fColor = '#EF4444';
else if (node.data.type === '药品' || node.data.type === '药物') fColor = '#91cc75';
else if (node.data.type === '症状') fColor = '#fac858';
else if (node.data.type === '检查') fColor = '#336eee';
else fColor = this.nodeFill;
}
return { return {
...node, ...node,
type: styleConf.nodeShape || this.nodeShape, type: styleConf.nodeShape || this.nodeShape,
data: { ...node.data, label: enLabel, name: node.label },
style: { style: {
...node.style,
size: styleConf.nodeSize || this.nodeSize, size: styleConf.nodeSize || this.nodeSize,
fill: fColor, fill: styleConf.nodeFill || this.nodeFill,
stroke: styleConf.nodeStroke || this.nodeStroke, stroke: styleConf.nodeStroke || this.nodeStroke,
lineWidth: styleConf.nodeLineWidth || this.nodeLineWidth, lineWidth: styleConf.nodeLineWidth || this.nodeLineWidth,
label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true, label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true,
@ -409,27 +363,19 @@ export default {
}; };
}); });
// === 3. 处理边：根据 source 节点的 label 设置样式 ===
const updatedEdges = data.edges.map(edge => { const updatedEdges = data.edges.map(edge => {
const sourceInfo = nodeIdToData[edge.source]; console.log(edge)
const styleConf = this.parsedStyles[sourceInfo.enLabel] || {}; const sourceEnLabel = nodeIdToEnLabel[edge.source]; // e.g. "Disease"
const styleConf = this.parsedStyles[sourceEnLabel] || {};
let eStroke = styleConf.edgeStroke;
if (!eStroke) {
if (sourceInfo.rawType === '疾病') eStroke = 'rgba(239, 68, 68, 0.4)';
else if (sourceInfo.rawType === '药品' || sourceInfo.rawType === '药物') eStroke = 'rgba(145, 204, 117, 0.4)';
else if (sourceInfo.rawType === '症状') eStroke = 'rgba(250, 200, 88, 0.4)';
else eStroke = this.edgeStroke;
}
return { return {
...edge, ...edge,
id: edge.data?.relationship?.id || edge.id, id: edge.data?.relationship?.id || edge.id,
type: styleConf.edgeType ||this.edgeType, type: styleConf.edgeType ||this.edgeType,
data: { ...edge.data, label: edge.data?.label || "" },
style: { style: {
...edge.style,
endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true, endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true,
stroke: eStroke, stroke: styleConf.edgeStroke || this.edgeStroke,
lineWidth: styleConf.edgeLineWidth || this.edgeLineWidth, lineWidth: styleConf.edgeLineWidth || this.edgeLineWidth,
label: styleConf.edgeShowLabel !== undefined ? styleConf.edgeShowLabel : false, label: styleConf.edgeShowLabel !== undefined ? styleConf.edgeShowLabel : false,
labelFontSize: styleConf.edgeFontSize || this.edgeFontSize, labelFontSize: styleConf.edgeFontSize || this.edgeFontSize,
@ -439,68 +385,65 @@ export default {
}; };
}); });
const finalData = JSON.parse(JSON.stringify({ // === 4. 更新图数据 ===
let updatedData = {
nodes: updatedNodes, nodes: updatedNodes,
edges: updatedEdges edges: updatedEdges
})); };
this.buildNodeLabelMap(updatedNodes);
this.buildNodeLabelMap(finalData.nodes);
const container = this.$refs.graphContainer; const container = this.$refs.graphContainer;
console.log(container)
if (container!=null){ if (container!=null){
const width = container.clientWidth || 800; const width = container.clientWidth || 800;
const height = container.clientHeight || 600; const height = container.clientHeight || 600;
console.log(width)
console.log(height)
const graph = new Graph({ const graph = new Graph({
container, container,
width, width,
height, height,
plugins: [
{
type: 'toolbar',
key: 'g6-toolbar',
onClick: (id) => {
if (id === 'reset') this.localResetGraph();
else if (this.$refs.toolbarRef) this.$refs.toolbarRef.handleToolbarAction(id);
},
getItems: () => [
{ id: 'zoom-in', value: 'zoom-in', title: '放大' },
{ id: 'zoom-out', value: 'zoom-out', title: '缩小' },
{ id: 'undo', value: 'undo', title: '撤销' },
{ id: 'redo', value: 'redo', title: '重做' },
{ id: 'auto-fit', value: 'auto-fit', title: '聚焦' },
{ id: 'reset', value: 'reset', title: '重置' },
{ id: 'export', value: 'export', title: '导出图谱' },
],
},
{ type: 'history', key: 'history' },
],
layout: { layout: {
type: 'force', type: 'force', // 力导向布局
gravity: 0.3, gravity: 0.3, // 重力系数，控制节点聚集程度
repulsion: 500, repulsion: 500, // 排斥力
attraction: 20, attraction: 20, // 吸引力
preventOverlap: true preventOverlap: true // 防止节点重叠
},
behaviors: [
'zoom-canvas', 'drag-element', 'click-select', 'focus-element', },
{ behaviors: [ 'zoom-canvas', 'drag-element',
'click-select','focus-element', {
type: 'hover-activate', type: 'hover-activate',
degree: 1, degree: 1,
enable: (e) => e.target && e.target.id && e.action !== 'drag'
}, },
{ {
type: 'drag-canvas', type: 'drag-canvas',
enable: (event) => event.shiftKey === false, enable: (event) => event.shiftKey === false,
}, },
{ type: 'brush-select' }, {
type: 'brush-select',
},
], ],
node: { node: {
style: { style: {
fill: (d) => d.style?.fill, // fill: (d) => {
stroke: (d) => d.style?.stroke, //
size: (d) => d.style?.size, // const label = d.data?.type;
lineWidth: (d) => d.style?.lineWidth, // if (label === '疾病') return '#EF4444'; // 红
// if (label === '药品'||label === '药物') return '#91cc75'; // 绿
// if (label === '症状') return '#fac858'; // 橙
// if (label === '检查') return '#336eee'; // 橙
// return '#59d1d4'; // 默认灰蓝
// },
// stroke: (d) => {
// const label = d.data?.type;
// if (label === '疾病') return '#B91C1C';
// if (label === '药品'||label === '药物') return '#047857';
// if (label === '检查') return '#1D4ED8'; // 橙
// if (label === '症状') return '#B45309';
// return '#40999b';
// },
labelText: (d) => d.label, labelText: (d) => d.label,
labelPlacement: 'center', labelPlacement: 'center',
labelWordWrap: true, labelWordWrap: true,
@ -508,37 +451,55 @@ export default {
labelMaxLines: 3, labelMaxLines: 3,
labelTextOverflow: 'ellipsis', labelTextOverflow: 'ellipsis',
labelTextAlign: 'center', labelTextAlign: 'center',
labelFill: (d) => d.style?.labelFill,
labelFontSize: (d) => d.style?.labelFontSize,
labelFontFamily: (d) => d.style?.labelFontFamily,
opacity: 1 opacity: 1
}, },
state: { state: {
active: { active: {
fill: (d) => d.style?.fill, lineWidth: 2,
stroke: (d) => d.style?.stroke, shadowColor: '#ffffff',
lineWidth: 3, shadowBlur: 10,
opacity: 1 opacity: 1
}, },
inactive: { opacity: 0.3 }, inactive: {
opacity: 0.3
},
normal:{ normal:{
fill: (d) => d.style?.fill,
stroke: (d) => d.style?.stroke,
opacity: 1 opacity: 1
} }
}, },
}, },
edge: { edge: {
style: { style: {
stroke: (d) => d.style?.stroke, labelText: (d) => {
lineWidth: (d) => d.style?.lineWidth, return d.data.label},
endArrow: (d) => d.style?.endArrow, // stroke: (d) => {
labelText: (d) => d.data?.label, // const targetLabel = this._nodeLabelMap.get(d.source); // d.target 是目标节点 ID
labelFill: (d) => d.style?.labelFill, // if (targetLabel === '疾病') return 'rgba(239,68,68,0.5)';
labelFontSize: (d) => d.style?.labelFontSize, // if (targetLabel === '药品'||targetLabel === '药物') return 'rgba(145,204,117,0.5)';
// if (targetLabel === '症状') return 'rgba(250,200,88,0.5)';
// if (targetLabel === '检查') return 'rgba(51,110,238,0.5)'; // 橙
// return 'rgba(89,209,212,0.5)'; // default
// },
// labelFill: (d) => {
// // 获取 target 节点的 label
// const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID
// // 根据 target 节点类型返回对应浅色
//
// if (targetLabel === 'Disease') return '#ff4444';
// if (targetLabel === 'Drug') return '#2f9b70';
// if (targetLabel === 'Symptom') return '#f89775';
// return '#6b91ff'; // default
// }
}, },
state: { state: {
selected: { stroke: '#1890FF', lineWidth: 2 }, selected: {
stroke: '#1890FF',
lineWidth: 2,
},
highlight: { highlight: {
halo: true, halo: true,
haloStroke: '#1890FF', haloStroke: '#1890FF',
@ -547,22 +508,36 @@ export default {
lineWidth: 3, lineWidth: 3,
opacity: 1 opacity: 1
}, },
inactive: { opacity: 0.3 }, inactive: {
normal: { opacity: 1 } opacity: 0.3
}, },
normal:{
opacity: 1
}
}, },
data: finalData,
},
data:updatedData,
}); });
graph.render(); graph.render();
this._graph = graph; this._graph = graph
this._graph?.fitView(); this._graph?.fitView()
} }
}, },
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.medical-qa-container { .medical-qa-container {
padding: 25px; padding: 25px;
background-color: #F6F9FF; background-color: #F6F9FF;
@ -749,29 +724,4 @@ export default {
.dot-2 { animation-delay: -0.2s; } .dot-2 { animation-delay: -0.2s; }
.dot-3 { animation-delay: 0s; } .dot-3 { animation-delay: 0s; }
.dot-4 { animation-delay: 0.2s; } .dot-4 { animation-delay: 0.2s; }
.knowledge-graph {
position: relative; /* 必须！否则工具栏会飘走 */
flex: 1;
height: 100%;
background-color: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
overflow: hidden; /* 保证工具栏不超出边界 */
}
/* 确保图谱容器铺满 */
.graph-container {
width: 100%;
height: 100%;
}
:deep(.custom-graph-toolbar) {
position: absolute !important; /* 强制绝对定位 */
top: 30px !important;
right: 30px !important;
z-index: 9999 !important; /* 确保层级最高 */
display: inline-flex !important;
}
</style> </style>

16
vue/src/system/GraphStyle.vue
View File

@ -1103,27 +1103,19 @@ export default {
const isLabelExist = group.configs.some(c => c.current_label === labelName && c.id !== excludeId); const isLabelExist = group.configs.some(c => c.current_label === labelName && c.id !== excludeId);
if (isLabelExist) { if (isLabelExist) {
ElMessageBox.alert(`方案【${groupName}】中已存在【${labelName}】标签的配置。`, '校验失败', {type: 'error'}).catch(() => { ElMessageBox.alert(`方案【${groupName}】中已存在【${labelName}】标签的配置，请先删除旧配置或选择其他方案。`, '校验失败', { type: 'error' }).catch(() => {});
});
return false; return false;
} }
if (group.configs.length >= 5 && !group.configs.some(c => c.id === excludeId)) { if (group.configs.length >= 5 && !group.configs.some(c => c.id === excludeId)) {
ElMessageBox.alert(`方案【${groupName}】已满（上限5个）。`, '校验失败', {type: 'error'}).catch(() => { ElMessageBox.alert(`方案【${groupName}】的配置已满（上限5个），无法添加。`, '校验失败', { type: 'error' }).catch(() => {});
});
return false; return false;
} }
return true; return true;
}, },
async moveConfigToGroup(config, targetGroup) { async moveConfigToGroup(config, targetGroup) {
// 1. 拦截无效移动
if (config.group_id === targetGroup.id) {
return ElMessage.info("该配置已在该方案中");
}
if (!this.validateGroupConstraint(targetGroup.group_name, config.current_label, config.id)) return; if (!this.validateGroupConstraint(targetGroup.group_name, config.current_label, config.id)) return;
try { try {
// 2. 构造 Payload：直接传入 target_group_id // 2. 构造 Payload：直接传入 target_group_id
const payload = { const payload = {
@ -1186,8 +1178,7 @@ export default {
const missingTags = REQUIRED_TAGS.filter(tag => !new Set(currentLabels).has(tag)); const missingTags = REQUIRED_TAGS.filter(tag => !new Set(currentLabels).has(tag));
if (missingTags.length > 0) { if (missingTags.length > 0) {
this.isInitialEcho = false; this.isInitialEcho = false;
return ElMessageBox.alert(`该方案配置不完整，缺失：${missingTags.join('、')}`, '提示', {type: 'warning'}).catch(() => { return ElMessageBox.alert(`该方案配置不完整，缺失：${missingTags.join('、')}`, '提示', { type: 'warning' }).catch(() => {});
});
} }
this.usingConfigIds = group.configs.map(c => c.id); this.usingConfigIds = group.configs.map(c => c.id);
const res = await applyGraphStyleGroup(group.id); const res = await applyGraphStyleGroup(group.id);
@ -1774,7 +1765,6 @@ export default {
border-color: #e6e6e6 !important; border-color: #e6e6e6 !important;
color: #333 !important; color: #333 !important;
} }
:deep(.el-message-box__btns .el-button--primary) { :deep(.el-message-box__btns .el-button--primary) {
background-color: #1559f3 !important; background-color: #1559f3 !important;
border-color: #1559f3 !important; border-color: #1559f3 !important;

Write Preview
Loading…
Cancel
Save