zx_bms_uni/pages/deviceLocal/deviceLocal.nvue

<template>
	<view class="container-view">
		<map 
			id="myMap" 
			:longitude="longitude" 
			:latitude="latitude" 
			:scale="scale" 
			:markers="marker" 
			:polyline="polylines"
			:circles="circles" 
			@markertap="bindMarkertap" 
			show-location 
			enable-3D 
			show-compass 
			enable-overlooking
			:enable-satellite="mapParams.enableSatellite" 
			:enable-traffic="mapParams.enableTraffic"
			:style="'height:'+ screenHeight*2 +'rpx;width:100%'"
			@tap="bindTapMap">
		</map>
		<map-control :mapParams="mapParams" @changeParams="mapChange"></map-control>
		
		<view v-if="showInfo" class="battery-group">
			<view class="battery-item">
				<view class="map-top">
					<view class="map-cross">
						<view class="map-top-box">
							<text class="map-top-text">GPS</text>
							<view :class="gps > 0 ? 'map-top-i' : 'map-top-n'" />
							<view :class="gps > 1 ? 'map-top-i' : 'map-top-n'" />
							<view :class="gps > 2 ? 'map-top-i' : 'map-top-n'" />
							<view :class="gps > 3 ? 'map-top-i' : 'map-top-n'" />
							<view :class="gps > 4 ? 'map-top-i' : 'map-top-n'" />
						</view>
						<view class="map-top-box gsm-view">
							<text class="map-top-text">GSM</text>
							<view :class="gsm > 0 ? 'map-top-i' : 'map-top-n'" />
							<view :class="gsm > 1 ? 'map-top-i' : 'map-top-n'" />
							<view :class="gsm > 2 ? 'map-top-i' : 'map-top-n'" />
							<view :class="gsm > 3 ? 'map-top-i' : 'map-top-n'" />
							<view :class="gsm > 4 ? 'map-top-i' : 'map-top-n'" />
						</view>
					</view>
					<view class="map-top-box-1">
						<text class="map-top-text-1">{{ deviceInfo.quantity }}%</text>
						<image src="https://qiniu.bms16.com/FikqU8xHYKBjolOPZ7uc9ZNJXfHU" class="bottom-img"></image>
					</view>
					<view v-if="deviceInfo.quantity >= 20"
						:style="'width: ' + batteryWidth + 'rpx;right:' + (31 + (37 - batteryWidth)) + 'rpx'"
						class="battery_num_view"></view>
					<view v-if="deviceInfo.quantity < 20"
						:style="'width: ' + batteryWidth + 'rpx;right:' + (31 + (37 - batteryWidth)) + 'rpx'"
						class="battery_num_view_red"></view>
				</view>
				<view class="batter-info-group">
					<view class="flex-row flex-between">
						<text class="battery-desc">{{ i18n['名称'] + '：' + deviceInfo.name }}</text>
						<text class="battery-desc">{{ i18n['状态'] + '：' + status }}</text>
					</view>
					<view class="flex-row flex-between">
						<text class="battery-desc">{{ i18n['编号'] + '：' + macid }}</text>
						<text class="battery-desc">{{ i18n['设防状态'] + '：' + deviceInfo.protectState ? (deviceInfo.protectState == 1 ? i18n['设防'] : i18n['撤防']) : i18n['未知'] }}
						</text>
					</view>
					<view class="flex-row flex-between">
						<text class="battery-desc">{{ i18n['控制'] + '：' + deviceInfo.oilState == 1 ? i18n['已通电'] : i18n['已断电'] }}</text>
						<text class="battery-desc">
							{{ i18n['定位类型'] + '：' + deviceInfo.signalType == 0 ? i18n['北斗GPS'] : deviceInfo.signalType == 1 ? 'WIFI' : deviceInfo.signalType == 16 ? 'LBS' : i18n['未知'] }}
						</text>
					</view>
					<view class="flex-row flex-between">
						<text class="battery-desc">{{ i18n['当日里程'] + '：' + deviceInfo.day_mil }}</text>
						<text class="battery-desc">{{ i18n['总里程'] + '：' + deviceInfo.mil }}</text>
					</view>
					<view class="flex-row flex-between">
						<text class="battery-desc">
							{{i18n['电压'] + '：' +(deviceInfo.voltage ? deviceInfo.voltage + 'V' : i18n['未知']) +(deviceInfo.elecState ? (deviceInfo.elecState == 1 ? '（'+i18n['主电接通']+'）' : '（'+i18n['主电断开'] + '）') : '')}}
						</text>
						<text class="battery-desc" v-if="deviceInfo && deviceInfo.temp && deviceInfo.temp != ''">{{ i18n['温度'] + '：'+deviceInfo.temp + '℃' }}</text>
					</view>
					<text class="battery-desc">{{ i18n['通信'] + '：' + deviceInfo.heart_time ? formatTime(deviceInfo.heart_time) : i18n['未知'] }}</text>
					<text class="battery-desc">{{ i18n['定位'] + '：' + deviceInfo.gps_time ? formatTime(deviceInfo.gps_time) : i18n['未知'] }}</text>
					<text v-if="address != ''" class="battery-desc">{{ i18n['地址'] + '：' + address }}</text>
				</view>
			</view>
		</view>
		<view class="bottom-view" >
			<view class="bottom-center">
				<image :src="trace ? 'https://qiniu.bms16.com/FtYkQp4Nc2JD2SZ-_BjCI--DJWyi' : 'https://qiniu.bms16.com/FlRUmvzPd-BzkMAj04LwmX7UBrEP'"
					class="bottom-img"></image>
			</view>
			<view class="bottom-centent" style="width:750rpx;">
				<view class="bottom-item" @tap="bindTrackDialogOpen"> 
					<image
						:src="trackPoints.length == 0 ? 'https://qiniu.bms16.com/FqYJ3dMKvis19y8-onbNdRBEO5mT' : 'https://qiniu.bms16.com/FlH-IsasGFDH2QsRZixIFh7q7Tjv'"
						class="bottom-img"></image>
					<text class="bottom-text">{{i18n['轨迹']}}</text>
				</view>
				<view class="bottom-item" @tap="bindAlarmPopupOpen">
					<image
						:src="alarmList.length == 0 ? 'https://qiniu.bms16.com/FkVJmibJNj0CvoIrQmtz_wKotWpO' : 'https://qiniu.bms16.com/Fu4mutL6ECkBLManyT_cvZ6C8iAT'"
						class="bottom-img"></image>
					<text class="bottom-text">{{i18n['报警']}}</text>
				</view>
				<view class="bottom-item" @tap="bindNavigate">
					<image class="bottom-img"></image>
					<text class="bottom-text">{{i18n['导航']}}</text>
				</view>
				<view class="bottom-item" @tap="bindSendCommand" data-cmd="CLOSERELAY">
					<image src="https://qiniu.bms16.com/Fr-g3_g0T5aZ_sLQB7Xs1qRpxGAS" class="bottom-img"></image>
					<text class="bottom-text">{{i18n['断电']}}</text>
				</view>
				<view class="bottom-item" @tap="bindSendCommand" data-cmd="OPENRELAY">
					<image src="https://qiniu.bms16.com/Fv1eQozcTejKVdXbqkcea9syHOU3" class="bottom-img"></image>
					<text class="bottom-text">{{i18n['通电']}}</text>
				</view>
			</view>
			<image v-if="trackPoints.length != 0"
				:src="inPlay ? 'https://qiniu.bms16.com/FrTpj-jPSkQIsRjPOFE25lzJ4H7Z' : 'https://qiniu.bms16.com/Fl6EjlB1RufKn7QeKdBJC7dXxC9M'"
				class="play-img" @tap="bindPlay"></image>
			<image v-if="trackStopList.length != 0" src="https://qiniu.bms16.com/FoMwbUuD37w4Ja13-NXtm3hhkUgZ" class="stop-img"
				@tap="bindStopPopupOpen"></image>
			<view v-if="trackStopList.length != 0" class="stop-img" @tap="bindStopPopupOpen">
				<view class="tip-top">{{ trackStopList.length }}</view>
			</view>
			<image v-if="trackPoints.length != 0" src="https://qiniu.bms16.com/FqZcllaWWt2WJ3QGDt3wfKJM3wgP" class="close-img"
				@tap="bindCloseTrack"></image>
			<view @tap="loadLastGpsInfo" class="gps_last">
				<text class="text_view">{{i18n['最新']}}</text>
				<text class="text_view">GPS</text>
			</view>
			<image src="https://qiniu.bms16.com/Fg4wwTFjltC-0avrON1I0WLrIa82" class="fence-img" @tap="bindFencePopupOpen"></image>
			<view v-if="trace" class="trace-box">{{ i18n['追踪时间'] + '：' + tools.formatHourSeconds(traceTime) }}</view>
		</view>
		
		<view class="left-group">
			<view class="left-group-i">
				<image class="btn-ctr" src="https://qiniu.bms16.com/Fm-AhAqRdu14DZcE52vl85nw_vuD" @tap="moveToLocation"></image>
			</view>
		</view>

		<view v-if="trackPoints.length != 0" class="track_bottom">
			<text class="track_total_time">
				{{ i18n['时间'] + '：' + formatTimeNoSecond(trackDialogFrom.startTime / 1000) + i18n['至'] +  formatTimeNoSecond(trackDialogFrom.endTime / 1000) + i18n['共'] +  mileage_total + i18n['公里'] }}
			</text>
			<view class="track_slide flex-row flex-between">
				<slider @change="trackPlayChangeAdress" @changing="trackPlayChange" :value="nowPlayIndex" min="1"
					:max="totalTrackValue" style="width:600rpx;" />
				<view @tap="bindFastForward" class="flex-row fastForward">
					<image class="fastForward_img" src="https://qiniu.bms16.com/Fp6Kaid1eEQYqdGgwQD5TGZ1ir_7"></image>
					<text v-if="adjustSpeed == 0" class="fastForward_text">{{i18n['慢']}}</text>
					<text v-if="adjustSpeed == 1" class="fastForward_text">{{i18n['中']}}</text>
					<text v-if="adjustSpeed == 2" class="fastForward_text">{{i18n['快']}}</text>
				</view>
			</view>
		</view>
		<!-- 下方点击轨迹弹窗 -->
		<view v-if="trackDialogShow" class="popup-black" :style="'height:'+ screenHeight*2 +'rpx;width: 750rpx;'">
			<view class="popup-view">
				<view class="popup-top"><text style="font-size: 30rpx;">{{i18n['轨迹']}}</text></view>
				<view style="padding-left: 30rpx;padding-right: 30rpx;">
					<view class="flex-row" style="margin-bottom: 40rpx;">
						<text class="location_mark">{{i18n['定位类型'] + '：'}}</text>
						<text @tap="bindLocationType" data-index="1"
							:class="isLocationType == 1 ? 'sel_location_view' : 'un_location_view'">GPS</text>
						<text @tap="bindLocationType" data-index="2"
							:class="isLocationType == 2 ? 'sel_location_view' : 'un_location_view'">LBS</text>
						<text @tap="bindLocationType" data-index="3"
							:class="isLocationType == 3 ? 'sel_location_view' : 'un_location_view'">GPS+LBS</text>
					</view>
					<view class="flex-row" style="margin-bottom: 50rpx;align-items: center;">
						<view class="flex-row" style="margin-right: 60rpx;">
							<img class="time-img" src="https://qiniu.bms16.com/Ful5wl2uV3-Ys8PdeFDGZRgBm6DX" />
							<text style="font-size: 28rpx;">{{i18n['起始日期']}}</text>
						</view>
						<view style="height: 40rpx;">
							<time-picker :time="trackDialogFrom.formatStartTime" @confirmPickDate="confirmPickStart" />	
						</view>
					</view>
					<view class="flex-row" style="margin-bottom: 70rpx;align-items: center;">
						<view class="flex-row" style="margin-right: 60rpx;">
							<img class="time-img" src="https://qiniu.bms16.com/Ful5wl2uV3-Ys8PdeFDGZRgBm6DX" />
							<text style="font-size: 28rpx;">{{i18n['结束日期']}}</text>
						</view>
						<view style="height: 40rpx;">
							<time-picker :time="trackDialogFrom.formatEndTime" @confirmPickDate="confirmPickEnd" />
						</view>
					</view>
					<view class="day-btn flex-row">
						<view @tap="bindTrackTimeSelectToday"><text style="font-size: 28rpx;">{{i18n['今天']}}</text></view>
						<view @tap="bindTrackTimeSelectYesterday"><text style="font-size: 28rpx;">{{i18n['昨天']}}</text></view>
						<view @tap="bindTrackTimeSelectLastday"><text style="font-size: 28rpx;">{{i18n['前天']}}</text></view>
					</view>
				</view>
				<view class="bottom-btn flex-row">
					<view class="btn first-btn" @tap="bindTrackDialogClose"><text style="text-align: center;font-size: 28rpx;">{{i18n['取消']}}</text></view>
					<view class="btn second-btn" @tap="bindTrackDialogConfirm"><text style="text-align: center;font-size: 28rpx;color: #1989fa;">{{i18n['查询']}}</text></view>
				</view>
			</view>
		</view>
		
		<!-- 下方点击报警弹窗 -->
		<view v-if="alarmPopupShow" class="popup-black" :style="'height:'+ screenHeight*2 +'rpx;width:750rpx;'">
			<scroll-view class="alarm-view" style="width:750rpx;" :scroll-y="true">
				<view class="alarm-top flex-row">
					<view><text style="font-size: 30rpx;">{{i18n['报警']}}</text></view>
					<view @tap="bindAlarmPopupClose"><img style="width: 50rpx;height: 50rpx;" src="https://qiniu.bms16.com/FjhcWGFGsI56rLZRu7_OnhGtpoUs" />
					</view>
				</view>
				<view class="alarm-content flex-row flex-between" @tap="MoveToAlarm($event, { p: item })" :data-p="item"
					v-for="(item, index) in alarmList" :key="index">
					<view>
						<view class="flex-row" style="margin-bottom: 10rpx;">
							<text class="danger-view">{{ item.alarm_desc }}</text>
							<text class="primary-view">{{ item.speed +i18n['公里']+'/'+i18n['小时'] }}/</text>
						</view>
						<text style="font-size: 30rpx;">{{ item.formatTime }}</text>
					</view>
					<view class="alarm-right"><text style="font-size: 32rpx;">{{item.address}}</text></view>
				</view>
			</scroll-view>
		</view>
		<!-- 停留点 -->
		<view v-if="trackStopPopupShow" class="popup-black" :style="'height:'+ screenHeight*2 +'rpx;width:750rpx;'">
			<scroll-view class="stop-view" style="width:750rpx;">
				<view class="stop-top flex-row flex-between">
					<view><text style="font-size: 30rpx;">{{i18n['停留点']}}</text></view>
					<view @tap="bindStopPopupClose">
						<img style="width: 50rpx;height: 50rpx;" src="https://qiniu.bms16.com/FjhcWGFGsI56rLZRu7_OnhGtpoUs" />
					</view>
				</view>
				<view class="stop-content flex-row flex-between" @tap="MoveToStop($event, { p: item })" :data-p="item"
					v-for="(item, index) in trackStopList" :key="index">
					<view style="width: 350rpx;">
						<view class="flex-row" style="margin-bottom: 10rpx;">
							<text style="font-size: 30rpx;">{{ item.name }}</text>
							<view class="o-text"><text style="font-size: 30rpx;">{{ item.format_stop_time }}</text></view>
						</view>
						<view style="white-space: break-spaces;"><text style="font-size: 30rpx;">{{ item.time }} - {{ item.end_time }}</text></view>
					</view>
					<view class="stop-right"><text style="font-size: 30rpx;">{{item.address}}</text></view>
				</view>
			</scroll-view>
		</view>

		<!-- 右下角围栏 -->
		<view v-if="fencePopupShow" :style="'height:'+ screenHeight*2 +'rpx;width:750rpx;'">
			<scroll-view class="fence-view" style="width:750rpx;" :scroll-y="true">
				<view class="fence-top flex-row flex-between">
					<view class="flex-row">
						<view style="margin-right: 20rpx;"><text style="font-size: 30rpx;">{{i18n['围栏']}}</text></view>
						<view class="fence-btn flex-row" @tap="addFence"><img
							style="width: 30rpx;height: 30rpx;margin-right: 15rpx;"
							src="https://qiniu.bms16.com/FkjjRjSiRHnbPJk_2PhaiAcfwY1f" /><text style="font-size: 30rpx;color: #ffffff;">{{i18n['添加']}}</text></view>
					</view>
					<view @tap="bindFencePopupClose"><img style="width: 50rpx;height: 50rpx;" src="https://qiniu.bms16.com/FjhcWGFGsI56rLZRu7_OnhGtpoUs" />
					</view>
				</view>
				<view class="fence-content flex-row flex-between" @click="MoveToFence($event, { p: item })"
					:data-p="item" v-for="(item, index) in fenceList" :key="index">
					<view>
						<text class="van-cell-text">
							{{ item.name }}
						</text>
						<view class="flex-row">
							<text class="van-cell-text">{{ i18n['报警类型'] + '：' }}</text>
							<text v-if="item.type == 2" class="van-cell-text">{{i18n['出']}}</text>
							<text v-if="item.type == 3" class="van-cell-text">{{i18n['双向']}}</text>
							<text v-if="item.type == 0" class="van-cell-text">{{i18n['关闭']}}</text>
							<text v-if="item.type == 1" class="van-cell-text">{{i18n['进']}}</text>
							<!-- <text class="van-cell-text">{{ i18n['报警类型'] + '：' + item.type == 1 ? i18n['进'] : item.type == 2 ? i18n['出'] : item.type == 3 ? i18n['双向'] : i18n['关闭'] }}</text> -->
						</view>
					</view>
					<view class="fence-right"><text style="font-size: 32rpx;">{{item.radius + i18n['米']}}</text></view>
				</view>
			</scroll-view>
		</view>
		<!-- 围栏设置 -->
		<view v-if="selectFence != null" :style="'height:'+ screenHeight*2 +'rpx;width:750rpx;'">
			<scroll-view class="fence-view" style="width:750rpx;" :scroll-y="true">
				<view class="fence-top flex-row flex-between">
					<view style="margin-right: 20rpx;"><text style="font-size: 30rpx;">{{i18n['围栏设置']}}</text></view>
					<view @tap="bindFenceClose"><img style="width: 50rpx;height: 50rpx;" src="https://qiniu.bms16.com/FjhcWGFGsI56rLZRu7_OnhGtpoUs" /></view>
				</view>
				<view>
					<view class="fence-config flex-row flex-between" style="align-items: center;">
						<text style="font-size: 30rpx;">{{i18n['围栏名称']}}</text>
						<input type="text" :placeholder="i18n['请输入围栏名称']" @blur="onFenceNameChange" :value="selectFence.name"
							style="color: rgba(0, 0, 0, 1);font-size: 30rpx;width: 300rpx;text-align: right;" />
					</view>
					<view class="fence-config flex-row flex-between">
						<text style="font-size: 30rpx;">{{i18n['报警类型']}}</text>
						<view class="flex-row">
							<radio-group class="radio-group flex-row" @change="onFenceTypeChange">
								<radio :checked="selectFence.type ==1" value="1" /><text style="font-size: 30rpx;">{{i18n['进']}}</text>
								<radio :checked="selectFence.type ==2" value="2" /><text style="font-size: 30rpx;">{{i18n['出']}}</text>
								<radio :checked="selectFence.type ==3" value="3" /><text style="font-size: 30rpx;">{{i18n['双向']}}</text>
								<radio :checked="selectFence.type ==0" value="0" /><text style="font-size: 30rpx;">{{i18n['关闭']}}</text>
							</radio-group>
						</view>
					</view>
					<view class="fence-config flex-row flex-between">
						<text style="font-size: 30rpx;">{{i18n['围栏半径']}}</text>
						<view style="width: 500rpx;" class="flex-row flex-around">
							<image src="https://qiniu.bms16.com/Fgthw9jHOk5KP9wfiOEv_6iwCpt5" style="width: 40rpx; height: 40rpx"
								@tap="onFenceRadiusMinus"></image>
							<slider :value="selectFence.radius" @change="onFenceRadiusChange"
								@changing="onFenceRadiusChange" min="1" max="10000" show-value block-size="21" />
							<image src="https://qiniu.bms16.com/FnL1ghroP_oJRk1_0PpUXONI533U" style="width: 40rpx; height: 40rpx"
								@tap="onFenceRadiusPlus"></image>
						</view>
					</view>
					<view class="fence-config">
						<button class="save-btn" style="width:700rpx;" @tap="bindFenceSave">{{i18n['保存']}}</button>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
<script>
	import zh from '@/locale/zh-Hans.json'; //简体中文
	import en from '@/locale/en.json'; //英文
	import mapControl from '@/component/mapControl/mapControl';
	import timePicker from '@/component/time-pickers/time-pickers';
	// pages/deviceLocal/deviceLocal.js
	const config = require('../../common/config.js');
	const common = require('../../common/common.js');
	const commonEn = require('../../common/common-nv.js');
	var http = require('../../common/http.js');
	var storage = require('../../common/storage.js');
	var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
	var qqmapsdk;
	export default {
		components: {
			mapControl,
			timePicker
		},
		data() {
			return {
				id: '',
				deviceInfo: {
					quantity: '',
					name: '',
					protectState: false,
					oilState: 0,
					signalType: 0,
					day_mil: '',
					mil: '',
					voltage: false,
					elecState: false,
					temp: '',
					heart_time: false,
					gps_time: false
				},

				marker: [],
				mileage_total: 0,
				deviceMarker: [],
				trackMarker: [],
				alarmMarker: [],
				playMarker: [],
				endSlide: 0,
				polylines: [],
				trackPoints: [],
				trackStopList: [],
				batteryWidth: 37,
				alarmList: [],
				adjustSpeed: 1,
				scale: 8,
				speedTime: 200,

				trackDialogFrom: {
					startTime: new Date().getTime(),
					endTime: new Date().getTime() + 3600,
					// startTime: new Date(new Date().getTime() - 3600000).getTime(),
					// endTime: new Date().getTime(),
					// formatStartTime: common.formatDateTime(new Date(new Date().getTime() - 3600000).getTime()),
					// formatEndTime: common.formatDateTime(new Date().getTime()),
					formatStartTime: common.formatDateTime(new Date().getTime()),
					formatEndTime: common.formatDateTime(new Date(new Date().getTime() + 3600000).getTime())
				},

				latitude_my: null,
				longitude_my: null,
				trackDialogShow: false,
				selectTime: new Date().getTime(),
				selectTimeType: '',
				alarmPopupShow: false,
				trackStopPopupShow: false,
				timeSelectShow: false,
				inPlay: false,
				playTimer: null,
				nowPlayIndex: 0,
				totalTrackValue: 0,
				currentTrackValue: 0,
				macid: '',
				gps: 0,
				gsm: 0,
				status: '',
				address: '',
				showInfo: true,
				iconList: [],
				locationTimer: null,
				longitude: null,
				latitude: null,
				trace: false,
				tracePoints: [],
				traceTime: 0,
				traceTimer: null,
				fencePopupShow: false,
				fenceList: [],
				isLocationType: 1,
				circles: [],
				selectFence: null,

				mapParams: {
					enableSatellite: false,
					// 是否开启卫星图
					enableTraffic: false // 是否开启实时路况
				},

				isShowGPS: false,

				// locationInfo:{}
				locationType: '',

				locationAdress: '',
				locationGpsType: '',
				locationGpsAdress: '',
				gpsMarker: [],
				flase: '',
				screenHeight: 0,
				screenWidth: 0,
				i18n: {},
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// this.i18n = en
			this.i18n = zh
			this.screenHeight = uni.getSystemInfoSync().windowHeight + 40
			this.screenWidth = uni.getSystemInfoSync().windowWidth
			this.loadIconList();
			this.readyDeviceInfo();
			this.loadAlarmList();
			this.loadFenceList();
			this.locationLoop(true);
			//this.loadLastGpsInfo()
			this.locationTimer = setInterval(this.locationLoop, 10000);
			//获取当前位置
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.latitude_my = res.latitude
					this.longitude_my = res.longitude
				}
			});
			setTimeout(function() {
				this.mapCtx = uni.createMapContext('myMap');
			}, 500);
			// this.mapCtx = uni.createMapContext('myMap');
		},
		onHide: function() {},
		onShow: function() {},
		onUnload: function() {
			clearInterval(this.locationTimer);
			clearInterval(this.traceTimer);
			clearInterval(this.playTimer);
		},
		methods: {
			formatTime (datetime) {
				if (!datetime) return '';
				var date = new Date(datetime * 1000);
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				var day = date.getDate()
				var hour = date.getHours()
				var minute = date.getMinutes()
				var second = date.getSeconds()
				return year + '-' + this.formatNumber(month) + '-' + this.formatNumber(day) + ' ' + this.formatNumber(hour) + ':' + this.formatNumber(minute) + ':' + this.formatNumber(second);
			},
			
			formatNumber(n) {
				n = n.toString()
				return n[1] ? n : '0' + n
			},
			
			formatTimeNoSecond(datetime) {
				if (!datetime) return '';
				var date = new Date(datetime * 1000);
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				var day = date.getDate()
				var hour = date.getHours()
				var minute = date.getMinutes()
				var second = date.getSeconds()
				
				return year + '-' + this.formatNumber(month) + '-' + this.formatNumber(day) + ' ' + this.formatNumber(hour) + ':' + this.formatNumber(minute);
			},
			
			loadIconList: function() {
				this.iconList = storage.getIconList();
				if (!this.iconList) {
					http.postApi(config.API_BATTERY_ICON_LIST, {}, (resp) => {
						if (resp.data.code === 200) {
							this.iconList = resp.data.data.list;
							storage.setIconList(resp.data.data.list);
						} else {
							commonEn.simpleToast(this,resp.data.msg);
						}
					});
				}
			},

			onStartTimeChange(e) {
				this.trackDialogFrom.startTime = e.detail.value;
				// 更新结束时间的最小值，确保结束时间不早于开始时间
				this.trackDialogFrom.endTime = Math.max(this.trackDialogFrom.endTime, this.trackDialogFrom.startTime);
				// trackDialogFrom.formatStartTime
				// trackDialogFrom.formatEndTime
			},

			onEndTimeChange(e) {
				this.trackDialogFrom.endTime = e.detail.value;
			},

			confirmPickStart(dataStr) {
				this.trackDialogFrom.formatStartTime = dataStr
			},
			
			confirmPickEnd(dataStr) {
				this.trackDialogFrom.formatEndTime = dataStr
			},

			trackPlayChange(e) {
				var index = e.detail.value;
				this.nowPlayIndex = index
				this.playLoop();
			},

			bindLocationType(e) {
				const index = e.currentTarget.dataset.index;
				this.isLocationType = index
			},

			trackPlayChangeAdress(e) {
				var index = e.detail.value;
				this.nowPlayIndex = index
				const me = this;
				this.playLoop();
				if (me.playMarker.length > 0) {
					// qqmapsdk.reverseGeocoder({
					//   location: {
					//     latitude: me.data.playMarker[0].latitude,
					//     longitude: me.data.playMarker[0].longitude
					//   },
					//   success: function (res) {
					//     const formatted_addresses = res.result.formatted_addresses
					//     const address = res.result.address
					//     let ps = '';
					//     let tmp_addr = '地址: ' + address
					//     while (tmp_addr.length > 15) {
					//       ps += tmp_addr.substring(0, 15) + "\n";
					//       tmp_addr = tmp_addr.substring(15);
					//     }
					//     ps += tmp_addr
					//     var playMark = me.data.playMarker
					//     playMark[0].callout.content += ps
					//     me.setData({
					//       playMarker: playMark
					//     })
					//     me.setMarkers()
					//   }
					// })

					const me = this;
					const pData = {
						lng: me.playMarker[0].longitude,
						lat: me.playMarker[0].latitude,
						pi: 'wx_deviceLocal'
					};
					http.postApi(config.API_MAP_REGEO, pData, function(resp) {
						if (resp.data.code === 200) {
							var jsonData = resp.data.data.data;
							if (jsonData.code === 0) {
								const address = jsonData.address;
								let ps = '';
								let tmp_addr = me.i18n['地址']+':'+ address;
								while (tmp_addr.length > 15) {
									ps += tmp_addr.substring(0, 15) + '\n';
									tmp_addr = tmp_addr.substring(15);
								}
								ps += tmp_addr;
								var playMark = me.playMarker;
								playMark[0].callout.content += ps;
								me.playMarker = playMark
							}
						}
					});
				}
			},

			bindFastForward() {
				if (this.adjustSpeed === 0) {
					this.adjustSpeed = 1
					this.speedTime = 400
					clearInterval(this.playTimer);
					this.playTimer = setInterval(this.playLoop, this.speedTime);
				} else if (this.adjustSpeed === 1) {
					this.adjustSpeed = 2
					this.speedTime = 200
					clearInterval(this.playTimer);
					this.playTimer = setInterval(this.playLoop, this.speedTime);
				} else if (this.adjustSpeed === 2) {
					this.adjustSpeed = 0
					this.speedTime = 600
					clearInterval(this.playTimer);
					this.playTimer = setInterval(this.playLoop, this.speedTime);
				}
			},

			loadAlarmList() {
				commonEn.loading(this);
				const me = this
				const deviceInfo = storage.getSelectedDeviceInfo();
				http.postApi(
					config.API_GPS_ALARM, {
						macid: deviceInfo.mac_id
					},
					(resp) => {
						uni.hideLoading();
						if (resp.data.code === 200) {
							var alarmList = resp.data.data.list;
							alarmList.forEach((p, i) => {
								alarmList[i].formatTime = common.formatDateTime(p.send_time * 1000);
								qqmapsdk.reverseGeocoder({
									location: {
										latitude: p.latitude,
										longitude: p.longitude
									},
									success: (res) => {
										const formatted_addresses = res.result.formatted_addresses;
										const address = res.result
										.address; //+ formatted_addresses.recommend
										let ps = '';
										let tmp_addr = me.i18n['地址']+':'+ address;
										while (tmp_addr.length > 15) {
											ps += tmp_addr.substring(0, 15) + '\n';
											tmp_addr = tmp_addr.substring(15);
										}
										ps += tmp_addr;
										alarmList[i].address = address;
										alarmList[i].ps = ps;
										this.alarmList = alarmList
									}
								});
							});
							this.alarmList = alarmList
						} else {
							commonEn.simpleToast(this,resp.data.msg);
						}
					}
				);
			},

			readyDeviceInfo() {
				const me = this;
				// 实例化API核心类
				qqmapsdk = new QQMapWX({
					key: config.QQ_MAP_KEY
				});
				const deviceInfo = storage.getSelectedDeviceInfo();
				if (deviceInfo) {
					// this.batteryWidth = deviceInfo.quantity/100*37
					uni.setNavigationBarTitle({
						title: deviceInfo.mac_id
					});
					if (parseInt(deviceInfo.expire) === 1) {
						commonEn.simpleToast(me,me.i18n['设备到期']);
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					}
				} else {
					clearInterval(this.locationTimer);
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 1500);
				}
			},

			setMarkers() {
				this.marker = this.deviceMarker.concat(this.trackMarker, this.alarmMarker, this.playMarker, this.gpsMarker)
			},

			setPolylines() {
				var polylines = [{
					points: this.trackPoints,
					color: '#1989FADD',
					width: 5,
					arrowLine: true
				}];
				/*, {
				           points: this.data.trackPoints.slice(0,this.data.nowPlayIndex+1),
				           color: '#F56C6CDD',
				           width: 3,
				         }]*/
				if (this.trace) {
					polylines.push({
						points: this.tracePoints,
						color: '#DD4C4CDD',
						width: 3,
						arrowLine: true
					});
				}
				this.polylines = polylines
			},

			bindTrackDialogOpen() {
				this.trackDialogShow = true
			},

			// 计算里程数
			calculateMileage(history) {
				let mileage = 0;
				for (let i = 0; i < history.length - 1; i++) {
					mileage += parseInt(common.getFlatternDistance(history[i].longitude, history[i].latitude, history[i +
						1].longitude, history[i + 1].latitude));
				}
				var mileage_total = mileage == 0 ? 0 : (mileage / 1000).toFixed(2);
				this.mileage_total = mileage_total
			},

			getCurrentMil(mileage, i, history) {
				//var mileage = mileage_current
				mileage += parseInt(common.getFlatternDistance(history[i].longitude, history[i].latitude, history[i + 1]
					.longitude, history[i + 1].latitude));
				return mileage;
			},

			loadTotalMil() {
				const deviceInfo = storage.getSelectedDeviceInfo();
				http.postApi(
					config.API_SHOW_MIL, {
						macid: deviceInfo.mac_id,
						location_type: this.isLocationType,
						from: parseInt(this.trackDialogFrom.startTime / 1000),
						to: parseInt(this.trackDialogFrom.endTime / 1000)
					},
					(resp) => {
						if (resp.data.code === 200) {
							this.mileage_total = resp.data.data.distance
						} else {
							commonEn.simpleToast(this,resp.data.msg);
						}
					}
				);
			},

			bindTrackDialogConfirm() {
				var me = this;
				this.bindTrackDialogClose();
				this.inPlay = false
				clearInterval(this.playTimer);
				commonEn.loading(this);
				const deviceInfo = storage.getSelectedDeviceInfo();
				http.postApi(
					config.API_GPS_TRACK, {
						macid: deviceInfo.mac_id,
						location_type: this.isLocationType,
						from: parseInt(this.trackDialogFrom.startTime / 1000),
						to: parseInt(this.trackDialogFrom.endTime / 1000)
					},
					(resp) => {
						this.loadTotalMil();
						uni.hideLoading();
						if (resp.data.code === 200) {
							if (!resp.data.data.points || resp.data.data.points.length === 0) {
								commonEn.simpleToast(me,me.i18n['当前未有轨迹']);
								return;
							}
							// this.calculateMileage(resp.data.data.points)
							var points = [];
							var trackMarker = [];
							var trackStopList = [];
							var n = 1;
							this.totalTrackValue = resp.data.data.points.length
							var mileage = 0;
							resp.data.data.points.forEach((p, i) => {
								//移动坐标点
								if (resp.data.data.points.length - 1 > i) {
									mileage = this.getCurrentMil(mileage, i, resp.data.data.points);
								}
								points.push({
									latitude: parseFloat(p.latitude),
									longitude: parseFloat(p.longitude),
									time: p.time,
									speed: p.speed,
									voltage: p.voltage,
									time: p.time,
									mileage: (mileage / 1000).toFixed(2),
									stop_time: p.stop_time
								});
								//起点
								if (i === 0) {
									trackStopList.push({
										name: me.i18n['起点'],
										latitude: parseFloat(p.latitude),
										longitude: parseFloat(p.longitude),
										time: p.time,
										end_time: common.formatDateTime(new Date(p.time).getTime() + p
											.stop_time * 1000),
										stop_time: p.stop_time,
										format_stop_time: commonEn.formatSeconds(me,p.stop_time),
										address: ''
									});
									//mark弹出框坐标
									trackMarker.push({
										id: 0,
										latitude: p.latitude,
										longitude: p.longitude,
										name: '',
										iconPath: 'https://qiniu.bms16.com/FudnX-2lAHteUZHxpH6cAXFESNVs',
										width: 28,
										height: 35,
										zIndex: 2,
										callout: {
											content: '\u8D77\u70B9\n\u505C\u7559: ' +
												commonEn.formatSeconds(me,p.stop_time) +
												'\n' +
												me.i18n['开始'] + ':' +
												p.time +
												'\n' +
												me.i18n['结束'] + ':' +
												common.formatDateTime(new Date(p.time).getTime() + p
													.stop_time * 1000) +
												'\n',
											padding: 10,
											borderRadius: 4,
											boxShadow: '4px 8px 16px 0 rgba(0,0,0,0.3)',
											display: 'BYCLICK'
										}
									});
									const pData = {
										lng: parseFloat(p.longitude),
										lat: parseFloat(p.latitude),
										pi: 'wx_deviceLocal'
									};
									http.postApi(config.API_MAP_REGEO, pData, function(resp) {
										if (resp.data.code === 200) {
											var jsonData = resp.data.data.data;
											if (jsonData.code === 0) {
												const address = jsonData.address;
												let ps = '';
												let tmp_addr = me.i18n['地址'] + ':' + address;
												while (tmp_addr.length > 15) {
													ps += tmp_addr.substring(0, 15) + '\n';
													tmp_addr = tmp_addr.substring(15);
												}
												ps += tmp_addr;
												trackMarker[0].callout.content += ps;
												trackStopList[0].address = address;
												me.trackMarker = trackMarker
												me.trackStopList = trackStopList
												me.setMarkers();
											}
										}
									});

									// qqmapsdk.reverseGeocoder({
									//   location: {
									//     latitude: parseFloat(p.latitude),
									//     longitude: parseFloat(p.longitude)
									//   },
									//   success: (res) => {
									//     const formatted_addresses = res.result.formatted_addresses
									//     const address = res.result.address + formatted_addresses.recommend
									//     let ps = '';
									//     let tmp_addr = '地址: ' + address
									//     while (tmp_addr.length > 15) {
									//       ps += tmp_addr.substring(0, 15) + "\n";
									//       tmp_addr = tmp_addr.substring(15);
									//     }
									//     ps += tmp_addr
									//     trackMarker[0].callout.content += ps
									//     trackStopList[0].address = address
									//     this.setData({
									//       trackMarker: trackMarker,
									//       trackStopList: trackStopList,
									//     })
									//     this.setMarkers()
									//   }
									// })
								} else if (p.stop_time > 300 && i !== resp.data.data.points.length - 1) {
									//地图设置mark停留点
									trackStopList.push({
										name: 'P' + n,
										latitude: parseFloat(p.latitude),
										longitude: parseFloat(p.longitude),
										time: p.time,
										end_time: common.formatDateTime(new Date(p.time).getTime() + p
											.stop_time * 1000),
										stop_time: p.stop_time,
										format_stop_time: commonEn.formatSeconds(me,p.stop_time),
										address: ''
									});
									//mark弹出框
									trackMarker.push({
										id: i,
										latitude: parseFloat(p.latitude),
										longitude: parseFloat(p.longitude),
										name: '',
										iconPath: 'https://qiniu.bms16.com/FtYXEurXCr7Ul2A1J8Kgn4BqF8Z7',
										width: 28,
										height: 35,
										zIndex: 1,
										callout: {
											content: 'P' +
												n +
												'\n' +
												me.i18n['停留'] + ':' +
												commonEn.formatSeconds(me,p.stop_time) +
												'\n' +
												me.i18n['开始'] + ':' +
												p.time +
												'\n' +
												me.i18n['结束'] + ':' +
												common.formatDateTime(new Date(p.time).getTime() + p
													.stop_time * 1000) +
												'\n',
											padding: 10,
											borderRadius: 4,
											boxShadow: '4px 8px 16px 0 rgba(0,0,0,0.3)',
											display: 'BYCLICK'
										}
									});
									var i = n;
									qqmapsdk.reverseGeocoder({
										location: {
											latitude: parseFloat(p.latitude),
											longitude: parseFloat(p.longitude)
										},
										success: (res) => {
											console.log(res);
											const formatted_addresses = res.result
												.formatted_addresses;
											const address = res.result.address +
												formatted_addresses.recommend;
											let ps = '';
											let tmp_addr = me.i18n['地址'] + ':' + address;
											while (tmp_addr.length > 15) {
												ps += tmp_addr.substring(0, 15) + '\n';
												tmp_addr = tmp_addr.substring(15);
											}
											ps += tmp_addr;
											trackMarker[i].callout.content += ps;
											trackStopList[i].address = address;
											this.trackMarker = trackMarker
											this.trackStopList =trackStopList
											this.setMarkers();
										}
									});
									n++;
								}
							});
							//设置终点
							trackStopList.push({
								name: me.i18n['终点'],
								latitude: parseFloat(points[points.length - 1].latitude),
								longitude: parseFloat(points[points.length - 1].longitude),
								time: points[points.length - 1].time,
								end_time: common.formatDateTime(new Date(points[points.length - 1].time)
									.getTime() + points[points.length - 1].stop_time * 1000),
								stop_time: points[points.length - 1].stop_time,
								format_stop_time: commonEn.formatSeconds(me,points[points.length - 1].stop_time),
								address: ''
							});
							trackMarker.push({
								id: points.length - 1,
								latitude: points[points.length - 1].latitude,
								longitude: points[points.length - 1].longitude,
								name: '',
								iconPath: '/static/resource/images/end_point.png',
								width: 28,
								height: 35,
								zIndex: 2,
								callout: {
									content: '\u7EC8\u70B9\n\u505C\u7559: ' +
										commonEn.formatSeconds(me,points[points.length - 1].stop_time) +
										'\n' +
										me.i18n['开始'] + ':' +
										points[points.length - 1].time +
										'\n' +
										me.i18n['结束'] + ':' +
										common.formatDateTime(new Date(points[points.length - 1].time)
										.getTime() + points[points.length - 1].stop_time * 1000) +
										'\n',
									padding: 10,
									borderRadius: 4,
									boxShadow: '4px 8px 16px 0 rgba(0,0,0,0.3)',
									display: 'BYCLICK'
								}
							});
							qqmapsdk.reverseGeocoder({
								location: {
									latitude: parseFloat(points[points.length - 1].latitude),
									longitude: parseFloat(points[points.length - 1].longitude)
								},
								success: (res) => {
									console.log(res);
									const formatted_addresses = res.result.formatted_addresses;
									const address = res.result.address + formatted_addresses.recommend;
									let ps = '';
									let tmp_addr = me.i18n['地址'] + ':' + address;
									while (tmp_addr.length > 15) {
										ps += tmp_addr.substring(0, 15) + '\n';
										tmp_addr = tmp_addr.substring(15);
									}
									ps += tmp_addr;
									trackMarker[n].callout.content += ps;
									trackStopList[n].address = address;
									this.trackMarker = trackMarker
									this.trackStopList = trackStopList
									this.setMarkers();
								}
							});
							var deviceMarker = this.deviceMarker;
							//deviceMarker[0].callout.display = 'BYCLICK'=
							this.trackPoints= points
							this.trackMarker= trackMarker
							this.deviceMarker= deviceMarker
							this.trackStopList= trackStopList
							this.nowPlayIndex= 0
							this.playMarker= []
							this.setMarkers();
							this.setPolylines();
							// this.mapCtx.scale = 8
							var map = uni.createMapContext('myMap');
							map.includePoints({
								points: points,
								padding: [10, 10, 10, 10]
							});
							this.scale = 13
						} else {
							commonEn.simpleToast(this,resp.data.msg);
						}
					}
				);
			},

			bindTrackDialogClose() {
				this.trackDialogShow = false
			},

			bindTrackStartTimeSelect(e) {
				this.selectTime = this.trackDialogFrom.formatStartTime
				this.selectTimeType = 'track_start'
				// this.bindTimeSelectOpen();
			},

			bindTrackEndTimeSelect() {
				this.selectTime = this.trackDialogFrom.formatEndTime
				this.selectTimeType = 'track_end'
				// this.bindTimeSelectOpen();
			},

			bindTrackTimeSelectToday() {
				this.trackDialogFrom = Object.assign(this.trackDialogFrom, {
					startTime: new Date(new Date().toLocaleDateString()).getTime(),
					formatStartTime: common.formatDateTime(new Date(new Date().toLocaleDateString())
						.getTime()),
					endTime: new Date().getTime(),
					formatEndTime: common.formatDateTime(new Date().getTime())
				})
				this.bindTrackDialogConfirm();
			},

			bindTrackTimeSelectYesterday() {
				this.trackDialogFrom = Object.assign(this.trackDialogFrom, {
					startTime: new Date(new Date().toLocaleDateString()).getTime() - 86400 * 1000,
					formatStartTime: common.formatDateTime(new Date(new Date().toLocaleDateString())
						.getTime() - 86400 * 1000),
					endTime: new Date(new Date().toLocaleDateString()).getTime() - 1,
					formatEndTime: common.formatDateTime(new Date(new Date().toLocaleDateString())
						.getTime() - 1)
				})
				this.bindTrackDialogConfirm();
			},

			bindTrackTimeSelectLastday() {
				this.trackDialogFrom = Object.assign(this.trackDialogFrom, {
					startTime: new Date(new Date().toLocaleDateString()).getTime() - 2880 * 60 * 1000,
					formatStartTime: common.formatDateTime(new Date(new Date().toLocaleDateString())
						.getTime() - 2880 * 60 * 1000),
					endTime: new Date(new Date().toLocaleDateString()).getTime() - 86400 * 1000 - 1,
					formatEndTime: common.formatDateTime(new Date(new Date().toLocaleDateString())
						.getTime() - 86400 * 1000 - 1)
				});
				this.bindTrackDialogConfirm();
			},

			bindTimeSelectConfirm(event) {
				switch (this.selectTimeType) {
					case 'track_start':
						this.trackDialogFrom = Object.assign(this.trackDialogFrom, {
							startTime: event.detail,
							formatStartTime: common.formatDateTime(event.detail)
						}),
						this.selectTimeType = ''
						break;
					case 'track_end':
						this.trackDialogFrom = Object.assign(this.trackDialogFrom, {
							endTime: event.detail,
							formatEndTime: common.formatDateTime(event.detail)
						}),
						selectTimeType = ''
						break;
				}
				this.bindTimeSelectClose();
			},

			bindTimeSelectOpen() {
				this.timeSelectShow = true
			},

			bindTimeSelectClose() {
				this.timeSelectShow = false
			},

			bindStopPopupOpen() {
				this.trackStopPopupShow = true
			},

			bindStopPopupClose() {
				this.trackStopPopupShow = false
			},

			MoveToStop(event, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(event, _dataset);
				/* ---处理dataset end--- */
				var map = uni.createMapContext('myMap');
				this.latitude = event.currentTarget.dataset.p.latitude,
				this.longitude = event.currentTarget.dataset.p.longitude
				/*map.moveToLocation({
        latitude: event.currentTarget.dataset.p.latitude,
        longitude: event.currentTarget.dataset.p.longitude
      })*/
			},

			bindAlarmPopupOpen() {
				this.alarmPopupShow = true
			},

			bindAlarmPopupClose() {
				this.alarmPopupShow = false 
				this.alarmMarker = []
				this.setMarkers();
			},

			MoveToAlarm(event, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(event, _dataset);
				/* ---处理dataset end--- */
				var map = uni.createMapContext('myMap');
				var me = this
				var alarmMarker = [{
					id: 0,
					latitude: event.currentTarget.dataset.p.latitude,
					longitude: event.currentTarget.dataset.p.longitude,
					name: '',
					iconPath: '/static/resource/images/alarm.png',
					width: 28,
					height: 35,
					zIndex: 10,
					callout: {
						content: event.currentTarget.dataset.p.alarm_desc +
							'\n' +
							me.i18n['时间'] + ':' +
							event.currentTarget.dataset.p.formatTime +
							'\n' +
							me.i18n['速度'] + ':' +
							event.currentTarget.dataset.p.speed +
							me.i18n['公里'] + '/' + me.i18n['小时'] +
							event.currentTarget.dataset.p.ps +
							'\n',
						padding: 10,
						borderRadius: 4,
						boxShadow: '4px 8px 16px 0 rgba(0,0,0,0.3)',
						display: 'ALWAYS'
					}
				}];
				this.alarmMarker = alarmMarker
				this.latitude = event.currentTarget.dataset.p.latitude
				this.longitude = event.currentTarget.dataset.p.longitude
				this.setMarkers();
			},

			playLoop() {
				if (this.nowPlayIndex >= this.trackPoints.length - 1) {
					this.inPlay = false
					clearInterval(this.playTimer);
					return;
				}
				this.showInfo = false
				var map = uni.createMapContext('myMap');
				var leng = Math.sqrt(
					Math.pow(Math.abs(this.trackPoints[this.nowPlayIndex + 1].longitude - this.trackPoints[this
						.nowPlayIndex].longitude) * 111, 2) +
					Math.pow(
						Math.abs(this.trackPoints[this.nowPlayIndex + 1].latitude - this.trackPoints[this.nowPlayIndex]
							.latitude) *
						111 *
						Math.cos(((2 * Math.PI) / 360) * this.trackPoints[this.nowPlayIndex].latitude),
						2
					)
				);
				while (leng < 0.1 && this.nowPlayIndex < this.trackPoints.length - 1) {
					leng += Math.sqrt(
						Math.pow(Math.abs(this.trackPoints[this.nowPlayIndex + 1].longitude - this.trackPoints[this
							.nowPlayIndex].longitude) * 111, 2) +
						Math.pow(
							Math.abs(this.trackPoints[this.nowPlayIndex + 1].latitude - this.trackPoints[this
								.nowPlayIndex].latitude) *
							111 *
							Math.cos(((2 * Math.PI) / 360) * this.trackPoints[this.nowPlayIndex].latitude),
							2
						)
					);
					this.nowPlayIndex = this.nowPlayIndex + 1;
				}
				var rotate =
					(Math.atan(
							(this.trackPoints[this.nowPlayIndex + 1].longitude - this.trackPoints[this.nowPlayIndex]
								.longitude) /
							(this.trackPoints[this.nowPlayIndex + 1].latitude - this.trackPoints[this.nowPlayIndex]
								.latitude) /
							Math.cos(((2 * Math.PI) / 360) * this.trackPoints[this.nowPlayIndex].latitude)
						) *
						180) /
					Math.PI;
				if (rotate === NaN) {
					if (this.trackPoints[this.nowPlayIndex + 1].longitude - this.trackPoints[this.nowPlayIndex].longitude >
						0) {
						rotate = 90;
					} else {
						rotate = 270;
					}
				} else if (this.trackPoints[this.nowPlayIndex + 1].latitude - this.trackPoints[this.nowPlayIndex]
					.latitude < 0) {
					rotate = 180 + rotate;
				} else if (this.trackPoints[this.nowPlayIndex + 1].longitude - this.trackPoints[this.nowPlayIndex]
					.longitude < 0) {
					rotate = 360 + rotate;
				}
				var playMarker = [{
					id: -1,
					latitude: this.trackPoints[this.nowPlayIndex].latitude,
					longitude: this.trackPoints[this.nowPlayIndex].longitude,
					name: '',
					iconPath: '/static/resource/images/1.gif',
					width: 35,
					height: 35,
					zIndex: 20,
					callout: {
						content: this.i18n['电压'] + ':' +
							this.trackPoints[this.nowPlayIndex].voltage +
							'\n' +
							this.i18n['速度'] + ':' +
							this.trackPoints[this.nowPlayIndex].speed +
							'km/' + this.i18n['小时'] + '\n' +
							this.i18n['时间'] + ':' +
							this.trackPoints[this.nowPlayIndex].time +
							'\n' +
							this.i18n['里程'] + ':' +
							this.trackPoints[this.nowPlayIndex].mileage +
							this.i18n['公里'] + '\n',
						padding: 10,
						borderRadius: 4,
						boxShadow: '4px 8px 16px 0 rgba(0,0,0,0.3)',
						display: 'ALWAYS'
					}
				}];
				this.playMarker = playMarker;
				this.setMarkers();
				this.latitude = this.trackPoints[this.nowPlayIndex].latitude
				this.longitude = this.trackPoints[this.nowPlayIndex].longitude
				this.nowPlayIndex = this.nowPlayIndex + 1
			},

			bindPlay() {
				if (this.inPlay) {
					this.inPlay = false
					const me = this;
					clearInterval(this.playTimer);
					if (me.playMarker.length > 0) {
						const pData = {
							lng: me.playMarker[0].longitude,
							lat: me.playMarker[0].latitude,
							pi: 'wx_deviceLocal'
						};
						const me = this;
						http.postApi(config.API_MAP_REGEO, pData, function(resp) {
							if (resp.data.code === 200) {
								var jsonData = resp.data.data.data;
								if (jsonData.code === 0) {
									const address = jsonData.address;
									var ps = '';
									let tmp_addr = me.i18n['地址'] + ':' + address;
									while (tmp_addr.length > 15) {
										ps += tmp_addr.substring(0, 15) + '\n';
										tmp_addr = tmp_addr.substring(15);
									}
									ps += tmp_addr;
									var playMark = me.playMarker;
									playMark[0].callout.content += ps;
									me.playMarker = playMark
									me.setMarkers();
								}
							}
						});

						// qqmapsdk.reverseGeocoder({
						//   location: {
						//     latitude: me.data.playMarker[0].latitude,
						//     longitude: me.data.playMarker[0].longitude
						//   },
						//   success: function (res) {
						//     const formatted_addresses = res.result.formatted_addresses
						//     const address = res.result.address
						//     let ps = '';
						//     let tmp_addr = '地址: ' + address
						//     while (tmp_addr.length > 15) {
						//       ps += tmp_addr.substring(0, 15) + "\n";
						//       tmp_addr = tmp_addr.substring(15);
						//     }
						//     ps += tmp_addr
						//     var playMark = me.data.playMarker
						//     playMark[0].callout.content += ps
						//     me.setData({
						//       playMarker: playMark
						//     })
						//     me.setMarkers()
						//   }
						// })
					}
				} else {
					if (this.nowPlayIndex >= this.trackPoints.length - 1) {
						this.nowPlayIndex = 0
					}
					this.inPlay = true
					this.playTimer = setInterval(this.playLoop, this.speedTime);
				}
			},

			// bindGPSLocation(){
			//   this.setData({
			//     isShowGPS:true
			//   })
			//   this.locationLoop(true)
			// },

			locationLoop(init = false) {
				const deviceInfo = storage.getSelectedDeviceInfo();
				if (deviceInfo) {
					//commonEn.loading()
					http.postApi(
						config.API_GPS_INFO, {
							macid: deviceInfo.mac_id
						},
						(resp) => {
							//wx.hideLoading()
							if (resp.data.code === 200) {
								let status;
								let stat = '';
								if (parseInt(resp.data.data.info.online) === 1) {
									if (parseInt(resp.data.data.info.speed) === 0) {
										status = this.i18n['静止'] + '(' + commonEn.formatSeconds(this,resp.data.data.info.heart_time - resp
											.data.data.info.gps_time, false) + ')';
										stat = 'static';
									} else {
										status = this.i18n['行驶']+'(' + resp.data.data.info.speed + 'Km/h)';
										stat = 'running';
									}
								} else {
									status =
										this.i18n['离线']+'(' +
										commonEn.formatSeconds(
											this,new Date().getTime() / 1000 -
											(resp.data.data.info.heart_time === undefined ? resp.data.data.info
												.gps_time : resp.data.data.info.heart_time),
											false
										) +
										')';
									stat = 'offline';
								}
								if (init) {
									this.longitude = resp.data.data.info.longitude
									this.latitude = resp.data.data.info.latitude
								}
								var device_info = resp.data.data.info;
								this.locationType = device_info.signalType
								this.macid= deviceInfo.mac_id
								this.deviceInfo= resp.data.data.info
								this.gps= resp.data.data.info.gpscount
								this.gsm= parseInt(resp.data.data.info.online) === 0 ? 0 : resp.data.data.info
										.gsmlevel <= 15 ? 3 : resp.data.data.info.gsmlevel > 18 ? 5 : 4
								this.status= status
								this.deviceMarker= [{
									id: 1,
									latitude: resp.data.data.info.latitude,
									longitude: resp.data.data.info.longitude,
									name: '',
									iconPath: this.iconList[resp.data.data.info.icon] ? this
										.iconList[resp.data.data.info.icon][stat] :
										'/static/resource/images/weizhi2.png',
									width: 35,
									height: 35,
									zIndex: 10
								}]
								this.circles= [{
									latitude: resp.data.data.info.latitude,
									longitude: resp.data.data.info.longitude,
									color: '#6495ED1F',
									fillColor: '#6495ED1F',
									radius: 1000,
									strokeWidth: 1
								}]
								this.setMarkers();
								if (
									this.trace &&
									(this.tracePoints.length == 0 ||
										this.tracePoints[this.tracePoints.length - 1].latitude != resp.data.data.info
										.latitude ||
										this.tracePoints[this.tracePoints.length - 1].longitude != resp.data.data.info
										.longitude)
								) {
									this.tracePoints.push({
										latitude: resp.data.data.info.latitude,
										longitude: resp.data.data.info.longitude
									});
									this.setPolylines();
									this.latitude = resp.data.data.info.latitude
									this.longitude = resp.data.data.info.longitude
								}
								const pData = {
									lng: resp.data.data.info.longitude,
									lat: resp.data.data.info.latitude,
									pi: 'wx_deviceLocal'
								};
								const me = this;
								http.postApi(config.API_MAP_REGEO, pData, function(resp) {
									if (resp.data.code === 200) {
										var jsonData = resp.data.data.data;
										if (jsonData.code === 0) {
											me.address = jsonData.address
											me.locationAdress = jsonData.address
										}
									}
								});

								// qqmapsdk.reverseGeocoder({
								//   location: {
								//     latitude: resp.data.data.info.latitude,
								//     longitude: resp.data.data.info.longitude
								//   },
								//   success: function (res) {
								//     console.log(res)
								//     const formatted_addresses = res.result.formatted_addresses
								//     const address = res.result.address //+ formatted_addresses.recommend
								//     me.setData({
								//       address: address,
								//       locationAdress: address
								//     })
								//   }
								// })
							} else {
								commonEn.simpleToast(me,resp.data.msg);
								clearInterval(this.locationTimer);
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 1500);
							}
						}
					);
				}
			},

			isEmptyObject(obj) {
				for (var key in obj) {
					return false;
				}
				return true;
			},

			loadLastGpsInfo() {
				var init = true;
				const me = this;
				const deviceInfo = storage.getSelectedDeviceInfo();
				if (deviceInfo) {
					http.postApi(
						config.API_GPS_INFO, {
							macid: deviceInfo.mac_id
						},
						(resp) => {
							if (resp.data.code === 200) {
								if (this.isEmptyObject(resp.data.data.info.last_location)) {
									commonEn.simpleToast(this,this.i18n['当前设备没有GPS坐标']);
									return;
								}
								// var last_location = resp.data.data.info.last_location
								// last_location.lng = 121.19023414159073
								// last_location.lat = 31.390001627411883
								// resp.data.data.info.last_location = last_location
								let status;
								let stat = '';
								if (parseInt(resp.data.data.info.online) === 1) {
									if (parseInt(resp.data.data.info.speed) === 0) {
										status = me.i18n['静止']+'(' + commonEn.formatSeconds(me,resp.data.data.info.heart_time - resp
											.data.data.info.gps_time, false) + ')';
										stat = 'static';
									} else {
										status = me.i18n['行驶']+'(' + resp.data.data.info.speed + 'Km/h)';
										stat = 'running';
									}
								} else {
									status =
										me.i18n['离线']+'(' +
										commonEn.formatSeconds(
											me,new Date().getTime() / 1000 -
											(resp.data.data.info.heart_time === undefined ? resp.data.data.info
												.gps_time : resp.data.data.info.heart_time),
											false
										) +
										')';
									stat = 'offline';
								}
								if (init) {
									this.longitude = resp.data.data.info.last_location.lng
									this.latitude = resp.data.data.info.last_location.lat
								}
								var device_info = resp.data.data.info;
								device_info.signalType = '0';
								this.locationGpsType = device_info.signalType
								var device_marker = {
									id: 2,
									latitude: resp.data.data.info.last_location.lat,
									longitude: resp.data.data.info.last_location.lng,
									name: '',
									iconPath: this.iconList[resp.data.data.info.icon] ? this.iconList[resp.data
										.data.info.icon][stat] : '/static/resource/images/weizhi2.png',
									width: 35,
									height: 35,
									zIndex: 10
								};
								// this.setData({
								//   marker: this.data.marker.concat(device_marker)
								// })
								this.gpsMarker = [device_marker]
								this.marker = this.gpsMarker.concat(this.trackMarker, this.alarmMarker, this
										.playMarker, this.deviceMarker)
								// this.setData({
								//   marker: this.data.deviceMarker.concat(this.data.trackMarker, this.data.alarmMarker, this.data.playMarker)
								// })
								//this.data.deviceMarker.concat(this.data.trackMarker, this.data.alarmMarker, this.data.playMarker)

								this.macid = deviceInfo.mac_id
								this.deviceInfo = device_info
								this.gps = resp.data.data.info.gpscount
								this.gsm = parseInt(resp.data.data.info.online) === 0 ? 0 : resp.data.data.info
										.gsmlevel <= 15 ? 3 : resp.data.data.info.gsmlevel > 18 ? 5 : 4
								this.status = status
								this.deviceMarker = [device_marker]
								this.circles = [{
									latitude: resp.data.data.info.last_location.lat,
									longitude: resp.data.data.info.last_location.lng,
									color: '#6495ED1F',
									fillColor: '#6495ED1F',
									radius: 1000,
									strokeWidth: 1
								}]
								//this.setMarkers()

								// this.setData({
								//   marker: this.data.deviceMarker.concat(this.data.deviceMarker)
								// })
								this.batteryWidth = parseInt((this.deviceInfo.quantity / 100) * 37)
								const me = this;
								const pData = {
									lng: resp.data.data.info.last_location.lng,
									lat: resp.data.data.info.last_location.lat,
									pi: 'wx_deviceLocal'
								};
								http.postApi(config.API_MAP_REGEO, pData, function(resp) {
									if (resp.data.code === 200) {
										var jsonData = resp.data.data.data;
										if (jsonData.code === 0) {
											const address = jsonData.address;
											me.address = address
											me.locationGpsAdress = address
										}
									}
								});

								// qqmapsdk.reverseGeocoder({
								//   location: {
								//     latitude: resp.data.data.info.last_location.latitude,
								//     longitude: resp.data.data.info.last_location.longitude
								//   },
								//   success: function (res) {
								//     console.log(res)
								//     const formatted_addresses = res.result.formatted_addresses
								//     const address = res.result.address //+ formatted_addresses.recommend
								//     me.setData({
								//       address: address,
								//       locationGpsAdress: address
								//     })
								//   }
								// })
							} else {
								commonEn.simpleToast(this,resp.data.msg);
								clearInterval(this.locationTimer);
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 1500);
							}
						}
					);
				}
			},

			bindMarkertap(e) {
				if (e.detail.markerId == 1 || e.detail.markerId == 2) {
					if (e.detail.markerId == 1) {
						var deviceInfo = this.deviceInfo;
						deviceInfo.signalType = this.locationType;
						this.deviceInfo = deviceInfo
						this.address = this.locationAdress
					}
					if (e.detail.markerId == 2) {
						var deviceInfo = this.deviceInfo;
						deviceInfo.signalType = this.locationGpsType;
						this.deviceInfo = deviceInfo
						this.address = this.locationGpsAdress
					}
					this.showInfo = !this.showInfo
				}
			},

			bindTapMap(e) {
				this.showInfo = false
				const that = this
				if (that.selectFence != null) {
					var fence = that.selectFence;
					fence.latitude = e.detail.latitude;
					fence.longitude = e.detail.longitude;
					that.selectFence = fence
					that.circles = [{
						latitude: fence.latitude,
						longitude: fence.longitude,
						radius: parseInt(fence.radius),
						color: '#6495ED1F',
						fillColor: '#6495ED1F',
						strokeWidth: 1
					}]
				}
			},

			bindSendCommand: function(e) {
				this.sendCommand(e.currentTarget.dataset.cmd);
			},

			sendCommand: function(cmd) {
				const me = this
				uni.showModal({
					content: me.i18n['确定发送指令吗？'],
					showCancel: true,
					cancelText: me.i18n['取消'],
					confirmText: me.i18n['确定'],
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							commonEn.loading(this);
							http.postApi(
								config.API_BATTERY_SEND_COMMAND, {
									macid: this.macid,
									cmd: cmd
								},
								function(resp) {
									if (resp.data.code === 200) {
										uni.hideLoading();
										commonEn.simpleToast(me,me.i18n['操作成功']);
									} else {
										commonEn.simpleToast(me,resp.data.msg);
									}
								}
							);
						}
					},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			bindTrace() {
				if (this.trace) {
					this.trace = false
					this.tracePoints = []
					this.setPolylines();
					clearInterval(this.traceTimer);
				} else {
					this.trace = true
					this.traceTimer = setInterval(() => {
						this.traceTime = this.traceTime + 1
					}, 1000);
				}
			},

			bindNavigate() {
				//使用微信内置地图查看标记点位置，并进行导航
				const latitude = this.latitude;
				const longitude = this.longitude;
				const address = this.address;
				uni.openLocation({
					latitude,
					//要去的纬度-地址
					longitude,
					//要去的经度-地址
					address,
					scale: 11
				});
			},

			bindCloseTrack() {
				this.trackPoints = []
				this.trackMarker = []
				this.trackStopList = []
				this.nowPlayIndex = 0
				this.playMarker = []
				this.setMarkers();
				this.setPolylines();
			},

			bindFencePopupOpen() {
				this.fencePopupShow = true
			},

			bindFencePopupClose() {
				this.fencePopupShow = false
			},

			MoveToFence(event, _dataset) {
				clearInterval(this.locationTimer);
				/* ---处理dataset begin--- */
				// this.handleDataset(event, _dataset);
				/* ---处理dataset end--- */
				var map = uni.createMapContext('myMap');
				const fence = Object.assign({}, event.currentTarget.dataset.p);
				this.selectFence = fence
				this.circles = [{
					latitude: fence.latitude,
					longitude: fence.longitude,
					radius: parseInt(fence.radius),
					color: '#6495ED1F',
					fillColor: '#6495ED1F',
					strokeWidth: 1
				}]
				this.fencePopupShow = false
				this.latitude = fence.latitude
				this.longitude = fence.longitude
				/*map.moveToLocation({
					latitude: event.currentTarget.dataset.p.latitude,
					longitude: event.currentTarget.dataset.p.longitude
				})*/
			},

			addFence() {
				clearInterval(this.locationTimer);
				var map = uni.createMapContext('myMap');
				map.getCenterLocation({
					success: (res) => {
						const fence = {
							name: '',
							type: '0',
							latitude: res.latitude,
							longitude: res.longitude,
							radius: 100
						};
						this.selectFence = fence
						this.circles = [{
							latitude: fence.latitude,
							longitude: fence.longitude,
							radius: parseInt(fence.radius),
							color: '#6495ED1F',
							fillColor: '#6495ED1F',
							strokeWidth: 1
						}]
						this.fencePopupShow = false
					}
				});
			},

			loadFenceList() {
				commonEn.loading(this);
				const deviceInfo = storage.getSelectedDeviceInfo();
				http.postApi(
					config.API_FENCE_LIST, {
						macid: deviceInfo.mac_id
					},
					(resp) => {
						uni.hideLoading();
						if (resp.data.code === 200) {
							var fenceList = resp.data.data.list;
							this.fenceList = fenceList
						} else {
							commonEn.simpleToast(this,resp.data.msg);
						}
					}
				);
			},

			bindFenceClose() {
				this.locationTimer = setInterval(this.locationLoop, 10000);
				this.selectFence = null
				this.circles = []
				this.fencePopupShow = true
			},

			onFenceNameChange(e) {
				var fence = this.selectFence;
				fence.name = e.detail.value;
				this.selectFence = fence
			},

			onFenceTypeChange(e) {
				console.log(e.detail,'detail');
				var fence = this.selectFence;
				fence.type = e.detail.value; 
				this.selectFence = fence
			},

			onFenceRadiusDrag(e) {
				var fence = this.selectFence;
				fence.radius = e.detail.value;
				this.selectFence = fence
				/*circles: [{
					latitude: fence.latitude,
					longitude: fence.longitude,
					radius: parseInt(fence.radius),
					color: '#6495EDBB',
					fillColor: '#6495ED1F',
					strokeWidth: 1
				}],*/
			},

			onFenceRadiusChange(e) {
				var fence = this.selectFence;
				fence.radius = e.detail.value;
				// this.setData({circles:[]})
				var startSlide = new Date().getTime();
				if (startSlide - this.endSlide > 100) {
					this.endSlide = startSlide
					this.selectFence = fence
					this.circles = [{
						latitude: fence.latitude,
						longitude: fence.longitude,
						radius: parseInt(fence.radius),
						color: '#6495ED1F',
						fillColor: '#6495ED1F',
						strokeWidth: 1
					}]
				}
			},

			onFenceRadiusMinus() {
				var fence = this.selectFence;
				if (fence.radius > 1) {
					fence.radius = parseInt(fence.radius) - 100;
					this.selectFence = fence
					this.circles = [{
						latitude: fence.latitude,
						longitude: fence.longitude,
						radius: parseInt(fence.radius),
						color: '#6495ED1F',
						fillColor: '#6495ED1F',
						strokeWidth: 1
					}]
				}
			},

			onFenceRadiusPlus() {
				var fence = this.selectFence;
				if (fence.radius < 10000) {
					fence.radius = parseInt(fence.radius) + 100;
					this.selectFence = fence
					this.circles = [{
						latitude: fence.latitude,
						longitude: fence.longitude,
						radius: parseInt(fence.radius),
						color: '#6495ED1F',
						fillColor: '#6495ED1F',
						strokeWidth: 1
					}]
				}
			},

			bindFenceSave() {
				var fence = this.selectFence;
				if (!fence.name) {
					commonEn.simpleToast(this,this.i18n['请输入围栏名称']);
					return;
				}
				console.log(fence,'fence');
				if (fence != null) {
					commonEn.loading(this);
					const deviceInfo = storage.getSelectedDeviceInfo();
					if (fence.id) {
						http.postApi(
							config.API_FENCE_EDIT,
							Object.assign({
									macid: deviceInfo.mac_id
								},
								fence
							),
							(resp) => {
								uni.hideLoading();
								if (resp.data.code === 200) {
									this.loadFenceList();
								} else {
									commonEn.simpleToast(this,resp.data.msg);
								}
								this.selectFence = null
								this.circles = []
								this.fencePopupShow = true
							}
						);
					} else {
						console.log(Object.assign({macid: deviceInfo.mac_id,type: fence.type-0}),'eeeeee');
						http.postApi(
							config.API_FENCE_ADD,
							Object.assign({
									macid: deviceInfo.mac_id,
									type: fence.type-0,
									name: fence.name,
									latitude: fence.latitude,
									longitude: fence.longitude,
									radius: fence.radius
								},
								// fence
							),
							(resp) => {
								uni.hideLoading();
								if (resp.data.code === 200) {
									this.loadFenceList();
								} else {
									commonEn.simpleToast(this,resp.data.msg);
								}
								this.selectFence = null
								this.circles = []
								this.fencePopupShow = true
							}
						);
					}
				}
				this.locationTimer = setInterval(this.locationLoop, 10000);
			},

			delFence() {
				var fence = this.selectFence;
				if (fence != null && fence.id) {
					commonEn.loading(this);
					const deviceInfo = storage.getSelectedDeviceInfo();
					http.postApi(config.API_FENCE_DEL, {
						macid: deviceInfo.mac_id,
						id: fence.id
					},(resp) => {
						uni.hideLoading();
						if (resp.data.code === 200) {
							this.loadFenceList();
						} else {
							commonEn.simpleToast(this,resp.data.msg);
						}
						this.selectFence = null
						this.circles = []
						this.fencePopupShow = true
					});
				}
			},

			moveToLocation: function() {
				uni.createMapContext("myMap", this).moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude
				});
				// this.mapCtx = uni.createMapContext('myMap');
				// this.mapCtx.moveToLocation();
				// this.setData({ showShopInfo: false, scale: 14 })
			},

			mapChange: function(e) {
				this.mapParams = e.detail.mapParams
			}
		}
	};
</script>
<style scoped>
	@import './deviceLocalnvue.css';
</style>