image-download.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>云阅卷本地代理工具</title>
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  8. <link rel="stylesheet" href="css/style.css">
  9. </head>
  10. <body>
  11. <div class="wp">
  12. <div class="hd">
  13. <div class="logo"><img src="img/logo.png" /></div>
  14. <span class="y"> 欢迎您,<span id="user-name"></span>
  15. <span class="pipe">|</span><a href="##">退出</a>
  16. </span>
  17. </div>
  18. <div class="cont">
  19. <div class="title title_grey cl">
  20. <h2>图片下载中 …</h2>
  21. </div>
  22. <div class="progress-box">
  23. <h3>正在下载图片,请耐心等候 ~</h3>
  24. <div class="progress">
  25. <div class="progress-outer">
  26. <div id="progress" class="progress-inner" style="width: 0%;"><span class="progress-text"></span>
  27. </div>
  28. </div>
  29. </div>
  30. <p>已下载图片:<b id="finish-count"></b> / 全部图片:<b id="total-count"></b></p>
  31. </div>
  32. </div>
  33. <div class="xcConfirm" id="popup" style="display: none">
  34. <div class="xc_layer"></div>
  35. <div class="popbox">
  36. <a href="##" id="popup-close"><span class="close"></span></a>
  37. <div class="txtbox">
  38. <div id="popup-error" class="icon error" style="display: none"></div>
  39. <div id="popup-success" class="icon success" style="display: none"></div>
  40. <div id="popup-text" class="text"></div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="ft">Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved</div>
  45. <div style="display:none">
  46. <canvas id="canvas"></canvas>
  47. </div>
  48. </div>
  49. <script>
  50. const $ = require('jquery')
  51. const env = require('../lib/env.js')
  52. const imageUtil = require('../lib/image.js')()
  53. $(document).ready(() => {
  54. env.merge(JSON.parse(window.localStorage.getItem('env')))
  55. $('#user-name').html(env.user.userName)
  56. let config = JSON.parse(window.localStorage.getItem('image-config'))
  57. let totalCount;
  58. imageUtil.on('total', (count) => {
  59. totalCount = count
  60. $('#total-count').html(count)
  61. })
  62. imageUtil.on('count', (count) => {
  63. $('#finish-count').html(count)
  64. let rate = parseInt(count * 100 / totalCount)
  65. $('#progress').css('width', rate + '%')
  66. $('.progress-text').html(rate + '%')
  67. })
  68. imageUtil.on('finish', () => {
  69. $('#popup-success').show()
  70. $('#popup-text').html('图片下载完成')
  71. $('#popup-close').click(() => {
  72. $('#popup').hide()
  73. window.location.href = 'image.html'
  74. })
  75. $('#popup').show()
  76. })
  77. imageUtil.on('error', (err) => {
  78. $('#popup-error').show()
  79. $('#popup-text').html('图片下载出错\n' + (err || ''))
  80. $('#popup-close').click(() => {
  81. $('#popup').hide()
  82. window.location.href = 'image.html'
  83. })
  84. $('#popup').show()
  85. })
  86. if (config.type == '1') {
  87. imageUtil.downloadSheet(config.dir, config.template, config.append, config.failover, config
  88. .watermark, config.showMarker, config.showHeader, {
  89. examNumberIn: config.examNumber,
  90. subjectCode: config.subjectCode
  91. })
  92. } else {
  93. imageUtil.downloadPackage(config.dir, config.template, config.append, config.failover)
  94. }
  95. })
  96. </script>
  97. </body>
  98. </html>