648540858
3 years ago
4 changed files with 177 additions and 5 deletions
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<el-container> |
|||
<el-header> |
|||
<uiHeader></uiHeader> |
|||
</el-header> |
|||
<el-main> |
|||
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> |
|||
<span style="font-size: 1rem; font-weight: bold;">控制台</span> |
|||
<div style="position: absolute; right: 17rem; top: 0.3rem;"> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<div class="control-table" id="cpuInfo">cpuTable</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="control-table" id="memInfo">memTable</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<div class="control-table" id="loadInfo">table3</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="control-table" id="netInfo">table4</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-main> |
|||
</el-container> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import uiHeader from './UiHeader.vue' |
|||
|
|||
import echarts from 'echarts'; |
|||
export default { |
|||
name: 'app', |
|||
components: { |
|||
echarts, |
|||
uiHeader |
|||
}, |
|||
data() { |
|||
return { |
|||
cpuTable: { |
|||
chart: null, |
|||
option: { |
|||
title: { |
|||
text: 'CPU信息' |
|||
}, |
|||
legend: { |
|||
type: 'scroll' |
|||
}, |
|||
dataZoom: { |
|||
show: false, |
|||
start: 0, |
|||
end: 100 |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: true, |
|||
nameLocation: 'end', |
|||
data: [], // x轴数据 |
|||
name: '时间', // x轴名称 |
|||
}, |
|||
yAxis: {}, |
|||
label: {}, |
|||
tooltip: {}, |
|||
series: [] |
|||
}, |
|||
}, |
|||
memTableOption: { |
|||
// legend: {}, |
|||
xAxis: {}, |
|||
yAxis: {}, |
|||
label: {}, |
|||
tooltip: {}, |
|||
series: [] |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
|
|||
|
|||
}, |
|||
destroyed() { |
|||
|
|||
}, |
|||
methods: { |
|||
initTable: function () { |
|||
let that = this; |
|||
this.initCpuTable() |
|||
}, |
|||
initCpuTable: function (){ |
|||
this.cpuTable.chart = echarts.init(document.getElementById('cpuInfo')); |
|||
this.cpuTable.chart.setOption(this.cpuTable.option) |
|||
} |
|||
|
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
|||
.control-table { |
|||
background-color: #ffffff; |
|||
height: 25rem; |
|||
} |
|||
|
|||
.table-c { |
|||
border-right: 1px solid #dcdcdc; |
|||
border-bottom: 1px solid #dcdcdc; |
|||
} |
|||
|
|||
.table-c td { |
|||
border-left: 1px solid #dcdcdc; |
|||
border-top: 1px solid #dcdcdc; |
|||
padding: 0.2rem; |
|||
} |
|||
|
|||
.el-table { |
|||
width: 99.9% !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue