CN108241738B

CN108241738B - Hot area plan realization method, system and device based on MVC and SVG

Info

Publication number: CN108241738B
Application number: CN201711440446.6A
Authority: CN
Inventors: 林杰芳
Original assignee: Guangdong Lemon Technology Co ltd
Current assignee: Guangdong Lemon Technology Co ltd
Priority date: 2017-12-27
Filing date: 2017-12-27
Publication date: 2021-09-21
Anticipated expiration: 2037-12-27
Also published as: CN108241738A

Abstract

The invention discloses a hot area plan realization method, a system and a device based on MVC and SVG, wherein the method comprises the following steps of dividing a plurality of units in a plan effect plan into a plurality of hot areas by using an SVG tool, and generating an SVG file; establishing a data table in an HTML format, associating data units in the data table with background data, and updating the data units in the data table in real time according to the change of the background data; and establishing a mapping relation between a plurality of hot areas in the SVG file and data units in a data table, wherein each hot area corresponds to one data unit in the data table, and obtaining a hot area plan. The invention separates the codes of the service logic and the view part by using the MVC architecture, so that when the plane effect graph is modified, only the SVG file needs to be modified without modifying the HTML file, and therefore, the method is very convenient to use. Can be widely applied to the technical field of software development.

Description

Hot area plan realization method, system and device based on MVC and SVG

Technical Field

The invention relates to the field of computer application, in particular to a hot zone plane graph implementation method, a hot zone plane graph implementation system and a hot zone plane graph implementation device based on MVC and SVG.

Background

The noun explains:

SVG: scalable vector graphics is a graphics format based on the extensible markup language (a subset of the standard generalized markup language) for describing two-dimensional vector graphics. It is an open standard, established by the world wide web consortium.

MVC: a Model View Controller is an abbreviation of a Model View Controller, a software design paradigm, organizes codes by a method of separating business logic, data and interface display, and gathers the business logic into one component, so that the business logic does not need to be rewritten while improving and personalizing a customized interface and user interaction. MVC was uniquely developed to map traditional input, processing, and output functions into a logical graphical user interface structure.

The real estate rental industry attempts to show the state or status of the real estate (e.g., for renting, selling, etc.) using a floor plan effect graph (typically in JPG format), and different states or different statuses of the rental are embodied in different colors, such as auxiliary dynamic text, dynamic effects, click events, etc. At present, the technical effect needs to be achieved, which is mainly to associate hot areas with background data one by one in an HTML file, so as to achieve the effect that a plane effect graph changes along with the background data.

However, the technical scheme has the problems that the codes of the service logic and the view part are mixed and written in an HTML file, if the floor layout is changed, the HTML file needs to be modified, and a background linkage is needed to modify a related data interface. Such a modification method is not only required to have strong expertise for a modifying person, but also needs to be widely modified, so that the modification method is inconvenient for a person who does not know the HTML language and the background development capability.

Disclosure of Invention

To solve the above technical problems, a first object of the present invention is to: the hot zone plan implementation method based on MVC and SVG is convenient to use.

A second object of the present invention is to: a hot zone plan implementation system based on MVC and SVG and convenient to use is provided.

A third object of the present invention is to: the utility model provides a hot zone plan realization device based on MVC and SVG that uses conveniently.

The first technical scheme adopted by the invention is as follows:

the hot-zone plan view implementation method based on MVC and SVG comprises the following steps:

dividing a plurality of units in a plane effect graph into a plurality of hot zones by using an SVG tool, and generating an SVG file;

establishing a data table in an HTML format, associating data units in the data table with background data, and updating the data units in the data table in real time according to the change of the background data;

and establishing a mapping relation between a plurality of hot areas in the SVG file and data units in a data table, wherein each hot area corresponds to one data unit in the data table, and obtaining a hot area plan.

Further, the number of the data units is greater than or equal to the number of the hot zones.

Further, the data unit includes at least one service data.

Further, the service data includes at least one of house number data, state data, and unit area data.

Further, the data of the states are represented by colors, and different states are represented by different colors.

Further, the method also comprises the following steps:

using an SVG tool to perform hot zone division on the other one or more plane effect graphs and generate one or more second SVG files;

and establishing a mapping relation between the hot areas in the one or more second SVG files and the data units in the data table.

The second technical scheme adopted by the invention is as follows:

the hot area plan realization system based on MVC and SVG comprises:

the SVG generation module is used for dividing a plurality of units in a plane effect graph into a plurality of hot areas by using an SVG tool and generating an SVG file;

the data table establishing module is used for establishing a data table in an HTML format and associating data units in the data table with background data, and the data units in the data table are updated in real time according to the change of the background data;

and the mapping establishing module is used for establishing a mapping relation between a plurality of hot areas in the SVG file and the data units in the data table, and each hot area corresponds to one data unit in the data table to obtain a hot area plan.

Further, the SVG generation module is further configured to use an SVG tool to perform hot zone division on another one or more planar effect graphs, and generate one or more second SVG files;

the mapping establishing module is further configured to establish a mapping relationship between the hot zones in the one or more second SVG files and the data units in the data table.

The third technical scheme adopted by the invention is as follows:

MVC and SVG-based hot-zone plan view implementation device comprises:

a memory for storing a program;

and the processor is used for loading the program to execute the hot zone plan implementation method based on the MVC and the SVG.

The method has the beneficial effects that: dividing a plurality of units in a plane effect graph into a plurality of hot zones by using an SVG tool, and generating an SVG file; establishing a data table in an HTML format, associating data units in the data table with background data, and updating the data units in the data table in real time according to the change of the background data; and establishing a mapping relation between a plurality of hot areas in the SVG file and data units in a data table, wherein each hot area corresponds to one data unit in the data table. The method separates the codes of the service logic and the view part by using the MVC architecture, and divides the plane effect graph by using the SVG tool, so that when the plane effect graph is modified, the HTML file is not required to be modified, a data interface of a background is not required to be changed, only the hot area division of the SVG file and the mapping relation between the SVG file and the HTML file are required to be modified, the modification difficulty of the SVG file is relatively low, and the modification can be completed by a general front-end engineer, so that the method is very convenient to use.

The system of the invention has the advantages that: the system comprises an SVG generation module, a data table establishment module and a mapping establishment module, wherein the system utilizes an MVC framework to separate codes of service logic and a view part, and adopts an SVG tool to divide a plane effect graph, so that when the plane effect graph is modified, an HTML file is not required to be modified, a data interface of a background is not required to be changed, only hot area division of the SVG file and a mapping relation between the SVG file and the HTML file are required to be modified, the modification difficulty of the SVG file is relatively low, and a general front-end engineer can complete the system, so that the system is very convenient to use.

The device of the invention has the beneficial effects that: the device utilizes the MVC framework, separates the codes of the service logic and the view part, and divides the plane effect picture by adopting the SVG tool, so that when the plane effect picture is modified, an HTML file is not required to be modified, a data interface of a background is not required to be changed, only the hot area division of the SVG file and the mapping relation between the SVG file and the HTML file are required to be modified, the modification difficulty of the SVG file is relatively low, and a general front-end engineer can complete the device, so the device is very convenient to use.

Drawings

FIG. 1 is a flowchart of a method for implementing a hot-zone plan based on MVC and SVG;

FIG. 2 is a flowchart of a hot zone plan implementation method based on MVC and SVG according to an embodiment of the present invention;

fig. 3 is a schematic diagram of a hot zone plan generated by the present invention.

Detailed Description

Referring to fig. 1, the method for implementing a hot zone plan based on MVC and SVG includes the following steps:

Further preferably, the number of data units is equal to or greater than the number of hot zones.

Further as a preferred embodiment, the data unit comprises at least one service data.

Further, in a preferred embodiment, the service data includes at least one of house number data, state data, and unit area data.

Further preferably, the data of the states are expressed by colors, and different states are expressed by different colors.

Further as a preferred embodiment, the method further comprises the following steps:

The hot area plan realization system based on MVC and SVG comprises:

Further as a preferred embodiment, the SVG generation module is further configured to use an SVG tool to perform hotspot division on the other one or more planar effect graphs, and generate one or more second SVG files;

MVC and SVG-based hot-zone plan view implementation device comprises:

a memory for storing a program;

The invention is further described with reference to the drawings and the specific examples.

Referring to fig. 2, the embodiment proposes a hot zone plan implementation method based on MVC and SVG, which includes the following steps:

A. the SVG tool is used to divide a plurality of units in a plane effect drawing into a plurality of hotspots and generate an SVG file. Wherein in some embodiments the SVG tool may be a Cairo, grapeviz, or inkscape, etc SVG tool.

B. Establishing a data table in an HTML format, associating data units in the data table with background data, and updating the data units in the data table in real time according to the change of the background data. A table is created, each data unit in the table may correspond to a unit of the flat effect graph, as shown in table 1, each grid represents a data unit, and each data unit may contain a plurality of service data, as shown in table 1, including 3 service data, which are sequentially a house number, a state and an area (where the state is generally represented by a color in the flat effect graph, the color is identified by text in table 1, this embodiment represents selling/renting by green, and selling/renting by red). In this step, a person skilled in the art only needs to establish a data interface between the HTML file and the background data, in other words, only needs to develop once, and does not need to change the HTML file subsequently. The data in the HTML can change in real time according to the change of the background data.

TABLE 1

101. Red, 90 Ping	102. Green, 100 Ping	103. Green, 99 Ping
			104. Red, 95 Ping	105. Green, 75 ping	106. Green, 103 ping
107. Green, 11 ping	108. Red, 60 Ping	109. Green and 82 Ping

C. And establishing a mapping relation between a plurality of hot areas in the SVG file and data units in a data table, wherein each hot area corresponds to one data unit in the data table. When the planar effect graph needs to be modified, such as modifying the floor structure, adding units and the like. Only the SVG file needs to be modified, and the divided hot area corresponds to the data unit in the HTML file, so that the modification is convenient.

In some embodiments, further comprising the steps of:

D. the additional one or more planar effect maps will be hotspot partitioned using the SVG tool and one or more second SVG files are generated.

E. And establishing a mapping relation between the hot area in the one or more second SVG files and the data unit in the data table to obtain a hot area plan.

The purpose of adding step D and step E is to improve the utilization rate of HTML files and reduce the development workload. For example, a building has six floors, each floor has 10 units, in step E-D, the developer needs to create 5 additional SVG files, and the number of data units in the HTML file is set to be greater than or equal to 60, and the six SVG files of the 6-floor building correspond to one HTML file.

The step numbers in the present embodiment are set for convenience of illustration only, the order between the steps is not limited at all, and the execution order of each step in the embodiment can be adaptively adjusted according to the understanding of those skilled in the art.

As shown in fig. 3, this embodiment provides a hot-zone plan generated by the present invention, where a square on the left side in the diagram indicates a house unit, and a shaded square is a selected unit, and in the hot-zone plan generated by the present invention, clicking a certain unit (shaded square) in the diagram pops up related information of the unit, such as a shop number, a company name, a house type, a rental and sales type, a building area, and a rental and sales status. And the service data can be automatically updated according to the change of the background data. In other embodiments, the areas of the unit in the plan effect view may also be marked in different colors.

In summary, the invention has the following advantages: the invention separates the codes of the service logic and the view part by using the MVC architecture, and divides the plane effect graph by using the SVG tool, so that when the plane effect graph is modified, the HTML file is not required to be modified, the data interface of the background is not required to be changed, only the SVG file and the mapping relation between the SVG file and the HTML file are required to be modified, the modification difficulty of the SVG file is lower than that of the HTML file, and the modification can be finished by a general front-end engineer, therefore, the invention is very convenient to use.

In addition, the invention can map a plurality of SVG files with one HTML file, thereby improving the reuse rate of the HTML file, realizing the repeated use of the HTML file after one-time development and further improving the convenience of the invention.

While the preferred embodiments of the present invention have been illustrated and described, it will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the invention as defined by the appended claims.

Claims

1. The hot zone plan view implementation method based on MVC and SVG is characterized by comprising the following steps:

2. The method of implementing a hot-zone plan based on MVC and SVG according to claim 1, characterized in that: the number of the data units is greater than or equal to the number of the hot zones.

3. The method of implementing a hot-zone plan based on MVC and SVG according to claim 2, characterized in that: the data unit includes at least one service data.

4. The method of implementing a hot-zone plan based on MVC and SVG according to claim 3, wherein: the service data includes at least one of house number data, business state data, and unit area data.

5. The method of implementing a hot-zone plan based on MVC and SVG according to claim 4, wherein: the data of the states are represented by colors, and different states are represented by different colors.

6. The method of implementing a hot-zone plan based on MVC and SVG according to claim 1, characterized in that: further comprising the steps of:

7. A hot zone plan view implementation system based on MVC and SVG is characterized by comprising:

8. The MVC and SVG-based hot zone floor plan implementation system according to claim 7, characterized in that: the number of the data units is greater than or equal to the number of the hot zones.

9. The MVC and SVG-based hot zone floor plan implementation system according to claim 7, characterized in that:

the SVG generation module is also used for carrying out hot area division on one or more other plane effect graphs by using an SVG tool and generating one or more second SVG files;

10. MVC and SVG-based hot-zone plan view implementation device is characterized by comprising:

a memory for storing a program;

a processor for loading the program to perform the MVC and SVG-based hotspot plan implementing method of claim 1.