内容修改

.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

src/App.vue

@@ -25,4 +25,18 @@ export default {
 #app .theme-picker {
   display: none;
 }
+
+</style>
+<style lang="scss" >
+.el-select {
+  .el-input__inner{
+    color: red;
+  }
+    
+}
+.el-input{
+  .el-input__inner{
+    color: red;
+  }
+}
 </style>

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({

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,

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() {
+    addMarker(lnglat, type) {
-      this.markers.forEach(marker => {
+      // 清除之前的标记
-        this.map.remove(marker);
+      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;
 }
 

src/views/system/device/index.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    
+
       <el-form-item label="运营商" prop="deptId" v-if="userName == 'admin'">
-        <el-select v-model="queryParams.deptId" placeholder="请选择运营商" clearable>
+        <el-select v-model="queryParams.deptId" placeholder="请选择运营商" clearable   :popper-append-to-body="false">
           <el-option
             v-for="item in deptOptions"
             :key="item.deptId"
             :label="item.deptName"
             :value="item.deptId"
+           
           ></el-option>
         </el-select>
       </el-form-item>
@@ -1071,7 +1074,18 @@ export default {
   }
 };
 </script>
-<style>
+<style lang="scss">
+.el-select {
+  .el-input__inner{
+    color: red;
+  }
+    
+}
+.el-input{
+  .el-input__inner{
+    color: red;
+  }
+}
   .nav-container {
     display: flex;
     justify-content: center;

src/views/system/flow/index.vue

@@ -368,3 +368,16 @@ export default {
   }
 };
 </script>
+<style lang="scss" >
+.el-select {
+  .el-input__inner{
+    color: red;
+  }
+    
+}
+.el-input{
+  .el-input__inner{
+    color: red;
+  }
+}
+</style>

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
+        <el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
-            v-for="item in areaOptions"
+          :value="item.areaId"></el-option>
-            :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
+                <el-popover placement="top" width="180" trigger="hover">
-                  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>
+      for (let i = 0; i < data.length; i += 2) {
-          <td>${item.sn}</td>
+        content += `<tr>`;
-          <td>${item.vehicleNum}</td>
+        content += generateRowContent(data[i]);
-          <td>${formatVehicleStatus(item.status)}</td>
+        if (i + 1 < data.length) {
-          <td><button class="detail-btn" data-device-id="${item.deviceId}">详情</button></td>
+          content += generateRowContent(data[i + 1]);
-        </tr>`;
+        } 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; /* 垂直居中 */
+    align-items: center;
-      margin-bottom: 10px; /* 可以根据需要调整间距 */
+    /* 垂直居中 */
+    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; /* 保持图片高度自适应 */
+    height: auto;
-      margin-right: 10px; /* 图片与文字间距，根据需要调整 */
+    /* 保持图片高度自适应 */
+    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>

src/views/system/repair/index.vue

@@ -313,3 +313,16 @@ export default {
   }
 };
 </script>
+<style lang="scss" >
+.el-select {
+  .el-input__inner{
+    color: red;
+  }
+    
+}
+.el-input{
+  .el-input__inner{
+    color: red;
+  }
+}
+</style>

src/views/system/withdraw/index.vue

@@ -518,7 +518,19 @@ export default {
   }
 };
 </script>
-<style>
+
+<style lang="scss">
+.el-select {
+  .el-input__inner{
+    color: red;
+  }
+    
+}
+.el-input{
+  .el-input__inner{
+    color: red;
+  }
+}
   .amoun-tips{
     color: red;
     font-size: 12px;

src/views/system/withdrawAudit/index.vue

@@ -490,7 +490,18 @@ export default {
   }
 };
 </script>
-<style>
+<style lang="scss">
+.el-select {
+  .el-input__inner{
+    color: red;
+  }
+    
+}
+.el-input{
+  .el-input__inner{
+    color: red;
+  }
+}
   .amoun-tips{
     color: red;
     font-size: 12px;