Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary

杨磊

2024-05-16 4469428bfec368ea9c735303ff9ad4ed25f5b762

 src/pages/inherit/list.vue

@@ -1,5 +1,5 @@
<template>
  <view class="">
  <view>
    <headNav
      idIndex="2"
      :searchBg="false"
@@ -34,7 +34,7 @@
          世医文化
        </li>
      </ul>
      <view class="" style="width: 1rem"></view>
      <view style="width: 1rem"></view>
    </view>
    <view v-if="showType == 1" class="legendBox">
      <view class="socialMappingBox" @click="showSocialMapping">
@@ -56,30 +56,26 @@
    <!-- echarts图 -->
    <div v-if="showType == 1" class="barChart" id="barChart"></div>
    <view v-if="showType == 2" class="cultureBox">
      <view class="cultureItem">
      <view class="cultureItem" v-if="culture1">
        <view class="imgBox">
          <img src="@/static/image/inherit/icon1.png" alt="" />
        </view>
        <p>
          蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
        </p>
        <h4>——《奇八服考》P 3</h4>
        <p>{{culture1.content}}</p>
        <h4 v-if="culture1.source">——《{{culture1.source}}》P {{culture1.pageNo}}</h4>
      </view>
      <view class="cultureItem">
      <view class="cultureItem" v-if="culture2">
        <view class="imgBox">
          <img src="@/static/image/inherit/icon2.png" alt="" />
        </view>
        <p>瀕湖世儒，兼以醫鳴，一門父子兄弟富有著述，此特見一斑耳。</p>
        <h4>——《奇八服考》P 3</h4>
        <p>{{culture2.content}}</p>
        <h4 v-if="culture2.source">——《{{culture2.source}}》P {{culture2.pageNo}}</h4>
      </view>
      <view class="cultureItem">
      <view class="cultureItem" v-if="culture3">
        <view class="imgBox">
          <img src="@/static/image/inherit/icon3.png" alt="" />
        </view>
        <p>
          病坊刻瀕湖《本草》之因仍訛誤，爰重爲鍥板。經始於癸未八月，迄乙酉五月，閱二歲，糜工數萬，乃克葳事。其校理訛誤，監督剞劂，命兒子席珍、士瑜、士珩分任之；商榷方劑，區別品彙，醫士王君鏡堂之力爲多；參以鍾君受白；而經紀其事，始終不懈者，則范君靜存也。此外如田君撰異、曹君晴峯、熊君仲山、翁君鐵梅、黨君幼雲、張君貫之、程君達三、陳君振遠、許君功甫、朱君藻臣、或參校讐，或司綜核，或職圖繪，謹備書之
        </p>
        <h4>——《奇八服考》P 3</h4>
        <p>{{culture3.content}}</p>
        <h4 v-if="culture3.source">——《{{culture3.source}}》P {{culture3.pageNo}}</h4>
      </view>
    </view>
  </view>
@@ -87,7 +83,6 @@
<script>
import * as echarts from "echarts";
import {
  inheritMedicalSataStatistics,
  inheritMedicalCultureList,
  inheritMedicalRelationList
} from "@/api/index.js";
@@ -102,15 +97,21 @@
      dataList: [],
      links: [],
      socialMapping: true,
      showType: "1"
      showType: "1",
      culture1: null,
      culture2: null,
      culture3: null,
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
    this.mainName = decodeURIComponent(options.name);
    console.log("optionsoptionsoptions", options.id);
    this.type = options.type;
  },
  mounted() {
    if (this.type) {
      this.changeType(this.type);
    }
    this.getData();
  },
  methods: {
@@ -126,22 +127,48 @@
        for (let i = 0; i < data.edgeList.length; i++) {
          const linkItem = data.edgeList[i];
          const index = data.nodeList.findIndex(
              (item) => item.identifier == linkItem.endId
            );
            (item) =>
              item.identifier ==
              (linkItem.endId == this.idIndex
                ? linkItem.startId
                : linkItem.endId)
          );
          if (linkItem.relationType == "亲属关系") {
            data.nodeList[index].linkType = 1;
            data.nodeList[index].color = "#DCE7EB";
            data.nodeList[index].borderColor = "#5F81A4";
            data.nodeList[index].color = "#F8E2D7";
            data.nodeList[index].borderColor = "#F3AA78";
          }
          if (linkItem.relationType == "社会关系") {
            data.nodeList[index].linkType = 2;
            data.nodeList[index].color = "#E1E1E1";
            data.nodeList[index].borderColor = "#888888";
            data.nodeList[index].color = "#ecf4fe";
            data.nodeList[index].borderColor = "#597aa5";
          }
          this.links.push({
            source: this.mainName,
            target: data.nodeList[index].name,
            relationName: linkItem.relation
            source: data.nodeList.find(
              (item) => item.identifier == linkItem.startId
            ).name,
            target: data.nodeList.find(
              (item) => item.identifier == linkItem.endId
            ).name,
            relationType: linkItem.relationType,
            label: {
              show: true,
              formatter: function (params) {
                // 使用函数动态生成标签内容
                // return relationships.find(rel => rel.source === nodes[params.data
                //       .source] && rel.target === nodes[params.data.target])
                //    .relation;
                return linkItem.relation;
              }, // 设置关系标签内容为"Child-Parent"
              color: "#2C2C2C",
              fontSize: 16,
              backgroundColor: "rgba(255, 255, 255, 1)",
              padding: [3, 8],
              borderRadius: 30,
              position: "middle", // 设置标签文本在线的中间位置上居中显示
              // z: -1, // 设置标签的z轴高度，使其比连接线更高
              distance: -10 // 将标签放置在连接线上
            }
          });
        }
        this.dataList = [];
@@ -150,13 +177,25 @@
            ...item,
            itemStyle: {
              color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
              borderColor: item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
              borderColor:
                item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
              borderWidth: "3"
            }
          };
        });
        console.log(this.dataList,this.links);
        this.initBarChart();
        console.log(this.dataList);
        console.log(this.links);
        this.initBarChart(this.dataList, this.links);
      });

      // 世医文化
      inheritMedicalCultureList({
        identifier: this.idIndex
      }).then((res) => {
        console.log(res, "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 == "家训")
      });
    },
    showSocialMapping() {
@@ -167,9 +206,7 @@
        newDataList = [...this.dataList];
        newLinks = [...this.links];
      } else {
        newDataList = this.dataList.filter(
          (item) => item.itemStyle.borderColor == "#F3AA78"
        );
        newDataList = this.dataList.filter((item) => item.color !== "#ecf4fe");
        newLinks = [...this.links];
      }
      this.initBarChart(newDataList, newLinks);
@@ -183,7 +220,7 @@
        }, 50);
      }
    },
    initBarChart() {
    initBarChart(dataList, links) {
      // WMBg
      //通过 $ref 进行挂载
      var barChart = document.getElementById("barChart");
@@ -233,30 +270,20 @@
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle"],
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],

            edgeLabel: {
              show: true,
              fontSize: FontSize, //更改两者关系的字体
              position: "middle",
              //这里设置关系文字是否和线段重叠
              //   padding: [0, 0], // 调整内边距以确保标签与线段紧密贴合
              // verticalAlign: 'middle', // 设置文本的垂直对齐方式为居中
              formatter: function (params) {
                // params.data 是边的数据对象，你可以在这里定义关系名
                // 例如，你可以根据 source 和 target 的名称来定义关系名
                return params.data.relationName || "父子"; // 如果定义了 relationName 则显示它，否则显示“父子”
              }
            },
            //各个节点
            data: this.dataList, //关系连接
            links: this.links,
            data: dataList,
            links: links,
            lineStyle: {
              color: "#000000",
              opacity: 0.9,
              width: 2,
              curveness: 0
              curveness: 0.3
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            },
            force: {
              initLayout: null,