zhny_web.git - Gitblit

parent: 332cb84f | patch | commit | ignore whitespace

guanqb

2022-09-03 e36ce8a4943cae5cd0cb46ea5373269e06eb9d56

溯源码页面优化

1 files modified

2 files added

	public/js/WebRtcPlayer.js	76 ●●●●● patch \| view \| raw \| blame \| history
	public/newtrac.html	945 ●●●●● patch \| view \| raw \| blame \| history
	public/traceablityInfo.html	113 ●●●●● patch \| view \| raw \| blame \| history

 public/js/WebRtcPlayer.js

New file
@@ -0,0 +1,76 @@
class WebRtcPlayer {
    /**
     * WebRtc播放器
     * @param {Element} ele 
     */
    constructor(ele) {
        this.ele = ele;
        // this.PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
        this.PeerConnection = window.RTCPeerConnection;

    }
    Open(url) {
        if(this.localpc){
            this.Close();
        }
        this.localpc = new this.PeerConnection(null);
        const AudioTransceiverInit = {
            direction: 'recvonly',
            sendEncodings: []
        };
        const VideoTransceiverInit = {
            direction: 'recvonly',
            sendEncodings: []
        };
        this.localpc.addTransceiver('audio', AudioTransceiverInit);
        this.localpc.addTransceiver('video', VideoTransceiverInit);
        let that = this;
        this.localpc.ontrack = function (e) {
            if (!that.localpc.stream) {
                that.localpc.streamId = e.track.id;
                that.localpc.stream = new MediaStream();
                that.ele.srcObject = that.localpc.stream;
                that.ele.muted = true;
                that.ele.autoplay = true;
            }
            that.localpc.stream.addTrack(e.track);
        }

        this.localpc.createOffer()
            .then(offer => this.localpc.setLocalDescription(offer))
            .then(() => {
                that.getSdp(url, this.localpc.localDescription.sdp, function (data) {
                    console.log("pullStreamRes:", data);
                    data = JSON.parse(data);
                    if (data.code != 0) return;
                    let anwser = {};
                    anwser.sdp = data.sdp;
                    anwser.type = 'answer';
                    that.localpc.setRemoteDescription(anwser).then(() => {
                        console.log("播放成功");
                    }).catch(e => {
                        console.error("播放错误:" + e);
                    });
                });
            })
            .catch(e => "添加ICE候选人过程错误: " + e);
    }
    Close() {
        if(this.localpc){
            this.localpc.close();
            this.localpc = null;
        }
    }
    getSdp(url, body, success) {
        let xhr = new XMLHttpRequest();
        xhr.open('POST', url);
        xhr.setRequestHeader('Content-Type', 'text/plain;charset=utf-8');
        xhr.onreadystatechange = function () {
            if (xhr.responseText.length < 1) return;
            if (xhr.status === 200) {
                success(xhr.responseText);
            }
        };
        xhr.send(body);
    }
}

 public/newtrac.html

New file
@@ -0,0 +1,945 @@
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查看溯源</title>
  <style>
    .top-log {
      position: relative;
      height: 520px;
    }

    .top-log .btn-grounp {
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: transparent;
    }

    .main-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .main-content .logo {
      position: relative;
      margin-top: 3.5rem;
      width: 18.75rem;
      height: 18.75rem;
      border-radius: 50%;
      overflow: hidden;
    }

    .main-content .logo .btn {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 4rem;
      line-height: 4rem;
      text-align: center;
      background: rgba(0, 0, 0, .4);
      font-size: 1.5rem;
      color: #fff;
    }

    .main-content .title {
      margin-top: 1.875rem;
      font-size: 48px;
      font-weight: bold;
      color: #333333;
    }

    .main-content .type {
      display: flex;
      margin-top: 10px;
      width: 180px;
      height: 36px;
      font-size: 24px;
      background: #7BDA8F;
      color: #fff;
      border-radius: 8px;
      overflow: hidden;
    }

    .main-content .type .sub {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .main-content .type .icon {
      width: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #6AC077;
    }

    .main-content .date {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
      width: calc(100% - 60px);
      height: 110px;
      background: #E4F0F1;
      border-radius: 34px;
      font-size: 34px;
      color: #5ABF78;
    }

    .model-box {
      margin-top: 60px;
      padding: 0 30px;
    }

    .model-box .model-title {
      display: flex;
      align-items: center;
      height: 50px;
    }

    .model-box .model-title .l {
      width: 5px;
      height: 36px;
      background: #5ABF78;
    }

    .model-box .model-title .title {
      margin-left: 20px;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
    }

    .model-box .model-title .border {
      flex: 1;
      margin: 13px;
      border-top: 1px dashed #D4DBE8;
      border-bottom: 1px dashed #D4DBE8;
    }

    .model-box .model-title .status {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #5ABF78;
    }

    .model-box .model-title .statu.no {
      color: #EC9144;
    }

    .model-box .model-title .status view {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .model-box.qw .model-content {
      display: flex;
      flex-direction: column;
      margin-top: 30px;
      background: #fff;
      border-radius: 30px;
    }

    .model-box.qw .model-content .box:first-child {
      border-bottom: 2px solid #EEEEEE;
    }

    .model-box.qw .model-content .box {
      flex: 1;
      display: flex;
      padding: 30px;
    }

    .model-box.qw .model-content .box>.r {
      margin-left: 26px;
      flex: 1;
      font-size: 24px;
    }

    .model-box.qw .model-content .box>.r .title {
      font-size: 32px;
      font-weight: bold;
      color: #333333;
    }

    .model-box.qw .model-content .box>.r .line-box {
      margin-top: 16px;
      display: flex;
    }

    .model-box.qw .model-content .box>.r .line-box .sub {
      width: 120px;
      color: #333333;
      line-height: 36px;
    }

    .model-box.qw .model-content .box>.r .line-box .content {
      flex: 1;
      color: #666666;
      line-height: 36px;
    }

    /* 容器 */

    .model-box.cd .model-content {
      margin-top: 30px;
      background: #fff;
      border-radius: 30px;
    }

    /* 头部 */

    .model-box.cd .model-content .content-header {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90px;
      font-size: 30px;
      color: #5ABF78;
    }

    .model-box.cd .model-content.jk .content-header {
      color: #A255B5;
      border-bottom: 2px solid #ECECEC;
    }

    /* 中间 */

    .model-box.cd .model-content.dk .content-body {
      height: 450px;
      background: greenyellow;
    }

    .model-box.cd .model-content.jksp .content-body {
      height: 385px;
      /* background: #A255B5; */
    }

    .model-box.cd .model-content.jk .content-body {
      border-bottom: 1px solid transparent;
    }

    .model-box.cd .model-content.jk .content-body .site-box {
      margin: 26px 22px;
      border-radius: 28px;
      border: 2px solid #E3E3E3;
    }

    .model-box.cd .model-content.jk .content-body .site-box .site-title {
      padding: 0 22px;
      /* margin-top: 10px; */
      height: 100px;
      line-height: 100px;
      /* display: flex;
      align-items: center;
      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 {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 13px 0;
      height: 2px;
      background: #ECECEC;
    }

    .model-box.cd .model-content.jk .content-body .site-box .site-date .site-date-text {
      padding: 0 18px;
      /* height: 36px; */
      background: #F4F4F4;
      border-radius: 18px;
      font-size: 24px;
      color: #929292;
    }

    .model-box.cd .model-content.jk .content-body .site-box .site-content {
      padding: 24px 22px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .model-box.cd .model-content.jk .content-body .site-box .site-content>div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16px;
      padding: 16px 12px;
      width: calc((100% - 18px) / 2);
      background: #E9F1FC;
      border-radius: 8px;
      box-sizing: border-box;
    }

    .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>div .type {
      font-size: 28px;
      color: #333333;
    }

    .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>div .r {
      font-size: 38px;
      color: #5ABF78;
    }

    /* 底部 */

    .model-box.cd .model-content .content-footer {
      display: flex;
      align-items: center;
      height: 120px;
      font-size: 24px;
    }

    .model-box.cd .model-content.dk .content-footer {
      padding: 0 26px;
    }

    .model-box.cd .model-content.dk .content-footer .l {
      width: 480px;
      color: #666666;
    }

    .model-box.cd .model-content.dk .content-footer .r {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #5ABF78;
    }

    .model-box.cd .model-content.jksp .content-footer {
      padding: 0 30px;
    }

    .model-box.cd .model-content.jksp .content-footer .equi-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 12px;
      width: 196px;
      height: 60px;
      background: #F2F5F9;
      border-radius: 9px;
      border: 1px solid #DCDCDC;
      font-size: 24px;
      color: #697580;
    }

    .model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
      margin-left: 0;
    }

    .model-box.cd .model-content.jksp .content-footer .equi-btn.on {
      background: linear-gradient(90deg, #5ABB82 0%, #7BDA8F 100%);
      border: none;
      color: #fff;
    }

    /* 种植环节 */

    .model-box.zz .model-content {
      margin-top: 30px;
    }

    .model-box.zz .model-content .msg {
      display: flex;
      align-items: center;
      height: 126px;
    }

    .model-box.zz .model-content .msg .r {
      margin-left: 30px;
      padding: 10px 26px;
      position: relative;
      flex: 1;
      background: #fff;
      font-size: 24px;
      color: #999999;
      border-radius: 16px;
    }

    .model-box.zz .model-content .msg .r text {
      font-weight: bold;
      color: #EC9144;
    }

    .model-box.zz .model-content .msg .r .r-b-msg {
      margin-top: 10px;
      color: #333333;
    }

    .model-box.zz .model-content .msg .r .point-to {
      position: absolute;
      top: 0;
      left: -18px;
      right: auto;
      bottom: 0;
      margin: auto;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-right: 30px solid #fff;
      border-bottom: 14px solid transparent;
      z-index: -1;
    }

    .model-box.zz .model-content .record-box {
      display: flex;
      align-items: center;
    }

    .model-box.zz .model-content .record-box .l {
      margin-left: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .model-box.zz .model-content .record-box .l .point {
      width: 20px;
      height: 20px;
      background: #5ABF78;
      border-radius: 50%;
    }

    .model-box.zz .model-content .record-box .l .line {
      width: 2px;
      height: 150px;
      background: #DEE3E7;
    }

    .model-box.zz .model-content .record-box .l .line.one {
      width: 2px;
      height: 100px;
      background: #DEE3E7;
    }

    .model-box.zz .model-content .record-box .l .line.two {
      width: 2px;
      height: 100px;
      background: #DEE3E7;
    }

    .model-box.zz .model-content .record-box .r {
      margin-left: 64px;
      flex: 1;
    }

    .model-box.zz .model-content .record-box .r .record-item {
      margin-top: 30px;
      padding: 32px 30px 42px;
      background: #FFFFFF;
      border-radius: 30px;
    }

    .model-box.zz .model-content .record-box .r .record-item .type {
      font-size: 32px;
      font-weight: bold;
      color: #333333;
    }

    .model-box.zz .model-content .record-box .r .record-item .date-pel {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }

    .model-box.zz .model-content .record-box .r .record-item .date-pel .date {
      padding: 2px 20px;
      font-size: 24px;
      color: #fff;
      background: linear-gradient(89deg, #60BA84 0%, #73DB90 100%);
      border-radius: 10px;
    }

    .model-box.zz .model-content .record-box .r .record-item .date-pel .pel {
      font-size: 28px;
      color: #666666;
    }

    /* 生产企业 */

    .model-box.sc .model-content {
      margin-top: 30px;
      /* padding-bottom: 30px; */
      background: #fff;
      border-radius: 30px;
    }

    .model-box.sc .model-content .content-header {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 124px;
      font-size: 36px;
      font-weight: bold;
      color: #000000;
    }

    .model-box.sc .model-content .content-body {
      height: 390px;
    }

    .model-box.sc .model-content .content-body .swiper {
      height: 100%;
      width: 100%;
    }

    .model-box.sc .model-content .content-body .swiper-image {
      height: 100%;
      width: 100%;
    }

    .model-box.sc .model-content .content-body .slide-image {
      height: 100%;
      width: 100%;
    }

    .model-box.sc .model-content .text-intro {
      margin: 0 25px;
      padding: 20px 0 34px;
      line-height: 42px;
      font-size: 24px;
      color: #818592;
      border-bottom: 2px solid #EAEEF4;
    }

    .model-box.sc .model-content .content-footer {
      margin-top: 24px;
      display: flex;
      align-items: flex-start;
      justify-content: space-around;
    }

    .model-box.sc .model-content .content-footer>view {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .model-box.sc .model-content .content-footer>view .type {
      margin-top: 6px;
      font-size: 24px;
      color: #697580;
    }

    .model-box.sc .model-content .content-footer>view .msg {
      margin-top: 2px;
      padding: 2px 6px;
      background: #E4EBEE;
      border-radius: 13px 13px 13px 13px;
      font-size: 20px;
      color: #697580;
    }

    .btn-grounp {
      margin-top: 84px;
      display: flex;
      height: 148px;
      background: #FFFFFF;
    }

    .btn-grounp .l {
      margin-right: 76px;
      width: 194px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .btn-grounp .l .plan {
      font-size: 34px;
      font-weight: bold;
      color: #D55B26;
    }

    .btn-grounp .l .text {
      margin-top: 2px;
      font-size: 20px;
      color: #A5AEB5;
    }

    .btn-grounp .r {
      flex: 1;
      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>

<body>
  <div class="page-main-container" style="background: #F1F9F8;width:100%;height: 100%;">
    <!-- str0 -->
    <!-- 顶部图片 -->
    <div class="top-log">
      <img width="100%" height="520px" src="http://182.106.212.58:8014/assets/images/sym/2.png" />
      <div class="btn-grounp">
        <img bindtap="scrollTo" data-class=".qw" width="200px" height="100px"
          src="http://182.106.212.58:8014/assets/images/sy/1418.png" />
        <img bindtap="scrollTo" data-class=".cd" width="200px" height="100px"
          src="http://182.106.212.58:8014/assets/images/sy/1416.png" />
        <img bindtap="scrollTo" data-class=".zz" width="200px" height="100px"
          src="http://182.106.212.58:8014/assets/images/sy/1415.png" />
        <img bindtap="scrollTo" data-class=".sc" width="200px" height="100px"
          src="http://182.106.212.58:8014/assets/images/sy/1414.png" />
      </div>
    </div>

    <!-- 农产品信息 -->
    <div class="main-content">
      <div class="logo">
        <img width="100%" height="100%" id="logoImg" />
      </div>
      <div class="title" id="titleName"></div>
      <div class="type">
        <div class="sub" id="sub1">${recovery.lx}</div>
      </div>
      <div class="date" id="date1"></div>
    </div>

    <!-- 权威检测 -->
    <div class="qw model-box">
      <div class="model-title">
        <div class="l"></div>
        <div class="title">权威检测</div>
        <div class="border"></div>
        <div class="status">
          <div>
            <van-icon style="margin-right: 10px;" name="http://182.106.212.58:8014/assets/images/sym/1265.png" />
          </div>
          可追溯
        </div>
      </div>
      <div class="model-content" id="str1Dom">
        <!-- str1 -->
        <!-- str2 -->
      </div>
    </div>

    <!-- 产地信息 -->
    <div class="cd model-box">
      <div class="model-title">
        <div class="l"></div>
        <div class="title">产地信息</div>
        <div class="border"></div>
        <div class="status">
          <div>
            <van-icon style="margin-right: 10px;" name="http://182.106.212.58:8014/assets/images/sym/1265.png" />
          </div>
          可追溯
        </div>
      </div>

      <div class="dk model-content">
        <div class="content-header">
          <van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1267.png" /> 种植地块
        </div>
        <div class="content-body">
          <img id="contentImg1" />
        </div>
        <div class="content-footer">
          <div class="l" id="farmAddress"></div>
        </div>
      </div>

      <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>
        <!-- str10 -->
      </div>
    </div>

    <!-- 监控监测数据展示 -->
    <div class="jk model-content">
      <div class="content-header">
        物联网监控保证产地养分充足，且不被污染
      </div>
      <div class="content-body">
        <div class="site-box">
          <!-- strdetection -->
          <div class="site-title">
            <div class="l">
              <select id="select" style="font-weight: bold;color: #333333;border: none;font-size: 28px;width:96%">
                <option>${item.name}</option>
              </select>
            </div>
          </div>
          <div class="site-date">
            <div class="site-date-text" id="sitedatetext">更新时间</div>
          </div>
          <div class="site-content" id="detectionlist">
            <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>
            <!-- <div class="site-content">
              <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> -->
            <!-- str11 -->
            <!-- </div> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 种植环节 -->
    <div class="zz model-box">
      <div class="model-title">
        <div class="l"></div>
        <div class="title">种植环节</div>
        <div class="border"></div>
        <div class="status no"></div>
      </div>
      <div class="model-content">
        <div class="msg">
          <div class="l">
            <img width="126px" height="126px" src="http://182.106.212.58:8014/assets/images/sy/zz-log.png" />
          </div>
          <div class="r">
            <div>
              我是基地管理员：
            </div>
            <div class="r-b-msg">
              以下农事操作，是在我的监督下完成
            </div>

            <div class="point-to"></div>
          </div>
        </div>
        <!-- str3 -->
        <div id="recordBox"></div>
        <!-- str4 -->
      </div>
    </div>

    <!-- 生产企业 -->
    <div class="sc model-box">
      <div class="model-title">
        <div class="l"></div>
        <div class="title">生产企业</div>
        <div class="border"></div>
        <div class="status no">
        </div>
      </div>
      <div class="model-content">
        <div class="content-header" id="contentHeader"></div>
        <div class="content-body">
          <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
            <block class="swiper-image" id="swImg">
              <!-- str5 -->
              <!-- str6 -->
            </block>
          </swiper>

        </div>
        <div class="text-intro" id="textIntro"></div>
        <div class="content-footer">
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  $(function () {
    var getData = function (name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return decodeURI(r[2]);
      return null;
    };
    var code = getData("code");
    axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfos?code=' + code).then(
      function (res) {
        // 初始化数据begin
        var data = res.data.data;
        var farm = data.farm;
        var land = data.landVO;
        var num = data.num;
        var paperList = data.paperVOList;
        var recordVOList = data.recordVOList;
        var recovery = data.recoveryVO;
        // 初始化数据end

        // 页面数据渲染begin
        $('#titleName').text(recovery.strainName)
        $('#logoImg').attr('src', recovery.url)
        $('#sub1').text(recovery.lx)
        $('#date1').text('采收时间：' + recovery.time.replaceAll("-", "."))
        $('#contentHeader').text(farm.farmName)
        $('#textIntro').text(farm.introduce)
        // $('#slideImg').attr(item)
        // 页面数据渲染end

        // 权威检测页面遍历begin
        var str1 = '';
        if (paperList.length > 0) {
          paperList.forEach(item => {
            var url = item.pictures.split(",")[0];
            str1 = str1 + `<div class="box">
                        <div class="l">
                            <img width="204px" height="204px" src="${url}" />
                        </div>
                        <div class="r">
                            <div class="title">
                                ${item.name}
                            </div>
                            <div class="org line-box">
                                <div class="sub">检测机构：</div>
                                <div class="content">${item.organName}</div>
                            </div>
                            <div class="ser line-box">
                                <div class="sub">证书编号：</div>
                                <div class="content">${item.code}</div>
                            </div>
                            <div class="date line-box">
                                <div class="sub">颁发日期：</div>
                                <div class="content">${item.time.replaceAll("-", ".")}</div>
                            </div>
                        </div>
                    </div>`
          });
        } else {
          str1 = str1 + `<div class="box"></div>`
        }
        $('#str1Dom').append(str1)
        $('#contentImg1').attr('src', land.url)
        $('#farmAddress').text(farm.farmAddress)
        // 权威检测页面遍历end       

        // 种植环节遍历begin
        var str3 = '';
        recordVOList.forEach((item, index) => {
          str3 = str3 + `<div class="record-box">
                    <div class="l">

                        <div class="one  line" style="${index == 0 ? 'background: transparent !important;' : ''}">
                        </div>

                        <div class="point">
                        </div>

                        <div class="two line" style="${index == recordVOList.length - 1 ? 'background: transparent !important;' : ''}">
                        </div>

                    </div>
                    <div class="r">
                        <div class="record-item">
                            <div class="type">${item.typeName}</div>
                            <div class="date-pel">
                                <div class="date">${item.time}</div>
                                <div class="pel">操作人：${item.realName}</div>
                            </div>
                        </div>
                    </div>
                </div>`
        });
        console.log(str3);
        $('#recordBox').append(str3)
        // 种植环节遍历end

        // 监测数据更新begin
        // 监测数据更新end

        //生产企业begin
        var str5 = ''
        var urls = farm.picture.split(",");
        if (urls.length > 0) {
          urls.forEach(item => {
            str5 = str5 + `<swiper-item>
                                <image src="${item}" class="slide-image" />
                            </swiper-item>`
          })
        }
        $('#swImg').append(str5)
        //生产企业end
      })
  })

</script>

</html>

 public/traceablityInfo.html

@@ -345,7 +345,7 @@
    .model-box.cd .model-content.jksp .content-footer .equi-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      /* justify-content: center; */
      margin-left: 12px;
      width: 196px;
      height: 60px;
@@ -354,6 +354,9 @@
      border: 1px solid #DCDCDC;
      font-size: 24px;
      color: #697580;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
@@ -631,49 +634,6 @@
  <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>

  <script>
    (function (win, doc) {
      'use strict';
      var options = {
        width: 750,
        dpr: win.devicePixelRatio
      };
      var html = doc.documentElement,
        width = html.getAttribute('data-width') || options.width,
        dpr = html.getAttribute('data-dpr') || options.dpr,
        viewPort = doc.querySelector('meta[name="viewport"]'),
        rotate = win.onorientationchange ? 'orientationchange' : 'resize';

      // 设置html fontSize
      function setSize() {
        var winWidth = win.innerWidth || html.clientWidth;
        html.style.fontSize = 16 * winWidth / width + 'px';
      };

      // 设置 initial-scale
      function setScale() {
        setSize();
        var viewContent = viewPort.getAttribute('content');
        var reg = /initial-scale=(\d(.\d+)?)/i;
        var matchRes = viewContent.match(reg);
        var scale = 1 / parseInt(dpr);
        if (matchRes && matchRes[1] == scale) {
          return;
        }
        var newContent = viewContent.replace(reg, function (a, b) {
          return a.replace(/\d(.\d+)?/i, scale);
        });
        viewPort.setAttribute('content', newContent);
      };

      win.addEventListener(rotate, setSize);
      window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
      requestAnimationFrame(setScale);
    }(window, document));

  </script>

</head>


@@ -708,20 +668,7 @@
      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">
      var str0 = `<div class="top-log">
            <img width="100%" height="520px" src="http://182.106.212.58:8014/assets/images/sym/2.png" />
            <div class="btn-grounp">
                <img bindtap="scrollTo" data-class=".qw" width="200px" height="100px" src="http://182.106.212.58:8014/assets/images/sy/1418.png" />
@@ -767,11 +714,11 @@
        </div>

        <div class="model-content">`
        var str1 = '';
        if (paperList.length > 0) {
          paperList.forEach(item => {
            var url = item.pictures.split(",")[0];
            str1 = str1 + `<div class="box">
      var str1 = '';
      if (paperList.length > 0) {
        paperList.forEach(item => {
          var url = item.pictures.split(",")[0];
          str1 = str1 + `<div class="box">
                        <div class="l">
                            <img width="204px" height="204px" src="${url}" />
                        </div>
@@ -793,13 +740,13 @@
                            </div>
                        </div>
                    </div>`
          });
        } else {
          str1 = str1 + `<div class="box"></div>`
        }
        });
      } else {
        str1 = str1 + `<div class="box"></div>`
      }


        var str2 = `
      var str2 = `
            </div>
        </div>

@@ -821,7 +768,7 @@
                    <van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1267.png" /> 种植地块
                </div>
                <div class="content-body">
                    <image style="width: 100%;height: 100%;" src="${land.url}" />
                    <image style="width: 100%;height:100%" src="${land.url}" />
                </div>
                <div class="content-footer">
                    <div class="l">
@@ -838,6 +785,24 @@
                <div class="content-header">
                    <van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1272.png" /> 良心生产，不怕监督，24小时视频监控
                </div>`

      var dom = $('.page-main-container');
      dom.empty();
      dom.append(str0 + str1 + str2);

      //请求检测数据
      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;






        //监控
@@ -1081,7 +1046,7 @@
        //     </div>
        // </div>

        var dom = $('.page-main-container');
        // var dom = $('.page-main-container');
        dom.empty();
        dom.append(str0 + str1 + str2 + strvedio + str10 + strdetection + str11 + str3 + str4 + str5 + str6);

@@ -1090,10 +1055,10 @@

        var slide = false,
          soundWidth = 0;

        var flvPlayer = null;
        //初始化视频配置
        if (flvjs.isSupported()) {
          var flvPlayer = flvjs.createPlayer({
          flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: window.videoList[0].wssFlv,
            hasAudio: false
@@ -1108,11 +1073,11 @@
        videoElement.style.height = "385px";
        videoElement.style.objectFit = "fill";


        //切换视频
        $('.jksp .content-footer .equi-btn').click(function () {
          var ind = $(this).index()
          window.videoList.some((item, index) => {
            console.log('1112', item, index);
            if (ind == index) {
              //暂停播放数据流
              flvPlayer.pause();
@@ -1123,7 +1088,7 @@
              //销毁播放实例
              flvPlayer.destroy();
              //重新创建流实例
              var flvPlayer = flvjs.createPlayer({
              flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: window.videoList[index].wssFlv,
                hasAudio: false

New file
			@@ -0,0 +1,76 @@
			class WebRtcPlayer {
			/**
			* WebRtc播放器
			* @param {Element} ele
			*/
			constructor(ele) {
			this.ele = ele;
			// this.PeerConnection = window.RTCPeerConnection \|\| window.mozRTCPeerConnection \|\| window.webkitRTCPeerConnection;
			this.PeerConnection = window.RTCPeerConnection;

			}
			Open(url) {
			if(this.localpc){
			this.Close();
			}
			this.localpc = new this.PeerConnection(null);
			const AudioTransceiverInit = {
			direction: 'recvonly',
			sendEncodings: []
			};
			const VideoTransceiverInit = {
			direction: 'recvonly',
			sendEncodings: []
			};
			this.localpc.addTransceiver('audio', AudioTransceiverInit);
			this.localpc.addTransceiver('video', VideoTransceiverInit);
			let that = this;
			this.localpc.ontrack = function (e) {
			if (!that.localpc.stream) {
			that.localpc.streamId = e.track.id;
			that.localpc.stream = new MediaStream();
			that.ele.srcObject = that.localpc.stream;
			that.ele.muted = true;
			that.ele.autoplay = true;
			}
			that.localpc.stream.addTrack(e.track);
			}

			this.localpc.createOffer()
			.then(offer => this.localpc.setLocalDescription(offer))
			.then(() => {
			that.getSdp(url, this.localpc.localDescription.sdp, function (data) {
			console.log("pullStreamRes:", data);
			data = JSON.parse(data);
			if (data.code != 0) return;
			let anwser = {};
			anwser.sdp = data.sdp;
			anwser.type = 'answer';
			that.localpc.setRemoteDescription(anwser).then(() => {
			console.log("播放成功");
			}).catch(e => {
			console.error("播放错误:" + e);
			});
			});
			})
			.catch(e => "添加ICE候选人过程错误: " + e);
			}
			Close() {
			if(this.localpc){
			this.localpc.close();
			this.localpc = null;
			}
			}
			getSdp(url, body, success) {
			let xhr = new XMLHttpRequest();
			xhr.open('POST', url);
			xhr.setRequestHeader('Content-Type', 'text/plain;charset=utf-8');
			xhr.onreadystatechange = function () {
			if (xhr.responseText.length < 1) return;
			if (xhr.status === 200) {
			success(xhr.responseText);
			}
			};
			xhr.send(body);
			}
			}

New file
			@@ -0,0 +1,945 @@
			<!DOCTYPE html>
			<html lang="en">

			<head>
			<meta charset="UTF-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>查看溯源</title>
			<style>
			.top-log {
			position: relative;
			height: 520px;
			}

			.top-log .btn-grounp {
			position: absolute;
			left: 0;
			bottom: -1px;
			width: 100%;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: transparent;
			}

			.main-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			}

			.main-content .logo {
			position: relative;
			margin-top: 3.5rem;
			width: 18.75rem;
			height: 18.75rem;
			border-radius: 50%;
			overflow: hidden;
			}

			.main-content .logo .btn {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 4rem;
			line-height: 4rem;
			text-align: center;
			background: rgba(0, 0, 0, .4);
			font-size: 1.5rem;
			color: #fff;
			}

			.main-content .title {
			margin-top: 1.875rem;
			font-size: 48px;
			font-weight: bold;
			color: #333333;
			}

			.main-content .type {
			display: flex;
			margin-top: 10px;
			width: 180px;
			height: 36px;
			font-size: 24px;
			background: #7BDA8F;
			color: #fff;
			border-radius: 8px;
			overflow: hidden;
			}

			.main-content .type .sub {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.main-content .type .icon {
			width: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #6AC077;
			}

			.main-content .date {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40px;
			width: calc(100% - 60px);
			height: 110px;
			background: #E4F0F1;
			border-radius: 34px;
			font-size: 34px;
			color: #5ABF78;
			}

			.model-box {
			margin-top: 60px;
			padding: 0 30px;
			}

			.model-box .model-title {
			display: flex;
			align-items: center;
			height: 50px;
			}

			.model-box .model-title .l {
			width: 5px;
			height: 36px;
			background: #5ABF78;
			}

			.model-box .model-title .title {
			margin-left: 20px;
			font-size: 36px;
			font-weight: bold;
			color: #333333;
			}

			.model-box .model-title .border {
			flex: 1;
			margin: 13px;
			border-top: 1px dashed #D4DBE8;
			border-bottom: 1px dashed #D4DBE8;
			}

			.model-box .model-title .status {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			color: #5ABF78;
			}

			.model-box .model-title .statu.no {
			color: #EC9144;
			}

			.model-box .model-title .status view {
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.model-box.qw .model-content {
			display: flex;
			flex-direction: column;
			margin-top: 30px;
			background: #fff;
			border-radius: 30px;
			}

			.model-box.qw .model-content .box:first-child {
			border-bottom: 2px solid #EEEEEE;
			}

			.model-box.qw .model-content .box {
			flex: 1;
			display: flex;
			padding: 30px;
			}

			.model-box.qw .model-content .box>.r {
			margin-left: 26px;
			flex: 1;
			font-size: 24px;
			}

			.model-box.qw .model-content .box>.r .title {
			font-size: 32px;
			font-weight: bold;
			color: #333333;
			}

			.model-box.qw .model-content .box>.r .line-box {
			margin-top: 16px;
			display: flex;
			}

			.model-box.qw .model-content .box>.r .line-box .sub {
			width: 120px;
			color: #333333;
			line-height: 36px;
			}

			.model-box.qw .model-content .box>.r .line-box .content {
			flex: 1;
			color: #666666;
			line-height: 36px;
			}

			/* 容器 */

			.model-box.cd .model-content {
			margin-top: 30px;
			background: #fff;
			border-radius: 30px;
			}

			/* 头部 */

			.model-box.cd .model-content .content-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90px;
			font-size: 30px;
			color: #5ABF78;
			}

			.model-box.cd .model-content.jk .content-header {
			color: #A255B5;
			border-bottom: 2px solid #ECECEC;
			}

			/* 中间 */

			.model-box.cd .model-content.dk .content-body {
			height: 450px;
			background: greenyellow;
			}

			.model-box.cd .model-content.jksp .content-body {
			height: 385px;
			/* background: #A255B5; */
			}

			.model-box.cd .model-content.jk .content-body {
			border-bottom: 1px solid transparent;
			}

			.model-box.cd .model-content.jk .content-body .site-box {
			margin: 26px 22px;
			border-radius: 28px;
			border: 2px solid #E3E3E3;
			}

			.model-box.cd .model-content.jk .content-body .site-box .site-title {
			padding: 0 22px;
			/* margin-top: 10px; */
			height: 100px;
			line-height: 100px;
			/* display: flex;
			align-items: center;
			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 {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 13px 0;
			height: 2px;
			background: #ECECEC;
			}

			.model-box.cd .model-content.jk .content-body .site-box .site-date .site-date-text {
			padding: 0 18px;
			/* height: 36px; */
			background: #F4F4F4;
			border-radius: 18px;
			font-size: 24px;
			color: #929292;
			}

			.model-box.cd .model-content.jk .content-body .site-box .site-content {
			padding: 24px 22px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			}

			.model-box.cd .model-content.jk .content-body .site-box .site-content>div {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 16px;
			padding: 16px 12px;
			width: calc((100% - 18px) / 2);
			background: #E9F1FC;
			border-radius: 8px;
			box-sizing: border-box;
			}

			.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>div .type {
			font-size: 28px;
			color: #333333;
			}

			.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>div .r {
			font-size: 38px;
			color: #5ABF78;
			}

			/* 底部 */

			.model-box.cd .model-content .content-footer {
			display: flex;
			align-items: center;
			height: 120px;
			font-size: 24px;
			}

			.model-box.cd .model-content.dk .content-footer {
			padding: 0 26px;
			}

			.model-box.cd .model-content.dk .content-footer .l {
			width: 480px;
			color: #666666;
			}

			.model-box.cd .model-content.dk .content-footer .r {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #5ABF78;
			}

			.model-box.cd .model-content.jksp .content-footer {
			padding: 0 30px;
			}

			.model-box.cd .model-content.jksp .content-footer .equi-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 12px;
			width: 196px;
			height: 60px;
			background: #F2F5F9;
			border-radius: 9px;
			border: 1px solid #DCDCDC;
			font-size: 24px;
			color: #697580;
			}

			.model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
			margin-left: 0;
			}

			.model-box.cd .model-content.jksp .content-footer .equi-btn.on {
			background: linear-gradient(90deg, #5ABB82 0%, #7BDA8F 100%);
			border: none;
			color: #fff;
			}

			/* 种植环节 */

			.model-box.zz .model-content {
			margin-top: 30px;
			}

			.model-box.zz .model-content .msg {
			display: flex;
			align-items: center;
			height: 126px;
			}

			.model-box.zz .model-content .msg .r {
			margin-left: 30px;
			padding: 10px 26px;
			position: relative;
			flex: 1;
			background: #fff;
			font-size: 24px;
			color: #999999;
			border-radius: 16px;
			}

			.model-box.zz .model-content .msg .r text {
			font-weight: bold;
			color: #EC9144;
			}

			.model-box.zz .model-content .msg .r .r-b-msg {
			margin-top: 10px;
			color: #333333;
			}

			.model-box.zz .model-content .msg .r .point-to {
			position: absolute;
			top: 0;
			left: -18px;
			right: auto;
			bottom: 0;
			margin: auto;
			width: 0;
			height: 0;
			border-top: 14px solid transparent;
			border-right: 30px solid #fff;
			border-bottom: 14px solid transparent;
			z-index: -1;
			}

			.model-box.zz .model-content .record-box {
			display: flex;
			align-items: center;
			}

			.model-box.zz .model-content .record-box .l {
			margin-left: 40px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			}

			.model-box.zz .model-content .record-box .l .point {
			width: 20px;
			height: 20px;
			background: #5ABF78;
			border-radius: 50%;
			}

			.model-box.zz .model-content .record-box .l .line {
			width: 2px;
			height: 150px;
			background: #DEE3E7;
			}

			.model-box.zz .model-content .record-box .l .line.one {
			width: 2px;
			height: 100px;
			background: #DEE3E7;
			}

			.model-box.zz .model-content .record-box .l .line.two {
			width: 2px;
			height: 100px;
			background: #DEE3E7;
			}

			.model-box.zz .model-content .record-box .r {
			margin-left: 64px;
			flex: 1;
			}

			.model-box.zz .model-content .record-box .r .record-item {
			margin-top: 30px;
			padding: 32px 30px 42px;
			background: #FFFFFF;
			border-radius: 30px;
			}

			.model-box.zz .model-content .record-box .r .record-item .type {
			font-size: 32px;
			font-weight: bold;
			color: #333333;
			}

			.model-box.zz .model-content .record-box .r .record-item .date-pel {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			}

			.model-box.zz .model-content .record-box .r .record-item .date-pel .date {
			padding: 2px 20px;
			font-size: 24px;
			color: #fff;
			background: linear-gradient(89deg, #60BA84 0%, #73DB90 100%);
			border-radius: 10px;
			}

			.model-box.zz .model-content .record-box .r .record-item .date-pel .pel {
			font-size: 28px;
			color: #666666;
			}

			/* 生产企业 */

			.model-box.sc .model-content {
			margin-top: 30px;
			/* padding-bottom: 30px; */
			background: #fff;
			border-radius: 30px;
			}

			.model-box.sc .model-content .content-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 124px;
			font-size: 36px;
			font-weight: bold;
			color: #000000;
			}

			.model-box.sc .model-content .content-body {
			height: 390px;
			}

			.model-box.sc .model-content .content-body .swiper {
			height: 100%;
			width: 100%;
			}

			.model-box.sc .model-content .content-body .swiper-image {
			height: 100%;
			width: 100%;
			}

			.model-box.sc .model-content .content-body .slide-image {
			height: 100%;
			width: 100%;
			}

			.model-box.sc .model-content .text-intro {
			margin: 0 25px;
			padding: 20px 0 34px;
			line-height: 42px;
			font-size: 24px;
			color: #818592;
			border-bottom: 2px solid #EAEEF4;
			}

			.model-box.sc .model-content .content-footer {
			margin-top: 24px;
			display: flex;
			align-items: flex-start;
			justify-content: space-around;
			}

			.model-box.sc .model-content .content-footer>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			}

			.model-box.sc .model-content .content-footer>view .type {
			margin-top: 6px;
			font-size: 24px;
			color: #697580;
			}

			.model-box.sc .model-content .content-footer>view .msg {
			margin-top: 2px;
			padding: 2px 6px;
			background: #E4EBEE;
			border-radius: 13px 13px 13px 13px;
			font-size: 20px;
			color: #697580;
			}

			.btn-grounp {
			margin-top: 84px;
			display: flex;
			height: 148px;
			background: #FFFFFF;
			}

			.btn-grounp .l {
			margin-right: 76px;
			width: 194px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			}

			.btn-grounp .l .plan {
			font-size: 34px;
			font-weight: bold;
			color: #D55B26;
			}

			.btn-grounp .l .text {
			margin-top: 2px;
			font-size: 20px;
			color: #A5AEB5;
			}

			.btn-grounp .r {
			flex: 1;
			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>

			<body>
			<div class="page-main-container" style="background: #F1F9F8;width:100%;height: 100%;">
			<!-- str0 -->
			<!-- 顶部图片 -->
			<div class="top-log">
			<img width="100%" height="520px" src="http://182.106.212.58:8014/assets/images/sym/2.png" />
			<div class="btn-grounp">
			<img bindtap="scrollTo" data-class=".qw" width="200px" height="100px"
			src="http://182.106.212.58:8014/assets/images/sy/1418.png" />
			<img bindtap="scrollTo" data-class=".cd" width="200px" height="100px"
			src="http://182.106.212.58:8014/assets/images/sy/1416.png" />
			<img bindtap="scrollTo" data-class=".zz" width="200px" height="100px"
			src="http://182.106.212.58:8014/assets/images/sy/1415.png" />
			<img bindtap="scrollTo" data-class=".sc" width="200px" height="100px"
			src="http://182.106.212.58:8014/assets/images/sy/1414.png" />
			</div>
			</div>

			<!-- 农产品信息 -->
			<div class="main-content">
			<div class="logo">
			<img width="100%" height="100%" id="logoImg" />
			</div>
			<div class="title" id="titleName"></div>
			<div class="type">
			<div class="sub" id="sub1">${recovery.lx}</div>
			</div>
			<div class="date" id="date1"></div>
			</div>

			<!-- 权威检测 -->
			<div class="qw model-box">
			<div class="model-title">
			<div class="l"></div>
			<div class="title">权威检测</div>
			<div class="border"></div>
			<div class="status">
			<div>
			<van-icon style="margin-right: 10px;" name="http://182.106.212.58:8014/assets/images/sym/1265.png" />
			</div>
			可追溯
			</div>
			</div>
			<div class="model-content" id="str1Dom">
			<!-- str1 -->
			<!-- str2 -->
			</div>
			</div>

			<!-- 产地信息 -->
			<div class="cd model-box">
			<div class="model-title">
			<div class="l"></div>
			<div class="title">产地信息</div>
			<div class="border"></div>
			<div class="status">
			<div>
			<van-icon style="margin-right: 10px;" name="http://182.106.212.58:8014/assets/images/sym/1265.png" />
			</div>
			可追溯
			</div>
			</div>

			<div class="dk model-content">
			<div class="content-header">
			<van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1267.png" /> 种植地块
			</div>
			<div class="content-body">
			<img id="contentImg1" />
			</div>
			<div class="content-footer">
			<div class="l" id="farmAddress"></div>
			</div>
			</div>

			<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>
			<!-- str10 -->
			</div>
			</div>

			<!-- 监控监测数据展示 -->
			<div class="jk model-content">
			<div class="content-header">
			物联网监控保证产地养分充足，且不被污染
			</div>
			<div class="content-body">
			<div class="site-box">
			<!-- strdetection -->
			<div class="site-title">
			<div class="l">
			<select id="select" style="font-weight: bold;color: #333333;border: none;font-size: 28px;width:96%">
			<option>${item.name}</option>
			</select>
			</div>
			</div>
			<div class="site-date">
			<div class="site-date-text" id="sitedatetext">更新时间</div>
			</div>
			<div class="site-content" id="detectionlist">
			<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>
			<!-- <div class="site-content">
			<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> -->
			<!-- str11 -->
			<!-- </div> -->
			</div>
			</div>
			</div>
			</div>

			<!-- 种植环节 -->
			<div class="zz model-box">
			<div class="model-title">
			<div class="l"></div>
			<div class="title">种植环节</div>
			<div class="border"></div>
			<div class="status no"></div>
			</div>
			<div class="model-content">
			<div class="msg">
			<div class="l">
			<img width="126px" height="126px" src="http://182.106.212.58:8014/assets/images/sy/zz-log.png" />
			</div>
			<div class="r">
			<div>
			我是基地管理员：
			</div>
			<div class="r-b-msg">
			以下农事操作，是在我的监督下完成
			</div>

			<div class="point-to"></div>
			</div>
			</div>
			<!-- str3 -->
			<div id="recordBox"></div>
			<!-- str4 -->
			</div>
			</div>

			<!-- 生产企业 -->
			<div class="sc model-box">
			<div class="model-title">
			<div class="l"></div>
			<div class="title">生产企业</div>
			<div class="border"></div>
			<div class="status no">
			</div>
			</div>
			<div class="model-content">
			<div class="content-header" id="contentHeader"></div>
			<div class="content-body">
			<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
			<block class="swiper-image" id="swImg">
			<!-- str5 -->
			<!-- str6 -->
			</block>
			</swiper>

			</div>
			<div class="text-intro" id="textIntro"></div>
			<div class="content-footer">
			</div>
			</div>
			</div>
			</div>
			</body>
			<script>
			$(function () {
			var getData = function (name) {
			var reg = new RegExp("(^\|&)" + name + "=([^&]*)(&\|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return decodeURI(r[2]);
			return null;
			};
			var code = getData("code");
			axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfos?code=' + code).then(
			function (res) {
			// 初始化数据begin
			var data = res.data.data;
			var farm = data.farm;
			var land = data.landVO;
			var num = data.num;
			var paperList = data.paperVOList;
			var recordVOList = data.recordVOList;
			var recovery = data.recoveryVO;
			// 初始化数据end

			// 页面数据渲染begin
			$('#titleName').text(recovery.strainName)
			$('#logoImg').attr('src', recovery.url)
			$('#sub1').text(recovery.lx)
			$('#date1').text('采收时间：' + recovery.time.replaceAll("-", "."))
			$('#contentHeader').text(farm.farmName)
			$('#textIntro').text(farm.introduce)
			// $('#slideImg').attr(item)
			// 页面数据渲染end

			// 权威检测页面遍历begin
			var str1 = '';
			if (paperList.length > 0) {
			paperList.forEach(item => {
			var url = item.pictures.split(",")[0];
			str1 = str1 + `<div class="box">
			<div class="l">
			<img width="204px" height="204px" src="${url}" />
			</div>
			<div class="r">
			<div class="title">
			${item.name}
			</div>
			<div class="org line-box">
			<div class="sub">检测机构：</div>
			<div class="content">${item.organName}</div>
			</div>
			<div class="ser line-box">
			<div class="sub">证书编号：</div>
			<div class="content">${item.code}</div>
			</div>
			<div class="date line-box">
			<div class="sub">颁发日期：</div>
			<div class="content">${item.time.replaceAll("-", ".")}</div>
			</div>
			</div>
			</div>`
			});
			} else {
			str1 = str1 + `<div class="box"></div>`
			}
			$('#str1Dom').append(str1)
			$('#contentImg1').attr('src', land.url)
			$('#farmAddress').text(farm.farmAddress)
			// 权威检测页面遍历end

			// 种植环节遍历begin
			var str3 = '';
			recordVOList.forEach((item, index) => {
			str3 = str3 + `<div class="record-box">
			<div class="l">

			<div class="one line" style="${index == 0 ? 'background: transparent !important;' : ''}">
			</div>

			<div class="point">
			</div>

			<div class="two line" style="${index == recordVOList.length - 1 ? 'background: transparent !important;' : ''}">
			</div>

			</div>
			<div class="r">
			<div class="record-item">
			<div class="type">${item.typeName}</div>
			<div class="date-pel">
			<div class="date">${item.time}</div>
			<div class="pel">操作人：${item.realName}</div>
			</div>
			</div>
			</div>
			</div>`
			});
			console.log(str3);
			$('#recordBox').append(str3)
			// 种植环节遍历end

			// 监测数据更新begin
			// 监测数据更新end

			//生产企业begin
			var str5 = ''
			var urls = farm.picture.split(",");
			if (urls.length > 0) {
			urls.forEach(item => {
			str5 = str5 + `<swiper-item>
			<image src="${item}" class="slide-image" />
			</swiper-item>`
			})
			}
			$('#swImg').append(str5)
			//生产企业end
			})
			})

			</script>

			</html>

			@@ -345,7 +345,7 @@
			.model-box.cd .model-content.jksp .content-footer .equi-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			/* justify-content: center; */
			margin-left: 12px;
			width: 196px;
			height: 60px;
			@@ -354,6 +354,9 @@
			border: 1px solid #DCDCDC;
			font-size: 24px;
			color: #697580;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			}

			.model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
			@@ -631,49 +634,6 @@
			<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>

			<script>
			(function (win, doc) {
			'use strict';
			var options = {
			width: 750,
			dpr: win.devicePixelRatio
			};
			var html = doc.documentElement,
			width = html.getAttribute('data-width') \|\| options.width,
			dpr = html.getAttribute('data-dpr') \|\| options.dpr,
			viewPort = doc.querySelector('meta[name="viewport"]'),
			rotate = win.onorientationchange ? 'orientationchange' : 'resize';

			// 设置html fontSize
			function setSize() {
			var winWidth = win.innerWidth \|\| html.clientWidth;
			html.style.fontSize = 16 * winWidth / width + 'px';
			};

			// 设置 initial-scale
			function setScale() {
			setSize();
			var viewContent = viewPort.getAttribute('content');
			var reg = /initial-scale=(\d(.\d+)?)/i;
			var matchRes = viewContent.match(reg);
			var scale = 1 / parseInt(dpr);
			if (matchRes && matchRes[1] == scale) {
			return;
			}
			var newContent = viewContent.replace(reg, function (a, b) {
			return a.replace(/\d(.\d+)?/i, scale);
			});
			viewPort.setAttribute('content', newContent);
			};

			win.addEventListener(rotate, setSize);
			window.requestAnimationFrame = window.requestAnimationFrame \|\| window.webkitRequestAnimationFrame;
			requestAnimationFrame(setScale);
			}(window, document));

			</script>

			</head>


			@@ -708,20 +668,7 @@
			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">
			var str0 = `<div class="top-log">
			<img width="100%" height="520px" src="http://182.106.212.58:8014/assets/images/sym/2.png" />
			<div class="btn-grounp">
			<img bindtap="scrollTo" data-class=".qw" width="200px" height="100px" src="http://182.106.212.58:8014/assets/images/sy/1418.png" />
			@@ -767,11 +714,11 @@
			</div>

			<div class="model-content">`
			var str1 = '';
			if (paperList.length > 0) {
			paperList.forEach(item => {
			var url = item.pictures.split(",")[0];
			str1 = str1 + `<div class="box">
			var str1 = '';
			if (paperList.length > 0) {
			paperList.forEach(item => {
			var url = item.pictures.split(",")[0];
			str1 = str1 + `<div class="box">
			<div class="l">
			<img width="204px" height="204px" src="${url}" />
			</div>
			@@ -793,13 +740,13 @@
			</div>
			</div>
			</div>`
			});
			} else {
			str1 = str1 + `<div class="box"></div>`
			}
			});
			} else {
			str1 = str1 + `<div class="box"></div>`
			}


			var str2 = `
			var str2 = `
			</div>
			</div>

			@@ -821,7 +768,7 @@
			<van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1267.png" /> 种植地块
			</div>
			<div class="content-body">
			<image style="width: 100%;height: 100%;" src="${land.url}" />
			<image style="width: 100%;height:100%" src="${land.url}" />
			</div>
			<div class="content-footer">
			<div class="l">
			@@ -838,6 +785,24 @@
			<div class="content-header">
			<van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1272.png" /> 良心生产，不怕监督，24小时视频监控
			</div>`

			var dom = $('.page-main-container');
			dom.empty();
			dom.append(str0 + str1 + str2);

			//请求检测数据
			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;






			//监控
			@@ -1081,7 +1046,7 @@
			// </div>
			// </div>

			var dom = $('.page-main-container');
			// var dom = $('.page-main-container');
			dom.empty();
			dom.append(str0 + str1 + str2 + strvedio + str10 + strdetection + str11 + str3 + str4 + str5 + str6);

			@@ -1090,10 +1055,10 @@

			var slide = false,
			soundWidth = 0;

			var flvPlayer = null;
			//初始化视频配置
			if (flvjs.isSupported()) {
			var flvPlayer = flvjs.createPlayer({
			flvPlayer = flvjs.createPlayer({
			type: 'flv',
			url: window.videoList[0].wssFlv,
			hasAudio: false
			@@ -1108,11 +1073,11 @@
			videoElement.style.height = "385px";
			videoElement.style.objectFit = "fill";


			//切换视频
			$('.jksp .content-footer .equi-btn').click(function () {
			var ind = $(this).index()
			window.videoList.some((item, index) => {
			console.log('1112', item, index);
			if (ind == index) {
			//暂停播放数据流
			flvPlayer.pause();
			@@ -1123,7 +1088,7 @@
			//销毁播放实例
			flvPlayer.destroy();
			//重新创建流实例
			var flvPlayer = flvjs.createPlayer({
			flvPlayer = flvjs.createPlayer({
			type: 'flv',
			url: window.videoList[index].wssFlv,
			hasAudio: false