From d099d94a43936603c4c52387ae7cdb94e1dda921 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 24 Feb 2020 17:55:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=85=A8=E5=B1=80=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 .../SimpleUploader/globalUploader.vue         | 123 ++++++++++++++----
 src/main.js                                   |   3 +
 src/utils/number.js                           |  20 ++-
 4 files changed, 119 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index f6adda6..2e2f97b 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "vue-router": "3.0.6",
     "vue-simple-uploader": "^0.7.4",
     "vue-touch": "^2.0.0-beta.4",
+    "vue-wechat-title": "^2.0.5",
     "vuex": "3.1.0",
     "we-vue": "^2.3.3",
     "webuploader": "^0.1.8",
diff --git a/src/components/SimpleUploader/globalUploader.vue b/src/components/SimpleUploader/globalUploader.vue
index c98755a..5ee4099 100755
--- a/src/components/SimpleUploader/globalUploader.vue
+++ b/src/components/SimpleUploader/globalUploader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="global-uploader">
+  <div id="global-uploader" v-wechat-title="process === -10 || process===100 ? $route.meta.title : process+'%'+' | '+$route.meta.title" >
 
     <!-- 上传 -->
     <uploader
@@ -47,11 +47,16 @@
 
     </uploader>
 
-    <div v-if="isShrink" class="process-area" id="drag-ball" @click="expand">
+    <div class="process-area" id="drag-ball" @click="expand" :style="processAreaClass">
       <div class="process-anime">
         <div class="cube-a" :style="{'top': -process-65+'%'}"></div>
         <div class="cube-b" :style="{'top': -process-65+'%'}"></div>
 
+        <div v-if="process < 100" class="process-info">
+          <div class="process">{{process}}%</div>
+          <div v-if="isUploading" class="net-speed">{{netSpeed}}</div>
+        </div>
+
         <div v-if="process >= 100" class="done">
           <svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">
             <!--"M 14.1 27.2 l 7.1 7.2 l 16.7 -16.8"-->
@@ -77,6 +82,7 @@ import Bus from '@/assets/js/bus'
 import $ from 'jquery'
 import SparkMD5 from 'spark-md5'
 import api from '@/api/upload-api'
+import { formatNetSpeed } from '@/utils/number'
 
 export default {
   components: {},
@@ -86,6 +92,8 @@ export default {
       options: {
         target: api.simpleUploadURL,
         chunkSize: 1024 * 1024,
+        // speedSmoothingFactor: 0.1,
+        // progressCallbacksInterval: 500,
         maxChunkRetries: 1, // 最大重试次数
         simultaneousUploads: 1, // 并发上传数
         testChunks: true, // 是否开启服务器分片校验
@@ -126,9 +134,13 @@ export default {
       },
       panelShow: false, // 选择文件后，展示上传panel
       collapse: false,
-      isShrink: false,
-      process: 50,
-      filePanel: {}
+      isShrink: true,
+      process: -10,
+      pageTitle: this.$route.meta.title,
+      netSpeed: 0,
+      isUploading: false,
+      filePanel: {},
+      processAreaClass: {}
     }
   },
   computed: {
@@ -155,6 +167,7 @@ export default {
     this.$nextTick(() => {
       window.uploader = this.$refs.uploader.uploader
     })
+
   },
   destroyed() {
     Bus.$off('openUploader')
@@ -216,6 +229,20 @@ export default {
       })
     },
     onFileProgress(rootFile, file, chunk) {
+      // const fileList = window.uploader.fileList
+      // fileList.forEach(file => {
+      //   file.currentSpeed
+      // })
+      this.netSpeed = formatNetSpeed(file.currentSpeed)
+      this.process = Math.trunc(window.uploader.progress() * 100)
+      if(this.process > 0 && this.process < 100){
+        window.onbeforeunload = function() {
+          return "还有文件正在上传, 确定退出吗?";
+        }
+      }else{
+        window.onbeforeunload = null
+      }
+      this.isUploading = window.uploader.isUploading()
       console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
     },
     onFileSuccess(rootFile, file, response) {
@@ -348,17 +375,39 @@ export default {
     },
     // 展开球
     expand() {
-      this.isShrink = false
       this.filePanel = {
         'width': '720px',
         'height': '300px',
       }
+      this.processAreaClass = {
+        'right': '66px',
+        'bottom': '66px',
+        'width': '0',
+        'height': '0',
+      }
+      this.isShrink = false
     },
     // 收缩成球
     shrink(){
       const that = this
+      this.filePanel = {
+        'color': 'white',
+        'z-index': '-1',
+        'right': '20px',
+        'bottom': '20px',
+        'width': '92px',
+        'height': '92px',
+        cursor: 'pointer',
+        'border-radius': '50%',
+      }
       setTimeout(function () {
         that.isShrink = true
+        that.processAreaClass = {
+          'right': '20px',
+          'bottom': '20px',
+          'width': '92px',
+          'height': '92px',
+        }
         that.filePanel = {
           'color': 'white',
           'z-index': '-1',
@@ -370,20 +419,21 @@ export default {
           'border-radius': '50%',
         }
       },500)
-      this.filePanel = {
-        'color': 'white',
-        'z-index': '-1',
-        'right': '20px',
-        'bottom': '20px',
-        'width': '92px',
-        'height': '92px',
-        cursor: 'pointer',
-        'border-radius': '50%',
-      }
     },
     close() {
-      this.uploader.cancel()
-      this.panelShow = false
+      if(this.process === -10 || this.process === 100){
+        this.uploader.cancel()
+        this.panelShow = false
+      } else {
+        this.$confirm('还有文件正在上传, 确定要关闭吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.uploader.cancel()
+          this.panelShow = false
+        })
+      }
     },
 
     /**
@@ -472,8 +522,8 @@ export default {
             background-size: 100% 100%;
             border-radius: 7px 7px 0 0;
             position: fixed;
-            -webkit-transition: all .5s cubic-bezier(0.4, 0, 1, 1) 0s;
-            transition: all .5s cubic-bezier(0.4, 0, 1, 1) 0s;
+            -webkit-transition: all .5s ease-in-out 0s;
+            transition: all .5s ease-in-out 0s;
 
             ul{
               white-space: nowrap;
@@ -599,11 +649,12 @@ export default {
 
 
     .process-area {
-      z-index: -1;
-      /*right: 20px;*/
-      /*bottom: 20px;*/
-      /*width: 92px;*/
-      /*height: 92px;*/
+      right: 66px;
+      bottom: 66px;
+      width: 0;
+      height: 0;
+      -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
+      box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
       cursor: pointer;
       background: #eee;
       margin: auto;
@@ -611,9 +662,27 @@ export default {
       background-size: 100% 100%;
       border-radius: 50%;
       position: fixed;
-      animation: load-process-area .5s 1 linear forwards;
-      transition: .5s;
+      /*animation: load-process-area .5s 1 linear forwards;*/
+      /*transition: all .5s;*/
+      -webkit-transition: all .5s ease-in-out 0s;
+      transition: all .5s ease-in-out 0s;
     }
+
+    .process-area .process-info {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      text-align: center;
+    }
+    .process-area .process-info .process {
+      font-size: 1.5rem;
+    }
+    .process-area .process-info .net-speed {
+      font-size: .7rem;
+      white-space: nowrap;
+    }
+
     .process-anime {
       position: absolute;
       top: 50%;
diff --git a/src/main.js b/src/main.js
index a6a7764..7e1221e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import EVueContextmenu from 'e-vue-contextmenu'
 import App from './App'
 import store from './store'
 import router from './router'
+import VueWechatTitle from 'vue-wechat-title'
 // import WeVue from 'we-vue'
 // import 'we-vue/lib/style.css'
 import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet} from 'vant';
@@ -42,6 +43,8 @@ Vue.use(VueTouch, {name:'v-touch'})
 Vue.use(ElementUI)
 // Vue.use(WeVue)
 
+Vue.use(VueWechatTitle)
+
 // 有赞的移动UI
 Vue.use(Button);
 Vue.use(Cell);
diff --git a/src/utils/number.js b/src/utils/number.js
index 1a93815..e4401cd 100644
--- a/src/utils/number.js
+++ b/src/utils/number.js
@@ -99,7 +99,7 @@ export function formatTime(agoTime) {
 
 /**
  * formatSize
- * @param {*} size 
+ * @param {*} size
  */
 export function formatSize(size) {
   if (size === 0) {
@@ -114,3 +114,21 @@ export function formatSize(size) {
     return (size/(1024 * 1024 * 1024)).toFixed(2) + 'G'
   }
 }
+
+/**
+ * formatNetSpeed
+ * @param {*} size
+ */
+export function formatNetSpeed(size) {
+  if (size === 0) {
+    return '0 B/s'
+  } else if (size < 1024) {
+    return size + ' B/s'
+  } else if (size < 1024 * 1024) {
+    return (size/1024).toFixed(2) + ' KB/s'
+  } else if (size < 1024 * 1024 * 1024) {
+    return (size/(1024 * 1024)).toFixed(2) + ' MB/s'
+  } else {
+    return (size/(1024 * 1024 * 1024)).toFixed(2) + ' GB/s'
+  }
+}