week-report.tsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. import OHeader from '@/components/o-header'
  2. import { defineComponent, onMounted, reactive, nextTick } from 'vue'
  3. import styles from './report.module.less'
  4. import iconOrchestra from '@/views/mine-orchestra/images/icon-or.png'
  5. import {
  6. closeToast,
  7. Grid,
  8. GridItem,
  9. Icon,
  10. Image,
  11. Popup,
  12. showFailToast,
  13. showLoadingToast,
  14. showSuccessToast,
  15. showToast
  16. } from 'vant'
  17. import trainWeek from './images/week/icon-train-week.png'
  18. import OrchestraNum from './modal/orchestra-num'
  19. import TrainClass from './modal/train-class'
  20. import StudentAttendance from './modal/student-attendance'
  21. import TeacherAttendance from './modal/teacher-attendance'
  22. import TrainProgress from './modal/train-progress'
  23. import iconPhoto from './images/icon-photo.png'
  24. import iconClass from './images/icon-class.png'
  25. import iconSaveImage from '@/school/orchestra/images/icon-save-image.png'
  26. import iconWechat from '@/school/orchestra/images/icon-wechat.png'
  27. import iconWeekPoint from './images/week/icon-point.png'
  28. import popupWeekBanner from './images/week/popup-week-banner.png'
  29. import popupQrcodeBg from './images/popup-qrcode-bg.png'
  30. import OQrcode from '@/components/o-qrcode'
  31. import { useRoute, useRouter } from 'vue-router'
  32. import request from '@/helpers/request'
  33. import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
  34. import html2canvas from 'html2canvas'
  35. import dayjs from 'dayjs'
  36. import iconArrow from './images/icon-arrow.png'
  37. import { useRect } from '@vant/use'
  38. export const reportCourseType = {
  39. PERCUSSION: '打击乐',
  40. FLUTE: '长笛',
  41. SAX: '萨克斯',
  42. CLARINET: '单簧管',
  43. TRUMPET: '小号',
  44. TROMBONE: '长号',
  45. HORN: '圆号',
  46. BARITONE_TUBA: '上低音号-大号',
  47. EUPHONIUM: '上低音号',
  48. TUBA: '大号',
  49. MUSIC_THEORY: '乐理',
  50. INSTRUMENTAL_ENSEMBLE: '合奏'
  51. }
  52. export default defineComponent({
  53. name: 'train-report',
  54. setup() {
  55. const router = useRouter()
  56. const route = useRoute()
  57. const forms = reactive({
  58. id: route.query.id,
  59. showQrcode: false,
  60. share: route.query.share as any,
  61. url: window.location.href + '&share=1',
  62. width: 0,
  63. height: 0
  64. })
  65. const reportData = reactive({
  66. orchestraName: null,
  67. startTime: null,
  68. endTime: null,
  69. COURSEWARE: {},
  70. coursewareList: [] as any,
  71. COURSE_SCHEDULE: {},
  72. KNOWLEDGE: {},
  73. ORCHESTRA: {},
  74. PHOTO: {} as any,
  75. STUDENT_ATTENDANCE: {},
  76. TEACHER_ATTENDANCE: {},
  77. TEACHER_NOT_ATTENDANCE: {}
  78. })
  79. const getDetail = async () => {
  80. try {
  81. const { data } = await request.get('/api-school/open/orchestraReport/detail/' + forms.id)
  82. reportData.COURSEWARE = data.reportItem.COURSEWARE || {}
  83. reportData.COURSE_SCHEDULE = data.reportItem.COURSE_SCHEDULE || {}
  84. reportData.KNOWLEDGE = data.reportItem.KNOWLEDGE || {}
  85. reportData.ORCHESTRA = data.reportItem.ORCHESTRA || {}
  86. reportData.PHOTO = data.reportItem.PHOTO || {}
  87. reportData.STUDENT_ATTENDANCE = data.reportItem.STUDENT_ATTENDANCE || {}
  88. reportData.TEACHER_ATTENDANCE = data.reportItem.TEACHER_ATTENDANCE || {}
  89. reportData.TEACHER_NOT_ATTENDANCE = data.reportItem.TEACHER_NOT_ATTENDANCE || {}
  90. reportData.orchestraName = data.orchestraName || ''
  91. reportData.startTime = data.startTime || ''
  92. reportData.endTime = data.endTime || ''
  93. const courseware = data.notTargetClassList
  94. for (const i in courseware) {
  95. reportData.coursewareList.push(courseware[i].classGroupName)
  96. }
  97. } catch {
  98. //
  99. }
  100. }
  101. const imgs = reactive({
  102. saveLoading: false,
  103. image: null as any,
  104. shareLoading: false
  105. })
  106. const onSaveImg = async () => {
  107. // 判断是否在保存中...
  108. if (imgs.saveLoading) {
  109. return
  110. }
  111. imgs.saveLoading = true
  112. // 判断是否已经生成图片
  113. if (imgs.image) {
  114. saveImg()
  115. } else {
  116. const container: any = document.getElementById(`preview-container`)
  117. html2canvas(container, {
  118. allowTaint: true,
  119. useCORS: true,
  120. backgroundColor: null
  121. })
  122. .then(async (canvas) => {
  123. const url = canvas.toDataURL('image/png')
  124. imgs.image = url
  125. saveImg()
  126. })
  127. .catch(() => {
  128. closeToast()
  129. imgs.saveLoading = false
  130. })
  131. }
  132. }
  133. const onShare = () => {
  134. if (imgs.shareLoading) {
  135. return
  136. }
  137. imgs.shareLoading = true
  138. if (imgs.image) {
  139. openShare()
  140. } else {
  141. const container: any = document.getElementById(`preview-container`)
  142. html2canvas(container, {
  143. allowTaint: true,
  144. useCORS: true,
  145. backgroundColor: null
  146. })
  147. .then(async (canvas) => {
  148. const url = canvas.toDataURL('image/png')
  149. imgs.image = url
  150. openShare()
  151. })
  152. .catch(() => {
  153. closeToast()
  154. imgs.shareLoading = false
  155. })
  156. }
  157. }
  158. const openShare = () => {
  159. const image = imgs.image
  160. setTimeout(() => {
  161. imgs.shareLoading = false
  162. }, 100)
  163. if (image) {
  164. postMessage(
  165. {
  166. api: 'shareTripartite',
  167. content: {
  168. title: '',
  169. desc: '',
  170. image,
  171. video: '',
  172. type: 'image',
  173. // button: ['copy']
  174. shareType: 'wechat'
  175. }
  176. },
  177. (res: any) => {
  178. if (res && res.content) {
  179. showToast(res.content.message || (res.content.status ? '分享成功' : '分享失败'))
  180. }
  181. }
  182. )
  183. }
  184. }
  185. const saveImg = async () => {
  186. showLoadingToast({ message: '图片生成中...', forbidClick: true })
  187. setTimeout(() => {
  188. imgs.saveLoading = false
  189. }, 100)
  190. const res = await promisefiyPostMessage({
  191. api: 'savePicture',
  192. content: {
  193. base64: imgs.image
  194. }
  195. })
  196. if (res?.content?.status === 'success') {
  197. showSuccessToast('已保存到相册')
  198. } else {
  199. showFailToast('保存失败')
  200. }
  201. }
  202. onMounted(() => {
  203. getDetail()
  204. })
  205. return () => (
  206. <div class={[styles.trainWeek, forms.share == 1 ? styles.trasinWeekShare : '']}>
  207. <div class={styles.trainContainer}></div>
  208. <OHeader
  209. background="transparent"
  210. border={false}
  211. title=" "
  212. color="white"
  213. isBack={forms.share != 1 ? true : false}
  214. >
  215. {{
  216. right: () =>
  217. forms.share != 1 && (
  218. <i
  219. class={styles.iconShare}
  220. onClick={() => {
  221. forms.showQrcode = true
  222. nextTick(() => {
  223. const previewContainer = document.querySelector(
  224. '#preview-container'
  225. ) as HTMLElement
  226. const share = useRect(previewContainer)
  227. forms.width = share.width
  228. forms.height = share.height
  229. if (share.width > 0 && share.height > 0) {
  230. previewContainer.style.width = Math.round(share.width) + 'px'
  231. previewContainer.style.height = Math.round(share.height) + 'px'
  232. }
  233. })
  234. }}
  235. ></i>
  236. )
  237. }}
  238. </OHeader>
  239. <div class={styles.headerContant}>
  240. <div class={styles.orchestra}>
  241. <Image src={iconOrchestra} class={styles.iconOrchestra} />
  242. <span>{reportData.orchestraName}</span>
  243. </div>
  244. <div>
  245. <Image src={trainWeek} class={styles.iconTrainWeek} />
  246. </div>
  247. <div class={styles.trainTimer}>
  248. {dayjs(reportData.startTime).format('YYYY/MM/DD')}-
  249. {dayjs(reportData.endTime).format('YYYY/MM/DD')}
  250. </div>
  251. </div>
  252. <OrchestraNum reportData={reportData.ORCHESTRA} />
  253. <TrainClass reportData={reportData.COURSE_SCHEDULE} />
  254. <div class={styles.trainPhoto}>
  255. <Image src={iconPhoto} class={styles.iconPhoto} />
  256. <p
  257. onClick={() => {
  258. if (forms.share == 1) return
  259. router.push({
  260. path: '/school-photo'
  261. })
  262. }}
  263. style={{
  264. display: 'flex',
  265. alignItems: 'center'
  266. }}
  267. >
  268. 本周上传<span>{reportData.PHOTO.TOTAL || 0}</span>张训练照片
  269. {forms.share != 1 && <Icon name={iconArrow} size="10" style={{ marginLeft: '10px' }} />}
  270. </p>
  271. </div>
  272. <StudentAttendance reportData={reportData.STUDENT_ATTENDANCE} />
  273. <TeacherAttendance
  274. reportData={reportData.TEACHER_ATTENDANCE}
  275. reportDataNot={reportData.TEACHER_NOT_ATTENDANCE}
  276. />
  277. <div class={[styles.trainClass]}>
  278. <Image src={iconClass} class={styles.iconPhoto} />
  279. <div>
  280. <p class={styles.subjectTips}>课件使用未达标班级</p>
  281. <p class={styles.subjectNames}>
  282. {reportData.coursewareList.map(
  283. (item: string, index: number) =>
  284. item + (reportData.coursewareList.length - 1 === index ? '' : '、')
  285. )}
  286. </p>
  287. </div>
  288. </div>
  289. <TrainProgress reportData={reportData.KNOWLEDGE} />
  290. <Popup
  291. v-model:show={forms.showQrcode}
  292. position="bottom"
  293. style={{ background: 'transparent' }}
  294. >
  295. <div class={styles.codeContainer}>
  296. <div class={styles.codeImg} id="preview-container">
  297. <Image src={popupWeekBanner} class={styles.popupWeekBanner} />
  298. <div class={styles.codeContent}>
  299. <div class={[styles.headerContant, styles.headerContantPopup]}>
  300. <div class={styles.orchestra}>
  301. <Image src={iconOrchestra} class={styles.iconOrchestra} />
  302. <span>{reportData.orchestraName}</span>
  303. </div>
  304. <div>
  305. <Image src={trainWeek} class={styles.iconTrainWeek} />
  306. </div>
  307. <div class={styles.trainTimer}>
  308. <Image class={styles.point} src={iconWeekPoint} />
  309. {dayjs(reportData.startTime).format('YYYY/MM/DD')}-
  310. {dayjs(reportData.endTime).format('YYYY/MM/DD')}
  311. <Image class={styles.point} src={iconWeekPoint} />
  312. {/* {reportData.startTime}-{reportData.endTime} */}
  313. </div>
  314. </div>
  315. <div class={styles.codeQr}>
  316. <Image src={popupQrcodeBg} class={styles.popupQrcodeBg} />
  317. <OQrcode text={forms.url} size={'100%'} logoSize="small" />
  318. </div>
  319. <div style={{ textAlign: 'center' }}>
  320. <span class={styles.codeBtnText}>
  321. 扫描上方二维码<span>查看训练周报</span>
  322. </span>
  323. </div>
  324. </div>
  325. </div>
  326. <div class={styles.codeBottom}>
  327. <Icon
  328. name="cross"
  329. size={22}
  330. class={styles.close}
  331. color="#666"
  332. onClick={() => (forms.showQrcode = false)}
  333. />
  334. <h3 class={styles.title}>
  335. <i></i>分享方式
  336. </h3>
  337. <Grid columnNum={2} border={false}>
  338. <GridItem onClick={onSaveImg}>
  339. {{
  340. icon: () => <Image class={styles.shareImg} src={iconSaveImage} />,
  341. text: () => <div class={styles.shareText}>保存图片</div>
  342. }}
  343. </GridItem>
  344. <GridItem onClick={onShare}>
  345. {{
  346. icon: () => <Image class={styles.shareImg} src={iconWechat} />,
  347. text: () => <div class={styles.shareText}>微信</div>
  348. }}
  349. </GridItem>
  350. </Grid>
  351. </div>
  352. </div>
  353. </Popup>
  354. </div>
  355. )
  356. }
  357. })