视屏监控配置
This commit is contained in:
parent
5834799a19
commit
25a2a158b0
|
|
@ -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;
|
||||
}
|
||||
</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');
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue