|
|
@@ -1,2305 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="page">
|
|
|
- <!-- 步骤头部 -->
|
|
|
- <view class="header">
|
|
|
- <view class="title-row">
|
|
|
- <text class="title">新增作业</text>
|
|
|
- <text class="device-id">设备：{{ jobState.machineCode || '未知设备' }}</text>
|
|
|
- </view>
|
|
|
- <view class="step-row">
|
|
|
- <view
|
|
|
- v-for="step in steps"
|
|
|
- :key="step.id"
|
|
|
- class="step-item"
|
|
|
- >
|
|
|
- <view
|
|
|
- class="step-index"
|
|
|
- :class="{
|
|
|
- active: currentStep === step.id,
|
|
|
- done: currentStep > step.id
|
|
|
- }"
|
|
|
- >
|
|
|
- <text v-if="currentStep > step.id">✓</text>
|
|
|
- <text v-else>{{ step.id }}</text>
|
|
|
- </view>
|
|
|
- <view class="step-texts">
|
|
|
- <text class="step-title">{{ step.title }}</text>
|
|
|
- <text class="step-sub">{{ step.sub }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 主体内容 -->
|
|
|
- <view class="content">
|
|
|
- <!-- Step 1: 选择作业区域类型 & 路线类型 -->
|
|
|
- <view v-if="currentStep === 1" class="step-block">
|
|
|
- <view class="card select-card">
|
|
|
- <view class="select-title">选择作业区域类型</view>
|
|
|
- <view class="select-sub">
|
|
|
- 不同区域形状将影响后续路线生成方式，请根据实际地块选择。
|
|
|
- </view>
|
|
|
- <view class="select-tabs">
|
|
|
- <view
|
|
|
- v-for="item in areaTypes"
|
|
|
- :key="item.value"
|
|
|
- class="select-tab"
|
|
|
- :class="{ active: selectedAreaType === item.value }"
|
|
|
- @click="selectAreaType(item.value)"
|
|
|
- >
|
|
|
- <text class="select-tab-label">{{ item.label }}</text>
|
|
|
- <text class="select-tab-sub" v-if="item.desc">
|
|
|
- {{ item.desc }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="card select-card">
|
|
|
- <view class="select-title">选择路线类型</view>
|
|
|
- <view class="select-sub">
|
|
|
- 依据区域形状推荐的路线类型，后端将按所选类型生成具体作业路线。
|
|
|
- </view>
|
|
|
- <view class="select-tabs">
|
|
|
- <view
|
|
|
- v-for="route in availableRouteTypes"
|
|
|
- :key="route.value"
|
|
|
- class="select-tab small"
|
|
|
- :class="{ active: selectedRouteType === route.value }"
|
|
|
- @click="selectRouteType(route.value)"
|
|
|
- >
|
|
|
- <text class="select-tab-label">{{ route.label }}</text>
|
|
|
- <text class="select-tab-sub" v-if="route.desc">
|
|
|
- {{ route.desc }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="card tips-card">
|
|
|
- <view class="tips-title">说明</view>
|
|
|
- <view class="tips-content">
|
|
|
- <text>
|
|
|
- - 本步骤仅选择区域类型与路线类型，下一步将进入地图打点新增作业区域。
|
|
|
- </text>
|
|
|
- <text>
|
|
|
- - 当前选择会随作业一起提交至后端，用于指导路线生成策略。
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- Step 2: 地图打点 -->
|
|
|
- <view v-else-if="currentStep === 2" class="step-block">
|
|
|
- <!-- 地图占位 -->
|
|
|
- <view class="map-card">
|
|
|
- <view class="map-header">
|
|
|
- <text class="map-title">地图预览</text>
|
|
|
- <view class="map-header-actions">
|
|
|
- <button class="btn-location" @click="manualLocation" :loading="locating">
|
|
|
- <text class="btn-location-text">{{ locating ? '定位中...' : '📍 定位' }}</text>
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- <text class="map-sub">通过遥控器移动设备，在地图上逐点记录</text>
|
|
|
- </view>
|
|
|
- <view class="map-body">
|
|
|
- <!-- 始终渲染地图容器以避免渲染时序问题；未加载脚本时容器为空白 -->
|
|
|
- <view id="mapContainer"></view>
|
|
|
- <text v-if="!amapLoaded" class="map-placeholder">
|
|
|
- 地图占位（H5 平台会加载高德地图 SDK）{{
|
|
|
- '\n'
|
|
|
- }}当前模式：{{ modeLabel }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="map-footer">
|
|
|
- <text class="map-hint">
|
|
|
- 提示：请使用遥控器移动设备到拐点位置，再点击“新增点”记录坐标。
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 模式切换 -->
|
|
|
- <view class="mode-card">
|
|
|
- <view class="mode-title-row">
|
|
|
- <text class="mode-title">点位类型</text>
|
|
|
- <text class="mode-sub">在不同模式下分别记录作业区域、障碍物和返航点</text>
|
|
|
- </view>
|
|
|
- <view class="mode-tabs">
|
|
|
- <view
|
|
|
- v-for="item in modes"
|
|
|
- :key="item.value"
|
|
|
- class="mode-tab"
|
|
|
- :class="{ active: mode === item.value }"
|
|
|
- @click="switchMode(item.value)"
|
|
|
- >
|
|
|
- <text class="mode-tab-label">{{ item.label }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 控制面板 -->
|
|
|
- <view class="panel-card">
|
|
|
- <view class="panel-row">
|
|
|
- <button class="btn primary" @click="addPoint">新增点</button>
|
|
|
- <button class="btn ghost" @click="undoPoint" :disabled="!canUndo">
|
|
|
- 撤销
|
|
|
- </button>
|
|
|
- <button
|
|
|
- class="btn ghost"
|
|
|
- v-if="mode === 'obstacle'"
|
|
|
- @click="finishCurrentObstacle"
|
|
|
- :disabled="!currentObstacle.length"
|
|
|
- >
|
|
|
- 完成当前障碍物
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- <view class="panel-desc">
|
|
|
- <text v-if="mode === 'area'">
|
|
|
- 作业区域至少需要 3 个点，建议为近似矩形。
|
|
|
- </text>
|
|
|
- <text v-else-if="mode === 'obstacle'">
|
|
|
- 每个障碍物可记录多个点，点击“完成当前障碍物”结束本组记录。
|
|
|
- </text>
|
|
|
- <text v-else>
|
|
|
- 仅允许 1 个返航点，重复新增会覆盖已有点。
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 已记录点列表 -->
|
|
|
- <view class="list-card">
|
|
|
- <view class="list-title-row">
|
|
|
- <text class="list-title">已记录点位</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <scroll-view scroll-y class="list-scroll">
|
|
|
- <!-- 作业区域点 -->
|
|
|
- <view class="list-group">
|
|
|
- <view class="list-group-header">
|
|
|
- <text class="list-group-title">作业区域点（{{ jobState.areaPoints.length }}）</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- v-if="jobState.areaPoints.length"
|
|
|
- class="point-list"
|
|
|
- >
|
|
|
- <view
|
|
|
- v-for="(p, index) in jobState.areaPoints"
|
|
|
- :key="'area-' + index"
|
|
|
- class="point-item"
|
|
|
- >
|
|
|
- <text class="point-label">P{{ index + 1 }}</text>
|
|
|
- <text class="point-coord">
|
|
|
- {{ formatPoint(p) }}
|
|
|
- </text>
|
|
|
- <text class="point-time">{{ formatPointTime(p.timestamp) }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-else class="empty-row">
|
|
|
- <text>暂未记录作业区域点</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 障碍物点 -->
|
|
|
- <view class="list-group">
|
|
|
- <view class="list-group-header">
|
|
|
- <text class="list-group-title">
|
|
|
- 障碍物（{{ jobState.obstacles.length + (currentObstacle.length ? 1 : 0) }} 组）
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- v-if="jobState.obstacles.length || currentObstacle.length"
|
|
|
- class="obstacle-list"
|
|
|
- >
|
|
|
- <!-- 已完成的障碍物组 -->
|
|
|
- <view
|
|
|
- v-for="(obs, oIdx) in jobState.obstacles"
|
|
|
- :key="'obs-' + oIdx"
|
|
|
- class="obstacle-item"
|
|
|
- >
|
|
|
- <text class="obstacle-title">障碍物 {{ oIdx + 1 }}（{{ obs.length }} 点）</text>
|
|
|
- <view
|
|
|
- v-for="(p, pIdx) in obs"
|
|
|
- :key="'obs-' + oIdx + '-' + pIdx"
|
|
|
- class="point-item small"
|
|
|
- >
|
|
|
- <text class="point-label">O{{ oIdx + 1 }}-{{ pIdx + 1 }}</text>
|
|
|
- <text class="point-coord">
|
|
|
- {{ formatPoint(p) }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 正在录入中的障碍物（未点击“完成当前障碍物”之前也要实时回显） -->
|
|
|
- <view
|
|
|
- v-if="currentObstacle.length"
|
|
|
- class="obstacle-item"
|
|
|
- >
|
|
|
- <text class="obstacle-title">障碍物 {{ jobState.obstacles.length + 1 }}（录入中，{{ currentObstacle.length }} 点）</text>
|
|
|
- <view
|
|
|
- v-for="(p, pIdx) in currentObstacle"
|
|
|
- :key="'obs-current-' + pIdx"
|
|
|
- class="point-item small"
|
|
|
- >
|
|
|
- <text class="point-label">O{{ jobState.obstacles.length + 1 }}-{{ pIdx + 1 }}</text>
|
|
|
- <text class="point-coord">
|
|
|
- {{ formatPoint(p) }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-else class="empty-row">
|
|
|
- <text>暂未记录障碍物点</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 返航点 -->
|
|
|
- <view class="list-group">
|
|
|
- <view class="list-group-header">
|
|
|
- <text class="list-group-title">返航点</text>
|
|
|
- </view>
|
|
|
- <view v-if="jobState.returnPoint" class="point-item">
|
|
|
- <text class="point-label">R</text>
|
|
|
- <text class="point-coord">
|
|
|
- {{ formatPoint(jobState.returnPoint) }}
|
|
|
- </text>
|
|
|
- <text class="point-time">
|
|
|
- {{ formatPointTime(jobState.returnPoint.timestamp) }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view v-else class="empty-row">
|
|
|
- <text>暂未设置返航点</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- Step 3: 起点选择 -->
|
|
|
- <view v-else-if="currentStep === 3" class="step-block">
|
|
|
- <view class="map-card small">
|
|
|
- <view class="map-header">
|
|
|
- <text class="map-title">选择起点</text>
|
|
|
- <text class="map-sub">
|
|
|
- 从已记录的作业区域点中选择作业起点，可通过左右切换预览。
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="map-body">
|
|
|
- <text class="map-placeholder">
|
|
|
- 这里显示作业区域示意图（占位）{{
|
|
|
- '\n'
|
|
|
- }}当前起点：P{{ currentStartDisplay }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="panel-card">
|
|
|
- <view class="panel-row center">
|
|
|
- <button class="btn ghost" @click="prevStart" :disabled="!canChangeStart">
|
|
|
- 上一个
|
|
|
- </button>
|
|
|
- <view class="start-index">
|
|
|
- <text class="start-index-text">
|
|
|
- 起点：P{{ currentStartDisplay }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <button class="btn ghost" @click="nextStart" :disabled="!canChangeStart">
|
|
|
- 下一个
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- <view class="panel-desc">
|
|
|
- <text>
|
|
|
- 提示：起点将决定设备的初始行进方向与作业顺序，后端会基于该起点生成具体路线。
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="list-card">
|
|
|
- <view class="list-title-row">
|
|
|
- <text class="list-title">作业区域点列表</text>
|
|
|
- </view>
|
|
|
- <scroll-view scroll-y class="list-scroll">
|
|
|
- <view
|
|
|
- v-for="(p, index) in jobState.areaPoints"
|
|
|
- :key="'start-' + index"
|
|
|
- class="point-item"
|
|
|
- :class="{ active: index === jobState.startPointIndex }"
|
|
|
- @click="setStartIndex(index)"
|
|
|
- >
|
|
|
- <text class="point-label">P{{ index + 1 }}</text>
|
|
|
- <text class="point-coord">{{ formatPoint(p) }}</text>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- Step 4: 作业信息确认 -->
|
|
|
- <view v-else-if="currentStep === 4" class="step-block">
|
|
|
- <view class="card confirm-card">
|
|
|
- <view class="confirm-title">
|
|
|
- <text>作业基本信息</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="form-item required">
|
|
|
- <text class="label">作业名称</text>
|
|
|
- <input
|
|
|
- class="input"
|
|
|
- v-model="jobState.jobName"
|
|
|
- placeholder="请输入作业名称，如“Test device - 北区作业”"
|
|
|
- />
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="form-item required">
|
|
|
- <text class="label">地块ID</text>
|
|
|
- <input
|
|
|
- class="input"
|
|
|
- v-model="jobState.fieldId"
|
|
|
- placeholder="请输入地块ID"
|
|
|
- type="text"
|
|
|
- />
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="form-item required">
|
|
|
- <text class="label">路径宽度（厘米）</text>
|
|
|
- <input
|
|
|
- class="input"
|
|
|
- v-model="jobState.pathWidth"
|
|
|
- placeholder="请输入路径宽度，单位：厘米"
|
|
|
- type="number"
|
|
|
- />
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="summary-row">
|
|
|
- <text class="summary-label">作业区域类型</text>
|
|
|
- <text class="summary-value">{{ areaTypeLabel }}</text>
|
|
|
- </view>
|
|
|
- <view class="summary-row">
|
|
|
- <text class="summary-label">路线类型</text>
|
|
|
- <text class="summary-value">{{ routeTypeLabel }}</text>
|
|
|
- </view>
|
|
|
- <view class="summary-row">
|
|
|
- <text class="summary-label">作业区域点</text>
|
|
|
- <text class="summary-value">{{ jobState.areaPoints.length }} 个</text>
|
|
|
- </view>
|
|
|
- <view class="summary-row">
|
|
|
- <text class="summary-label">障碍物</text>
|
|
|
- <text class="summary-value">
|
|
|
- {{ jobState.obstacles.length }} 组
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="summary-row">
|
|
|
- <text class="summary-label">返航点</text>
|
|
|
- <text class="summary-value">
|
|
|
- {{ jobState.returnPoint ? '已设置' : '未设置' }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="summary-row">
|
|
|
- <text class="summary-label">起点索引</text>
|
|
|
- <text class="summary-value">
|
|
|
- P{{ currentStartDisplay }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="card tips-card">
|
|
|
- <view class="tips-title">说明</view>
|
|
|
- <view class="tips-content">
|
|
|
- <text>
|
|
|
- - 前端仅负责记录点位与基本配置，并在本页面完成数据完整性校验。
|
|
|
- </text>
|
|
|
- <text>
|
|
|
- - 路线生成、几何合法性校验以及调度逻辑由后端 `/api/job/create` 负责处理。
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 步骤导航 -->
|
|
|
- <view class="footer">
|
|
|
- <button class="btn ghost" @click="prevStep" :disabled="currentStep === 1">
|
|
|
- 上一步
|
|
|
- </button>
|
|
|
- <button
|
|
|
- class="btn primary"
|
|
|
- v-if="currentStep < 4"
|
|
|
- @click="nextStep"
|
|
|
- >
|
|
|
- 下一步
|
|
|
- </button>
|
|
|
- <button
|
|
|
- class="btn primary"
|
|
|
- v-else
|
|
|
- :loading="submitting"
|
|
|
- @click="submitJob"
|
|
|
- >
|
|
|
- 完成并提交
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { createJob, getRealtimeData } from '@/api/services/job.js'
|
|
|
-import coordinateUtils from '@/utils/coordinateUtils.js'
|
|
|
-
|
|
|
- // 地图实例将保存在组件 data 的 `map` 字段中（见 data() 中的 map: null）
|
|
|
- // 我们在组件方法里设置一个绑定到全局回调的适配器，以便 AMap 的 script callback 能够调用组件内的初始化方法。
|
|
|
-// 简单模拟一个“当前设备坐标”，后续可替换为真实位置上报
|
|
|
-function mockCurrentPoint(baseIndex = 0) {
|
|
|
- const now = Date.now()
|
|
|
- const lng = 120.0 + (baseIndex % 10) * 0.0001
|
|
|
- const lat = 30.0 + (baseIndex % 10) * 0.0001
|
|
|
- return {
|
|
|
- lng,
|
|
|
- lat,
|
|
|
- timestamp: now
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- currentStep: 1,
|
|
|
- steps: [
|
|
|
- { id: 1, title: '区域与路线', sub: '选择作业区域类型与路线类型' },
|
|
|
- { id: 2, title: '打点建模', sub: '作业区域 / 障碍物 / 返航点' },
|
|
|
- { id: 3, title: '选择起点', sub: '确定作业起点位置' },
|
|
|
- { id: 4, title: '信息确认', sub: '填写作业名称并提交' }
|
|
|
- ],
|
|
|
- // 区域类型与路线类型
|
|
|
- areaTypes: [
|
|
|
- {
|
|
|
- value: 'loopArea',
|
|
|
- label: '回字形区域',
|
|
|
- desc: '规则四边形地块，适合标准往返或回字形路线',
|
|
|
- routes: [{ value: 'loop', label: '回字形路线（loop）' }]
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'bowArea',
|
|
|
- label: '弓子形区域',
|
|
|
- desc: '一侧为弧形或不规则，适合弓字形或自适应路线',
|
|
|
- routes: [{ value: 'bow', label: '弓子形路线（bow）' }]
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'customArea',
|
|
|
- label: '自定义区域',
|
|
|
- desc: '任意多边形地块，路线由后端自适应规划',
|
|
|
- routes: [{ value: 'custom', label: '自定义路线（custom）' }]
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'ridgeArea',
|
|
|
- label: '垄沟区域',
|
|
|
- desc: '存在大量垄沟或等距行的地块',
|
|
|
- routes: [{ value: 'ridge', label: '垄沟路线（ridge）' }]
|
|
|
- }
|
|
|
- ],
|
|
|
- selectedAreaType: 'loopArea',
|
|
|
- selectedRouteType: 'loop',
|
|
|
- mode: 'area', // area | obstacle | return
|
|
|
- modes: [
|
|
|
- { value: 'area', label: '作业区域点' },
|
|
|
- { value: 'obstacle', label: '障碍物点' },
|
|
|
- { value: 'return', label: '返航点' }
|
|
|
- ],
|
|
|
- currentObstacle: [],
|
|
|
- submitting: false,
|
|
|
- locating: false,
|
|
|
- // 高德地图相关
|
|
|
- map: null,
|
|
|
- amapLoaded: false,
|
|
|
- markers: [],
|
|
|
- geolocation: null, // 高德定位实例
|
|
|
- obstacleMarkers: [], // 障碍物标记数组
|
|
|
- returnMarker: null, // 返航点标记
|
|
|
-
|
|
|
- // 设备实时位置轮询（用于“遥控车 + 实时打点”）
|
|
|
- realtimeMarker: null,
|
|
|
- realtimeTimer: null,
|
|
|
- lastReportTime: null,
|
|
|
- latestRealtimeLngLat: null,
|
|
|
- polling: false,
|
|
|
- // 回字形(loopArea) 编辑相关
|
|
|
- loopMarkers: [],
|
|
|
- loopPolygon: null,
|
|
|
- loopReplaceIndex: null,
|
|
|
- // TODO: 将下面的占位 KEY 替换为真实的高德地图 Key（仅 H5 生效）
|
|
|
- amapKey: '9f2cac7ea18905dd3830cf7360a43a35',
|
|
|
- jscode: '41af52e416d1fd1b15020dac066cec86',
|
|
|
- jobState: {
|
|
|
- machineCode: '',
|
|
|
- areaType: 'loopArea',
|
|
|
- routeType: 'loop',
|
|
|
- areaPoints: [],
|
|
|
- obstacles: [],
|
|
|
- returnPoint: null,
|
|
|
- startPointIndex: 0,
|
|
|
- jobName: '',
|
|
|
- fieldId: '',
|
|
|
- pathWidth: 100
|
|
|
- }
|
|
|
- ,
|
|
|
- // 回字形编辑相关图形对象（外圈逻辑已移除）
|
|
|
- areaPolygon: null
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- onLoad(options) {
|
|
|
- const { machineCode, id } = options || {}
|
|
|
- if (machineCode) {
|
|
|
- this.jobState.machineCode = machineCode
|
|
|
- this.jobState.machineId = id
|
|
|
- }
|
|
|
- },
|
|
|
- // UniApp 页面就绪生命周期（H5 平台可在此初始化地图）
|
|
|
- onReady() {
|
|
|
- // 在页面就绪时再加载 AMap 脚本（确保 DOM 容器存在）
|
|
|
- if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
|
|
- // eslint-disable-next-line no-console
|
|
|
- console.log('[job-create] onReady - loading AMap script')
|
|
|
- this.loadScript()
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- computed: {
|
|
|
- modeLabel() {
|
|
|
- const m = this.modes.find(m => m.value === this.mode)
|
|
|
- return m ? m.label : ''
|
|
|
- },
|
|
|
- canUndo() {
|
|
|
- if (this.mode === 'area') {
|
|
|
- return this.jobState.areaPoints.length > 0
|
|
|
- }
|
|
|
- if (this.mode === 'obstacle') {
|
|
|
- return this.currentObstacle.length > 0
|
|
|
- }
|
|
|
- if (this.mode === 'return') {
|
|
|
- return !!this.jobState.returnPoint
|
|
|
- }
|
|
|
- return false
|
|
|
- },
|
|
|
- canChangeStart() {
|
|
|
- return this.jobState.areaPoints.length > 0
|
|
|
- },
|
|
|
- currentStartDisplay() {
|
|
|
- if (!this.jobState.areaPoints.length) return '-'
|
|
|
- return this.jobState.startPointIndex + 1
|
|
|
- },
|
|
|
- // 展示当前区域类型与路线类型名称
|
|
|
- areaTypeLabel() {
|
|
|
- const a = this.areaTypes.find(a => a.value === this.jobState.areaType)
|
|
|
- return a ? a.label : ''
|
|
|
- },
|
|
|
- availableRouteTypes() {
|
|
|
- const a = this.areaTypes.find(a => a.value === this.selectedAreaType)
|
|
|
- return a ? a.routes : []
|
|
|
- },
|
|
|
- routeTypeLabel() {
|
|
|
- const list = this.areaTypes.reduce((acc, cur) => {
|
|
|
- if (cur.routes && cur.routes.length) {
|
|
|
- acc.push(...cur.routes)
|
|
|
- }
|
|
|
- return acc
|
|
|
- }, [])
|
|
|
- const r = list.find(r => r.value === this.jobState.routeType)
|
|
|
- return r ? r.label : this.jobState.routeType
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- onUnload() {
|
|
|
- // 页面销毁时停止轮询
|
|
|
- this.clearRealtimePolling()
|
|
|
- // 清理所有地图标记
|
|
|
- this.clearAllMarkers()
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- loadScript() { // 挂载动态js
|
|
|
- // 绑定全局回调，AMap 脚本会调用 window.mapInit
|
|
|
- window.mapInit = () => {
|
|
|
- this._createMapWhenReady()
|
|
|
- }
|
|
|
-
|
|
|
- var script = document.createElement('script');
|
|
|
- script.src = `https://webapi.amap.com/maps?v=2.0&key=${this.amapKey}&callback=mapInit`;
|
|
|
- document.body.appendChild(script);
|
|
|
- this.amapLoaded = true
|
|
|
- },
|
|
|
-
|
|
|
- _createMapWhenReady() {
|
|
|
- const createWhenReady = () => {
|
|
|
- const container = document.getElementById('mapContainer')
|
|
|
- if (!container) {
|
|
|
- // 容器尚未渲染，延迟重试
|
|
|
- setTimeout(createWhenReady, 200)
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 创建基础地图实例并保存在组件 data.map 中
|
|
|
- const defaultCenter = [113.382, 22.5211]
|
|
|
-
|
|
|
- const createMapWithCenter = centerArr => {
|
|
|
- try {
|
|
|
- this.map = new AMap.Map('mapContainer', {
|
|
|
- center: centerArr || defaultCenter,
|
|
|
- zoom: 16
|
|
|
- })
|
|
|
- } catch (err) {
|
|
|
- console.error('[job-create] create map failed', err)
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 添加卫星图层
|
|
|
- try {
|
|
|
- if (AMap.TileLayer && typeof AMap.TileLayer.Satellite === 'function') {
|
|
|
- const sat = new AMap.TileLayer.Satellite()
|
|
|
- this.map.add(sat)
|
|
|
- }
|
|
|
- } catch (layerErr) {
|
|
|
- console.warn('[job-create] satellite layer failed', layerErr)
|
|
|
- }
|
|
|
-
|
|
|
- // 添加工具栏
|
|
|
- try {
|
|
|
- AMap.plugin('AMap.ToolBar', () => {
|
|
|
- const toolbar = new AMap.ToolBar()
|
|
|
- if (this.map && typeof this.map.addControl === 'function') {
|
|
|
- this.map.addControl(toolbar)
|
|
|
- }
|
|
|
- })
|
|
|
- } catch (pluginErr) {
|
|
|
- console.warn('[job-create] toolbar plugin failed', pluginErr)
|
|
|
- }
|
|
|
-
|
|
|
- // 加载高德定位插件（异步加载）
|
|
|
- AMap.plugin('AMap.Geolocation', () => {
|
|
|
- this.geolocation = new AMap.Geolocation({
|
|
|
- enableHighAccuracy: true,
|
|
|
- timeout: 10000,
|
|
|
- maximumAge: 0, // 不使用缓存，每次都获取最新位置
|
|
|
- convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标
|
|
|
- showButton: false,
|
|
|
- showMarker: false,
|
|
|
- showCircle: false,
|
|
|
- panToLocation: false,
|
|
|
- zoomToAccuracy: false,
|
|
|
- // 优先使用浏览器定位，失败后使用IP定位
|
|
|
- noIpLocate: 0,
|
|
|
- // 使用精确定位
|
|
|
- GeoLocationFirst: true
|
|
|
- })
|
|
|
- console.log('[job-create] 高德定位插件加载完成')
|
|
|
-
|
|
|
- // 插件加载完成后立即尝试定位
|
|
|
- this.tryAutoLocation()
|
|
|
- })
|
|
|
-
|
|
|
- // 绑定地图点击事件
|
|
|
- if (this.map && typeof this.map.on === 'function') {
|
|
|
- this.map.on('click', e => {
|
|
|
- const lng = e.lnglat && (e.lnglat.lng || (e.lnglat.getLng && e.lnglat.getLng()))
|
|
|
- const lat = e.lnglat && (e.lnglat.lat || (e.lnglat.getLat && e.lnglat.getLat()))
|
|
|
- if (lng == null || lat == null) return
|
|
|
- this.onMapClick({ lng, lat })
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- // 地图初始化完成后，如果已选择设备，则开始轮询实时位置
|
|
|
- this.setupRealtimePolling()
|
|
|
- }
|
|
|
-
|
|
|
- // 创建地图（使用默认中心点）
|
|
|
- console.log('[job-create] 创建地图使用默认中心点:', defaultCenter)
|
|
|
- createMapWithCenter(defaultCenter)
|
|
|
- }
|
|
|
-
|
|
|
- createWhenReady()
|
|
|
- },
|
|
|
-
|
|
|
- // 自动定位（插件加载完成后调用）
|
|
|
- tryAutoLocation() {
|
|
|
- console.log('[job-create] 开始自动定位...')
|
|
|
-
|
|
|
- this._getCurrentLocation(
|
|
|
- res => {
|
|
|
- console.log('[job-create] 自动定位成功:', res)
|
|
|
- const { longitude, latitude } = res || {}
|
|
|
- if (longitude != null && latitude != null) {
|
|
|
- console.log('[job-create] 使用定位坐标:', [longitude, latitude])
|
|
|
- this._centerMapToLngLat(longitude, latitude, 16)
|
|
|
- uni.showToast({
|
|
|
- title: '已定位到您的位置',
|
|
|
- icon: 'success',
|
|
|
- duration: 2000
|
|
|
- })
|
|
|
- } else {
|
|
|
- console.warn('[job-create] 定位返回坐标无效')
|
|
|
- }
|
|
|
- },
|
|
|
- err => {
|
|
|
- console.warn('[job-create] 自动定位失败:', err)
|
|
|
- // 不显示错误提示，避免干扰用户
|
|
|
- }
|
|
|
- )
|
|
|
- },
|
|
|
- // 尝试获取设备定位并居中地图（优先使用 uni.getLocation，回退到 navigator 或模拟点）
|
|
|
- _getDeviceLocationAndCenter() {
|
|
|
- const doCenter = (lng, lat) => {
|
|
|
- if (!lng && lng !== 0) return
|
|
|
- if (!lat && lat !== 0) return
|
|
|
- this._centerMapToLngLat(lng, lat, 18)
|
|
|
- // 在当前位置添加一个简单标记（不影响现有图层）
|
|
|
- try {
|
|
|
- if (this.map && typeof AMap !== 'undefined' && AMap.Marker) {
|
|
|
- new AMap.Marker({
|
|
|
- position: [lng, lat],
|
|
|
- map: this.map
|
|
|
- })
|
|
|
- }
|
|
|
- } catch (err) {
|
|
|
- // eslint-disable-next-line no-console
|
|
|
- console.warn('[job-create] add marker failed', err)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 使用高德定位
|
|
|
- this._getCurrentLocation(
|
|
|
- res => {
|
|
|
- console.log("当前定位", res);
|
|
|
- const { longitude, latitude } = res || {}
|
|
|
- if (longitude != null && latitude != null) {
|
|
|
- doCenter(longitude, latitude)
|
|
|
- } else {
|
|
|
- const p = this.getMapCenterPoint() || mockCurrentPoint(0)
|
|
|
- doCenter(p.lng, p.lat)
|
|
|
- }
|
|
|
- },
|
|
|
- () => {
|
|
|
- const p = this.getMapCenterPoint() || mockCurrentPoint(0)
|
|
|
- doCenter(p.lng, p.lat)
|
|
|
- }
|
|
|
- )
|
|
|
-
|
|
|
- // 最后回退到地图中心或模拟点
|
|
|
- const p = this.getMapCenterPoint() || mockCurrentPoint(0)
|
|
|
- doCenter(p.lng, p.lat)
|
|
|
- },
|
|
|
-
|
|
|
- // 将地图居中到指定经纬度并设置缩放（安全调用）
|
|
|
- _centerMapToLngLat(lng, lat, zoom = 18) {
|
|
|
- if (!this.map) return
|
|
|
- try {
|
|
|
- if (typeof this.map.setCenter === 'function') {
|
|
|
- this.map.setCenter([lng, lat])
|
|
|
- }
|
|
|
- if (typeof this.map.setZoom === 'function' && typeof zoom === 'number') {
|
|
|
- this.map.setZoom(zoom)
|
|
|
- }
|
|
|
- } catch (err) {
|
|
|
- // eslint-disable-next-line no-console
|
|
|
- console.warn('[job-create] center map failed', err)
|
|
|
- }
|
|
|
- },
|
|
|
- // AMap 加载由页面顶部的全局 callback `mapInit` 与 `loadScript()` 管理
|
|
|
-
|
|
|
- // 使用高德定位获取当前位置
|
|
|
- _getCurrentLocation(successCallback, failCallback, retryCount = 0) {
|
|
|
- if (!this.geolocation) {
|
|
|
- // 如果还未初始化，等待一段时间后重试，最多重试5次
|
|
|
- if (retryCount < 5) {
|
|
|
- console.log(`[job-create] 高德定位未初始化，${retryCount + 1}秒后重试...`)
|
|
|
- setTimeout(() => {
|
|
|
- this._getCurrentLocation(successCallback, failCallback, retryCount + 1)
|
|
|
- }, 1000)
|
|
|
- return
|
|
|
- } else {
|
|
|
- console.warn('[job-create] 高德定位未初始化，重试失败')
|
|
|
- if (failCallback) failCallback(new Error('高德定位未初始化'))
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- console.log('[job-create] 开始调用高德定位 getCurrentPosition...')
|
|
|
-
|
|
|
- this.geolocation.getCurrentPosition((status, result) => {
|
|
|
- console.log('[job-create] 定位回调 status:', status, 'result:', result)
|
|
|
-
|
|
|
- if (status === 'complete') {
|
|
|
- const { lng, lat } = result.position
|
|
|
- console.log('[job-create] 高德定位成功:', { lng, lat })
|
|
|
- if (successCallback) {
|
|
|
- successCallback({
|
|
|
- longitude: lng,
|
|
|
- latitude: lat
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- console.error('[job-create] 高德定位失败:', result)
|
|
|
- let errorMsg = '定位失败'
|
|
|
- let errorDetail = ''
|
|
|
-
|
|
|
- switch(result.info) {
|
|
|
- case 'FAILED':
|
|
|
- errorMsg = '定位失败，请检查网络连接'
|
|
|
- errorDetail = '可能原因：网络问题或GPS信号弱'
|
|
|
- break
|
|
|
- case 'NOT_SUPPORTED':
|
|
|
- errorMsg = '浏览器不支持定位功能'
|
|
|
- errorDetail = '请使用支持地理定位的现代浏览器'
|
|
|
- break
|
|
|
- case 'PERMISSION_DENIED':
|
|
|
- errorMsg = '定位权限被拒绝'
|
|
|
- errorDetail = 'HTTPS环境下需要用户授权定位权限，HTTP环境下浏览器会直接拒绝'
|
|
|
- break
|
|
|
- case 'PERMISSION_GRANTED':
|
|
|
- errorMsg = '定位权限已获取但定位失败'
|
|
|
- errorDetail = '可能是GPS信号问题'
|
|
|
- break
|
|
|
- case 'TIMEOUT':
|
|
|
- errorMsg = '定位请求超时'
|
|
|
- errorDetail = '请检查网络连接或GPS信号'
|
|
|
- break
|
|
|
- default:
|
|
|
- errorMsg = `定位失败: ${result.info}`
|
|
|
- errorDetail = result.message || ''
|
|
|
- }
|
|
|
-
|
|
|
- console.warn('[job-create] 定位失败详情:', errorMsg, errorDetail)
|
|
|
-
|
|
|
- if (failCallback) {
|
|
|
- failCallback({
|
|
|
- code: result.info,
|
|
|
- message: errorMsg,
|
|
|
- detail: errorDetail
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 从地图获取中心点（回退到模拟坐标）
|
|
|
- getMapCenterPoint() {
|
|
|
- if (this.map && typeof this.map.getCenter === 'function') {
|
|
|
- const c = this.map.getCenter()
|
|
|
- // AMap 返回对象通常包含 lng/lat
|
|
|
- return {
|
|
|
- lng: c.lng || (c.lng === 0 ? 0 : c.getLng && c.getLng()),
|
|
|
- lat: c.lat || (c.lat === 0 ? 0 : c.getLat && c.getLat()),
|
|
|
- timestamp: Date.now()
|
|
|
- }
|
|
|
- }
|
|
|
- return null
|
|
|
- },
|
|
|
- // ---------- end AMap ----------
|
|
|
-
|
|
|
- // 区域类型与路线类型选择
|
|
|
- selectAreaType(val) {
|
|
|
- this.selectedAreaType = val
|
|
|
- const a = this.areaTypes.find(item => item.value === val)
|
|
|
- if (a && a.routes && a.routes.length) {
|
|
|
- this.selectedRouteType = a.routes[0].value
|
|
|
- }
|
|
|
- this.jobState.areaType = this.selectedAreaType
|
|
|
- this.jobState.routeType = this.selectedRouteType
|
|
|
- },
|
|
|
- selectRouteType(val) {
|
|
|
- this.selectedRouteType = val
|
|
|
- this.jobState.routeType = val
|
|
|
- },
|
|
|
- // 模式切换
|
|
|
- switchMode(val) {
|
|
|
- this.mode = val
|
|
|
- },
|
|
|
-
|
|
|
- // ===================== 设备实时位置轮询（参考 job-detail） =====================
|
|
|
- setupRealtimePolling() {
|
|
|
- // 仅 Step2 打点建模时需要实时位置
|
|
|
- if (this.currentStep !== 2) return
|
|
|
-
|
|
|
- const deviceId = this.jobState.machineId || this.jobState.machineCode
|
|
|
- if (!deviceId) return
|
|
|
- if (!this.amapLoaded || !this.map) return
|
|
|
-
|
|
|
- // 避免重复开启
|
|
|
- if (this.realtimeTimer) return
|
|
|
-
|
|
|
- // 立刻拉一次
|
|
|
- this.fetchRealtimeAndUpdate()
|
|
|
-
|
|
|
- this.realtimeTimer = setInterval(() => {
|
|
|
- this.fetchRealtimeAndUpdate()
|
|
|
- }, 3000)
|
|
|
- },
|
|
|
-
|
|
|
- clearRealtimePolling() {
|
|
|
- if (this.realtimeTimer) {
|
|
|
- clearInterval(this.realtimeTimer)
|
|
|
- this.realtimeTimer = null
|
|
|
- }
|
|
|
- this.polling = false
|
|
|
- },
|
|
|
-
|
|
|
- async fetchRealtimeAndUpdate() {
|
|
|
- try {
|
|
|
- const deviceId = this.jobState.machineCode
|
|
|
- if (!deviceId) return
|
|
|
-
|
|
|
- this.polling = true
|
|
|
- const res = await getRealtimeData(deviceId)
|
|
|
- const payload = res && res.data && (res.data.data || res.data)
|
|
|
- if (!payload) return
|
|
|
-
|
|
|
- const reportTime = payload.reportTime
|
|
|
- if (reportTime && this.lastReportTime && reportTime < this.lastReportTime) {
|
|
|
- return
|
|
|
- }
|
|
|
- if (reportTime) this.lastReportTime = reportTime
|
|
|
-
|
|
|
- const pt = payload.currentPoint
|
|
|
- if (!pt || pt.x == null || pt.y == null) return
|
|
|
-
|
|
|
- const lngLat = [pt.x, pt.y]
|
|
|
- this.latestRealtimeLngLat = lngLat
|
|
|
-
|
|
|
- this.updateRealtimeMarker(lngLat)
|
|
|
-
|
|
|
- // 轻量跟随：视野中心跟随车，不频繁 fitView
|
|
|
- try {
|
|
|
- if (this.map && typeof this.map.setCenter === 'function') {
|
|
|
- this.map.setCenter(lngLat)
|
|
|
- }
|
|
|
- } catch (e) {}
|
|
|
- } catch (e) {
|
|
|
- // eslint-disable-next-line no-console
|
|
|
- console.warn('[job-create] fetchRealtimeAndUpdate failed', e)
|
|
|
- } finally {
|
|
|
- this.polling = false
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- updateRealtimeMarker(lngLat) {
|
|
|
- if (!this.map || !this.amapLoaded) return
|
|
|
- if (!lngLat || lngLat.length !== 2) return
|
|
|
-
|
|
|
- if (!this.realtimeMarker) {
|
|
|
- this.realtimeMarker = new AMap.Marker({
|
|
|
- map: this.map,
|
|
|
- position: lngLat
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.realtimeMarker.setPosition(lngLat)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 新增点（使用模拟坐标/地图中心点）
|
|
|
- addPoint() {
|
|
|
- // Step2 的“新增点”需要使用设备实时位置：
|
|
|
- // - 轮询拿到的 latestRealtimeLngLat 优先
|
|
|
- // - 回退到地图中心点（手动拖拽视野时）
|
|
|
- // - 再回退到 mock
|
|
|
- const realtimeLngLat = this.latestRealtimeLngLat
|
|
|
- const realtimePoint = realtimeLngLat && realtimeLngLat.length === 2
|
|
|
- ? { lng: realtimeLngLat[0], lat: realtimeLngLat[1], timestamp: Date.now() }
|
|
|
- : null
|
|
|
-
|
|
|
- // 回退：地图中心点
|
|
|
- let centerPoint = null
|
|
|
- if (this.amapLoaded && this.map) {
|
|
|
- centerPoint = this.getMapCenterPoint()
|
|
|
- }
|
|
|
-
|
|
|
- const fallbackPoint = centerPoint || mockCurrentPoint(0)
|
|
|
- const point = realtimePoint || fallbackPoint
|
|
|
-
|
|
|
- if (this.mode === 'area') {
|
|
|
- this.onMapClick({ lng: point.lng, lat: point.lat })
|
|
|
- } else if (this.mode === 'obstacle') {
|
|
|
- this.currentObstacle.push(point)
|
|
|
- // 添加障碍物标记
|
|
|
- this.addObstacleMarker(point, this.jobState.obstacles.length, this.currentObstacle.length - 1)
|
|
|
- } else if (this.mode === 'return') {
|
|
|
- if (this.jobState.returnPoint) {
|
|
|
- uni.showModal({
|
|
|
- title: '覆盖返航点',
|
|
|
- content: '已存在返航点，是否覆盖为当前设备位置？',
|
|
|
- success: res => {
|
|
|
- if (res.confirm) {
|
|
|
- this.jobState.returnPoint = point
|
|
|
- // 更新返航点标记
|
|
|
- this.updateReturnMarker(point)
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.jobState.returnPoint = point
|
|
|
- // 添加返航点标记
|
|
|
- this.updateReturnMarker(point)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 撤销点
|
|
|
- undoPoint() {
|
|
|
- if (!this.canUndo) return
|
|
|
- if (this.mode === 'area') {
|
|
|
- // if (this.selectedAreaType === 'loopArea') {
|
|
|
- // 删除最后一个点，同时删除对应 draggable marker
|
|
|
- const lastIdx = this.jobState.areaPoints.length - 1
|
|
|
- if (lastIdx >= 0) {
|
|
|
- this.jobState.areaPoints.pop()
|
|
|
- const m = this.loopMarkers.pop()
|
|
|
- if (m && typeof m.setMap === 'function') {
|
|
|
- try { m.setMap(null) } catch (e) {}
|
|
|
- }
|
|
|
- // 更新 polygon 或清除
|
|
|
- if (this.jobState.areaPoints.length >= 3) {
|
|
|
- this.recomputeLoopPolygon()
|
|
|
- } else {
|
|
|
- if (this.loopPolygon && typeof this.loopPolygon.setMap === 'function') {
|
|
|
- try { this.loopPolygon.setMap(null) } catch (e) {}
|
|
|
- }
|
|
|
- this.loopPolygon = null
|
|
|
- }
|
|
|
- }
|
|
|
- // }
|
|
|
- // else {
|
|
|
- // // 非回字形：删除最后一个点，并同步删除最后一个 marker + 重绘 polygon
|
|
|
- // const lastIdx = this.jobState.areaPoints.length - 1
|
|
|
- // if (lastIdx >= 0) {
|
|
|
- // this.jobState.areaPoints.pop()
|
|
|
- // const m = this.markers && this.markers.length ? this.markers.pop() : null
|
|
|
- // if (m && typeof m.setMap === 'function') {
|
|
|
- // try { m.setMap(null) } catch (e) {}
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- // if (this.jobState.areaPoints.length >= 3) {
|
|
|
- // this.drawAreaPolygon()
|
|
|
- // } else if (this.areaPolygon) {
|
|
|
- // try { this.areaPolygon.setMap(null) } catch (e) {}
|
|
|
- // this.areaPolygon = null
|
|
|
- // }
|
|
|
- // }
|
|
|
- } else if (this.mode === 'obstacle') {
|
|
|
- this.currentObstacle.pop()
|
|
|
- // 删除最后一个障碍物标记
|
|
|
- this.removeLastObstacleMarker()
|
|
|
- } else if (this.mode === 'return') {
|
|
|
- this.jobState.returnPoint = null
|
|
|
- // 删除返航点标记
|
|
|
- this.clearReturnMarker()
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 完成当前障碍物
|
|
|
- finishCurrentObstacle() {
|
|
|
- if (!this.currentObstacle.length) return
|
|
|
- this.jobState.obstacles.push([...this.currentObstacle])
|
|
|
- this.currentObstacle = []
|
|
|
- uni.showToast({
|
|
|
- title: '已保存一组障碍物',
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 将“录入中”的障碍物也并入 jobState.obstacles（用于步骤切换/提交前兜底）
|
|
|
- flushCurrentObstacle() {
|
|
|
- if (this.currentObstacle && this.currentObstacle.length) {
|
|
|
- this.jobState.obstacles.push([...this.currentObstacle])
|
|
|
- this.currentObstacle = []
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 步骤导航
|
|
|
- prevStep() {
|
|
|
- if (this.currentStep === 1) return
|
|
|
- this.currentStep -= 1
|
|
|
-
|
|
|
- // 离开 Step2 时停止轮询，避免后台持续请求
|
|
|
- if (this.currentStep !== 2) {
|
|
|
- this.clearRealtimePolling()
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- nextStep() {
|
|
|
- // Step1 校验：区域类型与路线类型必选
|
|
|
- if (this.currentStep === 1) {
|
|
|
- if (!this.selectedAreaType || !this.selectedRouteType) {
|
|
|
- uni.showToast({
|
|
|
- title: '请选择作业区域类型和路线类型',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- this.jobState.areaType = this.selectedAreaType
|
|
|
- this.jobState.routeType = this.selectedRouteType
|
|
|
- }
|
|
|
- // Step2 校验：作业区域点 / 返航点
|
|
|
- if (this.currentStep === 2) {
|
|
|
- if (this.jobState.areaPoints.length < 3) {
|
|
|
- uni.showToast({
|
|
|
- title: '作业区域点至少需要 3 个',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 离开打点页前，把“录入中”的障碍物也保存下来，避免忘记点“完成当前障碍物”
|
|
|
- this.flushCurrentObstacle()
|
|
|
-
|
|
|
- if (!this.jobState.returnPoint) {
|
|
|
- uni.showToast({
|
|
|
- title: '请先设置返航点',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- // Step3 校验：需存在作业区域点
|
|
|
- if (this.currentStep === 3) {
|
|
|
- if (!this.jobState.areaPoints.length) {
|
|
|
- uni.showToast({
|
|
|
- title: '请先在上一步记录作业区域点',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- if (this.currentStep < 4) {
|
|
|
- this.currentStep += 1
|
|
|
-
|
|
|
- // 进入 Step2 时开启轮询（地图可能已初始化）
|
|
|
- if (this.currentStep === 2) {
|
|
|
- this.setupRealtimePolling()
|
|
|
- } else {
|
|
|
- // 离开 Step2 时关闭轮询
|
|
|
- this.clearRealtimePolling()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 起点选择
|
|
|
- setStartIndex(index) {
|
|
|
- if (!this.jobState.areaPoints.length) return
|
|
|
- this.jobState.startPointIndex = index
|
|
|
- },
|
|
|
- prevStart() {
|
|
|
- if (!this.canChangeStart) return
|
|
|
- const total = this.jobState.areaPoints.length
|
|
|
- this.jobState.startPointIndex =
|
|
|
- (this.jobState.startPointIndex - 1 + total) % total
|
|
|
- },
|
|
|
- nextStart() {
|
|
|
- if (!this.canChangeStart) return
|
|
|
- const total = this.jobState.areaPoints.length
|
|
|
- this.jobState.startPointIndex =
|
|
|
- (this.jobState.startPointIndex + 1) % total
|
|
|
- },
|
|
|
-
|
|
|
- // 手动定位
|
|
|
- async manualLocation() {
|
|
|
- if (this.locating) return
|
|
|
- this.locating = true
|
|
|
-
|
|
|
- const doCenter = (lng, lat) => {
|
|
|
- if (!lng && lng !== 0) return
|
|
|
- if (!lat && lat !== 0) return
|
|
|
- this._centerMapToLngLat(lng, lat, 18)
|
|
|
- uni.showToast({
|
|
|
- title: '已定位到您的位置',
|
|
|
- icon: 'success',
|
|
|
- duration: 2000
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- // 检查是否为HTTPS环境
|
|
|
- const isSecureContext = window.isSecureContext || window.location.protocol === 'https:'
|
|
|
- if (!isSecureContext) {
|
|
|
- console.warn('[job-create] 非HTTPS环境，浏览器可能拒绝定位请求')
|
|
|
- uni.showModal({
|
|
|
- title: '定位提示',
|
|
|
- content: '当前为HTTP环境，浏览器可能拒绝定位请求。建议使用HTTPS访问或使用IP定位。',
|
|
|
- showCancel: false
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- // 使用高德定位
|
|
|
- await new Promise((resolve, reject) => {
|
|
|
- this._getCurrentLocation(
|
|
|
- res => {
|
|
|
- const { longitude, latitude } = res || {}
|
|
|
- if (longitude != null && latitude != null) {
|
|
|
- doCenter(longitude, latitude)
|
|
|
- resolve()
|
|
|
- } else {
|
|
|
- reject(new Error('无效坐标'))
|
|
|
- }
|
|
|
- },
|
|
|
- reject
|
|
|
- )
|
|
|
- })
|
|
|
- } catch (err) {
|
|
|
- console.error('[job-create] 手动定位失败:', err)
|
|
|
- let errorMsg = '定位失败'
|
|
|
- let showDetail = false
|
|
|
-
|
|
|
- if (err.message) {
|
|
|
- errorMsg = err.message
|
|
|
- }
|
|
|
- if (err.detail) {
|
|
|
- showDetail = true
|
|
|
- }
|
|
|
-
|
|
|
- if (showDetail) {
|
|
|
- uni.showModal({
|
|
|
- title: errorMsg,
|
|
|
- content: err.detail || '请检查浏览器定位权限设置，或确保使用HTTPS访问',
|
|
|
- showCancel: false
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: errorMsg,
|
|
|
- icon: 'none',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- }
|
|
|
- } finally {
|
|
|
- this.locating = false
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 提交作业
|
|
|
- async submitJob() {
|
|
|
- if (!this.jobState.jobName) {
|
|
|
- uni.showToast({
|
|
|
- title: '请填写作业名称',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if (!this.jobState.fieldId) {
|
|
|
- uni.showToast({
|
|
|
- title: '请填写地块ID',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if (!this.jobState.pathWidth) {
|
|
|
- uni.showToast({
|
|
|
- title: '请填写路径宽度',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.jobState.areaPoints.length < 3) {
|
|
|
- uni.showToast({
|
|
|
- title: '作业区域点至少需要 3 个',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 提交前兜底：把“录入中”的障碍物也并入 obstacles
|
|
|
- this.flushCurrentObstacle()
|
|
|
-
|
|
|
- // 将高德坐标转换为WGS84坐标
|
|
|
- const convertedAreaPoints = coordinateUtils.convertPointsToWgs84(this.jobState.areaPoints)
|
|
|
- const convertedObstacles = this.jobState.obstacles.map(obstacleGroup =>
|
|
|
- coordinateUtils.convertPointsToWgs84(obstacleGroup)
|
|
|
- )
|
|
|
- const convertedReturnPoint = this.jobState.returnPoint ?
|
|
|
- coordinateUtils.convertPointToWgs84(this.jobState.returnPoint) : undefined
|
|
|
-
|
|
|
- // 映射 areaType 到数字
|
|
|
- const areaTypeMap = {
|
|
|
- 'loopArea': 1, // 回字形
|
|
|
- 'bowArea': 2, // 弓字形
|
|
|
- 'customArea': 3, // 自定义
|
|
|
- 'ridgeArea': 4 // 垄沟
|
|
|
- }
|
|
|
- console.log("this.jobState",this.jobState);
|
|
|
- const payload = {
|
|
|
- // deviceId: this.jobState.machineCode,
|
|
|
- deviceId: this.jobState.machineId,
|
|
|
- fieldId: parseInt(this.jobState.fieldId),
|
|
|
- taskName: this.jobState.jobName,
|
|
|
- areaType: areaTypeMap[this.jobState.areaType] || 1,
|
|
|
- waypoints: convertedAreaPoints.map(p => ({ lng: p.lng, lat: p.lat })),
|
|
|
- obstacles: convertedObstacles.flat().map(p => ({ lng: p.lng, lat: p.lat })),
|
|
|
- returnPoint: convertedReturnPoint ? { lng: convertedReturnPoint.lng, lat: convertedReturnPoint.lat } : undefined,
|
|
|
- pathWidth: parseInt(this.jobState.pathWidth)
|
|
|
- }
|
|
|
- console.log("payload",payload);
|
|
|
-
|
|
|
-
|
|
|
- this.submitting = true
|
|
|
- uni.showLoading({ title: '提交中...' })
|
|
|
- try {
|
|
|
- const res = await createJob(payload)
|
|
|
- console.log("res收到尽快发货",res);
|
|
|
-
|
|
|
- const { data } = res || {}
|
|
|
- if (data && data.code === 200) {
|
|
|
- uni.showToast({
|
|
|
- title: '作业创建成功',
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- setTimeout(() => {
|
|
|
- uni.navigateBack()
|
|
|
- }, 800)
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: (data && data.msg) || '提交失败',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- } catch (err) {
|
|
|
- console.error('创建作业失败', err)
|
|
|
- uni.showToast({
|
|
|
- title: '网络异常或接口未就绪',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- } finally {
|
|
|
- this.submitting = false
|
|
|
- uni.hideLoading()
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 区域编辑逻辑（支持所有区域类型）
|
|
|
- // - 点击地图依次记录点（或替换已选点）
|
|
|
- // - 回字形区域使用可拖拽 Marker，其他区域使用普通 Marker
|
|
|
- // - 点击某个点可以进入“替换模式”，下一次地图点击会替换该点
|
|
|
- onMapClick({ lng, lat } = {}) {
|
|
|
- if (!lng && lng !== 0) return
|
|
|
- if (!lat && lat !== 0) return
|
|
|
-
|
|
|
- // 确保在区域编辑模式下
|
|
|
- if (this.mode !== 'area') return
|
|
|
-
|
|
|
- const newPoint = { lng, lat, timestamp: Date.now() }
|
|
|
-
|
|
|
- // 回字形区域特殊处理（支持拖拽和替换）
|
|
|
-
|
|
|
- // 替换模式下替换指定点
|
|
|
- if (this.loopReplaceIndex != null && this.loopReplaceIndex >= 0 && this.loopReplaceIndex < this.jobState.areaPoints.length) {
|
|
|
- this.jobState.areaPoints.splice(this.loopReplaceIndex, 1, newPoint)
|
|
|
- const m = this.loopMarkers[this.loopReplaceIndex]
|
|
|
- if (m && typeof m.setPosition === 'function') {
|
|
|
- try { m.setPosition([lng, lat]) } catch (e) {}
|
|
|
- }
|
|
|
- this.loopReplaceIndex = null
|
|
|
- if (this.jobState.areaPoints.length >= 3) this.recomputeLoopPolygon()
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 正常添加点
|
|
|
- this.jobState.areaPoints.push(newPoint)
|
|
|
- const idx = this.jobState.areaPoints.length - 1
|
|
|
- this.createOrUpdateLoopMarker(idx, newPoint)
|
|
|
- if (this.jobState.areaPoints.length >= 3) {
|
|
|
- this.recomputeLoopPolygon()
|
|
|
- }
|
|
|
- // }
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- createOrUpdateLoopMarker(index, point) {
|
|
|
-
|
|
|
- if (!this.map || typeof AMap === 'undefined') return
|
|
|
- const pos = [point.lng, point.lat]
|
|
|
- let marker = this.loopMarkers[index]
|
|
|
- if (marker) {
|
|
|
- try { marker.setPosition(pos) } catch (e) {}
|
|
|
- return
|
|
|
- }
|
|
|
- // Use smaller icon size
|
|
|
- let icon = null
|
|
|
- try {
|
|
|
- icon = new AMap.Icon({
|
|
|
- image: "static/icons/poi-marker-default.png",
|
|
|
- size: new AMap.Size(20, 28),
|
|
|
- imageSize: new AMap.Size(20, 28)
|
|
|
- })
|
|
|
- } catch (e) {
|
|
|
- icon = "static/icons/poi-marker-default.png"
|
|
|
- }
|
|
|
- marker = new AMap.Marker({
|
|
|
- position: pos,
|
|
|
- map: this.map,
|
|
|
- draggable: true,
|
|
|
- icon,
|
|
|
- offset: new AMap.Pixel(-10, -28)
|
|
|
- })
|
|
|
- // add simple label showing index (P1, P2...)
|
|
|
- try {
|
|
|
- const labelContent = `<div class="p-marker-label">P${index + 1}</div>`
|
|
|
- if (typeof marker.setLabel === 'function') {
|
|
|
- marker.setLabel({
|
|
|
- content: labelContent,
|
|
|
- offset: new AMap.Pixel(10, -36)
|
|
|
- })
|
|
|
- } else {
|
|
|
- marker.label = { content: labelContent }
|
|
|
- }
|
|
|
- } catch (e) {}
|
|
|
- // drag end -> update point and polygon
|
|
|
- marker.on('dragend', e => {
|
|
|
- const p = marker.getPosition()
|
|
|
- const lngv = p.lng || (p.getLng && p.getLng())
|
|
|
- const latv = p.lat || (p.getLat && p.getLat())
|
|
|
- if (lngv == null || latv == null) return
|
|
|
- // Use Vue.set / $set to ensure reactivity for array index assignment
|
|
|
- if (typeof this.$set === 'function') {
|
|
|
- this.$set(this.jobState.areaPoints, index, { lng: lngv, lat: latv, timestamp: Date.now() })
|
|
|
- } else {
|
|
|
- this.jobState.areaPoints[index] = { lng: lngv, lat: latv, timestamp: Date.now() }
|
|
|
- }
|
|
|
- if (this.jobState.areaPoints.length >= 3) this.recomputeLoopPolygon()
|
|
|
- })
|
|
|
- // click -> enter replace mode for this index
|
|
|
- marker.on('click', () => {
|
|
|
- this.loopReplaceIndex = index
|
|
|
- uni.showToast({ title: `已选中 P${index + 1}，下一次点击将替换该点`, icon: 'none' })
|
|
|
- })
|
|
|
- this.loopMarkers[index] = marker
|
|
|
- // refresh labels for all markers to keep numbering consistent
|
|
|
- this.refreshLoopMarkerLabels()
|
|
|
- },
|
|
|
-
|
|
|
- recomputeLoopPolygon() {
|
|
|
- if (!this.map) return
|
|
|
- if (!this.jobState.areaPoints || this.jobState.areaPoints.length < 3) {
|
|
|
- if (this.loopPolygon && typeof this.loopPolygon.setMap === 'function') {
|
|
|
- try { this.loopPolygon.setMap(null) } catch (e) {}
|
|
|
- }
|
|
|
- this.loopPolygon = null
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // Outer path: ensure order as [ [lng,lat], ... ]
|
|
|
- const outer = this.jobState.areaPoints.map(p => [p.lng, p.lat])
|
|
|
-
|
|
|
- try {
|
|
|
- if (this.loopPolygon) {
|
|
|
- this.loopPolygon.setPath(outer)
|
|
|
- } else {
|
|
|
- this.loopPolygon = new AMap.Polygon({
|
|
|
- map: this.map,
|
|
|
- path: outer,
|
|
|
- strokeColor: '#3bb44a',
|
|
|
- strokeWeight: 2,
|
|
|
- fillColor: '#3bb44a',
|
|
|
- fillOpacity: 0.15
|
|
|
- })
|
|
|
- }
|
|
|
- } catch (err) {
|
|
|
- // eslint-disable-next-line no-console
|
|
|
- console.warn('[job-create] recompute loop polygon failed', err)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- refreshLoopMarkerLabels() {
|
|
|
- if (!this.loopMarkers || !this.loopMarkers.length) return
|
|
|
- this.loopMarkers.forEach((m, i) => {
|
|
|
- try {
|
|
|
- const content = `<div class="p-marker-label">P${i + 1}</div>`
|
|
|
- if (typeof m.setLabel === 'function') {
|
|
|
- m.setLabel({ content, offset: new AMap.Pixel(10, -36) })
|
|
|
- } else if (m.label) {
|
|
|
- m.label.content = content
|
|
|
- }
|
|
|
- } catch (e) {}
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 清空所有 loop 图形（用于删除区域）
|
|
|
- clearLoopGraphics() {
|
|
|
- if (this.loopMarkers && this.loopMarkers.length) {
|
|
|
- this.loopMarkers.forEach(m => {
|
|
|
- try { m.setMap(null) } catch (e) {}
|
|
|
- })
|
|
|
- }
|
|
|
- this.loopMarkers = []
|
|
|
- if (this.loopPolygon && typeof this.loopPolygon.setMap === 'function') {
|
|
|
- try { this.loopPolygon.setMap(null) } catch (e) {}
|
|
|
- }
|
|
|
- this.loopPolygon = null
|
|
|
- this.loopReplaceIndex = null
|
|
|
- },
|
|
|
-
|
|
|
- // 删除某一个点（根据需求：删除后清空整个区域）
|
|
|
- deleteAreaPoints() {
|
|
|
- this.jobState.areaPoints = []
|
|
|
- this.clearLoopGraphics()
|
|
|
- },
|
|
|
-
|
|
|
- // 辅助显示
|
|
|
- formatPoint(p) {
|
|
|
- if (!p) return '--'
|
|
|
- return `${p.lng.toFixed(5)}, ${p.lat.toFixed(5)}`
|
|
|
- },
|
|
|
- formatPointTime(ts) {
|
|
|
- if (!ts) return ''
|
|
|
- const d = new Date(ts)
|
|
|
- const h = `${d.getHours()}`.padStart(2, '0')
|
|
|
- const m = `${d.getMinutes()}`.padStart(2, '0')
|
|
|
- const s = `${d.getSeconds()}`.padStart(2, '0')
|
|
|
- return `${h}:${m}:${s}`
|
|
|
- },
|
|
|
-
|
|
|
- // 添加障碍物标记
|
|
|
- addObstacleMarker(point, obstacleGroupIndex, pointIndex) {
|
|
|
- if (!this.map || !this.amapLoaded || typeof AMap === 'undefined') return
|
|
|
-
|
|
|
- try {
|
|
|
- const pos = [point.lng, point.lat]
|
|
|
-
|
|
|
- // 创建障碍物图标（使用不同颜色区分）
|
|
|
- let icon = null
|
|
|
- try {
|
|
|
- icon = new AMap.Icon({
|
|
|
- image: "static/icons/poi-marker-default.png",
|
|
|
- size: new AMap.Size(16, 22),
|
|
|
- imageSize: new AMap.Size(16, 22)
|
|
|
- })
|
|
|
- } catch (e) {
|
|
|
- icon = "static/icons/poi-marker-default.png"
|
|
|
- }
|
|
|
-
|
|
|
- const marker = new AMap.Marker({
|
|
|
- position: pos,
|
|
|
- map: this.map,
|
|
|
- icon,
|
|
|
- offset: new AMap.Pixel(-8, -22)
|
|
|
- })
|
|
|
-
|
|
|
- // 添加标签显示障碍物编号
|
|
|
- try {
|
|
|
- const labelContent = `<div class="obstacle-marker-label">O${obstacleGroupIndex + 1}-${pointIndex + 1}</div>`
|
|
|
- if (typeof marker.setLabel === 'function') {
|
|
|
- marker.setLabel({
|
|
|
- content: labelContent,
|
|
|
- offset: new AMap.Pixel(8, -28)
|
|
|
- })
|
|
|
- }
|
|
|
- } catch (e) {}
|
|
|
-
|
|
|
- // 保存标记到数组
|
|
|
- if (!this.obstacleMarkers[obstacleGroupIndex]) {
|
|
|
- this.obstacleMarkers[obstacleGroupIndex] = []
|
|
|
- }
|
|
|
- this.obstacleMarkers[obstacleGroupIndex].push(marker)
|
|
|
- } catch (err) {
|
|
|
- console.warn('[job-create] add obstacle marker failed', err)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 删除最后一个障碍物标记
|
|
|
- removeLastObstacleMarker() {
|
|
|
- const currentGroupIndex = this.jobState.obstacles.length
|
|
|
- if (this.obstacleMarkers[currentGroupIndex] && this.obstacleMarkers[currentGroupIndex].length > 0) {
|
|
|
- const marker = this.obstacleMarkers[currentGroupIndex].pop()
|
|
|
- if (marker && typeof marker.setMap === 'function') {
|
|
|
- try {
|
|
|
- marker.setMap(null)
|
|
|
- } catch (e) {}
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 更新返航点标记
|
|
|
- updateReturnMarker(point) {
|
|
|
- if (!this.map || !this.amapLoaded || typeof AMap === 'undefined') return
|
|
|
-
|
|
|
- try {
|
|
|
- const pos = [point.lng, point.lat]
|
|
|
-
|
|
|
- // 如果已存在返航点标记，先删除
|
|
|
- this.clearReturnMarker()
|
|
|
-
|
|
|
- // 创建返航点图标（使用特殊颜色）
|
|
|
- let icon = null
|
|
|
- try {
|
|
|
- icon = new AMap.Icon({
|
|
|
- image: "static/icons/poi-marker-default.png",
|
|
|
- size: new AMap.Size(20, 28),
|
|
|
- imageSize: new AMap.Size(20, 28)
|
|
|
- })
|
|
|
- } catch (e) {
|
|
|
- icon = "static/icons/poi-marker-default.png"
|
|
|
- }
|
|
|
-
|
|
|
- this.returnMarker = new AMap.Marker({
|
|
|
- position: pos,
|
|
|
- map: this.map,
|
|
|
- icon,
|
|
|
- offset: new AMap.Pixel(-10, -28)
|
|
|
- })
|
|
|
-
|
|
|
- // 添加标签
|
|
|
- try {
|
|
|
- const labelContent = '<div class="return-marker-label">返航点</div>'
|
|
|
- if (typeof this.returnMarker.setLabel === 'function') {
|
|
|
- this.returnMarker.setLabel({
|
|
|
- content: labelContent,
|
|
|
- offset: new AMap.Pixel(10, -36)
|
|
|
- })
|
|
|
- }
|
|
|
- } catch (e) {}
|
|
|
- } catch (err) {
|
|
|
- console.warn('[job-create] update return marker failed', err)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 清除返航点标记
|
|
|
- clearReturnMarker() {
|
|
|
- if (this.returnMarker && typeof this.returnMarker.setMap === 'function') {
|
|
|
- try {
|
|
|
- this.returnMarker.setMap(null)
|
|
|
- } catch (e) {}
|
|
|
- }
|
|
|
- this.returnMarker = null
|
|
|
- },
|
|
|
-
|
|
|
- // 清理所有标记（页面卸载时调用）
|
|
|
- clearAllMarkers() {
|
|
|
- // 清理作业区域标记
|
|
|
- if (this.loopMarkers && this.loopMarkers.length) {
|
|
|
- this.loopMarkers.forEach(m => {
|
|
|
- try {
|
|
|
- if (m && typeof m.setMap === 'function') {
|
|
|
- m.setMap(null)
|
|
|
- }
|
|
|
- } catch (e) {}
|
|
|
- })
|
|
|
- this.loopMarkers = []
|
|
|
- }
|
|
|
-
|
|
|
- // 清理障碍物标记
|
|
|
- if (this.obstacleMarkers && this.obstacleMarkers.length) {
|
|
|
- this.obstacleMarkers.forEach(group => {
|
|
|
- if (group && group.length) {
|
|
|
- group.forEach(m => {
|
|
|
- try {
|
|
|
- if (m && typeof m.setMap === 'function') {
|
|
|
- m.setMap(null)
|
|
|
- }
|
|
|
- } catch (e) {}
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- this.obstacleMarkers = []
|
|
|
- }
|
|
|
-
|
|
|
- // 清理返航点标记
|
|
|
- this.clearReturnMarker()
|
|
|
-
|
|
|
- // 清理实时位置标记
|
|
|
- if (this.realtimeMarker && typeof this.realtimeMarker.setMap === 'function') {
|
|
|
- try {
|
|
|
- this.realtimeMarker.setMap(null)
|
|
|
- } catch (e) {}
|
|
|
- this.realtimeMarker = null
|
|
|
- }
|
|
|
-
|
|
|
- // 清理多边形
|
|
|
- if (this.loopPolygon && typeof this.loopPolygon.setMap === 'function') {
|
|
|
- try {
|
|
|
- this.loopPolygon.setMap(null)
|
|
|
- } catch (e) {}
|
|
|
- this.loopPolygon = null
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.page {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #f6f9f7;
|
|
|
-}
|
|
|
-
|
|
|
-.header {
|
|
|
- padding: 24rpx 28rpx 12rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.title-row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: baseline;
|
|
|
- margin-bottom: 12rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.title {
|
|
|
- font-size: 34rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #2c3e50;
|
|
|
-}
|
|
|
-
|
|
|
-.device-id {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #8c9396;
|
|
|
-}
|
|
|
-
|
|
|
-.step-row {
|
|
|
- display: flex;
|
|
|
- padding: 10rpx 8rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- background-color: #eef6f0;
|
|
|
-}
|
|
|
-
|
|
|
-.step-item {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.step-index {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- border-radius: 18rpx;
|
|
|
- border: 2rpx solid #b0c4b8;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #7f8c8d;
|
|
|
- margin-right: 10rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.step-index.active {
|
|
|
- background: linear-gradient(135deg, #3bb44a, #66cc6a);
|
|
|
- color: #ffffff;
|
|
|
- border-color: transparent;
|
|
|
-}
|
|
|
-
|
|
|
-.step-index.done {
|
|
|
- background-color: #ffffff;
|
|
|
- color: #3bb44a;
|
|
|
- border-color: #3bb44a;
|
|
|
-}
|
|
|
-
|
|
|
-.step-texts {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.step-title {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #2c3e50;
|
|
|
-}
|
|
|
-
|
|
|
-.step-sub {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #8c9396;
|
|
|
-}
|
|
|
-
|
|
|
-.content {
|
|
|
- flex: 1;
|
|
|
- padding: 10rpx 24rpx 130rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.step-block {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 18rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/* 区域类型 & 路线类型选择卡片 */
|
|
|
-.card.select-card {
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 20rpx 22rpx 16rpx;
|
|
|
- box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.03);
|
|
|
-}
|
|
|
-
|
|
|
-.select-title {
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #2c3e50;
|
|
|
-}
|
|
|
-
|
|
|
-.select-sub {
|
|
|
- margin-top: 6rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #8c9396;
|
|
|
- line-height: 1.5;
|
|
|
-}
|
|
|
-
|
|
|
-.select-tabs {
|
|
|
- margin-top: 14rpx;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 12rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.select-tab {
|
|
|
- min-width: 46%;
|
|
|
- padding: 14rpx 16rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- background-color: #f3f5f7;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.select-tab.small {
|
|
|
- min-width: 30%;
|
|
|
-}
|
|
|
-
|
|
|
-.select-tab-label {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #2c3e50;
|
|
|
-}
|
|
|
-
|
|
|
-.select-tab-sub {
|
|
|
- margin-top: 4rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #8c9396;
|
|
|
-}
|
|
|
-
|
|
|
-.select-tab.active {
|
|
|
- background: linear-gradient(135deg, #3bb44a, #66cc6a);
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(59, 180, 74, 0.26);
|
|
|
-}
|
|
|
-
|
|
|
-.select-tab.active .select-tab-label,
|
|
|
-.select-tab.active .select-tab-sub {
|
|
|
- color: #ffffff;
|
|
|
-}
|
|
|
-
|
|
|
-.map-card {
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.map-card.small .map-body {
|
|
|
- height: 260rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.map-header {
|
|
|
- padding: 20rpx 22rpx 10rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
-}
|
|
|
-
|
|
|
-.map-header-actions {
|
|
|
- margin-left: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.map-title {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #2c3e50;
|
|
|
-}
|
|
|
-
|
|
|
-.map-sub {
|
|
|
- margin-top: 4rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #8c9396;
|
|
|
-}
|
|
|
-
|
|
|
-.map-body {
|
|
|
- height: 320rpx;
|
|
|
- background-color: #d3dce6;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.map-placeholder {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- white-space: pre-line;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-/* AMap 容器样式（确保占满 map-body） */
|
|
|
-#mapContainer {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.map-footer {
|
|
|
- padding: 12rpx 18rpx 16rpx;
|
|
|
- background-color: #f7faf8;
|
|
|
-}
|
|
|
-
|
|
|
-.map-hint {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #8c9396;
|
|
|
-}
|
|
|
-
|
|
|
-.mode-card {
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 18rpx 20rpx 14rpx;
|
|
|
- box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.03);
|
|
|
-}
|
|
|
-
|
|
|
-.mode-title-row {
|
|
|
- margin-bottom: 10rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.mode-title {
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #2c3e50;
|
|
|
-}
|
|
|
-
|
|
|
-.mode-sub {
|
|
|
- margin-top: 4rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #8c9396;
|
|
|
-}
|
|
|
-
|
|
|
-.mode-tabs {
|
|
|
- display: flex;
|
|
|
- gap: 12rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.mode-tab {
|
|
|
- flex: 1;
|
|
|
- padding: 12rpx 0;
|
|
|
- border-radius: 30rpx;
|
|
|
- background-color: #f3f5f7;
|
|
|
- text-align: center;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666;
|
|
|
-}
|
|
|
-
|
|
|
-.mode-tab.active {
|
|
|
- background: linear-gradient(135deg, #3bb44a, #66cc6a);
|
|
|
- color: #ffffff;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(59, 180, 74, 0.3);
|
|
|
-}
|
|
|
-
|
|
|
-.panel-card {
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 18rpx 20rpx 14rpx;
|
|
|
- box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.03);
|
|
|
-}
|
|
|
-
|
|
|
-.panel-row {
|
|
|
- display: flex;
|
|
|
- gap: 12rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.panel-row.center {
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.panel-desc {
|
|
|
- margin-top: 8rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #8c9396;
|
|
|
-}
|
|
|
-
|
|
|
-.list-card {
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 18rpx 20rpx 10rpx;
|
|
|
- box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.03);
|
|
|
- max-height: 420rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.list-title-row {
|
|
|
- margin-bottom: 6rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.list-title {
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #2c3e50;
|
|
|
-}
|
|
|
-
|
|
|
-.list-scroll {
|
|
|
- max-height: 360rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.list-group {
|
|
|
- margin-top: 10rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.list-group-header {
|
|
|
- margin-bottom: 4rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.list-group-title {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #555;
|
|
|
-}
|
|
|
-
|
|
|
-.point-list {
|
|
|
- margin-top: 4rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.point-item {
|
|
|
- padding: 8rpx 4rpx;
|
|
|
- border-bottom: 1rpx solid #f0f0f0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.point-item.small {
|
|
|
- padding-left: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.point-item.active {
|
|
|
- background-color: #f0f9f2;
|
|
|
-}
|
|
|
-
|
|
|
-.point-label {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #3bb44a;
|
|
|
- margin-right: 8rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.point-coord {
|
|
|
- flex: 1;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.point-time {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.obstacle-item {
|
|
|
- margin-top: 6rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.obstacle-title {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #666;
|
|
|
- margin-bottom: 2rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.empty-row {
|
|
|
- padding: 12rpx 0;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.start-index {
|
|
|
- flex: 1;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-
|
|
|
-.start-index-text {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #2c3e50;
|
|
|
-}
|
|
|
-
|
|
|
-.card.confirm-card {
|
|
|
- padding: 22rpx 24rpx 10rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.confirm-title {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #2c3e50;
|
|
|
- margin-bottom: 12rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.form-item {
|
|
|
- margin-bottom: 16rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.form-item.required .label::after {
|
|
|
- content: '*';
|
|
|
- color: #ff4d4f;
|
|
|
- margin-left: 4rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.label {
|
|
|
- display: block;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #555;
|
|
|
- margin-bottom: 8rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.input {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- padding: 14rpx 18rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- background-color: #f7f7f7;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.summary-row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 8rpx 0;
|
|
|
- border-bottom: 1rpx solid #f0f0f0;
|
|
|
-}
|
|
|
-
|
|
|
-.summary-label {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #777;
|
|
|
-}
|
|
|
-
|
|
|
-.summary-value {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.tips-card {
|
|
|
- padding: 20rpx 22rpx 16rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.tips-title {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #2c3e50;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 6rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.tips-content text {
|
|
|
- display: block;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #666;
|
|
|
- margin-top: 4rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.footer {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- padding: 12rpx 26rpx 24rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
|
- display: flex;
|
|
|
- gap: 12rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.btn {
|
|
|
- flex: 1;
|
|
|
- height: 84rpx;
|
|
|
- line-height: 84rpx;
|
|
|
- border-radius: 42rpx;
|
|
|
- font-size: 28rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.btn.primary {
|
|
|
- background: linear-gradient(135deg, #3bb44a, #66cc6a);
|
|
|
- color: #ffffff;
|
|
|
-}
|
|
|
-
|
|
|
-.btn.ghost {
|
|
|
- background-color: #f4f5f7;
|
|
|
- color: #555;
|
|
|
-}
|
|
|
-
|
|
|
-.btn:disabled {
|
|
|
- opacity: 0.5;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-location {
|
|
|
- padding: 8rpx 16rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background-color: #f0f9f2;
|
|
|
- border: 1rpx solid #3bb44a;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #3bb44a;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- min-width: 120rpx;
|
|
|
- height: 56rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-location-text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #3bb44a;
|
|
|
-}
|
|
|
-
|
|
|
-/* 任务标题行新增作业按钮样式（与详情页保持风格一致） */
|
|
|
-.task-title-row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.task-title-left {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.task-title-text {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #2c3e50;
|
|
|
-}
|
|
|
-
|
|
|
-.task-title-sub {
|
|
|
- margin-top: 4rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #8c9396;
|
|
|
-}
|
|
|
-
|
|
|
-.task-add-btn {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- background: linear-gradient(135deg, #3bb44a, #66cc6a);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(59, 180, 74, 0.3);
|
|
|
-}
|
|
|
-
|
|
|
-.task-add-plus {
|
|
|
- font-size: 40rpx;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.p-marker-label {
|
|
|
- background: rgba(59,180,74,0.95);
|
|
|
- color: #fff;
|
|
|
- padding: 2px 6px;
|
|
|
- border-radius: 10px;
|
|
|
- font-size: 18rpx;
|
|
|
- line-height: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.obstacle-marker-label {
|
|
|
- background: rgba(255, 152, 0, 0.95);
|
|
|
- color: #fff;
|
|
|
- padding: 2px 6px;
|
|
|
- border-radius: 10px;
|
|
|
- font-size: 16rpx;
|
|
|
- line-height: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.return-marker-label {
|
|
|
- background: rgba(33, 150, 243, 0.95);
|
|
|
- color: #fff;
|
|
|
- padding: 2px 8px;
|
|
|
- border-radius: 10px;
|
|
|
- font-size: 18rpx;
|
|
|
- line-height: 1;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
-
|
