TCM_CharacterLibrary.git

			@@ -1,1592 +1,643 @@
			<template>
			<view>
			<!-- 顶部导航 -->
			<headNav :idIndex="idIndex" text="中医地域医谱" />
			<view class="flex flex-center" style="width: 100%; margin: .2rem 0 .34rem;justify-content: flex-start;">
			<advancedSearch class="Search" placehold="输入姓名/别名/朝代/传主职业搜索" @onSearch="onSearch" :isAvancedTrue="false" />
			<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: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;">
			<view class="" :style="{background:item.color}"
			style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view>
			<view class="" style="color: #2C2C2C;font-size: .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: .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">
			<li style="font-size: .18rem;font-weight: 700;">{{item.name}}</li>
			<li>生卒年: {{item.birthAndDeath}}</li>
			<li>来源: {{item.source}}</li>
			<li v-if="SearchArr.length-1!==index" style="margin: .1rem 0; border-bottom: 1px solid #D8D8D8;"></li>
			</ul>
			</view>

			</el-card>
			<!-- echarts里面的数据点击后弹框 -->
			<el-card class="box-card echartsTrue" v-if="isEchTrue"
			style="overflow: inherit; width: 3rem; position: fixed;z-index: 999999999999;"
			:style="{top:isTop,left:isLeft}">
			<div slot="header" class="clearfix">
			<span>{{information[0].content}}</span>
			<el-button style="float: right; padding: 3px 0;font-size: .12rem;color: #597AA5;"
			@click="isEchTrue=false" type="text">关闭</el-button>
			</div>
			<ul class="information">
			<li v-for="(item,index) in information" :key="index">
			{{item.label}}: {{item.content}}
			</li>
			</ul>
			<el-button class="flex" @click="viewMoreClick"
			style="width: 100%; padding: 3px 0;font-size: .12rem;color: #597AA5;" type="text">查看更多>></el-button>
			</el-card>
			<!-- echarts地图 -->
			<view id="main" style="width: 100vw;position: relative;"></view>

			<!-- 朝代 -->
			<view class="flex flex-center" style="width: 100%; position: fixed;bottom: .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: .35rem; background-color: #fff; color:#244A7B ;">
			{{item.coord}}
			</view>
			<view class="flex flex-center font-family"
			style="padding: .05rem .19rem; height: .3rem;line-height: .3rem; color: #fff; font-size: .14rem; margin-top: .03rem;margin-right: .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>
			<view class="pageBox">
			<!-- 顶部导航 -->
			<headNav
			:idIndex="idIndex"
			text="中医地域医谱"
			style="z-index:999"
			/>
			<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>
			<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 * as echarts from 'echarts';
			import 'echarts/extension/bmap/bmap';
			export default {
			data() {
			return {
			// echarts元素点击时出来的弹窗和坐标
			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,
			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() {
			console.log('ss');
			// this.$nextTick(() => {
			loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
			this.innt()
			})
			// })
			},
			methods: {
			// 点击下面的朝代按钮
			dynastyBottomClick(id) {
			console.log(id);
			this.dynasty1Color = id
			},
			onSearch(val) {
			console.log(val);
			//
			this.isSearch= true
			},
			// 点击上面的朝代按钮
			SchoolClick(id){
			console.log(id);
			},
			innt() {
			this.$nextTick(() => {
			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);
			console.log(this.map);
			const item = this.markerList.find((f) => f.id == info.id);
			var latlng = L.latLng(item.yCoord, item.xCoord);
			this.map.setView(latlng, 10);
			},
			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;
			});
			},
			//初始化地图
			initMap(markerList) {
			var map = L.map("map", {
			preferCanvas: true,
			attributionControl: false,
			}).setView([39.91667, 116.41667], 3);

			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
			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]，我是去一半值，取一半值调出来的
			});
			this.map = map;
			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";
			});
			});
			}
			}
			},

			const data = [{
			name: '海门',
			value: 9
			},
			{
			name: '鄂尔多斯',
			value: 12
			},
			{
			name: '招远',
			value: 12
			},
			{
			name: '舟山',
			value: 12
			},
			{
			name: '齐齐哈尔',
			value: 14
			},
			{
			name: '盐城',
			value: 15
			},
			{
			name: '赤峰',
			value: 16
			},
			{
			name: '青岛',
			value: 18
			},
			{
			name: '乳山',
			value: 18
			},
			{
			name: '金昌',
			value: 19
			},
			{
			name: '泉州',
			value: 21
			},
			{
			name: '莱西',
			value: 21
			},
			{
			name: '日照',
			value: 21
			},
			{
			name: '胶南',
			value: 22
			},
			{
			name: '南通',
			value: 23
			},
			{
			name: '拉萨',
			value: 24
			},
			{
			name: '云浮',
			value: 24
			},
			{
			name: '梅州',
			value: 25
			},
			{
			name: '文登',
			value: 25
			},
			{
			name: '上海',
			value: 25
			},
			{
			name: '攀枝花',
			value: 25
			},
			{
			name: '威海',
			value: 25
			},
			{
			name: '承德',
			value: 25
			},
			{
			name: '厦门',
			value: 26
			},
			{
			name: '汕尾',
			value: 26
			},
			{
			name: '潮州',
			value: 26
			},
			{
			name: '丹东',
			value: 27
			},
			{
			name: '太仓',
			value: 27
			},
			{
			name: '曲靖',
			value: 27
			},
			{
			name: '烟台',
			value: 28
			},
			{
			name: '福州',
			value: 29
			},
			{
			name: '瓦房店',
			value: 30
			},
			{
			name: '即墨',
			value: 30
			},
			{
			name: '抚顺',
			value: 31
			},
			{
			name: '玉溪',
			value: 31
			},
			{
			name: '张家口',
			value: 31
			},
			{
			name: '阳泉',
			value: 31
			},
			{
			name: '莱州',
			value: 32
			},
			{
			name: '湖州',
			value: 32
			},
			{
			name: '汕头',
			value: 32
			},
			{
			name: '昆山',
			value: 33
			},
			{
			name: '宁波',
			value: 33
			},
			{
			name: '湛江',
			value: 33
			},
			{
			name: '揭阳',
			value: 34
			},
			{
			name: '荣成',
			value: 34
			},
			{
			name: '连云港',
			value: 35
			},
			{
			name: '葫芦岛',
			value: 35
			},
			{
			name: '常熟',
			value: 36
			},
			{
			name: '东莞',
			value: 36
			},
			{
			name: '河源',
			value: 36
			},
			{
			name: '淮安',
			value: 36
			},
			{
			name: '泰州',
			value: 36
			},
			{
			name: '南宁',
			value: 37
			},
			{
			name: '营口',
			value: 37
			},
			{
			name: '惠州',
			value: 37
			},
			{
			name: '江阴',
			value: 37
			},
			{
			name: '蓬莱',
			value: 37
			},
			{
			name: '韶关',
			value: 38
			},
			{
			name: '嘉峪关',
			value: 38
			},
			{
			name: '广州',
			value: 38
			},
			{
			name: '延安',
			value: 38
			},
			{
			name: '太原',
			value: 39
			},
			{
			name: '清远',
			value: 39
			},
			{
			name: '中山',
			value: 39
			},
			{
			name: '昆明',
			value: 39
			},
			{
			name: '寿光',
			value: 40
			},
			{
			name: '盘锦',
			value: 40
			},
			{
			name: '长治',
			value: 41
			},
			{
			name: '深圳',
			value: 41
			},
			{
			name: '珠海',
			value: 42
			},
			{
			name: '宿迁',
			value: 43
			},
			{
			name: '咸阳',
			value: 43
			},
			{
			name: '铜川',
			value: 44
			},
			{
			name: '平度',
			value: 44
			},
			{
			name: '佛山',
			value: 44
			},
			{
			name: '海口',
			value: 44
			},
			{
			name: '江门',
			value: 45
			},
			{
			name: '章丘',
			value: 45
			},
			{
			name: '肇庆',
			value: 46
			},
			{
			name: '大连',
			value: 47
			},
			{
			name: '临汾',
			value: 47
			},
			{
			name: '吴江',
			value: 47
			},
			{
			name: '石嘴山',
			value: 49
			},
			{
			name: '沈阳',
			value: 50
			},
			{
			name: '苏州',
			value: 50
			},
			{
			name: '茂名',
			value: 50
			},
			{
			name: '嘉兴',
			value: 51
			},
			{
			name: '长春',
			value: 51
			},
			{
			name: '胶州',
			value: 52
			},
			{
			name: '银川',
			value: 52
			},
			{
			name: '张家港',
			value: 52
			},
			{
			name: '三门峡',
			value: 53
			},
			{
			name: '锦州',
			value: 54
			},
			{
			name: '南昌',
			value: 54
			},
			{
			name: '柳州',
			value: 54
			},
			{
			name: '三亚',
			value: 54
			},
			{
			name: '自贡',
			value: 56
			},
			{
			name: '吉林',
			value: 56
			},
			{
			name: '阳江',
			value: 57
			},
			{
			name: '泸州',
			value: 57
			},
			{
			name: '西宁',
			value: 57
			},
			{
			name: '宜宾',
			value: 58
			},
			{
			name: '呼和浩特',
			value: 58
			},
			{
			name: '成都',
			value: 58
			},
			{
			name: '大同',
			value: 58
			},
			{
			name: '镇江',
			value: 59
			},
			{
			name: '桂林',
			value: 59
			},
			{
			name: '张家界',
			value: 59
			},
			{
			name: '宜兴',
			value: 59
			},
			{
			name: '北海',
			value: 60
			},
			{
			name: '西安',
			value: 61
			},
			{
			name: '金坛',
			value: 62
			},
			{
			name: '东营',
			value: 62
			},
			{
			name: '牡丹江',
			value: 63
			},
			{
			name: '遵义',
			value: 63
			},
			{
			name: '绍兴',
			value: 63
			},
			{
			name: '扬州',
			value: 64
			},
			{
			name: '常州',
			value: 64
			},
			{
			name: '潍坊',
			value: 65
			},
			{
			name: '重庆',
			value: 66
			},
			{
			name: '台州',
			value: 67
			},
			{
			name: '南京',
			value: 67
			},
			{
			name: '滨州',
			value: 70
			},
			{
			name: '贵阳',
			value: 71
			},
			{
			name: '无锡',
			value: 71
			},
			{
			name: '本溪',
			value: 71
			},
			{
			name: '克拉玛依',
			value: 72
			},
			{
			name: '渭南',
			value: 72
			},
			{
			name: '马鞍山',
			value: 72
			},
			{
			name: '宝鸡',
			value: 72
			},
			{
			name: '焦作',
			value: 75
			},
			{
			name: '句容',
			value: 75
			},
			{
			name: '北京',
			value: 79
			},
			{
			name: '徐州',
			value: 79
			},
			{
			name: '衡水',
			value: 80
			},
			{
			name: '包头',
			value: 80
			},
			{
			name: '绵阳',
			value: 80
			},
			{
			name: '乌鲁木齐',
			value: 84
			},
			{
			name: '枣庄',
			value: 84
			},
			{
			name: '杭州',
			value: 84
			},
			{
			name: '淄博',
			value: 85
			},
			{
			name: '鞍山',
			value: 86
			},
			{
			name: '溧阳',
			value: 86
			},
			{
			name: '库尔勒',
			value: 86
			},
			{
			name: '安阳',
			value: 90
			},
			{
			name: '开封',
			value: 90
			},
			{
			name: '济南',
			value: 92
			},
			{
			name: '德阳',
			value: 93
			},
			{
			name: '温州',
			value: 95
			},
			{
			name: '九江',
			value: 96
			},
			{
			name: '邯郸',
			value: 98
			},
			{
			name: '临安',
			value: 99
			},
			{
			name: '兰州',
			value: 99
			},
			{
			name: '沧州',
			value: 100
			},
			{
			name: '临沂',
			value: 103
			},
			{
			name: '南充',
			value: 104
			},
			{
			name: '天津',
			value: 105
			},
			{
			name: '富阳',
			value: 106
			},
			{
			name: '泰安',
			value: 112
			},
			{
			name: '诸暨',
			value: 112
			},
			{
			name: '郑州',
			value: 113
			},
			{
			name: '哈尔滨',
			value: 114
			},
			{
			name: '聊城',
			value: 116
			},
			{
			name: '芜湖',
			value: 117
			},
			{
			name: '唐山',
			value: 119
			},
			{
			name: '平顶山',
			value: 119
			},
			{
			name: '邢台',
			value: 119
			},
			{
			name: '德州',
			value: 120
			},
			{
			name: '济宁',
			value: 120
			},
			{
			name: '荆州',
			value: 127
			},
			{
			name: '宜昌',
			value: 130
			},
			{
			name: '义乌',
			value: 132
			},
			{
			name: '丽水',
			value: 133
			},
			{
			name: '洛阳',
			value: 134
			},
			{
			name: '秦皇岛',
			value: 136
			},
			{
			name: '株洲',
			value: 143
			},
			{
			name: '石家庄',
			value: 147
			},
			{
			name: '莱芜',
			value: 148
			},
			{
			name: '常德',
			value: 152
			},
			{
			name: '保定',
			value: 153
			},
			{
			name: '湘潭',
			value: 154
			},
			{
			name: '金华',
			value: 157
			},
			{
			name: '岳阳',
			value: 169
			},
			{
			name: '长沙',
			value: 175
			},
			{
			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],
			舟山: [122.207216, 29.985295],
			齐齐哈尔: [123.97, 47.33],
			盐城: [120.13, 33.38],
			赤峰: [118.87, 42.28],
			青岛: [120.33, 36.07],
			乳山: [121.52, 36.89],
			金昌: [102.188043, 38.520089],
			泉州: [118.58, 24.93],
			莱西: [120.53, 36.86],
			日照: [119.46, 35.42],
			胶南: [119.97, 35.88],
			南通: [121.05, 32.08],
			拉萨: [91.11, 29.97],
			云浮: [112.02, 22.93],
			梅州: [116.1, 24.55],
			文登: [122.05, 37.2],
			上海: [121.48, 31.22],
			攀枝花: [101.718637, 26.582347],
			威海: [122.1, 37.5],
			承德: [117.93, 40.97],
			厦门: [118.1, 24.46],
			汕尾: [115.375279, 22.786211],
			潮州: [116.63, 23.68],
			丹东: [124.37, 40.13],
			太仓: [121.1, 31.45],
			曲靖: [103.79, 25.51],
			烟台: [121.39, 37.52],
			福州: [119.3, 26.08],
			瓦房店: [121.979603, 39.627114],
			即墨: [120.45, 36.38],
			抚顺: [123.97, 41.97],
			玉溪: [102.52, 24.35],
			张家口: [114.87, 40.82],
			阳泉: [113.57, 37.85],
			莱州: [119.942327, 37.177017],
			湖州: [120.1, 30.86],
			汕头: [116.69, 23.39],
			昆山: [120.95, 31.39],
			宁波: [121.56, 29.86],
			湛江: [110.359377, 21.270708],
			揭阳: [116.35, 23.55],
			荣成: [122.41, 37.16],
			连云港: [119.16, 34.59],
			葫芦岛: [120.836932, 40.711052],
			常熟: [120.74, 31.64],
			东莞: [113.75, 23.04],
			河源: [114.68, 23.73],
			淮安: [119.15, 33.5],
			泰州: [119.9, 32.49],
			南宁: [108.33, 22.84],
			营口: [122.18, 40.65],
			惠州: [114.4, 23.09],
			江阴: [120.26, 31.91],
			蓬莱: [120.75, 37.8],
			韶关: [113.62, 24.84],
			嘉峪关: [98.289152, 39.77313],
			广州: [113.23, 23.16],
			延安: [109.47, 36.6],
			太原: [112.53, 37.87],
			清远: [113.01, 23.7],
			中山: [113.38, 22.52],
			昆明: [102.73, 25.04],
			寿光: [118.73, 36.86],
			盘锦: [122.070714, 41.119997],
			长治: [113.08, 36.18],
			深圳: [114.07, 22.62],
			珠海: [113.52, 22.3],
			宿迁: [118.3, 33.96],
			咸阳: [108.72, 34.36],
			铜川: [109.11, 35.09],
			平度: [119.97, 36.77],
			佛山: [113.11, 23.05],
			海口: [110.35, 20.02],
			江门: [113.06, 22.61],
			章丘: [117.53, 36.72],
			肇庆: [112.44, 23.05],
			大连: [121.62, 38.92],
			临汾: [111.5, 36.08],
			吴江: [120.63, 31.16],
			石嘴山: [106.39, 39.04],
			沈阳: [123.38, 41.8],
			苏州: [120.62, 31.32],
			茂名: [110.88, 21.68],
			嘉兴: [120.76, 30.77],
			长春: [125.35, 43.88],
			胶州: [120.03336, 36.264622],
			银川: [106.27, 38.47],
			张家港: [120.555821, 31.875428],
			三门峡: [111.19, 34.76],
			锦州: [121.15, 41.13],
			南昌: [115.89, 28.68],
			柳州: [109.4, 24.33],
			三亚: [109.511909, 18.252847],
			自贡: [104.778442, 29.33903],
			吉林: [126.57, 43.87],
			阳江: [111.95, 21.85],
			泸州: [105.39, 28.91],
			西宁: [101.74, 36.56],
			宜宾: [104.56, 29.77],
			呼和浩特: [111.65, 40.82],
			成都: [104.06, 30.67],
			大同: [113.3, 40.12],
			镇江: [119.44, 32.2],
			桂林: [110.28, 25.29],
			张家界: [110.479191, 29.117096],
			宜兴: [119.82, 31.36],
			北海: [109.12, 21.49],
			西安: [108.95, 34.27],
			金坛: [119.56, 31.74],
			东营: [118.49, 37.46],
			牡丹江: [129.58, 44.6],
			遵义: [106.9, 27.7],
			绍兴: [120.58, 30.01],
			扬州: [119.42, 32.39],
			常州: [119.95, 31.79],
			潍坊: [119.1, 36.62],
			重庆: [106.54, 29.59],
			台州: [121.420757, 28.656386],
			南京: [118.78, 32.04],
			滨州: [118.03, 37.36],
			贵阳: [106.71, 26.57],
			无锡: [120.29, 31.59],
			本溪: [123.73, 41.3],
			克拉玛依: [84.77, 45.59],
			渭南: [109.5, 34.52],
			马鞍山: [118.48, 31.56],
			宝鸡: [107.15, 34.38],
			焦作: [113.21, 35.24],
			句容: [119.16, 31.95],
			北京: [116.46, 39.92],
			徐州: [117.2, 34.26],
			衡水: [115.72, 37.72],
			包头: [110, 40.58],
			绵阳: [104.73, 31.48],
			乌鲁木齐: [87.68, 43.77],
			枣庄: [117.57, 34.86],
			杭州: [120.19, 30.26],
			淄博: [118.05, 36.78],
			鞍山: [122.85, 41.12],
			溧阳: [119.48, 31.43],
			库尔勒: [86.06, 41.68],
			安阳: [114.35, 36.1],
			开封: [114.35, 34.79],
			济南: [117, 36.65],
			德阳: [104.37, 31.13],
			温州: [120.65, 28.01],
			九江: [115.97, 29.71],
			邯郸: [114.47, 36.6],
			临安: [119.72, 30.23],
			兰州: [103.73, 36.03],
			沧州: [116.83, 38.33],
			临沂: [118.35, 35.05],
			南充: [106.110698, 30.837793],
			天津: [117.2, 39.13],
			富阳: [119.95, 30.07],
			泰安: [117.13, 36.18],
			诸暨: [120.23, 29.71],
			郑州: [113.65, 34.76],
			哈尔滨: [126.63, 45.75],
			聊城: [115.97, 36.45],
			芜湖: [118.38, 31.33],
			唐山: [118.02, 39.63],
			平顶山: [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],
			武汉: [114.31, 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 = {
			title: {
			// text: '全国主要城市空气质量 - 百度地图',
			// subtext: 'data from PM25.in',
			// sublink: 'http://www.pm25.in',
			left: 'center'
			},
			// legend: {
			// icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3'
			// },
			// color:['#000'],
			tooltip: {
			trigger: 'item'
			},
			bmap: {
			// center: [104.114129, 37.550339],
			zoom: 4, // 这里可以根据需要调整缩放级别
			roam: true,
			mapStyle: {
			styleJson: [{
			featureType: 'water',
			elementType: 'all',
			stylers: {
			color: '#d1d1d1'
			}
			},
			{
			featureType: 'land',
			elementType: 'all',
			stylers: {
			color: '#f3f3f3'
			}
			},
			{
			featureType: 'railway',
			elementType: 'all',
			stylers: {
			visibility: 'off'
			}
			},
			{
			featureType: 'highway',
			elementType: 'all',
			stylers: {
			color: '#fdfdfd'
			}
			},
			{
			featureType: 'highway',
			elementType: 'labels',
			stylers: {
			visibility: 'off'
			}
			},
			{
			featureType: 'arterial',
			elementType: 'geometry',
			stylers: {
			color: '#fefefe'
			}
			},
			{
			featureType: 'arterial',
			elementType: 'geometry.fill',
			stylers: {
			color: '#fefefe'
			}
			},
			{
			featureType: 'poi',
			elementType: 'all',
			stylers: {
			visibility: 'off'
			}
			},
			{
			featureType: 'green',
			elementType: 'all',
			stylers: {
			visibility: 'off'
			}
			},
			{
			featureType: 'subway',
			elementType: 'all',
			stylers: {
			visibility: 'off'
			}
			},
			{
			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: [{
			name: 'pm2.5',
			type: 'scatter',
			coordinateSystem: 'bmap',
			data: convertData(data),
			symbolSize: function(val) {
			return val[2] / 10;
			},
			encode: {
			value: 2
			},
			label: {
			formatter: '{b}',
			position: 'right',
			show: false
			},
			emphasis: {
			label: {
			show: true
			}
			}
			},
			{
			name: 'Top 5',
			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: 'right',
			show: true
			},
			itemStyle: {
			shadowBlur: 10,
			shadowColor: '#333'
			},
			emphasis: {
			scale: true
			},
			zlevel: 1
			}
			]
			};
			// 点击下面的朝代按钮
			dynastyBottomClick(id) {
			console.log(id);
			this.dynasty1Color = id;
			},
			onSearch(val) {
			this.isSearch = true;
			this.keyword = val.text;
			this.map.invalidateSize();


			// 设置点击事件监听
			myChart.on('click', (params) => {
			console.log(params.event.offsetX, params.event.offsetY);
			if (params.componentType === 'series') {

			var dataName = params.data.name; // 获取点击的数据名称
			var dataValue = params.data.value; // 获取点击的数据值
			// 在这里可以根据需要处理点击事件，比如弹出对应数据的详细信息等操作
			console.log('点击了', dataName, '数据，数值为', dataValue);
			// 这里可以编写触发时间获取对应数据信息的逻辑
			this.spaceTimeArr(params)
			}
			})

			option && myChart.setOption(option);

			})
			},
			// 时空地图点击时获取的数据
			spaceTimeArr(Arr) {
			// 修改 Vue 组件的数据，例如显示菜单导航
			// 时空地图的数据
			console.log(Arr);

			this.isEchTrue = true
			this.$nextTick(() => {
			this.isTop = (Arr.event.offsetY ) - .18 - (document.querySelector('.echartsTrue')
			.offsetHeight / 2.1 ) + 'px'
			this.isLeft = Arr.event.offsetX - (document.querySelector('.echartsTrue').offsetWidth /
			2.1 ) + 'px'
			console.log((document.querySelector('.echartsTrue').offsetHeight / 2 / 100));
			})

			},
			// 查看更多>>
			viewMoreClick() {
			uni.navigateTo({
			url: '/pages/character/detail'
			})
			},
			}
			}
			this.getDataList();
			},
			// 点击上面的朝代按钮
			SchoolClick(id) {
			console.log(id);
			},
			// 查看更多>>
			viewMoreClick() {
			uni.navigateTo({
			url: "/pages/character/detail",
			});
			},
			},
			};
			</script>

			<style>
			* {
			box-sizing: border-box;
			}
			.pageBox {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			}

			.echartsTrue::before {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			bottom: -.18rem;
			left: 1.2rem;
			/* background-color: red; */
			border-left: .2rem solid transparent;
			/* 左边透明 */
			border-right: .2rem solid transparent;
			/* 右边透明 */
			border-top: .2rem solid #fff;
			/* 顶部红色 */
			}
			.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: .36rem;
			padding: .08rem .13rem;
			font-size: .14rem;
			font-weight: 600;
			}
			::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: .12rem;
			color: #2C2C2C;
			line-height: 2;
			}
			.information li {
			font-size: 0.12rem;
			color: #2c2c2c;
			line-height: 2;
			}

			/* 地图上的左下角 */
			::v-deep .anchorBL {
			display: none;
			}
			/* 地图上的左下角 */
			::v-deep .anchorBL {
			display: none;
			}

			@media screen and (min-width:2560px)and (max-width:3840px) {
			.Search {
			/* width: 30%; */
			justify-content: flex-end;
			margin-right: .26rem;
			width: 4rem;
			}
			@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: .36rem;
			padding: .01rem;
			border-radius: .3rem !important;
			}
			.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: .14rem;
			padding: 0;
			border-radius: .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 .widget_style {
			display: flex;
			justify-content: flex-end;
			}

			.Search ::v-deep .uni-input-placeholder {
			font-size: .13rem;
			/* height: 100%; */
			line-height: 1;
			}
			.Search ::v-deep .uni-input-placeholder {
			font-size: 0.13rem;
			/* height: 100%; */
			line-height: 1;
			}

			.Search ::v-deep .uni-input-input {
			margin-left: .19rem;
			}
			}
			.Search ::v-deep .uni-input-input {
			margin-left: 0.19rem;
			}
			}

			#main {
			height: 6.2rem;
			}
			#main {
			flex: 1;
			}

			.Search {
			/* width: 30%; */
			justify-content: flex-end;
			margin-right: .26rem;
			width: 4rem;
			}
			.Search {
			/* width: 30%; */
			justify-content: flex-end;
			margin-right: 0.26rem;
			width: 4rem;
			}

			.Search ::v-deep .ffff {
			width: 3rem;
			height: .36rem;
			padding: .01rem;
			}
			.Search ::v-deep .ffff {
			width: 3rem;
			height: 0.36rem;
			padding: 0.01rem;
			}

			.Search ::v-deep .widget_button {
			width: 1rem;
			/* height: .3rem; */
			font-size: .14rem;
			padding: 0;
			background-color: #597AA5;
			}
			.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 .widget_style {
			display: flex;
			justify-content: flex-end;
			}

			.Search ::v-deep .uni-input-placeholder {
			font-size: .13rem;
			/* height: 100%; */
			line-height: 1;
			margin-left: .19rem;
			}
			</style>
			.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>