【开发实践】vue2 +mybatis + MySQL 实现房间状态图

        在许多酒店项目开发中，经常离不开房态图，通过房态图能快速预览信息，或者进行房间的相关业务，如何快速地制造一个好看的房态图呢？！对于有房态图需求的，建议收藏本文，可能会有一点点的小帮助！！

一、效果预览

图标库采用fa图标库，图标库地址：FontAwesome 4.3.0

​

二、代码实现

1、数据库表

​

后端只需要传输给前端房间信息数组的json数据。 

2、房态图前端<div> css

自定义div标签，颜色自己确定，笔者房间设计5个状态，自定义5个房间状态div标签。

 .room-free {
            width: 110px;
            height: 70px;
            border: 1px solid #73d69b;
            border-radius: 5px;
            background: #73d69b;
            float: left;
            margin: 2px;
            text-align: center;
            color: white;
            cursor: pointer;
        }

        .room-occupy {
            width: 110px;
            height: 70px;
            border: 1px solid #f3d17a;
            border-radius: 5px;
            background: #f3d17a;
            float: left;
            margin: 2px;
            text-align: center;
            color: white;
            cursor: pointer;
        }

        .room-bookAhead {
            width: 110px;
            height: 70px;
            border: 1px solid #29b6f6;
            border-radius: 5px;
            background: #29b6f6;
            float: left;
            margin: 2px;
            text-align: center;
            color: white;
            cursor: pointer;
        }

        .room-repair {
            width: 110px;
            height: 70px;
            border: 1px solid #B5B5B5;
            border-radius: 5px;
            background: #B5B5B5;
            float: left;
            margin: 2px;
            text-align: center;
            color: white;
            cursor: pointer;
        }

        .room-clearing {
            width: 110px;
            height: 70px;
            border: 1px solid #87CEFA;
            border-radius: 5px;
            background: #87CEFA;
            float: left;
            margin: 2px;
            text-align: center;
            color: white;
            cursor: pointer;
        }

3、初始化方法

methods:{
getAllRoom: function () {
    axios({
        method: "get",
        url: "room/queryAll",
    }).then(data => {
        var data = data.data;
        this.RoomList = data;
        var html = "";
        // this.allRoomId = data.data;
        for (var i = 0; i < data.length; i++) {
            this.room.sum += 1;
            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>&nbsp;' + data[i].roomId + '</div>' +
                    '<div style="color: white">' + data[i].roomType + '</div>' +
                    '</li>';
                this.room.bSum += 1;
            } else if (data[i].roomState == "using") {
                html += '<li id="myroom' + i + '" onclick=showMyModal("' + data[i].roomId + '") ' +
                    'onmouseover=showdetail("' + i + '","' + 2 + '") onmouseleave=clearData("' + i + '","' + 2 + '") class="room-occupy">\n' +
                    '<div style="color: white"><i class="fa fa-user-md" style="color: #50c1f4"></i>&nbsp;' + data[i].roomId + '</div>' +
                    '<div style="color: white">' + data[i].roomType + '</div>' +
                    '</li>';
                this.room.uSum += 1;
            } else if (data[i].roomState == "free" && data[i].bookAhead == "false") {
                html += '<li id="myroom' + i + '" onclick=showMyModal("' + data[i].roomId + '") ' +
                    'onmouseover=showdetail("' + i + '","' + 3 + '") onmouseleave=clearData("' + i + '","' + 3 + '") class="room-free">\n' +
                    '<div style="color: white"><i class="fa fa-home" style="color: darkorange"></i>&nbsp;' + data[i].roomId + '</div>' +
                    '<div style="color: white">' + data[i].roomType + '</div>' +
                    '</li>';
                this.room.fSum += 1;
            } else if (data[i].roomState == "repair") {
                html += '<li id="myroom' + i + '" onclick=showMyModal("' + data[i].roomId + '") ' +
                    'onmouseover=showdetail("' + i + '","' + 4 + '") onmouseleave=clearData("' + i + '","' + 4 + '") class="room-repair">\n' +
                    '<div style="color: white"><i class="fa fa-minus-circle" style="color: orangered"></i>&nbsp;' + data[i].roomId + '</div>' +
                    '<div style="color: white">' + data[i].roomType + '</div>' +
                    '</li>';
                this.room.rSum += 1;
            } else if (data[i].roomState == "clearing") {
                html += '<li id="myroom' + i + '" onclick=showMyModal("' + data[i].roomId + '") ' +
                    'onmouseover=showdetail("' + i + '","' + 5 + '") onmouseleave=clearData("' + i + '","' + 5 + '") class="room-clearing">\n' +
                    '<div style="color: white"><i class="fa fa-yelp" style="color: deepskyblue"></i>&nbsp;' + data[i].roomId + '</div>' +
                    '<div style="color: white">' + data[i].roomType + '</div>' +
                    '</li>';
                this.room.cSum += 1;
            }
        }
        this.allRoom = html;
    }).catch(function (error) {
        console.log(error);
    })
}
}

根据vue的生命周期，在created方法中调用getAllRooms方法，完成初始化房态图。

4、监听鼠标悬停事件

onmouseover事件：

        onmouseover是进入到dom元素中时触发的事件,而onmouseout是移出dom元素时触发的事件.

【鼠标事件扩展 】

 【前端js方法】 

需要利用onmouseover事件绑定，达到鼠标移动到某区域，触发某个事件的效果

    function showdetail(index, state) {
        vm.RoomDetail.roomType = vm.RoomList[index].roomType;
        vm.RoomDetail.roomLiveIn = vm.RoomList[index].roomLiveIn + " 人";
        vm.RoomDetail.roomSize = vm.RoomList[index].roomSize + " 平方米";
        vm.RoomDetail.roomPrice = vm.RoomList[index].roomPrice + " 元/天";
        vm.RoomDetail.roomVolume = vm.RoomList[index].roomVolume + " 人/间";
        var name = '#myroom' + index;
        if (state == "1") {
            $(name).css("background-color", "#6495ED");
        } else if (state == "2") {
            $(name).css("background-color", "#FFA500");
        } else if (state == "3") {
            $(name).css("background-color", "#1cc09f");
        } else if (state == "4") {
            $(name).css("background-color", "#708090");
        } else {
            $(name).css("background-color", "#5dc2f1");
        }
    }

通过监听鼠标事件，鼠标移动到某一模块时，自动查询对应的房间参数信息。

【效果预览】 

【注意点】

这里需要另外自定义五个不同的颜色，为了区分鼠标悬停处的高亮显示，建议颜色比原色加深，对比度明显。

资源获取：vue2+Html+css实现房间状态图，酒店前台入住管理系统的设计与开发资源-CSDN文库

---

  如果文章对你有用的话，三连支持一下吧！！！