From b50a2e6d9385a88916fc43cddb18842e5036f565 Mon Sep 17 00:00:00 2001 From: 杨磊 <505174330@qq.com> Date: 星期四, 24 四月 2025 18:38:02 +0800 Subject: [PATCH] 图表 --- src/views/directory/index.vue | 550 +++++++++++++++++++++++++++++++------------------------ 1 files changed, 310 insertions(+), 240 deletions(-) diff --git a/src/views/directory/index.vue b/src/views/directory/index.vue index be35e5f..7671efa 100644 --- a/src/views/directory/index.vue +++ b/src/views/directory/index.vue @@ -1,7 +1,9 @@ <template> <div class="page"> <div class="page-header"> - <p>鐜嬫案鐐庨櫌澹鐢熺洰褰�</p> + <p> + <span>鐜嬫案鐐庨櫌澹鐢熺洰褰�</span> + </p> </div> <div class="page-main-father"> <div class="page-main-title"> @@ -24,8 +26,15 @@ </p> </div> <!-- 鍥捐〃鏄剧ず --> - <div class="charts-main" v-if="activeTabs == 'chart'"> - <div class="radial-tree-container"> + <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="radial-tree-container" v-show="!loading"> <div ref="chart" style="width: 100%; height: 70vh"></div> </div> @@ -81,8 +90,14 @@ {{ currentNodeInfo.name }} </div> <div style="margin-top: 20px"> - <span> 鐢� </span> <span> 纭曞+ </span> - <span> 鍖椾含涓尰鑽ぇ瀛� </span> + <span> + {{ + currentNodeInfo.gender == "male" ? "鐢�" : "濂�" || "-" + }} + </span> + <span> {{ currentNodeInfo.academicName || "-"}} </span> + <span> {{ legendList.find((item) => item.value == currentNodeInfo.unit)?.name || + "-" }} </span> </div> </div> </div> @@ -96,12 +111,12 @@ margin-top: 10px; " > - <p style="margin-bottom: 15px">瀛︿範鏃堕棿锛�1985.09 -1988.07</p> + <p style="margin-bottom: 15px">瀛︿範鏃堕棿锛歿{ currentNodeInfo.studyTime || "-" }}</p> <p style="margin-bottom: 15px"> - 鐜板伐浣滃崟浣嶏細鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰尰闄� + 鐜板伐浣滃崟浣嶏細 {{currentNodeInfo.currentEmployer_secondary || '-' }} </p> - <p style="margin-bottom: 15px">鑱屽姟锛氬師闄㈤暱</p> - <p style="margin-bottom: 15px">鑱岀О锛氫富浠诲尰甯堛�佹暀鎺�</p> + <p style="margin-bottom: 15px">鑱屽姟锛歿{ currentNodeInfo.jobTitle || "-" }}</p> + <p style="margin-bottom: 15px">鑱岀О锛歿{ currentNodeInfo.professionalTitle || "-" }}</p> </div> <div style="text-align: left; line-height: 22px"> <p> @@ -130,47 +145,68 @@ </div> <!-- 鍒楄〃鏄剧ず --> <div class="page-main" v-if="activeTabs == 'list'"> - <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-left"> - <p class="table-title-name">{{ item.name }}</p> - <p class="table-title-degree">{{ item.degree }}</p> - <p class="table-title-number">{{ item.studentList.length }}浜�</p> + <div v-loading="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-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> - <div class="table-title-right" @click="item.isShow = !item.isShow"> - <img :src="[item.isShow ? topIcon : bottomIcon]" alt="" /> - </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> - <table - cellpadding="100" - v-if=" - item.studentList && item.studentList.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.studentName }} - </td> - <td> - {{ citem.gender }} - </td> - <td>{{ citem.studyTime }}</td> - <td>{{ citem.workUnit }}</td> - <td>{{ citem.position }}</td> - <td>{{ citem.title }}</td> - </tr> - </table> </div> </div> </div> @@ -182,9 +218,16 @@ import axios from "axios"; import debounce from "lodash/debounce"; import treeData from "./treeData.json"; +import MG from "@/assets/js/middleGround/WebMiddleGroundApi.js"; +import { forEach } from "lodash"; +import { method } from "lodash"; export default { data() { return { + unitRefCode: "unit", + academicDegreeRefCode: "academicDegree", + unitList: [], + academicDegreeList: [], chartIcon: require("@/assets/images/directory/chartIcon.png"), noChartIcon: require("@/assets/images/directory/noChartIcon.png"), listIcon: require("@/assets/images/directory/listIcon.png"), @@ -192,211 +235,50 @@ topIcon: require("@/assets/images/directory/topIcon.png"), bottomIcon: require("@/assets/images/directory/bottomIcon.png"), activeTabs: "chart", - - universityList: [ - { - name: "鍖椾含涓尰鑽ぇ瀛�", - degree: "纭曞+", - isShow: "true", - studentList: [ - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - ], - }, - { - name: "鍖椾含涓尰鑽ぇ瀛�", - degree: "纭曞+", - isShow: "true", - studentList: [ - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - ], - }, - { - name: "鍖椾含涓尰鑽ぇ瀛�", - degree: "纭曞+", - isShow: "true", - studentList: [ - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - ], - }, - { - name: "鍖椾含涓尰鑽ぇ瀛�", - degree: "纭曞+", - isShow: "true", - studentList: [], - }, - { - name: "鍖椾含涓尰鑽ぇ瀛�", - degree: "纭曞+", - isShow: "true", - studentList: [ - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - ], - }, - { - name: "鍖椾含涓尰鑽ぇ瀛�", - degree: "纭曞+", - isShow: "true", - studentList: [], - }, - { - name: "鍖椾含涓尰鑽ぇ瀛�", - degree: "纭曞+", - isShow: "true", - studentList: [ - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - { - studentName: "鐜嬬帀鏉�", - gender: "鐢�", - studyTime: "1985.09-1988.07", - workUnit: "鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰闄�", - position: "鍘熼櫌闀�", - title: "涓讳换鍖诲笀銆佹暀鎺�", - }, - ], - }, - ], + universityList: [], chart: null, - chartData: treeData, + chartData: {}, currentNodeInfo: {}, tooltipShow: false, legendList: [ { color: "#87A7B9", name: "鍖椾含涓尰澶у", + value: "BUCM", }, { color: "#C48787", name: "鍖椾含甯堣寖澶у", + value: "BNU", }, { color: "#6F8F5A", name: "涓浗涓尰绉戝闄�", + value: "CACMS", }, { color: "#937950", name: "骞垮窞涓尰鑽ぇ瀛�", + value: "GZUCM", }, { color: "#8D77B3", name: "鎷滃笀寮熷瓙", + value: "disciple", }, ], + loading: false, }; }, mounted() { this.initChart(); window.addEventListener("resize", this.handleResize); + this.getSelectData(); + this.getStudentList(); }, beforeDestroy() { - window.removeEventListener("resize", this.handleResize); + // window.removeEventListener("resize", this.handleResize); if (this.chart) { this.chart.dispose(); } @@ -405,12 +287,6 @@ changeTab(key) { this.activeTabs = key; console.log(this.activeTabs, "activeTabs"); - if (key == "chart") { - this.$nextTick(() => { - this.initChart(); - window.addEventListener("resize", this.handleResize); - }); - } }, initChart() { this.chart = echarts.init(this.$refs.chart); @@ -422,7 +298,48 @@ formatter: (params) => { const data = params.data; this.currentNodeInfo = data; - return ` + console.log(data, "data"); + if (data.cmsItemType == "student") { + 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.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> + <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> + `; + } else { + return ` <div style=" padding: 10px; background: #FDF8F0; @@ -437,16 +354,13 @@ <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">${ data.name }</div> - <div> <span> 鐢� </span> <span> 纭曞+ </span> <span> 鍖椾含涓尰鑽ぇ瀛� </span></div> - <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;text-align: left;margin-top: 10px;"> - <p style="margin-bottom: 5px;">瀛︿範鏃堕棿锛�1985.09 -1988.07</p> - <p style="margin-bottom: 5px;">鐜板伐浣滃崟浣嶏細鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰尰闄�</p> - <p style="margin-bottom: 5px;">鑱屽姟锛氬師闄㈤暱</p> - <p style="margin-bottom: 5px;">鑱岀О锛氫富浠诲尰甯堛�佹暀鎺�</p> - </div> - + <div> <span> ${data.academicDegreeValue} </span> <span> ${ + data.academicDegreeName + } </span></div> + </div> `; + } }, }, textStyle: { @@ -513,6 +427,128 @@ this.chart.resize(); } }, + //鑾峰彇涓嬫媺閫夋嫨妗嗙殑鍐呭 + async getSelectData() { + try { + // 鍚屾椂鍙戣捣涓や釜寮傛璇锋眰锛屽苟绛夊緟瀹冧滑鐨勭粨鏋� + const [unitListResult, academicDegreeListResult] = await Promise.all([ + this.getSelectContent(this.unitRefCode), + this.getSelectContent(this.academicDegreeRefCode), + ]); + this.unitList = unitListResult.option.map((item) => { + return { + ...item, + studentList: [], // 璁剧疆鑷畾涔夊瓧娈电殑榛樿鍊� + }; + }); + this.academicDegreeList = academicDegreeListResult.option; + console.log(this.academicDegreeList, "this.academicDegreeList"); + } catch (error) { + console.error("鑾峰彇涓嬫媺妗嗘暟鎹け璐�:", error); + } + }, + + //鑾峰彇閫夋嫨鍐呭 + getSelectContent(refCode) { + let requestData = { refCodes: [refCode] }; + return MG.store + .getProductTypeField(requestData) + .then((res) => { + console.log(res, "涓嬫媺妗嗘暟鎹�"); + const selestList = JSON.parse(res[0].config); + return selestList; + }) + .catch((error) => { + console.error("鑾峰彇鑽h獕澶辫触:", error); + return null; + }); + }, + + // 鑾峰彇鍒楄〃鏄剧ず + getStudentList() { + this.loading = true; + MG.resource + .getItem({ + path: "WYY_student", + fields: { + // 鎬у埆 + gender: "", + //瀛︿範鏃堕棿 + studyTime: [], + // 鍗曚綅 + unit: [], + // 鐜板伐浣滃崟浣嶏紙鍒颁簩绾у崟浣嶅叏绉帮級 + currentEmployer_secondary: "", + //鑱屽姟 + jobTitle: "", + professionalTitle: "", + //瀛︿綅 + academicDegree: "", + // 瀛︾敓绠�浠� + studentProfile: "", + }, + paging: { + size: 99999, + }, + }) + .then((res) => { + let arrList = []; + this.unitList.forEach((item) => { + this.academicDegreeList.forEach((citem) => { + arrList.push({ + unitName: item.name, + name: item.name, + unitValue: item.value, + academicDegreeName: citem.name, + academicDegreeValue: citem.value, + isShow: false, + studentList: [], + itemStyle: { + color: + this.legendList.find( + (legendItem) => legendItem.value === item.value + )?.color || "#000000", + }, + children: [], + }); + }); + }); + console.log(res, "res"); + if (res.datas && res.datas.length) { + res.datas.forEach((item) => { + arrList.forEach((citem) => { + if ( + item.unit == citem.unitValue && + item.academicDegree == citem.academicDegreeValue + ) { + item.academicName = this.academicDegreeList.find( + (f) => f.value == item.academicDegree + )?.name; + citem.studentList.push(item); + citem.children.push(item); + } + }); + }); + 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) => { + console.error("鑾峰彇鑽h獕澶辫触:", error); + }); + }, }, }; </script> @@ -525,9 +561,12 @@ background-color: #e9e1d4; position: relative; overflow: hidden; + display: flex; + flex-direction: column; } .page-header { + padding: 8px 0; height: 9.4%; width: 100%; text-align: left; @@ -535,20 +574,26 @@ background-color: #e9e1d4; position: sticky; top: 0; - z-index: 10; + z-index: 100; + p { - padding: 1.6% 0 1.55% 0; + height: 100%; font-family: Alimama DongFangDaKai; font-size: 30px; text-indent: 1em; border-bottom: 1px solid #937950; + display: flex; + align-items: center; } } .page-main-father { - height: calc(100% - 9.4%); + flex: 1; width: 100%; + height: 100%; overflow: auto; + padding-top: 2%; + padding-bottom: 2%; } .page-main-title { @@ -556,7 +601,7 @@ align-items: center; justify-content: center; cursor: pointer; - margin-bottom: 75px; + margin-bottom: 25px; color: #9e9e9e; margin-top: 1%; @@ -587,16 +632,18 @@ .page-main { width: 77.3%; + min-height: 600px; margin: 0 auto; overflow: hidden; margin-bottom: 100px; - + padding-top: 50px; table { width: 100%; border-collapse: collapse; } tr { + width: 100%; background-color: #fff; background-clip: padding-box; border-bottom: 2px solid transparent; @@ -607,6 +654,7 @@ font-size: 14px; font-weight: bold; padding: 4px 41px; + text-wrap: nowrap; } td { @@ -614,6 +662,12 @@ font-size: 14px; padding: 6px 41px; text-align: center; + display: table-cell; + vertical-align: middle; + } + + td:nth-child(1) { + text-wrap: nowrap; } tr:last-child td { @@ -625,6 +679,8 @@ .charts-main { // background-color: #000; position: relative; + margin: 0 auto; + min-height: 600px; } .table-title { @@ -671,6 +727,7 @@ height: auto; } } + .tooltipBox { max-height: 500px; max-width: 500px; @@ -679,26 +736,39 @@ right: 40px; top: 12vh; } + .closeBtn { position: absolute; top: 10px; right: 0; cursor: pointer; } + .legend { position: absolute; bottom: 300px; left: 100px; } + .tagItem { display: flex; margin-top: 20px; } + .tagColor { width: 20px; height: 20px; } + .tagText { margin-left: 30px; } +::v-deep .el-loading-spinner { + color: #937950 !important; +} + +::v-deep .el-loading-spinner .el-loading-text { + font-size: 14px; + color: #937950; +} </style> -- Gitblit v1.9.1