- 
+
@@ -858,4 +864,43 @@ export default {
cursor: not-allowed;
background-color: #ccc;
}
+/* 加载指示器的整体样式 */
+.loading-indicator {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px; /* 圆点之间的间距 */
+}
+
+/* 单个圆点的基本样式 */
+.dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ animation: bounce 1.4s infinite ease-in-out both;
+}
+
+/* 给每个圆点设定特定的灰色 */
+.dot-1 { background-color: #e0e0e0; } /* 浅灰色 */
+.dot-2 { background-color: #b0b0b0; } /* 中浅灰色 */
+.dot-3 { background-color: #808080; } /* 中深灰色 */
+.dot-4 { background-color: #505050; } /* 深灰色 */
+
+/* 给每个圆点设置不同的动画延迟以创造连续的效果 */
+.dot:nth-child(1) { animation-delay: 0.1s; }
+.dot:nth-child(2) { animation-delay: 0.2s; }
+.dot:nth-child(3) { animation-delay: 0.3s; }
+.dot:nth-child(4) { animation-delay: 0.4s; }
+
+.dot-1 { animation-delay: -0.4s; }
+.dot-2 { animation-delay: -0.2s; }
+.dot-3 { animation-delay: 0s; }
+.dot-4 { animation-delay: 0.2s; }
+/* 定义动画效果 */
+@keyframes bounce {
+ 0%, 80%, 100% {
+ transform: scale(0);
+ } 40% {
+ transform: scale(1.0);
+ }
+}
\ No newline at end of file
diff --git a/vue/src/system/GraphDemo.vue b/vue/src/system/GraphDemo.vue
index 824a6ed..0e36d34 100644
--- a/vue/src/system/GraphDemo.vue
+++ b/vue/src/system/GraphDemo.vue
@@ -59,7 +59,6 @@
:props="treeProps"
:expand-on-click-node="false"
@node-click="handleNodeClick"
-
>
@@ -234,7 +233,6 @@ export default {
labelFontFamily: this.edgeFontFamily,
labelFill: this.edgeFontColor,
},
-
}))
const updatedData = {
nodes: updatedNodes,
@@ -364,6 +362,7 @@ export default {
changeTree(){
if(this.typeRadio=="Disease"){
this.treeData=this.diseaseTree
+
}
if(this.typeRadio=="Drug") {
this.treeData=this.drugTree
@@ -372,6 +371,34 @@ export default {
this.treeData=this.checkTree
}
},
+ loadTreeNode(node, resolve, data) {
+ // 根据当前选中的类型决定调用哪个接口
+ let apiCall;
+ if (this.typeRadio === 'Disease') {
+ // 假设你的 ICD-10 节点有 level 字段（如 chapter, section 等）
+ // 并且子节点需要根据 code 或 id 请求
+ apiCall = () => this.loadDiseaseTreeData();
+ } else if (this.typeRadio === 'Drug') {
+ apiCall = () => this.loadDrugTreeData(); // 你需要实现这个 API
+ } else if (this.typeRadio === 'Check') {
+ apiCall = () => this.loadCheckTreeData();
+ }
+
+ if (apiCall) {
+ apiCall()
+ .then(children => {
+ // children 必须是数组，每个元素要有 label、code/id 等字段
+ // 如果没有子节点，返回空数组 []
+ resolve(children || []);
+ })
+ .catch(err => {
+ console.error('加载子节点失败:', err);
+ resolve([]); // 防止卡住
+ });
+ } else {
+ resolve([]);
+ }
+ },
async loadDiseaseTreeData() {
try {
const res = await fetch('/icd10.json')
@@ -507,7 +534,7 @@ export default {
console.log(this.defaultData)
console.log(this._nodeLabelMap)
const container = this.$refs.graphContainer;
- console.log(container)
+ if (!container) return;
if (container!=null){
const width = container.clientWidth || 800;
const height = container.clientHeight || 600;
@@ -522,7 +549,8 @@ export default {
gravity: 0.3, // 重力系数，控制节点聚集程度
repulsion: 500, // 排斥力
attraction: 20, // 吸引力
- preventOverlap: true // 防止节点重叠
+ preventOverlap: true, // 防止节点重叠
+ // center: [width / 2, height / 2]
// type: 'radial',
// preventOverlap: true,
// unitRadius: 200,
@@ -644,8 +672,18 @@ export default {
});
+ console.log("Container width:", container.clientWidth);
+ console.log("Container height:", container.clientHeight);
+ console.log("Container scroll position before:", container.scrollTop, container.scrollLeft);
+
+ this.$nextTick(() => {
+ graph.render();
+ // graph.fitView()
+ graph.fitView({ padding: 30, duration: 1000, easing: 'ease-in' });
+ });
- graph.render();
+ console.log("Container scroll position after:", container.scrollTop, container.scrollLeft);
+ // graph.fitView();
// graph.on('node:pointerover', (evt) => {
// const nodeItem = evt.target; // 获取当前鼠标进入的节点元素
// const relatedEdges = graph.getRelatedEdgesData(nodeItem.id);
@@ -703,13 +741,13 @@ export default {
this.formatData(response)
}); // 等待 Promise 解析
});
-
-
-
-
-
+ graph.once('afterlayout', () => {
+ if (!graph.destroyed) {
+ graph.fitCenter({ padding: 40, duration: 1000 });
+ }
+ });
this._graph = graph
- this._graph?.fitView()
+
}
@@ -717,10 +755,8 @@ export default {
updateGraph(data) {
if (!this._graph) return
-
-
this._graph.setData(data)
- this._graph.render()
+ this._graph.render();
},
updateAllNodes() {
diff --git a/vue/src/system/GraphQA.vue b/vue/src/system/GraphQA.vue
index 1e4731c..0bcce49 100644
--- a/vue/src/system/GraphQA.vue
+++ b/vue/src/system/GraphQA.vue
@@ -37,6 +37,14 @@
+
+
+
+
+
+
+