SOURCE

var RandomColor = ["#faa","#afa","#aaf","#ffa","#faf","#aff","#fed","#fde","#fdef","#dfe","#edf","#efd","#acf","#afc","#fac","#fca","#cfa","#caf"];
var warningNum = 150;
var divList = [];
var MaterialCodeList = [];
var MaterialOutNum = [];//记录以及使用完的物料编号，当补料后需要清空一下
var materialJsonStr = 
       "                     [                                                                                          "+
       "                         {'id':1,'MaterialCode':'WL00001','MaterialDateCode':'DC000001','LastNum':100,'DimNum':5,'index':5,'MaterialUseNum':20},                 "+
       "                         {'id':2,'MaterialCode':'WL02201','MaterialDateCode':'DC000003','LastNum':100,'DimNum':5,'index':6,'MaterialUseNum':25},                 "+
       "                         {'id':3,'MaterialCode':'WL00002','MaterialDateCode':'DC000102','LastNum':0,'DimNum':5,'index':11,'MaterialUseNum':1},                  "+
       "                         {'id':4,'MaterialCode':'WL00005','MaterialDateCode':'DC000202','LastNum':800,'DimNum':5,'index':2,'MaterialUseNum':1},                  "+
       "                         {'id':5,'MaterialCode':'WL00006','MaterialDateCode':'DC000302','LastNum':700,'DimNum':5,'index':3,'MaterialUseNum':1},                  "+
       "                         {'id':6,'MaterialCode':'WL00007','MaterialDateCode':'DC000402','LastNum':500,'DimNum':5,'index':4,'MaterialUseNum':1},                  "+
       "                         {'id':7,'MaterialCode':'WL00008','MaterialDateCode':'DC000502','LastNum':400,'DimNum':5,'index':5,'MaterialUseNum':1},                  "+
       "                         {'id':8,'MaterialCode':'WL00009','MaterialDateCode':'DC000602','LastNum':800,'DimNum':5,'index':6,'MaterialUseNum':1},                  "+
       "                         {'id':9,'MaterialCode':'WL00000','MaterialDateCode':'DC000702','LastNum':500,'DimNum':5,'index':7,'MaterialUseNum':1},                  "+
       "                         {'id':10,'MaterialCode':'WL000010','MaterialDateCode':'DC000802','LastNum':450,'DimNum':5,'index':8,'MaterialUseNum':1},                  "+
       "                         {'id':11,'MaterialCode':'WL00011','MaterialDateCode':'DC000902','LastNum':350,'DimNum':5,'index':9,'MaterialUseNum':1},                  "+
       "                         {'id':12,'MaterialCode':'WL00012','MaterialDateCode':'DC001002','LastNum':450,'DimNum':5,'index':10,'MaterialUseNum':1},                  "+
       "                         {'id':13,'MaterialCode':'WL00002','MaterialDateCode':'DC001102','LastNum':850,'DimNum':5,'index':1,'MaterialUseNum':1},                  "+
       "                         {'id':14,'MaterialCode':'WL00002','MaterialDateCode':'DC001202','LastNum':100000,'DimNum':5,'index':12,'MaterialUseNum':1},                  "+
       "                         {'id':15,'MaterialCode':'WL00002','MaterialDateCode':'DC001302','LastNum':200,'DimNum':5,'index':13,'MaterialUseNum':1},                  "+
       "                         {'id':16,'MaterialCode':'WL00006','MaterialDateCode':'DC001402','LastNum':500,'DimNum':5,'index':14,'MaterialUseNum':1},                  "+
       "                         {'id':17,'MaterialCode':'WL00003','MaterialDateCode':'DC001502','LastNum':250,'DimNum':5,'index':15,'MaterialUseNum':1},                  "+
       "                         {'id':18,'MaterialCode':'WL00004','MaterialDateCode':'DC001602','LastNum':350,'DimNum':5,'index':16,'MaterialUseNum':1},                  "+
       "                         {'id':19,'MaterialCode':'WL00003','MaterialDateCode':'DC001702','LastNum':300,'DimNum':5,'index':17,'MaterialUseNum':1}                  "+
       "                     ]";



$(function(){
    var materialJson = eval("(" + materialJsonStr + ")");    
    updateInfo(materialJson,false);    
    $("#MaterialShow tr:eq(1)").transition("hide");
    $("#MaterialShow tr:eq(1)").transition({
                                    animation : 'fly up',
                                    reverse   : true,
                                    interval  : 1000
                                });
    
//点击按钮弹出绑定modal框
    $("#MaterInput").transition("hide");
    $("#BindButton").click(function(){
        $("#MaterInput").transition("fly right");
    });
    $("#MaterInput").keydown(function(keyEvent){
        if(keyEvent.keyCode == 13)
        {
           // alert($("#MaterInput input").val());
            reduceMetarial(materialJson); 
           // materialJson = materialJson.filter(function(e){return e.LastNum>0}); 
            updateInfo(materialJson,true);
            updatewarningDiv(materialJson);
        }
    });

//定时控制
//    window.setInterval(function(){
//        reduceMetarial(materialJson);  
//        materialJson = materialJson.filter(function(e){return e.LastNum>0});      
//        updateInfo(materialJson,true);
//        updatewarningDiv(materialJson);
//    }, 5000);
});
        function reduceMetarial(materialJson)
        {
            for(var v in MaterialCodeList)
                {
                    //找每一个物料的第一个数据
                    //找到对应的物料编码的集合
                    var filters = materialJson.filter(function(e){return e.MaterialCode == MaterialCodeList[v] && e.LastNum>0;});
                    if(filters.length<=0) 
                    {
                        $("#"+MaterialCodeList[v]).attr("bgColor","red");
                        continue;
                    }
                    //根据剩余数量排序 需要减的就是第一个数据
                    filters.sort(sortBy("index",false.parseInt));
                    var temp = filters.filter(function(e){return e.id == filters[0].id})[0];
                    $(".info").text(temp.id);
                    temp.LastNum = temp.LastNum - temp.MaterialUseNum;
                    if(temp.LastNum <= 0 && filters.filter(function(e){return e.id == filters[0].id}).length == 1)
                    {
                        MaterialOutNum.push(temp.MaterialCode);
                    }
                }
        }
        function updateInfo(materialJson,animation)
        {
            divList = [];
            MaterialCodeList = [];
            var htmlStr = "<table class='ui grid' style='text-align:center;' align='middle' id = 'MaterialShow'>";
          //  var materialJson = eval("(" + materialJsonStr + ")");
            
            //遍历json，将物料代码存一份不重复的在MaterialCodeList中
            for(var material in materialJson)
                {
                    if(MaterialCodeList.indexOf(materialJson[material].MaterialCode)<0)
                    {
                        MaterialCodeList.push(materialJson[material].MaterialCode);
                    }
                }
            //最上行显示物料编码
            htmlStr += "<tr style='height:60px;'>";
            for(var v in MaterialCodeList)
            {
                htmlStr += "<td id='"+MaterialCodeList[v]+"'  class='selectable' style=' color:#fff;font-size:25px; padding-top:10px;'><a href='#'>"+MaterialCodeList[v]+"</a></td>";
            }
                htmlStr += "</tr>";




            //显示物料的列表图
            htmlStr += "<tr>";
            //根据每个物料编码，显示为一列,就是一个<td>
            for(var materCode in MaterialCodeList)
            {
                //根据物料代码查找所有对应的date code的json数据
                var materialBymaterCode = materialJson.filter(function(e){return e.MaterialCode == MaterialCodeList[materCode];});//u.search(materialJson,MaterialCodeList[materCode],"MaterialCode",1); 
                materialBymaterCode = materialBymaterCode.filter(function(e){return e.LastNum > 0;});
                materialBymaterCode.sort(sortBy('index',false,parseInt));
                htmlStr += "<td style='vertical-align:top;'>";
                htmlStr += "<div class='one wide column' style='height:100%;width:250px;'>";
                //遍历对应的物料代码的所有dateCode信息，在一列中显示
                for(var v in materialBymaterCode)
                {
                    var heightValue = 0;
                    var backColor = RandomColor[Math.round(Math.random()*(RandomColor.length-1))];
                    if(materialBymaterCode[v].LastNum<=warningNum);
                    {
                        heightValue  = 75;
                     //   if(materialBymaterCode.length == 1)
                            backColor = '#f00';
                     //   else
                     //       backColor = RandomColor[Math.round(Math.random()*(RandomColor.length-1))];
                    }            
                    if(materialBymaterCode[v].LastNum >= 600)
                    {
                        heightValue  = 300;
                        backColor = RandomColor[Math.round(Math.random()*(RandomColor.length-1))];
                    }
                    if(materialBymaterCode[v].LastNum > warningNum && materialBymaterCode[v].LastNum < 600)
                    {
                        heightValue = Math.trunc(materialBymaterCode[v].LastNum/2);
                        backColor = RandomColor[Math.round(Math.random()*(RandomColor.length-1))];
                    }

                    
                    var jsonStr1 = JSON.stringify(materialBymaterCode[v]).replace(/\"/g, "&quot;");
                    //对应的<p>标签中加id,用于后续的动态修改数据，命名：物料编号-datecode-n n代表第几个div
                    htmlStr += "<div id='"+materialBymaterCode[v].MaterialCode+"-"+materialBymaterCode[v].MaterialDateCode+"-"+v+"'>";
                    htmlStr += "<div id='infoDisplay' ondblclick=\"showModal(\'" + jsonStr1 + "\')\"  class='selectable' style='height:"+heightValue+"px;width:100%;background-color:"+backColor+";padding-top:15px;'><p>Data Code:"+materialBymaterCode[v].MaterialDateCode+"</p><p>剩余"+materialBymaterCode[v].LastNum+"/用量"+materialBymaterCode[v].MaterialUseNum+"</p></div>";
                    htmlStr += "<div id='infoLast' class='selectable' style='height:25px;width:100%;background-color:#666;padding-top:5px;color:#ddf'>模糊记录："+materialBymaterCode[v].DimNum+"</div>"
                    htmlStr += "</div>"
                    divList.push(materialBymaterCode[v].MaterialCode+"-"+materialBymaterCode[v].MaterialDateCode);
                }
                htmlStr += "</div>";
                htmlStr += "</td>";
            }
            htmlStr += "</tr>";
            $("#MaterialShow").html(htmlStr);
            if(animation == true)
            for(var dl in divList)
            {
                var vv = divList[dl] + "-0";
                $("#"+vv+" #infoDisplay").transition('fade down',100).transition('fade up',100);
            }
        }
        function updatewarningDiv(materialJson)
        {
            var htmlWarningStr = "";
            for(var m in MaterialCodeList)
            {
                var temp = materialJson.filter(function(e){return e.MaterialCode == MaterialCodeList[m] && e.LastNum > 0});
                var totalNum = 0;
                for(var t in temp)
                    totalNum += temp[t].LastNum;

                //对应的物料号余量不足
                if(totalNum > 0 && totalNum < warningNum)
                    htmlWarningStr += "<p>物料："+MaterialCodeList[m]+"即将用完</p>";
            } 
            for(var o in MaterialOutNum)
            {
                htmlWarningStr += "<p>物料："+MaterialOutNum[o]+"已经用完 </p>";
            }
            $("#warningDiv").html(htmlWarningStr);
            $("#warningDiv").transition('fly left',0).transition("fly right",0);
        }
        //筛选
        var u = window.u || {};
        u.isArray = function (o) {
            return typeof o == 'object' && Object.prototype.toString.call(o).slice(8, -1).toLowerCase() == 'array';
        };
        u.search = function (array, value, attrName,fullStringCheck) {
            if (!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
            var arr = [];
            arr = array.filter(function (a) {
                if (fullStringCheck == 1 && attrName.length>0) //某个字段完全匹配
                {
                    return a[attrName].toString() == value;
                }
                else if (fullStringCheck == 0 && attrName.length == 0)  //所有字段部分匹配
                {
                    return JSON.stringify(a).indexOf(value) != -1;
                }
                else if (fullStringCheck == 0 && attrName.length>0)    //某个字段部分匹配
                {
                    return a[attrName].toString().indexOf(value) != -1;
                }
            });
            return arr;
        };
        //filed:JSON的属性名称
        //rev: 顺序(false)或倒序(true)
        //primer:类型String或parseInt
        //用法：jsonName.sort(sortBy("name",false.String));
        //      jsonName.sort(sortBy("name",false.parseInt));
        var sortBy = function (filed, rev, primer) {
            rev = (rev) ? -1 : 1;
            return function (a, b) {
                a = a[filed];
                b = b[filed];
                if (typeof (primer) != 'undefined') {
                    a = primer(a);
                    b = primer(b);
                }
                if (a < b) { return rev * -1; }
                if (a > b) { return rev * 1; }
                return 1;
            }
        };
        //{'MaterialCode':'WL00001','MaterialDateCode':'DC000001','LastNum':10,'DimNum':5,'index':5},

        function showModal(obj) {
            var cs = JSON.parse(obj);
            $(".first.modal .header").text(cs.MaterialCode);
            $(".first.modal .description").html(
                "<form class='ui form'  asp-action='csSave' asp-controller='Home'>                                                  " +
                "   <div class='field'>                                                                                             " +
                "       <label>物料编码</label>                                                                                      " +
                "       <label class='MaterialCode'> " + cs.MaterialCode + " </label>                                               " +
                "   </div>                                                                                                          " +
                "   <div class='field'>                                                                                             " +
                "       <label>date code</label>                                                                                    " +
                "       <label class='MaterialDateCode'> " + cs.MaterialDateCode + " </label>                                       " +
                "   </div>                                                                                                          " +
                "   <div class='field'>                                                                                             " +
                "       <label>剩余数量</label>                                                                                     " +
                "       <input class='LastNum' type='text' name='LastNum' value='" + cs.LastNum + "' disabled>                      " +
                "   </div>                                                                                                          " +
                "   <div class='field'>                                                                                             " +
                "       <label>模糊记录数</label>                                                                                    "+
                "       <input class='DimNum' type='text' name='DimNum' value='" + cs.DimNum + "' disabled>                         " +
                "   </div>                                                                                                          " +
                "</form>                                                                                                            "
            );
            $("#editButton").show();
            $("#editButton").unbind("click");
            $("#editButton").click(function() {
                $(".first.modal input").attr("disabled", false);
            });
            $("#saveButton").unbind("click");
            $("#saveButton").click(function () {
                $.post("/Home/csSave",
                    {
                        MaterialCode:         $(".MaterialCode").text().trim(),
                        MaterialDateCode:     $(".MaterialDateCode").text(),
                        LastNum:    $(".LastNum").val(),
                        DimNum:    $(".DimNum").val()
                    },
                    function (data, status) {
                        if (status == "success") {
                            
                        }
                        $(".second.modal .description").text(status == "success" ? "操作成功" : "操作失败");
                        $(".second.modal").modal('show');
                        $(".second.modal .button").unbind("click");
                        $(".second.modal .button").click(function () {
                            $(".second.modal").modal('hide');
                        });
                    });
            });
            $('.coupled.modal').modal({
                allowMultiple: true
            });
            $(".first.modal").modal({ blurring: true }).modal('show');
        }












 $('#full').click(function() {
     var ele = document.getElementById("divScroll");//document.documentElement;
     var SCREEN_FULL_TEXT = "全屏显示";
     var SCREEN_REST_TEXT = "退出全屏";
     var SCREEN_FULL = 'screen-full';
     var SCREEN_REST = 'screen-restore';
     var iconElem = $(this);
     if (iconElem.hasClass(SCREEN_FULL)) {
         var reqFullScreen = ele.requestFullScreen || ele.webkitRequestFullScreen || ele.mozRequestFullScreen || ele.msRequestFullscreen;
        if (typeof reqFullScreen !== 'undefined' && reqFullScreen) {
             reqFullScreen.call(ele);
         };
         iconElem.addClass(SCREEN_REST).removeClass(SCREEN_FULL);
         iconElem.text(SCREEN_REST_TEXT);
     } else {
         if (document.exitFullscreen) {
             document.exitFullscreen();
         } else if (document.mozCancelFullScreen) {
             document.mozCancelFullScreen();
         } else if (document.webkitCancelFullScreen) {
             document.webkitCancelFullScreen();
         } else if (document.msExitFullscreen) {
             document.msExitFullscreen();
         }
         iconElem.addClass(SCREEN_FULL).removeClass(SCREEN_REST);
         iconElem.text(SCREEN_FULL_TEXT);
     }
 });

全屏显示，这里不会显示到

<div id="divScroll" style="overflow-x: scroll; overflow-y: auto;position: relative; height:100%;background-color:#333">
    <div style="position: absolute;">
        <div>
        <table class="ui grid" style="text-align:center;vertical-align:top;" align="middle" id = "MaterialShow">
        </table>        
        </div> 
    </div>

    <div id = "warningDiv" style="position:fixed;bottom:55px; width:100%; color:red; background-color:yellow;font-size:12px;" align="middle">
    </div>

    <button id = "BindButton" style="position:fixed;bottom:15px; width:100px; height:40px; color:red; background-color:#cfc;font-size:16px;" align="middle">
    绑定物料
    </button>

    <button  class="screen-full" id="full" href="javascript:;" style="position:fixed;bottom:55px; width:100px; height:40px; color:red; background-color:#cfc;font-size:16px;" align="middle">
    全屏显示
    </button>

    <div id="MaterInput" style="position:fixed;bottom:15px; width:100%; height:40px; background-color:#cfc;font-size:16px;" align="middle">
        <div class='ui input focus' style='width:100%;'>
            <input type='text' placeholder='物料信息...'>
            </div>
    </div>
</div> 

    <!--以下是模态框-->
    <div class="ui container">
        <div class="ui first coupled modal">
            <div class="header">
                模态框标题
            </div>
            <div class="image content">
                <div class="description">
                    描述可以出现在右边
                </div>
            </div>
            <div class="actions">
                <div class="ui button" id="editButton">编辑</div>
                <div class="ui button" id="saveButton">保存</div>
            </div>
        </div>

        <!--提示模态框-->
        <div class="ui second small coupled modal">
            <div class="header">
                提示
            </div>
            <div class="image content">
                <div class="description">
                    描述可以出现在右边
                </div>
            </div>
            <div class="actions">
                <div class="ui button">OK</div>
            </div>
        </div>

        <!--双按钮模态框-->
        <div class="ui small modal doubleButtonModal">
            <div class="header">
                提示
            </div>
            <div class="image content">
                <div class="description">
                    描述可以出现在右边
                </div>
            </div>
            <div class="actions">
                <div class="ui button" id="cancelButton">取消</div>
                <div class="ui button" id="sureButton">确定</div>
            </div>
        </div>
    </div>