编辑器-导航：新增三维场景功能

packages/code/src/components/materialSelectorForEditor.vue

@@ -170,6 +170,52 @@
       </div>
     </div>
 
+    <div class="table table-3D" v-show="currentMaterialType === '3D'">
+      <div class="table-head-row">
+        <span class="table-head">1</span>
+        <span class="table-head" v-for="(item,i) in tableHeadersFor3D" :key="i">{{item.name}}</span>
+      </div>
+      <div
+        v-if="scene3DList.length !== 0 || hasMore3DData"
+        class="table-body"
+        v-infinite-scroll="requestMorePanoData"
+        :infinite-scroll-disabled="!hasMore3DData || isRequestingMore3DData"
+      >
+        <div class="table-body-row" v-for="(item,i) in scene3DList" :key="i">
+          <span class="table-data">
+            <div class="checkbox">
+              <!-- 负责功能 -->
+              <input
+                type="checkbox"
+                @change="e => selectItem(item, e)"
+                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
+              >
+              <!-- 负责外观 -->
+              <span class="for-outer-circle"></span>
+              <span class="for-inner-circle"></span>
+            </div>
+          </span>
+          <span class="table-data" v-for="(sub,idx) in tableHeadersFor3D" :key="idx">
+            <div v-if="sub.type=='image'" class="list-img">
+              <img :src="item[sub.key] + `?x-oss-process=image/resize,p_10&${Math.random()}`" alt="">
+            </div>
+            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{item[sub.key]}}</span>
+          </span>
+        </div>
+      </div>
+      <!-- 无数据时的提示 -->
+      <div v-if="scene3DList.length === 0 && !hasMore3DData" class="no-data">
+        <div v-if="latestUsedSearchKey">
+          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
+          <span>{{'未搜索到结果~'}}</span>
+        </div>
+        <div v-if="!latestUsedSearchKey">
+          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
+          <span>{{'暂无素材~'}}</span>
+        </div>
+      </div>
+    </div>
+
     <div class="btns">
       <button class="ui-button upload-btn">
         <span>上传素材</span>
@@ -191,7 +237,7 @@
 </template>
 
 <script>
-import { getMaterialList} from "@/api";
+import { getMaterialList, getSceneList, } from "@/api";
 import { changeByteUnit } from '@/utils/file'
 import config from "@/config";
 import { debounce } from "@/utils/other.js"
@@ -242,6 +288,8 @@ export default {
           this.refreshMaterialList('pano')
         } else if (newVal === 'audio' && this.audioList.length === 0) {
           this.refreshMaterialList('audio')
+        } else if (newVal === '3D' && this.scene3DList.length === 0) {
+          this.refreshMaterialList('3D')
         }
       },
       immediate: false,
@@ -263,12 +311,18 @@ export default {
         return ['ossPath', 'name', 'fileSize'].includes(item.key)
       })
     },
+    tableHeadersFor3D() {
+      return this.$MAPTABLEHEADER['scene'].filter(item => {
+        return ['thumb', 'sceneName', 'createTime'].includes(item.key)
+      })
+    },
   },
   data () {
     return {
       imageList: [],
       panoList: [],
       audioList: [],
+      scene3DList: [],
       
       select: [],
       searchKey:'', // 搜索关键词
@@ -279,14 +333,17 @@ export default {
       isRequestingMoreImageData: false,
       isRequestingMorePanoData: false,
       isRequestingMoreAudioData: false,
+      isRequestingMore3DData: false,
       hasMoreImageData: true,
       hasMorePanoData: true,
       hasMoreAudioData: true,
+      hasMore3DData: true,
     }
   },
 
   methods: {
     selectItem(item, e) {
+      item.materialType = this.currentMaterialType
       if (false) {
         // 对于图片，大于600kb的，压缩？
       } else {
@@ -400,6 +457,33 @@ export default {
         }
       );
     },
+    requestMore3DData() {
+      this.isRequestingMore3DData = true
+      const latestUsedSearchKey = this.searchKey
+      getSceneList(
+        {
+          pageNum: Math.floor(this.scene3DList.length / config.PAGE_SIZE) + 1,
+          pageSize: config.PAGE_SIZE,
+          searchKey: this.searchKey,
+        },
+        (data) => {
+          const newData = data.data.data.list.map((i) => {
+            return i;
+          });
+          this.scene3DList = this.scene3DList.concat(newData)
+          this.$store.commit("SetSceneList", this.scene3DList); // todo: 为啥别处拿到的场景列表数据受这里的翻页数影响？
+          if (this.scene3DList.length === data.data.data.total) {
+            this.hasMore3DData = false
+          }
+          this.isRequestingMore3DData = false
+          this.latestUsedSearchKey = latestUsedSearchKey
+        },
+        () => {
+          this.isRequestingMore3DData = false
+          this.latestUsedSearchKey = latestUsedSearchKey
+        }
+      )
+    },
     refreshMaterialList: debounce(function(type) {
       if (type === 'image') {
         this.isRequestingMoreImageData = false
@@ -416,6 +500,11 @@ export default {
         this.hasMoreAudioData = true
         this.audioList = []
         this.requestMoreAudioData()
+      } else if (type === '3D') {
+        this.isRequestingMore3DData = false
+        this.hasMore3DData = true
+        this.scene3DList = []
+        this.requestMore3DData()
       }
     }, 700, false),
   },
@@ -659,6 +748,24 @@ export default {
   }
 }
 
+.table-3D .table-head,
+.table-3D .table-data {
+  &:nth-of-type(1) {
+    width: 50px;
+    color: transparent;
+  }
+  &:nth-of-type(2) {
+    width: calc(116px - 50px);
+  }
+  &:nth-of-type(3) {
+    width: calc(416px - 116px);
+    padding-right: 30px;
+  }
+  &:nth-of-type(4) {
+    width: calc(100% - 416px);
+  }
+}
+
 .checkbox {
   position: relative;
   width: 100%;

packages/code/src/components/sceneGroupInEditor.vue

@@ -114,7 +114,7 @@
         title="选择素材"
         @cancle="isShowSelectionWindow = false"
         @submit="onSubmitFromMaterialSelector"
-        :selectableType="['pano']"
+        :selectableType="['pano', '3D']"
         :initialMaterialType="'pano'"
         :isMultiSelection="true"
       />
@@ -231,35 +231,33 @@ export default {
       this.$emit('deleteGroup', ...params)
     },
     onSubmitFromMaterialSelector(selected) {
-      let newScenes = null
-      // if (this.type == "scene") {
-      //   newScenes = selected.map((item) => {
-      //     return {
-      //       icon: item.thumb,
-      //       sceneCode: item.num,
-      //       sceneTitle: item.sceneName,
-      //       type: "4dkk",
-      //       category:this.groupNode.id,
-      //       id:'s_'+this.$randomWord(true,8,8)
-      //     };
-      //   });
-      // } else {
-      newScenes = selected.map((item) => {
-        return {
-          icon: item.icon,
-          sceneCode: item.sceneCode,
-          sceneTitle: item.name,
-          category: this.level === 1 ? this.groupNode.children[0].id : this.groupNode.id,
-          type: "pano",
-          id: 's_' + this.$randomWord(true, 8, 8)
+      let newScenes = []
+      for (const item of selected) {
+        if (item.materialType === 'pano') {
+          newScenes.push({
+            icon: item.icon,
+            sceneCode: item.sceneCode,
+            sceneTitle: item.name,
+            category: this.level === 1 ? this.groupNode.children[0].id : this.groupNode.id,
+            type: "pano",
+            id: 's_' + this.$randomWord(true, 8, 8)
+          })
+        } else if (item.materialType === '3D') {
+          newScenes.push({
+            icon: item.thumb,
+            sceneCode: item.num,
+            sceneTitle: item.sceneName,
+            category: this.level === 1 ? this.groupNode.children[0].id : this.groupNode.id,
+            type: "4dkk",
+            id:'s_'+this.$randomWord(true,8,8)
+          })
         }
-      })
-      // }
+      }
 
       let allSuccess = true
       newScenes.forEach((item, i) => {
-        let temp = this.info.scenes.find(sub => {
-          return sub.sceneCode == item.sceneCode
+        let temp = this.info.scenes.find(eachScene => {
+          return eachScene.sceneCode === item.sceneCode
         })
         if (temp) {
           setTimeout(() => {