实现文本标注和上传基础功能version1

autoremark-ui/src/views/index.vue

@@ -6,29 +6,10 @@
       </el-header>
 
       <el-main>
-<<<<<<< HEAD
         <!-- 标注文本和操作按钮 -->
         <el-row>
           <el-col :span="18">
             <h3 style="display: inline-block; margin-right: 20px;">标注文本</h3>
-=======
-        <!-- 文本展示区 -->
-        <el-card :body-style="{ padding: '10px' }" style="max-width: 600px;">
-          <!-- 使用 v-html 显示已标记的文本 -->
-          <div v-html="highlightedText" style="border: 1px solid #ddd; padding: 10px; white-space: pre-wrap;"></div>
-        </el-card>
-        <br>
-
-        <!-- 标签选择 -->
-        <el-row>
-          <el-col :span="6" :offset="1">
-            <el-select v-model="selectedLabel" placeholder="选择标签" style="width: 100%;">
-              <el-option label="实体类型A" value="实体类型A"></el-option>
-              <el-option label="实体类型B" value="实体类型B"></el-option>
-            </el-select>
-          </el-col>
-          <el-col :span="6" :offset="1">
->>>>>>> ad708d8df52c6bc36d3a7ac4246a01ebe7fcceea
             <el-button type="primary" @click="highlightText">高亮标注</el-button>
             <el-color-picker v-model="selectedColor" style="margin-left: 10px;"></el-color-picker>
             <input type="file" @change="handleFileUpload" accept=".txt" style="display: none;" ref="fileInput">
@@ -105,7 +86,6 @@ export default {
   name: 'AutoRemark',
   data() {
     return {
-<<<<<<< HEAD
       text: "这是一些需要标注的文本。用户可以选择文本并标记。",
       highlightedText: "这是一些需要标注的文本。用户可以选择文本并标记。",
       selectedLabel: "重要",
@@ -119,11 +99,6 @@ export default {
       tailEntityId: '', // 关系中的尾实体ID
       currentRelationType: '', // 当前选择的关系类型
       selectedColor: '#ffeb3b' // 默认高亮颜色
-=======
-      text: "本法系利用鲎试剂来检测或量化由革兰阴性菌产生的细菌内毒素，以判断供试品中细菌内毒素的限量是否符合规定的一种方法。",
-      highlightedText: "本法系利用鲎试剂来检测或量化由革兰阴性菌产生的细菌内毒素，以判断供试品中细菌内毒素的限量是否符合规定的一种方法。",
-      selectedLabel: "选择实体类型",
->>>>>>> ad708d8df52c6bc36d3a7ac4246a01ebe7fcceea
     };
   },
   methods: {
@@ -154,7 +129,6 @@ export default {
       }
     },
     highlightText() {
-<<<<<<< HEAD
       if (this.selectedText) {
         // 创建实体对象
         const entity = {
@@ -169,34 +143,6 @@ export default {
 
         // 高亮显示
         this.updateHighlightedText();
-=======
-      const selectedText = window.getSelection().toString();
-      if (selectedText) {
-        // 根据 selectedLabel 来设置不同的背景颜色
-        let highlightColor = '';
-        if (this.selectedLabel === "实体类型A") {
-          highlightColor = 'yellow'; // 实体类型A为黄色
-        } else if (this.selectedLabel === "实体类型B") {
-          highlightColor = 'lightblue'; // 实体类型B为浅蓝色
-        } else {
-          this.$message({
-            message: '请选择标签',
-            type: 'warning'
-          });
-          return;
-        }
-
-        // 使用 span 标签包裹选中的文本，并附加标签
-        const highlightedText = `<span style="background-color: ${highlightColor}; color: black;" title="${this.selectedLabel}">${selectedText}</span>`;
-
-        // 需要保持原来的文本结构，并把选中的文本替换成带有高亮的文本
-        // 不直接覆盖，而是替换所有选中的文本
-        this.highlightedText = this.highlightedText.replace(selectedText, (match) => {
-          return highlightedText;
-        });
-
-        console.log(this.highlightedText)
->>>>>>> ad708d8df52c6bc36d3a7ac4246a01ebe7fcceea
       } else {
         this.$message({
           message: '请先选择文本！',
@@ -271,7 +217,6 @@ export default {
 }
 </script>
 
-<<<<<<< HEAD
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -316,62 +261,3 @@ input[readonly] {
   margin-left: 10px;
 }
 </style>
-=======
-
-
-
-<!--绘制折线代码-->
-<!--<template>-->
-<!--  <div>-->
-<!--    <canvas ref="myCanvas" width="500" height="500"></canvas>-->
-<!--  </div>-->
-<!--</template>-->
-
-<!--<script>-->
-<!--export default {-->
-<!--  mounted() {-->
-<!--    // 获取 canvas 元素和上下文-->
-<!--    const canvas = this.$refs.myCanvas;-->
-<!--    const ctx = canvas.getContext('2d');-->
-
-<!--    // 定义折线的点-->
-<!--    const points = [-->
-<!--      { x: 50, y: 50 },-->
-<!--      { x: 150, y: 100 },-->
-<!--      { x: 250, y: 200 },-->
-<!--      { x: 350, y: 150 },-->
-<!--      { x: 450, y: 50 }-->
-<!--    ];-->
-
-<!--    // 绘制折线-->
-<!--    this.drawPolyline(ctx, points);-->
-<!--  },-->
-<!--  methods: {-->
-<!--    // 绘制折线的方法-->
-<!--    drawPolyline(ctx, points) {-->
-<!--      if (points.length < 2) return;-->
-
-<!--      ctx.beginPath();-->
-<!--      ctx.moveTo(points[0].x, points[0].y); // 起始点-->
-
-<!--      // 遍历折线的每一个点，连接成线段-->
-<!--      points.forEach(point => {-->
-<!--        ctx.lineTo(point.x, point.y);-->
-<!--      });-->
-
-<!--      ctx.strokeStyle = 'blue'; // 线条颜色-->
-<!--      ctx.lineWidth = 3; // 线条宽度-->
-<!--      ctx.stroke(); // 执行绘制-->
-<!--    }-->
-<!--  }-->
-<!--};-->
-<!--</script>-->
-
-<!--<style scoped>-->
-<!--canvas {-->
-<!--  border: 1px solid #ccc;-->
-<!--}-->
-<!--</style>-->
-
-
->>>>>>> ad708d8df52c6bc36d3a7ac4246a01ebe7fcceea