preface

A sun shop in the water, half river rustling half river red. With the rapid development of urban construction, there are a large number of new pipe network water operation every year. Cities have a large number of drainage device, to form the corresponding urban drainage system, drainage system by the inspection Wells and drainage pumping station, sewage treatment plant, water mouth, drains, etc., of inspection Wells, rainwater drainage mouth, drains, etc. Through the drainage pipe network connection, the daily rain sewage into the drainage pipe network to transport emissions. At present, the urban drainage pipe network has the characteristics of huge structure and complex structure. In the existing technology, the monitoring and monitoring of the urban drainage pipe network still remain in a large number of artificial mode, and the intelligent level and accuracy can not meet the needs of the existing technology.

(www.hightopo.com/demo/draina)…

Development status and demand of traditional urban water industry

In recent years, the Internet of Things and cloud computing technologies have been constantly innovated and improved, providing favorable conditions for the establishment of smart cities. At the same time, in order to ensure water security and save limited resources, the traditional water industry is constantly exploring smart water construction. In order to realize intelligent production, intelligent management, intelligent service and intelligent control, intelligent water came into being. 1. In the urban water supply and drainage system, manual management and inspection are basically relied on to ensure the normal water supply and drainage of each link, with low efficiency and long feedback cycle; 2. Manual meter reading may cause nuisance to people, “inaccurate reading”, “valuation” and other situations, resulting in poor customer service experience; 3. Water quality, water pressure, and associated environmental data cannot be clearly grasped, which is not conducive to the fine management of water utilities; 4. It is difficult to achieve unified management of water equipment such as water pump, sluice, water intake plug and sewage processor; 5, drainage pipe network, sewage treatment facilities, reclaimed water reuse and other drainage system is not sound.

According to the market demand of water industry, we use HT for Web to build a sewage treatment plant pump station automatic control system. The system based on the concept of Internet of things, the use of information technology means, to realize real-time monitoring of pipeline operation indicators including the network level, flow, water, gas, such as pump station running status information, ensure the safety of network to efficiently work, through the construction of safety early warning platform, improve the ability of emergency command and quick disposal, guarantee the safe operation of the drainage pipeline, The safe operation of the whole urban drainage pipeline can be grasped, controlled and predicted, and the scientific and advanced city-level hydraulic analysis ability can be provided to evaluate the capacity of urban drainage pipeline more comprehensively. Based on the data of urban drainage facilities, combined with the monitoring data of pipe network and meteorological rain situation, the realization provides decision-making basis for intelligent division of urban catchment area, drainage planning and waterlogging prediction. Through the intelligent water meter, pressure sensor, switch control valve, water quality sensor, flow sensor data collection, and then for the supply and drainage system of all pipelines, equipment (pumps, valves, water intake hydrants, fire hydrants, etc.) and structures (water plant, pool, water tower, etc.) intelligent control management, Fully master the operation status of water system, such as water level, flow, water quality, water pressure, pump station operation status, etc., to ensure the safe and efficient operation of water system.

Code implementation

First, set some basic parameters to get a better experience:

// Forbid dragging
gv.setMovableFunc((a)= > { return false }) 
// Hide the selected border
gv.getWireframe = (d) = > { d.s('wf.visible'.false)}// Set the eye
gv.setEye([583.- 212..- 789.]) 
// Set the center point
gv.setCenter([- 76..- 654..- 133.]) 
// Set the remote location
gv.setFar(100000) 
// Set the proximal position
gv.setNear(10) 
// Set interaction limits
gv.setInteractors([ new ht.graph3d.MapInteractor(gv) ]) 
// Set skyball
gv.setSkyBox(dm.getDataByTag('skyBox')) 
// Global Settings right click menu disable
window.document.oncontextmenu = (a)= > { return false }
// Copy the initial location
gv.scene = { 
    eye: ht.Default.clone(gv.getEye()),
    center: ht.Default.clone(gv.getCenter()),
    far: ht.Default.clone(gv.getFar()),
    near: ht.Default.clone(gv.getNear()),
}Copy the code

Copy the initial view of the entire scene for later processing. Listen for some mouse events to form your own operation style (such as double clicking on the background to restore the view and double clicking on the model to zoom in) :

gv.mi(e= > {
    let data = e.data
    let kind = e.kind
    // Double-click the background
    if (kind === 'doubleClickBackground') { 
        // Restore the perspective
        gv.moveCamera(this.gv.scene.eye, this.gv.scene.center, {duration : 1000})}// Double-click the model
    else if (kind === 'doubleClickData') { 
        // Zoom in
        gv.flyTo(data, {animation : {duration : 500}, distance : 800})}})Copy the code

There are some panels in the scene, which are 2D ICONS encapsulated previously. In the 3D scene, it is a Billboard type. We can set data.s(‘shape3d.autorotate’) property to determine whether the panel can be rotated automatically depending on the Angle of view.

At the same time, parameters such as values in these panels can be bound with user-defined attributes, which is convenient for us to realize data-driven later:

data.a('name', value)
data.a('state', value)
data.a('num', value)
...Copy the code

If you are careful, you can also find some billboard on the wall, which can be viewed by clicking on it. This small interaction also enhances the user experience:

gv.mi(e= > {
    let data = e.data,
        kind = e.kind
    // Click the model
    if (kind === 'clickData') { 
        // Zoom in
        gv.flyTo(data, {animation : {duration : 1000}, distance : 5000})}})Copy the code

The flyTo method means that the camera looks at a specific node or node list, and the options parameter of which we can set the animation effect. The direction is the direction of the eye at the target, which is relative to the target and affected by the rotation of the target itself. The distance represents the fixed distance between the eye and the center.

The last part is also the most special interactive effect in this demo. It is not hard to find that when we zoom in and out the whole scene through the scroll wheel, there will be layers of hidden parts of the building, such as the roof and floor, so that we can see the details of the structure and equipment inside the building.

We show or hide the model by judging the vertical Angle distance of the lens, and change the Boolean value of data.s(‘3d.visible’) property to achieve this.

this.gv.mp(e= > {
    const { property } = e
    if (property === 'eye') {
        // Hide logic when Y Angle is less than or equal to a certain value
        const [cameraX, cameraY, cameraZ] = e.newValue
        if (cameraY <= 500) {
            / / hide ()
            console.log('The roof should be hidden')}}})Copy the code

Project value

1. Wireless automatic meter reading greatly improves meter reading accuracy and efficiency, and significantly reduces labor cost; 2. Rapid positioning of leakage of pipe network Leakage analysis is realized through grid, real-time monitoring of water meters and rapid positioning of pipe network problems, so as to reduce leakage. 3. Refined management of water environment data Through real-time return of water quality, water pressure, temperature and other data, to achieve refined and visual management and improve management ability. 4, unattended, remote unified control through the Internet of things sensor equipment, water pump, sluice, water intake plug, sewage processor and other water equipment to achieve unified remote management. It can realize unattended site, administrators and technicians can remotely monitor the real-time state of water system anytime and anywhere; 5. Proactively report faults to reduce losses caused by unexpected faults. Equipment abnormalities are known in advance, faults are proactively reported, timely discovered and maintained as soon as possible, to avoid chain failures of upstream and downstream equipment and working environment caused by the failure of the equipment, and to minimize the frequency of unplanned shutdown of equipment and failure losses.

conclusion

Sewage treatment plant pump station automatic control system, in the form of 3D screen human-computer interaction to show the data, real-time data in the form of control panel. At the same time, the early warning value of each monitoring data can be set. When the data reaches the early warning value, it has the function of reminding. Its core modules include: data processing service, pipe network monitoring point management, monitoring real-time data, monitoring history management, monitoring data comparison, pipe network data analysis, monitoring data access design and development. The HT for Web platform makes the design of the interactive interface more simple and convenient. In this paper, some scene analysis and data visualization design are made for water treatment. If you have some opinions and fillings, please point out that you can make a contribution to the development of water industry and the country. Welcome everyone to leave a message in the comments section to discuss with each other and encourage progress together!

In 2019, we have also updated hundreds of 2D/3D visualization case sets of industrial Internet, where you can find many novel examples and discover different industrial Internet: “Share hundreds of 2D 3D Visualization Cases of HT Industrial Internet 2019”.

More interesting and interesting demo in which, welcome to visit ~~