11

.env.development

@@ -5,8 +5,8 @@ VUE_APP_TITLE = 共享电动车管理系统
 ENV = 'development'
 
 # 共享电动车管理系统/开发环境
-# VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
+VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
-VUE_APP_BASE_API = 'http://192.168.2.75:8088'
+# VUE_APP_BASE_API = 'http://192.168.2.75:8088'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/api/system/device.js

@@ -139,4 +139,11 @@ export function getDeviceBySn(sn){
     method: 'get'
   })
 }
+// 根据运营区id查询设备
+export function getDeviceLists(areaId){
+  return request({
+    url: '/app/allVehicleByArea?areaId='+areaId,
+    method: 'get'
+  })
+}
 

src/components/Map/location/LocationMap.vue

@@ -13,6 +13,7 @@ import { debounce } from '@/utils'
 import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
 import { getArea } from '@/api/system/area'
 import { listParking } from '@/api/system/parking'
+import { getDeviceBySn } from '@/api/system/device'
 export default {
   name: "LocationMap",
   components: { AreaTextSelect },
@@ -45,10 +46,7 @@ export default {
       type: String,
       default: ''
     },
-      areaId: {
+     
-      type: Number,
-      default: ''
-    },
   },
   data() {
     return {
@@ -68,11 +66,18 @@ export default {
       noParkingList:[],
       noridingList:[],
       labels: [],
+      areaId:''
     }
   },
   mounted() {
     // this.initAMap();
-     this.getAreas(this.areaId)
+    //  this.getAreas(this.areaId)
+    
+    getDeviceBySn(this.deviceSn).then(response => {
+        this.areaId=response.data.areaId
+        console.log(response,'responseresponse');
+        this.getAreas(this.areaId)
+      });
   },
   beforeDestroy() {
     console.log("轨迹=====组件将被销毁");

src/views/system/area/areaSet.vue

@@ -37,6 +37,7 @@
                   placeholder="请选择运营商"
                 />
               </el-form-item>
+              <!-- <div class="text" style="color:red;">该运营商没设置收费方式，将无法保存数据，请返回运营管理设置收费方式</div> -->
             </el-col>
             <el-col :span="12">
               <el-form-item

src/views/system/area/index.vue

@@ -28,8 +28,8 @@
           </router-link>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="editArea2"
+        <!-- <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="editArea2"
-          v-hasPermi="['system:area:edit']">修改</el-button>
+          v-hasPermi="['system:area:edit']">修改</el-button> -->
         <!-- <el-button
           type="success"
           plain

src/views/system/map/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div id="container" @click="handleInfoWindowClick"></div>
+    <div id="container" @click="handleInfoWindowClick" v-if="showmap"></div>
     <div class="tips">
       <div class="tip-item">
         <img :src="icons.blue" alt="蓝色">
@@ -102,7 +102,7 @@
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
 import globalConfig from "@/utils/config/globalConfig";
-import { getDevice, listDevice } from '@/api/system/device'
+import { getDevice, listDevice,getDeviceLists} 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'
@@ -166,7 +166,7 @@ export default {
       open2: false,
       // 表单参数
       form: {},
-      areaId: null,
+      areaId: 14,
       areaOptions: [],
       infoWindow: null,
       // 设备表格数据
@@ -175,7 +175,8 @@ export default {
       parkingList: [],
       noParkingList: [],
       noridingList: [],
-      type: null
+      type: null,
+      showmap:true,
     }
   },
   mounted() {
@@ -188,10 +189,25 @@ export default {
     this.map?.destroy();
   },
   methods: {
-    handleAreaChange(newAreaId) {
+    async  handleAreaChange(newAreaId) {
-      console.log('newAreaId:', newAreaId);
+        console.log('newAreaId:', newAreaId);
-      this.areaId = newAreaId;
+    
-      this.getAreaList(this.areaId);
+    // 更新 areaId 并清空之前的列表数据
+    this.areaId = newAreaId;
+    this.onDeviceList = [];
+    this.parkingList = [];
+    this.noParkingList = [];
+    this.noridingList = [];
+    this.deviceList=[]
+    // 销毁当前地图实例
+    // if (this.map) {
+    //   this.map.destroy();
+    //   this.map = null;
+    // }
+    this.showmap=false
+    // 重新获取区域列表并初始化地图
+    await this.getAreaList(this.areaId);
+   
     },
     getAreaOptions() {
       getAreaOptionselect().then(response => {
@@ -257,10 +273,10 @@ export default {
         if (this.areaList.length > 0) { // 确保数组不为空
           const firstArea = this.areaList[0]; // 获取第一个元素
           this.area = firstArea;
-          console.log('第一个区域的信息:', firstArea);
+          // console.log('第一个区域的信息:', firstArea);
           this.lon = firstArea.longitude;
           this.lat = firstArea.latitude;
-          console.log("area=============" + JSON.stringify(this.area))
+          // console.log("area=============" + JSON.stringify(this.area))
           listParking({ areaId: this.area.areaId }).then(response => {
             let list = response.rows;
             list.forEach(item => {
@@ -272,10 +288,14 @@ export default {
                 this.noridingList.push(item);
               }
             });
-            console.log("parkingList=============" + JSON.stringify(this.parkingList));
+            // console.log("parkingList=============" + JSON.stringify(this.parkingList));
-            console.log("noParkingList=============" + JSON.stringify(this.noParkingList));
+            // console.log("noParkingList=============" + JSON.stringify(this.noParkingList));
-            console.log("noriding=============" + JSON.stringify(this.noridingList));
+            // console.log("noriding=============" + JSON.stringify(this.noridingList));
-            this.initAMap();
+             setTimeout(() => {
+              this.showmap=true
+              this.initAMap();
+            }, 300);
+            
           });
         } else {
           console.log('区域列表为空');
@@ -308,6 +328,7 @@ export default {
       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
@@ -366,6 +387,7 @@ export default {
 
       // 聚合对象存在，则修改数据
       if (this.cluster) {
+        console.log('加载了');
         try {
           this.cluster.setData(points);
         } catch (error) {
@@ -583,8 +605,9 @@ export default {
     },
     deviceMarker(areaId) {
       this.data = [];
-      listDevice({ pageNum: 1, pageSize: 999, areaId: areaId }).then(response => {
+      console.log(areaId,'areaIdareaId');
-        this.deviceList = response.rows;
+      getDeviceLists(areaId).then(response => {
+        this.deviceList = response.data;
         this.deviceList.forEach(device => {
           // 检查经纬度是否为空且为有效数字
           if (device.longitude !== null && device.latitude !== null &&
@@ -597,7 +620,7 @@ export default {
               vehicleNum: device.vehicleNum,
               deviceId: device.deviceId
             });
-            // this.addMarker(device.longitude, device.latitude, device.status, device.onlineStatus,device.sn);
+            this.addMarker(device.longitude, device.latitude, device.status, device.onlineStatus,device.sn);
           } else {
             console.warn(`无效的经纬度值: 经度=${device.longitude}, 纬度=${device.latitude}`);
           }