<template>
|
<view class="pageBox">
|
<!-- 顶部导航 -->
|
<headNav
|
:idIndex="idIndex"
|
text="中医地域医谱"
|
/>
|
<view
|
class="flex flex-center"
|
style="width: 100%; margin: 0.2rem 0 0.34rem; justify-content: flex-start"
|
>
|
<advancedSearch
|
class="Search"
|
placehold="输入姓名/别名/朝代/传主职业搜索"
|
@onSearch="onSearch"
|
:isAvancedTrue="false"
|
:keyword="keyword"
|
/>
|
<ul class="flex">
|
<li
|
style=""
|
v-for="(item, index) in dynasty"
|
:key="item.id"
|
>
|
<view
|
@click="SchoolClick(item.id)"
|
class="flex flex-center font-family school"
|
:style="{
|
marginRight: index === dynasty.length - 1 ? '0' : '0.03rem',
|
}"
|
style="
|
font-weight: 500;
|
border-radius: 0.3rem;
|
padding: 0.06rem 0.15rem;
|
color: #2c2c2c;
|
font-size: 0.12rem;
|
margin-top: 0.03rem;
|
margin-right: 0.1rem;
|
background-color: #fff;
|
"
|
>
|
<view
|
class=""
|
:style="{ background: item.color }"
|
style="
|
margin-right: 0.07rem;
|
width: 0.12rem;
|
height: 0.12rem;
|
border-radius: 50%;
|
"
|
></view>
|
<view
|
class=""
|
style="color: #2c2c2c; font-size: 0.12rem"
|
>{{
|
item.name
|
}}</view>
|
</view>
|
</li>
|
</ul>
|
</view>
|
<!-- 搜索后的弹框 -->
|
<el-card
|
class="box-card"
|
v-if="isSearch"
|
style="
|
height: 3.2rem;
|
width: 3rem;
|
position: fixed;
|
z-index: 999999999999;
|
left: 1rem;
|
top: 2.2rem;
|
"
|
>
|
<div
|
slot="header"
|
class="clearfix"
|
>
|
<span>人物 ({{ SearchArr.length }})</span>
|
<el-button
|
style="
|
float: right;
|
padding: 3px 0;
|
font-size: 0.12rem;
|
color: #597aa5;
|
"
|
@click="isSearch = false"
|
type="text"
|
>关闭</el-button>
|
</div>
|
<view
|
class=""
|
style="overflow: auto; height: 2.5rem"
|
>
|
<ul
|
class="information"
|
v-for="(item, index) in SearchArr"
|
:key="index"
|
@click="showCard(item)"
|
>
|
<li style="font-size: 0.18rem; font-weight: 700">
|
{{ item.name ? item.name : "-" }}
|
</li>
|
<li>
|
生卒年:
|
{{ item.birthAndDeath ? item.birthAndDeath : "-" }}
|
</li>
|
<li>来源: {{ item.source ? item.source : "-" }}</li>
|
<li
|
v-if="SearchArr.length - 1 !== index"
|
style="margin: 0.1rem 0; border-bottom: 1px solid #d8d8d8"
|
></li>
|
</ul>
|
</view>
|
</el-card>
|
<!-- echarts里面的数据点击后弹框 -->
|
<el-card
|
class="box-card echartsTrue"
|
v-show="isEchTrue"
|
style="
|
overflow: inherit;
|
width: 3rem;
|
position: fixed;
|
z-index: 999999999999;
|
"
|
:style="{ top: isTop, left: isLeft }"
|
>
|
<div
|
slot="header"
|
class="clearfix"
|
>
|
<span v-if="currentMark">{{
|
currentMark.name ? currentMark.name : "-"
|
}}</span>
|
<el-button
|
style="
|
float: right;
|
padding: 3px 0;
|
font-size: 0.12rem;
|
color: #597aa5;
|
"
|
@click="isEchTrue = false"
|
type="text"
|
>关闭</el-button>
|
</div>
|
<ul
|
class="information"
|
v-if="currentMark"
|
>
|
<li>
|
姓名:
|
{{ currentMark.name ? currentMark.name : "-" }}
|
</li>
|
<li>别名: {{ currentMark.nikeName ? currentMark.nikeName : "-" }}</li>
|
<li>
|
籍贯: {{ currentMark.nativePlace ? currentMark.nativePlace : "-" }}
|
</li>
|
<li>医学分科: {{ currentMark.barnch ? currentMark.barnch : "-" }}</li>
|
<li>小传: {{ currentMark.medical ? currentMark.medical : "-" }}</li>
|
</ul>
|
<el-button
|
class="flex"
|
@click="viewMoreClick"
|
style="width: 100%; padding: 3px 0; font-size: 0.12rem; color: #597aa5"
|
type="text"
|
>查看更多>></el-button>
|
</el-card>
|
<!-- echarts地图 -->
|
<!-- <view id="main" style="width: 100vw; position: relative"></view> -->
|
<div id="map"></div>
|
<!-- 朝代 -->
|
<view
|
class="flex flex-center"
|
style="width: 100%; position: fixed; bottom: 0.33rem; left: 0"
|
>
|
<ul class="flex">
|
<li
|
@click="dynastyBottomClick(item.id)"
|
v-for="(item, index) in dynasty1"
|
:key="item.id"
|
>
|
<view
|
class="flex flex-center"
|
style="height: 0.35rem; background-color: #fff; color: #244a7b"
|
>
|
{{ item.coord }}
|
</view>
|
<view
|
class="flex flex-center font-family"
|
style="
|
padding: 0.05rem 0.19rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
color: #fff;
|
font-size: 0.14rem;
|
margin-top: 0.03rem;
|
margin-right: 0.03rem;
|
background-color: #597aa5;
|
"
|
:style="{
|
marginRight: index === dynasty1.length - 1 ? '0' : '0.03rem',
|
background: dynasty1Color == item.id ? '#244A7B' : '#597AA5',
|
}"
|
>
|
{{ item.name }}
|
</view>
|
</li>
|
</ul>
|
</view>
|
</view>
|
</template>
|
<!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=5USVDAhhS4ssz44HLq3gNPZai7naXf4Q&callback=initializeMap"></script> -->
|
<!-- 5USVDAhhS4ssz44HLq3gNPZai7naXf4Q -->
|
<script>
|
import { loadBMap } from "@/static/map.js";
|
import L from "leaflet";
|
import * as echarts from "echarts";
|
import "echarts/extension/bmap/bmap";
|
import "leaflet.chinatmsproviders";
|
import { getRetrieval } from "@/api/index.js";
|
export default {
|
data() {
|
return {
|
// echarts元素点击时出来的弹窗和坐标
|
keyword: "",
|
isEchTrue: false,
|
isLeft: 0,
|
isTop: 0,
|
// 用户信息
|
information: [
|
{
|
label: "姓名",
|
content: "李时珍",
|
},
|
{
|
label: "别名",
|
content: "东丽先生",
|
},
|
{
|
label: "籍贯",
|
content: "湖北",
|
},
|
{
|
label: "医学分科",
|
content: "中药,针灸",
|
},
|
{
|
label: "小传",
|
content:
|
"李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府...",
|
},
|
],
|
// 下面的朝代1
|
dynasty1Color: 1,
|
dynasty1: [
|
{
|
name: "夏朝",
|
coord: "2070BC",
|
id: 1,
|
},
|
{
|
name: "商朝",
|
id: 2,
|
coord: "1600BC",
|
},
|
{
|
name: "西周",
|
id: 3,
|
coord: "1600BC",
|
},
|
{
|
name: "春秋战国",
|
id: 4,
|
coord: "770BC",
|
},
|
{
|
name: "秦朝",
|
id: 5,
|
coord: "221BC",
|
},
|
{
|
name: "汉朝",
|
id: 6,
|
coord: "202BC",
|
},
|
{
|
name: "三国两晋南北朝",
|
id: 7,
|
coord: "184",
|
},
|
{
|
name: "隋朝",
|
id: 8,
|
coord: "581",
|
},
|
{
|
name: "唐朝",
|
id: 9,
|
coord: "618",
|
},
|
{
|
name: "五代十国",
|
id: 10,
|
coord: "907",
|
},
|
{
|
name: "辽夏金",
|
id: 11,
|
coord: "907",
|
},
|
{
|
name: "宋朝",
|
id: 12,
|
coord: "960",
|
},
|
{
|
name: "元朝",
|
id: 13,
|
coord: "1271",
|
},
|
{
|
name: "明朝",
|
id: 14,
|
coord: "1368",
|
},
|
{
|
name: "清朝",
|
id: 15,
|
coord: "1636",
|
},
|
],
|
// 标题顶部栏需要的东西
|
idIndex: 0,
|
// 朝代
|
dynasty: [
|
{
|
name: "夏朝",
|
color: "#90BBD8",
|
id: 1,
|
},
|
{
|
name: "商朝",
|
color: "#EDD28B",
|
id: 2,
|
},
|
{
|
name: "西周",
|
color: "#CF746D",
|
id: 3,
|
},
|
{
|
name: "秦朝",
|
color: "#9CC27A",
|
id: 4,
|
},
|
{
|
name: "汉朝",
|
color: "#5B6CB9",
|
id: 5,
|
},
|
{
|
name: "隋朝",
|
color: "#8860A8",
|
id: 6,
|
},
|
{
|
name: "唐朝",
|
color: "#DE8E66",
|
id: 7,
|
},
|
],
|
// 搜索后是否显示弹框
|
isSearch: false,
|
currentMark: null,
|
SearchArr: [
|
{
|
id: 1,
|
name: "李时珍",
|
birthAndDeath: "1518-1593",
|
source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
|
},
|
{
|
id: 2,
|
name: "李时珍",
|
birthAndDeath: "1518-1593",
|
source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
|
},
|
],
|
};
|
},
|
onLoad(options) {
|
this.idIndex = options.id;
|
console.log("optionsoptionsoptions", options.id);
|
},
|
mounted() {
|
// this.$nextTick(() => {
|
// loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
|
// this.innt();
|
// });
|
// })
|
this.getDataList();
|
},
|
methods: {
|
showCard(info) {
|
console.log(info);
|
console.log(this.markerList);
|
const item = this.markerList.find((f) => f.id == info.id);
|
console.log(item, "12312");
|
this.currentMark = {
|
name: item?.WEAK_NAME[0]?.content1,
|
nikeName: item?.ALIAS[0]?.content2,
|
nativePlace: item?.content1,
|
barnch: item?.MEDICAL_BRANCH[0]?.content1,
|
medical: item?.MEDICAL_EXPERTISE[0]?.content1,
|
};
|
console.log(this.currentMark);
|
console.log(this.map);
|
this.isEchTrue = true;
|
},
|
getDataList() {
|
getRetrieval({ keyword: this.keyword, dynasty: "" }).then((res) => {
|
let markerList = [];
|
const listData = res.object.personList;
|
for (let i = 0; i < listData.length; i++) {
|
const item = listData[i];
|
if (item.NATIVE_PLACE?.length > 0) {
|
item.NATIVE_PLACE.forEach((citem) => {
|
if (citem.xCoord && citem.yCoord) {
|
markerList.push({ ...citem, ...item });
|
}
|
});
|
}
|
}
|
this.initMap(markerList);
|
this.SearchArr = markerList.map((item) => ({
|
birthAndDeath: item?.BIRTH_YEAR[0]?.content1
|
? item?.BIRTH_YEAR[0]?.content1 +
|
"-" +
|
item?.DEATH_YEAR[0]?.content1
|
: "-",
|
name: item?.NAME[0]?.content1,
|
source: "-",
|
id: item.id,
|
}));
|
this.markerList = markerList;
|
console.log(markerList, "markerList");
|
});
|
},
|
//初始化地图
|
initMap(markerList) {
|
var map = L.map("map", {
|
attributionControl: false,
|
preferCanvas: true,
|
}).setView([39.91667, 116.41667], 3);
|
|
L.tileLayer
|
.chinaProvider("TianDiTu.Normal.Map", {
|
key: "76bc34ead7e30e663a4eded8aeaf5860",
|
maxZoom: 18,
|
minZoom: 3,
|
})
|
.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]，我是去一半值，取一半值调出来的
|
});
|
|
if (markerList.length) {
|
for (let i = 0; i < markerList.length; i++) {
|
const item = markerList[i];
|
const temp_mark = L.marker([item.yCoord, item.xCoord], {
|
icon: DefaultIcon1,
|
}).addTo(map);
|
temp_mark.on("click", (e) => {
|
this.isEchTrue = true;
|
this.currentMark = {
|
name: item?.WEAK_NAME[0]?.content1,
|
nikeName: item?.ALIAS[0]?.content2,
|
nativePlace: item?.content1,
|
barnch: item?.MEDICAL_BRANCH[0]?.content1,
|
medical: item?.MEDICAL_EXPERTISE[0]?.content1,
|
};
|
this.$nextTick(() => {
|
this.isTop =
|
e.containerPoint.y -
|
document.querySelector(".echartsTrue").offsetHeight / 2 +
|
"px";
|
this.isLeft =
|
e.containerPoint.x -
|
document.querySelector(".echartsTrue").offsetWidth / 2 +
|
"px";
|
});
|
});
|
}
|
}
|
},
|
|
// 点击下面的朝代按钮
|
dynastyBottomClick(id) {
|
console.log(id);
|
this.dynasty1Color = id;
|
},
|
onSearch(val) {
|
this.isSearch = true;
|
this.keyword = val.text;
|
this.map.invalidateSize();
|
|
this.getDataList();
|
},
|
// 点击上面的朝代按钮
|
SchoolClick(id) {
|
console.log(id);
|
},
|
// 查看更多>>
|
viewMoreClick() {
|
uni.navigateTo({
|
url: "/pages/character/detail",
|
});
|
},
|
},
|
};
|
</script>
|
|
<style>
|
.pageBox {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.echartsTrue::before {
|
content: "";
|
width: 0;
|
height: 0;
|
position: absolute;
|
bottom: -0.18rem;
|
left: 1.2rem;
|
/* background-color: red; */
|
border-left: 0.2rem solid transparent;
|
/* 左边透明 */
|
border-right: 0.2rem solid transparent;
|
/* 右边透明 */
|
border-top: 0.2rem solid #fff;
|
/* 顶部红色 */
|
}
|
|
::v-deep .el-card__header {
|
border: 0;
|
background-color: #dde8f6;
|
height: 0.36rem;
|
padding: 0.08rem 0.13rem;
|
font-size: 0.14rem;
|
font-weight: 600;
|
}
|
|
.information li {
|
font-size: 0.12rem;
|
color: #2c2c2c;
|
line-height: 2;
|
}
|
|
/* 地图上的左下角 */
|
::v-deep .anchorBL {
|
display: none;
|
}
|
|
@media screen and (min-width: 2560px) and (max-width: 3840px) {
|
.Search {
|
/* width: 30%; */
|
justify-content: flex-end;
|
margin-right: 0.26rem;
|
width: 4rem;
|
}
|
|
.Search ::v-deep .ffff {
|
width: 3rem;
|
height: 0.36rem;
|
padding: 0.01rem;
|
border-radius: 0.3rem !important;
|
}
|
|
.Search ::v-deep .widget_button {
|
width: 1rem;
|
/* height: .3rem; */
|
font-size: 0.14rem;
|
padding: 0;
|
border-radius: 0.3rem !important;
|
}
|
|
.Search ::v-deep .widget_style {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.Search ::v-deep .uni-input-placeholder {
|
font-size: 0.13rem;
|
/* height: 100%; */
|
line-height: 1;
|
}
|
|
.Search ::v-deep .uni-input-input {
|
margin-left: 0.19rem;
|
}
|
}
|
|
#main {
|
flex: 1;
|
}
|
|
.Search {
|
/* width: 30%; */
|
justify-content: flex-end;
|
margin-right: 0.26rem;
|
width: 4rem;
|
}
|
|
.Search ::v-deep .ffff {
|
width: 3rem;
|
height: 0.36rem;
|
padding: 0.01rem;
|
}
|
|
.Search ::v-deep .widget_button {
|
width: 1rem;
|
/* height: .3rem; */
|
font-size: 0.14rem;
|
padding: 0;
|
background-color: #597aa5;
|
}
|
|
.Search ::v-deep .widget_style {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.Search ::v-deep .uni-input-placeholder {
|
font-size: 0.13rem;
|
/* height: 100%; */
|
line-height: 1;
|
margin-left: 0.19rem;
|
}
|
|
#map {
|
height: 600px;
|
width: 100%;
|
margin: 0 auto;
|
font-size: 14px !important;
|
z-index: -1 !important;
|
}
|
</style>
|
