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.
158 lines
4.7 KiB
158 lines
4.7 KiB
3 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" />
|
||
|
|
<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-input v-model="param.name" clearable placeholder="名称"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="项目名称">
|
||
|
|
<el-select v-model="param.scene_id" clearable placeholder="请选择">
|
||
|
|
<el-option
|
||
|
|
v-for="item in sceneData"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.name"
|
||
|
|
:value="item.id">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<div style="margin-top: 10px;">
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="3" class="self-width" v-for="item in videoData" >
|
||
|
|
<div class="video-container" @click="lokdetailInfo(item)" >
|
||
|
|
<el-avatar :size="50" :src="circleUrl"></el-avatar>
|
||
|
|
<div style="margin-left: 15px;">
|
||
|
|
<span style="display: inline-block;" >{{item.name}}</span>
|
||
|
|
<span style="display: inherit;color: #666;font-size: 14px;" >{{item.scene_name}}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<img style="height: 20px; margin-right:10px; margin-left: auto;" alt="" src="./imgs/arrow.png">
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</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: {} , // 表单
|
||
|
|
tableData: [], // 表格数据
|
||
|
|
sceneData: [] , // 项目信息
|
||
|
|
circleUrl: './imgs/camera.png' ,
|
||
|
|
searchContion: {} , // 查询条件
|
||
|
|
videoData: [] , // 摄像头信息
|
||
|
|
page_value: true , // 页面隐藏
|
||
|
|
pageform:{//分页参数
|
||
|
|
pageSize:20,
|
||
|
|
totalCount:0,
|
||
|
|
page:1,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick(access_id) {
|
||
|
|
// 权限管理
|
||
|
|
layer.open({
|
||
|
|
type: 2,
|
||
|
|
title: '权限管理',
|
||
|
|
shadeClose: true,
|
||
|
|
shade: 0.4,
|
||
|
|
area: ['100%', '100%'],
|
||
|
|
content: baseurl + "/page/access/access_auth.html?id=" + access_id
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onSubmit(){
|
||
|
|
// 查询
|
||
|
|
this.pageform.page = 1;
|
||
|
|
this.searchContion = $.extend({},this.param );
|
||
|
|
this.initVideoInfo( this.param , this.pageform.page ) ;
|
||
|
|
},
|
||
|
|
changePage(page){
|
||
|
|
this.pageform.page = page;
|
||
|
|
this.initVideoInfo(this.param , this.pageform.page) ;
|
||
|
|
},
|
||
|
|
initVideoInfo(data, paged ){
|
||
|
|
// 摄像头查询
|
||
|
|
commonAjax('POST',baseurl+"/service/page/video?paged="+ paged +"&pageSize=" + this.pageform.pageSize , data ,function(res){
|
||
|
|
if(isOk(res)){
|
||
|
|
var dt = res.data.data ;
|
||
|
|
app.videoData = dt ;
|
||
|
|
app.pageform.totalCount = res.data.totalCount;
|
||
|
|
if( res.data.totalCount > app.pageform.pageSize ){
|
||
|
|
app.page_value = false ;
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
app.page_value = true ;
|
||
|
|
app.videoData = [] ;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
initSceneData(data){
|
||
|
|
// 项目查询
|
||
|
|
commonAjax('POST',baseurl+"/service/page/scene?paged=1&pageSize=100", data ,function(res){
|
||
|
|
if(isOk(res)){
|
||
|
|
var dt = res.data.data ;
|
||
|
|
app.sceneData = dt ;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
lokdetailInfo(obj){
|
||
|
|
layer.open({
|
||
|
|
type: 2,
|
||
|
|
title: '摄像头详情',
|
||
|
|
shadeClose: true,
|
||
|
|
shade: 0.4,
|
||
|
|
area: ['95%', '753px'],
|
||
|
|
content: baseurl + "/service/iot/video?id="+ obj.id +"&sid=" + obj.scene_id
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
// 项目信息初始化
|
||
|
|
this.initSceneData({});
|
||
|
|
// 摄像头查询
|
||
|
|
this.initVideoInfo( {} , 1 ) ;
|
||
|
|
// 定时任务
|
||
|
|
setInterval(function() {
|
||
|
|
app.initVideoInfo( app.searchContion , app.pageform.page ) ;
|
||
|
|
}, 6000);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|