From f115edeb003327109dd185a204d1f996de21f051 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期二, 08 四月 2025 17:58:36 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase
---
src/views/directory/index.vue | 118 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 89 insertions(+), 29 deletions(-)
diff --git a/src/views/directory/index.vue b/src/views/directory/index.vue
index 9ff6048..42e4bd7 100644
--- a/src/views/directory/index.vue
+++ b/src/views/directory/index.vue
@@ -22,7 +22,16 @@
<!-- 鍥捐〃鏄剧ず -->
<div class="charts-main" v-if="activeTabs == 'chart'">
<div class="radial-tree-container">
- <div ref="chart" style="width: 100%; height: 600px"></div>
+ <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">
@@ -36,6 +45,10 @@
text-align: center;
"
>
+ <div class="closeBtn" @click="tooltipShow = false">
+ <i class="el-icon-close"></i>
+ </div>
+
<div style="display: flex">
<div
style="
@@ -111,7 +124,10 @@
<!-- 鍒楄〃鏄剧ず -->
<div class="page-main" v-if="activeTabs == 'list'">
<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"
+ v-if="item.studentList && item.studentList.length > 0"
+ >
<div class="table-title-left">
<p class="table-title-name">{{ item.name }}</p>
<p class="table-title-degree">{{ item.degree }}</p>
@@ -121,7 +137,10 @@
<img :src="[item.isShow ? topIcon : bottomIcon]" alt="" />
</div>
</div>
- <table cellpadding="100" v-if="item.studentList && item.studentList.length > 0 && item.isShow">
+ <table
+ cellpadding="100"
+ v-if="item.studentList && item.studentList.length > 0 && item.isShow"
+ >
<tr class="table-heading">
<th>濮撳悕</th>
<th>鎬у埆</th>
@@ -338,6 +357,28 @@
chartData: treeData,
currentNodeInfo: {},
tooltipShow: false,
+ legendList: [
+ {
+ color: "#87A7B9",
+ name: "鍖椾含涓尰澶у",
+ },
+ {
+ color: "#C48787",
+ name: "鍖椾含甯堣寖澶у",
+ },
+ {
+ color: "#6F8F5A",
+ name: "涓浗涓尰绉戝闄�",
+ },
+ {
+ color: "#937950",
+ name: "骞垮窞涓尰鑽ぇ瀛�",
+ },
+ {
+ color: "#8D77B3",
+ name: "鎷滃笀寮熷瓙",
+ },
+ ],
};
},
@@ -400,12 +441,12 @@
},
},
textStyle: {
- color: "#bc1c00" // 璁剧疆鏁翠綋瀛椾綋棰滆壊涓虹孩鑹�
+ color: "#bc1c00", // 璁剧疆鏁翠綋瀛椾綋棰滆壊涓虹孩鑹�
},
edgeLabel: {
normal: {
- color: "#bc1c00" // 璁剧疆绾挎潯鐨勯鑹蹭负绾㈣壊
- }
+ color: "#bc1c00", // 璁剧疆绾挎潯鐨勯鑹蹭负绾㈣壊
+ },
},
series: [
{
@@ -452,22 +493,10 @@
};
this.chart.setOption(option);
-
- this.chart.on(
- "showTip",
- debounce((event) => {
- console.log("鏄剧ず鏃剁殑鍥炶皟", event);
- this.tooltipShow = true;
- }, 500)
- );
-
- this.chart.on(
- "hideTip",
- debounce((event) => {
- console.log("闅愯棌鏃剁殑鍥炶皟", event);
- this.tooltipShow = false;
- }, 500)
- );
+ this.chart.on("click", (params) => {
+ console.log("鐐瑰嚮鏃剁殑鍥炶皟", params);
+ this.tooltipShow = true;
+ });
},
handleResize() {
if (this.chart) {
@@ -484,23 +513,31 @@
height: 100%;
box-sizing: border-box;
background-color: #e9e1d4;
- overflow: auto;
+ position: relative;
}
.page-header {
- height: 102px;
+ height: 9.4%;
width: 100%;
text-align: left;
- margin-bottom: 8px;
border-bottom: 2px solid #937950;
-
+ background-color: #e9e1d4;
+ position: sticky;
+ top: 0;
+ z-index: 100;
p {
- padding: 35px 0 34px 0;
+ padding: 2% 0 1.9% 0;
font-family: Alimama DongFangDaKai;
font-size: 30px;
text-indent: 1em;
border-bottom: 1px solid #937950;
}
+}
+
+.page-main-father {
+ height: calc(100% - 9.4%);
+ width: 100%;
+ overflow: auto;
}
.page-main-title {
@@ -510,6 +547,7 @@
cursor: pointer;
margin-bottom: 75px;
color: #9e9e9e;
+ margin-top: 1%;
p {
display: flex;
@@ -537,7 +575,7 @@
}
.page-main {
- width: 1313px;
+ width: 77.3%;
margin: 0 auto;
overflow: hidden;
margin-bottom: 100px;
@@ -627,7 +665,29 @@
max-width: 500px;
background-color: #fdf8f0;
position: absolute;
- bottom: -60px;
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>
--
Gitblit v1.9.1