111

src/components/Map/location/LocationMapss.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 }" >
         <div id="container"></div>
 
         <!-- 轨迹回放控制面板 -->
@@ -72,6 +72,10 @@
                     <span class="label">锁状态:</span>
                     <span class="value">{{ currentLockStatus }}</span>
                 </div>
+                <div class="info-item">
+                    <span class="label">电门:</span>
+                    <span class="value">{{ currentEleLock }}</span>
+                </div>
             </div>
         </div>
     </div>
@@ -162,7 +166,8 @@ export default {
             parkingPolygons: [],
             currentStatus: '',
             currentBattery: '',
-            currentLockStatus: ''
+            currentLockStatus: '',
+            currentEleLock: ''
         }
     },
 
@@ -175,7 +180,7 @@ export default {
             // 获取区域信息
             await this.getAreas()
             // 获取轨迹数据（移到最后执行）
-           
+
         } catch (error) {
             console.error('初始化失败:', error)
             this.$message.error('初始化失败')
@@ -192,14 +197,17 @@ export default {
 
     methods: {
         async getAreas() {
-            if (!this.areaId) return
+            // 如果没有 areaId,直接初始化地图
+            if (!this.areaId) {
+                this.initAMap();
+                return;
+            }
 
+            // 有 areaId 时获取区域信息
             getArea(this.areaId).then(response => {
-
                 console.log(response, 'responseresponse');
                 this.area = response.data;
 
-
                 listParking({ areaId: this.area.areaId }).then(response => {
                     let list = response.rows;
                     console.log(list, 'listlistlist');
@@ -217,6 +225,35 @@ export default {
                 });
             });
         },
+        clearTrackData() {
+            if (this.polyline) {
+                this.map.remove(this.polyline);
+            }
+            if (this.passedPolyline) {
+                this.map.remove(this.passedPolyline);
+            }
+            if (this.marker) {
+                this.map.remove(this.marker);
+            }
+            // 清除起终点标记
+            if (this.startMarker) {
+                this.map.remove(this.startMarker);
+            }
+            if (this.endMarker) {
+                this.map.remove(this.endMarker);
+            }
+
+            this.trackPoints = [];
+            this.currentProgress = 0;
+            this.currentPoint = null;
+            this.currentPointTime = '';
+            this.currentSpeed = '0.00';
+            this.location = '';
+            this.currentStatus = '';
+            this.currentBattery = '';
+            this.currentLockStatus = '';
+            this.currentEleLock = ''
+        },
         formatStatus(status) {
             const statusMap = {
                 '0': '仓库中',
@@ -256,23 +293,29 @@ export default {
         initMarker() {
             this.removeAllMarker()
             if (this.currentLng != null && this.currentLat != null) {
-                 this.updateTrackData()
-                this.addArea(JSON.parse(this.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");
-                });
+                this.updateTrackData()
+                
+                // 只有在有区域信息时才添加区域和停车场
+                if(this.area) {
+                    this.addArea(JSON.parse(this.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");
+                    });
+                }
+                
+                // 无论是否有区域信息都添加设备标记
                 this.addMarker(this.currentLng, this.currentLat, this.deviceSn, this.deviceInfo.status, this.deviceInfo.onlineStatus)
             }
         },
@@ -576,6 +619,11 @@ export default {
 
         async updateTrackData() {
             try {
+                // 停止当前播放
+                this.stopPlayback()
+                // 清除旧数据
+                this.clearTrackData()
+
                 const params = {
                     sn: this.deviceSn,
                     startTime: this.startTime,
@@ -586,23 +634,26 @@ export default {
                 if (res.code === 200) {
                     if (!res.data?.length) {
                         this.$message.warning('该时间段内无轨迹数据')
-                        this.clearTrackData()
                         return
                     }
 
-                    // 确保数据处理和绘制都执行
+                    // 处理新的轨迹数据
                     this.trackPoints = res.data.map(point => ({
                         latitude: parseFloat(point.latitude),
                         longitude: parseFloat(point.longitude),
                         time: point.at,
                         status: point.status,
-                        onlineStatus: point.onlineStatus
+                        onlineStatus: point.onlineStatus,
+                        bat: point.bat,
+                        lockStatus: point.lockStatus,
+                        q: point.q
                     }))
 
-                    // 立即绘制轨迹线和起终点标记
+                    // 绘制新的轨迹线
                     this.drawTrackLine()
-                    // 重置播放位置
-                    this.resetPlayback()
+                    // 初始化播放位置
+                    this.currentProgress = 0
+                    this.updateMapPoint(0)
                 }
             } catch (error) {
                 console.error("获取轨迹数据失败:", error)
@@ -610,6 +661,48 @@ export default {
             }
         },
 
+        clearTrackData() {
+            // 停止播放定时器
+            if (this.playbackTimer) {
+                clearInterval(this.playbackTimer)
+                this.playbackTimer = null
+            }
+
+            // 清除地图上的元素
+            if (this.polyline) {
+                this.map.remove(this.polyline)
+                this.polyline = null
+            }
+            if (this.passedPolyline) {
+                this.map.remove(this.passedPolyline)
+                this.passedPolyline = null
+            }
+            if (this.marker) {
+                this.map.remove(this.marker)
+                this.marker = null
+            }
+            if (this.startMarker) {
+                this.map.remove(this.startMarker)
+                this.startMarker = null
+            }
+            if (this.endMarker) {
+                this.map.remove(this.endMarker)
+                this.endMarker = null
+            }
+
+            // 重置数据
+            this.trackPoints = []
+            this.currentProgress = 0
+            this.currentPoint = null
+            this.currentPointTime = ''
+            this.currentSpeed = '0.00'
+            this.location = ''
+            this.currentStatus = ''
+            this.currentBattery = ''
+            this.currentLockStatus = ''
+            this.currentEleLock = ''
+            this.isPlaying = false
+        },
         processTrackData(data) {
             this.trackPoints = data.map(point => ({
                 latitude: parseFloat(point.latitude),
@@ -631,6 +724,12 @@ export default {
             if (this.polyline) {
                 this.map.remove(this.polyline)
             }
+            if (this.passedPolyline) {
+                this.map.remove(this.passedPolyline)
+            }
+            if (this.marker) {
+                this.map.remove(this.marker)
+            }
 
             // 添加轨迹线
             this.polyline = new this.AMap.Polyline({
@@ -701,6 +800,7 @@ export default {
             this.currentStatus = ''
             this.currentBattery = ''
             this.currentLockStatus = ''
+            this.currentEleLock = ''
         },
 
         updateMapPoint(index) {
@@ -710,43 +810,91 @@ export default {
             this.currentPoint = point
             this.currentPointTime = point.time
             this.location = `${point.longitude}, ${point.latitude}`
-
-            // 添加新字段的更新
+            console.log(point,'pointpointpoint');
+            // 更新状态信息
             this.currentStatus = this.formatStatus(point.status)
-            this.currentBattery = point.bta == null ? '未知' : (point.bta / 10).toFixed(1) + 'V'
+            this.currentBattery = point.bat == null ? '未知' : (point.bat / 10).toFixed(1) + 'V'
             this.currentLockStatus = point.lockStatus == '0' ? '关锁' : '开锁'
+            this.currentEleLock = point.q == null ? '未知' : (point.q == '0' ? '关锁' : '开锁')
 
+            // 计算速度
             if (index > 0) {
                 const prevPoint = this.trackPoints[index - 1]
-                const distance = this.calculateDistance(
+                // 使用 Haversine 公式计算实际距离（单位：千米）
+                const distance = this.calculateHaversineDistance(
                     prevPoint.latitude,
                     prevPoint.longitude,
                     point.latitude,
                     point.longitude
                 )
-                const timeGap = (new Date(point.time) - new Date(prevPoint.time)) / 1000
-                this.currentSpeed = timeGap > 0 ? ((distance / timeGap) * 3.6).toFixed(1) : '0.00'
+                // 计算时间差（单位：小时）
+                const timeGap = (new Date(point.time) - new Date(prevPoint.time)) / (1000 * 3600)
+                // 计算速度（公里/小时）
+                this.currentSpeed = timeGap > 0 ? (distance / timeGap).toFixed(2) : '0.00'
+            } else {
+                this.currentSpeed = '0.00'
             }
 
+            // 更新已经走过的轨迹线
             this.updatePassedPolyline(index)
-            this.updateMarkerPosition(point)
+
+            // 更新标记位置
+            if (!this.marker) {
+                this.marker = new this.AMap.Marker({
+                    position: [point.longitude, point.latitude],
+                    icon: this.getMarkerIcon(point.status, point.onlineStatus),
+                    offset: new this.AMap.Pixel(-12.5, -19.5)
+                })
+                this.map.add(this.marker)
+            } else {
+                this.marker.setPosition([point.longitude, point.latitude])
+                this.marker.setIcon(this.getMarkerIcon(point.status, point.onlineStatus))
+            }
         },
 
+        // 添加 Haversine 距离计算方法
+        calculateHaversineDistance(lat1, lon1, lat2, lon2) {
+            // 地球半径（单位：千米）
+            const R = 6371
+
+            // 将经纬度转换为弧度
+            const dLat = this.toRad(lat2 - lat1)
+            const dLon = this.toRad(lon2 - lon1)
+            const radLat1 = this.toRad(lat1)
+            const radLat2 = this.toRad(lat2)
+
+            // Haversine 公式
+            const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+                Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(radLat1) * Math.cos(radLat2)
+            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+
+            // 返回距离（单位：千米）
+            return R * c
+        },
+
+        // 角度转弧度
+        toRad(degrees) {
+            return degrees * Math.PI / 180
+        },
+
+
         updatePassedPolyline(index) {
             const passedPath = this.trackPoints
                 .slice(0, index + 1)
                 .map(p => [p.longitude, p.latitude])
 
-            if (!this.passedPolyline) {
-                this.passedPolyline = new this.AMap.Polyline({
-                    path: passedPath,
-                    strokeColor: "#AF5",
-                    strokeWeight: 6
-                })
-                this.map.add(this.passedPolyline)
-            } else {
-                this.passedPolyline.setPath(passedPath)
+            // 移除旧的已经走过的轨迹线
+            if (this.passedPolyline) {
+                this.map.remove(this.passedPolyline)
             }
+
+            // 创建新的已经走过的轨迹线
+            this.passedPolyline = new this.AMap.Polyline({
+                path: passedPath,
+                strokeColor: "#AF5",
+                strokeWeight: 6
+            })
+            this.map.add(this.passedPolyline)
         },
 
         updateMarkerPosition(point) {
@@ -770,17 +918,14 @@ export default {
         },
 
         startPlayback() {
-            if (this.playbackTimer) return
+            if (this.playbackTimer) {
+                clearInterval(this.playbackTimer)
+            }
 
             this.playbackTimer = setInterval(() => {
                 if (this.currentProgress >= this.trackPoints.length - 1) {
                     this.pausePlayback()
                     this.isPlaying = false
-                    // 添加延时，让最后一个点的位置显示片刻后再回到起点
-                    setTimeout(() => {
-                        this.currentProgress = 0
-                        this.updateMapPoint(0)
-                    }, 1000)
                     return
                 }
                 this.currentProgress++
@@ -794,12 +939,12 @@ export default {
                 this.playbackTimer = null
             }
         },
-
         stopPlayback() {
-            this.pausePlayback()
+            if (this.playbackTimer) {
+                clearInterval(this.playbackTimer)
+                this.playbackTimer = null
+            }
             this.isPlaying = false
-            this.currentProgress = 0
-            this.updateMapPoint(0) // 更新到起始点，而不是清除轨迹
         },
 
         changeSpeed(direction) {
@@ -852,13 +997,15 @@ export default {
         },
 
         onSliderChange(value) {
+            this.stopPlayback() // 停止当前播放
             this.currentProgress = value
             this.updateMapPoint(value)
         },
 
         onSliderChanging(value) {
+            // this.stopPlayback() // 停止当前播放
             this.updateMapPoint(value)
-        }
+        },
     }
 }
 </script>

src/views/system/device/device_detail.vue

@@ -44,10 +44,9 @@
             <div class="info-row">
               <div class="info-item">
                 <span class="label">电门：</span>
-                <el-tag :type="deviceInfo.powerStatus === '1' ? 'success' : 'danger'" size="small">
-                  {{ deviceInfo.powerStatus === '1' ? '开' : '关' }}
+                <el-tag :type="deviceInfo.quality === 1 ? 'success' : 'danger'" size="small">
+                  {{ deviceInfo.quality === 1 ? '开' : '关' }}
                 </el-tag>
-                <!-- <span class="value">{{ deviceInfo.quality || '-' }}</span> -->
               </div>
               <div class="info-item">
                 <span class="label">锁信号：</span>
@@ -1157,4 +1156,4 @@ export default {
     height: calc(100% - 41px); // 减去header高度
   }
 }
-</style>
+</style>

src/views/system/device/index.vue

@@ -357,17 +357,17 @@
       <!-- 代理商、运营区、车辆型号一行 -->
       <el-col :span="8" v-if="userName == 'admin'">
         <el-form-item label="代理商" prop="deptId">
-          <el-select 
-            v-model="form.deptId" 
-            clearable 
-            filterable 
-            placeholder="请选择代理商" 
+          <el-select
+            v-model="form.deptId"
+            clearable
+            filterable
+            placeholder="请选择代理商"
             @change="handleDeptChange"
             style="width: 100%">
-            <el-option 
-              v-for="item in deptOptions" 
-              :key="item.deptId" 
-              :label="item.deptName" 
+            <el-option
+              v-for="item in deptOptions"
+              :key="item.deptId"
+              :label="item.deptName"
               :value="item.deptId">
             </el-option>
           </el-select>
@@ -375,17 +375,17 @@
       </el-col>
       <el-col :span="8">
         <el-form-item label="运营区" prop="areaId">
-          <el-select 
-            v-model="form.areaId" 
-            clearable 
-            filterable 
-            placeholder="请选择运营区" 
+          <el-select
+            v-model="form.areaId"
+            clearable
+            filterable
+            placeholder="请选择运营区"
             @change="handleAreaChange"
             style="width: 100%">
-            <el-option 
-              v-for="item in areaOptions" 
-              :key="item.areaId" 
-              :label="item.areaName" 
+            <el-option
+              v-for="item in areaOptions"
+              :key="item.areaId"
+              :label="item.areaName"
               :value="item.areaId">
             </el-option>
           </el-select>
@@ -393,16 +393,16 @@
       </el-col>
       <el-col :span="8">
         <el-form-item label="车辆型号" prop="modelId">
-          <el-select 
-            v-model="form.modelId" 
-            clearable 
-            placeholder="请选择车辆型号" 
+          <el-select
+            v-model="form.modelId"
+            clearable
+            placeholder="请选择车辆型号"
             @change="handleModelChange"
             style="width: 100%">
-            <el-option 
-              v-for="item in modelOptions" 
-              :key="item.modelId" 
-              :label="item.model" 
+            <el-option
+              v-for="item in modelOptions"
+              :key="item.modelId"
+              :label="item.model"
               :value="item.modelId">
             </el-option>
           </el-select>
@@ -414,17 +414,17 @@
       <!-- 硬件版本 -->
       <el-col :span="8">
         <el-form-item label="硬件版本" prop="hardwareVersionId" v-if="hardwareVersionOptions.length > 0 && userName == 'admin'">
-          <el-select 
-            v-model="form.hardwareVersionId" 
-            clearable 
-            placeholder="请选择硬件版本" 
+          <el-select
+            v-model="form.hardwareVersionId"
+            clearable
+            placeholder="请选择硬件版本"
             :disabled="userName != 'admin'"
             @change="handleHardwareVersionChange"
             style="width: 100%">
-            <el-option 
-              v-for="item in hardwareVersionOptions" 
-              :key="item.id" 
-              :label="item.version" 
+            <el-option
+              v-for="item in hardwareVersionOptions"
+              :key="item.id"
+              :label="item.version"
               :value="item.id">
             </el-option>
           </el-select>
@@ -840,100 +840,102 @@ export default {
       }
     },
     /** 当选择代理商时调用 */
-handleDeptChange(val) {
-  if (!this.isUpdating) {
-    if (val) {
-      this.isUpdating = true;
-      selectAreaListByDeptId(val).then((response) => {
-        // 更新运营区选项
-        this.areaOptions = response.data.areaList || [];
-        this.modelOptions = response.data.modelList || [];
-        
-        // 清空现有值
-        this.form.areaId = null;
-        this.form.modelId = null;
-        
-        // 只有在有选项时才设置默认值
-        if (this.areaOptions.length > 0) {
-          this.form.areaId = this.areaOptions[0].areaId;
-        }
-        if (this.modelOptions.length > 0) {
-          this.form.modelId = this.modelOptions[0].modelId;
-        }
+    handleDeptChange(val) {
+      if (!this.isUpdating) {
+        if (val) {
+          this.isUpdating = true;
+          selectAreaListByDeptId(val).then((response) => {
+            // 更新运营区选项
+            this.areaOptions = response.data.areaList || [];
+            this.modelOptions = response.data.modelList || [];
 
-        // 如果没有选项，显示提示信息
-        if (this.areaOptions.length === 0) {
-          this.$message.warning('该代理商暂无运营区');
-        }
-        if (this.modelOptions.length === 0) {
-          this.$message.warning('该代理商暂无可用车型');
-        }
-      }).finally(() => {
-        this.isUpdating = false;
-      });
-    } else {
-      // 当代理商为空时，加载所有运营区
-      this.isUpdating = true;
-      listArea(this.queryParams2).then((response) => {
-        this.areaOptions = response.rows || [];
-        this.form.areaId = null;
-        this.form.modelId = null;
-        this.modelOptions = [];
-      }).finally(() => {
-        this.isUpdating = false;
-      });
-    }
-  }
-},
-
-/** 当选择运营区时调用 */
-handleAreaChange(val) {
-  if (!this.isUpdating) {
-    if (val) {
-      this.isUpdating = true;
-      selectDeptByAreaId(val).then((response) => {
-        // 只有在代理商为空时，才设置代理商
-        if (!this.form.deptId && response.data.sysDept) {
-          this.form.deptId = response.data.sysDept.deptId;
-          
-          // 获取该代理商下的车型列表
-          selectAreaListByDeptId(this.form.deptId).then((deptResponse) => {
-            this.modelOptions = deptResponse.data.modelList || [];
-            if (this.modelOptions.length > 0) {
-              this.form.modelId = this.modelOptions[0].modelId;
-            } else {
-              this.form.modelId = null;
-              this.$message.warning('该代理商暂无可用车型');
+            // 如果当前选中的运营区或车型不在新的选项中,清空选择
+            if (!this.areaOptions.find(area => area.areaId === this.form.areaId)) {
+              this.form.areaId = null;
             }
+            if (!this.modelOptions.find(model => model.modelId === this.form.modelId)) {
+              this.form.modelId = null;
+            }
+
+            // 如果有选项且当前未选择,则自动选择第一个
+            if (this.areaOptions.length > 0 && !this.form.areaId) {
+              this.form.areaId = this.areaOptions[0].areaId;
+            }
+            if (this.modelOptions.length > 0 && !this.form.modelId) {
+              this.form.modelId = this.modelOptions[0].modelId;
+            }
+
+          }).catch(() => {
+            this.areaOptions = [];
+            this.modelOptions = [];
+            this.form.areaId = null;
+            this.form.modelId = null;
+          }).finally(() => {
+            this.isUpdating = false;
           });
         } else {
-          // 如果已有代理商，则使用现有的车型列表
-          this.modelOptions = response.data.modelList || [];
-          if (!this.form.modelId && this.modelOptions.length > 0) {
-            this.form.modelId = this.modelOptions[0].modelId;
-          } else if (this.modelOptions.length === 0) {
+          // 当代理商为空时,加载所有运营区
+          this.isUpdating = true;
+          listArea(this.queryParams2).then((response) => {
+            this.areaOptions = response.rows || [];
+            this.form.areaId = null;
             this.form.modelId = null;
-            this.$message.warning('该运营区暂无可用车型');
-          }
+            this.modelOptions = [];
+          }).finally(() => {
+            this.isUpdating = false;
+          });
         }
-      }).finally(() => {
-        this.isUpdating = false;
-      });
-    } else {
-      // 清空车型，但保留代理商
-      this.form.modelId = null;
-      this.modelOptions = [];
-    }
-  }
-},
+      }
+    },
 
-      /** 当选择车型时调用 */
-  handleModelChange(val) {
-    // 移除车型变化时对其他字段的影响
-    if (!val) {
-      this.form.modelId = null;
-    }
-  },
+    /** 当选择运营区时调用 */
+    handleAreaChange(val) {
+      if (!this.isUpdating) {
+        if (val) {
+          this.isUpdating = true;
+          selectDeptByAreaId(val).then((response) => {
+            // 只有在代理商为空时，才设置代理商
+            if (!this.form.deptId && response.data.sysDept) {
+              this.form.deptId = response.data.sysDept.deptId;
+
+              // 获取该代理商下的车型列表
+              selectAreaListByDeptId(this.form.deptId).then((deptResponse) => {
+                this.modelOptions = deptResponse.data.modelList || [];
+                if (this.modelOptions.length > 0) {
+                  this.form.modelId = this.modelOptions[0].modelId;
+                } else {
+                  this.form.modelId = null;
+                  this.$message.warning('该代理商暂无可用车型');
+                }
+              });
+            } else {
+              // 如果已有代理商，则使用现有的车型列表
+              this.modelOptions = response.data.modelList || [];
+              if (!this.form.modelId && this.modelOptions.length > 0) {
+                this.form.modelId = this.modelOptions[0].modelId;
+              } else if (this.modelOptions.length === 0) {
+                this.form.modelId = null;
+                this.$message.warning('该运营区暂无可用车型');
+              }
+            }
+          }).finally(() => {
+            this.isUpdating = false;
+          });
+        } else {
+          // 清空车型，但保留代理商
+          this.form.modelId = null;
+          this.modelOptions = [];
+        }
+      }
+    },
+
+    /** 当选择车型时调用 */
+    handleModelChange(val) {
+      // 移除车型变化时对其他字段的影响
+      if (!val) {
+        this.form.modelId = null;
+      }
+    },
 
     // 处理硬件版本变化
     handleHardwareVersionChange(val) {
@@ -1012,8 +1014,8 @@ handleAreaChange(val) {
       // }
     },
 
-    
- 
+
+
     /** 排序触发事件 */
     handleSortChange(column, prop, order) {
       this.queryParams.orderByColumn = column.prop;
@@ -1162,16 +1164,16 @@ handleAreaChange(val) {
       if(this.queryParams2.deptId){
         selectAreaListByDeptId(this.queryParams2.deptId).then((deptResponse) => {
             this.modelOptions = deptResponse.data.modelList || [];
-            
+
           });
       }else{
         listModel(this.queryParams2).then((response) => {
-        
-        
+
+
         this.modelOptions = response.rows;
       });
       }
-      
+
     },
     // 取消按钮
     cancel() {
@@ -1215,7 +1217,7 @@ handleAreaChange(val) {
           }
         );
       }
-     
+
       listModel(this.queryParams2).then((response) => {
         this.modelOptions = response.rows;
       });
@@ -1229,14 +1231,14 @@ handleAreaChange(val) {
     this.form.modelId = null;
     this.areaOptions = [];
     this.modelOptions = [];
-    
+
     // 重新加载代理商列表
     if (this.userName === "admin") {
       listDept2({ status: "0", pageNum: 1, pageSize: 999 }).then((response) => {
         this.deptOptions = response.rows;
       });
     }
-    
+
     // 重新加载运营区列表
     listArea(this.queryParams2).then((response) => {
       this.areaOptions = response.rows;
@@ -1271,7 +1273,7 @@ handleAreaChange(val) {
     },
     /** 详情按钮 */
     handleView(row) {
-      const deviceId = row.deviceId 
+      const deviceId = row.deviceId
       this.$router.push(`/system/deviceDetail/index/${deviceId}`)
       // this.$router.push({
       //   path: '/system/deviceDetail/index',
@@ -1343,41 +1345,53 @@ handleAreaChange(val) {
 
       getDevice(deviceId).then((response) => {
         this.form = response.data;
+        this.selectHardwareVersion(response.data.hardwareVersionId);
 
-        this.selectHardwareVersion(response.data.hardwareVersionId)
-        // this.fetchData3(response.data.areaId)
-        // this.fetchData(response.data.deptId)
-        // this.open = true;
-        //     this.title = "修改设备1";
-        if (response.data.deptId) {
+        // 如果没有绑定代理商
+        if (!response.data.deptId) {
+          // 重置运营区和车型选项
+          this.modelOptions = [];
+          this.areaOptions = [];
+          
+          // 如果是管理员,加载所有运营区
+          if (this.userName === 'admin') {
+            listArea(this.queryParams2).then((response) => {
+              this.areaOptions = response.rows || [];
+            });
+          }
+          
+          this.open = true;
+          this.title = "修改设备";
+          this.isUpdating = false;
+        } else {
+          // 有绑定代理商,获取对应的运营区和车型
           selectAreaListByDeptId(response.data.deptId).then((res) => {
-            // 方案1: 使用Vue.set确保响应式更新
-            setTimeout(() => {
-              console.log('=调用了11');
-              
-              this.$set(this, 'modelOptions', []);
-            this.$set(this, 'areaOptions', []);
-            this.$set(this, 'modelOptions', res.data.modelList);
-            this.$set(this, 'areaOptions', res.data.areaList);
-            this.$forceUpdate()
+            this.modelOptions = res.data.modelList || [];
+            this.areaOptions = res.data.areaList || [];
+            
+            // 如果当前选中的运营区或车型不在新的选项中,清空选择
+            if (this.areaOptions.length > 0 && !this.areaOptions.find(area => area.areaId === this.form.areaId)) {
+              this.form.areaId = null;
+            }
+            if (this.modelOptions.length > 0 && !this.modelOptions.find(model => model.modelId === this.form.modelId)) {
+              this.form.modelId = null;
+            }
+            
+            this.open = true;
+            this.title = "修改设备";
+          }).catch(() => {
+            // 获取失败时也显示弹窗,但清空选项
+            this.modelOptions = [];
+            this.areaOptions = [];
             this.open = true;
             this.title = "修改设备";
-            }, 800);
-           
-
-            // 方案2: 使用nextTick确保DOM更新
-            // this.$nextTick(() => {
-            //   this.modelOptions = res.data.modelList;
-            //   this.areaOptions = res.data.areaList;
-            // },600);
-            
-            // 不再需要setTimeout和$forceUpdate
           }).finally(() => {
             this.isUpdating = false;
           });
-        } else {
-          this.isUpdating = false;
         }
+      }).catch(() => {
+        this.isUpdating = false;
+        this.$modal.msgError("获取设备信息失败");
       });
     },
     handleListing(row) {