From 20dee1a91f02eaaccfb0e0126dd16c578bf8f4fe Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期四, 25 七月 2024 15:48:08 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary --- src/pages/academicSchools/index.vue | 1545 +++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 1,279 insertions(+), 266 deletions(-) diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue index edb01c5..1e8272e 100644 --- a/src/pages/academicSchools/index.vue +++ b/src/pages/academicSchools/index.vue @@ -4,7 +4,14 @@ > <headNav :idIndex="'6'" text="瀛︽湳娴佹淳" /> <!-- 楂樼骇鎼滅储 --> - <view style="margin-left: 0.6rem; margin-top: 0.1rem; display: flex"> + <view + style=" + padding-left: 0.6rem; + margin-top: 0.1rem; + display: flex; + position: relative; + " + > <advancedSearch @onSearch="onSearch" placehold="璇疯緭鍏ュ叧閿瓧" @@ -30,12 +37,210 @@ @click="onSearch({ text: item }, index)" :class="{ cursor: true, active: hotAciveIndex === index }" v-for="(item, index) in hotKeyList" - :key="item" + :key="item.name" > - {{ item }} + {{ item.name }} </li> </ul> </view> + <view v-if="isAdvancedSearch" class="searchDialog"> + <h3 style="margin-bottom: 0.2rem">楂樼骇鎼滅储</h3> + <el-form + label-width="100px" + :model="formData" + ref="searchForm" + size="mini" + > + <el-row> + <el-col :span="8"> + <el-form-item label="濮撳悕/鍒悕锛�"> + <el-input v-model="formData.name"></el-input> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="娲诲姩鍦帮細"> + <div class="selectActivelyBox" @click="selectActively"> + <p v-if="formData.actively.length == 0">璇烽�夋嫨娲诲姩鍦�</p> + <el-tag + style="margin-right: 5px" + v-for="item in formData.actively" + :key="item.index" + size="small" + type="info" + >{{ item.name }}</el-tag + > + </div> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="浣滃搧锛�"> + <el-input v-model="formData.works"></el-input> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="8"> + <el-form-item label="浜虹墿鏍囩锛�"> + <el-select + multiple + style="width: 100%" + v-model="formData.personTags" + placeholder="璇烽�夋嫨浜虹墿鏍囩" + > + <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 + 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 + 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 + size="mini" + style="background-color: #244a7b; color: #fff" + @click="searchFun" + >鎼滅储</el-button + > + <el-button size="mini" @click="resetForm">閲嶇疆</el-button> + </div> + </el-form> + <div class="fromTable"> + <el-table + :data="tableData" + class="lightBo" + style="width: 100%" + empty-text="鏆傛棤鎼滅储淇℃伅" + size="small" + :border="true" + :height="tableData.length > 0 ? '443' : 'auto'" + > + <el-table-column + prop="id" + label="搴忓彿" + width="70" + ></el-table-column> + <el-table-column prop="name" width="150" label="濮撳悕"> + <template slot-scope="scope"> + <a + style="cursor: pointer; color: #027edc" + @click=" + () => { + currentId = scope.row.id; + getData(); + isAdvancedSearch = false; + } + " + >{{ scope.row.name }}</a + > + </template> + </el-table-column> + <el-table-column prop="alias" label="鍒悕"></el-table-column> + <el-table-column prop="place" label="娲诲姩鍦�"></el-table-column> + <el-table-column + prop="medicalBranch" + label="鍖诲鍒嗙" + width="150" + ></el-table-column> + <el-table-column prop="workName" label="浣滃搧"></el-table-column> + <el-table-column + prop="personLabel" + width="150" + label="浜虹墿鏍囩" + ></el-table-column> + <el-table-column + prop="socialDistinction" + label="绀句細韬唤" + width="150" + ></el-table-column> + <el-table-column + prop="period" + width="150" + label="鏃舵湡" + ></el-table-column> + </el-table> + <div class="drawerPage"> + <el-pagination + class="paging flex" + background + @size-change="handleSizeChangeForm" + @current-change="handleCurrentChangeForm" + :current-page="formData.currentPage" + :page-sizes="[10, 20, 60, 100]" + :page-size="formData.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="formData.total" + > + </el-pagination> + </div> + </div> + </view> + <div v-if="showPerson" class="personDialog"> + <i + class="el-icon-circle-close closeBtn" + @click=" + () => { + showPerson = false; + } + " + ></i> + <el-table :data="personList" style="width: 100%"> + <el-table-column prop="name" label="濮撳悕"> + <template slot-scope="scope"> + <span + style="color: #409eff; cursor: pointer" + @click=" + () => { + currentId = scope.row.id; + getData(); + } + " + >{{ scope.row.name }}</span + > + </template> + </el-table-column> + <el-table-column prop="age" label="鏃朵唬"> </el-table-column> + <el-table-column prop="nativePlace" label="绫嶈疮"> </el-table-column> + <el-table-column prop="alias" label="鍒悕"> </el-table-column> + <el-table-column prop="division" label="鍖诲鍒嗙"> </el-table-column> + </el-table> + </div> </view> <!-- 鍏崇郴琛ㄥ湴鍥� --> @@ -44,7 +249,7 @@ style="margin-top: 0.1rem; flex: 1; width: 100%; position: relative" > <div - v-if="!loading && relationships.length == 0" + v-if="!loading && nodeDatas.length == 0" style=" position: absolute; top: 30%; @@ -53,10 +258,25 @@ text-align: center; font-size: 0.2rem; color: #666; + z-index: 99; " > 鏆傛棤鐩稿叧鏁版嵁 </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; + z-index: 99; + " + ></div> </div> <div id="customDialog" class="customDialog"> <div class="title"> @@ -72,6 +292,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>浠h〃浜虹墿锛歿{ detailData.character }}</p> + <p>閲嶈鍖诲锛歿{ detailData.skilledDoctor }}</p> + <p>浠h〃鎬ц憲浣滐細{{ detailData.works }}</p> + <p>瀛︽淳鎬濇兂锛� {{ detailData.thought }}</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" + style="width: 100%" + height="530" + @selection-change="handleSelectionChange" + row-key="index" + > + <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="骞翠唬鍗�闁�"> + <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 + class="paging flex" + background + @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="drawer = false" type="primary">纰哄畾</el-button> + </div> + </div> + </el-drawer> </view> </template> @@ -79,12 +394,19 @@ import { getPersonData, getHotSearch, - getPDataStatistics + academicSearch, + getPersonTag, + getSocialDistinction, + getDynastyAll, + getAdvancedData, + getPlaceInfo, } from "@/api/index.js"; import * as echarts from "echarts"; export default { data() { return { + // 楂樼礆鎼滅储琛ㄦ牸 + tableData: [], loading: true, hotAciveIndex: "", currentId: 21682, @@ -95,25 +417,79 @@ // 鐑棬鎼滅储 hotKeyList: [], searchKey: "", - // 鍒嗙被 - categories: [], - // 浜虹墿淇℃伅 - infoOfPersons: [], - // 瀛︽湳娴佹淳 - infoOfSchools: [], + categories: [ + { + name: "浜插睘鍏崇郴" + }, + { + name: "甯堟壙鍏崇郴" + }, + { + name: "鏂囩尞浣滃搧" + }, + { + name: "绀句細鍏崇郴" + }, + { + name: "娲诲姩鍦�" + }, + { + name: "瀛︽湳娴佹淳" + } + ], // 褰撳墠浜虹墿淇℃伅 ownInfo: null, detailData: { name: "" }, - isAdvancedSearch: false + isAdvancedSearch: false, + formData: { + name: "", + actively: [], + works: "", + personTags: "", + socialIdentity: "", + period: "", + page: 1, + currentPage: 1, + pageSize: 10, + total: 0, + }, + showPerson: false, + personList: [], + personPageInfo: { + totalCount: 0, + page: 1, + limit: 10 + }, + personTag: [], + socialDistinction: [], + dynastyData: [], + // 鎶藉眽 + gridData: [], + page: 1, + currentPage: 1, + pageSize: 10, + total: 0, + drawer: false, + dynastyId: "", + tableKey: "", + multipleTableSelection: [], + // echarts + infoOfPersons: [], + infoOfSchools: [], + nodeDatas: [], + links: [] }; }, mounted() { this.getData(); - // this.echartsArr(); this.hotSearch(); + // 鑾峰彇浜虹墿鏍囩銆佺ぞ浼氳韩浠� + this.getOptionInfo(); + // 鐛插彇鍦板潃鍒楄〃 + this.getAddressList(); // 鐩戝惉绐楀彛澶у皬鍙樺寲 window.addEventListener("resize", this.relation); }, @@ -121,6 +497,240 @@ this.searchKey = options.keyword; }, methods: { + // 鎼滅储鍦板潃 + searchAddress() { + this.gridData = []; + this.getAddressList(); + }, + // 鍒嗛〉 + handleSizeChange(val) { + this.pageSize = val; + this.getAddressList(); + }, + handleCurrentChange(val) { + this.page = val; + this.getAddressList(); + }, + + handleSizeChangeForm(val) { + this.formData.pageSize = val; + this.searchFun(); + }, + handleCurrentChangeForm(val) { + this.formData.page = val; + this.searchFun(); + }, + // 琛ㄦ牸閫夋嫨 + handleSelectionChange(val) { + const data = val.map((item) => { + return { + ...item, + name: item.currentName, + id: item.dynastyId + }; + }); + this.formData.actively = data; + this.multipleTableSelection = this.formData.actively; + }, + // 鍏ㄩ伕 + setCurrent(str) { + if (str == "cancle") { + this.$refs.multipleTable.clearSelection(); + return false; + } + if (this.gridData.length) { + this.$refs.multipleTable.clearSelection(); + this.gridData.forEach((row) => { + this.$refs.multipleTable.toggleRowSelection(row); + }); + const data = this.gridData.map((item) => { + return { + ...item, + name: item.currentName, + id: item.dynastyId + }; + }); + this.formData.actively = data; + this.multipleTableSelection = this.formData.actively; + } + }, + // 鐛插彇鍦板潃鍒楄〃 + 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?.npage) { + this.total = res.npage.totalCount; + } + if (res?.success && res?.list.length) { + this.gridData = res?.list?.map((item, i) => { + return { + ...item, + index: i + }; + }); + } 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: [], + page: 1, + currentPage: 1, + pageSize: 10, + total: 0, + }; + }, + searchFun() { + const palceData = this.formData.actively?.map((item) => { + return { + ancientName: item.ancientName ?? "", + dynastyId: item.dynastyId, + currentName: item.currentName, + }; + }); + let Obj = { + keyword: this.formData.name, + placeList: [...palceData], + literatureName: this.formData.works, + personTagIdList: this.formData.personTags, + socialDistinctionIdList: this.formData.socialIdentity, + dynastyIdList: this.formData.period, + page: this.formData.page, + pageSize: this.formData.pageSize, + }; + // // 鎼滅储 + getAdvancedData(Obj).then((res) => { + if (res?.success) { + this.tableData = res.list.map((item) => { + return { + id: item.personId, + name: + item?.NAME?.map((e, i) => { + let data = []; + Object.entries(e).forEach((c) => { + if (c[0]?.indexOf("content") > -1) { + data.push(c[1]); + } + }); + return data; + }).join() ?? "", + alias: + item?.ALIAS?.map((e, i) => { + let data = []; + Object.entries(e).forEach((c) => { + if (c[0]?.indexOf("content") > -1) { + data.push(c[1]); + } + }); + return data; + }).join() ?? "", + place: + item?.NATIVE_PLACE?.map((e, i) => { + let data = []; + Object.entries(e).forEach((c) => { + if (c[0]?.indexOf("content") > -1) { + data.push(c[1]); + } + }); + return data; + }).join() ?? "", + medicalBranch: + item?.MEDICAL_BRANCH?.map((e, i) => { + let data = []; + Object.entries(e).forEach((c) => { + if (c[0]?.indexOf("content") > -1) { + data.push(c[1]); + } + }); + return data; + }).join() ?? "", + socialDistinction: + item?.SOCIAL_IDENTITY?.map((e, i) => { + let data = []; + Object.entries(e).forEach((c) => { + if (c[0]?.indexOf("content") > -1) { + data.push(c[1]); + } + }); + return data; + }).join() ?? "", + period: + item?.PERIOD?.map((e, i) => { + let data = []; + Object.entries(e).forEach((c) => { + if (c[0]?.indexOf("content") > -1) { + data.push(c[1]); + } + }); + return data; + }).join() ?? "", + workName: + item?.REPRESENTATIVE_WORKS?.map((e, i) => { + let data = []; + Object.entries(e).forEach((c) => { + if (c[0]?.indexOf("content") > -1) { + data.push(c[1]); + } + }); + return data; + }).join() ?? "", + personLabel: + item?.PERSON_LABEL?.map((e, i) => { + let data = []; + Object.entries(e).forEach((c) => { + if (c[0]?.indexOf("content") > -1) { + data.push(c[1]); + } + }); + return data; + }).join() ?? "", + }; + }); + if (res?.npage) { + // 鎬绘暟閲� + this.formData.total = res.npage.totalCount; + } + } + }); + }, + + selectActively() { + this.drawer = true; + }, + + handleClose(done) { + done(); + }, + // 鑾峰彇浜虹墿鍏崇郴 getPersonInfo(arr, str, newArr, order, type, parent) { for (let i = 0; i < arr.length; i++) { @@ -132,12 +742,15 @@ 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 + name: personInfo?.NAME[0]?.content1, + category: type, + symbolSize: 15 }; + if (order > 80) { + order = 80; + } if (str == "literatureList") { obj.relationTypeName = ele.literatureName; } @@ -152,7 +765,7 @@ } newArr.push(obj); if (ele["kinList"] && ele["kinList"]?.length) { - order++; + order += 15; this.getPersonInfo( ele["kinList"], "kinList", @@ -163,7 +776,7 @@ ); } if (ele["teacherStudentList"] && ele["teacherStudentList"]?.length) { - order++; + order += 15; this.getPersonInfo( ele["teacherStudentList"], "teacherStudentList", @@ -178,7 +791,7 @@ ele["literatureList"], "literatureList" ); - order++; + order += 15; this.getPersonInfo( data, "literatureList", @@ -191,7 +804,7 @@ if (ele["socialList"] && ele["socialList"]?.length) { const data = this.changeLiterature(ele["socialList"], "socialList"); - order++; + order += 15; this.getPersonInfo( data, "socialList", @@ -203,12 +816,12 @@ } if (ele["placeList"] && ele["placeList"]?.length) { const data = this.changeLiterature(ele["placeList"], "placeList"); - order++; + order += 15; this.getPersonInfo(data, "placeList", newArr, order, 4, personInfo); } if (ele["schoolList"] && ele["schoolList"]?.length) { const data = this.changeLiterature(ele["schoolList"], "schoolList"); - order++; + order += 15; this.getPersonInfo( data, "schoolList", @@ -229,16 +842,16 @@ 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]; + if (ele["personList"] && ele["personList"]?.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) { + if (ele[str] && data?.length) { ele[str].push(...data); } } @@ -272,161 +885,369 @@ 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) { - // 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; - 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"); - 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 - ]; - // 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); - }); + if (res && res.object) { + this.infoOfPersons = res?.object?.infoOfPersons; + this.infoOfSchools = res?.object?.infoOfSchools; + this.nodeDatas = []; + this.links = []; + this.handleData([res.object.personChain], null); + this.loading = false; + this.relation(); + } else { + this.loading = false; + this.nodeDatas = []; + 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; + 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.id) { + size += 5; + } + } + return { + ...item, + symbolSize: size > 80 ? 80 : size + }; + }); let FontSize = 12; // 瀛椾綋澶у皬 let BorderWidth = 2; // 杈规澶у皬 @@ -449,53 +1270,8 @@ SymbolSize = 70; Distance = 22; } - // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾� - var links = []; - relationships.forEach((relationship, i) => { - var sourceIndex = nodes.findIndex( - (node) => node.name === 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: { - type: "image", - image: "/static/image/characterRelationBg.png", - size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱� - position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮 - }, - tooltip: {}, legend: [ { left: 20, @@ -509,20 +1285,17 @@ series: [ { type: "graph", - legendHoverLink: true, + legendHoverLink: false, layout: "force", symbolSize: 15, - data: nodeData, - links: links, + data: this.nodeDatas, + links: this.links, categories: this.categories, roam: true, label: { show: true, position: "right", formatter: "{b}" - }, - labelLayout: { - hideOverlap: true }, scaleLimit: { min: 0.4, @@ -543,6 +1316,14 @@ edgeLength: 300 } } + ], + color: [ + "#5470c6", + "#3dae7b", + "#fac858", + "#ee6666", + "#ea7ccc", + "#9a60b4" ] }; // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 @@ -554,62 +1335,128 @@ }); 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.infoOfSchools?.find((i) => i.schoolId == id); + console.log(data); + debugger + const obj = { + id: params.data.id, + name: data.name[0], + character: data.important_PEOPLE + ? data.important_PEOPLE.map((item) => item.content2).join("銆�") + : "", + skilledDoctor: data.important_PHYSICIAN + ? data.important_PHYSICIAN.map((item) => item.content2).join("銆�") + : "", + works: data.important_WORK + ? data.important_WORK.map((item) => item.content).join("銆�") + : "", + thought: data.school_THOUGHT + ? data.school_THOUGHT.map((item) => item.content).join("銆�") + : "" + }; + this.detailData = obj; + } }, + closeDom() { const div = document.getElementById("customDialog"); div.style.display = "none"; }, + // 鍩虹鎼滅储 onSearch(val, index) { if (index !== undefined) { + // 鐑棬鎼滅储鍏抽敭瀛楋紝鐩存帴鏌ヨ鏁版嵁 this.searchKey = ""; this.hotAciveIndex = index; + this.currentId = val.text.id; + this.getData(); } else { this.hotAciveIndex = ""; + // 鎼滅储鍏堟樉绀轰汉鐗╁垪琛� + this.personPageInfo.page = 1; + this.searchPerson(val.text); } - this.getData(val.text); }, - // 鐐瑰嚮涓嬮潰鐨勬湞浠f寜閽� - dynastyBottomClick(item) { - this.dynastyColor = item.id; - this.onSearch({ - text: item.name + + // 鏍规嵁鍏抽敭瀛楁绱汉鐗� + searchPerson(key) { + academicSearch({ + keyword: key, + page: this.personPageInfo.page, + pageSize: this.personPageInfo.limit + }).then((res) => { + this.personList = res.list.map((item) => { + return { + id: item.personId, + name: item.name, + age: + item.periodList && item.periodList.length + ? item.periodList[0].content2 + : "-", + nativePlace: + item.nativePlaceList && item.nativePlaceList.length + ? item.nativePlaceList[0].content1 + : "-", + alias: + item.aliasList && item.aliasList.length + ? item.aliasList[0].content2 + : "-", + division: + item.medicalBranchList && item.medicalBranchList.length + ? item.medicalBranchList[0].content1 + : "-" + }; + }); + this.showPerson = true; }); }, + // 鍏崇郴鍥� 鐐瑰嚮閲岄潰鐨勫厓绱� spaceTimeArr(id) { // 鍏崇郴鍥剧殑鏁版嵁 @@ -617,6 +1464,7 @@ url: "/pages/character/detail?id=" + id }); }, + // 鑾峰彇鏈濅唬echarts鐨勬暟鎹� echartsArr() { getDataStatistics().then((res) => { @@ -630,16 +1478,21 @@ }); }); }, + // 鐑棬鎼滅储 hotSearch() { getHotSearch().then((res) => { const indexList = Object.keys(res.object); indexList.sort((a, b) => parseInt(b) - parseInt(a)); this.hotKeyList = indexList.map((item) => { - return res.object[item]; + return { + id: item, + name: res.object[item] + }; }); }); }, + isAvancedClick() { this.isAdvancedSearch = !this.isAdvancedSearch; // this.$nextTick(() => { @@ -650,16 +1503,126 @@ // document.querySelector(".fbox1").style.height = box1Height + "px"; // } // }); - }, + } } }; </script> <style> -#relatio { +.fromTable { + width: 100%; + padding: 40px 0; + box-sizing: border-box; +} + +.fromTable >>> .el-table thead th.el-table__cell { + background-color: rgb(194 208 217) !important; + color: #333; + font-weight: normal; + font-size: 14px; +} + +.fromTable + .drawerPage + >>> .el-pagination.is-background + .el-pager + li:not(.disabled).active { + background-color: rgb(36, 74, 123) !important; +} + +.customDrawer >>> .el-drawer__header { + margin-bottom: 20px; + border-bottom: 1px solid #eee; + padding: 20px; + box-sizing: border-box; +} + +.headerClassBg { + background-color: rgb(95, 127, 168); +} + +.drawerTips { + margin-bottom: 20px; + color: #666; +} + +.drawerTable { + width: 100%; +} + +.drawerTable >>> .el-table thead th.el-table__cell { + background-color: rgb(231, 236, 239) !important; + color: #333; + font-weight: normal; +} + +.tableTabs { + width: 100%; + display: flex; + margin-bottom: 20px; +} + +.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; +} + +/* 鍒嗛〉 */ +.paging ::v-deep .btn-prev, +.paging ::v-deep .btn-next { + border: 0; + height: 30px; +} + +.paging ::v-deep .btn-prev span, +.paging ::v-deep .btn-next span { + font-size: 0.12rem; + height: 0.3rem; + line-height: 0.3rem; + background-color: #fff; + color: #9e9e9e; + text-align: center; + border: 1px solid #9e9e9e; + padding: 0 0.1rem; +} + +.paging ::v-deep .el-pager li { + font-size: 0.1rem; + width: 0.28rem; + height: 0.3rem; + line-height: 0.3rem; + background-color: #fff; + color: #9e9e9e; + text-align: center; + border: 1px solid #9e9e9e; +} + +#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 { @@ -751,4 +1714,54 @@ } } } + +.searchDialog { + position: absolute; + top: 0.68rem; + left: 0; + right: 0; + z-index: 999; + padding: 0.1rem 0.4rem; + background: #fff; + min-height: 2rem; +} + +.personDialog { + position: absolute; + top: 0.68rem; + z-index: 999; + padding: 0.1rem; + background: #fff; + border-radius: 6px; + box-shadow: 0 0 10px -3px #000; + .closeBtn { + position: absolute; + right: -10px; + top: -10px; + width: 24px; + height: 24px; + font-size: 24px; + background-color: #fff; + border-radius: 50%; + color: #f56c6c; + 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