forked from drone/command-center-dashboard

chenyao
2025-04-09 bdb66cf55723eab8ce633a2babea25d315cab0d5
src/views/TaskManage/TaskIntermediateContent/TaskTable.vue
@@ -1,7 +1,9 @@
<template>
  <div class="table-container">
    <el-table :data="tableData" style="width: 100%" height="400" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
    <el-table :data="tableData" style="width: 100%" height="400"
      @selection-change="handleSelectionChange"
      @select="handleSelect">
      <el-table-column type="selection" width="55" :selectable="checkSelectable" />
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="nickname" label="机巢名称" />
      <el-table-column prop="estimated_arrival_time" label="预计到达时间" />
@@ -31,16 +33,27 @@
  },
  waylineType: {
    type: Number,
    default: 0
    default: 3
  },
  singlePoint: {
    type: Object,
    default: () => ({})
  },
  planarPoints: {
    type: Array,
    default: () => ([])
  }
});
// 选中的数据
const selectedRows = ref([]);
// 分页参数
let pageParams = reactive({
let pageParams = ref({
  wayline_id: props.waylineId, 
  type: props.waylineType,
  longitude: props.singlePoint.longitude,
  latitude: props.singlePoint.latitude,
  polygon: [],
  page: 1,
  limit: 10
});
@@ -49,41 +62,108 @@
const tableData = ref([]);
const getNestList = async () => {
   tableData.value = [];
  const res = await getFlyingNestBy(pageParams);
  // console.log(pageParams.value,'草草草草')
  const res = await getFlyingNestBy(pageParams.value);
  if (res.data.code === 0) {
    console.log(res.data.data, '哒哒哒');
    tableData.value = res.data.data;
  }
};
// 分页大小改变
const handleSizeChange = (val) => {
  pageParams.limit = val;
  pageParams.value.limit = val;
  getNestList();
};
// 页码改变
const handleCurrentChange = (val) => {
  pageParams.page = val;
  pageParams.value.page = val;
  getNestList();
};
// 刷新数据
const refreshData = () => {
  tableData.value = [];
  pageParams.value.page = 1;
  getNestList();
};
const emit = defineEmits(['update:selected']);
const handleSelectionChange = (val) => {
  selectedRows.value = val;
  // 可以通过emit将选中数据传给父组件
  emit('update:selected', val);
  // 如果不是智能规划选区模式,才更新所有选中数据
  if (props.waylineType !== 2) {
    selectedRows.value = val;
    emit('update:selected', val);
  }
};
// 控制表格行是否可选
const checkSelectable = (row) => {
  if (props.waylineType === 2) {
    // 如果已经有选中的行,且当前行未被选中,则不允许选择
    return selectedRows.value.length === 0 || selectedRows.value.some(selected => selected.device_sn === row.device_sn);
  }
  return true;
};
// 处理单行选择
const handleSelect = (selection, row) => {
  if (props.waylineType === 2) {
    // 如果是智能规划选区模式,确保只能选中一行
    if (selection.length > 1) {
      // 保留最后选中的那一行
      const lastSelected = selection[selection.length - 1];
      selectedRows.value = [lastSelected];
      // 触发更新事件
      emit('update:selected', selectedRows.value);
    }
  }
};
// 监听航线ID变化
watch(() => props.waylineId, (newVal) => {
  pageParams.wayline_id = newVal;
  pageParams.value.type = 0;
  if (newVal) {
    pageParams.page = 1;
    getNestList();
    pageParams.value.wayline_id = newVal;
    refreshData();
  } else {
    // 数据为空时,清除列表数据
    tableData.value = [];
  }
}, { immediate: true });
onMounted(() => {
  // getNestList();
}, { deep: true });
// 监听单点返回的数据
watch(() => props.singlePoint, (newVal) => {
  pageParams.value.wayline_id = '';
  pageParams.value.type = 1;
  if (newVal && newVal.latitude && newVal.longitude) {
    pageParams.value.latitude = newVal.latitude;
    pageParams.value.longitude = newVal.longitude;
    refreshData();
  }
}, { deep: true });
// 监听面状航线返回的数据
watch(() => props.planarPoints, (newVal) => {
  pageParams.value.wayline_id = '';
  pageParams.value.type = 2;
  if (newVal && newVal.length > 0) {
    const polygonArray = newVal.map(point => [point.longitude, point.latitude]);
    pageParams.value.polygon = polygonArray;
    refreshData();
  }
}, { deep: true });
// 暴露给父组件的方法
const clearTableData = () => {
  tableData.value = [];
};
defineExpose({
  clearTableData
});
onMounted(() => {});
</script>
<style lang="scss" scoped>