From 8dd168e13fd8046f9c8d980cfde65d3c08a3f8e6 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期五, 19 七月 2024 16:02:21 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary
---
src/pages/inherit/list.vue | 136 ++++++++++++++++++++++++++++++++------------
1 files changed, 98 insertions(+), 38 deletions(-)
diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue
index a595512..6e98240 100644
--- a/src/pages/inherit/list.vue
+++ b/src/pages/inherit/list.vue
@@ -52,6 +52,33 @@
<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鍥� -->
<div v-if="showType == 1" class="barChart" id="barChart"></div>
@@ -98,7 +125,7 @@
import {
inheritMedicalCultureList,
- inheritMedicalRelationList,
+ inheritMedicalRelationList
} from "@/api/index.js";
export default {
@@ -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;
// 澶勭悊鑺傜偣棰滆壊
@@ -204,12 +232,17 @@
// 涓栧尰鏂囧寲
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 == "鍖诲痉");
this.culture3 = res.list.find((item) => item.typeName == "瀹惰");
});
+ },
+ viewChange(data) {
+ this.viewType = data;
+ document.getElementById("barChart").innerHTML = "";
+ this.initG6Chart();
},
showSocialMapping() {
this.socialMapping = !this.socialMapping;
@@ -217,9 +250,10 @@
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);
},
@@ -259,8 +293,7 @@
: "",
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;
@@ -275,12 +308,12 @@
isRoot: true,
id: 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;
@@ -300,15 +333,18 @@
// },
// },
"drag-canvas",
- "zoom-canvas",
- ],
+ "zoom-canvas"
+ ]
},
defaultNode: {
- size: 30,
+ size: 30
+ },
+ defaultEdge: {
+ type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical"
},
layout: {
type: "compactBox",
- direction: "LR",
+ direction: this.viewType == 1 ? "LR" : "TB",
getId: function getId(d) {
return d.id;
},
@@ -318,24 +354,25 @@
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;
+ }
+ }
});
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.id,
labelCfg: {
@@ -343,16 +380,16 @@
offset: 5,
style: {
fill: "#000",
- fontSize: 12,
- },
- },
+ fontSize: 12
+ }
+ }
};
});
this.graph.edge(function (node) {
return {
type: "cubic-horizontal",
color: "#A3B1BF",
- label: node.target._cfg?.model.relationInfo,
+ label: node.target._cfg?.model.relationInfo
};
});
this.graph.on("node:click", (e) => {
@@ -360,11 +397,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
});
}
});
@@ -406,7 +443,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",
@@ -419,7 +456,7 @@
label: {
show: true,
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
- fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬
+ fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
@@ -427,17 +464,17 @@
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);
@@ -445,8 +482,8 @@
// 杩斿洖鎸夐挳
goBack() {
this.$router.go(-1);
- },
- },
+ }
+ }
};
</script>
<style scoped>
@@ -509,6 +546,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