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

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fetchAlarmHistory } from '@/api/platform'
import type { AlarmEvent, AlarmHistoryQuery } from '@/types/platform'
import { formatAlarmEventValue, getAlarmBelongText, getEventCodeName, getEventTypeName } from '@/utils/alarmEvent'

type AlarmRow = AlarmEvent & {
    belong_text: string
    event_type_text: string
    event_code_text: string
    event_value_text: string
}

const formData = ref<{
    line_code: number | null
    event_type: number | null
    timeRange: string[]
}>({
    line_code: null,
    event_type: null,
    timeRange: [],
})

const tableData = ref<AlarmRow[]>([])
const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

const loadAlarms = () => {
    const params: AlarmHistoryQuery = {
        page: pagination.value.currentPage,
        size: pagination.value.pageSize,
    }
    if (formData.value.line_code !== null) {
        params.line_code = formData.value.line_code
    }
    if (formData.value.event_type !== null) {
        params.event_type = formData.value.event_type
    }
    if (formData.value.timeRange && formData.value.timeRange.length > 0) {
        params.start_time = formData.value.timeRange[0]
        params.end_time = formData.value.timeRange[1]
    }
    fetchAlarmHistory(params).then((res) => {
        tableData.value = res.map((item) => ({
            ...item,
            belong_text: getAlarmBelongText(item.line_code),
            event_type_text: getEventTypeName(item.event_type),
            event_code_text: getEventCodeName(item.event_type, item.event_code),
            event_value_text: formatAlarmEventValue(item.event_type, item.event_value),
        }))
        pagination.value.total = tableData.value.length
    })
}

const handleQuery = () => {
    pagination.value.currentPage = 1
    loadAlarms()
}

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

const handleCurrentChange = (val: number) => {
    pagination.value.currentPage = val
    loadAlarms()
}

const formatDate = (date: Date): string => {
    const pad = (n: number): string => n.toString().padStart(2, '0')
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}

const getDefaultTimeRange = (): [string, string] => {
    const end = new Date()
    const start = new Date()
    start.setDate(start.getDate() - 7)
    return [formatDate(start), formatDate(end)]
}

onMounted(() => {
    formData.value.line_code = null
    formData.value.event_type = null
    formData.value.timeRange = getDefaultTimeRange()
    loadAlarms()
})
</script>

<template>
    <div class="event-report-container">
        <div class="search-box">
            <el-input-number v-model="formData.line_code" :min="0" :step="1" placeholder="请输入线路号" style="width: 180px" />
            <el-input-number v-model="formData.event_type" :min="0" :step="1" placeholder="请输入事件类型" style="width: 180px; margin-left: 15px" />
            <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 - 260px)" header-align="center"
                align="center">
                <el-table-column label="序号" type="index" width="80" align="center" />
                <el-table-column label="事件所属" prop="belong_text" align="center" />
                <el-table-column label="事件类型" prop="event_type_text" align="center" />
                <el-table-column label="事件代码" prop="event_code_text" align="center" min-width="140px" />
                <el-table-column label="动作值" prop="event_value_text" align="center" />
                <el-table-column label="事件详情" prop="content" min-width="120px" align="center" />
                <el-table-column label="发生时间" prop="event_time" min-width="160px" 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, sizes" />
            </div>
        </div>
    </div>
</template>

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

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

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

.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>