车辆列表更新
one
parent
753d06948c
commit
69a62cac60
|
|
@ -16,7 +16,7 @@ npm install @amap/amap-jsapi-loader
|
|||
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
|
||||
npm install --registry=https://registry.npmmirror.com
|
||||
|
||||
# 启动服务
|
||||
# 启动
|
||||
npm run dev
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
//车辆信息列表
|
||||
|
|
|
|||
22
src/main.js
22
src/main.js
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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', // 申请好的Web端开发者Key，首次调用 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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue