基于MVC和SVG的热区平面图实现方法、系统和装置与流程

本发明涉及计算机应用领域，尤其是一种基于mvc和svg的热区平面图实现方法、系统和装置。
背景技术：
：名词解释：svg：可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。mvc：modelviewcontroller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。mvc被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。房地产租售行业尝尝用使用楼面平面效果图(一般是jpg格式)来展示房产的业态或者租售状态(如待租、已租、代售、已售等等)，不同的业态或者不同的租售状态通过不同的颜色体现，比如辅助的动态文字、动态效果、点击事件等。目前需要达到这样的技术效果，主要是在html文件中将热区一个一个地跟后台进行数据关联，以达到平面效果图跟随后台数据变化的效果。但是这样的技术方案存在的问题，就是业务逻辑和视图部分的代码是混合在一个html文件中书写的，如楼层布局更换了，则需要对html文件进行修改，并且需要后台联动修改相关的数据接口。这样的修改方式对于修改的人员来说，不仅需要具备较强的专业性，而且修改起来涉及的范围广，因此对于不掌握html语言和后台开发能力的人员来说使用起来并不便捷。技术实现要素：为解决上述技术问题，本发明的第一个目的在于：提供一种使用便捷的基于mvc和svg的热区平面图实现方法。本发明的第二个目的在于：提供一种使用便捷的基于mvc和svg的热区平面图实现系统。本发明的第三个目的在于：提供一种使用便捷的基于mvc和svg的热区平面图实现装置。本发明所采取的第一种技术方案是：基于mvc和svg的热区平面图实现方法，包括以下步骤：使用svg工具将一个平面效果图中的多个单位划分为多个热区，并且生成一个svg文件；建立一个html格式的数据表，并将数据表中的数据单元与后台数据进行关联，所述数据表中的数据单元根据后台数据的变化实时更新；建立所述svg文件中的多个热区与数据表中的数据单元之间的映射关系，每一个热区对应数据表中的一个数据单元，得到热区平面图。进一步，所述数据单元的数量大于等于所述热区的数量。进一步，所述数据单元包括至少一个业务数据。进一步，所述业务数据包括门牌号的数据、业态的数据和单位面积的数据中的至少一种。进一步，所述业态的数据使用颜色表示，以不同的颜色表示不同的业态。进一步，还包括以下步骤：使用svg工具将对另外的一个或者多个平面效果图进行热区划分，并生成一个或多个第二svg文件；建立所述一个或多个第二svg文件中的热区与数据表中的数据单元之间的映射关系。本发明所采取的第二种技术方案是：基于mvc和svg的热区平面图实现系统，包括：svg生成模块，用于使用svg工具将一个平面效果图中的多个单位划分为多个热区，并且生成一个svg文件；数据表建立模块，用于建立一个html格式的数据表，并将数据表中的数据单元与后台数据进行关联，所述数据表中的数据单元根据后台数据的变化实时更新；映射建立模块，用于建立所述svg文件中的多个热区与数据表中的数据单元之间的映射关系，每一个热区对应数据表中的一个数据单元，得到热区平面图。进一步，所述数据单元的数量大于等于所述热区的数量。进一步，所述svg生成模块，还用于使用svg工具将对另外的一个或者多个平面效果图进行热区划分，并生成一个或多个第二svg文件；所述映射建立模块，还用于建立所述一个或多个第二svg文件中的热区与数据表中的数据单元之间的映射关系。本发明所采取的第三种技术方案是：基于mvc和svg的热区平面图实现装置，包括：存储器，用于存储程序；处理器，用于加载所述程序以执行基于mvc和svg的热区平面图实现方法。本发明方法的有益效果是：包括使用svg工具将一个平面效果图中的多个单位划分为多个热区，并且生成一个svg文件；建立一个html格式的数据表，并将数据表中的数据单元与后台数据进行关联，所述数据表中的数据单元根据后台数据的变化实时更新；建立所述svg文件中的多个热区与数据表中的数据单元之间的映射关系，每一个热区对应数据表中的一个数据单元的步骤。本方法利用mvc架构，将业务逻辑和视图部分的代码分离，并采用svg工具对平面效果图进行划分，使得在平面效果图进行修改时，无需对html文件进行修改，也无需改动后台的数据接口，只需要修改svg文件的热区划分以及svg文件与html文件之间的映射关系即可，而svg文件的修改难度相对较低，一般的前端工程师即可完成，因此本方法使用起来非常便捷。本发明系统的有益效果是：包括svg生成模块、数据表建立模块和映射建立模块，本系统利用mvc架构，将业务逻辑和视图部分的代码分离，并采用svg工具对平面效果图进行划分，使得在平面效果图进行修改时，无需对html文件进行修改，也无需改动后台的数据接口，只需要修改svg文件的热区划分以及svg文件与html文件之间的映射关系即可，而svg文件的修改难度相对较低，一般的前端工程师即可完成，因此本系统使用起来非常便捷。本发明装置的有益效果是：包括处理器和存储器，本装置利用mvc架构，将业务逻辑和视图部分的代码分离，并采用svg工具对平面效果图进行划分，使得在平面效果图进行修改时，无需对html文件进行修改，也无需改动后台的数据接口，只需要修改svg文件的热区划分以及svg文件与html文件之间的映射关系即可，而svg文件的修改难度相对较低，一般的前端工程师即可完成，因此本装置使用起来非常便捷。附图说明图1为本发明的一种基于mvc和svg的热区平面图实现方法的方法流程图；图2为本发明的一种具体实施例的基于mvc和svg的热区平面图实现方法的流程图；图3为本发明所生成的一种热区平面图的示意图。具体实施方式参照图1，基于mvc和svg的热区平面图实现方法，包括以下步骤：使用svg工具将一个平面效果图中的多个单位划分为多个热区，并且生成一个svg文件；建立一个html格式的数据表，并将数据表中的数据单元与后台数据进行关联，所述数据表中的数据单元根据后台数据的变化实时更新；建立所述svg文件中的多个热区与数据表中的数据单元之间的映射关系，每一个热区对应数据表中的一个数据单元，得到热区平面图。进一步作为优选的实施方式，所述数据单元的数量大于等于所述热区的数量。进一步作为优选的实施方式，所述数据单元包括至少一个业务数据。进一步作为优选的实施方式，所述业务数据包括门牌号的数据、业态的数据和单位面积的数据中的至少一种。进一步作为优选的实施方式，所述业态的数据使用颜色表示，以不同的颜色表示不同的业态。进一步作为优选的实施方式，还包括以下步骤：使用svg工具将对另外的一个或者多个平面效果图进行热区划分，并生成一个或多个第二svg文件；建立所述一个或多个第二svg文件中的热区与数据表中的数据单元之间的映射关系。基于mvc和svg的热区平面图实现系统，包括：svg生成模块，用于使用svg工具将一个平面效果图中的多个单位划分为多个热区，并且生成一个svg文件；数据表建立模块，用于建立一个html格式的数据表，并将数据表中的数据单元与后台数据进行关联，所述数据表中的数据单元根据后台数据的变化实时更新；映射建立模块，用于建立所述svg文件中的多个热区与数据表中的数据单元之间的映射关系，每一个热区对应数据表中的一个数据单元，得到热区平面图。进一步作为优选的实施方式，所述数据单元的数量大于等于所述热区的数量。进一步作为优选的实施方式，所述svg生成模块，还用于使用svg工具将对另外的一个或者多个平面效果图进行热区划分，并生成一个或多个第二svg文件；所述映射建立模块，还用于建立所述一个或多个第二svg文件中的热区与数据表中的数据单元之间的映射关系。基于mvc和svg的热区平面图实现装置，包括：存储器，用于存储程序；处理器，用于加载所述程序以执行基于mvc和svg的热区平面图实现方法。下面结合说明书附图和具体的实施例对本发明进行进一步的说明。参照图2，本实施例提出了一种基于mvc和svg的热区平面图实现方法，包括以下步骤：a、使用svg工具将一个平面效果图中的多个单位划分为多个热区，并生成一个svg文件。其中在一些实施例中svg工具可以是cairo、graphviz或者inkscape等svg工具。b、建立一个html格式的数据表，并将数据表中的数据单元与后台数据进行关联，所述数据表中的数据单元根据后台数据的变化实时更新。建立一个表格，可以表格中每一个数据单元对应平面效果图的一个单位，如表1所示，每一个格子代表一个数据单元，而每个数据单元中可以含有多个业务数据，如表1中包含3个业务数据，依次为门牌号、业态和面积(其中，业态在平面效果图中一般以颜色表示，表1中使用文字对颜色进行标识，本实施例以绿色表示待售/租，红色表示已售/租)。在该步骤中，本领域技术人员只需要建立html文件和后台数据之间的数据接口即可，换句话说，仅需要进行一次开发，后续均无需对html文件进行改动。html中的数据会根据后台数据的变动，实时变动。表1101、红色、90平102、绿色、100平103、绿色、99平104、红色、95平105、绿色、75平106、绿色、103平107、绿色、11平108、红色、60平109、绿色、82平c、建立所述svg文件中的多个热区与数据表中的数据单元之间的映射关系，每一个热区对应数据表中的一个数据单元。当需要对平面效果图进行修改时，如修改楼层结构，添加单位等等。仅需要对svg文件进行修改，将划分出的热区与html文件中的数据单元对应即可，修改起来比较便捷。在一些实施例中，还包括以下步骤：d、使用svg工具将对另外的一个或者多个平面效果图进行热区划分，并生成一个或多个第二svg文件。e、建立所述一个或多个第二svg文件中的热区与数据表中的数据单元之间的映射关系，得到热区平面图。增加步骤d和步骤e的目的在于，提升html文件的利用率，减少开发工作量。例如，一个建筑有六层，而每一层有10个单位，在步骤e-d中，开发人员至需要再建立额外的5个svg文件，并将html文件中数据单元的数量设置成大于等于60个即可，将6层建筑的六个svg文件对应一个html文件，无论是哪一层楼层发生了修改，只需要修改svg文件，而无需改动html文件。对于本实施例中的步骤编号，其仅为了便于阐述说明而设置，对步骤之间的顺序不做任何限定，实施例中的各步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。如图3所示，本实施例提供了本发明所生成的一种热区平面图，其中图中左侧的方形标示房产单元，带有阴影的方形为被选中的单元，在本发明生成的热区平面图中，点击图中的某个单元(带阴影的方形)，会弹出该单元的相关信息，如商铺编号、公司名称、房产类型、租售类型、建筑面积和租售状态等。而上述业务数据，会根据后台数据的变动自动更新。在另一些实施例中，也可以不同的颜色对单位的在平面效果图中的区域进行标示。综上所述，本发明具有以下优点：本发明利用mvc架构，将业务逻辑和视图部分的代码分离，并采用svg工具对平面效果图进行划分，使得在平面效果图进行修改时，无需对html文件进行修改，也无需改动后台的数据接口，只需要修改svg文件以及svg文件与html文件之间的映射关系即可，而svg文件的修改难度相对html文件的修改难度较低，一般的前端工程师即可完成，因此本发明使用起来非常便捷。此外，本发明还可以将多个svg文件与一个html文件进行映射，提升了html文件的复用率，做到html文件的一次开发多次使用，进一步提升了本发明的便捷性。以上是对本发明的较佳实施进行了具体说明，但本发明并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。当前第1页12