<template>
|
<div class="table-container ztzf-table">
|
<div class="taskTableTitle"><span>可飞行机巢列表</span></div>
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
height="400"
|
:row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
|
:header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
|
@selection-change="handleSelectionChange"
|
@select="handleSelect"
|
>
|
<el-table-column type="selection" width="55" :selectable="checkSelectable" />
|
<el-table-column type="index" label="序号" width="60" >
|
<template #default="{ $index }">
|
{{ ($index + 1).toString().padStart(2, '0') }}
|
</template>
|
</el-table-column>
|
<el-table-column show-overflow-tooltip prop="nickname" label="机巢名称" />
|
<el-table-column show-overflow-tooltip width="120" prop="estimated_arrival_time" label="预计到达时间" />
|
<el-table-column show-overflow-tooltip prop="exe_distance" label="执行里程" />
|
</el-table>
|
<div class="pagination">
|
<el-pagination
|
class="ztzf-pagination"
|
v-model:current-page="pagingParams.page"
|
v-model:page-size="pagingParams.size"
|
:page-sizes="[10, 20, 30]"
|
layout=" 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,
|
})
|
// 表格隔行变色
|
const tableRowClassName = ({ row, rowIndex }) => {
|
if (rowIndex % 2 === 1) {
|
return 'warning-row'
|
} else {
|
return 'success-row'
|
}
|
}
|
onMounted(() => {})
|
</script>
|
|
<style lang="scss" scoped>
|
.table-container {
|
height: 500px;
|
.pagination {
|
margin-top: 10px;
|
}
|
|
// 分页
|
: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>
|
