update

dist/static/css/chunk-libs.9a4107ef.css

@@ -1 +0,0 @@
-#nprogress{pointer-events:none}#nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:100%;height:.05333rem}#nprogress .peg{display:block;position:absolute;right:0;width:2.66667rem;height:100%;box-shadow:0 0 .26667rem #29d,0 0 .13333rem #29d;opacity:1;-webkit-transform:rotate(3deg) translateY(-.10667rem);-ms-transform:rotate(3deg) translateY(-.10667rem);transform:rotate(3deg) translateY(-.10667rem)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:.4rem;right:.4rem}#nprogress .spinner-icon{width:.48rem;height:.48rem;box-sizing:border-box;border:.05333rem solid transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}

package.json

@@ -17,6 +17,8 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "element-ui": "^2.15.13",
+    "image-conversion": "^2.1.1",
     "js-audio-recorder": "^1.0.7",
     "js-cookie": "^3.0.1",
     "lamejs": "^1.2.1",

src/api/course.js

@@ -58,3 +58,12 @@ export function deletePz(data) {
     hideloading: false
   })
 }
+// 添加作业
+export function addCourseWorksR(data) {
+  return request({
+    url: '/addCourseWorksR',
+    method: 'post',
+    data,
+    hideloading: false
+  })
+}

src/assets/css/index.scss

@@ -16,3 +16,54 @@ body .app {
 #__vconsole {
   display: none;
 }
+
+
+.mask {
+  background-color: rgba(0, 0, 0, 0);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progressBox {
+  width: 250px;
+  height: 150px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+  color: #6c6c6c;
+  font-size: 16px;
+}
+
+.progressBox {
+  .el-progress-bar__outer {
+    background-color: #d1dfff !important;
+    .el-progress-bar__innerText{
+      color: #fff !important;
+    }
+  }
+}
+
+.progressBox .lbox {
+  height: 50px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  color: #747474;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}

src/router/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import { constantRouterMap } from './router.config.js'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 
 // hack router push callback
 const originalPush = Router.prototype.push
@@ -9,7 +11,7 @@ Router.prototype.push = function push(location, onResolve, onReject) {
   return originalPush.call(this, location).catch(err => err)
 }
 
-Vue.use(Router)
+Vue.use(Router).use(ElementUI)
 
 const createRouter = () =>
   new Router({

src/store/modules/user.js

@@ -75,6 +75,9 @@ const actions = {
           resolve(_user.userid)
         })
         .catch(error => {
+          // var _user = { userid: '5943e08c-b7d4-11ed-8d51-005056b86db5' }
+          // setToken(_user.userid)
+          // resolve(_user.userid)
           reject(error)
         })
     })

src/views/course/components/stepsBox.vue

@@ -14,7 +14,12 @@
           {{ isCloseList[stepI].isClose == '1' ? '展开' : '收缩' }}
         </div>
       </div>
-      <div class="tool-box" v-if="tools[step.tool[0]]">
+      <div class="tool-box" v-if="tools[step.tool[0]] && step.tool[0] == 16" @click="addImg($event)">
+        <div class="tool-img"><img :src="tools[step.tool[0]].img" /></div>
+        <div class="tool-name">{{ tools[step.tool[0]].name }}</div>
+        <input type="file" accept="image/*" style="display: none" @change="beforeUpload($event, 1, stepI)" />
+      </div>
+      <div class="tool-box" v-else-if="tools[step.tool[0]]">
         <div class="tool-img"><img :src="tools[step.tool[0]].img" /></div>
         <div class="tool-name">{{ tools[step.tool[0]].name }}</div>
       </div>
@@ -50,13 +55,26 @@
     <div v-if="!toolChoose().length" class="noMssage">
       <img src="@/assets/images/course/isNoMessage.png" />
     </div>
+    <div v-if="proVisible" class="mask">
+      <div class="progressBox">
+        <div class="lbox"><img src="@/assets/images/loading.gif" />上传中，请稍后</div>
+        <div style="margin-bottom: 10px">
+          <span>{{ isFinishSize }}M</span> / <span>{{ isAllSize }}M</span>
+        </div>
+        <el-progress :text-inside="true" :stroke-width="20" :percentage="progress" style="width: 80%"></el-progress>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { getCourseWorks, getCourseWorksStudentJuri } from '@/api/course'
+import '@/assets/js/aws-sdk-2.235.1.min.js'
+import * as imageConversion from 'image-conversion'
+import { getCourseWorks, getCourseWorksStudentJuri, addCourseWorksR } from '@/api/course'
 import { tools } from '@/const/index'
 import Works from './works.vue'
+import { mapGetters } from 'vuex'
+
 export default {
   props: {
     chapInfo: {
@@ -98,7 +116,12 @@ export default {
       isCloseList: [],
       noWorksS: [],
       isWorkTool: [16, 32, 57, 4, 45, 15, 1, 3, 6, 7, 26, 41, 47, 48, 52, 50, 40], //, 49
-      tools: tools
+      fileType: 0,
+      tools: tools,
+      proVisible: false,
+      progress: 0,
+      isFinishSize: 0,
+      isAllSize: 0
     }
   },
   watch: {
@@ -113,6 +136,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['userinfo']),
     toolChoose() {
       return () => {
         let toolchoose = this.chapInfo.chapterInfo[0].taskJson[this.taskCount].toolChoose
@@ -659,6 +683,217 @@ export default {
         this.isCloseList[i].isClose = 0
       }
       this.$forceUpdate()
+    },
+    addImg(e) {
+      var el = e.currentTarget
+      el.getElementsByTagName('input')[0].click()
+      e.target.value = ''
+    },
+    pngToWhiteBg(file) {
+      const _file = file
+      const read = new FileReader()
+      read.readAsDataURL(file) // 文件转base64
+      return new Promise((resolve, reject) => {
+        read.onload = e => {
+          const img = new Image()
+          img.src = e.target.result
+          // eslint-disable-next-line space-before-function-paren
+          img.onload = async () => {
+            // 生成canvas
+            const canvas = document.createElement('canvas')
+            const context = canvas.getContext('2d')
+            // 绘制图片到canvas上
+            canvas.width = img.width
+            canvas.height = img.height
+
+            // 在canvas绘制前填充白色背景
+            context.fillStyle = '#fff'
+            context.fillRect(0, 0, canvas.width, canvas.height)
+            context.drawImage(img, 0, 0)
+            const base64 = canvas.toDataURL(file['type'], 1)
+            const newFile = this.dataUrlToFile(base64, _file)
+            resolve(newFile)
+          }
+        }
+      })
+    },
+    dataUrlToFile(dataurl, file) {
+      const arr = dataurl.split(',')
+      const mime = arr[0].match(/:(.*?);/)[1]
+      const bstr = atob(arr[1])
+      let n = bstr.length
+      const u8arr = new Uint8Array(n)
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      // return new Blob([u8arr], { type: mime });
+      return new File([new Blob([u8arr], { type: mime })], file.name, {
+        type: mime
+      })
+    },
+    async beforeUpload(event, type, i) {
+      // this.$message.success('进入上传')
+      var file = ''
+      if (type === 5) {
+        file = event
+      } else {
+        file = event.target.files[0]
+      }
+      var credentials = {
+        accessKeyId: 'AKIATLPEDU37QV5CHLMH',
+        secretAccessKey: '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'
+      } // 秘钥形式的登录上传
+      window.AWS.config.update(credentials)
+      window.AWS.config.region = 'cn-northwest-1' // 设置区域
+
+      // eslint-disable-next-line prettier/prettier
+      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' }}) // 选择桶
+      var _this = this
+      _this.progress = 0
+      _this.proVisible = true
+      _this.isFinishSize = 0
+      _this.isAllSize = (file.size / 1024 / 1024).toFixed(2)
+      var photoA = ['BMP', 'GIF', 'PNG', 'JPGE', 'JPG', 'TIF', 'PCX', 'TGA', 'EXIF', 'FPX', 'SVG', 'APNG']
+
+      if (
+        photoA.indexOf(file.name.split('.')[file.name.split('.').length - 1].toLocaleUpperCase()) !== -1 &&
+        type !== 4
+      ) {
+        file = await this.pngToWhiteBg(file)
+        const blob = await imageConversion.compressAccurately(file, 256)
+        file = new File([blob], file.name, { type: file.type })
+      }
+
+      if (file) {
+        var params = {
+          Key:
+            file.name.split('.')[0] +
+            new Date().getTime() +
+            '.' +
+            file.name.split('.')[file.name.split('.').length - 1],
+          ContentType: file.type,
+          Body: file,
+          'Access-Control-Allow-Credentials': '*',
+          ACL: 'public-read'
+        } // key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+        var options = {
+          // partSize: 2048 * 1024 * 1024,
+          partSize: 1024 * 1024 * 1024,
+          queueSize: 2,
+          leavePartsOnError: true
+        }
+        bucket
+          .upload(params, options)
+          .on('httpUploadProgress', function(evt) {
+            // 这里可以写进度条
+            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+            _this.progress = parseInt((evt.loaded / evt.total) * 100)
+            _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2)
+          })
+          .send(function(err, data) {
+            _this.progress = 100
+            _this.isFinishSize = _this.isAllSize
+            setTimeout(() => {
+              _this.proVisible = false
+            }, 1000)
+            if (err) {
+              var a = _this.$refs.upload1.uploadFiles
+              a.splice(a.length - 1, a.length)
+              _this.$message.error('上传失败')
+            } else {
+              var b = ['PDF', 'DOC', 'DOCX', 'PPT', 'PPTX', 'XLSX', 'XLS']
+              var c = [
+                'AVI',
+                'NAVI',
+                'MPEG',
+                'ASF',
+                'MOV',
+                'WMV',
+                '3GP',
+                'RM',
+                'RMVB',
+                'FLV',
+                'F4V',
+                'H.264',
+                'H.265',
+                'REAL VIDEO',
+                'MKV',
+                'WebM',
+                'HDDVD',
+                'MP4',
+                'MPG',
+                'M4V',
+                'MGV',
+                'OGV',
+                'QTM',
+                'STR',
+                'AMC',
+                'DVX',
+                'EVO',
+                'DAT',
+                'OGG',
+                'OGM'
+              ]
+              if (type === 1) {
+                if (
+                  c.indexOf(data.Location.split('.')[data.Location.split('.').length - 1].toLocaleUpperCase()) !== -1
+                ) {
+                  _this.fileType = 2
+                } else if (
+                  b.indexOf(data.Location.split('.')[data.Location.split('.').length - 1].toLocaleUpperCase()) !== -1
+                ) {
+                  _this.fileType = 1
+                } else if (
+                  photoA.indexOf(data.Location.split('.')[data.Location.split('.').length - 1].toLocaleUpperCase()) !==
+                  -1
+                ) {
+                  _this.fileType = 0
+                } else {
+                  _this.fileType = 3
+                }
+                _this.addCourseWorks(data.Location, i)
+              }
+              console.log(data.Location)
+            }
+          })
+      }
+    },
+    addCourseWorks(data, toolindex) {
+      var typesql
+      if (this.fileType === 0) {
+        typesql = 1
+      } else if (this.fileType === 1) {
+        typesql = 4
+      } else if (this.fileType === 2) {
+        typesql = 5
+      } else if (this.fileType === 3) {
+        typesql = 12
+      }
+
+      const params = [
+        {
+          uid: this.userinfo.userid,
+          cid: this.courseid,
+          stage: this.courseType,
+          task: this.taskCount,
+          tool: toolindex,
+          content: data,
+          type: typesql
+        }
+      ]
+      addCourseWorksR(params)
+        .then(res => {
+          this.$toast({
+            message: '添加成功',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.getWorks()
+          }, 2000)
+        })
+        .catch(err => {
+          console.error(err)
+        })
     }
   },
   mounted() {