var linexData = ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06', '06-07'];
var lineyData = [22, 23, 23, 23, 24, 25, 28];
var lineyData2 = [16.5, 17.5, 18, 16.5, 18, 19, 21];
var lineyData3 = [11, 12, 13, 10, 12, 13, 14];
$(document).ready(function () {

    var html = "";
    if(depotList){
        $.each(depotList, function (index, item) {
            html += '<div class="swiper-slide"><div class="electron1"><div class="col-l"><div class="g-boxl1"><div class="g-titl1">货位信息</div><ul class="ul-listl5">';
            html += '<li><div class="con"><div class="tit">'+item.name+'</div><div class="info">名称</div></div></li>';
            html += '<li><div class="con"><div class="tit">'+item.depotStatusName+'</div><div class="info">货位状态</div></div></li>';
            html += '<li><div class="con"><div class="tit">'+item.storageReal+'<em>t</em></div><div class="info">粮食储量</div></div></li>';
            html += '<li><div class="con"><div class="tit">'+item.foodVarietyName+'</div><div class="info">粮食品种</div></div></li>';
            html += '<li><div class="con"><div class="tit">'+item.foodTypeName+'</div><div class="info">粮食性质</div></div></li>';
            html += '<li><div class="con"><div class="tit">'+item.foodLevelName+'</div><div class="info">粮食等级</div></div></li>';
            html += '<li><div class="con"><div class="tit">'+item.foodYear+'</div><div class="info">粮食年份</div></div></li>';
            html += '<li><div class="con"><div class="tit">'+item.storeDate+'</div><div class="info">入仓时间</div></div></li>';
            html += '<li><div class="con"><div class="tit">'+item.depotTypeName+'</div><div class="info">仓房类型</div></div></li></ul></div>';
            html += '<div class="g-boxl1 h378"><div class="g-titl1">粮情三温图</div><div class="m-chartl"><div class="chart" id="lineChart'+index+'"></div></div></div></div>';
            html += '<div class="col-c"><div class="g-boxl1"><div class="g-titl1">粮情信息</div>';
            html += '<ul class="ul-listl6"><li><div class="con" style="background-color: rgba(3,77,146,.3);"><div class="icon"><img src="/img/dzhwk/iconl18.png" alt=""></div>';
            html += '<div class="rr"><div class="itm"><div class="info" style="background-color: rgba(18,110,112,.15);"><div class="num"><em>'+item.inTemp+'</em> °C</div><div class="tt">仓内温度</div></div></div>';
            html += '<div class="itm"><div class="info" style="background-color: rgba(255,255,255,.05);"><div class="num"><em>'+item.outTemp+'</em> °C</div><div class="tt">仓外温度</div></div></div></div></div></li>';
            html += '<li><div class="con" style="background-color: rgba(91,104,225,.25);"><div class="icon"><img src="/img/dzhwk/iconl19.png" alt=""></div>';
            html += '<div class="rr"><div class="itm"><div class="info" style="background-color: rgba(18,110,112,.15);"><div class="num"><em>'+item.inHumidity+'</em> %</div><div class="tt">仓内湿度</div></div></div>';
            html += '<div class="itm"><div class="info" style="background-color: rgba(255,255,255,.05);"><div class="num"><em>'+item.outHumidity+'</em> %</div><div class="tt">仓外湿度</div></div></div></div></div></li></ul>';
            html += '<ul class="ul-listl5 styl3"><li><div class="con" style="background-color: rgba(254,139,76,.2);"><div class="tit">'+item.maxTemp+'<em>°C</em></div><div class="info">粮高温</div></div></li>';
            html += '<li><div class="con" style="background-color: rgba(31,133,78,.15);"><div class="tit">'+item.aveTemp+'<em>°C</em></div><div class="info">粮均温</div></div></li>';
            html += '<li><div class="con"><div class="tit">'+item.minTemp+'<em>°C</em></div><div class="info">粮低温</div></div></li></ul><div class="date">'+item.grainDate+'</div></div>';
            html += '<div class="g-boxl1 h378"><div class="g-titl1">质检信息</div><ul class="ul-listl5 styl2">';
            html += '<li><div class="con"><div class="tit">'+item.foodVarietyName+'</div><div class="info">粮食品种</div></div></li>';
            html += '<li><div class="con"><div class="tit">--</div><div class="info">检验人</div></div></li>';
            html += '<li><div class="con"><div class="tit">--</div><div class="info">检验日期</div></div></li>';
            html += '<li><div class="con"><div class="tit">--%</div><div class="info">水分</div></div></li>';
            html += '<li><div class="con"><div class="tit">--%</div><div class="info">杂质</div></div></li>';
            html += '<li><div class="con"><div class="tit">--%</div><div class="info">不完善类</div></div></li></ul></div></div>';
            html += '<div class="col-r"><div class="g-boxl1"><div class="g-titl1">气体信息</div><ul class="ul-listl3 styl2">';
            html += '<li><div class="con" style="background-color: rgba(3,77,146,.3);"><div class="icon"><img src="/img/dzhwk/iconl21.png" alt="">';
            html += '</div><div class="txt"><div class="num"><em>'+item.perPh3+'</em>ppm</div><div class="tt">磷化氢</div></div></div></li>';
            html += '<li><div class="con" style="background-color: rgba(31,133,78,.15);"><div class="icon"><img src="/img/dzhwk/iconl20.png" alt="">';
            html += '</div><div class="txt"><div class="num"><em>'+item.perO2+'</em>%</div><div class="tt">氧气</div></div></div></li>';
            html += '<li><div class="con" style="background-color: rgba(91,104,225,.25);"><div class="icon"><img src="/img/dzhwk/iconl28.png" alt="">';
            html += '</div><div class="txt"><div class="num"><em>'+item.perCo2+'</em>ppm</div><div class="tt">二氧化碳</div></div></div></li><div class="date">'+item.gasDate+'</div></ul></div>';
            html += '<div class="g-boxl1 h378"><div class="g-titl1">保管员</div><ul class="ul-intel styl2">';
            html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl23.png" alt=""></div>保管员</div><div class="rr">'+item.storeKeeperName+'</div></div></li>';
            html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl24.png" alt=""></div>电话</div><div class="rr">'+item.storeKeeperPhone+'</div></div></li>';
            html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl26.png" alt=""></div>部门</div><div class="rr">--</div></div></li>';
            html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl27.png" alt=""></div>最近打卡</div><div class="rr">--</div></div></li></ul>';
            html += '</div></div></div></div>';
        })
    }else{
        html += '<div class="swiper-slide"><div class="electron1"><div class="col-l"><div class="g-boxl1"><div class="g-titl1">货位信息</div><ul class="ul-listl5">';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">名称</div></div></li>';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">货位状态</div></div></li>';
        html += '<li><div class="con"><div class="tit">--<em>t</em></div><div class="info">粮食储量</div></div></li>';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">粮食品种</div></div></li>';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">粮食性质</div></div></li>';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">粮食等级</div></div></li>';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">粮食年份</div></div></li>';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">入仓时间</div></div></li>';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">仓房类型</div></div></li></ul></div>';
        html += '<div class="g-boxl1 h378"><div class="g-titl1">粮情三温图</div><div class="m-chartl"><div class="chart" id="lineChart1"></div></div></div></div>';
        html += '<div class="col-c"><div class="g-boxl1"><div class="g-titl1">粮情信息</div>';
        html += '<ul class="ul-listl6"><li><div class="con" style="background-color: rgba(3,77,146,.3);"><div class="icon"><img src="/img/dzhwk/iconl18.png" alt=""></div>';
        html += '<div class="rr"><div class="itm"><div class="info" style="background-color: rgba(18,110,112,.15);"><div class="num"><em>--</em> °C</div><div class="tt">仓内温度</div></div></div>';
        html += '<div class="itm"><div class="info" style="background-color: rgba(255,255,255,.05);"><div class="num"><em>--</em> °C</div><div class="tt">仓外温度</div></div></div></div></div></li>';
        html += '<li><div class="con" style="background-color: rgba(91,104,225,.25);"><div class="icon"><img src="/img/dzhwk/iconl19.png" alt=""></div>';
        html += '<div class="rr"><div class="itm"><div class="info" style="background-color: rgba(18,110,112,.15);"><div class="num"><em>--</em> %</div><div class="tt">仓内湿度</div></div></div>';
        html += '<div class="itm"><div class="info" style="background-color: rgba(255,255,255,.05);"><div class="num"><em>--</em> %</div><div class="tt">仓外湿度</div></div></div></div></div></li></ul>';
        html += '<ul class="ul-listl5 styl3"><li><div class="con" style="background-color: rgba(254,139,76,.2);"><div class="tit">--<em>°C</em></div><div class="info">粮高温</div></div></li>';
        html += '<li><div class="con" style="background-color: rgba(31,133,78,.15);"><div class="tit">--<em>°C</em></div><div class="info">粮均温</div></div></li>';
        html += '<li><div class="con"><div class="tit">--<em>°C</em></div><div class="info">粮低温</div></div></li></ul></div>';
        html += '<div class="g-boxl1 h378"><div class="g-titl1">质检信息</div><ul class="ul-listl5 styl2">';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">粮食品种</div></div></li>';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">检验人</div></div></li>';
        html += '<li><div class="con"><div class="tit">--</div><div class="info">检验日期</div></div></li>';
        html += '<li><div class="con"><div class="tit">--%</div><div class="info">水分</div></div></li>';
        html += '<li><div class="con"><div class="tit">--%</div><div class="info">杂质</div></div></li>';
        html += '<li><div class="con"><div class="tit">--%</div><div class="info">不完善类</div></div></li></ul></div></div>';
        html += '<div class="col-r"><div class="g-boxl1"><div class="g-titl1">气体信息</div><ul class="ul-listl3 styl2">';
        html += '<li><div class="con" style="background-color: rgba(3,77,146,.3);"><div class="icon"><img src="/img/dzhwk/iconl21.png" alt="">';
        html += '</div><div class="txt"><div class="num"><em>--</em>ppm</div><div class="tt">磷化氢</div></div></div></li>';
        html += '<li><div class="con" style="background-color: rgba(31,133,78,.15);"><div class="icon"><img src="/img/dzhwk/iconl20.png" alt="">';
        html += '</div><div class="txt"><div class="num"><em>--</em>%</div><div class="tt">氧气</div></div></div></li>';
        html += '<li><div class="con" style="background-color: rgba(91,104,225,.25);"><div class="icon"><img src="/img/dzhwk/iconl28.png" alt="">';
        html += '</div><div class="txt"><div class="num"><em>--</em>ppm</div><div class="tt">二氧化碳</div></div></div></li></ul></div>';
        html += '<div class="g-boxl1 h378"><div class="g-titl1">保管员</div><ul class="ul-intel styl2">';
        html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl23.png" alt=""></div>保管员</div><div class="rr">--</div></div></li>';
        html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl24.png" alt=""></div>电话</div><div class="rr">--</div></div></li>';
        html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl26.png" alt=""></div>部门</div><div class="rr">--</div></div></li>';
        html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl27.png" alt=""></div>最近打卡</div><div class="rr">--</div></div></li></ul>';
        html += '</div></div></div></div>';

        initLineEchart('lineChart1', linexData, lineyData, lineyData2, lineyData3)
    }
    $("#depotList").html(html);

    //初始化三温图
    $.each(depotList, function (index, item) {
        initLineEchart('lineChart' + index, linexData, lineyData, lineyData2, lineyData3);
    })

    var swiper = new Swiper('.m-swiperl2 .swiper', {
        slidesPerView: 1,
        // autoplay: {
        //     delay: 2500,
        //     disableOnInteraction: false,
        // },
        loop: true,
        autoplay:{
            delay: 5000,
            disableOnInteraction: false
        },
        pagination: {
            el: '.g-swbtnl .swiper-pagination',
            type: 'fraction',
        },
        navigation: {
            nextEl: '.g-swbtnl .swiper-button-next',
            prevEl: '.g-swbtnl .swiper-button-prev',
        },
    });
});

function initLineEchart(id, xData, yData, yData2, yData3) {
    var echart = null
    var dom = document.getElementById(id);
    echart = echarts.init(dom);
    var option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            right: '0',
            top: '2%',
            itemWidth: 12,
            itemHeight: 12,
            icon: 'circle',
            textStyle: {
                color: '#91ceff',
                fontSize: 18,
                paddingLeft: 5,
            }
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '0',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: "category",
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255,255,255,.6)",
                    width: 1
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                color: "#fff",
                fontSize: 20,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "rgba(255,255,255,.2)",
                }
            },
            data: xData
        },
        yAxis: [{
            name: '(°C)',
            min: 0,
            max: 40,
            interval: 10,
            nameTextStyle: {
                color: 'rgba(145,206,255,.5)',
                fontSize: 18,
                padding: [0, 0, 5, -30]
            },
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                color: "#91ceff", //X轴文字颜色
                fontSize: 18,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dashed",
                    color: "rgba(255,255,255,.3)",
                }
            },
        }],
        series: [{
            name: '粮高温',
            type: 'line',
            symbol: 'none',
            color: '#ffd12b',
            lineStyle: {
                width: 3
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255, 209, 43,0.3)'
                },
                    {
                        offset: 1,
                        color: 'rgba(255, 209, 43,0)'
                    },
                ]),
            },
            label: {
                show: false,
            },
            data: yData,
        },
            {
                name: '粮均温',
                type: 'line',
                symbol: 'none',
                color: '#02afff',
                lineStyle: {
                    width: 3
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(2, 175, 255, .3)'
                    },
                        {
                            offset: 1,
                            color: 'rgba(2, 175, 255,0)'
                        },
                    ]),
                },
                label: {
                    show: false,
                },
                data: yData2,
            },
            {
                name: '粮低温',
                type: 'line',
                symbol: 'none',
                color: '#39ff02',
                lineStyle: {
                    width: 3
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(97,154,82)'
                    },
                        {
                            offset: 1,
                            color: 'rgba(2, 175, 255,0)'
                        },
                    ]),
                },
                label: {
                    show: false,
                },
                data: yData3,
            }]
    };
    if (option && typeof option === "object") {
        echart.setOption(option, true);
    }
}