From d16a07dcc2771bb65d03658847549ab3b21f6bcd Mon Sep 17 00:00:00 2001 From: 杨磊 <505174330@qq.com> Date: 星期四, 04 七月 2024 16:29:08 +0800 Subject: [PATCH] 图片title --- src/pages/territory/territory.vue | 128 ++++++++++++++++++++++++++++++++++++------ 1 files changed, 110 insertions(+), 18 deletions(-) diff --git a/src/pages/territory/territory.vue b/src/pages/territory/territory.vue index 64fbbbd..5485113 100644 --- a/src/pages/territory/territory.vue +++ b/src/pages/territory/territory.vue @@ -8,7 +8,7 @@ > <advancedSearch class="Search" - placehold="杈撳叆濮撳悕/鍒悕/鏈濅唬/浼犱富鑱屼笟鎼滅储" + placehold="杈撳叆濮撳悕/鍒悕/鏃舵湡/浼犱富鑱屼笟鎼滅储" @onSearch="onSearch" :isAvancedTrue="false" :keyword="keyword" @@ -104,6 +104,7 @@ {{ item.birthAndDeath ? item.birthAndDeath : "-" }} </li> <li>鏉ユ簮: {{ item.source ? item.source : "-" }}</li> + <li>绫嶈疮: {{ item.nativPlace ? item.nativPlace : "-" }}</li> <li v-if="SearchArr.length - 1 !== index" style="margin: 0.1rem 0; border-bottom: 1px solid #d8d8d8" @@ -147,7 +148,12 @@ 绫嶈疮: {{ currentMark.nativePlace ? currentMark.nativePlace : "-" }} </li> <li>鍖诲鍒嗙: {{ currentMark.barnch ? currentMark.barnch : "-" }}</li> - <li>灏忎紶: {{ currentMark.medical ? currentMark.medical : "-" }}</li> + <li + class="medicalLi" + :title="currentMark.medical ? currentMark.medical : '-'" + > + 灏忎紶: {{ currentMark.medical ? currentMark.medical : "-" }} + </li> </ul> <el-button class="flex" @@ -222,7 +228,12 @@ import "leaflet.chinatmsproviders"; import * as echarts from "echarts"; import "echarts/extension/bmap/bmap"; -import { getRetrieval, getDynasty, getPreCount } from "@/api/index.js"; +import { + getRetrieval, + getDynasty, + getPreCount, + getDynastyData, +} from "@/api/index.js"; export default { data() { return { @@ -407,30 +418,38 @@ this.getDynastyList(); this.getDataList(); + this.getHaveDataDynasty(); }, methods: { + getHaveDataDynasty() { + getDynastyData().then((res) => { + console.log(res, "getHaveDataDynasty"); + }); + }, getDynastyList() { getDynasty().then((res) => { this.dynasty1 = res.list; + console.log("dynasty1", res.list); }); }, showCard(info) { const item = this.markerList.find((f) => f.id == info.id); + console.log(item, "item"); var latlng = L.latLng(item.yCoord, item.xCoord); this.map.setView(latlng, 10); setTimeout(() => { this.isEchTrue = true; this.currentMark = { - name: item?.WEAK_NAME[0]?.content1, + name: item?.NAME[0]?.content1, nikeName: item?.ALIAS[0]?.content2, nativePlace: item?.content1, barnch: item?.MEDICAL_BRANCH[0]?.content1, - medical: item?.MEDICAL_EXPERTISE[0]?.content1, + medical: item?.BIOGRAPHY, id: item.id, }; this.$nextTick(() => { this.isTop = - document.getElementById("mapBox").offsetHeight / 2 - 275 + "px"; + document.getElementById("mapBox").offsetHeight / 2 - 295 + "px"; this.isLeft = document.getElementById("mapBox").offsetWidth / 2 - 171 + "px"; }); @@ -460,8 +479,72 @@ if (curData) { markerList = [...markerList, ...curData]; } - if (i == times) { + if (i == 1) { + this.loading = false; + this.mapLoading = false; + this.markerList = markerList; this.initMap(markerList); + } else { + if (curData && curData.length) { + for (let j = 0; j < curData.length; j++) { + const ele = curData[j]; + let currentClassName = "map-circle-name"; + if (ele.dynastyInfo) { + switch (ele.dynastyInfo.dynastyChs) { + case "澶�": + currentClassName = "map-circle-xia"; + break; + case "鍟�": + currentClassName = "map-circle-shang"; + break; + case "瑗垮懆": + currentClassName = "map-circle-zhou"; + break; + case "绉�": + currentClassName = "map-circle-qin"; + break; + case "姹�": + currentClassName = "map-circle-han"; + break; + case "闅�": + currentClassName = "map-circle-sui"; + break; + case "鍞�": + currentClassName = "map-circle-tang"; + break; + case "鏄�": + currentClassName = "map-circle-ming"; + break; + } + } + let icon = L.divIcon({ + html: `<div class='${currentClassName} ripple'></div>`, + iconSize: [80, 80], + className: "map-circle", + }); + const temp_mark = L.marker([ele.yCoord, ele.xCoord], { + icon: icon, + }).addTo(this.map); + temp_mark.on("click", (e) => { + setTimeout(() => { + this.isEchTrue = true; + this.currentMark = { + name: ele?.NAME[0]?.content1, + nikeName: ele?.ALIAS[0]?.content2, + nativePlace: ele?.content1, + barnch: ele?.MEDICAL_BRANCH[0]?.content1, + medical: ele?.BIOGRAPHY, + id: ele.id, + }; + this.isTop = e.containerPoint.y - 295 + "px"; + this.isLeft = e.containerPoint.x - 171 + "px"; + }, 300); + }); + } + } + } + + if (i == times) { this.SearchArr = markerList.map((item) => ({ birthAndDeath: item?.BIRTH_YEAR[0]?.content1 ? item?.BIRTH_YEAR[0]?.content1 + @@ -470,11 +553,11 @@ : "-", name: item?.NAME[0]?.content1, source: "-", + nativPlace: item?.NATIVE_PLACE[0].content1, id: item.id, })); this.markerList = markerList; - this.loading = false; - this.mapLoading = false; + // this.initMap(markerList); } } }); @@ -607,9 +690,9 @@ className: "map-circle", }); this.map = map; - if (markerList.length) { - for (let i = 0; i < markerList.length; i++) { - const item = markerList[i]; + if (this.markerList.length) { + for (let i = 0; i < this.markerList.length; i++) { + const item = this.markerList[i]; let currentClassName = "map-circle-name"; if (item.dynastyInfo) { switch (item.dynastyInfo.dynastyChs) { @@ -656,10 +739,10 @@ nikeName: item?.ALIAS[0]?.content2, nativePlace: item?.content1, barnch: item?.MEDICAL_BRANCH[0]?.content1, - medical: item?.MEDICAL_EXPERTISE[0]?.content1, + medical: item?.BIOGRAPHY, id: item.id, }; - this.isTop = e.containerPoint.y - 275 + "px"; + this.isTop = e.containerPoint.y - 295 + "px"; this.isLeft = e.containerPoint.x - 171 + "px"; }, 300); }); @@ -900,18 +983,27 @@ animation: ripple-animation 1s infinite linear; } -@keyframes ripple-animation { +/* @keyframes ripple-animation { to { transform: translate(-50%, -50%) scale(0); opacity: 0; } -} +} */ -::v-deep .cleanupBtn{ +::v-deep .cleanupBtn { right: 60px !important; } -::v-deep .widget_input{ +::v-deep .widget_input { min-width: 240px !important; } + +.medicalLi { + height: 50px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} </style> -- Gitblit v1.9.1