| | |
| | | <view |
| | | style="width: 100%; height: 100%; display: flex; flex-direction: column" |
| | | > |
| | | <headNav :idIndex="'6'" text="学术流派" /> |
| | | <headNav :idIndex="'6'" text="学术图谱" /> |
| | | <!-- 高级搜索 --> |
| | | <view |
| | | style=" |
| | |
| | | <el-button |
| | | size="mini" |
| | | style="background-color: #244a7b; color: #fff" |
| | | @click="searchFun" |
| | | @click=" |
| | | () => { |
| | | searchKey = ''; |
| | | formData.page = 1; |
| | | searchFun(); |
| | | } |
| | | " |
| | | >搜索</el-button |
| | | > |
| | | <el-button size="mini" @click="resetForm">重置</el-button> |
| | | </div> |
| | | </el-form> |
| | | <div style="font-size: 14px"> |
| | | 注:当前数据较多,可能会出现卡死的情况,请尽量精确查询或查看某一类数据关系 |
| | | </div> |
| | | <div class="fromTable"> |
| | | <el-table |
| | | :data="tableData" |
| | |
| | | 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="personName" width="120" label="姓名"> |
| | | <el-table-column prop="name" width="150" label="姓名"> |
| | | <template slot-scope="scope"> |
| | | <a |
| | | style="cursor: pointer; color: #027edc" |
| | | @click="gotoDetail(scope.row.id)" |
| | | >{{ scope.row.personName }}</a |
| | | @click=" |
| | | () => { |
| | | currentId = scope.row.id; |
| | | getData(); |
| | | isAdvancedSearch = false; |
| | | } |
| | | " |
| | | >{{ scope.row.name }}</a |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="personAlias" label="别名"></el-table-column> |
| | | <el-table-column prop="palce" label="活动地"></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="birthYear" |
| | | prop="medicalBranch" |
| | | label="医学分科" |
| | | width="120" |
| | | width="150" |
| | | ></el-table-column> |
| | | <el-table-column prop="deathYear" label="作品"></el-table-column> |
| | | <el-table-column prop="workName" label="作品"></el-table-column> |
| | | <el-table-column |
| | | prop="nativePlace" |
| | | width="120" |
| | | prop="personLabel" |
| | | width="150" |
| | | label="人物标签" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="socialDistinction" |
| | | label="社会身份" |
| | | width="120" |
| | | width="150" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="official" |
| | | width="120" |
| | | prop="period" |
| | | width="150" |
| | | label="时期" |
| | | ></el-table-column> |
| | | </el-table> |
| | | <div style="text-align: right; padding-top: 20px"> |
| | | <el-button |
| | | style="width: 120px; background-color: #244a7b; color: #fff" |
| | | >确认</el-button |
| | | <div class="drawerPage"> |
| | | <el-pagination |
| | | class="paging flex" |
| | | background |
| | | @size-change="handleSizeChangeForm" |
| | | @current-change="handleCurrentChangeForm" |
| | | :current-page="formData.page" |
| | | :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> |
| | |
| | | } |
| | | " |
| | | ></i> |
| | | <el-table :data="personList" style="width: 100%"> |
| | | <el-table :data="personList" style="width: 100%" :max-height="600"> |
| | | <el-table-column prop="name" label="姓名"> |
| | | <template slot-scope="scope"> |
| | | <span |
| | |
| | | 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%; |
| | |
| | | background |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="currentPage" |
| | | :current-page="page" |
| | | :page-sizes="[10, 20, 60, 100]" |
| | | :page-size="pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | |
| | | getPersonTag, |
| | | getSocialDistinction, |
| | | getDynastyAll, |
| | | getPlaceInfo |
| | | getAdvancedData, |
| | | getPlaceInfo, |
| | | } from "@/api/index.js"; |
| | | import * as echarts from "echarts"; |
| | | export default { |
| | |
| | | // 分类 |
| | | categories: [ |
| | | { |
| | | name: "亲属关系" |
| | | name: "亲属关系", |
| | | }, |
| | | { |
| | | name: "师承关系" |
| | | name: "师承关系", |
| | | }, |
| | | { |
| | | name: "文献作品" |
| | | name: "文献作品", |
| | | }, |
| | | { |
| | | name: "社会关系" |
| | | name: "社会关系", |
| | | }, |
| | | { |
| | | name: "活动地" |
| | | name: "活动地", |
| | | }, |
| | | { |
| | | name: "学术流派" |
| | | name: "学术图谱" |
| | | } |
| | | ], |
| | | // 当前人物信息 |
| | | ownInfo: null, |
| | | detailData: { |
| | | name: "" |
| | | name: "", |
| | | }, |
| | | isAdvancedSearch: false, |
| | | formData: { |
| | |
| | | works: "", |
| | | personTags: "", |
| | | socialIdentity: "", |
| | | period: "" |
| | | period: "", |
| | | page: 1, |
| | | currentPage: 1, |
| | | pageSize: 10, |
| | | total: 0, |
| | | }, |
| | | showPerson: false, |
| | | personList: [], |
| | | personPageInfo: { |
| | | totalCount: 0, |
| | | page: 1, |
| | | limit: 10 |
| | | limit: 10, |
| | | }, |
| | | personTag: [], |
| | | socialDistinction: [], |
| | |
| | | infoOfPersons: [], |
| | | infoOfSchools: [], |
| | | nodeDatas: [], |
| | | links: [] |
| | | links: [], |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | methods: { |
| | | // 搜索地址 |
| | | searchAddress() { |
| | | this.page = 1; |
| | | this.gridData = []; |
| | | this.getAddressList(); |
| | | }, |
| | | // 分页 |
| | | // 分页 |
| | | handleSizeChange(val) { |
| | | this.pageSize = val; |
| | | this.getAddressList(); |
| | |
| | | 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 |
| | | id: item.dynastyId, |
| | | }; |
| | | }); |
| | | this.formData.actively = data; |
| | |
| | | return { |
| | | ...item, |
| | | name: item.currentName, |
| | | id: item.dynastyId |
| | | id: item.dynastyId, |
| | | }; |
| | | }); |
| | | this.formData.actively = data; |
| | |
| | | getAddressList() { |
| | | const data = { |
| | | page: this.page, |
| | | pageSize: this.pageSize |
| | | pageSize: this.pageSize, |
| | | }; |
| | | if (this.dynastyId != "") { |
| | | data["dynastyId"] = this.dynastyId; |
| | |
| | | this.gridData = res?.list?.map((item, i) => { |
| | | return { |
| | | ...item, |
| | | index: i |
| | | index: i, |
| | | }; |
| | | }); |
| | | setTimeout(() => { |
| | | this.multipleTableSelection.forEach((row) => { |
| | | this.$refs.multipleTable.toggleRowSelection(row); |
| | | }); |
| | | this.formData.actively = this.multipleTableSelection; |
| | | }, 2000); |
| | | } else { |
| | | this.gridData = []; |
| | | } |
| | |
| | | name: "", |
| | | actively: [], |
| | | works: "", |
| | | personTags: "", |
| | | socialIdentity: "", |
| | | period: "" |
| | | personTags: [], |
| | | socialIdentity: [], |
| | | period: [], |
| | | page: 1, |
| | | currentPage: 1, |
| | | pageSize: 10, |
| | | total: 0, |
| | | }; |
| | | this.formData.page = 1; |
| | | this.searchFun(); |
| | | }, |
| | | |
| | | searchFun() { |
| | | console.log(this.formData); |
| | | 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() { |
| | |
| | | parentName: parent?.NAME[0]?.content1 ?? parent.parentName, |
| | | name: personInfo?.NAME[0]?.content1, |
| | | category: type, |
| | | symbolSize: 15 |
| | | symbolSize: 15, |
| | | }; |
| | | if (order > 80) { |
| | | order = 80; |
| | |
| | | const data = item[str]?.map((e) => { |
| | | return { |
| | | ...e, |
| | | personId: item.personId |
| | | personId: item.personId, |
| | | }; |
| | | }); |
| | | if (ele[str] && data?.length) { |
| | |
| | | } |
| | | return arr; |
| | | }, |
| | | |
| | | //数组去重 |
| | | deduplicateArray(arr, idKey) { |
| | | // 使用一个辅助对象来跟踪已经见过的ID |
| | |
| | | // place = [...newArr]; |
| | | // } |
| | | // if (obj.schoolList?.length) { |
| | | // this.categories.push({ name: "学术流派" }); |
| | | // this.categories.push({ name: "学术图谱" }); |
| | | // let newArr = []; |
| | | // const data = this.changeLiterature(obj.schoolList, "schoolList"); |
| | | // this.getPersonInfo( |
| | |
| | | id: item.mainId, |
| | | name: mainPerson.NAME[0].content1, |
| | | itemStyle: { |
| | | color: "#244a7b" |
| | | } |
| | | color: "#244a7b", |
| | | }, |
| | | }); |
| | | } else { |
| | | switch (parent.thisType) { |
| | |
| | | this.nodeDatas.push({ |
| | | category: 0, |
| | | id: item.mainId, |
| | | name: p.NAME[0].content1 |
| | | name: p.NAME[0].content1, |
| | | }); |
| | | } |
| | | } |
| | |
| | | padding: [3, 8], |
| | | borderRadius: 30, |
| | | position: "middle", // 设置标签文本在线的中间位置上居中显示 |
| | | distance: -10 // 将标签放置在连接线上 |
| | | } |
| | | distance: -10, // 将标签放置在连接线上 |
| | | }, |
| | | }); |
| | | break; |
| | | case 2: |
| | |
| | | this.nodeDatas.push({ |
| | | category: 2, |
| | | id: item.mainId, |
| | | name: item.literatureName |
| | | name: item.literatureName, |
| | | }); |
| | | } |
| | | this.links.push({ |
| | | source: item.mainId, |
| | | target: parent.mainId |
| | | target: parent.mainId, |
| | | }); |
| | | break; |
| | | case 3: |
| | |
| | | this.nodeDatas.push({ |
| | | category: 4, |
| | | id: item.mainId, |
| | | name: item.ancientName |
| | | name: item.ancientName, |
| | | }); |
| | | } |
| | | this.links.push({ |
| | | source: item.mainId, |
| | | target: parent.mainId |
| | | target: parent.mainId, |
| | | }); |
| | | break; |
| | | case 4: |
| | |
| | | this.nodeDatas.push({ |
| | | category: 5, |
| | | id: item.mainId, |
| | | name: s.name[0] |
| | | name: s.name[0], |
| | | }); |
| | | } |
| | | } |
| | | this.links.push({ |
| | | source: item.mainId, |
| | | target: parent.mainId |
| | | target: parent.mainId, |
| | | }); |
| | | break; |
| | | case 5: |
| | |
| | | this.nodeDatas.push({ |
| | | category: 3, |
| | | id: item.mainId, |
| | | name: p.NAME[0].content1 |
| | | name: p.NAME[0].content1, |
| | | }); |
| | | } |
| | | } |
| | |
| | | padding: [3, 8], |
| | | borderRadius: 30, |
| | | position: "middle", // 设置标签文本在线的中间位置上居中显示 |
| | | distance: -10 // 将标签放置在连接线上 |
| | | } |
| | | distance: -10, // 将标签放置在连接线上 |
| | | }, |
| | | }); |
| | | break; |
| | | case 6: |
| | |
| | | this.nodeDatas.push({ |
| | | category: 1, |
| | | id: item.mainId, |
| | | name: p.NAME[0].content1 |
| | | name: p.NAME[0].content1, |
| | | }); |
| | | } |
| | | } |
| | |
| | | padding: [3, 8], |
| | | borderRadius: 30, |
| | | position: "middle", // 设置标签文本在线的中间位置上居中显示 |
| | | distance: -10 // 将标签放置在连接线上 |
| | | } |
| | | distance: -10, // 将标签放置在连接线上 |
| | | }, |
| | | }); |
| | | break; |
| | | } |
| | |
| | | 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 }); |
| | | } |
| | |
| | | } |
| | | return { |
| | | ...item, |
| | | symbolSize: size > 80 ? 80 : size |
| | | symbolSize: size > 80 ? 80 : size, |
| | | }; |
| | | }); |
| | | |
| | |
| | | orient: "vertical", |
| | | data: this.categories.map(function (a) { |
| | | return a.name; |
| | | }) |
| | | } |
| | | }), |
| | | }, |
| | | ], |
| | | series: [ |
| | | { |
| | |
| | | label: { |
| | | show: true, |
| | | position: "right", |
| | | formatter: "{b}" |
| | | formatter: "{b}", |
| | | }, |
| | | scaleLimit: { |
| | | min: 0.4, |
| | | max: 2 |
| | | max: 2, |
| | | }, |
| | | lineStyle: { |
| | | color: "source", |
| | | curveness: 0.2 |
| | | curveness: 0.2, |
| | | }, |
| | | emphasis: { |
| | | focus: "adjacency", |
| | | lineStyle: { |
| | | width: 5 |
| | | } |
| | | width: 5, |
| | | }, |
| | | }, |
| | | force: { |
| | | repulsion: 600, |
| | | edgeLength: 300 |
| | | } |
| | | } |
| | | edgeLength: 300, |
| | | }, |
| | | }, |
| | | ], |
| | | color: [ |
| | | "#5470c6", |
| | |
| | | "#fac858", |
| | | "#ee6666", |
| | | "#ea7ccc", |
| | | "#9a60b4" |
| | | ] |
| | | "#9a60b4", |
| | | ], |
| | | }; |
| | | // 设置点击事件监听 |
| | | myChart.off("click"); |
| | |
| | | i += 1; |
| | | return e["content" + i]; |
| | | }).join("、") ?? "", |
| | | biography: data?.BIOGRAPHY ?? "" |
| | | biography: data?.BIOGRAPHY ?? "", |
| | | }; |
| | | this.detailData = obj; |
| | | } |
| | |
| | | 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("、") |
| | | character: data.important_people |
| | | ? data.important_people.map((item) => item.personName).join("、") |
| | | : "", |
| | | skilledDoctor: data.important_PHYSICIAN |
| | | ? data.important_PHYSICIAN.map((item) => item.content2).join("、") |
| | | skilledDoctor: data.important_physician |
| | | ? data.important_physician.map((item) => item.personName).join("、") |
| | | : "", |
| | | works: data.important_WORK |
| | | ? data.important_WORK.map((item) => item.content).join("、") |
| | | works: data.important_work |
| | | ? data.important_work.map((item) => item.literatureTitle).join("、") |
| | | : "", |
| | | thought: data.school_THOUGHT |
| | | ? data.school_THOUGHT.map((item) => item.content).join("、") |
| | | : "" |
| | | thought: data.school_introduction |
| | | ? data.school_introduction.map((item) => item).join("、") |
| | | : "", |
| | | }; |
| | | this.detailData = obj; |
| | | } |
| | |
| | | const div = document.getElementById("customDialog"); |
| | | div.style.display = "none"; |
| | | }, |
| | | |
| | | // 基础搜索 |
| | | onSearch(val, index) { |
| | | console.log(val); |
| | | if (index !== undefined) { |
| | | // 热门搜索关键字,直接查询数据 |
| | | this.searchKey = ""; |
| | |
| | | this.searchPerson(val.text); |
| | | } |
| | | }, |
| | | |
| | | // 根据关键字检索人物 |
| | | searchPerson(key) { |
| | | academicSearch({ |
| | | keyword: key, |
| | | page: this.personPageInfo.page, |
| | | pageSize: this.personPageInfo.limit |
| | | page: 1, |
| | | pageSize: 999 |
| | | }).then((res) => { |
| | | this.personList = res.list.map((item) => { |
| | | return { |
| | |
| | | division: |
| | | item.medicalBranchList && item.medicalBranchList.length |
| | | ? item.medicalBranchList[0].content1 |
| | | : "-" |
| | | : "-", |
| | | }; |
| | | }); |
| | | this.showPerson = true; |
| | | }); |
| | | }, |
| | | |
| | | // 关系图 点击里面的元素 |
| | | spaceTimeArr(id) { |
| | | // 关系图的数据 |
| | | uni.navigateTo({ |
| | | url: "/pages/character/detail?id=" + id |
| | | url: "/pages/character/detail?id=" + id, |
| | | }); |
| | | }, |
| | | |
| | | // 获取朝代echarts的数据 |
| | | echartsArr() { |
| | | getDataStatistics().then((res) => { |
| | |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | // 热门搜索 |
| | | hotSearch() { |
| | | getHotSearch().then((res) => { |
| | |
| | | this.hotKeyList = indexList.map((item) => { |
| | | return { |
| | | id: item, |
| | | name: res.object[item] |
| | | name: res.object[item], |
| | | }; |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | isAvancedClick() { |
| | | this.isAdvancedSearch = !this.isAdvancedSearch; |
| | | // this.$nextTick(() => { |
| | |
| | | // document.querySelector(".fbox1").style.height = box1Height + "px"; |
| | | // } |
| | | // }); |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | |
| | | 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 { |
| | |
| | | min-height: 240px; |
| | | display: none; |
| | | position: fixed; |
| | | z-index: 99999999; |
| | | z-index: 9999999; |
| | | border-radius: 2px; |
| | | background: #fff; |
| | | } |