From 5e73d562bae941a7658c3c13fdb585461f1a24e4 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期一, 28 四月 2025 21:21:07 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase --- src/views/directory/index.vue | 301 +++++++++++++++++++++++++++++++++----------------- 1 files changed, 199 insertions(+), 102 deletions(-) diff --git a/src/views/directory/index.vue b/src/views/directory/index.vue index b056e02..7af5d22 100644 --- a/src/views/directory/index.vue +++ b/src/views/directory/index.vue @@ -28,7 +28,7 @@ <!-- 鍥捐〃鏄剧ず --> <div class="charts-main" - v-if="activeTabs == 'chart'" + v-show="activeTabs == 'chart'" v-loading="loading" element-loading-text="鍥捐〃鍔犺浇涓�" element-loading-spinner="el-icon-loading" @@ -134,7 +134,15 @@ 鑱岀О锛歿{ currentNodeInfo.professionalTitle || "-" }} </p> </div> - <div style="text-align: left; line-height: 22px;max-height:200px;overflow-y: auto; padding: 10px;" > + <div + style=" + text-align: left; + line-height: 22px; + max-height: 200px; + overflow-y: auto; + padding: 10px; + " + > <div v-html="currentNodeInfo.studentProfile"></div> </div> <!-- <div @@ -158,7 +166,7 @@ </transition> </div> <!-- 鍒楄〃鏄剧ず --> - <div class="page-main" v-if="activeTabs == 'list'"> + <div class="page-main" v-show="activeTabs == 'list'"> <div v-loading="loading" style="min-height: 550px" @@ -169,14 +177,10 @@ <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" @@ -185,50 +189,61 @@ <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> @@ -253,8 +268,8 @@ 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, @@ -307,7 +322,10 @@ methods: { changeTab(key) { this.activeTabs = key; - console.log(this.activeTabs, "activeTabs"); + // console.log(this.activeTabs, "activeTabs"); + if (key == "chart") { + this.initChart(); + } }, initChart() { this.chart = echarts.init(this.$refs.chart); @@ -318,8 +336,8 @@ backgroundColor: "#FDF8F0", formatter: (params) => { const data = params.data; - this.currentNodeInfo = data; - console.log(data, "data"); + // this.currentNodeInfo = data; + // console.log(data, "data"); if (data.cmsItemType == "student") { return ` <div style=" @@ -363,27 +381,27 @@ </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: { @@ -410,10 +428,10 @@ }, label: { - position: "top", //鏍囩鐨勪綅缃�� + // position: "left", //鏍囩鐨勪綅缃�� verticalAlign: "middle", //鏂囧瓧鍨傜洿瀵归綈鏂瑰紡锛岄粯璁よ嚜鍔ㄣ�� fontSize: 12, //鏂囧瓧鐨勫瓧浣撳ぇ灏� - color: "#bc1c00", + // color: "#bc1c00", }, // leaves: { // symbol: "emptyCircle", @@ -423,7 +441,6 @@ // }, expandAndCollapse: false, lineStyle: { - color: "#bc1c00", width: 1, }, itemStyle: { @@ -441,8 +458,12 @@ this.chart.setOption(option); this.chart.on("click", (params) => { - console.log("鐐瑰嚮鏃剁殑鍥炶皟", params); + // console.log("鐐瑰嚮鏃剁殑鍥炶皟", params); + console.log(params, "params"); + if (params.data?.cmsItemType && params.data?.cmsItemType == "student") { this.tooltipShow = true; + this.currentNodeInfo = params.data; + } }); }, handleResize() { @@ -465,7 +486,6 @@ }; }); this.academicDegreeList = academicDegreeListResult.option; - console.log(this.academicDegreeList, "this.academicDegreeList"); } catch (error) { console.error("鑾峰彇涓嬫媺妗嗘暟鎹け璐�:", error); } @@ -477,7 +497,6 @@ return MG.store .getProductTypeField(requestData) .then((res) => { - console.log(res, "涓嬫媺妗嗘暟鎹�"); const selestList = JSON.parse(res[0].config); return selestList; }) @@ -516,6 +535,27 @@ }) .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涓簍rue锛屽惁鍒欎负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({ @@ -531,13 +571,11 @@ this.legendList.find( (legendItem) => legendItem.value === item.value )?.color || "#000000", - }, + }, children: [], }); }); }); - this.loading = false; - console.log(res, "res"); if (res.datas && res.datas.length) { res.datas.forEach((item) => { arrList.forEach((citem) => { @@ -549,22 +587,50 @@ (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锛屽垹闄greelist闀垮害涓�0鐨刬tem + schoolList = schoolList.filter((item) => { + // 鍏堣繃婊ゆ帀閭d簺studentList闀垮害涓�0鐨刢item + item.agreelist = item.agreelist.filter( + (citem) => citem.studentList.length > 0 + ); + // 鐒跺悗妫�鏌ヨ繃婊ゅ悗鐨刟greelist闀垮害鏄惁澶т簬0 + return item.agreelist.length > 0; + }); + + // 姝ゆ椂schoolList涓笉鍖呭惈agreelist闀垮害涓�0鐨刬tem + + 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; + this.chartData.children = arrList; const temp_chartData = { name: "鐜嬫案鐐�", children: arrList, }; this.chartData = temp_chartData; - - console.log(this.chartData, "this.chartData"); + // console.log(this.chartData, "this.chartData"); this.initChart(); + this.loading = false; } }) .catch((error) => { @@ -660,6 +726,7 @@ overflow: hidden; margin-bottom: 100px; padding-top: 50px; + table { width: 100%; border-collapse: collapse; @@ -670,6 +737,7 @@ background-color: #fff; background-clip: padding-box; border-bottom: 2px solid transparent; + line-height: 20px; } th { @@ -678,6 +746,7 @@ font-weight: bold; padding: 4px 41px; text-wrap: nowrap; + line-height: 30px; } td { @@ -687,10 +756,12 @@ 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 { @@ -711,9 +782,10 @@ 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; @@ -721,23 +793,11 @@ } .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; } @@ -746,8 +806,32 @@ } 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; } } @@ -786,6 +870,7 @@ .tagText { margin-left: 30px; } + ::v-deep .el-loading-spinner { color: #937950 !important; } @@ -794,4 +879,16 @@ font-size: 14px; color: #937950; } + +::v-deep .el-loading-spinner { + .el-loading-text { + font-size: 14px; + color: #937950; + } + + .el-icon-loading { + font-size: 14px; + color: #937950; + } +} </style> -- Gitblit v1.9.1