1

YM

2024-07-26 e00361c6bcbb1a56f6dcda22b91bdfcb2736e263

 src/pages/inherit/list.vue

@@ -3,7 +3,7 @@
    <headNav
      idIndex="2"
      :searchBg="false"
      text="中医世医传承数据库"
      text="家学传承"
      bg="/static/image/topBg1.png"
      bg1="/static/image/line1.png"
    />
@@ -52,6 +52,34 @@
        <view class="icon" style="background: #244a7b"></view>
        <view>社会关系</view>
      </view>
      <view class="viewChangeBtn">
        <p>{{ viewType == 1 ? "横版视图" : "竖版视图" }}</p>
        <view class="imgBox">
          <img
            v-if="viewType == 1"
            src="@/static/image/inherit/1-a.png"
            alt=""
          />
          <img
            v-else
            src="@/static/image/inherit/1.png"
            @click="viewChange(1)"
          />
        </view>
        <view class="imgBox">
          <img
            v-if="viewType == 2"
            src="@/static/image/inherit/2-a.png"
            alt=""
          />
          <img
            v-else
            src="@/static/image/inherit/2.png"
            @click="viewChange(2)"
          />
        </view>
        <p style="position: absolute;bottom: -40px;font-size: 12px;width: 200px;color: #999;">注：箭头指向为当前“人物”的X关系</p>
      </view>
    </view>
    <!-- echarts图 -->
    <div v-if="showType == 1" class="barChart" id="barChart"></div>
@@ -94,9 +122,11 @@
</template>
<script>
import * as echarts from "echarts";
import G6 from "@antv/g6";

import {
  inheritMedicalCultureList,
  inheritMedicalRelationList
  inheritMedicalRelationList,
} from "@/api/index.js";

export default {
@@ -112,7 +142,8 @@
      showType: "1",
      culture1: null,
      culture2: null,
      culture3: null
      culture3: null,
      viewType: 1,
    };
  },
  onLoad(options) {
@@ -124,111 +155,267 @@
    if (this.type) {
      this.changeType(this.type);
    }
    this.getData();
    this.getData(this.socialMapping);
  },
  methods: {
    getData() {
    getData(socialFlag) {
      inheritMedicalRelationList({
        identifier: this.idIndex,
        socialFlag: true
        socialFlag: socialFlag,
      }).then((res) => {
        let data = res.object;
        this.dataList = res.object;
        // 处理节点颜色
        this.links = [];
        for (let i = 0; i < data.edgeList.length; i++) {
          const linkItem = data.edgeList[i];
          const index = data.nodeList.findIndex(
            (item) =>
              item.identifier ==
              (linkItem.endId == this.idIndex
                ? linkItem.startId
                : linkItem.endId)
          );
          if (linkItem.relationType == "亲属关系") {
            data.nodeList[index].linkType = 1;
            data.nodeList[index].color = "#F8E2D7";
            data.nodeList[index].borderColor = "#F3AA78";
          }
          if (linkItem.relationType == "社会关系") {
            data.nodeList[index].linkType = 2;
            data.nodeList[index].color = "#ecf4fe";
            data.nodeList[index].borderColor = "#597aa5";
          }
          this.links.push({
            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 = [];
        this.dataList = data.nodeList.map((item) => {
          return {
            ...item,
            itemStyle: {
              color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
              borderColor:
                item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
              borderWidth: "3"
            }
          };
        });
        this.initBarChart(this.dataList, this.links);
        // this.links = [];
        // for (let i = 0; i < data.edgeList.length; i++) {
        //   const linkItem = data.edgeList[i];
        //   const index = data.nodeList.findIndex(
        //     (item) =>
        //       item.identifier ==
        //       (linkItem.endId == this.idIndex
        //         ? linkItem.startId
        //         : linkItem.endId)
        //   );
        //   if (linkItem.relationType == "亲属关系") {
        //     data.nodeList[index].linkType = 1;
        //     data.nodeList[index].color = "#F8E2D7";
        //     data.nodeList[index].borderColor = "#F3AA78";
        //   }
        //   if (linkItem.relationType == "社会关系") {
        //     data.nodeList[index].linkType = 2;
        //     data.nodeList[index].color = "#ecf4fe";
        //     data.nodeList[index].borderColor = "#597aa5";
        //   }
        //   this.links.push({
        //     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 = data.nodeList.map((item) => {
        //   return {
        //     ...item,
        //     itemStyle: {
        //       color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
        //       borderColor:
        //         item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
        //       borderWidth: "3"
        //     }
        //   };
        // });
        setTimeout(() => {
          // this.initBarChart();
          document.getElementById("barChart").innerHTML = "";
          this.initG6Chart();
        }, 150);
      });

      // 世医文化
      inheritMedicalCultureList({
        identifier: this.idIndex
        identifier: this.idIndex,
      }).then((res) => {
        this.culture1 = res.list.find((item) => item.typeName == "家风");
        this.culture2 = res.list.find((item) => item.typeName == "医德");
        this.culture3 = res.list.find((item) => item.typeName == "家训");
      });
    },
    viewChange(data) {
      this.viewType = data;
      document.getElementById("barChart").innerHTML = "";
      this.initG6Chart();
    },
    showSocialMapping() {
      this.socialMapping = !this.socialMapping;
      let newDataList = [];
      let newLinks = [];
      if (this.socialMapping) {
        newDataList = [...this.dataList];
        newLinks = [...this.links];
      if (!this.socialMapping) {
        this.socialRelationsData(this.dataList.children);
        console.log(this.dataList, "dataList");
        document.getElementById("barChart").innerHTML = "";
        // this.initG6Chart();
        this.getData(this.socialMapping);
      } else {
        newDataList = this.dataList.filter((item) => item.color !== "#ecf4fe");
        newLinks = [...this.links];
        this.getData(this.socialMapping);
      }
      this.initBarChart(newDataList, newLinks);
      // this.initBarChart(newDataList, newLinks);
    },
    socialRelationsData(data) {
      if (data && data.length) {
        for (let i = 0; i < data.length; i++) {
          const item = data[i];
          if (item?.relationInfo?.relationType == "社会关系") {
            data.splice(i, 1);
          }
          if (item.children.length > 0) {
            this.socialRelationsData(item.children);
          }
        }
      }
    },
    changeType(type) {
      this.showType = type;
      if (type == 1) {
        setTimeout(() => {
          this.socialMapping = true;
          this.initBarChart(this.dataList, this.links);
          // this.initBarChart(this.dataList, this.links);
          document.getElementById("barChart").innerHTML = "";
          this.initG6Chart();
        }, 50);
      }
    },
    initBarChart(dataList, links) {

    getChartData(dataList) {
      if (dataList && dataList.length) {
        const G6Data = dataList.map((f) => {
          return {
            id: f.value + "-" + f.name,
            name: f.name,
            personId: f.personId,
            relationInfo: f?.relationInfo?.relation
              ? f.relationInfo.relation
              : "",
            relationType:
              f?.relationInfo?.relationType == "社会关系" ? true : false,
            children:
              f.children.length > 0 ? this.getChartData(f.children) : [],
          };
        });
        return G6Data;
      }
    },
    initG6Chart() {
      console.log(this.dataList, "dataList");
      console.log(this.links, "links");
      console.log(this.getChartData(this.dataList.children), "123123");
      var barChart = document.getElementById("barChart");
      const data = {
        isRoot: true,
        id: this.dataList.name,
        name: this.dataList.name,
        style: {
          fill: "red",
        },
        children:
          this.dataList?.children.length > 0
            ? this.getChartData(this.dataList.children)
            : [],
      };
      const width = barChart.scrollWidth;
      const height = barChart.scrollHeight || 500;
      this.graph = new G6.TreeGraph({
        container: "barChart",
        width,
        height,
        linkCenter: true,
        modes: {
          default: ["drag-canvas", "zoom-canvas"],
        },
        defaultNode: {
          size: 30,
          type: "tree-node",
        },
        defaultEdge: {
          type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical",
          style: {
            endArrow: {
              path: G6.Arrow.vee(10, 10, 18), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 15,
            },
          },
        },
        layout: {
          type: "compactBox",
          direction: this.viewType == 1 ? "LR" : "TB",
          getId: function getId(d) {
            return d.id;
          },
          getHeight: function getHeight() {
            return 16;
          },
          getWidth: function getWidth() {
            return 16;
          },
          getVGap: () => {
            console.log(this.viewType);
            return this.viewType == 1 ? 20 : 110;
          },
          getHGap: () => {
            return this.viewType == 1 ? 100 : 50;
          },
        },
      });
      this.graph.node(function (node) {
        return {
          size: 38,
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
          style: {
            fill: node.relationType ? "#EDF4FF" : "#FCEFE3",
            stroke: node.relationType ? "#5E7AA7" : "#D3791E",
          },
          label: node.name,
          labelCfg: {
            position: "center",
            offset: 5,
            style: {
              fill: "#000",
              fontSize: 12,
            },
          },
        };
      });
      let that = this;
      const edgeType =
        this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical";
      this.graph.edge(function (node) {
        return {
          type: edgeType,
          color: "#A3B1BF",
          label:
            that.viewType == 1
              ? node.target._cfg?.model.relationInfo
              : that.textStyle(node.target._cfg?.model.relationInfo),
        };
      });
      this.graph.on("node:click", (e) => {
        const nodeItem = e.item._cfg.model; // 获取被点击的节点元素对象
        console.log("单击", nodeItem);
        if (nodeItem?.personId) {
          uni.navigateTo({
            url: "/pages/character/detail?id=" + nodeItem?.personId,
          });
        } else {
          uni.navigateTo({
            url: "/pages/character/detail?id=" + this.idIndex,
          });
        }
      });
      this.graph.data(data);
      this.graph.render();
      this.graph.fitView();
    },
    initBarChart() {
      // WMBg
      //通过 $ref 进行挂载
      var barChart = document.getElementById("barChart");
@@ -262,54 +449,52 @@
          image: "./static/image/WMBg.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: {},
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "force",
            type: "tree",
            symbolSize: SymbolSize + 20,
            //是否允许用户拖动图片
            roam: true,
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
              fontSize: FontSize, // 设置文字大小
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            data: dataList,
            links: links,
            data: [this.dataList],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0.3
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
              curveness: 0.3,
            },
            force: {
              initLayout: null,
              // gravity: 0
              repulsion: 600,
              edgeLength: 400
            }
          }
        ]
              edgeLength: 400,
            },
            expandAndCollapse: false,
          },
        ],
      };
      //进行渲染
      myChart.setOption(option);
    },

    textStyle(str) {
      return str.replace(/(.{4})/g, "$1\n");
    },

    // 返回按钮
    goBack() {
      this.$router.go(-1);
    }
  }
    },
  },
};
</script>
<style scoped>
@@ -372,6 +557,29 @@
  margin-right: 0.06rem;
}

.viewChangeBtn {
  position: absolute;
  right: 1.2rem;
  top: 0.17rem;
  display: flex;
}

.viewChangeBtn p {
  line-height: 0.36rem;
  margin-right: 0.2rem;
}

.viewChangeBtn .imgBox {
  width: 0.36rem;
  height: 0.36rem;
}

.viewChangeBtn img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.legend {
  display: flex;
  align-items: center;