vue2 Html css 实现房间状态图，酒店前台入住管理系统的设计与开发

一、需求分析

酒店管理系统是指一种可以提高酒店管理效率的软件或平台。其面向酒店前台工作人员和酒店管理员，界面美观大方、操作方便。系统强化以客源为中心的信息完整性、长久性、可操作性，突出以预订、房源、房价等对营销具有影响力的信息处理。

系统功能

本酒店管理系统支持客房预订、前台接待、前台收银、客房管理、财务查询、员工管理和日志查询等功能。

基本要求

房间管理(房间号、房间类型、房间价格、房间状态和入住情况等)
订房（为客人预定房间）
客人入住（入住编号、入住天数、入住时间、房间编号等）
客人登记（登记客人具体信息，如姓名，电话号码，身份证号码等）
查询房间（按房间号，按房间状态等）
退房（退房时间、房间编号、超时情况等）
房间日志（记录房间的历史情况）
账单（记录客人消费的账目）
员工管理
商品销售

二、功能模块

三、数据库设计

1、bills 账单表

名称	数据类型	长度	注释
pay_id	int	10	账单ID
g_id	int	10	商品外键
pay_num	int	10	购买数量
pay_cost	decimal	5	条目花费
pay_date	date	0	支付时间
in_id	int	10	参考intake外键

2、cancel退房表

名称	数据类型	长度	注释
c_id	int	10	退房订单编号
in_gid	int	10	入住客人编号
in_date	date	0	登记入住时间
day_num	int	10	入住天数
out_date	date	0	真正退房时间
r_id	varchar	10	房间编号

3、employees员工表

名称	数据类型	长度	注释
e_id	int	10	员工编号
e_name	varchar	10	员工姓名
e_type	varchar	20	员工类型
e_sex	enum	0	性别
e_age	int	10	年龄
e_phone	varchar	11	手机号码

4、商品数量goods

名称	数据类型	长度	注释
g_id	int	10	商品ID
g_name	varchar	20	商品名字
g_type	varchar	10	商品类型
g_price	double	10	商品价格
g_num	int	10	商品数量

5、客人表guests

名称	数据类型	长度	注释
in_gid	int	10	客人编号
g_name	varchar	10	客人姓名
g_age	int	3	客人年龄
g_sex	enum	0	客人性别
g_IDcard	varchar	18	客人身份证号码
g_type	varchar	10	客人类型级别
g_phone	varchar	11	客人电话号码
g_signtime	date	0	注册登记时间

6、入住表intake

名称	数据类型	长度	注释
in_id	int	10	入住编号
in_gid	int	10	发起订单客人编号
in_date	date	0	登记入住时间
day_num	int	10	入住天数
r_id	varchar	10	房间编号
e_id	int	10	员工编号
cost	double	10	入住订单价格
state	enum	0	订单状态
deposit	double	10	入住押金

7、购买表purchase

名称	数据类型	长度	注释
pur_id	int	10	进货ID
pur_date	date	0	进货日期
pur_cost	double	10	进货价格
pur_num	int	10	进货数量
g_id	int	10	商品ID外键

8、房间表room

名称	数据类型	长度	注释
r_id	varchar	10	房间ID
r_type	varchar	10	房间类型
r_price	double	20	房间价格/天
r_state	enum	0	房间状态{'using','free'}
book_ahead	enum	0	房间是否被超前预订
r_volume	int	10	房间满额人数
r_livein	int	10	房间现住人数
r_size	int	10	房间面积
r_pic	varchar	100	图片url

9、房间日志room_log

名称	数据类型	长度	注释
l_id	int	10	日志记录编号
r_id	varchar	10	日志记录房间号
l_time	datetime	0	日志记录时间
l_content	varchar	255	日志记录内容
e_id	int	10	参考外键

10、占据表takeups

名称	数据类型	长度	注释
r_id	varchar	10	房间编号
takeup_date	date	0	占据房间从此时间至该日的最后一秒（即xx日 23:59:59）
in_id	int	10	住房订单编号

11、用户表user

名称	数据类型	长度
userName	int	10
password	int	10
type	enum	0

四、功能分析

4.1登录校验

成功登录的用户，信息保存到session，每次获取数据的时候，保存到Threadlocal保证线程安全，由threadlocal挂载到每个线程，线程内共享类似局部变量，线程间隔离。

【业务逻辑层】部分逻辑判断

        if (userDao.selectUserName(userName) == null) {
            result = "0";
            return result;
        } else if (!userDao.selectUserPassword(userName).equals(userPassword)) {
            //用户存在，但是密码错误
            result = "1";
            return result;
        } else if (userDao.selectUserPassword(userName).equals(userPassword)) {
            //用户存在，且密码正确
            User me = this.selectUser(userName);
            //将User对象存储入session
            session.setAttribute("user",me);
            result = "2";
            return result;
        }

对于未登录的用户，配置mvc拦截器，若获取到的当前的用户为空，则未登录，返回状态码401;如果已经登录，就放行，并且将用户信息存储到Threadlocal，便于每次获取登录用户数据数据。拦截器原理图如下所示，外层拦截用户登录，登录校验，内层拦截需要管理员才能发起的请求，例如权限设置。

【拦截器部分代码】

        HttpSession session=request.getSession();
        //获取session中的用户
        Object user=session.getAttribute("user");
//        System.err.println("当前用户："+user);
        if (user == null) {
            // 不存在,返回状态码401，同时拦截请求
            response.setStatus(401);
            return false;
        }
        // 如果存在，保存用户信息到ThreadLocal
        UserHolder.saveRooter((User) user);
        return true;

4.2入住住房

首先，先说说该部分数据库的设计，每入住客人都会占用房间一段时间，在后续的开发中，可能需要查询到用户的入住信息。所以换个思路，直接让每个订单占据一段时间，订单中自然就包含了用户信息。

对于占据的是时间段，举个例子，某位用户今天入住，入住两天，自然而然，他应该占据了房间的时间端,今天、明天、后天、这三天、所以我只需要将这三天的数据以及对应的订单号插入到数据库中就行了。一旦有新的用户进来，选择了相同房间，而且是相同的时间段，这时候数据库的对应的时间段，就已经被占用了，所以无法订房。

在用户选择入住起始时间以后，查询从起始时间往后的15天内，该房间的入住情况。但是注意的是一定是连续时间段，例如今日起始，但是明日被占用，那可选的入住天数就为0天。查询15天的sql语句如下图所示：

由后端再遍历出可选天数：

if (takeUps.size() == 0) {
    //如果集合为空直接返回结果集
    for (int i = 1; i <= 15; i++) {
        Map<String, String> day = new HashMap<String, String>();
        day.put("value", i + "");
        selectResults.add(day);
    }
} else {
    /*遍历takeUp集合并，将其装换为结果集*/
    for (int i = 1; i <= 15; i++) {
        calendar.add(Calendar.DATE, 1);//下一天
        for (TakeUps t : takeUps) {
            if (dateFormat.format(t.getTakeUpDate()).equals(dateFormat.format(newTakeUpdate))
                    || dateFormat.format(t.getTakeUpDate()).equals(dateFormat.format(calendar.getTime()))) {
                i = 16;//日期被占用了，时间段不连续，结束循环
                break;
            } else {
                Map<String, String> valid = new HashMap<String, String>();
                valid.put("value", i + "");
                selectResults.add(valid);
                break;
            }
        }
    }
}

4.3、订房限制

每一个订单都应该有一个发起人，我们的设计是每个发起人不能有其他的进行中的订单，不同时间段也不行。怎样获取已经订房的客人，定义一个视图，占据时间表、入住表、客人表多表内连接，通过该视图就清楚哪一个客人已经有订房订单了。

房间状态

重要的状态两个：空闲、使用中

用户新增入住订单，就得插入对应的占据时间段，同时进行如下判断。

If 占据的时间段包含当前时间，就得让房间的状态更新为“使用中……”；同理在用户退房的时候，也应该更新包含当前时间段的对应房间的状态，更新其状态为“空闲中”。具体使设计了一个函数，方便使用。

但是更新状态还是会出现问题，如下图所示：

日期到达第二天，房间状态需要作出改变，即设置更新为“使用中”，对此，设计事件解决问题，如下所示：

判断出占用日期是当前时间的房间，更新其房间状态为使用中。

4.4、房态图

自定义<div>,设置颜色样式

后端查询所有房间的数据返回给前端，前端遍历，动态拼接数据，绑定对应的点击事件。

if (data[i].roomState == "free" && data[i].bookAhead == "true") {
    html += '<li id="myroom' + i + '" onclick=showMyModal("' + data[i].roomId + '") ' +
        'onmouseover=showdetail("' + i + '","' + 1 + '") onmouseleave=clearData("' + i + '","' + 1 + '") class="room-bookAhead">\n' +
        '<div style="color: white"><i class="fa fa-calendar" style="color: #e55957"></i> ' + data[i].roomId + '</div>' +
        '<div style="color: white">' + data[i].roomType + '</div>' +
        '</li>';
    this.room.bSum += 1;
} else if (data[i].roomState == "using") {

……

}……

【效果图展示】