Method and system for constructing data visualization large screen of smart city

Abstract

The invention discloses a method and a system for constructing a data visualization large screen of a smart city, and relates to the technical field of data visualization. Aiming at the technical defects existing in current large screen construction, the technical scheme adopted by the invention comprises the following steps: creating visual scenes, configuring a business theme, a data source type, an access permission and an updating frequency for each scene, and generating a unique identifier; creating a universal component or a business component, binding a data source of a corresponding scene, and configuring a display parameter; a plurality of versions are established in the same scene, and each version supports generation of a multi-level layout structure in a dragging mode; binding the content block with the component, and defining a data source, field mapping and a refreshing rule; dynamic binding and modification during operation are supported, and associated configuration of a layout structure and components is achieved; performing integrity verification on the relationship between the layout structure and the component, and then generating a rendering configuration file; the front end automatically constructs a page according to the file, and finally large-screen display, version rollback and multi-terminal self-adaptive display are achieved.

Description

Technical Field

[0001] This invention relates to the field of data visualization technology, specifically a method and system for constructing a data visualization dashboard for smart cities. Background Technology

[0002] With the deepening of smart city construction, relevant departments have deployed a large number of information systems in areas such as urban governance, public safety, transportation, energy dispatch, and environmental monitoring. These systems generate massive amounts of multi-source, heterogeneous data daily. How to uniformly display and comprehensively analyze this data has become one of the core requirements for smart city operational decision-making. Data visualization dashboards, as the "data hub" of smart cities, are important carriers for aggregating, displaying, and interacting with urban operational data. However, existing data visualization dashboard construction generally suffers from the following problems:

[0003] (1) The development model is highly dependent and lacks a configuration mechanism. Existing large screens usually adopt a front-end custom development approach to implement layout and component rendering. Different scenarios require redesigning the page structure and style, resulting in low code reuse, long construction cycle, and difficulty in later adjustments.

[0004] (2) Rigid binding of components and layout, resulting in poor scalability. In the current system, most components are fixedly bound to the page, making it difficult to achieve reusable and composable component-based management. This leads to frequent code modifications required for later feature expansion, affecting system stability.

[0005] (3) Version and scenario management is chaotic and lacks unified control. Most systems lack unified definition and management of large screen versions, layout structure and component relationships, making it difficult to switch, roll back and release different business versions, resulting in a heavy maintenance burden in the later stage.

[0006] (4) Lack of standardized data structures to support dynamic rendering. The existing data structures of visualization dashboards are often loose, and the front-end and back-end interfaces are not standardized, which cannot support the automatic generation and parsing mechanism based on structured data, thus restricting the level of automation of front-end rendering.

[0007] (5) Difficult to support parallel configuration and reuse in multiple scenarios. When multiple departments or application scenarios need to build large screens in parallel, the lack of isolation and referencing mechanisms for scenarios, components and versions can easily lead to resource conflicts and redundant development issues.

[0008] In summary, existing methods for constructing smart city data visualization dashboards generally suffer from technical bottlenecks such as low development efficiency, insufficient scalability, poor configuration flexibility, and high maintenance costs. How to build a general dashboard construction method and system that is data-driven, modularly configurable, and supports component reuse and version management has become a key technical problem that urgently needs to be solved in the informatization construction of smart cities. Summary of the Invention

[0009] This invention addresses the problems existing in current smart city data display, such as complex page customization and development, low component reusability, difficulty in layout adjustment, and inconsistent version maintenance. It provides a method and system for constructing a data visualization dashboard for smart cities, enabling unified display, dynamic configuration, and visual interactive management of multi-source heterogeneous data in smart cities, and meeting the data governance and decision support needs of multiple scenarios and terminals in smart cities.

[0010] Firstly, the present invention provides a method for constructing a data visualization dashboard for smart cities, and the technical solution adopted to solve the above-mentioned technical problems is as follows:

[0011] A method for constructing a data visualization dashboard for smart cities includes the following steps:

[0012] Step 1: Create visualization scenarios, configure the business theme, data source type, access permissions and update frequency for each scenario, and generate a unique identifier;

[0013] Step 2: Create general components or business components, set the name, type, and size of each component, bind the data source for the corresponding scenario, and configure the display parameters to ensure that the components can load valid data and be presented as expected;

[0014] Step 3: Create multiple versions in the same configured scenario. Each version supports generating a multi-level layout structure containing "version - screen - column - row - content block" through visual drag and drop. Output the multi-level layout structure in real time for subsequent binding operations between content blocks and components.

[0015] Step 4: Based on the generated layout structure, bind the content blocks to the created components, define the data source, field mapping, and refresh rules; support dynamic binding and modification at runtime without recompiling the front end, and finally realize the association configuration between the layout structure and components;

[0016] Step 5: Perform integrity verification on the layout structure and the relationship between components, and then generate a rendering configuration file; the front end automatically builds the page according to the rendering configuration file, and finally realizes large screen display, version rollback and multi-terminal adaptive display, completing the visual configuration process from scene creation to page rendering.

[0017] Optionally, perform step 1 to provide technical support for visualization scenarios through standardized data processing and independent resource management, enabling parallel operation and maintenance across multiple scenarios, as detailed below:

[0018] Through the data source adapter, the multi-source heterogeneous data associated with each scenario is converted in format, mapped in field, cleaned and integrated to generate a standardized data model in a unified manner, ensuring data availability;

[0019] Configure independent component spaces and version directories for each scenario to achieve physical isolation of data and configurations between different scenarios;

[0020] Based on the above isolation mechanism, parallel deployment and independent management of multiple business scenarios are supported, laying the foundation for subsequent component binding, version rollback and iteration management.

[0021] Optionally, after performing step 2 and creating general or business components, further define component attributes, clarify user configuration methods, and establish a component library management mechanism to achieve component reuse and migration:

[0022] Each component includes basic properties and functional properties. The basic properties include the component's English name, Chinese title, type, width, and height. The functional properties include the data source identifier, refresh rate, interaction logic, and style template.

[0023] Users can intuitively adjust the display format, color scheme, border, and font attributes of components through a graphical interface;

[0024] The configured components are stored in the component library in JSON format; the component library supports import and export, version control and batch registration, ultimately enabling cross-project reuse and cross-scenario migration of components.

[0025] Optionally, perform step 3 to create multiple versions in the same scenario that has been configured. Each version contains one or more large screens. Each large screen contains left and right layout columns. Each column defines several rows. Each row contains multiple content blocks. Each content block is configured with size, position index and bound component information.

[0026] After users generate a multi-level layout structure containing "version - screen - column - row - content block" through visual drag-and-drop, the layout description data in JSON format is automatically generated.

[0027] Optionally, the multi-level layout structure has real-time preview and integrity verification functions to prevent mismatch between the number of rows and columns and the content blocks;

[0028] The multi-level layout structure supports cloning and derived versions, making it easy to quickly create new theme layouts.

[0029] Optionally, step S4 is performed to automatically verify the compatibility of component size and layout structure, and to generate structured storage records for binding relationships.

[0030] Optionally, step 5 is performed to verify the integrity of the relationship between the layout structure and the components, including verifying the correspondence between the layout structure and the components, the legality of the field mapping, and confirming that the components and the data source used are all available.

[0031] Optionally, step 5 is executed to verify the integrity of the relationship between the layout structure and components. After the verification is successful, a structured rendering configuration file is generated. The front end parses the rendering configuration file based on the Vue framework, dynamically constructs the page layout structure, and loads the corresponding components.

[0032] Secondly, this invention provides a data visualization dashboard construction system for smart cities, and the technical solution adopted to solve the above-mentioned technical problems is as follows:

[0033] A data visualization dashboard construction system for smart cities, used to implement the method described in the first aspect, specifically includes:

[0034] The scenario creation module is used to create visual scenarios, configure the business theme, data source type, access permissions and update frequency for each scenario, and generate a unique identifier;

[0035] The component creation module is used to create general components or business components. Each component can be set with a name, type, and size, bound to the data source of the corresponding scenario, and configured with display parameters to ensure that the component can load valid data and be presented as expected.

[0036] The version and layout management module is used to create multiple versions in the same configured scenario. Each version supports the generation of a multi-level layout structure containing "version - screen - column - row - content block" through visual drag and drop. The multi-level layout structure is output in real time for subsequent binding operations between content blocks and components.

[0037] The component binding and data mapping module is used to bind content blocks to created components based on the generated layout structure, define data sources, field mappings and refresh rules; it supports dynamic binding and modification at runtime without recompiling the front end, and ultimately realizes the association configuration between the layout structure and components;

[0038] The version release and rendering module is used to verify the integrity of the layout structure and the relationship between components, and then generate a rendering configuration file. The front end automatically builds the page based on the rendering configuration file, and finally realizes large screen display, version rollback and multi-terminal adaptive display.

[0039] The present invention provides a method and system for constructing a data visualization screen for smart cities, which has the following advantages compared with the prior art:

[0040] 1. This invention can realize unified display, dynamic configuration and visual interactive management of multi-source heterogeneous data in smart cities, and solve the problems of complex large screen construction, low component reusability, insufficient layout flexibility and chaotic version management in existing technologies, so as to meet the data governance and decision support needs of multiple scenarios and multiple terminals in smart cities.

[0041] 2. This invention clarifies the theme and application scope by creating scene information; it records basic attributes such as component name, title, width, and height by creating reusable components; and it achieves a standardized description of the overall layout structure of the large screen through version creation. Each version can contain multiple large screens, each consisting of two columns, each containing multiple layout rows and content blocks. Each content block can be bound to a specific component, thus achieving complete decoupling between layout and content. The front end dynamically parses and renders based on this structured data, generating a complete visual page without manual coding, significantly reducing the complexity of large screen development and maintenance in smart city scenarios.

[0042] 3. This invention can assist smart city managers and developers in efficiently building comprehensive data dashboards covering multiple fields such as transportation, environmental protection, emergency response, and energy, enabling real-time visualization and interactive analysis of urban operation data, significantly reducing front-end development and maintenance costs, improving system flexibility, scalability, and standardization, and meeting the needs of smart cities for efficient data governance and intelligent decision-making.

[0043] 4. This invention combines a standardized data model with a visual configuration interface, allowing users to define large-screen scenes, components, and layouts without coding, reducing the front-end development threshold and improving build efficiency and cross-scene adaptability; it generates an independent component space and version directory for each scene, achieving isolation of data sources, components, and layouts; it supports parallel configuration of multiple scenes, sharing of component templates, and import and export of versions, avoiding resource conflicts and improving reuse efficiency. Attached Figure Description

[0044] Appendix Figure 1 This is a flowchart of the method according to Embodiment 1 of the present invention;

[0045] Appendix Figure 2 This is a schematic diagram of a specific layout structure as described in step 3 of Embodiment 1 of the present invention;

[0046] Appendix Figure 3 This is a module connection block diagram of Embodiment 2 of the present invention. Detailed Implementation

[0047] To make the technical solution, the technical problem solved, and the technical effect of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with specific embodiments.

[0048] Example 1:

[0049] Combined with appendix Figure 1 This embodiment proposes a method for constructing a data visualization screen for smart cities, which includes the following steps:

[0050] Step 1: Create a visualization scene, configure the business theme, data source type, access permissions and update frequency for each scene, and generate a unique identifier.

[0051] Through standardized data processing and independent resource management, technical support is provided for visualization scenarios, enabling parallel operation and maintenance across multiple scenarios, as detailed below:

[0052] Through the data source adapter, the multi-source heterogeneous data associated with each scenario is converted in format, mapped in field, cleaned and integrated to generate a standardized data model in a unified manner, ensuring data availability;

[0053] Configure an independent component space (to store dedicated visualization components) and version directory (to record historical versions of scenario configurations and data models) for each scenario to achieve physical isolation of data and configurations between different scenarios;

[0054] Based on the above isolation mechanism, parallel deployment and independent management of multiple business scenarios are supported, laying the foundation for subsequent component binding (associating standardized data with visualization components), version rollback and iteration management.

[0055] Step 2: Create general components or business components, set the name, type, and size of each component, bind the data source corresponding to the scenario, and configure the display parameters to ensure that the component can load valid data and be presented as expected.

[0056] Subsequently, component attributes were further defined, user configuration methods were clarified, and a component library management mechanism was established to enable component reuse and migration.

[0057] Each component includes basic properties and functional properties. The basic properties include the component's English name, Chinese title, type, width, and height. The functional properties include the data source identifier, refresh rate, interaction logic, and style template.

[0058] Users can intuitively adjust the display format, color scheme, border, and font attributes of components through a graphical interface;

[0059] The configured components are stored in the component library in JSON format; the component library supports import and export, version control and batch registration, ultimately enabling cross-project reuse and cross-scenario migration of components.

[0060] Step 3: Create multiple versions in the same configured scenario. Each version supports generating a multi-level layout structure containing "version - screen - column - row - content block" through visual drag and drop. Output the multi-level layout structure in real time for subsequent binding operations between content blocks and components.

[0061] Specifically, see attached document. Figure 2In the same scenario that has been configured, multiple versions can be created. Each version contains one or more large screens (e.g., two large screens). Each large screen contains left and right layout columns. Each column defines several rows (rowList). Each row contains multiple content blocks (blocks). Each content block is configured with size, position index and bound component information.

[0062] After users generate a multi-level layout structure containing "version - dashboard - column - row - content block" through visual drag-and-drop, the layout description data in JSON format is automatically generated, as shown below:

[0063]

[0064]

[0065] It should be added that: the multi-level layout structure has real-time preview and integrity verification functions to prevent mismatch between the number of rows and columns and the content blocks; the multi-level layout structure supports cloning and derived version functions, which facilitates the rapid creation of new theme layouts.

[0066] Step 4: Based on the generated layout structure, bind the content blocks to the created components, define the data source, field mapping, and refresh rules; support dynamic binding and modification at runtime without recompiling the front end, and finally realize the association configuration between the layout structure and components.

[0067] Automatically verify the compatibility of component size and layout structure, and generate structured storage records for binding relationships.

[0068] Step 5: Perform integrity verification on the layout structure and the relationship between components, and then generate a rendering configuration file; the front end automatically builds the page according to the rendering configuration file, and finally realizes large screen display, version rollback and multi-terminal adaptive display, completing the visual configuration process from scene creation to page rendering.

[0069] Specifically, the integrity of the relationship between the layout structure and components is verified, including verifying the correspondence between the layout structure and components, the legality of field mapping, and confirming that all components and data sources are available.

[0070] The integrity of the relationship between the layout structure and components is verified. Once the verification is successful, a structured rendering configuration file is generated. The front end parses the rendering configuration file based on the Vue framework, dynamically constructs the page layout structure, and loads the corresponding components.

[0071] Example 2:

[0072] Combined with appendix Figure 3 This embodiment proposes a data visualization screen construction system for smart cities, which is used to implement the method described in Embodiment 1, specifically including:

[0073] The scenario creation module is used to create visual scenarios, configure the business theme, data source type, access permissions and update frequency for each scenario, and generate a unique identifier;

[0074] The component creation module is used to create general components or business components. Each component can be set with a name, type, and size, bound to the data source of the corresponding scenario, and configured with display parameters to ensure that the component can load valid data and be presented as expected.

[0075] The version and layout management module is used to create multiple versions in the same configured scenario. Each version supports the generation of a multi-level layout structure containing "version - screen - column - row - content block" through visual drag and drop. The multi-level layout structure is output in real time for subsequent binding operations between content blocks and components.

[0076] The component binding and data mapping module is used to bind content blocks to created components based on the generated layout structure, define data sources, field mappings and refresh rules; it supports dynamic binding and modification at runtime without recompiling the front end, and ultimately realizes the association configuration between the layout structure and components;

[0077] The version release and rendering module is used to verify the integrity of the layout structure and the relationship between components, and then generate a rendering configuration file. The front end automatically builds the page based on the rendering configuration file, and finally realizes large screen display, version rollback and multi-terminal adaptive display.

[0078] In summary, the present invention provides a method and system for constructing a data visualization dashboard for smart cities, which can assist developers in quickly building comprehensive visualization dashboards covering multiple fields such as transportation, environment, energy, and security. It solves the problems existing in current smart city data display, such as complex page customization development, low component reusability, difficulty in layout adjustment, and inconsistent version maintenance.

[0079] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for constructing a data visualization large screen of a smart city, characterized in that, Includes the following steps: Step 1: Create visualization scenarios, configure the business theme, data source type, access permissions and update frequency for each scenario, and generate a unique identifier; Step 2: Create general components or business components, set the name, type, and size of each component, bind the data source for the corresponding scenario, and configure the display parameters to ensure that the components can load valid data and be presented as expected; Step 3: Create multiple versions in the same configured scenario. Each version supports generating a multi-level layout structure containing "version - screen - column - row - content block" through visual drag and drop. Output the multi-level layout structure in real time for subsequent binding operations between content blocks and components. Step 4: Based on the generated layout structure, bind the content blocks to the created components, define the data source, field mapping, and refresh rules; support dynamic binding and modification at runtime without recompiling the front end, and finally realize the association configuration between the layout structure and components; Step 5: Perform integrity verification on the layout structure and the relationship between components, and then generate a rendering configuration file; the front end automatically builds the page according to the rendering configuration file, and finally realizes large screen display, version rollback and multi-terminal adaptive display, completing the visual configuration process from scene creation to page rendering. 2.The method of claim 1, wherein, Step 1 involves standardized data processing and independent resource management to provide technical support for visualization scenarios, enabling parallel operation and maintenance across multiple scenarios, as detailed below: Through the data source adapter, the multi-source heterogeneous data associated with each scenario is converted in format, mapped in field, cleaned and integrated to generate a standardized data model in a unified manner, ensuring data availability; Configure independent component spaces and version directories for each scenario to achieve physical isolation of data and configurations between different scenarios; Based on the above isolation mechanism, parallel deployment and independent management of multiple business scenarios are supported, laying the foundation for subsequent component binding, version rollback and iteration management. 3.The method of claim 2, wherein, After performing step 2 and creating general or business components, further define component attributes, clarify user configuration methods, and establish a component library management mechanism to achieve component reuse and migration. Each component includes basic properties and functional properties. The basic properties include the component's English name, Chinese title, type, width, and height. The functional properties include the data source identifier, refresh rate, interaction logic, and style template. Users can intuitively adjust the display format, color scheme, border, and font attributes of components through a graphical interface; The configured components are stored in the component library in JSON format; the component library supports import and export, version control and batch registration, ultimately enabling cross-project reuse and cross-scenario migration of components.

4. The data visualization large screen construction method of a smart city according to claim 3, characterized in that, Execute step 3 to create multiple versions in the same configured scenario. Each version contains one or more large screens. Each large screen contains left and right layout columns. Each column defines several rows. Each row contains multiple content blocks. Each content block is configured with size, position index and bound component information. After users generate a multi-level layout structure containing "version - screen - column - row - content block" through visual drag-and-drop, the layout description data in JSON format is automatically generated.

5. The data visualization large screen construction method of a smart city according to claim 4, characterized in that, The multi-level layout structure features real-time preview and integrity verification to prevent mismatches between the number of rows and columns and the content blocks. The multi-level layout structure supports cloning and derived versions, making it easy to quickly create new theme layouts. 6.The method of claim 1, wherein, Step S4 is executed to automatically verify the compatibility of component size and layout structure, and generate structured storage records for binding relationships.

7. The data visualization large screen construction method of a smart city according to claim 1, characterized in that, Step 5 involves performing an integrity check on the relationship between the layout structure and components, including verifying the correspondence between the layout structure and components, the validity of field mappings, and confirming that all components and data sources are in a usable state.

8. The method for constructing a data visualization screen for smart cities according to claim 7, characterized in that, Step 5 involves verifying the integrity of the relationship between the layout structure and components. Once the verification is successful, a structured rendering configuration file is generated. The front-end uses the Vue framework to parse the rendering configuration file, dynamically construct the page layout structure, and load the corresponding components.

9. A data visualization large screen construction system for smart cities, characterized in that, It is used to implement the method as described in any one of claims 1-8, specifically including: The scenario creation module is used to create visual scenarios, configure the business theme, data source type, access permissions and update frequency for each scenario, and generate a unique identifier; The component creation module is used to create general components or business components. Each component can be set with a name, type, and size, bound to the data source of the corresponding scenario, and configured with display parameters to ensure that the component can load valid data and be presented as expected. The version and layout management module is used to create multiple versions in the same configured scenario. Each version supports the generation of a multi-level layout structure containing "version - screen - column - row - content block" through visual drag and drop. The multi-level layout structure is output in real time for subsequent binding operations between content blocks and components. The component binding and data mapping module is used to bind content blocks to created components based on the generated layout structure, define data sources, field mappings and refresh rules; it supports dynamic binding and modification at runtime without recompiling the front end, and ultimately realizes the association configuration between the layout structure and components; The version release and rendering module is used to verify the integrity of the layout structure and the relationship between components, and then generate a rendering configuration file. The front end automatically builds the page based on the rendering configuration file, and finally realizes large screen display, version rollback and multi-terminal adaptive display.

Images