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


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keywords" content="dongke,mes,ibossmes">
    <meta name="description" content="制造企业生产过程执行管理系统">
    <meta name="author" content="xuwei">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>东科软件</title>
    <script src="/plugins/xeasyui/xeasyui.min.js"></script>
    <script src="/plugins/chartjs/chart.min.js"></script>
    <script src="/plugins/chartjs/utils.js"></script>
    <script src="/plugins/xcountto/xcountTo.min.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>
    <link rel="shortcut icon" href="/img/logo.png" />
    <link rel="bookmark" href="/img/logo.png" />
    <link href="/Plugins/animate/animate.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/animate/xanimate.js"></script>
    <script src="/Plugins/xrequest/xrequest.min.js"></script>
    <style type="text/css">
        .panel-title {
            -webkit-text-size-adjust: none;
            white-space: nowrap;
            font-size: 12px;
            -webkit-transform-origin-x: 0;
            -webkit-transform: scale(0.80);
        }

        .panel-body {
            background-color: #444;
        }

        @keyframes blink {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @-webkit-keyframes blink {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @-moz-keyframes blink {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @-ms-keyframes blink {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @-o-keyframes blink {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        .blink {
            background-color: red;
            animation: blink 1s linear infinite;
            -webkit-animation: blink 1s linear infinite;
            -moz-animation: blink 1s linear infinite;
            -ms-animation: blink 1s linear infinite;
            -o-animation: blink 1s linear infinite;
        }

        .blinkwait {
            background-color: #444;
            animation: blink 1s linear infinite;
            -webkit-animation: blink 1s linear infinite;
            -moz-animation: blink 1s linear infinite;
            -ms-animation: blink 1s linear infinite;
            -o-animation: blink 1s linear infinite;
        }
    </style>
</head>
<body style="width:100%;color:white;background-color:#666">
    <script type="text/javascript">

        var refreshTime = 60;
        var currentTime = 0;
        var doLoadData;
        var mainInterval;
        var mainRowCount = 0;

        $(document).ready(function () {
            //doLoadData = setInterval(function () { loadTime(); }, 1000);
            initData();
            loadMainTable();
            setInterval(function () { DdfectData(); }, 180000);
            loadData();
            setInterval(function () { DdfectData(); }, 60000);
            ZxData();
            setInterval(function () { ZxData(); }, 60000);
            GdData();
            setInterval(function () { GdData(); }, 120000);
            ZxDataH();
            setInterval(function () { ZxDataH(); }, 60000);
            ZxDataHX();
            setInterval(function () { ZxDataHX(); }, 60000);
        });

        //每小时产量折线图下
        function ZxDataHX() {
            $.get("warehouse.ashx?m=hx", function (data) {
                var json = JSON.parse(data);
                let a = [];
                let b = [];
                if (json["success"] == true) {
                    var num = parseInt(json["rows"].length);
                    for (var i = 0; i < num; i++) {
                        a.push(parseInt(json["rows"][i]["包装数量"]));
                        b.push(json["rows"][i]["日期"]);
                    }
                    window.DayCLHX.data.datasets[0].data = a;
                    window.DayCLHX.data.labels = b;
                    window.DayCLHX.update();
                }
            });
        }

        //每小时产量折线图上
        function ZxDataH() {
            $.get("warehouse.ashx?m=h", function (data) {
                var json = JSON.parse(data);
                let a = [];
                let b = [];
                if (json["success"] == true) { 
                    var num = parseInt(json["rows"].length);
                    for (var i = 0; i < num; i++) {
                        a.push(parseInt(json["rows"][i]["包装数量"]));
                        b.push(json["rows"][i]["日期"]);
                    }
                    window.DayCLH.data.datasets[0].data = a;
                    window.DayCLH.data.labels = b;
                    window.DayCLH.update();
                }
            });
        }

        function GdData() {
            $.get("warehouse.ashx?m=gd", function (data) {
                var json = JSON.parse(data);
                if (json["success"] == true) {
                    var BJ1 = parseFloat(json["rows"][0]["完成率"]);
                    var BJ2 = parseFloat(json["rows"][1]["完成率"]);
                    var BJ3 = parseFloat(json["rows"][2]["完成率"]);
                    var BJ4 = parseFloat(json["rows"][3]["完成率"]);
                    var BJ5 = parseFloat(json["rows"][4]["完成率"]);
                    var BJ6 = parseFloat(json["rows"][5]["完成率"]);
                    var BJ7 = parseFloat(json["rows"][6]["完成率"]);
                    var day1 = json["rows"][0]["时间"];
                    var day2 = json["rows"][1]["时间"];
                    var day3 = json["rows"][2]["时间"];
                    var day4 = json["rows"][3]["时间"];
                    var day5 = json["rows"][4]["时间"];
                    var day6 = json["rows"][5]["时间"];
                    var day7 = json["rows"][6]["时间"];
                    var count1 = parseFloat(json["rows"][0]["实际生产量"]);
                    var count2 = parseFloat(json["rows"][1]["实际生产量"]);
                    var count3 = parseFloat(json["rows"][2]["实际生产量"]);
                    var count4 = parseFloat(json["rows"][3]["实际生产量"]);
                    var count5 = parseFloat(json["rows"][4]["实际生产量"]);
                    var count6 = parseFloat(json["rows"][5]["实际生产量"]);
                    var count7 = parseFloat(json["rows"][6]["实际生产量"]);
                    window.MonthCL.data.datasets[0].data = [BJ1, BJ2, BJ3, BJ4, BJ5, BJ6, BJ7];
                    window.MonthCL.data.datasets[1].data = [count1, count2, count3, count4, count5, count6, count7];
                    window.MonthCL.data.labels = [day1, day2, day3, day4, day5, day6, day7];
                    window.MonthCL.update();
                }
            });
        }

        function loadMainTable() {
            if (mainInterval) {
                clearInterval(mainInterval);
                //console.log("Interval Stop!");
            }
            $.get("warehouse.ashx?m=MonthTable", function (data) {
                var json = JSON.parse(data);
                if (json["success"] == true) {
                    $("#dayTabletwo").html("");
                    for (var i = 0; i < json["rows"].length; i++) {
                        var temp = $("#dayTable_templatetwo").html();
                        temp = temp.replace("<tbody>", "").replace("</tbody>", "");
                        temp = temp.replace('{物料描述}', json["rows"][i]['物料描述']);
                        temp = temp.replace('{产量}', json["rows"][i]['产量']);
                        $("#dayTabletwo").append(temp);
                    }
                    mainRowCount = json["rows"].length;
                    mainInterval = setInterval(mainScroll, 3000);
                }
            });
        }

        function mainScroll() {
            var scrollHeight = $("#dayTabletwo").find("tr").outerHeight();
            $("#dayTabletwo").animate({ marginTop: -scrollHeight, }, 500,
                function () {
                    $(this).css({ marginTop: "0px", }).find("tr:first").appendTo(this);
                    if (--mainRowCount == -1) loadMainTable();
                }
            );
        }


        function DdfectData() {
            $.get("warehouse.ashx?m=defect", function (data) {
                var json = JSON.parse(data);
                if (json["success"] == true) {
                    var defect1 = parseFloat(json["rows"][0]["数量"]);
                    var defect2 = parseFloat(json["rows"][1]["数量"]);
                    var defect3 = parseFloat(json["rows"][2]["数量"]);
                    var defectname1 = json["rows"][0]["缺陷名称"];
                    var defectname2 = json["rows"][1]["缺陷名称"];
                    var defectname3 = json["rows"][2]["缺陷名称"];
                    window.DefectA.data.datasets[0].data = [defect1, defect2, defect3];
                    window.DefectA.data.labels = [defectname1, defectname2, defectname3]
                    window.DefectA.update();
                }
            });
        }


        function ZxData() {
            $.get("warehouse.ashx?m=zx", function (data) {
                var json = JSON.parse(data);
                if (json["success"] == true) {
                    var BJ1 = parseFloat(json["rows"][0]["合格率"]);
                    var BJ2 = parseFloat(json["rows"][1]["合格率"]);
                    var BJ3 = parseFloat(json["rows"][2]["合格率"]);
                    var BJ4 = parseFloat(json["rows"][3]["合格率"]);
                    var BJ5 = parseFloat(json["rows"][4]["合格率"]);
                    var BJ6 = parseFloat(json["rows"][5]["合格率"]);
                    var BJ7 = parseFloat(json["rows"][6]["合格率"]);
                    var day1 = json["rows"][0]["日期"];
                    var day2 = json["rows"][1]["日期"];
                    var day3 = json["rows"][2]["日期"];
                    var day4 = json["rows"][3]["日期"];
                    var day5 = json["rows"][4]["日期"];
                    var day6 = json["rows"][5]["日期"];
                    var day7 = json["rows"][6]["日期"];
                    var count1 = parseFloat(json["rows"][0]["本烧合格数"]);
                    var count2 = parseFloat(json["rows"][1]["本烧合格数"]);
                    var count3 = parseFloat(json["rows"][2]["本烧合格数"]);
                    var count4 = parseFloat(json["rows"][3]["本烧合格数"]);
                    var count5 = parseFloat(json["rows"][4]["本烧合格数"]);
                    var count6 = parseFloat(json["rows"][5]["本烧合格数"]);
                    var count7 = parseFloat(json["rows"][6]["本烧合格数"]);
                    window.DayZL.data.datasets[0].data = [BJ1, BJ2, BJ3, BJ4, BJ5, BJ6, BJ7];
                    window.DayZL.data.datasets[1].data = [count1, count2, count3, count4, count5, count6, count7];
                    window.DayZL.data.labels = [day1, day2, day3, day4, day5, day6, day7];
                    window.DayZL.update();
                }
            });
        }

        function loadTime() {
            if (currentTime > 0) {
                $('#timer').html(" <font color='gray'>刷新倒计时：" + currentTime + " 秒</font>");
                currentTime--;
            }
            else {
                loadData();
                currentTime = refreshTime;
            }
        }

        function loadData() {
            $.get('warehouse.ashx?m=outing', function (data) {
                var outingData = JSON.parse(data);
                //var isFull = $('#allFull').checkbox('options').checked ? 1 : 0;
                $.get('warehouse.ashx?m=all&allFull=0', function (data) {
                    var json = JSON.parse(data);
                    var znColumn = 0;
                    var znCount = 0;
                    var ltColumn = 0;
                    var ltCount = 0;
                    if (json["success"] == true) {
                        for (var i = 0; i < json["rows"].length; i++) {
                            var id = json["rows"][i]["LayerID"] + "_" + json["rows"][i]["ColumnID"];
                            //设置数量
                            $("#p" + id).attr('data-to', json["rows"][i]["GoodsCount"]);
                            $("#p" + id).countTo();
                            $("#t" + id).panel('setTitle', json["rows"][i]["GoodsType"].split("#")[0]);
                            $("#t" + id).parent().attr('title', json["rows"][i]["GoodsType"]);
                            //正在出库的设置样式
                            if (outingData["rows"].length > 0) {
                                for (var j = 0; j < outingData["rows"].length; j++) {
                                    if (outingData["rows"][j]["STATUS"] == 1 && json["rows"][i]["GoodsType"] == outingData["rows"][j]["GOODSCODE"] + "#" + outingData["rows"][j]["MATNR"]) {
                                        $("#t" + id).removeClass("blinkwait");
                                        $("#t" + id).addClass("blink");
                                    }
                                    else if (outingData["rows"][j]["STATUS"] == 0 && json["rows"][i]["GoodsType"] == outingData["rows"][j]["GOODSCODE"] + "#" + outingData["rows"][j]["MATNR"]) {
                                        $("#t" + id).removeClass("blink");
                                        $("#t" + id).addClass("blinkwait");
                                    }
                                }
                            }
                            //设置智能和连体显示
                            if (json["rows"][i]["GoodsSeries"] == "1") {
                                $("#p" + id).css("color", "yellow");
                                znCount += json["rows"][i]["GoodsCount"];
                                znColumn++;
                            }
                            if (json["rows"][i]["GoodsSeries"] == "2") {
                                $("#p" + id).css("color", "white");
                                ltCount += json["rows"][i]["GoodsCount"];
                                ltColumn++;
                            }
                        }
                        $("#all").html("占用 " + (znColumn + ltColumn) + " 巷道 " + (znCount + ltCount) + " 件");
                        $("#zn").html("占用 " + znColumn + " 巷道 " + znCount + " 件");
                        $("#lt").html("占用 " + ltColumn + " 巷道 " + ltCount + " 件");
                    }
                    else {
                        //clearInterval(doLoadData);
                        $.messager.alert('数据错误', json["message"], 'error');
                    }

                });
            });
        }

        function initData() {
            window.chartColors = {
                red: 'rgb(255, 99, 132)',
                orange: 'rgb(255, 159, 64)',
                yellow: 'rgb(255, 250, 86)',
                green: 'rgb(75, 192, 192)',
                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 = 18;
            Chart.defaults.global.legend.display = false;

            //成检合格率各项趋势图=====================================
            window.configDayZL = {
                data: {
                    labels: ["01", "02", "03", "04", "05", "06", "07"],
                    datasets: [{
                        type: 'line',
                        label: "合格率",
                        yAxesGroup: 'A',
                        yAxisID: 'A',
                        backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                        borderColor: window.chartColors.red,
                        borderWidth: 2,
                        pointRadius: 15,
                        data: [0, 0, 0, 0, 0, 0, 0],
                        fill: false
                    }, {
                        label: '产量',
                        yAxesGroup: 'B',
                        yAxisID: 'B',
                        backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                        borderColor: window.chartColors.blue,
                        borderWidth: 1,
                        data: [100, 100, 100, 100, 100, 100, 100],
                        fill: false
                    }]
                },
                type: 'bar',
                options: {
                    legend: {
                        display: true
                    },
                    title: {
                        display: false,
                        text: '质量统计'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: false,
                                labelString: ''
                            }
                        }],
                        yAxes: [{
                            display: true,
                            id: 'B',
                            name: 'B',
                            scalePositionLeft: true,
                            position: 'left',
                            scaleLabel: {
                                display: false,
                                labelString: 'Value'
                            },
                            ticks: {
                                min: 0,
                                stepSize: 1000,
                                max: 5000
                            }
                        }
                            , {
                            display: true,
                            id: 'A',
                            name: 'A',
                            scalePositionLeft: false,
                            position: 'right',
                            scaleLabel: {
                                display: false,
                                labelString: 'Value2'
                            },
                            ticks: {
                                min: 50,
                                stepSize: 10,
                                max: 100
                            }
                        }]
                    }
                }

            };
            var ctxDayZL = document.getElementById("canvasDayZL").getContext("2d");
            window.DayZL = new Chart(ctxDayZL, configDayZL);
            //===================================================

            //成检缺陷TOP5===========================================
            window.configDefectA = {
                data: {
                    labels: ['1', '2', '3'],
                    datasets: [{
                        label: '工序',
                        backgroundColor: [
                            color(window.chartColors.red).alpha(0.35).rgbString(),
                            color(window.chartColors.blue).alpha(0.35).rgbString(),
                            color(window.chartColors.green).alpha(0.35).rgbString(),
                            color(window.chartColors.orange).alpha(0.35).rgbString(),
                            color(window.chartColors.purple).alpha(0.35).rgbString()
                        ],
                        fill: false,
                        borderColor: [
                            window.chartColors.red,
                            window.chartColors.blue,
                            window.chartColors.green,
                            window.chartColors.orange,
                            window.chartColors.purple
                        ],
                        borderWidth: 2,
                        pointRadius: 30,
                        data: [0, 0, 0]
                    }]
                },
                type: 'pie',
                options: {
                    legend: {
                        display: true
                    },
                    title: {
                        display: false,
                        text: "甲班缺陷"
                    },
                    tooltips: {
                        mode: 'point',
                        intersect: false
                    },
                    responsive: true

                }
            };
            var ctxDefectA = document.getElementById("canvasDefectA").getContext("2d");
            window.DefectA = new Chart(ctxDefectA, configDefectA);
            //===================================================


            //包装工单===========================================
            window.canvasMonthCL = {
                data: {
                    labels: ["01", "02", "03", "04", "05", "06", "07"],
                    datasets: [{
                        type: 'line',
                        label: "合格率",
                        yAxesGroup: 'A',
                        yAxisID: 'A',
                        backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                        borderColor: window.chartColors.red,
                        borderWidth: 2,
                        pointRadius: 15,
                        data: [0, 0, 0, 0, 0, 0, 0],
                        fill: false
                    }, {
                        label: '产量',
                        yAxesGroup: 'B',
                        yAxisID: 'B',
                        backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                        borderColor: window.chartColors.blue,
                        borderWidth: 1,
                        data: [100, 100, 100, 100, 100, 100, 100],
                        fill: false
                    }]
                },
                type: 'bar',
                options: {
                    legend: {
                        display: true
                    },
                    title: {
                        display: false,
                        text: '质量统计'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: false,
                                labelString: ''
                            }
                        }],
                        yAxes: [{
                            display: true,
                            id: 'B',
                            name: 'B',
                            scalePositionLeft: true,
                            position: 'left',
                            scaleLabel: {
                                display: false,
                                labelString: 'Value'
                            },
                            ticks: {
                                min: 0,
                                stepSize: 1000,
                                max: 5000
                            }
                        }
                            , {
                            display: true,
                            id: 'A',
                            name: 'A',
                            scalePositionLeft: false,
                            position: 'right',
                            scaleLabel: {
                                display: false,
                                labelString: 'Value2'
                            },
                            ticks: {
                                min: 50,
                                stepSize: 10,
                                max: 100
                            }
                        }]
                    }
                }

            };
            var ctxMonthCL = document.getElementById("canvasMonthCL").getContext("2d");
            window.MonthCL = new Chart(ctxMonthCL, canvasMonthCL);
            //===================================================

            //每小时产量白天=========================================
            window.canvasHourCLS = {
                data: {
                    labels: [0, 0, 0, 0, 0, 0],
                    datasets: [{
                        label: "产量",
                        fill: false,
                        backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
                        borderColor: window.chartColors.blue,
                        borderWidth: 2,
                        pointRadius: 12,
                        data: [0, 0, 0, 0, 0, 0]
                    }
                    ]
                },
                type: 'line',
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: '每小时产量'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: false,
                                labelString: ''
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: false,
                                labelString: 'Value'
                            },
                            ticks: {
                                min: 0,
                                //stepSize: 50,
                                //max: 300
                            }
                        }]
                    }
                }
            };
            var ctxHourCL = document.getElementById("canvasHourCLS").getContext("2d");
            window.DayCLH = new Chart(ctxHourCL, canvasHourCLS);
            //===================================================

            //每小时产量晚上=========================================
            window.canvasHourCLX = {
                data: {
                    labels: [0, 0, 0, 0, 0, 0],
                    datasets: [{
                        label: "产量",
                        fill: false,
                        backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
                        borderColor: window.chartColors.blue,
                        borderWidth: 2,
                        pointRadius: 12,
                        data: [0, 0, 0, 0, 0, 0]
                    }
                    ]
                },
                type: 'line',
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: '每小时产量'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: false,
                                labelString: ''
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: false,
                                labelString: 'Value'
                            },
                            ticks: {
                                min: 0,
                                //stepSize: 50,
                                //max: 300
                            }
                        }]
                    }
                }
            };
            var ctxHourCLX = document.getElementById("canvasHourCLX").getContext("2d");
            window.DayCLHX = new Chart(ctxHourCLX, canvasHourCLX);
            //===================================================
        }
    </script>
    <div class="box_1920_1080">
        <div class="box_title" style="display:flex;flex-direction:row;">
            <div style="width:30%;text-align:left;"></div>
            <div style="width: 40%; text-align: center; font-size: 38px; font-weight: 700">成检包装看板</div>
            <div style="width:30%;text-align:right;"><span class="box_title_loading" style="font-size:32px;" id="报表加载"></span></div>
        </div>
        <!--<div class="box_body" style="display: flex; flex-direction: column;">-->
        <div style="width:65%;height:560px;padding-left:30px;padding-top:10px;margin-top:30px;">
            <div style="float:left;">
                <div style="float: left; padding: 5px; ">
                    <div id="t5_1" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;  ">
                            <div id="p5_1" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_2" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_2" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_3" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_3" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_4" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_4" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_5" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_5" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_6" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_6" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_7" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_7" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_8" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_8" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_9" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_9" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_10" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_10" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_11" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_11" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_12" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_12" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_13" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_13" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_14" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_14" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_15" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_15" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t5_16" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p5_16" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float:left;">
                <div style="float: left; padding:5px;">
                    <div id="t4_1" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_1" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_2" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_2" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_3" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_3" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_4" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_4" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_5" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_5" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_6" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_6" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_7" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_7" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_8" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_8" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_9" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_9" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_10" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_10" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_11" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_11" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_12" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_12" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_13" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_13" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_14" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_14" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_15" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p4_15" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t4_16" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p4_16" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float:left;">
                <div style="float: left; padding:5px;">
                    <div id="t3_1" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_1" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_2" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_2" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_3" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_3" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_4" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_4" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_5" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_5" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_6" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_6" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_7" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_7" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_8" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_8" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_9" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_9" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_10" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_10" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_11" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_11" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_12" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_12" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_13" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p3_13" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_14" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p3_14" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_15" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p3_15" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t3_16" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p3_16" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float:left;">
                <div style="float: left; padding:5px;">
                    <div id="t2_1" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_1" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_2" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_2" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_3" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_3" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_4" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_4" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_5" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_5" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_6" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_6" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_7" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_7" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_8" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_8" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_9" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_9" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_10" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_10" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_11" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_11" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_12" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_12" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_13" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_13" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_14" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_14" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_15" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_15" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t2_16" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p2_16" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float:left;">
                <div style="float: left; padding:5px;">
                    <div id="t1_1" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p1_1" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_2" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p1_2" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_3" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p1_3" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_4" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p1_4" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_5" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p1_5" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_6" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p1_6" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_7" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p1_7" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_8" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p1_8" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_9" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p1_9" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_10" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p1_10" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_11" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p1_11" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_12" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center;">
                            <div id="p1_12" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_13" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p1_13" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_14" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p1_14" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_15" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p1_15" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
                <div style="float: left; padding:5px;">
                    <div id="t1_16" class="easyui-panel" title=" " data-options="collapsible:false,width:64" style="background-color: #244270;">
                        <div style="padding: 10px; text-align: center; ">
                            <div id="p1_16" data-speed="2000" style="font-size:32px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float:left;padding:0;margin:0;font-size:6px;">
                <div style="float:left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">1</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">2</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">3</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">4</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">5</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">6</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">7</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">8</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">9</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">10</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">11</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">12</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">13</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">14</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">15</div>
                </div>
                <div style="float: left; padding:0 5px 0 5px;">
                    <div style="width:64px;text-align:center;color:darkgray">16</div>
                </div>
            </div>

        </div>


        <div style="float: right; margin-top: -30%; margin-right: 40px; height: 45%;width:35%">
            <div style="padding:5px;">
                <div class="d-flex justify-content-center">
                    <canvas id="canvasHourCLS" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:310px;width:100%"></canvas>
                </div>
            </div>
            <div style="padding:5px;margin-right:20px;">
                <div class="d-flex justify-content-center">
                    <canvas id="canvasHourCLX" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:310px;width:100%"></canvas>
                </div>
            </div>
        </div>


        <div style="float:left;padding-bottom:10px;padding-left:30px;">
            <div style="float: left; padding:5px;width:100%">
                <div style="font-size:14px;">
                    <span>数据汇总：</span><span id="all">0</span>，智能：<span id="zn" style="color:yellow">0</span>，连体：<span id="lt">0</span> <span id="timer"></span> <span> 【<a href="###" onclick="loadData()">点击刷新</a>】</span>
                </div>
            </div>
        </div>

        <div style="width:1840px;height:200px;display:flex;flex-direction:row;margin-top:130px;">
            <div style="width: 30%; height: 200px;">
                <div style="color:white;font-size:20px;font-weight:600; text-align:center">成检质量七日趋势图</div>
                <canvas id="canvasDayZL" style="-moz-user-select: none; padding-left: 30px; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
            </div>
            <div style="width: 18%; height: 200px;">
                <div style="color:white;font-size:20px;font-weight:600; text-align:center">品管巡检质量分析</div>
                <canvas id="canvasDefectA" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
            </div>
            <div style="width: 30%; height: 200px;">
                <div style="color:white;font-size:20px;font-weight:600; text-align:center">包装工单进度</div>
                <canvas id="canvasMonthCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
            </div>
            <div style="width: 450px; height: 200px; position: absolute; right: 40px; ">
                <table cellspacing="0" cellpadding="0" border="0" style="width:99.8%;">
                    <!--<tr class="tr_title_warning">
                    <td colspan="10" style="color: white;">修复产品外观检验统计</td>
                </tr>-->
                    <tr class="tr_title_warning" style="height: 50px;">
                        <td style="width: 80%; font-size: 10px; padding: 0px 0px 0px 0px;">包装出库产品名称</td>
                        <td style="width: 20%; font-size: 10px; padding: 0px 0px 0px 0px;">包装产量</td>
                    </tr>
                </table>
                <div style=" height: 210px; overflow: hidden; width: 100%;">
                    <div>
                        <table id="dayTable_templatetwo" style="display:none;">
                            <tr class="tr_title_warning" style="height: 50px;">
                                <td style="width: 80%; font-size: 10px; padding: 0px 0px 0px 0px; ">{物料描述}</td>
                                <td style="width: 20%; font-size: 10px; padding: 0px 0px 0px 0px;">{产量}</td>
                            </tr>
                        </table>
                    </div>
                    <table id="dayTabletwo" style="width: 100%; ">
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>