<template>
|
<div class="history-warning">
|
<!-- 搜索区（设计稿红框） -->
|
<div class="search-box">
|
<!-- 关键字 -->
|
<el-input v-model="query.keyword" class="ztzf-data-cockpit-search-input" placeholder="请输入数据名称" clearable
|
@keyup.enter="onSearch">
|
</el-input>
|
|
<!-- 日期范围 -->
|
<el-date-picker v-model="query.dateRange"
|
class="ztzf-data-cockpit-date-picker"
|
popper-class="ztzf-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">
|
<HistoryTemplate v-for="(item, ind) in filteredList" :key="item.id || ind" :data="item"
|
@click="onCardClick" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed } from 'vue'
|
import HistoryTemplate from './templateComponents/HistoryTemplate.vue'
|
|
// 原始数据（别动它，过滤用 computed）
|
const historyWarningData = ref([
|
{
|
id: 'drone_001',
|
name: '无人机名称',
|
serialNumber: 'XLH78945645456',
|
dataSource: '侦测反制设备名称',
|
frequency: '5800MHZ',
|
discoveredAt: { date: '2025年12月30日', time: '14:55:06' },
|
stayTime: '00:10:50',
|
counterMethod: '信号干扰'
|
},
|
{
|
id: 'drone_002',
|
name: '无人机名称',
|
serialNumber: 'XLH78945645456',
|
dataSource: '侦测反制设备名称',
|
frequency: '2400MHZ',
|
discoveredAt: { date: '2025年12月30日', time: '15:08:12' },
|
stayTime: '00:03:21',
|
counterMethod: '诱导驱离'
|
}
|
])
|
|
// 查询条件：keyword + dateRange(YYYY-MM-DD数组)
|
const query = ref({
|
keyword: '',
|
dateRange: [] // [start, end]
|
})
|
|
const onSearch = () => {
|
// 目前是本地过滤：computed 会自动更新
|
// 后续如果你要走接口，这里换成 fetchList(query.value) 即可
|
}
|
|
const onCardClick = (item) => {
|
console.log('点击无人机卡片：', item.id)
|
}
|
|
// "2025年12月30日" -> "2025-12-30"
|
const cnDateToISO = (cn) => {
|
if (!cn) return ''
|
const m = cn.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/)
|
if (!m) return ''
|
const y = m[1]
|
const mm = String(m[2]).padStart(2, '0')
|
const dd = String(m[3]).padStart(2, '0')
|
return `${y}-${mm}-${dd}`
|
}
|
|
const inRange = (targetISO, startISO, endISO) => {
|
if (!targetISO) return false
|
const t = new Date(`${targetISO}T00:00:00`).getTime()
|
const s = startISO ? new Date(`${startISO}T00:00:00`).getTime() : null
|
const e = endISO ? new Date(`${endISO}T23:59:59`).getTime() : null
|
if (s !== null && t < s) return false
|
if (e !== null && t > e) return false
|
return true
|
}
|
|
const filteredList = computed(() => {
|
const kw = (query.value.keyword || '').trim().toLowerCase()
|
const [start, end] = query.value.dateRange || []
|
|
return historyWarningData.value.filter((item) => {
|
// 1) 关键字：name / serialNumber / dataSource
|
const hitKeyword = !kw
|
? true
|
: [item.name, item.serialNumber, item.dataSource]
|
.filter(Boolean)
|
.some((v) => String(v).toLowerCase().includes(kw))
|
if (!hitKeyword) return false
|
|
// 2) 日期范围：按 discoveredAt.date
|
if (!start && !end) return true
|
const itemISO = cnDateToISO(item?.discoveredAt?.date)
|
return inRange(itemISO, start, end)
|
})
|
})
|
</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(.ztzf-data-cockpit-date-picker) {
|
width: 100% !important;
|
}
|
}
|
|
.list-content {
|
height: 0;
|
flex: 1;
|
}
|
}
|
</style>
|
