From 53184b0ce284a6784356e1d1a2b57d86f6a9d5c1 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 28 Apr 2021 17:39:02 +0800
Subject: [PATCH] 地图  和详情  视频和 top  热力图细节

---
 src/views/dataL/dataL.vue |  128 +++++++++++++++++++++++++++++-------------
 1 files changed, 87 insertions(+), 41 deletions(-)

diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index e5d9191..678dca0 100644
--- a/src/views/dataL/dataL.vue
+++ b/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" >

--
Gitblit v1.9.3