<template>
|
<div class="table-container">
|
<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="预计到达时间" />
|
<el-table-column prop="exe_distance" label="执行里程" />
|
</el-table>
|
<div class="pagination">
|
<el-pagination
|
v-model:current-page="pagingParams.page"
|
v-model:page-size="pagingParams.size"
|
:page-sizes="[10, 20, 30]"
|
layout="total, sizes, prev, pager, next"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { getFlyingNestBy } from '@/api/home/task';
|
|
const props = defineProps({
|
waylineId: {
|
type: String,
|
default: ''
|
},
|
waylineType: {
|
type: Number,
|
default: 3
|
},
|
singlePoint: {
|
type: Object,
|
default: () => ({})
|
},
|
planarPoints: {
|
type: Array,
|
default: () => ([])
|
}
|
});
|
|
// 选中的数据
|
const selectedRows = ref([]);
|
// 分页参数
|
let pageParams = ref({
|
wayline_id: props.waylineId,
|
type: props.waylineType,
|
longitude: props.singlePoint.longitude,
|
latitude: props.singlePoint.latitude,
|
polygon: [],
|
});
|
let pagingParams = ref({
|
current: 1,
|
size: 10
|
});
|
// 获取可用机巢列表数据
|
const total = ref(0);
|
const tableData = ref([]);
|
const getNestList = async () => {
|
tableData.value = [];
|
const res = await getFlyingNestBy(pageParams.value, pagingParams.value);
|
if (res.data.code === 0) {
|
tableData.value = res.data.data;
|
}
|
};
|
// 分页大小改变
|
const handleSizeChange = (val) => {
|
pagingParams.value.size = val;
|
getNestList();
|
};
|
|
// 页码改变
|
const handleCurrentChange = (val) => {
|
pagingParams.value.current = val;
|
getNestList();
|
};
|
|
// 刷新数据
|
const refreshData = () => {
|
tableData.value = [];
|
pagingParams.value.current = 1;
|
getNestList();
|
};
|
|
const emit = defineEmits(['update:selected']);
|
const handleSelectionChange = (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.value.type = 0;
|
if (newVal) {
|
pageParams.value.wayline_id = newVal;
|
refreshData();
|
} else {
|
// 数据为空时，清除列表数据
|
tableData.value = [];
|
}
|
}, { 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>
|
.table-container {
|
height: 500px;
|
// display: flex;
|
// flex-direction: column;
|
|
.pagination {
|
margin-top: 10px;
|
}
|
|
// :deep(.el-table) {
|
// flex: 1;
|
// background-color: transparent;
|
// --el-table-border-color: rgba(255, 255, 255, 0.1);
|
// --el-table-header-bg-color: rgba(31, 62, 122, 0.5);
|
// --el-table-header-text-color: #fff;
|
// --el-table-text-color: #fff;
|
// }
|
}
|
</style>
|
