From 1b27559a90417a6f608be0c61e88a6f9e3ea1b40 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期五, 26 七月 2024 11:53:31 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary

---
 src/pages/inherit/list.vue |  112 +++++++++++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 94 insertions(+), 18 deletions(-)

diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue
index 081a6b1..9a9bf37 100644
--- a/src/pages/inherit/list.vue
+++ b/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"
     />
@@ -51,6 +51,33 @@
       <view class="legend">
         <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鍥� -->
@@ -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;
         // 澶勭悊鑺傜偣棰滆壊
@@ -211,15 +239,21 @@
         this.culture3 = res.list.find((item) => item.typeName == "瀹惰");
       });
     },
+    viewChange(data) {
+      this.viewType = data;
+      document.getElementById("barChart").innerHTML = "";
+      this.initG6Chart();
+    },
     showSocialMapping() {
       this.socialMapping = !this.socialMapping;
       if (!this.socialMapping) {
         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);
     },
@@ -275,7 +309,7 @@
       const data = {
         isRoot: true,
         id: this.dataList.name,
-        name:this.dataList.name,
+        name: this.dataList.name,
         style: {
           fill: "red",
         },
@@ -292,17 +326,24 @@
         height,
         linkCenter: true,
         modes: {
-          default: [
-            "drag-canvas",
-            "zoom-canvas",
-          ],
+          default: ["drag-canvas", "zoom-canvas"],
         },
         defaultNode: {
           size: 30,
+          type: "tree-node",
+        },
+        defaultEdge: {
+          type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical",
+          style: {
+            endArrow: {
+              path: G6.Arrow.vee(10, 10, 18), // 浣跨敤鍐呯疆绠ご璺緞鍑芥暟锛屽弬鏁颁负绠ご鐨� 瀹藉害銆侀暱搴︺�佸亸绉婚噺锛堥粯璁や负 0锛屼笌 d 瀵瑰簲锛�
+              d: 15,
+            },
+          },
         },
         layout: {
           type: "compactBox",
-          direction: "LR",
+          direction: this.viewType == 1 ? "LR" : "TB",
           getId: function getId(d) {
             return d.id;
           },
@@ -312,11 +353,12 @@
           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;
           },
         },
       });
@@ -342,11 +384,17 @@
           },
         };
       });
+      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) => {
@@ -436,6 +484,11 @@
       //杩涜娓叉煋
       myChart.setOption(option);
     },
+
+    textStyle(str) {
+      return str.replace(/(.{4})/g, "$1\n");
+    },
+
     // 杩斿洖鎸夐挳
     goBack() {
       this.$router.go(-1);
@@ -503,6 +556,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;

--
Gitblit v1.9.1