| | |
| | | <div v-for="(item, index) in universityList" :key="index"> |
| | | <div |
| | | class="table-title" |
| | | v-if="item.studentList && item.studentList.length > 0"> |
| | | 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"> |
| | | @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" |
| | | <div |
| | | v-if="item.agreelist && item.agreelist.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.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-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, |
| | |
| | | backgroundColor: "#FDF8F0", |
| | | formatter: (params) => { |
| | | const data = params.data; |
| | | this.currentNodeInfo = data; |
| | | // this.currentNodeInfo = data; |
| | | // console.log(data, "data"); |
| | | if (data.cmsItemType == "student") { |
| | | return ` |
| | |
| | | |
| | | </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.academicDegreeName || "-"} </span></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.academicDegreeName || "-"} </span></div> |
| | | |
| | | // </div> |
| | | // `; |
| | | // } |
| | | }, |
| | | }, |
| | | textStyle: { |
| | |
| | | }, |
| | | |
| | | label: { |
| | | position: "top", //标签的位置。 |
| | | // position: "left", //标签的位置。 |
| | | verticalAlign: "middle", //文字垂直对齐方式,默认自动。 |
| | | fontSize: 12, //文字的字体大小 |
| | | color: "#bc1c00", |
| | | // color: "#bc1c00", |
| | | }, |
| | | // leaves: { |
| | | // symbol: "emptyCircle", |
| | |
| | | // }, |
| | | expandAndCollapse: false, |
| | | lineStyle: { |
| | | color: "#bc1c00", |
| | | width: 1, |
| | | }, |
| | | itemStyle: { |
| | |
| | | this.chart.setOption(option); |
| | | this.chart.on("click", (params) => { |
| | | // console.log("点击时的回调", params); |
| | | console.log(params, "params"); |
| | | if (params.data?.cmsItemType && params.data?.cmsItemType == "student") { |
| | | this.tooltipShow = true; |
| | | this.currentNodeInfo = params.data; |
| | | } |
| | | }); |
| | | }, |
| | | handleResize() { |
| | |
| | | }) |
| | | .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({ |
| | |
| | | this.legendList.find( |
| | | (legendItem) => legendItem.value === item.value |
| | | )?.color || "#000000", |
| | | }, |
| | | }, |
| | | children: [], |
| | | }); |
| | | }); |
| | | }); |
| | | this.loading = false; |
| | | console.log(res, "res"); |
| | | console.log(arrList, "arrList"); |
| | | if (res.datas && res.datas.length) { |
| | | res.datas.forEach((item) => { |
| | | arrList.forEach((citem) => { |
| | |
| | | (f) => f.value == item.academicDegree |
| | | )?.name; |
| | | citem.studentList.push(item); |
| | | item['itemStyle'] = citem.itemStyle; |
| | | citem.children.push(item); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | 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: "王永炎", |
| | | children: arrList, |
| | | }; |
| | | this.chartData = temp_chartData; |
| | | |
| | | // console.log(this.chartData, "this.chartData"); |
| | | this.initChart(); |
| | | this.loading = false; |
| | | } |
| | | }) |
| | | .catch((error) => { |
| | |
| | | overflow: hidden; |
| | | margin-bottom: 100px; |
| | | padding-top: 50px; |
| | | |
| | | table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | |
| | | background-color: #fff; |
| | | background-clip: padding-box; |
| | | border-bottom: 2px solid transparent; |
| | | line-height: 20px; |
| | | } |
| | | |
| | | th { |
| | |
| | | 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; |
| | | } |
| | | } |
| | | |
| | |
| | | .tagText { |
| | | margin-left: 30px; |
| | | } |
| | | |
| | | ::v-deep .el-loading-spinner { |
| | | color: #937950 !important; |
| | | } |