提交代码
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