<template>
|
<div class="table-container ztzf-table">
|
<div class="taskTableTitle"><span>可飞行机巢列表</span></div>
|
<el-table
|
:data="tableData"
|
:row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
|
:header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" :selectable="checkSelectable" />
|
<el-table-column type="index" label="序号">
|
<template #default="{ $index }">
|
{{ ($index + 1).toString().padStart(2, '0') }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="nickname" label="机巢名称" />
|
<el-table-column prop="estimated_arrival_time" label="预计到达时间(min)" />
|
<el-table-column prop="flight_range" label="执行里程(km)" />
|
</el-table>
|
<div class="pagination">
|
<el-pagination
|
class="ztzf-pagination"
|
v-model:current-page="pagingParams.page"
|
v-model:page-size="pagingParams.size"
|
layout=" prev, pager, next"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { getFlyingNestBy } from '@/api/job/task'
|
import _ from 'lodash'
|
|
const props = defineProps({
|
waylineId: {
|
type: String,
|
default: '',
|
},
|
waylineType: {
|
type: Number,
|
default: 3,
|
},
|
singlePoint: {
|
type: Object,
|
default: () => ({}),
|
},
|
waylineModel: {
|
type: String,
|
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 || []).map((item, index) => ({
|
...item,
|
estimated_arrival_time: item.estimated_arrival_time > 0 ? _.round(item.estimated_arrival_time / 60, 0) : 0,
|
flight_range: item.flight_range > 0 ? _.round(item.flight_range / 1000, 0) : 0,
|
}))
|
}
|
}
|
// 分页大小改变
|
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)
|
} else {
|
// 如果是智能规划选区模式，更新选中数据
|
if (val.length > 1) {
|
const lastSelected = selection[selection.length - 1]
|
selectedRows.value = [lastSelected]
|
emit('update:selected', selectedRows.value)
|
} else {
|
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) => {
|
// console.log(55555, selection)
|
// if (props.waylineType === 2) {
|
// // 如果是智能规划选区模式，确保只能选中一行
|
// if (selection.length === 0) {
|
// }
|
// if (selection.length > 1 || selection.length === 1) {
|
// // 保留最后选中的那一行
|
// const lastSelected = selection[selection.length - 1]
|
// selectedRows.value = [lastSelected]
|
// // 触发更新事件
|
// console.log('99999', selectedRows.value)
|
// emit('update:selected', selectedRows.value)
|
// }
|
// }
|
// }
|
|
// 监听航线ID变化
|
watch(
|
() => props.waylineId,
|
newVal => {
|
pageParams.value.type = 0
|
if (newVal && props.waylineModel === 'point') {
|
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,
|
})
|
// 表格隔行变色
|
const tableRowClassName = ({ row, rowIndex }) => {
|
if (rowIndex % 2 === 1) {
|
return 'warning-row'
|
} else {
|
return 'success-row'
|
}
|
}
|
onMounted(() => {})
|
</script>
|
|
<style lang="scss" scoped>
|
.table-container {
|
.pagination {
|
margin-top: 10px;
|
}
|
:deep(.cell) {
|
padding: 0;
|
margin: 0;
|
// border: 1px solid red;
|
// width: 20px;
|
}
|
// 分页
|
:deep(.el-pagination) {
|
display: flex;
|
justify-content: center;
|
}
|
.taskTableTitle {
|
margin-bottom: 16px;
|
background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
|
background-size: 100% 100%;
|
span {
|
display: inline-block;
|
margin-left: 10px;
|
font-size: 16px;
|
color: #ddf0ff;
|
line-height: 20px;
|
text-align: left;
|
margin-bottom: 8px;
|
}
|
}
|
:deep(.el-checkbox__inner) {
|
background: none !important;
|
border: 1px solid #3194ef !important;
|
}
|
}
|
</style>
|
