From 13a727c58400a256af3f7582b62d8237b227329e Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期一, 29 四月 2024 19:05:42 +0800 Subject: [PATCH] 人物详情和地图 --- src/pages/character/index.vue | 99 +++++++++++++++++++++++-------------------------- 1 files changed, 46 insertions(+), 53 deletions(-) diff --git a/src/pages/character/index.vue b/src/pages/character/index.vue index a8ae2b7..3ac07c9 100644 --- a/src/pages/character/index.vue +++ b/src/pages/character/index.vue @@ -269,24 +269,46 @@ // 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 + getFuzzySearch({ + keyword: 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 (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(); }); }, // 鍏崇郴鍥捐氨 @@ -364,9 +386,9 @@ x: Math.random() * 2000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆 y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆 itemStyle: { - color: getColorByIndex(), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� + color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� borderWidth: BorderWidth, - borderColor: getColorByIndex() + borderColor: "#996f9f" } }; }); @@ -384,8 +406,6 @@ var color = "#" + hexR + hexG + hexB; return color; } - console.log(links); - console.log(nodeData); var option; option = { title: { @@ -430,6 +450,12 @@ opacity: 0.9, width: 2, curveness: 0.3 + }, + emphasis: { + focus: "adjacency", + lineStyle: { + width: 10 + } } } ] @@ -448,40 +474,7 @@ // 鍩虹鎼滅储 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(); - }); + this.getData(); }, // 楂樼骇鎼滅储 onSubmit(val) { -- Gitblit v1.9.1