车辆列表更新

master
one 2023-12-05 20:43:08 +08:00
parent 753d06948c
commit 69a62cac60
5 changed files with 124 additions and 32 deletions

View File

@ -16,7 +16,7 @@ npm install @amap/amap-jsapi-loader
# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com
# 启动服务
# 启动
npm run dev
```

View File

@ -4,9 +4,8 @@ import request from "@/utils/request";
//车辆信息列表
export function carList(data) {
return request({
url: 'carBase/car/carList/' + 1,
method: 'get',
data
url: 'carBase/car/carList/' + data,
method: 'get'
})
}
//车辆信息列表

View File

@ -78,17 +78,17 @@ Vue.use(Element, {
})
//高德地图相关配置
import AMapLoader from '@amap/amap-jsapi-loader'
Vue.prototype.$AMap = null
AMapLoader.load({
key: '9a267a434f26f5dd5a87fb89d128f745',
version: '2.0',
//'AMap.Autocomplete', 'AMap.MoveAnimation','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'
plugins: [],
}).then((AMap) => {
Vue.prototype.$AMap = AMap
})
//
// Vue.prototype.$AMap = null
// AMapLoader.load({
// key: '9a267a434f26f5dd5a87fb89d128f745',
// version: '2.0',
// //'AMap.Autocomplete', 'AMap.MoveAnimation','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'
// plugins: [],
//
// }).then((AMap) => {
// Vue.prototype.$AMap = AMap
// })
Vue.config.productionTip = false
new Vue({

View File

@ -165,9 +165,9 @@
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 实时轨迹-->
<el-button size="mini" @click="handleShi(scope.$index , scope.row.carVinId)">实时轨迹</el-button>
<el-button size="mini" @click="handleShi(scope.row.carVinId)"></el-button>
<!-- 111111-->
<el-button size="mini" @click="handleShiGui(scope.$index , scope.row.carVinId)">1111</el-button>
<!-- <el-button size="mini" @click="handleShiGui(scope.$index , scope.row.carVinId)">1111</el-button>-->
<!-- 修改车辆信息-->
<el-button size="mini" @click="handleEdit(scope.$index, scope.row.carVinId)">修改</el-button>
<!-- 删除车辆信息-->
@ -175,6 +175,9 @@
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="flag">
<div id="container" />
</el-dialog>
</div>
</template>
@ -190,7 +193,8 @@ import {
carUpd,
getCarType,
getFenceList
} from '../../api/carList/list'
} from '@/api/carList/list'
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: 'CarList',
@ -207,6 +211,7 @@ export default {
data() {
return {
list: null,
flag: false,
listLoading: true,
from: {
carVinId: null,
@ -240,18 +245,27 @@ export default {
fenceList: [],
carTypeList: [],
dialogFormVisible: false,
dialogFormVisible1: false
dialogFormVisible1: false,
socket: null,
map: null,
marker: null,
passedPolyline: null,
lineArr: [[116.478935, 39.997761]],
arr: []
}
},
created() {
this.fetchData()
},
mounted() {
},
methods: {
fetchData: function() {
fetchData() {
this.listLoading = true
carList().then(response => {
this.tableData = response.data.data
console.log(2222222222222222)
carList(1).then(response => {
this.tableData = response.data
console.log(response)
this.listLoading = false
})
},
@ -292,10 +306,90 @@ export default {
},
//
delListCar() {},
// carVinId
handleShi() {
this.$router.push('/allCar/operation')
handleShi(vin) {
this.flag = true;
this.socket = new WebSocket('ws://10.100.1.8:9804/websocket/'+vin)
this.socket.onopen = this.handleOpen
this.socket.onmessage = this.handleMessage
this.socket.onerror = this.handleError
this.initMap();
},
handleOpen() {
console.log('WebSocket is open!')
},
//
handleMessage(event) {
let lastArr = []
this.arr = JSON.parse(event.data)
const len = this.lineArr.length
if (len !== 0) {
lastArr = this.lineArr[len - 1]
this.lineArr.length = 0
this.lineArr.push(lastArr)
}
console.log(this.lineArr)
this.lineArr.push(this.arr) //
console.log(this.lineArr)
this.startAnimation()
},
handleError(error) {
console.log('异常')
// console.error(`Error occurred: ${error}`);
},
initMap() {
AMapLoader.load({
key: '9a267a434f26f5dd5a87fb89d128f745', // WebKey load
version: '2.0', // JSAPI 1.4.15
plugins: ['AMap.MoveAnimation'], // 使'AMap.Scale'
}).then((AMap) => {
this.map = new AMap.Map('container', {
pitch: 50, // 0 - 83
viewMode: '3D', //
rotateEnable: true, // + Ctrl +
pitchEnable: true, // + Ctrl +
zoom: 17, //
rotation: -15, //
zooms: [2, 20], //
center: this.lineArr[0]//
})
this.marker = new AMap.Marker({
map: this.map,
position: this.lineArr[0],
icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
offset: new AMap.Pixel(-13, -26),
autoRotation: true
})
this.marker.on('moving', (e) => {
// this.passedPolyline.setPath(e.passedPath)
this.map.setCenter(e.target.getPosition(), true)
})
this.map.setFitView()
})
},
//
startAnimation() {
this.marker.setPosition(this.arr)
this.marker.on('moving', (e) => {
this.passedPolyline.setPath(e.passedPath)
this.$AMap.setCenter(e.target.getPosition(), true)
})
this.marker.moveAlong(this.lineArr,
{
duration: 200
})
},
//
handleEdit(carVinId) {
this.dialogFormVisible1 = true

View File

@ -45,9 +45,9 @@ export default {
}
},
created() {
this.socket = new WebSocket('ws://10.100.1.8:9804/websocket/vin5211314')
},
mounted() {
this.socket = new WebSocket('ws://localhost:9804/websocket/vin123123123')
setTimeout(() => {
this.initAMap()
}, 500)
@ -56,9 +56,9 @@ export default {
this.socket.onerror = this.handleError
},
methods: {
send() {
send(msg) {
//
this.socket.send('nihao')
this.socket.send(msg)
},
handleOpen() {
console.log('WebSocket is open!')
@ -73,9 +73,9 @@ export default {
this.lineArr.length = 0
this.lineArr.push(lastArr)
}
console.log(this.lineArr.toString())
console.log(this.lineArr)
this.lineArr.push(this.arr) //
console.log(this.lineArr.toString())
console.log(this.lineArr)
this.startAnimation()
},
@ -118,7 +118,7 @@ export default {
this.marker.moveAlong(this.lineArr,
{
duration: 2000
duration: 200
})
},
@ -138,7 +138,6 @@ export default {
}
}
}
</script>
<style scoped>