From f1a0db5232be76d93dcaad38b2bfdb524868731d Mon Sep 17 00:00:00 2001 From: QYF-GitLab1 <1940665526@qq.com> Date: 星期四, 18 七月 2024 18:50:54 +0800 Subject: [PATCH] 1 --- src/pages/academicSchools/index.vue | 134 +++++++++++++++++++++++++++++++++++++++----- 1 files changed, 118 insertions(+), 16 deletions(-) diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue index d544c1a..c3c251c 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">鏌ョ湅鏇村>>></div> + </div> </view> </template> @@ -243,9 +257,12 @@ // 浜虹墿淇℃伅 infoOfPersons: [], // 瀛︽湳娴佹淳 - infoOfSchools:[], + infoOfSchools: [], // 褰撳墠浜虹墿淇℃伅 ownInfo: null, + detailData: { + name: "", + }, }; }, mounted() { @@ -281,7 +298,9 @@ obj.relationTypeName = ele.literatureName; } if (str == "schoolList") { - const nameData = this.infoOfSchools?.find(i=>i.schoolId == ele.schoolId) + const nameData = this.infoOfSchools?.find( + (i) => i.schoolId == ele.schoolId + ); obj.relationTypeName = nameData?.name[0]; } if (str == "placeList") { @@ -557,7 +576,7 @@ var option; option = { title: { - text: "瀛︽湳娴佹淳", + text: "", // subtext: '', left: "center", top: FontSize + 10, @@ -619,11 +638,48 @@ 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 = { + 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 +689,6 @@ } else { this.hotAciveIndex = ""; } - // this.searchKey = val.text; this.getData(val.text); }, // 楂樼骇鎼滅储 @@ -717,7 +772,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; /*鐢ㄧ渷鐣ュ彿浠f浛澶氬嚭閮ㄥ垎鏂囧瓧*/ +} + +.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) { } @@ -741,15 +853,5 @@ .hotSearch { font-size: 0.12rem; color: #2c2c2c; - - li { - color: #244a7b; - margin: 0 0.1rem; - color: #244a7b; - &.active { - color: #027edc; - font-weight: bold; - } - } } </style> -- Gitblit v1.9.1