add terminal/alarm router
This commit is contained in:
龚祖望
parent
16c7a7cafc
commit
78ce7ce559
|
|
@ -131,7 +131,7 @@ export const constantRoutes = [
|
|||
path: 'alarm',
|
||||
name: 'Alarm',
|
||||
component: () => import('@/views/terminal/alarm/index'),
|
||||
meta: { title: '设备告警', disabled: true }
|
||||
meta: { title: '设备告警' }
|
||||
},
|
||||
{
|
||||
path: 'plc',
|
||||
|
|
|
|||
|
|
@ -856,14 +856,25 @@ export default {
|
|||
animation: 0.5s out;
|
||||
}
|
||||
.dialog_wrapper {
|
||||
z-index: 99;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
left: 230px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -230px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
z-index:2
|
||||
}
|
||||
.dialog-container {
|
||||
z-index: 10;
|
||||
width: 1100px;
|
||||
transform: none;
|
||||
margin: 15vh auto;
|
||||
|
|
|
|||
|
|
@ -1,39 +1,42 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-card>
|
||||
<el-card class="header_card">
|
||||
<div class="header">
|
||||
<div class="header_left">
|
||||
<div class="chart" />
|
||||
<div class="data">
|
||||
<p class="desc">告警数(7日)</p>
|
||||
<h1 class="num">17</h1>
|
||||
</div>
|
||||
<div class="data">
|
||||
<p class="desc">未处理告警数(7日)</p>
|
||||
<h1 class="num">8</h1>
|
||||
<div class="line" />
|
||||
<div id="chart" class="chart" />
|
||||
<div class="data-box">
|
||||
<div class="data">
|
||||
<p class="desc">告警数(7日)</p>
|
||||
<h1 class="num">17</h1>
|
||||
</div>
|
||||
<div class="data">
|
||||
<p class="desc">未处理告警数(7日)</p>
|
||||
<h1 class="num">8</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header_right">
|
||||
<div class="data">
|
||||
<p class="level">紧急</p>
|
||||
<p class="desc">紧急</p>
|
||||
<h1 class="num emergency">6</h1>
|
||||
</div>
|
||||
<div class="data">
|
||||
<p class="level">重要</p>
|
||||
<p class="desc">重要</p>
|
||||
<h1 class="num important">1</h1>
|
||||
</div>
|
||||
<div class="data">
|
||||
<p class="level">次要</p>
|
||||
<p class="desc">次要</p>
|
||||
<h1 class="num minor">8</h1>
|
||||
</div>
|
||||
<div class="data">
|
||||
<p class="level">提示</p>
|
||||
<p class="desc">提示</p>
|
||||
<h1 class="num info">1</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-col v-for="(alarm,index) in alarmList" :key="index" :span="12">
|
||||
<el-col :span="12">
|
||||
<div class="alarm-container">
|
||||
<div class="img-box">
|
||||
<img src="">
|
||||
|
|
@ -55,10 +58,142 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
option: {
|
||||
color: ['#FF0000', '#F7BA1E', '#00B5C0', '#AEAEAE'],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: [
|
||||
{
|
||||
orient: 'horizontal',
|
||||
icon: 'rect',
|
||||
x: '60%',
|
||||
y: '35%',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
align: 'left',
|
||||
data: ['紧要', '重要']
|
||||
},
|
||||
{
|
||||
orient: 'horizontal',
|
||||
icon: 'rect',
|
||||
x: '60%',
|
||||
y: '55%',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
align: 'left',
|
||||
data: ['次要', '提示']
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['55%', '70%'],
|
||||
center: ['30%', '50%'],
|
||||
data: [
|
||||
{
|
||||
name: '紧要',
|
||||
value: '3720'
|
||||
},
|
||||
{
|
||||
name: '重要',
|
||||
value: '2920'
|
||||
},
|
||||
{
|
||||
name: '次要',
|
||||
value: '2200'
|
||||
},
|
||||
{
|
||||
name: '提示',
|
||||
value: '1420'
|
||||
}
|
||||
],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
alarmList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.myChart = this.$echarts.init(document.getElementById('chart'))
|
||||
this.myChart.setOption(this.option)
|
||||
window.addEventListener('resize', this.myChart.resize)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<style lang="scss">
|
||||
.header_card {
|
||||
.el-card__body {
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
.header_left {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line{
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 30%;
|
||||
height: 40%;
|
||||
width: 1px;
|
||||
background-color:#DCDCDC ;
|
||||
}
|
||||
.chart {
|
||||
min-width: 200px;
|
||||
width: 50%;
|
||||
height: 150px;
|
||||
}
|
||||
.data-box {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.header_right {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.data {
|
||||
margin-top: 20px;
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Normal, Source Han Sans CN;
|
||||
color: #999999;
|
||||
}
|
||||
.num {
|
||||
font-size: 40px;
|
||||
font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emergency {
|
||||
color: #ff0000 !important;
|
||||
}
|
||||
.important {
|
||||
color: #f7ba1e !important;
|
||||
}
|
||||
.minor {
|
||||
color: #00b5c0 !important;
|
||||
}
|
||||
.info {
|
||||
color: #aeaeae !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue