<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>注塑车间计划看板</title>
    <link href="PlanScreenStyleSheet.css" rel="stylesheet" />
    <script src="jquery-1.8.0.min.js"></script>
    <script>
        $(function () {
            //setInterval("getDate()", 1000);
            //setInterval("initTable()", 3000);
            initTable();
        });

        function getDate() {
            var today = new Date();
            $("#DivTimer").html('<br>' + today.Format("yyyy-MM-dd hh:mm:ss") + '<br>');
        }

        function initTable() {
            var content1 = ""; //零件号
            var content2 = ""; //产品名称
            var content3 = ""; //工位号
            var content4 = ""; //合格率
            var content5 = ""; //生产数量
            var content6 = ""; //合格数量
            var content7 = ""; //原料名称
            var content8 = ""; //烘干料筒
            var content9 = ""; //加料批次
            var content10 = ""; //加料时间
            //var content11 = ""; //下一模具
            var content12 = ""; //零件号
            var content13 = ""; //计划数量

            var content14 = ""; //零件号
            var content15 = ""; //计划数量
            var content16 = ""; //零件号
            var content17 = ""; //计划数量

            $.ajax({
                type: "GET",
                url: "/Handler.ashx?method=GetPlanTable",
                dataType: "json",
                success: function (result) {
                    content1 = GetNum(result.PartNo);
                    content2 = GetNum(result.ProductName);
                    content3 = GetNum(result.Station);
                    content4 = GetNum(result.CompleteRate);
                    content5 = GetNum(result.CompleteCount);
                    content6 = GetNum(result.PassCount);
                    content7 = GetNum(result.MaterialName);
                    content8 = GetNum(result.Drum);
                    content9 = GetNum(result.BatchNo);
                    content10 = GetNum(result.Time1);
                    content11 = "";
                    content12 = GetNum(result.ProductName);
                    content13 = GetNum(result.PlanCount);

                    content14 = GetNum(result.PartNo2);
                    content15 = GetNum(result.PlanCount2);
                    content16 = GetNum(result.PartNo3);
                    content17 = GetNum(result.PlanCount3);

                    //content4 = 100;
                    //content5 = 4;
                    //content6 = 4;
                    //content13 = 100;
                    //content15 = 100;

                    
                    $("#content1").text(content1);
                    $("#content2").text(content2);
                    $("#content3").text(content3);
                    $("#content4").text(content4);
                    $("#content5").text(content5);
                    $("#content6").text(content6);
                    $("#content7").text(content7);
                    $("#content8").text(content8);
                    $("#content9").text(content9);
                    $("#content10").text(content10);
                    $("#content11").text(content11);
                    $("#content12").text(content12);
                    $("#content13").text(content13);

                    $("#content14").text(content14);
                    $("#content15").text(content15);
                    $("#content16").text(content16);
                    $("#content17").text(content17);
                }
            })
        }

        function GetNum(num)
        {
            if ( num != null ) {
                return num;
            }
            else {
                return "0";
            }
        }

        // 对Date的扩展,将 Date 转化为指定格式的String
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
        // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        // 例子:
        // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
        // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    </script>
</head>
<body>
    <table class="TableFrame">
        <tr>
            <td><table id="TableTitle"><tr><td id="tdImg" style="width:10%"><img id="Img"></td><td id="Title" style="width:60%">&nbsp;&nbsp;注塑车间计划看板&nbsp;&nbsp;</td><td style="border-right:hidden; text-align:center;"><div id="DivTimer"></div></td></tr></table></td>
        </tr>
        <tr>
            <td><table id="TableSecondRow"><tr><td class="tdTitle" style="width:200px;">产品信息:</td><td class="tdContent" id="content1"></td><td class="tdContent" id="content2"></td><td class="tdContent" id="content3" style="border-right:hidden;"></td></tr></table></td>
        </tr>
        <tr>
            <td>
                <table class="TableFrame">
                    <tr>
                        <td>
                            <table id="TableLeft">
                                <tr style="height:70%; width:925px;">
                                    <!--<td colspan="2"><table style="width:970px; height:330px;"><tr style="height:10%"><td class="tdTitle">零件号</td><td class="tdTitle">计划数量</td></tr>-->
                                    <td colspan="2">
                                        <table style="width:970px; height:330px;">
                                            <tr style="height:10%"><td class="tdTitle">产品名称</td><td class="tdTitle">计划数量</td></tr>
                                            <tr style="height:90%"><td class="tdContent" id="content12"></td><td class="tdContent" id="content13"></td></tr>
                                            <tr><td class="tdContent" id="content14"></td><td class="tdContent" id="content15"></td></tr>
                                            <tr><td class="tdContent" id="content16"></td><td class="tdContent" id="content17"></td></tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr style ="height:30%">
                                    <td class="tdTitle">合格率:</td>
                                    <td class="tdContent" id="content4"></td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table id="TableRight">
                                <tr style="height:20%">
                                    <td class="tdTitle">生产数量</td>
                                    <td class="tdTitle">合格数量</td>
                                </tr>
                                <tr style="height:80%">
                                    <td class="tdContent" id="content5"></td>
                                    <td class="tdContent" id="content6"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table id="TableBottom">
                    <tr>
                        <td class="tdTitle">原料名称:</td>
                        <td class="tdContent" id="content7"></td>
                        <td class="tdTitle">烘干料筒:</td>
                        <td class="tdContent" id="content8"></td>
                    </tr>
                    <tr>
                        <td class="tdTitle">加料批次:</td>
                        <td class="tdContent" id="content9"></td>
                        <td class="tdTitle">加料时间:</td>
                        <td class="tdContent" id="content10"></td>
                    </tr>
                    <!--<tr>
                        <td class="tdTitle">下一模具:</td>
                        <td colspan="3" class="tdContent" id="content11">&nbsp;</td>
                    </tr>-->
                </table>
            </td>
        </tr>
    </table>
</body>
</html>