| | |
| | | <div class="page-header"> |
| | | <p>王永炎院士学生目录</p> |
| | | </div> |
| | | <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 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 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> |
| | | </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> |
| | | <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="display: flex"> |
| | | <div |
| | | style=" |
| | | width: 80px; |
| | | height: 80px; |
| | | position: relative; |
| | | margin-bottom: 10px; |
| | | background: #d8d8d8; |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | margin-bottom: 5px; |
| | | text-align: left; |
| | | margin-top: 10px; |
| | | " |
| | | > |
| | | <img |
| | | class="autoImg" |
| | | src="@/assets/images/directory/touxiang.png" |
| | | alt="" |
| | | /> |
| | | <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="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"> |
| | | <div style="text-align: left; line-height: 22px"> |
| | | <p> |
| | | 观夫明堂之宏壮也,则突兀瞳曨,乍明乍蒙,若大古元气之结空。巃嵸颓沓,若嵬若嶪,似天阃地门之开阖。尔乃划岝峉以岳立,郁穹崇而鸿纷。冠百王而垂勋,烛万象而腾文。窙惚恍以洞启,呼嵌岩而傍分。又比乎昆山之天柱,矗九霄而垂云。 |
| | | 大弦嘈嘈如急雨,小弦切切如私语。嘈嘈切切错杂弹,大珠小珠落玉盘。间关莺语花底滑,幽咽泉流冰下难。冰泉冷涩弦凝绝,凝绝不通声暂歇。别有幽愁暗恨生,此时无声胜有声。银瓶乍破水浆迸,铁骑突出刀枪鸣。曲终收拨当心画,四弦一声如裂帛。东船西舫悄无言,唯见江心秋月白。 |
| | | </p> |
| | | </div> |
| | | <div> |
| | | <img src="@/assets/images/directory/test.png" alt="" /> |
| | | <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> |
| | | </div> |
| | | </transition> |
| | | </div> |
| | | <!-- 列表显示 --> |
| | | <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-left"> |
| | | <p class="table-title-name">{{ item.name }}</p> |
| | | <p class="table-title-degree">{{ item.degree }}</p> |
| | | <p class="table-title-number">{{ item.studentList.length }}人</p> |
| | | </transition> |
| | | </div> |
| | | <!-- 列表显示 --> |
| | | <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-left"> |
| | | <p class="table-title-name">{{ item.name }}</p> |
| | | <p class="table-title-degree">{{ item.degree }}</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> |
| | | <div class="table-title-right" @click="item.isShow = !item.isShow"> |
| | | <img :src="[item.isShow ? topIcon : bottomIcon]" alt="" /> |
| | | </div> |
| | | <table |
| | | cellpadding="100" |
| | | v-if=" |
| | | item.studentList && item.studentList.length > 0 && item.isShow |
| | | " |
| | | > |
| | | <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.studentName }} |
| | | </td> |
| | | <td> |
| | | {{ citem.gender }} |
| | | </td> |
| | | <td>{{ citem.studyTime }}</td> |
| | | <td>{{ citem.workUnit }}</td> |
| | | <td>{{ citem.position }}</td> |
| | | <td>{{ citem.title }}</td> |
| | | </tr> |
| | | </table> |
| | | </div> |
| | | <table |
| | | cellpadding="100" |
| | | v-if="item.studentList && item.studentList.length > 0 && item.isShow" |
| | | > |
| | | <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.studentName }} |
| | | </td> |
| | | <td> |
| | | {{ citem.gender }} |
| | | </td> |
| | | <td>{{ citem.studyTime }}</td> |
| | | <td>{{ citem.workUnit }}</td> |
| | | <td>{{ citem.position }}</td> |
| | | <td>{{ citem.title }}</td> |
| | | </tr> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <script> |
| | | import * as echarts from "echarts"; |
| | | import axios from "axios"; |
| | | |
| | | import debounce from "lodash/debounce"; |
| | | import treeData from "./treeData.json"; |
| | | export default { |
| | |
| | | box-sizing: border-box; |
| | | background-color: #e9e1d4; |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .page-header { |
| | |
| | | background-color: #e9e1d4; |
| | | position: sticky; |
| | | top: 0; |
| | | z-index: 100; |
| | | z-index: 10; |
| | | p { |
| | | padding: 2% 0 1.9% 0; |
| | | padding: 1.6% 0 1.55% 0; |
| | | font-family: Alimama DongFangDaKai; |
| | | font-size: 30px; |
| | | text-indent: 1em; |