| | |
| | | background: #d8d8d8; |
| | | "> |
| | | <img class="autoImg" :src="currentNodeInfo.icon |
| | | ? currentNodeInfo.icon |
| | | : '@/assets/images/directory/touxiang.png' |
| | | ? currentNodeInfo.icon |
| | | : '@/assets/images/directory/touxiang.png' |
| | | " alt="" /> |
| | | </div> |
| | | <div style="padding-top: 20px; text-align: left; margin-left: 20px"> |
| | |
| | | <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.agreelist && item.agreelist.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 v-if="item.agreelist && item.agreelist.length > 0 && item.isShow"> |
| | | <div v-for="(citem, cindex) in item.agreelist" :key="cindex"> |
| | | <div class="agree-title"> |
| | | <p class="table-title-degree">{{ citem.academicDegreeName }}</p> |
| | | <p class="table-title-number"> |
| | | {{ citem.studentList.length }}人 |
| | | </p> |
| | | </div> |
| | | <table cellpadding="100" style="vertical-align: middle"> |
| | | <tr class="table-header"> |
| | | <th>姓名</th> |
| | | <th>性别</th> |
| | | <th>学习时间</th> |
| | | <th>工作单位(到二级单位全称)</th> |
| | | <th>职务</th> |
| | | <th>职称</th> |
| | | </tr> |
| | | <tr v-for="(ditem, dindex) in citem.studentList" :key="dindex"> |
| | | <td> |
| | | {{ ditem.name }} |
| | | </td> |
| | | <td> |
| | | {{ ditem.gender == "male" ? "男" : "女" }} |
| | | </td> |
| | | <td>{{ ditem.studyTime }}</td> |
| | | <td>{{ ditem.currentEmployer_secondary }}</td> |
| | | <td> |
| | | {{ |
| | | ditem.jobTitle === undefined || ditem.jobTitle === "" |
| | | ? "-" |
| | | : ditem.jobTitle |
| | | }} |
| | | </td> |
| | | <td> |
| | | {{ |
| | | ditem.professionalTitle === undefined || |
| | | ditem.professionalTitle === "" |
| | | ? "-" |
| | | : ditem.professionalTitle |
| | | }} |
| | | </td> |
| | | </tr> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- <el-empty v-if="!resultList.length"></el-empty> --> |
| | | <!-- <el-empty v-if="!loading && !universityList.length"></el-empty> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | 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"), |
| | | topIcon: require("@/assets/images/directory/topIcon.svg"), |
| | | bottomIcon: require("@/assets/images/directory/bottomIcon.svg"), |
| | | activeTabs: "chart", |
| | | universityList: [], |
| | | chart: null, |
| | |
| | | position: "top", //标签的位置。 |
| | | verticalAlign: "middle", //文字垂直对齐方式,默认自动。 |
| | | fontSize: 12, //文字的字体大小 |
| | | color: "#bc1c00", |
| | | // color: "#bc1c00", |
| | | }, |
| | | // leaves: { |
| | | // symbol: "emptyCircle", |
| | |
| | | // }, |
| | | expandAndCollapse: false, |
| | | lineStyle: { |
| | | color: "#bc1c00", |
| | | // color: "#bc1c00", |
| | | width: 1, |
| | | }, |
| | | itemStyle: { |
| | |
| | | }) |
| | | .then((res) => { |
| | | let arrList = []; |
| | | let schoolList = []; |
| | | console.log(this.unitList, "unitList"); |
| | | console.log(this.academicDegreeList, "this.academicDegreeList"); |
| | | this.unitList.forEach((item, index) => { |
| | | schoolList.push({ |
| | | unitName: item.name, |
| | | unitValue: item.value, |
| | | isShow: index === 0, // 如果是第一个元素(index为0),则isShow为true,否则为false |
| | | agreelist: [], |
| | | }); |
| | | }); |
| | | this.academicDegreeList.forEach((item) => { |
| | | schoolList.forEach((citem) => { |
| | | citem.agreelist.push({ |
| | | academicDegreeName: item.name, |
| | | academicDegreeValue: item.value, |
| | | studentList: [], |
| | | }); |
| | | }); |
| | | }) |
| | | console.log(schoolList, "schoolList"); |
| | | this.unitList.forEach((item) => { |
| | | this.academicDegreeList.forEach((citem) => { |
| | | arrList.push({ |
| | |
| | | }); |
| | | }); |
| | | }); |
| | | 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"); |
| | | |
| | | res.datas.forEach((item) => { |
| | | schoolList.forEach((citem) => { |
| | | citem.agreelist.forEach((ditem) => { |
| | | if (item.unit == citem.unitValue && item.academicDegree == ditem.academicDegreeValue) { |
| | | ditem.studentList.push(item); |
| | | } |
| | | }); |
| | | }); |
| | | }); |
| | | console.log(schoolList, "schoolList"); |
| | | |
| | | // 使用filter方法过滤schoolList,删除agreelist长度为0的item |
| | | schoolList = schoolList.filter((item) => { |
| | | // 先过滤掉那些studentList长度为0的citem |
| | | item.agreelist = item.agreelist.filter((citem) => citem.studentList.length > 0); |
| | | // 然后检查过滤后的agreelist长度是否大于0 |
| | | return item.agreelist.length > 0; |
| | | }); |
| | | |
| | | // 此时schoolList中不包含agreelist长度为0的item |
| | | |
| | | console.log(schoolList, "处理好的schoolList"); |
| | | this.universityList = schoolList; |
| | | arrList = arrList.filter((item) => item.studentList.length); |
| | | console.log(arrList, "arrList"); |
| | | this.universityList = arrList; |
| | | this.chartData.children = arrList; |
| | | const temp_chartData = { |
| | | name: "王永炎", |
| | |
| | | background-color: #fff; |
| | | background-clip: padding-box; |
| | | border-bottom: 2px solid transparent; |
| | | line-height: 20px; |
| | | } |
| | | |
| | | |
| | | th { |
| | | font-family: Source Han Serif CN; |
| | |
| | | font-weight: bold; |
| | | padding: 4px 41px; |
| | | text-wrap: nowrap; |
| | | line-height: 30px; |
| | | } |
| | | |
| | | td { |
| | |
| | | text-align: center; |
| | | display: table-cell; |
| | | vertical-align: middle; |
| | | line-height: 20px; |
| | | } |
| | | |
| | | td:nth-child(1) { |
| | | text-wrap: nowrap; |
| | | line-height: 20px; |
| | | } |
| | | |
| | | tr:last-child td { |
| | |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 10px 28px; |
| | | background-color: #d8cbb6; |
| | | background-color: #937950; |
| | | margin-bottom: 4px; |
| | | margin-top: 2px; |
| | | line-height: 35px; |
| | | |
| | | |
| | | .table-title-left { |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | .table-title-name { |
| | | color: #fff; |
| | | 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; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | img { |
| | | display: flex; |
| | | align-items: center; |
| | | width: 20px; |
| | | height: auto; |
| | | } |
| | | } |
| | | |
| | | |
| | | .agree-title { |
| | | display: flex; |
| | | line-height: 45px; |
| | | background-color: #d8cbb6; |
| | | margin-bottom: 4px; |
| | | margin-top: 2px; |
| | | |
| | | .table-title-degree { |
| | | font-family: Source Han Serif CN; |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | margin-right: 40px; |
| | | margin-left: 50px; |
| | | } |
| | | |
| | | .table-title-number { |
| | | font-family: Source Han Serif CN; |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | } |
| | | } |
| | | |
| | |
| | | color: #937950; |
| | | } |
| | | |
| | | .el-icon-loading{ |
| | | .el-icon-loading { |
| | | font-size: 14px; |
| | | color: #937950; |
| | | } |