Skip to content

I
Imagedx
Commit ec0b1e82 authored by zhouts's avatar zhouts
Browse files
Options

告警界面修改01

parent 4f20a78d
Hide whitespace changes
Inline Side-by-side
Showing with 2051 additions and 0 deletions
src/main/resources/static/css/jkglsj.css 0 → 100644
View file @ ec0b1e82
/**模态框**/
#myModal_sj .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%;
}
#myModal_sjcx .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;
}
#myModal_sjcx .carousel-control{
width: 20px;
}
#myModal_sjcx .carousel-control.left{
background-image: linear-gradient(to right, rgba(160, 160, 160, 0.5) 0%, rgba(0, 0, 0, .0001) 100%);
}
#myModal_sjcx .carousel-control.right{
background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgb(160, 160, 160, 0.5) 100%);
}
#myModal_sjcx .carousel-indicators{
bottom: -20px;
}
#myModal_sjcx .div_modal{
width: 100%;
min-height: 44px;
float:left;
}
#myModal_sjcx .div_modal_span{
width: 80px;
float:left;
color: #47a0d4;
font-size: 15px;
}
#myModal_sjcx .div_modal_span1{
width: 180px;
float:left;
color: #dedede;
font-size: 15px;
font-weight: 900;
}
#myModal_sjcx .div_modal_span1 span{
color: #52a4d4;
word-break:break-word;
}
#myModal_sjcx .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/sjcx - 副本.css 0 → 100644
View file @ ec0b1e82
html, body {
width: 100%;
height: 100%;
margin: 0%;
padding: 0%;
overflow: hidden;
}
.btn{
outline:none !important;
}
#page-sy {
width: 100%;
height: 100%;
margin: 0%;
overflow: hidden;
display: -webkit-inline-box;
}
.left-nav {
width: 220px;
height: 100%;
background: #303548;
border-top: 2px solid black;
padding: 15px;
padding-top: 10px;
}
.right-nav {
width: calc(100% - 0px);
height: 100%;
border: 1px solid #ddd;
border-radius: 4px;
}
.nav > li > a {
color: #5F5F5F;
}
.nav .active > a {
color: #ffffff !important;
font-weight: 700;
}
.content-sjfx {
height: calc(100% - 0px);
float: left;
width: 100%;
background: #EEEEEE;
}
.content-sjfx > .tab-pane {
width: 100%;
height: 100%;
background: #EEEEEE;
}
#tree-ul .node-selected {
pointer-events: none;
box-shadow: 0px 0px 5px #151515;
}
#tree-ul .node-selected:after {
width: 6px;
background-color: #368ff3;
content: '';
left: 0;
top: 0;
position: absolute;
height: 100%;
}
.treeview{
font-size: 12px;
}
.treeview span.icon {
width: unset !important;
}
#tree-xzxq .list-group-item, #tree-gcjl .list-group-item {
padding: 4px 10px 4px 14px;
color: #4a4a4a;
}
.selected-span {
color: #bbbbbb;
}
#tree-xzxq .node-selected span, #tree-gcjl .node-selected span {
color: #368ff3 !important;
}
#tree-xzxq li span, #tree-gcjl li span {
margin-right: 10px;
}
.input-pub {
margin-top: 10px;
height: 30px;
width: 200px;
float: left;
margin-right: 10px;
}
.bootstrap-switch {
margin-top: 9px;
}
.bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-label {
padding: 4px 12px !important;
}
.table-class {
float: right;
line-height: 52px;
margin-right: 10px;
font-size: 16px;
cursor: pointer;
color: #a5a5a5;
}
.nav-pills {
float: left;
line-height: 52px;
}
.nav-pills li {
margin-left: 10px !important;
margin-right: 10px;
color: #1f1f1f;
font-size: 14px;
cursor: pointer;
}
.nav-pills .active {
color: #368ff3;
}
.nav-pills .active:after {
width: 100%;
background-color: #368ff3;
content: '';
left: 0;
top: 38px;
position: absolute;
height: 2px;
}
.pub-btn {
background-color: #368ff3;
color: white;
margin-top: 9px;
margin-left: 10px;
}
.pub-btn:hover, .pub-btn:focus, .pub-btn.focus {
color: white;
}
/**左边行政辖区**/
.div-left {
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: 10px;
}
.div-xzml {
width: 360px;
height: 100%;
float: left;
background-color: white;
}
.xzxq {
width: 100%;
line-height: 39px;
margin-left: 15px;
font-size: 15px;
}
.div-xzml-div {
width: 100%;
background-color: #e2e2e2;
line-height: 30px;
font-size: 15px;
height: 30px;
float: left;
}
.div-xzml-div span {
font-size: 13px;
}
.div-xzml-div img {
width: 16px;
margin-left: 15px;
margin-bottom: 5px;
}
/**右边**/
.div-right {
width: calc(100% - 370px);
height: 100%;
float: left;
background-color: white;
margin-left: 10px;
position: relative;
}
.div-right > div {
width: calc(100% - 20px);
margin-left: 10px;
height: 40px;
float: left;
}
.pub-span {
float: left;
line-height: 52px;
margin-right: 10px;
}
.more {
line-height: 52px;
color: #368ff3;
font-size: 16px;
font-weight: 900;
cursor: pointer;
float: left !important;
}
.div-ul {
list-style: none;
padding: 3px;
width: 100%;
height: 100%;
overflow-y: auto;
}
.div-ul li {
width: 400px;
height: 400px;
padding: 5px;
box-shadow: 0px 0px 9px #cecece;
float: left;
margin-bottom: 20px;
margin-right: 20px;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.li-top {
width: calc(100% - 10px);
margin-left: 5px;
height: 250px;
}
.li-top img {
width: 100%;
height: 100%;
}
.li-top iframe {
width: 100%;
height: 100%;
}
.li-center {
margin-left: 17px;
margin-top: 10px;
margin-right: 17px;
}
.li-bottom {
margin-left: 17px;
margin-top: 5px;
margin-right: 17px;
}
.li-bottom img {
width: 20px;
cursor: pointer;
}
.li-bottom span {
float: right;
color: #368ff3;
cursor: pointer;
}
.li-center span {
font-size: 12px;
}
.lx-span {
font-weight: 900;
font-size: 14px !important;
}
.tables table {
height: 100%;
}
.tables table tbody tr:nth-child(2n) {
background-color: #f3f3f3;
}
.tables table thead tr, .tables table tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.tables table tbody {
display: block;
height: calc(100% - 0px);
overflow-y: auto;
}
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
background: #929292;
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
border-radius: 10px;
background: #d4d4d4;
}
.pagination > li {
cursor: pointer;
}
.pagination > li > a, .pagination > li > span {
color: #000000;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
background-color: #368ff3;
border-color: #368ff3;
}
/**模态框**/
.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;
}
.leftspan{padding-left:150px
}
\ No newline at end of file
src/main/resources/static/js/sjcx/sjcx (2).js 0 → 100644
View file @ ec0b1e82
let state_sj = true;
let vue_sjcx = new Vue({
el: '#sjcx',
data: {
searchText: '',
show: true,
data_sjlxs: [],
data_table_wfpz: [],
num: 0,
num1: 1000,
sjlx: '',
data_sjlxs1: [],
count: '',
deptId: getCookie("bjpt_deptId"),
fy_select: 20,
gd_span: '',
show_nums: false,
state_arr: [],
cllx_select: [],
clzt_select: [],
arr_cllx: [],
jk_s:[],
check_s:false,
cllx: [],
jk_arr:[]
},
methods: {
fastSearch: function () {
this.xzml();
},
xzml: function () {
$.ajax({
url: "/dept/getDeptParent/" + getCookie("bjpt_deptId"),
dataType: "json",
type: "GET",
data: {},
success: function (result) {
if (result.code == 0) {
let parIds = result.data[0].parentId;
$.ajax({
url: "/dept/listvideo",
dataType: "json",
type: "GET",
data: {
deptId: getCookie("bjpt_deptId"),
username: getCookie("bjpt_realName"),
tdmc: vue_sjcx.searchText,
},
success: function (result) {
let defaultData = [];
vue_sjcx.jk_arr = [];
if (result.code == 0) {
vue_sjcx.jk_arr=result.data;
defaultData = toTree(result.data, parIds + '');
$('#tree-xzxq').treeview({
expandIcon: 'glyphicon glyphicon-triangle-right selected-span',
collapseIcon: 'glyphicon glyphicon-triangle-bottom selected-span',
nodeIcon: 'glyphicon glyphicon-folder-open selected-span',
selectedBackColor: '#ff000000',
selectedColor: '#368ff3',
onhoverColor: '#73a5ff26',
showBorder: false,
data: defaultData,
multiSelect: false,
level: 2,
showCheckbox: 1,//复选框设置，也可以是true
onNodeChecked: function (event, node) { //选中节点
let selectNodes = getChildNodeIdArr(node); //获取所有子节点
if (selectNodes) { //子节点不为空，则选中所有子节点
$(this).treeview('checkNode', [selectNodes, {silent: true}]);
}
//如果当前节点的子节点都被选中了。则父节点也应该要选中
setParentNodeCheck(node);
}, onNodeUnchecked: function (event, node) { //取消选中节点
let selectNodes = getChildNodeIdArr(node); //获取所有子节点
if (selectNodes) { //子节点不为空，则取消选中所有子节点
$(this).treeview('uncheckNode', [selectNodes, {silent: true}]);
}
}, onNodeExpanded: function (event, data) {
}, onNodeSelected: function (event, node) {
}
});
vue_sjcx.query(1, true);
}
}
});
}
}
});
},
qh_tab: function (el) {
if (el == 1) {
this.show = false;
} else {
this.show = true;
}
},
//事件类型切换
change: function (item, index) {
this.num = index;
this.num1 = 1000;
this.sjlx = item.id;
this.gd_span = '';
vue_sjcx.query(1, true);
},
//事件类型切换
change_gd: function (item, index) {
this.num = 5;
this.sjlx = item.id;
this.num1 = index;
this.gd_span = item.name;
vue_sjcx.query(1, true);
},
//详情
xq: function (item) {
vue_sjsstx.video_src = '';
vue_sjsstx.data_sj = item;
vue_sjsstx.class_s = 'class_1';
vue_sjsstx.class_s1 = 'class_2';
vue_sjsstx.show_s = false;
vue_sjsstx.img_src_s = '';
vue_sjsstx.data_wfsp = [];
if (item.img1path != null) {
vue_sjsstx.img_src_s = '/TrafficStatistics/fielagent?ftpPath=' + item.img1path;
vue_sjsstx.data_wfsp.push({src: '/TrafficStatistics/fielagent?ftpPath=' + item.img1path});
}
if (item.img2path != null) {
vue_sjsstx.data_wfsp.push({src: '/TrafficStatistics/fielagent?ftpPath=' + item.img2path});
}
if (item.img3path != null) {
vue_sjsstx.data_wfsp.push({src: '/TrafficStatistics/fielagent?ftpPath=' + item.img3path});
}
if (item.img4path != null) {
vue_sjsstx.data_wfsp.push({src: '/TrafficStatistics/fielagent?ftpPath=' + item.img4path});
}
if (item.img5path != null) {
vue_sjsstx.data_wfsp.push({src: '/TrafficStatistics/fielagent?ftpPath=' + item.img5path});
}
$("#myModal").modal("show");
},
query: function (pages, items) {
let nodes = $('#tree-xzxq').treeview('getChecked').filter(n=>n.level == null).map(n=> {
return n.href
});
let arr_nodes = "";
if (nodes.length == 0) {
nodes = "";
} else {
nodes.forEach((item, index)=> {
arr_nodes = arr_nodes + item + ',';
});
}
if ($('#tree-xzxq').treeview('getChecked').length > 0 && nodes.length == 0) {
arr_nodes = "null";
};
$(".div-ul").find('input').each(function () {
$(this).removeAttr("checked", false);
$(this).prop("checked", false);
});
this.show_nums = false;
// arr_nodes = arr_nodes.substring(0,arr_nodes.length -1);
let starttime = $("#kssj").val().substr(0, 19);
let endtime = $("#kssj").val().substr(22, 19);
let li = this.fy_select;
let type = this.sjlx.toLowerCase();
let objlabels = "";
if (this.cllx_select.length == 0) {
objlabels = "";
} else {
this.cllx_select.forEach((item, index)=> {
objlabels = objlabels + item + ',';
});
}
;
let processstatus = "";
if (this.clzt_select.length == 0) {
processstatus = "";
} else {
this.clzt_select.forEach((item, index)=> {
processstatus = processstatus + item + ',';
});
}
;
let json_s = {
videoids: arr_nodes,
page: pages,
limit: li,
recordtype: type,
checkstatus: "",
starttime: starttime,
endtime: endtime,
deptid: getCookie("bjpt_deptId"),
construction: '2',
objlabel: objlabels,
processstatus: processstatus,
rectificationtype:'',
};
$.ajax({
url: "/TrafficStatistics/queryTraffalarmrecordByPage/1",
dateType: 'json',
type: "POST",
contentType: 'application/json',
data: JSON.stringify(json_s),
success: function (result) {
vue_sjcx.data_table_wfpz = [];
if (result.code == 0) {
let a_sum = result.count;
vue_sjcx.count = result.count;
vue_sjcx.data_table_wfpz = result.data;
if (items) {
$("#fy4").bootstrapPaginator({
bootstrapMajorVersion: 3, //版本，这里设置为3，大于2即可
currentPage: 1,//当前页
totalPages: Math.ceil(((a_sum > 0) ? a_sum : 1) / vue_sjcx.fy_select),//总页数
// numberofPages: 10,//显示的页数
itemTexts: function (type, page, current) { //修改显示文字
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
}, onPageClicked: function (event, originalEvent, type, page) { //异步换页
//请求加载数据
vue_sjcx.query(page, false);
}
});
}
}
}
});
},
getChange: function () {
setTimeout(function () {
vue_sjcx.query(1, true);
}, 200);
},
cli_input: function () {
vue_sjcx.state_arr = [];
$(".div-ul").find('input:checked').each(function () {
let arr = $(this).val().split("|");
vue_sjcx.state_arr.push({recordid:arr[0],channelid:arr[1],fdid:arr[2],recordtime:arr[3],recordtype:arr[4]});
});
if (vue_sjcx.state_arr.length > 0) {
vue_sjcx.show_nums = true;
} else {
vue_sjcx.show_nums = false;
}
},
state_cli: function (e) {
let json_s = [];
vue_sjcx.state_arr.forEach((item, index)=> {
json_s.push({recordid: item.recordid,channelid:item.channelid,fdid:item.fdid,recordtime:item.recordtime,recordtype:item.recordtype, 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) {
vue_sjcx.query(1, true);
info_new("状态修改成功");
window.setTimeout("$('#info-warning-new').modal('hide')", 2000);
}
}
});
},
zdsx:function () {
vue_sjcx.check_s=document.getElementById('push').checked;
},
zdtx:function () {
state_sj=document.getElementById('status').checked;
}
},
mounted(){
$("#kssj").val(getTime_extent(6).pre_rq_start + ' - ' + getTime().jssj);
$.ajax({
url: "/dept/listAllvideoIdsByDeptid",
dataType: "json",
type: "GET",
data: {
deptid: getCookie("bjpt_deptId"),
},
success: function (result) {
vue_sjcx.jk_s = [];
if (result.code == 0) {
if (result.data.length > 0) {
vue_sjcx.jk_s = result.data;
}
}
}
});
$.ajax({
url: "/TrafficStatistics/listcode",
dataType: "json",
type: "GET",
data: {
codeid: 3,
alarmlevel: '',
},
success: function (result) {
vue_sjcx.arr_cllx = [];
if (result.code == 0) {
if (result.data.length > 0) {
result.data.forEach((item, index)=> {
if (item.id != 'TRICYCLE' && item.id != 'CART')
vue_sjcx.arr_cllx.push({id: item.id, value: item.name});
});
setTimeout(function () {
$("#cllxs").selectpicker('refresh');
$("#cllxs").selectpicker('render');
}, 200);
}
}
}
});
$.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();
},
});
//老的模态框
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({
el: '#myModal',
data: {
sp_src: '',
data_wfsp: [],
data_sj: {},
class_s: 'class_1',
class_s1: 'class_2',
show_s: false,
img_src_s: '',
video_src: ''
},
methods: {
sp_qh: function (e) {
if (e == 1) {
this.class_s = 'class_1';
this.class_s1 = 'class_2';
this.show_s = false;
} else {
this.class_s = 'class_2';
this.class_s1 = 'class_1';
this.show_s = true;
this.video_src = '/TrafficStatistics/fielagent?ftpPath=' + this.data_sj.videopath;
}
},
click_img_bf: function (src) {
this.img_src_s = src;
}
},
mounted(){
if (this.data_wfsp.length > 0) {
this.data_wfsp[0].kg = true;
this.sp_src = this.data_wfsp[0].src;
// document.getElementById("my_video_1").play();
}
}
});
//新的模态框,三等级模态框
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) {
let len = list.length;
function loop(parId) {
let res = [];
for (let i = 0; i < len; i++) {
let item = list[i];
if (item.parentId === parId) {
item.nodes = loop(item.href);
let arr = {
href: item.href,
text: item.text,
level: item.level,
parentId: item.parentId,
}
if (item.level == 0 || item.level == 1 || item.level == 2) {
arr.selectable = false;
arr.state = {expanded: true, checked: true};
} else {
arr.icon = 'glyphicon glyphicon-facetime-video zx',
arr.state = {expanded: false, checked: true};
arr.selectable = true;
}
if (item.nodes.length > 0) {
arr.nodes = item.nodes;
}
res.push(arr);
}
}
return res
}
return loop(parId)
}
function checkNode(parentNode, i) {
if (parentNode.nodes[i].nodes != undefined && parentNode.nodes[i].nodes.length !== 0 && parentNode.nodes[i].nodes.filter(n => n.level === null).length > 0) {
for (let j = 0; j < parentNode.nodes[i].nodes.length; j++) {
let d = checkNode(parentNode.nodes[i], j);
d && j--;
}
} else {
parentNode.nodes.splice(i, 1);
return true
}
}
//获取选中的id
function getChildNodeIdArr(node) {
let ts = [];
if (node.nodes) {
for (let x in node.nodes) {
ts.push(node.nodes[x].nodeId);
if (node.nodes[x].nodes) {
let getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
for (let j in getNodeDieDai) {
ts.push(getNodeDieDai[j]);
}
}
}
} else {
ts.push(node.nodeId);
}
return ts;
};
//设置父节点
function setParentNodeCheck(node) {
let parentNode = $("#tree-xzxq").treeview("getNode", node.parentId);
if (parentNode.nodes) {
let checkedCount = 0;
for (let x in parentNode.nodes) {
if (parentNode.nodes[x].state.checked) {
checkedCount++;
} else {
break;
}
}
if (checkedCount === parentNode.nodes.length) {
$("#tree-xzxq").treeview("checkNode", parentNode.nodeId);
setParentNodeCheck(parentNode);
}
}
};
laydate.render({
elem: '#kssj'
, type: 'datetime'
, theme: '#368ff3'
, range: true
});
// 全选/取消
$("#all").click(function () {
$(".div-ul").find('input').each(function () {
$(this).prop("checked", true);
});
vue_sjcx.state_arr = [];
$(".div-ul").find('input:checked').each(function () {
// vue_sjcx.state_arr.push($(this).val());
let arr = $(this).val().split("|");
vue_sjcx.state_arr.push({recordid:arr[0],channelid:arr[1],fdid:arr[2],recordtime:arr[3],recordtype:arr[4]});
});
vue_sjcx.show_nums = true;
});
$("#unall").click(function () {
$(".div-ul").find('input').each(function () {
$(this).removeAttr("checked", false);
$(this).prop("checked", false);
vue_sjcx.state_arr = [];
});
vue_sjcx.show_nums = false;
});
//放大缩小图片
$('[data-gallery=manual]').click(function (e) {
e.preventDefault();
var items = [],
options = {
index: $(this).index()
};
$('[data-gallery=manual]').each(function () {
items.push({
src: $(this).attr('src'),
title: '图片查看'
});
});
new PhotoViewer(items, options);
});
let d = new Date().getTime();
let web_ip = "ws://33.65.219.103:8089/websocket/" + d;
let wss = new WebSocket(web_ip);
wss.onopen = function () {
console.log("连接成功");
// var from = {"serialNo": "xxx", "idNo": "xxx"};
// wss[i].send(JSON.stringify(from));//发送参数
};
wss.onmessage = function (evt) {
var data = JSON.parse(event.data);
// console.log(data);
if (data.type == "alarm") {
if (data.data.incident_type == 'ROADWORKS' || data.data.incident_type == 'ROADWORKS_OUT_OF_LINE') {
//排除工程检测
return;
}
if (data.data.type == 'TRAFFIC_INCIDENT_ALARM') {
if(state_sj==false){
if(!vue_sjcx.check_s){
return;
}
vue_sjcx.query(1, true);
return;
}
//if_cz 判断前来的事件是不是本部门下的
let if_cz = false;
//jk_video_id为监控id
// let 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) + '';
// let jk_video_id = data.data.fdid+"_"+data.data.channelid;
let jk_video_id = data.data.video_id;
vue_sjcx.jk_s.forEach((item, index)=> {
if(item.VIDOID == jk_video_id )
{
if_cz = true;
}
});
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.toLowerCase() == data.data.incident_type.toLowerCase()) {
bjlx = item.name;
sjdj = item.alarmlevel;
}
});
//监控名称
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,
});
vue_sjcx.query(1, true);
}, 500);
} else if (sjdj == '2') {
$("#a2s").collapse();
vue_sjsstxnow.ejsj_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 () {
$("#a2s .carousel-indicators li").removeClass("active");
$("#a2s .carousel-inner > div").removeClass("active");
$("#a2s .carousel-indicators li:first-child").addClass("active");
$("#a2s .carousel-inner > div:first-child").addClass("active");
// #点击轮播图下方小圆点可以改变轮播图片
$("#a2s li").click(function () {
var index = $(this).attr("data-slide-to");
$('#a2s').carousel(parseInt(index))
});
$('#a2s').carousel({
interval: 3000,
});
vue_sjcx.query(1, true);
}, 500);
} else if (sjdj == '3') {
$("#a3s").collapse();
vue_sjsstxnow.sjsj_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 () {
$("#a3s .carousel-indicators li").removeClass("active");
$("#a3s .carousel-inner > div").removeClass("active");
$("#a3s .carousel-indicators li:first-child").addClass("active");
$("#a3s .carousel-inner > div:first-child").addClass("active");
// #点击轮播图下方小圆点可以改变轮播图片
$("#a3s li").click(function () {
var index = $(this).attr("data-slide-to");
$('#a3s').carousel(parseInt(index))
});
$('#a3s').carousel({
interval: 3000,
});
vue_sjcx.query(1, true);
}, 500);
}
new NoticeJs({
text: 'Notification message',
position: 'bottomRight',
// id: tss,
id: 11,
sjlx: bjlx,
dwmc: jkmc,
animation: {
open: 'animated bounceIn',
close: 'animated bounceOut'
}
}).show();
//播放声音
let myMp3 = document.getElementById("audio");
// audio.play();
}
}
}
};
//
//$('[name="status"]').bootstrapSwitch({
// onText: "打开",
// offText: "关闭",
// onColor: "success",
// offColor: "warning",
// onSwitchChange: function (event, state) {
// if (state == true) {
// state_sj = true;
// console.log('已打开');
// } else {
// state_sj = false;
// console.log('已关闭');
// }
// }
//});
src/main/resources/templates/page/sjcx (2).html 0 → 100644
View file @ ec0b1e82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-select.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-treeview.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-switch.min.css">
<link rel="stylesheet" href="../css/sjcx.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">-->
<title>事件查询</title>
</head>
<body>
<div id="page-sy">
<audio id="audio" muted="muted" src="../img/4083.mp3"></audio>
<div class="right-nav">
<div class="tab-content content-sjfx">
<div role="tabpanel" class="tab-pane active" id="sjcx">
<div class="div-left">
<div class="div-xzml">
<!--<span class="xzxq">行政辖区</span>-->
<input type="text" class="form-control input-pub" placeholder="请输入点位 回车搜索" v-model="searchText"
style="width: calc(100% - 20px);margin-left: 10px;margin-bottom: 10px;" @keyup.enter="fastSearch">
<div class="div-xzml-div">
<img src="../img/sjcx/xzml.png">
<span>监控目录</span>
</div>
<div id="tree-xzxq" style="height: calc(100% - 80px);overflow-x: auto;float: left;width: 100%;"></div>
</div>
<div id="sjcx" class="div-right">
<span class="div-right-top">
<span class="pub-span">告警时间：</span>
<input type="text" class="form-control input-pub" id="kssj" style="width: 300px;" placeholder="请选择开始时间至结束时间">
<span class="pub-span">车辆类型</span>
<select class="form-control selectpicker" multiple v-model="cllx_select" id="cllxs">
<option v-for="(item,index) in arr_cllx" :value="item.id"
v-text="item.value"></option>
</select>
<span class="pub-span" style="margin-left: 10px;">处理状态</span>
<select class="form-control selectpicker" multiple v-model="clzt_select">
<option value="0">未处理</option>
<option value="1">正检</option>
<option value="2">误检</option>
<option value="2">重复事件</option>
</select>
<span class="pub-span" style="margin-left: 10px;">自动刷新
<input type="checkbox" id="push" @click="zdsx" style="width: 17px;height: 17px;margin-top: 16px;"/>
</span>
<span class="glyphicon glyphicon-th-list table-class"
:style="{'color':!show?'#368ff3 !important':''}" @click="qh_tab(1)"></span>
<span class="glyphicon glyphicon-th table-class"
: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>
</span>
<div>
<span style="float:left;line-height: 52px;margin-right: 10px;">事件类型：</span>
<ul class="nav nav-pills " role="tablist">
<li role="presentation" :class="['tab-pane',(index==num)?'active':'']"
v-for="(item,index) in data_sjlxs" @click="change(item,index)">
{{item.name}}
</li>
</ul>
<ul class="nav navbar-nav navbar-right admin more">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false"><span style="color: #368ff3;">更多</span></a>
<ul class="dropdown-menu" style="min-width: 200px;">
<li v-for="(item,index) in data_sjlxs1" @click="change_gd(item,index)" :class="['tab-pane',(index==num1)?'active':'']"><a v-text="item.name"></a></li>
</ul>
</li>
</ul>
<span style="float: left;margin-left: 18px;line-height: 48px;color: #368ff3;" v-text="gd_span"></span>
<button type="button" class="btn btn-sm pub-btn" style="margin-left: 30px;" @click="getChange()">查询</button>
</div>
<div style="height:calc(100% - 164px);margin-top: 20px;" class="tables">
<ul class="div-ul div-pub-gt" v-if="show">
<li v-for="(item,index) in data_table_wfpz">
<div style="position: absolute;right: 12px;top: 7px;border: 1px solid #e0e0e0;width: 18px;height: 18px;">
<input type="checkbox" name="loginName" class="loginName" :value="item.recordid+'|'+item.channelid+'|'+item.fdid+'|'+item.recordtime+'|'+item.recordtype" @click="cli_input" style="width: 17px;height: 17px;margin-top: 0px;">
</div>
<div class="show-icon" :style="{'background':(item.processstatus==0||item.processstatus==null)?'#ff9c2b':(item.processstatus==2)?'#fc3939':(item.processstatus==1)?'#2fba08':'#cccccc'}" v-text="item.processstatus==0||item.processstatus==null?'未处理':item.processstatus==1?'正检':item.processstatus==2?'误检':'重复事件'"></div>
<div class="li-top">
<img :src="'/TrafficStatistics/fielagent?ftpPath='+item.img1path">
</div>
<div class="li-center">
<div>
<span class="lx-span" v-text="item.recordname"></span>
</div>
<div>
<span>告警时间：</span>
<span v-text="item.recordtime"></span>
</div>
<div>
<span>通道名称：</span>
<span v-text="item.tdmc"></span>
</div>
<div>
<span>辖区名称：</span>
<span v-text="item.xzmc"></span>
</div>
<div v-show="item.objlablename==''||item.objlablename==null?false:true">
<span>车辆类型：</span>
<span v-text="item.objlablename"></span>
</div>
</div>
<div class="li-bottom">
<img src="../img/sjcx/lssp.png" v-show="item.videopath==null?false:true">
<span @click="xq(item)">详情</span>
</div>
</li>
</ul>
<table v-if="!show" class="table table-td">
<thead>
<tr style="background-color: rgb(228, 228, 228);">
<td>告警类型</td>
<td>告警时间</td>
<td>通道名称</td>
<td>辖区名称</td>
<td>操作</td>
</tr>
</thead>
<tbody class="div-pub-gt">
<tr v-for="(item,index) in data_table_wfpz">
<td v-text="item.recordname"></td>
<td v-text="item.recordtime"></td>
<td v-text="item.tdmc"></td>
<td v-text="item.xzmc"></td>
<td>
<img src="../img/sjcx/lssp.png" style="width: 20px;" v-show="item.videopath==null?false:true">
<button type="button" class="btn btn-sm pub-btn"
@click="xq(item)" style="margin-left: 5px;margin-top: 0px;padding: 2px 7px;">详情
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div-right-buttom">
<div style="line-height: 64px;float: left;font-weight: 900;">
<span>共</span><span style="color: red;" v-text="count"></span><span>条</span>
</div>
<ul id="fy4" style="float: right;"></ul>
<div style="float: right;margin-top: 21px;margin-right: 30px;width: 111px;line-height: 36px;font-weight: 900;">
<span style="float: left;width: 34px;">每页</span>
<select class="form-control selectpicker" v-model="fy_select" style="width: 50px;padding: 0px 3px;float: left;"v-on:change="getChange()">
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
</select>
<span style="float: left;margin-left: 8px;">条</span>
</div>
</div>
<div class="state_div" v-show="show_nums">
<button type="button" class="btn btn-sm btn1" id="all">全选</button>
<button type="button" class="btn btn-sm btn1" id="unall">取消</button>
<span v-text="'已选择'+state_arr.length+'项'"></span>
<button type="button" class="btn btn-sm btn2" @click="state_cli(3)">重复事件</button>
<button type="button" class="btn btn-sm btn3" @click="state_cli(2)">误检</button>
<button type="button" class="btn btn-sm btn4" @click="state_cli(1)">正检</button>
</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 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 class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width: 650px;">
<div class="modal-content" style="color: #e6eaef;width: 650px;">
<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 id="my_video_1" class="video-js" controls preload="auto" width="480" height="280"
ref='video' v-show="show_s" style="object-fit: fill;width: 100%;height: 100%;" :src="video_src">
</video >
<img :src="img_src_s" v-show="!show_s" style="width: 100%;height: 100%;cursor: zoom-in;" data-gallery="manual">
</div>
<div class="pub-div" v-show="!show_s">
<div class="div-img" style="width: 100%;">
<img v-for="(item,index) in data_wfsp" :src="item.src" @click="click_img_bf(item.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)" v-show="data_sj.videopath==null?false:true">事件视频</button>
</div>
<div style="color: #5d5d5d;" class="pub-div">
<div class="gjlx">
<span v-text="data_sj.recordname"></span>
</div>
<div class="pub-div-span">
<span>报警时间：</span>
<span v-text="data_sj.recordtime"></span>
</div>
<div class="pub-div-span">
<span>辖区编号：</span>
<span v-text="data_sj.areaid"></span>
</div>
<div class="pub-div-span">
<span>辖区名称：</span>
<span v-text="data_sj.xzmc"></span>
</div>
<div class="pub-div-span">
<span>通道编号：</span>
<span v-text="data_sj.fdid+'_'+data_sj.channelid"></span>
</div>
<div class="pub-div-span">
<span>通道名称：</span>
<span v-text="data_sj.tdmc"></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>
<!--事件实时提醒弹出框-->
<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/viewer.min.js"></script>-->
<script src="../js/util/photoviewer.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/bootstrap-paginator.js"></script>
<script src="../bootstrap/js/bootstrap-treeview.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.zh-CN.js"></script>-->
<script src="../js/laydate/laydate.js"></script>
<script src="../js/notice.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/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>
</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