<template>
|
<view>
|
<headNav
|
idIndex="2"
|
:searchBg="false"
|
text="家学传承"
|
bg="/static/image/topBg1.png"
|
bg1="/static/image/line1.png"
|
/>
|
|
<view
|
class="flex"
|
style="padding: 0.24rem 1.21rem; background-color: #f0f0f0"
|
>
|
<view class="flex">
|
<el-button class="MiddeBack flex flex-center" @click="goBack"
|
>返回</el-button
|
>
|
<h3 style="margin-left: 0.22rem; font-size: 0.28erm; font-weight: 500">
|
{{ mainName }}
|
</h3>
|
</view>
|
<ul class="flex tabBox">
|
<li
|
:class="['tabItem', showType == 1 ? 'active' : ''].join(' ')"
|
@click="changeType(1)"
|
>
|
世医传承
|
</li>
|
<li
|
:class="['tabItem', showType == 2 ? 'active' : ''].join(' ')"
|
@click="changeType(2)"
|
>
|
世医文化
|
</li>
|
</ul>
|
<view style="width: 1rem"></view>
|
</view>
|
<view v-if="showType == 1" class="legendBox">
|
<view class="socialMappingBox" @click="showSocialMapping">
|
<view
|
class="icon"
|
:style="{ background: socialMapping ? '#244a7b' : '#9e9e9e' }"
|
></view>
|
<view>社会关系：{{ socialMapping ? "开" : "关" }}</view>
|
</view>
|
<view class="legend">
|
<view class="icon" style="background: #da7a2b"></view>
|
<view>世医传承</view>
|
</view>
|
<view class="legend">
|
<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>
|
<p style="position: absolute;bottom: -40px;font-size: 12px;width: 200px;color: #999;">注：箭头指向为当前“人物”的X关系</p>
|
</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.svg" alt="" />
|
</view>
|
<p>{{ culture1.content }}</p>
|
<h4 v-if="culture1.source">
|
——《{{ culture1.source }}》P {{ culture1.pageNo }}
|
</h4>
|
</view>
|
<view class="cultureItem" v-if="culture2">
|
<view class="imgBox">
|
<img src="@/static/image/inherit/icon2.svg" alt="" />
|
</view>
|
<p>{{ culture2.content }}</p>
|
<h4 v-if="culture2.source">
|
——《{{ culture2.source }}》P {{ culture2.pageNo }}
|
</h4>
|
</view>
|
<view class="cultureItem" v-if="culture3">
|
<view class="imgBox">
|
<img src="@/static/image/inherit/icon3.svg" alt="" />
|
</view>
|
<p>{{ culture3.content }}</p>
|
<h4 v-if="culture3.source">
|
——《{{ culture3.source }}》P {{ 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,
|
} from "@/api/index.js";
|
|
export default {
|
data() {
|
return {
|
// 标题顶部栏需要的东西
|
idIndex: 0,
|
mainName: "",
|
activeIndex: 1,
|
dataList: [],
|
links: [],
|
socialMapping: true,
|
showType: "1",
|
culture1: null,
|
culture2: null,
|
culture3: null,
|
viewType: 1,
|
};
|
},
|
onLoad(options) {
|
this.idIndex = options.id;
|
this.mainName = decodeURIComponent(options.name);
|
this.type = options.type;
|
},
|
mounted() {
|
if (this.type) {
|
this.changeType(this.type);
|
}
|
this.getData(this.socialMapping);
|
},
|
methods: {
|
getData(socialFlag) {
|
inheritMedicalRelationList({
|
identifier: this.idIndex,
|
socialFlag: socialFlag,
|
}).then((res) => {
|
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, // 设置标签的z轴高度，使其比连接线更高
|
// 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,
|
}).then((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 == "家训");
|
});
|
},
|
viewChange(data) {
|
this.viewType = data;
|
document.getElementById("barChart").innerHTML = "";
|
this.initG6Chart();
|
},
|
showSocialMapping() {
|
this.socialMapping = !this.socialMapping;
|
if (!this.socialMapping) {
|
this.socialRelationsData(this.dataList.children);
|
console.log(this.dataList, "dataList");
|
document.getElementById("barChart").innerHTML = "";
|
// this.initG6Chart();
|
this.getData(this.socialMapping);
|
} else {
|
this.getData(this.socialMapping);
|
}
|
// 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);
|
document.getElementById("barChart").innerHTML = "";
|
this.initG6Chart();
|
}, 50);
|
}
|
},
|
|
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.viewType == 1
|
? node.target._cfg?.model.relationInfo
|
: 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");
|
let myChart = echarts.init(barChart);
|
|
let FontSize = 12; // 字体大小
|
let BorderWidth = 2; // 边框大小
|
let SymbolSize = 80; // 尺寸距离
|
let Distance = 10;
|
// 不同尺寸下修改echarts的字体
|
if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
|
FontSize = 28;
|
BorderWidth = 5;
|
SymbolSize = 100;
|
Distance = 33;
|
} else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
|
FontSize = 28;
|
BorderWidth = 4;
|
SymbolSize = 90;
|
Distance = 22;
|
} else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
|
FontSize = 18;
|
BorderWidth = 4;
|
SymbolSize = 70;
|
Distance = 22;
|
}
|
|
let option = {
|
backgroundColor: {
|
type: "image",
|
image: "./static/image/WMBg.png",
|
repeat: "repeat-x", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
|
size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素
|
position: "center center", // 背景图片的位置，可以是 top, bottom, middle 或者百分比
|
},
|
tooltip: {},
|
animationEasingUpdate: "quinticInOut",
|
series: [
|
{
|
type: "tree",
|
symbolSize: SymbolSize + 20,
|
//是否允许用户拖动图片
|
roam: true,
|
label: {
|
show: true,
|
color: "black", // 设置节点文字颜色为黑色
|
fontSize: FontSize, // 设置文字大小
|
},
|
edgeSymbol: ["circle", "arrow"],
|
edgeSymbolSize: [4, 10],
|
data: [this.dataList],
|
lineStyle: {
|
opacity: 0.9,
|
width: 2,
|
curveness: 0.3,
|
},
|
force: {
|
initLayout: null,
|
// gravity: 0
|
repulsion: 600,
|
edgeLength: 400,
|
},
|
expandAndCollapse: false,
|
},
|
],
|
};
|
//进行渲染
|
myChart.setOption(option);
|
},
|
|
textStyle(str) {
|
return str.replace(/(.{4})/g, "$1\n");
|
},
|
|
// 返回按钮
|
goBack() {
|
this.$router.go(-1);
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.tabBox .tabItem {
|
width: 0.96rem;
|
height: 0.3rem;
|
border: 1px solid #da7a2b;
|
line-height: 0.3rem;
|
text-align: center;
|
font-size: 0.14rem;
|
background-color: #fff;
|
color: #da7a2b;
|
cursor: pointer;
|
}
|
|
.tabBox .tabItem.active {
|
background-color: #da7a2b;
|
color: #fff;
|
}
|
|
.MiddeBack {
|
width: 0.6rem;
|
height: 0.24rem;
|
font-size: 0.12rem;
|
padding: 0;
|
border: 1px solid #9e9e9e;
|
border-radius: 0;
|
color: #000;
|
}
|
.barChart {
|
width: 100vw;
|
height: 80vh;
|
}
|
|
/* 图例 */
|
.legendBox {
|
width: 100%;
|
height: 0.6rem;
|
position: relative;
|
padding-top: 0.1rem;
|
display: flex;
|
justify-content: center;
|
}
|
.socialMappingBox {
|
position: absolute;
|
left: 1.2rem;
|
display: flex;
|
align-items: center;
|
padding: 0.06rem 0.2rem;
|
background: #fff;
|
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.5);
|
border-radius: 90px;
|
cursor: pointer;
|
}
|
|
.socialMappingBox .icon {
|
width: 0.12rem;
|
height: 0.12rem;
|
border-radius: 50%;
|
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;
|
margin: 0 0.1rem;
|
}
|
|
.legend .icon {
|
width: 0.12rem;
|
height: 0.12rem;
|
border-radius: 50%;
|
margin-right: 0.06rem;
|
}
|
|
.cultureBox {
|
width: 100%;
|
height: 80vh;
|
background: url("@/static/image/WMBg.png");
|
background-size: 100% 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.cultureItem {
|
width: 6.6rem;
|
margin-top: 0.4rem;
|
background: #fff;
|
border: 2px solid #d8d8d8;
|
display: flex;
|
position: relative;
|
padding: 0.16rem 0.16rem 0.4rem;
|
}
|
|
.cultureItem .imgBox {
|
width: 0.8rem;
|
margin-right: 0.4rem;
|
}
|
|
.cultureItem img {
|
width: 100%;
|
height: auto;
|
}
|
|
.cultureItem p {
|
flex: 1;
|
overflow: hidden;
|
line-height: 1.5;
|
font-size: 0.14rem;
|
}
|
|
.cultureItem h4 {
|
position: absolute;
|
bottom: 0.16rem;
|
right: 0.12rem;
|
}
|
</style>
|
