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

变色

mh
hanyuqing 3 months ago
parent
7b2f77ac54
commit
cf02c16425
2 changed files with 180 additions and 308 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. 446
      vue/src/system/GraphQA.vue
  2. 42
      vue/src/system/GraphStyle.vue

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

@ -94,7 +94,7 @@ export default {
query:"", query:"",
answers:[], answers:[],
selected:0, selected:0,
// 节点样式 // 默认节点样式
nodeShowLabel: true, nodeShowLabel: true,
nodeFontSize: 12, nodeFontSize: 12,
nodeFontColor: '#fff', nodeFontColor: '#fff',
@ -105,7 +105,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',
@ -115,7 +115,6 @@ export default {
edgeEndArrow: true, edgeEndArrow: true,
edgeFontFamily: 'Microsoft YaHei, sans-serif', edgeFontFamily: 'Microsoft YaHei, sans-serif',
queryRecord:"", queryRecord:"",
isSending:false, isSending:false,
configs:[], configs:[],
@ -127,41 +126,37 @@ 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 恢复数据 =============== // =============== 👇【新增】页面加载时从 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） // 移除页面卸载监听（如果用了 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 {
@ -171,6 +166,7 @@ export default {
return {}; return {};
} }
}, },
async getDefault(){ async getDefault(){
const response = await getGraphStyleActive(); const response = await getGraphStyleActive();
const data = response.data; const data = response.data;
@ -179,7 +175,6 @@ export default {
this.parsedStyles = {}; this.parsedStyles = {};
return; return;
} }
// 只取第一个（即 is_active=1 的组） // 只取第一个（即 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 : [];
@ -187,91 +182,76 @@ export default {
// 构建 label -> style 映射 // 构建 label -> style 映射
const styleMap = {}; const styleMap = {};
this.configs.forEach(config => { this.configs.forEach(config => {
// 重要：这里的 current_label 通常是中文（疾病、药品）
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);
localStorage.setItem('graphQA_answers', JSON.stringify(this.answers)); localStorage.setItem('graphQA_answers', JSON.stringify(this.answers));
console.log('✅ 数据已保存到 localStorage');
} catch (e) { } catch (e) {
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_queryRecord');
localStorage.removeItem('graphQA_answers'); 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) { if (this._graph) this._graph.clear();
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.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 => { }).catch(err => {
console.error('接口失败，启动保底方案', err); console.error('接口失败，启动保底方案', err);
const mockData = { const mockData = {
@ -296,36 +276,36 @@ export default {
this.isSending = false; this.isSending = false;
}); });
}, },
formatData(data){
// this._graph.stopLayout();
// this.clearGraphState();
const typeMap = { '疾病': 'Disease', '药品': 'Drug', '药物': 'Drug', '症状': 'Symptom', '检查': 'Check', '病因': 'Cause' };
const getStandardLabel = (rawType) => typeMap[rawType] || rawType;
// 抽离统一的样式处理函数，供 initGraph 和 formatData 使用
processGraphData(data) {
// 1. 获取节点类型映射
const nodeIdToData = {}; const nodeIdToData = {};
data.nodes.forEach(node => { data.nodes.forEach(node => {
nodeIdToData[node.id] = { nodeIdToData[node.id] = { rawType: node.data.type || '其他' };
enLabel: getStandardLabel(node.data.type),
rawType: node.data.type
};
}); });
// === 2. 处理节点：根据自身 label 设置样式 ===
// 2. 处理节点
const updatedNodes = data.nodes.map(node => { const updatedNodes = data.nodes.map(node => {
const enLabel = getStandardLabel(node.data.type); const zhLabel = node.data.type || '其他';
const styleConf = this.parsedStyles[enLabel] || {}; // 直接用中文 Label 去匹配样式配置
// 💡 颜色映射逻辑：如果 styleConf 没给颜色，则按类型分配 const styleConf = this.parsedStyles[zhLabel] || {};
// 颜色优先级：配置 > 硬编码 > 默认
let fColor = styleConf.nodeFill; let fColor = styleConf.nodeFill;
if (!fColor) { if (!fColor) {
if (node.data.type === '疾病') fColor = '#EF4444'; if (zhLabel === '疾病') fColor = '#EF4444';
else if (node.data.type === '药品' || node.data.type === '药物') fColor = '#91cc75'; else if (zhLabel === '药品' || zhLabel === '药物') fColor = '#91cc75';
else if (node.data.type === '症状') fColor = '#fac858'; else if (zhLabel === '症状') fColor = '#fac858';
else if (node.data.type === '检查') fColor = '#336eee'; else if (zhLabel === '检查') fColor = '#336eee';
else fColor = this.nodeFill; 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 }, // 保持 data 原样，但确保 G6 渲染需要的字段
data: { ...node.data, name: node.label },
style: { style: {
...node.style, ...node.style,
size: styleConf.nodeSize || this.nodeSize, size: styleConf.nodeSize || this.nodeSize,
@ -335,17 +315,17 @@ export default {
label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true, label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true,
labelFontSize: styleConf.nodeFontSize || this.nodeFontSize, labelFontSize: styleConf.nodeFontSize || this.nodeFontSize,
labelFontFamily: styleConf.nodeFontFamily || this.nodeFontFamily, labelFontFamily: styleConf.nodeFontFamily || this.nodeFontFamily,
labelFill: styleConf.nodeFontColor || this.nodeFontColor labelFill: styleConf.nodeFontColor || this.nodeFontColor,
labelText: node.label // 显式传入文本防止丢失
} }
}; };
}); });
// === 3. 处理边：根据 source 节点的 label 设置样式 === // 3. 处理边
const updatedEdges = data.edges.map(edge => { const updatedEdges = data.edges.map(edge => {
const sourceInfo = nodeIdToData[edge.source]; const sourceInfo = nodeIdToData[edge.source] || { rawType: '其他' };
const styleConf = this.parsedStyles[sourceInfo.enLabel] || {}; const styleConf = this.parsedStyles[sourceInfo.rawType] || {};
// 💡 边颜色逻辑：跟随源节点类型
let eStroke = styleConf.edgeStroke; let eStroke = styleConf.edgeStroke;
if (!eStroke) { if (!eStroke) {
if (sourceInfo.rawType === '疾病') eStroke = 'rgba(239, 68, 68, 0.4)'; if (sourceInfo.rawType === '疾病') eStroke = 'rgba(239, 68, 68, 0.4)';
@ -357,267 +337,121 @@ export default {
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, ...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,
labelText: edge.data?.label || ""
} }
}; };
}); });
// === 4. 更新图数据 === return { nodes: updatedNodes, edges: updatedEdges };
const pureData = JSON.parse(JSON.stringify({ nodes: updatedNodes, edges: updatedEdges })); },
this.updateGraph(pureData);
formatData(data){
const processed = this.processGraphData(data);
this.buildNodeLabelMap(processed.nodes);
this.updateGraph(processed);
}, },
updateGraph(data) { updateGraph(data) {
if (!this._graph) return; if (!this._graph) return;
this._graph.setData(data); this._graph.setData(data);
this._graph.render(); this._graph.render();
}, },
initGraph(data) { initGraph(data) {
const typeMap = { '疾病': 'Disease', '药品': 'Drug', '药物': 'Drug', '症状': 'Symptom', '检查': 'Check', '病因': 'Cause' }; if (this._graph != null){
const getStandardLabel = (rawType) => typeMap[rawType] || rawType; this._graph.destroy();
if (this._graph!=null){
this._graph.destroy()
this._graph = null; this._graph = null;
} }
// === 1. 构建 nodeId → label 映射 ===
const nodeIdToData = {};
data.nodes.forEach(node => {
nodeIdToData[node.id] = {
enLabel: getStandardLabel(node.data.type),
rawType: node.data.type
};
});
// === 2. 处理节点：根据自身 label 设置样式 ===
const updatedNodes = data.nodes.map(node => {
const enLabel = getStandardLabel(node.data.type);
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 {
...node,
type: styleConf.nodeShape || this.nodeShape,
data: { ...node.data, label: enLabel, name: node.label },
style: {
...node.style,
size: styleConf.nodeSize || this.nodeSize,
fill: fColor,
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 updatedData = this.processGraphData(data);
const updatedEdges = data.edges.map(edge => { this.buildNodeLabelMap(updatedData.nodes);
const sourceInfo = nodeIdToData[edge.source];
const styleConf = this.parsedStyles[sourceInfo.enLabel] || {};
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 {
...edge,
id: edge.data?.relationship?.id || edge.id,
type: styleConf.edgeType ||this.edgeType,
data: { ...edge.data, label: edge.data?.label || "" },
style: {
...edge.style,
endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true,
stroke: eStroke,
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,
edges: updatedEdges
};
this.buildNodeLabelMap(updatedNodes);
const container = this.$refs.graphContainer; const container = this.$refs.graphContainer;
console.log(container) if (!container) return;
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: [
plugins: [ {
{ type: 'toolbar',
type: 'toolbar', key: 'g6-toolbar',
key: 'g6-toolbar', onClick: (id) => {
onClick: (id) => { if (this.$refs.toolbarRef) this.$refs.toolbarRef.handleToolbarAction(id);
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: 'auto-fit', value: 'auto-fit', title: '聚焦' },
{ id: 'export', value: 'export', title: '导出图谱' },
],
}, },
], getItems: () => [
layout: { { id: 'zoom-in', value: 'zoom-in', title: '放大' },
type: 'force', // 力导向布局 { id: 'zoom-out', value: 'zoom-out', title: '缩小' },
gravity: 0.3, // 重力系数，控制节点聚集程度 { id: 'auto-fit', value: 'auto-fit', title: '聚焦' },
repulsion: 500, // 排斥力 { id: 'export', value: 'export', title: '导出图谱' },
attraction: 20, // 吸引力 ],
preventOverlap: true // 防止节点重叠
}, },
behaviors: [ 'zoom-canvas', 'drag-element', ],
'click-select','focus-element', { layout: {
type: 'hover-activate', type: 'force',
degree: 1, gravity: 0.3,
}, repulsion: 500,
{ attraction: 20,
type: 'drag-canvas', preventOverlap: true
enable: (event) => event.shiftKey === false, },
}, behaviors: [
{ 'zoom-canvas', 'drag-element', 'click-select', 'focus-element',
type: 'brush-select', { type: 'hover-activate', degree: 1 },
}, { type: 'drag-canvas', enable: (event) => event.shiftKey === false },
], { type: 'brush-select' }
],
node: { node: {
style: { style: {
// fill: (d) => { labelPlacement: 'center',
// labelWordWrap: true,
// const label = d.data?.type; labelMaxWidth: '150%',
// if (label === '疾病') return '#EF4444'; // 红 labelMaxLines: 3,
// if (label === '药品'||label === '药物') return '#91cc75'; // 绿 labelTextOverflow: 'ellipsis',
// if (label === '症状') return '#fac858'; // 橙 labelTextAlign: 'center',
// if (label === '检查') return '#336eee'; // 橙 opacity: 1
// 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,
labelPlacement: 'center',
labelWordWrap: true,
labelMaxWidth: '150%',
labelMaxLines: 3,
labelTextOverflow: 'ellipsis',
labelTextAlign: 'center',
opacity: 1
},
state: {
active: {
lineWidth: 2,
shadowColor: '#ffffff',
shadowBlur: 10,
opacity: 1
},
inactive: {
opacity: 0.3
},
normal:{
opacity: 1
}
},
}, },
state: {
edge: { active: { lineWidth: 2, shadowColor: '#ffffff', shadowBlur: 10, opacity: 1 },
style: { inactive: { opacity: 0.3 },
labelText: (d) => { normal: { opacity: 1 }
return d.data.label}, },
// stroke: (d) => { },
// const targetLabel = this._nodeLabelMap.get(d.source); // d.target 是目标节点 ID edge: {
// if (targetLabel === '疾病') return 'rgba(239,68,68,0.5)'; style: {
// if (targetLabel === '药品'||targetLabel === '药物') return 'rgba(145,204,117,0.5)'; // 默认配置会在 updatedData 的 style 里被覆盖
// if (targetLabel === '症状') return 'rgba(250,200,88,0.5)'; },
// if (targetLabel === '检查') return 'rgba(51,110,238,0.5)'; // 橙 state: {
// return 'rgba(89,209,212,0.5)'; // default selected: { stroke: '#1890FF', lineWidth: 2 },
// }, highlight: {
// labelFill: (d) => { halo: true, haloStroke: '#1890FF', haloLineWidth: 6,
// // 获取 target 节点的 label haloStrokeOpacity: 0.3, lineWidth: 3, opacity: 1
// 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: {
selected: {
stroke: '#1890FF',
lineWidth: 2,
},
highlight: {
halo: true,
haloStroke: '#1890FF',
haloLineWidth: 6,
haloStrokeOpacity: 0.3,
lineWidth: 3,
opacity: 1
},
inactive: {
opacity: 0.3
},
normal:{
opacity: 1
}
}, },
inactive: { opacity: 0.3 },
normal: { opacity: 1 }
}, },
data:updatedData, },
data: updatedData,
});
});
graph.render();
this._graph = graph
this._graph?.fitView()
}
},
},
graph.render();
this._graph = graph;
this._graph.fitView();
}
}
}; };
</script> </script>
<style scoped> <style scoped>

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

@ -517,7 +517,7 @@ export default {
this.nodeFontColor = s.nodeFontColor; this.nodeFontColor = s.nodeFontColor;
this.nodeShape = s.nodeShape; this.nodeShape = s.nodeShape;
this.nodeSize = s.nodeSize; this.nodeSize = s.nodeSize;
this.nodeFill = s.nodeFill; this.nodeFill = this.convertToRgba(s.nodeFill, 1);
this.nodeStroke = s.nodeStroke; this.nodeStroke = s.nodeStroke;
this.nodeLineWidth = s.nodeLineWidth; this.nodeLineWidth = s.nodeLineWidth;
this.edgeShowLabel = s.edgeShowLabel; this.edgeShowLabel = s.edgeShowLabel;
@ -527,7 +527,45 @@ export default {
this.edgeFontColor = s.edgeFontColor; this.edgeFontColor = s.edgeFontColor;
this.edgeType = s.edgeType; this.edgeType = s.edgeType;
this.edgeLineWidth = s.edgeLineWidth; this.edgeLineWidth = s.edgeLineWidth;
this.edgeStroke = s.edgeStroke; this.edgeStroke = this.convertToRgba(s.edgeStroke, 0.6);
},
convertToRgba(color, defaultOpacity = 1) {
if (!color) return `rgba(182, 178, 178, ${defaultOpacity})`;
const strColor = String(color).trim();
const safeOpacity = (opacity) => {
const n = parseFloat(opacity);
return n >= 1 ? 0.999 : n;
};
// 1. 如果已经是 rgba
if (strColor.startsWith('rgba')) {
const parts = strColor.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
if (parts) {
return `rgba(${parts[1]}, ${parts[2]}, ${parts[3]}, ${safeOpacity(parts[4])})`;
}
return strColor;
}
// 2. 如果是 rgb
if (strColor.startsWith('rgb')) {
return strColor.replace('rgb', 'rgba').replace(')', `, ${safeOpacity(defaultOpacity)})`);
}
// 3. 处理 Hex
if (strColor.startsWith('#')) {
let r, g, b;
if (strColor.length === 4) {
r = parseInt(strColor[1] + strColor[1], 16);
g = parseInt(strColor[2] + strColor[2], 16);
b = parseInt(strColor[3] + strColor[3], 16);
} else {
r = parseInt(strColor.slice(1, 3), 16);
g = parseInt(strColor.slice(3, 5), 16);
b = parseInt(strColor.slice(5, 7), 16);
}
return `rgba(${r}, ${g}, ${b}, ${safeOpacity(defaultOpacity)})`;
}
return strColor;
}, },
// 退出编辑模式：恢复控制栏到初始默认值 // 退出编辑模式：恢复控制栏到初始默认值

Write Preview
Loading…
Cancel
Save