Merge remote-tracking branch 'origin/master'

chenyao

2026-01-09 ebd0ec4f51288042b6fc5bf714b1febbb63cfacc

 applications/drone-command/src/views/dataCockpit/components/HistoryWarning.vue

New file
@@ -0,0 +1,123 @@
<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="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">
         <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(false)
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(.ztzf-data-cockpit-date-picker) {
         width: 100% !important;
      }
   }

   .list-content {
      height: 0;
      flex: 1;
   }
}

</style>