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

Compare commits

base: ak:66150c708d3798e139979839282a389a6c3e0c0a
Branches Tags
ak:master
ak:dev
..
compare: ak:d64e339249ca1d968b19dcfa887ec798117c5f89
Branches Tags
ak:dev
ak:master

No commits in common. "66150c708d3798e139979839282a389a6c3e0c0a" and "d64e339249ca1d968b19dcfa887ec798117c5f89" have entirely different histories.
66150c708d ... d64e339249

7 changed files with 240 additions and 504 deletions
Show Stats Expand all files Collapse all files

2
.env.local
View File

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

4
src/api/map/map.ts
View File

@ -75,7 +75,3 @@ export const getPositionMapItemList = async (params) => {
export const getDeviceInformationList = async (params) => {
return await request.get({ url: `/system/device/information/list`, params })
}
//地图绑定设备
export const mapBindDeviceInfo = async (data) => {
return await request.post({ url: `/system/device/information/mapBindDeviceInfo`, data })
}

207
src/views/board/device/index.vue
View File

@ -1,42 +1,72 @@
<template>
<ContentWrap>
<div>
<el-row :gutter="24">
<el-col :span="2">
<div class="new-top-box">
<div class="new-top-box-left">
<div class="new-top-box-left-title"> 设备看板 </div>
</el-col>
<el-col :span="16">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first1" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first2" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first3" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first4" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first5" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
</el-tabs>
</el-col>
<el-col :span="6">
<!-- <div class="new-top-box-right">
<!-- <el-divider direction="vertical" /> -->
<div class="new-top-box-left-statistics-box">
<div class="new-top-box-left-statistics-box-inner" v-if="carStatistics">
<div class="new-top-box-left-statistics"> 总数 {{ carStatistics.total || 0 }} </div>
<div class="grey-line"> </div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">充电桩</div>
<div class="new-top-box-left-item-value">{{ carStatistics.inTask || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">输送线</div>
<div class="new-top-box-left-item-value">{{ carStatistics.charge || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">码垛机</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">自动门</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">提升机</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">信号灯</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">按钮盒</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">拆垛机</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
</div>
</div>
</div>
<div class="new-top-box-right">
<!-- <el-input
v-model="queryParams.robotNo"
style="width: 240px"
placeholder="请输入关键字"
clearable
>
<template #append>
<el-button><Icon icon="ep:search" @click="getCarList" /></el-button
></template>
</el-input>
<el-button type="primary" @click="openForm('create')">新增车辆</el-button> -->
<div class="new-top-box-right-input-box">
<input
type="text"
@ -54,69 +84,10 @@
class="new-top-box-right-input-icon"
/>
</div>
<el-button>Default</el-button>
<div class="new-top-box-right-button" @click="openForm('create')"> 新增设备 </div>
</div> -->
<div style="display: flex">
<el-input
style="height: 40px"
v-model="queryParams.robotNo"
placeholder="Please Input"
:suffix-icon="Search"
/>
<el-button style="height: 40px">Default</el-button>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<!-- <div class="new-top-box-left-statistics-box">
<div class="new-top-box-left-statistics-box-inner" v-if="carStatistics">
<div class="new-top-box-left-statistics"> 总数 {{ carStatistics.total || 0 }} </div>
<div class="grey-line"> </div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">充电桩</div>
<div class="new-top-box-left-item-value">{{ carStatistics.inTask || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">输送线</div>
<div class="new-top-box-left-item-value">{{ carStatistics.charge || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">码垛机</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">自动门</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">提升机</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">信号灯</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">按钮盒</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">拆垛机</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
</div>
</div> -->
</ContentWrap>
<div class="new-list-box-all">
<div class="new-list-box">
@ -186,6 +157,7 @@
</div>
</div>
<createEditDialog ref="createEditDialogRef" @success="getCarList" />
</template>
<script setup>
@ -258,32 +230,32 @@ const topList = ref([
{
name: '总数',
count: 0,
id: -1
id:-1
},
{
name: '充电桩',
count: 0,
id: 1
id:1
},
{
name: '输送线',
count: 0,
id: 2
},
id:2
},
{
name: '码垛机',
count: 0,
id: 3
id:3
},
{
name: '自动门',
count: 0,
id: 4
id:4
},
{
name: '提升机',
count: 0
},
count: 0
},
{
name: '信号灯',
count: 0
@ -431,17 +403,7 @@ onBeforeRouteLeave((to, from, next) => {
})
</script>
<style scoped lang="scss">
:deep(.el-tabs__nav-wrap::after) {
position: static !important;
}
:deep(.el-tabs__header) {
margin: 0px;
}
:deep(.is-active) {
background-color: #1677ff;
}
<style scoped>
.swiper-container {
width: calc(100% - 60px);
padding: 0 30px;
@ -564,18 +526,12 @@ onBeforeRouteLeave((to, from, next) => {
margin-right: 10px;
}
.new-top-box-left-title {
flex-shrink: 0;
width: 72px;
height: 40px;
line-height: 40px;
font-family:
PingFangSC,
PingFang SC;
font-weight: 500;
font-weight: 600;
font-size: 18px;
color: #0d162a;
text-align: center;
font-style: normal;
}
.new-top-box-left-statistics {
padding: 5px 7px;
@ -628,7 +584,7 @@ onBeforeRouteLeave((to, from, next) => {
height: 36px;
}
.new-top-box-right-input {
/* width: 225px; */
width: 225px;
height: 15px;
border: none;
font-size: 13px;
@ -654,12 +610,13 @@ input::-webkit-input-placeholder {
color: #536387;
cursor: pointer;
}
.new-top-box-left-statistics-box {
.new-top-box-left-statistics-box{
flex: 1;
margin-left: 10px;
/* background: red; */
}
.new-top-box-left-statistics-box-inner {
.new-top-box-left-statistics-box-inner{
display: flex;
align-items: center;
flex-shrink: 0;

28
src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
View File

@ -59,15 +59,15 @@
</el-select>
</div>
</el-form-item>
<el-form-item label="库位长度" prop="locationDeep">
<el-form-item label="库位长度" prop="length">
<div style="display: flex">
<el-input v-model="form.locationDeep" placeholder="请输入" />
<el-input v-model="form.length" placeholder="请输入" />
<span class="ml-2">cm</span>
</div>
</el-form-item>
<el-form-item label="库位宽度" prop="locationWide">
<el-form-item label="库位宽度" prop="width">
<div style="display: flex">
<el-input v-model="form.locationWide" placeholder="请输入" />
<el-input v-model="form.width" placeholder="请输入" />
<span class="ml-2">cm</span>
</div>
</el-form-item>
@ -124,12 +124,12 @@ const props = defineProps({
})
const form = ref({
type: 1,
layersNumber: 1, //层数
locationX: undefined,
locationY: undefined,
locationDeep: undefined, //长度
locationWide: undefined, //宽度
type: 1,
layersNumber: 1, //层数
length: undefined, //长度
width: undefined, //宽度
direction: 1, //方向
inDirection: undefined,
outDirection: undefined,
@ -153,8 +153,8 @@ const submit = () => {
let list = []
for (let index = 0; index < form.value.layersNumber; index++) {
list.push({
locationWide: form.value.locationWide || undefined,
locationDeep: form.value.locationDeep || undefined,
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, //离开方向
@ -166,8 +166,8 @@ const submit = () => {
let obj = {
id: form.value.id || undefined,
mapId: props.positionMapId,
locationWide: form.value.locationWide || undefined,
locationDeep: form.value.locationDeep || undefined,
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 //离开方向
@ -181,8 +181,8 @@ const submit = () => {
const open = (item) => {
form.value = item
form.value.locationX = item.locationX
form.value.locationY = item.locationY
form.value.locationX = item.x
form.value.locationY = item.y
form.value.type = item.type || 1
dialogFormVisible.value = true
}

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

@ -1,59 +1,10 @@
<template>
<Dialog v-model="dialogFormVisible" title="设备" width="586" class="equipment-form-dialog">
<div class="device-list">
<div class="device-item" v-for="(item, index) in deviceList" :key="index">
<img class="img" :src="item.url" />
<div class="name">{{ item.deviceNo }}</div>
<el-icon color="#f56c6c" class="delete-icon" @click="deleteDeviceItem(item, index)"
><DeleteFilled
/></el-icon>
</div>
<div class="add-device-item" @click="addDevice">
<el-icon color="#C4C4C4" class="add-icon"><Plus /></el-icon>
<div class="name">新增设备</div>
</div>
</div>
</Dialog>
<!-- 新增设备 -->
<Dialog v-model="addDeviceVisible" title="设备" width="586" class="equipment-form-dialog">
<el-form :model="deviceInfo" label-width="90">
<el-form-item label="设备类型" required>
<el-select
v-model="deviceInfo.deviceType"
class="!w-400px"
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-form-item>
<el-form-item label="设备编号" required>
<el-select
v-model="deviceInfo.deviceInfoId"
class="!w-400px"
clearable
placeholder="请选择设备编号"
>
<el-option
v-for="item in allDeviceList"
:key="item.id"
:label="item.deviceNo"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<Dialog v-model="dialogFormVisible" title="设备" width="600" class="text-form-dialog">
<div> 11 </div>
<template #footer>
<div class="dialog-footer">
<el-button @click="addDeviceVisible = false">取消</el-button>
<el-button type="primary" @click="submitAddForm"> 确定 </el-button>
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="formSubmit"> 确认 </el-button>
</div>
</template>
</Dialog>
@ -61,168 +12,27 @@
<script setup>
import { reactive, ref } from 'vue'
import * as MapApi from '@/api/map/map'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
const message = useMessage() // 消息弹窗
const props = defineProps({
positionMapId: {
type: String,
default: () => ''
}
})
const dialogFormVisible = ref(false) //列表的
const addDeviceVisible = ref(false) //新增的
//获取设备信息
const deviceList = ref([]) //设备列表
const getDeviceList = async () => {
deviceList.value = await MapApi.getDeviceInformationList({
positionMapId: props.positionMapId
})
}
//选中
const deleteDeviceItem = async (item, index) => {
try {
await message.delConfirm('是否取消绑定所选中数据？')
await MapApi.mapBindDeviceInfo({
positionMapId: item.positionMapId,
deviceInfoId: item.id,
type: 2
})
message.success('取消绑定成功')
await getDeviceList()
} catch {}
}
//新增
const deviceInfo = ref({
positionMapId: '',
deviceInfoId: '',
deviceType: '',
type: 1
})
const allDeviceList = ref()
//添加设备
const addDevice = () => {
addDeviceVisible.value = true
initAddForm()
}
//类型改变
const deviceTypeChange = async () => {
getAllDeviceList()
}
const getAllDeviceList = async () => {
allDeviceList.value = await MapApi.getDeviceInformationList({
unboundFlag: 1,
deviceType: deviceInfo.value.deviceType
})
}
//新增表单新增
const submitAddForm = async () => {
deviceInfo.value.positionMapId = props.positionMapId
await MapApi.mapBindDeviceInfo(deviceInfo.value)
message.success('新增成功')
addDeviceVisible.value = false
getDeviceList()
}
const dialogFormVisible = ref(false)
const open = (item) => {
dialogFormVisible.value = true
getDeviceList()
}
const initAddForm = () => {
deviceInfo.value.deviceInfoId = ''
deviceInfo.value.deviceType = ''
getAllDeviceList()
}
const formSubmit = () => {}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style lang="scss">
.equipment-form-dialog {
padding: 0px;
.text-form-dialog {
.el-dialog__header {
border-bottom: none;
}
.el-dialog__footer {
padding: 0px 20px 20px 0;
padding-bottom: 30px;
border-top: none !important;
}
.device-list {
display: flex;
flex-wrap: wrap;
.device-item {
position: relative;
width: 164px;
height: 118px;
background: #ffffff;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 10px;
.img {
width: 67px;
height: 59px;
}
.name {
margin-top: 8px;
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
font-size: 14px;
color: #91929e;
line-height: 20px;
text-align: left;
font-style: normal;
}
.delete-icon {
cursor: pointer;
font-size: 18px;
position: absolute;
right: 8px;
top: 8px;
}
}
}
.add-device-item {
width: 164px;
height: 118px;
background: rgba(63, 140, 255, 0.04);
border: 1px dashed #bac8e3;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
margin: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.add-icon {
font-size: 28px;
}
.name {
margin-top: 8px;
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
font-size: 14px;
color: #91929e;
line-height: 20px;
text-align: left;
font-style: normal;
}
}
}
</style>

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

@ -7,7 +7,7 @@
:width="80"
trigger="click"
v-if="item.switchType === 'move' || item.switchType === 'revolve'"
:disabled="currentItemIndex === -1"
:disabled="!currentItemIndex"
>
<template #reference>
<div
@ -28,7 +28,7 @@
<!-- 位置 -->
<el-form :model="state.moveForm" v-if="item.switchType === 'move'">
<el-form-item label="X">
<el-input v-model="state.moveForm.locationX" placeholder="请输入" />
<el-input v-model="state.moveForm.x" placeholder="请输入" />
</el-form-item>
<el-form-item label="Y">
<el-input v-model="state.moveForm.y" placeholder="请输入" />
@ -77,7 +77,7 @@
v-if="
item.switchType === 'saveAs' ||
item.switchType === 'delete' ||
item.switchType === 'grid'
item.switchType === 'ranging'
"
></div>
</div>
@ -127,10 +127,10 @@
v-for="(item, index) in allHistoryList[currentIndex]"
:key="index"
:parent="true"
:x="item.locationX"
:y="item.locationY"
:w="item.locationWide"
:h="item.locationDeep"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:r="item.angle"
@rotatestop="(degree) => rotateEnd(degree, item, index)"
@dragstop="(x, y) => dragEnd(x, y, item, index)"
@ -149,17 +149,18 @@
currentItemIndex === index ? 'border: 1px dashed #000;box-sizing: border-box;' : ''
"
>
<!-- <img
<img
v-if="item.labelType === 'icon'"
:src="item.img"
alt=""
style="width: 100%; height: 100%"
/> -->
/>
<div
v-if="item.type !== 7"
v-if="item.labelType === 'node'"
style="width: 100%; height: 100%; background-color: #000; border-radius: 50%"
></div>
<div
v-if="item.type === 7"
v-if="item.labelType === 'text'"
:style="{
fontSize: item.fontSize + 'px',
fontFamily: item.fontFamily,
@ -198,8 +199,8 @@
fontSize: state.inputBoxStyle.fontSize + 'px',
fontFamily: state.inputBoxStyle.fontFamily,
color: state.inputBoxStyle.fontColor,
left: state.inputBoxStyle.locationX + 'px',
top: state.inputBoxStyle.locationY + 'px'
left: state.inputBoxStyle.x + 'px',
top: state.inputBoxStyle.y + 'px'
}"
class="input-box-class"
/>
@ -220,7 +221,7 @@
<!-- 图层选择 -->
<layerSelectionToolDialog v-if="state.isShowLayer" ref="layerSelectionToolDialogRef" />
<!-- 设备弹窗选择 -->
<equipmentToolDialog ref="equipmentToolDialogRef" :positionMapId="imgBgObj.positionMapId" />
<equipmentToolDialog ref="equipmentToolDialogRef" />
</template>
<script setup>
@ -245,7 +246,42 @@ const formLoading = ref(false)
const allHistoryList = ref([]) //全部的历史记录
const currentIndex = ref(0) //用于记录是哪条历史记录的
const currentItemIndex = ref(-1) //用于记录是在编辑那个具体的节点、图标等
const allMapPointInfo = ref([]) //所有的图标的列表
const imgBgObj = reactive({
imgUrl: '',
positionMapId: ''
}) //地图背景
const imgList = ref([]) //所有的图标的列表
//获取地图点位
const list = ref([])
const getList = async () => {
let data = await MapApi.getPositionMapGetMap()
let mapList = []
for (let key in data) {
mapList.push({
floor: key,
children: data[key]
})
}
list.value = mapList
//默认取第一个
if (data[1][1]) {
getMapData(data[1][1])
}
}
//获取扫描图
const getMapData = async (item) => {
let data = await MapApi.getPositionMapdDwnloadPngBase64({
floor: item.floor,
area: item.area
})
let base64Url = 'data:image/png;base64,'
imgBgObj.imgUrl = data
imgBgObj.positionMapId = item.id
}
// 缩放停止
const interfaceRefreshed = ref(true)
@ -253,25 +289,25 @@ const resizeEnd = (x, y, w, h, item, index) => {
interfaceRefreshed.value = false
console.log('缩放', w, h)
nextTick(() => {
allMapPointInfo.value[index].locationX = x
allMapPointInfo.value[index].locationY = y
allMapPointInfo.value[index].locationWide = w
allMapPointInfo.value[index].locationDeep = 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, index) => {
console.log('拖拽')
if (x === item.locationX && y === item.locationY) return
allMapPointInfo.value[index].locationX = x
allMapPointInfo.value[index].locationY = y
if (x === item.x && y === item.y) return
imgList.value[index].x = x
imgList.value[index].y = y
addEditHistory()
}
// 旋转
const rotateEnd = (angle, item, index) => {
console.log('旋转')
allMapPointInfo.value[index].angle = angle
imgList.value[index].angle = angle
addEditHistory()
}
@ -282,7 +318,7 @@ const activatedHandle = (item, index) => {
currentItemIndex.value = index
//节点编辑
if (toolbarSwitchType.value === 'editNode' && item.type !== 7) {
if (toolbarSwitchType.value === 'editNode' && item.labelType === 'node') {
editNodePropertiesRef.value.open(item)
}
}
@ -297,9 +333,9 @@ const addEditHistory = () => {
if (currentIndex.value !== allHistoryList.value.length - 1) {
allHistoryList.value = allHistoryList.value.splice(0, currentIndex.value)
currentIndex.value = allHistoryList.value.length
allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
} else {
allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
currentIndex.value++
}
interfaceRefreshed.value = true
@ -310,7 +346,7 @@ const addEditHistory = () => {
const backPreviousStep = () => {
if (currentIndex.value > 0) {
currentIndex.value--
allMapPointInfo.value = allHistoryList.value[currentIndex.value]
imgList.value = allHistoryList.value[currentIndex.value]
console.log('撤销', allHistoryList.value[currentIndex.value])
} else {
message.warning('没了老铁')
@ -320,7 +356,7 @@ const backPreviousStep = () => {
const backNextStep = () => {
if (currentIndex.value < allHistoryList.value.length - 1) {
currentIndex.value++
allMapPointInfo.value = allHistoryList.value[currentIndex.value]
imgList.value = allHistoryList.value[currentIndex.value]
console.log('重做', allHistoryList.value[currentIndex.value])
} else {
message.warning('没了老铁')
@ -331,21 +367,21 @@ const backNextStep = () => {
const mapClick = (e) => {
if (toolbarSwitchType.value === 'drawNodes') {
//绘制节点
allMapPointInfo.value.push({
locationX: e.offsetX,
locationY: e.offsetY,
locationDeep: 16,
locationWide: 16,
imgList.value.push({
x: e.offsetX,
y: e.offsetY,
h: 16,
w: 16,
angle: 0,
draggable: false,
resizable: false,
rotatable: false,
lockAspectRatio: false, //横纵比
img: '',
type: 1 //默认类型1 路径节点
labelType: 'node'
})
currentIndex.value++
allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
}
//文字输入
if (toolbarSwitchType.value === 'text') {
@ -354,8 +390,8 @@ const mapClick = (e) => {
fontSize: state.textForm.fontSize,
fontFamily: state.textForm.fontFamily,
fontColor: state.textForm.fontColor,
locationX: e.offsetX,
locationY: e.offsetY
x: e.offsetX,
y: e.offsetY
}
// 聚焦输入框
@ -377,13 +413,13 @@ const textFormSuccess = (form) => {
const handleInputEnd = () => {
if (state.inputBoxValue) {
state.showInputBox = false
allMapPointInfo.value.push({
type: 7, //类型 7文字
imgList.value.push({
labelType: 'text', //类型 节点
mapId: '', //地图的id
locationX: state.inputBoxStyle.locationX, //x
locationY: state.inputBoxStyle.locationY, //y
locationDeep: '', //h
locationWide: '', //w
x: state.inputBoxStyle.x, //x
y: state.inputBoxStyle.y, //y
h: '', //h
w: '', //w
angle: 0, //旋转角度
draggable: true, //是否可以拖动
resizable: false, //是否可以调整大小
@ -409,11 +445,13 @@ const saveMap = async () => {
const saveNodeList = async () => {
formLoading.value = true
let list = allHistoryList.value[currentIndex.value]
let list = allHistoryList.value[currentIndex.value].filter((item) => {
return item.labelType === 'node'
})
list.forEach((item, index) => {
item.locationX = item.locationX
item.locationY = item.locationY
item.locationX = item.locationX || item.x
item.locationY = item.locationY || item.y
item.type = item.type || 1
if (item.type === 1) {
item.dataJson = ''
@ -471,7 +509,7 @@ const state = reactive({
{
switchType: 'revolve',
name: '旋转',
icon: 'ep:refresh-right',
icon: 'ep:folder-add',
isActive: false
},
{
@ -501,25 +539,25 @@ const state = reactive({
{
switchType: 'lineLibrary',
name: '线库',
icon: 'ep:message-box',
icon: 'ep:folder-add',
isActive: false
},
{
switchType: 'region',
name: '区域',
icon: 'ep:full-screen',
icon: 'ep:folder-add',
isActive: false
},
{
switchType: 'text',
name: '文字',
icon: 'ep:edit-pen',
icon: 'ep:folder-add',
isActive: false
},
{
switchType: 'equipment',
name: '设备',
icon: 'ep:video-camera-filled',
icon: 'ep:folder-add',
isActive: false
},
{
@ -531,19 +569,19 @@ const state = reactive({
{
switchType: 'layer',
name: '图层',
icon: 'ep:copy-document',
icon: 'ep:folder-add',
isActive: false
},
{
switchType: 'marker',
name: '标记',
icon: 'ep:map-location',
icon: 'ep:folder-add',
isActive: false
},
{
switchType: 'grid',
name: '网格',
icon: 'ep:grid',
icon: 'ep:folder-add',
isActive: false
},
{
@ -600,8 +638,8 @@ const state = reactive({
isShowToolbar: false, //工具栏展示隐藏
isShowGrid: false, //网格展示隐藏
moveForm: {
locationX: '',
locationY: ''
x: '',
y: ''
}, //移动的表单
rotationForm: {
angle: ''
@ -649,9 +687,6 @@ const toolbarClick = (item) => {
if (toolbarSwitchType.value !== 'text') {
state.cursorStyle = `auto`
state.textFormToolShow = false
state.showInputBox = false
state.inputBoxValue = ''
}
switch (type) {
@ -693,14 +728,14 @@ const toolbarClick = (item) => {
case 'paste':
//粘贴
let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
copyObj.locationX = copyObj.locationX + 50
copyObj.locationY = copyObj.locationY + 50
allMapPointInfo.value.push(copyObj)
copyObj.x = copyObj.x + 50
copyObj.y = copyObj.y + 50
imgList.value.push(copyObj)
addEditHistory()
break
case 'delete':
//删除
allMapPointInfo.value.splice(currentItemIndex.value, 1)
imgList.value.splice(currentItemIndex.value, 1)
addEditHistory()
break
case 'tools':
@ -725,6 +760,7 @@ const toolbarClick = (item) => {
state.textFormToolShow = true
state.cursorStyle = `url('${cursorCollection.input}'),auto`
} else {
state.textFormToolShow = false
state.cursorStyle = `auto`
state.textFormToolShow = false
state.showInputBox = false
@ -792,10 +828,8 @@ const toolbarClick = (item) => {
//移动工具表单提交
const moveFormSubmit = () => {
allHistoryList.value[currentIndex.value][currentItemIndex.value].locationX =
state.moveForm.locationX
allHistoryList.value[currentIndex.value][currentItemIndex.value].locationY =
state.moveForm.locationY
allHistoryList.value[currentIndex.value][currentItemIndex.value].x = state.moveForm.x
allHistoryList.value[currentIndex.value][currentItemIndex.value].y = state.moveForm.y
}
//旋转工具表单提交
const rotationFormSubmit = () => {
@ -849,79 +883,38 @@ const endDrawSelection = () => {
console.log(state.drawSelectionAreaSelectedPoints, '选中的')
}
//获取地图点位
const list = ref([])
const getMapList = async () => {
let data = await MapApi.getPositionMapGetMap()
let mapList = []
for (let key in data) {
mapList.push({
floor: key,
children: data[key]
})
}
list.value = mapList
//默认取第一个
if (data[1][0]) {
getMapData(data[1][0])
}
}
//获取扫描图
//地图背景
const imgBgObj = reactive({
imgUrl: '',
positionMapId: '',
width: '',
height: ''
})
const getMapData = async (item) => {
let data = await MapApi.getPositionMapdDwnloadPngBase64({
floor: item.floor,
area: item.area
})
imgBgObj.imgUrl = data
imgBgObj.positionMapId = item.id
const img = new Image()
img.src = imgBgObj.imgUrl
imgBgObj.width = img.naturalWidth
imgBgObj.height = img.naturalHeight
console.log(imgBgObj)
getAllNodeList()
}
//获取所有的点位
const getAllNodeList = async () => {
let list = await MapApi.getPositionMapItemList({
positionMapId: imgBgObj.positionMapId
})
list.forEach((item) => {
if (item.type === 2) {
//库位点
let obj = JSON.parse(item.dataJson)[0]
// allMapPointInfo.value.push()
}
})
// allMapPointInfo.value = list.map((item) => {
// return {
// ...JSON.parse(item.dataJson)
// }
// })
// allMapPointInfo.value = allMapPointInfo.value
// console.log(allMapPointInfo.value)
allHistoryList.value[0] = JSON.parse(JSON.stringify(allMapPointInfo.value))
console.log(allHistoryList.value[0])
}
onMounted(() => {
getMapList()
imgList.value = [
{
x: 100,
y: 100,
h: 100,
w: 100,
angle: 13,
draggable: true,
resizable: true,
rotatable: true,
lockAspectRatio: true, //横纵比
img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png',
labelType: 'icon'
},
{
x: 454.4,
y: 434.2,
w: 100,
h: 100,
angle: 0,
draggable: true,
resizable: true,
rotatable: true,
lockAspectRatio: false, //横纵比
img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png',
labelType: 'icon'
}
]
allHistoryList.value[0] = JSON.parse(JSON.stringify(imgList.value))
getList()
})
</script>

20
src/views/mapPage/realTimeMap/格式.md
View File

@ -1,20 +0,0 @@
```
{
labelType: 'wayPoint', //类型 路径点wayPoint 库位点locationPoint 设备点devicePoint 停车点parkingPoint 区域变更点areaPoint 等待点waitPoint 文字text
mapId: '', //地图id
x: 100, //left
y: 100, //top
h: 100, //高
w: 100, //宽
angle: 13, //旋转角度
draggable: true, //是否可以拖动
resizable: true, //是否可以调整大小
rotatable: true, //是否可以旋转
lockAspectRatio: true, //是否保持横纵比
img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png',
text: '', //文字
fontColor: '', //文字颜色
fontType: '', //文字类型
fontFamily: '' //字体类型
}
```