From f4c14c24cb6cf1ed1c09cab760f6b9c8381df557 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期二, 30 四月 2024 17:44:27 +0800
Subject: [PATCH] 图谱和传承
---
src/pages/inherit/list.vue | 573 +++++++--------------------------------------------------
1 files changed, 70 insertions(+), 503 deletions(-)
diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue
index 3093d4b..45f0b2d 100644
--- a/src/pages/inherit/list.vue
+++ b/src/pages/inherit/list.vue
@@ -1,7 +1,7 @@
<template>
<view class="">
<headNav
- :idIndex="idIndex"
+ idIndex="2"
:searchBg="false"
text="涓尰涓栧尰浼犳壙鏁版嵁搴�"
bg="/static/image/topBg1.png"
@@ -17,7 +17,7 @@
>杩斿洖</el-button
>
<h3 style="margin-left: 0.22rem; font-size: 0.28erm; font-weight: 500">
- 閭电櫥鐎�
+ {{ mainName }}
</h3>
</view>
<ul class="flex tabBox">
@@ -86,515 +86,79 @@
</template>
<script>
import * as echarts from "echarts";
+import {
+ inheritMedicalSataStatistics,
+ inheritMedicalCultureList,
+ inheritMedicalRelationList
+} from "@/api/index.js";
+
export default {
data() {
return {
// 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
idIndex: 0,
+ mainName: "",
activeIndex: 1,
- dataList: [
- {
- name: "钖涢洩",
- x: 300,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "閭电櫥鐎�",
- x: 400,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "閭甸瞾鐬�",
- x: 500,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "閭垫槬娉�",
- x: 600,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "寰愰敠",
- x: 650,
- y: 400,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "閭典笝鎵�",
- x: 700,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "鍐鑺�",
- x: 720,
- y: 400,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鏉庨缚绔�",
- x: 740,
- y: 500,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3"
- }
- },
- {
- name: "閭垫櫙灏�",
- x: 800,
- y: 200,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "閭垫櫙搴�",
- x: 800,
- y: 400,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "椴嶆槆",
- x: 750,
- y: 100,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鏂囬緳",
- x: 850,
- y: 100,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鍌呭簡璐�",
- x: 950,
- y: 50,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鎴愬厑",
- x: 950,
- y: 100,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鑳＄帀鍧�",
- x: 950,
- y: 150,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "瑁曠",
- x: 950,
- y: 200,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "闄嗕箖鏄�",
- x: 950,
- y: 250,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鍒樹紶绁�",
- x: 950,
- y: 300,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "閭佃瘹",
- x: 950,
- y: 350,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鏇惧浗钘�",
- x: 1050,
- y: 200,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3"
- }
- },
- {
- name: "鏇惧浗钘�01",
- x: 1050,
- y: 50,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3"
- }
- },
- {
- name: "鏇惧浗钘�02",
- x: 1050,
- y: 350,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3"
- }
- }
- ],
- links: [
- {
- source: "钖涢洩",
- target: "閭电櫥鐎�",
- relationName: "甯堝緬",
- hasArrow: "true"
- },
- {
- source: "閭电櫥鐎�",
- target: "閭甸瞾鐬�",
- relationName: "鐖跺瓙"
- },
- {
- source: "閭甸瞾鐬�",
- target: "閭垫槬娉�",
- relationName: "鐖跺瓙"
- },
- {
- source: "閭垫槬娉�",
- target: "閭典笝鎵�",
- relationName: "鍙斾緞"
- },
- //鏇茬嚎
- {
- source: "閭垫槬娉�",
- target: "寰愰敠",
- relationName: "鏈嬪弸",
- //杩欓噷璁剧疆涓轰笉甯︾澶�
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭典笝鎵�",
- target: "閭垫櫙灏�",
- relationName: "鐖跺瓙"
- },
- {
- source: "閭典笝鎵�",
- target: "閭垫櫙搴�",
- relationName: "鐖跺瓙"
- },
- //鏇茬嚎
- {
- source: "閭典笝鎵�",
- target: "鍐鑺�",
- relationName: "鏈嬪弸",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- //鏇茬嚎
- {
- source: "閭典笝鎵�",
- target: "椴嶆槆",
- relationName: "甯堝緬",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: 0.2
- }
- },
- //鏇茬嚎
- {
- source: "鍐鑺�",
- target: "鏉庨缚绔�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "閭垫櫙搴�",
- relationName: "鍏勫紵"
- },
- {
- source: "閭垫櫙搴�",
- target: "閭垫櫙灏�",
- relationName: "鍏勫紵"
- },
- {
- source: "閭垫櫙灏�",
- target: "椴嶆槆",
- relationName: "濮讳翰",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "鏂囬緳",
- relationName: "鏈嬪弸",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: 0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "鍌呭簡璐�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.1
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "鎴愬厑",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "鑳＄帀鍧�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "瑁曠",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "闄嗕箖鏄�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "鍒樹紶绁�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "閭佃瘹",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鑳＄帀鍧�",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "瑁曠",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "闄嗕箖鏄�",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鍒樹紶绁�",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鍌呭簡璐�",
- target: "鏇惧浗钘�01",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "閭佃瘹",
- target: "鏇惧浗钘�02",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- }
- ],
+ dataList: [],
+ links: [],
socialMapping: true,
showType: "1"
};
},
onLoad(options) {
this.idIndex = options.id;
+ this.mainName = decodeURIComponent(options.name);
console.log("optionsoptionsoptions", options.id);
},
mounted() {
- // 鍒濆鍖� echarts
- this.initBarChart(this.dataList, this.links);
+ this.getData();
},
methods: {
+ getData() {
+ inheritMedicalRelationList({
+ identifier: this.idIndex,
+ socialFlag: true
+ }).then((res) => {
+ console.log(res);
+ let data = res.object;
+ // 澶勭悊鑺傜偣棰滆壊
+ this.links = [];
+ for (let i = 0; i < data.edgeList.length; i++) {
+ const linkItem = data.edgeList[i];
+ const index = data.nodeList.findIndex(
+ (item) => item.identifier == linkItem.endId
+ );
+ if (linkItem.relationType == "浜插睘鍏崇郴") {
+ data.nodeList[index].linkType = 1;
+ data.nodeList[index].color = "#DCE7EB";
+ data.nodeList[index].borderColor = "#5F81A4";
+ }
+ if (linkItem.relationType == "绀句細鍏崇郴") {
+ data.nodeList[index].linkType = 2;
+ data.nodeList[index].color = "#E1E1E1";
+ data.nodeList[index].borderColor = "#888888";
+ }
+ this.links.push({
+ source: this.mainName,
+ target: data.nodeList[index].name,
+ relationName: linkItem.relation
+ });
+ }
+ this.dataList = [];
+ this.dataList = data.nodeList.map((item) => {
+ return {
+ ...item,
+ itemStyle: {
+ color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
+ borderColor: item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
+ borderWidth: "3"
+ }
+ };
+ });
+ console.log(this.dataList,this.links);
+ this.initBarChart();
+ });
+ },
showSocialMapping() {
this.socialMapping = !this.socialMapping;
let newDataList = [];
@@ -619,7 +183,7 @@
}, 50);
}
},
- initBarChart(dataList, links) {
+ initBarChart() {
// WMBg
//閫氳繃 $ref 杩涜鎸傝浇
var barChart = document.getElementById("barChart");
@@ -648,9 +212,6 @@
}
let option = {
- title: {
- text: [""]
- },
backgroundColor: {
type: "image",
image: "./static/image/WMBg.png",
@@ -663,16 +224,16 @@
series: [
{
type: "graph",
- layout: "none",
+ layout: "force",
symbolSize: SymbolSize + 20,
//鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
- roam: false,
+ roam: true,
label: {
show: true,
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
},
- edgeSymbol: ["circle", "arrow"],
+ edgeSymbol: ["circle"],
edgeSymbolSize: [4, 10],
edgeLabel: {
@@ -689,13 +250,19 @@
}
},
//鍚勪釜鑺傜偣
- data: dataList, //鍏崇郴杩炴帴
- links: links,
+ data: this.dataList, //鍏崇郴杩炴帴
+ links: this.links,
lineStyle: {
color: "#000000",
opacity: 0.9,
width: 2,
curveness: 0
+ },
+ force: {
+ initLayout: null,
+ // gravity: 0
+ repulsion: 600,
+ edgeLength: 400
}
}
]
--
Gitblit v1.9.1