From f961a7e1d262afcc37b0743fcd9cec0f9fc1cbc2 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期五, 26 七月 2024 11:37:06 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary
---
src/pages/inherit/list.vue | 441 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 328 insertions(+), 113 deletions(-)
diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue
index f8e7faa..eb25d41 100644
--- a/src/pages/inherit/list.vue
+++ b/src/pages/inherit/list.vue
@@ -3,7 +3,7 @@
<headNav
idIndex="2"
:searchBg="false"
- text="涓尰涓栧尰浼犳壙鏁版嵁搴�"
+ text="瀹跺浼犳壙"
bg="/static/image/topBg1.png"
bg1="/static/image/line1.png"
/>
@@ -52,39 +52,80 @@
<view class="icon" style="background: #244a7b"></view>
<view>绀句細鍏崇郴</view>
</view>
+ <view class="viewChangeBtn">
+ <p>{{ viewType == 1 ? "妯増瑙嗗浘" : "绔栫増瑙嗗浘" }}</p>
+ <view class="imgBox">
+ <img
+ v-if="viewType == 1"
+ src="@/static/image/inherit/1-a.png"
+ alt=""
+ />
+ <img
+ v-else
+ src="@/static/image/inherit/1.png"
+ @click="viewChange(1)"
+ />
+ </view>
+ <view class="imgBox">
+ <img
+ v-if="viewType == 2"
+ src="@/static/image/inherit/2-a.png"
+ alt=""
+ />
+ <img
+ v-else
+ src="@/static/image/inherit/2.png"
+ @click="viewChange(2)"
+ />
+ </view>
+ </view>
</view>
<!-- echarts鍥� -->
<div v-if="showType == 1" class="barChart" id="barChart"></div>
<view v-if="showType == 2" class="cultureBox">
<view class="cultureItem" v-if="culture1">
<view class="imgBox">
- <img src="@/static/image/inherit/icon1.png" alt="" />
+ <img src="@/static/image/inherit/icon1.svg" alt="" />
</view>
- <p>{{culture1.content}}</p>
- <h4 v-if="culture1.source">鈥斺�斻�妠{culture1.source}}銆婸 {{culture1.pageNo}}</h4>
+ <p>{{ culture1.content }}</p>
+ <h4 v-if="culture1.source">
+ 鈥斺�斻�妠{ culture1.source }}銆婸 {{ culture1.pageNo }}
+ </h4>
</view>
<view class="cultureItem" v-if="culture2">
<view class="imgBox">
- <img src="@/static/image/inherit/icon2.png" alt="" />
+ <img src="@/static/image/inherit/icon2.svg" alt="" />
</view>
- <p>{{culture2.content}}</p>
- <h4 v-if="culture2.source">鈥斺�斻�妠{culture2.source}}銆婸 {{culture2.pageNo}}</h4>
+ <p>{{ culture2.content }}</p>
+ <h4 v-if="culture2.source">
+ 鈥斺�斻�妠{ culture2.source }}銆婸 {{ culture2.pageNo }}
+ </h4>
</view>
<view class="cultureItem" v-if="culture3">
<view class="imgBox">
- <img src="@/static/image/inherit/icon3.png" alt="" />
+ <img src="@/static/image/inherit/icon3.svg" alt="" />
</view>
- <p>{{culture3.content}}</p>
- <h4 v-if="culture3.source">鈥斺�斻�妠{culture3.source}}銆婸 {{culture3.pageNo}}</h4>
+ <p>{{ culture3.content }}</p>
+ <h4 v-if="culture3.source">
+ 鈥斺�斻�妠{ culture3.source }}銆婸 {{ culture3.pageNo }}
+ </h4>
</view>
+ <div
+ v-if="!culture1 && !culture2 && !culture3"
+ style="color: #666; text-align: center; font-size: 16px"
+ >
+ 涓栧尰鏂囧寲鏃犳暟鎹�
+ </div>
</view>
</view>
</template>
<script>
import * as echarts from "echarts";
+import G6 from "@antv/g6";
+
import {
inheritMedicalCultureList,
- inheritMedicalRelationList
+ inheritMedicalRelationList,
} from "@/api/index.js";
export default {
@@ -101,6 +142,7 @@
culture1: null,
culture2: null,
culture3: null,
+ viewType: 1,
};
},
onLoad(options) {
@@ -112,115 +154,264 @@
if (this.type) {
this.changeType(this.type);
}
- this.getData();
+ this.getData(this.socialMapping);
},
methods: {
- getData() {
+ getData(socialFlag) {
inheritMedicalRelationList({
identifier: this.idIndex,
- socialFlag: true
+ socialFlag: socialFlag,
}).then((res) => {
- console.log(res);
- let data = res.object;
+ this.dataList = 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);
+ // 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 = 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"
+ // }
+ // };
+ // });
+ setTimeout(() => {
+ // this.initBarChart();
+ document.getElementById("barChart").innerHTML = "";
+ this.initG6Chart();
+ }, 150);
});
// 涓栧尰鏂囧寲
inheritMedicalCultureList({
- identifier: this.idIndex
+ 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 == "瀹惰")
+ this.culture1 = res.list.find((item) => item.typeName == "瀹堕");
+ this.culture2 = res.list.find((item) => item.typeName == "鍖诲痉");
+ this.culture3 = res.list.find((item) => item.typeName == "瀹惰");
});
+ },
+ viewChange(data) {
+ this.viewType = data;
+ document.getElementById("barChart").innerHTML = "";
+ this.initG6Chart();
},
showSocialMapping() {
this.socialMapping = !this.socialMapping;
- let newDataList = [];
- let newLinks = [];
- if (this.socialMapping) {
- newDataList = [...this.dataList];
- newLinks = [...this.links];
+ if (!this.socialMapping) {
+ this.socialRelationsData(this.dataList.children);
+ console.log(this.dataList, "dataList");
+ document.getElementById("barChart").innerHTML = "";
+ // this.initG6Chart();
+ this.getData(this.socialMapping);
} else {
- newDataList = this.dataList.filter((item) => item.color !== "#ecf4fe");
- newLinks = [...this.links];
+ this.getData(this.socialMapping);
}
- this.initBarChart(newDataList, newLinks);
+ // this.initBarChart(newDataList, newLinks);
+ },
+ socialRelationsData(data) {
+ if (data && data.length) {
+ for (let i = 0; i < data.length; i++) {
+ const item = data[i];
+ if (item?.relationInfo?.relationType == "绀句細鍏崇郴") {
+ data.splice(i, 1);
+ }
+ if (item.children.length > 0) {
+ this.socialRelationsData(item.children);
+ }
+ }
+ }
},
changeType(type) {
this.showType = type;
if (type == 1) {
setTimeout(() => {
this.socialMapping = true;
- this.initBarChart(this.dataList, this.links);
+ // this.initBarChart(this.dataList, this.links);
+ document.getElementById("barChart").innerHTML = "";
+ this.initG6Chart();
}, 50);
}
},
- initBarChart(dataList, links) {
+
+ getChartData(dataList) {
+ if (dataList && dataList.length) {
+ const G6Data = dataList.map((f) => {
+ return {
+ id: f.value + "-" + f.name,
+ name: f.name,
+ personId: f.personId,
+ relationInfo: f?.relationInfo?.relation
+ ? f.relationInfo.relation
+ : "",
+ relationType:
+ f?.relationInfo?.relationType == "绀句細鍏崇郴" ? true : false,
+ children:
+ f.children.length > 0 ? this.getChartData(f.children) : [],
+ };
+ });
+ return G6Data;
+ }
+ },
+ initG6Chart() {
+ console.log(this.dataList, "dataList");
+ console.log(this.links, "links");
+ console.log(this.getChartData(this.dataList.children), "123123");
+ var barChart = document.getElementById("barChart");
+ const data = {
+ isRoot: true,
+ id: this.dataList.name,
+ name: this.dataList.name,
+ style: {
+ fill: "red",
+ },
+ children:
+ this.dataList?.children.length > 0
+ ? this.getChartData(this.dataList.children)
+ : [],
+ };
+ const width = barChart.scrollWidth;
+ const height = barChart.scrollHeight || 500;
+ this.graph = new G6.TreeGraph({
+ container: "barChart",
+ width,
+ height,
+ linkCenter: true,
+ modes: {
+ default: ["drag-canvas", "zoom-canvas"],
+ },
+ defaultNode: {
+ size: 30,
+ type: "tree-node",
+ },
+ defaultEdge: {
+ type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical",
+ style: {
+ endArrow: {
+ path: G6.Arrow.vee(10, 10, 18), // 浣跨敤鍐呯疆绠ご璺緞鍑芥暟锛屽弬鏁颁负绠ご鐨� 瀹藉害銆侀暱搴︺�佸亸绉婚噺锛堥粯璁や负 0锛屼笌 d 瀵瑰簲锛�
+ d: 15,
+ },
+ },
+ },
+ layout: {
+ type: "compactBox",
+ direction: this.viewType == 1 ? "LR" : "TB",
+ getId: function getId(d) {
+ return d.id;
+ },
+ getHeight: function getHeight() {
+ return 16;
+ },
+ getWidth: function getWidth() {
+ return 16;
+ },
+ getVGap: () => {
+ console.log(this.viewType);
+ return this.viewType == 1 ? 20 : 110;
+ },
+ getHGap: () => {
+ return this.viewType == 1 ? 100 : 50;
+ },
+ },
+ });
+ this.graph.node(function (node) {
+ return {
+ size: 38,
+ anchorPoints: [
+ [0, 0.5],
+ [1, 0.5],
+ ],
+ style: {
+ fill: node.relationType ? "#EDF4FF" : "#FCEFE3",
+ stroke: node.relationType ? "#5E7AA7" : "#D3791E",
+ },
+ label: node.name,
+ labelCfg: {
+ position: "center",
+ offset: 5,
+ style: {
+ fill: "#000",
+ fontSize: 12,
+ },
+ },
+ };
+ });
+ let that = this
+ const edgeType =
+ this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical";
+ this.graph.edge(function (node) {
+ return {
+ type: edgeType,
+ color: "#A3B1BF",
+ label: that.textStyle(node.target._cfg?.model.relationInfo)
+ };
+ });
+ this.graph.on("node:click", (e) => {
+ const nodeItem = e.item._cfg.model; // 鑾峰彇琚偣鍑荤殑鑺傜偣鍏冪礌瀵硅薄
+ console.log("鍗曞嚮", nodeItem);
+ if (nodeItem?.personId) {
+ uni.navigateTo({
+ url: "/pages/character/detail?id=" + nodeItem?.personId,
+ });
+ } else {
+ uni.navigateTo({
+ url: "/pages/character/detail?id=" + this.idIndex,
+ });
+ }
+ });
+ this.graph.data(data);
+ this.graph.render();
+ this.graph.fitView();
+ },
+ initBarChart() {
// WMBg
//閫氳繃 $ref 杩涜鎸傝浇
var barChart = document.getElementById("barChart");
@@ -254,54 +445,52 @@
image: "./static/image/WMBg.png",
repeat: "repeat-x", // 鏄惁骞抽摵锛屽彲浠ユ槸 'repeat-x', 'repeat-y', 'no-repeat'
size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱�
- position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
+ position: "center center", // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
},
tooltip: {},
animationEasingUpdate: "quinticInOut",
series: [
{
- type: "graph",
- layout: "force",
+ type: "tree",
symbolSize: SymbolSize + 20,
//鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
roam: true,
label: {
show: true,
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
- fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
+ fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
- data: dataList,
- links: links,
+ data: [this.dataList],
lineStyle: {
opacity: 0.9,
width: 2,
- curveness: 0.3
- },
- emphasis: {
- focus: "adjacency",
- lineStyle: {
- width: 10
- }
+ curveness: 0.3,
},
force: {
initLayout: null,
// gravity: 0
repulsion: 600,
- edgeLength: 400
- }
- }
- ]
+ edgeLength: 400,
+ },
+ expandAndCollapse: false,
+ },
+ ],
};
//杩涜娓叉煋
myChart.setOption(option);
},
+
+ textStyle(str) {
+ return str.replace(/(.{4})/g, "$1\n");
+ },
+
// 杩斿洖鎸夐挳
goBack() {
this.$router.go(-1);
- }
- }
+ },
+ },
};
</script>
<style scoped>
@@ -327,6 +516,9 @@
height: 0.24rem;
font-size: 0.12rem;
padding: 0;
+ border: 1px solid #9e9e9e;
+ border-radius: 0;
+ color: #000;
}
.barChart {
width: 100vw;
@@ -361,6 +553,29 @@
margin-right: 0.06rem;
}
+.viewChangeBtn {
+ position: absolute;
+ right: 1.2rem;
+ top: 0.17rem;
+ display: flex;
+}
+
+.viewChangeBtn p {
+ line-height: 0.36rem;
+ margin-right: 0.2rem;
+}
+
+.viewChangeBtn .imgBox {
+ width: 0.36rem;
+ height: 0.36rem;
+}
+
+.viewChangeBtn img {
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+}
+
.legend {
display: flex;
align-items: center;
--
Gitblit v1.9.1