生产计划看板页面

YL

2021-05-17 3b2bc48576c9954f977d4fcff35c7c2f1aa1adda

 HDCall.html

@@ -232,8 +232,20 @@
        #tb_order1 tr:hover {
            background: #000000;
        }
        .pull-right,.fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
            display: none;
        }
    </style>
    <script type="text/javascript">
        var interval;//计时器
        var interval1;//计时器
        var interval2;//计时器
        var num = 0;
        var num1 = 0;
        var TLProgress=0;  //退料率
        var CallData = [];  //近日配送时间数组
        var CallPSQty = [];  //近日配送总数数组
        var CAllQty = [];  //今日叫料总数数组
        $(document).ready(function () {
            // 创建两个变量，一个数组中的月和日的名称
            var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
@@ -260,8 +272,24 @@
        $(function () {
            var mychart1 = echarts.init(document.getElementById('mychart1'));
            var mychart2 = echarts.init(document.getElementById('mychart2'));
            TopData();
            BottomData();
            Chart(mychart1, mychart2);

            // 定时器
            interval = setInterval(function () {
                $("#tb_order").bootstrapTable('refresh');
            }, 10000);
            interval1=setInterval(function () {
                $("#tb_order1").bootstrapTable('refresh');
            }, 10000);
            interval2=setInterval(function () {
                TLProgress = 0;
                CallData = [];
                CallPSQty = [];  
                CAllQty = [];  
                Chart(mychart1, mychart2);
            }, 20000);
            //根据窗口的大小变动图表 --- 重点
            window.onresize = function () {
                myChart1.resize();
@@ -270,12 +298,31 @@
        })

        function Chart(mychart1, mychart2) {
            $.ajax({
                url: "http://localhost:12298/api/loaddata/CallData",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                success: function (data) {
                    TLProgress=parseFloat((data.data[2][1].qty / data.data[2][0].qty) * 100).toFixed(2);
                    //今日配送率
                    $.each(data.data[0], function (index, val) {
                        CallData.push(val.FNAME);
                        CallPSQty.push(parseFloat(val.HSendQTY).toFixed(2));
                        CAllQty.push(parseFloat(val.HQty).toFixed(2));
                    });
                },
                error: function (data) {
                    
                }
            })
            
            const colorList = ['#47A2FF ', '#FBD444']
            option1 = {
                title: [
                    {
                        text: '',
                        subtext: '10%',
                    subtext: TLProgress+'%',
                        textStyle: {
                            fontSize: 16,
                            color: '#999',
@@ -320,15 +367,15 @@
                            show: false
                        },
                        labelLine: {
                            show: true
                        show: false
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#000000'
                        },
                        data: [
                            { name: '达成率', value: 90 },
                            { name: '未达成率', value: 10 }
                    { name: '达成率', value: TLProgress },
                    { name: '未达成率', value: 100-TLProgress }
                        ],
                    }
                ]
@@ -357,7 +404,7 @@
                },
                legend: {
                    left: 'right',
                    data: ['任务数', '配送数'],
                    data: ['叫料数', '配送数'],
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 16,
@@ -368,7 +415,7 @@
                xAxis: [
                    {
                        type: 'category',
                        data: ['05-03', '05-04', '05-05', '05-06', '05-07'],
                    data: CallData,
                        axisTick: {
                            alignWithLabel: true
                        },
@@ -414,14 +461,14 @@
                ],
                series: [
                    {
                        name: '任务数',
                    name: '叫料数',
                        type: 'bar',
                        data: [10, 52, 200, 334, 390]
                    data: CAllQty
                    },
                    {
                        name: '配送数',
                        type: 'bar',
                        data: [10, 52, 200, 334, 390]
                    data: CallPSQty
                    }
                ]
            };
@@ -429,211 +476,15 @@
            mychart1.setOption(option1);
            mychart2.setOption(option2);


            Data = [
                {
                    ShipListWorkCode: "FH202105050001",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListQty: "1000",
                    ShipListFQty: "250",
                    ShipListKuqty: "10000",
                    Stus: "未完成",
                    Progress: "30"
                },
                {
                    ShipListWorkCode: "FH202105050001",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListQty: "1000",
                    ShipListFQty: "250",
                    ShipListKuqty: "10000",
                    Stus: "未完成",
                    Progress: "30"
                },
                {
                    ShipListWorkCode: "FH202105050001",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListQty: "1000",
                    ShipListFQty: "250",
                    ShipListKuqty: "10000",
                    Stus: "未完成",
                    Progress: "30"
                },
                {
                    ShipListWorkCode: "FH202105050001",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListQty: "1000",
                    ShipListFQty: "250",
                    ShipListKuqty: "10000",
                    Stus: "未完成",
                    Progress: "30"
                },
                {
                    ShipListWorkCode: "FH202105050001",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListQty: "1000",
                    ShipListFQty: "250",
                    ShipListKuqty: "10000",
                    Stus: "未完成",
                    Progress: "30"
                },
                {
                    ShipListWorkCode: "FH202105050001",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListQty: "1000",
                    ShipListFQty: "250",
                    ShipListKuqty: "10000",
                    Stus: "未完成",
                    Progress: "30"
                },
                {
                    ShipListWorkCode: "FH202105050001",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListQty: "1000",
                    ShipListFQty: "250",
                    ShipListKuqty: "10000",
                    Stus: "未完成",
                    Progress: "30"
                },
                {
                    ShipListWorkCode: "FH202105050001",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListQty: "1000",
                    ShipListFQty: "250",
                    ShipListKuqty: "10000",
                    Stus: "未完成",
                    Progress: "30"
                }
            ];
            Data1 = [
                {
                    Stus: "未完成",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListKuqty: "1000",
                    ShipListZYQty: "250",
                    ShipListSYQty: "750",
                    ShipListCGQty: "100",
                    ShipListAQqty: "500",
                    ShipListXQty: "250",
                    ShipListDayqty: "30"
                },
                {
                    Stus: "未完成",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListKuqty: "1000",
                    ShipListZYQty: "250",
                    ShipListSYQty: "750",
                    ShipListCGQty: "100",
                    ShipListAQqty: "500",
                    ShipListXQty: "250",
                    ShipListDayqty: "30"
                },
                {
                    Stus: "未完成",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListKuqty: "1000",
                    ShipListZYQty: "250",
                    ShipListSYQty: "750",
                    ShipListCGQty: "100",
                    ShipListAQqty: "500",
                    ShipListXQty: "250",
                    ShipListDayqty: "30"
                },
                {
                    Stus: "未完成",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListKuqty: "1000",
                    ShipListZYQty: "250",
                    ShipListSYQty: "750",
                    ShipListCGQty: "100",
                    ShipListAQqty: "500",
                    ShipListXQty: "250",
                    ShipListDayqty: "30"
                },
                {
                    Stus: "未完成",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListKuqty: "1000",
                    ShipListZYQty: "250",
                    ShipListSYQty: "750",
                    ShipListCGQty: "100",
                    ShipListAQqty: "500",
                    ShipListXQty: "250",
                    ShipListDayqty: "30"
                },
                {
                    Stus: "未完成",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListKuqty: "1000",
                    ShipListZYQty: "250",
                    ShipListSYQty: "750",
                    ShipListCGQty: "100",
                    ShipListAQqty: "500",
                    ShipListXQty: "250",
                    ShipListDayqty: "30"
                },
                {
                    Stus: "未完成",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListKuqty: "1000",
                    ShipListZYQty: "250",
                    ShipListSYQty: "750",
                    ShipListCGQty: "100",
                    ShipListAQqty: "500",
                    ShipListXQty: "250",
                    ShipListDayqty: "30"
                },
                {
                    Stus: "未完成",
                    ShipListPartNumber: "20210505001",
                    ShipListPartName: "#0505铜棒",
                    ShipListPartSpec: "#0505铜棒",
                    ShipListKuqty: "1000",
                    ShipListZYQty: "250",
                    ShipListSYQty: "750",
                    ShipListCGQty: "100",
                    ShipListAQqty: "500",
                    ShipListXQty: "250",
                    ShipListDayqty: "30"
                }

            ]
        function TopData(){
            $('#tb_order').bootstrapTable({
                //url: 'http://192.168.109.2:97/GongJiao/Product_Data',
                //url: "http://172.16.72.3:86/DaLian/Product_Data",
                data: Data,
                url: 'http://localhost:12298/api/loaddata/CallTableTopData',
                //data: dataJson,
                method: 'get',                      //请求方式（*）
                dataType: "json",
                //queryParams: queryParams,//传递参数（*）
                queryParams :queryParams,
                striped: false,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
@@ -642,27 +493,29 @@
                search: false,   //是否启用搜索框
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 13,                       //每页的记录行数（*）
                pageList: [13],        //可供选择的每页的行数（*）
                pageSize: 8,                       //每页的记录行数（*）
                pageList: [8],                     //可供选择的每页的行数（*）
                strictSearch: false,                 //设置为 true启用 全匹配搜索，否则为模糊搜索
                clickToSelect: true,                //是否启用点击选中行
                singleSelect: true,                  //设置True 将禁止多选
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                height: 450,
                
                columns: [
                    { field: 'ShipListWorkCode', title: '未配送清单', align: "left" },
                    { field: 'ShipListPartNumber', title: '物料编码', align: "left" },
                    { field: 'ShipListPartName', title: '物料名称', align: "left" },
                    { field: 'ShipListPartSpec', title: '规格型号', align: "left" },
                    { field: 'ShipListQty', title: '任务数量', align: "left" },
                    { field: 'ShipListFQty', title: '完成配送数量', align: "left" },
                    { field: 'ShipListKuqty', title: '当前库存', align: "left" },
                    { field: 'Stus', title: '状态', align: "left" },
                { field: 'HICMOBillNO', title: '生产订单', align: "left" },
                { field: 'HNUMBER', title: '物料编码', align: "left" },
                { field: 'HNAME', title: '物料名称', align: "left" },
                { field: 'HMODEL', title: '规格型号', align: "left" },
                { field: 'HQTY', title: '叫料数量', align: "left" },
                { field: 'HLEFT', title: '已配送数量', align: "left" },
                // { field: 'ShipListKuqty', title: '当前库存', align: "left" },
                { field: 'HSTATUS', title: '状态', align: "left",formatter: function (value, row, index) {                   
                    return "未完成";
                } },
                    {
                        field: 'Progress', title: '进度', align: "left", formatter: function (value, row, index) {
                            var res = 100 * row.ShipListFQty / row.ShipListQty;
                        var res = 100 * row.HLEFT / row.HQTY;
                            //return ["<div class='progress'> <div class='progress-bar' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%'>" + res.toFixed(2) + "</div> </div>"];
                            return "<div class='w40 div_co pw'><div class='PA' style='text-align:right;color:#4b2dba;float:right;height:20px;line-height:25px'>" + res.toFixed(2) + "%</div><div class='progress' style='margin-top:4px;'><div class='progress-bar progress-diy-info' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%';text-align:center;'></div></div></div>";
                        }
@@ -675,18 +528,32 @@

                },
                onLoadSuccess: function (row) {
                    var a = $('#tb_order').bootstrapTable('getSelections');
                    var num_total = (row.total)/ 8
                    if (num >= num_total) {
                        num = 0
                    }
                }

            })
        }
        //得到查询的参数
        function queryParams(params) {
            num += 1;
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: num,  //页码
            };
            return temp;
        }

        
        function BottomData(){
            $('#tb_order1').bootstrapTable({
                //url: 'http://192.168.109.2:97/GongJiao/Product_Data',
                //url: "http://172.16.72.3:86/DaLian/Product_Data",
                data: Data1,
                url: 'http://localhost:12298/api/loaddata/CallTableBottomData',
                //data: dataJson,
                method: 'get',                      //请求方式（*）
                dataType: "json",
                //queryParams: queryParams,//传递参数（*）
                queryParams :queryParams,
                striped: false,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
@@ -695,28 +562,27 @@
                search: false,   //是否启用搜索框
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 13,                       //每页的记录行数（*）
                pageList: [13],        //可供选择的每页的行数（*）
                pageSize: 8,                       //每页的记录行数（*）
                pageList: [8],                     //可供选择的每页的行数（*）
                strictSearch: false,                 //设置为 true启用 全匹配搜索，否则为模糊搜索
                clickToSelect: true,                //是否启用点击选中行
                singleSelect: true,                  //设置True 将禁止多选
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                height: 450,
                columns: [
                    { field: 'Stus', title: '库存状态', align: "left" },
                    { field: 'ShipListPartNumber', title: '物料编码', align: "left" },
                    { field: 'ShipListPartName', title: '物料名称', align: "left" },
                    { field: 'ShipListPartName', title: '物料规格', align: "left" },
                    { field: 'ShipListKuqty', title: '库存数量', align: "left" },
                    { field: 'ShipListZYQty', title: '占用数量', align: "left" },
                    { field: 'ShipListSYQty', title: '剩余可用数量', align: "left" },
                    { field: 'ShipListCGQty', title: '采购在途数量', align: "left" },
                    { field: 'ShipListAQqty', title: '安全库存', align: "left" },
                    { field: 'ShipListXQty', title: '需求量', align: "left" },
                    { field: 'ShipListDayqty', title: '本日需求', align: "left" }

                columns: [
                { field: 'KSTATUS', title: '库存状态', align: "left" },
                { field: 'KNUMBER', title: '物料编码', align: "left" },
                { field: 'KNAME', title: '物料名称', align: "left" },
                { field: 'KMODEL', title: '物料规格', align: "left" },
                { field: 'KQTY', title: '库存数量', align: "left" },
                { field: 'KZYQTY', title: '占用数量', align: "left" },
                { field: 'KKYQTY', title: '剩余可用数量', align: "left" },
                { field: 'KZTQTY', title: '采购在途数量', align: "left" },
                { field: 'KGQTY', title: '安全库存', align: "left" },
                { field: 'KXQTY', title: '需求量', align: "left" },
                { field: 'KDQTY', title: '本日需求', align: "left" }
                ],
                onClickRow: function (row, $element) {

@@ -725,13 +591,23 @@

                },
                onLoadSuccess: function (row) {
                    var a = $('#tb_order').bootstrapTable('getSelections');
                    var num_total = (row.total)/ 8
                    if (num >= num_total) {
                        num = 0
                }

                }               
            })
        }


        //得到查询的参数
        function queryParams1(params) {
            num1 += 1;
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: num1,  //页码
            };
            return temp;
        }
    </script>
</head>