Visual information display method and device, equipment, storage medium and program product

Abstract

The invention discloses a visual information display method and device, equipment, a storage medium and a program product. The method comprises the following steps: displaying a billboard interface, wherein the billboard interface comprises a report component column and a billboard area; receiving a dragging operation of a user to adjust a display position of a target report component in the report component column or the billboard area in the billboard area; receiving a configuration operation of a user to configure a data set associated with the target report component and layout information of the target report component; and performing report display based on the data set and the layout information. The method comprises the following steps: displaying a billboard interface, selecting and adjusting the display position of a required report component by a user through dragging operation on the billboard interface, configuring the report component, and configuring data needing to be displayed and a layout when information is displayed, so as to display a report. Therefore, report display can be carried out in a self-defined manner based on personal requirements of the user, the personalized and flexible requirements of the user can be met, and the management efficiency is improved.

Description

TECHNICAL FIELD

[0001] The present application belongs to the technical field of information display, and particularly relates to a visual information display method, an information display device, an electronic device, a computer readable storage medium and a computer program product. BACKGROUND

[0002] With the rapid development of the semiconductor industry, production data is increasingly large and complex, and the demand for visual display and analysis of data is increasingly urgent. The board report is an important basis for managers to conduct real-time monitoring and decision analysis. However, the traditional board report often uses fixed layout and display method, which is difficult to meet the needs of users for personalization and flexibility, and improve management efficiency. SUMMARY

[0003] The present application aims to at least solve one of the technical problems existing in the prior art. To this end, the present application provides a visual information display method, an information display device, an electronic device, a computer readable storage medium and a computer program product, which can realize custom editing of the report, configure the required report based on user needs, meet the needs of users for personalization and flexibility, and improve management efficiency.

[0004] In a first aspect, the present application provides a visual information display method, which comprises: displaying a board interface, the board interface comprising a report component bar and a board area; receiving a user's drag operation to adjust the display position of a target report component in the report component bar or the board area in the board area; receiving a user's configuration operation to configure a data set associated with the target report component and layout information of the target report component; and performing report display based on the data set and the layout information.

[0005] In a second aspect, the present application provides an information display device, which comprises an interface display module, a drag module, a configuration module and a report display module. The interface display module is configured to display a board interface, the board interface comprising a report component bar and a board area; the drag module is configured to receive a user's drag operation to adjust the display position of a target report component in the report component bar or the board area in the board area; the configuration module is configured to receive a user's configuration operation to configure a data set associated with the target report component and layout information of the target report component; and the report display module is configured to perform report display based on the data set and the layout information.

[0006] In a third aspect, the present application provides a non-transitory computer readable storage medium having a computer program stored thereon, the computer program being executed by a processor to implement the above-mentioned visual information display method.

[0007] In a fourth aspect, the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned visualized information display method when executing the program.

[0008] In a fifth aspect, the present application provides a computer program product, comprising a computer program, wherein the computer program is executed by a processor to implement the above-mentioned visualized information display method.

[0009] The visualized information display method, the information display device, the electronic device, the computer readable storage medium and the computer program product provided by the embodiments of the present application can display a board interface, the user selects and adjusts the display position of the required report component through a drag operation on the board interface, and then configures the report component, configures the data to be displayed and the layout of the display information, and displays the report. In this way, the report display can be customized based on the personal needs of the user, the personalized and flexible needs of the user can be met, and the management efficiency is improved. BRIEF DESCRIPTION OF DRAWINGS

[0010] The above and / or additional aspects and advantages of the present application will become apparent and be readily understood from the following description, taken in conjunction with the following drawings, in which:

[0011] Figure 1 is an application scenario diagram of the visualized information display method provided by some embodiments of the present application;

[0012] Figure 2 is a flowchart of the visualized information display method provided by some embodiments of the present application;

[0013] Figure 3 is a scenario diagram of the visualized information display method provided by some embodiments of the present application;

[0014] Figure 4 is a flowchart of the visualized information display method provided by some embodiments of the present application;

[0015] Figure 5 is a flowchart of the visualized information display method provided by some embodiments of the present application;

[0016] Figure 6 is a module diagram of the information display device provided by the embodiments of the present application;

[0017] Figure 7 is a structural diagram of the electronic device provided by the embodiments of the present application; and

[0018] Figure 8 is a hardware structure diagram of the electronic device provided by the embodiments of the present application. DETAILED DESCRIPTION

[0019] Embodiments of the present application are described in detail below with reference to the attached drawing figures, wherein the same or like component have the same or similar designations throughout the attached drawing figures. The embodiments described below are exemplary only, and are not intended to be limiting of the present application.

[0020] For the convenience of understanding, the technical background and application scenarios of the present application are introduced as follows:

[0021] The semiconductor computer integrated manufacturing (CIM) system as the core information system in the semiconductor manufacturing process involves complex process flow, equipment monitoring, data management and decision support, etc. Different semiconductor enterprises, production lines and even different equipment on the same production line may have unique operation requirements, data display requirements and user interface preferences. Therefore, a highly configurable front-end interface technology is crucial to meet these diverse needs.

[0022] With the continuous progress of semiconductor technology, new equipment, processes and management requirements are emerging, which poses higher challenges to the flexibility and adaptability of the CIM system. Traditional front-end interface design often uses fixed layout and functions, which is difficult to adapt to these rapidly changing needs. A user-oriented semiconductor front-end interface configuration technical solution allows users to flexibly adjust the layout, components, functions and interaction modes of the interface according to actual needs, thereby realizing rapid response to different scenarios and business needs.

[0023] With the rapid development of the semiconductor industry, production data is increasingly large and complex, and the demand for data visualization and analysis is increasingly urgent. Its dashboard report is an important basis for managers to conduct real-time monitoring and decision analysis. However, traditional dashboard reports often use fixed layout and display methods, which are difficult to meet the needs of users for personalization and flexibility. Different users, different application scenarios and different decision levels may need different dashboard reports to display key indicators and data. A user-oriented semiconductor front-end interface configuration technical solution allows users to freely combine and adjust charts, data tables and other components in the dashboard report through simple drag-and-drop and placement operations, realizing intuitive display and comparative analysis of data.

[0024] In summary, the invention background of the highly configurable front-end interface technology in the field of semiconductor CIM mainly comes from the satisfaction of diversified needs in the semiconductor manufacturing process and the improvement of system flexibility and adaptability. Through the application of this technology, the usability and ease of use of the CIM system can be greatly improved, creating greater value for enterprises.

[0025] Please refer to Figure 1 , Figure 1 is an application scenario of a visual information display method provided in an embodiment of the present application. The application scenario provided in the present application includes an electronic device 101 and a server 102, and the visual information display method provided in the present application can be executed by at least one of the electronic device 101 and the server 102.

[0026] The electronic device can include, but is not limited to, a smart phone (such as an Android phone, an IOS phone, etc.), a tablet computer, a notebook computer, a desktop computer, a smart watch, a portable personal computer, a mobile Internet device (Mobile Internet Devices, MID for short), a smart home appliance, a vehicle-mounted terminal, a wearable device, etc., and the present application is not limited thereto.

[0027] The server can be a standalone physical server, or a server cluster or a distributed system composed of multiple physical servers, or a cloud server providing cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and basic cloud computing services such as big data and artificial intelligence platforms, and the present application is not limited thereto.

[0028] It should be noted that Figure 1 The number of electronic devices and servers is only used as an example, and the number of electronic devices and servers can also be more or less, which is not limited herein. The electronic device and the server can be directly or indirectly connected through wired or wireless communication, and the present application is not limited thereto.

[0029] The visual information display method involved in the present application can be implemented by relying on cloud technology.

[0030] The cloud technology refers to a hosting technology that unifies a series of resources such as hardware, software, and network in a wide area network or a local area network to realize data calculation, storage, processing, and sharing.

[0031] Cloud technology is a general term for network technology, information technology, integration technology, management platform technology, application technology and the like based on cloud computing business model application, can form a resource pool, on-demand use, flexible and convenient. Cloud computing technology will become an important support. The background service of the technical network system needs a large amount of computing and storage resources, such as video websites, picture websites and more portals. With the high development and application of the Internet industry, every item in the future may have its own identification mark and needs to be transmitted to the background system for logical processing. Different levels of data will be processed separately, and various industry data will need strong system support, which can only be realized through cloud computing.

[0032] The visual information display method of the present application can be implemented based on cloud computing. Cloud computing is a computing mode that distributes computing tasks on a large number of computing resources to make various application systems able to obtain computing power, storage space and information services as needed. The network providing resources is called "cloud". The resources in the "cloud" are infinitely expandable to users and can be obtained at any time, used on demand, expanded at any time, and paid according to use.

[0033] As a basic capability provider of cloud computing, a cloud computing resource pool (referred to as a cloud platform, generally referred to as an IaaS (Infrastructure as a Service) platform) is established, and a plurality of types of virtual resources are deployed in the resource pool for external customers to select and use. The cloud computing resource pool mainly includes: computing devices (virtualized machines containing operating systems), storage devices, network devices.

[0034] The visual information display method in the embodiments of the present application can be at least one of a server and an electronic device, that is, the method can be executed by the server or the electronic device alone, or by the server and the electronic device together. Therefore, the execution subject of each step will not be repeated in the following description.

[0035] It should be noted that in the following examples of the visual information display method, the electronic device executes the visual information display method is taken as an example for description. Those skilled in the art can apply the visual information display method provided by the embodiments of the present application to other types of scenes (such as the server executing the visual information display method, or the electronic device cooperating with the server to execute the visual information display method) according to the understanding of the following description.

[0036] Based on the introduction of the above-mentioned related scenarios, the present application provides a visual information display method, which will be described in detail as follows:

[0037] Please refer to Figure 2 A visual information display method provided in an embodiment of the present application is implemented by steps 011 to 014, which are described in detail below.

[0038] Step 011: Display the dashboard interface, which includes the report component bar and the dashboard area;

[0039] Among them, the dashboard interface is used for report editing and display.

[0040] Specifically, the signage interface can be displayed on a display screen of an electronic device. The display screen can be a touch screen that can receive touch operations to operate the signage interface. Alternatively, the electronic device can have only a display function and can also include control components such as a mouse and touchpad to operate the signage interface.

[0041] Optionally, when the electronic device receives the user's operation of creating a report board, it displays the board interface.

[0042] In other words, when users need to display a report, they can first create a report dashboard. For example, they can create basic information such as the report dashboard's name, type, and status and store it in the database. Subsequently, the information for each report configured on the dashboard interface is stored in the corresponding data row record for that report dashboard. This allows users to create different report dashboards to meet different report viewing needs.

[0043] After creation, you can enter the dashboard interface and customize the subsequent reports you need on the dashboard interface.

[0044] Step 012: Receive a user's drag operation to adjust the display position of the target report component in the report component bar or the kanban area.

[0045] Optionally, a drag operation refers to a user clicking and holding a movable object (such as Figure 3 The report component in the report component bar S1 or the report component in the kanban area S2) is then moved to another position in the interface and released to adjust the position of the object.

[0046] It is understandable that different users have different preferences for viewing reports. For example, some like to align multiple reports horizontally, while others prefer vertical alignment. Therefore, users can adjust the display position of the target report component by dragging it to a position that meets their needs. Figure 3 As shown, the user drags the bar chart to the board area S2.

[0047] Optionally, the report component in the report component bar comprises at least one of a column chart, a line chart, a pie chart, a column line chart, a funnel chart, a percentage chart, a word cloud chart, a heat map chart, a radar chart, a scale, and a scatter chart. A user can drag a suitable target report component according to a requirement.

[0048] Referring to Figure 4 Optionally, step 012 comprises:

[0049] Step 0121: In a case of listening to a drag start event corresponding to a drag start operation, it is determined that the drag start operation is received.

[0050] Step 0122: In a case of listening to a drag end event corresponding to a drag end operation, it is determined that the drag end operation is received.

[0051] Specifically, in order to obtain the operation condition of the drag operation, the drag start and the drag end can be determined by listening to a drag start event corresponding to a drag start operation and a drag end event corresponding to a drag end operation. In a case of listening to the drag start event, the target report component can be determined according to the drag start position. In a case of listening to the drag end event, the display position of the target report component after adjustment can be determined according to the drag end position.

[0052] For example, taking HTML5 as an example, the newly added Drag and Drop API in HTML5 is the basis for realizing the drag effect. This API allows developers to handle drag operations by listening to specific events (such as dragstart, dragover, drop, etc.). When a user drags a target report component, the dragstart event (i.e., the drag start event) is triggered. When it is dragged to the target area, the dragover or dragenter event is triggered. When the mouse is released, the drop event (i.e., the drag end event) is triggered.

[0053] Through JavaScript, developers can listen to the above-mentioned Drag and Drop events and perform corresponding operations when the events are triggered. For example, in the dragstart event, the data (such as ID, position, etc.) of the target report component being dragged can be set, so that the target report component can be identified during the dragging process and when it is released. In the dragover or dragenter event, the style (such as highlighting) of the target area can be set to provide visual feedback. In the drop event, the position of the element can be updated or other operations can be performed according to the data of the target report component being dragged and the information of the target area.

[0054] CSS (Cascading Style Sheets) is a style language that can be used to describe the style of an HTML document, which can be used to control the style and layout of the target report component. Through CSS, the appearance, position, size, etc. of the target report component can be defined. In the implementation of the dragable report component, CSS is usually used to set the initial position of the element, the style change (such as transparency, shadow, etc.) during dragging, and the style of the target area.

[0055] In practical applications, the dragable dashboard usually interacts with the backend database or other data sources to realize the synchronization and persistence of data. That is, when the user drags the target report component, the updated data (such as the updated position) of the target report component can be stored to the database through AJAX and other technologies. At the same time, the stored data of each report component can also be obtained from the database to dynamically generate and display each report component.

[0056] Step 013: receiving the configuration operation of the user to configure the data set associated with the target report component and the layout information of the target report component.

[0057] Among them, the configuration operation refers to the operation of configuring the data to be displayed by the target report component and the style during display.

[0058] Specifically, the user can perform a configuration operation on the target report component, thereby configuring the data set associated with the target report component (i.e. the source of the data to be displayed by the target report component) and the layout information of the target report component (i.e. the layout (such as length, width, style, shape, etc.) of the target report component during display).

[0059] Each report component is provided with an attribute column, and the attribute column is used to configure the data set and the layout information. It can be understood that the report component can be configured by the developer through the front-end code to generate the corresponding report component.

[0060] The specific configurable items of the attribute column are described in detail as follows:

[0061] Attribute column: as shown in Figure 3 The attribute column is divided into a data column and an interface layout column. Among them, the data column is used to configure the data set, and the interface layout column is used to configure the layout information.

[0062] Each column is a form. Clicking the data column will display a data type radio box by default, and the radio box is selected by default. There is also a static data editing button below, which will pop up a JSON format static data window when clicked. The user can modify it, and click OK to dynamically render the dashboard component immediately.

[0063] When the single selection box selects dynamic data, a refresh time digital input box (refresh data every few milliseconds), a data set drop-down box, and a data source are displayed. The data source is a pre-created data set, and the required data source can be selected according to the needs.

[0064] The data column also includes X-axis and Y-axis drop-down data boxes. The data sources of the two drop-down boxes are the key names of the JSON object returned by the data set. By selecting different keys, different types of data report displays can be realized.

[0065] The interface layout column includes background information, title information, report shape information, and report coordinate axis information.

[0066] The following takes a column chart as an example to explain the interface layout column in detail.

[0067] Clicking the interface configuration column displays a form with background color (corresponding to background information), title setting (corresponding to title information), column setting (corresponding to report shape information), X-axis and Y-axis setting (corresponding to report coordinate axis information), and report component layout setting (corresponding to report component layout information).

[0068] Among them, the background color is a color picker. The user selects the color immediately and it takes effect in the column chart.

[0069] The title setting is a collapsed form. After clicking to expand, it has form items such as title name, display or not, font color, font size, and alignment:

[0070] The title name is a text box, and the user can freely configure the title name.

[0071] The display or not is a switch. If it is turned on, the board title is displayed, and if it is turned off, the board title is hidden.

[0072] The font color is a color picker, and the user can freely configure the font color.

[0073] The font size is a digital input box, and the user can freely configure the font size.

[0074] The alignment is a drop-down box, and the data source is center, left alignment, and right alignment.

[0075] The column setting is a collapsed form. After clicking to expand, it has form items such as column width, height, spacing, and color:

[0076] The column width is a slider. The user can freely set the column width by dragging the mouse.

[0077] The height is a slider. The user can freely set the height by dragging the mouse.

[0078] The spacing is a slider. The user can freely set the spacing by dragging the mouse.

[0079] Color is a color picker, users are free to configure the color.

[0080] In which, the X axis is set to a shrink form, click to expand will have X axis whether display, X axis on the font whether display, font color, font size, axis color form items such as:

[0081] X axis whether display is a switch, if the X axis is displayed, the X axis is hidden.

[0082] X axis on the font whether display is a switch, if the X axis is displayed, the X axis is hidden.

[0083] Font color is a color picker, users are free to configure the X axis on the font color.

[0084] Font size is a digital input box.

[0085] Axis color is a color picker, users are free to configure the axis color.

[0086] In which, Y axis is set to a shrink form, click to expand will have Y axis whether display, Y axis on the font whether display, font color, font size, axis color form items such as:

[0087] Y axis whether display is a switch, if the Y axis is displayed, the Y axis is hidden.

[0088] Y axis on the font whether display is a switch, if the Y axis is displayed, the Y axis is hidden.

[0089] Font color is a color picker, users are free to configure the Y axis on the font color.

[0090] Font size is a digital input box.

[0091] Axis color is a color picker, users are free to configure the axis color.

[0092] In which, the report component layout setting includes left margin, top margin, width, height four digital input box, users can freely input, or through the mouse move or touch operation to adjust the size and position of the report component.

[0093] Optionally, the implementation of the attribute bar is mainly based on the front-end encapsulated dynamic form, and the implementation principle is as follows:

[0094] (1) HTML template: use HTML5 <form>Elements serve as the foundation, building the static structure of the form. The form items of a dynamic form, such as input boxes, selection boxes, etc., are not directly written in HTML, but are dynamically generated by Vue.

[0095] (2) JavaScript (or TypeScript) logic processing: Define one or more JavaScript objects or arrays to store the data and configurations of form items. Based on these data and configurations, use Vue's rendering methods to dynamically generate form items and insert them into elements. Implement the interactive logic of form items, such as input event listening for input boxes, option change listening for selection boxes, etc. Implement the submission logic of the form, including data collection, verification, and sending.

[0096] (3) Data binding: Use the data binding function provided by Vue to bind the values of form items with the data in JavaScript objects or arrays bidirectionally. When the user inputs in the form, the data object will be automatically updated; at the same time, when the data object changes, the display of the form item will also be automatically updated.

[0097] (4) Form validation: Define form validation rules in JavaScript, which can be simple custom rules or use the validation library provided by Vue. When the user inputs or submits the form, validate the form items according to the validation rules and give corresponding prompts. Validation can be achieved through the required attribute, pattern attribute, or custom validation function of the form item.

[0098] (5) Form submission: Implement a form submission function that executes after the form validation passes. In this function, collect the values of form items (i.e. the values in the data object), and construct an HTTP request (such as a POST request) to send to the server. Process the response returned by the server and give the user corresponding prompts.

[0099] (6) Encapsulate components: In order to improve the reusability and maintainability of the code, the related logic of the dynamic form can be encapsulated into one or more components. These components can include the template of the form, JavaScript logic, CSS styles, etc. Components can be configured through parameters to adapt to different form requirements.

[0100] (7) Responsive design: Use the media query function of CSS3 to achieve adaptive display of the dynamic form on different devices and screen sizes. Different style rules can be defined for different screen sizes to ensure that the form can be displayed and interacted with well on different devices.

[0101] Please continue to refer to Figure 4 Optionally, step 013 comprises:

[0102] Step 0131: receiving a first editing operation of a user on a data column to configure a data set associated with a target report component;

[0103] Step 0132: Receive a second editing operation of the user on the interface layout bar to configure layout information of the target report component, where the layout information includes at least one of background information, title information, report shape information, report coordinate axis information, and report component layout information.

[0104] Specifically, the user performs a first editing operation on the data column to configure the data set associated with the target report component and the type of data displayed on the X-axis and the Y-axis.

[0105] The second editing operation on the interface layout bar is performed to configure the layout information of the target report component, where the layout information includes at least one of background information, title information, report shape information, report coordinate axis information, and report component layout information.

[0106] Step 014: Display the report based on the dataset and layout information.

[0107] Specifically, after the data set and layout information of each report component are configured, the report can be displayed based on the data set and layout information of each report component.

[0108] Optionally, when each report component is displayed, it obtains data from the configured data set, and then renders the page for the obtained data based on the layout information to display the report.

[0109] For example, a pie chart can be used to display the number of devices in different states. For example, if the device states are divided into IDLE, RUN, DOWN, OFF, etc., each area of ​​the pie chart will display the number of devices in different states. The larger the number, the larger the area of ​​the corresponding area.

[0110] Optionally, when presenting a report, in order to reduce the amount of data to be acquired, data related to the coordinate axis is read from the data set based on the coordinate axis information.

[0111] Specifically, the data to be obtained can be determined based on the coordinate axis information configured by the user, that is, the keys selected in the drop-down data boxes of the X-axis and Y-axis, so that the corresponding data can be read from the data set according to the keys selected in the drop-down data boxes for report display.

[0112] The information display method of visualization of the present application displays a board interface, a user selects and adjusts the display position of a required report component by drag operation on the board interface, and then configures the report component to configure the data to be displayed and the layout of the display information, so as to display the report. In this way, the report display can be customized based on the personal needs of the user, the personalized and flexible needs of the user can be met, and the management efficiency is improved.

[0113] In some embodiments, referring to Figure 5 The information display method of visualization further includes:

[0114] Step 015: creating a data source;

[0115] Step 016: creating a data set based on the created data source.

[0116] Specifically, the process of creating a data source is as follows:

[0117] Configure the data source type, data source encoding, data source name, JDBC (Java Database Connectivity) driver, connection address, login account, password and other information, wherein the data source type can specify various relational databases, and can also specify HTTP, elasticsearch (a open source search engine and analysis engine based on Apache Lucene library) and the like, and the implementation principle is as follows:

[0118] (1) Create a data source table in the database.

[0119] (2) When the data source type is a relational database, test the connection through the getConnection() method of HikariPool, when no exception is thrown, the connection is successful, and the data source table is stored, and when an exception is thrown, the connection fails, and the data source table is not stored.

[0120] (3) When the data source type is HTTP, elasticsearch, test the connection through the exchange() method of RestTemplate, when no exception is thrown, the connection is successful, and the data source table is stored, and when an exception is thrown, the connection fails, and the data source table is not stored.

[0121] The process of creating a data set is as follows:

[0122] Configure the data source, data set encoding, data set name, query SQL, request path, query parameter and other information, wherein SQL data set can be created, and HTTP data set can also be created, and the implementation principle is as follows:

[0123] (1) Create a data set table in the database.

[0124] (2) When the SQL dataset is created, the connection is obtained through the getConnection() method of HikariPool, and then the PreparedStatement is obtained, the SQL is executed, and finally the ResultSet obtained is processed by code to assemble the data into a JSON object and returned to the front end to show the user. When there is no exception, it is stored in the dataset table, and when there is an exception, it is not stored in the dataset table.

[0125] (3) When the HTTP dataset is created, the exchange() method of RestTemplate is used to obtain ResponseEntity, and finally the body obtained is processed by code to assemble the data into a JSON object and returned to the front end to show the user. When there is no exception, it is stored in the dataset table, and when there is an exception, it is not stored in the dataset table.

[0126] In order to facilitate the understanding of the above-mentioned visual information display method, the following will be described in combination with specific examples:

[0127] For example, a semiconductor factory will produce according to the pre-configured process flow during production, each process flow has multiple processes, and each process station corresponds to a device. The process of entering each station device is called into station, and the process of ending the running of each station device is called out station. Based on the above production process explanation, when the user needs to view the number of batches to be in station and out station within a period of time, the user can first create a dataset based on the number of batches to be in station and out station, then drag and drop the column chart component through the drag and drop operation, and configure the dataset and layout information through the configuration operation, then select the batch process state returned by the dataset in the X-axis drop-down data bar, select the batch quantity returned by the dataset in the Y-axis drop-down data bar, and click refresh. After that, the board interface will automatically render dynamic data to the column chart.

[0128] For another example, when each station is running, it is called in-process batch, and the user needs to view the daily trend and same period trend of in-process batch quantity at each time period on a certain day. The user can drag and drop the line chart component through the drag and drop operation, select the configured dataset (such as the dataset created by the in-process batch quantity data), and configure the layout information, select the time period returned by the dataset in the X-axis drop-down data bar, select the in-process batch quantity at each time period returned by the dataset in the Y-axis drop-down data bar, and select the in-process batch quantity at each time period of the previous year in the Y-axis drop-down data bar. After that, click refresh, and the board interface will automatically render dynamic data to the line chart.

[0129] For example, the device state is divided into IDLE (idle), RUN (running), DOWN (down), OFF (off) and other states, and each state is automatically converted according to the batch state. When the user needs to view the proportion of the number of devices in each state in the total number of devices, the pie chart component is dragged, the dataset generated by the number of devices in different device states is selected, the Y-axis drop-down data bar selects the proportion of devices in each state returned by the dataset, the X-axis drop-down data bar selects the device state returned by the dataset, and the interface automatically renders dynamic data to the pie chart after clicking refresh.

[0130] In summary, the present application has the following beneficial effects:

[0131] 1. Improve user friendliness and operation efficiency: through the intuitive visual interface, the user can complete the complex coding work through simple configuration or drag operation, thereby greatly improving the convenience and efficiency of operation. This user-friendly design reduces the learning curve, so that new users can master the use method of the system faster, reducing training time and cost.

[0132] 2. Real-time monitoring and data analysis: through report display, the combination of real-time monitoring and data analysis functions is realized, so that the user can intuitively understand various parameters and states in the manufacturing process. By dragging different report components, the user can easily customize the monitoring interface and analysis report, so as to better understand the performance and bottleneck of the manufacturing process.

[0133] 3. Reduce errors and improve accuracy: by reducing tedious manual input and configuration steps, most of which can be completed through drag and click operations, the possibility of human error is reduced, thereby improving the accuracy and reliability of operation.

[0134] 4. Quickly respond to technical changes and updates: in the field of semiconductor CIM, technology and process are constantly developing and updating. A user-oriented semiconductor front-end interface configuration technology solution enables enterprises to adapt to these changes more quickly. By simply updating or adding new drag components and modules, enterprises can easily integrate new technical and process report data into existing report interfaces or create new report interfaces.

[0135] According to the method described in the above embodiment, the embodiment of the present application also provides an information display device 300 for executing the steps in the above-mentioned visual information display method. Please refer to Figure 6 , Figure 6 is a structural schematic diagram of the information display device 300 provided by the embodiment of the present application. The information display device 300 comprises:

[0136] The interface display module 301 is used to display the Kanban interface, and the Kanban interface comprises a report component bar and a Kanban area.

[0137] The dragging module 302 is configured to receive a user's dragging operation to adjust a display position of a target report component in a dashboard area.

[0138] The configuration module 303 is configured to receive a user's configuration operation to configure a data set associated with the target report component and layout information of the target report component.

[0139] The report display module 304 is configured to display the report based on the data set and the layout information.

[0140] It should be noted that the specific details of the modules in the information display device 300 have been described in detail in the above embodiments of the visualized information display method, and will not be repeated here.

[0141] In the embodiments of the present application, the term "module" or "unit" refers to a computer program or a part of a computer program with a predetermined function, and works with other related parts to achieve a predetermined target, and can be implemented entirely or partially by using software, hardware (such as a processing circuit or a memory) or a combination thereof. Similarly, one processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be a part of an overall module or unit that includes the functions of the module or unit.

[0142] In some embodiments, the information display device in the embodiments of the present application can be implemented in a hardware manner, such as an electronic device or a component in an electronic device, for example, an integrated circuit or a chip; the information display device can also be implemented in a software manner, such as an application installed in an electronic device.

[0143] In some embodiments, please refer to Figure 7 , Figure 7 is a structural schematic diagram of an electronic device provided by the embodiments of the present application. The electronic device 400 includes a processor 401 and a memory 402. The memory 402 stores a computer program 403 that can run on the processor 401. The program 403 is executed by the processor 401 to implement the various processes of the above-mentioned embodiments of the visualized information display method and achieve the same technical effects. To avoid repetition, details will not be repeated here.

[0144] Please refer to Figure 8 , Figure 8 1 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application. The electronic device can be a terminal or a server. Exemplarily, the electronic device 500 includes a central processing unit (CPU) 501, a system memory 504 including a random access memory (RAM) 502 and a read-only memory (ROM) 503, and a system bus 505 connecting the system memory 504 and the central processing unit 501.

[0145] In some embodiments, the electronic device 500 may also include a basic input / output system (BIOS) 506 for facilitating information transmission between various components within the computer, and a large-capacity storage device 507 for storing an operating system 513, a client 514, and other program modules 515.

[0146] In some embodiments, the basic input / output system 506 includes a display 508 for displaying information and an input device 509 such as a touch panel and other input devices for user input of information. A touch panel is also called a touch screen. A touch panel may include two parts: a touch information display device and a touch controller. Other input devices may include, but are not limited to, a physical keyboard, function keys (such as volume control keys, power keys, etc.), a trackball, a mouse, and a joystick, which are not described in detail here.

[0147] The display 508 and input device 509 are both connected to the CPU 501 via an input / output controller 510 connected to the system bus 505. The basic input / output system 506 may also include an input / output controller 510 for receiving and processing input from a touch panel, other input devices, etc. Similarly, the input / output system 506 may also include output devices, such as a display screen, a printer, or other types of output devices.

[0148] The mass storage device 507 is connected to the central processing unit 501 via a mass storage controller (not shown) connected to the system bus 505. The mass storage device 507 and its associated computer-readable media provide non-volatile storage for the electronic device 500. That is, the mass storage device 507 may include a computer-readable medium (not shown) such as a hard disk or a Compact Disc Read-Only Memory (CD-ROM) drive.

[0149] Computer-readable media can include computer storage media and communication media. Computer storage media can include volatile and non-volatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data. Computer storage media includes, but is not limited to, RAM, ROM, Erasable Programmable Read-Only Memory (EPROM), Electrically Erasable Programmable Read-Only Memory (EEPROM), flash memory or other solid state memory technology, CD-ROM, Digital Versatile Disc (DVD), or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices. Computer storage media is not limited to the foregoing examples. The system memory 504 and the mass storage device 507 described above can be embodied as a memory.

[0150] According to various embodiments of the present application, the electronic device 500 can also operate in connection with a remote computer through a network such as the Internet. That is, the electronic device 500 can connect to the network 517 through the network interface unit 516 connected to the system bus 505, or can connect to other types of networks or remote computer systems (not shown) using the network interface unit 516.

[0151] The embodiments of the present application also provide a non-transitory computer readable storage medium, which stores a computer program. The computer program is executed by a processor to implement various processes of the embodiments of the visualized information display method and achieve the same technical effects. To avoid repetition, details are not described herein.

[0152] The processor can be a processor in the electronic device in the above embodiments. The computer readable storage medium can be a computer readable only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0153] The embodiments of the present application also provide a computer program product, which includes a computer program. The computer program is executed by a processor to implement the visualized information display method. The processor can be a processor in the electronic device in the above embodiments. The computer program is executed by the processor to implement various processes of the embodiments of the visualized information display method and achieve the same technical effects. To avoid repetition, details are not described herein.

[0154] It can be understood that in the specific embodiments of the present application, data related to the identity or characteristics of the user are involved, and when the above embodiments of the present application are applied to specific products or technologies, the user's permission or consent needs to be obtained, and the collection, use and processing of the relevant data need to comply with the relevant laws, regulations and standards of the country and region.

[0155] Although the embodiments of the present application have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and variations can be made to the embodiments without departing from the principles and spirit of the present application, and the scope of the present application is defined by the claims and their equivalents.< / form>

Claims

1. A visual information display method, characterized in that: include: Displaying a dashboard interface, the dashboard interface includes a report component bar and a dashboard area; receiving a drag operation from a user to adjust a display position of a target report component in the report component bar or the kanban area in the kanban area; receiving a configuration operation from a user to configure a data set associated with the target report component and layout information of the target report component; A report is presented based on the data set and the layout information.

2. The visual information display method according to claim 1, characterized in that: Also includes: Create a data source; The dataset is created based on the created data source.

3. The visual information display method according to claim 1, characterized in that: The drag operation includes a drag start operation and a drag end operation, and receiving the user's drag operation includes: In a case of monitoring a drag start event corresponding to the drag start operation, determining that the drag start operation is received; In a case of monitoring a drag end event corresponding to the drag end operation, it is determined that the drag end operation is received.

4. The visual information display method according to claim 1, characterized in that: The target report component includes a property bar, which includes a data bar and an interface layout bar. The receiving of a user's configuration operation to configure a data set associated with the target report component and layout information of the target report component includes: receiving a first editing operation of the user on the data column to configure the data set associated with the target report component; A second editing operation of the user on the interface layout bar is received to configure layout information of the target report component, wherein the layout information includes at least one of background information, title information, report shape information, report coordinate axis information, and report component layout information.

5. The visual information display method according to claim 1, characterized in that: The presenting of a report based on the data set and the layout information includes: Reading data from the dataset; and Based on the read data and the layout information, page rendering is performed to display the report.

6. The visual information display method according to claim 5, characterized in that: The layout information includes coordinate axis information, and the reading of data from the data set includes: Based on the coordinate axis information, data related to the coordinate axis is read from the data set.

7. The visual information display method according to claim 1, characterized in that: The report components of the report component bar include at least one of a bar chart, a line chart, a pie chart, a column-line chart, a funnel chart, a percentage chart, a word cloud chart, a heat map, a radar chart, a scale and a scatter plot.

8. An information display device, characterized in that: include: An interface display module is used to display a kanban interface, which includes a report component bar and a kanban area; A drag module, configured to receive a user's drag operation to adjust the display position of a target report component in the report component bar or the kanban area; A configuration module, configured to receive a user's configuration operation to configure a data set associated with the target report component and layout information of the target report component; The report display module is used to display the report based on the data set and the layout information.

9. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the visual information display method according to any one of claims 1 to 7 is implemented.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the visual information display method according to any one of claims 1 to 7 is implemented.

11. A computer program product, characterized in that The method comprises a computer program, which, when executed by a processor, implements the visual information display method according to any one of claims 1 to 7.

Images