You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
633 lines
16 KiB
633 lines
16 KiB
import dayjs from 'dayjs' |
|
|
|
const app = getApp<IAppOption>() |
|
let echarts: any = null |
|
|
|
Page({ |
|
data: { |
|
footerBtnShow: false, |
|
hormoneDetail: { recordId: '' }, |
|
qolDetail: {} as any, |
|
|
|
// 默认月度 |
|
type: '2', |
|
BeginMonth: '', |
|
EndMonth: '', |
|
|
|
fields: { |
|
2: 'month', |
|
3: 'year', |
|
}, |
|
|
|
list4Show: true, |
|
list5Show: true, |
|
list6Show: true, |
|
|
|
list: [], |
|
pagination: { |
|
page: 1, |
|
pages: 1, |
|
count: 1, |
|
}, |
|
}, |
|
chartComponent1: null as any, |
|
chartComponent2: null as any, |
|
chartComponent3: null as any, |
|
chartComponent4: null as any, |
|
chartComponent5: null as any, |
|
chartComponent6: null as any, |
|
async onLoad(options) { |
|
echarts = await require.async('../../../gift/compontnts/echart/echarts.js') |
|
this.chartComponent1 = this.selectComponent('#chart1') |
|
this.chartComponent2 = this.selectComponent('#chart2') |
|
this.chartComponent3 = this.selectComponent('#chart3') |
|
this.chartComponent4 = this.selectComponent('#chart4') |
|
this.chartComponent5 = this.selectComponent('#chart5') |
|
this.chartComponent6 = this.selectComponent('#chart6') |
|
|
|
app.waitLogin({ type: [1] }).then(() => { |
|
app.mpBehavior({ PageName: 'PG_QolReport' }) |
|
this.handleChangeType() |
|
this.getList() |
|
this.getQol() |
|
this.getHormone() |
|
if (options.scrollId) { |
|
this.scrollPoint(`#${options.scrollId}`) |
|
} |
|
}) |
|
}, |
|
getQol() { |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '?r=xd/qol/index', |
|
data: {}, |
|
}).then((res) => { |
|
this.setData({ |
|
qolDetail: { |
|
...res.newRecord, |
|
isTodayRecord: res.isTodayRecord, |
|
CreateDate: dayjs(res.newRecord.CreateTime).format('MM-DD'), |
|
}, |
|
}) |
|
}) |
|
}, |
|
getHormone() { |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '?r=xd/hormone-dosage/get-last-record', |
|
data: {}, |
|
}).then((res) => { |
|
this.setData({ |
|
hormoneDetail: { |
|
...res, |
|
createTime: dayjs(res.createTime).format('YYYY-MM-DD'), |
|
}, |
|
}) |
|
}) |
|
}, |
|
scrollPoint(id) { |
|
wx.createSelectorQuery() |
|
.select(id) |
|
.boundingClientRect((res) => { |
|
// 2.使用wx.getSysTemInfo()获取设备及页面高度windowHeight（px） |
|
wx.getSystemInfo({ |
|
success(ress) { |
|
wx.pageScrollTo({ |
|
// 3. 滚动的距离根据设备的页面高度进行微调（px） |
|
scrollTop: res.top - ress.windowHeight / 2 + 50, |
|
duration: 200, |
|
}) |
|
}, |
|
}) |
|
}) |
|
.exec() |
|
}, |
|
handleChangeType(e?: WechatMiniprogram.CustomEvent) { |
|
app.mpBehavior({ PageName: 'BTN_QolReportTab' }) |
|
let type = '' |
|
if (e) { |
|
// Tab 已移除"日"，现仅有"月度/年度" |
|
type = e.detail.index === 0 ? '2' : '3' |
|
} |
|
else { |
|
type = this.data.type |
|
} |
|
let EndMonth = '' |
|
let BeginMonth = '' |
|
if (type == '2') { |
|
EndMonth = dayjs().format('YYYY-MM') |
|
BeginMonth = dayjs().subtract(1, 'M').format('YYYY-MM') |
|
} |
|
else if (type == '3') { |
|
EndMonth = dayjs().format('YYYY') |
|
BeginMonth = dayjs().subtract(1, 'y').format('YYYY') |
|
} |
|
this.setData({ |
|
page: 0, |
|
type, |
|
Num: '5', |
|
EndMonth, |
|
BeginMonth, |
|
}) |
|
this.handleChange() |
|
}, |
|
handleChange() { |
|
this.setData({ |
|
list4Show: true, |
|
list5Show: true, |
|
list6Show: true, |
|
}) |
|
this.chartComponent4 = this.selectComponent('#chart4') |
|
this.chartComponent5 = this.selectComponent('#chart5') |
|
this.chartComponent6 = this.selectComponent('#chart6') |
|
this.getChatData() |
|
this.getHormoneData() |
|
}, |
|
getChatData() { |
|
const { type, BeginMonth, EndMonth } = this.data |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '?r=xd/qol/graph', |
|
data: { |
|
DateType: type, |
|
StartDate: BeginMonth, |
|
EndDate: EndMonth, |
|
count: 0, |
|
}, |
|
}).then((res) => { |
|
const list0: any[] = [] |
|
const list1: any[] = [] |
|
const list2: any[] = [] |
|
res.list.forEach((item: any) => { |
|
list0.push({ |
|
Date: item.Date, |
|
value: item.TotalScore, |
|
}) |
|
list1.push({ |
|
Date: item.Date, |
|
value: item.VisionScore, |
|
}) |
|
list2.push({ |
|
Date: item.Date, |
|
value: item.AppearanceScore, |
|
}) |
|
}) |
|
|
|
this.initChart(list0, 'chartComponent1') |
|
this.initChart(list1, 'chartComponent2') |
|
this.initChart(list2, 'chartComponent3') |
|
}) |
|
}, |
|
getHormoneData() { |
|
const { type, BeginMonth, EndMonth } = this.data |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '?r=xd/hormone-dosage/graph', |
|
data: { |
|
DateType: type, |
|
StartDate: BeginMonth, |
|
EndDate: EndMonth, |
|
count: 0, |
|
}, |
|
}).then((res) => { |
|
const list4: any[] = [] |
|
const list5: any[] = [] |
|
const list6: any[] = [] |
|
let list4Show = false |
|
let list5Show = false |
|
let list6Show = false |
|
res.forEach((item: any) => { |
|
if (item.dosage) { |
|
if (item.medicationMethod == 1) { |
|
list4Show = true |
|
} |
|
if (item.medicationMethod == 2) { |
|
list5Show = true |
|
} |
|
if (item.medicationMethod == 3) { |
|
list6Show = true |
|
} |
|
} |
|
list4.push({ |
|
Date: item.recordDate, |
|
value: item.medicationMethod == 1 ? item.dosage : '', |
|
}) |
|
list5.push({ |
|
Date: item.recordDate, |
|
value: item.medicationMethod == 2 ? item.dosage : '', |
|
}) |
|
list6.push({ |
|
Date: item.recordDate, |
|
value: item.medicationMethod == 3 ? item.dosage : '', |
|
}) |
|
}) |
|
this.setData({ |
|
list4Show, |
|
list5Show, |
|
list6Show, |
|
}) |
|
|
|
this.initChartHormone(list4, 'chartComponent4', '#1ec580') |
|
this.initChartHormone(list5, 'chartComponent5', '#B982FF') |
|
this.initChartHormone(list6, 'chartComponent6', '#FFA300') |
|
}) |
|
}, |
|
initChart(defaultList = [] as any[], key) { |
|
return new Promise((reslove) => { |
|
this[key].init((canvas, width, height, dpr) => { |
|
const chart = echarts.init(canvas, null, { |
|
width, |
|
height, |
|
devicePixelRatio: dpr, // new |
|
}) |
|
canvas.setChart(chart) |
|
|
|
const option: any = { |
|
tooltip: { |
|
show: false, |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow', |
|
}, |
|
confine: true, |
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
|
textStyle: { |
|
color: '#fff', |
|
fontSize: 10, |
|
}, |
|
order: 'seriesDesc', |
|
}, |
|
grid: { |
|
top: '30', |
|
left: '0', |
|
right: '0', |
|
bottom: '10', |
|
containLabel: true, |
|
}, |
|
xAxis: [ |
|
{ |
|
type: 'category', |
|
axisTick: { |
|
show: false, |
|
inside: true, |
|
length: 1, |
|
alignWithLabel: true, |
|
lineStyle: { |
|
type: 'dotted', |
|
color: '#D8D8D8', |
|
width: 4, |
|
cap: 'round', |
|
}, |
|
}, |
|
axisLine: { |
|
lineStyle: { |
|
color: '#8C8C8C', |
|
type: 'dashed', |
|
}, |
|
}, |
|
splitLine: { |
|
show: true, |
|
showMinLine: false, |
|
lineStyle: { |
|
type: 'dotted', |
|
color: 'rgba(137, 141, 151, 0.23)', |
|
}, |
|
}, |
|
data: defaultList.map(item => dayjs(item.Date).format('MM-DD')), |
|
}, |
|
], |
|
yAxis: [ |
|
{ |
|
type: 'value', |
|
minInterval: 20, |
|
max: 100, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
type: 'solid', |
|
color: 'rgba(161, 164, 172, 1)', |
|
}, |
|
}, |
|
splitLine: { |
|
show: true, |
|
showMinLine: false, |
|
lineStyle: { |
|
type: 'dotted', |
|
color: 'rgba(137, 141, 151, 0.23)', |
|
}, |
|
}, |
|
}, |
|
], |
|
series: [ |
|
{ |
|
name: '总分', |
|
data: defaultList.length ? defaultList.map(item => item.value) : [25], |
|
barWidth: '16', |
|
label: { |
|
show: true, |
|
position: 'top', |
|
color: '#B982FF', |
|
fontSize: 14, |
|
}, |
|
type: 'line', |
|
symbolSize: 4, |
|
showSymbol: defaultList.length >= 1, |
|
connectNulls: true, |
|
z: 10, |
|
itemStyle: { |
|
color: '#B982FF', |
|
}, |
|
markLine: { |
|
symbol: ['none', 'none'], |
|
data: [ |
|
{ |
|
name: '达标区', |
|
yAxis: 80, |
|
label: { |
|
formatter: '{b}', |
|
position: 'insideMiddle', |
|
color: '#24D8C8', |
|
fontSize: '10', |
|
}, |
|
lineStyle: { |
|
cap: '', |
|
color: '#34D7C7', |
|
type: 'dashed', |
|
}, |
|
}, |
|
], |
|
}, |
|
markArea: { |
|
itemStyle: { |
|
color: 'rgba(37,217,200,0.19)', |
|
}, |
|
data: [ |
|
[ |
|
{ |
|
yAxis: 80, |
|
}, |
|
{ |
|
yAxis: 100, |
|
}, |
|
], |
|
], |
|
}, |
|
}, |
|
], |
|
dataZoom: { |
|
type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。 |
|
startValue: 0, |
|
endValue: 4, |
|
filterMode: 'none', |
|
}, |
|
} |
|
|
|
chart.setOption(option) |
|
reslove(chart) |
|
return chart |
|
}) |
|
}) |
|
}, |
|
initChartHormone(defaultList = [] as any[], key, color) { |
|
return new Promise((reslove) => { |
|
this[key].init((canvas, width, height, dpr) => { |
|
const chart = echarts.init(canvas, null, { |
|
width, |
|
height, |
|
devicePixelRatio: dpr, // new |
|
}) |
|
canvas.setChart(chart) |
|
|
|
const option: any = { |
|
tooltip: { |
|
show: false, |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow', |
|
}, |
|
confine: true, |
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
|
textStyle: { |
|
color: '#fff', |
|
fontSize: 10, |
|
}, |
|
order: 'seriesDesc', |
|
}, |
|
grid: { |
|
top: '30', |
|
left: '0', |
|
right: '0', |
|
bottom: '10', |
|
containLabel: true, |
|
}, |
|
xAxis: [ |
|
{ |
|
type: 'category', |
|
axisTick: { |
|
show: false, |
|
inside: true, |
|
length: 1, |
|
alignWithLabel: true, |
|
lineStyle: { |
|
type: 'dotted', |
|
color: '#D8D8D8', |
|
width: 4, |
|
cap: 'round', |
|
}, |
|
}, |
|
axisLine: { |
|
lineStyle: { |
|
color: '#8C8C8C', |
|
type: 'dashed', |
|
}, |
|
}, |
|
splitLine: { |
|
show: true, |
|
showMinLine: false, |
|
lineStyle: { |
|
type: 'dotted', |
|
color: 'rgba(137, 141, 151, 0.23)', |
|
}, |
|
}, |
|
data: defaultList.map(item => dayjs(item.Date).format('MM-DD')), |
|
}, |
|
], |
|
yAxis: [ |
|
{ |
|
type: 'value', |
|
minInterval: 20, |
|
min: 0, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
type: 'solid', |
|
color: 'rgba(161, 164, 172, 1)', |
|
}, |
|
}, |
|
splitLine: { |
|
show: true, |
|
showMinLine: false, |
|
lineStyle: { |
|
type: 'dotted', |
|
color: 'rgba(137, 141, 151, 0.23)', |
|
}, |
|
}, |
|
}, |
|
], |
|
series: [ |
|
{ |
|
name: '总分', |
|
data: defaultList.length ? defaultList.map(item => item.value) : [25], |
|
barWidth: '16', |
|
label: { |
|
show: true, |
|
position: 'top', |
|
color, |
|
fontSize: 14, |
|
}, |
|
type: 'line', |
|
symbolSize: 4, |
|
showSymbol: defaultList.length >= 1, |
|
connectNulls: true, |
|
z: 10, |
|
itemStyle: { |
|
color, |
|
}, |
|
}, |
|
], |
|
dataZoom: { |
|
type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。 |
|
startValue: 0, |
|
endValue: 4, |
|
filterMode: 'none', |
|
}, |
|
} |
|
|
|
chart.setOption(option) |
|
reslove(chart) |
|
return chart |
|
}) |
|
}) |
|
}, |
|
getList(newPage = 1) { |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '?r=xd/qol/list', |
|
data: { |
|
page: newPage, |
|
}, |
|
}).then((res) => { |
|
const list = res.page == 1 ? res.list : [...this.data.list, ...res.list] |
|
this.setData({ |
|
list, |
|
pagination: { |
|
page: res.page, |
|
pages: res.pages, |
|
count: res.count, |
|
}, |
|
}) |
|
}) |
|
}, |
|
onReachBottom() { |
|
const { page, pages } = this.data.pagination |
|
if (pages > page) { |
|
this.getList(page + 1) |
|
} |
|
}, |
|
handleDelete(e) { |
|
app.mpBehavior({ PageName: 'BTN_QolReportDelete' }) |
|
const { id, index } = e.currentTarget.dataset |
|
const { list } = this.data |
|
wx.showModal({ |
|
title: '确认删除吗？', |
|
confirmColor: '#8c75d0', |
|
success: (res) => { |
|
if (res.confirm) { |
|
wx.ajax({ |
|
method: 'POST', |
|
url: '?r=xd/qol/delete', |
|
data: { |
|
Id: id, |
|
}, |
|
}).then(() => { |
|
this.setData({ |
|
list: list.filter((_item, i) => i !== index), |
|
}) |
|
}) |
|
} |
|
}, |
|
}) |
|
}, |
|
handleDetail(e) { |
|
app.mpBehavior({ PageName: 'BTN_QolReportListItem' }) |
|
const { id, edit } = e.currentTarget.dataset |
|
wx.navigateTo({ |
|
url: `/patient/pages/qolAdd/index?id=${id}&edit=${edit ? 1 : 0}`, |
|
}) |
|
}, |
|
handleQol() { |
|
app.mpBehavior({ PageName: 'BTN_QolReportAdd' }) |
|
this.handleHideFooterBtn() |
|
const { qolDetail } = this.data |
|
const url |
|
= qolDetail.Id && qolDetail.isTodayRecord |
|
? `/patient/pages/qolAdd/index?id=${qolDetail.Id}&edit=1` |
|
: `/patient/pages/qol/index` |
|
wx.redirectTo({ |
|
url, |
|
success() { |
|
if (qolDetail.isTodayRecord) { |
|
wx.showToast({ |
|
icon: 'none', |
|
title: '每日仅录入1次，您可修改选项', |
|
}) |
|
} |
|
}, |
|
}) |
|
}, |
|
handleHormoneDetail(e) { |
|
const { index } = e.currentTarget.dataset |
|
const { list } = this.data |
|
const form: any = list[index] |
|
wx.navigateTo({ |
|
url: `/patient/pages/hormonesResult/index?medicationMethod=${form.medicationMethod}&oralMonth=${form.oralMonthName}&injectionWeek=${form.injectionWeek}&injectionTimes=${form.injectionTimes}&dosage=${form.dosage}&report=1`, |
|
}) |
|
}, |
|
handleFooterBtn() { |
|
this.setData({ |
|
footerBtnShow: true, |
|
}) |
|
}, |
|
handleHideFooterBtn() { |
|
this.setData({ |
|
footerBtnShow: false, |
|
}) |
|
}, |
|
handleHormones() { |
|
app.mpBehavior({ PageName: 'BTN_QolReportHormone' }) |
|
const hormoneDetail = this.data.hormoneDetail |
|
this.handleHideFooterBtn() |
|
const url = hormoneDetail.recordId |
|
? `/patient/pages/hormones/index?id=${hormoneDetail.recordId}` |
|
: '/patient/pages/hormonesStart/index' |
|
wx.navigateTo({ |
|
url, |
|
}) |
|
}, |
|
handleHome() { |
|
wx.reLaunch({ |
|
url: '/patient/pages/index/index', |
|
}) |
|
}, |
|
handleBack() { |
|
wx.navigateBack({ |
|
fail() { |
|
wx.reLaunch({ |
|
url: '/patient/pages/index/index', |
|
}) |
|
}, |
|
}) |
|
}, |
|
}) |
|
|
|
export {}
|
|
|