diff --git a/src/api/vehicle/vehicle.js b/src/api/vehicle/vehicle.js
new file mode 100644
index 0000000..060d407
--- /dev/null
+++ b/src/api/vehicle/vehicle.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function create(params) {
+  return request({
+    url: '/vehicle/create',
+    method: 'post',
+    data: params
+  })
+}
diff --git a/src/views/vehicle/index.vue b/src/views/vehicle/index.vue
index a226227..82c7bf3 100644
--- a/src/views/vehicle/index.vue
+++ b/src/views/vehicle/index.vue
@@ -4,18 +4,23 @@
       <el-col :span="10">
         <el-row style="height: 50px;">
           <div>
-            <el-button>添加车辆</el-button>
+            <el-button @click="addVehicleDrawer = true">添加车辆</el-button>
           </div>
         </el-row>
         <div class="grid-content bg-purple" :style="{'height': contentHeight - 50 +'px'}">
           <el-row :gutter="10">
+            <el-row :gutter="10" style="margin-bottom: 10px;padding: 0 10px">
+              <el-col :span="6">
+                <el-input v-model="queryParams.vin" prefix-icon="el-icon-search" placeholder="输入VIN检索（模糊）"></el-input>
+              </el-col>
+            </el-row>
             <el-col :span="12" v-for="vehicle in vehicleList" style="margin: 0 0 10px 0;">
               <el-card class="box-card">
                 <div slot="header" class="clearfix">
                   <el-tag :type="!vehicle.online ? 'info' : 'success'" style="padding-left: 0; padding-right: 0">
                     {{ vehicle.vin }}
                   </el-tag>
-                  <el-button style="float: right;" @click="checkVin = vehicle.vin" size="mini">选择</el-button>
+                  <el-button style="float: right;" @click="checkVin = vehicle.vin" size="mini" :disabled="!vehicle.online">选择</el-button>
                   <span style="float: right; color: rgba(255,255,255,0)">|</span>
                   <el-button v-if="!vehicle.online" style="float: right;" size="mini" @click="clientInit(vehicle.vin)">
                     上线
@@ -158,6 +163,26 @@
         </div>
       </el-col>
     </el-row>
+    <el-drawer
+      title="添加车辆"
+      :visible.sync="addVehicleDrawer"
+      direction="ltr"
+      size="50%">
+      <el-row>
+        <el-col :span="22" :offset="1">
+          <h3 style="color: red">一行一个VIN，多VIN进行换行</h3>
+          <el-form ref="form" :model="addForm" label-position="top" label-width="80px">
+            <el-form-item label="车辆VIN">
+              <el-input type="textarea" v-model="addForm.vinStr"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="vehicleCreate">添加车辆</el-button>
+              <el-button>取消</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-drawer>
   </div>
 </template>
 
@@ -172,20 +197,32 @@ import {
   instanceMsg
 } from "@/api/vehicle/instance";
 import {positionList} from "@/api/vehicle/position";
+import {create} from "@/api/vehicle/vehicle";
 
 export default {
   data() {
     return {
       contentHeight: 1024,
+      // 选中的VIN
       checkVin: null,
+      // 路径列表
       positionCodeList: [],
+      // 车辆列表
       vehicleList: [],
+      // 查询
       queryParams: {
         vin: null,
       },
+      // 定时获取车辆列表
       intervalInstanceList: null,
+      // 定时获取车辆数据
       intervalVehicleDataContinued: null,
-      vehicleData: {}
+      // 车辆模拟数据
+      vehicleData: {},
+      // 添加车辆抽屉
+      addVehicleDrawer: false,
+      // 添加表单
+      addForm: {}
     }
   },
   created() {
@@ -196,6 +233,19 @@ export default {
   },
   methods: {
 
+    /**
+     * 车辆添加
+     */
+    vehicleCreate(){
+      create(this.addForm).then(response => {
+        this.$notify({
+          title: '操作提示',
+          message: response.msg,
+          type: response.code === 200 ? 'success' : 'error'
+        })
+      })
+    },
+
     /**
      * 获取车辆数据
      */
@@ -211,7 +261,7 @@ export default {
      * 状态发生改变
      * @param statusKey 状态Key
      */
-    statusChange(statusKey){
+    statusChange(statusKey) {
       debugger
       editStatus(this.checkVin, statusKey, this.vehicleData[statusKey]).then(response => {
         this.$notify({
@@ -310,6 +360,10 @@ export default {
     clientClose(vin){
       instanceClientClose(vin).then(response => {
         this.getInstanceList();
+        // 如果下线的是本车则关闭实时车况查看
+        if (vin === this.checkVin){
+          this.checkVin = null
+        }
         this.$notify({
           title: '操作提示',
           message: response.msg,