<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注塑合格率日报</title>
    <script src="../Scripts/echarts.min.js"></script>
    <script src="../Scripts/jquery-1.8.0.min.js"></script>
    <script src="../Scripts/DateScript.js"></script>
    <link href="../CSS/InitCSS.css" rel="stylesheet" />
    <link href="../CSS/RiStyleSheet.css" rel="stylesheet" />
    <style>
        #body {
            background-image: url(../Pic/shang.png);
            background-position:right;
        }
    </style>
</head>
<body>
    <div id="body">
        <div id="main"></div>
        <div id="table">
            <table>
                <thead id="thead"></thead>
                <tbody id="tbody"></tbody>
            </table>
        </div>
    </div>

    <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    $(function () {
        Show();
        setInterval("Show()", 60000);
    });

    function Show() {

        var myChart = echarts.init(document.getElementById('main'));
        
        $.ajax({
            url: "../Handler/FiveScreenHandler.ashx?method=getInjection1_2",
            datatype: 'json',
            type: "Post",
            contentType: "application/json; charset=utf-8",
            async: false,
            success: function (result) {
                if (result) {
                    var objlist = eval('(' + result + ')');
                    var date = GetDate();

                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        //color: ['lightgreen', 'lightblue', 'red'],
                        color: ['lightgreen', 'red'],
                        //backgroundColor: '#ffffff',
                        legend: {
                            textStyle: {
                                fontSize: 26,
                                color: '#666'
                            }
                        },
                        grid: {
                            //left: '3%',
                            //right: '4%',
                            //bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            //data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                            data: date,
                            axisLine: {
                                lineStyle: {
                                    color: '#ffffff',
                                    width: 1 //这里是为了突出显示加上的
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: { show: false },//去除网格线
                            axisLine: {
                                lineStyle: {
                                    color: '#ffffff',
                                    width: 1 //这里是为了突出显示加上的
                                }
                            },
                            min: 90,
                            max: 100,
                            interval: 2
                        },
                        series: [{
                            name: '',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            barWidth: '20px',
                            visualMap: {
                                show: false,
                                pieces: [{ gte: 0, lte: 100, color: 'red' }],
                                outOfRange: { color: 'green' }
                            },
                            data: objlist.data3
                        },
                            //{
                            //    name: '',
                            //    type: 'line',
                            //    itemStyle: { normal: { label: { show: false } } },
                            //    data: objlist.data1
                            //},
                            {
                                name: '',
                                type: 'line',
                                itemStyle: { normal: { label: { show: false } } },
                                data: objlist.data2
                            }]
                    });

                    //生成表格
                    //title
                    var tableHead = "<tr>";
                    tableHead += "<td>日</td>";
                    for (var i = 0; i < date.length; i++) {
                        tableHead += "<td>" + date[i] + "</td>";
                    }
                    tableHead += "</tr>";
                    $("#thead").html(tableHead);
                    //body
                    var standard = objlist.data2;
                    var numerial = objlist.data1;

                    var tableBody = "<tr>";
                    tableBody += "<td>标</td>";
                    for (var i = 0; i < standard.length; i++) {
                        tableBody += "<td>" + standard[i] + "</td>";
                    }
                    tableBody += "</tr>";

                    tableBody += "<tr>";
                    tableBody += "<td>数</td>";
                    for (var i = 0; i < numerial.length; i++) {
                        tableBody += "<td>" + numerial[i] + "</td>";
                    }
                    tableBody += "</tr>";
                    $("#tbody").html(tableBody);
                }
            }
        });
    }
    </script>
</body>
</html>