<template>
|
<view>
|
<headNav
|
idIndex="2"
|
:searchBg="false"
|
text="家学传承"
|
bg="/static/image/topBg1.png"
|
bg1="/static/image/line1.png"
|
/>
|
|
<div class="filterBox font-family">
|
<div class="searchBox">
|
<input
|
type="text"
|
v-model="keyword"
|
@confirm="search"
|
placeholder="请输入关键字"
|
style="padding-right: 54px; box-sizing: border-box"
|
/>
|
<span
|
class="cleanupBtn"
|
v-if="keyword"
|
@click="keyword = ''"
|
style="
|
position: absolute;
|
top: 50%;
|
margin-top: -10px;
|
right: 84px;
|
color: #fff;
|
z-index: 2;
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
text-align: center;
|
line-height: 20px;
|
background-color: #a5a5a5;
|
font-weight: bold;
|
border-radius: 50%;
|
font-size: 12px;
|
cursor: pointer;
|
"
|
>✖</span
|
>
|
<button @click="search">搜索</button>
|
<span
|
class="openSearch"
|
@click="
|
() => {
|
openSearch = !openSearch;
|
}
|
"
|
>高级搜索{{ openSearch ? "∧" : "∨" }}</span
|
>
|
</div>
|
<div class="dynasty" v-if="openSearch">
|
<div style="font-weight: 700; line-height: 0.25rem">筛选朝代</div>
|
<div class="filterList">
|
<div
|
class="filterItem"
|
v-for="(item, index) in dynasty"
|
:key="index"
|
@click="changeDynasty(item)"
|
>
|
<div
|
class="circleBox"
|
:class="{ active: item.dynastyId === activeId }"
|
></div>
|
<div class="filterText">
|
{{ item.dynasty + " " + item.count }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="condition" v-if="openSearch">
|
<div style="font-weight: 700; line-height: 0.25rem">条件选择</div>
|
<div class="filterList">
|
<div class="conditionItem" @click="changeCondition(3)">
|
<div
|
class="circleBox"
|
:style="{ background: conditionId === 3 ? '#bacd66' : '#9e9e9e' }"
|
></div>
|
<div class="filterText">3代传承世医</div>
|
</div>
|
<div class="conditionItem" @click="changeCondition(4)">
|
<div
|
class="circleBox"
|
:style="{ background: conditionId === 4 ? '#6d9346' : '#9e9e9e' }"
|
></div>
|
<div class="filterText">4代传承世医</div>
|
</div>
|
<div class="conditionItem" @click="changeCondition(5)">
|
<div
|
class="circleBox"
|
:style="{ background: conditionId === 5 ? '#da7a2b' : '#9e9e9e' }"
|
></div>
|
<div class="filterText">5代传承世医</div>
|
</div>
|
<div class="conditionItem" @click="changeCondition(6)">
|
<div
|
class="circleBox"
|
:style="{ background: conditionId === 6 ? '#bc321d' : '#9e9e9e' }"
|
></div>
|
<div class="filterText">5代以上传承世医</div>
|
</div>
|
</div>
|
</div>
|
<div style="padding-left: 0.5rem; margin-top: 0.1rem">
|
共 {{ totalCount }}个世医
|
</div>
|
</div>
|
<div class="contentBox">
|
<!-- echarts图 -->
|
<div id="barChart" ref="barChart"></div>
|
<div
|
v-if="!loading && nodeData.length == 0"
|
style="
|
position: absolute;
|
top: 30%;
|
left: 0;
|
right: 0;
|
text-align: center;
|
font-size: 0.2rem;
|
color: #666;
|
"
|
>
|
暂无搜索数据
|
</div>
|
<div
|
class="toolBox"
|
v-if="showTool"
|
:style="{ top: toolTop, left: toolLeft }"
|
>
|
<div class="toolItem" @click="gotoDetail(1)">个人信息</div>
|
<div
|
class="toolItem"
|
style="position: relative; top: -40px"
|
@click="gotoDetail(2)"
|
>
|
世医文化
|
</div>
|
<div class="toolItem" @click="gotoDetail(3)">世医传承</div>
|
</div>
|
</div>
|
</view>
|
</template>
|
<script>
|
import * as echarts from "echarts";
|
import {
|
getNodeCount,
|
inheritMedicalSataStatistics,
|
inheritMedicalList
|
} from "@/api/index.js";
|
export default {
|
data() {
|
return {
|
loading: true,
|
// 标题顶部栏需要的东西
|
keyword: "",
|
idIndex: 0,
|
activeId: 28,
|
conditionId: "",
|
searchType: "DYNASTY",
|
dynasty: [],
|
nodeData: [],
|
showTool: false,
|
toolTop: 0,
|
toolLeft: 0,
|
toolInfo: {},
|
totalCount: 0,
|
openSearch: false
|
};
|
},
|
onLoad(options) {
|
this.idIndex = options.id;
|
},
|
mounted() {
|
this.getStatistics();
|
},
|
methods: {
|
getStatistics() {
|
inheritMedicalSataStatistics().then((res) => {
|
this.dynasty = res.object;
|
this.activeId = this.dynasty[0].dynastyId;
|
this.getData();
|
});
|
},
|
getData() {
|
this.loading = true;
|
this.nodeData = [];
|
// const defaultDynasty = this.dynasty.find(f.dynasty == "宋");
|
this.showTool = false;
|
inheritMedicalList({
|
keywords: this.keyword,
|
dynastyId: this.activeId,
|
searchType: this.searchType,
|
path: this.conditionId
|
}).then((res) => {
|
for (let i = 0; i < res.object.nodeList.length; i++) {
|
const node = res.object.nodeList[i];
|
this.nodeData.push({
|
...node,
|
id: node.identifier,
|
itemStyle: {
|
color: "#F8E2D7",
|
borderColor: "#F3AA78",
|
borderWidth: "3"
|
}
|
});
|
}
|
getNodeCount({
|
keywords: this.keyword,
|
dynastyId: this.activeId,
|
searchType: this.searchType,
|
path: this.conditionId
|
}).then((res) => {
|
this.totalCount = res.object.totalCount;
|
});
|
console.log(this.nodeData, "this.nodeData");
|
this.loading = false;
|
// 初始化 echarts
|
this.initBarChart();
|
});
|
},
|
initBarChart() {
|
//通过 $ref 进行挂载
|
var chartDom = document.getElementById("barChart");
|
let myChart = echarts.init(chartDom);
|
|
let FontSize = 18; // 字体大小
|
let BorderWidth = 2; // 边框大小
|
let SymbolSize = 80; // 尺寸距离
|
let Distance = 10;
|
// 不同尺寸下修改echarts的字体
|
if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
|
FontSize = 20;
|
BorderWidth = 5;
|
SymbolSize = 100;
|
Distance = 33;
|
} else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
|
FontSize = 20;
|
BorderWidth = 4;
|
SymbolSize = 90;
|
Distance = 22;
|
} else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
|
FontSize = 18;
|
BorderWidth = 4;
|
SymbolSize = 70;
|
Distance = 22;
|
}
|
|
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: 100,
|
//是否允许用户拖动图片
|
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: {
|
layoutAnimation: false,
|
// initLayout: 'circular',
|
// gravity: 0,
|
friction: 0.1,
|
repulsion: 500,
|
edgeLength: 6
|
},
|
selectedMode: "single",
|
select: {
|
itemStyle: {
|
color: "#e8f3ff",
|
borderColor: "#284e74",
|
borderWidth: "3"
|
}
|
}
|
}
|
]
|
};
|
let selectData = [];
|
//进行渲染
|
myChart.setOption(option);
|
// myChart.getZr().on("click", (params) => {
|
// console.log(params);
|
// console.log(selectData);
|
// if (!params.target) {
|
// this.showTool = false;
|
// }
|
// });
|
myChart.on("click", (params) => {
|
if (selectData.length > 0) {
|
let x = params.event.target.transform[4];
|
let y = params.event.target.transform[5];
|
if (params.componentType === "series") {
|
this.showTool = true;
|
this.toolTop = y - 70 + "px";
|
this.toolLeft = x - 163 + "px";
|
this.toolInfo = {
|
id: params.data.identifier,
|
name: encodeURIComponent(params.data.name)
|
};
|
} else {
|
this.showTool = false;
|
}
|
}
|
});
|
myChart.on("selectchanged", (params) => {
|
if (params.fromAction == "select") {
|
selectData = params.selected[0].dataIndex;
|
} else {
|
selectData = [];
|
this.showTool = false;
|
}
|
});
|
myChart.on("graphroam", (params) => {
|
this.showTool = false;
|
myChart.dispatchAction({
|
type: "unselect",
|
dataIndex: selectData
|
});
|
});
|
},
|
gotoDetail(type) {
|
switch (type) {
|
case 1:
|
uni.navigateTo({
|
url: "/pages/character/detail?id=" + this.toolInfo.id
|
});
|
break;
|
case 2:
|
uni.navigateTo({
|
url:
|
"/pages/inherit/list?type=" +
|
2 +
|
"&id=" +
|
this.toolInfo.id +
|
"&name=" +
|
this.toolInfo.name
|
});
|
break;
|
case 3:
|
uni.navigateTo({
|
url:
|
"/pages/inherit/list?type=" +
|
1 +
|
"&id=" +
|
this.toolInfo.id +
|
"&name=" +
|
this.toolInfo.name
|
});
|
break;
|
}
|
},
|
// 返回按钮
|
goBack() {
|
this.$router.go(-1);
|
},
|
search() {
|
this.searchType = "KEYWORD";
|
this.activeId = "";
|
this.conditionId = "";
|
this.getData();
|
},
|
changeDynasty(item) {
|
if (item.dynastyId === this.activeId) {
|
this.activeId = "";
|
if (this.conditionId === "") {
|
this.searchType = "KEYWORD";
|
}
|
} else {
|
this.searchType = "DYNASTY";
|
this.activeId = item.dynastyId;
|
this.keyword = "";
|
}
|
this.getData();
|
},
|
changeCondition(index) {
|
if (index === this.conditionId) {
|
this.conditionId = "";
|
if (this.activeId === "") {
|
this.searchType = "KEYWORD";
|
}
|
} else {
|
this.searchType = "DYNASTY";
|
this.conditionId = index;
|
this.keyword = "";
|
}
|
this.getData();
|
}
|
}
|
};
|
</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;
|
}
|
.contentBox {
|
width: 100vw;
|
height: 80vh;
|
position: relative;
|
}
|
#barChart {
|
width: 100%;
|
height: 100%;
|
}
|
.toolBox {
|
padding: 0.1rem;
|
position: absolute;
|
}
|
.toolItem {
|
padding: 0.04rem 0.2rem;
|
border: 1px solid #333;
|
border-radius: 1rem;
|
margin: 0.06rem;
|
font-size: 0.12rem;
|
cursor: pointer;
|
background-color: #fff;
|
display: inline-block;
|
}
|
.toolItem:hover {
|
background-color: #efefef;
|
}
|
.filterBox {
|
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;
|
position: relative;
|
}
|
|
.searchBox > input {
|
border: none;
|
outline: none;
|
margin: auto;
|
flex: 1;
|
overflow: hidden;
|
padding-left: 20px;
|
}
|
.searchBox > button {
|
color: white;
|
height: 40px;
|
line-height: 40px;
|
background-color: #e27917;
|
border-radius: 50px;
|
margin-right: 10rpx;
|
}
|
|
.searchBox .openSearch {
|
position: absolute;
|
right: -100px;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
|
.dynasty {
|
display: flex;
|
margin-top: 0.2rem;
|
width: 100%;
|
padding: 0 0.5rem;
|
}
|
.condition {
|
display: flex;
|
width: 100%;
|
padding: 0 0.5rem;
|
}
|
.filterList {
|
flex: 1;
|
overflow: hidden;
|
margin-left: 0.4rem;
|
overflow: hidden;
|
}
|
.filterItem {
|
display: flex;
|
box-shadow: 1px 1px 5px #888888;
|
align-items: center;
|
justify-content: center;
|
height: 0.3rem;
|
margin-left: 0.2rem;
|
border-radius: 0.13rem;
|
float: left;
|
margin-top: 0.02rem;
|
margin-bottom: 0.1rem;
|
cursor: pointer;
|
padding: 0 0.1rem;
|
}
|
.conditionItem {
|
display: flex;
|
box-shadow: 1px 1px 5px #888888;
|
align-items: center;
|
justify-content: center;
|
padding: 0 0.1rem;
|
height: 0.3rem;
|
float: left;
|
margin-left: 0.2rem;
|
border-radius: 0.13rem;
|
margin-top: 0.02rem;
|
margin-bottom: 0.1rem;
|
cursor: pointer;
|
}
|
|
.circleBox {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: #9e9e9e;
|
}
|
.circleBox.active {
|
background-color: #da7a2b;
|
}
|
.filterText {
|
margin-left: 10px;
|
font-size: 0.14rem;
|
}
|
.fontColor {
|
color: #827e44 !important;
|
}
|
.bgcColor {
|
background-color: #827e44;
|
}
|
</style>
|
