You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
4.8 KiB
176 lines
4.8 KiB
2 years ago
|
<!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="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon" />
|
||
|
|
<link rel="stylesheet" href="../../lib/element-ui/index.css" />
|
||
|
|
|
||
|
|
<script src="../common/util.js"></script>
|
||
|
|
<script src="../../lib/bigscreen/js/vue.min.js"></script>
|
||
|
|
<script src="../../lib/bigscreen/lib/jquery/jquery-1.9.1.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../../lib/layer/layer.js"></script>
|
||
|
|
<script src="../../lib/element-ui/index.js"></script>
|
||
|
|
<style type="text/css">
|
||
|
|
[v-cloak]{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
html{
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
#app{
|
||
|
|
padding: 2px;
|
||
|
|
}
|
||
|
|
.el-form{
|
||
|
|
|
||
|
|
}
|
||
|
|
.el-form-item{
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.search{
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table{
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-container{
|
||
|
|
display: flex ;
|
||
|
|
align-items: center ;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #e9e9e9;
|
||
|
|
border-radius: 3px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-container:HOVER{
|
||
|
|
background: #efefef;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-avatar{
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.self-width{
|
||
|
|
width: 400px !important ;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<title>报警图片</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app" v-cloak >
|
||
|
|
<div class="search">
|
||
|
|
<el-form :inline="true" :model="param" class="demo-form-inline">
|
||
|
|
<div class="block" style="overflow: hidden;" >
|
||
|
|
<el-date-picker size="small" style="float:left;width:40%;"
|
||
|
|
v-model="param.start_time"
|
||
|
|
type="date"
|
||
|
|
placeholder="开始日期">
|
||
|
|
</el-date-picker>
|
||
|
|
|
||
|
|
<span style="padding: 0 20px;float: left;"> ~ </span>
|
||
|
|
|
||
|
|
<el-date-picker size="small" style="float:left;width:40%;"
|
||
|
|
v-model="param.end_time"
|
||
|
|
type="date"
|
||
|
|
placeholder="结束日期">
|
||
|
|
</el-date-picker>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="block" style="text-align: right;margin-top: 10px;margin-right: 5%;">
|
||
|
|
<el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
|
||
|
|
<el-button type="info" size="mini" @click="onReturn">返回</el-button>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<div style="margin:10px 0;">
|
||
|
|
<el-table :data="videoImgData" style="width: 100%" >
|
||
|
|
<el-table-column type="index" label="序号" width="50"></el-table-column>
|
||
|
|
<el-table-column prop="atime" label="数据时间" >
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<i class="el-icon-time"></i>
|
||
|
|
<span style="margin-left: 10px">{{ timeStamp2String(scope.row.atime , 'yy/MM/dd hh:mm:ss') }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="url" label="报警图片" width="100" @click="download( '/res' + url )" >
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-avatar shape="square" :size="40" :src=" '/res' + scope.row.url"></el-avatar>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
<el-pagination
|
||
|
|
background
|
||
|
|
:hide-on-single-page="page_value"
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:page-size="pageform.pageSize"
|
||
|
|
@current-change="changePage"
|
||
|
|
:total="pageform.totalCount">
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var app = new Vue({
|
||
|
|
el: '#app' ,
|
||
|
|
data: function(){
|
||
|
|
return {
|
||
|
|
param: {
|
||
|
|
|
||
|
|
} , // 表单
|
||
|
|
videoImgData: [] , // 摄像头信息
|
||
|
|
page_value: true , // 页面隐藏
|
||
|
|
pageform:{ //分页参数
|
||
|
|
pageSize:10,
|
||
|
|
totalCount:0,
|
||
|
|
page:1,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initVideoImgInfo(data){
|
||
|
|
// 查询图片
|
||
|
|
commonAjax('POST',baseurl+"/service/page/video/file?paged="+ this.pageform.page +"&pageSize=" + this.pageform.pageSize , data ,function(res){
|
||
|
|
if(isOk(res)){
|
||
|
|
var dt = res.data.data ;
|
||
|
|
app.videoImgData = dt ;
|
||
|
|
app.pageform.totalCount = res.data.totalCount;
|
||
|
|
if( res.data.totalCount > app.pageform.pageSize ){
|
||
|
|
app.page_value = false ;
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
app.page_value = true ;
|
||
|
|
app.videoImgData = [] ;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onSubmit(){
|
||
|
|
// 查询
|
||
|
|
this.initVideoImgInfo({ video_id: getQueryString('videoId') ,
|
||
|
|
start_time: this.param.start_time ,
|
||
|
|
end_time: this.param.end_time
|
||
|
|
}) ;
|
||
|
|
},
|
||
|
|
changePage(page){
|
||
|
|
this.pageform.page = page;
|
||
|
|
this.onSubmit();
|
||
|
|
},
|
||
|
|
download( url ){
|
||
|
|
window.open( url ) ;
|
||
|
|
},
|
||
|
|
onReturn(){
|
||
|
|
window.location.href = baseurl + "/service/wiot/live?id="+ getQueryString('videoId') +"&sid=1" ;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.initVideoImgInfo({ video_id: getQueryString('videoId') , start_time: timeStamp2String(new Date(new Date().getTime() - 5*24*3600*1000 )) }) ;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|