5 changed files with 1080 additions and 145 deletions
@ -0,0 +1,272 @@ |
|||
<template> |
|||
<div style="display: flex; |
|||
height: 100vh;"> |
|||
<Menu |
|||
:initial-active="1" |
|||
/> |
|||
<div class="qwen-chat"> |
|||
<!-- 聊天消息区域 --> |
|||
<div ref="messagesContainer" class="chat-messages"> |
|||
<div |
|||
v-for="(msg, index) in messages" |
|||
:key="index" |
|||
:class="['message', msg.role]" |
|||
> |
|||
<div class="bubble">{{ msg.content }}</div> |
|||
</div> |
|||
</div> |
|||
<!-- 输入区域（Qwen 风格） --> |
|||
<div class="input-area"> |
|||
<textarea |
|||
v-model="inputText" |
|||
placeholder="向千问提问" |
|||
class="input-box" |
|||
@keyup.enter.exact.prevent="sendMessage" |
|||
rows="1" |
|||
></textarea> |
|||
|
|||
<div class="action-buttons"> |
|||
<button class="btn" @click="insertPrefix('深度思考：')"> |
|||
<span>☰</span> 深度思考 |
|||
</button> |
|||
<button class="btn" @click="insertPrefix('深度研究：')"> |
|||
<span>🔍</span> 深度研究 |
|||
</button> |
|||
<button class="btn" @click="insertPrefix('```代码\n')"> |
|||
<span><></span> 代码 |
|||
</button> |
|||
<button class="btn" @click="insertPrefix('生成一张图片：')"> |
|||
<span>🖼️</span> 图像 |
|||
</button> |
|||
<button class="btn" @click="insertPrefix('翻译成英文：')"> |
|||
<span>🌐</span> 翻译 |
|||
</button> |
|||
<button class="btn more-btn">...</button> |
|||
</div> |
|||
|
|||
<div class="icon-group"> |
|||
<span class="icon" title="切换语言">🌍</span> |
|||
<span class="icon" title="编辑模式">✏️</span> |
|||
<button class="send-btn" @click="sendMessage" title="发送"> |
|||
<span>📤</span> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import Menu from "@/components/Menu.vue"; |
|||
|
|||
export default { |
|||
name: 'QwenChat', |
|||
components: {Menu}, |
|||
data() { |
|||
return { |
|||
inputText: '', |
|||
messages: [ |
|||
{ role: 'assistant', content: '你好！我是 Qwen，有什么可以帮你的吗？' } |
|||
] |
|||
}; |
|||
}, |
|||
methods: { |
|||
sendMessage() { |
|||
const text = this.inputText.trim(); |
|||
if (!text) return; |
|||
|
|||
// 添加用户消息 |
|||
this.messages.push({ role: 'user', content: text }); |
|||
this.inputText = ''; |
|||
|
|||
// 模拟 AI 回复（可替换为真实 API） |
|||
setTimeout(() => { |
|||
this.messages.push({ |
|||
role: 'assistant', |
|||
content: `你刚才说：“${text}” —— 这是一个模拟回复。` |
|||
}); |
|||
}, 600); |
|||
}, |
|||
insertPrefix(prefix) { |
|||
this.inputText += prefix; |
|||
this.$nextTick(() => { |
|||
// 自动聚焦到 textarea 末尾（简单处理） |
|||
const el = this.$el.querySelector('.input-box'); |
|||
el.focus(); |
|||
}); |
|||
}, |
|||
scrollToBottom() { |
|||
this.$nextTick(() => { |
|||
const container = this.$refs.messagesContainer; |
|||
if (container) { |
|||
container.scrollTop = container.scrollHeight; |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
watch: { |
|||
messages() { |
|||
this.scrollToBottom(); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.scrollToBottom(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.qwen-chat { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100vh; |
|||
max-width: 800px; |
|||
margin: 0 auto; |
|||
border: 1px solid #e0e0e0; |
|||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); |
|||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
|||
} |
|||
|
|||
/* === 消息区域 === */ |
|||
.chat-messages { |
|||
flex: 1; |
|||
padding: 16px; |
|||
overflow-y: auto; |
|||
background-color: #f9f9f9; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.message { |
|||
display: flex; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.message.user { |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.message.assistant { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.bubble { |
|||
padding: 10px 14px; |
|||
border-radius: 18px; |
|||
max-width: 75%; |
|||
word-break: break-word; |
|||
line-height: 1.5; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.message.user .bubble { |
|||
background-color: #007bff; |
|||
color: white; |
|||
border-bottom-right-radius: 4px; |
|||
} |
|||
|
|||
.message.assistant .bubble { |
|||
background-color: #e9ecef; |
|||
color: #333; |
|||
border-bottom-left-radius: 4px; |
|||
} |
|||
|
|||
/* === 输入区域 === */ |
|||
.input-area { |
|||
padding: 16px; |
|||
background: white; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
|
|||
.input-box { |
|||
width: 100%; |
|||
padding: 12px 16px; |
|||
border: 1px solid #d9d9d9; |
|||
border-radius: 12px; |
|||
font-size: 14px; |
|||
line-height: 1.5; |
|||
resize: none; |
|||
outline: none; |
|||
transition: border-color 0.2s ease; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.input-box:focus { |
|||
border-color: #007bff; |
|||
} |
|||
|
|||
.action-buttons { |
|||
display: flex; |
|||
gap: 8px; |
|||
margin: 12px 0; |
|||
overflow-x: auto; |
|||
white-space: nowrap; |
|||
padding: 0 4px; |
|||
} |
|||
|
|||
.btn { |
|||
padding: 6px 12px; |
|||
background: #f5f5f5; |
|||
border: 1px solid #ddd; |
|||
border-radius: 12px; |
|||
font-size: 12px; |
|||
color: #333; |
|||
cursor: pointer; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 4px; |
|||
} |
|||
|
|||
.btn:hover { |
|||
background: #e9e9e9; |
|||
} |
|||
|
|||
.btn span { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.more-btn { |
|||
background: transparent; |
|||
border: 1px dashed #ccc; |
|||
color: #666; |
|||
} |
|||
|
|||
.icon-group { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
gap: 12px; |
|||
margin-top: 8px; |
|||
} |
|||
|
|||
.icon, |
|||
.send-btn span { |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
color: #999; |
|||
} |
|||
|
|||
.icon:hover, |
|||
.send-btn:hover span { |
|||
color: #333; |
|||
} |
|||
|
|||
.send-btn { |
|||
background: #9b68ff; |
|||
border: none; |
|||
width: 32px; |
|||
height: 32px; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
cursor: pointer; |
|||
transition: background-color 0.2s; |
|||
} |
|||
|
|||
.send-btn:hover { |
|||
background: #8a53e0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,788 @@ |
|||
<template> |
|||
<div class="knowledge-graph-container"> |
|||
<Menu |
|||
:initial-active="5" |
|||
/> |
|||
<div class="control-panel"> |
|||
<!-- 节点控制 --> |
|||
<div class="section"> |
|||
<h5>节点控制</h5> |
|||
<label style="text-align: left;margin: 10px 0;display: flex;align-items: center;font-size: 12px;"> |
|||
<input v-model="nodeShowLabel" type="checkbox" /> |
|||
显示节点标签 |
|||
</label> |
|||
<div class="form-group"> |
|||
<label>字体名称:</label> |
|||
<select v-model="nodeFontFamily"> |
|||
<!-- 中文常用字体 --> |
|||
<option value="Microsoft YaHei, sans-serif">微软雅黑</option> |
|||
<option value="SimSun, serif">宋体（SimSun）</option> |
|||
<option value="SimHei, sans-serif">黑体（SimHei）</option> |
|||
<option value="KaiTi, serif">楷体（KaiTi）</option> |
|||
<option value="FangSong, serif">仿宋（FangSong）</option> |
|||
<option value="PingFang SC, Helvetica Neue, sans-serif">苹方（PingFang SC）</option> |
|||
|
|||
<!-- 英文/通用字体 --> |
|||
<option value="Arial, sans-serif">Arial</option> |
|||
<option value="Helvetica, sans-serif">Helvetica</option> |
|||
<option value="Times New Roman, serif">Times New Roman</option> |
|||
<option value="Georgia, serif">Georgia</option> |
|||
<option value="Courier New, monospace">Courier New（等宽）</option> |
|||
<option value="Verdana, sans-serif">Verdana</option> |
|||
<option value="Tahoma, sans-serif">Tahoma</option> |
|||
<option value="Impact, sans-serif">Impact</option> |
|||
</select> |
|||
</div> |
|||
<div class="slider-group"> |
|||
<span>字体大小: {{ nodeFontSize }}px</span> |
|||
<input |
|||
v-model.number="nodeFontSize" |
|||
type="range" |
|||
min="10" |
|||
max="24" |
|||
step="1" |
|||
/> |
|||
</div> |
|||
<div class="color-picker"> |
|||
<label>字体颜色:</label> |
|||
<input v-model="nodeFontColor" type="color" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>图形:</label> |
|||
<select v-model="nodeShape"> |
|||
<option value="circle">圆形</option> |
|||
<option value="diamond">菱形</option> |
|||
<option value="triangle">三角形</option> |
|||
<option value="rect">矩形</option> |
|||
<option value="star">星形</option> |
|||
<option value="hexagon">六边形</option> |
|||
</select> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>尺寸:</label> |
|||
<input v-model.number="nodeSize" type="number" min="30" max="100" /> |
|||
</div> |
|||
<div class="color-picker"> |
|||
<label>填充颜色:</label> |
|||
<input v-model="nodeFill" type="color" /> |
|||
</div> |
|||
<div class="color-picker"> |
|||
<label>边框颜色:</label> |
|||
<input v-model="nodeStroke" type="color" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>边框尺寸:</label> |
|||
<input v-model.number="nodeLineWidth" type="number" min="1" max="5" /> |
|||
</div> |
|||
</div> |
|||
<!-- 连边控制 --> |
|||
<div class="section"> |
|||
<h5>连边控制</h5> |
|||
<label style="text-align: left;margin: 10px 0;display: flex;align-items: center;font-size: 12px;"> |
|||
<input v-model="edgeShowLabel" type="checkbox" /> |
|||
显示连边标签 |
|||
<input v-model="edgeEndArrow" type="checkbox" style="margin-left: 10px"/> |
|||
显示端点箭头 |
|||
</label> |
|||
<div class="form-group"> |
|||
<label>字体名称:</label> |
|||
<select v-model="edgeFontFamily"> |
|||
<option value="Microsoft YaHei, sans-serif">微软雅黑</option> |
|||
<option value="SimSun, serif">宋体</option> |
|||
<option value="SimHei, sans-serif">黑体</option> |
|||
<option value="Arial, sans-serif">Arial</option> |
|||
<option value="sans-serif">无衬线（默认）</option> |
|||
</select> |
|||
</div> |
|||
<div class="slider-group"> |
|||
<span>字体大小: {{ edgeFontSize }}px</span> |
|||
<input |
|||
v-model.number="edgeFontSize" |
|||
type="range" |
|||
min="8" |
|||
max="16" |
|||
step="1" |
|||
/> |
|||
</div> |
|||
<div class="color-picker"> |
|||
<label>字体颜色:</label> |
|||
<input v-model="edgeFontColor" type="color" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>连边类型:</label> |
|||
<select v-model="edgeType"> |
|||
<option value="line">直线</option> |
|||
<option value="polyline">折线边</option> |
|||
<option value="cubic">三次贝塞尔曲线边</option> |
|||
<option value="cubic-horizontal">水平三次贝塞尔曲线边</option> |
|||
<option value="cubic-vertical">垂直三次贝塞尔曲线边</option> |
|||
<option value="quadratic">二次贝塞尔曲线边</option> |
|||
</select> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>线粗细:</label> |
|||
<input v-model.number="edgeLineWidth" type="number" min="1" max="5" /> |
|||
</div> |
|||
<div class="color-picker"> |
|||
<label>线条颜色:</label> |
|||
<input v-model="edgeStroke" type="color" /> |
|||
</div> |
|||
<!-- <label>--> |
|||
<!-- <input v-model="edgeEndArrow" type="checkbox" />--> |
|||
<!-- 显示端点箭头--> |
|||
<!-- </label>--> |
|||
</div> |
|||
<button @click="resetView">重置视图</button> |
|||
<button @click="resetStyle">重置样式</button> |
|||
<!-- 操作按钮 --> |
|||
</div> |
|||
<!-- 图谱容器 --> |
|||
<div ref="graphContainer" class="graph-container" id="container"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getTestGraphData } from "@/api/graph" |
|||
import { Graph } from '@antv/g6'; |
|||
import Menu from "@/components/Menu.vue"; |
|||
|
|||
export default { |
|||
name: 'GraphDemo', |
|||
components: {Menu}, |
|||
data() { |
|||
return { |
|||
G6: null, // 添加这个 |
|||
// 节点样式 |
|||
nodeShowLabel: true, |
|||
nodeFontSize: 12, |
|||
nodeFontColor: '#fff', |
|||
nodeShape: 'circle', |
|||
nodeSize: 60, |
|||
nodeFill: '#9FD5FF', |
|||
nodeStroke: '#5B8FF9', |
|||
nodeLineWidth: 2, |
|||
nodeFontFamily: 'Microsoft YaHei, sans-serif', |
|||
|
|||
// 边样式 |
|||
edgeShowLabel: true, |
|||
edgeFontSize: 10, |
|||
edgeFontColor: '#666666', |
|||
edgeType: 'line', |
|||
edgeLineWidth: 2, |
|||
edgeStroke: '#F00', |
|||
edgeEndArrow: true, |
|||
edgeFontFamily: 'Microsoft YaHei, sans-serif', |
|||
|
|||
defaultData: { |
|||
"nodes": [ |
|||
{ |
|||
"id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", |
|||
"data": { |
|||
"name": "霍乱", |
|||
"diagnosisCode": "A00.900", |
|||
"nodeId": 6978, |
|||
"label": "Disease" |
|||
} |
|||
}, |
|||
{ |
|||
"id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:9461", |
|||
"data": { |
|||
"name": "腹泻", |
|||
"nodeId": 9464, |
|||
"label": "Symptom" |
|||
} |
|||
}, |
|||
{ |
|||
"id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:5992", |
|||
"data": { |
|||
"name": "脱水", |
|||
"nodeId": 5995, |
|||
"label": "Disease" |
|||
} |
|||
}, |
|||
{ |
|||
"id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:1277", |
|||
"data": { |
|||
"name": "呕吐", |
|||
"nodeId": 1280, |
|||
"label": "Disease" |
|||
} |
|||
}, |
|||
{ |
|||
"id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:26775", |
|||
"data": { |
|||
"name": "由霍乱弧菌感染所致", |
|||
"nodeId": 26778, |
|||
"label": "Cause" |
|||
} |
|||
}, |
|||
{ |
|||
"id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:48981", |
|||
"data": { |
|||
"name": "复方磺胺甲噁唑", |
|||
"nodeId": 48984, |
|||
"label": "Drug" |
|||
} |
|||
}, |
|||
{ |
|||
"id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:17392", |
|||
"data": { |
|||
"name": "消化系统", |
|||
"nodeId": 17395, |
|||
"label": "DiseaseSite" |
|||
} |
|||
}, |
|||
{ |
|||
"id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:18534", |
|||
"data": { |
|||
"name": "传染科", |
|||
"nodeId": 18537, |
|||
"label": "Department" |
|||
} |
|||
}, |
|||
{ |
|||
"id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:413", |
|||
"data": { |
|||
"name": "代谢性 酸中毒", |
|||
"nodeId": 416, |
|||
"label": "Disease" |
|||
} |
|||
}, |
|||
{ |
|||
"id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:2990", |
|||
"data": { |
|||
"name": "急性肾衰竭", |
|||
"nodeId": 2993, |
|||
"label": "Disease" |
|||
} |
|||
} |
|||
], |
|||
"edges": [ |
|||
{ |
|||
"source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", |
|||
"target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:9461", |
|||
"type": "line", |
|||
"data": { |
|||
"relationship": { |
|||
"type": "symptomAndSign", |
|||
"properties": { "label": "症状与体征" } |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", |
|||
"target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:5992", |
|||
"type": "line", |
|||
"data": { |
|||
"relationship": { |
|||
"type": "complication", |
|||
"properties": { "label": "并发症" } |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", |
|||
"target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:1277", |
|||
"type": "line", |
|||
"data": { |
|||
"relationship": { |
|||
"type": "complication", |
|||
"properties": { "label": "并发症" } |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", |
|||
"target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:26775", |
|||
"type": "line", |
|||
"data": { |
|||
"relationship": { |
|||
"type": "cause", |
|||
"properties": { "label": "病因" } |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", |
|||
"target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:48981", |
|||
"type": "line", |
|||
"data": { |
|||
"relationship": { |
|||
"type": "treatmentPrograms", |
|||
"properties": { "label": "治疗方案" } |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", |
|||
"target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:17392", |
|||
"type": "line", |
|||
"data": { |
|||
"relationship": { |
|||
"type": "diseaseSite", |
|||
"properties": { "label": "病变部位" } |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", |
|||
"target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:18534", |
|||
"type": "line", |
|||
"data": { |
|||
"relationship": { |
|||
"type": "department", |
|||
"properties": { "label": "科室" } |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", |
|||
"target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:413", |
|||
"type": "line", |
|||
"data": { |
|||
"relationship": { |
|||
"type": "complication", |
|||
"properties": { "label": "并发症" } |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975", |
|||
"target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:2990", |
|||
"type": "line", |
|||
"data": { |
|||
"relationship": { |
|||
"type": "complication", |
|||
"properties": { "label": "并发症" } |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
children: 'children', |
|||
label: 'title' // 虽然用插槽，但 el-tree 内部仍会读取，可留空或任意 |
|||
} |
|||
}, |
|||
|
|||
async mounted() { |
|||
await this.$nextTick(); |
|||
try { |
|||
const updatedNodes = this.defaultData.nodes.map(node => ({ |
|||
...node, |
|||
type: this.nodeShape, |
|||
style:{ |
|||
size: this.nodeSize, |
|||
fill: this.nodeFill, |
|||
stroke: this.nodeStroke, |
|||
lineWidth: this.nodeLineWidth, |
|||
label: this.nodeShowLabel, |
|||
labelFontSize: this.nodeFontSize, |
|||
labelFontFamily: this.nodeFontFamily, |
|||
labelFill: this.nodeFontColor, |
|||
} |
|||
})) |
|||
const updatedEdges = this.defaultData.edges.map(edge => ({ |
|||
...edge, |
|||
type: this.edgeType, |
|||
id: edge.data.relationship.id, |
|||
style: { |
|||
endArrow: this.edgeEndArrow, |
|||
stroke: this.edgeStroke, |
|||
lineWidth: this.edgeLineWidth, |
|||
label: this.edgeShowLabel, |
|||
labelFontSize: this.edgeFontSize, |
|||
labelFontFamily: this.edgeFontFamily, |
|||
labelFill: this.edgeFontColor, |
|||
}, |
|||
})) |
|||
const updatedData = { |
|||
nodes: updatedNodes, |
|||
edges: updatedEdges |
|||
} |
|||
this.defaultData = updatedData |
|||
setTimeout(() => { |
|||
this.initGraph(); |
|||
window.addEventListener('resize', this.handleResize); |
|||
}, 1000); |
|||
} catch (error) { |
|||
console.error('加载图谱数据失败:', error); |
|||
} |
|||
}, |
|||
beforeUnmount() { |
|||
this._graph.destroy() |
|||
this._graph = null; |
|||
window.removeEventListener('resize', this.handleResize); |
|||
}, |
|||
watch: { |
|||
// 节点相关 |
|||
nodeShowLabel: 'updateAllNodes', |
|||
nodeFontSize: 'updateAllNodes', |
|||
nodeFontColor: 'updateAllNodes', |
|||
nodeShape: 'updateAllNodes', |
|||
nodeSize: 'updateAllNodes', |
|||
nodeFill: 'updateAllNodes', |
|||
nodeStroke: 'updateAllNodes', |
|||
nodeLineWidth: 'updateAllNodes', |
|||
nodeFontFamily: 'updateAllNodes', |
|||
|
|||
// 边相关 |
|||
edgeShowLabel: 'updateAllEdges', |
|||
edgeFontSize: 'updateAllEdges', |
|||
edgeFontColor: 'updateAllEdges', |
|||
edgeType: 'updateAllEdges', |
|||
edgeLineWidth: 'updateAllEdges', |
|||
edgeStroke: 'updateAllEdges', |
|||
edgeEndArrow: 'updateAllEdges', |
|||
edgeFontFamily: 'updateAllEdges', |
|||
}, |
|||
methods: { |
|||
buildNodeLabelMap(nodes) { |
|||
this._nodeLabelMap = new Map(); |
|||
nodes.forEach(node => { |
|||
this._nodeLabelMap.set(node.id, node.data?.label || 'default'); |
|||
}); |
|||
}, |
|||
initGraph() { |
|||
|
|||
if (this._graph!=null){ |
|||
this._graph.destroy() |
|||
this._graph = null; |
|||
} |
|||
if (!this._nodeLabelMap) { |
|||
this.buildNodeLabelMap(this.defaultData.nodes); |
|||
} |
|||
const container = this.$refs.graphContainer; |
|||
const width = container.clientWidth || 800; |
|||
const height = container.clientHeight || 600; |
|||
|
|||
const graph = new Graph({ |
|||
container, |
|||
width, |
|||
height, |
|||
layout: { |
|||
type: 'radial', |
|||
nodeSize: 32, |
|||
unitRadius: 100, |
|||
linkDistance: 200, |
|||
}, |
|||
behaviors: [ 'zoom-canvas', 'drag-element','click-select','focus-element', |
|||
{ |
|||
type: 'hover-activate', |
|||
degree: 1, // 👈🏻 Activate relations. |
|||
}, |
|||
{ |
|||
type: 'drag-canvas', |
|||
enable: (event) => event.shiftKey === false, |
|||
}, |
|||
{ |
|||
type: 'brush-select', |
|||
}, |
|||
], |
|||
|
|||
node: { |
|||
style: { |
|||
labelText: (d) => d.data.name, |
|||
labelPlacement: 'center', |
|||
fill: (d) => { |
|||
const label = d.data?.label; |
|||
if (label === 'Disease') return '#EF4444'; // 红 |
|||
if (label === 'Drug') return '#91cc75'; // 绿 |
|||
if (label === 'Symptom') return '#fac858'; // 橙 |
|||
if (label === 'Check') return '#59d1d4'; // 橙 |
|||
return '#336eee'; // 默认灰蓝 |
|||
}, |
|||
stroke: (d) => { |
|||
const label = d.data?.label; |
|||
if (label === 'Disease') return '#B91C1C'; |
|||
if (label === 'Drug') return '#047857'; |
|||
if (label === 'Check') return '#40999b'; // 橙 |
|||
if (label === 'Symptom') return '#B45309'; |
|||
return '#1D4ED8'; |
|||
}, |
|||
labelWordWrap: true, |
|||
labelMaxWidth: '150%', |
|||
labelMaxLines: 3, |
|||
labelTextOverflow: 'ellipsis', |
|||
labelTextAlign: 'center', |
|||
}, |
|||
state: { |
|||
|
|||
highlight: { |
|||
stroke: '#FF6A00', |
|||
lineWidth: 3, |
|||
}, |
|||
disabled: { |
|||
fill: '#ECECEC', |
|||
stroke: '#BFBFBF', |
|||
opacity: 0.5, |
|||
}, |
|||
}, |
|||
}, |
|||
edge: { |
|||
style: { |
|||
labelText: (d) => d.data.relationship.properties.label, |
|||
stroke: (d) => { |
|||
// 获取 target 节点的 label |
|||
const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID |
|||
// 根据 target 节点类型返回对应浅色 |
|||
if (targetLabel === 'Disease') return 'rgba(239,68,68,0.5)'; |
|||
if (targetLabel === 'Drug') return 'rgba(145,204,117,0.5)'; |
|||
if (targetLabel === 'Symptom') return 'rgba(250,200,88,0.5)'; |
|||
if (targetLabel === 'Check') return 'rgba(89,209,212,0.5)'; // 橙 |
|||
return 'rgba(51,110,238,0.5)'; // default |
|||
}, |
|||
}, |
|||
state: { |
|||
selected: { |
|||
stroke: '#1890FF', |
|||
lineWidth: 2, |
|||
}, |
|||
highlight: { |
|||
stroke: '#FF6A00', |
|||
lineWidth: 3, |
|||
}, |
|||
}, |
|||
|
|||
}, |
|||
data:this.defaultData |
|||
}); |
|||
|
|||
graph.render(); |
|||
this._graph = graph |
|||
this._graph?.fitView() |
|||
}, |
|||
|
|||
updateGraph(data) { |
|||
if (!this._graph) return |
|||
this._graph.setData(data) |
|||
this._graph.render() |
|||
}, |
|||
|
|||
updateAllNodes() { |
|||
if (!this._graph) return |
|||
const updatedNodes = this.defaultData.nodes.map(node => ({ |
|||
...node, |
|||
type: this.nodeShape, |
|||
style:{ |
|||
size: this.nodeSize, |
|||
fill: this.nodeFill, |
|||
stroke: this.nodeStroke, |
|||
lineWidth: this.nodeLineWidth, |
|||
label: this.nodeShowLabel, |
|||
labelFontSize: this.nodeFontSize, |
|||
labelFontFamily: this.nodeFontFamily, |
|||
labelFontColor: this.nodeFontColor, |
|||
} |
|||
})) |
|||
const updatedData = { |
|||
nodes: updatedNodes, |
|||
edges: this.defaultData.edges |
|||
} |
|||
this.defaultData = updatedData |
|||
this.updateGraph(updatedData) |
|||
}, |
|||
|
|||
updateAllEdges() { |
|||
if (!this._graph) return |
|||
const updatedEdges = this.defaultData.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 updatedData = { |
|||
nodes: this.defaultData.nodes, |
|||
edges: updatedEdges |
|||
} |
|||
this.defaultData = updatedData |
|||
this.updateGraph(updatedData) |
|||
}, |
|||
|
|||
clearAllStates() { |
|||
if (!this._graph) return |
|||
|
|||
// 清除所有节点的状态 |
|||
this._graph.getNodes().forEach(node => { |
|||
this._graph.clearItemStates(node) |
|||
}) |
|||
|
|||
// 清除所有边的状态 |
|||
this._graph.getEdges().forEach(edge => { |
|||
this._graph.clearItemStates(edge) |
|||
}) |
|||
}, |
|||
|
|||
handleResize() { |
|||
const container = this.$refs.graphContainer |
|||
if (this._graph && container) { |
|||
this._graph.resize(container.offsetWidth, container.offsetHeight) |
|||
} |
|||
}, |
|||
|
|||
resetView() { |
|||
this._graph?.fitView() |
|||
}, |
|||
|
|||
resetStyle() { |
|||
Object.assign(this, { |
|||
nodeShowLabel: true, |
|||
nodeFontSize: 12, |
|||
nodeFontColor: '#000000', |
|||
nodeShape: 'circle', |
|||
nodeSize: 60, |
|||
nodeFill: '#9FD5FF', |
|||
nodeStroke: '#5B8FF9', |
|||
nodeLineWidth: 2, |
|||
nodeFontFamily: 'Microsoft YaHei, sans-serif', |
|||
|
|||
edgeShowLabel: true, |
|||
edgeFontSize: 10, |
|||
edgeFontColor: '#666666', |
|||
edgeType: 'line', |
|||
edgeLineWidth: 2, |
|||
edgeStroke: '#F00', |
|||
edgeEndArrow: true, |
|||
edgeFontFamily: 'Microsoft YaHei, sans-serif' |
|||
}) |
|||
}, |
|||
|
|||
|
|||
handleNodeClick(data) { |
|||
console.log('点击节点:', data) |
|||
// 可用于显示详情、复制 code 等 |
|||
this.$message.info(`已选中: ${data.title}`) |
|||
}, |
|||
|
|||
getLevelLabel(level) { |
|||
const map = { |
|||
chapter: '章', |
|||
section: '节', |
|||
category: '类目', |
|||
subcategory: '亚目', |
|||
diagnosis: '条目' |
|||
} |
|||
return map[level] || level |
|||
}, |
|||
|
|||
getTagType(level) { |
|||
const map = { |
|||
chapter: 'primary', |
|||
section: 'success', |
|||
category: 'warning', |
|||
subcategory: 'info', |
|||
diagnosis: '' |
|||
} |
|||
return map[level] || '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.knowledge-graph-container { |
|||
display: flex; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.control-panel { |
|||
width: 280px; |
|||
background: #f5f7fa; |
|||
padding: 16px; |
|||
border-right: 1px solid #ddd; |
|||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); |
|||
font-family: 'Microsoft YaHei'; |
|||
} |
|||
|
|||
.section { |
|||
margin-bottom: 10px; |
|||
padding: 10px; |
|||
background: white; |
|||
border-radius: 8px; |
|||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.section h5 { |
|||
margin-top: 0; |
|||
color: #333; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.slider-group { |
|||
margin: 10px 0; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.slider-group span { |
|||
margin-right: 10px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.form-group { |
|||
margin: 10px 0; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.form-group label { |
|||
margin-right: 8px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.form-group select, |
|||
.form-group input[type="number"] { |
|||
padding: 4px; |
|||
border: 1px solid #ccc; |
|||
border-radius: 4px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.color-picker { |
|||
margin: 10px 0; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.color-picker label { |
|||
margin-right: 8px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.color-picker input[type="color"] { |
|||
width: 40px; |
|||
height: 20px; |
|||
border: none; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
button { |
|||
width: 45%; |
|||
padding: 10px; |
|||
background: #007bff; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 6px; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
margin-right: 2%; |
|||
} |
|||
|
|||
button:hover { |
|||
background: #0056b3; |
|||
} |
|||
|
|||
.graph-container { |
|||
flex: 1; |
|||
border: 1px solid #eee; |
|||
background: #fff; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue