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

YM

2024-06-06 6f7c9ef272906bbd5d905ee069bc5d6d1bf55614

 src/pages/inherit/list.vue

@@ -58,25 +58,37 @@
    <view v-if="showType == 2" class="cultureBox">
      <view class="cultureItem" v-if="culture1">
        <view class="imgBox">
          <img src="@/static/image/inherit/icon1.png" alt="" />
          <img src="@/static/image/inherit/icon1.svg" alt="" />
        </view>
        <p>{{culture1.content}}</p>
        <h4 v-if="culture1.source">——《{{culture1.source}}》P {{culture1.pageNo}}</h4>
        <p>{{ culture1.content }}</p>
        <h4 v-if="culture1.source">
          ——《{{ culture1.source }}》P {{ culture1.pageNo }}
        </h4>
      </view>
      <view class="cultureItem" v-if="culture2">
        <view class="imgBox">
          <img src="@/static/image/inherit/icon2.png" alt="" />
          <img src="@/static/image/inherit/icon2.svg" alt="" />
        </view>
        <p>{{culture2.content}}</p>
        <h4 v-if="culture2.source">——《{{culture2.source}}》P {{culture2.pageNo}}</h4>
        <p>{{ culture2.content }}</p>
        <h4 v-if="culture2.source">
          ——《{{ culture2.source }}》P {{ culture2.pageNo }}
        </h4>
      </view>
      <view class="cultureItem" v-if="culture3">
        <view class="imgBox">
          <img src="@/static/image/inherit/icon3.png" alt="" />
          <img src="@/static/image/inherit/icon3.svg" alt="" />
        </view>
        <p>{{culture3.content}}</p>
        <h4 v-if="culture3.source">——《{{culture3.source}}》P {{culture3.pageNo}}</h4>
        <p>{{ culture3.content }}</p>
        <h4 v-if="culture3.source">
          ——《{{ culture3.source }}》P {{ culture3.pageNo }}
        </h4>
      </view>
      <div
        v-if="!culture1 && !culture2 && !culture3"
        style="color: #666; text-align: center; font-size: 16px"
      >
        世医文化无数据
      </div>
    </view>
  </view>
</template>
@@ -100,7 +112,7 @@
      showType: "1",
      culture1: null,
      culture2: null,
      culture3: null,
      culture3: null
    };
  },
  onLoad(options) {
@@ -120,82 +132,80 @@
        identifier: this.idIndex,
        socialFlag: true
      }).then((res) => {
        console.log(res);
        let data = res.object;
        this.dataList = res.object;
        // 处理节点颜色
        this.links = [];
        for (let i = 0; i < data.edgeList.length; i++) {
          const linkItem = data.edgeList[i];
          const index = data.nodeList.findIndex(
            (item) =>
              item.identifier ==
              (linkItem.endId == this.idIndex
                ? linkItem.startId
                : linkItem.endId)
          );
          if (linkItem.relationType == "亲属关系") {
            data.nodeList[index].linkType = 1;
            data.nodeList[index].color = "#F8E2D7";
            data.nodeList[index].borderColor = "#F3AA78";
          }
          if (linkItem.relationType == "社会关系") {
            data.nodeList[index].linkType = 2;
            data.nodeList[index].color = "#ecf4fe";
            data.nodeList[index].borderColor = "#597aa5";
          }
          this.links.push({
            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 = [];
        this.dataList = data.nodeList.map((item) => {
          return {
            ...item,
            itemStyle: {
              color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
              borderColor:
                item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
              borderWidth: "3"
            }
          };
        });
        console.log(this.dataList);
        console.log(this.links);
        this.initBarChart(this.dataList, this.links);
        // this.links = [];
        // for (let i = 0; i < data.edgeList.length; i++) {
        //   const linkItem = data.edgeList[i];
        //   const index = data.nodeList.findIndex(
        //     (item) =>
        //       item.identifier ==
        //       (linkItem.endId == this.idIndex
        //         ? linkItem.startId
        //         : linkItem.endId)
        //   );
        //   if (linkItem.relationType == "亲属关系") {
        //     data.nodeList[index].linkType = 1;
        //     data.nodeList[index].color = "#F8E2D7";
        //     data.nodeList[index].borderColor = "#F3AA78";
        //   }
        //   if (linkItem.relationType == "社会关系") {
        //     data.nodeList[index].linkType = 2;
        //     data.nodeList[index].color = "#ecf4fe";
        //     data.nodeList[index].borderColor = "#597aa5";
        //   }
        //   this.links.push({
        //     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 = data.nodeList.map((item) => {
        //   return {
        //     ...item,
        //     itemStyle: {
        //       color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
        //       borderColor:
        //         item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
        //       borderWidth: "3"
        //     }
        //   };
        // });
        setTimeout(() => {
          this.initBarChart();
        }, 50);
        
      });

      // 世医文化
      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 == "家训")
        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() {
@@ -220,7 +230,7 @@
        }, 50);
      }
    },
    initBarChart(dataList, links) {
    initBarChart() {
      // WMBg
      //通过 $ref 进行挂载
      var barChart = document.getElementById("barChart");
@@ -260,8 +270,7 @@
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "force",
            type: "tree",
            symbolSize: SymbolSize + 20,
            //是否允许用户拖动图片
            roam: true,
@@ -272,25 +281,19 @@
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            data: dataList,
            links: links,
            data: [this.dataList],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0.3
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            },
            force: {
              initLayout: null,
              // gravity: 0
              repulsion: 600,
              edgeLength: 400
            }
            },
            expandAndCollapse: false,
          }
        ]
      };
@@ -327,6 +330,9 @@
  height: 0.24rem;
  font-size: 0.12rem;
  padding: 0;
  border: 1px solid #9e9e9e;
  border-radius: 0;
  color: #000;
}
.barChart {
  width: 100vw;