lsc vor 2 Jahren
Ursprung
Commit
e5e8b5622f
2 geänderte Dateien mit 182 neuen und 14 gelöschten Zeilen
  1. 135 0
      js/jietu4.js
  2. 47 14
      src/components/tools/heatmap.vue

+ 135 - 0
js/jietu4.js

@@ -0,0 +1,135 @@
+
+function jietu_shishi(uid, cid, stage, task, tool) {
+  html2canvas($("body")[0]).then(function (canvas) {
+    //获取截取图片路径
+
+    var base64Url = canvas.toDataURL('image/png');
+    //后台操作处理
+
+    var base64 = "<img src=" + base64Url + " />"
+    var file = dataURLtoFile_shishi(base64Url, "截图")
+    beforeUpload_shishi(file, uid, cid, stage, task, tool)
+    // $("body")[0].innerHTML = base64
+  });
+}
+
+function dataURLtoFile_shishi(dataurl, filename) {
+  let arr = dataurl.split(","),
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, {
+    type: mime
+  });
+}
+
+
+function beforeUpload_shishi(nfile, uid, cid, stage, task, tool, loading, atool, text) {
+  // loading.style.display = 'flex'
+  // top.document.getElementById(loading);
+  //  document.body.appendChild(_loading)
+  var file = nfile;
+  var credentials = {
+    accessKeyId: "AKIATLPEDU37QV5CHLMH",
+    secretAccessKey: "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",
+  }; //秘钥形式的登录上传
+  window.AWS.config.update(credentials);
+  window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+  var bucket = new window.AWS.S3({
+    params: {
+      Bucket: "ccrb"
+    }
+  }); //选择桶
+
+  if (file) {
+    var params = {
+      Key: file.name.split(".")[0] + new Date().getTime() + "." + "png",
+      ContentType: file.type,
+      Body: file,
+      "Access-Control-Allow-Credentials": "*",
+      ACL: "public-read",
+    }; //key可以设置为桶的相抵路径,Body为文件, ACL最好要设置
+    var options = {
+      partSize: 2048 * 1024 * 1024,
+      queueSize: 2,
+      leavePartsOnError: true,
+    };
+    bucket.upload(params, options)
+      .on("httpUploadProgress", function (evt) {
+        //这里可以写进度条
+        // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+      }).send(function (err, data) {
+        console.log(data.Location);
+        var a = {
+          name: file.name,
+          url: data.Location,
+          uid: file.uid,
+        }
+        addSWork_shishi(uid, cid, stage, task, tool, data.Location, loading, atool, text)
+      });
+  }
+}
+
+function addSWork_shishi(uid, cid, stage, task, tool, a, loading,atool, text) {
+  let params = {
+    uid: uid,
+    cid: cid,
+    stage: stage,
+    task: task,
+    tool: tool,
+    content: a,
+    type: 1,
+    atool:atool,
+    text:text
+    // upload: JSON.stringify(this.imgFileUp),
+  };
+  $.ajax({
+    type: 'POST',
+    url: 'https://pbl.cocorobo.cn/api/pbl/addCourseWorks4s',
+    data: params,
+    dataType: "json",
+    error: (XMLHttpRequest, textStatus, errorThrown) => {
+      var _a = document.getElementsByTagName("img")
+      for (var i = 0; i < _a.length; i++) {
+        _a[i].removeAttribute("crossorigin")
+      }
+      top.document.getElementById(loading).children[0].style.display = "none"
+      let _div = document.createElement('div')
+      _div.style = "width:100%;height:100%;background:#0000008f;position:fixed;top:0;left:0;z-index:99999999999999;display: flex;justify-content: center;align-items: center;"
+      let _inner = document.createElement('div')
+      _inner.style = "color: #fff;padding: 15px;background: #00000070;border-radius: 5px;font-size: 18px;"
+      _inner.innerHTML = "上传失败,网络错误"
+      _div.appendChild(_inner)
+      document.body.appendChild(_div)
+      setTimeout(() => {
+        document.body.removeChild(_div)
+      }, 1000);
+    },
+    success: (data) => {
+      setTimeout(() =>{
+        var _a = document.getElementsByTagName("img")
+        for (var i = 0; i < _a.length; i++) {
+          _a[i].removeAttribute("crossorigin")
+        }
+        top.document.getElementById(loading).children[0].style.display = "none"
+        let _div = document.createElement('div')
+        _div.style = "width:100%;height:100%;background:#0000008f;position:fixed;top:0;left:0;z-index:99999999999999;display: flex;justify-content: center;align-items: center;"
+        let _inner = document.createElement('div')
+        _inner.style = "color: #fff;padding: 15px;background: #00000070;border-radius: 5px;font-size: 18px;"
+        _inner.innerHTML = "截图上传成功"
+        _div.appendChild(_inner)
+        document.body.appendChild(_div)
+        setTimeout(() => {
+          //  document.body.removeChild(_loading)
+          document.body.removeChild(_div)
+        }, 1000);
+        console.log("截图上传成功");
+      },3000)
+    }
+  })
+}

+ 47 - 14
src/components/tools/heatmap.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script>
-
 export default {
   props: ["Josn", 'num'],
   data() {
@@ -22,23 +21,25 @@ export default {
         //   left: 'center',
         //   text: '作业提交热力图'
         // },
-        tooltip: {},
+        tooltip: {
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'份';
+          }
+        },
         visualMap: {
           min: 0,
           max: 0,
-          type: 'piecewise',
-          orient: 'horizontal',
-          left: 'center',
-          top: 65,
+          type: 'continuous',
           inRange: {
             color: ['#65b9fc', '#477cd7']
           },
           precision: 0,
-          show: false,
+          calculable: true,
         },
         calendar: {
           top: 40,
-          left: 30,
+          left: 100,
           right: 30,
           cellSize: ['auto', 15],
           range: '',
@@ -59,6 +60,37 @@ export default {
     };
   },
   methods: {
+    gettime() {
+      var time = new Date();
+      time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 6; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
     setChart(option, year) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
@@ -79,8 +111,8 @@ export default {
       });
     },
     getVirtualData(year) {
-      const date = +this.$echarts.time.parse(year + '-01-01');
-      const end = +this.$echarts.time.parse(year + '-12-31');
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
       const dayTime = 3600 * 24 * 1000;
       const data = [];
       for (let time = date; time < end; time += dayTime) {
@@ -95,14 +127,15 @@ export default {
     },
     setData() {
       let year = Object.keys(this.Josn)[0].split('-')[0];
-      this.ooption = this.getVirtualData(year)
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
       if (!this.chartObj) {
-        this.setChart(this.ooption, year);
+        this.setChart(this.ooption, t);
       } else {
         this.option.series.data = this.ooption;
-        this.option.calendar.range = year;
+        this.option.calendar.range = t;
         this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
-        this.chartObj.setOption(this.option, year);
+        this.chartObj.setOption(this.option, t);
       }
     },
   },