+ 围栏管理

src/views/bd/map/index.vue

@@ -15,7 +15,8 @@ export default {
     },
     loaded: {
       type: Function,
-      default: () => {},
+      default: () => {
+      },
     },
   },
   mounted() {
@@ -104,3 +105,12 @@ export default {
 };
 </script>
 
+<style scoped lang="scss">
+.map {
+  margin: 10px 0;
+
+  ::v-deep .maptalks-wrapper {
+    border-radius: 10px;
+  }
+}
+</style>

src/views/bdspace/fenceInfo/draw-fence-dialog.vue

@@ -12,10 +12,14 @@
         </el-form-item>
       </el-form>
       <bd-map :loaded="loaded" map-id="room-map"/>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="saveEdit">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-if="!form.id" type="primary" :disabled="drawState" @click="startDraw">
+        {{ drawState ? "双击退出绘制" : "绘制围栏" }}
+      </el-button>
+      <el-button type="primary" @click="saveEdit">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
     </div>
   </el-dialog>
 </template>
@@ -41,12 +45,11 @@ export default {
       mapIns: null,
       fencePolyLayer: null,
       fence: {},
-      destroyed: false,
+      destroyed: true,
       playLine: null,
       editingDrawGeom: null,
       drawState: false,
       drawtool: null,
-      dialogVisible: false,
       form: {
         name: '',
       },
@@ -78,6 +81,7 @@ export default {
       this.destroyed = true;
     },
     loaded(map) {
+      debugger
       this.markLayer = new BDLayers.Lib.Layer.CBVectorLayer('markerLayer', true);
       map.addCustomLayers(this.markLayer, 99);
       this.mapIns = map;
@@ -99,7 +103,6 @@ export default {
           // 点击地图 图形取消编辑状态
           mapIns.map.once('click', () => {
             this.editingDrawGeom.endEdit();
-            this.dialogVisible = true;
           });
         } else {
           mapIns.map.once('click', () => {
@@ -111,11 +114,13 @@ export default {
         this.editingDrawGeom = geom.target.geometry ? geom.target.geometry : geom.target.geom
             ? geom.target.geom
             : geom.target;
-        this.dialogVisible = true;
         this.drawState = false;
       });
     },
     addFence() {
+      if (!this.fence) {
+        return;
+      }
       const {
         id,
         defenceName,
@@ -140,6 +145,7 @@ export default {
         name: defenceName,
         polygon,
       }
+      this.editFence(this.fence)
     },
     /**
      *
@@ -174,7 +180,6 @@ export default {
     },
     cancelEdit() {
       this.drawtool.clear();
-      this.dialogVisible = false;
     },
     cancel() {
       this.centerDialogVisible = false;
@@ -200,15 +205,15 @@ export default {
               type: 'success',
               message: '围栏保存成功',
             });
+            this.$emit('onSuccess');
           } else {
             await updateFenceInfo(this.formatParams(this.form))
             this.$message({
               type: 'success',
               message: '围栏编辑成功',
             });
-            this.polyLayer.removeGeometry(this.form.polygonId);
+            this.$emit('onSuccess');
           }
-          this.dialogVisible = false;
           this.drawtool.clear();
           this.drawPoly({
             coordinates: coordinates,
@@ -251,13 +256,19 @@ export default {
       this.editState = true;
       this.editingDrawGeom.startEdit();
       // 点击地图 图形取消编辑状态
-      window.map.map.once('click', () => {
+      this.mapIns.map.once('click', () => {
         this.editingDrawGeom.endEdit();
         this.dialogVisible = true;
       });
     },
     show(data) {
       this.fence = data;
+      if (data) {
+        this.form = {
+          id: data.id,
+          name: data.defenceName
+        };
+      }
       this.destroyed = false;
       this.centerDialogVisible = true;
     },
@@ -267,8 +278,9 @@ export default {
 <style scoped lang="scss">
 .trail-dialog-content {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
 
   .map-ctrl {
     display: flex;

src/views/bdspace/fenceInfo/index.vue

@@ -29,30 +29,6 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
-            type="success"
-            plain
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['bd:fenceInfo:edit']"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['bd:fenceInfo:remove']"
-        >删除
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
             type="warning"
             plain
             icon="el-icon-download"
@@ -66,11 +42,11 @@
     </el-row>
 
     <el-table v-loading="loading" :data="fenceInfoList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="" align="center" prop="id" />
-      <el-table-column label="围栏名称" align="center" prop="defenceName" />
-      <el-table-column label="中心点" align="center" prop="centerLng" />
-      <el-table-column label="中心点" align="center" prop="centerLat" />
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="" align="center" prop="id"/>
+      <el-table-column label="围栏名称" align="center" prop="defenceName"/>
+      <el-table-column label="中心点" align="center" prop="centerLng"/>
+      <el-table-column label="中心点" align="center" prop="centerLat"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -101,32 +77,17 @@
         @pagination="getList"
     />
 
-    <!-- 添加或修改围栏基础信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="围栏名称" prop="defenceName">
-          <el-input v-model="form.defenceName" placeholder="请输入围栏名称" />
-        </el-form-item>
-        <el-form-item label="中心点" prop="centerLng">
-          <el-input v-model="form.centerLng" placeholder="请输入中心点" />
-        </el-form-item>
-        <el-form-item label="中心点" prop="centerLat">
-          <el-input v-model="form.centerLat" placeholder="请输入中心点" />
-        </el-form-item>
-      </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>
+    <draw-fence-dialog ref="drawFenceRef" @onSuccess="onSaveFence"></draw-fence-dialog>
   </div>
 </template>
 
 <script>
-import { addFenceInfo, delFenceInfo, getFenceInfo, listFenceInfo, updateFenceInfo } from '@/api/bd/fenceInfo';
+import {addFenceInfo, delFenceInfo, listFenceInfo, updateFenceInfo} from '@/api/bd/fenceInfo';
+import DrawFenceDialog from "@/views/bdspace/fenceInfo/draw-fence-dialog.vue";
 
 export default {
   name: 'FenceInfo',
+  components: {DrawFenceDialog},
   data() {
     return {
       // 遮罩层
@@ -210,19 +171,11 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = '添加围栏基础信息';
+      this.$refs.drawFenceRef.show()
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids;
-      getFenceInfo(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = '修改围栏基础信息';
-      });
+      this.$refs.drawFenceRef.show(row)
     },
     /** 提交按钮 */
     submitForm() {
@@ -252,7 +205,8 @@ export default {
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess('删除成功');
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -260,6 +214,10 @@ export default {
         ...this.queryParams,
       }, `fenceInfo_${new Date().getTime()}.xlsx`);
     },
+    onSaveFence() {
+      this.$refs.drawFenceRef.cancel()
+      this.getList();
+    }
   },
 };
 </script>