| | |
| | | <template> |
| | | <view> |
| | | <view style="width: 100%; height: 100%; display: flex; flex-direction: column;"> |
| | | <headNav :idIndex="'6'" text="学术流派" /> |
| | | <!-- 高级搜索 --> |
| | | <view style="margin-top: 0.1rem"> |
| | |
| | | </li> |
| | | </ul> |
| | | </view> |
| | | <view style="margin-left: 0.2rem">书中最常提到的100位人物</view> |
| | | <!-- 关系表地图 --> |
| | | <div |
| | | id="relation" |
| | |
| | | import { |
| | | getPersonData, |
| | | getHotSearch, |
| | | getPDataStatistics, |
| | | getPDataStatistics |
| | | } from "@/api/index.js"; |
| | | import * as echarts from "echarts"; |
| | | export default { |
| | |
| | | type: "input", |
| | | label: "姓名", |
| | | name: "name", |
| | | value: "", |
| | | value: "" |
| | | }, |
| | | { |
| | | type: "input", |
| | | label: "别名", |
| | | name: "alias", |
| | | value: "", |
| | | value: "" |
| | | }, |
| | | { |
| | | type: "input", |
| | | label: "籍贯", |
| | | name: "location", |
| | | value: "", |
| | | value: "" |
| | | }, |
| | | { |
| | | type: "select", |
| | |
| | | options: [ |
| | | { |
| | | label: "未指明", |
| | | value: "UNKNOWN", |
| | | }, |
| | | ], |
| | | value: "UNKNOWN" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | type: "input", |
| | | label: "官职", |
| | | name: "office", |
| | | value: "", |
| | | value: "" |
| | | }, |
| | | { |
| | | type: "select", |
| | |
| | | options: [ |
| | | { |
| | | label: "未指明", |
| | | value: "UNKNOWN", |
| | | value: "UNKNOWN" |
| | | }, |
| | | { |
| | | label: "男", |
| | | value: "MALE", |
| | | value: "MALE" |
| | | }, |
| | | { |
| | | label: "女", |
| | | value: "WOMAN", |
| | | }, |
| | | ], |
| | | value: "WOMAN" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | type: "input", |
| | | label: "时期", |
| | | name: "period", |
| | | value: "", |
| | | value: "" |
| | | }, |
| | | { |
| | | type: "input", |
| | | label: "机构", |
| | | name: "inst", |
| | | value: "", |
| | | value: "" |
| | | }, |
| | | { |
| | | type: "number", |
| | | label: "页码", |
| | | name: "page", |
| | | value: "", |
| | | value: "" |
| | | }, |
| | | { |
| | | type: "number", |
| | | label: "页大小", |
| | | name: "pageSize", |
| | | value: "", |
| | | }, |
| | | ], |
| | | value: "" |
| | | } |
| | | ] |
| | | }, |
| | | // 下面的朝代1 |
| | | dynastyColor: 1, |
| | |
| | | { |
| | | name: "夏朝", |
| | | coord: "2070BC", |
| | | id: 1, |
| | | id: 1 |
| | | }, |
| | | { |
| | | name: "商朝", |
| | | id: 2, |
| | | coord: "1600BC", |
| | | coord: "1600BC" |
| | | }, |
| | | { |
| | | name: "西周", |
| | | id: 3, |
| | | coord: "1600BC", |
| | | coord: "1600BC" |
| | | }, |
| | | { |
| | | name: "春秋战国", |
| | | id: 4, |
| | | coord: "770BC", |
| | | coord: "770BC" |
| | | }, |
| | | { |
| | | name: "秦朝", |
| | | id: 5, |
| | | coord: "221BC", |
| | | coord: "221BC" |
| | | }, |
| | | { |
| | | name: "汉朝", |
| | | id: 6, |
| | | coord: "202BC", |
| | | coord: "202BC" |
| | | }, |
| | | { |
| | | name: "三国两晋南北朝", |
| | | id: 7, |
| | | coord: "184", |
| | | coord: "184" |
| | | }, |
| | | { |
| | | name: "隋朝", |
| | | id: 8, |
| | | coord: "581", |
| | | coord: "581" |
| | | }, |
| | | { |
| | | name: "唐朝", |
| | | id: 9, |
| | | coord: "618", |
| | | coord: "618" |
| | | }, |
| | | { |
| | | name: "五代十国", |
| | | id: 10, |
| | | coord: "907", |
| | | coord: "907" |
| | | }, |
| | | { |
| | | name: "辽夏金", |
| | | id: 11, |
| | | coord: "907", |
| | | coord: "907" |
| | | }, |
| | | { |
| | | name: "宋朝", |
| | | id: 12, |
| | | coord: "960", |
| | | coord: "960" |
| | | }, |
| | | { |
| | | name: "元朝", |
| | | id: 13, |
| | | coord: "1271", |
| | | coord: "1271" |
| | | }, |
| | | |
| | | { |
| | | name: "明朝", |
| | | id: 14, |
| | | coord: "1368", |
| | | coord: "1368" |
| | | }, |
| | | { |
| | | name: "清朝", |
| | | id: 15, |
| | | coord: "1636", |
| | | }, |
| | | coord: "1636" |
| | | } |
| | | ], |
| | | // 热门搜索 |
| | | hotKeyList: [], |
| | |
| | | // 人物信息 |
| | | infoOfPersons: [], |
| | | // 当前人物信息 |
| | | ownInfo: null, |
| | | ownInfo: null |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | relationTypeName: ele.relationTypeName, |
| | | name1: this.ownInfo?.NAME[0]?.content1, |
| | | name2: personInfo?.NAME[0]?.content1, |
| | | category: type, |
| | | category: type |
| | | }; |
| | | newArr.push(obj); |
| | | if (ele[str] && ele[str]?.length) { |
| | |
| | | this.nodes.push({ |
| | | name: item.name1, |
| | | id: item.id1, |
| | | ...item, |
| | | ...item |
| | | }); |
| | | } |
| | | if (item.name2 && exists2 !== true) { |
| | | this.nodes.push({ |
| | | name: item.name2, |
| | | id: item.id2, |
| | | ...item, |
| | | ...item |
| | | }); |
| | | } |
| | | let obj = { |
| | | source: item.name1, |
| | | 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 // 将标签放置在连接线上 |
| | | } |
| | | }); |
| | | } |
| | | } |
| | |
| | | return { |
| | | name: node.name, |
| | | id: node.id, |
| | | itemStyle: { |
| | | color: "#eae0eb", // 可以根据索引设置不同的颜色 |
| | | borderWidth: BorderWidth, |
| | | borderColor: "#996f9f", |
| | | }, |
| | | // itemStyle: { |
| | | // color: "#eae0eb", // 可以根据索引设置不同的颜色 |
| | | // borderWidth: BorderWidth, |
| | | // borderColor: "#996f9f" |
| | | // } |
| | | }; |
| | | }); |
| | | |
| | |
| | | // }, |
| | | subtextStyle: { |
| | | fontSize: FontSize, // 设置副标题文字大小为 14px |
| | | color: "#2C2C2C", |
| | | }, |
| | | color: "#2C2C2C" |
| | | } |
| | | }, |
| | | backgroundColor: { |
| | | type: "image", |
| | | image: "/static/image/characterRelationBg.png", |
| | | // repeat: 'repeat-x', // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat' |
| | | size: "100% 100%", // 背景图片的尺寸,可以是百分比或者像素 |
| | | position: "center center", // 背景图片的位置,可以是 top, bottom, middle 或者百分比 |
| | | position: "center center" // 背景图片的位置,可以是 top, bottom, middle 或者百分比 |
| | | }, |
| | | tooltip: {}, |
| | | legend: [ |
| | |
| | | // selectedMode: 'single', |
| | | data: this.categories.map(function (a) { |
| | | return a.name; |
| | | }), |
| | | }, |
| | | }) |
| | | } |
| | | ], |
| | | animationDurationUpdate: 1500, |
| | | animationEasingUpdate: "quinticInOut", |
| | |
| | | name: "Les Miserables", |
| | | type: "graph", |
| | | legendHoverLink: false, |
| | | layout: "none", |
| | | layout: 'force', |
| | | data: nodeData, |
| | | links: links, |
| | | categories: this.categories, |
| | | roam: true, |
| | | label: { |
| | | position: "right", |
| | | formatter: "{b}", |
| | | formatter: "{b}" |
| | | }, |
| | | lineStyle: { |
| | | color: "source", |
| | | curveness: 0.3, |
| | | curveness: 0.3 |
| | | }, |
| | | emphasis: { |
| | | focus: "adjacency", |
| | | lineStyle: { |
| | | width: 10, |
| | | }, |
| | | }, |
| | | }, |
| | | ], |
| | | width: 10 |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | // 将生成的连接线添加到echarts图表的option中 |
| | | // option.series[0].links = links; |
| | |
| | | this.spaceTimeArr(params.data.id); |
| | | } |
| | | }); |
| | | console.log(option,'option') |
| | | console.log(option, "option"); |
| | | myChart.setOption(option); |
| | | }, |
| | | // 基础搜索 |
| | |
| | | getAdvanceSearch({ |
| | | ...val, |
| | | page: 1, |
| | | pageSize: 100, |
| | | pageSize: 100 |
| | | }).then((res) => { |
| | | console.log(res, "res"); |
| | | }); |
| | | }, |
| | | advancedSearchBack() { |
| | | uni.navigateTo({ |
| | | url: "/pages/knowledgeBase/knowledgeBase", |
| | | 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的数据 |
| | |
| | | const options = res.object.occupationStatistic.details.map( |
| | | (item) => ({ |
| | | label: item.tagName, |
| | | value: item.tagId.toString(), // 将 id 转换为字符串,确保与 value 类型一致 |
| | | value: item.tagId.toString() // 将 id 转换为字符串,确保与 value 类型一致 |
| | | }) |
| | | ); |
| | | // 更新职业字段的 options 属性 |
| | | this.$set(this.From.from[professionIndex], "options", options); |
| | | } |
| | | }); |
| | | }, |
| | | }, |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style> |
| | | #relatio { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | @media screen and (min-width: 2560px) and (max-width: 3840px) { |
| | | } |
| | | |