物联网平台 +Web 组态
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.
 
 
 
 

131 lines
4.3 KiB

<!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" />
<link rel="stylesheet" href="./css/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>
<title>报警图片</title>
</head>
<body>
<div id="app" v-cloak >
<div class="search">
<el-form :inline="true" :model="param" class="demo-form-inline">
<el-form-item label="起止时间">
<el-date-picker
style="width:366px"
v-model="param.timeDistance"
type="datetimerange"
range-separator="至"
value-format="yyyy/MM/dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button type="info" @click="onReturn">返回</el-button>
</el-form-item>
</el-form>
</div>
<div style="margin:10px 0;">
<el-table :data="videoImgData" style="width: 100%" >
<el-table-column type="index" label="序号" width="100"></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) }}</span>
</template>
</el-table-column>
<el-table-column prop="url" label="报警图片" @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-column prop="url" label="报警图片" >
<template slot-scope="scope">
<span style="color:#3499da;cursor: pointer;" @click="download( '/res' + scope.row.url )" >下载</span>
</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: {
timeDistance: []
} , // 表单
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.timeDistance[0] ,
end_time: this.param.timeDistance[1]
}) ;
},
changePage(page){
this.pageform.page = page;
this.onSubmit();
},
download( url ){
window.open( url ) ;
},
onReturn(){
window.location.href = baseurl + "/service/iot/video?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>