加入二维码设置
This commit is contained in:
+172
@@ -51,6 +51,7 @@ class GlobalState:
|
|||||||
"positions": [] # 独立点位配置 [{row, col, side, coords, poses}]
|
"positions": [] # 独立点位配置 [{row, col, side, coords, poses}]
|
||||||
}
|
}
|
||||||
self.machines_config = [] # 机器配置(每台机器的正面/背面点位+姿态)
|
self.machines_config = [] # 机器配置(每台机器的正面/背面点位+姿态)
|
||||||
|
self.qr_config = [] # 二维码配置(独立点位列表)
|
||||||
self.navigator = None # Nav2Navigator 实例
|
self.navigator = None # Nav2Navigator 实例
|
||||||
self.lock = threading.Lock()
|
self.lock = threading.Lock()
|
||||||
|
|
||||||
@@ -112,6 +113,12 @@ def load_persisted_config():
|
|||||||
gs.machines_config = machines_cfg
|
gs.machines_config = machines_cfg
|
||||||
print(f"[启动] 加载机器配置: {len(machines_cfg)} 台机器")
|
print(f"[启动] 加载机器配置: {len(machines_cfg)} 台机器")
|
||||||
|
|
||||||
|
# 加载二维码配置
|
||||||
|
qr_cfg = load_json("qr_config.json", [])
|
||||||
|
if qr_cfg:
|
||||||
|
gs.qr_config = qr_cfg
|
||||||
|
print(f"[启动] 加载二维码配置: {len(qr_cfg)} 个点位")
|
||||||
|
|
||||||
# 在 Flask 2.3+ 使用 @app.before_serving,兼容旧版用 before_first_request
|
# 在 Flask 2.3+ 使用 @app.before_serving,兼容旧版用 before_first_request
|
||||||
try:
|
try:
|
||||||
from flask import has_app_context
|
from flask import has_app_context
|
||||||
@@ -783,6 +790,7 @@ def api_mission_machine_add():
|
|||||||
"col": data.get("col", 0),
|
"col": data.get("col", 0),
|
||||||
"front": data.get("front", {"coords": [0, 0, 0], "poses": []}),
|
"front": data.get("front", {"coords": [0, 0, 0], "poses": []}),
|
||||||
"back": data.get("back", {"coords": [0, 0, 0], "poses": []}),
|
"back": data.get("back", {"coords": [0, 0, 0], "poses": []}),
|
||||||
|
"qr": data.get("qr", {"coords": [0, 0, 0], "qr_value": "", "model_id": ""}),
|
||||||
}
|
}
|
||||||
gs.machines_config.append(machine)
|
gs.machines_config.append(machine)
|
||||||
save_json("machines_config.json", gs.machines_config)
|
save_json("machines_config.json", gs.machines_config)
|
||||||
@@ -807,6 +815,39 @@ def api_mission_machine_delete(machine_id):
|
|||||||
save_json("machines_config.json", gs.machines_config)
|
save_json("machines_config.json", gs.machines_config)
|
||||||
return jsonify({"ok": True})
|
return jsonify({"ok": True})
|
||||||
|
|
||||||
|
@app.route("/api/mission/qr_scan/<machine_id>", methods=["POST"])
|
||||||
|
def api_mission_qr_scan(machine_id):
|
||||||
|
"""扫描二维码并关联到机器"""
|
||||||
|
if not gs.qr_scanner or not gs.qr_scanner._cap:
|
||||||
|
return jsonify({"ok": False, "error": "AGV 摄像头未打开"}), 400
|
||||||
|
result = gs.qr_scanner.scan_once()
|
||||||
|
if result:
|
||||||
|
# 在 machines_config 和 mission_config 中查找机器
|
||||||
|
for i, m in enumerate(gs.machines_config):
|
||||||
|
if m["id"] == machine_id:
|
||||||
|
if "qr" not in m:
|
||||||
|
m["qr"] = {"coords": [0, 0, 0], "qr_value": "", "model_id": ""}
|
||||||
|
m["qr"]["qr_value"] = result
|
||||||
|
# 尝试匹配机型(通过 serial_prefix)
|
||||||
|
matched_model = None
|
||||||
|
for model in gs.models_config:
|
||||||
|
prefix = model.get("serial_prefix", "")
|
||||||
|
if prefix and result.startswith(prefix):
|
||||||
|
matched_model = model
|
||||||
|
break
|
||||||
|
if matched_model:
|
||||||
|
m["qr"]["model_id"] = matched_model["id"]
|
||||||
|
save_json("machines_config.json", gs.machines_config)
|
||||||
|
return jsonify({
|
||||||
|
"ok": True,
|
||||||
|
"qr_value": result,
|
||||||
|
"model_id": m["qr"].get("model_id", ""),
|
||||||
|
"model_name": matched_model["name"] if matched_model else ""
|
||||||
|
})
|
||||||
|
return jsonify({"ok": False, "error": f"机器 {machine_id} 不存在"}), 404
|
||||||
|
return jsonify({"ok": False, "error": "未检测到二维码"})
|
||||||
|
|
||||||
|
|
||||||
@app.route("/api/mission/poses/<machine_id>/<side>", methods=["GET"])
|
@app.route("/api/mission/poses/<machine_id>/<side>", methods=["GET"])
|
||||||
def api_mission_poses_get(machine_id, side):
|
def api_mission_poses_get(machine_id, side):
|
||||||
"""获取机器指定侧的姿态列表(side: front | back)"""
|
"""获取机器指定侧的姿态列表(side: front | back)"""
|
||||||
@@ -1272,6 +1313,137 @@ def api_mission_state():
|
|||||||
return jsonify({"state": gs.state})
|
return jsonify({"state": gs.state})
|
||||||
|
|
||||||
|
|
||||||
|
# ========== 二维码配置 API ==========
|
||||||
|
@app.route("/api/qr/configs", methods=["GET"])
|
||||||
|
def api_qr_configs_get():
|
||||||
|
"""获取所有二维码配置"""
|
||||||
|
return jsonify({"ok": True, "configs": gs.qr_config})
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/api/qr/configs", methods=["POST"])
|
||||||
|
def api_qr_configs_add():
|
||||||
|
"""添加二维码配置"""
|
||||||
|
data = request.json or {}
|
||||||
|
new_entry = {
|
||||||
|
"id": "qr_" + str(int(time.time() * 1000)),
|
||||||
|
"name": data.get("name", f"二维码{len(gs.qr_config) + 1}"),
|
||||||
|
"joint_angles": data.get("joint_angles", [0.0, 0.0, 0.0, 0.0, 0.0, 0.0]),
|
||||||
|
"qr_value": "",
|
||||||
|
"model_id": "",
|
||||||
|
}
|
||||||
|
gs.qr_config.append(new_entry)
|
||||||
|
save_json("qr_config.json", gs.qr_config)
|
||||||
|
return jsonify({"ok": True, "entry": new_entry})
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/api/qr/configs/<qr_id>", methods=["PUT"])
|
||||||
|
def api_qr_configs_update(qr_id):
|
||||||
|
"""更新二维码配置"""
|
||||||
|
data = request.json or {}
|
||||||
|
for entry in gs.qr_config:
|
||||||
|
if entry["id"] == qr_id:
|
||||||
|
if "name" in data:
|
||||||
|
entry["name"] = data["name"]
|
||||||
|
if "joint_angles" in data:
|
||||||
|
entry["joint_angles"] = data["joint_angles"]
|
||||||
|
if "qr_value" in data:
|
||||||
|
entry["qr_value"] = data["qr_value"]
|
||||||
|
if "model_id" in data:
|
||||||
|
entry["model_id"] = data["model_id"]
|
||||||
|
save_json("qr_config.json", gs.qr_config)
|
||||||
|
return jsonify({"ok": True, "entry": entry})
|
||||||
|
return jsonify({"ok": False, "error": f"二维码 {qr_id} 不存在"}), 404
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/api/qr/configs/<qr_id>", methods=["DELETE"])
|
||||||
|
def api_qr_configs_delete(qr_id):
|
||||||
|
"""删除二维码配置"""
|
||||||
|
for i, entry in enumerate(gs.qr_config):
|
||||||
|
if entry["id"] == qr_id:
|
||||||
|
gs.qr_config.pop(i)
|
||||||
|
save_json("qr_config.json", gs.qr_config)
|
||||||
|
return jsonify({"ok": True})
|
||||||
|
return jsonify({"ok": False, "error": f"二维码 {qr_id} 不存在"}), 404
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/api/qr/configs/<qr_id>/read-angles", methods=["POST"])
|
||||||
|
def api_qr_read_angles(qr_id):
|
||||||
|
"""读取机械臂当前关节角度并保存到指定二维码配置"""
|
||||||
|
if not gs.arm_client:
|
||||||
|
return jsonify({"ok": False, "error": "机械臂未连接"}), 400
|
||||||
|
ok, angles = gs.arm_client.get_angles()
|
||||||
|
if not ok or not angles:
|
||||||
|
return jsonify({"ok": False, "error": "无法读取机械臂角度"}), 400
|
||||||
|
for entry in gs.qr_config:
|
||||||
|
if entry["id"] == qr_id:
|
||||||
|
entry["joint_angles"] = list(angles)
|
||||||
|
save_json("qr_config.json", gs.qr_config)
|
||||||
|
return jsonify({"ok": True, "joint_angles": entry["joint_angles"]})
|
||||||
|
return jsonify({"ok": False, "error": f"二维码 {qr_id} 不存在"}), 404
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/api/qr/scan/<qr_id>", methods=["POST"])
|
||||||
|
def api_qr_config_scan(qr_id):
|
||||||
|
"""获取机械臂摄像头图像,识别二维码并保存到指定配置项"""
|
||||||
|
import requests
|
||||||
|
try:
|
||||||
|
import cv2
|
||||||
|
import numpy as np
|
||||||
|
# 从机械臂摄像头拉取一帧 JPEG
|
||||||
|
r = requests.get(ARM_CAMERA_CONFIG["url"], stream=True, timeout=5)
|
||||||
|
if r.status_code != 200:
|
||||||
|
return jsonify({"ok": False, "error": "无法连接机械臂摄像头"}), 400
|
||||||
|
data = b""
|
||||||
|
for chunk in r.iter_content(chunk_size=4096):
|
||||||
|
data += chunk
|
||||||
|
s = data.find(b"\xff\xd8")
|
||||||
|
e = data.find(b"\xff\xd9", s + 2) if s >= 0 else -1
|
||||||
|
if s >= 0 and e > s:
|
||||||
|
r.close()
|
||||||
|
jpg_bytes = data[s:e+2]
|
||||||
|
# 解码为 numpy 数组并检测二维码
|
||||||
|
nparr = np.frombuffer(jpg_bytes, np.uint8)
|
||||||
|
frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
|
||||||
|
if frame is None:
|
||||||
|
return jsonify({"ok": False, "error": "图像解码失败"}), 400
|
||||||
|
# 使用 OpenCV QRCodeDetector 检测
|
||||||
|
detector = cv2.QRCodeDetector()
|
||||||
|
result, _, _ = detector.detectAndDecode(frame)
|
||||||
|
if result and len(result.strip()) > 0:
|
||||||
|
result = result.strip()
|
||||||
|
# 保存到配置项
|
||||||
|
for entry in gs.qr_config:
|
||||||
|
if entry["id"] == qr_id:
|
||||||
|
entry["qr_value"] = result
|
||||||
|
# 尝试匹配机型
|
||||||
|
matched_model = None
|
||||||
|
for model in gs.models_config:
|
||||||
|
prefix = model.get("serial_prefix", "")
|
||||||
|
if prefix and result.startswith(prefix):
|
||||||
|
matched_model = model
|
||||||
|
break
|
||||||
|
if matched_model:
|
||||||
|
entry["model_id"] = matched_model["id"]
|
||||||
|
save_json("qr_config.json", gs.qr_config)
|
||||||
|
return jsonify({
|
||||||
|
"ok": True,
|
||||||
|
"qr_value": result,
|
||||||
|
"model_id": entry.get("model_id", ""),
|
||||||
|
"model_name": matched_model["name"] if matched_model else ""
|
||||||
|
})
|
||||||
|
return jsonify({"ok": False, "error": f"二维码 {qr_id} 不存在"}), 404
|
||||||
|
else:
|
||||||
|
return jsonify({"ok": False, "error": "未检测到二维码"})
|
||||||
|
if len(data) > 1024 * 1024:
|
||||||
|
r.close()
|
||||||
|
return jsonify({"ok": False, "error": "摄像头数据流异常"}), 400
|
||||||
|
r.close()
|
||||||
|
return jsonify({"ok": False, "error": "未收到完整图像帧"}), 400
|
||||||
|
except Exception as ex:
|
||||||
|
logger.error(f"QR 扫描机械臂摄像头失败: {ex}")
|
||||||
|
return jsonify({"ok": False, "error": f"扫描失败: {str(ex)}"}), 400
|
||||||
|
|
||||||
|
|
||||||
# ========== 静态资源 ==========
|
# ========== 静态资源 ==========
|
||||||
@app.route("/photos/<name>")
|
@app.route("/photos/<name>")
|
||||||
def photos(name):
|
def photos(name):
|
||||||
|
|||||||
+202
-3
@@ -45,13 +45,31 @@ createApp({
|
|||||||
agvMoveInterval: null,
|
agvMoveInterval: null,
|
||||||
agvCameraUrl: API + '/api/camera/refresh',
|
agvCameraUrl: API + '/api/camera/refresh',
|
||||||
agvCameraTimer: null,
|
agvCameraTimer: null,
|
||||||
|
// QR
|
||||||
|
qrScanning: false,
|
||||||
|
qrConfigs: [],
|
||||||
|
qrScanningId: null,
|
||||||
|
armCameraUrl: API + '/api/camera/arm_refresh',
|
||||||
|
newQrName: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.refresh()
|
this.refresh()
|
||||||
this.refreshAngles()
|
this.refreshAngles()
|
||||||
|
this.loadQrConfigs()
|
||||||
this.nav2Timer = setInterval(this.refreshNavStatus, 3000)
|
this.nav2Timer = setInterval(this.refreshNavStatus, 3000)
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
hasQr() {
|
||||||
|
return !!(this.selectedMachine && this.selectedMachine.qr)
|
||||||
|
},
|
||||||
|
hasQrValue() {
|
||||||
|
return !!(this.selectedMachine && this.selectedMachine.qr && this.selectedMachine.qr.qr_value)
|
||||||
|
},
|
||||||
|
hasQrModelId() {
|
||||||
|
return !!(this.selectedMachine && this.selectedMachine.qr && this.selectedMachine.qr.model_id)
|
||||||
|
}
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
tab(val) {
|
tab(val) {
|
||||||
if (val === 'agv') {
|
if (val === 'agv') {
|
||||||
@@ -339,13 +357,22 @@ createApp({
|
|||||||
try {
|
try {
|
||||||
const res = await fetch(API + '/api/mission/machines')
|
const res = await fetch(API + '/api/mission/machines')
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
this.missionConfig.machines = data.machines || []
|
this.missionConfig.machines = (data.machines || []).map(m => {
|
||||||
|
if (!m.front) m.front = { coords: [0,0,0], poses: [] }
|
||||||
|
if (!m.back) m.back = { coords: [0,0,0], poses: [] }
|
||||||
|
if (!m.qr) m.qr = { coords: [0,0,0], qr_value: '', model_id: '' }
|
||||||
|
return m
|
||||||
|
})
|
||||||
} catch (e) { console.error('加载机器列表失败', e) }
|
} catch (e) { console.error('加载机器列表失败', e) }
|
||||||
},
|
},
|
||||||
getMachineAt(ri, ci) {
|
getMachineAt(ri, ci) {
|
||||||
if (!this.missionConfig.machines) return null
|
if (!this.missionConfig.machines) return null
|
||||||
return this.missionConfig.machines.find(m => m.row === ri && m.col === ci) || null
|
return this.missionConfig.machines.find(m => m.row === ri && m.col === ci) || null
|
||||||
},
|
},
|
||||||
|
getPointAt(ri, ci) {
|
||||||
|
if (!this.missionConfig.positions) return null
|
||||||
|
return this.missionConfig.positions.find(p => p.row === ri && p.col === ci) || null
|
||||||
|
},
|
||||||
getPositionAt(ri, ci) {
|
getPositionAt(ri, ci) {
|
||||||
if (!this.missionConfig.machines) return null
|
if (!this.missionConfig.machines) return null
|
||||||
const machine = this.getMachineAt(ri, ci)
|
const machine = this.getMachineAt(ri, ci)
|
||||||
@@ -380,7 +407,8 @@ createApp({
|
|||||||
row: ri,
|
row: ri,
|
||||||
col: ci,
|
col: ci,
|
||||||
front: { coords: [0, 0, 0], poses: [] },
|
front: { coords: [0, 0, 0], poses: [] },
|
||||||
back: { coords: [0, 0, 0], poses: [] }
|
back: { coords: [0, 0, 0], poses: [] },
|
||||||
|
qr: { coords: [0, 0, 0], qr_value: '', model_id: '' }
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
@@ -397,6 +425,8 @@ createApp({
|
|||||||
else if (!Array.isArray(machine.front.coords)) machine.front.coords = [0, 0, 0]
|
else if (!Array.isArray(machine.front.coords)) machine.front.coords = [0, 0, 0]
|
||||||
if (!machine.back) machine.back = { coords: [0, 0, 0], poses: [] }
|
if (!machine.back) machine.back = { coords: [0, 0, 0], poses: [] }
|
||||||
else if (!Array.isArray(machine.back.coords)) machine.back.coords = [0, 0, 0]
|
else if (!Array.isArray(machine.back.coords)) machine.back.coords = [0, 0, 0]
|
||||||
|
if (!machine.qr) machine.qr = { coords: [0, 0, 0], qr_value: '', model_id: '' }
|
||||||
|
else if (!Array.isArray(machine.qr.coords)) machine.qr.coords = [0, 0, 0]
|
||||||
this.selectedMachine = machine
|
this.selectedMachine = machine
|
||||||
},
|
},
|
||||||
clearSelection() {
|
clearSelection() {
|
||||||
@@ -418,7 +448,8 @@ createApp({
|
|||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
front: this.selectedMachine.front,
|
front: this.selectedMachine.front,
|
||||||
back: this.selectedMachine.back
|
back: this.selectedMachine.back,
|
||||||
|
qr: this.selectedMachine.qr || { coords: [0, 0, 0], qr_value: '', model_id: '' }
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
@@ -614,6 +645,174 @@ createApp({
|
|||||||
async agvStop() {
|
async agvStop() {
|
||||||
await fetch(API + '/api/agv/stop', { method: 'POST' })
|
await fetch(API + '/api/agv/stop', { method: 'POST' })
|
||||||
},
|
},
|
||||||
|
// === QR 安全访问器(避免 v-model 在 v-if 内因 Vue 编译器优化导致 undefined 报错)===
|
||||||
|
machineHasQr(m) {
|
||||||
|
if (!m || !m.qr || !m.qr.coords || m.qr.coords.length < 2) return false
|
||||||
|
return m.qr.coords[0] !== 0 || m.qr.coords[1] !== 0
|
||||||
|
},
|
||||||
|
qrMarkerStyle(m) {
|
||||||
|
if (!this.machineHasQr(m)) return { display: 'none' }
|
||||||
|
return { left: this.getMapX(m.qr.coords) + '%', top: this.getMapY(m.qr.coords) + '%' }
|
||||||
|
},
|
||||||
|
qrMarkerTitle(m) {
|
||||||
|
if (!m || !m.qr) return ''
|
||||||
|
return 'QR: ' + (m.qr.qr_value || '未扫描')
|
||||||
|
},
|
||||||
|
safeQr(key) {
|
||||||
|
if (!this.selectedMachine || !this.selectedMachine.qr) return ''
|
||||||
|
return this.selectedMachine.qr[key] ?? ''
|
||||||
|
},
|
||||||
|
safeQrCoord(idx) {
|
||||||
|
if (!this.selectedMachine || !this.selectedMachine.qr || !this.selectedMachine.qr.coords) return 0
|
||||||
|
return this.selectedMachine.qr.coords[idx] !== undefined ? this.selectedMachine.qr.coords[idx] : 0
|
||||||
|
},
|
||||||
|
setQrCoord(idx, val) {
|
||||||
|
if (this.selectedMachine && this.selectedMachine.qr && this.selectedMachine.qr.coords) {
|
||||||
|
this.selectedMachine.qr.coords[idx] = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
safeQrModelName() {
|
||||||
|
if (!this.selectedMachine || !this.selectedMachine.qr || !this.selectedMachine.qr.model_id) return ''
|
||||||
|
return this.getModelName(this.selectedMachine.qr.model_id)
|
||||||
|
},
|
||||||
|
// === QR 二维码 ===
|
||||||
|
async readQRPosition() {
|
||||||
|
if (!this.agvConnected) { alert('AGV 未连接'); return }
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/agv/position')
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.ok && data.position) {
|
||||||
|
const [x, y, theta] = data.position
|
||||||
|
if (!this.selectedMachine.qr) this.selectedMachine.qr = { coords: [0, 0, 0], qr_value: '', model_id: '' }
|
||||||
|
this.selectedMachine.qr.coords = [x, y, theta]
|
||||||
|
} else {
|
||||||
|
alert('读取位置失败: ' + (data.error || '未知错误'))
|
||||||
|
}
|
||||||
|
} catch (e) { alert('读取位置失败: ' + e.message) }
|
||||||
|
},
|
||||||
|
async scanQRCode(machineId) {
|
||||||
|
if (!this.cameraOpened) { alert('AGV 摄像头未打开'); return }
|
||||||
|
this.qrScanning = true
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/mission/qr_scan/' + machineId, { method: 'POST' })
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.ok) {
|
||||||
|
await this.loadAllMachines()
|
||||||
|
const updated = this.getMachineAt(this.selectedMachine.row, this.selectedMachine.col)
|
||||||
|
if (updated) this.selectMachine(updated)
|
||||||
|
let msg = '✅ 扫描成功: ' + data.qr_value
|
||||||
|
if (data.model_name) msg += ' → 匹配机型: ' + data.model_name
|
||||||
|
else msg += ' → 未匹配到机型'
|
||||||
|
alert(msg)
|
||||||
|
} else {
|
||||||
|
alert('❌ ' + (data.error || '扫描失败'))
|
||||||
|
}
|
||||||
|
} catch (e) { alert('扫描失败: ' + e.message) }
|
||||||
|
this.qrScanning = false
|
||||||
|
},
|
||||||
|
// ========== 二维码配置(独立 Tab)==========
|
||||||
|
async loadQrConfigs() {
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/qr/configs')
|
||||||
|
const data = await res.json()
|
||||||
|
this.qrConfigs = (data.configs || []).map(c => {
|
||||||
|
// 兼容旧版的 coords → 转为 joint_angles
|
||||||
|
if (!c.joint_angles || !Array.isArray(c.joint_angles)) {
|
||||||
|
c.joint_angles = [0, 0, 0, 0, 0, 0]
|
||||||
|
}
|
||||||
|
return c
|
||||||
|
})
|
||||||
|
} catch (e) { console.error('加载二维码配置失败', e) }
|
||||||
|
},
|
||||||
|
async addQrConfig() {
|
||||||
|
const name = this.newQrName.trim() || ''
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/qr/configs', {
|
||||||
|
method: 'POST', headers: {'Content-Type':'application/json'},
|
||||||
|
body: JSON.stringify({ name: name || undefined })
|
||||||
|
})
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.ok) {
|
||||||
|
this.qrConfigs.push(data.entry)
|
||||||
|
this.newQrName = ''
|
||||||
|
}
|
||||||
|
} catch (e) { alert('添加失败: ' + e.message) }
|
||||||
|
},
|
||||||
|
getQrAngle(q, idx) {
|
||||||
|
if (!q || !q.joint_angles || !Array.isArray(q.joint_angles)) return 0
|
||||||
|
return q.joint_angles[idx] !== undefined ? q.joint_angles[idx] : 0
|
||||||
|
},
|
||||||
|
async updateQrAngle(qrId, idx, val) {
|
||||||
|
const q = this.qrConfigs.find(x => x.id === qrId)
|
||||||
|
if (!q) return
|
||||||
|
if (!q.joint_angles || !Array.isArray(q.joint_angles)) q.joint_angles = [0,0,0,0,0,0]
|
||||||
|
q.joint_angles[idx] = parseFloat(val) || 0
|
||||||
|
try {
|
||||||
|
await fetch(API + '/api/qr/configs/' + qrId, {
|
||||||
|
method: 'PUT', headers: {'Content-Type':'application/json'},
|
||||||
|
body: JSON.stringify({ joint_angles: q.joint_angles })
|
||||||
|
})
|
||||||
|
} catch (e) { console.error('保存角度失败', e) }
|
||||||
|
},
|
||||||
|
async readQrAngles(qrId) {
|
||||||
|
if (!this.armConnected) { alert('机械臂未连接'); return }
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/qr/configs/' + qrId + '/read-angles', { method: 'POST' })
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.ok) {
|
||||||
|
const q = this.qrConfigs.find(x => x.id === qrId)
|
||||||
|
if (q && data.joint_angles) {
|
||||||
|
q.joint_angles = data.joint_angles
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert('读取角度失败: ' + (data.error || '未知错误'))
|
||||||
|
}
|
||||||
|
} catch (e) { alert('读取角度失败: ' + e.message) }
|
||||||
|
},
|
||||||
|
async saveQrConfig(qrId) {
|
||||||
|
const q = this.qrConfigs.find(x => x.id === qrId)
|
||||||
|
if (!q) return
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/qr/configs/' + qrId, {
|
||||||
|
method: 'PUT', headers: {'Content-Type':'application/json'},
|
||||||
|
body: JSON.stringify({ name: q.name })
|
||||||
|
})
|
||||||
|
if (!res.ok) alert('保存名称失败')
|
||||||
|
} catch (e) { alert('保存失败: ' + e.message) }
|
||||||
|
},
|
||||||
|
async deleteQrConfig(qrId) {
|
||||||
|
if (!confirm('确定删除此二维码点位?')) return
|
||||||
|
try {
|
||||||
|
await fetch(API + '/api/qr/configs/' + qrId, { method: 'DELETE' })
|
||||||
|
this.qrConfigs = this.qrConfigs.filter(x => x.id !== qrId)
|
||||||
|
} catch (e) { alert('删除失败: ' + e.message) }
|
||||||
|
},
|
||||||
|
getQrModelName(modelId) {
|
||||||
|
const model = this.models.find(m => m.id === modelId)
|
||||||
|
return model ? model.name : ''
|
||||||
|
},
|
||||||
|
getModelName(modelId) {
|
||||||
|
const model = this.models.find(m => m.id === modelId)
|
||||||
|
return model ? model.name : ''
|
||||||
|
},
|
||||||
|
async scanQrEntry(qrId) {
|
||||||
|
this.qrScanningId = qrId
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/qr/scan/' + qrId, { method: 'POST' })
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.ok) {
|
||||||
|
await this.loadQrConfigs()
|
||||||
|
let msg = '扫描成功: ' + data.qr_value
|
||||||
|
if (data.model_name) msg += ' 匹配机型: ' + data.model_name
|
||||||
|
else msg += ' 未匹配到机型'
|
||||||
|
alert(msg)
|
||||||
|
} else { alert(data.error || '扫描失败') }
|
||||||
|
} catch (e) { alert('扫描失败: ' + e.message) }
|
||||||
|
this.qrScanningId = null
|
||||||
|
},
|
||||||
|
onArmPreviewError() {
|
||||||
|
// 机械臂摄像头预览失败,静默处理
|
||||||
|
},
|
||||||
async agvResetCollision() {
|
async agvResetCollision() {
|
||||||
if (!this.agvConnected) {
|
if (!this.agvConnected) {
|
||||||
alert('AGV 未连接')
|
alert('AGV 未连接')
|
||||||
|
|||||||
@@ -735,3 +735,42 @@ a:hover { text-decoration: underline; }
|
|||||||
0%, 100% { transform: scale(1); opacity: 1; }
|
0%, 100% { transform: scale(1); opacity: 1; }
|
||||||
50% { transform: scale(1.3); opacity: 0.7; }
|
50% { transform: scale(1.3); opacity: 0.7; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 二维码位置点 */
|
||||||
|
.qr-dot {
|
||||||
|
width: 12px !important;
|
||||||
|
height: 12px !important;
|
||||||
|
background: #ff9800 !important;
|
||||||
|
border: 2px solid #fff !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
box-shadow: 0 0 8px #ff9800, 0 0 14px #ff980088 !important;
|
||||||
|
animation: qr-pulse 2s ease-in-out infinite !important;
|
||||||
|
z-index: 10 !important;
|
||||||
|
}
|
||||||
|
@keyframes qr-pulse {
|
||||||
|
0%, 100% { transform: scale(1); opacity: 1; }
|
||||||
|
50% { transform: scale(1.2); opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 机器行:有机/无机器 切换 */
|
||||||
|
.machine-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.machine-toggle input[type="checkbox"] {
|
||||||
|
accent-color: #4caf50;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.machine-status.on {
|
||||||
|
color: #4caf50;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.machine-status.off {
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|||||||
+206
-309
@@ -11,7 +11,7 @@ createApp({
|
|||||||
sequence: [],
|
sequence: [],
|
||||||
poseForm: { name: '', photo_type: 'front', description: '' },
|
poseForm: { name: '', photo_type: 'front', description: '' },
|
||||||
// 地图
|
// 地图
|
||||||
mapForm: { map_dir: '/home/elephant/agv_pro_ros2/install/agv_pro_navigation2/share/agv_pro_navigation2/map/', map_file: 'map.yaml' },
|
mapForm: { map_dir: '/home/elephant/agv_pro_ros2/src/agv_pro_navigation2/map/', map_file: 'map.yaml' },
|
||||||
mapMsg: '',
|
mapMsg: '',
|
||||||
mapLoaded: false,
|
mapLoaded: false,
|
||||||
mapImageUrl: '',
|
mapImageUrl: '',
|
||||||
@@ -22,8 +22,6 @@ createApp({
|
|||||||
nav2Available: false,
|
nav2Available: false,
|
||||||
// 点位
|
// 点位
|
||||||
points: [],
|
points: [],
|
||||||
editingPoint: null, // 当前编辑的点位 {pointRow, col}
|
|
||||||
pointEditor: { x: 0, y: 0, yaw: 0 },
|
|
||||||
newPointName: '',
|
newPointName: '',
|
||||||
newPointMode: 'front',
|
newPointMode: 'front',
|
||||||
newPointSequence: ['front', 'back'],
|
newPointSequence: ['front', 'back'],
|
||||||
@@ -47,18 +45,31 @@ createApp({
|
|||||||
agvMoveInterval: null,
|
agvMoveInterval: null,
|
||||||
agvCameraUrl: API + '/api/camera/refresh',
|
agvCameraUrl: API + '/api/camera/refresh',
|
||||||
agvCameraTimer: null,
|
agvCameraTimer: null,
|
||||||
// 初始化定位
|
// QR
|
||||||
initPoseLoading: false,
|
qrScanning: false,
|
||||||
initPoseMsg: '',
|
qrConfigs: [],
|
||||||
initAmclPoseLoading: false,
|
qrScanningId: null,
|
||||||
initAmclPoseMsg: '',
|
armCameraUrl: API + '/api/camera/arm_refresh',
|
||||||
|
newQrName: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.refresh()
|
this.refresh()
|
||||||
this.refreshAngles()
|
this.refreshAngles()
|
||||||
|
this.loadQrConfigs()
|
||||||
this.nav2Timer = setInterval(this.refreshNavStatus, 3000)
|
this.nav2Timer = setInterval(this.refreshNavStatus, 3000)
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
hasQr() {
|
||||||
|
return !!(this.selectedMachine && this.selectedMachine.qr)
|
||||||
|
},
|
||||||
|
hasQrValue() {
|
||||||
|
return !!(this.selectedMachine && this.selectedMachine.qr && this.selectedMachine.qr.qr_value)
|
||||||
|
},
|
||||||
|
hasQrModelId() {
|
||||||
|
return !!(this.selectedMachine && this.selectedMachine.qr && this.selectedMachine.qr.model_id)
|
||||||
|
}
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
tab(val) {
|
tab(val) {
|
||||||
if (val === 'agv') {
|
if (val === 'agv') {
|
||||||
@@ -135,12 +146,9 @@ createApp({
|
|||||||
const res = await fetch(API + '/api/navigate/status')
|
const res = await fetch(API + '/api/navigate/status')
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
this.nav2Available = data.nav2_available || false
|
this.nav2Available = data.nav2_available
|
||||||
// API returns "current_position", normalize to our field
|
if (data.current_pos) {
|
||||||
const cp = data.current_position || data.current_pos || null
|
this.navCurrentPos = data.current_pos
|
||||||
if (cp) {
|
|
||||||
this.navCurrentPos = cp
|
|
||||||
console.log('[Setting] nav2:', data.nav2_available, 'cp:', cp.map(function(x){return x.toFixed(2)}), 'mapLoaded:', this.mapLoaded, 'mapMeta:', this.mapMeta ? 'ok' : 'null')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
@@ -153,8 +161,6 @@ createApp({
|
|||||||
const { resolution, origin } = this.mapMeta
|
const { resolution, origin } = this.mapMeta
|
||||||
const wx = origin[0] + px * resolution * this.mapMeta.width
|
const wx = origin[0] + px * resolution * this.mapMeta.width
|
||||||
const wy = origin[1] + (1 - py) * resolution * this.mapMeta.height
|
const wy = origin[1] + (1 - py) * resolution * this.mapMeta.height
|
||||||
// 确认框
|
|
||||||
if (!confirm(`确定导航到坐标 (${wx.toFixed(2)}, ${wy.toFixed(2)}) 吗?`)) return
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(API + '/api/navigate/to', {
|
const res = await fetch(API + '/api/navigate/to', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -307,8 +313,6 @@ createApp({
|
|||||||
this.missionConfig.rows = data.config.rows || 3
|
this.missionConfig.rows = data.config.rows || 3
|
||||||
this.missionConfig.cols = data.config.cols || 3
|
this.missionConfig.cols = data.config.cols || 3
|
||||||
this.missionConfig.grid = data.config.grid || []
|
this.missionConfig.grid = data.config.grid || []
|
||||||
this.missionConfig.positions = data.config.positions || []
|
|
||||||
this.missionConfig.machines = data.config.machines || []
|
|
||||||
}
|
}
|
||||||
} catch (e) { console.error('加载任务配置失败', e) }
|
} catch (e) { console.error('加载任务配置失败', e) }
|
||||||
},
|
},
|
||||||
@@ -353,13 +357,22 @@ createApp({
|
|||||||
try {
|
try {
|
||||||
const res = await fetch(API + '/api/mission/machines')
|
const res = await fetch(API + '/api/mission/machines')
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
this.missionConfig.machines = data.machines || []
|
this.missionConfig.machines = (data.machines || []).map(m => {
|
||||||
|
if (!m.front) m.front = { coords: [0,0,0], poses: [] }
|
||||||
|
if (!m.back) m.back = { coords: [0,0,0], poses: [] }
|
||||||
|
if (!m.qr) m.qr = { coords: [0,0,0], qr_value: '', model_id: '' }
|
||||||
|
return m
|
||||||
|
})
|
||||||
} catch (e) { console.error('加载机器列表失败', e) }
|
} catch (e) { console.error('加载机器列表失败', e) }
|
||||||
},
|
},
|
||||||
getMachineAt(ri, ci) {
|
getMachineAt(ri, ci) {
|
||||||
if (!this.missionConfig.machines) return null
|
if (!this.missionConfig.machines) return null
|
||||||
return this.missionConfig.machines.find(m => m.row === ri && m.col === ci) || null
|
return this.missionConfig.machines.find(m => m.row === ri && m.col === ci) || null
|
||||||
},
|
},
|
||||||
|
getPointAt(ri, ci) {
|
||||||
|
if (!this.missionConfig.positions) return null
|
||||||
|
return this.missionConfig.positions.find(p => p.row === ri && p.col === ci) || null
|
||||||
|
},
|
||||||
getPositionAt(ri, ci) {
|
getPositionAt(ri, ci) {
|
||||||
if (!this.missionConfig.machines) return null
|
if (!this.missionConfig.machines) return null
|
||||||
const machine = this.getMachineAt(ri, ci)
|
const machine = this.getMachineAt(ri, ci)
|
||||||
@@ -394,7 +407,8 @@ createApp({
|
|||||||
row: ri,
|
row: ri,
|
||||||
col: ci,
|
col: ci,
|
||||||
front: { coords: [0, 0, 0], poses: [] },
|
front: { coords: [0, 0, 0], poses: [] },
|
||||||
back: { coords: [0, 0, 0], poses: [] }
|
back: { coords: [0, 0, 0], poses: [] },
|
||||||
|
qr: { coords: [0, 0, 0], qr_value: '', model_id: '' }
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
@@ -411,6 +425,8 @@ createApp({
|
|||||||
else if (!Array.isArray(machine.front.coords)) machine.front.coords = [0, 0, 0]
|
else if (!Array.isArray(machine.front.coords)) machine.front.coords = [0, 0, 0]
|
||||||
if (!machine.back) machine.back = { coords: [0, 0, 0], poses: [] }
|
if (!machine.back) machine.back = { coords: [0, 0, 0], poses: [] }
|
||||||
else if (!Array.isArray(machine.back.coords)) machine.back.coords = [0, 0, 0]
|
else if (!Array.isArray(machine.back.coords)) machine.back.coords = [0, 0, 0]
|
||||||
|
if (!machine.qr) machine.qr = { coords: [0, 0, 0], qr_value: '', model_id: '' }
|
||||||
|
else if (!Array.isArray(machine.qr.coords)) machine.qr.coords = [0, 0, 0]
|
||||||
this.selectedMachine = machine
|
this.selectedMachine = machine
|
||||||
},
|
},
|
||||||
clearSelection() {
|
clearSelection() {
|
||||||
@@ -432,7 +448,8 @@ createApp({
|
|||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
front: this.selectedMachine.front,
|
front: this.selectedMachine.front,
|
||||||
back: this.selectedMachine.back
|
back: this.selectedMachine.back,
|
||||||
|
qr: this.selectedMachine.qr || { coords: [0, 0, 0], qr_value: '', model_id: '' }
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
@@ -628,6 +645,174 @@ createApp({
|
|||||||
async agvStop() {
|
async agvStop() {
|
||||||
await fetch(API + '/api/agv/stop', { method: 'POST' })
|
await fetch(API + '/api/agv/stop', { method: 'POST' })
|
||||||
},
|
},
|
||||||
|
// === QR 安全访问器(避免 v-model 在 v-if 内因 Vue 编译器优化导致 undefined 报错)===
|
||||||
|
machineHasQr(m) {
|
||||||
|
if (!m || !m.qr || !m.qr.coords || m.qr.coords.length < 2) return false
|
||||||
|
return m.qr.coords[0] !== 0 || m.qr.coords[1] !== 0
|
||||||
|
},
|
||||||
|
qrMarkerStyle(m) {
|
||||||
|
if (!this.machineHasQr(m)) return { display: 'none' }
|
||||||
|
return { left: this.getMapX(m.qr.coords) + '%', top: this.getMapY(m.qr.coords) + '%' }
|
||||||
|
},
|
||||||
|
qrMarkerTitle(m) {
|
||||||
|
if (!m || !m.qr) return ''
|
||||||
|
return 'QR: ' + (m.qr.qr_value || '未扫描')
|
||||||
|
},
|
||||||
|
safeQr(key) {
|
||||||
|
if (!this.selectedMachine || !this.selectedMachine.qr) return ''
|
||||||
|
return this.selectedMachine.qr[key] ?? ''
|
||||||
|
},
|
||||||
|
safeQrCoord(idx) {
|
||||||
|
if (!this.selectedMachine || !this.selectedMachine.qr || !this.selectedMachine.qr.coords) return 0
|
||||||
|
return this.selectedMachine.qr.coords[idx] !== undefined ? this.selectedMachine.qr.coords[idx] : 0
|
||||||
|
},
|
||||||
|
setQrCoord(idx, val) {
|
||||||
|
if (this.selectedMachine && this.selectedMachine.qr && this.selectedMachine.qr.coords) {
|
||||||
|
this.selectedMachine.qr.coords[idx] = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
safeQrModelName() {
|
||||||
|
if (!this.selectedMachine || !this.selectedMachine.qr || !this.selectedMachine.qr.model_id) return ''
|
||||||
|
return this.getModelName(this.selectedMachine.qr.model_id)
|
||||||
|
},
|
||||||
|
// === QR 二维码 ===
|
||||||
|
async readQRPosition() {
|
||||||
|
if (!this.agvConnected) { alert('AGV 未连接'); return }
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/agv/position')
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.ok && data.position) {
|
||||||
|
const [x, y, theta] = data.position
|
||||||
|
if (!this.selectedMachine.qr) this.selectedMachine.qr = { coords: [0, 0, 0], qr_value: '', model_id: '' }
|
||||||
|
this.selectedMachine.qr.coords = [x, y, theta]
|
||||||
|
} else {
|
||||||
|
alert('读取位置失败: ' + (data.error || '未知错误'))
|
||||||
|
}
|
||||||
|
} catch (e) { alert('读取位置失败: ' + e.message) }
|
||||||
|
},
|
||||||
|
async scanQRCode(machineId) {
|
||||||
|
if (!this.cameraOpened) { alert('AGV 摄像头未打开'); return }
|
||||||
|
this.qrScanning = true
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/mission/qr_scan/' + machineId, { method: 'POST' })
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.ok) {
|
||||||
|
await this.loadAllMachines()
|
||||||
|
const updated = this.getMachineAt(this.selectedMachine.row, this.selectedMachine.col)
|
||||||
|
if (updated) this.selectMachine(updated)
|
||||||
|
let msg = '✅ 扫描成功: ' + data.qr_value
|
||||||
|
if (data.model_name) msg += ' → 匹配机型: ' + data.model_name
|
||||||
|
else msg += ' → 未匹配到机型'
|
||||||
|
alert(msg)
|
||||||
|
} else {
|
||||||
|
alert('❌ ' + (data.error || '扫描失败'))
|
||||||
|
}
|
||||||
|
} catch (e) { alert('扫描失败: ' + e.message) }
|
||||||
|
this.qrScanning = false
|
||||||
|
},
|
||||||
|
// ========== 二维码配置(独立 Tab)==========
|
||||||
|
async loadQrConfigs() {
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/qr/configs')
|
||||||
|
const data = await res.json()
|
||||||
|
this.qrConfigs = (data.configs || []).map(c => {
|
||||||
|
// 兼容旧版的 coords → 转为 joint_angles
|
||||||
|
if (!c.joint_angles || !Array.isArray(c.joint_angles)) {
|
||||||
|
c.joint_angles = [0, 0, 0, 0, 0, 0]
|
||||||
|
}
|
||||||
|
return c
|
||||||
|
})
|
||||||
|
} catch (e) { console.error('加载二维码配置失败', e) }
|
||||||
|
},
|
||||||
|
async addQrConfig() {
|
||||||
|
const name = this.newQrName.trim() || ''
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/qr/configs', {
|
||||||
|
method: 'POST', headers: {'Content-Type':'application/json'},
|
||||||
|
body: JSON.stringify({ name: name || undefined })
|
||||||
|
})
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.ok) {
|
||||||
|
this.qrConfigs.push(data.entry)
|
||||||
|
this.newQrName = ''
|
||||||
|
}
|
||||||
|
} catch (e) { alert('添加失败: ' + e.message) }
|
||||||
|
},
|
||||||
|
getQrAngle(q, idx) {
|
||||||
|
if (!q || !q.joint_angles || !Array.isArray(q.joint_angles)) return 0
|
||||||
|
return q.joint_angles[idx] !== undefined ? q.joint_angles[idx] : 0
|
||||||
|
},
|
||||||
|
async updateQrAngle(qrId, idx, val) {
|
||||||
|
const q = this.qrConfigs.find(x => x.id === qrId)
|
||||||
|
if (!q) return
|
||||||
|
if (!q.joint_angles || !Array.isArray(q.joint_angles)) q.joint_angles = [0,0,0,0,0,0]
|
||||||
|
q.joint_angles[idx] = parseFloat(val) || 0
|
||||||
|
try {
|
||||||
|
await fetch(API + '/api/qr/configs/' + qrId, {
|
||||||
|
method: 'PUT', headers: {'Content-Type':'application/json'},
|
||||||
|
body: JSON.stringify({ joint_angles: q.joint_angles })
|
||||||
|
})
|
||||||
|
} catch (e) { console.error('保存角度失败', e) }
|
||||||
|
},
|
||||||
|
async readQrAngles(qrId) {
|
||||||
|
if (!this.armConnected) { alert('机械臂未连接'); return }
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/qr/configs/' + qrId + '/read-angles', { method: 'POST' })
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.ok) {
|
||||||
|
const q = this.qrConfigs.find(x => x.id === qrId)
|
||||||
|
if (q && data.joint_angles) {
|
||||||
|
q.joint_angles = data.joint_angles
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert('读取角度失败: ' + (data.error || '未知错误'))
|
||||||
|
}
|
||||||
|
} catch (e) { alert('读取角度失败: ' + e.message) }
|
||||||
|
},
|
||||||
|
async saveQrConfig(qrId) {
|
||||||
|
const q = this.qrConfigs.find(x => x.id === qrId)
|
||||||
|
if (!q) return
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/qr/configs/' + qrId, {
|
||||||
|
method: 'PUT', headers: {'Content-Type':'application/json'},
|
||||||
|
body: JSON.stringify({ name: q.name })
|
||||||
|
})
|
||||||
|
if (!res.ok) alert('保存名称失败')
|
||||||
|
} catch (e) { alert('保存失败: ' + e.message) }
|
||||||
|
},
|
||||||
|
async deleteQrConfig(qrId) {
|
||||||
|
if (!confirm('确定删除此二维码点位?')) return
|
||||||
|
try {
|
||||||
|
await fetch(API + '/api/qr/configs/' + qrId, { method: 'DELETE' })
|
||||||
|
this.qrConfigs = this.qrConfigs.filter(x => x.id !== qrId)
|
||||||
|
} catch (e) { alert('删除失败: ' + e.message) }
|
||||||
|
},
|
||||||
|
getQrModelName(modelId) {
|
||||||
|
const model = this.models.find(m => m.id === modelId)
|
||||||
|
return model ? model.name : ''
|
||||||
|
},
|
||||||
|
getModelName(modelId) {
|
||||||
|
const model = this.models.find(m => m.id === modelId)
|
||||||
|
return model ? model.name : ''
|
||||||
|
},
|
||||||
|
async scanQrEntry(qrId) {
|
||||||
|
this.qrScanningId = qrId
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/api/qr/scan/' + qrId, { method: 'POST' })
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.ok) {
|
||||||
|
await this.loadQrConfigs()
|
||||||
|
let msg = '扫描成功: ' + data.qr_value
|
||||||
|
if (data.model_name) msg += ' 匹配机型: ' + data.model_name
|
||||||
|
else msg += ' 未匹配到机型'
|
||||||
|
alert(msg)
|
||||||
|
} else { alert(data.error || '扫描失败') }
|
||||||
|
} catch (e) { alert('扫描失败: ' + e.message) }
|
||||||
|
this.qrScanningId = null
|
||||||
|
},
|
||||||
|
onArmPreviewError() {
|
||||||
|
// 机械臂摄像头预览失败,静默处理
|
||||||
|
},
|
||||||
async agvResetCollision() {
|
async agvResetCollision() {
|
||||||
if (!this.agvConnected) {
|
if (!this.agvConnected) {
|
||||||
alert('AGV 未连接')
|
alert('AGV 未连接')
|
||||||
@@ -648,293 +833,5 @@ createApp({
|
|||||||
alert('❌ 复位请求失败: ' + e.message)
|
alert('❌ 复位请求失败: ' + e.message)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async initPose() {
|
|
||||||
if (!this.agvConnected) { alert('AGV 未连接'); return }
|
|
||||||
if (!confirm('确定要将 AMCL 初始位置设为 (0,0,0) 吗?这会重置定位。')) return
|
|
||||||
this.initPoseLoading = true
|
|
||||||
this.initPoseMsg = ''
|
|
||||||
try {
|
|
||||||
const res = await fetch(API + '/api/mission/init_pose', { method: 'POST' })
|
|
||||||
const data = await res.json()
|
|
||||||
if (data.ok) {
|
|
||||||
this.initPoseMsg = '✅ ' + (data.message || '初始化成功')
|
|
||||||
} else {
|
|
||||||
this.initPoseMsg = '❌ ' + (data.error || '初始化失败')
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.initPoseMsg = '❌ 请求失败: ' + e.message
|
|
||||||
}
|
|
||||||
this.initPoseLoading = false
|
|
||||||
setTimeout(() => { this.initPoseMsg = '' }, 5000)
|
|
||||||
},
|
|
||||||
async initAmclPose() {
|
|
||||||
if (!this.agvConnected) { alert('AGV 未连接'); return }
|
|
||||||
if (!confirm('确定要将 AMCL 初始位置设为 (0,0,0) 吗?这会重置定位。')) return
|
|
||||||
this.initAmclPoseLoading = true
|
|
||||||
this.initAmclPoseMsg = ''
|
|
||||||
try {
|
|
||||||
const res = await fetch(API + '/api/mission/init_pose', { method: 'POST' })
|
|
||||||
const data = await res.json()
|
|
||||||
if (data.ok) {
|
|
||||||
this.initAmclPoseMsg = '✅ ' + (data.message || '初始化成功')
|
|
||||||
} else {
|
|
||||||
this.initAmclPoseMsg = '❌ ' + (data.error || '初始化失败')
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.initAmclPoseMsg = '❌ 请求失败: ' + e.message
|
|
||||||
}
|
|
||||||
this.initAmclPoseLoading = false
|
|
||||||
setTimeout(() => { this.initAmclPoseMsg = '' }, 5000)
|
|
||||||
},
|
|
||||||
|
|
||||||
getPointAt(pointRow, col) {
|
|
||||||
var positions = this.missionConfig.positions || []
|
|
||||||
// 在独立 positions 数组中查找 (pointRow, col)
|
|
||||||
for (var i = 0; i < positions.length; i++) {
|
|
||||||
var p = positions[i]
|
|
||||||
if (parseInt(p.row) === pointRow && parseInt(p.col) === col) {
|
|
||||||
// 优先找 shoot,其次找 front/back
|
|
||||||
if (p.side === 'shoot') return p
|
|
||||||
// 再看有没有同一(row,col)的shoot
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 再找同(row,col)的shoot类型
|
|
||||||
for (var i = 0; i < positions.length; i++) {
|
|
||||||
var p = positions[i]
|
|
||||||
if (parseInt(p.row) === pointRow && parseInt(p.col) === col && p.side === 'shoot') {
|
|
||||||
return p
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 兼容旧数据:尝试从机器对象的 front/back 获取
|
|
||||||
var machineAbove = this.getMachineAt(pointRow - 1, col) // 上面的机器
|
|
||||||
var machineBelow = this.getMachineAt(pointRow, col) // 下面的机器
|
|
||||||
if (pointRow === 0 && machineBelow) {
|
|
||||||
// 第一个点位行 → 下面机器的正面
|
|
||||||
return machineBelow.front || { coords: [0, 0, 0], poses: [] }
|
|
||||||
}
|
|
||||||
if (pointRow === this.missionConfig.rows && machineAbove) {
|
|
||||||
// 最后一个点位行 → 上面机器的背面
|
|
||||||
return machineAbove.back || { coords: [0, 0, 0], poses: [] }
|
|
||||||
}
|
|
||||||
// 中间点位行:优先返回上面机器的背面
|
|
||||||
if (machineAbove && machineAbove.back) {
|
|
||||||
return machineAbove.back
|
|
||||||
}
|
|
||||||
if (machineBelow && machineBelow.front) {
|
|
||||||
return machineBelow.front
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
|
|
||||||
// 点位归属标签
|
|
||||||
getPointOwnerLabel(pointRow, col) {
|
|
||||||
var rows = this.missionConfig.rows
|
|
||||||
var labels = []
|
|
||||||
if (pointRow === 0) {
|
|
||||||
var m = this.getMachineAt(0, col)
|
|
||||||
if (m) labels.push('机器' + (m.row + 1) + '正面')
|
|
||||||
} else if (pointRow === rows) {
|
|
||||||
var m2 = this.getMachineAt(rows - 1, col)
|
|
||||||
if (m2) labels.push('机器' + (m2.row + 1) + '背面')
|
|
||||||
} else {
|
|
||||||
var mAbove = this.getMachineAt(pointRow - 1, col)
|
|
||||||
var mBelow = this.getMachineAt(pointRow, col)
|
|
||||||
if (mAbove) labels.push('机器' + (mAbove.row + 1) + '背面')
|
|
||||||
if (mBelow) labels.push('机器' + (mBelow.row + 1) + '正面')
|
|
||||||
}
|
|
||||||
if (labels.length === 0) return '第' + (col + 1) + '列 · 无归属'
|
|
||||||
return '第' + (col + 1) + '列 · ' + labels.join('/')
|
|
||||||
},
|
|
||||||
|
|
||||||
canClearPoint(pointRow, col) {
|
|
||||||
var rows = this.missionConfig.rows
|
|
||||||
if (pointRow > 0 && pointRow <= rows) {
|
|
||||||
var mAbove = this.getMachineAt(pointRow - 1, col)
|
|
||||||
if (mAbove) return false
|
|
||||||
}
|
|
||||||
if (pointRow >= 0 && pointRow < rows) {
|
|
||||||
var mBelow = this.getMachineAt(pointRow, col)
|
|
||||||
if (mBelow) return false
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
|
|
||||||
openPointEdit(pointRow, col) {
|
|
||||||
var existing = this.getPointAt(pointRow, col)
|
|
||||||
if (existing && existing.coords) {
|
|
||||||
this.pointEditor.x = existing.coords[0] !== undefined ? existing.coords[0] : 0
|
|
||||||
this.pointEditor.y = existing.coords[1] !== undefined ? existing.coords[1] : 0
|
|
||||||
this.pointEditor.yaw = existing.coords[2] !== undefined ? existing.coords[2] : 0
|
|
||||||
} else {
|
|
||||||
this.pointEditor.x = 0
|
|
||||||
this.pointEditor.y = 0
|
|
||||||
this.pointEditor.yaw = 0
|
|
||||||
}
|
|
||||||
this.editingPoint = { pointRow: pointRow, col: col }
|
|
||||||
},
|
|
||||||
|
|
||||||
closePointEdit() {
|
|
||||||
this.editingPoint = null
|
|
||||||
},
|
|
||||||
|
|
||||||
async loadPointFromAgv() {
|
|
||||||
if (!this.agvConnected) { alert('请先连接AGV'); return }
|
|
||||||
try {
|
|
||||||
const res = await fetch(API + '/api/agv/position')
|
|
||||||
const pos = await res.json()
|
|
||||||
if (pos.ok && pos.position && Array.isArray(pos.position)) {
|
|
||||||
this.pointEditor.x = pos.position[0] ?? 0
|
|
||||||
this.pointEditor.y = pos.position[1] ?? 0
|
|
||||||
this.pointEditor.yaw = pos.position[2] ?? 0
|
|
||||||
alert('✅ 已读取AGV位置: (' + this.pointEditor.x.toFixed(2) + ', ' + this.pointEditor.y.toFixed(2) + ', ' + this.pointEditor.yaw.toFixed(2) + ')')
|
|
||||||
} else if (pos.ok && (!pos.position || !Array.isArray(pos.position))) {
|
|
||||||
alert('⚠️ AGV 未发布位置数据,请检查 AGV 传感器是否正常')
|
|
||||||
} else {
|
|
||||||
alert('读取AGV位置失败: ' + (pos.error || '未知错误'))
|
|
||||||
}
|
|
||||||
} catch (e) { alert('读取AGV位置失败: ' + e.message) }
|
|
||||||
},
|
|
||||||
|
|
||||||
async savePoint() {
|
|
||||||
if (!this.editingPoint) return
|
|
||||||
var pointRow = this.editingPoint.pointRow
|
|
||||||
var col = this.editingPoint.col
|
|
||||||
var coords = [this.pointEditor.x, this.pointEditor.y, this.pointEditor.yaw]
|
|
||||||
try {
|
|
||||||
var saveRes = await fetch(API + '/api/mission/positions', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({
|
|
||||||
row: pointRow, col: col, side: 'shoot', coords: coords, poses: []
|
|
||||||
})
|
|
||||||
})
|
|
||||||
var saveData = await saveRes.json()
|
|
||||||
if (!saveData.ok) { alert('保存点位失败: ' + (saveData.error || '未知错误')); return }
|
|
||||||
this.syncPointToMachines(pointRow, col, coords)
|
|
||||||
await this.loadMissionConfig()
|
|
||||||
alert('✅ 点位坐标已保存: (' + coords[0].toFixed(2) + ', ' + coords[1].toFixed(2) + ', ' + coords[2].toFixed(2) + ')')
|
|
||||||
this.closePointEdit()
|
|
||||||
} catch (e) { alert('保存点位失败: ' + e.message) }
|
|
||||||
},
|
|
||||||
|
|
||||||
syncPointToMachines(pointRow, col, coords) {
|
|
||||||
var rows = this.missionConfig.rows
|
|
||||||
if (pointRow === 0) {
|
|
||||||
var m0 = this.getMachineAt(0, col)
|
|
||||||
if (m0) this.updateMachineSide(m0, 'front', coords)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (pointRow === rows) {
|
|
||||||
var mLast = this.getMachineAt(rows - 1, col)
|
|
||||||
if (mLast) this.updateMachineSide(mLast, 'back', coords)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
var mAbove = this.getMachineAt(pointRow - 1, col)
|
|
||||||
var mBelow = this.getMachineAt(pointRow, col)
|
|
||||||
if (mAbove) this.updateMachineSide(mAbove, 'back', coords)
|
|
||||||
if (mBelow) this.updateMachineSide(mBelow, 'front', coords)
|
|
||||||
},
|
|
||||||
|
|
||||||
async updateMachineSide(machine, side, coords) {
|
|
||||||
try {
|
|
||||||
var update = {}
|
|
||||||
update[side] = { coords: coords, poses: (machine[side] && machine[side].poses) ? machine[side].poses : [] }
|
|
||||||
await fetch(API + '/api/mission/machines/' + machine.id, {
|
|
||||||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(update)
|
|
||||||
})
|
|
||||||
} catch (e) { console.error('同步机器坐标失败', e) }
|
|
||||||
},
|
|
||||||
|
|
||||||
async clearPoint() {
|
|
||||||
if (!this.editingPoint) return
|
|
||||||
var pointRow = this.editingPoint.pointRow
|
|
||||||
var col = this.editingPoint.col
|
|
||||||
if (!this.canClearPoint(pointRow, col)) {
|
|
||||||
var ownerLabel = this.getPointOwnerLabel(pointRow, col)
|
|
||||||
alert('⚠️ 无法清空!此点位服务于: ' + ownerLabel + '\n必须先移除相关机器才能清空此点位。')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!confirm('确定清空此点位坐标?')) return
|
|
||||||
try {
|
|
||||||
await fetch(API + '/api/mission/positions/' + pointRow + '/' + col, { method: 'DELETE' })
|
|
||||||
await this.loadMissionConfig()
|
|
||||||
alert('✅ 点位已清空')
|
|
||||||
this.closePointEdit()
|
|
||||||
} catch (e) { alert('清空点位失败: ' + e.message) }
|
|
||||||
},
|
|
||||||
|
|
||||||
async navigateToPoint() {
|
|
||||||
if (!this.editingPoint || !this.pointEditor) return
|
|
||||||
var coords = [this.pointEditor.x, this.pointEditor.y, this.pointEditor.yaw]
|
|
||||||
if (!confirm('确定导航到点位 (' + coords[0].toFixed(2) + ', ' + coords[1].toFixed(2) + ') 吗?')) return
|
|
||||||
try {
|
|
||||||
var res = await fetch(API + '/api/navigate/to', {
|
|
||||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ x: coords[0], y: coords[1], yaw: coords[2] })
|
|
||||||
})
|
|
||||||
var data = await res.json()
|
|
||||||
if (data.ok) {
|
|
||||||
alert('✅ 导航已启动')
|
|
||||||
} else {
|
|
||||||
alert('❌ ' + (data.error || '导航启动失败'))
|
|
||||||
}
|
|
||||||
} catch (e) { alert('导航请求失败: ' + e.message) }
|
|
||||||
},
|
|
||||||
|
|
||||||
async refreshPoseAngles(modelId, poseId) {
|
|
||||||
if (!this.armConnected) { alert('机械臂未连接'); return }
|
|
||||||
try {
|
|
||||||
var res = await fetch(API + '/api/arm/get_angles')
|
|
||||||
var data = await res.json()
|
|
||||||
if (data.ok && data.angles) {
|
|
||||||
var model = this.models.find(m => m.id === modelId)
|
|
||||||
if (model) {
|
|
||||||
var pose = model.poses.find(p => p.id === poseId)
|
|
||||||
if (pose) {
|
|
||||||
pose.arm_angles = [...data.angles]
|
|
||||||
await fetch(API + '/api/models/' + modelId + '/poses/' + poseId, {
|
|
||||||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ arm_angles: pose.arm_angles })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) { console.error('refreshPoseAngles error:', e) }
|
|
||||||
},
|
|
||||||
|
|
||||||
async applyPoseAngles(modelId, poseId) {
|
|
||||||
var model = this.models.find(m => m.id === modelId)
|
|
||||||
if (model) {
|
|
||||||
var pose = model.poses.find(p => p.id === poseId)
|
|
||||||
if (pose && pose.arm_angles) {
|
|
||||||
try {
|
|
||||||
await fetch(API + '/api/arm/set_angles', {
|
|
||||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ angles: pose.arm_angles, speed: 500 })
|
|
||||||
})
|
|
||||||
} catch (e) { console.error('applyPoseAngles error:', e) }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async adjustPoseAngle(modelId, poseId, jointIndex, delta) {
|
|
||||||
var model = this.models.find(m => m.id === modelId)
|
|
||||||
if (model) {
|
|
||||||
var pose = model.poses.find(p => p.id === poseId)
|
|
||||||
if (pose) {
|
|
||||||
if (!pose.arm_angles) pose.arm_angles = [0, 0, 0, 0, 0, 0]
|
|
||||||
pose.arm_angles[jointIndex] = (pose.arm_angles[jointIndex] || 0) + delta
|
|
||||||
await fetch(API + '/api/models/' + modelId + '/poses/' + poseId, {
|
|
||||||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ arm_angles: pose.arm_angles })
|
|
||||||
})
|
|
||||||
await fetch(API + '/api/arm/set_angle', {
|
|
||||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ joint: 'J' + (jointIndex + 1), angle: pose.arm_angles[jointIndex] })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
}).mount('#app')
|
}).mount('#app')
|
||||||
|
|||||||
+119
-13
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>设置 - AGV 拍摄系统</title>
|
<title>设置 - AGV 拍摄系统</title>
|
||||||
<link rel="stylesheet" href="/static/css/style.css?v=20260519a">
|
<link rel="stylesheet" href="/static/css/style.css?v=20260520g">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
@@ -21,6 +21,7 @@
|
|||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<button class="tab" :class="{active: tab === 'map'}" @click="tab = 'map'">🗺️ 地图</button>
|
<button class="tab" :class="{active: tab === 'map'}" @click="tab = 'map'">🗺️ 地图</button>
|
||||||
<button class="tab" :class="{active: tab === 'mission'}" @click="tab = 'mission'">🎯 任务配置</button>
|
<button class="tab" :class="{active: tab === 'mission'}" @click="tab = 'mission'">🎯 任务配置</button>
|
||||||
|
<button class="tab" :class="{active: tab === 'qr'}" @click="tab = 'qr'">📷 二维码配置</button>
|
||||||
<button class="tab" :class="{active: tab === 'model'}" @click="tab = 'model'">📦 机型配置</button>
|
<button class="tab" :class="{active: tab === 'model'}" @click="tab = 'model'">📦 机型配置</button>
|
||||||
<button class="tab" :class="{active: tab === 'arm'}" @click="tab = 'arm'">🤖 机械臂</button>
|
<button class="tab" :class="{active: tab === 'arm'}" @click="tab = 'arm'">🤖 机械臂</button>
|
||||||
<button class="tab" :class="{active: tab === 'agv'}" @click="tab = 'agv'">🚗 AGV控制</button>
|
<button class="tab" :class="{active: tab === 'agv'}" @click="tab = 'agv'">🚗 AGV控制</button>
|
||||||
@@ -75,6 +76,13 @@
|
|||||||
:style="{ left: getMapX(p.coords) + '%', top: getMapY(p.coords) + '%' }"
|
:style="{ left: getMapX(p.coords) + '%', top: getMapY(p.coords) + '%' }"
|
||||||
:title="p.coords ? p.coords.map(c => c.toFixed(2)).join(', ') : ''">
|
:title="p.coords ? p.coords.map(c => c.toFixed(2)).join(', ') : ''">
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 二维码位置点 -->
|
||||||
|
<div v-for="(m, mi) in missionConfig.machines" :key="'qrdot-'+mapVersion+'-'+mi"
|
||||||
|
v-if="machineHasQr(m)"
|
||||||
|
class="map-dot qr-dot"
|
||||||
|
:style="qrMarkerStyle(m)"
|
||||||
|
:title="qrMarkerTitle(m)">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -289,12 +297,16 @@
|
|||||||
<div class="grid-cell grid-header">机器行 {% raw %}{{ ri }}{% endraw %}</div>
|
<div class="grid-cell grid-header">机器行 {% raw %}{{ ri }}{% endraw %}</div>
|
||||||
<div v-for="(ci) in missionConfig.cols" :key="'m'+ri+'_'+ci"
|
<div v-for="(ci) in missionConfig.cols" :key="'m'+ri+'_'+ci"
|
||||||
class="grid-cell"
|
class="grid-cell"
|
||||||
:class="{ active: getMachineAt(ri-1, ci-1) }"
|
:class="{ active: selectedMachine && selectedMachine.row === ri-1 && selectedMachine.col === ci-1 }"
|
||||||
@click="onCellClick(ri-1, ci-1)">
|
@click="onCellClick(ri-1, ci-1)">
|
||||||
<template v-if="getMachineAt(ri-1, ci-1)">
|
<label class="machine-toggle" @click.stop>
|
||||||
<div class="cell-machine">✅</div>
|
<input type="checkbox"
|
||||||
</template>
|
:checked="getMachineAt(ri-1, ci-1) !== null"
|
||||||
<span v-else class="empty-cell">⬜</span>
|
@change="toggleMachine(ri-1, ci-1, $event)">
|
||||||
|
<span class="machine-status" :class="getMachineAt(ri-1, ci-1) ? 'on' : 'off'">
|
||||||
|
{% raw %}{{ getMachineAt(ri-1, ci-1) ? '有机器' : '无机器' }}{% endraw %}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 点位行 ri+1 (pointRow=ri): 上面机器的背面 / 下面机器的正面 -->
|
<!-- 点位行 ri+1 (pointRow=ri): 上面机器的背面 / 下面机器的正面 -->
|
||||||
@@ -311,12 +323,16 @@
|
|||||||
<div class="grid-cell grid-header">机器行 {% raw %}{{ missionConfig.rows }}{% endraw %}</div>
|
<div class="grid-cell grid-header">机器行 {% raw %}{{ missionConfig.rows }}{% endraw %}</div>
|
||||||
<div v-for="(ci) in missionConfig.cols" :key="'m'+missionConfig.rows+'_'+ci"
|
<div v-for="(ci) in missionConfig.cols" :key="'m'+missionConfig.rows+'_'+ci"
|
||||||
class="grid-cell"
|
class="grid-cell"
|
||||||
:class="{ active: getMachineAt(missionConfig.rows-1, ci-1) }"
|
:class="{ active: selectedMachine && selectedMachine.row === missionConfig.rows-1 && selectedMachine.col === ci-1 }"
|
||||||
@click="onCellClick(missionConfig.rows-1, ci-1)">
|
@click="onCellClick(missionConfig.rows-1, ci-1)">
|
||||||
<template v-if="getMachineAt(missionConfig.rows-1, ci-1)">
|
<label class="machine-toggle" @click.stop>
|
||||||
<div class="cell-machine">✅</div>
|
<input type="checkbox"
|
||||||
</template>
|
:checked="getMachineAt(missionConfig.rows-1, ci-1) !== null"
|
||||||
<span v-else class="empty-cell">⬜</span>
|
@change="toggleMachine(missionConfig.rows-1, ci-1, $event)">
|
||||||
|
<span class="machine-status" :class="getMachineAt(missionConfig.rows-1, ci-1) ? 'on' : 'off'">
|
||||||
|
{% raw %}{{ getMachineAt(missionConfig.rows-1, ci-1) ? '有机器' : '无机器' }}{% endraw %}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 最后一个点位行 (pointRow=rows): 所有机器的背面拍摄点 -->
|
<!-- 最后一个点位行 (pointRow=rows): 所有机器的背面拍摄点 -->
|
||||||
@@ -406,6 +422,39 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 二维码位置 -->
|
||||||
|
<div class="machine-form" style="margin-top:16px" v-if="hasQr">
|
||||||
|
<h3>🔍 二维码位置</h3>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>X 坐标</label>
|
||||||
|
<input type="number" step="0.01" :value="safeQrCoord(0)" @input="setQrCoord(0, Number($event.target.value))" placeholder="0.00">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Y 坐标</label>
|
||||||
|
<input type="number" step="0.01" :value="safeQrCoord(1)" @input="setQrCoord(1, Number($event.target.value))" placeholder="0.00">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Yaw (弧度)</label>
|
||||||
|
<input type="number" step="0.01" :value="safeQrCoord(2)" @input="setQrCoord(2, Number($event.target.value))" placeholder="0.00">
|
||||||
|
</div>
|
||||||
|
<div class="form-group" style="align-self:end">
|
||||||
|
<button class="btn btn-small btn-primary" @click="readQRPosition" :disabled="!agvConnected">📍 读取当前位置</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- QR 扫描结果 -->
|
||||||
|
<div v-if="hasQrValue" style="margin-top:8px;padding:8px;background:#0f1923;border-radius:6px">
|
||||||
|
<span style="font-size:13px">📱 二维码值: <strong>{% raw %}{{ safeQr('qr_value') }}{% endraw %}</strong></span>
|
||||||
|
<span v-if="hasQrModelId" style="margin-left:12px;font-size:13px">🏷️ 匹配机型: <strong>{% raw %}{{ safeQrModelName() }}{% endraw %}</strong></span>
|
||||||
|
<span v-else style="margin-left:12px;font-size:13px;color:#ff9800">⚠️ 未匹配到机型</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn-row" style="margin-top:8px">
|
||||||
|
<button class="btn btn-small btn-success" @click="scanQRCode(selectedMachine.id)" :disabled="!cameraOpened || qrScanning">
|
||||||
|
{% raw %}{{ qrScanning ? '扫描中...' : '📷 扫描二维码' }}{% endraw %}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="btn-row" style="margin-top:16px">
|
<div class="btn-row" style="margin-top:16px">
|
||||||
<button class="btn btn-danger" @click="deleteMachine(selectedMachine.id)">🗑️ 删除此机器</button>
|
<button class="btn btn-danger" @click="deleteMachine(selectedMachine.id)">🗑️ 删除此机器</button>
|
||||||
<button class="btn btn-secondary" @click="saveMachineCoords">💾 保存此机器配置</button>
|
<button class="btn btn-secondary" @click="saveMachineCoords">💾 保存此机器配置</button>
|
||||||
@@ -470,6 +519,63 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ========== 二维码配置 Tab ========== -->
|
||||||
|
<div v-if="tab === 'qr'">
|
||||||
|
<section class="card">
|
||||||
|
<h2>📷 二维码配置</h2>
|
||||||
|
<p style="color:#9aa0a6;font-size:13px;margin-bottom:16px">配置机械臂姿态(6个关节角度),通过机械臂摄像头识别二维码并匹配机型。</p>
|
||||||
|
<!-- 机械臂摄像头画面 -->
|
||||||
|
<div style="margin-bottom:16px">
|
||||||
|
<div class="camera-preview" style="max-width:640px">
|
||||||
|
<img :src="armCameraUrl" @error="onArmPreviewError" style="width:100%;border-radius:8px">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:flex-end;margin-bottom:16px">
|
||||||
|
<input type="text" v-model="newQrName" placeholder="输入名称..." style="background:#0f1923;border:1px solid #2a3441;color:#fff;padding:8px 12px;border-radius:6px;margin-right:8px;width:180px">
|
||||||
|
<button class="btn btn-primary" @click="addQrConfig()">➕ 添加</button>
|
||||||
|
</div>
|
||||||
|
<div v-if="qrConfigs.length === 0" style="text-align:center;color:#9aa0a6;padding:40px">
|
||||||
|
<p>暂无二维码配置,请点击上方按钮添加</p>
|
||||||
|
</div>
|
||||||
|
<table v-else style="width:100%;border-collapse:collapse;margin-bottom:16px">
|
||||||
|
<thead>
|
||||||
|
<tr style="background:#1a2332;text-align:left">
|
||||||
|
<th style="padding:10px 8px;border-bottom:1px solid #2a3441;color:#9aa0a6;font-size:12px">名称</th>
|
||||||
|
<th style="padding:10px 4px;border-bottom:1px solid #2a3441;color:#9aa0a6;font-size:12px">J1</th>
|
||||||
|
<th style="padding:10px 4px;border-bottom:1px solid #2a3441;color:#9aa0a6;font-size:12px">J2</th>
|
||||||
|
<th style="padding:10px 4px;border-bottom:1px solid #2a3441;color:#9aa0a6;font-size:12px">J3</th>
|
||||||
|
<th style="padding:10px 4px;border-bottom:1px solid #2a3441;color:#9aa0a6;font-size:12px">J4</th>
|
||||||
|
<th style="padding:10px 4px;border-bottom:1px solid #2a3441;color:#9aa0a6;font-size:12px">J5</th>
|
||||||
|
<th style="padding:10px 4px;border-bottom:1px solid #2a3441;color:#9aa0a6;font-size:12px">J6</th>
|
||||||
|
<th style="padding:10px 8px;border-bottom:1px solid #2a3441;color:#9aa0a6;font-size:12px">二维码值</th>
|
||||||
|
<th style="padding:10px 8px;border-bottom:1px solid #2a3441;color:#9aa0a6;font-size:12px">匹配机型</th>
|
||||||
|
<th style="padding:10px 8px;border-bottom:1px solid #2a3441;color:#9aa0a6;font-size:12px;text-align:center">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="q in qrConfigs" :key="q.id" style="border-bottom:1px solid #1a2332">
|
||||||
|
<td style="padding:10px 8px">
|
||||||
|
<input type="text" v-model="q.name" @change="saveQrConfig(q.id)"
|
||||||
|
style="background:transparent;border:1px solid transparent;color:#fff;padding:4px 6px;width:100px;font-size:13px"
|
||||||
|
@focus="$event.target.style.borderColor='#388e3c'" @blur="$event.target.style.borderColor='transparent'">
|
||||||
|
</td>
|
||||||
|
<td style="padding:10px 4px" v-for="ji in 6" :key="ji">
|
||||||
|
<input type="number" step="0.1" :value="getQrAngle(q, ji - 1)" @input="updateQrAngle(q.id, ji - 1, $event.target.value)" style="width:62px;padding:3px 4px;border:1px solid #2a3441;border-radius:4px;background:#0f1923;color:#fff;font-size:12px;text-align:center">
|
||||||
|
</td>
|
||||||
|
<td style="padding:10px 8px;color:#4fc3f7;font-size:12px;max-width:120px;overflow:hidden;text-overflow:ellipsis">{% raw %}{{ q.qr_value || '—' }}{% endraw %}</td>
|
||||||
|
<td style="padding:10px 8px;color:#9aa0a6;font-size:12px">{% raw %}{{ getQrModelName(q.model_id) }}{% endraw %}</td>
|
||||||
|
<td style="padding:10px 8px;text-align:center;white-space:nowrap">
|
||||||
|
<button class="btn btn-secondary btn-small" @click="readQrAngles(q.id)" :disabled="!armConnected" title="读取当前机械臂角度">📐</button>
|
||||||
|
<button class="btn btn-success btn-small" @click="scanQrEntry(q.id)" :disabled="qrScanningId === q.id" style="margin-left:3px" title="扫描二维码">📷</button>
|
||||||
|
<button class="btn btn-danger btn-small" @click="deleteQrConfig(q.id)" style="margin-left:3px" title="删除">🗑️</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 机械臂控制 (保持不变) -->
|
<!-- 机械臂控制 (保持不变) -->
|
||||||
<div v-if="tab === 'arm'">
|
<div v-if="tab === 'arm'">
|
||||||
<section class="card">
|
<section class="card">
|
||||||
@@ -569,7 +675,7 @@
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/static/js/vue3.global.prod.js?v=20260519a"></script>
|
<script src="/static/js/vue3.global.prod.js?v=20260520g"></script>
|
||||||
<script src="/static/js/setting.js?v=20260519a"></script>
|
<script src="/static/js/setting.js?v=20260520g"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user