CN111651112A - 一种基于Web的图形化办公用房管理系统及方法 - Google Patents

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

Info

Publication number
CN111651112A
CN111651112A CN202010513462.9A CN202010513462A CN111651112A CN 111651112 A CN111651112 A CN 111651112A CN 202010513462 A CN202010513462 A CN 202010513462A CN 111651112 A CN111651112 A CN 111651112A
Authority
CN
China
Prior art keywords
cellwidth
mouse
canvas
image
width
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010513462.9A
Other languages
English (en)
Inventor
刘建辉
姚智
熊馨
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Wuhan Renyun Intelligent Technology Co ltd
Original Assignee
Wuhan Renyun Intelligent Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Wuhan Renyun Intelligent Technology Co ltd filed Critical Wuhan Renyun Intelligent Technology Co ltd
Priority to CN202010513462.9A priority Critical patent/CN111651112A/zh
Publication of CN111651112A publication Critical patent/CN111651112A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q10/00—Administration; Management
    • G06Q10/10—Office automation; Time management
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q50/00—Systems or methods specially adapted for specific business sectors, e.g. utilities or tourism
    • G06Q50/10—Services
    • G06Q50/16—Real estate
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/80—Creating or modifying a manually drawn or painted image using a manual input device, e.g. mouse, light pen, direction keys on keyboard

Abstract

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

Description

一种基于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) *cellwidth-1；
当(Y0％cellwidth)>＝(cellwidth/2)时，Y0＝Math.ceil(Y0/cellwidth) *cellwidth-1；
当(Y0％cellwidth)<(cellwidth/2)时，Y0＝Math.floor(Y0/cellwidth) *cellwidth-1；
当前画出的矩形房间宽度为：rectWidth＝X1-X0；
当前画出的矩形房间长度为：rectHeight＝Y1-Y0；
矩形房间的长宽除以单元格的余数，如果超过单元格的一半的宽度，则矩 形房间的长宽向上取整，如果不足单元格的一半的宽度，则矩形长宽向下取整， 使得矩形长宽刚好是单元格宽度的整数倍；
当(rectWidth％cellwidth)>＝(cellwidth/2)时：
rectWidth＝(Math.floor(rectWidth/cellwidth)+1)*cellwidth；
当(rectWidth％cellwidth)<(cellwidth/2)时：
rectWidth＝Math.floor(rectWidth/cellwidth)*cellwidth；
当(rectHeight％cellwidth)>＝(cellwidth/2)时：
rectHeight＝(Math.floor(rectHeight/cellwidth)+1) *cellwidth；
当(rectHeight％cellwidth)<(cellwidth/2)时：
rectHeight＝Math.floor(rectHeight/cellwidth)*cellwidth；
经过计算的终点坐标应为：
X1＝X0+rectWidth；Y1＝Y0+rectHeight；
d、文字工具
点击工具栏上的文字工具后，在画布上单击一下，会出现输入光标进入输 入模式，即可开始输入文字，输入完成后，再在画布空白处单击一下，即可退 出输入模式；
e、添加门、楼梯、电梯工具
点击工具栏上的添加门、楼梯、电梯工具后，画布上会出现相应的图标，再 使用移动工具移动到相应的位置即可。门、楼梯、电梯的移动也遵循单元格贴 边算法，具体算法参照移动工具的算法；
f、复制，粘贴工具
先点击工具栏上的移动工具进行图像的选中操作，再点击复制工具，最后点 击粘贴工具，即可完成复制粘贴操作；
g、上传附件工具
点击工具栏上的上传附件工具后，即可上传的相应附件。
进一步，所述的工具栏用于图形基本元素的选择与操作，其中基本元素 包括：鼠标、实线、虚线、矩形、文字、门、楼梯、电梯，操作包括：复制、 粘贴、附件上传；所述鼠标负责选中画布上的对象操作；矩形绘制房屋结构； 所述实线和虚线辅助绘制，对一些局部细节调整；所述门、电梯、楼梯则对应 特定对象；复制、粘贴是对画布上对象的操作，可以方便快速生成相同对象； 所述画布包括根据工具栏上的类型结合房屋的实际情况生成的各种组合的图 形，是基于Html5的Canvas实现的，初始化时会注册鼠标移动、鼠标点击、鼠 标释放、对象移动、对象修改、对象缩放等事件；所述画布由若干个小的正方 形单元格(cell)组成，固定边长(cellwidth)，便于坐标与长度的计算；
进一步，所述的工具栏通过创建一个基于Html5的ToolBar并引入各种Icon实 现，每个Icon都注册一个对应的响应事件，监听图标上的点击事件；当图标被 点击后，响应事件会记录下事件类型并传递给Canvas记录。
进一步，所述实线和虚线的绘制，当画布监听到鼠标点击事件后，记录鼠 标点的坐标信息(X0,Y0)，然后鼠标进行移动，画布实时获取鼠标的坐标信息， 当鼠标释放时，画布获取鼠标点的坐标信息(X1,Y1)，然后在两点间绘制线段； 所述矩形房间的绘制，当画布监听到鼠标点击事件后，记录鼠标点的坐标信息 (X0,Y0)，然后鼠标进行移动，画布实时获取鼠标的坐标信息，当鼠标释放时， 画布获取鼠标点的坐标信息(X1,Y1)，然后在(X0,Y0)，(X0,Y1)，(X1,Y0)， (X1,Y1)四点绘制四条线段形成矩形房屋；同时，图形绘制遵循单元格算法， 若绘制中的坐标点不在画布单元格的交点上，则首先计算偏移量，公式如下：offsetX＝X0％cellwidth，若offsetX>＝cellwidth/2对坐标进行向上取整计算
Figure BDA0002529260090000071
若offsetX<cellwidth/2则对坐标进行向上取整
Figure BDA0002529260090000072
Y同理，所述门、电梯、楼梯的绘制，当画布监听到鼠 标事件后，会在默认的坐标(X0,Y0)绘制一个对应的图形，然后可以通过鼠标 拖拽在画布上移动到指定位置(X1,Y1)。
进一步，所述的画布是整个图形管理的核心，用于绘制房屋图形，展示房屋 的结构、大小、属性等。
进一步，所述的信息窗口用于显示房屋的相关信息，包括面积、人员、 单位、使用情况、分配时间等。
进一步，所述的图例是表示房屋的使用类型、是否超标、是否备案等信 息。
与现有的技术相比，本发明的有益效果是：本发明实现了党政机关及企事 业单位办公用房的图形化管理，对于办公用房的结构、使用类型、单位、人员、 类型、备案等数据实现了可视化编辑保存，解决了原有办公用房管理的诸多不 足，简化了办公用房的管理，能够迅速准确地获取各种办公用房的各项数据， 节省了人力、资源与时间。
附图说明
图1是本发明的功能示意图；
图2是本发明的运行原理图；
具体实施方式
下面结合附图与具体实施方式对本发明作进一步详细描述：
如图1和2所示，一种基于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) *cellwidth-1；
当(Y0％cellwidth)>＝(cellwidth/2)时，Y0＝Math.ceil(Y0/cellwidth) *cellwidth-1；
当(Y0％cellwidth)<(cellwidth/2)时，Y0＝Math.floor(Y0/cellwidth) *cellwidth-1；
当前画出的矩形房间宽度为：rectWidth＝X1-X0；
当前画出的矩形房间长度为：rectHeight＝Y1-Y0；
矩形房间的长宽除以单元格的余数，如果超过单元格的一半的宽度，则矩 形房间的长宽向上取整，如果不足单元格的一半的宽度，则矩形长宽向下取整， 使得矩形长宽刚好是单元格宽度的整数倍；
当(rectWidth％cellwidth)>＝(cellwidth/2)时：
rectWidth＝(Math.floor(rectWidth/cellwidth)+1)*cellwidth；
当(rectWidth％cellwidth)<(cellwidth/2)时：
rectWidth＝Math.floor(rectWidth/cellwidth)*cellwidth；
当(rectHeight％cellwidth)>＝(cellwidth/2)时：
rectHeight＝(Math.floor(rectHeight/cellwidth)+1) *cellwidth；
当(rectHeight％cellwidth)<(cellwidth/2)时：
rectHeight＝Math.floor(rectHeight/cellwidth)*cellwidth；
经过计算的终点坐标应为：
X1＝X0+rectWidth；Y1＝Y0+rectHeight；
d、文字工具
点击工具栏上的文字工具后，在画布上单击一下，会出现输入光标进入输 入模式，即可开始输入文字，输入完成后，再在画布空白处单击一下，即可退 出输入模式；
e、添加门、楼梯、电梯工具
点击工具栏上的添加门、楼梯、电梯工具后，画布上会出现相应的图标，再 使用移动工具移动到相应的位置即可。门、楼梯、电梯的移动也遵循单元格贴 边算法，具体算法参照移动工具的算法；
f、复制，粘贴工具
先点击工具栏上的移动工具进行图像的选中操作，再点击复制工具，最后点 击粘贴工具，即可完成复制粘贴操作；
g、上传附件工具
点击工具栏上的上传附件工具后，即可上传的相应附件。
所述的工具栏用于图形基本元素的选择与操作，其中基本元素包括：鼠 标、实线、虚线、矩形、文字、门、楼梯、电梯，操作包括：复制、粘贴、附 件上传；所述鼠标负责选中画布上的对象操作；矩形绘制房屋结构；所述实线 和虚线辅助绘制，对一些局部细节调整；所述门、电梯、楼梯则对应特定对象； 复制、粘贴是对画布上对象的操作，可以方便快速生成相同对象；所述画布包 括根据工具栏上的类型结合房屋的实际情况生成的各种组合的图形，是基于 Html5的Canvas实现的，初始化时会注册鼠标移动、鼠标点击、鼠标释放、对 象移动、对象修改、对象缩放等事件；所述画布由若干个小的正方形单元格 (cell)组成，固定边长(cellwidth)，便于坐标与长度的计算；
所述的工具栏通过创建一个基于Html5的ToolBar并引入各种Icon实现， 每个Icon都注册一个对应的响应事件，监听图标上的点击事件；当图标被点击 后，响应事件会记录下事件类型并传递给Canvas记录。
所述的实线和虚线的绘制，当画布监听到鼠标点击事件后，记录鼠标点的 坐标信息(X0,Y0)，然后鼠标进行移动，画布实时获取鼠标的坐标信息，当鼠 标释放时，画布获取鼠标点的坐标信息(X1,Y1)，然后在两点间绘制线段；所 述矩形房间的绘制，当画布监听到鼠标点击事件后，记录鼠标点的坐标信息 (X0,Y0)，然后鼠标进行移动，画布实时获取鼠标的坐标信息，当鼠标释放时， 画布获取鼠标点的坐标信息(X1,Y1)，然后在(X0,Y0)，(X0,Y1)，(X1,Y0)， (X1,Y1)四点绘制四条线段形成矩形房屋；同时，图形绘制遵循单元格算法，若绘制中的坐标点不在画布单元格的交点上，则首先计算偏移量，公式如下： offsetX＝X0％cellwidth，若offsetX>＝cellwidth/2对坐标进行向上取整计算
Figure BDA0002529260090000141
若offsetX<cellwidth/2则对坐标进行向上取整
Figure BDA0002529260090000142
Y同理，所述门、电梯、楼梯的绘制，当画布监听到鼠 标事件后，会在默认的坐标(X0,Y0)绘制一个对应的图形，然后可以通过鼠标 拖拽在画布上移动到指定位置(X1,Y1)。
所述的信息窗口用于显示房屋的相关信息，包括面积、人员、单位、使 用情况、分配时间等。
所述的图例是表示房屋的使用类型、是否超标、是否备案等信息。
以上描述了本发明的基本原理、主要特征和优点。本行业的技术人员应该 了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明 本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化 和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范 围由所附的权利要求书及其等效物界定。

Claims (8)

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的单元格边框宽度，使起点刚好落在单元格的交叉点上；遵循上面的原则，得到公式：
当(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；
当前画出的矩形房间宽度为：rectWidth＝X1-X0；
当前画出的矩形房间长度为：rectHeight＝Y1-Y0；
矩形房间的长宽除以单元格的余数，如果超过单元格的一半的宽度，则矩形房间的长宽向上取整，如果不足单元格的一半的宽度，则矩形长宽向下取整，使得矩形长宽刚好是单元格宽度的整数倍；
当(rectWidth％cellwidth)>＝(cellwidth/2)时：
rectWidth＝Math.ceil(rectWidth/cellwidth)*cellwidth；
当(rectWidth％cellwidth)<(cellwidth/2)时：
rectWidth＝Math.floor(rectWidth/cellwidth)*cellwidth；
当(rectHeight％cellwidth)>＝(cellwidth/2)时：
rectHeight＝Math.ceil(rectHeight/cellwidth)*cellwidth；
当(rectHeight％cellwidth)<(cellwidth/2)时：
rectHeight＝Math.floor(rectHeight/cellwidth)*cellwidth；
经过计算的终点坐标应为：
X1＝X0+rectWidth；Y1＝Y0+rectHeight；
d、文字工具
点击工具栏上的文字工具后，在画布上单击一下，会出现输入光标进入输入模式，即可开始输入文字，输入完成后，再在画布空白处单击一下，即可退出输入模式；
e、添加门、楼梯、电梯工具
点击工具栏上的添加门、楼梯、电梯工具后，画布上会出现相应的图标，再使用移动工具移动到相应的位置即可。门、楼梯、电梯的移动也遵循单元格贴边算法，具体算法参照移动工具的算法；
f、复制，粘贴工具
先点击工具栏上的移动工具进行图像的选中操作，再点击复制工具，最后点击粘贴工具，即可完成复制粘贴操作；
g、上传附件工具
点击工具栏上的上传附件工具后，即可上传的相应附件。
3.根据权利要求1中的步骤一所述的一种基于Web的图形化办公用房管理方法，其特征在于：所述工具栏用于图形基本元素的选择与操作，其中基本元素包括：鼠标、实线、虚线、矩形、文字、门、楼梯、电梯，操作包括：复制、粘贴、附件上传；所述鼠标负责选中画布上的对象操作；矩形绘制房屋结构；所述实线和虚线辅助绘制，对一些局部细节调整；所述门、电梯、楼梯则对应特定对象；复制、粘贴是对画布上对象的操作，可以方便快速生成相同对象；所述画布包括根据工具栏上的类型结合房屋的实际情况生成的各种组合的图形，是基于Html5的Canvas实现的，初始化时会注册鼠标移动、鼠标点击、鼠标释放、对象移动、对象修改、对象缩放等事件；所述画布由若干个小的正方形单元格(cell)组成，固定边长(cellwidth)，便于坐标与长度的计算。
4.根据权利要求1中步骤二所述的一种基于Web的图形化办公用房管理方法，其特征在于：所述工具栏通过创建一个基于Html5的ToolBar并引入各种Icon实现，每个Icon都注册一个对应的响应事件，监听图标上的点击事件；当图标被点击后，响应事件会记录下事件类型并传递给Canvas记录。
5.根据权利要求1中步骤三所述的一种基于Web的图形化办公用房管理方法，其特征在于：所述实线和虚线的绘制，当画布监听到鼠标点击事件后，记录鼠标点的坐标信息(X0,Y0)，然后鼠标进行移动，画布实时获取鼠标的坐标信息，当鼠标释放时，画布获取鼠标点的坐标信息(X1,Y1)，然后在两点间绘制线段；所述矩形房间的绘制，当画布监听到鼠标点击事件后，记录鼠标点的坐标信息(X0,Y0)，然后鼠标进行移动，画布实时获取鼠标的坐标信息，当鼠标释放时，画布获取鼠标点的坐标信息(X1,Y1)，然后在(X0,Y0)，(X0,Y1)，(X1,Y0)，(X1,Y1)四点绘制四条线段形成矩形房屋；同时，图形绘制遵循单元格算法，若绘制中的坐标点不在画布单元格的交点上，则首先计算偏移量，公式如下：offsetX＝X0％cellwidth，若offsetX>＝cellwidth/2对坐标进行向上取整计算
Figure FDA0002529260080000071
若offsetX<cellwidth/2则对坐标进行向上取整
Figure FDA0002529260080000072
Y同理，所述门、电梯、楼梯的绘制，当画布监听到鼠标事件后，会在默认的坐标(X0,Y0)绘制一个对应的图形，然后可以通过鼠标拖拽在画布上移动到指定位置(X1,Y1)。
6.根据权利要求1所述的一种基于Web的图形化办公用房管理方法，其特征在于：所述画布是整个图形管理的核心，用于绘制房屋图形，展示房屋的结构、大小、属性等。
7.根据权利要求1所述的一种基于Web的图形化办公用房管理方法，其特征在于：所述信息窗口用于显示房屋的相关信息，包括面积、人员、单位、使用情况、分配时间等。
8.根据权利要求1所述的一种基于Web的图形化办公用房管理方法，其特征在于：所述图例是表示房屋的使用类型、是否超标、是否备案等信息。
CN202010513462.9A 2020-06-08 2020-06-08 一种基于Web的图形化办公用房管理系统及方法 Pending CN111651112A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010513462.9A CN111651112A (zh) 2020-06-08 2020-06-08 一种基于Web的图形化办公用房管理系统及方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010513462.9A CN111651112A (zh) 2020-06-08 2020-06-08 一种基于Web的图形化办公用房管理系统及方法

Publications (1)

Publication Number Publication Date
CN111651112A true CN111651112A (zh) 2020-09-11

Family

ID=72351330

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010513462.9A Pending CN111651112A (zh) 2020-06-08 2020-06-08 一种基于Web的图形化办公用房管理系统及方法

Country Status (1)

Country Link
CN (1) CN111651112A (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112434378A (zh) * 2020-12-09 2021-03-02 扬州中远海运重工有限公司 一种造船企业线表绘制交互控件设计方法
CN114489910A (zh) * 2022-02-10 2022-05-13 北京字跳网络技术有限公司 一种视频会议数据显示方法、装置、设备及介质
CN114579011A (zh) * 2021-12-13 2022-06-03 北京市建筑设计研究院有限公司 一种建模工具配置方法及电子设备
CN115130042A (zh) * 2022-08-31 2022-09-30 南京远思智能科技有限公司 利用Modelica web的图形化建模方法
CN116307054A (zh) * 2022-12-27 2023-06-23 杭州聚秀科技有限公司 基于贪心算法的办公用房智能配置方法
CN116523207A (zh) * 2023-04-07 2023-08-01 北京建工集团有限责任公司 一种建设工程信息管理方法、装置、设备及可读介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN202183181U (zh) * 2011-06-23 2012-04-04 浙江中控科教仪器设备有限公司 地铁车站综合监控动态演示模型系统
US20140195466A1 (en) * 2013-01-08 2014-07-10 Purepredictive, Inc. Integrated machine learning for a data management product
CN108366116A (zh) * 2018-02-09 2018-08-03 广州华立科技职业学院 一种个性化管理房间的自动化控制系统
CN110232162A (zh) * 2019-05-29 2019-09-13 北京中亦安图科技股份有限公司 一种基于html5的流程定义方法及系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN202183181U (zh) * 2011-06-23 2012-04-04 浙江中控科教仪器设备有限公司 地铁车站综合监控动态演示模型系统
US20140195466A1 (en) * 2013-01-08 2014-07-10 Purepredictive, Inc. Integrated machine learning for a data management product
CN108366116A (zh) * 2018-02-09 2018-08-03 广州华立科技职业学院 一种个性化管理房间的自动化控制系统
CN110232162A (zh) * 2019-05-29 2019-09-13 北京中亦安图科技股份有限公司 一种基于html5的流程定义方法及系统

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
TSLONG2000: "办公用房管理系统(图形化管理)简介", 《百度文库》 *
河南师慧信息技术有限公司: "师慧高校房产管理软件智能图形系统在管理中的可视化应用", 《师慧软件》 *

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112434378A (zh) * 2020-12-09 2021-03-02 扬州中远海运重工有限公司 一种造船企业线表绘制交互控件设计方法
CN112434378B (zh) * 2020-12-09 2024-02-02 扬州中远海运重工有限公司 一种造船企业线表绘制交互控件设计方法
CN114579011A (zh) * 2021-12-13 2022-06-03 北京市建筑设计研究院有限公司 一种建模工具配置方法及电子设备
CN114489910A (zh) * 2022-02-10 2022-05-13 北京字跳网络技术有限公司 一种视频会议数据显示方法、装置、设备及介质
CN115130042A (zh) * 2022-08-31 2022-09-30 南京远思智能科技有限公司 利用Modelica web的图形化建模方法
CN115130042B (zh) * 2022-08-31 2022-11-08 南京远思智能科技有限公司 利用Modelica web的图形化建模方法
CN116307054A (zh) * 2022-12-27 2023-06-23 杭州聚秀科技有限公司 基于贪心算法的办公用房智能配置方法
CN116307054B (zh) * 2022-12-27 2023-08-25 杭州聚秀科技有限公司 基于贪心算法的办公用房智能配置方法
CN116523207A (zh) * 2023-04-07 2023-08-01 北京建工集团有限责任公司 一种建设工程信息管理方法、装置、设备及可读介质

Similar Documents

Publication Publication Date Title
CN111651112A (zh) 一种基于Web的图形化办公用房管理系统及方法
US20160011742A1 (en) System And Method For Providing User Access
US9071615B2 (en) Shared space for communicating information
WO2016145832A1 (zh) 终端的操作方法及装置
US8881017B2 (en) Systems, devices and methods for an interactive art marketplace in a networked environment
CN107924113A (zh) 用于相机效果的用户界面
US9542665B2 (en) Methods for creating, arranging, and leveraging an ad-hoc collection of heterogeneous organization components
KR20060052717A (ko) 가상 데스크 탑, 프로그램 예의 배열을 리콜링하는 방법, 애플리케이션 예를 관리하는 방법 및 애플리케이션을 관리하는 방법
CN108805298B (zh) 一种基于WebGL技术的数据中心可视化管理系统
US11158134B2 (en) Method, apparatus and storage medium for displaying three-dimensional space view
CN102203722A (zh) 在多监视器计算机系统中显示应用的方法以及采用该方法的多监视器计算机系统
JP7463315B2 (ja) 設備管理方法、設備管理装置、設備管理プログラム、記録媒体
CN110069190A (zh) 用于3d模型的系统级行为的设备、方法和图形用户界面
WO2013004130A1 (zh) 停靠栏的实现方法、装置和系统
US20140132606A1 (en) Three-dimensional man-machine interaction display and control method for power grid operation monitoring
CN107608668A (zh) H5页面制作兼容显示的方法、装置、终端设备及存储介质
CN109657172A (zh) 图片预览方法、装置、设备和存储介质
CN106844623A (zh) 一种智慧城市二维可视化展示系统
CN106681701A (zh) 一种任务的显示方法和装置
CN110506264A (zh) 针对实时协作的实况墨水呈现
US11894019B2 (en) Time-lapse
US20180039381A1 (en) User interface for application interface manipulation
CN109240689A (zh) 一种应用图标的生成方法、装置、服务器及介质
CN105046748B (zh) 一种三维地质体场景中可形成图像的3d相框装置
WO2023236465A1 (zh) 一种地质分析的显示处理方法、装置、设备及介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20200911

RJ01 Rejection of invention patent application after publication