From ad57696cef86a678512e93207bc5538d30bc40ee Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 03 Aug 2026 10:39:46 +0800
Subject: [PATCH] feat: 播放按钮居中
---
applications/drone-command/src/views/dataCockpit/components/HistoryWarning.vue | 120 ++++++++++++++++++++++++-----------------------------------
1 files changed, 49 insertions(+), 71 deletions(-)
diff --git a/applications/drone-command/src/views/dataCockpit/components/HistoryWarning.vue b/applications/drone-command/src/views/dataCockpit/components/HistoryWarning.vue
index 4ce65c7..e07f258 100644
--- a/applications/drone-command/src/views/dataCockpit/components/HistoryWarning.vue
+++ b/applications/drone-command/src/views/dataCockpit/components/HistoryWarning.vue
@@ -1,18 +1,16 @@
<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"
- type="daterange"
- range-separator="~"
+ <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>
@@ -20,39 +18,23 @@
<!-- 列表 -->
<div class="list-content">
- <HistoryTemplate v-for="(item, ind) in filteredList" :key="item.id || ind" :data="item"
+ <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(false)
+const loadingTimer = ref(null)
// 查询条件：keyword + dateRange(YYYY-MM-DD数组)
const query = ref({
@@ -61,53 +43,47 @@
})
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 fetchHistoryWarning = async () => {
-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
+ // 只有超过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(() => {
- 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>
@@ -117,13 +93,14 @@
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;
}
}
@@ -131,6 +108,7 @@
.list-content {
height: 0;
flex: 1;
+ overflow-y: auto;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3