可变状态房态图

下面是我弄好的房态图示例;

房态图具有几个颜色用来区分房间的，
绿色表示预定房间，浅蓝色表示空净房间
如果是入住了客户，男性会有男性图表表示，女性会有女性图表表示，
如果是多人，图表就会显示为多人，名字也会在图表下面，如果是多人，
名字过于长，会截取一部分显示名字，剩余的名字，在鼠标放上去之后，会有提示，
提示可以查看剩余顾客的名字，如下图：

入住房间的提示如上图，会显示房号，入住时间，入住的顾客；
如果房间是空房，显示的提示跟入住的会有区别，如下图：

空房状态，会显示房号、属性、级别、价格、备注。这些房间的信息
另外，如果是维修的，未打扫的，提示也会有所不同，

房间也具有搜索功能，搜索使用的是模糊搜索，根据房间名称和价格搜索，
右侧也会实时显示各种房间状态的数量，如下图所示；

点击表格的房态图，会弹出下面，比如我们点击101号房间：

如果是以前来过的顾客，信息基本不需要再填写，直接点击以往顾客，信息就备好了。
只是需要填写价格即可，房间可以预定和直接入住，入住会变成蓝色，预定会变成绿色，维修会变成红色。