生产计划看板页面

YL

2021-05-17 3b2bc48576c9954f977d4fcff35c7c2f1aa1adda

生产计划看板页面

 HDCall.html

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

            
        }

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


            
            
        }

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

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

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

        
        .title {

            
            font-size: 44px;
            font-family: PingFangSC;
            font-weight: 500;
@@ -70,14 +70,14 @@
            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,
@@ -86,7 +86,7 @@
            /* border: 1px solid #00c6ff; */
            height: 450px;
        }

        
        #cTitle {
            width: 50px;
            height: 450px;
@@ -95,7 +95,7 @@
            color: #00c6ff;
            border: 1px solid #333
        }

        
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
@@ -107,15 +107,15 @@
            padding-right: 0px;
            padding-left: 0px;
        }

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


        
        
        table tr td {
            text-align: center;
            vertical-align: middle !important;
@@ -127,7 +127,7 @@
            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,
@@ -136,16 +136,16 @@
        .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,
        #tb_order1 tr td {
            text-align: center;
@@ -158,7 +158,7 @@
            /* border: 1px solid #464646; */
            border: none;
        }

        
        #tb_order,
        #tb_order1 tr td {
            text-align: center;
@@ -171,53 +171,53 @@
            /* 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,
        #tb_order1 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,
        #tb_order1 tr:nth-child(even) {
            background: #000000;
        }






        
        
        
        
        
        
        #tb_order1 tr th {
            /*border: 1px solid #464646;*/
            border: none;
            font-size: 22px;
        }

        
        #tb_order1 tr td {
            text-align: center;
            height: 32px;
@@ -228,12 +228,24 @@
            /*border:1px solid #464646;*/
            border: none;
        }

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

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

        
        function Chart(mychart1, mychart2) {
            $.ajax({
                url: "http://localhost:12298/api/loaddata/CallData",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                success: function (data) {
                    TLProgress=parseFloat((data.data[2][1].qty / data.data[2][0].qty) * 100).toFixed(2);
                    //今日配送率
                    $.each(data.data[0], function (index, val) {
                        CallData.push(val.FNAME);
                        CallPSQty.push(parseFloat(val.HSendQTY).toFixed(2));
                        CAllQty.push(parseFloat(val.HQty).toFixed(2));
                    });
                },
                error: function (data) {
                    
                }
            })
            
            const colorList = ['#47A2FF ', '#FBD444']
            option1 = {
                title: [
                    {
                        text: '',
                        subtext: '10%',
                        textStyle: {
                            fontSize: 16,
                            color: '#999',
                            lineHeight: 20
                        },
                        subtextStyle: {
                            fontSize: 28,
                            color: '#00c6ff'
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '45%'
                {
                    text: '',
                    subtext: TLProgress+'%',
                    textStyle: {
                        fontSize: 16,
                        color: '#999',
                        lineHeight: 20
                    },
                    {
                        show: true,
                        text: '退料率',
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: '16',
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '5%'
                    }
                    subtextStyle: {
                        fontSize: 28,
                        color: '#00c6ff'
                    },
                    textAlign: 'center',
                    left: '50%',
                    top: '45%'
                },
                {
                    show: true,
                    text: '退料率',
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: '16',
                    },
                    textAlign: 'center',
                    left: '50%',
                    top: '5%'
                }
                ],
                tooltip: {
                    trigger: 'item',
@@ -311,29 +358,29 @@
                },
                color: colorList,
                series: [
                    {
                        name: '占比',
                        type: 'pie',
                        radius: [50, 80],
                        center: ['50%', '50%'],
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: true
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#000000'
                        },
                        data: [
                            { name: '达成率', value: 90 },
                            { name: '未达成率', value: 10 }
                        ],
                    }
                {
                    name: '占比',
                    type: 'pie',
                    radius: [50, 80],
                    center: ['50%', '50%'],
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: '#000000'
                    },
                    data: [
                    { name: '达成率', value: TLProgress },
                    { name: '未达成率', value: 100-TLProgress }
                    ],
                }
                ]
            };

            
            option2 = {
                title: {
                    text: '近日配送率',
@@ -347,7 +394,7 @@
                },
                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                tooltip: {

                    
                },
                grid: {
                    left: '3%',
@@ -357,283 +404,87 @@
                },
                legend: {
                    left: 'right',
                    data: ['任务数', '配送数'],
                    data: ['叫料数', '配送数'],
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 16,
                        fontFamily: "微软雅黑"
                    }

                    
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['05-03', '05-04', '05-05', '05-06', '05-07'],
                        axisTick: {
                            alignWithLabel: true
                        },

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

                {
                    type: 'value',
                    axisLine: {
                        show: false,
                        
                    },
                    splitLine: { //网格线
                        lineStyle: {
                            color: '#00c6ff',
                            
                        },
                        splitLine: { //网格线
                            lineStyle: {
                                color: '#00c6ff',

                            },
                            show: true //隐藏或显示
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00c6ff', //坐标值得具体的颜色
                                fontSize: '16'
                            }
                        show: true //隐藏或显示
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    }
                }
                ],
                series: [
                    {
                        name: '任务数',
                        type: 'bar',
                        data: [10, 52, 200, 334, 390]
                    },
                    {
                        name: '配送数',
                        type: 'bar',
                        data: [10, 52, 200, 334, 390]
                    }
                {
                    name: '叫料数',
                    type: 'bar',
                    data: CAllQty
                },
                {
                    name: '配送数',
                    type: 'bar',
                    data: CallPSQty
                }
                ]
            };

            
            mychart1.setOption(option1);
            mychart2.setOption(option2);


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

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

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

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

            })

            $('#tb_order1').bootstrapTable({
                //url: 'http://192.168.109.2:97/GongJiao/Product_Data',
                //url: "http://172.16.72.3:86/DaLian/Product_Data",
                data: Data1,
                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: 13,                       //每页的记录行数（*）
                pageList: [13],        //可供选择的每页的行数（*）
                strictSearch: false,                 //设置为 true启用 全匹配搜索，否则为模糊搜索
                clickToSelect: true,                //是否启用点击选中行
                singleSelect: true,                  //设置True 将禁止多选
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                height: 450,
                columns: [
                    { field: 'Stus', title: '库存状态', align: "left" },
                    { field: 'ShipListPartNumber', title: '物料编码', align: "left" },
                    { field: 'ShipListPartName', title: '物料名称', align: "left" },
                    { field: 'ShipListPartName', title: '物料规格', align: "left" },
                    { field: 'ShipListKuqty', title: '库存数量', align: "left" },
                    { field: 'ShipListZYQty', title: '占用数量', align: "left" },
                    { field: 'ShipListSYQty', title: '剩余可用数量', align: "left" },
                    { field: 'ShipListCGQty', title: '采购在途数量', align: "left" },
                    { field: 'ShipListAQqty', title: '安全库存', align: "left" },
                    { field: 'ShipListXQty', title: '需求量', align: "left" },
                    { field: 'ShipListDayqty', title: '本日需求', align: "left" }

                ],
                onClickRow: function (row, $element) {

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

                },
                onLoadSuccess: function (row) {
                    var a = $('#tb_order').bootstrapTable('getSelections');
                }

                
            })
        }


        //得到查询的参数
        function queryParams(params) {
            num += 1;
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: num,  //页码
            };
            return temp;
        }
        
        
        function BottomData(){
            $('#tb_order1').bootstrapTable({
                url: 'http://localhost:12298/api/loaddata/CallTableBottomData',
                //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: 8,                       //每页的记录行数（*）
                pageList: [8],                     //可供选择的每页的行数（*）
                strictSearch: false,                //设置为 true启用 全匹配搜索，否则为模糊搜索
                clickToSelect: true,                //是否启用点击选中行
                singleSelect: true,                  //设置True 将禁止多选
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                
                columns: [
                { field: 'KSTATUS', title: '库存状态', align: "left" },
                { field: 'KNUMBER', title: '物料编码', align: "left" },
                { field: 'KNAME', title: '物料名称', align: "left" },
                { field: 'KMODEL', title: '物料规格', align: "left" },
                { field: 'KQTY', title: '库存数量', align: "left" },
                { field: 'KZYQTY', title: '占用数量', align: "left" },
                { field: 'KKYQTY', title: '剩余可用数量', align: "left" },
                { field: 'KZTQTY', title: '采购在途数量', align: "left" },
                { field: 'KGQTY', title: '安全库存', align: "left" },
                { field: 'KXQTY', title: '需求量', align: "left" },
                { field: 'KDQTY', title: '本日需求', align: "left" }
                ],
                onClickRow: function (row, $element) {
                    
                },
                onCheck: function (row, $element) {
                    
                },
                onLoadSuccess: function (row) {
                    var num_total = (row.total)/ 8
                    if (num >= num_total) {
                        num = 0
                    }
                }               
            })
        }
        
        //得到查询的参数
        function queryParams1(params) {
            num1 += 1;
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: num1,  //页码
            };
            return temp;
        }
    </script>
</head>

<body>
    <div class='title'>韩电叫料配送看板</div>

    
    <div class="clock">
        <ul>
            <li id="Date"></li>
@@ -747,13 +623,13 @@
            <li id="point">:</li>
            <li id="sec"> </li>
        </ul>

        
    </div>
    <div class="col-sm-8">
        <div class="col-sm-12">
            <table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
        </div>

        
    </div>
    <div class="col-sm-4">
        <div id="mychart1"></div>

 HDHouse.html

@@ -344,7 +344,7 @@
                                            StepHtml += "</div>";
                                            StepHtml += "<div class='content_style w58'>";
                                                StepHtml += "<div class='content_mod content_mod_bg_true'>";
                                                    StepHtml += "<p class='mt12'>固定库位</p>";
                                                    StepHtml += "<p class='mt12'>A01</p>";
                                                    StepHtml += "<p class='mb9'>" + result[j][m].FQTY + "</p>";
                                                    StepHtml += "</div>";
                                                    

 HDLackMats.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>韩电缺料看板</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src='js/echarts.min.js'></script>
    <script src="js/bootstrap.min.js"></script>
    <script src='js/bootstrap-table.min.js'></script>
    <script src='js/bootstrap-table-zh-CN.min.js'></script>
    <script src="js/jquery.SuperSlide.2.1.3.js"></script>
    <script src='js/template.js'></script>
    <script src="js/jquery.qrcode.min.js"></script>
    <style>      
        .clock {
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            font-size: 20px;
            width: 450px;
            float: right;
            color: #fff;
            margin-top: -75px;
            margin-right: 5px;
            color: #09d1ea;
            
        }
        
        .clock #Date {
            text-align: center;
            text-shadow: 0 0 0px #00c6ff;
            
            
        }
        
        .clock ul {
            width: 450px;
            margin: 0 auto;
            padding: 0px;
            list-style: none;
            text-align: right;
            margin-left: 15px;
            position: relative;
        }
        
        .clock ul li {
            display: inline;
            font-size: 24px;
            text-align: left;
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            text-shadow: 0 0 0px #00c6ff;
        }
        
        body {
            padding-left: 50px;
            padding-right: 50px;
        }
        
        .title {
            
            font-size: 44px;
            font-family: PingFangSC;
            font-weight: 500;
            color: rgba(9, 209, 234, 1);
            text-align: center;
            background: url(img/img_little_new.png) center no-repeat;
            margin-bottom: 30px;
        }
        
        .col-sm-12 {
            position: relative;
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
        }
        
        .left{
            /* border: 1px solid #00c6ff; */
            height: 900px;
        }
        .right{
            /* border: 1px solid #00c6ff; */
            height: 300px;
        }
        
        
        
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-6,
        .col-sm-8 {
            position: relative;
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
        }
        
        
        #mychart1,
        #mychart2,
        #mychart3{
            width: 100%;
            border: none;
            height: 300px;
        }
        
        #cList {
            margin: 0% auto;
            color: #00c6ff;
        }
        
        #cList li {
            margin: 20px 0px;
            text-align:center;
            font-size: 14px;
        }
        #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">
        
        $(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();
            //根据窗口的大小变动图表 --- 重点
            window.onresize = function () {
                myChart1.resize();
                myChart2.resize();
                myChart3.resize();
            }
        })
        
        function Chart(mychart1,mychart2,mychart3){
            const colorList = ['#47A2FF', '#ff9900']
            option1 = {
                title: [
                {
                    text: '',
                    subtext: '60%',
                    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: 60 },
                    { name: '', value: 40 }
                    ],
                }
                ]
            };
            
            option2 = {
                title: [
                {
                    text: '',
                    subtext: '60%',
                    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: 60 },
                    { name: '', value: 40 }
                    ],
                }
                ]
            };
            
            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:['05-11','05-12','05-13','205-14','05-15','05-16'],
                    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: [100,100,100,100,100,100]
                },
                {
                    name: '不良数',
                    type: 'bar',
                    barWidth: 15,
                    data: [50,50,50,50,50,50]
                }
                ]
            };
            
            
            mychart1.setOption(option1);
            mychart2.setOption(option2);
            mychart3.setOption(option3);
        }
        
        function DataTable() {
            var dataJson=[
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            },
            {
                "PARTNUMBER": "2110800001",
                "PARTNAME": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "PARTSPEC": "Q5-JZ/ZIGBEE板/成品板[V1.0.1]",
                "MATSQTY": "0.0000000000",
                "HOUSEQTY": "0.0000000000",
                "OCCUPQTY": "0.0000000000",
                "AVAILQTY": "0.0000000000",
                "PUCHQTY": "0.0000000000",
                "SAFEQTY": "0.0000000000",
                "NEEDQTY": "0.0000000000",
                "DAYQTY": "0.0000000000"
            }        
            ]
            
            $('#tb_order').bootstrapTable({
                //url: 'http://localhost:12298/api/loaddata/LineTableData',
                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,                   //是否显示父子表
                
                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: 'MATSQTY', title: '缺料数量', align: "left" , formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                }},
                { field: 'HOUSEQTY', title: '库存数量', align: "left", formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                } },
                { field: 'OCCUPQTY', title: '占用数量', align: "left", formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                } },
                { field: 'AVAILQTY', title: '剩余可用数量', align: "left" , formatter: function (value, row, index) {
                    return parseFloat(value).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: 'NEEDQTY', title: '需求量', align: "left" , formatter: function (value, row, index) {
                    return parseFloat(value).toFixed(2);
                }},
                { field: 'DAYQTY', 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)/ 10
                    if (num >= num_total) {
                        num = 0
                    }
                    //var a = $('#tb_order').bootstrapTable('getSelections');
                }
                
            })
        }
        //得到查询的参数
        function queryParams(params) {
            num += 1;
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                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>状态：<span id="Stus">执行中</span></li>
                <li>总订单：<span id="OrderQty">1000</span></li>
                <li>净需求：<span id="NetQty">500</span></li>
                <li>总库存：<span id="SumQty">1200</span></li>
                <li>缺料量：<span id="MatsQty">0</span></li>
                <li>在途：<span id="WayQty">100</span></li>
                <li>未下单：<span id="NoOrderQty">200</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>

 HDMap.html

@@ -13,12 +13,12 @@
        body {
            background: #001123;
        }

        
        .left .shuju_box .shuju {
            width: 121px;
            height: 100px
        }

        
        .left,
        .right {
            top: 320px
@@ -27,7 +27,7 @@
</head>

<body>

    
    <div style="text-align: center;">
        <div class="shuju_box clearfix">
            <div class="shuju shuju1">
@@ -88,18 +88,18 @@
            </div>
        </div>
    </div>

    
    <div class="map2" id="map_1" style="width: 100%;">

        
    </div>

    
    <div id="zzt" class="left" style="width:355px;height: 355px;">

        
        <h2>柱状图存放地方</h2>

        
    </div>


    
    
</body>

</html>
@@ -107,44 +107,39 @@
<script src="js/jquery.min.js"></script>
<script src='js/echarts.min.js'></script>
<script>
    var  ss=[];
    var  aa=[];
    var  bb=[];
    $("#map_1").height($(window).height() - 0);
    window.onload = function () {
        //$(".shuju_box").width($(".shuju").outerWidth(true)*$(".shuju").length)

        
    }
    var countdata;
    function MapTabledata() {
        $.ajax({
            url: "http://localhost:12298/api/loaddata/MapTableData",
            dataType: "JSON",
            async: false,//使用同步的方式,true为异步方式
            type: "Get",
            success: function (data) {

                console.log("地图表头数据" + data.data[0][0]["HValue"]);
                $("#dq").html(data.data[0][0]["HValue"] + "+");
                $("#AllCount").html(data.data[0][1]["HValue"]);
                $("#CurrentMonthReg").html(data.data[0][2]["HValue"]);
                $("#CurMonthOrder").html(data.data[0][3]["HValue"]);
                $("#CurMonthMoney").html(data.data[0][4]["HValue"] + "+");
                $("#CurMonthFileCount").html(data.data[0][5]["HValue"]);
                $("#CurMonthArea").html(data.data[0][6]["HValue"]);

                countdata = JSON.stringify(data.data[1]);//地图数据
                console.log("地图数据" + countdata);
            },
            error: function (e) {

            }
        })

    
    
    var data=[{"name":"中国","value":200000},{"name":"印度","value":10000},{"name":"巴西","value":10000},{"name":"美国","value":10000},{"name":"德国","value":10000},{"name":"英国","value":10000},{"name":"法国","value":10000},{"name":"西班牙","value":10000},{"name":"意大利","value":10000},{"name":"葡萄牙","value":10000}];
    
    countdata = data;//地图数据
    console.log("地图数据" + countdata);
    for (var j = 0; j < 3; j++) {
        $.each(countdata, function (index, val) {
            aa.push(val.name);     
        });
        
        ss.push(aa);
        aa=[];
    }
    console.log(ss);
    
    
    
    var WorldMapData = {
        Init: function () {
            console.log("INIT" + countdata);
            var data = countdata;


            
            
            var option = {
                backgroundColor: 'transparent',
                tooltip: {
@@ -388,9 +383,9 @@
                }
                ]
            };



            
            
            
            $.getJSON('./json/world.json', function (globalJson) {
                echarts.registerMap('world', globalJson);
                // 基于准备好的dom，初始化echarts实例
@@ -405,40 +400,40 @@
                });
                chart.setOption(option, true);
            });

            
        }
    }

    
    WorldMapData.Init();


    
    
    $(function () {


        
        
        var mychart1 = echarts.init(document.getElementById('zzt'));
        aa(mychart1);
        //根据窗口的大小变动图表 --- 重点
        window.onresize = function () {
            myChart1.resize();
        }
        MapTabledata();
        
    })
    function aa(mychart1) {

        
        var years = ['2019', '2020', '2021'];
        var jdData = [
            ['中  国', '美  国', '加拿大', '俄罗斯', '丹  麦', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '俄罗斯'],
            ['中  国', '美  国', '加拿大', '俄罗斯', '丹  麦', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '俄罗斯'],
            ['中  国', '美  国', '加拿大', '俄罗斯', '丹  麦', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '俄罗斯']
        ['中  国', '美  国', '加拿大', '俄罗斯', '丹  麦', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '俄罗斯'],
        ['中  国', '美  国', '加拿大', '俄罗斯', '丹  麦', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '俄罗斯'],
        ['中  国', '美  国', '加拿大', '俄罗斯', '丹  麦', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '俄罗斯']
        ]
        var data = [
            [66666, 555, 333, 233, 123, 111, 4779, 456, 567, 90, 567, 89, 123, 234, 345, 534, 567],
            [666, 555, 333, 72, 23, 111, 2133, 456, 627, 567, 123, 234, 567, 1567, 678, 757, 890],
            [6666, 777, 333, 221, 45, 1111, 35, 567, 768, 1273, 345, 567, 8920, 890, 3245, 975, 345,],
        [66666, 555, 333, 233, 123, 111, 4779, 456, 567, 90, 567, 89, 123, 234, 345, 534, 567],
        [666, 555, 333, 72, 23, 111, 2133, 456, 627, 567, 123, 234, 567, 1567, 678, 757, 890],
        [6666, 777, 333, 221, 45, 1111, 35, 567, 768, 1273, 345, 567, 8920, 890, 3245, 975, 345,],
        ];

        
        option = {

            
            baseOption: {
                backgroundColor: '', //背景颜色
                timeline: {
@@ -446,7 +441,7 @@
                    axisType: 'category',
                    autoPlay: true,
                    playInterval: 1500, //播放速度

                    
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
@@ -455,7 +450,7 @@
                    label: {
                        normal: {
                            textStyle: {

                                
                                color: '#00E4FF',
                            }
                        },
@@ -485,7 +480,7 @@
                            borderColor: 'red'
                        }
                    },

                    
                },
                title: {
                    text: '',
@@ -515,7 +510,7 @@
                    }
                },
                yAxis: [{

                    
                    nameGap: 50,
                    offset: '37',
                    'type': 'category',
@@ -525,34 +520,34 @@
                    nameTextStyle: {
                        color: 'red'
                    },


                    
                    
                    axisLabel: {
                        //rotate:45,
                        show: false,
                        textStyle: {
                            fontSize: 32,

                            
                            color: function (params, Index) { // 标签国家字体颜色

                                
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色

                                
                                var colorarrays = ['', '', '', '', '', '',
                                    '', '', '', '', '', '',
                                    '', '', '', '', '', '', ''
                                '', '', '', '', '', '',
                                '', '', '', '', '', '', ''
                                ];

                                
                                //console.log("111", Index, colorarrays[Index],params); //打印序列

                                
                                return colorarrays[jdData[0].indexOf(params)];
                            },


                            
                            
                        }, //rotate:45,
                        interval: 50
                    },
                    axisLine: {

                        
                        lineStyle: {
                            color: '' //Y轴颜色
                        },
@@ -563,12 +558,12 @@
                            color: ''
                        }
                    },

                    
                }],
                xAxis: [{
                    'type': 'value',
                    'name': '',

                    
                    splitNumber: 8, //轴线个数
                    nameTextStyle: {
                        color: 'balck'
@@ -617,32 +612,32 @@
                                // build a color map as your need.
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色         
                                var colorList = ['', '', '', '', '', '',
                                    '', '', '', '', '', '',
                                    '', '', '', '', '', '', ''
                                '', '', '', '', '', '',
                                '', '', '', '', '', '', ''
                                ];
                                // return colorList[params.dataIndex]

                                
                                //console.log("111", params.name); //打印序列
                                return colorList[jdData[0].indexOf(params.name)];
                            },

                            
                        }
                    },
                },

                
                {
                    'name': '',
                    'type': 'bar',
                    markLine: {


                        
                        
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        lineStyle: {

                            
                            normal: {
                                color: 'red',
                                width: 3
@@ -663,34 +658,34 @@
                    },
                    itemStyle: {
                        normal: {


                            
                            
                            color: function (params) {
                                // build a color map as your need.
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色         
                                var colorList = ['#84e4dd', '#7fec9d', '#ffe4b5', '#ffe4b5', '#00E4FF', '#749f83',
                                    '#ffe4b5', '#ffe4b5', '#84e4dd', '#ffe4b5', '#ffe4b5', '#ffe4b5',
                                    '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5'
                                '#ffe4b5', '#ffe4b5', '#84e4dd', '#ffe4b5', '#ffe4b5', '#ffe4b5',
                                '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5', '#ffe4b5'
                                ];
                                // return colorList[params.dataIndex]

                                
                                // console.log("111", params.name); //打印序列
                                return colorList[jdData[0].indexOf(params.name)];
                            },

                            
                        }
                    },
                }
                ],

                
                animationEasingUpdate: 'quinticInOut',
                animationDurationUpdate: 1500, //动画效果
            },

            
            options: []
        };
        for (var n = 0; n < years.length; n++) {

            
            var res = [];
            //alert(jdData.length);
            for (j = 0; j < data[n].length; j++) {
@@ -698,18 +693,18 @@
                    name: jdData[n][j],
                    value: data[n][j]
                });

                
            }

            
            res.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6);

            
            res.sort(function (a, b) {
                return a.value - b.value;
            });


            
            
            var res1 = [];
            var res2 = [];
            //console.log(res);
@@ -733,6 +728,6 @@
        }
        mychart1.setOption(option);
    }


    
    
</script>

 HDPrctPlan.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>韩电生产计划看板</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src='js/echarts.min.js'></script>
    <script src="js/bootstrap.min.js"></script>
    <script src='js/bootstrap-table.min.js'></script>
    <script src='js/bootstrap-table-zh-CN.min.js'></script>
    <script src="js/jquery.SuperSlide.2.1.3.js"></script>
    <script src='js/template.js'></script>
    <script src="js/jquery.qrcode.min.js"></script>
    <style>      
        .clock {
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            font-size: 20px;
            width: 450px;
            float: right;
            color: #fff;
            margin-top: -75px;
            margin-right: 5px;
            color: #09d1ea;
            
        }
        
        .clock #Date {
            text-align: center;
            text-shadow: 0 0 0px #00c6ff;
            
            
        }
        
        .clock ul {
            width: 450px;
            margin: 0 auto;
            padding: 0px;
            list-style: none;
            text-align: right;
            margin-left: 15px;
            position: relative;
        }
        
        .clock ul li {
            display: inline;
            font-size: 24px;
            text-align: left;
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            text-shadow: 0 0 0px #00c6ff;
        }
        
        body {
            padding-left: 50px;
            padding-right: 50px;
        }
        
        .title {
            
            font-size: 44px;
            font-family: PingFangSC;
            font-weight: 500;
            color: rgba(9, 209, 234, 1);
            text-align: center;
            background: url(img/img_little_new.png) center no-repeat;
            margin-bottom: 30px;
        }
        
        .col-sm-12 {
            position: relative;
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
        }
        
        .top{
            /* border: 1px solid #00c6ff; */
            height: 300px;
        }
        .bottom{
            /* border: 1px solid #00c6ff; */
            height: 600px;
        }
        .bottom_left{
            /* border: 1px solid #00c6ff; */
            height: 300px;
        }
        
        
        
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-6,
        .col-sm-8 {
            position: relative;
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
        }
        
        
        #mychart1,
        #mychart2,
        #mychart3{
            width: 100%;
            border: none;
            height: 300px;
        }
        #mychart4,
        #mychart5{
            width: 100%;
            border: none;
            height: 300px;
        }
        #mychart6,
        #mychart7{
            width: 100%;
            border: none;
            height: 600px;
        }
        #cList {
            margin: 20% auto;
            color: #00c6ff;
        }
        
        #cList li {
            margin: 26px auto;
            text-align:center;
        }
        #cList1 {
            float: left;
        }
        
        #cList1 li {
            float: left;
            height: 450px;
            color: #00c6ff;
            font-size: 20px;
            /*文字居中*/
            text-align: center;
            /*display: flex;*/
        }
        
        #cList1 li span {
            /*文字居中*/
            display: inline-block;
            height: 100%;
            /*文字居中*/
            
            /*文字竖排*/
            writing-mode: vertical-lr;
            /*从左向右 从右向左是 writing-mode: vertical-rl;*/
            writing-mode: tb-lr;
            /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
        }
    </style>
    <script type="text/javascript">
        
        $(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'));
            var mychart4 = echarts.init(document.getElementById('mychart4'));
            var mychart5 = echarts.init(document.getElementById('mychart5'));
            var mychart6 = echarts.init(document.getElementById('mychart6'));
            var mychart7 = echarts.init(document.getElementById('mychart7'));
            Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7);
            //根据窗口的大小变动图表 --- 重点
            window.onresize = function () {
                myChart1.resize();
                myChart2.resize();
                myChart3.resize();
                myChart4.resize();
                myChart5.resize();
            }
        })
        
        function Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7){
            const colorList = ['#47A2FF', '#ff9900']
            option1 = {
                title: [
                {
                    text: '',
                    subtext: '60%',
                    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: 'left',
                    
                }
                ],
                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: 60 },
                    { name: '', value: 40 }
                    ],
                }
                ]
            };
            
            option2 = {
                title: [
                {
                    text: '',
                    subtext: '30%',
                    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: 30 },
                    { name: '', value: 100-30 }
                    ],
                }
                ]
            };
            
            option3 = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['任务数', '完成数'],
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 16,
                        fontFamily: "微软雅黑"
                    }
                },
                grid: {
                    top:'10%',
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis:  {
                    type: 'value',
                    max: 1000,
                    axisTick: {
                        alignWithLabel: true
                    },
                    splitLine:{
                        show:false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00c6ff',
                            type: 'solid', //设置网格线类型 dotted：虚线   solid:实线
                            width: 1, //隐藏y轴
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['车间1','车间2','车间3','车间4','车间5','车间6','车间7'],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00c6ff',
                            type: 'solid', //设置网格线类型 dotted：虚线   solid:实线
                            width: 1, //隐藏y轴
                        }
                    },
                    splitLine:{
                        show:false
                    },
                    splitLine: { //网格线
                        lineStyle: {
                            color: '#00c6ff',
                            
                        },
                        show: false //隐藏或显示
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    }
                },
                series: [
                {
                    name: '任务数',
                    type: 'bar',
                    stack: '总量',
                    barWidth: 10,
                    itemStyle:{
                        normal: {
                            color: '#47A2FF',
                            barBorderRadius: [20, 20, 20, 20],
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    z:  10,
                    data: [320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name: '完成数',
                    type: 'bar',
                    stack: '总量',
                    barWidth: 10,
                    itemStyle:{
                        normal: {
                            color: '#ff9900',
                            shadowBlur: [0, 0, 0, 10],
                            shadowColor: '#ff9900',
                            barBorderRadius: [20, 20, 20, 20],
                            shadowOffsetX: 0,
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight',
                            textStyle: { //文字样式
                                //fontSize:12
                            }
                        }
                    },
                    z: 5,
                    data: [120, 132, 101, 134, 90, 230, 210]
                }
                ]
            };
            
            option4 = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}月 : {c}万"
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点'],   //时间点数据
                    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: ['小时产能'],
                    x:'right',      //可设定图例在左、右、居中
                    y:'top',     //可设定图例在上、下、居中
                    //padding:[0,0,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 20,
                        fontFamily: "微软雅黑"
                    }
                },
                series: [
                {
                    name: '小时产能',
                    data: [50,80,90,110,130,115,120,109,105,135,125],  //时间点值
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'orange',
                            lineStyle: {
                                width: 4, //设置线条粗细
                                shadowColor: 'rgba(255, 94, 91,.1)',
                                shadowOffsetX: 3,
                                shadowOffsetY: 5,
                            }
                        },
                    },
                    textStyle: {
                        fontFamily: "微软雅黑"
                    }
                },
                ]
            }
            
            option5 = {
                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:['05-11','05-12','05-13','205-14','05-15','05-16'],
                    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: [100,100,100,100,100,100]
                },
                {
                    name: '入库数',
                    type: 'bar',
                    barWidth: 15,
                    data: [50,50,50,50,50,50]
                }
                ]
            };
            
            option6 = {
                title: {
                    text: '产销比分析（按天查询）',
                    left: '30',
                    top: 2,
                    textStyle: {
                        fontSize: 20,
                        color: '#00c6ff',
                        fontFamily: "微软雅黑"
                    },
                },
                color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                tooltip: {
                    
                },
                grid: {
                    left: '5%',
                    right: '2%',
                    bottom: '5%',
                    containLabel: true
                },
                legend: {
                    left: 'right',
                    data: ['销售订单数', '入库数'],
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 16,
                        fontFamily: "微软雅黑"
                    }
                    
                },
                xAxis: [
                {
                    type: 'category',
                    data:['05-11','05-12','05-13','205-14','05-15','05-16'],
                    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: [100,100,100,100,100,100]
                },
                {
                    name: '入库数',
                    type: 'bar',
                    barWidth: 15,
                    data: [50,50,50,50,50,50]
                }
                ]
            };
            
            option7 = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}月 : {c}万"
                },
                grid: {
                    left: '25',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点'],   //时间点数据
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00c6ff',
                        },
                    },
                    axisTick: {
                        show: true,
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00c6ff',
                            width: 0, //隐藏y轴
                        }
                    },
                    splitLine: { //网格线
                        lineStyle: {
                            type: 'dotted', //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: false //隐藏或显示
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#00c6ff', //坐标值得具体的颜色
                            fontSize: '16'
                        }
                    },
                    splitNumber: 5
                }],
                title: {
                    show: true,
                    text: '生产总效率趋势图（当日全部产线汇总）',
                    x: 'left',
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 18,
                        fotweight: 'normal',
                        fontFamily: "微软雅黑"
                    },
                    textAlign: 'left',
                    left: '20',
                    top: '0%'
                },
                legend: {
                    icon: 'line',
                    data: ['小时产能'],
                    x:'right',      //可设定图例在左、右、居中
                    y:'top',     //可设定图例在上、下、居中
                    //padding:[0,0,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    textStyle: {
                        color: '#00c6ff',
                        fontSize: 20,
                        fontFamily: "微软雅黑"
                    }
                },
                series: [
                {
                    name: '小时产能',
                    data: [50,80,90,110,130,115,120,109,105,135,125],  //时间点值
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'orange',
                            lineStyle: {
                                width: 4, //设置线条粗细
                                shadowColor: 'rgba(255, 94, 91,.1)',
                                shadowOffsetX: 3,
                                shadowOffsetY: 5,
                            }
                        },
                    },
                    textStyle: {
                        fontFamily: "微软雅黑"
                    }
                },
                ]
            }
            
            mychart1.setOption(option1);
            mychart2.setOption(option2);
            mychart3.setOption(option3);
            mychart4.setOption(option4);
            mychart5.setOption(option5);
            mychart6.setOption(option6);
            mychart7.setOption(option7);
        }
        
    </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 top">
        <div class="col-sm-6 top">
            <div id="mychart1"></div>
        </div>
        <div class="col-sm-3 top">
            <ul id="cList">
                <li style="font-size:24px;">订单量</li>
                <li style="font-size:24px;"><span id="OrderQty">10000</span></li>
                <li style="font-size:24px;">产量</li>
                <li style="font-size:24px;"><span id="ProductQty">8000</span></li>
            </ul>
        </div>
        <div class="col-sm-3 top">
            <div id="mychart2"></div>
        </div>
    </div>
    <div class="col-sm-4 top">
        <div id="mychart3"></div>
    </div>
    
    <div class="col-sm-8 bottom">
        <div class="col-sm-6 bottom_left">
            <div class="col-sm-12 bottom_left">
                <div id="mychart4"></div>
            </div>
            <div class="col-sm-12 bottom_left">
                <div id="mychart5"></div>
            </div>
        </div>
        <div class="col-sm-6 bottom">
            <div id="mychart6"></div>
        </div>
    </div>
    <div class="col-sm-4 bottom">
        <div id="mychart7"></div>
    </div>
</body>

</html>