范围

.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.46:8088'
+# VUE_APP_BASE_API = 'http://192.168.2.46:8088'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/components/Map/location/LocationMap.vue

@@ -11,7 +11,8 @@ import AMapLoader from "@amap/amap-jsapi-loader";
 import globalConfig from '@/utils/config/globalConfig'
 import { debounce } from '@/utils'
 import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
-
+import { getArea } from '@/api/system/area'
+import { listParking } from '@/api/system/parking'
 export default {
   name: "LocationMap",
   components: { AreaTextSelect },
@@ -43,7 +44,11 @@ export default {
     deviceSn: {
       type: String,
       default: ''
-    }
+    },
+      areaId: {
+      type: Number,
+      default: ''
+    },
   },
   data() {
     return {
@@ -55,13 +60,19 @@ export default {
       keyword: null,
       markers: [],
       area: {
-        province: '福建省',
+        // province: '福建省',
-        city: '宁德市',
+        // city: '宁德市',
-      }
+      },
+       area:{},
+      parkingList:[],
+      noParkingList:[],
+      noridingList:[],
+      labels: [],
     }
   },
   mounted() {
-    this.initAMap();
+    // this.initAMap();
+     this.getAreas(this.areaId)
   },
   beforeDestroy() {
     console.log("轨迹=====组件将被销毁");
@@ -86,6 +97,30 @@ export default {
     //     this.doPlaceSearch(city + '人民政府');
     //   }
     // },
+     async getAreas(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');
+            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);
+              }
+            });
+          
+            this.initAMap();
+          });
+      });
+    },
     initAMap() {
       AMapLoader.load({
         key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -93,7 +128,7 @@ export default {
         plugins: ["AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       }).then((AMap) => {
         this.AMap = AMap;
-        this.map = new AMap.Map("container", {
+        this.map = new AMap.Map("container", { 
           // 设置地图容器id
           viewMode: "3D", // 是否为3D地图模式
           zoom: 16, // 初始化地图级别
@@ -106,7 +141,22 @@ export default {
 
         // 逆地理编码
         // this.loadGeoCoder();
-
+         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.initMarker();
 
@@ -137,6 +187,41 @@ export default {
         // })
       }
     },
+    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);
+
+      // 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)
+    },
     addMarker: function(lng, lat, title, status, onlineStatus) {
       //创建一个 Marker 实例：
       console.log('title===========' + title)
@@ -152,9 +237,11 @@ export default {
         title: title,
         offset: new AMap.Pixel(-12.5, -35)
       })
+
       //将创建的点标记添加到已有的地图实例：
       this.map.add(marker)
       this.markers.push(marker)
+      console.log();
 
       // 创建一个 Text 实例来显示标题
       let text = new AMap.Text({
@@ -174,6 +261,107 @@ export default {
 
       // 将文本标签添加到地图实例
       this.map.add(text)
+    },
+     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);
+    },
+  
+    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);
     },
     formarStatus(status,onlineStatus){
       if(onlineStatus == "0"){

src/views/statistics/index.vue

@@ -2,10 +2,26 @@
   <div class="page">
     <div class="area-options">
       <span style="margin-right: .625rem;">切换运营区</span>
-      <el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange" size="medium">
+     <el-select
-        <el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
+    v-model="areaId"
-          :value="item.areaId"></el-option>
+    placeholder="请选择运营区"
-      </el-select>
+    filterable
+    clearable
+    @change="handleAreaChange"
+    size="medium"
+  >
+    <el-option
+      v-for="item in areaOptions"
+      :key="item.areaId"
+      :label="item.areaName + ' - ' + item.deptName" 
+      :value="item.areaId"
+    >
+      <div class="option-content" style=" display: flex;justify-content: space-between;"> 
+        <span class="area-name">{{ item.areaName }}</span>
+        <span class="dept-name">{{ item.deptName }}</span>
+      </div>
+    </el-option>
+  </el-select>
     </div>
     <div class="top_box">
       <div class="tops_left">
@@ -400,6 +416,25 @@ export default {
   // height: 100vh;
   display: flex;
   flex-direction: column;
+.option-content {
+  display: flex;
+  flex-wrap: nowrap;
+  // justify-content: space-between;
+  // align-items: center;
+  width: 100%;
+  .area-name {
+  // width: 10rem !important;
+  // flex-grow: 1;
+  // text-align: left;
+}
+
+.dept-name {
+  margin-left: 20px;
+  // flex-grow: 1;
+  // text-align: right;
+}
+}
+
 
   .area-options {
     width: 100%;

src/views/system/device/index.vue

@@ -523,7 +523,9 @@
               :status="form.status"
               :online-status="form.onlineStatus"
               :device-sn="form.sn"
+              :areaId="form.areaId"
             />
+             
           </el-col>
         </el-row>
         <el-row>
@@ -558,7 +560,7 @@
     updateDevice,
     handleLock,
     handleUnlocking,
-    ring,
+    ring, 
     oneClickOnline,
     oneClickOffline,
     reboot,
@@ -1065,7 +1067,9 @@ export default {
     /** 详情按钮 */
     handleView(row) {
       this.open2 = true;
+      
       this.form = row;
+      console.log(this.form,'this.formthis.formthis.form');
       this.showPlaceSearchMap = true;
       this.key++;
       this.orderRecordKey += 1;