feat:添加报表，监控功能

web

2025-03-20 200737d7c5fee9de223a92bd1a4aaeb05733a27f

 src/views/screen/flow/report/index.vue

@@ -1,13 +1,116 @@
<script setup>
import {ref} from "vue";
import Table from '@/components/Table/index.vue'

const selectType = ref(1);
const typeOption = ref([
    { label: '水电站流量监测点', value: 1 },
    { label: '新扎口流量监测点', value: 2 },
])
const time = ref()
let tableHead = [
    { prop: 'code', label: '报警代码' },
    { prop: 'shebei', label: '报警设备', },
    { prop: 'content', label: '报警内容' },
    { prop: 'time', label: '报警时间' },
    { prop: 'sure', label: '报警确认', slot: true },
]

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)
    })
}

</script>

<template>
    <div>
        报表管理
    <div class="report">
        <div class="report-tool">
            <el-select
                v-model="selectType"
                class="tool-select"
                size="large"
                placeholder="Select"
                style="width: 20rem"
            >
                <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-select
                v-model="selectType"
                class="tool-select"
                size="large"
                placeholder="Select"
                style="width: 20rem"
            >
                <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-date-picker
                v-model="time"
                type="datetimerange"
                size="large"
                style="width: 30rem"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
            />
            <el-button type="success" size="large" style="width: 6rem">一键导出</el-button>
        </div>
        <div class="report-table">
            <Table :getList="getTableData" :headList="tableHead"></Table>
        </div>
    </div>
</template>

<style scoped lang="scss">

.report{
    height: 100%;
    background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    &-tool{
        padding: 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        :deep(.el-date-editor){
            flex-grow: 0;
        }
    }
    &-table{
        width: 96%;
        height: 90%;
        background: rgba(23,108,229,0.3);
        border: 1px solid #176CE5;
        border-radius: 8px;
        padding: 20px;
    }
}
</style>