From bb94b81805f2e111efdfb118bc6585dbbfeb9c77 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 16 Apr 2025 11:11:43 +0800
Subject: [PATCH] feat: 新建任务ui调整
---
src/views/TaskManage/TaskIntermediateContent/TaskTable.vue | 333 ++++++++++++++++++++++++++++++------------------------
1 files changed, 185 insertions(+), 148 deletions(-)
diff --git a/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue b/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue
index 6d1b608..b165cf9 100644
--- a/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3