首页及电子货位卡页面

czt

2025-06-11 283da741b2429cf5a53786e5ee1b5528b757fdf6

 igds-dzhwk-web/src/main/resources/static/dzhwk/dzhwk.js

@@ -1,4 +1,128 @@
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);
@@ -157,32 +281,3 @@
            echart.setOption(option, true);
        }
    }
    var linexData = ['01', '02', '03', '04', '05', '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];
    initLineEchart('lineChart1', linexData, lineyData, lineyData2, lineyData3)
    initLineEchart('lineChart2', linexData, lineyData, lineyData2, lineyData3)
    initLineEchart('lineChart3', linexData, lineyData, lineyData2, lineyData3)
    initLineEchart('lineChart4', linexData, lineyData, lineyData2, lineyData3)
    initLineEchart('lineChart5', linexData, lineyData, lineyData2, lineyData3)
    initLineEchart('lineChart6', linexData, lineyData, lineyData2, lineyData3)


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