使用纯HTML绘制体温单报表

简述

本文中我们使用纯HTML技术来绘制体温单报表，不使用其他任何第三方插件或编辑器。

首先我们分析：

使用纯HTML绘制体温单的难点在于：

（1）定位并在坐标系中画体温/脉搏坐标点；
（2）根据两个坐标点画连接线；

实现方法

1、定位并在坐标系中画体温/脉搏坐标点；
使用td::before样式来定位线上的坐标点，并且使用自定义数据data-label属性作为伪元素的内容

.tem-table td::before {
    content: attr(data-label);
    position: absolute;
    top: 7px;
    left: 4px;
}

2、根据两个坐标点画连接线；

使用transform: rotate样式指定连接线旋转弧度值

<script type="text/javascript">
  function drawLine (obj1, obj2) {
    // 起点坐标
    var x1 = obj1.getBoundingClientRect().left + obj1.clientWidth / 2
    var y1 = obj1.getBoundingClientRect().top + obj1.clientHeight / 2

    // 终点坐标
    var x2 = obj2.getBoundingClientRect().left + obj2.clientWidth / 2
    var y2 = obj2.getBoundingClientRect().top + obj2.clientHeight / 2

    // 计算连接线长度
    var length = Math.sqrt((x2 -x1) * (x2 -x1) + (y2 -y1) * (y2 -y1))

    // 计算连接线旋转弧度值
    var rad = Math.atan2((y2 -y1), (x2 -x1))

    // 连接线未旋转前，起点坐标计算
    var top = (y1 + y2) / 2
    var left = (x1 + x2) / 2 - length / 2

    // 创建连接线 dom 节点，并设置样式
    var line = document.createElement('div')
    var style = 'position: absolute; background-color: red; height: 1px; top:' +
                top + 'px; left:' + left + 'px; width: ' + length + 'px; transform: rotate(' + rad + 'rad);'
    line.setAttribute('style', style)
    document.body.appendChild(line)
  }

  drawLine(document.getElementById('e1'), document.getElementById('e4'))
  drawLine(document.getElementById('e1'), document.getElementById('e5'))
  drawLine(document.getElementById('e2'), document.getElementById('e3'))
  drawLine(document.getElementById('e2'), document.getElementById('e5'))
  drawLine(document.getElementById('e3'), document.getElementById('e4'))
</script>

最后，我们看下最终的实现效果：

体温单-2.png