<template>
|
<div class="push-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="activeDateChoise == i ? 'opt-active' : ''"
|
class="opt"
|
v-for="(item, i) in dateArr"
|
:key="i"
|
@click="choseRange(item, i)"
|
>
|
{{ item }}
|
</div>
|
</div>
|
</div>
|
<div class="search">
|
<el-input
|
placeholder="搜索"
|
v-model="fuzzySearch"
|
size="small"
|
class="input-with-select"
|
@keyup.enter.native="getOperationLog(1)"
|
>
|
<span
|
class="icon iconfont icon_clear"
|
@click="clearSearch"
|
slot="append"
|
v-if="fuzzySearch"
|
>
|

|
</span>
|
<span
|
class="icon iconfont icon_search"
|
@click="getOperationLog(1)"
|
slot="append"
|
v-else
|
>
|

|
</span>
|
|
<!-- <el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="getOperationLog(1)"
|
></el-button> -->
|
</el-input>
|
</div>
|
</div>
|
<div class="second">
|
<div class="bar">
|
<div class="name">状态：</div>
|
|
<el-select
|
v-model="level"
|
placeholder="请选择"
|
size="small"
|
@change="levelChange"
|
>
|
<el-option label="全部" :value="''"> </el-option>
|
<el-option
|
v-for="(item, i) in levelOptions"
|
:key="i"
|
:label="item.proc_name"
|
:value="item.proc_name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<div class="table">
|
<el-table
|
class="tableBox"
|
@cell-click="clickFaults"
|
ref="multipleTable"
|
:cell-style="styleFunc"
|
highlight-current-row
|
:data="tableData"
|
:header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
|
style="width: 100%"
|
v-if="!showSubTable"
|
border
|
>
|
<template slot="empty">
|
<img :src="png1" class="empty_img" alt="" />
|
</template>
|
<el-table-column :align="'center'" label="序号" type="index" width="50">
|
</el-table-column>
|
<el-table-column
|
:align="'center'"
|
sortable
|
prop="add_time"
|
label="状态"
|
></el-table-column>
|
<el-table-column
|
sortable
|
:align="'center'"
|
prop="userName"
|
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-column
|
:align="'center'"
|
sortable
|
prop="result"
|
label="成功总量"
|
></el-table-column>
|
<el-table-column
|
:align="'center'"
|
prop="msg"
|
label="失败总量"
|
></el-table-column>
|
</el-table>
|
|
<div class="back" v-if="showSubTable" @click="showSubTable = false">
|
<span class="icon iconfont"></span>
|
<span class="title" style="color: #4e94ff">事件推送日志</span>
|
</div>
|
<el-table
|
class="tableBox"
|
ref="multipleTable"
|
:cell-style="styleFunc"
|
highlight-current-row
|
:data="subTableData"
|
:header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
|
style="width: 100%"
|
v-if="showSubTable"
|
border
|
>
|
<template slot="empty">
|
<img :src="png2" class="empty_img2" alt="" />
|
</template>
|
<el-table-column :align="'center'" label="序号" type="index" width="50">
|
</el-table-column>
|
<el-table-column
|
:align="'center'"
|
sortable
|
prop="add_time"
|
label="推送时间"
|
></el-table-column>
|
<el-table-column
|
sortable
|
:align="'center'"
|
prop="userName"
|
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-column
|
:align="'center'"
|
sortable
|
prop="result"
|
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>
|
</div>
|
</template>
|
|
<script>
|
import { deleteDate } from "@/api/system";
|
import { pad0 } from "@/api/utils";
|
import { getModules } from "@/api/log";
|
|
export default {
|
data() {
|
return {
|
png1: "",
|
png2: require("../../../../public/images/syslog/没数据.png"),
|
loading: false,
|
loadingText: "",
|
showSubTable: false,
|
tableData: [
|
{ msg: 2, userName: "车辆识别" },
|
{ userName: "人脸识别", msg: 4 },
|
],
|
subTableData: [],
|
dateArr: ["今日", "近三天", "近七天", "近一个月", "近六个月"],
|
levelOptions: [],
|
hostNameOptions: [],
|
resultOptions: [
|
{
|
value: "",
|
label: "全部",
|
},
|
{
|
value: "成功",
|
label: "成功",
|
},
|
{
|
value: "失败",
|
label: "失败",
|
},
|
],
|
value: "",
|
page: 1,
|
pageSize: 15,
|
activeDateChoise: 0,
|
hostName: "",
|
result: "",
|
level: "",
|
timeStart: "",
|
timeEnd: "",
|
fuzzySearch: "",
|
total: 0,
|
};
|
},
|
mounted() {
|
this.getTimeRange(24 * 60 * 60 * 1000);
|
// this.getOperationLog();
|
this.getOptions();
|
},
|
methods: {
|
styleFunc({ row, column, rowIndex, columnIndex }) {
|
if (columnIndex == 6) {
|
return { cursor: "pointer" };
|
}
|
return {};
|
},
|
handleSizeChange(val) {
|
this.pageSize = val;
|
// this.getOperationLog();
|
},
|
handleCurrentChange(val) {
|
this.page = val;
|
// this.getOperationLog();
|
},
|
levelChange(val) {
|
// this.getOperationLog(1);
|
// this.hostName = "";
|
// getOperations({
|
// module: this.level,
|
// }).then((res) => {
|
// this.hostNameOptions = res.data;
|
// });
|
},
|
getOptions() {
|
getModules().then((res) => {
|
this.levelOptions = res.data;
|
this.png1 = require("../../../../public/images/syslog/没数据.png");
|
});
|
},
|
clickFaults(row, column, cell, event) {
|
this.showSubTable = true;
|
},
|
choseRange(item, i) {
|
switch (item) {
|
case "今日":
|
this.getTimeRange(24 * 60 * 60 * 1000);
|
break;
|
case "近三天":
|
this.getTimeRange(24 * 60 * 60 * 1000 * 3);
|
break;
|
case "近七天":
|
this.getTimeRange(24 * 60 * 60 * 1000 * 7);
|
break;
|
case "近一个月":
|
this.getTimeRange(24 * 60 * 60 * 1000 * 30);
|
break;
|
case "近六个月":
|
this.getTimeRange(24 * 60 * 60 * 1000 * 30 * 6);
|
break;
|
default:
|
break;
|
}
|
// this.getOperationLog(1);
|
this.activeDateChoise = i;
|
},
|
getOperationLog(typ) {
|
if (typ == 1) {
|
this.page = 1;
|
}
|
// queryOperationLog({
|
// timeStart: this.timeStart,
|
// timeEnd: this.timeEnd,
|
// page: this.page,
|
// pageSize: this.pageSize,
|
// module: this.level,
|
// function: this.hostName,
|
// result: this.result,
|
// fuzzySearch: this.fuzzySearch,
|
// }).then((res) => {
|
// this.tableData = res.data.logs;
|
// this.total = res.data.total;
|
// });
|
},
|
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);
|
},
|
clearSearch() {
|
this.fuzzySearch = "";
|
this.getOperationLog(1);
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.push-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;
|
flex-direction: column;
|
overflow: auto;
|
.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 {
|
margin-right: 10px;
|
min-width: fit-content;
|
font-weight: bold;
|
font-size: 12px;
|
}
|
.opts {
|
display: flex;
|
justify-content: space-between;
|
.opt {
|
box-sizing: border-box;
|
border: 2px solid #efeff6;
|
min-width: fit-content;
|
width: 100px;
|
height: 36px;
|
padding: 0 15px;
|
border-radius: 4px;
|
cursor: pointer;
|
margin-right: 2px;
|
line-height: 32px;
|
font-size: 12px;
|
color: #333;
|
}
|
.opt:hover {
|
border-color: #4e94ff;
|
}
|
.opt-active {
|
color: #fff;
|
background-color: #4e94ff;
|
border-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;
|
margin: 15px 0 20px 0;
|
padding: 0 20px;
|
.bar {
|
display: flex;
|
align-items: baseline;
|
width: fit-content;
|
margin-right: 30px;
|
min-width: 120px;
|
|
.el-select {
|
width: 200px;
|
height: 36px;
|
|
.el-input {
|
width: 100%;
|
height: 100%;
|
|
input {
|
width: 100%;
|
height: 100%;
|
border: 2px solid #f2f2f7;
|
border-radius: 20px;
|
}
|
}
|
}
|
.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;
|
}
|
.empty_img2 {
|
margin: 50px auto;
|
width: 164px;
|
}
|
.back {
|
display: flex;
|
align-items: center;
|
.icon {
|
cursor: pointer;
|
margin: 0 5px;
|
font-size: 18px;
|
}
|
.title {
|
cursor: pointer;
|
line-height: 30px;
|
font-size: 14px;
|
}
|
}
|
.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;
|
}
|
}
|
</style>
|
