Visual system of bf ironmaking Plant based on HTML5 WebGL

// 3d topology view
let g2d = new ht.graph.GraphView();
let g3dDm = g2d.dm();
// 3d topology view
let g3d = new ht.graph3d.Graph3dView();
let g3dDm = g3d.dm(); 
// Deserialize the 2D view component and 3D view component
g2d.deserialize('displays/index.json');
g3d.deserialize('scenes/index.json');Copy the code

// Add the 3D component under the body
g3d.addToDOM();
// Add the 2D component to the root div of the 3D component and parent-child DOM events will bubble up so that the INTERACTION of the 3D scene will not be affected
g2d.addToDOM(g3d.getView());Copy the code

// Change the left and right keys interaction modeletmapInteractor = new ht.graph3d.MapInteractor(this.g3d); g3d.setInteractors([mapInteractor]); Mapinteractor. maxPhi = math.pi / 2; // Avoid overlap between 2D and 3D interactionslet div2d = g2d.getView();
const handler = e => {
    if(g2d.getDataAt(e)) { e.stopPropagation(); }}; div2d.addEventListener('mousedown', handler);
div2d.addEventListener('touchstart', handler); div2d.addEventListener(getWheelEventName(div2d), handler); // On an HTMLElement, one or two of the following three events may be supported, but only one event will be called back. Standard events will be called back first, and compatibility events will not be triggered after standard events are triggeredfunction getWheelEventName(element) {
    if ('onwheel' inElement) {// Standard eventreturn 'wheel';
    } else if(document.onmousewheel ! == undefined) {// Generic old version of the eventreturn 'mousewheel';
    } else{// Old Firefox eventsreturn 'DOMMouseScroll'; }}Copy the code

// 昨日利用系数数据对接
axios.get('/yesterdayUse').then(res => {
    setBindingDatasWithAnim(dm, res, undefined, v => v.toFixed(2)); }); // Yesterday fuel ratio data is connected to axios.get('/yesterdayFuel').then(res => {
    setBindingDatasWithAnim(dm, res, undefined, v => v.toFixed(2)); }); // Connect yesterday's furnace grade data to AXIos.get ('/yesterdayIn').then(res => {
    setBindingDatasWithAnim(dm, res, undefined, v => v.toFixed(2)); }); // Connect yesterday gas utilization data to axios.get('/yesterdayCoal').then(res => {
    setBindingDatasWithAnim(dm, res, undefined, v => v.toFixed(2)); }); // Real-time alert information panel table polling load data to scroll playback this.addTablerow ();setInterval(() => {
    this.addTableRow();
}, 5000);Copy the code

requestData() {
    letdm = this.view.dm(); // Safety index data is connected and loaded into the ring animation axios.get('/levelData').then(res => {
        setBindingDatasWithAnim(dm, res, 800, v => Math.round(v)); }); // Real time data (air volume, air temperature and oxygen content) is connected and loaded into the progress bar animation axios.post('/nature'['windNumber'.'windTemp'.'oxygenNumber'
    ]).then(res => {
        setBindingDatasWithAnim(dm, res, 800, v => parseFloat(v.toFixed(1)));
    });
}Copy the code

setValueWithAnimation (node, name, value, format, accesstype = 's', duration = 300) {
    letoldValue; // Determine if the data binding is a custom attribute attr and fetch the old value according to the binding nameif (accesstype === 'a') { oldValue = node.a(name); } // Determine that the data binding is a style property and fetch the old value based on the binding nameelse if (accesstype === 's') { oldValue = node.s(name); } // Get the value of the data binding by default through the getterelse{ oldValue = node[ht.Default.getter(name)](); } // Set the difference between the old and new valuesletrange = value - oldValue; // Execute animation ht.default. startAnim({duration: duration, easing:function (t) { return1 - (--t) * t * t * t; }, action: (v, t) => {// The new value increases the animation rangeletnewValue = oldValue + range * v; // Determine the format of the dataif(format) { newValue = format(newValue); } // Determine that the data binding is a custom attribute attr and set the new valueif (accesstype === 'a') { node.a(name, newValue); } // Determine that the data binding is the style property and set the new valueelse if (accesstype === 's') { node.s(name, newValue); } // The new value of the data binding is set by default via the setter of the value storeelse{ node[ht.Default.setter(name)]()(node, newValue); }}}); }Copy the code

addTableRow() {// Get the table nodelettable = this.right3; // Request interface data axios.get('getEvent').then(res => {// Get the data binding of the rolling information of the table nodelet tableData = table.a('dataSource'); // Add one or more elements to the beginning of the scrolling information array by calling unshift(); // Initialize the vertical offset of the table table.a('ty', - 54); Ht.default. startAnim({duration: 600, action action: (v, t) => {table.a({// Scroll 100 after adding data'firstRowTx': 100 * (1-v), // The opacity gradient appears on the first line'firstRowOpacity': v, // Longitudinal offset 54 height'ty': (v - 1) * 54 }); }}); }); }Copy the code

hidePanel() {// Store the clipped child elements of the left data binding into an arraylet leftStartClipIndexs = (() => {
        let arr = [];
        for (let i = 1; i <= 4; i++) arr.push(this['left' + i].s('clip.percentage'));
        returnarr; }) (); // Store the clipped child element of the right data binding into an arraylet rightStartClipIndexs = (() => {
        let arr = [];
        for (let i = 1; i <= 3; i++) arr.push(this['right' + i].s('clip.percentage'));
        returnarr; }) (); // Set the delay time for panel clipping to make the visual more layeredletdelayArrays = [400, 800, 1200, 1600]; // Animation executes the functionlet action = (index) => {
        ht.Default.startAnim({
            duration: 700,
            easing: Easing.swing,
            action: (v, t) => {
                this['left' + index].s('clip.percentage', leftStartClipIndexs[index - 1] + (0 - leftStartClipIndexs[index - 1]) * v);
                this['right' + index].s('clip.percentage', rightStartClipIndexs[index - 1] + (0 - rightStartClipIndexs[index - 1]) * v); }}); }; // Call back the action animation by determining the length of the delay time arrayfor (leti = 0, l = delayArrays.length; i < l; i++) { ht.Default.callLater(action, this, [i + 1], delayArrays.shift()); }}Copy the code

Const ROAM_EYES = [[1683.6555274005063, 939.999999999999993, 742.655414747474625], [1717.1004359371925, 512.9256996098727, -1223.5575465999652], [-181.41773461002046, 245.58303266170844, -2043.6755074222654], [-1695.7113902533574, 790.0214102589537, -877.645744191523], [-1848.1700283399357, 1105.522705042774, [-108, 940, 1837]]; // Enable camera roaming animationplayRoam() {// Set the scene eye Angleleteye = ROAM_EYES[this.roamIndex]; MoveCamera this._roamanim = this.viewer.movecamera (eye, [0, 0, 0], {duration: this.roamIndex? 3000 : 4000, easing: Easing.easeOut, finishFunc: () => { this.roamIndex ++;letnextEye = ROAM_EYES[this.roamIndex]; // Determine if there is a next set of eye angles, if there is, continue the camera Angle movement animation, if not, reset the roaming animationif (nextEye) {
                this.playRoam();
            }
            elseEvent.fire (EVENT_SHOW_PANEL); this.resetRoam(); }}}); }Copy the code

// Set the initial offsetletoffset1 = 0, trackOffset = 0; // Always call set offsetsetInterval(() => {
    flows.each(node => {
        node.s({
            'top.uv.offset': [-offset1, 0],
            'front.uv.offset': [-offset1, 0],
        });
    });
    track.s('shape3d.uv.offset', [0, -trackOffset]); // Increase offset1 += 0.1; TrackOffset + = 0.03; }, 100);Copy the code