<template>
|
<div class="polling-log" v-loading="loading" :element-loading-text="loadingText">
|
<div class="top">
|
<div class="first">
|
<div class="time-option">
|
<div class="title">摄像机：</div>
|
<div class="opts">
|
<div class="opt" @click="openDialog">选择摄像机</div>
|
</div>
|
<div class="pick-num">已选 : ( {{ pickNum }} )</div>
|
</div>
|
<div class="search">
|
<el-input
|
placeholder="搜索"
|
v-model="fuzzySearch"
|
size="small"
|
class="input-with-select"
|
@keyup.enter.native="getScheduleLog(1)"
|
>
|
<span class="icon iconfont icon_clear" @click="clearSearch" slot="append" v-if="fuzzySearch">
|

|
</span>
|
<span class="icon iconfont icon_search" @click="getScheduleLog(1)" slot="append">
|

|
</span>
|
|
<!-- <el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="getOperationLog(1)"
|
></el-button> -->
|
</el-input>
|
</div>
|
</div>
|
<div class="second">
|
<span class="title">日期时间：</span>
|
<el-date-picker
|
v-model="dateRange"
|
size="small"
|
type="datetimerange"
|
range-separator="到"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
start-placeholder="开始日期"
|
@change="dateChange"
|
end-placeholder="结束日期"
|
:picker-options="pickerOptions"
|
popper-class="pollingLog_timePicker"
|
>
|
</el-date-picker>
|
</div>
|
</div>
|
<div class="table">
|
<el-table
|
class="tableBox"
|
ref="multipleTable"
|
highlight-current-row
|
:data="tableData"
|
:header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
|
@selection-change="handleSelectionChange"
|
style="width: 100%"
|
border
|
>
|
<template slot="empty">
|
<img :src="png" class="empty_img" alt="" />
|
</template>
|
<el-table-column :align="'center'" label="序号" type="index" width="50"> </el-table-column>
|
<el-table-column
|
:align="'center'"
|
sortable
|
min-width="100px"
|
prop="schedule_start_time"
|
label="轮询开始时间"
|
></el-table-column>
|
<el-table-column
|
:align="'center'"
|
sortable
|
min-width="100px"
|
prop="schedule_end_time"
|
label="轮询结束时间"
|
></el-table-column>
|
<el-table-column :align="'center'" sortable prop="info" label="摄像机"></el-table-column>
|
<el-table-column :align="'center'" prop="minute" label="轮询时长（分）"></el-table-column>
|
</el-table>
|
</div>
|
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[15, 30, 50, 100]"
|
:page-size="15"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
>
|
</el-pagination>
|
|
<el-dialog title="选择摄像机" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
|
<el-tree
|
ref="cameraTree"
|
:data="cameraTree"
|
:props="props"
|
node-key="id"
|
show-checkbox
|
check-on-click-node
|
default-expand-all
|
></el-tree>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button size="small" @click="pickAllNot">取消全选</el-button>
|
<el-button @click="pickAllCam" size="small">全选</el-button>
|
<el-button size="small" @click="cancelShow">取消</el-button>
|
<el-button size="small" type="primary" @click="confirmCamera">确定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { pad0 } from "@/api/utils"
|
import { getLocalCameraTree } from "@/api/area"
|
import { getOperations, getModules, queryScheduleLog } from "@/api/log"
|
|
export default {
|
data() {
|
return {
|
png: require("../../../../public/images/syslog/没数据.png"),
|
loading: false,
|
loadingText: "",
|
tableData: [],
|
moduleOptions: [],
|
gongnengOptions: [],
|
dateRange: [],
|
cameraTree: [],
|
props: {
|
label: "name"
|
},
|
value: "",
|
page: 1,
|
pageSize: 15,
|
activeDateChoise: 0,
|
gongneng: "",
|
curModule: "",
|
timeStart: "",
|
timeEnd: "",
|
fuzzySearch: "",
|
total: 0,
|
dialogVisible: false,
|
procID: "",
|
procName: "",
|
pickNum: 0,
|
pickerOptions: {
|
shortcuts: [
|
{
|
text: "最近一周",
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit("pick", [start, end])
|
}
|
},
|
{
|
text: "最近一个月",
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
picker.$emit("pick", [start, end])
|
}
|
},
|
{
|
text: "最近三个月",
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
picker.$emit("pick", [start, end])
|
}
|
}
|
]
|
}
|
}
|
},
|
mounted() {
|
this.getTimeRange(24 * 60 * 60 * 1000 * 30)
|
this.getScheduleLog()
|
this.getOptions()
|
},
|
methods: {
|
handleSizeChange(val) {
|
this.pageSize = val
|
this.getScheduleLog()
|
},
|
handleCurrentChange(val) {
|
this.page = val
|
this.getScheduleLog()
|
},
|
cancelShow() {
|
this.dialogVisible = false
|
this.pickAllNot()
|
},
|
pickAllCam() {
|
this.$refs.cameraTree.setCheckedNodes(this.cameraTree)
|
},
|
pickAllNot() {
|
this.$refs.cameraTree.setCheckedKeys([])
|
},
|
confirmCamera() {
|
const selectedIDs = this.$refs.cameraTree.getCheckedKeys()
|
this.pickNum = selectedIDs.length
|
this.procID = selectedIDs.join(",")
|
this.getScheduleLog()
|
this.dialogVisible = false
|
},
|
openDialog() {
|
this.dialogVisible = true
|
getLocalCameraTree({
|
cameraName: "",
|
searchType: 0
|
}).then((res) => {
|
this.cameraTree = res.data
|
})
|
},
|
moduleChange(val) {
|
this.getScheduleLog()
|
this.gongneng = ""
|
getOperations({
|
module: this.curModule
|
}).then((res) => {
|
this.gongnengOptions = res.data
|
})
|
},
|
getOptions() {
|
getModules().then((res) => {
|
this.moduleOptions = res.data
|
})
|
},
|
getScheduleLog(typ) {
|
if (typ == 1) {
|
this.page = 1
|
}
|
|
const data = {
|
timeStart: this.timeStart,
|
timeEnd: this.timeEnd,
|
page: this.page,
|
pageSize: this.pageSize,
|
fuzzySearch: this.fuzzySearch,
|
procID: this.procID,
|
procName: this.procName
|
}
|
queryScheduleLog(data).then((res) => {
|
this.tableData = res.data.logs
|
this.total = res.data.total
|
})
|
},
|
dateChange(val) {
|
;[this.timeStart, this.timeEnd] = val
|
this.getScheduleLog()
|
},
|
getTimeStr(date) {
|
var month = pad0(date.getMonth() + 1) //月
|
var day = pad0(date.getDate()) //日
|
var hour = pad0(date.getHours()) //时
|
var minute = pad0(date.getMinutes()) //分
|
var second = pad0(date.getSeconds()) //秒
|
return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`
|
},
|
getTimeRange(gap) {
|
var date = new Date() //当前时间
|
var preDay = new Date(new Date().getTime() - gap)
|
this.timeStart = this.getTimeStr(preDay)
|
this.timeEnd = this.getTimeStr(date)
|
this.dateRange = [this.timeStart, this.timeEnd]
|
},
|
handleSelectionChange() {},
|
handleClose() {},
|
clearSearch() {
|
this.fuzzySearch = ""
|
this.getScheduleLog(1)
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.polling-log {
|
margin: 0 auto;
|
padding: 0px 8px 10px 5px;
|
border-top: 1px solid #e1e0e6;
|
background-color: rgba(242, 242, 247, 1);
|
width: 100%;
|
display: flex;
|
overflow: auto;
|
flex-direction: column;
|
.el-dialog {
|
width: 50%;
|
height: 60%;
|
}
|
.el-dialog__header {
|
padding: 5px;
|
font-size: 14px;
|
.el-dialog__title {
|
font-size: 16px;
|
}
|
.el-dialog__headerbtn {
|
top: 10px;
|
}
|
}
|
.el-dialog__body {
|
padding: 10px 20px;
|
height: calc(100% - 115px);
|
}
|
.el-tree {
|
height: 100%;
|
overflow: auto;
|
}
|
.el-dialog__footer {
|
padding: 10px 20px;
|
.el-button--mini,
|
.el-button--small {
|
font-size: 14px;
|
border-radius: 3px;
|
}
|
}
|
.top {
|
height: 132px;
|
background: #fff;
|
border-radius: 5px;
|
.first {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 45px;
|
padding: 20px 20px 0 20px;
|
.time-option {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.title,
|
.pick-num {
|
margin-right: 10px;
|
min-width: fit-content;
|
font-weight: bold;
|
font-size: 12px;
|
}
|
|
.opts {
|
display: flex;
|
justify-content: space-between;
|
.opt {
|
width: 100px;
|
height: 36px;
|
padding: 0 15px;
|
border-radius: 4px;
|
cursor: pointer;
|
margin-right: 20px;
|
line-height: 36px;
|
font-size: 12px;
|
font-weight: 700;
|
color: #fff;
|
background-color: #4e94ff;
|
}
|
}
|
}
|
.search {
|
width: 280px;
|
height: 36px;
|
display: flex;
|
align-items: center;
|
|
.input-with-select {
|
width: 100%;
|
height: 100%;
|
|
input {
|
height: 100%;
|
border-radius: 18px 0 0 18px;
|
border: 2px solid #f2f2f7;
|
border-right: none;
|
|
&:focus,
|
&:focus + .el-input-group__append {
|
border-color: #409eff;
|
}
|
}
|
|
.el-input-group__append {
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
background-color: #fff;
|
border: 2px solid #f2f2f7;
|
border-radius: 0 18px 18px 0;
|
border-left: none;
|
}
|
}
|
|
span {
|
cursor: pointer;
|
color: rgb(47, 45, 61);
|
font-weight: 700;
|
font-size: 19px;
|
}
|
}
|
}
|
.second {
|
display: flex;
|
align-items: center;
|
margin: 15px 0 20px 0;
|
padding: 0 20px;
|
.title {
|
margin-right: 10px;
|
min-width: fit-content;
|
font-weight: bold;
|
font-size: 12px;
|
}
|
.bar {
|
display: flex;
|
align-items: baseline;
|
width: fit-content;
|
margin-right: 30px;
|
min-width: 120px;
|
|
.name {
|
margin-right: 15px;
|
min-width: fit-content;
|
font-weight: bold;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
.table {
|
margin-top: 16px;
|
border-radius: 5px;
|
padding: 12px;
|
background-color: white;
|
|
.empty_img {
|
margin: 80px auto;
|
width: 164px;
|
}
|
|
.tableBox {
|
border: none;
|
&::before,
|
&::after {
|
display: none;
|
}
|
|
tr {
|
td:first-child {
|
border-radius: 4px 0 0 4px;
|
}
|
td:last-child {
|
border-radius: 0 4px 4px 0;
|
}
|
|
&.current-row td {
|
background-color: #4e94ff !important;
|
color: #fff;
|
}
|
&:hover td {
|
background-color: rgb(242, 242, 247);
|
}
|
}
|
th {
|
padding: 0 !important;
|
height: 40px;
|
line-height: 40px;
|
border-color: #fff !important;
|
border-right: 2px solid #fff;
|
border-radius: 4px;
|
font-size: 12px;
|
background: #f2f2f7;
|
}
|
td {
|
padding: 0 !important;
|
height: 34px;
|
line-height: 34px;
|
border: none;
|
font-size: 12px;
|
}
|
}
|
}
|
.el-pagination {
|
padding: 20px 5px;
|
height: 100%;
|
box-sizing: border-box;
|
background-color: white;
|
}
|
}
|
|
.pollingLog_timePicker {
|
width: 520px !important;
|
* {
|
font-size: 12px !important;
|
min-width: 0px !important;
|
}
|
|
.el-date-range-picker__time-header {
|
border: none;
|
}
|
|
.el-date-range-picker__content {
|
padding: 2px 9px;
|
}
|
|
.el-date-table th {
|
pad: 0 5px;
|
}
|
|
.el-picker-panel__shortcut {
|
padding-left: 20px;
|
padding-bottom: 10px;
|
}
|
|
.el-picker-panel__footer {
|
padding: 0 20px 10px 0;
|
background-color: none;
|
display: flex;
|
justify-content: end;
|
border: none;
|
button {
|
display: block;
|
width: 54px;
|
height: 24px;
|
border: 1px solid #e0e0e0;
|
border-radius: 25px;
|
line-height: 9px;
|
|
&:first-child {
|
color: #4f4f4f !important;
|
}
|
|
&:last-child {
|
color: #fff !important;
|
background-color: #4e94ff !important;
|
border-color: #4e94ff !important;
|
}
|
}
|
}
|
}
|
</style>
|
