From 5affb08b5ac61563b5237c6ed5beedffda073e66 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期五, 19 七月 2024 18:55:08 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary --- src/pages/academicSchools/index.vue | 793 +++++++++++++++++++++++++++++++------------------------- 1 files changed, 443 insertions(+), 350 deletions(-) diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue index a37812d..0aab590 100644 --- a/src/pages/academicSchools/index.vue +++ b/src/pages/academicSchools/index.vue @@ -1,31 +1,43 @@ <template> - <view style="width: 100%; height: 100%; display: flex; flex-direction: column;"> + <view + style="width: 100%; height: 100%; display: flex; flex-direction: column" + > <headNav :idIndex="'6'" text="瀛︽湳娴佹淳" /> <!-- 楂樼骇鎼滅储 --> - <view style="margin-top: 0.1rem"> + <view style="margin-left: 0.6rem; margin-top: 0.1rem; display: flex"> <advancedSearch @onSearch="onSearch" - @onSubmit="onSubmit" - :from="From" placehold="璇疯緭鍏ュ叧閿瓧" + :isAvancedTrue="false" :keyword="searchKey" - :advancedSearchBack="advancedSearchBack" /> + <view + @click="isAvancedClick" + style=" + color: #244a7b; + cursor: pointer; + font-size: 0.12rem; + margin-left: 0.35rem; + line-height: 0.58rem; + " + >楂樼骇鎼滅储 {{ isAdvancedSearch ? "鈭�" : "鈭�" }}</view + > + <!-- 鐑棬鎼滅储 --> + <view class="flex flex-center hotSearch" style="margin-left: 2rem"> + 鐑棬鎼滅储锛� + <ul class="flex" style="margin-right: 10rpx"> + <li + @click="onSearch({ text: item }, index)" + :class="{ cursor: true, active: hotAciveIndex === index }" + v-for="(item, index) in hotKeyList" + :key="item" + > + {{ item }} + </li> + </ul> + </view> </view> - <!-- 鐑棬鎼滅储 --> - <view class="flex flex-center hotSearch"> - 鐑棬鎼滅储锛� - <ul class="flex" style="margin-right: 10rpx"> - <li - @click="onSearch({ text: item }, index)" - :class="{ cursor: true, active: hotAciveIndex === index }" - v-for="(item, index) in hotKeyList" - :key="item" - > - {{ item }} - </li> - </ul> - </view> + <!-- 鍏崇郴琛ㄥ湴鍥� --> <div id="relation" @@ -45,6 +57,34 @@ > 鏆傛棤鐩稿叧鏁版嵁 </div> + <div + v-if="loading" + v-loading="loading" + style=" + position: absolute; + top: 30%; + left: 0; + right: 0; + text-align: center; + font-size: 0.2rem; + color: #666; + " + > + </div> + </div> + <div id="customDialog" class="customDialog"> + <div class="title"> + <span>{{ detailData.name }}</span> + <span @click="closeDom">鍏抽棴</span> + </div> + <div class="content"> + <p>濮撳悕锛歿{ detailData.name }}</p> + <p>鍒悕锛歿{ detailData.alias }}</p> + <p>绫嶈疮锛歿{ detailData.nativePlace }}</p> + <p>鍖诲鍒嗙锛� {{ detailData.medicalBranch }}</p> + <p>灏忎紶锛歿{ detailData.biography }}</p> + </div> + <div class="btn" @click="spaceTimeArr(detailData.id)">鏌ョ湅鏇村>>></div> </div> </view> </template> @@ -66,172 +106,6 @@ nodes: [], // echarts涓よ�呯殑鍏崇郴 relationships: [], - // 楂樼骇鎼滅储 - From: { - from: [ - { - type: "input", - label: "濮撳悕", - name: "name", - value: "" - }, - { - type: "input", - label: "鍒悕", - name: "alias", - value: "" - }, - { - type: "input", - label: "绫嶈疮", - name: "location", - value: "" - }, - { - type: "select", - label: "鑱屼笟", - name: "sdId", - value: "", - options: [ - { - label: "鏈寚鏄�", - value: "UNKNOWN" - } - ] - }, - { - type: "input", - label: "瀹樿亴", - name: "office", - value: "" - }, - { - type: "select", - label: "鎬у埆", - value: "", - name: "genderTypeEO", - options: [ - { - label: "鏈寚鏄�", - value: "UNKNOWN" - }, - { - label: "鐢�", - value: "MALE" - }, - { - label: "濂�", - value: "WOMAN" - } - ] - }, - { - type: "input", - label: "鏃舵湡", - name: "period", - value: "" - }, - { - type: "input", - label: "鏈烘瀯", - name: "inst", - value: "" - }, - { - type: "number", - label: "椤电爜", - name: "page", - value: "" - }, - { - type: "number", - label: "椤靛ぇ灏�", - name: "pageSize", - value: "" - } - ] - }, - // 涓嬮潰鐨勬湞浠�1 - dynastyColor: 1, - // 鏈濅唬 - dynasty: [ - { - name: "澶忔湞", - coord: "2070BC", - id: 1 - }, - { - name: "鍟嗘湞", - id: 2, - coord: "1600BC" - }, - { - name: "瑗垮懆", - id: 3, - coord: "1600BC" - }, - { - name: "鏄ョ鎴樺浗", - id: 4, - coord: "770BC" - }, - { - name: "绉︽湞", - id: 5, - coord: "221BC" - }, - { - name: "姹夋湞", - id: 6, - coord: "202BC" - }, - { - name: "涓夊浗涓ゆ檵鍗楀寳鏈�", - id: 7, - coord: "184" - }, - { - name: "闅嬫湞", - id: 8, - coord: "581" - }, - { - name: "鍞愭湞", - id: 9, - coord: "618" - }, - { - name: "浜斾唬鍗佸浗", - id: 10, - coord: "907" - }, - { - name: "杈藉閲�", - id: 11, - coord: "907" - }, - { - name: "瀹嬫湞", - id: 12, - coord: "960" - }, - { - name: "鍏冩湞", - id: 13, - coord: "1271" - }, - - { - name: "鏄庢湞", - id: 14, - coord: "1368" - }, - { - name: "娓呮湞", - id: 15, - coord: "1636" - } - ], // 鐑棬鎼滅储 hotKeyList: [], searchKey: "", @@ -240,8 +114,14 @@ categories: [], // 浜虹墿淇℃伅 infoOfPersons: [], + // 瀛︽湳娴佹淳 + infoOfSchools: [], // 褰撳墠浜虹墿淇℃伅 - ownInfo: null + ownInfo: null, + detailData: { + name: "" + }, + isAdvancedSearch: false }; }, mounted() { @@ -250,33 +130,140 @@ this.hotSearch(); // 鐩戝惉绐楀彛澶у皬鍙樺寲 window.addEventListener("resize", this.relation); - this.innt(); }, onLoad(options) { this.searchKey = options.keyword; }, methods: { - getPersonInfo(arr, str, newArr, order, type) { + // 鑾峰彇浜虹墿鍏崇郴 + getPersonInfo(arr, str, newArr, order, type, parent) { for (let i = 0; i < arr.length; i++) { const ele = arr[i]; const personInfo = this.infoOfPersons.find( (item) => item.id == ele.personId ); - const obj = { - personId: ele.personId, - id1: this.ownInfo.id, - id2: personInfo.id, - relationTypeId: ele.relationTypeId, - relationTypeName: ele.relationTypeName, - name1: this.ownInfo?.NAME[0]?.content1, - name2: personInfo?.NAME[0]?.content1, - category: type - }; - newArr.push(obj); - if (ele[str] && ele[str]?.length) { - this.getPersonInfo(ele[str], "kinList", newArr, 2, type); + if (personInfo?.id) { + const obj = { + personId: ele.personId, + parentId: parent.id, + id2: personInfo.id, + relationTypeName: ele.relationTypeName, + parentName: parent?.NAME[0]?.content1 ?? parent.parentName, + name2: personInfo?.NAME[0]?.content1, + category: type, + symbolSize: order, + }; + if (order > 80) { + order = 80; + } + if (str == "literatureList") { + obj.relationTypeName = ele.literatureName; + } + if (str == "schoolList") { + const nameData = this.infoOfSchools?.find( + (i) => i.schoolId == ele.schoolId + ); + obj.relationTypeName = nameData?.name[0]; + } + if (str == "placeList") { + obj.relationTypeName = ele.ancientName ?? ele.currentName; + } + newArr.push(obj); + if (ele["kinList"] && ele["kinList"]?.length) { + order += 15; + this.getPersonInfo( + ele["kinList"], + "kinList", + newArr, + order, + 0, + personInfo + ); + } + if (ele["teacherStudentList"] && ele["teacherStudentList"]?.length) { + order += 15; + this.getPersonInfo( + ele["teacherStudentList"], + "teacherStudentList", + newArr, + order, + 1, + personInfo + ); + } + if (ele["literatureList"] && ele["literatureList"]?.length) { + const data = this.changeLiterature( + ele["literatureList"], + "literatureList" + ); + order += 15; + this.getPersonInfo( + data, + "literatureList", + newArr, + order, + 2, + personInfo + ); + } + + if (ele["socialList"] && ele["socialList"]?.length) { + const data = this.changeLiterature(ele["socialList"], "socialList"); + order += 15; + this.getPersonInfo( + data, + "socialList", + newArr, + order, + 3, + personInfo + ); + } + if (ele["placeList"] && ele["placeList"]?.length) { + const data = this.changeLiterature(ele["placeList"], "placeList"); + order += 15; + this.getPersonInfo(data, "placeList", newArr, order, 4, personInfo); + } + if (ele["schoolList"] && ele["schoolList"]?.length) { + const data = this.changeLiterature(ele["schoolList"], "schoolList"); + order += 15; + this.getPersonInfo( + data, + "schoolList", + newArr, + order, + 5, + personInfo + ); + } } } + }, + + // 澶勭悊鏁版嵁 + changeLiterature(arr, str) { + for (let i = 0; i < arr.length; i++) { + const ele = arr[i]; + if (!ele.personId && ele.personList?.length) { + ele.literatureList = []; + ele.personId = this.ownInfo.id; + if (ele[str] && ele[str]?.length) { + for (let j = 0; j < ele.personList.length; j++) { + const item = ele.personList[j]; + const data = item[str]?.map((e) => { + return { + ...e, + personId: item.personId + }; + }); + if (data?.length) { + ele[str].push(...data); + } + } + } + } + } + return arr; }, //鏁扮粍鍘婚噸 @@ -298,73 +285,157 @@ return deduplicatedArray; }, + + // 鏌ヨ璇︽儏 getData() { this.loading = true; getPersonData(this.currentId).then((res) => { this.nodes = []; this.relationships = []; - let kin = []; + let kinData = []; let teacher = []; + let literature = []; + let social = []; + let place = []; + let school = []; if (res && res.success && res.object) { - console.log(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; - console.log(obj.kinList, "kinList"); if (obj.kinList?.length) { let newArr = []; this.categories.push({ name: "浜插睘鍏崇郴" }); - this.getPersonInfo(obj.kinList, "kinList", newArr, 1, 0); - console.log(newArr, "list"); - newArr.forEach((item) => { - let exists1 = this.nodes.some( - (node) => node.id === item.id1 && node.name === item.name1 - ); - let exists2 = this.nodes.some( - (node) => node.id === item.id1 && node.name === item.name2 - ); - // 璇佹槑涓嶅瓨鍦� - if (item.name1 && exists1 !== true) { - this.nodes.push({ - name: item.name1, - id: item.id1, - ...item - }); - } - if (item.name2 && exists2 !== true) { - this.nodes.push({ - name: item.name2, - id: item.id2, - ...item - }); - } - let obj = { - source: item.name1, - target: item.name2, - relation: item.relationTypeName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� - }; - this.relationships.push(obj); - }); + 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"); + 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]; } } + console.log(kinData); + console.log(kinData.map(item=>item.name2).join("銆�")); + debugger + const personData = [ + ...kinData, + ...teacher, + ...literature, + ...social, + ...place, + ...school + ]; + // const k = personData.filter((item) => item.category == 0); + // const t = personData.filter((item) => item.category == 1); + // const l = personData.filter((item) => item.category == 2); + // const o = personData.filter((item) => item.category == 3); + // const p = personData.filter((item) => item.category == 4); + // const s = personData.filter((item) => item.category == 5); + // const nodesList = [...k, ...t, ...l, ...o, ...p, ...s]; + // console.log(nodesList); + personData.forEach((item) => { + let exists1 = this.nodes.some( + (node) => + node.id === item.parentId && node.name === item.parentName + ); + let exists2 = this.nodes.some( + (node) => node.id === item.parentId && node.name === item.name2 + ); + // 璇佹槑涓嶅瓨鍦� + if (item.name1 && exists1 !== true) { + this.nodes.push({ + name: item.parentName, + id: item.parentId, + ...item + }); + } + if (item.name2 && exists2 !== true) { + this.nodes.push({ + name: item.name2, + id: item.id2, + ...item + }); + } + let obj = { + source: item.parentName, + target: item.name2, + relation: item.relationTypeName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� + }; + this.relationships.push(obj); + }); } this.loading = false; this.relation(); @@ -436,122 +507,109 @@ } }); // 鏍规嵁nodes鍔ㄦ�佺敓鎴愯妭鐐规暟鎹� - var nodeData = nodes.map(function (node, index) { - return { - name: node.name, - id: node.id, - // itemStyle: { - // color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� - // borderWidth: BorderWidth, - // borderColor: "#996f9f" - // } - }; - }); - + var nodeData = nodes; var option; option = { - title: { - // text: '涔︿腑鏈�甯告彁鍒扮殑100浣嶄汉鐗�', - // subtext: '', - left: "center", - top: FontSize + 10, - // textStyle: { - // fontSize: FontSize // 璁剧疆鏍囬鏂囧瓧澶у皬涓� 18px - // }, - subtextStyle: { - fontSize: FontSize, // 璁剧疆鍓爣棰樻枃瀛楀ぇ灏忎负 14px - color: "#2C2C2C" - } - }, - backgroundColor: { - type: "image", - image: "/static/image/characterRelationBg.png", - // repeat: 'repeat-x', // 鏄惁骞抽摵锛屽彲浠ユ槸 'repeat-x', 'repeat-y', 'no-repeat' - size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱� - position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮 - }, - tooltip: {}, + // backgroundColor: { + // type: "image", + // image: "/static/image/characterRelationBg.png", + // size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱� + // position: "center center", // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮 + // }, + // tooltip: {}, legend: [ { - // selectedMode: 'single', + left: 20, + top: 20, + orient: "vertical", data: this.categories.map(function (a) { return a.name; }) } ], - animationDurationUpdate: 1500, - animationEasingUpdate: "quinticInOut", series: [ - // { - // type: "graph", - // layout: "force", - // roam: true, - // symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬 - // label: { - // show: true, - // color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� - // fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 - // }, - // edgeSymbol: ["circle", "arrow"], - // edgeSymbolSize: [4, 10], - // data: nodeData, - // links, - // categories: this.categories, - // lineStyle: { - // opacity: 0.9, - // width: 2, - // curveness: 0.3, - // }, - // emphasis: { - // focus: "adjacency", - // lineStyle: { - // width: 10, - // }, - // }, - // force: { - // // layoutAnimation: false, - // // friction: 1, - // repulsion: 800, - // edgeLength: 400, - // }, - // }, { - name: "Les Miserables", type: "graph", legendHoverLink: false, - layout: 'force', + layout: "force", + symbolSize: 15, data: nodeData, links: links, categories: this.categories, roam: true, label: { + show: true, position: "right", formatter: "{b}" }, + scaleLimit: { + min: 0.4, + max: 2 + }, lineStyle: { color: "source", - curveness: 0.3 + curveness: 0.2 }, emphasis: { focus: "adjacency", lineStyle: { - width: 10 + width: 5 } + }, + force: { + repulsion: 600, + edgeLength: 300 } } ] }; - // 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓� - // option.series[0].links = links; // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 myChart.off("click"); myChart.on("click", (params) => { if (params.dataType === "node") { - this.spaceTimeArr(params.data.id); + this.creatDom(params); } }); - console.log(option, "option"); myChart.setOption(option); + }, + creatDom(params) { + const e = params.event; + const div = document.getElementById("customDialog"); + div.style.display = "block"; + div.style.left = e.offsetX + 50 + "px"; + div.style.top = e.offsetY - 50 + "px"; + const data = this.infoOfPersons?.find( + (i) => i.id == params.data.personId + ); + const obj = { + id: params.data.id, + name: + data?.NAME?.map((e, i) => { + i += 1; + return e["content" + i]; + }).join("銆�") ?? "", + alias: + data?.ALIAS?.map((e, i) => { + i += 1; + return e["content" + i]; + }).join("銆�") ?? "", + nativePlace: + data?.NATIVE_PLACE?.map((e, i) => { + i += 1; + return e["content" + i]; + }).join("銆�") ?? "", + medicalBranch: + data?.MEDICAL_BRANCH?.map((e, i) => { + i += 1; + return e["content" + i]; + }).join("銆�") ?? "", + biography: data?.BIOGRAPHY ?? "" + }; + this.detailData = obj; + }, + closeDom() { + const div = document.getElementById("customDialog"); + div.style.display = "none"; }, // 鍩虹鎼滅储 onSearch(val, index) { @@ -561,23 +619,7 @@ } else { this.hotAciveIndex = ""; } - // this.searchKey = val.text; this.getData(val.text); - }, - // 楂樼骇鎼滅储 - onSubmit(val) { - getAdvanceSearch({ - ...val, - page: 1, - pageSize: 100 - }).then((res) => { - console.log(res, "res"); - }); - }, - advancedSearchBack() { - uni.navigateTo({ - url: "/pages/knowledgeBase/knowledgeBase" - }); }, // 鐐瑰嚮涓嬮潰鐨勬湞浠f寜閽� dynastyBottomClick(item) { @@ -616,36 +658,87 @@ }); }); }, - - // 楂樼骇鎼滅储閲岄潰鑱屼笟鐨勪笅鎷夎彍鍗� - innt() { - getPDataStatistics().then((res) => { - const professionIndex = this.From.from.findIndex( - (field) => field.label === "鑱屼笟" - ); - // 濡傛灉鎵惧埌浜嗚亴涓氬瓧娈� - if (professionIndex !== -1) { - // 灏� profession.list 杞崲涓� options 鏍煎紡 - const options = res.object.occupationStatistic.details.map( - (item) => ({ - label: item.tagName, - value: item.tagId.toString() // 灏� id 杞崲涓哄瓧绗︿覆锛岀‘淇濅笌 value 绫诲瀷涓�鑷� - }) - ); - // 鏇存柊鑱屼笟瀛楁鐨� options 灞炴�� - this.$set(this.From.from[professionIndex], "options", options); - } - }); - } + isAvancedClick() { + this.isAdvancedSearch = !this.isAdvancedSearch; + // this.$nextTick(() => { + // var box1Height = document.querySelector(".fbox").offsetHeight; + // // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px'; + // let box2Height = document.querySelector(".fbox1").offsetHeight; + // if (box1Height <= box2Height) { + // document.querySelector(".fbox1").style.height = box1Height + "px"; + // } + // }); + }, } }; </script> <style> -#relatio { +#relation { width: 100%; height: 100%; + position: relative; + background-image: url('../../static/image/characterRelationBg.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; } + +.customDialog { + width: 300px; + min-height: 240px; + display: none; + position: fixed; + z-index: 99999999; + border-radius: 2px; + background: #fff; +} + +.customDialog .title { + width: 100%; + height: 35px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + box-sizing: border-box; + background-color: rgb(221, 232, 246); + font-size: 14px; +} +.customDialog .title span:nth-child(1) { + font-size: 16px; + font-weight: 600; +} + +.customDialog .title span:nth-child(2) { + color: rgb(95, 127, 168); + cursor: pointer; +} + +.customDialog .content { + padding: 15px; + box-sizing: border-box; +} + +.customDialog .content p { + margin-bottom: 5px; + display: -webkit-box; /* 鏄剧ず澶氳鏂囨湰瀹瑰櫒 */ + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; /*鏄剧ず琛屾暟*/ + overflow: hidden; /*闅愯棌澶氬嚭閮ㄥ垎鏂囧瓧*/ + text-overflow: ellipsis; /*鐢ㄧ渷鐣ュ彿浠f浛澶氬嚭閮ㄥ垎鏂囧瓧*/ +} + +.customDialog .btn { + display: flex; + justify-content: center; + align-items: center; + color: rgb(95, 127, 168); + cursor: pointer; + font-size: 14px; + height: 35px; +} + @media screen and (min-width: 2560px) and (max-width: 3840px) { } -- Gitblit v1.9.1