TV.kanbanUI.git

parent: 271cc477 | 补丁 | 提交 | ignore whitespace

2021-05-26 d984c2ca34019b55b11240dc22b77e6d39f9890c

notihing

2个文件已添加

	QuatAnys.html	874 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	WIPInWorkshop.html	961 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 QuatAnys.html

New file
@@ -0,0 +1,874 @@
<!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;
            }
            
            .ctn{
                /* border: 1px solid #00c6ff; */
                height: 450px;  
            }
            
            
            
            .col-sm-12,
            .col-sm-2,
            .col-sm-3,
            .col-sm-4,
            .col-sm-5,
            .col-sm-6,
            .col-sm-7,
            .col-sm-8 {
                position: relative;
                min-height: 1px;
                padding-right: 0px;
                padding-left: 0px;
                /* border: 1px solid #00c6ff; */
            }
            
            
            #mychart1,
            #mychart4,
            #mychart5
            {
                width: 100%;
                border: none;
                height: 450px;
            }
            #mychart2,#mychart3,
            #mychart6,#mychart7{
                width: 100%;
                border: none;
                height: 450px;
            }
            
            #cList {
                margin: 0% 25px;
                color: #00c6ff;
            }
            
            #cList li {
                margin: 13px auto;
                text-align:left;
            }
            #cList1 {
                float: left;
            }
            
            #cList1 li {
                float: left;
                height: 450px;
                color: #00c6ff;
                font-size: 20px;
                /*文字居中*/
                text-align: center;
                /*display: flex;*/
            }
            
            #cList1 li span {
                /*文字居中*/
                display: inline-block;
                height: 100%;
                /*文字居中*/
                
                /*文字竖排*/
                writing-mode: vertical-lr;
                /*从左向右 从右向左是 writing-mode: vertical-rl;*/
                writing-mode: tb-lr;
                /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
            }
        </style>
        <script type="text/javascript">
            
            
            var interval;              //计时器
            var InComBadProgress=0;    //来料不良率
            var OnceGoodProgress=0;    //一次合格率
            
            var WkShop=[];          //车间合格率对比车间数组
            var TaskQty=[];          //车间合格率对比任务数数组
            var EndQty=[];          //车间合格率对比完成数数组
            
            var CHour=[];           //不良原因对比分析时间数组
            var COrderQty=[];       //不良原因对比分析任务数数组
            var CInQty=[];          //不良原因对比分析完成数数组
            
            var ZDte=[];             //生产总效率趋势时间数组
            var ZQty=[];             //生产总效率趋势值数组
            $(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'));
                Chart(mychart1,mychart2,mychart3,mychart4,mychart5);
                // 定时器
                interval = setInterval(function () {
                    InComBadProgress=0;      //来料不良率
                    OnceGoodProgress=0;      //一次合格率
                    
                    WkShop=[];          //车间合格率对比车间数组
                    TaskQty=[];          //车间合格率对比任务数数组
                    EndQty=[];          //车间合格率对比完成数数组
                    
                    CHour=[];           //不良原因对比分析时间数组
                    COrderQty=[];       //不良原因对比分析任务数数组
                    CInQty=[];          //不良原因对比分析完成数数组
                    
                    ZDte=[];             //生产总效率趋势时间数组
                    ZQty=[];             //生产总效率趋势值数组
                    Chart(mychart1,mychart2,mychart3,mychart4,mychart5);
                }, 30000);
                //根据浏览器大小改变大小
                window.onresize = () => {
                    mychart1.resize();
                    mychart2.resize();
                    mychart3.resize();
                    mychart4.resize();
                    mychart5.resize();
                }
            })
            
            function Chart(mychart1,mychart2,mychart3,mychart4,mychart5){
                $.ajax({
                    url: "http://192.168.2.152:80/api/loaddata/QualityAnalysis",
                    dataType: "JSON",
                    async: false,//使用同步的方式,true为异步方式
                    type: "Get",
                    success: function (data) { 
                        //本月产量
                        $("#MonthPcQty").html(data.data[0][0].MonthPcQty);
                        //本月合格
                        $("#MonthGoodQty").html(data.data[0][0].MonthGoodQty);
                        //成品一次合格率
                        $("#OnceGoodProgress").html(data.data[1][0].OnceGoodProgress+"%");
                        //来料不良率
                        $("#InComBadProgress").html(data.data[2][0].InComBadProgress+"%");
                        //一次合格率
                        OnceGoodProgress=data.data[1][0].OnceGoodProgress;
                        //来料不良率
                        InComBadProgress=data.data[2][0].InComBadProgress;
                        
                        //车间合格率对比
                        $.each(data.data[3], function (index, val) {
                            WkShop.push(val.WkShop);
                            TaskQty.push(parseFloat(val.TaskQty).toFixed(0));
                            EndQty.push(parseFloat(val.EndQty).toFixed(0));                       
                        });
                        
                        //不良原因对比分析
                        $.each(data.data[4], function (index, val) {
                            CHour.push(val.hour.substring(5));
                            COrderQty.push(parseFloat(val.OrderQty).toFixed(0));
                            CInQty.push(parseFloat(val.InQty).toFixed(0)); 
                        });
                        
                        //合格率率趋势图
                        $.each(data.data[5], function (index, val) {
                            ZDte.push(val.hour+"点");
                            ZQty.push(parseFloat(val.GoodQty).toFixed(0));
                        });
                    },
                    error: function (data) {
                        
                    }
                })
                
                option1 = {
                    title: {
                        text: '车间合格率对比',
                        left: '0',
                        top: 2,
                        textStyle: {
                            fontSize: 20,
                            color: '#00c6ff',
                            fontFamily: "微软雅黑"
                        },
                    },
                    tooltip : {
                        
                    },
                    legend: {
                        left: 'right',
                        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: WkShop,
                        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: TaskQty
                    },
                    {
                        name: '完成数',
                        type: 'bar',
                        stack: '总量',
                        barWidth: 10,
                        itemStyle:{
                            normal: {
                                color: '#ff9900',
                                shadowBlur: [0, 0, 0, 10],
                                shadowColor: '#ff9900',
                                barBorderRadius: [20, 20, 20, 20],
                                shadowOffsetX: 0,
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight',
                                textStyle: { //文字样式
                                    //fontSize:12
                                }
                            }
                        },
                        z: 5,
                        data: EndQty
                    }
                    ]
                };
                
                
                var highlight = '#00c6ff';
                var demoData = [
                { name: '一次合格率', value: OnceGoodProgress, unit: '%', pos: ['50%', '60%'], range: [0, 100] },
                ];           
                option2 = {
                    series: (function() {
                        var result = [];
                        
                        demoData.forEach(function(item) {
                            result.push(
                            // 外围刻度
                            {
                                type: 'gauge',
                                radius: '70%',  // 1行3个
                                center:['50%','60%'],  //边距
                                splitNumber: item.splitNum || 10,
                                min: item.range[0],
                                max: item.range[1],
                                startAngle: 180,
                                endAngle: 0,
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        width: 2,
                                        shadowBlur: 0,
                                        color: [
                                        [1, highlight]
                                        ]
                                    }
                                },
                                axisTick: {
                                    show: true,
                                    lineStyle: {
                                        color: highlight,
                                        width: 1
                                    },
                                    length: -5,
                                    splitNumber: 10
                                },
                                splitLine: {
                                    show: true,
                                    length: -14,
                                    lineStyle: {
                                        color: highlight,
                                    }
                                },
                                axisLabel: {
                                    distance: -20,
                                    textStyle: {
                                        color: highlight,
                                        fontSize: '14',
                                        fontWeight: 'bold'
                                    }
                                },
                                pointer: {
                                    show: 0
                                },
                                detail: {
                                    show: 0
                                }
                            },
                            
                            // 内侧指针、数值显示
                            {
                                name: item.name,
                                type: 'gauge',
                                center: item.pos,
                                radius: '60%',
                                center:['50%','60%'],  //边距
                                startAngle: 180,
                                endAngle: 0,
                                min: item.range[0],
                                max: item.range[1],
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        width: 16,
                                        color: [
                                        [1, 'rgba(255,255,255,.1)']
                                        ]
                                    }
                                },
                                axisTick: {
                                    show: 0,
                                },
                                splitLine: {
                                    show: 0,
                                },
                                axisLabel: {
                                    show: 0
                                },
                                pointer: {
                                    show: true,
                                    length: '105%'
                                },
                                detail: {
                                    show: true,
                                    offsetCenter: [0, '50%'],
                                    textStyle: {
                                        fontSize: 20,
                                        color: '#00c6ff'
                                    },
                                    formatter: [
                                    '{value} ' + (item.unit || ''),
                                    '{name|' + item.name + '}'
                                    ].join('\n'),
                                    rich: {
                                        name: {
                                            fontSize: 20,
                                            lineHeight: 30,
                                            color: '#00c6ff'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: highlight,
                                    }
                                },
                                data: [{
                                    value: item.value
                                }]
                            }
                            );
                        });
                        
                        return result;
                    })()
                };
                
                const colorList = ['#47A2FF', '#ff9900']
                option3 = {
                    title: [
                    {
                        text: '',
                        subtext: InComBadProgress+'%',
                        textStyle: {
                            fontSize: 16,
                            color: '#999',
                            lineHeight: 20
                        },
                        subtextStyle: {
                            fontSize: 28,
                            color: '#00c6ff'
                        },
                        textAlign: 'center',
                        left: '50%',
                        top: '50%'
                    },
                    {
                        show: true,
                        text: '来料不良率',
                        textStyle: {
                            fontSize: 20,
                            color: '#00c6ff',
                            fontFamily: "微软雅黑"
                        },
                        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: InComBadProgress },
                        { name: '', value: 100-InComBadProgress }
                        ],
                    }
                    ]
                };
                
                
                
                
                option4 = {
                    title: {
                        text: '不良原因对比分析',
                        left: '0',
                        top: 2,
                        textStyle: {
                            fontSize: 20,
                            color: '#00c6ff',
                            fontFamily: "微软雅黑"
                        },
                    },
                    color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                    tooltip: {
                        
                    },
                    grid: {
                        left: '25',
                        right: '4%',
                        bottom: '7%',
                        containLabel: true
                    },
                    legend: {
                        left: 'right',
                        data: ['任务数', '完成数'],
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: 16,
                            fontFamily: "微软雅黑"
                        }
                        
                    },
                    xAxis: [
                    {
                        type: 'category',
                        data:CHour,
                        axisTick: {
                            alignWithLabel: true
                        },
                        
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#00c6ff',
                                type: 'solid', //设置网格线类型 dotted：虚线   solid:实线
                                width: 1, //隐藏y轴
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#00c6ff', //坐标值得具体的颜色
                                fontSize: '16'
                            }
                        }
                    }
                    ],
                    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: COrderQty
                    },
                    {
                        name: '完成数',
                        type: 'bar',
                        barWidth: 15,
                        data: CInQty
                    }
                    ]
                };
                
                option5 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}月 : {c}万"
                    },
                    grid: {
                        left: '25',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ZDte,   //时间点数据
                        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: ZQty,  //时间点值
                        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);
                
                
            }
            
        </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-4 ctn">
            <div class="col-sm-12 ctn">
                <div id="mychart1"></div>
            </div>
        </div>
        <div  class="col-sm-4 ctn">
            <div class="col-sm-5 ctn">
                <ul id="cList">
                    <li style="font-size:24px;">状态:</li>
                    <li style="font-size:24px;">本月产量</li>
                    <li style="font-size:24px;"><span id="MonthPcQty">0</span></li>
                    <li style="font-size:24px;">本月合格</li>
                    <li style="font-size:24px;"><span id="MonthGoodQty">0</span></li>
                    <li style="font-size:24px;">成品一次合格率</li>
                    <li style="font-size:24px;"><span id="OnceGoodProgress">0</span></li>
                    <li style="font-size:24px;">来料不良率</li>
                    <li style="font-size:24px;"><span id="InComBadProgress">0</span></li>
                </ul>
            </div>
            <div class="col-sm-7 ctn">
                <div id="mychart2"></div>
            </div>
        </div>
        <div  class="col-sm-4 ctn">
            <div class="col-sm-12 ctn">
                <div id="mychart3"></div>
            </div>
        </div>
        <div  class="col-sm-8 ctn">
            <div class="col-sm-12 ctn">
                <div id="mychart4" style="margin-top:2%;"></div>
            </div>
        </div>
        <div  class="col-sm-4 ctn">
            <div class="col-sm-12 ctn">
                <div id="mychart5" style="margin-top:2%;"></div>
            </div>
        </div>
    </body>
    
    </html>

 WIPInWorkshop.html

New file
@@ -0,0 +1,961 @@
<!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;
            }
            
            .ctn{
                /* border: 1px solid #00c6ff; */
                height: 300px;  
            }
            .cbn{
                /* border: 1px solid #00c6ff; */
                height: 600px;  
            }
            
            
            .col-sm-12,
            .col-sm-2,
            .col-sm-3,
            .col-sm-4,
            .col-sm-5,
            .col-sm-6,
            .col-sm-7,
            .col-sm-8 {
                position: relative;
                min-height: 1px;
                padding-right: 0px;
                padding-left: 0px;
                /* border: 1px solid #00c6ff; */
            }
            
            
            #mychart1,
            #mychart4,
            #mychart5
            {
                width: 100%;
                border: none;
                height: 300px;
            }
            #mychart2,#mychart3,
            #mychart6,#mychart7{
                width: 100%;
                border: none;
                height: 300px;
            }
            
        </style>
        <script type="text/javascript">
            var interval;              //计时器
            
            var Step=[];            //在制品状态工序数组
            var StepQty=[];         //在制品状态工序对应的数量(进站出站对比)数组
            
            
            $(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()]);
                    $("#Steps").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);
            })
            function Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7){
                var data={
                    "code": 200,
                    "data": [
                    [
                    {
                        "Step": "下料",
                        "StepQty": 1200
                    },
                    {
                        "Step": "裁切",
                        "StepQty": 1000
                    },
                    {
                        "Step": "钻孔",
                        "StepQty": 800
                    },
                    {
                        "Step": "去毛刺",
                        "StepQty": 760
                    },
                    {
                        "Step": "折弯",
                        "StepQty": 750
                    },
                    {
                        "Step": "压铆",
                        "StepQty": 700
                    },
                    {
                        "Step": "普冲1",
                        "StepQty": 680
                    },
                    {
                        "Step": "普冲2",
                        "StepQty": 650
                    },
                    {
                        "Step": "抛光",
                        "StepQty": 600
                    },
                    {
                        "Step": "喷涂",
                        "StepQty": 500
                    },
                    {
                        "Step": "丝印",
                        "StepQty": 430
                    },
                    {
                        "Step": "装配",
                        "StepQty": 400
                    }
                    ]
                    ]
                }
                
                //在制品状态
                $.each(data.data[0], function (index, val) {
                    Step.push(val.Step);
                    StepQty.push(parseFloat(val.StepQty).toFixed(0));                   
                });
                
                option1 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}月 : {c}万"
                    },
                    grid: {
                        left: '25',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: Step,   //时间点数据
                        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: StepQty,  //时间点值
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: 'orange',
                                lineStyle: {
                                    width: 4, //设置线条粗细
                                    shadowColor: 'rgba(255, 94, 91,.1)',
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 5,
                                }
                            },
                        },
                        textStyle: {
                            fontFamily: "微软雅黑"
                        }
                    },
                    ]
                }
                
                option2 = {
                    title: {
                        text: '下料',
                        x: 'center',
                        top: 2,
                        textStyle: {
                            fontSize: 20,
                            color: '#00c6ff',
                            fontFamily: "微软雅黑"
                        },
                    },
                    color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                    tooltip: {
                        
                    },
                    grid: {
                        top:'15%',
                        left: '25',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    legend: {
                        x: 'right',
                        y:'left',
                        data: ['任务数', '完成数'],
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: 16,
                            fontFamily: "微软雅黑"
                        }
                        
                    },
                    xAxis: [
                    {
                        type: 'category',
                        data:["产品1","产品2","产品3","产品4","产品5"],
                        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,220,180,300,260]
                    },
                    {
                        name: '完成数',
                        type: 'bar',
                        barWidth: 15,
                        data: [80,175,120,230,200]
                    }
                    ]
                };
                
                option3 = {
                    title: {
                        text: '裁切',
                        x: 'center',
                        top: 2,
                        textStyle: {
                            fontSize: 20,
                            color: '#00c6ff',
                            fontFamily: "微软雅黑"
                        },
                    },
                    color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                    tooltip: {
                        
                    },
                    grid: {
                        top:'15%',
                        left: '25',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    legend: {
                        x: 'right',
                        y:'left',
                        data: ['任务数', '完成数'],
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: 16,
                            fontFamily: "微软雅黑"
                        }
                        
                    },
                    xAxis: [
                    {
                        type: 'category',
                        data:["产品1","产品2","产品3","产品4","产品5"],
                        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,220,180,300,260]
                    },
                    {
                        name: '完成数',
                        type: 'bar',
                        barWidth: 15,
                        data: [80,175,120,230,200]
                    }
                    ]
                };
                
                option4 = {
                    title: {
                        text: '钻孔',
                        x: 'center',
                        top: 2,
                        textStyle: {
                            fontSize: 20,
                            color: '#00c6ff',
                            fontFamily: "微软雅黑"
                        },
                    },
                    color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                    tooltip: {
                        
                    },
                    grid: {
                        top:'15%',
                        left: '25',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    legend: {
                        x: 'right',
                        y:'left',
                        data: ['任务数', '完成数'],
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: 16,
                            fontFamily: "微软雅黑"
                        }
                        
                    },
                    xAxis: [
                    {
                        type: 'category',
                        data:["产品1","产品2","产品3","产品4","产品5"],
                        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,220,180,300,260]
                    },
                    {
                        name: '完成数',
                        type: 'bar',
                        barWidth: 15,
                        data: [80,175,120,230,200]
                    }
                    ]
                };
                
                option5 = {
                    title: {
                        text: '去毛刺',
                        x: 'center',
                        top: 2,
                        textStyle: {
                            fontSize: 20,
                            color: '#00c6ff',
                            fontFamily: "微软雅黑"
                        },
                    },
                    color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                    tooltip: {
                        
                    },
                    grid: {
                        top:'15%',
                        left: '25',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    legend: {
                        x: 'right',
                        y:'left',
                        data: ['任务数', '完成数'],
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: 16,
                            fontFamily: "微软雅黑"
                        }
                        
                    },
                    xAxis: [
                    {
                        type: 'category',
                        data:["产品1","产品2","产品3","产品4","产品5"],
                        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,220,180,300,260]
                    },
                    {
                        name: '完成数',
                        type: 'bar',
                        barWidth: 15,
                        data: [80,175,120,230,200]
                    }
                    ]
                };
                
                
                option6 = {
                    title: {
                        text: '折弯',
                        x: 'center',
                        top: 2,
                        textStyle: {
                            fontSize: 20,
                            color: '#00c6ff',
                            fontFamily: "微软雅黑"
                        },
                    },
                    color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                    tooltip: {
                        
                    },
                    grid: {
                        top:'15%',
                        left: '25',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    legend: {
                        x: 'right',
                        y:'left',
                        data: ['任务数', '完成数'],
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: 16,
                            fontFamily: "微软雅黑"
                        }
                        
                    },
                    xAxis: [
                    {
                        type: 'category',
                        data:["产品1","产品2","产品3","产品4","产品5"],
                        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,220,180,300,260]
                    },
                    {
                        name: '完成数',
                        type: 'bar',
                        barWidth: 15,
                        data: [80,175,120,230,200]
                    }
                    ]
                };
                
                
                option7 = {
                    title: {
                        text: '压铆',
                        x: 'center',
                        top: 2,
                        textStyle: {
                            fontSize: 20,
                            color: '#00c6ff',
                            fontFamily: "微软雅黑"
                        },
                    },
                    color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
                    tooltip: {
                        
                    },
                    grid: {
                        top:'15%',
                        left: '25',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    legend: {
                        x: 'right',
                        y:'left',
                        data: ['任务数', '完成数'],
                        textStyle: {
                            color: '#00c6ff',
                            fontSize: 16,
                            fontFamily: "微软雅黑"
                        }
                        
                    },
                    xAxis: [
                    {
                        type: 'category',
                        data:["产品1","产品2","产品3","产品4","产品5"],
                        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,220,180,300,260]
                    },
                    {
                        name: '完成数',
                        type: 'bar',
                        barWidth: 15,
                        data: [80,175,120,230,200]
                    }
                    ]
                };
                
                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="Steps"> </li>
                <li id="point">:</li>
                <li id="min"> </li>
                <li id="point">:</li>
                <li id="sec"> </li>
            </ul>
            
        </div>
        <div  class="col-sm-12 ctn">
            <div id="mychart1"></div>
        </div>
        <div  class="col-sm-12 cbn">
            <div  class="col-sm-4 ctn">
                <div id="mychart2"></div>
            </div>
            <div  class="col-sm-4 ctn">
                <div id="mychart3"></div>
            </div>
            <div  class="col-sm-4 ctn">
                <div id="mychart4"></div>
            </div>
            <div  class="col-sm-4 ctn">
                <div id="mychart5"></div>
            </div>
            <div  class="col-sm-4 ctn">
                <div id="mychart6"></div>
            </div>
            <div  class="col-sm-4 ctn">
                <div id="mychart7"></div>
            </div>
        </div>      
    </body>
    
    </html>

New file
			@@ -0,0 +1,874 @@
			<!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;
			}

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



			.col-sm-12,
			.col-sm-2,
			.col-sm-3,
			.col-sm-4,
			.col-sm-5,
			.col-sm-6,
			.col-sm-7,
			.col-sm-8 {
			position: relative;
			min-height: 1px;
			padding-right: 0px;
			padding-left: 0px;
			/* border: 1px solid #00c6ff; */
			}


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

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

			#cList li {
			margin: 13px auto;
			text-align:left;
			}
			#cList1 {
			float: left;
			}

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

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

			/文字竖排/
			writing-mode: vertical-lr;
			/从左向右从右向左是 writing-mode: vertical-rl;/
			writing-mode: tb-lr;
			/IE浏览器的从左向右从右向左是 writing-mode: tb-rl；/
			}
			</style>
			<script type="text/javascript">


			var interval; //计时器
			var InComBadProgress=0; //来料不良率
			var OnceGoodProgress=0; //一次合格率

			var WkShop=[]; //车间合格率对比车间数组
			var TaskQty=[]; //车间合格率对比任务数数组
			var EndQty=[]; //车间合格率对比完成数数组

			var CHour=[]; //不良原因对比分析时间数组
			var COrderQty=[]; //不良原因对比分析任务数数组
			var CInQty=[]; //不良原因对比分析完成数数组

			var ZDte=[]; //生产总效率趋势时间数组
			var ZQty=[]; //生产总效率趋势值数组
			$(document).ready(function () {
			// 创建两个变量，一个数组中的月和日的名称
			var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
			setInterval(function () {
			var date1 = new Date;
			var year = date1.getFullYear();
			var month = date1.getMonth();
			var day = date1.getDate();
			var hh = date1.getHours();
			var mm = date1.getMinutes();
			var ss = date1.getSeconds();
			var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
			var Stamp = new Date();


			$('#Date').html(year + " 年" + " " + monthNames[month] + ' ' + day + " 日  " + ' ' + dayNames[Stamp.getDay()]);
			$("#hours").html((hh < 10 ? ("0" + hh) : hh));
			$("#min").html((mm < 10 ? ("0" + mm) : mm));
			$("#sec").html((ss < 10 ? ("0" + ss) : ss));

			}, 1000);

			});
			$(function () {
			var mychart1 = echarts.init(document.getElementById('mychart1'));
			var mychart2 = echarts.init(document.getElementById('mychart2'));
			var mychart3 = echarts.init(document.getElementById('mychart3'));
			var mychart4 = echarts.init(document.getElementById('mychart4'));
			var mychart5 = echarts.init(document.getElementById('mychart5'));
			Chart(mychart1,mychart2,mychart3,mychart4,mychart5);
			// 定时器
			interval = setInterval(function () {
			InComBadProgress=0; //来料不良率
			OnceGoodProgress=0; //一次合格率

			WkShop=[]; //车间合格率对比车间数组
			TaskQty=[]; //车间合格率对比任务数数组
			EndQty=[]; //车间合格率对比完成数数组

			CHour=[]; //不良原因对比分析时间数组
			COrderQty=[]; //不良原因对比分析任务数数组
			CInQty=[]; //不良原因对比分析完成数数组

			ZDte=[]; //生产总效率趋势时间数组
			ZQty=[]; //生产总效率趋势值数组
			Chart(mychart1,mychart2,mychart3,mychart4,mychart5);
			}, 30000);
			//根据浏览器大小改变大小
			window.onresize = () => {
			mychart1.resize();
			mychart2.resize();
			mychart3.resize();
			mychart4.resize();
			mychart5.resize();
			}
			})

			function Chart(mychart1,mychart2,mychart3,mychart4,mychart5){
			$.ajax({
			url: "http://192.168.2.152:80/api/loaddata/QualityAnalysis",
			dataType: "JSON",
			async: false,//使用同步的方式,true为异步方式
			type: "Get",
			success: function (data) {
			//本月产量
			$("#MonthPcQty").html(data.data[0][0].MonthPcQty);
			//本月合格
			$("#MonthGoodQty").html(data.data[0][0].MonthGoodQty);
			//成品一次合格率
			$("#OnceGoodProgress").html(data.data[1][0].OnceGoodProgress+"%");
			//来料不良率
			$("#InComBadProgress").html(data.data[2][0].InComBadProgress+"%");
			//一次合格率
			OnceGoodProgress=data.data[1][0].OnceGoodProgress;
			//来料不良率
			InComBadProgress=data.data[2][0].InComBadProgress;

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

			//不良原因对比分析
			$.each(data.data[4], function (index, val) {
			CHour.push(val.hour.substring(5));
			COrderQty.push(parseFloat(val.OrderQty).toFixed(0));
			CInQty.push(parseFloat(val.InQty).toFixed(0));
			});

			//合格率率趋势图
			$.each(data.data[5], function (index, val) {
			ZDte.push(val.hour+"点");
			ZQty.push(parseFloat(val.GoodQty).toFixed(0));
			});
			},
			error: function (data) {

			}
			})

			option1 = {
			title: {
			text: '车间合格率对比',
			left: '0',
			top: 2,
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			},
			tooltip : {

			},
			legend: {
			left: 'right',
			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: WkShop,
			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: TaskQty
			},
			{
			name: '完成数',
			type: 'bar',
			stack: '总量',
			barWidth: 10,
			itemStyle:{
			normal: {
			color: '#ff9900',
			shadowBlur: [0, 0, 0, 10],
			shadowColor: '#ff9900',
			barBorderRadius: [20, 20, 20, 20],
			shadowOffsetX: 0,
			}
			},
			label: {
			normal: {
			show: true,
			position: 'insideRight',
			textStyle: { //文字样式
			//fontSize:12
			}
			}
			},
			z: 5,
			data: EndQty
			}
			]
			};


			var highlight = '#00c6ff';
			var demoData = [
			{ name: '一次合格率', value: OnceGoodProgress, unit: '%', pos: ['50%', '60%'], range: [0, 100] },
			];
			option2 = {
			series: (function() {
			var result = [];

			demoData.forEach(function(item) {
			result.push(
			// 外围刻度
			{
			type: 'gauge',
			radius: '70%', // 1行3个
			center:['50%','60%'], //边距
			splitNumber: item.splitNum \|\| 10,
			min: item.range[0],
			max: item.range[1],
			startAngle: 180,
			endAngle: 0,
			axisLine: {
			show: true,
			lineStyle: {
			width: 2,
			shadowBlur: 0,
			color: [
			[1, highlight]
			]
			}
			},
			axisTick: {
			show: true,
			lineStyle: {
			color: highlight,
			width: 1
			},
			length: -5,
			splitNumber: 10
			},
			splitLine: {
			show: true,
			length: -14,
			lineStyle: {
			color: highlight,
			}
			},
			axisLabel: {
			distance: -20,
			textStyle: {
			color: highlight,
			fontSize: '14',
			fontWeight: 'bold'
			}
			},
			pointer: {
			show: 0
			},
			detail: {
			show: 0
			}
			},

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

			return result;
			})()
			};

			const colorList = ['#47A2FF', '#ff9900']
			option3 = {
			title: [
			{
			text: '',
			subtext: InComBadProgress+'%',
			textStyle: {
			fontSize: 16,
			color: '#999',
			lineHeight: 20
			},
			subtextStyle: {
			fontSize: 28,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '50%'
			},
			{
			show: true,
			text: '来料不良率',
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			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: InComBadProgress },
			{ name: '', value: 100-InComBadProgress }
			],
			}
			]
			};




			option4 = {
			title: {
			text: '不良原因对比分析',
			left: '0',
			top: 2,
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {

			},
			grid: {
			left: '25',
			right: '4%',
			bottom: '7%',
			containLabel: true
			},
			legend: {
			left: 'right',
			data: ['任务数', '完成数'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 16,
			fontFamily: "微软雅黑"
			}

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

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

			option5 = {
			tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}月 : {c}万"
			},
			grid: {
			left: '25',
			right: '4%',
			bottom: '5%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ZDte, //时间点数据
			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: ZQty, //时间点值
			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);


			}

			</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-4 ctn">
			<div class="col-sm-12 ctn">
			<div id="mychart1"></div>
			</div>
			</div>
			<div class="col-sm-4 ctn">
			<div class="col-sm-5 ctn">
			<ul id="cList">
			<li style="font-size:24px;">状态:</li>
			<li style="font-size:24px;">本月产量</li>
			<li style="font-size:24px;"><span id="MonthPcQty">0</span></li>
			<li style="font-size:24px;">本月合格</li>
			<li style="font-size:24px;"><span id="MonthGoodQty">0</span></li>
			<li style="font-size:24px;">成品一次合格率</li>
			<li style="font-size:24px;"><span id="OnceGoodProgress">0</span></li>
			<li style="font-size:24px;">来料不良率</li>
			<li style="font-size:24px;"><span id="InComBadProgress">0</span></li>
			</ul>
			</div>
			<div class="col-sm-7 ctn">
			<div id="mychart2"></div>
			</div>
			</div>
			<div class="col-sm-4 ctn">
			<div class="col-sm-12 ctn">
			<div id="mychart3"></div>
			</div>
			</div>
			<div class="col-sm-8 ctn">
			<div class="col-sm-12 ctn">
			<div id="mychart4" style="margin-top:2%;"></div>
			</div>
			</div>
			<div class="col-sm-4 ctn">
			<div class="col-sm-12 ctn">
			<div id="mychart5" style="margin-top:2%;"></div>
			</div>
			</div>
			</body>

			</html>

New file
			@@ -0,0 +1,961 @@
			<!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;
			}

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


			.col-sm-12,
			.col-sm-2,
			.col-sm-3,
			.col-sm-4,
			.col-sm-5,
			.col-sm-6,
			.col-sm-7,
			.col-sm-8 {
			position: relative;
			min-height: 1px;
			padding-right: 0px;
			padding-left: 0px;
			/* border: 1px solid #00c6ff; */
			}


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

			</style>
			<script type="text/javascript">
			var interval; //计时器

			var Step=[]; //在制品状态工序数组
			var StepQty=[]; //在制品状态工序对应的数量(进站出站对比)数组


			$(document).ready(function () {
			// 创建两个变量，一个数组中的月和日的名称
			var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
			setInterval(function () {
			var date1 = new Date;
			var year = date1.getFullYear();
			var month = date1.getMonth();
			var day = date1.getDate();
			var hh = date1.getHours();
			var mm = date1.getMinutes();
			var ss = date1.getSeconds();
			var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
			var Stamp = new Date();


			$('#Date').html(year + " 年" + " " + monthNames[month] + ' ' + day + " 日  " + ' ' + dayNames[Stamp.getDay()]);
			$("#Steps").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);
			})
			function Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7){
			var data={
			"code": 200,
			"data": [
			[
			{
			"Step": "下料",
			"StepQty": 1200
			},
			{
			"Step": "裁切",
			"StepQty": 1000
			},
			{
			"Step": "钻孔",
			"StepQty": 800
			},
			{
			"Step": "去毛刺",
			"StepQty": 760
			},
			{
			"Step": "折弯",
			"StepQty": 750
			},
			{
			"Step": "压铆",
			"StepQty": 700
			},
			{
			"Step": "普冲1",
			"StepQty": 680
			},
			{
			"Step": "普冲2",
			"StepQty": 650
			},
			{
			"Step": "抛光",
			"StepQty": 600
			},
			{
			"Step": "喷涂",
			"StepQty": 500
			},
			{
			"Step": "丝印",
			"StepQty": 430
			},
			{
			"Step": "装配",
			"StepQty": 400
			}
			]
			]
			}

			//在制品状态
			$.each(data.data[0], function (index, val) {
			Step.push(val.Step);
			StepQty.push(parseFloat(val.StepQty).toFixed(0));
			});

			option1 = {
			tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}月 : {c}万"
			},
			grid: {
			left: '25',
			right: '4%',
			bottom: '5%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: Step, //时间点数据
			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: StepQty, //时间点值
			type: 'line',
			smooth: true,
			itemStyle: {
			normal: {
			color: 'orange',
			lineStyle: {
			width: 4, //设置线条粗细
			shadowColor: 'rgba(255, 94, 91,.1)',
			shadowOffsetX: 3,
			shadowOffsetY: 5,
			}
			},
			},
			textStyle: {
			fontFamily: "微软雅黑"
			}
			},
			]
			}

			option2 = {
			title: {
			text: '下料',
			x: 'center',
			top: 2,
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {

			},
			grid: {
			top:'15%',
			left: '25',
			right: '4%',
			bottom: '10%',
			containLabel: true
			},
			legend: {
			x: 'right',
			y:'left',
			data: ['任务数', '完成数'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 16,
			fontFamily: "微软雅黑"
			}

			},
			xAxis: [
			{
			type: 'category',
			data:["产品1","产品2","产品3","产品4","产品5"],
			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,220,180,300,260]
			},
			{
			name: '完成数',
			type: 'bar',
			barWidth: 15,
			data: [80,175,120,230,200]
			}
			]
			};

			option3 = {
			title: {
			text: '裁切',
			x: 'center',
			top: 2,
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {

			},
			grid: {
			top:'15%',
			left: '25',
			right: '4%',
			bottom: '10%',
			containLabel: true
			},
			legend: {
			x: 'right',
			y:'left',
			data: ['任务数', '完成数'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 16,
			fontFamily: "微软雅黑"
			}

			},
			xAxis: [
			{
			type: 'category',
			data:["产品1","产品2","产品3","产品4","产品5"],
			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,220,180,300,260]
			},
			{
			name: '完成数',
			type: 'bar',
			barWidth: 15,
			data: [80,175,120,230,200]
			}
			]
			};

			option4 = {
			title: {
			text: '钻孔',
			x: 'center',
			top: 2,
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {

			},
			grid: {
			top:'15%',
			left: '25',
			right: '4%',
			bottom: '10%',
			containLabel: true
			},
			legend: {
			x: 'right',
			y:'left',
			data: ['任务数', '完成数'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 16,
			fontFamily: "微软雅黑"
			}

			},
			xAxis: [
			{
			type: 'category',
			data:["产品1","产品2","产品3","产品4","产品5"],
			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,220,180,300,260]
			},
			{
			name: '完成数',
			type: 'bar',
			barWidth: 15,
			data: [80,175,120,230,200]
			}
			]
			};

			option5 = {
			title: {
			text: '去毛刺',
			x: 'center',
			top: 2,
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {

			},
			grid: {
			top:'15%',
			left: '25',
			right: '4%',
			bottom: '10%',
			containLabel: true
			},
			legend: {
			x: 'right',
			y:'left',
			data: ['任务数', '完成数'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 16,
			fontFamily: "微软雅黑"
			}

			},
			xAxis: [
			{
			type: 'category',
			data:["产品1","产品2","产品3","产品4","产品5"],
			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,220,180,300,260]
			},
			{
			name: '完成数',
			type: 'bar',
			barWidth: 15,
			data: [80,175,120,230,200]
			}
			]
			};


			option6 = {
			title: {
			text: '折弯',
			x: 'center',
			top: 2,
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {

			},
			grid: {
			top:'15%',
			left: '25',
			right: '4%',
			bottom: '10%',
			containLabel: true
			},
			legend: {
			x: 'right',
			y:'left',
			data: ['任务数', '完成数'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 16,
			fontFamily: "微软雅黑"
			}

			},
			xAxis: [
			{
			type: 'category',
			data:["产品1","产品2","产品3","产品4","产品5"],
			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,220,180,300,260]
			},
			{
			name: '完成数',
			type: 'bar',
			barWidth: 15,
			data: [80,175,120,230,200]
			}
			]
			};


			option7 = {
			title: {
			text: '压铆',
			x: 'center',
			top: 2,
			textStyle: {
			fontSize: 20,
			color: '#00c6ff',
			fontFamily: "微软雅黑"
			},
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {

			},
			grid: {
			top:'15%',
			left: '25',
			right: '4%',
			bottom: '10%',
			containLabel: true
			},
			legend: {
			x: 'right',
			y:'left',
			data: ['任务数', '完成数'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 16,
			fontFamily: "微软雅黑"
			}

			},
			xAxis: [
			{
			type: 'category',
			data:["产品1","产品2","产品3","产品4","产品5"],
			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,220,180,300,260]
			},
			{
			name: '完成数',
			type: 'bar',
			barWidth: 15,
			data: [80,175,120,230,200]
			}
			]
			};

			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="Steps"> </li>
			<li id="point">:</li>
			<li id="min"> </li>
			<li id="point">:</li>
			<li id="sec"> </li>
			</ul>

			</div>
			<div class="col-sm-12 ctn">
			<div id="mychart1"></div>
			</div>
			<div class="col-sm-12 cbn">
			<div class="col-sm-4 ctn">
			<div id="mychart2"></div>
			</div>
			<div class="col-sm-4 ctn">
			<div id="mychart3"></div>
			</div>
			<div class="col-sm-4 ctn">
			<div id="mychart4"></div>
			</div>
			<div class="col-sm-4 ctn">
			<div id="mychart5"></div>
			</div>
			<div class="col-sm-4 ctn">
			<div id="mychart6"></div>
			</div>
			<div class="col-sm-4 ctn">
			<div id="mychart7"></div>
			</div>
			</div>
			</body>

			</html>