From 9cec9dacb174bbe00a7caad3b4ea974514f9e4ee Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Tue, 15 Apr 2025 17:29:50 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=9C=B0=E5=9B=BE=20?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E8=8A=82=E7=82=B9=20=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=88=B0=E4=B8=AD=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.local                                |   4 +-
 src/assets/search.png                     | Bin 0 -> 3770 bytes
 src/views/mapPage/realTimeMap/editMap.vue | 752 ++++++++++++----------
 3 files changed, 405 insertions(+), 351 deletions(-)
 create mode 100644 src/assets/search.png

diff --git a/.env.local b/.env.local
index 78a5d223..2d26cfc9 100644
--- a/.env.local
+++ b/.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
diff --git a/src/assets/search.png b/src/assets/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e4e134537e1d3649869b5b397aa6ce4b146302b
GIT binary patch
literal 3770
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
E0hdgs3IG5A

literal 0
HcmV?d00001

diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index 64aed8af..837ee1f2 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -1,303 +1,334 @@
 <template>
   <div class="edit-map-page" @wheel="handleWheel">
     <div class="top-tool">
-      <div class="top-tool-list">
-        <div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
-          <el-popover
-            placement="bottom"
-            :width="170"
-            trigger="click"
-            v-if="item.switchType === 'move' || item.switchType === 'revolve'"
-            :disabled="state.currentItemIndex === -1"
-          >
-            <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.moveForm" v-if="item.switchType === 'move'" class="mt-2">
-              <el-form-item label="X">
-                <el-input-number
-                  v-model="state.moveForm.locationX"
-                  :min="0"
-                  :max="imgBgObj.width"
-                  controls-position="right"
-                />
-              </el-form-item>
-              <el-form-item label="Y">
-                <el-input-number
-                  v-model="state.moveForm.locationY"
-                  :min="0"
-                  :max="imgBgObj.height"
-                  controls-position="right"
-                />
-              </el-form-item>
-              <div style="text-align: right">
-                <el-button
-                  size="small"
-                  style="width: 4rem; height: 1.875rem; background: #00329f"
-                  color="#00329F"
-                  @click="moveFormSubmit()"
-                  >确认</el-button
+      <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
+              placement="bottom"
+              :width="170"
+              trigger="click"
+              v-if="item.switchType === 'move' || item.switchType === 'revolve'"
+              :disabled="state.currentItemIndex === -1"
+            >
+              <template #reference>
+                <div
+                  class="tool-item"
+                  :class="
+                    toolbarSwitchType === item.switchType
+                      ? 'tool-active'
+                      : item.isActive
+                        ? 'right-tool-active'
+                        : ''
+                  "
+                  @click="toolbarClick(item)"
                 >
-              </div>
-            </el-form>
-            <!-- 旋转 -->
-            <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"
-                  :min="0"
-                  :max="259"
-                  controls-position="right"
-                />
-              </el-form-item>
-              <div style="text-align: right">
-                <el-button
-                  size="small"
-                  style="width: 4rem; height: 1.875rem; background: #00329f"
-                  color="#00329F"
-                  @click="rotationFormSubmit"
-                  >确认</el-button
-                >
-              </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"
-            trigger="click"
-            v-else-if="item.switchType === 'lineLibrary'"
-            :popper-style="{ padding: '0rem' }"
-          >
-            <template #reference>
-              <div
-                class="tool-item"
-                :class="
-                  toolbarSwitchType === 'lineLibrary' ||
-                  toolbarSwitchType === 'createLineLibrary' ||
-                  toolbarSwitchType === 'lineLibraryManage'
-                    ? 'tool-active'
-                    : item.isActive
-                      ? 'right-tool-active'
-                      : ''
-                "
-                @click="toolbarClick(item)"
-              >
-                <Icon :icon="item.icon" :size="20" />
-                <div class="name"> {{ item.name }} </div>
-              </div>
-            </template>
-            <div v-if="item.switchType === 'lineLibrary'" class="drop-down-menu">
-              <div
-                class="drop-down-menu-item"
-                :class="toolbarSwitchType === 'createLineLibrary' ? 'right-tool-active' : ''"
-                @click="toolbarClick({ switchType: 'createLineLibrary' })"
-                >生成线库</div
-              >
-              <div
-                class="drop-down-menu-item"
-                :class="toolbarSwitchType === 'lineLibraryManage' ? 'right-tool-active' : ''"
-                @click="toolbarClick({ switchType: 'lineLibraryManage' })"
-                >线库管理</div
-              >
-            </div>
-          </el-popover>
-          <!-- 区域  -->
-          <el-popover
-            placement="bottom"
-            trigger="click"
-            v-else-if="item.switchType === 'region'"
-            :popper-style="{ padding: '0rem' }"
-          >
-            <template #reference>
-              <div
-                class="tool-item"
-                :class="
-                  toolbarSwitchType === 'region' ||
-                  toolbarSwitchType === 'createRegion' ||
-                  toolbarSwitchType === 'regionManage'
-                    ? 'tool-active'
-                    : item.isActive
-                      ? 'right-tool-active'
-                      : ''
-                "
-                @click="toolbarClick(item)"
-              >
-                <Icon :icon="item.icon" :size="20" />
-                <div class="name"> {{ item.name }} </div>
-              </div>
-            </template>
-            <div v-if="item.switchType === 'region'" class="drop-down-menu">
-              <div
-                class="drop-down-menu-item"
-                :class="toolbarSwitchType === 'createRegion' ? 'right-tool-active' : ''"
-                @click="toolbarClick({ switchType: 'createRegion' })"
-                >生成物料区域</div
-              >
-              <div
-                class="drop-down-menu-item"
-                :class="toolbarSwitchType === 'regionManage' ? 'right-tool-active' : ''"
-                @click="toolbarClick({ switchType: 'regionManage' })"
-                >物料区域管理</div
-              >
-            </div>
-          </el-popover>
-          <!-- 标记 -->
-          <el-popover
-            placement="bottom"
-            trigger="click"
-            v-else-if="item.switchType === 'marker'"
-            width="220"
-            :visible="state.popoverVisible"
-          >
-            <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.markForm" class="mt-2" label-width="68">
-              <el-form-item label="标记车辆">
-                <el-select
-                  v-model="state.markForm.macAddress"
-                  placeholder="请选择"
-                  @change="macAddressChange"
-                >
-                  <el-option
-                    v-for="item in state.mapMarkCarList"
-                    :key="item.id"
-                    :label="item.robotNo"
-                    :value="item.macAddress"
+                  <Icon :icon="item.icon" :size="20" />
+                  <div class="name"> {{ item.name }} </div>
+                </div>
+              </template>
+              <!-- 位置 -->
+              <el-form :model="state.moveForm" v-if="item.switchType === 'move'" class="mt-2">
+                <el-form-item label="X">
+                  <el-input-number
+                    v-model="state.moveForm.locationX"
+                    :min="0"
+                    :max="imgBgObj.width"
+                    controls-position="right"
                   />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="标记属性" v-if="state.markForm.markProperty">
-                <el-input v-model="state.markForm.markProperty" style="width: 15rem" disabled />
-              </el-form-item>
-              <el-form-item label="原节点" v-if="state.markForm.originalNode">
-                <el-input v-model="state.markForm.originalNode" style="width: 15rem" disabled />
-              </el-form-item>
-              <div style="text-align: right">
-                <el-button
-                  size="small"
-                  style="width: 4rem; height: 1.875rem; background: #efefef"
-                  @click="markFormCancel()"
-                  >取消</el-button
+                </el-form-item>
+                <el-form-item label="Y">
+                  <el-input-number
+                    v-model="state.moveForm.locationY"
+                    :min="0"
+                    :max="imgBgObj.height"
+                    controls-position="right"
+                  />
+                </el-form-item>
+                <div style="text-align: right">
+                  <el-button
+                    size="small"
+                    style="width: 4rem; height: 1.875rem; background: #00329f"
+                    color="#00329F"
+                    @click="moveFormSubmit()"
+                    >确认</el-button
+                  >
+                </div>
+              </el-form>
+              <!-- 旋转 -->
+              <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"
+                    :min="0"
+                    :max="259"
+                    controls-position="right"
+                  />
+                </el-form-item>
+                <div style="text-align: right">
+                  <el-button
+                    size="small"
+                    style="width: 4rem; height: 1.875rem; background: #00329f"
+                    color="#00329F"
+                    @click="rotationFormSubmit"
+                    >确认</el-button
+                  >
+                </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)"
                 >
-                <el-button
-                  size="small"
-                  style="width: 4rem; height: 1.875rem; background: #00329f"
-                  color="#00329F"
-                  @click="markFormSubmit()"
-                  >确认</el-button
+                  <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"
+              trigger="click"
+              v-else-if="item.switchType === 'lineLibrary'"
+              :popper-style="{ padding: '0rem' }"
+            >
+              <template #reference>
+                <div
+                  class="tool-item"
+                  :class="
+                    toolbarSwitchType === 'lineLibrary' ||
+                    toolbarSwitchType === 'createLineLibrary' ||
+                    toolbarSwitchType === 'lineLibraryManage'
+                      ? 'tool-active'
+                      : item.isActive
+                        ? 'right-tool-active'
+                        : ''
+                  "
+                  @click="toolbarClick(item)"
+                >
+                  <Icon :icon="item.icon" :size="20" />
+                  <div class="name"> {{ item.name }} </div>
+                </div>
+              </template>
+              <div v-if="item.switchType === 'lineLibrary'" class="drop-down-menu">
+                <div
+                  class="drop-down-menu-item"
+                  :class="toolbarSwitchType === 'createLineLibrary' ? 'right-tool-active' : ''"
+                  @click="toolbarClick({ switchType: 'createLineLibrary' })"
+                  >生成线库</div
+                >
+                <div
+                  class="drop-down-menu-item"
+                  :class="toolbarSwitchType === 'lineLibraryManage' ? 'right-tool-active' : ''"
+                  @click="toolbarClick({ switchType: 'lineLibraryManage' })"
+                  >线库管理</div
                 >
               </div>
-            </el-form>
-          </el-popover>
-          <div
-            v-else
-            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>
-          <!-- 分隔线 -->
-          <div
-            class="line"
-            v-if="
-              item.switchType === 'save' ||
-              item.switchType === 'delete' ||
-              item.switchType === 'grid' ||
-              (item.switchType === 'next' &&
+            </el-popover>
+            <!-- 区域  -->
+            <el-popover
+              placement="bottom"
+              trigger="click"
+              v-else-if="item.switchType === 'region'"
+              :popper-style="{ padding: '0rem' }"
+            >
+              <template #reference>
+                <div
+                  class="tool-item"
+                  :class="
+                    toolbarSwitchType === 'region' ||
+                    toolbarSwitchType === 'createRegion' ||
+                    toolbarSwitchType === 'regionManage'
+                      ? 'tool-active'
+                      : item.isActive
+                        ? 'right-tool-active'
+                        : ''
+                  "
+                  @click="toolbarClick(item)"
+                >
+                  <Icon :icon="item.icon" :size="20" />
+                  <div class="name"> {{ item.name }} </div>
+                </div>
+              </template>
+              <div v-if="item.switchType === 'region'" class="drop-down-menu">
+                <div
+                  class="drop-down-menu-item"
+                  :class="toolbarSwitchType === 'createRegion' ? 'right-tool-active' : ''"
+                  @click="toolbarClick({ switchType: 'createRegion' })"
+                  >生成物料区域</div
+                >
+                <div
+                  class="drop-down-menu-item"
+                  :class="toolbarSwitchType === 'regionManage' ? 'right-tool-active' : ''"
+                  @click="toolbarClick({ switchType: 'regionManage' })"
+                  >物料区域管理</div
+                >
+              </div>
+            </el-popover>
+            <!-- 标记 -->
+            <el-popover
+              placement="bottom"
+              trigger="click"
+              v-else-if="item.switchType === 'marker'"
+              width="220"
+              :visible="state.popoverVisible"
+            >
+              <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.markForm" class="mt-2" label-width="68">
+                <el-form-item label="标记车辆">
+                  <el-select
+                    v-model="state.markForm.macAddress"
+                    placeholder="请选择"
+                    @change="macAddressChange"
+                  >
+                    <el-option
+                      v-for="item in state.mapMarkCarList"
+                      :key="item.id"
+                      :label="item.robotNo"
+                      :value="item.macAddress"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="标记属性" v-if="state.markForm.markProperty">
+                  <el-input v-model="state.markForm.markProperty" style="width: 15rem" disabled />
+                </el-form-item>
+                <el-form-item label="原节点" v-if="state.markForm.originalNode">
+                  <el-input v-model="state.markForm.originalNode" style="width: 15rem" disabled />
+                </el-form-item>
+                <div style="text-align: right">
+                  <el-button
+                    size="small"
+                    style="width: 4rem; height: 1.875rem; background: #efefef"
+                    @click="markFormCancel()"
+                    >取消</el-button
+                  >
+                  <el-button
+                    size="small"
+                    style="width: 4rem; height: 1.875rem; background: #00329f"
+                    color="#00329F"
+                    @click="markFormSubmit()"
+                    >确认</el-button
+                  >
+                </div>
+              </el-form>
+            </el-popover>
+            <div
+              v-else
+              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>
+            <!-- 分隔线 -->
+            <div
+              class="line"
+              v-if="
+                item.switchType === 'save' ||
+                item.switchType === 'delete' ||
+                item.switchType === 'grid' ||
+                (item.switchType === 'next' &&
+                  (toolbarSwitchType === 'createLineLibrary' ||
+                    toolbarSwitchType === 'createRegion' ||
+                    toolbarSwitchType === 'drawRoute' ||
+                    toolbarSwitchType === 'generateLine' ||
+                    toolbarSwitchType === 'bulkDelete'))
+              "
+            ></div>
+            <el-button
+              v-if="
+                item.switchType === 'next' &&
                 (toolbarSwitchType === 'createLineLibrary' ||
                   toolbarSwitchType === 'createRegion' ||
                   toolbarSwitchType === 'drawRoute' ||
                   toolbarSwitchType === 'generateLine' ||
-                  toolbarSwitchType === 'bulkDelete'))
-            "
-          ></div>
-          <el-button
-            v-if="
-              item.switchType === 'next' &&
-              (toolbarSwitchType === 'createLineLibrary' ||
-                toolbarSwitchType === 'createRegion' ||
-                toolbarSwitchType === 'drawRoute' ||
-                toolbarSwitchType === 'generateLine' ||
-                toolbarSwitchType === 'bulkDelete')
-            "
-            type="danger"
-            class="selection-area-btn"
-            @click="clickDrawSelectionArea"
-            >确定</el-button
+                  toolbarSwitchType === 'bulkDelete')
+              "
+              type="danger"
+              class="selection-area-btn"
+              @click="clickDrawSelectionArea"
+              >确定</el-button
+            >
+          </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,48 +3558,56 @@ onUnmounted(() => {
   }
 
   .top-tool {
-    margin-bottom: 0.125rem;
-    .top-tool-list {
+    margin-bottom: 2px;
+
+    .top-tool-list-container {
       display: flex;
       align-items: center;
-      text-align: center;
+      justify-content: space-between;
       background-color: #fff;
-      padding: 0 0.75rem;
-      height: 60px;
       box-shadow: rgba(0, 0, 0, 0.06) 0rem 0.125rem 0.1875rem;
+      height: 60px;
+      padding: 0 0.75rem;
 
-      .top-tool-item {
+      .top-tool-list {
         display: flex;
         align-items: center;
+        text-align: center;
+        position: relative;
 
-        .tool-item {
-          cursor: pointer;
-          width: 44px;
-          height: 60px;
+        .top-tool-item {
           display: flex;
-          flex-direction: column;
           align-items: center;
-          justify-content: center;
 
-          .name {
+          .tool-item {
             cursor: pointer;
-            font-family:
-              PingFangSC,
-              PingFang SC;
-            font-weight: 400;
-            font-size: 13px;
-            color: #0d162a;
-            line-height: 1.25rem;
-            text-align: center;
-            font-style: normal;
-            margin-top: 0.25rem;
+            width: 44px;
+            height: 60px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            .name {
+              cursor: pointer;
+              font-family:
+                PingFangSC,
+                PingFang SC;
+              font-weight: 400;
+              font-size: 13px;
+              color: #0d162a;
+              line-height: 1.25rem;
+              text-align: center;
+              font-style: normal;
+              margin-top: 0.25rem;
+            }
+          }
+          .line {
+            margin: 0 4px;
+            width: 0.0625rem;
+            height: 2.9375rem;
+            border: 0.0625rem solid #cccccc;
           }
-        }
-        .line {
-          margin: 0 4px;
-          width: 0.0625rem;
-          height: 2.9375rem;
-          border: 0.0625rem solid #cccccc;
         }
       }
     }
@@ -3673,4 +3720,11 @@ onUnmounted(() => {
   font-size: 0.875rem;
   user-select: none;
 }
+
+.search-select {
+  .search-icon {
+    widows: 20px;
+    height: 20px;
+  }
+}
 </style>