算法库大文件上传

src/api/algorithmsLibrary.js

@@ -1,3 +1,5 @@
+// 算法库
+
 const basePart = '/simulation/resource/server';
 
 const selectSharedAlgorithmList = basePart + '/algorithm/selectSharedAlgorithmList'; // 算法库查询公有列表

src/api/common.js

@@ -6,6 +6,8 @@ const getDictTreesByTypes = '/simulation/resource/server/dict/getDictTreesByType
 
 const uploadWj = basePart + '/simulation/resource/server/file/uploadWj'; // 上传
 const download = basePart + '/simulation/resource/common/minio/download'; // 下载方法
+const uploadProcessBar = basePart + '/simulation/resource/common/minio/uploadProcessBar'; // 算法上传
+
 
 export default {
     single,
@@ -13,7 +15,8 @@ export default {
     getDictTreesByTypes,
     
     uploadWj,
-    download
+    download,
+    uploadProcessBar
 }
 
 //10.15.12.74:7001/simulation/oauth/client/sign/single?code=1001&ticket=1001

src/api/index.js

@@ -1,10 +1,10 @@
 import Vue from "vue";
 
-import common from './common.js'
-import sceneLibrary from './sceneLibrary.js'
-import workManagement from './workManagement.js'
-import modelLibrary from './modelLibrary.js'
-import algorithmsLibrary from './algorithmsLibrary.js'
+import common from './common.js' // 公共
+import sceneLibrary from './sceneLibrary.js' // 场景库
+import workManagement from './workManagement.js' // 工作管理
+import modelLibrary from './modelLibrary.js' // 模型库
+import algorithmsLibrary from './algorithmsLibrary.js' // 算法库
 
 const api = {
     common,

src/components/upload/upload.vue

@@ -6,10 +6,10 @@
             :on-change="handleChange"
             :on-remove="handleRemove"
             :on-preview="preview"
-            :on-progress="progress"
             :on-success="success"
             :on-error="error"
             :http-request="toUpload"
+            :auto-upload="true"
             :file-list="fileList"
             :limit="limit"
             :on-exceed="handleExceed"
@@ -44,6 +44,11 @@ export default {
             type: Boolean,
             default: false,
         },
+        // 上传url
+        uploadUrl: {
+            type: String,
+            default: "",
+        },
     },
     data() {
         return {
@@ -81,13 +86,7 @@ export default {
             this.attachmentList.splice(removeIndex, 1);
             this.$emit("attachmentChange", this.attachmentList);
         },
-        progress(event, file, fileList){
-            console.log(event);
-            console.log(file);
-            console.log(fileList);
-        },
         async toUpload(file) {
-            console.log(file);
             let _this = this;
             // 获取MD5值
             /* await this.$md5(file.file).then((res) => {
@@ -107,16 +106,21 @@ export default {
 
                 let axios = this.$axios;
                 // 处理大文件上传
-                if(this.needInstance) {
+                if (this.needInstance) {
                     axios = this.$instance;
                 }
 
                 // 上传前进行通知
                 this.$emit("willUpload");
 
+                let url = this.uploadUrl;
+                if (!url) {
+                    url = this.$api.common.uploadWj;
+                }
+
                 await axios({
                     method: "post",
-                    url: this.$api.common.uploadWj,
+                    url,
                     data: formData,
                     withCredentials: true,
                     headers: {
@@ -138,7 +142,7 @@ export default {
                             this.$emit("attachmentChange", this.attachmentList);
                             // 上传完成后进行通知
                             this.$emit("didUpload", "success");
-                        }else {
+                        } else {
                             this.$message.error(res.message || "上传失败");
                             this.$emit("didUpload", "fail");
                         }
@@ -159,7 +163,9 @@ export default {
             return false;
             console.log(file);
             console.log(this.attachmentList);
-            let item = this.attachmentList.find((item) => item.fileName.endsWith(file.name));
+            let item = this.attachmentList.find((item) =>
+                item.fileName.endsWith(file.name)
+            );
             this.download(item.fileName, item.attachmentName);
         },
         download(downPath, downName) {

src/router/index.js

@@ -1,11 +1,11 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 
-import modelLibrary from "./modelLibrary";
-import algorithmsLibrary from "./algorithmsLibrary";
-import sceneLibrary from "./sceneLibrary";
-import systemManagement from "./systemManagement";
-import workManagement from "./workManagement";
+import modelLibrary from "./modelLibrary"; // 模型库
+import algorithmsLibrary from "./algorithmsLibrary"; // 算法库
+import sceneLibrary from "./sceneLibrary"; // 场景库
+import systemManagement from "./systemManagement"; // 账户管理
+import workManagement from "./workManagement"; // 工作管理
 
 Vue.use(VueRouter);
 

src/router/systemManagement.js

@@ -2,7 +2,8 @@ export default [{
         path: "/accountManagement",
         name: "accountManagement",
         meta: {
-            tabname: "账户管理"
+            tabname: "账户管理",
+            menuKind: "systemManagement"
         },
         component: () => import("@/views/systemManagement/accountManagement")
     },
@@ -10,7 +11,8 @@ export default [{
         path: "/addAccount",
         name: "addAccount",
         meta: {
-            tabname: "创建账户"
+            tabname: "创建账户",
+            menuKind: "systemManagement"
         },
         component: () => import("@/views/systemManagement/addAccount")
     },

src/store/index.js

@@ -9,6 +9,7 @@ export default new Vuex.Store({
     configTitleList: ['摄像头', '完美传感器', '激光雷达', 'GPS'],
     fileHost: 'http://10.15.12.70:8001', // 开发环境需要连开发服务器地址，上线后会用相对地址拼接fileUrl
     fileUrl: '/simulation/resource/common/minio/preview',
+    themeColor: '#3397FF',
   },
   mutations: {},
   actions: {},

src/views/algorithmsLibrary/exportAlgorithms.vue

@@ -43,6 +43,7 @@
                             type="algorithmFile"
                             :objectPath="objectPath"
                             :needInstance="true"
+                            :uploadUrl="uploadUrl"
                             @attachmentChange="attachmentChange"
                             @willUpload="willUpload"
                             @didUpload="didUpload"
@@ -69,11 +70,23 @@
                 </div>
             </el-col>
         </el-row>
+
+        <div class="progressBox" v-if="isUploading">
+            <div class="progress">
+                <el-progress
+                    type="circle"
+                    :width="120"
+                    :percentage="percentage"
+                    :color="customColor"
+                ></el-progress>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import upload from "@/components/upload/upload";
+import { mapState } from "vuex";
 
 export default {
     name: "exportAlgorithms", // 导入算法详情
@@ -99,16 +112,22 @@ export default {
                     { required: true, message: "请上传", trigger: "change" },
                 ],
             },
-            // attachmentList: [],
-            objectPath: "",
+            objectPath: "", // 用于上传文件的传参
             isUploading: false,
+            uploadUrl: this.$api.common.uploadProcessBar,
+            timer: "", // 用来接收进度条的定时器
+            percentage: 0, // 进度条数据
+            customColor: "", // 进度条颜色
         };
     },
 
+    computed: {
+        ...mapState(["themeColor"]),
+    },
+
     methods: {
         attachmentChange(obj) {
-            // this.attachmentList = obj;
-            console.log(obj);
+            // console.log(obj);
             if (obj.length > 0) {
                 this.form.minioPath = obj[0].fileName;
                 this.$refs.form.clearValidate("minioPath");
@@ -152,24 +171,59 @@ export default {
                 },
             }).then((res) => {
                 // console.log(res);
-                if (res.code == 200) {
+                if (res.code == 200 && res.info) {
+                    console.log(res.info);
                     
+                    if (this.percentage >= res.info * 100) {
+                        if (this.percentage < 99) {
+                            ++this.percentage;
+                        }
+                    } else {
+                        this.percentage = res.info * 100;
+                    }
+
+                    this.percentage = Math.round(this.percentage);
+
+                    if (this.percentage > 100) {
+                        this.percentage = 100;
+                    }
+
+                    if (!this.isUploading) {
+                        clearInterval(this.timer);
+                        this.percentage = 0;
+                    }
                 } else {
                     this.$message.error(res.message || "获取进度信息失败");
                 }
             });
         },
         willUpload() {
-            setTimeout(() => {
-                this.isUploading = true;
-                // this.onProgress();
-            }, 0);
+            this.isUploading = true;
+
+            // let timer = setTimeout(() => {
+            //     this.isUploading = true;
+            //     this.onProgress();
+            //     clearTimeout(timer);
+            // }, 100);
+
+            this.timer = setInterval(() => {
+                this.onProgress();
+                if (!this.isUploading) {
+                    clearInterval(this.timer);
+                    this.percentage = 0;
+                }
+            }, 3000);
+        },
+        didUpload(state) {
+            this.isUploading = false;
+            clearInterval(this.timer);
+            this.percentage = 0;
         },
-        didUpload(state) {},
     },
 
     mounted() {
         this.objectPath = this.$getObjectPathByRandom();
+        this.customColor = this.themeColor;
 
         let id = this.$route.query.id;
         if (id) {
@@ -217,5 +271,25 @@ export default {
     .upload {
         margin-top: 15px;
     }
+
+    .progressBox {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 3000;
+        background-color: rgba(0, 0, 0, 0.2);
+
+        .progress {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 120px;
+            height: 120px;
+            margin-top: -60px;
+            margin-left: -60px;
+        }
+    }
 }
 </style>

vue.config.js

@@ -89,7 +89,8 @@ module.exports = {
                 // target: 'http://10.15.12.70/simulation',
                 // target: 'http://10.15.12.70:7001', // 登录
                 // target: 'http://10.15.12.73:7003',  // 王志强
-                target: 'http://10.15.12.70', // windowstest
+                // target: 'http://10.15.12.70', // windowstest
+                target: 'http://10.15.12.87:8001',  // 赵艳
                 // target: 'http://192.168.30.75',  // gq
                 // target: 'http://47.94.105.148',  // aliyun
                 // target: 'http://10.15.12.74:8001',
@@ -101,9 +102,9 @@ module.exports = {
             },
             '/simulation/resource/server': {
                 // target: 'http://10.15.12.73:7003', // 王志强
-                target: 'http://10.15.12.88:7003',  // 王耀栋
+                // target: 'http://10.15.12.88:7003',  // 王耀栋
                 // target: 'http://10.15.12.72:7003',  // 王晓峰
-                // target: 'http://10.15.12.87:7003',  // 赵艳
+                target: 'http://10.15.12.87:7003',  // 赵艳
                 // target: 'http://10.15.12.70',  // windowstest
                 // target: 'http://192.168.30.75',  // gq
                 // target: 'http://47.94.105.148',  // aliyun