1

YM

2024-05-11 b576ba3501304bdbd56771dc7299e0c40e047aa4

 src/pages/inherit/list.vue

@@ -1,5 +1,5 @@
<template>
  <view class="">
  <view>
    <headNav
      idIndex="2"
      :searchBg="false"
@@ -34,7 +34,7 @@
          世医文化
        </li>
      </ul>
      <view class="" style="width: 1rem"></view>
      <view style="width: 1rem"></view>
    </view>
    <view v-if="showType == 1" class="legendBox">
      <view class="socialMappingBox" @click="showSocialMapping">
@@ -87,7 +87,6 @@
<script>
import * as echarts from "echarts";
import {
  inheritMedicalSataStatistics,
  inheritMedicalCultureList,
  inheritMedicalRelationList
} from "@/api/index.js";
@@ -108,9 +107,12 @@
  onLoad(options) {
    this.idIndex = options.id;
    this.mainName = decodeURIComponent(options.name);
    console.log("optionsoptionsoptions", options.id);
    this.type = options.type;
  },
  mounted() {
    if (this.type) {
      this.changeType(this.type);
    }
    this.getData();
  },
  methods: {
@@ -126,22 +128,48 @@
        for (let i = 0; i < data.edgeList.length; i++) {
          const linkItem = data.edgeList[i];
          const index = data.nodeList.findIndex(
              (item) => item.identifier == linkItem.endId
            );
            (item) =>
              item.identifier ==
              (linkItem.endId == this.idIndex
                ? linkItem.startId
                : linkItem.endId)
          );
          if (linkItem.relationType == "亲属关系") {
            data.nodeList[index].linkType = 1;
            data.nodeList[index].color = "#DCE7EB";
            data.nodeList[index].borderColor = "#5F81A4";
            data.nodeList[index].color = "#F8E2D7";
            data.nodeList[index].borderColor = "#F3AA78";
          }
          if (linkItem.relationType == "社会关系") {
            data.nodeList[index].linkType = 2;
            data.nodeList[index].color = "#E1E1E1";
            data.nodeList[index].borderColor = "#888888";
            data.nodeList[index].color = "#ecf4fe";
            data.nodeList[index].borderColor = "#597aa5";
          }
          this.links.push({
            source: this.mainName,
            target: data.nodeList[index].name,
            relationName: linkItem.relation
            source: data.nodeList.find(
              (item) => item.identifier == linkItem.startId
            ).name,
            target: data.nodeList.find(
              (item) => item.identifier == linkItem.endId
            ).name,
            relationType: linkItem.relationType,
            label: {
              show: true,
              formatter: function (params) {
                // 使用函数动态生成标签内容
                // return relationships.find(rel => rel.source === nodes[params.data
                //       .source] && rel.target === nodes[params.data.target])
                //    .relation;
                return linkItem.relation;
              }, // 设置关系标签内容为"Child-Parent"
              color: "#2C2C2C",
              fontSize: 16,
              backgroundColor: "rgba(255, 255, 255, 1)",
              padding: [3, 8],
              borderRadius: 30,
              position: "middle", // 设置标签文本在线的中间位置上居中显示
              // z: -1, // 设置标签的z轴高度，使其比连接线更高
              distance: -10 // 将标签放置在连接线上
            }
          });
        }
        this.dataList = [];
@@ -150,13 +178,22 @@
            ...item,
            itemStyle: {
              color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
              borderColor: item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
              borderColor:
                item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
              borderWidth: "3"
            }
          };
        });
        console.log(this.dataList,this.links);
        this.initBarChart();
        console.log(this.dataList);
        console.log(this.links);
        this.initBarChart(this.dataList, this.links);
      });

      // 世医文化
      inheritMedicalCultureList({
        identifier: this.idIndex
      }).then((res) => {
        console.log(res, "res");
      });
    },
    showSocialMapping() {
@@ -167,9 +204,7 @@
        newDataList = [...this.dataList];
        newLinks = [...this.links];
      } else {
        newDataList = this.dataList.filter(
          (item) => item.itemStyle.borderColor == "#F3AA78"
        );
        newDataList = this.dataList.filter((item) => item.color !== "#ecf4fe");
        newLinks = [...this.links];
      }
      this.initBarChart(newDataList, newLinks);
@@ -183,7 +218,7 @@
        }, 50);
      }
    },
    initBarChart() {
    initBarChart(dataList, links) {
      // WMBg
      //通过 $ref 进行挂载
      var barChart = document.getElementById("barChart");
@@ -233,30 +268,20 @@
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle"],
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],

            edgeLabel: {
              show: true,
              fontSize: FontSize, //更改两者关系的字体
              position: "middle",
              //这里设置关系文字是否和线段重叠
              //   padding: [0, 0], // 调整内边距以确保标签与线段紧密贴合
              // verticalAlign: 'middle', // 设置文本的垂直对齐方式为居中
              formatter: function (params) {
                // params.data 是边的数据对象，你可以在这里定义关系名
                // 例如，你可以根据 source 和 target 的名称来定义关系名
                return params.data.relationName || "父子"; // 如果定义了 relationName 则显示它，否则显示“父子”
              }
            },
            //各个节点
            data: this.dataList, //关系连接
            links: this.links,
            data: dataList,
            links: links,
            lineStyle: {
              color: "#000000",
              opacity: 0.9,
              width: 2,
              curveness: 0
              curveness: 0.3
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            },
            force: {
              initLayout: null,