zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update server.vue

This commit is contained in:
sakuya 2021-10-10 22:01:57 +08:00
parent 067ce88ed4
commit 0b5e515e29
1 changed files with 251 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/views/template/server.vue
View File

@ -1,10 +1,21 @@
<template>
<el-container>
<el-aside width="220px">
<el-tree class="menu" :data="group" highlight-current></el-tree>
<el-container>
<el-header>
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
</el-header>
<el-main class="nopadding">
<el-tree ref="group" class="menu" :data="group" node-key="code" :current-node-key="group[0].code" highlight-current :filter-node-method="groupFilterNode"></el-tree>
</el-main>
</el-container>
</el-aside>
<el-main style="padding:0;">
<el-tabs class="tabs-pages" stretch>
<el-tab-pane label="服务器概况" lazy>
<el-main>
<el-card shadow="never" header="Server hardware status">
<el-card shadow="never" header="SQL Server">
<el-row>
<el-col :span="8">
<div class="server-top-item">
@ -51,7 +62,7 @@
<scEcharts ref="cpu" height="100%" :option="option.cpu"></scEcharts>
</div>
<div class="data">
<el-descriptions :column="2" size="mini" border>
<el-descriptions :column="2" size="small" border title="Information">
<el-descriptions-item label="利用率">35%</el-descriptions-item>
<el-descriptions-item label="速度">2.67 GHz</el-descriptions-item>
<el-descriptions-item label="内核">4</el-descriptions-item>
@ -126,6 +137,43 @@
</el-tabs>
</el-card>
</el-main>
</el-tab-pane>
<el-tab-pane label="报警管理" lazy>
<el-main>
<el-card shadow="never" header="Event">
<scTable ref="table" :data="event" stripe>
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="事件" prop="title" width="150"></el-table-column>
<el-table-column label="等级" prop="type" width="150"></el-table-column>
<el-table-column label="通知" prop="push" ></el-table-column>
<el-table-column label="触发时间" prop="time" width="150"></el-table-column>
</scTable>
</el-card>
<el-card shadow="never" header="Rule" style="margin-top: 15px;">
<el-table :data="rule" stripe>
<el-table-column label="规则名称" prop="name" width="150"></el-table-column>
<el-table-column label="描述" prop="title" width="150"></el-table-column>
<el-table-column label="告警类型" prop="type" width="150"></el-table-column>
<el-table-column label="通知" prop="push" width="150"></el-table-column>
<el-table-column></el-table-column>
<el-table-column label="操作" width="150" align="right">
<el-dropdown>
<el-button type="text" size="mini" icon="el-icon-more"></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>编辑</el-dropdown-item>
<el-dropdown-item divided>删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-table-column>
</el-table>
<el-button type="primary" icon="el-icon-plus" style="margin-top: 20px;"></el-button>
</el-card>
</el-main>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</template>
@ -139,7 +187,9 @@
},
data() {
return {
group: [{
groupFilterText: '',
group: [
{
label: "SQL Server",
icon: "el-icon-coin",
code: "1",
@ -171,6 +221,34 @@
percentage: 100
}
],
event: [
{
title: 'Disk 大于 90%',
type: '告警事件',
push: '短信',
time: '2021-10-09 21:25:19'
},
{
title: 'Disk 大于 90%',
type: '致命事件',
push: '短信',
time: '2021-10-09 21:25:19'
}
],
rule: [
{
name: 'test_cpu',
title: '测试CPU报警',
type: 'CPU',
push: '短信'
},
{
name: 'test_cpu',
title: '测试CPU报警',
type: 'CPU',
push: '短信'
}
],
option: {
cpu: {
tooltip: {
@ -404,12 +482,16 @@
type: 'dashed',
color: '#a74f01'
}
}
]
}]
}
}
}
},
watch: {
groupFilterText(val) {
this.$refs.group.filter(val);
}
},
mounted() {
setInterval(() => {
this.option.cpu.series[0].data.shift()
@ -428,24 +510,42 @@
this.option.network.series[1].data.push(Math.round(Math.random() * 10));
this.option.network.xAxis.data.shift();
this.option.network.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
}, 1000)
},
methods: {
tabClick(){
//树过滤
groupFilterNode(value, data){
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
tabClick(tab) {
this.$nextTick(() => {
// this.$refs.cpu.myChart && this.$refs.cpu.myChart.resize()
// this.$refs.memory.myChart && this.$refs.memory.myChart.resize()
// this.$refs.netword.myChart && this.$refs.netword.myChart.resize()
if(tab.props.label == 'CPU' && this.$refs.cpu.myChart){
this.$refs.cpu.myChart.resize()
}
if(tab.props.label == 'Memory' && this.$refs.memory.myChart){
this.$refs.memory.myChart.resize()
}
if(tab.props.label == 'Network' && this.$refs.network.myChart){
this.$refs.network.myChart.resize()
}
})
}
}
}
</script>
<style>
.tabs-pages {display: flex;flex-flow: column;flex-shrink: 0;height: 100%;}
.tabs-pages > .el-tabs__header {background: #fff;margin: 0;}
.tabs-pages > .el-tabs__header .el-tabs__nav-wrap {display: flex;justify-content:center;}
.tabs-pages > .el-tabs__header .el-tabs__item {height:60px;line-height: 60px;font-size: 14px;}
.tabs-pages > .el-tabs__content {overflow-x: hidden;overflow: auto;}
[data-theme="dark"] .tabs-pages > .el-tabs__header {background: #2b2b2b;}
</style>
<style scoped>
.server-top-item {
text-align: center;
}
@ -492,7 +592,7 @@
}
.server-item-info .data {
margin-top: 15px;
margin-top: 20px;
}
.disk-list-item {
@ -503,9 +603,11 @@
font-weight: normal;
font-size: 12px;
}
.disk-list-item .el-progress {
margin: 5px 0;
}
.disk-list-item p {
color: #999;
font-size: 12px;