<template>
|
<view class="pageBox">
|
<!-- 顶部导航 -->
|
<headNav :idIndex="idIndex" text="地域图谱" style="z-index: 999" />
|
<view
|
class="flex flex-center"
|
style="width: 100%; margin: 20px 0 34px; justify-content: flex-start"
|
>
|
<advancedSearch
|
class="Search"
|
placehold="输入姓名/别名/时期/传主职业搜索"
|
@onSearch="onSearch"
|
:isAvancedTrue="false"
|
:keyword="keyword"
|
/>
|
<!-- <ul class="flex">
|
<li 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
|
:style="{ background: item.color }"
|
style="
|
margin-right: 0.07rem;
|
width: 0.12rem;
|
height: 0.12rem;
|
border-radius: 50%;
|
"
|
></view>
|
<view 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: 99;
|
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 style="overflow: auto; height: 2.5rem" v-loading="loading">
|
<div
|
v-if="!loading && SearchArr.length == 0"
|
style="
|
position: absolute;
|
top: 30%;
|
left: 0;
|
right: 0;
|
text-align: center;
|
font-size: 0.2rem;
|
color: #666;
|
"
|
>
|
暂无搜索数据
|
</div>
|
<ul
|
class="information"
|
v-for="(item, index) in SearchArr"
|
:key="index"
|
style="cursor: pointer;"
|
@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>籍贯: {{ item.nativPlace ? item.nativPlace : "-" }}</li>
|
<li
|
v-if="SearchArr.length - 1 !== index"
|
style="margin: 0.1rem 0; border-bottom: 1px solid #d8d8d8"
|
></li>
|
</ul>
|
</view>
|
</el-card>
|
<!-- echarts里面的数据点击后弹框 -->
|
|
<div class="mapBox" id="mapBox" v-loading="mapLoading">
|
<div id="map"></div>
|
<div
|
class="markerDataListBox"
|
v-if="isEchTrue"
|
style="overflow: inherit; width: 3rem; position: absolute; z-index: 999"
|
:style="{ top: isTop, left: isLeft }"
|
>
|
<div class="markerDataList">
|
<div class="markerDataContentBox">
|
<div v-if="currentMark.length == 1">
|
<ul class="information">
|
<li>
|
姓名:
|
{{ currentMark[0].name ? currentMark[0].name : "-" }}
|
</li>
|
<li>别名: {{ currentMark[0].nikeName ? currentMark[0].nikeName : "-" }}</li>
|
<li>籍贯: {{ currentMark[0].nativePlace ? currentMark[0].nativePlace : "-" }}</li>
|
<li>医学分科: {{ currentMark[0].barnch ? currentMark[0].barnch : "-" }}</li>
|
<li
|
class="medicalLi"
|
:title="currentMark[0].medical ? currentMark[0].medical : '-'"
|
>
|
小传: {{ currentMark[0].medical ? currentMark[0].medical : "-" }}
|
</li>
|
</ul>
|
<el-button
|
class="flex"
|
@click="viewMoreClick(currentMark[0])"
|
style="
|
width: 100%;
|
padding: 3px 0;
|
font-size: 0.12rem;
|
color: #597aa5;
|
"
|
type="text"
|
>查看更多>></el-button
|
>
|
</div>
|
<el-collapse v-else>
|
<el-collapse-item
|
v-for="(item, index) in currentMark"
|
:name="index"
|
>
|
<template slot="title">
|
<div class="titleImg">
|
<i class="el-icon-user"></i>
|
</div>
|
<span>{{ item.name }}</span>
|
</template>
|
<ul class="information">
|
<li>
|
姓名:
|
{{ item.name ? item.name : "-" }}
|
</li>
|
<li>别名: {{ item.nikeName ? item.nikeName : "-" }}</li>
|
<li>籍贯: {{ item.nativePlace ? item.nativePlace : "-" }}</li>
|
<li>医学分科: {{ item.barnch ? item.barnch : "-" }}</li>
|
<li
|
class="medicalLi"
|
:title="item.medical ? item.medical : '-'"
|
>
|
小传: {{ item.medical ? item.medical : "-" }}
|
</li>
|
</ul>
|
<el-button
|
class="flex"
|
@click="viewMoreClick(item)"
|
style="
|
width: 100%;
|
padding: 3px 0;
|
font-size: 0.12rem;
|
color: #597aa5;
|
"
|
type="text"
|
>查看更多>></el-button
|
>
|
</el-collapse-item>
|
</el-collapse>
|
|
</div>
|
</div>
|
</div>
|
<!-- <el-card class="box-card echartsTrue" v-show="isEchTrue">
|
<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
|
class="medicalLi"
|
:title="currentMark.medical ? currentMark.medical : '-'"
|
>
|
小传: {{ 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> -->
|
</div>
|
|
<!-- 朝代 -->
|
<view
|
class="flex flex-center"
|
style="
|
width: 100%;
|
position: fixed;
|
bottom: 0.33rem;
|
left: 0;
|
right: 0;
|
z-index: 99;
|
overflow: auto;
|
"
|
>
|
<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.start }}
|
</view>
|
<view
|
class="flex flex-center font-family"
|
style="
|
min-width: 0.6rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
text-align: center;
|
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.dynastyChs }}
|
</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 "leaflet.chinatmsproviders";
|
import * as echarts from "echarts";
|
import "echarts/extension/bmap/bmap";
|
import {
|
getRetrieval,
|
getDynasty,
|
getPreCount,
|
getDynastyData
|
} from "@/api/index.js";
|
|
export default {
|
data() {
|
return {
|
loading: true,
|
mapLoading: true,
|
// echarts元素点击时出来的弹窗和坐标
|
keyword: "",
|
isEchTrue: false,
|
isLeft: 0,
|
isTop: 0,
|
// 用户信息
|
information: [
|
{
|
label: "姓名",
|
content: "李时珍"
|
},
|
{
|
label: "别名",
|
content: "东丽先生"
|
},
|
{
|
label: "籍贯",
|
content: "湖北"
|
},
|
{
|
label: "医学分科",
|
content: "中药,针灸"
|
},
|
{
|
label: "小传",
|
content:
|
"李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府..."
|
}
|
],
|
// 下面的朝代1
|
dynasty1Color: "",
|
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
|
},
|
{
|
name: "明",
|
color: "#DE8E66",
|
id: 8
|
}
|
],
|
// 搜索后是否显示弹框
|
isSearch: false,
|
currentMark: null,
|
SearchArr: [
|
{
|
id: 1,
|
name: "李时珍",
|
birthAndDeath: "1518-1593",
|
source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北"
|
},
|
{
|
id: 2,
|
name: "李时珍",
|
birthAndDeath: "1518-1593",
|
source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北"
|
}
|
],
|
zoomLevel: 5,
|
oldMarkList: [],
|
aggregatedData: [],
|
openData: null
|
};
|
},
|
onLoad(options) {
|
this.idIndex = options.id;
|
},
|
mounted() {
|
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);
|
this.openData = item;
|
var latlng = L.latLng(item.yCoord, item.xCoord);
|
this.map.setView(latlng, 12);
|
},
|
getDataList() {
|
this.SearchArr = [];
|
this.loading = true;
|
this.mapLoading = true;
|
// 这里改成了分页的接口，需要调用多次取出所有数据
|
let times = 0;
|
getPreCount({
|
keyword: this.keyword,
|
dynasty: this.dynasty1Color
|
}).then(async (res) => {
|
const totalCount = res.object;
|
if (totalCount % 200 == 0) {
|
times = totalCount / 200 - 1;
|
} else {
|
times = Math.floor(totalCount / 200);
|
}
|
console.log(times, "times");
|
if (times == 0 || times < 0) times = 1;
|
let markerList = [];
|
for (let i = 1; i <= times; i++) {
|
const curData = await this.getDataPageInfo(i);
|
if (curData) {
|
markerList = [...markerList, ...curData];
|
}
|
if (i == 1) {
|
this.mapLoading = false;
|
this.markerList = markerList;
|
this.initMap();
|
} else {
|
this.handleMapIcon(this.markerList);
|
}
|
|
if (i == times) {
|
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: "-",
|
nativPlace: item?.NATIVE_PLACE[0].content1,
|
id: item.id
|
}));
|
this.loading = false;
|
this.markerList = markerList;
|
this.handleMapIcon(this.markerList);
|
}
|
}
|
});
|
},
|
|
async getDataPageInfo(count) {
|
const res = await getRetrieval({
|
keyword: this.keyword,
|
dynasty: this.dynasty1Color,
|
page: count,
|
pageSize: 200
|
});
|
if (res.object) {
|
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) {
|
const currentDynasty = this.dynasty1.find(
|
(f) => f.id == item.PERIOD[0].content1
|
);
|
if (currentDynasty) {
|
item.dynastyInfo = currentDynasty;
|
}
|
markerList.push({ ...citem, ...item });
|
}
|
});
|
}
|
}
|
|
return markerList;
|
} else {
|
return [];
|
}
|
},
|
onMapMoveEnd() {
|
console.log("地图拖动了");
|
if (this.openData) {
|
this.handleMapIcon(this.markerList);
|
} else {
|
this.isEchTrue = false;
|
}
|
},
|
//初始化地图
|
initMap() {
|
this.isEchTrue = false;
|
if (this.map) {
|
this.map.remove();
|
}
|
var map = L.map("map", {
|
preferCanvas: true,
|
attributionControl: false
|
}).setView([34.3227, 108.5525], this.zoomLevel);
|
map.on("moveend", this.onMapMoveEnd);
|
map.on("zoomend", () => {
|
var zoomLevel = map.getZoom(); // 获取当前地图的缩放级别
|
console.log("当前地图缩放级别为:", zoomLevel);
|
this.zoomLevel = zoomLevel;
|
this.isEchTrue = false;
|
this.handleMapIcon(this.markerList);
|
});
|
L.tileLayer
|
.chinaProvider("TianDiTu.Normal.Map", {
|
key: "76bc34ead7e30e663a4eded8aeaf5860",
|
maxZoom: 18,
|
minZoom: 3
|
})
|
.addTo(map);
|
L.tileLayer
|
.chinaProvider("TianDiTu.Normal.Annotion", {
|
key: "76bc34ead7e30e663a4eded8aeaf5860",
|
maxZoom: 18,
|
minZoom: 3
|
})
|
.addTo(map);
|
this.map = map;
|
this.handleMapIcon(this.markerList);
|
},
|
|
handleMapIcon(data) {
|
if (this.oldMarkList.length) {
|
for (let j = 0; j < this.oldMarkList.length; j++) {
|
const oldMark = this.oldMarkList[j];
|
oldMark.remove();
|
}
|
this.oldMarkList = [];
|
}
|
// 按层级处理数据合并和icon的渲染
|
// 获取天地图比例尺(地图1cm:实际cm)
|
const scale = {
|
1: 295829355.45456564,
|
2: 147914677.72728282,
|
3: 73957338.863641411,
|
4: 36978669.431820706,
|
5: 18489334.715910353,
|
6: 9244667.3579551764,
|
7: 4622333.6789775882,
|
8: 2311166.8394887941,
|
9: 1155583.419744397,
|
10: 577791.70987219852,
|
11: 288895.85493609926,
|
12: 144447.92746804963,
|
13: 72223.963734024815,
|
14: 36111.981867012408,
|
15: 18055.990933506204,
|
16: 9027.9954667531019,
|
17: 4513.997733376551,
|
18: 2256.9988666882755,
|
19: 1128.4994333441377,
|
20: 564.24971667206887
|
};
|
// 根据比例尺计算当前地图1厘米的经纬度差值
|
const cmData = scale[this.zoomLevel] / 100; // 将厘米转换为米
|
const longitudeToM = 92064.1; // 1经度对应米
|
const latitudeToM = 111195.1; // 1纬度对应米
|
const longitudeRange = cmData / longitudeToM; // 地图1cm的经度差
|
const latitudeRange = cmData / latitudeToM; // 地图1cm的纬度差
|
console.log("longitudeRange", longitudeRange);
|
console.log("latitudeRange", latitudeRange);
|
// 根据经纬度差值将地图一厘米内所有点合并并记录数量
|
const aggregatedData = [];
|
for (let i = 0; i < data.length; i++) {
|
const item = data[i];
|
// 判断当前点是否存在在1cm内的相关数据
|
const mateData = aggregatedData.find(
|
(aItem) =>
|
Math.abs(aItem.mainX - item.xCoord) < longitudeRange &&
|
Math.abs(aItem.mainY - item.yCoord) < latitudeRange
|
);
|
if (!mateData) {
|
// 无匹配数据时，将当前点坐标设为中心点坐标，虹吸合并周围1cm内的点
|
const obj = {
|
mainX: item.xCoord,
|
mainY: item.yCoord,
|
contentX: "",
|
contentY: "",
|
xList: [],
|
yList: [],
|
data: []
|
};
|
obj.xList.push(item.xCoord);
|
obj.yList.push(item.yCoord);
|
obj.data.push(item);
|
aggregatedData.push(obj);
|
} else {
|
// 有匹配数据时，将当前点进行合并
|
mateData.xList.push(item.xCoord);
|
mateData.yList.push(item.yCoord);
|
mateData.data.push(item);
|
}
|
}
|
// 根据聚合经度和纬度列表的最大最小值，取中心点坐标
|
for (let j = 0; j < aggregatedData.length; j++) {
|
const aggregatedItem = aggregatedData[j];
|
const maxX = Math.max(...aggregatedItem.xList);
|
const minX = Math.min(...aggregatedItem.xList);
|
const maxY = Math.max(...aggregatedItem.yList);
|
const minY = Math.min(...aggregatedItem.yList);
|
aggregatedItem.contentX = (maxX - minX) / 2 + minX;
|
aggregatedItem.contentY = (maxY - minY) / 2 + minY;
|
|
// 添加标记
|
let icon = L.divIcon({
|
html: `<div class='ripple' style='box-shadow: 0 0 20px ${
|
aggregatedItem.data.length > 30 ? 30 : aggregatedItem.data.length
|
}px #cc2edf78;'>${
|
aggregatedItem.data.length < 100
|
? aggregatedItem.data.length
|
: "99+"
|
}</div>`,
|
iconSize: [30, 30],
|
className: "map-circle"
|
});
|
const temp_mark = L.marker(
|
[aggregatedItem.contentY, aggregatedItem.contentX],
|
{
|
icon: icon
|
}
|
);
|
this.oldMarkList.push(temp_mark);
|
temp_mark.addTo(this.map);
|
temp_mark.on("click", (e) => {
|
setTimeout(() => {
|
this.isEchTrue = true;
|
this.currentMark = aggregatedItem.data.map((item) => {
|
return {
|
name: item?.NAME[0]?.content1,
|
nikeName: item?.ALIAS[0]?.content2,
|
nativePlace: item?.content1,
|
barnch: item?.MEDICAL_BRANCH[0]?.content1,
|
medical: item?.BIOGRAPHY,
|
id: item.id
|
};
|
});
|
this.isTop = e.containerPoint.y - 435 + "px";
|
this.isLeft = e.containerPoint.x - 180 + "px";
|
}, 300);
|
});
|
}
|
console.log("aggregatedData", aggregatedData);
|
this.aggregatedData = aggregatedData;
|
if (this.openData) {
|
setTimeout(() => {
|
if (this.openData) {
|
let aggregated = null;
|
for (let i = 0; i < this.aggregatedData.length; i++) {
|
const aggregatedItem = this.aggregatedData[i];
|
const d = aggregatedItem.data.find(
|
(f) => f.id == this.openData.id
|
);
|
if (d) {
|
aggregated = aggregatedItem;
|
}
|
}
|
this.currentMark = aggregated.data.map((item) => {
|
return {
|
name: item?.NAME[0]?.content1,
|
nikeName: item?.ALIAS[0]?.content2,
|
nativePlace: item?.content1,
|
barnch: item?.MEDICAL_BRANCH[0]?.content1,
|
medical: item?.BIOGRAPHY,
|
id: item.id
|
};
|
});
|
this.isEchTrue = true;
|
this.$nextTick(() => {
|
this.isTop =
|
document.getElementById("mapBox").offsetHeight / 2 - 435 + "px";
|
this.isLeft =
|
document.getElementById("mapBox").offsetWidth / 2 - 180 + "px";
|
});
|
}
|
|
this.openData = null;
|
}, 300);
|
}
|
},
|
|
// 点击下面的朝代按钮
|
dynastyBottomClick(id) {
|
this.dynasty1Color = id;
|
this.getDataList();
|
},
|
onSearch(val) {
|
this.isSearch = true;
|
this.keyword = val.text;
|
this.map.invalidateSize();
|
|
this.getDataList();
|
},
|
// 点击上面的朝代按钮
|
SchoolClick(id) {},
|
// 查看更多>>
|
viewMoreClick(data) {
|
uni.navigateTo({
|
url: "/pages/character/detail?id=" + data.id
|
});
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.pageBox {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.markerDataListBox {
|
width: 360px !important;
|
height: 400px;
|
}
|
|
.markerDataListBox::before {
|
content: "";
|
width: 0;
|
height: 0;
|
position: absolute;
|
bottom: -18px;
|
left: 160px;
|
/* background-color: red; */
|
border-left: 20px solid transparent;
|
/* 左边透明 */
|
border-right: 20px solid transparent;
|
/* 右边透明 */
|
border-top: 20px solid #fff;
|
/* 顶部红色 */
|
z-index: 999;
|
}
|
|
.markerDataList {
|
width: 100%;
|
height: 100%;
|
background: #fff;
|
border-radius: 8px;
|
overflow: hidden;
|
box-shadow: 0 0 10px 0 #000;
|
}
|
|
.markerDataList ::v-deep .el-collapse-item {
|
border-left: 1px solid #ebeef5;
|
border-right: 1px solid #ebeef5;
|
}
|
|
::v-deep .el-collapse-item__header.is-active {
|
border-bottom-color: #ebeef5;
|
}
|
|
::v-deep .el-collapse-item__header {
|
padding-left: 10px;
|
font-size: 16px;
|
}
|
|
.markerDataContentBox {
|
width: 100%;
|
height: 100%;
|
overflow: auto !important;
|
padding: 6px;
|
box-sizing: border-box;
|
}
|
|
.titleImg {
|
display: inline-block;
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
background-color: #4c48fb;
|
color: #fff;
|
margin-right: 10px;
|
text-align: center;
|
line-height: 24px;
|
}
|
|
::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;
|
}
|
|
::v-deep .el-collapse-item__content {
|
padding-bottom: 10px;
|
}
|
|
.markerDataContentBox .information {
|
padding: 20px;
|
}
|
|
.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;
|
}
|
|
.mapBox {
|
height: 100%;
|
width: 100%;
|
margin: 0 auto;
|
position: relative;
|
}
|
#map {
|
height: 100%;
|
width: 100%;
|
margin: 0 auto;
|
font-size: 14px !important;
|
z-index: 10 !important;
|
}
|
|
::v-deep .ripple {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background: #4c48fb;
|
color: #fff;
|
text-align: center;
|
line-height: 30px;
|
}
|
|
/* @keyframes ripple-animation {
|
to {
|
transform: translate(-50%, -50%) scale(0);
|
opacity: 0;
|
}
|
} */
|
|
::v-deep .cleanupBtn {
|
right: 60px !important;
|
}
|
|
::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>
|
