From 14e02654e0545ee69456d64aef2f35c7c219d708 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Fri, 07 May 2021 11:26:49 +0800
Subject: [PATCH] 地图模式设备状态修改
---
src/views/dataL/dataL.vue | 163 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 114 insertions(+), 49 deletions(-)
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index e5d9191..00e6aea 100644
--- a/src/views/dataL/dataL.vue
+++ b/src/views/dataL/dataL.vue
@@ -18,9 +18,9 @@
'l-t-s-red': state == dataState[3],
'l-t-s-yuan': true,
}"
- ></span
- > 
- <span>{{ state }}</span>
+ ></span>
+
+ <span>{{ " " + state }}</span>
</div>
<div class="t-t-time">
<p>{{ ReportTime }}</p>
@@ -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 = ["未处理", "处理中", "已处理"];
@@ -599,6 +603,8 @@
//折线图
myChart: "",
numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],
+
+ jingqingPdianji: null,
name: "",
state: "",
@@ -623,7 +629,7 @@
isRecord: true,
screens: false,
//复选框
- dataState: ["掉线", "在线", "故障", "预警"],
+ dataState: ["掉线", "正常", "故障", "预警"],
// [grey,green,red][
// onlineStatus = 0,
// onlineStatus = 1,
@@ -984,7 +990,6 @@
var imgdatas = [];
if (res.data.data.length != 0) {
imgdatas = res.data.data[0].paddress.split(",");
- } else {
}
// console.log(imgdatas);
// imgdatas = [ //最多5张照片
@@ -998,41 +1003,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) {
@@ -1062,7 +1032,7 @@
} else {
if (j != 1) {
if (o == 1) {
- states = "在线";
+ states = "正常";
} else {
states = "掉线";
}
@@ -1118,6 +1088,7 @@
var ds = res.data.data.records;
// console.log(ds)
this.setdataG(ds);
+ this.jingqingPdianji = ds;
});
},
setdataG(d) {
@@ -1157,6 +1128,7 @@
oneContacts: d[key].oneContacts,
alarmPeople: d[key].alarmPeople,
onePhone: d[key].onePhone,
+ jjTime: d[key].jjTime,
childs: [],
});
}
@@ -1229,16 +1201,91 @@
},
handleCurrentChange(val) {
//行点击事件
- // console.log(val.i);
+ var b = this.jingqingPdianji;
+ for (var key in b) {
+ if (b[key].jjTime == val.jjTime) {
+ // console.log(b[key]);
+ // this.$store.commit("SET_DATAL", this.a);
+ this.$router.push({ path: "/policeTracking/track", query: b[key] });
+ }
+ }
+ // console.log(this.$store.state)
+ },
+ //获取视频
+ 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:
+ 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 });
// this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
- this.a = this.$route.query;
- // console.log(this.a);
+ // this.a = this.$route.query.deviceNumber == undefined? this.$store.state.dataL.dataLa : this.$route.query;
+ if(this.$route.query.deviceNumber == undefined){
+ this.a = this.$store.state.dataL.dataLa;
+ }else{
+ this.a = this.$route.query;
+ this.$store.commit("SET_DATAL", this.a);//每次都缓存在vuex中，如果没有从正确路径进来，则使用缓存
+ }
+ console.log(this.a);
this.baseUrl = `/map/index.html?ISinit=1&openid=DetailMap&jd=${this.a.jd}&wd=${this.a.wd}`;
- this.myDeviceNumber = this.$route.query.deviceNumber;
+ this.myDeviceNumber = this.a.deviceNumber;
// console.log(this.a);
// console.log(this.myDeviceNumber);
this.getdata();
@@ -1262,6 +1309,21 @@
console.log(`没有找到到window.frames[0].init`);
}
};
+ },
+ 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>
@@ -1674,4 +1736,7 @@
margin-bottom: 0;
width: 50%;
}
+video::-webkit-media-controls-timeline {
+ display: none;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3