地图
This commit is contained in:
yyy
parent
e2e4c8c9b9
commit
17f9c226d1
@ -53,8 +53,11 @@ export const getPositionMapLineList = async (params) => {
|
||||
return await request.get({ url: `/system/position-map-line/list`, params })
|
||||
}
|
||||
//批量新增编辑删除节点
|
||||
export const batchSaveOrEditOrDelMapItem = async (data) => {
|
||||
return await request.post({ url: `/system/position-map-item/batchSaveOrEditOrDel`, data })
|
||||
export const batchSaveOrEditOrDelMapItem = async (positionMapId, data) => {
|
||||
return await request.post({
|
||||
url: `/system/position-map-item/batchSaveOrEditOrDel?positionMapId=${positionMapId}`,
|
||||
data
|
||||
})
|
||||
}
|
||||
//导出仓库点位地图子表 Excel
|
||||
export const exportPositionMapItemExcel = async (params) => {
|
||||
@ -68,3 +71,7 @@ export const getPositionMapItem = async (params) => {
|
||||
export const getPositionMapItemList = async (params) => {
|
||||
return await request.get({ url: `/system/position-map-item/list`, params })
|
||||
}
|
||||
//获得设备信息列表
|
||||
export const getDeviceInformationList = async (params) => {
|
||||
return await request.get({ url: `/system/device/information/list`, params })
|
||||
}
|
||||
|
||||
@ -243,5 +243,6 @@ export enum DICT_TYPE {
|
||||
|
||||
// ========== wcs 地图 ==========
|
||||
ROBOT_TASK_STATUS = 'robot_task_status', //机器人的任务状态
|
||||
ROBOT_QUEST_PHASES = 'robot_quest_phases' //机器人的任务阶段
|
||||
ROBOT_QUEST_PHASES = 'robot_quest_phases', //机器人的任务阶段
|
||||
DEVICE_TYPE = 'device_type'
|
||||
}
|
||||
|
||||
214
src/views/mapPage/realTimeMap/components/editNodeProperties.vue
Normal file
214
src/views/mapPage/realTimeMap/components/editNodeProperties.vue
Normal file
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogFormVisible" title="节点属性" width="540">
|
||||
<el-form :model="form" label-width="75">
|
||||
<el-form-item label="X" prop="locationX" required>
|
||||
<el-input v-model="form.locationX" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Y" prop="locationY" required>
|
||||
<el-input v-model="form.locationY" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type" required>
|
||||
<el-select v-model="form.type" placeholder="请选择类型" @change="typeChange">
|
||||
<el-option label="路径点位" :value="1" />
|
||||
<el-option label="库位点" :value="2" />
|
||||
<el-option label="设备点" :value="3" />
|
||||
<el-option label="停车点" :value="4" />
|
||||
<el-option label="区域变更点" :value="5" />
|
||||
<el-option label="等待点" :value="6" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-if="form.type !== 1 && form.type !== 6">
|
||||
<el-form-item label="层数" prop="layersNumber" required v-if="form.type === 2">
|
||||
<el-input-number v-model="form.layersNumber" :min="1" :max="3" />
|
||||
</el-form-item>
|
||||
<el-form-item label="编号" prop="id" required v-if="form.type === 3">
|
||||
<div>
|
||||
<el-select
|
||||
v-model="deviceInfo.deviceType"
|
||||
class="!w-160px"
|
||||
clearable
|
||||
placeholder="请选择设备类型"
|
||||
@change="deviceTypeChange()"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="form.id"
|
||||
class="!w-160px ml-4"
|
||||
clearable
|
||||
placeholder="请选择设备编号"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deviceList"
|
||||
:key="item.id"
|
||||
:label="item.deviceNo"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="库位长度" prop="length">
|
||||
<div style="display: flex">
|
||||
<el-input v-model="form.length" placeholder="请输入" />
|
||||
<span class="ml-2">cm</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="库位宽度" prop="width">
|
||||
<div style="display: flex">
|
||||
<el-input v-model="form.width" placeholder="请输入" />
|
||||
<span class="ml-2">cm</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="库位方向" prop="direction">
|
||||
<el-select
|
||||
v-model="form.direction"
|
||||
placeholder="请选择库位方向"
|
||||
@change="directionChange"
|
||||
>
|
||||
<el-option label="单向" :value="1" />
|
||||
<el-option label="双向" :value="2" />
|
||||
<el-option label="三向" :value="3" />
|
||||
<el-option label="四向" :value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-if="form.direction !== 1">
|
||||
<el-form-item label="进入方向" prop="inDirection">
|
||||
<el-select v-model="form.inDirection" placeholder="请选择进入方向">
|
||||
<el-option label="尾入" :value="0" />
|
||||
<el-option label="头入" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="离开方向" prop="outDirection">
|
||||
<el-select v-model="form.outDirection" placeholder="请选择离开方向">
|
||||
<el-option label="尾出" :value="0" />
|
||||
<el-option label="头出" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import * as MapApi from '@/api/map/map'
|
||||
|
||||
const dialogFormVisible = ref(false)
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const props = defineProps({
|
||||
positionMapId: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
})
|
||||
|
||||
const form = ref({
|
||||
locationX: undefined,
|
||||
locationY: undefined,
|
||||
type: 1,
|
||||
layersNumber: 1, //层数
|
||||
length: undefined, //长度
|
||||
width: undefined, //宽度
|
||||
direction: 1, //方向
|
||||
inDirection: undefined,
|
||||
outDirection: undefined,
|
||||
list: []
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
locationX: [{ required: true, message: '请输入X', trigger: 'blur' }],
|
||||
locationY: [{ required: true, message: '请输入Y', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
|
||||
direction: [{ required: true, message: '请输入层数', trigger: 'blur' }],
|
||||
id: [{ required: true, message: '请选择设备编号', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
const emit = defineEmits(['submitNodeSuccess'])
|
||||
const submit = () => {
|
||||
if (form.value.type === 1 || form.value.type === 6) {
|
||||
form.value.dataJson = ''
|
||||
} else if (form.value.type === 2) {
|
||||
//在这边把数据处理好
|
||||
let list = []
|
||||
for (let index = 0; index < form.value.layersNumber; index++) {
|
||||
list.push({
|
||||
locationWide: form.value.width || undefined,
|
||||
locationDeep: form.value.length || undefined,
|
||||
direction: form.value.direction || undefined, //方向
|
||||
inDirection: form.value.inDirection || undefined, //进入方向
|
||||
outDirection: form.value.outDirection || undefined, //离开方向
|
||||
locationStorey: index + 1 //层数
|
||||
})
|
||||
}
|
||||
form.value.dataJson = JSON.stringify(list)
|
||||
} else {
|
||||
let obj = {
|
||||
id: form.value.id || undefined,
|
||||
mapId: props.positionMapId,
|
||||
locationWide: form.value.width || undefined,
|
||||
locationDeep: form.value.length || undefined,
|
||||
direction: form.value.direction || undefined, //方向
|
||||
inDirection: form.value.inDirection || undefined, //进入方向
|
||||
outDirection: form.value.outDirection || undefined //离开方向
|
||||
}
|
||||
form.value.dataJson = JSON.stringify(obj)
|
||||
}
|
||||
console.log(form.value, '保存')
|
||||
emit('submitNodeSuccess', form.value)
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
|
||||
const open = (item) => {
|
||||
form.value = item
|
||||
form.value.locationX = item.x
|
||||
form.value.locationY = item.y
|
||||
form.value.type = item.type || 1
|
||||
dialogFormVisible.value = true
|
||||
}
|
||||
|
||||
//类型改变
|
||||
const typeChange = () => {
|
||||
if (form.value.type === 1 || form.value.type === 6) {
|
||||
form.value.layersNumber = undefined
|
||||
form.value.dataJson = ''
|
||||
} else {
|
||||
}
|
||||
}
|
||||
//方向改变
|
||||
const directionChange = (e) => {
|
||||
if (e === 1) {
|
||||
form.value.inDirection = undefined
|
||||
form.value.outDirection = undefined
|
||||
}
|
||||
}
|
||||
|
||||
//获取设备信息
|
||||
const deviceInfo = ref({
|
||||
positionMapId: props.positionMapId,
|
||||
deviceType: ''
|
||||
})
|
||||
const deviceList = ref([])
|
||||
const getDeviceList = async () => {
|
||||
deviceList.value = await MapApi.getDeviceInformationList(deviceInfo.value)
|
||||
}
|
||||
const deviceTypeChange = () => {
|
||||
getDeviceList()
|
||||
}
|
||||
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
</script>
|
||||
@ -2,14 +2,18 @@
|
||||
<div>
|
||||
<ContentWrap>
|
||||
<div>
|
||||
<span @click="backPreviousStep">撤销</span>
|
||||
<span @click="backNextStep">重做</span>
|
||||
<el-button type="primary" @click="saveMap" :disabled="formLoading"> 保存 </el-button>
|
||||
<el-button type="primary" @click="backPreviousStep" :disabled="formLoading">
|
||||
撤销
|
||||
</el-button>
|
||||
<el-button type="primary" @click="backNextStep" :disabled="formLoading"> 重做 </el-button>
|
||||
<el-button type="primary" @click="drawNodes" :disabled="formLoading"> 绘制节点 </el-button>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
<div class="map-box" ref="imgWrap" @mousewheel.prevent="rollImg" style="overflow: hidden">
|
||||
<div class="map-box-inner" ref="image" @mousedown.prevent="moveImg">
|
||||
<img :src="imgUrl" class="map-box-img" id="mapBg" />
|
||||
<div class="map-box-inner-dot">
|
||||
<img :src="imgBgObj.imgUrl" class="map-box-img" id="mapBg" />
|
||||
<div class="map-box-inner-dot" @click="mapClick">
|
||||
<VueDragResizeRotate
|
||||
v-for="(item, index) in allHistoryList[currentIndex]"
|
||||
:key="index"
|
||||
@ -30,26 +34,49 @@
|
||||
:lockAspectRatio="item.lockAspectRatio"
|
||||
>
|
||||
<div class="sdiv">
|
||||
<img :src="item.img" alt="" style="width: 100%; height: 100%" />
|
||||
<img
|
||||
v-if="item.labelType === 'icon'"
|
||||
:src="item.img"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<div
|
||||
v-if="item.labelType === 'node'"
|
||||
style="width: 100%; height: 100%; background-color: #000; border-radius: 50%"
|
||||
></div>
|
||||
</div>
|
||||
</VueDragResizeRotate>
|
||||
<!-- 文档 https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md#resizable -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<editNodeProperties
|
||||
ref="editNodePropertiesRef"
|
||||
:positionMapId="imgBgObj.positionMapId"
|
||||
@submitNodeSuccess="submitNodeSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
|
||||
import editNodeProperties from './components/editNodeProperties.vue'
|
||||
import * as MapApi from '@/api/map/map'
|
||||
|
||||
defineOptions({ name: 'editMapPageRealTimeMap' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const formLoading = ref(false)
|
||||
|
||||
const allHistoryList = ref([]) //全部的历史记录
|
||||
const currentIndex = ref(0)
|
||||
const imgUrl = ref('') //地图背景
|
||||
const imgList = [] //所有的图标的列表
|
||||
const currentIndex = ref(0) //用于记录是哪条历史记录的
|
||||
const currentItemIndex = ref(0) //用于记录是在编辑那个具体的节点、图标等
|
||||
const imgBgObj = reactive({
|
||||
imgUrl: '',
|
||||
positionMapId: ''
|
||||
}) //地图背景
|
||||
const imgList = ref([]) //所有的图标的列表
|
||||
|
||||
const list = ref([])
|
||||
//获取地图点位
|
||||
@ -78,34 +105,42 @@ const getMapData = async (item) => {
|
||||
})
|
||||
|
||||
let base64Url = 'data:image/png;base64,'
|
||||
imgUrl.value = data
|
||||
imgBgObj.imgUrl = data
|
||||
imgBgObj.positionMapId = item.id
|
||||
}
|
||||
|
||||
// 缩放停止
|
||||
const resizeEnd = (x, y, w, h, item, index) => {
|
||||
console.log('缩放')
|
||||
item.x = x
|
||||
item.y = y
|
||||
item.w = w
|
||||
item.h = h
|
||||
imgList.value[index].x = x
|
||||
imgList.value[index].y = y
|
||||
imgList.value[index].w = w
|
||||
imgList.value[index].h = h
|
||||
addEditHistory()
|
||||
}
|
||||
// 拖拽停止
|
||||
const dragEnd = (x, y, item, i) => {
|
||||
const dragEnd = (x, y, item, index) => {
|
||||
console.log('拖拽')
|
||||
if (x === item.x && y === item.y) return
|
||||
item.x = x
|
||||
item.y = y
|
||||
imgList.value[index].x = x
|
||||
imgList.value[index].y = y
|
||||
addEditHistory()
|
||||
}
|
||||
// 旋转
|
||||
const rotateEnd = (degree, item, i) => {
|
||||
const rotateEnd = (angle, item, index) => {
|
||||
console.log('旋转')
|
||||
imgList.value[index].angle = angle
|
||||
addEditHistory()
|
||||
}
|
||||
|
||||
//选中
|
||||
const activatedHandle = (item, i) => {
|
||||
const editNodePropertiesRef = ref()
|
||||
const activatedHandle = (item, index) => {
|
||||
console.log('选中', item)
|
||||
currentItemIndex.value = index
|
||||
if (item.labelType === 'node') {
|
||||
editNodePropertiesRef.value.open(item)
|
||||
}
|
||||
}
|
||||
//非选中
|
||||
const deactivatedHandle = () => {
|
||||
@ -114,8 +149,15 @@ const deactivatedHandle = () => {
|
||||
|
||||
//添加历史记录
|
||||
const addEditHistory = () => {
|
||||
currentIndex.value++
|
||||
allHistoryList.value.push(imgList.value)
|
||||
//要判断是不是在最新的记录上修改 如果不是 要把currentIndex之后的记录都删掉 保持当前修改是最新的
|
||||
if (currentIndex.value !== allHistoryList.value.length - 1) {
|
||||
allHistoryList.value = allHistoryList.value.splice(0, currentIndex.value)
|
||||
currentIndex.value++
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
|
||||
} else {
|
||||
currentIndex.value++
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
|
||||
}
|
||||
console.log(allHistoryList.value, 'allHistoryList')
|
||||
}
|
||||
|
||||
@ -137,6 +179,72 @@ const backNextStep = () => {
|
||||
message.warning('没了老铁')
|
||||
}
|
||||
}
|
||||
//绘制节点
|
||||
const toolTypeIndex = ref(0)
|
||||
const cursorType = ref('')
|
||||
const drawNodes = () => {
|
||||
if (toolTypeIndex.value === 1) {
|
||||
toolTypeIndex.value = 0
|
||||
} else {
|
||||
toolTypeIndex.value = 1
|
||||
}
|
||||
}
|
||||
//地图点击
|
||||
const mapClick = (e) => {
|
||||
if (toolTypeIndex.value === 1) {
|
||||
//绘制节点
|
||||
imgList.value.push({
|
||||
x: e.offsetX,
|
||||
y: e.offsetY,
|
||||
h: 16,
|
||||
w: 16,
|
||||
angle: 0,
|
||||
draggable: false,
|
||||
resizable: false,
|
||||
rotatable: false,
|
||||
img: '',
|
||||
labelType: 'node'
|
||||
})
|
||||
console.log(imgList.value)
|
||||
currentIndex.value++
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
|
||||
}
|
||||
}
|
||||
//保存地图
|
||||
const saveMap = async () => {
|
||||
//节点的保存
|
||||
await saveNodeList()
|
||||
}
|
||||
//节点的保存
|
||||
const saveNodeList = async () => {
|
||||
formLoading.value = true
|
||||
|
||||
let list = allHistoryList.value[currentIndex.value].filter((item) => {
|
||||
return item.labelType === 'node'
|
||||
})
|
||||
|
||||
list.forEach((item, index) => {
|
||||
item.locationX = item.locationX || item.x
|
||||
item.locationY = item.locationY || item.y
|
||||
item.type = item.type || 1
|
||||
if (item.type === 1) {
|
||||
item.dataJson = ''
|
||||
} else {
|
||||
item.dataJson = item.dataJson
|
||||
}
|
||||
})
|
||||
|
||||
try {
|
||||
await MapApi.batchSaveOrEditOrDelMapItem(imgBgObj.positionMapId, list)
|
||||
message.success('创建成功')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
//编辑节点成功
|
||||
const submitNodeSuccess = (item) => {
|
||||
allHistoryList.value[currentIndex.value][currentItemIndex.value] = item
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
imgList.value = [
|
||||
@ -149,7 +257,8 @@ onMounted(() => {
|
||||
draggable: true,
|
||||
resizable: true,
|
||||
rotatable: true,
|
||||
img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png'
|
||||
img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png',
|
||||
labelType: 'icon'
|
||||
},
|
||||
{
|
||||
x: 454.4,
|
||||
@ -160,10 +269,11 @@ onMounted(() => {
|
||||
draggable: true,
|
||||
resizable: true,
|
||||
rotatable: true,
|
||||
img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png'
|
||||
img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png',
|
||||
labelType: 'icon'
|
||||
}
|
||||
]
|
||||
allHistoryList.value[0] = imgList.value
|
||||
allHistoryList.value[0] = JSON.parse(JSON.stringify(imgList.value))
|
||||
|
||||
getList()
|
||||
})
|
||||
@ -176,6 +286,7 @@ onMounted(() => {
|
||||
.map-box-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.map-box-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -186,6 +297,11 @@ onMounted(() => {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
|
||||
background-size:
|
||||
20px 20px,
|
||||
20px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user