Update server.vue
This commit is contained in:
sakuya
parent
067ce88ed4
commit
0b5e515e29
|
|
@ -1,130 +1,178 @@
|
|||
<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>
|
||||
<el-card shadow="never" header="Server hardware status">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="server-top-item">
|
||||
<el-progress type="dashboard" :percentage="25" :stroke-width="8" :width="150"
|
||||
:color="colors">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}<em>%</em></span>
|
||||
<span class="percentage-label">CPU</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="server-top-item">
|
||||
<el-progress type="dashboard" :percentage="33.2" :stroke-width="8" :width="150"
|
||||
:color="colors">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}<em>%</em></span>
|
||||
<span class="percentage-label">Memory</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="server-top-item">
|
||||
<el-progress type="dashboard" :percentage="81.0" :stroke-width="8" :width="150"
|
||||
:color="colors">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}<em>%</em></span>
|
||||
<span class="percentage-label">Disk</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-tabs style="margin-top: 20px;" @tab-click="tabClick">
|
||||
<el-tab-pane label="CPU" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>CPU</label>
|
||||
<span>Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz</span>
|
||||
</div>
|
||||
<div class="chart" style="border-color: #409EFF;background: rgba(64,158,255,0.05);">
|
||||
<scEcharts ref="cpu" height="100%" :option="option.cpu"></scEcharts>
|
||||
</div>
|
||||
<div class="data">
|
||||
<el-descriptions :column="2" size="mini" border>
|
||||
<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>
|
||||
<el-descriptions-item label="逻辑处理器">8</el-descriptions-item>
|
||||
<el-descriptions-item label="正常运行时间">0:06:06:04</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Memory" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>Memory</label>
|
||||
<span>16.0 GB</span>
|
||||
</div>
|
||||
<div class="chart" style="border-color: #8b12ae;background: rgba(139,18,174,0.05);">
|
||||
<scEcharts ref="memory" height="100%" :option="option.memory"></scEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Disk" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>Disk</label>
|
||||
<span>SAMSUNG MZVLB512HBJQ-000L7</span>
|
||||
</div>
|
||||
<div class="disk-list">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(C)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="50" :color="colors"/>
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
<el-main style="padding:0;">
|
||||
|
||||
<el-tabs class="tabs-pages" stretch>
|
||||
<el-tab-pane label="服务器概况" lazy>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="SQL Server">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="server-top-item">
|
||||
<el-progress type="dashboard" :percentage="25" :stroke-width="8" :width="150"
|
||||
:color="colors">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}<em>%</em></span>
|
||||
<span class="percentage-label">CPU</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="server-top-item">
|
||||
<el-progress type="dashboard" :percentage="33.2" :stroke-width="8" :width="150"
|
||||
:color="colors">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}<em>%</em></span>
|
||||
<span class="percentage-label">Memory</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="server-top-item">
|
||||
<el-progress type="dashboard" :percentage="81.0" :stroke-width="8" :width="150"
|
||||
:color="colors">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}<em>%</em></span>
|
||||
<span class="percentage-label">Disk</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-tabs style="margin-top: 20px;" @tab-click="tabClick">
|
||||
<el-tab-pane label="CPU" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>CPU</label>
|
||||
<span>Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(D)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="60" :color="colors"/>
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
<div class="chart" style="border-color: #409EFF;background: rgba(64,158,255,0.05);">
|
||||
<scEcharts ref="cpu" height="100%" :option="option.cpu"></scEcharts>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(E)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="81" :color="colors"/>
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
<div class="data">
|
||||
<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>
|
||||
<el-descriptions-item label="逻辑处理器">8</el-descriptions-item>
|
||||
<el-descriptions-item label="正常运行时间">0:06:06:04</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(F)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="15.5" :color="colors"/>
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Memory" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>Memory</label>
|
||||
<span>16.0 GB</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Network" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>Network</label>
|
||||
<span>Intel(R) Ethernet Connection (6) 1219-V</span>
|
||||
</div>
|
||||
<div class="chart" style="border-color: #a74f01;background: rgba(167,79,1,0.05);">
|
||||
<scEcharts ref="network" height="100%" :option="option.network"></scEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
<div class="chart" style="border-color: #8b12ae;background: rgba(139,18,174,0.05);">
|
||||
<scEcharts ref="memory" height="100%" :option="option.memory"></scEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Disk" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>Disk</label>
|
||||
<span>SAMSUNG MZVLB512HBJQ-000L7</span>
|
||||
</div>
|
||||
<div class="disk-list">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(C)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="50" :color="colors" />
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(D)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="60" :color="colors" />
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(E)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="81" :color="colors" />
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(F)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="15.5" :color="colors" />
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Network" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>Network</label>
|
||||
<span>Intel(R) Ethernet Connection (6) 1219-V</span>
|
||||
</div>
|
||||
<div class="chart" style="border-color: #a74f01;background: rgba(167,79,1,0.05);">
|
||||
<scEcharts ref="network" height="100%" :option="option.network"></scEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</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,24 +187,26 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
group: [{
|
||||
label: "SQL Server",
|
||||
icon: "el-icon-coin",
|
||||
code: "1",
|
||||
groupFilterText: '',
|
||||
group: [
|
||||
{
|
||||
label: "SQL Server",
|
||||
icon: "el-icon-coin",
|
||||
code: "1",
|
||||
|
||||
},{
|
||||
label: "Web Server",
|
||||
icon: "el-icon-monitor",
|
||||
code: "2",
|
||||
},{
|
||||
label: "Api Server",
|
||||
icon: "el-icon-monitor",
|
||||
code: "3",
|
||||
},{
|
||||
label: "Nginx Server",
|
||||
icon: "el-icon-guide",
|
||||
code: "4",
|
||||
}
|
||||
}, {
|
||||
label: "Web Server",
|
||||
icon: "el-icon-monitor",
|
||||
code: "2",
|
||||
}, {
|
||||
label: "Api Server",
|
||||
icon: "el-icon-monitor",
|
||||
code: "3",
|
||||
}, {
|
||||
label: "Nginx Server",
|
||||
icon: "el-icon-guide",
|
||||
code: "4",
|
||||
}
|
||||
],
|
||||
colors: [{
|
||||
color: '#409EFF',
|
||||
|
|
@ -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: {
|
||||
|
|
@ -386,7 +464,7 @@
|
|||
opacity: 0.1,
|
||||
color: '#a74f01'
|
||||
},
|
||||
},{
|
||||
}, {
|
||||
name: '发送 Kbps',
|
||||
data: (function() {
|
||||
var res = [];
|
||||
|
|
@ -401,15 +479,19 @@
|
|||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type:'dashed',
|
||||
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;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.disk-list-item p {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue