Requirement introduction: The monitoring page can see the dynamic process on different equipment, which equipment is working, which link is being carried out…

The static diagram of the process flow is as follows

Analysis of implementation ideas

  1. You can do this by divPiece togetherA graph, and then the JS code controls the different div parts for color changes.
  2. You can use canvas to draw the entire image, and then control the elements within the canvas.
  3. You can find a third-party library and customize the shapecombinationA graph, and then control.
  4. You can display content as an SVG diagram, and then control elements in SVG.

Analyze the pros and cons of each approach

Scheme 1: It is very convenient to operate div directly in the front end, but rendering a large number of DOM elements and adding interactive operations in the later stage will lead to performance problems. A large amount of code is required for div to draw the whole graph.

Scheme 2: Canvas draws the whole picture without obvious performance problems. It can be used for later interactive operations through code control, and there is a lot of code to draw manually. (You can draw with an online tool)

Scheme 3: The implementation of third-party libraries is generally simpler. It is necessary to find suitable libraries to do simple tests. There are not many functions used, but a large number of other codes of libraries are introduced.

Scheme 4: SVG draws the whole graph without obvious performance problems. Compared with Canvas, code control is a little simpler, and there is a lot of code to draw manually. (You can draw SVG online editor with the help of online tools – rookie tools)

Comprehensive analysis solution 4 is the best solution, also because just found an SVG online editing tool, and can be converted to SVG source.

SVG online tool drawing

The IDS in the EXPORTED SVG source code drawn using the online tool do not match the device IDS in the actual project, and there is a one-to-one correspondence here.

For example, the ID in the exported source code is SVg_368, and the device ID in the project is named K1. All ids in the source code need to be corresponding to the device ID number in the project (static figure).

< path stroke = "# 929292" id = "svg_368" d = "m358.403215, 185.904032 l - 10.00328, 0.000005 l0, 27.490932 l68.846232, 0 l0, 19.325309" Animation-opacity ="0" stroke-width="0.5" fill="# FFFFFF "/>Copy the code

Content automatically zooms in and out

1. Use the IMG tag to display SVG images with 100% width and height of the device, but you cannot manipulate SVG elements here

<div style="border:2px solid green; width:1000px; height:600px;" > <img src=".. /img/3.svg" style="width:100%; height:100%;" /> </div>Copy the code

2. Place the SVG source code directly into a div, as shown below, where SVG diagrams are not automatically scaled

<div>
  <svg width="580" height="400" style="border:2px solid red;" xmlns="http://www.w3.org/2000/svg">
    ...
  </svg>
</div>
Copy the code

Adjust the width and height Settings for SVG, and use the viewBox to set the width and height to automatically change the SVG to match the div size

<div>
  <svg viewBox="0 0 580 400" xmlns="http://www.w3.org/2000/svg">
    ...
  </svg>
</div>
Copy the code

Add flicker animation

The CSS3 @Keyframes rule is used here to change the outer contour of the graphic element.

.svg-stroke-width { animation: strokeWidth 3s infinite; } @keyframes strokeWidth {0% {stroke-width: 0.1; stroke: #4eb8ff; } 100% {stroke-width: 1.6; stroke: #4eb8ff; }}Copy the code

Select the element and add the class style

document.getElementById(element).classList.add('svg-stroke-width');
Copy the code

Functional integration

Based on one input box and one button, manually set the dynamic effect of the process of some devices (only supporting K1,C1,C2,C4,C3,K2).

GitHub source address

Github.com/gywgithub/e…

Refer to the link

SVG online editor – rookie tools at https://c.runoob.com/more/svgeditor/

Developer.mozilla.org/zh-CN/docs/…

Developer.mozilla.org/zh-CN/docs/…

Developer.mozilla.org/zh-CN/docs/…

www.runoob.com/css3/css3-a…