335 lines
9.6 KiB
JavaScript
335 lines
9.6 KiB
JavaScript
import * as echarts from '../../ec-canvas/echarts.min';
|
|
import request from '~/api/request';
|
|
import { heightList, weightList } from '../../assets/js/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: [],
|
|
heightChart: null,
|
|
weightChart: null,
|
|
carList: [],
|
|
carLength: 0,
|
|
userInfo: {},
|
|
totalBilirubin: [],
|
|
directBilirubin: []
|
|
},
|
|
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);
|
|
console.log(info)
|
|
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 = []
|
|
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.directBilirubin)
|
|
})
|
|
}
|
|
|
|
this.setData({
|
|
heightData,
|
|
weightData,
|
|
totalBilirubin,
|
|
directBilirubin
|
|
});
|
|
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;
|
|
}
|
|
},
|
|
|
|
// 初始化身高图表
|
|
initHeightChart() {
|
|
const standardHeight = this.standardHeight;
|
|
const standardLower = standardHeight.map(item => item[0]);
|
|
const standardUpper = standardHeight.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: '1%', right: '5%', 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: ['出生', '1月', '2月', '3月', '4月', '5月', '6月'] },
|
|
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: standardLower,
|
|
lineStyle: { opacity: 0 },
|
|
stack: '标准范围',
|
|
areaStyle: { opacity: 0 },
|
|
tooltip: { show: false }
|
|
},
|
|
{
|
|
name: '标准范围',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
data: standardRange,
|
|
lineStyle: { opacity: 0 },
|
|
stack: '标准范围',
|
|
areaStyle: { color: 'rgba(135,206,250,0.3)' },
|
|
tooltip: { show: false }
|
|
}
|
|
]
|
|
});
|
|
return chart;
|
|
});
|
|
}
|
|
},
|
|
|
|
// 初始化体重图表
|
|
initWeightChart() {
|
|
const standardWeight = this.standardWeight;
|
|
const standardLower = standardWeight.map(item => item[0]);
|
|
const standardUpper = standardWeight.map(item => item[1]);
|
|
const standardRange = standardUpper.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: '1%', right: '5%', 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: ['出生', '1月', '2月', '3月', '4月', '5月', '6月'] },
|
|
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: standardLower,
|
|
lineStyle: { opacity: 0 },
|
|
stack: '标准范围',
|
|
areaStyle: { opacity: 0 },
|
|
tooltip: { show: false }
|
|
},
|
|
{
|
|
name: '标准范围',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
data: standardRange,
|
|
lineStyle: { opacity: 0 },
|
|
stack: '标准范围',
|
|
areaStyle: { color: 'rgba(135,206,250,0.3)' },
|
|
tooltip: { show: false }
|
|
}
|
|
]
|
|
});
|
|
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: '1%', right: '5%', 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: ['出生', '1月', '2月', '3月', '4月', '5月', '6月'] },
|
|
yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
|
|
series: [
|
|
{
|
|
name: '总胆红素',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: this.data.totalBilirubin
|
|
},
|
|
|
|
]
|
|
});
|
|
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: '1%', right: '5%', 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: ['出生', '1月', '2月', '3月', '4月', '5月', '6月'] },
|
|
yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
|
|
series: [
|
|
{
|
|
name: '直接胆红素',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: this.data.directBilirubin
|
|
},
|
|
|
|
]
|
|
});
|
|
return chart;
|
|
});
|
|
}
|
|
},
|
|
}); |