123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371 |
- import OHeader from '@/components/o-header'
- import { defineComponent, onMounted, reactive, nextTick } 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/week/icon-train-week.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/week/icon-point.png'
- import popupWeekBanner from './images/week/popup-week-banner.png'
- import popupQrcodeBg from './images/popup-qrcode-bg.png'
- import OQrcode from '@/components/o-qrcode'
- import { useRoute, useRouter } from 'vue-router'
- import request from '@/helpers/request'
- import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
- import html2canvas from 'html2canvas'
- import dayjs from 'dayjs'
- import iconArrow from './images/icon-arrow.png'
- import { useRect } from '@vant/use'
- 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,
- showQrcode: false,
- share: route.query.share as any,
- url: window.location.href + '&share=1',
- width: 0,
- height: 0
- })
- const reportData = reactive({
- orchestraName: null,
- startTime: null,
- endTime: null,
- COURSEWARE: {},
- coursewareList: [] as any,
- COURSE_SCHEDULE: {},
- KNOWLEDGE: {},
- ORCHESTRA: {},
- PHOTO: {} as any,
- STUDENT_ATTENDANCE: {},
- TEACHER_ATTENDANCE: {},
- TEACHER_NOT_ATTENDANCE: {}
- })
- 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.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.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, forms.share == 1 ? styles.trasinWeekShare : '']}>
- <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}>
- <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}>
- {dayjs(reportData.startTime).format('YYYY/MM/DD')}-
- {dayjs(reportData.endTime).format('YYYY/MM/DD')}
- </div>
- </div>
- <OrchestraNum reportData={reportData.ORCHESTRA} />
- <TrainClass reportData={reportData.COURSE_SCHEDULE} />
- <div class={styles.trainPhoto}>
- <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 reportData={reportData.STUDENT_ATTENDANCE} />
- <TeacherAttendance
- reportData={reportData.TEACHER_ATTENDANCE}
- reportDataNot={reportData.TEACHER_NOT_ATTENDANCE}
- />
- <div class={[styles.trainClass]}>
- <Image src={iconClass} class={styles.iconPhoto} />
- <div>
- <p class={styles.subjectTips}>课件使用未达标班级</p>
- <p class={styles.subjectNames}>
- {reportData.coursewareList.map(
- (item: string, index: number) =>
- item + (reportData.coursewareList.length - 1 === index ? '' : '、')
- )}
- </p>
- </div>
- </div>
- <TrainProgress reportData={reportData.KNOWLEDGE} />
- <Popup
- v-model:show={forms.showQrcode}
- position="bottom"
- style={{ background: 'transparent' }}
- >
- <div class={styles.codeContainer}>
- <div class={styles.codeImg} id="preview-container">
- <Image src={popupWeekBanner} class={styles.popupWeekBanner} />
- <div class={styles.codeContent}>
- <div class={[styles.headerContant, 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} />
- {dayjs(reportData.startTime).format('YYYY/MM/DD')}-
- {dayjs(reportData.endTime).format('YYYY/MM/DD')}
- <Image class={styles.point} src={iconWeekPoint} />
- {/* {reportData.startTime}-{reportData.endTime} */}
- </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>
- )
- }
- })
|