优化

yangle

2023-03-20 250270a7712f61dbd632e0e9a50c76cea0633ae6

优化

 HDPrctPlan.html

@@ -5,7 +5,7 @@
    <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>
    <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">
@@ -17,7 +17,8 @@
    <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>      
    <script src="js/webConfig.js"></script>
    <style>
        .clock {
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            font-size: 20px;
@@ -27,41 +28,37 @@
            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;
        }
        

            .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;
@@ -70,37 +67,41 @@
            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;
        }
        
        .top{

        .top {
            /* border: 1px solid #00c6ff; */
            height: 900px;
        }
        .left{
            /* border: 1px solid #00c6ff; */
            height: 300px; 
        }
        .ctn{
            /* border: 1px solid #00c6ff; */
            height: 450px;  
        }
        .bottom{
            /* border: 1px solid #00c6ff; */
            height: 600px;
        }
        .bottom_left{

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

        .ctn {
            /* border: 1px solid #00c6ff; */
            height: 450px;
        }

        .bottom {
            /* border: 1px solid #00c6ff; */
            height: 600px;
        }

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



        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
@@ -114,79 +115,79 @@
            padding-right: 0px;
            padding-left: 0px;
        }
        
        


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

        #mychart2, #mychart3,
        #mychart6, #mychart7 {
            width: 100%;
            border: none;
            height: 450px;
        }
        

        #cList {
            margin: 20% auto;
            color: #00c6ff;
        }
        
        #cList li {
            margin: 26px auto;
            text-align:center;
        }

            #cList li {
                margin: 26px auto;
                text-align: center;
            }

        #cList1 {
            float: left;
        }
        
        #cList1 li {
            float: left;
            height: 450px;
            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；*/
        }

            #cList1 li {
                float: left;
                height: 450px;
                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；*/
                }
    </style>
    <script type="text/javascript">
        //参数配置
        var HouseCode='509';
        
        var HouseCode = '509';

        var interval;           //计时器
        var ReworkProgress=0;   //返工率
        var EndProgress=0;      //总完工率
        var WkShop=[];          //车间产量对比车间数组
        var TaskQty=[];          //车间产量对比任务数数组
        var EndQty=[];          //车间产量对比完成数数组
        var FDte=[];            //返工趋势时间数组
        var FQty=[];            //返工趋势值数组
        var CHour=[];           //成品仓库吞吐量时间数组
        var COrderQty=[];       //成品仓库吞吐量任务数数组
        var CInQty=[];          //成品仓库吞吐量入库数数组
        var XSHour=[];           //产销比分析时间数组
        var XSOrderQty=[];       //产销比分析任务数数组
        var XSInQty=[];          //产销比分析入库数数组
        var ZDte=[];             //生产总效率趋势时间数组
        var ZQty=[];             //生产总效率趋势值数组
        var ReworkProgress = 0;   //返工率
        var EndProgress = 0;      //总完工率
        var WkShop = [];          //车间产量对比车间数组
        var TaskQty = [];          //车间产量对比任务数数组
        var EndQty = [];          //车间产量对比完成数数组
        var FDte = [];            //返工趋势时间数组
        var FQty = [];            //返工趋势值数组
        var CHour = [];           //成品仓库吞吐量时间数组
        var COrderQty = [];       //成品仓库吞吐量任务数数组
        var CInQty = [];          //成品仓库吞吐量入库数数组
        var XSHour = [];           //产销比分析时间数组
        var XSOrderQty = [];       //产销比分析任务数数组
        var XSInQty = [];          //产销比分析入库数数组
        var ZDte = [];             //生产总效率趋势时间数组
        var ZQty = [];             //生产总效率趋势值数组
        $(document).ready(function () {
            // 创建两个变量，一个数组中的月和日的名称
            var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
@@ -200,15 +201,15 @@
                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'));
@@ -218,25 +219,25 @@
            var mychart5 = echarts.init(document.getElementById('mychart5'));
            var mychart6 = echarts.init(document.getElementById('mychart6'));
            var mychart7 = echarts.init(document.getElementById('mychart7'));
            Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7);
            Chart(mychart1, mychart2, mychart3, mychart4, mychart5, mychart6, mychart7);
            // 定时器
            interval = setInterval(function () {
                ReworkProgress=0;   //返工率
                EndProgress=0;      //总完工率
                WkShop=[];          //车间产量对比车间数组
                TaskQty=[];          //车间产量对比任务数数组
                EndQty=[];          //车间产量对比完成数数组
                FDte=[];            //返工趋势时间数组
                FQty=[];            //返工趋势值数组
                CHour=[];           //成品仓库吞吐量时间数组
                COrderQty=[];       //成品仓库吞吐量任务数数组
                CInQty=[];          //成品仓库吞吐量入库数数组
                XSHour=[];           //产销比分析时间数组
                XSOrderQty=[];       //产销比分析任务数数组
                XSInQty=[];          //产销比分析入库数数组
                ZDte=[];             //生产总效率趋势时间数组
                ZQty=[];             //生产总效率趋势值数组
                Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7);
                ReworkProgress = 0;   //返工率
                EndProgress = 0;      //总完工率
                WkShop = [];          //车间产量对比车间数组
                TaskQty = [];          //车间产量对比任务数数组
                EndQty = [];          //车间产量对比完成数数组
                FDte = [];            //返工趋势时间数组
                FQty = [];            //返工趋势值数组
                CHour = [];           //成品仓库吞吐量时间数组
                COrderQty = [];       //成品仓库吞吐量任务数数组
                CInQty = [];          //成品仓库吞吐量入库数数组
                XSHour = [];           //产销比分析时间数组
                XSOrderQty = [];       //产销比分析任务数数组
                XSInQty = [];          //产销比分析入库数数组
                ZDte = [];             //生产总效率趋势时间数组
                ZQty = [];             //生产总效率趋势值数组
                Chart(mychart1, mychart2, mychart3, mychart4, mychart5, mychart6, mychart7);
            }, 30000);
            //根据浏览器大小改变大小
            window.onresize = () => {
@@ -247,93 +248,93 @@
                mychart5.resize();
            }
        })
        
        function Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7){

        function Chart(mychart1, mychart2, mychart3, mychart4, mychart5, mychart6, mychart7) {
            $.ajax({
                url: "http://localhost:53860/api/loaddata/PrctPlan",
                url: GetWEBURL() + "/loaddata/PrctPlan",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                data:{"HouseCode":HouseCode},
                success: function (data) { 
                data: { "HouseCode": HouseCode },
                success: function (data) {
                    //返工率
                    ReworkProgress=data.data[0][0].ReworkProgress;
                    ReworkProgress = data.data[0][0].ReworkProgress;
                    //订单量
                    $("#OrderQty").html(data.data[1][0].OrderQty);
                    //产量
                    $("#ProductQty").html(data.data[1][0].PrctQty);
                    //总完工率
                    EndProgress=data.data[2][0].EndProgress;
                    
                    EndProgress = data.data[2][0].EndProgress;

                    //车间产量对比
                    $.each(data.data[3], function (index, val) {
                        WkShop.push(val.WkShop);
                        TaskQty.push(parseFloat(val.TaskQty).toFixed(0));
                        EndQty.push(parseFloat(val.EndQty).toFixed(0));                       
                        EndQty.push(parseFloat(val.EndQty).toFixed(0));
                    });
                    

                    //返工趋势
                    $.each(data.data[4], function (index, val) {
                        FDte.push(val.Dte);
                        FQty.push(parseFloat(val.Qty).toFixed(0));                       
                        FQty.push(parseFloat(val.Qty).toFixed(0));
                    });
                    

                    //成品仓库吞吐量
                    $.each(data.data[5], function (index, val) {
                        CHour.push(val.hour.substring(5));
                        COrderQty.push(parseFloat(val.OrderQty).toFixed(0));
                        CInQty.push(parseFloat(val.InQty).toFixed(0)); 
                        CInQty.push(parseFloat(val.InQty).toFixed(0));
                    });
                    

                    //产销比分析
                    $.each(data.data[6], function (index, val) {
                        XSHour.push(val.hour.substring(5));
                        XSOrderQty.push(parseFloat(val.XSOrderQty).toFixed(0));
                        XSInQty.push(parseFloat(val.InQty).toFixed(0)); 
                        XSInQty.push(parseFloat(val.InQty).toFixed(0));
                    });
                    

                    //生产总效率趋势图
                    $.each(data.data[7], function (index, val) {
                        ZDte.push(val.Dte);
                        ZQty.push(parseFloat(val.Qty).toFixed(0));
                    });
                    
                    


                },
                error: function (data) {
                    

                }
            })
            

            const colorList = ['#47A2FF', '#ff9900']
            option1 = {
                title: [
                {
                    text: '',
                    subtext: ReworkProgress+'%',
                    textStyle: {
                        fontSize: 16,
                        color: '#999',
                        lineHeight: 20
                    {
                        text: '',
                        subtext: ReworkProgress + '%',
                        textStyle: {
                            fontSize: 16,
                            color: '#999',
                            lineHeight: 20
                        },
                        subtextStyle: {
                            fontSize: 28,
                            color: '#00c6ff'
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '50%'
                    },
                    subtextStyle: {
                        fontSize: 28,
                        color: '#00c6ff'
                    },
                    textAlign: 'center',
                    left: '50%',
                    top: '50%'
                },
                {
                    show: true,
                    text: '返工率（全部产线）',
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: '16',
                    },
                    textAlign: 'left',
                    
                }
                    {
                        show: true,
                        text: '返工率（全部产线）',
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: '16',
                        },
                        textAlign: 'left',

                    }
                ],
                tooltip: {
                    trigger: 'item',
@@ -345,167 +346,167 @@
                },
                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: ReworkProgress },
                    { name: '', value: 100-ReworkProgress }
                    ],
                }
                    {
                        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: ReworkProgress },
                            { name: '', value: 100 - ReworkProgress }
                        ],
                    }
                ]
            };
            
            


            var highlight = '#00c6ff';
            var demoData = [
            { name: '总完工率', value: EndProgress, unit: '%', pos: ['50%', '60%'], range: [0, 100] },
            ];           
                { name: '总完工率', value: EndProgress, unit: '%', pos: ['50%', '60%'], range: [0, 100] },
            ];
            option2 = {
                series: (function() {
                series: (function () {
                    var result = [];
                    
                    demoData.forEach(function(item) {

                    demoData.forEach(function (item) {
                        result.push(
                        // 外围刻度
                        {
                            type: 'gauge',
                            radius: '80%',  // 1行3个
                            center:['50%','60%'],  //边距
                            splitNumber: item.splitNum || 10,
                            min: item.range[0],
                            max: item.range[1],
                            startAngle: 180,
                            endAngle: 0,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    width: 2,
                                    shadowBlur: 0,
                                    color: [
                                    [1, highlight]
                                    ]
                                }
                            },
                            axisTick: {
                                show: true,
                                lineStyle: {
                                    color: highlight,
                                    width: 1
                                },
                                length: -5,
                                splitNumber: 10
                            },
                            splitLine: {
                                show: true,
                                length: -14,
                                lineStyle: {
                                    color: highlight,
                                }
                            },
                            axisLabel: {
                                distance: -20,
                                textStyle: {
                                    color: highlight,
                                    fontSize: '14',
                                    fontWeight: 'bold'
                                }
                            },
                            pointer: {
                                show: 0
                            },
                            detail: {
                                show: 0
                            }
                        },
                        
                        // 内侧指针、数值显示
                        {
                            name: item.name,
                            type: 'gauge',
                            center: item.pos,
                            radius: '70%',
                            center:['50%','60%'],  //边距
                            startAngle: 180,
                            endAngle: 0,
                            min: item.range[0],
                            max: item.range[1],
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    width: 16,
                                    color: [
                                    [1, 'rgba(255,255,255,.1)']
                                    ]
                                }
                            },
                            axisTick: {
                                show: 0,
                            },
                            splitLine: {
                                show: 0,
                            },
                            axisLabel: {
                                show: 0
                            },
                            pointer: {
                                show: true,
                                length: '105%'
                            },
                            detail: {
                                show: true,
                                offsetCenter: [0, '50%'],
                                textStyle: {
                                    fontSize: 20,
                                    color: '#00c6ff'
                                },
                                formatter: [
                                '{value} ' + (item.unit || ''),
                                '{name|' + item.name + '}'
                                ].join('\n'),
                                rich: {
                                    name: {
                                        fontSize: 20,
                                        lineHeight: 30,
                                        color: '#00c6ff'
                            // 外围刻度
                            {
                                type: 'gauge',
                                radius: '80%',  // 1行3个
                                center: ['50%', '60%'],  //边距
                                splitNumber: item.splitNum || 10,
                                min: item.range[0],
                                max: item.range[1],
                                startAngle: 180,
                                endAngle: 0,
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        width: 2,
                                        shadowBlur: 0,
                                        color: [
                                            [1, highlight]
                                        ]
                                    }
                                },
                                axisTick: {
                                    show: true,
                                    lineStyle: {
                                        color: highlight,
                                        width: 1
                                    },
                                    length: -5,
                                    splitNumber: 10
                                },
                                splitLine: {
                                    show: true,
                                    length: -14,
                                    lineStyle: {
                                        color: highlight,
                                    }
                                },
                                axisLabel: {
                                    distance: -20,
                                    textStyle: {
                                        color: highlight,
                                        fontSize: '14',
                                        fontWeight: 'bold'
                                    }
                                },
                                pointer: {
                                    show: 0
                                },
                                detail: {
                                    show: 0
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: highlight,
                                }
                            },
                            data: [{
                                value: item.value
                            }]
                        }

                            // 内侧指针、数值显示
                            {
                                name: item.name,
                                type: 'gauge',
                                center: item.pos,
                                radius: '70%',
                                center: ['50%', '60%'],  //边距
                                startAngle: 180,
                                endAngle: 0,
                                min: item.range[0],
                                max: item.range[1],
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        width: 16,
                                        color: [
                                            [1, 'rgba(255,255,255,.1)']
                                        ]
                                    }
                                },
                                axisTick: {
                                    show: 0,
                                },
                                splitLine: {
                                    show: 0,
                                },
                                axisLabel: {
                                    show: 0
                                },
                                pointer: {
                                    show: true,
                                    length: '105%'
                                },
                                detail: {
                                    show: true,
                                    offsetCenter: [0, '50%'],
                                    textStyle: {
                                        fontSize: 20,
                                        color: '#00c6ff'
                                    },
                                    formatter: [
                                        '{value} ' + (item.unit || ''),
                                        '{name|' + item.name + '}'
                                    ].join('\n'),
                                    rich: {
                                        name: {
                                            fontSize: 20,
                                            lineHeight: 30,
                                            color: '#00c6ff'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: highlight,
                                    }
                                },
                                data: [{
                                    value: item.value
                                }]
                            }
                        );
                    });
                    

                    return result;
                })()
            };
            

            option3 = {
                tooltip : {
                tooltip: {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
@@ -517,20 +518,20 @@
                    }
                },
                grid: {
                    top:'10%',
                    top: '10%',
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis:  {
                xAxis: {
                    type: 'value',
                    //max: 1000,
                    axisTick: {
                        alignWithLabel: true
                    },
                    splitLine:{
                        show:false
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
@@ -559,13 +560,13 @@
                            width: 1, //隐藏y轴
                        }
                    },
                    splitLine:{
                        show:false
                    splitLine: {
                        show: false
                    },
                    splitLine: { //网格线
                        lineStyle: {
                            color: '#00c6ff',
                            

                        },
                        show: false //隐藏或显示
                    },
@@ -577,55 +578,55 @@
                    }
                },
                series: [
                {
                    name: '任务数',
                    type: 'bar',
                    stack: '总量',
                    barWidth: 10,
                    itemStyle:{
                        normal: {
                            color: '#47A2FF',
                            barBorderRadius: [20, 20, 20, 20],
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    z:  10,
                    data: TaskQty
                },
                {
                    name: '完成数',
                    type: 'bar',
                    stack: '总量',
                    barWidth: 10,
                    itemStyle:{
                        normal: {
                            color: '#ff9900',
                            shadowBlur: [0, 0, 0, 10],
                            shadowColor: '#ff9900',
                            barBorderRadius: [20, 20, 20, 20],
                            shadowOffsetX: 0,
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight',
                            textStyle: { //文字样式
                                //fontSize:12
                    {
                        name: '任务数',
                        type: 'bar',
                        stack: '总量',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: '#47A2FF',
                                barBorderRadius: [20, 20, 20, 20],
                            }
                        }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        z: 10,
                        data: TaskQty
                    },
                    z: 5,
                    data: EndQty
                }
                    {
                        name: '完成数',
                        type: 'bar',
                        stack: '总量',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: '#ff9900',
                                shadowBlur: [0, 0, 0, 10],
                                shadowColor: '#ff9900',
                                barBorderRadius: [20, 20, 20, 20],
                                shadowOffsetX: 0,
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight',
                                textStyle: { //文字样式
                                    //fontSize:12
                                }
                            }
                        },
                        z: 5,
                        data: EndQty
                    }
                ]
            };
            

            option4 = {
                tooltip: {
                    trigger: 'item',
@@ -697,8 +698,8 @@
                legend: {
                    icon: 'line',
                    data: ['小时产能'],
                    x:'right',      //可设定图例在左、右、居中
                    y:'top',     //可设定图例在上、下、居中
                    x: 'right',      //可设定图例在左、右、居中
                    y: 'top',     //可设定图例在上、下、居中
                    //padding:[0,0,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    textStyle: {
                        color: '#00c6ff',
@@ -707,29 +708,29 @@
                    }
                },
                series: [
                {
                    name: '小时产能',
                    data: FQty,  //时间点值
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'orange',
                            lineStyle: {
                                width: 4, //设置线条粗细
                                shadowColor: 'rgba(255, 94, 91,.1)',
                                shadowOffsetX: 3,
                                shadowOffsetY: 5,
                            }
                    {
                        name: '小时产能',
                        data: FQty,  //时间点值
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: 'orange',
                                lineStyle: {
                                    width: 4, //设置线条粗细
                                    shadowColor: 'rgba(255, 94, 91,.1)',
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 5,
                                }
                            },
                        },
                        textStyle: {
                            fontFamily: "微软雅黑"
                        }
                    },
                    textStyle: {
                        fontFamily: "微软雅黑"
                    }
                },
                ]
            }
            

            option5 = {
                title: {
                    text: '成品仓库吞吐量（按天查询）',
@@ -743,7 +744,7 @@
                },
                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                tooltip: {
                    

                },
                grid: {
                    left: '3%',
@@ -759,71 +760,71 @@
                        fontSize: 16,
                        fontFamily: "微软雅黑"
                    }
                    

                },
                xAxis: [
                {
                    type: 'category',
                    data:CHour,
                    axisTick: {
                        alignWithLabel: true
                    },
                    
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00c6ff',
                            type: 'solid', //设置网格线类型 dotted：虚线   solid:实线
                            width: 1, //隐藏y轴
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                    {
                        type: 'category',
                        data: CHour,
                        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',
                            
                    {
                        type: 'value',
                        axisLine: {
                            show: false,

                        },
                        show: true //隐藏或显示
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        splitLine: { //网格线
                            lineStyle: {
                                color: '#00c6ff',

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

            option6 = {
                title: {
                    text: '产销比分析（按天查询）',
@@ -837,7 +838,7 @@
                },
                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                tooltip: {
                    

                },
                grid: {
                    left: '5%',
@@ -853,71 +854,71 @@
                        fontSize: 16,
                        fontFamily: "微软雅黑"
                    }
                    

                },
                xAxis: [
                {
                    type: 'category',
                    data:XSHour,
                    axisTick: {
                        alignWithLabel: true
                    },
                    
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00c6ff',
                            type: 'solid', //设置网格线类型 dotted：虚线   solid:实线
                            width: 1, //隐藏y轴
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                    {
                        type: 'category',
                        data: XSHour,
                        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',
                            
                    {
                        type: 'value',
                        axisLine: {
                            show: false,

                        },
                        show: true //隐藏或显示
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        splitLine: { //网格线
                            lineStyle: {
                                color: '#00c6ff',

                            },
                            show: true //隐藏或显示
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00c6ff', //坐标值得具体的颜色
                                fontSize: '16'
                            }
                        }
                    }
                }
                ],
                series: [
                {
                    name: '销售订单数',
                    type: 'bar',
                    barWidth: 15,
                    data: XSOrderQty
                },
                {
                    name: '入库数',
                    type: 'bar',
                    barWidth: 15,
                    data: XSInQty
                }
                    {
                        name: '销售订单数',
                        type: 'bar',
                        barWidth: 15,
                        data: XSOrderQty
                    },
                    {
                        name: '入库数',
                        type: 'bar',
                        barWidth: 15,
                        data: XSInQty
                    }
                ]
            };
            

            option7 = {
                tooltip: {
                    trigger: 'item',
@@ -992,8 +993,8 @@
                legend: {
                    icon: 'line',
                    data: ['小时产能'],
                    x:'right',      //可设定图例在左、右、居中
                    y:'top',     //可设定图例在上、下、居中
                    x: 'right',      //可设定图例在左、右、居中
                    y: 'top',     //可设定图例在上、下、居中
                    //padding:[0,0,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    textStyle: {
                        color: '#00c6ff',
@@ -1002,29 +1003,29 @@
                    }
                },
                series: [
                {
                    name: '小时产能',
                    data: ZQty,  //时间点值
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'orange',
                            lineStyle: {
                                width: 4, //设置线条粗细
                                shadowColor: 'rgba(255, 94, 91,.1)',
                                shadowOffsetX: 3,
                                shadowOffsetY: 5,
                            }
                    {
                        name: '小时产能',
                        data: ZQty,  //时间点值
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: 'orange',
                                lineStyle: {
                                    width: 4, //设置线条粗细
                                    shadowColor: 'rgba(255, 94, 91,.1)',
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 5,
                                }
                            },
                        },
                        textStyle: {
                            fontFamily: "微软雅黑"
                        }
                    },
                    textStyle: {
                        fontFamily: "微软雅黑"
                    }
                },
                ]
            }
            

            mychart1.setOption(option1);
            mychart2.setOption(option2);
            mychart3.setOption(option3);
@@ -1033,12 +1034,12 @@
            mychart6.setOption(option6);
            mychart7.setOption(option7);
        }
        

    </script>
</head>

<body>
    <div class='title'>韩电生产计划看板</div>
    <div class='title'>生产计划看板</div>
    <div class="clock">
        <ul>
            <li id="Date"></li>

 KB_ProductionEquipmentOutputAnalysis.html

@@ -957,14 +957,17 @@
                success: function (Data) {
                    var hospitals = JSON.parse(Data);//反序列化
                    SourceList = hospitals;
                    var content = '';
                    $.each(hospitals.data, function (i, n) {
                        content += "<option value='" + n.HNumber + "'>" + n.HNumber + '-' + n.HName + "</option>";
                    });
                    $("#hospitalCodeSelect").empty();
                    $("#hospitalCodeSelect").append(content);//append 添加进去并展示
                    $("#hospitalCodeSelect").find("option[value='" + hospitals.data[0].HNumber + "']").attr("selected", true);
                    $("#hospitalCodeSelect").selectpicker('refresh');
                    if (SourceList.data != "") {
                        var content = '';
                        $.each(hospitals.data, function (i, n) {
                            content += "<option value='" + n.HNumber + "'>" + n.HNumber + '-' + n.HName + "</option>";
                        });
                        $("#hospitalCodeSelect").empty();
                        $("#hospitalCodeSelect").append(content);//append 添加进去并展示
                        $("#hospitalCodeSelect").find("option[value='" + hospitals.data[0].HNumber + "']").attr("selected", true);
                        $("#hospitalCodeSelect").selectpicker('refresh');
                    }
                  
                }
            })
        }

 PurchaseReceipt.html

@@ -17,7 +17,8 @@
    <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>      
    <script src="js/webConfig.js"></script>
    <style>
        .clock {
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            font-size: 20px;
@@ -27,41 +28,37 @@
            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;
        }
        

            .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;
@@ -70,25 +67,26 @@
            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{

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

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



        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
@@ -100,68 +98,69 @@
            padding-right: 0px;
            padding-left: 0px;
        }
        
        


        #mychart1,
        #mychart2,
        #mychart3{
        #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%;
        }

            #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；*/
        }

            #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;
@@ -173,25 +172,24 @@
            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 {

        .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;
@@ -203,55 +201,55 @@
            /* 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 {

        .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=[];               //近日达成率对比总收料量数数组

        var ToDayDt = [];              //近日达成率对比时间数组
        var OrderQty = [];             //近日达成率对比订单总量数数组
        var ZSQty = [];               //近日达成率对比总收料量数数组
        $(document).ready(function () {
            // 创建两个变量，一个数组中的月和日的名称
            var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
@@ -265,32 +263,32 @@
                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);

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

        function Chart(mychart1, mychart2, mychart3) {
            $.ajax({
                url: "http://192.168.2.152:80/api/loaddata/PurchaseReceiptData",
                url: GetWEBURL() + "/loaddata/PurchaseReceiptData",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                data:{"Tag":0,"limit":10,"offset":1},
                success: function (data) { 
                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);
                    
                    
                    $("#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));                   
                        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
                    {
                        text: '',
                        subtext: ReachProgress + '%',
                        textStyle: {
                            fontSize: 16,
                            color: '#999',
                            lineHeight: 20
                        },
                        subtextStyle: {
                            fontSize: 28,
                            color: '#00c6ff'
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '50%'
                    },
                    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%'
                }
                    {
                        show: true,
                        text: '达成率分析',
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: '16',
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '5%'
                    }
                ],
                tooltip: {
                    trigger: 'item',
@@ -371,60 +369,60 @@
                },
                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 }
                    ],
                }
                    {
                        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
                    {
                        text: '',
                        subtext: ZNoProgress + '%',
                        textStyle: {
                            fontSize: 16,
                            color: '#999',
                            lineHeight: 20
                        },
                        subtextStyle: {
                            fontSize: 28,
                            color: '#00c6ff'
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '50%'
                    },
                    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%'
                }
                    {
                        show: true,
                        text: '来料总不良率',
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: '16',
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '5%'
                    }
                ],
                tooltip: {
                    trigger: 'item',
@@ -436,31 +434,31 @@
                },
                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 }
                    ],
                }
                    {
                        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: '近日达成率对比',
@@ -474,7 +472,7 @@
                },
                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                tooltip: {
                    

                },
                grid: {
                    left: '3%',
@@ -490,85 +488,85 @@
                        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'
                    {
                        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',
                            
                    {
                        type: 'value',
                        axisLine: {
                            show: false,

                        },
                        show: true //隐藏或显示
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        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
                }
                    {
                        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',
                url: GetWEBURL() + '/loaddata/PurchaseReceiptTableData',
                //data: dataJson,
                method: 'get',                      //请求方式（*）
                dataType: "json",
                queryParams :queryParams,
                queryParams: queryParams,
                striped: false,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
@@ -585,85 +583,103 @@
                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: '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>";
                        }
                    }
                }},
                { 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
                    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,
                Tag: 1,
                limit: params.limit,   //页面大小
                offset: num,  //页码
            };

 SalesDelivery.html

@@ -613,7 +613,7 @@
        function DataTable() {

            $('#tb_order').bootstrapTable({
                url: 'http://192.168.2.152:80/api/loaddata/SalesDeliveryTableData',
                url: GetWEBURL() + '/loaddata/SalesDeliveryTableData',
                //data: datajson,
                method: 'get',                      //请求方式（*）
                dataType: "json",