Browse Source

再优化下加载方式

cxmo 7 months ago
parent
commit
ac81dc86cc

+ 6 - 1
src/main.js

@@ -219,8 +219,10 @@ router.beforeEach(async(to, from, next) => {
     if (window._hmt) {
       window._hmt.push(["_trackPageview", "/#" + to.fullPath]);
     }
+/*     //store没做持久化存储,在请求前先获取旧的
+    store.dispatch('getPermissionButtonsOld') */
     //获取权限按钮
-    to.path != "/login"&&to.path!='/temppage'&&store.dispatch('getPermissionButtons')
+    to.path != "/login"&&to.path!='/temppage'&&await store.dispatch('getPermissionButtons')
     next();
   } else {
     next({ path: "/404" });
@@ -295,3 +297,6 @@ if (
     false
   );
 }
+/* window.addEventListener('beforeunload',()=>{
+    sessionStorage.setItem('permissionBtn',JSON.stringify(store.state.permissionButton.permissionButtons))
+}) */

+ 34 - 18
src/views/ppt_manage/mixins/pptMixins.js

@@ -200,6 +200,7 @@ export default {
     */
     //获取图表数据
     async getchartData(id,lang='ch') {
+        console.log('getChartData')
       const currentLang = this.currentLang || lang
       const res = await dataBaseInterface.getChartByCode({
         UniqueCode: id,
@@ -499,29 +500,44 @@ export default {
         let needGetDataArr = []
         for(let i=0;i<chartElements.length;i++) {
             if(!this.optionMap[chartElements[i].chartId]){
-                needGetDataArr.push(new Promise((res,rej)=>{
+                /* needGetDataArr.push(new Promise((res,rej)=>{
                     res(this.getchartData(chartElements[i].chartId))
-                }))
+                })) */
+                needGetDataArr.push(chartElements[i].chartId)
             }
-                /* await this.getchartData(chartElements[i].chartId);
-                //由于演示页的图表没有await加载,在这里更新每一张图表的信息
-                if(fromType==='present'){
+        }
+        if(needGetDataArr.length){
+            //由于存在加载过程中会切换PPT/页面的情况,不能一股脑加载
+            const chunkArray = (array, chunkSize)=>{
+                let result = [];
+                for (let i = 0; i < array.length; i += chunkSize) {
+                result.push(array.slice(i, i + chunkSize));
+                }
+                return result;
+            }
+            //将需要加载的数据分组
+            const chunkedArray = chunkArray(needGetDataArr, 6);
+            for(let i=0;i<chunkedArray.length;i++){
+                if(!chunkedArray[i].length) continue
+                if(this.interruptLoad) return
+                const promisesList = chunkedArray[i].map(chartId=>{
+                    return new Promise((res,rej)=>{
+                        res(this.getchartData(chartId))
+                    })
+                })
+                await Promise.all(promisesList).then(()=>{}).catch((e)=>{
+                    console.log('catch',e)
+                })
+                console.log(`第${i}组加载完成`)
+            }
+            console.log('全部加载完成')
+            if(fromType==='present'){
+                for(let i=0;i<chartElements.length;i++) {
                     let temp = getChartInfo(this.optionMap[chartElements[i].chartId])
                     this.$store.commit('SET_CHART_INFO',{chartId:chartElements[i].chartId,chartInfo:temp})
-                } */
-        }
-        if(needGetDataArr.length)
-            await Promise.all(needGetDataArr).then(()=>{
-                //console.log('promise all then chart')
-                if(fromType==='present'){
-                    for(let i=0;i<chartElements.length;i++) {
-                        let temp = getChartInfo(this.optionMap[chartElements[i].chartId])
-                        this.$store.commit('SET_CHART_INFO',{chartId:chartElements[i].chartId,chartInfo:temp})
-                    }
                 }
-            }).catch((e)=>{
-                console.log('catch',e)
-            })
+            }
+        }
     },
     async sheetListHandle(sheetElements){
       let needGetDataArr = []

+ 1 - 1
src/views/ppt_manage/newVersion/components/catalog/pptContent.vue

@@ -128,7 +128,7 @@ export default {
         text: `${this.$t('Slides.retrieving_ppt_data')}...`,
         spinner: 'el-icon-loading',
         customClass:'loading',
-        target:document.querySelector('.ppt-content-wrap'),
+        target:document.querySelector('.catalog-wrap'),
         background: 'rgba(255, 255, 255, 0.8)'
       });
       await this.getpptData()

+ 1 - 1
src/views/ppt_manage/newVersion/components/catalog/pptContentEn.vue

@@ -128,7 +128,7 @@ export default {
         text: `${this.$t('Slides.retrieving_ppt_data')}...`,
         spinner: 'el-icon-loading',
         customClass:'loading',
-        target:document.querySelector('.ppt-content-wrap'),
+        target:document.querySelector('.catalog-wrap'),
         background: 'rgba(255, 255, 255, 0.8)'
       });
       await this.getpptData()

+ 5 - 0
src/vuex/modules/permissionButton.js

@@ -34,6 +34,11 @@ const permissionButtons = {
                 commit('SET_PERMISSION_BUTTONS',buttons)
                 resolve('获取权限按钮成功') */
             })
+        },
+        getPermissionButtonsOld({commit}){
+            const permissionList = JSON.parse(sessionStorage.getItem('permissionBtn'))||[]
+            commit('SET_PERMISSION_BUTTONS',permissionList)
+            sessionStorage.removeItem('permissionBtn')
         }
     },
     getters:{}