文本

DAPlatform-front/src/components/textAnnotation/SelectText.vue

@@ -7,7 +7,7 @@
             <!--            <div @mouseup="highlight()">-->
             <ul class="list">
               <li v-for="it in msg" :key="it.message">
-                <div class="msg" v-html="it">{{it}}</div>
+                <div class="msg" v-html="it"></div>
                 <br />
               </li>
             </ul>
@@ -24,23 +24,25 @@
                   v-for="item in options"
                   :key="item.value"
                   :label="item.label"
-                  :value="item.value"
+                  :value="item.label"
                 ></el-option>
               </el-select>
-              <el-button type="primary">新建</el-button>
+              <el-button type="primary" @click="handleOption">新建</el-button>
               <div style="margin-top: 10px;margin-bottom: 10px">
-                <span>基本信息：名称：可爱的滑坡；经度：null；纬度：null；</span>
+                <!--span>基本信息：名称：可爱的滑坡；经度：null；纬度：null；</span-->
               </div>
               <el-tree
-                :data="data"
-                :props="defaultProps"
-                accordion
-                @node-click="handleNodeClick"
+                :data="treedata"
                 show-checkbox
+                default-expand-all
+                node-key="id"
+                ref="tree"
+                highlight-current
+                :props="defaultProps"
               ></el-tree>
             </div>
             <div style="width: 100%;height: 5px"></div>
-            <el-button type="primary" style="margin-top: 30px" @click="closeAddTag">确定</el-button>
+            <el-button type="primary" style="margin-top: 30px" @click="handleCheckChange">确定</el-button>
           </el-dialog>
           <!--            弹窗-->
         </div>
@@ -58,7 +60,7 @@ export default {
       address: "那是我心中最美的“第三极”——第二次青藏科考青年说"
     };
     return {
-      data: [
+      treedata: [
         {
           label: "一级 1",
           children: [
@@ -122,7 +124,7 @@ export default {
       count: 1,
       tableData: Array(20).fill(item),
       msg: [
-        '那是我心中最美的“第三极”——第二次青藏科考青年说<br/> \
+        "那是我心中最美的“第三极”——第二次青藏科考青年说<br/> \
        2020-05-06 11:08 来源：新华网 编辑：矿材网<br/> \
       “看到国家自主研发的‘极目一号’浮空器从纳木错科考站升起，她宛若白鲸，越升越高，融入了星海。古老的‘第三极’与前沿的科技，在星空中融为一体，那就是我心中最美的‘第三极’风情。”中国科学院空天信息创新研究院的屈维说。<br/> \
        2019年5月23日，中国科学院空天信息创新研究院研制的“极目一号”浮空器在第二次青藏高原综合科学考察研究中，在纳木错升空达到海拔7003米的高度，创造了迄今已知同类型、同量级浮空器驻空高度的世界纪录。<br/> \
@@ -137,7 +139,7 @@ export default {
         躺在草地上观看云团变幻出各种造型;科考间隙引逗草原上东张西望的鼠兔或旱獭;科考途中和赶着牛群、羊群的牧民依靠手势交流,致以微笑……这些是科考队员在科考途中不多的乐趣。<br/> \
         作为第二次青藏科考的参与人员,王向涛多次深入藏北地区考察。“有时候,我随手拍的风景照发到朋友圈,会引来朋友的羡慕。或许这是很多人眼里的‘诗和远方’,但对于我们来说,这一次次‘旅程’不是‘游山玩水’,而是科研工作者的负重前行。”王向涛感慨说。<br/> \
         2019年以来,第二次青藏高原综合科学考察研究队在西藏共采集大气、水文、土壤等环境要素样品1.2万余份,采集动植物、微生物样本4.4万余份,收集经济社会发展资料超2200套,在“亚洲水塔”变化与影响及应对等方面取得突破。<br/> \
-        “我们在西藏进行科学考察,必须了解当地群众生产、生活需求和意愿,为保护好这里的一草一木尽一份绵薄之力。肆虐的风雪阻挡不住前进的路,选择了科考,选择了拥抱这片广袤的土地,就是青春的荣耀。”王向涛说。',
+        “我们在西藏进行科学考察,必须了解当地群众生产、生活需求和意愿,为保护好这里的一草一木尽一份绵薄之力。肆虐的风雪阻挡不住前进的路,选择了科考,选择了拥抱这片广袤的土地,就是青春的荣耀。”王向涛说。"
       ],
       ifAlert: false,
       options: [
@@ -162,60 +164,101 @@ export default {
           label: "5.最后一个滑坡"
         }
       ],
-      value: ""
+      value: "",
+      search: ""
     };
   },
   methods: {
-    handleCheckChange(data, checked, indeterminate) {
-      console.log(data, checked, indeterminate);
-    },
-    handleNodeClick(data) {
-      console.log(data);
-    },
-    toTextUndo: function() {
-      this.$router.push("/");
-    },
-    toTextEnd: function() {
-      this.$router.push("/");
-    },
-    toTextOther: function() {
-      this.$router.push("/");
+    
+    handleOption() {
+      console.log(this.value);
+      if (this.value) {
+        this.$message({
+          message: "创建成功！",
+          type: "success"
+        });
+      }
     },
-    closeAddTag() {
+    handleCheckChange() {
+      console.log(this.$refs.tree.getCheckedNodes());
       this.ifAlert = 0;
-    },
-    highlight() {
-      this.ifAlert = true;
-      var search;
-      if (window.getSelection) {
-        search = window.getSelection().toString();
-      }else {
-        search = document.selection.createRange().search;
-      }
+      let res = this.$refs.tree.getCheckedNodes();
+      let arr = [];
+      res.forEach(item => {
+        arr.push(item.label);
+      });
+      console.log("111" + arr);
       this.msg = this.msg.map(item => {
-        let replaceReg = new RegExp(search, "g"); // 匹配关键字正则
+        let replaceReg = new RegExp(this.search, "g"); // 匹配关键字正则
         let replaceString =
-          '<span class="highlights-text">' + search + '</span>'; // 高亮替换v-html值
+          '<span class="highlights-text">' +
+          this.search +
+          "</span>" +
+          '<span class="mark">' +
+          //'<el-tag size="mini" closable>' +
+          "(实体：" +
+          this.value +
+          "；属性：" +
+          arr +
+          ")" +
+          //"</el-tag>" +
+          "</span>"; // 高亮替换v-html值
+
         return item.replace(replaceReg, replaceString);
       });
-      if(search){
-        this.$message({
-          message: '保存成功！',
-          type: 'success'
+      // ？
+      this.$nextTick(() => {
+        this.$refs.tree.setCheckedKeys([]);
+        })
+      this.value = "";
+      this.$message({
+        message: "保存成功！",
+        type: "success"
+      });
+    },
+    setCheckedNodes() {
+      this.$refs.tree.setCheckedNodes([
+        {
+          id: 5,
+          label: "二级 2-1"
+        },
+        {
+          id: 9,
+          label: "三级 1-1-1"
+        }
+      ]);
+    },
+    highlight() {
+      if (window.getSelection().toString() != "") {
+        //console.log("1111"+window.getSelection().toString());
+        this.ifAlert = true;
+        //var search;
+        this.search = window.getSelection().toString();
+        this.msg = this.msg.map(item => {
+          let replaceReg = new RegExp(this.search, "g"); // 匹配关键字正则
+          let replaceString =
+            '<span class="highlights-text">' + this.search + "</span>"; // 高亮替换v-html值
+          return item.replace(replaceReg, replaceString);
         });
+        if (search) {
+          this.$message({
+            message: "保存成功！",
+            type: "success"
+          });
+        }
       }
     },
     save() {
       this.$message({
-          message: '保存成功！',
-          type: 'success'
-        });
+        message: "保存成功！",
+        type: "success"
+      });
     },
     submit() {
       this.$message({
-          message: '保存成功！',
-          type: 'success'
-        });
+        message: "保存成功！",
+        type: "success"
+      });
       this.$router.replace("/completed");
     }
   }
@@ -236,12 +279,19 @@ export default {
 }
 .msg {
   text-align: left;
-  font-size: 18px;
+  font-size: 20px;
   line-height: 30px;
 }
 .highlights-text {
-  //color: #ff5134;
-  background-color: rgb(255,255,0);
+  color: #ff5134;
+  text-decoration: underline;
+  //background-color: rgb(255, 255, 0);
+}
+.mark {
+  font-size: 14px;
+  color: rgb(128, 138, 135);
+  text-decoration: none;
+  //background-color: rgb(255, 227, 132);
 }
 .addTag {
   width: 30%;