<template>
|
<view
|
style="width: 100%; height: 100%; display: flex; flex-direction: column"
|
>
|
<!-- 顶部导航 -->
|
<headNav :idIndex="3 + ''" text="学术图谱" />
|
<view class="Midde flex">
|
<!-- <view class="MiddeBack">返回</view> -->
|
<el-button class="MiddeBack flex flex-center" @click="goBack"
|
>返回</el-button
|
>
|
<view class="flex flex-center flex-column">
|
<view
|
style="
|
font-weight: 900;
|
margin-bottom: 0.2rem;
|
font-size: 0.26rem;
|
line-height: 1;
|
"
|
>{{ detailData.name }}
|
</view>
|
<ul class="flex Lists">
|
<li
|
@click="ListClick"
|
style="background-color: #fff; color: #597aa5; cursor: pointer"
|
>
|
学派介绍
|
</li>
|
<li style="background-color: #597aa5; color: #fff; cursor: pointer">
|
学派图谱
|
</li>
|
</ul>
|
</view>
|
<view></view>
|
</view>
|
<view class="flex flex-center" style="width: 100%; margin: 0.2rem 0">
|
<ul class="flex">
|
<li class="school1" v-for="(item, index) in dynasty" :key="item.id">
|
<view
|
class="flex flex-center font-family school"
|
style="
|
font-weight: 500;
|
border-radius: 0.3rem;
|
padding: 0.06rem 0.15rem;
|
color: #2c2c2c;
|
font-size: 0.12rem;
|
margin-top: 0.03rem;
|
margin-right: 0.1rem;
|
background-color: #fff;
|
"
|
>
|
<view
|
:style="{ background: item.color }"
|
style="
|
margin-right: 0.07rem;
|
width: 0.12rem;
|
height: 0.12rem;
|
border-radius: 50%;
|
"
|
></view>
|
<view style="color: #2c2c2c; font-size: 0.12rem">{{
|
item.name
|
}}</view>
|
</view>
|
</li>
|
</ul>
|
</view>
|
<view class="contentBox" style="position: relative">
|
<div
|
v-if="nodeData.length == 0"
|
style="
|
color: #666;
|
text-align: center;
|
font-size: 16px;
|
position: absolute;
|
top: 1rem;
|
left: 0;
|
right: 0;
|
"
|
>
|
暂无数据
|
</div>
|
<view id="main" style="width: 100%; height: 100%"> </view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getIntroduction,
|
searchSchoolPerson,
|
schoolAtlas
|
} from "@/api/index.js";
|
import * as echarts from "echarts";
|
export default {
|
data() {
|
return {
|
detailData: {},
|
nodeData: [],
|
links: [],
|
// 标题顶部栏需要的东西
|
idIndex: 0,
|
dynasty: [
|
{
|
name: "代表人物",
|
color: "#597AA5",
|
id: 1
|
},
|
{
|
name: "重要医家",
|
color: "#DA7A2B",
|
id: 2
|
},
|
{
|
name: "关系文献",
|
color: "#9E9E9E",
|
id: 3
|
}
|
]
|
};
|
},
|
onLoad(options) {
|
this.idIndex = options.id;
|
this.getDetailData();
|
},
|
methods: {
|
getDetailData() {
|
getIntroduction(Number(this.idIndex)).then((res) => {
|
this.detailData = {
|
name: res.object.school_NAME[0].content,
|
character: res.object.important_PEOPLE
|
? res.object.important_PEOPLE
|
.map((item) => item.content2)
|
.join("、")
|
: "",
|
skilledDoctor: res.object.important_PHYSICIAN
|
? res.object.important_PHYSICIAN
|
.map((item) => item.content2)
|
.join("、")
|
: "",
|
works: res.object.important_WORK
|
? res.object.important_WORK.map((item) => item.content).join("、")
|
: "",
|
thought: res.object.school_THOUGHT
|
? res.object.school_THOUGHT.map((item) => item.content).join("、")
|
: "",
|
source: res.object.bookList
|
? res.object.bookList.map((item) => item.name).join("、")
|
: "",
|
brief: res.object.school_INTRODUCTION
|
? res.object.school_INTRODUCTION.map((item) => {
|
return {
|
content: item.content,
|
source:
|
res.object.bookList &&
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
? "出处：《" +
|
res.object.bookList.find(
|
(citem) => citem.id == item.bookId
|
).name +
|
"》 " +
|
(item.pageNo ? "P " + item.pageNo : "")
|
: ""
|
};
|
})
|
: [],
|
develop: res.object.school_DEVELOPMENT
|
? res.object.school_DEVELOPMENT.map((item) => {
|
return {
|
content: item.content,
|
source:
|
res.object.bookList &&
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
? "出处：《" +
|
res.object.bookList.find(
|
(citem) => citem.id == item.bookId
|
).name +
|
"》 " +
|
(item.pageNo ? "P " + item.pageNo : "")
|
: ""
|
};
|
})
|
: [],
|
achievement: res.object.achievement_INFLUENCE
|
? res.object.achievement_INFLUENCE.map((item) => {
|
return {
|
content: item.content,
|
source:
|
res.object.bookList &&
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
? "出处：《" +
|
res.object.bookList.find(
|
(citem) => citem.id == item.bookId
|
).name +
|
"》 " +
|
(item.pageNo ? "P " + item.pageNo : "")
|
: ""
|
};
|
})
|
: [],
|
literature: res.object.related_LITERATURE
|
? res.object.related_LITERATURE.map((item) => {
|
return {
|
content: item.content,
|
source:
|
res.object.bookList &&
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
? "出处：《" +
|
res.object.bookList.find(
|
(citem) => citem.id == item.bookId
|
).name +
|
"》 " +
|
(item.pageNo ? "P " + item.pageNo : "")
|
: ""
|
};
|
})
|
: []
|
};
|
this.getData();
|
});
|
},
|
getData() {
|
this.nodeData = [];
|
this.links = [];
|
const p = this.detailData.character.split("、");
|
for (let i = 0; i < p.length; i++) {
|
const item = p[i];
|
// 代表人物
|
this.nodeData.push({
|
name: item,
|
x: 200 * i,
|
y: 200 * i,
|
itemStyle: {
|
color: "#ecf4fe",
|
borderWidth: 4,
|
borderColor: "#597aa5",
|
borderRadius: 30
|
},
|
symbolSize: 100
|
});
|
schoolAtlas(Number(this.idIndex)).then((res) => {
|
if (res.list) {
|
for (let i = 0; i < res.list.length; i++) {
|
const citem = res.list[i];
|
if (
|
citem.relationType != "代表人物" &&
|
citem.relationType != "人物关系"
|
) {
|
// 节点
|
if (citem.name1) {
|
this.nodeData.push({
|
name: citem.name1,
|
x: Math.random() * 1000,
|
y: Math.random() * 600,
|
itemStyle: {
|
color:
|
citem.relationType == "关系文献" ? "#eee" : "#FDEFE4",
|
borderWidth: 4,
|
borderColor:
|
citem.relationType == "关系文献"
|
? "#9e9e9e"
|
: "#DA7A2B",
|
borderRadius: 30
|
},
|
symbolSize: 100
|
});
|
// 关系
|
this.links.push({
|
source: item,
|
target: citem.name1,
|
label: {
|
show: true,
|
formatter: function (params) {
|
// 使用函数动态生成标签内容
|
// return relationships.find(rel => rel.source === nodes[params.data
|
// .source] && rel.target === nodes[params.data.target])
|
// .relation;
|
return citem.name2;
|
}, // 设置关系标签内容为"Child-Parent"
|
color: "#2C2C2C",
|
fontSize: 14,
|
backgroundColor: "rgba(255, 255, 255, 1)",
|
padding: [3, 8],
|
borderRadius: 30,
|
position: "middle", // 设置标签文本在线的中间位置上居中显示
|
// z: -1, // 设置标签的z轴高度，使其比连接线更高
|
distance: -10 // 将标签放置在连接线上
|
}
|
});
|
}
|
}
|
}
|
}
|
this.init();
|
});
|
}
|
},
|
goBack() {
|
this.$router.go(-1);
|
},
|
ListClick() {
|
uni.navigateTo({
|
url: "/pages/academicGenres/detail?id=" + this.idIndex
|
});
|
},
|
init() {
|
var chartDom = document.getElementById("main");
|
var myChart = echarts.init(chartDom);
|
let FontSize = 12; // 字体大小
|
let SymbolSize = 80; // 尺寸距离
|
// 不同尺寸下修改echarts的字体
|
if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
|
FontSize = 28;
|
SymbolSize = 100;
|
} else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
|
FontSize = 28;
|
SymbolSize = 90;
|
} else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
|
FontSize = 18;
|
SymbolSize = 70;
|
}
|
var option;
|
option = {
|
tooltip: {},
|
animationDurationUpdate: 1500,
|
animationEasingUpdate: "quinticInOut",
|
series: [
|
{
|
type: "graph",
|
layout: "force",
|
roam: true,
|
symbolSize: SymbolSize + 20,
|
//是否允许用户拖动图片
|
roam: true,
|
label: {
|
show: true,
|
color: "black", // 设置节点文字颜色为黑色
|
fontSize: FontSize // 设置文字大小
|
},
|
edgeSymbol: ["circle", "arrow"],
|
edgeSymbolSize: [4, 10],
|
emphasis: {
|
focus: "adjacency",
|
lineStyle: {
|
width: 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: this.nodeData, //关系连接
|
links: this.links,
|
lineStyle: {
|
opacity: 0.9,
|
width: 2
|
},
|
force: {
|
// layoutAnimation: false,
|
// friction: 1,
|
repulsion: 800,
|
edgeLength: 400
|
}
|
}
|
]
|
};
|
|
option && myChart.setOption(option);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
view {
|
color: #fff;
|
}
|
|
.NavTop {
|
background-color: #0c274c;
|
padding: 25rpx;
|
|
img {
|
width: 30rpx;
|
height: 30rpx;
|
vertical-align: middle;
|
}
|
|
.NavTopr {
|
img {
|
margin-right: 10rpx;
|
}
|
}
|
}
|
|
.Midde {
|
/* background-color: #d1d6dc; */
|
background-image: url(@/static/image/学派Bg.png);
|
background-size: 100% 100%;
|
color: #000;
|
padding: 0.18rem 0.23rem 0;
|
align-items: flex-start;
|
height: 1.43rem;
|
|
view {
|
color: #000;
|
}
|
|
.MiddeBack {
|
width: 0.6rem;
|
height: 0.24rem;
|
font-size: 0.12rem;
|
padding: 0;
|
border-radius: 0;
|
border: 1px solid #9e9e9e;
|
color: #000;
|
}
|
|
.Lists {
|
li {
|
width: 0.96rem;
|
height: 0.3rem;
|
border: 1px solid #597aa5;
|
line-height: 0.3rem;
|
text-align: center;
|
font-size: 0.14rem;
|
}
|
}
|
}
|
|
.school1 {
|
margin: 0 0.2rem;
|
}
|
|
.contentBox {
|
flex: 1;
|
background-image: url("@/static/image/characterRelationBg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
</style>
|
