vue+zrender实现医院体温单

article/2025/9/21 3:14:11

项目背景

医院医护项目需求，需要用H5做一个通用的体温单

项目演示

版本一
在这里插入图片描述

版本二
在这里插入图片描述

项目代码简介

由vue-cli4脚手架快速搭建生成，主要代码都在thermometer.vue文件里面，后续修改也主要是在这个文件修改。
项目需求难点在中间的网格部分，主要使用到的依赖包是一个canvas类库zrender。

（1）画网格

画竖线：根据开始时间和结束时间，还有网格最小时间间隔计算出竖线的总条数，根据竖线总条数和每条线的间隔使用遍历画线

yLine() { const totalLine = (this.yRange[1] - this.yRange[0]+1) + (this.yRange[1]-this.yRange[0]) * 4let preSpace = 0for (let i = 0; i < totalLine; i++) {const isBreak = i%5 === 0 && i > 0 && i < totalLine - 1const lineWidth = isBreak ? 2 : 1const params = {x1: 0,y1: preSpace,x2: this.areaWidth,y2: preSpace,lineWidth,color: isBreak ? '#000' : '#8B8B8B'}preSpace += lineWidth + this.ySpacethis.createLine(params)}
},

画横线：和画竖线同理，根据最小体温和最大体温来画

（2）根据数据在网格描点

x轴坐标：根据时间点time_point和最大最小时间的间隔计算出百分比，映射到x轴的长度计算出相应的偏移像素值，偏移像素值就是画布上的x轴坐标

// 根据时间点计算横坐标
getXaxis(time) {return (this.getTimeStamp(time)-this.getTimeStamp(this.timeRange[0]))/(this.getTimeStamp(this.timeRange[1])-this.getTimeStamp(this.timeRange[0])) * this.areaWidth
},

y轴坐标：和计算x轴坐标同理，如体温的话就根据最大最小体温去计算百分比

（3）将多个点用线连接起来形成折线效果

在遍历数组数据描点的同时，将前一个点作为起点，后一个点作为终点，描点同时画线即可

（4）表顶注释和表底注释

因为注释文字要显示在网格里，所以用time_point计算x轴坐标的时候需要先计算出上一个距离最近的时间分割点，因为时间分割点的x轴坐标恰好落在竖线上，所以加多一个固定的间距即可调整到网格中间

// 算出上一个分割时间点
getSplitTime(time) {const hour = Number(time.slice(-8,-6))let splitHour = hour - hour % 4splitHour = splitHour < 10 ? `0${splitHour}` : String(splitHour)return `${time.slice(0, -8)}${splitHour}:00:00`
},

（5）手术或产后天数

这个需求计算有点复杂，第一次手术需要显示0天，之后一直显示到术后10天，即0-10，插入第二次手术的话会中断成显示II-0…II-10，插入第三次变成III-0…III-10以此类推，主要计算逻辑在这里

formatOperateDateList() {return this.dateList.map(x => {if (this.dayInterval(x, this.parseTime(new Date(), '{y}-{m}-{d}')) > 0) return ''if (!this.operateDateList.length) return ''// 构造天数差数组const days = this.operateDateList.map(y => {return this.dayInterval(x, y)})if (days.every(z => z < 0)) return ''// 找到前一次手术（最后一次天数差是正整数的地方）let index = 0for (let i = 0; i < days.length; i++) {if (days[i] >= 0) index = i}if (days[index] <= 10) {return index === 0 ? days[index] : `${this.numToRome(index+1)}-${days[index]}`} else {return ''}})
},

（6）表底的数据填入（呼吸、入量那些）

根据最大时间和最小时间，做一个累加遍历，根据时间点time_point判断数据落点，构造一个新的渲染数组。

// 计算底部数据的渲染列表
getFormatList({ timeRange, tList, timeInterval = 24*60*60*1000 }) {const timeNumRange = timeRange.map(x => this.getTimeNum(x))const list = []const targetList = [...tList]for (let i = timeNumRange[0]; i < timeNumRange[1]; i+= timeInterval) {const item = { timeNum: i, value: '' }for (let j = targetList.length - 1; j >=0; j-- ) {const timeNum = this.getTimeNum(targetList[j].time)if (timeNum >= i && timeNum < i + timeInterval) {item.value = targetList[j].valuetargetList.splice(j, 1)break;}}list.push(item)}return list
}

（7）分页

因为一页最多能显示7天，如果时间点time_point跨度比较大，大于7天就需要分页展示，因为开始时间固定为入院时间，所以根据入院时间累加7天，保证每个time_piont都能包含在内，在累加的过程中同时构造每一页的最大最小时间跨度，后续点击分页的时候只需修改时间跨度就行

// 计算最大标识时间
const maxTimeNum = Math.max.apply(null, vitalSigns.map(x => new Date(x.time_point).getTime()))
const admissionDateNum = new Date(`${this.patInfo.admission_date.slice(0, 10)} 00:00:00`).getTime()
// 根据入院时间和最大标识时间计算出页数和每页的时间范围
const dateRangeList = []
for (let i = admissionDateNum; i < maxTimeNum; i += 7 * 24 * 60 * 60 * 1000) {dateRangeList.push([this.parseTime(i, '{y}-{m}-{d}'), this.parseTime(i+6 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')])
}
this.dateRangeList = dateRangeList
this.pageTotal = dateRangeList.length