| | |
| | | </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="" |
| | | /> |
| | | <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' : '']" |
| | | > |
| | | <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-show="activeTabs == 'chart'" |
| | | v-loading="loading" |
| | | element-loading-text="图表加载中" |
| | | element-loading-spinner="el-icon-loading" |
| | | element-loading-background="rgba(0, 0, 0, 0)" |
| | | > |
| | | <div class="charts-main" v-show="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> |
| | | <transition name="el-fade-in-linear"> |
| | | <div class="tooltipBox" v-show="tooltipShow"> |
| | | <div |
| | | style=" |
| | | <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=" |
| | | <div style=" |
| | | width: 80px; |
| | | height: 80px; |
| | | position: relative; |
| | | margin-bottom: 10px; |
| | | background: #d8d8d8; |
| | | " |
| | | > |
| | | <img |
| | | class="autoImg" |
| | | :src=" |
| | | currentNodeInfo.icon |
| | | "> |
| | | <img class="autoImg" :src="currentNodeInfo.icon |
| | | ? currentNodeInfo.icon |
| | | : '@/assets/images/directory/touxiang.png' |
| | | " |
| | | alt="" |
| | | /> |
| | | " alt="" /> |
| | | </div> |
| | | <div |
| | | style="padding-top: 20px; text-align: left; margin-left: 20px" |
| | | > |
| | | <div |
| | | style=" |
| | | <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"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div |
| | | style=" |
| | | <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> |
| | |
| | | 职称:{{ currentNodeInfo.professionalTitle || "-" }} |
| | | </p> |
| | | </div> |
| | | <div |
| | | style=" |
| | | <div style=" |
| | | text-align: left; |
| | | line-height: 22px; |
| | | max-height: 200px; |
| | | overflow-y: auto; |
| | | padding: 10px; |
| | | " |
| | | > |
| | | "> |
| | | <div v-html="currentNodeInfo.studentProfile"></div> |
| | | </div> |
| | | <!-- <div |
| | |
| | | </div> |
| | | <!-- 列表显示 --> |
| | | <div class="page-main" v-show="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-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" 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> |
| | |
| | | {{ item.studentList.length }}人 |
| | | </p> |
| | | </div> |
| | | <div |
| | | class="table-title-right" |
| | | @click="item.isShow = !item.isShow"> |
| | | <div class="table-title-right" @click="item.isShow = !item.isShow"> |
| | | <img :src="[item.isShow ? topIcon : bottomIcon]" alt="" /> |
| | | </div> |
| | | </div> |
| | | <table |
| | | cellpadding="100" |
| | | v-if=" |
| | | <table cellpadding="100" v-if=" |
| | | item.studentList && item.studentList.length > 0 && item.isShow |
| | | " |
| | | style="vertical-align: middle" |
| | | > |
| | | " style="vertical-align: middle"> |
| | | <tr class="table-heading"> |
| | | <th>姓名</th> |
| | | <th>性别</th> |
| | |
| | | text-align: center; |
| | | "> |
| | | <div style="width: 80px;height: 80px;position: relative; margin: 0 auto; margin-bottom: 10px;background: #D8D8D8;"> |
| | | <img class="autoImg" src="${ |
| | | data.icon |
| | | <img class="autoImg" src="${data.icon |
| | | ? data.icon |
| | | : require("@/assets/images/directory/touxiang.png") |
| | | }" alt=""> |
| | | </div> |
| | | <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">${ |
| | | data.name || "-" |
| | | <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 || |
| | | <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 style="margin-bottom: 5px;">学习时间:${data.studyTime || "-" |
| | | }</p> |
| | | <p style="margin-bottom: 5px; white-space: pre-wrap" >现工作单位:${ |
| | | data.currentEmployer_secondary || "-" |
| | | <p style="margin-bottom: 5px; white-space: pre-wrap" >现工作单位:${data.currentEmployer_secondary || "-" |
| | | }</p> |
| | | <p style="margin-bottom: 5px;">职务:${ |
| | | data.jobTitle || "-" |
| | | <p style="margin-bottom: 5px;">职务:${data.jobTitle || "-" |
| | | }</p> |
| | | <p style="margin-bottom: 5px;">职称:${ |
| | | data.professionalTitle || "-" |
| | | <p style="margin-bottom: 5px;">职称:${data.professionalTitle || "-" |
| | | }</p> |
| | | </div> |
| | | |
| | |
| | | <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 style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">${data.name |
| | | }</div> |
| | | <div> <span> ${data.academicDegreeName || "-"} </span></div> |
| | | |
| | |
| | | }) |
| | | .then((res) => { |
| | | let arrList = []; |
| | | console.log(this.unitList, "unitList"); |
| | | console.log(this.academicDegreeList, "this.academicDegreeList"); |
| | | this.unitList.forEach((item) => { |
| | | this.academicDegreeList.forEach((citem) => { |
| | | arrList.push({ |
| | |
| | | }); |
| | | }); |
| | | }); |
| | | this.loading = false; |
| | | console.log(res, "res"); |
| | | console.log(arrList, "arrList"); |
| | | console.log(res, "res"); |
| | | |
| | | if (res.datas && res.datas.length) { |
| | | res.datas.forEach((item) => { |
| | | arrList.forEach((citem) => { |
| | |
| | | } |
| | | }); |
| | | }); |
| | | console.log(arrList, "去除arrList"); |
| | | arrList = arrList.filter((item) => item.studentList.length); |
| | | |
| | | // console.log(arrList, "arrList"); |
| | | |
| | | console.log(arrList, "arrList"); |
| | | this.universityList = arrList; |
| | | this.chartData.children = arrList; |
| | | const temp_chartData = { |
| | |
| | | children: arrList, |
| | | }; |
| | | this.chartData = temp_chartData; |
| | | |
| | | // console.log(this.chartData, "this.chartData"); |
| | | this.initChart(); |
| | | this.loading = false; |
| | | } |
| | | }) |
| | | .catch((error) => { |
| | |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | font-family: Source Han Sans; |
| | | } |
| | | |
| | | .page-header { |
| | |
| | | overflow: hidden; |
| | | margin-bottom: 100px; |
| | | padding-top: 50px; |
| | | |
| | | table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | |
| | | .tagText { |
| | | margin-left: 30px; |
| | | } |
| | | |
| | | ::v-deep .el-loading-spinner { |
| | | color: #937950 !important; |
| | | } |