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/TaskMap.vue | 11
src/views/TaskManage/TaskIntermediateContent/AddTask.vue | 413 +++++++++++++++++--------------
src/views/TaskManage/TaskIntermediateContent/TaskTable.vue | 333 ++++++++++++++-----------
3 files changed, 423 insertions(+), 334 deletions(-)
diff --git a/src/views/TaskManage/TaskIntermediateContent/AddTask.vue b/src/views/TaskManage/TaskIntermediateContent/AddTask.vue
index 6846ab1..5fc9f15 100644
--- a/src/views/TaskManage/TaskIntermediateContent/AddTask.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/AddTask.vue
@@ -1,49 +1,71 @@
-<!-- 机巢列表详情 -->
+<!-- 新建任务 -->
<template>
<el-dialog
+ class="ztzf-dialog"
modal-class="add-task"
v-model="isShowAddTask"
title="新建任务"
:width="pxToRem(1500)"
:close-on-click-modal="false"
- :destroy-on-close="true">
+ :destroy-on-close="true"
+ >
<!-- <el-divider content-position="left">新建任务</el-divider> -->
<div class="task-contain">
<div class="left">
<div class="search">
- <div class="item"><span class="required">*</span>任务名称：<el-input v-model="searchForm.name" placeholder="请输入任务名称"></el-input></div>
- <div class="item"><span class="required">*</span>任务日期：
+ <div class="item">
+ <el-input class="ztzf-input" v-model="searchForm.name" placeholder="请输入任务/机巢名称"></el-input>
+ </div>
+ <div class="item">
<el-date-picker
+ class="ztzf-date-picker"
v-model="taskData"
- format="YYYY-MM-DD"
+ type="daterange"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
value-format="YYYY-MM-DD"
- :disabled-date="disabledDate"
+ @change="changeselect"
/>
</div>
- <div class="item">任务时间：
+ <div class="item">
+ <div class="itemchild">任务时间：</div>
<el-time-picker
+ class="ztzf-date-picker tasktimer"
v-model="timeSlot"
- placeholder="选择时间"
+ placeholder="请选择"
format="HH:mm"
- value-format="HH:mm"/>
+ value-format="HH:mm"
+ />
</div>
- <div class="item">选择航线：
+ <div class="item">
+ <div class="itemchild">选择航线：</div>
+
<el-select
+ class="ztzf-select"
v-model="searchForm.file_id"
@change="getWayLineFile"
placeholder="请选择航线"
- clearable>
+ clearable
+ >
<el-option
v-for="item in routeOptions"
:key="item.wayline_id"
:label="item.name"
- :value="item.wayline_id"/>
- </el-select>
- </div>
- <div class="item">关联算法：
- <TaskAlgorithmBusiness :showAlgorithm="true" @algorithmChange="algorithmChange"/>
- </div>
- <div class="item">任务描述：<el-input v-model="searchForm.remark" placeholder="请输入任务名称"></el-input></div>
+ :value="item.wayline_id"
+ />
+ </el-select>
+ </div>
+ <div class="item">
+
+ <div class="itemchild">关联算法：</div>
+ <TaskAlgorithmBusiness :setWidth="200" :showAlgorithm="true" @algorithmChange="algorithmChange" />
+ </div>
+ <div class="item">
+
+ <div class="itemchild">任务描述：</div>
+ <el-input class="ztzf-input" v-model="searchForm.remark" placeholder="请输入任务名称"></el-input>
+ </div>
</div>
<div class="lines">
<div class="wayline-type">
@@ -52,26 +74,29 @@
<el-radio :value="2" label="智能规划选区"></el-radio>
</el-radio-group>
</div>
- <TaskMap class="wayline-map"
+ <TaskMap
+ class="wayline-map"
:wayLineFile="wayLineFile"
:checkedTableData="checkedTableData"
- :waylineTypeTest="waylineType"
+ :waylineTypeTest="waylineType"
@clickPosition="clickSignPosition"
@saveWayline="savePlanerWayline"
/>
</div>
</div>
- <div class="right">
- <TaskTable ref="taskTableRef"
- :waylineId="waylineId"
- :waylineType="waylineType"
+ <div class="right ">
+ <TaskTable
+ ref="taskTableRef"
+ :waylineId="waylineId"
+ :waylineType="waylineType"
:singlePoint="singlePoint"
:planarPoints="planarPoints"
- @update:selected="handleSelected"
+ @update:selected="handleSelected"
/>
<div class="btn">
- <el-button type="primary" @click="cancel">取消</el-button>
- <el-button type="primary" @click="submitClick">发布</el-button>
+ <img @click="cancel" style="margin-right:23px" src="@/assets/images/task/cancel.png" alt="">
+ <img @click="submitClick" src="@/assets/images/task/publish.png" alt="">
+
</div>
</div>
</div>
@@ -79,26 +104,26 @@
</template>
<script setup>
-import { ElMessage } from 'element-plus';
-import { pxToRem } from '@/utils/rem';
-import { getWaylineList, createTask } from '@/api/home/task';
-import TaskAlgorithmBusiness from '../components/TaskAlgorithmBusiness.vue';
-import TaskMap from './TaskMap.vue';
-import TaskTable from './TaskTable.vue';
+import { ElMessage } from 'element-plus'
+import { pxToRem } from '@/utils/rem'
+import { getWaylineList, createTask } from '@/api/home/task'
+import TaskAlgorithmBusiness from '../components/TaskAlgorithmBusiness.vue'
+import TaskMap from './TaskMap.vue'
+import TaskTable from './TaskTable.vue'
-const emit = defineEmits(['refresh']);
+const emit = defineEmits(['refresh'])
-const rangDate = ref([]);
+const rangDate = ref([])
// 航线ID
-const waylineId = ref('');
+const waylineId = ref('')
// 航线文件
-const wayLineFile = ref('');
+const wayLineFile = ref('')
// 航线类型
-const waylineType = ref(3);
+const waylineType = ref(3)
// 添加子组件引用
-const taskTableRef = ref(null);
-const taskData = ref('');
-const timeSlot = ref('');
+const taskTableRef = ref(null)
+const taskData = ref('')
+const timeSlot = ref('')
const searchForm = reactive({
name: '',
ai_types: [],
@@ -112,157 +137,157 @@
longitude: '',
latitude: '',
polygon: [],
-});
-const isShowAddTask = defineModel('show');
+})
+const isShowAddTask = defineModel('show')
// 禁用当天之前的日期
-const disabledDate = (time) => {
- return time.getTime() < Date.now() - 8.64e7; // 86400000 = 24 * 60 * 60 * 1000
-};
+const disabledDate = time => {
+ return time.getTime() < Date.now() - 8.64e7 // 86400000 = 24 * 60 * 60 * 1000
+}
// 获取航线列表数据
-const routeOptions = ref([]);
+const routeOptions = ref([])
const getRouteList = async () => {
- const res = await getWaylineList();
- if (res.data.code === 0) {
- routeOptions.value = res.data.data;
- }
-};
+ const res = await getWaylineList()
+ if (res.data.code === 0) {
+ routeOptions.value = res.data.data
+ }
+}
// 关联算法
-const algorithmChange = (val) => {
- searchForm.ai_types = val;
-};
+const algorithmChange = val => {
+ searchForm.ai_types = val
+}
// 切换航线类型
-const radioChange = (val) => {
+const radioChange = val => {
// 清空选中航线值
- searchForm.file_id = '';
+ searchForm.file_id = ''
// 航线ID也清空
- waylineId.value = '';
- wayLineFile.value = '';
- waylineType.value = val;
- searchForm.type = val;
+ waylineId.value = ''
+ wayLineFile.value = ''
+ waylineType.value = val
+ searchForm.type = val
// 清空列表数据
nextTick(() => {
- if (taskTableRef.value) {
- taskTableRef.value.clearTableData();
- }
- });
-};
+ if (taskTableRef.value) {
+ taskTableRef.value.clearTableData()
+ }
+ })
+}
// 获取航线文件
-const getWayLineFile = async (val) => {
- searchForm.type = 0;
- waylineType.value = 0;
- waylineId.value = val;
- const currentRoute = routeOptions.value.find(item => item.wayline_id === val);
- wayLineFile.value = currentRoute.object_key;
-};
+const getWayLineFile = async val => {
+ searchForm.type = 0
+ waylineType.value = 0
+ waylineId.value = val
+ const currentRoute = routeOptions.value.find(item => item.wayline_id === val)
+ wayLineFile.value = currentRoute.object_key
+}
// 获取选中机场列表数据,并且发布
-let checkedTableData = ref([]);
-const handleSelected = (val) => {
- searchForm.dock_sns = val.map(item => item.device_sn);
- checkedTableData.value = val;
-};
+let checkedTableData = ref([])
+const handleSelected = val => {
+ searchForm.dock_sns = val.map(item => item.device_sn)
+ checkedTableData.value = val
+}
// 地图点击事件 表格重新刷新数据
-let singlePoint = ref({});
-const clickSignPosition = (val) => {
- singlePoint.value = val;
- searchForm.longitude = val.longitude;
- searchForm.latitude = val.latitude;
-};
+let singlePoint = ref({})
+const clickSignPosition = val => {
+ singlePoint.value = val
+ searchForm.longitude = val.longitude
+ searchForm.latitude = val.latitude
+}
// 保存面状航线
-let planarPoints = ref([]);
-const savePlanerWayline = (val) => {
- planarPoints.value = val;
- const polygonArray = val.map(point => [point.longitude, point.latitude]);
- searchForm.polygon = polygonArray;
-};
+let planarPoints = ref([])
+const savePlanerWayline = val => {
+ planarPoints.value = val
+ const polygonArray = val.map(point => [point.longitude, point.latitude])
+ searchForm.polygon = polygonArray
+}
// 提交
const submitClick = () => {
if (!taskData.value) {
- ElMessage({
- message: '请选择任务日期',
- type: 'warning'
- });
- return;
- }
+ ElMessage({
+ message: '请选择任务日期',
+ type: 'warning',
+ })
+ return
+ }
if (!searchForm.name) {
- ElMessage({
- message: '请输入任务名称',
- type: 'warning'
- });
- return;
- }
+ ElMessage({
+ message: '请输入任务名称',
+ type: 'warning',
+ })
+ return
+ }
// 检查任务时间
- if (timeSlot.value) {
- const now = new Date();
- const today = now.toDateString();
- const selectedDate = new Date(taskData.value).toDateString();
-
- if (today === selectedDate) {
- const [hours, minutes] = timeSlot.value.split(':');
- const selectedTime = new Date();
- selectedTime.setHours(parseInt(hours), parseInt(minutes));
-
- if (selectedTime < now) {
- ElMessage({
- message: '任务时间不能小于当前时间',
- type: 'warning'
- });
- return;
- }
- }
- }
+ if (timeSlot.value) {
+ const now = new Date()
+ const today = now.toDateString()
+ const selectedDate = new Date(taskData.value).toDateString()
+
+ if (today === selectedDate) {
+ const [hours, minutes] = timeSlot.value.split(':')
+ const selectedTime = new Date()
+ selectedTime.setHours(parseInt(hours), parseInt(minutes))
+
+ if (selectedTime < now) {
+ ElMessage({
+ message: '任务时间不能小于当前时间',
+ type: 'warning',
+ })
+ return
+ }
+ }
+ }
if (searchForm.dock_sns.length === 0) {
ElMessage({
message: '请选择机场',
- type: 'warning'
- });
- return;
+ type: 'warning',
+ })
+ return
}
- searchForm.begin_time = `${taskData.value} 00:00:00`;
- searchForm.end_time = `${taskData.value} 23:59:59`;
- searchForm.execute_time_arr = timeSlot.value ? [timeSlot.value] : [];
- createTask(searchForm).then((res) => {
+ searchForm.begin_time = `${taskData.value} 00:00:00`
+ searchForm.end_time = `${taskData.value} 23:59:59`
+ searchForm.execute_time_arr = timeSlot.value ? [timeSlot.value] : []
+ createTask(searchForm).then(res => {
if (res.data.code === 0) {
- ElMessage.success('任务创建成功');
+ ElMessage.success('任务创建成功')
// 关闭当前窗口，刷新任务管理列表
- isShowAddTask.value = false;
+ isShowAddTask.value = false
// 清除数据
- cancel();
- emit('refresh');
+ cancel()
+ emit('refresh')
}
- });
-};
+ })
+}
const cancel = () => {
- isShowAddTask.value = false;
+ isShowAddTask.value = false
// 清除搜索数据
- searchForm.name = '';
- searchForm.ai_types = [];
- searchForm.file_id = '';
- searchForm.begin_time = '';
- searchForm.end_time = '';
- timeSlot.value = '';
- searchForm.remark = '';
- searchForm.dock_sns = [];
- rangDate.value = [];
- waylineId.value = '';
- wayLineFile.value = '';
- taskData.value = '';
-};
+ searchForm.name = ''
+ searchForm.ai_types = []
+ searchForm.file_id = ''
+ searchForm.begin_time = ''
+ searchForm.end_time = ''
+ timeSlot.value = ''
+ searchForm.remark = ''
+ searchForm.dock_sns = []
+ rangDate.value = []
+ waylineId.value = ''
+ wayLineFile.value = ''
+ taskData.value = ''
+}
onMounted(() => {
- getRouteList();
+ getRouteList()
})
</script>
<style lang="scss">
-.add-task{
+.add-task {
.el-pagination {
text-align: left;
padding: 20px;
@@ -273,52 +298,72 @@
<style lang="scss" scoped>
.task-contain {
display: flex;
+ padding: 20px 32px 32px 27px;
.left {
width: 68%;
+ margin-right: 35px;
.search {
display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-template-rows: repeat(2, 1fr);
- gap: 30px; // 增加间距使布局更合理
- margin-bottom: 8px; // 添加底部间距
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 30px; // 增加间距使布局更合理
+ margin-bottom: 8px; // 添加底部间距
.item {
position: relative;
- display: flex;
- align-items: center;
- :deep(.el-input),
- :deep(.el-select),
- :deep(.el-date-picker),
- :deep(.el-time-picker) {
- width: 240px;
- // margin-left: 10px;
- }
- :deep(.el-date-editor.el-input__wrapper) {
- width: 200px; // 调整日期选择器宽度
- }
- .required {
- color: #f56c6c;
- margin-left: 4px;
- position: absolute;
- left: -10px;
- top: 8px;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ color: #ffffff;
+ .itemchild {
+ width: 68px;
+ white-space: nowrap;
+ margin-right: 5px;
}
- }
+ :deep(.el-date-editor.el-input__wrapper) {
+ width: 200px; // 调整日期选择器宽度
+ }
+
+ }
}
}
.right {
width: 32%;
display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- .btn {
- margin-top: 20px;
- text-align: center;
-
- .el-button {
- margin: 0 10px;
- }
- }
+ flex-direction: column;
+ justify-content: space-between;
+
+ .btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ img {
+ width: 137px;
+ height: 32px;
+ cursor: pointer;
+ }
+
+ }
+ }
+ :deep(.tasktimer .el-input__wrapper) {
+ background: none !important;
+ color: #8ac3fd !important;
+
+ }
+ :deep(.el-input__inner) {
+ color: #8ac3fd !important;
+ &::placeholder {
+ color: #8ac3fd !important;
+ }
+ }
+ :deep(.el-radio__inner){
+ background: none !important;
+ border: 1px solid #1B5D9A !important;
+ }
+ :deep(.el-radio__label){
+ color: #fff !important;
+ }
+ :deep(.el-radio__inner:after ){
+ background: #65B5FF !important;
}
}
</style>
diff --git a/src/views/TaskManage/TaskIntermediateContent/TaskMap.vue b/src/views/TaskManage/TaskIntermediateContent/TaskMap.vue
index b360db9..73653d1 100644
--- a/src/views/TaskManage/TaskIntermediateContent/TaskMap.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/TaskMap.vue
@@ -14,7 +14,7 @@
import { getCenterPoint } from '@/utils/cesium/mapUtil'
import { getWaylineByArea } from '@/api/home/task';
import { useStore } from 'vuex';
-
+import { addBlueFilter } from '@/utils/cesium/common'
const store = useStore();
const userAreaPosition = computed(() => store.state.home.userAreaPosition);
@@ -74,7 +74,14 @@
fullscreenButton: false,
// sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
})
- viewer.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
+ const gdLayer = viewer.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
+ const options = {
+ bInvertColor: true,
+ bFilterColor: true,
+ filterColor: '#4e70a6'
+ }
+ // 添加蓝色滤镜
+ addBlueFilter(options,viewer,gdLayer)
viewer.scene.morphTo2D(0);
//设置默认点
const { longitude = 115.763819, latitude = 28.787374, height = 10 } = userAreaPosition.value || {};
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