仓库看板

YL

2021-05-13 58bcfbdfa04296976b358f7726bd07105ef65690

 HDHouse.html

@@ -27,16 +27,16 @@
            margin-top: -75px;
            margin-right: 5px;
            color: #09d1ea;

            
        }

        
        .clock #Date {
            text-align: center;
            text-shadow: 0 0 0px #00c6ff;


            
            
        }

        
        .clock ul {
            width: 450px;
            margin: 0 auto;
@@ -46,7 +46,7 @@
            margin-left: 15px;
            position: relative;
        }

        
        .clock ul li {
            display: inline;
            font-size: 24px;
@@ -54,14 +54,14 @@
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            text-shadow: 0 0 0px #00c6ff;
        }

        
        body {
            padding-left: 50px;
            padding-right: 50px;
        }

        
        .title {

            
            font-size: 44px;
            font-family: PingFangSC;
            font-weight: 500;
@@ -70,7 +70,7 @@
            background: url(img/img_little_new.png) center no-repeat;
            margin-bottom: 30px;
        }

        
        .flex {
            display: flex;
            display: -webkit-flex;
@@ -78,7 +78,7 @@
            flex-direction: row;
            flex-wrap: wrap;
        }

        
        .flex .flex_item {
            width: 16%;
            height: 180px;
@@ -87,14 +87,14 @@
            margin-bottom: 10px;
            background: url(img/3-3.png) #02040d no-repeat center top;
            position: relative;


            
            
        }

        
        .flex span {
            position: absolute;
            top: 50%;

            
            margin-top: 0;
            font-size: 23px;
            font-family: PingFangSC;
@@ -103,9 +103,9 @@
            width: 100%;
            text-align: center;
        }

        
        .flex p {

            
            margin-bottom: 5px;
            color: #a5a5a7;
            position: absolute;
@@ -115,7 +115,7 @@
            font-weight: 400;
            width: 100%
        }

        
        .title_o {
            margin-top: 15px;
            margin-bottom: 10px;
@@ -124,12 +124,12 @@
            font-weight: 400;
            color: rgba(9, 209, 234, 1);
        }

        
        .flex_t li {
            width: 100%;

            
        }

        
        .content_name {
            font-size: 16px;
            font-family: PingFangSC;
@@ -137,47 +137,47 @@
            color: rgba(255, 255, 255, 1);
            margin-bottom: 12px;
        }

        
        .content_style {
            display: inline-block;
            vertical-align: top;

            
        }

        
        .w44 {
            width: 44%;
            margin-right: 15px;
            padding: 10px 13px 5px 13px;
        }

        
        .w58 {
            width: 53.5%;

            
        }

        
        .bg_color {
            background: #0C0C18;
        }

        
        .icon_style {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }

        
        .icon_n {
            background: url(img/icon_n.png) no-repeat center;
        }

        
        .icon_r {
            background: url(img/icon_r.png) no-repeat center;
        }

        
        .icon_c {
            background: url(img/icon_c.png) no-repeat center;
        }

        
        .content {
            display: inline-block;
            width: 49.3%;
@@ -189,68 +189,68 @@
            margin-right: 20px;
            margin-bottom: 10px;
        }

        
        .content:nth-child(2n) {
            margin-right: 0;
        }

        
        .content_style span {
            font-size: 14px;
            font-family: PingFangSC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        
        .mr {
            margin-right: 35px;
        }

        
        .text_s {
            vertical-align: 12px;
        }

        
        .content_mod {
            width: 80px;
            height: 60px;
            border-radius: 2px;
            display: inline-block;

            
            margin-right: 10px;
            vertical-align: top;
        }

        
        .content_mod:nth-child(5n) {
            margin-right: 0px;
        }

        
        .content_mod_bg_true {
            background: url(img/new_icon_true.png) no-repeat center;
            border: 1px solid rgba(55, 184, 200, 1);
        }

        
        .content_mod_bg_tf {
            background: url(img/new_icon_tf.png) no-repeat center;
            border: 1px solid rgba(124, 87, 255, 1);
        }

        
        .content_mod_bg_false {
            background: url(img/new_icon_false.png) no-repeat center;
        }

        
        .mt12 {
            margin: 12px 0 0 0;
        }

        
        .mb9 {
            margin: 0 0 7px 0;
        }

        
        .flex_t {
            height: 680px;
            overflow: hidden;
        }


        
        
        .col-sm-12 {
            position: relative;
            min-height: 1px;
@@ -262,7 +262,7 @@
        var Warehouse = '160';  //毛坯仓库
        var interval0;//计时器
        $(document).ready(function () {

            
            // 创建两个变量，一个数组中的月和日的名称
            var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
            setInterval(function () {
@@ -275,427 +275,159 @@
                var ss = date1.getSeconds();
                var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
                var Stamp = new Date();


                
                
                $('#Date').html(year + " 年" + " " + monthNames[month] + ' ' + day + " 日  " + ' ' + dayNames[Stamp.getDay()]);
                $("#hours").html((hh < 10 ? ("0" + hh) : hh));
                $("#min").html((mm < 10 ? ("0" + mm) : mm));
                $("#sec").html((ss < 10 ? ("0" + ss) : ss));

                
            }, 1000);

            
        });
        $(function () {
            TopMap();
            DataGrid();
            // 定时器
            interval0 = setInterval(function () {
                DataGrid();
            }, 120000);
        })
        function DataGrid() {
            var data = {
                "dt":
                    [
                        {
                            "STOCKQTY": "10",
                            "TODAYINQTY": "10",
                            "TODAYOUTQTY": "10",
                            "THISMONTHINQTY": "10",
                            "THISMONTHOUTQTY": "10",
                            "TURNOVERDAY": "10"
                        }
                    ],
                "dt1":
                    [
                        {
                            "PartName": "#螺纹001",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        },
                        {
                            "PartName": "#螺纹002",
                            "StockQty": "10",
                            "InRoomQty": "10",
                            "OutRoomQty": "10",
                            "list": [
                                {
                                    "LocationStatus": "Y",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "N",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                },
                                {
                                    "LocationStatus": "",
                                    "LocationCode": "#10",
                                    "LocationQty": "10"
                                }
                            ]
                        }
                    ]
            }
            console.info(data)
            $("#stockqty").html(data.dt[0].STOCKQTY);
            $("#todayinqty").html(data.dt[0].TODAYINQTY);
            $("#todayoutqty").html(data.dt[0].TODAYOUTQTY);
            $("#thismonthinqty").html(data.dt[0].THISMONTHINQTY);
            $("#thismonthoutqty").html(data.dt[0].THISMONTHOUTQTY);
            $("#turnoverday").html(data.dt[0].TURNOVERDAY);
            $(".hd").html("");
            var StepHtml = "";
            StepHtml += "<ul>";
            var result = [];
            for (var i = 0; i < data.dt1.length; i += 2) {
                result.push(data.dt1.slice(i, i + 2));
            }
            for (var j = 0; j < result.length; j++) {
                StepHtml += "<li>";
                for (var m = 0; m < result[j].length; m++) {
                    StepHtml += "<div class='content'>";
                    StepHtml += "<div class='content_name'>" + result[j][m].PartName + "</div>";
                    StepHtml += "<div class='content_style bg_color w44'>";
                    StepHtml += "<span class='mr'><i class='icon_style icon_n'></i><span class='text_s'>" + result[j][m].StockQty + "</span></span>";
                    StepHtml += "<span class='mr'><i class='icon_style icon_r'></i><span class='text_s'>" + result[j][m].InRoomQty + "</span></span>";
                    StepHtml += "<span><i class='icon_style icon_c'></i><span class=text_s>" + result[j][m].OutRoomQty + "</span></span>";
                    StepHtml += "</div>";
                    StepHtml += "<div class='content_style w58'>";
                    for (var k = 0; k < result[j][m].list.length; k++) {
                        if (result[j][m].list[k].LocationStatus == "Y") {
                            StepHtml += "<div class='content_mod content_mod_bg_true'>";
                            StepHtml += "<p class='mt12'>" + result[j][m].list[k].LocationCode + "</p>";
                            StepHtml += "<p class='mb9'>" + result[j][m].list[k].LocationQty + "</p>";
                            StepHtml += "</div>";
                        }
                        else if (result[j][m].list[k].LocationStatus == "N") {
                            StepHtml += "<div class='content_mod content_mod_bg_tf'>";
                            StepHtml += "<p class='mt12'>" + result[j][m].list[k].LocationCode + "</p>";
                            StepHtml += "<p class='mb9'>" + result[j][m].list[k].LocationQty + "</p>";
                            StepHtml += "</div>";
                        }
                        else {
                            StepHtml += "<div class='content_mod content_mod_bg_false'>";
                            StepHtml += " </div>";
                        }
                    }
                    StepHtml += "</div>";
                    StepHtml += "</div>";
        function TopMap(){
            $.ajax({
                url: "http://localhost:12298/api/loaddata/HouseTopData",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                success: function (data) { 
                    $("#stockqty").html(data.data[0].FQTY);
                    $("#todayinqty").html(data.data[1].FQTY);
                    $("#todayoutqty").html(data.data[2].FQTY);
                    $("#thismonthinqty").html(data.data[3].FQTY);
                    $("#thismonthoutqty").html(data.data[4].FQTY);
                    $("#turnoverday").html("");
                },
                error: function (data) {
                    
                }
                StepHtml += "</li>";
            }
            StepHtml += "</ul>";
            $(".hd").append(StepHtml);
            var time = 80;
            $(".flex_t").slide({ mainCell: ".hd ul", autoPlay: true, effect: "topMarquee", opp: false, vis: 6, interTime: time, mouseOverStop: false });


            })
        }
    </script>
</head>

<body>
    <div class='title'>成品仓库FIFO看板</div>

    <div class="clock">
        <ul>
            <li id="Date"></li>
            <li id="hours"> </li>
            <li id="point">:</li>
            <li id="min"> </li>
            <li id="point">:</li>
            <li id="sec"> </li>
        </ul>

    </div>
    <div class="col-sm-12">
        <div class='flex'>
            <div class='flex_item'>
                <span id="stockqty"></span>
                <p>当前库存量</p>
            </div>

            <div class='flex_item'>
                <span id="todayinqty"></span>
                <p>今日入库数</p>
            </div>

            <div class='flex_item'>
                <span id="todayoutqty"></span>
                <p>今日出库数</p>
            </div>

            <div class='flex_item'>
                <span id="thismonthinqty"></span>
                <p>本月入库数</p>
            </div>

            <div class='flex_item'>
                <span id="thismonthoutqty"></span>
                <p>本月出库数</p>
            </div>


            <div class='flex_item'>
                <span id="turnoverday"></span>
                <p>库存周转天数</p>
            </div>


        </div>
    </div>
    <div class='title_o'>FIFO详情</div>
    <div class='flex_t'>
        <div class='hd'>
            <ul>

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

</html>
        function DataGrid() {
            $.ajax({
                url: "http://localhost:12298/api/loaddata/HouseDataTable",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                success: function (data) { 
                    console.info(data);
                    $(".hd").html("");
                    var StepHtml = "";
                    StepHtml += "<ul>";
                        var result = [];
                        for (var i = 0; i < data.data.length; i += 2) {
                            result.push(data.data.slice(i, i + 2));
                        }
                        for (var j = 0; j < result.length; j++) {
                            StepHtml += "<li>";
                                for (var m = 0; m < result[j].length; m++) {
                                    StepHtml += "<div class='content'>";
                                        StepHtml += "<div class='content_name'>" + result[j][m].FNAME + "</div>";
                                        StepHtml += "<div class='content_style bg_color w44'>";
                                            StepHtml += "<span class='mr'><i class='icon_style icon_n'></i><span class='text_s'>" + result[j][m].FQTY + "</span></span>";
                                            StepHtml += "<span class='mr'><i class='icon_style icon_r'></i><span class='text_s'>" + result[j][m].InQty + "</span></span>";
                                            StepHtml += "<span><i class='icon_style icon_c'></i><span class=text_s>" + result[j][m].OutQty + "</span></span>";
                                            StepHtml += "</div>";
                                            StepHtml += "<div class='content_style w58'>";
                                                StepHtml += "<div class='content_mod content_mod_bg_true'>";
                                                    StepHtml += "<p class='mt12'>固定库位1</p>";
                                                    StepHtml += "<p class='mb9'>" + result[j][m].FQTY + "</p>";
                                                    StepHtml += "</div>";
                                                    StepHtml += "</div>";
                                                    StepHtml += "</div>";
                                                    StepHtml += "<div class='content_mod content_mod_bg_tf'>";
                                                        StepHtml += "<p class='mt12'>" + result[j][m].list[k].LocationCode + "</p>";
                                                        StepHtml += "<p class='mb9'>" + result[j][m].list[k].LocationQty + "</p>";
                                                        StepHtml += "</div>";
                                                        StepHtml += "<div class='content_mod content_mod_bg_false'>";
                                                            StepHtml += " </div>";
                                                        }
                                                        StepHtml += "</li>";  
                                                    }
                                                    StepHtml += "</ul>";
                                                    $(".hd").append(StepHtml);
                                                    var time = 80;
                                                    $(".flex_t").slide({ mainCell: ".hd ul", autoPlay: true, effect: "topMarquee", opp: false, vis: 6, interTime: time, mouseOverStop: false });
                                                },
                                                error: function (data) {
                                                    
                                                }
                                            })
                                            
                                            
                                            
                                            
                                        }
                                    </script>
                                </head>
                                
                                <body>
                                    <div class='title'>成品仓库FIFO看板</div>
                                    
                                    <div class="clock">
                                        <ul>
                                            <li id="Date"></li>
                                            <li id="hours"> </li>
                                            <li id="point">:</li>
                                            <li id="min"> </li>
                                            <li id="point">:</li>
                                            <li id="sec"> </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="col-sm-12">
                                        <div class='flex'>
                                            <div class='flex_item'>
                                                <span id="stockqty"></span>
                                                <p>当前库存量</p>
                                            </div>
                                            
                                            <div class='flex_item'>
                                                <span id="todayinqty"></span>
                                                <p>今日入库数</p>
                                            </div>
                                            
                                            <div class='flex_item'>
                                                <span id="todayoutqty"></span>
                                                <p>今日出库数</p>
                                            </div>
                                            
                                            <div class='flex_item'>
                                                <span id="thismonthinqty"></span>
                                                <p>本月入库数</p>
                                            </div>
                                            
                                            <div class='flex_item'>
                                                <span id="thismonthoutqty"></span>
                                                <p>本月出库数</p>
                                            </div>
                                            
                                            
                                            <div class='flex_item'>
                                                <span id="turnoverday"></span>
                                                <p>库存周转天数</p>
                                            </div>
                                            
                                            
                                        </div>
                                    </div>
                                    <div class='title_o'>FIFO详情</div>
                                    <div class='flex_t'>
                                        <div class='hd'>
                                            <ul>
                                                
                                            </ul>
                                        </div>
                                    </div>
                                </body>
                                
                                </html>