history record
parent
243e5057db
commit
393f5de05d
|
|
@ -49,6 +49,7 @@ import AMapLoader from '@amap/amap-jsapi-loader';
|
||||||
console.log(e);
|
console.log(e);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
drawPolygon() {
|
drawPolygon() {
|
||||||
this.mouseTool.polygon({
|
this.mouseTool.polygon({
|
||||||
strokeColor: "#FF33FF",
|
strokeColor: "#FF33FF",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-button type="warning">按钮</el-button>
|
||||||
|
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
<script setup>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,14 +1,13 @@
|
||||||
<script >
|
<script >
|
||||||
import path from "path";
|
import path from "path";
|
||||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||||
window._AMapSecurityConfig = {
|
|
||||||
securityJsCode:'6dc027fe91257ed0b06af9924201212c'
|
|
||||||
}
|
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return{
|
return{
|
||||||
|
multiple: true,
|
||||||
|
duration:2000,
|
||||||
AMap: null,
|
AMap: null,
|
||||||
map: null,
|
map: null,
|
||||||
mouseTool: null,
|
mouseTool: null,
|
||||||
|
|
@ -17,6 +16,16 @@ export default {
|
||||||
carVin:"VIN123465798",
|
carVin:"VIN123465798",
|
||||||
startTime:"2023-01-01 12:01:59",
|
startTime:"2023-01-01 12:01:59",
|
||||||
endTime:"2023-01-01 12:10:21"
|
endTime:"2023-01-01 12:10:21"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
carVin:"VIN66666666",
|
||||||
|
startTime:"2022-01-01 12:01:59",
|
||||||
|
endTime:"2022-01-01 12:10:21"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
carVin:"VIN88888888",
|
||||||
|
startTime:"2021-01-01 12:01:59",
|
||||||
|
endTime:"2021-01-01 12:10:21"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
lineArr: [
|
lineArr: [
|
||||||
|
|
@ -44,32 +53,74 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.initAMap()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
doDo(){
|
doDo(){
|
||||||
// this.$router.push('/cmpany/firm')
|
// this.$router.push('/cmpany/firm')
|
||||||
this.initAMap()
|
this.initMap()
|
||||||
|
this.startAnimation()
|
||||||
},
|
},
|
||||||
initAMap() {
|
initMap() {
|
||||||
AMapLoader.load({
|
AMapLoader.load({
|
||||||
key: 'e31845f75485d475ad64b1946691f717',
|
key: "0b5f26b194361cbc9571101bc2856962", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
version: '2.0',
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
plugins: ['AMap.MouseTool','AMap.LngLat', 'AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar', 'AMap.Geocoder', 'AMap.Marker',
|
plugins: [
|
||||||
'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow', 'AMap.PolyEditor','AMap.MouseTool','AMap.PlaceSearch'],
|
"AMap.Scale",
|
||||||
|
"AMap.HawkEye",
|
||||||
|
"AMap.ToolBar",
|
||||||
|
"AMap.AutoComplete",
|
||||||
|
"AMap.PlaceSearch",
|
||||||
|
"AMap.ControlBar",
|
||||||
|
"AMap.MouseTool",
|
||||||
|
"AMap.DragRoute",
|
||||||
|
"AMap.MoveAnimation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
}).then((AMap) => {
|
}).then((AMap) => {
|
||||||
this.map = new AMap.Map('container', {
|
// 获取到作为地图容器的DOM元素，创建地图实例
|
||||||
|
this.map = new AMap.Map("container", { //设置地图容器id
|
||||||
resizeEnable: true,
|
resizeEnable: true,
|
||||||
viewMode: '2D',
|
viewMode: "2D", // 使用3D视图
|
||||||
zoomEnable: true,
|
zoomEnable: true, // 地图是否可缩放，默认值为true
|
||||||
dragEnable: true,
|
dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
|
||||||
doubleClickZoom: true,
|
doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
|
||||||
zoom: 17,
|
zoom: 13, //初始化地图级别
|
||||||
showBuildingBlock: true,
|
center: this.lineArr[0], // 初始化中心点坐标 北京
|
||||||
pitch: 55,
|
// mapStyle: "amap://styles/darkblue", // 设置颜色底层
|
||||||
})
|
})
|
||||||
}).catch(e => {
|
|
||||||
console.log(e)
|
this.marker = new AMap.Marker({
|
||||||
|
position: this.lineArr[0],
|
||||||
|
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
|
||||||
|
offset: new AMap.Pixel(-13, -26),
|
||||||
|
});
|
||||||
|
this.map.add(this.marker)
|
||||||
|
|
||||||
|
// 绘制轨迹
|
||||||
|
this.polyline = new AMap.Polyline({
|
||||||
|
path: this.lineArr,
|
||||||
|
showDir: true,
|
||||||
|
strokeColor: "#28F", //线颜色
|
||||||
|
// strokeOpacity: 1, //线透明度
|
||||||
|
strokeWeight: 6, //线宽
|
||||||
|
// strokeStyle: "solid" //线样式
|
||||||
|
});
|
||||||
|
this.map.add(this.polyline)
|
||||||
|
|
||||||
|
// 走过的路径
|
||||||
|
this.passedPolyline = new AMap.Polyline({
|
||||||
|
strokeColor: "#AF5", //线颜色
|
||||||
|
strokeWeight: 6, //线宽
|
||||||
|
});
|
||||||
|
this.map.add(this.passedPolyline)
|
||||||
|
|
||||||
|
// 监听marker移动
|
||||||
|
this.marker.on('moving', (e) => {
|
||||||
|
console.log('marker动了', e)
|
||||||
|
this.passedPolyline.setPath(e.passedPath); // 设置路径样式
|
||||||
|
this.map.setCenter(e.target.getPosition(), true) // 设置地图中心点
|
||||||
|
});
|
||||||
|
|
||||||
|
this.map.setFitView(); // 根据覆盖物自适应展示地图
|
||||||
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
startAnimation () {
|
startAnimation () {
|
||||||
|
|
@ -90,48 +141,70 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div id="container"></div>
|
<div>
|
||||||
<el-form>
|
|
||||||
<table style="width: 100% ">
|
<el-form>
|
||||||
<tr>
|
<table style="width: 100% ">
|
||||||
<td>VIN</td>
|
<tr>
|
||||||
<td><el-input placeholder="请输入车辆VIN"></el-input></td>
|
<td>VIN</td>
|
||||||
<td>开始时间</td>
|
<td><el-input placeholder="请输入车辆VIN"></el-input></td>
|
||||||
<td><el-input placeholder="请输入开始时间"></el-input></td>
|
<td>开始时间</td>
|
||||||
<td>结束时间</td>
|
<td><el-input placeholder="请输入开始时间"></el-input></td>
|
||||||
<td><el-input placeholder="请输入结束时间"></el-input></td>
|
<td>结束时间</td>
|
||||||
<td>
|
<td><el-input placeholder="请输入结束时间"></el-input></td>
|
||||||
<el-button type="primary">搜索</el-button>
|
<td>
|
||||||
<el-button type="danger">重置</el-button>
|
<el-button type="primary">搜索</el-button>
|
||||||
</td>
|
<el-button type="danger">重置</el-button>
|
||||||
</tr>
|
</td>
|
||||||
</table>
|
</tr>
|
||||||
</el-form>
|
</table>
|
||||||
<el-table :data="historyList">
|
</el-form>
|
||||||
<el-table-column label="VIN">
|
<el-button
|
||||||
<template slot-scope="scope">
|
type="primary"
|
||||||
{{scope.row.carVin}}
|
plain
|
||||||
</template>
|
icon="el-icon-plus"
|
||||||
</el-table-column>
|
size="mini"
|
||||||
<el-table-column label="开始时间">
|
v-hasPermi="['vehicle:record:add']"
|
||||||
<template slot-scope="scope">
|
>新增</el-button>
|
||||||
{{scope.row.startTime}}
|
<el-button
|
||||||
</template>
|
type="danger"
|
||||||
</el-table-column>
|
plain
|
||||||
<el-table-column label="结束时间">
|
icon="el-icon-delete"
|
||||||
<template slot-scope="scope">
|
size="mini"
|
||||||
{{scope.row.endTime}}
|
:disabled="multiple"
|
||||||
</template>
|
v-hasPermi="['vehicle:record:remove']"
|
||||||
</el-table-column>
|
>删除</el-button>
|
||||||
<el-table-column label="操作">
|
<el-table :data="historyList">
|
||||||
<el-button @click="doDo" type="text">历史轨迹</el-button>
|
<el-table-column label="VIN">
|
||||||
<el-button type="warning">删除</el-button>
|
<template slot-scope="scope">
|
||||||
</el-table-column>
|
{{scope.row.carVin}}
|
||||||
</el-table>
|
</template>
|
||||||
</div>
|
</el-table-column>
|
||||||
|
<el-table-column label="开始时间">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{scope.row.startTime}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="结束时间">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{scope.row.endTime}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<el-button @click="doDo" type="text">历史轨迹</el-button>
|
||||||
|
<el-button type="warning">删除</el-button>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div id="container"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
#container{
|
||||||
|
width: 50%;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue