From caeb2c4b5fa88f6fe8799b67c790d8ad8b4d98e8 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期三, 24 七月 2024 16:41:27 +0800
Subject: [PATCH] 1
---
src/pages/inherit/list.vue | 232 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 214 insertions(+), 18 deletions(-)
diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue
index 21130a8..109c6f9 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"
/>
@@ -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>
@@ -94,6 +121,8 @@
</template>
<script>
import * as echarts from "echarts";
+import G6 from "@antv/g6";
+
import {
inheritMedicalCultureList,
inheritMedicalRelationList
@@ -112,7 +141,8 @@
showType: "1",
culture1: null,
culture2: null,
- culture3: null
+ culture3: null,
+ viewType: 1
};
},
onLoad(options) {
@@ -124,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;
// 澶勭悊鑺傜偣棰滆壊
@@ -194,9 +224,10 @@
// };
// });
setTimeout(() => {
- this.initBarChart();
- }, 50);
-
+ // this.initBarChart();
+ document.getElementById("barChart").innerHTML = "";
+ this.initG6Chart();
+ }, 150);
});
// 涓栧尰鏂囧寲
@@ -208,27 +239,169 @@
this.culture3 = res.list.find((item) => item.typeName == "瀹惰");
});
},
+ viewChange(data) {
+ this.viewType = data;
+ document.getElementById("barChart").innerHTML = "";
+ this.initG6Chart();
+ },
showSocialMapping() {
this.socialMapping = !this.socialMapping;
- let newDataList = [];
- let newLinks = [];
- if (this.socialMapping) {
- newDataList = [...this.dataList];
- newLinks = [...this.links];
+ if (!this.socialMapping) {
+ this.socialRelationsData(this.dataList.children);
+ console.log(this.dataList, "dataList");
+ document.getElementById("barChart").innerHTML = "";
+ // this.initG6Chart();
+ this.getData(this.socialMapping);
} else {
- newDataList = this.dataList.filter((item) => item.color !== "#ecf4fe");
- newLinks = [...this.links];
+ this.getData(this.socialMapping);
}
- this.initBarChart(newDataList, newLinks);
+ // this.initBarChart(newDataList, newLinks);
+ },
+ socialRelationsData(data) {
+ if (data && data.length) {
+ for (let i = 0; i < data.length; i++) {
+ const item = data[i];
+ if (item?.relationInfo?.relationType == "绀句細鍏崇郴") {
+ data.splice(i, 1);
+ }
+ if (item.children.length > 0) {
+ this.socialRelationsData(item.children);
+ }
+ }
+ }
},
changeType(type) {
this.showType = type;
if (type == 1) {
setTimeout(() => {
this.socialMapping = true;
- this.initBarChart(this.dataList, this.links);
+ // this.initBarChart(this.dataList, this.links);
+ document.getElementById("barChart").innerHTML = "";
+ this.initG6Chart();
}, 50);
}
+ },
+
+ getChartData(dataList) {
+ if (dataList && dataList.length) {
+ const G6Data = dataList.map((f) => {
+ return {
+ id: f.value + "-" + f.name,
+ name: f.name,
+ personId: f.personId,
+ relationInfo: f?.relationInfo?.relation
+ ? f.relationInfo.relation
+ : "",
+ relationType:
+ f?.relationInfo?.relationType == "绀句細鍏崇郴" ? true : false,
+ children: f.children.length > 0 ? this.getChartData(f.children) : []
+ };
+ });
+ return G6Data;
+ }
+ },
+ initG6Chart() {
+ console.log(this.dataList, "dataList");
+ console.log(this.links, "links");
+ console.log(this.getChartData(this.dataList.children), "123123");
+ var barChart = document.getElementById("barChart");
+ const data = {
+ isRoot: true,
+ id: this.dataList.name,
+ name:this.dataList.name,
+ style: {
+ fill: "red"
+ },
+ children:
+ this.dataList?.children.length > 0
+ ? this.getChartData(this.dataList.children)
+ : []
+ };
+ const width = barChart.scrollWidth;
+ const height = barChart.scrollHeight || 500;
+ this.graph = new G6.TreeGraph({
+ container: "barChart",
+ width,
+ height,
+ linkCenter: true,
+ modes: {
+ default: [
+ "drag-canvas",
+ "zoom-canvas"
+ ]
+ },
+ defaultNode: {
+ size: 30
+ },
+ defaultEdge: {
+ type: this.viewType == 1 ? "cubic-horizontal" : "cubic-vertical"
+ },
+ layout: {
+ type: "compactBox",
+ direction: this.viewType == 1 ? "LR" : "TB",
+ getId: function getId(d) {
+ return d.id;
+ },
+ getHeight: function getHeight() {
+ return 16;
+ },
+ getWidth: function getWidth() {
+ return 16;
+ },
+ getVGap: () => {
+ console.log(this.viewType);
+ return this.viewType == 1 ? 20 : 110;
+ },
+ getHGap: () => {
+ return this.viewType == 1 ? 100 : 50;
+ }
+ }
+ });
+ this.graph.node(function (node) {
+ return {
+ size: 38,
+ anchorPoints: [
+ [0, 0.5],
+ [1, 0.5]
+ ],
+ style: {
+ fill: node.relationType ? "#EDF4FF" : "#FCEFE3",
+ stroke: node.relationType ? "#5E7AA7" : "#D3791E"
+ },
+ label: node.name,
+ labelCfg: {
+ position: "center",
+ offset: 5,
+ style: {
+ fill: "#000",
+ fontSize: 12
+ }
+ }
+ };
+ });
+ this.graph.edge(function (node) {
+ return {
+ type: "cubic-horizontal",
+ color: "#A3B1BF",
+ label: node.target._cfg?.model.relationInfo
+ };
+ });
+ this.graph.on("node:click", (e) => {
+ const nodeItem = e.item._cfg.model; // 鑾峰彇琚偣鍑荤殑鑺傜偣鍏冪礌瀵硅薄
+ console.log("鍗曞嚮", nodeItem);
+ if (nodeItem?.personId) {
+ uni.navigateTo({
+ url: "/pages/character/detail?id=" + nodeItem?.personId
+ });
+ } else {
+ uni.navigateTo({
+ url: "/pages/character/detail?id=" + this.idIndex
+ });
+ }
+ });
+ this.graph.data(data);
+ this.graph.render();
+ this.graph.fitView();
},
initBarChart() {
// WMBg
@@ -293,7 +466,7 @@
repulsion: 600,
edgeLength: 400
},
- expandAndCollapse: false,
+ expandAndCollapse: false
}
]
};
@@ -367,6 +540,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