前端页面增加应用上传速度展示

fir_client/src/components/apps/FirApps.vue

@@ -94,11 +94,13 @@
                         style="width: 100%">
                     <el-table-column
                             prop="name"
+                            align="center"
                             label="文件名称">
                     </el-table-column>
                     <el-table-column
                             prop="size"
                             label="文件大小"
+                            align="center"
                             width="80">
                         <template slot-scope="scope">
                             {{ scope.row.size|diskSize }}
@@ -106,19 +108,20 @@
                     </el-table-column>
                     <el-table-column
                             label="短连接"
+                            align="center"
                             width="70">
                         <template slot-scope="scope">
                             {{ uploadprocess[uploadprocessList[multiFileList.indexOf(scope.row)]].short }}
                         </template>
                     </el-table-column>
                     <el-table-column
+                            align="center"
                             label="应用名称">
                         <template slot-scope="scope">
                             {{ uploadprocess[uploadprocessList[multiFileList.indexOf(scope.row)]].appname }}
                         </template>
                     </el-table-column>
                     <el-table-column
-                            prop="raw.lastModified"
                             width="80"
                             align="center"
                             label="上传进度">
@@ -126,6 +129,14 @@
                             {{ uploadprocess[uploadprocessList[multiFileList.indexOf(scope.row)]].process }} %
                         </template>
                     </el-table-column>
+                    <el-table-column
+                            width="100"
+                            align="center"
+                            label="上传速度">
+                        <template slot-scope="scope">
+                            {{ uploadprocess[uploadprocessList[multiFileList.indexOf(scope.row)]].speed }}/s
+                        </template>
+                    </el-table-column>
                 </el-table>
 
                 <span slot="footer" class="dialog-footer">
@@ -281,10 +292,11 @@
                     </div>
                 </div>
                 <span slot="footer" class="dialog-footer" v-if="currentfile&& currentfile.uid">
-                    {{ uploadprocess[currentfile.uid] }}
+                    <span v-if="uploadflag === true">
-                        <el-progress :text-inside="true" :stroke-width="26"
+                         {{ uploadprocess[uploadprocessList[multiFileList.indexOf(currentfile)]].speed }}/s
-                                     :percentage="uploadprocess[uploadprocessList[multiFileList.indexOf(currentfile)]].process"
+                            <el-progress :text-inside="true" :stroke-width="26"
-                                     v-if="uploadflag === true"/>
+                                         :percentage="uploadprocess[uploadprocessList[multiFileList.indexOf(currentfile)]].process"/>
+                    </span>
                         <el-button type="primary" plain
                                    @click="uploadcloud(analyseappinfo,currentfile,false,getappsFun)" v-else>{{ analyseappinfo.is_new|get_upload_text}}</el-button>
                   </span>
@@ -562,13 +574,14 @@
         getUserInfoFun,
         makeFiveC,
         deepCopy,
-        diskSize
+        diskSize,
+        upspeed
     } from "@/utils";
 
     let fiveProcess = {};
     let fiveProcessList = [];
     for (const c of makeFiveC()) {
-        fiveProcess[c] = {process: 0, short: '', appname: ''};
+        fiveProcess[c] = {process: 0, short: '', appname: '', percent: [], speed: '0 MB'};
         fiveProcessList.push(c)
     }
     export default {
@@ -771,6 +784,25 @@
                     }, {'methods': 'PUT', 'data': analyseappinfo});
                 }
             },
+            updateprocess(binaryFlag, process_key, process, analyseappinfo, rawfile) {
+                if (binaryFlag && process_key) {
+                    this.uploadprocess[process_key].percent.push({time: Date.now(), process});
+                    const pnumber = 20;
+                    this.uploadprocess[process_key].process = process;
+                    this.uploadprocess[process_key].short = analyseappinfo.short;
+                    this.uploadprocess[process_key].appname = analyseappinfo.appname;
+                    if (process > 0) {
+                        let percent = this.uploadprocess[process_key].percent;
+                        if (percent.length > pnumber) {
+                            this.uploadprocess[process_key].speed = upspeed(percent[percent.length - pnumber].time, rawfile.size, process - percent[percent.length - pnumber].process)
+                        } else {
+                            if (percent.length > 1) {
+                                this.uploadprocess[process_key].speed = upspeed(percent[0].time, rawfile.size, process)
+                            }
+                        }
+                    }
+                }
+            },
             uploadtostorage(file, analyseappinfo, multiFlag, binaryFlag, resolve) {
                 let upload_key = analyseappinfo.png_key;
                 let upload_token = analyseappinfo.png_token;
@@ -791,22 +823,14 @@
                     uploadqiniuoss(rawfile, certinfo, this, res => {
                         this.updateappinfo(file, analyseappinfo, multiFlag, binaryFlag, resolve)
                     }, process => {
-                        if (binaryFlag && process_key) {
+                        this.updateprocess(binaryFlag, process_key, process, analyseappinfo, rawfile);
-                            this.uploadprocess[process_key] = {process, analyseappinfo};
-                        }
                     })
                 } else if (analyseappinfo.storage === 2) {
                     // eslint-disable-next-line no-unused-vars
                     uploadaliyunoss(rawfile, certinfo, this, res => {
                         this.updateappinfo(file, analyseappinfo, multiFlag, binaryFlag, resolve)
                     }, process => {
-                        if (binaryFlag && process_key) {
+                        this.updateprocess(binaryFlag, process_key, process, analyseappinfo, rawfile);
-                            this.uploadprocess[process_key] = {
-                                process,
-                                short: analyseappinfo.short,
-                                appname: analyseappinfo.appname
-                            };
-                        }
                     });
                 } else {
                     //本地
@@ -821,9 +845,7 @@
                     uploadlocalstorage(rawfile, certinfo, this, res => {
                         this.updateappinfo(file, analyseappinfo, multiFlag, binaryFlag, resolve)
                     }, process => {
-                        if (binaryFlag && process_key) {
+                        this.updateprocess(binaryFlag, process_key, process, analyseappinfo, rawfile);
-                            this.uploadprocess[process_key] = {process, analyseappinfo};
-                        }
                     })
                 }
             },

fir_client/src/utils/index.js

@@ -604,5 +604,9 @@ export function diskSize(num) {
         i = l; //不小于1的话这个单位就合适或者还要大于这个单位 接着循环
     }
     return (num / Math.pow(k, i)).toFixed(1) + ' ' + sizeStr[i];  //循环结束 或 条件成立 返回字符
+}
 
+export function upspeed(start_time, file_size, percent) {
+    const now_time = Date.now();
+    return diskSize(file_size * percent * 10 / (now_time - start_time))
 }