Skip to content

I
IT-monitor
Commit 219867c1 authored by 张伯涛's avatar 张伯涛
Browse files
Options

状态统计

parent 8fce3767
Hide whitespace changes
Inline Side-by-side
Showing with 34 additions and 32 deletions
src/views/IntegratedMonitor/viewExhibition/stateStatistics.vue
View file @ 219867c1
...@@ -37,39 +37,39 @@ ...@@ -37,39 +37,39 @@
<span class="bar-header-span">故障统计</span> <span class="bar-header-span">故障统计</span>
</div> </div>
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="16"> <el-col :span="15">
<div id="echarts-enter3" class="span_1"> <div id="echarts-enter3" class="span_1">
<div id="dataCharts_enter3" ref="chart_enter" style="height: 45vh" /> <div id="dataCharts_enter3" ref="chart_enter" style="height: 45vh" />
</div> </div>
</el-col> </el-col>
<el-col style="margin-top: 30px" :span="8"> <el-col style="margin-top: 30px" :span="9">
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">服务器</div> <div class="columLabel">服务器:1 个设备(11.11%)，4 个监测点(23.53%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">应用</div> <div class="columLabel">应用:1 个设备(11.11%)，1 个监测点(5.88%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">网络</div> <div class="columLabel">网络:7 个设备(77.78%)，12 个监测点(70.59%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">安全</div> <div class="columLabel">安全:0 个设备(0.00%)，0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">存储</div> <div class="columLabel">存储:0 个设备(0.00%)，0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">虚拟机</div> <div class="columLabel">虚拟机:0 个设备(0.00%)，0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">物联网</div> <div class="columLabel">物联网:0 个设备(0.00%)，0 个监测点(0.00%)</div>
</div> </div>
</el-col> </el-col>
...@@ -81,39 +81,39 @@ ...@@ -81,39 +81,39 @@
<span class="bar-header-span">危险统计</span> <span class="bar-header-span">危险统计</span>
</div> </div>
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="16"> <el-col :span="15">
<div id="echarts-enter4" class="span_1"> <div id="echarts-enter4" class="span_1">
<div id="dataCharts_enter4" ref="chart_enter" style="height: 45vh" /> <div id="dataCharts_enter4" ref="chart_enter" style="height: 45vh" />
</div> </div>
</el-col> </el-col>
<el-col style="margin-top: 30px" :span="8"> <el-col style="margin-top: 30px" :span="9">
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">服务器</div> <div class="columLabel">服务器:3 个设备(75.00%)，11 个监测点(91.67%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">应用</div> <div class="columLabel">应用: 0 个设备(0.00%)，0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">网络</div> <div class="columLabel">网络:1 个设备(25.00%)，1 个监测点(8.33%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">安全</div> <div class="columLabel">安全:0 个设备(0.00%)，0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">存储</div> <div class="columLabel">存储:0 个设备(0.00%)，0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">虚拟机</div> <div class="columLabel">虚拟机: 0 个设备(0.00%)，0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">物联网</div> <div class="columLabel">物联网: 0 个设备(0.00%)，0 个监测点(0.00%)</div>
</div> </div>
</el-col> </el-col>
...@@ -268,7 +268,8 @@ export default { ...@@ -268,7 +268,8 @@ export default {
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
bottom: 'bottom' left: 'left',
top: '50%'
}, },
series: [ series: [
{ {
...@@ -276,11 +277,11 @@ export default { ...@@ -276,11 +277,11 @@ export default {
type: 'pie', type: 'pie',
radius: ['50%', '70%'], radius: ['50%', '70%'],
data: [ data: [
{ value: 9, name: '故障:' }, { value: 9, name: '故障: 9个, 8.49%' },
{ value: 3, name: '危险:' }, { value: 3, name: '危险: 3 个，2.83%' },
{ value: 83, name: '正常:' }, { value: 83, name: '正常: 83 个，78.30%' },
{ value: 18, name: '未知:' }, { value: 18, name: '未知: 11 个，10.38%' },
{ value: 0, name: '禁止:' } { value: 0, name: '禁止: 0 个，0.00%' }
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
...@@ -303,7 +304,8 @@ export default { ...@@ -303,7 +304,8 @@ export default {
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
bottom: 'bottom' left: 'left',
top: '50%'
}, },
series: [ series: [
{ {
...@@ -311,11 +313,11 @@ export default { ...@@ -311,11 +313,11 @@ export default {
type: 'pie', type: 'pie',
radius: ['50%', '70%'], radius: ['50%', '70%'],
data: [ data: [
{ value: 17, name: '故障:' }, { value: 17, name: '故障: 17 个，0.78%' },
{ value: 12, name: '危险:' }, { value: 12, name: '危险: 12 个，0.55%' },
{ value: 1693, name: '正常:' }, { value: 1693, name: '正常: 1693 个，77.80%' },
{ value: 454, name: '未知:' }, { value: 454, name: '未知: 453 个，20.82%' },
{ value: 1, name: '禁止:' } { value: 1, name: '禁止: 1 个，0.05%' }
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
...@@ -378,11 +380,11 @@ export default { ...@@ -378,11 +380,11 @@ export default {
}, },
series: [ series: [
{ {
data: [120, 200, 150, 80, 70, 110, 130], data: [80, 140, 150, 180, 40, 30, 130],
type: 'bar' type: 'bar'
}, },
{ {
data: [12, 20, 15, 80, 70, 10, 30], data: [200, 60, 40, 50, 170, 110, 210],
type: 'bar' type: 'bar'
} }
] ]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment