杨磊
2024-05-16 4469428bfec368ea9c735303ff9ad4ed25f5b762
src/pages/character/detail.vue
@@ -26,6 +26,7 @@
          </li>
        </ul>
        <view
          id="copyBox"
          class="fz font-family"
          style="
            font-size: 0.13rem;
@@ -39,7 +40,11 @@
        <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0">
          <view>
            <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">收藏</el-button> -->
            <el-button style="padding: 0.05rem 0.085rem" class="yinyong flex">
            <el-button
              style="padding: 0.05rem 0.085rem"
              class="yinyong flex"
              @click="copyText"
            >
              <img src="@/static/image/yinyong.png" alt="" />引用</el-button
            >
          </view>
@@ -311,13 +316,13 @@
  getPersonBiog,
  getPersonWritings,
  getPersonRelationAtSchool,
  getSpaceTime
  getSpaceTime,
} from "@/api/index.js";
import { getImg } from "@/static/tool.js";
export default {
  components: {
    Table1
    Table1,
  },
  data() {
    return {
@@ -338,56 +343,56 @@
      tableColumns1: [
        {
          prop: "a",
          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",
          label: "出处"
        }
          label: "出处",
        },
      ],
      tableColumns3: [
        {
          prop: "a",
          label: "活动时间区间"
          label: "活动时间区间",
        },
        {
          prop: "b",
          label: "活动名称"
          label: "活动名称",
        },
        {
          prop: "c",
          label: "活动地点"
          label: "活动地点",
        },
        {
          prop: "d",
          label: "活动描述"
        }
          label: "活动描述",
        },
      ],
      tableData1: [],
      tableData2: [],
@@ -395,7 +400,7 @@
      tableData4: [],
      tableData5: [],
      nodes: [],
      relationships: []
      relationships: [],
    };
  },
  onLoad(options) {
@@ -429,11 +434,20 @@
    window.addEventListener("resize", this.relation);
  },
  methods: {
    copyText() {
      var textToCopy = document.getElementById("copyBox").innerText;
      console.log(textToCopy, "textToCopy");
      navigator.clipboard.writeText(textToCopy).then();
      this.$message({
        message: "复制成功!",
        type: "success",
      });
    },
    getData() {
      // 基本信息
      getPersonInfo({
        id: this.detailId,
        type: "PERSON_BASIC"
        type: "PERSON_BASIC",
      }).then((res) => {
        const obj = {};
        if (
@@ -522,61 +536,61 @@
      // 活动年谱
      getPersonInfo({
        id: this.detailId,
        type: "PERSON_SPACE_TIME"
        type: "PERSON_SPACE_TIME",
      }).then((res) => {
        this.tableData5 = res.object.personSpaceTimeList.map((item) => {
          return {
            a: item.time,
            b: item.activityName,
            c: item.activityAddrOld,
            d: item.desc // 这里缺少活动描述字段
            d: item.desc, // 这里缺少活动描述字段
          };
        });
      });
    },
    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 {
            content: item.content1,
            pageNo: "《" + item.pageNo + "》 " + "P " + item.pageNo // 这里只有bookid无法匹配到书名
            pageNo: "《" + item.pageNo + "》 " + "P " + item.pageNo, // 这里只有bookid无法匹配到书名
          };
        });
      });
    },
    getWritings() {
      getPersonWritings({
        personId: this.detailId
        personId: this.detailId,
      }).then((res) => {
        this.tableData1 = res.list.map((item) => {
          return {
            a: item.name,
            b: item.dynasty,
            c: item.writeWay,
            d: item.classify
            d: item.classify,
          };
        });
      });
    },
    getRelationship() {
      getPersonRelationAtSchool({
        personId: this.detailId
        personId: this.detailId,
        // relationSearchTypeEO: "SOCIAL"
      }).then((res) => {
        console.log(res, "getPersonRelationAtSchool");
@@ -585,7 +599,7 @@
    },
    getMappingData(name) {
      getFuzzySearch({
        keyword: name
        keyword: name,
      }).then((res) => {
        this.nodes = [];
        this.relationships = [];
@@ -601,19 +615,19 @@
            if (exists1 !== true) {
              this.nodes.push({
                name: item.name1,
                id: item.identifier1
                id: item.identifier1,
              });
            }
            if (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);
          });
@@ -623,7 +637,7 @@
    },
    getMapInfo() {
      getSpaceTime({
        personId: this.detailId
        personId: this.detailId,
      }).then((res) => {
        console.log(res, "getSpaceTime");
        const data = res.list.map((item) => {
@@ -643,11 +657,11 @@
    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"
          url: "/pages/characterMap/characterMap?id=" + this.detailId,
        });
      }
    },
@@ -663,7 +677,7 @@
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth" // 使用平滑滚动
        behavior: "smooth", // 使用平滑滚动
      });
    },
    handleClick(tab) {
@@ -746,8 +760,8 @@
                position: "middle", // 设置标签文本在线的中间位置上居中显示
                // bottom: -(FontSize+10),
                z: 10, // 设置标签的z轴高度,使其比连接线更高
                distance: -(Distance + 1) // 将标签放置在连接线上
              }
                distance: -(Distance + 1), // 将标签放置在连接线上
              },
            });
          }
        }
@@ -762,8 +776,8 @@
          itemStyle: {
            color: "#eae0eb", // 可以根据索引设置不同的颜色
            borderWidth: BorderWidth,
            borderColor: "#996f9f"
          }
            borderColor: "#996f9f",
          },
        };
      });
      var option;
@@ -773,14 +787,14 @@
          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,
@@ -794,7 +808,7 @@
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
              fontSize: FontSize, // 设置文字大小
            },
            edgeSymbol: ["circle"],
            edgeSymbolSize: [4, 10],
@@ -803,16 +817,16 @@
            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;
@@ -858,10 +872,10 @@
          text: "",
          subtext: "",
          sublink: "",
          left: "center"
          left: "center",
        },
        tooltip: {
          trigger: "item"
          trigger: "item",
        },
        bmap: {
          center: data[0].value,
@@ -873,123 +887,123 @@
                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: [
          {
@@ -999,18 +1013,18 @@
            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: "",
@@ -1019,32 +1033,32 @@
            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>