<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="/static/resource/images/battery.png" 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>名称：{{ deviceInfo.name }}</view>
<view>状态：{{ status }}</view>
</view>
<view class="battery-desc flex-row flex-between">
<view>编号：{{ macid }}</view>
<view>设防状态：{{ deviceInfo.protectState ? (deviceInfo.protectState == 1 ? '设防' : '撤防') : '未知' }}</view>
</view>
<view class="battery-desc flex-row flex-between">
<view>控制：{{ deviceInfo.oilState == 1 ? '已通电' : '已断电' }}</view>
<view>定位类型：{{ deviceInfo.signalType == 0 ? 'GPS+北斗' : deviceInfo.signalType == 1 ? 'WIFI' : deviceInfo.signalType == 16 ? 'LBS' : '未知' }}</view>
</view>
<view class="battery-desc flex-row flex-between">
<view>当日里程：{{ deviceInfo.day_mil }}</view>
<view>总里程：{{ deviceInfo.mil }}</view>
</view>
<view class="battery-desc flex-row flex-between">
<view>
电压：{{
(deviceInfo.voltage ? deviceInfo.voltage + 'V' : '未知') +
(deviceInfo.elecState ? (deviceInfo.elecState == 1 ? '（主电接通）' : '（主电断开）') : '')
}}
</view>
<view v-if="deviceInfo && deviceInfo.temp && deviceInfo.temp != ''">温度: {{ deviceInfo.temp + '℃' }}</view>
</view>
<view class="battery-desc">通信：{{ deviceInfo.heart_time ? tools.formatTime(deviceInfo.heart_time) : '未知' }}</view>
<view class="battery-desc">定位：{{ deviceInfo.gps_time ? tools.formatTime(deviceInfo.gps_time) : '未知' }}</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 ? '/static/resource/images/zhuizong.png' : '/static/resource/images/zhuizong1.png'" class="bottom-img"></image>
</view>
<view class="bottom-centent">
<view class="bottom-item" @tap="bindTrackDialogOpen">
<image :src="trackPoints.length == 0 ? '/static/resource/images/guiji2.png' : '/static/resource/images/guiji1.png'" class="bottom-img"></image>
<view class="bottom-text">轨迹</view>
</view>
<view class="bottom-item" @tap="bindAlarmPopupOpen">
<image :src="alarmList.length == 0 ? '/static/resource/images/tongzhi.png' : '/static/resource/images/tongzhi1.png'" class="bottom-img"></image>
<view class="bottom-text">报警</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">导航</view>
</view>
<view class="bottom-item" @tap="bindSendCommand" data-cmd="CLOSERELAY">
<image src="/static/resource/images/duandian1.png" class="bottom-img"></image>
<view class="bottom-text">断电</view>
</view>
<view class="bottom-item" @tap="bindSendCommand" data-cmd="OPENRELAY">
<image src="/static/resource/images/tongdian1.png" class="bottom-img"></image>
<view class="bottom-text">通电</view>
</view>
</view>
<image v-if="trackPoints.length != 0" :src="inPlay ? '/static/resource/images/zhanting.png' : '/static/resource/images/bofang.png'" class="play-img" @tap="bindPlay"></image>
<image v-if="trackPoints.length != 0" src="/static/resource/images/tingliu.png" 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="/static/resource/images/guanbi1.png" class="close-img" @tap="bindCloseTrack"></image>
<view @tap="loadLastGpsInfo" class="gps_last">
<view class="text_view">最新</view>
<view class="text_view">GPS</view>
</view>
<image src="/static/resource/images/weilan2.png" class="fence-img" @tap="bindFencePopupOpen"></image>
<view v-if="trace" class="trace-box">追踪时间：{{ 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="/static/resource/images/position.png" @tap="moveToLocation"></image>
</view>
</view>
<view v-if="trackPoints.length != 0" class="track_bottom">
<view class="track_total_time">
时间:{{ tools.formatTimeNoSecond(trackDialogFrom.startTime / 1000) }} 至 {{ tools.formatTimeNoSecond(trackDialogFrom.endTime / 1000) }} 共{{ mileage_total }}公里
</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="/static/resource/images/fastForward.png"></image>
<text v-if="adjustSpeed == 0" class="fastForward_text">慢</text>
<text v-if="adjustSpeed == 1" class="fastForward_text">中</text>
<text v-if="adjustSpeed == 2" class="fastForward_text">快</text>
</view>
</view>
</view>
<van-dialog use-slot title="轨迹" :show="trackDialogShow" show-cancel-button confirm-button-text="查询" @close="bindTrackDialogClose" @confirm="bindTrackDialogConfirm">
<van-cell-group>
<view style="height: 20rpx"></view>
<view style="margin-left: 36rpx" class="flex-row">
<view class="location_mark">定位类型：</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>
<van-field :value="trackDialogFrom.formatStartTime" label="开始时间" left-icon="clock-o" disabled :border="false" @tap.native="bindTrackStartTimeSelect" />
<van-field :value="trackDialogFrom.formatEndTime" label="结束时间" left-icon="clock-o" disabled :border="false" @tap.native="bindTrackEndTimeSelect" />
<van-row gutter="2">
<van-col span="7" offset="1">
<van-button type="default" custom-style="border: 0;width:100%;" @click="bindTrackTimeSelectToday">当天</van-button>
</van-col>
<van-col span="8">
<van-button type="default" custom-style="border: 0;width:100%;" @click="bindTrackTimeSelectYesterday">昨天</van-button>
</van-col>
<van-col span="7">
<van-button type="default" custom-style="border: 0;width:100%;" @click="bindTrackTimeSelectLastday">前天</van-button>
</van-col>
</van-row>
</van-cell-group>
</van-dialog>
<van-popup
:show="alarmPopupShow"
:z-index="9999"
round
closeable
:overlay="flase"
custom-style="height: 45%"
safe-area-inset-top
position="bottom"
@close="bindAlarmPopupClose"
>
<van-cell-group>
<van-cell title="报警" />
<van-cell :value="item.address" @click="MoveToAlarm($event, { p: item })" :data-p="item" v-for="(item, index) in alarmList" :key="index">
<view slot="title">
<view class="van-cell-text">
<van-tag type="danger">{{ item.alarm_desc }}</van-tag>
\t
<van-tag type="primary">{{ item.speed }}公里/小时</van-tag>
</view>
<view class="van-cell-text">
{{ item.formatTime }}
</view>
</view>
</van-cell>
</van-cell-group>
</van-popup>
<van-popup
:show="trackStopPopupShow"
:z-index="9999"
round
closeable
:overlay="flase"
custom-style="height: 45%"
safe-area-inset-top
position="bottom"
@close="bindStopPopupClose"
>
<van-cell-group>
<van-cell title="停留点" />
<van-cell :value="item.address" @click="MoveToStop($event, { p: item })" :data-p="item" v-for="(item, index) in trackStopList" :key="index">
<view slot="title">
<view class="van-cell-text">
{{ item.name }}\t
<van-tag type="warning">{{ item.format_stop_time }}</van-tag>
</view>
<view class="van-cell-text">{{ item.time }} - {{ item.end_time }}</view>
</view>
</van-cell>
</van-cell-group>
</van-popup>
<van-popup :show="timeSelectShow" :z-index="9999" position="bottom" @close="bindTimeSelectClose">
<van-datetime-picker type="datetime" :value="selectTime" @confirm="bindTimeSelectConfirm" @cancel="bindTimeSelectClose" />
</van-popup>
<van-popup
:show="fencePopupShow"
:z-index="9999"
round
closeable
:overlay="flase"
custom-style="height: 45%"
safe-area-inset-top
position="bottom"
@close="bindFencePopupClose"
>
<van-cell-group>
<van-cell>
<view slot="title">
<view class="van-cell-text">
围栏
<van-button icon="plus" type="info" size="small" @tap.native="addFence" style="margin-left: 30rpx">添加</van-button>
</view>
</view>
</van-cell>
<van-cell :value="item.radius + '米'" @click="MoveToFence($event, { p: item })" :data-p="item" v-for="(item, index) in fenceList" :key="index">
<view slot="title">
<view class="van-cell-text">
{{ item.name }}
</view>
<view class="van-cell-text">报警类型: {{ item.type == 1 ? '进' : item.type == 2 ? '出' : item.type == 3 ? '双向' : '关闭' }}</view>
</view>
</van-cell>
</van-cell-group>
</van-popup>
<van-popup
:show="selectFence != null"
:z-index="9999"
round
closeable
:overlay="flase"
custom-style="height: 45%"
safe-area-inset-top
position="bottom"
@close="bindFenceClose"
>
<van-cell-group>
<van-cell>
<view slot="title">
<view class="van-cell-text">
围栏设置
<van-button v-if="selectFence.id" icon="cross" type="danger" size="small" @tap.native="delFence" style="margin-left: 30rpx">删除</van-button>
</view>
</view>
</van-cell>
<van-cell title="围栏名称" title-width="90px">
<input placeholder="请输入围栏名称" @blur="onFenceNameChange" :value="selectFence.name" style="color: rgba(0, 0, 0, 1)" />
</van-cell>
<!-- van-field value="{{ selectFence.name }}" label="围栏名称" placeholder="请输入围栏名称" border="{{ false }}" bind:change="onFenceNameChange"/ -->
<van-cell title="报警类型" title-width="90px">
<van-radio-group :value="selectFence.type" class="flex-row flex-around" @change="onFenceTypeChange">
<van-radio name="1">进</van-radio>
<van-radio name="2">出</van-radio>
<van-radio name="3">双向</van-radio>
<van-radio name="0">关闭</van-radio>
</van-radio-group>
</van-cell>
<van-cell title="围栏半径" title-width="90px">
<view class="flex-row flex-around" style="width: 100%; height: 100%">
<image src="/static/resource/images/-.png" 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%" />
<!--van-slider value="{{ selectFence.radius }}" min="1" max="10000" use-button-slot bind:change="onFenceRadiusChange" style="width: 75%;">
<view class="custom-button" slot="button">
{{ selectFence.radius }}米
</view>
</van-slider-->
<image src="/static/resource/images/+.png" style="width: 40rpx; height: 40rpx" @tap="onFenceRadiusPlus"></image>
</view>
</van-cell>
</van-cell-group>
<view style="padding: 0 16px; margin-top: 50rpx">
<button class="save-btn" @tap="bindFenceSave">保存</button>
</view>
</van-popup>
</view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script>
import mapControl from '@/component/mapControl/mapControl';
// 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
},
data() {
return {
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(new Date().getTime() - 3600000).getTime(),
formatStartTime: common.formatDateTime(new Date(new Date().getTime() - 3600000).getTime()),
endTime: new Date().getTime(),
formatEndTime: common.formatDateTime(new Date().getTime())
},
latitude_my: null,
longitude_my: null,
trackDialogShow: false,
selectTime: new Date().getTime(),
selectTimeType: '',
alarmPopupShow: false,
trackStopPopupShow: false,
timeSelectShow: false,
inPlay: false,
playTimer: null,
nowPlayIndex: 0,
totalTrackValue: 0,
currentTrackValue: 0,
macid: '',
gps: 0,
gsm: 0,
status: '',
address: '',
showInfo: true,
iconList: [],
locationTimer: null,
longitude: null,
latitude: null,
trace: false,
tracePoints: [],
traceTime: 0,
traceTimer: null,
fencePopupShow: false,
fenceList: [],
isLocationType: 1,
circles: [],
selectFence: null,
mapParams: {
enableSatellite: false,
// 是否开启卫星图
enableTraffic: false // 是否开启实时路况
},
isShowGPS: false,
// locationInfo:{}
locationType: '',
locationAdress: '',
locationGpsType: '',
locationGpsAdress: '',
gpsMarker: [],
flase: ''
};
},
/**
* 生命周期函数--监听页面加载
*/
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) => {
//console.log(res)
this.setData({
latitude_my: res.latitude,
longitude_my: res.longitude
});
}
});
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(resp.data.msg);
}
});
}
},
trackPlayChange(e) {
var index = e.detail.value;
this.setData({
nowPlayIndex: index
});
this.playLoop();
},
bindLocationType(e) {
const index = e.currentTarget.dataset.index;
console.log(index);
this.setData({
isLocationType: index
});
},
trackPlayChangeAdress(e) {
console.log('22222');
var index = e.detail.value;
this.setData({
nowPlayIndex: index
});
const me = this;
this.playLoop();
console.log(me.playMarker.length);
if (me.playMarker.length > 0) {
console.log('22222333333');
// 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
// })
// console.log("1111111")
// 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 = '地址: ' + 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();
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 = '地址: ' + 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(resp.data.msg);
}
}
);
},
readyDeviceInfo() {
const me = this;
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: config.QQ_MAP_KEY
});
const deviceInfo = storage.getSelectedDeviceInfo();
if (deviceInfo) {
console.log('1111');
console.log(deviceInfo);
// this.batteryWidth = deviceInfo.quantity/100*37
// console.log(deviceInfo.quantity)
uni.setNavigationBarTitle({
title: deviceInfo.mac_id
});
if (parseInt(deviceInfo.expire) === 1) {
common.simpleToast('设备到期');
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);
console.log('公里');
console.log(mileage_total);
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));
console.log(mileage);
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(resp.data.msg);
}
}
);
},
bindTrackDialogConfirm() {
this.bindTrackDialogClose();
this.setData({
inPlay: false
});
clearInterval(this.playTimer);
common.loading();
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('当前未有轨迹');
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: '起点',
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(p.stop_time),
address: ''
});
//mark弹出框坐标
trackMarker.push({
id: 0,
latitude: p.latitude,
longitude: p.longitude,
name: '',
iconPath: '/static/resource/images/start_point.png',
width: 28,
height: 35,
zIndex: 2,
callout: {
content:
'\u8D77\u70B9\n\u505C\u7559: ' +
common.formatSeconds(p.stop_time) +
'\n' +
'开始: ' +
p.time +
'\n' +
'结束: ' +
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 me = this;
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 = '地址: ' + 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) => {
// console.log(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(p.stop_time),
address: ''
});
//mark弹出框
trackMarker.push({
id: i,
latitude: parseFloat(p.latitude),
longitude: parseFloat(p.longitude),
name: '',
iconPath: '/static/resource/images/p-stop.png',
width: 28,
height: 35,
zIndex: 1,
callout: {
content:
'P' +
n +
'\n' +
'停留: ' +
common.formatSeconds(p.stop_time) +
'\n' +
'开始: ' +
p.time +
'\n' +
'结束: ' +
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 = '地址: ' + 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: '终点',
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(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(points[points.length - 1].stop_time) +
'\n' +
'开始: ' +
points[points.length - 1].time +
'\n' +
'结束: ' +
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 = '地址: ' + 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(resp.data.msg);
}
}
);
},
bindTrackDialogClose() {
this.setData({
trackDialogShow: false
});
},
bindTrackStartTimeSelect() {
this.setData({
selectTime: this.trackDialogFrom.startTime,
selectTimeType: 'track_start'
});
this.bindTimeSelectOpen();
},
bindTrackEndTimeSelect() {
this.setData({
selectTime: this.trackDialogFrom.endTime,
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 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' +
'时间: ' +
event.currentTarget.dataset.p.formatTime +
'\n' +
'速度: ' +
event.currentTarget.dataset.p.speed +
'公里/小时\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.trackPoints[this.nowPlayIndex].voltage +
'\n' +
'速度: ' +
this.trackPoints[this.nowPlayIndex].speed +
'km/小时\n' +
'时间: ' +
this.trackPoints[this.nowPlayIndex].time +
'\n' +
'里程: ' +
this.trackPoints[this.nowPlayIndex].mileage +
'公里\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 = '地址: ' + 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 me = this;
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 = '静止(' + common.formatSeconds(resp.data.data.info.heart_time - resp.data.data.info.gps_time, false) + ')';
stat = 'static';
} else {
status = '行驶(' + resp.data.data.info.speed + 'Km/h)';
stat = 'running';
}
} else {
status =
'离线(' +
common.formatSeconds(
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
});
}
console.log(resp.data.data.info);
console.log(this.batteryWidth);
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(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) {
console.log('11111');
if (this.isEmptyObject(resp.data.data.info.last_location)) {
common.simpleToast('当前设备没有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 = '静止(' + common.formatSeconds(resp.data.data.info.heart_time - resp.data.data.info.gps_time, false) + ')';
stat = 'static';
} else {
status = '行驶(' + resp.data.data.info.speed + 'Km/h)';
stat = 'running';
}
} else {
status =
'离线(' +
common.formatSeconds(
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)
// })
console.log('marker');
console.log(this.marker);
//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)
// })
console.log(resp.data.data.info);
this.setData({
batteryWidth: parseInt((this.deviceInfo.quantity / 100) * 37)
});
console.log(this.batteryWidth);
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(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) {
uni.showModal({
content: '确定发送指令吗？',
showCancel: true,
cancelText: '取消',
confirmText: '确定',
success: (res) => {
console.log(res);
if (res.confirm) {
common.loading();
http.postApi(
config.API_BATTERY_SEND_COMMAND,
{
macid: this.macid,
cmd: cmd
},
function (resp) {
if (resp.data.code === 200) {
uni.hideLoading();
common.simpleToast('操作成功');
} else {
common.simpleToast(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() {
//使用微信内置地图查看标记点位置，并进行导航
/*
console.log(this.data.longitude);
console.log(this.data.latitude);
console.log(this.data.longitude_my);
console.log(this.data.latitude_my);
*/
const latitude = this.latitude;
const longitude = this.longitude;
uni.openLocation({
latitude,
//要去的纬度-地址
longitude,
//要去的经度-地址
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) {
/* ---处理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
});
/*map.moveToLocation({
latitude: event.currentTarget.dataset.p.latitude,
longitude: event.currentTarget.dataset.p.longitude
})*/
},
addFence() {
var map = uni.createMapContext('myMap');
map.getCenterLocation({
success: (res) => {
const fence = {
name: '',
type: '0',
latitude: res.latitude,
longitude: res.longitude,
radius: 100
};
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();
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(resp.data.msg);
}
}
);
},
bindFenceClose() {
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;
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;
if (!fence.name) {
common.simpleToast('请输入围栏名称');
return;
}
if (fence != null) {
common.loading();
const deviceInfo = storage.getSelectedDeviceInfo();
if (fence.id) {
http.postApi(
config.API_FENCE_EDIT,
Object.assign(
{
macid: deviceInfo.mac_id
},
fence
),
(resp) => {
uni.hideLoading();
if (resp.data.code === 200) {
this.loadFenceList();
} else {
common.simpleToast(resp.data.msg);
}
this.setData({
selectFence: null,
circles: [],
fencePopupShow: true
});
}
);
} else {
http.postApi(
config.API_FENCE_ADD,
Object.assign(
{
macid: deviceInfo.mac_id
},
fence
),
(resp) => {
uni.hideLoading();
if (resp.data.code === 200) {
this.loadFenceList();
} else {
common.simpleToast(resp.data.msg);
}
this.setData({
selectFence: null,
circles: [],
fencePopupShow: true
});
}
);
}
}
},
delFence() {
var fence = this.selectFence;
if (fence != null && fence.id) {
common.loading();
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(resp.data.msg);
}
this.setData({
selectFence: null,
circles: [],
fencePopupShow: true
});
}
);
}
},
moveToLocation: function () {
//console.log('move to')
this.mapCtx.moveToLocation();
//this.setData({ showShopInfo: false, scale: 14 })
},
mapChange: function (e) {
this.setData({
mapParams: e.detail.mapParams
});
}
}
};
</script>
<style>
@import './deviceLocal.css';
</style>