| | |
| | | <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="预计到达时间" /> |
| | |
| | | }, |
| | | 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 |
| | | }); |
| | |
| | | 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> |