// ==UserScript==
// @name 2D车位线标注验收
// @namespace http://tampermonkey.net/
// @version 1.3
// @description 拦截标注数据验收,根据业务规则精准校验,支持点击高亮定位、窗口拖动与参数自定义
// @author CC
// @match http://113.207.49.80:8080/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 默认自定义配置参数
const CONFIG = {
lineMinWidth: 8, // 车位线最小宽度(像素)
lineMaxWidth: 12, // 车位线最大宽度(像素)
pointRectMaxDist: 100 // 角点距离车位框中心最大允许距离(像素)
};
// 保存最后一次拦截到的数据,方便修改配置后重新校验
let lastMarkData = null;
const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.open = function(method, url, ...args) {
this._hookData = { method, url };
return originalOpen.apply(this, [method, url, ...args]);
};
XMLHttpRequest.prototype.send = function(...args) {
if (this._hookData && this._hookData.url.includes('/api/task/get-mark-data')) {
this.addEventListener('load', function() {
if (this.status === 200) {
try {
const responseData = JSON.parse(this.responseText);
if (responseData.code === 0 && responseData.data && responseData.data.markData) {
lastMarkData = responseData.data.markData;
validateAndReport(lastMarkData);
}
} catch (e) {
console.error('[验收助手] 解析JSON失败:', e);
}
}
});
}
return originalSend.apply(this, args);
}
function validateAndReport(markData) {
const marks = markData.marks || [];
const errors = [];
// 1. 数据预处理与分组
const groups = {};
const pointList = [];
let mainIndex = 1;
marks.forEach((mark) => {
const gid = mark.groupId;
if (gid !== undefined) {
if (!groups[gid]) {
groups[gid] = { mainIndex: mainIndex++, points: [], rect: null };
}
if (mark.type === 'point') {
mark._mainIndex = groups[gid].mainIndex;
groups[gid].points.push(mark);
pointList.push(mark);
} else if (mark.type === 'rect' && mark.pselect === '车位') {
mark._mainIndex = groups[gid].mainIndex;
groups[gid].rect = mark;
}
} else {
mark._displayLabel = `#${mainIndex}`;
mark._mainIndex = mainIndex++;
}
});
// 为所有元素补充显示标签
for (const gid in groups) {
const group = groups[gid];
let pointIdx = 1;
group.points.forEach(p => {
p._displayLabel = `#${group.mainIndex}-${pointIdx++}`;
});
if (group.rect) {
group.rect._displayLabel = `#${group.mainIndex}-${pointIdx}`;
}
}
// 辅助函数:根据 points_label 查找角点
const findPoint = (points, label) => points.find(p => p.attrs && p.attrs.points_label && p.attrs.points_label[0] === label);
// 2. 执行业务规则校验
// 规则1:完整库位判定与反向校验
for (const gid in groups) {
const group = groups[gid];
const hasRect = !!group.rect;
const pointCount = group.points.length;
if (hasRect) {
const category = group.rect.attrs && group.rect.attrs.category && group.rect.attrs.category[0];
if (category === 'lots' && pointCount !== 4) {
errors.push({ type: '结构错误', label: `#${group.mainIndex}`, name: '车位组', markId: group.rect.markId, msg: `完整库位应含4个角点,实际包含 ${pointCount} 个` });
}
} else {
if (pointCount === 4) {
errors.push({ type: '结构错误', label: `#${group.mainIndex}`, name: '车位组', markId: group.points[0].markId, msg: '已有4个角点,但缺少车位整体框' });
}
}
}
// 规则2:车位线宽度校验
marks.forEach(mark => {
if (mark.type === 'rect' && mark.pselect === '车位线') {
const p = mark.point || {};
const w = Math.abs((p.right || 0) - (p.left || 0));
const h = Math.abs((p.bottom || 0) - (p.top || 0));
const minSide = Math.min(w, h);
if (minSide < CONFIG.lineMinWidth || minSide > CONFIG.lineMaxWidth) {
errors.push({ type: '属性错误', label: mark._displayLabel, name: '车位线', markId: mark.markId, msg: `车位线宽度应为${CONFIG.lineMinWidth}-${CONFIG.lineMaxWidth}px,当前为 ${minSide.toFixed(1)}px` });
}
}
});
// 规则3:车位整块框和p1、p2点的距离校验
for (const gid in groups) {
const group = groups[gid];
if (group.rect) {
const rectP = group.rect.point || {};
const rectCx = ((rectP.left || 0) + (rectP.right || 0)) / 2;
const rectCy = ((rectP.top || 0) + (rectP.bottom || 0)) / 2;
const p1 = findPoint(group.points, 'p1');
const p2 = findPoint(group.points, 'p2');
[p1, p2].forEach(p => {
if (p) {
const pt = p.point || {};
const dist = Math.sqrt(Math.pow(rectCx - parseFloat(pt.x || 0), 2) + Math.pow(rectCy - parseFloat(pt.y || 0), 2));
if (dist > CONFIG.pointRectMaxDist) {
errors.push({ type: '逻辑错误', label: p._displayLabel, name: '入口角点', markId: p.markId, msg: `入口点距离车位框中心过远 (${dist.toFixed(1)}px),阈值${CONFIG.pointRectMaxDist}px` });
}
}
});
}
}
// 规则4:入口点(p1或p2)不可见时,车位类别必须为不可辨别
for (const gid in groups) {
const group = groups[gid];
if (group.rect) {
const p1 = findPoint(group.points, 'p1');
const p2 = findPoint(group.points, 'p2');
const p1Vis = p1 && p1.attrs && p1.attrs.visibility && p1.attrs.visibility[0];
const p2Vis = p2 && p2.attrs && p2.attrs.visibility && p2.attrs.visibility[0];
if (p1Vis === 'invisible_p' || p2Vis === 'invisible_p') {
const lotsType = group.rect.attrs && group.rect.attrs.lots_type && group.rect.attrs.lots_type[0];
const isUnknown = lotsType && (lotsType === 'vertical_unknown' || lotsType === 'oblique_unknown' || lotsType === 'horizontal_unknown');
if (!isUnknown) {
errors.push({ type: '逻辑错误', label: `#${group.mainIndex}`, name: '车位框', markId: group.rect.markId, msg: `入口点(p1或p2)不可见时,车位类别必须为不可辨别,当前为 ${lotsType || '空'}` });
}
}
}
}
// 规则5:点的可见性与点类别对应关系
pointList.forEach(p => {
const pLabel = p.attrs && p.attrs.points_label && p.attrs.points_label[0];
const vis = p.attrs && p.attrs.visibility && p.attrs.visibility[0];
const pType = p.attrs && p.attrs.points_type && p.attrs.points_type[0];
if (vis === 'invisible_p' && pType !== 'others_p') {
errors.push({ type: '属性错误', label: p._displayLabel, name: `角点${pLabel}`, markId: p.markId, msg: `不可见时,点类别必须为其他(others_p),当前为 ${pType || '空'}` });
}
if (vis === 'visible_p' && pType === 'others_p') {
errors.push({ type: '属性错误', label: p._displayLabel, name: `角点${pLabel}`, markId: p.markId, msg: '可见时,点类别不能为其他(others_p)' });
}
});
// 规则6:地砖线颜色校验
marks.forEach(mark => {
if (mark.type === 'rect' && mark.pselect === '车位线') {
const category = mark.attrs && mark.attrs.category && mark.attrs.category[0];
const color = mark.attrs && mark.attrs.color && mark.attrs.color[0];
if (category === 'floortileline' && color !== 'qita') {
errors.push({ type: '属性错误', label: mark._displayLabel, name: '车位线', markId: mark.markId, msg: `地砖线颜色必须为其它(qita),当前为 ${color || '空'}` });
}
}
});
// 规则7:里侧点(p3或p4)可见提示
pointList.forEach(p => {
const pLabel = p.attrs && p.attrs.points_label && p.attrs.points_label[0];
const vis = p.attrs && p.attrs.visibility && p.attrs.visibility[0];
if ((pLabel === 'p3' || pLabel === 'p4') && vis === 'visible_p') {
errors.push({ type: '提示信息', label: p._displayLabel, name: `角点${pLabel}`, markId: p.markId, msg: `里侧点属性为可见,请确认是否正常` });
}
});
renderReport(errors);
}
function initPanel() {
if (document.getElementById('val-panel')) return;
const panel = document.createElement('div');
panel.id = 'val-panel';
panel.innerHTML = `
`;
document.body.appendChild(panel);
if (!document.getElementById('validate-css')) {
const style = document.createElement('style');
style.id = 'validate-css';
style.textContent = `
#val-panel { position: fixed; top: 10px; right: 10px; width: 480px; background: rgba(17, 24, 39, 0.95); color: #fff; border-radius: 8px; z-index: 99999; font-family: sans-serif; box-shadow: 0 4px 20px rgba(0,0,0,0.6); border: 1px solid #333; display: flex; flex-direction: column; max-height: 90vh; }
#val-header { padding: 12px 15px; background: #1f2937; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; cursor: move; user-select: none; }
#val-header h3 { margin: 0; font-size: 15px; color: #60a5fa; }
.val-btn { background: transparent; border: 1px solid #4b5563; color: #9ca3af; padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; margin-left: 5px; }
.val-btn:hover { background: #374151; color: #fff; }
#val-config { padding: 10px 15px; background: #111827; border-bottom: 1px solid #333; font-size: 12px; }
.config-item { display: flex; align-items: center; color: #9ca3af; margin-right: 10px; margin-bottom: 5px; }
.config-item input { width: 40px; background: #374151; border: 1px solid #4b5563; color: #fff; text-align: center; border-radius: 3px; margin: 0 4px; padding: 2px 0; }
.config-apply { background: #2563eb; border: none; color: #fff; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.config-apply:hover { background: #1d4ed8; }
#val-stats { display: flex; padding: 10px 15px; background: #111827; border-bottom: 1px solid #333; font-size: 12px; }
.stat-item { margin-right: 15px; color: #9ca3af; }
.stat-num { font-weight: bold; margin-right: 4px; }
.stat-struct .stat-num { color: #f87171; }
.stat-attr .stat-num { color: #fbbf24; }
.stat-logic .stat-num { color: #a78bfa; }
.stat-tip .stat-num { color: #22d3ee; }
#val-body { padding: 10px 15px; overflow-y: auto; max-height: 60vh; }
.err-item { padding: 8px; margin-bottom: 6px; background: #1f2937; border-radius: 4px; font-size: 12px; border-left: 3px solid #ef4444; cursor: pointer; transition: 0.2s; display: flex; align-items: center; }
.err-item:hover { background: #374151; }
.err-item.attr-err { border-left-color: #f59e0b; }
.err-item.logic-err { border-left-color: #8b5cf6; }
.err-item.tip-err { border-left-color: #22d3ee; }
.err-item.tip-hidden { display: none; }
.err-type { font-weight: bold; margin-right: 6px; flex-shrink: 0; }
.struct-err .err-type { color: #f87171; }
.attr-err .err-type { color: #fbbf24; }
.logic-err .err-type { color: #a78bfa; }
.tip-err .err-type { color: #22d3ee; }
.err-name { color: #60a5fa; margin-right: 6px; flex-shrink: 0; }
.err-label { color: #34d399; font-weight: bold; margin-right: 8px; background: rgba(52,211,153,0.1); padding: 1px 4px; border-radius: 2px; flex-shrink: 0; }
.err-msg { color: #d1d5db; }
.val-success { text-align: center; color: #34d399; padding: 30px 0; font-size: 16px; font-weight: bold; }
`;
document.head.appendChild(style);
}
// 绑定拖拽
const header = panel.querySelector('#val-header');
let isDragging = false;
let startX, startY, initialLeft, initialTop;
header.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('val-btn')) return;
isDragging = true;
startX = e.clientX;
startY = e.clientY;
const rect = panel.getBoundingClientRect();
initialLeft = rect.left;
initialTop = rect.top;
panel.style.transition = 'none';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
panel.style.left = `${initialLeft + dx}px`;
panel.style.top = `${initialTop + dy}px`;
panel.style.right = 'auto';
});
document.addEventListener('mouseup', () => {
isDragging = false;
panel.style.transition = '';
});
// 绑定按钮事件
panel.querySelector('#btn-fold').addEventListener('click', () => {
const body = document.getElementById('val-body');
body.style.display = body.style.display === 'none' ? 'block' : 'none';
});
panel.querySelector('#btn-close').addEventListener('click', () => {
panel.style.display = 'none';
});
panel.querySelector('#cfg-apply-btn').addEventListener('click', () => {
const minW = parseInt(document.getElementById('cfg-min').value);
const maxW = parseInt(document.getElementById('cfg-max').value);
const dist = parseInt(document.getElementById('cfg-dist').value);
if (!isNaN(minW)) CONFIG.lineMinWidth = minW;
if (!isNaN(maxW)) CONFIG.lineMaxWidth = maxW;
if (!isNaN(dist)) CONFIG.pointRectMaxDist = dist;
if (lastMarkData) {
validateAndReport(lastMarkData);
} else {
alert('暂无标注数据,请先切换图片加载');
}
});
// 收起/展开提示信息
panel.querySelector('#btn-hide-tips').addEventListener('click', function() {
const tipItems = document.querySelectorAll('.tip-err');
const isHidden = this.classList.toggle('tips-hidden');
tipItems.forEach(item => {
item.classList.toggle('tip-hidden', isHidden);
});
this.textContent = isHidden ? '展开提示信息' : '收起提示信息';
});
}
function renderReport(errors) {
initPanel();
const statsDiv = document.getElementById('val-stats');
const bodyDiv = document.getElementById('val-body');
const structCount = errors.filter(e => e.type === '结构错误').length;
const attrCount = errors.filter(e => e.type === '属性错误').length;
const logicCount = errors.filter(e => e.type === '逻辑错误').length;
const tipCount = errors.filter(e => e.type === '提示信息').length;
statsDiv.innerHTML = `
结构错误: ${structCount}
属性错误: ${attrCount}
逻辑错误: ${logicCount}
提示信息: ${tipCount}
`;
let bodyHtml = '';
if (errors.length === 0) {
bodyHtml = `✅ 验收通过,未发现异常!
`;
} else {
errors.forEach(err => {
const cls = err.type === '属性错误' ? 'attr-err' : (err.type === '逻辑错误' ? 'logic-err' : (err.type === '提示信息' ? 'tip-err' : 'struct-err'));
bodyHtml += `
[${err.type}]
${err.label}
${err.name}
${err.msg}
`;
});
}
bodyDiv.innerHTML = bodyHtml;
// 恢复提示信息的显示状态
const hideBtn = document.getElementById('btn-hide-tips');
if (hideBtn && hideBtn.classList.contains('tips-hidden')) {
document.querySelectorAll('.tip-err').forEach(item => item.classList.add('tip-hidden'));
}
bodyDiv.querySelectorAll('.err-item').forEach(item => {
item.addEventListener('click', () => {
const markId = item.getAttribute('data-markid');
locateInSidebar(markId);
});
});
document.getElementById('val-panel').style.display = 'flex';
}
function locateInSidebar(markId) {
if (!markId) return;
const targetItem = document.querySelector(`li[data-markid="${markId}"]`);
if (targetItem) {
targetItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
targetItem.style.transition = 'background 0.3s';
targetItem.style.background = 'rgba(239, 68, 68, 0.5)';
setTimeout(() => { targetItem.style.background = ''; }, 3000);
} else {
alert(`无法定位到侧栏项,请检查页面是否已加载完全。`);
}
}
})();