<!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/jquery-1.8.0.min.js"></script>
    <style>
        .centerT, .centerT tr, .centerT td {
            border-bottom:solid 1px white;
            border-left:solid 1px white;
            border-right:solid 1px white;
            border-collapse:collapse;
        }

        .title {
            color:white;
            font-family:黑体;
            font-size:40px;
            font-weight:700;
            width:200px;
            height:100px;
            text-align:center;
            background-color:blue;
        }

        .title1 {
            color:white;
            font-family:黑体;
            font-size:40px;
            font-weight:700;
            width:880px;
            height:100px;
            text-align:center;
            background-color:blue;
        }

        .content {
            color:white;
            font-family:黑体;
            font-size:40px;
            width:150px;
            height:122.8px;
            line-height:122.8px;
            text-align:center;
        }
        .content1 {
            color:white;
            font-family:黑体;
            font-size:40px;
            width:880px;
            height:122.8px;
            line-height:122.8px;
            text-align:center;
        }
    </style>
    <script>
    $(function () {
        setInterval("getDate()", 1000);
        setInterval("showAndHidden1()",5000);
        setInterval("getTable()", 3000);
    });

    function getDate() {
        var today = new Date();
        $("#DivTimer").text(today.Format("yyyy-MM-dd hh:mm:ss"));
    }

    function showAndHidden1() {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        if (div1.style.display == 'block') div1.style.display = 'none';
        else div1.style.display = 'block';
        if (div2.style.display == 'block') div2.style.display = 'none';
        else div2.style.display = 'block';
    }

    // 对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;
    }

    function getTable() {
        $.ajax({
            type: "GET",
            url: "../Handler/Plan247.ashx?method=GetTableContent",
            dataType: "json",
            success: function (result) {
                var res = result["result"];
                for (var i = 0; i < res.length; i++) {
                    $("td[name='contentO" + (i + 1) + "']").text(res[i].OrderNo);
                    $("td[name='contentI" + (i + 1) + "']").text(res[i].Item);
                    $("td[name='contentP" + (i + 1) + "']").text(res[i].PartNo);
                    $("td[name='contentN" + (i + 1) + "']").text(res[i].PartName2);
                    $("td[name='contentOC" + (i + 1) + "']").text(res[i].OrderCount);
                    $("td[name='contentCC" + (i + 1) + "']").text(res[i].CompleteCount);
                }
            }
        })
    }
    </script>

</head>
<body>
<div id="div1" style="display: none; background-color: black; width: 1920px; height: 1080px;">
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="height:120px;">
                <div style="background-image: url('../Pic/Logo.png'); width:187px; height:120px; display:inline-block; float:left;"></div>
                <div style="color:white;display:inline-block; width:1170px; height:120px; text-align:center; font-size:100px; float:left;">机台计划信息</div>
                <div id="DivTimer" style="display:inline-block; color:white; font-size:50px; text-align:center; width:550px; line-height:120px; float:left;"></div>
            </td>
        </tr>
        <tr>
            <td>
                <table class="centerT">
                    <tr><td class="title">订单号</td><td class="title">顺序</td><td class="title">零件号</td><td class="title1">零件名称</td><td class="title">计划数</td><td class="title">完成数</td></tr>
                    <tr><td name="contentO1" class="content"></td><td name="contentI1" class="content"></td><td name="contentP1" class="content"></td><td name="contentN1" class="content1"></td><td name="contentOC1" class="content"></td><td name="contentCC1" class="content"></td></tr>
                    <tr><td name="contentO2" class="content"></td><td name="contentI2" class="content"></td><td name="contentP2" class="content"></td><td name="contentN2" class="content1"></td><td name="contentOC2" class="content"></td><td name="contentCC2" class="content"></td></tr>
                    <tr><td name="contentO3" class="content"></td><td name="contentI3" class="content"></td><td name="contentP3" class="content"></td><td name="contentN3" class="content1"></td><td name="contentOC3" class="content"></td><td name="contentCC3" class="content"></td></tr>
                    <tr><td name="contentO4" class="content"></td><td name="contentI4" class="content"></td><td name="contentP4" class="content"></td><td name="contentN4" class="content1"></td><td name="contentOC4" class="content"></td><td name="contentCC4" class="content"></td></tr>
                    <tr><td name="contentO5" class="content"></td><td name="contentI5" class="content"></td><td name="contentP5" class="content"></td><td name="contentN5" class="content1"></td><td name="contentOC5" class="content"></td><td name="contentCC5" class="content"></td></tr>
                    <tr><td name="contentO6" class="content"></td><td name="contentI6" class="content"></td><td name="contentP6" class="content"></td><td name="contentN6" class="content1"></td><td name="contentOC6" class="content"></td><td name="contentCC6" class="content"></td></tr>
                    <tr><td name="contentO7" class="content"></td><td name="contentI7" class="content"></td><td name="contentP7" class="content"></td><td name="contentN7" class="content1"></td><td name="contentOC7" class="content"></td><td name="contentCC7" class="content"></td></tr>
                    <tr><td name="contentO8" class="content"></td><td name="contentI8" class="content"></td><td name="contentP8" class="content"></td><td name="contentN8" class="content1"></td><td name="contentOC8" class="content"></td><td name="contentCC8" class="content"></td></tr>
                    <tr><td name="contentO9" class="content"></td><td name="contentI9" class="content"></td><td name="contentP9" class="content"></td><td name="contentN9" class="content1"></td><td name="contentOC9" class="content"></td><td name="contentCC9" class="content"></td></tr>
                    <tr><td name="contentO10" class="content"></td><td name="contentI10" class="content"></td><td name="contentP10" class="content"></td><td name="contentN10" class="content"></td><td name="contentOC10" class="content"></td><td name="contentCC10" class="content"></td></tr>
                </table>
            </td>
        </tr>
    </table>
</div>
    
    <div id="div2" style="display: block; width: 1920px; height: 1080px;">
        <div style="display:inline-block; width: 50%; height: 100%; background-color: yellowgreen;float: left" >
            <img src="../3.png" width="100%" >
        </div>
        <div style="display:inline-block; width: 50%; height: 100%;float:right" >
            <video width="50%" height="300" controls="controls" autoplay="autoplay" loop="loop" >
                <source src="../movie.mp4" type="video/mp4" >
            </video>
        </div>
    </div>

<!--<table style="background-color:black; width:1920px; height:1080px;">-->
</body>
</html>