ak/zn-admin-vue3-wcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'xhf' of http://git.znkjfw.com/ak/zn-admin-vue3-wcs into xhf

Browse Source
This commit is contained in:
xhf 2025-03-18 17:24:55 +08:00
commit 12b13dfee9
5 changed files with 65 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

@ -6,7 +6,7 @@ VITE_DEV=true
# 请求路径
# VITE_BASE_URL='http://192.168.0.66:48080'
# VITE_BASE_URL='http://192.168.0.189:48080'
VITE_BASE_URL='http://127.0.0.1:48080'
VITE_BASE_URL='http://192.168.0.45:48080'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
VITE_UPLOAD_TYPE=server

3
.env.local
View File

@ -4,8 +4,9 @@ NODE_ENV=development
VITE_DEV=true
# 请求路径
VITE_BASE_URL='http://192.168.0.74:48080'
# VITE_BASE_URL='http://192.168.0.74:48080'
# VITE_BASE_URL='http://192.168.0.189:48080'
VITE_BASE_URL='http://192.168.0.45:48080'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
VITE_UPLOAD_TYPE=server

151
src/views/mapPage/example/转换成实际坐标demo.vue
View File

@ -1,151 +0,0 @@
<template>
<div class="map-container" ref="mapContainer">
<!-- 地图 -->
<div
class="map"
:style="{
backgroundImage: `url(${mapImage})`,
transform: `scale(${scale})`,
transformOrigin: '0 0',
width: `${mapWidth}px`,
height: `${mapHeight}px`
}"
@click="addLocation"
>
<!-- 库位 -->
<div
v-for="(location, index) in locations"
:key="index"
class="location"
:style="{
left: `${location.projectX}px`,
top: `${location.projectY}px`,
transform: `scale(${scale})` // 反向缩放库位图片
}"
>
<img src="@/assets/location-icon.png" alt="库位" />
</div>
</div>
<!-- 放大缩小按钮 -->
<div class="controls">
<button @click="zoomIn">放大</button>
<button @click="zoomOut">缩小</button>
<button @click="saveLocations">保存</button>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import mapImage from '@/assets/warehouse-map.png' // 扫描图路径
import locationIcon from '@/assets/location-icon.png' // 库位图标路径
const origin = [-54.4, -34.2]
const resolution = 0.05
const mapContainer = ref(null) // 地图容器
const scale = ref(1) // 缩放比例
const locations = ref([]) // 库位列表
const mapWidth = ref(0) // 地图宽度
const mapHeight = ref(0) // 地图高度
// 加载地图图片并设置初始尺寸
onMounted(() => {
const img = new Image()
img.src = mapImage
img.onload = () => {
mapWidth.value = img.width
mapHeight.value = img.height
}
})
// 添加库位
const addLocation = (event) => {
const rect = mapContainer.value.getBoundingClientRect()
const scrollLeft = mapContainer.value.scrollLeft // 水平滚动条偏移量
const scrollTop = mapContainer.value.scrollTop // 垂直滚动条偏移量
const devicePixelRatio = window.devicePixelRatio || 1
// 计算页面坐标（考虑设备像素比和滚动条偏移量）
const projectX = (event.clientX - rect.left + scrollLeft) / scale.value / devicePixelRatio
const projectY = (event.clientY - rect.top + scrollTop) / scale.value / devicePixelRatio
// 转换为实际坐标
const actualX = (projectX - origin[0]) / resolution
const actualY = (projectY - origin[1]) / resolution
// 添加库位
locations.value.push({
projectX,
projectY,
actualX,
actualY
})
}
// 放大
const zoomIn = () => {
scale.value *= 1.2
}
// 缩小
const zoomOut = () => {
scale.value /= 1.2
}
// 保存点位坐标
const saveLocations = () => {
console.log(
'项目点位坐标：',
locations.value.map((loc) => ({ x: loc.projectX, y: loc.projectY }))
)
console.log(
'实际现场点位坐标：',
locations.value.map((loc) => ({ x: loc.actualX, y: loc.actualY }))
)
alert('点位坐标已保存，请查看控制台输出。')
}
</script>
<style scoped>
.map-container {
position: relative;
width: 100%;
height: 80vh;
overflow: auto;
border: 1px solid #ccc;
}
.map {
background-size: contain;
background-repeat: no-repeat;
position: relative;
}
.location {
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
}
.location img {
width: 100%;
height: 100%;
}
.controls {
position: fixed;
top: 110px;
right: 110px;
display: flex;
gap: 10px;
}
.controls button {
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
}
</style>

17
src/views/mapPage/realTimeMap/components-tool/equipmentToolDialog.vue
View File

@ -23,8 +23,8 @@
<!-- 新增设备 -->
<Dialog v-model="addDeviceVisible" title="设备" width="586" class="equipment-form-dialog">
<el-form :model="deviceInfo" label-width="90">
<el-form-item label="设备类型" required>
<el-form :model="deviceInfo" label-width="90" ref="ruleFormRef" :rules="rules">
<el-form-item prop="deviceType" label="设备类型" required>
<el-select
v-model="deviceInfo.deviceType"
class="!w-400px"
@ -40,7 +40,7 @@
/>
</el-select>
</el-form-item>
<el-form-item label="设备编号" required>
<el-form-item prop="deviceInfoId" label="设备编号" required>
<el-select
v-model="deviceInfo.deviceInfoId"
class="!w-400px"
@ -127,6 +127,7 @@ const addDevice = () => {
}
//类型改变
const deviceTypeChange = async () => {
deviceInfo.value.deviceInfoId = ''
getAllDeviceList()
}
const getAllDeviceList = async () => {
@ -136,12 +137,20 @@ const getAllDeviceList = async () => {
})
}
//新增表单新增
const ruleFormRef = ref()
const rules = reactive({
deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
deviceInfoId: [{ required: true, message: '请选择设备类型', trigger: 'change' }]
})
const submitAddForm = async () => {
await ruleFormRef.value.validate(async (valid, fields) => {
if (!valid) return
deviceInfo.value.positionMapId = props.positionMapId
await MapApi.mapBindDeviceInfo(deviceInfo.value)
message.success('新增成功')
addDeviceVisible.value = false
getDeviceList()
})
}
const equipmentList = ref([])
@ -159,7 +168,7 @@ const dialogClose = () => {
const initAddForm = () => {
deviceInfo.value.deviceInfoId = ''
deviceInfo.value.deviceType = ''
getAllDeviceList()
allDeviceList.value = []
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

50
src/views/mapPage/realTimeMap/editMap.vue
View File

@ -395,8 +395,6 @@
v-if="item.type === 7 && item.layerSelectionShow"
:style="{
position: 'absolute',
left: item.locationX + 'px',
top: item.locationY + 'px',
color: item.fontColor,
fontSize: item.fontSize + 'px',
fontFamily: item.fontFamily,
@ -760,10 +758,15 @@ const resizeEnd = (locationX, locationY, w, h, item, index) => {
nextTick(() => {
let x = Number(locationX) + Number(item.locationWidePx) / 2
let y = Number(locationY) + Number(item.locationDeepPx) / 2
let width = Number(w) * imgBgObj.resolution * 100 //实际的宽高cm
let height = Number(h) * imgBgObj.resolution * 100
let actualPoint = disposeEventPoint(x, y)
state.allMapPointInfo[index].locationX = x
state.allMapPointInfo[index].locationY = y
state.allMapPointInfo[index].locationWide = width
state.allMapPointInfo[index].locationDeep = height
state.allMapPointInfo[index].locationWidePx = w
state.allMapPointInfo[index].locationDeepPx = h
state.allMapPointInfo[index].actualLocationX = actualPoint.actualLocationX
@ -781,8 +784,8 @@ const resizeEnd = (locationX, locationY, w, h, item, index) => {
if (item.id === route.endPointId) {
route.endPointX = x
route.endPointY = y
route.endHigh = Number(item.locationDeep)
route.endWidth = Number(item.locationDeep)
route.endHigh = Number(item.locationDeepPx)
route.endWidth = Number(item.locationWidePx)
route.actualEndPointX = actualPoint.actualLocationX
route.actualEndPointY = actualPoint.actualLocationY
}
@ -984,7 +987,11 @@ const handleInputEnd = () => {
fontFamily: state.inputBoxStyle.fontFamily, //字体类型
fontSize: state.inputBoxStyle.fontSize,
dataObj: {}, //存 设备点 停车点 文字
layerSelectionShow: true
layerSelectionShow: true,
locationDeep: 20,
locationWide: 20,
locationDeepPx: 4,
locationWidePx: 4
})
addEditHistory()
state.inputBoxValue = ''
@ -1347,6 +1354,7 @@ const toolbarClick = async (item) => {
break
case 'move':
//移动
console.log(state.allMapPointInfo[state.currentItemIndex])
state.moveForm.locationX = Number(state.allMapPointInfo[state.currentItemIndex].locationX)
state.moveForm.locationY = Number(state.allMapPointInfo[state.currentItemIndex].locationY)
break
@ -1696,13 +1704,11 @@ const startFromPoint = (index, event) => {
//开始框选绘制
const startDrawSelection = (event) => {
if (
toolbarSwitchType.value !== 'createLineLibrary' &&
toolbarSwitchType.value !== 'createRegion' &&
toolbarSwitchType.value !== 'drawRoute' &&
toolbarSwitchType.value !== 'generateLine'
)
return
toolbarSwitchType.value === 'createLineLibrary' ||
toolbarSwitchType.value === 'createRegion' ||
toolbarSwitchType.value === 'drawRoute' ||
toolbarSwitchType.value == 'generateLine'
) {
const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
const x = disposeEventPoints(event).x
@ -1715,6 +1721,7 @@ const startDrawSelection = (event) => {
state.drawSelectionAreaBox = { x: x, y: y, width: 0, height: 0 }
}
event.preventDefault() // 阻止默认行为（避免选中图片或文本）
}
}
// 更新框选区域
const updateDrawSelection = (event) => {
@ -1736,7 +1743,6 @@ const updateDrawSelection = (event) => {
}
}
event.preventDefault() // 阻止默认行为（避免选中图片或文本）
return
}
if (toolbarSwitchType.value === 'clickDrawRoute') {
// 实时绘制
@ -1748,7 +1754,6 @@ const updateDrawSelection = (event) => {
state.currentDrawY = y
}
event.preventDefault() // 阻止默认行为（避免选中图片或文本）
return
}
}
//结束框选绘制
@ -2468,6 +2473,8 @@ const getAllNodeList = async () => {
item.resizable = false
item.rotatable = true
item.lockAspectRatio = true
item.locationDeep = 20
item.locationWide = 20
}
//要将实际的cm改成px
@ -2515,7 +2522,20 @@ const saveMap = async () => {
const saveNodeList = async () => {
let list = state.allMapPointInfo
list.forEach((item) => {
if (item.type === 7) {
if (item.type === 2) {
// 库位点 类型为数组
item.dataList.forEach((node) => {
node.locationDeep = item.locationDeep
node.locationWide = item.locationWide
})
item.dataJson = JSON.stringify(item.dataList)
} else if (item.type === 3 || item.type === 4) {
//设备类型
item.dataObj.locationWide = item.locationWide
item.dataObj.locationDeep = item.locationDeep
item.dataJson = JSON.stringify(item.dataObj)
} else if (item.type === 7) {
//文字类型
item.dataObj.positionMapId = imgBgObj.positionMapId
item.dataObj.text = item.text
item.dataObj.fontColor = item.fontColor