Skip to content

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

试图展示状态统计

parent 3f7513a3
Show whitespace changes
Inline Side-by-side
Showing with 480 additions and 0 deletions
src/views/IntegratedMonitor/viewExhibition/stateStatistics.vue 0 → 100644
View file @ acc21ff3
<template>
<div class="stateModule">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtn" @click="handleAdd">添加</el-button>
<el-button class="headBtn" @click="handleAdd">修改</el-button>
<el-button class="headBtn">删除</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div style="padding: 15px 40px 15px;">
<div class="bar-header">
<span class="header-pre" />
<span class="bar-header-span">整体统计</span>
</div>
<div class="stateBody">
<div class="cakeClass">
<el-row :gutter="12">
<el-col :span="12">
<div id="echarts-enter" class="span_1">
<div id="dataCharts_enter" ref="chart_enter" style="height: 35vh" />
</div>
</el-col>
<el-col :span="12">
<div id="echarts-enter2" class="span_1">
<div id="dataCharts_enter2" ref="chart_enter" style="height: 35vh" />
</div>
</el-col>
</el-row>
</div>
<div class="columnClass">
<div class="bar-header">
<span class="header-pre" />
<span class="bar-header-span">故障统计</span>
</div>
<el-row :gutter="12">
<el-col :span="16">
<div id="echarts-enter3" class="span_1">
<div id="dataCharts_enter3" ref="chart_enter" style="height: 45vh" />
</div>
</el-col>
<el-col style="margin-top: 30px" :span="8">
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">服务器</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">应用</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">网络</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">安全</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">存储</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">虚拟机</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">物联网</div>
</div>
</el-col>
</el-row>
</div>
<div class="columnClass">
<div class="bar-header">
<span class="header-pre" />
<span class="bar-header-span">危险统计</span>
</div>
<el-row :gutter="12">
<el-col :span="16">
<div id="echarts-enter4" class="span_1">
<div id="dataCharts_enter4" ref="chart_enter" style="height: 45vh" />
</div>
</el-col>
<el-col style="margin-top: 30px" :span="8">
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">服务器</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">应用</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">网络</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">安全</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">存储</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">虚拟机</div>
</div>
<div style="display: flex">
<span class="columSquare"></span>
<div class="columLabel">物联网</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<el-dialog class="addGroup" width="50%" title="添加页面" :visible.sync="addDialog">
<el-form ref="addWarnForm" label-width="auto" :model="addForm">
<el-form-item label="名称:">
<el-input v-model="addForm.name" />
</el-form-item>
<el-form-item label="选择设备:">
<div class="equipmentDiv">
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps">
</el-tree>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog">确定</el-button>
<el-button @click="closeDialog">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
import * as echarts from 'echarts'
export default {
name: 'StateStatistics',
data() {
return {
data: [{
id: 1,
label: '本机容器',
children: [{
id: 4,
label: '虚拟化平台',
children: [{
id: 9,
label: '虚拟设备'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '服务器硬件',
children: [{
id: 5,
label: '云打印服务器'
}, {
id: 6,
label: '服务器'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
addDialog: false,
addForm: {
name: '',
equipment: ''
}
}
},
created() {
},
mounted() {
this.genderStatistics()
this.genderStatistics2()
this.genderStatistics3()
this.genderStatistics4()
this.handleExpand() // 全屏
var elementResizeDetectorMaker = require('element-resize-detector')
var erd = elementResizeDetectorMaker()
var that = this
erd.listenTo(document.getElementById('echarts-enter'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_enter')).resize()
})
})
erd.listenTo(document.getElementById('echarts-enter2'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_enter2')).resize()
})
})
erd.listenTo(document.getElementById('echarts-enter3'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_enter3')).resize()
})
})
erd.listenTo(document.getElementById('echarts-enter4'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_enter4')).resize()
})
})
},
methods: {
/** 饼状图（1）*/
genderStatistics() {
const myChartGender = echarts.init(document.getElementById('dataCharts_enter'))
var optionEnter = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
bottom: 'bottom'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['50%', '70%'],
data: [
{ value: 9, name: '故障:' },
{ value: 3, name: '危险:' },
{ value: 83, name: '正常:' },
{ value: 18, name: '未知:' },
{ value: 0, name: '禁止:' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChartGender.setOption(optionEnter)
},
/** 饼状图（2）*/
genderStatistics2() {
const myChartGender = echarts.init(document.getElementById('dataCharts_enter2'))
var optionEnter2 = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
bottom: 'bottom'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['50%', '70%'],
data: [
{ value: 17, name: '故障:' },
{ value: 12, name: '危险:' },
{ value: 1693, name: '正常:' },
{ value: 454, name: '未知:' },
{ value: 1, name: '禁止:' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChartGender.setOption(optionEnter2)
},
/** 柱状图（1）*/
genderStatistics3() {
const myChartGender = echarts.init(document.getElementById('dataCharts_enter3'))
var optionEnter3 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['服务器/监测点', '应用/监测点', '网络/监测点', '安全/监测点', '存储/监测点', '机/监测点', '物联网/监测点']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
},
{
data: [12, 20, 15, 80, 70, 10, 30],
type: 'bar'
}
]
}
myChartGender.setOption(optionEnter3)
},
/** 柱状图（2）*/
genderStatistics4() {
const myChartGender = echarts.init(document.getElementById('dataCharts_enter4'))
var optionEnter4 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['服务器/监测点', '应用/监测点', '网络/监测点', '安全/监测点', '存储/监测点', '机/监测点', '物联网/监测点']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
},
{
data: [12, 20, 15, 80, 70, 10, 30],
type: 'bar'
}
]
}
myChartGender.setOption(optionEnter4)
},
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
handleAdd() {
this.addDialog = true
},
closeDialog() {
this.addDialog = false
}
}
}
</script>
<style lang="scss">
.stateModule{
.columLabel{
padding: 8px;
}
.columSquare{
background-color: #5470C6;
margin-right: 6px;
margin-top: 14px;
width: 9px;
height: 9px;
display: inline-block;
}
.columnClass{
margin-top: 20px;
}
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.bar-header{
padding-top: 15px;
.header-pre{
margin-right: 4px;
background-color: #666666;
width: 4px;
height: 20px;
display: inline-block;
}
.bar-header-span{
vertical-align: middle;
display: inline-block;
padding-bottom: 10px;
font-size: 20px;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: #666666;
}
}
}
.addGroup{
.equipmentDiv{
max-height: 200px;
height: 200px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
}
}
</style>
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