From 150afd25f2893e63f12111e904420fa5c254f28a Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 19 七月 2024 18:13:22 +0800
Subject: [PATCH] 1
---
src/pages/academicSchools/index.vue | 294 +++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 237 insertions(+), 57 deletions(-)
diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue
index d544c1a..303a67c 100644
--- a/src/pages/academicSchools/index.vue
+++ b/src/pages/academicSchools/index.vue
@@ -48,6 +48,20 @@
鏆傛棤鐩稿叧鏁版嵁
</div>
</div>
+ <div id="customDialog" class="customDialog">
+ <div class="title">
+ <span>{{ detailData.name }}</span>
+ <span @click="closeDom">鍏抽棴</span>
+ </div>
+ <div class="content">
+ <p>濮撳悕锛歿{ detailData.name }}</p>
+ <p>鍒悕锛歿{ detailData.alias }}</p>
+ <p>绫嶈疮锛歿{ detailData.nativePlace }}</p>
+ <p>鍖诲鍒嗙锛� {{ detailData.medicalBranch }}</p>
+ <p>灏忎紶锛歿{ detailData.biography }}</p>
+ </div>
+ <div class="btn" @click="spaceTimeArr(detailData.id)">鏌ョ湅鏇村>>></div>
+ </div>
</view>
</template>
@@ -243,9 +257,12 @@
// 浜虹墿淇℃伅
infoOfPersons: [],
// 瀛︽湳娴佹淳
- infoOfSchools:[],
+ infoOfSchools: [],
// 褰撳墠浜虹墿淇℃伅
ownInfo: null,
+ detailData: {
+ name: "",
+ },
};
},
mounted() {
@@ -267,30 +284,96 @@
const personInfo = this.infoOfPersons.find(
(item) => item.id == ele.personId
);
- const obj = {
- personId: ele.personId,
- parentId: parent.id,
- id2: personInfo.id,
- relationTypeId: ele.relationTypeId,
- relationTypeName: ele.relationTypeName,
- parentName: parent?.NAME[0]?.content1 ?? parent.parentName,
- name2: personInfo?.NAME[0]?.content1,
- category: type,
- };
- if (str == "literatureList") {
- obj.relationTypeName = ele.literatureName;
- }
- if (str == "schoolList") {
- const nameData = this.infoOfSchools?.find(i=>i.schoolId == ele.schoolId)
- obj.relationTypeName = nameData?.name[0];
- }
- if (str == "placeList") {
- obj.relationTypeName = ele.ancientName ?? ele.currentName;
- }
- newArr.push(obj);
- if (ele[str] && ele[str]?.length) {
- order++;
- this.getPersonInfo(ele[str], str, newArr, order, type, personInfo);
+ if (personInfo?.id) {
+ const obj = {
+ personId: ele.personId,
+ parentId: parent.id,
+ id2: personInfo.id,
+ relationTypeName: ele.relationTypeName,
+ parentName: parent?.NAME[0]?.content1 ?? parent.parentName,
+ name2: personInfo?.NAME[0]?.content1,
+ category: type,
+ };
+ if (str == "literatureList") {
+ obj.relationTypeName = ele.literatureName;
+ }
+ if (str == "schoolList") {
+ const nameData = this.infoOfSchools?.find(
+ (i) => i.schoolId == ele.schoolId
+ );
+ obj.relationTypeName = nameData?.name[0];
+ }
+ if (str == "placeList") {
+ obj.relationTypeName = ele.ancientName ?? ele.currentName;
+ }
+ newArr.push(obj);
+ if (ele["kinList"] && ele["kinList"]?.length) {
+ order++;
+ this.getPersonInfo(
+ ele["kinList"],
+ "kinList",
+ newArr,
+ order,
+ 0,
+ personInfo
+ );
+ }
+ if (ele["teacherStudentList"] && ele["teacherStudentList"]?.length) {
+ order++;
+ this.getPersonInfo(
+ ele["teacherStudentList"],
+ "teacherStudentList",
+ newArr,
+ order,
+ 1,
+ personInfo
+ );
+ }
+ if (ele["literatureList"] && ele["literatureList"]?.length) {
+ const data = this.changeLiterature(
+ ele["literatureList"],
+ "literatureList"
+ );
+ order++;
+ this.getPersonInfo(
+ data,
+ "literatureList",
+ newArr,
+ order,
+ 2,
+ personInfo
+ );
+ }
+
+ if (ele["socialList"] && ele["socialList"]?.length) {
+ const data = this.changeLiterature(ele["socialList"], "socialList");
+ order++;
+ this.getPersonInfo(
+ data,
+ "socialList",
+ newArr,
+ order,
+ 3,
+ personInfo
+ );
+ }
+ if (ele["placeList"] && ele["placeList"]?.length) {
+ const data = this.changeLiterature(ele["placeList"], "placeList");
+ order++;
+ this.getPersonInfo(data, "placeList", newArr, order, 4, personInfo);
+ }
+ if (ele["schoolList"] && ele["schoolList"]?.length) {
+ const data = this.changeLiterature(ele["schoolList"], "schoolList");
+ order++;
+ this.getPersonInfo(
+ data,
+ "schoolList",
+ newArr,
+ order,
+ 5,
+ personInfo
+ );
+ }
}
}
},
@@ -354,7 +437,7 @@
let place = [];
let school = [];
if (res && res.success && res.object) {
- console.log(res.object);
+ // console.log(res.object);
this.infoOfPersons = res.object?.infoOfPersons;
this.infoOfSchools = res.object?.infoOfSchools;
if (res.object?.personChain) {
@@ -404,6 +487,7 @@
this.ownInfo
);
literature = [...newArr];
+ // console.log(literature, "literature");
}
if (obj.socialList?.length) {
let newArr = [];
@@ -425,7 +509,6 @@
const data = this.changeLiterature(obj.placeList, "placeList");
this.getPersonInfo(data, "placeList", newArr, 1, 4, this.ownInfo);
place = [...newArr];
- // console.log(place, "placeList");
}
if (obj.schoolList?.length) {
this.categories.push({ name: "瀛︽湳娴佹淳" });
@@ -436,11 +519,10 @@
"schoolList",
newArr,
1,
- 3,
+ 5,
this.ownInfo
);
school = [...newArr];
- // console.log(school, "schoolList");
}
}
const personData = [
@@ -451,7 +533,14 @@
...place,
...school,
];
- // console.log(personData)
+ // const k = personData.filter((item) => item.category == 0);
+ // const t = personData.filter((item) => item.category == 1);
+ // const l = personData.filter((item) => item.category == 2);
+ // const o = personData.filter((item) => item.category == 3);
+ // const p = personData.filter((item) => item.category == 4);
+ // const s = personData.filter((item) => item.category == 5);
+ // const nodesList = [...k, ...t, ...l, ...o, ...p, ...s];
+ // console.log(nodesList);
personData.forEach((item) => {
let exists1 = this.nodes.some(
(node) =>
@@ -556,74 +645,109 @@
var nodeData = nodes;
var option;
option = {
- title: {
- text: "瀛︽湳娴佹淳",
- // subtext: '',
- left: "center",
- top: FontSize + 10,
- textStyle: {
- fontSize: FontSize, // 璁剧疆鏍囬鏂囧瓧澶у皬涓� 18px
- },
- subtextStyle: {
- fontSize: FontSize, // 璁剧疆鍓爣棰樻枃瀛楀ぇ灏忎负 14px
- color: "#2C2C2C",
- },
- },
backgroundColor: {
type: "image",
image: "/static/image/characterRelationBg.png",
- // repeat: 'repeat-x', // 鏄惁骞抽摵锛屽彲浠ユ槸 'repeat-x', 'repeat-y', 'no-repeat'
size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱�
position: "center center", // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
},
tooltip: {},
legend: [
{
- // selectedMode: 'single',
+ left: 20,
+ top: 20,
+ orient: "vertical",
data: this.categories.map(function (a) {
return a.name;
}),
},
],
- animationDurationUpdate: 1500,
- animationEasingUpdate: "quinticInOut",
series: [
{
type: "graph",
- legendHoverLink: false,
+ legendHoverLink: true,
layout: "force",
+ symbolSize: 15,
data: nodeData,
links: links,
categories: this.categories,
roam: true,
label: {
+ show: true,
position: "right",
formatter: "{b}",
},
+ labelLayout: {
+ hideOverlap: true,
+ },
+ scaleLimit: {
+ min: 0.4,
+ max: 2,
+ },
lineStyle: {
color: "source",
- curveness: 0.3,
+ curveness: 0.2,
},
emphasis: {
focus: "adjacency",
lineStyle: {
- width: 10,
+ width: 5,
},
+ },
+ force: {
+ repulsion: 600,
+ edgeLength: 300,
},
},
],
};
- // 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓�
- // option.series[0].links = links;
// 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉
myChart.off("click");
myChart.on("click", (params) => {
if (params.dataType === "node") {
- this.spaceTimeArr(params.data.id);
+ this.creatDom(params);
}
});
- console.log(option, "option");
myChart.setOption(option);
+ },
+ creatDom(params) {
+ const e = params.event;
+ const div = document.getElementById("customDialog");
+ div.style.display = "block";
+ div.style.left = e.offsetX + 50 + "px";
+ div.style.top = e.offsetY - 50 + "px";
+ const data = this.infoOfPersons?.find(
+ (i) => i.id == params.data.personId
+ );
+ const obj = {
+ id: params.data.id,
+ name:
+ data?.NAME?.map((e, i) => {
+ i += 1;
+ return e["content" + i];
+ }).join("銆�") ?? "",
+ alias:
+ data?.ALIAS?.map((e, i) => {
+ i += 1;
+ return e["content" + i];
+ }).join("銆�") ?? "",
+ nativePlace:
+ data?.NATIVE_PLACE?.map((e, i) => {
+ i += 1;
+ return e["content" + i];
+ }).join("銆�") ?? "",
+ medicalBranch:
+ data?.MEDICAL_BRANCH?.map((e, i) => {
+ i += 1;
+ return e["content" + i];
+ }).join("銆�") ?? "",
+ biography: data?.BIOGRAPHY ?? "",
+ };
+ this.detailData = obj;
+ },
+ closeDom() {
+ const div = document.getElementById("customDialog");
+ div.style.display = "none";
},
// 鍩虹鎼滅储
onSearch(val, index) {
@@ -633,7 +757,6 @@
} else {
this.hotAciveIndex = "";
}
- // this.searchKey = val.text;
this.getData(val.text);
},
// 楂樼骇鎼滅储
@@ -717,7 +840,64 @@
#relatio {
width: 100%;
height: 100%;
+ position: relative;
}
+
+.customDialog {
+ width: 300px;
+ min-height: 240px;
+ display: none;
+ position: fixed;
+ z-index: 99999999;
+ border-radius: 2px;
+ background: #fff;
+}
+
+.customDialog .title {
+ width: 100%;
+ height: 35px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ box-sizing: border-box;
+ background-color: rgb(221, 232, 246);
+ font-size: 14px;
+}
+.customDialog .title span:nth-child(1) {
+ font-size: 16px;
+ font-weight: 600;
+}
+
+.customDialog .title span:nth-child(2) {
+ color: rgb(95, 127, 168);
+ cursor: pointer;
+}
+
+.customDialog .content {
+ padding: 15px;
+ box-sizing: border-box;
+}
+
+.customDialog .content p {
+ margin-bottom: 5px;
+ display: -webkit-box; /* 鏄剧ず澶氳鏂囨湰瀹瑰櫒 */
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2; /*鏄剧ず琛屾暟*/
+ overflow: hidden; /*闅愯棌澶氬嚭閮ㄥ垎鏂囧瓧*/
+ text-overflow: ellipsis; /*鐢ㄧ渷鐣ュ彿浠ｆ浛澶氬嚭閮ㄥ垎鏂囧瓧*/
+}
+
+.customDialog .btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: rgb(95, 127, 168);
+ cursor: pointer;
+ font-size: 14px;
+ height: 35px;
+}
+
@media screen and (min-width: 2560px) and (max-width: 3840px) {
}
@@ -746,8 +926,8 @@
color: #244a7b;
margin: 0 0.1rem;
color: #244a7b;
- &.active {
- color: #027edc;
+ &.active{
+ color: #027EDC;
font-weight: bold;
}
}
--
Gitblit v1.9.1