地图绘制

.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://che.chuangtewl.com/prod-api'
+# VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
+VUE_APP_BASE_API = 'https://che.chuangtewl.com/prod-api'
 
 # VUE_APP_BASE_API = 'http://192.168.2.75:8088'
 

src/views/system/area/areaRange.vue

@@ -18,6 +18,7 @@
       <el-button @click="editClose">结束编辑</el-button>
       <el-button @click="changeMapStyle()">切换地图</el-button>
       <el-button @click="clearPolygon()">清除多边形</el-button>
+      <el-button @click="sub()">保存</el-button>
     </div>
     <el-form
       :model="queryParams"
@@ -84,6 +85,7 @@
           >修改</el-button
         >
       </el-col>
+
       <el-col :span="1.5">
         <el-button
           type="danger"
@@ -118,9 +120,9 @@
       v-loading="loading"
       :data="parkingList"
       @selection-change="handleSelectionChange"
-      ref="myTable" 
+      ref="tableRef"
       :cell-style="columnbackgroundStyle"
-       @current-change="handleCurrentChange"
+      @current-change="handleCurrentChange"
     >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="id" align="center" prop="parkingId" />
@@ -166,10 +168,12 @@
         </template>
       </el-table-column>
       <el-table-column label="id" align="center" prop="parkingId">
-  <template slot-scope="scope">
-    <div :ref="'row_' + scope.row.parkingId">{{ scope.row.parkingId }}</div>
-  </template>
-</el-table-column>
+        <template slot-scope="scope">
+          <div :ref="'row_' + scope.row.parkingId">
+            {{ scope.row.parkingId }}
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column
         label="操作"
         align="center"
@@ -184,6 +188,14 @@
             v-hasPermi="['system:parking:edit']"
             >修改</el-button
           >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="changeRange(scope.row)"
+            v-hasPermi="['system:parking:remove']"
+            >修改范围</el-button
+          >
           <el-button
             size="mini"
             type="text"
@@ -203,6 +215,62 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-col :span="24">
+          <el-form-item label="停车区" label-width="90" prop="parkingName">
+            <el-input style="width: 90%" v-model="form.parkingName" placeholder="请输入停车区" />
+          </el-form-item>
+        </el-col>
+        <el-col>
+          <el-col :span="12">
+            <el-form-item label="类型">
+              <el-radio-group v-model="form.type">
+                <el-radio
+                  v-for="dict in dict.type.et_parking_type"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="还车误差（米）" label-width="100">
+              <el-input-number v-model="form.error" placeholder="还车误差"></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-col>
+        <el-col :span="24">
+        
+        </el-col>
+        <el-col >
+          <el-col :span="12">
+            <el-form-item label="经度" prop="longitude">
+              <el-input v-model="form.longitude" placeholder="请新建边界" disabled/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="纬度" prop="latitude">
+              <el-input v-model="form.latitude" placeholder="请新建边界" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-col>
+        <el-col :span="24" v-show="form.type =='1' ">
+          <el-form-item label="周边环境图片" prop="picture" >
+            <image-upload v-model="form.picture"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -347,9 +415,197 @@ export default {
     this.getAreaList();
   },
   methods: {
+    changeRange(row) {
+      this.reset();
+      const parkingId = row.parkingId || this.ids;
+      getParking(parkingId).then((response) => {
+        this.form = response.data;
+        this.areaLon = response.data.longitude;
+        this.areaLat = response.data.latitude;
+     
+      });
+      this.getArea(this.areaId);
+      setTimeout(() => {
+        this.map.getAllOverlays("polygon").forEach((polygon) => {
+        // 根据 polygon 的 id 或其他属性判断是否为需要移除的对象
+        if (
+          polygon.getExtData() &&
+          polygon.getExtData().parkingId === row.parkingId
+        ) {
+          // 移除该 polygon
+          this.map.remove(polygon);
+        }
+      });
+      this.initEditor(row.boundaryStr);
+      this.map.setCenter([row.longitude, row.latitude]);
+      this.map.setZoom(17); // 这里的 15 是缩放级别，可以根据需要调整
+      document.documentElement.scrollTop = 0
+      }, 300);
+      console.log(row, "changeRangechangeRangechangeRange");
+     
+    },
+    sub(){
+      updateParking(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              // this.open = false;
+              this.getList();
+            });
+    },
+      /** 提交按钮 */
+      submitForm() {
+      this.form.areaId = this.defaultAreaId;
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.parkingId != null) {
+            updateParking(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addParking(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    async echart() {
+      clearInterval(this.timer);
+      console.log("接收参数", this.pathList);
+      console.log("接收参数", this.lon);
+      console.log("接收参数", this.lat);
+      this.lon2 = this.lon === null ? 120.35218 : this.lon;
+      this.lat2 = this.lat === null ? 26.944335 : this.lat;
+      // console.log(typeof JSON.parse(this.pathList));
+      await AMapLoader.load({
+        key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: [
+          "AMap.ToolBar",
+          "AMap.Driving",
+          "AMap.PolygonEditor",
+          "AMap.PlaceSearch",
+        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      })
+        .then((AMap) => {
+          this.map = new AMap.Map("container", {
+            //设置地图容器id
+            viewMode: "3D", //是否为3D地图模式
+            zoom: this.zoom ? this.zoom : 13, //初始化地图级别
+            center: [this.lon2, this.lat2], // 初始化地图中心点位置
+          });
+
+          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"
+            );
+          });
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+      // this.initEditor();
+    },
+    initEditor(pathList) {
+      var path1 = [];
+      path1 = JSON.parse(pathList) || [];
+
+      var polygon1 = new AMap.Polygon({
+        path: path1,
+      });
+      this.map.add([polygon1]);
+      polyEditor = new AMap.PolygonEditor(this.map);
+      // console.log(polyEditor);
+      // console.dir(polyEditor);
+      polyEditor.on("add", (data) => {
+        // console.log(data);
+        this.coordList = data.lnglat;
+        var polygon = data.target;
+        polygon.on("dblclick", () => {
+          polyEditor.setTarget(polygon);
+          polyEditor.open();
+        });
+      });
+      polygon1.on("dblclick", () => {
+        polyEditor.setTarget(polygon1);
+        polyEditor.open();
+      });
+
+      return polyEditor;
+    },
+    scrollToRow(rowIndex) {
+      // 获取表格的DOM元素
+      this.$nextTick(() => {
+        // 获取表格的body wrapper元素
+        const tableBodyWrapper = this.$refs.tableRef.$el.querySelector(
+          ".el-table__body-wrapper"
+        );
+
+        // 设置overflow为auto或scroll
+        if (tableBodyWrapper) {
+          tableBodyWrapper.style.overflow = "auto"; // 或者 'scroll'
+        }
+
+        // 获取所有行
+        const rows = tableBodyWrapper.querySelectorAll(".el-table__row");
+        const row = rows[rowIndex];
+
+        if (row) {
+          // 计算滚动位置
+          const scrollTop =
+            row.offsetTop -
+            tableBodyWrapper.offsetHeight / 2 +
+            row.clientHeight / 2;
+          // 滚动到指定位置
+          tableBodyWrapper.scrollTo({
+            top: scrollTop,
+            behavior: "smooth",
+          });
+        } else {
+          console.warn(`Row at index ${rowIndex} not found.`);
+        }
+      });
+    },
+
     getArea(areaId) {
       getArea(areaId).then((response) => {
-        
         this.queryParams.areaId = response.data.areaId;
         this.areaId = response.data.areaId;
         this.lon = response.data.longitude;
@@ -553,77 +809,6 @@ export default {
     start() {
       this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
     },
-    async echart() {
-      clearInterval(this.timer);
-      console.log("接收参数", this.pathList);
-      console.log("接收参数", this.lon);
-      console.log("接收参数", this.lat);
-      this.lon2 = this.lon === null ? 120.35218 : this.lon;
-      this.lat2 = this.lat === null ? 26.944335 : this.lat;
-      // console.log(typeof JSON.parse(this.pathList));
-      await AMapLoader.load({
-        key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: [
-          "AMap.ToolBar",
-          "AMap.Driving",
-          "AMap.PolygonEditor",
-          "AMap.PlaceSearch",
-        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-      })
-        .then((AMap) => {
-          this.map = new AMap.Map("container", {
-            //设置地图容器id
-            viewMode: "3D", //是否为3D地图模式
-            zoom: this.zoom ? this.zoom : 13, //初始化地图级别
-            center: [this.lon2, this.lat2], // 初始化地图中心点位置
-          });
-
-          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"
-            );
-          });
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-      this.initEditor();
-    },
     initAMap() {
       AMapLoader.load({
         key: globalConfig.aMap.key,
@@ -669,7 +854,10 @@ export default {
           });
 
           this.noParkingList.forEach((noparking) => {
-            this.addNoParking(JSON.parse(noparking.boundaryStr) || [], noparking.parkingId);
+            this.addNoParking(
+              JSON.parse(noparking.boundaryStr) || [],
+              noparking.parkingId
+            );
             this.addMarker2(
               noparking,
               "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab",
@@ -728,6 +916,7 @@ export default {
           fillColor: "#71b7cc",
         });
       });
+      polygon.setExtData({ parkingId: parkingId });
       polygon.on("mouseout", () => {
         polygon.setOptions({
           fillOpacity: 0.5,
@@ -742,9 +931,11 @@ export default {
     },
     highlightRow(parkingId) {
       this.$set(this, "highlightedId", parkingId);
-  // this.showtable = false;
-  this.$refs.myTable.setCurrentRow(this.parkingList[6]);
-
+      // this.showtable = false;
+      // this.$refs.myTable.setCurrentRow(this.parkingList[6]);
+      this.$nextTick(() => {
+        this.scrollToRow(6);
+      });
     },
     handleCurrentChange(val) {
       this.currentRow = val;
@@ -756,7 +947,7 @@ export default {
       }
     },
 
-    addNoParking(data,parkingId) {
+    addNoParking(data, parkingId) {
       let polygon = new AMap.Polygon({
         path: data,
         fillColor: "#ccebc5",
@@ -773,6 +964,7 @@ export default {
           fillColor: "#ff0000",
         });
       });
+      polygon.setExtData({ parkingId: parkingId });
       polygon.on("mouseout", () => {
         polygon.setOptions({
           fillOpacity: 0.5,
@@ -816,7 +1008,7 @@ export default {
       this.map.add(text);
       this.labels.push(text);
     },
-    addNoriding(data, title, lon, lat,parkingId) {
+    addNoriding(data, title, lon, lat, parkingId) {
       let polygon = new AMap.Polygon({
         path: data,
         fillColor: "#ccebc5",
@@ -845,35 +1037,7 @@ export default {
       });
       this.map.add(polygon);
     },
-    initEditor() {
-      var path1 = [];
-      if (this.areaId) {
-        path1 = JSON.parse(this.pathList) || [];
-      }
 
-      var polygon1 = new AMap.Polygon({
-        path: path1,
-      });
-      this.map.add([polygon1]);
-      polyEditor = new AMap.PolygonEditor(this.map);
-      // console.log(polyEditor);
-      // console.dir(polyEditor);
-      polyEditor.on("add", (data) => {
-        // console.log(data);
-        this.coordList = data.lnglat;
-        var polygon = data.target;
-        polygon.on("dblclick", () => {
-          polyEditor.setTarget(polygon);
-          polyEditor.open();
-        });
-      });
-      polygon1.on("dblclick", () => {
-        polyEditor.setTarget(polygon1);
-        polyEditor.open();
-      });
-
-      return polyEditor;
-    },
     createPolygon() {
       this.status = true;
       polyEditor.close();
@@ -896,9 +1060,13 @@ export default {
         });
         let center = calculateCenter(mapList);
         console.log(mapList, "mapListmapList");
-        that.$emit("mapList", mapList);
-
-        that.$emit("center", center);
+        // this.newmapList=mapList
+        let mapListJson = JSON.stringify(mapList);
+      console.log("mapListJson:"+mapListJson);
+      this.form.boundaryStr = mapListJson;
+      let centerArr = center.toString().split(",");
+      this.form.longitude = centerArr[0];
+      this.form.latitude = centerArr[1];
       });
       polyEditor.close();
     },
@@ -914,6 +1082,9 @@ export default {
   width: 100%;
   height: 30rem;
 }
+.el-table__body-wrapper {
+  overflow: auto; /* 或者 scroll */
+}
 .input-card {
   position: absolute;
   top: 15px;
@@ -928,7 +1099,7 @@ export default {
   padding-bottom: 50px;
   .input-card-right {
     position: absolute;
-    bottom: 15px;
+    top: 28rem;
     right: 15px;
   }
   .input-card-left {