告警视频路由配置，页面构建！
张鑫
5 years ago
parent
a327c651be
commit
3284f478ea
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="alarm bg-white">
|
||||
<div class="ant-advanced-search-form">
|
||||
<a-form layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol" :form="queryParam">
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="8">
|
||||
<a-form-item class="ageInput" label="时间">
|
||||
<a-range-picker @change="onTimeChange" v-model="queryParam.time">
|
||||
<a-icon slot="suffixIcon" type="calendar" />
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="16" style="text-align: right">
|
||||
<a-button type="primary" @click="handleSearch">搜索</a-button>
|
||||
<!-- <a-button style="margin-left: 8px" @click="reset">重置</a-button>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:row-key="record => record.id"
|
||||
:data-source="data"
|
||||
:pagination="pagination"
|
||||
@change="handleGetHistoryList"
|
||||
>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "historyMonitoring",
|
||||
components: {
|
||||
// videoPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 18 },
|
||||
queryParam: {},
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
data: [],
|
||||
pagination:{
|
||||
total:0,
|
||||
defaultPageSize:10, // 默认每页显示数量
|
||||
showTotal: total => `共 ${total} 条数据`, // 显示总数
|
||||
showSizeChanger:true, // 显示可改变每页数量
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
|
||||
},
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: "时间",
|
||||
dataIndex: "time",
|
||||
},
|
||||
{
|
||||
title: "球机所属巷道 ",
|
||||
dataIndex: "pic",
|
||||
},
|
||||
{
|
||||
title: "视频时长",
|
||||
dataIndex: "mediaTime",
|
||||
},
|
||||
{
|
||||
title: "球机1",
|
||||
dataIndex: "camera1",
|
||||
},
|
||||
{
|
||||
title: "球机2",
|
||||
dataIndex: "camera2",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.handleGetHistoryList()
|
||||
},
|
||||
methods: {
|
||||
handleSearch(){
|
||||
delete this.queryParam.time
|
||||
console.log(this.queryParam)
|
||||
if(this.queryParam.con_code || this.queryParam.start_time && this.queryParam.end_time ){
|
||||
this.handleGetHistoryList()
|
||||
}else{
|
||||
this.$message.error('请输入搜索条件')
|
||||
}
|
||||
},
|
||||
handleGetHistoryList(pagination) {
|
||||
console.log(pagination)
|
||||
if(pagination){
|
||||
this.pagination.current = pagination.current;
|
||||
this.pagination.pageSize = pagination.pageSize;
|
||||
this.pageNum = pagination.current;
|
||||
this.pageSize = pagination.pageSize;
|
||||
}
|
||||
this.request();
|
||||
},
|
||||
request() {
|
||||
// this.$api.httpApi.queryList({
|
||||
// data: {
|
||||
// pageNum:this.pageNum,
|
||||
// pageSize:this.pageSize,
|
||||
// ...this.queryParam
|
||||
// }
|
||||
// }).then(res => {
|
||||
// console.log(res)
|
||||
// }).catch(err => {
|
||||
//
|
||||
// });
|
||||
},
|
||||
onTimeChange(date, dateString) {
|
||||
console.log(date)
|
||||
console.log(date[0].format('X'))
|
||||
this.queryParam.start_time = date[0].format('X')
|
||||
this.queryParam.end_time = date[1].format('X')
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.alarm {
|
||||
padding: 24px;
|
||||
}
|
||||
.ant-drawer-content-wrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
text-align: center;
|
||||
}
|
||||
.ant-advanced-search-form .ant-form-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue