diff --git a/README.md b/README.md
index f230621..a769b4d 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ npm install @amap/amap-jsapi-loader
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com
-# 启动服务
+# 启动
npm run dev
```
diff --git a/src/api/carList/list.js b/src/api/carList/list.js
index 30e8108..8a78cbe 100644
--- a/src/api/carList/list.js
+++ b/src/api/carList/list.js
@@ -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'
})
}
//车辆信息列表
diff --git a/src/main.js b/src/main.js
index 52d9fc3..ef845ab 100644
--- a/src/main.js
+++ b/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({
diff --git a/src/views/allCar/catMessage.vue b/src/views/allCar/catMessage.vue
index 397fef9..89afed2 100644
--- a/src/views/allCar/catMessage.vue
+++ b/src/views/allCar/catMessage.vue
@@ -165,9 +165,9 @@
- 实时轨迹
+ 实时轨迹
- 1111
+
修改
@@ -175,6 +175,9 @@
+
+
+
@@ -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
diff --git a/src/views/allCar/operation.vue b/src/views/allCar/operation.vue
index f2b702e..ed30bdb 100644
--- a/src/views/allCar/operation.vue
+++ b/src/views/allCar/operation.vue
@@ -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 {
}
}
-
}