一种基于DragDropMgr单例的即时座位图调度的方法

摘要

本发明公开了一种基于DragDropMgr单例的即时座位图调度的方法，包括以下步骤：准备座位分布图；利用Photoshop进行切片；利用Photoshop生成HTML源码；创建DragDropMgr单例，显示界面；新建Target对象；创建拖拽代理，跟后台数据库进行交互数据；更新后台数据库，交换座位；用DOM将Element元素添加到HTML中，展示到页面上。本发明实现人员管理系统中座位图的显示、查询及最优快速便捷的对人员的座位图进行修改、换座位，确保企业人员分布图的及时更新，实现同步。

说明书

技术领域

本发明属于电力系统领域，涉及一种基于DragDropMgr单例的即时座位图调度的方法。

背景技术

作为大型企业的管理系统，查找某个员工往往需要打电话询问其位置，如果管理人员也不是很熟悉这个人，那么就容易存在人员资料与其姓名出现分歧，此时再使用此企业管理系统的时候就会带来很多的不便。即便有的企业有人员的分布图，每次也都需要在人员分布图中找到人员的位置，再到系统中查询需要查询的内容，下一个人又要重复这样的工作过程，这样即浪费了使用者的时间，又容易出现错误。而且企业的人员有变动的时候，人员分布图也要立刻随着更新，通常频繁的人员变动后企业的这种人员分布图的更新就会滞后，不能实现同步，从而对工作造成诸多不便。

发明内容

本发明的目的是提供一种基于DragDropMgr单例的即时座位图调度的方法，实现人员管理系统中座位图的显示、查询及最优快速便捷的对人员的座位图进行修改、换座位，确保企业人员分布图的及时更新，实现同步。

本发明的目的通过以下技术方案实现：

一种基于DragDropMgr单例的即时座位图调度的方法，其特征在于该方法包括以下步骤：

步骤一：准备座位分布图

准备楼层座位分布图，最终转换为一个大小和分辨率适合Web浏览的图片，在Photoshop中通过菜单图像来调节图像尺寸；

步骤二：利用Photoshop进行切片

在Photoshop中打开基准座位图，然后在工具栏中选择切片工具进行切片操作，然后在基准座位图中划出所有的座位区域，并设置座位区域的基本属性，以此类推，划出其他所有座位区域，并设置座位基本信息；

步骤三：利用Photoshop生成HTML源码

在基准座位图中切片都制作完成之后，通过Photoshop的菜单文件存储为Web和设备所有格式；打开test.html源码，找到楼层切片代码；

步骤四：创建DragDropMgr单例，显示界面

步骤五：新建Target对象

一个DragDrop的实现类，它不能移动，为拖拽的目标；新建一个Target对象，在运行过程中动态的增加一个重要属性：player，此属性表示当前Target的占有者是谁，类型为DDProxy或其子类；

步骤六：创建拖拽代理，跟后台数据库进行交互数据

Ext.dd.DDProxy这个是一个对拖拽的代理，被拖拽的元素不动，代理被拖着跟随鼠标移动；

步骤七：更新后台数据库，交换座位

为了满足业务需求，实现拖拽对象后直接更新后台数据库，同时支持鼠标右键安排人员座位和释放座位，对于有人的只能释放座位,对于空座位的只能安排人员,对象之间拖拽后，直接交换座位；

步骤八：用DOM将Element元素添加到HTML中，展示到页面上

由于座位图都是通过后台数据库动态取得数据，再显示到前台页面上，通过DOM操作来将使用到的Element元素添加到HTML中，展示到页面上。

进一步，步骤六中，根据业务需求，拖拽过程中向后台数据库进行数据交互，自定义子类Ext.ux.DDPlayer继承自代理类Ext.dd.DDProxy已完成业务功能需求，具体设计说明如下：

类名：Ext.ux.DDPlayer

构造函数：参数意义与父类相同，

Ext.ux.DDPlayer = function(id, sGroup, config) {

Ext.ux.DDPlayer.superclass.constructor.apply(this, arguments);

this.initPlayer(id, sGroup, config);

};

重载函数：

startDrag：开始拖动对象时触发，拖动时，高亮目标区域

endDrag：拖拽结束时触发，结束时，还原初始样式

onDragDrop：当把一个对象拖动到一个目标对象上时触发，拖动对象放入目标对象上

自定义函数：

initPlayer：初始化代理对象的基本属性

getTargetDomRef：获取目标对象的HTMLElement

resetTargets：重置所有目标对象初始化时css样式

swapStyle：交换两个对象的Style中属性

moveToTarget：将当前对象拖拽到目标对象上

自定义属性：

TYPE：对象类型，默认值为“DDPlayer”

originalStyles：所有目标对象的CSS值

slot：当前对象占有的目标对象Object。

步骤七中，针对业务需求设计如下静态类：

类名：Ext.ux.DDPlayer.Static

私有方法：

addPer：弹出人员选择框，选择人员到指定座位

deletePer：删除指定座位上的人员，释放座位

swapPerson：交换两个座位的人员信息

公有属性：

pre_player：所有player对象的id前缀

pre_img：所有空座位图片id前缀

pre_td：所有target对象的id前缀

公有方法：

addPerCb：添加人员弹出人员选择框上回调函数

swapEl：交换两个player对象座位信息，在onDragDrop后调用

oncontextmenu：提供鼠标右击player对象事件方法，

onmouseover：提供鼠标滑过player对象事件方法

onmouseout：提供鼠标离开player对象事件方法，鼠标离开还原样式。

步骤八中， DOM操作方法如下：

document.getElementById:

根据ID获取DOM对象

用到的属性align，className，clientWidth，clientHeight

示例代码：targetObj.className = "slot";

document.createElement

动态创建DOM对象

考虑到兼容IE和火狐，使用document.createElement(targName)的方式来创建对象

示例代码：var divEle = document.createElement("div");

appendChild

将一个对象添加到另外一个对象中

示例代码：divEle.appendChild(imgEle);

innerHTML

设置一个对象的内部HTML

示例代码：divEle.innerHTML = name。

座位图查询和管理是人员管理系统中一个重要的功能，通过座位的查询可以更加直观的查询人员及其对应所需要展现的信息，考虑到全员的办公地点可能分布在各个地方，每个楼层独立开发时间和效率低下，本发明通过插件的形式，利用Photoshop工具通过将每个楼层座位基础信息做成切片文件包，然后基础主模块通过读取楼层数据文件来显示相应的楼层座位信息，以及通过后台数据库取得座位人员信息，最终将人员信息填写到座位上，实现人员座位图展示，同时考虑到人性化管理，直接拖拽实现座位的交换，以及鼠标右键实现座位的人员安排和释放。

本发明实现人员管理系统中座位图的显示、查询及最优快速便捷的对人员的座位图进行修改、换座位，确保企业人员分布图的及时更新，实现同步。

附图说明

图1是本发明中按座位图查询的流程图。

图2是本发明中座位图调整的流程图。

具体实施方式

下面结合附图对本发明进一步说明。

一种基于DragDropMgr单例的即时座位图调度的方法，包括以下步骤：

步骤一：准备座位分布图

准备楼层座位分布图（jpg或者visio图），最终转换为一个大小和分辨率适合Web浏览的图片，在Photoshop中通过菜单图像->图像大小来调节尺寸。

步骤二：利用Photoshop进行切片

在Photoshop中打开基准座位图，然后在左侧的工具栏中选择切片工具进行切片操作，然后在基准座位图中划出所有的座位区域，并设置座位区域的基本属性，以此类推，划出其他所有座位区域，并设置座位基本信息。

步骤三：利用Photoshop生成HTML源码

在基准座位图中切片都制作完成之后就可以得到我们想要的成果了，通过Photoshop的菜单文件->存储为Web和设备所有格式。打开test.html源码，找到<!-- Save for WebSlices (test.jpg) -->开头到<!-- End Save for Web Slices -->结尾即是我们所需要的楼层切片代码，其中test.jpg为图片原始名称，根据实际使用图片可能名称不同。

步骤四：创建DragDropMgr单例，显示界面

DragDropMgr是一个单例，它为浏览器窗口中所有的DragDrop元素跟踪 交互信息，用到的方法和对象：

mode：设置当前拖动碰撞模式，设置为点模式，示例代码如下

Ext.dd.DragDropMgr.mode = Ext.dd.DragDropMgr.POINT;

getDDById：用来根据ID获取拖拽过程中用到的对象DragDrop实例，示例代码如下：

var oDD = Ext.dd.DragDropMgr.getDDById(targetId);

getRelated：获取拖拽对象可以放入的所有DDTarget，示例代码如下：

var targets = Ext.dd.DragDropMgr.getRelated(this, true);

getBestMatch：拖拽过程中获取最佳匹配目标对象，示例代码如下：

oDD = Ext.dd.DragDropMgr.getBestMatch(id);

isLegalTarget：判断拖拽对象到目标位置是否为合法目标，示例代码如下：

Ext.dd.DragDropMgr.isLegalTarget(oDD.player, this.slot)

moveToEl：移动对象，示例代码如下：

Ext.dd.DragDropMgr.moveToEl(el, oDD.getEl());

步骤五：新建Target对象

一个DragDrop的实现类，它不能移动，但是可以成为拖拽的目标。目前使用了最基本的功能，只是新建一个Target对象，在运行过程中动态的增加一个重要属性：player，此属性表示当前Target的占有者是谁，类型为DDProxy或其子类。

步骤六：创建拖拽代理，跟后台数据库进行交互数据

Ext.dd.DDProxy这个是一个对拖拽的代理，可以理解为被拖拽的元素不动，代理被拖着跟随鼠标移动，这个类是比较重要的，整个座位功能拖拽交换的实现都是靠从此类继承的自定义代理类完成。

根据业务需求，拖拽过程中需要向后台数据库进行数据交互，所以，自定义子类Ext.ux.DDPlayer继承自代理类Ext.dd.DDProxy已完成业务功能需求，具体设计说明如下：

类名：Ext.ux.DDPlayer

构造函数：参数意义与父类相同，详细参考API文档

Ext.ux.DDPlayer = function(id, sGroup, config) {

Ext.ux.DDPlayer.superclass.constructor.apply(this, arguments);

this.initPlayer(id, sGroup, config);

};

重载函数：

startDrag：开始拖动对象时触发，拖动时，高亮目标区域

endDrag：拖拽结束时触发，结束时，还原初始样式

onDragDrop：当把一个对象拖动到一个目标对象上时触发，拖动对象放入目标对象上

自定义函数：

initPlayer：初始化代理对象的基本属性

getTargetDomRef：获取目标对象的HTMLElement

resetTargets：重置所有目标对象初始化时css样式

swapStyle：交换两个对象的Style中属性

moveToTarget：将当前对象拖拽到目标对象上

自定义属性：

TYPE：对象类型，默认值为“DDPlayer”

originalStyles：所有目标对象的CSS值

slot：当前对象占有的目标对象Object

步骤七：更新后台数据库，交换座位

为了满足业务需求，实现拖拽对象后直接更新后台数据库，同时支持鼠标右键安排人员座位和释放座位，对于有人的只能释放座位,对于空座位的只能安排人员,对象之间拖拽后，直接交换座位

针对以上业务需求设计如下静态类：

类名：Ext.ux.DDPlayer.Static

私有方法：

addPer：弹出人员选择框，选择人员到指定座位

deletePer：删除指定座位上的人员，释放座位

swapPerson：交换两个座位的人员信息

公有属性：

pre_player：所有player对象的id前缀

pre_img：所有空座位图片id前缀

pre_td：所有target对象的id前缀

公有方法：

addPerCb：添加人员弹出人员选择框上回调函数

swapEl：交换两个player对象座位信息，在onDragDrop后调用

oncontextmenu：提供鼠标右击player对象事件方法，

onmouseover：提供鼠标滑过player对象事件方法

onmouseout：提供鼠标离开player对象事件方法，鼠标离开还原样式

步骤八：用DOM将Element元素添加到HTML中，展示到页面上

由于座位图都是通过后台数据库动态取得数据，再显示到前台页面上，所以需要有DOM操作来将使用到的Element元素添加到HTML中，展示到页面上，下面介绍几个重要的DOM操作方法：

document.getElementById:

根据ID获取DOM对象

用到的属性align，className，clientWidth，clientHeight

示例代码：targetObj.className = "slot";

document.createElement

动态创建DOM对象

考虑到兼容IE和火狐，所以使用document.createElement(targName)的方式来创建对象

示例代码：var divEle = document.createElement("div");

appendChild

将一个对象添加到另外一个对象中

示例代码：divEle.appendChild(imgEle);

innerHTML

设置一个对象的内部HTML

示例代码：divEle.innerHTML = name。