DK-MES-2.0
/
HEGII.gt.mes.web


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keywords" content="dongke,mes,ibossmes">
    <meta name="description" content="制造企业生产过程执行管理系统">
    <meta name="author" content="xuwei">
    <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/chartjs/chartjs-plugin-datalabels.js"></script>
    <script src="/plugins/xcountto/xcountTo.min.js"></script>
    <style type="text/css">
        .panel-body {
            background-color: #444;
        }
    </style>
</head>
<body style="width:1200px;color:white;background-color:#666">
    <script type="text/javascript">
        $(document).ready(function () {

            $.get("dashboard.ashx?m=groutingDay", function (data) {
                var json = JSON.parse(data);

                //数字显示
                $("#dayCount1").attr('data-to', json.rows[0]["注浆数量"]);
                $("#dayCount1").countTo();
            });


            $.get("dashboard.ashx?m=procedureDay", function (data) {
                var json = JSON.parse(data);

                //产量柱图显示
                for (var i = 0; i < json.rows.length; i++) {

                    if (json.rows[i]["工序名称"] == "1#交坯") {
                        $("#dayCount2").attr('data-to', json.rows[i]["工序产量"]);
                        $("#dayCount2").countTo();
                    }
                    if (json.rows[i]["工序名称"] == "1#打磨") {
                        $("#dayCount3").attr('data-to', json.rows[i]["工序产量"]);
                        $("#dayCount3").countTo();
                    }
                    if (json.rows[i]["工序名称"] == "1#机械施釉（出）") {
                        $("#dayCount4").attr('data-to', json.rows[i]["工序产量"]);
                        $("#dayCount4").countTo();
                    }
                    if (json.rows[i]["工序名称"] == "1#成检交接") {
                        $("#dayCount5").attr('data-to', json.rows[i]["工序产量"]);
                        $("#dayCount5").countTo();
                    }
                    if (json.rows[i]["工序名称"] == "1#质量登记") {
                        $("#dayCount6").attr('data-to', json.rows[i]["工序产量"]);
                        $("#dayCount6").countTo();
                    }

                    window.barConfig.data.labels.push(json.rows[i]["工序名称"]);
                    window.barConfig.data.datasets[0].data.push(json.rows[i]["工序产量"]);
                }
                window.Bar.update();

            });

        });
    </script>

    <!--第一行-->
    <div style="float:left;">
        <div style="float: left; padding:5px;">
            <div id="count_bar" class="easyui-panel" title="今日【注浆】" data-options="collapsible:true,width:180,iconCls:'icon-grid'">
                <div style="padding:10px;text-align:center">
                    <div id="dayCount1" data-speed="2000" style="font-size:40px;"></div>
                </div>
            </div>
        </div>
        <div style="float: left; padding:5px;">
            <div id="count_bar" class="easyui-panel" title="今日【交坯】" data-options="collapsible:true,width:180,iconCls:'icon-grid'">
                <div style="padding:10px;text-align:center">
                    <div id="dayCount2" data-speed="2000" style="font-size:40px;"></div>
                </div>
            </div>
        </div>
        <div style="float: left; padding:5px;">
            <div id="count_bar" class="easyui-panel" title="今日【打磨】" data-options="collapsible:true,width:180,iconCls:'icon-grid'">
                <div style="padding:10px;text-align:center">
                    <div id="dayCount3" data-speed="2000" style="font-size:40px;"></div>
                </div>
            </div>
        </div>
        <div style="float: left; padding:5px;">
            <div id="count_bar" class="easyui-panel" title="今日【施釉】" data-options="collapsible:true,width:180,iconCls:'icon-grid'">
                <div style="padding:10px;text-align:center">
                    <div id="dayCount4" data-speed="2000" style="font-size:40px;"></div>
                </div>
            </div>
        </div>
        <div style="float: left; padding:5px;">
            <div id="count_bar" class="easyui-panel" title="今日【烧成】" data-options="collapsible:true,width:180,iconCls:'icon-grid'">
                <div style="padding:10px;text-align:center">
                    <div id="dayCount5" data-speed="2000" style="font-size:40px;"></div>
                </div>
            </div>
        </div>
        <div style="float: left; padding:5px;">
            <div id="count_bar" class="easyui-panel" title="今日【质量登记】" data-options="collapsible:true,width:180,iconCls:'icon-grid'">
                <div style="padding:10px;text-align:center">
                    <div id="dayCount6" data-speed="2000" style="font-size:40px;"></div>
                </div>
            </div>
        </div>

    </div>

    <!--第二行-->
    <div style="float:left;">
        <div style="float: left; padding:5px;">
            <div id="count_bar" class="easyui-panel" title="数据统计" data-options="collapsible:true,width:1130,iconCls:'icon-grid'">
                <div style="padding:10px;">
                    <canvas id="barcanvas" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!--第三行-->
    <div style="float:left;">
        <div style="float: left; padding:5px;">

        </div>
    </div>

    <!--第四行-->
    <div style="float:left;">
        <div style="float: left; padding:5px;">

        </div>
        <div style="float: left; padding:5px;">

        </div>
    </div>

    <script>
        //window.chartColors = {
        //    red: 'rgb(255, 99, 132)',
        //    orange: 'rgb(255, 159, 64)',
        //    yellow: 'rgb(255, 205, 86)',
        //    green: 'rgb(75, 192, 192)',
        //    blue: 'rgb(54, 162, 235)',
        //    purple: 'rgb(153, 102, 255)',
        //    grey: 'rgb(231,233,237)'
        //};
        var color = Chart.helpers.color;
        window.chartColors = {
            red: color('rgb(255, 99, 132)').alpha(1).rgbString(),
            orange: color('rgb(255, 159, 64)').alpha(1).rgbString(),
            yellow: color('rgb(255, 205, 86)').alpha(1).rgbString(),
            green: color('rgb(75, 192, 192)').alpha(1).rgbString(),
            blue: color('rgb(54, 162, 235)').alpha(1).rgbString(),
            purple: color('rgb(153, 102, 255)').alpha(1).rgbString(),
            grey: color('rgb(231,233,237)').alpha(1).rgbString()
        };
        window.randomScalingFactor = function () {
            return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 100);
        }

        window.randomScalingFactor100 = function () {
            return Math.round(Math.random() * 100);
        }

        window.onload = function () {
            Chart.defaults.global.defaultFontColor = 'white';
            //柱图
            window.barConfig = {
                labels: ['Red', 'Blue', 'Purple', 'Yellow'],
                data: {
                    labels: [],
                    datasets: [{
                        label: '工序产量',
                        backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
                        borderColor: window.chartColors.blue,
                        borderWidth: 1,
                        data: []
                    }]
                },
                type: 'bar',
                options: {
                    legend: {
                        labels: {
                            // This more specific font property overrides the global property
                            fontColor: 'white'
                        }
                    },
                    title: {
                        display: false,
                        text: "Chart.js Bar Chart - Stacked"
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: false,
                        }],
                        yAxes: [{
                            stacked: false
                        }]
                    }
                }
            };
            var ctxBar = document.getElementById("barcanvas").getContext("2d");
            window.Bar = new Chart(ctxBar, barConfig);

        };
    </script>
</body>
</html>