From 6938616d7e67a8822569420f6bddd8754a63d574 Mon Sep 17 00:00:00 2001 From: 杨磊 <505174330@qq.com> Date: 星期一, 28 四月 2025 16:36:23 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase --- src/views/directory/index.vue | 187 +++++++++++++++++++--------------------------- 1 files changed, 79 insertions(+), 108 deletions(-) diff --git a/src/views/directory/index.vue b/src/views/directory/index.vue index b056e02..a953a4a 100644 --- a/src/views/directory/index.vue +++ b/src/views/directory/index.vue @@ -7,33 +7,18 @@ </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-if="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> @@ -48,49 +33,36 @@ </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 - ? currentNodeInfo.icon - : '@/assets/images/directory/touxiang.png' - " - alt="" - /> + "> + <img class="autoImg" :src="currentNodeInfo.icon + ? currentNodeInfo.icon + : '@/assets/images/directory/touxiang.png' + " 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"> @@ -111,15 +83,13 @@ </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> @@ -134,7 +104,13 @@ 鑱岀О锛歿{ 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,19 +134,11 @@ </transition> </div> <!-- 鍒楄〃鏄剧ず --> - <div class="page-main" v-if="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 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-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> @@ -178,20 +146,13 @@ {{ 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=" - item.studentList && item.studentList.length > 0 && item.isShow - " - style="vertical-align: middle" - > + <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> @@ -219,7 +180,7 @@ <td> {{ citem.professionalTitle === undefined || - citem.professionalTitle === "" + citem.professionalTitle === "" ? "-" : citem.professionalTitle }} @@ -307,7 +268,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); @@ -319,7 +283,7 @@ formatter: (params) => { const data = params.data; this.currentNodeInfo = data; - console.log(data, "data"); + // console.log(data, "data"); if (data.cmsItemType == "student") { return ` <div style=" @@ -331,34 +295,26 @@ 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 - ? data.icon - : require("@/assets/images/directory/touxiang.png") - }" alt=""> + <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> + } </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> - <p style="margin-bottom: 5px; white-space: pre-wrap" >鐜板伐浣滃崟浣嶏細${ - data.currentEmployer_secondary || "-" - }</p> - <p style="margin-bottom: 5px;">鑱屽姟锛�${ - data.jobTitle || "-" - }</p> - <p style="margin-bottom: 5px;">鑱岀О锛�${ - data.professionalTitle || "-" - }</p> + <p style="margin-bottom: 5px;">瀛︿範鏃堕棿锛�${data.studyTime || "-" + }</p> + <p style="margin-bottom: 5px; white-space: pre-wrap" >鐜板伐浣滃崟浣嶏細${data.currentEmployer_secondary || "-" + }</p> + <p style="margin-bottom: 5px;">鑱屽姟锛�${data.jobTitle || "-" + }</p> + <p style="margin-bottom: 5px;">鑱岀О锛�${data.professionalTitle || "-" + }</p> </div> </div> @@ -376,8 +332,7 @@ <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> @@ -441,7 +396,7 @@ this.chart.setOption(option); this.chart.on("click", (params) => { - console.log("鐐瑰嚮鏃剁殑鍥炶皟", params); + // console.log("鐐瑰嚮鏃剁殑鍥炶皟", params); this.tooltipShow = true; }); }, @@ -465,7 +420,6 @@ }; }); this.academicDegreeList = academicDegreeListResult.option; - console.log(this.academicDegreeList, "this.academicDegreeList"); } catch (error) { console.error("鑾峰彇涓嬫媺妗嗘暟鎹け璐�:", error); } @@ -477,7 +431,6 @@ return MG.store .getProductTypeField(requestData) .then((res) => { - console.log(res, "涓嬫媺妗嗘暟鎹�"); const selestList = JSON.parse(res[0].config); return selestList; }) @@ -516,6 +469,8 @@ }) .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({ @@ -536,8 +491,9 @@ }); }); }); - this.loading = false; + console.log(arrList, "arrList"); console.log(res, "res"); + if (res.datas && res.datas.length) { res.datas.forEach((item) => { arrList.forEach((citem) => { @@ -553,18 +509,19 @@ } }); }); + console.log(arrList, "鍘婚櫎arrList"); 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 +617,7 @@ overflow: hidden; margin-bottom: 100px; padding-top: 50px; + table { width: 100%; border-collapse: collapse; @@ -786,6 +744,7 @@ .tagText { margin-left: 30px; } + ::v-deep .el-loading-spinner { color: #937950 !important; } @@ -794,4 +753,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