<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>
|
<!-- 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 {
|
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
|
};
|
},
|
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();
|
},
|
methods: {
|
getData() {
|
inheritMedicalRelationList({
|
identifier: this.idIndex,
|
socialFlag: true
|
}).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();
|
}, 50);
|
|
});
|
|
// 世医文化
|
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 == "家训");
|
});
|
},
|
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.color !== "#ecf4fe");
|
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: "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);
|
},
|
// 返回按钮
|
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;
|
}
|
|
.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>
|
