自测bug修复：素材选择弹窗里无法上传全景图

packages/qjkankan-editor/src/Store/index.js

@@ -168,6 +168,9 @@ const store = new Vuex.Store({
     setUploadStatusListImage(state, data) {
       state.uploadStatusListImage = data
     },
+    setUploadStatusListPano(state, data) {
+      state.uploadStatusListPano = data
+    },
     setUploadStatusListAudio(state, data) {
       state.uploadStatusListAudio = data
     },

packages/qjkankan-editor/src/components/materialSelectorForEditor.vue

@@ -80,7 +80,7 @@
                 <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
               </div>
               <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'dpi'"></span>
-              <span  v-if="tableItemStructure.key === 'dpi'">上传素材 {{item.progress * 100}}%</span>
+              <span  v-if="tableItemStructure.key === 'dpi'">上传素材 {{Math.round(item.progress * 100)}}%</span>
               <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
             </span>
           </template>
@@ -144,11 +144,72 @@
         <span class="table-head" v-for="(item,i) in tableHeadersForPano" :key="i">{{item.name}}</span>
       </div>
       <div
-        v-if="panoList.length !== 0 || hasMorePanoData"
+        v-if="panoListRealLength !== 0 || hasMorePanoData"
         class="table-body"
         v-infinite-scroll="requestMorePanoData"
         :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
       >
+        <!-- vuex中的上传中数据 -->
+        <div class="table-body-row" v-for="(item, i) in uploadStatusListPano" :key="item.uid">
+          <!-- 如果已经上传成功 -->
+          <template v-if="item.status === 'SUCCESS'">
+            <span class="table-data">
+              <div class="checkbox">
+                <!-- 负责功能 -->
+                <input
+                  type="checkbox"
+                  @change="e => selectItem(item.successInfo, e)"
+                  :checked="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
+                >
+                <!-- 负责外观 -->
+                <span class="for-outer-circle"></span>
+                <span class="for-inner-circle"></span>
+              </div>
+            </span>
+            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
+              <div v-if="tableItemStructure.type=='image'" class="list-img">
+                <img :src="item.successInfo[tableItemStructure.key] + `?x-oss-process=image/resize,p_10&${Math.random()}`" alt="">
+              </div>
+              <span  v-else class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.successInfo[tableItemStructure.key] : ''">{{ item.successInfo[tableItemStructure.key] }}</span>
+            </span>
+          </template>
+          <!-- 如果还在上传或切图处理中 -->
+          <template v-else-if="item.status = 'LOADING'">
+            <span class="table-data">
+              <div class="checkbox">
+                <span class="for-outer-circle"></span>
+                <span class="for-inner-circle disabled"></span>
+              </div>
+            </span>
+            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
+              <div v-if="tableItemStructure.type=='image'" class="list-img">
+                <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
+              </div>
+              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
+              <span  v-if="tableItemStructure.key === 'fileSize' && item.ifKnowProgress">上传素材 {{Math.round(item.progress * 100)}}%</span>
+              <span  v-if="tableItemStructure.key === 'fileSize' && !item.ifKnowProgress">{{item.statusText}}</span>
+              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
+            </span>
+          </template>
+          <!-- 如果上传失败了 -->
+          <template v-else-if="item.status = 'FAIL'">
+            <span class="table-data">
+              <div class="checkbox">
+                <span class="for-outer-circle"></span>
+                <span class="for-inner-circle disabled"></span>
+              </div>
+            </span>
+            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
+              <div v-if="tableItemStructure.type=='image'" class="list-img">
+                <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
+              </div>
+              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
+              <span  v-if="tableItemStructure.key === 'fileSize'">上传失败</span>
+              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
+            </span>
+          </template>
+        </div>
+        <!-- 本组件内的列表数据 -->
         <div class="table-body-row" v-for="(item,i) in panoList" :key="i">
           <span class="table-data">
             <div class="checkbox">
@@ -247,7 +308,7 @@
                 >
               </div>
               <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
-              <span  v-if="tableItemStructure.key === 'fileSize'">上传素材 {{item.progress * 100}}%</span>
+              <span  v-if="tableItemStructure.key === 'fileSize'">上传素材 {{Math.round(item.progress * 100)}}%</span>
               <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
             </span>
           </template>
@@ -375,7 +436,7 @@
                 >
               </div>
               <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
-              <span  v-if="tableItemStructure.key === 'fileSize'">上传素材 {{item.progress * 100}}%</span>
+              <span  v-if="tableItemStructure.key === 'fileSize'">上传素材 {{Math.round(item.progress * 100)}}%</span>
               <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
             </span>
           </template>
@@ -503,7 +564,7 @@
           :failString="fileInputFailString"
           :limitFailStr="fileInputLimitFailStr"
           :acceptType="fileInputAcceptType"
-          :mediaType="currentMaterialType"
+          :mediaType="fileInputMediaType"
           :limit="fileInputLimit"
           @file-change="onFileInputChange"
         ></FileInput>
@@ -524,10 +585,9 @@ import {
   getMaterialList,
   getSceneList,
   uploadMaterial,
-  editMaterial,
-  delMaterial,
+  checkMStatus,
 } from "@/api";
-import { changeByteUnit } from '@/utils/file'
+import { getImgWH, changeByteUnit } from "@/utils/file";
 import config from "@/config";
 import { debounce } from "@/utils/other.js"
 import FileInput from "@/components/shared/uploads/UploadMultiple.vue";
@@ -590,7 +650,22 @@ export default {
         }
       },
       immediate: false,
-    }
+    },
+    needLongPolling: {
+      handler: function (newVal) {
+        if (!newVal) {
+          clearInterval(this.longPollingIntervalId)
+          this.longPollingIntervalId = null
+        } else {
+          console.log('need long polling!');
+          clearInterval(this.longPollingIntervalId)
+          this.longPollingIntervalId = null
+          this.longPollingIntervalId = setInterval(() => {
+            this._checkMStatus();
+          }, 3000);
+        }
+      },
+    },
   },
   computed:{
     ...mapState({
@@ -684,7 +759,7 @@ export default {
       }
       return ret
     },
-    fileInputmediaType() {
+    fileInputMediaType() {
       let ret = ''
       switch (this.currentMaterialType) {
         case 'pano':
@@ -729,6 +804,11 @@ export default {
         return item.status === 'SUCCESS'
       }).length
     },
+    panoListRealLength() {
+      return this.imageList.length + this.uploadStatusListPano.filter((item) => {
+        return item.status === 'SUCCESS'
+      }).length
+    },
     audioListRealLength() {
       return this.audioList.length + this.uploadStatusListAudio.filter((item) => {
         return item.status === 'SUCCESS'
@@ -739,6 +819,11 @@ export default {
         return item.status === 'SUCCESS'
       }).length
     },
+    needLongPolling() {
+      return this.uploadStatusListPano.some((item) => {
+        return item.status === 'LOADING' && item.ifKnowProgress === false
+      })
+    },
   },
   data () {
     return {
@@ -764,9 +849,10 @@ export default {
       hasMoreAudioData: true,
       hasMoreVideoData: true,
       hasMore3DData: true,
+
+      longPollingIntervalId: null,
     }
   },
-
   methods: {
     selectItem(item, e) {
       item.materialType = this.currentMaterialType // 三维场景数据没有type字段来表明自己是三维场景。所以统一加一个字段。
@@ -828,7 +914,7 @@ export default {
       const latestUsedSearchKey = this.searchKey
       getMaterialList(
         {
-          pageNum: Math.floor(this.panoList.length / config.PAGE_SIZE) + 1,
+          pageNum: Math.floor(this.panoListRealLength / config.PAGE_SIZE) + 1,
           pageSize: config.PAGE_SIZE,
           searchKey: this.searchKey,
           type: 'pano',
@@ -841,7 +927,7 @@ export default {
             return i;
           });
           this.panoList = this.panoList.concat(newData)
-          if (this.panoList.length === data.data.total) {
+          if (this.panoListRealLength === data.data.total) {
             this.hasMorePanoData = false
           }
           this.isRequestingMorePanoData = false
@@ -954,6 +1040,10 @@ export default {
         this.isRequestingMorePanoData = false
         this.hasMorePanoData = true
         this.panoList = []
+        let filterResult = this.uploadStatusListPano.filter((item) => {
+          return item.status === 'LOADING'
+        })
+        this.$store.commit('setUploadStatusListPano', filterResult)
         this.requestMorePanoData()
       } else if (type === 'audio') {
         this.isRequestingMoreAudioData = false
@@ -1003,6 +1093,7 @@ export default {
         if (
           eachFile.type.indexOf("jpeg") <= -1
         ) {
+          console.log('格式不对！');
           setTimeout(() => {
             this.$msg({
               message: `“${eachFile.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
@@ -1062,7 +1153,7 @@ export default {
             file: eachFile
           },
           {
-            type: TYPE,
+            type: 'pano',
             uid: itemInUploadList.uid,
           },
           (response) => { // 上传成功
@@ -1072,21 +1163,24 @@ export default {
           },
           (err) => {
             if (err.statusText === 'abort') { // 用户取消了上传任务。
-              const index = this.uploadListForUI.findIndex((eachItem) => {
+              console.log('用户取消了任务！');
+              const index = this.uploadStatusListPano.findIndex((eachItem) => {
                 return eachItem.uid === itemInUploadList.uid
               })
-              this.uploadListForUI.splice(index, 1)
+              this.uploadStatusListPano.splice(index, 1)
             } else {
+              console.log('失败！');
               itemInUploadList.status = 'FAIL'
               itemInUploadList.statusText = '素材上传失败'
             }
           },
           (progress) => {
+            console.log('进度：', progress);
             itemInUploadList.progress = progress
           }
         )
 
-        this.uploadListForUI.push(itemInUploadList);
+        this.uploadStatusListPano.unshift(itemInUploadList);
       })
     },
     onImageFileInputChange(e) {
@@ -1314,6 +1408,39 @@ export default {
         this.uploadStatusListVideo.unshift(itemInUploadList);
       });
     },
+    _checkMStatus() {
+      let needPollingTaskList = this.uploadStatusListPano.filter((item) => item.status === 'LOADING' && item.ifKnowProgress === false);
+      if (needPollingTaskList.length > 0) {
+        checkMStatus(
+          {
+            ids: needPollingTaskList.map((item) => item.backendId),
+            islongpolling: true,
+          },
+          (res) => {
+            // 1切图中，2失败，3成功
+            res.data.forEach(eachRes => {
+              if (eachRes.status === 2) {
+                const index = this.uploadStatusListPano.findIndex(eachTask => eachTask.backendId === eachRes.id)
+                if (index >= 0) {
+                  const targetItem = this.uploadStatusListPano[index]
+                  targetItem.status = 'FAIL'
+                  targetItem.statusText = '素材切图失败'
+                  targetItem.ifKnowProgress = true
+                }
+              } else if (eachRes.status === 3) {
+                const index = this.uploadStatusListPano.findIndex(eachTask => eachTask.backendId === eachRes.id)
+                if (index >= 0) {
+                  const targetItem = this.uploadStatusListPano[index]
+                  targetItem.status = 'SUCCESS'
+                  eachRes.fileSize = changeByteUnit(Number(eachRes.fileSize));
+                  targetItem.successInfo = eachRes
+                }
+              }
+            });
+          }
+        );
+      }
+    },
   },
   mounted() {
     console.log('tableHeadersForAudio: ', this.tableHeadersForAudio);
@@ -1323,6 +1450,9 @@ export default {
     this.$store.commit('setUploadStatusListImage', this.uploadStatusListImage.filter((item) => {
       return item.status === 'LOADING'
     }))
+    this.$store.commit('setUploadStatusListPano', this.uploadStatusListPano.filter((item) => {
+      return item.status === 'LOADING'
+    }))
     this.$store.commit('setUploadStatusListAudio', this.uploadStatusListAudio.filter((item) => {
       return item.status === 'LOADING'
     }))

packages/qjkankan-editor/src/components/materialSelectorForManageCenter.vue

@@ -105,7 +105,7 @@
                 <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
               </div>
               <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'dpi'"></span>
-              <span  v-if="tableItemStructure.key === 'dpi'">上传素材 {{item.progress * 100}}%</span>
+              <span  v-if="tableItemStructure.key === 'dpi'">上传素材 {{Math.round(item.progress * 100)}}%</span>
               <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
             </span>
           </template>
@@ -169,11 +169,72 @@
         <span class="table-head" v-for="(item,i) in tableHeadersForPano" :key="i">{{item.name}}</span>
       </div>
       <div
-        v-if="panoList.length !== 0 || hasMorePanoData"
+        v-if="panoListRealLength !== 0 || hasMorePanoData"
         class="table-body"
         v-infinite-scroll="requestMorePanoData"
         :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
       >
+        <!-- vuex中的上传中数据 -->
+        <div class="table-body-row" v-for="(item, i) in uploadStatusListPano" :key="item.uid">
+          <!-- 如果已经上传成功 -->
+          <template v-if="item.status === 'SUCCESS'">
+            <span class="table-data">
+              <div class="checkbox">
+                <!-- 负责功能 -->
+                <input
+                  type="checkbox"
+                  @change="e => selectItem(item.successInfo, e)"
+                  :checked="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
+                >
+                <!-- 负责外观 -->
+                <span class="for-outer-circle"></span>
+                <span class="for-inner-circle"></span>
+              </div>
+            </span>
+            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
+              <div v-if="tableItemStructure.type=='image'" class="list-img">
+                <img :src="item.successInfo[tableItemStructure.key] + `?x-oss-process=image/resize,p_10&${Math.random()}`" alt="">
+              </div>
+              <span  v-else class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.successInfo[tableItemStructure.key] : ''">{{ item.successInfo[tableItemStructure.key] }}</span>
+            </span>
+          </template>
+          <!-- 如果还在上传或切图处理中 -->
+          <template v-else-if="item.status = 'LOADING'">
+            <span class="table-data">
+              <div class="checkbox">
+                <span class="for-outer-circle"></span>
+                <span class="for-inner-circle disabled"></span>
+              </div>
+            </span>
+            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
+              <div v-if="tableItemStructure.type=='image'" class="list-img">
+                <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
+              </div>
+              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
+              <span  v-if="tableItemStructure.key === 'fileSize' && item.ifKnowProgress">上传素材 {{Math.round(item.progress * 100)}}%</span>
+              <span  v-if="tableItemStructure.key === 'fileSize' && !item.ifKnowProgress">{{item.statusText}}</span>
+              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
+            </span>
+          </template>
+          <!-- 如果上传失败了 -->
+          <template v-else-if="item.status = 'FAIL'">
+            <span class="table-data">
+              <div class="checkbox">
+                <span class="for-outer-circle"></span>
+                <span class="for-inner-circle disabled"></span>
+              </div>
+            </span>
+            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
+              <div v-if="tableItemStructure.type=='image'" class="list-img">
+                <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
+              </div>
+              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
+              <span  v-if="tableItemStructure.key === 'fileSize'">上传失败</span>
+              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
+            </span>
+          </template>
+        </div>
+        <!-- 本组件内的列表数据 -->
         <div class="table-body-row" v-for="(item,i) in panoList" :key="i">
           <span class="table-data">
             <div class="checkbox">
@@ -272,7 +333,7 @@
                 >
               </div>
               <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
-              <span  v-if="tableItemStructure.key === 'fileSize'">上传素材 {{item.progress * 100}}%</span>
+              <span  v-if="tableItemStructure.key === 'fileSize'">上传素材 {{Math.round(item.progress * 100)}}%</span>
               <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
             </span>
           </template>
@@ -400,7 +461,7 @@
                 >
               </div>
               <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
-              <span  v-if="tableItemStructure.key === 'fileSize'">上传素材 {{item.progress * 100}}%</span>
+              <span  v-if="tableItemStructure.key === 'fileSize'">上传素材 {{Math.round(item.progress * 100)}}%</span>
               <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
             </span>
           </template>
@@ -528,7 +589,7 @@
           :failString="fileInputFailString"
           :limitFailStr="fileInputLimitFailStr"
           :acceptType="fileInputAcceptType"
-          :mediaType="currentMaterialType"
+          :mediaType="fileInputMediaType"
           :limit="fileInputLimit"
           @file-change="onFileInputChange"
         ></FileInput>
@@ -549,10 +610,9 @@ import {
   getMaterialList,
   getSceneList,
   uploadMaterial,
-  editMaterial,
-  delMaterial,
+  checkMStatus,
 } from "@/api";
-import { changeByteUnit } from '@/utils/file'
+import { getImgWH, changeByteUnit } from "@/utils/file";
 import config from "@/config";
 import { debounce } from "@/utils/other.js"
 import FileInput from "@/components/shared/uploads/UploadMultiple.vue";
@@ -619,7 +679,22 @@ export default {
         }
       },
       immediate: false,
-    }
+    },
+    needLongPolling: {
+      handler: function (newVal) {
+        if (!newVal) {
+          clearInterval(this.longPollingIntervalId)
+          this.longPollingIntervalId = null
+        } else {
+          console.log('need long polling!');
+          clearInterval(this.longPollingIntervalId)
+          this.longPollingIntervalId = null
+          this.longPollingIntervalId = setInterval(() => {
+            this._checkMStatus();
+          }, 3000);
+        }
+      },
+    },
   },
   computed:{
     ...mapState({
@@ -713,7 +788,7 @@ export default {
       }
       return ret
     },
-    fileInputmediaType() {
+    fileInputMediaType() {
       let ret = ''
       switch (this.currentMaterialType) {
         case 'pano':
@@ -758,6 +833,11 @@ export default {
         return item.status === 'SUCCESS'
       }).length
     },
+    panoListRealLength() {
+      return this.imageList.length + this.uploadStatusListPano.filter((item) => {
+        return item.status === 'SUCCESS'
+      }).length
+    },
     audioListRealLength() {
       return this.audioList.length + this.uploadStatusListAudio.filter((item) => {
         return item.status === 'SUCCESS'
@@ -768,6 +848,11 @@ export default {
         return item.status === 'SUCCESS'
       }).length
     },
+    needLongPolling() {
+      return this.uploadStatusListPano.some((item) => {
+        return item.status === 'LOADING' && item.ifKnowProgress === false
+      })
+    },
   },
   data () {
     return {
@@ -793,9 +878,10 @@ export default {
       hasMoreAudioData: true,
       hasMoreVideoData: true,
       hasMore3DData: true,
+
+      longPollingIntervalId: null,
     }
   },
-
   methods: {
     selectItem(item, e) {
       item.materialType = this.currentMaterialType // 三维场景数据没有type字段来表明自己是三维场景。所以统一加一个字段。
@@ -857,7 +943,7 @@ export default {
       const latestUsedSearchKey = this.searchKey
       getMaterialList(
         {
-          pageNum: Math.floor(this.panoList.length / config.PAGE_SIZE) + 1,
+          pageNum: Math.floor(this.panoListRealLength / config.PAGE_SIZE) + 1,
           pageSize: config.PAGE_SIZE,
           searchKey: this.searchKey,
           type: 'pano',
@@ -870,7 +956,7 @@ export default {
             return i;
           });
           this.panoList = this.panoList.concat(newData)
-          if (this.panoList.length === data.data.total) {
+          if (this.panoListRealLength === data.data.total) {
             this.hasMorePanoData = false
           }
           this.isRequestingMorePanoData = false
@@ -984,6 +1070,10 @@ export default {
         this.isRequestingMorePanoData = false
         this.hasMorePanoData = true
         this.panoList = []
+        let filterResult = this.uploadStatusListPano.filter((item) => {
+          return item.status === 'LOADING'
+        })
+        this.$store.commit('setUploadStatusListPano', filterResult)
         this.requestMorePanoData()
       } else if (type === 'audio') {
         this.isRequestingMoreAudioData = false
@@ -1033,6 +1123,7 @@ export default {
         if (
           eachFile.type.indexOf("jpeg") <= -1
         ) {
+          console.log('格式不对！');
           setTimeout(() => {
             this.$msg({
               message: `“${eachFile.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
@@ -1092,7 +1183,7 @@ export default {
             file: eachFile
           },
           {
-            type: TYPE,
+            type: 'pano',
             uid: itemInUploadList.uid,
           },
           (response) => { // 上传成功
@@ -1102,21 +1193,24 @@ export default {
           },
           (err) => {
             if (err.statusText === 'abort') { // 用户取消了上传任务。
-              const index = this.uploadListForUI.findIndex((eachItem) => {
+              console.log('用户取消了任务！');
+              const index = this.uploadStatusListPano.findIndex((eachItem) => {
                 return eachItem.uid === itemInUploadList.uid
               })
-              this.uploadListForUI.splice(index, 1)
+              this.uploadStatusListPano.splice(index, 1)
             } else {
+              console.log('失败！');
               itemInUploadList.status = 'FAIL'
               itemInUploadList.statusText = '素材上传失败'
             }
           },
           (progress) => {
+            console.log('进度：', progress);
             itemInUploadList.progress = progress
           }
         )
 
-        this.uploadListForUI.push(itemInUploadList);
+        this.uploadStatusListPano.unshift(itemInUploadList);
       })
     },
     onImageFileInputChange(e) {
@@ -1344,15 +1438,51 @@ export default {
         this.uploadStatusListVideo.unshift(itemInUploadList);
       });
     },
+    _checkMStatus() {
+      let needPollingTaskList = this.uploadStatusListPano.filter((item) => item.status === 'LOADING' && item.ifKnowProgress === false);
+      if (needPollingTaskList.length > 0) {
+        checkMStatus(
+          {
+            ids: needPollingTaskList.map((item) => item.backendId),
+            islongpolling: true,
+          },
+          (res) => {
+            // 1切图中，2失败，3成功
+            res.data.forEach(eachRes => {
+              if (eachRes.status === 2) {
+                const index = this.uploadStatusListPano.findIndex(eachTask => eachTask.backendId === eachRes.id)
+                if (index >= 0) {
+                  const targetItem = this.uploadStatusListPano[index]
+                  targetItem.status = 'FAIL'
+                  targetItem.statusText = '素材切图失败'
+                  targetItem.ifKnowProgress = true
+                }
+              } else if (eachRes.status === 3) {
+                const index = this.uploadStatusListPano.findIndex(eachTask => eachTask.backendId === eachRes.id)
+                if (index >= 0) {
+                  const targetItem = this.uploadStatusListPano[index]
+                  targetItem.status = 'SUCCESS'
+                  eachRes.fileSize = changeByteUnit(Number(eachRes.fileSize));
+                  targetItem.successInfo = eachRes
+                }
+              }
+            });
+          }
+        );
+      }
+    },
   },
   mounted() {
-    // console.log('tableHeadersForAudio: ', this.tableHeadersForAudio);
-    // console.log('tableHeadersForVideo: ', this.tableHeadersForVideo);
+    console.log('tableHeadersForAudio: ', this.tableHeadersForAudio);
+    console.log('tableHeadersForVideo: ', this.tableHeadersForVideo);
   },
   unmounted() {
     this.$store.commit('setUploadStatusListImage', this.uploadStatusListImage.filter((item) => {
       return item.status === 'LOADING'
     }))
+    this.$store.commit('setUploadStatusListPano', this.uploadStatusListPano.filter((item) => {
+      return item.status === 'LOADING'
+    }))
     this.$store.commit('setUploadStatusListAudio', this.uploadStatusListAudio.filter((item) => {
       return item.status === 'LOADING'
     }))