轮子科技关联组件

src/views/components/carMile.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="mile_warp">
-    <div>车辆行驶里程</div>
     <table>
       <thead>
         <tr>

src/views/components/carWarn.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="mile_warp">
+    <table>
+      <thead>
+        <tr>
+          <th>时间</th>
+          <th>车牌号</th>
+          <th>报警信息</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item,index) in carMile" :key="'car'+index">
+          <td>{{item.cardNo}}</td>
+          <td>{{item.mile}}</td>
+          <td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { lunzApi, key, carList } from "@/api/data";
+export default {
+  data() {
+    return {
+      carList: carList,//车辆设备
+      carMile:[],
+    }
+  },
+  mounted() {
+    this.queryYesterdayMile();
+  },
+  methods: {
+    //昨日里程
+    queryYesterdayMile() {
+      lunzApi.getYesterdayMile(key).then(res => {
+        let resData = res.Data;
+        console.log(resData)
+        this.carList.map(item => {
+          let idx = resData.findIndex(item2 => item2.Imei == item.deviceId);
+          item.mile = idx > -1 ? res.Data[idx].Mile : 0;
+          this.carMile.push(item);
+        })
+        this.carMile.sort((a,b) => {
+          return b.mile - a.mile;
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.mile_warp {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-size: 12px;
+}
+</style>

src/views/dashboard/homepage.vue

@@ -43,7 +43,9 @@
           <div class="right_time">数据更新时间:2022-01-09</div>
         </div>
       </div>
-      <div class="center_cen"></div>
+      <div class="center_cen">
+        <PathMap></PathMap>
+      </div>
       <div class="cen_bot">
         <div class="echarts"></div>
         <div class="echarts"></div>
@@ -62,11 +64,13 @@
       <div class="right_center">
         <div class="title_box">
           <div class="tit">车辆行驶里程</div>
+          <CarMile></CarMile>
         </div>
       </div>
       <div class="right_bot">
         <div class="title_box">
           <div class="tit">车辆报警</div>
+          <CarWarn></CarWarn>
         </div>
       </div>
     </div>
@@ -74,7 +78,15 @@
 </template>
 
 <script>
+import PathMap from '../components/pathMap';
+import CarMile from '../components/carMile';
+import CarWarn from '../components/carWarn';
 export default {
+  components: {
+    PathMap,
+    CarMile,
+    CarWarn,
+  },
   data() {
     return {
       timer: null,