溯源码页面优化

guanqb

2022-09-03 e36ce8a4943cae5cd0cb46ea5373269e06eb9d56

 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