From 13623d7756b96e773888caf235c57644bb864c32 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期二, 23 七月 2024 17:39:18 +0800 Subject: [PATCH] 1 --- src/pages/academicSchools/index.vue | 551 ++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 368 insertions(+), 183 deletions(-) diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue index f47fabd..31f0a9d 100644 --- a/src/pages/academicSchools/index.vue +++ b/src/pages/academicSchools/index.vue @@ -253,13 +253,8 @@ // 鐑棬鎼滅储 hotKeyList: [], searchKey: "", - // 鍒嗙被 categories: [], - // 浜虹墿淇℃伅 - infoOfPersons: [], - // 瀛︽湳娴佹淳 - infoOfSchools: [], // 褰撳墠浜虹墿淇℃伅 ownInfo: null, detailData: { @@ -284,7 +279,11 @@ personTag: [], socialDistinction: [], dynastyData: [], - drawer:false, + drawer: false, + infoOfPersons: [], + infoOfSchools: [], + nodeDatas: [], + links: [] }; }, mounted() { @@ -458,9 +457,6 @@ } return arr; }, - - // 鏂囩尞 - //鏁扮粍鍘婚噸 deduplicateArray(arr, idKey) { // 浣跨敤涓�涓緟鍔╁璞℃潵璺熻釜宸茬粡瑙佽繃鐨処D @@ -485,147 +481,373 @@ getData() { this.loading = true; getPersonData(this.currentId).then((res) => { - this.nodes = []; - this.relationships = []; - let kinData = []; - let teacher = []; - let literature = []; - let social = []; - let place = []; - let school = []; - if (res && res.success && res.object) { - this.infoOfPersons = res.object?.infoOfPersons; - this.infoOfSchools = res.object?.infoOfSchools; - console.log(res.object); - if (res.object?.personChain) { - this.ownInfo = this.infoOfPersons.find( - (item) => item.id == res.object?.personChain.personId - ); - const obj = res.object?.personChain; - if (obj.kinList?.length) { - let newArr = []; - this.categories.push({ name: "浜插睘鍏崇郴" }); - this.getPersonInfo( - obj.kinList, - "kinList", - newArr, - 1, - 0, - this.ownInfo - ); - kinData = [...newArr]; - } - if (obj.teacherStudentList?.length) { - this.categories.push({ name: "甯堟壙鍏崇郴" }); - let newArr = []; - this.getPersonInfo( - obj.teacherStudentList, - "teacherStudentList", - newArr, - 1, - 1, - this.ownInfo - ); - teacher = [...newArr]; - } - if (obj.literatureList?.length) { - this.categories.push({ name: "鏂囩尞浣滃搧" }); - let newArr = []; - const data = this.changeLiterature( - obj.literatureList, - "literatureList" - ); - this.getPersonInfo( - data, - "literatureList", - newArr, - 1, - 2, - this.ownInfo - ); - literature = [...newArr]; - // console.log(literature, "literature"); - } - if (obj.socialList?.length) { - let newArr = []; - this.categories.push({ name: "绀句細鍏崇郴" }); - const data = this.changeLiterature(obj.socialList, "socialList"); - this.getPersonInfo( - data, - "socialList", - newArr, - 1, - 3, - this.ownInfo - ); - social = [...newArr]; - } - if (obj.placeList?.length) { - this.categories.push({ name: "娲诲姩鍦�" }); - let newArr = []; - const data = this.changeLiterature(obj.placeList, "placeList"); - console.log(data, "place"); - this.getPersonInfo(data, "placeList", newArr, 1, 4, this.ownInfo); - place = [...newArr]; - } - if (obj.schoolList?.length) { - this.categories.push({ name: "瀛︽湳娴佹淳" }); - let newArr = []; - const data = this.changeLiterature(obj.schoolList, "schoolList"); - this.getPersonInfo( - data, - "schoolList", - newArr, - 1, - 5, - this.ownInfo - ); - school = [...newArr]; - } - } - const personData = [ - ...kinData, - ...teacher, - ...literature, - ...social, - ...place, - ...school - ]; - - personData.forEach((item) => { - this.nodes.push({ - name: item.name, - id: item.personId, - ...item - }); - let obj = { - source: item.parentName, - target: item.name, - relation: item.relationTypeName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� - }; - this.relationships.push(obj); - }); - } + console.log("1111111111111", res); + this.infoOfPersons = res.object.infoOfPersons; + this.infoOfSchools = res.object.infoOfSchools; + this.nodeDatas = []; + this.links = []; + this.handleData([res.object.personChain], null); + console.log("this.nodeDatas", this.nodeDatas); + console.log("this.links", this.links); this.loading = false; this.relation(); + // this.nodes = []; + // this.relationships = []; + // let kinData = []; + // let teacher = []; + // let literature = []; + // let social = []; + // let place = []; + // let school = []; + // if (res && res.success && res.object) { + // this.infoOfPersons = res.object?.infoOfPersons; + // this.infoOfSchools = res.object?.infoOfSchools; + + // if (res.object?.personChain) { + // this.ownInfo = this.infoOfPersons.find( + // (item) => item.id == res.object?.personChain.personId + // ); + // const obj = res.object?.personChain; + // if (obj.kinList?.length) { + // let newArr = []; + // this.categories.push({ name: "浜插睘鍏崇郴" }); + // this.getPersonInfo( + // obj.kinList, + // "kinList", + // newArr, + // 1, + // 0, + // this.ownInfo + // ); + // kinData = [...newArr]; + // } + // if (obj.teacherStudentList?.length) { + // this.categories.push({ name: "甯堟壙鍏崇郴" }); + // let newArr = []; + // this.getPersonInfo( + // obj.teacherStudentList, + // "teacherStudentList", + // newArr, + // 1, + // 1, + // this.ownInfo + // ); + // teacher = [...newArr]; + // } + // if (obj.literatureList?.length) { + // this.categories.push({ name: "鏂囩尞浣滃搧" }); + // let newArr = []; + // const data = this.changeLiterature( + // obj.literatureList, + // "literatureList" + // ); + // this.getPersonInfo( + // data, + // "literatureList", + // newArr, + // 1, + // 2, + // this.ownInfo + // ); + // literature = [...newArr]; + // // console.log(literature, "literature"); + // } + // if (obj.socialList?.length) { + // let newArr = []; + // this.categories.push({ name: "绀句細鍏崇郴" }); + // const data = this.changeLiterature(obj.socialList, "socialList"); + // this.getPersonInfo( + // data, + // "socialList", + // newArr, + // 1, + // 3, + // this.ownInfo + // ); + // social = [...newArr]; + // } + // if (obj.placeList?.length) { + // this.categories.push({ name: "娲诲姩鍦�" }); + // let newArr = []; + // const data = this.changeLiterature(obj.placeList, "placeList"); + // console.log(data, "place"); + // this.getPersonInfo(data, "placeList", newArr, 1, 4, this.ownInfo); + // place = [...newArr]; + // } + // if (obj.schoolList?.length) { + // this.categories.push({ name: "瀛︽湳娴佹淳" }); + // let newArr = []; + // const data = this.changeLiterature(obj.schoolList, "schoolList"); + // this.getPersonInfo( + // data, + // "schoolList", + // newArr, + // 1, + // 5, + // this.ownInfo + // ); + // school = [...newArr]; + // } + // } + // const personData = [ + // ...kinData, + // ...teacher, + // ...literature, + // ...social, + // ...place, + // ...school + // ]; + + // personData.forEach((item) => { + // this.nodes.push({ + // name: item.name, + // id: item.personId, + // ...item + // }); + // let obj = { + // source: item.parentName, + // target: item.name, + // relation: item.relationTypeName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� + // }; + // this.relationships.push(obj); + // }); + // } + }); }, + // 閫掑綊澶勭悊鎵�鏈夊眰绾ф暟鎹� + handleData(data, parent) { + for (let i = 0; i < data.length; i++) { + const item = data[i]; + // 澶勭悊node/link + if (!parent) { + // 褰撳墠浜虹墿 + item.mainId = item.personId + "_p"; + const mainPerson = this.infoOfPersons.find( + (pItem) => pItem.id == item.personId + ); + this.nodeDatas.push({ + id: item.mainId, + name: mainPerson.NAME[0].content1, + itemStyle: { + color: "#244a7b" + } + }); + } else { + switch (parent.thisType) { + case 1: + item.mainId = item.personId + "_p"; + if ( + this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) == + -1 + ) { + const p = this.infoOfPersons.find( + (pItem) => pItem.id == item.personId + ); + if (p) { + this.nodeDatas.push({ + id: item.mainId, + name: p.NAME[0].content1, + itemStyle: { + color: "#5470c6" + } + }); + } + } + this.links.push({ + source: item.mainId, + target: parent.mainId, + label: { + show: true, + formatter: item.relationTypeName, + color: "#2C2C2C", + fontSize: 14, + backgroundColor: "rgba(255, 255, 255, 1)", + padding: [3, 8], + borderRadius: 30, + position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず + distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + } + }); + break; + case 2: + item.mainId = item.literatureId + "_l"; + if ( + this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) == + -1 + ) { + this.nodeDatas.push({ + id: item.mainId, + name: item.literatureName, + itemStyle: { + color: "#fac858" + } + }); + } + this.links.push({ + source: item.mainId, + target: parent.mainId + }); + break; + case 3: + item.mainId = item.ancientName + "_a"; + if ( + this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) == + -1 + ) { + this.nodeDatas.push({ + id: item.mainId, + name: item.ancientName, + itemStyle: { + color: "#ea7ccc" + } + }); + } + this.links.push({ + source: item.mainId, + target: parent.mainId + }); + break; + case 4: + item.mainId = item.schoolId + "_s"; + if ( + this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) == + -1 + ) { + const s = this.infoOfSchools.find( + (sItem) => sItem.schoolId == item.schoolId + ); + console.log(this.infoOfSchools); + console.log(item.schoolId); + console.log(s); + if (s) { + this.nodeDatas.push({ + id: item.mainId, + name: s.name[0], + itemStyle: { + color: "#9a60b4" + } + }); + } + } + this.links.push({ + source: item.mainId, + target: parent.mainId + }); + break; + case 5: + item.mainId = item.personId + "_p"; + if ( + this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) == + -1 + ) { + const p = this.infoOfPersons.find( + (pItem) => pItem.id == item.personId + ); + if (p) { + this.nodeDatas.push({ + id: item.mainId, + name: p.NAME[0].content1, + itemStyle: { + color: "#ee6666" + } + }); + } + } + this.links.push({ + source: item.mainId, + target: parent.mainId, + label: { + show: true, + formatter: item.relationTypeName, + color: "#2C2C2C", + fontSize: 14, + backgroundColor: "rgba(255, 255, 255, 1)", + padding: [3, 8], + borderRadius: 30, + position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず + distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + } + }); + break; + case 6: + item.mainId = item.personId + "_p"; + if ( + this.nodeDatas.findIndex((cItem) => cItem.id == item.mainId) == + -1 + ) { + const p = this.infoOfPersons.find( + (pItem) => pItem.id == item.personId + ); + if (p) { + this.nodeDatas.push({ + id: item.mainId, + name: p.NAME[0].content1, + itemStyle: { + color: "#3dae7b" + } + }); + } + } + this.links.push({ + source: item.mainId, + target: parent.mainId, + label: { + show: true, + formatter: item.relationTypeName, + color: "#2C2C2C", + fontSize: 14, + backgroundColor: "rgba(255, 255, 255, 1)", + padding: [3, 8], + borderRadius: 30, + position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず + distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + } + }); + break; + } + } + + // 浜插睘鍏崇郴 + if (item.kinList && item.kinList.length) { + this.handleData(item.kinList, { ...item, thisType: 1 }); + } + // 鏂囩尞浣滃搧 + if (item.literatureList && item.literatureList.length) { + this.handleData(item.literatureList, { ...item, thisType: 2 }); + } + // 娲诲姩鍦� + if (item.placeList && item.placeList.length) { + this.handleData(item.placeList, { ...item, thisType: 3 }); + } + // 瀛︽湳娴佹淳 + if (item.schoolList && item.schoolList.length) { + this.handleData(item.schoolList, { ...item, thisType: 4 }); + } + // 绀句細鍏崇郴 + if (item.socialList && item.socialList.length) { + this.handleData(item.socialList, { ...item, thisType: 5 }); + } + // 甯堟壙鍏崇郴 + if (item.teacherStudentList && item.teacherStudentList.length) { + this.handleData(item.teacherStudentList, { ...item, thisType: 6 }); + } + } + }, + // 鍏崇郴鍥捐氨 relation() { var chartDom = document.getElementById("relation"); var myChart = echarts.init(chartDom); // 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁 - var nodes = this.deduplicateArray(this.nodes, "id"); - var relationships = this.relationships; - - nodes = nodes.map((item) => { - let size = item.symbolSize; - for (let i = 0; i < relationships.length; i++) { - const linkItem = relationships[i]; - if (linkItem.source == item.parentName) { + this.nodeDatas = this.nodeDatas.map((item) => { + let size = 15; + for (let i = 0; i < this.links.length; i++) { + const linkItem = this.links[i]; + if (linkItem.source == item.id) { size += 5; } - if (linkItem.target == item.parentName) { + if (linkItem.target == item.id) { size += 5; } } @@ -656,44 +878,6 @@ SymbolSize = 70; Distance = 22; } - // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾� - var links = []; - relationships.forEach((relationship, i) => { - var sourceIndex = nodes.findIndex( - (node) => node.parentName === relationship.source - ); - var targetIndex = nodes.findIndex( - (node) => node.name === relationship.target - ); - if (relationship.relation) { - if (sourceIndex !== -1 && targetIndex !== -1) { - links.push({ - source: sourceIndex, - target: targetIndex, - label: { - show: true, - formatter: function (params) { - // 浣跨敤鍑芥暟鍔ㄦ�佺敓鎴愭爣绛惧唴瀹� - // return relationships.find(rel => rel.source === nodes[params.data - // .source] && rel.target === nodes[params.data.target]) - // .relation; - return relationship.relation; - }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent" - color: "#2C2C2C", - fontSize: FontSize - 2, - backgroundColor: "rgba(255, 255, 255, 1)", - padding: [3, 8], - borderRadius: 30, - position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず - // z: -1, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮 - distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 - } - }); - } - } - }); - // 鏍规嵁nodes鍔ㄦ�佺敓鎴愯妭鐐规暟鎹� - var nodeData = nodes; var option; option = { // backgroundColor: { @@ -719,9 +903,11 @@ legendHoverLink: false, layout: "force", symbolSize: 15, - data: nodeData, - links: links, - categories: this.categories, + data: this.nodeDatas, + links: this.links, + categories: [{ + + }], roam: true, label: { show: true, @@ -1036,12 +1222,11 @@ color: #c0c4cc; } -.el-drawer__wrapper{ +.el-drawer__wrapper { top: 0.86rem; } -::v-deep .el-drawer__open .el-drawer.rtl{ +::v-deep .el-drawer__open .el-drawer.rtl { width: 50% !important; } - </style> -- Gitblit v1.9.1