483 lines
12 KiB
JavaScript
483 lines
12 KiB
JavaScript
import * as echarts from '../../ec-canvas/echarts.min';
|
|
import request from '~/api/request';
|
|
const app = getApp();
|
|
|
|
function initChart(canvas, width, height, dpr) {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr
|
|
});
|
|
canvas.setChart(chart);
|
|
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
left: 'left',
|
|
fontSize: 6
|
|
},
|
|
legend: {
|
|
data: ['实际身高', '标准范围'],
|
|
bottom: 0,
|
|
left: 'center',
|
|
z: 100
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
top: '5%',
|
|
left: '1%',
|
|
right: '5%',
|
|
bottom: '10%'
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['出生', '1月', '2月', '3月', '4月', '5月'],
|
|
},
|
|
yAxis: {
|
|
x: 'center',
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '实际身高',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: []
|
|
}, {
|
|
name: '标准范围',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [120, 130, 140, 150, 160, 170]
|
|
}]
|
|
};
|
|
|
|
chart.setOption(option);
|
|
return chart;
|
|
}
|
|
|
|
function initChart2(canvas, width, height, dpr) {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr
|
|
});
|
|
canvas.setChart(chart);
|
|
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
left: 'left',
|
|
fontSize: 12
|
|
},
|
|
legend: {
|
|
data: ['实际体重', '标准范围'],
|
|
bottom: 0,
|
|
left: 'center',
|
|
z: 100
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
top: '5%',
|
|
left: '1%',
|
|
right: '5%',
|
|
bottom: '10%'
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['出生', '1月', '2月', '3月', '4月', '5月'],
|
|
},
|
|
yAxis: {
|
|
x: 'center',
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '实际体重',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: []
|
|
}, {
|
|
name: '标准范围',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [120, 130, 140, 150, 160, 170]
|
|
}]
|
|
};
|
|
|
|
chart.setOption(option);
|
|
return chart;
|
|
}
|
|
|
|
Page({
|
|
onShareAppMessage: function (res) {
|
|
return {
|
|
title: 'ECharts 可以在微信小程序中使用啦！',
|
|
path: '/pages/index/index',
|
|
success: function () { },
|
|
fail: function () { }
|
|
}
|
|
},
|
|
data: {
|
|
ec: {
|
|
lazyLoad: true
|
|
},
|
|
ec2: {
|
|
lazyLoad: true
|
|
},
|
|
activeIndex: 0,
|
|
sfData:{},
|
|
sfListLength: 0,
|
|
articles:[],
|
|
articlesLength: 0,
|
|
heightData: [],
|
|
weightData: [],
|
|
heightChart: null,
|
|
weightChart: null
|
|
},
|
|
|
|
// Helper function to strip HTML tags and convert to plain text
|
|
stripHtml(html) {
|
|
if (!html) return '';
|
|
return html.replace(/<[^>]*>/g, '');
|
|
},
|
|
|
|
async getSfList(){
|
|
const res = await request('patient/follow_plans', 'get', {
|
|
page: 1,
|
|
page_size: 10,
|
|
type: 1
|
|
})
|
|
|
|
// Calculate days between today and plan_date
|
|
const today = new Date()
|
|
const planDate = new Date(res.list[0].plan_date)
|
|
const diffTime = planDate - today
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
|
|
|
this.setData({
|
|
sfListLength: res.total,
|
|
sfData: {
|
|
...res.list[0],
|
|
daysUntilPlan: diffDays
|
|
}
|
|
})
|
|
|
|
const res2 = await request('patient/articles', 'get', { title: '', page: 1, page_size: 2 });
|
|
// Convert rich text content to plain text
|
|
const plainTextContent = this.stripHtml(res2.list[0].content);
|
|
const articleList = res2.list.map(item => {
|
|
return {
|
|
...item,
|
|
contentText: this.stripHtml(item.content)
|
|
}
|
|
})
|
|
this.setData({
|
|
articlesLength: res2.total,
|
|
articles: articleList
|
|
})
|
|
},
|
|
|
|
async getChartData(){
|
|
const res = await request('patient/chat/0', 'get')
|
|
const heightData = []
|
|
const weightData = []
|
|
|
|
if(res.list.length > 0){
|
|
res.list.forEach(item => {
|
|
heightData.push(item.height)
|
|
weightData.push(item.weight)
|
|
})
|
|
}
|
|
|
|
this.setData({
|
|
heightData,
|
|
weightData
|
|
}, () => {
|
|
this.initCharts();
|
|
});
|
|
},
|
|
|
|
initCharts() {
|
|
// 初始化身高图表
|
|
if (!this.heightChart) {
|
|
const chart1 = this.selectComponent('#mychart-dom-height');
|
|
if (chart1) {
|
|
chart1.init((canvas, width, height, dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr
|
|
});
|
|
canvas.setChart(chart);
|
|
|
|
const option = {
|
|
title: {
|
|
text: '',
|
|
left: 'left',
|
|
fontSize: 6
|
|
},
|
|
legend: {
|
|
data: ['实际身高', '标准范围'],
|
|
bottom: 0,
|
|
left: 'center',
|
|
z: 100
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
top: '5%',
|
|
left: '1%',
|
|
right: '5%',
|
|
bottom: '10%'
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['出生', '1月', '2月', '3月', '4月', '5月'],
|
|
},
|
|
yAxis: {
|
|
x: 'center',
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '实际身高',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: this.data.heightData
|
|
}, {
|
|
name: '标准范围',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [120, 130, 140, 150, 160, 170]
|
|
}]
|
|
};
|
|
|
|
chart.setOption(option);
|
|
this.heightChart = chart;
|
|
return chart;
|
|
});
|
|
}
|
|
}
|
|
|
|
// 初始化体重图表
|
|
if (!this.weightChart) {
|
|
const chart2 = this.selectComponent('#mychart-dom-weight');
|
|
if (chart2) {
|
|
chart2.init((canvas, width, height, dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr
|
|
});
|
|
canvas.setChart(chart);
|
|
|
|
const option = {
|
|
title: {
|
|
text: '',
|
|
left: 'left',
|
|
fontSize: 12
|
|
},
|
|
legend: {
|
|
data: ['实际体重', '标准范围'],
|
|
bottom: 0,
|
|
left: 'center',
|
|
z: 100
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
top: '5%',
|
|
left: '1%',
|
|
right: '5%',
|
|
bottom: '10%'
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['出生', '1月', '2月', '3月', '4月', '5月'],
|
|
},
|
|
yAxis: {
|
|
x: 'center',
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '实际体重',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: this.data.weightData
|
|
}, {
|
|
name: '标准范围',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [120, 130, 140, 150, 160, 170]
|
|
}]
|
|
};
|
|
|
|
chart.setOption(option);
|
|
this.weightChart = chart;
|
|
return chart;
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
onLoad(){
|
|
this.getSfList()
|
|
setTimeout(() => {
|
|
this.getChartData().then(() => {
|
|
if (this.data.activeIndex === 0) {
|
|
this.initHeightChart();
|
|
} else {
|
|
this.initWeightChart();
|
|
}
|
|
});
|
|
}, 500);
|
|
},
|
|
|
|
onReady() {
|
|
// setTimeout(() => {
|
|
// this.getChartData().then(() => {
|
|
// if (this.data.activeIndex === 0) {
|
|
// this.initHeightChart();
|
|
// } else {
|
|
// this.initWeightChart();
|
|
// }
|
|
// });
|
|
// }, 500);
|
|
},
|
|
|
|
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);
|
|
});
|
|
},
|
|
|
|
toClockIn(){
|
|
wx.navigateTo({
|
|
url: '/pages/clockIn/index',
|
|
})
|
|
},
|
|
toEmergency(){
|
|
wx.navigateTo({
|
|
url: '/pages/emergency/index',
|
|
})
|
|
},
|
|
toArticle(){
|
|
wx.navigateTo({
|
|
url: '/pages/articleList/index',
|
|
})
|
|
},
|
|
async toArticleDelit(e){
|
|
const index = e.currentTarget.dataset.index;
|
|
await wx.setStorageSync('article',JSON.stringify(this.data.articles[index]));
|
|
wx.navigateTo({
|
|
url: '/pages/article/index',
|
|
})
|
|
},
|
|
|
|
onUnload() {
|
|
// 页面卸载时销毁图表实例
|
|
if (this.heightChart) {
|
|
this.heightChart.dispose();
|
|
this.heightChart = null;
|
|
}
|
|
if (this.weightChart) {
|
|
this.weightChart.dispose();
|
|
this.weightChart = null;
|
|
}
|
|
},
|
|
|
|
// 初始化身高图表
|
|
initHeightChart() {
|
|
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 },
|
|
legend: { data: ['实际身高', '标准范围'], bottom: 0, left: 'center', z: 100 },
|
|
grid: { containLabel: true, top: '5%', left: '1%', right: '5%', bottom: '10%' },
|
|
tooltip: { show: true, trigger: 'axis' },
|
|
xAxis: { type: 'category', boundaryGap: false, data: ['出生', '1月', '2月', '3月', '4月', '5月'] },
|
|
yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
|
|
series: [
|
|
{ name: '实际身高', type: 'line', smooth: true, data: this.data.heightData },
|
|
{ name: '标准范围', type: 'line', smooth: true, data: [120, 130, 140, 150, 160, 170] }
|
|
]
|
|
});
|
|
return chart;
|
|
});
|
|
}
|
|
},
|
|
|
|
// 初始化体重图表
|
|
initWeightChart() {
|
|
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: 12 },
|
|
legend: { data: ['实际体重', '标准范围'], bottom: 0, left: 'center', z: 100 },
|
|
grid: { containLabel: true, top: '5%', left: '1%', right: '5%', bottom: '10%' },
|
|
tooltip: { show: true, trigger: 'axis' },
|
|
xAxis: { type: 'category', boundaryGap: false, data: ['出生', '1月', '2月', '3月', '4月', '5月'] },
|
|
yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
|
|
series: [
|
|
{ name: '实际体重', type: 'line', smooth: true, data: this.data.weightData },
|
|
{ name: '标准范围', type: 'line', smooth: true, data: [120, 130, 140, 150, 160, 170] }
|
|
]
|
|
});
|
|
return chart;
|
|
});
|
|
}
|
|
},
|
|
}); |