修改

src/api/car/vehicle_manage.js

@@ -71,3 +71,10 @@ export function getLogCar() {
     method: 'get'
   })
 }
+//对应车辆VIN码查询对应故障 预警 电子围栏
+export function findFaultData(carVin) {
+  return request({
+    url: '/car/sysCar/findFenceByCarVin/'+carVin,
+    method: 'post'
+  })
+}

src/api/message/message.js

@@ -46,7 +46,15 @@ export function findvehicleData(templatedId,code) {
 //设备状态
 export function finddeviceStatusData(templatedId,code) {
   return request({
-    url: '/template/messageTemplateType/finddeviceStatusData?templatedId='+templatedId+"&code="+code,
+    url: '/car/sysCar/findFenceByCarVin?templatedId='+templatedId+"&code="+code,
+    method: 'post'
+  })
+}
+
+//设备状态
+export function findVehicleFaultData(param) {
+  return request({
+    url: '/template/messageTemplateType/finddeviceStatusData?carVin='+param,
     method: 'post'
   })
 }

src/router/index.js

@@ -89,6 +89,7 @@ export const constantRoutes = [
   }
 ]
 
+
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [
   {
@@ -160,7 +161,7 @@ export const dynamicRoutes = [
         meta: {title: '修改生成配置', activeMenu: '/tool/gen'}
       }
     ]
-  }
+  },
 ]
 
 // 防止连续点击多次路由报错

src/views/car/vehicle/index.vue

@@ -9,7 +9,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-
       <el-form-item label="车辆电机厂商" prop="carMotorManufacturer">
         <el-input
           v-model="queryParams.carMotorManufacturer"
@@ -47,7 +46,6 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -83,12 +81,20 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-
     <el-table v-loading="loading" :data="carList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="VIN" align="center" prop="carVin" />
       <el-table-column label="车辆类型" align="center" prop="typeName" />
-      <el-table-column label="状态" align="center" prop="state" />
+      <el-table-column label="状态" align="center" prop="state" >
+        <template slot-scope="scope">
+          <span v-if="scope.row.state==1">
+          <el-tag size="small" type="success">在线</el-tag>
+          </span>
+          <span v-if="scope.row.state==2">
+            <el-tag size="small" type="danger">离线</el-tag>
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column label="电子围栏" align="center" prop="fenceName" />
       <el-table-column label="车辆电机厂商" align="center" prop="carMotorManufacturer" />
       <el-table-column label="电机型号" align="center" prop="carMotorModel" />
@@ -111,10 +117,15 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:car:remove']"
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-share"
+            @click="handleVehicleDetails(scope.row)"
+          >车辆详情</el-button>
         </template>
       </el-table-column>
     </el-table>
-
     <pagination
       v-show="total>0"
       :total="total"
@@ -122,7 +133,6 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
     <!-- 添加或修改车辆基础信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -170,13 +180,39 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 车辆的基本详情信息 -->
+    <el-drawer
+      title="我是标题"
+      :size=1500
+      :visible.sync="drawer"
+      :with-header="false">
+      <template>
+        <el-table
+          :data="faultData"
+          style="width: 100%">
+          <el-table-column
+            prop="faultCode"
+            label="故障码"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="faultName"
+            label="故障名称"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="startTime"
+            label="故障开始时间"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="endTime"
+            label="故障结束时间">
+          </el-table-column>
+        </el-table>
+      </template>
 
-
-
-    <!-- 车辆实时轨迹 -->
-
-
-
+    </el-drawer>
   </div>
 </template>
 
@@ -188,9 +224,9 @@ import {
   addCar,
   updateCar,
   selectCarTypeList,
-  selectFenceList
+  selectFenceList, findFaultData
 } from '/src/api/car/vehicle_manage'
-
+import { findVehicleFaultData } from '../../../api/message/message'
 export default {
   name: "Car",
   data() {
@@ -222,7 +258,11 @@ export default {
       rules: {
       },
       carTypeList:[],
-      fenceList:[]
+      fenceList:[],
+      activeName:'',
+      drawer: false,
+      innerDrawer: false,
+      faultData:[]
     };
   },
   created() {
@@ -230,6 +270,16 @@ export default {
     this.selCarType();
   },
   methods: {
+    //查询对应的车辆VIN码的故障信息、预警信息、报文
+    handleVehicleDetails(car){
+      this.drawer=true;
+      alert(car.carVin)
+      findFaultData(car.carVin).then(res=>{
+        if(res.code==200){
+          this.faultData=res.data;
+        }
+      })
+    },
     /**查询车辆类型列表*/
     selCarType(){
       selectCarTypeList().then(
@@ -238,8 +288,6 @@ export default {
         }
       )
     },
-
-
     /** 查询车辆基础信息列表 */
     getList() {
       this.loading = true;
@@ -340,7 +388,7 @@ export default {
       this.download('system/car/export', {
         ...this.queryParams
       }, `car_${new Date().getTime()}.xlsx`)
-    }
-  }
+    },
+  },
 };
 </script>