jp-xpgj-GA-file/src/projects/pension/views/Master/Health/ChartMap.vue

<template>
	<div>
		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-yjcsdat">
			<div class="lifeRecord">
				<div class="lifeTime" @click="selectDate" style="z-index: 100;">
					<div id='result' class="ui-alert"></div>
					<span v-text="listForm.day"></span>
				</div>
				<div class="lifeMap" id="container">
					<amap ref="amap"></amap>
				</div>
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Health from '@/apis/Master/health'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import NavMenu from '@/components/NavMenu.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	import Amap from '$project/components/Amap.vue'
	export default {
		name: 'MasterHealthChartMap',
		components: {
			Common,
			Loading,
			TopHeader,
			NavMenu,
			Amap
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '',

				listForm: {
					//names: this.$route.query.type,
					day: ''
				},

				typeList: '',

				chartsList: [],
			}
		},
		created() {
			if (this.$route.query.title) {
				this.pageTitle = this.$route.query.title;
			} else {
				this.pageTitle = '活动轨迹';
			}
			this.listForm.day = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
			this.typeList = ['lbs'];
		},
		methods: {
			//获取图表数据
			getChartList() {
				this.isLoading = true;
				API_Health.getLbsList(this.listForm).then(response => {
					this.isLoading = false;
					this.chartsList = response;

					this.setEcharts();
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//设置echart数据
			setEcharts() {
				var mapList = [];
				var list = this.chartsList[this.typeList[0]] ? this.chartsList[this.typeList[0]] : [];
				for (var j = 0; j < list.length; j++) {
					mapList.push({
						longtitude: list[j]['value'].split(',')[0],
						latitude: list[j]['value'].split(',')[1],
					});
				}
				this.initMap(mapList);
			},
			//赋地图数据
			initMap(list) {
				var pointArr = [];
				list.forEach(function(item, index) {
					pointArr.push([item.longtitude, item.latitude])
				})
				this.pointArr = pointArr;
				//触发组件显示地图
				this.$refs.amap.init(this.pointArr.reverse());
			},
			//选择时间
			selectDate() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"endYear": 2040,
					"endDate": new Date(),
					"value": _this.listForm.day
				});
				picker.show(function(rs) {
					_this.listForm.day = rs.text;
					_this.getChartList();
					picker.dispose();
				});
			},
			asynCallBack() {},
		},
		mounted() {
			this.getChartList();
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				menu_list: 'menu_list',
				common_menu_list: 'common_menu_list',
				persion_home_model: 'persion_home_model'
			})
		}
	}
</script>


<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>
<style scoped>
	.lifeMap {
		height: calc(100vh - 44px);
	}

	.lifeMap img {
		width: 100%;
		height: auto;
	}

	.lifeRecord {
		height: calc(100vh - 44px);
	}

	.lifeTime {
		background: #fff;
		width: 160px;
		height: 40px;
		position: absolute;
		border-radius: 20px;
		line-height: 40px;
		text-align: center;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		left: 50%;
		margin-left: -80px;
		font-size: 16px;
		top: 80px;
	}
</style>