From 5c3f597fed3b703143413447089a9ffce171bf51 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期五, 26 七月 2024 11:55:35 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary --- src/pages/inherit/list.vue | 125 ++++++++++++++++++++++++++++++++--------- 1 files changed, 98 insertions(+), 27 deletions(-) diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue index a51d860..893e0bd 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,34 @@ <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> + <p style="position: absolute;bottom: -40px;font-size: 12px;width: 200px;color: #999;">娉細绠ご鎸囧悜涓哄綋鍓嶁�滀汉鐗┾�濈殑X鍏崇郴</p> </view> </view> <!-- echarts鍥� --> @@ -115,6 +143,7 @@ culture1: null, culture2: null, culture3: null, + viewType: 1, }; }, onLoad(options) { @@ -126,13 +155,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 +240,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); }, @@ -252,7 +287,8 @@ if (dataList && dataList.length) { const G6Data = dataList.map((f) => { return { - id: f.name, + id: f.value + "-" + f.name, + name: f.name, personId: f.personId, relationInfo: f?.relationInfo?.relation ? f.relationInfo.relation @@ -274,6 +310,7 @@ const data = { isRoot: true, id: this.dataList.name, + name: this.dataList.name, style: { fill: "red", }, @@ -290,25 +327,24 @@ 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", - ], + 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; }, @@ -318,11 +354,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; }, }, }); @@ -337,7 +374,7 @@ fill: node.relationType ? "#EDF4FF" : "#FCEFE3", stroke: node.relationType ? "#5E7AA7" : "#D3791E", }, - label: node.id, + label: node.name, labelCfg: { position: "center", offset: 5, @@ -348,11 +385,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) => { @@ -442,6 +485,11 @@ //杩涜娓叉煋 myChart.setOption(option); }, + + textStyle(str) { + return str.replace(/(.{4})/g, "$1\n"); + }, + // 杩斿洖鎸夐挳 goBack() { this.$router.go(-1); @@ -509,6 +557,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