DK-MES-2.0
/
IMEX.mes.web


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
							<!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/xcountto/xcountTo.min.js"></script>
    <style type="text/css">
        .panel-body
        {
            background-color:#444;
        }
        input {
            color: #fff;
            background-color: #666;
        }

        .textbox {
            border: 0;
            background-color: #666;
        }
    </style>
</head>
<body style="width:1200px;color:white;background-color:#666">

    <div style="float:left;">
        <div style="float: left; padding:5px;">
            <div id="count_bar" class="easyui-panel" title="温湿度" data-options="collapsible:true,width:1000,iconCls:'icon-grid'">
                <div style="padding-left:20px;padding-top:20px;">
                    <form id="ff">
                        <input class="easyui-datetimebox" id="DATEBEGIN" name="DATEBEGIN" data-options="required:true,prompt:'开始',tipPosition:'top'" style="width: 180px; height: 32px;">
                         至
                        <input class="easyui-datetimebox" id="DATEEND" name="DATEEND" data-options="required:true,prompt:'截止',tipPosition:'top'" style="width:180px; height:32px;">
                         温湿计
                        <input class="easyui-combobox w-input" id="THERMOMETERID" name="THERMOMETERID" data-options="required:true,prompt:'温湿计',tipPosition:'top',url:'getThermometer.ashx',method:'get',valueField:'THERMOMETERID',textField:'THERMOMETERCODE',panelHeight:'200px',editable:'true'" style="width:100px;height:32px;">
                         温湿度
                        <select class="easyui-combobox" id="TYPE" name="TYPE" style="width:100px;height:32px;">
                            <option value="温度">温度</option>
                            <option value="湿度">湿度</option>
                        </select>
                        <a href="javascript:void(0)" id="btnSearchSubmit" title="搜索" class="easyui-linkbutton" plain="false" onclick="tbSearchSubmit()" style="width:100px;">搜索</a>
                    </form>
                </div>
                <div style="padding:10px;">
                    <canvas id="linecanvas" 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 style="float: left; padding:5px;">

        </div>
    </div>

    <script>

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

        var colors = [
            window.chartColors.red,
            window.chartColors.orange,
            window.chartColors.yellow,
            window.chartColors.green,
            window.chartColors.blue,
            window.chartColors.purple
        ]

        window.randomScalingFactor = function () {
            return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 80);
        }

        window.randomScalingFactor255 = function () {
            return Math.round(Math.random() * 255);
        }


        $(document).ready(function () {
            var ctime = new Date();
            var beginDate = ctime.getFullYear() + "-" + (ctime.getMonth() + 1) + "-" + ctime.getDate() + " 00:00:00";
            var endDate = ctime.getFullYear() + "-" + (ctime.getMonth() + 1) + "-" + ctime.getDate() + " 23:59:59";
            $("#DATEBEGIN").datetimebox("setValue", beginDate);
            $("#DATEEND").datetimebox("setValue", endDate);

            //测试数据
            //$("#DATEBEGIN").datetimebox("setValue", "2019-12-24 00:00:00");
            //$("#DATEEND").datetimebox("setValue", "2019-12-30 23:59:59");


            //定义线图
            window.lineConfig = {
                data: {
                    labels: [],
                    datasets: []
                },
                type: 'line',
                options: {
                    responsive: 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,
                            scaleLabel: {
                                display: false,
                                labelString: 'Value'
                            }
                        }]
                    }
                }
            };
            Chart.defaults.global.defaultFontColor = 'white';
            var ctxLine = document.getElementById("linecanvas").getContext("2d");
            window.line = new Chart(ctxLine, lineConfig);

        });

        function tbSearchSubmit() {
            if ($('#ff').form("validate")) {
                //读取温湿度数据
                $.get('getCelsiusrecord.ashx?r=' + Math.random(), $('#ff').serializeJson(), function (data) {
                    var json = JSON.parse(data);
                    if (json["success"] == true) {
                        loadLine(json["rows"],$('#TYPE').val());
                    }
                    else {
                        alert('数据读取失败！');
                    }
                });
            }
        }

        function loadLine(rows,field) {

            //拼合时间标签 只取第一天的时间
            var labels = [];
            labels = JSON.parse('[' + rows[0]["时间"] + ']');
            labels.sort();

            //for (var i = 0; i < 48; i++) labels.push((i / 2).toString().replace('.5',':30'));

            var datasets = [];
            colors = [];
            for (var i = 0; i < rows.length; i++) {

                colors.push(color('rgb(' + randomScalingFactor255() + ',' + randomScalingFactor255() + ', ' + randomScalingFactor255()+')').alpha(1).rgbString());

                datasets.push({
                    label: rows[i]["日期"],
                    backgroundColor: color(colors[i]).alpha(0.6).rgbString(),
                    borderColor: colors[i],
                    borderWidth: 1,
                    data: JSON.parse('['+rows[i][field] + ']'),
                    fill: false,
                });
            }

            //var lines = ["线1", "线2", "线3", "线4", "线5", "线6"];
            //var datas = [];
            //var datasets = [];
            //for (var i = 0; i < 6; i++) {
            //    datas.push([randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]);
            //    datasets.push({
            //        label: lines[i],
            //        backgroundColor: color(colors[i]).alpha(0.6).rgbString(),
            //        borderColor: colors[i],
            //        borderWidth: 1,
            //        data: datas[i],
            //        fill: false,
            //    });
            //}

            window.lineConfig.data.labels = labels;
            window.lineConfig.data.datasets = datasets;
            window.line.update();
        }

    </script>
</body>
</html>