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"
    />
@@ -51,6 +51,34 @@
      <view class="legend">
        <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图 -->
@@ -115,6 +143,7 @@
      culture1: null,
      culture2: null,
      culture3: null,
      viewType: 1,
    };
  },
  onLoad(options) {
@@ -126,13 +155,13 @@
    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) => {
        this.dataList = res.object;
        // 处理节点颜色
@@ -211,15 +240,21 @@
        this.culture3 = res.list.find((item) => item.typeName == "家训");
      });
    },
    viewChange(data) {
      this.viewType = data;
      document.getElementById("barChart").innerHTML = "";
      this.initG6Chart();
    },
    showSocialMapping() {
      this.socialMapping = !this.socialMapping;
      if (!this.socialMapping) {
        this.socialRelationsData(this.dataList.children);
        console.log(this.dataList, "dataList");
        document.getElementById("barChart").innerHTML = "";
        this.initG6Chart();
        // this.initG6Chart();
        this.getData(this.socialMapping);
      } else {
        this.getData();
        this.getData(this.socialMapping);
      }
      // this.initBarChart(newDataList, newLinks);
    },
@@ -275,7 +310,7 @@
      const data = {
        isRoot: true,
        id: this.dataList.name,
        name:this.dataList.name,
        name: this.dataList.name,
        style: {
          fill: "red",
        },
@@ -292,17 +327,24 @@
        height,
        linkCenter: true,
        modes: {
          default: [
            "drag-canvas",
            "zoom-canvas",
          ],
          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: "LR",
          direction: this.viewType == 1 ? "LR" : "TB",
          getId: function getId(d) {
            return d.id;
          },
@@ -312,11 +354,12 @@
          getWidth: function getWidth() {
            return 16;
          },
          getVGap: function getVGap() {
            return 30;
          getVGap: () => {
            console.log(this.viewType);
            return this.viewType == 1 ? 20 : 110;
          },
          getHGap: function getHGap() {
            return 100;
          getHGap: () => {
            return this.viewType == 1 ? 100 : 50;
          },
        },
      });
@@ -342,11 +385,17 @@
          },
        };
      });
      let that = this;
      const edgeType =
        this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical";
      this.graph.edge(function (node) {
        return {
          type: "cubic-horizontal",
          type: edgeType,
          color: "#A3B1BF",
          label: node.target._cfg?.model.relationInfo,
          label:
            that.viewType == 1
              ? node.target._cfg?.model.relationInfo
              : that.textStyle(node.target._cfg?.model.relationInfo),
        };
      });
      this.graph.on("node:click", (e) => {
@@ -436,6 +485,11 @@
      //进行渲染
      myChart.setOption(option);
    },

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

    // 返回按钮
    goBack() {
      this.$router.go(-1);
@@ -503,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;