提交代码
This commit is contained in:
jiang
parent
1d27a8f44b
commit
fc3462d20a
|
|
@ -1,169 +0,0 @@
|
||||||
<template>
|
|
||||||
<div style="height:calc( 100vh - 130px);display: flex;flex-direction: row;align-items: stretch;">
|
|
||||||
<div class="left-panel">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="center-panel">
|
|
||||||
<div id="label-studio-container" class="label-studio-wrapper">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import LabelStudio from "label-studio";
|
|
||||||
import "label-studio/build/static/css/main.css";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "LabelStudioWrapper",
|
|
||||||
props: {
|
|
||||||
taskData: {
|
|
||||||
type: Object,
|
|
||||||
required: true, // 任务数据（如图片 URL）
|
|
||||||
},
|
|
||||||
config: {
|
|
||||||
type: String,
|
|
||||||
required: true, // 配置模板
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
labelStudioInstance: null,
|
|
||||||
scale: 1, // 图片缩放比例
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initializeLabelStudio();
|
|
||||||
this.setupImageZoom(); // 设置图片缩放
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initializeLabelStudio() {
|
|
||||||
this.labelStudioInstance = new LabelStudio("label-studio-container", {
|
|
||||||
config: this.config, // 使用传入的配置
|
|
||||||
task: this.taskData, // 使用传入的任务数据
|
|
||||||
customButtons: [
|
|
||||||
{
|
|
||||||
text: "保存标注",
|
|
||||||
onClick: this.handleSaveClick, // 按钮点击事件的处理函数
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "清空标注",
|
|
||||||
onClick: this.handleClearClick,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
onLabelStudioLoad: (LS) => {
|
|
||||||
const annotation = LS.annotationStore.addAnnotation({
|
|
||||||
userGenerate: true,
|
|
||||||
});
|
|
||||||
LS.annotationStore.selectAnnotation(annotation.id);
|
|
||||||
},
|
|
||||||
onSubmitAnnotation: (annotationData) => {
|
|
||||||
this.handleAnnotationSubmit(annotationData);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleAnnotationSubmit(annotationData) {
|
|
||||||
// 处理用户提交的标注数据
|
|
||||||
console.log("标注结果：", annotationData);
|
|
||||||
},
|
|
||||||
// 保存标注按钮点击事件
|
|
||||||
handleSaveClick() {
|
|
||||||
const annotationData = this.labelStudioInstance.annotationStore.serializeAnnotations();
|
|
||||||
console.log("保存标注数据：", annotationData);
|
|
||||||
this.sendAnnotationToServer(annotationData);
|
|
||||||
},
|
|
||||||
// 清空标注按钮点击事件
|
|
||||||
handleClearClick() {
|
|
||||||
console.log("清空标注");
|
|
||||||
this.labelStudioInstance.annotationStore.clearAnnotations();
|
|
||||||
},
|
|
||||||
sendAnnotationToServer(annotationData) {
|
|
||||||
// 示例：发送 POST 请求将标注数据发送到后端
|
|
||||||
this.$http.post("/api/save-annotation", annotationData)
|
|
||||||
.then(response => {
|
|
||||||
console.log("标注数据已保存", response.data);
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error("保存标注数据失败", error);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 设置图片缩放功能
|
|
||||||
setupImageZoom() {
|
|
||||||
const image = document.getElementById("image");
|
|
||||||
const imageContainer = document.getElementById("image-container");
|
|
||||||
|
|
||||||
imageContainer.addEventListener("wheel", (event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
if (event.deltaY > 0) {
|
|
||||||
this.scale = Math.max(0.5, this.scale - 0.1); // 缩小
|
|
||||||
} else {
|
|
||||||
this.scale = Math.min(3, this.scale + 0.1); // 放大
|
|
||||||
}
|
|
||||||
image.style.transform = `scale(${this.scale})`; // 设置缩放比例
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (this.labelStudioInstance && this.labelStudioInstance.destroy) {
|
|
||||||
this.labelStudioInstance.destroy();
|
|
||||||
this.labelStudioInstance = null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.left-panel{
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
.center-panel{
|
|
||||||
width: 70%;
|
|
||||||
}
|
|
||||||
.label-studio-wrapper,.ls-editor{
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
/* 自定义按钮样式 */
|
|
||||||
.save-button {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
padding: 10px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clear-button {
|
|
||||||
background-color: #f44336;
|
|
||||||
color: white;
|
|
||||||
padding: 10px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-button:hover,
|
|
||||||
.clear-button:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 图片容器 */
|
|
||||||
.image-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 80vh; /* 设置容器的高度，可以根据需要调整 */
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#image {
|
|
||||||
transition: transform 0.25s ease; /* 缩放时平滑过渡 */
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue