<template>
<div>
<el-row>
<el-card style="background-color: #F5F7FA">
<el-row>
<el-form :model="queryInfo" :rules="rules" ref="ruleForm">
<el-col :span="4.5">
<el-form-item label="" prop="vclN">
<el-input v-model="queryInfo.vclN" size="small" style="width: 170px"
placeholder="车牌号" clearable required>
<template slot="prepend">车牌号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="4.5">
<el-form-item label="" prop="vco">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">车牌类型</div>
<el-select v-model="queryInfo.vco" placeholder="车牌类型" style="width: 70px">
<el-option label="蓝牌" value="1"></el-option>
<el-option label="黄牌" value="2"></el-option>
<el-option label="绿牌" value="3"></el-option>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="6.5">
<el-form-item label="" prop="qryEtm">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">开始时间</div>
<!-- <span class="demonstration">带快捷选项</span>-->
<el-date-picker
v-model="queryInfo.qryEtm"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
align="right" style="width: 170px"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</el-form-item>
</el-col>
<el-col :span="6.5">
<el-form-item label="" prop="qryBtm">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">结束时间</div>
<!-- <span class="demonstration">带快捷选项</span>-->
<el-date-picker
v-model="queryInfo.qryBtm"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
align="right" style="width: 170px"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</el-form-item>
</el-col>
</el-form>
<el-col :span="1">
<el-button type="primary" size="mini" @click="getList()">
查询
</el-button>
</el-col>
</el-row>
</el-card>
</el-row>
<div id="mapContainer" ref="mapContainer" style="width: 100%; height: 500px;"></div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { historyTrack } from '../../api/consigner/vehicle';
export default {
data() {
return {
mapInstance: null,
queryInfo: {
vclN: '',
vco: '2',
//开始时间
qryEtm: '',
//结束时间
qryBtm: '',
},
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
tableData:[],
myArray: [{
"mlg": "24284.1",
"agl": "268",
"gtm": "20211110/000025",
"hgt": "302",
"lat": "17783673",
"lon": "63774741",
"spd": "0.0"
},
{
"mlg": "24284.1",
"agl": "268",
"gtm": "20211110/000055",
"hgt": "302",
"lat": "17783673",
"lon": "63774741",
"spd": "0.0"
}],
convertedCoords: [],
rules: {
vclN: [
{ required: true, message: '请输入车牌号', trigger: 'blur' },
// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
vco: [
{ required: true, message: '请选择车牌类型', trigger: 'change' }
],
qryEtm: [
{ required: true, message: '请选择开始日期', trigger: 'change' }
],
qryBtm: [
{ required: true, message: '请选择结束日期', trigger: 'change' }
],
}
};
},
computed:{
},
methods: {
getList() {
this.$refs.ruleForm.validate(valid => {
if (!valid) return;
const _this = this;
historyTrack(this.queryInfo).then((response) => {
const res = response.data;
if (res.code !== '200') {
return _this.$message.error('获取车辆轨迹失败！');
}
// 调用initMap方法，并将轨迹数据传递过去
_this.initMap(res.data.data.trackArray);
_this.$message.success('获取车辆轨迹成功！');
}).catch(error => {
_this.$message.error('获取车辆轨迹失败：' + error.toString());
});
})
},
initMap(trackArray) {
const _this = this;
AMapLoader.load({
key: 'fdb27c13681d084e85ff8457b5cbe540',
version: '2.0',
plugins: [], // 可以加载地图插件，比如定位、地图工具等
}).then((AMap) => {
// 创建地图对象并存储在 _this.mapInstance 中
_this.map = new AMap.Map('mapContainer', {
zoom: 10, // 设置地图缩放级别
center: [116.397428, 39.90923], // 设置地图中心点坐标
});
// 将轨迹数据添加到地图上
//var lineArr = trackArray.map((item) => [item.longitude / 600000.0, item.latitude / 600000.0]);
this.convertedCoords = this.convertBDToAMap(trackArray);
console.log(this.convertedCoords)
_this.poly = new AMap.Polyline({
path: this.convertedCoords, // 设置折线路径
strokeColor: "#3366ff", // 线颜色
strokeOpacity: 1, // 线透明度
strokeWeight: 3, // 线宽
strokeStyle: "solid", // 线样式
});
_this.poly.setMap(_this.map);
_this.map.setCenter(this.convertedCoords[0])
//_this.map.setFitView();
}).catch((err) => {
console.error('初始化地图失败：', err);
});
},
convertBDToAMap(bdCoordData) {
const aMapCoordData = [];
bdCoordData.forEach(coord => {
const lon = parseFloat(coord.lon) / 600000.0; // 将经度从北斗格式转换为高德地图格式
const lat = parseFloat(coord.lat) / 600000.0; // 将纬度从北斗格式转换为高德地图格式
aMapCoordData.push([lon, lat]); // 添加到结果数组
});
return aMapCoordData;
},
},
mounted() {
this.initMap(this.myArray);
},
};
</script>
<style scoped>
.my-text-area .prepand{
float: left;
width:89px;
height: 28px;
font-size: 12px;
line-height: 28px;
}
</style>
<style>
.my-text-area .el-textarea__inner{
min-height: 28px;
height: 28px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.rounded-corner {
border-radius: 10px; /* 设置圆角的半径为10像素 */
background-color: #f0f0f0; /* 背景颜色 */
padding: 10px; /* 内边距 */
margin: 10px; /* 外边距 */
box-shadow: 0 0 5px #ddd; /* 盒子阴影效果 */
}
</style>