From 200737d7c5fee9de223a92bd1a4aaeb05733a27f Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期四, 20 三月 2025 17:31:24 +0800
Subject: [PATCH] feat:添加报表，监控功能
---
src/views/screen/flow/warning/index.vue | 166 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 163 insertions(+), 3 deletions(-)
diff --git a/src/views/screen/flow/warning/index.vue b/src/views/screen/flow/warning/index.vue
index e80b3ed..4ee3228 100644
--- a/src/views/screen/flow/warning/index.vue
+++ b/src/views/screen/flow/warning/index.vue
@@ -1,13 +1,173 @@
<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>
- 预警管理
+ <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>
\ No newline at end of file
--
Gitblit v1.9.3