DK-MES-2.0
/
HEGII.ss.mes.dashboard


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
							<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="/img/logo.png" />
    <link rel="bookmark" href="/img/logo.png" />
    <link rel="stylesheet" href="/plugins/bootstrap-4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="/Plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="DashBoard.css?v3" />
    <script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/Plugins/xrequest/xrequest.min.js"></script>
    <title>东科软件</title>
</head>
<body>
    <!--宣传视频-->
    <!--<script src="/main/Common/video.js"></script>-->

    <!--导航菜单-->
    <script src="/main/common/navbar.js"></script>

    <!--统计-->
    <div class="container-fluid">

        <!--页头-->
        <div class="row">
            <div class="col-4 d-inline-flex align-items-center justify-content-start">
                <img class="pl-3" src="/Img/hegii_logo_white.png" style="height: 26px;" />
                <span class="pl-3" id="报表加载"></span>
            </div>
            <div class="col-4 d-inline-flex align-items-center justify-content-center">
                <h3 class="text-center"><span style="font-weight:600;font-size:36px;">成型看板</span></h3>
            </div>
            <div class="col-4 d-inline-flex align-items-center justify-content-end">
                <span id="当前时间"></span>
                <a class="pl-2" href="javascript:void(0)" onclick="fullScreen(); $('#navbar').toggle();">
                    <img class="pr-3" src="/Img/dongke_logo_white.png" style="height: 40px;" />
                </a>
            </div>
        </div>

        <!--数据-->
        <div class="row pt-0">
            <div class="col-2 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:530px">
                    <div class="d-flex justify-content-center">
                        <h2><span class="badge badge-warning">1#线</span></h2>
                    </div>
                    <div class="d-flex justify-content-center">
                        <i id="line1_img" class="fa fa-cog fa-5x text-secondary" aria-hidden="true"></i>
                    </div>

                    <div class="d-flex justify-content-center text-info">
                        UPPH
                    </div>
                    <div class="d-flex justify-content-center">
                        <canvas height="120" id="barline1" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-2 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:530px">
                    <div class="d-flex justify-content-center">
                        <h2><span class="badge badge-warning">2#线</span></h2>
                    </div>
                    <div class="d-flex justify-content-center">
                        <i id="line2_img" class="fa fa-cog fa-5x text-secondary" aria-hidden="true"></i>
                    </div>
                    <div class="d-flex justify-content-center text-info">
                        UPPH
                    </div>
                    <div class="d-flex justify-content-center">
                        <canvas height="120" id="barline2" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-2 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:530px">
                    <div class="d-flex justify-content-center">
                        <h2><span class="badge badge-warning">3#线</span></h2>
                    </div>
                    <div class="d-flex justify-content-center">
                        <i id="line3_img" class="fa fa-cog fa-5x text-secondary" aria-hidden="true"></i>
                    </div>
                    <div class="d-flex justify-content-center text-info">
                        UPPH
                    </div>
                    <div class="d-flex justify-content-center">
                        <canvas height="120" id="barline3" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-2 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:530px">
                    <div class="d-flex justify-content-center">
                        <h2><span class="badge badge-warning">4#线</span></h2>
                    </div>
                    <div class="d-flex justify-content-center">
                        <i id="line4_img" class="fa fa-cog fa-5x text-secondary" aria-hidden="true"></i>
                    </div>
                    <div class="d-flex justify-content-center text-info">
                        UPPH
                    </div>
                    <div class="d-flex justify-content-center">
                        <canvas height="120" id="barline4" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-2 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:530px">
                    <div class="d-flex justify-content-center">
                        <h2><span class="badge badge-warning">5#线</span></h2>
                    </div>
                    <div class="d-flex justify-content-center">
                        <i id="line5_img" class="fa fa-cog fa-5x text-secondary" aria-hidden="true"></i>
                    </div>
                    <div class="d-flex justify-content-center text-info">
                        UPPH
                    </div>
                    <div class="d-flex justify-content-center">
                        <canvas height="120" id="barline5" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-2 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:530px">
                    <div class="d-flex justify-content-center">
                        <h2><span class="badge badge-warning">6#线</span></h2>
                    </div>
                    <div class="d-flex justify-content-center">
                        <i id="line6_img" class="fa fa-cog fa-5x text-secondary" aria-hidden="true"></i>
                    </div>
                    <div class="d-flex justify-content-center text-info">
                        UPPH
                    </div>
                    <div class="d-flex justify-content-center">
                        <canvas height="120" id="barline6" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div style="height:26px;"></div>
    </div>

    <!--版权信息-->
    <!--<script src="../common/footer.js"></script>-->

    <script src="/Plugins/bootstrap-4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="/Plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/Plugins/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
    <script src="/Plugins/sweetalert/sweetalert.min.js"></script>
    <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
    <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
    <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
    <script src="/Plugins/circleChart/circleChart.min.js"></script>

    <script>
        //缺陷统计刷新时间
        var refreshTime1 = 30000;
        var currentTime1 = 0;

        var doGetData;
        var doGetTime;

        var frameHeight;
        var tableHeight;
        var offsetHeight = 20;

        var tkJson;
        var hg1Json;
        var hg2Json;

        $(document).ready(function () {
            //设置缩放
            //xuwell.setScale(1);

            //初始化
            init();

            //首次加载
            //loadData();

            //定时刷新数据
            doGetData = setInterval(function () { timeUpdate(); }, 1000);

            //刷新时间
            loadServerTime();
            doGetTime = setInterval(function () { loadServerTime(); }, 15000);

        });

        //取服务器时间
        function loadServerTime() {
            $.get('../api/GetDateTime.ashx', function (data) {
                var json = JSON.parse(data);
                if (json["success"] == true) {
                    $('#当前时间').html(json["rows"]["时间"]);
                }
            });
        }

        function timeUpdate() {

            if (currentTime1 <= 0) {
                loadData();
                currentTime1 = refreshTime1;
            }
            else {
                if (currentTime1 > 0) {
                    $('#报表加载').html('刷新：' + currentTime1 / 1000);
                    currentTime1 = currentTime1 - 1000;
                }
            }
        }

        function loadData(callback) {
            $.get('rpt.ashx?m=upph', function (data) {

                var xLabels1 = [];
                var xLabels2 = [];
                var xLabels3 = [];
                var xLabels4 = [];
                var xLabels5 = [];
                var xLabels6 = [];
                var xDatas1 = [];
                var xDatas2 = [];
                var xDatas3 = [];
                var xDatas4 = [];
                var xDatas5 = [];
                var xDatas6 = [];

                var result = JSON.parse(data);

                if (result["success"] == true) {
                    var json = result["rows"];
                    for (var p = 0; p < json.length; p++) {
                        if (json[p]["KB_WS_NAME"] == "1#线") {
                            $("#line1_img").removeClass("text-secondary");
                            $("#line1_img").addClass("fa-spin");
                            $("#line1_img").addClass("text-info");
                            xLabels1.push(json[p]["USERCODE"]);
                            xDatas1.push(json[p]["UPPH"]);
                        }
                        if (json[p]["KB_WS_NAME"] == "2#线") {
                            $("#line2_img").removeClass("text-secondary");
                            $("#line2_img").addClass("fa-spin");
                            $("#line2_img").addClass("text-info");
                            xLabels2.push(json[p]["USERCODE"]);
                            xDatas2.push(json[p]["UPPH"]);
                        }
                        if (json[p]["KB_WS_NAME"] == "3#线") {
                            $("#line3_img").removeClass("text-secondary");
                            $("#line3_img").addClass("fa-spin");
                            $("#line3_img").addClass("text-info");
                            xLabels3.push(json[p]["USERCODE"]);
                            xDatas3.push(json[p]["UPPH"]);
                        }
                        if (json[p]["KB_WS_NAME"] == "4#线") {
                            $("#line4_img").removeClass("text-secondary");
                            $("#line4_img").addClass("fa-spin");
                            $("#line4_img").addClass("text-info");
                            xLabels4.push(json[p]["USERCODE"]);
                            xDatas4.push(json[p]["UPPH"]);
                        }
                        //if (json[p]["KB_WS_NAME"] == "5#线") {
                        //    $("#line5_img").removeClass("text-secondary");
                        //    $("#line5_img").addClass("fa-spin");
                        //    $("#line5_img").addClass("text-info");
                        //    xLabels5.push(json[p]["USERCODE"]);
                        //    xDatas5.push(json[p]["UPPH"]);
                        //}
                        //if (json[p]["KB_WS_NAME"] == "6#线") {
                        //    $("#line6_img").removeClass("text-secondary");
                        //    $("#line6_img").addClass("fa-spin");
                        //    $("#line6_img").addClass("text-info");
                        //    xLabels6.push(json[p]["USERCODE"]);
                        //    xDatas6.push(json[p]["UPPH"]);
                        //}
                    }
                }

                //更新图表 UPPH
                if (xDatas1.length > 0) {
                    window.barConfig1.data.labels = xLabels1;
                    window.barConfig1.data.datasets[0].data = xDatas1;
                    window.bar1.update();
                }
                if (xDatas2.length > 0) {
                    window.barConfig2.data.labels = xLabels2;
                    window.barConfig2.data.datasets[0].data = xDatas2;
                    window.bar2.update();
                }
                if (xDatas3.length > 0) {
                    window.barConfig3.data.labels = xLabels3;
                    window.barConfig3.data.datasets[0].data = xDatas3;
                    window.bar3.update();
                }
                if (xDatas4.length > 0) {
                    window.barConfig4.data.labels = xLabels4;
                    window.barConfig4.data.datasets[0].data = xDatas4;
                    window.bar4.update();
                }
                //if (xDatas5.length > 0) {
                //    window.barConfig5.data.labels = xLabels5;
                //    window.barConfig5.data.datasets[0].data = xDatas6;
                //    window.bar5.update();
                //}
                //if (xDatas6.length > 0) {
                //    window.barConfig6.data.labels = xLabels6;
                //    window.barConfig6.data.datasets[0].data = xDatas6;
                //    window.bar6.update();
                //}

                if (typeof callback != 'undefined') callback();

            });
        }
        function init() {
            //柱图
            var xLabels = [];
            var xDatas = [];

            Chart.defaults.global.defaultFontColor = 'white';
            Chart.defaults.global.defaultFontSize = 16;
            window.barConfig1 = {
                data: {
                    labels: xLabels,
                    datasets: [{
                        backgroundColor: [
                            color(window.chartColors.blue).alpha(0.6).rgbString(),
                            color(window.chartColors.red).alpha(0.6).rgbString(),
                            color(window.chartColors.green).alpha(0.6).rgbString()
                        ],
                        borderColor: [
                            window.chartColors.blue,
                            window.chartColors.red,
                            window.chartColors.green
                        ],
                        borderWidth: 1,
                        barPercentage: 1,
                        barThickness: 6,
                        maxBarThickness: 8,
                        minBarLength: 2,
                        data: xDatas
                    }]
                },
                type: 'bar',
                options: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: false,
                        text: ""
                    },
                    tooltips: {
                        mode: 'point',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true
                        }],
                        yAxes: [{
                            display: true,
                            stacked: true,
                            ticks: {
                                //min: 0,
                                //stepSize: 3,
                                //max: 15
                            }
                        }]
                    }
                }
            };
            window.barConfig2 = window.barConfig1;
            window.barConfig3 = window.barConfig1;
            window.barConfig4 = window.barConfig1;
            //window.barConfig5 = window.barConfig1;
            //window.barConfig6 = window.barConfig1;

            var ctxBar1 = document.getElementById("barline1").getContext("2d");
            window.bar1 = new Chart(ctxBar1, barConfig1);
            var ctxBar2 = document.getElementById("barline2").getContext("2d");
            window.bar2 = new Chart(ctxBar2, barConfig2);
            var ctxBar3 = document.getElementById("barline3").getContext("2d");
            window.bar3 = new Chart(ctxBar3, barConfig3);
            var ctxBar4 = document.getElementById("barline4").getContext("2d");
            window.bar4 = new Chart(ctxBar4, barConfig4);
            //var ctxBar5 = document.getElementById("barline5").getContext("2d");
            //window.bar5 = new Chart(ctxBar5, barConfig5);
            //var ctxBar6 = document.getElementById("barline6").getContext("2d");
            //window.bar6 = new Chart(ctxBar6, barConfig6);

        };
        window.chartColors = {
            red: 'rgb(255, 99, 132)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 205, 86)',
            green: 'rgb(75, 192, 192)',
            blue: 'rgb(54, 162, 235)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(231,233,237)'
        };

        var color = Chart.helpers.color;

    </script>

</body>
</html>