吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
applications/drone-command/src/views/dataCockpit/components/HistoryWarning.vue
@@ -1,16 +1,21 @@
<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"
@@ -20,39 +25,28 @@
      <!-- 列表 -->
      <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({
@@ -61,53 +55,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 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>
@@ -117,13 +105,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 +120,8 @@
   .list-content {
      height: 0;
      flex: 1;
      overflow-y: auto;
   }
}
</style>
</style>