sunjianxi
1 year ago
parent
68beb62bcb
commit
157f4a96ad
3 changed files with 532 additions and 2 deletions
@ -0,0 +1,79 @@ |
|||||||
|
<template> |
||||||
|
<div class="page"> |
||||||
|
<div style="background: #1e283d; height: 92vh; width: 218px"> |
||||||
|
<el-menu |
||||||
|
class="el-menu-vertical-demo" |
||||||
|
@open="handleOpen" |
||||||
|
@close="handleClose" |
||||||
|
background-color="#1E283D" |
||||||
|
active-background-color="red" |
||||||
|
text-color="#fff" |
||||||
|
active-text-color="#ffd04b" |
||||||
|
:default-active="$route.path" |
||||||
|
router |
||||||
|
> |
||||||
|
<el-submenu index="1"> |
||||||
|
<template slot="title"> |
||||||
|
<span class="point"></span> |
||||||
|
<span>系统监控</span> |
||||||
|
</template> |
||||||
|
<el-menu-item-group> |
||||||
|
<el-menu-item index="/opsVisualization/index">服务监控</el-menu-item> |
||||||
|
<el-menu-item index="/opsVisualization/warnHistory">Redis监控</el-menu-item> |
||||||
|
<el-menu-item index="/opsVisualization/index">数据库监控</el-menu-item> |
||||||
|
<el-menu-item index="/opsVisualization/index">网络监控</el-menu-item> |
||||||
|
<el-menu-item index="/opsVisualization/index">系统硬件监控</el-menu-item> |
||||||
|
</el-menu-item-group> |
||||||
|
</el-submenu> |
||||||
|
<el-submenu index="2"> |
||||||
|
<template slot="title"> |
||||||
|
<i class="point"></i> |
||||||
|
<span>业务数据运维</span> |
||||||
|
</template> |
||||||
|
<el-menu-item-group> |
||||||
|
<el-menu-item index="/opsVisualization/index">服务监控</el-menu-item> |
||||||
|
<el-menu-item index="/opsVisualization/index">Redis监控</el-menu-item> |
||||||
|
<el-menu-item index="/opsVisualization/index">数据库监控</el-menu-item> |
||||||
|
<el-menu-item index="/opsVisualization/index">网络监控</el-menu-item> |
||||||
|
<el-menu-item index="/opsVisualization/index">系统硬件监控</el-menu-item> |
||||||
|
</el-menu-item-group> |
||||||
|
</el-submenu> |
||||||
|
</el-menu> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return {}; |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
computed: {}, |
||||||
|
mounted() {}, |
||||||
|
methods: {}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.page{ |
||||||
|
position: absolute; |
||||||
|
top: 64px; |
||||||
|
left: 0; |
||||||
|
z-index: 1027; |
||||||
|
} |
||||||
|
/deep/.el-menu-item-group__title { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
.point { |
||||||
|
width: 4px; |
||||||
|
height: 4px; |
||||||
|
background: #fff; |
||||||
|
opacity: 0.7; |
||||||
|
display: inline-block; |
||||||
|
margin: 0 20px 0 30px; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,445 @@ |
|||||||
|
<template> |
||||||
|
<el-row> |
||||||
|
<el-col :span="3"> |
||||||
|
<div class="box"> |
||||||
|
<el-scrollbar> |
||||||
|
<basic-container> |
||||||
|
<avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" /> |
||||||
|
</basic-container> |
||||||
|
</el-scrollbar> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="21"> |
||||||
|
<basic-container> |
||||||
|
<avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" |
||||||
|
:permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose" @row-del="rowDel" |
||||||
|
@row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset" |
||||||
|
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" |
||||||
|
@refresh-change="refreshChange" @on-load="onLoad" @tree-load="treeLoad" :page.sync="page"> |
||||||
|
<template slot-scope="scope" slot="areaSearch"> |
||||||
|
<el-select v-model="area"> |
||||||
|
<el-option label="业务区" value="1"></el-option> |
||||||
|
<el-option label="塔台" value="2"></el-option> |
||||||
|
</el-select> |
||||||
|
</template> |
||||||
|
<template slot-scope="scope" slot="startDateSearch"> |
||||||
|
<el-date-picker |
||||||
|
v-model="startDate" |
||||||
|
type="date" |
||||||
|
placeholder="选择日期" |
||||||
|
value-format = 'yyyy-MM-dd' |
||||||
|
format="yyyy-MM-dd" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</template> |
||||||
|
<template slot-scope="scope" slot="endDateSearch"> |
||||||
|
<el-date-picker |
||||||
|
v-model="endDate" |
||||||
|
type="date" |
||||||
|
placeholder="选择日期" |
||||||
|
value-format = 'yyyy-MM-dd' |
||||||
|
format="yyyy-MM-dd" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</template> |
||||||
|
</avue-crud> |
||||||
|
</basic-container> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
getLazyList, |
||||||
|
remove, |
||||||
|
update, |
||||||
|
add, |
||||||
|
getDept, |
||||||
|
getDeptTree |
||||||
|
} from "@/api/system/dept"; |
||||||
|
import { |
||||||
|
mapGetters |
||||||
|
} from "vuex"; |
||||||
|
import website from '@/config/website'; |
||||||
|
import {getAlarmList,getDeptLazyTree} from '@/api/equipment' |
||||||
|
|
||||||
|
var DIC = { |
||||||
|
alarmType: [{ |
||||||
|
label: '未知', |
||||||
|
value: -1 |
||||||
|
},{ |
||||||
|
label: '事件报警', |
||||||
|
value: 1 |
||||||
|
}, { |
||||||
|
label: '设备报警', |
||||||
|
value: 2 |
||||||
|
}], |
||||||
|
statusType:[{ |
||||||
|
label:'报警中', |
||||||
|
value:1 |
||||||
|
},{ |
||||||
|
label:'已恢复', |
||||||
|
value:2 |
||||||
|
}], |
||||||
|
aereaType:[{ |
||||||
|
label:'业务区', |
||||||
|
value:'1' |
||||||
|
},{ |
||||||
|
label:'塔台', |
||||||
|
value:'2' |
||||||
|
}], |
||||||
|
recoveryType:[{ |
||||||
|
label: ' ', |
||||||
|
value: -1 |
||||||
|
},{ |
||||||
|
label: '手动', |
||||||
|
value: 1 |
||||||
|
}, { |
||||||
|
label: '自动', |
||||||
|
value: 0 |
||||||
|
}] |
||||||
|
} |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
area:this.$route.query.area ? this.$route.query.area : '1', |
||||||
|
classCode:this.$route.query.classCode ? this.$route.query.classCode : '', |
||||||
|
startDate:'', |
||||||
|
endDate:'', |
||||||
|
form: {}, |
||||||
|
selectionList: [], |
||||||
|
query: {}, |
||||||
|
loading: false, |
||||||
|
parentId: 0, |
||||||
|
page: { |
||||||
|
pageSize: 10, |
||||||
|
currentPage: 1, |
||||||
|
total: 0, |
||||||
|
}, |
||||||
|
option: { |
||||||
|
lazy: true, |
||||||
|
tip: false, |
||||||
|
// simplePage: true, |
||||||
|
searchShow: true, |
||||||
|
searchMenuSpan: 6, |
||||||
|
tree: true, |
||||||
|
border: true, |
||||||
|
index: true, |
||||||
|
selection: true, |
||||||
|
viewBtn: true, |
||||||
|
menuWidth: 80, |
||||||
|
dialogClickModal: false, |
||||||
|
addBtn:false, |
||||||
|
delBtn:false, |
||||||
|
editBtn:false, |
||||||
|
column: [ |
||||||
|
{ |
||||||
|
label:'设备名称', |
||||||
|
prop:'equipName', |
||||||
|
align:'center' |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "设备位置", |
||||||
|
prop: "location", |
||||||
|
align:'center' |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "报警信息", |
||||||
|
prop: "warnContent", |
||||||
|
align:'center' |
||||||
|
}, |
||||||
|
{ |
||||||
|
label:'报警区域', |
||||||
|
prop:'area', |
||||||
|
searchslot:true, |
||||||
|
search:true, |
||||||
|
type:"select", |
||||||
|
dicData: DIC.aereaType, |
||||||
|
// hide:true, |
||||||
|
row: false, |
||||||
|
display: false, |
||||||
|
viewDisplay:false, |
||||||
|
align:'center', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "报警类型", |
||||||
|
prop: "warnType", |
||||||
|
search: true, |
||||||
|
type:"select", |
||||||
|
dicData: DIC.alarmType, |
||||||
|
align:'center', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "报警状态", |
||||||
|
prop: "status", |
||||||
|
type:"select", |
||||||
|
dicData: DIC.statusType, |
||||||
|
align:'center', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "报警时间", |
||||||
|
prop: "warnDate", |
||||||
|
type:'datetime', |
||||||
|
width:"140", |
||||||
|
// format:'yyyy-MM-dd', |
||||||
|
// valueFormat:'yyyy-MM-dd', |
||||||
|
align:'center', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "开始时间", |
||||||
|
prop: "startDate", |
||||||
|
align:'center', |
||||||
|
searchslot:true, |
||||||
|
hide:true, |
||||||
|
search:true, |
||||||
|
row: false, |
||||||
|
display: false, |
||||||
|
viewDisplay:false |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "结束时间", |
||||||
|
prop: "endDate", |
||||||
|
align:'center', |
||||||
|
searchslot:true, |
||||||
|
hide:true, |
||||||
|
search:true, |
||||||
|
row: false, |
||||||
|
display: false, |
||||||
|
viewDisplay:false |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "恢复方式", |
||||||
|
prop: "recoveryType", |
||||||
|
dicData: DIC.recoveryType, |
||||||
|
type:"select", |
||||||
|
align:'center', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "恢复人", |
||||||
|
prop: "recoveryPerson", |
||||||
|
align:'center', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "恢复时间", |
||||||
|
prop: "recoveryDate", |
||||||
|
type:'datetime', |
||||||
|
align:'center', |
||||||
|
}, |
||||||
|
] |
||||||
|
}, |
||||||
|
data: [], |
||||||
|
treeData:[], |
||||||
|
treeOption: { |
||||||
|
nodeKey: 'id', |
||||||
|
lazy: true, |
||||||
|
treeLoad: function(node, resolve) { |
||||||
|
const parentId = (node.level === 0) ? 0 : node.data.id; |
||||||
|
getDeptLazyTree(parentId).then(res => { |
||||||
|
resolve(res.data.data.map(item => { |
||||||
|
return { |
||||||
|
...item, |
||||||
|
leaf: !item.hasChildren |
||||||
|
} |
||||||
|
})) |
||||||
|
}); |
||||||
|
}, |
||||||
|
addBtn: false, |
||||||
|
menu: false, |
||||||
|
size: 'small', |
||||||
|
props: { |
||||||
|
labelText: '标题', |
||||||
|
label: 'title', |
||||||
|
value: 'value', |
||||||
|
children: 'children' |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapGetters(["userInfo", "permission"]), |
||||||
|
permissionList() { |
||||||
|
return { |
||||||
|
addBtn: this.vaildData(this.permission.dept_add, false), |
||||||
|
viewBtn: this.vaildData(this.permission.dept_view, false), |
||||||
|
delBtn: this.vaildData(this.permission.dept_delete, false), |
||||||
|
editBtn: this.vaildData(this.permission.dept_edit, false) |
||||||
|
}; |
||||||
|
}, |
||||||
|
ids() { |
||||||
|
let ids = []; |
||||||
|
this.selectionList.forEach(ele => { |
||||||
|
ids.push(ele.id); |
||||||
|
}); |
||||||
|
return ids.join(","); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
nodeClick(data){ |
||||||
|
this.classCode = data.key; |
||||||
|
this.page.currentPage = 1; |
||||||
|
this.onLoad(this.page) |
||||||
|
}, |
||||||
|
|
||||||
|
initData() { |
||||||
|
getDeptTree().then(res => { |
||||||
|
const column = this.findObject(this.option.column, "parentId"); |
||||||
|
column.dicData = res.data.data; |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleAdd(row) { |
||||||
|
this.parentId = row.id; |
||||||
|
const column = this.findObject(this.option.column, "parentId"); |
||||||
|
column.value = row.id; |
||||||
|
column.addDisabled = true; |
||||||
|
this.$refs.crud.rowAdd(); |
||||||
|
}, |
||||||
|
rowSave(row, done, loading) { |
||||||
|
add(row).then((res) => { |
||||||
|
// 获取新增数据的相关字段 |
||||||
|
const data = res.data.data; |
||||||
|
row.id = data.id; |
||||||
|
row.deptCategoryName = data.deptCategoryName; |
||||||
|
row.tenantId = data.tenantId; |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "操作成功!" |
||||||
|
}); |
||||||
|
// 数据回调进行刷新 |
||||||
|
done(row); |
||||||
|
}, error => { |
||||||
|
window.console.log(error); |
||||||
|
loading(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
rowUpdate(row, index, done, loading) { |
||||||
|
update(row).then(() => { |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "操作成功!" |
||||||
|
}); |
||||||
|
// 数据回调进行刷新 |
||||||
|
done(row); |
||||||
|
}, error => { |
||||||
|
window.console.log(error); |
||||||
|
loading(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
rowDel(row, index, done) { |
||||||
|
this.$confirm("确定将选择数据删除?", { |
||||||
|
confirmButtonText: "确定", |
||||||
|
cancelButtonText: "取消", |
||||||
|
type: "warning" |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
return remove(row.id); |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "操作成功!" |
||||||
|
}); |
||||||
|
// 数据回调进行刷新 |
||||||
|
done(row); |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleDelete() { |
||||||
|
if (this.selectionList.length === 0) { |
||||||
|
this.$message.warning("请选择至少一条数据"); |
||||||
|
return; |
||||||
|
} |
||||||
|
this.$confirm("确定将选择数据删除?", { |
||||||
|
confirmButtonText: "确定", |
||||||
|
cancelButtonText: "取消", |
||||||
|
type: "warning" |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
return remove(this.ids); |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
// 刷新表格数据并重载 |
||||||
|
this.data = []; |
||||||
|
this.parentId = 0; |
||||||
|
this.$refs.crud.refreshTable(); |
||||||
|
this.$refs.crud.toggleSelection(); |
||||||
|
// 表格数据重载 |
||||||
|
this.onLoad(this.page); |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "操作成功!" |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
searchReset() { |
||||||
|
this.query.warnType = ''; |
||||||
|
this.query.area = '1'; |
||||||
|
this.startDate = ''; |
||||||
|
this.page.currentPage = 1 |
||||||
|
this.onLoad(this.page); |
||||||
|
}, |
||||||
|
searchChange(params, done) { |
||||||
|
this.query.warnType = params.warnType; |
||||||
|
this.query.startDate = params.startDate; |
||||||
|
this.page.currentPage = 1; |
||||||
|
this.onLoad(); |
||||||
|
done(); |
||||||
|
}, |
||||||
|
selectionChange(list) { |
||||||
|
this.selectionList = list; |
||||||
|
}, |
||||||
|
selectionClear() { |
||||||
|
this.selectionList = []; |
||||||
|
this.$refs.crud.toggleSelection(); |
||||||
|
}, |
||||||
|
beforeOpen(done, type) { |
||||||
|
if (["add", "edit"].includes(type)) { |
||||||
|
this.initData(); |
||||||
|
} |
||||||
|
if (["edit", "view"].includes(type)) { |
||||||
|
|
||||||
|
// getDept(this.form.id).then(res => { |
||||||
|
// this.form = res.data.data; |
||||||
|
// }); |
||||||
|
} |
||||||
|
done(); |
||||||
|
}, |
||||||
|
beforeClose(done) { |
||||||
|
// this.parentId = ""; |
||||||
|
// const column = this.findObject(this.option.column, "parentId"); |
||||||
|
// column.value = ""; |
||||||
|
// column.addDisabled = false; |
||||||
|
done(); |
||||||
|
}, |
||||||
|
currentChange(currentPage) { |
||||||
|
this.page.currentPage = currentPage; |
||||||
|
}, |
||||||
|
sizeChange(pageSize) { |
||||||
|
this.page.pageSize = pageSize; |
||||||
|
}, |
||||||
|
refreshChange() { |
||||||
|
this.onLoad(this.page, this.query); |
||||||
|
}, |
||||||
|
onLoad() { |
||||||
|
this.loading = true; |
||||||
|
getAlarmList(this.query.warnType,this.startDate,this.endDate,this.page.currentPage,this.page.pageSize,this.area,this.classCode).then(res => { |
||||||
|
this.data = res.data.data.records; |
||||||
|
// this.page.total = res.data.data.total |
||||||
|
this.page.total = res.data.data.total; |
||||||
|
console.log(this.page) |
||||||
|
this.loading = false; |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
// this.selectionClear(); |
||||||
|
}, |
||||||
|
// treeLoad(tree, treeNode, resolve) { |
||||||
|
// const parentId = tree.id; |
||||||
|
// getLazyList(parentId).then(res => { |
||||||
|
// resolve(res.data.data); |
||||||
|
// }); |
||||||
|
// } |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
</style> |
||||||
Loading…
Reference in new issue