| | |
| | | {{ 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" |
| | |
| | | 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 { |
| | |
| | | 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) { |
| | |
| | | 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?.WEAK_NAME[0]?.content1, |
| | | nikeName: ele?.ALIAS[0]?.content2, |
| | | nativePlace: ele?.content1, |
| | | barnch: ele?.MEDICAL_BRANCH[0]?.content1, |
| | | medical: ele?.MEDICAL_EXPERTISE[0]?.content1, |
| | | id: ele.id, |
| | | }; |
| | | this.isTop = e.containerPoint.y - 275 + "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 + |
| | |
| | | : "-", |
| | | 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); |
| | | } |
| | | } |
| | | }); |
| | |
| | | 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) { |
| | |
| | | animation: ripple-animation 1s infinite linear; |
| | | } |
| | | |
| | | @keyframes ripple-animation { |
| | | /* @keyframes ripple-animation { |
| | | to { |
| | | transform: translate(-50%, -50%) scale(0); |
| | | opacity: 0; |
| | | } |
| | | } |
| | | } */ |
| | | </style> |