1

YM

2024-07-19 73fca87c5ba3ef4e27b6c20bee314b204a99442a

1

 src/pages/inherit/list.vue

@@ -52,6 +52,33 @@
        <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>
      </view>
    </view>
    <!-- echarts图 -->
    <div v-if="showType == 1" class="barChart" id="barChart"></div>
@@ -98,7 +125,7 @@

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

export default {
@@ -115,6 +142,7 @@
      culture1: null,
      culture2: null,
      culture3: null,
      viewType: 1
    };
  },
  onLoad(options) {
@@ -126,13 +154,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;
        // 处理节点颜色
@@ -204,12 +232,17 @@

      // 世医文化
      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;
@@ -217,9 +250,10 @@
        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);
    },
@@ -259,8 +293,7 @@
              : "",
            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;
@@ -275,12 +308,12 @@
        isRoot: true,
        id: 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;
@@ -300,15 +333,18 @@
            //   },
            // },
            "drag-canvas",
            "zoom-canvas",
          ],
            "zoom-canvas"
          ]
        },
        defaultNode: {
          size: 30,
          size: 30
        },
        defaultEdge: {
          type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical"
        },
        layout: {
          type: "compactBox",
          direction: "LR",
          direction: this.viewType == 1 ? "LR" : "TB",
          getId: function getId(d) {
            return d.id;
          },
@@ -318,24 +354,25 @@
          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;
          }
        }
      });
      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,
          labelCfg: {
@@ -343,16 +380,16 @@
            offset: 5,
            style: {
              fill: "#000",
              fontSize: 12,
            },
          },
              fontSize: 12
            }
          }
        };
      });
      this.graph.edge(function (node) {
        return {
          type: "cubic-horizontal",
          color: "#A3B1BF",
          label: node.target._cfg?.model.relationInfo,
          label: node.target._cfg?.model.relationInfo
        };
      });
      this.graph.on("node:click", (e) => {
@@ -360,11 +397,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
          });
        }
      });
@@ -406,7 +443,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",
@@ -419,7 +456,7 @@
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize, // 设置文字大小
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
@@ -427,17 +464,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,
          },
        ],
            expandAndCollapse: false
          }
        ]
      };
      //进行渲染
      myChart.setOption(option);
@@ -445,8 +482,8 @@
    // 返回按钮
    goBack() {
      this.$router.go(-1);
    },
  },
    }
  }
};
</script>
<style scoped>
@@ -509,6 +546,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;

 src/static/image/inherit/1-a.png

 src/static/image/inherit/1.png

 src/static/image/inherit/2-a.png

 src/static/image/inherit/2.png