root/apt15e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
caill
2025-08-05 16:30:59 +08:00
parent 7a097b23bb
commit 1f3c73eb86
9 changed files with 69 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/config/mork.js
View File

@@ -96,3 +96,10 @@ export const getMapInfoByCode = () => {
}
return res
}
export const startMapping = () => {
let res = {
code: 200,
message: 'ok'
}
return res
}

27
src/pages/modules/building.vue
View File

@@ -23,9 +23,9 @@
</el-row>
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
</el-dialog>
<transition name="custom-message">
<div v-if="message" class="message">
<i class="el-icon-success"></i>
<transition name="custom-message" >
<div v-if="message" class="message" :style="{'top': isTop ? '.87rem' : '.57rem', 'color': error ? '#F56C6C' : '#67C23A'}">
<i :class="error ? 'el-icon-error' : 'el-icon-success'"></i>
<p>{{ message }}</p>
</div>
</transition>
@@ -35,6 +35,7 @@
<script>
import GlMap from './gl-map1.vue'
import { startMapping, setStation, stopMapping, getLocalMaps, oneClickDeployment, abandonMapping } from '../../config/getData.js'
import { mapGetters } from 'vuex'
export default {
name: 'ModuleBuilding',
components: {
@@ -90,6 +91,7 @@ export default {
keyPoints: [],
disabled: false,
message: '', // 用于显示消息
error: false,
intervalId: null, // 用于存储定时器ID
startTime: null, // 用于记录开始时间
visible: false,
@@ -101,6 +103,9 @@ export default {
}
}
},
computed: {
...mapGetters(['isTop'])
},
beforeDestroy () {
if (this.intervalId) {
clearInterval(this.intervalId)
@@ -157,12 +162,12 @@ export default {
let res = await startMapping(this.mapName)
if (res && res.code === 200) {
this.message = '小车正在建图中'
} else {
this.$message.error(res.message)
this.error = false
}
this.loading.close()
} catch (e) {
this.$message.error(e)
this.message = '建图出现错误，需要重新建图'
this.error = true
this.loading.close()
}
},
@@ -209,18 +214,21 @@ export default {
let res = await stopMapping()
if (res && res.code === 200) {
this.message = '正在建图，请等待。。。'
this.error = false
this.startTime = Date.now() // 记录开始时间
this._getLocalMaps()
this.intervalId = setInterval(this._getLocalMaps, 3000) // 每5秒检查一次
} else {
this.$message.error(res.message)
this.message = ''
this.error = false
this.disabled = false
this.loading.close()
}
} catch (e) {
this.$message.error(e)
this.message = ''
this.error = false
this.disabled = false
this.loading.close()
}
@@ -243,6 +251,7 @@ export default {
if (elapsedTime >= 60000) { // 超过1分钟
clearInterval(this.intervalId) // 停止定时器
this.message = ''
this.error = false
this.$message.error('建图失败，请重新建图')
this.disabled = false
this.loading.close()
@@ -251,6 +260,7 @@ export default {
} else {
clearInterval(this.intervalId) // 停止定时器
this.message = ''
this.error = false
this.$message.error('建图失败，请重新建图')
this.disabled = false
this.loading.close()
@@ -258,6 +268,7 @@ export default {
} catch (e) {
clearInterval(this.intervalId) // 出错时停止定时器
this.message = ''
this.error = false
this.disabled = false
this.$message.error(e)
this.loading.close()
@@ -277,11 +288,13 @@ export default {
this.$message.error(res.message)
}
this.message = ''
this.error = false
this.disabled = false
this.loading.close()
} catch (e) {
this.$message.error(e)
this.message = ''
this.error = false
this.disabled = false
this.loading.close()
}
@@ -308,7 +321,6 @@ export default {
border-radius 4px
position fixed
left 50%
top .87rem
transform translateX(-50%)
background-color #f0f9eb
transition opacity .3s,transform .4s
@@ -319,7 +331,6 @@ export default {
align-items center
font-size .16rem
list-height 1
color #67C23A
p
margin-left 10px
.custom-message-enter, .custom-message-leave-to

355
src/pages/modules/building2.vue
View File

@@ -1,355 +0,0 @@
<template>
<div class="page_container">
<el-row type="flex" justify="space-between">
<el-col :span="10"><button class="button_control" :disabled="disabled" @click="addPoint"><p>打点</p></button></el-col>
<el-col :span="14">
<el-row type="flex" justify="end">
<el-button type="primary" icon="el-icon-zoom-in" size="mini" @click="zoomIn">放大</el-button>
<el-button type="primary" icon="el-icon-zoom-out" size="mini" @click="zoomOut">缩小</el-button>
</el-row>
</el-col>
</el-row>
<div class="canvas-container">
<canvas id="canvas" ref="canvas" width="1920" height="1080"></canvas>
</div>
<el-row type="flex" justify="end"><button class="button_control" :disabled="disabled" @click="_stopMapping"><p>结束建图</p></button></el-row>
<el-dialog
title="设置站点"
:visible.sync="dialogVisible"
width="50%">
<el-form :model="dataForm" ref="dataForm" :label-width="$i18n.locale === 'en-us' ? '' : '1.1rem'" size="mini">
<el-form-item label="站点名称" prop="point">
<el-input v-model="dataForm.point" id="point" @focus="show" data-layout="normal"></el-input>
</el-form-item>
</el-form>
<el-row type="flex" justify="space-around" style="margin-top: .3rem">
<el-col :span="7"><button class="button_control button_control_disabled" @click="dialogVisible = false"><p>{{$t('Cancel')}}</p></button></el-col>
<el-col :span="7"><button class="button_control" @click="_setStation"><p>{{$t('Save')}}</p></button></el-col>
</el-row>
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
</el-dialog>
<p v-if="message">{{ message }}</p>
</div>
</template>
<script>
import { startMapping, setStation, stopMapping, getLocalMaps, oneClickDeployment } from '../../config/getData.js'
export default {
data () {
return {
mapName: '',
dialogVisible: false,
dataForm: {
point: ''
},
keyPoints: [],
disabled: false,
message: '', // 用于显示消息
intervalId: null, // 用于存储定时器ID
startTime: null, // 用于记录开始时间
visible: false,
layout: 'normal',
input: null,
options: {
useKbEvents: false,
preventClickEvent: false
},
points: [], // 存储所有点位坐标
intervalId: null, // 用于存储定时器的 ID
drawingPoints: true, // 是否继续绘制点位
scale: 1, // 缩放比例
gridColor: '#FFFFFF', // 线条颜色
gridLineWidth: 1, // 线条宽度
gridCellSize: 200, // 格子大小
dotColor: '#000000', // 圆点颜色
dotRadius: 5 // 圆点半径（直径为5px，半径为2.5px）
}
},
beforeDestroy () {
if (this.intervalId) {
clearInterval(this.intervalId)
}
},
mounted () {
// this.drawGrid()
this._startMapping()
},
methods: {
show (e) {
// 关闭中文keyboard
let arr = document.querySelectorAll('.hg-theme-default')
arr.forEach((ele) => {
ele.style.visibility = 'hidden'
})
this.input = e.target
this.layout = e.target.dataset.layout
if (!this.visible) {
this.visible = true
}
},
hide () {
this.visible = false
},
accept () {
this.hide()
},
next () {
let inputs = document.querySelectorAll('input')
let found = false;
[].forEach.call(inputs, (item, i) => {
if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
found = true
this.$nextTick(() => {
inputs[i + 1].focus()
})
}
})
if (!found) {
this.input.blur()
this.hide()
}
},
// 开始建图
async _startMapping () {
try {
const getTimestamp = new Date().getTime()
this.mapName = `apt_map_${getTimestamp}`
let res = await startMapping(this.mapName)
if (res) {
if (res.code !== 200) {
this.$message.error(res.message)
}
}
} catch (e) {
this.$message.error(e)
}
},
// 打点
addPoint () {
this.dialogVisible = true
this.dataForm.point = 'B' + (this.keyPoints.length + 1)
},
// 打点->保存
async _setStation () {
this.disabled = true
try {
let res = await setStation(this.dataForm.point)
if (res) {
if (res.code === 200) {
this.$message({
type: 'success',
message: res.message
})
this.keyPoints.push(this.dataForm.point)
} else {
this.$message.error(res.message)
}
}
this.dialogVisible = false
this.visible = false
this.disabled = false
} catch (e) {
this.$message.error(e)
this.dialogVisible = false
this.visible = false
this.disabled = false
}
},
// 结束建图
async _stopMapping () {
this.disabled = true
try {
let res = await stopMapping()
if (res) {
if (res.code === 200) {
this.$message({
type: 'success',
message: res.message
})
this.message = ''
this.startTime = Date.now() // 记录开始时间
this.intervalId = setInterval(this._getLocalMaps, 5000) // 每5秒检查一次
// this._oneClickDeployment()
} else {
this.$message.error(res.message)
}
}
this.disabled = false
} catch (e) {
this.$message.error(e)
this.disabled = false
}
},
async _getLocalMaps () {
try {
let res = await getLocalMaps()
if (res && res.code === 200) {
res.data(el => {
if (el.id === this.mapName) {
clearInterval(this.intervalId) // 停止定时器
await this._oneClickDeployment()
}
})
} else {
const elapsedTime = Date.now() - this.startTime
if (elapsedTime >= 60000) { // 超过1分钟
clearInterval(this.intervalId) // 停止定时器
this.message = '建图失败，请重新建图'
}
}
} catch (e) {
clearInterval(this.intervalId) // 出错时停止定时器
this.$message.error(e)
}
},
async _oneClickDeployment () {
try {
let res = await oneClickDeployment(this.mapName)
if (res) {
if (res.code === 200) {
this.$message({
type: 'success',
message: res.message
})
} else {
this.$message.error(res.message)
}
}
} catch (e) {
this.$message.error(e)
}
},
drawGrid () {
const canvas = this.$refs.canvas
const ctx = canvas.getContext('2d')
const width = canvas.width
const height = canvas.height
// 清空画布
ctx.clearRect(0, 0, width, height)
// 绘制格子
for (let x = 0; x <= width; x += this.gridCellSize * this.scale) {
ctx.beginPath()
ctx.moveTo(x, 0)
ctx.lineTo(x, height)
ctx.strokeStyle = this.gridColor
ctx.lineWidth = this.gridLineWidth
ctx.stroke()
}
for (let y = 0; y <= height; y += this.gridCellSize * this.scale) {
ctx.beginPath()
ctx.moveTo(0, y)
ctx.lineTo(width, y)
ctx.strokeStyle = this.gridColor
ctx.lineWidth = this.gridLineWidth
ctx.stroke()
}
// 绘制圆点
for (let x = 0; x < width; x += this.gridCellSize * this.scale) {
for (let y = 0; y < height; y += this.gridCellSize * this.scale) {
if (x > 0 && y > 0) {
ctx.beginPath()
ctx.arc(x, y, this.dotRadius, 0, Math.PI * 2)
ctx.fillStyle = this.dotColor
ctx.fill()
}
}
}
},
addPoint2 () {
this.points = [] // 清空白色点位数组
this.drawingPoints = true // 重新开始绘制点位
this.drawPoints() // 重新绘制画布
this.updatePoint()
this.intervalId = setInterval(this.updatePoint, 5000)
},
// 模拟后端提供的点位坐标
getNewPoint () {
// 随机生成新的坐标
const newX = Math.random() * 1920 // 假设 x 坐标范围是 0 到 1920
const newY = Math.random() * 1080 // 假设 y 坐标范围是 0 到 1080
return { x: newX, y: newY } // 返回坐标
},
// 更新点位坐标
updatePoint () {
if (!this.drawingPoints) return
const newPoint = this.getNewPoint() // 获取新的坐标
this.points.push(newPoint) // 将新坐标添加到数组中
this.drawPoints() // 重新绘制点位
},
// 绘制点位
drawPoints () {
const canvas = this.$refs.canvas
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布
// 绘制每个点位
ctx.fillStyle = 'white'
ctx.beginPath()
this.points.forEach(point => {
ctx.moveTo(point.x, point.y)
ctx.arc(point.x, point.y, 10, 0, Math.PI * 2) // 绘制半径为10px的圆点
})
ctx.fill()
},
// 连接点位成一条直线
connectPoints () {
this.drawingPoints = false // 停止绘制点位
clearInterval(this.intervalId) // 关闭定时器
this.drawLine() // 绘制直线
},
drawLine () {
const canvas = this.$refs.canvas
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布
// 绘制路径
ctx.strokeStyle = 'white'
ctx.lineWidth = 1
ctx.beginPath()
if (this.points.length > 0) {
ctx.moveTo(this.points[0].x, this.points[0].y) // 移动到第一个点
for (let i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y) // 依次连接到其他点
}
ctx.stroke() // 绘制路径
}
},
// 放大
zoomIn () {
this.scale += 0.1
this.redrawCanvas()
},
// 缩小
zoomOut () {
this.scale -= 0.1
if (this.scale < 0.1) this.scale = 0.1 // 防止缩放到 0 或负值
this.redrawCanvas()
},
// 重新绘制画布
redrawCanvas () {
const canvas = this.$refs.canvas
canvas.style.transform = `scale(${this.scale})`
if (this.drawingPoints) {
this.drawPoints()
} else {
this.drawLine()
}
}
}
}
</script>
<style lang="stylus" scoped>
.canvas-container
height calc(100% - 1rem)
margin .14rem 0
background-color rgba(0, 19, 48, 70%)
box-shadow inset 1px 1px 7px 2px #4d9bcd
overflow hidden
#canvas
width 100%
height 100%
</style>

6
src/pages/modules/device.vue
View File

@@ -117,6 +117,7 @@ export default {
},
// 站点查询
async _queryStation () {
this.dataList = []
try {
let res = await queryStation()
if (res && res.data) {
@@ -128,6 +129,7 @@ export default {
},
// 任务链查询
async _queryTaskChain () {
this.linkData = []
this.chainId = null
try {
let res = await queryTaskChain()
@@ -222,6 +224,8 @@ export default {
},
// 点击任务链点位
handleLinkCheck (e) {
this.newData = []
this.chainId = ''
this._queryTaskChainDtl(e.chain_id)
},
// 任务链明细
@@ -339,6 +343,8 @@ export default {
let res = await deleteTaskChain(this.chainId)
if (res) {
this.$message(res.message)
this.newData = []
this.chainId = ''
this._queryTaskChain()
}
this.loading.close()

2
src/pages/modules/home.vue
View File

@@ -17,7 +17,7 @@ export default {
nav: [
{title: '操作', zh_title: '操作', en_title: 'Operation', router: '/index/device'},
{title: '建图', zh_title: '建图', en_title: 'Map building', router: '/index/building'},
{title: '取消任务', zh_title: '取消任务', en_title: 'Cancel task', router: ''},
// {title: '取消任务', zh_title: '取消任务', en_title: 'Cancel task', router: ''},
{title: '地图', zh_title: '地图', en_title: 'Map', router: '/index/map'}
],
disabled: false

6
src/pages/modules/map.vue
View File

@@ -14,11 +14,11 @@
@mouseup="handleMouseUp"
@mouseleave="handleMouseUp"
></canvas>
<el-row type="flex" justify="end" class="map_tools">
<!-- <el-row type="flex" justify="end" class="map_tools">
<el-button type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" style="border: 0;border-radius: 0;" @click="zoomOut"></el-button>
<div class="zoom_data">{{ zoomPercentage }}%</div>
<el-button type="primary" :disabled="zoomPercentage === 200" icon="el-icon-plus" size="mini" style="border: 0;border-radius: 0;" @click="zoomIn"></el-button>
</el-row>
</el-row> -->
</div>
<div
v-if="showPopup"
@@ -509,7 +509,7 @@ export default {
display flex
justify-content: center;
align-items: center;
height calc(100% - .32rem)
height 100%
background-color rgba(4, 33, 58, 70%)
box-shadow inset 1px 1px 7px 2px #4d9bcd
overflow hidden

46
src/pages/shells/index.vue
View File

@@ -23,13 +23,13 @@
</el-row>
</el-col>
</el-row>
<div class="error-tips" ref="scrollContainer" @click="$router.push('/index/warning')">
<div v-if="exception !== ''" class="error-tips" ref="scrollContainer" @click="$router.push('/index/warning')">
<div class="zbox scroll-text" ref="scrollText">
<i class="el-icon-warning icon-warning"></i>
<div class="error-tips-t">错误提示：{{ exception }}</div>
</div>
</div>
<el-row type="flex" class="relative main-conatiner">
<el-row type="flex" class="relative main-conatiner" :style="{'paddingTop': exception !== '' ? '.3rem' : '0'}">
<div class="absolute hud_left"></div>
<div class="absolute hud_left hud_right"></div>
<router-view></router-view>
@@ -56,24 +56,24 @@ export default {
return {
timer: null,
topInfo: {},
// topInfo: {
// batteryPower: -1.0,
// exceptionInfo: {
// exception: ['重定位失败,检查环境或标记是否有变化.', '定位超时，尝试移动小车位置后重试.'],
// exceptionCodes: [1, 17179869185, 1335734829057]
// },
// id: '1', // 车号ID
// ip: '192.168.100.82', // 车辆IP
// isManual: false, // 是否是手动，true是手动,false是自动
// mapId: 39, // 地图ID
// mapName: 'apt_map_1753078481180', // 地图名称
// name: 'V1', // 车辆名称
// state: '未知状态', // 车辆状态
// stateId: 7, // 车辆状态ID
// theta: 0.9073792099952698, // 车辆航向角
// x: 0.004027, // 车辆x坐标
// y: -0.001812 // 车辆y坐标
// },
topInfo1: {
batteryPower: -1.0,
exceptionInfo: {
exception: ['重定位失败,检查环境或标记是否有变化.', '定位超时，尝试移动小车位置后重试.'],
exceptionCodes: [1, 17179869185, 1335734829057]
},
id: '1', // 车号ID
ip: '192.168.100.82', // 车辆IP
isManual: false, // 是否是手动，true是手动,false是自动
mapId: 39, // 地图ID
mapName: 'apt_map_1753078481180', // 地图名称
name: 'V1', // 车辆名称
state: '未知状态', // 车辆状态
stateId: 7, // 车辆状态ID
theta: 0.9073792099952698, // 车辆航向角
x: 0.004027, // 车辆x坐标
y: -0.001812 // 车辆y坐标
},
loginVisible: false,
configVisible: false
}
@@ -202,6 +202,9 @@ export default {
color #fff
cursor pointer
.error-tips
position fixed
top .48rem
left 0
width 100%
height .3rem
line-height .3rem
@@ -220,6 +223,9 @@ export default {
font-size .16rem
color #e6a23c
.task-tips
position fixed
bottom 0
left 0
width 100%
height .4rem
line-height .4rem

3
src/style/common.styl
View File

@@ -225,7 +225,8 @@
background center / 100% 100% url(../images/new/bg.jpg) no-repeat
.main-conatiner
width 100%
height calc(100% - 1.18rem)
height calc(100% - .48rem)
padding .3rem 0 .4rem 0
.page_container
_wh(96%, 100%)
padding .09rem

28
src/vuex/modules/data.js
View File

@@ -1,48 +1,30 @@
import * as types from '../types'
const state = {
materObj: {}, // 物料查询-盘点修改
hcxCheckObj: {}, // 缓存线盘点 - 盘点修改
agvObj: '',
carPosition: {x: '', y: '', angle: ''},
position: {x: '', y: ''},
rotation: ''
isTop: false
}
const getters = {
materObj: state => state.materObj,
hcxCheckObj: state => state.hcxCheckObj,
defaultActive: state => state.defaultActive,
agvObj: state => state.agvObj,
carPosition: state => state.carPosition,
position: state => state.position,
rotation: state => state.rotation
isTop: state => state.isTop
}
const actions = {
materObj ({commit}, res) {
commit(types.MATER_OBJ, res)
},
hcxCheckObj ({commit}, res) {
commit(types.HCX_CHECK_OBJ, res)
},
setAgvObj ({commit}, res) {
commit(types.SET_AGV_OBJ, res)
}
}
const mutations = {
[types.MATER_OBJ] (state, res) {
state.materObj = res
},
[types.HCX_CHECK_OBJ] (state, res) {
state.hcxCheckObj = res
},
[types.SET_AGV_OBJ] (state, data) {
state.agvObj = Object.prototype.toString.call(data) === '[object Object]' ? JSON.stringify(data) : ''
state.carPosition = {x: data.x, y: data.y, angle: data.theta}
state.position = {x: data.x, y: data.y}
state.rotation = data.theta
if ('exceptionInfo' in data) {
state.isTop = data.exceptionInfo.exception.length > 0 ? true : false
}
}
}