编辑地图 搜索节点 节点滚动到中间

.env.local

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

src/views/mapPage/realTimeMap/editMap.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="edit-map-page" @wheel="handleWheel">
     <div class="top-tool">
+      <div class="top-tool-list-container">
         <div class="top-tool-list">
           <div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
             <el-popover
@@ -55,7 +56,11 @@
                 </div>
               </el-form>
               <!-- 旋转 -->
-            <el-form :model="state.rotationForm" v-if="item.switchType === 'revolve'" class="mt-2">
+              <el-form
+                :model="state.rotationForm"
+                v-if="item.switchType === 'revolve'"
+                class="mt-2"
+              >
                 <el-form-item label="角度">
                   <el-input-number
                     v-model="state.rotationForm.angle"
@@ -298,6 +303,32 @@
             >
           </div>
         </div>
+        <div class="search-select">
+          <img
+            class="search-icon"
+            v-if="!state.isSearchSelectVisible"
+            @click="toggleSelect"
+            src="@/assets/search.png"
+          />
+          <el-select
+            class="!w-160px"
+            v-else
+            v-model="state.searchSelectedOption"
+            @blur="toggleSelect"
+            placeholder="请选择"
+            @change="searchSelectChange"
+            filterable
+          >
+            <el-option
+              v-for="item in state.haveSortNumMapPointInfo"
+              :key="item.sortNum"
+              :label="item.sortNum"
+              :value="item.sortNum"
+            />
+          </el-select>
+        </div>
+      </div>
+
       <div class="right-tool-list" v-if="state.isShowToolbar">
         <div
           v-for="item in state.rightToolList"
@@ -340,6 +371,7 @@
               </el-form-item>
             </el-form>
           </el-popover>
+
           <div v-else>
             <Icon :icon="item.icon" :size="20" />
             <div class="name"> {{ item.name }} </div>
@@ -350,7 +382,7 @@
 
     <div
       class="map-container"
-      ref="mapContainer"
+      ref="mapContainerRef"
       :style="{ cursor: state.cursorStyle }"
       v-if="imgBgObj.width && imgBgObj.height"
     >
@@ -840,6 +872,7 @@ const equipmentToolDialogRef = ref() //设备弹窗
 const textFormToolDialogRef = ref() //文字输入弹窗
 const editMapRouteDialogRef = ref() //编辑地图路线的弹窗
 const mapBackgroundRef = ref()
+const mapContainerRef = ref()
 const inputBoxRef = ref() //文字输入框
 
 const message = useMessage() // 消息弹窗
@@ -1522,7 +1555,10 @@ const state = reactive({
   },
   routeWidthForm: {
     routeWidth: 3
-  }
+  },
+  isSearchSelectVisible: false, //是否显示选择框
+  searchSelectedOption: '',
+  haveSortNumMapPointInfo: []
 })
 //网格的样式
 const gradientBackground = computed(() => {
@@ -2490,36 +2526,6 @@ const mapPointsToLine = (points, startPointId, endPointId) => {
       locationY: newY
     }
   })
-
-  // const dx = startPoint.locationX - endPoint.locationX
-  // const dy = startPoint.locationY - endPoint.locationY
-
-  // // 处理垂直直线的情况
-  // if (dx === 0) {
-  //   return points.map((point) => {
-  //     if (point === endPoint || point === startPoint) {
-  //       return point
-  //     }
-  //     return {
-  //       ...point,
-  //       locationX: endPoint.locationX
-  //     }
-  //   })
-  // }
-
-  // const slope = dy / dx
-  // const intercept = endPoint.locationY - slope * endPoint.locationX
-
-  // return points.map((point) => {
-  //   if (point === endPoint || point === startPoint) {
-  //     return point
-  //   }
-  //   const newY = slope * point.locationX + intercept
-  //   return {
-  //     ...point,
-  //     locationY: newY
-  //   }
-  // })
 }
 
 //计算是不是在同一条直线的
@@ -3088,6 +3094,11 @@ const getAllNodeList = async () => {
 
     state.allMapPointInfo.push(item)
   })
+
+  //包含sortNumber的
+  state.haveSortNumMapPointInfo = state.allMapPointInfo.filter((item) => {
+    return item.sortNum
+  })
 }
 //获取所有的路线
 const getAllMapRoute = async () => {
@@ -3384,6 +3395,37 @@ const computedCurveTextY = (item) => {
     4
   )
 }
+//搜索
+const toggleSelect = () => {
+  state.isSearchSelectVisible = !state.isSearchSelectVisible
+  state.searchSelectedOption = ''
+}
+const searchSelectChange = (sortNum) => {
+  const currentIndex = state.allMapPointInfo.findIndex((item) => item.sortNum === sortNum)
+  const currentItem = state.allMapPointInfo.find((item) => item.sortNum === sortNum)
+
+  // 计算并限制边界 滚动到指定位置
+  const rect = mapContainerRef.value
+  const maxScrollLeft = rect.scrollWidth - rect.clientWidth
+  const maxScrollTop = rect.scrollHeight - rect.clientHeight
+  const scrollToX = Math.max(
+    0,
+    Math.min(currentItem.locationX - rect.clientWidth / 2, maxScrollLeft)
+  )
+  const scrollToY = Math.max(
+    0,
+    Math.min(currentItem.locationY - rect.clientHeight / 2, maxScrollTop)
+  )
+
+  rect.scrollTo({
+    left: scrollToX,
+    top: scrollToY,
+    behavior: 'smooth'
+  })
+
+  state.currentItemIndex = currentIndex
+}
+
 document.onmousedown = function (e) {
   //右击
   if (e.button == 2) {
@@ -3498,15 +3540,12 @@ onUnmounted(() => {
     position: relative;
     width: 100%;
     overflow: auto;
-    // height: 85vh;
     height: calc(100vh - 120px);
 
     .map-bg {
       background-size: contain;
       background-repeat: no-repeat;
       position: absolute;
-      // top: 1.125rem;
-      // left: 1.125rem;
       top: 0;
       left: 0;
 
@@ -3519,15 +3558,22 @@ onUnmounted(() => {
   }
 
   .top-tool {
-    margin-bottom: 0.125rem;
+    margin-bottom: 2px;
+
+    .top-tool-list-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #fff;
+      box-shadow: rgba(0, 0, 0, 0.06) 0rem 0.125rem 0.1875rem;
+      height: 60px;
+      padding: 0 0.75rem;
+
       .top-tool-list {
         display: flex;
         align-items: center;
         text-align: center;
-      background-color: #fff;
+        position: relative;
-      padding: 0 0.75rem;
-      height: 60px;
-      box-shadow: rgba(0, 0, 0, 0.06) 0rem 0.125rem 0.1875rem;
 
         .top-tool-item {
           display: flex;
@@ -3564,6 +3610,7 @@ onUnmounted(() => {
           }
         }
       }
+    }
 
     .right-tool-list {
       position: absolute;
@@ -3673,4 +3720,11 @@ onUnmounted(() => {
   font-size: 0.875rem;
   user-select: none;
 }
+
+.search-select {
+  .search-icon {
+    widows: 20px;
+    height: 20px;
+  }
+}
 </style>