emcp/frontend/src/views/eventReport/index.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { fetchAlarmHistory } from '@/api/platform'
const formData = ref({
    no: null,
    type: '',
    timeRange: [],
})

const tableData: any = ref([])

const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

const handleQuery = () => {
    const params: any = {
        page: pagination.value.currentPage,
        size: pagination.value.pageSize,
        // no: formData.value.no,
        // type: formData.value.type,
        // start_time: formData.value.timeRange[0],
        // end_time: formData.value.timeRange[1],
    }
    fetchAlarmHistory(params).then((res: any) => {
        tableData.value = res
    })
}

const handleSizeChange = (val: number) => {
    pagination.value.pageSize = val
    pagination.value.currentPage = 1
    init()
}

const handleCurrentChange = (val: number) => {
    pagination.value.currentPage = val
    init()
}
function init() {
    const params: any = {
        page: pagination.value.currentPage,
        size: pagination.value.pageSize,
    }
    fetchAlarmHistory(params).then((res: any) => {
        tableData.value = res
    })
}
onMounted(() => {
    formData.value.no = null
    formData.value.type = ''
    formData.value.timeRange = []
    init()
})
</script>

<template>
    <div class="event-report-container">
        <div class="search-box">
            <el-select v-model="formData.no" placeholder="所属线路" style="width: 180px">
                <el-option label="线路一" value="线路一" />
                <el-option label="线路二" value="线路二" />
            </el-select>
            <el-select v-model="formData.type" placeholder="事件类型" style="width: 180px; margin-left: 15px">
                <el-option label="操作事件" value="操作事件" />
                <el-option label="报警事件" value="报警事件" />
            </el-select>
            <div>
                <el-date-picker v-model="formData.timeRange" type="datetimerange" start-placeholder="开始时间"
                    end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 380px; margin-left: 15px" />
            </div>
            <el-button type="primary" style="margin-left: 15px;" @click="handleQuery">
                查询
            </el-button>
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%; height: calc(100vh - 280px)" header-align="center"
                align="center">
                <el-table-column label="序号" type="index" width="80" align="center" />
                <el-table-column label="事件所属" prop="belong">
                    <template #default="scope">
                        <span v-if="scope.row.alarm_type === 'line_alarm'">线路{{ scope.row.no }}</span>
                        <span v-else-if="scope.row.alarm_type === 'ai_alarm'">通道{{ scope.row.no }}</span>
                        <span v-else-if="scope.row.alarm_type === 'operate_alarm'">{{ scope.row.no }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="事件类型" prop="type" align="center" />
                <el-table-column label="事件等级" prop="level" align="center" />
                <el-table-column label="事件详情" prop="content" align="center" />
                <el-table-column label="发生时间" prop="time" align="center" />
            </el-table>
            <div class="pagination">
                <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 30, 40]" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :total="pagination.total" layout="prev, pager, next, total, sizes" />
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.event-report-container {
    width: 100%;
    height: 100%;
    padding: 20px;
}

.search-box {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    height: 80px;
}

.table-box {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(219, 225, 236, 1);
    height: calc(100% - 100px);
}

.pagination {
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
}

:deep(.el-table__header-wrapper) {
    background-color: #f9fafe !important;
    height: 46px;
    line-height: 46px;
}

:deep(.el-table__header) {
    th {
        background-color: #f9fafe !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        color: #333 !important;
        border: none !important;
    }
}

:deep(.el-table) {
    --el-table-row-hover-bg-color: #f8f9fa !important;
    --el-table-border-color: #f2f2f2 !important;
}

:deep(.el-table td) {
    border-bottom: 1px solid #f2f2f2 !important;
}

:deep(.el-table__cell) {
    color: #505050 !important;
}

:deep(.el-input__inner) {
    color: #363636;
    min-height: 40px;
}

:deep(el-input__wrapper) {
    min-height: 40px;
}

:deep(.el-select__wrapper) {
    min-height: 40px;
}

:deep(.el-range-editor.el-input__wrapper) {
    min-height: 40px;
}
</style>