Compare commits
3 Commits
d64e339249
...
66150c708d
| Author | SHA1 | Date | |
|---|---|---|---|
|
66150c708d | ||
|
|
44aae99612 | ||
|
|
96121faf7e |
@ -4,7 +4,7 @@ NODE_ENV=development
|
||||
VITE_DEV=true
|
||||
|
||||
# 请求路径
|
||||
VITE_BASE_URL='http://192.168.0.74:48080'
|
||||
VITE_BASE_URL='http://192.168.0.66:48080'
|
||||
# VITE_BASE_URL='http://192.168.0.189:48080'
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
|
||||
|
||||
@ -75,3 +75,7 @@ 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 })
|
||||
}
|
||||
|
||||
@ -1,13 +1,77 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<div>
|
||||
<div class="new-top-box">
|
||||
<div class="new-top-box-left">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="2">
|
||||
<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">
|
||||
<div class="new-top-box-right-input-box">
|
||||
<input
|
||||
type="text"
|
||||
v-model="queryParams.robotNo"
|
||||
placeholder="请输入关键字"
|
||||
class="new-top-box-right-input"
|
||||
placeholder-class="new-top-box-right-input-placeholder"
|
||||
/>
|
||||
<Icon
|
||||
icon="ep:search"
|
||||
size="20px"
|
||||
color="#A4AFCA"
|
||||
style="cursor: pointer"
|
||||
@click="getCarList"
|
||||
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-divider direction="vertical" /> -->
|
||||
<div class="new-top-box-left-statistics-box">
|
||||
<el-button style="height: 40px">Default</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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>
|
||||
@ -52,42 +116,7 @@
|
||||
<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"
|
||||
v-model="queryParams.robotNo"
|
||||
placeholder="请输入关键字"
|
||||
class="new-top-box-right-input"
|
||||
placeholder-class="new-top-box-right-input-placeholder"
|
||||
/>
|
||||
<Icon
|
||||
icon="ep:search"
|
||||
size="20px"
|
||||
color="#A4AFCA"
|
||||
style="cursor: pointer"
|
||||
@click="getCarList"
|
||||
class="new-top-box-right-input-icon"
|
||||
/>
|
||||
</div>
|
||||
<div class="new-top-box-right-button" @click="openForm('create')"> 新增设备 </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</ContentWrap>
|
||||
<div class="new-list-box-all">
|
||||
<div class="new-list-box">
|
||||
@ -157,7 +186,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<createEditDialog ref="createEditDialogRef" @success="getCarList" />
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -230,27 +258,27 @@ 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: '提升机',
|
||||
@ -403,7 +431,17 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<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;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: calc(100% - 60px);
|
||||
padding: 0 30px;
|
||||
@ -526,12 +564,18 @@ 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: 600;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #0d162a;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
.new-top-box-left-statistics {
|
||||
padding: 5px 7px;
|
||||
@ -584,7 +628,7 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
height: 36px;
|
||||
}
|
||||
.new-top-box-right-input {
|
||||
width: 225px;
|
||||
/* width: 225px; */
|
||||
height: 15px;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
@ -610,13 +654,12 @@ 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;
|
||||
|
||||
@ -59,15 +59,15 @@
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="库位长度" prop="length">
|
||||
<el-form-item label="库位长度" prop="locationDeep">
|
||||
<div style="display: flex">
|
||||
<el-input v-model="form.length" placeholder="请输入" />
|
||||
<el-input v-model="form.locationDeep" placeholder="请输入" />
|
||||
<span class="ml-2">cm</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="库位宽度" prop="width">
|
||||
<el-form-item label="库位宽度" prop="locationWide">
|
||||
<div style="display: flex">
|
||||
<el-input v-model="form.width" placeholder="请输入" />
|
||||
<el-input v-model="form.locationWide" placeholder="请输入" />
|
||||
<span class="ml-2">cm</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -124,12 +124,12 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const form = ref({
|
||||
locationX: undefined,
|
||||
locationY: undefined,
|
||||
type: 1,
|
||||
layersNumber: 1, //层数
|
||||
length: undefined, //长度
|
||||
width: undefined, //宽度
|
||||
locationX: undefined,
|
||||
locationY: undefined,
|
||||
locationDeep: undefined, //长度
|
||||
locationWide: 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.width || undefined,
|
||||
locationDeep: form.value.length || undefined,
|
||||
locationWide: form.value.locationWide || undefined,
|
||||
locationDeep: form.value.locationDeep || 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.width || undefined,
|
||||
locationDeep: form.value.length || undefined,
|
||||
locationWide: form.value.locationWide || undefined,
|
||||
locationDeep: form.value.locationDeep || 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.x
|
||||
form.value.locationY = item.y
|
||||
form.value.locationX = item.locationX
|
||||
form.value.locationY = item.locationY
|
||||
form.value.type = item.type || 1
|
||||
dialogFormVisible.value = true
|
||||
}
|
||||
|
||||
@ -1,10 +1,59 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogFormVisible" title="设备" width="600" class="text-form-dialog">
|
||||
<div> 11 </div>
|
||||
<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>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="formSubmit"> 确认 </el-button>
|
||||
<el-button @click="addDeviceVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitAddForm"> 确定 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
@ -12,27 +61,168 @@
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import * as MapApi from '@/api/map/map'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
|
||||
const dialogFormVisible = ref(false)
|
||||
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 open = (item) => {
|
||||
dialogFormVisible.value = true
|
||||
getDeviceList()
|
||||
}
|
||||
|
||||
const formSubmit = () => {}
|
||||
const initAddForm = () => {
|
||||
deviceInfo.value.deviceInfoId = ''
|
||||
deviceInfo.value.deviceType = ''
|
||||
getAllDeviceList()
|
||||
}
|
||||
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.text-form-dialog {
|
||||
.el-dialog__header {
|
||||
border-bottom: none;
|
||||
}
|
||||
.equipment-form-dialog {
|
||||
padding: 0px;
|
||||
|
||||
.el-dialog__footer {
|
||||
padding-bottom: 30px;
|
||||
padding: 0px 20px 20px 0;
|
||||
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>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
:width="80"
|
||||
trigger="click"
|
||||
v-if="item.switchType === 'move' || item.switchType === 'revolve'"
|
||||
:disabled="!currentItemIndex"
|
||||
:disabled="currentItemIndex === -1"
|
||||
>
|
||||
<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.x" placeholder="请输入" />
|
||||
<el-input v-model="state.moveForm.locationX" 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 === 'ranging'
|
||||
item.switchType === 'grid'
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
@ -127,10 +127,10 @@
|
||||
v-for="(item, index) in allHistoryList[currentIndex]"
|
||||
:key="index"
|
||||
:parent="true"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:x="item.locationX"
|
||||
:y="item.locationY"
|
||||
:w="item.locationWide"
|
||||
:h="item.locationDeep"
|
||||
:r="item.angle"
|
||||
@rotatestop="(degree) => rotateEnd(degree, item, index)"
|
||||
@dragstop="(x, y) => dragEnd(x, y, item, index)"
|
||||
@ -149,18 +149,17 @@
|
||||
currentItemIndex === index ? 'border: 1px dashed #000;box-sizing: border-box;' : ''
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-if="item.labelType === 'icon'"
|
||||
<!-- <img
|
||||
:src="item.img"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
/> -->
|
||||
<div
|
||||
v-if="item.labelType === 'node'"
|
||||
v-if="item.type !== 7"
|
||||
style="width: 100%; height: 100%; background-color: #000; border-radius: 50%"
|
||||
></div>
|
||||
<div
|
||||
v-if="item.labelType === 'text'"
|
||||
v-if="item.type === 7"
|
||||
:style="{
|
||||
fontSize: item.fontSize + 'px',
|
||||
fontFamily: item.fontFamily,
|
||||
@ -199,8 +198,8 @@
|
||||
fontSize: state.inputBoxStyle.fontSize + 'px',
|
||||
fontFamily: state.inputBoxStyle.fontFamily,
|
||||
color: state.inputBoxStyle.fontColor,
|
||||
left: state.inputBoxStyle.x + 'px',
|
||||
top: state.inputBoxStyle.y + 'px'
|
||||
left: state.inputBoxStyle.locationX + 'px',
|
||||
top: state.inputBoxStyle.locationY + 'px'
|
||||
}"
|
||||
class="input-box-class"
|
||||
/>
|
||||
@ -221,7 +220,7 @@
|
||||
<!-- 图层选择 -->
|
||||
<layerSelectionToolDialog v-if="state.isShowLayer" ref="layerSelectionToolDialogRef" />
|
||||
<!-- 设备弹窗选择 -->
|
||||
<equipmentToolDialog ref="equipmentToolDialogRef" />
|
||||
<equipmentToolDialog ref="equipmentToolDialogRef" :positionMapId="imgBgObj.positionMapId" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -246,42 +245,7 @@ const formLoading = ref(false)
|
||||
const allHistoryList = ref([]) //全部的历史记录
|
||||
const currentIndex = ref(0) //用于记录是哪条历史记录的
|
||||
const currentItemIndex = ref(-1) //用于记录是在编辑那个具体的节点、图标等
|
||||
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 allMapPointInfo = ref([]) //所有的图标的列表
|
||||
|
||||
// 缩放停止
|
||||
const interfaceRefreshed = ref(true)
|
||||
@ -289,25 +253,25 @@ const resizeEnd = (x, y, w, h, item, index) => {
|
||||
interfaceRefreshed.value = false
|
||||
console.log('缩放', w, h)
|
||||
nextTick(() => {
|
||||
imgList.value[index].x = x
|
||||
imgList.value[index].y = y
|
||||
imgList.value[index].w = w
|
||||
imgList.value[index].h = h
|
||||
allMapPointInfo.value[index].locationX = x
|
||||
allMapPointInfo.value[index].locationY = y
|
||||
allMapPointInfo.value[index].locationWide = w
|
||||
allMapPointInfo.value[index].locationDeep = h
|
||||
addEditHistory()
|
||||
})
|
||||
}
|
||||
// 拖拽停止
|
||||
const dragEnd = (x, y, item, index) => {
|
||||
console.log('拖拽')
|
||||
if (x === item.x && y === item.y) return
|
||||
imgList.value[index].x = x
|
||||
imgList.value[index].y = y
|
||||
if (x === item.locationX && y === item.locationY) return
|
||||
allMapPointInfo.value[index].locationX = x
|
||||
allMapPointInfo.value[index].locationY = y
|
||||
addEditHistory()
|
||||
}
|
||||
// 旋转
|
||||
const rotateEnd = (angle, item, index) => {
|
||||
console.log('旋转')
|
||||
imgList.value[index].angle = angle
|
||||
allMapPointInfo.value[index].angle = angle
|
||||
addEditHistory()
|
||||
}
|
||||
|
||||
@ -318,7 +282,7 @@ const activatedHandle = (item, index) => {
|
||||
currentItemIndex.value = index
|
||||
|
||||
//节点编辑
|
||||
if (toolbarSwitchType.value === 'editNode' && item.labelType === 'node') {
|
||||
if (toolbarSwitchType.value === 'editNode' && item.type !== 7) {
|
||||
editNodePropertiesRef.value.open(item)
|
||||
}
|
||||
}
|
||||
@ -333,9 +297,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(imgList.value)))
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
|
||||
} else {
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
|
||||
currentIndex.value++
|
||||
}
|
||||
interfaceRefreshed.value = true
|
||||
@ -346,7 +310,7 @@ const addEditHistory = () => {
|
||||
const backPreviousStep = () => {
|
||||
if (currentIndex.value > 0) {
|
||||
currentIndex.value--
|
||||
imgList.value = allHistoryList.value[currentIndex.value]
|
||||
allMapPointInfo.value = allHistoryList.value[currentIndex.value]
|
||||
console.log('撤销', allHistoryList.value[currentIndex.value])
|
||||
} else {
|
||||
message.warning('没了老铁')
|
||||
@ -356,7 +320,7 @@ const backPreviousStep = () => {
|
||||
const backNextStep = () => {
|
||||
if (currentIndex.value < allHistoryList.value.length - 1) {
|
||||
currentIndex.value++
|
||||
imgList.value = allHistoryList.value[currentIndex.value]
|
||||
allMapPointInfo.value = allHistoryList.value[currentIndex.value]
|
||||
console.log('重做', allHistoryList.value[currentIndex.value])
|
||||
} else {
|
||||
message.warning('没了老铁')
|
||||
@ -367,21 +331,21 @@ const backNextStep = () => {
|
||||
const mapClick = (e) => {
|
||||
if (toolbarSwitchType.value === 'drawNodes') {
|
||||
//绘制节点
|
||||
imgList.value.push({
|
||||
x: e.offsetX,
|
||||
y: e.offsetY,
|
||||
h: 16,
|
||||
w: 16,
|
||||
allMapPointInfo.value.push({
|
||||
locationX: e.offsetX,
|
||||
locationY: e.offsetY,
|
||||
locationDeep: 16,
|
||||
locationWide: 16,
|
||||
angle: 0,
|
||||
draggable: false,
|
||||
resizable: false,
|
||||
rotatable: false,
|
||||
lockAspectRatio: false, //横纵比
|
||||
img: '',
|
||||
labelType: 'node'
|
||||
type: 1 //默认类型1 路径节点
|
||||
})
|
||||
currentIndex.value++
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
|
||||
}
|
||||
//文字输入
|
||||
if (toolbarSwitchType.value === 'text') {
|
||||
@ -390,8 +354,8 @@ const mapClick = (e) => {
|
||||
fontSize: state.textForm.fontSize,
|
||||
fontFamily: state.textForm.fontFamily,
|
||||
fontColor: state.textForm.fontColor,
|
||||
x: e.offsetX,
|
||||
y: e.offsetY
|
||||
locationX: e.offsetX,
|
||||
locationY: e.offsetY
|
||||
}
|
||||
|
||||
// 聚焦输入框
|
||||
@ -413,13 +377,13 @@ const textFormSuccess = (form) => {
|
||||
const handleInputEnd = () => {
|
||||
if (state.inputBoxValue) {
|
||||
state.showInputBox = false
|
||||
imgList.value.push({
|
||||
labelType: 'text', //类型 节点
|
||||
allMapPointInfo.value.push({
|
||||
type: 7, //类型 7文字
|
||||
mapId: '', //地图的id
|
||||
x: state.inputBoxStyle.x, //x
|
||||
y: state.inputBoxStyle.y, //y
|
||||
h: '', //h
|
||||
w: '', //w
|
||||
locationX: state.inputBoxStyle.locationX, //x
|
||||
locationY: state.inputBoxStyle.locationY, //y
|
||||
locationDeep: '', //h
|
||||
locationWide: '', //w
|
||||
angle: 0, //旋转角度
|
||||
draggable: true, //是否可以拖动
|
||||
resizable: false, //是否可以调整大小
|
||||
@ -445,13 +409,11 @@ const saveMap = async () => {
|
||||
const saveNodeList = async () => {
|
||||
formLoading.value = true
|
||||
|
||||
let list = allHistoryList.value[currentIndex.value].filter((item) => {
|
||||
return item.labelType === 'node'
|
||||
})
|
||||
let list = allHistoryList.value[currentIndex.value]
|
||||
|
||||
list.forEach((item, index) => {
|
||||
item.locationX = item.locationX || item.x
|
||||
item.locationY = item.locationY || item.y
|
||||
item.locationX = item.locationX
|
||||
item.locationY = item.locationY
|
||||
item.type = item.type || 1
|
||||
if (item.type === 1) {
|
||||
item.dataJson = ''
|
||||
@ -509,7 +471,7 @@ const state = reactive({
|
||||
{
|
||||
switchType: 'revolve',
|
||||
name: '旋转',
|
||||
icon: 'ep:folder-add',
|
||||
icon: 'ep:refresh-right',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
@ -539,25 +501,25 @@ const state = reactive({
|
||||
{
|
||||
switchType: 'lineLibrary',
|
||||
name: '线库',
|
||||
icon: 'ep:folder-add',
|
||||
icon: 'ep:message-box',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
switchType: 'region',
|
||||
name: '区域',
|
||||
icon: 'ep:folder-add',
|
||||
icon: 'ep:full-screen',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
switchType: 'text',
|
||||
name: '文字',
|
||||
icon: 'ep:folder-add',
|
||||
icon: 'ep:edit-pen',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
switchType: 'equipment',
|
||||
name: '设备',
|
||||
icon: 'ep:folder-add',
|
||||
icon: 'ep:video-camera-filled',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
@ -569,19 +531,19 @@ const state = reactive({
|
||||
{
|
||||
switchType: 'layer',
|
||||
name: '图层',
|
||||
icon: 'ep:folder-add',
|
||||
icon: 'ep:copy-document',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
switchType: 'marker',
|
||||
name: '标记',
|
||||
icon: 'ep:folder-add',
|
||||
icon: 'ep:map-location',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
switchType: 'grid',
|
||||
name: '网格',
|
||||
icon: 'ep:folder-add',
|
||||
icon: 'ep:grid',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
@ -638,8 +600,8 @@ const state = reactive({
|
||||
isShowToolbar: false, //工具栏展示隐藏
|
||||
isShowGrid: false, //网格展示隐藏
|
||||
moveForm: {
|
||||
x: '',
|
||||
y: ''
|
||||
locationX: '',
|
||||
locationY: ''
|
||||
}, //移动的表单
|
||||
rotationForm: {
|
||||
angle: ''
|
||||
@ -687,6 +649,9 @@ const toolbarClick = (item) => {
|
||||
|
||||
if (toolbarSwitchType.value !== 'text') {
|
||||
state.cursorStyle = `auto`
|
||||
state.textFormToolShow = false
|
||||
state.showInputBox = false
|
||||
state.inputBoxValue = ''
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
@ -728,14 +693,14 @@ const toolbarClick = (item) => {
|
||||
case 'paste':
|
||||
//粘贴
|
||||
let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
|
||||
copyObj.x = copyObj.x + 50
|
||||
copyObj.y = copyObj.y + 50
|
||||
imgList.value.push(copyObj)
|
||||
copyObj.locationX = copyObj.locationX + 50
|
||||
copyObj.locationY = copyObj.locationY + 50
|
||||
allMapPointInfo.value.push(copyObj)
|
||||
addEditHistory()
|
||||
break
|
||||
case 'delete':
|
||||
//删除
|
||||
imgList.value.splice(currentItemIndex.value, 1)
|
||||
allMapPointInfo.value.splice(currentItemIndex.value, 1)
|
||||
addEditHistory()
|
||||
break
|
||||
case 'tools':
|
||||
@ -760,7 +725,6 @@ 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
|
||||
@ -828,8 +792,10 @@ const toolbarClick = (item) => {
|
||||
|
||||
//移动工具表单提交
|
||||
const moveFormSubmit = () => {
|
||||
allHistoryList.value[currentIndex.value][currentItemIndex.value].x = state.moveForm.x
|
||||
allHistoryList.value[currentIndex.value][currentItemIndex.value].y = state.moveForm.y
|
||||
allHistoryList.value[currentIndex.value][currentItemIndex.value].locationX =
|
||||
state.moveForm.locationX
|
||||
allHistoryList.value[currentIndex.value][currentItemIndex.value].locationY =
|
||||
state.moveForm.locationY
|
||||
}
|
||||
//旋转工具表单提交
|
||||
const rotationFormSubmit = () => {
|
||||
@ -883,38 +849,79 @@ const endDrawSelection = () => {
|
||||
console.log(state.drawSelectionAreaSelectedPoints, '选中的')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
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'
|
||||
//获取地图点位
|
||||
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]
|
||||
})
|
||||
}
|
||||
]
|
||||
allHistoryList.value[0] = JSON.parse(JSON.stringify(imgList.value))
|
||||
list.value = mapList
|
||||
|
||||
getList()
|
||||
//默认取第一个
|
||||
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()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
20
src/views/mapPage/realTimeMap/格式.md
Normal file
20
src/views/mapPage/realTimeMap/格式.md
Normal file
@ -0,0 +1,20 @@
|
||||
```
|
||||
{
|
||||
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: '' //字体类型
|
||||
}
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user