+ 围栏编辑功能

ruoyi-ui/src/views/bd/fence/index.vue

@@ -4,18 +4,72 @@
       围栏闯禁
     </template>
     <template v-slot:action>
-      <i
-          class="el-icon-plus"
-          title="清空所有轨迹"
-          @click="clearAll"
-      />
+      <el-button
+          size="mini"
+          type="text"
+          icon="el-icon-plus"
+          round
+          @click="startDraw"
+          style="margin-left: auto"
+          :disabled="drawState"
+      >
+        {{ drawState ? '绘制中...' : '绘制围栏' }}
+      </el-button>
     </template>
     <template v-slot:content>
-      <template v-if="!editState">
+      <div class="location-list">
+        <template v-for="fence in fenceList">
+          <div :key="`fence_${fence.id}`" class="list-item">
+          <span class="over-flow-hidden" style="width: 40%">
+            {{ fence.name }}
+          </span>
+            <span class="over-flow-hidden" style="width: 40%">
+           {{ fence.updateTime }}
+          </span>
+            <span class="over-flow-hidden" style="width: 20%">
+              <el-popconfirm
+                  confirm-button-text='好的'
+                  cancel-button-text='不用了'
+                  icon="el-icon-info"
+                  icon-color="red"
+                  :title="`是否删除围栏【${fence.name}】？`"
+                  @confirm="()=>delFence(fence)"
+              >
+               <i
+                   slot="reference"
+                   class="el-icon-delete"
+                   title="删除围栏"
+               ></i>
+              </el-popconfirm>
+            <i
+                class="el-icon-edit"
+                title="编辑围栏"
+                @click="()=>editFence(fence)"
+            />
+          </span>
+          </div>
+        </template>
+      </div>
+      <el-dialog
+          width="20%"
+          title="提示"
+          :visible="dialogVisible"
+          append-to-body>
         <div>
-
+          <div style="margin-bottom: 14px">
+            检测到未保存的内容，是否保存修改?
+          </div>
+          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+            <el-form-item label="围栏名称" prop="name">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="cancelEdit">放弃修改</el-button>
+          <el-button type="primary" @click="saveEdit">保存</el-button>
         </div>
-      </template>
+      </el-dialog>
     </template>
   </pannel>
 </template>
@@ -38,79 +92,205 @@ export default {
       playItem: {},
       editState: false,
       editPolyInfo: {},
+      layer: null,
+      dialogVisible: false,
+      editingDrawGeom: null,
+      drawState: false,
+      drawtool: null,
+      form: {
+        name: '',
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入围栏名称',
+            trigger: 'blur',
+          },
+        ],
+      },
+      fenceList: [],
     };
   },
   // 组件卸载前清空图层信息
   beforeDestroy() {
+    window.map.removeLayersById('vl');
+    this.drawtool.disabled();
   },
   created() {
+    // 地图绘制工具
+    this.drawtool = new BDLayers.Lib.Tools.CBDrawTool('myTool', window.map, 'Polygon', true);
+    // 监听图形编辑
+    this.drawtool.on('selectDraw', geom => {
+      this.editingDrawGeom = geom.target.geometry ? geom.target.geometry : geom.target.geom
+          ? geom.target.geom
+          : geom.target;
+      if (this.editingDrawGeom.isEditing && this.editingDrawGeom.isEditing()) {
+        // 点击地图 图形取消编辑状态
+        window.map.map.once('click', () => {
+          this.editingDrawGeom.endEdit();
+          this.dialogVisible = true;
+        });
+      } else {
+        window.map.map.once('click', () => {
+          this.editingDrawGeom = null;
+        });
+      }
+    });
+    this.drawtool.on('drawend', (geom) => {
+      this.editingDrawGeom = geom.target.geometry ? geom.target.geometry : geom.target.geom
+          ? geom.target.geom
+          : geom.target;
+      this.dialogVisible = true;
+      this.drawState = false;
+    });
   },
   mounted() {
     this.getFenceList();
   },
   methods: {
     getFenceList() {
-      const vlayer = new BDLayers.Lib.Layer.CBVectorLayer('vl');
-      window.map.addCustomLayers(vlayer);
-      const polygon = new BDLayers.Lib.Overlays.Polygon('p1', {
+      if (!this.layer) {
+        this.layer = new BDLayers.Lib.Layer.CBVectorLayer('vl');
+        window.map.addCustomLayers(this.layer);
+      }
+      const result = [
+        {
+          id: 1,
+          name: '高空施工作业危险区域',
+        }, {
+          id: 2,
+          name: '危化品堆放区域',
+        },
+      ];
+      this.editingDrawGeom = null;
+      const polygon = this.drawPoly({
         coordinates: [
           [
             [118.86318437, 31.52265586],
-            [118.86265566, 31.52228823],
-            [118.86086721, 31.52109704],
-            [118.85828955, 31.51855584],
-            [118.85609438, 31.51526213],
-            [118.8532821, 31.5110545],
-            [118.85176272, 31.5086165],
-            [118.85066095, 31.50684702],
-            [118.8475185, 31.50462126],
-            [118.84380357, 31.50436705],
-            [118.84167739, 31.50515526],
-            [118.84092182, 31.50623378],
-            [118.84056598, 31.50775093],
-            [118.84080926, 31.51001804],
-            [118.84122597, 31.5112316],
-            [118.84243213, 31.51333141],
-            [118.84423733, 31.51633511],
-            [118.84663359, 31.5190328],
-            [118.84861203, 31.52112279],
-            [118.85080872, 31.52367],
-            [118.85279596, 31.52591382],
-            [118.85515677, 31.52739321],
-            [118.85829864, 31.52901656],
-            [118.86102371, 31.52928225],
-            [118.86335805, 31.52894132],
-            [118.86548497, 31.52815403],
-            [118.86624005, 31.52693407],
             [118.86620514, 31.52541921],
             [118.86520697, 31.52406319],
             [118.86318437, 31.52265586],
           ],
         ],
-        symbol: {
+        bizAttr: {
+          name: 'test',
+        },
+      });
+      this.layer.addGeometry(polygon);
+      result[0].polygon = polygon;
+      const polygon1 = this.drawPoly({
+        coordinates: [
+          [
+            [118.86318437, 31.52265586],
+            [118.86620514, 31.52541921],
+            [118.86520697, 31.52406319],
+            [118.86318437, 31.52265586],
+          ],
+        ],
+        bizAttr: {
+          name: 'test',
+        },
+      });
+      this.layer.addGeometry(polygon1);
+      result[1].polygon = polygon1;
+      this.fenceList = result;
+      window.map.flyToPoint([118.86318437, 31.52265586], {
+        zoom: 13,
+        pitch: 0,
+        bearing: 20,
+        duration: 5000,
+      });
+    },
+    cancelEdit() {
+      this.drawtool.clear();
+      this.dialogVisible = false;
+    },
+    saveEdit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          const resultCoor = [];
+          const coordinates = [];
+          this.editingDrawGeom._coordinates.forEach(coor => {
+            const {
+              x,
+              y,
+            } = coor;
+            resultCoor.push(`${x} ${y}`);
+            coordinates.push([x, y]);
+          });
+          resultCoor.push(resultCoor[0]);
+          this.form.poly = `POLYGON((${resultCoor.join(',')}))`;
+          this.$message({
+            type: 'success',
+            message: '保存!',
+          });
+          this.dialogVisible = false;
+          this.drawtool.clear();
+          const polygon = this.drawPoly({
+            coordinates: coordinates,
+            labelSymbol: {
+              labelText: this.form.name,
+            },
+            bizAttr: this.form,
+          });
+          this.layer.addGeometry(polygon);
+          this.editingDrawGeom = null;
+          this.editState = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    startDraw() {
+      this.editingDrawGeom = null;
+      this.drawState = true;
+      this.drawtool.enable();
+    },
+    /**
+     *
+     * @param coordinates
+     *  [
+     *           [
+     *             [118.86318437, 31.52265586],
+     *             [118.86620514, 31.52541921],
+     *             [118.86520697, 31.52406319],
+     *             [118.86318437, 31.52265586],
+     *           ],
+     *         ]
+     * @param symbol
+     * @param bizAttr
+     * @param labelSymbol
+     * @returns {BDLayers.Lib.Overlays.Polygon}
+     */
+    drawPoly({
+      coordinates,
+      symbol = {},
+      bizAttr = {},
+      labelSymbol = {},
+    }) {
+      const polygon = new BDLayers.Lib.Overlays.Polygon('p1', {
+        coordinates: coordinates,
+        symbol: Object.assign({
           lineColor: '#34495e',
           lineWidth: 2,
           polygonFill: '#1bbc9b',
           polygonOpacity: 0.4,
-        },
-        labelSymbol: {
+        }, symbol),
+        labelSymbol: Object.assign({
           labelText: '多边形',
           labelTextSize: 10,
-        },
-        bizAttr: {
-          name: '围栏名称',
-        },
+        }, labelSymbol),
+        bizAttr: bizAttr,
       });
-      // 地图绘制工具
-      const drawtool = new BDLayers.Lib.Tools.CBDrawTool('myTool', window.map, 'Polygon', true);
-      let editingDrawGeom = null;
       //多边形的点击事件
       polygon.on('click', (data) => {
         console.log(data.target.options);
         if (this.editState) {
           return;
         }
-        editingDrawGeom = data.target.geometry ? data.target.geometry : data.target.geom
+        this.form.name = data.target.options.bizAttr.name;
+        this.editingDrawGeom = data.target.geometry ? data.target.geometry : data.target.geom
             ? data.target.geom
             : data.target;
         this.$confirm('检测到选中了围栏，请选择操作类型?', '提示', {
@@ -120,11 +300,11 @@ export default {
         }).then(() => {
           // 开始编辑围栏
           this.editState = true;
-          editingDrawGeom.startEdit();
+          this.editingDrawGeom.startEdit();
         }).catch(() => {
-          editingDrawGeom.remove();
+          this.editingDrawGeom.remove();
           this.editState = false;
-          editingDrawGeom = null;
+          this.editingDrawGeom = null;
           this.$message({
             type: 'info',
             message: '删除围栏',
@@ -132,54 +312,17 @@ export default {
         });
         // 点击地图 图形取消编辑状态
         window.map.map.once('click', () => {
-          editingDrawGeom.endEdit();
-
-          this.$confirm('检测到未保存的内容，是否保存修改?', '提示', {
-            confirmButtonText: '保存',
-            cancelButtonText: '放弃修改',
-            type: 'warning',
-          }).then(() => {
-            debugger
-
-            this.$message({
-              type: 'success',
-              message: '保存!',
-            });
-            editingDrawGeom = null;
-            this.editState = false;
-          }).catch(() => {
-
-          });
+          this.editingDrawGeom.endEdit();
+          this.dialogVisible = true;
         });
       });
-      vlayer.addGeometry(polygon);
-      vlayer.addGeometry(polygon1);
-      window.map.flyToPoint([118.86318437, 31.52265586], {
-        zoom: 13,
-        pitch: 0,
-        bearing: 20,
-        duration: 5000,
-      });
-
-      // 监听图形编辑
-      // drawtool.on('selectDraw', geom => {
-      //   editingDrawGeom = geom.target.geometry ? geom.target.geometry : geom.target.geom
-      //       ? geom.target.geom
-      //       : geom.target;
-      //   if (editingDrawGeom.isEditing && editingDrawGeom.isEditing()) {
-      //     // 点击地图 图形取消编辑状态
-      //     window.map.map.once('click', function () {
-      //       editingDrawGeom.endEdit();
-      //       editingDrawGeom = null;
-      //     });
-      //   } else {
-      //     window.map.map.once('click', function () {
-      //       editingDrawGeom = null;
-      //     });
-      //   }
-      // });
+      return polygon;
+    },
+    delFence(fence) {
+      // polygon.geom.startEdit();
+      fence.polygon.geom.remove();
     },
-    clearAll() {
+    editFence(fence) {
 
     },
   },

ruoyi-ui/src/views/bd/fenceEvt/index.scss

@@ -0,0 +1,2 @@
+.fence-location-container {
+}

ruoyi-ui/src/views/bd/fenceEvt/index.vue

@@ -0,0 +1,282 @@
+<template>
+  <pannel class="fence-location-container">
+    <template v-slot:title>
+      围栏闯禁事件
+    </template>
+    <template v-slot:action>
+
+    </template>
+    <template v-slot:content>
+      <div class="location-list">
+        <template v-for="fence in fenceList">
+          <div :key="`fence_${fence.id}`" class="list-item">
+          <span class="over-flow-hidden" style="width: 40%">
+            {{ fence.name }}
+          </span>
+            <span class="over-flow-hidden" style="width: 40%">
+           {{ fence.updateTime }}
+          </span>
+            <span class="over-flow-hidden" style="width: 20%">
+          </span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </pannel>
+</template>
+
+<script>
+
+import Pannel from '@/views/bd/pannel/index.vue';
+// this.drawtool = new BDLayers.Lib.Tools.CBDrawTool('mytool', this.mapView, 'Rectangle', true); // 绘制矩形，参数1：id，参数2：地图，参数3：绘制类型，参数4：是否可拖拽编辑
+// this.drawtool.enable(); // 开始绘制
+// this.drawtool.disable(); // 结束绘制
+// this.drawtool.clear(); // 清除绘制内容
+// this.drawtool.setDrawMode(type); // 设置绘制类型
+// this.drawtool.on('drawend', (geom) => {}) // 绘制结束事件
+// this.drawtool.on('selectDraw', geom => {}) // 绘制完毕后选择绘制图形
+export default {
+  name: 'fence',
+  components: { Pannel },
+  data() {
+    return {
+      playItem: {},
+      editState: false,
+      editPolyInfo: {},
+      layer: null,
+      dialogVisible: false,
+      editingDrawGeom: null,
+      drawState: false,
+      drawtool: null,
+      form: {
+        name: '',
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入围栏名称',
+            trigger: 'blur',
+          },
+        ],
+      },
+      fenceList: [],
+    };
+  },
+  // 组件卸载前清空图层信息
+  beforeDestroy() {
+    window.map.removeLayersById('vl');
+    this.drawtool.disabled();
+  },
+  created() {
+    // 地图绘制工具
+    this.drawtool = new BDLayers.Lib.Tools.CBDrawTool('myTool', window.map, 'Polygon', true);
+    // 监听图形编辑
+    this.drawtool.on('selectDraw', geom => {
+      this.editingDrawGeom = geom.target.geometry ? geom.target.geometry : geom.target.geom
+          ? geom.target.geom
+          : geom.target;
+      if (this.editingDrawGeom.isEditing && this.editingDrawGeom.isEditing()) {
+        // 点击地图 图形取消编辑状态
+        window.map.map.once('click', () => {
+          this.editingDrawGeom.endEdit();
+          this.dialogVisible = true;
+        });
+      } else {
+        window.map.map.once('click', () => {
+          this.editingDrawGeom = null;
+        });
+      }
+    });
+    this.drawtool.on('drawend', (geom) => {
+      this.editingDrawGeom = geom.target.geometry ? geom.target.geometry : geom.target.geom
+          ? geom.target.geom
+          : geom.target;
+      this.dialogVisible = true;
+      this.drawState = false;
+    });
+  },
+  mounted() {
+    this.getFenceList();
+  },
+  methods: {
+    getFenceList() {
+      if (!this.layer) {
+        this.layer = new BDLayers.Lib.Layer.CBVectorLayer('vl');
+        window.map.addCustomLayers(this.layer);
+      }
+      const result = [
+        {
+          id: 1,
+          name: '高空施工作业危险区域',
+        }, {
+          id: 2,
+          name: '危化品堆放区域',
+        },
+      ];
+      this.editingDrawGeom = null;
+      const polygon = this.drawPoly({
+        coordinates: [
+          [
+            [118.86318437, 31.52265586],
+            [118.86620514, 31.52541921],
+            [118.86520697, 31.52406319],
+            [118.86318437, 31.52265586],
+          ],
+        ],
+        bizAttr: {
+          name: 'test',
+        },
+      });
+      this.layer.addGeometry(polygon);
+      result[0].polygon = polygon;
+      const polygon1 = this.drawPoly({
+        coordinates: [
+          [
+            [118.86318437, 31.52265586],
+            [118.86620514, 31.52541921],
+            [118.86520697, 31.52406319],
+            [118.86318437, 31.52265586],
+          ],
+        ],
+        bizAttr: {
+          name: 'test',
+        },
+      });
+      this.layer.addGeometry(polygon1);
+      result[1].polygon = polygon1;
+      this.fenceList = result;
+      window.map.flyToPoint([118.86318437, 31.52265586], {
+        zoom: 13,
+        pitch: 0,
+        bearing: 20,
+        duration: 5000,
+      });
+    },
+    cancelEdit() {
+      this.drawtool.clear();
+      this.dialogVisible = false;
+    },
+    saveEdit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          const resultCoor = [];
+          const coordinates = [];
+          this.editingDrawGeom._coordinates.forEach(coor => {
+            const {
+              x,
+              y,
+            } = coor;
+            resultCoor.push(`${x} ${y}`);
+            coordinates.push([x, y]);
+          });
+          resultCoor.push(resultCoor[0]);
+          this.form.poly = `POLYGON((${resultCoor.join(',')}))`;
+          this.$message({
+            type: 'success',
+            message: '保存!',
+          });
+          this.dialogVisible = false;
+          this.drawtool.clear();
+          const polygon = this.drawPoly({
+            coordinates: coordinates,
+            labelSymbol: {
+              labelText: this.form.name,
+            },
+            bizAttr: this.form,
+          });
+          this.layer.addGeometry(polygon);
+          this.editingDrawGeom = null;
+          this.editState = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    startDraw() {
+      this.editingDrawGeom = null;
+      this.drawState = true;
+      this.drawtool.enable();
+    },
+    /**
+     *
+     * @param coordinates
+     *  [
+     *           [
+     *             [118.86318437, 31.52265586],
+     *             [118.86620514, 31.52541921],
+     *             [118.86520697, 31.52406319],
+     *             [118.86318437, 31.52265586],
+     *           ],
+     *         ]
+     * @param symbol
+     * @param bizAttr
+     * @param labelSymbol
+     * @returns {BDLayers.Lib.Overlays.Polygon}
+     */
+    drawPoly({
+      coordinates,
+      symbol = {},
+      bizAttr = {},
+      labelSymbol = {},
+    }) {
+      const polygon = new BDLayers.Lib.Overlays.Polygon('p1', {
+        coordinates: coordinates,
+        symbol: Object.assign({
+          lineColor: '#34495e',
+          lineWidth: 2,
+          polygonFill: '#1bbc9b',
+          polygonOpacity: 0.4,
+        }, symbol),
+        labelSymbol: Object.assign({
+          labelText: '多边形',
+          labelTextSize: 10,
+        }, labelSymbol),
+        bizAttr: bizAttr,
+      });
+      //多边形的点击事件
+      polygon.on('click', (data) => {
+        console.log(data.target.options);
+        if (this.editState) {
+          return;
+        }
+        this.form.name = data.target.options.bizAttr.name;
+        this.editingDrawGeom = data.target.geometry ? data.target.geometry : data.target.geom
+            ? data.target.geom
+            : data.target;
+        this.$confirm('检测到选中了围栏，请选择操作类型?', '提示', {
+          confirmButtonText: '编辑围栏',
+          cancelButtonText: '删除围栏',
+          type: 'warning',
+        }).then(() => {
+          // 开始编辑围栏
+          this.editState = true;
+          this.editingDrawGeom.startEdit();
+        }).catch(() => {
+          this.editingDrawGeom.remove();
+          this.editState = false;
+          this.editingDrawGeom = null;
+          this.$message({
+            type: 'info',
+            message: '删除围栏',
+          });
+        });
+        // 点击地图 图形取消编辑状态
+        window.map.map.once('click', () => {
+          this.editingDrawGeom.endEdit();
+          this.dialogVisible = true;
+        });
+      });
+      return polygon;
+    },
+    delFence(fence) {
+      // polygon.geom.startEdit();
+      fence.polygon.geom.remove();
+    },
+    editFence(fence) {
+
+    },
+  },
+};
+</script>
+<style lang="scss" src="./index.scss" />

ruoyi-ui/src/views/bd/location/index.scss

@@ -1,33 +0,0 @@
-.location-list {
-  width: 100%;
-  padding: 0 10px;
-
-  .list-item {
-    padding: 0 10px;
-    height: 30px;
-    box-sizing: border-box;
-    background: url("./img/bg_evt_stat.png") 100% 100% no-repeat;
-    background-size: 100% 100%;
-    color: #fefefe;
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-
-    > span {
-      &:not(:first-child) {
-        margin-left: 10px;
-      }
-
-      i {
-        &:hover {
-          color: #00afff;
-          cursor: pointer;
-        }
-
-        &:not(:first-child) {
-          margin-left: 5px;
-        }
-      }
-    }
-  }
-}

ruoyi-ui/src/views/bd/pannel/index.scss

@@ -33,7 +33,39 @@
     margin-top: 10px;
   }
 }
+.location-list {
+  width: 100%;
+  padding: 0 10px;
+
+  .list-item {
+    padding: 0 10px;
+    height: 30px;
+    box-sizing: border-box;
+    background: url("./img/bg_evt_stat.png") 100% 100% no-repeat;
+    background-size: 100% 100%;
+    color: #fefefe;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    > span {
+      &:not(:first-child) {
+        margin-left: 10px;
+      }
+
+      i {
+        &:hover {
+          color: #00afff;
+          cursor: pointer;
+        }
 
+        &:not(:first-child) {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+}
 .over-flow-hidden {
   white-space: nowrap; //强制文本在一行内输出
   overflow: hidden; //隐藏溢出部分