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 | 88 ++++++++++++++++++++++++++------------------ 1 files changed, 52 insertions(+), 36 deletions(-) diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue index 109c6f9..9a9bf37 100644 --- a/src/pages/inherit/list.vue +++ b/src/pages/inherit/list.vue @@ -53,7 +53,7 @@ <view>绀句細鍏崇郴</view> </view> <view class="viewChangeBtn"> - <p>{{viewType == 1 ? "妯増瑙嗗浘" : "绔栫増瑙嗗浘"}}</p> + <p>{{ viewType == 1 ? "妯増瑙嗗浘" : "绔栫増瑙嗗浘" }}</p> <view class="imgBox"> <img v-if="viewType == 1" @@ -125,7 +125,7 @@ import { inheritMedicalCultureList, - inheritMedicalRelationList + inheritMedicalRelationList, } from "@/api/index.js"; export default { @@ -142,7 +142,7 @@ culture1: null, culture2: null, culture3: null, - viewType: 1 + viewType: 1, }; }, onLoad(options) { @@ -160,7 +160,7 @@ getData(socialFlag) { inheritMedicalRelationList({ identifier: this.idIndex, - socialFlag: socialFlag + socialFlag: socialFlag, }).then((res) => { this.dataList = res.object; // 澶勭悊鑺傜偣棰滆壊 @@ -232,7 +232,7 @@ // 涓栧尰鏂囧寲 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 == "鍖诲痉"); @@ -294,7 +294,8 @@ : "", 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; @@ -308,14 +309,14 @@ const data = { isRoot: true, id: this.dataList.name, - name:this.dataList.name, + name: 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; @@ -325,16 +326,20 @@ height, linkCenter: true, modes: { - default: [ - "drag-canvas", - "zoom-canvas" - ] + default: ["drag-canvas", "zoom-canvas"], }, defaultNode: { - size: 30 + size: 30, + type: "tree-node", }, defaultEdge: { - type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical" + type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical", + style: { + endArrow: { + path: G6.Arrow.vee(10, 10, 18), // 浣跨敤鍐呯疆绠ご璺緞鍑芥暟锛屽弬鏁颁负绠ご鐨� 瀹藉害銆侀暱搴︺�佸亸绉婚噺锛堥粯璁や负 0锛屼笌 d 瀵瑰簲锛� + d: 15, + }, + }, }, layout: { type: "compactBox", @@ -354,19 +359,19 @@ }, 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.name, labelCfg: { @@ -374,16 +379,22 @@ offset: 5, style: { fill: "#000", - fontSize: 12 - } - } + fontSize: 12, + }, + }, }; }); + 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) => { @@ -391,11 +402,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, }); } }); @@ -437,7 +448,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", @@ -450,7 +461,7 @@ label: { show: true, color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� - fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬 + fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 }, edgeSymbol: ["circle", "arrow"], edgeSymbolSize: [4, 10], @@ -458,26 +469,31 @@ 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); }, + + textStyle(str) { + return str.replace(/(.{4})/g, "$1\n"); + }, + // 杩斿洖鎸夐挳 goBack() { this.$router.go(-1); - } - } + }, + }, }; </script> <style scoped> @@ -547,7 +563,7 @@ display: flex; } -.viewChangeBtn p{ +.viewChangeBtn p { line-height: 0.36rem; margin-right: 0.2rem; } -- Gitblit v1.9.1