perf(src/packages): 3D模型预览添加loading效果

fengtao · xp.Huang
1 parent f2347107
Showing 8 changed files with 66 additions and 55 deletions
editor/js/Menubar.js
editor/js/libs/http/api.js
editor/main.js
src/packages/components/external/Decorates/Three/Loader/index.vue
src/packages/components/external/Informations/Mores/SingleCamera/config.ts
src/views/three/items/components/ProjectItemsCard/index.vue
src/views/three/items/components/ProjectItemsList/hooks/useData.hook.ts
src/views/three/items/components/ProjectItemsList/index.vue
--- a/editor/js/Menubar.js
View file @d0ebdb1
+++ b/editor/js/Menubar.js
View file @d0ebdb1
@@ -18,7 +18,7 @@ function Menubar( editor ) {
 	container.add( new MenubarView( editor ) );
 	container.add( new MenubarHelp( editor ) );
-	container.add( new MenubarStatus( editor ) );
+	// container.add( new MenubarStatus( editor ) );
 	return container;
--- a/editor/js/libs/http/api.js
View file @d0ebdb1
+++ b/editor/js/libs/http/api.js
View file @d0ebdb1
@@ -25,3 +25,13 @@ export function getThreeJsModel(id) {
     url: API['URL'] + '/' + id
   })
 }
+
+/**
+ * @description: 3D模型 获取json数据 api 
+ */
+export function getThreeJsModelByJson(id) {
+  return defHttp.get({
+    url: API['URL'] + '/json' +'/'+id + '/root.json',
+    timeout: 30 * 1000
+  })
+}
--- a/editor/main.js
View file @d0ebdb1
+++ b/editor/main.js
View file @d0ebdb1
@@ -8,7 +8,7 @@ import { Player } from './js/Player.js'
 import { Sidebar } from './js/Sidebar.js'
 import { Menubar } from './js/Menubar.js'
 import { Resizer } from './js/Resizer.js'
-import { getThreeJsModel } from './js/libs/http/api.js'
+import { getThreeJsModelByJson } from './js/libs/http/api.js'
 import { useSpin } from './js/libs/spin/useSpin.js'
 window.URL = window.URL || window.webkitURL
@@ -58,10 +58,9 @@ editor.storage.init(async function () {
   const { spin, stop } = useSpin()
   try {
     spin()
-    const fileData = await getThreeJsModel(file_uuid)
+    const fileData = await getThreeJsModelByJson(file_uuid)
     if (!fileData) return
-    if (!fileData['content']) return
-    await editor.fromJSON(fileData['content'])
+    await editor.fromJSON(fileData)
   } finally {
     stop()
   }
--- a/src/packages/components/external/Decorates/Three/Loader/index.vue
View file @d0ebdb1
+++ b/src/packages/components/external/Decorates/Three/Loader/index.vue
View file @d0ebdb1
@@ -15,21 +15,19 @@
         :intersectRecursive="true"
       />
       <div v-show="show" class="process">
-        <span> 拼命加载中... </span>
-        <n-progress type="line" :color="themeColor" :percentage="process" :indicator-placement="'inside'" processing />
+        <n-spin :show="show">
+          <template #description> 拼命加载中... </template>
+        </n-spin>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, ref, nextTick, computed } from 'vue'
+import { PropType, toRefs, ref, nextTick } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { vue3dLoader } from 'vue-3d-loader'
-import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { getJwtToken } from '@/utils/external/auth'
-const designStore = useDesignStore()
-
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
@@ -37,10 +35,6 @@ const props = defineProps({
   }
 })
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
-
 const vue3dLoaderRef = ref(null)
 const headers = {
@@ -54,12 +48,16 @@ const webGLRendererOptions = {
 }
 //三维模型加载
-const show = ref(false)
+const show = ref(true)
+
+const { dataset, backgroundColor, backgroundAlpha, borderConfig } = toRefs(props.chartConfig.option) as Recordable
 const onLoad = async () => {
   //加载完成
   await nextTick()
-  show.value = false
+  if (dataset.value) {
+    show.value = false
+  }
 }
 //三维模型进度条
@@ -70,8 +68,6 @@ const onProcess = (event: Recordable) => {
 }
 const { w, h } = toRefs(props.chartConfig.attr)
-
-const { dataset, backgroundColor, backgroundAlpha,borderConfig } = toRefs(props.chartConfig.option) as Recordable
 </script>
 <style lang="scss" scoped>
@@ -86,6 +82,9 @@ const { dataset, backgroundColor, backgroundAlpha,borderConfig } = toRefs(props.
     left: 50%;
     width: 50%;
     transform: translate(-50%, -50%);
+    display:flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 </style>
--- a/src/packages/components/external/Informations/Mores/SingleCamera/config.ts
View file @d0ebdb1
+++ b/src/packages/components/external/Informations/Mores/SingleCamera/config.ts
View file @d0ebdb1
@@ -108,7 +108,6 @@ export async function getPlayUrl(
     }
   } else if (accessMode === AccessMode.GBT28181) {
     const { securityPolicy } = useGlobSetting()
-    console.log(useGlobSetting())
     const { deviceId, channelNo } = params?.params || {};
     const result = await getVideoControlStart({ channelId: channelNo!, deviceId: deviceId! });
     return { url: securityPolicy ? result.data.https_flv : result.data.flv, type: 'flv' };
--- a/src/views/three/items/components/ProjectItemsCard/index.vue
View file @d0ebdb1
+++ b/src/views/three/items/components/ProjectItemsCard/index.vue
View file @d0ebdb1
@@ -20,28 +20,29 @@
       <template #action>
         <div class="go-flex-items-center list-footer" justify="space-between">
           <div style="display: flex; flex-direction: column; align-items: start">
-            <n-text v-if="!focus" @click="handleFocus">
-              <n-button
-                class="list-footer-button"
-                secondary
-                size="tiny"
-              >
-                <span class="title">
-                  {{ cardData.name || cardData.id }}
-                </span>
-              </n-button>
-            </n-text>
-            <n-input
-              v-else
-              ref="inputInstRef"
-              size="small"
-              type="text"
-              maxlength="16"
-              show-count
-              v-model:value.trim="title"
-              @keyup.enter="handleBlur"
-              @blur="handleBlur"
-            ></n-input>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-text v-if="!focus" @click="handleFocus">
+                  <n-button class="list-footer-button" secondary size="tiny">
+                    <span class="title">
+                      {{ cardData.name || cardData.id }}
+                    </span>
+                  </n-button>
+                </n-text>
+                <n-input
+                  v-else
+                  ref="inputInstRef"
+                  size="small"
+                  type="text"
+                  maxlength="16"
+                  show-count
+                  v-model:value.trim="title"
+                  @keyup.enter="handleBlur"
+                  @blur="handleBlur"
+                ></n-input>
+              </template>
+              {{ cardData.name || cardData.id }}
+            </n-tooltip>
             <n-text style="font-size: 12px; margin-left: 6px">{{ cardData.createTime }}</n-text>
           </div>
           <!-- 工具 -->
@@ -241,7 +242,7 @@ $contentHeight: 180px;
     .list-footer-button {
       display: flex;
       // justify-content: flex-start;
-      width: 135px;
+      width: 125px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
--- a/src/views/three/items/components/ProjectItemsList/hooks/useData.hook.ts
View file @d0ebdb1
+++ b/src/views/three/items/components/ProjectItemsList/hooks/useData.hook.ts
View file @d0ebdb1
@@ -88,21 +88,22 @@ export const useDataListInit = (formValue: { name: string; state: string | null 
   // 发布处理
   const releaseHandle = async (cardData: ChartType) => {
     const { id, state } = cardData
-    await putThreeJsModelRelease({
+    const res = await putThreeJsModelRelease({
       id,
       // [0未发布, 1发布]
       state: state === 1 ? 0 : 1
     })
-    list.value = []
-    fetchList()
-    // 发布 -> 未发布
     if (state === 1) {
       window['$message'].success(window['$t']('common.cancelReleaseSuccessText'))
-      return
+    } else {
+      window['$message'].success(window['$t']('common.releaseSuccessText'))
+    }
+    if(res) {
+      setTimeout(() => {
+        list.value = []
+        fetchList()
+      }, 500)
     }
-    // 未发布 -> 发布
-    window['$message'].success(window['$t']('common.releaseSuccessText'))
-    return
   }
   // 立即请求
--- a/src/views/three/items/components/ProjectItemsList/index.vue
View file @d0ebdb1
+++ b/src/views/three/items/components/ProjectItemsList/index.vue
View file @d0ebdb1
@@ -161,14 +161,15 @@ const releaseGoDialog = (message: string, state: number, messageText: string) =>
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onPositiveCallback: () => {},
     promiseResCallback: async () => {
-      console.log(list.value)
       // eslint-disable-next-line no-case-declarations
       const bulkDeleteIds = list.value
         ?.filter((item: ChartType) => item.checkedValue)
         ?.map((item: ChartType) => item.id)
       await putReleaseThreeJsModel(state, bulkDeleteIds as unknown as string[])
       window['$message'].success(window['$t'](messageText))
-      handleSearchClick()
+      setTimeout(() => {
+        handleSearchClick()
+      }, 500)
       isBulkOperationFlag.value = true
       selectAllTextFlag.value = true
       operationKey.value = ''
@@ -188,14 +189,15 @@ const handleOperationSelect = async (key: string) => {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         onPositiveCallback: () => {},
         promiseResCallback: async () => {
-          console.log(list.value)
           // eslint-disable-next-line no-case-declarations
           const bulkDeleteIds = list.value
             ?.filter((item: ChartType) => item.checkedValue)
             ?.map((item: ChartType) => item.id)
           await threeJsDeleteApi([bulkDeleteIds] as unknown as string[])
           window['$message'].success(window['$t']('common.deleteSuccessText'))
-          handleSearchClick()
+          setTimeout(() => {
+            handleSearchClick()
+          }, 500)
           isBulkOperationFlag.value = true
           selectAllTextFlag.value = true
           operationKey.value = ''