From f3e09a76a7f5147072374b80285901ff69ee2cfe Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 31 Jan 2026 17:13:20 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/jagzwxm/ja_web
---
applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/FormDiaLog.vue | 7
packages/utils/package.json | 36 +-
applications/drone-command/src/views/areaManage/partition/FormDiaLog copy.vue | 4
packages/utils/map/index.js | 45 ++
applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/index.vue | 6
applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue | 18
packages/utils/map/DrawPolygon.js | 43 ++
pnpm-lock.yaml | 9
/dev/null | 569 -------------------------------------
applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue | 4
applications/task-work-order/env/.env | 2
applications/task-work-order/src/utils/cesium/publicCesium.js | 80 ++---
applications/task-work-order/src/router/views/index.js | 25 -
applications/task-work-order/env/.env.development | 2
applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/dataObjectionApi.js | 9
applications/task-work-order/src/main.js | 2
16 files changed, 181 insertions(+), 680 deletions(-)
diff --git a/applications/drone-command/src/utils/cesium/DrawPolygon.js b/applications/drone-command/src/utils/cesium/DrawPolygon.js
deleted file mode 100644
index 6bea7f4..0000000
--- a/applications/drone-command/src/utils/cesium/DrawPolygon.js
+++ /dev/null
@@ -1,817 +0,0 @@
-import * as Cesium from 'cesium'
-import * as turf from '@turf/turf'
-import { boxTransformScale } from '@/utils/turfFunc'
-import { ElMessage } from 'element-plus'
-import { getPointPositionsHeight } from '@/utils/cesium/mapUtil'
-import { flyVisual } from '@ztzf/utils'
-
-/**
- * 多边形绘制与编辑工具类
- * 功能：
- * - 绘制多边形
- * - 拖动编辑端点
- * - 删除端点、删除整个多边形
- * - 多边形自交检查（避免非法几何）
- * - 外部订阅/通知机制
- */
-export class DrawPolygon {
- constructor() {
- // 图斑预览模式标记
- this.isPureSpotPreview = false
- // 是否删除测区
- this.isDeleteTheArea = true
- //是否可以编辑图斑
- this.isPreviewMode = true
- // Cesium 视图对象
- this.viewer = null
- // 当前绘制的多边形
- this.curPolygon = null
- // 绘制模式标识
- this.drawingMode = false
- // 编辑模式标识
- this.editingMode = false
- // 是否正在拖拽端点
- this.isDragging = false
- // 当前拖拽的点实体
- this.draggedEntity = null
- // 多边形实体
- this.polygonEntity = null
- // 存储端点的 DataSource
- this.editPolygonDataSource = null
- this.editPolygonPointDataSource = null
- // 存储中点（边中点）的 DataSource：用于编辑态插入新端点
- this.editPolygonMidPointDataSource = null
- // 鼠标事件处理器
- this.handler = null
- // 右键菜单 DOM
- this.menuPopup = null
- // 被右键选中的点
- this.delPolygonPoint = null
- // 是否显示警告提示（自交）
- this.isShowWaringTip = false
- // 当前拖拽点是否合法
- this.currentDragPointIsValid = false
- // 当前拖拽点的坐标
- this.currentDragPointPosition = null
-
- // 事件回调函数绑定 this
- this.handleLeftDown = this.handleLeftDown.bind(this)
- this.handleLeftUp = this.handleLeftUp.bind(this)
- this.handleMouseMove = this.handleMouseMove.bind(this)
- this.handleLeftClick = this.handleLeftClick.bind(this)
- this.handleRightClick = this.handleRightClick.bind(this)
-
- this.delPolygon = this.delPolygon.bind(this)
- this.delPoint = this.delPoint.bind(this)
- // 外部订阅者
- this.listeners = []
- }
-
- // 实体命名常量
- static ENTITY_NAMES = {
- POLYGON: '区域-面',
- POINT: '区域-端点',
- // 编辑态中点（用于快速插入新端点）
- MID_POINT: '区域-中点',
- POLYGON_ID: 'planar-route-polygon',
- POINT_ID_PREFIX: 'planar-route-point',
- MID_POINT_ID_PREFIX: 'planar-route-mid-point',
- }
-
- // 颜色常量
- static COLORS = {
- DEFAULT_POLYGON: Cesium.Color.fromBytes(45, 140, 240, 99), // 默认面颜色
- DEFAULT_LINE: Cesium.Color.fromBytes(45, 140, 240, 255), // 默认边界线颜色
- ERROR_POLYGON: Cesium.Color.fromCssColorString('rgba(255, 0, 0, .3)'), // 错误（自交）面颜色
- ERROR_LINE: Cesium.Color.fromCssColorString('rgba(255, 0, 0, 1)'), // 错误（自交）线颜色
- }
-
- // ============ 发布订阅机制 ============
-
- // 外部订阅数据变化
- subscribe(key, listener) {
- this.listeners.push({ key, listener })
- }
-
- // 通知订阅者
- notify(key, data) {
- this.listeners.filter(subscriber => subscriber.key === key).forEach(subscriber => subscriber.listener(data))
- }
-
- // ============ 绘制相关 ============
- // 编辑图斑
- editThePatch(data) {
- this.isPreviewMode = data
- // 关闭编辑能力时隐藏端点/中点，并清空中点，避免残留交互
- if (!this.isPreviewMode) {
- this.editPolygonPointDataSource && (this.editPolygonPointDataSource.entities.show = false)
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = false)
- this.editPolygonMidPointDataSource?.entities?.removeAll?.()
- return
- }
-
- if (this.editingMode) {
- this.editPolygonPointDataSource && (this.editPolygonPointDataSource.entities.show = true)
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = true)
- this.rebuildEditPoints()
- this.rebuildMidPoints()
- }
- }
- // 删除测区
- deleteTheArea(data) {
- this.isDeleteTheArea = data
- }
-
- // 开始绘制
- startDrawing() {
- this.drawingMode = true
- this.curPolygon = new Cesium.PolygonHierarchy()
-
- // 如果还没有 DataSource，就新建一个
- if (!this.editPolygonDataSource) {
- this.editPolygonDataSource = new Cesium.CustomDataSource('editPolygonDataSource')
- this.viewer?.dataSources.add(this.editPolygonDataSource)
- }
-
- if (!this.editPolygonPointDataSource) {
- this.editPolygonPointDataSource = new Cesium.CustomDataSource('editPolygonPointDataSource')
- this.viewer?.dataSources.add(this.editPolygonPointDataSource)
- }
-
- // 中点数据源：编辑模式下用于“边上插点”
- if (!this.editPolygonMidPointDataSource) {
- this.editPolygonMidPointDataSource = new Cesium.CustomDataSource('editPolygonMidPointDataSource')
- this.viewer?.dataSources.add(this.editPolygonMidPointDataSource)
- }
-
- // 清空之前的点
- this.editPolygonDataSource?.entities.removeAll()
- this.editPolygonPointDataSource?.entities.removeAll()
- this.editPolygonMidPointDataSource?.entities.removeAll()
- }
-
- // 创建多边形实体（含边界线）
- createPolygonEntity() {
- this.polygonEntity = this.editPolygonDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.POLYGON,
- id: DrawPolygon.ENTITY_NAMES.POLYGON_ID,
- polygon: {
- hierarchy: new Cesium.CallbackProperty(() => this.curPolygon, false),
- material: DrawPolygon.COLORS.DEFAULT_POLYGON,
- outline: false,
- outlineWidth: 2,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- },
- polyline: {
- width: 2,
- material: DrawPolygon.COLORS.DEFAULT_LINE,
- clampToGround: true,
- positions: new Cesium.CallbackProperty(
- () => [...this.curPolygon.positions, this.curPolygon.positions[0]], // 闭合线
- false
- ),
- },
- })
- }
-
- // 创建端点实体
- createPointEntity(position, isAdd) {
- const pointIndex = isAdd ? this.curPolygon.positions.length - 2 : this.curPolygon.positions.length - 1
-
- this.editPolygonPointDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.POINT,
- id: `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${pointIndex}`,
- position: position.clone(),
- point: {
- pixelSize: 14,
- color: Cesium.Color.WHITE,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
- },
- customData: {
- ind: pointIndex, // 索引记录
- },
- })
- }
-
- createMidPointEntity(startInd, position) {
- // 使用 CallbackProperty 让中点位置随端点拖拽实时计算
- // startInd 表示该中点属于边：(startInd) -> (startInd + 1)
- const updatePosition = () => {
- const positions = this.curPolygon?.positions
- if (!positions || positions.length < 2) return position
-
- const n = positions.length
- const p1 = positions[startInd]
- const p2 = positions[(startInd + 1) % n]
- if (!p1 || !p2) return position
-
- return Cesium.Cartesian3.midpoint(p1, p2, new Cesium.Cartesian3())
- }
-
- this.editPolygonMidPointDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.MID_POINT,
- id: `${DrawPolygon.ENTITY_NAMES.MID_POINT_ID_PREFIX}${startInd}`,
- position: new Cesium.CallbackProperty(updatePosition, false),
- point: {
- pixelSize: 10,
- color: Cesium.Color.fromCssColorString('rgba(255, 255, 255, .7)'),
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
- },
- customData: {
- startInd,
- },
- })
- }
-
- rebuildEditPoints() {
- // 插入/删除端点后：端点实体 id 与 customData.ind 需要全量重建，保证索引与 positions 一致
- if (!this.isPreviewMode) return
- if (!this.editPolygonPointDataSource || !this.curPolygon?.positions) return
-
- this.editPolygonPointDataSource.entities.removeAll()
- this.curPolygon.positions.forEach((position, index) => {
- this.editPolygonPointDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.POINT,
- id: `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${index}`,
- position: position.clone(),
- point: {
- pixelSize: 14,
- color: Cesium.Color.WHITE,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
- },
- customData: {
- ind: index,
- },
- })
- })
- }
-
- rebuildMidPoints() {
- // 仅在“顶点数量变化/切换编辑态”时维护中点实体数量
- // 拖拽过程中中点位置由 CallbackProperty 自动更新，不需要重建
- if (!this.isPreviewMode) return
- if (!this.editPolygonMidPointDataSource || !this.curPolygon?.positions) return
-
- const positions = this.curPolygon.positions
- const n = positions.length
- const entities = this.editPolygonMidPointDataSource.entities
-
- if (!this.editingMode || n < 2) {
- entities.removeAll()
- return
- }
-
- const neededIds = new Set()
- for (let i = 0; i < n; i += 1) {
- const id = `${DrawPolygon.ENTITY_NAMES.MID_POINT_ID_PREFIX}${i}`
- neededIds.add(id)
- // 缺少则补齐：保证每条边都有一个中点实体
- if (!entities.getById(id)) {
- const p1 = positions[i]
- const p2 = positions[(i + 1) % n]
- if (!p1 || !p2) continue
- const mid = Cesium.Cartesian3.midpoint(p1, p2, new Cesium.Cartesian3())
- this.createMidPointEntity(i, mid)
- }
- }
-
- entities.values.slice().forEach(entity => {
- if (entity?.name !== DrawPolygon.ENTITY_NAMES.MID_POINT) return
- // 多余则移除：例如删除端点导致边数量减少
- if (!neededIds.has(entity.id)) {
- entities.remove(entity)
- }
- })
- }
-
- insertPointFromMidPoint(midPointEntity) {
- // 点击中点：在对应边上插入一个新端点（白点），并立即进入拖拽态
- if (!this.isPreviewMode) return
- if (!this.editingMode) return
- if (!midPointEntity?.customData) return
-
- const startInd = midPointEntity.customData.startInd
- // 中点位置可能是 CallbackProperty，需要取当前时刻的值
- const positionProperty = midPointEntity.position
- const entityPosition = positionProperty?.getValue
- ? positionProperty.getValue(Cesium.JulianDate.now())
- : positionProperty
- if (!entityPosition) return
-
- // 插入到 startInd 与 startInd+1 之间
- const insertIndex = Math.min(Math.max(startInd + 1, 0), this.curPolygon.positions.length)
- this.curPolygon.positions.splice(insertIndex, 0, entityPosition.clone ? entityPosition.clone() : entityPosition)
-
- this.rebuildEditPoints()
- this.rebuildMidPoints()
-
- const newPointEntity = this.editPolygonPointDataSource?.entities?.getById(
- `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${insertIndex}`
- )
- if (newPointEntity) {
- this.isDragging = true
- this.draggedEntity = newPointEntity
- this.currentDragPointPosition = this.curPolygon.positions[insertIndex]
- this.disableMapControl()
- }
- this.notify('getPolygonPositions', this.curPolygon.positions)
- }
- // 清除不在范围内的点
- removeLastInvalidPoint() {
- const posLen = this.curPolygon.positions.length
- if (posLen === 0) return
-
- let targetPointId = ''
- let removeCount = 0
-
- if (posLen === 2) {
- removeCount = 2
- targetPointId = `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}0`
- } else if (posLen > 2) {
- removeCount = 1
- const pointIndex = posLen - 2
- targetPointId = `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${pointIndex}`
- }
-
- this.curPolygon.positions.splice(posLen - removeCount, removeCount)
-
- const invalidPoint = this.editPolygonPointDataSource.entities.getById(targetPointId)
- if (invalidPoint) {
- this.editPolygonPointDataSource.entities.remove(invalidPoint)
- }
-
- if (this.curPolygon.positions.length === 0 && this.polygonEntity) {
- this.editPolygonDataSource.entities.remove(this.polygonEntity)
- this.polygonEntity = null
- }
- }
- // 添加一个点
- addPosition(position, isAdd = true) {
- // 第一个点要重复压入一次，形成动态绘制效果
- if (this.curPolygon.positions.length === 0 && isAdd) {
- this.curPolygon.positions.push(position.clone())
- }
-
- this.curPolygon.positions.push(position.clone())
-
- // 如果没有实体则创建
- if (!this.polygonEntity) {
- this.createPolygonEntity()
- }
-
- // 创建端点实体
- if (this.isPreviewMode) {
- this.createPointEntity(position, isAdd)
- }
-
- this.notify('getPoints', position)
- }
-
- // ============ 鼠标事件 ============
-
- // 鼠标左键按下（选中端点拖动）
- handleLeftDown(movement) {
- if (!this.editingMode) return
-
- const pickedEntity = this.viewer.scene.pick(movement.position)?.id
- const isPoint = pickedEntity?.name === DrawPolygon.ENTITY_NAMES.POINT
- const isMidPoint = pickedEntity?.name === DrawPolygon.ENTITY_NAMES.MID_POINT
-
- if (pickedEntity && isPoint) {
- this.isDragging = true
- this.draggedEntity = pickedEntity
- this.currentDragPointPosition = this.curPolygon.positions[this.draggedEntity?.customData.ind]
- this.disableMapControl() // 禁止地图交互
- return
- }
-
- if (pickedEntity && isMidPoint) {
- this.insertPointFromMidPoint(pickedEntity)
- }
- }
-
- // 鼠标左键抬起（拖拽结束）
- handleLeftUp() {
- if (!(this.editingMode && this.curPolygon?.positions && this.draggedEntity)) return
-
- if (this.currentDragPointIsValid && this.isDragging) {
- // 更新点位置
- this.draggedEntity.position = this.currentDragPointPosition
- this.curPolygon.positions[this.draggedEntity?.customData.ind] = this.currentDragPointPosition
-
- // 校验多边形是否自交
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- }
-
- // 拖拽结束，恢复交互
- if (this.isDragging) {
- this.notify('getPolygonPositions', this.curPolygon.positions)
- this.isDragging = false
- this.draggedEntity = null
- this.enableMapControl()
- this.rebuildMidPoints()
- }
- }
-
- // 鼠标移动
- handleMouseMove(movement) {
- if (!this.drawingMode && !this.editingMode) return
-
- const cartesian = this.viewer.scene.pickPosition(movement.endPosition)
- if (!cartesian) return
-
- // 编辑模式下，拖拽点实时更新
- if (this.editingMode && this.draggedEntity?.customData) {
- this.draggedEntity.position = cartesian
- this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian
- }
-
- // 绘制模式下，实时更新最后一个点
- if (this.drawingMode && this.polygonEntity && this.curPolygon.positions.length >= 1) {
- this.curPolygon.positions.pop()
- this.curPolygon.positions.push(cartesian)
- }
-
- // 实时检查是否自交
- if (
- (this.editingMode && this.draggedEntity?.customData) ||
- (this.drawingMode && this.polygonEntity && this.curPolygon.positions.length >= 3)
- ) {
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- }
- }
-
- // 鼠标左键点击
- handleLeftClick(click) {
- this.removeMenuPopup()
-
- const pickedAllEntity = this.viewer.scene.drillPick(click.position).filter(i => i.id)
- const isStartPoint = pickedAllEntity.find(i => i.id.name === '起飞点')
- const isPolygonPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
- const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
-
- if (isStartPoint) return
-
- // 如果不是绘制模式
- if (!this.drawingMode) {
- if (!isPolygon) {
- this.editingMode = false
- this.editPolygonPointDataSource.entities.show = false
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = false)
- return
- }
-
- if (isPolygon) {
- this.editingMode = true
- this.editPolygonPointDataSource.entities.show = true
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = true)
- this.rebuildMidPoints()
- }
- return
- }
-
- // 点击闭合多边形
- if (this.curPolygon.positions.length < 4 && isPolygonPoint) {
- return
- }
-
- if (this.curPolygon.positions.length >= 4 && isPolygonPoint) {
- if (!this.drawingMode) return
-
- this.finishDrawing()
- return
- }
-
- // 添加新的点
- const cartesian = this.viewer.scene.pickPosition(click.position)
- if (!cartesian) return
-
- let arr = [...this.curPolygon.positions]
- arr.pop()
- // 校验多边形是否自交
- if (arr.length > 2 && !this.curDragPointIsValid([...arr, cartesian])) {
- ElMessage.warning('测区不支持交叉绘制，请重新绘制')
- return
- }
-
- this.addPosition(cartesian)
- }
-
- // 鼠标右键点击（弹出菜单）
- handleRightClick(click) {
- const that = this
- if (that.drawingMode) return
-
- that.removeMenuPopup()
-
- const pickedAllEntity = that.viewer.scene.drillPick(click.position).filter(i => i.id)
- const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
- const isEditPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
- const {
- position: { x, y },
- } = click
-
- let pickedEntity, tooltipEvent, menuType
- if (isEditPoint) {
- pickedEntity = isEditPoint
- tooltipEvent = that.delPoint
- menuType = 'edit-point'
- } else if (isPolygon) {
- pickedEntity = isPolygon
- tooltipEvent = that.delPolygon
- menuType = 'polygon'
- }
-
- if (pickedEntity && this.isDeleteTheArea) {
- that.delPolygonPoint = pickedEntity.id
- that.menuPopup = that.createMenuPopup(menuType)
- that.menuPopup.style.transform = `translate3d(${x - 10}px, ${y - 10}px, 0)`
- that.viewer.container.appendChild(that.menuPopup)
- that.menuPopup.addEventListener('click', tooltipEvent)
- }
- }
-
- // ============ 删除相关 ============
-
- // 删除所有实体
- removeEntities() {
- if (this.editPolygonDataSource) {
- this.editPolygonDataSource.entities.removeAll()
- this.editPolygonDataSource = null
- }
-
- if (this.editPolygonPointDataSource) {
- this.editPolygonPointDataSource.entities.removeAll()
- this.editPolygonPointDataSource = null
- }
-
- if (this.editPolygonMidPointDataSource) {
- this.editPolygonMidPointDataSource.entities.removeAll()
- this.editPolygonMidPointDataSource = null
- }
- this.editingMode = false
- this.polygonEntity = null
- this.curPolygon = null
- }
-
- // 完成绘制
- finishDrawing() {
- this.curPolygon.positions.pop()
-
- if (this.curPolygon.positions.length >= 3) {
- this.drawingMode = false
- this.editingMode = true
- this.editPolygonPointDataSource.entities.show = true
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = true)
- this.rebuildMidPoints()
-
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- this.notify('getPolygonPositions', this.curPolygon.positions)
- }
- }
-
- // 删除多边形
- delPolygon() {
- this.removeEntities()
- this.removeMenuPopup()
- this.notify('getPolygonPositions', [])
- this.startDrawing()
- }
- // 删除图斑
- delSpot() {
- this.removeEntities()
- this.isPreviewMode = true
- this.startDrawing()
- }
- // 删除端点
- delPoint() {
- if (this.curPolygon.positions.length <= 3) {
- this.removeMenuPopup()
- return ElMessage.warning('端点不可少于3个')
- }
- if (!this.delPolygonPoint) return
-
- this.curPolygon.positions.splice(this.delPolygonPoint.customData.ind, 1)
- this.removeMenuPopup()
- this.rebuildEditPoints()
- this.rebuildMidPoints()
-
- this.notify('getPolygonPositions', this.curPolygon.positions)
- }
-
- // ============ 工具方法 ============
-
- // 创建右键菜单
- createMenuPopup(type = 'polygon') {
- const menuPopupVBox = document.createElement('div')
- menuPopupVBox.id = 'planarPolygonEdit'
- menuPopupVBox.className = 'planar-polygon-edit-tooltip'
-
- const menuPopup = document.createElement('div')
- menuPopup.id = 'planarPolygonEditMenu'
- menuPopup.className = 'planar-polygon-edit-menu'
-
- const menuItems =
- type === 'polygon'
- ? [{ title: '删除测区', class: 'del-planar-polygon' }]
- : [{ title: '删除端点', class: 'del-planar-point' }]
-
- menuItems.forEach(item => {
- const titleDiv = document.createElement('div')
- titleDiv.innerText = item.title
- titleDiv.className = item.class
- menuPopup.appendChild(titleDiv)
- })
- this.isPreviewMode = true
- menuPopupVBox.appendChild(menuPopup)
- return menuPopupVBox
- }
-
- // 移除菜单
- removeMenuPopup() {
- const that = this
- if (that.menuPopup) {
- that.menuPopup.removeEventListener('click', that.delPolygon)
- that.menuPopup.removeEventListener('click', that.delPoint)
- that.viewer.container.removeChild(that.menuPopup)
- that.menuPopup = null
- }
- that.delPolygonPoint = null
- }
-
- // 更新多边形样式（正常/错误）
- updatePolygonAppearance(polygonColor, lineColor) {
- this.polygonEntity.polygon.material = polygonColor
- this.polygonEntity.polyline.material = lineColor
- }
-
- // 禁用地图交互
- disableMapControl() {
- const controller = this.viewer.scene.screenSpaceCameraController
- controller.enableRotate = false
- controller.enableTranslate = false
- controller.enableZoom = false
- }
-
- // 启用地图交互
- enableMapControl() {
- const controller = this.viewer.scene.screenSpaceCameraController
- controller.enableRotate = true
- controller.enableTranslate = true
- controller.enableZoom = true
- }
-
- // 检查多边形是否自交
- curDragPointIsValid(positions) {
- if (positions.length < 3) return true
-
- const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions)
- const latLngPoints = cartographics.map(cartographic => [
- Cesium.Math.toDegrees(cartographic.longitude),
- Cesium.Math.toDegrees(cartographic.latitude),
- ])
-
- // 用 turf.js 检查自交
- const poly = turf.polygon([[...latLngPoints, latLngPoints[0]]])
- const intersections = turf.kinks(poly)
-
- return intersections.features.length === 0
- }
- // 初始化已有多边形
- async initPolygon(viewer, positions, isPurePreview = false) {
- this.initHandler(viewer)
- this.isPureSpotPreview = isPurePreview
- this.startDrawing()
- const normalizedPositions = this.normalizePolygonPositions(positions)
- let newPosition = normalizedPositions.map(item => {
- return Cesium.Cartesian3.fromDegrees(Number(item.lng), Number(item.lat), Number(item?.height || 0))
- })
- // 预览航线的时候调用
- if (!this.isPureSpotPreview) {
- this.notify('getPolygonPositions', newPosition)
- }
-
- newPosition.forEach(item => {
- this.addPosition(item, false)
- })
-
- // 视角飞入区域
- const newBox = boxTransformScale(normalizedPositions.map(item => [item.lng, item.lat]), 5)
- viewer.camera.flyTo({
- destination: Cesium.Rectangle.fromDegrees(...newBox),
- offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 0),
- duration: 0.5,
- })
-
- let pointList = await getPointPositionsHeight(normalizedPositions, viewer)
- flyVisual({ positionsData: pointList.map(item => [item.lng, item.lat, item.ASL]), viewer })
-
- this.drawingMode = false
- this.editingMode = true
- this.editPolygonPointDataSource && (this.editPolygonPointDataSource.entities.show = true)
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = true)
- this.rebuildMidPoints()
- }
-
- // 规范化多边形点位：如果首尾重复，去掉末尾闭合点
- normalizePolygonPositions(positions) {
- if (!Array.isArray(positions) || positions.length < 2) return positions || []
- const first = positions[0]
- const last = positions[positions.length - 1]
- const sameLng = Number(first?.lng) === Number(last?.lng)
- const sameLat = Number(first?.lat) === Number(last?.lat)
- const sameHeight = Number(first?.height || 0) === Number(last?.height || 0)
- if (sameLng && sameLat && sameHeight) {
- return positions.slice(0, -1)
- }
- return positions
- }
-
- // 初始化事件处理器
- initHandler(viewer) {
- this.viewer = viewer
- this.startDrawing()
-
- if (!this.handler) {
- this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
-
- // 注册鼠标事件
- const events = [
- [Cesium.ScreenSpaceEventType.LEFT_DOWN, this.handleLeftDown],
- [Cesium.ScreenSpaceEventType.LEFT_UP, this.handleLeftUp],
- [Cesium.ScreenSpaceEventType.MOUSE_MOVE, this.handleMouseMove],
- [Cesium.ScreenSpaceEventType.LEFT_CLICK, this.handleLeftClick],
- [Cesium.ScreenSpaceEventType.RIGHT_CLICK, this.handleRightClick],
- ]
-
- events.forEach(([type, handler]) => {
- this.handler.setInputAction(handler, type)
- })
- }
- }
-
- // 移除事件处理器
- removeHandler() {
- if (this.handler) {
- const eventTypes = [
- Cesium.ScreenSpaceEventType.LEFT_DOWN,
- Cesium.ScreenSpaceEventType.LEFT_UP,
- Cesium.ScreenSpaceEventType.MOUSE_MOVE,
- Cesium.ScreenSpaceEventType.LEFT_CLICK,
- Cesium.ScreenSpaceEventType.RIGHT_CLICK,
- ]
-
- eventTypes.forEach(type => {
- this.handler.removeInputAction(type)
- })
-
- this.handler.destroy()
- this.handler = null
- }
- }
-
- /**
- * 销毁实例，释放资源
- */
- destroy() {
- if (!this.viewer) return
-
- this.removeMenuPopup()
- this.removeEntities()
- this.removeHandler()
- this.enableMapControl()
- }
-}
diff --git a/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue b/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue
index 6b799c1..9e5bc91 100644
--- a/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue
+++ b/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue
@@ -16,7 +16,7 @@
<div class="right-container">
<div class="header">
<span>{{ titleEnum[dialogMode] }}</span>
-
+
<el-icon class="close-btn" @click.stop="visible = false"><Close /></el-icon>
</div>
@@ -105,7 +105,7 @@
import { fwDefenseSceneListApi } from '@/views/areaManage/sceneConfig/sceneConfigApi'
import { fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils'
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
-import { DrawPolygon } from '@/utils/cesium/DrawPolygon'
+import { DrawPolygon } from '@ztzf/utils'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import * as turf from '@turf/turf'
import * as Cesium from 'cesium'
diff --git a/applications/drone-command/src/views/areaManage/partition/FormDiaLog copy.vue b/applications/drone-command/src/views/areaManage/partition/FormDiaLog copy.vue
index 302d14e..92a98c9 100644
--- a/applications/drone-command/src/views/areaManage/partition/FormDiaLog copy.vue
+++ b/applications/drone-command/src/views/areaManage/partition/FormDiaLog copy.vue
@@ -17,7 +17,7 @@
<div class="right-container">
<div class="header">
<span>{{ titleEnum[dialogMode] }}</span>
-
+
<el-icon class="close-btn" @click.stop="visible = false"><Close /></el-icon>
</div>
@@ -180,7 +180,7 @@
import { useRoute } from 'vue-router'
import { fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils'
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
-import { DrawPolygon } from '@/utils/cesium/DrawPolygon'
+import { DrawPolygon } from '@ztzf/utils'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import * as turf from '@turf/turf'
import * as Cesium from 'cesium'
diff --git a/applications/drone-command/src/views/layerManagement/components/folderFile.vue b/applications/drone-command/src/views/layerManagement/components/folderFile.vue
deleted file mode 100644
index d8a2047..0000000
--- a/applications/drone-command/src/views/layerManagement/components/folderFile.vue
+++ /dev/null
@@ -1,316 +0,0 @@
-<template>
- <div class="rightContainer">
- <div class="contenttitle">{{ itSLandPlanning ? '文件' : '文件夹' }}信息</div>
- <div class="centerBox">
- <div class="itemRow">
- <div class="label">{{ itSLandPlanning ? '文件' : '文件夹' }}名称</div>
- <div>
- <el-input class="command-layer-input inputName" v-model="formData.name" placeholder="请输入" />
- </div>
- </div>
- <div class="itemRow"
- v-if="(layerParams.addAnEditingFolder === 1 && layerParams.fileType !== 2) || (layerParams.addAnEditingFolder === 2 && layerParams.fileType !== 2) && !itSLandPlanning">
- <div class="label">关联算法</div>
- <div>
- <el-select class="command-layer-search filter-item" @change="handleTypeChange" v-model="formData.event_type"
- placeholder="请选择" clearable>
- <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- <el-select v-model="formData.algorithm_name" class="command-layer-search" placeholder="请选择" clearable
- :disabled="!formData.event_type">
- <el-option v-for="item in algorithms" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </div>
- </div>
- </div>
- <div class="detailInfo" v-if="layerParams.editFolder">
- <div class="infpItem" v-if="!itSLandPlanning">
- <div class="itemData">
- <div class="title">{{ layerParams.fileType === 1 ? '识别区' : '禁飞区' }}总数量</div>
-
- <div class="num">
- <span class="totalQuantity">{{ formData.total_count }}</span> 个
- </div>
- </div>
- <div class="itemData">
- <div class="title">{{ layerParams.fileType === 1 ? '识别区' : '禁飞区' }}总面积</div>
- <div class="num">
- <span class="areaStyle">{{ dataUnitConversion(formData.total_area).val }}</span> {{
- dataUnitConversion(formData.total_area).unit }}
- </div>
- </div>
- </div>
- <div class="infpItem">
- <div class="itemData">
- <div class="title">创建时间</div>
- <div class="num">
- <span>{{ formData?.create_time }}</span>
- </div>
- </div>
- <div class="itemData">
- <div class="title">创建人</div>
- <div class="num">
- <span>{{ formData?.create_name }}</span>
- </div>
- </div>
- </div>
- </div>
- <div class="btnGroups">
- <img src="/src/assets/images/layerManagement/savebtn.svg" alt="" @click="submitHandle" />
- <img src="/src/assets/images/layerManagement/cancelbtn.svg" @click="cancelHandel" alt="" />
- </div>
- </div>
-</template>
-
-<script setup>
-import {dataUnitConversion} from '@ztzf/utils'
-const emit = defineEmits(['refreshMethod', 'callParentMethod'])
-import EventBus from '@/utils/eventBus'
-import { ElMessage } from 'element-plus'
-import dayjs from 'dayjs'
-import { deleteFolderApi, deitFolderApi, addFolderApi } from '@/api/layer/index'
-import { getTicketInfo } from '@/api/tickets/ticket'
-import { computed } from 'vue'
-
-const layerParams = inject('layerParams')
-const types = ref([]) //工单类型
-const allAlgorithms = ref([])
-const algorithms = ref([])
-const formData = ref({
- category_id: '',
- name: '',
- event_type: '',
- algorithm_name: '',
- total_count: 0,
- total_area: 0,
-})
-const detailData = ref(null)
-detailData.value = layerParams.value.editFolderData
-const props = defineProps({
- activeName: String,
-})
-const itSLandPlanning = computed(() => props.activeName === '国土空间规划')
-const getTicketInfoData = async () => {
- const response = await getTicketInfo()
- const { dept_data, event_type, ai_type, info } = response.data.data
- allAlgorithms.value = info
- types.value = Object.entries(event_type).map(([key, value]) => ({
- label: value,
- value: key,
- }))
-}
-const handleTypeChange = typeValue => {
- formData.value.algorithm_name = ''
- const matchedCategory = allAlgorithms.value.find(category => category.dict_key === typeValue)
- if (!matchedCategory || !matchedCategory.algorithms || matchedCategory.algorithms.length === 0) {
- // 无匹配的算法时清空
- algorithms.value = []
- return
- }
- algorithms.value = matchedCategory.algorithms.map(algo => ({
- label: algo.dict_value,
- value: algo.dict_key,
- dict_key: algo.dict_key,
- dict_value: algo.dict_value,
- }))
-}
-const clearAllData = () => {
- formData.value = {
- category_id: '',
- name: '',
- event_type: '',
- algorithm_name: '',
- total_count: 0,
- total_area: 0,
- create_time: '',
- create_name: '',
- }
- algorithms.value = []
- detailData.value = {}
- layerParams.value.decideWhetherToAddOrEdit = 1
- layerParams.value.addFolder = false
- layerParams.value.editFolder = false
- layerParams.value.editDetailData = null
- layerParams.value.polygonPosition = null
-}
-const cancelHandel = () => {
- clearAllData()
- emit('callParentMethod')
-}
-const submitHandle = () => {
- if (!formData.value.name) {
- ElMessage.error('请输入文件夹名称')
- return
- }
- if (!itSLandPlanning.value) {
- if (!formData.value.event_type && layerParams.value.fileType === 1) {
- ElMessage.warning('请选择类型')
- return
- }
- if (!formData.value.algorithm_name && layerParams.value.fileType === 1) {
- ElMessage.warning('请选择算法')
- return
- }
- }
- const params = {
- category_id: layerParams.value.fileType === 1 ? 1 : 2,
- name: formData.value.name,
- event_type: formData.value.event_type,
- algorithm_name: formData.value.algorithm_name,
- }
- // 如果是编辑模式，才添加 id
- if (layerParams.value.addAnEditingFolder === 2) {
- params.id = detailData.value.id
- }
- if (layerParams.value.addAnEditingFolder === 1) {
- // 文件夹新增
- addFolderApi(params).then(res => {
- ElMessage.success('新增成功')
- EventBus.emit('gettreeDataApi')
- emit('refreshMethod')
- clearAllData()
- emit('callParentMethod')
- })
- } else {
- //文件夹编辑
- deitFolderApi(params).then(res => {
- ElMessage.success('编辑成功')
- EventBus.emit('gettreeDataApi')
- clearAllData()
- emit('callParentMethod')
- })
- }
-}
-onMounted(async () => {
- await getTicketInfoData()
- const addOrEditStatus = layerParams.value.addAnEditingFolder || 1
- // 判断是否有编辑数据，有则回显
- if (detailData.value && addOrEditStatus === 2) {
- const editData = detailData.value
- formData.value = {
- ...formData.value,
- category_id: editData.category_id,
- name: editData.name,
- event_type: editData.event_type, // 回显“关联算法类型”值
- algorithm_name: editData.algorithm_name, // 回显“算法”值
-
- total_count: editData.total_count,
- total_area: editData.total_area,
- create_time: editData.create_time ? dayjs(editData.create_time).format('YYYY年MM月DD日') : '',
- create_name: editData.create_name,
- }
- if (formData.value.event_type) {
- handleTypeChange(formData.value.event_type)
-
- setTimeout(() => {
- formData.value.algorithm_name = editData.algorithm_name
- }, 100)
- }
- }
-})
-</script>
-
-<style scoped lang="scss">
-.rightContainer {
- position: absolute;
- top: 0;
- right: 0;
- height: calc(100% - 32px);
- z-index: 99;
- width: 324px;
-
- overflow: hidden;
- background: rgba(0, 0, 0, 0.51);
- backdrop-filter: blur(4px);
- border-radius: 8px 8px 8px 8px;
- padding: 16px 12px;
-
- :deep(.el-textarea__inner) {
- background: transparent !important;
- color: #ffffff !important;
- }
-
- .contenttitle {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 16px;
- color: #ffffff;
- margin-bottom: 20px;
- }
-
- .centerBox {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
-
- .itemRow {
- margin-bottom: 35px;
- }
-
- .label {
- margin-bottom: 5px;
- }
- }
-
- .detailInfo {
- .infpItem {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #DFDFDF;
- margin-bottom: 23px;
-
- .num {
- span {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ffffff;
- }
-
- .totalQuantity {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- }
-
- .areaStyle {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- color: #FFFFFF;
-
- }
- }
-
- .itemData {
- width: 50%;
-
- }
- }
- }
-
- .btnGroups {
- display: flex;
- justify-content: center;
- position: absolute;
- bottom: 59px;
- left: 0;
- right: 0;
-
- img {
- width: 125px;
- height: 39px;
- cursor: pointer;
- }
- }
-}
-
-.filter-item {
- margin-bottom: 12px;
-}
-</style>
diff --git a/applications/drone-command/src/views/layerManagement/components/leftList.vue b/applications/drone-command/src/views/layerManagement/components/leftList.vue
deleted file mode 100644
index 8917ac1..0000000
--- a/applications/drone-command/src/views/layerManagement/components/leftList.vue
+++ /dev/null
@@ -1,588 +0,0 @@
-<template>
- <div class="table-overlay">
- <div class="searchBox">
- <el-input
- class="command-layer-input inputName"
- v-model="formData.dkbh"
- placeholder="输入名称模糊搜索"
- ></el-input>
- <div class="searchAndReset">
- <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
- <el-button class="command-button" icon="el-icon-refresh" @click="reset">重置</el-button>
- </div>
- </div>
- <div class="btnGroups">
- <el-button v-if="activeName !== '国土空间规划'" class="command-button" @click="addFence">{{
- props.activeName === '自定义识别区' ? '新增识别区' : '新增禁飞区'
- }}</el-button>
- <el-button v-if="activeName !== '国土空间规划'" class="command-button" @click="addFolder"
- >新增文件夹</el-button
- >
- <el-upload
- v-if="activeName === '国土空间规划'"
- action="#"
- :show-file-list="false"
- :before-upload="e => uploadFlightFile(e, '1')"
- accept=".zip"
- >
- <el-button class="command-button"> 上传 </el-button>
- </el-upload>
-
- <!-- <template v-if="activeName === '自定义禁飞区'">
- <template v-if="failuresInfo.length">
- <el-button class="command-button" @click="synchronize"> 继续同步 </el-button>
- <el-button class="command-button" @click="failuresDel"> 取消同步 </el-button>
- </template>
- <el-button v-else class="command-button" @click="synchronize"> 同步 </el-button>
- </template> -->
-
- <!-- <el-button class="command-button" @click="selectAll">全选</el-button> -->
- <el-button class="command-button" @click="selectAll">
- {{ checkedKeys.length === getAllFenceKeys().length ? '取消全选' : '全选' }}
-</el-button>
- </div>
- <div
- class="tableListBox"
- v-loading="loading"
- element-loading-background="rgba(0, 0, 0, 0.2)"
- element-loading-text="加载中..."
- >
- <el-tree
- class="command-el-tree"
- :class="{ isTheTerritory: activeName === '国土空间规划' }"
- ref="treeRef"
- v-model="checkedKeys"
- :data="treeData"
- show-checkbox
- node-key="id"
- default-expand-all
- :expand-on-click-node="false"
- :check-on-click-node="true"
- :filter-node-method="filterNode"
- highlight-current
- @check="handleCheck"
- :current-node-key="currentNodeKey"
- @node-click="handleNodeClick"
- :props="{
- label: 'name',
- children: 'children',
- }"
- >
- <!-- 自定义节点内容 -->
- <template #default="{ node }">
- <div class="tree-node" >
- <!-- 节点名称 -->
- <span class="nodeName" >{{ node.label }}</span>
- <!-- 操作按钮组 -->
- <div class="tree-node-actions" >
- <!-- <el-button
- link
- icon="el-icon-location"
- @click.stop="handleLocation(node)"
- :disabled="node.data.level === 2 && (!node.data.children || node.data.children.length === 0)"
- class="location-btn"
- ></el-button> -->
- <el-button icon="el-icon-edit" link @click.stop="handleEdit(node)"></el-button>
- <el-button icon="el-icon-delete" :class="isDisabledColor ? 'location-btn' : ''" link @click.stop="handleDelete(node)"
- :disabled="!!formData.dkbh.trim() && node.data.level === 2 && props.activeName !== '国土空间规划' && (
- filteredShowNodeIds.has(node.data.id) || isNodeOrChildrenMatch(node.data, formData.dkbh.trim())
- )"></el-button>
- </div>
- </div>
- </template>
- </el-tree>
- </div>
- </div>
-</template>
-
-<script setup>
-import { ElMessage, ElMessageBox } from 'element-plus';
-import {
- treeDataApi,
- deleteFenceApi,
- deleteFolderApi,
- spatialPlanningApi,
- failuresListApi,
- failuresDelApi,
- areasUpdateApi,
-} from '@/api/layer/index';
-import { inject, nextTick, onMounted, watch } from 'vue';
-const emit = defineEmits(['update:coverData', 'update:deitData', 'newFencesMethods']);
-import EventBus from '@/utils/eventBus';
-const coverData = ref();
-const layerParams = inject('layerParams');
-const checkedKeys = ref([]); // 存储勾选的节点key
-const treeRef = ref(null); // 获取tree实例
-const checkedNodes = ref([]); // 存储勾选的节点数据
-const props = defineProps(['activeName','resetCheck']);
-const formData = ref({
- isPush: undefined,
- page: 1,
- isGenerated: undefined,
- pageSize: 17,
- dkbh: '',
- patchesName: '',
-});
-const loading = ref(true);
-const treeData = ref([]);
-const treeAllData = ref([]);
-// 存储过滤后显示的节点ID（返回true的节点）
-const filteredShowNodeIds = ref(new Set());
-const isDisabledColor = ref(false)
-// 存储当前选中节点的key
-const currentNodeKey = ref(null);
-// 节点点击事件：切换选中/取消选中
-const handleNodeClick = (nodeData, node) => {
- // 如果点击的是已经高亮的节点，则取消高亮
- if (!node.checked) {
- treeRef.value?.setCurrentKey(null);
- }
-};
-// 获取数据
-const gettreeDataApi = async () => {
- try {
- loading.value = true;
- const res = await treeDataApi({filterExpired:false});
- treeAllData.value = res.data.data;
- // 加载数据后立即清空标记
- filteredShowNodeIds.value.clear();
- if(coverData.value.length===0){
- checkedKeys.value = [];
- checkedNodes.value = [];
- coverData.value = [];
- nextTick(() => {
- if (treeRef.value) {
- treeRef.value.setCheckedKeys([]);
- }
- });
- }
-
- setupWatch();
- } catch (error) {
- console.error('获取数据失败:', error);
- } finally {
- loading.value = false;
- }
-};
-
-const setupWatch = () => {
- watch(
- () => props.activeName,
- newVal => {
- const matchedCategory = treeAllData.value.find(item => item.name === newVal);
- treeData.value = matchedCategory.children;
- nextTick(search);
- if (treeData.value && treeData.value.length > 0) {
- const folderNode = treeData.value[0];
- // 赋值给 layerParams
- layerParams.value.total_count = folderNode.total_count ? folderNode.total_count : 0;
- layerParams.value.total_area = folderNode.total_area ? folderNode.total_area : 0;
- }
- },
- { immediate: true }
- );
-};
-const handleCheck = (checkedNodesData, checkedKeysData) => {
-layerParams.value.isSingleLocating = false
- const filteredNodes = checkedKeysData.checkedNodes.filter(node => node.level === 3);
- checkedNodes.value = filteredNodes
- checkedKeys.value = filteredNodes.map(node => node.id);
- coverData.value = filteredNodes;
- emit('update:coverData', coverData.value);
-};
-// 全选方法
-const getAllFenceKeys = () => {
- return treeData.value.flatMap(
- folder => folder.children.map(fence => fence.id)
- );
-};
-const selectAll = () => {
- currentNodeKey.value = null;
- layerParams.value.currentLocationFolderId = null;
-layerParams.value.isSingleLocating = false
- // 清除高亮
- currentNodeKey.value = null;
- treeRef.value?.setCurrentKey(null);
- if (treeRef.value) {
- const allFenceKeys = getAllFenceKeys();
- const allFenceNodes = treeData.value.flatMap(folder => folder.children);
- if (checkedKeys.value.length === allFenceKeys.length) {
- // 取消全选
- treeRef.value.setCheckedKeys([]);
- checkedKeys.value = [];
- checkedNodes.value = [];
- coverData.value = [];
- emit('update:coverData', coverData.value);
- } else {
- // 全选
- treeRef.value.setCheckedKeys(allFenceKeys);
- checkedKeys.value = allFenceKeys;
- checkedNodes.value = allFenceNodes;
- coverData.value = allFenceNodes;
- emit('update:coverData', coverData.value);
-
- }
-
- }
-};
-// 定位按钮事件
-const handleLocation = node => {
- const currentKey = treeRef.value.getCurrentKey();
- if (currentKey === node.data.id) {
- treeRef.value.setCurrentKey(null); // 取消高亮
- } else {
- treeRef.value.setCurrentKey(node.data.id); // 高亮当前节点
- }
- if (node.data.level === 2) {
- layerParams.value.isSingleLocating = false;
- // 新增：标记当前定位的文件夹ID
- layerParams.value.currentLocationFolderId = node.data.id;
- } else if (node.data.level === 3) {
- layerParams.value.isSingleLocating = true;
- // 清空文件夹定位标识
- layerParams.value.currentLocationFolderId = null;
- }
-
- const currentCheckedKeys = [...checkedKeys.value];
- const currentCheckedNodes = [...checkedNodes.value];
- EventBus.emit('focusOnNode', node.data);
- if (node.data.level === 2) {
- const folderChildren = node.data.children || [];
- const childrenIds = folderChildren.map(child => child.id);
- const newChildrenIds = childrenIds.filter(id => !currentCheckedKeys.includes(id));
- const newChildrenNodes = folderChildren.filter(child => newChildrenIds.includes(child.id));
-
- const newCheckedKeys = [...new Set([...currentCheckedKeys, ...newChildrenIds])];
- const newCheckedNodes = [...currentCheckedNodes, ...newChildrenNodes];
-
- treeRef.value.setCheckedKeys(newCheckedKeys);
- checkedKeys.value = newCheckedKeys;
- checkedNodes.value = newCheckedNodes;
- coverData.value = newCheckedNodes;
- emit('update:coverData', coverData.value);
- } else if (!currentCheckedKeys.includes(node.data.id)) {
- layerParams.value.isSingleLocating = true;
- currentCheckedKeys.push(node.data.id);
- currentCheckedNodes.push(node.data);
- treeRef.value.setCheckedKeys(currentCheckedKeys);
- checkedKeys.value = currentCheckedKeys;
- checkedNodes.value = currentCheckedNodes;
- coverData.value = currentCheckedNodes;
- emit('update:coverData', coverData.value);
- }
-};
-// 编辑按钮事件
-const handleEdit = node => {
- if (node.data.level == 2) {
- layerParams.value.editFolder = true;
- layerParams.value.addAnEditingFolder = 2;
- if (props.activeName === '自定义识别区') {
- layerParams.value.fileType = 1;
- } else if (props.activeName === '自定义禁飞区') {
- layerParams.value.fileType = 2;
- }
- emit('update:editFolder', node.data);
- } else if (node.data.level === 3) {
- checkedKeys.value = [];
- checkedNodes.value = [];
- coverData.value = [];
- layerParams.value.editNest = true;
- layerParams.value.decideWhetherToAddOrEdit = 2;
- if (props.activeName === '自定义识别区') {
- layerParams.value.fenceType = 1; // 电子围栏类型标识
- } else if (props.activeName === '自定义禁飞区') {
- layerParams.value.fenceType = 2; // 自定义禁飞区类型标识
- }
- emit('update:deitData', node.data);
- }
-};
-
-// 删除按钮事件
-const handleDelete = node => {
-
- let id = node.data.id;
- ElMessageBox.confirm('确定要删除该内容吗？', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- })
- .then(() => {
- if (node.data.level === 2) {
- // 删除文件夹
- deleteFolderApi(id).then(res => {
- ElMessage.success('删除成功');
- gettreeDataApi();
- EventBus.emit('deleteMapEntitiesByFolderId', id);
- });
- } else if (node.data.level === 3) {
- // 删除单个围栏/禁飞区
- deleteFenceApi(id).then(res => {
- ElMessage.success('删除成功');
- gettreeDataApi();
- EventBus.emit('deleteMapEntityById', id);
- });
- }
- })
- .catch(() => {
-
- });
-};
-// 新增围栏
-const addFence = () => {
- layerParams.value.addNest = true;
- layerParams.value.decideWhetherToAddOrEdit = 1;
- if (props.activeName === '自定义识别区') {
- layerParams.value.fenceType = 1; // 电子围栏类型标识
- } else if (props.activeName === '自定义禁飞区') {
- layerParams.value.fenceType = 2; // 自定义禁飞区类型标识
- }
- emit('newFencesMethods');
-};
-// 新增文件夹
-const addFolder = () => {
- layerParams.value.addFolder = true;
- layerParams.value.addAnEditingFolder = 1;
- if (props.activeName === '自定义识别区') {
- layerParams.value.fileType = 1;
- } else if (props.activeName === '自定义禁飞区') {
- layerParams.value.fileType = 2;
- }
-};
-function uploadFlightFile(file, t) {
- const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
- if (!['zip'].includes(fileSuffix)) {
- return ElMessage.error('请上传zip格式的文件');
- }
- let data = new FormData();
- const params = {
- file: file,
- fileName: file.name,
- };
- Object.keys(params).forEach(key => {
- data.append(key, params[key]);
- });
- spatialPlanningApi(data).then(res => {
- ElMessage.success('上传成功');
- gettreeDataApi();
- });
-}
-
-function search() {
- const keyword = formData.value.dkbh.trim();
- // 有搜索词时才过滤，无则清空标记
- if (keyword) {
- treeRef.value?.filter(keyword);
- isDisabledColor.value = true
- } else {
- filteredShowNodeIds.value.clear();
- treeRef.value?.filter('');
- }
-}
-function reset() {
- isDisabledColor.value = false
- formData.value.dkbh = '';
- filteredShowNodeIds.value.clear();
- nextTick(() => {
- treeRef.value?.filter('');
- });
-}
-const isNodeOrChildrenMatch = (nodeData, keyword) => {
- // 无关键词时直接返回false
- if (!keyword || keyword.trim() === '') return false;
- // 自身包含关键词
- if (nodeData.name.includes(keyword)) return true;
- // 遍历子节点，判断是否有子节点包含
- if (nodeData.children && nodeData.children.length) {
- return nodeData.children.some(child => isNodeOrChildrenMatch(child, keyword));
- }
- return false;
-};
-function filterNode(value, data) {
- let isShow = false;
- const keyword = value?.trim() || '';
-
- if (props.activeName === '国土空间规划') {
- if (!keyword) {
- isShow = data.level === 2 || data.level === 1;
- } else {
- isShow = (data.level === 2 || data.level === 1) && data.name.includes(keyword);
- }
- } else {
- if (!keyword) {
- isShow = true;
- } else {
- // 非国土空间规划：节点自身/子节点匹配则显示
- isShow = isNodeOrChildrenMatch(data, keyword);
- }
- }
- // 仅当有搜索词时，才更新标记（无搜索词清空）
- if (keyword) {
- if (isShow && data.id) {
- filteredShowNodeIds.value.add(data.id);
- } else if (data.id) {
- filteredShowNodeIds.value.delete(data.id);
- }
- } else {
- filteredShowNodeIds.value.clear();
- }
-
- return isShow;
-}
-
-// 同步信息
-const failuresInfo = ref([]);
-function failuresList() {
- failuresListApi().then(res => {
- failuresInfo.value = res.data.data || [];
- });
-}
-
-// 同步
-function synchronize() {
- const data = failuresInfo.value.map(item => item.device_sn);
- areasUpdateApi(data).then(res => {
- if (res.data.data.length) {
- let stringVal = res.data.data.reduce((acc, cur) => {
- return acc + cur.nickname + '(' + cur.reason + ')' + '，';
- }, '');
- stringVal = stringVal.slice(0, -1);
- ElMessageBox.alert(stringVal, '同步失败', {
- confirmButtonText: '确定',
- });
- } else {
- ElMessage.success('同步成功');
- }
- });
-}
-
-// 取消同步
-function failuresDel() {
- failuresDelApi().then(res => {
- ElMessage.success('取消同步成功');
- });
-}
-// 切换tab清空复选框的数据
-watch(
- () => props.resetCheck,
- (newVal) => {
- if (newVal !== undefined) {
- checkedKeys.value = [];
- checkedNodes.value = [];
- coverData.value = [];
- treeRef.value?.setCheckedKeys([]);
- }
- },
- { immediate: true }
-);
-onMounted(() => {
- failuresList();
- gettreeDataApi();
- EventBus.on('gettreeDataApi', gettreeDataApi);
-});
-onBeforeUnmount(() => {
- EventBus.off('gettreeDataApi', gettreeDataApi);
-});
-</script>
-
-<style scoped lang="scss">
-.table-overlay {
- position: absolute;
- top: 0;
- left: 0;
-height: calc(100% - 32px);
- z-index: 99;
- width: 332px;
- overflow: hidden;
- background: rgba(0,0,0,0.51);
- backdrop-filter: blur(4px);
- border-radius: 8px 8px 8px 8px;
- padding: 16px 0 16px 12px;
- display: flex;
- flex-direction: column;
-}
-
-.searchBox {
- display: flex;
- margin-top: 10px;
-padding-right: 12px;
- .inputName {
- width: 140px;
- height: 32px;
- }
- .searchAndReset {
- width: 182px;
- display: flex;
- justify-content: right;
- align-items: center;
- margin-right: 10px;
-
- }
-}
-.btnGroups {
- margin: 12px 0 14px 0;
- display: flex;
- gap: 0 10px;
-padding-right: 12px;
- .el-button {
- margin: 0 !important;
- }
-}
-.tableListBox {
- overflow-y: scroll;
- height: 0;
- flex-grow: 1;
- // padding-right: 12px;
- :deep(.el-tree-node__content) {
- height: 45px !important;
- line-height: 45px !important;
- // padding-left: 0 !important;
- border-bottom: 1px dotted rgba(255,255,255,0.1);
- }
- // 定位选中节点的背景色样式
- ::v-deep(.el-tree-node.is-current > .el-tree-node__content) {
- background-color: rgba(64, 158, 255, 0.2) !important; // 浅蓝色半透明背景
- }
- .isTheTerritory {
- :deep() {
- .el-tree-node__expand-icon {
- visibility: hidden;
- }
- }
- }
-
- :deep() {
- .el-checkbox {
- --el-checkbox-bg-color: transparent !important;
- }
- }
- .tree-node {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-right: 12px;
- width: 100%;
- .nodeName {
- font-size: 12px !important;
- }
- }
-
- .tree-node-actions {
- display: flex;
- // gap: 8px;
-
- button {
- padding: 0;
- color: #fff;
- width: 17px;
- height: 17px;
- // color: #409eff;
- // &:hover {
- // color: #409eff;
- // }
- }
- }
- ::v-deep(.location-btn.el-button.is-link.is-disabled) {
- color: #999 !important;
-}
-}
-</style>
diff --git a/applications/drone-command/src/views/layerManagement/components/nationalSpatialPlanning.vue b/applications/drone-command/src/views/layerManagement/components/nationalSpatialPlanning.vue
deleted file mode 100644
index f11522c..0000000
--- a/applications/drone-command/src/views/layerManagement/components/nationalSpatialPlanning.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
- <div class="spLeft">
- <div class="input-search">
- <el-input placeholder="请输入关键字" clearable></el-input>
- <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
- <el-button icon="el-icon-refresh" @click="handleReset">清空</el-button>
- </div>
- </div>
- <div class="spRight"></div>
-</template>
-
-<script setup>
-
-function handleSearch() {}
-function handleReset() {}
-</script>
-
-<style scoped lang="scss">
-.spLeft {
- position: absolute;
- top: 0;
- left: 0;
- height: 95%;
- z-index: 99;
- width: 392px;
- overflow: hidden;
- background: rgba(0, 0, 0, 0.8);
- border-radius: 8px 8px 8px 8px;
- padding: 16px 12px;
- .input-search {
- display: flex;
- .el-input {
- margin-right: 10px;
- }
- }
-}
-.spRight {
- position: absolute;
- top: 0;
- right: 0;
- height: 95%;
- z-index: 99;
- width: 324px;
- overflow: hidden;
- background: rgba(0, 0, 0, 0.8);
- border-radius: 8px 8px 8px 8px;
- padding: 16px 12px;
-}
-</style>
\ No newline at end of file
diff --git a/applications/drone-command/src/views/layerManagement/components/rightEdit.vue b/applications/drone-command/src/views/layerManagement/components/rightEdit.vue
deleted file mode 100644
index 8de4ccd..0000000
--- a/applications/drone-command/src/views/layerManagement/components/rightEdit.vue
+++ /dev/null
@@ -1,471 +0,0 @@
-<template>
- <div class="rightContainer" >
- <div class="contenttitle">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}信息</div>
- <div class="centerBox">
- <div class="itemRow">
- <div class="label">文件夹名称</div>
- <div>
- <el-select
- :disabled="isDisabled"
- class="command-layer-search"
- clearable
- v-model="formData.folder_id"
- placeholder="请选择"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </div>
- </div>
- <div class="itemRow">
- <div class="label">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}名称</div>
- <div>
- <el-input
- :disabled="isDisabled"
- class="command-layer-input inputName"
- v-model="formData.name"
- placeholder="请输入"
- />
- </div>
- </div>
- <div class="itemRow" v-if="layerParams.fenceType === 2">
- <div class="label">禁飞区管控时间</div>
- <div>
- <!-- popper-class="command-layer-date-picker-popper " -->
- <el-date-picker
- :disabled="isDisabled"
- class="command-layer-date-picker"
- v-model="timeValue"
- type="datetimerange"
- format="YYYY-MM-DD HH:mm"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :disabled-date="disabledDate"
- />
- </div>
- </div>
- <div class="itemRow">
- <div class="label">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}备注</div>
- <div>
- <el-input
- :disabled="isDisabled"
- v-model="formData.description"
- :rows="5"
- type="textarea"
- placeholder="请输入"
- />
- </div>
- </div>
- </div>
- <div class="detailInfo">
- <div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 1">
- <div class="itemData">
- <div class="title">识别区面积</div>
- <div class="num">
- <span class="areaStyle">{{ dataUnitConversion(fenceArea).val }}</span> {{
- dataUnitConversion(fenceArea).unit }}
- </div>
- </div>
- <div class="itemData">
- <div class="title">创建人</div>
- <div class="num">
- <span>{{ formData?.create_name }}</span>
- </div>
- </div>
- </div>
- <div class="infpItem" v-if="layerParams.fenceType === 2">
- <div class="itemData" v-if="layerParams.editNest && layerParams.fenceType === 2">
- <div class="title">禁飞区面积</div>
- <div class="num">
- <span class="areaStyle">{{ dataUnitConversion(fenceArea).val }}</span> {{
- dataUnitConversion(fenceArea).unit }}
- </div>
- </div>
- <div class="itemData">
- <div class="title">禁飞区高度</div>
- <div class="num noFly">
- <span
- ><el-input
- :disabled="isDisabled"
- class="command-layer-input inputName"
- v-model="formData.altitude"
- placeholder="请输入"
- /></span>
- 米
- </div>
- </div>
- </div>
- <div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 2">
- <div class="itemData">
- <div class="title">创建时间</div>
- <div class="num">
- <span>{{ formData?.create_time }}</span>
- </div>
- </div>
- <div class="itemData">
- <div class="title">创建人</div>
- <div class="num">
- <span>{{ formData?.create_name }}</span>
- </div>
- </div>
- </div>
- <div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 1">
- <div class="itemData">
- <div class="title">创建时间</div>
- <div class="num">
- <span>{{ formData?.create_time }}</span>
- </div>
- </div>
- </div>
- </div>
- <div class="btnGroups">
- <img v-if="!layerParams.editingIsProhibited && layerParams.fenceArea / 1000000 > 50" src="/src/assets/images/layerManagement/disabled.svg" alt="" />
- <img v-if="!layerParams.editingIsProhibited && layerParams.fenceArea / 1000000 < 50" src="/src/assets/images/layerManagement/savebtn.svg" alt="" @click="submitHandle" />
- <img v-if="layerParams.editingIsProhibited" src="/src/assets/images/layerManagement/closeBtn.svg" @click="cancelHandel" alt="" />
- <img v-else src="/src/assets/images/layerManagement/cancelbtn.svg" @click="cancelHandel" alt="" />
-
- </div>
- </div>
-</template>
-
-<script setup>
- import {dataUnitConversion} from '@ztzf/utils'
-import { ElMessage } from 'element-plus';
-import dayjs from 'dayjs';
-import { deitFenceApi, addFenceApi } from '@/api/layer/index';
-import EventBus from '@/utils/eventBus';
-const emit = defineEmits(['callParentMethod','update:loading']);
-const layerParams = inject('layerParams');
-const options = ref([]);
-const timeValue = ref('');
-options.value = layerParams.value.folderOption;
-const formData = ref({
- folder_id: '',
- name: '',
- description: '',
- is_enabled: false,
- area: '',
- altitude: '',
- control_start_time: '',
- control_end_time: '',
- geo_data: '',
-
-});
-const loading = ref(true);
-const detailData = ref(null);
-const fenceArea = ref(0);
-detailData.value = layerParams.value.editDetailData;
-fenceArea.value = layerParams.value.fenceArea;
-const isDisabled = computed(() => {
- return layerParams.value.editingIsProhibited;
-});
-// 禁用当天之前的日期
-const disabledDate = time => {
- return time.getTime() < Date.now() - 8.64e7 // 86400000 = 24 * 60 * 60 * 1000
-}
-watch(
- () => layerParams.value.fenceArea,
- newArea => {
- if (newArea !== undefined && newArea !== null) {
- if (newArea / 1000000 < 50) {
- fenceArea.value = newArea;
- formData.value.area = newArea;
- }
- }
- },
- { immediate: true }
-);
-// 监听editDetailData的变化
-watch(
- () => layerParams.value.editDetailData,
- newVal => {
- if (newVal && layerParams.value.editingIsProhibited) {
- // 当editDetailData有值时，填充表单
- formData.value = {
- ...formData.value,
- folder_id: newVal.folder_id || '',
- name: newVal.name || '',
- description: newVal.description || '',
- is_enabled: newVal.is_enabled || false,
- area: newVal.area || '',
- altitude: newVal.altitude || '',
- control_start_time: newVal.control_start_time || '',
- control_end_time: newVal.control_end_time || '',
- geo_data: newVal.geo_data || '',
- create_name: newVal.create_name || '',
- create_time: newVal.create_time ? dayjs(newVal.create_time).format('YYYY年MM月DD日') : '',
- };
-
- // 处理文件夹选择
- if (newVal.folder_id && options.value.length > 0) {
- const matchedFolder = options.value.find(item => item.value === String(newVal.folder_id));
- if (matchedFolder) {
- formData.value.folder_id = matchedFolder.value;
- }
- }
-
- // 处理时间选择
- if (newVal.control_start_time && newVal.control_end_time) {
- timeValue.value = [
- dayjs(newVal.control_start_time).toDate(),
- dayjs(newVal.control_end_time).toDate(),
- ];
- }
- }
- },
- { immediate: true, deep: true }
-);
-watch(
- () => timeValue.value,
- newTimeArr => {
- if (Array.isArray(newTimeArr) && newTimeArr.length === 2) {
- const startTime = newTimeArr[0];
- const endTime = newTimeArr[1];
- formData.value.control_start_time = dayjs(startTime).format('YYYY-MM-DD HH:mm:ss');
- formData.value.control_end_time = dayjs(endTime).format('YYYY-MM-DD HH:mm:ss');
- } else {
- formData.value.control_start_time = '';
- formData.value.control_end_time = '';
- }
- },
- { immediate: true }
-);
-const clearAllData = () => {
- detailData.value = {};
- layerParams.value.decideWhetherToAddOrEdit = 1;
- // 重置面板状态和缓存数据
- layerParams.value.addNest = false;
- layerParams.value.editNest = false;
- layerParams.value.editDetailData = null;
- layerParams.value.polygonPosition = null;
- layerParams.value.editingIsProhibited = false;
-};
-const cancelHandel = () => {
-loading.value = false
- emit('update:loading', false);
- clearAllData();
- emit('callParentMethod');
- EventBus.emit('gettreeDataApi');
-};
-const submitHandle = () => {
-if(layerParams.value.crossSurface){
- return ElMessage.warning('测区不支持交叉面')
-}
- if (!formData.value.folder_id) {
- ElMessage.error('请选择文件夹');
- return;
- }
- if (!formData.value.name) {
- ElMessage.error('请输入名称');
- return;
- }
- if (!formData.value.altitude && layerParams.value.fenceType === 2) {
- ElMessage.error('请输入高度');
- return;
- }
- if (fenceArea.value === 0) {
- ElMessage.error('请绘制区域');
- return;
- }
- loading.value = true
- emit('update:loading', true);
- const params = {
- folder_id: formData.value.folder_id,
- name: formData.value.name,
- description: formData.value.description,
- is_enabled: true,
- area: formData.value.area,
- altitude: formData.value.altitude,
- geo_data: layerParams.value.polygonPosition
- ? layerParams.value.polygonPosition
- : formData.value.geo_data,
- control_start_time: formData.value.control_start_time,
- control_end_time: formData.value.control_end_time,
- };
- // 如果是编辑模式，才添加 id
- if (layerParams.value.decideWhetherToAddOrEdit === 2) {
- params.id = detailData.value.id;
- }
- if (layerParams.value.decideWhetherToAddOrEdit === 1) {
- //围栏新增
- addFenceApi(params)
- .then(res => {
- if(res.data.code ===0 ){
- ElMessage.success('新增成功');
- EventBus.emit('gettreeDataApi');
- loading.value = false;
- emit('update:loading', false);
- clearAllData();
- emit('callParentMethod');
- }
- })
- .catch(err => {
- ElMessage.error('新增失败，请重试');
- })
- .finally(() => {
- loading.value = false;
- emit('update:loading', false);
- });
- } else if (layerParams.value.decideWhetherToAddOrEdit === 2) {
- //围栏编辑
- deitFenceApi(params)
- .then(res => {
- if(res.data.code === 0){
- ElMessage.success('编辑成功');
- EventBus.emit('gettreeDataApi');
- clearAllData();
- emit('callParentMethod');
- loading.value = false;
- emit('update:loading', false);
- }
- })
- .catch(err => {
- ElMessage.error('编辑失败，请重试');
- })
- .finally(() => {
- loading.value = false;
- emit('update:loading', false);
- });
- }
-};
-onMounted(() => {
- // 获取判断状态（默认设为 1）
- const addOrEditStatus = layerParams.value.decideWhetherToAddOrEdit || 1;
- if (addOrEditStatus === 2) {
- // 编辑状态：回显数据
- const editData = layerParams.value.editDetailData || {};
- formData.value = {
- folder_id: editData.folder_id || '',
- name: editData.name || '',
- description: editData.description || '',
- is_enabled: editData.is_enabled || false,
- area: editData.area || '',
- altitude: editData.altitude || '',
- control_start_time: editData.control_start_time || '',
- control_end_time: editData.control_end_time || '',
- geo_data: editData.geo_data || '',
- create_name: editData.create_name,
- create_time: editData.create_time ? dayjs(editData.create_time).format('YYYY年MM月DD日') : '',
- };
- if (editData.folder_id && options.value.length > 0) {
- const matchedFolder = options.value.find(item => item.value === String(editData.folder_id));
- if (matchedFolder) {
- formData.value.folder_id = matchedFolder.value;
- }
- }
- if (editData.control_start_time && editData.control_end_time) {
- timeValue.value = [
- dayjs(editData.control_start_time).toDate(),
- dayjs(editData.control_end_time).toDate(),
- ];
- }
- fenceArea.value = editData.area || 0;
- }
-});
-</script>
-
-<style scoped lang="scss">
-.rightContainer {
- position: absolute;
- top: 0;
- right: 0;
-height: calc(100% - 32px);
- z-index: 99;
- width: 324px;
-
- overflow: hidden;
- background: rgba(0,0,0,0.51);
- backdrop-filter: blur(4px);
- border-radius: 8px 8px 8px 8px;
- padding: 16px 12px;
-:deep(.el-select__wrapper.is-disabled .el-select__selected-item){
-color: rgba(255,255,255,0.37) !important;
-}
- :deep(.el-textarea__inner) {
- background: transparent !important;
- color: #ffffff;
- }
- :deep(.el-textarea.is-disabled .el-textarea__inner){
- color: var(--el-disabled-text-color) !important;
-
-}
- .contenttitle {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 16px;
- color: #ffffff;
- margin-bottom: 20px;
- }
- .centerBox {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- .itemRow {
- margin-bottom: 35px;
- }
- .label {
- margin-bottom: 5px;
- }
- :deep(.el-date-editor.el-input__wrapper) {
- width: auto !important;
- background: transparent !important;
- }
- :deep(.el-range-editor.is-disabled input) {
- background-color: transparent !important;
- }
- }
- .detailInfo {
- .infpItem {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #dfdfdf;
- margin-bottom: 23px;
- .num {
- span {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ffffff;
- }
- .areaStyle {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- color: #ffffff;
- }
- }
- .noFly {
- display: flex;
- align-items: center;
- }
- .itemData {
- width: 50%;
- }
- }
- }
- .btnGroups {
- display: flex;
- justify-content: center;
- position: absolute;
- bottom: 29px;
- left: 0;
- right: 0;
- img {
- width: 125px;
- height: 39px;
- cursor: pointer;
- }
-
- }
-}
-</style>
diff --git a/applications/drone-command/src/views/layerManagement/components/utils.js b/applications/drone-command/src/views/layerManagement/components/utils.js
deleted file mode 100644
index 458b5a7..0000000
--- a/applications/drone-command/src/views/layerManagement/components/utils.js
+++ /dev/null
@@ -1,619 +0,0 @@
-import * as Cesium from 'cesium'
-import _, { cloneDeep, throttle } from 'lodash'
-import * as turf from '@turf/turf'
-import { boxTransformScale } from '@/utils/turfFunc'
-
-/**
- * 多边形绘制与编辑工具类
- * 功能：
- * - 绘制多边形
- * - 拖动编辑端点
- * - 删除端点、删除整个多边形
- * - 多边形自交检查（避免非法几何）
- * - 外部订阅/通知机制
- */
-export class DrawPolygon {
- constructor() {
- // 是否绘制
- this.whetherToDraw =false
- // 图斑预览模式标记
- this.isPureSpotPreview = false
- // 是否删除测区
- this.isDeleteTheArea = true
- //是否可以编辑图斑
- this.isPreviewMode = true
- // Cesium 视图对象
- this.viewer = null
- // 当前绘制的多边形
- this.curPolygon = null
- // 绘制模式标识
- this.drawingMode = false
- // 编辑模式标识
- this.editingMode = false
- // 是否正在拖拽端点
- this.isDragging = false
- // 当前拖拽的点实体
- this.draggedEntity = null
- // 多边形实体
- this.polygonEntity = null
- // 存储端点的 DataSource
- this.editPolygonDataSource = null
- this.editPolygonPointDataSource = null
- // 鼠标事件处理器
- this.handler = null
- // 右键菜单 DOM
- this.menuPopup = null
- // 被右键选中的点
- this.delPolygonPoint = null
- // 是否显示警告提示（自交）
- this.isShowWaringTip = false
- // 当前拖拽点是否合法
- this.currentDragPointIsValid = false
- // 当前拖拽点的坐标
- this.currentDragPointPosition = null
-
- // 事件回调函数绑定 this
- this.handleLeftDown = this.handleLeftDown.bind(this)
- this.handleLeftUp = this.handleLeftUp.bind(this)
- this.handleMouseMove = this.handleMouseMove.bind(this)
- this.handleLeftClick = this.handleLeftClick.bind(this)
- this.handleRightClick = this.handleRightClick.bind(this)
-
- this.delPolygon = this.delPolygon.bind(this)
- this.delPoint = this.delPoint.bind(this)
- // 外部订阅者
- this.listeners = []
-
- }
-
- // 实体命名常量
- static ENTITY_NAMES = {
- POLYGON: '区域-面',
- POINT: '区域-端点',
- POLYGON_ID: 'planar-route-polygon',
- POINT_ID_PREFIX: 'planar-route-point',
- }
-
- // 颜色常量
- static COLORS = {
- DEFAULT_POLYGON: Cesium.Color.fromBytes(45, 140, 240, 99), // 默认面颜色
- DEFAULT_LINE: Cesium.Color.fromBytes(45, 140, 240, 255), // 默认边界线颜色
- ERROR_POLYGON: Cesium.Color.fromCssColorString('rgba(255, 0, 0, .3)'), // 错误（自交）面颜色
- ERROR_LINE: Cesium.Color.fromCssColorString('rgba(255, 0, 0, 1)'), // 错误（自交）线颜色
- }
-
- // ============ 发布订阅机制 ============
-
- // 外部订阅数据变化
- subscribe(key, listener) {
- this.listeners.push({ key, listener })
- }
-
- // 通知订阅者
- notify(key, data) {
- this.listeners.filter(subscriber => subscriber.key === key).forEach(subscriber => subscriber.listener(data))
- }
-
- // ============ 绘制相关 ============
- // 编辑图斑
- editThePatch(data) {
- this.isPreviewMode = data
- }
- // 绘制
- drawTheArea(data){
- this.whetherToDraw = data
- }
- // 删除测区
- deleteTheArea(data) {
- this.isDeleteTheArea = data
- }
-
- // 开始绘制
- startDrawing() {
- if (!this.whetherToDraw) {
-
- return;
- }
-
-
- this.drawingMode = true
- this.curPolygon = new Cesium.PolygonHierarchy()
-
- // 如果还没有 DataSource，就新建一个
- if (!this.editPolygonDataSource) {
- this.editPolygonDataSource = new Cesium.CustomDataSource('editPolygonDataSource')
- this.viewer?.dataSources.add(this.editPolygonDataSource)
- }
-
- if (!this.editPolygonPointDataSource) {
- this.editPolygonPointDataSource = new Cesium.CustomDataSource('editPolygonPointDataSource')
- this.viewer?.dataSources.add(this.editPolygonPointDataSource)
- }
-
- // 清空之前的点
- this.editPolygonDataSource?.entities.removeAll()
- this.editPolygonPointDataSource?.entities.removeAll()
- }
-
- // 创建多边形实体（含边界线）
- createPolygonEntity() {
- this.polygonEntity = this.editPolygonDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.POLYGON,
- id: DrawPolygon.ENTITY_NAMES.POLYGON_ID,
- polygon: {
- hierarchy: new Cesium.CallbackProperty(() => this.curPolygon, false),
- material: DrawPolygon.COLORS.DEFAULT_POLYGON,
- outline: false,
- outlineWidth: 2,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- },
- polyline: {
- width: 2,
- material: DrawPolygon.COLORS.DEFAULT_LINE,
- clampToGround: true,
- positions: new Cesium.CallbackProperty(
- () => [...this.curPolygon.positions, this.curPolygon.positions[0]], // 闭合线
- false
- ),
- },
- })
- }
-
- // 创建端点实体
- createPointEntity(position, isAdd) {
- const pointIndex = isAdd ? this.curPolygon.positions.length - 2 : this.curPolygon.positions.length - 1
-
- this.editPolygonPointDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.POINT,
- id: `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${pointIndex}`,
- position: position.clone(),
- point: {
- pixelSize: 14,
- color: Cesium.Color.WHITE,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
- },
- customData: {
- ind: pointIndex, // 索引记录
- },
- })
-
-
- }
-
- // 添加一个点
- addPosition(position, isAdd = true) {
- // 第一个点要重复压入一次，形成动态绘制效果
- if (this.curPolygon.positions.length === 0 && isAdd) {
- this.curPolygon.positions.push(position.clone())
- }
-
- this.curPolygon.positions.push(position.clone())
-
- // 如果没有实体则创建
- if (!this.polygonEntity) {
- this.createPolygonEntity()
- }
-
- // 创建端点实体
- if (this.isPreviewMode) {
- this.createPointEntity(position, isAdd)
- }
-
- this.notify('getPoints', position)
- }
-
- // ============ 鼠标事件 ============
-
- // 鼠标左键按下（选中端点拖动）
- handleLeftDown(movement) {
- if (!this.editingMode) return
-
- const pickedEntity = this.viewer.scene.pick(movement.position)?.id
- const isPoint = pickedEntity?.name === DrawPolygon.ENTITY_NAMES.POINT
-
- if (pickedEntity && isPoint) {
- this.isDragging = true
- this.draggedEntity = pickedEntity
- this.currentDragPointPosition = this.curPolygon.positions[this.draggedEntity?.customData.ind]
- this.disableMapControl() // 禁止地图交互
- }
- }
-
- // 鼠标左键抬起（拖拽结束）
- handleLeftUp() {
- if (!(this.editingMode && this.curPolygon?.positions && this.draggedEntity)) return
-
- if (this.currentDragPointIsValid && this.isDragging) {
- // 更新点位置
- this.draggedEntity.position = this.currentDragPointPosition
- this.curPolygon.positions[this.draggedEntity?.customData.ind] = this.currentDragPointPosition
-
- // 校验多边形是否自交
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- }
-
- // 拖拽结束，恢复交互
- if (this.isDragging) {
- this.notify('getPolygonPositions', this.curPolygon.positions)
- this.isDragging = false
- this.draggedEntity = null
- this.enableMapControl()
- }
- }
-
- // 鼠标移动
- handleMouseMove(movement) {
- if (!this.drawingMode && !this.editingMode) return
-
- const cartesian = this.viewer.scene.pickPosition(movement.endPosition)
- if (!cartesian) return
-
- // 编辑模式下，拖拽点实时更新
- if (this.editingMode && this.draggedEntity?.customData) {
- this.draggedEntity.position = cartesian
- this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian
- }
-
- // 绘制模式下，实时更新最后一个点
- if (this.drawingMode && this.polygonEntity && this.curPolygon.positions.length >= 1) {
- this.curPolygon.positions.pop()
- this.curPolygon.positions.push(cartesian)
- }
-
- // 实时检查是否自交
- if (
- (this.editingMode && this.draggedEntity?.customData) ||
- (this.drawingMode && this.polygonEntity && this.curPolygon.positions.length >= 3)
- ) {
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- }
- }
-
- // 鼠标左键点击
- handleLeftClick(click) {
- this.removeMenuPopup()
- const pickedAllEntity = this.viewer.scene.drillPick(click.position).filter(i => i.id)
- const isPolygonPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
- const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
- if (this.drawingMode && !this.whetherToDraw) {
-
- return; // 阻断后续绘制逻辑
- }
- // 如果不是绘制模式
- if (!this.drawingMode) {
- if (!isPolygon) {
-
-
- this.editingMode = false
- this.editPolygonPointDataSource.entities.show = false
- return
- }
-
- if (isPolygon) {
-
- this.editingMode = true
- this.editPolygonPointDataSource.entities.show = true
- }
- return
- }
-
- // 点击闭合多边形
- if (this.curPolygon.positions.length < 4 && isPolygonPoint) {
- return
- }
-
- if (this.curPolygon.positions.length >= 4 && isPolygonPoint) {
- if (!this.drawingMode) return
-
- this.finishDrawing()
- return
- }
-
- // 添加新的点
- const cartesian = this.viewer.scene.pickPosition(click.position)
- if (!cartesian) return
-
- this.addPosition(cartesian)
- }
-
- // 鼠标右键点击（弹出菜单）
- handleRightClick(click) {
- const that = this
- if (that.drawingMode) return
- that.removeMenuPopup()
-
- const pickedAllEntity = that.viewer.scene.drillPick(click.position).filter(i => i.id)
- const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
- const isEditPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
- const {
- position: { x, y },
- } = click
-
- let pickedEntity, tooltipEvent, menuType
- if (isPolygon) {
- pickedEntity = isPolygon
- tooltipEvent = that.delPolygon
- menuType = 'polygon'
-
- } else if (isEditPoint) {
- pickedEntity = isEditPoint
- tooltipEvent = that.delPoint
- menuType = 'edit-point'
-
- }
-
- if (pickedEntity && this.isDeleteTheArea) {
- that.delPolygonPoint = pickedEntity.id
- that.menuPopup = that.createMenuPopup(menuType)
- that.menuPopup.style.transform = `translate3d(${x - 10}px, ${y - 10}px, 0)`
- that.viewer.container.appendChild(that.menuPopup)
- that.menuPopup.addEventListener('click', tooltipEvent)
- }
- }
-
- // ============ 删除相关 ============
-
- // 删除所有实体
- removeEntities() {
- if (this.editPolygonDataSource) {
- this.editPolygonDataSource.entities.removeAll()
- this.editPolygonDataSource = null
- }
-
- if (this.editPolygonPointDataSource) {
- this.editPolygonPointDataSource.entities.removeAll()
- this.editPolygonPointDataSource = null
- }
- this.editingMode = false
- this.polygonEntity = null
- this.curPolygon = null
- }
-
- // 完成绘制
- finishDrawing() {
- this.curPolygon.positions.pop()
-
- if (this.curPolygon.positions.length >= 3) {
- this.drawingMode = false
- this.editingMode = true
- this.editPolygonPointDataSource.entities.show = true
-
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- this.notify('getPolygonPositions', this.curPolygon.positions)
- }
- }
-
- // 删除多边形
- delPolygon() {
- this.removeEntities()
- this.removeMenuPopup()
- this.notify('getPolygonPositions', [])
- this.startDrawing()
- }
-
- // 删除端点
- delPoint() {
- if (this.curPolygon.positions.length <= 3) {
- this.removeMenuPopup()
- return ElMessage.warning('端点不可少于3个')
- }
- if (!this.delPolygonPoint) return
-
- this.curPolygon.positions.splice(this.delPolygonPoint.customData.ind, 1)
- this.editPolygonPointDataSource.entities.remove(this.delPolygonPoint)
- this.removeMenuPopup()
-
- // 更新剩余点索引
- this.editPolygonPointDataSource.entities.values.forEach((item, index) => {
- item.customData.ind = index
- })
-
- this.notify('getPolygonPositions', this.curPolygon.positions)
- }
-
- // ============ 工具方法 ============
-
- // 创建右键菜单
- createMenuPopup(type = 'polygon') {
- const menuPopupVBox = document.createElement('div')
- menuPopupVBox.id = 'planarPolygonEdit'
- menuPopupVBox.className = 'planar-polygon-edit-tooltip'
-
- const menuPopup = document.createElement('div')
- menuPopup.id = 'planarPolygonEditMenu'
- menuPopup.className = 'planar-polygon-edit-menu'
-
-
- const menuItems =
- type === 'polygon'
- ? [{ title: '删除测区', class: 'del-planar-polygon' }]
- : [{ title: '删除端点', class: 'del-planar-point' }]
-
- menuItems.forEach(item => {
- const titleDiv = document.createElement('div')
- titleDiv.innerText = item.title
- titleDiv.className = item.class
- menuPopup.appendChild(titleDiv)
- })
-
- this.isPreviewMode = true
- menuPopupVBox.appendChild(menuPopup)
- return menuPopupVBox
- }
-
- // 移除菜单
- removeMenuPopup() {
- const that = this
- if (that.menuPopup) {
- that.menuPopup.removeEventListener('click', that.delPolygon)
- that.menuPopup.removeEventListener('click', that.delPoint)
- that.viewer.container.removeChild(that.menuPopup)
- that.menuPopup = null
- }
- that.delPolygonPoint = null
- }
-
- // 更新多边形样式（正常/错误）
- updatePolygonAppearance(polygonColor, lineColor) {
- this.polygonEntity.polygon.material = polygonColor
- this.polygonEntity.polyline.material = lineColor
- }
-
- // 禁用地图交互
- disableMapControl() {
- const controller = this.viewer.scene.screenSpaceCameraController
- controller.enableRotate = false
- controller.enableTranslate = false
- controller.enableZoom = false
- }
-
- // 启用地图交互
- enableMapControl() {
- const controller = this.viewer.scene.screenSpaceCameraController
- controller.enableRotate = true
- controller.enableTranslate = true
- controller.enableZoom = true
- }
-
- // 检查多边形是否自交
- curDragPointIsValid(positions) {
- if (positions.length < 3) return true
-
- const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions)
- const latLngPoints = cartographics.map(cartographic => [
- Cesium.Math.toDegrees(cartographic.longitude),
- Cesium.Math.toDegrees(cartographic.latitude),
- ])
-
- // 用 turf.js 检查自交
- const poly = turf.polygon([[...latLngPoints, latLngPoints[0]]])
- const intersections = turf.kinks(poly)
-
- return intersections.features.length === 0
- }
-
- // 初始化已有多边形
- initPolygon(viewer, positions, isPurePreview = false) {
- this.initHandler(viewer)
-
- if (this.whetherToDraw) {
- this.startDrawing();
- } else {
- // 新增：不允许绘制时，确保绘制模式为 false，避免误触发
- this.drawingMode = false;
-
- }
-
- let newPosition = positions.map(item => {
- return Cesium.Cartesian3.fromDegrees(Number(item.lng), Number(item.lat), Number(item.height))
- })
-
-
- newPosition.forEach(item => {
- this.addPosition(item, false)
- })
-
- // 视角飞入区域
- const newBox = boxTransformScale(
- positions.map(item => [item.lng, item.lat]),
- 5
- )
- viewer.camera.flyTo({
- destination: Cesium.Rectangle.fromDegrees(...newBox),
- offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 0),
- duration: 0.5,
- })
-
- this.drawingMode = false
- this.editingMode = true
- }
-
- // 初始化事件处理器
- initHandler(viewer) {
- this.viewer = viewer
-
- if(this.whetherToDraw){
- this.startDrawing()
- }
-
- if (!this.handler) {
- this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
-
- // 注册鼠标事件
- const events = [
- [Cesium.ScreenSpaceEventType.LEFT_DOWN, this.handleLeftDown],
- [Cesium.ScreenSpaceEventType.LEFT_UP, this.handleLeftUp],
- [Cesium.ScreenSpaceEventType.MOUSE_MOVE, this.handleMouseMove],
- [Cesium.ScreenSpaceEventType.LEFT_CLICK, this.handleLeftClick],
- [Cesium.ScreenSpaceEventType.RIGHT_CLICK, this.handleRightClick],
- ]
-
- events.forEach(([type, handler]) => {
- this.handler.setInputAction(handler, type)
- })
- }
- }
-
- // 移除事件处理器
- removeHandler() {
- if (this.handler) {
- const eventTypes = [
- Cesium.ScreenSpaceEventType.LEFT_DOWN,
- Cesium.ScreenSpaceEventType.LEFT_UP,
- Cesium.ScreenSpaceEventType.MOUSE_MOVE,
- Cesium.ScreenSpaceEventType.LEFT_CLICK,
- Cesium.ScreenSpaceEventType.RIGHT_CLICK,
- ]
-
- eventTypes.forEach(type => {
- this.handler.removeInputAction(type)
- })
-
- this.handler.destroy()
- this.handler = null
- }
- }
-
- /**
- * 销毁实例，释放资源
- */
- destroy() {
- if (!this.viewer) return
-
- this.removeMenuPopup()
- this.removeEntities()
- this.removeHandler()
- this.enableMapControl()
- }
-}
diff --git a/applications/drone-command/src/views/layerManagement/index.vue b/applications/drone-command/src/views/layerManagement/index.vue
deleted file mode 100644
index 8ec2742..0000000
--- a/applications/drone-command/src/views/layerManagement/index.vue
+++ /dev/null
@@ -1,604 +0,0 @@
-<template>
- <basic-container>
- <div class="layerContainer">
- <div>
- <el-tabs v-model="activeType" @tab-click="handleClick">
- <el-tab-pane v-for="tab in tabData" :key="tab.type" :label="tab.name" :name="tab.type">
- </el-tab-pane>
- </el-tabs>
- </div>
- <!-- 地图 -->
- <div class="mapContainer" v-loading="isPageLoading"
- element-loading-background="rgba(0, 0, 0, 0.5)"
- element-loading-text="加载中...">
- <div class="tool-tip warning" v-show="isShowWaringTip">
- <span class="icon">
- <el-icon><WarningFilled /></el-icon>
- </span>
- <span>{{ showWarnToolTipText }}</span>
- </div>
- <div class="tool-tip" v-if="!isShowWaringTip && layerParams.addNest">
- {{ showToolTipText }}
- </div>
- <div id="layMap" class="command-cesium"></div>
- <leftList
- v-if="
- !layerParams.addNest &&
- !layerParams.editNest &&
- !layerParams.addFolder &&
- !layerParams.editFolder
- "
- @update:coverData="handleCoverDataUpdate"
- @update:deitData="handleEdit"
- @update:editFolder="handleFolder"
- :activeName="activeName"
- @newFencesMethods="newFencesMethods"
- :reset-check="resetCheck"
- ></leftList>
- <rightEdit
- v-if="layerParams.addNest || layerParams.editNest"
- @callParentMethod="parentMethod"
- @update:loading="handleLoadingChange"
- ></rightEdit>
- <folderFile
- @refreshMethod="refreshMethod"
- :activeName="activeName"
- @callParentMethod="parentMethod"
- v-if="layerParams.addFolder || layerParams.editFolder"
- ></folderFile>
- </div>
- </div>
- </basic-container>
-</template>
-
-<script setup>
-import EventBus from '@/utils/eventBus';
-import * as turf from '@turf/turf';
-import { dataFolderApi } from '@/api/layer/index';
-import folderFile from '@/views/layerManagement/components/folderFile.vue';
-import { parseGeoDataToPositions } from '@/utils/geoParseUtil';
-import { flyVisual } from '@ztzf/utils';
-import rightEdit from '@/views/layerManagement/components/rightEdit.vue';
-import leftList from '@/views/layerManagement/components/leftList.vue';
-import { DrawPolygon } from '@/views/layerManagement/components/utils';
-import * as Cesium from 'cesium';
-import { PublicCesium } from '@/utils/cesium/publicCesium';
-import _, { cloneDeep, throttle } from 'lodash';
-
-import { provide } from 'vue';
-import { useStore } from 'vuex';
-const isProd = import.meta.env.VITE_APP_ENV === 'production'
-const store = useStore();
-const userInfo = computed(() => store.getters.userInfo);
-const areaCode = userInfo.value?.detail?.areaCode || '';
-const showToolTipText = ref('点击地图生成测绘区域')
-const showWarnToolTipText = ref('测区不支持交叉面')
-// 红色警告交叉面提示窗
-const isShowWaringTip = ref(false);
-const activeName = ref('自定义识别区');
-const activeType = ref('0');
-let tbJwdList = [];
-const selectDataList = ref([]);
-// 当前面位置信息
-let curPolygonPosition = [];
-const tabData = computed(() => {
- const allTabs = [
- {
- name: '自定义识别区',
- type: '0',
- },
- {
- name: '自定义禁飞区',
- type: '1',
- },
- {
- name: '国土空间规划',
- type: '2',
- },
- ];
-
- // 如果是生产环境，只返回自定义识别区
- if (isProd) {
- return allTabs.filter(tab => tab.type === '0');
- }
- return allTabs;
-});
-const layerParams = ref({
- addNest: false,
- editNest: false,
- editDetailData: null,
- total_count: 0,
- total_area: 0,
- polygonPosition: null,
- decideWhetherToAddOrEdit: null, //新增or编辑围栏
- addAnEditingFolder: null, //新增or编辑文件夹
- addFolder: false,
- editFolder: false,
- folderOption: [], //文件夹选项
- fenceType: 1,
- fenceArea: 0, //围栏面积
- fileType: 1, //文件夹类型
- editFolderData: null,
- editingIsProhibited: false, //禁止编辑
- isDetailShow: false,
- isSingleLocating:false , //是否是单个定位
- currentLocationFolderId:null,
- crossSurface:false,//是否交叉面
-});
-const resetCheck = ref(false);
-const handleClick = tab => {
- const clickedTab = tabData.value.find(item => item.type === tab.paneName);
- activeType.value = clickedTab.type;
- activeName.value = clickedTab.name;
- getdataFolderApi();
- parentMethod();
- handleCoverDataUpdate([])
- layerParams.value.addNest = false
- layerParams.value.editNest = false
- layerParams.value.addFolder = false
- layerParams.value.editFolder = false
- resetCheck.value = !resetCheck.value;
-
-};
-const refreshMethod = () => {
- getdataFolderApi();
-};
-const getdataFolderApi = () => {
- let id;
- if (activeName.value === '自定义识别区') {
- id = 1;
- } else if (activeName.value === '自定义禁飞区') {
- id = 2;
- } else {
- id = 3;
- }
- dataFolderApi(id).then(res => {
- const originalFolderList = res.data.data || [];
- const formattedFolderOption = originalFolderList.map(folder => ({
- label: folder.name,
- value: folder.id.toString(),
- }));
- layerParams.value.folderOption = formattedFolderOption;
- });
-};
-
-// 编辑围栏区域
-const handleEdit = val => {
- viewer.entities.removeAll();
- layerParams.value.editDetailData = val;
- drawPolygonExample.editThePatch(true);
- drawPolygonExample.drawTheArea(true);
- let geoDataArr = JSON.parse(val.geo_data);
- if (geoDataArr.length > 0) {
- geoDataArr.pop();
- }
- const processedGeoData = JSON.stringify(geoDataArr);
- //geo_data 解析坐标
- const positions = parseGeoDataToPositions(processedGeoData, val.altitude);
- if (positions.length < 3) return; // 少于3个点无法构成多边形
- drawPolygonExample.initPolygon(viewer, positions, true);
-};
-// 编辑文件夹
-const handleFolder = val => {
-parentMethod()
- selectDataList.value = val.children;
- if (selectDataList.value?.length > 0) {
- loadDataToMap(selectDataList.value);
- } else {
- viewer.entities.removeAll();
- }
- layerParams.value.editFolderData = val;
-};
-// 新增开启绘制
-const newFencesMethods = () => {
- viewer.entities.removeAll();
- drawPolygonExample.initHandler(viewer);
- drawPolygonExample.drawTheArea(true);
- drawPolygonExample.startDrawing();
-};
-// 清除地图数据
-const parentMethod = () => {
- drawPolygonExample.delPolygon();
- drawPolygonExample.drawTheArea(false);
- viewer.entities.removeAll();
-};
-// 点击显示区域
-const handleCoverDataUpdate = data => {
- selectDataList.value = data;
- if (selectDataList.value?.length > 0) {
- loadDataToMap(selectDataList.value);
- } else {
- viewer.entities.removeAll();
- }
-};
-const loadDataToMap = dataList => {
- if (!viewer) return;
- viewer.entities.removeAll();
- // 存储所有有效坐标
- tbJwdList = [];
- dataList.forEach(item => {
- let positions = parseGeoDataToPositions(item.geo_data, item.altitude);
- if (positions.length < 3) {
- console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
- return;
- }
-
- tbJwdList.push(...positions);
- let degreesArray = [];
- positions.forEach(pos => {
- degreesArray.push(pos.lng, pos.lat, pos.height);
- });
- const colorMap = {
- 1: Cesium.Color.fromCssColorString('#00ff06').withAlpha(0.5), // 绿色（填充色）
- 2: Cesium.Color.fromCssColorString('#ff0000').withAlpha(0.5), // 红色（填充色）
- 3: Cesium.Color.fromCssColorString('#00ffea').withAlpha(0.5), // 青色（填充色）
- // 边框色：去掉透明度，保持纯色
- border1: Cesium.Color.fromCssColorString('#00ff06'),
- border2: Cesium.Color.fromCssColorString('#ff0000'),
- border3: Cesium.Color.fromCssColorString('#00ffea'),
- };
- const fillColor = item.category_id === 1
- ? colorMap[1]
- : item.category_id === 2
- ? colorMap[2]
- : item.category_id === 3
- ? colorMap[3]
- : Cesium.Color.YELLOW.withAlpha(0.5);
-
- const borderColor = item.category_id === 1
- ? colorMap.border1
- : item.category_id === 2
- ? colorMap.border2
- : item.category_id === 3
- ? colorMap.border3
- : Cesium.Color.YELLOW;
- viewer.entities.add({
- id: `polygon_${item.id}`,
- customType: 'fence_polygon',
- customInfo: item,
- polygon: {
- hierarchy: new Cesium.PolygonHierarchy(
- Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray)
- ),
- material:fillColor, // 填充色
- outline: true, // 显示边框
- outlineColor: borderColor, // 边框色
- outlineWidth: 2, // 边框宽度
- clampToGround: true, // 贴地显示
- },
-
- polyline: {
- positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
- width: 2,
- material:borderColor,
- clampToGround: true,
- },
- zIndex: 99,
- });
- });
- if (!layerParams.value.isSingleLocating) {
- focusOnAllFeatures();
- }
- viewInstance.value?.addLeftClickEvent(null, handleFenceClick);
-};
-const focusOnAllFeatures = () => {
- if (tbJwdList.length === 0 || !viewer) return;
-
- // 判断是否有指定定位的文件夹
- if (layerParams.value.currentLocationFolderId) {
- // 筛选当前文件夹下的所有子节点坐标
- const targetFolderPositions = selectDataList.value
- .filter(item => item.folder_id === layerParams.value.currentLocationFolderId)
- .flatMap(item => {
- const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
- return positions.length >= 3 ? positions : [];
- });
-
- if (targetFolderPositions.length > 0) {
- const positionsData = targetFolderPositions.map(pos => [
- pos.lng,
- pos.lat,
- pos.height || 0
- ]);
- flyVisual({
- positionsData,
- viewer,
- multiple: activeName.value === '国土空间规划' ? 13 : 10,
- pitch: -90
- });
- return; // 仅聚焦当前文件夹，结束方法
- }
- }
-
- // 无指定文件夹时，聚焦所有选中数据
- const positionsData = tbJwdList.map(pos => [
- pos.lng,
- pos.lat,
- pos.height || 0
- ]);
- flyVisual({
- positionsData,
- viewer,
- multiple: activeName.value === '国土空间规划' ? 13 : 4,
- pitch: -90
- });
-};
-// 区域点击显示详细信息
-const handleFenceClick = movement => {
-if(layerParams.value.editFolder) return
- if (!viewer) return;
- layerParams.value.editDetailData = null;
-
-if(activeName.value !== '国土空间规划') {
- const pickedObjects = viewer.scene.drillPick(movement.position, 10);
- // 遍历所有被点击的实体，找到围栏类型（customType: 'fence_polygon'）
- let selectedEntity = null;
- for (let i = 0; i < pickedObjects.length; i++) {
- const pick = pickedObjects[i];
- if (Cesium.defined(pick.id) && pick.id?.customType === 'fence_polygon') {
- selectedEntity = pick.id;
- break;
- }
- }
- // viewer.entities.values.forEach(entity => {
- // if (entity.customType === 'fence_polygon') {
- // entity.polygon.material = entity === selectedEntity
- // ? Cesium.Color.RED.withAlpha(0.5)
- // : Cesium.Color.YELLOW.withAlpha(0.5);
- // }
- // });
- if (selectedEntity) {
- const selectedData = selectedEntity.customInfo;
- if (activeName.value !== '国土空间规划') {
- layerParams.value.editNest = true;
- layerParams.value.decideWhetherToAddOrEdit = 2;
- if (activeName.value === '自定义识别区') {
- layerParams.value.fenceType = 1;
- } else if (activeName.value === '自定义禁飞区') {
- layerParams.value.fenceType = 2;
- }
- layerParams.value.editDetailData = selectedData;
- layerParams.value.fenceArea = selectedData.area;
- layerParams.value.editingIsProhibited = true;
- }
- }
-}
-
-};
-let publicCesiumInstance = null;
-let viewer = null;
-const viewInstance = shallowRef(null);
-const drawPolygonExample = new DrawPolygon();
-// 地图初始化
-const initMap = () => {
- publicCesiumInstance = new PublicCesium({
- dom: 'layMap',
- flatMode: false,
- terrain: true,
- layerMode: 4, //轮廓线
- dockOptions:{showDock:true}//机巢
- });
- viewer = publicCesiumInstance.getViewer();
- viewInstance.value = publicCesiumInstance;
- viewInstance.value?.flyToContour();
- const nanChangPosition = Cesium.Cartesian3.fromDegrees(
- 115.892151, // 经度
- 28.676493, // 纬度
- 15000 // 相机高度
- );
-
- // 执行相机飞行
- viewer.camera.flyTo({
- destination: nanChangPosition,
- duration: 0,
- orientation: {
- heading: Cesium.Math.toRadians(0),
- pitch: Cesium.Math.toRadians(-90),
- roll: 0,
- },
- });
-};
-// 编辑/绘制
-const loadPlanarRoute = async (positions = null, save = false) => {
- if (positions) {
- curPolygonPosition = positions.map(item => {
- let cartographic = Cesium.Cartographic.fromCartesian(item);
- let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
- let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
- let height = Cesium.Math.toDegrees(cartographic.height); //高度
- return {
- lng: _.round(lng, 6),
- lat: _.round(lat, 6),
- height: _.round(height, 6),
- };
- });
- }
- let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
- if(polygon.length ===0){
- isShowWaringTip.value = false
- }
- if(polygon.length > 0 && !isShowWaringTip.value){
- showToolTipText.value = '测绘区域已绘制完成'
- } else {
- showToolTipText.value = '点击地图生成测绘区域'
- }
-
- if(polygon.length > 0){
- polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat])
- }
- let polygonString = JSON.stringify(polygon);
- layerParams.value.polygonPosition = polygon.length > 0 ? polygonString : null;
- if (polygon.length >= 3) {
- // 确保多边形闭合：最后一个点与第一个点一致
- const firstPoint = polygon[0];
- const lastPoint = polygon[polygon.length - 1];
- const isClosed =
- _.round(firstPoint[0], 6) === _.round(lastPoint[0], 6) &&
- _.round(firstPoint[1], 6) === _.round(lastPoint[1], 6);
- const closedPolygon = isClosed ? polygon : [...polygon, firstPoint];
- const turfPolygon = turf.polygon([closedPolygon]);
- const area = _.round(turf.area(turfPolygon), 2);
- if (area / 1000000 < 50) {
- layerParams.value.fenceArea = area;
- } else {
- layerParams.value.fenceArea = area;
- isShowWaringTip.value = true
- showWarnToolTipText.value = '自定义禁飞区不能超过50平方公里'
- }
- } else {
- layerParams.value.fenceArea = 0;
- }
-};
-drawPolygonExample.subscribe('getShowWaringTip', data => {
- isShowWaringTip.value = data;
- showWarnToolTipText.value = '测区不支持交叉面'
- layerParams.value.crossSurface = data
-});
-const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
-drawPolygonExample.subscribe('getPolygonPositions', data => {
- throttleLoadPlanarRoute(data);
-});
-
-// 地图销毁
-const destroyMap = () => {
- drawPolygonExample.destroy();
- if (viewer) {
- viewer.destroy();
- viewer = null;
- }
- publicCesiumInstance = null;
-};
-// 阻止浏览器默认
-const preventDefault = event => {
- event.preventDefault();
- return;
-};
-const cesiumContextMenu = (isAdd = true) => {
- let cesium = document.getElementById('layMap');
- if (!cesium) return;
- if (isAdd) {
- cesium.addEventListener('contextmenu', preventDefault);
- } else {
- cesium.removeEventListener('contextmenu', preventDefault);
- }
-};
-// 添加loading
-const isPageLoading = ref(false);
-const handleLoadingChange = (status) => {
- isPageLoading.value = status;
-};
-provide('layerParams', layerParams);
-const focusOnNodeHandler = nodeData => {
- focusOnNode(nodeData);
-};
-onMounted(() => {
- initMap();
- cesiumContextMenu();
- getdataFolderApi();
- // 监听定位事件
- EventBus.on('focusOnNode', focusOnNodeHandler);
- EventBus.on('deleteMapEntityById', deleteMapEntityById);
- EventBus.on('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
-});
-
-//定位到指定节点
-const focusOnNode = (nodeData) => {
- if (!viewer || !nodeData?.geo_data) return;
-
- // 解析节点坐标
- const positions = parseGeoDataToPositions(nodeData.geo_data, nodeData.altitude);
- if (positions.length < 3) return;
-
- // level 2 节点走全量聚焦，level 3 节点走单个聚焦
- if (nodeData.level === 2) {
- focusOnAllFeatures();
- } else {
- flyVisual({
- positionsData: positions.map(pos => [pos.lng, pos.lat, pos.height || 0]),
- viewer,
- multiple: activeName.value === '国土空间规划' ? 13 : 7, // 缩放倍数
- pitch: -90
- });
- }
-};
-onBeforeUnmount(() => {
- destroyMap();
- cesiumContextMenu(false);
- EventBus.off('focusOnNode', focusOnNodeHandler);
- EventBus.off('deleteMapEntityById', deleteMapEntityById);
- EventBus.off('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
-});
-// 删除单个地图实体
-const deleteMapEntityById = entityId => {
- if (!viewer) return;
- const entity = viewer.entities.getById(`polygon_${entityId}`);
- if (entity) {
- viewer.entities.remove(entity);
- }
- // 更新选中数据列表
- selectDataList.value = selectDataList.value.filter(item => item.id !== entityId);
-};
-// 删除文件夹下所有地图实体
-const deleteMapEntitiesByFolderId = folderId => {
- if (!viewer) return;
- const entitiesToDelete = viewer.entities.values.filter(entity => {
- return entity.customInfo?.folder_id === folderId;
- });
- entitiesToDelete.forEach(entity => {
- viewer.entities.remove(entity);
- });
- // 更新选中数据列表
- selectDataList.value = selectDataList.value.filter(item => item.folder_id !== folderId);
- getdataFolderApi()
-};
-</script>
-
-<style scoped lang="scss">
-.layerContainer {
- width: 100%;
- height: 90vh;
-}
-.mapContainer {
- position: relative;
- width: 100%;
- height: 80vh;
- .warning {
- position: absolute;
- top: 234px;
- color: #fff;
- background: rgba(140, 0, 0, 0.4) !important;
-
- .icon {
- display: flex;
- align-items: center;
- color: #ff1f1f;
- }
- }
- #layMap {
- width: 100%;
- height: 100%;
- border-radius: 8px 8px 8px 8px;
- overflow: hidden;
- }
- .tool-tip {
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- width: 800px;
- height: 64px;
- right: 430px;
- top: 60px;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-size: 18px;
- color: #ffffff;
-
- background: rgba(11, 31, 58, 0.7);
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
-}
-</style>
diff --git a/applications/task-work-order/env/.env b/applications/task-work-order/env/.env
index b91a161..5894dcc 100644
--- a/applications/task-work-order/env/.env
+++ b/applications/task-work-order/env/.env
@@ -21,3 +21,5 @@
# 预览地址 previewURL
VITE_APP_PREVIEW_URL=http://192.168.1.204:8012
+
+VITE_APP_TERRAIN_URL=https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ztzf_c_uas/
diff --git a/applications/task-work-order/env/.env.development b/applications/task-work-order/env/.env.development
index ed8d14a..15492be 100644
--- a/applications/task-work-order/env/.env.development
+++ b/applications/task-work-order/env/.env.development
@@ -31,8 +31,6 @@
# 航线文件地址
VITE_APP_AIRLINE_URL = https://wrj.shuixiongit.com/minio/cloud-bucket
-# 图片存放地址
-VITE_APP_TERRAIN_URL = https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ztzf_terrain/
# 行政区划存放地址
VITE_APP_REGION_URL = https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ztzf_region
# 算法仓库图片地址
diff --git a/applications/task-work-order/src/components/PlaybackVideo/PlaybackVideo.vue b/applications/task-work-order/src/components/PlaybackVideo/PlaybackVideo.vue
deleted file mode 100644
index 9cabfa2..0000000
--- a/applications/task-work-order/src/components/PlaybackVideo/PlaybackVideo.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
- <el-dialog
- class="work-dialog-video playback-dialog"
- v-model="isShow"
- append-to-body
- :close-on-click-modal="false"
- :destroy-on-close="true"
- :show-close="false"
- >
- <template #header>
- <div class="title">视频回放</div>
-
- <div class="close" @click="isShow = false"></div>
- </template>
-
- <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.7)">
- <div class="mpa-container">
- <MapContainer ref="mapContainerEle" />
- </div>
-
- <div class="video-player-container">
- <VideoPlayer ref="videoPlayerEle" />
- </div>
-
- <div v-show="photoEleShow" class="photo-list-container">
- <PhotoList ref="photoListEle" />
- </div>
- </div>
- </el-dialog>
-</template>
-
-<script setup>
-import PhotoList from '@/components/PlaybackVideo/components/PhotoList.vue'
-import VideoPlayer from '@/components/PlaybackVideo/components/VideoPlayer.vue'
-import MapContainer from '@/components/PlaybackVideo/components/MapContainer.vue'
-import { getWaylinejobLiveRecordPage, findFlightLogInfoByJobId, aiImagesPage } from '@/api/playback/'
-const isShow = defineModel('show', {
- type: Boolean,
- default: true,
-})
-
-const detailData = defineModel('detailData', {
- type: Object,
- default: () => ({}),
-})
-
-const props = defineProps(['detailsData'])
-
-const loading = ref(true)
-const photoEleShow = ref(false)
-
-const positionData = ref(null)
-const attachmentData = ref(null)
-
-const mapContainerEle = ref(null)
-const videoPlayerEle = ref(null)
-const photoListEle = ref(null)
-
-const jobId = inject('jobId')
-
-provide('videoData', detailData)
-provide('positionData', positionData)
-provide('attachmentData', attachmentData)
-
-watch(isShow, newVal => {
- if (newVal) {
- init()
- }
-})
-
-const init = async () => {
- loading.value = true
- await nextTick()
-
- Promise.all([
- findFlightLogInfoByJobId({ jobId: jobId.value }),
- aiImagesPage({ size: 30, current: 1 }, { size: 30, current: 1, wayLineJobId: jobId.value, resultTypes: [0, 2] }),
- ]).then(([positionDetails, attachmentDetails]) => {
- let arr = positionDetails.data.data.filter(item => {
- return item.create_time >= detailData.value.start_time && item.create_time <= detailData.value.end_time
- })
-
- positionData.value = arr.sort((a, b) => a.create_time - b.create_time)
-
- attachmentData.value =
- attachmentDetails.data.data.records
- .filter(item => {
- return (
- item.metadata.createdTime >= detailData.value.start_time &&
- item.metadata.createdTime <= detailData.value.end_time
- )
- })
- .map(item => ({
- ...item,
- metadata: {
- ...item.metadata,
- createdTime: item.metadata.createdTime,
- },
- })) || []
-
- photoEleShow.value = attachmentData.value.length > 0
-
- videoPlayerEle.value.init(detailData.value, attachmentData.value)
- mapContainerEle.value.init(positionData.value, props.detailsData, props.taskData)
- photoListEle.value.init(detailData.value, attachmentData.value)
-
- loading.value = false
- })
-}
-</script>
-
-<style lang="scss" scoped>
-.mpa-container {
- position: absolute;
- top: 58px;
- left: 10px;
- width: 338px;
- height: 206px;
- z-index: 1;
- border-radius: 8px;
- overflow: hidden;
-}
-
-.video-player-container {
- width: 100%;
- height: 100%;
-}
-
-.photo-list-container {
- position: absolute;
- top: 58px;
- right: 10px;
- width: 338px;
- height: calc(100% - 116px);
- z-index: 1;
- border-radius: 8px;
- background: rgba(2, 2, 2, 0.6);
- overflow: hidden;
- backdrop-filter: blur(13.7px);
-}
-</style>
diff --git a/applications/task-work-order/src/components/PlaybackVideo/components/MapContainer.vue b/applications/task-work-order/src/components/PlaybackVideo/components/MapContainer.vue
deleted file mode 100644
index 621394c..0000000
--- a/applications/task-work-order/src/components/PlaybackVideo/components/MapContainer.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<template>
- <div class="work-cesium map-box" id="map">
- <PlanarRouteLineList
- :curRouteLineData="curRouteLineData"
- @routeLineListClick="routeLineListClick"
- :customClass="'airline-list'"
- />
- </div>
-</template>
-
-<script setup>
-import _ from 'lodash'
-import { useRouteLine } from '@/hooks/useRouteLine/useRouteLine.js'
-// import { getWaylineSplitApi } from '@/api/routePlan'
-
-import PlanarRouteLineList from '@/components/PlanarRouteLineList/PlanarRouteLineList.vue'
-
-import { flyVisual } from '@ztzf/utils'
-
-import * as Cesium from 'cesium'
-import { PublicCesium } from '@/utils/cesium/publicCesium'
-import { ArrowLineMaterialProperty } from '@/utils/cesium/Material'
-import aircraftGltf from '@/assets/gltf/aircraft.gltf'
-import EventBus from '@/utils/eventBus'
-
-// 加载航线hook
-const {
- curRouteLineData,
- routeLineListClick,
- initViewer,
- renderPreviewLine,
- removePreviewLine,
- resetCurRouteLineData,
- renderDroneRouteLine,
-} = useRouteLine()
-
-let viewer = null
-let publicCesiumInstance = null
-
-const initMap = () => {
- publicCesiumInstance = new PublicCesium({
- dom: 'map',
- terrain: true,
- flatMode: false,
- layerMode: 4,
- contour: true,
- })
-
- viewer = publicCesiumInstance.getViewer()
- viewer.scene.globe.depthTestAgainstTerrain = true
-
- initViewer(viewer)
-}
-
-// 绘制线和飞行
-const drawLine = async detailsData => {
- detailsData.way_lines.forEach(async item => {
- // if (item.is_split) {
- // getWaylineSplitApi(item.workspace_id).then(async res => {
- // // 大航线拆分
- // let result = res.data.data
- // littleFileLine.value = result.wayline_file_list
- // let bigPolygonList = await renderPreviewLine(
- // import.meta.env.VITE_APP_AIRLINE_URL + result.object_key,
- // result.wayline_type,
- // result.wayline_file_list
- // )
- // emit('wayLineFileSelected', bigPolygonList)
- // })
- // } else {
- await renderPreviewLine(item.url, item.wayline_type)
- // }
- })
-}
-
-let arrowLineMaterialProperty = new ArrowLineMaterialProperty({
- color: new Cesium.Color(128 / 255, 215 / 255, 255 / 255, 1),
- directionColor: new Cesium.Color(1, 1, 1, 1),
- outlineColor: new Cesium.Color(1, 1, 1, 1),
- outlineWidth: 0,
- speed: 5,
-})
-
-let droneEntity = null
-let planarRouteEntity = null
-let sampledPosition
-
-const initPlanarRoute = data => {
- flyVisual({ positionsData: data.map(i => [i.longitude, i.latitude, i.height]), viewer, multiple: 3.2 })
-
- if (planarRouteEntity) {
- viewer.entities.remove(planarRouteEntity)
- planarRouteEntity = null
- }
-
- planarRouteEntity = viewer.entities.add({
- polyline: {
- width: 4,
- positions: data.map(i =>
- Cesium.Cartesian3.fromDegrees(Number(i.longitude), Number(i.latitude), Number(i.height))
- ),
- material: arrowLineMaterialProperty,
- clampToGround: false,
- },
- })
-}
-
-let startJulian = null
-let endJulian = null
-
-const init = async (positionData, detailsData) => {
- await nextTick()
-
- if (!viewer) initMap()
-
- resetCurRouteLineData()
- removePreviewLine()
-
- drawLine(detailsData)
-
- // initPlanarRoute(positionData)
-
- // sampledPosition = new Cesium.SampledPositionProperty()
- // positionData.forEach(item => {
- // const time = toJulianDate(item.create_time)
- // const pos = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, item.height)
- // sampledPosition.addSample(time, pos)
- // })
-
- // // 3️⃣ 设置 Clock
- // startJulian = toJulianDate(positionData[0].create_time)
- // endJulian = toJulianDate(positionData[positionData.length - 1].create_time)
- // viewer.clock.startTime = startJulian.clone()
- // viewer.clock.stopTime = endJulian.clone()
- // viewer.clock.currentTime = startJulian.clone()
- // viewer.clock.multiplier = 1
- // viewer.clock.shouldAnimate = false
- // viewer.clock.clockRange = Cesium.ClockRange.CLAMPED
-
- // if (droneEntity) {
- // viewer.entities.remove(droneEntity)
- // droneEntity = null
- // }
-
- // droneEntity = viewer.entities.add({
- // availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: startJulian, stop: endJulian })]),
- // position: sampledPosition,
- // model: {
- // uri: aircraftGltf, //注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
- // scale: 1, //缩放比例
- // minimumPixelSize: 64, //最小像素大小，可以避免太小看不见
- // maximumScale: 128,
- // },
- // })
-}
-
-// ========== 播放/暂停/倍速/重播 控制 ==========
-const mapAnimationPlay = () => {
- if (!viewer) return
- viewer.clock.shouldAnimate = true
-}
-
-const mapAnimationPause = () => {
- if (!viewer) return
- viewer.clock.shouldAnimate = false
-}
-
-const mapAnimationSetSpeed = speed => {
- if (!viewer) return
- viewer.clock.multiplier = speed
-}
-
-const mapAnimationReplay = () => {
- if (!viewer) return
- viewer.clock.currentTime = startJulian.clone()
- viewer.clock.shouldAnimate = true
-}
-
-// 传入一个时间，跳转到该时间点
-const mapAnimationSetCurrentTime = time => {
- if (!viewer) return
- // 支持传入 Date 或毫秒数
- let julian = toJulianDate(time)
-
- viewer.clock.currentTime = julian
- // 如果希望暂停时也能直接跳过去：强制暂停后更新
- // viewer.clock.shouldAnimate = false
-}
-
-// 转换函数：毫秒 → JulianDate
-function toJulianDate(ms) {
- return Cesium.JulianDate.fromDate(new Date(ms))
-}
-
-onMounted(() => {
- // EventBus.on('mapAnimationPlay', mapAnimationPlay)
- // EventBus.on('mapAnimationPause', mapAnimationPause)
- // EventBus.on('mapAnimationSetSpeed', mapAnimationSetSpeed)
- // EventBus.on('mapAnimationReplay', mapAnimationReplay)
- // EventBus.on('mapAnimationSetCurrentTime', mapAnimationSetCurrentTime)
-})
-
-onBeforeUnmount(() => {
- droneEntity && viewer.entities.remove(droneEntity)
- droneEntity = null
- viewer?.entities?.removeAll()
- publicCesiumInstance?.viewerDestroy()
- publicCesiumInstance = null
- viewer = null
- // EventBus.off('mapAnimationPlay', mapAnimationPlay)
- // EventBus.off('mapAnimationPause', mapAnimationPause)
- // EventBus.off('mapAnimationSetSpeed', mapAnimationSetSpeed)
- // EventBus.off('mapAnimationReplay', mapAnimationReplay)
- // EventBus.off('mapAnimationSetCurrentTime', mapAnimationSetCurrentTime)
-})
-
-defineExpose({
- init,
-})
-</script>
-
-<style lang="scss" scoped>
-.map-box {
- width: 100%;
- height: 100%;
-}
-</style>
diff --git a/applications/task-work-order/src/components/PlaybackVideo/components/PhotoList.vue b/applications/task-work-order/src/components/PlaybackVideo/components/PhotoList.vue
deleted file mode 100644
index 4b1eefc..0000000
--- a/applications/task-work-order/src/components/PlaybackVideo/components/PhotoList.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
- <div class="photo-container">
- <div class="photo-statistics">
- <div class="label">事件照片</div>
- <div class="num">{{ eventsPhotoArr.length }}</div>
- </div>
- <div class="photo-statistics">
- <div class="label">照片总数</div>
- <div class="num">{{ allPhotoArr.length }}</div>
- </div>
- <div class="list-box">
- <div class="item" v-for="(item, ind) in allPhotoArr" :key="ind">
- <el-image
- style="width: 100%; height: 100%"
- :src="item.smallUrl"
- :preview-src-list="[item.showUrl]"
- fit="cover"
- preview-teleported
- ></el-image>
-
- <div class="bottom-box">
- <div class="time">{{ item.metadata.createdTime }}</div>
-
- <div
- class="status"
- :class="EVENT_STATUS_CLASSES[item.status]"
- v-if="EVENT_STATUS_CLASSES[item.status]"
- >
- {{ EVENT_STATUS_LABELS[item.status] }}
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script setup>
-import { getShowImg, getSmallImg } from '@/utils/util'
-import { EVENT_STATUS_LABELS, EVENT_STATUS_CLASSES } from '@ztzf/constants'
-
-const eventsPhotoArr = ref([])
-const allPhotoArr = ref([])
-
-const init = async (vData, pData) => {
- await nextTick()
-
- allPhotoArr.value = pData.map(item => ({
- ...item,
- showUrl: getShowImg(item.link),
- smallUrl: getSmallImg(item.link),
- metadata: {
- ...item.metadata,
- createdTime: formatTimeDiff(item.metadata.createdTime, vData.start_time),
- },
- }))
- eventsPhotoArr.value = pData.filter(item => item.resultType === 2) || []
-}
-
-defineExpose({
- init,
-})
-
-function formatTimeDiff(timestamp1, timestamp2) {
- // 计算差值（毫秒）
- const diffMs = Math.abs(timestamp1 - timestamp2)
-
- // 转换为秒
- const totalSeconds = Math.floor(diffMs / 1000)
-
- // 计算小时、分钟、秒
- const hours = Math.floor(totalSeconds / 3600)
- const minutes = Math.floor((totalSeconds % 3600) / 60)
- const seconds = totalSeconds % 60
-
- // 格式化为两位数
- const pad = num => num.toString().padStart(2, '0')
-
- // 根据是否有小时决定格式
- if (hours > 0) {
- return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
- } else {
- return `${pad(minutes)}:${pad(seconds)}`
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.photo-container {
- padding: 0 16px 16px;
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- color: #fff;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- font-style: normal;
- text-transform: none;
-
- .photo-statistics {
- display: flex;
- align-items: center;
- justify-content: space-between;
- line-height: 44px;
- border-bottom: 1px solid rgba(255, 255, 255, 0.11);
- padding: 0 30px; // 添加内边距让内容有间距
- box-sizing: border-box; // 确保边框包含在宽度内
- border-radius: 4px; // 添加圆角让边框更明显
- background: rgba(0, 0, 0, 0.3); // 添加背景色让边框更清晰
-
- .num {
- color: #ff974d;
- }
- }
-
- .list-box {
- margin-top: 16px;
- height: 0;
- flex: 1;
- overflow: hidden;
- overflow-y: auto;
-
- .item {
- margin-top: 10px;
- position: relative;
- width: 100%;
- height: 190px;
- background: #ff974d;
- border-radius: 8px 8px 8px 8px;
- overflow: hidden;
-
- &:first-child {
- margin-top: 0;
- }
-
- .bottom-box {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px;
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 32px;
- width: 305px;
- background: rgba(20, 18, 18, 0.8);
- border-radius: 0 0 8px 8px;
-
- .status {
- padding: 0 8px;
- line-height: 24px;
- border-radius: 4px 4px 4px 4px;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- text-align: center;
- font-style: normal;
- text-transform: none;
- }
-
- // 待处理
- .pending {
- background: #ff7411;
- }
- // 待审核
- .reviewed {
- background: #ff472f;
- }
- // 处理中
- .processing {
- background: #ffff61;
- }
- // 已完成
- .done {
- background: #06d957;
- }
- // 已完结
- .ended {
- background: #06d957;
- }
- }
- }
- }
-}
-</style>
diff --git a/applications/task-work-order/src/components/PlaybackVideo/components/VideoPlayer.vue b/applications/task-work-order/src/components/PlaybackVideo/components/VideoPlayer.vue
deleted file mode 100644
index 1e2a700..0000000
--- a/applications/task-work-order/src/components/PlaybackVideo/components/VideoPlayer.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
- <video ref="videoEle" class="video-js video-container"></video>
-</template>
-
-<script setup>
-// import videoSrc from '@/assets/mp4/DJI_20250917140642_0001_V.mp4'
-import { inputEmits } from 'element-plus'
-import videojs from 'video.js'
-import zhCN from 'video.js/dist/lang/zh-CN.json'
-// 添加中文语言支持
-videojs.addLanguage('zh-CN', zhCN)
-import 'videojs-markers'
-import EventBus from '@/utils/eventBus'
-
-const videoEle = ref(null)
-
-let player = null
-
-const videoData = inject('videoData')
-
-const init = async (vData, pData) => {
- await nextTick()
-
- if (!player) {
- player = videojs(videoEle.value, {
- html5: {
- preload: 'auto', // 可选值：'auto', 'metadata', 'none'
- },
- controls: true, // 启用默认控件
- playbackRates: [0.5, 1, 1.5, 2],
- })
- }
-
- player.src(vData.play_url)
-
- player.on('play', play)
-
- player.on('pause', pause)
-
- player.on('ratechange', ratechange)
-
- player.on('error', error)
-
- player.controlBar.playToggle.on('click', click)
-
- player.on('seeked', seeked)
-
- console.log(pData, vData, 1)
-
- pData.length > 0 &&
- player.markers({
- showTime: false,
- showTooltips: true,
- markerStyle: {
- 'width': '6px',
- 'background-color': 'red',
- },
- markerTip: {
- display: false,
- },
- onMarkerClick: marker => {
- console.log(`点击了标记：${marker.text}`)
- },
- onMarkerReached: marker => {
- console.log(`到达标记：${marker.text}`)
- },
-
- markers: pData.map((item, ind) => {
- let className = 'ended'
-
- switch (item.status) {
- case 0:
- className = 'pending'
- break
-
- case 2:
- className = 'reviewed'
- break
-
- case 3:
- className = 'processing'
- break
-
- case 4:
- className = 'done'
- break
-
- case 5:
- className = 'ended'
- break
-
- default:
- className = 'noneEvent'
- break
- }
-
- return {
- time: getTimestampDiffInSeconds(item.metadata.createdTime, vData.start_time), // 标记时间，单位为秒
- class: className,
- }
- }),
- })
-}
-
-function play() {
- console.log('播放按钮被点击')
- // EventBus.emit('mapAnimationPlay')
-}
-
-function pause() {
- console.log('暂停按钮被点击')
- // EventBus.emit('mapAnimationPause')
-}
-
-function ratechange() {
- console.log('播放速率已改变，当前速率: ' + player.playbackRate())
- // EventBus.emit('mapAnimationSetSpeed', player.playbackRate())
-}
-
-let retryCount = 0
-const maxRetries = 3
-function error() {
- if (player.error().code === 2 && retryCount < maxRetries) {
- retryCount++
- console.log(`尝试重新加载 (${retryCount}/${maxRetries})`)
- setTimeout(() => player.src(player.currentSrc()), 2000)
- }
-}
-
-function click() {
- if (player.hasClass('vjs-ended')) {
- console.log('重播按钮被点击')
- // 执行重播相关操作
- // EventBus.emit('mapAnimationReplay')
- }
-}
-
-function seeked() {
- const time = player.currentTime() * 1000 + videoData.value.videoStartTime
-
- // EventBus.emit('mapAnimationSetCurrentTime', time)
-}
-
-onBeforeUnmount(() => {
- if (player) {
- player.dispose()
- }
-})
-
-defineExpose({
- init,
-})
-
-function getTimestampDiffInSeconds(timestamp1, timestamp2) {
- // 计算两个时间戳的绝对差值（毫秒）
- const diffInMilliseconds = Math.abs(timestamp1 - timestamp2)
-
- // 将毫秒转换为秒
- const diffInSeconds = diffInMilliseconds / 1000
-
- return diffInSeconds
-}
-</script>
-
-<style lang="scss" scoped>
-.video-container {
- width: 100%;
- height: 100%;
-}
-</style>
diff --git a/applications/task-work-order/src/components/map-container/mapContainer.vue b/applications/task-work-order/src/components/map-container/mapContainer.vue
deleted file mode 100644
index c9c6ae3..0000000
--- a/applications/task-work-order/src/components/map-container/mapContainer.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<!--
- * @Author: shuishen 1109946754@qq.com
- * @Date: 2024-10-25 15:07:51
- * @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2025-04-28 11:34:40
- * @FilePath: \drone-command\src\components\map-container\mapContainer.vue
- * @Description:
- *
- * Copyright (c) 2024 by shuishen, All Rights Reserved.
--->
-<template>
- <div class="map-container">
- <div class="viewer-container command-cesium" id="viewer-container">
- <div class="content">
- <slot name="content"></slot>
- </div>
-
- <PlanarRouteLineList
- :curRouteLineData="curRouteLineData"
- @routeLineListClick="routeLineListClick"
- />
- </div>
- </div>
-</template>
-
-<script setup>
-import PlanarRouteLineList from '@/components/PlanarRouteLineList/PlanarRouteLineList.vue';
-
-import * as Cesium from 'cesium';
-import { Cartesian3, Terrain, Viewer } from 'cesium';
-import { PublicCesium } from '@/utils/cesium/publicCesium';
-import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial';
-import { flyVisual } from '@ztzf/utils';
-import * as turf from '@turf/turf';
-
-import { nextTick, onBeforeUnmount, onMounted, onUnmounted } from 'vue';
-import { read } from 'xlsx';
-
-import startPng from '@/assets/map_images/Startingpointicon.png';
-import endPng from '@/assets/map_images/EndPointicon.png';
-import rwqfdImg from '@/assets/images/task/arrow-right-blue.png';
-import newNumPoint from '@/assets/images/task/custom-point.png';
-
-import { useRouteLine } from '@/hooks/useRouteLine/useRouteLine.js';
-const viewInstance = shallowRef(null);
-// 加载航线hook
-const { curRouteLineData, routeLineListClick, initViewer, renderPreviewLine } = useRouteLine();
-
-let publicCesiumInstance = null;
-let viewer = null;
-
-const { VITE_APP_BASE } = import.meta.env;
-// import * as Cesium from 'cesium'
-// import 'cesium/Build/Cesium/Widgets/widgets.css'
-const isViewerReady = ref(false);
-const { rowDetails } = defineProps({
- rowDetails: {
- type: Object,
- default: () => ({}),
- },
-});
-
-async function initMap() {
- if (viewer) return;
- publicCesiumInstance = new PublicCesium({ dom: 'viewer-container', layerMode: 4 });
- viewer = publicCesiumInstance.getViewer();
- viewInstance.value = publicCesiumInstance;
- initViewer(viewer);
- isViewerReady.value = true;
-}
-
-/**
- * 初始化标注添加
- * @param type 类型
- * @param data 数据
- */
-const initAddEntity = (type, data) => {
- watch(
- () => isViewerReady.value,
- ready => {
- if (ready) {
- viewer.entities.removeAll();
- if (type === 'initPosition') {
- viewInstance.value?.flyToContour();
- } else {
- type === 'point' ? addPoint(data) : addPolyline(data);
- }
- }
- },
- { deep: true, immediate: true } // 初始化时立即执行
- );
-};
-
-/**
- * 添加点标注
- * @param data 数据 数据格式 [lng, lat]
- */
-function addPoint(data) {
- const [lng, lat] = data;
-
- if (!lng || !lat) return;
-
- viewer.entities.add({
- position: Cartesian3.fromDegrees(lng, lat),
- point: {
- pixelSize: 10,
- color: Cesium.Color.BLUE,
- outlineColor: Cesium.Color.WHITE,
- outlineWidth: 2,
- },
- });
-
- // 定位到点位
- const points = [[lng, lat]]; // 确保格式为二维数组
- flyVisual({ positionsData: points, viewer, multiple: 10 });
-}
-
-/**
- * 添加点标注
- * @param data 数据 数据格式 [[lng, lat], [lng, lat], [lng, lat]]
- */
-async function addPolyline(data) {
- await renderPreviewLine(data.url, data.type, data.cb, data.infos);
-}
-
-const getViewer = () => viewer;
-
-onMounted(() => {
- nextTick(() => {
- initMap();
- });
-});
-
-onBeforeUnmount(() => {
- var cesiumContainer = document.getElementById('viewer-container');
- if (cesiumContainer) {
- cesiumContainer.remove(); // 移除与地图相关的DOM元素
- }
-
- viewer.entities.removeAll();
- publicCesiumInstance.viewerDestroy();
- viewer = null;
-});
-
-defineExpose({
- initAddEntity,
- getViewer
-});
-</script>
-
-<script>
-export default {
- name: 'MapContainer',
-};
-</script>
-
-<style lang="scss" scoped>
-.map-container {
- position: relative;
- width: 100% !important;
- height: 100% !important;
- overflow: hidden;
-}
-
-.viewer-container {
- position: absolute;
- top: 0%;
- left: 0%;
- width: 100%;
- height: 100%;
-}
-</style>
diff --git a/applications/task-work-order/src/main.js b/applications/task-work-order/src/main.js
index 9d21ed1..04bc6a0 100644
--- a/applications/task-work-order/src/main.js
+++ b/applications/task-work-order/src/main.js
@@ -50,7 +50,6 @@
// 业务组件
import tenantPackage from './views/system/tenantpackage.vue'
// 地图依赖
-import mapContainer from './components/map-container/mapContainer.vue'
import * as DC from '@dvgis/dc-sdk'
import '@dvgis/dc-sdk/dist/dc.min.css'
@@ -102,7 +101,6 @@
app.component('thirdRegister', thirdRegister)
app.component('flowDesign', flowDesign)
app.component('tenantPackage', tenantPackage)
-app.component('mapContainer', mapContainer)
app.config.globalProperties.$dayjs = dayjs
app.config.globalProperties.website = website
diff --git a/applications/task-work-order/src/router/views/index.js b/applications/task-work-order/src/router/views/index.js
index de30ead..c18c3c3 100644
--- a/applications/task-work-order/src/router/views/index.js
+++ b/applications/task-work-order/src/router/views/index.js
@@ -134,29 +134,4 @@
},
],
},
-
- {
- path: '/resource',
- component: Layout,
- redirect: '/resource/patchManagement',
- children: [
- {
- path: 'patchManagement',
- name: '图斑管理',
- meta: {
- i18n: 'info',
- },
- component: () => import(/* webpackChunkName: "views" */ '@/views/resource/patchManagement.vue'),
- },
-
- {
- path: 'patchTypeManagement',
- name: '图斑类型管理',
- meta: {
- i18n: 'info',
- },
- component: () => import(/* webpackChunkName: "views" */ '@/views/resource/patchTypeManagement.vue'),
- },
- ],
- },
]
diff --git a/applications/task-work-order/src/utils/cesium/publicCesium.js b/applications/task-work-order/src/utils/cesium/publicCesium.js
index 830c3f0..f457a70 100644
--- a/applications/task-work-order/src/utils/cesium/publicCesium.js
+++ b/applications/task-work-order/src/utils/cesium/publicCesium.js
@@ -146,52 +146,7 @@
this.viewer?.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) // 禁用双击
- if (terrain) {
- try {
- const noTerrainMechanism = ['1962779164650135554']
- if (noTerrainMechanism.includes(store.state.user.userInfo?.deptId)) {
- // 使用Cesium World Terrain
- Cesium.createWorldTerrainAsync({
- requestWaterMask: false, // 请求水域效果
- requestVertexNormals: true // 请求光照和地形法线
- }).then(terrainProvider => {
- this.viewer.terrainProvider = terrainProvider
- terrainLoadCallback?.()
- })
- } else {
- /*// 正则：第一位非0，第二位任意数字，后10位都是0
- const re = /^[1-9]\d0{10}$/
-
- let result = null
-
- // 1️⃣先判断 areaCode
- if (re.test(store.state.user.userInfo.detail.areaCode)) {
- result = store.state.user.userInfo.detail.areaCode.slice(0, 6)
- } else {
- // 2️⃣如果不满足，从 ancestors 里找
- const matchedItems = store.state.user.userInfo.detail.ancestors
- .split(',')
- .filter(item => re.test(item)) // 过滤出符合条件的
-
- // 取第一个符合条件的前6位（可以改成 last one 看需求）
- if (matchedItems.length > 0) {
- result = matchedItems[0].slice(0, 6)
- }
- }
-
- // 使用公司地形
- Cesium.CesiumTerrainProvider.fromUrl(`${import.meta.env.VITE_APP_TERRAIN_URL}${result}`, {
- requestVertexNormals: true, // 启用地形法线增强立体感
- requestWaterMask: true, // 启用水体遮罩效果
- }).then(terrainProvider => {
- this.viewer.terrainProvider = terrainProvider
- terrainLoadCallback?.()
- })*/
- }
- } catch (error) {
- console.error('地形加载失败:', error)
- }
- }
+ this.setTerrainVisible(terrain, terrainLoadCallback)
this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 4500000
this.switchLayers(layerMode)
@@ -205,6 +160,39 @@
this.viewer.resolutionScale = dpr // 设置分辨率缩放比例
}
}
+ async ensureTerrainProvider () {
+ if (this.terrainProvider) return this.terrainProvider
+ if (this.terrainLoading) return this.terrainLoading
+ this.terrainLoading = Cesium.CesiumTerrainProvider.fromUrl(
+ `${import.meta.env.VITE_APP_TERRAIN_URL}ja_terrain`,
+ {
+ requestVertexNormals: true, // 启用地形法线增强立体感
+ requestWaterMask: true, // 启用水体遮罩效果
+ }
+ ).then(provider => {
+ this.terrainProvider = provider
+ return provider
+ })
+ return this.terrainLoading
+ }
+
+ async setTerrainVisible (visible, terrainLoadCallback) {
+ if (!this.viewer) return
+ if (!visible) {
+ this.viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider()
+ this.terrainEnabled = false
+ return
+ }
+ try {
+ const provider = await this.ensureTerrainProvider()
+ if (!this.viewer) return
+ this.viewer.terrainProvider = provider
+ this.terrainEnabled = true
+ terrainLoadCallback?.()
+ } catch (error) {
+ this.terrainEnabled = false
+ }
+ }
getViewer () {
return this.viewer
diff --git a/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/FormDiaLog.vue b/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/FormDiaLog.vue
index d68afc9..c0724c1 100644
--- a/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/FormDiaLog.vue
+++ b/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/FormDiaLog.vue
@@ -50,7 +50,7 @@
<div class="val">{{ formData.reviewOpinion }}</div>
</el-col>
</el-row>
- <div v-if=" detailObjectionStatus === '1' && !requesterProvider">
+ <div v-if=" detailObjectionStatus === '1' && permission.orderData_feedback">
<div class="detail-title" :style="{ marginTop:pxToRem(20)}">异议反馈</div>
<el-form ref="feedbackFormRef" class="gd-dialog-form" :model="feedbackFormData"
:rules="feedbackRules" label-width="140px">
@@ -188,7 +188,7 @@
</el-button>
<el-button class="" color="#4C34FF" :loading="submitting || uploading" :disabled="submitting || uploading" @click="handleApply">申请</el-button>
</template>
- <template v-if="dialogReadonly && detailObjectionStatus === '1' && !requesterProvider">
+ <template v-if="dialogReadonly && detailObjectionStatus === '1' && permission.orderData_feedback">
<el-button color="#F2F3F5" :loading="submitting" :disabled="submitting" @click="visible = false">取消</el-button>
<el-button
@@ -270,7 +270,8 @@
import { pxToRem } from '@/utils/rem'
import { useStore } from 'vuex'
const store = useStore()
-const requesterProvider = computed(() => store.state.user.userInfo?.role_id === '2014158512610869250')
+const permission = computed(() => store.state.user.permission);
+// const requesterProvider = computed(() => store.state.user.userInfo?.role_id === '2014158512610869250')
// 初始化表单数据
const initForm = () => ({
id:'',
diff --git a/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/dataObjectionApi.js b/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/dataObjectionApi.js
index fc07017..0b60556 100644
--- a/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/dataObjectionApi.js
+++ b/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/dataObjectionApi.js
@@ -45,3 +45,12 @@
})
}
+export const getDeptTreeListApi = tenantId => {
+ return request({
+ url: '/blade-system/dept/tree',
+ method: 'get',
+ params: {
+ tenantId,
+ },
+ });
+};
\ No newline at end of file
diff --git a/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/index.vue b/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/index.vue
index 10a457d..94b77da 100644
--- a/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/index.vue
+++ b/applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/index.vue
@@ -98,7 +98,7 @@
import { Search, RefreshRight, Plus, Delete } from '@element-plus/icons-vue'
import { onMounted, ref, provide, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
-import { getDeptTree } from '@/api/system/dept'
+import { getDeptTreeListApi } from './dataObjectionApi'
import { getDictLabel } from '@ztzf/utils'
import FormDiaLog from './FormDiaLog.vue'
import {
@@ -125,7 +125,7 @@
const deptTree = ref([]) // 部门树
const dictObj = ref({}) // 字典对象
const treeProps = {
- label: 'name',
+ label: 'title',
children: 'children',
}
const detailObjectionStatus = ref('')
@@ -183,7 +183,7 @@
// 获取部门树
function getDeptTreeFun() {
- getDeptTree().then(res => {
+ getDeptTreeListApi().then(res => {
deptTree.value = res.data.data
})
}
diff --git a/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue b/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue
index 6af37f9..0e054c2 100644
--- a/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue
+++ b/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue
@@ -11,8 +11,8 @@
<div class="content" style="display: flex">
<div class="processBox" v-if="dialogMode !== 'add' && processList.length">
<div class="detail-title">工单记录</div>
- <div class="process" >
- <OrderStepBar :processList="processList"/>
+ <div class="process">
+ <OrderStepBar :processList="processList" />
</div>
</div>
<div class="leftBox">
@@ -269,7 +269,7 @@
import { gdManageDeviceListApi } from './gdManageDeviceApi'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import * as Cesium from 'cesium'
-import { DrawPolygon } from '@/utils/cesium/DrawPolygon'
+import { DrawPolygon } from '@ztzf/utils'
import { pxToRem } from '@/utils/rem'
import dayjs from 'dayjs'
import RefuseOrderDialog from '@/views/orderView/orderManage/orderManage/RefuseOrderDialog.vue'
@@ -514,11 +514,17 @@
viewPlane = viewer.entities?.add({
customType: 'control_group',
position: Cesium.Cartesian3.fromDegrees(result[0], result[1]),
+ polygon: {
+ hierarchy: Cesium.Cartesian3.fromDegreesArray(result),
+ material: Cesium.Color.fromBytes(45, 140, 240, 99),
+ outline: false,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ },
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(result),
clampToGround: true,
- width: 3,
- material: Cesium.Color.RED,
+ width: 2,
+ material: Cesium.Color.fromBytes(45, 140, 240, 255),
},
})
flyVisual({
@@ -679,7 +685,7 @@
display: flex;
flex-direction: column;
- .process{
+ .process {
height: 100%;
padding: 12px 16px 24px 16px;
width: 312px;
diff --git a/applications/task-work-order/src/views/resource/components/spotDetails.vue b/applications/task-work-order/src/views/resource/components/spotDetails.vue
deleted file mode 100644
index 63b2c0d..0000000
--- a/applications/task-work-order/src/views/resource/components/spotDetails.vue
+++ /dev/null
@@ -1,955 +0,0 @@
-<template>
- <el-dialog
- class="spotDialog work-dialog-mange"
- :title="props.title"
- v-model="uploadPatchDialog"
- width="78%"
- align-center
-
- >
- <div class="container">
- <!-- 信息展示区 -->
- <div class="infoBox">
- <div class="itemBoxLeft">
- <div v-for="(item, index) in infoList" :key="index" class="itemCon">
- <div class="itemBox">
- <div class="itemTitle">
- <span
- v-if="
- props.title === '图斑编辑' &&
- (item.name === '文件名称' || item.name === '图斑类型')
- "
- style="color: red"
- >*</span
- >{{ item.name }}：
- </div>
- <div class="itemContent">
- <template v-if="props.title === '图斑编辑' && item.editable">
- <template v-if="item.name === '图斑类型'">
- <el-select
- v-model="item.value"
- placeholder="请选择图斑类型"
- style="width: 102%"
-
- >
- <el-option
- v-for="opt in spotTypeOptions"
- :key="opt.value"
- :label="opt.label"
- :value="opt.value"
- />
- </el-select>
- </template>
- <template v-else-if="item.name === '文件名称'">
- <el-input style="width: 102%" v-model="item.value" />
- </template>
- </template>
- <template v-else>
- <div class="itemValue" :class="{ 'error-text': item.name === '异常图斑数量' }">
- {{ item.value }}
- </div>
- </template>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 地图和表格容器 -->
- <div class="map-container">
- <!-- 图斑列表 -->
- <div class="table-overlay">
- <div class="table-content">
- <div class="tabname">图斑列表</div>
- <div class="tabBoxLoading"
- v-loading="tableLoading"
- element-loading-text="加载中..."
- element-loading-background="rgba(0, 0, 0, 0.1)"
- >
- <el-table
- v-if="tableData.length > 0"
-
- ref="polygonTableEle"
- highlight-current-row
- :row-class-name="tableRowClassName"
- :data="tableData"
- @row-click="handleLocationPolygon"
-
- >
- <el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
- <template #default="{ $index }">
- {{ ($index + 1).toString().padStart(2, '0') }}
- </template>
- </el-table-column>
- <el-table-column prop="dkbh" align="center" label="图斑名称" show-overflow-tooltip />
- <el-table-column prop="is_exception" :width="pxToRemNum(50)" align="center" label="图斑状态">
- <template #default="scope">
- <span>{{ scope.row.is_exception === 2 ? '异常' : '正常' }}</span>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
- <template #default="scope">
- <!-- <span class="operationspan" @click="handleDelete(scope.row)">删除</span> -->
- <el-button icon="el-icon-delete" link @click="handleDelete(scope.row)"></el-button>
- <!-- <span
- class="operationspan"
- v-if="scope.row.is_exception == 2"
- @click.stop="handleSelectionChange(scope.row)"
- >
- {{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }}
- </span> -->
- <template v-if="scope.row.is_exception == 2">
- <el-button
- v-if="!isEditing || selectionIds !== scope.row.id"
- icon="el-icon-edit"
- link
- @click.stop="handleSelectionChange(scope.row)"
- />
- <el-button
- v-else
- icon="el-icon-circle-close"
- link
- @click.stop="handleSelectionChange(scope.row)"
-
- />
- </template>
- </template>
- </el-table-column>
- </el-table>
- </div>
-
- </div>
- </div>
- <!--绘制按钮-->
-
- <DrawPolygon
- ref="drawPolygonRef"
- v-if="isEditing"
- @upDateDrawState="handleUpDateDrawState"
-
- />
- <!-- 完成/取消 -->
- <div class="btnGroups" v-if="props.title === '图斑编辑'">
- <img @click="handleSave" src="@/assets/images/home/territory/savebtn.png" alt="" />
- <img @click="handleCancel" src="@/assets/images/home/territory/cancelbtn.png" alt="" />
- </div>
- <!-- 地图 -->
- <div id="spotMap" v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.7)" class="work-cesium" v-show="uploadPatchDialog"></div>
- </div>
- </div>
- </el-dialog>
-</template>
-
-<script setup>
-import { flyVisual } from '@ztzf/utils'
-import { pxToRem, pxToRemNum } from '@/utils/rem'
-import DrawPolygon from '@/views/resource/components/DrawPolygon.vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { findAreaName } from '@/utils/areaUtils';
-import {
- patchEditApi,
- tableMapListApi,
- deletePatches,
- AlltableMapListApi,
- spotManagementTableApi,
-} from '@/api/patchManagement/index';
-import { getCenterPoint } from '@/utils/cesium/mapUtil.js';
-
-import * as Cesium from 'cesium';
-import { PublicCesium } from '@/utils/cesium/publicCesium';
-import { ref, watch, onBeforeUnmount, onMounted } from 'vue';
-// 标记地图是否初始化完成
-const isMapReady = ref(false);
-const uploadPatchDialog = defineModel('show');
-const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption', 'regionalData']);
-const polygonTableEle = ref(null);
-let publicCesiumInstance = null;
-let viewer = null;
-const viewInstance = shallowRef(null);
-const homeViewer = shallowRef(null);
-let tbJwdList = [];
-const loading = ref(true);
-const tableLoading = ref(true);
-const tableData = ref([]);
-const AlltableData = ref([]);
-let total = ref(0);
-const refreshonload = inject('searchReset');
-const initialFileName = ref('');
-const initialSpotTypeId = ref('');
-const initialSpotTypeLabel = ref('');
-const spotManagementData = ref(null);
-const isEditing = ref(false);
-const drawPolygonRef = ref(null);
-// 记录上一次点击高亮
-let lastHighlightRow = null;
-// 功能按钮区域相关：编辑图斑等
-const funButtonEle = ref(null);
-const isBoxSelect = ref(false);
-const isDrawPolygon = ref(false);
-// 选中了哪些图斑
-const selectionIds = ref(null);
-const selectionList = ref([]);
-// 当前在编辑状态的异常图斑
-let curCustomPolygon = null;
-let lastEntity = null;
-// 表格隔行变色
-const tableRowClassName = ({ rowIndex }) => {
- return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
-};
-const spotTypeOptions = ref([]);
-const infoList = ref([
- { name: '文件名称', value: '', field: 'file_name', editable: true },
- { name: '图斑类型', value: '', field: 'lot_type_id', editable: true },
- { name: '图斑数量', value: '', field: 'patches_num', editable: false },
- { name: '异常图斑数量', value: '', field: 'exception_num', editable: false },
- { name: '行政区划', value: '', field: 'areaName', editable: false },
- { name: '数据来源', value: '', field: 'dataFrom', editable: false },
- { name: '创建时间', value: '', field: 'create_time', editable: false },
- { name: '创建人', value: '', field: 'user_name', editable: false },
-]);
-watch(
- () => props.spotTypeOption,
- newOptions => {
- if (newOptions) {
- spotTypeOptions.value = newOptions.map(opt => ({
- label: opt.label,
- value: opt.value,
- }));
- }
- },
- { immediate: true }
-);
-watch(
- () => spotManagementData.value,
- newVal => {
- if (newVal) updateInfoList(newVal);
- },
- { immediate: true }
-);
-
-// 图斑编辑详情
-const getspotManagementTableApi = () => {
- spotManagementTableApi({ id: props.detailid }).then(res => {
- spotManagementData.value = {
- ...res.data.data.records[0],
- dataFrom: res.data.data.records[0].date_from === 0 ? '本地上传' : '国土调查云',
- areaName: findAreaName(res.data.data.records[0].area_code, props.regionalData, true),
- };
- });
-};
-
-// 将 lot_type_id 转换为对应的 label
-const getPatchTypeLabel = lotTypeId => {
- const option = spotTypeOptions.value.find(opt => opt.value === String(lotTypeId));
- return option ? option.label : '';
-};
-const updateInfoList = detailData => {
- if (!detailData) return;
- if (initialFileName.value === '' || initialSpotTypeId.value === '') {
- initialFileName.value = detailData.file_name || '';
- initialSpotTypeId.value = detailData.lot_type_id || '';
- initialSpotTypeLabel.value =
- detailData.patches_type_desc || getPatchTypeLabel(detailData.lot_type_id);
- }
- infoList.value = infoList.value.map(item => {
- const value = detailData[item.field] ?? item.value;
- if (item.name === '图斑类型') {
- return {
- ...item,
- value: detailData.patches_type_desc || getPatchTypeLabel(detailData.lot_type_id),
- originalValue: detailData.lot_type_id,
- };
- }
- return { ...item, value };
- });
-};
-const params = ref({
- page: 1,
- pageSize: 10,
-});
-const isInit = ref(true);
-// 图斑管理表格
-const getTableList = () => {
- tableLoading.value = true;
- const requestParams = {
- patchesInfoId: props.detailid,
- };
- AlltableMapListApi(requestParams).then(res => {
- tableData.value = res.data.data?.map(item => ({
- ...item,
- dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
- }));
- total.value = res.data.data.total || res.data.data.length;
- tbJwdList = [];
- viewer?.entities.removeAll();
- if (!tableData.value) {
- viewInstance.value?.flyToContour();
- } else {
- entitiesAddSpot();
- }
- }).finally(() => {
- tableLoading.value = false;
- });
-};
-
-
-
-// 地图
-const initMap = () => {
- if (!document.getElementById('spotMap') || isMapReady.value) return;
-
- publicCesiumInstance = new PublicCesium({
- dom: 'spotMap',
- flatMode: false,
- terrain: true,
- layerMode: 4,
- contour: false,
- });
-
- homeViewer.value = publicCesiumInstance.getViewer();
- viewer = publicCesiumInstance.getViewer();
- viewInstance.value = publicCesiumInstance;
- viewer.scene.globe.depthTestAgainstTerrain = true;
- viewInstance.value.switchContour(true);
-
- // 确保 readyPromise 存在
- if (viewer.readyPromise) {
- viewer.readyPromise.then(() => {
- isMapReady.value = true;
- getTableList();
- }).catch((error) => {
- console.error('地图加载失败：', error);
- ElMessage.error('地图加载失败，请刷新重试');
- });
- } else {
-
- // 如果没有 readyPromise
- setTimeout(() => {
- isMapReady.value = true;
- getTableList();
- }, 1000);
- }
-};
-
-
-// 仅弹框初始化时执行的定位逻辑
-const initMapLocation = () => {
- if (tbJwdList.length === 0 || !homeViewer.value) return;
-
- // 计算所有图斑的包围球（用于初始化定位）
- const allPositions = tbJwdList.flatMap(item =>
- Cesium.Cartesian3.fromDegreesArray(item.grouped)
- );
- const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);
-
- // 初始化定位（仅执行一次）
- homeViewer.value.camera.flyToBoundingSphere(boundingSphere, {
- duration: 0,
- offset: new Cesium.HeadingPitchRange(
- Cesium.Math.toRadians(0),
- Cesium.Math.toRadians(-90)
- ),
- });
-};
-// 初始化所有图斑
-const entitiesAddSpot = () => {
-if (!isMapReady.value || !viewer) return;
- viewer?.entities.removeAll();
- tbJwdList = []; // 重置经纬度列表
-
- tableData.value.forEach(item => {
- const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
- if (!numbersWithCommas) return;
-
- const grouped = numbersWithCommas.map(Number);
- tbJwdList.push({ ...item, grouped }); // 存储经纬度用于后续操作
-
- // 绘制图斑（保留原有逻辑，仅移除定位相关代码）
- const fillColor = item.is_exception === 2
- ? Cesium.Color.RED.withAlpha(0.5)
- : Cesium.Color.YELLOW.withAlpha(0.5);
- const outlineColor = item.is_exception === 2
- ? Cesium.Color.RED
- : Cesium.Color.YELLOW;
-
- homeViewer.value?.entities?.add({
- id: `polygon_dk${item.id}`,
- customType: 'pattern_spot_polygon',
- customInfo: item,
- polygon: {
- hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(grouped)),
- material: fillColor,
- outline: true,
- outlineColor: outlineColor,
- outlineWidth: 2,
- clampToGround: true,
- outlineDepthFailColor: outlineColor,
- },
- polyline: {
- positions: Cesium.Cartesian3.fromDegreesArray(grouped),
- width: 2,
- material: outlineColor,
- clampToGround: true,
- },
- zIndex: 99,
- });
- });
-
- // 仅在初始化阶段执行定位（关键：通过isInit控制）
- if (isInit.value) {
- initMapLocation();
- isInit.value = false; // 初始化完成，后续不再执行定位
- }
-
- // 保留图斑点击高亮事件（原有逻辑不变）
- viewInstance.value?.removeLeftClickEvent('spotHighlighting');
- viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
-};
-
-// 高亮当前选中图斑，并定位
-const getEntityByDataId = dataId => {
- if (!homeViewer.value) return null;
- const entityId = `polygon_dk${dataId}`;
- return homeViewer.value.entities.getById(entityId);
-};
-const handleLocationPolygon = data => {
- if (!data) return;
-
- // 取消任何现有的绘制状态（与编辑取消逻辑一致）
- if (isEditing.value) {
- isEditing.value = false;
- handleUpDateDrawState(false);
- selectionIds.value = null;
- selectionList.value = [];
- }
-
- const targetEntity = getEntityByDataId(data.id);
- if (targetEntity) {
- updateMapSpotInfo(targetEntity);
- // 同步表格选中状态
- const clickTableID = tableData.value.findIndex(i => i.id === data.id);
- const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
- const targetRow = rows[clickTableID];
-
- nextTick(() => {
- const table = polygonTableEle?.value;
- if (table && targetRow) {
- table.setCurrentRow(tableData.value[clickTableID]);
- targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
- }
- });
- }
-};
-
-// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
-function spotHighlighting(click, pick, viewer) {
- let entities = viewer?.scene
- .drillPick(click.position)
- .filter(item => item.id)
- .map(i => i.id)
- .filter(i => i._customType === 'pattern_spot_polygon');
- if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
- const nowEntity = entities?.[0];
- const nowData = nowEntity.customInfo;
- const clickTableID = tableData.value.findIndex(i => i.id === nowData.id);
- const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
- const targetRow = rows[clickTableID];
-
- nextTick(() => {
- const table = polygonTableEle?.value;
- if (!table || !targetRow) return;
- // 表格滚动到中间位置
- targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
- // 同步表格选中状态
- table.setCurrentRow(tableData.value[clickTableID]);
- });
-
- updateMapSpotInfo(nowEntity);
-}
-function updateMapSpotInfo(nowEntity) {
- const nowData = nowEntity.customInfo;
- if (!nowEntity) return;
- if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return;
- nowEntity.polygon.material = Cesium.Color.RED.withAlpha(0);
- nowEntity.polyline.material = Cesium.Color.RED;
- if (lastEntity) {
- const lastData = lastEntity.customInfo;
- const originalFillColor =
- lastData.is_exception === 2
- ? Cesium.Color.RED.withAlpha(0.5)
- : Cesium.Color.YELLOW.withAlpha(0.5);
- const originalOutlineColor =
- lastData.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
- lastEntity.polygon.material = originalFillColor;
- lastEntity.polygon.outlineColor = originalOutlineColor;
- lastEntity.polyline.material = originalOutlineColor;
- }
- lastEntity = nowEntity;
- const numbersWithCommas = nowData.dkfw.match(/\d+(\.\d+)?/g);
- if (numbersWithCommas) {
-
- const positionsData = [];
- for (let i = 0; i < numbersWithCommas.length; i += 2) {
- const lon = Number(numbersWithCommas[i]);
- const lat = Number(numbersWithCommas[i + 1]);
- positionsData.push([lon, lat, 10]);
- }
- flyVisual({
- positionsData: positionsData,
- viewer: homeViewer.value,
- multiple: 15,
-
- });
- }
-}
-// 清空选中的数据
-const clearSelect = () => {
- lastHighlightRow = null;
- selectionList.value = [];
- viewer?.entities.removeAll();
-};
-// 编辑
-
-const handleSelectionChange = row => {
- // 如果是同一个图斑且正在编辑，则取消编辑
- if (selectionIds.value === row.id && isEditing.value) {
- isEditing.value = false;
- handleUpDateDrawState(false);
- selectionIds.value = null;
- selectionList.value = [];
- return;
- }
-
- // 定位到选中的图斑
- handleLocationPolygon(row);
-
- // 仅异常图斑可编辑
- if (row.is_exception !== 2) {
- ElMessage.warning('仅异常图斑支持编辑绘制');
- return;
- }
-
- // 设置编辑状态
- selectionIds.value = row.id;
- selectionList.value = row;
- isEditing.value = true;
- handleUpDateDrawState(true);
-};
-const handleUpDateDrawState = show => {
- isEditing.value = show; // 同步编辑状态
- if (!show) {
- // 绘制关闭时，清空选中的编辑行
- selectionIds.value = null;
- selectionList.value = [];
- }
-};
-// 删除
-const handleDelete = (row) => {
- ElMessageBox.confirm('确认删除当前行图斑?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- }).then(() => {
- deletePatches({ ids: row.id }).then(res => {
- if (res.data.code !== 0) return ElMessage.warning('删除失败');
- ElMessage.success('删除成功');
- tableData.value = tableData.value.filter(item => item.id !== row.id);
- //从地图上移除对应的图斑实体
- const entityId = `polygon_dk${row.id}`;
- viewer?.entities.removeById(entityId);
- const exceptionCountItem = infoList.value.find(item => item.name === '异常图斑数量');
- if (exceptionCountItem && row.is_exception === 2) {
- exceptionCountItem.value = Math.max(0, parseInt(exceptionCountItem.value) - 1);
- }
- const totalCountItem = infoList.value.find(item => item.name === '图斑数量');
- if (totalCountItem) {
- totalCountItem.value = Math.max(0, parseInt(totalCountItem.value) - 1);
- }
-
- // 清除选中状态
- if (selectionIds.value === row.id) {
- selectionIds.value = null;
- selectionList.value = [];
- isEditing.value = false;
- handleUpDateDrawState(false);
- }
-
- });
- });
-};
-
-// 保存
-const handleSave = () => {
- const fileNameItem = infoList.value.find(item => item.name === '文件名称');
- const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
- let lotTypeId;
- // 检查value是否为数字类型（包括字符串形式的数字）
- const isValueNumber =
- !isNaN(Number(patchTypeItem.value)) &&
- patchTypeItem.value !== '' &&
- patchTypeItem.value !== null &&
- patchTypeItem.value !== undefined;
- if (isValueNumber) {
- // 转换为数字类型
- lotTypeId = Number(patchTypeItem.value);
- } else {
- // 使用原始值
- lotTypeId = patchTypeItem.originalValue;
- }
- // 构建请求参数
- const updateParams = {
- file_name: fileNameItem.value,
- lot_type_id: lotTypeId,
- type: lotTypeId,
- id: props.detailList.id,
- };
- patchEditApi(updateParams).then(res => {
- ElMessage.success(res.data.data);
- refreshonload();
- uploadPatchDialog.value = false;
- });
-};
-// 取消
-const handleCancel = () => {
- const fileNameItem = infoList.value.find(item => item.name === '文件名称');
- const spotTypeItem = infoList.value.find(item => item.name === '图斑类型');
- if (fileNameItem) {
- fileNameItem.value = initialFileName.value;
- }
- if (spotTypeItem) {
- spotTypeItem.value = initialSpotTypeLabel.value;
- spotTypeItem.originalValue = initialSpotTypeId.value;
- }
- if (isEditing.value) {
- isEditing.value = false;
- handleUpDateDrawState(false);
- }
- clearSelect();
- isDrawPolygon.value = false; // 关闭地图绘制状态
- uploadPatchDialog.value = false;
-};
-provide('selectionIds', selectionIds);
-provide('homeViewer', homeViewer);
-provide('viewInstance', viewInstance);
-provide('clearSelect', clearSelect);
-provide('getTableList', getTableList);
-// 销毁
-const destroyMap = () => {
- if (viewer) {
- viewer.destroy();
- viewer = null;
- }
- publicCesiumInstance = null;
-};
-
-
-watch(uploadPatchDialog, newVal => {
- if (newVal) {
- isInit.value = true;
- isMapReady.value = false;
- setTimeout(() => {
- initMap();
- getspotManagementTableApi();
- }, 0);
- } else {
- tableLoading.value = false;
- tableData.value = [];
- isEditing.value = false;
- handleUpDateDrawState(false);
- destroyMap();
- isInit.value = false;
- clearSelect();
- isMapReady.value = false;
- }
- refreshonload();
-});
-onMounted(() => {});
-onBeforeUnmount(() => {
- destroyMap();
-});
-</script>
-
-<style scoped lang="scss">
-:global(.spotDialog .el-dialog__header span) {
- padding-left: 16px !important;
- display: inline-block;
-}
-:global(.spotDialog .el-dialog__header) .el-dialog__title {
- font-family: 'Source Han Sans CN' !important;
- font-weight: bold !important;
- font-size: 16px !important;
- color: #363636 !important;
-}
-:global(.spotDialog .el-dialog__body) {
- padding: 2rem 2rem 0 !important;
-
- }
-.container {
- display: flex;
- flex-direction: column;
- height: 100%;
- padding: 10px 20px 23px 20px;
-}
-
-.infoBox {
- display: flex;
- justify-content: space-between;
- margin-bottom: 16px;
- border: 1px solid;
- border: 1px solid #e8e8e8;
- border-radius: 4px;
- background: #fff;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-
- .itemBoxLeft {
- flex: 1;
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- row-gap: 0;
- padding: 0;
- font-size: 14px;
- }
-
- .itemCon {
- border-bottom: 1px solid #e8e8e8;
-
- &:nth-child(2n) {
- .itemBox {
- border-right: none;
- }
- }
-
- &:nth-last-child(-n + 2) {
- border-bottom: none;
- }
- }
-
- .itemBox {
- display: flex;
- align-items: center;
- height: 33px;
- padding: 0 10px;
- border-right: 1px solid #e8e8e8;
- border-bottom: none;
-
- .itemTitle {
- width: 202px;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #383838;
- text-align: right;
- background: #fafafa;
- height: 100%;
- line-height: 33px;
- padding-right: 10px;
- margin: 0 -10px 0 -10px;
- border-right: 1px solid #e8e8e8;
- }
-
- .itemContent {
- flex: 1;
- padding-left: 10px;
- .itemValue {
- padding-left: 6px;
- color: #7b7b7b;
- }
- .error-text {
- color: #ff0a0a;
- }
- }
- }
-}
-
-.map-container {
- position: relative;
- height: 620px;
- width: 100%;
-}
-.table-overlay {
- position: absolute;
- top: 0;
- left: 0;
- height: 99%;
- z-index: 99;
- width: 277px;
- overflow: hidden;
- background: rgba(0, 0, 0, 0.8);
-
- border-radius: 8px 8px 8px 8px;
- padding: 6px 10px 0 10px;
- display: flex;
- flex-direction: column;
-}
-
-.table-content {
- width: 100%;
- display: flex;
- flex-direction: column;
- height: 99%;
- .tabname {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ffffff;
- }
-
- // 表格样式
- :deep(.el-table) {
- // 清除表格内部横线和竖线
- &::before,
- &::after,
- .el-table__inner-wrapper::before,
- .el-table__inner-wrapper::after {
- background-color: transparent !important;
- // display: none !important; // 彻底隐藏伪元素边框
- }
- .el-table__header-wrapper th {
- border: none !important;
- }
- --el-table-bg-color: transparent !important;
- --el-table-tr-bg-color: transparent !important;
-
- --el-table-row-hover-bg-color: rgba(30, 58, 138, 0.5) !important;
- --el-table-current-row-bg-color: rgba(30, 58, 138, 0.7) !important;
- color: #fff !important;
- .cell {
- padding: 0px !important;
- font-size: 12px !important;
- }
- // 隔行变色
- .even-row {
- background-color: rgba(255, 255, 255, 0.17) !important;
- }
- .oddNumberRow {
- background-color: rgba(255, 255, 255, 0.08) !important;
- }
-
- // 表头样式
- .el-table__header {
- th {
- background: rgba(51, 51, 51, 0.32) !important;
- font-family: Source Han Sans CN;
- font-weight: 500;
- font-size: 14px;
- color: #ffffff;
- .cell {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
-
- // 表格主体
- .el-table__body {
- tr:hover > td {
- background-color: rgba(64, 158, 255,0.3) !important;
- }
-
- td {
- border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
- }
- }
-
- // 选中行
- .current-row td {
-
- background-color: rgba(64, 158, 255,0.3) !important;
- }
- }
- :deep(.el-table__body) {
- tr {
- height: 46px;
- }
- td {
- padding: 8px 0;
- }
- }
- .operationspan {
- cursor: pointer;
- color: #409eff;
- }
- .operationspan:first-child {
- margin-right: 5px;
- }
-
- // 分页
- :deep(.pagination-container) {
- background: transparent !important;
- }
- :deep(.el-pagination) {
- .btn-prev,
- .btn-next {
- padding: 5px 6px;
- }
- }
- :deep(.el-pager li) {
- margin: 0 0.1rem;
- background: rgba(34, 34, 34, 0.9) !important;
- box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25) !important;
- border-radius: 8px 8px 8px 8px !important;
-
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ededed !important;
- }
- :deep(.el-pager li.is-active) {
- border: 1px solid rgba(255, 255, 255, 0.99) !important;
- }
- :deep(.el-pagination button) {
- background: rgba(34, 34, 34, 0.9) !important;
- color: #ededed !important;
- border-radius: 8px 8px 8px 8px !important;
- }
- .pagination-container {
- margin-top: auto;
- padding: 8px 5px !important;
- background: white;
- display: flex;
- justify-content: center;
- height: auto; // 取消固定高度20px，避免内容被截断
- margin: 24px 0 14px 0;
- width: 100%;
- box-sizing: border-box;
- }
-}
-:deep(.el-tooltip__popper) {
- z-index: 9999 !important;
- max-width: 300px;
-}
-.tabBoxLoading {
-height: 100%;
-
-}
-
-.el-table {
-height: 98%;
-overflow: auto;
-
-}
-.btnGroups {
- position: absolute;
- bottom: 49px;
- left: 50%;
- transform: translate(-50%);
- img {
- width: 125px;
- height: 45px;
- cursor: pointer;
- }
-}
-.btnGroups img:first-child {
- margin-right: 21px;
-}
-#spotMap {
- height: 100%;
- width: 100%;
-}
-.el-button {
- padding: 0;
- color: #fff;
- width: 17px;
-}
-</style>
diff --git a/applications/task-work-order/src/views/resource/patchManagement.vue b/applications/task-work-order/src/views/resource/patchManagement.vue
deleted file mode 100644
index 7927989..0000000
--- a/applications/task-work-order/src/views/resource/patchManagement.vue
+++ /dev/null
@@ -1,569 +0,0 @@
-<template>
- <basic-container>
- <avue-crud
- :option="option"
- :table-loading="loading"
- :data="data"
- v-model:page="page"
- :permission="permissionList"
- v-model="form"
- ref="crud"
- @row-update="rowUpdate"
- @row-save="rowSave"
- @row-del="rowDel"
- :before-open="beforeOpen"
- @search-change="searchChange"
- @search-reset="searchReset"
- @selection-change="selectionChange"
- @current-change="currentChange"
- @size-change="sizeChange"
- @refresh-change="refreshChange"
- @on-load="onLoad"
- >
- <template #menu-left>
- <el-button type="primary" icon="el-icon-upload" @click="handleDebug"> 上传图斑 </el-button>
- <el-button type="primary" icon="el-icon-setting" @click="goTypeManagement">
- 类型管理
- </el-button>
- <el-button type="success" icon="el-icon-download" @click="downloadPatch"> 导出 </el-button>
- </template>
-
- <template #menu="scope">
- <el-button type="primary" text icon="el-icon-view" @click="uploadPatch(scope.row, 'detail')"
- >详情
- </el-button>
- <el-button type="primary" text icon="el-icon-edit" @click="uploadPatch(scope.row, 'edit')"
- >编辑
- </el-button>
- <el-button :disabled="scope.row.patches_type_desc==='综合类'" type="primary" text icon="el-icon-delete" @click="rowDel(scope.row)"
- >删除
- </el-button>
- </template>
- </avue-crud>
-
- <el-dialog title="上传图斑" class="work-dialog-mange" append-to-body align-center v-model="box" width="550px">
- <el-form
- ref="ruleFormRef"
- style="max-width: 600px"
- :model="ruleForm"
- :rules="rules"
- label-width="auto"
- >
- <el-form-item label="文件名称" prop="name">
- <el-input v-model="ruleForm.name" />
- </el-form-item>
- <el-form-item label="图斑类型" prop="region">
- <el-select v-model="ruleForm.region" placeholder="请选择图斑类型">
- <el-option
- v-for="item in allspotTypeOption"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item class="center-align">
- <el-upload
- action="#"
- :show-file-list="false"
- :before-upload="e => uploadFlightFile(e, '1')"
- accept=".kmz, .kml, .zip"
- >
- <el-button type="primary"> 图斑上传 </el-button>
- </el-upload>
- </el-form-item>
- <el-form-item class="center-align">
- <span>注：仅支持gis平台导出的zip压缩文件</span>
- </el-form-item>
- </el-form>
- </el-dialog>
- <!-- 图斑详情 -->
- <SpotDetails
- v-model:show="uploadPatchDialog"
- :title="spotDetailsTitle"
- :detailid="detailid"
- :detailList="detailList"
- :spotTypeOption="allspotTypeOption"
- :regionalData="regionalData"
- ></SpotDetails>
- </basic-container>
-</template>
-<script setup>
-import { findAreaName } from '@/utils/areaUtils';
-import {
- spotManagementTableApi,
- searchManagementApi,
- uploadManagementApi,
- tableMapListApi,
- exportExcel,
- patchDeleteApi,
- listOfSpotTypesApi,
-} from '@/api/patchManagement/index';
-import { getRegionTreeAll } from '@/api/job/task';
-import { ref, computed, watch } from 'vue';
-import { useStore } from 'vuex';
-import { useRouter } from 'vue-router';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { getListPage, getDetail, add, update, remove, enable, disable } from '@/api/resource/oss';
-import func from '@/utils/func';
-import patchDetails from '@/views/resource/components/patchDetails.vue';
-import SpotDetails from '@/views/resource/components/spotDetails.vue';
-const spotDetailsTitle = ref('');
-const detailList = ref('');
-const store = useStore();
-const router = useRouter();
-const ruleFormRef = ref(null);
-let deptTreeData = ref([]);
-const regionalScope = ref([]);
-const spotTypeOption = ref([]);
-const creatorOption = ref([]);
-const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
-const ruleForm = reactive({
- name: '',
- region: '',
-});
-const rules = reactive({
- name: [{ required: true, message: '请输入', trigger: 'blur' }, { trigger: 'blur' }],
- region: [
- {
- required: true,
- message: '请选择',
- trigger: 'change',
- },
- ],
-});
-
-// ===== state =====
-const form = ref({});
-const query = ref({});
-const loading = ref(true);
-const box = ref(false);
-
-const page = ref({
- pageSize: 20,
- currentPage: 1,
- total: 0,
- lotTypeId: '',
- createUser: '',
- areaCode: '',
- fileName: '',
-});
-
-const selectionList = ref([]);
-const option = ref({
- emptyBtnText: '重置',
- emptyBtnIcon: 'el-icon-refresh',
- align: 'center',
- headerAlign: 'center',
- addBtn: false,
- tip: false,
- searchShow: true,
- searchGutter: 30,
- searchMenuPosition: 'left',
- searchMenuSpan: 4,
- border: true,
- index: true,
- indexLabel: '序号',
- indexWidth: 60,
- selection: true,
- grid: false,
- menuWidth: 240,
- labelWidth: 100,
- dialogWidth: 880,
- dialogClickModal: false,
- height: 'auto',
- calcHeight: 20,
- refreshBtn: false,
- gridBtn: false,
- searchShowBtn: false,
- columnBtn: false,
- viewBtn: false,
- editBtn: false,
- delBtn: false,
- column: [
- {
- label: '文件名称',
- prop: 'file_name',
- span: 24,
- search: true,
- overHidden: true,
- showOverflowTooltip: true,
- searchSpan: 4,
- rules: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
- },
- {
- label: '图斑类型',
- prop: 'patches_type_desc',
- span: 24,
- // searchLabelWidth: 100,
- search: true,
- searchSpan: 4,
- type: 'select',
- dicData: spotTypeOption,
- props: {
- label: 'label',
- value: 'value',
- },
- rules: [{ required: true, message: '请选择图斑类型', trigger: 'blur' }],
- },
- {
- label: '图斑数量',
- prop: 'patches_num',
- span: 24,
- rules: [{ required: true, message: '请输入图斑数量', trigger: 'blur' }],
- },
- {
- label: '异常图斑数量',
- prop: 'exception_num',
- span: 24,
- rules: [{ required: true, message: '请输入异常图斑数量', trigger: 'blur' }],
- },
- {
- label: '行政区划',
- prop: 'areaName',
- span: 24,
- width: 180,
- // searchLabelWidth: 100,
- search: true,
- searchSpan: 4,
- type: 'tree',
- dicData: deptTreeData,
- props: {
- label: 'name',
- value: 'id',
- children: 'childrens',
- },
- rules: [{ required: true, message: '请选择行政区划', trigger: 'blur' }],
- },
- {
- label: '数据来源',
- prop: 'dataFrom',
- span: 24,
- rules: [{ required: true, message: '请输入数据来源', trigger: 'blur' }],
- },
- {
- label: '创建时间',
- prop: 'create_time',
- span: 24,
- rules: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
- },
- {
- label: '创建人',
- prop: 'user_name',
- span: 24,
- // searchLabelWidth: 100,
- search: true,
- searchSpan: 4,
- type: 'select',
- dicData: creatorOption,
- props: {
- label: 'label',
- value: 'value',
- },
- rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
- },
- ],
-});
-
-const data = ref([]);
-const crudRef = ref(null);
-const uploadPatchDialog = ref(null);
-const detailid = ref(null);
-// ===== computed =====
-const userInfo = computed(() => store.getters.userInfo);
-const permission = computed(() => store.getters.permission);
-const permissionList = computed(() => ({
- addBtn: !!permission.value.oss_add,
- viewBtn: !!permission.value.oss_view,
- delBtn: !!permission.value.oss_delete,
- editBtn: !!permission.value.oss_edit,
-}));
-
-const ids = computed(() => selectionList.value.map(ele => ele.id).join(','));
-// 获取行政区划
-const regionalData = ref([]);
-const requestDockInfo = () => {
- getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
- const rawData = res.data.data ? [res.data.data] : [];
- regionalData.value = rawData;
- const filterTree = nodes => {
- return nodes.filter(node => {
- const nodeCodeStr = node.id.toString();
- const isMatched = regionalScope.value.some(
- code => nodeCodeStr.startsWith(code.toString()) || code.toString().startsWith(nodeCodeStr)
- );
-
- if (node.childrens && node.childrens.length) {
- node.childrens = filterTree(node.childrens);
- if (node.childrens.length) return true;
- }
-
- return isMatched;
- });
- };
- deptTreeData.value = filterTree(rawData);
- onLoad(page.value);
- });
-};
-// 获取搜索数据
-const getsearchManagementApi = () => {
- searchManagementApi().then(res => {
- const uniqueMap = new Map();
- res.data.data.lot_values.forEach(item => {
- const [key, value] = Object.entries(item)[0];
- if (!uniqueMap.has(key)) {
- uniqueMap.set(key, value);
- }
- });
- const creatorOptionuniqueMap = new Map();
- res.data.data.user_names.forEach(item => {
- const [key, value] = Object.entries(item)[0];
- if (!creatorOptionuniqueMap.has(key)) {
- creatorOptionuniqueMap.set(key, value);
- }
- });
- spotTypeOption.value = Array.from(uniqueMap).map(([key, value]) => ({
- label: value,
- value: key,
- }));
- creatorOption.value = Array.from(creatorOptionuniqueMap).map(([key, value]) => ({
- label: value,
- value: key,
- }));
- regionalScope.value = res.data.data.area_codes;
- requestDockInfo();
- });
-};
-const allspotTypeOption = ref([]);
-// 获取上传图斑类型
-const getlistOfSpotTypesApi = () => {
- const searchparams = {
- current: 1,
- size: 9999,
- };
- listOfSpotTypesApi(searchparams).then(res => {
- allspotTypeOption.value = res.data.data.records.map(item => ({
- label: item.patches_type,
- value: item.id,
- }));
- });
-};
-// ===== watch =====
-watch(
- () => form.value.category,
- () => {
- const category = func.toInt(form.value.category);
- option.value.column.forEach(item => {
- if (item.prop === 'appId') {
- item.display = category === 4;
- }
- });
- }
-);
-// ===== methods =====
-const rowSave = (row, done, loading) => {
- add(row).then(
- () => {
- onLoad(page.value);
- ElMessage.success('操作成功!');
- done();
- },
- error => {
- console.log(error);
- loading();
- }
- );
-};
-
-const rowUpdate = (row, index, done, loading) => {
- update(row).then(
- () => {
- onLoad(page.value);
- ElMessage.success('操作成功!');
- done();
- },
- error => {
- console.log(error);
- loading();
- }
- );
-};
-
-const rowDel = row => {
- ElMessageBox.confirm('确定将选择数据删除?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- })
- .then(() => patchDeleteApi(row.id)) // 直接传递ID
- .then(() => {
- onLoad(page.value);
- ElMessage.success('操作成功!');
- });
-};
-
-const searchReset = () => {
- page.value.areaCode = '';
- page.value.createUser = '';
- page.value.fileName = '';
- page.value.lotTypeId = '';
- page.value.currentPage = 1;
- page.value.pageSize = 20;
- onLoad(page.value);
-};
-
-const searchChange = (params, done) => {
- page.value.currentPage = 1;
- page.value.lotTypeId = params.patches_type_desc;
- page.value.createUser = params.user_name;
- page.value.fileName = params.file_name;
- page.value.areaCode = params.areaName;
- page.value.createUser = params.user_name;
- onLoad(page.value);
- done();
-};
-const selectionChange = list => {
- selectionList.value = list;
-};
-
-const selectionClear = () => {
- selectionList.value = [];
- crudRef.value?.toggleSelection();
-};
-
-const handleDebug = row => {
- box.value = true;
-};
-const beforeOpen = (done, type) => {
- // if (['edit', 'view'].includes(type)) {
- // getDetail(form.value.id).then(res => {
- // form.value = res.data.data
- // })
- // }
- done();
-};
-
-const currentChange = currentPage => {
- page.value.currentPage = currentPage;
-};
-
-const sizeChange = pageSize => {
- page.value.pageSize = pageSize;
-};
-
-const refreshChange = () => {
- onLoad(page.value);
-};
-
-const onLoad = (pageInfo, params = {}) => {
- const searchparams = {
- current: pageInfo.currentPage,
- size: pageInfo.pageSize,
- lotTypeId: pageInfo.lotTypeId,
- fileName: pageInfo.fileName,
- areaCode: pageInfo.areaCode,
- createUser: pageInfo.createUser,
- };
- loading.value = true;
- spotManagementTableApi(searchparams).then(res => {
- const d = res.data.data;
- page.value.total = d.total;
- data.value = d.records.map(i => ({
- ...i,
- dataFrom: i.date_from === 0 ? '本地上传' : '国土调查云',
- areaName: findAreaName(i.area_code, regionalData.value, true),
- }));
- loading.value = false;
- selectionClear();
- });
-};
-
-// 图斑详情/编辑
-const uploadPatch = (row, type = 'detail') => {
- detailid.value = row.id;
- uploadPatchDialog.value = true;
- spotDetailsTitle.value = type === 'detail' ? '图斑详情' : '图斑编辑';
- detailList.value = row;
-};
-
-// 跳转至图斑类型管理页面
-const goTypeManagement = () => {
- router.push({ path: '/resource/patchTypeManagement' });
-};
-
-// 下载图斑
-const downloadPatch = () => {
- if (!selectionList.value.length) {
- return ElMessage.warning('请选择需要导出的数据');
- }
- const a = selectionList.value.map(i => Number(i.id));
- exportExcel(a).then(res => {
- const elink = document.createElement('a');
- elink.download = new Date().getTime() + '.xls';
- elink.style.display = 'none';
- const blob = new Blob([res.data], {
- type: 'application/x-msdownload',
- });
- elink.href = URL.createObjectURL(blob);
- document.body.appendChild(elink);
- elink.click();
- document.body.removeChild(elink);
- loading.value = false;
- });
-};
-// 图斑上传
-const uploadFlightFile = async (file, t) => {
- loading.value = true;
- try {
- const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
- if (!['kmz', 'kml', 'zip'].includes(fileSuffix)) {
- ElMessage.error('请上传zip/kmz/kml格式的文件');
- return;
- }
- box.value = false;
- let data = new FormData();
- let type = t === '3' ? '' : t;
- const params = {
- file: file,
- fileName: ruleForm.name,
- LotTypeId: ruleForm.region,
- };
-
- Object.keys(params).forEach(key => {
- data.append(key, params[key]);
- });
-
- const res = await uploadManagementApi(data);
- if (res.data.code !== 0) {
- ElMessage.error('上传失败');
- return;
- }
-
- ElMessage.success('上传成功');
-
- // 重置表单
- ruleForm.name = '';
- ruleForm.region = '';
- if (ruleFormRef.value) {
- ruleFormRef.value.resetFields();
- }
-
- searchReset();
- } catch (error) {
- loading.value = false;
- } finally {
- loading.value = false;
- }
-};
-provide('searchReset', searchReset);
-onMounted(() => {
- getsearchManagementApi();
- getlistOfSpotTypesApi();
-});
-</script>
-
-<style scoped lang="scss">
-.center-align :deep(.el-form-item__content) {
- justify-content: center !important;
-}
-</style>
diff --git a/applications/task-work-order/src/utils/cesium/DrawPolygon.js b/packages/utils/map/DrawPolygon.js
similarity index 95%
rename from applications/task-work-order/src/utils/cesium/DrawPolygon.js
rename to packages/utils/map/DrawPolygon.js
index 598024f..77ec1e6 100644
--- a/applications/task-work-order/src/utils/cesium/DrawPolygon.js
+++ b/packages/utils/map/DrawPolygon.js
@@ -1,9 +1,8 @@
import * as Cesium from 'cesium'
import * as turf from '@turf/turf'
-import { boxTransformScale } from '@/utils/turfFunc'
import { ElMessage } from 'element-plus'
-import { getPointPositionsHeight } from '@/utils/cesium/mapUtil'
-import { flyVisual } from '@ztzf/utils'
+import { flyVisual, getPointPositionsHeight } from './index'
+import { MapTooltip } from './MapTooltip'
/**
* 多边形绘制与编辑工具类
@@ -65,6 +64,8 @@
this.delPoint = this.delPoint.bind(this)
// 外部订阅者
this.listeners = []
+ // 绘制提示 tooltip
+ this.drawingTooltip = null
}
// 实体命名常量
@@ -433,6 +434,11 @@
const cartesian = this.viewer.scene.pickPosition(movement.endPosition)
if (!cartesian) return
+ // 更新绘制提示 tooltip 位置
+ if (this.drawingMode && this.drawingTooltip) {
+ this.drawingTooltip.move(movement.endPosition)
+ }
+
// 编辑模式下，拖拽点实时更新
if (this.editingMode && this.draggedEntity?.customData) {
this.draggedEntity.position = cartesian
@@ -581,6 +587,11 @@
finishDrawing() {
this.curPolygon.positions.pop()
+ // 隐藏绘制提示
+ if (this.drawingTooltip) {
+ this.drawingTooltip.hide()
+ }
+
if (this.curPolygon.positions.length >= 3) {
this.drawingMode = false
this.editingMode = true
@@ -609,6 +620,11 @@
this.removeMenuPopup()
this.notify('getPolygonPositions', [])
this.startDrawing()
+
+ // 重新显示绘制提示
+ if (this.drawingTooltip) {
+ this.drawingTooltip.show('左键点击绘制，双击结束绘制')
+ }
}
// 删除图斑
delSpot() {
@@ -727,6 +743,15 @@
this.addPosition(item, false)
})
+ const boxTransformScale = (data, multiple = 3) => {
+ const line = turf.lineString(data)
+ const bbox = turf.bbox(line)
+ const bboxPolygon = turf.bboxPolygon(bbox)
+ const scaledPolygon = turf.transformScale(bboxPolygon, multiple)
+
+ return turf.bbox(scaledPolygon)
+ }
+
// 视角飞入区域
const newBox = boxTransformScale(
positions.map(item => [item.lng, item.lat]),
@@ -752,6 +777,12 @@
initHandler(viewer) {
this.viewer = viewer
this.startDrawing()
+
+ // 初始化绘制提示 tooltip
+ if (!this.drawingTooltip) {
+ this.drawingTooltip = new MapTooltip(viewer)
+ this.drawingTooltip.show('左键点击绘制，双击结束绘制')
+ }
if (!this.handler) {
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
@@ -800,5 +831,11 @@
this.removeEntities()
this.removeHandler()
this.enableMapControl()
+
+ // 销毁绘制提示 tooltip
+ if (this.drawingTooltip) {
+ this.drawingTooltip.destroy()
+ this.drawingTooltip = null
+ }
}
}
diff --git a/packages/utils/map/index.js b/packages/utils/map/index.js
index 2503669..9d137c7 100644
--- a/packages/utils/map/index.js
+++ b/packages/utils/map/index.js
@@ -1,5 +1,6 @@
import * as Cesium from 'cesium'
import { MapTooltip } from './MapTooltip'
+import { DrawPolygon } from './DrawPolygon'
/**
* 飞到中心点并且所有点在可视范围
* @param positionsData 二维数组，每项为 [lon, lat] 或 三维数组 [lon, lat, height]
@@ -61,4 +62,46 @@
})
}
-export { MapTooltip, flyVisual }
+// 批量获取点数组经纬度对应高度信息
+const getPointPositionsHeight = (data, viewer, droneHeight = null) => {
+ return new Promise((resolve, reject) => {
+ if (!data || !data.length) {
+ resolve([])
+ return
+ }
+ // 假设 viewer 已经初始化并且 terrainProvider 是有效的
+ const terrainProvider = viewer?.terrainProvider
+ // 创建 Cartographic 对象
+ const cartographics = data.map(item => {
+ const { lng, lat } = item
+ return Cesium.Cartographic.fromDegrees(Number(lng), Number(lat))
+ })
+ // 获取地形数据的Promise
+ const promise = Cesium.sampleTerrainMostDetailed(terrainProvider, cartographics)
+ // 使用 Cesium.when 处理 Promise
+ promise
+ .then(function (updatedPositions) {
+ // 是一个数组，包含更新后的 Cartographic 对象
+ const newPosition = updatedPositions.map((item, index) => {
+ const longitude = Cesium.Math.toDegrees(item.longitude)
+ const latitude = Cesium.Math.toDegrees(item.latitude)
+ let pointData = {
+ ...data[index],
+ longitude,
+ latitude,
+ ASL: Number(item.height),
+ customHeight: Number(item.height),
+ }
+ if (droneHeight) pointData.TH = Number(item.height) + Number(droneHeight)
+ return pointData
+ })
+ resolve(newPosition)
+ })
+ .catch(function (error) {
+ console.log('获取高程时发生错误:', error)
+ resolve(data.map(item => ({ ...item, ASL: 0, customHeight: 0, longitude: item.lng, latitude: item.lat })))
+ })
+ })
+}
+
+export { MapTooltip, flyVisual, getPointPositionsHeight, DrawPolygon }
diff --git a/packages/utils/package.json b/packages/utils/package.json
index a25ac89..c4c6f41 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,18 +1,22 @@
{
- "name": "@ztzf/utils",
- "version": "1.0.0",
- "private": true,
- "description": "工具类",
- "main": "index.js",
- "license": "ISC",
- "peerDependencies": {
- "cesium": "catalog:",
- "dayjs": "catalog:",
- "decimal.js": "catalog:"
- },
- "devDependencies": {
- "cesium": "catalog:",
- "dayjs": "catalog:",
- "decimal.js": "catalog:"
- }
+ "name": "@ztzf/utils",
+ "version": "1.0.0",
+ "private": true,
+ "description": "工具类",
+ "main": "index.js",
+ "license": "ISC",
+ "peerDependencies": {
+ "@turf/turf": "catalog:",
+ "cesium": "catalog:",
+ "dayjs": "catalog:",
+ "decimal.js": "catalog:",
+ "element-plus": "catalog:"
+ },
+ "devDependencies": {
+ "@turf/turf": "catalog:",
+ "cesium": "catalog:",
+ "dayjs": "catalog:",
+ "decimal.js": "catalog:",
+ "element-plus": "catalog:"
+ }
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1189736..eb29411 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -878,6 +878,12 @@
packages/utils:
devDependencies:
+ '@turf/turf':
+ specifier: 'catalog:'
+ version: 6.5.0
+ '@ztzf/utils':
+ specifier: workspace:*
+ version: 'link:'
cesium:
specifier: 'catalog:'
version: 1.126.0
@@ -887,6 +893,9 @@
decimal.js:
specifier: 'catalog:'
version: 10.6.0
+ element-plus:
+ specifier: 'catalog:'
+ version: 2.9.11(vue@3.5.27(typescript@5.9.3))
uniapps/work-app:
dependencies:
--
Gitblit v1.9.3