如何计算具有两个特定值的Firebase子级的数量?

时间:2019-01-21 03:26:16

标签: reactjs firebase firebase-realtime-database

我的reactJS程序必须获取客户端用户发送的请求的百分比,我们必须向管理员用户显示与“ BarangayClearance”相对应的数据百分比,以及状态为“待处理”的数据。运行该程序后,它将引发错误”(错误:Query.orderByChild:您无法合并多个orderBy调用。)如何获得所需的结果?请帮助...

代码:

import React, { Component } from 'react';
import { Bar } from 'react-chartjs-2';
import * as firebase from 'firebase';
import CountUp from "react-countup/build";

var names;
var RequestFor = "none";
var date = "none"

var count = 0;

var countClear;
var PClear = 0;
var percentageClear = 0;

var PCert = 0;

var percentage = 0;
var ClearanceTotal = 0;
var CertificateTotal = 0;
var overAll = 0; //Variable initializations...





if (!firebase.apps.length) {
    firebase.initializeApp(config);
}

var database = firebase.database();


var ref = database.ref('BrgyRequests');
ref.on('value', errData);

var BClear = ref.orderByChild('type').equalTo("BarangayClearance").orderByChild('status').equalTo("Pending");
BClear.on('value', errData);

var BCert = ref.orderByChild('type').equalTo("BarangayCertificate");


ref.on("value", function(snapshot) {
    count = snapshot.numChildren();

    PClear = count/count;
    percentage = PClear*100;
    console.log("There are "+snapshot.numChildren()+" entries" );
    console.log(count)
})

BClear.on('value', function (snapshot) {
    var status = snapshot.val()
    if (status.status == 'Pending'){

    }
    ClearanceTotal = snapshot.numChildren();
    PClear = ClearanceTotal/count*100;

    console.log("Clearance has " + ClearanceTotal + " which is " + PClear +"%");
})

BCert.on('value', function (snapshot) {
    CertificateTotal = snapshot.numChildren();
    PCert = CertificateTotal/count*100;

    console.log("Certificate has " + CertificateTotal + "which is " + PCert + "%");


})

function errData (err) {
    // console.log('Error oy!');
    console.log(err);
}


class Chart extends Component {

    componentWillMount(){
        this.setState({
            chartData: { labels: ["Brgy. Certificate", "Brgy. Clearance"],
                datasets: [
                    {
                        label: 'Barangay Re',

                        data: [
                            PCert,
                            PClear
                        ],
                        backgroundColor: [
                            'rgba(236,134,169, 0.6)',
                            'rgba(2,145,216, 0.6)'
                        ]
                    }]},

        })
    }


    render() {
        return (
            <div>
                <div className="chart">
                    <Bar
                        data={this.state.chartData}
                        options={{maintainAspectRatio: false}}
                    />
                </div>

                <div style={{backgroundColor: '#0291D8', padding: '10px', paddingLeft: '18px', borderRadius: '20px', marginTop:'-140px', height: '110px', width: '150px', marginLeft: '680px'}}>
                    <div>
                        <CountUp
                            style={{ fontFamily: 'Nunito', fontWeight: 'bold', fontSize: '35px', color: '#ffffff', marginLeft: '50px'}}
                            start={0}
                            end={ClearanceTotal}
                            // end={50}
                            duration={6} />


                    </div>
                    <label style={{marginLeft: '15px', color: '#ffffff'}}>Brgy. Clearance</label>
                </div>

                <div style={{backgroundColor: '#F791B5', padding: '10px', paddingLeft: '18px', borderRadius: '20px', marginTop:'-110px', height: '110px', width: '160px', marginLeft: '850px'}}>
                    <div>
                        <CountUp
                            style={{ fontFamily: 'Nunito', fontWeight: 'bold', fontSize: '35px', color: '#ffffff', marginLeft: '50px'}}
                            start={0}
                            end={ClearanceTotal}
                            // end={50}
                            duration={6} />


                    </div>
                    <label style={{marginLeft: '15px', color: '#ffffff'}}>Brgy. Certificate</label>
                </div>

            </div>
        );
    }
}

export default Chart;

0 个答案:

没有答案