You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
300 lines
7.3 KiB
300 lines
7.3 KiB
<template>
|
|
<view>
|
|
<map
|
|
subkey="WANBZ-6C56D-6P34Y-HWNMG-YHAH7-BJFP5"
|
|
:latitude="defauleMap.latitude"
|
|
:longitude="defauleMap.longitude"
|
|
scale="17"
|
|
:markers="markers"
|
|
show-location="true"
|
|
></map>
|
|
<view class="bot_time_card">
|
|
<view class="width_font row_cen_space-between bor_bot">
|
|
<view class="car_row">
|
|
<image class="car_css" src="../../static/images/index/car_info_icon.png"></image>
|
|
<view class="lef_bold">{{carInfo}}</view>
|
|
</view>
|
|
<view class="car_row" @tap="selectCar">
|
|
<text>切换设备 </text>
|
|
<uni-icons type="forward" size="20"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="time_width row_cen_space-between">
|
|
<view
|
|
v-for="(item,index) in timeType"
|
|
:key='index'
|
|
:class=" index == timeIndex ? 'time_active' : '' "
|
|
@tap="handleSelectTime(index)"
|
|
>{{ item }}</view>
|
|
</view>
|
|
<view class="time_row bor_bot bor_top">
|
|
<text class="time_name">开始时间：</text>
|
|
<view class="time_value">
|
|
<picker-time
|
|
ref="startTime"
|
|
:disabled="timeIndex !== 2"
|
|
placeholder="请选择开始时间"
|
|
:defaultValue="startTime"
|
|
start="2000-02-03 00:00"
|
|
end="2100-10-28 00:00"
|
|
fields="minute"
|
|
@change="changeStartPickerTime"
|
|
></picker-time>
|
|
</view>
|
|
<uni-icons type="forward" size="20"></uni-icons>
|
|
</view>
|
|
<view class="time_row bor_bot">
|
|
<text class="time_name">结束时间：</text>
|
|
<view class="time_value">
|
|
<picker-time
|
|
ref="endTime"
|
|
:disabled="timeIndex !== 2"
|
|
placeholder="请选择结束时间"
|
|
:defaultValue="endTime"
|
|
start="2000-02-03 00:00"
|
|
end="2100-10-28 00:00"
|
|
fields="minute"
|
|
@change="changeEndPickerTime"
|
|
></picker-time>
|
|
</view>
|
|
<uni-icons type="forward" size="20"></uni-icons>
|
|
</view>
|
|
<view class="btn_css">
|
|
<view class="btn" @click="goH5">开始播放</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {PickerTime} from '@/components/picker-time/picker-time.vue';
|
|
const {urlList,https} = require('@/static/api');
|
|
let today = ()=>{
|
|
let date = new Date();
|
|
const year = date.getFullYear()
|
|
const month = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`)
|
|
const day = (date.getDate() < 10 ? `0${date.getDate()}` : `${date.getDate()}`)
|
|
return {
|
|
startTime: `${year}-${month}-${day} 00:00`,
|
|
endTime: `${year}-${month}-${day} 23:59`
|
|
}
|
|
};
|
|
export default {
|
|
components:{
|
|
PickerTime
|
|
},
|
|
data() {
|
|
return {
|
|
carInfo:'',
|
|
timeType:['昨天','今天','任意'],
|
|
timeIndex:1,
|
|
defauleMap:{
|
|
latitude:'39.909',
|
|
longitude:'116.39742',
|
|
},
|
|
markers:[],
|
|
selectCarId:'',
|
|
|
|
startTime:today().startTime,
|
|
endTime: today().endTime,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
uni.showNavigationBarLoading()
|
|
this.selectCarId = options.id;
|
|
this.getCarInfo(options.id)
|
|
},
|
|
onShow() {
|
|
this.getCarInfo(this.selectCarId)
|
|
},
|
|
methods:{
|
|
// 切换车辆
|
|
selectCar(){
|
|
uni.navigateTo({
|
|
url: '/pages/carList/carList',
|
|
})
|
|
},
|
|
goH5(){
|
|
uni.navigateTo({
|
|
url: `/H5/pages/h5/h5?startTime=${this.startTime}&endTime=${this.endTime}&id=${this.selectCarId }&time=${this.timeIndex}`,
|
|
})
|
|
},
|
|
handleSelectTime(idx){
|
|
this.timeIndex = idx;
|
|
if(idx == 0){
|
|
this.startTime = this.yesterday().startTime;
|
|
this.endTime = this.yesterday().endTime;
|
|
}else{
|
|
this.startTime = today().startTime;
|
|
this.endTime = today().endTime;
|
|
}
|
|
},
|
|
//获取车辆详情(设置中心点,起点)
|
|
getCarInfo(id) {
|
|
https(urlList.getCarInfo+'/'+id,'GET','','').then(data => {
|
|
let carInfo = data.data;
|
|
this.carInfo = `${carInfo.vehiclePlate} ${carInfo.vehicleCode?'('+carInfo.vehicleCode+')':''}`;
|
|
this.defauleMap = {
|
|
latitude:carInfo.latitude,
|
|
longitude:carInfo.longitude,
|
|
};
|
|
this.markers = [{
|
|
id: 9999,
|
|
latitude: carInfo.latitude,
|
|
longitude: carInfo.longitude,
|
|
iconPath: '../../static/images/common/road.png',
|
|
width: '16px',
|
|
height: '30px',
|
|
rotate: 90,
|
|
anchor: {
|
|
x: .5,
|
|
y: .5
|
|
},
|
|
}];
|
|
uni.hideNavigationBarLoading()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title:err,
|
|
icon:'none',
|
|
duration:1500
|
|
});
|
|
uni.hideNavigationBarLoading()
|
|
})
|
|
},
|
|
getNextDate(date, type) {
|
|
let dd = new Date(date.replace(/-/g, "/")); //兼容ios
|
|
const oneDay = 24 * 60 * 60 * 1000;
|
|
let before;
|
|
if(type == 1){
|
|
before = dd.getTime() + oneDay;
|
|
}else{
|
|
before = dd.getTime() - oneDay;
|
|
};
|
|
dd.setTime(before);
|
|
const year = dd.getFullYear();
|
|
const month = dd.getMonth() + 1 < 10 ? `0${dd.getMonth() + 1}` : `${dd.getMonth() + 1}`;
|
|
const day = dd.getDate() < 10 ? `0${dd.getDate()}` : `${dd.getDate()}`;
|
|
const shi = date.slice(11,13);
|
|
const fen = date.slice(14,16);
|
|
console.log(year,month,day,shi,fen);
|
|
const newTime = `${year}-${month}-${day} ${shi}:${fen}`;
|
|
return newTime;
|
|
},
|
|
// 选择开始时间
|
|
changeStartPickerTime(date) {
|
|
let value = date.f3;
|
|
this.startTime = value;
|
|
let endTime = this.getNextDate(value,1);
|
|
this.endTime = endTime;
|
|
},
|
|
// 选择结束时间
|
|
changeEndPickerTime(date) {
|
|
let value = date.f3;
|
|
this.endTime = value;
|
|
let startTime = this.getNextDate(value,-1);
|
|
this.startTime = startTime
|
|
},
|
|
//昨天
|
|
yesterday() {
|
|
let date = new Date();
|
|
date = new Date(date - 24 * 60 * 60 * 1000)
|
|
const year = date.getFullYear()
|
|
const month = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`)
|
|
const day = (date.getDate() < 10 ? `0${date.getDate()}` : `${date.getDate()}`)
|
|
return {
|
|
startTime: `${year}-${month}-${day} 00:00`,
|
|
endTime: `${year}-${month}-${day} 23:59`
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
map {
|
|
width: 100vw;
|
|
height: calc(100vh - 500rpx);
|
|
}
|
|
.lef_bold{
|
|
margin-left: 5rpx;
|
|
font-weight: bold;
|
|
}
|
|
.time_active{
|
|
border-radius: 8rpx;
|
|
padding: 1rpx 20rpx 1rpx 20rpx;
|
|
background: #1B64F8FF;
|
|
color: white;
|
|
}
|
|
.row_cen_space-between{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.bor_bot{
|
|
border-bottom: 1rpx solid #e9e8ec;
|
|
}
|
|
.bor_top{
|
|
border-top: 1rpx solid #e9e8ec;
|
|
}
|
|
.bot_time_card{
|
|
width: 100%;
|
|
height: 500rpx;
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
.width_font{
|
|
width: 95%;
|
|
height: 90rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
.car_row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
image{
|
|
width: 37rpx;
|
|
height: 30rpx;
|
|
}
|
|
text{
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
.time_width{
|
|
width: 60%;
|
|
height: 90rpx;
|
|
font-size: 31rpx;
|
|
}
|
|
.time_row {
|
|
width: 95%;
|
|
height: 90rpx;
|
|
font-size: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
.time_name{
|
|
flex:1
|
|
}
|
|
.btn_css{
|
|
width: 95%;
|
|
padding: 20rpx 0rpx;
|
|
display:flex;
|
|
justify-content: center;
|
|
.btn{
|
|
height: 80rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color:#1B64F8FF;
|
|
color: white;
|
|
font-size: 31rpx;
|
|
border-radius:30rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|