地图修改

2024-07-24 18:00:08 +08:00 · 2024-07-24 18:00:08 +08:00 · 23ea8a9c71
commit 23ea8a9c71
parent 74be13b534
5 changed files with 901 additions and 726 deletions
--- 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
--- 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({
--- a/src/components/Map/TrajectoryMap.vue
+++ b/src/components/Map/TrajectoryMap.vue
@ -100,6 +100,39 @@ export default {
    trajectory() {
      this.line = JSON.parse(this.tripRouteStr)
      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,
--- 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,6 +16,10 @@
      <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>
@ -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;
 }

--- a/src/views/system/map/index.vue
+++ b/src/views/system/map/index.vue
@ -38,12 +38,8 @@
    <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-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
+          :value="item.areaId"></el-option>
      </el-select>
    </div>
    <div class="input-card">
@ -67,10 +63,7 @@
          <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,12 +71,14 @@
                </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 :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>
@ -410,26 +405,43 @@
      }
    },
    generateInfoContent(data) {
-        let content = `<div><table  class="info-table">
+      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>`;
-        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>`;
-        });
+
+      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>`;
+        }
+        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':
@ -452,10 +464,12 @@
            return '未知状态';
        }
      }
+
      return content;
    },
    handleInfoWindowClick(event) {
      console.log("点击详情按钮====", event)
+      
      const button = event.target.closest('.detail-btn');
      if (button) {
        const deviceId = button.getAttribute('data-device-id');
@ -709,6 +723,42 @@
  width: 100%;
  height: 850px;
 }
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.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);
@ -719,17 +769,22 @@
    right: 15px;
  }
 }
+
 .tips {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 15px;
  left: 15px;
+
  .tip-item {
    display: flex;
-      align-items: center; /* 垂直居中 */
-      margin-bottom: 10px; /* 可以根据需要调整间距 */
+    align-items: center;
+    /* 垂直居中 */
+    margin-bottom: 10px;
+    /* 可以根据需要调整间距 */
    color: #38383b;
+
    .span-class {
      background-color: rgba(255, 255, 255, 0.5);
      padding: 3px 5px;
@ -738,19 +793,24 @@
      font-size: 13px;
    }
  }
+
  img {
    width: 25px;
    padding-top: 5px;
-      height: auto; /* 保持图片高度自适应 */
-      margin-right: 10px; /* 图片与文字间距，根据需要调整 */
+    height: auto;
+    /* 保持图片高度自适应 */
+    margin-right: 10px;
+    /* 图片与文字间距，根据需要调整 */
  }
 }
+
 .area-options {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 15px;
  right: 15px;
+
  span {
    display: flex;
    align-items: center;
@ -768,9 +828,11 @@
  display: flex;
  flex-direction: column;
  align-items: center;
+
  .apiary-marker-img {
    width: 25px;
  }
+
  .apiary-marker-name {
    background-color: #1890ff;
    border: none;
@ -780,6 +842,7 @@
    padding: 5px;
  }
 }
+
 .detail-btn {
  background: none;
  border: none;
@ -819,5 +882,4 @@
 .el-dialog:not(.is-fullscreen) {
  margin-top: 6vh !important;
 }
-
 </style>