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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
							<!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" onclick="showHelp()" style="cursor:pointer">
            <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:400px;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>烘干房（3号）</td>
                                <td><span id="hg03" class="status_red">█</span> <span id="hg03_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>烘干房（4号）</td>
                                <td><span id="hg04" class="status_red">█</span> <span id="hg04_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td></td>
                                <td><span id="hg05" class="status_red"></span> <span id="hg05_title"></span> </td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td></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; ">
                        <!--登卸窑机器人-->
                        <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>测漏机（5号）</td>
                                <td><span id="ss05" class="status_red">█</span><span id="ss05_title"></span></td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>测漏机（6号）</td>
                                <td><span id="ss06" class="status_red">█</span><span id="ss06_title"></span></td>
                            </tr>
                            <tr class="tr_bg_light">
                                <td>测漏机（7号）</td>
                                <td><span id="ss07" class="status_red">█</span><span id="ss07_title"></span></td>
                            </tr>
                            <tr class="tr_bg_dark">
                                <td>测漏机（8号）</td>
                                <td><span id="ss08" class="status_red">█</span><span id="ss08_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 = 3000;
        var currentTime1 = 0;

        var doGetData;
        var doGetTime;

        var frameHeight;
        var tableHeight;
        var offsetHeight = 20;

        var time1 = new Array(0, 0, 0, 0, 0, 0);
        var time2 = new Array(0, 0, 0, 0, 0, 0);
        var time3 = new Array(0, 0, 0, 0, 0, 0);
        var time0 = new Array(0, 0, 0, 0, 0, 0);


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

        });

        //帮助说明
        function showHelp() {
            var message = "统计说明：" + "\n";
            message += "这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明" + "\n";
            message += "这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明" + "\n";
            message += "这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明这是文字说明" + "\n";
            alert(message);
        }

        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();
        }

        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_blue'); }
            if (value == '3') { $(id + "_title").text(" 故障"); $(id).addClass('status_red'); }
            if (value == '0') { $(id + "_title").text(" 待机"); $(id).addClass('status_grey'); }
            if (value == '-1') { $(id + "_title").text(" 中断"); $(id).addClass('status_yellow'); }
        }

        function loadData() {

            //高压注浆
            $.get("demo.ashx?m=grouting", function (data) {
                var json = JSON.parse(data);
                for (var i = 0; i < json.length; i++) {
                    changeState("#gy0" + (i + 1).toString(), json[i]["data"].toString());
                }
                updatePie(0, json);
            });

            //烘干房
            $.get("demo.ashx?m=dry", function (data) {
                var json = JSON.parse(data);
                for (var i = 0; i < json.length; i++) {
                    changeState("#hg0" + (i + 1).toString(), json[i]["data"].toString());
                }
                updatePie(1, json);
            });

            //施釉机器人
            $.get("demo.ashx?m=glaze", function (data) {
                var json = JSON.parse(data);
                for (var i = 0; i < json.length; i++) {
                    changeState("#sy0" + (i + 1).toString(), json[i]["data"].toString());
                }
                updatePie(2, json);
            });

            //登卸窑机器人
            $.get("demo.ashx?m=kiln", function (data) {
                var json = JSON.parse(data);
                for (var i = 0; i < json.length; i++) {
                    changeState("#dxy0" + (i + 1).toString(), json[i]["data"].toString());
                }
                updatePie(3, json);
            });

            //测漏机
            $.get("demo.ashx?m=lake", function (data) {
                var json = JSON.parse(data);
                for (var i = 0; i < json.length; i++) {
                    changeState("#ss0" + (i + 1).toString(), json[i]["data"].toString());
                }
                updatePie(4, json);
            });

            //包装机器人
            $.get("demo.ashx?m=pack", function (data) {
                var json = JSON.parse(data);
                for (var i = 0; i < json.length; i++) {
                    changeState("#bz0" + (i + 1).toString(), json[i]["data"].toString());
                }
                updatePie(5, json);
            });

            //
            //window.Device.data.datasets[0].data = [time1, time2, time3, time4];
            //window.Device.update();


        }

        //更新饼图
        function updatePie(j, json) {
            time1[j] = 0;
            time2[j] = 0;
            time3[j] = 0;
            time0[j] = 0;
            for (var i = 0; i < json.length; i++) {
                if (json[i]["data"] == 1) time1[j]++;
                if (json[i]["data"] == 2) time2[j]++;
                if (json[i]["data"] == 3) time3[j]++;
                if (json[i]["data"] == 0) time0[j]++;
            }
            var num1 = 0; num2 = 0; num3 = 0; num0 = 0;
            for (var i = 0; i < time1.length; i++) num1 += time1[i];
            for (var i = 0; i < time2.length; i++) num2 += time2[i];
            for (var i = 0; i < time3.length; i++) num3 += time3[i];
            for (var i = 0; i < time0.length; i++) num0 += time0[i];
            window.Device.data.datasets[0].data = [num1, num2, num0, num3];
            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.blue).alpha(0.2).rgbString(),
                            color(window.chartColors.grey).alpha(0.35).rgbString(),
                            color(window.chartColors.red).alpha(0.35).rgbString()
                        ],
                        fill: false,
                        borderColor: [
                            window.chartColors.green,
                            window.chartColors.blue,
                            window.chartColors.grey,
                            window.chartColors.red
                        ],
                        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>