OMAY_WMS/KanBan/NFine.Web/Areas/SRM/Views/WatchPanel/PanelWIPZhiXingDa2.cshtml


<!DOCTYPE html>
<html>
<head>
    <!--更多资源： -->
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>执行看板</title>
    <!--大屏-->
    <link type="text/css" href="~/Content/Cust003/css/public.css" rel="stylesheet" />
    <link type="text/css" href="~/Content/Cust003/css/icon.css" rel="stylesheet" />
    <link type="text/css" href="~/Content/Cust003/css/index.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/Content/Cust069/fonts/icomoon.css">
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
    @*<script src="~/Content/Cust003/js/jquery-1.11.0.min.js" type="text/javascript"></script>*@
    <script src="~/Content/Cust003/js/jquery.numscroll.js"
            type="text/javascript"
            charset="utf-8"></script>
    <script src="~/Content/js/echarts/echarts5.3.3.min.js"></script>

    <style>
        h3 {
            color: #FFFFFF;
            text-shadow: #05d1fc 0px 1px 3px, #05d1fc 1px 0px 3px,#05d1fc 0px -1px 3px, #05d1fc -1px 0px 3px;
            filter: glow(color=#00FFCC,strength=3);
        }

        .rightMain_top {
            width: 100%;
            padding-bottom: 0.1rem;
        }

        .animationNone {
            animation: none !important;
        }

        .CustDiv2 ul li:nth-child(1), .CustDiv2 div div ul li:nth-child(1) {
            width: 20% !important;
        }

        .CustDiv2 ul li:nth-child(2), .CustDiv2 div div ul li:nth-child(2) {
            width: 25% !important;
        }

        .CustDiv2 ul li:nth-child(3), .CustDiv2 div div ul li:nth-child(3) {
            width: 11% !important;
        }

        .CustDiv2 ul li:nth-child(4), .CustDiv2 div div ul li:nth-child(4) {
            width: 11% !important;
        }

        .CustDiv2 ul li:nth-child(5), .CustDiv2 div div ul li:nth-child(5) {
            width: 11% !important;
        }

        .CustDiv2 ul li:nth-child(6), .CustDiv2 div div ul li:nth-child(6) {
            width: 35% !important;
        }


        .CustDiv3 ul li:nth-child(1), .CustDiv3 div div ul li:nth-child(1) {
            width: 20% !important;
        }

        .CustDiv3 ul li:nth-child(2), .CustDiv3 div div ul li:nth-child(2) {
            width: 28% !important;
        }

        .CustDiv3 ul li:nth-child(3), .CustDiv3 div div ul li:nth-child(3) {
            width: 11% !important;
        }

        .CustDiv3 ul li:nth-child(4), .CustDiv3 div div ul li:nth-child(4) {
            width: 15% !important;
        }

        .CustDiv3 ul li:nth-child(5), .CustDiv3 div div ul li:nth-child(5) {
            width: 25% !important;
        }

        .CustDiv3 ul li:nth-child(6), .CustDiv3 div div ul li:nth-child(6) {
            width: 0% !important;
        }


         /*.CustDiv4 ul li:nth-child(1), .CustDiv4 div div ul li:nth-child(1) {
            width: 5% !important;
        }*/

        .CustDiv4 ul li:nth-child(2), .CustDiv4 div div ul li:nth-child(2) {
            width: 18% !important;
        }

        .CustDiv4 ul li:nth-child(3), .CustDiv4 div div ul li:nth-child(3) {
            width: 26% !important;
        }

        .CustDiv4 ul li:nth-child(4), .CustDiv4 div div ul li:nth-child(4) {
            width: 30% !important;
        }

        .CustDiv4 ul li:nth-child(5), .CustDiv4 div div ul li:nth-child(5) {
            width: 5% !important;
        }

        .CustDiv4 ul li:nth-child(6), .CustDiv4 div div ul li:nth-child(6) {
            width: 5% !important;
        }
           .CustDiv4 ul li:nth-child(7), .CustDiv4 div div ul li:nth-child(7) {
            width: 5% !important;
        }


        .CustDiv1 ul li:nth-child(1), .CustDiv1 div div ul li:nth-child(1) {
            width: 30% !important;
        }

        .CustDiv1 ul li:nth-child(2), .CustDiv1 div div ul li:nth-child(2) {
            width: 20% !important;
        }

        .CustDiv1 ul li:nth-child(3), .CustDiv1 div div ul li:nth-child(3) {
            width: 20% !important;
        }

        .CustDiv1 ul li:nth-child(4), .CustDiv1 div div ul li:nth-child(4) {
            width: 20% !important;
        }

        .CustDiv1 ul li:nth-child(5), .CustDiv1 div div ul li:nth-child(5) {
            width: 10% !important;
        }

        .CustDiv1 ul li:nth-child(6), .CustDiv1 div div ul li:nth-child(6) {
            width: 30% !important;
        }

        .CustDiv1 ul li:nth-child(7), .CustDiv1 div div ul li:nth-child(7) {
            width: 10% !important;
        }

        .leftMain_top, .leftMain_bottom {
            height: calc(45%);
        }

        .leftMain_topIn, .leftMain_bottomIn, .leftMain_topIn ul:nth-child(1),
        .leftMain_bottomIn ul:nth-child(1), .rightMain_bottom, .rightMain_bottomIn {
            height: 100%;
        }

        img {
            height: 0.2rem;
            width: 0.5rem;
            padding-top: 0.05rem;
        }

        .bg {
            padding-top: 0.01rem;
        }

        .title {
            height: 8%;
            text-shadow: #01db78 0px 2px 3px, #01db78 1px 0px 3px, #05d1fc 0px -2px 3px, #05d1fc -1px 0px 3px;
        }


        .TopName {
            vertical-align: middle;
            text-align: center;
            font-size: 30px;
            font-weight: 700;
            color: white;
        }

        .TopNameTime {
            vertical-align: middle;
            text-align: right;
            font-size: 20px;
            font-weight: 700;
            color: white;
        }
        /*td {
                box-sizing:inherit;
            }*/
         .rightMain_bottomIn .biaoge_list ul li {
            overflow: hidden;
            padding-right: 0px;
        }

         .Tableinfo td{
     display: inline-block;
    width: 13% !important;
    /*border: 1px solid white;*/
    margin-left: 3%;
         }

                 .yellow {
    /*background-color: #FAC858;*/
    background-color: yellow;
    color:white !important;
}

.red {
    /*background-color: #FF79BC;*/
     background-color: red;
        color:white !important; 
}
.green {
    /*background-color: #FF79BC;*/
     background-color: green;
        color:white !important; 
}
.white{
      color:white !important; 
}
    </style>
    <script type="text/javascript">
          document.documentElement.style.fontSize =
            (document.documentElement.clientWidth / 768) * 100 + 'px'
    </script>

    <script src="~/Content/Cust003/js/echarts.min.js"></script>

</head>


<body>

    <div class="bg">
        <table class="title">
            <tr>
                <td style="width:20%">
                    @*<div class="TopNamelogo" id="TopNamelogo">
                        <img src="~/Content/img/ninghong.jpg" border="0" class="logoclass" />
                    </div>*@
                </td>

                <td style="width:60%">
                    <div class="TopName" id="TopName">执行看板</div>
                </td>
                <td style="width:20%">
                    <div class="TopNameTime" id="TopNameTime"></div>
                </td>

            </tr>
        </table>
        @*<div class="title">执行看板</div>*@
<div style="width:80%;height:3%;margin-left:10%;margin-bottom:1%;" >
    <table class="Tableinfo" style="color:white;width:100%;height:100%">
        <tr>
            
            <td>
                <span>原料库存:</span>
                <label id="YL"></label>
            </td>
            <td>
                <span>成品库存:</span>
                <label id="CP"></label>
            </td>
            <td>
                <span>保护膜仓:</span>
                <label id="BHM"></label>
            </td>
            <td>
                <span>造粒料仓:</span>
                <label id="ZLL"></label>
            </td>
            <td>
                <span>分切库存:</span>
                <label id="FQ"></label>
            </td>
            <td>
                <span>副产品库存:</span>
                <label id="FCP"></label>
            </td>
        </tr>
    </table>
</div>

        <div class="leftMain_top">
            <div class="leftMain_topIn">
                <ul>
                    <li class="LineLi">

                        <div class="rightMain_bottom">
                            <div class="rightMain_bottomIn">
                                <h3> 成品发货一览</h3>
                                <div class="biaoge biaoge_list" id="marqueelist1"
                                     style="width: 100%;  ">
                                    <div class="biaoge_listIn CustDiv1">
                                        <ul class="ul_title">
                                            <li>发货单号</li>
                                            <li>状态</li>
                                            <li>滞留天数</li>
                                            <li>管理员</li>
                                        </ul>
                                        <div class="ul_list" id="marqueeCust1">
                                            <div class="ul_listIn" id="marqueeCustCH1">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span class="border_bg_leftTop"></span>
                                @*<span class="border_bg_rightTop"></span>
                                <span class="border_bg_leftBottom"></span>*@
                                <span class="border_bg_rightBottom"></span>
                            </div>
                        </div>
                        @*</div>*@
                    </li>
                    <li class="LineLi">

                        <div class="rightMain_bottom">
                            <div class="rightMain_bottomIn">
                                <h3> 采购未到货一览</h3>
                                <div class="biaoge biaoge_list" id="marqueelist2"
                                     style="width: 100%;  ">
                                    <div class="biaoge_listIn CustDiv2">
                                        <ul class="ul_title">
                                            <li>到货单</li>
                                            <li>存货名称</li>
                                            <li>规格型号</li>
                                            <li>应到数量</li>
                                            <li>未入库数量</li>
                                            <li>供应商</li>
                                        </ul>
                                        <div class="ul_list" id="marqueeCust2">
                                            <div class="ul_listIn" id="marqueeCustCH2">


                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span class="border_bg_leftTop"></span>
                                @*<span class="border_bg_rightTop"></span>
                                <span class="border_bg_leftBottom"></span>*@
                                <span class="border_bg_rightBottom"></span>
                            </div>
                        </div>

                    </li>
                    <li class="LineLi">

                        <div class="rightMain_bottom">
                            <div class="rightMain_bottomIn">
                                <h3> 成品未入库</h3>
                                <div class="biaoge biaoge_list" id="marqueelist3"
                                     style="width: 100%;  ">
                                    <div class="biaoge_listIn CustDiv4">
                                        <ul class="ul_title">
                                            <li>产线</li>
                                            <li>存货编码</li>
                                            <li>数量</li>
                                            <li>滞留天数</li>
                                        </ul>
                                        <div class="ul_list" id="marqueeCust3">
                                            <div class="ul_listIn" id="marqueeCustCH3">


                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span class="border_bg_leftTop"></span>
                                @*<span class="border_bg_rightTop"></span>
                                <span class="border_bg_leftBottom"></span>*@
                                <span class="border_bg_rightBottom"></span>
                            </div>
                        </div>

                    </li>

                </ul>
            </div>
        </div>
        <div class="leftMain_bottom">
            <div class="leftMain_bottomIn">
                <ul>
                    <li class="LineLi">

                        <div class="rightMain_bottom">
                            <div class="rightMain_bottomIn">
                                <h3> 委外加工状态一览</h3>
                                <div class="biaoge biaoge_list" id="marqueelist4"
                                     style="width: 100%; ">
                                    <div class="biaoge_listIn CustDiv1">
                                        <ul class="ul_title">
                                            <li>委外订单号</li>
                                            <li>状态</li>
                                            <li>出库单号</li>
                                            <li>发单时间</li>
                                        </ul>
                                        <div class="ul_list" id="marqueeCust4">
                                            <div class="ul_listIn" id="marqueeCustCH4">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span class="border_bg_leftTop"></span>
                                @*<span class="border_bg_rightTop"></span>*@
                                @*<span class="border_bg_leftBottom"></span>*@
                                <span class="border_bg_rightBottom"></span>
                            </div>
                        </div>

                    </li>
                    <li class="LineLi">

                        <div class="rightMain_bottom">
                            <div class="rightMain_bottomIn">
                                <h3> 委外未到货一览</h3>
                                <div class="biaoge biaoge_list" id="marqueelist5"
                                     style="width: 100%; ">
                                    <div class="biaoge_listIn CustDiv2">
                                        <ul class="ul_title">
                                            <li>到货单</li>
                                            <li>物料编码</li>
                                            <li>规格型号</li>
                                            <li>应到数量</li>
                                            <li>未入库数量</li>
                                            <li>供应商</li>
                                            
                                        </ul>
                                        <div class="ul_list" id="marqueeCust5">
                                            <div class="ul_listIn" id="marqueeCustCH5">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span class="border_bg_leftTop"></span>
                                @*<span class="border_bg_rightTop"></span>
                                <span class="border_bg_leftBottom"></span>*@
                                <span class="border_bg_rightBottom"></span>
                            </div>
                        </div>

                    </li>
                    <li class="LineLi">

                        <div class="rightMain_bottom">
                            <div class="rightMain_bottomIn">
                                <h3> 今日调拨</h3>
                                <div class="biaoge biaoge_list" id="marqueelist6"
                                     style="width: 100%; ">
                                    <div class="biaoge_listIn CustDiv3">
                                        <ul class="ul_title">
                                            <li>存货编码</li>
                                            <li>存货名称</li>
                                            <li>数量</li>
                                            <li>产线</li>
                                            <li>调拨时间</li>
                                        </ul>
                                        <div class="ul_list" id="marqueeCust6">
                                            <div class="ul_listIn" id="marqueeCustCH6">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span class="border_bg_leftTop"></span>
                                @*<span class="border_bg_rightTop"></span>
                                <span class="border_bg_leftBottom"></span>*@
                                <span class="border_bg_rightBottom"></span>
                            </div>
                        </div>

                    </li>


                </ul>
            </div>
        </div>

        @*</div>*@

        <div style="clear: both"></div>
    </div>


    <script>

            var DataF = 3000000;// 300;//单位秒 //刷新数据时间
        var _BarWidth = "25%";
        var _barBorderRadius_M = 2;

        $(function () {
            getTime();
            GetDataZong();

            //刷新数据
            timer = setInterval(function () {
                GetDataZong();
            }, DataF * 1000);


        });
        function getTime() {
            var days = new Array("日", "一", "二", "三", "四", "五", "六");
            var currentDT = new Date();
            var y, m, date, day, hs, ms, ss, theDateStr;
            y = currentDT.getFullYear(); //四位整数表示的年份
            m = currentDT.getMonth() < 10 ? '0' + (currentDT.getMonth() + 1) : (currentDT.getMonth() + 1); //月
            date = currentDT.getDate() < 10 ? '0' + currentDT.getDate() : currentDT.getDate(); //日
            day = currentDT.getDay(); //星期
            hs = currentDT.getHours() < 10 ? '0' + currentDT.getHours() : currentDT.getHours(); //时
            ms = currentDT.getMinutes() < 10 ? '0' + currentDT.getMinutes() : currentDT.getMinutes(); //分
            ss = currentDT.getSeconds() < 10 ? '0' + currentDT.getSeconds() : currentDT.getSeconds(); //秒
            theDateStr = y + "-" + m + "-" + date + " " + hs + ":" + ms + ":" + ss;
            //填充到组件中
            $("#TopNameTime").text(theDateStr);
            // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
            window.setTimeout(getTime, 1000);
        }
        function GetDataZong() {
            //echart1_1();
            Get_KCInfo();
            Get_Table1("marqueeCustCH1", "30");
            Get_Table2("marqueeCustCH2", "60");
            Get_Table3("marqueeCustCH3", "90");
            Get_Table4("marqueeCustCH4", "90");
            Get_Table5("marqueeCustCH5", "90");
            Get_Table6("marqueeCustCH6", "90");
            GetZhiXing_RCVUnInWare();
             SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动
             SetIfGo("marqueeCust2", "marqueeCustCH2", "marqueelist2");//判断是否需要滚动
             SetIfGo("marqueeCust3", "marqueeCustCH3", "marqueelist3");//判断是否需要滚动
            SetIfGo("RCVUNINView", "RCVUNIN", "marqueelist4");//判断是否需要滚动


        }


        function Get_KCInfo() {
            $.ajax({
                url: "/SRM/WatchPanel/Get_KCInfo" + "?" + Math.random(),
                dataType: "json",
                async: false,
                success: function (data) {
                    $("#YL").text(data[0].YCL);
                    $("#CP").text(data[0].CP);
                    $("#BHM").text(data[0].BHM);
                    $("#ZLL").text(data[0].ZLL);
                    $("#FQ").text(data[0].FQ);
                    $("#FCP").text(data[0].FCP);

                },
                error: function (aa) {

                }
            });
        }


        function SetIfGo(DivID, DivCHID,listID)
        {
            var ListDIV = $("#" + listID)[0].clientHeight;
            var H_marqueediv = $("#" + DivCHID)[0];
           //var H_marquee= H_marqueediv.clientHeight;
           var H_marqueeView = $("#" + DivID)[0].clientHeight;
           if ((ListDIV-40) > H_marqueeView) {
                if (!$("#" + DivID).hasClass("animationNone")) {
                    $("#" + DivID).addClass("animationNone");
                }
                if (!$("#" + DivCHID).hasClass("animationNone")) {
                    $("#" + DivCHID).addClass("animationNone");
                }

            }
            else {

                if ($("#" + DivID).hasClass("animationNone")) {
                    $("#" + DivID).removeClass("animationNone");
                }
                if ($("#" + DivCHID).hasClass("animationNone")) {
                    $("#" + DivCHID).removeClass("animationNone");
                }
            }
        }


        function Get_Table1(marqueeID, ItemNumber) {
            $.ajax({
                url: "/SRM/WatchPanel/Get_Table1" + "?" + Math.random(),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data != false && data != null && data.length > 0) {
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            var statusClass = "";
                            if (data[i].Status == 'yellow') {
                                statusClass = "yellow";
                            } else if (data[i].Status == 'red') {
                                statusClass = "red";
                            } else if (data[i].Status == 'green') {
                                statusClass = "green";
                            }
                            else {
                                statusClass = "white";
                            }

                            html += '<ul class="ul_con ' + statusClass + '"> ';
                            html += ' <li>' + data[i].发货单号 + '</li> <li>' + data[i].状态 + '</li>';
                            html += '<li>' + data[i].滞留天数 + '</li> <li>' + data[i].管理员 + '</li>   </ul> ';
                        }

                        $("#" + marqueeID).html(html);
                    } else {
                        $("#" + marqueeID).html("");
                    }
                },
                error: function (aa) {

                }
            });
        }
        function Get_Table2(marqueeID, ItemNumber) {
            $.ajax({
                url: "/SRM/WatchPanel/Get_Table2" + "?" + Math.random(),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data != false && data != null && data.length > 0) {
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            html += '   <ul class="ul_con"> ';
                            html += '<li>' + data[i].到货单 + '</li> <li>' + data[i].存货名称 + '</li>';
                            html += '<li>' + data[i].规格型号 + '</li> <li>' + data[i].应到数量 + '</li>';
                            html += '<li>' + data[i].未入库数量 + '</li> <li>' + data[i].供应商 + '</li>   </ul> ';
                        }

                        $("#" + marqueeID).html(html);
                    } else {
                        $("#" + marqueeID).html("");
                    }
                },
                error: function (aa) {

                }
            });
        }
        function Get_Table3(marqueeID, ItemNumber) {
            $.ajax({
                url: "/SRM/WatchPanel/Get_Table3" + "?" + Math.random(),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data != false && data != null && data.length > 0) {
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            var statusClass = "";
                            if (data[i].Status === 'yellow') {
                                statusClass = "yellow";
                            } else if (data[i].Status === 'red') {
                                statusClass = "red";
                            } else if (data[i].Status === 'green') {
                                statusClass = "green";
                            }
                            html += '<ul class="ul_con ' + statusClass + '">';
                            html += '<li>' + data[i].产线 + '</li> <li>' + data[i].存货编码 + '</li>';
                            html += '<li>' + data[i].数量 + '</li> <li>' + data[i].滞留时间 + '</li>   </ul> ';
                        }

                        $("#" + marqueeID).html(html);
                    } else {
                        $("#" + marqueeID).html("");
                    }
                },
                error: function (aa) {

                }
            });
        }
        function Get_Table4(marqueeID, ItemNumber) {
            $.ajax({
                url: "/SRM/WatchPanel/Get_Table4" + "?" + Math.random(),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data != false && data != null && data.length > 0) {
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            var statusClass = "";
                            if (data[i].Status === 'yellow') {
                                statusClass = "yellow";
                            } else if (data[i].Status === 'red') {
                                statusClass = "red";
                            } else if (data[i].Status === 'green') {
                                statusClass = "green";
                            }
                            html += '<ul class="ul_con ' + statusClass + '">';
                            html += '<li>' + data[i].委外订单号 + '</li> <li>' + data[i].状态 + '</li>';
                            html += '<li>' + data[i].出库单号 + '</li> <li>' + data[i].发单时间 + '</li>   </ul> ';
                        }

                        $("#" + marqueeID).html(html);
                    } else {
                        $("#" + marqueeID).html("");
                    }
                },
                error: function (aa) {

                }
            });
        }
        function Get_Table5(marqueeID, ItemNumber) {
            $.ajax({
                url: "/SRM/WatchPanel/Get_Table5" + "?" + Math.random(),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data != false && data != null && data.length > 0) {
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            html += '   <ul class="ul_con"> ';
                            html += '<li>' + data[i].到货单 + '</li> <li>' + data[i].物料编码 + '</li>';
                            html += '<li>' + data[i].规格型号 + '</li> <li>' + data[i].应到数量 + '</li>';
                            html += '<li>' + data[i].未入库数量 + '</li> <li>' + data[i].供应商 + '</li>   </ul> ';
                        }

                        $("#" + marqueeID).html(html);
                    } else {
                        $("#" + marqueeID).html("");
                    }
                },
                error: function (aa) {

                }
            });
        }
        function Get_Table6(marqueeID, ItemNumber) {
            $.ajax({
                url: "/SRM/WatchPanel/Get_Table6" + "?" + Math.random(),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data != false && data != null && data.length > 0) {
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                             html += '   <ul class="ul_con"> ';    
                             html += '<li>' + data[i].存货编码 + '</li> <li>' + data[i].存货名称 + '</li>';            
                             html += '<li>' + data[i].数量 + '</li> <li>' + data[i].产线 + '</li>   </ul> ';
                        }

                        $("#" + marqueeID).html(html);
                    } else {
                        $("#" + marqueeID).html("");
                    }
                },
                error: function (aa) {

                }
            });
        }
 
      
    </script>
</body>
</html>