<template>
|
<div class="page">
|
<div class="page-header">
|
<p>
|
<span>王永炎院士学生目录</span>
|
</p>
|
</div>
|
<div class="page-main-father">
|
<div class="page-main-title">
|
<p @click="changeTab('chart')" :class="[activeTabs == 'chart' ? 'active-tab' : '']">
|
<img :src="[activeTabs == 'chart' ? chartIcon : noChartIcon]" alt="" />
|
<span>图表显示</span>
|
</p>
|
<p @click="changeTab('list')" :class="[activeTabs == 'list' ? 'active-tab' : '']">
|
<img :src="[activeTabs == 'list' ? listIcon : noListIcon]" alt="" />
|
<span>列表显示</span>
|
</p>
|
</div>
|
<!-- 图表显示 -->
|
<div class="charts-main" v-if="activeTabs == 'chart'">
|
<div class="radial-tree-container">
|
<div ref="chart" style="width: 100%; height: 70vh"></div>
|
</div>
|
|
<div class="legend">
|
<div class="tagItem" v-for="(item, index) in legendList" :key="index">
|
<div class="tagColor" :style="{ background: item.color }"></div>
|
<div class="tagText" :style="{ color: item.color }">
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
<transition name="el-fade-in-linear">
|
<div class="tooltipBox" v-show="tooltipShow">
|
<div style="
|
padding: 10px;
|
background: #fdf8f0;
|
border-radius: 5px;
|
width: 100%;
|
max-height: 500px;
|
text-align: center;
|
">
|
<div class="closeBtn" @click="tooltipShow = false">
|
<i class="el-icon-close"></i>
|
</div>
|
<div style="display: flex">
|
<div style="
|
width: 80px;
|
height: 80px;
|
position: relative;
|
margin-bottom: 10px;
|
background: #d8d8d8;
|
">
|
<img class="autoImg" src="@/assets/images/directory/touxiang.png" alt="" />
|
</div>
|
<div style="padding-top: 20px; text-align: left; margin-left: 20px">
|
<div style="
|
font-size: 16px;
|
font-weight: bold;
|
margin-bottom: 5px;
|
">
|
{{ currentNodeInfo.name }}
|
</div>
|
<div style="margin-top: 20px">
|
<span> 男 </span> <span> 硕士 </span>
|
<span> 北京中医药大学 </span>
|
</div>
|
</div>
|
</div>
|
|
<div style="
|
font-size: 16px;
|
font-weight: bold;
|
margin-bottom: 5px;
|
text-align: left;
|
margin-top: 10px;
|
">
|
<p style="margin-bottom: 15px">学习时间：1985.09 -1988.07</p>
|
<p style="margin-bottom: 15px">
|
现工作单位：北京中医药大学东方医院
|
</p>
|
<p style="margin-bottom: 15px">职务：原院长</p>
|
<p style="margin-bottom: 15px">职称：主任医师、教授</p>
|
</div>
|
<div style="text-align: left; line-height: 22px">
|
<p>
|
大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。
|
</p>
|
</div>
|
<div style="
|
display: flex;
|
justify-content: space-between;
|
margin-top: 20px;
|
">
|
<div style="text-align: left; width: 48%; line-height: 22px">
|
<p>
|
观夫明堂之宏壮也，则突兀瞳曨，乍明乍蒙，若大古元气之结空。巃嵸颓沓，若嵬若嶪，似天阃地门之开阖。尔乃划岝峉以岳立，郁穹崇而鸿纷。冠百王而垂勋，烛万象而腾文。窙惚恍以洞启，呼嵌岩而傍分。又比乎昆山之天柱，矗九霄而垂云。
|
</p>
|
</div>
|
<div>
|
<img src="@/assets/images/directory/test.png" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</transition>
|
</div>
|
<!-- 列表显示 -->
|
<div class="page-main" v-if="activeTabs == 'list'">
|
<div v-loading="loading">
|
<div v-for="(item, index) in universityList" :key="index" >
|
<div class="table-title" v-if="item.studentList && item.studentList.length > 0">
|
<div class="table-title-left">
|
<p class="table-title-name">{{ item.unitName }}</p>
|
<p class="table-title-degree">{{ item.academicDegreeName }}</p>
|
<p class="table-title-number">{{ item.studentList.length }}人</p>
|
</div>
|
<div class="table-title-right" @click="item.isShow = !item.isShow">
|
<img :src="[item.isShow ? topIcon : bottomIcon]" alt="" />
|
</div>
|
</div>
|
<table cellpadding="100" v-if="
|
item.studentList && item.studentList.length > 0 && item.isShow
|
" style="vertical-align: middle;">
|
<tr class="table-heading">
|
<th>姓名</th>
|
<th>性别</th>
|
<th>学习时间</th>
|
<th>工作单位（到二级单位全称）</th>
|
<th>职务</th>
|
<th>职称</th>
|
</tr>
|
<tr v-for="(citem, cindex) in item.studentList" :key="cindex">
|
<td>
|
{{ citem.name }}
|
</td>
|
<td>
|
{{ citem.gender == 'male' ? '男' : '女' }}
|
</td>
|
<td>{{ citem.studyTime }}</td>
|
<td>{{ citem.currentEmployer_secondary }}</td>
|
<td>{{ citem.jobTitle === undefined || citem.jobTitle === '' ? '-' : citem.jobTitle }}</td>
|
<td>{{ citem.professionalTitle === undefined || citem.professionalTitle === '' ? '-' :
|
citem.professionalTitle }}</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from "echarts";
|
import axios from "axios";
|
import debounce from "lodash/debounce";
|
import treeData from "./treeData.json";
|
import MG from "@/assets/js/middleGround/WebMiddleGroundApi.js";
|
import { forEach } from "lodash";
|
import { method } from "lodash";
|
export default {
|
data() {
|
return {
|
unitRefCode: "unit",
|
academicDegreeRefCode: "academicDegree",
|
unitList: [],
|
academicDegreeList: [],
|
chartIcon: require("@/assets/images/directory/chartIcon.png"),
|
noChartIcon: require("@/assets/images/directory/noChartIcon.png"),
|
listIcon: require("@/assets/images/directory/listIcon.png"),
|
noListIcon: require("@/assets/images/directory/noListIcon.png"),
|
topIcon: require("@/assets/images/directory/topIcon.png"),
|
bottomIcon: require("@/assets/images/directory/bottomIcon.png"),
|
activeTabs: "chart",
|
universityList: [],
|
chart: null,
|
chartData: treeData,
|
currentNodeInfo: {},
|
tooltipShow: false,
|
legendList: [
|
{
|
color: "#87A7B9",
|
name: "北京中医大学",
|
},
|
{
|
color: "#C48787",
|
name: "北京师范大学",
|
},
|
{
|
color: "#6F8F5A",
|
name: "中国中医科学院",
|
},
|
{
|
color: "#937950",
|
name: "广州中医药大学",
|
},
|
{
|
color: "#8D77B3",
|
name: "拜师弟子",
|
},
|
],
|
loading: false,
|
};
|
},
|
|
mounted() {
|
this.initChart();
|
this.getSelectData();
|
this.getStudentList();
|
window.addEventListener("resize", this.handleResize);
|
},
|
beforeDestroy() {
|
window.removeEventListener("resize", this.handleResize);
|
if (this.chart) {
|
this.chart.dispose();
|
}
|
},
|
methods: {
|
changeTab(key) {
|
this.activeTabs = key;
|
console.log(this.activeTabs, "activeTabs");
|
if (key == "chart") {
|
this.$nextTick(() => {
|
this.initChart();
|
window.addEventListener("resize", this.handleResize);
|
});
|
}
|
},
|
initChart() {
|
this.chart = echarts.init(this.$refs.chart);
|
const option = {
|
tooltip: {
|
trigger: "item",
|
triggerOn: "mousemove",
|
backgroundColor: "#FDF8F0",
|
formatter: (params) => {
|
const data = params.data;
|
this.currentNodeInfo = data;
|
return `
|
<div style="
|
padding: 10px;
|
background: #FDF8F0;
|
border-radius: 5px;
|
max-width: 300px;
|
width: 360px;
|
text-align: center;
|
">
|
<div style="width: 80px;height: 80px;position: relative; margin: 0 auto; margin-bottom: 10px;background: #D8D8D8;">
|
<img class="autoImg" src="${require("@/assets/images/directory/touxiang.png")}" alt="">
|
</div>
|
<div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">${data.name
|
}</div>
|
<div> <span> 男 </span> <span> 硕士 </span> <span> 北京中医药大学 </span></div>
|
<div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;text-align: left;margin-top: 10px;">
|
<p style="margin-bottom: 5px;">学习时间：1985.09 -1988.07</p>
|
<p style="margin-bottom: 5px;">现工作单位：北京中医药大学东方医院</p>
|
<p style="margin-bottom: 5px;">职务：原院长</p>
|
<p style="margin-bottom: 5px;">职称：主任医师、教授</p>
|
</div>
|
|
</div>
|
`;
|
},
|
},
|
textStyle: {
|
color: "#bc1c00", // 设置整体字体颜色为红色
|
},
|
edgeLabel: {
|
normal: {
|
color: "#bc1c00", // 设置线条的颜色为红色
|
},
|
},
|
series: [
|
{
|
type: "tree",
|
data: [this.chartData],
|
top: "10%",
|
bottom: "10%",
|
layout: "radial",
|
symbol: "circle",
|
symbolSize: 7,
|
initialTreeDepth: 3, // 展开所有节点
|
animationDurationUpdate: 750,
|
emphasis: {
|
focus: "descendant",
|
},
|
|
label: {
|
position: "top", //标签的位置。
|
verticalAlign: "middle", //文字垂直对齐方式，默认自动。
|
fontSize: 12, //文字的字体大小
|
color: "#bc1c00",
|
},
|
// leaves: {
|
// symbol: "emptyCircle",
|
// label: {
|
// fontSize: 12,
|
// },
|
// },
|
expandAndCollapse: false,
|
lineStyle: {
|
color: "#bc1c00",
|
width: 1,
|
},
|
itemStyle: {
|
color: function (params) {
|
return "green";
|
},
|
},
|
roam: true,
|
center: ["5%", "0%"], // 微调垂直居中
|
radius: "100%", // 增大半径占比
|
nodePadding: 120,
|
},
|
],
|
};
|
|
this.chart.setOption(option);
|
this.chart.on("click", (params) => {
|
console.log("点击时的回调", params);
|
this.tooltipShow = true;
|
});
|
},
|
handleResize() {
|
if (this.chart) {
|
this.chart.resize();
|
}
|
},
|
//获取下拉选择框的内容
|
async getSelectData() {
|
try {
|
// 同时发起两个异步请求，并等待它们的结果
|
const [unitListResult, academicDegreeListResult] = await Promise.all([
|
this.getSelectContent(this.unitRefCode),
|
this.getSelectContent(this.academicDegreeRefCode)
|
]);
|
this.unitList = unitListResult.option.map(item => {
|
return {
|
...item,
|
studentList: [] // 设置自定义字段的默认值
|
};
|
});
|
this.academicDegreeList = academicDegreeListResult.option;
|
console.log(this.unitList, "unitList");
|
console.log(this.academicDegreeList, "academicDegreeList");
|
} catch (error) {
|
console.error("获取下拉框数据失败:", error);
|
}
|
},
|
|
//获取选择内容
|
getSelectContent(refCode) {
|
let requestData = { refCodes: [refCode] };
|
return MG.store.getProductTypeField(requestData).then(res => {
|
console.log(res, '下拉框数据');
|
const selestList = JSON.parse(res[0].config)
|
return selestList
|
}).catch((error) => {
|
console.error("获取荣誉失败:", error);
|
return null
|
});
|
},
|
|
// 获取列表显示
|
getStudentList() {
|
this.loading = true;
|
MG.resource
|
.getItem({
|
path: "WYY_student",
|
fields: {
|
// 性别
|
gender: "",
|
//学习时间
|
studyTime: [],
|
// 单位
|
unit: [],
|
// 现工作单位（到二级单位全称）
|
currentEmployer_secondary: "",
|
//职务
|
jobTitle: "",
|
professionalTitle:"",
|
//学位
|
academicDegree: "",
|
// 学生简介
|
studentProfile: "",
|
},
|
paging: {
|
size: 99999,
|
},
|
})
|
.then((res) => {
|
let arrList = []
|
this.unitList.forEach(item => {
|
this.academicDegreeList.forEach(citem => {
|
arrList.push({
|
unitName: item.name,
|
unitValue: item.value,
|
academicDegreeName: citem.name,
|
academicDegreeValue: citem.value,
|
isShow: false,
|
studentList:[]
|
})
|
})
|
})
|
console.log(res, "res");
|
if (res.datas && res.datas.length) {
|
res.datas.forEach(item => {
|
arrList.forEach(citem => {
|
if (item.unit == citem.unitValue && item.academicDegree == citem.academicDegreeValue){
|
citem.studentList.push(item);
|
}
|
})
|
});
|
arrList = arrList.filter(item =>
|
item.studentList.length
|
)
|
console.log(arrList, "arrList");
|
this.universityList = arrList;
|
this.loading = false;
|
}
|
})
|
.catch((error) => {
|
console.error("获取荣誉失败:", error);
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.page {
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
background-color: #e9e1d4;
|
position: relative;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.page-header {
|
padding: 8px 0;
|
height: 9.4%;
|
width: 100%;
|
text-align: left;
|
border-bottom: 2px solid #937950;
|
background-color: #e9e1d4;
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
|
p {
|
height: 100%;
|
font-family: Alimama DongFangDaKai;
|
font-size: 30px;
|
text-indent: 1em;
|
border-bottom: 1px solid #937950;
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.page-main-father {
|
flex: 1;
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
padding-top: 2%;
|
padding-bottom: 2%;
|
}
|
|
.page-main-title {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
margin-bottom: 25px;
|
color: #9e9e9e;
|
margin-top: 1%;
|
|
p {
|
display: flex;
|
align-items: center;
|
padding: 15.5px 20px;
|
border-bottom: 2px solid #9e9e9e;
|
}
|
|
img {
|
width: 24px;
|
height: auto;
|
margin-right: 10px;
|
}
|
|
span {
|
font-family: Source Han Sans;
|
font-size: 24px;
|
font-weight: bold;
|
}
|
}
|
|
.active-tab {
|
color: #937950 !important;
|
border-bottom: 2px solid #937950 !important;
|
}
|
|
.page-main {
|
width: 77.3%;
|
min-height: 600px;
|
margin: 0 auto;
|
overflow: hidden;
|
margin-bottom: 100px;
|
padding-top: 50px;
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
|
tr {
|
width: 100%;
|
background-color: #fff;
|
background-clip: padding-box;
|
border-bottom: 2px solid transparent;
|
|
}
|
|
th {
|
font-family: Source Han Serif CN;
|
font-size: 14px;
|
font-weight: bold;
|
padding: 4px 41px;
|
text-wrap: nowrap;
|
}
|
|
td {
|
font-family: Source Han Serif CN;
|
font-size: 14px;
|
padding: 6px 41px;
|
text-align: center;
|
display: table-cell;
|
vertical-align: middle;
|
}
|
|
td:nth-child(1) {
|
text-wrap: nowrap;
|
}
|
|
tr:last-child td {
|
border-bottom: none;
|
/* 移除最后一行的下边框 */
|
}
|
}
|
|
.charts-main {
|
// background-color: #000;
|
position: relative;
|
}
|
|
.table-title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px 28px;
|
background-color: #d8cbb6;
|
margin-bottom: 4px;
|
margin-top: 2px;
|
|
.table-title-left {
|
display: flex;
|
align-items: center;
|
}
|
|
.table-title-name {
|
width: 200px;
|
overflow: hidden;
|
font-family: Source Han Serif CN;
|
font-size: 18px;
|
font-weight: bold;
|
}
|
|
.table-title-degree {
|
font-family: Source Han Serif CN;
|
font-size: 14px;
|
font-weight: bold;
|
margin-right: 40px;
|
}
|
|
.table-title-number {
|
font-family: Source Han Serif CN;
|
font-size: 14px;
|
font-weight: bold;
|
}
|
|
.table-title-right {
|
cursor: pointer;
|
}
|
|
img {
|
width: 20px;
|
height: auto;
|
}
|
}
|
|
.tooltipBox {
|
max-height: 500px;
|
max-width: 500px;
|
background-color: #fdf8f0;
|
position: absolute;
|
right: 40px;
|
top: 12vh;
|
}
|
|
.closeBtn {
|
position: absolute;
|
top: 10px;
|
right: 0;
|
cursor: pointer;
|
}
|
|
.legend {
|
position: absolute;
|
bottom: 300px;
|
left: 100px;
|
}
|
|
.tagItem {
|
display: flex;
|
margin-top: 20px;
|
}
|
|
.tagColor {
|
width: 20px;
|
height: 20px;
|
}
|
|
.tagText {
|
margin-left: 30px;
|
}
|
</style>
|
