调整全部页面的样式

src/layout/components/Navbar.vue

@@ -10,10 +10,7 @@
         </div>
       </el-badge>
       <div class="photo">
-        <el-avatar
-          icon="el-icon-user-solid"
-          style="width: 53px; height: 53px; margin: 0; line-height: 53px"
-        >
+        <el-avatar icon="el-icon-user-solid" style="width: 53px; height: 53px; margin: 0; line-height: 53px">
         </el-avatar>
       </div>
       <div class="name">{{ $store.state.user.userName }}</div>
@@ -53,7 +50,7 @@ export default {
     informs() {
       this.$router
         .replace({ name: "Inform" })
-        .then((res) => {})
+        .then((res) => { })
         .catch((err) => {
           console.log();
         });
@@ -69,7 +66,7 @@ export default {
             this.$router.replace({ path: "/login" });
           });
         })
-        .catch((_) => {});
+        .catch((_) => { });
     },
   },
 };
@@ -77,13 +74,15 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 96px;
-  overflow: hidden;
+  width: calc(100vw - 260px);
+  // overflow: hidden;
   background: rgba(255, 255, 255, 1);
   display: flex;
   align-items: center;
   justify-content: space-between;
 
+
+
   .nav-title {
     display: inline-block;
     width: 324px;
@@ -99,6 +98,10 @@ export default {
     display: flex;
     align-items: center;
 
+    .item {
+      cursor: pointer;
+    }
+
     .time {
       width: 241px;
       height: 27px;
@@ -141,4 +144,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>
@@ -54,22 +54,29 @@ export default {
 <style scoped lang="scss">
 .box {
   width: 100%;
-  height: 100%;
+  height: 100vh;
+
+  .el-container {
+    height: calc(100vh);
+  }
 
   .el-header {
     color: #333;
     text-align: center;
-    width: 1660px;
     height: 96px !important;
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 3px 10px rgba(41, 109, 227, 0.1);
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
   .el-aside {
     background-color: #d3dce6;
     color: #333;
     text-align: center;
-    height: 100%;
+    height: 100vh;
     width: 260px !important;
     background: rgba(41, 109, 227, 1);
   }
@@ -77,7 +84,8 @@ export default {
   .el-main {
     background: #fff;
     padding: 0;
-    margin: 14px 0 0 25px;
+    // margin: 14px 0 0 25px;
+    height: 100vh;
   }
 }
-</style>
+</style>

src/views/account/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="inform">
-    <el-card class="box-card" style="width: 1612px; height: 950px">
+    <el-card class="box-card">
       <!-- 标题区域 -->
       <div slot="header" class="clearfix">
         <div class="inform-title">账号管理</div>
@@ -12,36 +12,24 @@
         <div class="state">
           <div class="left">
             <el-col :span="18">
-              <el-input
-                v-model="searchValue"
-                placeholder="请输入账号或手机号"
-                prefix-icon="el-icon-search"
-                clearable
-                @clear="getData(1)"
-              ></el-input>
+              <el-input v-model="searchValue" placeholder="请输入账号或手机号" prefix-icon="el-icon-search" clearable
+                @clear="getData(1)"></el-input>
             </el-col>
             <el-col :span="6">
               <el-button type="primary" @click="getData(1)">查询</el-button>
             </el-col>
           </div>
           <div class="right">
-            <el-button type="primary" @click="handleAdd" v-if="$store.state.user.userType==1">添加账号</el-button>
+            <el-button type="primary" @click="handleAdd" v-if="$store.state.user.userType == 1">添加账号</el-button>
           </div>
         </div>
         <!-- 表格区域 -->
         <div class="inform-table">
-          <el-table
-            :data="tableData"
-            max-height="576"
-            height="576"
-            style="width: 1550px"
-            stripe
-            :cell-style="rowbg"
+          <el-table :data="tableData" max-height="495" height="495" style="width: 1550px" stripe :cell-style="rowbg"
             :header-cell-style="{
               color: ' rgba(0, 0, 0, 1)',
               background: 'rgba(240, 243, 247, 1)',
-            }"
-          >
+            }">
             <el-table-column prop="username" align="center" label="员工姓名(账号)"></el-table-column>
 
             <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
@@ -65,33 +53,16 @@
         </div>
         <!-- 分页器区域 -->
         <div class="block">
-          <el-pagination
-            background
-            layout="prev, pager, next, jumper"
-            :current-page.sync="currentPage"
-            :page-size="pageSize"
-            :total="total"
-            @current-change="handleCurrentChange"
-          ></el-pagination>
+          <el-pagination background layout="prev, pager, next, jumper" :current-page.sync="currentPage"
+            :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
         </div>
       </div>
 
       <!-- 添加编辑账号弹窗区域 -->
-      <el-dialog
-        :title="popTitle"
-        width="30%"
-        :visible.sync="dialogVisible"
-        :close-on-click-modal="false"
-      >
+      <el-dialog :title="popTitle" width="30%" :visible.sync="dialogVisible" :close-on-click-modal="false">
         <hr class="pop_title" />
 
-        <el-form
-          :model="ruleForm"
-          :rules="rules"
-          ref="ruleForm"
-          label-position="top"
-          class="demo-ruleForm"
-        >
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" class="demo-ruleForm">
           <el-row :gutter="85">
             <el-col :span="12">
               <el-form-item label="员工姓名" prop="username">
@@ -108,12 +79,8 @@
           <el-row :gutter="85">
             <el-col :span="12">
               <el-form-item label="角色" prop="adminType">
-                <el-select
-                  v-model="ruleForm.adminType"
-                  @change="adminTypeSelect"
-                  placeholder="请选择角色"
-                >
-                  <el-option label="超级管理员" value="1" v-if="$store.state.user.userType==1"></el-option>
+                <el-select v-model="ruleForm.adminType" @change="adminTypeSelect" placeholder="请选择角色">
+                  <el-option label="超级管理员" value="1" v-if="$store.state.user.userType == 1"></el-option>
                   <el-option label="管理员" value="2"></el-option>
                 </el-select>
               </el-form-item>
@@ -448,19 +415,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.inform {
+  width: calc(100vw - 260px);
+  height: calc(100vh - 96px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .inform /deep/ .el-card {
-  width: 1612px;
-  height: 950px;
+  width: 98%;
+  height: 96%;
   box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
   border-radius: 8px;
+
   .clearfix {
-    height: 96px;
+    height: 70px;
     width: 100%;
     border-bottom: 1px solid rgba(204, 204, 204, 1);
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .inform-title {
       width: 96px;
       height: 36px;
@@ -470,52 +447,64 @@ export default {
       margin-left: 33px;
     }
   }
+
   .inform-body {
     .state {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 33px 29px 34px 33px;
+
       .left {
         display: flex;
         align-items: center;
+
         .el-button {
           margin-left: 10px;
           background-color: rgba(41, 109, 227, 1);
         }
       }
+
       .right {
         .el-button {
           background-color: rgba(41, 109, 227, 1);
         }
       }
     }
+
     .inform-table {
       .el-table {
         font-weight: 400;
         font-size: 16px;
         color: rgba(0, 0, 0, 1);
         margin: 0 auto;
+
         .el-table__header-wrapper {
           border-radius: 5px;
         }
+
         tr {
-          height: 64px;
+          height: 55px;
+
           td {
             border: none;
           }
         }
+
         th {
           font-weight: 400;
         }
       }
     }
+
     .block {
       height: 36px;
-      margin: 66px 29px 0 0;
+      margin: 40px 29px 0 0;
       float: right;
+
       .el-pagination {
         padding: 0;
+
         button {
           width: 36px;
           background: #fff;
@@ -525,6 +514,7 @@ export default {
           border: 1px solid rgba(112, 112, 112, 1);
           border-radius: 8px;
         }
+
         ul {
           .active {
             background: #fff;
@@ -532,9 +522,11 @@ export default {
             border: 1px solid rgba(0, 97, 255, 1);
             box-sizing: border-box;
           }
+
           .el-icon {
             border: none;
           }
+
           li {
             background: #fff;
             color: rgba(0, 0, 0, 1);
@@ -546,16 +538,19 @@ export default {
             line-height: 36px;
           }
         }
+
         .el-pagination__jump {
           color: rgba(0, 0, 0, 1);
           font-size: 16px;
           margin-left: 10px;
           font-weight: 400;
           height: 36px;
+
           .el-input {
             width: 65px;
             height: 36px;
             margin: 0 10px;
+
             input {
               width: 65px;
               height: 36px;
@@ -567,25 +562,31 @@ export default {
       }
     }
   }
+
   .pop_title {
     color: #ccccccff;
   }
+
   .el-form {
     padding: 0 30px;
   }
 }
+
 .box-card {
   /deep/ .el-card__header {
     padding: 0;
   }
+
   /deep/ .el-card__body {
     padding: 0;
   }
+
   /deep/ .el-dialog__header {
     font-weight: bold;
   }
+
   /deep/ .el-dialog__body {
     padding: 0;
   }
 }
-</style>
+</style>

src/views/fingerprint/index.vue

@@ -69,8 +69,10 @@
             >
               <div class="elbody">
                 <span class="ic">{{ addTitle }}</span>
-                <el-button @click="closefingerprint">关 闭</el-button>
-                <el-button @click="addfingerprint" type="primary"
+                <el-button @click="closefingerprint('ruleForm')"
+                  >关 闭</el-button
+                >
+                <el-button @click="addfingerprint('ruleForm')" type="primary"
                   >保 存</el-button
                 >
               </div>
@@ -78,10 +80,15 @@
                 <div style="margin-left: 100px">
                   <el-divider content-position="left">基本信息</el-divider>
                 </div>
-                <el-form :model="icCardInfo" label-position="top">
+                <el-form
+                  :model="icCardInfo"
+                  label-position="top"
+                  :rules="rules"
+                  ref="ruleForm"
+                >
                   <div class="left">
-                    <el-form-item label="姓名">
-                      <el-input v-model="icCardInfo.name"></el-input>
+                    <el-form-item label="姓名" prop="name">
+                      <el-input v-model="icCardInfo.name" id="name"></el-input>
                       <span
                         style="
                           position: absolute;
@@ -131,19 +138,16 @@
                           </ul>
                         </div>
                         <span slot="footer" class="dialog-footer">
-                          <el-button @click="selectStaffShow = false"
-                            >取 消</el-button
-                          >
-                          <el-button
-                            type="primary"
-                            @click="selectStaffShow = false"
+                          <el-button @click="cancelCheck">取 消</el-button>
+                          <el-button type="primary" @click="nameTrue"
                             >确 定</el-button
                           >
                         </span>
                       </el-dialog>
                     </el-form-item>
-                    <el-form-item label="用户类型">
+                    <el-form-item label="用户类型" prop="userType">
                       <el-select
+                        id="userType"
                         v-model="icCardInfo.userType"
                         placeholder="用户"
                       >
@@ -151,20 +155,24 @@
                         <el-option label="管理员" value="1"></el-option>
                       </el-select>
                     </el-form-item>
-                    <el-form-item label="生效时间(默认今天)">
+                    <el-form-item label="生效时间(默认今天)" required>
                       <el-date-picker
+                        prop="startTime"
                         v-model="startTime"
                         type="datetime"
                         placeholder="选择日期时间"
                         default-time="12:00:00"
                         value-format="yyyy-MM-dd HH:mm:ss"
+                        :clearable="false"
+                        :editable="false"
                       >
                       </el-date-picker>
                     </el-form-item>
                   </div>
                   <div class="right">
-                    <el-form-item label="指纹">
+                    <el-form-item label="指纹" prop="cardId">
                       <el-input
+                        id="cardId"
                         type="textarea"
                         :autosize="{ minRows: 6, maxRows: 6 }"
                         placeholder="请输入内容"
@@ -215,14 +223,17 @@
                         </div>
                       </el-dialog>
                     </el-form-item>
-                    <el-form-item label="失效时间">
+                    <el-form-item label="失效时间" required>
                       <el-date-picker
+                        prop="endTime"
                         v-model="endTime"
                         type="datetime"
                         placeholder="选择日期时间"
                         value-format="yyyy-MM-dd HH:mm:ss"
                         default-time="12:00:00"
                         @change="endT"
+                        :clearable="false"
+                        :editable="false"
                       >
                       </el-date-picker>
                     </el-form-item>
@@ -385,8 +396,42 @@ export default {
       roomNo: "", // 房间号
 
       // 员工弹窗属性
+      websocket: "",
       addTitle: "新增指纹",
       selectStaffShow: false,
+      rules: {
+        startTime: [
+          { required: true, message: "请选择生效时间", trigger: "change" }
+        ],
+        endTime: [
+          {
+            required: true,
+            message: "请选择失效时间",
+            trigger: "change"
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入姓名",
+            trigger: "change"
+          }
+        ],
+        cardId: [
+          {
+            required: true,
+            message: "请录入指纹",
+            trigger: "change"
+          }
+        ],
+        userType: [
+          {
+            required: true,
+            message: "请选择用户类型",
+            trigger: "change"
+          }
+        ]
+      },
       defaultProps: {
         children: "children",
         label: "label"
@@ -515,6 +560,7 @@ export default {
     addCard() {
       this.addDialogShow = true;
       this.selectTime = true;
+      this.$refs["ruleForm"].resetFields();
       this.addTitle = "新增指纹";
       this.icCardInfo = {
         userType: "",
@@ -529,53 +575,76 @@ export default {
         .format("YYYY-MM-DD HH:mm:ss");
     },
     // 确定新增指纹
-    async addfingerprint() {
+    async addfingerprint(formName) {
       if (this.addTitle == "新增指纹") {
-        let data = {
-          fingerprintNumber: this.icCardInfo.cardId, //指纹编码
-          roomNo: this.roomNo, //房间号
-          holderName: this.icCardInfo.name, // 持有人
-          userType: this.icCardInfo.userType, // 用户类型
-          takeTime: this.startTime, // 生效时间
-          failureTime: this.endTime, // 失效时间
-          createTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), // 创建时间
-          statu: 1 // 状态 失效：0  生效：1
-        };
-        let res = await this.API.fingerprint.add(data);
-        if (res.code == 1) {
-          this.$message.success("新增成功");
-          this.getData();
-          this.addDialogShow = false;
-        } else {
-          this.$message.error("新增失败");
-        }
+        this.$refs[formName].validate(async valid => {
+          if (valid) {
+            let data = {
+              fingerprintNumber: this.icCardInfo.cardId, //指纹编码
+              roomNo: this.roomNo, //房间号
+              holderName: this.icCardInfo.name, // 持有人
+              userType: this.icCardInfo.userType, // 用户类型
+              takeTime: this.startTime, // 生效时间
+              failureTime: this.endTime, // 失效时间
+              createTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), // 创建时间
+              statu: 1 // 状态 失效：0  生效：1
+            };
+            let res = await this.API.fingerprint.add(data);
+            if (res.code == 1) {
+              this.$message.success("新增成功");
+              this.getData();
+              this.addDialogShow = false;
+            } else {
+              this.$message.error("新增失败");
+            }
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
         // console.log(res, "确定添加指纹");
       } else if (this.addTitle == "编辑指纹") {
-        let data = {
-          id: this.icCardInfo.id, //数据id
-          fingerprintNumber: this.icCardInfo.cardId, //指纹编码
-          roomNo: this.roomNo, //房间号
-          holderName: this.icCardInfo.name, // 持有人
-          userType: this.icCardInfo.userType, // 用户类型
-          takeTime: this.startTime, // 生效时间
-          failureTime: this.endTime, // 失效时间
-          createTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), // 创建时间
-          statu: 1 // 状态 失效：0  生效：1
-        };
-        let res = await this.API.fingerprint.update(data);
-        if (res.code == 1) {
-          this.$message.success("修改成功");
-          this.getData();
-          this.addDialogShow = false;
-        } else {
-          this.$message.error("修改失败");
-        }
+        this.$refs[formName].validate(async valid => {
+          if (valid) {
+            let data = {
+              id: this.icCardInfo.id, //数据id
+              fingerprintNumber: this.icCardInfo.cardId, //指纹编码
+              roomNo: this.roomNo, //房间号
+              holderName: this.icCardInfo.name, // 持有人
+              userType: this.icCardInfo.userType, // 用户类型
+              takeTime: this.startTime, // 生效时间
+              failureTime: this.endTime, // 失效时间
+              createTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), // 创建时间
+              statu: 1 // 状态 失效：0  生效：1
+            };
+            let res = await this.API.fingerprint.update(data);
+            if (res.code == 1) {
+              this.$message.success("修改成功");
+              this.getData();
+              this.addDialogShow = false;
+            } else {
+              this.$message.error("修改失败");
+            }
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
       }
 
       // this.addDialogShow = false;
     },
     // 关闭新增指纹
-    closefingerprint() {
+    closefingerprint(formName) {
+      this.$refs[formName].resetFields();
+      if (this.$refs.roomTree) {
+        this.$refs.roomTree.setCheckedNodes([]);
+        this.count = [];
+        // console.log(this.count);
+        this.$refs.roomTree.setCheckedNodes(this.count);
+        this.title = "";
+      }
+
       this.addDialogShow = false;
     },
     endT() {
@@ -630,16 +699,16 @@ export default {
       let _this = this;
       var wsUrl = "ws://localhost:8181/";
       let websocket = new WebSocket(wsUrl);
+      this.websocket = websocket;
       websocket.onopen = function(evt) {
         var params = { type: 101, data: null };
         websocket.send(JSON.stringify(params));
       };
-
       websocket.onmessage = function(evt) {
-        // console.log(evt.data, "输出数据");
+        console.log(evt.data, "输出数据");
         let data = JSON.parse(evt.data);
         if (data.type == 0) {
-          // console.log(JSON.parse(evt.data).data.portNames); // 获取到 USB接口
+          console.log(JSON.parse(evt.data).data.portNames[1]); // 获取到 USB接口
           let params1 = {
             type: 1,
             data: {
@@ -702,7 +771,7 @@ export default {
         console.log("关闭连接");
       };
       websocket.onerror = function(evt) {
-        console.log("错误提示");
+        // console.log("错误提示");
       };
     },
 
@@ -711,6 +780,7 @@ export default {
       var wsUrl = "ws://localhost:8181/";
       const websocket = new WebSocket(wsUrl);
       this.fingerprintShow = false;
+      this.websocket.close();
     },
     //员工弹窗
     Editstaff() {
@@ -730,14 +800,36 @@ export default {
       this.title = this.count[0].label;
       this.icCardInfo.name = this.count[0].label;
     },
+    checkStaff(data, nodes) {
+      // console.log(data, nodes);
+      // console.log(this.data, this.icCardInfo.name, "前面");
+
+      this.$refs.roomTree.setCheckedNodes([]);
+      this.count = [
+        {
+          id: data.id,
+          label: data.label
+        }
+      ];
+      // console.log(this.count);
+      this.$refs.roomTree.setCheckedNodes(this.count);
+      this.title = this.count[0].label;
+      this.icCardInfo.name = this.count[0].label;
+    },
+
     cancelCheck() {
-      //   if (this.data[0].children.length == this.count.length) {
-      //     this.checked = true;
-      //   } else {
-      //     this.checked = false;
-      //   }
-      //   this.$refs.roomTree.setCheckedNodes(this.count);
-      //   console.log(this.count);
+      this.$refs.roomTree.setCheckedNodes([]);
+      this.count = [];
+      // console.log(this.count);
+      this.$refs.roomTree.setCheckedNodes(this.count);
+      this.title = "";
+      // this.icCardInfo.name = "";
+      this.selectStaffShow = false;
+    },
+    nameTrue() {
+      // this.icCardInfo = { ...this.icCardInfo };
+      this.icCardInfo.name = this.title;
+      this.selectStaffShow = false;
     },
 
     // 导出订单按钮回调

src/views/icCard/index.vue

@@ -81,28 +81,38 @@
               :visible.sync="addDialogShow"
               :append-to-body="true"
               custom-class="addDialog"
+              :close-on-click-modal="false"
             >
               <div class="elbody">
                 <span class="ic">IC卡录入</span>
-                <el-button @click="addDialogShow = false">关 闭</el-button>
-                <el-button @click="save" type="primary">保 存</el-button>
+                <el-button @click="close('ruleForm')">关 闭</el-button>
+                <el-button @click="save('ruleForm')" type="primary"
+                  >保 存</el-button
+                >
               </div>
               <div slot="footer" class="dialog-footer">
                 <div style="margin-left: 100px">
                   <el-divider content-position="left">基本信息</el-divider>
                 </div>
-                <el-form :model="icCardInfo" label-position="top">
+                <el-form
+                  :model="icCardInfo"
+                  label-position="top"
+                  :rules="rules"
+                  ref="ruleForm"
+                >
                   <div class="left">
-                    <el-form-item label="卡类型">
+                    <el-form-item label="卡类型" prop="cardType">
                       <el-select
+                        id="cardType"
                         v-model="icCardInfo.cardType"
                         placeholder="请选择卡类型"
                       >
                         <el-option label="IC卡" value="IC卡"></el-option>
                       </el-select>
                     </el-form-item>
-                    <el-form-item label="状态">
+                    <el-form-item label="状态" prop="statu">
                       <el-select
+                        id="statu"
                         v-model="icCardInfo.statu"
                         placeholder="请选择状态"
                       >
@@ -110,22 +120,31 @@
                         <el-option label="失效" value="0"></el-option>
                       </el-select>
                     </el-form-item>
-                    <el-form-item label="房间编号(锁设备UID)">
-                      <el-input :value="icCardInfo.roomNo"></el-input>
+                    <el-form-item label="房间编号(锁设备UID)" prop="roomNo">
+                      <el-input
+                        :value="icCardInfo.roomNo"
+                        id="roomNo"
+                      ></el-input>
                     </el-form-item>
-                    <el-form-item label="生效时间(默认今天)">
+                    <el-form-item label="生效时间(默认今天)" required>
                       <el-date-picker
+                        prop="startTime"
                         v-model="startTime"
                         type="datetime"
                         placeholder="选择日期时间"
                         default-time="12:00:00"
                         value-format="yyyy-MM-dd HH:mm:ss"
+                        :clearable="false"
+                        :editable="false"
                       ></el-date-picker>
                     </el-form-item>
                   </div>
                   <div class="right">
-                    <el-form-item label="卡号">
-                      <el-input v-model="icCardInfo.cardNumber"></el-input>
+                    <el-form-item label="卡号" prop="cardNumber">
+                      <el-input
+                        id="cardNumber"
+                        v-model="icCardInfo.cardNumber"
+                      ></el-input>
                       <span
                         style="
                           position: absolute;
@@ -151,8 +170,8 @@
                       </el-dialog>
                     </el-form-item>
 
-                    <el-form-item label="姓名">
-                      <el-input v-model="icCardInfo.name"></el-input>
+                    <el-form-item label="姓名" prop="name">
+                      <el-input id="name" v-model="icCardInfo.name"></el-input>
                       <span
                         style="
                           position: absolute;
@@ -164,17 +183,18 @@
                         >员工</span
                       >
                       <el-dialog
-                        title="添加员工"
+                        title="选择员工"
                         :visible.sync="selectStaffShow"
                         width="692px"
                         append-to-body
                         custom-class="dialongAllRoom"
+                        :close-on-click-modal="false"
                         center
                       >
                         <div class="tree">
                           <div class="tree-left">
                             <span style="margin-left: 15px">列表</span>
-                            <span style="margin-left: 228px">1/1</span>
+                            <!-- <span style="margin-left: 228px">1/1</span> -->
                           </div>
                           <el-tree
                             :data="data"
@@ -198,19 +218,16 @@
                           </ul>
                         </div>
                         <span slot="footer" class="dialog-footer">
-                          <el-button @click="selectStaffShow = false"
-                            >取 消</el-button
-                          >
-                          <el-button
-                            type="primary"
-                            @click="selectStaffShow = false"
+                          <el-button @click="cancelCheck">取 消</el-button>
+                          <el-button type="primary" @click="nameTrue"
                             >确 定</el-button
                           >
                         </span>
                       </el-dialog>
                     </el-form-item>
-                    <el-form-item label="用户类型">
+                    <el-form-item label="用户类型" prop="userType">
                       <el-select
+                        id="userType"
                         v-model="icCardInfo.userType"
                         placeholder="用户"
                       >
@@ -218,14 +235,18 @@
                         <el-option label="管理员" value="1"></el-option>
                       </el-select>
                     </el-form-item>
-                    <el-form-item label="失效时间">
+                    <el-form-item label="失效时间" required>
                       <el-date-picker
+                        prop="endTime"
                         v-model="endTime"
                         type="datetime"
                         placeholder="选择日期时间"
                         value-format="yyyy-MM-dd HH:mm:ss"
                         default-time="12:00:00"
                         @change="endT"
+                        validate-event
+                        :clearable="false"
+                        :editable="false"
                       ></el-date-picker>
                     </el-form-item>
                     <el-radio-group
@@ -414,7 +435,52 @@ export default {
 
       icCardShow: false, // 读取卡号页面弹窗
       icTitle: "请放置卡片", // 卡片读取状态
-
+      rules: {
+        cardType: [
+          { required: true, message: "请选择卡类型", trigger: "blur" }
+        ],
+        statu: [{ required: true, message: "请选择状态", trigger: "blur" }],
+        roomNo: [
+          { required: true, message: "请输入房间编号", trigger: "blur" }
+          // {
+          //   min: 6,
+          //   // max: 12,
+          //   message: "长度应大于等于 6 字符",
+          //   trigger: "blur"
+          // }
+        ],
+        startTime: [
+          { required: true, message: "请选择生效时间", trigger: "change" }
+        ],
+        endTime: [
+          {
+            required: true,
+            message: "请选择失效时间",
+            trigger: "change"
+          }
+        ],
+        cardNumber: [
+          {
+            required: true,
+            message: "请输入卡号",
+            trigger: "blur"
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入姓名",
+            trigger: "change"
+          }
+        ],
+        userType: [
+          {
+            required: true,
+            message: "请选择用户类型",
+            trigger: "change"
+          }
+        ]
+      },
       // 筛选查询卡号绑定数据
       queryValue: "",
       // 筛选用户状态绑定数据
@@ -523,6 +589,7 @@ export default {
         this.startTime = row.takeTime;
         this.endTime = row.failureTime;
       } else if (event.target.innerText == "新增") {
+        this.$refs["ruleForm"].resetFields();
         // console.log("新增");
         this.nameValue = "新增";
         this.selectTime = true;
@@ -544,53 +611,79 @@ export default {
       }
     },
     // 保存按钮
-    async save() {
+    save(formName) {
       if (this.nameValue == "编辑") {
         // console.log("编辑");
-        let params = {
-          id: this.icCardInfo.id,
-          cardNumber: this.icCardInfo.cardNumber,
-          roomNo: this.icCardInfo.roomNo,
+        this.$refs[formName].validate(async valid => {
+          if (valid) {
+            let params = {
+              id: this.icCardInfo.id,
+              cardNumber: this.icCardInfo.cardNumber,
+              roomNo: this.icCardInfo.roomNo,
 
-          holderName: this.icCardInfo.name,
-          userType: this.icCardInfo.userType,
-          takeTime: this.startTime,
-          failureTime: this.endTime,
-          createTime: this.startTime,
-          statu: this.icCardInfo.statu
-        };
-        // console.log(params);
-        let res = await this.API.icCard.update(params);
-        if (res.success) {
-          // console.log(res);
-          this.$message.success(res.message);
-          this.addDialogShow = false;
-          this.getData();
-        } else {
-          this.$message.error(res.message);
-        }
+              holderName: this.icCardInfo.name,
+              userType: this.icCardInfo.userType,
+              takeTime: this.startTime,
+              failureTime: this.endTime,
+              createTime: this.startTime,
+              statu: this.icCardInfo.statu
+            };
+            // console.log(params);
+            let res = await this.API.icCard.update(params);
+            if (res.success) {
+              // console.log(res);
+              this.$message.success(res.message);
+              this.addDialogShow = false;
+              this.getData();
+            } else {
+              this.$message.error(res.message);
+            }
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
       } else if (this.nameValue == "新增") {
         // console.log("新增");
-        let params = {
-          cardNumber: this.icCardInfo.cardNumber,
-          roomNo: this.icCardInfo.roomNo,
-          holderName: this.icCardInfo.name,
-          userType: this.icCardInfo.userType,
-          takeTime: this.startTime,
-          failureTime: this.endTime,
-          createTime: this.startTime,
-          statu: this.icCardInfo.statu
-        };
-        let res = await this.API.icCard.add(params);
-        if (res.success) {
-          // console.log(res);
-          this.$message.success(res.message);
-          this.addDialogShow = false;
-          this.getData();
-        } else {
-          this.$message.error(res.message);
-        }
+        this.$refs[formName].validate(async valid => {
+          if (valid) {
+            let params = {
+              cardNumber: this.icCardInfo.cardNumber,
+              roomNo: this.icCardInfo.roomNo,
+              holderName: this.icCardInfo.name,
+              userType: this.icCardInfo.userType,
+              takeTime: this.startTime,
+              failureTime: this.endTime,
+              createTime: this.startTime,
+              statu: this.icCardInfo.statu
+            };
+            let res = await this.API.icCard.add(params);
+            if (res.success) {
+              // console.log(res);
+              this.$message.success(res.message);
+              this.addDialogShow = false;
+              this.getData();
+            } else {
+              this.$message.error(res.message);
+            }
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
+      }
+    },
+    close(formName) {
+      this.$refs[formName].resetFields();
+      if (this.$refs.roomTree) {
+        this.$refs.roomTree.setCheckedNodes([]);
+        this.count = [];
+        // console.log(this.count);
+        this.$refs.roomTree.setCheckedNodes(this.count);
+        this.title = "";
       }
+
+      this.addDialogShow = false;
     },
     endT() {
       if (
@@ -646,9 +739,9 @@ export default {
 
       websocket.onmessage = function(evt) {
         let data = JSON.parse(evt.data);
-        // console.log(data);
+        console.log(data);
         if (data.type == 150) {
-          _this.icTitle = "未放置卡片,请重新读卡";
+          _this.icTitle = "未放置卡片,请将卡片放置在读卡器上再点击读卡";
         } else if (data.type == 141) {
           _this.icTitle = "获取卡号失败";
         } else if (data.type == 140) {
@@ -670,6 +763,8 @@ export default {
     },
     checkStaff(data, nodes) {
       // console.log(data, nodes);
+      // console.log(this.data, this.icCardInfo.name, "前面");
+
       this.$refs.roomTree.setCheckedNodes([]);
       this.count = [
         {
@@ -682,17 +777,21 @@ export default {
       this.title = this.count[0].label;
       this.icCardInfo.name = this.count[0].label;
     },
+
     cancelCheck() {
-      // console.log(222);
-      //   if (this.data[0].children.length == this.count.length) {
-      //     this.checked = true;
-      //   } else {
-      //     this.checked = false;
-      //   }
-      //   this.$refs.roomTree.setCheckedNodes(this.count);
-      //   console.log(this.count);
+      this.$refs.roomTree.setCheckedNodes([]);
+      this.count = [];
+      // console.log(this.count);
+      this.$refs.roomTree.setCheckedNodes(this.count);
+      this.title = "";
+      // this.icCardInfo.name = "";
+      this.selectStaffShow = false;
+    },
+    nameTrue() {
+      // this.icCardInfo = { ...this.icCardInfo };
+      this.icCardInfo.name = this.title;
+      this.selectStaffShow = false;
     },
-
     // 导出订单按钮回调
     exportExcel() {
       let params = {

src/views/order/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="inform">
-    <el-card class="box-card" style="width: 1612px; height: 950px">
+    <el-card class="box-card">
       <!-- 标题区域 -->
       <div slot="header" class="clearfix">
         <div class="inform-title">订单管理</div>
@@ -10,13 +10,7 @@
         <!-- 筛选条件区域 -->
         <div class="order-top">
           <!-- 订单号筛选 -->
-          <el-input
-            placeholder="请输入订单号或房间号"
-            style="width: 261px"
-            clearable
-            v-model="value"
-            @clear="getData(1)"
-          >
+          <el-input placeholder="请输入订单号或房间号" style="width: 261px" clearable v-model="value" @clear="getData(1)">
             <i slot="prefix" class="el-input__icon el-icon-search"></i>
           </el-input>
           <el-button @click="getData(1)">查询</el-button>
@@ -24,41 +18,22 @@
           <!-- 创建时间筛选 -->
           <div class="paydate">
             <span class="demonstration">创建时间:</span>
-            <el-date-picker
-              v-model="createTime"
-              type="datetimerange"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              @change="getData(1)"
-            ></el-date-picker>
+            <el-date-picker v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
+              range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @change="getData(1)"></el-date-picker>
           </div>
 
           <!-- 支付时间筛选 -->
           <div class="paydate">
             <span class="demonstration">支付时间:</span>
-            <el-date-picker
-              v-model="payTime"
-              type="datetimerange"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              @change="getData(1)"
-            ></el-date-picker>
+            <el-date-picker v-model="payTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
+              start-placeholder="开始时间" end-placeholder="结束时间" @change="getData(1)"></el-date-picker>
           </div>
 
           <!-- 状态筛选 -->
           <div class="state">
             <span>状态:</span>
             <el-select v-model="state" clearable placeholder="请选择状态" @change="getData(1)">
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :value="item.value"
-                :label="item.label"
-              ></el-option>
+              <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-option>
             </el-select>
           </div>
 
@@ -67,39 +42,31 @@
         <!-- 表格区域 -->
         <div class="inform-table">
           <!-- 表格区域 -->
-          <el-table
-            :data="tableData"
-            @selection-change="handleSelectionChange"
-            max-height="576"
-            height="576"
-            style="width: 1550px"
-            stripe
-            class="Devicetable"
-            :cell-style="rowbg"
-            :header-cell-style="{
+          <el-table :data="tableData" @selection-change="handleSelectionChange" max-height="495" height="495"
+            style="width: 1550px" stripe class="Devicetable" :cell-style="rowbg" :header-cell-style="{
               color: ' rgba(0, 0, 0, 1)',
-              background: 'rgba(240, 243, 247, 1)',
-            }"
-          >
+              background: 'rgba(240, 243, 247, 1)'
+            }">
             <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
-            <el-table-column
-              prop="order.orderNo"
-              width="180"
-              label="订单号"
-              align="center"
-              show-overflow-tooltip
-            ></el-table-column>
+            <el-table-column prop="order.orderNo" width="180" label="订单号" align="center"
+              show-overflow-tooltip></el-table-column>
 
             <el-table-column width="100" align="center" label="状态">
-              <template slot-scope="{ row }">{{ options[row.order.orderStatu].label }}</template>
+              <template slot-scope="{ row }">{{
+                options[row.order.orderStatu].label
+              }}</template>
             </el-table-column>
 
             <el-table-column prop="order.roomNo" width="160" align="center" label="房间"></el-table-column>
             <el-table-column align="center" width="130" label="电费（元）">
-              <template slot-scope="{row}">{{row.allOfElectricPayment}}</template>
+              <template slot-scope="{ row }">{{
+                row.allOfElectricPayment
+              }}</template>
             </el-table-column>
             <el-table-column width="130" align="center" label="水费（元）">
-              <template slot-scope="{ row }">{{ row.allOfWaterAmount }}</template>
+              <template slot-scope="{ row }">{{
+                row.allOfWaterAmount
+              }}</template>
             </el-table-column>
             <el-table-column prop="allOfReceiveAmount" align="center" width="150" label="收预付款（元）"></el-table-column>
             <el-table-column prop="refundPayment" width="150" align="center" label="退预付款（元）"></el-table-column>
@@ -111,7 +78,7 @@
                 <span @click="handleEdit(row)" class="operate">详情</span>
 
                 <!-- 详情弹窗区域 -->
-                <el-dialog title="订单详情" :visible.sync="dialogVisible" width="30%">
+                <el-dialog title="订单详情" :visible.sync="dialogVisible" top="2vh" :center="true" width="968">
                   <div class="userinfo">用户信息</div>
                   <div class="info">
                     <div class="user">
@@ -126,11 +93,14 @@
                   <div class="info">
                     <div class="user">
                       <div class="name">订单号</div>
-                      <el-input :value="order.orderNo"></el-input>
+
+                      <el-tooltip placement="top" :content="order.orderNo">
+                        <el-input :value="order.orderNo"></el-input>
+                      </el-tooltip>
                     </div>
                     <div class="user">
                       <div class="name">预付款金额（元）</div>
-                      <el-input value="20.00"></el-input>
+                      <el-input :value="allOfReceiveAmount"></el-input>
                     </div>
                   </div>
                   <div class="info">
@@ -146,7 +116,7 @@
                   <div class="info">
                     <div class="user">
                       <div class="name">入住天数</div>
-                      <el-input value="1"></el-input>
+                      <el-input :value="housDay"></el-input>
                     </div>
                     <div class="user">
                       <div class="name">支付时间</div>
@@ -160,17 +130,11 @@
                     表计：101 楼层：{{ order.roomNo }} 抄表时间：2022-07-27
                     15:15:15
                   </div>
-                  <el-table
-                    :data="waterTable"
-                    max-height="93"
-                    style="width: 832px"
-                    stripe
-                    :cell-style="rowbg"
+                  <el-table :data="waterTable" max-height="93" style="width: 832px" stripe :cell-style="rowbg"
                     :header-cell-style="{
                       color: ' rgba(0, 0, 0, 1)',
-                      background: 'rgba(240, 243, 247, 1)',
-                    }"
-                  >
+                      background: 'rgba(240, 243, 247, 1)'
+                    }">
                     <el-table-column prop="startOfWater" width="100" label="始码" align="center"></el-table-column>
 
                     <el-table-column prop="endOfWater" width="100" align="center" label="终码"></el-table-column>
@@ -178,7 +142,7 @@
                     <el-table-column prop="waterVolume" align="center" label="水量（吨）"></el-table-column>
                     <el-table-column prop="priceOfWater" align="center" label="水价（元）"></el-table-column>
                     <el-table-column prop="allowance" align="center" label="补助量（吨）"></el-table-column>
-                    <el-table-column prop="cost" align="center" label="产生水费（元）"></el-table-column>
+                    <el-table-column prop="cost" align="center" label="产生水费（元）" show-overflow-tooltip></el-table-column>
                   </el-table>
 
                   <!-- 电费区域 -->
@@ -187,17 +151,11 @@
                     表计：101 楼层：{{ order.roomNo }} 抄表时间：2022-07-27
                     15:15:15
                   </div>
-                  <el-table
-                    :data="electricTable"
-                    max-height="93"
-                    style="width: 832px"
-                    stripe
-                    :cell-style="rowbg"
+                  <el-table :data="electricTable" max-height="93" style="width: 832px" stripe :cell-style="rowbg"
                     :header-cell-style="{
                       color: ' rgba(0, 0, 0, 1)',
-                      background: 'rgba(240, 243, 247, 1)',
-                    }"
-                  >
+                      background: 'rgba(240, 243, 247, 1)'
+                    }">
                     <el-table-column prop="startOfElectric" width="100" label="始码" align="center"></el-table-column>
 
                     <el-table-column prop="endOfElectric" width="100" align="center" label="终码"></el-table-column>
@@ -205,7 +163,7 @@
                     <el-table-column prop="electricVolume" align="center" label="电量（度）"></el-table-column>
                     <el-table-column prop="priceOfElectric" align="center" label="电价（元）"></el-table-column>
                     <el-table-column prop="allowance" align="center" label="补助量（度）"></el-table-column>
-                    <el-table-column prop="cost" align="center" label="产生水费（元）"></el-table-column>
+                    <el-table-column prop="cost" align="center" label="产生电费（元）" show-overflow-tooltip></el-table-column>
                   </el-table>
                 </el-dialog>
 
@@ -217,14 +175,8 @@
         </div>
         <!-- 分页器区域 -->
         <div class="block">
-          <el-pagination
-            background
-            @current-change="handleCurrentChange"
-            :page-size="pageSize"
-            :current-page="curPage"
-            layout="prev, pager, next, jumper"
-            :total="total"
-          ></el-pagination>
+          <el-pagination background @current-change="handleCurrentChange" :page-size="pageSize" :current-page="curPage"
+            layout="prev, pager, next, jumper" :total="total"></el-pagination>
         </div>
       </div>
     </el-card>
@@ -242,6 +194,7 @@ export default {
     return {
       // 显示的总数据
       tableData: [],
+
       // 多选框按钮勾选的数据
       selectionTable: [],
       // 状态数组
@@ -284,6 +237,8 @@ export default {
       waterTable: [],
       electricTable: [],
       order: [], // 用户信息
+      allOfReceiveAmount: "", // 收预付款
+      housDay: "", // 入住天数
       // 当前页
       curPage: 1,
       // 每页条数
@@ -364,7 +319,7 @@ export default {
         var downloadUrl = window.URL.createObjectURL(data);
         var anchor = document.createElement("a");
         anchor.href = downloadUrl;
-        anchor.download = name + ".xls";
+        anchor.download = name + ".xlsx";
         anchor.click();
         window.URL.revokeObjectURL(data);
         if (res) {
@@ -401,6 +356,8 @@ export default {
     handleEdit(row) {
       // console.log(row);
       this.order = row.order;
+      this.allOfReceiveAmount = row.allOfReceiveAmount;
+      this.housDay = row.housDay;
       this.waterTable = [];
       this.electricTable = [];
       if (row.orderBill) {
@@ -489,19 +446,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.inform {
+  width: calc(100vw - 260px);
+  height: calc(100vh - 96px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .inform /deep/ .el-card {
-  width: 1612px;
-  height: 950px;
+  width: 98%;
+  height: 96%;
   box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
   border-radius: 8px;
+  // border: 1px solid red;
+
   .clearfix {
-    height: 96px;
+    height: 70px;
     width: 100%;
     border-bottom: 1px solid rgba(204, 204, 204, 1);
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .inform-title {
       width: 96px;
       height: 36px;
@@ -510,15 +478,18 @@ export default {
       font-weight: 500;
       margin-left: 33px;
     }
+
     .inform-header {
       display: flex;
       margin-right: 29px;
+
       .el-button {
         margin-left: 9px;
         background-color: rgba(41, 109, 227, 1);
       }
     }
   }
+
   .inform-body {
     .order-top {
       display: flex;
@@ -527,27 +498,34 @@ export default {
       font-size: 16px;
       font-weight: 400;
       color: #000;
+
       .el-button {
         background-color: rgba(41, 109, 227, 1);
         color: #fff;
         margin-left: 9px;
       }
+
       .paydate {
         margin: 0 0 0 44px;
+
         .el-date-editor {
           margin-left: 7px;
           width: 215px;
+
           .el-range__icon {
             display: none;
           }
         }
       }
+
       .state {
         margin-left: 30px;
+
         .el-input {
           width: 150px;
         }
       }
+
       .export {
         width: 94px;
         height: 32px;
@@ -561,18 +539,23 @@ export default {
         margin-left: 170px;
       }
     }
+
     .inform-table {
+
       .execlTable,
       .selectTable {
         display: none;
       }
+
       .el-table {
         font-weight: 400;
         font-size: 16px;
         color: rgba(0, 0, 0, 1);
         margin: 0 auto;
+
         .el-table__header-wrapper {
           border-radius: 5px;
+
           .el-checkbox.is-checked {
             .el-checkbox__inner {
               background-color: rgba(41, 109, 227, 1);
@@ -586,8 +569,10 @@ export default {
             }
           }
         }
+
         tr {
-          height: 64px;
+          height: 55px;
+
           td {
             .cell {
               .el-checkbox.is-checked {
@@ -595,11 +580,13 @@ export default {
                   background-color: rgba(41, 109, 227, 1);
                 }
               }
+
               .is-indeterminate {
                 .el-checkbox__inner {
                   background-color: rgba(41, 109, 227, 1);
                 }
               }
+
               .operate {
                 color: rgba(41, 109, 227, 1);
                 cursor: pointer;
@@ -607,19 +594,27 @@ export default {
                 font-weight: 400;
                 padding: 0 5px;
               }
+
               .el-dialog__wrapper {
                 overflow: hidden;
+
                 .el-dialog {
-                  width: 968px !important;
-                  margin-top: 80px !important;
+                  // width: 968px !important;
+                  // margin-top: 80px !important;
                   height: 880px;
                   opacity: 1;
                   background: rgba(255, 255, 255, 1);
                   box-shadow: none;
+
                   .el-dialog__header {
-                    height: 83px;
+                    height: 60px;
+                    line-height: 60px;
                     border-bottom: 1px solid rgba(230, 230, 230, 1);
 
+                    .el-dialog__title {
+                      padding: 0;
+                    }
+
                     span {
                       float: left;
                       font-size: 20px;
@@ -630,14 +625,17 @@ export default {
                     .el-dialog__close {
                       width: 35px;
                       height: 35px;
+
                       &::before {
                         font-size: 24px;
                         color: #000;
                       }
                     }
                   }
+
                   .el-dialog__body {
                     padding: 0 38px;
+
                     .userinfo {
                       font-size: 20px;
                       font-weight: 500;
@@ -645,24 +643,29 @@ export default {
                       text-align: left;
                       margin-top: 15px;
                     }
+
                     .info {
                       display: flex;
+
                       .user {
                         .name {
                           text-align: left;
                           padding: 12px 0;
                         }
+
                         .el-input {
                           width: 283px;
                           height: 38px;
                           opacity: 1;
                           margin-right: 81px;
+
                           .el-input__inner {
                             color: #000;
                           }
                         }
                       }
                     }
+
                     .rate {
                       font-size: 20px;
                       font-weight: 500;
@@ -670,17 +673,21 @@ export default {
                       text-align: left;
                       margin: 15px 0;
                     }
+
                     .water {
                       text-align: left;
                       font-size: 16px;
                       font-weight: 400;
                       color: rgba(0, 0, 0, 1);
                     }
+
                     .el-table {
                       margin: 10px 0;
+
                       tr {
                         height: 48px;
                       }
+
                       .el-table__body-wrapper {
                         overflow: visible;
                       }
@@ -696,9 +703,11 @@ export default {
               }
             }
           }
+
           .el-checkbox__inner {
             width: 18px;
             height: 18px;
+
             &::after {
               transform: rotate(45deg) scaleY(1.5);
               top: 3px;
@@ -706,17 +715,21 @@ export default {
             }
           }
         }
+
         th {
           font-weight: 400;
         }
       }
     }
+
     .block {
       height: 36px;
-      margin: 66px 29px 0 0;
+      margin: 38px 29px 0 0;
       float: right;
+
       .el-pagination {
         padding: 0;
+
         button {
           width: 36px;
           background: #fff;
@@ -726,6 +739,7 @@ export default {
           border: 1px solid rgba(112, 112, 112, 1);
           border-radius: 8px;
         }
+
         ul {
           .active {
             background: #fff;
@@ -733,9 +747,11 @@ export default {
             border: 1px solid rgba(0, 97, 255, 1);
             box-sizing: border-box;
           }
+
           .el-icon {
             border: none;
           }
+
           li {
             background: #fff;
             color: rgba(0, 0, 0, 1);
@@ -747,16 +763,19 @@ export default {
             line-height: 36px;
           }
         }
+
         .el-pagination__jump {
           color: rgba(0, 0, 0, 1);
           font-size: 16px;
           margin-left: 10px;
           font-weight: 400;
           height: 36px;
+
           .el-input {
             width: 65px;
             height: 36px;
             margin: 0 10px;
+
             input {
               width: 65px;
               height: 36px;
@@ -769,10 +788,12 @@ export default {
     }
   }
 }
+
 .box-card {
   /deep/ .el-card__header {
     padding: 0;
   }
+
   /deep/ .el-card__body {
     padding: 0;
   }
@@ -784,4 +805,4 @@ export default {
     background-color: #296de3;
   }
 }
-</style>
+</style>

src/views/staff/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="inform">
-    <el-card class="box-card" style="width: 1612px; height: 950px">
+    <el-card class="box-card">
       <!-- 标题区域 -->
       <div slot="header" class="clearfix">
         <div class="inform-title">员工管理</div>
@@ -10,13 +10,7 @@
         <!-- 筛选条件区域 -->
         <div class="order-top">
           <div class="username-inquire">
-            <el-input
-              placeholder="请输入手机号码或员工姓名"
-              style="width: 261px"
-              v-model="value"
-              clearable
-              @clear="getData(1)"
-            >
+            <el-input placeholder="请输入手机号码或员工姓名" style="width: 261px" v-model="value" clearable @clear="getData(1)">
               <i slot="prefix" class="el-input__icon el-icon-search"></i>
             </el-input>
             <el-button @click="getData(1)">查询</el-button>
@@ -24,11 +18,7 @@
           <div class="export" @click="addStaff">添加员工</div>
 
           <!-- 添加员工弹窗 -->
-          <el-dialog
-            title="添加员工"
-            :visible.sync="addStaffShow"
-            :close-on-click-modal="false"
-          >
+          <el-dialog title="添加员工" :visible.sync="addStaffShow" :close-on-click-modal="false">
             <div class="info">
               <div class="user">
                 <div class="name">员工姓名</div>
@@ -43,12 +33,8 @@
               <div class="user">
                 <div class="name">部门</div>
                 <el-select v-model="departid" placeholder="请选择">
-                  <el-option
-                    v-for="(item, index) in options"
-                    :key="index"
-                    :label="item.department"
-                    :value="item.department"
-                  >
+                  <el-option v-for="(item, index) in options" :key="index" :label="item.department"
+                    :value="item.department">
                   </el-option>
                 </el-select>
               </div>
@@ -58,36 +44,22 @@
               </div>
             </div>
             <span slot="footer" class="dialog-footer">
-              <el-button @click.stop="addStaffShow = false" class="cancel"
-                >取消</el-button
-              >
+              <el-button @click.stop="addStaffShow = false" class="cancel">取消</el-button>
               <el-button @click.stop="addSuccess">完成</el-button>
             </span>
           </el-dialog>
         </div>
         <!-- 表格区域 -->
         <div class="inform-table">
-          <el-table
-            :data="tableData"
-            max-height="576"
-            height="576"
-            style="width: 1550px"
-            stripe
-            :cell-style="rowbg"
+          <el-table :data="tableData" max-height="495" height="495" style="width: 1550px" stripe :cell-style="rowbg"
             :header-cell-style="{
               color: ' rgba(0, 0, 0, 1)',
               background: 'rgba(240, 243, 247, 1)'
-            }"
-          >
+            }">
             <el-table-column prop="username" align="center" label="员工姓名">
             </el-table-column>
 
-            <el-table-column
-              prop="phone"
-              width="300"
-              label="手机号码"
-              align="center"
-            >
+            <el-table-column prop="phone" width="300" label="手机号码" align="center">
             </el-table-column>
             <el-table-column prop="departid" align="center" label="部门">
             </el-table-column>
@@ -101,11 +73,7 @@
                 </span>
 
                 <!-- 编辑员工弹窗 -->
-                <el-dialog
-                  title="编辑员工"
-                  :visible.sync="editShow"
-                  :close-on-click-modal="false"
-                >
+                <el-dialog title="编辑员工" :visible.sync="editShow" :close-on-click-modal="false">
                   <div class="info">
                     <div class="user">
                       <div class="name">员工姓名</div>
@@ -120,12 +88,8 @@
                     <div class="user">
                       <div class="name">部门</div>
                       <el-select v-model="departid" placeholder="请选择">
-                        <el-option
-                          v-for="(item, index) in options"
-                          :key="index"
-                          :label="item.department"
-                          :value="item.department"
-                        >
+                        <el-option v-for="(item, index) in options" :key="index" :label="item.department"
+                          :value="item.department">
                         </el-option>
                       </el-select>
                     </div>
@@ -135,9 +99,7 @@
                     </div>
                   </div>
                   <span slot="footer" class="dialog-footer">
-                    <el-button @click.stop="editShow = false" class="cancel"
-                      >取消</el-button
-                    >
+                    <el-button @click.stop="editShow = false" class="cancel">取消</el-button>
                     <el-button @click.stop="editSuccess()">完成</el-button>
                   </span>
                 </el-dialog>
@@ -152,14 +114,8 @@
         </div>
         <!-- 分页器区域 -->
         <div class="block">
-          <el-pagination
-            background
-            @current-change="handleCurrentChange"
-            :current-page="curPage"
-            :page-size="pageSize"
-            layout="prev, pager, next, jumper"
-            :total="total"
-          >
+          <el-pagination background @current-change="handleCurrentChange" :current-page="curPage" :page-size="pageSize"
+            layout="prev, pager, next, jumper" :total="total">
           </el-pagination>
         </div>
       </div>
@@ -362,19 +318,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.inform {
+  width: calc(100vw - 260px);
+  height: calc(100vh - 96px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .inform /deep/ .el-card {
-  width: 1612px;
-  height: 950px;
+  width: 98%;
+  height: 96%;
   box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
   border-radius: 8px;
+
   .clearfix {
-    height: 96px;
+    height: 70px;
     width: 100%;
     border-bottom: 1px solid rgba(204, 204, 204, 1);
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .inform-title {
       width: 96px;
       height: 36px;
@@ -383,15 +349,18 @@ export default {
       font-weight: 500;
       margin-left: 33px;
     }
+
     .inform-header {
       display: flex;
       margin-right: 29px;
+
       .el-button {
         margin-left: 9px;
         background-color: rgba(41, 109, 227, 1);
       }
     }
   }
+
   .inform-body {
     .order-top {
       display: flex;
@@ -411,6 +380,7 @@ export default {
       .state {
         margin-left: 30px;
       }
+
       .export {
         width: 94px;
         height: 32px;
@@ -422,26 +392,31 @@ export default {
         cursor: pointer;
         border-radius: 3px;
       }
+
       .el-dialog__wrapper {
         .el-dialog {
           width: 555px !important;
           height: 377px !important;
           margin-top: 352px !important;
+
           .el-dialog__header {
             height: 80px;
             padding: 0;
             display: flex;
             align-items: center;
             border-bottom: 1px solid rgba(230, 230, 230, 1);
+
             .el-dialog__title {
               font-size: 20px;
               font-weight: 500;
               padding-left: 30px;
               color: rgba(0, 0, 0, 1);
             }
+
             .el-dialog__headerbtn {
               width: 35px;
               height: 35px;
+
               .el-dialog__close {
                 font-size: 28px;
                 font-weight: 500;
@@ -449,20 +424,25 @@ export default {
               }
             }
           }
+
           .el-dialog__body {
             padding: 0 30px;
+
             .info {
               display: flex;
+
               .user {
                 .name {
                   text-align: left;
                   padding: 12px 0;
                 }
+
                 .el-input {
                   width: 205px;
                   height: 38px;
                   opacity: 1;
                   margin-right: 81px;
+
                   .el-input__inner {
                     color: #000;
                   }
@@ -470,13 +450,16 @@ export default {
               }
             }
           }
+
           .el-dialog__footer {
             padding: 52px 30px 0 0;
+
             .el-button {
               width: 67px;
               height: 37px;
               padding: 0;
             }
+
             .cancel {
               background-color: #fff;
               color: rgba(56, 56, 56, 1);
@@ -485,17 +468,21 @@ export default {
         }
       }
     }
+
     .inform-table {
       .el-table {
         font-weight: 400;
         font-size: 16px;
         color: rgba(0, 0, 0, 1);
         margin: 0 auto;
+
         .el-table__header-wrapper {
           border-radius: 5px;
         }
+
         tr {
-          height: 64px;
+          height: 55px;
+
           td {
             .cell {
               .operate {
@@ -505,8 +492,10 @@ export default {
                 font-weight: 400;
                 padding: 0 5px;
               }
+
               .el-dialog__wrapper {
                 overflow: hidden;
+
                 .el-dialog {
                   width: 555px !important;
                   height: 377px !important;
@@ -514,12 +503,15 @@ export default {
                   opacity: 1;
                   background: rgba(255, 255, 255, 1);
                   box-shadow: none;
+
                   .el-dialog__header {
                     height: 83px;
                     border-bottom: 1px solid rgba(230, 230, 230, 1);
+
                     .el-dialog__headerbtn {
                       top: 29px;
                     }
+
                     span {
                       float: left;
                       font-size: 20px;
@@ -530,14 +522,17 @@ export default {
                     .el-dialog__close {
                       width: 35px;
                       height: 35px;
+
                       &::before {
                         font-size: 24px;
                         color: #000;
                       }
                     }
                   }
+
                   .el-dialog__body {
                     padding: 0 38px;
+
                     .userinfo {
                       font-size: 20px;
                       font-weight: 500;
@@ -545,24 +540,29 @@ export default {
                       text-align: left;
                       margin-top: 15px;
                     }
+
                     .info {
                       display: flex;
+
                       .user {
                         .name {
                           text-align: left;
                           padding: 12px 0;
                         }
+
                         .el-input {
                           width: 205px;
                           height: 38px;
                           opacity: 1;
                           margin-right: 81px;
+
                           .el-input__inner {
                             color: #000;
                           }
                         }
                       }
                     }
+
                     .rate {
                       font-size: 20px;
                       font-weight: 500;
@@ -570,24 +570,30 @@ export default {
                       text-align: left;
                       margin: 15px 0;
                     }
+
                     .water {
                       text-align: left;
                       font-size: 16px;
                       font-weight: 400;
                       color: rgba(0, 0, 0, 1);
                     }
+
                     .el-table {
                       margin: 10px 0;
+
                       tr {
                         height: 48px;
                       }
+
                       .el-table__body-wrapper {
                         overflow: visible;
                       }
                     }
                   }
+
                   .el-dialog__footer {
                     padding: 52px 30px 0 0;
+
                     .el-button {
                       width: 67px;
                       height: 37px;
@@ -595,6 +601,7 @@ export default {
                       color: #fff;
                       background-color: rgba(41, 109, 227, 1);
                     }
+
                     .cancel {
                       background-color: #fff;
                       color: rgba(56, 56, 56, 1);
@@ -610,9 +617,11 @@ export default {
               }
             }
           }
+
           .el-checkbox__inner {
             width: 18px;
             height: 18px;
+
             &::after {
               transform: rotate(45deg) scaleY(1.5);
               top: 3px;
@@ -620,17 +629,21 @@ export default {
             }
           }
         }
+
         th {
           font-weight: 400;
         }
       }
     }
+
     .block {
       height: 36px;
-      margin: 66px 29px 0 0;
+      margin: 40px 29px 0 0;
       float: right;
+
       .el-pagination {
         padding: 0;
+
         button {
           width: 36px;
           background: #fff;
@@ -640,6 +653,7 @@ export default {
           border: 1px solid rgba(112, 112, 112, 1);
           border-radius: 8px;
         }
+
         ul {
           .active {
             background: #fff;
@@ -647,9 +661,11 @@ export default {
             border: 1px solid rgba(0, 97, 255, 1);
             box-sizing: border-box;
           }
+
           .el-icon {
             border: none;
           }
+
           li {
             background: #fff;
             color: rgba(0, 0, 0, 1);
@@ -661,16 +677,19 @@ export default {
             line-height: 36px;
           }
         }
+
         .el-pagination__jump {
           color: rgba(0, 0, 0, 1);
           font-size: 16px;
           margin-left: 10px;
           font-weight: 400;
           height: 36px;
+
           .el-input {
             width: 65px;
             height: 36px;
             margin: 0 10px;
+
             input {
               width: 65px;
               height: 36px;
@@ -683,10 +702,12 @@ export default {
     }
   }
 }
+
 .box-card {
   /deep/ .el-card__header {
     padding: 0;
   }
+
   /deep/ .el-card__body {
     padding: 0;
   }

src/views/stat/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="stat">
-    <el-card class="box-card" style="width: 1612px; height: 950px">
+    <el-card class="box-card">
       <!-- 标题区域 -->
       <div slot="header" class="clearfix">
         <div class="stat-title">统计报表</div>
@@ -16,16 +16,8 @@
               <span>筛选时间:</span>
             </el-col>
             <el-col :span="20">
-              <el-date-picker
-                v-model="searchValue"
-                type="monthrange"
-                range-separator="至"
-                start-placeholder="开始月份"
-                end-placeholder="结束月份"
-                style="width: 350px"
-                value-format="yyyy-MM"
-                @change="getData"
-              ></el-date-picker>
+              <el-date-picker v-model="searchValue" type="monthrange" range-separator="至" start-placeholder="开始月份"
+                end-placeholder="结束月份" style="width: 350px" value-format="yyyy-MM" @change="getData"></el-date-picker>
             </el-col>
           </div>
           <div class="right">
@@ -34,17 +26,11 @@
         </div>
         <!-- 表格区域 -->
         <div class="stat-table">
-          <el-table
-            :data="tableData"
-            style="width: 1550px"
-            max-height="512"
-            stripe
-            :cell-style="rowbg"
+          <el-table :data="tableData" style="width: 1550px" max-height="450" height="450" stripe :cell-style="rowbg"
             :header-cell-style="{
               color: ' rgba(0, 0, 0, 1)',
               background: 'rgba(240, 243, 247, 1)',
-            }"
-          >
+            }">
             <el-table-column prop="time" align="center" label="时间"></el-table-column>
 
             <el-table-column prop="waterPayment" align="center" label="水费（元）"></el-table-column>
@@ -58,10 +44,10 @@
           <div class="total">
             <ul>
               <li>合计/元</li>
-              <li>{{totalNum.waterTotalPayment}}</li>
-              <li>{{totalNum.electricTotalPayment}}</li>
-              <li>{{totalNum.refundTotalPayment}}</li>
-              <li>{{totalNum.tatolPayment}}</li>
+              <li>{{ totalNum.waterTotalPayment }}</li>
+              <li>{{ totalNum.electricTotalPayment }}</li>
+              <li>{{ totalNum.refundTotalPayment }}</li>
+              <li>{{ totalNum.tatolPayment }}</li>
             </ul>
           </div>
         </div>
@@ -69,14 +55,8 @@
         <!-- 分页器区域 -->
       </div>
       <div class="block">
-        <el-pagination
-          background
-          layout="prev, pager, next, jumper"
-          :current-page.sync="currentPage"
-          :page-size="pageSize"
-          :total="total"
-          @current-change="handleCurrentChange"
-        ></el-pagination>
+        <el-pagination background layout="prev, pager, next, jumper" :current-page.sync="currentPage"
+          :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
       </div>
     </el-card>
   </div>
@@ -207,19 +187,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.stat {
+  width: calc(100vw - 260px);
+  height: calc(100vh - 96px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .stat /deep/ .el-card {
-  width: 1612px;
-  height: 950px;
+  width: 98%;
+  height: 96%;
   box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
   border-radius: 8px;
+
   .clearfix {
-    height: 96px;
+    height: 70px;
     width: 100%;
     border-bottom: 1px solid rgba(204, 204, 204, 1);
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .stat-title {
       width: 96px;
       height: 36px;
@@ -229,54 +219,66 @@ export default {
       margin-left: 33px;
     }
   }
+
   .stat-body {
     height: 82%;
+
     .state {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 33px 29px 34px 33px;
+
       .left {
         display: flex;
         align-items: center;
+
         .el-button {
           margin-left: 10px;
           background-color: rgba(41, 109, 227, 1);
         }
       }
+
       .right {
         .el-button {
           background-color: rgba(41, 109, 227, 1);
         }
       }
     }
+
     .stat-table {
       .el-table {
         font-weight: 400;
         font-size: 16px;
         color: rgba(0, 0, 0, 1);
         margin: 0 auto;
+
         .el-table__header-wrapper {
           border-radius: 5px;
         }
+
         tr {
-          height: 64px;
+          height: 50px;
         }
+
         th {
           font-weight: 400;
         }
       }
+
       .total {
         width: 1550px;
         height: 64px;
 
         margin: 0 auto;
+
         ul {
           display: flex;
           // justify-content: center;
           list-style: none;
           // align-items: center;
           padding: 0;
+
           li {
             flex: 1;
             height: 64px;
@@ -288,15 +290,18 @@ export default {
       }
     }
   }
+
   .block {
     height: 36px;
     margin: 0 29px 0px 0;
     float: right;
+
     // position: absolute;
     // bottom: 60px;
     // right: 29px;
     .el-pagination {
       padding: 0;
+
       button {
         width: 36px;
         background: #fff;
@@ -306,6 +311,7 @@ export default {
         border: 1px solid rgba(112, 112, 112, 1);
         border-radius: 8px;
       }
+
       ul {
         .active {
           background: #fff;
@@ -313,9 +319,11 @@ export default {
           border: 1px solid rgba(0, 97, 255, 1);
           box-sizing: border-box;
         }
+
         .el-icon {
           border: none;
         }
+
         li {
           background: #fff;
           color: rgba(0, 0, 0, 1);
@@ -327,16 +335,19 @@ export default {
           line-height: 36px;
         }
       }
+
       .el-pagination__jump {
         color: rgba(0, 0, 0, 1);
         font-size: 16px;
         margin-left: 10px;
         font-weight: 400;
         height: 36px;
+
         .el-input {
           width: 65px;
           height: 36px;
           margin: 0 10px;
+
           input {
             width: 65px;
             height: 36px;
@@ -348,13 +359,15 @@ export default {
     }
   }
 }
+
 .box-card {
   /deep/ .el-card__header {
     padding: 0;
   }
+
   /deep/ .el-card__body {
     padding: 0;
     height: 100%;
   }
 }
-</style>
+</style>

src/views/system/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="stat">
-    <el-card class="box-card" style="width: 1612px; height: 950px">
+    <el-card class="box-card">
       <!-- 标题区域 -->
       <div slot="header" class="clearfix">
         <div class="stat-title">系统设置</div>
@@ -11,83 +11,44 @@
         <!-- 预付款区域 -->
         <div>
           预付款每晚不得少于
-          <el-input
-            class="input-new-tag"
-            v-if="imprestShow"
-            v-model="inputValue_imprest"
-            v-fo
-            size="small"
-            @blur="handleInputConfirm('imprestShow', 'inputValue_imprest')"
-          ></el-input>
-          <el-button
-            v-else
-            class="button-new-tag"
-            size="small"
-            @click="showInput('imprestShow', 'inputValue_imprest')"
-          >{{ inputValue_imprest }}</el-button>元
+          <el-input class="input-new-tag" v-if="imprestShow" v-model="inputValue_imprest" v-fo size="small"
+            @blur="handleInputConfirm('imprestShow', 'inputValue_imprest')"></el-input>
+          <el-button v-else class="button-new-tag" size="small" @click="showInput('imprestShow', 'inputValue_imprest')">{{
+            inputValue_imprest }}</el-button>元
         </div>
 
         <!-- 预定天数区域 -->
         <div>
           设置预定/续住天数提前
-          <el-input
-            class="input-new-tag"
-            v-if="reserveShow"
-            v-model="inputValue_reserve"
-            size="small"
-            @blur="handleInputConfirm('reserveShow', 'inputValue_reserve')"
-          ></el-input>
-          <el-button
-            v-else
-            class="button-new-tag"
-            size="small"
-            @click="showInput('reserveShow', 'inputValue_reserve')"
-          >{{ inputValue_reserve }}</el-button>天
+          <el-input class="input-new-tag" v-if="reserveShow" v-model="inputValue_reserve" size="small"
+            @blur="handleInputConfirm('reserveShow', 'inputValue_reserve')"></el-input>
+          <el-button v-else class="button-new-tag" size="small" @click="showInput('reserveShow', 'inputValue_reserve')">{{
+            inputValue_reserve }}</el-button>天
         </div>
 
         <!-- 补助区域 -->
         <div>
           每人补助水量为
-          <el-input
-            class="input-new-tag"
-            v-if="subsidyWaterShow"
-            v-model="inputValue_subsidyWater"
-            v-fo
-            size="small"
+          <el-input class="input-new-tag" v-if="subsidyWaterShow" v-model="inputValue_subsidyWater" v-fo size="small"
             @blur="
               handleInputConfirm('subsidyWaterShow', 'inputValue_subsidyWater')
-            "
-          ></el-input>
-          <el-button
-            v-else
-            class="button-new-tag"
-            size="small"
-            @click="showInput('subsidyWaterShow', 'inputValue_subsidyWater')"
-          >{{ inputValue_subsidyWater }}</el-button>吨，每人补助电量为
-          <el-input
-            class="input-new-tag"
-            v-if="subsidyElectricityShow"
-            v-model="inputValue_subsidyElectricity"
-            v-fo
-            size="small"
-            @blur="
+              "></el-input>
+          <el-button v-else class="button-new-tag" size="small"
+            @click="showInput('subsidyWaterShow', 'inputValue_subsidyWater')">{{ inputValue_subsidyWater
+            }}</el-button>吨，每人补助电量为
+          <el-input class="input-new-tag" v-if="subsidyElectricityShow" v-model="inputValue_subsidyElectricity" v-fo
+            size="small" @blur="
               handleInputConfirm(
                 'subsidyElectricityShow',
                 'inputValue_subsidyElectricity'
               )
-            "
-          ></el-input>
-          <el-button
-            v-else
-            class="button-new-tag"
-            size="small"
-            @click="
-              showInput(
-                'subsidyElectricityShow',
-                'inputValue_subsidyElectricity'
-              )
-            "
-          >{{ inputValue_subsidyElectricity }}</el-button>度
+              "></el-input>
+          <el-button v-else class="button-new-tag" size="small" @click="
+            showInput(
+              'subsidyElectricityShow',
+              'inputValue_subsidyElectricity'
+            )
+            ">{{ inputValue_subsidyElectricity }}</el-button>度
         </div>
 
         <!-- 通知人区域 -->
@@ -114,20 +75,10 @@
         <!-- 退房区域 -->
         <div>
           设置退房后
-          <el-input
-            class="input-new-tag"
-            v-if="refundShow"
-            v-model="inputValue_refund"
-            v-fo
-            size="small"
-            @blur="handleInputConfirm('refundShow', 'inputValue_refund')"
-          ></el-input>
-          <el-button
-            v-else
-            class="button-new-tag"
-            size="small"
-            @click="showInput('refundShow', 'inputValue_refund')"
-          >{{ inputValue_refund }}</el-button>分钟，断水断电
+          <el-input class="input-new-tag" v-if="refundShow" v-model="inputValue_refund" v-fo size="small"
+            @blur="handleInputConfirm('refundShow', 'inputValue_refund')"></el-input>
+          <el-button v-else class="button-new-tag" size="small" @click="showInput('refundShow', 'inputValue_refund')">{{
+            inputValue_refund }}</el-button>分钟，断水断电
         </div>
       </div>
     </el-card>
@@ -230,19 +181,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.stat {
+  width: calc(100vw - 260px);
+  height: calc(100vh - 96px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .stat /deep/ .el-card {
-  width: 1612px;
-  height: 950px;
+  width: 98%;
+  height: 96%;
   box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
   border-radius: 8px;
+
   .clearfix {
-    height: 96px;
+    height: 70px;
     width: 100%;
     border-bottom: 1px solid rgba(204, 204, 204, 1);
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .stat-title {
       width: 96px;
       height: 36px;
@@ -252,15 +213,19 @@ export default {
       margin-left: 33px;
     }
   }
+
   .stat-body {
     padding: 30px 0 0 30px;
+
     div {
       height: 40px;
       margin-bottom: 28px;
+
       .input-new-tag {
         margin: 0 10px;
         width: 90px;
       }
+
       .button-new-tag {
         margin: 0 10px;
         width: 90px;
@@ -270,12 +235,14 @@ export default {
     }
   }
 }
+
 .box-card {
   /deep/ .el-card__header {
     padding: 0;
   }
+
   /deep/ .el-card__body {
     padding: 0;
   }
 }
-</style>
+</style>