一种基于Web的图形化办公用房管理系统及方法技术方案

本发明专利技术公开了一种基于Web的图形化办公用房管理系统，该系统能够图形化展示房屋的结构(2D/3D)、面积、人员、单位等信息，其特征在于：该系统还包括：工具栏、画布、信息窗口、图例、3D展示等，所述工具栏包括移动、绘制实线、绘制虚线、绘制矩形、添加文字、添加门、添加楼梯、添加电梯、复制、粘贴、上传附件等功能，本发明专利技术还包括一种基于Web的图形化办公用房管理方法，实现了党政机关及企事业单位办公用房的图形化管理，对于办公用房的结构、使用类型、单位、人员、类型、备案等数据实现了可视化编辑保存，解决了原有办公用房管理的诸多不足，简化了办公用房的管理，能够迅速准确地获取各种办公用房的各项数据，节省了人力、资源与时间。

【技术实现步骤摘要】
一种基于Web的图形化办公用房管理系统及方法
本专利技术涉及党政机关及企事业单位办公用房管理
，具体涉及一种基于Web的图形化办公用房管理系统及方法。
技术介绍
近年来，各党政机关及企事业单位响应筹建办公用房管理系统，但绝大部分党政机关及企事业单位仅针对房屋的数据做监控，没有从房型示意图上与数据相关联，缺少图形与数据相结合的方式清晰明了的显示房间的面积、使用类型、使用情况等信息，用户不便了解楼层的房型图。
技术实现思路
为了解决上述存在的问题，本专利技术提供一种基于Web的图形化办公用房管理系统及方法。本专利技术是通过以下技术方案实现：一种基于Web的图形化办公用房管理系统，该系统能够图形化展示房屋的结构(2D/3D)、面积、人员、单位等信息，该系统还包括：工具栏、画布、信息窗口、图例、3D展示等，所述工具栏包括移动、绘制实线、绘制虚线、绘制矩形、添加文字、添加门、添加楼梯、添加电梯、复制、粘贴、上传附件等功能，本专利技术还包括一种基于Web的图形化办公用房管理方法，该方法包括步骤如下：步骤一，先初始化工具栏和画布，同时在工具栏注册鼠标点击事件，画布(Canvas)中注册鼠标操作事件；步骤二，使用者点击工具栏时，调用所点击工具栏相应的事件方法，并对工具栏状态进行刷新，此时可以在画布上绘制图像或者移动图像；同时，画布是整个图形管理的核心，用于绘制房屋图形，展示房屋的结构、大小、属性等。步骤三，使用者在画布上进行图像的移动和绘制操作，画布会根据使用者的相关操作来监听鼠标的相关事件，从而调用相应的事件方法，计算画布上图形的坐标、长度等信息；步骤四，监听到鼠标释放事件，按照计算的坐标、长度等信息完成图形绘制；步骤五，所述鼠标移动到房屋图像上右键点击编辑，监听到鼠标点击编辑事件，弹出房屋信息编辑窗口，可输入房屋的相关信息，包括面积、人员、单位、使用情况、分配时间等；步骤六，鼠标移动到图像上右键点击删除，监听到鼠标点击删除事件，删除图像及图像的相关信息，或批量选中图像按下键盘del键进行批量删除操作；步骤七，监听到菜单保存事件，保存画布上的图形信息以及房屋数据信息；步骤八，所述监听到鼠标点击“3D展示”事件，根据画布上绘制好的2D图像坐标转换成3D模型展示。进一步，所述工具栏的使用方法及相关算法如下：a、移动工具所述点击工具栏上的移动工具后，将鼠标光标放在图像上，按住鼠标左键不放即可拖动图像，放开鼠标时，图像遵循了单元格贴边算法，即图像会自动贴在单元格的边线上；在图像移动的过程中，记录图像水平移动距离movementX，和垂直移动距离movementY，当movementX大于0时，则图像是在向右移动，此时图像遵循向右贴边原则；movementX小于0，则图像是在向左移动，此时图像遵循向左贴边原则；当movementY大于0时，则图像是在向下移动，此时图像遵循向下贴边原则；movementX小于0，则图像是在向上移动，此时图像遵循向上贴边原则；在画布中一个单元格的宽度为cellwidth，要实现图像自动贴边单元格，则水平和垂直移动的距离必须是cellwidth的整数倍，遵循上面的原则，在松开鼠标停止拖拽移动的瞬间，算出水平方向和垂直方向自动贴边的距离autoX和autoY。遵循上面的原则，得到公式：当movementX大于0时，autoX＝cellwidth-(movementX％cellwidth)；当movementX小于0时，autoX＝-(cellwidth+(movementX％cellwidth))；当movementY大于0时，autoY＝cellwidth-(movementY％cellwidth)；当movementY小于0时，autoY＝-(cellwidth+(movementY％cellwidth))；得到autoX和autoY的值之后，再将图像移动autoX和autoY的距离即可实现贴边。b、直线和虚线工具所述点击工具栏上的直线或虚线工具后，在画布上按住鼠标左键拖动即可画出相应的线段，在这个过程中，线段的起点和终点始终都在单元格的交叉点上；在画布中一个单元格的宽度为cellwidth，记录按下鼠标时线段的起点(X0,Y0)和松开鼠标时线段的终点(X1,Y1)，如果X0除以cellwidth的余数大于cellwidth宽度的一半，此时将起点向右移动；如果X0除以cellwidth的余数小于cellwidth宽度的一半，此时将起点向左移动；如果Y0除以cellwidth的余数大于cellwidth宽度的一半，此时将起点向下移动；如果Y0除以cellwidth的余数小于cellwidth宽度的一半，此时将起点向上移动。最后还要减去1px的单元格边框宽度，使起点和终点刚好落在单元格的交叉点上。遵循上面的原则，得到公式：当(X0％cellwidth)>＝(cellwidth/2)时，X0＝Math.ceil(X0/cellwidth)*cellwidth-1；当(X0％cellwidth)<(cellwidth/2)时，X0＝Math.floor(X0/cellwidth)*cellwidth-1；当(Y0％cellwidth)>＝(cellwidth/2)时，Y0＝Math.ceil(Y0/cellwidth)*cellwidth-1；当(Y0％cellwidth)<(cellwidth/2)时，Y0＝Math.floor(Y0/cellwidth)*cellwidth-1；终点(X1,Y1)同理，则可实现线段的起点和终点始终都在单元格的交叉点上。c、矩形工具所述点击工具栏上的矩形工具后，在画布上按住鼠标左键拖动即可画出相应的矩形房间，在这个过程中，矩形房间的起点必须在单元格的交叉点上，并且矩形房间的长和宽必须是单元格宽度的整数倍；在画布中一个单元格的宽度为cellwidth，记录按下鼠标时矩形房间的起点(X0,Y0)和松开鼠标时矩形房间的终点(X1,Y1)，如果X0除以cellwidth的余数大于cellwidth宽度的一半，此时将起点向右移动；如果X0除以cellwidth的余数小于cellwidth宽度的一半，此时将起点向左移动；如果Y0除以cellwidth的余数大于cellwidth宽度的一半，此时将起点向下移动；如果Y0除以cellwidth的余数小于cellwidth宽度的一半，此时将起点向上移动。最后还要减去1px的单元格边框宽度，使起点刚好落在单元格的交叉点上；遵循上面的原则，得到公式：当(X0％cellwidth)>＝(cellwidth/2)时，X0＝Math.ceil(X0/cellwidth)*cellwidth-1；当(X0％cellwidth)<(cellwidth/2)时，X0＝Math.floor(X0/cellwidth)*c本文档来自技高网...

【技术保护点】
1.一种基于Web的图形化办公用房管理系统，该系统能够图形化展示房屋的结构(2D/3D)、面积、人员、单位等信息，其特征在于：该系统还包括：工具栏、画布、信息窗口、图例、3D展示等，所述工具栏包括移动、绘制实线、绘制虚线、绘制矩形、添加文字、添加门、添加楼梯、添加电梯、复制、粘贴、上传附件等功能，本专利技术还包括一种基于Web的图形化办公用房管理方法，该方法包括步骤如下：/n步骤一，先初始化工具栏和画布，同时在工具栏注册鼠标点击事件，画布(Canvas)中注册鼠标操作事件；/n步骤二，使用者点击工具栏时，调用所点击工具栏相应的事件方法，并对工具栏状态进行刷新，此时可以在画布上绘制图像或者移动图像；/n步骤三，使用者在画布上进行图像的移动和绘制操作，画布会根据使用者的相关操作来监听鼠标的相关事件，从而调用相应的事件方法，计算画布上图形的坐标、长度等信息；/n步骤四，监听到鼠标释放事件，按照计算的坐标、长度等信息完成图形绘制；/n步骤五，所述鼠标移动到房屋图像上右键点击编辑，监听到鼠标点击编辑事件，弹出房屋信息编辑窗口，可输入房屋的相关信息，包括面积、人员、单位、使用情况、分配时间等；/n步骤六，鼠标移动到图像上右键点击删除，监听到鼠标点击删除事件，删除图像及图像的相关信息，或批量选中图像按下键盘del键进行批量删除操作；/n步骤七，监听到菜单保存事件，保存画布上的图形信息以及房屋数据信息；/n步骤八，所述监听到鼠标点击“3D展示”事件，根据画布上绘制好的2D图像坐标转换成3D模型展示。/n...

【技术特征摘要】
1.一种基于Web的图形化办公用房管理系统，该系统能够图形化展示房屋的结构(2D/3D)、面积、人员、单位等信息，其特征在于：该系统还包括：工具栏、画布、信息窗口、图例、3D展示等，所述工具栏包括移动、绘制实线、绘制虚线、绘制矩形、添加文字、添加门、添加楼梯、添加电梯、复制、粘贴、上传附件等功能，本发明还包括一种基于Web的图形化办公用房管理方法，该方法包括步骤如下：
步骤一，先初始化工具栏和画布，同时在工具栏注册鼠标点击事件，画布(Canvas)中注册鼠标操作事件；
步骤二，使用者点击工具栏时，调用所点击工具栏相应的事件方法，并对工具栏状态进行刷新，此时可以在画布上绘制图像或者移动图像；
步骤三，使用者在画布上进行图像的移动和绘制操作，画布会根据使用者的相关操作来监听鼠标的相关事件，从而调用相应的事件方法，计算画布上图形的坐标、长度等信息；
步骤四，监听到鼠标释放事件，按照计算的坐标、长度等信息完成图形绘制；
步骤五，所述鼠标移动到房屋图像上右键点击编辑，监听到鼠标点击编辑事件，弹出房屋信息编辑窗口，可输入房屋的相关信息，包括面积、人员、单位、使用情况、分配时间等；
步骤六，鼠标移动到图像上右键点击删除，监听到鼠标点击删除事件，删除图像及图像的相关信息，或批量选中图像按下键盘del键进行批量删除操作；
步骤七，监听到菜单保存事件，保存画布上的图形信息以及房屋数据信息；
步骤八，所述监听到鼠标点击“3D展示”事件，根据画布上绘制好的2D图像坐标转换成3D模型展示。


2.根据权利要求1所述的一种基于Web的图形化办公用房管理系统及方法，其特征在于：所述工具栏的使用方法及相关算法如下：
a、移动工具
所述点击工具栏上的移动工具后，将鼠标光标放在图像上，按住鼠标左键不放即可拖动图像，放开鼠标时，图像遵循了单元格贴边算法，即图像会自动贴在单元格的边线上；在图像移动的过程中，记录图像水平移动距离movementX，和垂直移动距离movementY，当movementX大于0时，则图像是在向右移动，此时图像遵循向右贴边原则；movementX小于0，则图像是在向左移动，此时图像遵循向左贴边原则；当movementY大于0时，则图像是在向下移动，此时图像遵循向下贴边原则；movementX小于0，则图像是在向上移动，此时图像遵循向上贴边原则；
在画布中一个单元格的宽度为cellwidth，要实现图像自动贴边单元格，则水平和垂直移动的距离必须是cellwidth的整数倍，遵循上面的原则，在松开鼠标停止拖拽移动的瞬间，算出水平方向和垂直方向自动贴边的距离autoX和autoY。遵循上面的原则，得到公式：
当movementX大于0时，autoX＝cellwidth-(movementX％cellwidth)；
当movementX小于0时，autoX＝-(cellwidth+(movementX％cellwidth))；
当movementY大于0时，autoY＝cellwidth-(movementY％cellwidth)；
当movementY小于0时，autoY＝-(cellwidth+(movementY％cellwidth))；
得到autoX和autoY的值之后，再将图像移动autoX和autoY的距离即可实现贴边。
b、直线和虚线工具
所述点击工具栏上的直线或虚线工具后，在画布上按住鼠标左键拖动即可画出相应的线段，在这个过程中，线段的起点和终点始终都在单元格的交叉点上；在画布中一个单元格的宽度为cellwidth，记录按下鼠标时线段的起点(X0,Y0)和松开鼠标时线段的终点(X1,Y1)，如果X0除以cellwidth的余数大于cellwidth宽度的一半，此时将起点向右移动；如果X0除以cellwidth的余数小于cellwidth宽度的一半，此时将起点向左移动；如果Y0除以cellwidth的余数大于cellwidth宽度的一半，此时将起点向下移动；如果Y0除以cellwidth的余数小于cellwidth宽度的一半，此时将起点向上移动。最后还要减去1px的单元格边框宽度，使起点和终点刚好落在单元格的交叉点上。遵循上面的原则，得到公式：
当(X0％cellwidth)>＝(cellwidth/2)时，X0＝Math.ceil(X0/cellwidth)*cellwidth-1；
当(X0％cellwidth)<(cellwidth/2)时，X0＝Math.floor(X0/cellwidth)*cellwidth-1；
当(Y0％cellwidth)>＝(cellwidth/2)时，Y0＝Math.ceil(Y0/cellwidth)*cellwidth-1；
当(Y0％cellwidth)<(cellwidth/2)时，Y0＝Math.floor(Y0/cellwidth)*cellwidth-1；
终点(X1,Y1)同理，则可实现线段的起点和终点始终都在单元格的交叉点上。
c、矩形工具
所述点击工具栏上的矩形工具后，在画布上按住鼠标左键拖动即可画出相应的矩形房间，在这个过程中，矩形房间的起点必须在单元格的交叉点上，并且矩形房间的长和宽必须是单元格宽度的整数倍；在画布中一个单元格的宽度为cellwidth，记录按下鼠标时矩形房间的起点(X0,Y0)和松开鼠标时矩形房间的终点(X1,Y1)，如果X0除以cellwidth的余数大于cellwidth宽度的一半，此时将起点向右移动；如果X0除以cellwidth的余数小于cellwidth宽度的一半，此时将起点向左移动；如果Y0除以cellwidth的余数大于cellwidth宽度的一半，此时将起点向下移动；如果Y0除以cellwidth的余数小于cellwidth宽度的一半，此时将起点向上移动。最后还要减去1px的单元格边框宽度，使起点刚好落在单元格的...

【专利技术属性】
技术研发人员：刘建辉，姚智，熊馨，
申请(专利权)人：武汉人云智物科技有限公司，
类型：发明
国别省市：湖北;42