501 lines
12 KiB
JavaScript
501 lines
12 KiB
JavaScript
import * as echarts from '../../ec-canvas/echarts.min';
|
|
import request from '~/api/request';
|
|
import {
|
|
heightList,
|
|
weightList
|
|
} from './heightWeight';
|
|
const app = getApp();
|
|
|
|
Page({
|
|
onShareAppMessage: function (res) {
|
|
return {
|
|
title: 'ECharts 可以在微信小程序中使用啦！',
|
|
path: '/pages/index/index',
|
|
success: function () {},
|
|
fail: function () {}
|
|
}
|
|
},
|
|
data: {
|
|
ec: {
|
|
lazyLoad: true
|
|
},
|
|
ec2: {
|
|
lazyLoad: true
|
|
},
|
|
ec3: {
|
|
lazyLoad: true
|
|
},
|
|
ec4: {
|
|
lazyLoad: true
|
|
},
|
|
activeIndex: 0,
|
|
sfData: {},
|
|
sfListLength: 0,
|
|
articles: [],
|
|
articlesLength: 0,
|
|
heightData: [],
|
|
weightData: [],
|
|
|
|
carList: [],
|
|
carLength: 0,
|
|
userInfo: {},
|
|
totalBilirubin: [],
|
|
directBilirubin: [],
|
|
xAxis: []
|
|
},
|
|
|
|
heightChart: null,
|
|
weightChart: null,
|
|
directChart: null,
|
|
indirectChart: null,
|
|
standardHeight: [],
|
|
standardWeight: [],
|
|
userId: '',
|
|
// Helper function to strip HTML tags and convert to plain text
|
|
stripHtml(html) {
|
|
if (!html) return '';
|
|
return html.replace(/<[^>]*>/g, '');
|
|
},
|
|
async getPersonalInfo(id) {
|
|
const info = await request('doctor/patient/basic/' + id).then((res) => res);
|
|
info.avatar = info.avatar ? info.avatar : 'https://image-fudan.oss-cn-beijing.aliyuncs.com/mini_images/my/baby.png';
|
|
this.setData({
|
|
userInfo: info
|
|
})
|
|
if (info.sex == 1) {
|
|
this.standardHeight = heightList.boy
|
|
this.standardWeight = weightList.boy
|
|
} else {
|
|
this.standardHeight = heightList.girl
|
|
this.standardWeight = weightList.girl
|
|
}
|
|
this.getChartData()
|
|
|
|
},
|
|
|
|
|
|
async getChartData() {
|
|
const res = await request('doctor/patient/chat/' + this.userId, 'get')
|
|
const heightData = []
|
|
const weightData = []
|
|
const totalBilirubin = []
|
|
const directBilirubin = []
|
|
const xAxis = []
|
|
if (res.list.length > 0) {
|
|
res.list.forEach(item => {
|
|
heightData.push(item.height)
|
|
weightData.push(item.weight)
|
|
totalBilirubin.push(item.total_bilirubin)
|
|
directBilirubin.push(item.direct_bilirubin)
|
|
xAxis.push(item.age)
|
|
})
|
|
}
|
|
|
|
this.setData({
|
|
heightData,
|
|
weightData,
|
|
totalBilirubin,
|
|
directBilirubin,
|
|
xAxis
|
|
});
|
|
this.initHeightChart()
|
|
this.initDirectChart()
|
|
this.initIndirectChart()
|
|
},
|
|
|
|
toBack() {
|
|
wx.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
onLoad(options) {
|
|
this.userId = options.userId
|
|
this.getPersonalInfo(options.userId)
|
|
},
|
|
|
|
onReady() {
|
|
|
|
|
|
},
|
|
toLink() {
|
|
wx.navigateTo({
|
|
url: '/pages/followUp/index?userId=' + this.userId
|
|
})
|
|
},
|
|
|
|
changeChart(e) {
|
|
const index = e.currentTarget.dataset.index;
|
|
if (index == this.data.activeIndex) {
|
|
return
|
|
}
|
|
this.setData({
|
|
activeIndex: index
|
|
}, () => {
|
|
setTimeout(() => {
|
|
if (index == 0) {
|
|
this.initHeightChart();
|
|
} else {
|
|
this.initWeightChart();
|
|
}
|
|
}, 100);
|
|
});
|
|
},
|
|
|
|
|
|
onUnload() {
|
|
// 页面卸载时销毁图表实例
|
|
if (this.heightChart) {
|
|
this.heightChart.dispose();
|
|
this.heightChart = null;
|
|
}
|
|
if (this.weightChart) {
|
|
this.weightChart.dispose();
|
|
this.weightChart = null;
|
|
}
|
|
if (this.directChart) {
|
|
this.directChart.dispose();
|
|
this.directChart = null;
|
|
}
|
|
if (this.indirectChart) {
|
|
this.indirectChart.dispose();
|
|
this.indirectChart = null;
|
|
}
|
|
},
|
|
|
|
// 初始化身高图表
|
|
initHeightChart() {
|
|
const standardHeight = this.standardHeight;
|
|
|
|
let totalList = []
|
|
standardHeight.forEach(item => {
|
|
this.data.xAxis.forEach(item2 => {
|
|
if (item.age == item2) {
|
|
totalList.push(item.value)
|
|
}
|
|
|
|
})
|
|
})
|
|
|
|
|
|
const standardLower = totalList.map(item => item[0]);
|
|
const standardUpper = totalList.map(item => item[1]);
|
|
// const standardRange = standardUpper.map((up, i) => up - standardLower[i]);
|
|
|
|
const chartComp = this.selectComponent('#mychart-dom-height');
|
|
if (chartComp) {
|
|
chartComp.init((canvas, width, height, dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width,
|
|
height,
|
|
devicePixelRatio: dpr
|
|
});
|
|
canvas.setChart(chart);
|
|
chart.setOption({
|
|
title: {
|
|
text: '',
|
|
left: 'left',
|
|
fontSize: 6
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
top: '5%',
|
|
left: '5%',
|
|
right: '7%',
|
|
bottom: '3%'
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
const param = params[0];
|
|
return `${param.axisValue}\n${param.seriesName}: ${param.value} cm`;
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.data.xAxis
|
|
},
|
|
yAxis: {
|
|
x: 'center',
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '实际身高',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: this.data.heightData
|
|
},
|
|
{
|
|
name: '标准上界',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
data: standardUpper,
|
|
lineStyle: {
|
|
opacity: 0
|
|
},
|
|
stack: '标准范围',
|
|
areaStyle: {
|
|
opacity: 0
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
},
|
|
{
|
|
name: '标准下界',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
data: standardLower,
|
|
lineStyle: {
|
|
opacity: 0
|
|
},
|
|
stack: '标准范围',
|
|
areaStyle: {
|
|
color: 'rgba(135,206,250,0.3)'
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
}
|
|
]
|
|
});
|
|
return chart;
|
|
});
|
|
}
|
|
},
|
|
|
|
// 初始化体重图表
|
|
initWeightChart() {
|
|
const standardWeight = this.standardWeight;
|
|
|
|
let totalList = []
|
|
standardWeight.forEach(item => {
|
|
this.data.xAxis.forEach(item2 => {
|
|
if (item.age == item2) {
|
|
totalList.push(item.value)
|
|
}
|
|
|
|
})
|
|
})
|
|
const standardLower = totalList.map(item => item[0]);
|
|
const standardUpper = totalList.map(item => item[1]);
|
|
// const standardRange = totalList.map((up, i) => up - standardLower[i]);
|
|
|
|
const chartComp = this.selectComponent('#mychart-dom-weight');
|
|
if (chartComp) {
|
|
chartComp.init((canvas, width, height, dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width,
|
|
height,
|
|
devicePixelRatio: dpr
|
|
});
|
|
canvas.setChart(chart);
|
|
chart.setOption({
|
|
title: {
|
|
text: '',
|
|
left: 'left',
|
|
fontSize: 6
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
top: '5%',
|
|
left: '5%',
|
|
right: '7%',
|
|
bottom: '3%'
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
const param = params[0];
|
|
return `${param.axisValue}\n${param.seriesName}: ${param.value} kg`;
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.data.xAxis
|
|
},
|
|
yAxis: {
|
|
x: 'center',
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '实际体重',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: this.data.weightData
|
|
},
|
|
{
|
|
name: '标准上界',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
data: standardUpper,
|
|
lineStyle: {
|
|
opacity: 0
|
|
},
|
|
stack: '标准范围',
|
|
areaStyle: {
|
|
opacity: 0
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
},
|
|
{
|
|
name: '标准下界',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
data: standardLower,
|
|
lineStyle: {
|
|
opacity: 0
|
|
},
|
|
stack: '标准范围',
|
|
areaStyle: {
|
|
color: 'rgba(135,206,250,0.3)'
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
}
|
|
]
|
|
});
|
|
return chart;
|
|
});
|
|
}
|
|
},
|
|
// 初始化体直接胆红素趋势
|
|
initDirectChart() {
|
|
|
|
|
|
const chartComp = this.selectComponent('#mychart-dom-direct');
|
|
if (chartComp) {
|
|
chartComp.init((canvas, width, height, dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width,
|
|
height,
|
|
devicePixelRatio: dpr
|
|
});
|
|
canvas.setChart(chart);
|
|
chart.setOption({
|
|
title: {
|
|
text: '',
|
|
left: 'left',
|
|
fontSize: 6
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
top: '5%',
|
|
left: '5%',
|
|
right: '7%',
|
|
bottom: '3%'
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
const param = params[0];
|
|
return `${param.axisValue}\n${param.seriesName}: ${param.value} μmol/L`;
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.data.xAxis
|
|
},
|
|
yAxis: {
|
|
x: 'center',
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '总胆红素',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: this.data.totalBilirubin
|
|
},
|
|
|
|
]
|
|
});
|
|
this.directChart = chart;
|
|
return chart;
|
|
});
|
|
}
|
|
},
|
|
// 初始化体间接胆红素趋势
|
|
initIndirectChart() {
|
|
|
|
const chartComp = this.selectComponent('#mychart-dom-indirect');
|
|
if (chartComp) {
|
|
chartComp.init((canvas, width, height, dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width,
|
|
height,
|
|
devicePixelRatio: dpr
|
|
});
|
|
canvas.setChart(chart);
|
|
chart.setOption({
|
|
title: {
|
|
text: '',
|
|
left: 'left',
|
|
fontSize: 6
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
top: '5%',
|
|
left: '5%',
|
|
right: '7%',
|
|
bottom: '3%'
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
const param = params[0];
|
|
return `${param.axisValue}\n${param.seriesName}: ${param.value} μmol/L`;
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.data.xAxis
|
|
},
|
|
yAxis: {
|
|
x: 'center',
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '直接胆红素',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: this.data.directBilirubin
|
|
},
|
|
|
|
]
|
|
});
|
|
this.indirectChart = chart;
|
|
return chart;
|
|
});
|
|
}
|
|
},
|
|
}); |