4.12更新
黄大举
parent
99e4f3e912
commit
ff7101d256
|
|
@ -13,7 +13,7 @@ export function listRecords(query) {
|
|||
export function delRecords(recordsId) {
|
||||
return request({
|
||||
url: '/business/records/delete/' + recordsId,
|
||||
method: 'post'
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,28 +5,44 @@
|
|||
<div id="container"></div>
|
||||
</div>
|
||||
|
||||
{{ this.vehicle }}
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import {getPosition, vehicleData} from "@/api/business/records";
|
||||
|
||||
export default {
|
||||
name: "map-view",
|
||||
data() {
|
||||
return {
|
||||
carPosition: ["116.397428", "39.90923"], // 初始化小汽车位置
|
||||
carPosition: ["116.6871620", "39.5228750"], // 初始化小汽车位置
|
||||
carMarker: null, // 存储小汽车Marker
|
||||
animationInterval:null//存储动画定时器
|
||||
animationInterval: null,//存储动画定时器
|
||||
lineArr: [],
|
||||
recordsId: 0,
|
||||
vehicle: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.recordsId = this.$route.query.recordsId;
|
||||
this.getFindVD()
|
||||
},
|
||||
mounted() {
|
||||
this.initAMap();
|
||||
// 初始化 echarts
|
||||
this.initBarChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.animationInterval);//清除定时器
|
||||
this.map?.destroy();
|
||||
},
|
||||
methods: {
|
||||
getFindVD() {
|
||||
vehicleData(this.recordsId)
|
||||
},
|
||||
|
||||
initAMap() {
|
||||
AMapLoader.load({
|
||||
key: "ce38a6b072b603934f6270bd9e97ed49", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
|
|
@ -40,12 +56,14 @@ export default {
|
|||
zoom: 11, // 初始化地图级别
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点位置
|
||||
});
|
||||
|
||||
// 车辆初始化
|
||||
this.carMarker = new AMap.Marker({
|
||||
position: this.carPosition,
|
||||
icon: 'https://webapi.amap.com/images/car.png',
|
||||
map: this.map, // 将Marker添加到地图上
|
||||
});
|
||||
|
||||
// 在地图初始化完成后启动小车动画
|
||||
this.startCarAnimation();
|
||||
})
|
||||
|
|
@ -53,13 +71,98 @@ export default {
|
|||
console.log(e);
|
||||
});
|
||||
},
|
||||
|
||||
startCarAnimation() {
|
||||
this.animationInterval = setInterval(() => {
|
||||
|
||||
this.getRealTimeDataAndUpdatePosition();
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
getRealTimeDataAndUpdatePosition() {
|
||||
getPosition(this.recordsId)
|
||||
.then(response => {
|
||||
this.vehicle = response.data
|
||||
//更新小汽车位置
|
||||
this.carPosition = [this.vehicle.longitude, this.vehicle.latitude];
|
||||
//更新小汽车Marker的位置
|
||||
this.carMarker.setPosition(this.carPosition);
|
||||
// this.center.setPosition(this.carPosition);
|
||||
})
|
||||
},
|
||||
|
||||
// initBarChart() {
|
||||
// // 通过 $ref 进行挂载
|
||||
// let myChart = this.$echarts.init(this.$refs.barChart);
|
||||
// let option = {
|
||||
// series: [
|
||||
// {
|
||||
// type: 'gauge',
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// width: 30,
|
||||
// color: [
|
||||
// [0.3, '#67e0e3'],
|
||||
// [0.7, '#37a2da'],
|
||||
// [1, '#fd666d']
|
||||
// ]
|
||||
// }
|
||||
// },
|
||||
// pointer: {
|
||||
// itemStyle: {
|
||||
// color: 'auto'
|
||||
// }
|
||||
// },
|
||||
// axisTick: {
|
||||
// distance: -30,
|
||||
// length: 8,
|
||||
// lineStyle: {
|
||||
// color: '#fff',
|
||||
// width: 2
|
||||
// }
|
||||
// },
|
||||
// splitLine: {
|
||||
// distance: -30,
|
||||
// length: 30,
|
||||
// lineStyle: {
|
||||
// color: '#fff',
|
||||
// width: 4
|
||||
// }
|
||||
// },
|
||||
// axisLabel: {
|
||||
// color: 'inherit',
|
||||
// distance: 40,
|
||||
// fontSize: 20
|
||||
// },
|
||||
// detail: {
|
||||
// valueAnimation: true,
|
||||
// formatter: '{value} km/h',
|
||||
// color: 'inherit'
|
||||
// },
|
||||
// data: [
|
||||
// {
|
||||
// value: 70
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
// setInterval(function () {
|
||||
// myChart.setOption({
|
||||
// series: [
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// value: +(Math.random() * 100).toFixed(2)
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// });
|
||||
// }, 2000);
|
||||
// myChart.setOption(option);
|
||||
// },
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#container{
|
||||
|
|
@ -72,4 +175,16 @@ export default {
|
|||
border: none !important; /* 移除Marker的边框 */
|
||||
box-shadow: none !important; /* 移除Marker的阴影 */
|
||||
}
|
||||
.home {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
margin: auto;
|
||||
border: 3px solid lightcoral;
|
||||
|
||||
// 宽高是必须给的，可以给百分比、具体的像素等....
|
||||
.barChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue