From c6159b0a5a424250adeca1bc2b475da5324fe038 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期五, 18 四月 2025 17:16:30 +0800
Subject: [PATCH] fix:对接报表数据
---
src/views/screen/flow/warning/index.vue | 120 +++++++++++++++++++++++++++++++++++------------------------
1 files changed, 71 insertions(+), 49 deletions(-)
diff --git a/src/views/screen/flow/warning/index.vue b/src/views/screen/flow/warning/index.vue
index be7ee3d..779de76 100644
--- a/src/views/screen/flow/warning/index.vue
+++ b/src/views/screen/flow/warning/index.vue
@@ -2,21 +2,24 @@
import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import Table from '@/components/Table/index.vue'
-import { warnHistory, exportWarnHistory, editConfirm } from '@/api/screen/warning/index.js'
+import { warnHistory, exportWarnHistory, editConfirm, getWarnChartsInfo } from '@/api/screen/warning/index.js'
import { exportBlobFile } from '@/utils/index.js'
import { ElMessage } from 'element-plus'
const tableRef = ref(null)
-const timeType = ref(0)
+const timeType = ref(1)
const warnChartRef = ref()
const exportTime = ref()
const searchData = reactive({
- createTimeRange: ''
+ createTimeRange: '',
+ monitorType: 2
})
const openDialog = ref(false)
const dialogInfo = ref()
const warnStatus = ref(0)
+
+const warnChartData = ref([])
let warnCharts = null;
let tableHead = [
@@ -27,51 +30,60 @@
{ 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 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 = () => {
@@ -98,6 +110,7 @@
// 处理报警内容
const handleComfirm = () => {
+ if(!warnStatus.value) ElMessage.warning('请选择报警类型')
editConfirm({ id: dialogInfo.value.id, status: warnStatus.value }).then(res => {
ElMessage.success('提交成功')
tableRef.value.getData()
@@ -109,8 +122,17 @@
})
}
+// 获取报警分析
+const getWarnCharts = () => {
+ getWarnChartsInfo({ type: timeType.value }).then(res => {
+ warnChartData.value = res.data
+ updateWarnChart()
+ })
+}
+
onMounted(() => {
- initWarnChart()
+ initWarnCgart()
+ getWarnCharts()
})
</script>
@@ -120,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>
--
Gitblit v1.9.3