优化学习路径加载失败和加载慢

inspur-service/inspur-admin/src/main/java/com/inspur/web/controller/develop/LearningPathInfoController.java

@@ -102,4 +102,18 @@ public class LearningPathInfoController extends BaseController
         return toAjax(learningPathInfoService.deleteLearningPathInfoByIds(ids));
     }
 
+    /**
+     * 获取图片base64
+     *
+     * @Author xusd
+     * @Date 16:44 2024/5/11
+     * @param id 学习路径id
+     * @return java.lang.String
+     */
+    @PreAuthorize("@ss.hasPermi('develop:learningPath:query')")
+    @GetMapping("/getPhotoBase64ById/{id}")
+    public String getPhotoBase64ById(@PathVariable("id") String id){
+        return learningPathInfoService.getPhotoBase64ById(id);
+    }
+
 }

inspur-service/inspur-develop/src/main/java/com/inspur/develop/service/ILearningPathInfoService.java

@@ -58,4 +58,14 @@ public interface ILearningPathInfoService
      * @return 结果
      */
     public int deleteLearningPathInfoById(String id);
+
+    /**
+     * 获取图片base64
+     *
+     * @Author xusd
+     * @Date 16:44 2024/5/11
+     * @param id 学习路径id
+     * @return java.lang.String
+     */
+    String getPhotoBase64ById(String id);
 }

inspur-service/inspur-develop/src/main/java/com/inspur/develop/service/impl/LearningPathInfoServiceImpl.java

@@ -50,10 +50,6 @@ public class LearningPathInfoServiceImpl implements ILearningPathInfoService
         LearningPathInfo learningPathInfo = learningPathInfoMapper.selectLearningPathInfoById(id);
         if (Objects.nonNull(learningPathInfo)){
             learningPathInfo.setLearningPathCourseList(learningPathCourseService.selectLearningPathCourseByPathId(id));
-            if (StringUtils.isNotEmpty(learningPathInfo.getFileName())){
-                byte[] bytes = sftpServices.downLoadFile(learningPathInfo.getFileName());
-                learningPathInfo.setPhotoBase("data:image/png;base64,"+Base64.getEncoder().encodeToString(bytes));
-            }
         }
         return learningPathInfo;
     }
@@ -145,4 +141,24 @@ public class LearningPathInfoServiceImpl implements ILearningPathInfoService
     {
         return learningPathInfoMapper.deleteLearningPathInfoById(id);
     }
+
+    /**
+     * 获取图片base64
+     *
+     * @Author xusd
+     * @Date 16:44 2024/5/11
+     * @param id 学习路径id
+     * @return java.lang.String
+     */
+    @Override
+    public String getPhotoBase64ById(String id) {
+        LearningPathInfo learningPathInfo = learningPathInfoMapper.selectLearningPathInfoById(id);
+        if (Objects.nonNull(learningPathInfo)){
+            if (StringUtils.isNotEmpty(learningPathInfo.getFileName())){
+                byte[] bytes = sftpServices.downLoadFile(learningPathInfo.getFileName());
+                return "data:image/png;base64," + Base64.getEncoder().encodeToString(bytes);
+            }
+        }
+        return "";
+    }
 }

inspur-ui/src/api/develop/learningPath.js

@@ -42,3 +42,11 @@ export function delLearningPath(id) {
     method: 'delete'
   })
 }
+
+// 查询学习路径信息详细
+export function getPhotoBase64ById(id) {
+  return request({
+    url: '/develop/learningPath/getPhotoBase64ById/' + id,
+    method: 'get'
+  })
+}

inspur-ui/src/views/develop/learningPath/index.vue

@@ -361,7 +361,9 @@
         </el-card>
         <el-card>
           <div slot="header" class="clearfix"><span>学习路径</span></div>
-          <img :src="learningPathForm.photoBase" alt="learningPathForm.fileName" width="700px" height="400px">
+          <div v-loading="photoBase64Loading" element-loading-text="学习路径图加载中">
+            <img :src="photoBase64" alt="learningPathForm.fileName" width="700px" height="400px">
+          </div>
           <el-table :data="allDiaLogSelectList">
             <el-table-column label="课程名称" align="center" prop="courseName" />
             <el-table-column label="课程类型" align="center" prop="typeName" />
@@ -393,7 +395,8 @@ import {
   delLearningPath,
   getLearningPath,
   listLearningPath,
-  updateLearningPath
+  updateLearningPath,
+  getPhotoBase64ById
 } from '@/api/develop/learningPath'
 import { getToken } from '@/utils/auth'
 
@@ -408,6 +411,8 @@ export default {
   dicts: ['class_type','sys_normal_disable','train_doc_type'],
   data() {
     return {
+      photoBase64Loading: false,
+      photoBase64: "",
       learningPathForm: {},
       loadingLearningPath: false,
       onLineDiaLogSelectList: [],
@@ -579,6 +584,7 @@ export default {
     cancelShowLearningPath(){
       this.loadingLearningPath = false;
       this.learningPathForm = {};
+      this.photoBase64 = "";
     },
     //确认选择课程框
     submitSelectCourseForm(){
@@ -780,6 +786,7 @@ export default {
     },
     handleGetLearningPath(row){
       this.reset();
+      this.photoBase64Loading = true;
       const id = row.id || this.ids
       getLearningPath(id).then(response => {
         this.learningPathForm = response.data;
@@ -792,6 +799,10 @@ export default {
         this.allDiaLogSelectList = this.learningPathForm.learningPathCourseList;
         this.loadingLearningPath = true;
       });
+      getPhotoBase64ById(id).then(res=>{
+        this.photoBase64 = res;
+        this.photoBase64Loading = false;
+      });
     },
     /** 提交按钮 */
     submitForm() {