合并页面

admin/package-lock.json

@@ -311,11 +311,6 @@
         }
       }
     },
-    "@vue/devtools-api": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
-      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
-    },
     "abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmmirror.com/abab/-/abab-2.0.6.tgz",
@@ -16756,12 +16751,9 @@
       "dev": true
     },
     "vuex": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz",
-      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
-      "requires": {
-        "@vue/devtools-api": "^6.0.0-beta.11"
-      }
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
     },
     "w3c-hr-time": {
       "version": "1.0.2",

admin/package.json

@@ -21,7 +21,7 @@
     "svg-sprite-loader": "^4.3.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
-    "vuex": "^4.0.2",
+    "vuex": "^3.6.2",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

admin/src/layout/components/Navbar.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 import moment from "moment";
 import "moment/locale/zh-cn";
 export default {
@@ -35,11 +36,18 @@ export default {
       time: moment().format("YYYY-M-D dddd HH:mm:ss"),
     };
   },
+  // computed: { ...mapState([itemPath]) },
+  mounted() {},
   methods: {
     informs() {
-      this.$router.replace({ name: "Inform" }).catch((err) => {
-        console.log();
-      });
+      this.$router
+        .replace({ name: "Inform" })
+        .then((res) => {
+          this.$store.commit("itemP", res.path);
+        })
+        .catch((err) => {
+          console.log();
+        });
     },
   },
 };

admin/src/layout/components/NavbarItem.vue

@@ -79,26 +79,29 @@
 </template>
 
 <script>
-import { mapMutations } from "vuex";
 export default {
   name: "NavbarItem",
   data() {
     return {
       isCollapse: false,
-      ItemIndex: "",
     };
   },
-  mounted() {
-    // console.log(this.$route.path);
-    this.ItemIndex = this.$route.path;
+  mounted() {},
+  computed: {
+    ItemIndex: {
+      get() {
+        console.log(this.$store.state.itemPath);
+        return this.$store.state.itemPath;
+      },
+      set(val) {},
+    },
   },
   methods: {
     select(index, indexPath) {
       this.ItemIndex = index;
+      this.$store.commit("itemP", index);
     },
-    set() {
-      this.setRouterPath(this.$route.path);
-    },
+
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
     },
@@ -137,6 +140,8 @@ export default {
       font-size: 18px;
       display: flex;
       align-items: center;
+      border: 1px solid transparent;
+      box-sizing: border-box;
 
       .icons {
         margin-left: 27px;

admin/src/layout/index.vue

@@ -25,7 +25,15 @@ export default {
   data() {
     return {};
   },
-  methods: {},
+  created() {
+    this.$store.commit("itemP", this.$route.path);
+  },
+  methods: {
+    pathN(data) {
+      this.pathName = data;
+      console.log("接受了");
+    },
+  },
 };
 </script>
 
@@ -41,7 +49,7 @@ export default {
     width: 1660px;
     height: 96px !important;
     background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 3px 10px rgba(41, 109, 227, 1);
+    box-shadow: 0px 3px 10px rgba(41, 109, 227, 0.1);
   }
 
   .el-aside {

admin/src/main.js

@@ -4,6 +4,9 @@ import Vue from 'vue'
 import App from './App'
 
 import router from './router'
+
+import store from './store'
+
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
@@ -17,6 +20,7 @@ Vue.use(ElementUI);
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })

admin/src/router/index.js

@@ -10,7 +10,7 @@ export default new Router({
         {
             path: '/',
             name: 'Layout',
-            redirect: '/home',
+            redirect: '/login',
             component: Layout,
             children: [
                 {
@@ -49,6 +49,12 @@ export default new Router({
                     component: () => import('@/views/inform')
                 }
             ]
-        }
+        },
+        // 登录页
+        {
+            path: '/login',
+            component: () => import('@/views/login/index'),
+            hidden: true
+        },
     ]
 })

admin/src/store/index.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+        //当前的路由值
+        itemPath: ''
+
+    },
+
+    mutations: {
+        //修改当前的路由值
+        itemP(state, payload) {
+            state.itemPath = payload
+        }
+
+    },
+
+    getters: {
+
+    }
+})

admin/src/views/account/index.vue

@@ -1,13 +1,427 @@
 <template>
-    <div>Account</div>
+  <div class="inform">
+    <el-card class="box-card" style="width: 1612px; height: 950px">
+      <!-- 标题区域 -->
+      <div slot="header" class="clearfix">
+        <div class="inform-title">账号管理</div>
+      </div>
+
+      <!-- 主体内容区域 -->
+      <div class="inform-body">
+        <!-- 筛选条件区域 -->
+        <div class="state">
+          <div class="left">
+            <el-col :span="18">
+              <el-input
+                v-model="searchValue"
+                placeholder="请输入账号或员工姓名"
+                prefix-icon="el-icon-search"
+              >
+              </el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-button type="primary">查询</el-button>
+            </el-col>
+          </div>
+          <div class="right">
+            <el-button type="primary" @click="handleAdd">添加账号</el-button>
+          </div>
+        </div>
+        <!-- 表格区域 -->
+        <div class="inform-table">
+          <el-table
+            :data="tableData"
+            max-height="576"
+            height="576"
+            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="number" label="账号" align="center">
+            </el-table-column>
+
+            <el-table-column prop="name" align="center" label="员工姓名">
+            </el-table-column>
+
+            <el-table-column prop="identity" align="center" label="角色">
+            </el-table-column>
+            <el-table-column align="center" label="操作">
+              <template slot-scope="{ row }">
+                <el-row v-if="row.identity == '超级管理员'">/</el-row>
+                <el-row v-else>
+                  <el-button type="text" @click="handleEdit(row)">
+                    编辑
+                  </el-button>
+                  <el-button type="text" @click="handleDelete(row)"
+                    >删除
+                  </el-button>
+                </el-row>
+              </template>
+            </el-table-column>
+          </el-table>
+        </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>
+        </div>
+      </div>
+
+      <!-- 添加账号弹窗区域 -->
+      <el-dialog
+        :title="popTitle"
+        width="30%"
+        :visible.sync="dialogVisible"
+        :close-on-click-modal="false"
+        :before-close="handleClose"
+      >
+        <hr class="pop_title" />
+
+        <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="name">
+                <el-input
+                  v-model="ruleForm.name"
+                  placeholder="请输入员工姓名"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="手机号码" prop="phone">
+                <el-input
+                  v-model="ruleForm.phone"
+                  placeholder="请输入手机号码"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-form-item label="角色" prop="identity">
+            <el-select v-model="ruleForm.identity" placeholder="请选择角色">
+              <el-option label="超级管理员" value="shanghai"></el-option>
+              <el-option label="管理员" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="权限分配" prop="type">
+            <el-checkbox-group v-model="ruleForm.type">
+              <el-checkbox label="房态管理" name="type"></el-checkbox>
+              <el-checkbox label="订单管理" name="type"></el-checkbox>
+              <el-checkbox label="员工管理" name="type"></el-checkbox>
+              <el-checkbox label="账号管理" name="type"></el-checkbox>
+              <el-checkbox label="统计报表" name="type"></el-checkbox>
+              <el-checkbox label="系统设置" name="type"></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-form>
+
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleConfirm('ruleForm')"
+            >确 定
+          </el-button>
+        </span>
+      </el-dialog>
+    </el-card>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'Account'
-
-}
+  name: "Account",
+  data() {
+    return {
+      // 添加账号弹窗控制
+      dialogVisible: false,
+      // 添加账号弹窗标题
+      popTitle: "添加账号",
+      // 表格数据
+      tableData: [
+        {
+          number: "13645895689",
+          name: "王小虎",
+          identity: "超级管理员",
+        },
+        {
+          number: "13645898888",
+          name: "张三",
+          identity: "管理员",
+        },
+      ],
+      //  搜索框绑定数据
+      searchValue: "",
+      //   分页器当前页
+      currentPage: 1,
+      //   每页条数
+      pageSize: 8,
+      //   总条数
+      total: 50,
+      // 添加账号弹窗表格绑定数据
+      ruleForm: {
+        name: "",
+        phone: "",
+        identity: "",
+        type: [],
+      },
+      // 添加账号弹窗表格验证规则
+      rules: {
+        name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
+        phone: [
+          { required: true, message: "请输入手机号码", trigger: "blur" },
+          {
+            min: 3,
+            max: 11,
+            message: "长度在 3 到 11 个字符",
+            trigger: "blur",
+          },
+        ],
+        identity: [
+          { required: true, message: "请选择角色", trigger: "change" },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 添加账号按钮回调
+    handleAdd() {
+      this.ruleForm.name = "";
+      this.ruleForm.phone = "";
+      this.ruleForm.identity = "";
+      this.ruleForm.type = [];
+      this.dialogVisible = true;
+      this.popTitle = "添加账号";
+      this.$nextTick(() => {
+        this.$refs.ruleForm.resetFields();
+      });
+    },
+    // 编辑按钮回调
+    handleEdit(row) {
+      console.log(row);
+      this.ruleForm.phone = row.number;
+      this.ruleForm.name = row.name;
+      this.ruleForm.identity = row.identity;
+      this.dialogVisible = true;
+      this.popTitle = "编辑账号";
+      Object.assign(this.ruleForm, row);
+    },
+    // 删除按钮回调
+    handleDelete(row) {
+      console.log(row);
+      this.$confirm("确定删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message.success("删除成功");
+        })
+        .catch(() => {
+          this.$message.info("已取消删除");
+        });
+    },
+    // 分页器换页回调
+    handleCurrentChange(value) {
+      console.log(value);
+      this.currentPage = value;
+    },
+    // 添加账号弹窗关闭弹窗回调
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+    // 添加账号弹窗确定按钮回调
+    handleConfirm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log("添加成功");
+          let arr = {
+            number: this.ruleForm.phone,
+            name: this.ruleForm.name,
+            identity: this.ruleForm.identity,
+            type: this.ruleForm.type,
+          };
+          this.tableData.push(arr);
+          this.dialogVisible = false;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    // 表格样式设置回调
+    rowbg(row) {
+      if (row.rowIndex % 2 != 0) {
+        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.inform /deep/ .el-card {
+  width: 1612px;
+  height: 950px;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+  border-radius: 8px;
+  .clearfix {
+    height: 96px;
+    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;
+      color: rgba(0, 0, 0, 1);
+      font-size: 24px;
+      font-weight: 500;
+      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;
+        }
+        th {
+          font-weight: 400;
+        }
+      }
+    }
+    .block {
+      height: 36px;
+      margin: 66px 29px 0 0;
+      float: right;
+      .el-pagination {
+        padding: 0;
+        button {
+          width: 36px;
+          background: #fff;
+          color: rgba(0, 0, 0, 1);
+          height: 36px;
+          font-size: 14px;
+          border: 1px solid rgba(112, 112, 112, 1);
+          border-radius: 8px;
+        }
+        ul {
+          .active {
+            background: #fff;
+            color: rgba(0, 97, 255, 1);
+            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);
+            width: 36px;
+            height: 36px;
+            font-size: 14px;
+            border: 1px solid rgba(112, 112, 112, 1);
+            border-radius: 8px;
+            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;
+              border: 1px solid rgba(0, 0, 0, 1);
+              border-radius: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .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>

admin/src/views/home/index.vue

@@ -117,13 +117,13 @@
     </div>
     <div class="home-body">
       <div class="room-floor wrapper">
-        <div class="floor" v-for="i in 5" :key="i">
+        <div class="floor" v-for="(items, i) in floorRoomDatas" :key="i">
           <div class="header-title">
-            <div class="tier">2层</div>
-            <span>/&nbsp; 共10间</span>
+            <div class="tier">{{ i + 1 }}层</div>
+            <span>/&nbsp; 共{{ items.length }}间</span>
           </div>
           <div class="main-floor">
-            <div class="room-num" v-for="item in 12" :key="item">
+            <div class="room-num" v-for="(item, ind) in items" :key="ind">
               <el-popover
                 placement="right"
                 trigger="click"
@@ -139,23 +139,25 @@
                   <div>取消</div>
                 </div>
                 <div
-                  @click="EachRoom(i, item, $event)"
-                  :class="i + '' + item == clickId ? 'cardId' : ''"
+                  @click="EachRoom(i, ind, $event)"
+                  :class="i + '' + ind == clickId ? 'cardId' : ''"
                   class="card"
-                  :id="i + '' + item"
+                  :id="i + '' + ind"
                   slot="reference"
                 >
                   <div class="title">
-                    <span>17栋1单元2层01房</span>
-                    <div class="state">已锁定</div>
+                    <span>{{ item.roomUnit }}</span>
+                    <div class="state" :style="bgState(item.state)">
+                      {{ item.state }}
+                    </div>
                   </div>
-                  <div class="teacher">张老师</div>
+                  <div class="teacher">{{ item.name }}</div>
                   <div class="num">
-                    <span>水:25吨</span>&nbsp;&nbsp;
-                    <span>电:25度</span>
+                    <span>水:{{ item.water }}吨</span>&nbsp;&nbsp;
+                    <span>电:{{ item.electricity }}度</span>
                   </div>
                   <div class="count-down">
-                    <span>退房倒计时:00:13:26</span>
+                    <span>退房倒计时:{{ item.outRoom }}</span>
                     <div class="tuifang" @click.stop="doorLock = true">
                       <IconSvg :W="21" :H="21" name="tuifang" />
                       <el-dialog
@@ -165,15 +167,17 @@
                         :before-close="lockClose"
                       >
                         <div class="text" style="margin-top: 13px">
-                          <span>门锁ID:123456789</span>
+                          <span>门锁ID:{{ item.roomLock.id }}</span>
                           <IconSvg :W="16" :H="16" name="edit" />
                         </div>
                         <div class="text">
-                          <span>门锁序列号:123456789</span>
+                          <span
+                            >门锁序列号:{{ item.roomLock.serialNumber }}</span
+                          >
                           <IconSvg :W="16" :H="16" name="edit" />
                         </div>
                         <div class="text">
-                          <span>门锁密码:123456789</span>
+                          <span>门锁密码:{{ item.roomLock.password }}</span>
 
                           <span class="password" @click="sending"
                             >下发密码</span
@@ -319,6 +323,602 @@ export default {
           ],
         },
       ],
+      floorRoomDatas: [
+        [
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25",
+            electricity: "25",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已入住",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "保留房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "空闲",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已入住",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+        ],
+        [
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已入住",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "保留房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "空闲",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已入住",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "空闲",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+        ],
+        [
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已入住",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "保留房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "空闲",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已入住",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "空闲",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+        ],
+        [
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已入住",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "保留房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "空闲",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已入住",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "空闲",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "脏房",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+          {
+            roomUnit: "17栋1单元2层01房",
+            state: "已锁定",
+            name: "张强",
+            water: "25吨",
+            electricity: "25度",
+            outRoom: "00:13:26",
+            roomLock: {
+              id: "123456789",
+              serialNumber: "123456789",
+              password: "123456789",
+            },
+          },
+        ],
+      ],
+
       defaultProps: {
         children: "children",
         label: "label",
@@ -361,10 +961,11 @@ export default {
       // 房态筛选数据
       checkAll: false,
       checkedCities: ["已入住", "空间"],
-      cities: ["已入住", "空间", "已约定", "脏房", "保留房"],
+      cities: ["已入住", "空闲", "已锁定", "脏房", "保留房"],
       isIndeterminate: true,
     };
   },
+  computed: {},
   mounted() {
     document.getElementsByClassName(
       "el-button--plain"
@@ -377,6 +978,14 @@ export default {
     )[2].children[0].innerText = ">";
   },
   methods: {
+    bgState(e) {
+      let color = ["#D3DBE6", "#296DE3", "#00BAAD", "#FF5733", "#3BB1E3"];
+      let index = this.cities.findIndex((item) => {
+        return e == item;
+      });
+      let bg = color[index];
+      return { background: bg };
+    },
     EachRoom(i, item, $event) {
       // console.log($event.currentTarget.id);
       this.clickId = $event.currentTarget.id;

admin/src/views/inform/index.vue

@@ -498,6 +498,7 @@ export default {
     document.getElementsByClassName(
       "el-pagination__jump"
     )[0].childNodes[0].nodeValue = "跳转到";
+    this.$store.state.itemPath = this.$route.path;
     this.handleCurrentChange(1);
   },
   methods: {
@@ -513,8 +514,7 @@ export default {
 
     handleCurrentChange(val) {
       this.data = this.tableData.slice((val - 1) * 8, val * 8);
-      console.log(`当前页: ${val}`);
-      console.log(this.data);
+      // console.log(`当前页: ${val}`);
     },
   },
 };

admin/src/views/login/index.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="login-container">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <div class="title-container">
+        <h3 class="title">智慧校园公寓管理端</h3>
+      </div>
+
+      <el-form-item prop="userName">
+        <span class="svg-container">
+          <div class="user"></div>
+        </span>
+        <el-input
+          v-model="loginForm.userName"
+          placeholder="用户名"
+          type="text"
+        />
+      </el-form-item>
+
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <div class="password"></div>
+        </span>
+        <el-input
+          ref="password"
+          v-model="loginForm.password"
+          :type="passwordType"
+          placeholder="密码"
+          @keyup.enter.native="handleLogin"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <div :class="passwordType === 'password' ? 'eye_close' : 'eye'"></div>
+        </span>
+      </el-form-item>
+
+      <el-button
+        :loading="loading"
+        type="primary"
+        style="width: 100%; margin-bottom: 30px"
+        @click="handleLogin"
+        >登录</el-button
+      >
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Login",
+  data() {
+    // 自定义校验规则
+    const validateUsername = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error("请输入用户名"));
+      } else {
+        callback();
+      }
+    };
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error("密码不少于6位"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      // 表格绑定数据
+      loginForm: {
+        userName: "",
+        password: "",
+      },
+      // 校验规则
+      loginRules: {
+        userName: [
+          { required: true, trigger: "blur", validator: validateUsername },
+        ],
+        password: [
+          { required: true, trigger: "blur", validator: validatePassword },
+        ],
+      },
+      // 加载中效果
+      loading: false,
+      // 密码显示隐藏控制
+      passwordType: "password",
+      redirect: undefined,
+    };
+  },
+  watch: {
+    // 监听路由地址变化
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    // 密码显示隐藏控制函数
+    showPwd() {
+      if (this.passwordType === "password") {
+        this.passwordType = "";
+      } else {
+        this.passwordType = "password";
+      }
+      // 重新渲染后使密码框聚焦
+      this.$nextTick(() => {
+        this.$refs.password.focus();
+      });
+    },
+    // 登录函数
+    handleLogin() {
+      // 校验用户名密码是否符合验证规则
+      this.$refs.loginForm.validate((valid) => {
+        // 符合验证规则
+        if (valid) {
+          this.loading = true;
+          // 从仓库调用login函数
+          // this.$store
+          //   .dispatch("user/login", this.loginForm)
+          //   .then(() => {
+          this.$router.push({ path: this.redirect || "/home" });
+          this.loading = false;
+          // })
+          // .catch(() => {
+          //   this.loading = false;
+          // });
+        }
+        // 不符合验证规则
+        else {
+          console.log("提交失败!!");
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $bg;
+  }
+}
+
+/* 重置 element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $bg;
+      height: 47px;
+      caret-color: $bg;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px #e5e5e5 inset !important;
+        -webkit-text-fill-color: $bg !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+
+.login-container {
+  width: 100vw;
+  height: 100vh;
+  min-width: 1280px;
+  min-height: 800px;
+  background: url(../../assets/images/bg.png);
+  background-size: 100% 100%;
+  overflow: hidden;
+
+  .login-form {
+    width: 520px;
+    margin-top: 310px;
+    margin-left: 1080px;
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $bg;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+    .user {
+      width: 20px;
+      height: 20px;
+      background: url(../../assets/images/user.png);
+      background-size: 100% 100%;
+    }
+    .password {
+      width: 20px;
+      height: 20px;
+      background: url(../../assets/images/password.png);
+      background-size: 100% 100%;
+    }
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 28px;
+      margin: 0px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $bg;
+    cursor: pointer;
+    user-select: none;
+    .eye_close {
+      margin-top: 7px;
+      width: 20px;
+      height: 20px;
+      background: url(../../assets/images/eye_close.png);
+      background-size: 100% 100%;
+    }
+    .eye {
+      margin-top: 7px;
+      width: 20px;
+      height: 20px;
+      background: url(../../assets/images/eye.png);
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

admin/src/views/order/index.vue

@@ -63,6 +63,7 @@
         <div class="inform-table">
           <el-table
             :data="data"
+            @selection-change="handleSelectionChange"
             max-height="576"
             height="576"
             style="width: 1550px"
@@ -337,11 +338,6 @@
             }"
           >
             <el-table-column
-              type="selection"
-              width="60"
-              align="center"
-            ></el-table-column>
-            <el-table-column
               prop="orderNum"
               width="120"
               label="订单号"
@@ -406,184 +402,85 @@
               label="支付时间"
             >
             </el-table-column>
-            <!-- <el-table-column prop="address" align="center" label="操作">
-              <template slot-scope="scope">
-                <span
-                  @click="handleEdit(scope.$index, scope.row)"
-                  class="operate"
-                >
-                  详情
-                </span>
-                <el-dialog
-                  title="订单详情"
-                  :visible.sync="dialogVisible"
-                  width="30%"
-                  :before-close="handleClose"
-                >
-                  <div class="userinfo">用户信息</div>
-                  <div class="info">
-                    <div class="user">
-                      <div class="name">姓名</div>
-                      <el-input value="刘老师"></el-input>
-                    </div>
-                    <div class="user">
-                      <div class="name">联系方式</div>
-                      <el-input value="13234564"></el-input>
-                    </div>
-                  </div>
-                  <div class="info">
-                    <div class="user">
-                      <div class="name">订单号</div>
-                      <el-input value="261691612"></el-input>
-                    </div>
-                    <div class="user">
-                      <div class="name">预付款金额（元）</div>
-                      <el-input value="20.00"></el-input>
-                    </div>
-                  </div>
-                  <div class="info">
-                    <div class="user">
-                      <div class="name">入住时间</div>
-                      <el-input value="2022-07-26"></el-input>
-                    </div>
-                    <div class="user">
-                      <div class="name">离住时间</div>
-                      <el-input value="2022-07-26"></el-input>
-                    </div>
-                  </div>
-                  <div class="info">
-                    <div class="user">
-                      <div class="name">入住天数</div>
-                      <el-input value="1"></el-input>
-                    </div>
-                    <div class="user">
-                      <div class="name">支付时间</div>
-                      <el-input value="2022-07-27   15:15:15"></el-input>
-                    </div>
-                  </div>
-                  <div class="rate">水费明细</div>
-                  <div class="water">
-                    表计：101 楼层：12栋1单元2层01 抄表时间：2022-07-27 15:15:15
-                  </div>
-                  <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)',
-                    }"
-                  >
-                    <el-table-column
-                      prop="start"
-                      width="100"
-                      label="始码"
-                      align="center"
-                    >
-                    </el-table-column>
-
-                    <el-table-column
-                      prop="end"
-                      width="100"
-                      align="center"
-                      label="终码"
-                    >
-                    </el-table-column>
-
-                    <el-table-column
-                      prop="flow"
-                      align="center"
-                      label="水量（吨）"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                      prop="pirce"
-                      align="center"
-                      label="水价（元）"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                      prop="subsidy"
-                      align="center"
-                      label="补助量（吨）"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                      prop="production"
-                      align="center"
-                      label="产生水费（元）"
-                    >
-                    </el-table-column>
-                  </el-table>
-
-                  <div class="rate">电费明细</div>
-                  <div class="water">
-                    表计：101 楼层：12栋1单元2层01 抄表时间：2022-07-27 15:15:15
-                  </div>
-                  <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)',
-                    }"
-                  >
-                    <el-table-column
-                      prop="start"
-                      width="100"
-                      label="始码"
-                      align="center"
-                    >
-                    </el-table-column>
-
-                    <el-table-column
-                      prop="end"
-                      width="100"
-                      align="center"
-                      label="终码"
-                    >
-                    </el-table-column>
+          </el-table>
+          <el-table
+            :data="selectionTable"
+            max-height="576"
+            height="576"
+            style="width: 1550px"
+            stripe
+            class="selectTable"
+            :cell-style="rowbg"
+            :header-cell-style="{
+              color: ' rgba(0, 0, 0, 1)',
+              background: 'rgba(240, 243, 247, 1)',
+            }"
+          >
+            <el-table-column
+              prop="orderNum"
+              width="120"
+              label="订单号"
+              align="center"
+            >
+            </el-table-column>
 
-                    <el-table-column
-                      prop="flow"
-                      align="center"
-                      label="电量（度）"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                      prop="pirce"
-                      align="center"
-                      label="电价（元）"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                      prop="subsidy"
-                      align="center"
-                      label="补助量（度）"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                      prop="production"
-                      align="center"
-                      label="产生水费（元）"
-                    >
-                    </el-table-column>
-                  </el-table>
-                </el-dialog>
+            <el-table-column
+              prop="state"
+              width="100"
+              align="center"
+              label="状态"
+            >
+            </el-table-column>
 
-                <span
-                  @click="handleDelete(scope.$index, scope.row)"
-                  class="operate"
-                >
-                  删除
-                </span>
-              </template>
-            </el-table-column> -->
+            <el-table-column
+              prop="room"
+              width="160"
+              align="center"
+              label="房间"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="electricity"
+              align="center"
+              width="130"
+              label="电费（元）"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="water"
+              width="130"
+              align="center"
+              label="水费（元）"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="imprest"
+              align="center"
+              width="150"
+              label="收预付款（元）"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="refund"
+              width="150"
+              align="center"
+              label="退预付款（元）"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="create"
+              width="180"
+              align="center"
+              label="创建时间"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="pay"
+              width="180"
+              align="center"
+              label="支付时间"
+            >
+            </el-table-column>
           </el-table>
         </div>
         <div class="block">
@@ -615,6 +512,7 @@ export default {
       data: [],
       // 总数据
       Tdata: [],
+      // 查询出来的总数据
       inquireTable: [],
       // 显示的总数据
       tableData: [
@@ -626,8 +524,8 @@ export default {
           water: "0.00",
           imprest: "20.00",
           refund: "20.00",
-          create: "2012.07.02 08:50:50",
-          pay: "2012.07.02 08:50:50",
+          create: "2013.07.02 08:50:50",
+          pay: "2013.07.02 08:50:50",
         },
         {
           orderNum: "116161656",
@@ -637,12 +535,45 @@ export default {
           water: "0.00",
           imprest: "20.00",
           refund: "20.00",
-          create: "2012.07.02 08:50:50",
-          pay: "2012.07.02 08:50:50",
+          create: "2014.07.02 08:50:50",
+          pay: "2014.07.02 08:50:50",
         },
         {
           orderNum: "116161656",
-          state: "已入住",
+          state: "空房",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2015.07.02 08:50:50",
+          pay: "2015.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "已锁定",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2016.07.02 08:50:50",
+          pay: "2016.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "脏房",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2014.07.02 08:50:50",
+          pay: "2014.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "脏房",
           room: "17栋1单元2层04房",
           electricity: "2.09",
           water: "0.00",
@@ -692,8 +623,8 @@ export default {
           water: "0.00",
           imprest: "20.00",
           refund: "20.00",
-          create: "2018.07.02 08:50:50",
-          pay: "2018.07.02 08:50:50",
+          create: "2012.07.02 08:50:50",
+          pay: "2012.07.02 08:50:50",
         },
         {
           orderNum: "616161656",
@@ -703,8 +634,8 @@ export default {
           water: "0.00",
           imprest: "20.00",
           refund: "20.00",
-          create: "2000.07.02 08:50:50",
-          pay: "2000.07.02 08:50:50",
+          create: "2013.07.02 08:50:50",
+          pay: "2013.07.02 08:50:50",
         },
         {
           orderNum: "716161656",
@@ -751,6 +682,8 @@ export default {
           pay: "2022.07.02 08:50:50",
         },
       ],
+      // 多选框按钮勾选的数据
+      selectionTable: [],
 
       options: [
         {
@@ -803,10 +736,10 @@ export default {
   },
   methods: {
     // 导出表格
-    exportExcel() {
+    excel(id) {
       let xlsxParam = { raw: true };
       /* generate workbook object from table */
-      let wb = XLSX.utils.table_to_book(document.querySelector(".execlTable"));
+      let wb = XLSX.utils.table_to_book(document.querySelector(id));
       /* get binary string as output */
       let wbout = XLSX.write(wb, {
         bookType: "xlsx",
@@ -823,6 +756,15 @@ export default {
       }
       return wbout;
     },
+    exportExcel() {
+      let selectId = ".selectTable";
+      let execlTable = ".execlTable";
+      if (this.selectionTable.length > 0) {
+        this.excel(selectId);
+      } else {
+        this.excel(execlTable);
+      }
+    },
 
     allRead($event, index) {
       this.className = this.className.map((item) => (item = ""));
@@ -887,7 +829,7 @@ export default {
             return item.orderNum;
           }
         });
-        this.inquireTable = JSON.parse(JSON.stringify(quireData));
+        this.inquireTable = quireData;
         this.tableData = quireData;
       }
       this.currentPage = 1;
@@ -904,37 +846,68 @@ export default {
     // 支付时间
     timePay() {
       // console.log(this.payTime);
-      let reg = new RegExp("-", "g");
-      let startTime = new Date(this.payTime[0].replace(reg, "/"));
-      let endTime = new Date(this.payTime[1].replace(reg, "/"));
-      this.tableData = this.Tdata.filter((item) => {
-        let nowTime = new Date(item.pay.substr(0, 10).replace(reg, "/"));
-        return nowTime >= startTime && nowTime <= endTime;
-      });
-      this.currentPage = 1;
-      this.handleCurrentChange(this.currentPage);
+      if (this.value == "") {
+        this.state = "";
+        let reg = new RegExp("-", "g");
+        let startTime = new Date(this.payTime[0].replace(reg, "/"));
+        let endTime = new Date(this.payTime[1].replace(reg, "/"));
+        const quireData = this.Tdata.filter((item) => {
+          let nowTime = new Date(item.pay.substr(0, 10).replace(reg, "/"));
+          return nowTime >= startTime && nowTime <= endTime;
+        });
+
+        this.inquireTable = quireData;
+        this.tableData = quireData;
+        this.currentPage = 1;
+        this.handleCurrentChange(this.currentPage);
+      } else {
+        this.state = "";
+        let reg = new RegExp("-", "g");
+        let startTime = new Date(this.payTime[0].replace(reg, "/"));
+        let endTime = new Date(this.payTime[1].replace(reg, "/"));
+
+        const quireData = this.inquireTable.filter((item) => {
+          let nowTime = new Date(item.pay.substr(0, 10).replace(reg, "/"));
+          return nowTime >= startTime && nowTime <= endTime;
+        });
+        this.inquireTable = quireData;
+        this.tableData = quireData;
+        this.currentPage = 1;
+        this.handleCurrentChange(this.currentPage);
+      }
     },
     // 创建时间
     timeCreation() {
+      this.state = "";
       // console.log(this.creationTime);
       let reg = new RegExp("-", "g");
       let startTime = new Date(this.creationTime[0].replace(reg, "/"));
       let endTime = new Date(this.creationTime[1].replace(reg, "/"));
-      this.tableData = this.Tdata.filter((item) => {
+      const quireData = this.Tdata.filter((item) => {
         let nowTime = new Date(item.create.substr(0, 10).replace(reg, "/"));
         return nowTime >= startTime && nowTime <= endTime;
       });
+      this.inquireTable = quireData;
+      this.tableData = quireData;
       this.currentPage = 1;
       this.handleCurrentChange(this.currentPage);
     },
 
     // 挑选状态
     stateSel() {
-      if (this.value == false) {
-        console.log(1111);
+      console.log(this.payTime.length > 0, this.creationTime.length > 0);
+      if (
+        this.value == false &&
+        this.payTime.length == 0 &&
+        this.creationTime.length == 0
+      ) {
         this.tableData = this.Tdata.filter((item) => {
           return item.state == this.state;
         });
+      } else if (this.payTime.length > 0 || this.creationTime.length > 0) {
+        this.tableData = this.inquireTable.filter((item) => {
+          return item.state == this.state;
+        });
       } else {
         console.log(this.inquireTable);
         this.tableData = this.inquireTable.filter((item) => {
@@ -948,6 +921,12 @@ export default {
       this.handleCurrentChange(this.currentPage);
       console.log(this.state);
     },
+
+    // 多选框按钮操作
+    handleSelectionChange(selection) {
+      // console.log(selection);
+      this.selectionTable = selection;
+    },
   },
 };
 </script>
@@ -1026,7 +1005,8 @@ export default {
       }
     }
     .inform-table {
-      .execlTable {
+      .execlTable,
+      .selectTable {
         display: none;
       }
       .el-table {

admin/src/views/stat/index.vue

@@ -1,13 +1,292 @@
 <template>
-    <div>home</div>
+  <div class="stat">
+    <el-card class="box-card" style="width: 1612px; height: 950px">
+      <!-- 标题区域 -->
+      <div slot="header" class="clearfix">
+        <div class="stat-title">统计报表</div>
+      </div>
+
+      <!-- 主体内容区域 -->
+      <div class="stat-body">
+        <!-- 筛选条件区域 -->
+        <div class="state">
+          <div class="left">
+            <el-col :span="20">
+              <el-date-picker
+                v-model="searchValue"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                style="width: 260px"
+                value-format="yyyy-MM-dd"
+                @change="changeTime"
+              >
+              </el-date-picker>
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary">查询</el-button>
+            </el-col>
+          </div>
+          <div class="right">
+            <el-button type="primary" @click="handleExport">导出明细</el-button>
+          </div>
+        </div>
+        <!-- 表格区域 -->
+        <div class="stat-table">
+          <el-table
+            :data="tableData"
+            max-height="576"
+            height="576"
+            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="time" align="center" label="时间">
+            </el-table-column>
+
+            <el-table-column prop="water" align="center" label="水费（元）">
+            </el-table-column>
+
+            <el-table-column
+              prop="electricity"
+              align="center"
+              label="电费（元）"
+            >
+            </el-table-column>
+
+            <el-table-column
+              prop="refund"
+              align="center"
+              label="退预付款（元）"
+            >
+            </el-table-column>
+
+            <el-table-column prop="count" align="center" label="合计（元）">
+            </el-table-column>
+          </el-table>
+        </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>
+        </div>
+      </div>
+    </el-card>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'Home'
-
-}
+  name: "stat",
+  data() {
+    return {
+      // 表格数据
+      tableData: [
+        {
+          time: "2022-07-20",
+          water: "50.00",
+          electricity: "50.00",
+          refund: "50.00",
+          count: "260.00",
+        },
+        {
+          time: "2022-08-20",
+          water: "60.00",
+          electricity: "66.00",
+          refund: "88.00",
+          count: "666.00",
+        },
+        {
+          time: "总计",
+          water: "60.00",
+          electricity: "66.00",
+          refund: "88.00",
+          count: "666.00",
+        },
+      ],
+      //  时间搜索框绑定数据
+      searchValue: "",
+      //   分页器当前页
+      currentPage: 1,
+      //   每页条数
+      pageSize: 8,
+      //   总条数
+      total: 50,
+    };
+  },
+  methods: {
+    // 时间搜索框数值改变触发回调
+    changeTime(val) {
+      console.log(val);
+    },
+    // 导出明细按钮回调
+    handleExport() {
+      this.$confirm("确定导出吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message.success("导出成功");
+        })
+        .catch(() => {
+          this.$message.info("已取消");
+        });
+    },
+    // 分页器换页回调
+    handleCurrentChange(value) {
+      console.log(value);
+      this.currentPage = value;
+    },
+    // 表格样式设置回调
+    rowbg(row) {
+      if (row.rowIndex % 2 != 0) {
+        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
+      }
+      if (row.rowIndex == this.tableData.length - 1) {
+        return { fontWeight: "bold" };
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.stat /deep/ .el-card {
+  width: 1612px;
+  height: 950px;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+  border-radius: 8px;
+  .clearfix {
+    height: 96px;
+    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;
+      color: rgba(0, 0, 0, 1);
+      font-size: 24px;
+      font-weight: 500;
+      margin-left: 33px;
+    }
+  }
+  .stat-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);
+        }
+      }
+    }
+    .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;
+        }
+        th {
+          font-weight: 400;
+        }
+      }
+    }
+    .block {
+      height: 36px;
+      margin: 66px 29px 0 0;
+      float: right;
+      .el-pagination {
+        padding: 0;
+        button {
+          width: 36px;
+          background: #fff;
+          color: rgba(0, 0, 0, 1);
+          height: 36px;
+          font-size: 14px;
+          border: 1px solid rgba(112, 112, 112, 1);
+          border-radius: 8px;
+        }
+        ul {
+          .active {
+            background: #fff;
+            color: rgba(0, 97, 255, 1);
+            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);
+            width: 36px;
+            height: 36px;
+            font-size: 14px;
+            border: 1px solid rgba(112, 112, 112, 1);
+            border-radius: 8px;
+            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;
+              border: 1px solid rgba(0, 0, 0, 1);
+              border-radius: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.box-card {
+  /deep/ .el-card__header {
+    padding: 0;
+  }
+  /deep/ .el-card__body {
+    padding: 0;
+  }
+}
 </style>

admin/src/views/system/index.vue

@@ -1,13 +1,249 @@
 <template>
-    <div>home</div>
+  <div class="stat">
+    <el-card class="box-card" style="width: 1612px; height: 950px">
+      <!-- 标题区域 -->
+      <div slot="header" class="clearfix">
+        <div class="stat-title">系统设置</div>
+      </div>
+
+      <!-- 主体内容区域 -->
+      <div class="stat-body">
+        <!-- 预付款区域 -->
+        <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>
+          元
+        </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
+          >天
+        </div>
+
+        <!-- 补助区域 -->
+        <div>
+          每人补助水量为<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="
+              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
+          >度
+        </div>
+
+        <!-- 通知人区域 -->
+        <div>
+          设置清扫/查房通知人<el-input
+            class="input-new-tag"
+            v-if="informShow"
+            v-model="inputValue_inform"
+            v-fo
+            size="small"
+            @blur="handleInputConfirm('informShow', 'inputValue_inform')"
+          >
+          </el-input>
+          <el-button
+            v-else
+            class="button-new-tag"
+            size="small"
+            @click="showInput('informShow', 'inputValue_inform')"
+          >
+            {{ inputValue_inform }}
+          </el-button>
+        </div>
+
+        <!-- 退房区域 -->
+        <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
+          >分钟，断水断电
+        </div>
+      </div>
+    </el-card>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'Home'
+  name: "system",
+  data() {
+    return {
+      // 预付款输入框按钮框切换控制
+      imprestShow: false,
+      // 预付款绑定数据
+      inputValue_imprest: 20,
 
-}
+      // 预定天数输入框按钮框切换控制
+      reserveShow: false,
+      // 预定天数绑定数据
+      inputValue_reserve: 10,
+
+      // 补助区域水量输入框按钮框切换控制
+      subsidyWaterShow: false,
+      // 补助区域水量绑定数据
+      inputValue_subsidyWater: 5,
+
+      // 补助区域电量输入框按钮框切换控制
+      subsidyElectricityShow: false,
+      // 补助区域电量绑定数据
+      inputValue_subsidyElectricity: 9,
+
+      // 通知人输入框按钮框切换控制
+      informShow: false,
+      // 通知人绑定数据
+      inputValue_inform: 7,
+
+      // 退房输入框按钮框切换控制
+      refundShow: false,
+      // 退房绑定数据
+      inputValue_refund: 8,
+    };
+  },
+  methods: {
+    // 点击按钮 切换输入框 并聚焦
+    showInput(show, value) {
+      this[show] = true;
+      this[value] = null;
+    },
+    // 失去焦点 切换回按钮 并更新数据
+    handleInputConfirm(show, value) {
+      this[show] = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.stat /deep/ .el-card {
+  width: 1612px;
+  height: 950px;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+  border-radius: 8px;
+  .clearfix {
+    height: 96px;
+    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;
+      color: rgba(0, 0, 0, 1);
+      font-size: 24px;
+      font-weight: 500;
+      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;
+        height: 32px;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+.box-card {
+  /deep/ .el-card__header {
+    padding: 0;
+  }
+  /deep/ .el-card__body {
+    padding: 0;
+  }
+}
 </style>