Commit 8cc4d81a authored by 11528's avatar 11528

操作日志,服务器,网络设备初页面编写

parent e844981e
<template>
</template>
<script>
export default {
name: 'NetworkEquipment'
}
</script>
<style scoped>
</style>
<template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtn" @click="handleAdd">添加</el-button>
<el-button class="headBtn" @click="handleUpdate">编辑</el-button>
<el-button class="headBtn" @click="deleteRow">删除</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="warnBody">
<span style="font-size:24px;margin-right: 10px ">操作日志查询</span>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="用户名" prop="userName" show-overflow-tooltip />
<el-table-column label="操作类型" prop="operationType" show-overflow-tooltip />
<el-table-column label="操作状态" prop="operationStatus" show-overflow-tooltip />
<el-table-column label="操作时间" prop="operationTime" show-overflow-tooltip />
<el-table-column label="备注" prop="remarks" show-overflow-tooltip />\
</el-table>
</div>
<el-dialog class="addGroup" width="50%" title="添加日志" :visible.sync="addDialog">
<el-form ref="addWarnForm" label-width="auto" :model="updateWarnForm">
<el-form-item label="名称:">
<el-input v-model="updateWarnForm.name" />
</el-form-item>
<el-form-item label="每页条数:">
<el-input v-model="updateWarnForm.articlesNumber" />
<el-button size="small" class="mouse" @click="delRow">
<a-icon type="minus" />
</el-button>
<el-button size="small" class="mouse" @click="addRow">
<a-icon type="plus" />
</el-button>
</el-form-item>
<el-form-item label="时间:">
<el-button-group style="margin-right: 10px">
<el-button>今天</el-button>
<el-button>昨天</el-button>
<el-button>三天</el-button>
<el-button>一周</el-button>
<el-button @click="changeTime">自定义时间</el-button>
</el-button-group>
</el-form-item>
<el-form-item label="操作人:">
<el-input v-model="updateWarnForm.userName" />
</el-form-item>
<el-form-item label="操作类型:">
<el-input v-model="updateWarnForm.operationType" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog">确定</el-button>
<el-button @click="closeDialog">取消</el-button>
</span>
</el-dialog>
<el-dialog class="addGroup" width="50%" title="编辑日志" :visible.sync="updateDialog">
<el-form ref="addWarnForm" label-width="auto" :model="updateWarnForm">
<el-form-item label="名称:">
<el-input v-model="updateWarnForm.name" />
</el-form-item>
<el-form-item label="每页条数:">
<el-input v-model="updateWarnForm.articlesNumber" />
</el-form-item>
<el-form-item label="时间:">
<el-input v-model="updateWarnForm.operationTime" />
</el-form-item>
<el-form-item label="操作人:">
<el-input v-model="updateWarnForm.userName" />
</el-form-item>
<el-form-item label="操作类型:">
<el-input v-model="updateWarnForm.operationType" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeUpdateDialog">确定</el-button>
<el-button @click="closeUpdateDialog">取消</el-button>
</span>
</el-dialog>
<el-dialog :visible.sync="open" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'OperationLog',
data() {
return {
data: [],
stepActive: 1,
updateWarnForm: {
name: '',
articlesNumber: '',
operationTime: '',
userName: '',
operationType: ''
},
addWarnForm: {
name: '',
articlesNumber: '',
operationTime: '',
userName: '',
operationType: ''
},
addDialog: false,
updateDialog: false,
// 是否显示弹出层
open: false,
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
tableData: [
{ userName: 'admin', operationType: '用户登录', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=admin' },
{ userName: 'admin1', operationType: '用户登录', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=admin1' },
{ userName: 'admin', operationType: '用户登录', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=admin' },
{ userName: 'test', operationType: '用户注销', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=test' },
{ userName: 'admin1', operationType: '用户登录', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=admin1' },
{ userName: 'test', operationType: '用户注销', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=test' },
{ userName: 'admin1', operationType: '用户登录', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=admin1' },
{ userName: 'admin', operationType: '用户注销', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=admin' },
{ userName: 'admin', operationType: '用户登录', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=admin' },
{ userName: 'admin', operationType: '用户注销', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=admin' }
]
}
},
created() {
},
mounted() {
if (this.$route.query.type === '1') {
this.addWarnDialog = true
}
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
handleUpdate() {
this.updateDialog = true
},
closeUpdateDialog() {
this.updateDialog = false
},
handleAdd() {
this.addDialog = true
},
closeDialog() {
this.addDialog = false
},
addWarn() {
this.addWarnDialog = true
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
delRow() {
return this.updateWarnForm.articlesNumber++
},
addRow() {
return this.updateWarnForm.articlesNumber === 0 || this.updateWarnForm.articlesNumber === null ? 0 : this.updateWarnForm.articlesNumber--
},
deleteRow() {
this.$confirm('此操作将删除本页数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
}
}
}
</script>
<style lang="scss" scoped>
.warnModule{
.strategyRow{
padding: 5px 0;
}
.el-input__inner{
padding: 0 0 0 9px;
}
.treebody{
border: solid 1px #d7d7d7;
font-size: 12px;
padding: 6px;
height: 250px;
overflow-y: scroll;
}
.ninthSteps{
padding: 10px 30px 30px;
.el-steps--simple{
padding-left: 10px;
padding-right: 10px;
}
.el-step.is-simple:not(:last-of-type) .el-step__title{
max-width: 73%;
}
}
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.warnBody{
padding: 15px;
}
}
.addWarnClass{
.StepTitle{
font-size: 16px;
font-weight: bold;
color: #333333;
}
}
.mouse {
cursor: pointer;
}
</style>
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment