From 35a0ab2182b812e57af749e438fc505bafd29133 Mon Sep 17 00:00:00 2001 From: 杨磊 <505174330@qq.com> Date: 星期二, 22 四月 2025 17:58:58 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase --- src/views/directory/index.vue | 499 +++++++++++++++++++++---------------------------------- 1 files changed, 192 insertions(+), 307 deletions(-) diff --git a/src/views/directory/index.vue b/src/views/directory/index.vue index a9d3cf1..87150c5 100644 --- a/src/views/directory/index.vue +++ b/src/views/directory/index.vue @@ -1,24 +1,17 @@ <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"> - <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> @@ -39,45 +32,33 @@ </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="@/assets/images/directory/touxiang.png" - alt="" - /> + "> + <img class="autoImg" src="@/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"> @@ -87,15 +68,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">瀛︿範鏃堕棿锛�1985.09 -1988.07</p> <p style="margin-bottom: 15px"> 鐜板伐浣滃崟浣嶏細鍖椾含涓尰鑽ぇ瀛︿笢鏂瑰尰闄� @@ -108,13 +87,11 @@ 澶у鸡鍢堝槇濡傛�ラ洦锛屽皬寮﹀垏鍒囧绉佽銆傚槇鍢堝垏鍒囬敊鏉傚脊锛屽ぇ鐝犲皬鐝犺惤鐜夌洏銆傞棿鍏宠幒璇姳搴曟粦锛屽菇鍜芥硥娴佸啺涓嬮毦銆傚啺娉夊喎娑╁鸡鍑濈粷锛屽嚌缁濅笉閫氬0鏆傛瓏銆傚埆鏈夊菇鎰佹殫鎭ㄧ敓锛屾鏃舵棤澹拌儨鏈夊0銆傞摱鐡朵箥鐮存按娴嗚扛锛岄搧楠戠獊鍑哄垁鏋福銆傛洸缁堟敹鎷ㄥ綋蹇冪敾锛屽洓寮︿竴澹板瑁傚笡銆備笢鑸硅タ鑸倓鏃犺█锛屽敮瑙佹睙蹇冪鏈堢櫧銆� </p> </div> - <div - style=" + <div style=" display: flex; justify-content: space-between; margin-top: 20px; - " - > + "> <div style="text-align: left; width: 48%; line-height: 22px"> <p> 瑙傚か鏄庡爞涔嬪畯澹篃锛屽垯绐佸厐鐬虫洦锛屼箥鏄庝箥钂欙紝鑻ュぇ鍙ゅ厓姘斾箣缁撶┖銆傚穬宓搁娌擄紝鑻ュ惮鑻ュ丢锛屼技澶╅槂鍦伴棬涔嬪紑闃栥�傚皵涔冨垝宀濆硥浠ュ渤绔嬶紝閮佺┕宕囪�岄缚绾枫�傚啝鐧剧帇鑰屽瀭鍕嬶紝鐑涗竾璞¤�岃吘鏂囥�傜獧鎯氭亶浠ユ礊鍚紝鍛煎祵宀╄�屽倣鍒嗐�傚張姣斾箮鏄嗗北涔嬪ぉ鏌憋紝鐭椾節闇勮�屽瀭浜戙�� @@ -130,47 +107,44 @@ </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> - </div> - <table - cellpadding="100" - v-if=" + <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> + " 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> </div> </div> </div> @@ -182,10 +156,16 @@ import axios from "axios"; import debounce from "lodash/debounce"; import treeData from "./treeData.json"; -import MG from '@/assets/js/middleGround/WebMiddleGroundApi.js' +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"), @@ -193,176 +173,7 @@ 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, currentNodeInfo: {}, @@ -389,12 +200,14 @@ name: "鎷滃笀寮熷瓙", }, ], + loading: false, }; }, mounted() { this.initChart(); - this.getStudentList() + this.getSelectData(); + this.getStudentList(); window.addEventListener("resize", this.handleResize); }, beforeDestroy() { @@ -436,9 +249,8 @@ <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 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> @@ -515,55 +327,103 @@ this.chart.resize(); } }, - // 鑾峰彇鍒楄〃鏄剧ず - getStudentList() { - this.loading = true; - MG.resource.getItem({ - path: "WYY_student", - fields: { - // 鎬у埆 - gender:"", - //瀛︿範鏃堕棿 - studyTime: [], - // 鍗曚綅 - unit:[], - // 鐜板伐浣滃崟浣嶏紙鍒颁簩绾у崟浣嶅叏绉帮級 - currentEmployer_secondary:"", - //鑱屽姟 - jobTitle:"", - //瀛︿綅 - academicDegree:"", - // 瀛︾敓绠�浠� - studentProfile:"", - }, - paging: { - // start: (this.currentPage - 1) * 10, - size: 99999, - }, - // coverSize: { - // height: 70 - // } - }).then((res) => { - console.log(res, "res"); - if (res.datas && res.datas.length) { - this.honorList = res.datas.map(item => { - // 灏� year 瀛楁鏍煎紡鍖栦负 "2017骞�9鏈�" 杩欑鏍煎紡 - const date = new Date(item.year); - const year = date.getFullYear(); - const month = date.getMonth() + 1; // 鏈堜唤浠�0寮�濮嬶紝闇�瑕佸姞1 - return { - ...item, - year: `${year}骞�${month}鏈坄 - }; - }); - this.total = res.total; - this.loading = false; - } + //鑾峰彇涓嬫媺閫夋嫨妗嗙殑鍐呭 + 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.unitList, "unitList"); + console.log(this.academicDegreeList, "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); + 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, + unitValue: item.value, + academicDegreeName: citem.name, + academicDegreeValue: citem.value, + isShow: false, + studentList:[] + }) + }) + }) + 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){ + citem.studentList.push(item); + } + }) + }); + arrList = arrList.filter(item => + item.studentList.length + ) + console.log(arrList, "arrList"); + this.universityList = arrList; + this.loading = false; + } + }) + .catch((error) => { + console.error("鑾峰彇鑽h獕澶辫触:", error); + }); + }, }, }; </script> @@ -571,35 +431,44 @@ <style lang="less" scoped> .page { width: 100%; - height: 100vh; + height: 100%; box-sizing: border-box; background-color: #e9e1d4; position: relative; overflow: hidden; + display: flex; + flex-direction: column; } .page-header { - height: 9.4vh; + padding: 8px 0; + height: 9.4%; width: 100%; text-align: left; border-bottom: 2px solid #937950; 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 { @@ -607,7 +476,7 @@ align-items: center; justify-content: center; cursor: pointer; - margin-bottom: 75px; + margin-bottom: 25px; color: #9e9e9e; margin-top: 1%; @@ -638,19 +507,22 @@ .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; + } th { @@ -658,6 +530,7 @@ font-size: 14px; font-weight: bold; padding: 4px 41px; + text-wrap: nowrap; } td { @@ -665,6 +538,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 { @@ -722,6 +601,7 @@ height: auto; } } + .tooltipBox { max-height: 500px; max-width: 500px; @@ -730,25 +610,30 @@ 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; } -- Gitblit v1.9.1