<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-data-cockpit-search-input" placeholder="请输入数据名称" clearable
|
@keyup.enter="onSearch">
|
</el-input>
|
|
<!-- 日期范围 -->
|
<el-date-picker v-model="query.dateRange"
|
class="command-data-cockpit-date-picker"
|
popper-class="command-data-cockpit-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 { 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(true)
|
const minLoadingMs = 400
|
|
// 查询条件：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 () => {
|
const startAt = Date.now()
|
loading.value = true
|
try {
|
const [startTime, endTime] = 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 {
|
const elapsed = Date.now() - startAt
|
if (elapsed < minLoadingMs) {
|
await new Promise((resolve) => setTimeout(resolve, minLoadingMs - elapsed))
|
}
|
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%;
|
|
.search-box {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
|
::v-deep(.command-data-cockpit-date-picker) {
|
width: 100% !important;
|
}
|
}
|
|
.list-content {
|
height: 0;
|
flex: 1;
|
}
|
}
|
|
</style>
|
