TV.kanbanUI.git

parent: 0b310bde | 补丁 | 提交 | ignore whitespace

yangle

2022-09-14 e227e1308ff2dc472750e72a9c44e29e5f592fdb

生产设备产量分析看板

2个文件已添加

	KB_EquipmentUtilizationRate.html	736 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	KB_ProductionEquipmentOutputAnalysis.html	1009 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 KB_EquipmentUtilizationRate.html

New file
@@ -0,0 +1,736 @@
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <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: 250px;
        }



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

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

        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 LackMastProgress = [];     //缺料率数据数组
        var BadProgress = [];          //来料不良率数据数组
        var ToDayDt = [];              //今日不良对比时间数组
        var GoodQty = [];              //今日不良对比合格数数组
        var BadQty = [];               //今日不良对比不良数数组
        $(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;
                LackMastProgress = [];     //缺料率数据数组
                BadProgress = [];          //来料不良率数据数组
                ToDayDt = [];              //今日不良对比时间数组
                GoodQty = [];              //今日不良对比合格数数组
                BadQty = [];               //今日不良对比不良数数组
                Chart(mychart1, mychart2, mychart3);
            }, 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://122.227.199.62:5058/HDKanBanApi/api/loaddata/LackMatsData",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                data: { "HouseCode": HouseCode },
                success: function (data) {
                    //订单信息
                    switch (data.data[0][0].Statu) {
                        case '1':
                            $("#Stus").html("计划");
                            break;
                        case '2':
                            $("#Stus").html("计划确认");
                            break;
                        case '3':
                            $("#Stus").html("下达");
                            break;
                        case '4':
                            $("#Stus").html("开工");
                            break;
                        case '5':
                            $("#Stus").html("完工");
                            break;
                        case '6':
                            $("#Stus").html("结案");
                            break;
                        case '7':
                            $("#Stus").html("结算");
                        default:
                    }
                    $("#OrderQty").html(parseFloat(data.data[0][0].ZQty).toFixed(0));
                    $("#NetQty").html(parseFloat(data.data[0][0].EmptQty).toFixed(0));
                    $("#SumQty").html(parseFloat(data.data[0][0].ZKQty).toFixed(0));
                    $("#MatsQty").html(parseFloat(data.data[0][0].LackMastQty).toFixed(0));
                    $("#WayQty").html(parseFloat(data.data[0][0].PuchQty).toFixed(0));

                    //缺料率
                    LackMastProgress.push(data.data[1][0].LackMastProgress);
                    //来料不良率
                    BadProgress.push(data.data[2][0].BadProgress);
                    //今日不良对比
                    $.each(data.data[3], function (index, val) {
                        ToDayDt.push(val.hour.substring(5));
                        GoodQty.push(parseFloat(val.GoodQty).toFixed(0));
                        BadQty.push(parseFloat(val.BadQty).toFixed(0));
                    });
                },
                error: function (data) {

                }
            })

            const colorList = ['#47A2FF', '#ff9900']
            option1 = {
                title: [
                    {
                        text: '',
                        subtext: LackMastProgress + '%',
                        textStyle: {
                            fontSize: 16,
                            color: '#999',
                            lineHeight: 20
                        },
                        subtextStyle: {
                            fontSize: 28,
                            color: '#00c6ff'
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '85%'
                    },
                    {
                        show: true,
                        text: '总稼动率分析',
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: '16',
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '0%'
                    }
                ],
                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: LackMastProgress },
                            { name: '', value: 100 - LackMastProgress }
                        ],
                    }
                ]
            };

            option2 = {
                title: [
                    {
                        text: '',
                        subtext: BadProgress + '%',
                        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: BadProgress },
                            { name: '', value: 100 - BadProgress }
                        ],
                    }
                ]
            };

            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: GoodQty
                    },
                    {
                        name: '完成数',
                        type: 'bar',
                        barWidth: 15,
                        data: BadQty
                    }
                ]
            };


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

        function DataTable() {

            $('#tb_order').bootstrapTable({
                url: 'http://122.227.199.62:5058/HDKanBanApi/api/loaddata/LackMatsTableData',
                //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: 'PartNumber', title: '物料编码', align: "left" },
                    {
                        field: 'PartName', 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: 'PartSpec', 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: 'LackMastQty', title: '缺料数量', align: "left", formatter: function (value, row, index) {
                            return parseFloat(value).toFixed(2);
                        }
                    },
                    {
                        field: 'KQty', title: '库存数量', align: "left", formatter: function (value, row, index) {
                            return parseFloat(value).toFixed(2);
                        }
                    },
                    {
                        field: 'EmpQty', title: '占用数量', align: "left", formatter: function (value, row, index) {
                            return parseFloat(value).toFixed(2);
                        }
                    },
                    {
                        field: 'AVAILQTY', title: '剩余可用数量', align: "left", formatter: function (value, row, index) {
                            var res = row.KQty - row.EmpQty;
                            return parseFloat(res).toFixed(2);
                        }
                    },
                    {
                        field: 'PuchQty', title: '采购在途数量', align: "left", formatter: function (value, row, index) {
                            return parseFloat(value).toFixed(2);
                        }
                    },
                    {
                        field: 'SafeQty', title: '安全库存', align: "left", formatter: function (value, row, index) {
                            return parseFloat(value).toFixed(2);
                        }
                    },
                    {
                        field: 'SupQty', title: '需求量', align: "left", formatter: function (value, row, index) {
                            return parseFloat(value).toFixed(2);
                        }
                    },
                    {
                        field: 'ToDaySupQty', title: '本日求量', align: "left", formatter: function (value, row, index) {
                            return parseFloat(value).toFixed(2);
                        }
                    }
                ],
                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 = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                HouseCode: HouseCode,
                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">
        <table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
    </div>
    <div class="col-sm-4 right">
        <div class="col-sm-6 right">
            <ul id="cList">
                <li style="font-size: 25px">状态：<span id="Stus"></span></li>
                <li>总设备数量：<span id="OrderQty">0</span></li>
                <li>开机：<span id="NetQty">0</span></li>
                <li>开工：<span id="SumQty">0</span></li>
                <li>待机：<span id="MatsQty">0</span></li>
                <li>维修中：<span id="WayQty">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>

 KB_ProductionEquipmentOutputAnalysis.html

New file
@@ -0,0 +1,1009 @@
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <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/bootstrap-select.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-select.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>
        .clock0 {
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            font-size: 20px;
            width: 450px;
            float: left;
            color: #fff;
            margin-top: -75px;
            margin-right: 5px;
            color: #09d1ea;
        }

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

        .col-sm-8,
        .col-sm-6,
        .col-sm-4,
        .col-sm-3,
        .col-sm-2 {
            /* border: 1px solid #00c6ff; */
            height: 450px;
        }

        #cTitle {
            width: 50px;
            height: 450px;
            font-size: 25px;
            line-height: 30px;
            color: #00c6ff;
            border: 1px solid #333
        }

        .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,
        #mychart4,
        #mychart5 {
            width: 100%;
            border: none;
            height: 450px;
        }

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

            #cList li {
                margin: 26px auto;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

                #cList li span {
                    word-wrap: break-word;
                    word-break: break-all;
                    overflow: hidden;
                }

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

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

        #cList2 {
            height: 450px;
            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;
        }

        .col-sm-3 {
            width: 20%;
        }

        .bootstrap-select.form-control:not([class*=col-]) {
            width: 220px;
            /* float: right; */
        }

        .bootstrap-select > .dropdown-toggle.bs-placeholder,
        .bootstrap-select > .dropdown-toggle.bs-placeholder:active,
        .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
        .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
            border-color: #080E2D !important;
            background-color: #000 !important;
            color: #09d1ea !important;
        }

        .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
            color: #09d1ea !important;
        }

        .bootstrap-select.btn-group .dropdown-menu {
            background-color: #000 !important;
        }

        .form-control {
            background-color: #000 !important;
        }

            .form-control:focus {
                border-color: #09d1ea !important;
            }

            .form-control:hover {
                border-color: #000 !important;
            }

        .btn-default:hover {
            border-color: #09d1ea !important;
        }

        .bootstrap-select.btn-group .dropdown-menu li a:hover {
            background-color: rgba(255, 255, 255, 0.3) !important;
        }

        .btn-default {
            border-color: #09d1ea !important;
            color: #09d1ea !important;
            background-color: #000 !important;
        }

        .bootstrap-select.form-control:hover {
            background-color: #000 !important;
        }

        .btn-default:hover {
            background-color: #000 !important;
            border-color: #09d1ea !important;
            color: #09d1ea !important;
        }

        .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
            background-color: rgba(255, 255, 255, 0.3) !important;
        }
    </style>
    <script type="text/javascript">
        //配置参数
        var LineCode = '11111'//生产资源编码
        var LineCodeList = 'BM000002';//流水线看板今日全部流水线编码:产线1、产线2、产线3、产线4、产线5、产线6



        var interval;//计时器
        var interval1;//计时器
        var num = 0;
        var hours = [];
        var hoursqty = [];
        var CloseProgress = 0;  //完工率
        var LineName = [];  //流水线数组
        var LineOrderQty = [];  //流水线当天订单总任务数量数组
        var LineOrderCloseQty = [];  //流水线当天订单总完成数量数组
        var Week = 0;  //本周分析
        var Month = 0; //本月分析
        $(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 () {
            showHospitalCode();
            var mychart1 = echarts.init(document.getElementById('mychart1'));
            var mychart2 = echarts.init(document.getElementById('mychart2'));
            var mychart3 = echarts.init(document.getElementById('mychart3'));
            var mychart4 = echarts.init(document.getElementById('mychart4'));
            var mychart5 = echarts.init(document.getElementById('mychart5'));
            Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
            DataTable();
            // 定时器
            interval = setInterval(function () {
                hours = [];
                hoursqty = [];
                CloseProgress = 0;  //完工率
                LineName = [];  //流水线数组
                LineOrderQty = [];  //流水线当天订单总任务数量数组
                LineOrderCloseQty = [];  //流水线当天订单总完成数量数组
                Week = 0;  //本周分析
                Month = 0; //本月分析
                Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
            }, 20000);
            setInterval(function () {
                //num+=1;
                //$("#tb_order").bootstrapTable('refreshOptions',{offset:num});  // pageNumber:1, 指定页码为第1页
                $("#tb_order").bootstrapTable('refresh');
            }, 10000);
            //根据窗口的大小变动图表 --- 重点
            window.onresize = function () {
                myChart1.resize();
                myChart2.resize();
                myChart3.resize();
                myChart4.resize();
                myChart5.resize();
            }
        })

        function Chart(mychart1, mychart2, mychart3, mychart4, mychart5) {
            $.ajax({
                url: "http://localhost:12298/api/loaddata/KB_ProductData",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                data: { "LineCode": LineCode, "LineCodeList": LineCodeList },
                success: function (data) {

                    $.each(data.data[0], function (index, val) {
                        hours.push(val.hour + '点');
                        hoursqty.push(parseFloat(val.Count).toFixed(2));

                    });
                    if (data.data[1].length > 0) {
                        $("#OrderQty").html(parseFloat(data.data[1][0].HDatePlanQty).toFixed(2)); //总订单
                        $("#OrderInQty").html(parseFloat(data.data[1][0].HQty).toFixed(2));//已入库

                        CloseProgress = parseFloat(data.data[1][0].HQty / data.data[1][0].HDatePlanQty).toFixed(2);  //完成率
                    }

                    if (data.data[2].length > 0) {
                        $("#LineStus").html(data.data[2][0].HICMOStatus);
                    }

                    //今日全部流水线产量对比
                    $.each(data.data[3], function (index, val) {
                        LineName.push(val.FNAME);
                        LineOrderQty.push(parseFloat(val.qty).toFixed(2));
                        LineOrderCloseQty.push(parseFloat(val.inqty).toFixed(2));

                    });

                    //本周分析
                    Week = parseFloat(data.data[4][1].weekqty / data.data[4][0].weekqty).toFixed(2);
                    //本月分析
                    Month = parseFloat(data.data[4][3].weekqty / data.data[4][2].weekqty).toFixed(2);
                },
                error: function (data) {

                }
            })


            option1 = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}月 : {c}"
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: hours,   //时间点数据
                    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: "微软雅黑"
                    }
                },
                legend: {
                    icon: 'line',
                    data: ['小时产能'],
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 20,
                        fontFamily: "微软雅黑"
                    }
                },
                series: [
                    {
                        name: '小时产能',
                        data: hoursqty,  //时间点值
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: 'orange',
                                lineStyle: {
                                    width: 4, //设置线条粗细
                                    shadowColor: 'rgba(255, 94, 91,.1)',
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 5,
                                }
                            },
                        },
                        textStyle: {
                            fontFamily: "微软雅黑"
                        }
                    },
                ]
            }

            const colorList = ['#47A2FF ', '#FBD444']

            option2 = {
                title: {
                    text: '达成率',
                    subtext: (CloseProgress * 100).toFixed(0) + '%',
                    textStyle: {
                        fontSize: 20,
                        color: '#00c6ff',
                        lineHeight: 20,
                        fontFamily: "微软雅黑"
                    },
                    subtextStyle: {
                        fontSize: 18,
                        color: '#00c6ff'
                    },
                    textAlign: 'center',
                    left: '50%',
                    top: '70%'
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    type: 'scroll',
                    icon: 'pin',
                    show: true,
                    top: '90%',
                    left: 'center',
                    textStyle: {
                        color: '#09d1ea'
                    }
                },
                color: colorList,
                series: [
                    {
                        name: '占比',
                        type: 'pie',
                        radius: [50, 80],
                        center: ['50%', '50%'],
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#000000'
                        },
                        data: [
                            { name: '达成率', value: CloseProgress > 1 ? 1 : CloseProgress },
                            { name: '未达成率', value: CloseProgress > 1 ? 0 : 1 - CloseProgress }
                        ]
                    }
                ]
            };

            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: LineName,
                        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',
                        data: LineOrderQty
                    },
                    {
                        name: '完成数',
                        type: 'bar',
                        data: LineOrderCloseQty
                    }
                ]
            };

            option4 = {
                title: [
                    {
                        text: '达成率',
                        subtext: (Week * 100).toFixed(0) + '%',
                        textStyle: {
                            fontSize: 16,
                            color: '#999',
                            lineHeight: 20
                        },
                        subtextStyle: {
                            fontSize: 28,
                            color: '#00c6ff'
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '70%'
                    },
                    {
                        show: true,
                        text: '本周分析',
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: '16',
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '5%'
                    }
                ],
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    type: 'scroll',
                    icon: 'pin',
                    show: true,
                    top: '90%',
                    left: 'center',
                    textStyle: {
                        color: '#09d1ea'
                    }
                },
                color: colorList,
                series: [
                    {
                        name: '姓名',
                        type: 'pie',
                        radius: [50, 80],
                        center: ['50%', '50%'],
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#000000'
                        },
                        data: [
                            { name: '达成率', value: Week > 1 ? 1 : Week },
                            { name: '未达成率', value: Week > 1 ? 0 : 1 - Week }
                        ],
                    }
                ]
            };

            option5 = {
                title: [
                    {
                        text: '达成率',
                        subtext: (Month * 100).toFixed(0) + '%',
                        textStyle: {
                            fontSize: 16,
                            color: '#999',
                            lineHeight: 20
                        },
                        subtextStyle: {
                            fontSize: 28,
                            color: '#00c6ff'
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '70%'
                    },
                    {
                        show: true,
                        text: '本月分析',
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: '16',
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '5%'
                    }
                ],
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    type: 'scroll',
                    icon: 'pin',
                    show: true,
                    top: '90%',
                    left: 'center',
                    textStyle: {
                        color: '#09d1ea'
                    }
                },
                color: colorList,
                series: [
                    {
                        name: '姓名',
                        type: 'pie',
                        radius: [50, 80],
                        center: ['50%', '50%'],
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#000000'
                        },
                        data: [
                            { name: '达成率', value: Month > 1 ? 1 : Month },
                            { name: '未达成率', value: Month > 1 ? 0 : 1 - Month }
                        ],
                    }
                ]
            };


            mychart1.setOption(option1);
            mychart2.setOption(option2);
            mychart3.setOption(option3);
            mychart4.setOption(option4);
            mychart5.setOption(option5);

        }

        function DataTable() {
            $('#tb_order').bootstrapTable({
                url: 'http://localhost:12298/api/loaddata/KB_ProductTableData',
                //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: 10,                       //每页的记录行数（*）
                pageList: [10],                     //可供选择的每页的行数（*）
                strictSearch: false,                //设置为 true启用 全匹配搜索，否则为模糊搜索
                clickToSelect: true,                //是否启用点击选中行
                singleSelect: true,                  //设置True 将禁止多选
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                //responseHandler: function (res) {
                //    // 对返回参数进行处理
                //    //console.log(res);
                //    //return {
                //    //    "total": res.total,
                //    //    "rows": res.rows
                //    //};
                //},
                columns: [
                    { field: 'HICMOBillNo', title: '生产订单号', align: "left" },
                    { field: 'HNumber', title: '产品编码', align: "left" },
                    { field: 'HName', title: '产品名称', align: "left" },
                    { field: 'HModel', title: '产品规格', align: "left" },
                    {
                        field: 'HPlanQty', title: '订单数量', align: "left", width: 100, formatter: function (value, row, index) {
                            return parseFloat(value).toFixed(2);
                        }
                    },
                    {
                        field: 'HSplitRelationQty', title: '完成数量', align: "left", width: 100, formatter: function (value, row, index) {
                            return parseFloat(value).toFixed(2);
                        }
                    },
                    {
                        field: 'FQTY', title: '库存数量', align: "left", width: 100, formatter: function (value, row, index) {
                            return parseFloat(value).toFixed(2);
                        }
                    },
                    {
                        field: 'HICMOStatus', title: '状态', align: "left", width: 100
                    },
                    {
                        field: 'Progress', title: '进度', align: "left", formatter: function (value, row, index) {
                            var res = 100 * row.HSplitRelationQty / row.HPlanQty;
                            return "<div class='w40 div_co pw'><div class='PA' style='text-align:right;color:#4b2dba;float:right;height:20px;line-height:25px'>" + res.toFixed(2) + "%</div><div class='progress' style='margin-top:4px;'><div class='progress-bar progress-diy-info' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%';text-align:center;'></div></div></div>";
                        }
                    }
                ],
                onClickRow: function (row, $element) {

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

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

            })
        }
        //得到查询的参数
        function queryParams(params) {
            num += 1;
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                LineCode: LineCode,
                limit: params.limit,   //页面大小
                offset: num,  //页码
            };
            return temp;
        }
            //选择事件
            function selectOnchang(obj) {
                LineCode = obj.options[obj.selectedIndex].value;
                Chart(mychart1, mychart2, mychart3, mychart4, mychart5)
                //DataTable();
                $('#tb_order').bootstrapTable('refresh');
        }
        function showHospitalCode() {
            $.ajax({
                url: "http://localhost:12298/api/loaddata/Gy_Source",//跳转到控制器HospitalController
                type: "get",
                success: function (Data) {
                    var hospitals = JSON.parse(Data);//反序列化
                    var content = '';
                    $.each(hospitals.data, function (i, n) {
                        content += "<option value='" + n.HNumber + "'>" + n.HName + "</option>";
                    });
                    $("#hospitalCodeSelect").append(content);//append 添加进去并展示
                    $("#hospitalCodeSelect").find("option[value='" + hospitals.data[0].HNumber + "']").attr("selected", true);
                    $("#hospitalCodeSelect").selectpicker('refresh');
                   
                }
            })
        }
    </script>
</head>
<body>
    <div class='title'>生产设备产量分析看板</div>
    <div class="clock0">
        <select class="selectpicker show-tick form-control" id="hospitalCodeSelect" data-live-search="true" title="搜索或选择流水线" style="float: left;" onchange="selectOnchang(this)">
            <option value=''></option>
        </select>
    </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">
        <div class="col-sm-7">
            <div id="mychart1"></div>
        </div>
        <div class="col-sm-3">
            <ul id="cList">
                <li style="font-size: 25px"><span>设备状态：</span><span id="LineStus"></span></li>
                <li><span>订单量：</span><span id="OrderQty">0</span></li>
                <li><span>产量：</span><span id="OrderInQty">0</span></li>
            </ul>
        </div>
        <div class="col-sm-2">
            <div id="mychart2"></div>
        </div>
    </div>
    <div class="col-sm-4">
        <div id="mychart3"></div>
    </div>
    <div class="col-sm-8">
        <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">
        <div class="col-sm-6">
            <div id="mychart4"></div>
        </div>
        <div class="col-sm-6">
            <div id="mychart5"></div>
        </div>
    </div>
</body>
</html>

New file
			@@ -0,0 +1,736 @@
			<!DOCTYPE html>

			<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
			<head>
			<meta charset="utf-8" />
			<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: 250px;
			}



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

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

			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 LackMastProgress = []; //缺料率数据数组
			var BadProgress = []; //来料不良率数据数组
			var ToDayDt = []; //今日不良对比时间数组
			var GoodQty = []; //今日不良对比合格数数组
			var BadQty = []; //今日不良对比不良数数组
			$(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;
			LackMastProgress = []; //缺料率数据数组
			BadProgress = []; //来料不良率数据数组
			ToDayDt = []; //今日不良对比时间数组
			GoodQty = []; //今日不良对比合格数数组
			BadQty = []; //今日不良对比不良数数组
			Chart(mychart1, mychart2, mychart3);
			}, 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://122.227.199.62:5058/HDKanBanApi/api/loaddata/LackMatsData",
			dataType: "JSON",
			async: false,//使用同步的方式,true为异步方式
			type: "Get",
			data: { "HouseCode": HouseCode },
			success: function (data) {
			//订单信息
			switch (data.data[0][0].Statu) {
			case '1':
			$("#Stus").html("计划");
			break;
			case '2':
			$("#Stus").html("计划确认");
			break;
			case '3':
			$("#Stus").html("下达");
			break;
			case '4':
			$("#Stus").html("开工");
			break;
			case '5':
			$("#Stus").html("完工");
			break;
			case '6':
			$("#Stus").html("结案");
			break;
			case '7':
			$("#Stus").html("结算");
			default:
			}
			$("#OrderQty").html(parseFloat(data.data[0][0].ZQty).toFixed(0));
			$("#NetQty").html(parseFloat(data.data[0][0].EmptQty).toFixed(0));
			$("#SumQty").html(parseFloat(data.data[0][0].ZKQty).toFixed(0));
			$("#MatsQty").html(parseFloat(data.data[0][0].LackMastQty).toFixed(0));
			$("#WayQty").html(parseFloat(data.data[0][0].PuchQty).toFixed(0));

			//缺料率
			LackMastProgress.push(data.data[1][0].LackMastProgress);
			//来料不良率
			BadProgress.push(data.data[2][0].BadProgress);
			//今日不良对比
			$.each(data.data[3], function (index, val) {
			ToDayDt.push(val.hour.substring(5));
			GoodQty.push(parseFloat(val.GoodQty).toFixed(0));
			BadQty.push(parseFloat(val.BadQty).toFixed(0));
			});
			},
			error: function (data) {

			}
			})

			const colorList = ['#47A2FF', '#ff9900']
			option1 = {
			title: [
			{
			text: '',
			subtext: LackMastProgress + '%',
			textStyle: {
			fontSize: 16,
			color: '#999',
			lineHeight: 20
			},
			subtextStyle: {
			fontSize: 28,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '85%'
			},
			{
			show: true,
			text: '总稼动率分析',
			textStyle: {
			color: '#00c6ff',
			fontSize: '16',
			},
			textAlign: 'center',
			left: '50%',
			top: '0%'
			}
			],
			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: LackMastProgress },
			{ name: '', value: 100 - LackMastProgress }
			],
			}
			]
			};

			option2 = {
			title: [
			{
			text: '',
			subtext: BadProgress + '%',
			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: BadProgress },
			{ name: '', value: 100 - BadProgress }
			],
			}
			]
			};

			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: GoodQty
			},
			{
			name: '完成数',
			type: 'bar',
			barWidth: 15,
			data: BadQty
			}
			]
			};


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

			function DataTable() {

			$('#tb_order').bootstrapTable({
			url: 'http://122.227.199.62:5058/HDKanBanApi/api/loaddata/LackMatsTableData',
			//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: 'PartNumber', title: '物料编码', align: "left" },
			{
			field: 'PartName', 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: 'PartSpec', 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: 'LackMastQty', title: '缺料数量', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			},
			{
			field: 'KQty', title: '库存数量', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			},
			{
			field: 'EmpQty', title: '占用数量', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			},
			{
			field: 'AVAILQTY', title: '剩余可用数量', align: "left", formatter: function (value, row, index) {
			var res = row.KQty - row.EmpQty;
			return parseFloat(res).toFixed(2);
			}
			},
			{
			field: 'PuchQty', title: '采购在途数量', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			},
			{
			field: 'SafeQty', title: '安全库存', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			},
			{
			field: 'SupQty', title: '需求量', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			},
			{
			field: 'ToDaySupQty', title: '本日求量', align: "left", formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			}
			],
			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 = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			HouseCode: HouseCode,
			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">
			<table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
			</div>
			<div class="col-sm-4 right">
			<div class="col-sm-6 right">
			<ul id="cList">
			<li style="font-size: 25px">状态：<span id="Stus"></span></li>
			<li>总设备数量：<span id="OrderQty">0</span></li>
			<li>开机：<span id="NetQty">0</span></li>
			<li>开工：<span id="SumQty">0</span></li>
			<li>待机：<span id="MatsQty">0</span></li>
			<li>维修中：<span id="WayQty">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,1009 @@
			<!DOCTYPE html>

			<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
			<head>
			<meta charset="utf-8" />
			<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/bootstrap-select.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-select.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>
			.clock0 {
			font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
			font-size: 20px;
			width: 450px;
			float: left;
			color: #fff;
			margin-top: -75px;
			margin-right: 5px;
			color: #09d1ea;
			}

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

			.col-sm-8,
			.col-sm-6,
			.col-sm-4,
			.col-sm-3,
			.col-sm-2 {
			/* border: 1px solid #00c6ff; */
			height: 450px;
			}

			#cTitle {
			width: 50px;
			height: 450px;
			font-size: 25px;
			line-height: 30px;
			color: #00c6ff;
			border: 1px solid #333
			}

			.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,
			#mychart4,
			#mychart5 {
			width: 100%;
			border: none;
			height: 450px;
			}

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

			#cList li {
			margin: 26px auto;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			}

			#cList li span {
			word-wrap: break-word;
			word-break: break-all;
			overflow: hidden;
			}

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

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

			#cList2 {
			height: 450px;
			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;
			}

			.col-sm-3 {
			width: 20%;
			}

			.bootstrap-select.form-control:not([class*=col-]) {
			width: 220px;
			/* float: right; */
			}

			.bootstrap-select > .dropdown-toggle.bs-placeholder,
			.bootstrap-select > .dropdown-toggle.bs-placeholder:active,
			.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
			.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
			border-color: #080E2D !important;
			background-color: #000 !important;
			color: #09d1ea !important;
			}

			.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
			color: #09d1ea !important;
			}

			.bootstrap-select.btn-group .dropdown-menu {
			background-color: #000 !important;
			}

			.form-control {
			background-color: #000 !important;
			}

			.form-control:focus {
			border-color: #09d1ea !important;
			}

			.form-control:hover {
			border-color: #000 !important;
			}

			.btn-default:hover {
			border-color: #09d1ea !important;
			}

			.bootstrap-select.btn-group .dropdown-menu li a:hover {
			background-color: rgba(255, 255, 255, 0.3) !important;
			}

			.btn-default {
			border-color: #09d1ea !important;
			color: #09d1ea !important;
			background-color: #000 !important;
			}

			.bootstrap-select.form-control:hover {
			background-color: #000 !important;
			}

			.btn-default:hover {
			background-color: #000 !important;
			border-color: #09d1ea !important;
			color: #09d1ea !important;
			}

			.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
			background-color: rgba(255, 255, 255, 0.3) !important;
			}
			</style>
			<script type="text/javascript">
			//配置参数
			var LineCode = '11111'//生产资源编码
			var LineCodeList = 'BM000002';//流水线看板今日全部流水线编码:产线1、产线2、产线3、产线4、产线5、产线6



			var interval;//计时器
			var interval1;//计时器
			var num = 0;
			var hours = [];
			var hoursqty = [];
			var CloseProgress = 0; //完工率
			var LineName = []; //流水线数组
			var LineOrderQty = []; //流水线当天订单总任务数量数组
			var LineOrderCloseQty = []; //流水线当天订单总完成数量数组
			var Week = 0; //本周分析
			var Month = 0; //本月分析
			$(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 () {
			showHospitalCode();
			var mychart1 = echarts.init(document.getElementById('mychart1'));
			var mychart2 = echarts.init(document.getElementById('mychart2'));
			var mychart3 = echarts.init(document.getElementById('mychart3'));
			var mychart4 = echarts.init(document.getElementById('mychart4'));
			var mychart5 = echarts.init(document.getElementById('mychart5'));
			Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
			DataTable();
			// 定时器
			interval = setInterval(function () {
			hours = [];
			hoursqty = [];
			CloseProgress = 0; //完工率
			LineName = []; //流水线数组
			LineOrderQty = []; //流水线当天订单总任务数量数组
			LineOrderCloseQty = []; //流水线当天订单总完成数量数组
			Week = 0; //本周分析
			Month = 0; //本月分析
			Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
			}, 20000);
			setInterval(function () {
			//num+=1;
			//$("#tb_order").bootstrapTable('refreshOptions',{offset:num}); // pageNumber:1, 指定页码为第1页
			$("#tb_order").bootstrapTable('refresh');
			}, 10000);
			//根据窗口的大小变动图表 --- 重点
			window.onresize = function () {
			myChart1.resize();
			myChart2.resize();
			myChart3.resize();
			myChart4.resize();
			myChart5.resize();
			}
			})

			function Chart(mychart1, mychart2, mychart3, mychart4, mychart5) {
			$.ajax({
			url: "http://localhost:12298/api/loaddata/KB_ProductData",
			dataType: "JSON",
			async: false,//使用同步的方式,true为异步方式
			type: "Get",
			data: { "LineCode": LineCode, "LineCodeList": LineCodeList },
			success: function (data) {

			$.each(data.data[0], function (index, val) {
			hours.push(val.hour + '点');
			hoursqty.push(parseFloat(val.Count).toFixed(2));

			});
			if (data.data[1].length > 0) {
			$("#OrderQty").html(parseFloat(data.data[1][0].HDatePlanQty).toFixed(2)); //总订单
			$("#OrderInQty").html(parseFloat(data.data[1][0].HQty).toFixed(2));//已入库

			CloseProgress = parseFloat(data.data[1][0].HQty / data.data[1][0].HDatePlanQty).toFixed(2); //完成率
			}

			if (data.data[2].length > 0) {
			$("#LineStus").html(data.data[2][0].HICMOStatus);
			}

			//今日全部流水线产量对比
			$.each(data.data[3], function (index, val) {
			LineName.push(val.FNAME);
			LineOrderQty.push(parseFloat(val.qty).toFixed(2));
			LineOrderCloseQty.push(parseFloat(val.inqty).toFixed(2));

			});

			//本周分析
			Week = parseFloat(data.data[4][1].weekqty / data.data[4][0].weekqty).toFixed(2);
			//本月分析
			Month = parseFloat(data.data[4][3].weekqty / data.data[4][2].weekqty).toFixed(2);
			},
			error: function (data) {

			}
			})


			option1 = {
			tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}月 : {c}"
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: hours, //时间点数据
			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: "微软雅黑"
			}
			},
			legend: {
			icon: 'line',
			data: ['小时产能'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 20,
			fontFamily: "微软雅黑"
			}
			},
			series: [
			{
			name: '小时产能',
			data: hoursqty, //时间点值
			type: 'line',
			smooth: true,
			itemStyle: {
			normal: {
			color: 'orange',
			lineStyle: {
			width: 4, //设置线条粗细
			shadowColor: 'rgba(255, 94, 91,.1)',
			shadowOffsetX: 3,
			shadowOffsetY: 5,
			}
			},
			},
			textStyle: {
			fontFamily: "微软雅黑"
			}
			},
			]
			}

			const colorList = ['#47A2FF ', '#FBD444']

			option2 = {
			title: {
			text: '达成率',
			subtext: (CloseProgress * 100).toFixed(0) + '%',
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			lineHeight: 20,
			fontFamily: "微软雅黑"
			},
			subtextStyle: {
			fontSize: 18,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '70%'
			},
			tooltip: {
			trigger: 'item',
			},
			legend: {
			type: 'scroll',
			icon: 'pin',
			show: true,
			top: '90%',
			left: 'center',
			textStyle: {
			color: '#09d1ea'
			}
			},
			color: colorList,
			series: [
			{
			name: '占比',
			type: 'pie',
			radius: [50, 80],
			center: ['50%', '50%'],
			label: {
			show: false
			},
			labelLine: {
			show: false
			},
			itemStyle: {
			borderWidth: 3,
			borderColor: '#000000'
			},
			data: [
			{ name: '达成率', value: CloseProgress > 1 ? 1 : CloseProgress },
			{ name: '未达成率', value: CloseProgress > 1 ? 0 : 1 - CloseProgress }
			]
			}
			]
			};

			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: LineName,
			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',
			data: LineOrderQty
			},
			{
			name: '完成数',
			type: 'bar',
			data: LineOrderCloseQty
			}
			]
			};

			option4 = {
			title: [
			{
			text: '达成率',
			subtext: (Week * 100).toFixed(0) + '%',
			textStyle: {
			fontSize: 16,
			color: '#999',
			lineHeight: 20
			},
			subtextStyle: {
			fontSize: 28,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '70%'
			},
			{
			show: true,
			text: '本周分析',
			textStyle: {
			color: '#00c6ff',
			fontSize: '16',
			},
			textAlign: 'center',
			left: '50%',
			top: '5%'
			}
			],
			tooltip: {
			trigger: 'item',
			},
			legend: {
			type: 'scroll',
			icon: 'pin',
			show: true,
			top: '90%',
			left: 'center',
			textStyle: {
			color: '#09d1ea'
			}
			},
			color: colorList,
			series: [
			{
			name: '姓名',
			type: 'pie',
			radius: [50, 80],
			center: ['50%', '50%'],
			label: {
			show: false
			},
			labelLine: {
			show: false
			},
			itemStyle: {
			borderWidth: 3,
			borderColor: '#000000'
			},
			data: [
			{ name: '达成率', value: Week > 1 ? 1 : Week },
			{ name: '未达成率', value: Week > 1 ? 0 : 1 - Week }
			],
			}
			]
			};

			option5 = {
			title: [
			{
			text: '达成率',
			subtext: (Month * 100).toFixed(0) + '%',
			textStyle: {
			fontSize: 16,
			color: '#999',
			lineHeight: 20
			},
			subtextStyle: {
			fontSize: 28,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '70%'
			},
			{
			show: true,
			text: '本月分析',
			textStyle: {
			color: '#00c6ff',
			fontSize: '16',
			},
			textAlign: 'center',
			left: '50%',
			top: '5%'
			}
			],
			tooltip: {
			trigger: 'item',
			},
			legend: {
			type: 'scroll',
			icon: 'pin',
			show: true,
			top: '90%',
			left: 'center',
			textStyle: {
			color: '#09d1ea'
			}
			},
			color: colorList,
			series: [
			{
			name: '姓名',
			type: 'pie',
			radius: [50, 80],
			center: ['50%', '50%'],
			label: {
			show: false
			},
			labelLine: {
			show: false
			},
			itemStyle: {
			borderWidth: 3,
			borderColor: '#000000'
			},
			data: [
			{ name: '达成率', value: Month > 1 ? 1 : Month },
			{ name: '未达成率', value: Month > 1 ? 0 : 1 - Month }
			],
			}
			]
			};


			mychart1.setOption(option1);
			mychart2.setOption(option2);
			mychart3.setOption(option3);
			mychart4.setOption(option4);
			mychart5.setOption(option5);

			}

			function DataTable() {
			$('#tb_order').bootstrapTable({
			url: 'http://localhost:12298/api/loaddata/KB_ProductTableData',
			//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: 10, //每页的记录行数（*）
			pageList: [10], //可供选择的每页的行数（*）
			strictSearch: false, //设置为 true启用全匹配搜索，否则为模糊搜索
			clickToSelect: true, //是否启用点击选中行
			singleSelect: true, //设置True 将禁止多选
			uniqueId: "ID", //每一行的唯一标识，一般为主键列
			cardView: false, //是否显示详细视图
			detailView: false, //是否显示父子表
			//responseHandler: function (res) {
			// // 对返回参数进行处理
			// //console.log(res);
			// //return {
			// // "total": res.total,
			// // "rows": res.rows
			// //};
			//},
			columns: [
			{ field: 'HICMOBillNo', title: '生产订单号', align: "left" },
			{ field: 'HNumber', title: '产品编码', align: "left" },
			{ field: 'HName', title: '产品名称', align: "left" },
			{ field: 'HModel', title: '产品规格', align: "left" },
			{
			field: 'HPlanQty', title: '订单数量', align: "left", width: 100, formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			},
			{
			field: 'HSplitRelationQty', title: '完成数量', align: "left", width: 100, formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			},
			{
			field: 'FQTY', title: '库存数量', align: "left", width: 100, formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			},
			{
			field: 'HICMOStatus', title: '状态', align: "left", width: 100
			},
			{
			field: 'Progress', title: '进度', align: "left", formatter: function (value, row, index) {
			var res = 100 * row.HSplitRelationQty / row.HPlanQty;
			return "<div class='w40 div_co pw'><div class='PA' style='text-align:right;color:#4b2dba;float:right;height:20px;line-height:25px'>" + res.toFixed(2) + "%</div><div class='progress' style='margin-top:4px;'><div class='progress-bar progress-diy-info' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%';text-align:center;'></div></div></div>";
			}
			}
			],
			onClickRow: function (row, $element) {

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

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

			})
			}
			//得到查询的参数
			function queryParams(params) {
			num += 1;
			var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			LineCode: LineCode,
			limit: params.limit, //页面大小
			offset: num, //页码
			};
			return temp;
			}
			//选择事件
			function selectOnchang(obj) {
			LineCode = obj.options[obj.selectedIndex].value;
			Chart(mychart1, mychart2, mychart3, mychart4, mychart5)
			//DataTable();
			$('#tb_order').bootstrapTable('refresh');
			}
			function showHospitalCode() {
			$.ajax({
			url: "http://localhost:12298/api/loaddata/Gy_Source",//跳转到控制器HospitalController
			type: "get",
			success: function (Data) {
			var hospitals = JSON.parse(Data);//反序列化
			var content = '';
			$.each(hospitals.data, function (i, n) {
			content += "<option value='" + n.HNumber + "'>" + n.HName + "</option>";
			});
			$("#hospitalCodeSelect").append(content);//append 添加进去并展示
			$("#hospitalCodeSelect").find("option[value='" + hospitals.data[0].HNumber + "']").attr("selected", true);
			$("#hospitalCodeSelect").selectpicker('refresh');

			}
			})
			}
			</script>
			</head>
			<body>
			<div class='title'>生产设备产量分析看板</div>
			<div class="clock0">
			<select class="selectpicker show-tick form-control" id="hospitalCodeSelect" data-live-search="true" title="搜索或选择流水线" style="float: left;" onchange="selectOnchang(this)">
			<option value=''></option>
			</select>
			</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">
			<div class="col-sm-7">
			<div id="mychart1"></div>
			</div>
			<div class="col-sm-3">
			<ul id="cList">
			<li style="font-size: 25px"><span>设备状态：</span><span id="LineStus"></span></li>
			<li><span>订单量：</span><span id="OrderQty">0</span></li>
			<li><span>产量：</span><span id="OrderInQty">0</span></li>
			</ul>
			</div>
			<div class="col-sm-2">
			<div id="mychart2"></div>
			</div>
			</div>
			<div class="col-sm-4">
			<div id="mychart3"></div>
			</div>
			<div class="col-sm-8">
			<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">
			<div class="col-sm-6">
			<div id="mychart4"></div>
			</div>
			<div class="col-sm-6">
			<div id="mychart5"></div>
			</div>
			</div>
			</body>
			</html>