From bb62345c1aedd18879f3652d62f7211f3cc3421a Mon Sep 17 00:00:00 2001 From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com> Date: Tue, 1 Jul 2025 10:34:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/home.js | 27 + src/style/naiveUi.scss | 24 + src/views/home/components/control-deck.vue | 61 +- src/views/home/components/left-one.vue | 15 +- src/views/home/components/left-two.vue | 26 +- .../modal-content/add-or-edit-form.vue | 735 +++++++++++++----- .../modal-content/add-or-edit-marker-form.vue | 111 ++- .../modal-content/inspection-task.vue | 161 ++-- .../modal-content/preset-setting.vue | 1 + src/views/home/components/right-one.vue | 164 +++- src/views/home/index.vue | 4 +- 11 files changed, 989 insertions(+), 340 deletions(-) diff --git a/src/api/home.js b/src/api/home.js index 8cfb116..fdafd2e 100644 --- a/src/api/home.js +++ b/src/api/home.js @@ -28,11 +28,38 @@ export const getMarkerListAllApi = (data) => { export const addTaskApi = (data) => { return service.post('/robot-screen-api/robot/instruct/addTasks', data) } + // 获取巡视任务列表 export const getTaskListApi = (data) => { return service.get('/robot-screen-api/robot/instruct/list', { params: data }) } + // 修改巡视任务启用状态 export const updateTaskEnableApi = (data) => { return service.post('/robot-screen-api/robot/instruct/issuedTask', data) } + +// 获取巡视任务详情 +export const getTaskDetailApi = (data) => { + return service.post('/robot-screen-api/robot/instruct/getTaskDetails', data) +} + +// 修改巡视任务 +export const updateTaskApi = (data) => { + return service.post('/robot-screen-api/robot/instruct/updateTask', data) +} + +// 删除巡视任务 +export const deleteTaskApi = (data) => { + return service.post('/robot-screen-api/robot/instruct/delTaskData', data) +} + +// 新增人员 +export const addPersonApi = (data) => { + return service.post('/robot-screen-api/robot/sbdUser/addSbdUser', data) +} + +// 获取人员列表 +export const getPersonListApi = (data) => { + return service.get('/robot-screen-api/robot/instruct/list', { params: data }) +} diff --git a/src/style/naiveUi.scss b/src/style/naiveUi.scss index f5d847c..8e5f0d5 100644 --- a/src/style/naiveUi.scss +++ b/src/style/naiveUi.scss @@ -39,6 +39,14 @@ border: 1px solid #1090f0; } +.n-checkbox .n-checkbox-box .n-checkbox-box__border { + border: 1px solid #1090f0; +} + +.n-checkbox .n-checkbox-box { + background-color: #1d3861; +} + .n-input:not(.n-input--disabled).n-input--focus { background-color: #1d3861; color: #fff; @@ -110,4 +118,20 @@ .n-data-table .n-data-table-td { border-bottom: none; +} + +.n-base-selection.n-base-selection--error-status:not(.n-base-selection-disabled).n-base-selection--active .n-base-selection-label { + background-color: #1d3861; +} + +.n-input.n-input--error-status:not(.n-input--disabled).n-input--focus,.n-checkbox-box { + background-color: #1d3861; +} + +.n-radio .n-radio__label { + color: #fff; +} + +.n-radio .n-radio__dot { + background-color: #1d3861; } \ No newline at end of file diff --git a/src/views/home/components/control-deck.vue b/src/views/home/components/control-deck.vue index 8ce83a1..d3b4a23 100644 --- a/src/views/home/components/control-deck.vue +++ b/src/views/home/components/control-deck.vue @@ -2,34 +2,66 @@
- - + +
摄像头
 - -
升降杆
+ + +
+ + + + + + + + {{ robotBaseInfo.dl }}% +
- +
底盘
 - - + +
速度
30
 - -
+ + + +
+
+
+ {{ robotBaseInfo.type }} +
- +
速度
30
@@ -286,6 +318,12 @@ import { import { handleRobotActionApi } from '@/api/home' import { useRobotDataStore } from '@/store/robot' import { getRobotTokenFn, getRobotDeviceListFn } from '@/utils/getRobotInfo.js' +import { + BatteryHalfSharp, + BatteryDeadSharp, + BatteryFullSharp, + BatteryChargingSharp, +} from '@vicons/ionicons5' import { useMessage } from 'naive-ui' import { debounce } from 'lodash' @@ -518,13 +556,14 @@ onMounted(async () => { justify-content: space-around; & div:last-child { - width: 32px; + // width: 32px; height: 18px; background-color: #005899; border-radius: 6px; font-size: 12px; text-align: center; line-height: 18px; + padding: 4px 10px; } } diff --git a/src/views/home/components/left-one.vue b/src/views/home/components/left-one.vue index b17e816..8035b7b 100644 --- a/src/views/home/components/left-one.vue +++ b/src/views/home/components/left-one.vue @@ -59,6 +59,7 @@
@@ -69,6 +70,7 @@
@@ -89,7 +91,14 @@ const inspectionTaskVisible = ref(false) // 巡视任务 const addInspectionTaskVisible = ref(false) // 新增巡视任务 const markerInfo = ref({}) // 新增预置点位信息 const markerInfoNew = ref({}) // 新增预置点位信息 修改后的数据 +const addOrEditInfo = ref({ + type: '', + id: '', +}) // 新增/修改巡视任务 const formType = ref('') // 新增/修改 +const isChange = ref({ + is_change: 'error', +}) // 是否修改 const props = defineProps({ fullScreenVisible: { @@ -160,7 +169,8 @@ const onHandleConfirm = (info) => { } // 新增巡视任务 打开新增巡视任务弹框 -const onHandleAddInspectionTask = () => { +const onHandleAddInspectionTask = (info) => { + addOrEditInfo.value = info addInspectionTaskVisible.value = true } @@ -170,7 +180,8 @@ const onHandleCloseInspectionModal = () => { } // 关闭新增或修改巡视任务弹框 -const onHandleCloseModalInner = () => { +const onHandleCloseModalInner = (value) => { + isChange.value.is_change = value addInspectionTaskVisible.value = false } diff --git a/src/views/home/components/left-two.vue b/src/views/home/components/left-two.vue index cc5dfda..688e005 100644 --- a/src/views/home/components/left-two.vue +++ b/src/views/home/components/left-two.vue @@ -5,12 +5,7 @@
- + + + + 地图切换 +
@@ -28,6 +27,7 @@ import { ref, nextTick, onMounted } from 'vue' import TitleBackground from '@/components/TitleBackground/index.vue' import { getRobotDeviceListFn, getRobotMapInfoFn, getRobotPointsInfoFn } from '@/utils/getRobotInfo' +import imgSrc from '@/assets/demo.png' const mapTitle = ref('巡检地图') // 地图标题 const svgMapRef = ref(null) // 地图svg引用 @@ -37,6 +37,8 @@ const xScale = ref(1) // 地图x轴缩放比例 const yScale = ref(1) // 地图y轴缩放比例 const devicePoints = ref([]) // 机器人点位 const mapInfo = ref({}) // 地图信息 +const mapImage = ref('') // 地图图片 +const isMapSwitch = ref(false) // 是否切换地图 // 获取map-container的宽高赋值给svg const mapContainerRef = ref(null) // 计算宽高比 @@ -57,6 +59,11 @@ const markPoints = (Robot_x, Robot_y) => { devicePoints.value.push({ x: Robot_x, y: logicalY1 }) } +const onHandleMapSwitch = () => { + isMapSwitch.value = !isMapSwitch.value + mapImage.value = isMapSwitch.value ? imgSrc : mapInfo.value?.mapBase64 +} + onMounted(async () => { nextTick(() => { svgWidth.value = mapContainerRef.value.clientWidth @@ -67,6 +74,7 @@ onMounted(async () => { const deviceInfo = await getRobotDeviceListFn() // 获取地图信息 mapInfo.value = await getRobotMapInfoFn(deviceInfo?.puId) + mapImage.value = mapInfo.value?.mapBase64 // 计算缩放比例 calculateScale(mapInfo.value?.mapWidth, mapInfo.value?.mapHeight) // 获取机器人点位 @@ -90,6 +98,12 @@ onMounted(async () => { .svg-map-container { position: absolute; } + + .map-switch-btn { + position: absolute; + right: 4px; + top: 4px; + } } } diff --git a/src/views/home/components/modal-content/add-or-edit-form.vue b/src/views/home/components/modal-content/add-or-edit-form.vue index 2abdf23..47dbe53 100644 --- a/src/views/home/components/modal-content/add-or-edit-form.vue +++ b/src/views/home/components/modal-content/add-or-edit-form.vue @@ -2,8 +2,8 @@
- + - + - + - + @@ -125,31 +127,16 @@ - - @@ -165,6 +152,34 @@ + + + + + + + + + + + @@ -174,14 +189,14 @@
- + @@ -205,7 +220,7 @@ :options="actionList" style="width: 110px" v-model:value="item.actionType" - @change="handleChangeActionType($event, index)" + @update:value="handleChangeActionType($event, index)" /> @@ -221,6 +236,7 @@ quaternary size="small" color="#1090f0" + v-if="index === 0" @click="onHandleAddRoute" > - diff --git a/src/views/home/components/modal-content/add-or-edit-marker-form.vue b/src/views/home/components/modal-content/add-or-edit-marker-form.vue index 15e8bf9..4137b80 100644 --- a/src/views/home/components/modal-content/add-or-edit-marker-form.vue +++ b/src/views/home/components/modal-content/add-or-edit-marker-form.vue @@ -94,6 +94,14 @@ + + 前往点位 + { // 确认按钮 const onHandleConfirm = () => { // emits('onHandleConfirm', markerParams.value) + handleRobotActionApi({ puId: deviceInfo.value?.puId, type: '2', @@ -249,36 +260,66 @@ const onHandleConfirm = () => { console.log(res.data, 'res?.data') const { Robot_x, Robot_y, PTZ_x, PTZ_y, PTZ_zoom, Robot_theta } = res?.data.data - markerParams.value.xCount = Robot_x - markerParams.value.yCount = Robot_y - markerParams.value.PTZ_x = PTZ_x - markerParams.value.PTZ_y = PTZ_y - markerParams.value.markerAngle = Robot_theta - markerParams.value.PTZ_zoom = PTZ_zoom - // 组装参数 - // const { PTZ_zoom, markerAngle, PTZ_x, PTZ_y, xCount, yCount, mapId, markerName } = - // markerParams.value + // 如果是修改时判断当前位置是否与点位一致 + if (markerParams.value.type === '修改') { + if ( + Math.abs(Robot_x - markerParams.value.xCount) > 2 || + Math.abs(Robot_y - markerParams.value.yCount) > 2 + ) { + dialog.warning({ + title: '温馨提示', + content: + '机器人当前位置与预置点位不一致，您可以点击前往点位按钮，也可以选择继续修改？', + positiveText: '前往点位', + negativeText: '继续修改', + onPositiveClick: () => { + onHandleGoToPoint() + }, + onNegativeClick: async () => { + markerParams.value.xCount = Robot_x + markerParams.value.yCount = Robot_y + markerParams.value.PTZ_x = PTZ_x + markerParams.value.PTZ_y = PTZ_y + markerParams.value.markerAngle = Robot_theta + markerParams.value.PTZ_zoom = PTZ_zoom - const addMarkerParams = { - ptzz: markerParams.value.PTZ_zoom, - theta: markerParams.value.markerAngle, - ptzx: markerParams.value.PTZ_x, - ptzy: markerParams.value.PTZ_y, - positionX: Math.ceil(markerParams.value.xCount), - positionY: Math.ceil(markerParams.value.yCount), - mapId: markerParams.value.mapId, - pointName: markerParams.value.markerName, - } - const { data: result } = await addMarkerApi(addMarkerParams) + const addMarkerParams = { + ptzz: markerParams.value.PTZ_zoom, + theta: markerParams.value.markerAngle, + ptzx: markerParams.value.PTZ_x, + ptzy: markerParams.value.PTZ_y, + positionX: Math.ceil(markerParams.value.xCount), + positionY: Math.ceil(markerParams.value.yCount), + mapId: markerParams.value.mapId, + pointName: markerParams.value.markerName, + } - if (result.code == 200) { - message.success('新增点位成功') - onHandleCloseAddModal() + if (markerParams.value.type === '修改') { + addMarkerParams.id = markerParams.value.id + } + + const { data: result } = await addMarkerApi(addMarkerParams) + + if (result.code == 200) { + message.success( + markerParams.value.type === '新增' + ? '新增点位成功' + : '修改点位成功', + ) + onHandleCloseAddModal() + } + }, + }) + } } }) } +const onHandleGoToPoint = () => { + handleRobotAction(Math.ceil(markerParams.value.xCount), Math.ceil(markerParams.value.yCount)) +} + const onlyAllowNumber = (value) => !value || /^\d+$/.test(value) watch( @@ -294,6 +335,15 @@ watch( markerParams.value.markerPreset = newVal?.markerPreset markerParams.value.xCount = Math.ceil(newVal?.xCount).toString() markerParams.value.yCount = Math.ceil(newVal?.yCount).toString() + + if (newVal?.type === '新增') { + handleRobotAction( + Math.ceil(markerParams.value.xCount), + Math.ceil(markerParams.value.yCount), + ) + } else { + markerParams.value.id = newVal?.id + } }, { immediate: true, @@ -314,17 +364,4 @@ onBeforeUnmount(() => { clearInterval(isCurrentPosition.value) } }) - -watch( - () => deviceInfo.value, - (newVal) => { - if (newVal.puId) { - handleRobotAction( - Math.ceil(markerParams.value.xCount), - Math.ceil(markerParams.value.yCount), - deviceInfo.value?.puId, - ) - } - }, -) diff --git a/src/views/home/components/modal-content/inspection-task.vue b/src/views/home/components/modal-content/inspection-task.vue index 8171eae..ab23a2a 100644 --- a/src/views/home/components/modal-content/inspection-task.vue +++ b/src/views/home/components/modal-content/inspection-task.vue @@ -24,13 +24,14 @@ - +
+ 共{{ total }}条 import DialogModal from '@/components/DialogModal/index.vue' -import { AddCircleSharp } from '@vicons/ionicons5' -import { NIcon } from 'naive-ui' -import { NButton, NSwitch, NTag, useMessage } from 'naive-ui' -import { ref } from 'vue' -import { getTaskListApi, updateTaskEnableApi, handleRobotActionApi } from '@/api/home' -import { getRobotDeviceListFn } from '@/utils/getRobotInfo' +import { ref, watch } from 'vue' +import { NButton, NSwitch, useMessage, useDialog } from 'naive-ui' +import { + getTaskListApi, + updateTaskEnableApi, + handleRobotActionApi, + deleteTaskApi, +} from '@/api/home' const emits = defineEmits(['onHandleCloseModal', 'onHandleAddInspectionTask']) -const modalTitle = ref('巡视任务') // 弹框标题 -const addOrEditVisible = ref(false) // 新增或编辑弹框 -const addOrEditTitle = ref('新增巡视任务') // 新增或编辑弹框标题 const total = ref(0) +const modalTitle = ref('巡视任务') // 弹框标题 const message = useMessage() +const dialog = useDialog() +const props = defineProps({ + isChange: { + type: Object, + default: () => ({ + is_change: 'error', + }), + }, +}) const queryParams = ref({ pageNum: 1, pageSize: 10, taskName: '', - // robotId: 'WTBLS204766', }) const btnList = [ @@ -102,11 +111,7 @@ const columns = ref([ key: 'robotName', align: 'center', }, - // { - // title: '地盘名称', - // key: 'age', - // align: 'center', - // }, + { title: '任务频次', key: 'count', @@ -147,7 +152,7 @@ const columns = ref([ render(row) { return h(NSwitch, { value: row.enable == 1 ? true : false, - onChange: (value) => onHandleSwitch(row, value), + 'onUpdate:value': (value) => onHandleSwitch(row, value), }) }, }, @@ -157,62 +162,60 @@ const columns = ref([ align: 'center', width: 260, render(row) { - const buttonS = btnList.map((btn) => { - return h( - NButton, - { - size: 'small', - onClick: () => onHandleBtn(row, btn.btnType), - type: btn.type, - style: { - marginRight: '4px', + const buttonS = btnList + .filter((btn) => { + // 根据条件过滤按钮 + switch (btn.btnType) { + case 1: // 编辑按钮 - 总是显示 + return true + case 2: + return row.taskStatus == 1 && row.enable == 1 + case 3: // 下发 - 只在任务未开始时显示 + return row.enable == 1 + case 4: // 删除 - 只在任务未开始时显示 + return true + } + }) + .map((btn) => { + return h( + NButton, + { + size: 'small', + type: btn.type, + style: { + marginRight: '4px', + }, + onClick: () => onHandleBtn(row, btn.btnType), }, - }, - { default: () => btn.label }, - ) - }) + { default: () => btn.label }, + ) + }) return buttonS }, }, ]) -const data = ref([ - { - age: '2025-06-01 10:00:00', - tags: ['nice'], - isEnable: true, - }, - { - age: '2025-06-01 10:00:00', - tags: ['nice'], - isEnable: false, - }, - { - age: '2025-06-01 10:00:00', - tags: ['nice'], - isEnable: false, - }, -]) +// 数据 +const tableData = ref([]) // 新增按钮 const onHandleAdd = () => { - console.log('新增') - // addOrEditVisible.value = true - // addOrEditTitle.value = '新增巡视任务' - emits('onHandleAddInspectionTask') + emits('onHandleAddInspectionTask', { + type: '新增', + id: '', + }) } // 获取巡视任务列表 const getTaskList = async () => { const { data: res } = await getTaskListApi(queryParams.value) total.value = res.total - data.value = res.rows + tableData.value = res.rows } getTaskList() // 按钮操作组 const onHandleBtn = (row, type) => { - console.log(row, type) // 1. 编辑 2. 立即执行 3. 下发 4. 删除 switch (type) { case 1: @@ -227,14 +230,18 @@ const onHandleBtn = (row, type) => { case 4: onHandleDelete(row) break + case 5: + onHandleStop(row) + break } } // 编辑 const onHandleEditTable = (row) => { - console.log(row) - addOrEditVisible.value = true - addOrEditTitle.value = '编辑巡视任务' + emits('onHandleAddInspectionTask', { + type: '编辑', + id: row.id, + }) } // 立即执行 @@ -244,12 +251,10 @@ const onHandleImmediateExecution = async (row) => { type: '13', puId: row.puid, }) - console.log(res, '立即执行结果') } // 下发 const onHandleSend = async (row) => { - console.log(row) const { data: res } = await updateTaskEnableApi({ taskStatus: '1', id: row.id, @@ -265,8 +270,26 @@ const onHandleSend = async (row) => { } // 删除 -const onHandleDelete = (row) => { - console.log(row) +const onHandleDelete = async (row) => { + dialog.success({ + title: '温馨提示', + content: '确定要删除该任务吗？', + positiveText: '确定', + negativeText: '取消', + draggable: true, + onPositiveClick: async () => { + const { data: res } = await deleteTaskApi({ + id: row.id, + puid: row.puid, + }) + + if (res.data.code == 200) { + message.success('删除成功') + getTaskList() + } + }, + onNegativeClick: () => {}, + }) } // 关闭弹框外层 @@ -274,14 +297,8 @@ const onHandleCloseModal = () => { emits('onHandleCloseModal') } -// 关闭弹框内层 -const onHandleCloseModalInner = () => { - addOrEditVisible.value = false -} - // 启用开关 const onHandleSwitch = async (row, value) => { - console.log(row, value) const { data: res } = await updateTaskEnableApi({ enable: value ? '1' : '0', id: row.id, @@ -295,6 +312,16 @@ const onHandleSwitch = async (row, value) => { message.error('启动失败') } } + +watch( + props.isChange, + (newVal) => { + if (newVal.is_change === 'success') { + getTaskList() + } + }, + { immediate: true }, +) diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 485de21..e018f3e 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -100,7 +100,7 @@ const { baseWidth, baseHeight, scale } = useScale(appRef) const cameraNode_1 = ref({ token: '', puid: '', - idx: 0, + idx: 1, stream: 0, name: '', operateType: 1, @@ -110,7 +110,7 @@ const cameraNode_1 = ref({ const cameraNode_2 = ref({ token: '', puid: '', - idx: 1, + idx: 0, stream: 0, name: '', operateType: 1,