<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'"
|
v-loading="loading"
|
element-loading-text="图表加载中"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0)"
|
>
|
<div class="radial-tree-container" v-show="!loading">
|
<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>
|
{{
|
currentNodeInfo.gender == "male" ? "男" : "女" || "-"
|
}}
|
</span>
|
<span> {{ currentNodeInfo.academicName || "-"}} </span>
|
<span> {{ legendList.find((item) => item.value == currentNodeInfo.unit)?.name ||
|
"-" }} </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">学习时间：{{ currentNodeInfo.studyTime || "-" }}</p>
|
<p style="margin-bottom: 15px">
|
现工作单位： {{currentNodeInfo.currentEmployer_secondary || '-' }}
|
</p>
|
<p style="margin-bottom: 15px">职务：{{ currentNodeInfo.jobTitle || "-" }}</p>
|
<p style="margin-bottom: 15px">职称：{{ currentNodeInfo.professionalTitle || "-" }}</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" style="min-height: 550px;" element-loading-background="rgba(0, 0, 0, 0)" element-loading-text="学生列表加载中"
|
element-loading-spinner="el-icon-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: {},
|
currentNodeInfo: {},
|
tooltipShow: false,
|
legendList: [
|
{
|
color: "#87A7B9",
|
name: "北京中医大学",
|
value: "BUCM",
|
},
|
{
|
color: "#C48787",
|
name: "北京师范大学",
|
value: "BNU",
|
},
|
{
|
color: "#6F8F5A",
|
name: "中国中医科学院",
|
value: "CACMS",
|
},
|
{
|
color: "#937950",
|
name: "广州中医药大学",
|
value: "GZUCM",
|
},
|
{
|
color: "#8D77B3",
|
name: "拜师弟子",
|
value: "disciple",
|
},
|
],
|
loading: false,
|
};
|
},
|
|
mounted() {
|
this.initChart();
|
window.addEventListener("resize", this.handleResize);
|
this.getSelectData();
|
this.getStudentList();
|
},
|
beforeDestroy() {
|
// window.removeEventListener("resize", this.handleResize);
|
if (this.chart) {
|
this.chart.dispose();
|
}
|
},
|
methods: {
|
changeTab(key) {
|
this.activeTabs = key;
|
console.log(this.activeTabs, "activeTabs");
|
},
|
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;
|
console.log(data, "data");
|
if (data.cmsItemType == "student") {
|
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> ${
|
data.gender == "male" ? "男" : "女" || "-"
|
} </span> <span> ${data.academicName || "-"} </span> <span> ${
|
this.legendList.find((item) => item.value == data.unit)?.name ||
|
"-"
|
} </span></div>
|
<div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;text-align: left;margin-top: 10px;overflow: hidden;">
|
<p style="margin-bottom: 5px;">学习时间：${
|
data.studyTime || "-"
|
}</p>
|
<p style="margin-bottom: 5px; white-space: pre-wrap" >现工作单位：${
|
data.currentEmployer_secondary || "-"
|
}</p>
|
<p style="margin-bottom: 5px;">职务：${
|
data.jobTitle || "-"
|
}</p>
|
<p style="margin-bottom: 5px;">职称：${
|
data.professionalTitle || "-"
|
}</p>
|
</div>
|
|
</div>
|
`;
|
} else {
|
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> ${data.academicDegreeValue} </span> <span> ${
|
data.academicDegreeName
|
} </span></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.academicDegreeList, "this.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,
|
name: item.name,
|
unitValue: item.value,
|
academicDegreeName: citem.name,
|
academicDegreeValue: citem.value,
|
isShow: false,
|
studentList: [],
|
itemStyle: {
|
color:
|
this.legendList.find(
|
(legendItem) => legendItem.value === item.value
|
)?.color || "#000000",
|
},
|
children: [],
|
});
|
});
|
});
|
this.loading = false;
|
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
|
) {
|
item.academicName = this.academicDegreeList.find(
|
(f) => f.value == item.academicDegree
|
)?.name;
|
citem.studentList.push(item);
|
citem.children.push(item);
|
}
|
});
|
});
|
arrList = arrList.filter((item) => item.studentList.length);
|
console.log(arrList, "arrList");
|
this.universityList = arrList;
|
// this.chartData.children = arrList;
|
const temp_chartData = {
|
name: "",
|
children: arrList,
|
};
|
this.chartData = temp_chartData;
|
|
console.log(this.chartData, "this.chartData");
|
this.initChart();
|
|
|
}
|
})
|
.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;
|
margin: 0 auto;
|
min-height: 600px;
|
}
|
|
.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;
|
}
|
::v-deep .el-loading-spinner {
|
color: #937950 !important;
|
}
|
|
::v-deep .el-loading-spinner .el-loading-text {
|
font-size: 14px;
|
color: #937950;
|
}
|
</style>
|
