<script setup>
|
import {onMounted, ref, reactive} from "vue";
|
import * as echarts from 'echarts/core';
|
import Table from '@/components/Table/index.vue'
|
import { warnHistory, exportWarnHistory } from '@/api/screen/warning/index.js'
|
import { exportBlobFile } from '@/utils/index.js'
|
|
const tableRef = ref(null)
|
const timeType = ref(0)
|
const warnChartRef = ref()
|
const exportTime = ref()
|
const searchData = reactive({
|
createTimeRange: ''
|
})
|
|
const openDialog = ref(false)
|
const dialogInfo = ref()
|
|
let warnCharts = null;
|
let tableHead = [
|
{ prop: 'code', label: '报警代码' },
|
{ prop: 'facilityName', label: '报警设备', },
|
{ prop: 'description', label: '报警内容' },
|
{ prop: 'lastTimeView', label: '报警时间' },
|
{ prop: 'isConfirm', 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 searchTable = () => {
|
if(exportTime.value && exportTime.value.length > 0) {
|
searchData.createTimeRange = exportTime.value[0] + '~' + exportTime.value[1]
|
}else {
|
searchData.createTimeRange = ''
|
}
|
tableRef.value.getData()
|
}
|
|
// 导出报警报表
|
const exportWarnTabl = () => {
|
exportWarnHistory({ createTimeRange: searchData.createTimeRange }).then(res => {
|
exportBlobFile(res, '报警记录')
|
})
|
}
|
|
// 获取报警内容
|
const getWarnInfi = (data) => {
|
dialogInfo.value = data
|
openDialog.value = true
|
}
|
|
// 处理报警内容
|
const handleComfirm = () => {}
|
|
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>
|
<el-date-picker
|
v-model="exportTime"
|
type="datetimerange"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
style="width: 28rem"
|
clearable
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
/>
|
<el-button type="primary" style="margin-left: 15px" @click="searchTable">搜索</el-button>
|
</div>
|
</div>
|
<div class="warn-table">
|
<Table :getList="warnHistory" :searchData="searchData" :headList="tableHead" ref="tableRef">
|
<template #isConfirm="scope">
|
<div v-if="scope.row.isConfirm === 200" style="color: #1ab394">已处理</div>
|
<div v-else-if="scope.row.isConfirm === 20" style="color: #e8ab04" @click="getWarnInfi(scope.row)">未处理</div>
|
<div v-else style="color: #f30101" @click="getWarnInfi(scope.row)">待确认</div>
|
</template>
|
<template v-slot:pagination>
|
<el-button type="success" style="width: 6rem" @click="exportWarnTabl">导出</el-button>
|
</template>
|
</Table>
|
</div>
|
</div>
|
<el-dialog
|
v-model="openDialog"
|
title="报警确认框"
|
width="40rem"
|
show-close
|
class="warnDialog"
|
>
|
<div class="message">
|
<div class="message-item">
|
<div class="title">报警代码:</div>
|
<div class="val">{{dialogInfo.code}}</div>
|
</div>
|
<div class="message-item">
|
<div class="title">报警设备:</div>
|
<div class="val">{{dialogInfo.facilityName}}</div>
|
</div>
|
<div class="message-item">
|
<div class="title">报警内容:</div>
|
<div class="val">{{dialogInfo.description}}</div>
|
</div>
|
<div class="message-line">
|
<div class="title">报警时间:</div>
|
<div class="val">{{dialogInfo.lastTime}}</div>
|
</div>
|
<div class="message-line">
|
<div class="title">报警确认:</div>
|
<div class="val">
|
<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>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="openDialog = false">取消</el-button>
|
<el-button type="primary" @click="handleComfirm">
|
确定
|
</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</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;
|
}
|
:deep(.el-date-editor){
|
flex-grow: 0;
|
}
|
.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%;
|
}
|
}
|
}
|
.warnDialog{
|
.message{
|
display: flex;
|
flex-wrap: wrap;
|
.message-item{
|
width: 50%;
|
display: flex;
|
align-items: center;
|
padding: 10px 0;
|
.val{
|
margin-left: 10px;
|
}
|
}
|
.message-line{
|
width: 100%;
|
padding: 10px 0;
|
display: flex;
|
align-items: center;
|
.val{
|
margin-left: 10px;
|
}
|
}
|
}
|
}
|
</style>
|
