225 lines
6.9 KiB
Vue
225 lines
6.9 KiB
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 lineCodeOptions = [
|
|
{ label: '全部', value: null },
|
|
{ label: '装置', value: 0 },
|
|
{ label: '线路1', value: 1 },
|
|
{ label: '线路2', value: 2 },
|
|
{ label: '线路3', value: 3 },
|
|
{ label: '线路4', value: 4 },
|
|
]
|
|
const eventTypeOptions = [
|
|
{ label: '保护类', value: 1 },
|
|
{ label: '动作类', value: 2 },
|
|
{ label: '报警类', value: 3 },
|
|
{ label: '操作类', value: 4 },
|
|
{ label: 'AI越限类', value: 5 },
|
|
]
|
|
|
|
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-select v-model="formData.line_code" placeholder="请选择线路号" style="width: 180px">
|
|
<el-option v-for="item in lineCodeOptions" :key="String(item.value)" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
<el-select v-model="formData.event_type" clearable placeholder="请选择事件类型" style="width: 180px; margin-left: 15px">
|
|
<el-option v-for="item in eventTypeOptions" :key="item.value" :label="item.label" :value="item.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 - 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>
|