视屏监控配置

This commit is contained in:
2025-07-24 17:53:58 +08:00
parent 5834799a19
commit 25a2a158b0
4 changed files with 180 additions and 14 deletions
+74 -5
View File
@@ -226,11 +226,11 @@
</div>
</div>
<div class="video">
<h5>安全云监控</h5>
<div class="video-box">
<video src=""></video>
</div>
<p><span>实时视频:线路1</span><span>2020-10-10 12:40:26</span></p>
<div class="v-player" style="margin: 0;height:2rem;">
<live-player id="player01" live="true" aspect="7:4"></live-player>
</div><%--<span>2020-10-10 12:40:26</span>--%>
<p><span>实时视频:线路1</span> <span class="more" id="more" @click="moreVideo()">更多</span></p>
</div>
</div>
<!-- 项目进度计划 -->
@@ -563,11 +563,17 @@
<script src="../res/lib/echarts.min.js"></script>
<script src="../res/lib/china1.js"></script>
<script src="../res/lib/jquery.js"></script>
<script src="../res/assets/js/video-7.15.0.min.js"></script>
<script src="../res/liveplayer/liveplayer-element.min.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
videoHost: "",
videoUserName: "",
videoPassWord: "",
videoids: [], videoIndex: 0, authToken: '',
educationIdx: 0,
checkIdx: 0,
// 控制显示状态
@@ -732,6 +738,13 @@
that.createMap1(that.checkAccepts, that.checkAcceptOKs, that.checkAcceptOKRates); // 更新数据
that.createMap2(that.checkAccepts2, that.checkAcceptOKs2, that.checkAcceptOKRates2); // 更新数据
that.videoHost = response.d.data.videoHost;
that.videoUserName = response.d.data.videoUserName;
that.videoPassWord = response.d.data.videoPassWord;
that.initVideo(that.videoHost, that.videoUserName, that.videoPassWord); // 初始化视频监控
that.runShowVideo(that.videoHost); // 初始化视频监控
} else {
// 更新数据失败
alert("加载数据失败:" + response.d.msg);
@@ -1040,6 +1053,62 @@
]
};
this.map2.setOption(option);
},
/**
* 更多视频
*/
moreVideo() {
const that = this;
// 在点击事件中执行的代码
var videoURL = that.videoHost;
if (videoURL) {
window.open(videoURL + "#/screen?username=" + that.videoUserName + "&password=" + that.videoPassWord, '_blank');
}
else {
alert("您没有权限!");
}
},
/**
* 初始化视频
*/
initVideo(videoHost, VideoUserName, VideoPassWord) {
const that = this;
//console.log(1, videoHost)
//console.log(2, VideoUserName)
//console.log(3, VideoPassWord)
$.get(videoHost + 'api/v1/login?username=' + VideoUserName + '&password=' + VideoPassWord, function (data1) {
that.authToken = data1.AuthToken;
$.get(videoHost + 'api/v1/device/channeltree?token=' + that.authToken, function (data2) {
for (var i = 0; i < data2.length && i <= 0; i++) {
$.get(videoHost + 'api/v1/device/channeltree?serial=' + data2[i].serial + '&token=' + that.authToken, function (data3) {
for (var j = 0; j < data3.length; j++) {
that.videoids.push(data3[j].id);
}
}, 'json');
}
}, 'json');
}, 'json');
},
/**
* 更多视频
*/
runShowVideo(videoHost) {
const that = this;
if (that.videoids.length <= 0) {
setTimeout(function () {
that.runShowVideo(videoHost);
}, 5000);
} else if (that.videoIndex < that.videoids.length) {
$.get(videoHost + 'api/v1/stream/start?serial=' + that.videoids[that.videoIndex].split(':')[0] + '&code=' + that.videoids[that.videoIndex].split(':')[1] + '&token=' + that.authToken, function (data4) {
//console.log(4, data4.HLS)
that.videoIndex++;
var player = document.getElementById('player01');
player.setAttribute("video-url", data4.HLS);
setTimeout(function () {
that.runShowVideo(videoHost);
}, 500000);
}, 'json');
}
}
},
},