feat: 新建任务ui调整

张含笑

2025-04-16 bb94b81805f2e111efdfb118bc6585dbbfeb9c77

 src/views/TaskManage/TaskIntermediateContent/TaskTable.vue

@@ -1,189 +1,226 @@
<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>
   <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" />
         <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';
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: () => ([])
  }
});
   waylineId: {
      type: String,
      default: '',
   },
   waylineType: {
      type: Number,
      default: 3,
   },
   singlePoint: {
      type: Object,
      default: () => ({}),
   },
   planarPoints: {
      type: Array,
      default: () => [],
   },
})

// 选中的数据
const selectedRows = ref([]);
const selectedRows = ref([])
// 分页参数
let pageParams = ref({
  wayline_id: props.waylineId, 
  type: props.waylineType,
  longitude: props.singlePoint.longitude,
  latitude: props.singlePoint.latitude,
  polygon: [],
});
   wayline_id: props.waylineId,
   type: props.waylineType,
   longitude: props.singlePoint.longitude,
   latitude: props.singlePoint.latitude,
   polygon: [],
})
let pagingParams = ref({
  current: 1,
  size: 10
});
   current: 1,
   size: 10,
})
// 获取可用机巢列表数据
const total = ref(0);
const tableData = ref([]);
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;
  }
};
   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 handleSizeChange = val => {
   pagingParams.value.size = val
   getNestList()
}

// 页码改变
const handleCurrentChange = (val) => {
  pagingParams.value.current = val;
  getNestList();
};
const handleCurrentChange = val => {
   pagingParams.value.current = val
   getNestList()
}

// 刷新数据
const refreshData = () => {
  tableData.value = [];
  pagingParams.value.current = 1;
  getNestList();
};
   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 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 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);
    }
  }
};
   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.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.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 });
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 = [];
};
   tableData.value = []
}
defineExpose({
  clearTableData
});


onMounted(() => {});

   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;
  // 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;
  // }
   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>