车辆地图加载完成

车辆地图加载完成

src/api/carlocation.js

@@ -11,10 +11,67 @@ export function vehicleStat() {
 // 获取车辆信息
 export function getVehicleStat(query) {
   var params = new URLSearchParams()
-  params.append('snCode', query) // 你要传给后台的参数值 key/value
+  if (query !== '' && query !== null && query !== undefined) {
+    params.append('snCode', query) // 你要传给后台的参数值 key/value
+  }
   return request({
     url: '/vehicle/getVehicleStat',
     method: 'post',
     data: params
   })
 }
+
+// 获取客户信息
+export function customerInfo(query) {
+  var params = new URLSearchParams()
+  if (query !== '' && query !== null && query !== undefined) {
+    params.append('customerId', query) // 你要传给后台的参数值 key/value
+  }
+  return request({
+    url: '/customer/customerInfo',
+    method: 'post',
+    data: params
+  })
+}
+
+// 获取车辆详细信息
+export function rideCount(query, query2) {
+  var params = new URLSearchParams()
+  if (query !== '' && query !== null && query !== undefined) {
+    params.append('customerId', query) // 你要传给后台的参数值 key/value
+  }
+  if (query2 !== '' && query2 !== null && query2 !== undefined) {
+    params.append('snCode', query2) // 你要传给后台的参数值 key/value
+  }
+  return request({
+    url: '/vehicle/rideCount',
+    method: 'post',
+    data: params
+  })
+}
+
+// 锁定车辆
+export function userLockCar(query) {
+  var params = new URLSearchParams()
+  if (query !== '' && query !== null && query !== undefined) {
+    params.append('deviceId', query) // 你要传给后台的参数值 key/value
+  }
+  return request({
+    url: '/remoteControl/userLockCar',
+    method: 'post',
+    data: params
+  })
+}
+
+// 车辆开锁
+export function userUnLockCar(query) {
+  var params = new URLSearchParams()
+  if (query !== '' && query !== null && query !== undefined) {
+    params.append('deviceId', query) // 你要传给后台的参数值 key/value
+  }
+  return request({
+    url: '/remoteControl/userUnLockCar',
+    method: 'post',
+    data: params
+  })
+}

src/store/modules/app.js

@@ -9,7 +9,7 @@ const app = {
     },
     topmenu: 1,
     device: 'desktop',
-    language: Cookies.get('language') || 'en',
+    language: Cookies.get('language') || 'zh',
     size: Cookies.get('size') || 'medium'
   },
   mutations: {

src/views/carlocation/index.vue

@@ -5,20 +5,32 @@
       <el-tabs v-model="activeName2" type="border-card" @tab-click="handleClick">
         <el-tab-pane label="全部" name="first">
           <div v-for="(item, index) in carlist" :key="index" class="carlistdata">
-            <div>
+            <div :class="activename ===item.snCode? 'caritem active' : 'caritem'" @click="choosecar(item)">
+              {{ item.snCode }}
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="在线" name="second">
+          <div v-for="(item, index) in carlist2" :key="index" class="carlistdata">
+            <div :class="activename ===item.snCode? 'caritem active' : 'caritem'" @click="choosecar(item)">
+              {{ item.snCode }}
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="离线" name="third">
+          <div v-for="(item, index) in carlist3" :key="index" class="carlistdata">
+            <div :class="activename ===item.snCode? 'caritem active' : 'caritem'" @click="choosecar(item)">
               {{ item.snCode }}
             </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="在线" name="second">在线</el-tab-pane>
-        <el-tab-pane label="离线" name="third">离线</el-tab-pane>
       </el-tabs>
     </div>
-    <div id="map_canvas" style="height: 850px; width: 100%"/>
+    <div id="map_canvas" style="height:800px; width: 100%"/>
   </div>
 </template>
 <script>
-import { vehicleStat } from '@/api/carlocation'
+import { vehicleStat, customerInfo, rideCount, userLockCar, userUnLockCar } from '@/api/carlocation'
 
 export default {
   name: 'GGMap',
@@ -31,8 +43,12 @@ export default {
       position: {},
       websock: null,
       activeName2: 'first',
-      carlist: []
-
+      carlist: [],
+      carlist2: [],
+      carlist3: [],
+      activename: '',
+      dialogVisible: false,
+      personinfo: ''
     }
   },
   created() {
@@ -42,13 +58,40 @@ export default {
     this.mapBuild() // 初始化实例之后调用
   },
   methods: {
+
+    choosecar(val) {
+      this.activename = val.snCode
+      console.log(val)
+      if (val.longitude && val.latitude) {
+        this.center = { lng: val.longitude, lat: val.latitude }
+        this.mapBuild(val)
+      } else {
+        this.$message({
+          message: '该车定位有问题',
+          type: 'warning'
+        })
+      }
+      if (val.customerId === null || val.customerId === '' || val.customerId === undefined) {
+        this.$message({
+          message: '该车未绑定',
+          type: 'warning'
+        })
+      }
+    },
     getvehicleStat() {
       vehicleStat()
         .then(res => {
           if (res.data.ret === 200) {
             const arr = res.data.data.content
             this.carlist = res.data.data.content
+            this.carlist2 = res.data.data.content.filter(item => {
+              return item.line === 1
+            })
+            this.carlist3 = res.data.data.content.filter(item => {
+              return item.line === 2
+            })
             const arrb = []
+            console.log(arr)
             arr.map(item => {
               const newobj = {}
               const position = {}
@@ -56,12 +99,15 @@ export default {
                 position.lng = item.longitude
                 position.lat = item.latitude
                 newobj.position = position
-                newobj.name = item.snCode
+                newobj.snCode = item.snCode
+                newobj.customerId = item.customerId
+                newobj.lockStat = item.lockStat
                 arrb.push(newobj)
               }
             })
             console.log(arrb)
             this.markers = arrb
+            this.center = arrb[1].position
             this.mapBuild()
           }
         })
@@ -70,43 +116,115 @@ export default {
       console.log(tab, event)
     },
     //  地图实例
-    mapBuild() {
+    mapBuild(val) {
       // 创建地图实例，zoom是缩放比例
       // eslint-disable-next-line no-undef
       const map = new google.maps.Map(document.getElementById('map_canvas'), {
-        zoom: 6,
+        zoom: 15,
         center: this.center,
         // eslint-disable-next-line no-undef
         mapTypeId: google.maps.MapTypeId.ROADMAP
       })
       // 这里因为需要很多标记，所以遍历了this.markers（后端给的数据）来循环创建标记
+      this.setmakerinfo(map, val)
+    },
+    setmakerinfo(map, val) {
       this.markers.map(item => {
-        // const marker = new MarkerWithLabel({
-        //   position: item.position,
-        //   icon: '../../../static/img/qishou.png', // 标记自定义图标
-        //   draggable: false, // 不可拖动
-        //   map: map, // 地图实例
-        //   labelContent: item.name, // label的内容
-        //   labelAnchor: new google.maps.Point(22, 0), // label的位置，可以调
-        //   labelClass: 'labels', // the CSS class for the label
-        //   labelStyle: { background: '#fff', padding: '5px' }
-        // })
         // 自定义信息窗口
         // eslint-disable-next-line no-undef
         const marker = new google.maps.Marker({
           map: map,
-          position: item.position
+          position: item.position,
+          icon: '../../../static/img/qishou2.png'
         })
-
-        // eslint-disable-next-line no-undef
-        const iw = new google.maps.InfoWindow({
-          content: `<div>
-                          <p>门店地址： ${item.position}</p>
-                          <p>门店名：${item.name}</p>
+        rideCount(item.customerId, item.snCode)
+          .then(res => {
+            console.log(res)
+            if (res.data.ret === 200) {
+              customerInfo(item.customerId)
+                .then(result => {
+                  console.log(result)
+                  // eslint-disable-next-line no-undef
+                  const iw = new google.maps.InfoWindow({
+                    content: `<div>
+                    <div style="border-bottom: 1px solid #f1f1f1;padding:10px">${item.snCode}</div>
+                          <p>里程： ${res.data.data.content[0].Miles}</p>
+                           <p>联系人： ${result.data.data.content.customerName}</p>
+                             <p>联系电话： ${result.data.data.content.phoneNumber}</p>
+                             <div style="border-top: 1px solid #f1f1f1; padding:10px" id="xyz" class="${item.snCode}">
+                                 锁车
+                             </div>
+                             <div style="border-top: 1px solid #f1f1f1; padding:10px" id="xyz2" class="${item.snCode}">
+                                 开锁
+                             </div>
                         </div>` })
-        // 点击信息窗口显示
-        // eslint-disable-next-line no-undef
-        google.maps.event.addListener(marker, 'click', function(e) { iw.open(map, marker) })
+
+                  // 点击信息窗口显
+                  if (val) {
+                    if (val.snCode === item.snCode) {
+                      // eslint-disable-next-line no-undef
+                      const marker2 = new google.maps.Marker({
+                        map: map,
+                        position: item.position,
+                        icon: '../../../static/img/qishou2.png'
+                      })
+                      iw.open(map, marker2)
+                    }
+                  }
+                  // eslint-disable-next-line no-undef
+                  google.maps.event.addListener(marker, 'click', function(e) {
+                    console.log(marker)
+                    console.log(e)
+                    console.log(iw)
+
+                    iw.open(map, marker)
+                  })
+                  const that = this
+                  // eslint-disable-next-line no-undef
+                  google.maps.event.addListener(iw, 'domready', function() {
+                    var dss = document.getElementById('xyz')
+                    var dss2 = document.getElementById('xyz2')
+                    var snCode = document.getElementById('xyz').className
+                    console.log(item)
+                    if (item.lockStat === 1) {
+                      dss2.style.display = 'none'
+                      dss.style.display = 'block'
+                      dss.onclick = function() {
+                        console.log(snCode)
+                        userLockCar(snCode).then(res => {
+                          if (res.data.ret === 200) {
+                            that.$message({
+                              message: '锁车命令发送成功',
+                              type: 'success'
+                            })
+                            setTimeout(function() {
+                              that.getvehicleStat()
+                            }, 4000)
+                          }
+                        })
+                      }
+                    } else if (item.lockStat === 2) {
+                      dss.style.display = 'none'
+                      dss2.style.display = 'block'
+                      dss2.onclick = function() {
+                        console.log(snCode)
+                        userUnLockCar(snCode).then(res => {
+                          if (res.data.ret === 200) {
+                            that.$message({
+                              message: '开锁命令发送成功',
+                              type: 'success'
+                            })
+                            setTimeout(function() {
+                              that.getvehicleStat()
+                            }, 4000)
+                          }
+                        })
+                      }
+                    }
+                  })
+                })
+            }
+          })
       })
     }
   }
@@ -126,4 +244,12 @@ export default {
  .leftlocation{
    width: 20%
  }
+ .caritem {
+   padding: 10px;
+   color: #9e9e9e;
+   cursor:pointer
+ }
+ .active {
+   color: #000
+ }
 </style>