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

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

const formData = reactive({
    line: '线路一',
    type: '操作事件',
    timeRange: [],
})

const tableData = ref([
    {
        id: 1,
        belong: '线路一',
        type: '操作事件',
        detail: '手动修改时间操作',
        time: '2026-01-12 12:12:12 886ms',
    },
    {
        id: 2,
        belong: '线路一',
        type: '操作事件',
        detail: '手动修改时间操作',
        time: '2026-01-12 12:12:12 886ms',
    },
    {
        id: 3,
        belong: '线路一',
        type: '操作事件',
        detail: '手动修改时间操作',
        time: '2026-01-12 12:12:12 886ms',
    },
    {
        id: 4,
        belong: '线路一',
        type: '操作事件',
        detail: '手动修改时间操作',
        time: '2026-01-12 12:12:12 886ms',
    },
    {
        id: 5,
        belong: '线路一',
        type: '操作事件',
        detail: '手动修改时间操作',
        time: '2026-01-12 12:12:12 886ms',
    },
])

const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 36,
})

const handleQuery = () => {
    console.log('查询', formData)
}

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

const handleCurrentChange = (val: number) => {
    pagination.currentPage = val
}
function init() {
    
}
onMounted(() => {
    formData.line = ''
    formData.type = ''
    formData.timeRange = []
    init()
})
</script>

<template>
    <div class="event-report-container">
        <div class="search-box">
            <el-select v-model="formData.line" 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="序号" prop="id" width="80" />
                <el-table-column label="事件所属" prop="belong" />
                <el-table-column label="事件类型" prop="type" />
                <el-table-column label="事件详情" prop="detail" />
                <el-table-column label="发生时间" prop="time" />
            </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>