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 | 1764 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 1,756 insertions(+), 8 deletions(-) diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue index 6f61006..1e8272e 100644 --- a/src/pages/academicSchools/index.vue +++ b/src/pages/academicSchools/index.vue @@ -1,19 +1,1767 @@ <template> - <view> - <headNav :idIndex="6" text="瀛︽湳娴佹淳" /> + <view + style="width: 100%; height: 100%; display: flex; flex-direction: column" + > + <headNav :idIndex="'6'" text="瀛︽湳娴佹淳" /> + <!-- 楂樼骇鎼滅储 --> + <view + style=" + padding-left: 0.6rem; + margin-top: 0.1rem; + display: flex; + position: relative; + " + > + <advancedSearch + @onSearch="onSearch" + placehold="璇疯緭鍏ュ叧閿瓧" + :isAvancedTrue="false" + :keyword="searchKey" + /> + <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.name" + > + {{ 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> + + <!-- 鍏崇郴琛ㄥ湴鍥� --> + <div + id="relation" + style="margin-top: 0.1rem; flex: 1; width: 100%; position: relative" + > + <div + v-if="!loading && nodeDatas.length == 0" + style=" + position: absolute; + top: 30%; + left: 0; + right: 0; + 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"> + <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> + <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> <script> -// import * as echarts from "echarts"; -// import axios from "axios"; +import { + getPersonData, + getHotSearch, + academicSearch, + getPersonTag, + getSocialDistinction, + getDynastyAll, + getAdvancedData, + getPlaceInfo, +} from "@/api/index.js"; +import * as echarts from "echarts"; export default { data() { - return {}; + return { + // 楂樼礆鎼滅储琛ㄦ牸 + tableData: [], + loading: true, + hotAciveIndex: "", + currentId: 21682, + // echarts鏁版嵁 + nodes: [], + // echarts涓よ�呯殑鍏崇郴 + relationships: [], + // 鐑棬鎼滅储 + hotKeyList: [], + searchKey: "", + // 鍒嗙被 + categories: [ + { + name: "浜插睘鍏崇郴" + }, + { + name: "甯堟壙鍏崇郴" + }, + { + name: "鏂囩尞浣滃搧" + }, + { + name: "绀句細鍏崇郴" + }, + { + name: "娲诲姩鍦�" + }, + { + name: "瀛︽湳娴佹淳" + } + ], + // 褰撳墠浜虹墿淇℃伅 + ownInfo: null, + detailData: { + name: "" + }, + 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: [] + }; }, - onLoad(options) {}, - methods: {} + mounted() { + this.getData(); + this.hotSearch(); + // 鑾峰彇浜虹墿鏍囩銆佺ぞ浼氳韩浠� + this.getOptionInfo(); + // 鐛插彇鍦板潃鍒楄〃 + this.getAddressList(); + // 鐩戝惉绐楀彛澶у皬鍙樺寲 + window.addEventListener("resize", this.relation); + }, + onLoad(options) { + 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++) { + const ele = arr[i]; + const personInfo = this.infoOfPersons.find( + (item) => item.id == ele.personId + ); + if (personInfo?.id) { + const obj = { + personId: ele.personId, + parentId: parent.id, + relationTypeName: ele.relationTypeName, + parentName: parent?.NAME[0]?.content1 ?? parent.parentName, + name: personInfo?.NAME[0]?.content1, + category: type, + symbolSize: 15 + }; + 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["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 (ele[str] && data?.length) { + ele[str].push(...data); + } + } + } + } + } + return arr; + }, + + //鏁扮粍鍘婚噸 + deduplicateArray(arr, idKey) { + // 浣跨敤涓�涓緟鍔╁璞℃潵璺熻釜宸茬粡瑙佽繃鐨処D + const seen = {}; + // 浣跨敤filter鏂规硶杩囨护鏁扮粍 + const deduplicatedArray = arr.filter((item) => { + // 鑾峰彇褰撳墠瀵硅薄鐨処D + const id = item[idKey]; + // 濡傛灉ID鍦ㄨ緟鍔╁璞′腑涓嶅瓨鍦紝鍒欏皢鍏舵坊鍔犲埌瀵硅薄骞惰繑鍥瀟rue + if (!seen[id]) { + seen[id] = true; + return true; + } + // 濡傛灉ID宸茬粡瀛樺湪锛岃繑鍥瀎alse + return false; + }); + + return deduplicatedArray; + }, + + // 鏌ヨ璇︽儏 + getData() { + this.loading = true; + getPersonData(this.currentId).then((res) => { + 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.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); + // 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁 + 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; // 杈规澶у皬 + let SymbolSize = 80; // 灏哄璺濈 + let Distance = 10; + // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣� + if (window.innerWidth > 2560 && window.innerWidth <= 3840) { + FontSize = 20; + BorderWidth = 5; + SymbolSize = 90; + Distance = 33; + } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) { + FontSize = 18; + BorderWidth = 4; + SymbolSize = 80; + Distance = 22; + } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) { + FontSize = 14; + BorderWidth = 4; + SymbolSize = 70; + Distance = 22; + } + var option; + option = { + legend: [ + { + left: 20, + top: 20, + orient: "vertical", + data: this.categories.map(function (a) { + return a.name; + }) + } + ], + series: [ + { + type: "graph", + legendHoverLink: false, + layout: "force", + symbolSize: 15, + data: this.nodeDatas, + links: this.links, + categories: this.categories, + roam: true, + label: { + show: true, + position: "right", + formatter: "{b}" + }, + scaleLimit: { + min: 0.4, + max: 2 + }, + lineStyle: { + color: "source", + curveness: 0.2 + }, + emphasis: { + focus: "adjacency", + lineStyle: { + width: 5 + } + }, + force: { + repulsion: 600, + edgeLength: 300 + } + } + ], + color: [ + "#5470c6", + "#3dae7b", + "#fac858", + "#ee6666", + "#ea7ccc", + "#9a60b4" + ] + }; + // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 + myChart.off("click"); + myChart.on("click", (params) => { + if (params.dataType === "node") { + this.creatDom(params); + } + }); + myChart.setOption(option); + }, + + creatDom(params) { + 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); + } + }, + + // 鏍规嵁鍏抽敭瀛楁绱汉鐗� + 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) { + // 鍏崇郴鍥剧殑鏁版嵁 + uni.navigateTo({ + url: "/pages/character/detail?id=" + id + }); + }, + + // 鑾峰彇鏈濅唬echarts鐨勬暟鎹� + echartsArr() { + getDataStatistics().then((res) => { + res.object.dynastyStatistic.details.map((item, index) => { + // this.dynasty.id = item.dynastyId + // this.dynasty.name = item.dynastyName + // this.dynasty.coord = item.count + this.dynasty[index].id = item.dynastyId; + this.dynasty[index].name = item.dynastyName; + this.dynasty[index].coord = item.count; + }); + }); + }, + + // 鐑棬鎼滅储 + hotSearch() { + getHotSearch().then((res) => { + const indexList = Object.keys(res.object); + indexList.sort((a, b) => parseInt(b) - parseInt(a)); + this.hotKeyList = indexList.map((item) => { + return { + id: item, + name: res.object[item] + }; + }); + }); + }, + + 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></style> +<style> +.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 { + 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) { +} + +@media screen and (min-width: 1366px) and (max-width: 1920px) { +} + +::v-deep .uni-input-placeholder { + line-height: 1; + font-size: 0.12rem; +} + +::v-deep .ffff { + border-radius: 0.5rem; +} + +::v-deep .widget_button { + border-radius: 0.5rem; + margin: 0.02rem; +} + +.hotSearch { + font-size: 0.12rem; + color: #2c2c2c; + + li { + color: #244a7b; + margin: 0 0.1rem; + color: #244a7b; + &.active { + color: #027edc; + font-weight: bold; + } + } +} + +.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