function sidebar() {
    var el = $('#sidebar-btn');
    var html = el.html();
    if (html === '隐藏'){
        el.html('展示');
        $('#sidebar').animate({
            left:'-20%'
        },300);
    }else if(html === '展示'){
        el.html('隐藏');
        $('#sidebar').animate({
            left:'1%'
        },300);
    }
}


// 柱状图 -------------------------------------------------------
var myChart = echarts.init(document.getElementById("io-chart"));
window.addEventListener('resize',function () {
    myChart.resize();
})

var option = {
    title: {
        text: '年度进/出货量',
        x:'5px',
        y:'15px',
        textStyle:{
            color:'#ffffff',
            fontWeight:400,
            fontSize: 10,
        },
        subtext: 'Data',
        subtextStyle:{
            align:'center',
            color:'#ffffff',
            fontSize: 7,
        },
        show: true,

    },
    tooltip: {
        trigger: 'axis'
    },
    textStyle:{
        color:'#f5f4f4',
    },
    legend: {
        show:false,
        data: ['进货', '出货']
    },
    toolbox: {
        show: false,
        feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    calculable: true,
    xAxis: [
        {
            color:'#975a5a',
            type: 'category',
            axisTick:{
                show:false,
                lineStyle:{
                    color:'#000'
                }
            },
            axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
                fontSize:9,
                interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
                rotate: 0 ,// 横坐标上label的倾斜度
                textStyle: {
                    color:'#fff'
                }
            },
            axisLine:{
                lineStyle: {
                    color: '#e2e1e1',// x轴刻度线的颜色
                }},
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            offset: -4,
            axisTick:{
                show:false,
            },
            axisLabel: {
                fontSize:9,
            },
            splitLine:{
                lineStyle:{
                    color:'#cdcdcd'// y轴分割线颜色
                }
            }

        }
    ],
    series: [
        {
            color:['#88b0e2'],
            name: '进货',
            type: 'bar',
            data: [
                204.5, 50.5, 15.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ],
        },
        {
            color:['#f8f7f7'],
            name: '出货',
            type: 'bar',
            data: [
                100, 75.2, 33.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ],
        }
    ],

};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}


// 报文表格 -------------------------------------------------------
var MyMarhq = '';
clearInterval(MyMarhq);
$('.tbl-body tbody').empty();
$('.tbl-header tbody').empty();
var Items = [
    {"Type":"条码扫描器","Id":"3","Msg":"2506734232@#21","Time":"12.01",},
    {"Type":"堆垛机","Id":"12","Msg":"32123221234241","Time":"12.02",},
    {"Type":"机械臂","Id":"2","Msg":"137220723238","Time":"12.03",},
    {"Type":"输送线","Id":"308","Msg":"9#7245123115","Time":"14:21",},
    {"Type":"磅秤","Id":"5","Msg":"10.52","Time":"14:22",},
    {"Type":"无人小车","Id":"6","Msg":"2506734232@#21","Time":"14:31",},
    {"Type":"条码扫描器","Id":"2","Msg":"8000081","Time":"14:51",},
    {"Type":"堆垛机","Id":"10","Msg":"#1372213220723238","Time":"15:21",},
    {"Type":"机械臂","Id":"3","Msg":"123212@231","Time":"15:34",},
    {"Type":"磅秤","Id":"2","Msg":"6.3","Time":"15:38",},
    {"Type":"无人小车","Id":"1","Msg":"2506734232@#21","Time":"15:58",},
    {"Type":"条码扫描器","Id":"8","Msg":"12152123","Time":"16:12",},
    {"Type":"堆垛机","Id":"3","Msg":"sda2132###","Time":"16:12",},
    {"Type":"机械臂","Id":"6","Msg":"12234221","Time":"16:15",},
    {"Type":"磅秤","Id":"5","Msg":"6.6","Time":"17:28",},
    {"Type":"无人小车","Id":"3","Msg":"232211123",Time:"7:41",}
]
$.each(Items,function (i, item) {
    let str = '<tr>'+
            '<td>'+item.Type+'</td>'+
            '<td>'+item.Id+'</td>'+
            '<td>'+item.Msg+'</td>'+
            '<td>'+item.Time+'</td>'
        '</tr>';

    $('.tbl-body tbody').append(str);
    $('.tbl-header tbody').append(str);
});
if(Items.length > 10){
    $('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());
    $('.tbl-body').css('top', '0');
    var tblTop = 0;

    var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();

    function Marqueehq(){
        if(tblTop <= -outerHeight*Items.length/2){
            tblTop = 0;
        } else {
            tblTop -= 1;
        }
        $('.tbl-body').css('top', tblTop+'px');
    }
    var speedhq = 50; // 数值越大越慢
    MyMarhq = setInterval(Marqueehq,speedhq);

    // 鼠标移上去取消事件
    $(".tbl-header tbody").hover(function (){
        clearInterval(MyMarhq);
    }, function (){
        clearInterval(MyMarhq);
        MyMarhq = setInterval(Marqueehq,speedhq);
    })
}