视屏监控配置
This commit is contained in:
parent
5834799a19
commit
25a2a158b0
|
|
@ -4,20 +4,21 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head runat="server">
|
<head runat="server">
|
||||||
<meta charset="UTF-8"/>
|
<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>
|
<title></title>
|
||||||
<script src="../res/lib/flex.js"></script>
|
<script src="../res/lib/flex.js"></script>
|
||||||
<link rel="stylesheet" href="../res/homecss/common.css"/>
|
<link rel="stylesheet" href="../res/homecss/common.css"/>
|
||||||
<link rel="stylesheet" href="../res/homecss/index.css"/>
|
<link rel="stylesheet" href="../res/homecss/index.css"/>
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body,html{
|
body, html {
|
||||||
height: 12.5rem;
|
height: 12.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[v-cloak] {
|
[v-cloak] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg1">
|
<body class="bg1">
|
||||||
|
|
@ -279,9 +280,9 @@
|
||||||
<div id="video">
|
<div id="video">
|
||||||
<div class="v-tit">安全云监控</div>
|
<div class="v-tit">安全云监控</div>
|
||||||
<div class="v-player">
|
<div class="v-player">
|
||||||
|
<live-player id="player01" live="true" aspect="16:12"></live-player>
|
||||||
</div>
|
</div><%--<span>2020-10-10 12:40:26</span>--%>
|
||||||
<p><span>实时视频：线路1</span> <span>2020-10-10 12:40:26</span></p>
|
<p><span>实时视频：线路1</span> <span class="more" id="more" @click="moreVideo()">更多</span></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -606,11 +607,17 @@
|
||||||
<script src="../res/lib/echarts.min.js"></script>
|
<script src="../res/lib/echarts.min.js"></script>
|
||||||
<script src="../res/lib/china1.js"></script>
|
<script src="../res/lib/china1.js"></script>
|
||||||
<script src="../res/lib/jquery.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>
|
<script>
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
videoHost: "",
|
||||||
|
videoUserName: "",
|
||||||
|
videoPassWord: "",
|
||||||
|
videoids: [], videoIndex: 0, authToken: '',
|
||||||
educationIdx: 0,
|
educationIdx: 0,
|
||||||
checkIdx: 0,
|
checkIdx: 0,
|
||||||
// 控制显示状态
|
// 控制显示状态
|
||||||
|
|
@ -748,7 +755,7 @@
|
||||||
// 当前时间显示
|
// 当前时间显示
|
||||||
nowTime: '09:00:12',
|
nowTime: '09:00:12',
|
||||||
// 中国地图数据点
|
// 中国地图数据点
|
||||||
chinaData: []
|
chinaData: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -759,6 +766,8 @@
|
||||||
this.createMap1();
|
this.createMap1();
|
||||||
this.createMap2();
|
this.createMap2();
|
||||||
this.startTimer(); //启动时间定时器
|
this.startTimer(); //启动时间定时器
|
||||||
|
//this.initVideo();
|
||||||
|
//this.runShowVideo();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 从后台加载HSSE数据
|
// 从后台加载HSSE数据
|
||||||
|
|
@ -770,7 +779,7 @@
|
||||||
contentType: "application/json; charset=utf-8",
|
contentType: "application/json; charset=utf-8",
|
||||||
dataType: "json",
|
dataType: "json",
|
||||||
success: function (response) {
|
success: function (response) {
|
||||||
console.log("请求结果：",response.d)
|
//console.log("请求结果：", response.d)
|
||||||
if (response.d.success) {
|
if (response.d.success) {
|
||||||
// 更新数据成功
|
// 更新数据成功
|
||||||
that.form = { ...response.d.data }; // 更新表单数据
|
that.form = { ...response.d.data }; // 更新表单数据
|
||||||
|
|
@ -787,6 +796,14 @@
|
||||||
that.createChinaMap(that.chinaData); // 重新创建地图
|
that.createChinaMap(that.chinaData); // 重新创建地图
|
||||||
that.createMap1(that.checkAccepts, that.checkAcceptOKs, that.checkAcceptOKRates); // 更新数据
|
that.createMap1(that.checkAccepts, that.checkAcceptOKs, that.checkAcceptOKRates); // 更新数据
|
||||||
that.createMap2(that.checkAccepts2, that.checkAcceptOKs2, that.checkAcceptOKRates2); // 更新数据
|
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 {
|
} else {
|
||||||
// 更新数据失败
|
// 更新数据失败
|
||||||
alert("加载数据失败：" + response.d.msg);
|
alert("加载数据失败：" + response.d.msg);
|
||||||
|
|
@ -1263,6 +1280,59 @@
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
this.map2.setOption(option);
|
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
|
#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
|
var returnData = new
|
||||||
{
|
{
|
||||||
success = true,
|
success = true,
|
||||||
data = new
|
data = new
|
||||||
{
|
{
|
||||||
|
videoHost = videoHost,
|
||||||
|
videoUserName = videoUserName,
|
||||||
|
videoPassWord = videoPassWord,
|
||||||
educationIdx = 0,
|
educationIdx = 0,
|
||||||
checkIdx = 0,
|
checkIdx = 0,
|
||||||
org = new
|
org = new
|
||||||
|
|
|
||||||
|
|
@ -226,11 +226,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="video">
|
<div class="video">
|
||||||
<h5>安全云监控</h5>
|
|
||||||
<div class="video-box">
|
<div class="v-player" style="margin: 0;height:2rem;">
|
||||||
<video src=""></video>
|
<live-player id="player01" live="true" aspect="7:4"></live-player>
|
||||||
</div>
|
</div><%--<span>2020-10-10 12:40:26</span>--%>
|
||||||
<p><span>实时视频：线路1</span><span>2020-10-10 12:40:26</span></p>
|
<p><span>实时视频：线路1</span> <span class="more" id="more" @click="moreVideo()">更多</span></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 项目进度计划 -->
|
<!-- 项目进度计划 -->
|
||||||
|
|
@ -563,11 +563,17 @@
|
||||||
<script src="../res/lib/echarts.min.js"></script>
|
<script src="../res/lib/echarts.min.js"></script>
|
||||||
<script src="../res/lib/china1.js"></script>
|
<script src="../res/lib/china1.js"></script>
|
||||||
<script src="../res/lib/jquery.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>
|
<script>
|
||||||
new Vue({
|
new Vue({
|
||||||
el: "#app",
|
el: "#app",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
videoHost: "",
|
||||||
|
videoUserName: "",
|
||||||
|
videoPassWord: "",
|
||||||
|
videoids: [], videoIndex: 0, authToken: '',
|
||||||
educationIdx: 0,
|
educationIdx: 0,
|
||||||
checkIdx: 0,
|
checkIdx: 0,
|
||||||
// 控制显示状态
|
// 控制显示状态
|
||||||
|
|
@ -732,6 +738,13 @@
|
||||||
|
|
||||||
that.createMap1(that.checkAccepts, that.checkAcceptOKs, that.checkAcceptOKRates); // 更新数据
|
that.createMap1(that.checkAccepts, that.checkAcceptOKs, that.checkAcceptOKRates); // 更新数据
|
||||||
that.createMap2(that.checkAccepts2, that.checkAcceptOKs2, that.checkAcceptOKRates2); // 更新数据
|
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 {
|
} else {
|
||||||
// 更新数据失败
|
// 更新数据失败
|
||||||
alert("加载数据失败：" + response.d.msg);
|
alert("加载数据失败：" + response.d.msg);
|
||||||
|
|
@ -1040,6 +1053,62 @@
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
this.map2.setOption(option);
|
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,
|
description = x.ScheduleName,
|
||||||
isClosed = DateTime.Now > x.ScheduleDate
|
isClosed = DateTime.Now > x.ScheduleDate
|
||||||
}).ToList();
|
}).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
|
var returnData = new
|
||||||
{
|
{
|
||||||
success = true,
|
success = true,
|
||||||
data = new
|
data = new
|
||||||
{
|
{
|
||||||
|
videoHost = videoHost,
|
||||||
|
videoUserName = videoUserName,
|
||||||
|
videoPassWord = videoPassWord,
|
||||||
educationIdx = 0,
|
educationIdx = 0,
|
||||||
checkIdx = 0,
|
checkIdx = 0,
|
||||||
org = new
|
org = new
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue