世医图谱

杨磊

2024-06-12 d27da0d7b2f5cc3cc97622158b7f14a7faabb05b

 src/pages/inherit/list.vue

@@ -94,9 +94,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 +114,7 @@
      showType: "1",
      culture1: null,
      culture2: null,
      culture3: null
      culture3: null,
    };
  },
  onLoad(options) {
@@ -130,7 +132,7 @@
    getData() {
      inheritMedicalRelationList({
        identifier: this.idIndex,
        socialFlag: true
        socialFlag: true,
      }).then((res) => {
        this.dataList = res.object;
        // 处理节点颜色
@@ -194,14 +196,15 @@
        //   };
        // });
        setTimeout(() => {
          this.initBarChart();
        }, 50);
        
          // 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 == "医德");
@@ -210,25 +213,164 @@
    },
    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();
      } else {
        newDataList = this.dataList.filter((item) => item.color !== "#ecf4fe");
        newLinks = [...this.links];
        this.getData();
      }
      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);
      }
    },

    getChartData(dataList) {
      if (dataList && dataList.length) {
        const G6Data = dataList.map((f) => {
          return {
            id: 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,
        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: [
            // {
            //   type: "collapse-expand",
            //   onChange: function onChange(item, collapsed) {
            //     const data = item.get("model");
            //     data.collapsed = collapsed;
            //     return true;
            //   },
            // },
            "drag-canvas",
            "zoom-canvas",
          ],
        },
        defaultNode: {
          size: 30,
        },
        layout: {
          type: "compactBox",
          direction: "LR",
          getId: function getId(d) {
            return d.id;
          },
          getHeight: function getHeight() {
            return 16;
          },
          getWidth: function getWidth() {
            return 16;
          },
          getVGap: function getVGap() {
            return 30;
          },
          getHGap: function getHGap() {
            return 100;
          },
        },
      });
      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.id,
          labelCfg: {
            position: "center",
            offset: 5,
            style: {
              fill: "#000",
              fontSize: 12,
            },
          },
        };
      });
      this.graph.edge(function (node) {
        return {
          type: "cubic-horizontal",
          color: "#A3B1BF",
          label: 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
@@ -264,7 +406,7 @@
          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",
@@ -277,7 +419,7 @@
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
              fontSize: FontSize, // 设置文字大小
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
@@ -285,17 +427,17 @@
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0.3
              curveness: 0.3,
            },
            force: {
              initLayout: null,
              // gravity: 0
              repulsion: 600,
              edgeLength: 400
              edgeLength: 400,
            },
            expandAndCollapse: false,
          }
        ]
          },
        ],
      };
      //进行渲染
      myChart.setOption(option);
@@ -303,8 +445,8 @@
    // 返回按钮
    goBack() {
      this.$router.go(-1);
    }
  }
    },
  },
};
</script>
<style scoped>