Skip to content

I
IT-monitor
Commit 6097ce03 authored by 秦嘉's avatar 秦嘉
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 5eb590e2 25a5f652
Hide whitespace changes
Inline Side-by-side
Showing with 1902 additions and 241 deletions
src/views/IntegratedMonitor/reportStatistics/networkEquipment.vue
View file @ 6097ce03
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button> <el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div> </div>
</div> </div>
<el-tabs v-model="currentTab" type="card"> <el-tabs v-model="currentTab" type="card" style="margin-top: 10px">
<el-tab-pane label="设备运行报表" name="1"> <el-tab-pane label="设备运行报表" name="1">
<div style="padding: 10px 10px 10px 0"> <div style="padding: 10px 10px 10px 0">
<el-table <el-table
......
src/views/IntegratedMonitor/reportStatistics/operationLog.vue
View file @ 6097ce03
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<div style="margin-top: 5px"> <div style="margin-top: 5px">
<el-button v-model="checkAll" style="width: 30%" @click="checkName1">全选</el-button> <el-button v-model="checkAll" style="width: 30%" @click="checkName1">全选</el-button>
<el-button v-model="checkInvert" style="width: 30%" @click="checkName2">反选</el-button> <el-button v-model="checkInvert" style="width: 30%" @click="checkName2">反选</el-button>
</div> </div>
</el-form-item> </el-form-item>
......
src/views/movingRingMonitoring/accessControl/accessControlList.vue
View file @ 6097ce03
...@@ -2,132 +2,26 @@ ...@@ -2,132 +2,26 @@
<template> <template>
<div id="container_max" class="warnModule"> <div id="container_max" class="warnModule">
<div class="warnHead"> <div class="warnHead">
<div class="warnBtns"> <span style="font-size:24px;margin-right: 10px ">门禁列表</span>
<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>
<div class="warnBody"> <div class="warnBody">
<span style="font-size:24px;margin-right: 10px ">门禁列表</span> <el-input v-model.trim="searchBy.userName" style="width: 20%" class="searchInput" clearable placeholder="请输入门禁/数据源名称" />
<el-button type="button" style="margin-right: 10px;float: right" class="headBtn" @click="refresh">导出</el-button>
<el-table <el-table
:data="tableData" :data="tableData"
border border
style="width: 100%;padding-top: 20px" style="width: 100%;padding-top: 20px"
> >
<el-table-column label="用户名" prop="userName" show-overflow-tooltip /> <el-table-column label="序号" type="index" width="50" />
<el-table-column label="操作类型" prop="operationType" show-overflow-tooltip /> <el-table-column label="门禁名称" prop="userName" show-overflow-tooltip />
<el-table-column label="操作状态" prop="operationStatus" show-overflow-tooltip /> <el-table-column label="认证方式" prop="operationType" show-overflow-tooltip />
<el-table-column label="操作时间" prop="operationTime" show-overflow-tooltip /> <el-table-column label="数据源名称" prop="operationStatus" show-overflow-tooltip />
<el-table-column label="备注" prop="remarks" show-overflow-tooltip />\ <el-table-column width="300px" label="操作">
<el-link @click="addEquipment">出入记录</el-link>
<el-link @click="addRow">人员信息</el-link>
</el-table-column>
</el-table> </el-table>
</div> </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> </div>
</template> </template>
...@@ -140,25 +34,6 @@ export default { ...@@ -140,25 +34,6 @@ export default {
return { return {
data: [], data: [],
stepActive: 1, 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: { queryParams: {
page: 1, page: 1,
rows: 10, rows: 10,
...@@ -168,43 +43,23 @@ export default { ...@@ -168,43 +43,23 @@ export default {
ipAddress: '', ipAddress: '',
logContent: '' logContent: ''
}, },
radio: 0, searchBy: {
checkCity: [], userName: ''
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: '总经理办公室', operationType: '', operationStatus: '192.168.0.1' },
{ 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: '访客接待室', operationType: '', operationStatus: '127.0.0.1' },
{ 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: '南大门', operationType: '', operationStatus: '192.168.25.3' },
{ 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: '北大门', operationType: '', operationStatus: '192.168.6.224' },
{ 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: '软件正门', operationType: '', operationStatus: '192.168.5.25' },
{ 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: '员工办公室', operationType: '', operationStatus: '192.168.3.2' },
{ 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: '302办公室', operationType: '', operationStatus: '192.168.2.5' },
{ 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: '305办公室', operationType: '', operationStatus: '192.168.5.24' },
{ 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: '317办公室', operationType: '', operationStatus: '192.168.3.2' },
{ 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: '205办公室', operationType: '', operationStatus: '192.168.5.48' }
] ]
} }
}, },
computed: {
dialogTitle() {
return this.isEdit ? '编辑日志' : '添加日志'
}
},
created() {
},
mounted() { mounted() {
if (this.$route.query.type === '1') { if (this.$route.query.type === '1') {
this.addWarnDialog = true this.addWarnDialog = true
...@@ -221,75 +76,14 @@ export default { ...@@ -221,75 +76,14 @@ export default {
})// 实现模块全屏 })// 实现模块全屏
}, },
refresh() { refresh() {
window.location.reload() // 刷新页面 this.$confirm('此操作将导出本页数据, 是否继续?', '提示', {
},
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: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => {}) }).then(() => {})
},
addWarn() {
this.addWarnDialog = true
} }
} }
} }
...@@ -329,6 +123,7 @@ export default { ...@@ -329,6 +123,7 @@ export default {
float: right; float: right;
.headBtn{ .headBtn{
line-height: 10px; line-height: 10px;
width: 100px;
color: #fff; color: #fff;
border-color: #768398; border-color: #768398;
background-color: #768398; background-color: #768398;
...@@ -342,10 +137,39 @@ export default { ...@@ -342,10 +137,39 @@ export default {
} }
} }
} }
.mointorHead{
padding-top: 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
.headSearch{
.searchInput{
border-left: 0;
.el-input__inner{
border-radius: 0;
border: 0;
}
}
.el-form-item__content{
display: flex;
}
}
.headBtn{
height: 24px;
border-radius: 4px;
line-height: 22px;
font-size: 16px;
padding: 0 20px;
margin: 5px;
color: #444;
border-color: #ddd;
}
}
.warnBody{ .warnBody{
padding: 15px;
} }
} }
.addWarnClass{ .addWarnClass{
.StepTitle{ .StepTitle{
font-size: 16px; font-size: 16px;
......
src/views/patrolManagement/patrolInspectionPlan.vue
View file @ 6097ce03
<!--巡检计划--> <!--巡检计划-->
<template> <template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<span style="font-size:24px;margin-right: 10px ">巡检计划</span>
<div class="warnBtns">
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="warnBody">
<div style="margin-top: 10px">
<el-input v-model.trim="searchBy.userName" class="searchInput" style="width: 20%" clearable placeholder="请输入巡检计划名称" />
<el-select
v-model="searchBy.operationStatus"
class="searchInput"
placeholder="请选择"
clearable
style="width: 150px"
maxlength="30"
>
<el-option value="0" label="全部状态">全部状态</el-option>
<el-option
v-for="(item,index) in riskTypeOption1"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button>搜索</el-button>
<el-select
v-model="value"
class="searchInput"
placeholder="更多操作"
clearable
style="width: 100px;margin-right: 10px;float: right"
maxlength="15"
>
<el-option label="删除" value="" @click.native="userLove">删除</el-option>
<el-option label="启用" value="" @click.native="userMassage">启用</el-option>
<el-option label="停用" value="" @click.native="userHistory">停用</el-option>
</el-select>
<el-button type="button" class="headBtn" style="float: right;margin-right: 10px" @click="addPlan">新增</el-button>
</div>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column type="selection" width="60" align="center" />
<el-table-column label="标题" prop="patrolInspectionTitle" show-overflow-tooltip />
<el-table-column label="状态" prop="patrolStatus" show-overflow-tooltip />
<el-table-column label="巡检人" prop="inspector" show-overflow-tooltip />
<el-table-column label="巡检周期" prop="patrolInspectionCycle" show-overflow-tooltip />
<el-table-column label="发送方式" prop="sendingMethod" show-overflow-tooltip />
<el-table-column label="报告数" prop="reportsNumber" show-overflow-tooltip />
<el-table-column label="最近巡检时间" prop="latestTime" show-overflow-tooltip />
<el-table-column label="下次巡检时间" prop="NextTime" show-overflow-tooltip />
<el-table-column label="描述" prop="describe" show-overflow-tooltip />
<el-table-column width="200px" label="操作">
<el-link @click="implement">执行</el-link>
<el-link @click="report">报告</el-link>
<el-link @click="update">编辑</el-link>
<el-tooltip effect="light" placement="bottom" popper-class="moreTip">
<div slot="content" class="tooltipText" @click="deleteRow">删除</div>
<div slot="content" class="tooltipText" @click="addWarn">复制</div>
<div slot="content" class="tooltipText" @click="enable">启用</div>
<el-link>...
<div class="caretDown" />
</el-link>
</el-tooltip>
</el-table-column>
</el-table>
</div>
<el-dialog class="addGroup" width="70%" title="新增巡检计划" :visible.sync="addDialog">
<el-row>
<el-col :span="12">
<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-number v-model="addWarnForm.articlesNumber" style="width: 100%;" controls-position="right" :min="0" @change="handleChange" />
</el-form-item>
<el-form-item label="描述:">
<el-input v-model="addWarnForm.describe" type="textarea" :rows="5" />
</el-form-item>
<el-form-item label="巡检周期:">
<div>
<el-radio-group v-model="radio">
<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>
<div v-if="radio === 1" class="timePlan">
<span>每日</span>
<el-time-picker
v-model="value1"
placeholder="任意时间点"
/>
</div>
<div v-if="radio === 2" class="timePlan">
<span>每周</span>
<el-time-picker
v-model="value1"
placeholder="任意时间点"
/>
</div>
<div v-if="radio === 3" class="timePlan">
<span>每月</span>
<el-time-picker
v-model="value1"
placeholder="任意时间点"
/>
</div>
<div v-if="radio === 4" class="timePlan">
<span>每周期的</span>
<el-time-picker
v-model="value1"
placeholder="任意时间点"
/>
</div>
</el-form-item>
<el-form-item label="报告文件格式:">
<div>
<el-radio-group v-model="addWarnForm.radio1" style="margin-right: 10px">
<el-radio label="5">Excel</el-radio>
</el-radio-group>
</div>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="addWarnForm" label-width="auto" :model="addWarnForm">
<el-form-item label="巡检范围:">
<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 label="报告生成发送邮箱:">
<div>
<el-radio-group v-model="addWarnForm.radio2" style="margin-right: 10px">
<el-radio label="6">自动</el-radio>
<el-radio label="7">手动</el-radio>
</el-radio-group>
</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>
</el-form-item>
<el-form-item label="外部接收邮箱:">
<el-input v-model="addWarnForm.mailbox" />
</el-form-item>
</el-form>
</el-col>
</el-row>
<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> </template>
<script> <script>
import screenfull from 'screenfull'
export default { export default {
name: 'PatrolInspectionPlan' name: 'PatrolInspectionPlan',
data() {
return {
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'
}]
}]
}],
stepActive: 1,
updateWarnForm: {
name: '',
articlesNumber: 0,
operationTime: '',
userName: '',
operationType: ''
},
addWarnForm: {
name: '',
articlesNumber: 0,
operationTime: '',
userName: '',
operationType: '',
radio1: 0,
radio2: 1,
describe: '',
mailbox: []
},
addDialog: false,
updateDialog: false,
isEdit: false,
// 是否显示弹出层
open: false,
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
radio: 1,
value1: '',
checkCity: [],
checkAll: false,
checkInvert: false,
checkCity1: [],
checkAll1: false,
checkInvert1: false,
cityOptions: [
{ name: '管理员' },
{ name: 'admin' },
{ name: '张三' },
{ name: 'admin1' }
],
name: [],
name1: [],
cityOption1: ['管理员', '张三 889922@sina.com', 'abc 889922@sina.com', 'testcll call36@126.com'],
searchBy: {
userName: '',
operationStatus: ''
},
riskTypeOption1: [
{
label: '启用',
value: '1'
},
{
label: '停用',
value: '2'
}
],
riskTypeOptions: [
{
label: '删除',
value: '3'
},
{
label: '启用',
value: '1'
},
{
label: '停用',
value: '2'
}
],
defaultProps: {
children: 'children',
label: 'label'
},
tableData: [
{ patrolInspectionTitle: 'test', patrolStatus: '1', inspector: '管理员', patrolInspectionCycle: '每日',
sendingMethod: '自动', reportsNumber: '1', latestTime: '2022-05-08 10:22:33', NextTime: '2022-05-09 10:22:33', describe: '无' },
{ patrolInspectionTitle: 'test1', patrolStatus: '1', inspector: '管理员', patrolInspectionCycle: '每日',
sendingMethod: '自动', reportsNumber: '1', latestTime: '2022-05-08 10:22:33', NextTime: '2022-05-09 10:22:33', describe: '无' },
{ patrolInspectionTitle: 'test2', patrolStatus: '1', inspector: '管理员', patrolInspectionCycle: '每日',
sendingMethod: '自动', reportsNumber: '1', latestTime: '2022-05-08 10:22:33', NextTime: '2022-05-09 10:22:33', describe: '无' },
{ patrolInspectionTitle: 'test3', patrolStatus: '1', inspector: '管理员', patrolInspectionCycle: '每日',
sendingMethod: '自动', reportsNumber: '1', latestTime: '2022-05-08 10:22:33', NextTime: '2022-05-09 10:22:33', describe: '无' },
{ patrolInspectionTitle: 'smoking ', patrolStatus: '1', inspector: '管理员', patrolInspectionCycle: '每日',
sendingMethod: '自动', reportsNumber: '1', latestTime: '2022-05-08 10:22:33', NextTime: '2022-05-09 10:22:33', describe: '无' },
{ patrolInspectionTitle: 'eating', patrolStatus: '1', inspector: '管理员', patrolInspectionCycle: '每日',
sendingMethod: '自动', reportsNumber: '1', latestTime: '2022-05-08 10:22:33', NextTime: '2022-05-09 10:22:33', describe: '无' },
{ patrolInspectionTitle: 'formatter', patrolStatus: '1', inspector: '管理员', patrolInspectionCycle: '每日',
sendingMethod: '自动', reportsNumber: '1', latestTime: '2022-05-08 10:22:33', NextTime: '2022-05-09 10:22:33', describe: '无' },
{ patrolInspectionTitle: 'sss', patrolStatus: '1', inspector: '管理员', patrolInspectionCycle: '每日',
sendingMethod: '自动', reportsNumber: '1', latestTime: '2022-05-08 10:22:33', NextTime: '2022-05-09 10:22:33', describe: '无' },
{ patrolInspectionTitle: 'ddd', patrolStatus: '1', inspector: '管理员', patrolInspectionCycle: '每日',
sendingMethod: '自动', reportsNumber: '1', latestTime: '2022-05-08 10:22:33', NextTime: '2022-05-09 10:22:33', describe: '无' },
{ patrolInspectionTitle: 'fff', patrolStatus: '1', inspector: '管理员', patrolInspectionCycle: '每日',
sendingMethod: '自动', reportsNumber: '1', latestTime: '2022-05-08 10:22:33', NextTime: '2022-05-09 10:22:33', describe: '无' }
]
}
},
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() // 刷新页面
},
/**
* 执行
*/
implement() {
this.$confirm('是否执行本条数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
/**
* 报告
*/
report() {
this.$router.push({
path: '/patrolManagement/patrolInspectionReport',
query: {
type: '1'
}
})
},
deleteRow() {
this.$confirm('此操作将删除本条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
enable() {
this.$confirm('此操作将启用此数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
userLove() {
this.$confirm('此操作将删除选中数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
userMassage() {
this.$confirm('此操作将启用选中数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
userHistory() {
this.$confirm('此操作将停用选中数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
handleUpdate() {
this.isEdit = true
this.addDialog = true
},
closeUpdateDialog() {
this.updateDialog = false
},
addPlan() {
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
}
}
} }
</script> </script>
<style scoped> <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;
width: 100px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.mointorHead{
padding-top: 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
.headSearch{
.searchInput{
border-left: 0;
.el-input__inner{
border-radius: 0;
border: 0;
}
}
.el-form-item__content{
display: flex;
}
}
.headBtn{
border-radius: 4px;
line-height: 30px;
font-size: 16px;
padding: 0 20px;
color: #444;
border-color: #ddd;
}
}
.warnBody{
}
.caretDown{
display: inline-block;
width: 0;
height: 0;
margin-left: 8px;
//vertical-align: middle;
//border-top: 4px solid;
//border-right: 4px solid transparent;
//border-left: 4px solid transparent;
}
}
.addWarnClass{
.StepTitle{
font-size: 16px;
font-weight: bold;
color: #333333;
}
}
.timePlan{
margin-top: 10px;
margin-bottom: 20px;
}
.mouse {
cursor: pointer;
}
.addGroup{
display: flex;
flex-direction: row;
.equipmentDiv{
flex: 1;
max-height: 150px;
height: 150px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
.el-checkbox__inner {
border: none;
width: 0;
}
}
.equipmentDiv1{
flex: 1;
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/patrolManagement/patrolInspectionReport.vue
View file @ 6097ce03
<!--巡检报告--> <!--巡检报告-->
<template> <template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<span style="font-size:24px;margin-right: 10px ">巡检报告</span>
<div class="warnBtns">
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="warnBody">
<div>
<el-select
v-model="searchBy.plan"
class="searchInput"
placeholder="全部计划"
clearable
style="width: 100px;margin-left: 10px"
maxlength="20"
>
<el-option
v-for="(item,index) in allPlan"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="searchBy.inspection"
class="searchInput"
placeholder="全部巡检结果"
clearable
style="width: 130px"
maxlength="20"
>
<el-option
v-for="(item,index) in patrolInspectionResults"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="searchBy.sendStatus"
class="searchInput"
placeholder="全部发送状态"
clearable
style="width: 130px"
maxlength="20"
>
<el-option
v-for="(item,index) in sendStatus"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button>搜索</el-button>
<el-select
class="searchInput"
placeholder="更多操作"
clearable
style="width: 100px;margin-right: 10px;float: right"
maxlength="15"
>
<el-option label="删除" value="" @click.native="userSend">批量发送</el-option>
<el-option label="启用" value="" @click.native="userMassage">批量下载</el-option>
</el-select>
</div>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column type="selection" width="60" align="center" />
<el-table-column label="报告名称" prop="patrolInspectionTitle" show-overflow-tooltip />
<el-table-column label="巡检人" prop="inspector" show-overflow-tooltip />
<el-table-column label="巡检时间" prop="patrolInspectionCycle" show-overflow-tooltip />
<el-table-column label="巡检结果" prop="sendingMethod" show-overflow-tooltip />
<el-table-column label="报告发送状态" prop="reportsNumber" show-overflow-tooltip />
<el-table-column label="报告发送时间" prop="latestTime" show-overflow-tooltip />
<el-table-column label="巡检计划名称" prop="NextTime" show-overflow-tooltip />
<el-table-column width="250px" label="操作">
<template #default="{ row }">
<el-link @click="report(row)">查看</el-link>
<el-link @click="implement">发送</el-link>
<el-link @click="deleteRow">下载</el-link>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog class="addGroup" width="70%" title="新增巡检计划" :visible.sync="addDialog">
<el-form ref="addWarnForm" label-width="auto" :inline="true" :model="addWarnForm">
<el-form-item label="计划名称:">
<el-input v-model="addWarnForm.name" />
</el-form-item>
<el-form-item label="巡检范围:">
<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 label="巡检人:">
<el-input-number v-model="addWarnForm.articlesNumber" style="width: 80%;" controls-position="right" :min="0" @change="handleChange" />
</el-form-item>
<el-form-item label="描述:">
<el-input v-model="addWarnForm.describe" style="width: 80%;" @change="handleChange" />
</el-form-item>
<el-form-item label="巡检周期:">
<div>
<el-radio-group v-model="radio" style="margin-right: 10px;width: 80%">
<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>
<el-radio-group v-model="addWarnForm.radio1" style="margin-right: 10px">
<el-radio label="5">Excel</el-radio>
</el-radio-group>
</div>
</el-form-item>
<el-form-item label="报告生成发送邮箱:">
<div>
<el-radio-group v-model="addWarnForm.radio2" style="margin-right: 10px">
<el-radio label="6">自动</el-radio>
<el-radio label="7">手动</el-radio>
</el-radio-group>
</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>
</el-form-item>
<el-form-item label="外部接收邮箱:">
<el-input v-model="addWarnForm.mailbox"/>
</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> </template>
<script> <script>
import screenfull from 'screenfull'
export default { export default {
name: "PatrolInspectionReport" name: 'PatrolInspectionReport',
data() {
return {
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'
}]
}]
}],
stepActive: 1,
updateWarnForm: {
name: '',
articlesNumber: 0,
operationTime: '',
userName: '',
operationType: ''
},
addWarnForm: {
name: '',
articlesNumber: 0,
operationTime: '',
userName: '',
operationType: '',
radio1: 0,
radio2: 1,
describe: '',
mailbox: []
},
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: ['管理员', '张三 889922@sina.com', 'abc 889922@sina.com', 'testcll call36@126.com'],
searchBy: {
plan: '',
inspection: '',
sendStatus: ''
},
allPlan: [
{
label: '全部计划',
value: ''
},
{
label: '计划1',
value: '1'
},
{
label: '计划2',
value: '2'
}
],
patrolInspectionResults: [
{
label: '全部巡检结果',
value: ''
},
{
label: '正常巡检结果',
value: '2'
},
{
label: '异常巡检结果',
value: '3'
}
],
sendStatus: [
{
label: '全部发送状态',
value: ''
},
{
label: '发送成功',
value: '1'
},
{
label: '发送失败',
value: '2'
}
],
defaultProps: {
children: 'children',
label: 'label'
},
tableData: [
{ patrolInspectionTitle: 'test', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '3' + '个异常', reportsNumber: '失败', latestTime: '2022-05-08 10:22:33', NextTime: 'test' },
{ patrolInspectionTitle: 'test1', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '1个异常', reportsNumber: '失败', latestTime: '2022-05-08 10:22:33', NextTime: 'test' },
{ patrolInspectionTitle: 'test2', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '2个异常', reportsNumber: '失败', latestTime: '2022-05-08 10:22:33', NextTime: 'test' },
{ patrolInspectionTitle: 'test3', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '4个异常', reportsNumber: '失败', latestTime: '2022-05-08 10:22:33', NextTime: 'test' },
{ patrolInspectionTitle: 'smoking ', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '0个异常', reportsNumber: '成功', latestTime: '2022-05-08 10:22:33', NextTime: 'test' },
{ patrolInspectionTitle: 'eating', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '0个异常', reportsNumber: '成功', latestTime: '2022-05-08 10:22:33', NextTime: 'test' },
{ patrolInspectionTitle: 'formatter', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '0个异常', reportsNumber: '成功', latestTime: '2022-05-08 10:22:33', NextTime: 'test' },
{ patrolInspectionTitle: 'sss', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '0个异常', reportsNumber: '成功', latestTime: '2022-05-08 10:22:33', NextTime: 'test' },
{ patrolInspectionTitle: 'ddd', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '0个异常', reportsNumber: '成功', latestTime: '2022-05-08 10:22:33', NextTime: 'test' },
{ patrolInspectionTitle: 'fff', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '0个异常', reportsNumber: '成功', latestTime: '2022-05-08 10:22:33', NextTime: 'test' }
]
}
},
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() // 刷新页面
},
/**
* 发送
*/
implement() {
this.$confirm('是否发送本条数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
/**
* 查看
*/
report(row) {
this.$router.push({
path: '/patrolManagement/patrolInspectionReportDetails',
query: {
patrolInspectionTitle: row.patrolInspectionTitle,
inspector: row.inspector,
patrolInspectionCycle: row.patrolInspectionCycle,
sendingMethod: row.sendingMethod,
reportsNumber: row.reportsNumber,
latestTime: row.latestTime,
NextTime: row.NextTime
}
})
},
deleteRow() {
this.$confirm('此操作将下载本条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
enable() {
this.$confirm('此操作将启用此数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
userSend() {
this.$confirm('此操作将发送选中数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
userMassage() {
this.$confirm('此操作将下载选中数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
userHistory() {
this.$confirm('此操作将停用选中数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
handleUpdate() {
this.isEdit = true
this.addDialog = true
},
closeUpdateDialog() {
this.updateDialog = false
},
// addPlan() {
// 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
}
}
} }
</script> </script>
<style scoped> <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;
width: 100px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.mointorHead{
padding-top: 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
.headSearch{
.searchInput{
border-left: 0;
.el-input__inner{
border-radius: 0;
border: 0;
}
}
.el-form-item__content{
display: flex;
}
}
.headBtn{
border-radius: 4px;
line-height: 30px;
font-size: 16px;
padding: 0 20px;
color: #444;
border-color: #ddd;
}
}
.warnBody{
}
.caretDown{
display: inline-block;
width: 0;
height: 0;
margin-left: 8px;
//vertical-align: middle;
//border-top: 4px solid;
//border-right: 4px solid transparent;
//border-left: 4px solid transparent;
}
}
.addWarnClass{
.StepTitle{
font-size: 16px;
font-weight: bold;
color: #333333;
}
}
.mouse {
cursor: pointer;
}
.addGroup{
display: flex;
flex-direction: row;
.equipmentDiv{
flex: 1;
max-height: 150px;
height: 150px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
.el-checkbox__inner {
border: none;
width: 0;
}
}
.equipmentDiv1{
flex: 1;
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/patrolManagement/patrolInspectionReportDetails.vue 0 → 100644
View file @ 6097ce03
<template>
<div id="container_max" class="reportDetails">
<div class="warnHead">
<span style="font-size:24px;margin-right: 10px ">巡检报告详情</span>
<div class="warnBtns">
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<el-row class="rowHeader" :gutter="1" style="margin-left: 10px">
<el-col :span="3"><div class="grid-content bg-purple" /><span style="font-weight: bold">报告名称:</span> {{ patrolInspectionTitle }}</el-col>
<el-col :span="5"><div class="grid-content bg-purple" /><span style="font-weight: bold">设备数量: </span>{{ 3 }}
<div style="display: flex">
<div>
<span class="st-square" style="background-color: #3db58d;" />
<span class="blockCount">正常(1)</span>
</div>
<div>
<span class="st-square" style="background-color: #edb845;" />
<span class="blockCount">危险(0)</span>
</div>
<div >
<span class="st-square" style="background-color: #eb5d5d;" />
<span class="blockCount">故障(2)</span>
</div>
</div>
</el-col>
<el-col :span="3"><div class="grid-content bg-purple" /><span style="font-weight: bold">巡检人:</span>{{ inspector }}</el-col>
<el-col :span="3"><div class="grid-content bg-purple" /><span style="font-weight: bold">巡检时间:</span> {{ patrolInspectionCycle }}</el-col>
<el-col :span="3"><div class="grid-content bg-purple" /><span style="font-weight: bold">发送时间:</span>{{ latestTime }}</el-col>
<el-col :span="3"><div class="grid-content bg-purple" /><span style="font-weight: bold">发送状态:</span>:<span class="st-square" style="background-color: #eb5d5d;" />{{ reportsNumber }}</el-col>
<el-col :span="3"><div class="grid-content bg-purple" />
<el-button class="downDetails" style="margin-left: 10px" @click="downDetails">下载</el-button>
<el-button class="downDetails" style="margin-left: 10px" @click="sendDetails">发送</el-button>
<el-button style="margin-left: 10px" @click="back">返回</el-button>
</el-col>
</el-row>
<div class="mointorHead">
<div>
<el-form inline label-width="auto" label-position="right">
<el-form-item class="headSearch" style="margin-left: 10px" label="设备名称:">
<!-- <i style="font-size: 23px;line-height: 20px; background-color: #d6d6d6; border: 1px solid #cccccc " class="el-icon-search" />-->
<el-input v-model.trim="searchBy.userName" class="searchInput" clearable placeholder="请输入设备名称" />
</el-form-item>
<el-form-item class="headSearch" label="设备状态:">
<el-select
v-model="searchBy.operationStatus"
class="searchInput"
placeholder="全部状态"
clearable
style="width: 150px"
maxlength="30"
>
<el-option
v-for="(item,index) in riskTypeOption1"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-button>查询</el-button>
</el-form>
</div>
</div>
<div class="warnBody">
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
:span-method="objectSpanMethod"
>
<!-- <el-table-column label="序号" width="60" type="index" align="center" />-->
<el-table-column label="设备名称" prop="patrolInspectionTitle" show-overflow-tooltip />
<el-table-column label="IP地址" prop="patrolStatus" show-overflow-tooltip />
<el-table-column label="设备状态" prop="inspector" show-overflow-tooltip />
<el-table-column label="监测点" prop="patrolInspectionCycle" show-overflow-tooltip />
<el-table-column label="监测指标" prop="sendingMethod" show-overflow-tooltip />
<el-table-column label="巡检值" prop="reportsNumber" show-overflow-tooltip />
<el-table-column label="危险阈值" prop="latestTime" show-overflow-tooltip />
<el-table-column label="故障阈值" prop="NextTime" show-overflow-tooltip />
</el-table>
</div>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'PatrolInspectionReportDetails',
data() {
return {
stepActive: 1,
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
radio: 0,
searchBy: {
userName: '',
operationStatus: ''
},
patrolInspectionTitle: this.$route.query.patrolInspectionTitle,
inspector: this.$route.query.inspector,
patrolInspectionCycle: this.$route.query.patrolInspectionCycle,
sendingMethod: this.$route.query.sendingMethod,
reportsNumber: this.$route.query.reportsNumber,
latestTime: this.$route.query.latestTime,
NextTime: this.$route.query.NextTime,
riskTypeOption1: [
{
label: '全部状态',
value: '0'
},
{
label: '故障',
value: '1'
},
{
label: '危险',
value: '2'
},
{
label: '未知',
value: '3'
},
{
label: '正常',
value: '4'
},
{
label: '禁止',
value: '5'
}
],
exportParams: {},
tableLoading: false,
pos: 0,
spanArr: [],
page_export: 0,
tableData: [
{
id: 1,
patrolInspectionTitle: '127.0.0.1',
patrolStatus: '127.0.0.1',
inspector: '故障',
patrolInspectionCycle: 'Linux CPU',
sendingMethod: 'stolen(%)',
reportsNumber: '0',
latestTime: '--',
NextTime: '--'
},
{
id: 2,
patrolInspectionTitle: '127.0.0.1',
patrolStatus: '127.0.0.1',
inspector: '故障',
patrolInspectionCycle: 'Linux CPU',
sendingMethod: 'soft_irq(%)',
reportsNumber: '3.47',
latestTime: '--',
NextTime: '--'
},
{
id: 3,
patrolInspectionTitle: '127.0.0.1',
patrolStatus: '127.0.0.1',
inspector: '故障',
patrolInspectionCycle: 'Linux CPU',
sendingMethod: 'nice(%)',
reportsNumber: '0',
latestTime: '--',
NextTime: '--'
},
{
id: 4,
patrolInspectionTitle: '127.0.0.1',
patrolStatus: '127.0.0.1',
inspector: '故障',
patrolInspectionCycle: 'Agent连接',
sendingMethod: '响应时间(ms)',
reportsNumber: '0',
latestTime: '--',
NextTime: '--'
},
{
id: 5,
patrolInspectionTitle: '127.0.0.1',
patrolStatus: '127.0.0.1',
inspector: '故障',
patrolInspectionCycle: 'Agent连接',
sendingMethod: '结果()',
reportsNumber: 'OK',
latestTime: '结果()!containsOK',
NextTime: '结果()!containsOK'
},
{
id: 6,
patrolInspectionTitle: '192.168.5.2',
patrolStatus: '192.168.5.2',
inspector: '故障',
patrolInspectionCycle: 'Disk(1_Physical Disk 0:1:0 )',
sendingMethod: '磁盘可使用空间(MB)',
reportsNumber: '0',
latestTime: '--',
NextTime: '--'
},
{
id: 7,
patrolInspectionTitle: '192.168.5.2',
patrolStatus: '192.168.5.2',
inspector: '故障',
patrolInspectionCycle: 'Disk(1_Physical Disk 0:1:0 )',
sendingMethod: '磁盘以使用空间(MB)',
reportsNumber: '3814912',
latestTime: '--',
NextTime: '--'
},
{
id: 8,
patrolInspectionTitle: '192.168.5.2',
patrolStatus: '192.168.5.2',
inspector: '故障',
patrolInspectionCycle: 'Power(1_5500 )',
sendingMethod: '电源状态()',
reportsNumber: '正常',
latestTime: '电源状态()!contains正常',
NextTime: '电源状态()!contains故障'
},
{
id: 9,
patrolInspectionTitle: '192.168.5.2',
patrolStatus: '192.168.5.2',
inspector: '故障',
patrolInspectionCycle: 'Power(1_5500 )',
sendingMethod: '电源位置()',
reportsNumber: 'PS1 Status',
latestTime: '--',
NextTime: '--'
},
{
id: 10,
patrolInspectionTitle: '192.168.5.2',
patrolStatus: '192.168.5.2',
inspector: '故障',
patrolInspectionCycle: 'Power(1_5500 )',
sendingMethod: '累计使用瓦数(Watts)',
reportsNumber: '264',
latestTime: '--',
NextTime: '--'
}
],
patrolInspectionTitle_merageArr: [], // 第一列进行合并操作时存放的数组变量
patrolInspectionTitle_meragePos: 0, // 上面的数组的下标值
patrolStatus_merageArr: [], // 第二列进行合并操作时存放的数组变量
patrolStatus_meragePos: 0, // 上面的数组的下标值
inspector_merageArr: [], // 第三列进行合并操作时存放的数组变量
inspector_meragePos: 0, // 上面的数组的下标值
patrolInspectionCycle_merageArr: [],
patrolInspectionCycle_meragePos: 0
}
},
created() {
},
mounted() {
if (this.$route.query.type === '1') {
this.addWarnDialog = true
}
this.handleExpand() // 全屏
this.merage() // 合并单元格
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
/**
* 发送
*/
sendDetails() {
this.$confirm('是否执行发送本条数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
/**
* 返回
*/
back() {
this.$router.push({
path: '/patrolManagement/patrolInspectionReport',
})
},
downDetails() {
this.$confirm('此操作将下载本条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
merageInit() { // 在下文的时候会用到，对数据进行初始化是很有必要的
this.patrolInspectionTitle_merageArr = []
this.patrolInspectionTitle_meragePos = 0
this.patrolStatus_merageArr = []
this.patrolStatus = 0
this.inspector_merageArr = []
this.inspector_meragePos = 0
},
// 合并多列专用
merage() {
this.merageInit() // 前文的初始化数据函数
for (let i = 0; i < this.tableData.length; i++) {
if (i === 0) {
// 第一行必须存在
this.patrolInspectionTitle_merageArr.push(1)
this.patrolInspectionTitle_meragePos = 0
this.patrolStatus_merageArr.push(1)
this.patrolStatus = 0
this.inspector_merageArr.push(1)
this.inspector_meragePos = 0
} else {
// 判断当前元素与上一个元素是否相同,eg：this.patrolInspectionTitle_meragePos 是 this.typeNameArr序号
// 第一列
if (this.tableData[i].patrolInspectionTitle === this.tableData[i - 1].patrolInspectionTitle) {
this.patrolInspectionTitle_merageArr[this.patrolInspectionTitle_meragePos] += 1
this.patrolInspectionTitle_merageArr.push(0)
} else {
this.patrolInspectionTitle_merageArr.push(1)
this.patrolInspectionTitle_meragePos = i
}
// 第二列
if (this.tableData[i].patrolStatus === this.tableData[i - 1].patrolStatus && this.tableData[i].patrolInspectionTitle === this.tableData[i - 1].patrolInspectionTitle) {
this.patrolStatus_merageArr[this.patrolStatus] += 1
this.patrolStatus_merageArr.push(0)
} else {
this.patrolStatus_merageArr.push(1)
this.patrolStatus = i
}
// 第三列
if (this.tableData[i].inspector === this.tableData[i - 1].inspector && this.tableData[i].patrolStatus === this.tableData[i - 1].patrolStatus && this.tableData[i].patrolInspectionTitle === this.tableData[i - 1].patrolInspectionTitle) {
this.inspector_merageArr[this.inspector_meragePos] += 1
this.inspector_merageArr.push(0)
} else {
this.inspector_merageArr.push(1)
this.inspector_meragePos = i
}
// 第四列
if (this.tableData[i].patrolInspectionCycle === this.tableData[i - 1].patrolInspectionCycle && this.tableData[i].inspector === this.tableData[i - 1].inspector && this.tableData[i].patrolStatus === this.tableData[i - 1].patrolStatus && this.tableData[i].patrolInspectionTitle === this.tableData[i - 1].patrolInspectionTitle) {
this.patrolInspectionCycle_merageArr[this.patrolInspectionCycle_meragePos] += 1
this.patrolInspectionCycle_merageArr.push(0)
} else {
this.patrolInspectionCycle_merageArr.push(1)
this.patrolInspectionCycle_meragePos = i
}
}
}
},
// 合并专用
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 第一列的合并方法
const row1 = this.patrolInspectionTitle_merageArr[rowIndex]
const col1 = row1 > 0 ? 1 : 0 // 如果被合并了row = 0; 则他这个列需要取消
return {
rowspan: row1,
colspan: col1
}
} else if (columnIndex === 1) {
// 第二列的合并方法
const row2 = this.patrolStatus_merageArr[rowIndex]
const col2 = row2 > 0 ? 1 : 0 // 如果被合并了row = 0; 则他这个列需要取消
return {
rowspan: row2,
colspan: col2
}
} else if (columnIndex === 2) {
// 第三列的合并方法
const row3 = this.inspector_merageArr[rowIndex]
const col3 = row3 > 0 ? 1 : 0 // 如果被合并了row = 0; 则他这个列需要取消
return {
rowspan: row3,
colspan: col3
}
} else if (columnIndex === 3) {
// 第三列的合并方法
const row4 = this.inspector_merageArr[rowIndex]
const col4 = row4 > 0 ? 1 : 0 // 如果被合并了row = 0; 则他这个列需要取消
return {
rowspan: row4,
colspan: col4
}
}
}
}
}
</script>
<style lang="scss" scoped>
.reportDetails{
.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;
width: 100px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.rowHeader{
margin-top: 10px;
margin-bottom: 10px;
}
.mointorHead{
padding-top: 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
.headSearch{
.searchInput{
border-left: 0;
.el-input__inner{
border-radius: 0;
border: 0;
}
}
.el-form-item__content{
display: flex;
}
}
.headBtn{
border-radius: 4px;
line-height: 30px;
font-size: 16px;
padding: 0 20px;
color: #444;
border-color: #ddd;
}
}
.warnBody{
}
.caretDown{
display: inline-block;
width: 0;
height: 0;
margin-left: 8px;
//vertical-align: middle;
//border-top: 4px solid;
//border-right: 4px solid transparent;
//border-left: 4px solid transparent;
}
}
.downDetails{
margin-left: 10px;
border: 1px solid #3c8dbc;
color: #3c8dbc;
}
.st-square{
cursor: pointer;
margin-right: 1px;
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}
.addWarnClass{
.StepTitle{
font-size: 16px;
font-weight: bold;
color: #333333;
}
}
.mouse {
cursor: pointer;
}
.addGroup{
display: flex;
flex-direction: row;
.equipmentDiv{
flex: 1;
max-height: 150px;
height: 150px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
.el-checkbox__inner {
border: none;
width: 0;
}
}
.equipmentDiv1{
flex: 1;
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>
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