视屏监控配置

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

View File

@ -4,20 +4,21 @@
<html lang="en">
<head runat="server">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="viewport" http-equiv="Access-Control-Allow-Origin" content="width=device-width, initial-scale=1.0"/>
<title></title>
<script src="../res/lib/flex.js"></script>
<link rel="stylesheet" href="../res/homecss/common.css"/>
<link rel="stylesheet" href="../res/homecss/index.css"/>
<style type="text/css">
body,html{
body, html {
height: 12.5rem;
}
[v-cloak] {
display: none;
display: none;
}
</style>
</style>
</head>
<body class="bg1">
@ -279,9 +280,9 @@
<div id="video">
<div class="v-tit">安全云监控</div>
<div class="v-player">
</div>
<p><span>实时视频线路1</span> <span>2020-10-10 12:40:26</span></p>
<live-player id="player01" live="true" aspect="16:12"></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>
</div>
@ -606,11 +607,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,
// 控制显示状态
@ -748,7 +755,7 @@
// 当前时间显示
nowTime: '09:00:12',
// 中国地图数据点
chinaData: []
chinaData: [],
}
},
mounted() {
@ -759,6 +766,8 @@
this.createMap1();
this.createMap2();
this.startTimer(); //启动时间定时器
//this.initVideo();
//this.runShowVideo();
},
methods: {
// 从后台加载HSSE数据
@ -770,7 +779,7 @@
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
console.log("请求结果:",response.d)
//console.log("请求结果:", response.d)
if (response.d.success) {
// 更新数据成功
that.form = { ...response.d.data }; // 更新表单数据
@ -787,6 +796,14 @@
that.createChinaMap(that.chinaData); // 重新创建地图
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);
@ -1263,6 +1280,59 @@
]
};
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;
$.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)
//videoIndex++;
var player = document.getElementById('player01');
player.setAttribute("video-url", data4.HLS);
setTimeout(function () {
that.runShowVideo(videoHost);
}, 5000);
}, 'json');
}
}
}
})

View File

@ -194,12 +194,24 @@ namespace FineUIPro.Web.common
#endregion
#region
string videoHost = (from x in db.Sys_Set where x.SetName == "视频监控地址" select x.SetValue).ToList().FirstOrDefault();
string videoUserName = (from x in db.Sys_Set where x.SetName == "视频监控用户名" select x.SetValue).ToList().FirstOrDefault();
string videoPassWord = (from x in db.Sys_Set where x.SetName == "视频监控密码" select x.SetValue).ToList().FirstOrDefault();
videoPassWord = Funs.EncryptionPassword(videoPassWord);
#endregion
// 构造返回数据
var returnData = new
{
success = true,
data = new
{
videoHost = videoHost,
videoUserName = videoUserName,
videoPassWord = videoPassWord,
educationIdx = 0,
checkIdx = 0,
org = new

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');
}
}
},
},

View File

@ -228,12 +228,27 @@ namespace FineUIPro.Web.common
description = x.ScheduleName,
isClosed = DateTime.Now > x.ScheduleDate
}).ToList();
#region
string videoHost = (from x in db.Sys_Set where x.SetName == "视频监控地址" select x.SetValue).ToList().FirstOrDefault();
string videoUserName = (from x in db.Sys_Set where x.SetName == "视频监控用户名" select x.SetValue).ToList().FirstOrDefault();
string videoPassWord = (from x in db.Sys_Set where x.SetName == "视频监控密码" select x.SetValue).ToList().FirstOrDefault();
videoPassWord = Funs.EncryptionPassword(videoPassWord);
#endregion
// 构造返回数据
var returnData = new
{
success = true,
data = new
{
videoHost = videoHost,
videoUserName = videoUserName,
videoPassWord = videoPassWord,
educationIdx = 0,
checkIdx = 0,
org = new