From 01b9e7244825cac11146e3961cafa6525dad56f1 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期五, 25 四月 2025 17:24:33 +0800
Subject: [PATCH] fix:水温监控添加定时器
---
src/views/screen/flow/warning/index.vue | 295 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 219 insertions(+), 76 deletions(-)
diff --git a/src/views/screen/flow/warning/index.vue b/src/views/screen/flow/warning/index.vue
index 4ee3228..716aec9 100644
--- a/src/views/screen/flow/warning/index.vue
+++ b/src/views/screen/flow/warning/index.vue
@@ -1,89 +1,138 @@
<script setup>
-import {onMounted, ref} from "vue";
+import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import Table from '@/components/Table/index.vue'
+import { warnHistory, exportWarnHistory, editConfirm, getWarnChartsInfo } from '@/api/screen/warning/index.js'
+import { exportBlobFile } from '@/utils/index.js'
+import { ElMessage } from 'element-plus'
-const timeType = ref(0)
+const tableRef = ref(null)
+const timeType = ref(1)
const warnChartRef = ref()
+const exportTime = ref()
+const searchData = reactive({
+ createTimeRange: '',
+ monitorType: 2
+})
+
+const openDialog = ref(false)
+const dialogInfo = ref()
+const warnStatus = ref(0)
+
+const warnChartData = ref([])
+
let warnCharts = null;
let tableHead = [
{ prop: 'code', label: '报警代码' },
- { prop: 'shebei', label: '报警设备', },
- { prop: 'content', label: '报警内容' },
- { prop: 'time', label: '报警时间' },
- { prop: 'sure', label: '报警确认', slot: true },
+ { prop: 'facilityName', label: '报警设备', },
+ { prop: 'description', label: '报警内容' },
+ { prop: 'lastTimeView', label: '报警时间' },
+ { prop: 'isConfirm', label: '报警确认', slot: true },
]
-const initWarnChart = () => {
+const initWarnCgart = () => {
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)
+const updateWarnChart = () => {
+ let xdata = []
+ let sdata = []
+ warnChartData.value?.forEach(item => {
+ xdata.push(item.key)
+ sdata.push(item.value)
+ })
+ const options = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ top: 80,
+ left: 60,
+ right: 60,
+ bottom: 60
+ },
+ xAxis: {
+ type: 'category',
+ data: xdata,
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: '次',
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ },
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ }
+ },
+ series: [
+ {
+ data: sdata,
+ 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(searchData).then(res => {
+ exportBlobFile(res, '报警记录')
+ })
+}
+
+// 获取报警内容
+const getWarnInfi = (data) => {
+ dialogInfo.value = data
+ openDialog.value = true
+}
+
+// 处理报警内容
+const handleComfirm = () => {
+ if(!warnStatus.value) ElMessage.warning('请选择报警类型')
+ editConfirm({ id: dialogInfo.value.id, status: warnStatus.value }).then(res => {
+ ElMessage.success('提交成功')
+ tableRef.value.getData()
+ }).catch(err => {
+ ElMessage.warning('提交失败')
+ }).then(() => {
+ warnStatus.value = 0
+ openDialog.value = false
+ })
+}
+
+// 获取报警分析
+const getWarnCharts = () => {
+ getWarnChartsInfo({ type: timeType.value }).then(res => {
+ warnChartData.value = res.data
+ updateWarnChart()
})
}
onMounted(() => {
- initWarnChart()
+ initWarnCgart()
+ getWarnCharts()
})
</script>
@@ -93,10 +142,10 @@
<div class="item-t">
<div class="name">报警分析</div>
<div class="select">
- <el-radio-group v-model="timeType">
+ <el-radio-group v-model="timeType" @change="getWarnCharts">
<el-radio :value="1">日</el-radio>
- <el-radio :value="2">月</el-radio>
- <el-radio :value="3">年</el-radio>
+ <el-radio :value="3">月</el-radio>
+ <el-radio :value="5">年</el-radio>
</el-radio-group>
</div>
</div>
@@ -105,20 +154,87 @@
<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="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>
+ <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 === 30" 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">导出</el-button>
+ <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?.totalCount}}</div>
+ </div>
+ <div class="message-item">
+ <div class="title">开始报警时间:</div>
+ <div class="val">{{dialogInfo?.createTimeView}}</div>
+ </div>
+ <div class="message-item">
+ <div class="title">最后报警时间:</div>
+ <div class="val">{{dialogInfo?.lastTimeView}}</div>
+ </div>
+ <div class="message-line">
+ <div class="title">报警内容:</div>
+ <div class="val">{{dialogInfo?.description}}</div>
+ </div>
+ <div class="message-line">
+ <div class="title">报警确认:</div>
+ <div class="val">
+ <el-radio-group v-model="warnStatus">
+ <el-radio :value="200">已处理</el-radio>
+ <el-radio :value="20">已证实</el-radio>
+ <el-radio :value="30">误 报</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>
@@ -146,6 +262,9 @@
font-size: 36px;
color: #fff;
}
+ :deep(.el-date-editor){
+ flex-grow: 0;
+ }
.select{
:deep(.el-radio){
color: #fff;
@@ -170,4 +289,28 @@
}
}
}
+.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>
\ No newline at end of file
--
Gitblit v1.9.3