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

图谱展示修改

mh
hanyuqing 3 months ago
parent
b32f1ca4c3
commit
5367134eda
1 changed files with 178 additions and 241 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. 407
      vue/src/system/GraphQA.vue

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

@ -79,23 +79,21 @@
<script> <script>
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'; import GraphToolbar from '@/components/GraphToolbar.vue';
export default { export default {
name: 'GraghQA', name: 'GraghQA',
components: {Menu,GraphToolbar}, components: { Menu, GraphToolbar },
data() { data() {
return { return {
_graph: null, _graph: null,
query:"", query: "",
answers:[], answers: [],
selected:0, selected: 0,
// 节点样式 // 节点基础样式
nodeShowLabel: true, nodeShowLabel: true,
nodeFontSize: 12, nodeFontSize: 12,
nodeFontColor: '#fff', nodeFontColor: '#fff',
@ -106,7 +104,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',
@ -116,11 +114,10 @@ export default {
edgeEndArrow: true, edgeEndArrow: true,
edgeFontFamily: 'Microsoft YaHei, sans-serif', edgeFontFamily: 'Microsoft YaHei, sans-serif',
queryRecord: "",
queryRecord:"", isSending: false,
isSending:false, configs: [],
configs:[], parsedStyles: {},
parsedStyles:{},
enToZhLabelMap: { enToZhLabelMap: {
Disease: '疾病', Disease: '疾病',
Drug: '药品', Drug: '药品',
@ -128,41 +125,31 @@ 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[0].result); this.initGraph(this.answers[this.selected].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 {
@ -172,7 +159,8 @@ export default {
return {}; return {};
} }
}, },
async getDefault(){
async getDefault() {
const response = await getGraphStyleActive(); const response = await getGraphStyleActive();
const data = response.data; const data = response.data;
if (!Array.isArray(data) || data.length === 0) { if (!Array.isArray(data) || data.length === 0) {
@ -180,27 +168,23 @@ 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);
@ -210,72 +194,53 @@ 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){
this.selected=index
if(this.answers.length>0){
this.formatData(this.answers[index].result)
}
selectGraph(index) {
this.selected = index;
if (this.answers.length > 0) {
this.formatData(this.answers[index].result);
}
}, },
handleSearch() { handleSearch() {
alert('方法触发成功！');
console.log('--- 1. 发起搜索，参数为:', this.query);
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 }; let data = { text: this.query };
this.queryRecord = this.query; this.queryRecord = this.query;
this.query = ""; this.query = "";
// 1. 调用接口
qaAnalyze(data).then(res => { qaAnalyze(data).then(res => {
console.log('--- 2. 接口响应成功 ---');
this.answers = res; this.answers = res;
if (this.answers && this.answers.length > 0) { if (this.answers && this.answers.length > 0) {
this.initGraph(this.answers[0].result); this.initGraph(this.answers[0].result);
} }
this.isSending = false; this.isSending = false;
}).catch(err => { }).catch(err => {
console.error('--- 2. 接口失败，启动保底方案 ---', err); console.error('接口失败，启动保底方案', err);
const mockData = { const mockData = {
nodes: [ nodes: [
{ id: "node1", label: "霍乱", data: { type: "疾病" } }, { id: "node1", label: "霍乱", data: { type: "疾病" } },
@ -284,7 +249,6 @@ export default {
{ id: "node4", label: "呕吐", data: { type: "疾病" } }, { id: "node4", label: "呕吐", data: { type: "疾病" } },
{ id: "node5", label: "霍乱弧菌", data: { type: "病因" } }, { id: "node5", label: "霍乱弧菌", data: { type: "病因" } },
{ id: "node6", label: "复方磺胺", data: { type: "药品" } }, { id: "node6", label: "复方磺胺", data: { type: "药品" } },
], ],
edges: [ edges: [
{ id: "e1", source: "node1", target: "node2", data: { label: "典型症状" } }, { id: "e1", source: "node1", target: "node2", data: { label: "典型症状" } },
@ -294,38 +258,46 @@ export default {
{ id: "e5", source: "node1", target: "node6", data: { label: "推荐用药" } }, { id: "e5", source: "node1", target: "node6", data: { label: "推荐用药" } },
] ]
}; };
this.answers = [{ answer: "连接失败，显示预览版。", result: mockData }];
// 伪造一个和接口返回格式一样的数组
this.answers = [{
answer: "后端接口连接失败，当前显示的是预览版图谱。",
result: mockData
}];
// 强制执行初始化，让工具栏出来
this.initGraph(this.answers[0].result); this.initGraph(this.answers[0].result);
this.isSending = false; this.isSending = false;
this.$message.warning("已切换至离线预览模式");
}); });
}, },
formatData(data){
// this._graph.stopLayout(); formatData(data) {
// this.clearGraphState(); const typeMap = { '疾病': 'Disease', '药品': 'Drug', '药物': 'Drug', '症状': 'Symptom', '检查': 'Check', '病因': 'Cause' };
// === 1. 构建 nodeId → label 映射 === const getStandardLabel = (rawType) => typeMap[rawType] || rawType;
const nodeIdToEnLabel = {};
const nodeIdToData = {};
data.nodes.forEach(node => { data.nodes.forEach(node => {
nodeIdToEnLabel[node.id] = node.data.type; // e.g. "Disease" nodeIdToData[node.id] = {
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 = node.data.type; const enLabel = getStandardLabel(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: styleConf.nodeFill || this.nodeFill, fill: fColor,
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,
@ -336,55 +308,53 @@ export default {
}; };
}); });
// === 3. 处理边：根据 source 节点的 label 设置样式 ===
const updatedEdges = data.edges.map(edge => { const updatedEdges = data.edges.map(edge => {
console.log(edge) const sourceInfo = nodeIdToData[edge.source];
const sourceEnLabel = nodeIdToEnLabel[edge.source]; // e.g. "Disease" const styleConf = this.parsedStyles[sourceInfo.enLabel] || {};
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: styleConf.edgeStroke || this.edgeStroke, stroke: eStroke,
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 || "" },
}; };
}); });
// === 4. 更新图数据 === const pureData = JSON.parse(JSON.stringify({ nodes: updatedNodes, edges: updatedEdges }));
let updatedData = { this.updateGraph(pureData);
nodes: updatedNodes,
edges: updatedEdges
};
this.updateGraph(updatedData)
}, },
updateGraph(data) {
if (!this._graph) return
this._graph.setData(data) updateGraph(data) {
this._graph.render() if (!this._graph) return;
this._graph.setData(data);
this._graph.render();
}, },
localResetGraph() { localResetGraph() {
if (!this._graph) return; if (!this._graph) return;
// 1. 获取当前选中的数据快照
const currentResult = this.answers[this.selected]?.result; const currentResult = this.answers[this.selected]?.result;
if (!currentResult) return; if (!currentResult) return;
// 2. 彻底销毁当前图谱实例（这是清理 EventBoundary 报错的终极手段）
this._graph.destroy(); this._graph.destroy();
this._graph = null; this._graph = null;
// 3. 重新调用 initGraph，相当于重新加载页面时的纯净状态
// 这种方式不会闪烁，因为 initGraph 内部包含了一套完整的 render 流程
this.$nextTick(() => { this.$nextTick(() => {
this.initGraph(currentResult); this.initGraph(currentResult);
this.$message.success("图谱已重置"); this.$message.success("图谱已重置");
@ -392,27 +362,43 @@ export default {
}, },
initGraph(data) { initGraph(data) {
if (this._graph!=null){ const typeMap = { '疾病': 'Disease', '药品': 'Drug', '药物': 'Drug', '症状': 'Symptom', '检查': 'Check', '病因': 'Cause' };
this._graph.destroy() const getStandardLabel = (rawType) => typeMap[rawType] || rawType;
if (this._graph != null) {
this._graph.destroy();
this._graph = null; this._graph = null;
} }
console.log(data)
// === 1. 构建 nodeId → label 映射 === const nodeIdToData = {};
const nodeIdToEnLabel = {};
data.nodes.forEach(node => { data.nodes.forEach(node => {
nodeIdToEnLabel[node.id] = node.data.type; // e.g. "Disease" nodeIdToData[node.id] = {
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 = node.data.type; const enLabel = getStandardLabel(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: styleConf.nodeFill || this.nodeFill, fill: fColor,
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,
@ -423,19 +409,27 @@ export default {
}; };
}); });
// === 3. 处理边：根据 source 节点的 label 设置样式 ===
const updatedEdges = data.edges.map(edge => { const updatedEdges = data.edges.map(edge => {
console.log(edge) const sourceInfo = nodeIdToData[edge.source];
const sourceEnLabel = nodeIdToEnLabel[edge.source]; // e.g. "Disease" const styleConf = this.parsedStyles[sourceInfo.enLabel] || {};
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: styleConf.edgeStroke || this.edgeStroke, stroke: eStroke,
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,
@ -445,19 +439,18 @@ export default {
}; };
}); });
// === 4. 更新图数据 === const finalData = JSON.parse(JSON.stringify({
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,
@ -467,15 +460,10 @@ export default {
type: 'toolbar', type: 'toolbar',
key: 'g6-toolbar', key: 'g6-toolbar',
onClick: (id) => { onClick: (id) => {
if (id === 'reset') { if (id === 'reset') this.localResetGraph();
this.localResetGraph(); // 如果你有重置方法 else if (this.$refs.toolbarRef) this.$refs.toolbarRef.handleToolbarAction(id);
} else if (this.$refs.toolbarRef) {
// 调用 GraphToolbar.vue 组件内部的方法执行 放大/缩小/导出
this.$refs.toolbarRef.handleToolbarAction(id);
}
}, },
getItems: () => { getItems: () => [
return [
{ id: 'zoom-in', value: 'zoom-in', title: '放大' }, { id: 'zoom-in', value: 'zoom-in', title: '放大' },
{ id: 'zoom-out', value: 'zoom-out', title: '缩小' }, { id: 'zoom-out', value: 'zoom-out', title: '缩小' },
{ id: 'undo', value: 'undo', title: '撤销' }, { id: 'undo', value: 'undo', title: '撤销' },
@ -483,57 +471,36 @@ export default {
{ id: 'auto-fit', value: 'auto-fit', title: '聚焦' }, { id: 'auto-fit', value: 'auto-fit', title: '聚焦' },
{ id: 'reset', value: 'reset', title: '重置' }, { id: 'reset', value: 'reset', title: '重置' },
{ id: 'export', value: 'export', title: '导出图谱' }, { id: 'export', value: 'export', title: '导出图谱' },
]; ],
},
}, },
{ type: 'history', key: 'history' }, // 撤销重做必须 { 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) => enable: (e) => e.target && e.target.id && e.action !== 'drag'
{
return 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) => { fill: (d) => d.style?.fill,
// stroke: (d) => d.style?.stroke,
// const label = d.data?.type; size: (d) => d.style?.size,
// if (label === '疾病') return '#EF4444'; // 红 lineWidth: (d) => d.style?.lineWidth,
// 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,
@ -541,55 +508,37 @@ 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: {
lineWidth: 2, fill: (d) => d.style?.fill,
shadowColor: '#ffffff', stroke: (d) => d.style?.stroke,
shadowBlur: 10, lineWidth: 3,
opacity: 1 opacity: 1
}, },
inactive: { inactive: { opacity: 0.3 },
opacity: 0.3 normal: {
}, fill: (d) => d.style?.fill,
normal:{ stroke: (d) => d.style?.stroke,
opacity: 1 opacity: 1
} }
}, },
}, },
edge: { edge: {
style: { style: {
labelText: (d) => { stroke: (d) => d.style?.stroke,
return d.data.label}, lineWidth: (d) => d.style?.lineWidth,
// stroke: (d) => { endArrow: (d) => d.style?.endArrow,
// const targetLabel = this._nodeLabelMap.get(d.source); // d.target 是目标节点 ID labelText: (d) => d.data?.label,
// if (targetLabel === '疾病') return 'rgba(239,68,68,0.5)'; labelFill: (d) => d.style?.labelFill,
// if (targetLabel === '药品'||targetLabel === '药物') return 'rgba(145,204,117,0.5)'; labelFontSize: (d) => d.style?.labelFontSize,
// 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: { selected: { stroke: '#1890FF', lineWidth: 2 },
stroke: '#1890FF',
lineWidth: 2,
},
highlight: { highlight: {
halo: true, halo: true,
haloStroke: '#1890FF', haloStroke: '#1890FF',
@ -598,31 +547,19 @@ export default {
lineWidth: 3, lineWidth: 3,
opacity: 1 opacity: 1
}, },
inactive: { inactive: { opacity: 0.3 },
opacity: 0.3 normal: { opacity: 1 }
}, },
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>

Write Preview
Loading…
Cancel
Save