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

all

hanyuqing
hanyuqing 3 months ago
parent
f030e0501c
commit
911c8946bb
3 changed files with 228 additions and 113 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. 82
      vue/src/system/GraphDemo.vue
  2. 257
      vue/src/system/GraphQA.vue
  3. 2
      vue/src/system/GraphStyle.vue

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

@ -855,37 +855,63 @@ export default {
formatData(data){ formatData(data){
this._graph.stopLayout(); this._graph.stopLayout();
this.clearGraphState(); this.clearGraphState();
const updatedEdges = data.edges.map(edge => ({
...edge,
type: this.edgeType,
style: {
endArrow: this.edgeEndArrow,
stroke: this.edgeStroke,
lineWidth: this.edgeLineWidth,
label: this.edgeShowLabel,
labelFontSize: this.edgeFontSize,
labelFontFamily: this.edgeFontFamily,
labelFill: this.edgeFontColor,
},
})) // === 1. 构建 nodeId → label 映射 ===
const updatedNodes = data.nodes.map(node => ({ const nodeIdToEnLabel = {};
...node, data.nodes.forEach(node => {
type: this.nodeShape, nodeIdToEnLabel[node.id] = node.data.label; // e.g. "Disease"
style:{ });
size: this.nodeSize, // === 2. 处理节点：根据自身 label 设置样式 ===
lineWidth: this.nodeLineWidth, const updatedNodes = data.nodes.map(node => {
label: this.nodeShowLabel, const enLabel = node.data.label;
labelFontSize: this.nodeFontSize, const zhLabel = this.enToZhLabelMap[enLabel] || '其他'; // 默认回退到“其他”
labelFontFamily: this.nodeFontFamily, const styleConf = this.parsedStyles[zhLabel] || {};
labelFill: this.nodeFontColor, return {
opacity: 1, ...node,
} type: styleConf.nodeShape || this.nodeShape,
})) style: {
const updatedData = { size: styleConf.nodeSize || this.nodeSize,
fill: styleConf.nodeFill || this.nodeFill,
stroke: styleConf.nodeStroke || this.nodeStroke,
lineWidth: styleConf.nodeLineWidth || this.nodeLineWidth,
label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true,
labelFontSize: styleConf.nodeFontSize || this.nodeFontSize,
labelFontFamily: styleConf.nodeFontFamily || this.nodeFontFamily,
labelFill: styleConf.nodeFontColor || this.nodeFontColor
}
};
});
// === 3. 处理边：根据 source 节点的 label 设置样式 ===
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] || {};
return {
...edge,
id: edge.data?.relationship?.id || edge.id,
type: styleConf.edgeType ||this.edgeType,
style: {
endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true,
stroke: styleConf.edgeStroke || this.edgeStroke,
lineWidth: styleConf.edgeLineWidth || this.edgeLineWidth,
label: styleConf.edgeShowLabel !== undefined ? styleConf.edgeShowLabel : false,
labelFontSize: styleConf.edgeFontSize || this.edgeFontSize,
labelFontFamily: styleConf.edgeFontFamily || this.edgeFontFamily,
labelFill: styleConf.edgeFontColor || this.edgeFontColor
}
};
});
// === 4. 更新图数据 ===
let updatedData = {
nodes: updatedNodes, nodes: updatedNodes,
edges: updatedEdges edges: updatedEdges
} };
this.buildNodeLabelMap(updatedNodes); this.buildNodeLabelMap(updatedNodes);
this.updateGraph(updatedData) this.updateGraph(updatedData)
this.buildCategoryIndex(); this.buildCategoryIndex();

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

@ -76,6 +76,7 @@ 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 {getGraph} from "@/api/graph";
import {getGraphStyleActive} from "@/api/style";
export default { export default {
@ -109,7 +110,16 @@ export default {
queryRecord:"", queryRecord:"",
isSending:false isSending:false,
configs:[],
parsedStyles:{},
enToZhLabelMap: {
Disease: '疾病',
Drug: '药品',
Check: '检查',
Symptom: '症状',
Other: '其他'
}
}; };
}, },
@ -121,6 +131,11 @@ export default {
// ======================================================================= // =======================================================================
mounted() { mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.getDefault()
}, 300);
});
// =============== 👇【新增】页面加载时从 localStorage 恢复数据 =============== // =============== 👇【新增】页面加载时从 localStorage 恢复数据 ===============
this.restoreDataFromLocalStorage(); this.restoreDataFromLocalStorage();
// ======================================================================= // =======================================================================
@ -145,6 +160,36 @@ export default {
// ======================================================================= // =======================================================================
}, },
methods: { methods: {
safeParseStyles(stylesStr) {
try {
return JSON.parse(stylesStr || '{}');
} catch (e) {
console.warn('Failed to parse styles:', stylesStr);
return {};
}
},
async getDefault(){
const response = await getGraphStyleActive();
const data = response.data;
if (!Array.isArray(data) || data.length === 0) {
this.configs = [];
this.parsedStyles = {};
return;
}
// 只取第一个（即 is_active=1 的组）
const activeGroup = data[0];
this.configs = Array.isArray(activeGroup.configs) ? activeGroup.configs : [];
// 构建 label -> style 映射
const styleMap = {};
this.configs.forEach(config => {
const label = config.current_label;
styleMap[label] = this.safeParseStyles(config.styles);
});
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 => {
@ -229,37 +274,60 @@ export default {
formatData(data){ formatData(data){
// this._graph.stopLayout(); // this._graph.stopLayout();
// this.clearGraphState(); // this.clearGraphState();
const updatedEdges = data.edges.map(edge => ({ // === 1. 构建 nodeId → label 映射 ===
...edge, const nodeIdToEnLabel = {};
type: this.edgeType, data.nodes.forEach(node => {
style: { nodeIdToEnLabel[node.id] = node.data.label; // e.g. "Disease"
endArrow: this.edgeEndArrow, });
stroke: this.edgeStroke, // === 2. 处理节点：根据自身 label 设置样式 ===
lineWidth: this.edgeLineWidth, const updatedNodes = data.nodes.map(node => {
label: this.edgeShowLabel, const enLabel = node.data.label;
labelFontSize: this.edgeFontSize, const zhLabel = this.enToZhLabelMap[enLabel] || '其他'; // 默认回退到“其他”
labelFontFamily: this.edgeFontFamily, const styleConf = this.parsedStyles[zhLabel] || {};
labelFill: this.edgeFontColor, return {
...node,
}, type: styleConf.nodeShape || this.nodeShape,
})) style: {
const updatedNodes = data.nodes.map(node => ({ size: styleConf.nodeSize || this.nodeSize,
...node, fill: styleConf.nodeFill || this.nodeFill,
type: this.nodeShape, stroke: styleConf.nodeStroke || this.nodeStroke,
style:{ lineWidth: styleConf.nodeLineWidth || this.nodeLineWidth,
size: this.nodeSize, label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true,
lineWidth: this.nodeLineWidth, labelFontSize: styleConf.nodeFontSize || this.nodeFontSize,
label: this.nodeShowLabel, labelFontFamily: styleConf.nodeFontFamily || this.nodeFontFamily,
labelFontSize: this.nodeFontSize, labelFill: styleConf.nodeFontColor || this.nodeFontColor
labelFontFamily: this.nodeFontFamily, }
labelFill: this.nodeFontColor, };
opacity: 1, });
}
})) // === 3. 处理边：根据 source 节点的 label 设置样式 ===
const updatedData = { 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] || {};
return {
...edge,
id: edge.data?.relationship?.id || edge.id,
type: styleConf.edgeType ||this.edgeType,
style: {
endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true,
stroke: styleConf.edgeStroke || this.edgeStroke,
lineWidth: styleConf.edgeLineWidth || this.edgeLineWidth,
label: styleConf.edgeShowLabel !== undefined ? styleConf.edgeShowLabel : false,
labelFontSize: styleConf.edgeFontSize || this.edgeFontSize,
labelFontFamily: styleConf.edgeFontFamily || this.edgeFontFamily,
labelFill: styleConf.edgeFontColor || this.edgeFontColor
}
};
});
// === 4. 更新图数据 ===
let updatedData = {
nodes: updatedNodes, nodes: updatedNodes,
edges: updatedEdges edges: updatedEdges
} };
this.updateGraph(updatedData) this.updateGraph(updatedData)
}, },
@ -274,37 +342,58 @@ export default {
this._graph.destroy() this._graph.destroy()
this._graph = null; this._graph = null;
} }
const updatedEdges = data.edges.map(edge => ({ // === 1. 构建 nodeId → label 映射 ===
...edge, const nodeIdToEnLabel = {};
type: this.edgeType, data.nodes.forEach(node => {
style: { nodeIdToEnLabel[node.id] = node.type; // e.g. "Disease"
endArrow: this.edgeEndArrow, });
stroke: this.edgeStroke, // === 2. 处理节点：根据自身 label 设置样式 ===
lineWidth: this.edgeLineWidth, const updatedNodes = data.nodes.map(node => {
label: this.edgeShowLabel, const enLabel = node.data.label;
labelFontSize: this.edgeFontSize, const styleConf = this.parsedStyles[enLabel] || {};
labelFontFamily: this.edgeFontFamily, return {
labelFill: this.edgeFontColor, ...node,
type: styleConf.nodeShape || this.nodeShape,
}, style: {
})) size: styleConf.nodeSize || this.nodeSize,
const updatedNodes = data.nodes.map(node => ({ fill: styleConf.nodeFill || this.nodeFill,
...node, stroke: styleConf.nodeStroke || this.nodeStroke,
type: this.nodeShape, lineWidth: styleConf.nodeLineWidth || this.nodeLineWidth,
style:{ label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true,
size: this.nodeSize, labelFontSize: styleConf.nodeFontSize || this.nodeFontSize,
lineWidth: this.nodeLineWidth, labelFontFamily: styleConf.nodeFontFamily || this.nodeFontFamily,
label: this.nodeShowLabel, labelFill: styleConf.nodeFontColor || this.nodeFontColor
labelFontSize: this.nodeFontSize, }
labelFontFamily: this.nodeFontFamily, };
labelFill: this.nodeFontColor, });
opacity: 1,
} // === 3. 处理边：根据 source 节点的 label 设置样式 ===
})) const updatedEdges = data.edges.map(edge => {
const updatedData = { console.log(edge)
const sourceEnLabel = nodeIdToEnLabel[edge.source]; // e.g. "Disease"
const styleConf = this.parsedStyles[sourceEnLabel] || {};
return {
...edge,
id: edge.data?.relationship?.id || edge.id,
type: styleConf.edgeType ||this.edgeType,
style: {
endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true,
stroke: styleConf.edgeStroke || this.edgeStroke,
lineWidth: styleConf.edgeLineWidth || this.edgeLineWidth,
label: styleConf.edgeShowLabel !== undefined ? styleConf.edgeShowLabel : false,
labelFontSize: styleConf.edgeFontSize || this.edgeFontSize,
labelFontFamily: styleConf.edgeFontFamily || this.edgeFontFamily,
labelFill: styleConf.edgeFontColor || this.edgeFontColor
}
};
});
// === 4. 更新图数据 ===
let updatedData = {
nodes: updatedNodes, nodes: updatedNodes,
edges: updatedEdges edges: updatedEdges
} };
this.buildNodeLabelMap(updatedNodes); this.buildNodeLabelMap(updatedNodes);
const container = this.$refs.graphContainer; const container = this.$refs.graphContainer;
console.log(container) console.log(container)
@ -342,23 +431,23 @@ export default {
node: { node: {
style: { style: {
fill: (d) => { // fill: (d) => {
//
const label = d.data?.type; // const label = d.data?.type;
if (label === '疾病') return '#EF4444'; // 红 // if (label === '疾病') return '#EF4444'; // 红
if (label === '药品'||label === '药物') return '#91cc75'; // 绿 // if (label === '药品'||label === '药物') return '#91cc75'; // 绿
if (label === '症状') return '#fac858'; // 橙 // if (label === '症状') return '#fac858'; // 橙
if (label === '检查') return '#336eee'; // 橙 // if (label === '检查') return '#336eee'; // 橙
return '#59d1d4'; // 默认灰蓝 // return '#59d1d4'; // 默认灰蓝
}, // },
stroke: (d) => { // stroke: (d) => {
const label = d.data?.type; // const label = d.data?.type;
if (label === '疾病') return '#B91C1C'; // if (label === '疾病') return '#B91C1C';
if (label === '药品'||label === '药物') return '#047857'; // if (label === '药品'||label === '药物') return '#047857';
if (label === '检查') return '#1D4ED8'; // 橙 // if (label === '检查') return '#1D4ED8'; // 橙
if (label === '症状') return '#B45309'; // if (label === '症状') return '#B45309';
return '#40999b'; // return '#40999b';
}, // },
labelText: (d) => d.label, labelText: (d) => d.label,
labelPlacement: 'center', labelPlacement: 'center',
labelWordWrap: true, labelWordWrap: true,
@ -391,14 +480,14 @@ export default {
labelText: (d) => { labelText: (d) => {
console.log(d) console.log(d)
return d.data.label}, return d.data.label},
stroke: (d) => { // stroke: (d) => {
const targetLabel = this._nodeLabelMap.get(d.source); // d.target 是目标节点 ID // const targetLabel = this._nodeLabelMap.get(d.source); // d.target 是目标节点 ID
if (targetLabel === '疾病') return 'rgba(239,68,68,0.5)'; // if (targetLabel === '疾病') return 'rgba(239,68,68,0.5)';
if (targetLabel === '药品'||targetLabel === '药物') return 'rgba(145,204,117,0.5)'; // if (targetLabel === '药品'||targetLabel === '药物') return 'rgba(145,204,117,0.5)';
if (targetLabel === '症状') return 'rgba(250,200,88,0.5)'; // if (targetLabel === '症状') return 'rgba(250,200,88,0.5)';
if (targetLabel === '检查') return 'rgba(51,110,238,0.5)'; // 橙 // if (targetLabel === '检查') return 'rgba(51,110,238,0.5)'; // 橙
return 'rgba(89,209,212,0.5)'; // default // return 'rgba(89,209,212,0.5)'; // default
}, // },
// labelFill: (d) => { // labelFill: (d) => {
// // 获取 target 节点的 label // // 获取 target 节点的 label
// const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID // const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID

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

@ -380,7 +380,7 @@ export default {
edgeFontFamily: 'Microsoft YaHei, sans-serif', edgeFontFamily: 'Microsoft YaHei, sans-serif',
edgeFontSize: 10, edgeFontSize: 10,
edgeFontColor: '#666666', edgeFontColor: '#666666',
edgeType: 'line', edgeType: 'quadratic',
edgeLineWidth: 2, edgeLineWidth: 2,
edgeStroke: '#EF4444', edgeStroke: '#EF4444',
defaultData: { defaultData: {

Write Preview
Loading…
Cancel
Save