<template>
|
<view class="">
|
<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 class="" 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>
|
<!-- echarts图 -->
|
<div v-if="showType == 1" class="barChart" id="barChart"></div>
|
<view v-if="showType == 2" class="cultureBox">
|
<view class="cultureItem">
|
<view class="imgBox">
|
<img src="@/static/image/inherit/icon1.png" alt="" />
|
</view>
|
<p>
|
蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
|
</p>
|
<h4>——《奇八服考》P 3</h4>
|
</view>
|
<view class="cultureItem">
|
<view class="imgBox">
|
<img src="@/static/image/inherit/icon2.png" alt="" />
|
</view>
|
<p>瀕湖世儒，兼以醫鳴，一門父子兄弟富有著述，此特見一斑耳。</p>
|
<h4>——《奇八服考》P 3</h4>
|
</view>
|
<view class="cultureItem">
|
<view class="imgBox">
|
<img src="@/static/image/inherit/icon3.png" alt="" />
|
</view>
|
<p>
|
病坊刻瀕湖《本草》之因仍訛誤，爰重爲鍥板。經始於癸未八月，迄乙酉五月，閱二歲，糜工數萬，乃克葳事。其校理訛誤，監督剞劂，命兒子席珍、士瑜、士珩分任之；商榷方劑，區別品彙，醫士王君鏡堂之力爲多；參以鍾君受白；而經紀其事，始終不懈者，則范君靜存也。此外如田君撰異、曹君晴峯、熊君仲山、翁君鐵梅、黨君幼雲、張君貫之、程君達三、陳君振遠、許君功甫、朱君藻臣、或參校讐，或司綜核，或職圖繪，謹備書之
|
</p>
|
<h4>——《奇八服考》P 3</h4>
|
</view>
|
</view>
|
</view>
|
</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: [],
|
links: [],
|
socialMapping: true,
|
showType: "1"
|
};
|
},
|
onLoad(options) {
|
this.idIndex = options.id;
|
this.mainName = decodeURIComponent(options.name);
|
console.log("optionsoptionsoptions", options.id);
|
},
|
mounted() {
|
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 = [];
|
let newLinks = [];
|
if (this.socialMapping) {
|
newDataList = [...this.dataList];
|
newLinks = [...this.links];
|
} else {
|
newDataList = this.dataList.filter(
|
(item) => item.itemStyle.borderColor == "#F3AA78"
|
);
|
newLinks = [...this.links];
|
}
|
this.initBarChart(newDataList, newLinks);
|
},
|
changeType(type) {
|
this.showType = type;
|
if (type == 1) {
|
setTimeout(() => {
|
this.socialMapping = true;
|
this.initBarChart(this.dataList, this.links);
|
}, 50);
|
}
|
},
|
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: "graph",
|
layout: "force",
|
symbolSize: SymbolSize + 20,
|
//是否允许用户拖动图片
|
roam: true,
|
label: {
|
show: true,
|
color: "black", // 设置节点文字颜色为黑色
|
fontSize: FontSize // 设置文字大小
|
},
|
edgeSymbol: ["circle"],
|
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: this.dataList, //关系连接
|
links: this.links,
|
lineStyle: {
|
color: "#000000",
|
opacity: 0.9,
|
width: 2,
|
curveness: 0
|
},
|
force: {
|
initLayout: null,
|
// gravity: 0
|
repulsion: 600,
|
edgeLength: 400
|
}
|
}
|
]
|
};
|
//进行渲染
|
myChart.setOption(option);
|
},
|
// 返回按钮
|
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;
|
}
|
.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;
|
}
|
|
.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>
|
