写在前面：1.uniapp内置地图点聚合无法在PC预览，只能手机上看，千万别被坑。2.另外下面的代码示例可以直接运行，有静态数据。3.有几个bug后面都优化掉了，优化的bug我在留言里提及过，优化后的整个页面我放到文章最后面，另外车辆跑路线车头不能很准确的跟随路线，不知道原因，后面把车的图标换成原形状定位点
效果图如下，直接粘贴代码即可，中间只有下拉是使用uview组件，不使用直接注释即可，其它都是手写样式
- 页面没有接口交互，代码复制粘贴直接可用，很多无用代码注释并没有删除，做的是模拟数据
- H5端没有注册key，注册key可以自行百度
- 复杂功能已经实现，其余就是调用接口赋值，大家都会
- 项目中应用图片我给你们打包好啦，我讲究不？
- 效果视频见我另一个文章
- 好用务必给我一个srart
监控页
<template>
<!-- @tap="clickMap" -->
<view class="map_wrap">
<u-picker :show="showPicker" :columns="columnsMapIdList" keyName="vehicleNo"
@confirm="confirmHandler"></u-picker>
<map class="mapCarMonitor" id="mapCarMonitor" style="width: 100%;" :latitude="mapCenter.latitude"
:longitude="mapCenter.longitude" :markers="markers" :scale="12" @controltap="controltap">
</map>
<view class="carformTab">
<view class="carformTab-c">
<view class="carformTab-t" v-for="(item,index) in tabList" :key="index" @click="activeTab(item,index)">
<view style="overflow: unset;">
<view :class="{active:index == current,carName:true}">
{{item.name}}
</view>
<view class="carCount">
{{item.count>99?'99+':item.count}}
</view>
<view :class="{activebg:index == current,carLine:true}"></view>
</view>
</view>
</view>
</view>
<view class="coverFoot">
<view class="coverFoot-title">
<view class="coverFoot-title-info">
<view class="title-info-left">
<view class="title-info-left-i" @click="showDownMenu">
<view class="left-name">
{{carDatas.name}}
</view>
<view class="left-icon">
<image class="left-icon-img" src="../../../static/images/carDriving/xiala.png"></image>
</view>
</view>
<!-- <view class="selectDown" v-show="showMenu">
<view class="selectDownItem" v-for="(item,index) in carOptions" :key='item.id'
@click="itemClick(item)">{{item.name}}</view>
</view> -->
</view>
<view class="title-info-right" @click="goCarMonitor">
车辆轨迹
</view>
</view>
<view class="font-24 conmmon-class-two title-time">
<view class="conmmon-class-one time-icon">
<image class="imageClass" src="../../../static/images/carDriving/time.png"></image>
</view>
<view class="title-time-count">
08-25 22:22:58
</view>
<view class="title-time-speed">
8KM/H
</view>
</view>
<view class="font-24 conmmon-class-two title-time">
<view class="conmmon-class-one time-icon">
<image class="imageClass" src="../../../static/images/carDriving/weizhi.png"></image>
</view>
<view class="">
黑龙江省哈尔滨市南岗区西大直街92号
</view>
</view>
<view class="font-24 conmmon-class-two title-time">
<view class="conmmon-class-one time-icon">
<image class="imageClass" src="../../../static/images/carDriving/gantanhao.png"></image>
</view>
<view class="abnormal-class">
超速异常
</view>
</view>
</view>
<view class="footRoute">
<view class="title-time">
<view class="car-class">
<image class="car-class-i" src="../../../static/images/carDriving/car4.png"></image>
</view>
<view class="car-info">
W1213484798152144411
</view>
</view>
<view class="start-location font-24 title-time">
<view class="line-class">
</view>
<view class="conmmon-class-one route-start-icon">
起
</view>
<view class="">
黑河
</view>
</view>
<view class="font-24 conmmon-class-two title-time">
<view class="conmmon-class-one route-end-icon">
终
</view>
<view class="">
哈尔滨
</view>
</view>
<view class="footRoute-con">
查询
</view>
</view>
</view>
</view>
</template>
<script>
import {
findByAllCarInfo,
findByAllCarIdList
} from '@/api/carManage/carDriving'
export default {
data() {
return {
showPicker: false,
columnsMapIdList: [
[{
label: '雪月夜',
id: 2021
}, {
label: '冷夜雨',
id: 804
}]
],
// 默认请求全部地图数据
params: {
"pageParamVO": {
"curPage": 1,
"pageSize": 9999,
},
"type": 0,
"vehicleIdList": [],
"orgId": 0,
"groupId": 0
},
// 运行车辆数组
goingCarsList: [],
// 停止车辆数组
stopCarsList: [],
// 报警车辆数组
warningCarsList: [],
mapCenter: {
longitude: "",
latitude: "",
},
carDatas: {
name: '黑W12345',
},
// carOptions: [{
// id: 123,
// name: '选项1'
// },
// {
// id: 1233,
// name: '选项2'
// },
// {
// id: 12351,
// name: '选项333'
// },
// {
// id: 12352,
// name: '选项345'
// },
// {
// id: 12353,
// name: '选项23456'
// },
// {
// id: 12354,
// name: '选项5'
// },
// {
// id: 12354555,
// name: '选项123'
// }
// ],
// showMenu: false,
tabList: [{
name: '全部',
count: 999
}, {
name: '运行',
count: 999
}, {
name: '停止',
count: 999
}, {
name: '报警',
count: 999
}],
current: 0,
title: 'map',
markers: [],
// controls: [{ // 控件
// id: 99,
// position: { // 控件位置
// left: 160,
// top: 120
// },
// iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
// }],
address_info: "",
address_info_recomd: "",
address: ""
}
},
onReady() {
// 1.页面准备好后，获取到map组件的执行上下文。注意：这里是取的map的id属性
this.mapContext = uni.createMapContext("mapCarMonitor", this);
this.getMarkers(this.params)
// this.getByAllCarIdList()
},
onShow() {
},
onLoad() {
},
methods: {
// 获取车辆id下拉数组
getByAllCarIdList() {
findByAllCarIdList().then(res => {
console.log(res)
this.columnsMapIdList[0] = res.result
})
},
// 获取地图点位
getMarkers(params) {
// findByAllCarInfo(params).then(res => {
// console.log(res)
// 运行车辆数组
// this.goingCarsList = []
// 停止车辆数组
// this.stopCarsList = []
// 报警车辆数组
// this.warningCarsList = []
// 对返回数组进行处理,符合地图渲染要求
const markersList = []
// const result = res.result.monitArr
const result = [{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "京AAY327",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2630
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "京AFQ177",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2437
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "京AGU736",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2653
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "京AUH706",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2436
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "冀C65362",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2759
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "吉AS8803",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2493
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "吉AV2400",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2572
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "吉AW8947",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2662
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "吉AX6635",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2703
},
{
"aInfo": "",
"accStatus": 1,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "107015191764171",
"dArr": [],
"direction": 91,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": 1694592391000,
"gpsTimeStr": "09-13 16:06:31",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 45.307484,
"loadWeight": -1,
"lon": 126.916534,
"odo": 1934.4,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "黑龙江省哈尔滨市五常市兴隆大街|X005(普通路)利群文化书店西",
"pointInfo": "",
"regName": "黑A9L8E2",
"speed": "0",
"status": 2,
"stopInfo": "停车:3小时25分钟30秒",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "ACC关,3D定位,天线正常,CSQ:31,停车:3小时25分钟30秒",
"vehicleId": 1842
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "黑A9QG70",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2230
},
{
"aInfo": "",
"accStatus": 1,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "107015191764168",
"dArr": [],
"direction": 111,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": 1694573375000,
"gpsTimeStr": "09-13 10:49:35",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 44.676314,
"loadWeight": -1,
"lon": 127.742695,
"odo": 4892.5,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "黑龙江省哈尔滨市五常市X163(普通路)温馨旅馆北",
"pointInfo": "",
"regName": "黑A9Y28U",
"speed": "0",
"status": 2,
"stopInfo": "停车:16分钟53秒",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "ACC关,3D定位,天线正常,CSQ:23,停车:16分钟53秒",
"vehicleId": 1854
},
{
"aInfo": "",
"accStatus": 1,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "107015191763219",
"dArr": [],
"direction": 94,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": 1694592630000,
"gpsTimeStr": "09-13 16:10:30",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 46.319483,
"loadWeight": -1,
"lon": 129.570655,
"odo": 10527.4,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "黑龙江省哈尔滨市依兰县迎宾巷(普通路)金岛宾馆洗浴东",
"pointInfo": "",
"regName": "黑AA2C19",
"speed": "0",
"status": 2,
"stopInfo": "停车:4分钟32秒",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "ACC关,3D定位,天线正常,CSQ:31,停车:4分钟32秒",
"vehicleId": 1780
},
{
"aInfo": "",
"accStatus": 1,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "107015191763893",
"dArr": [],
"direction": 245,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": 1694592381000,
"gpsTimeStr": "09-13 16:06:21",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 45.825429,
"loadWeight": -1,
"lon": 126.654513,
"odo": 1929.3,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "黑龙江省哈尔滨市松北区创业大道(普通路)糖厂小区11号楼北",
"pointInfo": "",
"regName": "黑AA2D27",
"speed": "0",
"status": 2,
"stopInfo": "停车:7小时18分钟10秒",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "ACC关,3D定位,天线正常,CSQ:21,停车:7小时18分钟10秒",
"vehicleId": 1005
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "黑AA586挂",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2214
},
{
"aInfo": "",
"accStatus": 0,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": -2209017600000,
"gpsTimeStr": "01-01 00:00:00",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 52.346668,
"loadWeight": -1,
"lon": 124.71941,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "",
"pointInfo": "",
"regName": "黑AA600挂",
"speed": "0",
"status": 2,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "",
"vehicleId": 2213
},
{
"aInfo": "",
"accStatus": 1,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "129018230141191",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": 1694592666000,
"gpsTimeStr": "09-13 16:11:06",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 47.319379,
"loadWeight": -1,
"lon": 123.957714,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "黑龙江省齐齐哈尔市龙沙区南萃街(普通路)南萃街53号西53米",
"pointInfo": "",
"regName": "黑AA663挂",
"speed": "0",
"status": 2,
"stopInfo": "停车:5小时37分钟37秒",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "ACC关,3D定位,天线正常,停车:5小时37分钟37秒",
"vehicleId": 2043
},
{
"aInfo": "",
"accStatus": 1,
"alarmStatus": 0,
"alarmStr": "",
"area": "哈尔滨中心局",
"cameraChannel": 0,
"commids": "129018230141187",
"dArr": [],
"direction": 0,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": 1694592666000,
"gpsTimeStr": "09-13 16:11:06",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 45.84856,
"loadWeight": -1,
"lon": 126.617517,
"odo": 0,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "黑龙江省哈尔滨市松北区浦达路(普通路)黑龙江融拓北方机械有限责任公司-东南门西",
"pointInfo": "哈尔滨中心局",
"regName": "黑AA667挂",
"speed": "0",
"status": 2,
"stopInfo": "停车:13小时36分钟22秒",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "ACC关,3D定位,天线正常,停车:13小时36分钟22秒",
"vehicleId": 2037
},
{
"aInfo": "",
"accStatus": 2,
"alarmStatus": 0,
"alarmStr": "",
"area": "",
"cameraChannel": 0,
"commids": "107015191762037",
"dArr": [],
"direction": 32,
"driverInfo": "",
"eInfo": "",
"eqSourceID": 0,
"exStatus": 0,
"gpsTime": 1694592659000,
"gpsTimeStr": "09-13 16:10:59",
"h1": "",
"h2": "",
"h3": "",
"h4": "",
"isAdas": 0,
"isCamera": 0,
"isLcd": 0,
"isStandardEquip": 0,
"isStandardVideo": 0,
"lat": 45.678599,
"loadWeight": -1,
"lon": 126.552804,
"odo": 3106.1,
"oil": "",
"oilIsException": 0,
"oilUpLatestGpsTime": "",
"oilUpLatestLat": "",
"oilUpLatestLon": "",
"onlineStatus": 0,
"openDoorInfo": [],
"placeName": "黑龙江省哈尔滨市南岗区王岗头道街(普通路)新航路30号北",
"pointInfo": "",
"regName": "黑AA6K97",
"speed": "8",
"status": 1,
"stopInfo": "",
"t1": "",
"t2": "",
"t3": "",
"t4": "",
"tArr": [{
"s": 0,
"ta": "",
"wayArr": []
}],
"telPhone": "",
"tempExp": 0,
"vStatus": "ACC开,3D定位,天线正常,CSQ:23",
"vehicleId": 1986,
}
]
// const result = res.result.monitArr
// 根据车辆不同状态,渲染不同图标
let carIcon1 = '../../../static/images/carDriving/car1.png'
let carIcon2 = '../../../static/images/carDriving/car2.png'
let carIcon3 = '../../../static/images/carDriving/car3.png'
let carIcon = ''
for (let i = 0; i < result.length; i++) {
// 判断车辆状态不同,渲染不同图标1运行,2停止,3报警
if (result[i].status == 1) {
carIcon = carIcon1
// 将不同状态车辆单独放置对应数组,避免tab栏切换再次请求
// 运行车辆数组
// this.goingCarsList.push({
// id: result[i].vehicleId,
// longitude: result[i].lon,
// latitude: result[i].lat,
// iconPath: carIcon,
// width: 22,
// height: 20,
// callout: {
// content: result[i].regName,
// display:'ALWAYS',
// fontSize: 14,
// borderRadius: 5,
// color:'#000',
// bgColor: '#ffffff',
// padding: 4,
// borderRadius:4,
// textAlign: 'center'
// }
// })
} else if (result[i].status == 2) {
carIcon = carIcon2
// 停止车辆数组
// this.stopCarsList.push({
// id: result[i].vehicleId,
// longitude: result[i].lon,
// latitude: result[i].lat,
// iconPath: carIcon,
// width: 22,
// height: 20,
// callout: {
// content: result[i].regName,
// display:'ALWAYS',
// fontSize: 14,
// borderRadius: 5,
// color:'#000',
// bgColor: '#ffffff',
// padding: 4,
// borderRadius:4,
// textAlign: 'center'
// }
// })
} else {
carIcon = carIcon3
// 报警车辆数组
// this.warningCarsList.push({
// id: result[i].vehicleId,
// longitude: result[i].lon,
// latitude: result[i].lat,
// iconPath: carIcon,
// width: 22,
// height: 20,
// callout: {
// content: result[i].regName,
// display:'ALWAYS',
// fontSize: 14,
// borderRadius: 5,
// color:'#000',
// bgColor: '#ffffff',
// padding: 4,
// borderRadius:4,
// textAlign: 'center'
// }
// })
}
// 全部车辆数组
markersList.push({
id: result[i].vehicleId,
longitude: result[i].lon,
latitude: result[i].lat,
iconPath: carIcon,
width: 22,
height: 20,
callout: {
content: result[i].regName,
display: 'ALWAYS',
fontSize: 14,
borderRadius: 5,
color: '#000',
bgColor: '#ffffff',
padding: 4,
borderRadius: 4,
textAlign: 'center'
}
})
}
// 拿到请求数据后，把数据传给点聚合功能；
this.setMarkersAndCluster(markersList) // 3、调用聚合功能
// 渲染地图
// this.markers = markersList
// 赋值tab栏数量
// this.tabList[0].count = res.result.stat.allCnt
// this.tabList[1].count = res.result.stat.runCnt
// this.tabList[2].count = res.result.stat.stopCnt
// this.tabList[3].count = res.result.stat.alarmCnt
this.tabList[0].count = 4
this.tabList[1].count = 4
this.tabList[2].count = 0
this.tabList[3].count = 0
// 设置地图中心点,默认取数组第一条数据
this.mapCenter = {
longitude: this.markers[0].longitude,
latitude: this.markers[0].latitude,
}
console.log(123)
// }).catch(err => {
// console.log('错误')
// console.log(1234)
// })
// let markesData = [{
// id: 1,
// longitude: 126.603150,
// latitude: 45.817123,
// iconPath: '../../../static/images/carDriving/car2.png',
// width: 22,
// height: 20,
// callout: {
// content: '首都机场',
// display:'ALWAYS',
// fontSize: 14,
// borderRadius: 5,
// color:'#000',
// bgColor: '#ffffff',
// padding: 4,
// borderRadius:4,
// textAlign: 'center'
// }
// },
// {
// id: 2,
// longitude: 126.692688,
// latitude: 45.733888,
// iconPath: '../../../static/images/carDriving/car1.png',
// width: 22,
// height: 20,
// callout: {
// content: '首都机场',
// display:'ALWAYS',
// fontSize: 14,
// borderRadius: 5,
// color:'#000',
// bgColor: '#ffffff',
// padding: 4,
// borderRadius:4,
// textAlign: 'center'
// }
// }
// ]
// this.markers = markesData
// this.mapCenter = {
// longitude: this.calculateCenter(markesData).longitude,
// latitude: this.calculateCenter(markesData).latitude,
// }
// this.mapCenter={
// longitude: 126.661995,
// latitude: 45.742227,
// }
},
// 聚合功能
setMarkersAndCluster(markerList) {
// 1.组装数据之后，并赋值给地图上的marker
this.markers = Array.from(markerList).map((item, i) => {
return {
...item,
width: 41,
height: 41,
iconPath: '../../../static/images/carDriving/car1.png',
joinCluster: true, // 这个属性很重要，必须要
callout: { // 自定义标记点上方的气泡窗口
content: '***聚合1',
display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
padding: 5,
textAlign: 'center',
color: '#C2874D',
borderRadius: 4
}
// label: { // 为标记点旁边增加标签
// content: '你好，marker',
// borderColor: '#ff0000',
// bgColor: '#ffffff'
// },
}
})
// 2.初始化点聚合的配置，未调用时采用默认配置
this.mapContext.initMarkerCluster({
enableDefaultStyle: false, // 是否启用默认的聚合样式(是否用自定义图标)
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
})
// 3.发生聚合时，给聚合点设置marker标签
this.mapContext.on('markerClusterCreate', res => {
const clusters = res.clusters // 新产生的聚合簇
const zhou = clusters.map(item => {
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = item
console.log(clusterId)
return {
...center,
width: 50,
height: 50,
clusterId, // 必须有
iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
borderRadius: 8,
joinCluster: true,
label: { // 定制聚合点样式
content: markerIds.length + '',
fontSize: 14,
width: 18,
height: 18,
color: '#ffffff',
bgColor: '#C2874D',
borderRadius: 6,
textAlign: 'center',
anchorX: 25,
anchorY: -60,
}
}
})
// 4. 添加聚合簇标签
this.mapContext.addMarkers({
markers: zhou,
clear: false, //是否先清空地图上所有的marker
})
console.log(3123123)
})
},
// 计算地图的中心点
calculateCenter(markesData) {
var sumLongitude = 0;
var sumLatitude = 0;
for (var i = 0; i < markesData.length; i++) {
sumLongitude += markesData[i].longitude;
sumLatitude += markesData[i].latitude;
}
var averageLongitude = sumLongitude / markesData.length;
var averageLatitude = sumLatitude / markesData.length;
return {
longitude: averageLongitude,
latitude: averageLatitude
};
},
confirmHandler(e) {
console.log(e)
this.showPicker = false
},
// 判断是否展开下拉框
showDownMenu() {
this.showPicker = true
},
// itemClick(item) {
// console.log(item)
// this.showMenu = !this.showMenu
// this.carDatas.name = item.name
// },
// 切换导航栏
activeTab(item, index) {
if (item.count < 1 && index != 0) {
uni.showToast({
icon: 'none',
title: '暂无' + item.name + '车辆'
})
return
}
this.current = index
},
// 跳转车辆导航页
goCarMonitor() {
uni.navigateTo({
url: '/pages/carManage/carDrivingTrajectory/index',
})
}
}
}
</script>
<style scoped lang="scss">
.map_wrap {
height: calc(100vh - 44px);
/* #ifdef MP-WEIXIN */
height: 100vh;
/* #endif */
}
.mapCarMonitor {
height: 100%;
}
// view {
// overflow: unset;
// }
.carformTab {
position: absolute;
top: 150rpx;
// background-color: #fff;
width: 100%;
overflow: unset;
// background-color: rgba(255, 0, 0, 0);
display: flex;
justify-content: center;
.carformTab-c {
width: 690rpx;
padding: 0 40rpx;
box-sizing: border-box;
background-color: #fff;
border-radius: 36rpx;
height: 72rpx;
overflow: unset;
display: flex;
align-items: center;
justify-content: space-between;
.carformTab-t {
width: 120rpx;
height: 100%;
overflow: unset;
text-align: center;
position: relative;
}
}
.carName {
width: 100rpx;
height: 52rpx;
line-height: 72rpx;
overflow: unset;
// margin: 16rpx 0 2rpx 0;
}
.carCount {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -0rpx;
left: 68rpx;
// width: 48rpx;
// height: 30rpx;
padding: 4rpx 12rpx;
background: #999999;
border-radius: 50%;
overflow: unset;
color: #fff;
overflow: unset;
font-size: 12px;
}
.carLine {
width: 60rpx;
height: 6rpx;
background-color: none;
margin: 12rpx 20rpx 0 18rpx;
}
.active {
font-size: 32rpx;
color: #1F9A44;
font-weight: bold;
}
.activebg {
background-color: #1F9A44;
}
}
.coverFoot {
position: absolute;
left: 0;
bottom: 0;
background-color: #fff;
width: 100%;
height: 458rpx;
display: flex;
justify-content: center;
}
.coverFoot-title {
width: 690rpx;
height: 242rpx;
background-color: #fff;
position: absolute;
top: -74rpx;
left: 50%;
margin-left: -345rpx;
border-radius: 30rpx;
box-sizing: border-box;
padding: 20rpx 20rpx 0 20rpx;
box-shadow: 3px 4px 4px #eadfdf;
}
.coverFoot-title-info {
display: flex;
justify-content: space-between;
align-items: center;
.title-info-left {
.title-info-left-i {
display: flex;
align-items: center;
}
.left-name {
width: 180rpx;
font-size: 36rpx;
font-weight: bold;
color: #222222;
}
.left-icon {
width: 80rpx;
height: 48rpx;
padding-left: 28rpx;
display: flex;
align-items: center;
.left-icon-img {
width: 28rpx;
height: 14rpx;
}
}
}
.title-info-right {
width: 132rpx;
height: 40rpx;
line-height: 40rpx;
background-color: #1F9A44;
color: #ffffff;
text-align: center;
font-size: 22rpx;
border-radius: 20rpx;
}
// .title-info-right:active{
// background-color: #000;
// }
}
.conmmon-class-three {
margin: 30rpx 0;
}
.conmmon-class-two {
margin: 24rpx 0;
}
.conmmon-class-one {
width: 26rpx;
height: 26rpx;
margin-right: 10rpx;
.imageClass {
width: 26rpx;
height: 26rpx;
}
}
.font-24 {
font-size: 24rpx;
color: #666666;
}
.title-time {
display: flex;
align-items: center;
.title-time-speed {
margin-left: 20rpx;
}
}
.abnormal-class {
color: #FF3131;
}
.footRoute {
width: 690rpx;
height: 290rpx;
margin-top: 168rpx;
background-color: #fff;
box-sizing: border-box;
padding: 20rpx;
.car-class {
width: 40rpx;
height: 34rpx;
margin-right: 10rpx;
.car-class-i {
width: 40rpx;
height: 34rpx;
}
}
.car-info {
color: #222222;
font-size: 30rpx;
font-weight: bold;
}
.route-start-icon {
width: 30rpx;
height: 30rpx;
line-height: 30rpx;
background: #1F9A44;
border-radius: 50%;
font-size: 18rpx;
color: #ffffff;
text-align: center;
}
.route-end-icon {
width: 30rpx;
height: 30rpx;
line-height: 30rpx;
background: #FFA970;
border-radius: 50%;
font-size: 18rpx;
color: #ffffff;
text-align: center;
}
.start-location {
margin: 24rpx 0 30rpx 0;
}
.footRoute-con {
width: 298rpx;
height: 60rpx;
background: #1F9A44;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
color: #ffffff;
}
.line-class {
position: absolute;
top: 280rpx;
left: 64rpx;
width: 2rpx;
height: 38rpx;
background-color: #ccc;
}
}
.selectDown {
position: absolute;
background-color: #fff;
box-shadow: 6rpx 6px 30rpx #ccc;
top: 38px;
left: 10px;
width: 114px;
height: 260rpx;
border-radius: 8rpx;
overflow-y: scroll;
z-index: 999;
.selectDownItem {
display: flex;
width: 100%;
height: 50rpx;
align-items: center;
justify-content: center;
background-color: #fff;
z-index: 9999;
}
.selectDownItem:active {
background-color: #eadfdf;
}
}
</style>
跳转到轨迹页
<template>
<view class="map_wrap">
<u-datetime-picker title="开始日期" :show="showpickerStart" @cancel="showpickerStart = false" v-model="pickerValue" mode="datetime" :formatter="formatter"
ref="datetimePicker" @confirm="confirmPickerstart"></u-datetime-picker>
<u-datetime-picker title="结束日期" :show="showpickerEnd" @cancel="showpickerEnd = false" v-model="pickerValue" mode="datetime" :formatter="formatter"
ref="datetimePicker1" @confirm="confirmPickerend"></u-datetime-picker>
<map class="mapCarDriving" id="mapCarDriving" style="width: 100%;" :markers="markers" :polyline="polyline"
:include-points="polyline[0].points" :scale="16" :latitude="polyline[0].points[0].latitude"
:longitude="polyline[0].points[0].longitude">
</map>
<view class="card-roll-content">
<view class="card-roll-1 card-roll-common">
2023-09-07 07:56:29
</view>
<view class="card-roll-2 card-roll-common">
7:56:11
</view>
<view class="card-roll-3 card-roll-common">
0.6km/125.3km
</view>
<view class="card-roll-4 card-roll-common">
5km/h
</view>
</view>
<view class="drivingContent" v-show="isQuery">
<view class="carId">
<view class="carId-name">
车牌号码
</view>
<view class="carId-number">
黑M123H24
</view>
</view>
<view class="carId-time lineClass">
时间选择
</view>
<view class="carId-time dateClass">
<view :class="{active:index == current,carName:true}" :key="item.name"
v-for="(item,index) in timeData" @click="checkDate(index)">
{{item.name}}
</view>
</view>
</view>
<view class="drivingDataContent" v-show="!isQuery">
<view class="drivingData-bg">
<view v-if="!isDtail" class="button-group-left button-group-common" @click="speedReturn">
<view class="group-left-font">
1倍速
</view>
<view class="group-left-icon">
<image class="icon-img-up-speed"
src="../../../static/images/carDriving/speed.png"></image>
</view>
</view>
<view v-if="!isDtail" class="button-group-right button-group-common" @click="queryPop">
<view class="group-right-font">
查询
</view>
<view class="group-right-icon">
<image class="icon-img-query"
src="../../../static/images/carDriving/query.png"></image>
</view>
</view>
<view class="start-icon-content">
<image v-show="!isDtail" class="icon-img-up"
src="../../../static/images/carDriving/up.png" @click="upDetail"></image>
<image v-show="isDtail" class="icon-img-down"
src="../../../static/images/carDriving/down.png" @click="upDetail"></image>
<image v-show="!isStart && !isDtail" class="icon-img-start"
src="../../../static/images/carDriving/start.png" @click="handleStartMove"></image>
<image v-show="isStart && !isDtail" class="icon-img-start"
src="../../../static/images/carDriving/start1.png" @click="handleStopMove"></image>
</view>
<view class="carId">
<view class="carId-name">
黑M123H24
</view>
<view class="carId-number">
75KM
</view>
</view>
<view class="carId-info">
<view class="carId-info-1">
<view class="carId-info-1-speed">
22.3KM/H
</view>
<view class="">
平均速度
</view>
</view>
<view class="carId-info-2">
<view class="carId-info-2-time">
0秒
</view>
<view class="">
行驶时常
</view>
</view>
<view class="carId-info-3">
<view class="carId-info-3-count">
0
</view>
<view class="">
停车次数
</view>
</view>
</view>
<view class="carId-info-trip" v-show="isDtail">
<view class="trip-content ">
<view class="trip-common">
<view class="trip-left">
<view class="trip-left-icon">
</view>
<view class="trip-left-name">
起点
</view>
</view>
<view class="trip-right">
2023-09-05 14:17:14
</view>
</view>
<view class="trip-adreass">
云南省测试数据云南省测试数据云南省云南省测试数据云南省测试数据云南省测试数据云南省测试数据云南省测试数据
</view>
</view>
<view class="trip-content ">
<view class="trip-common">
<view class="trip-left">
<view class="trip-left-icon trip-left-icon-end">
</view>
<view class="trip-left-name">
终点
</view>
</view>
<view class="trip-right">
2023-09-05 14:17:14
</view>
</view>
<view class="trip-adreass">
数据云南省测试数据云南省测试数据云南省测试数据云南省测试数据云南省测试数据云南省测试数据
</view>
</view>
</view>
</view>
<view class="driving-tips" v-show="isDtail">
<view class="driving-tips-title">
<view class="driving-tips-ticon">
<image class="icon-img-down"
src="../../../static/images/carDriving/warn.png"></image>
</view>
<view class="driving-tips-name">
报警
</view>
<view class="driving-tips-count">
0
</view>
</view>
<view class="driving-tips-content">
该车辆暂无报警信息!
</view>
</view>
<view class="driving-tips" v-show="isDtail">
<view class="driving-tips-title">
<view class="driving-tips-ticon">
<image class="icon-img-down"
src="../../../static/images/carDriving/heat.png"></image>
</view>
<view class="driving-tips-name">
温度
</view>
</view>
<view class="driving-tips-content">
该车辆暂无温度信息!
</view>
</view>
<view class="driving-tips driving-tips-fast" v-show="isDtail">
<view class="fast-left">
<view class="">
<image class="fast-left-icon"
src="../../../static/images/carDriving/fast.png"></image>
</view>
<view class="fast-left-name">
黑M123H24
</view>
</view>
<view class="fast-info">
<view class="fast-info-1">
<view class="fast-info-1-item">
22.3KM/H
</view>
<view class="fast-info-1-item-name">
最高时速
</view>
</view>
<view class="fast-info-2">
<view class="fast-info-2-item">
22.3KM/H
</view>
<view class="fast-info-2-item-name">
平均时速
</view>
</view>
<view class="fast-info-3">
<view class="fast-info-3-item">
22.3KM/H
</view>
<view class="fast-info-3-item-name">
最低时速
</view>
</view>
</view>
</view>
</view>
<view class="foot" v-if="isQuery">
<view class="foot-com" @click="cancel">
取消
</view>
<view class="foot-com foot-query" @click="queryData">
查询
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showpickerStart: false,
showpickerEnd: false,
pickerValue: Number(new Date()),
mapContext: null, //地图对象
nextPointIndex: 1, //下一个坐标点的索引
durationTime: 1000, //相邻两点动画持续时长默认1秒
//路线信息
polyline: [{
width: 8,
points: [],
arrowLine: true,
color: '#3591FC',
}],
//标记点(即移动标记物)
markers: [{
id: 1,
width: 40,
height: 40,
latitude: 0,
longitude: 0,
iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
anchor: {
x: 0.5,
y: 1
}
}],
isDtail: false, //是否显示详情
isQuery: true, //未点击查询时展示框
isStart: false, //是否播放行车轨迹
timeData: [{
name: '今天'
}, {
name: '昨天'
}, {
name: '三天内'
}, {
name: '自定义'
}],
current: 0,
title: 'map',
latitude: 39.909, // 默认纬度
longitude: 116.39742, // 默认经度(北京天安门)
covers: [{
id: 110,
latitude: 39.909,
longitude: 116.39742,
iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
width: "20",
height: "20"
}],
// controls: [{ // 控件
// id: 99,
// position: { // 控件位置
// left: 160,
// top: 120
// },
// iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
// }],
// address_info: "",
// address_info_recomd: "",
// address: ""
}
},
onReady() {
this.mapContext = uni.createMapContext('mapCarDriving', this)
},
onLoad(option) {
this.getTrack() //获取轨迹信息(只做演示，未进行远程请求)
},
methods: {
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
confirmPickerend(e) {
this.endTime = e.value
this.showpickerEnd = false
},
confirmPickerstart(e) {
this.startTime = e.value
this.showpickerStart = false
this.showpickerEnd = true
},
// 展示详情数据
upDetail() {
// 如果处于播放形成轨迹时,禁止打开详情
if (this.isStart) {
uni.showToast({
icon: 'none',
title: '请停止播放新城轨迹后查看详情'
})
return
}
this.isDtail = !this.isDtail
},
// 切换日期选择tab
checkDate(index) {
this.current = index
if(index === 3){
this.showpickerStart = true
}
},
// 倍速切换
speedReturn() {
console.log('倍速++')
},
// 显示隐藏查询条件弹框
queryPop() {
this.isQuery = !this.isQuery
},
// 查询方法
queryData() {
this.isQuery = !this.isQuery
},
// 取消返回上一页
cancel() {
uni.navigateBack({
delta: 1 //返回上个页面
})
},
//模拟获取远程数据
getTrack() {
this.polyline[0].points = [{
latitude: 39.997761,
longitude: 116.478935
},
{
latitude: 39.997825,
longitude: 116.478939
},
{
latitude: 39.998549,
longitude: 116.478912
},
{
latitude: 39.998555,
longitude: 116.478998
},
{
latitude: 39.998566,
longitude: 116.479282
},
{
latitude: 39.998528,
longitude: 116.479658
},
{
latitude: 39.998453,
longitude: 116.480151
},
{
latitude: 39.998302,
longitude: 116.480784
},
{
latitude: 39.998184,
longitude: 116.481149
},
{
latitude: 39.997997,
longitude: 116.481573
},
{
latitude: 39.997846,
longitude: 116.481863
},
{
latitude: 39.997718,
longitude: 116.482072
},
{
latitude: 39.997718,
longitude: 116.482362
},
{
latitude: 39.998935,
longitude: 116.483633
},
{
latitude: 39.998968,
longitude: 116.48367
},
{
latitude: 39.999861,
longitude: 116.484648
}
]
// this.durationTime = Math.ceil(30000 / this.polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长
this.initMarkers()
},
//设置地图
// initMapData() {
// },
//设置位置（从起点开始）
initMarkers() {
this.markers[0].latitude = this.polyline[0].points[0].latitude
this.markers[0].longitude = this.polyline[0].points[0].longitude
},
//开始移动
handleStartMove() {
this.isStart = true
this.movePoint()
},
//停止移动
handleStopMove() {
this.isStart = false
},
//移动坐标
movePoint() {
/*
//也可以用这个方法
this.mapContext.moveAlong({
duration: 30000,
markerId: this.markers[0].id,
path: this.polyline[0].points
})
return
*/
this.mapContext.translateMarker({
duration: 800,
markerId: this.markers[0].id,
autoRotate: true, // 移动过程中自动旋转marker
rotate:15, // marker旋转角度
moveWithRotate: false, // 小车平移与旋转同时进行
destination: {
latitude: this.polyline[0].points[this.nextPointIndex].latitude,
longitude: this.polyline[0].points[this.nextPointIndex].longitude
},
animationEnd: res => {
//播放结束，继续移动到下一个点，最后一个点时结束移动
if (this.nextPointIndex < this.polyline[0].points.length - 1) {
this.nextPointIndex++
if (this.isStart) {
this.movePoint()
}
} else {
this.nextPointIndex = 1
this.isStart = false
}
}
})
}
}
}
</script>
<style scoped lang="scss">
$box-shaow-common: 0px 0px 6px 4px #d8d8d8;
$bgF: #ffffff;
$borderRadius: 30rpx;
.map_wrap {
background-color: #ccc;
height: calc(100vh - 44px);
/* #ifdef MP-WEIXIN */
height: 100vh;
/* #endif */
}
.mapCarDriving {
height: 100%;
}
// 重置原生组件样式,关闭溢出隐藏
// view {
// overflow: unset;
// }
.card-roll-content {
position: absolute;
top: 170rpx;
left: 0;
.card-roll-common {
display: flex;
align-items: center;
width: 259rpx;
height: 44rpx;
box-sizing: border-box;
padding-left: 20rpx;
font-size: 20rpx;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 0 22rpx 22rpx 0;
margin-top: 20rpx;
color: #ffffff;
}
.card-roll-4 {
background-color: rgba(4, 138, 251, 1);
}
}
.lineClass {
border-top: 1px solid #e9e9e9;
}
.button-group-common {
position: absolute;
bottom: 296rpx;
width: 138rpx;
height: 52rpx;
background-color: #fff;
display: flex;
justify-content: center;
border-radius: 26rpx;
align-items: center;
color: #222222;
font-size: 24rpx;
box-shadow: $box-shaow-common;
}
.button-group-left {
left: 0;
}
.button-group-right {
right: 0;
}
.icon-img-up-speed {
width: 20rpx;
height: 10rpx;
margin-left: 10rpx;
}
.icon-img-query {
width: 20rpx;
height: 20rpx;
margin-left: 10rpx;
}
.start-icon-content {
position: absolute;
width: 80rpx;
height: 34rpx;
top: -17rpx;
left: 50%;
margin-left: -31rpx;
background-color: #fff;
border-radius: 10rpx;
display: flex;
justify-content: center;
.icon-img-start {
position: absolute;
width: 100%;
height: 80rpx;
position: absolute;
top: -96rpx;
left: -2rpx;
}
.icon-img-up,
.icon-img-down {
width: 64rpx;
height: 38rpx;
padding: 8rpx 16rpx;
}
}
.drivingContent {
position: absolute;
width: 690rpx;
height: 242rpx;
bottom: 154rpx;
left: 50%;
margin-left: -345rpx;
border-radius: 30rpx;
background-color: #ffffff;
box-sizing: border-box;
padding: 20rpx;
box-shadow: $box-shaow-common;
.carId {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.carId-name {
font-size: 36rpx;
font-weight: bold;
}
.carId-number {
font-size: 24rpx;
}
}
.carId-time {
font-size: 28rpx;
font-weight: bold;
padding-top: 20rpx;
}
.dateClass {
display: flex;
justify-content: space-between;
.carName {
display: flex;
justify-content: center;
align-items: center;
width: 142rpx;
height: 54rpx;
font-size: 28rpx;
border-radius: 27rpx;
background-color: #E5E5E5;
color: #666666;
}
.active {
color: #ffffff;
background-color: #048AFB;
}
}
}
.drivingDataContent {
position: absolute;
width: 690rpx;
// height: 242rpx;
bottom: 20rpx;
left: 50%;
margin-left: -345rpx;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.1);
border-radius: $borderRadius;
box-shadow: $box-shaow-common;
.drivingData-bg {
box-sizing: border-box;
border-radius: $borderRadius;
padding: 30rpx 40rpx 40rpx;
background-color: $bgF;
box-shadow: $box-shaow-common;
}
.driving-tips {
height: 160rpx;
background-color: $bgF;
border-radius: $borderRadius;
box-sizing: border-box;
padding: 20rpx;
margin-top: 20rpx;
box-shadow: $box-shaow-common;
.driving-tips-title {
display: flex;
align-items: center;
.driving-tips-ticon {
width: 50rpx;
height: 50rpx;
.icon-img-down{
width: 50rpx;
height: 50rpx;
}
}
}
.driving-tips-name,
.driving-tips-count {
font-size: 30rpx;
font-weight: bold;
color: #666666;
margin-left: 10rpx;
}
.driving-tips-content {
margin-top: 10rpx;
display: flex;
justify-content: center;
align-items: center;
color: #999999;
}
}
.driving-tips-fast {
height: 200rpx;
.fast-left {
display: flex;
align-items: center;
.fast-left-icon {
width: 50rpx;
height: 50rpx;
}
.fast-left-name {
font-size: 15px;
font-weight: bold;
color: #666666;
margin-left: 5px;
}
}
.fast-info {
display: flex;
justify-content: space-around;
margin-top: 18rpx;
.fast-info-1,
.fast-info-2,
.fast-info-3 {
text-align: center;
}
.fast-info-1-item,
.fast-info-2-item,
.fast-info-3-item {
font-size: 36rpx;
font-weight: bold;
color: #222222;
}
.fast-info-1-item-name,
.fast-info-2-item-name,
.fast-info-3-item-name {
font-size: 22rpx;
font-weight: bold;
color: #999999;
margin-top: 18rpx;
}
}
}
.carId {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.carId-name {
font-size: 36rpx;
font-weight: bold;
}
.carId-number {
font-size: 24rpx;
}
}
.carId-info {
display: flex;
justify-content: space-between;
margin-top: 50rpx;
.carId-info-1,
.carId-info-2,
.carId-info-3 {
display: flex;
flex-direction: column;
align-items: center;
font-size: 22rpx;
color: #999999;
}
.carId-info-1-speed {
font-size: 36rpx;
font-weight: bold;
color: #048AFB;
padding-bottom: 20rpx;
}
.carId-info-2-time {
font-size: 36rpx;
font-weight: bold;
color: #31CF93;
padding-bottom: 20rpx;
}
.carId-info-3-count {
font-size: 36rpx;
font-weight: bold;
color: #E66F57;
padding-bottom: 20rpx;
}
}
}
.carId-info-trip {
.trip-common {
display: flex;
justify-content: space-between;
align-items: center;
}
.trip-content {
margin-top: 20rpx;
.trip-left {
display: flex;
justify-content: center;
align-items: center;
.trip-left-icon {
width: 22rpx;
height: 22rpx;
background-color: #31cf93;
border-radius: 50%;
}
.trip-left-icon-end {
background-color: #e8ae32;
}
.trip-left-name {
color: #666666;
font-size: 28rpx;
font-weight: bold;
margin-left: 16rpx;
}
}
.trip-right {
color: #999999;
font-size: 24rpx;
}
}
.trip-adreass {
color: #666666;
font-size: 24rpx;
letter-spacing: 4rpx;
line-height: 30rpx;
margin-top: 20rpx;
word-break: break-all;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: pre-wrap;
}
.trip-end {}
}
.foot {
display: flex;
justify-content: space-between;
position: absolute;
width: 690rpx;
height: 100rpx;
bottom: 10rpx;
left: 50%;
margin-left: -345rpx;
.foot-com {
width: 332rpx;
height: 74rpx;
display: flex;
font-size: 30rpx;
color: #999999;
justify-content: center;
align-items: center;
background-color: #ffffff;
border-radius: 20rpx;
box-shadow: $box-shaow-common;
}
.foot-query {
background-color: #048AFB;
color: #ffffff;
}
}
</style>
以下是项目含接口最新代码，已经上线验收了，解决了评论提及的各种bug，可以与上面示例中的静态数据合并使用，好用给个赞！
<template>
<view class="map_wrap">
<!-- <u-picker :show="showPicker" @cancel="showPicker = false" :columns="columnsMapIdList" keyName="vehicleNo"
@confirm="confirmHandler"></u-picker> -->
<!-- <song-data-picker :map="{text:'vehicleNo',value:'vehicleId'}" ref="songPicker"
style="position: absolute;top: -1000px;" :localdata="columnsMapIdList" popup-title="请选择车辆" :openSearch="true"
:searchFn="mySearchFn" :openInputSearch="true" @nodeclick="nodeclick" @change="changeSelect"></song-data-picker> -->
<view class="carList-content" v-show = "showCarListPop">
<view class="icon-class">
<uni-icons color="#949292" class="icon-class-closed" @click="showCarListPop = false" type="closeempty" size="20"></uni-icons>
</view>
<view class="class-search">
<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="vehicleNo" placeholder="请搜索车辆" @iconClick="iconClick"></uni-easyinput>
</view>
<view class="carList">
<view v-for="(item,index) in columnsMapIdList" :key="index" @click="chooseCar(item,1)">
<view class="carList-flexd">
<view>
{{item.vehicleNo}}
</view>
<view class="icon-class">
<uni-icons color="#949292" class="icon-class-right" type="right" size="20"></uni-icons>
</view>
</view>
</view>
</view>
</view>
<u-datetime-picker title="开始日期" :show="showpickerStart" @cancel="showpickerStart = false" v-model="pickerValue"
mode="datetime" :formatter="formatter" ref="datetimePicker" @confirm="confirmPickerstart"></u-datetime-picker>
<u-datetime-picker title="结束日期" :show="showpickerEnd" @cancel="showpickerEnd = false" v-model="pickerValue"
mode="datetime" :formatter="formatter" ref="datetimePicker1" @confirm="confirmPickerend"></u-datetime-picker>
<map :show-location="false" :enable-poi="true" :enable-traffic="enableTraffic" class="mapCarDriving"
id="mapCarDriving" :enable-satellite="enableSatellite" style="width: 100%;" :markers="markers"
:polyline="polyline" :include-points="polyline[0].points" :show-scale="true" :scale="mapScale"
:latitude="mapCenter.latitude" :longitude="mapCenter.longitude">
</map>
<!-- <view class="card-roll-content" v-show="isStart">
<view class="card-roll-1 card-roll-common">
2023-09-07 07:56:29
</view>
<view class="card-roll-2 card-roll-common">
7:56:11
</view>
<view class="card-roll-3 card-roll-common">
0.6km/125.3km
</view>
<view class="card-roll-4 card-roll-common">
5km/h
</view>
</view> -->
<view class="other-content">
<view class="mapReturn" @click="enableSatellite = !enableSatellite">
<image class="map-icon-img" :src="globalConfig.baseImgUrl + 'carDriving/GIS.png'"></image>
</view>
<view class="trafficlight" @click="enableTraffic = !enableTraffic">
<image class="trafficlight-icon-img" :src="globalConfig.baseImgUrl + 'carDriving/trafficlight.png'">
</image>
</view>
<view class="omit">
<image class="omit-icon-img" :src="globalConfig.baseImgUrl + 'carDriving/omit.jpg'"></image>
</view>
</view>
<view class="amplify-content">
<view class="amplify-plus" @click="amplifyPlus">
<u-icon name="plus" color="#999999" size="24"></u-icon>
</view>
<view class="amplify-min" @click="amplifyMin">
<u-icon name="minus" color="#999999" size="24"></u-icon>
</view>
</view>
<view class="postion-content" @click="postionMarkerCenter">
<image class="postion-icon-img" :src="globalConfig.baseImgUrl + 'carDriving/postion.png'"></image>
</view>
<view class="postion-scale">
<view class="scale-count">
{{scaleCount}}
</view>
</view>
<view class="drivingContent" v-show="isQuery">
<view class="carId">
<view class="carId-name" @click="showDownMenu">
<view class="">
{{carName?carName:'无'}}
</view>
<view class="">
<image class="left-icon-img" :src="globalConfig.baseImgUrl + 'carDriving/xiala.png'"></image>
</view>
</view>
<view class="carId-number">
</view>
</view>
<view class="carId-time lineClass">
时间选择
</view>
<view class="carId-time dateClass">
<view :class="{active:index == current,carName:true}" :key="item.name" v-for="(item,index) in timeData"
@click="checkDate(index)">
{{item.name}}
</view>
</view>
</view>
<view class="drivingDataContent" v-show="!isQuery">
<view class="drivingData-bg">
<view v-if="!isDtail" class="button-group-left button-group-common">
<view class="button-group-left-i" @click="speedReturn">
<view class="group-left-font">
{{speedMultiple}}倍速
</view>
<view class="group-left-icon">
<image class="icon-img-up-speed" :src="globalConfig.baseImgUrl + 'carDriving/speed.png'">
</image>
</view>
</view>
<view class="selectDown" v-show="showMenu">
<view class="selectDownItem" v-for="(item,index) in carOptions" :key='item.id' @click="itemClick(item)">
{{item.name}}</view>
</view>
</view>
<view v-if="!isDtail" class="button-group-right button-group-common" @click="queryPop">
<view class="group-right-font">
查询
</view>
<view class="group-right-icon">
<image class="icon-img-query" :src="globalConfig.baseImgUrl + 'carDriving/query.png'"></image>
</view>
</view>
<view class="start-icon-content">
<image v-show="!isDtail" class="icon-img-up" :src="globalConfig.baseImgUrl + 'carDriving/up.png'"
@click="upDetail"></image>
<image v-show="isDtail" class="icon-img-down" :src="globalConfig.baseImgUrl + 'carDriving/down.png'"
@click="upDetail"></image>
<image v-show="!isStart" class="icon-img-start" :src="globalConfig.baseImgUrl + 'carDriving/start.png'"
@click="handleStartMove"></image>
<image v-show="isStart" class="icon-img-start" :src="globalConfig.baseImgUrl + 'carDriving/start1.png'"
@click="handleStopMove"></image>
</view>
<view class="carId">
<view class="carId-name">
{{carName?carName:'无'}}
</view>
<view class="carId-number">
{{carInfoDetail.allodo?carInfoDetail.allodo+'KM/H':'无'}}
</view>
</view>
<!-- <view class="carId-info">
<view class="carId-info-1">
<view class="carId-info-1-speed">
{{carInfoDetail.avgSpeed?carInfoDetail.avgSpeed+'KM/H':'无'}}
</view>
<view class="">
平均速度
</view>
</view>
<view class="carId-info-2">
<view class="carId-info-2-time">
0秒
</view>
<view class="">
行驶时长
</view>
</view>
<view class="carId-info-3">
<view class="carId-info-3-count">
0
</view>
<view class="">
停车次数
</view>
</view>
</view> -->
<view class="carId-info-trip" v-show="isDtail">
<view class="trip-content ">
<view class="trip-common">
<view class="trip-left">
<view class="trip-left-icon">
</view>
<view class="trip-left-name">
起点
</view>
</view>
<view class="trip-right">
{{carInfoDetail.stime?carInfoDetail.stime:'无'}}
</view>
</view>
<view class="trip-adreass">
{{carInfoDetail.splace?carInfoDetail.splace:'无'}}
</view>
</view>
<view class="trip-content ">
<view class="trip-common">
<view class="trip-left">
<view class="trip-left-icon trip-left-icon-end">
</view>
<view class="trip-left-name">
终点
</view>
</view>
<view class="trip-right">
{{carInfoDetail.etime?carInfoDetail.etime:'无'}}
</view>
</view>
<view class="trip-adreass">
{{carInfoDetail.eplace?carInfoDetail.eplace:'无'}}
</view>
</view>
</view>
</view>
<!-- <view class="driving-tips" v-show="isDtail">
<view class="driving-tips-title">
<view class="driving-tips-ticon">
<image class="icon-img-down" src="../../../static/images/carDriving/warn.png"></image>
</view>
<view class="driving-tips-name">
报警
</view>
<view class="driving-tips-count">
0
</view>
</view>
<view class="driving-tips-content">
该车辆暂无报警信息!
</view>
</view>
<view class="driving-tips" v-show="isDtail">
<view class="driving-tips-title">
<view class="driving-tips-ticon">
<image class="icon-img-down" src="../../../static/images/carDriving/heat.png"></image>
</view>
<view class="driving-tips-name">
温度
</view>
</view>
<view class="driving-tips-content">
该车辆暂无温度信息!
</view>
</view> -->
<!-- <view class="driving-tips driving-tips-fast" v-show="isDtail">
<view class="fast-left">
<view class="">
<image class="fast-left-icon" src="../../../static/images/carDriving/fast.png"></image>
</view>
<view class="fast-left-name">
{{carInfoDetail.vehicleNo?carInfoDetail.vehicleNo:'无'}}
</view>
</view>
<view class="fast-info">
<view class="fast-info-1">
<view class="fast-info-1-item">
{{carInfoDetail.maxSpeed?carInfoDetail.maxSpeed+'KM/H':'无'}}
</view>
<view class="fast-info-1-item-name">
最高时速
</view>
</view>
<view class="fast-info-2">
<view class="fast-info-2-item">
{{carInfoDetail.avgSpeed?carInfoDetail.avgSpeed+'KM/H':'无'}}
</view>
<view class="fast-info-2-item-name">
平均时速
</view>
</view>
<view class="fast-info-3">
<view class="fast-info-3-item">
{{carInfoDetail.minSpeed?carInfoDetail.minSpeed+'KM/H':'无'}}
</view>
<view class="fast-info-3-item-name">
最低时速
</view>
</view>
</view>
</view> -->
</view>
<view class="foot" v-if="isQuery">
<view class="foot-com" @click="cancel">
取消
</view>
<view class="foot-com foot-query" @click="queryData">
查询
</view>
</view>
</view>
</template>
<script>
import {
getTrackInfoList,
findByAllCarIdList
} from '@/api/carManage/carDriving'
import {
startCurrentDateTime,
endTCurrentDateTime,
yesterdayStartDateTime,
yesterdayEndDateTime,
threeDaysStartDateTime
} from "@/utils/timeString.js"
import {
login
} from '../../api/login'
export default {
data() {
return {
globalConfig: getApp().globalData.config, // 默认设置项
showPicker: false,
carName: '',
columnsMapIdList: [],
latitude: '',
longitude: '',
enableTraffic: false, //是否展示路况信息
enableSatellite: false,
// carParams:{
// pageParamVO: {
// pageSize: 8000,
// curPage: 1
// },
// vehicleid: '',
// startTime: startCurrentDateTime,
// endTime: endTCurrentDateTime,
// isShare: 0,
// isRevised: 0
// },
mapScale: 16,
scaleCount: '100M', //比例尺数值
carOptions: [{
id: 0.5,
name: '0.5倍速'
},
{
id: 1,
name: '1倍速'
},
{
id: 2,
name: '2倍速'
},
{
id: 4,
name: '4倍速'
}
],
showMenu: false,
watchScale: null,
mapScaleCur:16,
carInfoDetail: {
splace: '',
eplace: '',
maxSpeed: '',
avgSpeed: '',
minSpeed: '',
allodo: '',
stime: '',
etime: '',
vehicleNo: ''
},
carParams: {
runtype: 0, //运行类型 0表示全部，1表示运行，48表示停车
interval: 0, //间隔时间
vehicleId: '', //车辆Id
beginTime: startCurrentDateTime, //开始时间
endTime: endTCurrentDateTime, //结束时间
pageParamNewVO: {
curPage: 1, //当前页
pageSize: 8000 //页条目数
} //分页参数
},
// 请求回来的车辆信息
// carDataInfo:{},
startPlaceInfo: {},
endPlaceInfo: {},
showpickerStart: false,
showpickerEnd: false,
pickerValue: Number(new Date()),
mapContext: null, //地图对象
nextPointIndex: 1, //下一个坐标点的索引
durationTime: 1000, //相邻两点动画持续时长默认1秒
speedMultiple: 1, //默认轨迹播放倍速
//路线信息
polyline: [{
width: 6,
points: [],
arrowLine: true,
color: '#ffb676',
}],
// 默认地图中心点坐标,每次小车移动都将其跟踪到中心点
mapCenter: {
latitude: 45.754301,
longitude: 126.617981,
},
//标记点(即移动标记物)
markers: [{
id: 1,
width: 13,
height: 13,
// width: 40,
// height: 40,
latitude: 45.754301,
longitude: 126.617981,
// iconPath: getApp().globalData.config.baseImgUrl + 'carDriving/car.png',
iconPath: getApp().globalData.config.baseImgUrl + 'carDriving/drivingCar.png',
anchor: {
x: 0.5,
y: 1
}
}],
wait: 800,
timer: null,
showCarListPop:false,
vehicleNo:'',
timeInterval: null, //间隔几秒设置一次地图中心点
isDtail: false, //是否显示详情
isQuery: false, //未点击查询时展示框
isStart: false, //是否播放行车轨迹
timeData: [{
name: '今天'
}, {
name: '昨天'
}, {
name: '三天内'
}, {
name: '自定义'
}],
current: 0,
title: 'map',
// controls: [{ // 控件
// id: 99,
// position: { // 控件位置
// left: 160,
// top: 120
// },
// iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
// }],
// address_info: "",
// address_info_recomd: "",
// address: ""
}
},
watch: {
// 监听地图比例尺变化
mapScaleCur: {
handler(newScale, oldScale) {
// console.log(newScale)
console.log('地图比例尺变化')
switch (newScale) {
case 3:
this.scaleCount = '1000KM'
break;
case 4:
this.scaleCount = '500KM'
break;
case 5:
this.scaleCount = '200KM'
break;
case 6:
this.scaleCount = '100KM'
break;
case 7:
this.scaleCount = '50KM'
break;
case 8:
this.scaleCount = '50KM'
break;
case 9:
this.scaleCount = '20KM'
break;
case 10:
this.scaleCount = '10KM'
break;
case 11:
this.scaleCount = '5KM'
break;
case 12:
this.scaleCount = '2KM'
break;
case 13:
this.scaleCount = '1KM'
break;
case 14:
this.scaleCount = '500M'
break;
case 15:
this.scaleCount = '200M'
break;
case 16:
this.scaleCount = '100M'
break;
case 17:
this.scaleCount = '50M'
break;
case 18:
this.scaleCount = '50M'
break;
case 19:
this.scaleCount = '20M'
break;
case 20:
this.scaleCount = '10M'
break;
}
},
immediate: true
}
},
onShow() {
// 重置时间戳
this.current = 0
this.carParams.beginTime = startCurrentDateTime
this.carParams.endTime = endTCurrentDateTime
this.speedMultiple = 1
this.mapScale = 16
this.enableTraffic = false
},
mounted() {
this.getByAllCarIdList()
},
onReady() {
},
onLoad(options) {
let that = this
// console.log(options)
this.carParams.vehicleId = options.vehicleId
this.carName = options.carName
// 默认查询当日车辆轨迹信息
this.queryData()
// 因小程序无法监听地图手指缩放,只能使用定时器解决
that.watchScale = setInterval(()=>{
that.mapContext.getScale({
success(res) {
// console.log(Math.floor(res.scale))
// 监听比例尺变化
that.mapScaleCur= Math.floor(res.scale)
}
})
},1000)
},
onHide() {
// 页面隐藏
clearInterval(this.timeInterval)
// 暂停轨迹回放
this.isStart = false
},
onUnload() {
console.log('页面卸载')
},
methods: {
// 选择下拉倍速
itemClick(item) {
// console.log(item)
let wait = 800
this.showMenu = false
if (item.id == 0.5) {
this.wait = wait / item.id
}
if (item.id == 1) {
this.wait = wait / item.id / 1
}
if (item.id == 2) {
this.wait = wait / item.id / 5
}
if (item.id == 4) {
this.wait = wait / item.id / 20
}
// this.wait = this.wait / item.id
// console.log(this.wait)
this.speedMultiple = item.id
// this.carDatas.name = item.name
},
// 地图视野发生变化
// regionchange(obj){
// console.log(obj)
// console.log('视野发生变化')
// // 获取地图缩放级别,设置比例尺
// this.mapContext.getScale({
// success(res) {
// console.log(res)
// this.mapScale= Math.floor(res.scale)
// }
// })
// },
// 处理带搜索条件的picker组件
// mySearchFn(searchList, searchWord) {
// return searchList.filter(x => x.searchText.includes(searchWord));
// },
// 之所以使用changeSelect及nodeclick两个方法,是组件缺陷,无法活动自定义字段
// changeSelect(e) {
// console.log(e)
// if (e.detail.value[0].vehicleId) {
// this.confirmHandler(e.detail.value[0])
// }
// },
// nodeclick(e) {
// console.log(e)
// this.confirmHandler(e)
// },
amplifyPlus() {
this.mapScale++
if (this.mapScale > 20) {
this.mapScale = 20
}
},
amplifyMin() {
this.mapScale--
if (this.mapScale < 3) {
this.mapScale = 3
}
},
chooseCar(e) {
// console.log(e)
// 调用接口,获取当前车辆数据信息，同时将该车辆定位地图中心点
this.showCarListPop = false
this.carParams.vehicleId = e.vehicleId
this.carName = e.vehicleNo
},
// 判断是否展开下拉框
showDownMenu() {
this.showCarListPop = true
// this.$refs.songPicker.show()
},
iconClick(){
uni.showLoading({
title: '加载中...',
mask: true
})
findByAllCarIdList({vehicleNo:this.vehicleNo}).then(res => {
// 将数据处理成组件需要格式
const resArr = res.result.slice(0,100)
// 赋值picker组件
this.columnsMapIdList = resArr
uni.hideLoading()
// this.columnsMapIdList = res.result
})
},
// 获取车辆id下拉数组
getByAllCarIdList(vehicleNo) {
findByAllCarIdList().then(res => {
// console.log(res)
// 将数据处理成组件需要格式
const resArr = res.result.slice(0,100)
// 赋值picker组件
this.columnsMapIdList = resArr
})
},
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
confirmPickerend(e) {
if (e.value > (this.carParams.beginTime + 10 * 24 * 60 * 60 * 1000)) {
uni.showToast({
icon: 'none',
title: '请查询10日内信息'
})
return
}
this.carParams.endTime = e.value
if (this.carParams.endTime < this.carParams.beginTime) {
uni.showToast({
icon: 'none',
title: '结束时间不能小于开始时间'
})
return
}
this.showpickerEnd = false
},
confirmPickerstart(e) {
// console.log(e)
if (e.value > new Date()) {
uni.showToast({
icon: 'none',
title: '开始时间不能大于当前时间'
})
return
}
this.carParams.beginTime = e.value
this.showpickerStart = false
this.showpickerEnd = true
},
// 展示详情数据
upDetail() {
this.isDtail = !this.isDtail
},
// 切换日期选择tab
checkDate(index) {
this.current = index
if (index === 0) {
this.carParams.beginTime = startCurrentDateTime
this.carParams.endTime = endTCurrentDateTime
}
if (index === 1) {
this.carParams.beginTime = yesterdayStartDateTime
this.carParams.endTime = yesterdayEndDateTime
}
if (index === 2) {
this.carParams.beginTime = threeDaysStartDateTime
this.carParams.endTime = endTCurrentDateTime
}
if (index === 3) {
this.showpickerStart = true
}
},
// 倍速切换
speedReturn() {
this.showMenu = !this.showMenu
},
// 显示隐藏查询条件弹框
queryPop() {
this.isQuery = !this.isQuery
},
// 查询方法
queryData() {
this.nextPointIndex = 1
this.isStart = false
this.isQuery = true
// 调用接口获取范围时间内车辆轨迹
this.getTrack(this.carParams)
},
// 取消返回上一页
cancel() {
uni.navigateBack({
delta: 1 //返回上个页面
})
},
//获取远程数据
getTrack(params) {
// 每次获取数据前对上次数据进行初始化
this.mapContext = uni.createMapContext('mapCarDriving', this)
// 未查询到轨迹信息还原地图坐标
this.polyline = [{
width: 8,
points: [],
arrowLine: true,
color: '#ffb676',
}],
this.mapCenter = {
latitude: 45.754301,
longitude: 126.617981,
}
this.markers = [{
id: 1,
width: 13,
height: 13,
// width: 40,
// height: 40,
latitude: 45.754301,
longitude: 126.617981,
// iconPath: getApp().globalData.config.baseImgUrl + 'carDriving/car.png',
iconPath: getApp().globalData.config.baseImgUrl + 'carDriving/drivingCar.png',
anchor: {
x: 0.5,
y: 1
}
}]
this.$modal.loading("加载中...")
getTrackInfoList(params).then(res => {
// console.log(res)
this.$modal.closeLoading()
// 未查询到行车轨迹不打开轨迹播放弹框
if (res.result.data.length <= 1) {
uni.showToast({
icon: 'none',
title: '当前日期未查询到车辆行车轨迹'
})
this.mapScale = 16
return
}
// 展示数据赋值
this.carInfoDetail.splace = res.result.splace
this.carInfoDetail.eplace = res.result.eplace
this.carInfoDetail.maxSpeed = res.result.maxSpeed
this.carInfoDetail.minSpeed = res.result.minSpeed
this.carInfoDetail.allodo = res.result.allodo
this.carInfoDetail.stime = res.result.stime
this.carInfoDetail.etime = res.result.etime
this.carInfoDetail.avgSpeed = res.result.avgSpeed
this.carInfoDetail.vehicleNo = res.result.vehicleNo
// 查询到数据,隐藏查询条件
this.isQuery = false
const pointsList = []
const result = res.result.data
this.startPlaceInfo = res.result.startPlaceName
this.EndPlaceInfo = res.result.endPlaceName
// 循环处理数据,得到地图需要的数据结构
for (let i = 0; i < result.length; i++) {
pointsList.push({
latitude: result[i].lat,
longitude: result[i].lon,
direction: result[i].direction,
speed: result[i].speed,
})
}
this.polyline[0].points = pointsList
this.initMarkers()
//默认播放全程使用30秒，计算相连两点动画时长
// this.durationTime = Math.ceil(30000 / this.polyline[0].points.length)
// console.log(this.durationTime)
// console.log(123)
// }
})
},
//设置位置（从起点开始）
initMarkers() {
// 查询到结果后,将车辆定位到地图中间
this.markers[0].latitude = this.polyline[0].points[0].latitude
this.markers[0].longitude = this.polyline[0].points[0].longitude
this.mapCenter = {
latitude: this.polyline[0].points[0].latitude,
longitude: this.polyline[0].points[0].longitude,
}
},
//开始移动
handleStartMove() {
this.isStart = true
// 每次移动,都将车定位到地图中间
clearInterval(this.timeInterval)
this.timeInterval = setInterval(() => {
this.mapCenter = {
latitude: this.polyline[0].points[this.nextPointIndex].latitude,
longitude: this.polyline[0].points[this.nextPointIndex].longitude,
}
}, 2000);
this.movePoint()
// 判断轨迹点的多少,轨迹点比较少行驶距离较短,地图比例放大
if (this.polyline[0].points.length < 300) {
this.mapScale = 18
} else {
this.mapScale = 14
}
},
//停止移动
handleStopMove() {
this.isStart = false
clearInterval(this.timeInterval)
},
// 计算两点间角度，改变图标方向
calcAngle(start, end) {
let y = Math.sin(end.longitude - start.longitude) * Math.cos(end.latitude);
let x =
Math.cos(start.latitude) * Math.sin(end.latitude) -
Math.sin(start.latitude) * Math.cos(end.latitude) * Math.cos(end.longitude - start.longitude);
let angle = Math.atan2(y, x);
angle = (180 * angle) / Math.PI;
return angle;
},
// 定位地图中心位置
postionMarkerCenter() {
this.mapCenter.latitude = this.latitude ? this.latitude : 45.754301
this.mapCenter.longitude = this.longitude ? this.longitude : 126.617981
},
//移动坐标
movePoint() {
let that = this
// 每次移动坐标都存储当前坐标,方便定位坐标点到地图中间
that.latitude = that.polyline[0].points[that.nextPointIndex - 1].latitude
that.longitude = that.polyline[0].points[that.nextPointIndex - 1].longitude
// console.log(that.wait)
// 获取地图缩放级别,设置比例尺
// that.mapContext.getScale({
// success(res) {
// console.log(res)
// that.mapScale= Math.floor(res.scale)
// }
// })
// console.log(that.polyline[0].points[that.nextPointIndex - 1].speed / that.speedMultiple)
that.mapContext.translateMarker({
// duration: Math.floor(that.polyline[0].points[that.nextPointIndex - 1].speed * that
// .speedMultiple), //两点间播放速度
// duration: that.durationTime, //两点间播放速度speed
duration: that.wait, //两点间播放速度speed
markerId: that.markers[0].id,
autoRotate: false, // 移动过程中自动旋转marker
rotate: 0, // marker旋转角度
// rotate: that.polyline[0].points[that.nextPointIndex].direction, // marker旋转角度
// rotate: that.calcAngle(that.polyline[0].points[that.nextPointIndex-1],that.polyline[0].points[that.nextPointIndex]), // marker旋转角度
moveWithRotate: false, // 小车平移与旋转同时进行
destination: {
latitude: that.polyline[0].points[that.nextPointIndex].latitude,
longitude: that.polyline[0].points[that.nextPointIndex].longitude
},
animationEnd: res => {
//播放结束，继续移动到下一个点，最后一个点时结束移动
if (that.nextPointIndex < that.polyline[0].points.length - 1) {
that.nextPointIndex++
if (that.isStart) {
that.movePoint()
}
} else {
that.nextPointIndex = 1
that.isStart = false
// 移动结束后,将车辆定位到地图初始位置,可重复播放
that.initMarkers()
}
}
})
}
}
}
</script>
<style scoped lang="scss">
$box-shaow-common: 0px 0px 6px 4px #d8d8d8;
$bgF: #ffffff;
$borderRadius: 30rpx;
.map_wrap {
background-color: #ccc;
height: calc(100vh - 44px);
/* #ifdef MP-WEIXIN */
height: 100vh;
/* #endif */
}
.mapCarDriving {
height: 100%;
}
.other-content {
width: 68rpx;
background-color: #FFFFFF;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
right: 40rpx;
top: 200rpx;
.mapReturn,
.trafficlight,
.omit {
width: 68rpx;
height: 83rpx;
display: flex;
justify-content: center;
align-items: center;
}
.map-icon-img {
width: 37rpx;
height: 37rpx;
}
.trafficlight-icon-img {
width: 44rpx;
height: 21rpx;
}
.omit-icon-img {
width: 44rpx;
height: 21rpx;
}
}
.amplify-content {
width: 68rpx;
height: 166rpx;
background-color: #FFFFFF;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
left: 40rpx;
bottom: 600rpx;
.amplify-plus,
.amplify-min {
width: 68rpx;
height: 83rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.postion-scale {
width: 76rpx;
height: 18rpx;
background: rgba(255, 255, 255, 0);
border-left: 2rpx solid #000;
border-right: 2rpx solid #000;
border-bottom: 2rpx solid #000;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 40rpx;
bottom: 410rpx;
.scale-count {
font-size: 18rpx;
margin-bottom: 36rpx;
color: #000;
}
}
.postion-content {
width: 68rpx;
height: 68rpx;
background: #FFFFFF;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 40rpx;
bottom: 500rpx;
.postion-icon-img {
width: 35rpx;
height: 35rpx;
}
}
// 重置原生组件样式,关闭溢出隐藏
// view {
// overflow: unset;
// }
.card-roll-content {
position: absolute;
top: 170rpx;
left: 0;
.card-roll-common {
display: flex;
align-items: center;
width: 259rpx;
height: 44rpx;
box-sizing: border-box;
padding-left: 20rpx;
font-size: 20rpx;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 0 22rpx 22rpx 0;
margin-top: 20rpx;
color: #ffffff;
}
.card-roll-4 {
background-color: rgba(4, 138, 251, 1);
}
}
.lineClass {
border-top: 1px solid #e9e9e9;
}
.button-group-common {
position: absolute;
bottom: 176rpx;
width: 138rpx;
height: 52rpx;
background-color: #fff;
display: flex;
justify-content: center;
border-radius: 26rpx;
align-items: center;
color: #222222;
font-size: 24rpx;
box-shadow: $box-shaow-common;
}
.button-group-left {
left: 0;
.button-group-left-i {
display: flex;
justify-content: center;
align-items: center;
}
}
.button-group-right {
right: 0;
}
.icon-img-up-speed {
width: 20rpx;
height: 10rpx;
margin-left: 10rpx;
}
.icon-img-query {
width: 20rpx;
height: 20rpx;
margin-left: 10rpx;
}
.start-icon-content {
position: absolute;
width: 80rpx;
height: 34rpx;
top: -17rpx;
left: 50%;
margin-left: -31rpx;
background-color: #fff;
border-radius: 10rpx;
display: flex;
justify-content: center;
.icon-img-start {
position: absolute;
width: 100%;
height: 80rpx;
position: absolute;
top: -96rpx;
left: -2rpx;
}
.icon-img-up,
.icon-img-down {
width: 64rpx;
height: 38rpx;
padding: 8rpx 16rpx;
}
}
.drivingContent {
position: absolute;
width: 690rpx;
height: 242rpx;
bottom: 154rpx;
left: 50%;
margin-left: -345rpx;
border-radius: 30rpx;
background-color: #ffffff;
box-sizing: border-box;
padding: 20rpx;
box-shadow: $box-shaow-common;
.carId {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.carId-name {
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-weight: bold;
.left-icon-img {
width: 28rpx;
height: 14rpx;
margin-left: 20rpx;
}
}
.carId-number {
font-size: 24rpx;
}
}
.carId-time {
font-size: 28rpx;
font-weight: bold;
padding-top: 20rpx;
}
.dateClass {
display: flex;
justify-content: space-between;
.carName {
display: flex;
justify-content: center;
align-items: center;
width: 142rpx;
height: 54rpx;
font-size: 28rpx;
border-radius: 27rpx;
background-color: #E5E5E5;
color: #666666;
}
.active {
color: #ffffff;
background-color: #048AFB;
}
}
}
.drivingDataContent {
position: absolute;
width: 690rpx;
// height: 242rpx;
bottom: 20rpx;
left: 50%;
margin-left: -345rpx;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.1);
border-radius: $borderRadius;
box-shadow: $box-shaow-common;
.drivingData-bg {
box-sizing: border-box;
border-radius: $borderRadius;
padding: 30rpx 40rpx 40rpx;
background-color: $bgF;
box-shadow: $box-shaow-common;
}
.driving-tips {
height: 160rpx;
background-color: $bgF;
border-radius: $borderRadius;
box-sizing: border-box;
padding: 20rpx;
margin-top: 20rpx;
box-shadow: $box-shaow-common;
.driving-tips-title {
display: flex;
align-items: center;
.driving-tips-ticon {
width: 50rpx;
height: 50rpx;
.icon-img-down {
width: 50rpx;
height: 50rpx;
}
}
}
.driving-tips-name,
.driving-tips-count {
font-size: 30rpx;
font-weight: bold;
color: #666666;
margin-left: 10rpx;
}
.driving-tips-content {
margin-top: 10rpx;
display: flex;
justify-content: center;
align-items: center;
color: #999999;
}
}
.driving-tips-fast {
height: 200rpx;
.fast-left {
display: flex;
align-items: center;
.fast-left-icon {
width: 50rpx;
height: 50rpx;
}
.fast-left-name {
font-size: 15px;
font-weight: bold;
color: #666666;
margin-left: 5px;
}
}
.fast-info {
display: flex;
justify-content: space-around;
margin-top: 18rpx;
.fast-info-1,
.fast-info-2,
.fast-info-3 {
text-align: center;
}
.fast-info-1-item,
.fast-info-2-item,
.fast-info-3-item {
font-size: 36rpx;
font-weight: bold;
color: #222222;
}
.fast-info-1-item-name,
.fast-info-2-item-name,
.fast-info-3-item-name {
font-size: 22rpx;
font-weight: bold;
color: #999999;
margin-top: 18rpx;
}
}
}
.carId {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.carId-name {
font-size: 36rpx;
font-weight: bold;
}
.carId-number {
font-size: 24rpx;
}
}
.carId-info {
display: flex;
justify-content: space-between;
margin-top: 50rpx;
.carId-info-1,
.carId-info-2,
.carId-info-3 {
display: flex;
flex-direction: column;
align-items: center;
font-size: 22rpx;
color: #999999;
}
.carId-info-1-speed {
font-size: 36rpx;
font-weight: bold;
color: #048AFB;
padding-bottom: 20rpx;
}
.carId-info-2-time {
font-size: 36rpx;
font-weight: bold;
color: #31CF93;
padding-bottom: 20rpx;
}
.carId-info-3-count {
font-size: 36rpx;
font-weight: bold;
color: #E66F57;
padding-bottom: 20rpx;
}
}
}
.carId-info-trip {
.trip-common {
display: flex;
justify-content: space-between;
align-items: center;
}
.trip-content {
margin-top: 20rpx;
.trip-left {
display: flex;
justify-content: center;
align-items: center;
.trip-left-icon {
width: 22rpx;
height: 22rpx;
background-color: #31cf93;
border-radius: 50%;
}
.trip-left-icon-end {
background-color: #e8ae32;
}
.trip-left-name {
color: #666666;
font-size: 28rpx;
font-weight: bold;
margin-left: 16rpx;
}
}
.trip-right {
color: #999999;
font-size: 24rpx;
}
}
.trip-adreass {
color: #666666;
font-size: 24rpx;
letter-spacing: 4rpx;
line-height: 30rpx;
margin-top: 20rpx;
word-break: break-all;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: pre-wrap;
}
.trip-end {}
}
.foot {
display: flex;
justify-content: space-between;
position: absolute;
width: 690rpx;
height: 100rpx;
bottom: 10rpx;
left: 50%;
margin-left: -345rpx;
.foot-com {
width: 332rpx;
height: 74rpx;
display: flex;
font-size: 30rpx;
color: #999999;
justify-content: center;
align-items: center;
background-color: #ffffff;
border-radius: 20rpx;
box-shadow: $box-shaow-common;
}
.foot-query {
background-color: #048AFB;
color: #ffffff;
}
}
.selectDown {
position: absolute;
background-color: #fff;
box-shadow: 6rpx 12rpx 30rpx #ccc;
bottom: 56rpx;
left: 0px;
width: 136rpx;
height: 212rpx;
border-radius: 8rpx;
overflow-y: scroll;
z-index: 999;
.selectDownItem {
display: flex;
width: 100%;
height: 50rpx;
align-items: center;
justify-content: center;
background-color: #fff;
z-index: 9999;
}
.selectDownItem:active {
background-color: #eadfdf;
}
}
.carList-content{
border-radius: 20rpx;
overflow: hidden;
position: absolute;
box-sizing: border-box;
padding: 10rpx 30rpx;
z-index: 100;
background-color: #ffffff;
width: 100%;
height: 700rpx;
bottom: 0;
left:0;
.icon-class{
margin-top: 10rpx;
text-align: right;
.icon-class-closed{
padding:10px 0 10px 10px;
}
}
.class-search{
width: 80%;
margin: 0 auto;
}
.carList{
height: 540rpx;
overflow: scroll;
.carList-flexd{
padding: 16rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
</style>
2353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
