Skip to content

I
IT-monitor
Commit a9813361 authored by 11528's avatar 11528
Browse files
Options

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

parent 8cc4d81a
Hide whitespace changes
Inline Side-by-side
Showing with 1322 additions and 88 deletions
src/views/IntegratedMonitor/reportStatistics/networkEquipment.vue
View file @ a9813361
<template> <template>
<div id="sylog-container" class="app-container-realTime">
<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="headBtn" @click="exportRow">导出报表</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<el-tabs v-model="currentTab" type="card">
<el-tab-pane label="设备运行报表" name="1">
<div style="padding: 10px 10px 10px 0">
<el-table
v-loading="loading"
border
:data="data"
:header-cell-style="{textAlign: 'center'}"
@selection-change="handleSelectionChange"
>
<el-table-column :show-overflow-tooltip="true" label="设备名称" align="center" prop="equipmentName">
<template slot-scope="scope">
{{ scope.row.equipmentName || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="可用性" align="center" prop="usability">
<template slot-scope="scope">
{{ scope.row.usability || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="服务器成功率（%）" align="center" prop="serverSuccessRate">
<template slot-scope="scope">
{{ scope.row.serverSuccessRate || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="平均响应时间（ms）" align="center" prop="averageResponseTime">
<template slot-scope="scope">
{{ scope.row.averageResponseTime || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="抖动（ms）" align="center" prop="shake">
<template slot-scope="scope">
{{ scope.row.shake || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="CPU（%）" align="center" prop="cpu">
<template slot-scope="scope">
{{ scope.row.cpu || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="内存（%）" align="center" prop="memory">
<template slot-scope="scope">
{{ scope.row.memory || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="设备运行时间" align="center" prop="runningTime">
<template slot-scope="scope">
{{ scope.row.runningTime || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="今日告警" align="center" prop="todayAlarm">
<template slot-scope="scope">
{{ scope.row.todayAlarm || '-' }}
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
</el-tab-pane>
<el-tab-pane label="接口流量报表" name="2">
<div style="padding: 10px 10px 10px 0">
<el-table
v-loading="loading"
border
:data="initialData"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column :show-overflow-tooltip="true" label="设备名称" align="center" prop="equipmentName">
<template slot-scope="scope">
<span @click="belongLayer(scope.$index,scope.row), dialogVisible=true">{{ scope.row.equipmentName || '-' }}</span>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="接口名称" align="center" prop="interfaceName">
<template slot-scope="scope">
{{ scope.row.interfaceName || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="操作状态" align="center" prop="operationStatus">
<template slot-scope="scope">
{{ scope.row.operationStatus || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="管理状态" align="center" prop="managementStatus">
<template slot-scope="scope">
{{ scope.row.managementStatus || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="入流量(Mbit/s)" align="center" prop="inRate">
<template slot-scope="scope">
{{ scope.row.inRate || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="出流量(Mbit/s)" align="center" prop="outRate">
<template slot-scope="scope">
{{ scope.row.outRate || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="入数据包(个/秒）" align="center" prop="inPacket">
<template slot-scope="scope">
{{ scope.row.inPacket || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="出数据包(个/秒）" align="center" prop="outPacket">
<template slot-scope="scope">
{{ scope.row.outPacket || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="入丢包率（%）" align="center" prop="inPacketLoss">
<template slot-scope="scope">
{{ scope.row.inPacketLoss || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="出丢包率（%）" align="center" prop="outPacketLoss">
<template slot-scope="scope">
{{ scope.row.outPacketLoss || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="入错包率（%）" align="center" prop="packetError">
<template slot-scope="scope">
{{ scope.row.packetError || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="出错包率（%）" align="center" prop="errorPacket">
<template slot-scope="scope">
{{ scope.row.errorPacket || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="广播包(包/秒)" align="center" prop="broadcastPacket">
<template slot-scope="scope">
{{ scope.row.broadcastPacket || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="入带宽占用（%）" align="center" prop="inBandwidth">
<template slot-scope="scope">
{{ scope.row.inBandwidth || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="出带宽占用（%）" align="center" prop="outBandwidth">
<template slot-scope="scope">
{{ scope.row.outBandwidth || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="带宽（M）" align="center" prop="bandwidth">
<template slot-scope="scope">
{{ scope.row.bandwidth || '-' }}
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
<el-dialog class="addGroup" width="50%" :title="dialogTitle" :visible.sync="addDialog">
<el-form ref="addWarnForm" label-width="auto" :model="addWarnForm">
<el-form-item label="名称:">
<el-input v-model="addWarnForm.name" />
</el-form-item>
<el-form-item label="每页显示报告条数:">
<el-input v-model="addWarnForm.articlesNumber" />
</el-form-item>
<el-form-item label="选择设备:">
<div class="equipmentDiv">
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps"
/>
</div>
</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>
</div>
</template> </template>
<script> <script>
import screenfull from 'screenfull'
export default { export default {
name: 'NetworkEquipment' name: 'NetworkEquipment',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 0,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 表单参数
isScreen: screenfull.isEnabled,
addWarnForm: {
name: '',
articlesNumber: '',
operationTime: '',
userName: '',
operationType: ''
},
defaultProps: {
children: 'children',
label: 'label'
},
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
isEdit: false,
addDialog: false,
updateDialog: false,
currentTab: '1',
dialogVisible: false,
data: [
{
equipmentName: '人脸验证服务器',
usability: '',
serverSuccessRate: '100',
averageResponseTime: '0.8',
shake: '1.25',
cpu: '0',
memory: '1.8',
runningTime: '-',
todayAlarm: '0'
},
{
equipmentName: '人脸验证服务器',
usability: '',
serverSuccessRate: '100',
averageResponseTime: '0.8',
shake: '1.25',
cpu: '0',
memory: '1.8',
runningTime: '-',
todayAlarm: '0'
},
{
equipmentName: '人脸验证服务器',
usability: '',
serverSuccessRate: '100',
averageResponseTime: '0.8',
shake: '1.25',
cpu: '0',
memory: '1.8',
runningTime: '-',
todayAlarm: '0'
},
{
equipmentName: '人脸验证服务器',
usability: '',
serverSuccessRate: '100',
averageResponseTime: '0.8',
shake: '1.25',
cpu: '0',
memory: '1.8',
runningTime: '-',
todayAlarm: '0'
},
{
equipmentName: '人脸验证服务器',
usability: '',
serverSuccessRate: '100',
averageResponseTime: '0.8',
shake: '1.25',
cpu: '0',
memory: '1.8',
runningTime: '-',
todayAlarm: '0'
},
{
equipmentName: '人脸验证服务器',
usability: '',
serverSuccessRate: '100',
averageResponseTime: '0.8',
shake: '1.25',
cpu: '0',
memory: '1.8',
runningTime: '-',
todayAlarm: '0'
},
{
equipmentName: '人脸验证服务器',
usability: '',
serverSuccessRate: '100',
averageResponseTime: '0.8',
shake: '1.25',
cpu: '0',
memory: '1.8',
runningTime: '-',
todayAlarm: '0'
},
{
equipmentName: '人脸验证服务器',
usability: '',
serverSuccessRate: '100',
averageResponseTime: '0.8',
shake: '1.25',
cpu: '0',
memory: '1.8',
runningTime: '-',
todayAlarm: '0'
},
{
equipmentName: '人脸验证服务器',
usability: '',
serverSuccessRate: '100',
averageResponseTime: '0.8',
shake: '1.25',
cpu: '0',
memory: '1.8',
runningTime: '-',
todayAlarm: '0'
},
{
equipmentName: '人脸验证服务器',
usability: '',
serverSuccessRate: '100',
averageResponseTime: '0.8',
shake: '1.25',
cpu: '0',
memory: '1.8',
runningTime: '-',
todayAlarm: '0'
}
],
initialData: [
{
equipmentName: '核心交换机',
interfaceName: 'Port-channel1',
operationStatus: '1',
managementStatus: '1',
inRate: '0.2',
outRate: '0.3',
inPacket: '178',
outPacket: '187',
inPacketLoss: '0',
outPacketLoss: '0',
packetError: '0',
errorPacket: '0',
broadcastPacket: '27',
inBandwidth: '0',
outBandwidth: '0',
bandwidth: '2000.00'
},
{
equipmentName: '核心交换机',
interfaceName: 'Port-channel1',
operationStatus: '1',
managementStatus: '1',
inRate: '0.2',
outRate: '0.3',
inPacket: '178',
outPacket: '187',
inPacketLoss: '0',
outPacketLoss: '0',
packetError: '0',
errorPacket: '0',
broadcastPacket: '27',
inBandwidth: '0',
outBandwidth: '0',
bandwidth: '2000.00'
},
{
equipmentName: '核心交换机',
interfaceName: 'Port-channel1',
operationStatus: '1',
managementStatus: '1',
inRate: '0.2',
outRate: '0.3',
inPacket: '178',
outPacket: '187',
inPacketLoss: '0',
outPacketLoss: '0',
packetError: '0',
errorPacket: '0',
broadcastPacket: '27',
inBandwidth: '0',
outBandwidth: '0',
bandwidth: '2000.00'
},
{
equipmentName: '核心交换机',
interfaceName: 'Port-channel1',
operationStatus: '1',
managementStatus: '1',
inRate: '0.2',
outRate: '0.3',
inPacket: '178',
outPacket: '187',
inPacketLoss: '0',
outPacketLoss: '0',
packetError: '0',
errorPacket: '0',
broadcastPacket: '27',
inBandwidth: '0',
outBandwidth: '0',
bandwidth: '2000.00'
},
{
equipmentName: '核心交换机',
interfaceName: 'Port-channel1',
operationStatus: '1',
managementStatus: '1',
inRate: '0.2',
outRate: '0.3',
inPacket: '178',
outPacket: '187',
inPacketLoss: '0',
outPacketLoss: '0',
packetError: '0',
errorPacket: '0',
broadcastPacket: '27',
inBandwidth: '0',
outBandwidth: '0',
bandwidth: '2000.00'
},
{
equipmentName: '核心交换机',
interfaceName: 'Port-channel1',
operationStatus: '1',
managementStatus: '1',
inRate: '0.2',
outRate: '0.3',
inPacket: '178',
outPacket: '187',
inPacketLoss: '0',
outPacketLoss: '0',
packetError: '0',
errorPacket: '0',
broadcastPacket: '27',
inBandwidth: '0',
outBandwidth: '0',
bandwidth: '2000.00'
},
{
equipmentName: '核心交换机',
interfaceName: 'Port-channel1',
operationStatus: '1',
managementStatus: '1',
inRate: '0.2',
outRate: '0.3',
inPacket: '178',
outPacket: '187',
inPacketLoss: '0',
outPacketLoss: '0',
packetError: '0',
errorPacket: '0',
broadcastPacket: '27',
inBandwidth: '0',
outBandwidth: '0',
bandwidth: '2000.00'
},
{
equipmentName: '核心交换机',
interfaceName: 'Port-channel1',
operationStatus: '1',
managementStatus: '1',
inRate: '0.2',
outRate: '0.3',
inPacket: '178',
outPacket: '187',
inPacketLoss: '0',
outPacketLoss: '0',
packetError: '0',
errorPacket: '0',
broadcastPacket: '27',
inBandwidth: '0',
outBandwidth: '0',
bandwidth: '2000.00'
},
{
equipmentName: '核心交换机',
interfaceName: 'Port-channel1',
operationStatus: '1',
managementStatus: '1',
inRate: '0.2',
outRate: '0.3',
inPacket: '178',
outPacket: '187',
inPacketLoss: '0',
outPacketLoss: '0',
packetError: '0',
errorPacket: '0',
broadcastPacket: '27',
inBandwidth: '0',
outBandwidth: '0',
bandwidth: '2000.00'
},
{
equipmentName: '核心交换机',
interfaceName: 'Port-channel1',
operationStatus: '1',
managementStatus: '1',
inRate: '0.2',
outRate: '0.3',
inPacket: '178',
outPacket: '187',
inPacketLoss: '0',
outPacketLoss: '0',
packetError: '0',
errorPacket: '0',
broadcastPacket: '27',
inBandwidth: '0',
outBandwidth: '0',
bandwidth: '2000.00'
}
],
treeData: [{
id: 1,
label: '本机容器',
children: [{
id: 4,
label: '虚拟化平台',
children: [{
id: 9,
label: '127.0.0.1'
}, {
id: 10,
label: '192.168.1.1'
}]
}, {
id: 5,
label: '虚拟设备',
children: [{
id: 9,
label: '192.168.5.4'
}, {
id: 10,
label: '192.168.44.2'
}]
}, {
id: 6,
label: '服务器硬件',
children: [{
id: 9,
label: '打印机'
}, {
id: 10,
label: '192.168.2.5'
}]
}]
}]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
computed: {
dialogTitle() {
return this.isEdit ? '编辑页面' : '添加页面'
}
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
handleUpdate() {
this.addDialog = true
this.isEdit = true
},
closeUpdateDialog() {
this.updateDialog = false
},
handleAdd() {
this.addDialog = true
this.isEdit = false
},
closeDialog() {
this.addDialog = false
},
addWarn() {
this.addWarnDialog = true
},
deleteRow() {
this.$confirm('此操作将删除本页数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
exportRow() {
this.$confirm('此操作将导出本页数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
} }
</script> </script>
<style lang="scss" scoped>
<style scoped> .app-container-realTime {
padding: 0 20px;
font-size: 18px;
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
.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;
}
}
}
}
.addGroup{
.equipmentDiv{
max-height: 150px;
height: 150px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
}
}
</style> </style>
src/views/IntegratedMonitor/reportStatistics/operationLog.vue
View file @ a9813361
...@@ -23,34 +23,55 @@ ...@@ -23,34 +23,55 @@
<el-table-column label="备注" prop="remarks" show-overflow-tooltip />\ <el-table-column label="备注" prop="remarks" show-overflow-tooltip />\
</el-table> </el-table>
</div> </div>
<el-dialog class="addGroup" width="50%" title="添加日志" :visible.sync="addDialog"> <el-dialog class="addGroup" width="50%" :title="dialogTitle" :visible.sync="addDialog">
<el-form ref="addWarnForm" label-width="auto" :model="updateWarnForm"> <el-form ref="addWarnForm" label-width="auto" :model="updateWarnForm">
<el-form-item label="名称:"> <el-form-item label="名称:">
<el-input v-model="updateWarnForm.name" /> <el-input v-model="updateWarnForm.name" />
</el-form-item> </el-form-item>
<el-form-item label="每页条数:"> <el-form-item label="每页条数:">
<el-input v-model="updateWarnForm.articlesNumber" /> <el-input-number v-model="updateWarnForm.articlesNumber" style="width: 100%;height: 30px" controls-position="right" :min="0" @change="handleChange" />
<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>
<el-form-item label="时间:"> <el-form-item label="时间:">
<el-button-group style="margin-right: 10px"> <div>
<el-button>今天</el-button> <el-radio-group v-model="radio" style="margin-right: 10px">
<el-button>昨天</el-button> <el-radio label="1">一天</el-radio>
<el-button>三天</el-button> <el-radio label="2">三天</el-radio>
<el-button>一周</el-button> <el-radio label="3">七天</el-radio>
<el-button @click="changeTime">自定义时间</el-button> <el-radio label="4" @change="changeTime">自定义时间</el-radio>
</el-button-group> </el-radio-group>
</div>
</el-form-item> </el-form-item>
<el-form-item label="操作人:"> <el-form-item label="操作人:">
<el-input v-model="updateWarnForm.userName" /> <div class="equipmentDiv">
<el-checkbox-group v-model="checkCity" @change="handleCheckedCitiesChange">
<el-checkbox
v-for="item in cityOptions "
:key="item"
:label="item.name"
style="display:block;margin-left: 30px"
/>
</el-checkbox-group>
</div>
<div style="margin-top: 5px">
<el-button v-model="checkAll" style="width: 30%" @click="checkName1">全选</el-button>
<el-button v-model="checkInvert" style="width: 30%" @click="checkName2">反选</el-button>
</div>
</el-form-item> </el-form-item>
<el-form-item label="操作类型:"> <el-form-item label="操作类型:">
<el-input v-model="updateWarnForm.operationType" /> <div class="equipmentDiv">
<el-checkbox-group v-model="checkCity1" @change="handleCheckedCitiesChange1">
<el-checkbox
v-for="item in cityOption1"
:key="item"
:label="item"
style="display:block;margin-left: 30px"
/>
</el-checkbox-group>
</div>
<div style="margin-top: 5px">
<el-button v-model="checkAll1" style="width: 30%" @click="checkName3">全选</el-button>
<el-button v-model="checkInvert1" style="width: 30%" @click="checkName4">反选</el-button>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -120,20 +141,21 @@ export default { ...@@ -120,20 +141,21 @@ export default {
stepActive: 1, stepActive: 1,
updateWarnForm: { updateWarnForm: {
name: '', name: '',
articlesNumber: '', articlesNumber: 0,
operationTime: '', operationTime: '',
userName: '', userName: '',
operationType: '' operationType: ''
}, },
addWarnForm: { addWarnForm: {
name: '', name: '',
articlesNumber: '', articlesNumber: 0,
operationTime: '', operationTime: '',
userName: '', userName: '',
operationType: '' operationType: ''
}, },
addDialog: false, addDialog: false,
updateDialog: false, updateDialog: false,
isEdit: false,
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
queryParams: { queryParams: {
...@@ -145,6 +167,22 @@ export default { ...@@ -145,6 +167,22 @@ export default {
ipAddress: '', ipAddress: '',
logContent: '' logContent: ''
}, },
radio: 0,
checkCity: [],
checkAll: false,
checkInvert: false,
checkCity1: [],
checkAll1: false,
checkInvert1: false,
cityOptions: [
{ name: '管理员' },
{ name: 'admin' },
{ name: '张三' },
{ name: 'admin1' }
],
name: [],
name1: [],
cityOption1: ['TS删除', 'TS添加', 'TS编辑', '用户删除', '用户注销登陆', '用户添加', '用户登陆'],
tableData: [ 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: '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: 'admin1', operationType: '用户登录', operationStatus: '成功', operationTime: '2022-05-19 10:12:14', remarks: 'host=218.94.141.34,port=49986,id=user_1,name=admin1' },
...@@ -159,6 +197,11 @@ export default { ...@@ -159,6 +197,11 @@ export default {
] ]
} }
}, },
computed: {
dialogTitle() {
return this.isEdit ? '编辑日志' : '添加日志'
}
},
created() { created() {
}, },
mounted() { mounted() {
...@@ -180,12 +223,14 @@ export default { ...@@ -180,12 +223,14 @@ export default {
window.location.reload() // 刷新页面 window.location.reload() // 刷新页面
}, },
handleUpdate() { handleUpdate() {
this.updateDialog = true this.isEdit = true
this.addDialog = true
}, },
closeUpdateDialog() { closeUpdateDialog() {
this.updateDialog = false this.updateDialog = false
}, },
handleAdd() { handleAdd() {
this.isEdit = false
this.addDialog = true this.addDialog = true
}, },
closeDialog() { closeDialog() {
...@@ -198,11 +243,45 @@ export default { ...@@ -198,11 +243,45 @@ export default {
changeTime() { changeTime() {
this.open = !this.open this.open = !this.open
}, },
delRow() { handleChange() {
return this.updateWarnForm.articlesNumber++ },
checkName1(val) {
this.name = []
for (let i = 0; i < this.cityOptions.length; i++) {
this.name[i] = this.cityOptions[i].name
}
this.checkCity = val ? this.name : []
},
handleCheckedCitiesChange(value) {
this.checkCity = value
const checkedCount = value.length
this.checkAll = checkedCount !== 0 && checkedCount === this.name.length
},
checkName2(value) {
const c = []
this.cityOptions.forEach(item => {
!this.checkCity.includes(item.name) && c.push(item.name)
})
this.checkCity = c
},
handleCheckedCitiesChange1(value) {
this.checkCity1 = value
const checkedCount = value.length
this.checkAll1 = checkedCount !== 0 && checkedCount === this.name.length
},
checkName3(val) {
this.name1 = []
for (let i = 0; i < this.cityOption1.length; i++) {
this.name1[i] = this.cityOption1[i]
}
this.checkCity1 = val ? this.name1 : []
}, },
addRow() { checkName4() {
return this.updateWarnForm.articlesNumber === 0 || this.updateWarnForm.articlesNumber === null ? 0 : this.updateWarnForm.articlesNumber-- const d = []
this.cityOption1.forEach(item => {
!this.checkCity1.includes(item) && d.push(item)
})
this.checkCity1 = d
}, },
deleteRow() { deleteRow() {
this.$confirm('此操作将删除本页数据, 是否继续?', '提示', { this.$confirm('此操作将删除本页数据, 是否继续?', '提示', {
...@@ -276,4 +355,18 @@ export default { ...@@ -276,4 +355,18 @@ export default {
.mouse { .mouse {
cursor: pointer; cursor: pointer;
} }
.addGroup{
.equipmentDiv{
max-height: 150px;
height: 150px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
.el-checkbox__inner {
border: none;
width: 0;
}
}
}
</style> </style>
src/views/IntegratedMonitor/reportStatistics/theServer.vue
View file @ a9813361
...@@ -27,34 +27,25 @@ ...@@ -27,34 +27,25 @@
<el-table-column label="今日告警" prop="todayAlarm" show-overflow-tooltip />\ <el-table-column label="今日告警" prop="todayAlarm" show-overflow-tooltip />\
</el-table> </el-table>
</div> </div>
<el-dialog class="addGroup" width="50%" title="添加日志" :visible.sync="addDialog"> <el-dialog class="addGroup" width="50%" title="添加页面" :visible.sync="addDialog">
<el-form ref="addWarnForm" label-width="auto" :model="updateWarnForm"> <el-form ref="addWarnForm" label-width="auto" :model="addWarnForm">
<el-form-item label="名称:"> <el-form-item label="名称:">
<el-input v-model="updateWarnForm.name" /> <el-input v-model="updateWarnForm.name" />
</el-form-item> </el-form-item>
<el-form-item label="每页条数:"> <el-form-item label="每页显示报告条数:">
<el-input v-model="updateWarnForm.articlesNumber" /> <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>
<el-form-item label="操作类型:"> <el-form-item label="选择设备:">
<el-input v-model="updateWarnForm.operationType" /> <div class="equipmentDiv">
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps"
/>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -62,22 +53,25 @@ ...@@ -62,22 +53,25 @@
<el-button @click="closeDialog">取消</el-button> <el-button @click="closeDialog">取消</el-button>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog class="addGroup" width="50%" title="编辑日志" :visible.sync="updateDialog"> <el-dialog class="addGroup" width="50%" title="编辑页面" :visible.sync="updateDialog">
<el-form ref="addWarnForm" label-width="auto" :model="updateWarnForm"> <el-form ref="addWarnForm" label-width="auto" :model="updateWarnForm">
<el-form-item label="名称:"> <el-form-item label="名称:">
<el-input v-model="updateWarnForm.name" /> <el-input v-model="updateWarnForm.name" />
</el-form-item> </el-form-item>
<el-form-item label="每页条数:"> <el-form-item label="每页显示报告条数:">
<el-input v-model="updateWarnForm.articlesNumber" /> <el-input v-model="updateWarnForm.articlesNumber" />
</el-form-item> </el-form-item>
<el-form-item label="时间:"> <el-form-item label="选择设备:">
<el-input v-model="updateWarnForm.operationTime" /> <div class="equipmentDiv">
</el-form-item> <el-tree
<el-form-item label="操作人:"> :data="data"
<el-input v-model="updateWarnForm.userName" /> show-checkbox
</el-form-item> node-key="id"
<el-form-item label="操作类型:"> :default-expanded-keys="[2, 3]"
<el-input v-model="updateWarnForm.operationType" /> :default-checked-keys="[5]"
:props="defaultProps"
/>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -120,7 +114,45 @@ export default { ...@@ -120,7 +114,45 @@ export default {
name: 'TheServer', name: 'TheServer',
data() { data() {
return { return {
data: [], data: [{
id: 1,
label: '本机容器',
children: [{
id: 4,
label: '虚拟化平台',
children: [{
id: 9,
label: '127.0.0.1'
}, {
id: 10,
label: '192.168.1.1'
}]
}, {
id: 5,
label: '虚拟设备',
children: [{
id: 9,
label: '192.168.5.4'
}, {
id: 10,
label: '192.168.44.2'
}]
}, {
id: 6,
label: '服务器硬件',
children: [{
id: 9,
label: '打印机'
}, {
id: 10,
label: '192.168.2.5'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
stepActive: 1, stepActive: 1,
updateWarnForm: { updateWarnForm: {
name: '', name: '',
...@@ -234,23 +266,6 @@ export default { ...@@ -234,23 +266,6 @@ export default {
.el-input__inner{ .el-input__inner{
padding: 0 0 0 9px; 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{ .warnHead{
height: 58px; height: 58px;
padding: 15px 20px 10px 20px; padding: 15px 20px 10px 20px;
...@@ -277,14 +292,14 @@ export default { ...@@ -277,14 +292,14 @@ export default {
padding: 15px; padding: 15px;
} }
} }
.addWarnClass{ .addGroup{
.StepTitle{ .equipmentDiv{
font-size: 16px; max-height: 150px;
font-weight: bold; height: 150px;
color: #333333; overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
} }
} }
.mouse {
cursor: pointer;
}
</style> </style>
src/views/movingRingMonitoring/accessControl/accessControlList.vue 0 → 100644
View file @ a9813361
<!--门禁列表-->
<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="dialogTitle" :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-number v-model="updateWarnForm.articlesNumber" style="width: 100%;height: 30px" controls-position="right" :min="0" @change="handleChange" />
</el-form-item>
<el-form-item label="时间:">
<div>
<el-radio-group v-model="radio" style="margin-right: 10px" @change="changeTime">
<el-radio label="1">一天</el-radio>
<el-radio label="2">三天</el-radio>
<el-radio label="3">七天</el-radio>
<el-radio label="4" @click.native="changeTime">自定义时间</el-radio>
</el-radio-group>
</div>
</el-form-item>
<el-form-item label="操作人:">
<div class="equipmentDiv">
<el-checkbox-group v-model="checkCity" @change="handleCheckedCitiesChange">
<el-checkbox
v-for="item in cityOptions "
:key="item"
:label="item.name"
style="display:block;margin-left: 30px"
/>
</el-checkbox-group>
</div>
<div style="margin-top: 5px">
<el-button v-model="checkAll" style="width: 30%" @click="checkName1">全选</el-button>
<el-button v-model="checkInvert" style="width: 30%" @click="checkName2">反选</el-button>
</div>
</el-form-item>
<el-form-item label="操作类型:">
<div class="equipmentDiv">
<el-checkbox-group v-model="checkCity1" @change="handleCheckedCitiesChange1">
<el-checkbox
v-for="item in cityOption1"
:key="item"
:label="item"
style="display:block;margin-left: 30px"
/>
</el-checkbox-group>
</div>
<div style="margin-top: 5px">
<el-button v-model="checkAll1" style="width: 30%" @click="checkName3">全选</el-button>
<el-button v-model="checkInvert1" style="width: 30%" @click="checkName4">反选</el-button>
</div>
</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: 'AccessControlList',
data() {
return {
data: [],
stepActive: 1,
updateWarnForm: {
name: '',
articlesNumber: 0,
operationTime: '',
userName: '',
operationType: ''
},
addWarnForm: {
name: '',
articlesNumber: 0,
operationTime: '',
userName: '',
operationType: ''
},
addDialog: false,
updateDialog: false,
isEdit: false,
// 是否显示弹出层
open: false,
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
radio: 0,
checkCity: [],
checkAll: false,
checkInvert: false,
checkCity1: [],
checkAll1: false,
checkInvert1: false,
cityOptions: [
{ name: '管理员' },
{ name: 'admin' },
{ name: '张三' },
{ name: 'admin1' }
],
name: [],
name1: [],
cityOption1: ['TS删除', 'TS添加', 'TS编辑', '用户删除', '用户注销登陆', '用户添加', '用户登陆'],
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' }
],
}
},
computed: {
dialogTitle() {
return this.isEdit ? '编辑日志' : '添加日志'
}
},
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.isEdit = true
this.addDialog = true
},
closeUpdateDialog() {
this.updateDialog = false
},
handleAdd() {
this.isEdit = false
this.addDialog = true
},
closeDialog() {
this.addDialog = false
},
addWarn() {
this.addWarnDialog = true
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
handleChange() {
},
checkName1(val) {
this.name = []
for (let i = 0; i < this.cityOptions.length; i++) {
this.name[i] = this.cityOptions[i].name
}
this.checkCity = val ? this.name : []
},
handleCheckedCitiesChange(value) {
this.checkCity = value
const checkedCount = value.length
this.checkAll = checkedCount !== 0 && checkedCount === this.name.length
},
checkName2(value) {
const c = []
this.cityOptions.forEach(item => {
!this.checkCity.includes(item.name) && c.push(item.name)
})
this.checkCity = c
},
handleCheckedCitiesChange1(value) {
this.checkCity1 = value
const checkedCount = value.length
this.checkAll1 = checkedCount !== 0 && checkedCount === this.name.length
},
checkName3(val) {
this.name1 = []
for (let i = 0; i < this.cityOption1.length; i++) {
this.name1[i] = this.cityOption1[i]
}
this.checkCity1 = val ? this.name1 : []
},
checkName4() {
const d = []
this.cityOption1.forEach(item => {
!this.checkCity1.includes(item) && d.push(item)
})
this.checkCity1 = d
},
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;
}
.addGroup{
.equipmentDiv{
max-height: 150px;
height: 150px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
.el-checkbox__inner {
border: none;
width: 0;
}
}
}
</style>
src/views/movingRingMonitoring/accessControl/accessRecord.vue 0 → 100644
View file @ a9813361
<!--出入记录-->
<template>
</template>
<script>
export default {
name: 'AccessRecord'
}
</script>
<style scoped>
</style>
src/views/patrolManagement/patrolInspectionPlan.vue 0 → 100644
View file @ a9813361
<!--巡检计划-->
<template>
</template>
<script>
export default {
name: 'PatrolInspectionPlan'
}
</script>
<style scoped>
</style>
src/views/patrolManagement/patrolInspectionReport.vue 0 → 100644
View file @ a9813361
<!--巡检报告-->
<template>
</template>
<script>
export default {
name: "PatrolInspectionReport"
}
</script>
<style scoped>
</style>
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