车辆列表更新

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
 ```
 

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,
+    url: 'carBase/car/carList/' + data,
-    method: 'get',
+    method: 'get'
-    data
   })
 }
 //车辆信息列表

src/main.js

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

src/views/allCar/catMessage.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 => {
+      carList(1).then(response => {
-        this.tableData = response.data.data
+        this.tableData = response.data
-        console.log(2222222222222222)
+        console.log(response)
         this.listLoading = false
       })
     },
@@ -292,10 +306,90 @@ export default {
     },
     // 批量删除
     delListCar() {},
+
+
+
+
     // 实时轨迹 跳转这个表 carVinId
-    handleShi() {
+    handleShi(vin) {
-      this.$router.push('/allCar/operation')
+      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

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 {
     }
 
   }
-
 }
 </script>
 <style scoped>