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

autoremark-ui/src/views/index.vue

@@ -6,10 +6,29 @@
       </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">
@@ -86,6 +105,7 @@ export default {
   name: 'AutoRemark',
   data() {
     return {
+<<<<<<< HEAD
       text: "这是一些需要标注的文本。用户可以选择文本并标记。",
       highlightedText: "这是一些需要标注的文本。用户可以选择文本并标记。",
       selectedLabel: "重要",
@@ -99,6 +119,11 @@ export default {
       tailEntityId: '', // 关系中的尾实体ID
       currentRelationType: '', // 当前选择的关系类型
       selectedColor: '#ffeb3b' // 默认高亮颜色
+=======
+      text: "本法系利用鲎试剂来检测或量化由革兰阴性菌产生的细菌内毒素，以判断供试品中细菌内毒素的限量是否符合规定的一种方法。",
+      highlightedText: "本法系利用鲎试剂来检测或量化由革兰阴性菌产生的细菌内毒素，以判断供试品中细菌内毒素的限量是否符合规定的一种方法。",
+      selectedLabel: "选择实体类型",
+>>>>>>> ad708d8df52c6bc36d3a7ac4246a01ebe7fcceea
     };
   },
   methods: {
@@ -129,6 +154,7 @@ export default {
       }
     },
     highlightText() {
+<<<<<<< HEAD
       if (this.selectedText) {
         // 创建实体对象
         const entity = {
@@ -143,6 +169,34 @@ 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: '请先选择文本！',
@@ -217,6 +271,7 @@ export default {
 }
 </script>
 
+<<<<<<< HEAD
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -261,3 +316,62 @@ 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