1

QYF-GitLab1

2024-07-19 209995b72eb7e569979c446b0a2dcafc7d616997

 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,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>
@@ -94,6 +121,8 @@
</template>
<script>
import * as echarts from "echarts";
import G6 from "@antv/g6";

import {
  inheritMedicalCultureList,
  inheritMedicalRelationList
@@ -112,7 +141,8 @@
      showType: "1",
      culture1: null,
      culture2: null,
      culture3: null
      culture3: null,
      viewType: 1
    };
  },
  onLoad(options) {
@@ -124,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;
        // 处理节点颜色
@@ -194,9 +224,10 @@
        //   };
        // });
        setTimeout(() => {
          this.initBarChart();
        }, 50);
        
          // this.initBarChart();
          document.getElementById("barChart").innerHTML = "";
          this.initG6Chart();
        }, 150);
      });

      // 世医文化
@@ -208,27 +239,175 @@
        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);
      }
    },

    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
        },
        defaultEdge: {
          type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical"
        },
        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.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
@@ -293,7 +472,7 @@
              repulsion: 600,
              edgeLength: 400
            },
            expandAndCollapse: false,
            expandAndCollapse: false
          }
        ]
      };
@@ -367,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;