溯源码页面修改

guanqb

2022-09-06 cbf18809270976db8af332fb80bedd6509c60245

溯源码页面修改

 public/js/WebRtcPlayer.js

@@ -4,73 +4,72 @@
     * @param {Element} ele 
     */
    constructor(ele) {
        this.ele = ele;
        this.ele = ele
        // this.PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
        this.PeerConnection = window.RTCPeerConnection;
        this.PeerConnection = window.RTCPeerConnection

    }
    Open(url) {
        if(this.localpc){
            this.Close();
    Open (url) {
        if (this.localpc) {
            this.Close()
        }
        this.localpc = new this.PeerConnection(null);
        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.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.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);
            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';
                    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("播放成功");
                        console.log("播放成功")
                    }).catch(e => {
                        console.error("播放错误:" + e);
                    });
                });
                        console.error("播放错误:" + e)
                    })
                })
            })
            .catch(e => "添加ICE候选人过程错误: " + e);
            .catch(e => "添加ICE候选人过程错误: " + e)
    }
    Close() {
        if(this.localpc){
            this.localpc.close();
            this.localpc = null;
    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');
    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.responseText.length < 1) return
            if (xhr.status === 200) {
                success(xhr.responseText);
                success(xhr.responseText)
            }
        };
        xhr.send(body);
        }
        xhr.send(body)
    }
}

 public/newtrac.html

File was deleted

 public/traceablityInfo.html

@@ -5,6 +5,8 @@
<head>
  <meta charset="UTF-8">
  <meta name="divport" content="width=device-width, initial-scale=1.0">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <title>查看溯源</title>
  <style>
    .top-log {
      position: relative;
@@ -222,7 +224,6 @@

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

    .model-box.cd .model-content.jksp .content-body {
@@ -355,8 +356,13 @@
      font-size: 24px;
      color: #697580;
      white-space: nowrap;
      padding: 0 5px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .equiBtnOn {
      background-color: rgb(28, 235, 28) !important;
      color: #fff !important;
    }

    .model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
@@ -607,6 +613,15 @@
      position: relative;
      overflow: hidden;
    } */
    #video-body {
      width: 94%;
      padding: 0 3%;
      height: 400px;
    }

    #video-body video {
      object-fit: fill;
    }

    #video-footer {
      width: 100%;
@@ -633,19 +648,187 @@
  </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>
  <script src="js/WebRtcPlayer.js"></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="https://dev.jxpskj.com:8023/zhny-web/assets/images/sym/2.png" />
      <div class="btn-grounp">
        <img bindtap="scrollTo" data-class=".qw" width="200px" height="100px"
          src="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1418.png" />
        <img bindtap="scrollTo" data-class=".cd" width="200px" height="100px"
          src="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1416.png" />
        <img bindtap="scrollTo" data-class=".zz" width="200px" height="100px"
          src="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1415.png" />
        <img bindtap="scrollTo" data-class=".sc" width="200px" height="100px"
          src="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1414.png" />
      </div>
    </div>

    <!-- <scroll-div scroll-top="{{scrollTop}}" refresher-enabled="{{true}}" bindrefresherrefresh="refresh" refresher-triggered="{{triggered}}" style="height: {{clientHeight}}" scroll-y bindscrolltolower="upcroll"> -->
    <!-- 农产品信息 -->
    <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>

    <!-- </scroll-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="https://dev.jxpskj.com:8023/zhny-web/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="https://dev.jxpskj.com:8023/zhny-web/assets/images/sym/1265.png" />
          </div>
          可追溯
        </div>
      </div>

      <div class="dk model-content">
        <div class="content-header">
          <van-icon style="margin-right: 12px;" name="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1267.png" />
          种植地块
        </div>
        <div class="content-body">
          <img width="94%" height="100%" style="margin-left:3%" 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="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1272.png" />
          良心生产，不怕监督，24小时视频监控
        </div>
        <div class="content-body">
          <div id="video-body">
            <video autoplay muted controls id="videoElement"
              style="width:100%;height: 100%;">你的浏览器太老了，不支持HTML5视频。</video>
          </div>
        </div>
        <div class="content-footer" id="videoFooter"></div>
        <!-- str10 -->
      </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%">
                </select>
              </div>
            </div>
            <div class="site-date">
              <div class="site-date-text" id="sitedatetext">更新时间</div>
            </div>
            <div class="site-content" id="detectionlist">
              <!-- str11 -->
              <!-- </div> -->
            </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="https://dev.jxpskj.com:8023/zhny-web/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>
  <script>
</body>
<script>
  $(function () {
    var getData = function (name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
@@ -653,72 +836,34 @@
      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

    // var code = "22070000001";
        // 页面数据渲染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


    axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfos?code=' + code).then(function (
      res) {
      // axios.get('http://192.168.0.114:89/traceability/getTraceabilityDetailInfo?code=' + code).then(function(res) {

      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;
      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" />
                <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%" src="${recovery.url}" />
                <!-- <div class="btn">更换图片</div> -->
            </div>

            <div class="title">${recovery.strainName}</div>

            <div class="type">
                <div class="sub">${recovery.lx}</div>
                <!-- <div class="icon">
                <van-icon name="play" />
              </div> -->
            </div>

            <div class="date">
                采收时间：${recovery.time.replaceAll("-", ".")}
            </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">`
      var str1 = '';
      if (paperList.length > 0) {
        paperList.forEach(item => {
          var url = item.pictures.split(",")[0];
          str1 = str1 + `<div class="box">
        // 权威检测页面遍历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>
@@ -740,226 +885,16 @@
                            </div>
                        </div>
                    </div>`
        });
      } else {
        str1 = str1 + `<div class="box"></div>`
      }


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

        <div class="cd model-box">
            <div class="model-title">
                <div class="l"></div>f
                <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">
                    <image style="width: 100%;height:100%" src="${land.url}" />
                </div>
                <div class="content-footer">
                    <div class="l">
                        ${farm.farmAddress}
                    </div>
                    <!-- <div class="r">
                  <van-icon name="star" />
                  导航
                </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>`

      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;






        //监控
        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" autoplay muted>你的浏览器太老了，不支持HTML5视频。</video>
                  </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">`
          str1 = str1 + `<div class="box"></div>`
        }
        $('#str1Dom').append(str1)
        $('#contentImg1').attr('src', land.url)
        $('#farmAddress').text(farm.farmAddress)
        // 权威检测页面遍历end       

        var str10 =
          `</div>
              </div>
            <div class="jk model-content">
                <div class="content-header">
                    物联网监控保证产地养分充足，且不被污染
                </div>
                <div class="content-body">
                    <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">
                              <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" id="sitedatetext">
                              ${timeStr}前更新</div>
                        </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">${item.name}</div>
                                      <div class="unit">
                                          单位：${item.unit}
                                      </div>
                                  </div>
                                  <div class="r">
                                    ${item.value}
                                  </div>
                              </div>`
              }
            })
          }
        } else {
          strdetection = strdetection + `
                        <div class="site-content">`
        }

        var 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>
                  <van-icon style="margin-left: 10px;" color="#EC9144" name="arrow" />
                </div> -->
                </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>`

        // 种植环节遍历begin
        var str3 = '';
        recordVOList.forEach((item, index) => {
          str3 = str3 + `<div class="record-box">
@@ -986,31 +921,11 @@
                    </div>
                </div>`
        });
        $('#recordBox').append(str3)
        // 种植环节遍历end

        var 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>
                  <van-icon style="margin-left: 10px;" color="#EC9144" name="arrow" />
                </div> -->
                </div>
            </div>

            <div class="model-content">
                <div class="content-header">
                    ${farm.farmName}
                </div>
                <div class="content-body">
                    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
                        <block class="swiper-image">`
        var str5 = '';
        //生产企业begin
        var str5 = ''
        var urls = farm.picture.split(",");
        if (urls.length > 0) {
          urls.forEach(item => {
@@ -1019,102 +934,122 @@
                            </swiper-item>`
          })
        }
        var str6 = `</block></swiper>
        $('#swImg').append(str5)
        //生产企业end

                </div>
                <div class="text-intro">
                    ${farm.introduce}
                </div>
                <div class="content-footer">
                </div>
            </div>
        </div>`

        // <div class="btn-grounp">
        //     <div class="l">
        //         <div class="plan">
        //             ${num} %
        //         </div>
        //         <div class="text">
        //             溯源完整度
        //         </div>
        //     </div>
        //     <div class="r">
        //         <van-button bind:click="editTracability" round custom-style="margin-right: 40px; width: 200px; height: 72px; border: 2px solid #5ABF78; background: #fff; color: #5ABF78; font-size: 30px;">编辑溯源</van-button>

        //         <van-button bind:click="submit" round custom-style="width: 200px; height: 72px; border: none; background: #5ABF78; color: #fff; font-size: 30px;">分享</van-button>
        //     </div>
        // </div>

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

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

        var slide = false,
          soundWidth = 0;
        var flvPlayer = null;
        //初始化视频配置
        if (flvjs.isSupported()) {
          flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: window.videoList[0].wssFlv,
            hasAudio: false
          });


          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
        }

        videoElement.style.width = "100%";
        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();
              //取消数据流加载
              flvPlayer.unload();
              //将播放实例从节点中取出
              flvPlayer.detachMediaElement();
              //销毁播放实例
              flvPlayer.destroy();
              //重新创建流实例
              flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: window.videoList[index].wssFlv,
                hasAudio: false
              });

              flvPlayer.attachMediaElement(videoElement);
              flvPlayer.load();
            }
        // 监控/监测数据begin
        axios.get(
          'https://dev.jxpskj.com:8023/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 ele = document.getElementById("videoElement");
          var player = new WebRtcPlayer(ele);
          var videoUrl = vidList[0].webRtc
          player.Open(videoUrl)
          //监控列表
          var jkBtn = ''
          vidList.forEach((item, index) => {
            jkBtn = jkBtn + `<div class="equi-btn">${item.name}</div>`
          })
        })
          $('#videoFooter').append(jkBtn)
          $('.equi-btn')[0].classList.add('equiBtnOn')

        //检测点下拉切换事件
        $('#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">
          //切换视频
          $('.jksp .content-footer .equi-btn').click(function () {
            for (var i = 0; i < $('.equi-btn').length; i++) {
              $('.equi-btn')[i].classList.remove('equiBtnOn')
            }
            $(this)[0].classList.add('equiBtnOn')
            var btnText = $(this)[0].innerText
            vidList.forEach((item, index) => {
              if (item.name == btnText) {
                var newVideoUrl = item.webRtc
                player.Open(newVideoUrl)
              }
            })
          })
          //监测点
          var jcList = ''
          staList.forEach(item => {
            jcList = jcList + `<option>${item.name}</option>`
          })
          $('#select').append(jcList)
          //更新时间
          var timeStr = ''
          if (staList.length > 0) {
            var sta = staList[0];
            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 + "秒";
                }
              }
            }
            timeStr = timeStr + '前更新'
          }
          $('#sitedatetext').text(timeStr)
          //监测数据展示
          var jcStr = ''
          var weatherList = staList[0].weatherList;
          if (weatherList.length > 0) {
            weatherList.forEach(item => {
              if (item.name != '监测时间') {
                jcStr = jcStr + `<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').append(jcStr)
          //检测点下拉切换事件
          $('#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">
@@ -1125,59 +1060,62 @@
                                        ${item.value}
                                      </div>
                                  </div>`
                  }
                })
              }
              detectionlist.innerHTML = strdetection;
                    }
                  })
                }
                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 + "天";
                //更新时间替换
                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 (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 (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 + "秒";
                    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">
                //填充时间参数
                if (time != null) {
                  sitedatetext.innerHTML = `<div class="site-date-text" id="sitedatetext">
                                ${timeStr}前更新</div>`;
            }
                } else {
                  sitedatetext.innerHTML = '暂无数据'
                }

              }
            })
          })

        })
      });
    });
        // 监控/监测数据end
      })
  })

  </script>

  <script>

  </script>
</body>
</script>

</html>

 src/views/land/landAdd.vue

@@ -1,343 +1,343 @@
<template>
  <el-dialog
    :title="title"
    :modal-append-to-body="false"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="80%"
    :visible.sync="visible"
    top="10vh"
  >
    <avue-form ref="form" v-model="form" :option="option" @submit="submit">
      <!-- 地图插入 -->
      <template slot-scope="{ type, disabled }" slot="line">
        <!-- <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere> -->
      </template>
    </avue-form>
    <div class="map">
      <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>
    </div>
  </el-dialog>
    <el-dialog
        :title="title"
        :modal-append-to-body="false"
        :append-to-body="true"
        :close-on-click-modal="false"
        width="80%"
        :visible.sync="visible"
        top="10vh"
    >
        <avue-form ref="form" v-model="form" :option="option" @submit="submit">
            <!-- 地图插入 -->
            <template slot-scope="{ type, disabled }" slot="line">
                <!-- <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere> -->
            </template>
        </avue-form>
        <div class="map">
            <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>
        </div>
    </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import { getFarmList,getDetail } from "@/api/farm/farm";
import { getDeptTree } from "@/api/system/dept";
import { add } from "@/api/land/land";
import website from "@/config/website";
import domtoimage from "dom-to-image";
import h2 from "html2canvas";
import getMapDataInThere from "./getMapDataInThere.vue";
import { number } from "echarts";
import { mapGetters } from "vuex"
import { getFarmList, getDetail } from "@/api/farm/farm"
import { getDeptTree } from "@/api/system/dept"
import { add } from "@/api/land/land"
import website from "@/config/website"
import domtoimage from "dom-to-image"
// import h2 from "html2canvas";
import getMapDataInThere from "./getMapDataInThere.vue"
import { number } from "echarts"
// import canvas2Image from 'canvas2Image'

export default {
  components: {
    getMapDataInThere,
  },
  data() {
    return {
      title: "新增地块",
      form: {},
      option: {
        emptyBtn: false,
        submitText: "保存",
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "地块名称",
            prop: "landName",
            rules: [
              {
                required: true,
                message: "请输入地块名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属农场",
            prop: "farmId",
            type: "tree",
            value: "",
            dicData: [],
            props: {
              label: "farmName",
              value: "id",
    components: {
        getMapDataInThere,
    },
    data () {
        return {
            title: "新增地块",
            form: {},
            option: {
                emptyBtn: false,
                submitText: "保存",
                submitBtn: false,
                gutter: 30,
                column: [
                    {
                        label: "地块名称",
                        prop: "landName",
                        rules: [
                            {
                                required: true,
                                message: "请输入地块名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属农场",
                        prop: "farmId",
                        type: "tree",
                        value: "",
                        dicData: [],
                        props: {
                            label: "farmName",
                            value: "id",
                        },
                        disabled: true,
                        slot: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择所属农场",
                                trigger: "click",
                            },
                        ],
                    },
                    {
                        label: "地块类型",
                        type: "select",
                        prop: "landType",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        dataType: "number",
                        rules: [
                            {
                                required: true,
                                message: "请选择地块类型",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "面积",
                        prop: "landArea",
                        rules: [
                            {
                                required: true,
                                message: "请输入面积",
                                trigger: "click",
                            },
                        ],
                        span: 6,
                        type: "number",
                        controls: false,
                    },
                    {
                        label: "面积单位",
                        prop: "landUnit",
                        value: "0",
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        rules: [
                            {
                                required: true,
                                message: "请选择面积单位",
                                trigger: "click",
                            },
                        ],
                        dataType: "number",
                        span: 6,
                    },
                    // {
                    //     label: "地块展示",
                    //     labelWidth: "0",
                    //     prop: "line",
                    //     className: "mapClass",
                    //     span: 24,
                    //     formslot: true,
                    // }
                ],
            },
            disabled: true,
            slot: true,
            rules: [
              {
                required: true,
                message: "请选择所属农场",
                trigger: "click",
              },
            ],
          },
          {
            label: "地块类型",
            type: "select",
            prop: "landType",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dataType: "number",
            rules: [
              {
                required: true,
                message: "请选择地块类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "面积",
            prop: "landArea",
            rules: [
              {
                required: true,
                message: "请输入面积",
                trigger: "click",
              },
            ],
            span: 6,
            type: "number",
            controls: false,
          },
          {
            label: "面积单位",
            prop: "landUnit",
            value: "0",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            rules: [
              {
                required: true,
                message: "请选择面积单位",
                trigger: "click",
              },
            ],
            dataType: "number",
            span: 6,
          },
          // {
          //     label: "地块展示",
          //     labelWidth: "0",
          //     prop: "line",
          //     className: "mapClass",
          //     span: 24,
          //     formslot: true,
          // }
        ],
      },
      url: "",
      landUrl: "",
      polygon: [],
      area: "",
      farmInfo:{},
      visible: false,
    };
  },
  created() {
    
  },
  computed: {
    ...mapGetters([
      "userInfo",
      "permission",
      "polygons",
      "$farmId",
      "drawMapUrlBase",
    ]),
  },
  watch: {
    landUrl: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.$refs.form.submit();
            url: "",
            landUrl: "",
            polygon: [],
            area: "",
            farmInfo: {},
            visible: false,
        }
      },
    },
    "form.landName": {
      handler(newVal, oldVal) {
        this.landUrl = "";
      },
    },
    "form.landType": {
      handler(newVal, oldVal) {
        this.landUrl = "";
      },
    },
    "form.landArea": {
      handler(newVal, oldVal) {
        this.landUrl = "";
      },
    },
    "form.landUnit": {
      handler(newVal, oldVal) {
        this.landUrl = "";
      },
    },
  },
  mounted() {
    this.initData(this.userInfo.tenant_id);
    window.addEventListener("message", this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      if (Number.isFinite(event.data)) {
        this.form.landArea = (event.data * 0.0015).toFixed(2);
      }

      if (Object.prototype.toString.call(event.data) === "[object Object]") {
        var obj = event.data;
        this.polygon = obj.polygons;
        this.landUrl = obj.url;
      }
    },
    initData(tenantId) {
      getFarmList().then((res) => {
        const column = this.findObject(this.option.column, "farmId");
        column.dicData = res.data.data;
      });
    },
    //初始化
    init() {
      //清空面的数据
      this.$store.commit("clear_polygon");
      this.form.landArea = 0
      this.visible = true;
      this.form.farmId = this.$farmId;

        getDetail(this.form.farmId).then(res=>{
            this.farmInfo = res.data.data
            this.url = this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage&longitude="+this.farmInfo.longitude+"&latitude="+this.farmInfo.latitude;

        })


    created () {

    },
    // 表单提交
    submit(row, done) {
      row["deptId"] = this.userInfo.dept_id;
      // row.farmId = this.farm.id

      var that = this;
      var poly = [];
      if (this.polygon.length != 0) {
        this.polygon.forEach((e) => {
          poly.push({
            lng: e[0],
            lat: e[1],
          });
        });
        this.polygon = poly;
      }

      if (this.polygon.length == 0) {
        //没有面的数据
        // this.$refs.getMapData.isCheck = true
        // loading()
      } else {
        //如果有值，空间坐标转换
        let pol = this.polygon;
        let polLength = this.polygon.length - 1;
        let usePolygons = "";
        for (let k in pol) {
          usePolygons += pol[k].lng + "," + pol[k].lat;
          if (k != polLength) {
            usePolygons += ";";
          }
        }
        //设置坐标点
        row.userId = this.userInfo.user_id;
        row.landRange = usePolygons;
      }

      // if (this.polygons.length == 0) {
      //     //没有面的数据
      //     // this.$refs.getMapData.isCheck = true
      //     // loading()
      // } else {
      //     //如果有值，空间坐标转换
      //     let pol = this.polygons
      //     let polLength = this.polygons.length - 1
      //     let usePolygons = ""
      //     for (let k in pol) {
      //         usePolygons += pol[k].lng + "," + pol[k].lat
      //         if (k != polLength) {
      //             usePolygons += ";"
      //         }
      //     }
      //     //设置坐标点
      //     row.userId = this.userInfo.user_id
      //     row.landRange = usePolygons
      //     console.log(row.landRange)
      // }

      row["url"] = this.landUrl;
      // row['landArea'] = this.area

      if (row.landArea < 0) {
        this.$message.warning("地块面积不能为负数");
        done();
        return;
      }

      add(row).then(
        () => {
          that.$emit("refreshOnLoad");
          that.$refs.form.resetFields();
          that.form.landUnit = "0";
          that.visible = false;
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ...mapGetters([
            "userInfo",
            "permission",
            "polygons",
            "$farmId",
            "drawMapUrlBase",
        ]),
    },
    watch: {
        landUrl: {
            handler (newVal, oldVal) {
                if (newVal) {
                    this.$refs.form.submit()
                }
            },
        },
        (error) => {
          // loading()
          window.console.log(error);
        }
      );
        "form.landName": {
            handler (newVal, oldVal) {
                this.landUrl = ""
            },
        },
        "form.landType": {
            handler (newVal, oldVal) {
                this.landUrl = ""
            },
        },
        "form.landArea": {
            handler (newVal, oldVal) {
                this.landUrl = ""
            },
        },
        "form.landUnit": {
            handler (newVal, oldVal) {
                this.landUrl = ""
            },
        },
    },
    mounted () {
        this.initData(this.userInfo.tenant_id)
        window.addEventListener("message", this.handleMessage)
    },
    methods: {
        handleMessage (event) {
            if (Number.isFinite(event.data)) {
                this.form.landArea = (event.data * 0.0015).toFixed(2)
            }

    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
            if (Object.prototype.toString.call(event.data) === "[object Object]") {
                var obj = event.data
                this.polygon = obj.polygons
                this.landUrl = obj.url
            }
        },
        initData (tenantId) {
            getFarmList().then((res) => {
                const column = this.findObject(this.option.column, "farmId")
                column.dicData = res.data.data
            })
        },
        //初始化
        init () {
            //清空面的数据
            this.$store.commit("clear_polygon")
            this.form.landArea = 0
            this.visible = true
            this.form.farmId = this.$farmId

    showMap() {
      this.mapVisible = true;
            getDetail(this.form.farmId).then(res => {
                this.farmInfo = res.data.data
                this.url = this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage&longitude=" + this.farmInfo.longitude + "&latitude=" + this.farmInfo.latitude

            })



        },
        // 表单提交
        submit (row, done) {
            row["deptId"] = this.userInfo.dept_id
            // row.farmId = this.farm.id

            var that = this
            var poly = []
            if (this.polygon.length != 0) {
                this.polygon.forEach((e) => {
                    poly.push({
                        lng: e[0],
                        lat: e[1],
                    })
                })
                this.polygon = poly
            }

            if (this.polygon.length == 0) {
                //没有面的数据
                // this.$refs.getMapData.isCheck = true
                // loading()
            } else {
                //如果有值，空间坐标转换
                let pol = this.polygon
                let polLength = this.polygon.length - 1
                let usePolygons = ""
                for (let k in pol) {
                    usePolygons += pol[k].lng + "," + pol[k].lat
                    if (k != polLength) {
                        usePolygons += ";"
                    }
                }
                //设置坐标点
                row.userId = this.userInfo.user_id
                row.landRange = usePolygons
            }

            // if (this.polygons.length == 0) {
            //     //没有面的数据
            //     // this.$refs.getMapData.isCheck = true
            //     // loading()
            // } else {
            //     //如果有值，空间坐标转换
            //     let pol = this.polygons
            //     let polLength = this.polygons.length - 1
            //     let usePolygons = ""
            //     for (let k in pol) {
            //         usePolygons += pol[k].lng + "," + pol[k].lat
            //         if (k != polLength) {
            //             usePolygons += ";"
            //         }
            //     }
            //     //设置坐标点
            //     row.userId = this.userInfo.user_id
            //     row.landRange = usePolygons
            //     console.log(row.landRange)
            // }

            row["url"] = this.landUrl
            // row['landArea'] = this.area

            if (row.landArea < 0) {
                this.$message.warning("地块面积不能为负数")
                done()
                return
            }

            add(row).then(
                () => {
                    that.$emit("refreshOnLoad")
                    that.$refs.form.resetFields()
                    that.form.landUnit = "0"
                    that.visible = false
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    // loading()
                    window.console.log(error)
                }
            )
        },

        setMapData (val) {
            this.LineData = val[0]
            this.PointData = val[1]
        },

        showMap () {
            this.mapVisible = true
        },
    },
  },
};
</script>
<style lang="scss" scoped>
.mapClass div label {
  display: none;
    display: none;
}

#getMapData {
  width: 90%;
  position: relative;
  height: 400px;
  top: 10px;
  left: 90px;
    width: 90%;
    position: relative;
    height: 400px;
    top: 10px;
    left: 90px;
}

.map {
  height: 450px;
    height: 450px;
}
</style>

 vue.config.js

@@ -45,9 +45,9 @@
        proxy: {
            '/api': {
                //本地服务接口地址
                target: 'http://192.168.0.207:89',
                // target: 'http://192.168.0.207:89',
                //远程演示服务地址,可用于直接启动项目
                // target: 'http://182.106.212.58:8013/api',
                target: 'http://182.106.212.58:8020/api',
                ws: true,
                pathRewrite: {
                    '^/api': '/'