Intelligent ward patient virtual list method

Abstract

The invention relates to the technical field of smart ward platforms, and discloses a smart ward patient virtual listing method, which comprises the following steps: S1, creating a patient information data source, generating an array containing 1000 patient objects through an Array. Form method, allocating a unique identifier, a name, an illness state and an emergency degree to each patient object, and establishing a patient information data source; according to the method and the device, the number of DOM (Document Object Model) elements during page loading is effectively reduced by adopting a virtual list technology of only rendering the patient information in a visible area, the number of the DOM elements during page loading is effectively reduced, the number of the DOM elements during page loading is reduced, and the page loading efficiency is improved. The jamming phenomenon in the rendering and rolling process is remarkably reduced, and therefore the page performance is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of smart ward platforms, and in particular to a method for virtualizing a patient list in a smart ward. Background Art

[0002] With the improvement of medical informationization, the smart ward platform urgently needs to efficiently process and display the growing patient data. However, the traditional list rendering method often leads to page performance degradation when processing large amounts of data, which is manifested as slow loading and unsmooth scrolling. These performance bottlenecks not only affect the daily work efficiency of medical staff, but also reduce the user experience. At present, the application of virtual list technology in smart ward systems is not yet popular enough, and there is a lack of optimization measures for special medical scenarios, which poses a challenge to improving the performance of medical information systems and user experience. For this reason, we propose a virtual list method for smart ward patients. Summary of the invention

[0003] Based on the technical problems existing in the background technology, the present invention proposes a virtual list method for patients in a smart ward.

[0004] The present invention proposes a method for virtualizing a patient list in a smart ward, comprising the following steps:

[0005] S1: Create a patient information data source, generate an array of 1000 patient objects through the Array.from method, assign a unique ID, name, condition, and urgency to each patient object, introduce the vue-virtual-scroller virtual list component, and set the fixed height of each list item to item-height="50" to optimize performance and limit the amount of patient information displayed. Bind the patient information data source to the virtual list component through the :items="data" attribute to achieve automatic scrolling management of data;

[0006] S2: Set a fixed width of 400px and height of 600px for the container of the virtual list to control the visible area displayed on the page. Set the overflow property of the container to auto, and then set the style for the individual patient data to allocate the corresponding space in the container and add padding;

[0007] S3: According to the scrolling position of the page, the start and end indexes in the current visible area are calculated, the data in the current visible area is filtered out, and visibleData is obtained. The v-for loop instruction of Vue is used to render and display the visibleData to display the currently visible patient information list;

[0008] S4: Then bind a scroll event listener to the container, obtain the current scroll position by using scrollTop, and then dynamically adjust the display position of the actual list by calculating the scroll offset to ensure the continuous display of patient information;

[0009] S5: Use the transform attribute to dynamically adjust the offset position of the actual patient information list, insert a virtual placeholder element at the end of the list or at an appropriate position, and set a sufficient virtual height for it to expand the visible area of ​​the list.

[0010] Preferably, in said S1, the generation of the disease status and the urgency level depends on getRandomStatus and getRandomPriority functions respectively.

[0011] Preferably, in S1, when the patient information data source is bound to the virtual list component through the :items="data" attribute, it can ensure that only the patient data in the current visible area is rendered, thereby dynamically processing the data display when the user scrolls, reducing unnecessary rendering consumption.

[0012] Preferably, in S2, when the overflow attribute of the container is set to auto, it can be ensured that the list can be scrolled. When the patient data exceeds the height of the container, a scroll bar appears, allowing the user to view other patient data.

[0013] Preferably, in S3, data in the current visible area are filtered out from the patient information list according to the start and end indexes of the area, and the filtered data are sorted.

[0014] Preferably, in S4, scrollOffset is used to calculate which item of the data source starts to be displayed in the current visible area, the end item position of the current visible area is calculated, the data in the visible area is sliced, and listData.slice(start, end) is used to intercept the data in the current visible area from the data source through the start and end items.

[0015] Preferably, S5 ensures that the patient information entry can be seamlessly synchronized with the scrolling of the container by following the scrolling behavior of the container, thereby providing the user with a smooth and natural browsing experience.

[0016] Preferably, in S5, the user is enabled to view more patient information items by scrolling without having to load all data immediately, thereby improving page loading speed and responsiveness.

[0017] Compared with the prior art, the present invention has the following beneficial effects:

[0018] This invention uses a virtual list technology that only renders patient information in the visible area, effectively reducing the number of DOM elements when the page is loaded, significantly reducing the jamming during rendering and scrolling, thereby improving page performance. At the same time, by monitoring scrolling events to dynamically update data, it ensures a smooth experience for users when browsing the patient information list. In addition, the solution has flexible scalability and can adjust the display style and priority of patient information according to the actual needs of the ward, allowing doctors and nurses to quickly identify and obtain key information, improving the efficiency and quality of medical work. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 This is a flow chart of a patient virtual list method for a smart ward proposed by the present invention. DETAILED DESCRIPTION

[0020] The present invention will be further explained below in conjunction with specific embodiments.

[0021] Example

[0022] Reference Figure 1 , this embodiment proposes a method for a virtual list of patients in a smart ward, comprising the following steps:

[0023] S1: Create a patient information data source, generate an array of 1000 patient objects through the Array.from method, assign a unique identifier, name, condition status and urgency to each patient object, where the generation of condition status and urgency depends on the getRandomStatus and getRandomPriority functions respectively, introduce the vue-virtual-scroller virtual list component, and set the fixed height of each list item to item-height="50" to optimize performance and limit the amount of patient information displayed, bind the patient information data source to the virtual list component through the :items="data" attribute to achieve automatic scrolling management of data, and ensure that only the patient data in the current visible area is rendered, so as to dynamically process data display when the user scrolls and reduce unnecessary rendering consumption;

[0024] S2: Set a fixed width of 400px and height of 600px for the container of the virtual list to control the visible area displayed on the page. By setting the overflow property of the container to auto, it can ensure that the list can be scrolled. When the patient data exceeds the height of the container, a scroll bar appears to allow the user to view other patient data. Then set the style for the individual patient data to allocate the corresponding space in the container and add padding.

[0025] S3: According to the scrolling position of the page, the start and end indexes in the current visible area are calculated, the data in the current visible area is filtered out, and visibleData is obtained. The v-for loop instruction of Vue is used to render and display the visibleData to display the currently visible patient information list. According to the start and end indexes of the current visible area, the data in the area is filtered out from the patient information list, and the filtered data is sorted.

[0026] S4: Then bind a scroll event listener to the container, obtain the current scroll position by using scrollTop, and then dynamically adjust the display position of the actual list by calculating the scroll offset to ensure the continuous display of patient information. Calculate which entry in the data source starts to display in the current visible area by scrollOffset, calculate the end entry position of the current visible area, slice the data in the visible area, and use listData.slice(start,end) to intercept the data in the current visible area from the data source through the start and end entries;

[0027] S5: Use the transform attribute to dynamically adjust the offset position of the actual patient information list. By following the scrolling behavior of the container, ensure that the patient information items can seamlessly synchronize with the container scrolling, thereby providing users with a smooth and natural browsing experience. Insert a virtual placeholder element at the end or appropriate position of the list and set a sufficient virtual height for it to expand the visible area of ​​the list, so that users can view more patient information items by scrolling without having to load all data immediately, thereby improving page loading speed and responsiveness.

[0028] This invention uses a virtual list technology that only renders patient information in the visible area, effectively reducing the number of DOM elements when the page is loaded, significantly reducing the jamming during rendering and scrolling, and thus improving page performance. At the same time, by monitoring scrolling events and dynamically updating data, it ensures a smooth experience for users when browsing the patient information list. In addition, the solution has flexible scalability and can adjust the display style and priority of patient information according to the actual needs of the ward, allowing doctors and nurses to quickly identify and obtain key information, improving the efficiency and quality of medical work.

[0029] The above description is only a preferred specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any technician familiar with the technical field can make equivalent replacements or changes according to the technical scheme and inventive concept of the present invention within the technical scope disclosed by the present invention, which should be covered by the protection scope of the present invention.

Claims

1. A method for virtual list of patients in smart wards, characterized in that: The following steps are involved: S1: Create a patient information data source, generate an array of 1000 patient objects through the Array.from method, assign a unique ID, name, condition, and urgency to each patient object, introduce the vue-virtual-scroller virtual list component, and set the fixed height of each list item to item-height="50" to optimize performance and limit the amount of patient information displayed. Bind the patient information data source to the virtual list component through the :items="data" attribute to achieve automatic scrolling management of data; S2: Set a fixed width of 400px and height of 600px for the container of the virtual list to control the visible area displayed on the page. Set the overflow property of the container to auto, and then set the style for the individual patient data to allocate the corresponding space in the container and add padding; S3: According to the scrolling position of the page, the start and end indexes in the current visible area are calculated, the data in the current visible area is filtered out, and visibleData is obtained. The v-for loop instruction of Vue is used to render and display the visibleData to display the currently visible patient information list; S4: Then bind a scroll event listener to the container, obtain the current scroll position by using scrollTop, and then dynamically adjust the display position of the actual list by calculating the scroll offset to ensure the continuous display of patient information; S5: Use the transform attribute to dynamically adjust the offset position of the actual patient information list, insert a virtual placeholder element at the end of the list or at an appropriate position, and set a sufficient virtual height for it to expand the visible area of ​​the list.

2. A method for virtual list of patients in smart wards according to claim 1, characterized in that: In S1, the generation of the disease status and the urgency level depends on the getRandomStatus and getRandomPriority functions respectively.

3. A method for virtual list of patients in a smart ward according to claim 1, characterized in that: In S1, when the patient information data source is bound to the virtual list component through the :items="data" attribute, it can ensure that only the patient data in the current visible area is rendered, so that the data display is dynamically processed when the user scrolls, reducing unnecessary rendering consumption.

4. A method for virtual list of patients in a smart ward according to claim 1, characterized in that: In S2, when the overflow attribute of the container is set to auto, it can be ensured that the list can be scrolled. When the patient data exceeds the height of the container, a scroll bar appears, allowing the user to view other patient data.

5. A method for virtual list of patients in a smart ward according to claim 1, characterized in that: In S3, according to the start and end indexes of the current visible area, the data in the area is filtered out from the patient information list, and the filtered data is sorted.

6. A method for virtual list of patients in a smart ward according to claim 1, characterized in that: In S4, scrollOffset is used to calculate which item of the data source starts to be displayed in the current visible area, the end item position of the current visible area is calculated, the data in the visible area is sliced, and listData.slice(start, end) is used to intercept the data in the current visible area from the data source through the start and end items.

7. A method for virtual list of patients in a smart ward according to claim 1, characterized in that: The S5 ensures that the patient information entry can be seamlessly synchronized with the scrolling of the container by following the scrolling behavior of the container, thereby providing the user with a smooth and natural browsing experience.

8. A method for virtual list of patients in a smart ward according to claim 1, characterized in that: The S5 enables the user to view more patient information items through scrolling operations without having to load all data immediately, thereby improving page loading speed and responsiveness.

Images