在html中实现word中打批注的功能

随着企业数字化的发展，各行各业都需要不断积攒行业数据，数据的来源有很多，但是一般这些数据都需要通过人机耦合的方式进行数据准确性的确认。为了实现模型跑出来的结果可以准确的显示在页面中，正确的结果又可以反哺给模型，所以在前端做了很多尝试。

我们实现的有3种:1是把内容转成图片，利用ocr识别，前端svg绘制坐标。2通过把图片/文本加上编号，缺陷是结构要足够简单，复杂排版不满足。3是把文档解析成html，对html进行打标签。这里只讲第三种，也的最近刚写的demo，有兴趣的可以拷贝到自己的项目中试试

运行环境：
node 14.20.0
vite2+vuejs3+elementPlus

效果：

代码：

<template>
  <div class="tools">
      <el-checkbox v-model="isCrossRange" @change="changeRangeStatus">是否允许跨选区</el-checkbox>
      <el-checkbox v-if="isCrossRange" v-model="isCrossNode">允许跨节点（需要先开启跨选区）</el-checkbox>
      <el-checkbox v-model="autoLink">相邻选区自动合并（需要关闭允许跨节点）</el-checkbox>
      <el-checkbox v-model="showResult">显示结果</el-checkbox>
      <el-checkbox v-model="openDialogVisible">开启弹窗确认</el-checkbox>
      <div style="float:right; margin-right: 10px;">
        <el-color-picker v-model="color">颜色</el-color-picker>
      </div>
  </div>
  <div id="myContent" v-html="res" @mouseup="getSelect" style="text-align:left"></div>
  <div class="result" v-show="showResult">
    <h3>标注结果:</h3>
    <div v-for="(item, index) in rangesList" @click="addFoucsRange(item.uuid)" :key="item.num" class="res">
      <div>{
   {
   index}}：</div>
      <div>{
   {
   JSON.stringify(item)}}</div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="划词提示"
    width="30%"
  >
    <span>默认添加标签为：“实体”</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="ok"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {
    onMounted, ref, nextTick } from 'vue'
import {
    marked } from 'marked';
import {
    parseDocument } from 'htmlparser2';
import {
    v4 as uuid } from 'uuid';

export default {
   
  name: 'MarkHtml',
  setup () {
   
    onMounted(() => {
   
      sortRange();
      updateView();
    })
    function changeRangeStatus (value) {
   
      if (!value) {
   
        isCrossNode.value = false;
      }
    }

    let dialogVisible = ref(false);
    let openDialogVisible = ref(false);
    let color = ref('#EE146B');

    let showResult = ref(false);
    let rangesList = ref();
    let isCrossNode = ref(false); // 是否允许跨dom节点，如果允许，isCrossRange自动开启
    let isCrossRange = ref(true); // 是否允许跨选区范围
    let autoLink = ref(false); // 相邻的两个range是否自动链接成一个
    let num = 0; // 自然序号，或使用range的长度
    let sequenceNumber = ref(false); // 是否启用自然序号，如果是跨range选择，当前没啥用，只是为了标识range的序号，如果启用了不同的range,num不会重复,但是跨节点时仍会重复
    let selection = null; // 缓存下selection，方便全局获取
    let ranges = [{
   
      uuid: '121211', // 选区的id标识，在跨节点选择时会重复
      indexs: '4', // 选区所在的dom树索引位置
      start: 27, // 开始位置
      end: 33, // 结束位置
      text: '煤工作面设备', //选区文本
      parentText: '煤矿行业内设备种类繁多，且井下工作环境复杂多变，尤其采煤工作面设备关键、无相关备机且检维修复杂。在运维和检修过程中经常会遇到故障处理不了或者员工操作不当导致事故的发生，不仅严重危害井下员工的人身安全还会对设备造成损害从而影响正常生产。目前煤矿面临历史案例或经验难以总结、发现、检索、共享、学习，运维极度依赖于专家经验，人才传承和人才培养成本高，缺乏专家经验的传承，多领域专家协同作业困难等问题的挑战。因此迫切需要开展采煤工作面检维修知识图谱的研究，探索通过知识图谱技术进行检维修技术的沉淀、共享、标准化，让所有的 "经验"都通过图谱沉淀、所有的 "数据"都通过图谱处理、所有 的"决策"都通过图谱生成，从而降低员工的劳动强度、降低职业危害、提高工作效率、提升企业智能化建设水平。', // 选区所在节点文本
      extend: {
    // 当前字段为扩展字段，
        content: '', // 这里可以存业务信息
        id: '',
        style: {
   
          background:color.value
        }, // 样式信息
        label: '实体' // 标签
      },
      num: 1 // 每个选区生成的编号，在跨节点选择时会重复
    }
    ,{
   
      uuid: '121212',
      indexs: "4",
      start: 34,
      end: 37,
      text: "键、无",
      parentText: '煤矿行业内设备种类繁多，且井下工作环境复杂多变，尤其采煤工作面设备关键、无相关备机且检维修复杂。在运维和检修过程中经常会遇到故障处理不了或者员工操作不当导致事故的发生，不仅严重危害井下员工的人身安全还会对设备造成损害从而影响正常生产。目前煤矿面临历史案例或经验难以总结、发现、检索、共享、学习，运维极度依赖于专家经验，人才传承和人才培养成本高，缺乏专家经验的传承，多领域专家协同作业困难等问题的挑战。因此迫切需要开展采煤工作面检维修知识图谱的研究，探索通过知识图谱技术进行检维修技术的沉淀、共享、标准化，让所有的 "经验"都通过图谱沉淀、所有的 "数据"都通过图谱处理、所有 的"决策"都通过图谱生成，从而降低员工的劳动强度、降低职业危害、提高工作效率、提升企业智能化建设水平。',
      extend: {
   
        content: '', // 这里可以存业务信息
        id: '',
        style: {
   
          background:color.value
        }, // 样式信息
        label: '实体' // 标签
      },
      num: 2
    }
    ]; // 平铺的ranges，在不允许跨节点选择时，可以直接使用
    let rangesObject = {
   }; // 这里存的是按照节点索引分组后的 ranges，开启跨节点的时候，不用ranges，用rangesObject

    let res = ref();
    const mdContent = `国家能源集团科技创新项目招标技术文件格式和要求

# 项目名称：采煤工作面检维修知识图谱 {#项目名称采煤工作面检维修知识图谱 .list-paragraph}

**招标文件第五部分------技术部分**

1.  **概述**

煤矿行业内设备种类繁多，且井下工作环境复杂多变，尤其采煤工作面设备关键、无相关备机且检维修复杂。在运维和检修过程中经常会遇到故障处理不了或者员工操作不当导致事故的发生，不仅严重危害井下员工的人身安全还会对设备造成损害从而影响正常生产。目前煤矿面临历史案例或经验难以总结、发现、检索、共享、学习，运维极度依赖于专家经验，人才传承和人才培养成本高，缺乏专家经验的传承，多领域专家协同作业困难等问题的挑战。因此迫切需要开展采煤工作面检维修知识图谱的研究，探索通过知识图谱技术进行检维修技术的沉淀、共享、标准化，让所有
的 "经验"都通过图谱沉淀、所有的 "数据"都通过图谱处理、所有 的
"决策"都通过图谱生成，从而降低员工的劳动强度、降低职业危害、提高工作效率、提升企业智能化建设水平。

2.  **研究内容**

> （1）知识图谱内容展示

知识图谱中囊括的文字和视频资料进行详细的分类标签管理。当员工发起求助时通过人工智能分析自动筛选罗列出员工需要的指导资料。知识图谱中的学习资料支持员工手机在线学习。

> （2）矿井检修专家维护

挑选矿井单位的技术人员为专家级检修工，将检修专家的信息获取完整录入系统，包括姓名、年龄、单位、队伍、职务、工种、所学专业、擅长领域、相关荣誉等信息，将检修专家的信息进行详细分类，方便针对员工遇到的问题系统智能的推荐最合适的检修专家。

> （3）员工发起咨询功能

系统手机端APP页面支持多维度查询，包括按单位、设备、故障类型、常见故障处理文档、专家推荐等内容。

系统搭载科大讯飞的人工语音智能，可以通过首页按钮或者语音唤起人工语音智能进行语音交流，交流沟通后通过智能分析罗列显示出员工需要的指导资料。如列出的资料没有帮助到员工，系统则会自动联系该领域的检修专家进行视频通话。

> （4）员工与检修专家沟通交流功能

根据不同的检修类型选择连线不同的专家进行视频通话，假如专家的视频通话没有接通，挂断后自动推送专家的手机号。同时员工可以随时对检修专家进行留言咨询，检修专家收到通知后进行回复。

3.  **技术要求与性能指标**

1.  研究目标

通过人工智能技术协助国家能源集团更高效的完成各项运维检修工作，建立矿井设备跨专业跨领域知识图谱，提高设备运维检修效率，形成企业知识资产，最终实现以下价值：

（1）构建煤矿行业检修场景知识图谱，加快业务场景知识沉淀、应用：针对煤矿行业，实现矿井检修应用场景的知识图谱构建，为业务人员提供知识查询、智能推荐等知识服务，为智能应用开发提供知识支撑。

（2）搭建煤矿行业矿井检修知识图谱管理与应用服务平台：实现知识图谱的本体、实体、关系、属性的CRUD管理及可视化管理，实现基于知识图谱的智能化应用开发，支持知识建模、关系抽取、语义搜索、智能检索和推送、自学习、自决策等功能

（3）打造矿井检修应用场景数个知识服务，提供知识查询功能服务，支持员工通过智能查询，快速获得员工需要的指导资料；提供智能推荐功能，根据检修专家知识图谱和相关故障知识图谱，在员工遇到问题求助时，系统智能推荐最合适的检修专家和历史解决方案；提供员工检修助手功能服务，基于科大讯飞的语音技术，支持良好的语音交互，员工可向助手进行交流，助手根据知识图谱智能回答包括但不限于按单位、设备、故障类型、常见故障处理文档、专家推荐等内容提速企业知识沉淀，实现企业知识管理、知识应用与价值提升。

2.  主要技术指标

2.1信息录入功能

> ①支持OCR文字识别录入。支持对纸质文档的OCR识别功能，将纸质文档的内容转换成电子文档。
>
> ②支持语音识别录入。支持将不限时长的音频流实时识别为文字，包含实时音频与录音文件，支持毫秒级音频流识别，返回带有时间戳的文字流，将音频转换为电子文档。
>
> ③支持文本录入。将PDF、XML等不同数据格式的电子文档录入上传。
>
> 2.2知识协作平台功能
>
> ①知识图谱构建过程中需要提供多人知识协作功能，支持按本体分发、支持在线标注文档材料等功能；
>
> ②基于任务链方式，协同团队完成设备说明书、维修手册等知识转化。
>
> 2.3知识图谱构建功能
>
> 提供知识图谱构建平台，平台具备多场景知识图谱构建及可视化能力，包含图谱概况查看、设备类型管理、专家信息管理、实体管理、答案资料更新等功能模块。平台支持知识图谱复制、融合、高级搜索，提升知识图谱构建效率，支持图谱数据的自动备份，确保数据的稳定性与可恢复性，支持实体构建历史记录，且支持对异常数据进行还原与恢复。提供知识图谱构建方案。
>
> ①知识获取能力
>
> 支持结构化知识获取；支持支持结构化数据的实体抽取、关系抽取、属性抽取等；支持结构化数据抽取规则定义，如：映射规则等。
>
> 支持半结构化知识获取；支持半结构化数据的实体抽取、关系抽取、属性抽取等。
>
> 支持非结构化知识获取；支持文档类数据自动转化结构化知识；对设备说明书等非结构化数据，提供实体关系标注、模型训练发布功能，通过专家和模型相互协作，实现自动抽取非结构化数据将其转化为结构化数据的功能；支持非结构化数据的实体抽取、关系抽取、属性抽取等；支持非结构化数据抽取规则定义，如：机器学习训练评估等
>
> ②知识表示能力
>
> 支持图形化的呈现形式，确定实体、关系、属性在图谱中的呈现形式；支持基于浏览器的数据呈现方式；支持三元组等形式。
>
> ③知识存储能力
>
> 知识存储功能要求具备图遍历功能；支持多种属性数据类型，如：数值型、字符串型等常用数据类型等；支持通过图形化界面的形式展示和实现用户的交互；支持基本查询（如点、边的详情查询）、添加、删除、修改等操作；支持数据批量导出功能、增量更新（包括属性的增、删、改）、增量导出等功能。
>
> ④知识建模能力
>
> 知识建模功能支持本体模型中概念、属性的定义；支持本体模型约束条件的定义，如：上下位、继承、定义域、值域等逻辑条件等；支持手工本体建模；支持本体模型可视化；支持手工修改已有概念、关系、属性等功能；支持Schema的导入导出功能。
>
> ⑤知识计算能力
>
> 图特征统计支持统计节点度数，如：入度、出度等并支持统计聚类系数分布，用于衡量的节点聚集的趋势；路径计算支持给出起始节点和目标节点的知识图谱路径集合。
>
> ⑥知识融合能力
>
> 知识融合功能支持实例级（实例和属性值）的对齐；支持原始抽取数据的实体消歧、属性消歧；支持概念（实体类型）对齐、属性名对齐、关系对齐融合。
>
> ⑦工作流
>
> 支持提供以任务流的形式将图谱的构建过程进行可视化实现，即将图谱构建的每一步操作如数据导入、数据清洗、模型训练、信息抽取等配置成任务流的工作节点。内置数据导入、数据清洗、实体抽取、非结构化文本转换等通用节点，同时支持用户自定义节点能力，同时工作流支持以自底向上的方式完成知识图谱的构建。
>
> 2.4智能问答功能
>
> 提供基于知识图谱的问答平台并私有化部署，集成语义理解模型，提供支持机器人配置，平台体验与调试，效果调优等功能，支持知识库更新实时客户端上线。
>
> ①支持语音提问。通过语义理解的一系列的A.I.算法，将文本解析为结构化的、机器可读的意图与词槽信息，便于更好的理解用户问题。
>
> ②回答结果支持返回文本、富文本、图谱等多种形式。
>
> ③回答结果支持返回语音。通过语音合成方式，将任意文字信息转化为标准流畅的语音朗读出来，支持多方言、多语种，支持配置语调、语速等音频参数。
>
> ③支持 KBQA、时序、路径、图探索、会话式 BI 统计、多轮会话等技能。
>
> ④具备故障推理功能。支持自动识别问题，推断可能的故障。应使用图谱语义理解算法对检维修人员提出的问题进行推理，抽取相应的设备说明书，历史维修文档等形成解决办法，协助运维人员解决问题。
>
> ⑤具备图谱数据闭环功能。能够实现运维人员历史的问答数据统一回流至平台，对无法识别的问答数据批量标注归档至图谱或问答库，同时作为模型训练数据不断优化模型，实现数据闭环的应用效果。
>
> ⑥具备QA问答对自动挖掘功能。
>
> 支持基于MRC和QG技术的文档问答挖掘，实现对文档内容进行分析理解，并自动抽取可能的文档问答对，支持通过人工方式实现进行QA标注确认。挖掘覆盖度至少达到50%，问答抽取Top5准确率大于70%，问题生成合理率至少60%。
>
> ⑦支持知识库对接。提供知识库管理平台，支持QA对话批量导入导出，复用已有QA库，机器人QA对配置等功能，知识录入支持对文字、图片、视频等富文本形式。支持通过问答，查找到用户需要的知识库中的指导资料。
>
> ⑧具备统计报表功能。支持将各用户的搜索、提问、查询情况以及知识图谱回复、被采纳情况等信息制作成报表展示，以发现常见问题、归纳合理解决方案。
>
> 2.5视频通话功能
>
> 支持视频通话功能，支持视频、语音实时传输。
>
> ①支持手机、PC端进行视频通话；
>
> ②支持视频720p以上分辨率；
>
> ③支持两种及以上视频编解码格式，支持两种及以上音频编解码格式；
>
> ④软件操作界面友好；
>
> 2.6其他功能
>
> ①安全性功能
>
> 具备支撑关键知识图谱业务的信息技术服务应建立了有效的应急机制（如：预防机制、预警机制、反应机制、控制机制和恢复机制等）；应对知识图谱中个人信息和隐私数据识别和制定保护策略。
>
> ②可靠性
>
> 具备访问权限设置的功能；具备典型故障记录的功能，并在软件说明书中并具有给出相应解决方案，如异常掉电、连接异常等；具备关键数据备份的功能
>
> ③可移植性
>
> 支持常见的接口调用，如：http、RPC等；支持数据的导入和导出。
>
> ④易用性
>
> 支持本体模型添加实体类型、关系类型、属性名的功能等；具有图分析人机交互界面；具有知识管理人机交互界面；支持图谱数据以时间、空间或拓扑等维度进行实体或概念间关系展示；支持通过可视化界面在线导入、导出、删除数据；提供配套的用户手册、需求规格说明书等；具备顶层schema的导入、导出、融合等功能技术要求。

3.  主要设备参数要求

> 3.1多层关系查询（各层响应时间要求如下）
>
> ①一层关系查询：
>
> 查询结果数小于1万时，响应时间不超过5秒；查询结果数大于1万，小于10万时，响应时间不超过10秒；查询结果数大于10万，小于50万时，响应时间不超过50秒。
>
> ②二层关系查询：
>
> 查询结果数小于1万时，响应时间不超过10秒；查询结果数大于1万，小于10万时，响应时间不超过20秒；查询结果数大于10万，小于50万时，响应时间不超过100秒。
>
> ③三层关系查询：
>
> 查询结果数小于1万时，响应时间不超过15秒；查询结果数大于1万，小于10万时，响应时间不超过30秒；查询结果数大于10万，小于50万时，响应时间不超过200秒。

3.2多跳查询

> 要求支持不少于5跳的查询

3.3可靠性

> 系统业务功能可用性 ≥60%
>
> 3.4响应性
>
> 系统启动时间 ≤10分钟（10万知识图谱体量）
>
> 并发特性 ≤1秒
>
> QPS（每秒查询率） ≥10（10万知识图谱体量）
>
> 单次请求响应时间 ≤0.5秒（10万知识图谱体量）
>
> 响应稳定性 ≥80%
>
> 3.5可移植性
>
> 安装时间/效率 ≤24小时
>
> 安装成功率 ≥60%
>
> 3.6知识获取能力
>
> 结构化数据知识获取准确率 ≥80%
>
> 结构化数据知识获取F1值 ≥0.85
>
> 半结构化数据知识获取准确率 ≥60%
>
> 半结构化数据知识获取F1值 ≥0.65
>
> 非结构化数据知识获取准确率 ≥50%
>
> 非结构化数据知识获取F1值 ≥0.55
>
> 3.7知识表示能力
>
> 可视化结果反馈时间 ≤3s
>
> 最大呈现节点数量级 ≥50个节点
>
> 3.8知识存储能力
>
> 数据加载时间 ≤30秒/千条
>
> K跳邻居查询响应时间 ≤1分钟
>
> K跳邻居查询支持的最大并发数 ≥20
>
> 毫秒级数据查询能力 ≥60%
>
> 图谱数据存储时间 ≤3分钟/千条
>
> 3.9语音能力
>
> 支持转写角色分离
>
> 中文识别准确率≥97%
>
> 语音识别支持至少28种方言
>
> 中英文合成自然度≥4.5分
>
> 通用语义理解正确率≥95%

4.  **完成时间**

项目完成实施的时间为签订合同后12个月内完成。软件开发完成后，中标单位10个工作日内指派专人负责到矿安装、调试事宜，直到具备验收条件。

5.  **技术方案及说明**

1.  关键技术：

知识图谱技术，主要包括知识抽取、知识表示、知识存储、知识建模、知识融合、知识问答等方面，通过面向结构化、半结构化和非结构化数据构建知识图谱为采煤面三机运维场景的应用提供支持。

2.  创新点：

通过知识图谱智能问答等形式，解决采煤面三机工人知识学习、专家询问、运维维修、故障推理、历史方案调用等场景问题。

3.  项目实施方案：

(1) 实施范围

维修中心、神东下属煤矿采煤队。

(2) 具体实施方案

部署一套知识图谱构建平台，进行采煤面三机知识图谱搭建；开发基于知识图谱的问答、推理等应用方便用户在需求场景使用，并且搭载智能语音、视频通话等功能。

4.  经济效益分析：

使用知识图谱进行知识固化、传承，既保证知识的有效留存和一致性，又能利用基于知识图谱的智能问答快速闭环问题，提高运维作业效率，同时构建专家知识图谱，有效管理专家信息，一线人员高效查找专家并通过视频通话连接。

6.  **知识产权归属**

本项目形成的专利、技术秘密等知识产权归神东煤炭集团和研发厂家共同所有，项目研究人员发表论文、著作必须得到神东煤炭集团的许可。

7.  **验收方式及验收标准**

1.  采煤工作面检维修知识图谱1套，专利1项、研究报告，用户使用手册6册/套（包括电子版）。

2.  通过现场实施评价和专家评审会进行项目验收。

3.  货物需求明细表

---------- -------------------------- ---------- ---------- ------------------
  **序号**   **名称**                   **单位**   **数量**   **备注**

​                                                              

  软件部分                                                    

  1.1        知识抽取引擎               套         1          

  1.2        知识融合引擎               套         1          

  1.3        要素抽取引擎               套         1          

  1.4        关系抽取引擎               套         1          

  1.5        知识训练引擎               套         1          

  1.6        KBQA问答引擎               套         1          

  1.7        语音识别引擎               套         1          

  1.8        语义理解引擎               套         1          

  1.9        语音合成引擎               套         1          

  1.10       底层数据库引擎             套         1          

  1.11       管理平台                   套         1          

  服务部分                                                    

  2.1        私有化部署服务             套         1          

  2.2        AI算法开发服务             套         1          

  2.3        AI算法优化服务             套         1          

  2.4        非结构数据导入服务         套         1          

  硬件部分                                                    

  3.1        知识图谱服务器             套         1          知识图谱引擎部署

  3.2        云服务器                   套         1          语音引擎部署

  3.3        云锁服务器                 套         1          私有化部署授权
---------- -------------------------- ---------- ---------- ------------------

![temp](D:\vite-vue\temp.png)

4.  其他说明

投标商提供的技术偏离表中的技术参数必须与所提供的技术支持资料参数一致。

(1) 为了确保符合招标人的使用要求和现场情况，投标人报名投标前充分了解招标方现场使用环境，确保提供产品满足现场使用要求，如有异议以书面形式提出，招标人负责最终解释。

(2) 招标人提供安装场所、线缆敷设条件并负责安装，投标人负责指导安装和调试，项目所需的辅材、人工、食宿等费用由投标人承担。

(3) 安装完成后，由投标方负责免费提供培训，包括理论培训和实操培训，培训效果达到矿方要求。
`;
    res.value = marked.parse(mdContent); // 从markdown格式转换成html    

    // 用户划选操作开始事件
    function getSelect (e) {
   
      selection = window.getSelection();
      if (!verifyRangeSystem()) {
   
        return
      }
      if (openDialogVisible.value) {
   
        dialogVisible.value = true;
        return
      }
      addRange(); // 添加range 核心功能区
      
    }

    // 添加range，区分是否允许跨节点选择，先保存range
    function addRange() {
   
      // 校验range是否符合要求
      if (!verifyRange()) {
   
        return
      };
      const selectionRange = selection.getRangeAt(0);
      const startContainer = selectionRange.startContainer;
      const endContainer = selectionRange.endContainer;

      const startParentNode = startContainer.parentNode && startContainer.parentNode.className === 'select' ? startContainer.parentNode.parentNode : startContainer.parentNode;
      const endParentNode = endContainer.parentNode && endContainer.parentNode.className === 'select' ? endContainer.parentNode.parentNode : endContainer.parentNode;

      // 如果允许跨node选择
      if (isCrossNode.value && !startParentNode.