1697 lines
58 KiB
JavaScript
1697 lines
58 KiB
JavaScript
import * as d3 from 'd3'
|
||
import { iconDrawObj, getG, getData, drawTopMask, drawBottomMask, initArrow, lineArrow, drawSpecialText, drawTagText, drawBottomSpecialText, drawSpecialNoTimeText,
|
||
drawSurgery,
|
||
} from './drawfn'
|
||
import { getMaxList } from './dataProcess'
|
||
import {
|
||
timeNumber,
|
||
nightTime,
|
||
leftTEXT,
|
||
showPain,
|
||
painTEXT,
|
||
bodyTemperature,
|
||
painScore,
|
||
starNumEnv,
|
||
endNumEnv,
|
||
heartRange,
|
||
INFO_KEYS,
|
||
Header,
|
||
TOP_KEYS,
|
||
BOTTOM_KEYS,
|
||
HEAD_HEIGHT,
|
||
LINE_HEIGHT,
|
||
textLeftMargin,
|
||
TEXT_MARGIN_BOTTOM
|
||
} from './config'
|
||
import ViewConfig from './ViewConfig'
|
||
export async function init(data = []) {
|
||
const ajaxData = getData(data)
|
||
const chart = ConnectedScatterplot({
|
||
x: (d) => d.year,
|
||
y: (d) => d.gas,
|
||
xType: d3.scaleBand,
|
||
// yDomain: [starNumEnv1, starNumEnv2, endNumEnv1, endNumEnv2],
|
||
yDomain: [starNumEnv, endNumEnv],
|
||
width: 1080,
|
||
height: 1290 + BOTTOM_KEYS.length * 20 + 7,
|
||
marginLeft: 10,
|
||
marginRight: 100,
|
||
marginTop: 10,
|
||
marginBottom: 80,
|
||
duration: 5000, // for the intro animation; 0 to disable
|
||
renderData: ajaxData
|
||
})
|
||
await nextTick() // 等待DOM更新
|
||
if (document.getElementById('my_dataviz').children.length > 0) {
|
||
document.getElementById('my_dataviz').removeChild(document.getElementById('my_dataviz').children[0])
|
||
}
|
||
document.getElementById('my_dataviz').appendChild(chart)
|
||
}
|
||
function ConnectedScatterplot(options) {
|
||
// 计算出各种位置常量
|
||
const viewConfig = new ViewConfig(options)
|
||
let tooltip
|
||
const svg = d3
|
||
.create('svg')
|
||
.attr('id', 'printsvg')
|
||
.attr('width', viewConfig.width)
|
||
.attr('height', viewConfig.height)
|
||
.attr('viewBox', [0, 0, viewConfig.width, viewConfig.height])
|
||
.attr('style', 'height: auto; height: intrinsic;')
|
||
.attr('transform', `translate(0,${viewConfig.marginTop})`)
|
||
|
||
setTimeout(() => {
|
||
tooltip = svg.append('g').style('pointer-events', 'none')
|
||
})
|
||
const xScale = d3
|
||
.scaleBand()
|
||
.domain(d3.range(42))
|
||
.rangeRound(viewConfig.xRange)
|
||
// 体温的 scale
|
||
const bodyScale = d3.scaleLinear(
|
||
[bodyTemperature[0], bodyTemperature[1]],
|
||
viewConfig.yRange
|
||
)
|
||
// const y2Scale = d3.scaleLinear()
|
||
// .domain([94, 107]) // 新的 y 轴范围
|
||
// .range([viewConfig.height, 0]) // SVG 高度，0 表示顶端
|
||
// 心率的 Scale
|
||
const heartScale = d3.scaleLinear(
|
||
[heartRange[0], heartRange[1]], // [20, 180];
|
||
viewConfig.yRange // [560,60];
|
||
)
|
||
// 心率上限
|
||
const bodyOverflowData = getMaxList({
|
||
list: viewConfig.renderData.datasetHeartRate.flat(Infinity),
|
||
max: heartRange[1],
|
||
min: heartRange[0],
|
||
maxDefault: 180,
|
||
minDefault: 40
|
||
})
|
||
// 脉搏上限
|
||
const datasetPulse = getMaxList({
|
||
list: viewConfig.renderData.datasetPulse.flat(Infinity),
|
||
max: heartRange[1],
|
||
min: heartRange[0],
|
||
maxDefault: 180,
|
||
minDefault: 40
|
||
})
|
||
//口温下限
|
||
const bodyData = getMaxList({
|
||
list: viewConfig.renderData.bodyData,
|
||
max: bodyTemperature[1],
|
||
min: bodyTemperature[0],
|
||
maxDefault: 42,
|
||
minDefault: 35
|
||
});
|
||
// 腋温下限
|
||
const datasetAnus = getMaxList({
|
||
list: viewConfig.renderData.datasetAnus,
|
||
max: bodyTemperature[1],
|
||
min: bodyTemperature[0],
|
||
maxDefault: 42,
|
||
minDefault: 35
|
||
})
|
||
// 肛温下限
|
||
const datasetHeartrate = getMaxList({
|
||
list: viewConfig.renderData.datasetHeartrate,
|
||
max: bodyTemperature[1],
|
||
min: bodyTemperature[0],
|
||
maxDefault: 42,
|
||
minDefault: 35
|
||
})
|
||
|
||
// 耳温下限
|
||
const earCool = getMaxList({
|
||
list: viewConfig.renderData.earCool,
|
||
max: bodyTemperature[1],
|
||
min: bodyTemperature[0],
|
||
maxDefault: 42,
|
||
minDefault: 35
|
||
})
|
||
const allTemperature = [bodyOverflowData, datasetPulse, bodyData, datasetAnus, datasetHeartrate, earCool]
|
||
// viewConfig.renderData.bodyData = levelingData({
|
||
// list: viewConfig.renderData.bodyData,
|
||
// maxDefault: 43,
|
||
// minDefault: 33
|
||
// })
|
||
|
||
initArrow(svg)
|
||
// ==========================
|
||
// 开始调用绘制函数
|
||
// ==========================
|
||
// 1、绘制竖线格子
|
||
// 2、绘制折线图
|
||
// 3、绘制上下的字段属性（遮挡住超出的线条）【需要控制一个上下限，不超过遮罩层，体温【43°,】】
|
||
// 4、绘制被遮挡的竖线格子
|
||
// 一定要按照循序调用
|
||
// 绘制脉搏体温
|
||
drwaPulse(svg)
|
||
// 绘制折线区域格子
|
||
drawbgLine(svg)
|
||
// 绘制红色竖线
|
||
drwaVerticallLine(svg)
|
||
// 绘制折线
|
||
viewConfig.renderData.brokenLineData.forEach(item => {
|
||
brokenLine(svg, item)
|
||
})
|
||
const tmpList = getIndexValue(
|
||
viewConfig.renderData.bodyData,
|
||
viewConfig.renderData.datasetAnus,
|
||
viewConfig.renderData.datasetHeartrate,
|
||
viewConfig.renderData.earCool
|
||
)
|
||
// 绘制脉搏线条
|
||
viewConfig.renderData.datasetPulse.forEach((item) => {
|
||
const item2 = []
|
||
item.forEach((x) => {
|
||
// const obj = tmpList.find((o) => o.index === x.index && o.value === heartScale(x.value))
|
||
const obj = tmpList.find((o) => o.index === x.index && Math.abs(o.value - heartScale(x.value)) < 1)
|
||
if (!obj) {
|
||
item2.push(x)
|
||
}
|
||
})
|
||
drawHeart(svg, item, true)
|
||
drawHeart(svg, item2, false)
|
||
})
|
||
// 绘制心率线条
|
||
viewConfig.renderData.datasetHeartRate.forEach((item) => {
|
||
drawHeartRate(svg, item)
|
||
})
|
||
// // 绘制口温线条
|
||
// drawPathBody(svg, viewConfig.renderData.bodyData)
|
||
// 绘制腋温线条
|
||
drawAnus(svg, viewConfig.renderData.bodyData)
|
||
// // 绘制肛温线条
|
||
// drawJuhua(svg, viewConfig.renderData.datasetHeartrate)
|
||
// // 绘制耳温
|
||
// thermometer(svg, viewConfig.renderData.earCool)
|
||
// 绘制疼痛
|
||
// if (showPain) {
|
||
// viewConfig.renderData.painScore.forEach(item => {
|
||
// drawPain(svg, item);
|
||
// });
|
||
// }
|
||
// 需要放在绘制折线后，起到遮挡折线的作用
|
||
// 绘制呼吸格子
|
||
drwaBreathing(svg, viewConfig.renderData.datasetPain.filter(x => x.value !== null))
|
||
// 需要放在绘制呼吸后，绘制下划线
|
||
// 绘制底部横线和值
|
||
// ===================== //
|
||
// 遮罩层挡住超出的折线 //
|
||
// =====================//
|
||
drawTopMask(svg, viewConfig)
|
||
drawBottomMask(svg, viewConfig)
|
||
// 绘制底部线条
|
||
drwaBottomLine(svg)
|
||
drwaBottomLineData(svg)
|
||
// 绘制顶部值
|
||
drwaTopData(svg)
|
||
// 绘制特殊事件文字---有时间
|
||
if (viewConfig.renderData.otherArr.length > 0) {
|
||
for (let j = 0; j < viewConfig.renderData.otherArr.length; j++) {
|
||
drawSpecialText(svg, viewConfig, viewConfig.renderData.otherArr[j])
|
||
}
|
||
}
|
||
|
||
drawSurgery(svg, viewConfig, viewConfig.renderData.minSurgeryArr)
|
||
drawSurgery(svg, viewConfig, viewConfig.renderData.surgeryArr)
|
||
drawSpecialNoTimeText(svg, viewConfig, viewConfig.renderData.temArr)
|
||
//drawSpecialNoTimeText(svg, viewConfig, viewConfig.renderData.smallSurgerytArr)
|
||
//drawSpecialNoTimeText(svg, viewConfig, viewConfig.renderData.dischargeArr)
|
||
// drawSpecialNoTimeText(svg, viewConfig, viewConfig.renderData.transferArr)
|
||
// 绘制标签文字
|
||
// drawTagText(svg, viewConfig, viewConfig.renderData.symbolContent)
|
||
// drawBottomSpecialText(svg, viewConfig, viewConfig.renderData.symbolDegreesOnline);
|
||
drawBottomSpecialText(svg, viewConfig, viewConfig.renderData.symbolGoUp)
|
||
drawBottomSpecialText(svg, viewConfig, viewConfig.renderData.symbolDegreesEvents)
|
||
// 绘制降温的红圈和虚线
|
||
drawCoolBody(svg, viewConfig.renderData.dataCool, viewConfig.renderData.allTemperatureData)
|
||
// 绘制同一时间心率和脉搏的阴影
|
||
drawRateBody(svg, viewConfig.renderData.datasetPulse, viewConfig.renderData.datasetHeartRate)
|
||
drwaOtherInfo(svg, viewConfig.renderData.infoData)
|
||
// 最后一步
|
||
// 绘制四周加粗边框
|
||
drwaTabelBorder(svg)
|
||
// ========== //
|
||
// 最后展示浮层的内容
|
||
// ========== //
|
||
allTemperature.forEach((item) => {
|
||
lineArrow({
|
||
svg,
|
||
viewConfig,
|
||
scale: xScale,
|
||
data: item
|
||
})
|
||
})
|
||
|
||
// ==========================
|
||
// 结束调用绘制函数
|
||
// ==========================
|
||
|
||
return svg.node()
|
||
// 绘制最外面边框
|
||
function drwaTabelBorder(svg) {
|
||
const g = svg
|
||
.append('g')
|
||
.attr(
|
||
'transform',
|
||
`translate(${viewConfig.marginLeft},${viewConfig.topPos})`
|
||
)
|
||
|
||
g.append('rect')
|
||
.attr('x', 0)
|
||
.attr('y', 0)
|
||
.attr('width', viewConfig.contentWidth)
|
||
.attr('height', viewConfig.tableHeight)
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('fill', 'none')
|
||
.attr('style', 'stroke-width: 4')
|
||
}
|
||
// 绘制所有竖线
|
||
function drwaVerticallLine(svg) {
|
||
const g = getG(svg, viewConfig)
|
||
let start = viewConfig.step
|
||
g.attr('class', 'maskline2')
|
||
while (start < viewConfig.contentWidth) {
|
||
// const isLastLine = (start + viewConfig.step) >= viewConfig.contentWidth
|
||
g.append('line')
|
||
.attr('x1', start)
|
||
.attr('y1', 0)
|
||
.attr('y2', viewConfig.tableHeight)
|
||
.attr('x2', start)
|
||
.attr('stroke', start > viewConfig.step ? '#B22222' : viewConfig.stroke)
|
||
// .attr('stroke', isLastLine ? 'black' : (start > viewConfig.step ? '#B22222' : viewConfig.stroke))
|
||
.attr('stroke-width', 4) // 设置线条宽度为2
|
||
start = start + viewConfig.step
|
||
}
|
||
}
|
||
// 绘制底部的线条
|
||
function drwaBottomLine(svg) {
|
||
// 补上下竖线
|
||
let start = viewConfig.step
|
||
const lineG = getG(svg, viewConfig)
|
||
.append('g')
|
||
.attr('class', 'maskline')
|
||
const topPos = viewConfig.bottomKeysPosStart + 40
|
||
while (start < viewConfig.contentWidth) {
|
||
BOTTOM_KEYS.forEach((item, i) => {
|
||
const step = viewConfig.step / item.times
|
||
let itemStart = start
|
||
for (let j = 0; j < 6; j++) {
|
||
if (((j * viewConfig.step) / 6) % step === 0) {
|
||
lineG
|
||
.append('line')
|
||
.attr('fill', 'stroke')
|
||
.attr('x1', itemStart)
|
||
.attr('y1', topPos + i * LINE_HEIGHT)
|
||
.attr('y2', topPos + (i + 1) * LINE_HEIGHT)
|
||
.attr('x2', itemStart)
|
||
.attr('stroke', viewConfig.stroke)
|
||
}
|
||
itemStart += viewConfig.step / 6
|
||
}
|
||
})
|
||
start += viewConfig.step
|
||
}
|
||
}
|
||
// 绘制底部的线条和文字
|
||
function drwaBottomLineData(svg) {
|
||
const g = getG(svg, viewConfig)
|
||
// 绘制底部的横向线条
|
||
g.selectAll('line')
|
||
.data([...BOTTOM_KEYS])
|
||
.join('line')
|
||
.attr('x1', 0)
|
||
.attr('y1', (d, i) => {
|
||
const isLast = i === BOTTOM_KEYS.length - 1;
|
||
return viewConfig.bottomKeysPosStart + (i + 2) * LINE_HEIGHT + (isLast ? 15 : 0);
|
||
// return viewConfig.bottomKeysPosStart + (i + 2) * LINE_HEIGHT // 2是呼吸，占了2行
|
||
})
|
||
.attr('y2', (d, i) => {
|
||
const isLast = i === BOTTOM_KEYS.length - 1;
|
||
return viewConfig.bottomKeysPosStart + (i + 2) * LINE_HEIGHT + (isLast ? 15 : 0)
|
||
// return viewConfig.bottomKeysPosStart + (i + 2) * LINE_HEIGHT
|
||
})
|
||
.attr(
|
||
'x2',
|
||
viewConfig.width - viewConfig.marginLeft - viewConfig.marginRight
|
||
)
|
||
.attr('fill', 'none')
|
||
.attr('class', 'dataLine')
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('stroke-width', 1)
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
const textArr = BOTTOM_KEYS
|
||
const repeatArr = d3.range(8)
|
||
// 绘制文字
|
||
textArr.map(({ key, name, times }, index) => {
|
||
if (key !== '100') {
|
||
if (times && times === 2) {
|
||
let str = []
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(repeatArr)
|
||
.join('text')
|
||
.attr('style', 'font-size:15px; font-weight:bold;fill: black')
|
||
.attr('class', 'mytext')
|
||
.text((i) => {
|
||
if (i == 0) {
|
||
return name
|
||
} else {
|
||
const text = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.typeValue
|
||
if (text) {
|
||
str = text.split(',')
|
||
if (str.length > 1) {
|
||
return str[0]
|
||
}
|
||
}
|
||
return text
|
||
}
|
||
})
|
||
.attr('x', (i) => {
|
||
const pos = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.index + 1
|
||
if (i === 0) {
|
||
return textLeftMargin * 2
|
||
}
|
||
return pos * viewConfig.step + textLeftMargin
|
||
})
|
||
.attr('y', () => {
|
||
return viewConfig.bottomKeysPosStart + (index + 3) * LINE_HEIGHT - TEXT_MARGIN_BOTTOM
|
||
})
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(repeatArr)
|
||
.join('text')
|
||
.attr('style', 'font-size:15px; font-weight:bold;fill: black')
|
||
.attr('class', 'mytext')
|
||
.text((i) => {
|
||
if (i == 0) {
|
||
return ''
|
||
} else {
|
||
const text = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.typeValue
|
||
if (text) {
|
||
str = text.split(',')
|
||
if (str.length > 1) {
|
||
return str[1]
|
||
}
|
||
}
|
||
return ''
|
||
}
|
||
})
|
||
.attr('x', (i) => {
|
||
const pos = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.index + 1
|
||
if (i === 0) {
|
||
// return textLeftMargin * 2
|
||
}
|
||
return pos * viewConfig.step + textLeftMargin + 60
|
||
})
|
||
.attr('y', () => {
|
||
return viewConfig.bottomKeysPosStart + (index + 3) * LINE_HEIGHT - TEXT_MARGIN_BOTTOM
|
||
})
|
||
}
|
||
else if (key === '017') {
|
||
for (let j = 0; j < 8; j++) {
|
||
const testText = getTypeValue(key, viewConfig.renderData.typesData)[j - 1]?.typeValue
|
||
if (j === 0){
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(repeatArr)
|
||
.join('text')
|
||
.attr('style', 'font-size:15px;')
|
||
.attr('class', 'mytext')
|
||
.text(name)
|
||
.attr('x', () => {
|
||
return textLeftMargin * 2 + 10
|
||
})
|
||
.attr('y', () => {
|
||
return viewConfig.bottomKeysPosStart + (index + 3) * LINE_HEIGHT - TEXT_MARGIN_BOTTOM + 1
|
||
})
|
||
}
|
||
else if (testText !== undefined){
|
||
if(testText.length > 8){
|
||
for (let i = 0; i < testText.length; i += 8) {
|
||
// 使用slice方法获取当前段的字符串
|
||
const line = testText.slice(i, i + 8);
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(repeatArr)
|
||
.join('text')
|
||
.attr('style', 'font-size:14px')
|
||
.attr('class', 'mytext')
|
||
.text(line)
|
||
.attr('x', () => {
|
||
const pos = getTypeValue(key, viewConfig.renderData.typesData)[j - 1]?.index + 1
|
||
|
||
return pos * viewConfig.step + textLeftMargin
|
||
})
|
||
.attr('y', () => {
|
||
return viewConfig.bottomKeysPosStart + (index + 3) * LINE_HEIGHT - TEXT_MARGIN_BOTTOM + i*2.5
|
||
})
|
||
}
|
||
}else{
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(repeatArr)
|
||
.join('text')
|
||
.attr('style', 'font-size:14px;')
|
||
.attr('class', 'mytext')
|
||
.text(testText)
|
||
.attr('x', () => {
|
||
const pos = getTypeValue(key, viewConfig.renderData.typesData)[j - 1]?.index + 1
|
||
|
||
return pos * viewConfig.step + textLeftMargin
|
||
})
|
||
.attr('y', () => {
|
||
return viewConfig.bottomKeysPosStart + (index + 3) * LINE_HEIGHT - TEXT_MARGIN_BOTTOM
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(repeatArr)
|
||
.join('text')
|
||
// .attr('style', 'font-size:15px; font-weight:bold')
|
||
.attr('style', (i, d) => { // 使用回调函数来设置样式
|
||
let textContent = (i === 0) ? name : getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.typeValue;
|
||
let fontSize = '15px'; // 默认字体大小margin-left: 15px
|
||
|
||
// 检查条件并设置不同的字体大小
|
||
if (key === '005' && textContent === '*') {
|
||
fontSize = '30px'; // 或者你想要的任何特定大小
|
||
}
|
||
|
||
// 构建并返回样式字符串
|
||
return `font-size: ${fontSize};font-weight:bold;`; // 注意这里只设置了字体大小，其他样式未受影响
|
||
})
|
||
.attr('class', 'mytext')
|
||
.text((i) => {
|
||
if (i === 0) {
|
||
return name
|
||
} else {
|
||
let textValue = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.typeValue
|
||
return textValue
|
||
}
|
||
})
|
||
.attr('x', (i) => {
|
||
let nameLocation = textLeftMargin * 2 + 10
|
||
if (i === 0) {
|
||
if(key === '006'){
|
||
nameLocation = textLeftMargin * 2 - 3
|
||
}
|
||
return nameLocation
|
||
}
|
||
const pos = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.index + 1
|
||
const typesData = getTypeValue(key, viewConfig.renderData.typesData)[i-1]
|
||
if (typesData) {
|
||
const firstNameLength = typesData.typeValue.length
|
||
if (firstNameLength === 1) {
|
||
return pos * viewConfig.step + textLeftMargin + 50
|
||
} else if (firstNameLength === 2) {
|
||
return pos * viewConfig.step + textLeftMargin + 46
|
||
} else if (firstNameLength === 3) {
|
||
return pos * viewConfig.step + textLeftMargin + 43
|
||
} else if (firstNameLength === 4) {
|
||
if (typesData.typeCode === '010') {
|
||
return pos * viewConfig.step + textLeftMargin + 45
|
||
} else {
|
||
return pos * viewConfig.step + textLeftMargin + 40
|
||
}
|
||
} else if (firstNameLength === 5) {
|
||
return pos * viewConfig.step + textLeftMargin + 38
|
||
} else if (firstNameLength === 6) {
|
||
return pos * viewConfig.step + textLeftMargin + 32
|
||
} else if (firstNameLength > 10) {
|
||
return pos * viewConfig.step + textLeftMargin
|
||
} else {
|
||
return pos * viewConfig.step + textLeftMargin + 32
|
||
}
|
||
} else {
|
||
return pos * viewConfig.step + textLeftMargin + 30
|
||
}
|
||
})
|
||
.attr('y', (i) => {
|
||
const daBianValue = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.typeValue
|
||
let textHeight = viewConfig.bottomKeysPosStart + (index + 3) * LINE_HEIGHT - TEXT_MARGIN_BOTTOM
|
||
if(key === '005' && daBianValue === '*'){
|
||
textHeight = textHeight + 12
|
||
}
|
||
|
||
return textHeight
|
||
})
|
||
// .attr('y', () => {
|
||
// return (
|
||
// viewConfig.bottomKeysPosStart + (index + 3) * LINE_HEIGHT - TEXT_MARGIN_BOTTOM + 1
|
||
// )
|
||
// })
|
||
}
|
||
}
|
||
})
|
||
}
|
||
// 绘制底部的线条和文字
|
||
// function drwaBottomLineData(svg) {
|
||
// const g = getG(svg, viewConfig)
|
||
// // 绘制底部的横向线条
|
||
// g.selectAll('line')
|
||
// .data([...BOTTOM_KEYS])
|
||
// .join('line')
|
||
// .attr('x1', 0)
|
||
// .attr('y1', (d, i) => {
|
||
// return viewConfig.bottomKeysPosStart + (i + 2) * LINE_HEIGHT // 2是呼吸，占了2行
|
||
// })
|
||
// .attr('y2', (d, i) => {
|
||
// return viewConfig.bottomKeysPosStart + (i + 2) * LINE_HEIGHT
|
||
// })
|
||
// .attr('x2', viewConfig.width - viewConfig.marginLeft - viewConfig.marginRight)
|
||
// .attr('fill', 'none')
|
||
// .attr('class', 'dataLine')
|
||
// .attr('stroke', viewConfig.stroke)
|
||
// .attr('stroke-width', 1)
|
||
// .attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
// .attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
// const textArr = BOTTOM_KEYS
|
||
// const repeatArr = d3.range(8)
|
||
// // 绘制文字
|
||
// textArr.map(({ key, name, times }, index) => {
|
||
// // 绘制血压
|
||
// if (times && times === 2) {
|
||
// let str = []
|
||
// g.append('g')
|
||
// .selectAll('text')
|
||
// .data(repeatArr)
|
||
// .join('text')
|
||
// .attr('style', 'font-size:14px')
|
||
// .attr('class', 'mytext')
|
||
// .text((i) => {
|
||
// if (i === 0) {
|
||
// return name
|
||
// } else {
|
||
// const text = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.typeValue
|
||
// if (text) {
|
||
// str = text.split(',')
|
||
// if (str.length > 1) {
|
||
// return str[0]
|
||
// }
|
||
// }
|
||
// return text
|
||
// }
|
||
// })
|
||
// .attr('x', (i) => {
|
||
// const pos = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.index + 1
|
||
// if (i === 0) {
|
||
// return textLeftMargin * 2
|
||
// }
|
||
// return pos * viewConfig.step + textLeftMargin
|
||
// })
|
||
// .attr('y', () => {
|
||
// return viewConfig.bottomKeysPosStart + (index + 3) * LINE_HEIGHT - TEXT_MARGIN_BOTTOM
|
||
// })
|
||
// g.append('g')
|
||
// .selectAll('text')
|
||
// .data(repeatArr)
|
||
// .join('text')
|
||
// .attr('style', 'font-size:14px; margin-left: 5px')
|
||
// .attr('class', 'mytext')
|
||
// .text((i) => {
|
||
// if (i === 0) {
|
||
// return name
|
||
// } else {
|
||
// const text = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.typeValue
|
||
// if (text) {
|
||
// str = text.split(',')
|
||
// if (str.length > 1) {
|
||
// return str[1]
|
||
// }
|
||
// }
|
||
// return ''
|
||
// }
|
||
// })
|
||
// .attr('x', (i) => {
|
||
// const pos = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.index + 1
|
||
// if (i === 0) {
|
||
// return textLeftMargin * 2
|
||
// }
|
||
// return pos * viewConfig.step + textLeftMargin + 60
|
||
// })
|
||
// .attr('y', () => {
|
||
// return viewConfig.bottomKeysPosStart + (index + 3) * LINE_HEIGHT - TEXT_MARGIN_BOTTOM
|
||
// })
|
||
// } else {
|
||
// g.append('g')
|
||
// .selectAll('text')
|
||
// .data(repeatArr)
|
||
// .join('text')
|
||
|
||
// // .attr('style', 'font-size:14px')
|
||
// .attr('style', (i, d) => { // 使用回调函数来设置样式
|
||
// let textContent = (i === 0) ? name : getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.typeValue;
|
||
// let fontSize = '14px'; // 默认字体大小margin-left: 5px
|
||
|
||
// // 检查条件并设置不同的字体大小
|
||
// if (key === '005' && textContent === '*') {
|
||
// fontSize = '30px'; // 或者你想要的任何特定大小
|
||
// }
|
||
|
||
// // 构建并返回样式字符串
|
||
// return `font-size: ${fontSize};`; // 注意这里只设置了字体大小，其他样式未受影响
|
||
// })
|
||
// .attr('class', 'mytext')
|
||
// .text((i) => {
|
||
// if (i === 0) {
|
||
// return name
|
||
// } else {
|
||
// return getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.typeValue
|
||
// }
|
||
// })
|
||
// .attr('x', (i) => {
|
||
// const pos = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.index + 1
|
||
// if (i === 0) {
|
||
// return textLeftMargin * 2
|
||
// }
|
||
// return pos * viewConfig.step + textLeftMargin
|
||
// })
|
||
// .attr('y', (i) => {
|
||
// const daBianValue = getTypeValue(key, viewConfig.renderData.typesData)[i - 1]?.typeValue
|
||
// let textHeight = viewConfig.bottomKeysPosStart + (index + 3) * LINE_HEIGHT - TEXT_MARGIN_BOTTOM
|
||
// if(key === '005' && daBianValue === '*'){
|
||
// textHeight = textHeight + 12
|
||
// }
|
||
// return textHeight
|
||
// })
|
||
// }
|
||
// })
|
||
// }
|
||
// 绘制呼吸
|
||
function drwaBreathing(svg, breathData) {
|
||
const g = getG(svg, viewConfig)
|
||
// 遮罩层挡住超出的折线
|
||
g.append('rect')
|
||
.attr('class', 'mask-rect')
|
||
.attr('x', 0)
|
||
.attr('y', viewConfig.bottomKeysPosStart)
|
||
.attr(
|
||
'width',
|
||
viewConfig.width - viewConfig.marginRight - viewConfig.marginLeft
|
||
)
|
||
.attr('height', viewConfig.micoStep * 2 - 1)
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('fill', '#fff')
|
||
.attr('style', 'stroke-width: 0')
|
||
// 绘制横线
|
||
g.append('line')
|
||
.attr('x1', 0)
|
||
.attr('y1', viewConfig.bottomKeysPosStart)
|
||
.attr('y2', viewConfig.bottomKeysPosStart)
|
||
.attr(
|
||
'x2',
|
||
viewConfig.width - viewConfig.marginLeft - viewConfig.marginRight
|
||
)
|
||
.attr('fill', 'none')
|
||
.attr('class', 'dataLine')
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('stroke-width', 1)
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
const textYPos =
|
||
viewConfig.bottomKeysPosStart + LINE_HEIGHT + TEXT_MARGIN_BOTTOM
|
||
// 绘制汉字
|
||
g.append('text')
|
||
.attr('style', 'font-size:15px;font-weight:bold')
|
||
.text('呼 吸(次/分)')
|
||
.attr('x', textLeftMargin * 2)
|
||
.attr('y', textYPos)
|
||
// 绘制数据
|
||
const data = d3.range(42)
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(data)
|
||
.join('text')
|
||
.attr('style', 'font-size:14px')
|
||
.attr('class', 'mytext')
|
||
.text((d) => {
|
||
return breathData[d]?.value
|
||
})
|
||
.attr('x', (i) => {
|
||
const index = breathData[i]?.index
|
||
return viewConfig.step + index * viewConfig.micoStep + 3
|
||
})
|
||
.attr('y', (i) => {
|
||
if (i % 2) {
|
||
return textYPos + 10
|
||
} else {
|
||
return textYPos - 10
|
||
}
|
||
})
|
||
// 绘制呼吸竖线
|
||
g.append('g')
|
||
.selectAll('line')
|
||
.data(data)
|
||
.join('line')
|
||
.attr('x1', (d, i) => {
|
||
return viewConfig.step + i * viewConfig.micoStep
|
||
})
|
||
.attr('y1', viewConfig.bottomKeysPosStart + 2 * LINE_HEIGHT)
|
||
.attr('x2', (d, i) => {
|
||
return viewConfig.step + i * viewConfig.micoStep
|
||
})
|
||
.attr('y2', viewConfig.bottomKeysPosStart)
|
||
.attr('fill', 'none')
|
||
.attr('class', 'dataLine')
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('stroke-width', 1)
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
}
|
||
// 绘制脉搏体温文字
|
||
function drwaPulse(svg) {
|
||
// 左侧的文字
|
||
const g = getG(svg, viewConfig)
|
||
g.append('line')
|
||
.attr('class', 'slefline')
|
||
.attr('y1', viewConfig.topKeysPos) // 这个还要修改一下
|
||
.attr('x1', viewConfig.step / 2)
|
||
.attr('y2', viewConfig.bottomKeysPosStart)
|
||
.attr('x2', viewConfig.step / 2)
|
||
.attr('stroke', viewConfig.stroke)
|
||
// 画刻度尺
|
||
|
||
// for (let i = 5; i <= 70; i++) {
|
||
// const yPosition = viewConfig.topKeysPos + viewConfig.micoStep * 2.8 * i / 5 + 50
|
||
// let lineLength = 9 // 设置加长的刻度线长度
|
||
// if (i % 5 === 0) {
|
||
// lineLength = 16
|
||
// }
|
||
// 画刻度线
|
||
// g.append('line')
|
||
// .attr('x1', viewConfig.step / 2) // 刻度线的x坐标
|
||
// .attr('y1', yPosition)
|
||
// .attr('x2', viewConfig.step / 2 - lineLength) // 刻度线的结束坐标
|
||
// .attr('y2', yPosition)
|
||
// .attr('stroke', viewConfig.stroke)
|
||
//.attr('stroke-width', 2)
|
||
//}
|
||
|
||
leftTEXT.map((texts, index) => {
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(texts)
|
||
.join('text')
|
||
.attr('style', `font-size:14px;fill:${['red', 'blue'][index]}`)
|
||
.attr('class', 'mytext')
|
||
.html((d, i) => {
|
||
if (i === 0) {
|
||
const value = d.split(',')
|
||
return `<tspan>${value[0]}</tspan><tspan dx="${-35 + index * 10}" dy="15">${value[1]}</tspan><tspan dx="${
|
||
-35 + index * 10
|
||
}" dy="15">${value[2]}</tspan>`
|
||
}
|
||
return `${d}`
|
||
})
|
||
.attr('x', (d, i) => {
|
||
// 调整坐标文字显示位置
|
||
if (i === 0) {
|
||
if (index === 0) {
|
||
return viewConfig.micoStep * Math.max(index * 4, 1) - 12
|
||
}
|
||
return viewConfig.micoStep * Math.max(index * 4, 1) - 6
|
||
}
|
||
return viewConfig.micoStep * Math.max(index * 4, 0.9)
|
||
})
|
||
.attr('y', (d, i) => {
|
||
if (i === 0) {
|
||
return viewConfig.topKeysPos + viewConfig.micoStep * 1
|
||
}
|
||
return viewConfig.topKeysPos + viewConfig.micoStep * 5 * i
|
||
})
|
||
})
|
||
|
||
// 绘制疼痛表格
|
||
if (showPain) {
|
||
// 绘制疼痛分割线
|
||
g.append('line')
|
||
.attr('x1', 0)
|
||
.attr('y1', viewConfig.bottomKeysPosStart - viewConfig.micoStep * 6)
|
||
.attr('y2', viewConfig.bottomKeysPosStart - viewConfig.micoStep * 6)
|
||
.attr('x2', viewConfig.width - viewConfig.marginLeft - viewConfig.marginRight)
|
||
.attr('fill', 'none')
|
||
.attr('class', 'dataLine')
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('stroke-width', 1)
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
|
||
painTEXT.map((texts, index) => {
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(texts)
|
||
.join('text')
|
||
.attr('style', `font-size:14px;fill:${['black', 'blue'][index]}`)
|
||
.attr('class', 'mytext')
|
||
.html((d, i) => {
|
||
if (d.length > 2) {
|
||
const value = d.split(' ')
|
||
return `<tspan dx="10" dy="10">${value[0]}</tspan><tspan dx="${-15 + index * 10}" dy="25">${value[1]}</tspan><tspan dx="${-15 + index * 10}" dy="25">${value[2]}</tspan><tspan dx="${-15 + index * 10}" dy="25">${value[3]}</tspan>`
|
||
} else if (i === 0) {
|
||
return `<tspan dx="10">${d}</tspan>`
|
||
}
|
||
return `<tspan dx="4">${d}</tspan>`
|
||
})
|
||
.attr('x', (d, i) => {
|
||
// 调整坐标文字显示位置
|
||
if (i === 0) {
|
||
if (index === 0) {
|
||
return viewConfig.micoStep * Math.max(index * 4, 1) - 12
|
||
}
|
||
return viewConfig.micoStep * Math.max(index * 4, 1) - 6
|
||
}
|
||
return viewConfig.micoStep * Math.max(index * 4, 0.9)
|
||
})
|
||
.attr('y', (d, i) => {
|
||
if (i === 0) {
|
||
return viewConfig.bottomKeysPosStart - viewConfig.micoStep * 3.8 - 30
|
||
}
|
||
return viewConfig.bottomKeysPosStart - viewConfig.micoStep * 3.8 + viewConfig.micoStep * i - 30
|
||
})
|
||
})
|
||
}
|
||
}
|
||
// 绘制折线的背景格子
|
||
function drawbgLine(svg) {
|
||
const g = getG(svg, viewConfig)
|
||
// 绘制横线
|
||
const horizontallength = (bodyTemperature[1] - bodyTemperature[0] + 1) * 5
|
||
const horizontalData = [...new Array(horizontallength).keys()]
|
||
g.append('g')
|
||
.attr('class', 'line-content')
|
||
.selectAll('line')
|
||
.data(horizontalData)
|
||
.join('line')
|
||
// .attr('x1', viewConfig.step)
|
||
.attr('x1', (d, i) => {
|
||
// 判断是否是最后五条线，如果是，则减少几厘米
|
||
if (i >= horizontalData.length - 9) {
|
||
return viewConfig.step - 60 // 向前缩短20像素
|
||
}
|
||
// 判断是否是最后五条线，如果是，则减少几厘米
|
||
if (i >= horizontalData.length - 10) {
|
||
return viewConfig.step -120 // 向前缩短20像素
|
||
}
|
||
return viewConfig.step // 其他线使用默认长度
|
||
})
|
||
.attr('y1', (d, i) => {
|
||
return viewConfig.topKeysPos + i * viewConfig.micoStep
|
||
})
|
||
.attr('y2', (d, i) => {
|
||
return viewConfig.topKeysPos + i * viewConfig.micoStep
|
||
})
|
||
// .attr('x2', (d, i) => {
|
||
// // 判断是否是最后五条线，如果是，则减少几厘米
|
||
// if (i >= horizontalData.length - 10) {
|
||
// return viewConfig.width - viewConfig.marginLeft - viewConfig.marginRight // 向前缩短20像素
|
||
// }
|
||
// return viewConfig.width - viewConfig.marginLeft - viewConfig.marginRight // 其他线使用默认长度
|
||
// })
|
||
.attr('x2', viewConfig.width - viewConfig.marginLeft - viewConfig.marginRight)
|
||
.attr('fill', 'none')
|
||
.attr('class', 'dataLine')
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('stroke-width', 1)
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
.attr('style', (d, i) => {
|
||
if (i === horizontalData.length - 5) {
|
||
return 'stroke-width: 1; stroke: black;' // 不绘制最后一条线
|
||
}
|
||
if (i % 5 === 0 && i !== 0) {
|
||
return 'stroke-width: 3; stroke: blue;'
|
||
}
|
||
return 'stroke-width: 1'
|
||
})
|
||
// 竖线绘制
|
||
const verticalData = [...new Array(42).keys()]
|
||
g.append('g')
|
||
.selectAll('line')
|
||
.data(verticalData)
|
||
.join('line')
|
||
.attr('x1', (d, i) => {
|
||
return viewConfig.step + i * viewConfig.micoStep
|
||
})
|
||
.attr('y1', viewConfig.topKeysPos)
|
||
.attr('x2', (d, i) => {
|
||
return viewConfig.step + i * viewConfig.micoStep
|
||
})
|
||
.attr('y2', viewConfig.bottomKeysPosStart)
|
||
.attr('fill', 'none')
|
||
.attr('class', 'dataLine')
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('stroke-width', 1)
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
|
||
g.append('line')
|
||
.attr('class', 'myline')
|
||
.attr('x1', 0)
|
||
.attr('y1', viewConfig.topKeysPos)
|
||
.attr('x2', viewConfig.width - viewConfig.marginLeft - viewConfig.marginRight)
|
||
.attr('y2', viewConfig.topKeysPos)
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('stroke-width', 1)
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
}
|
||
// 绘制顶部数据
|
||
function drwaTopData(svg) {
|
||
const g = getG(svg, viewConfig)
|
||
// 绘制横向线条
|
||
g.selectAll('line')
|
||
.data(TOP_KEYS)
|
||
.join('line')
|
||
.attr('x1', 0)
|
||
.attr('y1', (d, i) => {
|
||
return LINE_HEIGHT * (i + 1)
|
||
})
|
||
.attr('y2', (d, i) => {
|
||
return LINE_HEIGHT * (i + 1)
|
||
})
|
||
.attr('x2', viewConfig.contentWidth)
|
||
.attr('fill', 'none')
|
||
.attr('class', 'newline')
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('stroke-width', 1)
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
// 数据的值
|
||
const repeatArr = [...new Array(8).keys()]
|
||
// 绘制文字
|
||
TOP_KEYS.map(({ getValue, name }, index) => {
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(repeatArr)
|
||
.join('text')
|
||
.attr('style', 'font-size:14px;text-anchor:middle;')
|
||
.attr('class', 'mytext')
|
||
.text((i) => {
|
||
if (i === 0) {
|
||
return name
|
||
} else {
|
||
return getValue(i - 1, viewConfig.renderData)
|
||
}
|
||
})
|
||
.attr('x', (i) => i * viewConfig.step + viewConfig.step / 2)
|
||
.attr('y', () => {
|
||
return LINE_HEIGHT * (index + 1) - TEXT_MARGIN_BOTTOM
|
||
})
|
||
})
|
||
// 绘制时间字段
|
||
// 绘制汉字
|
||
g.append('text')
|
||
.attr('style', 'font-size:14px;text-anchor:middle;')
|
||
.text('时 间')
|
||
.attr('x', viewConfig.step / 2)
|
||
.attr('y', viewConfig.topKeysPos - TEXT_MARGIN_BOTTOM)
|
||
// 绘制竖线和时间汉字
|
||
const data = new Array(timeNumber.length * 7).fill('').map((d, i) => timeNumber[i % timeNumber.length])
|
||
g.append('g')
|
||
.selectAll('text')
|
||
.data(data)
|
||
.join('text')
|
||
.attr('style', 'font-size:14px')
|
||
.attr('class', 'mytext')
|
||
.attr('fill', (d) => {
|
||
if (nightTime.includes(d)) {
|
||
return 'red'
|
||
} else {
|
||
return viewConfig.stroke
|
||
}
|
||
})
|
||
.text((d) => {
|
||
return d
|
||
})
|
||
.attr('x', (d, i) => {
|
||
return viewConfig.step + i * viewConfig.micoStep + 3
|
||
})
|
||
.attr('y', (d, i) => {
|
||
return viewConfig.topKeysPos - TEXT_MARGIN_BOTTOM
|
||
})
|
||
// 线条
|
||
g.append('g')
|
||
.attr('class', 'textYPos')
|
||
.selectAll('line')
|
||
.data(data)
|
||
.join('line')
|
||
.attr('x1', (d, i) => {
|
||
return viewConfig.step + i * viewConfig.micoStep
|
||
})
|
||
.attr('y1', viewConfig.topKeysPos - LINE_HEIGHT)
|
||
.attr('x2', (d, i) => {
|
||
return viewConfig.step + i * viewConfig.micoStep
|
||
})
|
||
.attr('y2', viewConfig.topKeysPos)
|
||
.attr('fill', 'none')
|
||
.attr('class', 'dataLine')
|
||
.attr('stroke', viewConfig.stroke)
|
||
.attr('stroke-width', (d, i) => {
|
||
return i % 6 ? 1 : 0
|
||
})
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
}
|
||
// 绘制折线
|
||
function brokenLine(svg, pathData) {
|
||
const I = d3.map(pathData, (_, i) => i)
|
||
const g = getG(svg, viewConfig)
|
||
const line = d3
|
||
.line()
|
||
.defined((i) => pathData[i].value)
|
||
.x((i) => {
|
||
return xScale(pathData[i].index) + viewConfig.X_OFFSET
|
||
})
|
||
.y((i) => bodyScale(pathData[i].value))
|
||
g.attr('class', 'body-line')
|
||
getDrawPath({
|
||
content: g,
|
||
line: line(I.filter((i) => pathData[i].value))
|
||
})
|
||
}
|
||
// 获取体温数据
|
||
function getIndexValue(list1, list2, list3, list4) {
|
||
let list = []
|
||
list = list.concat(list1.filter((x) => x.value !== null))
|
||
list = list.concat(list2.filter((x) => x.value !== null))
|
||
list = list.concat(list3.filter((x) => x.value !== null))
|
||
list = list.concat(list4.filter((x) => x.value !== null))
|
||
list.sort((x, y) => x.index - y.index)
|
||
return list.map((x) => {
|
||
return {
|
||
index: x.index,
|
||
value: bodyScale(x.value)
|
||
}
|
||
})
|
||
}
|
||
// // 绘制口温
|
||
// function drawPathBody(svg, pathData) {
|
||
// const g = getG(svg, viewConfig);
|
||
// g.on(
|
||
// 'pointerenter pointermove',
|
||
// generatePointer({
|
||
// pathData,
|
||
// type: '口温',
|
||
// yScaleInstance: bodyScale
|
||
// })
|
||
// ).on('pointerleave', pointerleft);
|
||
// iconDrawObj.getDrawRoundIcon({
|
||
// content: g,
|
||
// data: d3.range(pathData.length),
|
||
// x: (i) => {
|
||
// return xScale(pathData[i].index) + viewConfig.X_OFFSET;
|
||
// },
|
||
// y: (i) => bodyScale(pathData[i].value <= 35 ? 0 : pathData[i].value),
|
||
// r: 3
|
||
// });
|
||
// }
|
||
// // 绘制肛温
|
||
// function drawJuhua(svg, pathData) {
|
||
// const g = getG(svg, viewConfig);
|
||
// g.on(
|
||
// 'pointerenter pointermove',
|
||
// generatePointer({
|
||
// pathData,
|
||
// type: '肛温',
|
||
// yScaleInstance: bodyScale
|
||
// })
|
||
// ).on('pointerleave', pointerleft);
|
||
// iconDrawObj.getDrawRoundDotIcon({
|
||
// content: g,
|
||
// data: d3.range(pathData.length),
|
||
// x: (i) => xScale(pathData[i].index) + viewConfig.X_OFFSET,
|
||
// y: (i) => bodyScale(pathData[i].value <= 35 ? 0 : pathData[i].value),
|
||
// fill: 'white',
|
||
// deepFill: 'blue',
|
||
// r: 3
|
||
// });
|
||
// }
|
||
// // 绘制 耳温
|
||
// function thermometer(svg, pathData) {
|
||
// const g = getG(svg, viewConfig);
|
||
// g.on(
|
||
// 'pointerenter pointermove',
|
||
// generatePointer({
|
||
// pathData,
|
||
// type: '耳温',
|
||
// yScaleInstance: bodyScale
|
||
// })
|
||
// ).on('pointerleave', pointerleft);
|
||
// iconDrawObj.drawThreeIcon({
|
||
// content: g,
|
||
// data: d3.range(pathData.length),
|
||
// x: (i) => {
|
||
// return xScale(pathData[i].index) + viewConfig.X_OFFSET;
|
||
// },
|
||
// y: (i) => {
|
||
// return bodyScale(pathData[i].value <= 35 ? 0 : pathData[i].value);
|
||
// },
|
||
// fill: 'white',
|
||
// riangle: 24
|
||
// });
|
||
// }
|
||
|
||
// 绘制 疼痛曲线
|
||
function drawPain(svg, pathData) {
|
||
const g = getG(svg, viewConfig)
|
||
const I = d3.map(pathData, (_, i) => i)
|
||
g.on(
|
||
'pointerenter pointermove',
|
||
generatePointer({
|
||
pathData: viewConfig.renderData.painScore.flat(Infinity),
|
||
type: '疼痛',
|
||
yScaleInstance: heartScale
|
||
})
|
||
).on('pointerleave', pointerleft)
|
||
const line = d3
|
||
.line()
|
||
.defined((i) => pathData[i].value || pathData[i].value === 0)
|
||
.x((i) => {
|
||
return xScale(pathData[i].index) + viewConfig.X_OFFSET
|
||
})
|
||
.y((i) => {
|
||
if (pathData[i].value) {
|
||
return painScale(pathData[i].value / 10) + 10
|
||
}
|
||
return painScale(0) + 10
|
||
})
|
||
getDrawPath({
|
||
content: g,
|
||
line: line(I.filter((i) => pathData[i].value || pathData[i].value === 0)),
|
||
stroke: 'black'
|
||
})
|
||
// iconDrawObj.getDrawRoundIcon({
|
||
// content: g,
|
||
// data: d3.range(pathData.length),
|
||
// x: (i) => {
|
||
// return xScale(pathData[i].index) + viewConfig.X_OFFSET
|
||
// },
|
||
// y: (i) => {
|
||
// if (pathData[i].value) {
|
||
// return painScale(pathData[i].value / 10) + 10
|
||
// }
|
||
// return painScale(0) + 10
|
||
// },
|
||
// // riangle: 24,
|
||
// fill: 'black',
|
||
// stroke: 'black'
|
||
// })
|
||
|
||
iconDrawObj.drawThreeIcon({
|
||
content: g,
|
||
data: d3.range(pathData.length),
|
||
x: (i) => {
|
||
return xScale(pathData[i].index) + viewConfig.X_OFFSET
|
||
},
|
||
y: (i) => {
|
||
if (pathData[i].value) {
|
||
return painScale(pathData[i].value / 10) + 10
|
||
}
|
||
return painScale(0) + 10
|
||
},
|
||
riangle: 24
|
||
})
|
||
}
|
||
|
||
// 绘制脉搏
|
||
function drawHeart(svg, pathData, isEmpty) {
|
||
const I = d3.map(pathData, (_, i) => i)
|
||
const g = getG(svg, viewConfig)
|
||
g.on(
|
||
'pointerenter pointermove',
|
||
generatePointer({
|
||
pathData: viewConfig.renderData.datasetPulse.flat(Infinity),
|
||
type: '脉搏',
|
||
yScaleInstance: heartScale
|
||
})
|
||
).on('pointerleave', pointerleft)
|
||
const line = d3
|
||
.line()
|
||
.defined((i) => pathData[i].value)
|
||
.x((i) => {
|
||
return xScale(pathData[i].index) + viewConfig.X_OFFSET
|
||
})
|
||
.y((i) => heartScale(pathData[i].value || 0))
|
||
if(isEmpty){
|
||
getDrawPath({
|
||
content: g,
|
||
line: line(I.filter((i) => pathData[i].value)),
|
||
stroke: 'red'
|
||
})
|
||
}
|
||
iconDrawObj.getDrawRoundIcon({
|
||
content: g,
|
||
data: d3.range(pathData.length),
|
||
x: (i) => {
|
||
return xScale(pathData[i].index) + viewConfig.X_OFFSET
|
||
},
|
||
y: (i) => {
|
||
return heartScale(pathData[i].value)
|
||
},
|
||
fill: isEmpty ? 'transparent' : 'red',
|
||
stroke: 'red'
|
||
})
|
||
}
|
||
// 绘制心率
|
||
function drawHeartRate(svg, pathData) {
|
||
const I = d3.map(pathData, (_, i) => i)
|
||
const g = getG(svg, viewConfig)
|
||
g.on(
|
||
'pointerenter pointermove',
|
||
generatePointer({
|
||
pathData: viewConfig.renderData.datasetHeartRate.flat(Infinity),
|
||
type: '心率',
|
||
yScaleInstance: heartScale
|
||
})
|
||
).on('pointerleave', pointerleft)
|
||
const line = d3
|
||
.line()
|
||
.defined((i) => pathData[i].value)
|
||
.x((i) => {
|
||
return xScale(pathData[i].index) + viewConfig.X_OFFSET
|
||
})
|
||
.y((i) => heartScale(pathData[i].value || 0))
|
||
getDrawPath({
|
||
content: g,
|
||
line: line(I.filter((i) => pathData[i].value)),
|
||
stroke: 'red'
|
||
})
|
||
|
||
iconDrawObj.getDrawRoundIcon({
|
||
content: g,
|
||
data: d3.range(pathData.length),
|
||
x: (i) => {
|
||
return xScale(pathData[i].index) + viewConfig.X_OFFSET
|
||
},
|
||
y: (i) => {
|
||
return heartScale(pathData[i].value)
|
||
},
|
||
fill: 'white',
|
||
stroke: 'red'
|
||
})
|
||
}
|
||
// 腋温
|
||
function drawAnus(svg, pathData) {
|
||
const g = getG(svg, viewConfig)
|
||
g.on(
|
||
'pointerenter pointermove',
|
||
generatePointer({
|
||
pathData,
|
||
type: '体温',
|
||
yScaleInstance: bodyScale
|
||
})
|
||
).on('pointerleave', pointerleft)
|
||
iconDrawObj.getDrawXIcon({
|
||
content: g,
|
||
data: d3.range(pathData.length),
|
||
x: (i) => {
|
||
return xScale(pathData[i].index) + viewConfig.X_OFFSET
|
||
},
|
||
y: (i) => bodyScale(pathData[i].value ? (pathData[i].value <= 35 ? 0 : pathData[i].value) : 0)
|
||
// style: {
|
||
// stroke: 'black', // 线的颜色
|
||
// 'stroke-width': 6, // 加粗，设置合适的宽度
|
||
// fill: 'none' // 如果需要可以调整填充
|
||
// }
|
||
})
|
||
const line = d3
|
||
.line()
|
||
.x((d, i) => xScale(d.index) + viewConfig.X_OFFSET)
|
||
.y((d) => bodyScale(d.value ? (d.value <= 35 ? 0 : d.value) : 0))
|
||
.defined((d) => d.value !== null && d.value !== undefined) // 过滤无效数据点
|
||
|
||
g.append('path')
|
||
.attr('class', 'axillary-line')
|
||
.attr('d', line(pathData))
|
||
.attr('fill', 'none')
|
||
.attr('stroke', 'blue')
|
||
.attr('stroke-width', 2)
|
||
.on('pointerleave', () => tooltip.style('display', 'none'))
|
||
}
|
||
|
||
// 绘制一个线条
|
||
function getDrawPath({ content, line, stroke = 'blue' }) {
|
||
content
|
||
.append('path')
|
||
.attr('class', 'mylines')
|
||
.attr('fill', 'none')
|
||
.attr('stroke', stroke)
|
||
.attr('stroke-width', viewConfig.strokeWidth)
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
.attr('d', line)
|
||
}
|
||
|
||
// // 绘制降温的红圈和虚线
|
||
// function drawCoolBody(svg, coolData, allData) {
|
||
// console.log('绘制降温的红圈和虚线', coolData, allData)
|
||
// const g = getG(svg, viewConfig)
|
||
|
||
// const lineData = [];
|
||
|
||
// // 遍历data1中的每个对象
|
||
// coolData.forEach(item1 => {
|
||
// // 如果item1有index和date属性
|
||
// if (item1.index !== undefined && item1.date !== undefined) {
|
||
// // 遍历data2中的每个对象
|
||
// allData.forEach(item2 => {
|
||
// // 如果item2也有index和date属性，并且它们与item1的相等
|
||
// if (item2.index === item1.index && item2.date === item1.date) {
|
||
// // 将匹配的对象添加到结果数组中
|
||
// // 这里可以添加整个对象，或者根据需要添加对象的某些属性
|
||
// lineData.push({ ...item1, ...item2 }); // 使用展开运算符合并对象，注意这可能会覆盖相同属性的值
|
||
// // 如果不希望覆盖，可以只添加item1或item2，或者创建一个新对象包含所需属性
|
||
// }
|
||
// });
|
||
// }
|
||
// });
|
||
// console.log('绘制降温的红圈和虚线lineData',lineData, coolData, allData)
|
||
// g.append('g')
|
||
// .selectAll('line')
|
||
// .data(lineData)
|
||
// .join('line')
|
||
// .attr('class', 'xuxianliane')
|
||
// .attr('x1', function({ index,date,value }) {
|
||
// return xScale(index) + viewConfig.X_OFFSET + (index - 20) / 4
|
||
// })
|
||
// .attr('y1', function({ value }) {
|
||
// return bodyScale(value)
|
||
// })
|
||
// .attr('x2', function({ index }) {
|
||
// return xScale(index) + viewConfig.X_OFFSET + (index - 20) / 4
|
||
// })
|
||
// .attr('y2', function({ index,date }) {
|
||
// const bodyValue = allData.filter(item => item.index === index && item.date === date )[0].value
|
||
// return bodyScale(bodyValue)
|
||
// })
|
||
// .attr('stroke', 'red')
|
||
// .attr('stroke-width', 2)
|
||
// .style('stroke-dasharray', '3, 3')
|
||
// .attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
// .attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
// // 绘制icon
|
||
// iconDrawObj.getDrawRoundIcon({
|
||
// content: g,
|
||
// data: d3.range(lineData.length),
|
||
// x: (i) => {
|
||
// return xScale(lineData[i].index) + viewConfig.X_OFFSET + (lineData[i].index - 20) / 4
|
||
// },
|
||
// y: (i) => {
|
||
// return bodyScale(lineData[i].value)
|
||
// },
|
||
// fill: 'transparent',
|
||
// stroke: 'red',
|
||
// r: 6
|
||
// })
|
||
// }
|
||
// 绘制降温的红圈和虚线
|
||
function drawCoolBody(svg, coolData, allData) {
|
||
const g = getG(svg, viewConfig)
|
||
// 获取同个位置记录的温度
|
||
const temArrMap = allData.reduce((data, items) => {
|
||
items.map((item) => {
|
||
if (item.value) {
|
||
data[item.index] = item.value
|
||
}
|
||
})
|
||
return data
|
||
}, {})
|
||
const vaildData = coolData.filter((item) => item.value)
|
||
const lineData = vaildData.filter(({ index, value }) => temArrMap[index] !== value)
|
||
g.append('g')
|
||
.selectAll('line')
|
||
.data(lineData)
|
||
.join('line')
|
||
.attr('class', 'xuxianliane')
|
||
.attr('x1', function({ index }) {
|
||
return xScale(index) + viewConfig.X_OFFSET
|
||
})
|
||
.attr('y1', function({ value }) {
|
||
return bodyScale(value)
|
||
})
|
||
.attr('x2', function({ index }) {
|
||
return xScale(index) + viewConfig.X_OFFSET
|
||
})
|
||
.attr('y2', function({ index,value }) {
|
||
const bodyValue = temArrMap[index]
|
||
let y2Location = bodyScale(value)
|
||
if (bodyValue !== undefined) {
|
||
|
||
y2Location = bodyScale(bodyValue)
|
||
}
|
||
return y2Location
|
||
})
|
||
|
||
.attr('stroke', 'red')
|
||
.attr('stroke-width', 2)
|
||
.style('stroke-dasharray', '3, 3')
|
||
.attr('stroke-linejoin', viewConfig.strokeLinejoin)
|
||
.attr('stroke-linecap', viewConfig.strokeLinecap)
|
||
// 绘制icon
|
||
iconDrawObj.getDrawRoundIcon({
|
||
content: g,
|
||
data: d3.range(vaildData.length),
|
||
x: (i) => {
|
||
return xScale(vaildData[i].index) + viewConfig.X_OFFSET
|
||
},
|
||
y: (i) => {
|
||
return bodyScale(vaildData[i].value)
|
||
},
|
||
fill: 'transparent',
|
||
stroke: 'red',
|
||
r: 6
|
||
})
|
||
}
|
||
// 绘制同一时间心率和脉搏的阴影
|
||
function drawRateBody(svg, pulseData, heartRateData) {
|
||
if (pulseData[0].length > 0 || heartRateData[0].length > 0) {
|
||
const g = getG(svg, viewConfig)
|
||
|
||
const defs = g.append("defs");
|
||
const pattern = defs.append("pattern")
|
||
.attr("id", "diagonal-hatch")
|
||
.attr("patternUnits", "userSpaceOnUse")
|
||
.attr("width", 1)
|
||
.attr("height", 6)
|
||
.attr("patternTransform", "rotate(100)"); // 45度斜线
|
||
|
||
pattern.append("path")
|
||
// .attr("d", "M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2")
|
||
.attr("d", "M-1,-1 l2,2 M0,0 l4,4 M3,3 l2,2")
|
||
.attr("stroke", 'red') // 虚线颜色
|
||
.attr("stroke-width", 1)
|
||
.attr("opacity", 0.8); // 透明度
|
||
|
||
// 创建一个映射，用于快速查找心率值
|
||
const heartRateMap = heartRateData[0].reduce((acc, curr) => {
|
||
acc[curr.index] = curr.value
|
||
return acc
|
||
}, {})
|
||
// 创建一个映射，用于快速查找脉搏值
|
||
const pulseDataMap = pulseData[0].reduce((acc, curr) => {
|
||
acc[curr.index] = curr.value
|
||
return acc
|
||
}, {})
|
||
|
||
if (Object.keys(heartRateMap).length >= 3 && Object.keys(pulseDataMap).length >= 3) {
|
||
// 获取脉搏和心率的起点和终点
|
||
const pulseStart = pulseData[0][0]
|
||
// const pulseEnd = pulseData[0][pulseData[0].length - 1]
|
||
const heartRateStart = heartRateMap[pulseStart.index]
|
||
// const heartRateEnd = heartRateMap[pulseEnd.index]
|
||
|
||
// 生成路径数据
|
||
const pathData = pulseData[0].reduce((acc, { value, index }, i) => {
|
||
const heartRateValue = heartRateMap[index]
|
||
|
||
// 过滤掉没有脉搏值和对应心率值的项
|
||
if (value !== null && value !== undefined && heartRateValue !== null && heartRateValue !== undefined) {
|
||
|
||
const y1 = heartScale(value || 0)
|
||
const x = xScale(index) + viewConfig.X_OFFSET
|
||
const y2 = heartScale(heartRateValue || 0)
|
||
// 如果是第一个点，移动到起始点
|
||
if (acc === '') {
|
||
acc += `M${x},${y1}` // Move to the starting point
|
||
}
|
||
acc += `L${x},${y2}` // Draw line to heart rate point
|
||
}
|
||
return acc
|
||
}, '')
|
||
|
||
// 生成闭合路径
|
||
let closingPath = pulseData[0].reduceRight((acc, { value, index }) => {
|
||
const heartRateValue = heartRateMap[index]
|
||
|
||
if (value !== null && value !== undefined && heartRateValue !== null && heartRateValue !== undefined) {
|
||
const x = xScale(index) + viewConfig.X_OFFSET
|
||
const y1 = heartScale(value || 0)
|
||
// const y2 = heartScale(heartRateValue)
|
||
|
||
acc += `L${x},${y1}` // Draw line down to pulse point
|
||
}
|
||
return acc
|
||
}, '') + `L${xScale(pulseStart.index) + viewConfig.X_OFFSET},${heartScale(heartRateStart)}` + 'Z' // Close the path
|
||
closingPath += `L${xScale(pulseStart.index) + viewConfig.X_OFFSET},${heartScale(heartRateStart)}Z`
|
||
// 绘制阴影区域
|
||
g.append('path')
|
||
.attr('class', 'rate-shade')
|
||
.attr('d', pathData + closingPath) // 完整的路径数据
|
||
.attr('fill', 'url(#diagonal-hatch)') // 使用图案填充
|
||
.attr('stroke', 'red') // 设置边框颜色为红色
|
||
}
|
||
}
|
||
}
|
||
// 绘制表格区域外面的信息数据
|
||
function drwaOtherInfo(svg, data) {
|
||
const g = svg
|
||
.append('g')
|
||
.attr('transform', `translate(${viewConfig.marginLeft},${viewConfig.marginTop})`)
|
||
.attr('style', 'font-size:14px;')
|
||
// 绘制第几周
|
||
getG(svg, viewConfig)
|
||
.append('text')
|
||
.attr('style', 'font-size:24px;')
|
||
.attr('class', 'mytext')
|
||
.text(`第${+data.weekNo + 1}周`)
|
||
.attr('x', viewConfig.width / 2 - 40)
|
||
.attr('y', viewConfig.bottomPos + TEXT_MARGIN_BOTTOM + 1.5 * LINE_HEIGHT - 25)
|
||
// 绘制标注
|
||
getG(svg, viewConfig)
|
||
.attr(
|
||
'transform',
|
||
`translate(${viewConfig.marginLeft},${viewConfig.bottomPos + viewConfig.marginTop + HEAD_HEIGHT})`
|
||
)
|
||
.attr('style', 'font-size:14px;')
|
||
.call((g) => {
|
||
const dataList = [
|
||
{
|
||
name: '体温',
|
||
fn: iconDrawObj.getDrawXIcon,
|
||
params: {
|
||
content: g,
|
||
data: [0]
|
||
}
|
||
},
|
||
{
|
||
name: '心率',
|
||
fn: iconDrawObj.getDrawRoundIcon,
|
||
params: {
|
||
content: g,
|
||
data: [0],
|
||
fill: 'white',
|
||
stroke: 'red'
|
||
}
|
||
},
|
||
{
|
||
name: '脉搏',
|
||
fn: iconDrawObj.getDrawRoundIcon,
|
||
params: {
|
||
content: g,
|
||
data: [0],
|
||
fill: 'red',
|
||
stroke: 'red'
|
||
}
|
||
}
|
||
]
|
||
g.append('text').text('标注：')
|
||
dataList.map((item, i) => {
|
||
g.append('text')
|
||
.text(item.name)
|
||
.attr('x', 40 + i * 80)
|
||
item.fn({
|
||
...item.params,
|
||
x: () => 80 + i * 80,
|
||
y: () => -4
|
||
})
|
||
})
|
||
})
|
||
.attr('x', viewConfig.width / 2 - 40)
|
||
.attr('y', viewConfig.bottomPos + TEXT_MARGIN_BOTTOM)
|
||
// 绘制顶部的信息数据
|
||
g.append('text')
|
||
.attr('class', 'mytext')
|
||
.attr('x', 0)
|
||
.attr('y', () => {
|
||
return HEAD_HEIGHT - TEXT_MARGIN_BOTTOM - 6
|
||
})
|
||
.html(() => {
|
||
return INFO_KEYS.map(({ name, key }, index) => {
|
||
return `<tspan dx="${index === 0 ? 0 : 40}" dy="${0}">${name}: ${data[key] ? data[key] : ''}</tspan>`
|
||
}).join('')
|
||
})
|
||
// 绘制标题
|
||
g.append('text')
|
||
.attr('style', 'font-size:22px;text-anchor: middle;')
|
||
.attr('class', 'mytext')
|
||
.attr('x', viewConfig.width / 2)
|
||
.attr('y', () => {
|
||
return HEAD_HEIGHT - 4 * LINE_HEIGHT
|
||
})
|
||
.text(Header.HospitalName)
|
||
// 体温单
|
||
g.append('text')
|
||
.attr('style', 'font-size:22px;text-anchor: middle;')
|
||
.attr('class', 'mytext')
|
||
.attr('x', viewConfig.width / 2)
|
||
.attr('y', () => {
|
||
return HEAD_HEIGHT - 2.5 * LINE_HEIGHT
|
||
})
|
||
.text(Header.temperatureName)
|
||
}
|
||
|
||
function generatePointer({ pathData, type, yScaleInstance }) {
|
||
return (event) => {
|
||
var index = Math.round((d3.pointer(event)[0] - viewConfig.step - textLeftMargin) / xScale.step())
|
||
var val = xScale.domain()[index]
|
||
// const i = d3.bisectCenter(d3.range(pathData.length), val);
|
||
let i = -1
|
||
pathData.forEach((item, index) => {
|
||
if (item.index === val) {
|
||
i = index
|
||
}
|
||
})
|
||
const yPos = yScaleInstance(+pathData[i].value) + viewConfig.marginTop + HEAD_HEIGHT
|
||
tooltip.style('display', null)
|
||
tooltip.attr('class', 'myTooltip')
|
||
tooltip.attr('transform', `translate(${xScale(val) + viewConfig.micoStep},${yPos})`)
|
||
|
||
const path = tooltip.selectAll('path').data(['', '']).join('path').attr('fill', 'white').attr('stroke', 'black')
|
||
|
||
const text = tooltip
|
||
.selectAll('text')
|
||
.data(['', ''])
|
||
.join('text')
|
||
.call((text) =>
|
||
text
|
||
.selectAll('tspan')
|
||
.data([`${type}: ${pathData[i].value}`, `${pathData[i].date}`])
|
||
.join('tspan')
|
||
.attr('x', 0)
|
||
.attr('y', (_, i) => `${i * 1.2}em`)
|
||
.attr('font-weight', (_, i) => (i ? null : 'bold'))
|
||
.text((d) => d)
|
||
)
|
||
|
||
const { y, width: w, height: h } = text.node().getBBox()
|
||
text.attr('transform', `translate(${-w / 2},${15 - y})`)
|
||
path.attr('d', `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`)
|
||
}
|
||
}
|
||
|
||
function pointerleft() {
|
||
tooltip.style('display', 'none')
|
||
}
|
||
}
|
||
function getTypeValue(type, allData = [], isNumber = true) {
|
||
return allData.filter((item) => item.typeCode === type || '')
|
||
}
|