Merge remote-tracking branch 'origin/master'

张含笑

2026-01-09 edaf70cb7f0c4e7c997ddab584b3b05798d58528

 applications/drone-command/src/views/recordManage/historyTracks/historyTracks.vue

@@ -1,19 +1,153 @@
<!--
 * @Author       : yuan
 * @Date         : 2026-01-06 16:38:25
 * @LastEditors  : yuan
 * @LastEditTime : 2026-01-07 11:04:23
 * @FilePath     : \applications\drone-command\src\views\recordManage\historyTracks.vue
 * @Description  : 
 * Copyright 2026 OBKoro1, All Rights Reserved. 
 * 2026-01-06 16:38:25
-->
<template>
  <basic-container>
    历史轨迹
  </basic-container>
   <basic-container>
      <el-form ref="queryParamsRef" :model="searchParams">
         <el-row :gutter="16">
            <el-col :span="4">
               <el-form-item label="无人机名称" prop="droneName">
                  <el-input v-model="searchParams.droneName" placeholder="请输入" clearable @clear="getList" />
               </el-form-item>
            </el-col>
            <el-col :span="4">
               <el-form-item label="区域" prop="areaName">
                  <el-input v-model="searchParams.areaName" placeholder="请输入" clearable @clear="getList" />
               </el-form-item>
            </el-col>
            <el-col :span="4">
               <el-form-item label="告警时间">
                  <el-date-picker
                     popper-class="ztzf-date-picker-popper"
                     class="ztzf-date-picker"
                     v-model="dateRange"
                     type="daterange"
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                     value-format="YYYY-MM-DD HH:mm:ss"
                     @change="handleSearch"
                  />
               </el-form-item>
            </el-col>
            <el-col :span="4">
               <el-form-item>
                  <el-button @click="resetForm">重置</el-button>
                  <el-button type="primary" @click="handleSearch">查询</el-button>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <div>
         <el-button type="primary" @click="exportFile" :loading="exportLoading">导出</el-button>
      </div>

      <el-table v-loading="loading" :data="list">
         <el-table-column type="index" width="60" label="序号" />
         <el-table-column prop="droneName" label="无人机名称" />
         <el-table-column prop="serialNo" label="序列号" />
         <el-table-column prop="alarmTime" label="告警时间" />
         <el-table-column prop="areaName" label="区域" />
         <el-table-column prop="triggerType" label="触发原因" />
         <el-table-column label="停留时长">
            <template v-slot="{ row }">
               {{ formatStayDuration(row.stayDuration) }}
            </template>
         </el-table-column>
         <el-table-column label="操作">
            <template v-slot="{ row }">
               <el-link @click="handleView(row)" type="primary">历史轨迹</el-link>
            </template>
         </el-table-column>
      </el-table>

      <div>
         <el-pagination
            v-model:current-page="searchParams.current"
            v-model:page-size="searchParams.size"
            :total="total"
            @change="getList"
         />
      </div>

      <TrajectoryDiaLog ref="dialogRef" />
   </basic-container>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { exportFwDroneFlightRecordApi, fwDroneFlightRecordPageApi } from './fwDroneFlightRecord'
import { blobDownload, dateRangeFormat } from '@ztzf/utils'
import FormDiaLog from '@/views/basicManage/deviceStock/FormDiaLog.vue'
import TrajectoryDiaLog from '@/views/recordManage/historyTracks/TrajectoryDiaLog.vue'

const initSearchParams = () => ({
   droneName: '', // 无人机名称
   areaName: '', // 区域
   current: 1, // 当前页
   size: 10, // 每页大小
})
const searchParams = ref(initSearchParams()) // 查询参数
const total = ref(0) // 总条数
const loading = ref(false) // 列表加载中
const list = ref([]) // 列表数据
const queryParamsRef = ref(null) // 查询表单实例
const dateRange = ref([])
const exportLoading = ref(false)
const dialogRef = ref(null) // 弹框实例

// 获取列表
async function getList() {
   const range = dateRangeFormat(dateRange.value)
   loading.value = true
   try {
      const params = { ...searchParams.value, startTime: range?.[0], endTime: range?.[1] }
      const res = await fwDroneFlightRecordPageApi(params)
      list.value = res?.data?.data?.records ?? []
      total.value = res?.data?.data?.total ?? 0
   } finally {
      loading.value = false
   }
}

// 查询
function handleSearch() {
   searchParams.value.current = 1
   getList()
}

// 重置查询
function resetForm() {
   dateRange.value = []
   queryParamsRef.value?.resetFields()
   searchParams.value.current = 1
   getList()
}

function formatStayDuration(value) {
   if (!value) return '-'
   if (typeof value === 'string') return value
   const hour = String(value.hour ?? 0).padStart(2, '0')
   const minute = String(value.minute ?? 0).padStart(2, '0')
   const second = String(value.second ?? 0).padStart(2, '0')
   return `${hour}:${minute}:${second}`
}

function exportFile() {
   const range = dateRangeFormat(dateRange.value)
   exportLoading.value = true
   exportFwDroneFlightRecordApi({ ...searchParams.value, start_time: range[0], end_time: range[1] })
      .then(res => {
         blobDownload(res)
      })
      .finally(() => {
         exportLoading.value = false
      })
}

function handleView(row) {
   dialogRef.value?.open({ mode: 'view', row: { ...row } })
}

onMounted(() => {
   getList()
})
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>