| | |
| | | <template> |
| | | <div class="history-warning"> |
| | | <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="ztzf-data-cockpit-search-input" placeholder="请输入数据名称" clearable |
| | | @keyup.enter="onSearch"> |
| | | <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="ztzf-data-cockpit-date-picker" |
| | | popper-class="ztzf-data-cockpit-date-picker-popper" |
| | | 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" |
| | |
| | | |
| | | <!-- 列表 --> |
| | | <div class="list-content"> |
| | | <HistoryTemplate v-for="(item, ind) in filteredList" :key="item.id || ind" :data="item" |
| | | @click="onCardClick" /> |
| | | <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 } from 'vue' |
| | | 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' |
| | | |
| | | // 原始数据(别动它,过滤用 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: '诱导驱离' |
| | | } |
| | | ]) |
| | | const historyWarningData = ref([]) |
| | | const loading = ref(true) |
| | | const minLoadingMs = 400 |
| | | |
| | | // 查询条件:keyword + dateRange(YYYY-MM-DD数组) |
| | | const query = ref({ |
| | |
| | | }) |
| | | |
| | | const onSearch = () => { |
| | | // 目前是本地过滤:computed 会自动更新 |
| | | // 后续如果你要走接口,这里换成 fetchList(query.value) 即可 |
| | | fetchHistoryWarning() |
| | | } |
| | | |
| | | 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 fetchHistoryWarning = async () => { |
| | | |
| | | const startAt = Date.now() |
| | | loading.value = true |
| | | 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 { |
| | | const elapsed = Date.now() - startAt |
| | | if (elapsed < minLoadingMs) { |
| | | await new Promise((resolve) => setTimeout(resolve, minLoadingMs - elapsed)) |
| | | } |
| | | loading.value = false |
| | | } |
| | | } |
| | | |
| | | const filteredList = computed(() => { |
| | | const kw = (query.value.keyword || '').trim().toLowerCase() |
| | | const [start, end] = query.value.dateRange || [] |
| | | return historyWarningData.value |
| | | }) |
| | | |
| | | 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) |
| | | }) |
| | | onMounted(() => { |
| | | fetchHistoryWarning() |
| | | }) |
| | | </script> |
| | | |
| | |
| | | flex-direction: column; |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | |
| | | .search-box { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | |
| | | ::v-deep(.ztzf-data-cockpit-date-picker) { |
| | | ::v-deep(.command-date-picker) { |
| | | width: 100% !important; |
| | | } |
| | | } |
| | |
| | | .list-content { |
| | | height: 0; |
| | | flex: 1; |
| | | overflow-y: auto; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | </style> |