运营区

src/utils/enums.js

@@ -41,13 +41,13 @@ export const AreaStatus = {
 }
 
 // 子区域状态
-export const SubAreaStatus = {
+export const AreaSubStatus = {
   NORMAL: "0", // 正常
   DISABLED: "1", // 禁用
 }
 
 // 子区域类型
-export const SubAreaType = {
+export const AreaSubType = {
   PARKING: "1", // 停车区
   NO_PARKING: "2", // 禁停区
   NO_RIDE: "3", // 禁行区

src/views/bst/area/edit/edit.vue

@@ -250,6 +250,10 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
+            // 不修改边界
+            this.form.boundaryStr = null;
+            this.form.longitude = null;
+            this.form.latitude = null;
             updateArea(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.back();

src/views/bst/area/index.vue

@@ -106,7 +106,12 @@
               <dict-tag :options="dict.type.area_status" :value="d.row[column.key]"/>
             </template>
             <template v-else-if="column.key === 'subArea'">
-              <el-link type="primary" :underline="false" @click="handleSubArea(d.row.id)">编辑</el-link>
+              <el-button type="text" size="mini" @click="handleSubArea(d.row.id)">
+                停车区({{d.row.parkingAreaCount | dv}}) 
+                禁停区({{d.row.noParkingAreaCount | dv}}) 
+                禁行区({{d.row.noRideAreaCount | dv}}) 
+                点击管理
+              </el-button>
             </template>
             <template v-else>
               {{d.row[column.key]}}
@@ -168,7 +173,7 @@ export default {
         {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'contact', visible: true, label: '联系人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'phone', visible: true, label: '联系电话', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'subArea', visible: true, label: '子区域', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'subArea', visible: true, label: '下属区域', minWidth: "200", sortable: true, overflow: false, align: 'center', width: null},
         {key: 'createName', visible: true, label: '创建人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
       ],

src/views/bst/areaSub/components/AreaMap.vue

@@ -6,7 +6,7 @@
     <!-- 地图工具栏 -->
     <div class="map-tools">
       <el-button-group>
-        <el-button size="mini" type="primary" icon="el-icon-plus" @click="startBoundaryEdit" :disabled="isEditing">新增区域</el-button>
+        <el-button size="mini" type="primary" icon="el-icon-plus" @click="startBoundaryEdit(null)" :disabled="isEditing">新增区域</el-button>
         <el-button size="mini" type="warning" icon="el-icon-edit" @click="startAreaBoundaryEdit"  :disabled="isEditing">修改运营区</el-button>
         <el-button size="mini" icon="el-icon-full-screen" @click="setFitView">全局查看</el-button>
         <el-button size="mini" icon="el-icon-picture" @click="toggleMapStyle">切换样式</el-button>
@@ -20,8 +20,8 @@
         <template slot="title">
           <div>{{ editSubArea != null ? '编辑' : '新增' }}提示：</div>
           <div>1. 左键点击添加边界点</div>
-          <div>2. 右键点击空白位置完成绘制</div>
+          <div>2. 点击顶点可删除该点</div>
-          <div>3. 右键点击顶点可删除该点</div>
+          <div>3. 双击完成绘制</div>
         </template>
       </el-alert>
       <div class="tool-buttons">
@@ -34,26 +34,26 @@
 
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
-import { SubAreaType, SubAreaStatus } from "@/utils/enums";
+import { AreaSubType, AreaSubStatus } from "@/utils/enums";
 import { debounce } from "@/utils/index";
 import globalConfig from "@/utils/config/globalConfig";
 // 区域样式配置
 const AREA_STYLES = {
-  [SubAreaType.PARKING]: {
+  [AreaSubType.PARKING]: {
     strokeColor: '#1890ff',
     strokeWeight: 2,
     fillColor: '#1890ff',
     fillOpacity: 0.3,
     strokeStyle: 'solid'
   },
-  [SubAreaType.NO_PARKING]: {
+  [AreaSubType.NO_PARKING]: {
     strokeColor: '#ff4d4f',
     strokeWeight: 2,
     fillColor: '#ff4d4f',
     fillOpacity: 0.3,
     strokeStyle: 'solid'
   },
-  [SubAreaType.NO_RIDE]: {
+  [AreaSubType.NO_RIDE]: {
     strokeColor: '#faad14',
     strokeWeight: 2,
     fillColor: '#faad14',
@@ -76,22 +76,22 @@ const HIGHLIGHT_STYLES = {
 
 // 图标配置
 const MARKER_ICONS = {
-  [SubAreaType.PARKING]: 'https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh',
+  [AreaSubType.PARKING]: 'https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh',
-  [SubAreaType.NO_PARKING]: 'https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab',
+  [AreaSubType.NO_PARKING]: 'https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab',
-  [SubAreaType.NO_RIDE]: 'https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2'
+  [AreaSubType.NO_RIDE]: 'https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2'
 };
 
 // 标签样式配置
 const LABEL_STYLES = {
-  [SubAreaType.PARKING]: {
+  [AreaSubType.PARKING]: {
     backgroundColor: '#1890ff',
     color: '#fff'
   },
-  [SubAreaType.NO_PARKING]: {
+  [AreaSubType.NO_PARKING]: {
     backgroundColor: '#ff4d4f',
     color: '#fff'
   },
-  [SubAreaType.NO_RIDE]: {
+  [AreaSubType.NO_RIDE]: {
     backgroundColor: '#faad14',
     color: '#fff'
   }
@@ -139,14 +139,14 @@ export default {
     // 监听区域数据变化
     area: {
       handler: debounce(function() {
-        this.renderAreaBoundary();
+        this.renderAll();
       }, 300),
       deep: true
     },
     // 监听子区域列表变化
     areaSubList: {
       handler: debounce(function() {
-        this.renderSubAreas();
+        this.renderAll();
       }, 300),
       deep: true
     },
@@ -230,11 +230,9 @@ export default {
       }
     },
     handlePolygonAdd({target}) {
-      console.log("handlePolygonAdd", target);
       this.editingPolygon = target;
     },
     handlePolygonEnd({target}) {
-      console.log("handlePolygonEnd", target);
       this.editingPolygon = target;
     },
     // 渲染所有内容
@@ -290,13 +288,15 @@ export default {
 
     // 渲染子区域
     renderSubAreas() {
-      if (!this.map || !this.areaSubList.length) return;
-
-      this.clearSubAreas();
       
+      if (!this.map || !this.areaSubList.length) {
+        return;
+      }
       this.areaSubList.forEach(subArea => {
-        if (subArea.status === SubAreaStatus.DISABLED) return;
+        if (subArea.status === AreaSubStatus.DISABLED) {
-        
+          return;
+        }
+
         try {
           // 渲染边界
           if (subArea.boundaryStr) {
@@ -403,18 +403,15 @@ export default {
         this.currentInfoWindow.close();
       }
 
-      const position = [subArea.longitude, subArea.latitude];
+      const position = this.getPosition(subArea);
+
+      if (position == null) {
+        return;
+      }
 
       // 聚焦效果
       if (focus) {
-        const polygon = this.overlays.polygons.get(subArea.id); 
+        this.focusArea(subArea);
-        if (polygon) {
-          const bounds = polygon.getBounds();
-          const padding = [150, 300, 150, 300];
-          this.map.setBounds(bounds, false, padding);
-        } else {
-          this.map.setZoomAndCenter(15, position, false, 300);
-        }
       } else {
         this.map.setCenter(position);
       }
@@ -459,6 +456,36 @@ export default {
       this.currentInfoWindow.open(this.map, position);
     },
 
+    // 聚焦子区域
+    focusArea(subArea) {
+      if (subArea == null) {
+        return;
+      }
+      let position = this.getPosition(subArea);
+      if (position == null) {
+        return;
+      }
+      const polygon = this.overlays.polygons.get(subArea.id); 
+      if (polygon) {
+        const bounds = polygon.getBounds();
+        const padding = [150, 300, 150, 300];
+        this.map.setBounds(bounds, false, padding);
+      } else {
+        this.map.setZoomAndCenter(15, position, false, 300);
+      }
+    },
+
+    // 获取子区域中心点
+    getPosition(subArea) {
+      if (subArea == null) {
+        return null;
+      }
+      if (subArea.longitude == null || subArea.latitude == null) {
+        return null;
+      }
+      return [subArea.longitude, subArea.latitude];
+    },
+
     // 处理信息窗体操作
     handleInfoAction(action, subArea) {
       console.log("action", action);
@@ -467,10 +494,10 @@ export default {
           this.$emit('edit', subArea);
           break;
         case 'boundary':
-          this.startBoundaryEdit(subArea);
+          this.startBoundaryEdit(subArea, true);
           break;
         case 'delete':
-          this.$emit('delete', subArea.id);
+          this.$emit('delete', subArea);
           break;
       }
     },
@@ -510,10 +537,16 @@ export default {
     },
 
     // 开始边界编辑
-    startBoundaryEdit(subArea) {
+    startBoundaryEdit(subArea, focus = false) {
 
       this.clearEditor();
 
+      this.editSubArea = subArea;
+
+      if (focus) {
+        this.focusArea(subArea);
+      }
+
       if (subArea && subArea.boundaryStr) {
         console.log("subArea", subArea);
         try {
@@ -549,41 +582,42 @@ export default {
         this.$message.error('计算中心点失败');
         return;
       }
-      console.log(boundary);
 
       if (this.isEditingArea) {
         // 更新运营区边界
         this.$emit('update-area-boundary', {
-          boundary: JSON.stringify(boundary),
+          area: this.area,
-          longitude: center[0],
-          latitude: center[1]
-        });
-      } else if (this.editSubArea == null) {
-        // 新增子区域
-        this.$emit('add-boundary', {
           boundary: JSON.stringify(boundary),
           longitude: center[0],
           latitude: center[1]
         });
       } else {
-        // 更新子区域边界
+        if (this.editSubArea == null) {
-        this.$emit('update-boundary', {
+          // 新增子区域
-          area: this.editSubArea,
+          this.$emit('add-boundary', {
-          boundary: JSON.stringify(boundary),
+            boundary: JSON.stringify(boundary),
-          longitude: center[0],
+            longitude: center[0],
-          latitude: center[1]
+            latitude: center[1]
-        });
+          });
+        } else {
+          // 更新子区域边界
+          this.$emit('update-boundary', {
+            areaSub: this.editSubArea,
+            boundary: JSON.stringify(boundary),
+            longitude: center[0],
+            latitude: center[1]
+          });
+        }
       }
-
+      
-      this.cancelEdit();
     },
 
     // 取消编辑
     cancelEdit() {
+      console.log("cancelEdit");
 
       // 重置编辑状态
       this.isEditing = false;
-      this.editSubArea = null;
       this.isEditingArea = false;
       
       // 移除地图事件监听
@@ -596,7 +630,7 @@ export default {
 
     // 工具方法
     setFitView() {
-      this.map.setFitView(null, false, [150, 60, 100, 60]);
+      this.map.setFitView();
     },
 
     // 切换地图样式
@@ -632,17 +666,6 @@ export default {
       });
     },
 
-    clearSubAreas() {
-      ['polygons', 'markers', 'labels'].forEach(type => {
-        this.overlays[type].forEach((overlay, key) => {
-          if (key !== 'area') {
-            this.map.remove(overlay);
-            this.overlays[type].delete(key);
-          }
-        });
-      });
-    },
-
     // 更新区域样式
     updateAreaStyle(areaId) {
       const polygon = this.overlays.polygons.get(areaId);
@@ -681,6 +704,8 @@ export default {
 
       this.clearEditor();
 
+      this.setFitView();
+
       if (this.area.boundaryStr) {
         try {
           const boundary = JSON.parse(this.area.boundaryStr);
@@ -699,29 +724,15 @@ export default {
           console.error('加载运营区边界数据失败:', error);
           this.$message.error('加载运营区边界数据失败');
         }
-      } else {
+      } 
-        // 创建一个新的运营区多边形
-        this.editingPolygon = new this.AMap.Polygon({
-          path: [],
-          strokeColor: '#2b8cbe',
-          strokeWeight: 2,
-          fillColor: '#ccebc5',
-          fillOpacity: 0.3,
-          strokeStyle: 'dashed',
-          strokeDasharray: [5, 5]
-        });
-        
-        this.map.add(this.editingPolygon);
-        this.polygonEditor.addAdsorbPolygons(this.editingPolygon)
-      }
 
       this.polygonEditor.open();
+      this.isEditingArea = true;
       this.startEditArea();
     },
     // 开始绘制（不管是那种边界）
     startEditArea() {
       this.isEditing = true;
-      this.isEditingArea = true;
       
       // 关闭当前信息窗口
       if (this.currentInfoWindow) {

src/views/bst/areaSub/components/AreaSubEditDialog.vue

@@ -0,0 +1,166 @@
+<template>
+  <el-dialog 
+    :title="title" 
+    :visible.sync="dialogVisible" 
+    width="500px" 
+    append-to-body 
+    :close-on-click-modal="false"
+    @open="handleOpen"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
+      <el-row>
+        <form-col :span="span" label="区域名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入区域名称" />
+        </form-col>
+        <form-col :span="span" label="类型" prop="type">
+          <el-radio-group v-model="form.type" placeholder="请选择类型">
+            <el-radio
+              v-for="dict in dict.type.area_sub_type"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </form-col>
+        <form-col :span="span" label="还车误差" prop="error">
+          <el-input v-model="form.error" placeholder="请输入还车误差">
+            <template slot="append">米</template>
+          </el-input>
+        </form-col>
+        <form-col :span="span" label="照片" prop="picture">
+          <image-upload v-model="form.picture"/>
+        </form-col>
+        <form-col :span="span" label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </form-col>
+        <form-col :span="span" label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.area_sub_status"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </form-col>
+      </el-row>
+    </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>
+</template>
+
+<script>
+import { getAreaSub, addAreaSub, updateAreaSub } from "@/api/bst/areaSub";
+import FormCol from "@/components/FormCol/index.vue";
+import { AreaSubStatus, AreaSubType } from '@/utils/enums';
+
+export default {
+  name: 'AreaSubEditDialog',
+  components: { FormCol },
+  dicts: ['area_sub_type', 'area_sub_status'],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    id: {
+      type: [String, Number],
+      default: null
+    },
+    areaId: {
+      type: [String, Number],
+      required: true
+    },
+    initData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      span: 24,
+      title: '',
+      form: {},
+      rules: {
+        name: [
+          { required: true, message: "名称不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "类型不能为空", trigger: "blur" }
+        ],
+        status: [
+          { required: true, message: "状态不能为空", trigger: "change" }
+        ]
+      }
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+      }
+    }
+  },
+  methods: {
+    handleOpen() {
+      if (this.id == null) {
+        this.reset();
+        this.title = "添加子区域";
+      } else {
+        this.getDetail();
+        this.title = "修改子区域";
+      }
+    },
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        type: AreaSubType.PARKING,
+        areaId: this.areaId,
+        boundary: null,
+        boundaryStr: null,
+        error: null,
+        longitude: null,
+        latitude: null,
+        createTime: null,
+        picture: null,
+        remark: null,
+        status: AreaSubStatus.NORMAL,
+        ...this.initData
+      };
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate();
+      });
+    },
+    getDetail() {
+      getAreaSub(this.id).then(response => {
+        this.form = response.data;
+      });
+    },
+    submitForm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          const promise = this.form.id != null ? updateAreaSub(this.form) : addAreaSub(this.form);
+          promise.then(response => {
+            this.$modal.msgSuccess(this.form.id != null ? "修改成功" : "新增成功");
+            this.dialogVisible = false;
+            this.$emit('success');
+          });
+        }
+      });
+    },
+    cancel() {
+      this.dialogVisible = false;
+      this.reset();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/bst/areaSub/index.vue

@@ -38,7 +38,7 @@
       </el-form>
 
       <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
+        <!-- <el-col :span="1.5">
           <el-button
             type="primary"
             plain
@@ -47,7 +47,7 @@
             @click="handleAdd"
             v-has-permi="['bst:areaSub:add']"
           >新增</el-button>
-        </el-col>
+        </el-col> -->
         <el-col :span="1.5">
           <el-button
             type="danger"
@@ -116,6 +116,13 @@
               @click="handleUpdate(scope.row)"
               v-has-permi="['bst:areaSub:edit']"
             >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleEditBoundary(scope.row)"
+              v-has-permi="['bst:areaSub:edit']"
+            >边界</el-button>
             <el-button
               size="mini"
               type="text"
@@ -128,63 +135,39 @@
       </el-table>
     </div>
     <div class="map-container" v-if="area.id != null">
-      <area-map :area="area" :area-sub-list="areaSubList"/>
+      <area-map 
+        v-loading="loading"
+        ref="map"
+        :area="area" 
+        :area-sub-list="areaSubList"
+        @edit="handleUpdate"
+        @delete="handleDelete"
+        @add-boundary="handleAddBoundary"
+        @update-boundary="handleUpdateBoundary"
+        @update-area-boundary="handleUpdateAreaBoundary"
+      />
     </div>
     
 
-    <!-- 添加或修改子区域对话框 -->
+    <!-- 子区域编辑对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
+    <area-sub-edit-dialog
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
+      :visible.sync="open"
-        <el-row>
+      :id="editId"
-          <form-col :span="span"  label="区域名称" prop="name">
+      :area-id="queryParams.areaId"
-            <el-input v-model="form.name" placeholder="请输入区域名称" />
+      :init-data="editInitData"
-          </form-col>
+      @success="handleEditSuccess"
-          <form-col :span="span"  label="类型" prop="type">
+    />
-            <el-radio-group v-model="form.type" placeholder="请选择类型">
-              <el-radio
-                v-for="dict in dict.type.area_sub_type"
-                :key="dict.value"
-                :label="dict.value"
-              >{{dict.label}}</el-radio>
-            </el-radio-group>
-          </form-col>
-          <form-col :span="span"  label="还车误差" prop="error">
-            <el-input v-model="form.error" placeholder="请输入还车误差">
-              <template slot="append">米</template>
-            </el-input>
-          </form-col>
-          <form-col :span="span"  label="照片" prop="picture">
-            <image-upload v-model="form.picture"/>
-          </form-col>
-          <form-col :span="span"  label="备注" prop="remark">
-            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-          </form-col>
-          <form-col :span="span"  label="状态" prop="status">
-            <el-radio-group v-model="form.status">
-              <el-radio
-                v-for="dict in dict.type.area_sub_status"
-                :key="dict.value"
-                :label="dict.value"
-              >{{dict.label}}</el-radio>
-            </el-radio-group>
-          </form-col>
-        </el-row>
-      </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>
 
 <script>
-import { listByAreaId, getAreaSub, delAreaSub, addAreaSub, updateAreaSub } from "@/api/bst/areaSub";
+import { listByAreaId, delAreaSub, addAreaSub, updateAreaSub } from "@/api/bst/areaSub";
 import { $showColumns } from '@/utils/mixins';
 import FormCol from "@/components/FormCol/index.vue";
-import { getArea } from '@/api/bst/area';
+import { getArea, updateArea } from '@/api/bst/area';
-import { SubAreaStatus, SubAreaType } from '@/utils/enums';
+import { AreaSubStatus, AreaSubType } from '@/utils/enums';
 import AreaMap from '@/views/bst/areaSub/components/AreaMap.vue';
+import AreaSubEditDialog from '@/views/bst/areaSub/components/AreaSubEditDialog.vue';
 
   // 默认排序字段
 const defaultSort = {
@@ -196,11 +179,11 @@ export default {
   name: "AreaSub",
   mixins: [$showColumns],
   dicts: ['area_sub_type', 'area_sub_status'],
-  components: {FormCol, AreaMap},
+  components: {FormCol, AreaMap, AreaSubEditDialog},
   data() {
     return {
-      SubAreaStatus,
+      AreaSubStatus,
-      SubAreaType,
+      AreaSubType,
       span: 24,
       listSpan: 10,
       // 字段列表
@@ -235,6 +218,10 @@ export default {
       // 是否显示弹出层
       open: false,
       defaultSort,
+      // 编辑ID
+      editId: null,
+      // 编辑初始数据
+      editInitData: {},
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -251,8 +238,11 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        createTime: [
+        name: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
+          { required: true, message: "名称不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "类型不能为空", trigger: "blur" }
         ],
         status: [
           { required: true, message: "状态不能为空", trigger: "change" }
@@ -268,6 +258,44 @@ export default {
     this.getList();
   },
   methods: {
+    // 处理更新子区域边界
+    handleUpdateBoundary({areaSub, boundary, longitude, latitude}) {
+      console.log(areaSub, boundary, longitude, latitude);
+      if (areaSub.id == null) {
+        return;
+      }
+
+      updateAreaSub({
+        id: areaSub.id,
+        boundaryStr: boundary,
+        longitude: longitude,
+        latitude: latitude
+      }).then(response => {
+        if (response.code == 200) {
+          this.$modal.msgSuccess("更新成功");
+          this.getList();
+          this.$refs.map.cancelEdit();
+        }
+      })
+    },
+    // 处理更新运营区边界
+    handleUpdateAreaBoundary({area, boundary, longitude, latitude}) {
+      if (area.id == null) {
+        return;
+      }
+      updateArea({
+        id: area.id,
+        boundaryStr: boundary,
+        longitude: longitude,
+        latitude: latitude
+      }).then(response => {
+        if (response.code == 200) {
+          this.$modal.msgSuccess("更新成功");
+          this.getArea();
+          this.$refs.map.cancelEdit();
+        }
+      })
+    },
     getArea() {
       this.loadingArea = true;  
       getArea(this.queryParams.areaId).then(response => {
@@ -295,30 +323,6 @@ export default {
         this.loading = false;
       });
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        name: null,
-        type: SubAreaType.PARKING,
-        areaId: this.queryParams.areaId,
-        boundary: null,
-        boundaryStr: null,
-        error: null,
-        longitude: null,
-        latitude: null,
-        createTime: null,
-        picture: null,
-        remark: null,
-        status: SubAreaStatus.NORMAL
-      };
-      this.resetForm("form");
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -335,42 +339,39 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
+    handleAddBoundary({boundary, longitude, latitude}) {
-    handleAdd() {
+      this.editId = null;
-      this.reset();
+      this.editInitData = {
+        boundaryStr: boundary,
+        longitude: longitude,
+        latitude: latitude
+      };
+      this.open = true;
+    },
+    /** 新增按钮操作 */
+    handleAdd(initData) {
+      this.editId = null;
+      this.editInitData = initData || {};
       this.open = true;
-      this.title = "添加子区域";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.editId = row.id || this.ids;
-      const id = row.id || this.ids
+      this.editInitData = {};
-      getAreaSub(id).then(response => {
+      this.open = true;
-        this.form = response.data;
+      this.$nextTick(() => {
-        this.open = true;
+        this.$refs.map.focusArea(row);
-        this.title = "修改子区域";
       });
     },
-    /** 提交按钮 */
+    handleEditSuccess() {
-    submitForm() {
+      this.getList();
-      this.$refs["form"].validate(valid => {
+      this.$nextTick(() => {
-        if (valid) {
+        this.$refs.map.cancelEdit();
-          if (this.form.id != null) {
-            updateAreaSub(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addAreaSub(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
       });
     },
+    handleEditBoundary(row) {
+      this.$refs.map.startBoundaryEdit(row, true);
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;