智慧农业后台管理页面
blame | history | patch | commit | commitdiff | show whitespace
zhongrj
2022-08-01 76ec7731c5ccf691d82d3be7c0189cd2c1487b20 
 public/traceablityInfos.html


@@ -1,4 +1,4 @@


<!-- WEB 详情页 -->


<!-- web 端详情 -->


<!DOCTYPE html>


<html lang="en">




@@ -155,7 +155,7 @@


        }




        .model-box.qw .model-content .box:first-child {


            border: 2px solid #EEEEEE;


      border-bottom: 2px solid #EEEEEE;


        }




        .model-box.qw .model-content .box {


@@ -192,6 +192,7 @@


            color: #666666;


            line-height: 36px;


        }




        /* 容器 */




        .model-box.cd .model-content {


@@ -199,6 +200,7 @@


            background: #fff;


            border-radius: 30px;


        }




        /* 头部 */




        .model-box.cd .model-content .content-header {


@@ -214,6 +216,7 @@


            color: #A255B5;


            border-bottom: 2px solid #ECECEC;


        }




        /* 中间 */




        .model-box.cd .model-content.dk .content-body {


@@ -223,7 +226,7 @@




        .model-box.cd .model-content.jksp .content-body {


            height: 385px;


            background: #A255B5;


      /* background: #A255B5; */


        }




        .model-box.cd .model-content.jk .content-body {


@@ -238,14 +241,16 @@




        .model-box.cd .model-content.jk .content-body .site-box .site-title {


            padding: 0 22px;


            margin-top: 10px;


      /* margin-top: 10px; */


            height: 100px;


            display: flex;


      line-height: 100px;


      /* display: flex;


            align-items: center;


            justify-content: space-between;


      justify-content: space-between; */


            font-size: 28px;


            font-weight: bold;


            color: #333333;


      width: 100%;


        }




        .model-box.cd .model-content.jk .content-body .site-box .site-date {


@@ -259,7 +264,7 @@




        .model-box.cd .model-content.jk .content-body .site-box .site-date .site-date-text {


            padding: 0 18px;


            height: 36px;


      /* height: 36px; */


            background: #F4F4F4;


            border-radius: 18px;


            font-size: 24px;


@@ -273,7 +278,7 @@


            justify-content: space-between;


        }




        .model-box.cd .model-content.jk .content-body .site-box .site-content>view {


    .model-box.cd .model-content.jk .content-body .site-box .site-content>div {


            display: flex;


            align-items: center;


            justify-content: space-between;


@@ -285,24 +290,27 @@


            box-sizing: border-box;


        }




        .model-box.cd .model-content.jk .content-body .site-box .site-content>view:nth-child(1),


        .model-box.cd .model-content.jk .content-body .site-box .site-content>view:nth-child(2) {


    .model-box.cd .model-content.jk .content-body .site-box .site-content>div:nth-child(1),


    .model-box.cd .model-content.jk .content-body .site-box .site-content>div:nth-child(2) {


            margin-top: 0;


        }


        .model-box.cd .model-content.jk .content-body .site-box .site-content>view .type {




    .model-box.cd .model-content.jk .content-body .site-box .site-content>div .type {


            font-size: 28px;


            color: #333333;


        }


        .model-box.cd .model-content.jk .content-body .site-box .site-content>view .unit {




    .model-box.cd .model-content.jk .content-body .site-box .site-content>div .unit {


            margin-top: 4px;


            font-size: 24px;


            color: #84898F;


        }




        .model-box.cd .model-content.jk .content-body .site-box .site-content>view .r {


    .model-box.cd .model-content.jk .content-body .site-box .site-content>div .r {


            font-size: 38px;


            color: #5ABF78;


        }




        /* 底部 */




        .model-box.cd .model-content .content-footer {


@@ -356,6 +364,7 @@


            border: none;


            color: #fff;


        }




        /* 种植环节 */




        .model-box.zz .model-content {


@@ -478,6 +487,7 @@


            font-size: 28px;


            color: #666666;


        }




        /* 生产企业 */




        .model-box.sc .model-content {


@@ -586,9 +596,39 @@


            display: flex;


            align-items: center;


        }




    #video-body {


      display: inline-block;


      height: 100%;


      position: relative;


      overflow: hidden;


    }




    #video-footer {


      width: 100%;


      height: 60px;


      background: rgba(0, 0, 0, 0.5);


      margin-top: -63px;


      position: relative;


    }




    #oper-btn {


      position: absolute;


      top: 10px;


      left: 20px;


      cursor: pointer;


    }




    #full-btn {


      position: absolute;


      top: 12px;


      right: 20px;


      cursor: pointer;


    }


    </style>


    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


  <script src="js/flv.min.js" type="text/javascript" charset="utf-8"></script>


</head>






@@ -622,6 +662,16 @@


            var paperList = data.paperVOList;


            var recordVOList = data.recordVOList;


            var recovery = data.recoveryVO;




      //请求检测数据


      axios.get('http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/queryStationAndVideoInfoData?type=All&landId=' + recovery.landId).then(function (res) {


        var staList = res.data.data.staList;


        var vidList = res.data.data.vidList;




        window.detectionList = staList;


        window.videoList = vidList;








            var str0 = `<div class="top-log">


            <img width="100%" height="405px" src="http://182.106.212.58:8014/assets/images/sym/2.png" />


@@ -739,171 +789,133 @@


            <div class="jksp model-content">


                <div class="content-header">


                    <van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1272.png" /> 良心生产，不怕监督，24小时视频监控


                </div>


                <div class="content-body"></div>


                <div class="content-footer">


                    <div class="equi-btn on">


                        3号摄像头


                    </div>


                </div>`




                    <div class="equi-btn">


                        3号摄像头


                    </div>


                </div>


            </div>




        //监控


        var strvedio = '';


        // vidList.push({


        //   name:"1号摄像头"


        // })


        // vidList.push({


        //   name:"2号摄像头"


        // })


        if (vidList.length > 0) {


          //读取第一个视频 url


          strvedio = strvedio + `<div class="content-body">


                  <div id="video-body">


                    <video controls id="video-element" muted>你的浏览器太老了，不支持HTML5视频。</video>


                    <div id="video-footer" class="css-closeTrans">


                      <img id="oper-btn" src="img/i-play.png" width="40px" />


                      <div id="video-sound">


                      </div>


                      <img id="full-btn" src="img/i-fs.png" width="35px" />


                    </div>


                  </div>


                </div><div class="content-footer">`


          //遍历监控点


          vidList.forEach((item,index) => {


            strvedio = strvedio + `<div class="equi-btn on">


                        ${item.name}


                    </div>`


            if(index>=1){


              // equibtn.style.color = "#fff";


            }


          })


        } else {


          strvedio = strvedio + `<div class="content-body">


                </div><div class="content-footer">`


        }




        var str10 =


          `</div>


              </div>


            <div class="jk model-content">


                <div class="content-header">


                    物联网监控保证产地养分充足，且不被污染


                </div>


                <div class="content-body">


                    <div class="site-box">


                        <div class="site-title">


                    <div class="site-box">`




        var strdetection = '';




        if (staList.length > 0) {


          var sta = staList[0];


          var timeStr = '';


          var time = sta.weatherTime;


          //当前时间


          var date = new Date();


          //计算时间差


          var crud = date.getTime() - new Date(time).getTime();


          //计算出相差天数


          var days = Math.floor(crud / (24 * 3600 * 1000))


          timeStr = days + "天";




          if (days == 0) {


            //计算出小时数


            var leave1 = crud % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数


            var hours = Math.floor(leave1 / (3600 * 1000))


            timeStr = hours + "小时";




            if (hours == 0) {


              //计算相差分钟数


              var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数


              var minutes = Math.floor(leave2 / (60 * 1000))


              timeStr = minutes + "分钟";




              if (minutes == 0) {


                //计算相差秒数


                var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数


                var seconds = Math.round(leave3 / 1000)


                timeStr = seconds + "秒";


              }


            }


          }




          //读取第一个检测设备


          strdetection = strdetection + `<div class="site-title">


                            <div class="l">


                                <van-icon name="like" /> 谷米田庄二号气象站


                            </div>


                            <div class="r">


                                <van-icon name="add-o" />


                              <select id="select" style="font-weight: bold;color: #333333;border: none;font-size: 28px;width:96%">`








          staList.forEach(item=>{


            strdetection = strdetection + `<option>${item.name}</option>`


          })




          strdetection = strdetection + `</select>


                            </div>


                        </div>


                        <div class="site-date">


                            <div class="site-date-text">6分钟前更新</div>


                            <div class="site-date-text" id="sitedatetext">


                              ${timeStr}前更新</div>


                        </div>


                        <div class="site-content">




                            <div>


                        <div class="site-content" id="detectionlist">`


          //遍历检测信息


          var weatherList = staList[0].weatherList;


          if (weatherList.length > 0) {


            weatherList.forEach(item => {


              if (item.name != '监测时间') {


                strdetection = strdetection + `<div class="list">


                                <div class="l">


                                    <div class="type">空气温度</div>


                                      <div class="type">${item.name}</div>


                                    <div class="unit">


                                        单位：℃


                                          单位：${item.unit}


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                    ${item.value}


                                </div>


                            </div>


                              </div>`


              }


            })


          }


        } else {


          strdetection = strdetection + `


                        <div class="site-content">`


        }




                            <div>


                                <div class="l">


                                    <div class="type">空气温度</div>


                                    <div class="unit">


                                        单位：℃


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                </div>


                            </div>




                            <div>


                                <div class="l">


                                    <div class="type">空气温度</div>


                                    <div class="unit">


                                        单位：℃


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                </div>


                            </div>




                            <div>


                                <div class="l">


                                    <div class="type">空气温度</div>


                                    <div class="unit">


                                        单位：℃


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                </div>


                            </div>




                            <div>


                                <div class="l">


                                    <div class="type">空气温度</div>


                                    <div class="unit">


                                        单位：℃


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                </div>


                            </div>




                            <div>


                                <div class="l">


                                    <div class="type">空气温度</div>


                                    <div class="unit">


                                        单位：℃


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                </div>


                            </div>




                            <div>


                                <div class="l">


                                    <div class="type">空气温度</div>


                                    <div class="unit">


                                        单位：℃


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                </div>


                            </div>




                            <div>


                                <div class="l">


                                    <div class="type">空气温度</div>


                                    <div class="unit">


                                        单位：℃


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                </div>


                            </div>




                            <div>


                                <div class="l">


                                    <div class="type">空气温度</div>


                                    <div class="unit">


                                        单位：℃


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                </div>


                            </div>




                            <div>


                                <div class="l">


                                    <div class="type">空气温度</div>


                                    <div class="unit">


                                        单位：℃


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                </div>


                            </div>




                            <div>


                                <div class="l">


                                    <div class="type">空气温度</div>


                                    <div class="unit">


                                        单位：℃


                                    </div>


                                </div>


                                <div class="r">


                                    33.92


                                </div>


                            </div>




                        </div>


        var str11 = `</div>


                    </div>


                </div>


            </div>


@@ -931,7 +943,6 @@


                    <div class="r">


                        <div>


                            我是基地管理员：


                            <!-- <text>郝爱国</text> -->


                        </div>


                        <div class="r-b-msg">


                            以下农事操作，是在我的监督下完成


@@ -964,7 +975,6 @@


                                <div class="pel">操作人：${item.realName}</div>


                            </div>


                        </div>




                    </div>


                </div>`


            });


@@ -1030,8 +1040,194 @@




            var dom = $('.page-main-container');


            dom.empty();


            dom.append(str0 + str1 + str2 + str3 + str4 + str5 + str6);


        dom.append(str0 + str1 + str2 + strvedio + str10 + strdetection + str11 + str3 + str4 + str5 + str6);




        var playImg = "img/i-play.png",


          pauseImg = "img/i-pause.png",


          fsImg = "img/i-fs.png",


          exitFsImg = "img/i-exitfs.png",


          soundOpenImg = "img/sound-open.png",


          soundCloseImg = "img/sound-close.png";




        var videoBody = document.getElementById('video-body'),


          videoElement = document.getElementById('video-element'),


          videoBegin = document.getElementById('video-begin'),


          videoEnd = document.getElementById('video-end'),


          videoFooter = document.getElementById('video-footer'),


          operBtn = document.getElementById('oper-btn'),


          fullBtn = document.getElementById('full-btn');




        var slide = false, soundWidth = 0;




        //初始化视频配置


        if (flvjs.isSupported()) {


          var flvPlayer = flvjs.createPlayer({


            type: 'flv',


            url: 'wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv',


            hasAudio: false


        });






          flvPlayer.attachMediaElement(videoElement);


          flvPlayer.load();


        }




        videoElement.style.width = "100%";


        videoElement.style.objectFit = "fill";




        //播放 或 暂停


        operBtn.onclick = function () {


          if (this.attributes.src.value === playImg) {


            flvPlayer.play();


            this.src = pauseImg;


          } else {


            flvPlayer.pause();


            this.src = playImg;


          }


        }




        //全屏 或 退出全屏


        fullBtn.onclick = function () {


          if (this.attributes.src.value === fsImg) {


            var docEle = videoContainer;


            var rfs = docEle.requestFullScreen || docEle.webkitRequestFullScreen || docEle.mozRequestFullScreen || docEle.msRequestFullScreen;


            if (rfs) {


              rfs.call(docEle);


            }


            this.src = exitFsImg;


          } else {


            var cfs = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.exitFullScreen;


            if (cfs) {


              cfs.call(document);


            }


            this.src = fsImg;


          }


        }




        //鼠标进入 显示 工具条


        videoBody.onmouseenter = function () {


          videoFooter.classList.add(


            "css-show-transition",


            "css-showTrans"


          );


        }


        //鼠标退出 隐藏 工具条


        videoBody.onmouseleave = function () {


          videoFooter.classList.add(


            "css-close-transition",


            "css-closeTrans"


          );


          videoFooter.classList.remove(


            "css-show-transition",


            "css-showTrans"


          );


        }




        //播放视频


        operBtn.onclick();




        //切换视频


        $('.jksp .content-footer .equi-btn').click(function () {


          var ind = $(this).index()


          window.videoList.some((item, index) => {


            if (ind == index) {


              //暂停播放数据流


              flvPlayer.pause();


              //取消数据流加载


              flvPlayer.unload();


              //将播放实例从节点中取出


              flvPlayer.detachMediaElement();


              //销毁播放实例


              flvPlayer.destroy();


              //重新创建流实例


              var flvPlayer = flvjs.createPlayer({


                type: 'flv',


                url: 'wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv',


                hasAudio: false


              });




              flvPlayer.attachMediaElement(videoElement);


              flvPlayer.load();


            }


          })


        })




        //检测点下拉切换事件


        $('#select').change(function() {


            var bind = $(this).val()


            window.detectionList.some((e, index) => {


            if (bind == e.name) {


              var detectionlist= document.getElementById("detectionlist");


              //先清空


              detectionlist.innerHTML = "";


              //再追加


              var weatherList = e.weatherList;


              var strdetection = "";


              if (weatherList.length > 0) {


                weatherList.forEach( item => {


                  if (item.name != '监测时间') {


                    strdetection = strdetection + `<div class="list">


                                      <div class="l">


                                          <div class="type">${item.name}</div>


                                          <div class="unit">


                                              单位：${item.unit}


                                          </div>


                                      </div>


                                      <div class="r">


                                        ${item.value}


                                      </div>


                                  </div>`


                  }


                })


              }


              detectionlist.innerHTML = strdetection;




              //更新时间替换


              var sitedatetext= document.getElementById("sitedatetext");


              //先清空


              sitedatetext.innerHTML = "";


              var timeStr = '';


              var time = e.weatherTime;


              //当前时间


              var date = new Date();


              //计算时间差


              var crud = date.getTime() - new Date(time).getTime();


              //计算出相差天数


              var days = Math.floor(crud / (24 * 3600 * 1000))


              timeStr = days + "天";




              if (days == 0) {


                //计算出小时数


                var leave1 = crud % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数


                var hours = Math.floor(leave1 / (3600 * 1000))


                timeStr = hours + "小时";




                if (hours == 0) {


                  //计算相差分钟数


                  var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数


                  var minutes = Math.floor(leave2 / (60 * 1000))


                  timeStr = minutes + "分钟";




                  if (minutes == 0) {


                    //计算相差秒数


                    var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数


                    var seconds = Math.round(leave3 / 1000)


                    timeStr = seconds + "秒";


                  }


                }


              }


              //填充时间参数


              sitedatetext.innerHTML = `<div class="site-date-text" id="sitedatetext">


                                ${timeStr}前更新</div>`;


            }


          })


        })


      });


    });


  </script>




  <script>




    </script>


</body>