Commit 6619c92f authored by 张伯涛's avatar 张伯涛

修改

parent d29df8b9
......@@ -38,7 +38,7 @@ router.beforeEach((to, from, next) => {
} else {
alert('用户无权限')
store.dispatch('FedLogOut').then(() => {
next({ path: '/' })
next({ path: '/login' })
// window.location.href = `${process.env.VUE_APP_LOGIN}?redirect=${to.fullPath}&reLocation=${process.env.VUE_APP_NQ}`
})
}
......@@ -46,7 +46,7 @@ router.beforeEach((to, from, next) => {
} else {
alert('用户无权限')
store.dispatch('FedLogOut').then(() => {
next({ path: '/' })
next({ path: '/login' })
// window.location.href = `${process.env.VUE_APP_LOGIN}?redirect=${to.fullPath}&reLocation=${process.env.VUE_APP_NQ}`
})
}
......@@ -54,7 +54,7 @@ router.beforeEach((to, from, next) => {
.catch(err => {
store.dispatch('FedLogOut').then(() => {
Message.error(err)
next({ path: '/' })
next({ path: '/login' })
// window.location.href = `${process.env.VUE_APP_LOGIN}?redirect=${to.fullPath}&reLocation=${process.env.VUE_APP_NQ}`
})
})
......@@ -78,7 +78,7 @@ router.beforeEach((to, from, next) => {
next()
} else {
// 临时跳转
next({ path: '/' })
next({ path: '/login' })
// next(`http://login.court.com/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
// window.location.href = `${process.env.VUE_APP_LOGIN}?redirect=${to.fullPath}&reLocation=${process.env.VUE_APP_ZT}`
// next()
......
......@@ -33,36 +33,36 @@ import LayoutLogin from '@/layoutLogin'
* 基础页面,所有人可以访问
*/
export const constantRoutes = [
{
path: '/',
redirect: '/login',
hidden: true
},
// {
// path: '/',
// redirect: '/login',
// hidden: true
// },
{
path: '/login',
component: (resolve) => require(['@/views/login/login.vue'], resolve),
hidden: true
},
{
path: '/forgetPwd',
component: LayoutLogin,
redirect: '/forgetPwd/index',
hidden: true,
children: [
{
path: '/forgetPwd/index',
component: (resolve) => require(['@/views/login/forgetPwd'], resolve),
name: '忘记密码',
meta: { title: '忘记密码', icon: 'dashboard', noCache: true, affix: true }
},
{
path: '/forgetPwd/reSet',
component: (resolve) => require(['@/views/login/setPwd'], resolve),
name: '重置密码',
meta: { title: '重置密码', icon: 'dashboard', noCache: true, affix: true }
}
]
},
// {
// path: '/forgetPwd',
// component: LayoutLogin,
// redirect: '/forgetPwd/index',
// hidden: true,
// children: [
// {
// path: '/forgetPwd/index',
// component: (resolve) => require(['@/views/login/forgetPwd'], resolve),
// name: '忘记密码',
// meta: { title: '忘记密码', icon: 'dashboard', noCache: true, affix: true }
// },
// {
// path: '/forgetPwd/reSet',
// component: (resolve) => require(['@/views/login/setPwd'], resolve),
// name: '重置密码',
// meta: { title: '重置密码', icon: 'dashboard', noCache: true, affix: true }
// }
// ]
// },
{
path: '/404',
component: () => import('@/views/404'),
......
......@@ -90,7 +90,7 @@ export default {
updatePassW(params).then(res => {
if (res.code === 200) {
this.$router.push({
path: '/',
path: '/login',
query: this.$route.query
})
}
......
<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">
<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'
export default {
name: 'Equipment',
data() {
return {
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')
}
},
mounted() {
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: {
/** 故障统计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