<template>
|
<div class="event-data">
|
<div class="title">点位变更查询</div>
|
<!-- <hr /> -->
|
<div class="cluster">
|
<el-date-picker
|
v-model="searchTime"
|
@change="findCamList"
|
type="daterange"
|
size="mini"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
></el-date-picker>
|
<el-button type="primary" size="mini" @click="findCamList">查询</el-button>
|
</div>
|
<div class="table-area">
|
<el-table :header-cell-style="{ background: '#f0f3f5' }" :data="dataList">
|
<el-table-column label="序号" type="index" width="100"> </el-table-column>
|
<el-table-column label="变更日期" prop="createTime"></el-table-column>
|
<el-table-column label="设备名称" prop="cameraName"></el-table-column>
|
<el-table-column label="设备通道号" prop="indexCode"></el-table-column>
|
</el-table>
|
</div>
|
<div>
|
<el-pagination
|
@current-change="refrash"
|
@size-change="handleSizeChange"
|
:current-page="page"
|
:page-size="size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page-sizes="[5, 10, 15, 20, 25]"
|
:total="total"
|
background
|
></el-pagination>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { getInvalidCamList } from "@/api/hik"
|
export default {
|
name: "invalidCameraList",
|
data() {
|
return {
|
page: 1,
|
size: 10, //分页相关
|
total: 0, //总数,
|
dataList: [],
|
searchTime: [
|
this.$moment()
|
.subtract(6, "days")
|
.format("YYYY-MM-DD"),
|
this.$moment().format("YYYY-MM-DD")
|
]
|
}
|
},
|
mounted() {
|
this.findCamList()
|
},
|
methods: {
|
findCamList() {
|
getInvalidCamList({
|
page: this.page,
|
size: this.size,
|
startTime: this.searchTime[0],
|
endTime: this.searchTime[1]
|
})
|
.then((res) => {
|
if (res.success) {
|
this.dataList = res.data.list
|
this.total = res.data.total
|
} else {
|
this.$notify.error("加载列表失败")
|
}
|
})
|
.catch((e) => {
|
this.$notify.error(e.msg)
|
})
|
},
|
//分页功能
|
handleSizeChange(size) {
|
this.size = size
|
this.findCamList()
|
},
|
//分页功能
|
refrash(page) {
|
this.page = page
|
this.findCamList()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.event-data {
|
padding: 20px;
|
width: 1280px;
|
min-height: 800px;
|
background-color: #fff;
|
margin: 0 auto;
|
margin-top: 20px;
|
.title {
|
margin-bottom: 20px;
|
height: 20px;
|
font-weight: 700;
|
color: #000;
|
padding: 20px 0 30px 0;
|
font-weight: normal;
|
border-bottom: 1px solid #e9ebee;
|
}
|
.cluster {
|
padding-top: 30px;
|
}
|
.cluster {
|
.el-select {
|
width: 230px;
|
height: 40px;
|
line-height: 40px;
|
}
|
.el-button {
|
margin-left: 30px;
|
}
|
}
|
.table-area {
|
padding-top: 30px;
|
}
|
.el-pagination ::v-deep {
|
margin-top: 30px;
|
text-align: right;
|
height: 24px;
|
.el-pagination__sizes {
|
margin-right: 0;
|
}
|
|
button {
|
margin: 0;
|
background-color: #fff;
|
border: 1px solid #c0c5cc;
|
border-radius: 2px;
|
}
|
|
.number {
|
background-color: #fff;
|
|
&:not(.disabled):hover {
|
color: #0065ff;
|
}
|
|
&:not(.disabled).active {
|
background-color: #0065ff;
|
color: #fff;
|
}
|
}
|
|
.el-input .el-input__inner {
|
padding-left: 0;
|
|
&:hover,
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
|
.el-pagination__jump {
|
margin-left: 12px;
|
.el-pagination__editor {
|
width: 37px;
|
input {
|
width: 32px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
