# 电子围栏功能实现说明

## 功能概述
在门店管理页面（`manager.html`）中直接集成了电子围栏功能，支持创建、编辑、删除多个自定义多边形围栏，数据暂存在JavaScript变量中，页面保存时通过现有接口将围栏数据提交到后端进行数据库存储。

## 实现的功能特性

### 1. 围栏管理
- ✅ 添加新围栏：支持创建多个自定义围栏
- ✅ 编辑围栏：修改围栏名称和形状
- ✅ 删除围栏：移除不需要的围栏
- ✅ 启用/禁用围栏：切换围栏状态

### 2. 地图绘制
- ✅ 腾讯地图集成：使用腾讯地图API进行地图显示
- ✅ 多边形绘制：支持在地图上绘制自定义多边形围栏
- ✅ 围栏编辑：支持对已绘制的围栏进行编辑
- ✅ 围栏显示：在地图上可视化显示所有围栏

### 3. 数据处理
- ✅ 坐标存储：将围栏坐标数据以JSON格式存储
- ✅ 表单集成：围栏数据与门店信息一起提交
- ✅ 临时存储：围栏数据在页面中临时存储，保存时统一提交

## 技术实现细节

### 前端实现

#### Vue数据结构
```javascript
data() {
    return {
        // 电子围栏相关数据
        deliveryFences: [], // 电子围栏列表
        currentEditingFence: null, // 当前编辑的围栏索引
        editingFenceData: { // 当前编辑的围栏数据
            fence_name: '',
            fence_data: '',
            fence_type: 1, // 1=多边形，2=圆形
            is_active: 1,
            tempId: null
        },
        isDrawingMode: false, // 是否处于绘制模式
        fenceMap: null, // 腾讯地图实例
        currentPolygon: null, // 当前绘制的多边形
        drawingManager: null, // 绘制管理器
        tempFenceId: 1, // 临时ID计数器
        mapKey: '', // 腾讯地图API Key
    }
}
```

#### 核心方法
1. **围栏管理方法**
   - `addNewFence()`: 添加新围栏
   - `editFence(index)`: 编辑指定围栏
   - `deleteFence(index)`: 删除围栏
   - `toggleFenceStatus(index)`: 切换围栏状态
   - `saveCurrentFence()`: 保存当前编辑的围栏
   - `cancelEditFence()`: 取消编辑

2. **地图相关方法**
   - `initFenceMap()`: 初始化围栏地图
   - `getTencentMapKey()`: 获取腾讯地图API密钥
   - `loadTencentMapScript()`: 动态加载腾讯地图脚本
   - `initTencentFenceMap()`: 初始化腾讯地图实例

3. **绘制相关方法**
   - `toggleDrawingMode()`: 切换绘制模式
   - `startDrawing()`: 开始绘制围栏
   - `stopDrawing()`: 停止绘制
   - `clearCurrentDrawing()`: 清除当前绘制
   - `displayFenceOnMap(fenceData)`: 在地图上显示围栏

#### UI组件
围栏功能UI直接集成在门店管理表单中，包含：
- 围栏列表显示区域
- 围栏编辑表单
- 腾讯地图绘制区域
- 绘制工具按钮

### 数据库表结构
参考 `fence_table.sql` 文件中的表结构：

```sql
CREATE TABLE `ls_store_delivery_fence` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `store_id` int(11) NOT NULL COMMENT '门店ID',
  `merchant_id` int(11) NOT NULL COMMENT '商户ID',
  `fence_name` varchar(100) NOT NULL DEFAULT '' COMMENT '围栏名称',
  `fence_data` longtext NOT NULL COMMENT '围栏坐标数据JSON格式',
  `fence_type` tinyint(1) NOT NULL DEFAULT 1 COMMENT '围栏类型：1=多边形，2=圆形',
  `is_active` tinyint(1) NOT NULL DEFAULT 1 COMMENT '是否启用：0=禁用，1=启用',
  `create_time` int(11) NOT NULL DEFAULT 0 COMMENT '创建时间',
  `update_time` int(11) NOT NULL DEFAULT 0 COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_store_id` (`store_id`),
  KEY `idx_merchant_id` (`merchant_id`),
  KEY `idx_is_active` (`is_active`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='门店配送电子围栏表';
```

### 数据提交格式
在表单提交时，围栏数据以以下格式添加到提交数据中：

```javascript
data.delivery_fences = this.deliveryFences.map(fence => ({
    fence_name: fence.fence_name,
    fence_data: fence.fence_data, // JSON格式的坐标数据
    fence_type: fence.fence_type,
    is_active: fence.is_active
}));
```

### 坐标数据格式
围栏坐标数据以JSON格式存储，示例：
```json
[
    {"lat": 39.915, "lng": 116.404},
    {"lat": 39.916, "lng": 116.405},
    {"lat": 39.917, "lng": 116.406},
    {"lat": 39.915, "lng": 116.404}
]
```

## 使用说明

### 1. 添加围栏
1. 点击"添加围栏"按钮
2. 输入围栏名称
3. 在地图上点击"开始绘制"按钮
4. 在地图上点击多个点绘制多边形
5. 绘制完成后点击"保存围栏"

### 2. 编辑围栏
1. 在围栏列表中点击"编辑"按钮
2. 修改围栏名称或在地图上重新绘制
3. 点击"保存围栏"确认修改

### 3. 删除围栏
1. 在围栏列表中点击"删除"按钮
2. 确认删除操作

### 4. 启用/禁用围栏
1. 在围栏列表中点击状态开关
2. 围栏状态会立即更新

### 5. 保存到数据库
1. 完成所有围栏配置后
2. 点击页面底部的"立即提交"按钮
3. 围栏数据会与门店信息一起保存到数据库

## 注意事项

1. **地图API密钥**：系统会自动从后端获取腾讯地图API密钥
2. **数据暂存**：围栏数据在页面中临时存储，只有点击"立即提交"才会保存到数据库
3. **坐标精度**：围栏坐标数据保留足够精度以确保准确性
4. **浏览器兼容性**：建议使用现代浏览器以获得最佳体验
5. **网络连接**：需要稳定的网络连接以加载地图和提交数据

## 后端接口说明

电子围栏数据通过现有的门店设置接口 `storeSet` 进行提交，后端需要处理 `delivery_fences` 字段中的围栏数据，并将其存储到 `ls_store_delivery_fence` 表中。

提交的数据格式：
- `delivery_fences`: 围栏数据数组
- 每个围栏包含：`fence_name`, `fence_data`, `fence_type`, `is_active` 字段