<script setup>
|
import {onMounted, ref} from "vue";
|
import * as echarts from 'echarts/core';
|
import Table from '@/components/Table/index.vue'
|
|
const timeType = ref(0)
|
const warnChartRef = ref()
|
let warnCharts = null;
|
let tableHead = [
|
{ prop: 'code', label: '报警代码' },
|
{ prop: 'shebei', label: '报警设备', },
|
{ prop: 'content', label: '报警内容' },
|
{ prop: 'time', label: '报警时间' },
|
{ prop: 'sure', label: '报警确认', slot: true },
|
]
|
|
const initWarnChart = () => {
|
if(warnChartRef.value) {
|
warnCharts = echarts.init(warnChartRef.value);
|
const options = {
|
tooltip: {
|
trigger: 'axis',
|
},
|
grid: {
|
top: 80,
|
left: 60,
|
right: 60,
|
bottom: 60
|
},
|
xAxis: {
|
type: 'category',
|
data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
|
axisLabel: {
|
color: '#fff',
|
fontSize: '1.2rem'
|
}
|
},
|
yAxis: {
|
type: 'value',
|
name: '次',
|
nameTextStyle: {
|
color: '#fff',
|
fontSize: '1.2rem'
|
},
|
axisLabel: {
|
color: '#fff',
|
fontSize: '1.2rem'
|
}
|
},
|
series: [
|
{
|
data: [36, 44, 38, 24, 63],
|
type: 'bar',
|
itemStyle: {
|
color: 'rgba(187,207,255,0.6)'
|
}
|
}
|
]
|
}
|
warnCharts.setOption(options);
|
}
|
}
|
|
const getTableData = () => {
|
return new Promise(resolve => {
|
let arr = {
|
list: [
|
{ code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
|
{ code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
|
{ code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
|
{ code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
|
{ code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
|
{ code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
|
{ code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
|
{ code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
|
{ code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
|
{ code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
|
],
|
total: 30,
|
}
|
resolve(arr)
|
})
|
}
|
|
onMounted(() => {
|
initWarnChart()
|
})
|
</script>
|
|
<template>
|
<div class="warn">
|
<div class="warn-l item">
|
<div class="item-t">
|
<div class="name">报警分析</div>
|
<div class="select">
|
<el-radio-group v-model="timeType">
|
<el-radio :value="1">日</el-radio>
|
<el-radio :value="2">月</el-radio>
|
<el-radio :value="3">年</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
<div class="charts" ref="warnChartRef"></div>
|
</div>
|
<div class="warn-r item">
|
<div class="item-t">
|
<div class="name">报警记录</div>
|
</div>
|
<div class="warn-table">
|
<Table :getList="getTableData" :headList="tableHead">
|
<template #sure="scope">
|
<div v-if="scope.row.sure === 1" style="color: #1ab394">已处理</div>
|
<div v-else-if="scope.row.sure === 2" style="color: #e8ab04">未处理</div>
|
<div v-else style="color: #f30101">待确认</div>
|
</template>
|
<template v-slot:pagination>
|
<el-button type="success" style="width: 6rem">导出</el-button>
|
</template>
|
</Table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.warn{
|
height: 100%;
|
background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
gap: 30px;
|
.item{
|
width: 48%;
|
height: 96%;
|
background: rgba(23,108,229,0.3);
|
border: 1px solid #176CE5;
|
border-radius: 8px;
|
.item-t{
|
height: 10%;
|
padding: 0 30px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.name{
|
font-size: 36px;
|
color: #fff;
|
}
|
.select{
|
:deep(.el-radio){
|
color: #fff;
|
}
|
:deep(.el-radio__label){
|
font-size: 20px;
|
}
|
:deep(.el-radio__input.is-checked+.el-radio__label){
|
color: #00ff00;
|
}
|
:deep(.el-radio__input.is-checked .el-radio__inner){
|
background-color: #00ff00;
|
}
|
}
|
}
|
.charts{
|
height: 90%;
|
}
|
.warn-table{
|
padding: 0 20px;
|
height: 90%;
|
}
|
}
|
}
|
</style>
|
