<!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="Board.css" rel="stylesheet" />
    <script src="jquery-1.8.0.min.js"></script>
    <script>
      $(function () {
        setInterval("getDate()", 1000);
        setInterval("initTable()", 60000*5);
        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 = ""; //状态

        $.ajax({
          type: "GET",
          url: "http://10.60.101.59:8013/PaintWebservice.ashx?method=GetPaintRecord",
          dataType: "json",
          success: function (result) {
            var dataList = result.DataList;
            var infoList = [];
            var wrapper = $("#scrollEle");
            dataList.forEach((item) => {
              let ele = `<tr class="item">
            <td class="tdContent">${item.BucketCode}</td>
            <td class="tdContent">${item.PaintCode}</td>
            <td class="tdContent">${item.PaintName}</td>
            <td class="tdContent">${item.CreateTime}</td>
            <td class="tdContent">${item.BucketState}</td>
            </tr>`;
              infoList.push(ele);
            });
            $("#scrollEle").html(infoList.join(""));

            // 设置计时器,每隔2秒执行一次(变换一次)
            var timer = null;
            timer = setInterval(function () {
              // 将第一行item移到最后一行,其他的往上挪填补空缺位
              var infoItemTmp = infoList.shift();
              $("#scrollEle").append(infoItemTmp);
              $(".item:first").remove();
              infoList.push(infoItemTmp);
            }, 2000);
          },
        });
      }

      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 class="TableFrame">
            <thead style="height: 20%">
              <tr>
                <td class="tdTitle">油漆桶</td>
                <td class="tdTitle">油漆零件号</td>
                <td class="tdTitle">油漆颜色</td>
                <td class="tdTitle">操作时间</td>
                <td class="tdTitle">状态</td>
              </tr>
            </thead>
            <tbody id="scrollEle"></tbody>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>