TV.kanbanUI.git

parent: d984c2ca | 补丁 | 提交 | ignore whitespace

2021-05-27 457e7684fc636fff2b3963fd132281f7f5efedbd

质量分析、车间在制品、销售发货、来料收料看板 页面设计

2个文件已添加

2个文件已修改

	HDLackMats.html	12 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	HDPrctPlan.html	14 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	PurchaseReceipt.html	722 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	SalesDelivery.html	778 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 HDLackMats.html

@@ -284,11 +284,11 @@
            interval1=setInterval(function () {
                $("#tb_order").bootstrapTable('refresh');
            }, 10000);
            //根据窗口的大小变动图表 --- 重点
            window.onresize = function () {
                myChart1.resize();
                myChart2.resize();
                myChart3.resize();
            //根据浏览器大小改变大小
            window.onresize = () => {
                mychart1.resize();
                mychart2.resize();
                mychart3.resize();
            }
        })
        
@@ -701,7 +701,7 @@
    <div class="col-sm-4 right">
        <div class="col-sm-6 right">
            <ul id="cList">
                <li>状态：<span id="Stus"></span></li>
                <li style="font-size:24px;color: #3bff72;">状态</li>
                <li>总订单：<span id="OrderQty">0</span></li>
                <li>净需求：<span id="NetQty">0</span></li>
                <li>总库存：<span id="SumQty">0</span></li>

 HDPrctPlan.html

@@ -238,13 +238,13 @@
                ZQty=[];             //生产总效率趋势值数组
                Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7);
            }, 30000);
            //根据窗口的大小变动图表 --- 重点
            window.onresize = function () {
                myChart1.resize();
                myChart2.resize();
                myChart3.resize();
                myChart4.resize();
                myChart5.resize();
            //根据浏览器大小改变大小
            window.onresize = () => {
                mychart1.resize();
                mychart2.resize();
                mychart3.resize();
                mychart4.resize();
                mychart5.resize();
            }
        })
        

 PurchaseReceipt.html

New file
@@ -0,0 +1,722 @@
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>采购收货看板</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src='js/echarts.min.js'></script>
    <script src="js/bootstrap.min.js"></script>
    <script src='js/bootstrap-table.min.js'></script>
    <script src='js/bootstrap-table-zh-CN.min.js'></script>
    <script src="js/jquery.SuperSlide.2.1.3.js"></script>
    <script src='js/template.js'></script>
    <script src="js/jquery.qrcode.min.js"></script>
    <style>      
        .clock {
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            font-size: 20px;
            width: 450px;
            float: right;
            color: #fff;
            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;
            padding: 0px;
            list-style: none;
            text-align: right;
            margin-left: 15px;
            position: relative;
        }
        
        .clock ul li {
            display: inline;
            font-size: 24px;
            text-align: left;
            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;
            color: rgba(9, 209, 234, 1);
            text-align: center;
            background: url(img/img_little_new.png) center no-repeat;
            margin-bottom: 30px;
        }
        
        .col-sm-12 {
            position: relative;
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
        }
        
        .left{
            /* border: 1px solid #00c6ff; */
            height: 900px;
        }
        .right{
            /* border: 1px solid #00c6ff; */
            height: 300px;
        }
        
        
        
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-6,
        .col-sm-8 {
            position: relative;
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
        }
        
        
        #mychart1,
        #mychart2,
        #mychart3{
            width: 100%;
            border: none;
            height: 300px;
        }
        
        #cList {
            margin: 0% auto;
            color: #00c6ff;
        }
        
        #cList li {
            margin: 20px 0px;
            text-align:left;
            font-size: 18px;
            margin-left: 25%;
        }
        #cList0 {
            height: 900px;
            width: 3%;
            /* border: 1px solid #00c6ff; */
            float: left;
        }
        
        
        #cList1 {
            float: left;
        }
        
        #cList1 li {
            float: left;
            height: 900px;
            color: #00c6ff;
            font-size: 20px;
            /*文字居中*/
            text-align: center;
            /*display: flex;*/
        }
        
        #cList1 li span {
            /*文字居中*/
            display: inline-block;
            height: 100%;
            /*文字居中*/
            
            /*文字竖排*/
            writing-mode: vertical-lr;
            /*从左向右 从右向左是 writing-mode: vertical-rl;*/
            writing-mode: tb-lr;
            /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
        }
        #cList2 {
            height: 900px;
            width: 97%;
            /* border: 1px solid #00c6ff; */
            float: left;
        }
        
        table tr td {
            text-align: center;
            vertical-align: middle !important;
            /*border: 1px solid #464646;*/
            border-right: 0px;
            height: 40px;
            font-size: 16px;
            font-family: '黑体';
            font-family: Arial;
            border: none;
        }
        
        .table>caption+thead>tr:first-child>td,
        .table>caption+thead>tr:first-child>th,
        .table>colgroup+thead>tr:first-child>td,
        .table>colgroup+thead>tr:first-child>th,
        .table>thead:first-child>tr:first-child>td,
        .table>thead:first-child>tr:first-child>th {
            background-color: #000;
            color: #3bff72;
            
        }
        
        .fixed-table-container tbody td .th-inner,
        .fixed-table-container thead th .th-inner {
            font-size: 15px;
            color: #09d1ea;
            padding: 20px 0 15px 0;
        }
        
        #tb_order tr td {
            text-align: center;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            /* font-family: '黑体'; */
            color: #a6a8ae;
            font-family: Arial;
            /* border: 1px solid #464646; */
            border: none;
        }
        
        .bootstrap-table .table {
            border-radius: none
        }
        
        th {
            background-color: transparent !important;
        }
        
        td {
            background-color: transparent;
        }
        
        tr {
            background-color: transparent
        }
        
        #tb_order tr:nth-child(even) {
            background: #080c1c;
        }
        
        .fixed-table-container tbody td .th-inner,
        .fixed-table-container thead th .th-inner {
            text-align: left;
        }
        
        .progress {
            background-color: darkblue;
        }
        
        #tb_order tr:nth-child(even) {
            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 num = 0;
        var ReachProgress;           //达成率
        var ZNoProgress;             //总不良率
        
        var ToDayDt=[];              //近日达成率对比时间数组
        var OrderQty=[];             //近日达成率对比订单总量数数组
        var ZSQty=[];               //近日达成率对比总收料量数数组
        $(document).ready(function () {
            // 创建两个变量，一个数组中的月和日的名称
            var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
            setInterval(function () {
                var date1 = new Date;
                var year = date1.getFullYear();
                var month = date1.getMonth();
                var day = date1.getDate();
                var hh = date1.getHours();
                var mm = date1.getMinutes();
                var ss = date1.getSeconds();
                var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
                var Stamp = new Date();
                
                
                $('#Date').html(year + "&nbsp;年" + " " + monthNames[month] + ' ' + day + "&nbsp;日&nbsp;&nbsp;" + ' ' + 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 () {
            var mychart1 = echarts.init(document.getElementById('mychart1'));
            var mychart2 = echarts.init(document.getElementById('mychart2'));
            var mychart3 = echarts.init(document.getElementById('mychart3'));
            
            Chart(mychart1,mychart2,mychart3);
            DataTable();
            // 定时器
            interval = setInterval(function () {
                num = 0;
                ToDayDt=[];              //今日不良对比时间数组
                OrderQty=[];              //今日不良对比合格数数组
                ZSQty=[];               //今日不良对比不良数数组
                Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
            }, 20000);
            interval1=setInterval(function () {
                $("#tb_order").bootstrapTable('refresh');
            }, 10000);
            //根据浏览器大小改变大小
            window.onresize = () => {
                mychart1.resize();
                mychart2.resize();
                mychart3.resize();
            }
        })
        
        function Chart(mychart1,mychart2,mychart3){
            $.ajax({
                url: "http://192.168.2.152:80/api/loaddata/PurchaseReceiptData",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                data:{"Tag":0,"limit":10,"offset":1},
                success: function (data) { 
                    $("#OrderQty").html(parseFloat(data.data[0][0].ZDQty).toFixed(0));
                    $("#ZSQty").html(parseFloat(data.data[1][0].ZSHQty).toFixed(0));
                    $("#DaySupQty").html(parseFloat(data.data[0][0].ZDQty-data.data[1][0].ZSHQty<0?0:data.data[0][0].ZDQty-data.data[1][0].ZSHQty).toFixed(0));
                    $("#ReachProgress").html(parseFloat(parseFloat(data.data[1][0].ZSHQty)/parseFloat(data.data[0][0].ZDQty==0?1:data.data[0][0].ZDQty).toFixed(0)*100+"%").toFixed(0));
                    $("#NoProgress").html(parseFloat(data.data[2][0].NoQty)/parseFloat(data.data[1][0].ZSHQty==0?1:data.data[1][0].ZSHQty).toFixed(0)*100+"%");
                    ReachProgress=parseFloat(parseFloat(data.data[1][0].ZSHQty)/parseFloat(data.data[0][0].ZDQty==0?1:data.data[0][0].ZDQty).toFixed(0)*100);
                    ZNoProgress=parseFloat(parseFloat(data.data[2][0].NoQty)/parseFloat(data.data[1][0].ZSHQty==0?1:data.data[1][0].ZSHQty).toFixed(0)*100);
                    
                    
                    //近日达成率
                    $.each(data.data[3], function (index, val) {
                        ToDayDt.push(val.hour.substring(5));
                        OrderQty.push(parseFloat(val.ZDQty).toFixed(0));
                        ZSQty.push(parseFloat(val.ZSHQty).toFixed(0));                   
                    });
                },
                error: function (data) {
                    
                }
            })
            
            const colorList = ['#47A2FF', '#ff9900']
            option1 = {
                title: [
                {
                    text: '',
                    subtext: ReachProgress+'%',
                    textStyle: {
                        fontSize: 16,
                        color: '#999',
                        lineHeight: 20
                    },
                    subtextStyle: {
                        fontSize: 28,
                        color: '#00c6ff'
                    },
                    textAlign: 'center',
                    left: '50%',
                    top: '50%'
                },
                {
                    show: true,
                    text: '达成率分析',
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: '16',
                    },
                    textAlign: 'center',
                    left: '50%',
                    top: '5%'
                }
                ],
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    type: 'scroll',
                    icon: 'pin',
                    show: false
                },
                color: colorList,
                series: [
                {
                    name: '占比',
                    type: 'pie',
                    radius: [50, 80],
                    center: ['50%', '50%'],
                    center: ['50%', '60%'], 
                    avoidLabelOverlap: false,
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: '#000000'
                    },
                    data: [
                    { name: '', value: ReachProgress },
                    { name: '', value: 100-ReachProgress }
                    ],
                }
                ]
            };
            
            option2 = {
                title: [
                {
                    text: '',
                    subtext: ZNoProgress+'%',
                    textStyle: {
                        fontSize: 16,
                        color: '#999',
                        lineHeight: 20
                    },
                    subtextStyle: {
                        fontSize: 28,
                        color: '#00c6ff'
                    },
                    textAlign: 'center',
                    left: '50%',
                    top: '50%'
                },
                {
                    show: true,
                    text: '来料总不良率',
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: '16',
                    },
                    textAlign: 'center',
                    left: '50%',
                    top: '5%'
                }
                ],
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    type: 'scroll',
                    icon: 'pin',
                    show: false
                },
                color: colorList,
                series: [
                {
                    name: '占比',
                    type: 'pie',
                    radius: [50, 80],
                    center: ['50%', '50%'],
                    center: ['50%', '60%'], 
                    avoidLabelOverlap: false,
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: '#000000'
                    },
                    data: [
                    { name: '', value: ZNoProgress },
                    { name: '', value: 100-ZNoProgress }
                    ],
                }
                ]
            };
            
            option3 = {
                title: {
                    text: '近日达成率对比',
                    left: '0',
                    top: 2,
                    textStyle: {
                        fontSize: 20,
                        color: '#00c6ff',
                        fontFamily: "微软雅黑"
                    },
                },
                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                tooltip: {
                    
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                legend: {
                    left: 'right',
                    data: ['总单量', '总收料'],
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 16,
                        fontFamily: "微软雅黑"
                    }
                    
                },
                xAxis: [
                {
                    type: 'category',
                    data:ToDayDt,
                    axisTick: {
                        alignWithLabel: true
                    },
                    
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00c6ff',
                            type: 'solid', //设置网格线类型 dotted：虚线   solid:实线
                            width: 1, //隐藏y轴
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    }
                }
                ],
                yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false,
                        
                    },
                    splitLine: { //网格线
                        lineStyle: {
                            color: '#00c6ff',
                            
                        },
                        show: true //隐藏或显示
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    }
                }
                ],
                series: [
                {
                    name: '总单量',
                    type: 'bar',
                    barWidth: 15,
                    data: OrderQty
                },
                {
                    name: '总收料',
                    type: 'bar',
                    barWidth: 15,
                    data: ZSQty
                }
                ]
            };
            
            
            mychart1.setOption(option1);
            mychart2.setOption(option2);
            mychart3.setOption(option3);
        }
        
        function DataTable() {
            
            $('#tb_order').bootstrapTable({
                url: 'http://192.168.2.152:80/api/loaddata/PurchaseReceiptTableData',
                //data: dataJson,
                method: 'get',                      //请求方式（*）
                dataType: "json",
                queryParams :queryParams,
                striped: false,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortable: false, //是否启用排序
                search: false,   //是否启用搜索框
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 20,                       //每页的记录行数（*）
                pageList: [20],                     //可供选择的每页的行数（*）
                strictSearch: false,                //设置为 true启用 全匹配搜索，否则为模糊搜索
                clickToSelect: true,                //是否启用点击选中行
                singleSelect: true,                  //设置True 将禁止多选
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                
                columns: [
                { field: 'HBillNo', title: '收料单号', align: "left" },
                { field: 'HNumber', title: '物料编码', align: "left" },
                { field: 'HName', title: '物料名称', align: "left", cellStyle: function (value, row, index) {
                    return {
                        css: {
                            "min-width": "100px",
                            "white-space": "nowrap",
                            "text-overflow": "ellipsis",
                            "overflow": "hidden",
                            "max-width": "120px"
                        }
                    }
                }},
                { field: 'HModel', title: '规格型号', align: "left", cellStyle: function (value, row, index) {
                    return {
                        css: {
                            "min-width": "100px",
                            "white-space": "nowrap",
                            "text-overflow": "ellipsis",
                            "overflow": "hidden",
                            "max-width": "120px"
                        }
                    }
                }},
                { field: 'HSourceBillNo', title: '采购订单号', align: "left" },
                { field: 'HQty', title: '订单量', align: "left" , formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                }},
                { field: 'SHQty', title: '应收量', align: "left", formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                } },
                { field: 'HRelationQty', title: '入库量', align: "left", formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                } },
                { field: 'HInStockQty', title: '已收料数量', align: "left",hidden:true, formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                } },
                { field: 'OrderSupsQty', title: '订单剩余', align: "left" , formatter: function (value, row, index) {
                    var res = row.HQty -row.HInStockQty;
                    return parseFloat(res).toFixed(2);
                }},
                { field: 'NotOutQty', title: '未入库量', align: "left" , formatter: function (value, row, index) {
                    var res = row.SHQty -row.HRelationQty;
                    return parseFloat(res).toFixed(2);
                }},
                { field: 'HSTATUS', title: '状态', align: "left",formatter: function (value, row, index) { 
                    return "已送货";       
                } },
                {
                    field: 'Progress', title: '进度', align: "left",width:100, formatter: function (value, row, index) {
                        var res = 100 * row.HRelationQty / row.SHQty;
                        //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(1) + "%</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(1) + "%';text-align:center;'></div></div></div>";
                    }
                }
                ],
                onClickRow: function (row, $element) {
                    
                },
                onCheck: function (row, $element) {
                    
                },
                onLoadSuccess: function (row) {
                    var num_total = (row.total)/ 20
                    if (num >= num_total) {
                        num = 0
                    }
                    //var a = $('#tb_order').bootstrapTable('getSelections');
                }
                
            })
        }
        //得到查询的参数
        function queryParams(params) {
            num += 1;
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                Tag:1,
                limit: params.limit,   //页面大小
                offset: num,  //页码
            };
            return temp;
        }
    </script>
</head>

<body>
    <div class='title'>采购收货看板</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-8 left">
        <div id="cList0">
            <ul id="cList1">
                <li><span>待收料列表</span></li>
            </ul>
        </div>
        <div id="cList2">
            <table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
        </div> 
    </div>
    <div class="col-sm-4 right">
        <div class="col-sm-6 right">
            <ul id="cList">
                <li style="font-size:24px;color:#3bff72">状态</li>
                <li>总订单：<span id="OrderQty">0</span></li>
                <li>总收料：<span id="ZSQty">0</span></li>
                <li>今日剩余：<span id="DaySupQty">0</span></li>
                <li>达成率：<span id="ReachProgress">0</span></li>
                <li>总不良率：<span id="NoProgress">0</span></li>
            </ul>
        </div>
        <div class="col-sm-6 right">
            <div id="mychart1"></div>
        </div>
    </div>
    <div class="col-sm-4 right">
        <div id="mychart2"></div>
    </div>
    <div class="col-sm-4 right">
        <div id="mychart3"></div>
    </div>
    
</body>

</html>

 SalesDelivery.html

New file
@@ -0,0 +1,778 @@
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>销售发货看板</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src='js/echarts.min.js'></script>
    <script src="js/bootstrap.min.js"></script>
    <script src='js/bootstrap-table.min.js'></script>
    <script src='js/bootstrap-table-zh-CN.min.js'></script>
    <script src="js/jquery.SuperSlide.2.1.3.js"></script>
    <script src='js/template.js'></script>
    <script src="js/jquery.qrcode.min.js"></script>
    <style>      
        .clock {
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            font-size: 20px;
            width: 450px;
            float: right;
            color: #fff;
            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;
            padding: 0px;
            list-style: none;
            text-align: right;
            margin-left: 15px;
            position: relative;
        }
        
        .clock ul li {
            display: inline;
            font-size: 24px;
            text-align: left;
            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;
            color: rgba(9, 209, 234, 1);
            text-align: center;
            background: url(img/img_little_new.png) center no-repeat;
            margin-bottom: 30px;
        }
        
        .col-sm-12 {
            position: relative;
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
        }
        
        .left{
            /* border: 1px solid #00c6ff; */
            height: 900px;
        }
        .right{
            /* border: 1px solid #00c6ff; */
            height: 300px;
        }
        
        
        
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-6,
        .col-sm-8 {
            position: relative;
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
        }
        
        
        #mychart1,
        #mychart2,
        #mychart3{
            width: 100%;
            border: none;
            height: 300px;
        }
        
        #cList {
            margin: 0% auto;
            color: #00c6ff;
        }
        
        #cList li {
            margin: 20px 0px;
            text-align:left;
            font-size: 18px;
            margin-left: 25%;
        }
        
        #cList0 {
            height: 900px;
            width: 3%;
            /* border: 1px solid #00c6ff; */
            float: left;
        }
        
        #cList1 {
            float: left;
        }
        
        #cList1 li {
            float: left;
            height: 900px;
            color: #00c6ff;
            font-size: 20px;
            /*文字居中*/
            text-align: center;
            /*display: flex;*/
        }
        
        #cList1 li span {
            /*文字居中*/
            display: inline-block;
            height: 100%;
            /*文字居中*/
            
            /*文字竖排*/
            writing-mode: vertical-lr;
            /*从左向右 从右向左是 writing-mode: vertical-rl;*/
            writing-mode: tb-lr;
            /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
        }
        #cList2 {
            height: 900px;
            width: 97%;
            /* border: 1px solid #00c6ff; */
            float: left;
        }
        table tr td {
            text-align: center;
            vertical-align: middle !important;
            /*border: 1px solid #464646;*/
            border-right: 0px;
            height: 40px;
            font-size: 16px;
            font-family: '黑体';
            font-family: Arial;
            border: none;
        }
        
        .table>caption+thead>tr:first-child>td,
        .table>caption+thead>tr:first-child>th,
        .table>colgroup+thead>tr:first-child>td,
        .table>colgroup+thead>tr:first-child>th,
        .table>thead:first-child>tr:first-child>td,
        .table>thead:first-child>tr:first-child>th {
            background-color: #000;
            color: #3bff72;
            
        }
        
        .fixed-table-container tbody td .th-inner,
        .fixed-table-container thead th .th-inner {
            font-size: 15px;
            color: #09d1ea;
            padding: 20px 0 15px 0;
        }
        
        #tb_order tr td {
            text-align: center;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            /* font-family: '黑体'; */
            color: #a6a8ae;
            font-family: Arial;
            /* border: 1px solid #464646; */
            border: none;
        }
        
        .bootstrap-table .table {
            border-radius: none
        }
        
        th {
            background-color: transparent !important;
        }
        
        td {
            background-color: transparent;
        }
        
        tr {
            background-color: transparent
        }
        
        #tb_order tr:nth-child(even) {
            background: #080c1c;
        }
        
        .fixed-table-container tbody td .th-inner,
        .fixed-table-container thead th .th-inner {
            text-align: left;
        }
        
        .progress {
            background-color: darkblue;
        }
        
        #tb_order tr:nth-child(even) {
            background: #000000;
        }
        
        .pull-right,.fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
            display: none;
        }
        
    </style>
    <script type="text/javascript">
        //参数配置
        var  HouseCode='509'; //仓库编码
        
        
        var interval;//计时器
        var interval1;//计时器
        var num = 0;
        var ReachProgress=0;         //达成率
        var FHDt=[];              //发货趋势时间数组
        var FHQty=[];             //发货趋势时间值数组      
        
        var ToDayDt=[];              //近日达成率对比时间数组
        var OrderQty=[];             //近日达成率对比订单总量数数组
        var FHSQty=[];               //近日达成率对比总发货量数数组
        $(document).ready(function () {
            // 创建两个变量，一个数组中的月和日的名称
            var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
            setInterval(function () {
                var date1 = new Date;
                var year = date1.getFullYear();
                var month = date1.getMonth();
                var day = date1.getDate();
                var hh = date1.getHours();
                var mm = date1.getMinutes();
                var ss = date1.getSeconds();
                var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
                var Stamp = new Date();
                
                
                $('#Date').html(year + "&nbsp;年" + " " + monthNames[month] + ' ' + day + "&nbsp;日&nbsp;&nbsp;" + ' ' + 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 () {
            var mychart1 = echarts.init(document.getElementById('mychart1'));
            var mychart2 = echarts.init(document.getElementById('mychart2'));
            var mychart3 = echarts.init(document.getElementById('mychart3'));
            
            Chart(mychart1,mychart2,mychart3);
            DataTable();
            // 定时器
            interval = setInterval(function () {
                //num = 0;
                FHDt=[];
                FHQty=[]; 
                ToDayDt=[]; 
                OrderQty=[];
                FHSQty=[]; 
                Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
            }, 20000);
            interval1=setInterval(function () {
                $("#tb_order").bootstrapTable('refresh');
            }, 10000);
            //根据浏览器大小改变大小
            window.onresize = () => {
                mychart1.resize();
                mychart2.resize();
                mychart3.resize();
            }
        })
        
        function Chart(mychart1,mychart2,mychart3){
            $.ajax({
                url: "http://192.168.2.152:80/api/loaddata/SalesDeliveryData",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                data:{"Tag":0,"limit":10,"offset":1},
                success: function (data) { 
                    
                    $("#OrderQty").html(parseFloat(data.data[0][0].ZDQty).toFixed(0));
                    $("#FHQty").html(parseFloat(data.data[1][0].FHQty).toFixed(0));
                    $("#ReachProgress").html(parseFloat(data.data[1][0].FHQty)/parseFloat(data.data[0][0].ZDQty==0?1:data.data[0][0].ZDQty).toFixed(0)*100+"%");
                    $("#DaySupQty").html(parseFloat(data.data[0][0].ZDQty-data.data[1][0].FHQty<0?0:data.data[0][0].ZDQty-data.data[1][0].FHQty).toFixed(0));
                    ReachProgress=parseFloat(data.data[1][0].FHQty)/parseFloat(data.data[0][0].ZDQty==0?1:data.data[0][0].ZDQty).toFixed(0)*100;
                    //发货趋势
                    $.each(data.data[2], function (index, val) {
                        FHDt.push(val.hour.substring(5));
                        FHQty.push(parseFloat(val.FHQty).toFixed(0));                   
                    });
                    
                    //近日达成率
                    $.each(data.data[2], function (index, val) {
                        ToDayDt.push(val.hour.substring(5));
                        OrderQty.push(parseFloat(val.ZDQty).toFixed(0));
                        FHSQty.push(parseFloat(val.FHQty).toFixed(0));                   
                    });
                },
                error: function (data) {
                    
                }
            })
            
            
            const colorList = ['#47A2FF', '#ff9900']
            option1 = {
                title: [
                {
                    text: '',
                    subtext: ReachProgress+'%',
                    textStyle: {
                        fontSize: 16,
                        color: '#999',
                        lineHeight: 20
                    },
                    subtextStyle: {
                        fontSize: 28,
                        color: '#00c6ff'
                    },
                    textAlign: 'center',
                    left: '50%',
                    top: '50%'
                },
                {
                    show: true,
                    text: '达成率分析',
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: '16',
                    },
                    textAlign: 'center',
                    left: '50%',
                    top: '5%'
                }
                ],
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    type: 'scroll',
                    icon: 'pin',
                    show: false
                },
                color: colorList,
                series: [
                {
                    name: '占比',
                    type: 'pie',
                    radius: [50, 80],
                    center: ['50%', '50%'],
                    center: ['50%', '60%'], 
                    avoidLabelOverlap: false,
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: '#000000'
                    },
                    data: [
                    { name: '', value: ReachProgress },
                    { name: '', value: 100-ReachProgress }
                    ],
                }
                ]
            };
            
            option2 = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}月 : {c}万"
                },
                grid: {
                    left: '25',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: FHDt,   //时间点数据
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00c6ff',
                        },
                    },
                    axisTick: {
                        show: true,
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00c6ff',
                            width: 0, //隐藏y轴
                        }
                    },
                    splitLine: { //网格线
                        lineStyle: {
                            type: 'dotted', //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: false //隐藏或显示
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    },
                    splitNumber: 5
                }],
                title: {
                    show: true,
                    text: '发货趋势图(按日期显示)',
                    x: 'left',
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 18,
                        fotweight: 'normal',
                        fontFamily: "微软雅黑"
                    },
                    textAlign: 'left',
                    left: '20',
                    top: '0%'
                },
                legend: {
                    icon: 'line',
                    data: ['小时产能'],
                    x:'right',      //可设定图例在左、右、居中
                    y:'top',     //可设定图例在上、下、居中
                    //padding:[0,0,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 20,
                        fontFamily: "微软雅黑"
                    }
                },
                series: [
                {
                    name: '小时产能',
                    data: FHQty,  //时间点值
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'orange',
                            lineStyle: {
                                width: 4, //设置线条粗细
                                shadowColor: 'rgba(255, 94, 91,.1)',
                                shadowOffsetX: 3,
                                shadowOffsetY: 5,
                            }
                        },
                    },
                    textStyle: {
                        fontFamily: "微软雅黑"
                    }
                },
                ]
            }
            
            option3 = {
                title: {
                    text: '近日达成率对比',
                    left: '0',
                    top: 2,
                    textStyle: {
                        fontSize: 20,
                        color: '#00c6ff',
                        fontFamily: "微软雅黑"
                    },
                },
                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                tooltip: {
                    
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                legend: {
                    left: 'right',
                    data: ['总订单', '总发货'],
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 16,
                        fontFamily: "微软雅黑"
                    }
                    
                },
                xAxis: [
                {
                    type: 'category',
                    data:ToDayDt,
                    axisTick: {
                        alignWithLabel: true
                    },
                    
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00c6ff',
                            type: 'solid', //设置网格线类型 dotted：虚线   solid:实线
                            width: 1, //隐藏y轴
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    }
                }
                ],
                yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false,
                        
                    },
                    splitLine: { //网格线
                        lineStyle: {
                            color: '#00c6ff',
                            
                        },
                        show: true //隐藏或显示
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    }
                }
                ],
                series: [
                {
                    name: '总订单',
                    type: 'bar',
                    barWidth: 15,
                    data: OrderQty
                },
                {
                    name: '总发货',
                    type: 'bar',
                    barWidth: 15,
                    data: FHSQty
                }
                ]
            };
            
            
            mychart1.setOption(option1);
            mychart2.setOption(option2);
            mychart3.setOption(option3);
        }
        
        function DataTable() {
            
            $('#tb_order').bootstrapTable({
                url: 'http://192.168.2.152:80/api/loaddata/SalesDeliveryTableData',
                //data: datajson,
                method: 'get',                      //请求方式（*）
                dataType: "json",
                queryParams :queryParams,
                striped: false,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortable: false, //是否启用排序
                search: false,   //是否启用搜索框
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 20,                       //每页的记录行数（*）
                pageList: [20],                     //可供选择的每页的行数（*）
                strictSearch: false,                //设置为 true启用 全匹配搜索，否则为模糊搜索
                clickToSelect: true,                //是否启用点击选中行
                singleSelect: true,                  //设置True 将禁止多选
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                
                columns: [
                { field: 'HBillNo', title: '发货单号', align: "left" },
                { field: 'HNumber', title: '物料编码', align: "left" },
                { field: 'HName', title: '物料名称', align: "left", cellStyle: function (value, row, index) {
                    return {
                        css: {
                            "min-width": "100px",
                            "white-space": "nowrap",
                            "text-overflow": "ellipsis",
                            "overflow": "hidden",
                            "max-width": "120px"
                        }
                    }
                }},
                { field: 'HModel', title: '规格型号', align: "left", cellStyle: function (value, row, index) {
                    return {
                        css: {
                            "min-width": "100px",
                            "white-space": "nowrap",
                            "text-overflow": "ellipsis",
                            "overflow": "hidden",
                            "max-width": "120px"
                        }
                    }
                }},
                { field: 'HSourceBillNo', title: '销售订单号', align: "left" },
                { field: 'HQty', title: '订单量', align: "left" , formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                }},
                { field: 'FHQty', title: '应发量', align: "left", formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                } },
                { field: 'HRelationQty', title: '出库量', align: "left", formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                } },
                { field: 'HOutStockQty', title: '已发货数量', align: "left",hidden:true, formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                } },
                { field: 'OrderSupsQty', title: '订单剩余', align: "left" , formatter: function (value, row, index) {
                    var res = row.HQty -row.HOutStockQty;
                    return parseFloat(res).toFixed(2);
                }},
                { field: 'NotOutQty', title: '未出库量', align: "left" , formatter: function (value, row, index) {
                    var res = row.FHQty -row.HRelationQty;
                    return parseFloat(res).toFixed(2);
                }},
                { field: 'HSTATUS', title: '状态', align: "left",formatter: function (value, row, index) { 
                    if(row.HRelationQty>0){
                        return "已发货";
                    }
                    else{
                        return "未发货";
                    }                  
                } },
                {
                    field: 'Progress', title: '进度', align: "left",width:100, formatter: function (value, row, index) {
                        var res = 100 * row.HRelationQty / row.FHQty;
                        //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(1) + "%</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(1) + "%';text-align:center;'></div></div></div>";
                    }
                }
                ],
                onClickRow: function (row, $element) {
                    
                },
                onCheck: function (row, $element) {
                    
                },
                onLoadSuccess: function (row) {
                    var num_total = (row.total)/ 20
                    if (num >= num_total) {
                        num = 0
                    }
                    //var a = $('#tb_order').bootstrapTable('getSelections');
                }
                
            })
        }
        //得到查询的参数
        function queryParams(params) {
            num += 1;
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                Tag:1,
                limit: params.limit,   //页面大小
                offset: num,  //页码
            };
            return temp;
        }
    </script>
</head>

<body>
    <div class='title'>销售发货看板</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-8 left">
        <div id="cList0">
            <ul id="cList1">
                <li><span>待发货列表</span></li>
            </ul>
        </div>
        <div id="cList2">
            <table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
        </div> 
    </div>
    <div class="col-sm-4 right">
        <div class="col-sm-6 right">
            <ul id="cList">
                <li style="font-size:24px;color:#3bff72">状态</li>
                <li>总单量：<span id="OrderQty">0</span></li>
                <li>总发货：<span id="FHQty">0</span></li>
                <li>达成率：<span id="ReachProgress">0</span></li>
                <li>今日剩余：<span id="DaySupQty">0</span></li>
            </ul>
        </div>
        <div class="col-sm-6 right">
            <div id="mychart1"></div>
        </div>
    </div>
    <div class="col-sm-4 right">
        <div id="mychart2"></div>
    </div>
    <div class="col-sm-4 right">
        <div id="mychart3"></div>
    </div>
    
</body>

</html>

			@@ -284,11 +284,11 @@
			interval1=setInterval(function () {
			$("#tb_order").bootstrapTable('refresh');
			}, 10000);
			//根据窗口的大小变动图表 --- 重点
			window.onresize = function () {
			myChart1.resize();
			myChart2.resize();
			myChart3.resize();
			//根据浏览器大小改变大小
			window.onresize = () => {
			mychart1.resize();
			mychart2.resize();
			mychart3.resize();
			}
			})

			@@ -701,7 +701,7 @@
			<div class="col-sm-4 right">
			<div class="col-sm-6 right">
			<ul id="cList">
			<li>状态：<span id="Stus"></span></li>
			<li style="font-size:24px;color: #3bff72;">状态</li>
			<li>总订单：<span id="OrderQty">0</span></li>
			<li>净需求：<span id="NetQty">0</span></li>
			<li>总库存：<span id="SumQty">0</span></li>

			@@ -238,13 +238,13 @@
			ZQty=[]; //生产总效率趋势值数组
			Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7);
			}, 30000);
			//根据窗口的大小变动图表 --- 重点
			window.onresize = function () {
			myChart1.resize();
			myChart2.resize();
			myChart3.resize();
			myChart4.resize();
			myChart5.resize();
			//根据浏览器大小改变大小
			window.onresize = () => {
			mychart1.resize();
			mychart2.resize();
			mychart3.resize();
			mychart4.resize();
			mychart5.resize();
			}
			})

New file
			@@ -0,0 +1,722 @@
			<!DOCTYPE html>
			<html lang="zh-cn">

			<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<meta http-equiv="X-UA-Compatible" content="ie=edge">
			<title>采购收货看板</title>
			<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
			<link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
			<link rel="stylesheet" type="text/css" href="css/index.css">
			<script src="js/jquery.min.js"></script>
			<script src='js/echarts.min.js'></script>
			<script src="js/bootstrap.min.js"></script>
			<script src='js/bootstrap-table.min.js'></script>
			<script src='js/bootstrap-table-zh-CN.min.js'></script>
			<script src="js/jquery.SuperSlide.2.1.3.js"></script>
			<script src='js/template.js'></script>
			<script src="js/jquery.qrcode.min.js"></script>
			<style>
			.clock {
			font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
			font-size: 20px;
			width: 450px;
			float: right;
			color: #fff;
			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;
			padding: 0px;
			list-style: none;
			text-align: right;
			margin-left: 15px;
			position: relative;
			}

			.clock ul li {
			display: inline;
			font-size: 24px;
			text-align: left;
			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;
			color: rgba(9, 209, 234, 1);
			text-align: center;
			background: url(img/img_little_new.png) center no-repeat;
			margin-bottom: 30px;
			}

			.col-sm-12 {
			position: relative;
			min-height: 1px;
			padding-right: 0px;
			padding-left: 0px;
			}

			.left{
			/* border: 1px solid #00c6ff; */
			height: 900px;
			}
			.right{
			/* border: 1px solid #00c6ff; */
			height: 300px;
			}



			.col-sm-12,
			.col-sm-2,
			.col-sm-3,
			.col-sm-4,
			.col-sm-6,
			.col-sm-8 {
			position: relative;
			min-height: 1px;
			padding-right: 0px;
			padding-left: 0px;
			}


			#mychart1,
			#mychart2,
			#mychart3{
			width: 100%;
			border: none;
			height: 300px;
			}

			#cList {
			margin: 0% auto;
			color: #00c6ff;
			}

			#cList li {
			margin: 20px 0px;
			text-align:left;
			font-size: 18px;
			margin-left: 25%;
			}
			#cList0 {
			height: 900px;
			width: 3%;
			/* border: 1px solid #00c6ff; */
			float: left;
			}


			#cList1 {
			float: left;
			}

			#cList1 li {
			float: left;
			height: 900px;
			color: #00c6ff;
			font-size: 20px;
			/文字居中/
			text-align: center;
			/display: flex;/
			}

			#cList1 li span {
			/文字居中/
			display: inline-block;
			height: 100%;
			/文字居中/

			/文字竖排/
			writing-mode: vertical-lr;
			/从左向右从右向左是 writing-mode: vertical-rl;/
			writing-mode: tb-lr;
			/IE浏览器的从左向右从右向左是 writing-mode: tb-rl；/
			}
			#cList2 {
			height: 900px;
			width: 97%;
			/* border: 1px solid #00c6ff; */
			float: left;
			}

			table tr td {
			text-align: center;
			vertical-align: middle !important;
			/border: 1px solid #464646;/
			border-right: 0px;
			height: 40px;
			font-size: 16px;
			font-family: '黑体';
			font-family: Arial;
			border: none;
			}

			.table>caption+thead>tr:first-child>td,
			.table>caption+thead>tr:first-child>th,
			.table>colgroup+thead>tr:first-child>td,
			.table>colgroup+thead>tr:first-child>th,
			.table>thead:first-child>tr:first-child>td,
			.table>thead:first-child>tr:first-child>th {
			background-color: #000;
			color: #3bff72;

			}

			.fixed-table-container tbody td .th-inner,
			.fixed-table-container thead th .th-inner {
			font-size: 15px;
			color: #09d1ea;
			padding: 20px 0 15px 0;
			}

			#tb_order tr td {
			text-align: center;
			height: 32px;
			line-height: 32px;
			font-size: 14px;
			/* font-family: '黑体'; */
			color: #a6a8ae;
			font-family: Arial;
			/* border: 1px solid #464646; */
			border: none;
			}

			.bootstrap-table .table {
			border-radius: none
			}

			th {
			background-color: transparent !important;
			}

			td {
			background-color: transparent;
			}

			tr {
			background-color: transparent
			}

			#tb_order tr:nth-child(even) {
			background: #080c1c;
			}

			.fixed-table-container tbody td .th-inner,
			.fixed-table-container thead th .th-inner {
			text-align: left;
			}

			.progress {
			background-color: darkblue;
			}

			#tb_order tr:nth-child(even) {
			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 num = 0;
			var ReachProgress; //达成率
			var ZNoProgress; //总不良率

			var ToDayDt=[]; //近日达成率对比时间数组
			var OrderQty=[]; //近日达成率对比订单总量数数组
			var ZSQty=[]; //近日达成率对比总收料量数数组
			$(document).ready(function () {
			// 创建两个变量，一个数组中的月和日的名称
			var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
			setInterval(function () {
			var date1 = new Date;
			var year = date1.getFullYear();
			var month = date1.getMonth();
			var day = date1.getDate();
			var hh = date1.getHours();
			var mm = date1.getMinutes();
			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 () {
			var mychart1 = echarts.init(document.getElementById('mychart1'));
			var mychart2 = echarts.init(document.getElementById('mychart2'));
			var mychart3 = echarts.init(document.getElementById('mychart3'));

			Chart(mychart1,mychart2,mychart3);
			DataTable();
			// 定时器
			interval = setInterval(function () {
			num = 0;
			ToDayDt=[]; //今日不良对比时间数组
			OrderQty=[]; //今日不良对比合格数数组
			ZSQty=[]; //今日不良对比不良数数组
			Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
			}, 20000);
			interval1=setInterval(function () {
			$("#tb_order").bootstrapTable('refresh');
			}, 10000);
			//根据浏览器大小改变大小
			window.onresize = () => {
			mychart1.resize();
			mychart2.resize();
			mychart3.resize();
			}
			})

			function Chart(mychart1,mychart2,mychart3){
			$.ajax({
			url: "http://192.168.2.152:80/api/loaddata/PurchaseReceiptData",
			dataType: "JSON",
			async: false,//使用同步的方式,true为异步方式
			type: "Get",
			data:{"Tag":0,"limit":10,"offset":1},
			success: function (data) {
			$("#OrderQty").html(parseFloat(data.data[0][0].ZDQty).toFixed(0));
			$("#ZSQty").html(parseFloat(data.data[1][0].ZSHQty).toFixed(0));
			$("#DaySupQty").html(parseFloat(data.data[0][0].ZDQty-data.data[1][0].ZSHQty<0?0:data.data[0][0].ZDQty-data.data[1][0].ZSHQty).toFixed(0));
			$("#ReachProgress").html(parseFloat(parseFloat(data.data[1][0].ZSHQty)/parseFloat(data.data[0][0].ZDQty==0?1:data.data[0][0].ZDQty).toFixed(0)*100+"%").toFixed(0));
			$("#NoProgress").html(parseFloat(data.data[2][0].NoQty)/parseFloat(data.data[1][0].ZSHQty==0?1:data.data[1][0].ZSHQty).toFixed(0)*100+"%");
			ReachProgress=parseFloat(parseFloat(data.data[1][0].ZSHQty)/parseFloat(data.data[0][0].ZDQty==0?1:data.data[0][0].ZDQty).toFixed(0)*100);
			ZNoProgress=parseFloat(parseFloat(data.data[2][0].NoQty)/parseFloat(data.data[1][0].ZSHQty==0?1:data.data[1][0].ZSHQty).toFixed(0)*100);


			//近日达成率
			$.each(data.data[3], function (index, val) {
			ToDayDt.push(val.hour.substring(5));
			OrderQty.push(parseFloat(val.ZDQty).toFixed(0));
			ZSQty.push(parseFloat(val.ZSHQty).toFixed(0));
			});
			},
			error: function (data) {

			}
			})

			const colorList = ['#47A2FF', '#ff9900']
			option1 = {
			title: [
			{
			text: '',
			subtext: ReachProgress+'%',
			textStyle: {
			fontSize: 16,
			color: '#999',
			lineHeight: 20
			},
			subtextStyle: {
			fontSize: 28,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '50%'
			},
			{
			show: true,
			text: '达成率分析',
			textStyle: {
			color: '#00c6ff',
			fontSize: '16',
			},
			textAlign: 'center',
			left: '50%',
			top: '5%'
			}
			],
			tooltip: {
			trigger: 'item',
			},
			legend: {
			type: 'scroll',
			icon: 'pin',
			show: false
			},
			color: colorList,
			series: [
			{
			name: '占比',
			type: 'pie',
			radius: [50, 80],
			center: ['50%', '50%'],
			center: ['50%', '60%'],
			avoidLabelOverlap: false,
			label: {
			show: false
			},
			labelLine: {
			show: false
			},
			itemStyle: {
			borderWidth: 3,
			borderColor: '#000000'
			},
			data: [
			{ name: '', value: ReachProgress },
			{ name: '', value: 100-ReachProgress }
			],
			}
			]
			};

			option2 = {
			title: [
			{
			text: '',
			subtext: ZNoProgress+'%',
			textStyle: {
			fontSize: 16,
			color: '#999',
			lineHeight: 20
			},
			subtextStyle: {
			fontSize: 28,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '50%'
			},
			{
			show: true,
			text: '来料总不良率',
			textStyle: {
			color: '#00c6ff',
			fontSize: '16',
			},
			textAlign: 'center',
			left: '50%',
			top: '5%'
			}
			],
			tooltip: {
			trigger: 'item',
			},
			legend: {
			type: 'scroll',
			icon: 'pin',
			show: false
			},
			color: colorList,
			series: [
			{
			name: '占比',
			type: 'pie',
			radius: [50, 80],
			center: ['50%', '50%'],
			center: ['50%', '60%'],
			avoidLabelOverlap: false,
			label: {
			show: false
			},
			labelLine: {
			show: false
			},
			itemStyle: {
			borderWidth: 3,
			borderColor: '#000000'
			},
			data: [
			{ name: '', value: ZNoProgress },
			{ name: '', value: 100-ZNoProgress }
			],
			}
			]
			};

			option3 = {
			title: {
			text: '近日达成率对比',
			left: '0',
			top: 2,
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {

			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '10%',
			containLabel: true
			},
			legend: {
			left: 'right',
			data: ['总单量', '总收料'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 16,
			fontFamily: "微软雅黑"
			}

			},
			xAxis: [
			{
			type: 'category',
			data:ToDayDt,
			axisTick: {
			alignWithLabel: true
			},

			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
			width: 1, //隐藏y轴
			}
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			}
			],
			yAxis: [
			{
			type: 'value',
			axisLine: {
			show: false,

			},
			splitLine: { //网格线
			lineStyle: {
			color: '#00c6ff',

			},
			show: true //隐藏或显示
			},
			axisLabel: {
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			}
			],
			series: [
			{
			name: '总单量',
			type: 'bar',
			barWidth: 15,
			data: OrderQty
			},
			{
			name: '总收料',
			type: 'bar',
			barWidth: 15,
			data: ZSQty
			}
			]
			};


			mychart1.setOption(option1);
			mychart2.setOption(option2);
			mychart3.setOption(option3);
			}

			function DataTable() {

			$('#tb_order').bootstrapTable({
			url: 'http://192.168.2.152:80/api/loaddata/PurchaseReceiptTableData',
			//data: dataJson,
			method: 'get', //请求方式（*）
			dataType: "json",
			queryParams :queryParams,
			striped: false, //是否显示行间隔色
			cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination: true, //是否显示分页（*）
			sortable: false, //是否启用排序
			sortable: false, //是否启用排序
			search: false, //是否启用搜索框
			sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
			pageNumber: 1, //初始化加载第一页，默认第一页
			pageSize: 20, //每页的记录行数（*）
			pageList: [20], //可供选择的每页的行数（*）
			strictSearch: false, //设置为 true启用全匹配搜索，否则为模糊搜索
			clickToSelect: true, //是否启用点击选中行
			singleSelect: true, //设置True 将禁止多选
			uniqueId: "ID", //每一行的唯一标识，一般为主键列
			cardView: false, //是否显示详细视图
			detailView: false, //是否显示父子表

			columns: [
			{ field: 'HBillNo', title: '收料单号', align: "left" },
			{ field: 'HNumber', title: '物料编码', align: "left" },
			{ field: 'HName', title: '物料名称', align: "left", cellStyle: function (value, row, index) {
			return {
			css: {
			"min-width": "100px",
			"white-space": "nowrap",
			"text-overflow": "ellipsis",
			"overflow": "hidden",
			"max-width": "120px"
			}
			}
			}},
			{ field: 'HModel', title: '规格型号', align: "left", cellStyle: function (value, row, index) {
			return {
			css: {
			"min-width": "100px",
			"white-space": "nowrap",
			"text-overflow": "ellipsis",
			"overflow": "hidden",
			"max-width": "120px"
			}
			}
			}},
			{ field: 'HSourceBillNo', title: '采购订单号', align: "left" },
			{ field: 'HQty', title: '订单量', align: "left" , formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}},
			{ field: 'SHQty', title: '应收量', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			} },
			{ field: 'HRelationQty', title: '入库量', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			} },
			{ field: 'HInStockQty', title: '已收料数量', align: "left",hidden:true, formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			} },
			{ field: 'OrderSupsQty', title: '订单剩余', align: "left" , formatter: function (value, row, index) {
			var res = row.HQty -row.HInStockQty;
			return parseFloat(res).toFixed(2);
			}},
			{ field: 'NotOutQty', title: '未入库量', align: "left" , formatter: function (value, row, index) {
			var res = row.SHQty -row.HRelationQty;
			return parseFloat(res).toFixed(2);
			}},
			{ field: 'HSTATUS', title: '状态', align: "left",formatter: function (value, row, index) {
			return "已送货";
			} },
			{
			field: 'Progress', title: '进度', align: "left",width:100, formatter: function (value, row, index) {
			var res = 100 * row.HRelationQty / row.SHQty;
			//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(1) + "%</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(1) + "%';text-align:center;'></div></div></div>";
			}
			}
			],
			onClickRow: function (row, $element) {

			},
			onCheck: function (row, $element) {

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

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

			<body>
			<div class='title'>采购收货看板</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-8 left">
			<div id="cList0">
			<ul id="cList1">
			<li><span>待收料列表</span></li>
			</ul>
			</div>
			<div id="cList2">
			<table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
			</div>
			</div>
			<div class="col-sm-4 right">
			<div class="col-sm-6 right">
			<ul id="cList">
			<li style="font-size:24px;color:#3bff72">状态</li>
			<li>总订单：<span id="OrderQty">0</span></li>
			<li>总收料：<span id="ZSQty">0</span></li>
			<li>今日剩余：<span id="DaySupQty">0</span></li>
			<li>达成率：<span id="ReachProgress">0</span></li>
			<li>总不良率：<span id="NoProgress">0</span></li>
			</ul>
			</div>
			<div class="col-sm-6 right">
			<div id="mychart1"></div>
			</div>
			</div>
			<div class="col-sm-4 right">
			<div id="mychart2"></div>
			</div>
			<div class="col-sm-4 right">
			<div id="mychart3"></div>
			</div>

			</body>

			</html>

New file
			@@ -0,0 +1,778 @@
			<!DOCTYPE html>
			<html lang="zh-cn">

			<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<meta http-equiv="X-UA-Compatible" content="ie=edge">
			<title>销售发货看板</title>
			<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
			<link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
			<link rel="stylesheet" type="text/css" href="css/index.css">
			<script src="js/jquery.min.js"></script>
			<script src='js/echarts.min.js'></script>
			<script src="js/bootstrap.min.js"></script>
			<script src='js/bootstrap-table.min.js'></script>
			<script src='js/bootstrap-table-zh-CN.min.js'></script>
			<script src="js/jquery.SuperSlide.2.1.3.js"></script>
			<script src='js/template.js'></script>
			<script src="js/jquery.qrcode.min.js"></script>
			<style>
			.clock {
			font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
			font-size: 20px;
			width: 450px;
			float: right;
			color: #fff;
			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;
			padding: 0px;
			list-style: none;
			text-align: right;
			margin-left: 15px;
			position: relative;
			}

			.clock ul li {
			display: inline;
			font-size: 24px;
			text-align: left;
			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;
			color: rgba(9, 209, 234, 1);
			text-align: center;
			background: url(img/img_little_new.png) center no-repeat;
			margin-bottom: 30px;
			}

			.col-sm-12 {
			position: relative;
			min-height: 1px;
			padding-right: 0px;
			padding-left: 0px;
			}

			.left{
			/* border: 1px solid #00c6ff; */
			height: 900px;
			}
			.right{
			/* border: 1px solid #00c6ff; */
			height: 300px;
			}



			.col-sm-12,
			.col-sm-2,
			.col-sm-3,
			.col-sm-4,
			.col-sm-6,
			.col-sm-8 {
			position: relative;
			min-height: 1px;
			padding-right: 0px;
			padding-left: 0px;
			}


			#mychart1,
			#mychart2,
			#mychart3{
			width: 100%;
			border: none;
			height: 300px;
			}

			#cList {
			margin: 0% auto;
			color: #00c6ff;
			}

			#cList li {
			margin: 20px 0px;
			text-align:left;
			font-size: 18px;
			margin-left: 25%;
			}

			#cList0 {
			height: 900px;
			width: 3%;
			/* border: 1px solid #00c6ff; */
			float: left;
			}

			#cList1 {
			float: left;
			}

			#cList1 li {
			float: left;
			height: 900px;
			color: #00c6ff;
			font-size: 20px;
			/文字居中/
			text-align: center;
			/display: flex;/
			}

			#cList1 li span {
			/文字居中/
			display: inline-block;
			height: 100%;
			/文字居中/

			/文字竖排/
			writing-mode: vertical-lr;
			/从左向右从右向左是 writing-mode: vertical-rl;/
			writing-mode: tb-lr;
			/IE浏览器的从左向右从右向左是 writing-mode: tb-rl；/
			}
			#cList2 {
			height: 900px;
			width: 97%;
			/* border: 1px solid #00c6ff; */
			float: left;
			}
			table tr td {
			text-align: center;
			vertical-align: middle !important;
			/border: 1px solid #464646;/
			border-right: 0px;
			height: 40px;
			font-size: 16px;
			font-family: '黑体';
			font-family: Arial;
			border: none;
			}

			.table>caption+thead>tr:first-child>td,
			.table>caption+thead>tr:first-child>th,
			.table>colgroup+thead>tr:first-child>td,
			.table>colgroup+thead>tr:first-child>th,
			.table>thead:first-child>tr:first-child>td,
			.table>thead:first-child>tr:first-child>th {
			background-color: #000;
			color: #3bff72;

			}

			.fixed-table-container tbody td .th-inner,
			.fixed-table-container thead th .th-inner {
			font-size: 15px;
			color: #09d1ea;
			padding: 20px 0 15px 0;
			}

			#tb_order tr td {
			text-align: center;
			height: 32px;
			line-height: 32px;
			font-size: 14px;
			/* font-family: '黑体'; */
			color: #a6a8ae;
			font-family: Arial;
			/* border: 1px solid #464646; */
			border: none;
			}

			.bootstrap-table .table {
			border-radius: none
			}

			th {
			background-color: transparent !important;
			}

			td {
			background-color: transparent;
			}

			tr {
			background-color: transparent
			}

			#tb_order tr:nth-child(even) {
			background: #080c1c;
			}

			.fixed-table-container tbody td .th-inner,
			.fixed-table-container thead th .th-inner {
			text-align: left;
			}

			.progress {
			background-color: darkblue;
			}

			#tb_order tr:nth-child(even) {
			background: #000000;
			}

			.pull-right,.fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
			display: none;
			}

			</style>
			<script type="text/javascript">
			//参数配置
			var HouseCode='509'; //仓库编码


			var interval;//计时器
			var interval1;//计时器
			var num = 0;
			var ReachProgress=0; //达成率
			var FHDt=[]; //发货趋势时间数组
			var FHQty=[]; //发货趋势时间值数组

			var ToDayDt=[]; //近日达成率对比时间数组
			var OrderQty=[]; //近日达成率对比订单总量数数组
			var FHSQty=[]; //近日达成率对比总发货量数数组
			$(document).ready(function () {
			// 创建两个变量，一个数组中的月和日的名称
			var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
			setInterval(function () {
			var date1 = new Date;
			var year = date1.getFullYear();
			var month = date1.getMonth();
			var day = date1.getDate();
			var hh = date1.getHours();
			var mm = date1.getMinutes();
			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 () {
			var mychart1 = echarts.init(document.getElementById('mychart1'));
			var mychart2 = echarts.init(document.getElementById('mychart2'));
			var mychart3 = echarts.init(document.getElementById('mychart3'));

			Chart(mychart1,mychart2,mychart3);
			DataTable();
			// 定时器
			interval = setInterval(function () {
			//num = 0;
			FHDt=[];
			FHQty=[];
			ToDayDt=[];
			OrderQty=[];
			FHSQty=[];
			Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
			}, 20000);
			interval1=setInterval(function () {
			$("#tb_order").bootstrapTable('refresh');
			}, 10000);
			//根据浏览器大小改变大小
			window.onresize = () => {
			mychart1.resize();
			mychart2.resize();
			mychart3.resize();
			}
			})

			function Chart(mychart1,mychart2,mychart3){
			$.ajax({
			url: "http://192.168.2.152:80/api/loaddata/SalesDeliveryData",
			dataType: "JSON",
			async: false,//使用同步的方式,true为异步方式
			type: "Get",
			data:{"Tag":0,"limit":10,"offset":1},
			success: function (data) {

			$("#OrderQty").html(parseFloat(data.data[0][0].ZDQty).toFixed(0));
			$("#FHQty").html(parseFloat(data.data[1][0].FHQty).toFixed(0));
			$("#ReachProgress").html(parseFloat(data.data[1][0].FHQty)/parseFloat(data.data[0][0].ZDQty==0?1:data.data[0][0].ZDQty).toFixed(0)*100+"%");
			$("#DaySupQty").html(parseFloat(data.data[0][0].ZDQty-data.data[1][0].FHQty<0?0:data.data[0][0].ZDQty-data.data[1][0].FHQty).toFixed(0));
			ReachProgress=parseFloat(data.data[1][0].FHQty)/parseFloat(data.data[0][0].ZDQty==0?1:data.data[0][0].ZDQty).toFixed(0)*100;
			//发货趋势
			$.each(data.data[2], function (index, val) {
			FHDt.push(val.hour.substring(5));
			FHQty.push(parseFloat(val.FHQty).toFixed(0));
			});

			//近日达成率
			$.each(data.data[2], function (index, val) {
			ToDayDt.push(val.hour.substring(5));
			OrderQty.push(parseFloat(val.ZDQty).toFixed(0));
			FHSQty.push(parseFloat(val.FHQty).toFixed(0));
			});
			},
			error: function (data) {

			}
			})


			const colorList = ['#47A2FF', '#ff9900']
			option1 = {
			title: [
			{
			text: '',
			subtext: ReachProgress+'%',
			textStyle: {
			fontSize: 16,
			color: '#999',
			lineHeight: 20
			},
			subtextStyle: {
			fontSize: 28,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '50%'
			},
			{
			show: true,
			text: '达成率分析',
			textStyle: {
			color: '#00c6ff',
			fontSize: '16',
			},
			textAlign: 'center',
			left: '50%',
			top: '5%'
			}
			],
			tooltip: {
			trigger: 'item',
			},
			legend: {
			type: 'scroll',
			icon: 'pin',
			show: false
			},
			color: colorList,
			series: [
			{
			name: '占比',
			type: 'pie',
			radius: [50, 80],
			center: ['50%', '50%'],
			center: ['50%', '60%'],
			avoidLabelOverlap: false,
			label: {
			show: false
			},
			labelLine: {
			show: false
			},
			itemStyle: {
			borderWidth: 3,
			borderColor: '#000000'
			},
			data: [
			{ name: '', value: ReachProgress },
			{ name: '', value: 100-ReachProgress }
			],
			}
			]
			};

			option2 = {
			tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}月 : {c}万"
			},
			grid: {
			left: '25',
			right: '4%',
			bottom: '5%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: FHDt, //时间点数据
			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			},
			},
			axisTick: {
			show: true,
			},
			axisLabel: {
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			},
			yAxis: [{
			type: 'value',
			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			width: 0, //隐藏y轴
			}
			},
			splitLine: { //网格线
			lineStyle: {
			type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
			},
			show: false //隐藏或显示
			},
			axisTick: {
			show: false,
			},
			axisLabel: {
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			},
			splitNumber: 5
			}],
			title: {
			show: true,
			text: '发货趋势图(按日期显示)',
			x: 'left',
			textStyle: {
			color: '#00c6ff',
			fontSize: 18,
			fotweight: 'normal',
			fontFamily: "微软雅黑"
			},
			textAlign: 'left',
			left: '20',
			top: '0%'
			},
			legend: {
			icon: 'line',
			data: ['小时产能'],
			x:'right', //可设定图例在左、右、居中
			y:'top', //可设定图例在上、下、居中
			//padding:[0,0,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
			textStyle: {
			color: '#00c6ff',
			fontSize: 20,
			fontFamily: "微软雅黑"
			}
			},
			series: [
			{
			name: '小时产能',
			data: FHQty, //时间点值
			type: 'line',
			smooth: true,
			itemStyle: {
			normal: {
			color: 'orange',
			lineStyle: {
			width: 4, //设置线条粗细
			shadowColor: 'rgba(255, 94, 91,.1)',
			shadowOffsetX: 3,
			shadowOffsetY: 5,
			}
			},
			},
			textStyle: {
			fontFamily: "微软雅黑"
			}
			},
			]
			}

			option3 = {
			title: {
			text: '近日达成率对比',
			left: '0',
			top: 2,
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {

			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '10%',
			containLabel: true
			},
			legend: {
			left: 'right',
			data: ['总订单', '总发货'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 16,
			fontFamily: "微软雅黑"
			}

			},
			xAxis: [
			{
			type: 'category',
			data:ToDayDt,
			axisTick: {
			alignWithLabel: true
			},

			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
			width: 1, //隐藏y轴
			}
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			}
			],
			yAxis: [
			{
			type: 'value',
			axisLine: {
			show: false,

			},
			splitLine: { //网格线
			lineStyle: {
			color: '#00c6ff',

			},
			show: true //隐藏或显示
			},
			axisLabel: {
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			}
			],
			series: [
			{
			name: '总订单',
			type: 'bar',
			barWidth: 15,
			data: OrderQty
			},
			{
			name: '总发货',
			type: 'bar',
			barWidth: 15,
			data: FHSQty
			}
			]
			};


			mychart1.setOption(option1);
			mychart2.setOption(option2);
			mychart3.setOption(option3);
			}

			function DataTable() {

			$('#tb_order').bootstrapTable({
			url: 'http://192.168.2.152:80/api/loaddata/SalesDeliveryTableData',
			//data: datajson,
			method: 'get', //请求方式（*）
			dataType: "json",
			queryParams :queryParams,
			striped: false, //是否显示行间隔色
			cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination: true, //是否显示分页（*）
			sortable: false, //是否启用排序
			sortable: false, //是否启用排序
			search: false, //是否启用搜索框
			sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
			pageNumber: 1, //初始化加载第一页，默认第一页
			pageSize: 20, //每页的记录行数（*）
			pageList: [20], //可供选择的每页的行数（*）
			strictSearch: false, //设置为 true启用全匹配搜索，否则为模糊搜索
			clickToSelect: true, //是否启用点击选中行
			singleSelect: true, //设置True 将禁止多选
			uniqueId: "ID", //每一行的唯一标识，一般为主键列
			cardView: false, //是否显示详细视图
			detailView: false, //是否显示父子表

			columns: [
			{ field: 'HBillNo', title: '发货单号', align: "left" },
			{ field: 'HNumber', title: '物料编码', align: "left" },
			{ field: 'HName', title: '物料名称', align: "left", cellStyle: function (value, row, index) {
			return {
			css: {
			"min-width": "100px",
			"white-space": "nowrap",
			"text-overflow": "ellipsis",
			"overflow": "hidden",
			"max-width": "120px"
			}
			}
			}},
			{ field: 'HModel', title: '规格型号', align: "left", cellStyle: function (value, row, index) {
			return {
			css: {
			"min-width": "100px",
			"white-space": "nowrap",
			"text-overflow": "ellipsis",
			"overflow": "hidden",
			"max-width": "120px"
			}
			}
			}},
			{ field: 'HSourceBillNo', title: '销售订单号', align: "left" },
			{ field: 'HQty', title: '订单量', align: "left" , formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}},
			{ field: 'FHQty', title: '应发量', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			} },
			{ field: 'HRelationQty', title: '出库量', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			} },
			{ field: 'HOutStockQty', title: '已发货数量', align: "left",hidden:true, formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			} },
			{ field: 'OrderSupsQty', title: '订单剩余', align: "left" , formatter: function (value, row, index) {
			var res = row.HQty -row.HOutStockQty;
			return parseFloat(res).toFixed(2);
			}},
			{ field: 'NotOutQty', title: '未出库量', align: "left" , formatter: function (value, row, index) {
			var res = row.FHQty -row.HRelationQty;
			return parseFloat(res).toFixed(2);
			}},
			{ field: 'HSTATUS', title: '状态', align: "left",formatter: function (value, row, index) {
			if(row.HRelationQty>0){
			return "已发货";
			}
			else{
			return "未发货";
			}
			} },
			{
			field: 'Progress', title: '进度', align: "left",width:100, formatter: function (value, row, index) {
			var res = 100 * row.HRelationQty / row.FHQty;
			//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(1) + "%</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(1) + "%';text-align:center;'></div></div></div>";
			}
			}
			],
			onClickRow: function (row, $element) {

			},
			onCheck: function (row, $element) {

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

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

			<body>
			<div class='title'>销售发货看板</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-8 left">
			<div id="cList0">
			<ul id="cList1">
			<li><span>待发货列表</span></li>
			</ul>
			</div>
			<div id="cList2">
			<table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
			</div>
			</div>
			<div class="col-sm-4 right">
			<div class="col-sm-6 right">
			<ul id="cList">
			<li style="font-size:24px;color:#3bff72">状态</li>
			<li>总单量：<span id="OrderQty">0</span></li>
			<li>总发货：<span id="FHQty">0</span></li>
			<li>达成率：<span id="ReachProgress">0</span></li>
			<li>今日剩余：<span id="DaySupQty">0</span></li>
			</ul>
			</div>
			<div class="col-sm-6 right">
			<div id="mychart1"></div>
			</div>
			</div>
			<div class="col-sm-4 right">
			<div id="mychart2"></div>
			</div>
			<div class="col-sm-4 right">
			<div id="mychart3"></div>
			</div>

			</body>

			</html>