地图编辑

src/components/RouterSearch/index.vue

@@ -18,7 +18,7 @@
     </el-select>
   </ElDialog>
   <div v-else class="custom-hover" @click.stop="showTopSearch = !showTopSearch">
-    <Icon icon="ep:search" />
+    <Icon icon="ep:search" color="var(--top-header-text-color)" />
     <el-select
       @click.stop
       filterable

src/layout/Layout.vue

@@ -59,7 +59,7 @@ export default defineComponent({
 
         <Backtop></Backtop>
 
-        {<Setting></Setting>}
+        {/* <Setting></Setting> */}
       </section>
     )
   }

src/layout/components/Message/src/Message.vue

@@ -54,7 +54,13 @@ onMounted(() => {
     <ElPopover :width="400" placement="bottom" trigger="click">
       <template #reference>
         <ElBadge :is-dot="unreadCount > 0" class="item">
-          <Icon :size="18" class="cursor-pointer" icon="ep:bell" @click="getList" />
+          <Icon
+            :size="18"
+            class="cursor-pointer"
+            icon="ep:bell"
+            @click="getList"
+            color="var(--top-header-text-color)"
+          />
         </ElBadge>
       </template>
       <ElTabs v-model="activeName">

src/layout/components/Setting/src/Setting.vue

@@ -297,6 +297,6 @@ $prefix-cls: #{$namespace}-setting;
 
 .#{$prefix-cls} {
   border-radius: 6px 0 0 6px;
-  z-index: 1200;/*修正没有z-index会被表格层覆盖,值不要超过4000*/
+  z-index: 1200; /*修正没有z-index会被表格层覆盖,值不要超过4000*/
 }
 </style>

src/layout/components/ToolHeader.vue

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, computed } from 'vue'
-import { Message } from '@/layout/components//Message'
+import { Message } from '@/layout/components/Message'
 import { Collapse } from '@/layout/components/Collapse'
 import { UserInfo } from '@/layout/components/UserInfo'
 import { Screenfull } from '@/layout/components/Screenfull'
@@ -52,7 +52,7 @@ export default defineComponent({
           'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
           'dark:bg-[var(--el-bg-color)]'
         ]}
-        style="height:60px"
+        style="height:61px"
       >
         {layout.value !== 'top' ? (
           <div class="h-full flex items-center">

src/layout/components/useRenderLayout.tsx

@@ -55,7 +55,7 @@ export const useRenderLayout = () => {
                   'w-[var(--left-menu-max-width)]': !appStore.getCollapse
                 }
               ]}
-              style="transition: all var(--transition-time-02);height:59px;display: flex;
+              style="transition: all var(--transition-time-02);height:60px;display: flex;
         align-items: center;"
             ></Logo>
           ) : undefined}

src/router/modules/remaining.ts

@@ -72,7 +72,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
   },
   //地图
   {
-    path: '/warehouse/map', // 商品中心
+    path: '/warehouse/map',
     component: Layout,
     name: 'warehouseMap',
     meta: {

src/store/modules/app.ts

@@ -94,7 +94,7 @@ export const useAppStore = defineStore('app', {
         // 头部字体颜色
         topHeaderTextColor: '#ffffff',
         // 头部悬停颜色
-        topHeaderHoverColor: '#f6f6f6',
+        topHeaderHoverColor: '#215bd8',
         // 头部边框颜色
         topToolBorderColor: '#E2E7F5'
       }

src/styles/var.css

@@ -21,7 +21,7 @@
   /* left menu end */
 
   /* logo start */
-  --logo-height: 50px;
+  --logo-height: 40px;
 
   --logo-title-text-color: #fff;
   /* logo end */
@@ -31,14 +31,14 @@
 
   --top-header-text-color: 'inherit';
 
-  --top-header-hover-color: #f6f6f6;
+  --top-header-hover-color: #215bd8;
 
   --top-tool-height: var(--logo-height);
 
   --top-tool-p-x: 0;
 
   /* --tags-view-height: 35px;   开启面包屑时 */
-  --tags-view-height: 8px;
+  --tags-view-height: 16px;
   /* header start */
 
   /* tab menu start */

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

@@ -21,7 +21,13 @@
         <el-form-item label="层数" prop="layersNumber" required v-if="form.type === 2">
           <el-input-number v-model="form.layersNumber" :min="1" :max="3" />
         </el-form-item>
-        <el-form-item label="编号" prop="id" required v-if="form.type === 3">
+        <el-form-item
+          label="编号"
+          prop="id"
+          required
+          v-if="form.type === 3"
+          :rules="{ required: true, message: '请选择设备编号', trigger: 'change' }"
+        >
           <div>
             <el-select
               v-model="deviceInfo.deviceType"
@@ -199,11 +205,12 @@ const directionChange = (e) => {
 
 //获取设备信息
 const deviceInfo = ref({
-  positionMapId: props.positionMapId,
+  positionMapId: '',
   deviceType: ''
 })
 const deviceList = ref([])
 const getDeviceList = async () => {
+  deviceInfo.value.positionMapId = props.positionMapId
   deviceList.value = await MapApi.getDeviceInformationList(deviceInfo.value)
 }
 const deviceTypeChange = () => {

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

@@ -0,0 +1,38 @@
+<template>
+  <Dialog v-model="dialogFormVisible" title="设备" width="600" class="text-form-dialog">
+    <div> 11 </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="formSubmit"> 确认 </el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+
+const dialogFormVisible = ref(false)
+
+const open = (item) => {
+  dialogFormVisible.value = true
+}
+
+const formSubmit = () => {}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style lang="scss">
+.text-form-dialog {
+  .el-dialog__header {
+    border-bottom: none;
+  }
+
+  .el-dialog__footer {
+    padding-bottom: 30px;
+    border-top: none !important;
+  }
+}
+</style>

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

@@ -0,0 +1,103 @@
+<template>
+  <div class="layer-select">
+    <div class="top-list" v-if="isUnfold">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="changeSelectList(item)">
+        <span class="name">{{ item.name }}</span>
+        <el-icon v-if="item.isShow" color="#1677FF"><View /></el-icon>
+        <el-icon v-else color="#444444"><Hide /></el-icon>
+      </div>
+    </div>
+    <div class="top-button" @click="changeUnfold">
+      <span class="title">图例</span>
+      <el-icon v-if="isUnfold" color="#98A4BF"><CaretTop /></el-icon>
+      <el-icon v-else color="#98A4BF"><CaretBottom /></el-icon>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+
+const list = ref([
+  {
+    labelType: 'locationPoint',
+    name: '库位点',
+    isShow: true
+  },
+  {
+    labelType: 'wayPoint',
+    name: '路径点',
+    isShow: true
+  },
+  {
+    labelType: 'devicePoint',
+    name: '设备点',
+    isShow: true
+  }
+])
+const isUnfold = ref(true)
+
+const changeUnfold = () => {
+  isUnfold.value = !isUnfold.value
+}
+const changeSelectList = (item) => {
+  item.isShow = !item.isShow
+}
+
+const open = (item) => {}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style lang="scss">
+.layer-select {
+  background-color: #fff;
+  position: fixed;
+  bottom: 20px;
+  width: 144px;
+  cursor: pointer;
+
+  .top-list {
+    .item {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 22px;
+      box-sizing: border-box;
+
+      .name {
+        font-family:
+          PingFangSC,
+          PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 20px;
+        text-align: left;
+        font-style: normal;
+      }
+    }
+  }
+
+  .top-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 0;
+    border: 1px solid #eeeeee;
+
+    .title {
+      font-family:
+        PingFangSC,
+        PingFang SC;
+      font-weight: 400;
+      font-size: 16px;
+      color: #98a4bf;
+      line-height: 22px;
+      text-align: left;
+      font-style: normal;
+    }
+  }
+}
+</style>

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

@@ -1,8 +1,13 @@
 <template>
-  <Dialog v-model="dialogFormVisible" title="文字设置" width="400" class="text-form-dialog">
+  <div class="text-form-dialog">
-    <el-form :model="form">
+    <el-form :model="form" :inline="true">
       <el-form-item label="字体">
-        <el-select v-model="form.fontType" placeholder="请选择">
+        <el-select
+          v-model="form.fontFamily"
+          placeholder="请选择"
+          class="!w-100px"
+          @change="fontStyleChange()"
+        >
           <el-option label="宋体" value="SimSun" />
           <el-option label="黑体" value="SimHei" />
           <el-option label="微软雅黑" value="Microsoft Yahei" />
@@ -11,8 +16,10 @@
           <el-option label="仿宋" value="FangSong" />
         </el-select>
       </el-form-item>
+
       <el-form-item label="字号">
         <el-input-number
+          @change="fontStyleChange()"
           v-model="form.fontSize"
           :step="1"
           :min="10"
@@ -21,45 +28,36 @@
         />
       </el-form-item>
       <el-form-item label="颜色">
-        <el-color-picker v-model="form.fontColor" />
+        <el-color-picker v-model="form.fontColor" @change="fontStyleChange()" />
       </el-form-item>
     </el-form>
-    <template #footer>
+  </div>
-      <div class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="dialogFormVisible = false"> 确认 </el-button>
-      </div>
-    </template>
-  </Dialog>
 </template>
 
 <script setup>
 import { reactive, ref } from 'vue'
 
-const dialogFormVisible = ref(false)
-const formLabelWidth = '140px'
-
 const form = reactive({
-  fontType: 'SimSun',
+  fontFamily: 'SimSun',
   fontSize: '14',
   fontColor: '#000000'
 })
 
-const open = (item) => {
+const fontStyleChange = () => {
-  dialogFormVisible.value = true
+  emit('textFormSuccess', form)
 }
 
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+const emit = defineEmits(['textFormSuccess'])
 </script>
 
 <style lang="scss">
 .text-form-dialog {
-  .el-dialog__header {
+  background-color: #fff;
-    border-bottom: none;
+  position: absolute;
-  }
+  top: 76px;
-
+  left: 30%;
-  .el-dialog__footer {
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
-    border-top: none !important;
+  padding: 18px 20px 0 20px;
-  }
+  border-radius: 6px;
 }
 </style>

src/views/mapPage/realTimeMap/editMap.vue

@@ -1,19 +1,19 @@
 <template>
-  <div>
+  <div class="top-tool">
     <div class="top-tool-list">
-      <div v-for="item in state.topToolList" :key="item.id" class="top-tool-item">
+      <div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
         <el-popover
           placement="bottom"
           :width="80"
           trigger="click"
-          v-if="item.id === 5 || item.id === 6"
+          v-if="item.switchType === 'move' || item.switchType === 'revolve'"
-          :disabled="currentItemIndex === -1"
+          :disabled="!currentItemIndex"
         >
           <template #reference>
             <div
               class="tool-item"
               :class="
-                toolbarTypeIndex === item.id
+                toolbarSwitchType === item.switchType
                   ? 'tool-active'
                   : item.isActive
                     ? 'right-tool-active'
@@ -26,7 +26,7 @@
             </div>
           </template>
           <!-- 位置 -->
-          <el-form :model="state.moveForm" v-if="item.id === 5">
+          <el-form :model="state.moveForm" v-if="item.switchType === 'move'">
             <el-form-item label="X">
               <el-input v-model="state.moveForm.x" placeholder="请输入" />
             </el-form-item>
@@ -38,7 +38,7 @@
             </div>
           </el-form>
           <!-- 旋转 -->
-          <el-form :model="state.rotationForm" v-if="item.id === 6">
+          <el-form :model="state.rotationForm" v-if="item.switchType === 'revolve'">
             <el-form-item label="角度">
               <el-input v-model="state.rotationForm.angle" placeholder="请输入" />
             </el-form-item>
@@ -47,7 +47,7 @@
             </div>
           </el-form>
           <!-- 字体 -->
-          <el-form :model="state.rotationForm" v-if="item.id === 13">
+          <el-form :model="state.rotationForm" v-if="item.switchType === 'text'">
             <el-form-item label="角度">
               <el-input v-model="state.rotationForm.angle" placeholder="请输入" />
             </el-form-item>
@@ -61,23 +61,38 @@
           v-else
           class="tool-item"
           :class="
-            toolbarTypeIndex === item.id ? 'tool-active' : item.isActive ? 'right-tool-active' : ''
+            toolbarSwitchType === item.switchType
+              ? 'tool-active'
+              : item.isActive
+                ? 'right-tool-active'
+                : ''
           "
           @click="toolbarClick(item)"
         >
           <Icon :icon="item.icon" :size="24" />
           <div class="name"> {{ item.name }} </div>
         </div>
-        <div class="line" v-if="item.id === 3 || item.id === 10 || item.id === 17"></div>
+        <div
+          class="line"
+          v-if="
+            item.switchType === 'saveAs' ||
+            item.switchType === 'delete' ||
+            item.switchType === 'ranging'
+          "
+        ></div>
       </div>
     </div>
     <div class="right-tool-list" v-if="state.isShowToolbar">
       <div
         v-for="item in state.rightToolList"
-        :key="item.id"
+        :key="item.switchType"
         class="tool-item"
         :class="
-          toolbarTypeIndex === item.id ? 'tool-active' : item.isActive ? 'right-tool-active' : ''
+          toolbarSwitchType === item.switchType
+            ? 'tool-active'
+            : item.isActive
+              ? 'right-tool-active'
+              : ''
         "
         @click="toolbarClick(item)"
       >
@@ -86,14 +101,21 @@
       </div>
     </div>
   </div>
+
+  <!-- @mousewheel.prevent="rollImg" -->
   <div
     class="map-box"
     ref="imgWrap"
-    @mousewheel.prevent="rollImg"
     style="overflow: hidden"
     :style="{ cursor: state.cursorStyle }"
   >
-    <div class="map-box-inner" ref="image" @mousedown.prevent="moveImg">
+    <div
+      class="map-box-inner"
+      ref="image"
+      @mousedown.stop="startDrawSelection"
+      @mousemove.stop="updateDrawSelection"
+      @mouseup.stop="endDrawSelection"
+    >
       <img :src="imgBgObj.imgUrl" class="map-box-img" id="mapBg" />
       <div
         class="map-box-inner-dot"
@@ -119,7 +141,6 @@
           :resizable="item.resizable"
           :rotatable="item.rotatable"
           :lock-aspect-ratio="item.lockAspectRatio"
-          :handles="['tl', 'tr', 'bl', 'br', 'rot']"
           style="border: none"
         >
           <div
@@ -138,10 +159,51 @@
               v-if="item.labelType === 'node'"
               style="width: 100%; height: 100%; background-color: #000; border-radius: 50%"
             ></div>
+            <div
+              v-if="item.labelType === 'text'"
+              :style="{
+                fontSize: item.fontSize + 'px',
+                fontFamily: item.fontFamily,
+                color: item.fontColor
+              }"
+            >
+              {{ item.text }}
+            </div>
           </div>
         </VueDragResizeRotate>
         <!-- 文档 https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md#resizable -->
       </div>
+
+      <!-- 绘制框选区域 -->
+      <div
+        v-if="state.drawSelectionArea"
+        :style="{
+          position: 'absolute',
+          left: `${state.drawSelectionAreaBox.x}px`,
+          top: `${state.drawSelectionAreaBox.y}px`,
+          width: `${state.drawSelectionAreaBox.width}px`,
+          height: `${state.drawSelectionAreaBox.height}px`,
+          border: '1px solid blue',
+          backgroundColor: 'rgba(0, 0, 255, 0.1)',
+          zIndex: 99999
+        }"
+      ></div>
+      <!-- 文字输入区域 -->
+      <input
+        v-if="state.showInputBox"
+        ref="inputBoxRef"
+        v-model="state.inputBoxValue"
+        @keyup.enter="handleInputEnd"
+        @blur="handleInputEnd"
+        :style="{
+          fontSize: state.inputBoxStyle.fontSize + 'px',
+          fontFamily: state.inputBoxStyle.fontFamily,
+          color: state.inputBoxStyle.fontColor,
+          left: state.inputBoxStyle.x + 'px',
+          top: state.inputBoxStyle.y + 'px'
+        }"
+        class="input-box-class"
+      />
     </div>
   </div>
   <!-- 节点编辑 -->
@@ -151,19 +213,32 @@
     @submitNodeSuccess="submitNodeSuccess"
   />
   <!-- 文字输入弹窗 -->
-  <textFormToolDialog ref="textFormToolDialogRef" />
+  <textFormToolDialog
+    ref="textFormToolDialogRef"
+    v-if="state.textFormToolShow"
+    @textFormSuccess="textFormSuccess"
+  />
+  <!-- 图层选择 -->
+  <layerSelectionToolDialog v-if="state.isShowLayer" ref="layerSelectionToolDialogRef" />
+  <!-- 设备弹窗选择 -->
+  <equipmentToolDialog ref="equipmentToolDialogRef" />
 </template>
 
 <script setup>
 import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
 import editNodeProperties from './components-tool/editNodeProperties.vue'
 import textFormToolDialog from './components-tool/textFormToolDialog.vue'
+import equipmentToolDialog from './components-tool/equipmentToolDialog.vue'
+import layerSelectionToolDialog from './components-tool/layerSelectionToolDialog.vue'
+
 import * as MapApi from '@/api/map/map'
 import cursorCollection from './cursorCollection'
 
 defineOptions({ name: 'editMapPageRealTimeMap' })
 
+const equipmentToolDialogRef = ref() //设备弹窗
 const textFormToolDialogRef = ref() //文字输入弹窗
+const inputBoxRef = ref() //文字输入框
 
 const message = useMessage() // 消息弹窗
 const formLoading = ref(false)
@@ -241,10 +316,10 @@ const editNodePropertiesRef = ref()
 const activatedHandle = (item, index) => {
   // console.log('选中', item, index)
   currentItemIndex.value = index
-  if (item.labelType === 'node') {
+
-    if (toolbarTypeIndex.value === 23) {
+  //节点编辑
-      editNodePropertiesRef.value.open(item)
+  if (toolbarSwitchType.value === 'editNode' && item.labelType === 'node') {
-    }
+    editNodePropertiesRef.value.open(item)
   }
 }
 //非选中
@@ -290,7 +365,7 @@ const backNextStep = () => {
 
 //地图点击
 const mapClick = (e) => {
-  if (toolbarTypeIndex.value === 22) {
+  if (toolbarSwitchType.value === 'drawNodes') {
     //绘制节点
     imgList.value.push({
       x: e.offsetX,
@@ -308,7 +383,59 @@ const mapClick = (e) => {
     currentIndex.value++
     allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
   }
+  //文字输入
+  if (toolbarSwitchType.value === 'text') {
+    state.showInputBox = true
+    state.inputBoxStyle = {
+      fontSize: state.textForm.fontSize,
+      fontFamily: state.textForm.fontFamily,
+      fontColor: state.textForm.fontColor,
+      x: e.offsetX,
+      y: e.offsetY
+    }
+
+    // 聚焦输入框
+    setTimeout(() => {
+      inputBoxRef.value.focus()
+    }, 0)
+  }
 }
+//输入文字样式改变
+const textFormSuccess = (form) => {
+  state.textForm = JSON.parse(JSON.stringify(form))
+  state.inputBoxStyle = {
+    fontSize: `${form.fontSize}`,
+    fontFamily: `${form.fontFamily}`,
+    fontColor: `${form.fontColor}`
+  }
+}
+//输入结束
+const handleInputEnd = () => {
+  if (state.inputBoxValue) {
+    state.showInputBox = false
+    imgList.value.push({
+      labelType: 'text', //类型  节点
+      mapId: '', //地图的id
+      x: state.inputBoxStyle.x, //x
+      y: state.inputBoxStyle.y, //y
+      h: '', //h
+      w: '', //w
+      angle: 0, //旋转角度
+      draggable: true, //是否可以拖动
+      resizable: false, //是否可以调整大小
+      rotatable: false, //是否可以旋转
+      lockAspectRatio: true, //是否锁定比例
+      img: '', //图片
+      text: state.inputBoxValue, //文字内容
+      fontColor: state.inputBoxStyle.fontColor, //文字颜色
+      fontFamily: state.inputBoxStyle.fontFamily, //字体类型
+      fontSize: state.inputBoxStyle.fontSize
+    })
+    addEditHistory()
+    state.inputBoxValue = ''
+  }
+}
+
 //保存地图
 const saveMap = async () => {
   //节点的保存
@@ -346,131 +473,137 @@ const submitNodeSuccess = (item) => {
 }
 
 //工具栏点击
-const toolbarTypeIndex = ref(0)
+const toolbarSwitchType = ref('')
 const state = reactive({
   topToolList: [
     {
-      id: 1,
+      switchType: 'open',
       name: '打开',
       icon: 'ep:folder-add',
       isActive: false
     },
     {
-      id: 2,
+      switchType: 'save',
       name: '保存',
       icon: 'ep:folder-checked',
       isActive: false
     },
     {
-      id: 3,
+      switchType: 'saveAs',
       name: '另存为',
       icon: 'ep:folder-opened',
       isActive: false
     },
     {
-      id: 4,
+      switchType: 'choose',
       name: '选择',
       icon: 'ep:position',
       isActive: false
     },
     {
-      id: 5,
+      switchType: 'move',
       name: '移动',
       icon: 'ep:rank',
       isActive: false
     },
     {
-      id: 6,
+      switchType: 'revolve',
       name: '旋转',
       icon: 'ep:folder-add',
       isActive: false
     },
     {
-      id: 7,
+      switchType: 'copy',
       name: '复制',
       icon: 'ep:document',
       isActive: false
     },
     {
-      id: 8,
+      switchType: 'paste',
       name: '粘贴',
       icon: 'ep:copy-document',
       isActive: false
     },
     {
-      id: 9,
+      switchType: 'delete',
       name: '删除',
       icon: 'ep:delete',
       isActive: false
     },
     {
-      id: 10,
+      switchType: 'tools',
       name: '工具',
       icon: 'ep:briefcase',
       isActive: false
     },
     {
-      id: 11,
+      switchType: 'lineLibrary',
       name: '线库',
       icon: 'ep:folder-add',
       isActive: false
     },
     {
-      id: 12,
+      switchType: 'region',
       name: '区域',
       icon: 'ep:folder-add',
       isActive: false
     },
     {
-      id: 13,
+      switchType: 'text',
       name: '文字',
       icon: 'ep:folder-add',
       isActive: false
     },
     {
-      id: 14,
+      switchType: 'equipment',
+      name: '设备',
+      icon: 'ep:folder-add',
+      isActive: false
+    },
+    {
+      switchType: 'ranging',
       name: '测距',
       icon: 'ep:folder-add',
       isActive: false
     },
     {
-      id: 15,
+      switchType: 'layer',
       name: '图层',
       icon: 'ep:folder-add',
       isActive: false
     },
     {
-      id: 16,
+      switchType: 'marker',
       name: '标记',
       icon: 'ep:folder-add',
       isActive: false
     },
     {
-      id: 17,
+      switchType: 'grid',
       name: '网格',
       icon: 'ep:folder-add',
       isActive: false
     },
     {
-      id: 18,
+      switchType: 'larger',
       name: '放大',
       icon: 'ep:zoom-in',
       isActive: false
     },
     {
-      id: 19,
+      switchType: 'smaller',
       name: '缩小',
       icon: 'ep:zoom-out',
       isActive: false
     },
     {
-      id: 20,
+      switchType: 'withdraw',
       name: '撤回',
       icon: 'ep:top-left',
       isActive: false
     },
     {
-      id: 21,
+      switchType: 'next',
       name: '重做',
       icon: 'ep:top-right',
       isActive: false
@@ -478,25 +611,25 @@ const state = reactive({
   ],
   rightToolList: [
     {
-      id: 22,
+      switchType: 'drawNodes',
       name: '绘制节点',
       icon: 'ep:circle-plus-filled',
       isActive: false
     },
     {
-      id: 23,
+      switchType: 'editNode',
       name: '编辑节点',
       icon: 'ep:circle-plus-filled',
       isActive: false
     },
     {
-      id: 24,
+      switchType: 'drawRoute',
       name: '绘制路线',
       icon: 'ep:semi-select',
       isActive: false
     },
     {
-      id: 25,
+      switchType: 'editRoute',
       name: '编辑路线',
       icon: 'ep:semi-select',
       isActive: false
@@ -512,32 +645,59 @@ const state = reactive({
     angle: ''
   }, //旋转的表单
   copyMapItem: '', //复制的值
-  cursorStyle: 'auto'
+  cursorStyle: 'auto',
+  drawSelectionArea: false, //绘制框选区域
+  drawSelectionAreaBox: { x: 0, y: 0, width: 0, height: 0 }, //绘制区域的位置，长宽
+  drawSelectionAreaStartPos: { x: 0, y: 0 }, //开始绘制的点位
+  drawSelectionAreaSelectedPoints: [], //绘制选中的list
+  textForm: {
+    fontFamily: 'SimSun',
+    fontSize: '14',
+    fontColor: '#000000'
+  }, //默认宋体，14，#000000
+  textFormToolShow: false, //文字表单显示隐藏
+  showInputBox: false, //输入框显示隐藏
+  inputBoxStyle: {}, //输入框的样式
+  inputBoxValue: '', //输入的值
+  isShowLayer: false //图层显示
 })
 const toolbarClick = (item) => {
-  let type = item.id
+  let type = item.switchType
-  if (currentItemIndex.value === -1 && (type === 5 || type === 6 || type === 7 || type === 9)) {
+  if (
+    currentItemIndex.value &&
+    (type === 'move' || type === 'revolve' || type === 'copy' || type === 'delete')
+  ) {
     message.warning('请先选择要操作的对象')
     return
   }
-  if (type === 8 && !state.copyMapItem) {
+  //粘贴
+  if (type === 'paste' && !state.copyMapItem) {
     message.warning('请先复制对象')
     return
   }
 
-  if ((type === 10 || type === 13 || type === 17) && toolbarTypeIndex.value === type) {
+  if (
-    toolbarTypeIndex.value = 0
+    (type === 'tools' || type === 'text' || type === 'layer' || type === 'grid') &&
+    toolbarSwitchType.value === type
+  ) {
+    toolbarSwitchType.value = ''
   } else {
-    toolbarTypeIndex.value = type
+    toolbarSwitchType.value = type
+  }
+
+  if (toolbarSwitchType.value !== 'text') {
+    state.cursorStyle = `auto`
   }
 
   switch (type) {
-    case 1:
+    case 'open':
+      // 打开
       break
-    case 2:
+    case 'save':
+      //保存
       saveMap()
       break
-    case 3:
+    case 'saveAs':
       //另存为 存为json文件 无法直接访问用户的文件系统 不能选择存在那个文件夹里面
       const jsonString = JSON.stringify(allHistoryList.value[currentIndex.value], null, 2)
       const blob = new Blob([jsonString], { type: 'application/json' })
@@ -553,59 +713,79 @@ const toolbarClick = (item) => {
 
       message.success('下载成功')
       break
-    case 4:
+    case 'choose':
+      //选择
       break
-    case 5:
+    case 'move':
+      //移动
       break
-    case 6:
+    case 'revolve':
       break
-    case 7:
+    case 'copy':
       //复制
       state.copyMapItem = allHistoryList.value[currentIndex.value][currentItemIndex.value]
       break
-    case 8:
+    case 'paste':
       //粘贴
-      let item = JSON.parse(JSON.stringify(state.copyMapItem))
+      let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
-      item.x = item.x + 50
+      copyObj.x = copyObj.x + 50
-      item.y = item.y + 50
+      copyObj.y = copyObj.y + 50
-      imgList.value.push(item)
+      imgList.value.push(copyObj)
       addEditHistory()
       break
-    case 9:
+    case 'delete':
       //删除
       imgList.value.splice(currentItemIndex.value, 1)
       addEditHistory()
       break
-    case 10:
+    case 'tools':
       //工具
-      if (toolbarTypeIndex.value === 10) {
+      if (toolbarSwitchType.value === 'tools') {
         state.isShowToolbar = true
+        item.isActive = true
       } else {
         state.isShowToolbar = false
+        item.isActive = false
       }
       break
-    case 11:
+    case 'lineLibrary':
+      // 线库
       break
-    case 12:
+    case 'region':
+      // 区域
       break
-    case 13:
+    case 'text':
       //文字
-      textFormToolDialogRef.value.open()
+      if (toolbarSwitchType.value === 'text') {
-      // if (toolbarTypeIndex.value === 13) {
+        state.textFormToolShow = true
-      //   state.cursorStyle = `url('${cursorCollection.input}'),auto`
+        state.cursorStyle = `url('${cursorCollection.input}'),auto`
-      // } else {
+      } else {
-      //   state.cursorStyle = `auto`
+        state.textFormToolShow = false
-      // }
+        state.cursorStyle = `auto`
+        state.textFormToolShow = false
+        state.showInputBox = false
+        state.inputBoxValue = ''
+      }
       break
-    case 14:
+    case 'ranging':
+      // 测距
       break
-    case 15:
+    case 'layer':
+      //图层
+      if (toolbarSwitchType.value === 'layer') {
+        state.isShowLayer = true
+        item.isActive = true
+      } else {
+        state.isShowLayer = false
+        item.isActive = false
+      }
       break
-    case 16:
+    case 'marker':
+      // 标记
       break
-    case 17:
+    case 'grid':
       //网格
-      if (toolbarTypeIndex.value === 17) {
+      if (toolbarSwitchType.value === 'grid') {
         state.isShowGrid = true
         item.isActive = true
       } else {
@@ -613,26 +793,35 @@ const toolbarClick = (item) => {
         item.isActive = false
       }
       break
-    case 18:
+    case 'larger':
+      //放大
       break
-    case 19:
+    case 'smaller':
+      //缩小
       break
-    case 20:
+    case 'withdraw':
       //上一步
       backPreviousStep()
       break
-    case 21:
+    case 'next':
       //下一步
       backNextStep()
       break
-    case 22:
+    case 'drawNodes':
-      drawNodes()
+      //绘制节点
       break
-    case 23:
+    case 'editNode':
+      // 编辑节点
       break
-    case 24:
+    case 'drawRoute':
+      //绘制路线
       break
-    case 25:
+    case 'editRoute':
+      // 编辑路线
+      break
+    case 'equipment':
+      // 设备
+      equipmentToolDialogRef.value.open()
       break
   }
 }
@@ -647,6 +836,53 @@ const rotationFormSubmit = () => {
   allHistoryList.value[currentIndex.value][currentItemIndex.value].angle = state.rotationForm.angle
 }
 
+//开始框选绘制
+const startDrawSelection = (event) => {
+  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
+  state.drawSelectionArea = true
+  state.drawSelectionAreaStartPos = { x: event.offsetX, y: event.offsetY }
+  state.drawSelectionAreaBox = { x: event.offsetX, y: event.offsetY, width: 0, height: 0 }
+}
+
+const updateDrawSelection = (event) => {
+  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
+  if (state.drawSelectionArea) {
+    state.drawSelectionAreaBox.width = event.offsetX - state.drawSelectionAreaStartPos.x
+    state.drawSelectionAreaBox.height = event.offsetY - state.drawSelectionAreaStartPos.y
+  }
+}
+//结束框选绘制
+const endDrawSelection = () => {
+  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
+  let points = allHistoryList.value[currentIndex.value]
+  state.drawSelectionArea = false
+  state.drawSelectionAreaSelectedPoints = points.filter((point) => {
+    return (
+      point.x >=
+        Math.min(
+          state.drawSelectionAreaStartPos.x,
+          state.drawSelectionAreaStartPos.x + state.drawSelectionAreaBox.width
+        ) &&
+      point.x <=
+        Math.max(
+          state.drawSelectionAreaStartPos.x,
+          state.drawSelectionAreaStartPos.x + state.drawSelectionAreaBox.width
+        ) &&
+      point.y >=
+        Math.min(
+          state.drawSelectionAreaStartPos.y,
+          state.drawSelectionAreaStartPos.y + state.drawSelectionAreaBox.height
+        ) &&
+      point.y <=
+        Math.max(
+          state.drawSelectionAreaStartPos.y,
+          state.drawSelectionAreaStartPos.y + state.drawSelectionAreaBox.height
+        )
+    )
+  })
+  console.log(state.drawSelectionAreaSelectedPoints, '选中的')
+}
+
 onMounted(() => {
   imgList.value = [
     {
@@ -718,34 +954,66 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
-.top-tool-list {
+.top-tool {
-  display: flex;
+  .top-tool-list {
-  align-items: center;
-  text-align: center;
-  background-color: #fff;
-  margin-top: -20px;
-  margin-left: -20px;
-  margin-right: -20px;
-  padding: 0 14px;
-  margin-bottom: 20px;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
-  height: 70px;
-
-  .top-tool-item {
     display: flex;
     align-items: center;
+    text-align: center;
+    background-color: #fff;
+    margin-top: -15px;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding: 0 14px;
+    margin-bottom: 20px;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
+    height: 70px;
+
+    .top-tool-item {
+      display: flex;
+      align-items: center;
+
+      .tool-item {
+        cursor: pointer;
+        width: 52px;
+        height: 70px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .name {
+          font-family:
+            PingFangSC,
+            PingFang SC;
+          font-weight: 400;
+          font-size: 14px;
+          color: #0d162a;
+          line-height: 20px;
+          text-align: center;
+          font-style: normal;
+        }
+      }
+      .line {
+        margin: 0 14px;
+        width: 1px;
+        height: 47px;
+        border: 1px solid #cccccc;
+      }
+    }
+  }
+
+  .right-tool-list {
+    position: absolute;
+    right: 0;
+    top: 94px;
+    background-color: #fff;
+    z-index: 999;
+    text-align: center;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
 
     .tool-item {
       cursor: pointer;
-      // cursor: url('https://api.znkjfw.com/admin-api/infra/file/4/get/输入_png_179_1738982726561.png'),
+      padding: 10px;
-      //   auto;
-      width: 52px;
-      height: 70px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
       .name {
         font-family:
           PingFangSC,
@@ -758,46 +1026,22 @@ onMounted(() => {
         font-style: normal;
       }
     }
-    .line {
+  }
-      margin: 0 14px;
+
-      width: 1px;
+  .tool-active {
-      height: 47px;
+    background: #ebf1ff;
-      border: 1px solid #cccccc;
+    border-bottom: 2px solid #1677ff;
-    }
+  }
+
+  .right-tool-active {
+    background: #ebf1ff;
   }
 }
 
-.right-tool-list {
+.input-box-class {
   position: absolute;
-  right: 0;
+  border: 1px solid #00329f;
-  top: 94px;
+  padding: 4px;
-  background-color: #fff;
+  outline: none;
-  z-index: 999;
-  text-align: center;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
-
-  .tool-item {
-    cursor: pointer;
-    padding: 10px;
-    .name {
-      font-family:
-        PingFangSC,
-        PingFang SC;
-      font-weight: 400;
-      font-size: 14px;
-      color: #0d162a;
-      line-height: 20px;
-      text-align: center;
-      font-style: normal;
-    }
-  }
-}
-
-.tool-active {
-  background: #ebf1ff;
-  border-bottom: 2px solid #1677ff;
-}
-.right-tool-active {
-  background: #ebf1ff;
 }
 </style>

src/views/mapPage/taskManagement/createTask.vue

@@ -705,7 +705,7 @@ const formData = ref({
   skuInfo: undefined, //物料信息
   skuBatch: undefined, //	物料批次号
   skuNumber: undefined, // 物料数量
-  priority: undefined, //	优先级
+  priority: 50, //	优先级
   otherMsg: undefined, //	其他信息
   doCycle: 0, //循环(0:不循环、1：循环)
   doMoveAll: 0, //是否搬空所选线库/区域(0:不搬空、1：搬空)
@@ -740,7 +740,7 @@ const resetFormData = () => {
     skuInfo: undefined, //物料信息
     skuBatch: undefined, //	物料批次号
     skuNumber: undefined, // 物料数量
-    priority: undefined, //	优先级
+    priority: 50, //	优先级
     otherMsg: undefined, //	其他信息
     doCycle: 0, //循环(0:不循环、1：循环)
     doMoveAll: 0, //是否搬空所选线库/区域(0:不搬空、1：搬空)