feat:添加报表，监控功能

web

2025-03-20 200737d7c5fee9de223a92bd1a4aaeb05733a27f

 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>