From b228a8d21e0bbbdf31f8f91c60215f9f459ae876 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期三, 24 七月 2024 11:37:33 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary --- src/pages/academicSchools/index.vue | 1014 +++++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 777 insertions(+), 237 deletions(-) diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue index 8ecc0ed..b77bb62 100644 --- a/src/pages/academicSchools/index.vue +++ b/src/pages/academicSchools/index.vue @@ -37,7 +37,7 @@ @click="onSearch({ text: item }, index)" :class="{ cursor: true, active: hotAciveIndex === index }" v-for="(item, index) in hotKeyList" - :key="item" + :key="item.name" > {{ item.name }} </li> @@ -45,7 +45,12 @@ </view> <view v-if="isAdvancedSearch" class="searchDialog"> <h3 style="margin-bottom: 0.2rem">楂樼骇鎼滅储</h3> - <el-form label-width="100px" :model="formData" size="mini"> + <el-form + label-width="100px" + :model="formData" + ref="searchForm" + size="mini" + > <el-row> <el-col :span="8"> <el-form-item label="濮撳悕/鍒悕锛�"> @@ -54,14 +59,16 @@ </el-col> <el-col :span="8"> <el-form-item label="娲诲姩鍦帮細"> - <el-select - style="width: 100%" - v-model="formData.actively" - placeholder="璇烽�夋嫨娲诲姩鍦�" - > - <!-- <el-option label="鍖哄煙涓�" value="shanghai"></el-option> --> - <!-- <el-option label="鍖哄煙浜�" value="beijing"></el-option> --> - </el-select> + <div class="selectActivelyBox" @click="selectActively"> + <p v-if="formData.actively.length == 0">璇烽�夋嫨娲诲姩鍦�</p> + <el-tag + v-for="item in formData.actively" + :key="item.id" + size="small" + closable + >{{ item.name }}</el-tag + > + </div> </el-form-item> </el-col> <el-col :span="8"> @@ -74,45 +81,62 @@ <el-col :span="8"> <el-form-item label="浜虹墿鏍囩锛�"> <el-select + multiple style="width: 100%" v-model="formData.personTags" placeholder="璇烽�夋嫨浜虹墿鏍囩" > - <!-- <el-option label="鍖哄煙涓�" value="shanghai"></el-option> --> - <!-- <el-option label="鍖哄煙浜�" value="beijing"></el-option> --> + <el-option + v-for="item in personTag" + :key="item.id" + :label="item.name" + :value="item.id" + ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="绀句細韬唤锛�"> <el-select + multiple style="width: 100%" v-model="formData.socialIdentity" placeholder="璇烽�夋嫨绀句細韬唤" > - <!-- <el-option label="鍖哄煙涓�" value="shanghai"></el-option> --> - <!-- <el-option label="鍖哄煙浜�" value="beijing"></el-option> --> + <el-option + v-for="item in socialDistinction" + :key="item.id" + :label="item.name" + :value="item.id" + ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="鏃舵湡锛�"> <el-select + multiple style="width: 100%" v-model="formData.period" placeholder="璇烽�夋嫨鏃舵湡" > - <!-- <el-option label="鍖哄煙涓�" value="shanghai"></el-option> --> - <!-- <el-option label="鍖哄煙浜�" value="beijing"></el-option> --> + <el-option + v-for="item in dynastyData" + :key="item.dynastyId" + :label="item.name" + :value="item.dynastyId" + ></el-option> </el-select> </el-form-item> </el-col> </el-row> + <div style="text-align: right"> + <el-button type="primary" size="mini" @click="searchFun" + >鎼滅储</el-button + > + <el-button size="mini" @click="resetForm">閲嶇疆</el-button> + </div> </el-form> - <div style="text-align: right"> - <el-button type="primary" size="mini">鎼滅储</el-button> - <el-button size="mini">閲嶇疆</el-button> - </div> </view> <div v-if="showPerson" class="personDialog"> <i @@ -193,6 +217,101 @@ </div> <div class="btn" @click="spaceTimeArr(detailData.id)">鏌ョ湅鏇村>>></div> </div> + <div id="schoolDialog" 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> + + <el-drawer + title="鍦板潃鍒楄〃" + :visible.sync="drawer" + direction="rtl" + :before-close="handleClose" + class="customDrawer" + > + <div class="drawerContent"> + <div class="drawerTips">閬镐腑鐨勫湴鍧�锛�</div> + <div class="drawerTable"> + <div class="tableTabs"> + <div class="inputItem"> + <el-input + placeholder="璜嬭几鍏ュ湴鍚嶆悳绱�" + v-model="tableKey" + class="input-with-select" + @keyup.enter="searchAddress" + > + <el-button + @click="searchAddress" + type="primary" + slot="append" + icon="el-icon-search" + ></el-button> + </el-input> + </div> + <div class="selectItem"> + <el-select v-model="dynastyId" placeholder="璜嬮伕鎿囨檪鏈�"> + <el-option + v-for="item in dynastyData" + :key="item.dynastyId + '0'" + :label="item.name" + :value="item.dynastyId" + ></el-option> + </el-select> + </div> + </div> + <el-table + ref="multipleTable" + :data="gridData" + tooltip-effect="dark" + style="width: 100%" + height="530" + @selection-change="handleSelectionChange" + > + <el-table-column type="selection" width="55"> </el-table-column> + <el-table-column prop="currentName" label="鍦板悕"> </el-table-column> + <el-table-column width="250" label="骞翠唬鍗�闁�" show-overflow-tooltip> + <template slot-scope="scope">{{ + scope.row.start + "-" + scope.row.end + }}</template> + </el-table-column> + <el-table-column + prop="dynastyName" + label="鏅傛湡" + width="250" + show-overflow-tooltip + > + </el-table-column> + </el-table> + </div> + <div class="drawerPage"> + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="currentPage" + :page-sizes="[10, 20, 60, 100]" + :page-size="pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + > + </el-pagination> + </div> + <div class="drawerBtn"> + <el-button @click="setCurrent">鍏ㄩ伕鐣跺墠闋�</el-button> + <el-button @click="setCurrent('cancle')">鍙栨秷鍏ㄩ伕</el-button> + <el-button @click="onOkAddress" type="primary">纰哄畾</el-button> + </div> + </div> + </el-drawer> </view> </template> @@ -202,6 +321,10 @@ getHotSearch, getPDataStatistics, academicSearch, + getPersonTag, + getSocialDistinction, + getDynastyAll, + getPlaceInfo, } from "@/api/index.js"; import * as echarts from "echarts"; export default { @@ -217,13 +340,27 @@ // 鐑棬鎼滅储 hotKeyList: [], searchKey: "", - // 鍒嗙被 - categories: [], - // 浜虹墿淇℃伅 - infoOfPersons: [], - // 瀛︽湳娴佹淳 - infoOfSchools: [], + categories: [ + { + name: "浜插睘鍏崇郴" + }, + { + name: "甯堟壙鍏崇郴" + }, + { + name: "鏂囩尞浣滃搧" + }, + { + name: "绀句細鍏崇郴" + }, + { + name: "娲诲姩鍦�" + }, + { + name: "瀛︽湳娴佹淳" + } + ], // 褰撳墠浜虹墿淇℃伅 ownInfo: null, detailData: { @@ -232,11 +369,11 @@ isAdvancedSearch: false, formData: { name: "", - actively: "", + actively: [], works: "", personTags: "", socialIdentity: "", - period: "" + period: "", }, showPerson: false, personList: [], @@ -245,12 +382,33 @@ page: 1, limit: 10, }, + personTag: [], + socialDistinction: [], + dynastyData: [], + // 鎶藉眽 + gridData: [], + page: 1, + currentPage: 1, + pageSize: 10, + total: 0, + multipleSelection: [], + drawer: false, + dynastyId: "", + tableKey: "", + // echarts + infoOfPersons: [], + infoOfSchools: [], + nodeDatas: [], + links: [], }; }, mounted() { this.getData(); - // this.echartsArr(); this.hotSearch(); + // 鑾峰彇浜虹墿鏍囩銆佺ぞ浼氳韩浠� + this.getOptionInfo(); + // 鐛插彇鍦板潃鍒楄〃 + this.getAddressList(); // 鐩戝惉绐楀彛澶у皬鍙樺寲 window.addEventListener("resize", this.relation); }, @@ -258,6 +416,105 @@ this.searchKey = options.keyword; }, methods: { + // 鎼滅储鍦板潃 + searchAddress() { + this.gridData = []; + this.getAddressList(); + }, + // 鍒嗛〉 + handleSizeChange(val) { + this.pageSize = val; + this.getAddressList(); + }, + handleCurrentChange(val) { + this.page = val; + this.getAddressList(); + }, + // 琛ㄦ牸閫夋嫨 + handleSelectionChange(val) { + this.multipleSelection = val; + }, + // 鍏ㄩ伕 + setCurrent(str) { + if (str == "cancle") { + this.$refs.multipleTable.clearSelection(); + return false; + } + if (this.gridData.length) { + this.gridData.forEach((row) => { + this.$refs.multipleTable.toggleRowSelection(row); + }); + this.multipleSelection = this.gridData; + } + }, + // 纰鸿獚鍦板潃 + onOkAddress() { + const data = this.multipleSelection.map((item) => { + return { + ...item, + name: item.currentName, + id: item.dynastyId, + }; + }); + this.formData.actively = data; + this.drawer = false; + }, + // 鐛插彇鍦板潃鍒楄〃 + getAddressList() { + const data = { + page: this.page, + pageSize: this.pageSize, + }; + if (this.dynastyId != "") { + data["dynastyId"] = this.dynastyId; + } + if (this.tableKey != "") { + data["keyword"] = this.tableKey; + } + getPlaceInfo(data).then((res) => { + if (res?.success && res?.list.length) { + this.gridData = res?.list; + } else { + this.gridData = []; + } + }); + }, + + getOptionInfo() { + getDynastyAll().then((res) => { + this.dynastyData = res.list; + }); + getPersonTag().then((res) => { + this.personTag = res.list; + }); + getSocialDistinction().then((res) => { + this.socialDistinction = res.list; + }); + }, + + resetForm(formName) { + this.formData = { + name: "", + actively: [], + works: "", + personTags: "", + socialIdentity: "", + period: "", + }; + }, + + searchFun() { + console.log(this.formData); + }, + + selectActively() { + this.drawer = true; + }, + + handleClose(done) { + done(); + }, + // 鑾峰彇浜虹墿鍏崇郴 getPersonInfo(arr, str, newArr, order, type, parent) { for (let i = 0; i < arr.length; i++) { @@ -387,9 +644,6 @@ } return arr; }, - - // 鏂囩尞 - //鏁扮粍鍘婚噸 deduplicateArray(arr, idKey) { // 浣跨敤涓�涓緟鍔╁璞℃潵璺熻釜宸茬粡瑙佽繃鐨処D @@ -414,146 +668,358 @@ getData() { this.loading = true; getPersonData(this.currentId).then((res) => { - console.log(res,'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]; - } - 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]; - } - } - 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({ + category: 0, + id: item.mainId, + name: p.NAME[0].content1 + }); + } + } + 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({ + category: 2, + id: item.mainId, + name: item.literatureName + }); + } + 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({ + category: 4, + id: item.mainId, + name: item.ancientName + }); + } + 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 + ); + if (s) { + this.nodeDatas.push({ + category: 5, + id: item.mainId, + name: s.name[0] + }); + } + } + 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({ + category: 3, + id: item.mainId, + name: p.NAME[0].content1 + }); + } + } + 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({ + category: 1, + id: item.mainId, + name: p.NAME[0].content1 + }); + } + } + 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; } } @@ -584,44 +1050,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 = { legend: [ @@ -640,8 +1068,8 @@ legendHoverLink: false, layout: "force", symbolSize: 15, - data: nodeData, - links: links, + data: this.nodeDatas, + links: this.links, categories: this.categories, roam: true, label: { @@ -665,10 +1093,18 @@ }, force: { repulsion: 600, - edgeLength: 300, - }, - }, + edgeLength: 300 + } + } ], + color: [ + "#5470c6", + "#3dae7b", + "#fac858", + "#ee6666", + "#ea7ccc", + "#9a60b4" + ] }; // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 myChart.off("click"); @@ -679,41 +1115,84 @@ }); 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; + const id = params.data.id.split("_")[0]; + const type = params.data.id.split("_")[1]; + if (type == "p") { + // 浜� + 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 == id + ); + const obj = { + id: 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; + } + if (type == "s") { + // 瀛︽淳 + const e = params.event; + const div = document.getElementById("schoolDialog"); + 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 == id + ); + 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"; @@ -815,6 +1294,50 @@ </script> <style> +.customDrawer >>> .el-drawer__header { + margin-bottom: 20px; + border-bottom: 1px solid #eee; + padding: 20px; + box-sizing: border-box; +} + +.drawerTips { + margin-bottom: 20px; + color: #666; +} + +.drawerTable { + width: 100%; +} + +.tableTabs { + width: 100%; + display: flex; +} + +.inputItem { + width: 80%; +} + +.drawerPage { + display: flex; + justify-content: flex-end; + padding: 20px 0; + box-sizing: border-box; +} + +.drawerBtn { + display: flex; + justify-content: flex-end; +} + +.drawerContent { + width: 100%; + height: 100%; + padding: 0 20px; + box-sizing: border-box; +} + #relation { width: 100%; height: 100%; @@ -947,4 +1470,21 @@ cursor: pointer; } } + +.selectActivelyBox { + cursor: pointer; + border: 1px solid #dcdfe6; + border-radius: 4px; + padding: 0 0.12rem; + font-size: 12px; + color: #c0c4cc; +} + +.el-drawer__wrapper { + top: 0.86rem; +} + +::v-deep .el-drawer__open .el-drawer.rtl { + width: 50% !important; +} </style> -- Gitblit v1.9.1