orchestra-app/src/school/train-report/month-report.tsx

import OHeader from '@/components/o-header'
import { defineComponent, nextTick, onMounted, reactive } from 'vue'
import styles from './report.module.less'
import iconOrchestra from '@/views/mine-orchestra/images/icon-or.png'
import {
  closeToast,
  Grid,
  GridItem,
  Icon,
  Image,
  Popup,
  showFailToast,
  showLoadingToast,
  showSuccessToast,
  showToast
} from 'vant'
import trainWeek from './images/month/icon-train-month.png'
import OrchestraNum from './modal/orchestra-num'
import TrainClass from './modal/train-class'
import StudentAttendance from './modal/student-attendance'
import TeacherAttendance from './modal/teacher-attendance'
import TrainProgress from './modal/train-progress'
import iconPhoto from './images/icon-photo.png'
import iconClass from './images/icon-class.png'
import iconSaveImage from '@/school/orchestra/images/icon-save-image.png'
import iconWechat from '@/school/orchestra/images/icon-wechat.png'
import iconWeekPoint from './images/month/teacher-icon-point.png'
import popupWeekBanner from './images/month/popup-week-banner.png'
import popupQrcodeBg from './images/popup-qrcode-bg.png'
import OQrcode from '@/components/o-qrcode'
import request from '@/helpers/request'
import { useRoute, useRouter } from 'vue-router'
import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
import html2canvas from 'html2canvas'
import iconArrow from './images/icon-arrow.png'
import { useRect } from '@vant/use'
import TrainOverWork from './modal/train-over-work'

export const reportCourseType = {
  PERCUSSION: '打击乐',
  FLUTE: '长笛',
  SAX: '萨克斯',
  CLARINET: '单簧管',
  TRUMPET: '小号',
  TROMBONE: '长号',
  HORN: '圆号',
  BARITONE_TUBA: '上低音号-大号',
  EUPHONIUM: '上低音号',
  TUBA: '大号',
  MUSIC_THEORY: '乐理',
  INSTRUMENTAL_ENSEMBLE: '合奏'
}

export default defineComponent({
  name: 'train-report',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const forms = reactive({
      id: route.query.id,
      share: route.query.share as any,
      showQrcode: false,
      url: window.location.href + '&share=1',
      width: 0,
      height: 0
    })
    const reportData = reactive({
      orchestraName: null,
      monthlyTime: null,
      startTime: null,
      endTime: null,
      COURSEWARE: {},
      coursewareList: [] as any,
      COURSE_SCHEDULE: {},
      KNOWLEDGE: {},
      ORCHESTRA: {},
      PHOTO: {} as any,
      STUDENT_ATTENDANCE: {},
      TEACHER_ATTENDANCE: {},
      HOMEWORK_TARGET: {} as any, // 作业完成率
      HOMEWORK_SUBMITTED: {} as any, // 作业提交率
      TEACHER_NOT_ATTENDANCE: {} as any
    })

    const getDetail = async () => {
      try {
        const { data } = await request.get('/api-school/open/orchestraReport/detail/' + forms.id)
        reportData.COURSEWARE = data.reportItem.COURSEWARE || {}
        reportData.COURSE_SCHEDULE = data.reportItem.COURSE_SCHEDULE || {}
        reportData.KNOWLEDGE = data.reportItem.KNOWLEDGE || {}
        reportData.ORCHESTRA = data.reportItem.ORCHESTRA || {}
        reportData.HOMEWORK_TARGET = data.reportItem.HOMEWORK_TARGET || {}
        reportData.HOMEWORK_SUBMITTED = data.reportItem.HOMEWORK_SUBMITTED || {}
        reportData.PHOTO = data.reportItem.PHOTO || {}
        reportData.STUDENT_ATTENDANCE = data.reportItem.STUDENT_ATTENDANCE || {}

        reportData.TEACHER_ATTENDANCE = data.reportItem.TEACHER_ATTENDANCE || {}
        reportData.TEACHER_NOT_ATTENDANCE = data.reportItem.TEACHER_NOT_ATTENDANCE || {}
        reportData.orchestraName = data.orchestraName || ''
        reportData.monthlyTime = data.monthlyTime || ''
        reportData.startTime = data.startTime || ''
        reportData.endTime = data.endTime || ''

        const courseware = data.notTargetClassList
        for (const i in courseware) {
          reportData.coursewareList.push(courseware[i].classGroupName)
        }
      } catch {
        //
      }
    }

    const imgs = reactive({
      saveLoading: false,
      image: null as any,
      shareLoading: false
    })
    const onSaveImg = async () => {
      // 判断是否在保存中...
      if (imgs.saveLoading) {
        return
      }
      imgs.saveLoading = true
      // 判断是否已经生成图片
      if (imgs.image) {
        saveImg()
      } else {
        const container: any = document.getElementById(`preview-container`)
        html2canvas(container, {
          allowTaint: true,
          useCORS: true,
          backgroundColor: null
        })
          .then(async (canvas) => {
            const url = canvas.toDataURL('image/png')
            imgs.image = url
            saveImg()
          })
          .catch(() => {
            closeToast()
            imgs.saveLoading = false
          })
      }
    }
    const onShare = () => {
      if (imgs.shareLoading) {
        return
      }
      imgs.shareLoading = true
      if (imgs.image) {
        openShare()
      } else {
        const container: any = document.getElementById(`preview-container`)
        html2canvas(container, {
          allowTaint: true,
          useCORS: true,
          backgroundColor: null
        })
          .then(async (canvas) => {
            const url = canvas.toDataURL('image/png')
            imgs.image = url
            openShare()
          })
          .catch(() => {
            closeToast()
            imgs.shareLoading = false
          })
      }
    }
    const openShare = () => {
      const image = imgs.image
      setTimeout(() => {
        imgs.shareLoading = false
      }, 100)
      if (image) {
        postMessage(
          {
            api: 'shareTripartite',
            content: {
              title: '',
              desc: '',
              image,
              video: '',
              type: 'image',
              // button: ['copy']
              shareType: 'wechat'
            }
          },
          (res: any) => {
            if (res && res.content) {
              showToast(res.content.message || (res.content.status ? '分享成功' : '分享失败'))
            }
          }
        )
      }
    }
    const saveImg = async () => {
      showLoadingToast({ message: '图片生成中...', forbidClick: true })
      setTimeout(() => {
        imgs.saveLoading = false
      }, 100)
      const res = await promisefiyPostMessage({
        api: 'savePicture',
        content: {
          base64: imgs.image
        }
      })
      if (res?.content?.status === 'success') {
        showSuccessToast('已保存到相册')
      } else {
        showFailToast('保存失败')
      }
    }

    onMounted(() => {
      getDetail()
    })
    return () => (
      <div
        class={[
          styles.trainWeek,
          styles.trainMonth,
          forms.share == 1 ? styles.trasinMonthShare : ''
        ]}
      >
        <div class={styles.trainContainer}></div>
        <OHeader
          background="transparent"
          border={false}
          title=" "
          color="white"
          isBack={forms.share != 1 ? true : false}
        >
          {{
            right: () =>
              forms.share != 1 && (
                <i
                  class={styles.iconShare}
                  onClick={() => {
                    forms.showQrcode = true
                    nextTick(() => {
                      const previewContainer = document.querySelector(
                        '#preview-container'
                      ) as HTMLElement
                      const share = useRect(previewContainer)
                      forms.width = share.width
                      forms.height = share.height
                      if (share.width > 0 && share.height > 0) {
                        previewContainer.style.width = Math.round(share.width) + 'px'
                        previewContainer.style.height = Math.round(share.height) + 'px'
                      }
                    })
                  }}
                ></i>
              )
          }}
        </OHeader>
        <div class={[styles.headerContant, styles.teacherHeaderContant]}>
          <div class={styles.orchestra}>
            <Image src={iconOrchestra} class={styles.iconOrchestra} />
            <span>{reportData.orchestraName}</span>
          </div>
          <div>
            <Image src={trainWeek} class={styles.iconTrainWeek} />
          </div>
          <div class={styles.trainTimer}>{reportData.monthlyTime}</div>
        </div>

        <OrchestraNum type="month" reportData={reportData.ORCHESTRA} />
        <TrainClass type="month" reportData={reportData.COURSE_SCHEDULE} />

        {/* {reportData.HOMEWORK_TARGET.total && ( */}
        <TrainOverWork
          type="month"
          reportData={{
            HOMEWORK_SUBMITTED: reportData.HOMEWORK_SUBMITTED,
            HOMEWORK_TARGET: reportData.HOMEWORK_TARGET
          }}
        />
        {/* )} */}

        <div class={[styles.trainPhoto, styles.teacherTrainPhoto]}>
          <Image src={iconPhoto} class={styles.iconPhoto} />
          <p
            onClick={() => {
              if (forms.share == 1) return
              router.push({
                path: '/school-photo'
              })
            }}
            style={{
              display: 'flex',
              alignItems: 'center'
            }}
          >
            本月上传<span>{reportData.PHOTO.TOTAL || 0}</span>张训练照片
            {forms.share != 1 && <Icon name={iconArrow} size="10" style={{ marginLeft: '10px' }} />}
          </p>
        </div>

        <StudentAttendance type="month" reportData={reportData.STUDENT_ATTENDANCE} />
        <TeacherAttendance
          type="month"
          reportData={reportData.TEACHER_ATTENDANCE}
          reportDataNot={reportData.TEACHER_NOT_ATTENDANCE}
        />

        <div class={[styles.trainClass, styles.teacherTrainClass]}>
          <Image src={iconClass} class={styles.iconPhoto} />
          <div>
            <p class={styles.subjectTips}>课件使用未达标班级</p>
            <p class={styles.subjectNames} style="color: #FF99A2">
              {reportData.coursewareList.map((item: string) => item + ' ')}
            </p>
          </div>
        </div>
        <TrainProgress type="month" reportData={reportData.KNOWLEDGE} />

        <Popup
          v-model:show={forms.showQrcode}
          position="bottom"
          style={{ background: 'transparent' }}
        >
          <div class={styles.codeContainer}>
            <div class={[styles.codeImg, styles.teacherCodeImg]} id="preview-container">
              <Image src={popupWeekBanner} class={styles.popupWeekBanner} />
              <div class={styles.codeContent}>
                <div
                  class={[
                    styles.headerContant,
                    styles.teacherHeaderContant,
                    styles.headerContantPopup
                  ]}
                >
                  <div class={styles.orchestra}>
                    <Image src={iconOrchestra} class={styles.iconOrchestra} />
                    <span>{reportData.orchestraName}</span>
                  </div>
                  <div>
                    <Image src={trainWeek} class={styles.iconTrainWeek} />
                  </div>
                  <div class={styles.trainTimer}>
                    <Image class={styles.point} src={iconWeekPoint} />
                    {reportData.monthlyTime}
                    <Image class={styles.point} src={iconWeekPoint} />
                  </div>
                </div>

                <div class={styles.codeQr}>
                  <Image src={popupQrcodeBg} class={styles.popupQrcodeBg} />
                  <OQrcode text={forms.url} size={'100%'} logoSize="small" />
                </div>
                <div style={{ textAlign: 'center' }}>
                  <span class={styles.codeBtnText}>
                    扫描上方二维码<span>查看训练月报</span>
                  </span>
                </div>
              </div>
            </div>
            <div class={styles.codeBottom}>
              <Icon
                name="cross"
                size={22}
                class={styles.close}
                color="#666"
                onClick={() => (forms.showQrcode = false)}
              />

              <h3 class={styles.title}>
                <i></i>分享方式
              </h3>
              <Grid columnNum={2} border={false}>
                <GridItem onClick={onSaveImg}>
                  {{
                    icon: () => <Image class={styles.shareImg} src={iconSaveImage} />,
                    text: () => <div class={styles.shareText}>保存图片</div>
                  }}
                </GridItem>
                <GridItem onClick={onShare}>
                  {{
                    icon: () => <Image class={styles.shareImg} src={iconWechat} />,
                    text: () => <div class={styles.shareText}>微信</div>
                  }}
                </GridItem>
              </Grid>
            </div>
          </div>
        </Popup>
      </div>
    )
  }
})