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.
900 lines
26 KiB
900 lines
26 KiB
const echarts = require('../../../components/ec-canvas/echarts.js') |
|
|
|
Page({ |
|
data: { |
|
fold1: true, |
|
fold2: true, |
|
|
|
// 用户信息 |
|
promoterName: '', |
|
promoterAvatar: '', |
|
label: '邀约专员', |
|
|
|
// 累计统计数据（来自 getStatistics） |
|
totalInvitePharmacyCount: 0, |
|
totalInvitePharmacistCount: 0, |
|
totalInvitePatientCount: 0, |
|
totalJumpPatientCount: 0, |
|
totalEnrollPatientCount: 0, |
|
totalIndicationStats: [] as Array<{ |
|
indicationId: number |
|
indicationName: string |
|
invitePatientCount: number |
|
jumpPatientCount: number |
|
enrollPatientCount: number |
|
}>, |
|
|
|
// 日期筛选统计数据（来自 getPatientStatistics） |
|
invitePatientCount: 0, |
|
jumpPatientCount: 0, |
|
enrollPatientCount: 0, |
|
indicationStats: [] as Array<{ |
|
indicationId: number |
|
indicationName: string |
|
invitePatientCount: number |
|
jumpPatientCount: number |
|
enrollPatientCount: number |
|
}>, |
|
|
|
// 图表数据 |
|
chartData: [] as Array<{ date: string, count: number }>, |
|
pharmacistChartData: [] as Array<{ date: string, count: number }>, |
|
pharmacyChartData: [] as Array<{ date: string, count: number }>, |
|
|
|
// 日期范围 - 邀约患者统计卡片（单日） |
|
startDate: '', |
|
today: '', |
|
// 统计卡片显示用的月份（YYYY-MM） |
|
startMonth: '', |
|
|
|
// 日期范围 - 图表1（邀约患者统计） |
|
chart1StartDate: '', |
|
chart1EndDate: '', |
|
// 图表1显示用的月份（YYYY-MM） |
|
chart1StartMonth: '', |
|
chart1EndMonth: '', |
|
|
|
// 日期范围 - 图表2（邀约药师统计） |
|
chart2StartDate: '', |
|
chart2EndDate: '', |
|
// 图表2显示用的月份（YYYY-MM） |
|
chart2StartMonth: '', |
|
chart2EndMonth: '', |
|
|
|
// 日期范围 - 图表3（邀约药店统计） |
|
chart3StartDate: '', |
|
chart3EndDate: '', |
|
// 图表3显示用的月份（YYYY-MM） |
|
chart3StartMonth: '', |
|
chart3EndMonth: '', |
|
|
|
// 统计类型: day-日统计, month-月统计 |
|
statType: 'day', |
|
|
|
// 项目列表 |
|
projectList: [] as Array<{ projectId: number; projectName: string; projectDescription: string }>, |
|
currentProjectId: 0, |
|
currentProjectName: '特诺雅', |
|
projectIndex: 0, |
|
}, |
|
|
|
ecDataTrendComponent1_1: null as any, |
|
ecDataTrendComponent2_1: null as any, |
|
ecDataTrendComponent3_1: null as any, |
|
|
|
async onLoad() { |
|
const app = getApp<IAppOption>() |
|
// 地推端页面，仅允许地推人员(3)访问 |
|
app.waitLogin({ types: [3] }).then(() => { |
|
this.getUserInfo() |
|
this.getProjectList() |
|
}) |
|
|
|
// 初始化日期 |
|
const today = this.formatDate(new Date()) |
|
const currentMonth = this.formatMonth(new Date()) |
|
const defaultStartDate = this.formatDate(new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)) |
|
const defaultStartMonth = this.formatMonth(new Date(Date.now() - 365 * 24 * 60 * 60 * 1000)) |
|
this.setData({ |
|
today, |
|
// 邀约患者统计卡片（单日）- 默认为今天 |
|
startDate: today, |
|
startMonth: currentMonth, |
|
// 图表1-3（日期范围）- 默认为最近30天 |
|
chart1StartDate: defaultStartDate, |
|
chart1EndDate: today, |
|
chart1StartMonth: defaultStartMonth, |
|
chart1EndMonth: currentMonth, |
|
chart2StartDate: defaultStartDate, |
|
chart2EndDate: today, |
|
chart2StartMonth: defaultStartMonth, |
|
chart2EndMonth: currentMonth, |
|
chart3StartDate: defaultStartDate, |
|
chart3EndDate: today, |
|
chart3StartMonth: defaultStartMonth, |
|
chart3EndMonth: currentMonth, |
|
}) |
|
}, |
|
|
|
// 格式化日期 |
|
formatDate(date: Date): string { |
|
const year = date.getFullYear() |
|
const month = String(date.getMonth() + 1).padStart(2, '0') |
|
const day = String(date.getDate()).padStart(2, '0') |
|
return `${year}-${month}-${day}` |
|
}, |
|
|
|
// 格式化月份（YYYY-MM） |
|
formatMonth(date: Date): string { |
|
const year = date.getFullYear() |
|
const month = String(date.getMonth() + 1).padStart(2, '0') |
|
return `${year}-${month}` |
|
}, |
|
|
|
// 获取个人信息 |
|
getUserInfo() { |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '/app/promoter/promoter/profile', |
|
}).then((res: any) => { |
|
this.setData({ |
|
promoterName: res.name, |
|
promoterAvatar: res.avatar, |
|
}) |
|
}) |
|
}, |
|
|
|
// 获取项目列表 |
|
getProjectList() { |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '/app/promoter/promoter/project-list', |
|
}).then((res: any) => { |
|
const projectList = res.list || [] |
|
const currentProjectId = res.currentProjectId || (projectList[0]?.projectId || 0) |
|
const currentProject = projectList.find((item: any) => item.projectId === currentProjectId) || projectList[0] |
|
const projectIndex = projectList.findIndex((item: any) => item.projectId === currentProjectId) |
|
|
|
this.setData({ |
|
projectList, |
|
currentProjectId, |
|
currentProjectName: currentProject?.projectName || '特诺雅', |
|
projectIndex: projectIndex >= 0 ? projectIndex : 0, |
|
}) |
|
|
|
// 获取统计数据 |
|
this.getStatistics() |
|
this.getPatientStatistics() |
|
this.getPatientChart() |
|
this.getPharmacistChart() |
|
this.getPharmacyChart() |
|
}) |
|
}, |
|
|
|
// 切换项目 |
|
onProjectChange(e: WechatMiniprogram.CustomEvent) { |
|
const index = e.detail.value |
|
const project = this.data.projectList[index] |
|
if (project && project.projectId !== this.data.currentProjectId) { |
|
// 先调用切换项目接口 |
|
wx.ajax({ |
|
method: 'POST', |
|
url: '/app/promoter/promoter/switch-project', |
|
data: { |
|
projectId: project.projectId, |
|
}, |
|
}).then(() => { |
|
// 切换成功后更新页面数据 |
|
this.setData({ |
|
currentProjectId: project.projectId, |
|
currentProjectName: project.projectName, |
|
projectIndex: index, |
|
}) |
|
// 重新加载数据 |
|
this.getStatistics() |
|
this.getPatientStatistics() |
|
this.getPatientChart() |
|
this.getPharmacistChart() |
|
this.getPharmacyChart() |
|
wx.showToast({ |
|
title: '切换成功', |
|
icon: 'success', |
|
}) |
|
}).catch(() => { |
|
wx.showToast({ |
|
title: '切换失败', |
|
icon: 'none', |
|
}) |
|
}) |
|
} |
|
}, |
|
|
|
// 获取统计数据看板（累计数据） |
|
getStatistics() { |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '/app/promoter/promoter/statistics', |
|
}).then((res: any) => { |
|
this.setData({ |
|
// 累计数据 |
|
totalInvitePharmacyCount: res.invitePharmacyCount || 0, |
|
totalInvitePharmacistCount: res.invitePharmacistCount || 0, |
|
totalInvitePatientCount: res.invitePatientCount || 0, |
|
totalJumpPatientCount: res.jumpPatientCount || 0, |
|
totalEnrollPatientCount: res.enrollPatientCount || 0, |
|
totalIndicationStats: res.indicationStats || [], |
|
}) |
|
}) |
|
}, |
|
|
|
// 获取日/月度邀约患者统计数据（按日期筛选） |
|
getPatientStatistics() { |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '/app/promoter/promoter/patient-statistics', |
|
data: { |
|
statDate: this.data.startDate, |
|
type: this.data.statType, |
|
}, |
|
}).then((res: any) => { |
|
this.setData({ |
|
invitePatientCount: res.invitePatientCount || 0, |
|
jumpPatientCount: res.jumpPatientCount || 0, |
|
enrollPatientCount: res.enrollPatientCount || 0, |
|
indicationStats: res.indicationStats || [], |
|
}) |
|
}) |
|
}, |
|
|
|
// 获取邀约患者统计图表（使用 chart1 的日期） |
|
getPatientChart() { |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '/app/promoter/promoter/patient-chart', |
|
data: { |
|
type: this.data.statType, |
|
startDate: this.data.chart1StartDate, |
|
endDate: this.data.chart1EndDate, |
|
}, |
|
}).then((list: any) => { |
|
// 新接口返回的数据格式包含 invitePatientCount, jumpPatientCount, enrollPatientCount, indicationStats |
|
// 转换为图表需要的格式 |
|
const chartData = (list || []).map((item: any) => ({ |
|
date: item.statDate, |
|
inviteCount: item.invitePatientCount || 0, |
|
jumpCount: item.jumpPatientCount || 0, |
|
enrollCount: item.enrollPatientCount || 0, |
|
})) |
|
this.setData({ |
|
chartData, |
|
}) |
|
this.initChartBar(chartData) |
|
}) |
|
}, |
|
|
|
// 获取邀约药师统计图表（使用 chart2 的日期） |
|
getPharmacistChart() { |
|
const data: any = { |
|
type: this.data.statType, |
|
startDate: this.data.chart2StartDate, |
|
endDate: this.data.chart2EndDate, |
|
} |
|
if (this.data.currentProjectId) { |
|
data.projectId = this.data.currentProjectId |
|
} |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '/app/promoter/promoter/pharmacist-chart', |
|
data, |
|
}).then((list: any) => { |
|
this.setData({ |
|
pharmacistChartData: list || [], |
|
}) |
|
this.initChartLine(list || [], '#chart2_1', 'ecDataTrendComponent2_1') |
|
}) |
|
}, |
|
|
|
// 获取邀约药店统计图表（使用 chart3 的日期） |
|
getPharmacyChart() { |
|
const data: any = { |
|
type: this.data.statType, |
|
startDate: this.data.chart3StartDate, |
|
endDate: this.data.chart3EndDate, |
|
} |
|
if (this.data.currentProjectId) { |
|
data.projectId = this.data.currentProjectId |
|
} |
|
wx.ajax({ |
|
method: 'GET', |
|
url: '/app/promoter/promoter/pharmacy-chart', |
|
data, |
|
}).then((list: any) => { |
|
this.setData({ |
|
pharmacyChartData: list || [], |
|
}) |
|
this.initChartLine(list || [], '#chart3_1', 'ecDataTrendComponent3_1') |
|
}) |
|
}, |
|
|
|
// 切换统计类型 |
|
switchStatType(e: WechatMiniprogram.CustomEvent) { |
|
const type = e.currentTarget.dataset.type |
|
const isMonth = type === 'month' |
|
|
|
// 根据统计类型重置日期范围 |
|
let startDate = this.data.startDate |
|
let startMonth = this.data.startMonth |
|
let chart1StartDate = this.data.chart1StartDate |
|
let chart1EndDate = this.data.chart1EndDate |
|
let chart1StartMonth = this.data.chart1StartMonth |
|
let chart1EndMonth = this.data.chart1EndMonth |
|
let chart2StartDate = this.data.chart2StartDate |
|
let chart2EndDate = this.data.chart2EndDate |
|
let chart2StartMonth = this.data.chart2StartMonth |
|
let chart2EndMonth = this.data.chart2EndMonth |
|
let chart3StartDate = this.data.chart3StartDate |
|
let chart3EndDate = this.data.chart3EndDate |
|
let chart3StartMonth = this.data.chart3StartMonth |
|
let chart3EndMonth = this.data.chart3EndMonth |
|
|
|
if (isMonth) { |
|
// 切换到月统计，设置默认月份 |
|
startMonth = this.formatMonth(new Date()) |
|
startDate = `${startMonth}-01` |
|
// 图表月份范围为最近12个月 |
|
const currentMonth = this.formatMonth(new Date()) |
|
const defaultStartMonth = this.formatMonth(new Date(Date.now() - 365 * 24 * 60 * 60 * 1000)) |
|
chart1StartMonth = defaultStartMonth |
|
chart1EndMonth = currentMonth |
|
chart1StartDate = `${chart1StartMonth}-01` |
|
chart1EndDate = `${chart1EndMonth}-01` |
|
chart2StartMonth = defaultStartMonth |
|
chart2EndMonth = currentMonth |
|
chart2StartDate = `${chart2StartMonth}-01` |
|
chart2EndDate = `${chart2EndMonth}-01` |
|
chart3StartMonth = defaultStartMonth |
|
chart3EndMonth = currentMonth |
|
chart3StartDate = `${chart3StartMonth}-01` |
|
chart3EndDate = `${chart3EndMonth}-01` |
|
} else { |
|
// 切换到日统计，设置默认日期为今天 |
|
startDate = this.formatDate(new Date()) |
|
startMonth = startDate.substring(0, 7) |
|
// 图表日期范围为最近30天 |
|
const today = this.formatDate(new Date()) |
|
const defaultStartDate = this.formatDate(new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)) |
|
chart1StartDate = defaultStartDate |
|
chart1EndDate = today |
|
chart1StartMonth = chart1StartDate.substring(0, 7) |
|
chart1EndMonth = chart1EndDate.substring(0, 7) |
|
chart2StartDate = defaultStartDate |
|
chart2EndDate = today |
|
chart2StartMonth = chart2StartDate.substring(0, 7) |
|
chart2EndMonth = chart2EndDate.substring(0, 7) |
|
chart3StartDate = defaultStartDate |
|
chart3EndDate = today |
|
chart3StartMonth = chart3StartDate.substring(0, 7) |
|
chart3EndMonth = chart3EndDate.substring(0, 7) |
|
} |
|
|
|
this.setData({ |
|
statType: type, |
|
startDate, |
|
startMonth, |
|
chart1StartDate, |
|
chart1EndDate, |
|
chart1StartMonth, |
|
chart1EndMonth, |
|
chart2StartDate, |
|
chart2EndDate, |
|
chart2StartMonth, |
|
chart2EndMonth, |
|
chart3StartDate, |
|
chart3EndDate, |
|
chart3StartMonth, |
|
chart3EndMonth, |
|
}) |
|
this.getPatientStatistics() |
|
this.getPatientChart() |
|
this.getPharmacistChart() |
|
this.getPharmacyChart() |
|
}, |
|
|
|
// 日期选择变化（邀约患者统计卡片 - 单日选择） |
|
onDateChange(e: WechatMiniprogram.CustomEvent) { |
|
const value = e.detail.value // YYYY-MM-DD 或 YYYY-MM |
|
|
|
// 月统计时，value 是 YYYY-MM 格式，需要补全为 YYYY-MM-DD |
|
const isMonth = value.length === 7 |
|
const fullDate = isMonth ? `${value}-01` : value |
|
const monthValue = isMonth ? value : value.substring(0, 7) |
|
|
|
this.setData({ |
|
startDate: fullDate, |
|
startMonth: monthValue, |
|
}) |
|
// 重新加载统计数据 |
|
this.getPatientStatistics() |
|
}, |
|
|
|
// 图表1日期选择变化 |
|
onChart1DateChange(e: WechatMiniprogram.CustomEvent) { |
|
const { field } = e.currentTarget.dataset |
|
const value = e.detail.value // YYYY-MM-DD 或 YYYY-MM |
|
|
|
// 月统计时，value 是 YYYY-MM 格式，需要补全为 YYYY-MM-DD |
|
const isMonth = value.length === 7 |
|
const fullDate = isMonth ? `${value}-01` : value |
|
const monthValue = isMonth ? value : value.substring(0, 7) |
|
|
|
const startDate = this.data.chart1StartDate |
|
const endDate = this.data.chart1EndDate |
|
|
|
// 验证日期范围 |
|
if (field === 'startDate' && endDate && fullDate > endDate) { |
|
wx.showToast({ |
|
title: '开始时间不能大于结束时间', |
|
icon: 'none', |
|
}) |
|
return |
|
} |
|
if (field === 'endDate' && startDate && fullDate < startDate) { |
|
wx.showToast({ |
|
title: '结束时间不能小于开始时间', |
|
icon: 'none', |
|
}) |
|
return |
|
} |
|
|
|
if (field === 'startDate') { |
|
this.setData({ |
|
chart1StartDate: fullDate, |
|
chart1StartMonth: monthValue, |
|
}) |
|
} else { |
|
this.setData({ |
|
chart1EndDate: fullDate, |
|
chart1EndMonth: monthValue, |
|
}) |
|
} |
|
this.getPatientChart() |
|
}, |
|
|
|
// 图表2日期选择变化 |
|
onChart2DateChange(e: WechatMiniprogram.CustomEvent) { |
|
const { field } = e.currentTarget.dataset |
|
const value = e.detail.value // YYYY-MM-DD 或 YYYY-MM |
|
|
|
// 月统计时，value 是 YYYY-MM 格式，需要补全为 YYYY-MM-DD |
|
const isMonth = value.length === 7 |
|
const fullDate = isMonth ? `${value}-01` : value |
|
const monthValue = isMonth ? value : value.substring(0, 7) |
|
|
|
const startDate = this.data.chart2StartDate |
|
const endDate = this.data.chart2EndDate |
|
|
|
// 验证日期范围 |
|
if (field === 'startDate' && endDate && fullDate > endDate) { |
|
wx.showToast({ |
|
title: '开始时间不能大于结束时间', |
|
icon: 'none', |
|
}) |
|
return |
|
} |
|
if (field === 'endDate' && startDate && fullDate < startDate) { |
|
wx.showToast({ |
|
title: '结束时间不能小于开始时间', |
|
icon: 'none', |
|
}) |
|
return |
|
} |
|
|
|
if (field === 'startDate') { |
|
this.setData({ |
|
chart2StartDate: fullDate, |
|
chart2StartMonth: monthValue, |
|
}) |
|
} else { |
|
this.setData({ |
|
chart2EndDate: fullDate, |
|
chart2EndMonth: monthValue, |
|
}) |
|
} |
|
this.getPharmacistChart() |
|
}, |
|
|
|
// 图表3日期选择变化 |
|
onChart3DateChange(e: WechatMiniprogram.CustomEvent) { |
|
const { field } = e.currentTarget.dataset |
|
const value = e.detail.value // YYYY-MM-DD 或 YYYY-MM |
|
|
|
// 月统计时，value 是 YYYY-MM 格式，需要补全为 YYYY-MM-DD |
|
const isMonth = value.length === 7 |
|
const fullDate = isMonth ? `${value}-01` : value |
|
const monthValue = isMonth ? value : value.substring(0, 7) |
|
|
|
const startDate = this.data.chart3StartDate |
|
const endDate = this.data.chart3EndDate |
|
|
|
// 验证日期范围 |
|
if (field === 'startDate' && endDate && fullDate > endDate) { |
|
wx.showToast({ |
|
title: '开始时间不能大于结束时间', |
|
icon: 'none', |
|
}) |
|
return |
|
} |
|
if (field === 'endDate' && startDate && fullDate < startDate) { |
|
wx.showToast({ |
|
title: '结束时间不能小于开始时间', |
|
icon: 'none', |
|
}) |
|
return |
|
} |
|
|
|
if (field === 'startDate') { |
|
this.setData({ |
|
chart3StartDate: fullDate, |
|
chart3StartMonth: monthValue, |
|
}) |
|
} else { |
|
this.setData({ |
|
chart3EndDate: fullDate, |
|
chart3EndMonth: monthValue, |
|
}) |
|
} |
|
this.getPharmacyChart() |
|
}, |
|
|
|
// 切换到上一天/上月（只更新邀约患者统计卡片） |
|
prevDate() { |
|
const isMonth = this.data.statType === 'month' |
|
let newDate: Date |
|
let startDate: string |
|
let startMonth: string |
|
|
|
if (isMonth) { |
|
// 月统计：切换到上个月 |
|
const currentDate = new Date(this.data.startDate) |
|
newDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1) |
|
startDate = this.formatDate(newDate) |
|
startMonth = this.formatMonth(newDate) |
|
} else { |
|
// 日统计：切换到上一天 |
|
const currentDate = new Date(this.data.startDate) |
|
newDate = new Date(currentDate.getTime() - 24 * 60 * 60 * 1000) |
|
startDate = this.formatDate(newDate) |
|
startMonth = startDate.substring(0, 7) |
|
} |
|
|
|
this.setData({ startDate, startMonth }) |
|
// 只重新加载统计数据 |
|
this.getPatientStatistics() |
|
}, |
|
|
|
// 切换到下一天/下月（只更新邀约患者统计卡片） |
|
nextDate() { |
|
const isMonth = this.data.statType === 'month' |
|
const today = new Date() |
|
let newDate: Date |
|
let startDate: string |
|
let startMonth: string |
|
|
|
if (isMonth) { |
|
// 月统计：切换到下个月 |
|
const currentDate = new Date(this.data.startDate) |
|
newDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1) |
|
|
|
// 最大月份不能大于当前月份 |
|
const currentMonth = new Date(today.getFullYear(), today.getMonth(), 1) |
|
if (newDate > currentMonth) { |
|
wx.showToast({ |
|
title: '不能选择未来月份', |
|
icon: 'none', |
|
}) |
|
return |
|
} |
|
|
|
startDate = this.formatDate(newDate) |
|
startMonth = this.formatMonth(newDate) |
|
} else { |
|
// 日统计：切换到下一天 |
|
const currentDate = new Date(this.data.startDate) |
|
newDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000) |
|
|
|
// 最大日期不能大于当前日期 |
|
if (newDate > today) { |
|
wx.showToast({ |
|
title: '不能选择未来日期', |
|
icon: 'none', |
|
}) |
|
return |
|
} |
|
|
|
startDate = this.formatDate(newDate) |
|
startMonth = startDate.substring(0, 7) |
|
} |
|
|
|
this.setData({ startDate, startMonth }) |
|
// 只重新加载统计数据 |
|
this.getPatientStatistics() |
|
}, |
|
|
|
initChartBar(list: any[]) { |
|
return new Promise((reslove) => { |
|
this.ecDataTrendComponent1_1 = this.selectComponent('#chart1_1') |
|
this.ecDataTrendComponent1_1.init((canvas, width, height, dpr) => { |
|
const chart = echarts.init(canvas, null, { |
|
width, |
|
height, |
|
devicePixelRatio: dpr, |
|
}) |
|
canvas.setChart(chart) |
|
const x: string[] = [] |
|
const y1: number[] = [] |
|
const y2: number[] = [] |
|
const y3: number[] = [] |
|
list.forEach((item) => { |
|
x.push(item.date || item.StatMonth) |
|
y1.push(item.inviteCount || item.count || item.MonthInvitePCount || 0) |
|
y2.push(item.jumpCount || 0) |
|
y3.push(item.enrollCount || 0) |
|
}) |
|
|
|
const option = { |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow', |
|
}, |
|
formatter (params) { |
|
let result = `${params[0].axisValue }\n` |
|
params.forEach((item, index) => { |
|
result += `${item.marker } ${ item.seriesName }: ${ item.value}` |
|
if (index < params.length - 1) { |
|
result += '\n' |
|
} |
|
}) |
|
return result |
|
}, |
|
}, |
|
legend: { |
|
top: 0, |
|
right: 0, |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
icon: 'rect', |
|
lineStyle: { |
|
width: '0', |
|
}, |
|
textStyle: { |
|
color: '#B5B8BB', |
|
fontSize: '12', |
|
}, |
|
}, |
|
grid: { |
|
top: '10%', |
|
left: '3%', |
|
right: '4%', |
|
bottom: '0', |
|
containLabel: true, |
|
}, |
|
xAxis: [ |
|
{ |
|
type: 'category', |
|
axisTick: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
fontSize: 10, |
|
color: '#B5B8BB', |
|
}, |
|
axisLine: { |
|
show: false, |
|
}, |
|
data: x, |
|
}, |
|
], |
|
yAxis: [ |
|
{ |
|
type: 'value', |
|
minInterval: 1, |
|
splitLine: { |
|
lineStyle: { |
|
type: 'dashed', |
|
}, |
|
}, |
|
axisLabel: { |
|
fontSize: 10, |
|
color: '#B5B8BB', |
|
formatter(value) { |
|
return Math.abs(value) |
|
}, |
|
}, |
|
}, |
|
], |
|
series: [ |
|
{ |
|
name: '邀约患者数', |
|
type: 'bar', |
|
stack: 'a', |
|
width: 4, |
|
color: '#FED877', |
|
barWidth: 12, |
|
data: y1, |
|
}, |
|
{ |
|
name: '跳转患者数', |
|
type: 'bar', |
|
stack: 'a', |
|
color: '#4A8DFF', |
|
barWidth: 12, |
|
data: y2, |
|
}, |
|
{ |
|
name: '入组患者数', |
|
type: 'bar', |
|
stack: 'a', |
|
color: '#3ADDC8', |
|
barWidth: 12, |
|
data: y3, |
|
}, |
|
], |
|
dataZoom: { |
|
type: 'inside', |
|
startValue: x.length - 6, |
|
endValue: x.length - 1, |
|
filterMode: 'none', |
|
}, |
|
} |
|
|
|
chart.setOption(option) |
|
reslove(chart) |
|
return chart |
|
}) |
|
}) |
|
}, |
|
|
|
initChartLine(list: any[], name: string, componentName: string) { |
|
return new Promise((reslove) => { |
|
this[componentName] = this.selectComponent(name) |
|
this[componentName].init((canvas, width, height, dpr) => { |
|
const chart = echarts.init(canvas, null, { |
|
width, |
|
height, |
|
devicePixelRatio: dpr, |
|
}) |
|
canvas.setChart(chart) |
|
const x: string[] = [] |
|
const y1: string[] = [] |
|
list.forEach((item) => { |
|
x.push(item.date || item.StatMonth) |
|
y1.push(item.count || item.MonthInvitePCount) |
|
}) |
|
|
|
const option = { |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'line', |
|
}, |
|
formatter (params) { |
|
let result = `${params[0].axisValue }\n` |
|
params.forEach((item, index) => { |
|
result += `${item.marker } ${ item.seriesName }: ${ item.value}` |
|
if (index < params.length - 1) { |
|
result += '\n' |
|
} |
|
}) |
|
return result |
|
}, |
|
}, |
|
legend: { |
|
top: 0, |
|
right: 0, |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
icon: 'rect', |
|
lineStyle: { |
|
width: '0', |
|
}, |
|
textStyle: { |
|
color: '#B5B8BB', |
|
fontSize: '12', |
|
}, |
|
data: [], |
|
}, |
|
grid: { |
|
top: '10%', |
|
left: '3%', |
|
right: '4%', |
|
bottom: '0', |
|
containLabel: true, |
|
}, |
|
xAxis: [ |
|
{ |
|
type: 'category', |
|
axisTick: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
fontSize: 10, |
|
color: '#B5B8BB', |
|
}, |
|
axisLine: { |
|
show: false, |
|
}, |
|
data: x, |
|
}, |
|
], |
|
yAxis: [ |
|
{ |
|
type: 'value', |
|
minInterval: 1, |
|
splitLine: { |
|
lineStyle: { |
|
type: 'dashed', |
|
}, |
|
}, |
|
axisLabel: { |
|
fontSize: 10, |
|
color: '#B5B8BB', |
|
formatter(value) { |
|
return Math.abs(value) |
|
}, |
|
}, |
|
}, |
|
], |
|
series: [ |
|
{ |
|
name: '邀约患者数', |
|
type: 'line', |
|
stack: 'a', |
|
width: 4, |
|
color: '#FED877', |
|
barWidth: 12, |
|
data: y1, |
|
smooth: 0.5, |
|
label: { |
|
show: true, |
|
position: 'top', |
|
fontSize: 12, |
|
color: '#B5B8BB', |
|
}, |
|
}, |
|
], |
|
dataZoom: { |
|
type: 'inside', |
|
startValue: x.length - 6, |
|
endValue: x.length - 1, |
|
filterMode: 'none', |
|
}, |
|
} |
|
|
|
chart.setOption(option) |
|
reslove(chart) |
|
return chart |
|
}) |
|
}) |
|
}, |
|
|
|
handleInvite() { |
|
wx.navigateTo({ |
|
url: '/ground/pages/invite/index', |
|
}) |
|
}, |
|
|
|
handleInfo() { |
|
const { chart1StartDate, chart1EndDate, statType } = this.data |
|
wx.navigateTo({ |
|
url: `/ground/pages/stat/index?startDate=${chart1StartDate}&endDate=${chart1EndDate}&type=${statType}`, |
|
}) |
|
}, |
|
|
|
handleFold(e) { |
|
const { key } = e.currentTarget.dataset |
|
this.setData({ |
|
[key]: !this.data[key], |
|
}) |
|
}, |
|
})
|
|
|