1

YM

2024-07-26 e00361c6bcbb1a56f6dcda22b91bdfcb2736e263

 src/pages/inherit/list.vue

@@ -53,7 +53,7 @@
        <view>社会关系</view>
      </view>
      <view class="viewChangeBtn">
        <p>{{viewType == 1 ? "横版视图" : "竖版视图"}}</p>
        <p>{{ viewType == 1 ? "横版视图" : "竖版视图" }}</p>
        <view class="imgBox">
          <img
            v-if="viewType == 1"
@@ -78,6 +78,7 @@
            @click="viewChange(2)"
          />
        </view>
        <p style="position: absolute;bottom: -40px;font-size: 12px;width: 200px;color: #999;">注：箭头指向为当前“人物”的X关系</p>
      </view>
    </view>
    <!-- echarts图 -->
@@ -125,7 +126,7 @@

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

export default {
@@ -142,7 +143,7 @@
      culture1: null,
      culture2: null,
      culture3: null,
      viewType: 1
      viewType: 1,
    };
  },
  onLoad(options) {
@@ -160,7 +161,7 @@
    getData(socialFlag) {
      inheritMedicalRelationList({
        identifier: this.idIndex,
        socialFlag: socialFlag
        socialFlag: socialFlag,
      }).then((res) => {
        this.dataList = res.object;
        // 处理节点颜色
@@ -232,7 +233,7 @@

      // 世医文化
      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 == "医德");
@@ -286,14 +287,16 @@
      if (dataList && dataList.length) {
        const G6Data = dataList.map((f) => {
          return {
            id: f.name,
            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) : []
            children:
              f.children.length > 0 ? this.getChartData(f.children) : [],
          };
        });
        return G6Data;
@@ -307,13 +310,14 @@
      const data = {
        isRoot: true,
        id: this.dataList.name,
        name: this.dataList.name,
        style: {
          fill: "red"
          fill: "red",
        },
        children:
          this.dataList?.children.length > 0
            ? this.getChartData(this.dataList.children)
            : []
            : [],
      };
      const width = barChart.scrollWidth;
      const height = barChart.scrollHeight || 500;
@@ -323,24 +327,20 @@
        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"
          ]
          default: ["drag-canvas", "zoom-canvas"],
        },
        defaultNode: {
          size: 30
          size: 30,
          type: "tree-node",
        },
        defaultEdge: {
          type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical"
          type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical",
          style: {
            endArrow: {
              path: G6.Arrow.vee(10, 10, 18), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 15,
            },
          },
        },
        layout: {
          type: "compactBox",
@@ -360,36 +360,42 @@
          },
          getHGap: () => {
            return this.viewType == 1 ? 100 : 50;
          }
        }
          },
        },
      });
      this.graph.node(function (node) {
        return {
          size: 38,
          anchorPoints: [
            [0, 0.5],
            [1, 0.5]
            [1, 0.5],
          ],
          style: {
            fill: node.relationType ? "#EDF4FF" : "#FCEFE3",
            stroke: node.relationType ? "#5E7AA7" : "#D3791E"
            stroke: node.relationType ? "#5E7AA7" : "#D3791E",
          },
          label: node.id,
          label: node.name,
          labelCfg: {
            position: "center",
            offset: 5,
            style: {
              fill: "#000",
              fontSize: 12
            }
          }
              fontSize: 12,
            },
          },
        };
      });
      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) => {
@@ -397,11 +403,11 @@
        console.log("单击", nodeItem);
        if (nodeItem?.personId) {
          uni.navigateTo({
            url: "/pages/character/detail?id=" + nodeItem?.personId
            url: "/pages/character/detail?id=" + nodeItem?.personId,
          });
        } else {
          uni.navigateTo({
            url: "/pages/character/detail?id=" + this.idIndex
            url: "/pages/character/detail?id=" + this.idIndex,
          });
        }
      });
@@ -443,7 +449,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",
@@ -456,7 +462,7 @@
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
              fontSize: FontSize, // 设置文字大小
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
@@ -464,26 +470,31 @@
            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
          }
        ]
            expandAndCollapse: false,
          },
        ],
      };
      //进行渲染
      myChart.setOption(option);
    },

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

    // 返回按钮
    goBack() {
      this.$router.go(-1);
    }
  }
    },
  },
};
</script>
<style scoped>
@@ -553,7 +564,7 @@
  display: flex;
}

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