Skip to content

Z
zksyService
Commit f9c0b87c authored by wangjinjing's avatar wangjinjing
Browse files
Options

事件及工程添加告警提醒

parent d270ae60
Show whitespace changes
Inline Side-by-side
Showing with 1226 additions and 70 deletions
src/main/resources/static/css/gcjl.css
View file @ f9c0b87c
...@@ -503,3 +503,168 @@ html, body { ...@@ -503,3 +503,168 @@ html, body {
text-indent: 0; text-indent: 0;
text-align: center; text-align: center;
} }
/**模态框**/
.top-video {
width: 100%;
height: 280px;
}
.pub-div {
float: left;
width: 100%;
margin-top: 10px;
}
.pub-div .div-img {
width: 112px;
float: left;
margin-right: 10px;
position: relative;
}
.pub-div .div-img:last-child {
margin-right: 0px;
}
.pub-div img {
width: 100%;
cursor: pointer;
}
.div-img div {
width: 100%;
height: 100%;
position: absolute;
pointer-events: none;
top: 0px;
background: #36a2ff70;
}
.div-img div img {
margin-top: 27px;
margin-left: 42px;
width: 30px;
}
.gjlx span {
font-weight: 900;
color: red
}
.pub-div-span {
margin-left: 10px;
margin-top: 10px;
}
.class_1s {
color: white !important;
background-color: #368ff3;
pointer-events: none;
}
.class_2s {
color: black;
}
/**模态框**/
#myModal_sjcx .modal-body {
height: 500px;
}
#myModal_sjcx .modal-body > div {
float: left;
width: 100%;
height: 244px;
padding: 10px;
margin-bottom: 10px;
background-color: #b9cede;
position: relative;
overflow: hidden;
}
#myModal_sjcx .modal-body > div .carousel{
height: 100%;
width: 100%;
}
#fd_img {
width: 120px;
cursor: zoom-in;
}
#myModal_sjcx .modal-body .carousel .carousel-inner .item img{
width: 300px;
margin-left: 40px;
float: left;
cursor: pointer;
height: 210px;
border: 2px solid #ffffff;
}
.carousel-control{
width: 20px;
}
.carousel-control.left{
background-image: linear-gradient(to right, rgba(160, 160, 160, 0.5) 0%, rgba(0, 0, 0, .0001) 100%);
}
.carousel-control.right{
background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgb(160, 160, 160, 0.5) 100%);
}
.carousel-indicators{
bottom: -20px;
}
.div_modal{
width: 100%;
min-height: 44px;
float:left;
}
.div_modal_span{
width: 80px;
float:left;
color: #47a0d4;
font-size: 15px;
}
.div_modal_span1{
width: 180px;
float:left;
color: #dedede;
font-size: 15px;
font-weight: 900;
}
.div_modal_span1 span{
color: #52a4d4;
word-break:break-word;
}
.show-icon {
color: #fff;
font-size: 14px;
line-height: 52px;
height: 40px;
width: 78px;
background: #ff4747;
position: absolute;
left: 0;
top: 0;
z-Index: 2;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate(-29.29%,-100%) rotate(-45deg);
-moz-transform: translate(-29.29%,-100%) rotate(-45deg);
transform: translate(-29.29%,-100%) rotate(-45deg);
text-indent: 0;
text-align: center;
}
video::-webkit-media-controls-enclosure {
display: none;
}
video::-internal-media-controls-loading-panel {
display: none !important;
}
video > div > div {
display: none !important;
}
video::-webkit-media-controls div[pseudo="-internal-media-controls-loading-panel"]{
display: none !important;}
\ No newline at end of file
src/main/resources/static/css/jkgl.css
View file @ f9c0b87c
...@@ -375,6 +375,158 @@ html, body { ...@@ -375,6 +375,158 @@ html, body {
z-index: 100 !important; z-index: 100 !important;
} }
/**模态框**/
.modal .modal-body > div {
height: 540px;
}
.top-video {
width: 100%;
height: 280px;
}
.pub-div {
float: left;
width: 100%;
margin-top: 10px;
}
.pub-div .div-img {
width: 112px;
float: left;
margin-right: 10px;
position: relative;
}
.pub-div .div-img:last-child {
margin-right: 0px;
}
.pub-div img {
width: 115px;
height: 94px;
cursor: pointer;
float: left;
margin-left: 10px;
}
.pub-div img:first-child{
margin-left: 0;
}
.div-img div {
width: 100%;
height: 100%;
position: absolute;
pointer-events: none;
top: 0px;
background: #36a2ff70;
}
.div-img div img {
margin-top: 27px;
margin-left: 42px;
width: 30px;
}
.gjlx span {
font-weight: 900;
color: red;
font-size: 20px;
}
.pub-div-span {
margin-left: 10px;
margin-top: 10px;
}
.treeview ul{
width: 500px;
}
.zx {
color: #65ce00 !important;
}
.class_1{
color: white !important;
background-color: #368ff3;
pointer-events: none;
}
.class_2{
color: black;
}
.more .nav .open > a, .nav .open > a:hover, .nav .open > a:focus{
background-color: #fff;
}
.layui-laydate-content td.laydate-selected{
background-color: #c4e0ff !important;
}
.div-right-top .bootstrap-select{
float: left;
width: 146px !important;
margin-top: 7px;
}
.div-right-buttom .bootstrap-select{
width: 55px !important;
float: left;
}
.state_div{
width: calc(100% - 10px) !important;
height: 60px !important;
line-height: 60px;
position: absolute;
bottom: 0px;
background: white;
z-index: 10;
}
.state_div span{
margin-left: 10px;
}
.btn1{
margin-left: 10px;
background: white;
border: 1px solid #929292;
}
.btn2{
float: right;
margin-top: 17px;
margin-right: 10px;
}
.btn3{
float: right;
margin-top: 17px;
margin-right: 10px;
background: #ffffff;
border: 1px solid #ff0000;
color: red;
}
.btn4{
float: right;
margin-top: 17px;
margin-right: 10px;
background: #368ff3;
border: 1px solid #929292;
color: white;
}
.show-icon {
color: #fff;
font-size: 14px;
line-height: 60px;
height: 50px;
width: 105px;
background: #ff4747;
position: absolute;
left: 0px;
top: 0px;
z-Index: 2;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate(-29.29%,-100%) rotate(-45deg);
-moz-transform: translate(-29.29%,-100%) rotate(-45deg);
transform: translate(-29.29%,-100%) rotate(-45deg);
text-indent: 0;
text-align: center;
}
/**模态框**/ /**模态框**/
.top-video { .top-video {
width: 100%; width: 100%;
......
src/main/resources/static/css/sjcx.css
View file @ f9c0b87c
...@@ -503,3 +503,169 @@ html, body { ...@@ -503,3 +503,169 @@ html, body {
text-indent: 0; text-indent: 0;
text-align: center; text-align: center;
} }
/**模态框**/
.top-video {
width: 100%;
height: 280px;
}
.pub-div {
float: left;
width: 100%;
margin-top: 10px;
}
.pub-div .div-img {
width: 112px;
float: left;
margin-right: 10px;
position: relative;
}
.pub-div .div-img:last-child {
margin-right: 0px;
}
.pub-div img {
width: 100%;
cursor: pointer;
}
.div-img div {
width: 100%;
height: 100%;
position: absolute;
pointer-events: none;
top: 0px;
background: #36a2ff70;
}
.div-img div img {
margin-top: 27px;
margin-left: 42px;
width: 30px;
}
.gjlx span {
font-weight: 900;
color: red
}
.pub-div-span {
margin-left: 10px;
margin-top: 10px;
}
.class_1s {
color: white !important;
background-color: #368ff3;
pointer-events: none;
}
.class_2s {
color: black;
}
/**模态框**/
#myModal_sjcx .modal-body {
height: 500px;
}
#myModal_sjcx .modal-body > div {
float: left;
width: 100%;
height: 244px;
padding: 10px;
margin-bottom: 10px;
background-color: #b9cede;
position: relative;
overflow: hidden;
}
#myModal_sjcx .modal-body > div .carousel{
height: 100%;
width: 100%;
}
#fd_img {
width: 120px;
cursor: zoom-in;
}
#myModal_sjcx .modal-body .carousel .carousel-inner .item img{
width: 300px;
margin-left: 40px;
float: left;
cursor: pointer;
height: 210px;
border: 2px solid #ffffff;
}
.carousel-control{
width: 20px;
}
.carousel-control.left{
background-image: linear-gradient(to right, rgba(160, 160, 160, 0.5) 0%, rgba(0, 0, 0, .0001) 100%);
}
.carousel-control.right{
background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgb(160, 160, 160, 0.5) 100%);
}
.carousel-indicators{
bottom: -20px;
}
.div_modal{
width: 100%;
min-height: 44px;
float:left;
}
.div_modal_span{
width: 80px;
float:left;
color: #47a0d4;
font-size: 15px;
}
.div_modal_span1{
width: 180px;
float:left;
color: #dedede;
font-size: 15px;
font-weight: 900;
}
.div_modal_span1 span{
color: #52a4d4;
word-break:break-word;
}
.show-icon {
color: #fff;
font-size: 14px;
line-height: 52px;
height: 40px;
width: 78px;
background: #ff4747;
position: absolute;
left: 0;
top: 0;
z-Index: 2;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate(-29.29%,-100%) rotate(-45deg);
-moz-transform: translate(-29.29%,-100%) rotate(-45deg);
transform: translate(-29.29%,-100%) rotate(-45deg);
text-indent: 0;
text-align: center;
}
video::-webkit-media-controls-enclosure {
display: none;
}
video::-internal-media-controls-loading-panel {
display: none !important;
}
video > div > div {
display: none !important;
}
video::-webkit-media-controls div[pseudo="-internal-media-controls-loading-panel"]{
display: none !important;
}
\ No newline at end of file
src/main/resources/static/js/sjcx/gcjl.js
View file @ f9c0b87c
let state_sj = true;
let nodeCheckedSilent = false; let nodeCheckedSilent = false;
let nodeUncheckedSilent = false; let nodeUncheckedSilent = false;
let vue_sjcx = new Vue({ let vue_sjcx = new Vue({
...@@ -19,7 +20,9 @@ let vue_sjcx = new Vue({ ...@@ -19,7 +20,9 @@ let vue_sjcx = new Vue({
arr_cllx: [], arr_cllx: [],
jk_s:[], jk_s:[],
check_s:false, check_s:false,
}, cllx: [],
jk_arr:[] ,
data_sjlxs: []},
methods: { methods: {
fastSearch: function () { fastSearch: function () {
this.xzml(); this.xzml();
...@@ -49,7 +52,9 @@ let vue_sjcx = new Vue({ ...@@ -49,7 +52,9 @@ let vue_sjcx = new Vue({
}, },
success: function (result) { success: function (result) {
let defaultData = []; let defaultData = [];
vue_sjcx.jk_arr = [];
if (result.code == 0) { if (result.code == 0) {
vue_sjcx.jk_arr=result.data;
defaultData = toTree(result.data, parIds + ''); defaultData = toTree(result.data, parIds + '');
$('#tree-xzxq1').treeview({ $('#tree-xzxq1').treeview({
expandIcon: 'glyphicon glyphicon-triangle-right selected-span', expandIcon: 'glyphicon glyphicon-triangle-right selected-span',
...@@ -264,6 +269,9 @@ let vue_sjcx = new Vue({ ...@@ -264,6 +269,9 @@ let vue_sjcx = new Vue({
}, },
zdsx:function () { zdsx:function () {
vue_sjcx.check_s=document.getElementById('push').checked; vue_sjcx.check_s=document.getElementById('push').checked;
},
zdtx:function () {
state_sj=document.getElementById('status').checked;
} }
}, },
mounted(){ mounted(){
...@@ -308,9 +316,82 @@ let vue_sjcx = new Vue({ ...@@ -308,9 +316,82 @@ let vue_sjcx = new Vue({
} }
} }
}); });
$.ajax({
url: "/TrafficStatistics/listcode",
dataType: "json",
type: "GET",
data: {
codeid: 1,
alarmlevel: '',
},
success: function (result) {
vue_sjcx.data_sjlxs = [];
if (result.code == 0) {
if (result.data.length > 0) {
vue_sjcx.data_sjlxs.push({name: '全部', id: "", type: "",});
let arrs = [];
result.data.forEach((item, index)=> {
if (item.id == 'ROADWORKS' || item.id == 'ROADWORKS_OUT_OF_LINE') {
arrs.push(item);
}
});
arrs.forEach((item, index)=> {
if (index < 4) {
vue_sjcx.data_sjlxs.push(item);
} else {
vue_sjcx.data_sjlxs1.push(item);
}
});
}
}
}
});
this.xzml(); this.xzml();
} }
}); });
//老的模态框
let vue_sjsstx_li = new Vue({
el: '#myModal_li',
data: {
data_wfsp: [],
data_sj: {
lx: '',
bjsj: '',
dwmc: ''
},
class_s: 'class_1s',
class_s1: 'class_2s',
shows: true,
src_img: '',
arrs: {
timeSpeed: 0,
timeIntervalSign: null,
timeIndex: 0,
videoMessage: '',
},
},
methods: {
sp_qh: function (e) {
if (e == 1) {
this.class_s = 'class_1s';
this.class_s1 = 'class_2s';
this.shows = true;
} else {
this.class_s = 'class_2s';
this.class_s1 = 'class_1s';
this.shows = false;
}
this.src_img = this.data_wfsp[0].img_src;
},
click_img_bf: function (src) {
this.src_img = src;
},
},
mounted(){
}
});
let vue_sjsstx = new Vue({ let vue_sjsstx = new Vue({
el: '#myModal', el: '#myModal',
data: { data: {
...@@ -349,6 +430,122 @@ let vue_sjsstx = new Vue({ ...@@ -349,6 +430,122 @@ let vue_sjsstx = new Vue({
} }
}); });
let vue_sjsstxnow = new Vue({
el: '#myModal_sjcx',
data: {
yjsj_data: [],
ejsj_data: [],
sjsj_data: [],
index: 0,
},
methods: {
djxx_modal: function (item) {
vue_sjsstx_li.data_wfsp = [];
vue_sjsstx_li.data_wfsp = item.src;
vue_sjsstx_li.data_sj = {
lx: item.sjlx,
bjsj: item.bjsj,
dwmc: item.dwmc,
};
vue_sjsstx_li.arrs = {
timeSpeed: 0,
timeIntervalSign: null,
timeIndex: 0,
videoMessage: '',
};
// monitor_sx(item.videoid, 'my_video_1', vue_sjsstx_li.arrs, 2);
$("#myModal_li").modal('show');
},
cli_input: function (item, e, indexs, a) {
this.index++;
vue_jkgl.is_bd = true;
let iscz = false;
vue_jkgl.data_sd.forEach((items, index)=> {
if (items.video_id == item.videoid) {
iscz = true;
}
});
if (e.currentTarget.checked) {
if (iscz) {
e.currentTarget.checked = false;
info_new("此监控已在右侧展现，同一监控不可再次添加");
window.setTimeout("$('#info-warning-new').modal('hide')", 2000);
} else {
if (a == 1) {
vue_sjsstxnow.yjsj_data[indexs].checked = true;
} else if (a == 2) {
vue_sjsstxnow.ejsj_data[indexs].checked = true;
} else {
vue_sjsstxnow.sjsj_data[indexs].checked = true;
}
let ids = 'bd_' + (this.index);
vue_jkgl.data_sd.push({
name: item.dwmc,
id: ids,
video_id: item.videoid,
timeSpeed: 0,
timeIntervalSign: null,
timeIndex: 0,
videoMessage: '',
});
// monitor_sx(item.videoid, ids, vue_jkgl.data_sd[vue_jkgl.data_sd.length-1], 3);
}
} else {
if (a == 1) {
vue_sjsstxnow.yjsj_data[indexs].checked = false;
} else if (a == 2) {
vue_sjsstxnow.ejsj_data[indexs].checked = false;
} else {
vue_sjsstxnow.sjsj_data[indexs].checked = false;
}
document.getElementById(vue_jkgl.data_sd[indexs].id).parentNode.parentNode.remove();
vue_jkgl.data_sd.forEach((items, index)=> {
if (items.video_id == item.videoid) {
vue_jkgl.data_sd.splice(index, 1);
}
});
if (vue_jkgl.data_sd.length == 0) {
vue_jkgl.is_bd = false;
}
}
},
state_cli: function (item, e, index, type) {
let json_s = [];
json_s.push({
recordid: item.recordid + '',
channelid: item.channelid,
fdid: item.fdid,
recordtime: item.recordtime,
recordtype: item.recordtype.toLowerCase(),
processstatus: e
});
$.ajax({
url: "/TrafficStatistics/updateTraffalarmrecordById",
dateType: 'json',
type: "POST",
contentType: 'application/json',
data: JSON.stringify(json_s),
success: function (result) {
if (result.code == 0) {
info_new("处理成功");
window.setTimeout("$('#info-warning-new').modal('hide')", 2000);
if (type == 1) {
vue_sjsstxnow.yjsj_data[index].ss_type = e;
} else if (type == 2) {
vue_sjsstxnow.ejsj_data[index].ss_type = e;
} else {
vue_sjsstxnow.sjsj_data[index].ss_type = e;
}
}
}
});
}
},
mounted(){
}
});
function toTree(list, parId) { function toTree(list, parId) {
let len = list.length; let len = list.length;
...@@ -481,9 +678,13 @@ wss.onmessage = function (evt) { ...@@ -481,9 +678,13 @@ wss.onmessage = function (evt) {
// console.log(data); // console.log(data);
if (data.type == "alarm") { if (data.type == "alarm") {
if (data.data.type == 'TRAFFIC_INCIDENT_ALARM') { if (data.data.type == 'TRAFFIC_INCIDENT_ALARM') {
if(!state_sj){
if(!vue_sjcx.check_s){ if(!vue_sjcx.check_s){
return; return;
} }
vue_sjcx.query(1, true);
return;
}
if (data.data.incident_type != 'ROADWORKS' && data.data.incident_type != 'ROADWORKS_OUT_OF_LINE') { if (data.data.incident_type != 'ROADWORKS' && data.data.incident_type != 'ROADWORKS_OUT_OF_LINE') {
//排除工程检测 //排除工程检测
return; return;
...@@ -492,25 +693,100 @@ wss.onmessage = function (evt) { ...@@ -492,25 +693,100 @@ wss.onmessage = function (evt) {
let if_cz = false; let if_cz = false;
//jk_video_id为监控id //jk_video_id为监控id
let a_id =""; let a_id ="";
if(data.data.video_id.indexOf("_")) // if(data.data.video_id.indexOf("_"))
{ // {
a_id = data.data.video_id.slice(0, data.data.video_id.length - 1) + (parseInt(data.data.video_id.slice(data.data.video_id.length - 1, data.data.video_id.length)) + 1) + ''; // a_id = data.data.video_id.slice(0, data.data.video_id.length - 1) + (parseInt(data.data.video_id.slice(data.data.video_id.length - 1, data.data.video_id.length)) + 1) + '';
} // }
else{ // else{
a_id=data.data.video_id+"_0"; // a_id=data.data.video_id+"_0";
} // }
let jk_video_id = a_id; // let jk_video_id = a_id;
// let jk_video_id = data.data.video_id; let jk_video_id = data.data.video_id;
vue_sjcx.jk_s.forEach((item, index)=> { vue_sjcx.jk_s.forEach((item, index)=> {
if (item.VIDOID == jk_video_id) { if (item.VIDOID == jk_video_id) {
if_cz = true; if_cz = true;
} }
}); });
if (if_cz) { if (if_cz) {
//事件id
let sjid = data.recordid;
//报警时间
let sj = (new Date(parseInt(data.data.ts))).Format("yyyy-MM-dd hh:mm:ss");
//事件类型
let bjlx = '';
// //事件等级
let sjdj = '';
vue_sjcx.data_sjlxs.forEach((item, index)=> {
if ( item.id == data.data.incident_type) {
bjlx = item.name;
sjdj = item.alarmlevel;
}
});
if (sjdj == '1') {
//监控名称
let jkmc = '';
vue_sjcx.jk_arr.forEach((item, index)=> {
if (item.href == jk_video_id) {
jkmc = item.text;
}
});
//违法图片
let wfsp = [];
data.data.img_base64.forEach((item, index)=> {
let src = 'data:image/jpg;base64,' + item;
wfsp.push({img_src: src});
});
//右边消息弹出框的id
let tss = 'a' + data.data.ts;
//判断三级弹出框是否已经弹出，没有弹出，则清空，若是弹出，则继续push
if ($("#myModal_sjcx")[0].style.display != 'block') {
$(".carousel").collapse();
vue_sjsstxnow.yjsj_data = [];
vue_sjsstxnow.ejsj_data = [];
vue_sjsstxnow.sjsj_data = [];
$("#myModal_sjcx").modal("show");
$("#myModal_sjcx").find('input').each(function () {
$(this).removeAttr("checked", false);
$(this).prop("checked", false);
});
}
// if (sjdj == '1') {
$("#a1s").collapse();
vue_sjsstxnow.yjsj_data.unshift({
src: wfsp,
videoid: jk_video_id,
dwmc: jkmc,
sjlx: bjlx,
bjsj: sj,
checked: false,
recordid: sjid,
channelid: jk_video_id.slice(jk_video_id.length - 1),
fdid: jk_video_id.slice(0, jk_video_id.length - 2),
recordtime: sj,
recordtype: data.data.incident_type,
ss_type: '',
});
setTimeout(function () {
$("#a1s .carousel-indicators li").removeClass("active");
$("#a1s .carousel-inner > div").removeClass("active");
$("#a1s .carousel-indicators li:first-child").addClass("active");
$("#a1s .carousel-inner > div:first-child").addClass("active");
// #点击轮播图下方小圆点可以改变轮播图片
$("#a1s li").click(function () {
var index = $(this).attr("data-slide-to");
$('#a1s').carousel(parseInt(index))
});
$('#a1s').carousel({
interval: 3000,
});
setTimeout(function () { setTimeout(function () {
vue_sjcx.query(1, true); vue_sjcx.query(1, true);
}, 200); }, 200);
});
}
} }
} }
} }
......
src/main/resources/static/js/sjcx/sjcx.js
View file @ f9c0b87c
let state_sj = false;
let vue_sjcx = new Vue({ let vue_sjcx = new Vue({
el: '#sjcx', el: '#sjcx',
data: { data: {
...@@ -278,6 +279,9 @@ let vue_sjcx = new Vue({ ...@@ -278,6 +279,9 @@ let vue_sjcx = new Vue({
}, },
zdsx:function () { zdsx:function () {
vue_sjcx.check_s=document.getElementById('push').checked; vue_sjcx.check_s=document.getElementById('push').checked;
},
zdtx:function () {
state_sj=document.getElementById('status').checked;
} }
}, },
mounted(){ mounted(){
...@@ -356,6 +360,48 @@ let vue_sjcx = new Vue({ ...@@ -356,6 +360,48 @@ let vue_sjcx = new Vue({
}, },
}); });
//老的模态框
let vue_sjsstx_li = new Vue({
el: '#myModal_li',
data: {
data_wfsp: [],
data_sj: {
lx: '',
bjsj: '',
dwmc: ''
},
class_s: 'class_1s',
class_s1: 'class_2s',
shows: true,
src_img: '',
arrs: {
timeSpeed: 0,
timeIntervalSign: null,
timeIndex: 0,
videoMessage: '',
},
},
methods: {
sp_qh: function (e) {
if (e == 1) {
this.class_s = 'class_1s';
this.class_s1 = 'class_2s';
this.shows = true;
} else {
this.class_s = 'class_2s';
this.class_s1 = 'class_1s';
this.shows = false;
}
this.src_img = this.data_wfsp[0].img_src;
},
click_img_bf: function (src) {
this.src_img = src;
},
},
mounted(){
}
});
let vue_sjsstx = new Vue({ let vue_sjsstx = new Vue({
el: '#myModal', el: '#myModal',
data: { data: {
...@@ -395,7 +441,7 @@ let vue_sjsstx = new Vue({ ...@@ -395,7 +441,7 @@ let vue_sjsstx = new Vue({
}); });
//新的模态框,三等级模态框 //新的模态框,三等级模态框
let vue_sjsstxnow = new Vue({ let vue_sjsstxnow = new Vue({
el: '#myModal_sj', el: '#myModal_sjcx',
data: { data: {
yjsj_data: [], yjsj_data: [],
ejsj_data: [], ejsj_data: [],
...@@ -417,7 +463,7 @@ let vue_sjsstxnow = new Vue({ ...@@ -417,7 +463,7 @@ let vue_sjsstxnow = new Vue({
timeIndex: 0, timeIndex: 0,
videoMessage: '', videoMessage: '',
}; };
monitor_sx(item.videoid, 'my_video_1', vue_sjsstx_li.arrs, 2); // monitor_sx(item.videoid, 'my_video_1', vue_sjsstx_li.arrs, 2);
$("#myModal_li").modal('show'); $("#myModal_li").modal('show');
}, },
cli_input: function (item, e, indexs, a) { cli_input: function (item, e, indexs, a) {
...@@ -452,7 +498,7 @@ let vue_sjsstxnow = new Vue({ ...@@ -452,7 +498,7 @@ let vue_sjsstxnow = new Vue({
timeIndex: 0, timeIndex: 0,
videoMessage: '', videoMessage: '',
}); });
monitor_sx(item.videoid, ids, vue_jkgl.data_sd[vue_jkgl.data_sd.length-1], 3); // monitor_sx(item.videoid, ids, vue_jkgl.data_sd[vue_jkgl.data_sd.length-1], 3);
} }
} else { } else {
if (a == 1) { if (a == 1) {
...@@ -654,6 +700,10 @@ wss.onmessage = function (evt) { ...@@ -654,6 +700,10 @@ wss.onmessage = function (evt) {
//排除工程检测 //排除工程检测
return; return;
} }
if (!state_sj) {
vue_sjcx.query(1, true);
return;
}
//if_cz 判断前来的事件是不是本部门下的 //if_cz 判断前来的事件是不是本部门下的
let if_cz = false; let if_cz = false;
//jk_video_id为监控id //jk_video_id为监控id
...@@ -676,8 +726,8 @@ wss.onmessage = function (evt) { ...@@ -676,8 +726,8 @@ wss.onmessage = function (evt) {
let bjlx = ''; let bjlx = '';
//事件等级 //事件等级
let sjdj = ''; let sjdj = '';
vue_sjcx.arr_cllx.forEach((item, index)=> { vue_sjcx.data_sjlxs.forEach((item, index)=> {
if (item.id == data.data.incident_type) { if ( item.id == data.data.incident_type) {
bjlx = item.name; bjlx = item.name;
sjdj = item.alarmlevel; sjdj = item.alarmlevel;
} }
...@@ -699,21 +749,21 @@ wss.onmessage = function (evt) { ...@@ -699,21 +749,21 @@ wss.onmessage = function (evt) {
//右边消息弹出框的id //右边消息弹出框的id
let tss = 'a' + data.data.ts; let tss = 'a' + data.data.ts;
//判断三级弹出框是否已经弹出，没有弹出，则清空，若是弹出，则继续push //判断三级弹出框是否已经弹出，没有弹出，则清空，若是弹出，则继续push
if ($("#myModal_sj")[0].style.display != 'block') { if ($("#myModal_sjcx")[0].style.display != 'block') {
$(".carousel").collapse(); $(".carousel").collapse();
vue_sjsstx.yjsj_data = []; vue_sjsstxnow.yjsj_data = [];
vue_sjsstx.ejsj_data = []; vue_sjsstxnow.ejsj_data = [];
vue_sjsstx.sjsj_data = []; vue_sjsstxnow.sjsj_data = [];
$("#myModal_sj").modal("show"); $("#myModal_sjcx").modal("show");
$("#myModal_sj").find('input').each(function () { $("#myModal_sjcx").find('input').each(function () {
$(this).removeAttr("checked", false); $(this).removeAttr("checked", false);
$(this).prop("checked", false); $(this).prop("checked", false);
}); });
} }
if (sjdj == '1') { if (sjdj == '1') {
$("#a1s").collapse(); $("#a1s").collapse();
vue_sjsstx.yjsj_data.unshift({ vue_sjsstxnow.yjsj_data.unshift({
src: wfsp, src: wfsp,
videoid: jk_video_id, videoid: jk_video_id,
dwmc: jkmc, dwmc: jkmc,
...@@ -741,10 +791,13 @@ wss.onmessage = function (evt) { ...@@ -741,10 +791,13 @@ wss.onmessage = function (evt) {
$('#a1s').carousel({ $('#a1s').carousel({
interval: 3000, interval: 3000,
}); });
vue_sjcx.query(1, true);
}, 500); }, 500);
} else if (sjdj == '2') { } else if (sjdj == '2') {
$("#a2s").collapse(); $("#a2s").collapse();
vue_sjsstx.ejsj_data.unshift({ vue_sjsstxnow.ejsj_data.unshift({
src: wfsp, src: wfsp,
videoid: jk_video_id, videoid: jk_video_id,
dwmc: jkmc, dwmc: jkmc,
...@@ -772,11 +825,12 @@ wss.onmessage = function (evt) { ...@@ -772,11 +825,12 @@ wss.onmessage = function (evt) {
$('#a2s').carousel({ $('#a2s').carousel({
interval: 3000, interval: 3000,
}); });
vue_sjcx.query(1, true);
}, 500); }, 500);
} else if (sjdj == '3') { } else if (sjdj == '3') {
$("#a3s").collapse(); $("#a3s").collapse();
vue_sjsstx.sjsj_data.unshift({ vue_sjsstxnow.sjsj_data.unshift({
src: wfsp, src: wfsp,
videoid: jk_video_id, videoid: jk_video_id,
dwmc: jkmc, dwmc: jkmc,
...@@ -803,6 +857,7 @@ wss.onmessage = function (evt) { ...@@ -803,6 +857,7 @@ wss.onmessage = function (evt) {
$('#a3s').carousel({ $('#a3s').carousel({
interval: 3000, interval: 3000,
}); });
vue_sjcx.query(1, true);
}, 500); }, 500);
} }
new NoticeJs({ new NoticeJs({
...@@ -819,24 +874,24 @@ wss.onmessage = function (evt) { ...@@ -819,24 +874,24 @@ wss.onmessage = function (evt) {
}).show(); }).show();
//播放声音 //播放声音
let myMp3 = document.getElementById("audio"); let myMp3 = document.getElementById("audio");
audio.play(); // audio.play();
} }
} }
}; };
//
$('[name="status"]').bootstrapSwitch({ //$('[name="status"]').bootstrapSwitch({
onText: "打开", // onText: "打开",
offText: "关闭", // offText: "关闭",
onColor: "success", // onColor: "success",
offColor: "warning", // offColor: "warning",
onSwitchChange: function (event, state) { // onSwitchChange: function (event, state) {
if (state == true) { // if (state == true) {
state_sj = true; // state_sj = true;
console.log('已打开'); // console.log('已打开');
} else { // } else {
state_sj = false; // state_sj = false;
console.log('已关闭'); // console.log('已关闭');
} // }
} // }
}); //});
src/main/resources/templates/page/gcjl.html
View file @ f9c0b87c
...@@ -11,11 +11,13 @@ ...@@ -11,11 +11,13 @@
<link rel="stylesheet" href="../bootstrap/css/bootstrap-switch.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-switch.min.css">
<link rel="stylesheet" href="../css/gcjl.css"> <link rel="stylesheet" href="../css/gcjl.css">
<link rel="stylesheet" href="../css/photoviewer.css"> <link rel="stylesheet" href="../css/photoviewer.css">
<!--<link rel="stylesheet" href="../css/viewer.min.css">--> <link rel="stylesheet" href="../css/animate.css">
<link rel="stylesheet" href="../css/noticejs.css"> <!--<link rel="stylesheet" href="../css/viewer.min.css">-->
<title>工程记录</title> <title>工程记录</title>
</head> </head>
<body> <body>
<div id="page-sy"> <div id="page-sy">
<audio id="audio" src="../img/4082.mp3"></audio>
<div class="right-nav"> <div class="right-nav">
<div class="tab-content content-sjfx"> <div class="tab-content content-sjfx">
<div role="tabpanel" class="tab-pane active" id="sjcx"> <div role="tabpanel" class="tab-pane active" id="sjcx">
...@@ -54,6 +56,9 @@ ...@@ -54,6 +56,9 @@
</select> </select>
<span class="pub-span" style="margin-left: 10px;">自动刷新</span> <span class="pub-span" style="margin-left: 10px;">自动刷新</span>
<input type="checkbox" id="push" @click="zdsx" style="width: 17px;height: 17px;margin-top: 16px;float: left;"/> <input type="checkbox" id="push" @click="zdsx" style="width: 17px;height: 17px;margin-top: 16px;float: left;"/>
<span class="pub-span" style="margin-left: 10px;">自动弹窗
<input id="status" type="checkbox" @click="zdtx" checked>
</span>
<button type="button" class="btn btn-sm pub-btn" style="margin-left: 20px;float: left;" @click="getChange()">查询</button> <button type="button" class="btn btn-sm pub-btn" style="margin-left: 20px;float: left;" @click="getChange()">查询</button>
<span class="glyphicon glyphicon-th-list table-class" <span class="glyphicon glyphicon-th-list table-class"
:style="{'color':!show?'#368ff3 !important':''}" @click="qh_tab(1)"></span> :style="{'color':!show?'#368ff3 !important':''}" @click="qh_tab(1)"></span>
...@@ -155,7 +160,232 @@ ...@@ -155,7 +160,232 @@
</div> </div>
</div> </div>
</div> </div>
<!--事件实时提醒弹出框三级弹框-->
<div class="modal fade" id="myModal_sjcx" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width: 700px;">
<div class="modal-content" style="color: #e6eaef;width: 700px;">
<div class="modal-header" style="background-color: rgb(48, 53, 72);">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true" style="color: white;">&times;</span></button>
<h6 class="modal-title">事件实时提醒</h6>
</div>
<div class="modal-body" style="height: 780px;">
<div>
<div id="a1s" class="carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#a1s" :data-slide-to="index"
v-for="(item,index) in yjsj_data"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item" v-for="(item,index) in yjsj_data">
<img :src="item.src[0].img_src" alt="..." @click="djxx_modal(item)">
<div style="float: left;margin-left: 20px;width: 270px;">
<div class="div_modal">
<div class="div_modal_span">
<span>报警时间:</span>
</div>
<div class="div_modal_span1">
<span v-text="item.bjsj"></span>
</div>
</div>
<div class="div_modal">
<div class="div_modal_span">
<span>事件类型:</span>
</div>
<div class="div_modal_span1">
<span v-text="item.sjlx"></span>
</div>
</div>
<div class="div_modal">
<div class="div_modal_span">
<span>点位名称:</span>
</div>
<div class="div_modal_span1">
<span v-text="item.dwmc"></span>
</div>
</div>
<div class="div_modal">
<div class="div_modal_span">
<span>处理状态:</span>
</div>
<div class="div_modal_span1">
<button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,1,index,1)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #368ff3;border: 1px solid #929292;color: white;">正检
</button>
<button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,2,index,1)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #ffffff;border: 1px solid #f94646;color: #f94646;">误检
</button>
<button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,3,index,1)" style="margin-top: 0px;padding: 2px 7px;float: none;color: #717171;">重复事件
</button>
<span v-text="item.ss_type==1?'正检':item.ss_type==2?'误检':item.ss_type==3?'重复事件':''"></span>
</div>
</div>
<!--<div class="div_modal">-->
<!--<div class="div_modal_span">-->
<!--<span>是否锁定:</span>-->
<!--</div>-->
<!--<div class="div_modal_span1">-->
<!--<input type="checkbox" :name="'ass_'+index" :value="item.videoid" :checked="item.checked"-->
<!--style="width: 19px;height: 19px;" @click="cli_input(item,$event,index,1)"/>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
</div>
<a class="left carousel-control" href="#a1s" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#a1s" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="show-icon" style="background: #e80000;">一级</div>
</div>
<div>
<div id="a2s" class="carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#a2s" :data-slide-to="index"
v-for="(item,index) in ejsj_data"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item" v-for="(item,index) in ejsj_data">
<img :src="item.src[0].img_src" alt="..." @click="djxx_modal(item)">
<div style="float: left;margin-left: 20px;width: 270px;">
<div class="div_modal">
<div class="div_modal_span">
<span>报警时间:</span>
</div>
<div class="div_modal_span1">
<span v-text="item.bjsj"></span>
</div>
</div>
<div class="div_modal">
<div class="div_modal_span">
<span>事件类型:</span>
</div>
<div class="div_modal_span1">
<span v-text="item.sjlx"></span>
</div>
</div>
<div class="div_modal">
<div class="div_modal_span">
<span>点位名称:</span>
</div>
<div class="div_modal_span1">
<span v-text="item.dwmc"></span>
</div>
</div>
<div class="div_modal">
<div class="div_modal_span">
<span>处理状态:</span>
</div>
<div class="div_modal_span1">
<button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,1,index,2)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #368ff3;border: 1px solid #929292;color: white;">正检
</button>
<button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,2,index,2)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #ffffff;border: 1px solid #f94646;color: #f94646;">误检
</button>
<button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,3,index,2)" style="margin-top: 0px;padding: 2px 7px;float: none;color: #717171;">重复事件
</button>
<span v-text="item.ss_type==1?'正检':item.ss_type==2?'误检':item.ss_type==3?'重复事件':''"></span>
</div>
</div>
<div class="div_modal">
<div class="div_modal_span">
<span>是否锁定:</span>
</div>
<div class="div_modal_span1">
<input type="checkbox" :name="'a1ss_'+index" :value="item.videoid" :checked="item.checked"
style="width: 19px;height: 19px;" @click="cli_input(item,$event,index,2)"/>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#a2s" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#a2s" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="show-icon" style="background: #fb7e22;">二级</div>
</div>
<div>
<div id="a3s" class="carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#a3s" :data-slide-to="index"
v-for="(item,index) in sjsj_data"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item" v-for="(item,index) in sjsj_data">
<img :src="item.src[0].img_src" alt="..." @click="djxx_modal(item)">
<div style="float: left;margin-left: 20px;width: 270px;">
<div class="div_modal">
<div class="div_modal_span">
<span>报警时间:</span>
</div>
<div class="div_modal_span1">
<span v-text="item.bjsj"></span>
</div>
</div> </div>
<div class="div_modal">
<div class="div_modal_span">
<span>事件类型:</span>
</div>
<div class="div_modal_span1">
<span v-text="item.sjlx"></span>
</div>
</div>
<div class="div_modal">
<div class="div_modal_span">
<span>点位名称:</span>
</div>
<div class="div_modal_span1">
<span v-text="item.dwmc"></span>
</div>
</div>
<div class="div_modal">
<div class="div_modal_span">
<span>处理状态:</span>
</div>
<div class="div_modal_span1">
<button v-show="item.ss_type==''" type="button" class="btn btn-sm" @click="state_cli(item,1,index,3)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #368ff3;border: 1px solid #929292;color: white;">正检
</button>
<button v-show="item.ss_type==''" type="button" class="btn btn-sm" @click="state_cli(item,2,index,3)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #ffffff;border: 1px solid #f94646;color: #f94646;">误检
</button>
<button v-show="item.ss_type==''" type="button" class="btn btn-sm" @click="state_cli(item,3,index,3)" style="margin-top: 0px;padding: 2px 7px;float: none;color: #717171;">重复事件
</button>
<span v-text="item.ss_type==1?'正检':item.ss_type==2?'误检':item.ss_type==3?'重复事件':''"></span>
</div>
</div>
<div class="div_modal">
<div class="div_modal_span">
<span>是否锁定:</span>
</div>
<div class="div_modal_span1">
<input type="checkbox" :name="'a2ss_'+index" :value="item.videoid" :checked="item.checked"
style="width: 19px;height: 19px;" @click="cli_input(item,$event,index,3)"/>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#a3s" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#a3s" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="show-icon" style="background: #ffee00;">三级</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -221,7 +451,56 @@ ...@@ -221,7 +451,56 @@
</div> </div>
</div> </div>
</body> <!--事件实时提醒弹出框-->
<div class="modal fade" id="myModal_li" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width: 633px;">
<div class="modal-content" style="color: #e6eaef;width: 633px;">
<div class="modal-header" style="background-color: rgb(48, 53, 72);">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true" style="color: white;">&times;</span></button>
<h6 class="modal-title">事件实时提醒</h6>
</div>
<div class="modal-body">
<div>
<div class="top-video">
<video controls style="height: 100%;width: 100%;object-fit:fill;pointer-events: none;"
class="video-js" autoplay muted id="my_video_1" ref='video'
v-show="shows">
</video>
<img :src="src_img" v-show="!shows" style="width: 100%;height: 100%;cursor: zoom-in;"
data-gallery="manual">
</div>
<div class="pub-div" v-show="!shows">
<div class="div-img" v-for="(item,index) in data_wfsp">
<img :src="item.img_src" @click="click_img_bf(item.img_src)">
</div>
</div>
<div class="pub-div">
<button type="button" class="btn btn-sm" v-bind:class=class_s @click="sp_qh(1)">实时视频
</button>
<button type="button" class="btn btn-sm" v-bind:class=class_s1 @click="sp_qh(2)">事件图片</button>
</div>
<div style="color: #5d5d5d;" class="pub-div">
<div class="gjlx">
<span v-text="data_sj.lx"></span>
</div>
<div class="pub-div-span">
<span>报警时间：</span>
<span v-text="data_sj.bjsj"></span>
</div>
<div class="pub-div-span">
<span>点位名称：</span>
<span v-text="data_sj.dwmc"></span>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="border-top:none">
<button type="button" class="btn btn-sm" data-dismiss="modal" style="color: #2f2f2f;">关闭</button>
</div>
</div>
</div>
</div></body>
<script src="../js/jquery-3.1.1.min.js"></script> <script src="../js/jquery-3.1.1.min.js"></script>
<!--<script src="../js/viewer.min.js"></script>--> <!--<script src="../js/viewer.min.js"></script>-->
<script src="../js/util/photoviewer.js"></script> <script src="../js/util/photoviewer.js"></script>
...@@ -235,5 +514,6 @@ ...@@ -235,5 +514,6 @@
<script src="../js/laydate/laydate.js"></script> <script src="../js/laydate/laydate.js"></script>
<script src="../js/vue.js"></script> <script src="../js/vue.js"></script>
<script src="../js/util/http_util.js"></script> <script src="../js/util/http_util.js"></script>
<script src="../js/jkgl/MseVideo.js"></script>
<script src="../js/sjcx/gcjl.js"></script> <script src="../js/sjcx/gcjl.js"></script>
</html> </html>
\ No newline at end of file
src/main/resources/templates/page/sjcx.html
View file @ f9c0b87c
...@@ -12,11 +12,15 @@ ...@@ -12,11 +12,15 @@
<link rel="stylesheet" href="../css/sjcx.css"> <link rel="stylesheet" href="../css/sjcx.css">
<link rel="stylesheet" href="../css/photoviewer.css"> <link rel="stylesheet" href="../css/photoviewer.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-switch.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-switch.min.css">
<link rel="stylesheet" href="../css/photoviewer.css">
<link rel="stylesheet" href="../css/animate.css">
<link rel="stylesheet" href="../css/noticejs.css">
<!--<link rel="stylesheet" href="../css/viewer.min.css">--> <!--<link rel="stylesheet" href="../css/viewer.min.css">-->
<title>事件查询</title> <title>事件查询</title>
</head> </head>
<body> <body>
<div id="page-sy"> <div id="page-sy">
<audio id="audio" src="../img/4082.mp3"></audio>
<div class="right-nav"> <div class="right-nav">
<div class="tab-content content-sjfx"> <div class="tab-content content-sjfx">
<div role="tabpanel" class="tab-pane active" id="sjcx"> <div role="tabpanel" class="tab-pane active" id="sjcx">
...@@ -32,7 +36,7 @@ ...@@ -32,7 +36,7 @@
<div id="tree-xzxq" style="height: calc(100% - 80px);overflow-x: auto;float: left;width: 100%;"></div> <div id="tree-xzxq" style="height: calc(100% - 80px);overflow-x: auto;float: left;width: 100%;"></div>
</div> </div>
<div id="sjcx_s" class="div-right"> <div id="sjcx_s" class="div-right">
<div class="div-right-top"> <span class="div-right-top">
<span class="pub-span">告警时间：</span> <span class="pub-span">告警时间：</span>
<input type="text" class="form-control input-pub" id="kssj" style="width: 300px;" placeholder="请选择开始时间至结束时间"> <input type="text" class="form-control input-pub" id="kssj" style="width: 300px;" placeholder="请选择开始时间至结束时间">
<span class="pub-span">车辆类型</span> <span class="pub-span">车辆类型</span>
...@@ -47,15 +51,17 @@ ...@@ -47,15 +51,17 @@
<option value="2">误检</option> <option value="2">误检</option>
<option value="2">重复事件</option> <option value="2">重复事件</option>
</select> </select>
<span class="pub-span" style="margin-left: 10px;">自动刷新</span> <span class="pub-span" style="margin-left: 10px;">自动刷新
<input type="checkbox" id="push" @click="zdsx" style="width: 17px;height: 17px;margin-top: 16px;"/> <input type="checkbox" id="push" @click="zdsx" style="width: 17px;height: 17px;margin-top: 16px;"/>
<div style="position: absolute;top: 4px;right: 87px;z-index: 100;"> </span>
<input name="status" type="checkbox">
</div>
<span class="glyphicon glyphicon-th-list table-class" <span class="glyphicon glyphicon-th-list table-class"
:style="{'color':!show?'#368ff3 !important':''}" @click="qh_tab(1)"></span> :style="{'color':!show?'#368ff3 !important':''}" @click="qh_tab(1)"></span>
<span class="glyphicon glyphicon-th table-class" <span class="glyphicon glyphicon-th table-class"
:style="{'color':show?'#368ff3 !important':''}" @click="qh_tab(2)"></span> :style="{'color':show?'#368ff3 !important':''}" @click="qh_tab(2)"></span>
<span class="pub-span" style="margin-left: 10px;">自动弹窗
<input id="status" type="checkbox" @click="zdtx" checked>
</span>
</div> </div>
<div> <div>
<span style="float:left;line-height: 52px;margin-right: 10px;">事件类型：</span> <span style="float:left;line-height: 52px;margin-right: 10px;">事件类型：</span>
...@@ -171,7 +177,7 @@ ...@@ -171,7 +177,7 @@
</div> </div>
</div> </div>
<!--事件实时提醒弹出框三级弹框--> <!--事件实时提醒弹出框三级弹框-->
<div class="modal fade" id="myModal_sj" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal fade" id="myModal_sjcx" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width: 700px;"> <div class="modal-dialog" role="document" style="width: 700px;">
<div class="modal-content" style="color: #e6eaef;width: 700px;"> <div class="modal-content" style="color: #e6eaef;width: 700px;">
<div class="modal-header" style="background-color: rgb(48, 53, 72);"> <div class="modal-header" style="background-color: rgb(48, 53, 72);">
...@@ -228,15 +234,15 @@ ...@@ -228,15 +234,15 @@
<span v-text="item.ss_type==1?'正检':item.ss_type==2?'误检':item.ss_type==3?'重复事件':''"></span> <span v-text="item.ss_type==1?'正检':item.ss_type==2?'误检':item.ss_type==3?'重复事件':''"></span>
</div> </div>
</div> </div>
<div class="div_modal"> <!--<div class="div_modal">-->
<div class="div_modal_span"> <!--<div class="div_modal_span">-->
<span>是否锁定:</span> <!--<span>是否锁定:</span>-->
</div> <!--</div>-->
<div class="div_modal_span1"> <!--<div class="div_modal_span1">-->
<input type="checkbox" :name="'ass_'+index" :value="item.videoid" :checked="item.checked" <!--<input type="checkbox" :name="'ass_'+index" :value="item.videoid" :checked="item.checked"-->
style="width: 19px;height: 19px;" @click="cli_input(item,$event,index,1)"/> <!--style="width: 19px;height: 19px;" @click="cli_input(item,$event,index,1)"/>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> </div>
</div> </div>
</div> </div>
...@@ -458,7 +464,56 @@ ...@@ -458,7 +464,56 @@
</div> </div>
</div> </div>
</div> </div>
<!--事件实时提醒弹出框-->
<div class="modal fade" id="myModal_li" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width: 633px;">
<div class="modal-content" style="color: #e6eaef;width: 633px;">
<div class="modal-header" style="background-color: rgb(48, 53, 72);">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true" style="color: white;">&times;</span></button>
<h6 class="modal-title">事件实时提醒</h6>
</div>
<div class="modal-body">
<div>
<div class="top-video">
<video controls style="height: 100%;width: 100%;object-fit:fill;pointer-events: none;"
class="video-js" autoplay muted id="my_video_1" ref='video'
v-show="shows">
</video>
<img :src="src_img" v-show="!shows" style="width: 100%;height: 100%;cursor: zoom-in;"
data-gallery="manual">
</div>
<div class="pub-div" v-show="!shows">
<div class="div-img" v-for="(item,index) in data_wfsp">
<img :src="item.img_src" @click="click_img_bf(item.img_src)">
</div>
</div>
<div class="pub-div">
<button type="button" class="btn btn-sm" v-bind:class=class_s @click="sp_qh(1)">实时视频
</button>
<button type="button" class="btn btn-sm" v-bind:class=class_s1 @click="sp_qh(2)">事件图片</button>
</div>
<div style="color: #5d5d5d;" class="pub-div">
<div class="gjlx">
<span v-text="data_sj.lx"></span>
</div>
<div class="pub-div-span">
<span>报警时间：</span>
<span v-text="data_sj.bjsj"></span>
</div>
<div class="pub-div-span">
<span>点位名称：</span>
<span v-text="data_sj.dwmc"></span>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="border-top:none">
<button type="button" class="btn btn-sm" data-dismiss="modal" style="color: #2f2f2f;">关闭</button>
</div>
</div>
</div>
</div>
</body> </body>
<script src="../js/jquery-3.1.1.min.js"></script> <script src="../js/jquery-3.1.1.min.js"></script>
<!--<script src="../js/viewer.min.js"></script>--> <!--<script src="../js/viewer.min.js"></script>-->
...@@ -467,12 +522,19 @@ ...@@ -467,12 +522,19 @@
<script src="../bootstrap/js/bootstrap-paginator.js"></script> <script src="../bootstrap/js/bootstrap-paginator.js"></script>
<script src="../bootstrap/js/bootstrap-treeview.js"></script> <script src="../bootstrap/js/bootstrap-treeview.js"></script>
<script src="../bootstrap/js/bootstrap-select.js"></script> <script src="../bootstrap/js/bootstrap-select.js"></script>
<script src="../bootstrap/js/bootstrap-switch.min.js"></script>
<!--<script src="../bootstrap/js/bootstrap-datetimepicker.js"></script>--> <!--<script src="../bootstrap/js/bootstrap-datetimepicker.js"></script>-->
<!--<script src="../bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>--> <!--<script src="../bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>-->
<script src="../js/laydate/laydate.js"></script> <script src="../js/laydate/laydate.js"></script>
<script src="../js/notice.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/bootstrap-treeview.js"></script>
<script src="../bootstrap/js/bootstrap-switch.min.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-liquidfill.min.js"></script>
<script src="../js/vue.js"></script> <script src="../js/vue.js"></script>
<script src="../js/util/http_util.js"></script> <script src="../js/util/http_util.js"></script>
<script src="../js/jkgl/MseVideo.js"></script>
<script src="../js/jkgl/Canvas.js"></script>
<script src="../js/sjcx/sjcx.js"></script> <script src="../js/sjcx/sjcx.js"></script>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment