人物详情和地图

YM

2024-04-29 13a727c58400a256af3f7582b62d8237b227329e

 src/pages/character/index.vue

@@ -269,24 +269,46 @@
    // window.addEventListener("resize", this.relation);
    this.innt();
  },
  onLoad(options) {
    this.searchKey = options.keyword;
  },
  methods: {
    getData() {
      getPersonList({
        keywords: "", //搜索框检索
        name: "", //姓名
        alias: "", //别名
        nativePlace: "", //机关
        tagId: null, //职业id
        official: "", //职官
        genderType: null, //性别
        dynasty: null, //朝代名
        dynastyId: null, //朝代id
        institution: "", //机构
        bookId: null, //来源id
        page: 1,
        pageSize: 100
      getFuzzySearch({
        keyword: this.searchKey ? this.searchKey : ""
      }).then((res) => {
        console.log(res);
        this.nodes = [];
        this.relationships = [];
        if (res.success && res.list) {
          res.list.forEach((item, index) => {
            let exists1 = this.nodes.some(
              (node) => node.id === item.identifier1 && node.name === item.name1
            );
            let exists2 = this.nodes.some(
              (node) => node.id === item.identifier2 && node.name === item.name2
            );
            // 证明不存在
            if (exists1 !== true) {
              this.nodes.push({
                name: item.name1,
                id: item.identifier1
              });
            }
            if (exists2 !== true) {
              this.nodes.push({
                name: item.name2,
                id: item.identifier2
              });
            }
            let obj = {
              source: item.name1,
              target: item.name2,
              relation: item.relationName || "" // 如果存在 relationName 字段则使用，否则为空字符串
            };
            this.relationships.push(obj);
          });
        }
        this.relation();
      });
    },
    // 关系图谱
@@ -364,9 +386,9 @@
          x: Math.random() * 2000, // 设置随机x坐标位置
          y: Math.random() * 600, // 设置随机y坐标位置
          itemStyle: {
            color: getColorByIndex(), // 可以根据索引设置不同的颜色
            color: "#eae0eb", // 可以根据索引设置不同的颜色
            borderWidth: BorderWidth,
            borderColor: getColorByIndex()
            borderColor: "#996f9f"
          }
        };
      });
@@ -384,8 +406,6 @@
        var color = "#" + hexR + hexG + hexB;
        return color;
      }
      console.log(links);
      console.log(nodeData);
      var option;
      option = {
        title: {
@@ -430,6 +450,12 @@
              opacity: 0.9,
              width: 2,
              curveness: 0.3
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            }
          }
        ]
@@ -448,40 +474,7 @@
    // 基础搜索
    onSearch(val) {
      this.searchKey = val.text;
      getFuzzySearch({ keyword: val.text }).then((res) => {
        if (res.list) {
          this.nodes = [];
          this.relationships = [];
          res.list.forEach((item, index) => {
            let exists1 = this.nodes.some(
              (node) => node.id === item.identifier1 && node.name === item.name1
            );
            let exists2 = this.nodes.some(
              (node) => node.id === item.identifier2 && node.name === item.name2
            );
            // 证明不存在
            if (exists1 !== true) {
              this.nodes.push({
                name: item.name1,
                id: item.identifier1
              });
            }
            if (exists2 !== true) {
              this.nodes.push({
                name: item.name2,
                id: item.identifier2
              });
            }
            let obj = {
              source: item.name1,
              target: item.name2,
              relation: item.relationName || "" // 如果存在 relationName 字段则使用，否则为空字符串
            };
            this.relationships.push(obj);
          });
        }
        this.relation();
      });
      this.getData();
    },
    // 高级搜索
    onSubmit(val) {