From 4469428bfec368ea9c735303ff9ad4ed25f5b762 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期四, 16 五月 2024 11:44:35 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary
---
src/pages/inherit/list.vue | 668 ++++++++++--------------------------------------------
1 files changed, 131 insertions(+), 537 deletions(-)
diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue
index 3093d4b..f8e7faa 100644
--- a/src/pages/inherit/list.vue
+++ b/src/pages/inherit/list.vue
@@ -1,7 +1,7 @@
<template>
- <view class="">
+ <view>
<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">
@@ -34,7 +34,7 @@
涓栧尰鏂囧寲
</li>
</ul>
- <view class="" style="width: 1rem"></view>
+ <view style="width: 1rem"></view>
</view>
<view v-if="showType == 1" class="legendBox">
<view class="socialMappingBox" @click="showSocialMapping">
@@ -56,545 +56,148 @@
<!-- echarts鍥� -->
<div v-if="showType == 1" class="barChart" id="barChart"></div>
<view v-if="showType == 2" class="cultureBox">
- <view class="cultureItem">
+ <view class="cultureItem" v-if="culture1">
<view class="imgBox">
<img src="@/static/image/inherit/icon1.png" alt="" />
</view>
- <p>
- 钑欏睍涓佷笐鍚岄噷鏃ュ博棰濆簭鍏堣�冩湀姹犵縼钁椼�婂洓褰吀鏄庛�嬪叓鍗凤紝鐨嗙簿鎸囧ゥ瀹わ紝鑼傜妧鏈兘鐤�狅紝鐝嶅洜鎾补鎯宠彍锛屽兊鎾版鍞愶紝浠ヤ究鏅虹潧锛屾湇鎸囧崡銆備笘涔嬮浄鐥呴洦瀹讹紝鍜镐互鏈嶇剦棣栧姟锛屼笉鐭ユ淳涔冨洓鑳戒箣鏈紝璋撲箣宸ц�呴洦銆備笂澹鑸嶅叾鍏紝闈炲洓涓嶅彲銆�
- </p>
- <h4>鈥斺�斻�婂鍏湇鑰冦�婸 3</h4>
+ <p>{{culture1.content}}</p>
+ <h4 v-if="culture1.source">鈥斺�斻�妠{culture1.source}}銆婸 {{culture1.pageNo}}</h4>
</view>
- <view class="cultureItem">
+ <view class="cultureItem" v-if="culture2">
<view class="imgBox">
<img src="@/static/image/inherit/icon2.png" alt="" />
</view>
- <p>鐎曟箹涓栧剴锛屽吋浠ラ啱槌达紝涓�闁�鐖跺瓙鍏勫紵瀵屾湁钁楄堪锛屾鐗硅涓�鏂戣�炽��</p>
- <h4>鈥斺�斻�婂鍏湇鑰冦�婸 3</h4>
+ <p>{{culture2.content}}</p>
+ <h4 v-if="culture2.source">鈥斺�斻�妠{culture2.source}}銆婸 {{culture2.pageNo}}</h4>
</view>
- <view class="cultureItem">
+ <view class="cultureItem" v-if="culture3">
<view class="imgBox">
<img src="@/static/image/inherit/icon3.png" alt="" />
</view>
- <p>
- 鐥呭潑鍒荤�曟箹銆婃湰鑽夈�嬩箣鍥犱粛瑷涜锛岀埌閲嶇埐閸ユ澘銆傜稉濮嬫柤鐧告湭鍏湀锛岃縿涔欓厜浜旀湀锛岄柋浜屾锛岀硿宸ユ暩钀紝涔冨厠钁充簨銆傚叾鏍＄悊瑷涜锛岀洠鐫ｅ墳鍔傦紝鍛藉厭瀛愬腑鐝嶃�佸＋鐟溿�佸＋鐝╁垎浠讳箣锛涘晢姒锋柟鍔戯紝鍗�鍒ュ搧褰欙紝閱＋鐜嬪悰閺″爞涔嬪姏鐖插锛涘弮浠ラ嵕鍚涘彈鐧斤紱鑰岀稉绱�鍏朵簨锛屽绲備笉鎳堣�咃紝鍓囪寖鍚涢潨瀛樹篃銆傛澶栧鐢板悰鎾扮暟銆佹浌鍚涙櫞宄�佺唺鍚涗徊灞便�佺縼鍚涢惖姊呫�侀花鍚涘辜闆层�佸嫉鍚涜搏涔嬨�佺▼鍚涢仈涓夈�侀櫝鍚涙尟閬犮�佽ū鍚涘姛鐢�佹湵鍚涜椈鑷ｃ�佹垨鍙冩牎璁愶紝鎴栧徃缍滄牳锛屾垨鑱峰湒绻紝璎瑰倷鏇镐箣
- </p>
- <h4>鈥斺�斻�婂鍏湇鑰冦�婸 3</h4>
+ <p>{{culture3.content}}</p>
+ <h4 v-if="culture3.source">鈥斺�斻�妠{culture3.source}}銆婸 {{culture3.pageNo}}</h4>
</view>
</view>
</view>
</template>
<script>
import * as echarts from "echarts";
+import {
+ 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"
+ showType: "1",
+ culture1: null,
+ culture2: null,
+ culture3: null,
};
},
onLoad(options) {
this.idIndex = options.id;
- console.log("optionsoptionsoptions", options.id);
+ this.mainName = decodeURIComponent(options.name);
+ this.type = options.type;
},
mounted() {
- // 鍒濆鍖� echarts
- this.initBarChart(this.dataList, this.links);
+ if (this.type) {
+ this.changeType(this.type);
+ }
+ 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 == this.idIndex
+ ? linkItem.startId
+ : linkItem.endId)
+ );
+ if (linkItem.relationType == "浜插睘鍏崇郴") {
+ data.nodeList[index].linkType = 1;
+ data.nodeList[index].color = "#F8E2D7";
+ data.nodeList[index].borderColor = "#F3AA78";
+ }
+ if (linkItem.relationType == "绀句細鍏崇郴") {
+ data.nodeList[index].linkType = 2;
+ data.nodeList[index].color = "#ecf4fe";
+ data.nodeList[index].borderColor = "#597aa5";
+ }
+ this.links.push({
+ source: data.nodeList.find(
+ (item) => item.identifier == linkItem.startId
+ ).name,
+ target: data.nodeList.find(
+ (item) => item.identifier == linkItem.endId
+ ).name,
+ relationType: linkItem.relationType,
+ label: {
+ show: true,
+ formatter: function (params) {
+ // 浣跨敤鍑芥暟鍔ㄦ�佺敓鎴愭爣绛惧唴瀹�
+ // return relationships.find(rel => rel.source === nodes[params.data
+ // .source] && rel.target === nodes[params.data.target])
+ // .relation;
+ return linkItem.relation;
+ }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent"
+ color: "#2C2C2C",
+ fontSize: 16,
+ backgroundColor: "rgba(255, 255, 255, 1)",
+ padding: [3, 8],
+ borderRadius: 30,
+ position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
+ // z: -1, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
+ distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+ }
+ });
+ }
+ 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);
+ console.log(this.links);
+ this.initBarChart(this.dataList, this.links);
+ });
+
+ // 涓栧尰鏂囧寲
+ inheritMedicalCultureList({
+ identifier: this.idIndex
+ }).then((res) => {
+ console.log(res, "res");
+ this.culture1 = res.list.find(item=>item.typeName == "瀹堕")
+ this.culture2 = res.list.find(item=>item.typeName == "鍖诲痉")
+ this.culture3 = res.list.find(item=>item.typeName == "瀹惰")
+ });
+ },
showSocialMapping() {
this.socialMapping = !this.socialMapping;
let newDataList = [];
@@ -603,9 +206,7 @@
newDataList = [...this.dataList];
newLinks = [...this.links];
} else {
- newDataList = this.dataList.filter(
- (item) => item.itemStyle.borderColor == "#F3AA78"
- );
+ newDataList = this.dataList.filter((item) => item.color !== "#ecf4fe");
newLinks = [...this.links];
}
this.initBarChart(newDataList, newLinks);
@@ -648,9 +249,6 @@
}
let option = {
- title: {
- text: [""]
- },
backgroundColor: {
type: "image",
image: "./static/image/WMBg.png",
@@ -663,10 +261,10 @@
series: [
{
type: "graph",
- layout: "none",
+ layout: "force",
symbolSize: SymbolSize + 20,
//鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
- roam: false,
+ roam: true,
label: {
show: true,
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
@@ -674,28 +272,24 @@
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
-
- edgeLabel: {
- show: true,
- fontSize: FontSize, //鏇存敼涓よ�呭叧绯荤殑瀛椾綋
- position: "middle",
- //杩欓噷璁剧疆鍏崇郴鏂囧瓧鏄惁鍜岀嚎娈甸噸鍙�
- // padding: [0, 0], // 璋冩暣鍐呰竟璺濅互纭繚鏍囩涓庣嚎娈电揣瀵嗚创鍚�
- // verticalAlign: 'middle', // 璁剧疆鏂囨湰鐨勫瀭鐩村榻愭柟寮忎负灞呬腑
- formatter: function (params) {
- // params.data 鏄竟鐨勬暟鎹璞★紝浣犲彲浠ュ湪杩欓噷瀹氫箟鍏崇郴鍚�
- // 渚嬪锛屼綘鍙互鏍规嵁 source 鍜� target 鐨勫悕绉版潵瀹氫箟鍏崇郴鍚�
- return params.data.relationName || "鐖跺瓙"; // 濡傛灉瀹氫箟浜� relationName 鍒欐樉绀哄畠锛屽惁鍒欐樉绀衡�滅埗瀛愨��
- }
- },
- //鍚勪釜鑺傜偣
- data: dataList, //鍏崇郴杩炴帴
+ data: dataList,
links: links,
lineStyle: {
- color: "#000000",
opacity: 0.9,
width: 2,
- curveness: 0
+ curveness: 0.3
+ },
+ emphasis: {
+ focus: "adjacency",
+ lineStyle: {
+ width: 10
+ }
+ },
+ force: {
+ initLayout: null,
+ // gravity: 0
+ repulsion: 600,
+ edgeLength: 400
}
}
]
--
Gitblit v1.9.1