无人机管理后台前端(已迁走)
罗广辉
2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9
src/views/flightLog/flightLog.vue
@@ -3,6 +3,14 @@
  <div class="flight">
    <div class="search-box">
      <el-form :model="params" inline>
        <div style="display: flex;justify-content: space-between">
          <div>
            <el-form-item label="任务名称:">
            <el-input v-model="params.jobName" placeholder="请输入任务名称" clearable />
          </el-form-item>
          <el-form-item label="任务编号:">
            <el-input v-model="params.jobInfoNum" placeholder="请输入任务编号" clearable />
          </el-form-item>
        <el-form-item label="日期:">
          <el-date-picker
            v-model="rangTime"
@@ -14,19 +22,28 @@
            @change="changeselect"
          />
        </el-form-item>
      </div>
      <div>
        <el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button @click="cancelSearch">取消</el-button>
          <el-button @click="cancelSearch">清空</el-button>
        </el-form-item>
      </div>
      </div>
      </el-form>
      <div>
      <!-- <div>
        <el-button :type="tabType === '全部'?'primary':'default'" @click="handleAll"><el-icon><Folder /></el-icon>全部</el-button>
        <el-button :type="tabType === '收藏'?'primary':'default'" @click="handleStartList"><el-icon><Star /></el-icon>我的收藏</el-button>
      </div>
      </div> -->
    </div>
    <div class="mange-table">
      <el-tabs v-model="tabType" class="demo-tabs" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="全部"></el-tab-pane>
        <el-tab-pane label="我的收藏" name="收藏"></el-tab-pane>
         <el-table border :data="tableList" class="custom-header">
            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column prop="job_name" label="任务名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="job_info_num" label="任务编号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="title" label="飞行类型" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="device_name" label="无人机" align="center"></el-table-column>
        <el-table-column prop="start_time" label="开始时间" align="center">
@@ -41,7 +58,7 @@
        </el-table-column>
        <el-table-column prop="end_time" label="标签" align="center">
          <template #default="scope">
            <el-select v-model="scope.row.label_id" @change="handleUpdateLabel(scope.row)">
            <el-select v-model="scope.row.label_id" @change="handleUpdateLabel(scope.row)" clearable>
              <el-option
                v-for="item in tagList"
                :key="item.id"
@@ -51,16 +68,21 @@
            </el-select>
          </template>
        </el-table-column>
            <el-table-column label="操作" width="200" align="center">
            <el-table-column label="操作" width="340" align="center">
               <template #default="scope">
            <!-- <el-button icon="el-icon-view" type="text" @click="handleDetail(scope.row)">查看</el-button> -->
                  <!-- <el-button icon="el-icon-delete" type="text" @click="handleDelete">删除</el-button> -->
            <el-button type="text" @click="handleStar(scope.row)"><el-icon><Star /></el-icon>{{ scope.row.is_favorite ? '取消收藏':'收藏' }}</el-button>
            <el-button icon="el-icon-view" type="text" @click="handleDetail(scope.row)">查看</el-button>
            <el-button icon="el-icon-view" type="text" v-if="!scope.row.isHL" @click="handleWarnInfo(scope.row)">警告</el-button>
                  <el-button icon="el-icon-delete" type="text" @click="handleDelete(scope.row)">删除</el-button>
            <el-button type="text" @click="handleStar(scope.row)">
              <el-icon><Star /></el-icon>
              {{ scope.row.is_favorite ? '取消收藏':'收藏' }}</el-button>
            <el-button type="text" @click="handleExport(scope.row)"><el-icon><Download /></el-icon>导出</el-button>
               </template>
            </el-table-column>
         </el-table>
    </el-tabs>
      </div>
      <div class="pagination">
         <el-pagination class="ztzf-pagination" popper-class="custom-pagination-dropdown" background
            :page-sizes="[10, 20, 30, 40, 50, 100]" :size="size" v-model:current-page="params.page"
@@ -68,40 +90,45 @@
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
  </div>
  <!-- <el-dialog class="ztzf-dialog" append-to-body v-model="isShowView" title="查看"
      :width="pxToRem(600)" :close-on-click-modal="false" :destroy-on-close="true">
      <div class="content">
      <table class="view-table" border>
        <tr>
          <td class="label">空域类型</td>
          <td class="value">{{ rowView.model_name }}</td>
          <td class="label">创建时间</td>
          <td class="value">{{ rowView.alg_type }}</td>
        </tr>
      </table>
  <el-dialog class="ztzf-dialog" append-to-body v-model="isShowView" title="查看"
      :width="pxToRem(1000)" :close-on-click-modal="false" :destroy-on-close="true">
      <!-- <div class="content"> -->
      <el-table border :data="tableDataDetails" height="466">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column prop="flight_type" label="飞行类型" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="latitude" label="经度" align="center"></el-table-column>
        <el-table-column prop="longitude" label="纬度" align="center"></el-table-column>
        <el-table-column prop="height" label="高度" align="center"></el-table-column>
        <el-table-column prop="elevation" label="海拔高度" align="center"></el-table-column>
      </el-table>
      <div class="pagination" style="display: flex;justify-content: end;margin-top: 10px;">
        <el-pagination class="ztzf-pagination" popper-class="custom-pagination-dropdown" background
          :page-sizes="[10, 20, 30, 40, 50, 100]" :size="size" v-model:current-page="detailParams.current"
          v-model:page-size="detailParams.size" layout="total, sizes, prev, pager, next, jumper" :total="detailTotal"
          @size-change="handleSizeChangeDetails" @current-change="handleCurrentChangeDetails" />
    <!-- </div> -->
    </div>
   </el-dialog>
  <el-dialog class="ztzf-dialog" append-to-body v-model="isShowEditView" title="新增"
      :width="pxToRem(800)" :close-on-click-modal="false" :destroy-on-close="true">
      <div class="content-edit">
      <el-form ref="ruleFormRef" :model="editParams" :rules="rules" inline>
        <el-form-item label="空域名称">
          <el-input v-model="editParams.model_name" />
        </el-form-item>
        <div class="btns">
          <el-button type="primary" @click="submit(ruleFormRef)">确认</el-button>
          <el-button @click="isShowEditView = false">取消</el-button>
        </div>
      </el-form>
    </div>
   </el-dialog> -->
  <el-dialog class="ztzf-dialog" append-to-body v-model="isShowWarnView" title="查看警告信息" :width="pxToRem(1000)" :close-on-click-modal="false" :destroy-on-close="true">
    <el-table border :data="warningList" height="300">
      <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
      <el-table-column prop="warn_info" label="内容" align="center" show-overflow-tooltip></el-table-column>
    </el-table>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShowWarnView = false">取 消</el-button>
          <el-button type="primary" @click="hlSubmit">忽略</el-button>
        </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { getHistoryTrack, cancelStar, addStar, updateDroneFlight } from '@/api/logs';
import { getHistoryTrack, cancelStar, addStar, updateDroneFlight, droneFlightLogInfoPage } from '@/api/logs';
import { flightLogPage } from '@/api/airspace/airspace';
import { downloadXls } from '@/utils/util';
import { exportBlob } from '@/api/common'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import { dateNow } from '@/utils/date';
const total = ref(0)
let rangTime = ref([])
@@ -111,26 +138,17 @@
  page_size: 10,
  startTime: '',
  endTime: '',
  jobName: '',
  jobInfoNum: '',
});
let tableList = ref([])
// let isShowView = ref(false)
// let rowView = ref({})
// let isShowEditView = ref(false)
let isShowView = ref(false)
let isShowWarnView = ref(false)
let warningList = ref([])
let tabType = ref('全部')
// const ruleFormRef = ref()
// let editParams = ref({
//   model_name: '',
//   alg_type: '',
//   qua_rate: '',
//   pass_rate: '',
//   event_type: '',
//   remark: ''
// })
function timeFormatConvert(time) {
  if (!time) return '/'
@@ -139,21 +157,46 @@
}
function cancelSearch() {
  rangTime.value = []
  params.value = {
    isFavorite: false,
    startTime: '',
    endTime: '',
    isFavorite: tabType.value === '收藏' ? true : false,
    page: '1',
    page_size: '10',
    jobName: '',
    jobInfoNum: '',
  }
  getList()
}
function getList() {
  console.log(rangTime.value, '333')
  params.value.startTime = rangTime.value?.length ? rangTime.value[0].getTime() : ''
  params.value.endTime = rangTime.value?.length? rangTime.value[1].getTime() : ''
  params.value.endTime = rangTime.value?.length? new Date(
    rangTime.value[1].getFullYear(),
    rangTime.value[1].getMonth(),
    rangTime.value[1].getDate(),
    23, 59, 59
  ).getTime() : ''
  getHistoryTrack(params.value).then(res => {
    tableList.value = res.data.data.list || []
    tableList.value = res.data.data.list.map(item => {
      return {
        ...item,
        isHL: false,
        children: [{
          id: item.id,
          time: timeFormatConvert(dateNow()),
          warn_info: '信号受到干扰,请谨慎飞行'
        },
          {
            id: item.id,
            time: timeFormatConvert(dateNow()),
            warn_info: '风速较大,请谨慎飞行'
          }],
      }
    })
    total.value = res.data.data.pagination.total || 0
  })
}
@@ -163,6 +206,57 @@
  tabType.value = '全部'
  getList()
}
// 查看
let tableDataDetails = ref([])
let detailTotal = ref(0)
let detailParams = ref({
  current: 1,
  size: 10,
  flightId: ''
})
function handleDetail(row) {
  isShowView.value = true
  detailParams.value.current = 1
  detailParams.value.flightId = row.id
  detailTotal.value = 0
  droneFlightLogInfoPage(detailParams.value).then(res => {
    tableDataDetails.value = res.data.data.records
    detailTotal.value = res.data.data.total
  })
}
// 警告信息
let saveId = ref('')
function handleWarnInfo(row) {
  isShowWarnView.value = true
  saveId.value = row.id
  warningList.value = tableList.value.find(item => item.id === row.id).children
}
function hlSubmit() {
  // 设置isHL为true
  tableList.value.map(item => {
    if (item.id === saveId.value) {
      item.isHL = true
      isShowWarnView.value = false
    }
  })
}
// 分页
function handleSizeChangeDetails(val) {
  detailParams.value.size = val
  detailParams.value.current = 1
  droneFlightLogInfoPage(detailParams.value).then(res => {
    tableDataDetails.value = res.data.data.records
    detailTotal.value = res.data.data.total
  })
}
function handleCurrentChangeDetails(val) {
  detailParams.value.current = val
  droneFlightLogInfoPage(detailParams.value).then(res => {
    tableDataDetails.value = res.data.data.records
    detailTotal.value = res.data.data.total
  })
}
function handleStartList() {
  params.value.isFavorite = true
@@ -171,21 +265,16 @@
  getList()
}
// async function submit(formValidate) {
//   if (!formValidate) return
//   await formValidate.validate((valid, fields) => {
//     if (valid) {
//       algorithmManageEdit(editParams.value).then(res => {
//         isShowEditView.value = false
//         getList()
//       })
//     }
//   })
// }
function handleTabClick() {
  if (tabType.value === '全部') {
    handleAll()
  } else if (tabType.value === '收藏') {
    handleStartList()
  }
}
// 收藏
function handleStar(row) {
  console.log(row, '5555')
  if (row.is_favorite) {
    cancelStar(row.id).then(res => {
      ElMessage.success('取消收藏成功')
@@ -203,7 +292,26 @@
function handleUpdateLabel(row) {
  updateDroneFlight({ id: row.id, label_id: row.label_id }).then(res => {
    // getList()
    ElMessage.success('标签成功')
    ElMessage.success('设置标签成功')
  })
}
// 删除
function handleDelete(row) {
  ElMessageBox.confirm('确定删除该条数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    updateDroneFlight({ is_deleted: 1, id: row.id }).then(res => {
      ElMessage.success('删除成功')
      getList()
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}
@@ -255,7 +363,7 @@
    display: flex;
    flex-direction: column;
    .search-box {
      height: 80px;
      height: 30px;
    }
    :deep(.el-input) {
@@ -286,23 +394,23 @@
      }
    }
  }
 .content {
  padding: 20px;
  .view-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #EBEEF5;
    tr {
      &:not(:last-child) {
        border-bottom: 1px solid #EBEEF5;
      }
      td {
        padding: 12px 10px;
        &.label {
          width: 140px;
          text-align: right;
@@ -310,7 +418,7 @@
          // background-color: #F5F7FA;
          border-right: 1px solid #EBEEF5;
        }
        &.value {
          width: 180px;
          // color: #303133;
@@ -326,7 +434,7 @@
      :deep(.el-form-item__label) {
        width: 120px;
      }
    }
    .btns {
        display: flex;
@@ -334,4 +442,4 @@
      }
  }
}
</style>
</style>