2026/6/9
- 需求书中明确要求 电子围栏、停留时长、人员定位 等技术手段（2.2.3、2.2.5），这些功能天然依赖地图。
- 地铁线路图可以作为“车站平面图”的替代，展示巡检点、设备位置和工程师实时位置，直观验证围栏逻辑。
- 该模块交互性强，地图能显著提升用户体验（看到自己是否进入围栏、设备分布等），非常适合作为功能演示亮点。
下面我以 前端开发人员 的身份，为您提供一套与AI协作的提示词方案，假设技术栈为 Vue 3 + 高德地图JS API（也可以换成Leaflet + OpenStreetMap，只需修改地图源）。
一、准备步骤
- 申请高德地图Web端API的Key（免费）。
- 在石家庄地铁官网上找到 线路图图片 或 站点坐标数据（也可自己手动记录几个关键站点的经纬度，如“石家庄站”、“北国商城”等）。
- 在项目中安装高德地图依赖：
npm install @amap/amap-jsapi-loader --save。
二、
第1步：生成“地图组件”基础代码
我需要在Vue3项目中实现一个地图组件，用于显示石家庄地铁线路图（作为设备运维系统的地图底图）。要求：
1. 使用高德地图JS API，引入一个简单的地图视图，中心点设置为石家庄站（经度114.5，纬度38.04），缩放级别12。
2. 在地图上添加几个自定义标记，代表“设备位置”。每个标记需要包含：设备名称、设备ID、当前状态（正常/异常）。标记可点击，点击后弹出信息窗口。
3. 提供一组示例数据（硬编码）：[
{ id:1, name:'闸机A', lng:114.51, lat:38.045, status:'正常' },
{ id:2, name:'电梯B', lng:114.52, lat:38.05, status:'异常' }
]
4. 组件接受一个props：`selectedDeviceId`，当传入时高亮对应的标记（改变颜色或图标）。
5. 组件向外emit事件：`markerClick`，携带设备对象。
请输出完整的Vue组件代码，包括<template>、<script setup>、<style>，并包含必要的注释。
第2步：集成到巡检工单页面（模拟电子围栏）
基于上面生成的地图组件，我要把它集成到“巡检工单处理页面”中。需求如下：
- 页面上半部分显示工单基本信息（工单号、巡检设备名称、计划时间）。
- 下半部分展示地图组件，地图上标记当前巡检需要检查的设备位置。
- 增加一个“模拟定位”按钮，点击后随机生成一个当前用户的位置（经纬度），并在地图上显示一个蓝色圆点代表工程师。
- 增加一个“电子围栏”模拟：在地图上以某个设备点为中心画一个半径为100米的半透明圆。如果模拟的工程师位置落在圆内，则页面显示“已在围栏内，可开始巡检”，并激活一个“开始巡检”按钮；否则按钮禁用。
- 围栏半径和中心设备可配置（例如当前工单对应的设备）。
请修改原有地图组件，并给出完整的巡检工单页面代码。要求使用Vue3组合式API，且逻辑清晰。
第3步：添加停留时长校验（模拟）
继续增强功能：在“开始巡检”按钮被点击后，记录当前时间，并开始计时。用户必须在围栏内持续停留至少2分钟，才能激活“完成巡检”按钮。如果中途移出围栏，计时重置并提示。
同时，在地图上显示一个倒计时或计时器文本（已停留 xx 秒）。
请给出增量代码（只需要说明修改了哪些部分，或直接给出完整的更新后的组件）。
第4步：与后端联调提示（可选）
后端接口约定：
- GET /api/workorder/{id}/device-location 返回当前工单对应的设备坐标和围栏半径。
- POST /api/workorder/{id}/start-inspection 接收 { lat, lng, staySeconds }，验证是否在围栏内且停留时长足够。
- 前端需要调用这些接口。
请根据上述约定，调整前端代码，把模拟逻辑替换为真实API调用，并增加加载状态和错误提示。
三、协作建议
- 先让AI生成基础地图组件 → 您自己手动测试是否能正常显示石家庄地铁线路（高德默认显示街道图，但可以叠加站点标注）。
- 然后逐步要求AI添加电子围栏、停留时长 → 每一步都单独提问，不要把太多需求塞进一次对话，否则AI容易遗漏。
- 测试时使用模拟的经纬度，不用真实GPS，方便调试。
- 如果希望用石家庄地铁线路图片作为底图而非标准街道图，可以告诉AI：“使用高德地图的图片图层，叠加一张石家庄地铁线路图的透明PNG，并设置坐标范围”。
四、最终模块位置建议
巡检工单 → 工单详情 → 地图操作区域。这样既验证了地图功能，又直接服务于核心业务（电子围栏控制巡检资格）。
浙公网安备 33010602011771号