| | |
| | | > |
| | | <headNav :idIndex="'6'" text="学术流派" /> |
| | | <!-- 高级搜索 --> |
| | | <view style="margin-top: 0.1rem"> |
| | | <view style="margin-left: 0.6rem; margin-top: 0.1rem; display: flex"> |
| | | <advancedSearch |
| | | @onSearch="onSearch" |
| | | @onSubmit="onSubmit" |
| | | :from="From" |
| | | placehold="请输入关键字" |
| | | :isAvancedTrue="false" |
| | | :keyword="searchKey" |
| | | :advancedSearchBack="advancedSearchBack" |
| | | /> |
| | | </view> |
| | | <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"> |
| | | <view class="flex flex-center hotSearch" style="margin-left: 2rem"> |
| | | 热门搜索: |
| | | <ul class="flex" style="margin-right: 10rpx"> |
| | | <li |
| | |
| | | </li> |
| | | </ul> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 关系表地图 --> |
| | | <div |
| | | id="relation" |
| | |
| | | import { |
| | | getPersonData, |
| | | getHotSearch, |
| | | getPDataStatistics, |
| | | getPDataStatistics |
| | | } from "@/api/index.js"; |
| | | import * as echarts from "echarts"; |
| | | export default { |
| | |
| | | nodes: [], |
| | | // echarts两者的关系 |
| | | relationships: [], |
| | | // 高级搜索 |
| | | From: { |
| | | from: [ |
| | | { |
| | | type: "input", |
| | | label: "姓名", |
| | | name: "name", |
| | | value: "", |
| | | }, |
| | | { |
| | | type: "input", |
| | | label: "别名", |
| | | name: "alias", |
| | | value: "", |
| | | }, |
| | | { |
| | | type: "input", |
| | | label: "籍贯", |
| | | name: "location", |
| | | value: "", |
| | | }, |
| | | { |
| | | type: "select", |
| | | label: "职业", |
| | | name: "sdId", |
| | | value: "", |
| | | options: [ |
| | | { |
| | | label: "未指明", |
| | | value: "UNKNOWN", |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | type: "input", |
| | | label: "官职", |
| | | name: "office", |
| | | value: "", |
| | | }, |
| | | { |
| | | type: "select", |
| | | label: "性别", |
| | | value: "", |
| | | name: "genderTypeEO", |
| | | options: [ |
| | | { |
| | | label: "未指明", |
| | | value: "UNKNOWN", |
| | | }, |
| | | { |
| | | label: "男", |
| | | value: "MALE", |
| | | }, |
| | | { |
| | | label: "女", |
| | | value: "WOMAN", |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | type: "input", |
| | | label: "时期", |
| | | name: "period", |
| | | value: "", |
| | | }, |
| | | { |
| | | type: "input", |
| | | label: "机构", |
| | | name: "inst", |
| | | value: "", |
| | | }, |
| | | { |
| | | type: "number", |
| | | label: "页码", |
| | | name: "page", |
| | | value: "", |
| | | }, |
| | | { |
| | | type: "number", |
| | | label: "页大小", |
| | | name: "pageSize", |
| | | value: "", |
| | | }, |
| | | ], |
| | | }, |
| | | // 下面的朝代1 |
| | | dynastyColor: 1, |
| | | // 朝代 |
| | | dynasty: [ |
| | | { |
| | | name: "夏朝", |
| | | coord: "2070BC", |
| | | id: 1, |
| | | }, |
| | | { |
| | | name: "商朝", |
| | | id: 2, |
| | | coord: "1600BC", |
| | | }, |
| | | { |
| | | name: "西周", |
| | | id: 3, |
| | | coord: "1600BC", |
| | | }, |
| | | { |
| | | name: "春秋战国", |
| | | id: 4, |
| | | coord: "770BC", |
| | | }, |
| | | { |
| | | name: "秦朝", |
| | | id: 5, |
| | | coord: "221BC", |
| | | }, |
| | | { |
| | | name: "汉朝", |
| | | id: 6, |
| | | coord: "202BC", |
| | | }, |
| | | { |
| | | name: "三国两晋南北朝", |
| | | id: 7, |
| | | coord: "184", |
| | | }, |
| | | { |
| | | name: "隋朝", |
| | | id: 8, |
| | | coord: "581", |
| | | }, |
| | | { |
| | | name: "唐朝", |
| | | id: 9, |
| | | coord: "618", |
| | | }, |
| | | { |
| | | name: "五代十国", |
| | | id: 10, |
| | | coord: "907", |
| | | }, |
| | | { |
| | | name: "辽夏金", |
| | | id: 11, |
| | | coord: "907", |
| | | }, |
| | | { |
| | | name: "宋朝", |
| | | id: 12, |
| | | coord: "960", |
| | | }, |
| | | { |
| | | name: "元朝", |
| | | id: 13, |
| | | coord: "1271", |
| | | }, |
| | | |
| | | { |
| | | name: "明朝", |
| | | id: 14, |
| | | coord: "1368", |
| | | }, |
| | | { |
| | | name: "清朝", |
| | | id: 15, |
| | | coord: "1636", |
| | | }, |
| | | ], |
| | | // 热门搜索 |
| | | hotKeyList: [], |
| | | searchKey: "", |
| | |
| | | // 当前人物信息 |
| | | ownInfo: null, |
| | | detailData: { |
| | | name: "", |
| | | name: "" |
| | | }, |
| | | isAdvancedSearch: false |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | this.hotSearch(); |
| | | // 监听窗口大小变化 |
| | | window.addEventListener("resize", this.relation); |
| | | this.innt(); |
| | | }, |
| | | onLoad(options) { |
| | | this.searchKey = options.keyword; |
| | |
| | | relationTypeName: ele.relationTypeName, |
| | | parentName: parent?.NAME[0]?.content1 ?? parent.parentName, |
| | | name2: personInfo?.NAME[0]?.content1, |
| | | category: type, |
| | | category: type |
| | | }; |
| | | if (str == "literatureList") { |
| | | obj.relationTypeName = ele.literatureName; |
| | |
| | | const data = item[str]?.map((e) => { |
| | | return { |
| | | ...e, |
| | | personId: item.personId, |
| | | personId: item.personId |
| | | }; |
| | | }); |
| | | if (data?.length) { |
| | |
| | | ...literature, |
| | | ...social, |
| | | ...place, |
| | | ...school, |
| | | ...school |
| | | ]; |
| | | // const k = personData.filter((item) => item.category == 0); |
| | | // const t = personData.filter((item) => item.category == 1); |
| | |
| | | this.nodes.push({ |
| | | name: item.parentName, |
| | | id: item.parentId, |
| | | ...item, |
| | | ...item |
| | | }); |
| | | } |
| | | if (item.name2 && exists2 !== true) { |
| | | this.nodes.push({ |
| | | name: item.name2, |
| | | id: item.id2, |
| | | ...item, |
| | | ...item |
| | | }); |
| | | } |
| | | let obj = { |
| | | source: item.parentName, |
| | | target: item.name2, |
| | | relation: item.relationTypeName || "", // 如果存在 relationName 字段则使用,否则为空字符串 |
| | | relation: item.relationTypeName || "" // 如果存在 relationName 字段则使用,否则为空字符串 |
| | | }; |
| | | this.relationships.push(obj); |
| | | }); |
| | |
| | | borderRadius: 30, |
| | | position: "middle", // 设置标签文本在线的中间位置上居中显示 |
| | | // z: -1, // 设置标签的z轴高度,使其比连接线更高 |
| | | distance: -10, // 将标签放置在连接线上 |
| | | }, |
| | | distance: -10 // 将标签放置在连接线上 |
| | | } |
| | | }); |
| | | } |
| | | } |
| | |
| | | type: "image", |
| | | image: "/static/image/characterRelationBg.png", |
| | | size: "100% 100%", // 背景图片的尺寸,可以是百分比或者像素 |
| | | position: "center center", // 背景图片的位置,可以是 top, bottom, middle 或者百分比 |
| | | position: "center center" // 背景图片的位置,可以是 top, bottom, middle 或者百分比 |
| | | }, |
| | | tooltip: {}, |
| | | legend: [ |
| | |
| | | orient: "vertical", |
| | | data: this.categories.map(function (a) { |
| | | return a.name; |
| | | }), |
| | | }, |
| | | }) |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | |
| | | label: { |
| | | show: true, |
| | | position: "right", |
| | | formatter: "{b}", |
| | | formatter: "{b}" |
| | | }, |
| | | labelLayout: { |
| | | hideOverlap: true, |
| | | hideOverlap: true |
| | | }, |
| | | 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; |
| | | }, |
| | |
| | | } |
| | | this.getData(val.text); |
| | | }, |
| | | // 高级搜索 |
| | | onSubmit(val) { |
| | | getAdvanceSearch({ |
| | | ...val, |
| | | page: 1, |
| | | pageSize: 100, |
| | | }).then((res) => { |
| | | console.log(res, "res"); |
| | | }); |
| | | }, |
| | | advancedSearchBack() { |
| | | uni.navigateTo({ |
| | | url: "/pages/knowledgeBase/knowledgeBase", |
| | | }); |
| | | }, |
| | | // 点击下面的朝代按钮 |
| | | dynastyBottomClick(item) { |
| | | this.dynastyColor = item.id; |
| | | this.onSearch({ |
| | | text: item.name, |
| | | text: item.name |
| | | }); |
| | | }, |
| | | // 关系图 点击里面的元素 |
| | | spaceTimeArr(id) { |
| | | // 关系图的数据 |
| | | uni.navigateTo({ |
| | | url: "/pages/character/detail?id=" + id, |
| | | url: "/pages/character/detail?id=" + id |
| | | }); |
| | | }, |
| | | // 获取朝代echarts的数据 |
| | |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | // 高级搜索里面职业的下拉菜单 |
| | | innt() { |
| | | getPDataStatistics().then((res) => { |
| | | const professionIndex = this.From.from.findIndex( |
| | | (field) => field.label === "职业" |
| | | ); |
| | | // 如果找到了职业字段 |
| | | if (professionIndex !== -1) { |
| | | // 将 profession.list 转换为 options 格式 |
| | | const options = res.object.occupationStatistic.details.map( |
| | | (item) => ({ |
| | | label: item.tagName, |
| | | value: item.tagId.toString(), // 将 id 转换为字符串,确保与 value 类型一致 |
| | | }) |
| | | ); |
| | | // 更新职业字段的 options 属性 |
| | | this.$set(this.From.from[professionIndex], "options", options); |
| | | 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> |
| | | |
| | |
| | | margin: 0 0.1rem; |
| | | color: #244a7b; |
| | | &.active{ |
| | | color: #027EDC; |
| | | color: #027edc; |
| | | font-weight: bold; |
| | | } |
| | | } |