<template>
|
<div class="op-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 opt-active"
|
@click="openDialog"
|
>
|
选择摄像机
|
</div>
|
</div>
|
</div>
|
<div class="search">
|
<el-input
|
placeholder="搜索"
|
v-model="procName"
|
size="small"
|
class="input-with-select"
|
>
|
<el-button slot="append" icon="el-icon-search" @click="getScheduleLog"></el-button>
|
</el-input>
|
</div>
|
</div>
|
<div class="second">
|
<span>日期时间：</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="结束日期">
|
</el-date-picker>
|
</div>
|
</div>
|
<div class="table">
|
<el-table
|
class="tableBox"
|
ref="multipleTable"
|
highlight-current-row
|
:data="tableData"
|
style="width: 100%"
|
:header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column :align="'center'" label="序号" type="index" width="50">
|
</el-table-column>
|
<el-table-column
|
:align="'center'"
|
sortable
|
min-width="100px"
|
prop="add_time"
|
label="轮询开始时间"
|
></el-table-column>
|
<el-table-column
|
:align="'center'"
|
sortable
|
min-width="100px"
|
prop="add_time"
|
label="轮询结束时间"
|
></el-table-column>
|
<el-table-column
|
:align="'center'"
|
sortable
|
prop="module"
|
label="摄像机"
|
></el-table-column>
|
<el-table-column
|
:align="'center'"
|
prop="procName"
|
label="轮询时长（分）"
|
></el-table-column>
|
</el-table>
|
</div>
|
|
<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 @click="dialogVisible = false">全部取消</el-button>
|
<el-button @click="dialogVisible = false">全选</el-button>
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="confirmCamera">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import { deleteDate } from "@/api/system";
|
import { getLocalCameraTree } from "@/api/area";
|
|
|
import { queryOperationLog, getOperations, getModules,queryScheduleLog } from "@/api/log";
|
|
function pad0(i) {
|
if (i >= 0 && i <= 9) {
|
return "0" + i;
|
} else {
|
return i;
|
}
|
}
|
export default {
|
data() {
|
return {
|
loading: false,
|
loadingText: "",
|
input3: "",
|
tableData: [],
|
moduleOptions: [],
|
gongnengOptions: [],
|
dateRange: [],
|
cameraTree:[],
|
resultOptions: [
|
{
|
value: "",
|
label: "全部",
|
},
|
{
|
value: "成功",
|
label: "成功",
|
},
|
{
|
value: "失败",
|
label: "失败",
|
},
|
],
|
props: {
|
label: 'name'
|
},
|
value: "",
|
page: 1,
|
pageSize: 15,
|
activeDateChoise: 0,
|
gongneng: "",
|
result: "",
|
curModule: "",
|
timeStart: "",
|
timeEnd: "",
|
fuzzySearch: "",
|
total:0,dialogVisible: false,
|
procID: "",
|
procName: "",
|
};
|
},
|
mounted() {
|
this.getTimeRange(24 * 60 * 60 * 1000);
|
this.getScheduleLog();
|
this.getOptions();
|
},
|
methods: {
|
confirmCamera(){
|
const selectedIDs= this.$refs.cameraTree.getCheckedKeys()
|
this.procID= selectedIDs.join(",")
|
this.getScheduleLog()
|
this.dialogVisible=false
|
},
|
openDialog(){
|
this.dialogVisible= true
|
getLocalCameraTree({
|
cameraName:"",
|
searchType:0
|
}).then((res) => {
|
this.cameraTree =res.data
|
})
|
},
|
gongnengChange(val) {},
|
moduleChange(val) {
|
this.getScheduleLog()
|
this.gongneng=""
|
getOperations({
|
module: this.curModule,
|
}).then((res) => {
|
this.gongnengOptions = res.data;
|
});
|
},
|
getOptions() {
|
getModules().then((res) => {
|
this.moduleOptions = res.data;
|
});
|
},
|
choseRange() {
|
|
this.getScheduleLog();
|
this.activeDateChoise = i;
|
},
|
getScheduleLog() {
|
const data= {
|
timeStart: this.timeStart,
|
timeEnd: this.timeEnd,
|
page: this.page,
|
pageSize: this.pageSize,
|
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]
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.op-log {
|
margin: 0 auto;
|
padding: 10px 8px 10px 5px;
|
|
background-color: rgba(248, 248, 248, 1);
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.top {
|
height: 100px;
|
background: #fff;
|
border-radius: 5px;
|
.first {
|
display: flex;
|
justify-content: space-between;
|
height: 45px;
|
padding: 0 20px;
|
.time-option {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
// padding-left: 20px;
|
.title {
|
margin-right: 20px;
|
}
|
.opts {
|
display: flex;
|
justify-content: space-between;
|
.opt {
|
width: fit-content;
|
height: 32px;
|
padding: 0 15px;
|
// background: aquamarine;
|
border-radius: 4px;
|
cursor: pointer;
|
margin-right: 20px;
|
line-height: 32px;
|
font-size: 14px;
|
}
|
.opt:hover {
|
background-color: rgba(61, 104, 225, 1);
|
color: #fff;
|
}
|
.opt-active {
|
color: #fff;
|
background-color: rgba(61, 104, 225, 1);
|
}
|
}
|
}
|
.search {
|
display: flex;
|
align-items: center;
|
}
|
}
|
.second {
|
display: flex;
|
margin: 10px 0; padding: 0 20px;
|
align-items: center;
|
font-size: 14px;
|
.bar {
|
display: flex;
|
align-items: baseline;
|
width: fit-content;
|
padding-left: 20px;
|
.name {
|
margin-right: 5px;
|
}
|
}
|
}
|
}
|
.table {
|
margin-top: 16px;
|
border-radius: 5px;
|
padding: 12px;
|
background-color: white;
|
.tableBox {
|
th {
|
padding: 0 !important;
|
height: 40px;
|
line-height: 40px;
|
}
|
td {
|
padding: 0 !important;
|
height: 34px;
|
line-height: 34px;
|
}
|
}
|
}
|
}
|
</style>
|
