diff --git a/.env.development b/.env.development
index d74f104..0346afc 100644
--- a/.env.development
+++ b/.env.development
@@ -6,7 +6,7 @@ ENV = 'development'
 
 # 共享电动车管理系统/开发环境
 # VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
-VUE_APP_BASE_API = 'http://localhost:8080'
+VUE_APP_BASE_API = 'http://192.168.2.189:8080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/src/api/system/area.js b/src/api/system/area.js
index fea802b..ed601d8 100644
--- a/src/api/system/area.js
+++ b/src/api/system/area.js
@@ -54,6 +54,14 @@ export function updateArea(data) {
     data: data
   })
 }
+// 修改导览
+export function putguide(data) {
+  return request({
+    url: '/system/area/guide',
+    method: 'put',
+    data: data
+  })
+}
 // 修改运营区
 export function updateArea2(data) {
   return request({
diff --git a/src/components/Map/TrajectoryMap.vue b/src/components/Map/TrajectoryMap.vue
index fc9dc00..1233e48 100644
--- a/src/components/Map/TrajectoryMap.vue
+++ b/src/components/Map/TrajectoryMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="place-search-map" :style="{width: width, height: height}" v-loading="loading">
+  <div class="place-search-map" :style="{ width: width, height: height }" v-loading="loading">
     <div id="container"></div>
     <div class="input-card">
       <h4>轨迹回放控制</h4>
@@ -52,7 +52,7 @@ export default {
       loading: false,
       keyword: null,
       markers: [],
-      line:[],
+      line: [],
       area: {
         province: '福建省',
         city: '宁德市',
@@ -99,7 +99,40 @@ export default {
     // 显示轨迹
     trajectory() {
       this.line = JSON.parse(this.tripRouteStr)
-      console.log("this.line================"+this.line)
+      console.log("this.line================" + this.line)
+      let abb;
+      try {
+        abb = JSON.parse(this.tripRouteStr);
+      } catch (error) {
+        console.error("Error parsing tripRouteStr:", error);
+        return;
+      }
+      let latitude = parseFloat(abb[0][1]);
+      let longitude = parseFloat(abb[0][0]);
+      let latitude1 = parseFloat(abb[abb.length - 1][1]);
+      let longitude1 = parseFloat( abb[abb.length - 1][0]);
+      
+      this.marker = new AMap.Marker({
+        map: this.map,
+        position: [longitude, latitude],
+        icon: new AMap.Icon({
+          size: new AMap.Size(25, 38),  // 图标大小
+          image: "https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr",
+          imageSize: new AMap.Size(25, 38)  // 图标图片大小
+        }),
+        offset: new AMap.Pixel(-12.5, -19.5),
+      });
+      this.marker = new AMap.Marker({
+        map: this.map,
+        position: [longitude1, latitude1],
+        icon: new AMap.Icon({
+          size: new AMap.Size(25, 38),  // 图标大小
+          image: "https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx",
+          imageSize: new AMap.Size(25, 38)  // 图标图片大小
+        }),
+        offset: new AMap.Pixel(-12.5, -19.5),
+      });
+      // console.log(latitude,longitude,'longitudelongitudelongitude');
       let line = this.line;
       this.marker = new AMap.Marker({
         map: this.map,
@@ -196,7 +229,7 @@ export default {
     line-height: 1.5;
     border-radius: 1rem;
     -webkit-appearance: button;
-    cursor:pointer;
+    cursor: pointer;
   }
 
   .input-item {
diff --git a/src/views/system/area/guide.vue b/src/views/system/area/guide.vue
index 5bb1238..ccd9148 100644
--- a/src/views/system/area/guide.vue
+++ b/src/views/system/area/guide.vue
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="input-card-right">
       <div class="img">
-        <image-upload v-model="picture" />
+        <image-upload :limit="1" :isShowTip="false" v-model="picture" />
       </div>
 
       <el-button :style="topRightCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('topRight')">
@@ -16,8 +16,12 @@
       <el-button @click="generateMap" :disabled="!canGenerateMap">
         生成导览地图
       </el-button>
+
+      <el-button @click="saveMap" :disabled="!canSaveMap">
+        保存
+      </el-button>
     </div>
-   
+
     <div id="amap-container" class="map-container"></div>
 
     <div class="coordinates">
@@ -25,15 +29,16 @@
       <div v-if="bottomLeftCoord">左下角: {{ bottomLeftCoord }}</div>
     </div>
   </div>
-  
 </template>
 
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
 import globalConfig from '@/utils/config/globalConfig';
-import {getArea, optionselect as getAreaOptionselect} from "@/api/system/area";
+import { getArea, putguide } from "@/api/system/area";
+
 export default {
   name: "NewPage",
+
   data() {
     return {
       map: null,
@@ -44,17 +49,31 @@ export default {
       picture: '',
       buttonStyleActive: 'background-color: #409EFF; color: white;',
       buttonStyleInactive: 'background-color: #fff; color: #409EFF;',
+      areaLon: null,
+      areaLat: null,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        parkingName: null,
+        areaId: null,
+        type: "2"
+      },
+      // 默认区域id
+      defaultAreaId: "",
+      isMapGenerated: false,
     };
   },
   computed: {
     canGenerateMap() {
       return this.picture && this.topRightCoord && this.bottomLeftCoord;
+    },
+    canSaveMap() {
+      return this.isMapGenerated;
     }
   },
   created() {
     const areaId = this.$route.params && this.$route.params.areaId;
     this.getArea(areaId);
-    // this.getAreaList();
   },
   mounted() {
     this.initMap();
@@ -67,7 +86,6 @@ export default {
         this.areaLon = response.data.longitude;
         this.areaLat = response.data.latitude;
         this.defaultAreaId = response.data.areaId;
-        this.getList();
       });
     },
     initMap() {
@@ -84,6 +102,7 @@ export default {
         this.map = new AMap.Map("amap-container", {
           viewMode: "3D",
           zoom: 13,
+          center: [this.areaLon, this.areaLat], // 初始化地图中心点位置
         });
         this.map.setFitView();
         this.map.on('click', this.handleMapClick);
@@ -93,33 +112,49 @@ export default {
     },
     setClickType(type) {
       this.clickType = type;
+      // 清除相应的坐标和标记
+      if (type === 'topRight' && this.topRightCoord) {
+        this.clearMarker('topRight');
+        this.topRightCoord = null;
+      } else if (type === 'bottomLeft' && this.bottomLeftCoord) {
+        this.clearMarker('bottomLeft');
+        this.bottomLeftCoord = null;
+      }
     },
     handleMapClick(event) {
       const lnglat = event.lnglat;
 
+      // 只有在点击了“右上角坐标”或“左下角坐标”按钮后才能添加标记
       if (this.clickType === 'topRight') {
         this.topRightCoord = lnglat;
+        this.addMarker(lnglat, 'topRight');
       } else if (this.clickType === 'bottomLeft') {
         this.bottomLeftCoord = lnglat;
+        this.addMarker(lnglat, 'bottomLeft');
       }
 
-      // 创建标记
-      const marker = new AMap.Marker({
-        position: lnglat,
-      });
-      this.map.add(marker);
-      this.markers.push(marker);
-
       // 清除点击类型
       this.clickType = null;
     },
-    clearMarkers() {
-      this.markers.forEach(marker => {
-        this.map.remove(marker);
+    addMarker(lnglat, type) {
+      // 清除之前的标记
+      this.clearMarker(type);
+
+      // 创建新标记
+      const marker = new AMap.Marker({
+        position: lnglat,
+      });
+      this.map.add(marker);
+      this.markers.push({ marker, type });
+    },
+    clearMarker(type) {
+      this.markers = this.markers.filter(({ marker, type: markerType }) => {
+        if (markerType === type) {
+          this.map.remove(marker);
+          return false;
+        }
+        return true;
       });
-      this.markers = [];
-      this.topRightCoord = null;
-      this.bottomLeftCoord = null;
     },
     generateMap() {
       if (!this.canGenerateMap) {
@@ -136,14 +171,20 @@ export default {
       const topRight = lnglatToFixed(this.topRightCoord);
       const bottomLeft = lnglatToFixed(this.bottomLeftCoord);
 
+      console.log('Top Right:', topRight);
+      console.log('Bottom Left:', bottomLeft);
+
       // 计算边界
       const bounds = new AMap.Bounds([bottomLeft.lng, bottomLeft.lat], [topRight.lng, topRight.lat]);
 
+      console.log('Bounds:', bounds);
+
       // 创建图片图层
       const imageLayer = new AMap.ImageLayer({
         url: this.picture,
         bounds: bounds,
-        zooms: [15, 20]
+        zooms: [15, 20],
+        zIndex: 999 // 设置zIndex确保图层在其他图层之上
       });
 
       // 清除现有图层
@@ -155,6 +196,34 @@ export default {
 
       // 添加图片图层
       this.map.add(imageLayer);
+
+      // 设置地图已生成的标志
+      this.isMapGenerated = true;
+    },
+    saveMap() {
+      if (!this.canSaveMap) {
+        this.$message.error('请先生成导览地图');
+        return;
+      }
+
+      // 格式化坐标为字符串格式，不包含方括号
+      const formatLngLat = (lnglat) => `${lnglat.lng},${lnglat.lat}`;
+
+      // 保存逻辑
+      const mapData = {
+        guideMap: this.picture,
+        upperRight: formatLngLat(this.topRightCoord),
+        lowerLeft: formatLngLat(this.bottomLeftCoord),
+        areaId: this.defaultAreaId
+      };
+
+      putguide(mapData).then(response => {
+        // 处理更新后的响应
+      });
+
+      // 例如，将 mapData 发送到后端保存
+      console.log('保存地图数据:', mapData);
+      this.$message.success('地图数据已保存');
     }
   },
 };
@@ -172,11 +241,14 @@ export default {
 }
 
 .input-card-right {
+  position: fixed;
+  top: 100px;
+  left: 230px;
+  z-index: 100;
   width: 100%;
   display: flex;
   flex-wrap: nowrap;
   align-items: flex-end;
-  // justify-content: center;
   margin-bottom: 10px;
 }
 
@@ -193,4 +265,4 @@ export default {
   padding: 10px;
   border-radius: 5px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/system/map/index.vue b/src/views/system/map/index.vue
index 64f8b71..09a2faa 100644
--- a/src/views/system/map/index.vue
+++ b/src/views/system/map/index.vue
@@ -36,15 +36,11 @@
       </div>
     </div>
     <div class="area-options" v-if="userName == 'admin'">
-      <span >切换运营区</span>
-        <el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange">
-          <el-option
-            v-for="item in areaOptions"
-            :key="item.areaId"
-            :label="item.areaName"
-            :value="item.areaId"
-          ></el-option>
-        </el-select>
+      <span>切换运营区</span>
+      <el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange">
+        <el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
+          :value="item.areaId"></el-option>
+      </el-select>
     </div>
     <div class="input-card">
       <el-button @click="setFitView()">全局查看</el-button>
@@ -53,7 +49,7 @@
     </div>
 
     <el-dialog style="font-weight: bold;" title="设备详情" :visible.sync="open2" width="1000px" append-to-body>
-      <el-form ref="form" :model="form"  label-width="100px" size="mini">
+      <el-form ref="form" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="8">
             <el-form-item label="设备mac：">{{ form.mac }}</el-form-item>
@@ -62,15 +58,12 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="分区：" style="color:#4c97e7;font-weight: 700">{{ form.areaName }}</el-form-item>
-            <el-form-item label="剩余电量：" >{{ form.remainingPower }}%</el-form-item>
+            <el-form-item label="剩余电量：">{{ form.remainingPower }}%</el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="二维码：">
               <template>
-                <el-popover
-                  placement="top"
-                  width="180"
-                  trigger="hover">
+                <el-popover placement="top" width="180" trigger="hover">
                   <div class="qr-code-box">
                     <qr-code :text="form.qrText" :width="150" :height="150" />
                   </div>
@@ -78,23 +71,25 @@
                 </el-popover>
               </template>
             </el-form-item>
-            <el-form-item label="网络状态：" style="color: #ffcc00;font-weight: 700">{{ form.onlineStatus == 1 ? '在线' : '离线' }}</el-form-item>
+            <el-form-item label="网络状态：" style="color: #ffcc00;font-weight: 700">{{ form.onlineStatus == 1 ? '在线' : '离线'
+              }}</el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <div class="nav-container">
-            <el-menu :default-active="activeIndex" class="el-menu-demo nav-menu" mode="horizontal" @select="handleSelect">
-              <el-menu-item index="1" >使用记录</el-menu-item>
-              <el-menu-item index="2" >维修记录</el-menu-item>
-              <el-menu-item index="3" >换电记录</el-menu-item>
+            <el-menu :default-active="activeIndex" class="el-menu-demo nav-menu" mode="horizontal"
+              @select="handleSelect">
+              <el-menu-item index="1">使用记录</el-menu-item>
+              <el-menu-item index="2">维修记录</el-menu-item>
+              <el-menu-item index="3">换电记录</el-menu-item>
             </el-menu>
             <div class="line"></div>
           </div>
         </el-row>
         <el-row>
-          <order-record v-show="activeIndex == '1'" :sn="form.sn"/>
-          <repair-record v-show="activeIndex == '2'" :sn="form.sn"/>
-          <replacement-record v-show="activeIndex == '3'" :sn="form.sn"/>
+          <order-record v-show="activeIndex == '1'" :sn="form.sn" />
+          <repair-record v-show="activeIndex == '2'" :sn="form.sn" />
+          <replacement-record v-show="activeIndex == '3'" :sn="form.sn" />
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -105,719 +100,786 @@
 
 </template>
 <script>
-  import AMapLoader from "@amap/amap-jsapi-loader";
-  import globalConfig from "@/utils/config/globalConfig";
-  import { getDevice, listDevice } from '@/api/system/device'
-  import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area'
-  import { listParking } from '@/api/system/parking'
-  import LocationMap from '@/components/Map/location/LocationMap'
-  import OrderRecord from '@/views/system/device/components/orderRecord'
-  import RepairRecord from '@/views/system/device/components/repairRecord'
-  import ReplacementRecord from '@/views/system/device/components/replacementRecord'
-  import QrCode from '@/components/QrCode'
+import AMapLoader from "@amap/amap-jsapi-loader";
+import globalConfig from "@/utils/config/globalConfig";
+import { getDevice, listDevice } from '@/api/system/device'
+import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area'
+import { listParking } from '@/api/system/parking'
+import LocationMap from '@/components/Map/location/LocationMap'
+import OrderRecord from '@/views/system/device/components/orderRecord'
+import RepairRecord from '@/views/system/device/components/repairRecord'
+import ReplacementRecord from '@/views/system/device/components/replacementRecord'
+import QrCode from '@/components/QrCode'
 
-  function formarStatus(status,onlineStatus) {
-    if(onlineStatus == "0"){
-      if(status == "3"){
-        return globalConfig.icon.redyellow;
-      }else if(status == "4"){
-        return globalConfig.icon.orangered;
-      }
-      return globalConfig.icon.red;
-    }else{
-      if(status == "0"){
-        return globalConfig.icon.gray;
-      }else if(status == "1"){
-        return globalConfig.icon.blue;
-      }else if(status == "2"){
-        return globalConfig.icon.green;
-      }else if(status == "3"){
-        return globalConfig.icon.yellow;
-      }else if(status == "4"){
-        return globalConfig.icon.orange;
-      }else if(status == "8"){
-        return globalConfig.icon.gray;
-      }else if(status == "9"){
-        return globalConfig.icon.gray;
-      }
+function formarStatus(status, onlineStatus) {
+  if (onlineStatus == "0") {
+    if (status == "3") {
+      return globalConfig.icon.redyellow;
+    } else if (status == "4") {
+      return globalConfig.icon.orangered;
+    }
+    return globalConfig.icon.red;
+  } else {
+    if (status == "0") {
+      return globalConfig.icon.gray;
+    } else if (status == "1") {
+      return globalConfig.icon.blue;
+    } else if (status == "2") {
+      return globalConfig.icon.green;
+    } else if (status == "3") {
+      return globalConfig.icon.yellow;
+    } else if (status == "4") {
+      return globalConfig.icon.orange;
+    } else if (status == "8") {
+      return globalConfig.icon.gray;
+    } else if (status == "9") {
+      return globalConfig.icon.gray;
     }
   }
-  export default {
-    name: "map-view",
-    components: { OrderRecord, RepairRecord, ReplacementRecord,QrCode,LocationMap },
-    data() {
-      return {
-        AMap: null,
-        map: null,  // 地图实例
-        markers: [],
-        labels: [],
-        tips: null,
-        // 运营区表格数据
-        areaList: [],
-        userName: undefined,
-        lon: null,
-        lat: null,
-        area:null,
-        ids: null,
-        showDialog: null,
-        icons: globalConfig.icon,
-        showPlaceSearchMap: false,
-        selected: null,
-        activeIndex: '1',
-        cluster: null,
-        data: [],
-        show: false,
-        // 详情窗口
-        open2: false,
-        // 表单参数
-        form: {},
-        areaId: null,
-        areaOptions: [],
-        infoWindow: null,
-        // 设备表格数据
-        deviceList: [],
-        onDeviceList: [],
-        parkingList: [],
-        noParkingList: [],
-        noridingList: [],
-        type: null
+}
+export default {
+  name: "map-view",
+  components: { OrderRecord, RepairRecord, ReplacementRecord, QrCode, LocationMap },
+  data() {
+    return {
+      AMap: null,
+      map: null,  // 地图实例
+      markers: [],
+      labels: [],
+      tips: null,
+      // 运营区表格数据
+      areaList: [],
+      userName: undefined,
+      lon: null,
+      lat: null,
+      area: null,
+      ids: null,
+      showDialog: null,
+      icons: globalConfig.icon,
+      showPlaceSearchMap: false,
+      selected: null,
+      activeIndex: '1',
+      cluster: null,
+      data: [],
+      show: false,
+      // 详情窗口
+      open2: false,
+      // 表单参数
+      form: {},
+      areaId: null,
+      areaOptions: [],
+      infoWindow: null,
+      // 设备表格数据
+      deviceList: [],
+      onDeviceList: [],
+      parkingList: [],
+      noParkingList: [],
+      noridingList: [],
+      type: null
+    }
+  },
+  mounted() {
+    console.log("当前用户信息：", this.$store.state.user.name)
+    this.userName = this.$store.state.user.name;
+    this.getAreaList(this.areaId);
+    this.getAreaOptions();
+  },
+  unmounted() {
+    this.map?.destroy();
+  },
+  methods: {
+    handleAreaChange(newAreaId) {
+      console.log('newAreaId:', newAreaId);
+      this.areaId = newAreaId;
+      this.getAreaList(this.areaId);
+    },
+    getAreaOptions() {
+      getAreaOptionselect().then(response => {
+        this.areaOptions = response.data;
+        console.log("areaOptions", this.areaOptions)
+      });
+    },
+    onMapGeo(data, lat, lng) {
+      console.log("onMapGeo", data)
+      let component = data.regeocode.addressComponent;
+      this.selected = {
+        address: data.regeocode.formattedAddress,
+        lng: lat,
+        lat: lng,
+        province: component.province,
+        city: component.city === '' ? '市辖区' : component.city,
+        county: component.district,
+        name: component.street + component.streetNumber
       }
     },
-    mounted() {
-      console.log("当前用户信息：",this.$store.state.user.name)
-      this.userName = this.$store.state.user.name;
-      this.getAreaList(this.areaId);
-      this.getAreaOptions();
+    onSelectChange(addr) {
+      console.log("onSelectChange", addr)
+      let data = addr.selected.data;
+      this.selected = {
+        address: data.pname + (data.cityname === data.pname ? '' : data.cityname) + data.adname + data.address + data.name,
+        lng: data.location.lng,
+        lat: data.location.lat,
+        province: data.pname,
+        city: data.cityname === data.pname ? '市辖区' : data.cityname,
+        county: data.adname,
+        name: data.address + data.name,
+      }
     },
-    unmounted() {
-      this.map?.destroy();
+    handleSelect(key, keyPath) {
+      this.activeIndex = key;
+      console.log(key, keyPath);
     },
-    methods: {
-      handleAreaChange(newAreaId) {
-        console.log('newAreaId:', newAreaId);
-        this.areaId = newAreaId;
-        this.getAreaList(this.areaId);
-      },
-      getAreaOptions() {
-        getAreaOptionselect().then(response => {
-          this.areaOptions = response.data;
-          console.log("areaOptions", this.areaOptions)
+    showMarkers() {
+      if (this.show) {
+        // this.markers.forEach(marker => {
+        //   marker.show();
+        // });
+        this.labels.forEach(label => {
+          label.show();
         });
-      },
-      onMapGeo(data, lat, lng) {
-        console.log("onMapGeo", data)
-        let component = data.regeocode.addressComponent;
-        this.selected = {
-          address: data.regeocode.formattedAddress,
-          lng: lat,
-          lat: lng,
-          province: component.province,
-          city: component.city === '' ? '市辖区' : component.city,
-          county: component.district,
-          name: component.street + component.streetNumber
-        }
-      },
-      onSelectChange(addr) {
-        console.log("onSelectChange", addr)
-        let data = addr.selected.data;
-        this.selected = {
-          address: data.pname + (data.cityname === data.pname ? '' : data.cityname) + data.adname + data.address + data.name,
-          lng: data.location.lng,
-          lat: data.location.lat,
-          province: data.pname,
-          city: data.cityname === data.pname ? '市辖区' : data.cityname,
-          county: data.adname,
-          name: data.address + data.name,
-        }
-      },
-      handleSelect(key, keyPath) {
-        this.activeIndex = key;
-        console.log(key, keyPath);
-      },
-      showMarkers() {
-        if(this.show){
-          // this.markers.forEach(marker => {
-          //   marker.show();
-          // });
-          this.labels.forEach(label => {
-            label.show();
-          });
-        }else{
-          // this.markers.forEach(marker => {
-          //   marker.hide();
-          // });
-          this.labels.forEach(label => {
-            label.hide();
-          });
-        }
-        this.show = !this.show;
-        const elements = document.querySelectorAll('.apiary-marker-name');
-        elements.forEach(element => {
-          element.style.visibility = this.show ? 'hidden' : 'visible';
+      } else {
+        // this.markers.forEach(marker => {
+        //   marker.hide();
+        // });
+        this.labels.forEach(label => {
+          label.hide();
         });
-      },
-      async getAreaList(areaId){
-        listArea({areaId: areaId}).then(response => {
-          this.areaList = response.rows;
-          if (this.areaList.length > 0) { // 确保数组不为空
-            const firstArea = this.areaList[0]; // 获取第一个元素
-            this.area = firstArea;
-            console.log('第一个区域的信息:', firstArea);
-            this.lon = firstArea.longitude;
-            this.lat = firstArea.latitude;
-            console.log("area============="+JSON.stringify(this.area))
-            listParking({areaId: this.area.areaId}).then(response => {
-              let list = response.rows;
-              list.forEach(item => {
-                if (item.type === '1') {
-                  this.parkingList.push(item);
-                } else if (item.type === '2') {
-                  this.noParkingList.push(item);
-                } else if (item.type === '3') {
-                  this.noridingList.push(item);
-                }
-              });
-              console.log("parkingList============="+JSON.stringify(this.parkingList));
-              console.log("noParkingList============="+JSON.stringify(this.noParkingList));
-              console.log("noriding============="+JSON.stringify(this.noridingList));
-              this.initAMap();
-            });
-          }else{
-            console.log('区域列表为空');
-          }
-        });
-      },
-      changeMapStyle(){
-        // 创建一个默认的图层组件
-        let defaultLayer = new AMap.TileLayer();
-        // 创建一个卫星图图层组件
-        let satelliteLayer = new AMap.TileLayer.Satellite();
-        let roadNetLayer = new AMap.TileLayer.RoadNet();
-        // 将默认图层添加到地图中
-        this.map.add(defaultLayer);
-        // 获取当前地图显示的图层
-        let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
-        // 切换图层
-        if(this.type=='default'){
-          console.log(1111111)
-          //获取地图图层数据
-          this.map.setLayers([defaultLayer]); // 切换回默认图层
-          this.type = 'Satellite';
-        }else{
-          console.log(222222)
-          this.map.setLayers([satelliteLayer,roadNetLayer]); // 切换到卫星图图层
-          this.type = 'default';
-        }
-      },
-      setFitView(){
-        this.map.setFitView(null, false, [150, 60, 100, 60]);
-      },
-      initAMap() {
-        AMapLoader.load({
-          key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
-          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        }).then((AMap) => {
-          this.map = new AMap.Map("container", {
-            // 设置地图容器id
-            viewMode: "3D", // 是否为3D地图模式
-            zoom: 13, // 初始化地图级别
-            center: [this.lon,this.lat], //初始化地图中心点位置
-          });
-          // 创建信息窗体
-          this.infoWindow = new AMap.InfoWindow({
-            offset: new AMap.Pixel(0, -30)
-          });
-          //设备点标记
-          console.log("this.areaId============="+this.areaId)
-          this.deviceMarker(this.areaId);
-          //运营区边界
-          this.areaList.forEach(area => {
-            this.addArea(JSON.parse(area.boundaryStr) || []);
-          });
-          //停车区
-          this.parkingList.forEach(parking => {
-            this.addParking(JSON.parse(parking.boundaryStr) || [],parking.parkingName,parking.longitude,parking.latitude);
-            this.addMarker2(parking,"https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh",parking.parkingName,"#1890ff");
-          });
-          //禁停区
-          this.noParkingList.forEach(noparking => {
-            this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
-            this.addMarker2(noparking,"https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab",noparking.parkingName,"#ff4444");
-          });
-          //禁行区
-          this.noridingList.forEach(noriding => {
-            this.addNoriding(JSON.parse(noriding.boundaryStr) || [],noriding.parkingName,noriding.longitude,noriding.latitude);
-            this.addMarker2(noriding,"https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2",noriding.parkingName,"#ffcc00");
-          });
-          // setTimeout(() => {
-          //   this.setFitView();
-          // }, 2000);
-        }).catch((e) => {
-          console.log(e);
-        });
-      },
-      // 刷新点标记
-      freshMarker(points) {
-        let that = this;
-
-        console.log("刷新点标记====",points)
-
-        // 检查 points 数据格式
-        if (!Array.isArray(points)) {
-          console.error("Points data is not an array");
-          return;
-        }
-        console.log("this.cluster=======",this.cluster)
-
-        // 聚合对象存在，则修改数据
-        if (this.cluster) {
-          try {
-            this.cluster.setData(points);
-          } catch (error) {
-            console.error("Error setting cluster data: ", error);
-          }
-        } else {
-          // 插件未加载的情况
-          this.map.plugin(["AMap.MarkerCluster"], () => {
-            that.cluster = new AMap.MarkerCluster(
-              this.map, //地图实例
-              points, //海量点数据，数据中需包含经纬度信息字段 lnglat
-              {
-                styles: this.getStyles(),
-                renderMarker: this.getRenderMarker, //上述步骤的自定义非聚合点样式
+      }
+      this.show = !this.show;
+      const elements = document.querySelectorAll('.apiary-marker-name');
+      elements.forEach(element => {
+        element.style.visibility = this.show ? 'hidden' : 'visible';
+      });
+    },
+    async getAreaList(areaId) {
+      listArea({ areaId: areaId }).then(response => {
+        this.areaList = response.rows;
+        if (this.areaList.length > 0) { // 确保数组不为空
+          const firstArea = this.areaList[0]; // 获取第一个元素
+          this.area = firstArea;
+          console.log('第一个区域的信息:', firstArea);
+          this.lon = firstArea.longitude;
+          this.lat = firstArea.latitude;
+          console.log("area=============" + JSON.stringify(this.area))
+          listParking({ areaId: this.area.areaId }).then(response => {
+            let list = response.rows;
+            list.forEach(item => {
+              if (item.type === '1') {
+                this.parkingList.push(item);
+              } else if (item.type === '2') {
+                this.noParkingList.push(item);
+              } else if (item.type === '3') {
+                this.noridingList.push(item);
               }
-            );
-            // 检查 cluster 对象是否正确初始化
-            if (that.cluster) {
-              console.log("Cluster 初始化成功");
-              that.cluster.on('click', that.onClickCluster);
-            } else {
-              console.error("初始化失败 cluster");
-            }
+            });
+            console.log("parkingList=============" + JSON.stringify(this.parkingList));
+            console.log("noParkingList=============" + JSON.stringify(this.noParkingList));
+            console.log("noriding=============" + JSON.stringify(this.noridingList));
+            this.initAMap();
           });
+        } else {
+          console.log('区域列表为空');
         }
-      },
-      // 点击聚合对象事件
-      onClickCluster(e) {
-        console.log("点击聚合点====",e)
-        this.onDeviceList = e.clusterData.map(item => item);
-        // 如果数量 > 1，则打开列表页
-        if (this.onDeviceList.length > 1) {
-          console.log("打开列表====",this.onDeviceList)
-          let content = this.generateInfoContent(this.onDeviceList);
-          this.infoWindow.setContent(content);
-          this.infoWindow.open(this.map, e.lnglat);
-        }
-      },
-      generateInfoContent(data) {
-        let content = `<div><table  class="info-table">
-        <thead>
-          <tr>
-            <th>SN</th>
-            <th>车牌号</th>
-            <th>状态</th>
-            <th>操作</th>
-          </tr>
-        </thead>
-        <tbody>`;
-        data.forEach(item => {
-          content += `<tr>
-          <td>${item.sn}</td>
-          <td>${item.vehicleNum}</td>
-          <td>${formatVehicleStatus(item.status)}</td>
-          <td><button class="detail-btn" data-device-id="${item.deviceId}">详情</button></td>
-        </tr>`;
+      });
+    },
+    changeMapStyle() {
+      // 创建一个默认的图层组件
+      let defaultLayer = new AMap.TileLayer();
+      // 创建一个卫星图图层组件
+      let satelliteLayer = new AMap.TileLayer.Satellite();
+      let roadNetLayer = new AMap.TileLayer.RoadNet();
+      // 将默认图层添加到地图中
+      this.map.add(defaultLayer);
+      // 获取当前地图显示的图层
+      let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
+      // 切换图层
+      if (this.type == 'default') {
+        console.log(1111111)
+        //获取地图图层数据
+        this.map.setLayers([defaultLayer]); // 切换回默认图层
+        this.type = 'Satellite';
+      } else {
+        console.log(222222)
+        this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层
+        this.type = 'default';
+      }
+    },
+    setFitView() {
+      this.map.setFitView(null, false, [150, 60, 100, 60]);
+    },
+    initAMap() {
+      AMapLoader.load({
+        key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      }).then((AMap) => {
+        this.map = new AMap.Map("container", {
+          // 设置地图容器id
+          viewMode: "3D", // 是否为3D地图模式
+          zoom: 13, // 初始化地图级别
+          center: [this.lon, this.lat], //初始化地图中心点位置
         });
-        content += `</tbody>
-      </table></div>`;
-        function formatVehicleStatus(status) {
-          switch (status) {
-            case '7':
-              return '未绑定';
-            case '0':
-              return '仓库中';
-            case '1':
-              return '待骑行';
-            case '2':
-              return '预约中';
-            case '3':
-              return '骑行中';
-            case '4':
-              return '临时停车';
-            case '8':
-              return '禁用';
-            case '9':
-              return '废弃';
-            default:
-              return '未知状态';
+        // 创建信息窗体
+        this.infoWindow = new AMap.InfoWindow({
+          offset: new AMap.Pixel(0, -30)
+        });
+        //设备点标记
+        console.log("this.areaId=============" + this.areaId)
+        this.deviceMarker(this.areaId);
+        //运营区边界
+        this.areaList.forEach(area => {
+          this.addArea(JSON.parse(area.boundaryStr) || []);
+        });
+        //停车区
+        this.parkingList.forEach(parking => {
+          this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude);
+          this.addMarker2(parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", parking.parkingName, "#1890ff");
+        });
+        //禁停区
+        this.noParkingList.forEach(noparking => {
+          this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
+          this.addMarker2(noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", noparking.parkingName, "#ff4444");
+        });
+        //禁行区
+        this.noridingList.forEach(noriding => {
+          this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
+          this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
+        });
+        // setTimeout(() => {
+        //   this.setFitView();
+        // }, 2000);
+      }).catch((e) => {
+        console.log(e);
+      });
+    },
+    // 刷新点标记
+    freshMarker(points) {
+      let that = this;
+
+      console.log("刷新点标记====", points)
+
+      // 检查 points 数据格式
+      if (!Array.isArray(points)) {
+        console.error("Points data is not an array");
+        return;
+      }
+      console.log("this.cluster=======", this.cluster)
+
+      // 聚合对象存在，则修改数据
+      if (this.cluster) {
+        try {
+          this.cluster.setData(points);
+        } catch (error) {
+          console.error("Error setting cluster data: ", error);
+        }
+      } else {
+        // 插件未加载的情况
+        this.map.plugin(["AMap.MarkerCluster"], () => {
+          that.cluster = new AMap.MarkerCluster(
+            this.map, //地图实例
+            points, //海量点数据，数据中需包含经纬度信息字段 lnglat
+            {
+              styles: this.getStyles(),
+              renderMarker: this.getRenderMarker, //上述步骤的自定义非聚合点样式
+            }
+          );
+          // 检查 cluster 对象是否正确初始化
+          if (that.cluster) {
+            console.log("Cluster 初始化成功");
+            that.cluster.on('click', that.onClickCluster);
+          } else {
+            console.error("初始化失败 cluster");
           }
+        });
+      }
+    },
+    // 点击聚合对象事件
+    onClickCluster(e) {
+      console.log("点击聚合点====", e)
+      this.onDeviceList = e.clusterData.map(item => item);
+      // 如果数量 > 1，则打开列表页
+      if (this.onDeviceList.length > 1) {
+        console.log("打开列表====", this.onDeviceList)
+        let content = this.generateInfoContent(this.onDeviceList);
+        this.infoWindow.setContent(content);
+        this.infoWindow.open(this.map, e.lnglat);
+      }
+    },
+    generateInfoContent(data) {
+      let content = `<div style="max-hight: 500px; overflow-y: auto;">
+    <table class="info-table">
+      <thead>
+        <tr>
+          <th>SN</th>
+          <th>车牌号</th>
+          <th>状态</th>
+          <th>操作</th>
+          <th>SN</th>
+          <th>车牌号</th>
+          <th>状态</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>`;
+
+      for (let i = 0; i < data.length; i += 2) {
+        content += `<tr>`;
+        content += generateRowContent(data[i]);
+        if (i + 1 < data.length) {
+          content += generateRowContent(data[i + 1]);
+        } else {
+          content += `<td colspan="4"></td>`;
         }
-        return content;
-      },
-      handleInfoWindowClick(event) {
-        console.log("点击详情按钮====",event)
-        const button = event.target.closest('.detail-btn');
-        if (button) {
-          const deviceId = button.getAttribute('data-device-id');
-          this.onClickMarker(deviceId);
+        content += `</tr>`;
+      }
+
+      content += `</tbody>
+    </table></div>`;
+
+      function generateRowContent(item) {
+        return `<td>${item.sn}</td>
+        <td>${item.vehicleNum}</td>
+        <td>${formatVehicleStatus(item.status)}</td>
+        <td><button class="detail-btn" data-device-id="${item.deviceId}">详情</button></td>`;
+      }
+
+      function formatVehicleStatus(status) {
+        switch (status) {
+          case '7':
+            return '未绑定';
+          case '0':
+            return '仓库中';
+          case '1':
+            return '待骑行';
+          case '2':
+            return '预约中';
+          case '3':
+            return '骑行中';
+          case '4':
+            return '临时停车';
+          case '8':
+            return '禁用';
+          case '9':
+            return '废弃';
+          default:
+            return '未知状态';
         }
-      },
-      // 自定义非聚合点样式
-      getRenderMarker(context) {
-        let device = context.data[0];
-        let content = `
+      }
+
+      return content;
+    },
+    handleInfoWindowClick(event) {
+      console.log("点击详情按钮====", event)
+      
+      const button = event.target.closest('.detail-btn');
+      if (button) {
+        const deviceId = button.getAttribute('data-device-id');
+        this.onClickMarker(deviceId);
+      }
+    },
+    // 自定义非聚合点样式
+    getRenderMarker(context) {
+      let device = context.data[0];
+      let content = `
             <div class="apiary-marker">
                 <div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div>
-                <image class="apiary-marker-img" src='${formarStatus(device.status,device.onlineStatus)}'/>
+                <image class="apiary-marker-img" src='${formarStatus(device.status, device.onlineStatus)}'/>
             </div>
       `
-        context.marker.setContent(content);
-        context.marker.on("click", () => this.onClickMarker(device.deviceId));
-      },
-      // 点击非聚合点事件
-      onClickMarker(deviceId) {
-        console.log("点击非聚合点====",deviceId)
-        getDevice(deviceId).then(response => {
-          this.open2 = true;
-          this.form = response.data;
-          this.showPlaceSearchMap = true;
-          this.key++;
-        });
-      },
-      openDetail(deviceId) {
-        console.log("点击非聚合点====",deviceId)
-        getDevice(deviceId).then(response => {
-          this.open2 = true;
-          this.form = response.data;
-          this.showPlaceSearchMap = true;
-          this.key++;
-        });
-      },
-      getStyles() {
-        return [
-          {
-            //聚合量在1-10时，聚合点的样式
-            url: "//a.amap.com/jsapi_demos/static/images/blue.png", //图标显示图片的地址
-            size: new AMap.Size(32, 32), //图标显示图片的大小
-            offset: new AMap.Pixel(-16, -16), //图标定位在地图上的位置相对于图标左上角的偏移值
-            textColor: "#fff", //文字的颜色
-          },
-          {
-            //聚合量在11-100时，聚合点的样式
-            url: "//a.amap.com/jsapi_demos/static/images/green.png",
-            size: new AMap.Size(32, 32),
-            offset: new AMap.Pixel(-16, -16),
-            textColor: "#fff",
-          },
-          {
-            //聚合量在101-1000时，聚合点的样式
-            url: "//a.amap.com/jsapi_demos/static/images/orange.png",
-            size: new AMap.Size(36, 36),
-            offset: new AMap.Pixel(-18, -18),
-            textColor: "#fff"
-          },
-          {
-            //聚合量在1001-10000时，聚合点的样式
-            url: "//a.amap.com/jsapi_demos/static/images/red.png",
-            size: new AMap.Size(48, 48),
-            offset: new AMap.Pixel(-24, -24),
-            textColor: "#fff"
-          },
-          {
-            //聚合量在10001-100000时，聚合点的样式
-            url: "//a.amap.com/jsapi_demos/static/images/red.png",
-            size: new AMap.Size(48, 48),
-            offset: new AMap.Pixel(-24, -24),
-            textColor: "#fff"
-          },
-        ]
-      },
-      addMarker2(parking, icon,title,color) {
-        let marker = new AMap.Marker({
-          map: this.map,
-          icon: new AMap.Icon({
-            image: icon,
-            size: new AMap.Size(25, 36), // 设置图标的宽高
-            imageSize: new AMap.Size(25, 36) // 设置图标的实际显示尺寸
-          }),
-          position: [parking.longitude, parking.latitude],
-          offset: new AMap.Pixel(-12.5, -36)
-        });
+      context.marker.setContent(content);
+      context.marker.on("click", () => this.onClickMarker(device.deviceId));
+    },
+    // 点击非聚合点事件
+    onClickMarker(deviceId) {
+      console.log("点击非聚合点====", deviceId)
+      getDevice(deviceId).then(response => {
+        this.open2 = true;
+        this.form = response.data;
+        this.showPlaceSearchMap = true;
+        this.key++;
+      });
+    },
+    openDetail(deviceId) {
+      console.log("点击非聚合点====", deviceId)
+      getDevice(deviceId).then(response => {
+        this.open2 = true;
+        this.form = response.data;
+        this.showPlaceSearchMap = true;
+        this.key++;
+      });
+    },
+    getStyles() {
+      return [
+        {
+          //聚合量在1-10时，聚合点的样式
+          url: "//a.amap.com/jsapi_demos/static/images/blue.png", //图标显示图片的地址
+          size: new AMap.Size(32, 32), //图标显示图片的大小
+          offset: new AMap.Pixel(-16, -16), //图标定位在地图上的位置相对于图标左上角的偏移值
+          textColor: "#fff", //文字的颜色
+        },
+        {
+          //聚合量在11-100时，聚合点的样式
+          url: "//a.amap.com/jsapi_demos/static/images/green.png",
+          size: new AMap.Size(32, 32),
+          offset: new AMap.Pixel(-16, -16),
+          textColor: "#fff",
+        },
+        {
+          //聚合量在101-1000时，聚合点的样式
+          url: "//a.amap.com/jsapi_demos/static/images/orange.png",
+          size: new AMap.Size(36, 36),
+          offset: new AMap.Pixel(-18, -18),
+          textColor: "#fff"
+        },
+        {
+          //聚合量在1001-10000时，聚合点的样式
+          url: "//a.amap.com/jsapi_demos/static/images/red.png",
+          size: new AMap.Size(48, 48),
+          offset: new AMap.Pixel(-24, -24),
+          textColor: "#fff"
+        },
+        {
+          //聚合量在10001-100000时，聚合点的样式
+          url: "//a.amap.com/jsapi_demos/static/images/red.png",
+          size: new AMap.Size(48, 48),
+          offset: new AMap.Pixel(-24, -24),
+          textColor: "#fff"
+        },
+      ]
+    },
+    addMarker2(parking, icon, title, color) {
+      let marker = new AMap.Marker({
+        map: this.map,
+        icon: new AMap.Icon({
+          image: icon,
+          size: new AMap.Size(25, 36), // 设置图标的宽高
+          imageSize: new AMap.Size(25, 36) // 设置图标的实际显示尺寸
+        }),
+        position: [parking.longitude, parking.latitude],
+        offset: new AMap.Pixel(-12.5, -36)
+      });
 
-        this.markers.push(marker);
+      this.markers.push(marker);
 
-        // console.log("title============="+title)
-        // 创建一个 Text 实例来显示标题
-        let text = new AMap.Text({
-          text: title,
-          anchor: 'center', // 设置文本的锚点
-          position: [parking.longitude, parking.latitude],
-          offset: new AMap.Pixel(0, -50),
-          style: {
-            'background-color': color, // 背景颜色为蓝色
-            'border': 'none', // 边框颜色与背景一致
-            'border-radius': '5px', // 圆角 5px
-            'color': 'white', // 文字颜色为白色
-            'font-size': '12px', // 字体大小
+      // console.log("title============="+title)
+      // 创建一个 Text 实例来显示标题
+      let text = new AMap.Text({
+        text: title,
+        anchor: 'center', // 设置文本的锚点
+        position: [parking.longitude, parking.latitude],
+        offset: new AMap.Pixel(0, -50),
+        style: {
+          'background-color': color, // 背景颜色为蓝色
+          'border': 'none', // 边框颜色与背景一致
+          'border-radius': '5px', // 圆角 5px
+          'color': 'white', // 文字颜色为白色
+          'font-size': '12px', // 字体大小
+        }
+      });
+
+      // 将文本标签添加到地图实例
+      this.map.add(text);
+      // console.log("text=============",text)
+      this.labels.push(text)
+    },
+    deviceMarker(areaId) {
+      this.data = [];
+      listDevice({ pageNum: 1, pageSize: 999, areaId: areaId }).then(response => {
+        this.deviceList = response.rows;
+        this.deviceList.forEach(device => {
+          // 检查经纬度是否为空且为有效数字
+          if (device.longitude !== null && device.latitude !== null &&
+            !isNaN(device.longitude) && !isNaN(device.latitude)) {
+            this.data.push({
+              lnglat: [device.longitude, device.latitude],
+              status: device.status,
+              onlineStatus: device.onlineStatus,
+              sn: device.sn,
+              vehicleNum: device.vehicleNum,
+              deviceId: device.deviceId
+            });
+            // this.addMarker(device.longitude, device.latitude, device.status, device.onlineStatus,device.sn);
+          } else {
+            console.warn(`无效的经纬度值: 经度=${device.longitude}, 纬度=${device.latitude}`);
           }
         });
-
-        // 将文本标签添加到地图实例
-        this.map.add(text);
-        // console.log("text=============",text)
-        this.labels.push(text)
-      },
-      deviceMarker(areaId){
-        this.data = [];
-        listDevice({pageNum: 1,pageSize: 999,areaId:areaId}).then(response => {
-          this.deviceList = response.rows;
-          this.deviceList.forEach(device => {
-            // 检查经纬度是否为空且为有效数字
-            if (device.longitude !== null && device.latitude !== null &&
-              !isNaN(device.longitude) && !isNaN(device.latitude)) {
-              this.data.push({
-                lnglat: [device.longitude, device.latitude],
-                status: device.status,
-                onlineStatus: device.onlineStatus,
-                sn: device.sn,
-                vehicleNum: device.vehicleNum,
-                deviceId: device.deviceId
-              });
-              // this.addMarker(device.longitude, device.latitude, device.status, device.onlineStatus,device.sn);
-            } else {
-              console.warn(`无效的经纬度值: 经度=${device.longitude}, 纬度=${device.latitude}`);
-            }
-          });
-          // 将所有标记添加到聚合器中
-          this.freshMarker(this.data);
-        }).catch(error => {
-          console.error('获取设备列表失败:', error);
-        });
-      },
-      addMarker(lng, lat, status, onlineStatus,title) {
-
-
-
-      },
-
-      //添加运营区边界
-      addArea(data) {
-        let polygon = new AMap.Polygon({
-          path: data,
-          fillColor: '#ccebc5',
-          strokeOpacity: 1,
-          fillOpacity: 0.5,
-          strokeColor: '#2b8cbe',
-          strokeWeight: 1,
-          strokeStyle: 'dashed',
-          strokeDasharray: [5, 5],
-        });
-        // polygon.on('mouseover', () => {
-        //   polygon.setOptions({
-        //     fillOpacity: 0.7,
-        //     fillColor: '#7bccc4'
-        //   })
-        // })
-        // polygon.on('mouseout', () => {
-        //   polygon.setOptions({
-        //     fillOpacity: 0.5,
-        //     fillColor: '#ccebc5'
-        //   })
-        // })
-        this.map.add(polygon);
-      },
-      addParking(data,title,lon,lat) {
-        let polygon = new AMap.Polygon({
-          path: data,
-          fillColor: '#ccebc5',
-          strokeOpacity: 1,
-          fillOpacity: 0.5,
-          strokeColor: '#3b7ed9',  // 修改边界颜色为红色
-          strokeWeight: 2,         // 加粗边界
-          strokeStyle: 'solid',
-          strokeDasharray: [5, 5],
-        });
-        polygon.on('mouseover', () => {
-          polygon.setOptions({
-            fillOpacity: 0.7,
-            fillColor: '#71b7cc'  // 鼠标悬浮时填充颜色为红色
-          });
-        });
-        polygon.on('mouseout', () => {
-          polygon.setOptions({
-            fillOpacity: 0.5,
-            fillColor: '#a7c1d0'  // 鼠标移出时恢复填充颜色
-          });
-        });
-        this.map.add(polygon);
-      },
-      addNoParking(data) {
-        let polygon = new AMap.Polygon({
-          path: data,
-          fillColor: '#ccebc5',
-          strokeOpacity: 1,
-          fillOpacity: 0.5,
-          strokeColor: '#ff0000',  // 修改边界颜色为红色
-          strokeWeight: 2,         // 加粗边界
-          strokeStyle: 'solid',
-          strokeDasharray: [5, 5],
-        });
-        polygon.on('mouseover', () => {
-          polygon.setOptions({
-            fillOpacity: 0.7,
-            fillColor: '#ff0000'  // 鼠标悬浮时填充颜色为红色
-          });
-        });
-        polygon.on('mouseout', () => {
-          polygon.setOptions({
-            fillOpacity: 0.5,
-            fillColor: '#cc7b7b'  // 鼠标移出时恢复填充颜色
-          });
-        });
-        this.map.add(polygon);
-      },
-      addNoriding(data,title,lon,lat) {
-        let polygon = new AMap.Polygon({
-          path: data,
-          fillColor: '#ccebc5',
-          strokeOpacity: 1,
-          fillOpacity: 0.5,
-          strokeColor: '#ffcc00',  // 修改边界颜色为红色
-          strokeWeight: 2,         // 加粗边界
-          strokeStyle: 'solid',
-          strokeDasharray: [5, 5],
-        });
-        polygon.on('mouseover', () => {
-          polygon.setOptions({
-            fillOpacity: 0.7,
-            fillColor: '#FFEBA4FF'
-          });
-        });
-        polygon.on('mouseout', () => {
-          polygon.setOptions({
-            fillOpacity: 0.5,
-            fillColor: '#ffeba4'
-          });
-        });
-        this.map.add(polygon);
-      }
+        // 将所有标记添加到聚合器中
+        this.freshMarker(this.data);
+      }).catch(error => {
+        console.error('获取设备列表失败:', error);
+      });
     },
-  };
+    addMarker(lng, lat, status, onlineStatus, title) {
+
+
+
+    },
+
+    //添加运营区边界
+    addArea(data) {
+      let polygon = new AMap.Polygon({
+        path: data,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.5,
+        strokeColor: '#2b8cbe',
+        strokeWeight: 1,
+        strokeStyle: 'dashed',
+        strokeDasharray: [5, 5],
+      });
+      // polygon.on('mouseover', () => {
+      //   polygon.setOptions({
+      //     fillOpacity: 0.7,
+      //     fillColor: '#7bccc4'
+      //   })
+      // })
+      // polygon.on('mouseout', () => {
+      //   polygon.setOptions({
+      //     fillOpacity: 0.5,
+      //     fillColor: '#ccebc5'
+      //   })
+      // })
+      this.map.add(polygon);
+    },
+    addParking(data, title, lon, lat) {
+      let polygon = new AMap.Polygon({
+        path: data,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.5,
+        strokeColor: '#3b7ed9',  // 修改边界颜色为红色
+        strokeWeight: 2,         // 加粗边界
+        strokeStyle: 'solid',
+        strokeDasharray: [5, 5],
+      });
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.7,
+          fillColor: '#71b7cc'  // 鼠标悬浮时填充颜色为红色
+        });
+      });
+      polygon.on('mouseout', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#a7c1d0'  // 鼠标移出时恢复填充颜色
+        });
+      });
+      this.map.add(polygon);
+    },
+    addNoParking(data) {
+      let polygon = new AMap.Polygon({
+        path: data,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.5,
+        strokeColor: '#ff0000',  // 修改边界颜色为红色
+        strokeWeight: 2,         // 加粗边界
+        strokeStyle: 'solid',
+        strokeDasharray: [5, 5],
+      });
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.7,
+          fillColor: '#ff0000'  // 鼠标悬浮时填充颜色为红色
+        });
+      });
+      polygon.on('mouseout', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#cc7b7b'  // 鼠标移出时恢复填充颜色
+        });
+      });
+      this.map.add(polygon);
+    },
+    addNoriding(data, title, lon, lat) {
+      let polygon = new AMap.Polygon({
+        path: data,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.5,
+        strokeColor: '#ffcc00',  // 修改边界颜色为红色
+        strokeWeight: 2,         // 加粗边界
+        strokeStyle: 'solid',
+        strokeDasharray: [5, 5],
+      });
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.7,
+          fillColor: '#FFEBA4FF'
+        });
+      });
+      polygon.on('mouseout', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#ffeba4'
+        });
+      });
+      this.map.add(polygon);
+    }
+  },
+};
 </script>
-<style lang="scss"  scoped>
-  #container {
-    width: 100%;
-    height: 850px;
-  }
-  .container {
-    position: relative;
-    border: 1px solid rgb(204, 204, 204);
+<style lang="scss" scoped>
+#container {
+  width: 100%;
+  height: 850px;
+}
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+}
 
-    .input-card {
-      position: absolute;
-      bottom: 15px;
-      right: 15px;
-    }
-  }
-  .tips{
-    display: flex;
-    flex-direction: column;
+.info-table th,
+.info-table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+.info-table thead {
+  background-color: #f4f4f4;
+}
+
+.info-table tbody tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.info-table tbody tr:hover {
+  background-color: #f1f1f1;
+}
+
+/* Scrollbar styles for WebKit browsers (Chrome, Safari) */
+.info-table::-webkit-scrollbar {
+  width: 8px;
+}
+
+.info-table::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 4px;
+}
+
+.info-table::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+.container {
+  position: relative;
+  border: 1px solid rgb(204, 204, 204);
+
+  .input-card {
     position: absolute;
-    top: 15px;
-    left: 15px;
-    .tip-item {
-      display: flex;
-      align-items: center; /* 垂直居中 */
-      margin-bottom: 10px; /* 可以根据需要调整间距 */
-      color: #38383b;
-      .span-class{
-        background-color: rgba(255, 255, 255, 0.5);
-        padding: 3px 5px;
-        border-radius: 5px;
-        font-weight: 600;
-        font-size: 13px;
-      }
-    }
-    img{
-      width: 25px;
-      padding-top: 5px;
-      height: auto; /* 保持图片高度自适应 */
-      margin-right: 10px; /* 图片与文字间距，根据需要调整 */
-    }
-  }
-  .area-options{
-    display: flex;
-    flex-direction: row;
-    position: absolute;
-    top: 15px;
+    bottom: 15px;
     right: 15px;
-    span{
-      display: flex;
-      align-items: center;
-      padding-right: 10px;
-      font-size: 13px;
-      color: #535353;
-    }
   }
-</style>
-<style  lang="scss">
-  .apiary-marker{
-    position: relative;
-    top: -19px;
-    left: -19px;
+}
+
+.tips {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 15px;
+  left: 15px;
+
+  .tip-item {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    .apiary-marker-img{
-      width: 25px;
-    }
-    .apiary-marker-name{
-      background-color: #1890ff;
-      border: none;
+    /* 垂直居中 */
+    margin-bottom: 10px;
+    /* 可以根据需要调整间距 */
+    color: #38383b;
+
+    .span-class {
+      background-color: rgba(255, 255, 255, 0.5);
+      padding: 3px 5px;
       border-radius: 5px;
-      color: white;
-      font-size: 12px;
-      padding: 5px;
+      font-weight: 600;
+      font-size: 13px;
     }
   }
-  .detail-btn {
-    background: none;
-    border: none;
-    color: #007bff;
-    text-decoration: underline;
-    cursor: pointer;
-    font-size: 14px;
-    padding: 0;
-  }
 
-  .detail-btn:hover {
-    color: #0056b3;
+  img {
+    width: 25px;
+    padding-top: 5px;
+    height: auto;
+    /* 保持图片高度自适应 */
+    margin-right: 10px;
+    /* 图片与文字间距，根据需要调整 */
   }
+}
 
-  .info-table {
-    border: 1px solid #ccc;
-    border-collapse: collapse;
-    width: 100%;
-    text-align: center;
-    font-size: 14px;
+.area-options {
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  top: 15px;
+  right: 15px;
+
+  span {
+    display: flex;
+    align-items: center;
+    padding-right: 10px;
+    font-size: 13px;
+    color: #535353;
   }
-
-  .info-table th,
-  .info-table td {
-    border: 1px solid #ccc;
-    padding: 8px;
-  }
-
-  .info-table th {
-    background-color: #f4f4f4;
-  }
-
-  .amap-info-content{
-    padding: 10px 25px 10px 10px !important;
-  }
-
-  .el-dialog:not(.is-fullscreen) {
-    margin-top: 6vh !important;
-  }
-
+}
+</style>
+<style lang="scss">
+.apiary-marker {
+  position: relative;
+  top: -19px;
+  left: -19px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .apiary-marker-img {
+    width: 25px;
+  }
+
+  .apiary-marker-name {
+    background-color: #1890ff;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    font-size: 12px;
+    padding: 5px;
+  }
+}
+
+.detail-btn {
+  background: none;
+  border: none;
+  color: #007bff;
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0;
+}
+
+.detail-btn:hover {
+  color: #0056b3;
+}
+
+.info-table {
+  border: 1px solid #ccc;
+  border-collapse: collapse;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+}
+
+.info-table th,
+.info-table td {
+  border: 1px solid #ccc;
+  padding: 8px;
+}
+
+.info-table th {
+  background-color: #f4f4f4;
+}
+
+.amap-info-content {
+  padding: 10px 25px 10px 10px !important;
+}
+
+.el-dialog:not(.is-fullscreen) {
+  margin-top: 6vh !important;
+}
 </style>