chenyh
/
xiuos_IoT
forked from floraachy/xiuos_IoT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add terminal/alarm router

This commit is contained in:
龚祖望 2022-09-23 17:45:38 +08:00
parent 16c7a7cafc
commit 78ce7ce559
3 changed files with 166 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
xiuosiot-frontend/src/router/index.js
View File

@ -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',

13
xiuosiot-frontend/src/views/terminal/PLC/index.vue
View File

@ -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;

171
xiuosiot-frontend/src/views/terminal/alarm/index.vue
View File

@ -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>