新增 今日车辆统计 页面，已完成

build/webpack.dev.conf.js

@@ -1,34 +1,40 @@
-'use strict'
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const path = require('path')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-const portfinder = require('portfinder')
+"use strict";
+const utils = require("./utils");
+const webpack = require("webpack");
+const config = require("../config");
+const merge = require("webpack-merge");
+const path = require("path");
+const baseWebpackConfig = require("./webpack.base.conf");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
+const portfinder = require("portfinder");
 
-const HOST = process.env.HOST
-const PORT = process.env.PORT && Number(process.env.PORT)
+const HOST = process.env.HOST;
+const PORT = process.env.PORT && Number(process.env.PORT);
 
 const devWebpackConfig = merge(baseWebpackConfig, {
   module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+    rules: utils.styleLoaders({
+      sourceMap: config.dev.cssSourceMap,
+      usePostCSS: true
+    })
   },
   // cheap-module-eval-source-map is faster for development
   devtool: config.dev.devtool,
 
   // these devServer options should be customized in /config/index.js
   devServer: {
-    clientLogLevel: 'warning',
+    clientLogLevel: "warning",
     historyApiFallback: {
       rewrites: [
-        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
-      ],
+        {
+          from: /.*/,
+          to: path.posix.join(config.dev.assetsPublicPath, "index.html")
+        }
+      ]
     },
-    useLocalIp: true,  //////
+    useLocalIp: true, //////
     hot: true,
     contentBase: false, // since we use CopyWebpackPlugin.
     compress: true,
@@ -42,60 +48,63 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     proxy: config.dev.proxyTable,
     quiet: true, // necessary for FriendlyErrorsPlugin
     watchOptions: {
-      poll: config.dev.poll,
+      poll: config.dev.poll
     }
   },
   plugins: [
     new webpack.DefinePlugin({
-      'process.env': require('../config/dev.env')
+      "process.env": require("../config/dev.env")
     }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
     new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
+      filename: "index.html",
+      template: "index.html",
       inject: true
     }),
     // copy custom static assets
     new CopyWebpackPlugin([
       {
-        from: path.resolve(__dirname, '../static'),
+        from: path.resolve(__dirname, "../static"),
         to: config.dev.assetsSubDirectory,
-        ignore: ['.*']
+        ignore: [".*"]
       }
     ])
   ]
-})
+});
 
 module.exports = new Promise((resolve, reject) => {
-  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.basePort = process.env.PORT || config.dev.port;
   portfinder.getPort((err, port) => {
     if (err) {
-      reject(err)
+      reject(err);
     } else {
       // publish the new Port, necessary for e2e tests
-      process.env.PORT = port
+      process.env.PORT = port;
       // add port to devServer config
-      devWebpackConfig.devServer.port = port
+      devWebpackConfig.devServer.port = port;
 
       // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
-        compilationSuccessInfo: {
-          // messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
-          messages: [ //下面两个地方，直接复制即可
-            `App runing at: `,
-            ` - Local: http://localhost:${port}`, //配置这里
-            ` - Network: http://${require('ip').address()}:${port}`,//配置这里
-          ],
-        },
-        onErrors: config.dev.notifyOnErrors
-          ? utils.createNotifierCallback()
-          : undefined
-      }))
+      devWebpackConfig.plugins.push(
+        new FriendlyErrorsPlugin({
+          compilationSuccessInfo: {
+            // messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+            messages: [
+              //下面两个地方，直接复制即可
+              `App runing at: `,
+              ` - Local: http://localhost:${port}`, //配置这里
+              ` - Network: http://${require("ip").address()}:${port}` //配置这里
+            ]
+          },
+          onErrors: config.dev.notifyOnErrors
+            ? utils.createNotifierCallback()
+            : undefined
+        })
+      );
 
-      resolve(devWebpackConfig)
+      resolve(devWebpackConfig);
     }
-  })
-})
+  });
+});

config/index.js

@@ -26,7 +26,7 @@ module.exports = {
     // Various Dev Server settings
     // host: 'localhost', // can be overwritten by process.env.HOST
     host: '0.0.0.0',
-    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,
     notifyOnErrors: true,

index.html

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>admin</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>车辆大屏管理系统</title>
   </head>
+
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->

src/layout/components/NavbarItem.vue

@@ -15,6 +15,21 @@
       :collapse="isCollapse"
       router
     >
+      <el-menu-item index="/carcome">
+        <div class="icons">
+          <img
+            style="width:25px"
+            v-if="ItemIndex == '/carcome'"
+            src="../../assets/images/carcome-active.png"
+          />
+          <img
+            style="width:25px"
+            v-else
+            src="../../assets/images/carcome.png"
+          />
+        </div>
+        <span slot="title">出入统计</span>
+      </el-menu-item>
       <el-menu-item index="/car">
         <div class="icons">
           <img
@@ -54,7 +69,7 @@ export default {
   name: "NavbarItem",
   data() {
     return {
-      isCollapse: false,
+      isCollapse: false
     };
   },
   mounted() {},
@@ -63,8 +78,8 @@ export default {
       get() {
         return this.$route.path;
       },
-      set(val) {},
-    },
+      set(val) {}
+    }
   },
   methods: {
     handleOpen(key, keyPath) {
@@ -72,8 +87,8 @@ export default {
     },
     handleClose(key, keyPath) {
       console.log(key, keyPath);
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -90,7 +105,7 @@ export default {
     .nav-title {
       position: absolute;
       display: inline-block;
-      height: 53px;
+      height: 45px;
       line-height: 53px;
       color: #fff;
       font-size: 36px;
@@ -100,7 +115,7 @@ export default {
   }
 
   .el-menu {
-    margin-top: 33px;
+    margin-top: 20px;
     border: none;
     .is-active {
       background-color: rgba(43, 76, 254, 1) !important;
@@ -112,7 +127,7 @@ export default {
 
     .el-menu-item {
       margin-left: 20px;
-      height: 52px;
+      height: 45px;
       line-height: 0;
       margin-bottom: 13px;
       font-size: 18px;
@@ -138,4 +153,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/layout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="box">
-    <el-container style="height: 100%">
+    <el-container>
       <el-aside>
         <NavbarItem></NavbarItem>
       </el-aside>
@@ -27,20 +27,23 @@ export default {
     return {};
   },
   mounted() {},
-  methods: {},
+  methods: {}
 };
 </script>
 
-
 <style scoped lang="scss">
 .box {
   width: 100%;
-  height: 100%;
+  height: calc(100vh);
+  max-height: 1080px;
 
+  .el-container {
+    height: 100%;
+  }
   .el-header {
     color: #333;
     text-align: center;
-    width: 1660px;
+    // width: 1660px;
     padding: 0;
     height: 96px !important;
     background: rgba(255, 255, 255, 1);
@@ -57,7 +60,10 @@ export default {
 
   .el-main {
     background: RGBA(235, 238, 246, 1);
-    padding: 32px 0 0 25px;
+    height: calc(100% - 96px);
+    // padding: 32px 0 0 25px;
+    // height: 90%;
+    padding: 0;
   }
 }
-</style>
+</style>

src/router/index.js

@@ -4,7 +4,7 @@ import Layout from '@/layout'
 import store from '@/store'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 Vue.use(Router)
-//不管是超级管理员还是普通用户都可以看到的页面 
+//不管是超级管理员还是普通用户都可以看到的页面
 export const constantRoutes = [
     // 登录页
     {
@@ -32,7 +32,7 @@ export const asyncRoutes = [
                 meta: {
                     isAuth: true,
                     title: '主页',
-                    keepAlive: true, //缓存组件 
+                    keepAlive: true, //缓存组件
                     requireAuth: true
                 },
                 component: () => import('@/views/car'),
@@ -47,6 +47,15 @@ export const asyncRoutes = [
                 component: () => import('@/views/affiche')
             },
             {
+              path: 'carcome',
+              name: 'carcome',
+              meta: {
+                  isAuth: true, title: '出入统计',
+                  requireAuth: true
+              },
+              component: () => import('@/views/carcome')
+          },
+            {
                 path: 'role',
                 name: 'role',
                 meta: { isAuth: true, title: '角色管理', requireAuth: true },
@@ -83,13 +92,13 @@ router.beforeEach((to, from, next) => {
             else { //token不一样时候就返回登录页面
                 next({
                     path: '/login',//返回登录界面
-                    // query: {redirect: to.fullPath}  
+                    // query: {redirect: to.fullPath}
                 })
             }
         } else {
             next({
                 path: '/login',//返回登录界面
-                // query: {redirect: to.fullPath}  
+                // query: {redirect: to.fullPath}
             })
         }
     }
@@ -117,4 +126,4 @@ export default router
 //     //     // 否则，放行
 //     //     next()
 //     // }
-// })
+// })

src/views/affiche/index.vue

@@ -42,7 +42,11 @@
           <div style="display: flex" class="addblock">
             <div class="addcar export" @click="addCar">新增公告</div>
             <!-- 详情弹窗区域 -->
-            <el-dialog :title="addTitle" :visible.sync="dialogVisible" width="30%">
+            <el-dialog
+              :title="addTitle"
+              :visible.sync="dialogVisible"
+              width="30%"
+            >
               <div class="affiche-centent">
                 <div class="title">内容:</div>
                 <div class="content">
@@ -73,18 +77,28 @@
             element-loading-background="rgba(0, 0, 0, 0.8)"
             :data="tableData"
             @selection-change="handleSelectionChange"
-            max-height="600"
-            style="width: 1550px; height: 600px"
+            max-height="550"
+            style="width: 100%; height: 550px"
             stripe
             class="Devicetable"
             :cell-style="rowbg"
             :header-cell-style="{
               color: ' rgba(0, 0, 0, 1)',
-              background: 'rgba(230, 236, 254, 1)',
+              background: 'rgba(230, 236, 254, 1)'
             }"
           >
-            <el-table-column width="120" label="序号" type="index" align="center"></el-table-column>
-            <el-table-column prop="create_time" align="center" label="时间" width="350"></el-table-column>
+            <el-table-column
+              width="120"
+              label="序号"
+              type="index"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="create_time"
+              align="center"
+              label="时间"
+              width="350"
+            ></el-table-column>
             <el-table-column
               prop="content"
               align="center"
@@ -105,10 +119,15 @@
                 </div>
               </template>
             </el-table-column>
-            <el-table-column align="center" label="操作">
+            <el-table-column align="center" label="操作" width="200">
               <template slot-scope="{ row }">
                 <!-- 详情按钮 -->
-                <span @click="amendCar(row)" class="operate" style="margin-right: 5px">修改</span>
+                <span
+                  @click="amendCar(row)"
+                  class="operate"
+                  style="margin-right: 5px"
+                  >修改</span
+                >
                 <!-- 删除按钮 -->
                 <span @click="handleDelete(row)" class="operate">删除</span>
               </template>
@@ -479,19 +498,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.inform {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
 .inform /deep/ .el-card {
-  .el-card__header {
-    border-bottom: none;
-  }
+  width: 97.5%;
+  height: 95%;
 
-  width: 1612px;
-  height: 950px;
   box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16) !important;
 
   border-radius: 8px;
-
+  .el-card__header {
+    border-bottom: none;
+  }
   .clearfix {
-    height: 96px;
+    height: 66px;
     box-sizing: border-box;
     display: flex;
     margin: 0 36px;
@@ -570,7 +594,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 33px 0 34px 0;
+      padding: 15px 0 15px 0;
       font-size: 16px;
       font-weight: 400;
       color: #000;
@@ -628,7 +652,7 @@ export default {
             background: #ffffff;
             box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
             border-radius: 10px;
-            margin-top: 319px !important;
+            margin-top: 230px !important;
 
             .el-dialog__header {
               height: 60px;
@@ -795,6 +819,9 @@ export default {
 
         .el-table__header-wrapper {
           border-radius: 5px;
+          .el-table__header {
+            width: 100% !important;
+          }
 
           .el-checkbox.is-checked {
             .el-checkbox__inner {
@@ -812,6 +839,7 @@ export default {
 
         .el-table__body-wrapper {
           .el-table__body {
+            width: 100% !important;
             .el-table__row {
               .el-table_1_column_7 {
                 .cell {
@@ -959,7 +987,7 @@ export default {
         }
 
         tr {
-          height: 60px;
+          height: 55px;
 
           td {
             padding: 0;
@@ -1216,4 +1244,4 @@ export default {
     background-color: #296de3;
   }
 }
-</style>
+</style>

src/views/car/index.vue

@@ -1,21 +1,28 @@
 <template>
-  <div class="inform">
+  <div class="inform" style="height:100%">
     <el-card class="box-card">
       <!-- 标题区域 -->
-      <div slot="header" class="clearfix">
+      <!-- <div slot="header" class="clearfix">
         <div class="inform-title">当日出入统计</div>
       </div>
       <div class="scroll">
         <div class="carNum">
-          <div class="carType carNumType" v-for="item in carTypeNum" :key="item.name">
+          <div
+            class="carType carNumType"
+            v-for="item in carTypeNum"
+            :key="item.name"
+          >
             <span class="type">{{ item.name }}</span>
             <div class="num">{{ item.value }}</div>
             <span>辆</span>
           </div>
         </div>
-      </div>
+      </div> -->
 
-      <div class="clearfix" style="border-block: 1px solid rgba(230, 230, 230, 1);">
+      <div
+        class="clearfix"
+        style="border-bottom: 1px solid rgba(230, 230, 230, 1);"
+      >
         <div class="inform-title">车辆管理</div>
       </div>
       <!-- 主体内容区域 -->
@@ -56,7 +63,12 @@
             <!-- 车辆类型筛选 -->
             <div class="state">
               <span>车辆类型:</span>
-              <el-select v-model="state" placeholder="请选择车辆类型" clearable @change="getTypeData">
+              <el-select
+                v-model="state"
+                placeholder="请选择车辆类型"
+                clearable
+                @change="getTypeData"
+              >
                 <el-option
                   v-for="item in options"
                   :key="item.value"
@@ -86,7 +98,10 @@
                   class="demo-ruleForm"
                 >
                   <el-form-item label="车牌号" prop="carNum">
-                    <el-input v-model="ruleForm.carNum" autocomplete="off"></el-input>
+                    <el-input
+                      v-model="ruleForm.carNum"
+                      autocomplete="off"
+                    ></el-input>
                     <!-- <CarNumber></CarNumber> -->
                   </el-form-item>
                   <el-form-item label="类型" prop="carType">
@@ -96,11 +111,18 @@
                     <el-input v-model="ruleForm.name"></el-input>
                   </el-form-item>
                   <el-form-item label="联系方式" prop="phone">
-                    <el-input v-model.number="ruleForm.phone" autocomplete="off"></el-input>
+                    <el-input
+                      v-model.number="ruleForm.phone"
+                      autocomplete="off"
+                    ></el-input>
                   </el-form-item>
                   <el-form-item>
-                    <el-button @click="resetForm('ruleForm')" plain>取消</el-button>
-                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
+                    <el-button @click="resetForm('ruleForm')" plain
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="submitForm('ruleForm')"
+                      >确认</el-button
+                    >
                   </el-form-item>
                 </el-form>
               </div>
@@ -121,15 +143,41 @@
             :cell-style="rowbg"
             :header-cell-style="{
               color: ' rgba(0, 0, 0, 1)',
-              background: 'rgba(230, 236, 254, 1)',
+              background: 'rgba(230, 236, 254, 1)'
             }"
           >
-            <el-table-column width="120" label="序号" type="index" align="center"></el-table-column>
-            <el-table-column prop="car_number" align="center" label="车牌号"></el-table-column>
-            <el-table-column prop="c_type" align="center" label="车辆类型"></el-table-column>
-            <el-table-column prop="create_time" align="center" label="创建时间"></el-table-column>
-            <el-table-column prop="user_name" align="center" label="车主姓名"></el-table-column>
-            <el-table-column prop="user_phone" align="center" label="联系方式"></el-table-column>
+            <el-table-column
+              width="120"
+              label="序号"
+              type="index"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="car_number"
+              align="center"
+              label="车牌号"
+            ></el-table-column>
+            <el-table-column
+              prop="c_type"
+              align="center"
+              label="车辆类型"
+            ></el-table-column>
+            <el-table-column
+              prop="create_time"
+              width="200"
+              align="center"
+              label="创建时间"
+            ></el-table-column>
+            <el-table-column
+              prop="user_name"
+              align="center"
+              label="车主姓名"
+            ></el-table-column>
+            <el-table-column
+              prop="user_phone"
+              align="center"
+              label="联系方式"
+            ></el-table-column>
             <el-table-column align="center" label="操作">
               <template slot-scope="{ row }">
                 <!-- 详情按钮 -->
@@ -137,10 +185,26 @@
                   @click="amendCar(row)"
                   class="operate"
                   style="margin-right: 5px"
-                  v-if="row.c_type == 'VIP'"
-                >修改</span>
+                  v-if="
+                    row.c_type !== '免费车' &&
+                      row.c_type !== '临时车' &&
+                      row.c_type !== '月租车' &&
+                      row.c_type !== '访客车'
+                  "
+                  >修改</span
+                >
                 <!-- 删除按钮 -->
-                <span v-if="row.c_type === 'VIP'" @click="handleDelete(row)" class="operate">删除</span>
+                <span
+                  @click="handleDelete(row)"
+                  class="operate"
+                  v-if="
+                    row.c_type !== '免费车' &&
+                      row.c_type !== '临时车' &&
+                      row.c_type !== '月租车' &&
+                      row.c_type !== '访客车'
+                  "
+                  >删除</span
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -607,15 +671,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.inform {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .inform /deep/ .el-card {
+  height: 95%;
+  width: 97.5%;
+  // width: 1612px;
+  box-shadow: 0px 0px 21px 0px rgba(60, 108, 254, 0.16) !important;
+  border-radius: 8px;
+  // margin: 0 auto;
+
   .el-card__header {
     border-bottom: none;
   }
-  width: 1612px;
-  height: 950px;
-  box-shadow: 0px 0px 21px 0px rgba(60, 108, 254, 0.16) !important;
-
-  border-radius: 8px;
   .clearfix {
     height: 66px;
     box-sizing: border-box;
@@ -1151,7 +1222,7 @@ export default {
     }
     .block {
       height: 36px;
-      margin: 40px 0 0 0;
+      margin: 65px 0 0 0;
       float: right;
       .el-pagination {
         padding: 0;
@@ -1231,4 +1302,4 @@ export default {
     background-color: #296de3;
   }
 }
-</style>
+</style>

src/views/login/index.vue

@@ -83,32 +83,32 @@ export default {
       loginForm: {
         username: "",
         password: "",
-        token: "",
+        token: ""
       },
       // 校验规则
       loginRules: {
         username: [
-          { required: true, trigger: "blur", validator: validateUsername },
+          { required: true, trigger: "blur", validator: validateUsername }
         ],
         password: [
-          { required: true, trigger: "blur", validator: validatePassword },
-        ],
+          { required: true, trigger: "blur", validator: validatePassword }
+        ]
       },
       // 加载中效果
       loading: false,
       // 密码显示隐藏控制
       passwordType: "password",
-      redirect: undefined,
+      redirect: undefined
     };
   },
   watch: {
     // 监听路由地址变化
     $route: {
-      handler: function (route) {
+      handler: function(route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   methods: {
     // 密码显示隐藏控制函数
@@ -126,7 +126,7 @@ export default {
     // 登录函数
     handleLogin() {
       // 校验用户名密码是否符合验证规则
-      this.$refs.loginForm.validate((valid) => {
+      this.$refs.loginForm.validate(valid => {
         // 符合验证规则
         if (valid) {
           this.loading = true;
@@ -144,9 +144,9 @@ export default {
             .then(() => {
               this.$message({
                 message: "登录成功",
-                type: "success",
+                type: "success"
               });
-              this.$router.push({ path: this.redirect || "/car" });
+              this.$router.push({ path: this.redirect || "/carcome" });
               this.loading = false;
             })
             .catch(() => {
@@ -195,8 +195,8 @@ export default {
 
       // 转为字符串返回
       return passArrItem.join("");
-    },
-  },
+    }
+  }
 };
 </script>
 

src/views/role/index.vue

@@ -27,7 +27,12 @@
             <!-- 用户类型筛选 -->
             <div class="state">
               <span>角色名称:</span>
-              <el-select v-model="state" placeholder="请选择状态" clearable @change="getData(1)">
+              <el-select
+                v-model="state"
+                placeholder="请选择状态"
+                clearable
+                @change="getData(1)"
+              >
                 <el-option
                   v-for="item in roleType"
                   :key="item.value"
@@ -45,6 +50,7 @@
               :visible.sync="dialogVisible"
               width="30%"
               :before-close="closeDialog"
+              center
             >
               <div>
                 <el-form
@@ -56,7 +62,10 @@
                   class="demo-ruleForm"
                 >
                   <el-form-item label="姓名" prop="admin_name">
-                    <el-input v-model="ruleForm.admin_name" autocomplete="off"></el-input>
+                    <el-input
+                      v-model="ruleForm.admin_name"
+                      autocomplete="off"
+                    ></el-input>
                   </el-form-item>
                   <el-form-item label="账号" prop="admin_account">
                     <el-input
@@ -64,13 +73,22 @@
                       v-if="addTitle === '新增账号'"
                       autocomplete="off"
                     ></el-input>
-                    <el-input :value="ruleForm.admin_account" v-else autocomplete="off" disabled></el-input>
+                    <el-input
+                      :value="ruleForm.admin_account"
+                      v-else
+                      autocomplete="off"
+                      disabled
+                    ></el-input>
                   </el-form-item>
                   <el-form-item label="密码" prop="admin_password">
                     <el-input v-model="ruleForm.admin_password"></el-input>
                   </el-form-item>
                   <el-form-item label="角色" prop="level">
-                    <el-select v-model="ruleForm.level" placeholder="请选择状态" @change="getData(1)">
+                    <el-select
+                      v-model="ruleForm.level"
+                      placeholder="请选择状态"
+                      @change="getData(1)"
+                    >
                       <el-option
                         v-for="item in roleType"
                         :key="item.value"
@@ -80,8 +98,12 @@
                     </el-select>
                   </el-form-item>
                   <el-form-item>
-                    <el-button @click="resetForm('ruleForm')" plain>取消</el-button>
-                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
+                    <el-button @click="resetForm('ruleForm')" plain
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="submitForm('ruleForm')"
+                      >确认</el-button
+                    >
                   </el-form-item>
                 </el-form>
               </div>
@@ -95,25 +117,52 @@
           <el-table
             :data="tableData"
             @selection-change="handleSelectionChange"
-            max-height="600"
-            style="width: 1550px; height: 600px"
+            max-height="550"
+            style="width: 1550px; height: 550px"
             stripe
             class="Devicetable"
             :cell-style="rowbg"
             :header-cell-style="{
               color: ' rgba(0, 0, 0, 1)',
-              background: 'rgba(230, 236, 254, 1)',
+              background: 'rgba(230, 236, 254, 1)'
             }"
           >
-            <el-table-column width="120" label="序号" type="index" align="center"></el-table-column>
-            <el-table-column prop="admin_name" align="center" label="姓名"></el-table-column>
-            <el-table-column prop="admin_account" align="center" label="用户名"></el-table-column>
-            <el-table-column prop="levelName" align="center" label="角色"></el-table-column>
-            <el-table-column prop="create_time" align="center" label="创建时间"></el-table-column>
+            <el-table-column
+              width="120"
+              label="序号"
+              type="index"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="admin_name"
+              align="center"
+              label="姓名"
+            ></el-table-column>
+            <el-table-column
+              prop="admin_account"
+              align="center"
+              label="用户名"
+            ></el-table-column>
+            <el-table-column
+              prop="levelName"
+              align="center"
+              label="角色"
+            ></el-table-column>
+            <el-table-column
+              prop="create_time"
+              align="center"
+              label="创建时间"
+              width="200"
+            ></el-table-column>
             <el-table-column align="center" label="操作">
               <template slot-scope="{ row }">
                 <!-- 详情按钮 -->
-                <span @click="amendCar(row)" class="operate" style="margin-right: 5px">修改</span>
+                <span
+                  @click="amendCar(row)"
+                  class="operate"
+                  style="margin-right: 5px"
+                  >修改</span
+                >
                 <!-- 删除按钮 -->
                 <span @click="handleDelete(row)" class="operate">删除</span>
               </template>
@@ -183,9 +232,9 @@ export default {
           { required: true, message: "姓名不能为空", trigger: "blur" }
         ],
         admin_account: [
-          { required: true, message: "请输入车牌号", trigger: "blur" }
+          { required: true, message: "车牌号不能为空", trigger: "blur" }
         ],
-        level: [{ required: true, trigger: "blur" }],
+        level: [{ required: true, trigger: "blur", message: "角色不能为空" }],
         admin_password: [
           { required: true, message: "密码不能为空", trigger: "blur" }
         ]
@@ -461,17 +510,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.inform {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .inform /deep/ .el-card {
+  height: 95%;
+  width: 97.5%;
+  box-shadow: 0px 0px 21px 0px rgba(60, 108, 254, 0.16) !important;
+  border-radius: 8px;
   .el-card__header {
     border-bottom: none;
   }
-  width: 1612px;
-  height: 950px;
-  box-shadow: 0px 0px 21px 0px rgba(60, 108, 254, 0.16) !important;
-
-  border-radius: 8px;
   .clearfix {
-    height: 96px;
+    height: 66px;
     box-sizing: border-box;
     display: flex;
     margin: 0 36px;
@@ -542,7 +596,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 33px 0 34px 0;
+      padding: 15px 0 15px 0;
       font-size: 16px;
       font-weight: 400;
       color: #000;
@@ -590,7 +644,7 @@ export default {
             background: #ffffff;
             box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
             border-radius: 10px;
-            margin-top: 319px !important;
+            margin-top: 230px !important;
             .el-dialog__header {
               height: 60px;
               padding: 0;
@@ -859,7 +913,7 @@ export default {
           }
         }
         tr {
-          height: 60px;
+          height: 55px;
           td {
             .cell {
               .el-checkbox.is-checked {
@@ -1068,4 +1122,4 @@ export default {
     background-color: #296de3;
   }
 }
-</style>
+</style>