Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary
| | |
| | | margin-bottom: 0.1rem; |
| | | " |
| | | :src="item" |
| | | fit="fill" |
| | | :preview-src-list="imageList" |
| | | fit="contain" |
| | | ></el-image> |
| | | </div> |
| | | <div |
| | |
| | | getPersonWritings, |
| | | getPersonRelationAtSchool, |
| | | getSpaceTime, |
| | | getDynastyData |
| | | getDynastyData, |
| | | } from "@/api/index.js"; |
| | | import { getImg } from "@/static/tool.js"; |
| | | import L from "leaflet"; |
| | |
| | | |
| | | export default { |
| | | components: { |
| | | Table1 |
| | | Table1, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | tableColumns1: [ |
| | | { |
| | | prop: "a", |
| | | label: "正书名" |
| | | label: "正书名", |
| | | }, |
| | | { |
| | | prop: "e", |
| | | label: "作者" |
| | | label: "作者", |
| | | }, |
| | | { |
| | | prop: "b", |
| | | label: "著作年" |
| | | label: "著作年", |
| | | }, |
| | | { |
| | | prop: "c", |
| | | label: "著作方式" |
| | | label: "著作方式", |
| | | }, |
| | | { |
| | | prop: "d", |
| | | label: "总目分类" |
| | | } |
| | | label: "总目分类", |
| | | }, |
| | | ], |
| | | tableColumns2: [ |
| | | { |
| | | prop: "a", |
| | | label: "关系人" |
| | | label: "关系人", |
| | | }, |
| | | { |
| | | prop: "b", |
| | | label: "关系类型" |
| | | label: "关系类型", |
| | | }, |
| | | { |
| | | prop: "c", |
| | | label: "考据" |
| | | label: "考据", |
| | | }, |
| | | { |
| | | prop: "d", |
| | | width: 300, |
| | | showOverflowTooltip: true, |
| | | label: "出处" |
| | | } |
| | | label: "出处", |
| | | }, |
| | | ], |
| | | tableColumns3: [ |
| | | { |
| | | prop: "a", |
| | | label: "活动时间区间" |
| | | label: "活动时间区间", |
| | | }, |
| | | { |
| | | prop: "b", |
| | | label: "活动名称" |
| | | label: "活动名称", |
| | | }, |
| | | { |
| | | prop: "c", |
| | | label: "活动地点" |
| | | label: "活动地点", |
| | | }, |
| | | { |
| | | prop: "d", |
| | | label: "活动描述" |
| | | } |
| | | label: "活动描述", |
| | | }, |
| | | ], |
| | | tableData1: [], |
| | | tableData2: [], |
| | |
| | | nodes: [], |
| | | relationships: [], |
| | | personResearchList: [], |
| | | markerList: [] |
| | | markerList: [], |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | |
| | | document.body.removeChild(textarea); |
| | | this.$message({ |
| | | message: "复制成功!", |
| | | type: "success" |
| | | type: "success", |
| | | }); |
| | | }, |
| | | toLink(item) { |
| | |
| | | // 基本信息 |
| | | getPersonInfo({ |
| | | id: this.detailId, |
| | | type: "PERSON_BASIC" |
| | | type: "PERSON_BASIC", |
| | | }).then((res) => { |
| | | const obj = {}; |
| | | if ( |
| | |
| | | this.detailInfo = obj; |
| | | getDynastyAll().then((dynastyData) => { |
| | | getWebBasic({ |
| | | personId: this.detailId |
| | | personId: this.detailId, |
| | | }).then((res) => { |
| | | const obj = res.object; |
| | | if (obj.school) { |
| | |
| | | //现代研究 |
| | | getPersonInfo({ |
| | | id: this.detailId, |
| | | type: "PERSON_RESEARCH" |
| | | type: "PERSON_RESEARCH", |
| | | }).then((res) => { |
| | | this.personResearchList = res.object.personResearchList; |
| | | }); |
| | |
| | | // 活动年谱 |
| | | getPersonInfo({ |
| | | id: this.detailId, |
| | | type: "PERSON_SPACE_TIME" |
| | | type: "PERSON_SPACE_TIME", |
| | | }).then((res) => { |
| | | if (res.object.personSpaceTimeList) { |
| | | this.tableData5 = res.object.personSpaceTimeList.map((item) => { |
| | |
| | | a: item.time, |
| | | b: item.activityName, |
| | | c: item.activityAddrOld, |
| | | d: item.desc |
| | | d: item.desc, |
| | | }; |
| | | }); |
| | | } |
| | |
| | | list: [ |
| | | { |
| | | name: "姓名", |
| | | value: obj.name || "-" |
| | | value: obj.name || "-", |
| | | }, |
| | | { |
| | | name: "字", |
| | | value: obj.zi || "-" |
| | | value: obj.zi || "-", |
| | | }, |
| | | { |
| | | name: "号", |
| | | value: obj.hao || "-" |
| | | value: obj.hao || "-", |
| | | }, |
| | | { |
| | | name: "所处时期", |
| | |
| | | uni.navigateTo({ |
| | | url: |
| | | "/pages/knowledgeBase/knowledgeBase?dynasty=" + |
| | | obj.dynastyId |
| | | obj.dynastyId, |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | name: "民族", |
| | | value: obj.ethnic || "-" |
| | | } |
| | | ] |
| | | value: obj.ethnic || "-", |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | list: [ |
| | | { |
| | | name: "籍贯", |
| | | value: obj.native || "-" |
| | | value: obj.native || "-", |
| | | }, |
| | | { |
| | | name: "性别", |
| | | value: obj.gender || "-" |
| | | value: obj.gender || "-", |
| | | }, |
| | | { |
| | | name: "职官", |
| | |
| | | uni.navigateTo({ |
| | | url: |
| | | "/pages/knowledgeBase/knowledgeBase?isAdvancedSearch=1&official=" + |
| | | obj.official |
| | | obj.official, |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | name: "流派", |
| | |
| | | sres.object.school_NAME && |
| | | sres.object.school_NAME.length |
| | | ? sres.object.school_NAME[0].content |
| | | : "-" |
| | | : "-", |
| | | }, |
| | | { |
| | | name: "学术特点", |
| | | value: obj.features || "-" |
| | | } |
| | | ] |
| | | } |
| | | value: obj.features || "-", |
| | | }, |
| | | ], |
| | | }, |
| | | ]; |
| | | }, |
| | | getSourceData() { |
| | | getSource({ |
| | | personId: this.detailId |
| | | personId: this.detailId, |
| | | }).then((res) => { |
| | | this.sourceDataList = res.list; |
| | | }); |
| | | }, |
| | | getImages() { |
| | | getPersonImages({ |
| | | personId: this.detailId |
| | | personId: this.detailId, |
| | | }).then((res) => { |
| | | this.imageList = res.list.map((item) => getImg(item.filePath)); |
| | | }); |
| | | }, |
| | | getBiog() { |
| | | getPersonBiog({ |
| | | personId: this.detailId |
| | | personId: this.detailId, |
| | | }).then((res) => { |
| | | this.biogData = res.list.map((item) => { |
| | | return { |
| | |
| | | "《" + |
| | | item.bookName + |
| | | "》 " + |
| | | (item.pageNo ? "P " + item.pageNo : "") // 这里只有bookid无法匹配到书名 |
| | | (item.pageNo ? "P " + item.pageNo : ""), // 这里只有bookid无法匹配到书名 |
| | | }; |
| | | }); |
| | | }); |
| | | }, |
| | | getWritings() { |
| | | getPersonWritings({ |
| | | personId: this.detailId |
| | | personId: this.detailId, |
| | | }).then((res) => { |
| | | this.tableData1 = res.list.map((item) => { |
| | | return { |
| | |
| | | b: item.dynasty, |
| | | c: item.writeWay, |
| | | d: item.classify, |
| | | e: this.detailInfo.NAME |
| | | e: this.detailInfo.NAME, |
| | | }; |
| | | }); |
| | | }); |
| | |
| | | getRelationship() { |
| | | getPersonInfo({ |
| | | id: this.detailId, |
| | | type: "PERSON_RELATIONS" |
| | | type: "PERSON_RELATIONS", |
| | | }).then((res) => { |
| | | this.tableData4; |
| | | if (res.object.personRelationMap.kin.length) { |
| | |
| | | .name + |
| | | "》 P" + |
| | | f.pageNo |
| | | : "" |
| | | : "", |
| | | }; |
| | | }); |
| | | } |
| | |
| | | .name + |
| | | "》 P" + |
| | | f.pageNo |
| | | : "" |
| | | : "", |
| | | }; |
| | | } |
| | | ); |
| | |
| | | .name + |
| | | "》 P" + |
| | | f.pageNo |
| | | : "" |
| | | : "", |
| | | }; |
| | | }); |
| | | } |
| | |
| | | if (item.name1 && exists1 !== true) { |
| | | this.nodes.push({ |
| | | name: item.name1, |
| | | id: item.identifier1 |
| | | id: item.identifier1, |
| | | }); |
| | | } |
| | | if (item.name2 && exists2 !== true) { |
| | | this.nodes.push({ |
| | | name: item.name2, |
| | | id: item.identifier2 |
| | | id: item.identifier2, |
| | | }); |
| | | } |
| | | let obj = { |
| | | source: item.name1, |
| | | target: item.name2, |
| | | relation: item.relationName || "" // 如果存在 relationName 字段则使用,否则为空字符串 |
| | | relation: item.relationName || "", // 如果存在 relationName 字段则使用,否则为空字符串 |
| | | }; |
| | | this.relationships.push(obj); |
| | | }); |
| | |
| | | }, |
| | | getMapInfo() { |
| | | getSpaceTime({ |
| | | personId: this.detailId |
| | | personId: this.detailId, |
| | | }).then((res) => { |
| | | if (res.list && res.list.length) { |
| | | const data = []; |
| | |
| | | if (item.xcoord && item.ycoord) { |
| | | const obj = { |
| | | name: item.activityName, |
| | | value: [item.xcoord, item.ycoord] |
| | | value: [item.xcoord, item.ycoord], |
| | | }; |
| | | data.push(obj); |
| | | } |
| | |
| | | initMap(markerList) { |
| | | var map = L.map("spaceTime", { |
| | | preferCanvas: true, |
| | | attributionControl: false |
| | | attributionControl: false, |
| | | }).setView([markerList[0].value[1], markerList[0].value[0]], 13); |
| | | L.tileLayer |
| | | .chinaProvider("TianDiTu.Normal.Map", { |
| | | key: "76bc34ead7e30e663a4eded8aeaf5860", |
| | | maxZoom: 18, |
| | | minZoom: 3 |
| | | minZoom: 3, |
| | | }) |
| | | .addTo(map); |
| | | L.tileLayer |
| | | .chinaProvider("TianDiTu.Normal.Annotion", { |
| | | key: "76bc34ead7e30e663a4eded8aeaf5860", |
| | | maxZoom: 18, |
| | | minZoom: 3 |
| | | minZoom: 3, |
| | | }) |
| | | .addTo(map); |
| | | let icon = L.divIcon({ |
| | | html: "<div class='map-circle-name ripple'></div>", |
| | | iconSize: [80, 80], |
| | | className: "map-circle" |
| | | className: "map-circle", |
| | | }); |
| | | this.map = map; |
| | | const temp_mark = L.marker([markerList.value[1], markerList.value[0]], { |
| | | icon: icon |
| | | icon: icon, |
| | | }).addTo(map); |
| | | if (markerList.length) { |
| | | for (let i = 0; i < markerList.length; i++) { |
| | | const item = markerList[i]; |
| | | const temp_mark = L.marker([item.value[1], item.value[0]], { |
| | | icon: icon |
| | | icon: icon, |
| | | }).addTo(map); |
| | | } |
| | | } |
| | |
| | | fangdaClick(index) { |
| | | if (index == 1) { |
| | | uni.navigateTo({ |
| | | url: "/pages/character/index?keyword=" + this.detailInfo.NAME |
| | | url: "/pages/character/index?keyword=" + this.detailInfo.NAME, |
| | | }); |
| | | } else if (index == 2) { |
| | | uni.navigateTo({ |
| | | url: "/pages/characterMap/characterMap?id=" + this.detailId |
| | | url: "/pages/characterMap/characterMap?id=" + this.detailId, |
| | | }); |
| | | } |
| | | }, |
| | |
| | | scrollToTop() { |
| | | window.scrollTo({ |
| | | top: 0, |
| | | behavior: "smooth" // 使用平滑滚动 |
| | | behavior: "smooth", // 使用平滑滚动 |
| | | }); |
| | | }, |
| | | openFileClick(index) { |
| | | let obj = { |
| | | id: this.detailId, |
| | | type: "Person" |
| | | type: "Person", |
| | | }; |
| | | switch (index) { |
| | | case 1: |
| | |
| | | position: "middle", // 设置标签文本在线的中间位置上居中显示 |
| | | // bottom: -(FontSize+10), |
| | | z: 10, // 设置标签的z轴高度,使其比连接线更高 |
| | | distance: -(Distance + 1) // 将标签放置在连接线上 |
| | | } |
| | | distance: -(Distance + 1), // 将标签放置在连接线上 |
| | | }, |
| | | }); |
| | | } |
| | | } |
| | |
| | | itemStyle: { |
| | | color: "#eae0eb", // 可以根据索引设置不同的颜色 |
| | | borderWidth: BorderWidth, |
| | | borderColor: "#996f9f" |
| | | } |
| | | borderColor: "#996f9f", |
| | | }, |
| | | }; |
| | | }); |
| | | var option; |
| | |
| | | top: FontSize + 10, |
| | | subtextStyle: { |
| | | fontSize: FontSize, // 设置副标题文字大小为 14px |
| | | color: "#2C2C2C" |
| | | } |
| | | color: "#2C2C2C", |
| | | }, |
| | | }, |
| | | backgroundColor: { |
| | | type: "image", |
| | | image: "/static/image/characterRelationBg.png", |
| | | size: "100% 100%", // 背景图片的尺寸,可以是百分比或者像素 |
| | | position: "center center" // 背景图片的位置,可以是 top, bottom, middle 或者百分比 |
| | | position: "center center", // 背景图片的位置,可以是 top, bottom, middle 或者百分比 |
| | | }, |
| | | tooltip: {}, |
| | | animationDurationUpdate: 1500, |
| | |
| | | label: { |
| | | show: true, |
| | | color: "black", // 设置节点文字颜色为黑色 |
| | | fontSize: FontSize // 设置文字大小 |
| | | fontSize: FontSize, // 设置文字大小 |
| | | }, |
| | | edgeSymbol: ["circle"], |
| | | edgeSymbolSize: [4, 10], |
| | |
| | | lineStyle: { |
| | | opacity: 0.9, |
| | | width: 2, |
| | | curveness: 0.3 |
| | | curveness: 0.3, |
| | | }, |
| | | emphasis: { |
| | | focus: "adjacency", |
| | | lineStyle: { |
| | | width: 10 |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | width: 10, |
| | | }, |
| | | }, |
| | | }, |
| | | ], |
| | | }; |
| | | // 将生成的连接线添加到echarts图表的option中 |
| | | option.series[0].links = links; |
| | |
| | | text: "", |
| | | subtext: "", |
| | | sublink: "", |
| | | left: "center" |
| | | left: "center", |
| | | }, |
| | | tooltip: { |
| | | trigger: "item" |
| | | trigger: "item", |
| | | }, |
| | | bmap: { |
| | | center: data[0].value, |
| | |
| | | featureType: "water", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: "#86a1ac" |
| | | } |
| | | color: "#86a1ac", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "land", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: "#f1d99d" |
| | | } |
| | | color: "#f1d99d", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "railway", |
| | | elementType: "all", |
| | | stylers: { |
| | | visibility: "off" |
| | | } |
| | | visibility: "off", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "highway", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: "#f1d99d" |
| | | } |
| | | color: "#f1d99d", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "highway", |
| | | elementType: "labels", |
| | | stylers: { |
| | | visibility: "off" |
| | | } |
| | | visibility: "off", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "arterial", |
| | | elementType: "geometry", |
| | | stylers: { |
| | | color: "#f1d99d" |
| | | } |
| | | color: "#f1d99d", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "arterial", |
| | | elementType: "geometry.fill", |
| | | stylers: { |
| | | color: "#f1d99d" |
| | | } |
| | | color: "#f1d99d", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "poi", |
| | | elementType: "all", |
| | | stylers: { |
| | | visibility: "off" |
| | | } |
| | | visibility: "off", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "green", |
| | | elementType: "all", |
| | | stylers: { |
| | | visibility: "off" |
| | | } |
| | | visibility: "off", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "subway", |
| | | elementType: "all", |
| | | stylers: { |
| | | visibility: "off" |
| | | } |
| | | visibility: "off", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "manmade", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: "#f1d99d" |
| | | } |
| | | color: "#f1d99d", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "local", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: "#f1d99d" |
| | | } |
| | | color: "#f1d99d", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "local", |
| | | elementType: "labels", |
| | | stylers: { |
| | | visibility: "off" |
| | | } |
| | | visibility: "off", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "arterial", |
| | | elementType: "labels", |
| | | stylers: { |
| | | visibility: "off" |
| | | } |
| | | visibility: "off", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "boundary", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: "#f1d99d" |
| | | } |
| | | color: "#f1d99d", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "building", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: "#f1d99d" |
| | | } |
| | | color: "#f1d99d", |
| | | }, |
| | | }, |
| | | { |
| | | featureType: "label", |
| | | elementType: "labels.text.fill", |
| | | stylers: { |
| | | color: "#000" |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | color: "#000", |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | data: data, |
| | | symbolSize: 0, |
| | | encode: { |
| | | value: 2 |
| | | value: 2, |
| | | }, |
| | | label: { |
| | | formatter: "{b}", |
| | | position: "right", |
| | | show: false |
| | | show: false, |
| | | }, |
| | | emphasis: { |
| | | label: { |
| | | show: true |
| | | } |
| | | } |
| | | show: true, |
| | | }, |
| | | }, |
| | | }, |
| | | { |
| | | name: "", |
| | |
| | | data: data, |
| | | symbolSize: 20, |
| | | encode: { |
| | | value: 2 |
| | | value: 2, |
| | | }, |
| | | showEffectOn: "render", |
| | | rippleEffect: { |
| | | brushType: "stroke" |
| | | brushType: "stroke", |
| | | }, |
| | | label: { |
| | | formatter: "{b}", |
| | | position: "right", |
| | | show: false |
| | | show: false, |
| | | }, |
| | | itemStyle: { |
| | | color: "#ec7b43", |
| | | shadowBlur: 10, |
| | | shadowColor: "#333" |
| | | shadowColor: "#333", |
| | | }, |
| | | emphasis: { |
| | | scale: false |
| | | scale: false, |
| | | }, |
| | | zlevel: 1 |
| | | } |
| | | ] |
| | | zlevel: 1, |
| | | }, |
| | | ], |
| | | }; |
| | | option && myChart.setOption(option); |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | |
| | | } |
| | | |
| | | /* ------------------- */ |
| | | |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | * { |
| | | box-sizing: border-box; |
| | | } |
| | |
| | | .fileul li:hover { |
| | | color: #597aa5; |
| | | } |
| | | |
| | | </style> |
| | |
| | | color: #fff; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | /* |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } */ |
| | | |
| | | uni-page-wrapper { |
| | | width: 100%; |