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