Skip to content

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

目录-目录-菜单结构引发的样式布局问题，以及设备仪表盘修改

parent 64deb624
Show whitespace changes
Inline Side-by-side
Showing with 528 additions and 0 deletions
src/views/navigation.vue 0 → 100644
View file @ 2f06fd2a
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'Navigation'
}
</script>
src/views/overView/dashboard/equipment.vue 0 → 100644
View file @ 2f06fd2a
<template>
<div class="equipment">
<el-row :gutter="12">
<el-col :span="6">
<div class="equipmentLeft">
<el-card class="box-card">
<div style="display: flex;margin-top: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">全网信息统计</div>
</div>
<el-row style="margin-top: 20px">
<el-col :span="8">
<div class="cardChild">
<img :src="equipmentIcon" class="sidebar-logo">
<div class="cardFont">设备总数</div>
<div class="cardNum">104</div>
</div>
</el-col>
<el-col :span="8">
<div class="cardChild">
<img :src="monitorIcon" class="sidebar-logo">
<div class="cardFont">监控总数</div>
<div class="cardNum">2143</div>
</div>
</el-col>
<el-col :span="8">
<div class="cardChild">
<img :src="warnIcon" class="sidebar-logo">
<div class="cardFont">警告数</div>
<div class="cardNum">22</div>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="box-card">
<div style="display: flex;margin-top: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">故障统计TOP5</div>
</div>
<el-row style="margin-top: 20px">
<div id="echarts-enter" class="span_1">
<div id="dataCharts_enter" ref="chart_enter" style="height: 25vh" />
</div>
</el-row>
</el-card>
<el-card class="box-card">
<div style="display: flex;margin-top: 10px;margin-bottom: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">未处理警告</div>
</div>
<div v-for="(item, index) in messageList" :key="index" class="warnMessage">
<div>
<span>{{ item.label }}</span>
<span>{{ item.time }}</span>
</div>
</div>
</el-card>
</div>
</el-col>
<el-col :span="12">
<div class="equipmentMiddle">
<div class="bigTitle">IT一体化监控平台</div>
<div class="middleBody">
<div class="middleChild">
<div id="echarts-proLineMonitor" class="span_1">
<el-row>
<el-col :span="16">
<div id="dataCharts_proLineMonitor" ref="chart_stay" style="height: 30vh" />
</el-col>
<el-col :span="8">
<div class="middleLattice">
<div style="margin-bottom: 15px;margin-top: 15px">设备总数：104</div>
<div class="middleLatticeChild">正常：78</div>
<div class="middleLatticeChild">故障：9</div>
<div class="middleLatticeChild">危险：3</div>
<div class="middleLatticeChild">未知：14</div>
<div class="middleLatticeChild" style="border-bottom: 1px solid black">禁止：0</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="middleChild">
<div id="echarts-MonitoringPpoint" class="span_1">
<el-row>
<el-col :span="16">
<div id="dataCharts_MonitoringPpoint" ref="chart_stay" style="height: 30vh" />
</el-col>
<el-col :span="8">
<div class="middleLattice">
<div style="margin-bottom: 15px;margin-top: 15px">监测点总数：2143</div>
<div class="middleLatticeChild">正常：1658</div>
<div class="middleLatticeChild">故障：17</div>
<div class="middleLatticeChild">危险：12</div>
<div class="middleLatticeChild">未知：455</div>
<div class="middleLatticeChild" style="border-bottom: 1px solid black">禁止：1</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="equipmentRight">
<div style="display: flex">
<img style="cursor:pointer;" :src="expandPage" @click="handleExpand">
<div style="font-size: 30px;padding-right: 20px">{{ nowDate }}</div>
<div>
<div>{{ week }}</div>
<div>{{ date_show }}</div>
</div>
</div>
<el-card class="box-card">
<div style="display: flex;margin-top: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">全网信息统计</div>
</div>
<el-row style="margin-top: 20px">
<el-col :span="8">
<div class="cardChild">
<img :src="equipmentIcon" class="sidebar-logo">
<div class="cardFont">设备总数</div>
<div class="cardNum">104</div>
</div>
</el-col>
<el-col :span="8">
<div class="cardChild">
<img :src="monitorIcon" class="sidebar-logo">
<div class="cardFont">监控总数</div>
<div class="cardNum">2143</div>
</div>
</el-col>
<el-col :span="8">
<div class="cardChild">
<img :src="warnIcon" class="sidebar-logo">
<div class="cardFont">警告数</div>
<div class="cardNum">22</div>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="box-card">
<div style="display: flex;margin-top: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">故障统计TOP5</div>
</div>
<el-row style="margin-top: 20px">
<div id="echarts-enters" class="span_1">
<div id="dataCharts_enters" ref="chart_enter" style="height: 25vh" />
</div>
</el-row>
</el-card>
<el-card class="box-card">
<div style="display: flex;margin-top: 10px;margin-bottom: 10px">
<el-divider direction="vertical" />
<div class="cardTitle">未处理警告</div>
</div>
<div v-for="(item, index) in messageList" :key="index" class="warnMessage">
<div>
<span>{{ item.label }}</span>
<span>{{ item.time }}</span>
</div>
</div>
</el-card>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts'
import screenfull from 'screenfull'
export default {
name: 'Equipment',
data() {
return {
isFullscrenn: false,
expandPage: require('@/assets/image/logo.png'),
nowDate: '',
nowTimer: '', // 时间定时器
week: '',
date_show: '',
messageList: [
{ label: '智盘服务器-10.1.154', time: '2019-12-09' },
{ label: '智盘服务器-10.1.154', time: '2019-12-09' },
{ label: '智盘服务器-10.1.154', time: '2019-12-09' },
{ label: '智盘服务器-10.1.154', time: '2019-12-09' }
],
equipmentIcon: require('@/assets/image/logo.png'),
monitorIcon: require('@/assets/image/logo.png'),
warnIcon: require('@/assets/image/logo.png')
}
},
// 离开页面使用beforeDestroy() 销毁
beforeDestroy() {
if (this.nowTimer) {
clearInterval(this.nowTimer) // 在Vue实例销毁前，清除定时器
}
},
created() {
this.nowTimer = setInterval(this.getTime, 1000) // 定时获取当前时间
},
mounted() {
this.getDataTime()
this.genderStatistics()
this.getProLineMonitor()
this.getMonitorPoint()
// 通过监听内容部分的宽度让图表resize
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-proLineMonitor'), 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_proLineMonitor')).resize()
})
})
erd.listenTo(document.getElementById('echarts-MonitoringPpoint'), 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_MonitoringPpoint')).resize()
})
})
},
methods: {
handleExpand() {
this.isFullscrenn = !this.isFullscrenn
screenfull.toggle()
},
getTime() {
const date = new Date()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
if (this.hour > 12) {
this.hour -= 12
}
this.hour = check(hour)
this.minute = check(minute)
this.second = check(second)
function check(i) {
const num = (i < 10) ? ('0' + i) : i
return num
}
this.nowDate = this.hour + ':' + this.minute + ':' + this.second
},
getDataTime() {
const wk = new Date().getDay()
const yy = new Date().getFullYear()
const mm = new Date().getMonth() + 1
const dd = new Date().getDate()
const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
this.week = weeks[wk]
this.date_show = yy + '-' + mm + '-' + dd
},
/** 故障统计TOP5
* */
genderStatistics() {
const myChartGender = echarts.init(document.getElementById('dataCharts_enter'))
var optionEnter = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
top: '2%',
left: '5%',
right: '4%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['其他', '物联网', '应用和业务', '服务器', '网络设备']
},
series: [
{
type: 'bar',
data: [0, 0, 1, 1, 7]
}
]
}
myChartGender.setOption(optionEnter)
},
/** 设备*/
getProLineMonitor() {
const myChartAge = echarts.init(document.getElementById('dataCharts_proLineMonitor'))
var optionArea = {
tooltip: {
trigger: 'item'
},
grid: {
top: '2%',
left: '5%',
right: '4%',
containLabel: true
},
title: {
text: '设备',
left: 'center',
top: '50%',
textStyle: {
textAlign: 'center',
fill: '#333',
fontSize: 18,
fontWeight: 400
}
},
graphic: {
type: 'text',
left: 'center',
top: '40%',
style: {
text: '104',
textAlign: 'center',
fill: '#333',
fontSize: 20
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['30%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: [
{ value: 78, name: '正常 78个' },
{ value: 9, name: '故障 9个' },
{ value: 3, name: '危险 3个' },
{ value: 14, name: '未知 14个' },
{ value: 0, name: '禁止 0个' }
]
}
]
}
myChartAge.setOption(optionArea)
},
/** 监测点*/
getMonitorPoint() {
const myChartAge = echarts.init(document.getElementById('dataCharts_MonitoringPpoint'))
var optionArea = {
tooltip: {
trigger: 'item'
},
grid: {
top: '2%',
left: '5%',
right: '4%',
containLabel: true
},
title: {
text: '监测点',
left: 'center',
top: '50%',
textStyle: {
textAlign: 'center',
fill: '#333',
fontSize: 18,
fontWeight: 400
}
},
graphic: {
type: 'text',
left: 'center',
top: '40%',
style: {
text: '2143',
textAlign: 'center',
fill: '#333',
fontSize: 20
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['30%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: [
{ value: 1658, name: '正常 1658个' },
{ value: 17, name: '故障 17个' },
{ value: 12, name: '危险 12个' },
{ value: 455, name: '未知 455个' },
{ value: 1, name: '禁止 1个' }
]
}
]
}
myChartAge.setOption(optionArea)
}
}
}
</script>
<style lang="scss" >
.equipment{
padding: 15px;
.equipmentMiddle{
.middleLattice{
.middleLatticeChild{
width: 90px;
padding: 5px;
border: 1px solid black;
border-bottom: 0;
}
}
.middleBody{
.middleChild{
margin-bottom: 30px;
}
}
.bigTitle{
text-align: center;
font-size: 35px;
color: #46bcf2;
}
}
.box-card{
height: 25vh;
margin-bottom: 10px;
.el-divider--vertical{
width: 5px!important;
background-color: #46bcf2!important;
}
.warnMessage{
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #46bcf2;
}
.cardTitle{
text-align: left;
font-weight: bold;
}
.cardChild{
.sidebar-logo{
width: 55px;
}
.cardFont{
margin-top: 5px;
}
.cardNum{
margin-top: 10px;
font-size: 20px;
}
}
.el-card__body{
text-align: center!important;
padding: 10px!important;
}
.span_middle{
font-size: 14px;
}
.topChild{
width:160px;
padding: 15px;
display:inline-flex;
.cardLabel{
padding-left: 10px;
text-align: center;
}
}
}
}
</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