<template>
|
<view class="">
|
<headNav
|
:idIndex="idIndex"
|
:searchBg="false"
|
text="中医世医传承数据库"
|
bg="/static/image/topBg1.png"
|
bg1="/static/image/line1.png"
|
/>
|
|
<div class="filterBox font-family">
|
<div class="searchBox">
|
<input type="text" placeholder="输入姓名/别名/朝代" />
|
<button>搜索</button>
|
</div>
|
<div class="dynasty">
|
<div style="font-weight: 700; line-height: 0.25rem">筛选朝代</div>
|
<div class="filterList">
|
<div class="filterItem" v-for="(item, index) in dynasty" :key="index">
|
<div class="circleBox" :class="{ bgcColor: item.isColor }"></div>
|
<div class="filterText" :class="{ fontColor: item.isColor }">
|
{{ item.name + " " + item.number }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="condition">
|
<div style="font-weight: 700; line-height: 0.25rem">条件选择</div>
|
<div class="filterList">
|
<div class="conditionItem">
|
<div class="circleBox"></div>
|
<div class="filterText">3代传承世医</div>
|
</div>
|
<div class="conditionItem">
|
<div class="circleBox"></div>
|
<div class="filterText">4代传承世医</div>
|
</div>
|
<div class="conditionItem">
|
<div class="circleBox"></div>
|
<div class="filterText">5代传承世医</div>
|
</div>
|
<div class="conditionItem">
|
<div class="circleBox"></div>
|
<div class="filterText">5代以上传承世医</div>
|
</div>
|
</div>
|
</div>
|
<div style="padding-left: 0.5rem; margin-top: 20px">共 1983个世医</div>
|
</div>
|
|
<!-- echarts图 -->
|
<div class="barChart" ref="barChart"></div>
|
</view>
|
</template>
|
<script>
|
import * as echarts from "echarts";
|
import {
|
inheritMedicalList,
|
inheritMedicalSataStatistics,
|
inheritMedicalCultureList,
|
inheritMedicalRelationList
|
} from "@/api/index.js";
|
export default {
|
data() {
|
return {
|
// 标题顶部栏需要的东西
|
idIndex: 0,
|
activeIndex: 1,
|
dynasty: [
|
{
|
name: "唐",
|
number: "4910",
|
isColor: false
|
},
|
{
|
name: "五代",
|
number: "494",
|
isColor: true
|
},
|
{
|
name: "宋",
|
number: "51273",
|
isColor: false
|
},
|
{
|
name: "北宋",
|
number: "15",
|
isColor: true
|
},
|
{
|
name: "南宋",
|
number: "4910",
|
isColor: false
|
},
|
{
|
name: "元",
|
number: "299",
|
isColor: true
|
},
|
{
|
name: "明",
|
number: "1830",
|
isColor: false
|
},
|
{
|
name: "清",
|
number: "1000",
|
isColor: true
|
}
|
],
|
nodeData: []
|
};
|
},
|
onLoad(options) {
|
this.idIndex = options.id;
|
console.log("optionsoptionsoptions", options.id);
|
},
|
mounted() {
|
this.getData();
|
},
|
methods: {
|
getData() {
|
inheritMedicalList({
|
keywords: "",
|
dynastyId: "",
|
searchType: "KEYWORD",
|
path: ""
|
}).then((res) => {
|
console.log(res);
|
this.nodeData = res.object.nodeList.map((item) => {
|
return {
|
...item,
|
itemStyle: {
|
color: "#F8E2D7",
|
borderColor: "#F3AA78",
|
borderWidth: "3"
|
}
|
};
|
});
|
// 初始化 echarts
|
this.initBarChart();
|
});
|
},
|
initBarChart() {
|
// WMBg
|
//通过 $ref 进行挂载
|
let myChart = echarts.init(this.$refs.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;
|
}
|
|
console.log(this.nodeData, "this.nodeData");
|
let option = {
|
title: {
|
text: [""]
|
},
|
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: {},
|
animationDurationUpdate: 1500,
|
animationEasingUpdate: "quinticInOut",
|
series: [
|
{
|
type: "graph",
|
layout: "force",
|
symbolSize: 120,
|
//是否允许用户拖动图片
|
roam: true,
|
label: {
|
show: true,
|
color: "black", // 设置节点文字颜色为黑色
|
fontSize: FontSize // 设置文字大小
|
},
|
edgeSymbol: ["circle", "arrow"],
|
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.nodeData,
|
lineStyle: {
|
color: "#000000",
|
opacity: 0.9,
|
width: 2,
|
curveness: 0
|
},
|
force: {
|
// initLayout: 'circular',
|
// gravity: 0
|
friction: 0.1,
|
repulsion: 500,
|
edgeLength: 6
|
}
|
}
|
]
|
};
|
//进行渲染
|
myChart.setOption(option);
|
myChart.on("click", (params) => {
|
uni.navigateTo({
|
url: "/pages/inherit/list"
|
});
|
});
|
},
|
// 返回按钮
|
goBack() {
|
this.$router.go(-1);
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.Lists {
|
li {
|
width: 0.96rem;
|
height: 0.3rem;
|
border: 1px solid #da7a2b;
|
line-height: 0.3rem;
|
text-align: center;
|
font-size: 0.14rem;
|
}
|
}
|
.MiddeBack {
|
width: 0.6rem;
|
height: 0.24rem;
|
font-size: 0.12rem;
|
padding: 0;
|
}
|
.barChart {
|
width: 100vw;
|
height: 80vh;
|
}
|
.filterBox {
|
height: 2.2rem;
|
width: 90%;
|
border-bottom: 1px solid #ccc;
|
padding: 20px;
|
margin: 0 auto;
|
}
|
.searchBox {
|
width: 50%;
|
display: flex;
|
height: 50px;
|
border: 1px solid #ccc;
|
border-radius: 30px;
|
justify-content: center;
|
align-items: center;
|
margin: 0 auto;
|
margin-top: 0.2rem;
|
}
|
|
.searchBox > input {
|
border: none;
|
outline: none;
|
margin: auto;
|
width: 100%;
|
padding-left: 20px;
|
}
|
.searchBox > button {
|
width: 10%;
|
color: white;
|
height: 40px;
|
line-height: 40px;
|
background-color: #e27917;
|
border-radius: 50px;
|
margin-right: 10rpx;
|
}
|
.dynasty {
|
display: flex;
|
margin-top: 0.2rem;
|
width: 100%;
|
padding: 0.1rem 0.5rem;
|
}
|
.condition {
|
display: flex;
|
width: 100%;
|
padding: 0.1rem 0.5rem;
|
}
|
.filterList {
|
margin-left: 0.4rem;
|
display: flex;
|
}
|
.filterItem {
|
display: flex;
|
box-shadow: 1px 1px 5px #888888;
|
align-items: center;
|
justify-content: center;
|
width: 1rem;
|
height: 0.25rem;
|
flex: 1;
|
margin-left: 0.2rem;
|
border-radius: 0.13rem;
|
}
|
.conditionItem {
|
display: flex;
|
box-shadow: 1px 1px 5px #888888;
|
align-items: center;
|
justify-content: center;
|
width: 1.3rem;
|
height: 0.25rem;
|
flex: 1;
|
margin-left: 0.2rem;
|
border-radius: 0.13rem;
|
}
|
|
.circleBox {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: #326350;
|
}
|
.filterText {
|
margin-left: 10px;
|
font-size: 16px;
|
color: #326350;
|
}
|
.fontColor {
|
color: #827e44 !important;
|
}
|
.bgcColor {
|
background-color: #827e44;
|
}
|
</style>
|
