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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
							<!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="../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>
    <script src="/Plugins/xcountto/xcountTo.min.js"></script>
    <title>东科软件</title>
</head>
<body>

    <div class="m4_box_1920_1080">
        <div class="m4_box_title">
           <div class="m4_box_title_arrow"></div><div class="m4_box_title_arrow2"></div> <div>设备状态总览</div><span class="m4_box_title_loading" id="报表加载"></span>
        </div>
        <div class="m4_box_body" style="padding-right: 20px;">
            <div style="width: 1720px; height: 440px;">
                <div style="display:flex;">
                    <div style="width: 445px; height: 440px;">
                        <!--设备运行时间统计图-->
                        <canvas id="canvasDevice" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:440px;width:100%"></canvas>
                    </div>
                    <div style="width: 445px; height: 440px;">
                        <!--成型设备-->
                        <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                            <tr class="tr_title">
                                <td style="width:280px;">成型设备</td>
                                <td>状态</td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>高压注浆（1线）</td>
                                <td><span id="gy01" class="status_red">█</span> <span id="gy01_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>高压注浆（2线）</td>
                                <td><span id="gy02" class="status_red">█</span> <span id="gy02_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>高压注浆（3线）</td>
                                <td><span id="gy03" class="status_red">█</span> <span id="gy03_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>高压注浆（4线）</td>
                                <td><span id="gy04" class="status_red">█</span> <span id="gy04_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>高压注浆（5线）</td>
                                <td><span id="gy05" class="status_red">█</span> <span id="gy05_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>高压注浆（6线）</td>
                                <td><span id="gy06" class="status_red">█</span> <span id="gy06_title"></span> </td>
                            </tr>

                        </table>
                    </div>
                    <div style="width: 445px; height: 440px;">
                        <!--干燥房-->
                        <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                            <tr class="tr_title">
                                <td style="width:280px;">烘干房</td>
                                <td>状态</td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>阴干房（1号）</td>
                                <td><span id="hg01" class="status_red">█</span> <span id="hg01_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>阴干房（2号）</td>
                                <td><span id="hg02" class="status_red">█</span> <span id="hg02_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>烘干房（1号）</td>
                                <td><span id="hg03" class="status_red">█</span> <span id="hg03_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>烘干房（2号）</td>
                                <td><span id="hg04" class="status_red">█</span> <span id="hg04_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>烘干房（3号）</td>
                                <td><span id="hg05" class="status_red">█</span> <span id="hg05_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>烘干房（4号）</td>
                                <td><span id="hg06" class="status_red">█</span> <span id="hg06_title"></span> </td>
                            </tr>

                        </table>
                    </div>
                    <div style="width: 445px; height: 440px;">
                        <!--施釉机器人-->
                        <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                            <tr class="tr_title">
                                <td style="width:280px;">施釉（4+1线）</td>
                                <td>状态</td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>搬运机器人（1号）</td>
                                <td><span id="sy01" class="status_red">█</span> <span id="sy01_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>喷房机器人（1号）</td>
                                <td><span id="sy02" class="status_red">█</span> <span id="sy02_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>喷房机器人（2号）</td>
                                <td><span id="sy03" class="status_red">█</span> <span id="sy03_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>喷房机器人（3号）</td>
                                <td><span id="sy04" class="status_red">█</span> <span id="sy04_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>喷房机器人（4号）</td>
                                <td><span id="sy05" class="status_red">█</span> <span id="sy05_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td></td>
                                <td><span id="sy06" class=""></span> <span id="sy06_title"></span> </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div style="width: 1720px; height: 340px; ">
                <div style="display:flex;">
                    <div style="width: 445px; height: 340px; padding-top:60px;">
                        <!--停机时间累计-->
                        <table cellspacing="0" cellpadding="0" border="0" style="width:100%;padding-right:40px;">
                            <tr class="tr_title_warning">
                                <td>正常</td>
                                <td>故障</td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:140px;">
                                <td id="okNum" data-speed="2000" style="font-size: 40px; width: 50%"></td>
                                <td id="errNum" data-speed="2000" style="font-size: 40px; width: 50%"></td>
                            </tr>
                        </table>
                    </div>
                    <div style="width: 445px; height: 340px; ">
                        <!--登卸窑机器人-->
                        <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                            <tr class="tr_title">
                                <td style="width:280px;">登卸窑机器人</td>
                                <td>状态</td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>登窑机器人（1号）</td>
                                <td><span id="dxy01" class="status_red">█</span><span id="dxy01_title"></span></td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>卸窑机器人（1号）</td>
                                <td><span id="dxy02" class="status_red">█</span><span id="dxy02_title"></span></td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>登窑机器人（2号）</td>
                                <td><span id="dxy03" class="status_red">█</span><span id="dxy03_title"></span></td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>卸窑机器人（2号）</td>
                                <td><span id="dxy04" class="status_red">█</span><span id="dxy04_title"></span></td>
                            </tr>
                        </table>
                    </div>
                    <div style="width: 445px; height: 340px; ">
                        <!--功能检测-->
                        <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                            <tr class="tr_title">
                                <td style="width:280px;">功能检测</td>
                                <td>状态</td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>测漏机（1号）</td>
                                <td><span id="ss01" class="status_red">█</span><span id="ss01_title"></span></td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>测漏机（2号）</td>
                                <td><span id="ss02" class="status_red">█</span><span id="ss02_title"></span></td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>测漏机（3号）</td>
                                <td><span id="ss03" class="status_red">█</span><span id="ss03_title"></span></td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>测漏机（4号）</td>
                                <td><span id="ss04" class="status_red">█</span><span id="ss04_title"></span></td>
                            </tr>

                        </table>
                    </div>
                    <div style="width: 445px; height: 340px; ">
                        <!--包装机器人-->
                        <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                            <tr class="tr_title">
                                <td style="width:280px;">包装机器人</td>
                                <td>状态</td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>自动装箱机器人（1号）</td>
                                <td><span id="bz01" class="status_red">█</span><span id="bz01_title"></span></td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>自动装箱机器人（2号）</td>
                                <td><span id="bz02" class="status_red">█</span><span id="bz02_title"></span></td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>包装码垛机器人（1号）</td>
                                <td><span id="bz03" class="status_red">█</span><span id="bz03_title"></span></td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>包装码垛机器人（2号）</td>
                                <td><span id="bz04" class="status_red">█</span><span id="bz04_title"></span></td>
                            </tr>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

        var doGetData;
        var doGetTime;

        var frameHeight;
        var tableHeight;
        var offsetHeight = 20;

        $(document).ready(function () {
            initData();
            doGetData = setInterval(function () { timeUpdate(); }, 1000);

        });

        function timeUpdate() {

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

        function clearData() {
            //清除数据
            window.Device.data.datasets[0].data = [0,0,0,0];
            window.Device.update();
            $("#okNum").attr('data-to', 0);
            $("#okNum").countTo();
            $("#errNum").attr('data-to', 0);
            $("#errNum").countTo();
        }

        function changeState(id, value) {
            $(id).removeClass("status_green");
            $(id).removeClass("status_yellow");
            $(id).removeClass("status_red");
            $(id).removeClass("status_blue");
            $(id).removeClass("status_grey");
            if (value == '1') { $(id + "_title").text(" 运行"); $(id).addClass('status_green'); }
            if (value == '2') { $(id + "_title").text(" 就绪"); $(id).addClass('status_yellow'); }
            if (value == '3') { $(id + "_title").text(" 故障"); $(id).addClass('status_red'); }
            if (value == '0') { $(id + "_title").text(" 待机"); $(id).addClass('status_blue'); }
            if (value == '-1') { $(id + "_title").text(" 中断"); $(id).addClass('status_grey'); }
        }

        function loadData() {

            $.get("rpt.ashx", function (data) {
                var json = JSON.parse(data);

                //高压注浆
                for (var i = 0; i < 7; i++) {
                    changeState("#gy0" + (i + 1).toString(), "-1");
                }
                //烘干房
                for (var i = 0; i < 7; i++) {
                    changeState("#hg0" + (i + 1).toString(), "-1");
                }
                //施釉机器人
                for (var i = 0; i < json["glaze"].length; i++) {
                    changeState("#sy0" + (i + 1).toString(), json["glaze"][i]["施釉机器人"].toString());
                }
                //登卸窑机器人
                for (var i = 0; i < json["kiln"].length; i++) {
                    changeState("#dxy0" + (i + 1).toString(), json["kiln"][i]["登卸窑机器人"].toString());
                }
                //测漏机
                for (var i = 0; i < json["lake"].length; i++) {
                    changeState("#ss0" + (i + 1).toString(), json["lake"][i]["测漏机"].toString());
                }
                //包装机器人
                for (var i = 0; i < json["pack"].length; i++) {
                    changeState("#bz0" + (i + 1).toString(), json["pack"][i]["包装机器人"].toString());
                }

                var part1 = "\"1\"";
                var part2 = "\"2\"";
                var part3 = "\"3\"";
                var part4 = "\"0\"";
                var time1 = 0;
                var time2 = 0;
                var time3 = 0;
                var time4 = 0;
                for (var j = 0; j <= (data.length - part1.length); j++) {
                    if (data.substring(j, j + part1.length) == part1) {
                        time1++;
                    }
                    if (data.substring(j, j + part2.length) == part2) {
                        time2++;
                    }
                    if (data.substring(j, j + part3.length) == part3) {
                        time3++;
                    }
                    if (data.substring(j, j + part4.length) == part4) {
                        time4++;
                    }
                }
                window.Device.data.datasets[0].data = [time1,time2,time3,time4];
                window.Device.update();
                //正常故障数量
                $("#okNum").attr('data-to', time1 + time2 + time4);
                $("#okNum").countTo();
                $("#errNum").attr('data-to', time3);
                $("#errNum").countTo();
            });
            //产品达成数据===================================
            //window.Device.data.datasets[0].data = [
            //    randomScalingFactor(20) + 80,
            //    randomScalingFactor(20) + 20,
            //    randomScalingFactor(10) + 10
            //];
/*            window.Device.update();*/
            //===================================================
        }

        function initData() {
            window.chartColors = {
                red: 'rgb(255, 99, 132)',
                orange: 'rgb(255, 159, 64)',
                yellow: 'rgb(255, 250, 86)',
                green: 'rgb(93,226,124)',
                blue: 'rgb(54, 162, 250)',
                purple: 'rgb(153, 102, 255)',
                grey: 'rgb(231,233,237)'
            };

            var color = Chart.helpers.color;

            window.randomScalingFactor = function (num) {
                return Math.round(Math.random() * num);
            }

            Chart.defaults.global.defaultFontColor = 'white';
            Chart.defaults.global.defaultFontSize = 24;
            Chart.defaults.global.legend.display = false;

            //运行时间数据=======================================
            window.configDevice = {
                data: {
                    labels: ['运行', '就绪', '故障','待机'],
                    datasets: [{
                        label: '设备状态',
                        backgroundColor: [
                            color(window.chartColors.green).alpha(0.35).rgbString(),
                            color(window.chartColors.green).alpha(0.2).rgbString(),
                            color(window.chartColors.red).alpha(0.35).rgbString(),
                            color(window.chartColors.blue).alpha(0.35).rgbString()
                        ],
                        fill: false,
                        borderColor: [
                            window.chartColors.green,
                            window.chartColors.green,
                            window.chartColors.red,
                            window.chartColors.blue
                        ],
                        borderWidth: 2,
                        pointRadius: 30,
                        data: [0, 0, 0, 0]
                    }]
                },
                type: 'doughnut',
                options: {
                    legend: {
                        display: true
                    },
                    title: {
                        display: false,
                        text: "设备运行时间统计"
                    },
                    tooltips: {
                        mode: 'point',
                        intersect: false
                    },
                    responsive: true

                }
            };
            var ctxDevice = document.getElementById("canvasDevice").getContext("2d");
            window.Device = new Chart(ctxDevice, configDevice);
            //===================================================

        }


    </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>
</body>
</html>