fix: 区域管理

src/router/index.js

@@ -74,6 +74,13 @@ export const constantRoutes = [
         name: 'orderDetails',
         hidden: true,
         meta: { title: '订单详情', activeMenu: '/order/order-manage' }
+      },
+      {
+        path: '/map-setting',
+        component: () => import('@/views/system/dept/mapSetting'),
+        name: 'mapSetting',
+        hidden: true,
+        meta: { title: '区域设置', activeMenu: '/system/dept' }
       }
     ]
   },

src/views/system/dept/index.vue

@@ -54,6 +54,8 @@
                   v-hasPermi="['system:dept:add']">新增</el-button>
                <el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete"
                   @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
+                  <el-button link type="primary" icon="Setting"
+                  @click="handleSetting(scope.row)">区域设置</el-button>
             </template>
          </el-table-column>
       </el-table>
@@ -141,7 +143,7 @@
 <script setup name="Dept">
 import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
 import address from "./address";
-
+const router = useRouter();
 const { proxy } = getCurrentInstance();
 const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
 
@@ -296,6 +298,11 @@ function handleDelete(row) {
    }).catch(() => { });
 }
 
+function handleSetting(row) {
+console.log("TCL: handleSetting -> row", row)
+   router.push({ path: '/map-setting',query: {id:row.deptId}});
+}
+
 function handleAreaOption() {
    province.value = address;
    if (form.value.cityCode && form.value.provinceCode) {

src/views/system/dept/mapSetting.vue

@@ -0,0 +1,141 @@
+<template>
+    <tlbs-map ref="mapRef" api-key="KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C" :center="center" :zoom="zoom"
+        :control="control" @click="handleClick" @map_inited="onMapInited">
+        <div style="position: absolute;top: 0;left: 0;z-index: 2000;">
+            <button @click.stop="mode = 'draw'">
+                设置绘制模式
+            </button>
+            <button @click.stop="mode = 'edit'">
+                设置编辑模式
+            </button>
+            <button @click.stop="activeId = 'polygon'">
+                设置画多边形
+            </button>
+            <button @click.stop="activeId = 'circle'">
+                设置画圆形
+            </button>
+            <button @click.stop="getOverlayList">
+                获取图层列表
+            </button>
+            <button @click.stop="onSelectGeometry">
+                选中图形
+            </button>
+            <button @click.stop="onGetSelectedList">
+                获取选中集合图形
+            </button>
+            <button @click.stop="onClear">
+                清空选中
+            </button>
+        </div>
+        <!--vue2使用:active-overlay-id.sync="activeId" -->
+        <tlbs-geometry-editor ref="editorRef" v-model:active-overlay-id="activeId" :action-mode="mode"
+            polygon-id="polygon" :default-polygon-geometries="geometries" :polygon-styles="styles" selectable
+            @select="onSelect" @draw_complete="onDrowComplet" @adjust_complete="onAdjustComplete"
+            @draw_error="onDrawError" />
+    </tlbs-map>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+import { onMounted } from 'vue';
+import { getMapCoder } from '@/api/map';
+const paths = [
+    { lat: 40.041117253378246, lng: 116.2722415837743 },
+    { lat: 40.03942536171407, lng: 116.2726277820093 },
+    { lat: 40.03970460886076, lng: 116.27483769345417 },
+    { lat: 40.041404706498625, lng: 116.27443003983899 },
+];
+const mapRef = ref(null);
+const center = ref({ lat: 40.040452, lng: 116.273486 });
+const zoom = ref(17);
+const editorRef = ref(null);
+const mode = ref('edit');
+const activeId = ref('polygon');
+const onToggleMode = () => {
+    mode.value = mode.value === 'draw' ? 'edit' : 'draw';
+};
+
+const onSelect = (e) => {
+    console.log('select', e);
+};
+const onDrowComplet = (geomeytry) => {
+    console.log(geomeytry);
+};
+const onAdjustComplete = (geomeytry) => {
+    console.log(geomeytry);
+};
+const onDrawError = (e) => {
+    console.log(e);
+};
+
+const getOverlayList = () => {
+    console.log(editorRef.value.editor.getOverlayList());
+};
+
+const onMapInited = () => {
+    // 地图加载完成后，可以获取地图实例，调用地图实例方法
+    console.log(mapRef.value.map);
+};
+
+const control = {
+    scale: {},
+    zoom: {
+        position: 'topRight',
+    },
+}
+const geometries = [
+    {
+        id: 'firstPolygon',
+        styleId: 'polygon', // 样式id
+        paths, // 多边形的位置信息
+        properties: {
+            // 多边形的属性数据
+            title: 'polygon',
+        },
+    },
+]
+
+const styles = {
+    polygon: {
+        color: '#3777FF', // 面填充色
+        showBorder: false, // 是否显示拔起面的边线
+        borderColor: '#00FFFF', // 边线颜色
+    },
+}
+
+function handleClick(e) {
+    console.log(e);
+}
+function onClear() {
+    editorRef.value.editor.select([]);
+}
+function onSelectGeometry() {
+    editorRef.value.editor.select(['firstPolygon']);
+}
+function onGetSelectedList() {
+    console.log(editorRef.value.editor.getSelectedList());
+}
+</script>
+
+<style>
+.map-container {
+    width: 100%;
+    height: 100%;
+}
+</style>
+<style scoped>
+.control-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1001;
+    display: flex;
+    align-items: center;
+}
+
+button {
+    padding: 4px;
+    background-color: #fff;
+    margin-right: 5px;
+    border: 1px solid #ddd;
+}
+</style>