From 69a62cac60bae542d9ea08f159516b69b7104762 Mon Sep 17 00:00:00 2001 From: one Date: Tue, 5 Dec 2023 20:43:08 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BD=A6=E8=BE=86=E5=88=97=E8=A1=A8=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/api/carList/list.js | 5 +- src/main.js | 22 +++--- src/views/allCar/catMessage.vue | 114 +++++++++++++++++++++++++++++--- src/views/allCar/operation.vue | 13 ++-- 5 files changed, 124 insertions(+), 32 deletions(-) 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 @@ + +
+
@@ -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 { } } - }