JinHaoPanel/NFine.Web/Areas/SRM/Views/WatchPanel/PanelWIPZhiXingDa3.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.js"></script>


    <script src="~/Content/js/echarts4.8/echarts-liquidfill.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;
        }

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

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

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

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

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

        .CustDiv1 ul li:nth-child(6), .CustDiv1 div div ul li:nth-child(6) {
            width: 11% !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: 11% !important;
        }

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

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

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


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

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

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

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

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

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

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

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

        .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;
        }

        #div1 {
            display: flex;
        }

        #div1-C1 {
            font-size: 18px;
            margin-left: 115px;
            margin-top: 50px;
        }

            #div1-C1 div {
                margin-top: 20px;
                color: white;
                text-align: center;
                width: 130px;
            }

        #div1-C2 {
            font-size: 18px;
            margin-left: 15px;
            margin-top: 50px;
        }

            #div1-C2 div {
                margin-top: 23px;
                width: 200px;
                height: 20px;
                background-color: #0000CD;
                text-align: center;
            }

        #div1-C3 {
            font-size: 18px;
            margin-left: 15px;
            margin-top: 50px;
        }

            #div1-C3 div {
                margin-top: 20px;
                color: white;
                /*border-left:solid 1px #AFEEEE;
                border-right:solid 1px #AFEEEE;
                border-radius:25px;*/
                text-align: center;
                width: 30px;
            }

        #div3 {
            display: flex;
            color: white;
        }

        #div3-C1 {
            width: 50%;
        }

        #div3-C2 {
            width: 50%;
        }

        #div3-C1-C1 {
            text-align: center;
            width: 100%;
            font-size: 25px;
            background-color: #6495ED;
        }

        #div3-C1-C2 {
            margin-top: 10px;
            display: flex;
        }

        #div3-C1-C2-div1 {
            width: 25px;
            margin-left: 20px;
        }

        #div3-C1-C2-div2 {
            width: 25px;
            margin-left: 20px;
        }

        #div3-C2-C1 {
            text-align: center;
            width: 97%;
            font-size: 25px;
            background-color: #6495ED;
        }

        #div3-C2-C2 {
            margin-top: 10px;
            display: flex;
        }

        #div3-C2-C2-div1 {
            width: 25px;
        }

        #div3-C2-C2-div2 {
            width: 20px;
        }

        #div3-C1-C2 span {
            margin-left: 20px;
            text-align: center;
        }

        #div3-C2-C2 span {
            margin-left: 20px;
            text-align: center;
        }

        #div1-C2 {
            color: white;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        document.documentElement.style.fontSize =
            (document.documentElement.clientWidth / 768) * 100 + 'px'
    </script>


</head>


<body>

    <div class="bg">
        <table class="title">
            <tr>
                <td style="width:20%">
                    <div class="TopNamelogo" id="TopNamelogo">
                        <img src="~/Content/img/zhenxiang.png" border="0" class="logoclass" />
                        @*<img src="~/Content/img/wechat.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 class="leftMain_top"  style="height:90%">
            <div class="leftMain_topIn">
                <ul>
                    <li class="LineLi" style="width:100%">
                        <div class="rightMain_bottom">
                            <div class="rightMain_bottomIn">
                                @*<h3> 插件车间生产加工数据</h3>*@
                                <div class="biaoge biaoge_list" id="marqueelist2"
                                     style="width: 100%;  ">
                                    <div class="biaoge_listIn CustDiv1">
                                        <ul class="ul_title">
                                            <li>序号</li>
                                            <li>生产编号</li>
                                            <li >产品名称</li>
                                            <li>用户单位</li>
                                            <li>客户交货期</li>
                                            <li>生产状态</li>
                                            <li>进度</li>
                                        </ul>
                                        <div class="ul_list" id="marqueeCust2">
                                            <div class="ul_listIn ul_listInCust" 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>
                </ul>
            </div>
        </div>


        @*</div>*@

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


    <script>

        var DataF = 30;// 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();
            GetArea1();
            GetArea2('marqueeCustCH2', 1);
            
           
            //GetZhiXing_MO("marqueeCustCH1", "30");
            //GetZhiXing_MO("marqueeCustCH2", "60");
            //GetZhiXing_MO("marqueeCustCH3", "90");
            //GetZhiXing_RCVUnInWare();
            // SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动
            // SetIfGo("marqueeCust2", "marqueeCustCH2", "marqueelist2");//判断是否需要滚动
            // SetIfGo("marqueeCust3", "marqueeCustCH3", "marqueelist3");//判断是否需要滚动
            //SetIfGo("RCVUNINView", "RCVUNIN", "marqueelist4");//判断是否需要滚动


        }

        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 GetArea1() {
            $.ajax({
                url: "/SRM/WatchPanel/GetAreal1",
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data != false && data != null) {
                        //月度生产	月度发车	上月实际生产	月度实际发车	上月完成数量   上上月完成数量
                        $("#mothPlan").html(data[0].月度生产);
                        $("#motnSales").html(data[0].月度发车);
                        $("#lastMothSales").html(data[0].上月度发车);
                        $("#yearSales").html(data[0].年度发车);
                    } else {
                        $("#" + marqueeID).html("");
                    }
                },
                error: function (aa) {

                }
            });
        }
     

        function GetArea2(marqueeID, ItemNumber) {
            $.ajax({
                url: "/SRM/WatchPanel/GetProductProgress?ItemNumber=" + ItemNumber + "&" + Math.random(),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data != false && data != null) {
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            html += '<ul class="ul_con">';
                            html += '<li>' + data[i].序号 + '</li>';
                            html += '<li>' + data[i].销售车辆号 + '</li><li style="width: 9px;  ">' + data[i].产品名称 + ' 2ssssssssssssssssssss222222222</li><li>' + data[i].用户单位 + '</li>';
                            html += '<li>' + data[i].客户交货期 + '</li><li>' + data[i].生产状态 + '</li>';
                            html += '<li>' + data[i].进度 + '</li></ul>';
                        }
                        $(".ul_listInCust").css("animation-duration", data.length * 1.3 + "s");
                        $("#" + marqueeID).html(html);

                        // Set background color of odd-indexed ul elements to black
                        $("#" + marqueeID + " ul:nth-child(odd)").css("background-color", "rgba(0, 1, 0, 0.1)");
                    } else {
                        $("#" + marqueeID).html("");
                    }
                },
                error: function (aa) {
                    // Handle error
                }
            });
        }


        function GetZhiXing_RCVUnInWare() {
            $.ajax({
                url: "/SRM/WatchPanel/GetZhiXing_RCVUnInWare?XX=XX&" + 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"> <li   >' + data[i].LOTNO + '</li> <li  >' +
                                data[i].送货单号 + '</li>';
                            html += '    <li  >' + data[i].采购订单号 + '</li> <li  >' + data[i].物料编码 + '</li>';
                            html += '   <li   >' + data[i].物料名称 + '</li> <li  >' + data[i].数量 + '</li>   ';
                            html += '   <li   >' + data[i].检验人 + '</li>     </ul> ';

                        }
                        html += "</ul>";
                        $("#RCVUNIN").html(html);
                    }
                    else {
                        $("#RCVUNIN").html("");
                    }
                },
                error: function (aa) {

                }
            });
        }


    </script>
</body>
</html>