You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
8.5 KiB
JavaScript
281 lines
8.5 KiB
JavaScript
import { CubeRefractionMapping } from "./lib/three.module.js";
|
|
import { saveWorldList } from "./save.js";
|
|
import http from "./http.js";
|
|
|
|
var Header = function (
|
|
ui,
|
|
data,
|
|
cfg,
|
|
onSceneChanged,
|
|
onFrameChanged,
|
|
onObjectSelected,
|
|
onCameraChanged
|
|
) {
|
|
this.ui = ui;
|
|
this.data = data;
|
|
this.cfg = cfg;
|
|
this.boxUi = ui.querySelector("#box");
|
|
this.refObjUi = ui.querySelector("#ref-obj");
|
|
this.sceneSelectorUi = ui.querySelector("#scene-selector");
|
|
this.frameSelectorUi = ui.querySelector("#frame-selector");
|
|
this.objectSelectorUi = ui.querySelector("#object-selector");
|
|
this.cameraSelectorUi = ui.querySelector("#camera-selector");
|
|
this.changedMarkUi = ui.querySelector("#changed-mark");
|
|
|
|
this.onSceneChanged = onSceneChanged;
|
|
this.onFrameChanged = onFrameChanged;
|
|
this.onObjectSelected = onObjectSelected;
|
|
this.onCameraChanged = onCameraChanged;
|
|
|
|
if (cfg.disableSceneSelector) {
|
|
this.sceneSelectorUi.style.display = "none";
|
|
}
|
|
|
|
if (cfg.disableFrameSelector) {
|
|
this.frameSelectorUi.style.display = "none";
|
|
}
|
|
|
|
if (cfg.disableCameraSelector) {
|
|
this.cameraSelectorUi.style.display = "none";
|
|
}
|
|
|
|
// update scene selector ui
|
|
|
|
this.updateSceneList = function (sceneDescList) {
|
|
let scene_selector_str = "<option>场景</option>";
|
|
for (let scene in sceneDescList) {
|
|
if (data.sceneDescList[scene])
|
|
scene_selector_str += `<option value="${data.sceneDescList[scene]}">
|
|
${scene}
|
|
</option>`
|
|
else
|
|
scene_selector_str +=
|
|
"<option value=" + scene + ">" + scene + "</option>";
|
|
}
|
|
|
|
this.ui.querySelector("#scene-selector").innerHTML = scene_selector_str;
|
|
};
|
|
|
|
this.updateSceneList(this.data.sceneDescList);
|
|
|
|
this.ui.querySelector("#btn-reload-scene-list").onclick = (event) => {
|
|
let curentValue = this.sceneSelectorUi.value;
|
|
|
|
this.data.readSceneList().then((sceneDescList) => {
|
|
let obj = {}
|
|
if(sceneDescList.code === 200){
|
|
sceneDescList.data.forEach(item=>{
|
|
obj[item.sceneName] = item.sceneId
|
|
})
|
|
}
|
|
this.updateSceneList(obj);
|
|
this.sceneSelectorUi.value = curentValue;
|
|
});
|
|
};
|
|
|
|
this.sceneSelectorUi.onchange = (e) => {
|
|
this.onSceneChanged(e);
|
|
};
|
|
this.objectSelectorUi.onchange = (e) => {
|
|
this.onObjectSelected(e);
|
|
};
|
|
this.frameSelectorUi.onchange = (e) => {
|
|
this.onFrameChanged(e);
|
|
};
|
|
this.cameraSelectorUi.onchange = (e) => {
|
|
this.onCameraChanged(e);
|
|
};
|
|
|
|
this.setObject = function (id) {
|
|
this.objectSelectorUi.value = id;
|
|
};
|
|
|
|
this.clear_box_info = function () {
|
|
this.boxUi.innerHTML = "";
|
|
};
|
|
|
|
(this.update_box_info = function (box) {
|
|
var scale = box.scale;
|
|
var pos = box.position;
|
|
var rotation = box.rotation;
|
|
var points_number = box.world.lidar.get_box_points_number(box);
|
|
let distance = Math.sqrt(pos.x * pos.x + pos.y * pos.y).toFixed(2);
|
|
|
|
this.boxUi.innerHTML =
|
|
"<span>" +
|
|
box.obj_type +
|
|
"-" +
|
|
box.obj_track_id +
|
|
(box.annotator
|
|
? "</span> | <span title='annotator'>" + box.annotator
|
|
: "") +
|
|
"</span> | <span title='distance'>" +
|
|
distance +
|
|
"</span> | <span title='position'>" +
|
|
pos.x.toFixed(2) +
|
|
" " +
|
|
pos.y.toFixed(2) +
|
|
" " +
|
|
pos.z.toFixed(2) +
|
|
"</span> | <span title='scale'>" +
|
|
scale.x.toFixed(2) +
|
|
" " +
|
|
scale.y.toFixed(2) +
|
|
" " +
|
|
scale.z.toFixed(2) +
|
|
"</span> | <span title='rotation'>" +
|
|
((rotation.x * 180) / Math.PI).toFixed(2) +
|
|
" " +
|
|
((rotation.y * 180) / Math.PI).toFixed(2) +
|
|
" " +
|
|
((rotation.z * 180) / Math.PI).toFixed(2) +
|
|
"</span> | <span title = 'points'>" +
|
|
points_number +
|
|
"</span> ";
|
|
if (box.follows) {
|
|
this.boxUi.innerHTML += "| F:" + box.follows.obj_track_id;
|
|
}
|
|
}),
|
|
(this.set_ref_obj = function (marked_object) {
|
|
this.refObjUi.innerHTML =
|
|
"| Ref: " +
|
|
marked_object.scene +
|
|
"/" +
|
|
marked_object.frame +
|
|
": " +
|
|
marked_object.ann.obj_type +
|
|
"-" +
|
|
marked_object.ann.obj_id;
|
|
}),
|
|
(this.set_frame_info = function (scene, frame, on_scene_changed) {
|
|
if (this.sceneSelectorUi.value != scene) {
|
|
this.sceneSelectorUi.value = scene;
|
|
on_scene_changed(scene);
|
|
}
|
|
|
|
this.frameSelectorUi.value = frame;
|
|
}),
|
|
(this.clear_frame_info = function (scene, frame) {}),
|
|
(this.updateModifiedStatus = function () {
|
|
let frames = this.data.worldList.filter((w) => w.annotation.modified);
|
|
if (frames.length > 0) {
|
|
this.ui.querySelector("#changed-mark").className =
|
|
"ui-button alarm-mark";
|
|
} else {
|
|
this.ui.querySelector("#changed-mark").className = "ui-button";
|
|
}
|
|
});
|
|
|
|
this.ui.querySelector("#changed-mark").onmouseenter = () => {
|
|
let items = "";
|
|
let frames = this.data.worldList
|
|
.filter((w) => w.annotation.modified)
|
|
.map((w) => w.frameInfo);
|
|
frames.forEach((f) => {
|
|
items += "<div class='modified-world-item'>" + f.frame + "</div>";
|
|
});
|
|
|
|
if (frames.length > 0) {
|
|
this.ui.querySelector("#changed-world-list").innerHTML = items;
|
|
this.ui.querySelector("#changed-world-list-wrapper").style.display =
|
|
"inherit";
|
|
}
|
|
};
|
|
|
|
this.ui.querySelector("#changed-mark").onmouseleave = () => {
|
|
this.ui.querySelector("#changed-world-list-wrapper").style.display = "none";
|
|
};
|
|
|
|
this.ui.querySelector("#save-button").onclick = () => {
|
|
saveWorldList(this.data.worldList);
|
|
};
|
|
this.ui.querySelector("#save-submit").onclick = () => {
|
|
let confirm = window.confirm("请确保每个结构都已保存，确认提交？")
|
|
const microData = window.microApp.getData()
|
|
if(confirm){
|
|
// 自动保存一次再提交
|
|
const saveButton = document.getElementById('save-button');
|
|
if (saveButton) {
|
|
saveButton.click();
|
|
}
|
|
let timeOut = setTimeout(() => {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onreadystatechange = function(){
|
|
if (this.status == 200){
|
|
console.log('提交成功')
|
|
saveButton.style.display = 'none'
|
|
document.getElementById('save-submit').style.display = 'none'
|
|
// window.microApp.dispatch({ type: 'pointCloudBack', time: new Date() })
|
|
}
|
|
}
|
|
xhr.open(
|
|
"POST",
|
|
`${http.requestHttp}/project/label`,
|
|
true
|
|
);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.setRequestHeader('authorization', http.token);
|
|
xhr.send(JSON.stringify({
|
|
id:microData.dataId,
|
|
type:1,
|
|
label:'',
|
|
taskId:microData.taskId,
|
|
}));
|
|
clearTimeout(timeOut);
|
|
}, 1000);
|
|
}
|
|
};
|
|
// 通过
|
|
this.ui.querySelector("#save-pass").onclick = () => {
|
|
qc(1)
|
|
};
|
|
// 打回弹窗
|
|
this.ui.querySelector("#save-reject").onclick = () => {
|
|
document.getElementById('popup').style.display = "block";
|
|
};
|
|
this.ui.addEventListener('click', (event) => {
|
|
const target = event.target;
|
|
// 处理确认打回按钮
|
|
if (target.id === 'save-reject-btn') {
|
|
const resonTextarea = this.ui.querySelector('#reson');
|
|
const resonValue = resonTextarea.value;
|
|
if(!resonValue || resonValue === ''){
|
|
alert('请填写打回理由');
|
|
}else{
|
|
qc(0);
|
|
}
|
|
}
|
|
|
|
// 处理取消打回按钮
|
|
if (target.id === 'cancel-reject-btn') {
|
|
const popup = this.ui.querySelector('#popup');
|
|
if (popup) popup.style.display = "none";
|
|
}
|
|
})
|
|
function qc(type){
|
|
const microData = window.microApp.getData()
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onreadystatechange = function(){
|
|
if (this.status == 200){
|
|
// window.microApp.dispatch({ type: 'pointCloudBack', time: new Date() })
|
|
document.getElementById('save-pass').style.display = 'none'
|
|
document.getElementById('save-reject').style.display = 'none'
|
|
document.getElementById('popup').style.display = "none";
|
|
}
|
|
}
|
|
xhr.open(
|
|
"POST",
|
|
`${http.requestHttp}/project/qc?id=${microData.dataId}&type=${type}&taskId=${microData.taskId}${type === 0 ? `&remark=${document.getElementById('reson').value}` : ''}`,
|
|
true
|
|
);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.setRequestHeader('authorization', http.token);
|
|
xhr.send();
|
|
}
|
|
this.ui.querySelector("#back").onclick = () => {
|
|
window.microApp.dispatch({ type: 'pointCloudBack', time: new Date() })
|
|
};
|
|
};
|
|
|
|
export { Header };
|