车辆上下线

package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
-    "element-ui": "2.13.2",
+    "element-ui": "2.15.14",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/api/vehicle/instance.js

@@ -7,3 +7,15 @@ export function instanceList(params) {
     data: params
   })
 }
+export function instanceClientInit(vin) {
+  return request({
+    url: `/vehicle/instance/client/init/${vin}`,
+    method: 'post'
+  })
+}
+export function instanceClientClose(vin) {
+  return request({
+    url: `/vehicle/instance/client/close/${vin}`,
+    method: 'post'
+  })
+}

src/views/vehicle/index.vue

@@ -1,17 +1,59 @@
 <template>
   <div class="app-container">
     <el-row :gutter="10">
-      <el-col :span="4">
+      <el-col :span="10">
         <div class="grid-content bg-purple" :style="{'height': contentHeight+'px'}">
-          <el-radio-group v-model="checkVin" style="width: 98%">
-            <div class="vehicleDiv" v-for="vehicle in vehicleList">
-              <el-radio :label="vehicle.vin">{{vehicle.vin}}</el-radio>
-            </div>
-          </el-radio-group>
+          <el-row :gutter="10">
+            <el-col :span="12" v-for="vehicle in vehicleList" style="margin: 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;" size="mini">选择</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)">上线</el-button>
+                  <el-button v-if="vehicle.online" style="float: right;" size="mini" @click="clientClose(vehicle.vin)">下线</el-button>
+                </div>
+                <el-descriptions class="margin-top" :column="1" size="mini" border>
+                  <el-descriptions-item>
+                    <template slot="label"> <i class="el-icon-user"></i> 用户名 </template>
+                    kooriookami
+                  </el-descriptions-item>
+                  <el-descriptions-item>
+                    <template slot="label">
+                      <i class="el-icon-mobile-phone"></i>
+                      手机号
+                    </template>
+                    18100000000
+                  </el-descriptions-item>
+                  <el-descriptions-item>
+                    <template slot="label">
+                      <i class="el-icon-location-outline"></i>
+                      居住地
+                    </template>
+                    苏州市
+                  </el-descriptions-item>
+                  <el-descriptions-item>
+                    <template slot="label">
+                      <i class="el-icon-tickets"></i>
+                      备注
+                    </template>
+                    <el-tag size="small">学校</el-tag>
+                  </el-descriptions-item>
+                  <el-descriptions-item>
+                    <template slot="label">
+                      <i class="el-icon-office-building"></i>
+                      联系地址
+                    </template>
+                    江苏省苏州市吴中区吴中大道 1188 号
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-card>
+            </el-col>
+          </el-row>
 
         </div>
       </el-col>
-      <el-col :span="20">
+      <el-col :span="14">
         <div class="grid-content bg-purple" :style="{'height': contentHeight+'px'}">
 
         </div>
@@ -21,7 +63,7 @@
 </template>
 
 <script>
-import {instanceList} from "@/api/vehicle/instance";
+import {instanceClientClose, instanceClientInit, instanceList} from "@/api/vehicle/instance";
 
 export default {
   data() {
@@ -43,6 +85,26 @@ export default {
       instanceList(this.queryParams).then(response => {
         this.vehicleList = response.data;
       })
+    },
+    clientInit(vin){
+      instanceClientInit(vin).then(response => {
+        this.getInstanceList();
+        this.$notify({
+          title: '操作提示',
+          message: response.msg,
+          type: response.code === 200 ? 'success' : 'error'
+        })
+      })
+    },
+    clientClose(vin){
+      instanceClientClose(vin).then(response => {
+        this.getInstanceList();
+        this.$notify({
+          title: '操作提示',
+          message: response.msg,
+          type: response.code === 200 ? 'success' : 'error'
+        })
+      })
     }
   }
 }
@@ -65,7 +127,8 @@ export default {
 
 .grid-content {
   border-radius: 4px;
-  overflow-x: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .grid-content::-webkit-scrollbar {