提交首页实现

czt

2025-06-09 13b6ad41f0b057f8405f7976a990e9057547443a

 igds-dzhwk-web/src/main/resources/templates/dzhwk/index.html

@@ -110,7 +110,7 @@
                                    <div class="videobox">
<!--                                        <video src="http://player.alicdn.com/video/aliyunmedia.mp4" class="img"-->
                                        <video th:src="${videoUrl}" style="width: 100%;height: 100%;"
                                               poster="/img/dzhwk/imgl4.jpg" muted preload controls
                                               th:poster="${imgUrl}" muted preload controls
                                               webkit-playsinline="true" playsinline="true">您的浏览器不支持video标签
                                        </video>
                                    </div>
@@ -176,7 +176,7 @@
                <div class="col-r g-boxl1">
                    <div class="m-swiperl1">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                            <div class="swiper-wrapper" id="depotList">
                                <div class="swiper-slide">
                                    <div class="top">
                                        <div class="tit">货位名称 <em>P01-01</em></div>
@@ -1122,6 +1122,44 @@
<script th:src="@{/dzhwk/common.js}"></script>
<script th:inline="javascript">
    var flag = [[${flag}]];
    var depotList = [[${depotList}]];
    var html = "";
    if(depotList){
        $.each(depotList, function (index, item) {
            html += '<div class="swiper-slide"><div class="top"><div class="tit">货位名称 <em>'+item.name+'</em></div><div class="store">仓廒--</div></div><ul class="ul-listl3">';
            html += '<li><div class="con" style="background-color: rgba(3,77,146,.3);"><div class="icon"><img src="/img/dzhwk/iconl18.png" alt=""></div><div class="txt"><div class="num"><em>--</em>°C</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/iconl19.png" alt=""></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(31,133,78,.15);"><div class="icon"><img src="/img/dzhwk/iconl20.png" alt=""></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(2,175,255,.15);"><div class="icon"><img src="/img/dzhwk/iconl21.png" alt=""></div><div class="txt"><div class="num"><em>--</em>ppm</div><div class="tt">磷化氢</div></div></div></li></ul>';
            html += '<div class="m-infol"><div class="item"><div class="box" style="background-color: rgba(79,158,254,.23);"><ul class="ul-listl4">';
            html += '<li><div class="con"><div class="ll">货位名称</div><div class="rr">'+item.name+'</div></div></li><li><div class="con"><div class="ll">仓房类型</div><div class="rr">--</div></div></li>';
            html += '<li><div class="con"><div class="ll">货位状态</div><div class="rr"><div class="btn g-statel"><div class="icon"><img src="/img/dzhwk/iconl22.png" alt=""></div>'+item.depotStatusName+'</div></div></div> </li>';
            html += '<li><div class="con"><div class="ll">粮食储量</div><div class="rr">'+item.storageReal+'吨</div></div></li><li><div class="con"><div class="ll">粮食品种</div><div class="rr">'+item.foodVarietyName+'</div></div></li>';
            html += '<li><div class="con"><div class="ll">粮食等级</div><div class="rr">'+item.foodLevelName+'</div></div></li><li><div class="con"><div class="ll">仓储性质</div><div class="rr">'+item.foodTypeName+'</div> </div></li>';
            html += '<li><div class="con"><div class="ll">入仓时间</div><div class="rr">'+item.storeDate+'</div></div></li><li><div class="con"><div class="ll">粮食年份</div><div class="rr">'+item.foodYear+'</div></div></li></ul>';
            html += '</div></div><div class="item"><div class="box" style="background-color: rgba(3,129,255,.23);"><div class="bgpic" style="background-image: url(/img/dzhwk/imgl5.jpg);"></div><div class="pic"><img src="/img/dzhwk/imgl6.jpg" alt=""></div>';
            html += '<ul class="ul-intel"><li><div class="con"><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"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl24.png" alt=""></div>电话</div><div class="rr">--</div></div></li></ul></div></div></div></div>';

        })
    }else{
        html += '<div class="swiper-slide"><div class="top"><div class="tit">货位名称 <em>--</em></div><div class="store">仓廒--</div></div><ul class="ul-listl3">';
        html += '<li><div class="con" style="background-color: rgba(3,77,146,.3);"><div class="icon"><img src="/img/dzhwk/iconl18.png" alt=""></div><div class="txt"><div class="num"><em>--</em>°C</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/iconl19.png" alt=""></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(31,133,78,.15);"><div class="icon"><img src="/img/dzhwk/iconl20.png" alt=""></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(2,175,255,.15);"><div class="icon"><img src="/img/dzhwk/iconl21.png" alt=""></div><div class="txt"><div class="num"><em>--</em>ppm</div><div class="tt">磷化氢</div></div></div></li></ul>';
        html += '<div class="m-infol"><div class="item"><div class="box" style="background-color: rgba(79,158,254,.23);"><ul class="ul-listl4">';
        html += '<li><div class="con"><div class="ll">货位名称</div><div class="rr">--</div></div></li><li><div class="con"><div class="ll">仓房类型</div><div class="rr">--</div></div></li>';
        html += '<li><div class="con"><div class="ll">货位状态</div><div class="rr"><div class="btn g-statel"><div class="icon"><img src="/img/dzhwk/iconl22.png" alt=""></div>--</div></div></div> </li>';
        html += '<li><div class="con"><div class="ll">粮食储量</div><div class="rr">--吨</div></div></li><li><div class="con"><div class="ll">粮食品种</div><div class="rr">--</div></div></li>';
        html += '<li><div class="con"><div class="ll">粮食等级</div><div class="rr">--</div></div></li><li><div class="con"><div class="ll">仓储性质</div><div class="rr">--</div> </div></li>';
        html += '<li><div class="con"><div class="ll">入仓时间</div><div class="rr">--</div></div></li><li><div class="con"><div class="ll">粮食年份</div><div class="rr">--</div></div></li></ul>';
        html += '</div></div><div class="item"><div class="box" style="background-color: rgba(3,129,255,.23);"><div class="bgpic" style="background-image: url(/img/dzhwk/imgl5.jpg);"></div><div class="pic"><img src="/img/dzhwk/imgl6.jpg" alt=""></div>';
        html += '<ul class="ul-intel"><li><div class="con"><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"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl24.png" alt=""></div>电话</div><div class="rr">--</div></div></li></ul></div></div></div></div>';
    }
    $("#depotList").html(html);

    var swiper = new Swiper('.m-swiperl1 .swiper', {
        slidesPerView: 1,
        // autoplay: {
@@ -1129,6 +1167,10 @@
        //     disableOnInteraction: false,
        // },
        loop: true,
        autoplay:{
            delay: 3000,
            disableOnInteraction: false
        },
        pagination: {
            el: '.m-swiperl1 .swiper-pagination',
            type: 'fraction',