表格样式我最屌

src/views/virtualDevices/HMvehicle.vue

@@ -43,60 +43,7 @@
               width="95"
             >
               <template slot-scope="scope">
-                <a href="javascript:void(0)" style="color:#20a0ff" @click="dialogVisibleDetail = !dialogVisibleDetail">{{ scope.row.vehicleId }}</a>
-                <el-dialog
-                  title="设备详情"
-                  :visible.sync="dialogVisibleDetail"
-                  width="80%"
-                >
-                  <el-divider />
-                  <div style="padding:20px">
-                    <table class="table-suit">
-                      <tbody>
-                        <tr>
-                          <td>硬件中控ID</td>
-                          <td>{{ scope.row.ecuId }}</td>
-                          <td>车辆ID</td>
-                          <td>{{ scope.row.vehicleId }}</td>
-                          <td>电池ID</td>
-                          <td>{{ scope.row.batteryId }}</td>
-                        </tr>
-                        <tr>
-                          <td>终端IMSI码</td>
-                          <td>{{ scope.row.imsi }}</td>
-                          <td>终端IMEI码</td>
-                          <td>{{ scope.row.imei }}</td>
-                          <td>qrCode</td>
-                          <td>{{ scope.row.qrCode }}</td>
-                        </tr>
-                        <tr>
-                          <td>vehicleStatus</td>
-                          <td>{{ scope.row.vehicleStatus }}</td>
-                          <td>lockStatus</td>
-                          <td>{{ scope.row.lockStatus }}</td>
-                          <td>vehicleVersion</td>
-                          <td>{{ scope.row.vehicleVersion }}</td>
-                        </tr>
-                        <tr>
-                          <td>operationStatus</td>
-                          <td>{{ scope.row.operationStatus }}</td>
-                          <td>cityName</td>
-                          <td>{{ scope.row.cityName }}</td>
-                          <td>lastLat</td>
-                          <td>{{ scope.row.lastLat }}</td>
-                        </tr>
-                        <tr>
-                          <td>gmtActive</td>
-                          <td>{{ scope.row.gmtActive }}</td>
-                          <td>gmtCreate</td>
-                          <td>{{ scope.row.gmtCreate }}</td>
-                          <td>lastLng</td>
-                          <td>{{ scope.row.lastLng }}</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </el-dialog>
+                <a href="javascript:void(0)" style="color:#20a0ff" @click="toastDetail(scope.row)">{{ scope.row.vehicleId }}</a>
               </template>
             </el-table-column>
             <el-table-column
@@ -174,6 +121,59 @@
               </template>
             </el-table-column>
           </el-table>
+          <el-dialog
+            title="设备详情"
+            :visible.sync="dialogVisibleDetail"
+            width="80%"
+          >
+            <el-divider />
+            <div style="padding:20px">
+              <table class="table-suit">
+                <tbody>
+                  <tr>
+                    <td>硬件中控ID</td>
+                    <td>{{ pauseToast.ecuId }}</td>
+                    <td>车辆ID</td>
+                    <td>{{ pauseToast.vehicleId }}</td>
+                    <td>电池ID</td>
+                    <td>{{ pauseToast.batteryId }}</td>
+                  </tr>
+                  <tr>
+                    <td>终端IMSI码</td>
+                    <td>{{ pauseToast.imsi }}</td>
+                    <td>终端IMEI码</td>
+                    <td>{{ pauseToast.imei }}</td>
+                    <td>投放城市名称</td>
+                    <td>{{ pauseToast.cityName }}</td>
+                  </tr>
+                  <tr>
+                    <td>车辆状态</td>
+                    <td>{{ pauseToast.vehicleStatusString }}</td>
+                    <td>锁状态</td>
+                    <td>{{ pauseToast.lockStatus | toLockStatus }}</td>
+                    <td>车辆版本</td>
+                    <td>{{ pauseToast.vehicleVersion }}</td>
+                  </tr>
+                  <tr>
+                    <td>运营状态</td>
+                    <td>{{ pauseToast.operationStatusString }}</td>
+                    <td>连接状态</td>
+                    <td>{{ pauseToast.isActive | toActiveStatus }}</td>
+                    <td>纬度</td>
+                    <td>{{ pauseToast.lastLat }}</td>
+                  </tr>
+                  <tr>
+                    <td>激活时间</td>
+                    <td>{{ pauseToast.gmtActive | toData }}</td>
+                    <td>创建时间</td>
+                    <td>{{ pauseToast.gmtCreate | toData }}</td>
+                    <td>经度</td>
+                    <td>{{ pauseToast.lastLng }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </el-dialog>
           <el-pagination background style="margin-top:30px;" align="center" :current-page="curIndex" :page-size="pageSize" layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" />
         </div>
       </div>
@@ -203,8 +203,68 @@ export default {
     return {
       dialogVisibleDetail: false,
       tableData: [],
+      vehicleSelect: [
+        {
+          code: 0,
+          name: '正常'
+        },
+        {
+          code: 1,
+          name: '故障'
+        },
+        {
+          code: 2,
+          name: '高危不可用'
+        },
+        {
+          code: 10,
+          name: '低危'
+        },
+        {
+          code: 11,
+          name: '高危可用'
+        }
+      ],
+      operationSelect: [
+        {
+          code: 100,
+          name: '运营中'
+        },
+        {
+          code: 200,
+          name: '待运营-出厂'
+        }, {
+          code: 201,
+          name: '待运营-库存'
+        },
+        {
+          code: 202,
+          name: '待运营-移库'
+        },
+        {
+          code: 301,
+          name: '停运-调度中'
+        },
+        {
+          code: 304,
+          name: '停运-没收'
+        },
+        {
+          code: 306,
+          name: '停运-已返厂'
+        },
+        {
+          code: 307,
+          name: '停运-在库'
+        },
+        {
+          code: 400,
+          name: '退出运营-报废'
+        }
+      ],
       loading: true,
       form: {},
+      pauseToast: {},
       queryCode: {},
       curIndex: 1,
       pageSize: 20,
@@ -277,6 +337,13 @@ export default {
         this.total = res.data.total
       })
     },
+    // 详情
+    toastDetail(ele) {
+      this.pauseToast = ele
+      this.pauseToast.operationStatusString = this.operationSelect.filter(each => each.code === this.pauseToast.operationStatus)[0].name
+      this.pauseToast.vehicleStatusString = this.vehicleSelect.filter(each => each.code === this.pauseToast.vehicleStatus)[0].name
+      this.dialogVisibleDetail = true
+    },
     oneKeyCreate() {
       createHmVirtualDevice(this.form).then(res => {
         if (res.code === 200) {
@@ -425,6 +492,8 @@ export default {
       margin-top 30px
       tr
         border 1px solid #eee
+      tr:nth-child(2n)
+        background #fbfbfb
       tr td
         padding 10px 20px
         border-right 1px solid #eee