<template>
|
<div class="history-warning" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)"
|
element-loading-text="加载中...">
|
<!-- 搜索区（设计稿红框） -->
|
<div class="search-box">
|
<!-- 关键字 -->
|
<el-input v-model="query.keyword" class="command-input" placeholder="请输入数据名称" clearable
|
@keyup.enter="onSearch" @clear="onSearch">
|
</el-input>
|
|
<!-- 日期范围 -->
|
<el-date-picker v-model="query.dateRange" class="command-date-picker"
|
popper-class="command-date-picker-popper" type="daterange" range-separator="~"
|
start-placeholder="创建开始日期" end-placeholder="结束日期" format="YYYY年MM月DD日" value-format="YYYY-MM-DD"
|
:clearable="true" @change="onSearch">
|
</el-date-picker>
|
</div>
|
|
<!-- 列表 -->
|
<div class="list-content">
|
<EmptyState v-if="!filteredList.length" />
|
<HistoryTemplate v-else v-for="(item, ind) in filteredList" :key="item.id || ind" :data="item"
|
@click="onCardClick" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { dateRangeFormat } from '@ztzf/utils'
|
import { ref, computed, onMounted } from 'vue'
|
import HistoryTemplate from './templateComponents/HistoryTemplate.vue'
|
import { alarmLogApi } from '@/api/dataCockpit'
|
import EmptyState from './EmptyState.vue'
|
|
const historyWarningData = ref([])
|
const loading = ref(false)
|
const loadingTimer = ref(null)
|
|
// 查询条件：keyword + dateRange(YYYY-MM-DD数组)
|
const query = ref({
|
keyword: '',
|
dateRange: [] // [start, end]
|
})
|
|
const onSearch = () => {
|
fetchHistoryWarning()
|
}
|
|
const onCardClick = (item) => {
|
console.log('点击无人机卡片：', item.id)
|
}
|
|
const fetchHistoryWarning = async () => {
|
|
// 只有超过200ms才显示loading，避免闪烁
|
loadingTimer.value = setTimeout(() => {
|
loading.value = true
|
}, 200)
|
|
try {
|
const [startTime, endTime] = dateRangeFormat(query.value.dateRange) || []
|
const keyword = (query.value.keyword || '').trim()
|
const params = {
|
current: 1,
|
size: 20,
|
alarmType: '2',
|
startTime,
|
endTime,
|
droneName: keyword || undefined,
|
droneSerialNo: keyword || undefined
|
}
|
const res = await alarmLogApi(params)
|
const records = res?.data?.data?.records ?? []
|
historyWarningData.value = records
|
} finally {
|
if (loadingTimer.value) clearTimeout(loadingTimer.value)
|
loading.value = false
|
}
|
}
|
|
const filteredList = computed(() => {
|
return historyWarningData.value
|
})
|
|
onMounted(() => {
|
fetchHistoryWarning()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.history-warning {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
|
.search-box {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
|
::v-deep(.command-date-picker) {
|
width: 100% !important;
|
}
|
}
|
|
.list-content {
|
height: 0;
|
flex: 1;
|
overflow-y: auto;
|
}
|
}
|
</style>
|
