From b20d2d36330f815050c6a76a17d5dcbf49372915 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Wed, 16 Apr 2025 18:52:20 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/hooks/components/EventPopUpBox.vue | 0
src/api/home/machineNest.js | 83 +-
src/assets/images/home/useEventOperate/offline.png | 0
src/assets/images/newEndPointicon.png | 0
src/views/SignMachineNest/SignMachineNest.vue | 169 ++--
src/assets/images/task/publish.png | 0
src/hooks/components/DevicePopUpBox.vue | 0
src/hooks/useMapAggregation/useMapAggregation.js | 4
src/hooks/useSingleDroneMap/useSingleDroneMap.js | 236 ++++++
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue | 22
src/views/TaskManage/TaskIntermediateContent/TaskMap.vue | 725 ++++++++++----------
src/assets/images/newStartPoint.png | 0
src/assets/images/task/cancel.png | 0
src/views/TaskManage/TaskIntermediateContent/AddTask.vue | 413 ++++++-----
src/views/TaskManage/TaskIntermediateContent/TaskTable.vue | 337 +++++----
src/assets/images/newarrow-right.png | 0
16 files changed, 1,178 insertions(+), 811 deletions(-)
diff --git a/src/api/home/machineNest.js b/src/api/home/machineNest.js
index cc2c476..7c7cf8a 100644
--- a/src/api/home/machineNest.js
+++ b/src/api/home/machineNest.js
@@ -2,60 +2,69 @@
// 机巢统计
export const getDeviceInfoNum = params => {
- return request({
- url: '/drone-device-core/manage/api/v1/devices/getDeviceInfoNum',
- method: 'get',
- params,
- })
+ return request({
+ url: '/drone-device-core/manage/api/v1/devices/getDeviceInfoNum',
+ method: 'get',
+ params,
+ })
}
// 机巢列表
export const selectDevicePage = ({ nickname, ...params }) => {
- return request({
- url: `/drone-device-core/manage/api/v1/devices/selectDevicePage?type=${params.type}¤t=${params.current}&size=${params.size}`,
- method: 'post',
- data: {
- nickname,
- },
- })
+ return request({
+ url: `/drone-device-core/manage/api/v1/devices/selectDevicePage?type=${params.type}¤t=${params.current}&size=${params.size}`,
+ method: 'post',
+ data: {
+ nickname,
+ },
+ })
}
// 机巢数据
export const getFlightStatistics = dockSn => {
- return request({
- url: `/drone-device-core/manage/api/v1/devices/getFlightStatistics?dockSn=${dockSn}`,
- method: 'get',
- params: {},
- })
+ return request({
+ url: `/drone-device-core/manage/api/v1/devices/getFlightStatistics?dockSn=${dockSn}`,
+ method: 'get',
+ params: {},
+ })
}
// 机巢直播/无人机直播 均可使用
export const liveStart = (deviceSn, quality) => {
- return request({
- url: `/drone-device-core/manage/api/v1/live/streams/liveStart?deviceSn=${deviceSn}&quality=${quality}`,
- method: 'post',
- data: {},
- headers: {
- areaCode: '',
- },
- })
+ return request({
+ url: `/drone-device-core/manage/api/v1/live/streams/liveStart?deviceSn=${deviceSn}&quality=${quality}`,
+ method: 'post',
+ data: {},
+ headers: {
+ areaCode: '',
+ },
+ })
}
// 单个机巢获取机巢详情
export const getDeviceDetail = deviceSn => {
- return request({
- url: `/drone-device-core/manage/api/v1/devices/getDeviceDetail?deviceSn=${deviceSn}`,
- method: 'get',
- params: {},
- })
+ return request({
+ url: `/drone-device-core/manage/api/v1/devices/getDeviceDetail?deviceSn=${deviceSn}`,
+ method: 'get',
+ params: {},
+ })
}
// 设备-事件列表
-export const getDeviceEventList = (data,params) => {
- return request({
- url: `/drone-device-core/jobEvent/eventPage`,
- method: 'post',
- data,
- params
- })
+export const getDeviceEventList = (data, params) => {
+ return request({
+ url: `/drone-device-core/jobEvent/eventPage`,
+ method: 'post',
+ data,
+ params
+ })
}
+// 事件列表---点位上图
+export const getEventList = (data, params) => {
+ return request({
+ url: '/drone-device-core/jobEvent/eventList',
+ method: 'post',
+ data,
+ params
+ })
+}
diff --git a/src/assets/images/home/useEventOperate/offline.png b/src/assets/images/home/useEventOperate/offline.png
new file mode 100644
index 0000000..f80ee01
--- /dev/null
+++ b/src/assets/images/home/useEventOperate/offline.png
Binary files differ
diff --git a/src/assets/images/newEndPointicon.png b/src/assets/images/newEndPointicon.png
new file mode 100644
index 0000000..4856313
--- /dev/null
+++ b/src/assets/images/newEndPointicon.png
Binary files differ
diff --git a/src/assets/images/newStartPoint.png b/src/assets/images/newStartPoint.png
new file mode 100644
index 0000000..4845f58
--- /dev/null
+++ b/src/assets/images/newStartPoint.png
Binary files differ
diff --git a/src/assets/images/newarrow-right.png b/src/assets/images/newarrow-right.png
new file mode 100644
index 0000000..fd860a3
--- /dev/null
+++ b/src/assets/images/newarrow-right.png
Binary files differ
diff --git a/src/assets/images/task/cancel.png b/src/assets/images/task/cancel.png
new file mode 100644
index 0000000..8067a0a
--- /dev/null
+++ b/src/assets/images/task/cancel.png
Binary files differ
diff --git a/src/assets/images/task/publish.png b/src/assets/images/task/publish.png
new file mode 100644
index 0000000..5bbf106
--- /dev/null
+++ b/src/assets/images/task/publish.png
Binary files differ
diff --git a/src/hooks/useMapAggregation/DevicePopUpBox.vue b/src/hooks/components/DevicePopUpBox.vue
similarity index 100%
rename from src/hooks/useMapAggregation/DevicePopUpBox.vue
rename to src/hooks/components/DevicePopUpBox.vue
diff --git a/src/hooks/useMapAggregation/EventPopUpBox.vue b/src/hooks/components/EventPopUpBox.vue
similarity index 100%
rename from src/hooks/useMapAggregation/EventPopUpBox.vue
rename to src/hooks/components/EventPopUpBox.vue
diff --git a/src/hooks/useMapAggregation/useMapAggregation.js b/src/hooks/useMapAggregation/useMapAggregation.js
index 9c4d32d..c3b229b 100644
--- a/src/hooks/useMapAggregation/useMapAggregation.js
+++ b/src/hooks/useMapAggregation/useMapAggregation.js
@@ -4,8 +4,8 @@
import uavImg from '@/assets/images/home/useUavHome/uavImg.png'
import eventSingle from '@/assets/images/home/useEventOperate/eventSingle.png'
-import DevicePopUpBox from '@/hooks/useMapAggregation/DevicePopUpBox.vue'
-import EventPopUpBox from '@/hooks/useMapAggregation/EventPopUpBox.vue'
+import DevicePopUpBox from '@/hooks/components/DevicePopUpBox.vue'
+import EventPopUpBox from '@/hooks/components/EventPopUpBox.vue'
import { render } from 'vue'
import { useStore } from 'vuex'
diff --git a/src/hooks/useSingleDroneMap/useSingleDroneMap.js b/src/hooks/useSingleDroneMap/useSingleDroneMap.js
new file mode 100644
index 0000000..86c46b0
--- /dev/null
+++ b/src/hooks/useSingleDroneMap/useSingleDroneMap.js
@@ -0,0 +1,236 @@
+/*
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2025-04-15 22:41:40
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2025-04-16 18:38:00
+ * @FilePath: \command-center-dashboard\src\hooks\useSingleDroneMap\useSingleDroneMap.js
+ * @Description:
+ *
+ * Copyright (c) 2025 by shuishen, All Rights Reserved.
+ */
+import * as Cesium from 'cesium'
+import endingImg from '@/assets/images/aiNowFly/ending.png'
+import endingHighImg from '@/assets/images/aiNowFly/ending-high.png'
+
+/**
+ *
+ * @param {Object} options - 配置选项
+ */
+export function useSingleDroneMap (options = {
+ eventPositions: [],
+ eventApi: null,
+ eventApiParams: {}
+}) {
+ const { eventPositions, eventApi, eventApiParams } = options
+
+ let viewer = null
+ let handler = null
+ let currentEntity = null
+
+ // 初始化机场位置
+ const initDroneEntity = (dronePosition) => {
+ const { lng, lat, status } = dronePosition
+
+ if (!lng || !lat) return
+
+ const markerImg = status ? endingHighImg : endingImg
+ const position = Cesium.Cartesian3.fromDegrees(+lng, +lat, 0)
+
+ const droneEntity = viewer?.entities.add({
+ id: `single-drone-position`,
+ position: position,
+
+ billboard: {
+ image: new Cesium.ConstantProperty(markerImg),
+ width: 35,
+ height: 35,
+ },
+
+ ellipse: {
+ semiMinorAxis: 5000,
+ semiMajorAxis: 5000,
+ outline: true,
+ material: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.3),
+ },
+
+ properties: {
+ customData: {
+ data: {
+ type: 'single-drone-event'
+ }
+ }
+ }
+ })
+
+ viewer?.flyTo(droneEntity, {
+ offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-60), 0),
+ duration: 0.5,
+ })
+ }
+
+ // 机巢事件地图撒点
+ const initDroneEventEntity = (eventPositions = eventPositions) => {
+ // 遍历特征并添加实体
+ eventPositions.length && eventPositions.forEach((item, index) => {
+ const { longitude, latitude, status, id } = item
+
+ const position = Cesium.Cartesian3.fromDegrees(+longitude, +latitude, 0)
+
+ viewer?.entities.add({
+ id: `single-drone-event-${index}`,
+ position: position,
+ billboard: {
+ image: new Cesium.ConstantProperty(endingHighImg),
+ width: 35,
+ height: 35,
+ },
+ properties: {
+ customData: {
+ data: {
+ type: 'single-drone-sign'
+ }
+ }
+ },
+ })
+ })
+ }
+
+ // 调用传入api
+ const initEventApiEntity = () => {
+ removeEventLayer()
+
+ eventApi(
+ {
+ ...eventApiParams,
+ }
+ ).then(res => {
+ const result = res.data.data.records
+
+ initDroneEventEntity(result)
+ })
+ }
+
+ // 事件地图撒点加载方式
+ const initEventLayer = () => {
+ eventApi ? initEventApiEntity() : initDroneEventEntity()
+ }
+
+ const removeEventLayer = () => {
+ // entities移除
+ const entitiesIDs = viewer?.entities.values.map(i => i.id)
+ entitiesIDs && entitiesIDs.forEach(item => {
+ item.includes('single-drone-event') && viewer?.entities.removeById(item)
+ })
+ }
+
+ // 移除当前地图所有entity
+ const removeLayer = () => {
+ // entities移除
+ const entitiesIDs = viewer?.entities.values.map(i => i.id)
+ entitiesIDs.forEach(item => {
+ item.includes('single-drone-') && viewer?.entities.removeById(item)
+ })
+ }
+
+ // 查找特定类型的实体
+ const findEntityByType = (entities, type) => {
+ return entities.find(entity =>
+ entity?.properties?.customData?._value?.data?.type === type
+ )
+ }
+
+ // 左键单机事件
+ const singleMachineEvent = async click => {
+ let clickedEntities = viewer?.scene.drillPick(click.position).map(item => item.id)
+ if (!clickedEntities.length) return
+
+ const currentEntity = findEntityByType(clickedEntities, 'single-drone-event')
+
+ removeLabel()
+
+ if (currentEntity) {
+ viewer?.scene.postRender.addEventListener(labelBoxRender)
+ }
+ }
+
+ // 事件初始化
+ const handlerInit = () => {
+ if (handler) return
+
+ handler = new Cesium.ScreenSpaceEventHandler(viewer?.scene.canvas)
+ handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+ }
+
+ // 事件移除
+ const removeHandler = () => {
+ handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+ handler?.destroy()
+ handler = null
+ }
+
+ // 获取弹框box
+ const getLabelDom = data => {
+ const vNode = h(EventPopUpBox, { data, removeLabel })
+ const tooltipContainer = document.createElement('div')
+ tooltipContainer.id = 'mapPopUpBox'
+ tooltipContainer.style.position = 'absolute'
+ tooltipContainer.style.transform = styleTransform
+ tooltipContainer.style.pointerEvents = 'none'
+ document.querySelector('.page-index').append(tooltipContainer)
+ render(vNode, tooltipContainer)
+ return tooltipContainer
+ }
+
+ // 弹框位置刷新
+ const labelBoxRender = () => {
+ if (!currentEntity) return
+ let dom = document.querySelector('#mapPopUpBox')
+ if (!dom) {
+ dom = getLabelDom(currentEntity.properties.customData._value.data)
+ }
+ const screenPosition = viewer?.scene.cartesianToCanvasCoordinates(currentEntity?.position?._value)
+ if (screenPosition) {
+ dom.style.left = `${screenPosition.x}px`
+ dom.style.top = `${screenPosition.y}px`
+ dom.style.display = 'block'
+ }
+ }
+
+ const removeDom = () => {
+ const dom = document.querySelector('#mapPopUpBox')
+ if (dom && dom.parentNode) {
+ dom.parentNode.removeChild(dom)
+ }
+ }
+
+ // 移除弹框标签
+ const removeLabel = () => {
+ viewer?.scene.postRender.removeEventListener(labelBoxRender)
+ removeDom()
+ }
+
+
+ const init = () => {
+ viewer = window.$viewer
+
+ handlerInit()
+ }
+
+ const removeAll = () => {
+ removeLayer()
+ removeHandler()
+ removeLabel()
+ }
+
+ // 自动清理
+ onUnmounted(() => {
+ removeAll()
+ })
+
+ return {
+ init,
+ removeAll,
+ initEventLayer,
+ initDroneEntity,
+ }
+}
\ No newline at end of file
diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue
index e40f4c2..d4cc8c7 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue
@@ -1,4 +1,4 @@
-<!-- 任务详情 -->
+<!-- 历史任务详情 -->
<template>
<el-dialog
class="ztzf-dialog"
@@ -24,7 +24,7 @@
</div>
<div class="itemBoxRight">
<div class="itemTitle">关联算法：</div>
- <div class="itemValue">{{ flystatus }}</div>
+ <div class="itemValue">{{ flystatus ? flystatus :'' }}</div>
</div>
</div>
<JobRelatedEvents v-if="isShow" />
@@ -123,7 +123,7 @@
if (item.name === '任务时间') {
item.value = detailsData.value.begin_time.slice(0, 10) + '-' + detailsData.value.end_time.slice(0, 10)
} else if (item.name === '任务频次') {
- item.value = detailsData.value.rep_rule_type + ' -- ' + detailsData.value.rep_rule_val
+ item.value ===undefined ? '' : detailsData.value.rep_rule_type + ' -- ' + detailsData.value.rep_rule_val
} else {
item.value = detailsData.value?.[item.field] || ''
}
@@ -240,14 +240,16 @@
}
.imgListBox {
- display: flex;
- flex-wrap: wrap;
+ // display: flex;
+ // flex-wrap: wrap;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
gap: 10px;
-
- .imgItem {
- width: 200px;
- height: 200px;
- }
+ margin-bottom: 49px;
+ // .imgItem {
+ // width: 200px;
+ // height: 200px;
+ // }
}
}
diff --git a/src/views/SignMachineNest/SignMachineNest.vue b/src/views/SignMachineNest/SignMachineNest.vue
index bfec7ce..453e73c 100644
--- a/src/views/SignMachineNest/SignMachineNest.vue
+++ b/src/views/SignMachineNest/SignMachineNest.vue
@@ -1,98 +1,119 @@
<template>
- <MachineLeft></MachineLeft>
- <MachineRight></MachineRight>
+ <MachineLeft></MachineLeft>
+ <MachineRight></MachineRight>
</template>
<script setup>
import MachineLeft from '@/views/SignMachineNest/MachineLeft/MachineLeft.vue'
-import MachineRight from '@/views/SignMachineNest/MachineRight/MachineRight.vue';
-import { useConnectWebSocket } from '@/utils/websocket/connect-websocket';
-import { getWebsocketUrl } from '@/websocket/util/config';
-import { EBizCode } from '@/utils/staticData/enums.js';
-import { EModeCode } from '@/utils/staticData/device.js';
-import { useStore } from 'vuex';
-import { getDeviceDetail, getFlightStatistics } from '@/api/home/machineNest';
+import MachineRight from '@/views/SignMachineNest/MachineRight/MachineRight.vue'
+import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
+import { getWebsocketUrl } from '@/websocket/util/config'
+import { EBizCode } from '@/utils/staticData/enums.js'
+import { EModeCode } from '@/utils/staticData/device.js'
+import { useStore } from 'vuex'
+import { getDeviceDetail, getFlightStatistics, getEventList } from '@/api/home/machineNest'
+import { useSingleDroneMap } from '@/hooks/useSingleDroneMap/useSingleDroneMap'
-const store = useStore();
-let connectWs = ref(null);
+const store = useStore()
+let connectWs = ref(null)
// 单个机巢信息
-const singleUavHome = computed(() => store.state.home.singleUavHome);
+const singleUavHome = computed(() => store.state.home.singleUavHome)
+const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)
-let osdVisible = ref({});
+let osdVisible = ref({})
-let workspaceId = ref('');
+let workspaceId = ref('')
// 进入单个机巢开始连接ws
const createWsConntect = () => {
- let webSorketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId.value;
- // 监听ws 消息
- connectWs.value = useConnectWebSocket(messageHandler, webSorketUrl);
-};
+ let webSorketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId.value
+ // 监听ws 消息
+ connectWs.value = useConnectWebSocket(messageHandler, webSorketUrl)
+}
-const messageHandler = (result) => {
- let payload = JSON.parse(result) // 为了兼容聊天消息
- if (!payload) return
- switch (payload.biz_code) {
- case EBizCode.GatewayOsd: {
- store.commit('setGatewayInfo', payload.data)
- break
- }
- case EBizCode.DeviceOsd: {
- // console.log(payload, 'DeviceOsd')
- store.commit('setDeviceInfo', payload)
- store.commit('setWsMessage', payload)
- break
- }
- case EBizCode.DockOsd: {
- store.commit('setDockOnfo', payload.data)
- break
- }
- default:
- break
- }
-};
+const messageHandler = result => {
+ let payload = JSON.parse(result) // 为了兼容聊天消息
+ if (!payload) return
+ switch (payload.biz_code) {
+ case EBizCode.GatewayOsd: {
+ store.commit('setGatewayInfo', payload.data)
+ break
+ }
+ case EBizCode.DeviceOsd: {
+ // console.log(payload, 'DeviceOsd')
+ store.commit('setDeviceInfo', payload)
+ store.commit('setWsMessage', payload)
+ break
+ }
+ case EBizCode.DockOsd: {
+ store.commit('setDockOnfo', payload.data)
+ break
+ }
+ default:
+ break
+ }
+}
+
+// 单机巢初始化及事件撒点
+const { init, initEventLayer, initDroneEntity } = useSingleDroneMap({
+ eventApi: getEventList,
+ eventApiParams: {
+ device_sn: singleUavHome.value.device_sn,
+ },
+})
// 获取单个机巢信息
const getSingleDetails = () => {
- getDeviceDetail(singleUavHome.value.device_sn).then((res) => {
- if (res.data.code !== 0) return;
- const result = res.data.data;
- const child = result.children;
- // 对应store 里面数据结构
- osdVisible.value.sn = child?.device_sn || ''
- osdVisible.value.callsign = child?.nickname || '--'
- osdVisible.value.model = EModeCode.Disconnected || ''
- osdVisible.value.visible = true
- osdVisible.value.gateway_sn = result?.device_sn || ''
- osdVisible.value.is_dock = true
- osdVisible.value.gateway_callsign = result?.callsign || '--'
- osdVisible.value.payloads = child?.payloads_list || []
- osdVisible.value.device_domain = child.domain || 0
- osdVisible.value.device_sub_type = child.sub_type || 1
- osdVisible.value.device_type = child.type || 0
- // osdVisible.value.latest_wayline_job = result?.latest_wayline_job || {}
- store.commit('setOsdVisibleInfo', osdVisible.value);
- store.commit('setSelectedWorkSpaceId', result.workspace_id);
- workspaceId.value = result.workspace_id;
- createWsConntect();
- });
-};
+ getDeviceDetail(singleUavHome.value.device_sn).then(res => {
+ if (res.data.code !== 0) return
+ const result = res.data.data
+
+ initDroneEntity({
+ lng: result.longitude,
+ lat: result.latitude,
+ status: result.status,
+ })
+
+ const child = result.children
+ // 对应store 里面数据结构
+ osdVisible.value.sn = child?.device_sn || ''
+ osdVisible.value.callsign = child?.nickname || '--'
+ osdVisible.value.model = EModeCode.Disconnected || ''
+ osdVisible.value.visible = true
+ osdVisible.value.gateway_sn = result?.device_sn || ''
+ osdVisible.value.is_dock = true
+ osdVisible.value.gateway_callsign = result?.callsign || '--'
+ osdVisible.value.payloads = child?.payloads_list || []
+ osdVisible.value.device_domain = child.domain || 0
+ osdVisible.value.device_sub_type = child.sub_type || 1
+ osdVisible.value.device_type = child.type || 0
+ // osdVisible.value.latest_wayline_job = result?.latest_wayline_job || {}
+ store.commit('setOsdVisibleInfo', osdVisible.value)
+ store.commit('setSelectedWorkSpaceId', result.workspace_id)
+ workspaceId.value = result.workspace_id
+ createWsConntect()
+ })
+}
// 获取机巢统计数据 提供给左右侧组件使用
const getMachineData = () => {
- getFlightStatistics(singleUavHome.value.device_sn).then(res => {
- if (res.data.code !== 0) return;
- const result = res.data.data;
- store.commit('setSingleTotal', result);
- })
-};
+ getFlightStatistics(singleUavHome.value.device_sn).then(res => {
+ if (res.data.code !== 0) return
+ const result = res.data.data
+ store.commit('setSingleTotal', result)
+ })
+}
onMounted(() => {
- getSingleDetails();
- getMachineData();
-});
+ nextTick(() => {
+ init()
+ })
+ initEventLayer()
+ getSingleDetails()
+ getMachineData()
+})
onUnmounted(() => {
- connectWs?.value?.close();
-});
+ connectWs?.value?.close()
+})
</script>
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..a8787a7 100644
--- a/src/views/TaskManage/TaskIntermediateContent/TaskMap.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/TaskMap.vue
@@ -7,33 +7,37 @@
import AmapMercatorTilingScheme from '@/utils/cesium/AmapMercatorTilingScheme'
import { analyzeKmzFile, removeTextKey, XMLToJSON } from '@/utils/cesium/kmz'
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
-import lineImg from '@/assets/images/arrow-right-blue.png';
-import Startingpointicon from '@/assets/images/Startingpointicon.png';
-import EndPointicon from '@/assets/images/EndPointicon.png';
+import lineImg from '@/assets/images/arrow-right-blue.png'
+import Startingpointicon from '@/assets/images/Startingpointicon.png'
+import EndPointicon from '@/assets/images/EndPointicon.png'
import uavImg from '@/assets/images/home/useUavHome/uavImg.png'
import { getCenterPoint } from '@/utils/cesium/mapUtil'
-import { getWaylineByArea } from '@/api/home/task';
-import { useStore } from 'vuex';
-
-const store = useStore();
-const userAreaPosition = computed(() => store.state.home.userAreaPosition);
+import { getWaylineByArea } from '@/api/home/task'
+import { useStore } from 'vuex'
+import { addBlueFilter } from '@/utils/cesium/common'
+// 新图片
+import newStartPoint from '@/assets/images/newStartPoint.png'
+import newEndPointImg from '@/assets/images/newEndPointicon.png'
+import newlineImg from '@/assets/images/newarrow-right.png'
+const store = useStore()
+const userAreaPosition = computed(() => store.state.home.userAreaPosition)
// 声明事件
-const emit = defineEmits(['clickPosition', 'saveWayline']);
+const emit = defineEmits(['clickPosition', 'saveWayline'])
const props = defineProps({
wayLineFile: {
- type: String,
- default: ''
- },
- checkedTableData: {
- type: Array,
- default: () => []
- },
+ type: String,
+ default: '',
+ },
+ checkedTableData: {
+ type: Array,
+ default: () => [],
+ },
waylineTypeTest: {
- type: Number,
- default: 3
- }
+ type: Number,
+ default: 3,
+ },
})
const imageryProvider_ammapSL = new Cesium.UrlTemplateImageryProvider({
@@ -46,17 +50,16 @@
maximumLevel: 18,
tilingScheme: new AmapMercatorTilingScheme(),
credit: 'amap_SL',
-});
+})
-let viewer = null;
-let currentEntity = null;
-let connectLines = []; // 存储连接线实体
-let polygonPoints = []; // 存储多边形的点
-let polygonEntity = null; // 存储多边形实体
-let existingEntity = null; // 后端返回数据生成得面状线
+let viewer = null
+let currentEntity = null
+let connectLines = [] // 存储连接线实体
+let polygonPoints = [] // 存储多边形的点
+let polygonEntity = null // 存储多边形实体
+let existingEntity = null // 后端返回数据生成得面状线
// 添加变量跟踪当前菜单
-let currentMenu = null;
-
+let currentMenu = null
const init = () => {
viewer = new Viewer('taskMap', {
@@ -74,80 +77,81 @@
fullscreenButton: false,
// sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
})
- viewer.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
- viewer.scene.morphTo2D(0);
+ 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 || {};
+ const { longitude = 115.763819, latitude = 28.787374, height = 10 } = userAreaPosition.value || {}
viewer.camera.setView({
destination: Cartesian3.fromDegrees(longitude, latitude, height),
- });
+ })
}
// 单点左键点击事件
const singlePointLeftClick = () => {
- viewer.screenSpaceEventHandler.setInputAction((click) => {
+ viewer.screenSpaceEventHandler.setInputAction(click => {
if (props.waylineTypeTest !== 1) return
- const cartesian = viewer.camera.pickEllipsoid(
- click.position,
- viewer.scene.globe.ellipsoid
- );
- if (cartesian) {
- // 清除之前的实体
- viewer.entities.removeAll();
-
- // 添加新点
- const point = viewer.entities.add({
- position: cartesian,
- point: {
- pixelSize: 10,
- color: Cesium.Color.WHITE
- }
- });
-
- // 转换坐标
- const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
- const longitude = Cesium.Math.toDegrees(cartographic.longitude);
- const latitude = Cesium.Math.toDegrees(cartographic.latitude);
-
- // 更新当前实体引用
- currentEntity = point;
-
- // 发送坐标
- emit('clickPosition', { longitude, latitude });
- }
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-};
+ const cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid)
+ if (cartesian) {
+ // 清除之前的实体
+ viewer.entities.removeAll()
+
+ // 添加新点
+ const point = viewer.entities.add({
+ position: cartesian,
+ point: {
+ pixelSize: 10,
+ color: Cesium.Color.fromCssColorString('#1FFF69'),
+ },
+ })
+
+ // 转换坐标
+ const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+ const longitude = Cesium.Math.toDegrees(cartographic.longitude)
+ const latitude = Cesium.Math.toDegrees(cartographic.latitude)
+
+ // 更新当前实体引用
+ currentEntity = point
+
+ // 发送坐标
+ emit('clickPosition', { longitude, latitude })
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+}
// 智能规划航线
const intelligentPlanning = () => {
// 添加点击事件监听
- viewer.screenSpaceEventHandler.setInputAction((click) => {
+ viewer.screenSpaceEventHandler.setInputAction(click => {
if (props.waylineTypeTest !== 2) return
- const cartesian = viewer.camera.pickEllipsoid(
- click.position,
- viewer.scene.globe.ellipsoid
- );
-
+ const cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid)
+
if (cartesian) {
// 添加新点
const point = viewer.entities.add({
position: cartesian,
point: {
pixelSize: 10,
- color: Cesium.Color.WHITE
- }
- });
-
+ color: Cesium.Color.fromCssColorString('#1FFF69'),
+ },
+ })
+
// 存储点位
- polygonPoints.push(cartesian);
-
+ polygonPoints.push(cartesian)
+
// 当点击超过2个点时绘制多边形
if (polygonPoints.length > 2) {
// 移除旧的多边形
if (polygonEntity) {
- viewer.entities.remove(polygonEntity);
+ viewer.entities.remove(polygonEntity)
}
-
+
// 创建新的多边形
polygonEntity = viewer.entities.add({
polygon: {
@@ -159,110 +163,109 @@
outlineColor: new Cesium.Color(0, 0.5, 1, 1), // 蓝
outlineWidth: 2,
height: 0, // Set explicit height
- heightReference: Cesium.HeightReference.NONE // Disable terrain clamping
- }
- });
+ heightReference: Cesium.HeightReference.NONE, // Disable terrain clamping
+ },
+ })
}
// 转换坐标并发送
- const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
- const longitude = Cesium.Math.toDegrees(cartographic.longitude);
- const latitude = Cesium.Math.toDegrees(cartographic.latitude);
+ const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+ const longitude = Cesium.Math.toDegrees(cartographic.longitude)
+ const latitude = Cesium.Math.toDegrees(cartographic.latitude)
// emit('clickPosition', cartographic);
-
}
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
// 修改右键点击事件，添加菜单
- viewer.screenSpaceEventHandler.setInputAction((movement) => {
+ viewer.screenSpaceEventHandler.setInputAction(movement => {
if (props.waylineTypeTest !== 2) return
if (polygonPoints.length > 2) {
// 清除之前的菜单
if (currentMenu) {
- document.body.querySelectorAll('.context-menu').forEach(menu => menu.remove());
+ document.body.querySelectorAll('.context-menu').forEach(menu => menu.remove())
}
- const menuContainer = document.createElement('div');
- menuContainer.className = 'context-menu';
+ const menuContainer = document.createElement('div')
+ menuContainer.className = 'context-menu'
// 获取地图容器
- const mapContainer = document.getElementById('taskMap');
+ const mapContainer = document.getElementById('taskMap')
// 使用鼠标右键点击的实际位置
- menuContainer.style.position = 'absolute';
- menuContainer.style.left = `${movement.position.x}px`;
- menuContainer.style.top = `${movement.position.y}px`;
- menuContainer.style.zIndex = '1000';
+ menuContainer.style.position = 'absolute'
+ menuContainer.style.left = `${movement.position.x}px`
+ menuContainer.style.top = `${movement.position.y}px`
+ menuContainer.style.zIndex = '1000'
menuContainer.innerHTML = `
<div class="menu-item" id="saveWayline">保存航线</div>
<div class="menu-item" id="cancelDraw">取消绘制</div>
- `;
-
- mapContainer.appendChild(menuContainer);
- currentMenu = menuContainer;
+ `
+
+ mapContainer.appendChild(menuContainer)
+ currentMenu = menuContainer
// 添加全局点击事件监听
- const handleClickOutside = (e) => {
- if (!menuContainer) return;
- const isClickInside = menuContainer.contains(e.target);
+ const handleClickOutside = e => {
+ if (!menuContainer) return
+ const isClickInside = menuContainer.contains(e.target)
if (!isClickInside) {
- menuContainer.remove();
- document.removeEventListener('mousedown', handleClickOutside);
+ menuContainer.remove()
+ document.removeEventListener('mousedown', handleClickOutside)
}
- };
+ }
// 延迟添加事件监听，避免右键点击立即触发
setTimeout(() => {
- document.addEventListener('mousedown', handleClickOutside);
- }, 100);
+ document.addEventListener('mousedown', handleClickOutside)
+ }, 100)
// 菜单按钮点击事件
document.getElementById('saveWayline').onclick = () => {
const coordinates = polygonPoints.map(point => {
- const cartographic = Cesium.Cartographic.fromCartesian(point);
+ const cartographic = Cesium.Cartographic.fromCartesian(point)
return {
longitude: Cesium.Math.toDegrees(cartographic.longitude),
- latitude: Cesium.Math.toDegrees(cartographic.latitude)
- };
- });
- emit('saveWayline', coordinates);
- saveWaylineByArea(coordinates);
- mapContainer.removeChild(menuContainer);
- };
-
+ latitude: Cesium.Math.toDegrees(cartographic.latitude),
+ }
+ })
+ emit('saveWayline', coordinates)
+ saveWaylineByArea(coordinates)
+ mapContainer.removeChild(menuContainer)
+ }
+
document.getElementById('cancelDraw').onclick = () => {
- polygonPoints = [];
- viewer.entities.removeAll();
- mapContainer.removeChild(menuContainer);
- };
+ polygonPoints = []
+ viewer.entities.removeAll()
+ mapContainer.removeChild(menuContainer)
+ }
}
- }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
-};
+ }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+}
// 保存航线并且获取线
-const saveWaylineByArea = (dataValue) => {
- const polygonArray = dataValue.map(point => [point.longitude, point.latitude]);
+const saveWaylineByArea = dataValue => {
+ const polygonArray = dataValue.map(point => [point.longitude, point.latitude])
getWaylineByArea({ type: 2, polygon: polygonArray }).then(res => {
- if (res.data.code !== 0) retrun;
- drawResultWayline(res.data.data);
- });
+ if (res.data.code !== 0) retrun
+ drawResultWayline(res.data.data)
+ })
}
// 绘制后端生成得面状线
-const drawResultWayline = (dataValue) => {
+const drawResultWayline = dataValue => {
// 先检查并删除已存在的航线
- existingEntity = viewer.entities.getById('result_wayline');
- if (existingEntity) {
- viewer.entities.remove(existingEntity);
- }
- const cartesian3List = ref([]);
- dataValue.forEach((lnglat) => {
+ existingEntity = viewer.entities.getById('result_wayline')
+ if (existingEntity) {
+ viewer.entities.remove(existingEntity)
+ }
+ const cartesian3List = ref([])
+ dataValue.forEach(lnglat => {
const cartesian3 = Cesium.Cartesian3.fromDegrees(
Number(lnglat.x),
Number(lnglat.y),
- Number(100), // 默认100
+ Number(100) // 默认100
)
cartesian3List.value.push(cartesian3)
- });
+ })
const setting = {
id: 'result_wayline',
polyline: {
@@ -275,7 +278,7 @@
polyline: setting.polyline,
id: setting.id,
})
-};
+}
// 选中航线时调用 渲染线和点 type = 0
const renderingLine = lineObj => {
@@ -283,83 +286,90 @@
const [lon, lat] = item.Point.coordinates.split(',')
return Cartesian3.fromDegrees(Number(lon), Number(lat))
})
-
+
viewer.entities.add({
polyline: {
- width: 4,
+ width: 5,
positions: positions,
- material: new ImageTrailMaterial({
- color: { alpha: 1, blue: 1, green: 1, red: 1 },
- speed: 20,
- image: lineImg,
- repeat: { x: Math.floor(40), y: 1 },
+ // material: new ImageTrailMaterial({
+ // color: { alpha: 1, blue: 1, green: 1, red: 1 },
+ // speed: 20,
+ // image: newlineImg,
+ // repeat: { x: Math.floor(40), y: 1 },
+ // }),
+ material: new Cesium.PolylineGlowMaterialProperty({
+ // color: Cesium.Color.GREEN,
+ image: newlineImg,
}),
clampToGround: false,
},
})
-
- positions.forEach((point, index) => {
- let setting = {};
- // if (index === 0) {
- // //TODO
- // }
+
+ positions.forEach((point, index) => {
+ let setting = {}
+ // if (index === 0) {
+ // //TODO
+ // }
// else if (index === 1) {
- // setting = {
- // position: point,
- // id: `point_${index}`,
- // billboard: {
- // image: Startingpointicon,
- // outlineWidth: 0,
- // width: 20,
- // height: 20,
- // scale: 1.0,
- // },
- // }
- // } else
+ // setting = {
+ // position: point,
+ // id: `point_${index}`,
+ // billboard: {
+ // image: Startingpointicon,
+ // outlineWidth: 0,
+ // width: 20,
+ // height: 20,
+ // scale: 1.0,
+ // },
+ // }
+ // } else
if (index === positions.length - 1) {
- setting = {
- position: point,
- id: `point_${index}`,
- billboard: {
- image: EndPointicon,
- outlineWidth: 0,
- width: 20,
- height: 20,
- scale: 1.0,
- },
- }
- } else {
- setting = {
- position: point,
- id: `point_${index}`,
- label: {
- text: `${index+1}`,
- font: 'bold 14px serif',
- style: Cesium.LabelStyle.FILL,
- verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直居中
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
- pixelOffset: new Cesium.Cartesian2(0, 0), // 根据需要调整偏移量
- eyeOffset: new Cesium.Cartesian3(0, 0, -10) // 使标签在点的上方
- },
+ setting = {
+ position: point,
+ id: `point_${index}`,
+ billboard: {
+ image: newEndPointImg,
+ outlineWidth: 0,
+ width: 20,
+ height: 20,
+ scale: 1.0,
+ },
+ }
+ } else {
+ setting = {
+ position: point,
+ id: `point_${index}`,
+ label: {
+ text: `${index + 1}`,
+ font: 'bold 14px serif',
+ fillColor: Cesium.Color.WHITE,
+ // style: Cesium.LabelStyle.FILL,
+ // verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直居中
+ // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
+ pixelOffset: new Cesium.Cartesian2(2, 0), // 根据需要调整偏移量
+ eyeOffset: new Cesium.Cartesian3(0, 0, -10), // 使标签在点的上方
+ },
+ billboard: {
+ image: new Cesium.ConstantProperty(newStartPoint),
+ width: 70,
+ height: 70,
+ },
+ // point: {
+ // pixelSize: 24,
+ // color: new Cesium.Color.fromBytes(255, 186, 0, 255),
+ // },
- point: {
- pixelSize: 24,
- color: new Cesium.Color.fromBytes(255, 186, 0, 255),
- },
-
- offset: new Cesium.Cartesian2(10, 30),
- }
- }
- viewer.entities.add(setting)
- });
+ offset: new Cesium.Cartesian2(10, 30),
+ }
+ }
+ viewer.entities.add(setting)
+ })
}
// 飞到中心点
function flyToPoints(lngLatArr) {
if (!Array.isArray(lngLatArr) || lngLatArr.length === 0) return
- const positions = lngLatArr.map(([lon, lat]) =>
- Cesium.Cartesian3.fromDegrees(Number(lon), Number(lat))
- )
+ const positions = lngLatArr.map(([lon, lat]) => Cesium.Cartesian3.fromDegrees(Number(lon), Number(lat)))
// 计算包围盒 BoundingSphere（所有点的外接球）
const boundingSphere = Cesium.BoundingSphere.fromPoints(positions)
viewer.camera.flyToBoundingSphere(boundingSphere, {
@@ -368,11 +378,10 @@
})
}
-
// 异步解析kmz文件
const analysis = async url => {
return new Promise(async resolve => {
- const res = await analyzeKmzFile(`${url}?_t=${new Date().getTime()}`);
+ const res = await analyzeKmzFile(`${url}?_t=${new Date().getTime()}`)
const templateXML = await res.fileInfoObj['wpmz/template.kml']
const templateXMLJSON = XMLToJSON(templateXML)?.['Document']
const templateXMLObj = removeTextKey(templateXMLJSON.Folder)
@@ -382,16 +391,16 @@
// 绘制线和飞行
const drawLine = async () => {
- let prexUrl = ref(import.meta.env.VITE_APP_AIRLINE_URL+ props.wayLineFile);
- const res = await analysis(prexUrl.value);
+ let prexUrl = ref(import.meta.env.VITE_APP_AIRLINE_URL + props.wayLineFile)
+ const res = await analysis(prexUrl.value)
if (!res.Placemark.length) return
- renderingLine(res);
+ renderingLine(res)
const points = res.Placemark.map(item => item.Point.coordinates.split(','))
flyToPoints(points)
}
// 选择航线时，根据选择机巢连线
-const selectLineFile = (newVal) => {
+const selectLineFile = newVal => {
// 清除之前的实体
// viewer.entities.removeAll();
// 重新绘制航线
@@ -400,7 +409,7 @@
// }
// 添加选中点和连接线
const positions = newVal.map(item => {
- const position = Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude));
+ const position = Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude))
// 添加机巢点
viewer.entities.add({
position: position,
@@ -409,9 +418,9 @@
width: 24,
height: 24,
},
- });
- return position;
- });
+ })
+ return position
+ })
// 添加连接线
if (positions.length > 1) {
@@ -421,33 +430,30 @@
width: 2,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.RED,
- dashLength: 8.0
- })
- }
- });
+ dashLength: 8.0,
+ }),
+ },
+ })
}
// 飞到中心点
- const lngLatArr = newVal.map(item => [item.longitude, item.latitude]);
- flyToPoints(lngLatArr);
-};
+ const lngLatArr = newVal.map(item => [item.longitude, item.latitude])
+ flyToPoints(lngLatArr)
+}
// 单个点生成选择多个机巢生成航线
-const singlePointLines = (newVal) => {
+const singlePointLines = newVal => {
// 清除之前的连接线
- connectLines.forEach(line => viewer.entities.remove(line));
- connectLines = [];
+ connectLines.forEach(line => viewer.entities.remove(line))
+ connectLines = []
if (currentEntity) {
// 获取当前点的位置
- const currentPosition = currentEntity.position.getValue();
-
+ const currentPosition = currentEntity.position.getValue()
+
// 为每个选中的机巢创建点和连接线
newVal.forEach(item => {
// 创建机巢点
- const nestPosition = Cartesian3.fromDegrees(
- Number(item.longitude),
- Number(item.latitude)
- );
+ const nestPosition = Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude))
viewer.entities.add({
position: nestPosition,
billboard: {
@@ -455,7 +461,7 @@
width: 24,
height: 24,
},
- });
+ })
// 创建连接线
const line = viewer.entities.add({
@@ -464,155 +470,163 @@
width: 2,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.RED,
- dashLength: 8.0
- })
- }
- });
- connectLines.push(line);
- });
+ dashLength: 8.0,
+ }),
+ },
+ })
+ connectLines.push(line)
+ })
// 飞到所有点的中心位置
- const lngLatArr = newVal.map(item => [item.longitude, item.latitude]);
- flyToPoints(lngLatArr);
+ const lngLatArr = newVal.map(item => [item.longitude, item.latitude])
+ flyToPoints(lngLatArr)
}
-};
+}
// 智慧规划航线-面状航线
-const planarPointsLines = (newVal) => {
- // 如果存在面状航线
- if (existingEntity) {
- const waylinePositions = existingEntity.polyline.positions.getValue();
-
- newVal.forEach(item => {
- // 创建机巢点
- const nestPosition = Cartesian3.fromDegrees(
- Number(item.longitude),
- Number(item.latitude)
- );
-
- // 添加机巢图标
- viewer.entities.add({
- position: nestPosition,
- billboard: {
- image: new Cesium.ConstantProperty(uavImg),
- width: 24,
- height: 24,
- },
- });
+const planarPointsLines = newVal => {
+ // 如果存在面状航线
+ if (existingEntity) {
+ const waylinePositions = existingEntity.polyline.positions.getValue()
- // 找到最近的航线点并连线
- let minDistance = Number.MAX_VALUE;
- let closestPosition = null;
-
- waylinePositions.forEach(waylinePos => {
- const distance = Cartesian3.distance(nestPosition, waylinePos);
- if (distance < minDistance) {
- minDistance = distance;
- closestPosition = waylinePos;
- }
- });
+ newVal.forEach(item => {
+ // 创建机巢点
+ const nestPosition = Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude))
- // 创建连接线
- if (closestPosition) {
- const line = viewer.entities.add({
- polyline: {
- positions: [nestPosition, closestPosition],
- width: 2,
- material: new Cesium.PolylineDashMaterialProperty({
- color: Cesium.Color.CHARTREUSE,
- dashLength: 8.0
- })
- }
- });
- connectLines.push(line);
- }
- });
+ // 添加机巢图标
+ viewer.entities.add({
+ position: nestPosition,
+ billboard: {
+ image: new Cesium.ConstantProperty(uavImg),
+ width: 24,
+ height: 24,
+ },
+ })
- // 飞到所有点的中心位置
- const lngLatArr = newVal.map(item => [item.longitude, item.latitude]);
- flyToPoints(lngLatArr);
- }
-};
+ // 找到最近的航线点并连线
+ let minDistance = Number.MAX_VALUE
+ let closestPosition = null
+
+ waylinePositions.forEach(waylinePos => {
+ const distance = Cartesian3.distance(nestPosition, waylinePos)
+ if (distance < minDistance) {
+ minDistance = distance
+ closestPosition = waylinePos
+ }
+ })
+
+ // 创建连接线
+ if (closestPosition) {
+ const line = viewer.entities.add({
+ polyline: {
+ positions: [nestPosition, closestPosition],
+ width: 2,
+ material: new Cesium.PolylineDashMaterialProperty({
+ color: Cesium.Color.CHARTREUSE,
+ dashLength: 8.0,
+ }),
+ },
+ })
+ connectLines.push(line)
+ }
+ })
+
+ // 飞到所有点的中心位置
+ const lngLatArr = newVal.map(item => [item.longitude, item.latitude])
+ flyToPoints(lngLatArr)
+ }
+}
// 监听选择航线文件事件
-watch(() => props.wayLineFile, async (newVal, oldValue) => {
- await removeMap();
- if(newVal){
- await drawLine();
- }
-}, { deep: true });
+watch(
+ () => props.wayLineFile,
+ async (newVal, oldValue) => {
+ await removeMap()
+ if (newVal) {
+ await drawLine()
+ }
+ },
+ { deep: true }
+)
// 监听表格选中数据变化
-watch(() => props.checkedTableData, (newVal) => {
- if (newVal.length > 0 && props.waylineTypeTest === 0) {
- selectLineFile(newVal);
- } else if (newVal.length > 0 && props.waylineTypeTest === 1) {
- singlePointLines(newVal);
- } else if (newVal.length > 0 && props.waylineTypeTest === 2) {
- planarPointsLines(newVal);
- }
-}, { deep: true });
+watch(
+ () => props.checkedTableData,
+ newVal => {
+ if (newVal.length > 0 && props.waylineTypeTest === 0) {
+ selectLineFile(newVal)
+ } else if (newVal.length > 0 && props.waylineTypeTest === 1) {
+ singlePointLines(newVal)
+ } else if (newVal.length > 0 && props.waylineTypeTest === 2) {
+ planarPointsLines(newVal)
+ }
+ },
+ { deep: true }
+)
// 监听航线类型
-watch(() => props.waylineTypeTest, async (newVal) => {
- await removeMap();
- if (newVal === 1) {
- await singlePointLeftClick();
- } else if (newVal === 2) {
- await intelligentPlanning();
- }
-}, { deep: true });
+watch(
+ () => props.waylineTypeTest,
+ async newVal => {
+ await removeMap()
+ if (newVal === 1) {
+ await singlePointLeftClick()
+ } else if (newVal === 2) {
+ await intelligentPlanning()
+ }
+ },
+ { deep: true }
+)
const removeEvent = () => {
// 清除事件监听器
- viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
- viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
-};
-
-const removeMap = () => {
- // 清除所有实体
- if (viewer) {
- // 清除连接线
- connectLines.forEach(line => viewer.entities.remove(line));
- connectLines = [];
-
- // 清除多边形点和实体
- polygonPoints = [];
- if (polygonEntity) {
- viewer.entities.remove(polygonEntity);
- }
-
- // 清除当前实体和面状航线
- if (currentEntity) {
- viewer.entities.remove(currentEntity);
- }
- if (existingEntity) {
- viewer.entities.remove(existingEntity);
- }
-
- viewer.entities.removeAll();
-
- // 重置所有变量
- currentEntity = null;
- polygonEntity = null;
- existingEntity = null;
- }
+ viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+ viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}
+const removeMap = () => {
+ // 清除所有实体
+ if (viewer) {
+ // 清除连接线
+ connectLines.forEach(line => viewer.entities.remove(line))
+ connectLines = []
+
+ // 清除多边形点和实体
+ polygonPoints = []
+ if (polygonEntity) {
+ viewer.entities.remove(polygonEntity)
+ }
+
+ // 清除当前实体和面状航线
+ if (currentEntity) {
+ viewer.entities.remove(currentEntity)
+ }
+ if (existingEntity) {
+ viewer.entities.remove(existingEntity)
+ }
+
+ viewer.entities.removeAll()
+
+ // 重置所有变量
+ currentEntity = null
+ polygonEntity = null
+ existingEntity = null
+ }
+}
onBeforeUnmount(() => {
- removeMap();
- removeEvent();
+ removeMap()
+ removeEvent()
// 移除所有实体并销毁viewer
- viewer.destroy();
- viewer = null;
+ viewer.destroy()
+ viewer = null
})
onMounted(() => {
nextTick(() => {
init()
})
-});
+})
</script>
<style scoped lang="scss">
#taskMap {
@@ -644,14 +658,14 @@
display: none;
}
}
-
-:deep(.context-menu) {
- position: absolute;
- background: rgba(0, 21, 41, 0.9);;
- border-radius: 4px;
- padding: 8px 0;
- min-width: 120px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+
+ :deep(.context-menu) {
+ position: absolute;
+ background: rgba(0, 21, 41, 0.9);
+ border-radius: 4px;
+ padding: 8px 0;
+ min-width: 120px;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
.menu-item {
padding: 8px 16px;
@@ -659,12 +673,11 @@
cursor: pointer;
transition: all 0.3s;
font-size: 14px;
-
+
&:hover {
background: rgba(255, 255, 255, 0.1);
}
}
}
}
-
</style>
diff --git a/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue b/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue
index 6d1b608..b8ff51b 100644
--- a/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue
@@ -1,189 +1,230 @@
<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" >
+ <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';
+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