You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
590 lines
17 KiB
590 lines
17 KiB
|
|
<template>
|
|
<div style="display: flex;
|
|
height: 100vh;">
|
|
<Menu
|
|
:initial-active="2"
|
|
/>
|
|
<div class="medical-qa-container">
|
|
<!-- 标题 -->
|
|
<div style="display: flex;align-items: center;">
|
|
<div class="title-before">
|
|
</div>
|
|
<h2 class="title">医疗问答</h2>
|
|
</div>
|
|
|
|
<!-- 搜索框 -->
|
|
<div class="search-box">
|
|
<el-input
|
|
v-model="query"
|
|
placeholder="请输入问题..."
|
|
clearable
|
|
@keydown.enter="handleSearch"
|
|
/>
|
|
<el-button type="primary" @click="handleSearch" style=" background: #114FE6;">查询</el-button>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="content-wrapper">
|
|
<!-- 左侧：问答结果 -->
|
|
<div class="answer-list">
|
|
<div v-if="queryRecord">
|
|
<h2 class="section-title" style="margin-bottom: 10px;margin-top: 0px">问答提问</h2>
|
|
<div class="answer-item" style=" background-color: #165DFF;
|
|
border-color: #0066cc;
|
|
color: #fff; height: auto;max-height: 3vw">
|
|
{{queryRecord}}
|
|
</div>
|
|
</div>
|
|
<h2 class="section-title">问答结果</h2>
|
|
<div v-if="answers.length === 0" class="empty-state">
|
|
请输入问题进行查询...
|
|
</div>
|
|
<div v-else class="answer-items">
|
|
<div
|
|
v-for="(item, index) in answers"
|
|
:key="index"
|
|
class="answer-item"
|
|
@click="selectGraph(index)"
|
|
:class="{ 'highlight': selected === index }"
|
|
>
|
|
{{ item.answer }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：知识图谱 -->
|
|
<div class="knowledge-graph">
|
|
<div ref="graphContainer" class="graph-container" id="container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Menu from "@/components/Menu.vue";
|
|
import {qaAnalyze} from "@/api/qa";
|
|
import {Graph} from "@antv/g6";
|
|
import {getGraph} from "@/api/graph";
|
|
|
|
|
|
export default {
|
|
name: 'GraghQA',
|
|
components: {Menu},
|
|
data() {
|
|
return {
|
|
query:"",
|
|
answers:[],
|
|
selected:0,
|
|
// 节点样式
|
|
nodeShowLabel: true,
|
|
nodeFontSize: 12,
|
|
nodeFontColor: '#fff',
|
|
nodeShape: 'circle',
|
|
nodeSize: 50,
|
|
nodeFill: '#9FD5FF',
|
|
nodeStroke: '#5B8FF9',
|
|
nodeLineWidth: 2,
|
|
nodeFontFamily: 'Microsoft YaHei, sans-serif',
|
|
|
|
// 边样式
|
|
edgeShowLabel: true,
|
|
edgeFontSize: 10,
|
|
edgeFontColor: '#666666',
|
|
edgeType: 'quadratic',
|
|
edgeLineWidth: 2,
|
|
edgeStroke: '#b6b2b2',
|
|
edgeEndArrow: true,
|
|
edgeFontFamily: 'Microsoft YaHei, sans-serif',
|
|
|
|
|
|
queryRecord:""
|
|
|
|
};
|
|
},
|
|
// =============== 👇【新增】组件内路由守卫：离开当前路由时触发 ===============
|
|
beforeRouteLeave(to, from, next) {
|
|
this.saveDataToLocalStorage();
|
|
next(); // 允许导航
|
|
},
|
|
// =======================================================================
|
|
|
|
mounted() {
|
|
// =============== 👇【新增】页面加载时从 localStorage 恢复数据 ===============
|
|
this.restoreDataFromLocalStorage();
|
|
// =======================================================================
|
|
|
|
// 如果有初始数据，可以初始化图谱（可选）
|
|
if (this.answers.length > 0) {
|
|
this.initGraph(this.answers[0].result);
|
|
}
|
|
},
|
|
|
|
beforeUnmount() {
|
|
// =============== 👇【新增】组件销毁前也保存一次（兼容非路由跳转场景）==============
|
|
this.saveDataToLocalStorage();
|
|
// 移除页面卸载监听（如果用了 beforeunload）
|
|
window.removeEventListener('beforeunload', this.handleBeforeUnload);
|
|
// =======================================================================
|
|
},
|
|
|
|
created() {
|
|
// =============== 👇【新增】监听页面刷新/关闭事件 ===============
|
|
window.addEventListener('beforeunload', this.handleBeforeUnload);
|
|
// =======================================================================
|
|
},
|
|
methods: {
|
|
buildNodeLabelMap(nodes) {
|
|
this._nodeLabelMap = new Map();
|
|
nodes.forEach(node => {
|
|
this._nodeLabelMap.set(node.id, node.data?.type || 'default');
|
|
});
|
|
},
|
|
// =============== 👇【新增】统一的数据保存方法 ===============
|
|
saveDataToLocalStorage() {
|
|
try {
|
|
localStorage.setItem('graphQA_queryRecord', this.queryRecord);
|
|
localStorage.setItem('graphQA_answers', JSON.stringify(this.answers));
|
|
console.log('✅ 数据已保存到 localStorage');
|
|
} catch (e) {
|
|
console.warn('⚠️ 无法保存到 localStorage:', e);
|
|
}
|
|
},
|
|
// =======================================================================
|
|
|
|
// =============== 👇【新增】统一的数据恢复方法 ===============
|
|
restoreDataFromLocalStorage() {
|
|
try {
|
|
const savedQuery = localStorage.getItem('graphQA_queryRecord');
|
|
const savedAnswers = localStorage.getItem('graphQA_answers');
|
|
|
|
if (savedQuery !== null) {
|
|
this.queryRecord = savedQuery;
|
|
}
|
|
if (savedAnswers !== null) {
|
|
this.answers = JSON.parse(savedAnswers);
|
|
// 确保 selected 不越界
|
|
if (this.answers.length > 0) {
|
|
this.selected = Math.min(this.selected, this.answers.length - 1);
|
|
}
|
|
}
|
|
console.log('✅ 数据已从 localStorage 恢复');
|
|
} catch (e) {
|
|
console.warn('⚠️ 无法从 localStorage 恢复数据:', e);
|
|
// 出错时清空（避免脏数据）
|
|
localStorage.removeItem('graphQA_queryRecord');
|
|
localStorage.removeItem('graphQA_answers');
|
|
}
|
|
},
|
|
// =======================================================================
|
|
|
|
// =============== 👇【新增】处理页面关闭/刷新的兜底保存 ===============
|
|
handleBeforeUnload(event) {
|
|
this.saveDataToLocalStorage();
|
|
// 注意：现代浏览器通常不显示自定义消息
|
|
event.preventDefault();
|
|
event.returnValue = ''; // 必须设置才能触发提示（但实际可能不显示）
|
|
},
|
|
selectGraph(index){
|
|
this.selected=index
|
|
this.formatData(this.answers[index].result)
|
|
},
|
|
handleSearch(){
|
|
this.answers=[]
|
|
this.formatData([])
|
|
let data={
|
|
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=>{
|
|
this.answers=res
|
|
if(this.answers.length>0){
|
|
this.initGraph(this.answers[0].result)
|
|
}
|
|
})
|
|
},
|
|
formatData(data){
|
|
// this._graph.stopLayout();
|
|
// 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,
|
|
|
|
},
|
|
}))
|
|
const updatedNodes = data.nodes.map(node => ({
|
|
...node,
|
|
type: this.nodeShape,
|
|
style:{
|
|
size: this.nodeSize,
|
|
lineWidth: this.nodeLineWidth,
|
|
label: this.nodeShowLabel,
|
|
labelFontSize: this.nodeFontSize,
|
|
labelFontFamily: this.nodeFontFamily,
|
|
labelFill: this.nodeFontColor,
|
|
opacity: 1,
|
|
}
|
|
}))
|
|
const updatedData = {
|
|
nodes: updatedNodes,
|
|
edges: updatedEdges
|
|
}
|
|
|
|
this.updateGraph(updatedData)
|
|
},
|
|
updateGraph(data) {
|
|
if (!this._graph) return
|
|
this._graph.setData(data)
|
|
this._graph.render()
|
|
},
|
|
initGraph(data) {
|
|
if (this._graph!=null){
|
|
this._graph.destroy()
|
|
this._graph = null;
|
|
}
|
|
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,
|
|
|
|
},
|
|
}))
|
|
const updatedNodes = data.nodes.map(node => ({
|
|
...node,
|
|
type: this.nodeShape,
|
|
style:{
|
|
size: this.nodeSize,
|
|
lineWidth: this.nodeLineWidth,
|
|
label: this.nodeShowLabel,
|
|
labelFontSize: this.nodeFontSize,
|
|
labelFontFamily: this.nodeFontFamily,
|
|
labelFill: this.nodeFontColor,
|
|
opacity: 1,
|
|
}
|
|
}))
|
|
const updatedData = {
|
|
nodes: updatedNodes,
|
|
edges: updatedEdges
|
|
}
|
|
this.buildNodeLabelMap(updatedNodes);
|
|
const container = this.$refs.graphContainer;
|
|
console.log(container)
|
|
if (container!=null){
|
|
const width = container.clientWidth || 800;
|
|
const height = container.clientHeight || 600;
|
|
console.log(width)
|
|
console.log(height)
|
|
const graph = new Graph({
|
|
container,
|
|
width,
|
|
height,
|
|
layout: {
|
|
type: 'force', // 力导向布局
|
|
gravity: 0.3, // 重力系数，控制节点聚集程度
|
|
repulsion: 500, // 排斥力
|
|
attraction: 20, // 吸引力
|
|
preventOverlap: true // 防止节点重叠
|
|
|
|
|
|
},
|
|
behaviors: [ 'zoom-canvas', 'drag-element',
|
|
'click-select','focus-element', {
|
|
type: 'hover-activate',
|
|
degree: 1,
|
|
},
|
|
{
|
|
type: 'drag-canvas',
|
|
enable: (event) => event.shiftKey === false,
|
|
},
|
|
{
|
|
type: 'brush-select',
|
|
},
|
|
],
|
|
|
|
node: {
|
|
style: {
|
|
fill: (d) => {
|
|
|
|
const label = d.data?.type;
|
|
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,
|
|
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
|
|
}
|
|
|
|
|
|
},
|
|
},
|
|
|
|
edge: {
|
|
style: {
|
|
labelText: (d) => {
|
|
console.log(d)
|
|
return d.data.label},
|
|
stroke: (d) => {
|
|
const targetLabel = this._nodeLabelMap.get(d.source); // d.target 是目标节点 ID
|
|
if (targetLabel === '疾病') return 'rgba(239,68,68,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(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: {
|
|
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
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
data:updatedData,
|
|
|
|
|
|
});
|
|
|
|
graph.render();
|
|
this._graph = graph
|
|
this._graph?.fitView()
|
|
}
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
|
|
|
|
.medical-qa-container {
|
|
padding: 25px;
|
|
background-color: #F6F9FF;
|
|
flex: 1;
|
|
overflow: auto;
|
|
height: 100vh;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.title {
|
|
font-size: 22px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #165DFF;
|
|
margin-left: 11px;
|
|
}
|
|
|
|
.title-before {
|
|
content: '';
|
|
width: 8px;
|
|
height: 22px;
|
|
background-color: #165DFF;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.search-box .el-input {
|
|
flex: 1;
|
|
max-width: 94%;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.content-wrapper {
|
|
display: flex;
|
|
gap: 20px;
|
|
height: 37vw;
|
|
}
|
|
|
|
.answer-list {
|
|
flex: 1;
|
|
background-color: white;
|
|
border-radius: 33px;
|
|
padding: 25px;
|
|
box-shadow: 3px 1px 12px 7px #ECF2FF;
|
|
max-width: 32%;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
color: #165DFF;
|
|
margin-bottom: 15px;
|
|
padding-left: 12px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.section-title::before {
|
|
content: '';
|
|
width: 6px;
|
|
height: 16px;
|
|
background-color: #165DFF;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.answer-items {
|
|
max-height: 25vw;
|
|
overflow-y: auto;
|
|
padding-right: 10px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
.answer-items::-webkit-scrollbar {
|
|
width: 6px; /* 滚动条宽度 */
|
|
}
|
|
|
|
.answer-items::-webkit-scrollbar-track {
|
|
background: #fff; /* 轨道背景 */
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.answer-items::-webkit-scrollbar-thumb {
|
|
background: #B8C2D9; /* 滑块颜色 */
|
|
border-radius: 4px;
|
|
transition: background 0.2s ease;
|
|
|
|
}
|
|
|
|
.answer-items::-webkit-scrollbar-thumb:hover {
|
|
background: #B8C2D9; /* 悬停时滑块颜色 */
|
|
}
|
|
.answer-item {
|
|
padding: 12px;
|
|
border: 1px solid #165DFF;
|
|
border-radius: 15px;
|
|
background-color: #f9f9f9;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
color: #a2a5a7;
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
height: 4.5vw;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.answer-item.highlight {
|
|
background-color: #165DFF;
|
|
border-color: #0066cc;
|
|
color: #fff;
|
|
}
|
|
.answer-item:hover {
|
|
background-color: #165DFF;
|
|
border-color: #0066cc;
|
|
color: #fff;
|
|
}
|
|
.empty-state {
|
|
text-align: center;
|
|
color: #fff;
|
|
padding: 40px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.knowledge-graph {
|
|
flex: 1;
|
|
background-color: white;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
}
|
|
/deep/.el-input__wrapper{
|
|
background-color: #EFF4FF;
|
|
border: 1px solid #165DFF;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
</style>
|