<script setup name="LogManage">
|
import { ref, onMounted } from 'vue';
|
import { getLockLog } from "@/api/loginfo";
|
import { getLinfById } from '@/api/lockManager.js';
|
import { getUinfById } from '@/api/user';
|
import {
|
Search
|
} from '@element-plus/icons-vue';
|
|
import useElement from "@/hooks/useElement.js";
|
const { $loading, $message, $confirm } = useElement();
|
const tableData = ref([]);
|
const ctlUname = ref('');
|
const ctlResult = ref('');
|
const startTime = ref('');
|
const endTime = ref('');
|
const lockId = ref('');
|
const ctlType = ref('');
|
const pageNum = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
const currentAreaId = ref();
|
|
const lockList = ref([]);
|
|
const userList = ref([]);
|
const logList = ref([]);
|
// 操作类型[1-清空所有授权ID卡 2-远程开锁 3-远程重启 4-设置锁具地址 5-添加授权ID 6-移除授权ID 7-蓝牙开锁 8-ID开锁]
|
const ctlTypeList = [
|
'',
|
'清空所有授权ID卡',
|
'远程开锁',
|
'远程重启',
|
'设置锁具地址',
|
'添加授权ID',
|
'移除授权ID',
|
'蓝牙开锁',
|
'ID开锁'
|
];
|
|
function itemClickHandler(item) {
|
console.log(item, '====item', item.data);
|
// areaId lockName lockState lockType pageNum pageSize
|
currentAreaId.value = item.data.id;
|
ctlUname.value = '';
|
lockId.value = '';
|
getUsers();
|
getLockList();
|
getList();
|
}
|
|
async function getLockList() {
|
let res = await getLinfById(currentAreaId.value);
|
let { code, data, data2 } = res;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
}
|
lockList.value = _list;
|
}
|
|
async function getList() {
|
let params = {
|
areaId: currentAreaId.value,
|
ctlUname: ctlUname.value || undefined,
|
ctlResult: ctlResult.value || undefined,
|
startTime: startTime.value || undefined,
|
endTime: endTime.value || undefined,
|
ctlType: ctlType.value || undefined,
|
lockId: lockId.value || undefined
|
|
};
|
let res = await getLockLog(pageNum.value, pageSize.value, params);
|
let { code, data, data2 } = res;
|
let _total = 0;
|
let _list = [];
|
if (code && data) {
|
let { list, total } = data2;
|
_total = total;
|
_list = list.map(v => ({
|
...v,
|
ctlResultStr: v.ctlResult ? '成功' : '失败',
|
ctlTypeStr: ctlTypeList[v.ctlType] || '未知',
|
openTypeStr: [2, 7, 8].includes(v.ctlType) ? ctlTypeList[v.ctlType] : '--',
|
}));
|
}
|
total.value = _total;
|
logList.value = _list;
|
}
|
|
async function getUsers() {
|
let res = await getUinfById(currentAreaId.value);
|
let { code, data, data2 } = res;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
}
|
userList.value = _list;
|
}
|
|
function handleSizeChange(params) {
|
pageSize.value = params
|
getList();
|
}
|
|
function handleCurrentChange(params) {
|
pageNum.value = params
|
getList();
|
}
|
|
onMounted(() => {
|
|
});
|
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-header">
|
<div class="hdw-card-container">
|
<hdw-card title="区域列表" is-full>
|
<hdw-tree @item-click="itemClickHandler"></hdw-tree>
|
</hdw-card>
|
</div>
|
</div>
|
<div class="page-content">
|
<hdw-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-tools">
|
<div class="tools-filter">
|
<div class="tools-filter-item">
|
<div class="filter-label">操作人</div>
|
<div class="filter-content">
|
<el-select v-model="ctlUname" clearable placeholder="请选择" size="small" filterable style="width: 180px"
|
@change="getList">
|
<el-option v-for="(item, idx) in userList" size="small" :key="'user_' + idx" :label="item"
|
:value="item" />
|
</el-select>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">操作时间</div>
|
<div class="filter-content">
|
<el-date-picker v-model="startTime" @change="getList" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
|
size="small" placeholder="" />至<el-date-picker v-model="endTime" type="datetime"
|
value-format="YYYY-MM-DD HH:mm:ss" size="small" @change="getList" placeholder="" />
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">操作类型</div>
|
<div class="filter-content">
|
<el-select v-model="ctlType" @change="getList" placeholder="请选择" size="small" style="width: 180px">
|
<el-option v-for="(item, idx) in ctlTypeList" :key="'type_' + idx" :label="item || '全部'"
|
:value="idx" />
|
</el-select>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">锁具</div>
|
<div class="filter-content">
|
<el-select v-model="lockId" @change="getList" clearable filterable placeholder="请选择" size="small"
|
style="width: 180px">
|
<el-option v-for="item in lockList" :key="'lock_' + item.lockId" :label="item.lockName"
|
:value="item.lockId" />
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<el-button type="primary" size="small" :icon="Search" @click="getList">查询</el-button>
|
</div>
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table :data="logList" border style="width: 100%; height: 100%">
|
<el-table-column type="index" width="50" />
|
<!-- <el-table-column prop="areaName" align="center" label="区域名称" width="180" /> -->
|
<el-table-column prop="ctlUname" align="center" label="操作人" width="120" />
|
<!-- <el-table-column prop="keyName" align="center" label="钥匙名称" width="120" /> -->
|
<el-table-column prop="lockName" align="center" label="锁具名称" min-width="180" />
|
<el-table-column prop="ctlTypeStr" align="center" label="操作类型" width="180" />
|
<el-table-column prop="ctlResultStr" align="center" width="120" label="状态" />
|
<el-table-column prop="openTypeStr" align="center" label="开锁方式" width="120" />
|
<el-table-column prop="ctlTime" align="center" label="操作时间" width="180" />
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool"></div>
|
<div class="el-page-container">
|
<el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
|
:page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]" size="small"
|
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
|
@current-change="handleCurrentChange" />
|
</div>
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</hdw-card>
|
</div>
|
<div class="page-footer"></div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.page-content-tools {
|
padding-bottom: 8px;
|
}
|
|
.page-content-table {
|
flex: 1;
|
margin-left: -8px;
|
margin-right: -8px;
|
}
|
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.hdw-card-container {
|
width: 240px;
|
padding-right: 8px;
|
height: 100%;
|
}
|
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.tools-filter {
|
display: inline-block;
|
font-size: 14px;
|
|
.tools-filter-item {
|
display: inline-block;
|
margin-right: 8px;
|
|
.filter-label {
|
display: inline-block;
|
|
&::after {
|
content: ":";
|
}
|
}
|
|
.filter-content {
|
display: inline-block;
|
}
|
}
|
}
|
</style>
|
