From 587d25c4a1d1a5d240e7750aa0c043a702a737d5 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期四, 18 七月 2024 10:47:30 +0800
Subject: [PATCH] 1
---
src/pages/character/index.vue | 225 +++++++++++++++++++++++++++++++-------------------------
1 files changed, 124 insertions(+), 101 deletions(-)
diff --git a/src/pages/character/index.vue b/src/pages/character/index.vue
index 0dca248..676fcff 100644
--- a/src/pages/character/index.vue
+++ b/src/pages/character/index.vue
@@ -1,14 +1,17 @@
<template>
- <view>
- <headNav idIndex="1" text="涓尰浜虹墿鏁版嵁搴�" />
+ <view
+ style="width: 100%; height: 100%; display: flex; flex-direction: column"
+ >
+ <headNav idIndex="1" text="鍘嗕唬浜虹墿" />
<!-- 楂樼骇鎼滅储 -->
- <view style="margin: 0.35rem 0 0.16rem 0">
+ <view style="margin-top: 0.1rem">
<advancedSearch
@onSearch="onSearch"
@onSubmit="onSubmit"
:from="From"
placehold="璇疯緭鍏ュ叧閿瓧"
:keyword="searchKey"
+ :advancedSearchBack="advancedSearchBack"
/>
</view>
<!-- 鐑棬鎼滅储 -->
@@ -16,23 +19,39 @@
鐑棬鎼滅储锛�
<ul class="flex" style="margin-right: 10rpx">
<li
- @click="onSearch({ text: item })"
- class="cursor"
- v-for="item in hotKeyList"
+ @click="onSearch({ text: item }, index)"
+ :class="{ cursor: true, active: hotAciveIndex === index }"
+ v-for="(item, index) in hotKeyList"
:key="item"
>
{{ item }}
</li>
</ul>
</view>
- <view class="" style="margin-left: 0.2rem">涔︿腑鏈�甯告彁鍒扮殑100浣嶄汉鐗�</view>
+ <view style="margin-left: 0.2rem">涔︿腑鏈�甯告彁鍒扮殑100浣嶄汉鐗�</view>
<!-- 鍏崇郴琛ㄥ湴鍥� -->
<view
id="relation"
- style="margin-top: 0.2rem; height: 70vh; width: 100%"
- ></view>
+ style="margin-top: 0.1rem; flex: 1; width: 100%; position: relative"
+ >
+ <div
+ v-if="!loading && relationships.length == 0"
+ style="
+ position: absolute;
+ top: 30%;
+ left: 0;
+ right: 0;
+ text-align: center;
+ font-size: 0.2rem;
+ color: #666;
+ "
+ >
+ 鏆傛棤鐩稿叧鏁版嵁
+ </div>
+ </view>
+
<!-- 鏈濅唬 -->
- <view
+ <!-- <view
class="flex flex-center"
style="width: 100%; position: fixed; bottom: 0.33rem; left: 0"
>
@@ -69,7 +88,7 @@
</view>
</li>
</ul>
- </view>
+ </view> -->
</view>
</template>
@@ -86,6 +105,8 @@
export default {
data() {
return {
+ loading: true,
+ hotAciveIndex: "",
// echarts鏁版嵁
nodes: [],
// echarts涓よ�呯殑鍏崇郴
@@ -151,7 +172,7 @@
},
{
type: "input",
- label: "鏃堕棿",
+ label: "鏃舵湡",
name: "period",
value: ""
},
@@ -263,30 +284,54 @@
},
mounted() {
this.getData();
- this.echartsArr();
+ // this.echartsArr();
this.hotSearch();
// 鐩戝惉绐楀彛澶у皬鍙樺寲
- // window.addEventListener("resize", this.relation);
+ window.addEventListener("resize", this.relation);
this.innt();
},
+ onLoad(options) {
+ this.searchKey = options.keyword;
+ },
methods: {
- getData() {
- getPersonList({
- keywords: "妤�", //鎼滅储妗嗘绱�
- name: "", //濮撳悕
- alias: "", //鍒悕
- nativePlace: "", //鏈哄叧
- tagId: null, //鑱屼笟id
- official: "", //鑱屽畼
- genderType: null, //鎬у埆
- dynasty: null, //鏈濅唬鍚�
- dynastyId: null, //鏈濅唬id
- institution: "", //鏈烘瀯
- bookId: null, //鏉ユ簮id
- page: 1,
- pageSize: 100
+ getData(key) {
+ this.loading = true;
+ getFuzzySearch({
+ keyword: key ? key : this.searchKey ? this.searchKey : ""
}).then((res) => {
- console.log(res);
+ this.nodes = [];
+ this.relationships = [];
+ if (res.success && res.list) {
+ res.list.forEach((item, index) => {
+ let exists1 = this.nodes.some(
+ (node) => node.id === item.identifier1 && node.name === item.name1
+ );
+ let exists2 = this.nodes.some(
+ (node) => node.id === item.identifier2 && node.name === item.name2
+ );
+ // 璇佹槑涓嶅瓨鍦�
+ if (item.name1 && exists1 !== true) {
+ this.nodes.push({
+ name: item.name1,
+ id: item.identifier1
+ });
+ }
+ if (item.name2 && exists2 !== true) {
+ this.nodes.push({
+ name: item.name2,
+ id: item.identifier2
+ });
+ }
+ let obj = {
+ source: item.name1,
+ target: item.name2,
+ relation: item.relationName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓�
+ };
+ this.relationships.push(obj);
+ });
+ }
+ this.loading = false;
+ this.relation();
});
},
// 鍏崇郴鍥捐氨
@@ -303,17 +348,17 @@
let Distance = 10;
// 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣�
if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
- FontSize = 28;
+ FontSize = 20;
BorderWidth = 5;
- SymbolSize = 100;
+ SymbolSize = 90;
Distance = 33;
} else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
- FontSize = 28;
+ FontSize = 18;
BorderWidth = 4;
- SymbolSize = 90;
+ SymbolSize = 80;
Distance = 22;
} else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
- FontSize = 18;
+ FontSize = 14;
BorderWidth = 4;
SymbolSize = 70;
Distance = 22;
@@ -347,10 +392,8 @@
padding: [3, 8],
borderRadius: 30,
position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
- // bottom: -(FontSize+10),
- z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
- // offset: [0, 15] ,// 寰�涓嬬Щ鍔� 10 鍍忕礌
- distance: -(Distance + 1) // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+ // z: -1, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
+ distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
}
});
}
@@ -361,31 +404,13 @@
return {
name: node.name,
id: node.id,
- x: Math.random() * 2000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆
- y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆
itemStyle: {
- color: getColorByIndex(), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
+ color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
borderWidth: BorderWidth,
- borderColor: getColorByIndex()
+ borderColor: "#996f9f"
}
};
});
- // 璁剧疆棰滆壊
- function getColorByIndex() {
- // 鐢熸垚闅忔満鐨� R銆丟銆丅 鍒嗛噺鍊硷紝闄愬埗鍦ㄦ洿楂樼殑鑼冨洿鍐�
- var r = Math.floor(Math.random() * 106) + 150; // 150 鍒� 255 涔嬮棿鐨勯殢鏈烘暟
- var g = Math.floor(Math.random() * 106) + 150; // 150 鍒� 255 涔嬮棿鐨勯殢鏈烘暟
- var b = Math.floor(Math.random() * 106) + 150; // 150 鍒� 255 涔嬮棿鐨勯殢鏈烘暟
- // 灏� R銆丟銆丅 鍒嗛噺鍊艰浆鎹负鍗佸叚杩涘埗锛屽苟纭繚姣忎釜鍒嗛噺鍊奸兘鏄袱浣嶆暟
- var hexR = r.toString(16).padStart(2, "0"); // 浣跨敤 padStart 鏂规硶纭繚鐢熸垚鐨勫崄鍏繘鍒舵暟涓轰袱浣�
- var hexG = g.toString(16).padStart(2, "0");
- var hexB = b.toString(16).padStart(2, "0");
- // 鎷兼帴鍗佸叚杩涘埗棰滆壊鍊�
- var color = "#" + hexR + hexG + hexB;
- return color;
- }
- console.log(links);
- console.log(nodeData);
var option;
option = {
title: {
@@ -414,7 +439,7 @@
series: [
{
type: "graph",
- layout: "none",
+ layout: "force",
roam: true,
symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬
label: {
@@ -422,7 +447,7 @@
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
},
- edgeSymbol: ["circle"],
+ edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
data: nodeData,
links: links,
@@ -430,6 +455,18 @@
opacity: 0.9,
width: 2,
curveness: 0.3
+ },
+ emphasis: {
+ focus: "adjacency",
+ lineStyle: {
+ width: 10
+ }
+ },
+ force: {
+ // layoutAnimation: false,
+ // friction: 1,
+ repulsion: 800,
+ edgeLength: 400
}
}
]
@@ -437,56 +474,38 @@
// 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓�
option.series[0].links = links;
// 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉
+ myChart.off("click");
myChart.on("click", (params) => {
- // menuNav2 = !menuNav1
- if (params.componentType === "series") {
+ if (params.dataType === "node") {
this.spaceTimeArr(params.data.id);
}
});
option && myChart.setOption(option);
},
// 鍩虹鎼滅储
- onSearch(val) {
- this.searchKey = val.text;
- getFuzzySearch({ keyword: val.text }).then((res) => {
- if (res.list) {
- this.nodes = [];
- this.relationships = [];
- res.list.forEach((item, index) => {
- let exists1 = this.nodes.some(
- (node) => node.id === item.identifier1 && node.name === item.name1
- );
- let exists2 = this.nodes.some(
- (node) => node.id === item.identifier2 && node.name === item.name2
- );
- // 璇佹槑涓嶅瓨鍦�
- if (exists1 !== true) {
- this.nodes.push({
- name: item.name1,
- id: item.identifier1
- });
- }
- if (exists2 !== true) {
- this.nodes.push({
- name: item.name2,
- id: item.identifier2
- });
- }
- let obj = {
- source: item.name1,
- target: item.name2,
- relation: item.relationName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓�
- };
- this.relationships.push(obj);
- });
- }
- this.relation();
- });
+ onSearch(val, index) {
+ if (index !== undefined) {
+ this.searchKey = "";
+ this.hotAciveIndex = index;
+ } else {
+ this.hotAciveIndex = "";
+ }
+ // this.searchKey = val.text;
+ this.getData(val.text);
},
// 楂樼骇鎼滅储
onSubmit(val) {
- getAdvanceSearch(val).then((res) => {
- console.log(res, "鎺ュ彛璋冪敤鎴愬姛");
+ getAdvanceSearch({
+ ...val,
+ page: 1,
+ pageSize: 100
+ }).then((res) => {
+ console.log(res, "res");
+ });
+ },
+ advancedSearchBack() {
+ uni.navigateTo({
+ url: "/pages/knowledgeBase/knowledgeBase"
});
},
// 鐐瑰嚮涓嬮潰鐨勬湞浠ｆ寜閽�
@@ -580,6 +599,10 @@
color: #244a7b;
margin: 0 0.1rem;
color: #244a7b;
+ &.active{
+ color: #027EDC;
+ font-weight: bold;
+ }
}
}
</style>
--
Gitblit v1.9.1