zx_bms_uni/pages/deviceLocal/deviceLocal.vue

<template>
    <view class="container">
		<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="width: 100%; height: 100vh"
			@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">
                            <view class="map-top-text">GPS</view>
                            <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">
                            <view class="map-top-text">GSM</view>
                            <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">
                        <view class="map-top-text-1">{{ deviceInfo.quantity }}%</view>
                        <image src="https://qiniu.bms16.com/FikqU8xHYKBjolOPZ7uc9ZNJXfHU" class="bottom-img"></image>
                    </view>

                    <view v-if="deviceInfo.quantity >= 20" :style="'width: ' + batteryWidth + 'rpx;right:' + (71 + (37 - batteryWidth)) + 'rpx'" class="battery_num_view"></view>
                    <view v-if="deviceInfo.quantity < 20" :style="'width: ' + batteryWidth + 'rpx;right:' + (71 + (37 - batteryWidth)) + 'rpx'" class="battery_num_view_red"></view>
                </view>
                <view class="batter-info-group">
                    <view class="battery-desc flex-row flex-between">
                        <view>{{ $t('名称') + '：' + deviceInfo.name }}</view>
                        <view>{{ $t('状态') + '：' + status }}</view>
                    </view>
                    <view class="battery-desc flex-row flex-between">
                        <view>{{ $t('编号') + '：' + macid }}</view>
                        <view>{{ $t('设防状态') + '：' + deviceInfo.protectState ? (deviceInfo.protectState == 1 ? $t('设防') : $t('撤防')) : $t('未知') }}</view>
                    </view>
                    <view class="battery-desc flex-row flex-between">
                        <view>{{ $t('控制') + '：' + deviceInfo.oilState == 1 ? $t('已通电') : $t('已断电') }}</view>
                        <view>{{ $t('定位类型') + '：' + deviceInfo.signalType == 0 ? $t('北斗GPS') : deviceInfo.signalType == 1 ? 'WIFI' : deviceInfo.signalType == 16 ? 'LBS' : $t('未知') }}</view>
                    </view>
                    <view class="battery-desc flex-row flex-between">
                        <view>{{ $t('当日里程') + '：' + deviceInfo.day_mil }}</view>
                        <view>{{ $t('总里程') + '：' + deviceInfo.mil }}</view>
                    </view>
                    <view class="battery-desc flex-row flex-between">
                        <view>
                            {{ $t('电压') + '：' + 
                                (deviceInfo.voltage ? deviceInfo.voltage + 'V' : $t('未知')) +
                                (deviceInfo.elecState ? (deviceInfo.elecState == 1 ? '（'+ $t('主电接通')+'）' : '（'+ $t('主电断开')+'）') : '')
                            }}
                        </view>
                        <view v-if="deviceInfo && deviceInfo.temp && deviceInfo.temp != ''">{{ $t('温度') + ':' + deviceInfo.temp + '℃' }}</view>
                    </view>
                    <view class="battery-desc">{{ $t('通信') + '：' + deviceInfo.heart_time ? tools.formatTime(deviceInfo.heart_time) : $t('未知') }}</view>
                    <view class="battery-desc">{{ $t('定位') + '：' + deviceInfo.gps_time ? tools.formatTime(deviceInfo.gps_time) : $t('未知') }}</view>
                    <view v-if="address != ''" class="battery-desc">地址：{{ address }}</view>
                    <!-- <view wx:if="{{ address != '' }}" class="battery-desc">GPS最近地址：{{ address }}</view> -->
                </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">
                <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>
                    <view class="bottom-text">{{$t('轨迹')}}</view>
                </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>
                    <view class="bottom-text">{{$t('报警')}}</view>
                </view>
                <!--<view class="bottom-item" bindtap="bindTrace">
        <image class="bottom-img"></image>
        <view class="bottom-text">追踪</view>
      </view>-->
                <view class="bottom-item" @tap="bindNavigate">
                    <image class="bottom-img"></image>
                    <view class="bottom-text">{{$t('导航')}}</view>
                </view>
                <view class="bottom-item" @tap="bindSendCommand" data-cmd="CLOSERELAY">
                    <image src="https://qiniu.bms16.com/Fr-g3_g0T5aZ_sLQB7Xs1qRpxGAS" class="bottom-img"></image>
                    <view class="bottom-text">{{$t('断电')}}</view>
                </view>
                <view class="bottom-item" @tap="bindSendCommand" data-cmd="OPENRELAY">
                    <image src="https://qiniu.bms16.com/Fv1eQozcTejKVdXbqkcea9syHOU3" class="bottom-img"></image>
                    <view class="bottom-text">{{$t('通电')}}</view>
                </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="trackPoints.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">
                <view class="text_view">{{$t('最新')}}</view>
                <view class="text_view">GPS</view>
            </view>
            <image src="https://qiniu.bms16.com/Fg4wwTFjltC-0avrON1I0WLrIa82" class="fence-img" @tap="bindFencePopupOpen"></image>
            <view v-if="trace" class="trace-box">{{ $t('追踪时间') + '：' + tools.formatHourSeconds(traceTime) }}</view>
            <!--<van-grid>
      <van-grid-item text="轨迹" bind:click="bindTrackDialogOpen">
        <van-icon slot="icon" name="map-marked" color="#409EFF" />
      </van-grid-item>
      <van-grid-item text="报警" bind:click="bindAlarmPopupOpen">
        <van-icon slot="icon" name="bell" color="#F56C6C" info="{{ alarmList.length }}"/>
      </van-grid-item>
      <van-grid-item wx:if="{{trackPoints.length!=0}}" text="播放" bind:click="bindPlay">
        <van-icon wx:if="{{!inPlay}}" slot="icon" name="play" color="#67C23A" />
        <van-icon wx:if="{{inPlay}}" slot="icon" name="pause" color="#67C23A" />
      </van-grid-item>
      <van-grid-item wx:if="{{trackPoints.length!=0}}" text="停留" bind:click="bindStopPopupOpen">
        <van-icon slot="icon" name="location" color="#E6A23C" info="{{ trackStopList.length }}"/>
      </van-grid-item>
    </van-grid>-->
        </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">
            <view class="track_total_time">
                {{ $t('时间') + ':' + tools.formatTimeNoSecond(trackDialogFrom.startTime / 1000) + $t('至') + tools.formatTimeNoSecond(trackDialogFrom.endTime / 1000) + $t('共') + mileage_total + $t('公里')}}
            </view>
            <view class="track_slide flex-row flex-between">
                <slider @change="trackPlayChangeAdress" @changing="trackPlayChange" :value="nowPlayIndex" min="1" :max="totalTrackValue" style="width: 70%" />
                <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">{{$t('慢')}}</text>
                    <text v-if="adjustSpeed == 1" class="fastForward_text">{{$t('中')}}</text>
                    <text v-if="adjustSpeed == 2" class="fastForward_text">{{$t('快')}}</text>
                </view>
            </view>
        </view>

		<!-- 下方点击轨迹弹窗 -->
		<view v-if="trackDialogShow" class="popup-black">
			<view class="popup-view">
				<view style="text-align: center;border-bottom: 4rpx solid #f7f7f7;margin-bottom: 20rpx;">{{$t('轨迹')}}</view>
				<view style="padding-left: 30rpx;padding-right: 30rpx;">
					<view class="flex-row" style="margin-bottom: 40rpx;">
						<view class="location_mark">{{$t('定位类型')}}：</view>
						<view @tap="bindLocationType" data-index="1" :class="isLocationType == 1 ? 'sel_location_view' : 'un_location_view'">GPS</view>
						<view @tap="bindLocationType" data-index="2" :class="isLocationType == 2 ? 'sel_location_view' : 'un_location_view'">LBS</view>
						<view @tap="bindLocationType" data-index="3" :class="isLocationType == 3 ? 'sel_location_view' : 'un_location_view'">GPS+LBS</view>
					</view>
					<view class="flex-row" style="margin-bottom: 50rpx;">
						<view class="flex-row" style="margin-right: 60rpx;">
							<img class="time-img" src="https://qiniu.bms16.com/Ful5wl2uV3-Ys8PdeFDGZRgBm6DX" />
							<text style="font-size: 28rpx;">{{$t('开始时间')}}</text>
						</view>
						<view style="height: 40rpx;">
							<time-picker :time="trackDialogFrom.formatStartTime" @confirmPickDate="confirmPickDate" />	
						</view>
					</view>
					<view class="flex-row" style="margin-bottom: 70rpx;">
						<view class="flex-row" style="margin-right: 60rpx;">
							<img class="time-img" src="https://qiniu.bms16.com/Ful5wl2uV3-Ys8PdeFDGZRgBm6DX" />
							<text style="font-size: 28rpx;">{{$t('结束时间')}}</text>
						</view>
						<view style="height: 40rpx;">
							<time-picker :time="trackDialogFrom.formatEndTime" @confirmPickDate="confirmPickDate" />
						</view>
					</view>
					<view class="day-btn flex-row">
						<view @tap="bindTrackTimeSelectToday">{{$t('当天')}}</view>
						<view @tap="bindTrackTimeSelectYesterday">{{$t('昨天')}}</view>
						<view @tap="bindTrackTimeSelectLastday">{{$t('前天')}}</view>
					</view>
				</view>
				<view class="bottom-btn flex-row">
					<view @tap="bindTrackDialogClose" class="">{{$t('取消')}}</view>
					<view @tap="bindTrackDialogConfirm" class="">{{$t('查询')}}</view>
				</view>
			</view>
		</view>
		
		<!-- 下方点击报警弹窗 -->
		<view v-if="alarmPopupShow" class="popup-black">
			<scroll-view class="alarm-view" :scroll-y="true">
				<view class="alarm-top flex-row">
					<view>{{$t('报警')}}</view>
					<view @tap="bindAlarmPopupClose"><img 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;">
							<view class="danger-view">{{ item.alarm_desc }}</view>
							<view class="primary-view">{{ item.speed + $t('公里')+'/'+$t('小时')}}</view>
						</view>
						<view>{{ item.formatTime }}</view>
					</view>
					<view class="alarm-right">{{item.address}}</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 停留点 -->
		<view v-if="trackStopPopupShow" class="popup-black">
			<scroll-view class="stop-view flex-row">
				<view class="stop-top flex-row">
					<view>{{$t('停留点')}}</view>
					<view @tap="bindStopPopupClose"><img 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: 50%;">
						<view class="flex-row" style="margin-bottom: 10rpx;">
							<view>{{ item.name }}</view>
							<view class="o-text">{{ item.format_stop_time }}</view>
						</view>
						<view style="white-space: break-spaces;">{{ item.time }} - {{ item.end_time }}</view>
					</view>
					<view class="stop-right">{{item.address}}</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 右下角围栏 -->
		<view v-if="fencePopupShow">
			<scroll-view class="fence-view" :scroll-y="true">
				<view class="fence-top flex-row flex-between">
					<view class="flex-row">
						<view style="margin-right: 20rpx;">{{$t('围栏')}}</view>
						<view class="fence-btn" @tap="addFence"><img src="https://qiniu.bms16.com/FkjjRjSiRHnbPJk_2PhaiAcfwY1f" />{{$t('添加')}}</view>
					</view>
					<view @tap="bindFencePopupClose"><img 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>
						<view class="van-cell-text">
							{{ item.name }}
						</view>
						<!-- <view class="van-cell-text"> {{ $t('报警类型') + ':' + item.type == 1 ? $t('进') : item.type == 2 ? $t('出') : item.type == 3 ? $t('双向') : $t('关闭') }}</view> -->
						<view class="van-cell-text"> {{ $t('报警类型') + ':' }}
							<text v-if="item.type == 2">{{$t('出')}}</text>
							<text v-if="item.type == 3">{{$t('双向')}}</text>
							<text v-if="item.type == 0">{{$t('关闭')}}</text>
							<text v-if="item.type == 1">{{$t('进')}}</text>
						</view>
					</view>
					<view class="">{{item.radius+$t('米')}}</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 围栏设置 -->
		<view v-if="selectFence != null">
			<scroll-view class="fence-view" :scroll-y="true">
				<view class="fence-top flex-row flex-between">
					<view style="margin-right: 20rpx;">{{$t('围栏设置')}}</view>
					<view @tap="bindFenceClose"><img src="https://qiniu.bms16.com/FjhcWGFGsI56rLZRu7_OnhGtpoUs" /></view>
				</view>
				<view class="">
					<view class="fence-config flex-row flex-between">
						<view>{{$t('围栏名称')}}</view>
						<input type="text" :placeholder="$t('请输入围栏名称')" @blur="onFenceNameChange" :value="selectFence.name" style="color: rgba(0, 0, 0, 1);text-align: right;" />
					</view>
					<view class="fence-config flex-row flex-between">
						<view>{{$t('报警类型')}}</view>
						<view class="flex-row">
							<radio-group class="radio-group" @change="onFenceTypeChange">
								<radio :checked="selectFence.type ==1" value="1" />{{$t('进')}}
								<radio :checked="selectFence.type ==2" value="2" />{{$t('出')}}
								<radio :checked="selectFence.type ==3" value="3" />{{$t('双向')}}
								<radio :checked="selectFence.type ==0" value="0" />{{$t('关闭')}}
							</radio-group>
						</view>
					</view>
					<view class="fence-config flex-row flex-between">
						<view>{{$t('围栏半径')}}</view>
						<view style="width: 75%;" 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 style="width: 75%" />
							<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" @tap="bindFenceSave">{{$t('保存')}}</button>
					</view>
				</view>
			</scroll-view>
		</view>
    </view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script>
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');
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,
			type: '1',
            mapParams: {
                enableSatellite: false,
                // 是否开启卫星图
                enableTraffic: false // 是否开启实时路况
            },

            isShowGPS: false,

            // locationInfo:{}
            locationType: '',

            locationAdress: '',
            locationGpsType: '',
            locationGpsAdress: '',
            gpsMarker: [],
            flase: '',
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        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.setData({
                    latitude_my: res.latitude,
                    longitude_my: res.longitude
                });
            }
        });
		const me=this
		setTimeout(function() {
			me.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: {
        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 {
                        common.simpleToast(this,resp.data.msg);
                    }
                });
            }
        },
		
		onStartTimeChange(e) {
			console.log(1125);
			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;
		},
		
		confirmPickDate(dataStr) {
			this.trackDialogFrom.formatStartTime = dataStr
			this.$emit("time", dateStr);
		},

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

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

        trackPlayChangeAdress(e) {
            var index = e.detail.value;
            this.setData({
                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.$t('地址')+':' + 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.setData({
                                playMarker: playMark
                            });
                        }
                    }
                });
            }
        },

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

        loadAlarmList() {
            common.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.$t('地址')+':' + 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.setData({
                                        alarmList: alarmList
                                    });
                                }
                            });
                        });
                        this.setData({
                            alarmList: alarmList
                        });
                    } else {
                        common.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) {
                    common.simpleToast(me,me.$t('设备到期'));
                    setTimeout(function () {
                        uni.navigateBack({
                            delta: 1
                        });
                    }, 1500);
                }
            } else {
                clearInterval(this.locationTimer);
                setTimeout(function () {
                    uni.navigateBack({
                        delta: 1
                    });
                }, 1500);
            }
        },

        setMarkers() {
            this.setData({
                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.setData({
                polylines: polylines
            });
        },

        bindTrackDialogOpen() {
            this.setData({
                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.setData({
                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.setData({
                            mileage_total: resp.data.data.distance
                        });
                    } else {
                        common.simpleToast(this,this,resp.data.msg);
                    }
                }
            );
        },

        bindTrackDialogConfirm() {
            this.bindTrackDialogClose();
            this.setData({
                inPlay: false
            });
            clearInterval(this.playTimer);
            common.loading(this);
			var me = 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) {
                            common.simpleToast(me,me.$t('当前未有轨迹'));
                            return;
                        }
                        // this.calculateMileage(resp.data.data.points)
                        var points = [];
                        var trackMarker = [];
                        var trackStopList = [];
                        var n = 1;
                        this.setData({
                            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.$t('起点'),
                                    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: common.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: ' +
                                            common.formatSeconds(me,p.stop_time) +
                                            '\n' +
                                            me.$t('开始')+':' +
                                            p.time +
                                            '\n' +
                                            me.$t('结束')+':' +
                                            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.$t('地址')+':' + 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.setData({
                                                trackMarker: trackMarker,
                                                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: common.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.$t('停留')+': ' +
                                            common.formatSeconds(me,p.stop_time) +
                                            '\n' +
                                            me.$t('开始')+': ' +
                                            p.time +
                                            '\n' +
                                            me.$t('结束')+': ' +
                                            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.$t('地址')+': ' + 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.setData({
                                            trackMarker: trackMarker,
                                            trackStopList: trackStopList
                                        });
                                        this.setMarkers();
                                    }
                                });
                                n++;
                            }
                        });
                        //设置终点
                        trackStopList.push({
                            name: me.$t('终点'),
                            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: common.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: ' +
                                    common.formatSeconds(me,points[points.length - 1].stop_time) +
                                    '\n' +
                                    me.$t('开始')+': ' +
                                    points[points.length - 1].time +
                                    '\n' +
                                    me.$t('结束')+': ' +
                                    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.$t('地址')+': ' + 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.setData({
                                    trackMarker: trackMarker,
                                    trackStopList: trackStopList
                                });
                                this.setMarkers();
                            }
                        });
                        var deviceMarker = this.deviceMarker;
                        //deviceMarker[0].callout.display = 'BYCLICK'
                        this.setData({
                            trackPoints: points,
                            trackMarker: trackMarker,
                            deviceMarker: deviceMarker,
                            trackStopList: trackStopList,
                            nowPlayIndex: 0,
                            playMarker: []
                        });
                        this.setMarkers();
                        this.setPolylines();
                        // this.mapCtx.scale = 8
                        var map = uni.createMapContext('myMap');
                        map.includePoints({
                            points: points,
                            padding: [10, 10, 10, 10]
                        });
                        this.setData({
                            scale: 13
                        });
                    } else {
                        common.simpleToast(this,resp.data.msg);
                    }
                }
            );
        },

        bindTrackDialogClose() {
            this.setData({
                trackDialogShow: false
            });
        },

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

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

        bindTrackTimeSelectToday() {
            this.setData({
                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.setData({
                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.setData({
                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.setData({
                        trackDialogFrom: Object.assign(this.trackDialogFrom, {
                            startTime: event.detail,
                            formatStartTime: common.formatDateTime(event.detail)
                        }),
                        selectTimeType: ''
                    });
                    break;
                case 'track_end':
                    this.setData({
                        trackDialogFrom: Object.assign(this.trackDialogFrom, {
                            endTime: event.detail,
                            formatEndTime: common.formatDateTime(event.detail)
                        }),
                        selectTimeType: ''
                    });
                    break;
            }
            this.bindTimeSelectClose();
        },

        bindTimeSelectOpen() {
            this.setData({
                timeSelectShow: true
            });
        },

        bindTimeSelectClose() {
            this.setData({
                timeSelectShow: false
            });
        },

        bindStopPopupOpen() {
            this.setData({
                trackStopPopupShow: true
            });
        },

        bindStopPopupClose() {
            this.setData({
                trackStopPopupShow: false
            });
        },

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

        bindAlarmPopupOpen() {
            this.setData({
                alarmPopupShow: true
            });
        },

        bindAlarmPopupClose() {
            this.setData({
                alarmPopupShow: false
            });
            this.setData({
                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.$t('时间')+': ' +
                            event.currentTarget.dataset.p.formatTime +
                            '\n' +
                            me.$t('速度')+': ' +
                            event.currentTarget.dataset.p.speed +
                            me.$t('公里')+'/'+me.$t('小时')+'\n' +
                            event.currentTarget.dataset.p.ps +
                            '\n',
                        padding: 10,
                        borderRadius: 4,
                        boxShadow: '4px 8px 16px 0 rgba(0,0,0,0.3)',
                        display: 'ALWAYS'
                    }
                }
            ];
            this.setData({
                alarmMarker: alarmMarker,
                latitude: event.currentTarget.dataset.p.latitude,
                longitude: event.currentTarget.dataset.p.longitude
            });
            this.setMarkers();
        },

        playLoop() {
            if (this.nowPlayIndex >= this.trackPoints.length - 1) {
                this.setData({
                    inPlay: false
                });
                clearInterval(this.playTimer);
                return;
            }
            this.setData({
                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.$t('电压')+': ' +
                            this.trackPoints[this.nowPlayIndex].voltage +
                            '\n' +
                            this.$t('速度')+': ' +
                            this.trackPoints[this.nowPlayIndex].speed +
                            'km/'+this.$t('小时')+'\n' +
                            this.$t('时间')+': ' +
                            this.trackPoints[this.nowPlayIndex].time +
                            '\n' +
                            this.$t('里程')+': ' +
                            this.trackPoints[this.nowPlayIndex].mileage +
                            this.$t('公里')+'\n',
                        padding: 10,
                        borderRadius: 4,
                        boxShadow: '4px 8px 16px 0 rgba(0,0,0,0.3)',
                        display: 'ALWAYS'
                    }
                }
            ];
            this.playMarker = playMarker;
            this.setMarkers();
            this.setData({
                latitude: this.trackPoints[this.nowPlayIndex].latitude,
                longitude: this.trackPoints[this.nowPlayIndex].longitude,
                nowPlayIndex: this.nowPlayIndex + 1
            });
        },

        bindPlay() {
            if (this.inPlay) {
                this.setData({
                    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.$t('地址')+': ' + 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.setData({
                                    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.setData({
                        nowPlayIndex: 0
                    });
                }
                this.setData({
                    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) {
                //common.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.$t('静止')+'(' + common.formatSeconds(this,resp.data.data.info.heart_time - resp.data.data.info.gps_time, false) + ')';
                                    stat = 'static';
                                } else {
                                    status = this.$t('行驶')+'(' + resp.data.data.info.speed + 'Km/h)';
                                    stat = 'running';
                                }
                            } else {
                                status =
                                    this.$t('离线')+'(' +
                                    common.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.setData({
                                    longitude: resp.data.data.info.longitude,
                                    latitude: resp.data.data.info.latitude
                                });
                            }
                            var device_info = resp.data.data.info;
                            this.setData({
                                locationType: device_info.signalType
                            });
                            this.setData({
                                macid: deviceInfo.mac_id,
                                deviceInfo: resp.data.data.info,
                                gps: resp.data.data.info.gpscount,
                                gsm: parseInt(resp.data.data.info.online) === 0 ? 0 : resp.data.data.info.gsmlevel <= 15 ? 3 : resp.data.data.info.gsmlevel > 18 ? 5 : 4,
                                status: status,
                                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
                                    }
                                ],
                                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.setData({
                                    latitude: resp.data.data.info.latitude,
                                    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.setData({
                                            address: jsonData.address,
                                            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 {
                            common.simpleToast(this,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)) {
                                common.simpleToast(me,me.$t('当前设备没有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.$t('静止')+'(' + common.formatSeconds(me,resp.data.data.info.heart_time - resp.data.data.info.gps_time, false) + ')';
                                    stat = 'static';
                                } else {
                                    status = me.$t('行驶')+'(' + resp.data.data.info.speed + 'Km/h)';
                                    stat = 'running';
                                }
                            } else {
                                status =
                                    me.$t('离线')+'(' +
                                    common.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.setData({
                                    longitude: resp.data.data.info.last_location.lng,
                                    latitude: resp.data.data.info.last_location.lat
                                });
                            }
                            var device_info = resp.data.data.info;
                            device_info.signalType = '0';
                            this.setData({
                                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.setData({
                                gpsMarker: [device_marker]
                            });
                            this.setData({
                                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.setData({
                                macid: deviceInfo.mac_id,
                                deviceInfo: device_info,
                                gps: resp.data.data.info.gpscount,
                                gsm: parseInt(resp.data.data.info.online) === 0 ? 0 : resp.data.data.info.gsmlevel <= 15 ? 3 : resp.data.data.info.gsmlevel > 18 ? 5 : 4,
                                status: status,
                                deviceMarker: [device_marker],
                                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.setData({
                                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.setData({
                                            address: address,
                                            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 {
                            common.simpleToast(this,resp.data.msg);
                            clearInterval(this.locationTimer);
                            setTimeout(function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }, 1500);
                        }
                    }
                );
            }
        },

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

        bindTapMap(e) {
            this.setData({
                showInfo: false
            });
            if (this.selectFence != null) {
                var fence = this.selectFence;
                fence.latitude = e.detail.latitude;
                fence.longitude = e.detail.longitude;
                this.setData({
                    selectFence: fence,
                    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) {
			var me = this
            uni.showModal({
                content: me.$t('确定发送指令吗？'),
                showCancel: true,
                cancelText: me.$t('取消'),
                confirmText: me.$t('确定'),
                success: (res) => {
                    console.log(res);
                    if (res.confirm) {
                        common.loading(me);
                        http.postApi(
                            config.API_BATTERY_SEND_COMMAND,
                            {
                                macid: this.macid,
                                cmd: cmd
                            },
                            function (resp) {
                                if (resp.data.code === 200) {
                                    uni.hideLoading();
                                    common.simpleToast(me,me.$t('操作成功'));
                                } else {
                                    common.simpleToast(me,resp.data.msg);
                                }
                            }
                        );
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        },

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

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

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

        bindFencePopupOpen() {
            this.setData({
                fencePopupShow: true
            });
        },

        bindFencePopupClose() {
            this.setData({
                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.setData({
                selectFence: fence,
                circles: [
                    {
                        latitude: fence.latitude,
                        longitude: fence.longitude,
                        radius: parseInt(fence.radius),
                        color: '#6495ED1F',
                        fillColor: '#6495ED1F',
                        strokeWidth: 1
                    }
                ],
                fencePopupShow: false,
                latitude: fence.latitude,
                longitude: fence.longitude
            });
			console.log(this.selectFence,'this.selectFence');
            /*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
                    };
					console.log(fence,'fence');
                    this.setData({
                        selectFence: fence,
                        circles: [
                            {
                                latitude: fence.latitude,
                                longitude: fence.longitude,
                                radius: parseInt(fence.radius),
                                color: '#6495ED1F',
                                fillColor: '#6495ED1F',
                                strokeWidth: 1
                            }
                        ],
                        fencePopupShow: false
                    });
                }
            });
        },

        loadFenceList() {
            common.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.setData({
                            fenceList: fenceList
                        });
                    } else {
                        common.simpleToast(this,resp.data.msg);
                    }
                }
            );
        },

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

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

        onFenceTypeChange(e) {
            var fence = this.selectFence;
            fence.type = e.detail.value;
            this.setData({
                selectFence: fence
            });
        },

        onFenceRadiusDrag(e) {
            var fence = this.selectFence;
            fence.radius = e.detail.value;
            this.setData({
                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.setData({
                    endSlide: startSlide
                });
                this.setData({
                    selectFence: fence,
                    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.setData({
                    selectFence: fence,
                    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.setData({
                    selectFence: fence,
                    circles: [
                        {
                            latitude: fence.latitude,
                            longitude: fence.longitude,
                            radius: parseInt(fence.radius),
                            color: '#6495ED1F',
                            fillColor: '#6495ED1F',
                            strokeWidth: 1
                        }
                    ]
                });
            }
        },

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

        delFence() {
            var fence = this.selectFence;
            if (fence != null && fence.id) {
                common.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 {
                            common.simpleToast(this,resp.data.msg);
                        }
                        this.setData({
                            selectFence: null,
                            circles: [],
                            fencePopupShow: true
                        });
                    }
                );
            }
        },

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

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