<template>
|
<view style="width: 100%;height: 100%;display: flex;flex-direction: column;">
|
<headNav :idIndex="1 + ''" text="中医人物数据库" />
|
<el-button class="getBack" @click="goBack">返回</el-button>
|
<view style="flex: 1;overflow: hidden;">
|
<!-- 地图 -->
|
<!-- <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view> -->
|
<div id="map"></div>
|
|
<!-- 详情 -->
|
<el-dialog class="particulars" :visible.sync="menuNav" :modal="false">
|
<view
|
class="font-family"
|
style="font-size: 0.26rem; padding-top: 0.16rem; font-weight: bold"
|
>{{ basicInfo.name }}</view
|
>
|
<ul
|
style="
|
border-bottom: 0.01rem solid #d8d8d8;
|
padding: 0.16rem 0;
|
font-size: 0.14rem;
|
font-weight: 400;
|
line-height: 0.28rem;
|
"
|
>
|
<li>出生于{{ basicInfo.nativePlace || "-" }}</li>
|
<li>
|
<span v-if="basicInfo.birthYear">{{basicInfo.birthYear}}</span>
|
<span v-if="basicInfo.nativePlace">{{basicInfo.nativePlace}}</span>
|
<span v-if="basicInfo.nowPlace">（今{{basicInfo.nowPlace}}）</span>
|
</li>
|
</ul>
|
<ul
|
style="
|
margin: 0.31rem 0 0.11rem 0;
|
font-size: 0.14rem;
|
font-weight: 400;
|
line-height: 0.28rem;
|
"
|
>
|
<li>活动名称：{{ activityInfo.activityName || "-" }}</li>
|
<li>活动地点：{{ activityInfo.activityAddr || "-" }}</li>
|
<li>活动区间：{{ activityInfo.time || "-" }}</li>
|
<li>活动描述：{{ activityInfo.desc || "-" }}</li>
|
<li>参与人员：{{ activityInfo.participants || "-" }}</li>
|
</ul>
|
<!-- <img
|
style="width: 100%; height: 2rem"
|
src="https://img0.baidu.com/it/u=1845740325,2917001370&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711731600&t=0b208ab46e1d33aa81ac31dd6bf627be"
|
alt=""
|
/> -->
|
<!-- <div class="box" style="width: 80%">
|
<span class="span" :style="{ marginLeft: spanML + 'rem' }"
|
>{{ span }}年</span
|
>
|
<div class="scales">
|
<view
|
v-for="(item, index) in yearArr"
|
@click="scaleClick(index)"
|
class="scale"
|
:data-index="index"
|
></view>
|
</div>
|
<div class="MX"></div>
|
<div class="cursor" :style="{ marginLeft: cursorML + 'rem' }"></div>
|
</div> -->
|
</el-dialog>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import * as echarts from "echarts";
|
import "echarts/extension/bmap/bmap";
|
import { loadBMap } from "@/static/map.js";
|
import L from "leaflet";
|
import "leaflet.chinatmsproviders";
|
import { getPersonInfo } from "@/api/index.js";
|
export default {
|
data() {
|
return {
|
menuNav: false,
|
sliderValue: 2024,
|
currentYear: 2024,
|
sliderValue: 50,
|
MX: document.querySelector(".MX"),
|
box: document.querySelector(".box"),
|
span: "",
|
yearArr: [],
|
yearIndex: 0,
|
spanML: 0,
|
cursorML: -0.05,
|
activityInfo: {},
|
basicInfo: {
|
name: "",
|
birthYear: "",
|
deathYear: "",
|
nativePlace: "",
|
nowPlace: "",
|
}
|
};
|
},
|
|
mounted() {
|
// // 时空地图
|
// loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => {
|
// this.spaceTime();
|
// });
|
// this.$nextTick(() => {
|
// this.aaa();
|
// });
|
this.$route;
|
this.getPersonInfoFun();
|
this.getBasicInfo();
|
},
|
methods: {
|
//初始化地图
|
initMap(info) {
|
var map = L.map("map", {
|
attributionControl: false,
|
preferCanvas: true
|
}).setView([35.91667, 110.41667], 5);
|
|
// L.tileLayer(
|
// "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
|
// ).addTo(map);
|
|
L.tileLayer
|
.chinaProvider("TianDiTu.Normal.Map", {
|
key: "76bc34ead7e30e663a4eded8aeaf5860",
|
maxZoom: 18,
|
minZoom: 5
|
})
|
.addTo(map);
|
let DefaultIcon1 = L.icon({
|
iconUrl: this.icoName,
|
iconSize: [24, 41], // 图标的大小 【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
|
iconAnchor: [24, 41], // 图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
|
popupAnchor: [1, -24] // 该点是相对于iconAnchor弹出信息的位置 这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
|
});
|
let icon = L.divIcon({
|
html: "<div class='map-circle-name ripple'></div>",
|
iconSize: [80, 80],
|
className: "map-circle"
|
});
|
this.map = map;
|
if (info && info.length) {
|
for (let i = 0; i < info.length; i++) {
|
const item = info[i];
|
const marker1 = L.marker([item.ycoord, item.xcoord], {
|
icon: icon
|
}).addTo(map);
|
marker1.on("click", (e) => {
|
this.menuNav = true;
|
this.activityInfo = item;
|
});
|
}
|
}
|
},
|
|
// 返回按钮
|
goBack() {
|
this.$router.go(-1);
|
},
|
aaa() {
|
// 渲染母线
|
this.addArr();
|
},
|
addArr(start = 894, end = 900) {
|
for (let i = start; i <= end; i++) {
|
this.yearArr.push(i);
|
}
|
this.span = this.yearArr[0];
|
this.$nextTick(() => {
|
// this.creatMX(this.yearArr.length - 1)
|
// this.creatScale(this.yearArr)
|
});
|
},
|
|
getPersonInfoFun() {
|
getPersonInfo({
|
id: this.$route.query.id,
|
type: "PERSON_SPACE_TIME"
|
}).then((res) => {
|
this.initMap(res.object.personSpaceTimeList);
|
});
|
},
|
|
getBasicInfo() {
|
getPersonInfo({
|
id: this.$route.query.id,
|
type: "PERSON_BASIC"
|
}).then((res) => {
|
this.basicInfo.name = res.object.personFieldList.find(
|
(f) => f.fieldName == "WEAK_NAME"
|
).content1;
|
this.basicInfo.birthYear = res.object.personFieldList.find(
|
(f) => f.fieldName == "BIRTH_YEAR"
|
).content1;
|
this.basicInfo.deathYear = res.object.personFieldList.find(
|
(f) => f.fieldName == "DEATH_YEAR"
|
).content1;
|
this.basicInfo.nativePlace = res.object.personFieldList.find(
|
(f) => f.fieldName == "NATIVE_PLACE"
|
).content1;
|
this.basicInfo.nowPlace = res.object.personFieldList.find(
|
(f) => f.fieldName == "NATIVE_PLACE"
|
).content2;
|
console.log(this.basicInfo);
|
});
|
},
|
|
creatMX(len) {
|
let width = len * 50 + 10;
|
// this.MX.style.width = `${width}px`
|
// this.scales.style.width = `${width}px`
|
},
|
creatScale() {
|
// for (let i = 0; i < this.yearArr.length; i++) {
|
// let scale = document.createElement("div")
|
// scale.className = "scale"
|
// scale.setAttribute("index", i)
|
// scale.addEventListener("click", this.scaleClick)
|
// scales.appendChild(scale)
|
// }
|
},
|
|
handleSliderChange(value) {
|
this.currentYear = value;
|
},
|
scaleClick(i) {
|
// let i = Number(this.getAttribute("data-index"))
|
|
if (i > this.yearIndex) {
|
this.cursorML += (i - this.yearIndex + +("0.0" + this.yearIndex)) / 1.9;
|
// this.spanML += 50 * (i - this.yearIndex)
|
} else {
|
this.cursorML -= (this.yearIndex - i) / 2 + 0.04;
|
// this.spanML -= 50 * (this.yearIndex - i)
|
}
|
this.yearIndex = i;
|
},
|
// ________________________
|
// 时空地图
|
spaceTime() {
|
var chartDom = document.getElementById("spaceTime");
|
var myChart = echarts.init(chartDom);
|
var option;
|
|
const data = [
|
{
|
name: "海门",
|
value: 9
|
},
|
{
|
name: "金昌",
|
value: 19
|
},
|
{
|
name: "泉州",
|
value: 21
|
},
|
{
|
name: "衢州",
|
value: 177
|
},
|
{
|
name: "廊坊",
|
value: 193
|
},
|
{
|
name: "菏泽",
|
value: 194
|
},
|
{
|
name: "合肥",
|
value: 229
|
},
|
{
|
name: "武汉",
|
value: 273
|
},
|
{
|
name: "啊三大矿及说到底是封建士大夫大师傅就",
|
value: 279
|
}
|
];
|
const geoCoordMap = {
|
海门: [121.15, 31.89],
|
鄂尔多斯: [109.781327, 39.608266],
|
招远: [120.38, 37.35],
|
平顶山: [113.29, 33.75],
|
邢台: [114.48, 37.05],
|
德州: [116.29, 37.45],
|
济宁: [116.59, 35.38],
|
荆州: [112.239741, 30.335165],
|
宜昌: [111.3, 30.7],
|
义乌: [120.06, 29.32],
|
丽水: [119.92, 28.45],
|
洛阳: [112.44, 34.7],
|
秦皇岛: [119.57, 39.95],
|
株洲: [113.16, 27.83],
|
石家庄: [114.48, 38.03],
|
莱芜: [117.67, 36.19],
|
常德: [111.69, 29.05],
|
保定: [115.48, 38.85],
|
湘潭: [112.91, 27.87],
|
金华: [119.64, 29.12],
|
岳阳: [113.09, 29.37],
|
长沙: [113, 28.21],
|
衢州: [118.88, 28.97],
|
廊坊: [116.7, 39.53],
|
菏泽: [115.480656, 35.23375],
|
合肥: [117.27, 31.86],
|
武汉: ["你好", 30.52],
|
啊三大矿及说到底是封建士大夫大师傅就: [125.03, 46.58]
|
};
|
const convertData = function (data) {
|
var res = [];
|
for (var i = 0; i < data.length; i++) {
|
var geoCoord = geoCoordMap[data[i].name];
|
if (geoCoord) {
|
res.push({
|
name: data[i].name,
|
value: geoCoord.concat(data[i].value)
|
});
|
}
|
}
|
return res;
|
};
|
option = {
|
tooltip: {
|
trigger: "item"
|
},
|
bmap: {
|
center: [104.114129, 37.550339], // 调整地图中心点位置
|
zoom: 6, // 设置地图缩放级别
|
roam: true,
|
mapStyle: {
|
styleJson: [
|
{
|
featureType: "water",
|
elementType: "all",
|
stylers: {
|
color: "#d1d1d1"
|
}
|
},
|
{
|
featureType: "land",
|
elementType: "all",
|
stylers: {
|
color: "#f3f3f3"
|
}
|
},
|
{
|
featureType: "manmade",
|
elementType: "all",
|
stylers: {
|
color: "#d1d1d1"
|
}
|
},
|
{
|
featureType: "local",
|
elementType: "all",
|
stylers: {
|
color: "#d1d1d1"
|
}
|
},
|
{
|
featureType: "arterial",
|
elementType: "labels",
|
stylers: {
|
visibility: "off"
|
}
|
},
|
{
|
featureType: "boundary",
|
elementType: "all",
|
stylers: {
|
color: "#fefefe"
|
}
|
},
|
{
|
featureType: "building",
|
elementType: "all",
|
stylers: {
|
color: "#d1d1d1"
|
}
|
},
|
{
|
featureType: "label",
|
elementType: "labels.text.fill",
|
stylers: {
|
color: "#999999"
|
}
|
}
|
]
|
}
|
},
|
series: [
|
{
|
type: "effectScatter",
|
coordinateSystem: "bmap",
|
data: convertData(
|
data
|
.sort(function (a, b) {
|
return b.value - a.value;
|
})
|
.slice(0, 6)
|
),
|
symbolSize: function (val) {
|
return val[2] / 10;
|
},
|
encode: {
|
value: 2
|
},
|
showEffectOn: "render",
|
rippleEffect: {
|
brushType: "stroke"
|
},
|
label: {
|
formatter: "{b}",
|
position: "bottom",
|
backgroundColor: "rgba(255, 255, 255, 1)",
|
padding: [4, 8],
|
formatter: function (params) {
|
// 使用函数动态生成标签内容
|
// 设置文字多少个后面显示省略号
|
if (params.data.name.length > 6) {
|
return params.data.name.substring(0, 6) + "...";
|
} else {
|
return params.data.name;
|
}
|
},
|
show: true,
|
fontSize: 12,
|
borderRadius: 30
|
},
|
itemStyle: {
|
shadowBlur: 10,
|
shadowColor: "#333"
|
},
|
emphasis: {
|
scale: true
|
},
|
zlevel: 1
|
}
|
]
|
};
|
let menuNav1 = this.menuNav;
|
let menuNav2 = this.menuNav;
|
// 设置点击事件监听
|
myChart.on("click", (params) => {
|
// menuNav2 = !menuNav1
|
if (params.componentType === "series") {
|
var dataName = params.data.name; // 获取点击的数据名称
|
var dataValue = params.data.value; // 获取点击的数据值
|
// 在这里可以根据需要处理点击事件，比如弹出对应数据的详细信息等操作
|
// 这里可以编写触发时间获取对应数据信息的逻辑
|
this.spaceTimeArr(params);
|
}
|
});
|
|
option && myChart.setOption(option);
|
},
|
// 时空地图点击时获取的数据
|
spaceTimeArr(Arr) {
|
// 修改 Vue 组件的数据，例如显示菜单导航
|
this.menuNav = !this.menuNav;
|
// 时空地图的数据
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.getBack {
|
position: fixed;
|
width: 0.6rem;
|
height: 0.24rem;
|
top: 1rem;
|
left: 0.6rem;
|
z-index: 99999;
|
font-size: 0.12rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #2c2c2c;
|
border-color: #9e9e9e;
|
border-radius: 0;
|
font-weight: 700;
|
}
|
|
.box {
|
position: absolute;
|
bottom: 10%;
|
left: 50%;
|
height: 0.3rem;
|
transform: translate(-50%, -50%);
|
}
|
|
.MX {
|
height: 20px;
|
background-color: #ccc;
|
}
|
|
.scale {
|
width: 3px;
|
height: 50px;
|
background-color: #ccc;
|
cursor: pointer;
|
}
|
|
.scales {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.span {
|
font-size: 25px;
|
color: rgb(0, 68, 255);
|
margin-left: -34px;
|
}
|
|
.cursor {
|
position: relative;
|
width: 25px;
|
height: 30px;
|
background-color: rgb(0, 68, 255);
|
margin-top: 30px;
|
margin-left: -12.5px;
|
}
|
|
.cursor:before {
|
content: "";
|
position: absolute;
|
top: -20px;
|
width: 0;
|
height: 0;
|
border-left: 13px solid transparent;
|
border-right: 13px solid transparent;
|
border-bottom: 20px solid rgb(0, 68, 255);
|
}
|
|
::v-deep .particulars {
|
position: absolute !important;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
overflow: auto;
|
margin: 0;
|
}
|
|
.particulars ::v-deep .el-dialog {
|
margin: 0 !important;
|
position: absolute;
|
right: 0;
|
top: 86px;
|
bottom: 0;
|
width: 4rem;
|
}
|
|
.particulars ::v-deep .el-dialog__header {
|
display: none;
|
}
|
|
.particulars ::v-deep .el-dialog__body {
|
padding: 0.26rem 0.23rem 0.26rem 0.27rem;
|
color: #2c2c2c !important;
|
position: relative;
|
height: 100%;
|
}
|
#map {
|
height: 100%;
|
width: 100%;
|
margin: 0 auto;
|
font-size: 14px !important;
|
}
|
::v-deep .map-circle-name {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(222, 142, 102);
|
}
|
|
::v-deep .ripple {
|
border-radius: 50%;
|
position: relative;
|
overflow: hidden;
|
}
|
|
::v-deep .ripple::before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
width: 150%; /* Ensure it covers the entire parent */
|
height: 150%;
|
background: rgba(255, 255, 255, 0.5);
|
border-radius: 50%;
|
transform: translate(-50%, -50%) scale(1);
|
animation: ripple-animation 1s infinite linear;
|
}
|
|
@keyframes ripple-animation {
|
to {
|
transform: translate(-50%, -50%) scale(0);
|
opacity: 0;
|
}
|
}
|
</style>
|
