地图 和详情 视频和 top 热力图细节

liuyg

2021-04-28 53184b0ce284a6784356e1d1a2b57d86f6a9d5c1

 src/views/dataL/dataL.vue

@@ -18,8 +18,8 @@
                  'l-t-s-red': state == dataState[3],
                  'l-t-s-yuan': true,
                }"
              ></span
              >&nbsp
              ></span>
              &nbsp
              <span>{{ state }}</span>
            </div>
            <div class="t-t-time">
@@ -472,10 +472,13 @@
                <div class="l-m-3-main">
                  <!-- {{ videoUrl }} -->
                  <div>
                        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
                            <source id="source" :src="videoUrl" type="application/x-mpegURL"></source>
                        </video>
                    </div>
                    <video
                      style="height: 550px; width: 100%"
                      controls="controls"
                      id="real_video_conversationDataL"
                      src=""
                    ></video>
                  </div>
                </div>
              </div>
            </el-tab-pane>
@@ -586,6 +589,7 @@
  getVideo,
} from "../../api/dataL/axiosL";
import axios from "axios";
import Hls from "hls.js";
import echarts from "echarts";
import { Form } from "element-ui";
const cityOptions = ["未处理", "处理中", "已处理"];
@@ -998,41 +1002,6 @@
          setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
          this.stetDetails(data, setimgl);
        });
        var videoData = {
          deviceCode: that.a.serialNumber,
          chl: that.a.channelNumber,
        };
        // console.log(videoData);
        // getVideo(videoData).then((res) => {
        //   that.videoUrl = res

        //   console.log(res)

        // });
        var xhr2 = null, //视频请求
          url =
            "https://web.byisf.com:18000/GetPlayUrl?deviceCode=" +
            videoData.deviceCode +
            "&chl=" +
            videoData.chl;
        if (XMLHttpRequest) {
          //http请求
          xhr2 = new XMLHttpRequest();
        } else {
          xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr2.open("get", url, true);
        xhr2.send();
        xhr2.onreadystatechange = function () {
          if (xhr2.readyState === 4) {
            if (xhr2.status === 200) {
              // 判断isJson是否传进来了
              var data2 = JSON.parse(xhr2.responseText); // JSON转js
              that.videoUrl = data2.data.m3u8;
              // console.log(videoUrl);
            }
          }
        };
      });
    },
    stetDetails(d, imgdata) {
@@ -1231,6 +1200,68 @@
      //行点击事件
      // console.log(val.i);
    },
    //获取视频
    openRealVideoBox(serialNumber, channelNumber) {
      var that = this;
      var newAxios = axios.create({
        baseURL: "https://web.byisf.com:18000",
        withCredentials: false,
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
        },
      });
      newAxios
        .post(
          "/api_control",
          {},
          {
            params: {
              param: JSON.stringify({ PktType: "GetAccessToken" }),
            },
          }
        )
        .then((res) => {
          newAxios
            .get(
              `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
            )
            .then((result) => {
              that.videoSource = result.data.data.m3u8;
              if (Hls.isSupported()) {
                var dom = document.getElementById(
                  "real_video_conversationDataL"
                );
                that.hls = new Hls();
                var m3u8Url = decodeURIComponent(that.videoSource);
                that.hls.loadSource(m3u8Url);
                that.hls.attachMedia(dom);
                that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                  dom.play();
                });
                that.hls.on(Hls.Events.ERROR, function (event, data) {
                  console.log(data, 4566824159, "视频播放有问题！！！");
                  if (data.fatal) {
                    switch (data.type) {
                      case Hls.ErrorTypes.NETWORK_ERROR:
                        // try to recover network error
                        console.log(
                          "fatal network error encountered, try to recover"
                        );
                        that.hls.startLoad();
                        break;
                      case Hls.ErrorTypes.MEDIA_ERROR:
                        console.log(
                          "fatal media error encountered, try to recover"
                        );
                        that.hls.recoverMediaError();
                        break;
                    }
                  }
                });
              }
            });
        });
    },
  },
  created() {
    // let loadingInstance1  = Loading.service({ fullscreen: true });
@@ -1263,6 +1294,21 @@
      }
    };
  },
  watch: {
    activeName() {
      if (this.activeName == "third") {
        this.i++;
        this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber);
      }else{
        var dom = document.getElementById("real_video_conversationDataL");
        if (dom.getAttribute("src") != "") {
        dom.pause();
        dom.setAttribute("src", "");
        this.hls.destroy();
      }
      }
    },
  },
};
</script>
<style lang="scss" >