167 行
5.8 KiB
Markdown
167 行
5.8 KiB
Markdown
# 电子围栏功能实现说明
|
||
|
||
## 功能概述
|
||
在门店管理页面（`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` 字段 |