地图编辑

src/api/map/map.ts

@@ -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 })
+}

src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue

@@ -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, //长度
+  locationX: undefined,
-  width: 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,
+        locationWide: form.value.locationWide || undefined,
-        locationDeep: form.value.length || 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,
+      locationWide: form.value.locationWide || undefined,
-      locationDeep: form.value.length || 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.locationX = item.locationX
-  form.value.locationY = item.y
+  form.value.locationY = item.locationY
   form.value.type = item.type || 1
   dialogFormVisible.value = true
 }

src/views/mapPage/realTimeMap/components-tool/equipmentToolDialog.vue

@@ -1,10 +1,59 @@
 <template>
-  <Dialog v-model="dialogFormVisible" title="设备" width="600" class="text-form-dialog">
+  <Dialog v-model="dialogFormVisible" title="设备" width="586" class="equipment-form-dialog">
-    <div> 11 </div>
+    <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 @click="addDeviceVisible = false">取消</el-button>
-        <el-button type="primary" @click="formSubmit"> 确认 </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 {
+.equipment-form-dialog {
-  .el-dialog__header {
+  padding: 0px;
-    border-bottom: none;
-  }
 
   .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>

src/views/mapPage/realTimeMap/editMap.vue

@@ -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"
+          :x="item.locationX"
-          :y="item.y"
+          :y="item.locationY"
-          :w="item.w"
+          :w="item.locationWide"
-          :h="item.h"
+          :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
+            <!-- <img
-              v-if="item.labelType === 'icon'"
               :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',
+          left: state.inputBoxStyle.locationX + 'px',
-          top: state.inputBoxStyle.y + '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({
+const allMapPointInfo = ref([]) //所有的图标的列表
-  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)
@@ -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
+    allMapPointInfo.value[index].locationX = x
-    imgList.value[index].y = y
+    allMapPointInfo.value[index].locationY = y
-    imgList.value[index].w = w
+    allMapPointInfo.value[index].locationWide = w
-    imgList.value[index].h = h
+    allMapPointInfo.value[index].locationDeep = h
     addEditHistory()
   })
 }
 // 拖拽停止
 const dragEnd = (x, y, item, index) => {
   console.log('拖拽')
-  if (x === item.x && y === item.y) return
+  if (x === item.locationX && y === item.locationY) return
-  imgList.value[index].x = x
+  allMapPointInfo.value[index].locationX = x
-  imgList.value[index].y = y
+  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({
+    allMapPointInfo.value.push({
-      x: e.offsetX,
+      locationX: e.offsetX,
-      y: e.offsetY,
+      locationY: e.offsetY,
-      h: 16,
+      locationDeep: 16,
-      w: 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,
+      locationX: e.offsetX,
-      y: e.offsetY
+      locationY: e.offsetY
     }
 
     // 聚焦输入框
@@ -413,13 +377,13 @@ const textFormSuccess = (form) => {
 const handleInputEnd = () => {
   if (state.inputBoxValue) {
     state.showInputBox = false
-    imgList.value.push({
+    allMapPointInfo.value.push({
-      labelType: 'text', //类型  节点
+      type: 7, //类型  7文字
       mapId: '', //地图的id
-      x: state.inputBoxStyle.x, //x
+      locationX: state.inputBoxStyle.locationX, //x
-      y: state.inputBoxStyle.y, //y
+      locationY: state.inputBoxStyle.locationY, //y
-      h: '', //h
+      locationDeep: '', //h
-      w: '', //w
+      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) => {
+  let list = allHistoryList.value[currentIndex.value]
-    return item.labelType === 'node'
-  })
 
   list.forEach((item, index) => {
-    item.locationX = item.locationX || item.x
+    item.locationX = item.locationX
-    item.locationY = item.locationY || item.y
+    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: '',
+    locationX: '',
-    y: ''
+    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.locationX = copyObj.locationX + 50
-      copyObj.y = copyObj.y + 50
+      copyObj.locationY = copyObj.locationY + 50
-      imgList.value.push(copyObj)
+      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].locationX =
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].y = state.moveForm.y
+    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 = [
+const list = ref([])
-    {
+const getMapList = async () => {
-      x: 100,
+  let data = await MapApi.getPositionMapGetMap()
-      y: 100,
+  let mapList = []
-      h: 100,
+  for (let key in data) {
-      w: 100,
+    mapList.push({
-      angle: 13,
+      floor: key,
-      draggable: true,
+      children: data[key]
-      resizable: true,
+    })
-      rotatable: true,
+  }
-      lockAspectRatio: true, //横纵比
+  list.value = mapList
-      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()
+  //默认取第一个
+  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>
 

src/views/mapPage/realTimeMap/格式.md

@@ -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: '' //字体类型
+}
+```