| | |
| | | > |
| | | <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="请输入关键字" |
| | |
| | | v-for="(item, index) in hotKeyList" |
| | | :key="item" |
| | | > |
| | | {{ 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" 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="活动地:"> |
| | | <el-select |
| | | style="width: 100%" |
| | | v-model="formData.actively" |
| | | placeholder="请选择活动地" |
| | | > |
| | | <!-- <el-option label="区域一" value="shanghai"></el-option> --> |
| | | <!-- <el-option label="区域二" value="beijing"></el-option> --> |
| | | </el-select> |
| | | </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 |
| | | style="width: 100%" |
| | | v-model="formData.personTags" |
| | | placeholder="请选择人物标签" |
| | | > |
| | | <!-- <el-option label="区域一" value="shanghai"></el-option> --> |
| | | <!-- <el-option label="区域二" value="beijing"></el-option> --> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="社会身份:"> |
| | | <el-select |
| | | style="width: 100%" |
| | | v-model="formData.socialIdentity" |
| | | placeholder="请选择社会身份" |
| | | > |
| | | <!-- <el-option label="区域一" value="shanghai"></el-option> --> |
| | | <!-- <el-option label="区域二" value="beijing"></el-option> --> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="时期:"> |
| | | <el-select |
| | | style="width: 100%" |
| | | v-model="formData.period" |
| | | placeholder="请选择时期" |
| | | > |
| | | <!-- <el-option label="区域一" value="shanghai"></el-option> --> |
| | | <!-- <el-option label="区域二" value="beijing"></el-option> --> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <div style="text-align: right"> |
| | | <el-button type="primary" size="mini">搜索</el-button> |
| | | <el-button size="mini">重置</el-button> |
| | | </div> |
| | | </view> |
| | | <div v-if="showPerson" class="personDialog"> |
| | | <i |
| | | 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> |
| | | |
| | | <!-- 关系表地图 --> |
| | |
| | | font-size: 0.2rem; |
| | | color: #666; |
| | | " |
| | | > |
| | | </div> |
| | | ></div> |
| | | </div> |
| | | <div id="customDialog" class="customDialog"> |
| | | <div class="title"> |
| | |
| | | import { |
| | | getPersonData, |
| | | getHotSearch, |
| | | getPDataStatistics |
| | | getPDataStatistics, |
| | | academicSearch, |
| | | } from "@/api/index.js"; |
| | | import * as echarts from "echarts"; |
| | | import MyForm from "@/components/form/form.vue"; |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | // 当前人物信息 |
| | | ownInfo: null, |
| | | detailData: { |
| | | name: "" |
| | | name: "", |
| | | }, |
| | | isAdvancedSearch: false |
| | | isAdvancedSearch: false, |
| | | formData: { |
| | | name: "", |
| | | actively: "", |
| | | works: "", |
| | | personTags: "", |
| | | socialIdentity: "", |
| | | period: "" |
| | | }, |
| | | showPerson: false, |
| | | personList: [], |
| | | personPageInfo: { |
| | | totalCount: 0, |
| | | page: 1, |
| | | limit: 10, |
| | | }, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | 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, |
| | | name: personInfo?.NAME[0]?.content1, |
| | | category: type, |
| | | symbolSize: order, |
| | | symbolSize: 15, |
| | | }; |
| | | if (order > 80) { |
| | | order = 80; |
| | |
| | | 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 |
| | | personId: item.personId, |
| | | }; |
| | | }); |
| | | if (data?.length) { |
| | | if (ele[str] && data?.length) { |
| | | ele[str].push(...data); |
| | | } |
| | | } |
| | |
| | | } |
| | | return arr; |
| | | }, |
| | | |
| | | // 文献 |
| | | |
| | | //数组去重 |
| | | deduplicateArray(arr, idKey) { |
| | |
| | | let place = []; |
| | | let school = []; |
| | | if (res && res.success && res.object) { |
| | | |
| | | this.infoOfPersons = res.object?.infoOfPersons; |
| | | this.infoOfSchools = res.object?.infoOfSchools; |
| | | console.log(res.object); |
| | | if (res.object?.personChain) { |
| | | this.ownInfo = this.infoOfPersons.find( |
| | | (item) => item.id == res.object?.personChain.personId |
| | |
| | | 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]; |
| | | } |
| | |
| | | school = [...newArr]; |
| | | } |
| | | } |
| | | console.log(kinData); |
| | | console.log(kinData.map(item=>item.name2).join("、")); |
| | | debugger |
| | | const personData = [ |
| | | ...kinData, |
| | | ...teacher, |
| | | ...literature, |
| | | ...social, |
| | | ...place, |
| | | ...school |
| | | ...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 |
| | | }); |
| | | } |
| | | this.nodes.push({ |
| | | name: item.name, |
| | | id: item.personId, |
| | | ...item, |
| | | }); |
| | | let obj = { |
| | | source: item.parentName, |
| | | target: item.name2, |
| | | relation: item.relationTypeName || "" // 如果存在 relationName 字段则使用,否则为空字符串 |
| | | target: item.name, |
| | | relation: item.relationTypeName || "", // 如果存在 relationName 字段则使用,否则为空字符串 |
| | | }; |
| | | this.relationships.push(obj); |
| | | }); |
| | |
| | | // 假设您有节点名称和它们之间的关系数据 |
| | | var nodes = this.deduplicateArray(this.nodes, "id"); |
| | | var relationships = this.relationships; |
| | | |
| | | nodes = nodes.map((item) => { |
| | | let size = item.symbolSize; |
| | | for (let i = 0; i < relationships.length; i++) { |
| | | const linkItem = relationships[i]; |
| | | if (linkItem.source == item.parentName) { |
| | | size += 5; |
| | | } |
| | | if (linkItem.target == item.parentName) { |
| | | size += 5; |
| | | } |
| | | } |
| | | return { |
| | | ...item, |
| | | symbolSize: size > 80 ? 80 : size, |
| | | }; |
| | | }); |
| | | |
| | | let FontSize = 12; // 字体大小 |
| | | let BorderWidth = 2; // 边框大小 |
| | |
| | | var links = []; |
| | | relationships.forEach((relationship, i) => { |
| | | var sourceIndex = nodes.findIndex( |
| | | (node) => node.name === relationship.source |
| | | (node) => node.parentName === relationship.source |
| | | ); |
| | | var targetIndex = nodes.findIndex( |
| | | (node) => node.name === relationship.target |
| | |
| | | borderRadius: 30, |
| | | position: "middle", // 设置标签文本在线的中间位置上居中显示 |
| | | // z: -1, // 设置标签的z轴高度,使其比连接线更高 |
| | | distance: -10 // 将标签放置在连接线上 |
| | | } |
| | | distance: -10, // 将标签放置在连接线上 |
| | | }, |
| | | }); |
| | | } |
| | | } |
| | |
| | | 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, |
| | | }, |
| | | }, |
| | | ], |
| | | }; |
| | | // 设置点击事件监听 |
| | | myChart.off("click"); |
| | |
| | | i += 1; |
| | | return e["content" + i]; |
| | | }).join("、") ?? "", |
| | | biography: data?.BIOGRAPHY ?? "" |
| | | biography: data?.BIOGRAPHY ?? "", |
| | | }; |
| | | this.detailData = obj; |
| | | }, |
| | |
| | | }, |
| | | // 基础搜索 |
| | | onSearch(val, index) { |
| | | console.log(val); |
| | | 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); |
| | | }, |
| | | // 点击下面的朝代按钮 |
| | | 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) { |
| | | // 关系图的数据 |
| | | uni.navigateTo({ |
| | | url: "/pages/character/detail?id=" + id |
| | | url: "/pages/character/detail?id=" + id, |
| | | }); |
| | | }, |
| | | // 获取朝代echarts的数据 |
| | |
| | | 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], |
| | | }; |
| | | }); |
| | | }); |
| | | }, |
| | |
| | | // } |
| | | // }); |
| | | }, |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | background-image: url('../../static/image/characterRelationBg.png'); |
| | | background-image: url("../../static/image/characterRelationBg.png"); |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | background-position: center; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | </style> |