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

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

An instant seat map scheduling method based on DragDropMgr single example

The invention discloses a method for real-time scheduling with single seat map based on DragDropMgr, which comprises the following steps: preparing a seating plan; slice by Photoshop; using Photoshop to generate HTML code; create a DragDropMgr single example, display interface; new Target object; create drag agent, interact with the background database; exchange seat update the background database, using DOM; the Element element is added to the HTML, to display on the page. The invention realizes the display and query of the seat map in the personnel management system, and optimally and quickly and conveniently revise the seat map of the personnel and change seats, so as to ensure the timely updating of the personnel distribution map and achieve synchronization.

【技术实现步骤摘要】
一种基于DragDropMgr单例的即时座位图调度的方法
本专利技术属于电力系统领域，涉及一种基于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：获取目标对象的HTMLElementresetTargets：重置所有目标对象初始化时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)的方式来创建对象示例代码：vardivEle=document.createElement("div");appendChild将一个对象添加到另外一个对象中示例代码：divEle.appendChild(imgEle);innerHTML设置一个对象的内部HTML示例代码：divEle.innerHTML=name。座位图查询和管理是人员管理系统中一个重要的功能，通过座位的查询可以更加直观的查询人员及其对应所需要展现的信息，考虑到全员的办公地点可能分布在各个地方，每个楼层独立开发时间和效率低下，本专利技术通过插件的形式，利用Photoshop工具通过将每个楼层座位基础信息做成切片文件包，然后基础主模块通过读取楼层数据文件来显示相应的楼层座位信息，以及通过后台数据库取得座位人员信息，最终将人员信息填写到座位上，实现人员座位图展示，同时考虑到人性化管理，直接拖拽实现座位的交换，以及鼠标右键实现座位的人员安排和释放。本专利技术实现人员管理系统中座位图的显示、查询及最优快速便捷的对人员的座位图进行修改、换座位，确保企业人员分布图的及时更新，实现同步。附图说明图1是本专利技术中按座位图查询的流程图。图2是本专利技术中座位图调整的流程图。具体实施方式下面结合附图对本专利技术进一步说明。一种基于DragDropMgr单例的即时座位图调度的方法，包括以下步骤：步骤一：准备座位分布图准备楼层座位分布图（jpg或者visio图），最终转换为一个大小和分辨率适合Web浏览的图片，在Photoshop中通过菜单图像-&本文档来自技高网...

【技术保护点】
一种基于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中，展示到页面上。...

【技术特征摘要】
1.一种基于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中，展示到页面上。2.根据权利要求1所述的基于DragDropMgr单例的即时座位图调度的方法，其特征在于：步骤六中，根据业务需求，拖拽过程中向后台数据库进行数据交互，自定义子类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：拖拽结束时...

【专利技术属性】
技术研发人员：王纪军，冯曙明，胡天牧，
申请(专利权)人：江苏电力信息技术有限公司，国网江苏省电力公司，
类型：发明
国别省市：江苏,32