编辑地图 网格大小 路线宽度都做成用户自己设置

src/layout/components/ToolHeader.vue

@@ -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:61px"
+        style="height:51px"
       >
         {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:60px;display: flex;
+              style="transition: all var(--transition-time-02);height:50px;display: flex;
         align-items: center;"
             ></Logo>
           ) : undefined}

src/styles/var.css

@@ -34,7 +34,7 @@
   --top-header-hover-color: #215bd8;
 
   /* --top-tool-height: var(--logo-height); */
-  --top-tool-height: 60px;
+  --top-tool-height: 50px;
 
   --top-tool-p-x: 0;
 

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

@@ -77,7 +77,7 @@ const emit = defineEmits(['textFormSuccess'])
 .text-form-dialog {
   background-color: #fff;
   position: absolute;
-  top: 76px;
+  top: 62px;
   left: 30%;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
   padding: 18px 20px 0 20px;

src/views/mapPage/realTimeMap/components/indexPage.vue

@@ -1033,7 +1033,7 @@ onBeforeUnmount(() => {
   }
 
   .is-full-screen {
-    height: calc(100vh - 8.125rem) !important;
+    height: calc(100vh - 120px);
     overflow: auto;
   }
 }

src/views/mapPage/realTimeMap/editMap.vue

@@ -22,7 +22,7 @@
                 "
                 @click="toolbarClick(item)"
               >
-                <Icon :icon="item.icon" :size="24" />
+                <Icon :icon="item.icon" :size="20" />
                 <div class="name"> {{ item.name }} </div>
               </div>
             </template>
@@ -75,6 +75,40 @@
               </div>
             </el-form>
           </el-popover>
+          <el-popover
+            placement="bottom"
+            :width="170"
+            trigger="click"
+            v-else-if="item.switchType === 'grid'"
+          >
+            <template #reference>
+              <div
+                class="tool-item"
+                :class="
+                  toolbarSwitchType === item.switchType
+                    ? 'tool-active'
+                    : item.isActive
+                      ? 'right-tool-active'
+                      : ''
+                "
+                @click="toolbarClick(item)"
+              >
+                <Icon :icon="item.icon" :size="20" />
+                <div class="name"> {{ item.name }} </div>
+              </div>
+            </template>
+            <!-- 网格  -->
+            <el-form :model="state.gridForm" v-if="item.switchType === 'grid'" class="mt-2">
+              <el-form-item label="网格">
+                <el-select v-model="state.gridForm.gridNum" placeholder="选择">
+                  <el-option label="0.5米" value="10px" />
+                  <el-option label="1米" value="20px" />
+                  <el-option label="2米" value="40px" />
+                  <el-option label="3米" value="60px" />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </el-popover>
           <!-- 线库 -->
           <el-popover
             placement="bottom"
@@ -96,7 +130,7 @@
                 "
                 @click="toolbarClick(item)"
               >
-                <Icon :icon="item.icon" :size="24" />
+                <Icon :icon="item.icon" :size="20" />
                 <div class="name"> {{ item.name }} </div>
               </div>
             </template>
@@ -136,7 +170,7 @@
                 "
                 @click="toolbarClick(item)"
               >
-                <Icon :icon="item.icon" :size="24" />
+                <Icon :icon="item.icon" :size="20" />
                 <div class="name"> {{ item.name }} </div>
               </div>
             </template>
@@ -175,7 +209,7 @@
                 "
                 @click="toolbarClick(item)"
               >
-                <Icon :icon="item.icon" :size="24" />
+                <Icon :icon="item.icon" :size="20" />
                 <div class="name"> {{ item.name }} </div>
               </div>
             </template>
@@ -230,7 +264,7 @@
             "
             @click="toolbarClick(item)"
           >
-            <Icon :icon="item.icon" :size="24" />
+            <Icon :icon="item.icon" :size="20" />
             <div class="name"> {{ item.name }} </div>
           </div>
           <!-- 分隔线 -->
@@ -278,9 +312,39 @@
           "
           @click="toolbarClick(item)"
         >
-          <Icon :icon="item.icon" :size="24" />
+          <el-popover
+            placement="bottom"
+            :width="170"
+            trigger="click"
+            v-if="item.switchType === 'routeWidth'"
+          >
+            <template #reference>
+              <div class="tool-item" @click="toolbarClick(item)">
+                <Icon :icon="item.icon" :size="20" />
                 <div class="name"> {{ item.name }} </div>
               </div>
+            </template>
+            <!-- 网格  -->
+            <el-form
+              :model="state.routeWidthForm"
+              v-if="item.switchType === 'routeWidth'"
+              class="mt-2"
+            >
+              <el-form-item label="路线宽度">
+                <el-select v-model="state.routeWidthForm.routeWidth" placeholder="选择">
+                  <el-option label="2" :value="2" />
+                  <el-option label="3" :value="3" />
+                  <el-option label="4" :value="4" />
+                  <el-option label="5" :value="5" />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </el-popover>
+          <div v-else>
+            <Icon :icon="item.icon" :size="20" />
+            <div class="name"> {{ item.name }} </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -308,11 +372,7 @@
           ref="mapBackgroundRef"
           class="map-box-inner"
           @click="mapClick"
-          :class="state.isShowGrid ? 'grid-show' : ''"
+          :style="gradientBackground"
-          :style="{
-            width: imgBgObj.width + 'px',
-            height: imgBgObj.height + 'px'
-          }"
           v-if="interfaceRefreshed"
         >
           <VueDragResizeRotate
@@ -505,7 +565,7 @@
                 :x2="Number(state.currentDrawX)"
                 :y2="Number(state.currentDrawY)"
                 stroke="#2d72d9"
-                stroke-width="5"
+                :stroke-width="state.routeWidthForm.routeWidth"
               />
               <template v-if="state.mapRouteList.length > 0">
                 <template v-for="(curve, index) in state.mapRouteList" :key="index">
@@ -517,7 +577,7 @@
                       :x2="Number(curve.endPointX)"
                       :y2="Number(curve.endPointY)"
                       :stroke="curve.isSelected ? '#f48924' : '#2d72d9'"
-                      stroke-width="5"
+                      :stroke-width="state.routeWidthForm.routeWidth"
                       @click="handleChooseRoute(curve, index)"
                     />
                     <text
@@ -539,7 +599,7 @@
                       id="curvePath"
                       :d="getCurvePath(curve)"
                       :stroke="curve.isSelected ? '#f48924' : '#2d72d9'"
-                      stroke-width="5"
+                      :stroke-width="state.routeWidthForm.routeWidth"
                       fill="none"
                       @click="handleChooseRoute(curve, index)"
                     />
@@ -875,7 +935,6 @@ const getLocationNumberStyle = (item, index) => {
     top: Number(item.locationDeepPx) / 2 - 2 + 'px'
   }
 }
-
 //库位的样式
 const binLocationStyle = (item, index) => {
   let laneId
@@ -1382,6 +1441,12 @@ const state = reactive({
       name: '节点序号',
       icon: 'ep:chat-dot-square',
       isActive: false
+    },
+    {
+      switchType: 'routeWidth',
+      name: '路线宽度',
+      icon: 'ep:semi-select',
+      isActive: false
     }
   ],
   isShowToolbar: false, //工具栏展示隐藏
@@ -1445,6 +1510,27 @@ const state = reactive({
   actualLocation: {
     x: '',
     y: ''
+  },
+  gridForm: {
+    gridNum: 20 + 'px'
+  },
+  routeWidthForm: {
+    routeWidth: 3
+  }
+})
+//网格的样式
+const gradientBackground = computed(() => {
+  return {
+    backgroundImage: `
+      linear-gradient(to right,  rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+      linear-gradient(to bottom,  rgba(0, 0, 0, 0.1) 1px, transparent 1px)
+    `,
+    backgroundSize: `
+      ${state.gridForm.gridNum} ${state.gridForm.gridNum},
+     ${state.gridForm.gridNum} ${state.gridForm.gridNum}
+    `,
+    width: `${imgBgObj.width}px`,
+    height: `${imgBgObj.height}px`
   }
 })
 
@@ -1861,9 +1947,7 @@ const markFormSubmit = async () => {
   if (res) {
     //点
     let point = JSON.parse(res)
-    console.log(point)
     let pointPx = convertActualToBrowser(point.x, point.y)
-    console.log(pointPx)
 
     if (state.currentItemIndex !== -1) {
       state.allMapPointInfo[state.currentItemIndex].locationYaw = point.yaw
@@ -3260,7 +3344,7 @@ onUnmounted(() => {
     width: 100%;
     overflow: auto;
     // height: 85vh;
-    height: calc(100vh - 8.75rem);
+    height: calc(100vh - 120px);
 
     .map-bg {
       background-size: contain;
@@ -3287,7 +3371,7 @@ onUnmounted(() => {
       text-align: center;
       background-color: #fff;
       padding: 0 0.75rem;
-      height: 4.375rem;
+      height: 60px;
       box-shadow: rgba(0, 0, 0, 0.06) 0rem 0.125rem 0.1875rem;
 
       .top-tool-item {
@@ -3296,8 +3380,8 @@ onUnmounted(() => {
 
         .tool-item {
           cursor: pointer;
-          width: 3.125rem;
+          width: 44px;
-          height: 4.375rem;
+          height: 60px;
           display: flex;
           flex-direction: column;
           align-items: center;
@@ -3309,7 +3393,7 @@ onUnmounted(() => {
               PingFangSC,
               PingFang SC;
             font-weight: 400;
-            font-size: 0.875rem;
+            font-size: 13px;
             color: #0d162a;
             line-height: 1.25rem;
             text-align: center;
@@ -3318,7 +3402,7 @@ onUnmounted(() => {
           }
         }
         .line {
-          margin: 0 0.75rem;
+          margin: 0 4px;
           width: 0.0625rem;
           height: 2.9375rem;
           border: 0.0625rem solid #cccccc;
@@ -3329,7 +3413,7 @@ onUnmounted(() => {
     .right-tool-list {
       position: absolute;
       right: 0;
-      top: 7.125rem;
+      top: 80px;
       background-color: #fff;
       z-index: 999;
       text-align: center;
@@ -3337,15 +3421,14 @@ onUnmounted(() => {
 
       .tool-item {
         cursor: pointer;
-        padding: 0.625rem;
+        padding: 8px;
         .name {
           font-family:
             PingFangSC,
             PingFang SC;
           font-weight: 400;
-          font-size: 0.875rem;
+          font-size: 13px;
           color: #0d162a;
-          line-height: 1.25rem;
           text-align: center;
           font-style: normal;
         }
@@ -3365,29 +3448,6 @@ onUnmounted(() => {
     margin-left: 0.25rem;
   }
 
-  .grid-show {
-    // background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) .0625rem, transparent .0625rem),
-    //   linear-gradient(rgba(0, 0, 0, 0.1) .0625rem, transparent .0625rem);
-    // background-size:
-    //   1.25rem 1.25rem,
-    //   1.25rem 1.25rem;
-
-    background-image: repeating-linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0.1),
-        rgba(0, 0, 0, 0.1) 0.0625rem,
-        transparent 0.0625rem,
-        transparent 3.125rem
-      ),
-      repeating-linear-gradient(
-        to bottom,
-        rgba(0, 0, 0, 0.1),
-        rgba(0, 0, 0, 0.1) 0.0625rem,
-        transparent 0.0625rem,
-        transparent 3.125rem
-      );
-  }
-
   .svg-div {
     z-index: 99999;