CN116244776A

CN116244776A - Method and system for displaying workshop equipment state in real time based on SVG and echorts

Info

Publication number: CN116244776A
Application number: CN202310053410.1A
Authority: CN
Inventors: 陈鹏; 叶玎玎; 张金银; 张溪梦; 骆晓广
Original assignee: Hangzhou Bizhi Technology Co ltd
Current assignee: Hangzhou Bizhi Technology Co ltd
Priority date: 2023-02-03
Filing date: 2023-02-03
Publication date: 2023-06-09

Abstract

The invention discloses a method and a system for displaying workshop equipment states in real time based on SVG and echorts, wherein the method comprises the following steps: s110, preparing SVG files of a workshop equipment plan; s120, processing the SVG plan, and binding the unique number of the equipment to the name attribute of the SVG layer element; s130, registering the SVG plan of the processed workshop equipment as an echorts map, and setting an echorts map series for visual rendering; s140, accessing real-time state data of workshop equipment to the echarts series; s150, setting a visual mapping channel of the echorts, mapping the equipment state value data to visual elements, and displaying the real-time state of workshop equipment. The invention can remarkably simplify the drawing process, can display the change of the equipment state in real time, has the characteristic of undistorted drawing of the translation and scaling equipment, is based on the technology of mature open source of echarties, does not need a commercial rendering engine, and saves the realization cost.

Description

Method and system for displaying workshop equipment state in real time based on SVG and echorts

Technical Field

The invention relates to the technical field of internet computers and big data processing, in particular to a method and a system for displaying workshop equipment states in real time based on SVG and echorts.

Background

On a visual large screen of factory operation and maintenance monitoring, a production equipment plan of a workshop needs to be displayed, and the running state of the production equipment is displayed in real time. The existing scheme is that workshop equipment is manufactured into DWG drawings through CAD drawing software, different states of the equipment are distinguished through different colors when the drawings are manufactured, and the manufactured drawings are visually rendered through a DWG rendering engine, so that the plan view and the equipment state of the workshop production equipment are displayed.

However, this type of approach has drawbacks: in the first aspect, since the DWG drawing can only be displayed statically and the style cannot be changed secondarily, the state change of the display device cannot be visualized in real time. In a second aspect, the rendering engines currently on the market for rendering DWG drawings are all commercially available and expensive, resulting in a solution that is costly to implement. In the third aspect, the process of manufacturing the drawing by CAD software is complex, the drawing occupies huge storage space, and a machine for rendering the drawing needs extremely high hardware configuration, so that the implementation cost of the scheme is further increased.

Disclosure of Invention

Aiming at the problems existing in the prior art, the invention aims to manufacture a workshop equipment plan view through SVG elements, can remarkably simplify the drawing process, only needs to carry out SVG rendering by means of echarties, does not need a commercial rendering engine, has light weight and small occupied space for SVG files, has extremely high efficiency for the echarties to render SVG, does not need high-end hardware configuration, greatly saves the realization cost, can secondarily modify the characteristics of patterns by means of SVG elements, and can simultaneously cooperate with the visual mapping function of the echarties to realize the real-time visual change of the state of the display equipment.

In order to achieve the above purpose, the present invention provides a method for displaying the status of workshop equipment in real time based on SVG and echarts, the method comprising the following steps:

step S110, preparing SVG files of a workshop equipment plan;

step S120, processing the SVG plan, and binding the unique number of the equipment to the name attribute of the SVG layer element;

step S130, registering the SVG plan of the processed workshop equipment as an echorts map, and setting an echorts map series for visual rendering;

step S140, accessing real-time state data of workshop equipment to the echarts series;

and step S150, setting a visual mapping channel of the echorts, mapping the equipment state value data to visual elements, and displaying the real-time state of workshop equipment.

Further, in step S110, drawing is made by drawing software according to the total plane diagram of the workshop apparatus, and the drawing is exported as a plane diagram file in SVG format; the g element in the SVG content represents a layer element corresponding to each device, the fill-opacity and the stroke attribute respectively represent filling transparency and filling color of the graphic element, the visual style of the SVG graphic is rendered through the color, the rect element inside the g element describes the shape of the device, x and y in the rect element respectively represent the position of the graphic element in the plane view, and the width and height attributes represent the width and height of the graphic element in the plane view.

Further, in step S120, the SVG device plan is processed, and the unique number of the plant device is bound to the name attribute of the SVG layer element, so as to obtain the processed SVG device plan.

Further, in step S130, through the echorts rendering device SVG plan, the specific flow is:

step S1301, registering an echartis map;

step S1302, loading a registered SVG map;

step S1303, reading the coordinate size and style information of the graphic element; after loading the SVG map, the echarties analyzes the SVG file content, reads coordinate size information and color information carried in all graphic elements and caches the coordinate size information and the color information;

in step S1304, an SVG map is rendered, and the graphic element coordinate size information and the color read in step S1303 are converted into position size and visual style information of the SVG graphic element, and the SVG is rendered according to the position size and visual style information. Further, in step S1304, when a device failure shutdown occurs, the quantitative classification and visual alarm effects of the device failure are realized, and the specific flow is as follows:

step S13041, defining a weight value of workshop production equipment;

step S13042, defining an early warning color value range and a shadow maximum width;

step S13043, calculating the current equipment failure weight according to the equipment and the equipment weight which generate the failure;

step S13044, calculating fault colors and shadow widths according to the fault evaluation scores and the early warning color ranges;

step S13045, rendering the frame shadows of the device plan view container;

further, in step S140, the real-time status data of the workshop apparatus is accessed to the echarts series, and the specific flow is as follows:

step S1401, collecting real-time data of workshop equipment; acquiring the state of equipment in real time through a sensor of workshop equipment;

step S1402, processing real-time data of the finishing device;

step S1403, the processed data is accessed to the echarts series.

Further, in step S1402, according to the data access format supported by the sections, the data is processed to a data structure corresponding to the workshop apparatus and the status value one to one.

Further, in step S150, a visual mapping channel of the organs is set, the device state value data is mapped to the visual element, and the real-time state of the workshop device is displayed.

In another aspect, the present invention provides a system for displaying plant equipment status in real time based on SVG and echorts, the system comprising:

the binding module is used for binding equipment numbers to name attributes of corresponding SVG layer elements to obtain a processed SVG equipment plan;

the rendering module is used for rendering the SVG equipment plan after being processed by the binding module through the echorts, registering the SVG equipment plan as an echorts map, and setting an echorts map series for visual rendering;

the real-time data module is used for acquiring the real-time state of workshop equipment through the equipment sensor, processing the acquired original data perfectly and accessing the acquired original data into the series of echarties;

the visual mapping module is used for setting visual mapping of the equipment elements, and rendering the equipment with different state values into different visual styles according to a set style rule, so that the purpose of displaying the real-time state of the equipment is achieved.

Furthermore, based on the characteristic that the SVG can secondarily modify the style, and simultaneously, the visual mapping function of the echats is matched, real-time state data of workshop equipment are accessed to the echats, and the visual style of the SVG element can be rendered in real time according to different state values.

The beneficial effects of the invention are as follows:

according to the technical scheme, the SVG format equipment plan is used, the working procedure is simple and convenient, the final equipment plan is lighter, and a large amount of storage space is not required to be occupied; based on the characteristic that the SVG can secondarily modify the style, and simultaneously, the visual mapping function of echarties is matched, the visual style of SVG elements can be modified in real time by accessing the real-time data of the equipment state, so that the equipment state of a display workshop can be visualized in real time; and the echarts is used for rendering the SVG, a commercial rendering engine is not needed, the requirement on hardware configuration is not high, and the implementation cost of the scheme is greatly reduced.

Particularly, the invention is technically improved in the rendering process, when equipment faults occur, the visual effect of displaying and representing the faults is more vivid, the introduction of large-area shadow effect is easier to visually draw attention, meanwhile, a monitoring alarm mechanism of the state of workshop equipment is introduced, the equipment faults are quantitatively classified, the width and the color of the shadow filter are set according to the fault level, the severity of the equipment faults is visually expressed, the reference and emergency reminding can be intuitively and effectively provided for equipment maintenance in the production process, and the influence on the production efficiency due to the equipment faults which are not found for a long time is prevented.

Drawings

FIG. 1 is a flow chart of a method for displaying plant equipment status in real time based on SVG and echarts in accordance with an embodiment of the present invention;

FIG. 2 illustrates a plan view of a single plant in accordance with an embodiment of the present invention;

FIG. 3 shows a plan view of the entire plant in accordance with an embodiment of the present invention;

FIG. 4 illustrates a flow chart of a plan view of a SVG by an echorts rendering device in accordance with an embodiment of the invention;

FIG. 5 illustrates a schematic view of a visual effect after rendering in accordance with an embodiment of the present invention;

FIG. 6 is a visual schematic diagram of an alarm effect rendered upon a device shutdown in accordance with an embodiment of the invention;

FIG. 7 illustrates a flow chart for interfacing real-time status data of a plant to an echorts series in accordance with an embodiment of the invention;

fig. 8 is a schematic diagram of a system architecture for displaying plant equipment states in real time based on SVG and echarts according to an embodiment of the present invention.

Description of the embodiments

The following description of the embodiments of the present invention will be made more apparent and fully hereinafter with reference to the accompanying drawings, in which some, but not all embodiments of the invention are shown. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

In the description of the present invention, it should be noted that the directions or positional relationships indicated by the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc. are based on the directions or positional relationships shown in the drawings, are merely for convenience of describing the present invention and simplifying the description, and do not indicate or imply that the devices or elements referred to must have a specific orientation, be configured and operated in a specific orientation, and thus should not be construed as limiting the present invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance.

In the description of the present invention, it should be noted that, unless explicitly specified and limited otherwise, the terms "mounted," "connected," and "connected" are to be construed broadly, and may be either fixedly connected, detachably connected, or integrally connected, for example; can be mechanically or electrically connected; can be directly connected or indirectly connected through an intermediate medium, and can be communication between two elements. The specific meaning of the above terms in the present invention can be understood by those of ordinary skill in the art according to the specific circumstances.

The following describes specific embodiments of the present invention in detail with reference to fig. 1 to 8. It should be understood that the detailed description and specific examples, while indicating and illustrating the invention, are not intended to limit the invention.

The basic concept of the method and the system for displaying the state of the workshop equipment based on the SVG and the echorts is that the unique number of the workshop equipment is bound to the name attribute of the corresponding SVG layer element for processing to obtain the processed SVG plan of the workshop equipment, the processed SVG plan is registered as an echorts map for visual rendering, the state data of the workshop equipment is accessed to the echorts, the characteristic of the secondary modification style based on the SVG is matched, and the visual style of the SVG element can be modified in real time by the real-time data of the access equipment state, so that the purpose of displaying the state of the workshop equipment in real time is achieved.

As shown in fig. 1, the basic flow of the method for displaying the plant equipment status in real time based on SVG and echarts in this embodiment is as follows:

step S110, preparing SVG files of a workshop equipment plan;

Specifically, in step S110, an SVG file of a plant floor plan is prepared;

SVG is a graphic file format, which is known in english as Scalable Vector Graphics, meaning a scalable vector graphic. It was developed by the W3C alliance based on XML (Extensible Markup Language). Strictly speaking, it should be an open standard vector graphics language that allows you to design exciting, high resolution Web graphics pages. The user can directly trace the image with code, can turn on the SVG image with any word processing tool, can make the image interactive by changing part of the code, and can insert the image into HTML at any time to view through a browser. SVG is used to describe two-dimensional vectors and vector/grid patterns. Three types of graphical objects are provided: vector graphics (vector graphics, for example: paths consisting of straight lines and curved lines), images, text. The graphics objects may also perform grouping, style addition, transformation, combination, etc., feature sets include nested transformations (nesting transformations), clipping paths (clipping paths), alpha masks (alphamasks), filter effects (filters), template objects (templates), and other extensions (extensions). SVG graphics are interactive and dynamic. On average, SVG files are much smaller than DWG format files, so that the download is also fast and the occupied storage space is smaller.

Specifically, taking the above-described coil plant as an example, a plan view of a single plant is shown in fig. 2, and a plan view of the entire plant is shown in fig. 3.

After the drawing software is manufactured, the derived SVG device plan is opened, and the contents of the opened parts are as follows:

the g element in the SVG content represents a layer element corresponding to each device, the fill-opacity and the stroke attribute respectively represent filling transparency and filling color of the graphic element, the visual style of the SVG graphic is rendered through the color, the rect element inside the g element describes the shape of the device, x and y in the rect element respectively represent the position of the graphic element in the plane graph, and the width and height attribute represents the width and height of the graphic element in the plane graph.

Specifically, in step S120, the SVG plan is processed, and the binding device is uniquely numbered to the name attribute of the SVG layer element. And adding a name attribute on the g element label of the SVG, wherein the attribute value is the equipment number.

Specifically, based on the step S110, opening the SVG planogram may view the SVG content as described in step S110, bind the unique number of the shop floor device to the graphical element shown in step S110,

taking a certain device in a workshop as an example, the device number of the device is C1_05_07-maleon, then a name attribute is added to the SVG element of the device, and the attribute value of the name attribute is the number C1_05_07-maleon.

After the processing in step S120, the SVG element content of the device is as follows:

in this way, we bind the unique number of the workshop apparatus to the name attribute of the SVG element corresponding to the apparatus, and the other workshop apparatuses also process in turn, and bind the apparatus number to the graphic element of the SVG file.

Specifically, after the processing in step S120, the plan view part of the final SVG device is as follows:

specifically, in step S130, the device SVG plan is rendered by the echorts. After the binding process in step S120 is completed, the SVG plan of the whole plant is finally obtained. We use echarties as the rendering engine of the SVG plan to visually demonstrate the plant equipment.

As shown in fig. 4, the basic flow of step S130 is as follows:

step S1301, registering an echartis map;

step S1302, loading a registered SVG map;

step S1303, reading the coordinate size and style information of the graphic element;

step S1304, rendering an SVG map;

specifically, the echarts map is registered in step S1301, and the SVG device plan processed in step S120 is registered as the echarts map by the registerMap method provided by echarts:

echartits. Registermap ('shop equipment plan',svg: SVG);

specifically, in step S1302, a registered SVG map is loaded, after the SVG device plane map registration is completed, loading is performed in the parts chart, and the loading usage codes are as follows:

option = {

series: [

{

name, 'plant floor plan',

type: 'map',

map, 'plant plan view of plant',

roam: true,

emphasis: {

label: {

show: false

}

},

selectedMode: false,

}

]

};

myChart.setOption(option);

specifically, in step S1303, the coordinate size and style information of the graphic elements are read, after the SVG map is loaded, the echarties may parse the SVG file content, and read the coordinate size information and the color information carried in all the graphic elements for caching.

Specifically, in step S1304, the SVG map is rendered, the graphic element coordinate size information and the color read in step S1303 are finally determined, and the position size and the visual style information of the SVG graphic element are finally determined, according to which the SVG is rendered.

The visual effect after rendering is shown in fig. 5.

The visual rendering of the workshop equipment SVG plan processed in the step S120 is performed by using the echartis as an SVG rendering engine, so that visual display of the workshop equipment plan is realized. When a plant equipment plan is rendered, in order to enable the display effect to be more vivid when equipment faults occur, a CSS shadow technology is used for a large visual screen in the equipment state, shadow effects are added to the container frame of the large visual screen, the large-area shadow effects are introduced more easily to be visually noticeable, meanwhile, a monitoring alarm mechanism of the plant equipment state is introduced, the equipment faults are quantized and graded, the width and the color of a shadow filter are set according to the fault grade, and the severity of the equipment faults is visually expressed.

The visual effect of the rendered alarm effect when the equipment is in fault shutdown is shown in fig. 6.

In step S1304, when the production equipment fails and stops, the process for realizing the quantitative classification of the failure equipment failure and the visual alarm effect is as follows:

step S13041, defining a weight value of workshop production equipment;

step S13045, rendering the frame shadows of the device plan view container;

specifically, in step S13041, weight values of production equipment are defined, weight values of various equipment are determined according to importance of different equipment in the whole production flow, total weight value M of all equipment is 10, and weight values of various equipment are defined as follows:

the first device weight Q1 is used to determine,

the second device weight Q2 is used to determine,

the nth device weight QN is used,

fourth device weight Q4. Q1+q2+ … qn=m.

Taking production equipment of the winding workshops as an example, four kinds of equipment are provided as follows:

the method comprises the steps of texturing, sand making, alkali scrubbing and water washing, wherein the weight value of equipment is determined according to the importance of the equipment in the whole production flow, the total weight value M of all equipment is 10, and the weight values of various equipment are defined as follows:

the texture weight Q1 is 3,

the sand making weight Q2 is 3,

the alkali weight Q3 is 2.8,

the water washing weight Q4 is 1.2.

Specifically, in step S13042, an early warning color value range is defined, the start warning color C1 is set to RGB (X1, Y1, Z1), and the end warning color C2 is set to RGB (X2, Y2, Z2), the shade maximum width W1.

In a specific embodiment, the initial alert color C1 is set to RGB (50,0,0), the final alert color C2 is set to RGB (210,0,0), and the maximum width W1 of the shadow is set to 20px.

Specifically, in step S13043, a failure evaluation score is calculated from the failure-producing device and the device weight. Acquiring the equipment in a fault shutdown state in all workshop equipment, filtering out the equipment of the same type,

when the equipment in the fault shutdown state comprises a certain type of equipment, the weight of the type of equipment is counted into a fault weight value, if the Mth equipment and the Nth equipment are in fault, the current equipment fault weight value is Q=QM+QN, the current equipment fault weight K is the current equipment fault weight value Q divided by the total weight value M of all equipment, and the level K=Q/M of the current equipment fault is obtained.

In a specific embodiment, assuming that the washing and texturing device is in a fault shutdown state, the current device fault weight value is q=q4+q1=1.2+3=4.2, the current device fault weight K is the current device fault weight value Q divided by the total weight value M of all devices, and k=q/m=4.2/10=0.42, and the current device fault level is 0.42.

Specifically, in step S13044, the failure color and the shadow width are calculated from the failure evaluation score and the early warning color range, the start-stop color difference C3 is calculated as C2-C1, the R value x3=x2-X1, the G value y3=y2-Y1, the B value z3=z2-Z1, the final color difference C3 is RGB (X3, Y3, Z3), then the color increment C4 is the current equipment failure weight k×c3, the color increment C4 is finally calculated to be RGB (kx3, kxy 3, kxz 3), thus the shadow color C is c1+c4, the R value of the shadow color C is x1+kx3, the G value is y1+kxy 3, the B value is z1+kxz 3, and the shadow color C is finally calculated to be RGB (x1+kx3, y1+kxy 3, z1+kxz 3); shadow width w=k×w1; rounding to make all values not integer;

in the above embodiment, the R value of the color difference C3 is 210-50=160, the G value is 0-0=0, the B value is 0-0=0, the final color difference C3 is RGB (160, 0), then the color increment C4 is the current equipment failure weight k×c3, the R value of C4 is 0.42×160=67.2, the rounded value is 67, the G value of C4 is 0.42×0=0, the B value of C4 is 0.42×0=0, the final calculated color increment C4 is RGB (67,0,0), the shadow color C is c1+c4, the R value of the shadow color C is 50+67=117, the G value is 0+0=0, the B value is 0+0=0, and the shadow color C is RGB (117,0, 0); shadow width w=k w1=0.42×20=8.4, rounded to a value of 8; the final calculation result is as follows, the shade color C is RGB (117,0, 0), and the shade width W is 8px;

specifically, in step S13045, according to the calculation result in step S13044, the frame shadow color of the rendering device plan view container is RGB (x1+kx3, y1+ky3, z1+kxz 3), and the shadow width is k×w1, so as to set css attribute box-shadow of the container frame.

In this embodiment, the frame shadow color of the rendering device plan view container is RGB (117,0, 0), the shadow width is 8px, and by setting css attribute box-shadow of the container frame, the setting code is as follows:

box-shadow: 0 0 8px 8px rgb(117, 0, 0);

through the calculation steps, the faults are quantitatively classified when the equipment is in a fault shutdown state, the effect of expressing the severity of the faults by using different visual colors is realized according to the quantitative classification, and a visual effect of more visual warning is given to people.

Specifically, in step 140, real-time status data of the plant is accessed into the echorts series.

As shown in fig. 7, the basic flow is:

step S1401, collecting real-time data of workshop equipment;

step S1402, processing real-time data of the finishing device;

step S1403, the processed data are accessed to the echarts series;

specifically, the shop equipment real-time data is acquired in step S1401. The state of the equipment can be obtained in real time through the sensors of the workshop equipment, and the state data of all the workshop equipment are summarized and tidied.

Specifically, taking the production equipment of the above-mentioned winding plant as an example, there are four operating states:

normal operation

Failure stop

Device maintenance

Device standby

Each device corresponds to one state at present, the state data of the whole workshop device is obtained after the data of each device are collected, and the data collected at present do not meet the format requirements of echarties, so that further processing and arrangement are needed.

Specifically, in step S1402, real-time data of the whole device is processed, the device status data collected in step S1401 is summarized and sorted, and according to the data access format supported by echarties, the data is processed and perfected to a data structure corresponding to the workshop device and the status value one to one, and the final processed data structure is as follows:

[

{ name: 'C1_05_09-maleon', value: 'normal operation',

{ name: 'C1_05_10-maleon', value: 'normal operation',

{ name: 'C1_05_11-maleon', value: 'fail-over',

{ name } 'C1_05_12-maleon', value } 'device maintenance',

{ name: 'C1_05_13-maleon', value: 'normal operation',

{ name } 'C1_05_14-maleon', value } 'device Standby',

{ name: 'C1_05_15-maleon', value: 'device maintenance',

]

thus, the processing and arrangement of the real-time state data of the equipment are completed.

Specifically, in step S1403, the processed data is accessed to the parts series, the data processed and finished in step S1402 is accessed to the parts series, and the implementation code of the real-time data access of the device through the parts is as follows:

option = {

series: [

{

name, 'plant floor plan',

type: 'map',

map, 'plant plan view of plant',

data: [

{ name: 'C1_05_09-maleon', value: 'normal operation',

{ name: 'C1_05_10-maleon', value: 'normal operation',

{ name: 'C1_05_11-maleon', value: 'fail-over',

{ name } 'C1_05_12-maleon', value } 'device maintenance',

{ name: 'C1_05_13-maleon', value: 'normal operation',

{ name } 'C1_05_14-maleon', value } 'device Standby',

{ name: 'C1_05_15-maleon', value: 'device maintenance',

]

}

]

};

myChart.setOption(option);

the real-time workshop equipment state data are collected, processed and arranged into a data format required by the echarts, and finally the processed equipment state data are accessed into the echarts series.

Specifically, in step S150, a visual mapping channel of the echarts is set, the device state value data is mapped to the visual element, and the real-time state of the workshop device is displayed. After step S140 is completed, visual rendering can be performed on the SVG elements according to the style rules in the visual channel by setting the visual channel of the echarts, and the SVG elements are displayed in different visual styles.

Specifically, taking the production equipment of the winding plant as an example, the visual style rules defining the equipment in different states are as follows:

normal operation-blue (blue)

Failure stop-red (red)

Equipment maintenance-yellow (yellow)

Equipment standby-green (green)

Specifically, the defined style rule is set in the visual channel of the echorts, and the implementation codes are as follows by configuring the visual map option of the echorts:

option = {

visualMap: [

{

the categories are defined as 'normal operation', 'failure shutdown', 'equipment maintenance', 'equipment standby',

pieces: [

{ value: 'normal operation', color: 'blue',

{ value: ' fail down ', ' color: ' red ',

{ value: 'maintenance of equipment', color: 'yellow',

{ value: 'device standby', color: 'green',

]

}

],

};

myChart.setOption(option);

specifically, we define four display states of the workshop apparatus and define visual styles of the apparatus in different states, and finally, configure the defined style rule into the visual map of the echorts, based on the real-time state values of the apparatus accessed in step S140, the echorts will automatically render the corresponding SVG element of the apparatus into the corresponding visual style in the visual map according to the different state values.

The SVG device plan is used, the device numbers are bound to name attributes of corresponding SVG elements, then the SVG device plan is rendered through an echarts rendering engine, real-time state data of workshop devices are accessed to the echarts, finally the visual mapping function of the echarts is matched, visual styles of the devices in a non-use state are defined, and the state of the workshop devices is displayed in real time based on the SVG and the echarts.

In addition, the embodiment of the invention also provides a system for displaying the state of workshop equipment in real time based on SVG and echorts, as shown in FIG. 8, the system comprises:

and the real-time data module is used for acquiring the real-time state of workshop equipment through the equipment sensor, processing the acquired original data perfectly and accessing the acquired original data into the series of echarties. The real-time data module comprises a data acquisition sub-module, a data processing sub-module and a data access sub-module;

Based on the existing SVG equipment plan, the invention uses the visual mapping function of echarties to set visual patterns by binding the unique identifier of workshop equipment to the name attribute of SVG element; and (3) accessing real-time state data of workshop equipment into the echorts, and changing the real-time state data of the equipment to change the visual style of the SVG element of the equipment in real time so as to achieve the purpose of displaying the state of the equipment in real time.

The technical advantages are as follows: 1. the SVG format equipment plan is used, the working procedure is simple and convenient, the final equipment plan is lighter, and a large amount of storage space is not required to be occupied;

2. based on the characteristic that the SVG can be secondarily modified, the visual pattern of the SVG element can be modified in real time by accessing the real-time data of the equipment state in cooperation with the visual mapping function of echarties, so that the equipment state of a display workshop can be visualized in real time;

3. the echarts is used for rendering the SVG, a commercial rendering engine is not needed, the requirement on hardware configuration is not high, and the implementation cost of the scheme is greatly reduced; the provided display effect of the optimization strategy under the equipment fault can prompt the equipment fault and the fault level to perform equipment maintenance in time, so that the influence on production efficiency caused by the fact that the equipment fault is not found in time is prevented.

Any process or method description in a flowchart of the invention or otherwise described herein may be understood as representing modules, segments, or portions of code which include one or more executable instructions for implementing specific logical functions or steps of the process, which may be implemented in any computer-readable medium for use by an instruction execution system, apparatus, or device, which may be any medium that contains a program for storing, communicating, propagating, or transmitting for use by the execution system, apparatus, or device. Including read-only memory, magnetic or optical disks, and the like.

In the description herein, reference to the term "embodiment," "example," etc., means that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, schematic representations of the above terms are not necessarily directed to the same embodiment or example. Furthermore, the different embodiments or examples described in this specification and the features therein may be combined or combined by those skilled in the art without creating contradictions.

While embodiments of the present invention have been shown and described, it will be understood that the embodiments are illustrative and not to be construed as limiting the invention, and that various changes, modifications, substitutions and alterations may be made by those skilled in the art without departing from the scope of the invention.

Claims

1. A method for displaying plant equipment states in real time based on SVG and echorts, which is characterized by comprising the following steps:

step S110, preparing SVG files of a workshop equipment plan;

2. The method for displaying the state of the workshop equipment in real time based on SVG and echarties according to claim 1, wherein in step S110, drawing is made by drawing software according to the total plane diagram of the workshop equipment, and the drawing is exported into a plane diagram file in SVG format; the g element in the SVG content represents a layer element corresponding to each device, the fill-opacity and the stroke attribute respectively represent filling transparency and filling color of the graphic element, the visual style of the SVG graphic is rendered through the color, the rect element inside the g element describes the shape of the device, x and y in the rect element respectively represent the position of the graphic element in the plane view, and the width and height attributes represent the width and height of the graphic element in the plane view.

3. The method for displaying the status of the plant equipment based on SVG and echarts in real time according to claim 2, wherein in step S120, the SVG equipment plan is processed, and the unique number of the plant equipment is bound to the name attribute of the SVG layer element, so as to obtain the processed SVG equipment plan.

4. The method for displaying the status of the workshop equipment based on SVG and echorts in real time according to claim 3, wherein in step S130, the SVG plan is rendered by the echorts, and the specific flow is as follows:

step S1301, registering an echartis map;

step S1302, loading a registered SVG map;

in step S1304, an SVG map is rendered, and the graphic element coordinate size information and the color read in step S1303 are converted into position size and visual style information of the SVG graphic element, and the SVG is rendered according to the position size and visual style information.

5. The method for displaying the plant equipment status based on SVG and echorts in real time according to claim 4, wherein in step S1304, when equipment failure shutdown occurs, the quantized classification and visual alarm effects of the equipment failure are implemented, and the specific procedures are as follows:

step S13041, setting a weight value of workshop production equipment;

step S13042, setting an early warning color value range and a shadow maximum width;

step S13045, rendering the frame shadows of the device plan view container.

6. The method for displaying the status of the plant equipment based on SVG and echorts in real time according to claim 4, wherein in step S140, the real-time status data of the plant equipment is accessed to the echorts series, and the specific procedures are as follows:

step S1402, processing real-time data of the finishing device;

step S1403, the processed data is accessed to the echarts series.

7. The method for displaying plant equipment status in real time based on SVG and echorts according to claim 6, wherein in step S1402, data is processed to a data structure corresponding to plant equipment and status value one-to-one according to the data access format supported by echorts.

8. The method for displaying the status of the plant equipment in real time based on SVG and echorts according to claim 1, wherein in step S150, a visual mapping channel of echorts is set, the equipment status value data is mapped to visual elements, and the real-time status of the plant equipment is revealed.

9. A system for real-time display of plant equipment status based on SVG and echorts, the system being for implementing the method for real-time display of plant equipment status based on SVG and echorts according to any one of claims 1-8, the system comprising:

10. The system for displaying the state of the workshop equipment based on the real-time SVG and the echarts as claimed in claim 9, wherein the real-time state data of the workshop equipment is accessed to the echarts based on the characteristic that the SVG can secondarily modify the pattern, and the visual pattern of the SVG element can be rendered in real time according to different state values in cooperation with the visual mapping function of the echarts.