标注实现思路

标注系统核心思路将文本遍历替换为标签包裹的文本（list），根据鼠标划过动作获取划词信息（包括：内容，位置信息等）标注结束将文本内容与标注的label序列化储存在标签包裹的数组中，完成与后台数据传输

本工程采用技术栈为 uni-app 和 uView

文本转换


/**

 \* 文本转化为 数组文本

 \* @param  {String} str 原始文本

 */

export function getContent(str) {

    let arr = [];

    for (var i = 0; i < str.length; i++) {

        arr.push(str.charAt(i));

    }

    return arr;

}

划词替换

根据划词信息，获取位置和文本对含有标签得数组对应位置进行替换

/**

    \* 划词后 文本转化

    \* @param  {Array} arr 划词后数组

    \* @param  {Object} obj 划词

    \* @param  {number} model 划词模式 默认为 1

    */

   export function getMarkContent(arr, obj, dom, model) {

       let content = '';

       if (model === 0) {

           content = `${obj.text}$_#_$${dom.labelText}$_#_$${dom.id}$_#_$${createUUID()}`;

       } else {

           content = `${obj.text}$_#_$${dom.getAttribute('text')}$_#_$${dom.id}$_#_$${createUUID()}`;

       }

       arr.splice(obj.startIndex, obj.endIndex - obj.startIndex + 1, content)

       return arr;

   }

   /**

    \* 划词后 删除实体

    \* @param  {Array} initArr 划词后数组

    */

   export function getDeleteContent(initArr, index, text) {

       let changeArr = getContent(text);

       initArr.splice(index - 0, 1, changeArr[0]);

       for (var i = changeArr.length - 1; i > 0; i--) {

           initArr.splice(index - 0 + 1, 0, changeArr[i]);

       }

       return initArr;

   }

输出划词信息与后台交互

1
2
3


{"id":"5e6767591676285644360517","initTxtArr":["分","泌","过","多","性","青","光","眼","(","h","y","p","e","r","s","e","c","r","e","t","i","o","n"," ","g","l","a","u","c","o","m","a",")","是","一种罕见的$_#_$2$_#_$1$_#_$2ec253be37cd4aab9a8471d4bf9bb243","特","殊","类","型","的","开","角","型","青","光","眼","，","其","特","点","是","眼","压","升","高","，","但","房","水","流","畅","系","数","正","常","\r","\n","泛","发","性","毛","囊","错","构","瘤","(","g","e","n","e","r","a","l","i","z","e","d"," ","f","o","l","l","i","c","u","l","a","r"," ","h","a","m","a","r","t","o","m","a","s",")","为","单","个","或","多","发","性","皮","肤","色","丘","疹","和","浸","润","性","斑","块","，","伴","发","进","行","性","毛","发","脱","落","、","重","症","肌","无","力","和","(","或",")","循","环","中","自","身","抗","体","(","抗","核","抗","体","和","乙","酰","胆","碱","受","体","抗","体",")","\r","\n","深","脓","疱","病","(","e","c","t","h","y","m","a",")","又","名","臁","疮","，","是","由","溶","血","性","链","球","菌","感","染","所","致","的","一","种","深","在","性","脓","疱","疮","，","基","本","损","害","为","脓","疱","及","被","粘","着","性","痂","所","覆","盖","的","溃","疡","，","主","要","侵","犯","小","腿","\r","\n","病","毒","性","肠","炎","(","v","i","r","a","l","g","a","s","t","r","o","e","n","t","e","r","i","t","i","s",")","又","称","病","毒","性","腹","泻","，","是","一","组","由","多","种","病","毒","引","起","的","急","性","肠","道","传","染","病","。","临","床","特","点","为","起","病","急","、","恶","心","、","呕","吐","、","腹","痛","、","腹","泻","，","排","水","样","便","或","稀","便","，","也","可","有","发","热","及","全","身","不","适","等","症","状","，","病","程","短","，","病","死","率","低","。","各","种","病","毒","所","致","胃","肠","炎","的","临","床","表","现","基","本","类","似","。","与","急","性","胃","肠","炎","有","关","的","病","毒","种","类","较","多","，","其","中","较","为","重","要","的","、","研","究","较","多","的","是","轮","状","病","毒","和","诺","沃","克","类","病","毒","。","此","外","，","嵌","杯","样","病","毒","、","肠","腺","病","毒","、","星","状","病","毒","、","柯","萨","奇","病","毒","、","冠","状","病","毒","等","亦","可","引","起","胃","肠","炎","。","本","病","无","特","效","疗","法","，","以","对","症","治","疗","为","主","。","暂","停","乳","类","及","双","糖","类","食","物","。","吐","泻","较","重","时","用","止","吐","剂","及","镇","静","剂","。","口","服","或","静","脉","补","液","以","纠","正","和","电","解","质","紊","乱","。"],"initTxt":"分泌过多性青光眼(hypersecretion glaucoma)是一种罕见的特殊类型的开角型青光眼，其特点是眼压升高，但房水流畅系数正常\r\n泛发性毛囊错构瘤(generalized follicular hamartomas)为单个或多发性皮肤色丘疹和浸润性斑块，伴发进行性毛发脱落、重症肌无力和(或)循环中自身抗体(抗核抗体和乙酰胆碱受体抗体)\r\n深脓疱病(ecthyma)又名臁疮，是由溶血性链球菌感染所致的一种深在性脓疱疮，基本损害为脓疱及被粘着性痂所覆盖的溃疡，主要侵犯小腿\r\n病毒性肠炎(viralgastroenteritis)又称病毒性腹泻，是一组由多种病毒引起的急性肠道传染病。临床特点为起病急、恶心、呕吐、腹痛、腹泻，排水样便或稀便，也可有发热及全身不适等症状，病程短，病死率低。各种病毒所致胃肠炎的临床表现基本类似。与急性胃肠炎有关的病毒种类较多，其中较为重要的、研究较多的是轮状病毒和诺沃克类病毒。此外，嵌杯样病毒、肠腺病毒、星状病毒、柯萨奇病毒、冠状病毒等亦可引起胃肠炎。本病无特效疗法，以对症治疗为主。暂停乳类及双糖类食物。吐泻较重时用止吐剂及镇静剂。口服或静脉补液以纠正和电解质紊乱。","dataSetId":6,"relationArr":[]}