订单详情修改

src/App.vue

@@ -27,7 +27,7 @@ export default {
 }
 
 </style>
-<style lang="scss" >
+<!-- <style lang="scss" >
 .el-select {
   .el-input__inner{
     color: red;
@@ -39,4 +39,4 @@ export default {
     color: red;
   }
 }
-</style>
+</style> -->

src/components/Map/TrajectoryMap.vue

@@ -18,6 +18,8 @@
 import AMapLoader from "@amap/amap-jsapi-loader";
 import globalConfig from '@/utils/config/globalConfig'
 import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
+import { getArea } from '@/api/system/area'
+import { listParking } from '@/api/system/parking'
 export default {
   name: "TrajectoryMap",
   components: { AreaTextSelect },
@@ -38,6 +40,10 @@ export default {
       type: String,
       default: '27.101745'
     },
+    areaId: {
+      type: Number,
+      default: ''
+    },
     tripRouteStr: {
       type: String,
       default: ''
@@ -56,11 +62,18 @@ export default {
       area: {
         province: '福建省',
         city: '宁德市',
-      }
+      },
+      area:{},
+      parkingList:[],
+      noParkingList:[],
+      noridingList:[],
+      labels: [],
     }
   },
   mounted() {
-    this.initAMap();
+    console.log(this.areaId,'areaIdareaIdareaId');
+    // this.initAMap();
+    this.getAreas(this.areaId)
   },
   beforeDestroy() {
     this.destroyMap();
@@ -75,19 +88,91 @@ export default {
         console.log("轨迹=====地图实例不存在，无需销毁");
       }
     },
+    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';
+      });
+    },
+    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 时必填
         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         plugins: ["AMap.MoveAnimation"]
       }).then((AMap) => {
+        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]);
         this.AMap = AMap;
         this.map = new AMap.Map("container", {
           // 设置地图容器id
           resizeEnable: true,
           viewMode: "3D", // 是否为3D地图模式
           zoom: 16, // 初始化地图级别
-          center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
+          // center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
+          center:[longitude,latitude]
+        });
+        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.trajectory(); //轨迹
 
@@ -96,6 +181,142 @@ export default {
         console.log(e);
       });
     },
+    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)
+    },
+    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);
+    },
     // 显示轨迹
     trajectory() {
       this.line = JSON.parse(this.tripRouteStr)

src/views/system/order/index.vue

@@ -240,6 +240,7 @@
               v-if="showPlaceSearchMap"
               ref="map"
               :key="key"
+              :areaId="form.areaId"
               height="400px"
               :trip-route-str="form.tripRouteStr"
             />