Detaillierte Einführung in die Anwendung der HTML5-Technologie in neuen Energiefeldern wie Windkraft und Photovoltaik (Bild)

Mit dem Aufkommen einer neuen Runde der industriellen Revolution ist die Bekämpfung des Klimawandels zunehmend zu einem globalen Konsens geworden, und die Energietechnologie wird zur treibenden Kraft, um die Transformation der Energiebranche voranzutreiben und eine innovationsgetriebene Entwicklung zu erreichen. Von der Welt bis nach China hat sich die neue Energiebranche, die durch Windenergie und Photovoltaik-Stromerzeugung repräsentiert wird, rasant entwickelt. Die Integration der Stromerzeugung aus erneuerbaren Energien und modernen Stromnetzen ist zum Kern der weltweiten nachhaltigen Energieerzeugungstechnologie geworden Der Weg der groß angelegten, hocheffizienten und niedrigen Stromerzeugung steigt weiter, und China liegt in Bezug auf die kumulierte installierte Kapazität und die neu installierte Kapazität in den Bereichen Windenergie und Photovoltaik-Stromerzeugung weltweit an erster Stelle.

Im Vergleich zu den stabilen und kontrollierbaren Produktionsmethoden traditioneller Energiequellen sind Windenergie und Solarenergie von Natur aus unvorhersehbar und in hohem Maße vom Wetter abhängig. Daher ist der Aufbau eines Netzwerks, das das Internet der Dinge integriert, von großer Bedeutung Daten: Die neue, in Cloud Computing integrierte Plattform zur Verwaltung von Energiegeräten verbessert die „Energieverfügbarkeit“ und „Zeitverfügbarkeit“ der Geräte und wird zum Schlüssel für die Modernisierung und Umgestaltung der Betriebsmanagementmethoden des Unternehmens selbst und sogar der gesamten neuen Energiebranche. Es ist ein wichtiger Bestandteil der Front-End-Big-Data-Visualisierung.

Das Folgende ist ein Screenshot des intelligenten Verwaltungslösungssystems Web SCADA für Photovoltaikkraftwerke, das vor vielen Jahren von der Zhichuang Energy Company auf Basis der HT for Web-Technologie implementiert wurde:

Zusätzlich zu ihrer Anwendung in den traditionellen Telekommunikations-, Energie- und Industriesteuerungsbereichen bietet die auf HT for Web basierende HTML5-Technologie (siehe „Web SCADA Industrial Control basierend auf HT for Web („Mobile Application“) wird mittlerweile in großem Umfang in neuen Energiefeldern wie Windkraft und Photovoltaik eingesetzt. HT for Web basierend auf Web-Technologie ist natürlich die bevorzugte Lösung für PaaS- und SaaS-Cloud-Plattformdienste Hier werden wir uns auf eine der ersten inländischen Anwendungen der Azure IoT-Suite auf der Microsoft Smart Cloud und die Integration der Tupu-Software HT für die grafische Front-End-Schnittstellenkomponente Middleware, einer Photovoltaik-Überwachung, verlassen Die Schnittstelle der Power+ IoT-Überwachungs-Cloud-Big-Data-Plattform wurde erfolgreich als Beispiel für alle erstellt und stellt diese System-Frontend-Technologie vor, die in mehr als 1.000 Windkraftanlagen und mehr als 5.000 Photovoltaik-Wechselrichtern und Generatoranschlusskästen im ganzen Land eingesetzt wird.

Der endgültige Rendering-Effekt der Seite, die wir im Detail vorstellen werden, ist wie folgt. Verwenden Sie für Erfahrungszwecke das Beispiel im offiziellen Website-Beispielzentrum von HT for Web.

Nachdem man zunächst den Entwurfsentwurf des Designers erhalten hat, ist leicht zu erkennen, dass die Gesamtschnittstelle aus zwei Teilen besteht: den zusammenfassenden statistischen Informationen im oberen Teil und der spezifischen Konvergenz Im unteren Teil werden die Boxdetails angezeigt. Neben der Anzeige von Zusammenfassungsinformationen in Echtzeit bietet der obere Teil auch die Funktion, den unteren Teil der Combiner-Boxen zu filtern. Aufgrund der großen Datenmenge sind jedoch Hunderte oder sogar Tausende von Combiner-Boxen vorhanden der untere Teil, daher sind Zoomen, Schwenken und Adlerauge sowie weitere Bedienfunktionen erforderlich.

Aus der obigen Analyse lässt sich leicht schließen, dass die zweite Hälfte von der GraphView-Topologiekomponente von HT for Web ordnungsgemäß implementiert werden muss und der Kunde vorgeschlagen hat, dass jede Combiner-Box detaillierte Informationen anzeigen muss Alle wichtigen Indikatoren und Anzeigeanforderungen können variabel sein, daher reicht es definitiv nicht aus, einfache Knotenknoten zur Anzeige durch Grundfunktionen wie Bilder, Text, Blasen und Alarmfarben zu verwenden. Für diese Art von Anforderungen ist es sehr gut geeignet Um den Vektor von HT für die Web-Lösung www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html zu verwenden, wurden die Grundprinzipien in der Reihe „HT Graphic Component Design“ ausführlich erläutert soll hier nicht weiter ausgeführt werden.

Für die Combiner-Box müssen wir ein Vektorsymbol entwerfen, wie im Bild oben gezeigt. Dies ist nicht schwierig, indem Sie drei durch teilen Fünf und dann durch zwei dividieren. Richten Sie die Datenbindung zwischen Grafikparametern wie Farbe, Text, Größe und Geschäftsparametern in der Grafik ein. Anschließend müssen Sie nur noch die im Hintergrund erhaltenen Echtzeitdaten auf die relevanten Bindungseigenschaften einstellen das grafische Element zur Laufzeit.

Obwohl die von HT for Web übernommene MVP/MVVM-Datenmodell-Designarchitektur in „Hunderte von HTML5-Beispielen zum Erlernen von HT-Grafikkomponenten – Topologiekarte“ erläutert wurde, gibt es immer noch viele Leute, die gerade erst damit anfangen Entwicklung von Webanwendungen. Ein Klassenkamerad fragte, wie HT mit dem Backend kommuniziert, um Daten in Echtzeit zu sammeln. Sie werden die folgenden zwei Daten bemerken:

Diese beiden Datenwerte sind in der Demo fest codiert, aber im tatsächlichen Betrieb werden die Daten in den letzten Jahren immer realer übertragen. Auf HTML5 basierende Zeitüberwachungssysteme haben die Datenerfassung in Echtzeit erreicht, und der Kunde ist in diesem Fall keine Ausnahme. Wie bereits erwähnt, haben sie die Azure IoT-Suite von Microsoft Smart Cloud übernommen, also haben sie .NET übernommen. Das auf ASP.NET basierende SignalR ist natürlich die WebSocket--Framework--Lösung, die sie übernommen haben.

function createDatas() {
    json = JSON.parse(basicData);
    json.result.forEach(function(data) {        var node = new ht.Node();
        node.setImage('symbols/enjoy/pv/pv-box.json');
        node.s({            'select.color': 'white',            '2d.selectable': false
        });
        node.a({
            deviceName: data.deviceName,
            capacity: data.capacity + 'KW',
            raw_capacity: data.capacity
        });
        node.setTag(data.deviceCode);
        graphView.getDataModel().add(node);
    });                        
}

Wenn die Seite geöffnet wird, erstellt das System zunächst Hunderte von Combiner-Box-Primitiven basierend auf den BasicData-Informationen in der CreateData-Funktion und übergibt node.setImage( 'Symbole /enjoy/pv/pv-box.json'); Stellen Sie das Grafikelement auf den von uns erstellten Combiner-Box-Vektor ein und verwenden Sie dann den einfachen erweiterten Layout-Algorithmus im Beispiel, um das Layout von Hunderten von Combiner-Box-Geräten zu erstellen Netzwerktopologiediagramme können Sie mit dem automatischen Layout von HT anordnen:

Hier ist zu beachten, dass wir beim Erstellen der Diagrammelemente jedes Diagramm über node.setTag(data.deviceCode) festlegen Das Element ist sehr wichtig, um das entsprechende Element schnell zu finden und sich auf die Aktualisierung vorzubereiten.

function fillDatas() {    
var hlx_state_0 = hlx_state_1 = hlx_state_2 = hlx_state_3 = 0;    
var zc_state_1 = zc_state_2 = zc_state_3 = 0;

    json = JSON.parse(realTimeData);                        
    json.result.wtrtDatas.forEach(function(data) {       
        var comboxRTDto = data.comboxRTDto;                     
        var node = graphView.getDataModel().getDataByTag(comboxRTDto.deviceCode);        
        if (node) { 
            var hlxState = comboxRTDto.pvDeviceStCode;                               
            node.a({
                hlxState: hlxStateMap[hlxState],
                discreteRate: comboxRTDto.discreteRate + '%',
                outputPower: comboxRTDto.outputPower + 'KW',
                percentage:  comboxRTDto.outputPower / node.a('raw_capacity')
            });                                                                
        }
    });  
}

Nachdem die oben genannten Arbeiten abgeschlossen sind, kann die Schnittstelle bereits alle Photovoltaik-Kombinationskastengeräte anzeigen, aber die von jedem Gerät angezeigten Parameterinformationen werden beim Erstellen festgelegt Die Initialisierung des Vektorsymbols ist kein echter Echtzeit-Laufwert, daher müssen wir die Grafikelemente basierend auf den Daten aktualisieren, die in Echtzeit aus dem Hintergrund übertragen werden. In der obigen fillData-Funktion analysieren wir die realTimeData-Daten und durchlaufen sie dann Suchen Sie über dataModel.getDataByTag (deviceCode) jedes Combiner-Felds nach dem entsprechenden Grundelement und legen Sie die entsprechenden attr-Attribute fest. Da diese Attribute während des Vektorentwurfs an die entsprechenden Grafikparameter gebunden wurden, wird beim Festlegen aller Daten jedes entsprechende Combiner-Feld auf dem Das Topologiediagramm wird automatisch in Echtzeit angezeigt.

In diesem Beispiel haben wir die Echtzeitdaten nur einmal aktualisiert, aber ein normales System würde sie einige Sekunden lang über AJAX abfragen oder WebSocket verwenden, um die Daten in Echtzeit vom Hintergrund an das Front-End zu übertragen Wenn Änderungen vorliegen, rufen Sie die Funktion fillDatas mehrmals auf, um die Daten zu aktualisieren. Darüber hinaus wird der Inhalt dieser Schnittstellenszene nach der ersten BasicData-Abfrage dynamisch erstellt. Sie müssen es nur deserialisieren, um die Topologiekartenszene zu erstellen.

Nach Abschluss der oben genannten Schritte haben wir nur die Hälfte der Arbeit abgeschlossen. Denken Sie daran, dass wir im oberen Teil auch ein Zusammenfassungs- und Filterfeld haben :

Als ich mir diesen Designentwurf zum ersten Mal ansah, dachte ich natürlich, dass das Bedienfeld und die Bedienschaltflächen mithilfe der Panel-Komponente: www.hightopo.com/guide/guide/plugin/form/ ht-form-guide.html, aber dann habe ich darüber nachgedacht, dass der Stil allgemeiner Komponenten relativ fest ist, auch wenn der Effekt angepasst ist Es ist schwierig, mit sich ändernden Anforderungen umzugehen. Ich dachte plötzlich, dass wir dafür immer noch die GraphView-Topologiekomponente von HT für Web verwenden können > ist ein Node-Knoten mit dem Formtyp „rect“, und die Filtersteuerungsschaltfläche besteht eigentlich nur aus einer Reihe von Node-Primitiven. Wir legen jedoch verschiedene Hintergrundfarben fest, zentrieren die Etikettenbeschriftung und ändern den Elementauswahleffekt vom Rand zum Schatten Auswahleffekt, und Sie sind fertig. Da es sich um ein topologisches Kartenlayout handelt, können Benutzer die Layoutposition oder den Schnittstellenstil unabhängig von Änderungen in den Anforderungen einfach per Drag & Drop ändern und neue Stilparameter festlegen, um sich ändernden Geschäftsdarstellungen gerecht zu werden braucht

function createHeader() {
    header = new ht.graph.GraphView();                   
    ht.Default.xhrLoad('displays/enjoy/pv/pv-header.json', function(json) {
        header.getDataModel().deserialize(json);                    
        header.getDataModel().setBackground(undefined);
        createDatas();
        fillDatas();  
        layoutDatas();                      
    });
    header.setInteractors(null);    
    var handleClick = function(e) {        
    if (!graphView.getView().contains(e.target)) {            
    var data = header.getDataAt(e);
            header.sm().ss(data);                        
        }
    };
    document.body.addEventListener('mousedown', handleClick, false);
    document.body.addEventListener('touchstart', handleClick, false);               
}

汇总部分就是有以上 createHeader 函数搞定，注意这里我们通过 ht.Default.xhrLoad('displays/enjoy/pv/pv-header.json 直接加载已经序列化好的拓扑图信息，然后由于该汇总面板唯一需要的交互就是点击选中分类按钮进行过滤，于是我们通过 header.setInteractors(null); 直接关闭了所有  HT for Web 的默认交互，然后通过添加 mousedown 和 touchstart 的原生 HTML 监听事件自定义交互逻辑，这里只需要通过 header.getDataAt(event) 传入不管是 touch 还是 mouse 事件，HT 自动回返回当前操作点下的图元，后续过滤已经动画的逻辑比较简单，这里就不展开说明了，有兴趣的可以改造成更带感的过滤动画布局效果，可参考《透过WebGL 3D看动画Easing函数本质》一文了解   HT for Web  的各种预制的动画功能。

这里我们仅演示了光伏的一个页面效果，风电的风机也可以采用类似的方式呈现，这个上万个矢量风机实时转动的 HTML5 性能效果，也可以结合例如百度地图、OpenLayers 或 GoogleMap 等地图方案呈现风机或光伏监控画面：

 

对于看腻了 2D 矢量风机的，这个采用  HT for Web  实现的 3D 可旋转风机 HTML5 的代码也就寥寥几十行，今天篇幅有限先不展开介绍了，大家就先玩玩 demo 。

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Anwendung der HTML5-Technologie in neuen Energiefeldern wie Windkraft und Photovoltaik (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!