longitude="map.longitude" scale="3" show-location="true" @markertap="markertap" :polyline="polyline"
@tap="tap" :markers="markers">
<view id="popup" class="pop-up" v-if="showPop">
<view class="item">
<text style="color: #fff;font-size: 17px;flex:1">{{selectCar.number}}</text>
<text style="color: #EFD54F; font-size: 12px;margin-left: 10rpx;">{{selectCar.speed}} km/h</text>
</view>
<view class="item-content" v-for="(item,index) in selectCar.drivers" :key="index">
<view class="content">
<image style="width: 17px;height: 17px;margin-right: 20rpx;"
src="../../static/images/map/map-pop-driver.png"></image>
<text class="text-n">司机：{{item.code}} {{item.name}}</text>
</view>
<image style="width: 45rpx;height: 45rpx;margin-right: 50rpx;"
src="../../static/images/map/map-pop-call.png" @click="call(item.name)"></image>
</view>
<view class="item-content">
<view class="content">
<image style="width: 17px;height: 17px;margin-right: 20rpx;"
src="../../static/images/map/map-pop-time.png"></image>
<text class="text-n">定位时间：{{selectCar.lastDate}}</text>
</view>
</view>
<view class="item-content">
<view class="content">
<image style="width: 17px;height: 17px;margin-right: 20rpx;"
src="../../static/images/map/map-pop-device-no.png"></image>
<text class="text-n">设备号：{{selectCar.terminalId}}</text>
</view>
</view>
<view class="item-content">
<view class="content">
<image style="width: 17px;height: 17px;margin-right: 20rpx;"
src="../../static/images/map/map-pop-device-status.png"></image>
<view style="display: flex;flex-direction: row;">
<text class="text-n">设备状态：</text>
<text class="text-n" style="color: #5ACA33;">{{selectCar.onlineStatus}}</text>
</view>
</view>
</view>
<view class="item-content" style="justify-content: space-between;">
<view class="content">
<image style="width: 17px;height: 17px;margin-right: 20rpx;"
src="../../static/images/map/map-pop-device-banarry.png"></image>
<text class="text-n">设备电量：{{selectCar.electricity}}%</text>
</view>
<image style="width: 30px;height: 30px;margin-right: 40rpx;"
src="../../static/images/map/map-pop-navigate.png" @click="navigate(selectCar)"></image>
</view>
<view class="item-content">
<view class="content">
<image style="width: 18px;height: 19px;margin-right: 18rpx;"
src="../../static/images/map/map-pop-addr.png"></image>
<view style="word-wrap: break-word; width: 450rpx;">
<text class="text-n">地址：{{selectCar.address}}</text>
</view>
</view>
</view>
<view
style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 20rpx;">
<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
<text class="btn-1" @click="navigateToDetail()">详情</text>
<text class="btn-1" style="margin-left: 20rpx;" @click="trajectory">轨迹</text>
<!-- 加挂甩挂标识，0本车不能加挂也不能甩挂，1本车可以加挂，2本车可以甩挂或换挂 -->
<text class="btn-1" style="margin-left: 20rpx;" v-if="selectCar.trailMark!=0" @click="openTrailer(e,selectCar)">{{selectCar.trailMark==1?'加挂':'甩挂/换挂'}}</text>
</view>
</view>
</view>
<view class="floating-button" @click="openTrailer">
<text style="font-size: 14px;">甩挂</text>
</view>
</map>
<uni-popup ref="popup" type="top">
<view class="more-search">
<view class="form-item">
<text class="text-label">公司</text>
<picker :disabled="this.accountLevel !=='超级账号'" class="right-picker" mode="selector" </picker>
</view>
<view class="form-item">
<text class="text-label">车队</text>
<picker class="right-picker" mode="selector" :range="groupLists" @change="verticalConfirm">
<text class="groupName==''?'text-placeholder':'text-value'">{{ groupName == '' ? '请选择' : groupName}}</text> <uni-icons type="arrowdown"></uni-icons>
</picker>
</view>
<view class="form-item">
<text class="text-label">车牌号</text>
<view class="right-input">
<input style="flex: 1; font-size: 13px;color: #333333;" @input="inputVehicle" @focus="onVehicleFocus" @blur="onVehicleBlur"
value="vehicleKey" placeholder="请输入车牌号" placeholder-class="text-placeholder">
</input>
<uni-icons type="clear" style="30rpx" v-if="vehicleKey" @click="vehicleClear"></uni-icons>
</view>
</view>
<associate-search :isShow="showAssociateSearch" url="/api/Vehicle/dropdown/vehiclelist" :params="{
companyId: companyId,
groupId: groupId,
key: vehicleKey
}" @returnKey="returnKey"></associate-search>
<view class="form-item">
<text class="text-label">司机</text>
<view class="right-input">
<input style="flex: 1; font-size: 13px;color: #333333;" @input="inputDriver" :value="driverKey" @focus="onDriveFocus" @blur="onDriveBlur"
placeholder="姓名/电话" placeholder-class="text-placeholder">
</input>
<uni-icons type="clear" style="30rpx" v-if="driverKey" @click="driverClear"></uni-icons>
</view>
</view>
<associate-search :isShow="showDriverSearch" url="/api/Driver/dropdown/driverlist" :params="{
companyId: companyId,
groupId: groupId,
key: driverKey
}" rangeName="name" @returnKey="returnDriverKey"></associate-search>
<view class="form-item">
<text class="text-label">车辆类型</text>
<picker class="right-picker" mode="selector" :range="carTypeList" @change="carTypeConfirm">
<text class="text-value">{{ carTypeName}}</text>
<uni-icons type="arrowdown"></uni-icons>
</picker>
</view>
<view class="pop-btn-wrap">
<text class="btn" type="primary" @click="submitParams">确定</text>
<text class="btn2" type="default" @click="resetParams">重置</text>
</view>
<view class="triangle">
</view>
</view>
</uni-popup>
<uni-popup ref="trailer" type="center">
<view class="add-trailer">
<view class="header">
<text>{{trailerTitle}}</text>
</view>
<view class="form-item">
<text class="text-label" style="width: 200rpx;">车头车牌号</text>
<view class="right-input">
<input style="flex: 1; font-size: 13px;color: #333333;" @input="inputHeadVehicle" @focus="onHeadFocus" @blur="onHeadBlur" <uni-icons type="clear" style="30rpx" v-if="headVehicle&&!trailerDisabled" @click="headVehicleClear"></uni-icons>
</view>
</view>
<license-search :isShow="showHeadVehicle" url="/api/Vehicle/dropdown/vehiclelist" :params="{
key: headVehicle,
vt3: '1,3'
}" rangeName="number" @returnKey="returnHeadVehicleKey"></license-search>
<view class="form-item">
<text class="text-label" style="width: 200rpx;">新挂车车牌号</text>
<view class="right-input">
<input style="flex: 1; font-size: 13px;color: #333333;" @input="inputTrailVehicle" @focus="onTrailFocus" @blur="onTrailBlur" value="trailVehicle" placeholder="不填表示甩挂" placeholder-class="text-placeholder"> </input>
<uni-icons type="clear" style="30rpx" v-if="trailVehicle"
@click="trailVehicleClear"></uni-icons>
</view>
</view>
<license-search :isShow="showTrailVehicle" url="/api/Vehicle/dropdown/vehiclelist" :params="{
key: trailVehicle,
companyId: headVehicleCompanyId,
groupId: headVehicleGroupId,
vt3: 2
}" rangeName="number" @returnKey="returnTrailVehicleKey"></license-search>
<view class="form-item">
<text class="text-label" style="width: 200rpx;">码表里程(km)</text>
<view class="right-input">
<input style="flex: 1; font-size: 13px;color: #333333;" type="number" @input="inputMile" value="mileage" placeholder="请输入码表里程" placeholder-class="text-placeholder"> </input>
<uni-icons type="clear" style="30rpx" v-if="mileage" @click="mileageClear"></uni-icons>
</view>
</view>
<view class="pop-btn-wrap">
<text class="btn" type="primary" @click="submitTrailer">确定</text>
<text class="btn2" type="default" @click="cancelTrailer">取消</text>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
const QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
import associateSearch from '@/components/common/associate-search/associate-search.nvue'
import licenseSearch from '@/components/common/associate-search/license-search.nvue'
import {
domain,
txMapKey
} from '@/common/common.js'
export default {
components: {
associateSearch,
licenseSearch
},
data() {
return {
showMap: true,
token: '',
loading: false,
companyId: null,
companyName: '',
groupId: null,
groupName: '',
carTypeId: null,
carTypeName: '全部',
vehicleKey: '',
driverKey: '',
companyShow: false,
groupShow: false,
selector: [1, 2, 3],
companyLists: [],
originCompanyLists: [],
groupLists: [],
originGroupLists: [],
carTypeList: [],
originalCarTypeLists: [],
lists: [],
showAssociateSearch: false,
showDriverSearch: false,
showHeadVehicle: false,
showTrailVehicle: false,
headVehicle: '',
trailVehicle: '',
headVehicleId: null,
trailVehicleId: null,
mileage: '',
keyword: "全部",
mapHeight: 500,
markers: [],
map: {
mapObj: {},
latitude: '37.094',
longitude: '105.291',
},
polyline: [],
carList: [],
selectCar: {},
showPop: false,
repeat: true,
accountLevel: '',
intervalID: null,
markerCount: 0,
showInterval: true,
isFirstInit: true,
yellowMarkerIds: [],
redMarkerIds: [],
trailerTitle: '加挂',
trailerDisabled: false,
headVehicleCompanyId: null,
headVehicleGroupId: null,
};
},
methods: {
showPopup() {
this.showPop = false
this.$refs.popup.open('top')
},
tap(e) {
console.log("tap", e)
if (this.repeat) {
this.showPop = false
}
},
markertap(e) {
console.log(this.markers)
let marker = this.markers.find(item => {
return item.id == e.detail.markerId
});
console.log(marker)
if (marker) {
this.qqmapsdk.reverseGeocoder({
location: {
latitude: marker.latitude,
longitude: marker.longitude,
},
success: (res) => {
console.log(res)
const {
city,
district,
province,
street,
street_number
} = res.result.address_component
this.carList[marker.id - this.markerCount].address = province + city + district +
street + street_number
console.log(province + city + district + street + street_number)
this.selectCar = this.carList[marker.id - this.markerCount]
this.showPop = true
// this.map.mapObj.moveToLocation({
// latitude: marker.latitude,
// longitude: marker.longitude,
// success: (res) => {
// console.log(res)
// },
// fail: (err) => {
// console.log(err)
// }
// })
this.repeat = false
let that = this
setTimeout(function() {
that.repeat = true
}, 500)
}
})
}
console.log(e)
},
removeMarker() {
let that = this
var ids = this.markers.map(item => {
return item.id
})
console.log(ids)
this.map.mapObj.removeMarkers({
markerIds: ids,
success: (res) => {
that.markers = []
},
fail: (err) => {
console.log('removeMarkers', err)
},
complete: (res) => {
console.log('removeMarkers', res)
// that.showMap = false
// setTimeout(function(){
// that.showMap = true
// },100)
// setTimeout(function(){
// that.initMap()
// },500)
// setTimeout(function(){
// that.addMarker()
// },2000)
}
})
},
//去掉相同坐标的点
removeDuplicate() {
let that = this
let new_Positions = []
that.carList.map(train => {
new_Positions.push(train)
})
let resultArr = []; //去重后的数组
var flag;
for (var i in new_Positions) {
flag = true;
for (var j in resultArr) {
if (resultArr[j].lat == new_Positions[i].lat && resultArr[j].lon == new_Positions[i].lon) {
flag = false;
break;
}
}
if (flag) {
resultArr.push(new_Positions[i]);
}
}
console.log("resultArr:", resultArr)
that.carList = resultArr
},
addMarker() {
const dataMarkers = []
let that = this
that.yellowMarkerIds = []
that.redMarkerIds = []
this.markerCount = this.markerCount + this.carList.length
this.carList.forEach((p, i) => {
//0--蓝色，1--黄色，2--红色
if (p.color == 1) {
that.yellowMarkerIds.push(i + this.markerCount)
} else if (p.color == 2) {
that.redMarkerIds.push(i + this.markerCount)
}
var iconPath = '/static/images/map/blue.png'
if (p.color == 1) {
iconPath = '/static/images/map/yellow-2.png'
} else if (p.color == 2) {
iconPath = '/static/images/map/red.png'
}
dataMarkers.push({
id: i + this.markerCount,
latitude: p.lat,
longitude: p.lon,
iconPath: iconPath,
width: 30,
height: 30,
joinCluster: true, // 指定了该参数才会参与聚合
})
})
try {
this.map.mapObj.addMarkers({
dataMarkers,
clear: true,
complete: (res) => {
that.markers = dataMarkers
// console.log(this.markers)
}
})
} catch (e) {
console.log(e)
}
},
initMap() {
let that = this
this.map.mapObj = uni.createMapContext("map", this);
//仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
that.map.mapObj.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 10,
complete(res) {
console.log('initMarkerCluster', res)
}
});
console.log("test")
that.map.mapObj.on("markerClusterCreate", (res) => {
let clusterMarkers = []
const clusters = res.clusters // 新产生的聚合簇
clusters.forEach((cluster, index) => {
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster
var iconPath = '/static/images/map/blue.png'
if (that.markerHasRed(markerIds)) {
iconPath = '/static/images/map/red.png'
} else if (that.markerHasYellow(markerIds)) {
iconPath = '/static/images/map/yellow-2.png'
}
console.log(markerIds)
console.log(iconPath)
let clusterObj = {
clusterId, //必须
...center,
width: 30,
height: 30,
iconPath: iconPath,
label: { // 定制聚合簇样式
content: markerIds.length + '',
// aria-label: markerIds.length + '',
fontSize: 11,
width: 40,
height: 20,
color: "#000000",
bgColor: '#ffffff',
borderWidth: 1,
borderColor: "#aaa",
borderRadius: 5,
textAlign: 'center',
anchorX: -21,
anchorY: -50,
// padding:10
}
}
clusterMarkers.push(clusterObj)
})
// 添加聚合簇
that.map.mapObj.addMarkers({
markers: clusterMarkers,
clear: false, //是否先清空地图上所有的marker
})
});
that.map.mapObj.on('markerClusterClick', (res) => {
console.log("markerClusterClick", res);
})
},
markerHasRed(markerIds) {
for (var i = 0; i < markerIds.length; i++) {
let b = this.containRed(markerIds[i])
if (b == true) {
return true
}
}
return false
},
containRed(markerId) {
for (let i = 0; i < this.redMarkerIds.length; i++) {
if (markerId == this.redMarkerIds[i]) {
return true
}
}
return false
},
markerHasYellow(markerIds) {
for (var i = 0; i < markerIds.length; i++) {
let b = this.containYellow(markerIds[i])
if (b == true) {
return true
}
}
return false
},
containYellow(markerId) {
for (let i = 0; i < this.yellowMarkerIds.length; i++) {
if (markerId == this.yellowMarkerIds[i]) {
return true
}
}
return false
},
},
onLoad() {
console.log("onLoad")
this.token = uni.getStorageSync('token');
this.accountLevel = uni.getStorageSync('accountLevel')
uni.getSystemInfo({
success: res => {
this.mapHeight = res.windowHeight
console.log("屏幕高度", res.windowHeight)
console.log("地图宽度", res.windowWidth)
console.log("地图高度", this.mapHeight)
}
});
console.log("onload")
this.qqmapsdk = new QQMapWX({
key: txMapKey
})
},
onReady() {
let that = this
console.log("onReady")
this.initMap()
// this.getLocation()
setTimeout(function() {
that.getData()
}, 2 * 1000)
this.loadCompanyLists()
this.loadCarTypes()
}
} </script>
<style lang="scss">
.search-wrap {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 750rpx;
height: 98rpx;
padding: 0 28rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.more-search {
position: relative;
border-radius: 10rpx;
box-shadow: 0px 0px 17rpx 1px rgba(7, 46, 103, 0.08);
background-color: #FFFFFF;
width: 650rpx;
margin-top: 100rpx;
margin-left: 50rpx;
margin-right: 50rpx;
padding: 20rpx;
}
.add-trailer {
position: relative;
border-radius: 10rpx;
box-shadow: 0px 0px 17rpx 1px rgba(7, 46, 103, 0.08);
background-color: #FFFFFF;
width: 650rpx;
margin-top: 150rpx;
margin-left: 50rpx;
margin-right: 50rpx;
padding: 20rpx;
}
.triangle {
position: absolute;
left: 30rpx;
top: -10rpx;
width: 0;
height: 0;
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
border-bottom: 10rpx solid #fff;
}
.form-item {
margin-top: 20rpx;
height: 60rpx;
width: 600rpx;
flex-direction: row;
align-items: center;
}
.pop-btn-wrap {
display: flex;
flex-direction: row;
width: 650rpx;
align-items: center;
justify-content: center;
margin-top: 32rpx;
}
.btn {
width: 170rpx;
height: 58rpx;
line-height: 58rpx;
border-radius: 29rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 400;
color: #333333;
text-align: center;
background-color: #F8D651;
}
.btn2 {
width: 170rpx;
height: 58rpx;
line-height: 58rpx;
border-radius: 29rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 400;
background-color: #333333;
color: #fff;
margin-left: 20rpx;
}
.pop-up {
position: fixed;
top: 100rpx;
left: 112rpx;
width: 525rpx;
z-index: 999999;
background: #555;
flex-direction: column;
padding: 20rpx 28rpx;
}
.floating-button {
width: 120rpx;
height: 120rpx;
align-items: center;
padding-top: 40rpx;
background-color: #F8D651;
position: fixed;
right: 50rpx;
bottom: 50rpx;
z-index: 999999;
border-radius: 60rpx;
}
.item {
flex-direction: row;
align-items: center;
}
.item-content {
height: 65rpx;
width: 525rpx;
padding-right: 10px;
flex-direction: row;
align-items: center;
}
.text-n {
color: #FFFFFF;
font-size: 13px;
word-break: break-all;
margin-right: 10px;
}
.content {
flex-direction: row;
align-items: center;
}
.btn-1 {
width: 143rpx;
height: 58rpx;
line-height: 58rpx;
border-radius: 29rpx;
background-color: #F8D651;
justify-content: center;
align-items: center;
text-align: center;
color: #333333;
font-size: 11px;
}
.text-label {
width: 150rpx;
color: #333333;
font-size: 14px;
}
.right-picker {
height: 60rpx;
border-width: 1rpx;
border-color: #E2DFDF;
flex: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10rpx;
}
.right-input {
height: 60rpx;
border-width: 1rpx;
border-color: #E2DFDF;
flex: 1;
flex-direction: row;
align-items: center;
padding: 10rpx;
}
.text-placeholder {
color: #CCCCCC;
font-size: 13px;
}
.text-value {
color: #333333;
font-size: 13px;
}
.header {
width: 600rpx;
height: 90rpx;
padding: 20rpx 40rpx;
box-sizing: border-box;
font-size: 30rpx;
font-weight: 400;
line-height: 90rpx;
vertical-align: middle;
background: #ffffff;
color: #333333;
text-align: center;
align-items: center;
border-bottom: 2rpx solid #f8f8f8;
} </style>
