xinda-miniprogram/src/patient/pages/qolReport/index.ts

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 {}