修改

src/renderer/src/main.ts

@@ -30,6 +30,7 @@ import theme from "@/utils/theme";
 import { handleInputLimit } from '@/utils/index'
 import Pagination from './components/Pagination/index.vue'
 import dispatchEventStorage from '@/utils/watchLocalStorage'
+import elTableInfiniteScroll from 'el-table-infinite-scroll';
 
 // process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
 
@@ -76,7 +77,7 @@ const i18n = createI18n({
 });
 let systemSetting = JSON.parse(localStorage.getItem("systemSetting") || '{}')
 let skin = systemSetting.skinInfo ? systemSetting.skinInfo : "color1";
-if(!theme[skin]) {
+if (!theme[skin]) {
   skin = 'color1'
 }
 let colorVariable = Array.from(theme[skin].keys());
@@ -101,6 +102,7 @@ setupStore(setApp)
 setupSvgIcon(setApp)
 setApp.use(EventBusPlugin)
 setApp.use(router)
+setApp.use(elTableInfiniteScroll)
 setApp.use(ElementPlus, {
   locale: zhCn
 })

src/renderer/src/views/components/headers/components/setPup/components/graphLabelManage.vue

@@ -92,12 +92,15 @@
       <el-col :span="18">
         <el-card shadow="hover">
           <el-table
-            :data="modelList"
+            :data="currModelList"
             :header-cell-style="{ 'text-align': 'center' }"
             border
             style="width: 100%"
             ref="tableRef"
             @header-dragend="handleHeaderDragend"
+            v-el-table-infinite-scroll="loadMoreData"
+            :infinite-scroll-distance="10"
+            :infinite-scroll-disabled="disabledScroll"
           >
             <el-table-column type="index" label="序号" width="60" align="center" />
             <el-table-column prop="militaryName" label="名称" width="139" />
@@ -209,6 +212,24 @@ const contextMenu = reactive({
 })
 
 const treeRef = ref()
+
+//滚动加载
+const disabledScroll = ref(false)
+var currModelList: any = ref([])
+let page = 1
+const loadMoreData = () => {
+  // 模拟加载更多数据
+  setTimeout(() => {
+    const start = (page - 1) * 8
+    const end = start + 8
+    currModelList.value = modelList.value.slice(0, end)
+    page++
+    // 检查是否还有更多数据
+    if (page > modelList.value.length) {
+      disabledScroll.value = true
+    }
+  }, 1000)
+}
 // @ts-ignore
 var sortableInstance: any = reactive(null)
 
@@ -595,6 +616,9 @@ const getModelListByType = (id) => {
   formData.append('name', photoName.value)
   GraphApi.showModelByType(formData).then((res) => {
     modelList.value = res.data
+    currModelList.value = []
+    page = 1
+    loadMoreData()
   })
 }
 const divContextMenu = (event: MouseEvent) => {

src/renderer/src/views/components/headers/components/setPup/components/modelManage.vue

@@ -94,11 +94,14 @@
         <el-card shadow="hover">
           <el-table
             ref="tableRef"
-            :data="modelList"
+            :data="currModelList"
             :header-cell-style="{ 'text-align': 'center' }"
             border
             style="width: 100%"
             @header-dragend="handleHeaderDragend"
+            v-el-table-infinite-scroll="loadMoreData"
+            :infinite-scroll-distance="10"
+            :infinite-scroll-disabled="disabledScroll"
           >
             <el-table-column type="index" label="序号" width="60" align="center" />
             <el-table-column prop="modelName" label="模型名称" width="139" />
@@ -240,6 +243,24 @@ const handleHeaderDragend = (newWidth, oldWidth, column, event) => {
   })
 }
 
+//滚动加载
+const disabledScroll = ref(false)
+var currModelList: any = ref([])
+let page = 1
+const loadMoreData = () => {
+  // 模拟加载更多数据
+  setTimeout(() => {
+    const start = (page - 1) * 8
+    const end = start + 8
+    currModelList.value = modelList.value.slice(0, end)
+    page++
+    // 检查是否还有更多数据
+    if (page > modelList.value.length) {
+      disabledScroll.value = true
+    }
+  }, 1000)
+}
+
 // @ts-ignore
 var sortableInstance: any = reactive(null)
 
@@ -662,6 +683,9 @@ const getModelListByType = (id) => {
   formData.append('name', photoName.value)
   ModelApi.showModelByType(formData).then((res) => {
     modelList.value = res.data
+    currModelList.value = []
+    page = 1
+    loadMoreData()
   })
 }
 const divContextMenu = (event: MouseEvent) => {

src/renderer/src/views/components/headers/components/setPup/components/photoManage.vue

@@ -100,12 +100,15 @@
       <el-col :span="18">
         <el-card shadow="hover">
           <el-table
-            :data="modelList"
+            :data="currModelList"
             :header-cell-style="{ 'text-align': 'center' }"
             border
             style="width: 100%"
             ref="tableRef"
             @header-dragend="handleHeaderDragend"
+            v-el-table-infinite-scroll="loadMoreData"
+            :infinite-scroll-distance="10"
+            :infinite-scroll-disabled="disabledScroll"
           >
             <el-table-column type="index" label="序号" width="60" align="center" />
             <el-table-column prop="iconName" label="名称" width="139" />
@@ -311,6 +314,24 @@ const reviewPhoto = (index) => {
 const seeBigPhoto = (index) => {
   currentIndex.value = index
 }
+
+//滚动加载
+const disabledScroll = ref(false)
+var currModelList: any = ref([])
+let page = 1
+const loadMoreData = () => {
+  // 模拟加载更多数据
+  setTimeout(() => {
+    const start = (page - 1) * 8
+    const end = start + 8
+    currModelList.value = modelList.value.slice(0, end)
+    page++
+    // 检查是否还有更多数据
+    if (page > modelList.value.length) {
+      disabledScroll.value = true
+    }
+  }, 1000)
+}
 // @ts-ignore
 var sortableInstance: any = reactive(null)
 
@@ -683,6 +704,9 @@ const getModelListByType = async (id) => {
     formData.append('name', photoName.value)
     PhotoApi.showModelByType(formData).then((res) => {
       modelList.value = res.data
+      currModelList.value = []
+      page = 1
+      loadMoreData()
     })
   }
 }

src/renderer/src/views/components/propertyBox/graph.vue

@@ -137,12 +137,12 @@
             </el-tree>
           </div>
 
-          <div class="model-gallery" ref="galleryRef">
+          <div class="model-gallery" ref="galleryRef" @scroll="handleScroll">
             <div class="model-section" v-if="categories.length != 0">
               <!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
               <div class="model-grid">
                 <div
-                  v-for="(model, mIndex) in categories"
+                  v-for="(model, mIndex) in currModelList"
                   :key="mIndex"
                   class="model-item"
                   @click="modelClick(mIndex, model)"
@@ -271,23 +271,31 @@ const initObserver = () => {
   })
 }
 
+//滚动加载
+var currModelList: any = ref([])
+
+let page = 1
 // 模拟加载更多数据
 const loadMoreData = () => {
-  if (loading.value) return
-  loading.value = true
+  // if (loading.value) return
+  // loading.value = true
   setTimeout(() => {
-    categories.value.push({
-      id: `${categories.value.length + 1}`,
-      name: `新增分类_${categories.value.length}`,
-      models: Array(10)
-        .fill(0)
-        .map((_, i) => ({
-          id: `n${i}`,
-          name: `新增军标_${i}`,
-          thumbnail: `https://picsum.photos/300/200?random=${i + 100}`
-        }))
-    })
-    loading.value = false
+    const start = (page - 1) * 24
+    const end = start + 24
+    currModelList.value = categories.value.slice(0, end)
+    page++
+    // categories.value.push({
+    //   id: `${categories.value.length + 1}`,
+    //   name: `新增分类_${categories.value.length}`,
+    //   models: Array(10)
+    //     .fill(0)
+    //     .map((_, i) => ({
+    //       id: `n${i}`,
+    //       name: `新增军标_${i}`,
+    //       thumbnail: `https://picsum.photos/300/200?random=${i + 100}`
+    //     }))
+    // })
+    // loading.value = false
   }, 1000)
 }
 
@@ -418,7 +426,7 @@ const renderModel = async (model) => {
       cusAddNodes(window.treeObj, DbOption.parentId, [DbOption])
 
       if (GroundSvg.options.id) {
-        (window as any)._entityMap.set(GroundSvg.options.id, GroundSvg)
+        ;(window as any)._entityMap.set(GroundSvg.options.id, GroundSvg)
       }
     })
   })
@@ -429,6 +437,10 @@ const getModelListByType = (id) => {
   formData.append('militaryTypeId', id)
   GraphApi.showModelByType(formData).then((res) => {
     categories.value = res.data
+
+    currModelList.value = []
+    page = 1
+    loadMoreData()
   })
 }
 
@@ -511,8 +523,11 @@ defineExpose({
   // width: 40vw;
   // height: 50vh;
   :deep(.el-dialog) {
-    background:
-      linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(var(--color-base1), 0) 100%),
+    background: linear-gradient(
+        180deg,
+        rgba(var(--color-base1), 0.2) 0%,
+        rgba(var(--color-base1), 0) 100%
+      ),
       rgba(0, 0, 0, 0.6);
     border: 1px solid var(--color-border1);
     padding-left: 0 !important;
@@ -571,22 +586,22 @@ defineExpose({
     box-sizing: border-box;
     // height: 50vh;
     :deep(
-      .el-tabs--left .el-tabs__active-bar.is-left,
-      .el-tabs--left .el-tabs__active-bar.is-right,
-      .el-tabs--right .el-tabs__active-bar.is-left,
-      .el-tabs--right .el-tabs__active-bar.is-right
-    ) {
+        .el-tabs--left .el-tabs__active-bar.is-left,
+        .el-tabs--left .el-tabs__active-bar.is-right,
+        .el-tabs--right .el-tabs__active-bar.is-left,
+        .el-tabs--right .el-tabs__active-bar.is-right
+      ) {
       width: 3px;
       background: rgba(var(--color-base1), 1);
       height: 40px !important;
     }
 
     :deep(
-      .el-tabs--left .el-tabs__nav-wrap.is-left::after,
-      .el-tabs--left .el-tabs__nav-wrap.is-right::after,
-      .el-tabs--right .el-tabs__nav-wrap.is-left::after,
-      .el-tabs--right .el-tabs__nav-wrap.is-right::after
-    ) {
+        .el-tabs--left .el-tabs__nav-wrap.is-left::after,
+        .el-tabs--left .el-tabs__nav-wrap.is-right::after,
+        .el-tabs--right .el-tabs__nav-wrap.is-left::after,
+        .el-tabs--right .el-tabs__nav-wrap.is-right::after
+      ) {
       width: 3px;
     }
 

src/renderer/src/views/components/propertyBox/model.vue

@@ -137,12 +137,12 @@
             </el-tree>
           </div>
 
-          <div class="model-gallery" ref="galleryRef">
+          <div class="model-gallery" ref="galleryRef" @scroll="handleScroll">
             <div class="model-section" v-if="categories.length != 0">
               <!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
               <div class="model-grid">
                 <div
-                  v-for="(model, mIndex) in categories"
+                  v-for="(model, mIndex) in currModelList"
                   :key="mIndex"
                   class="model-item"
                   @click="modelClick(mIndex, model)"
@@ -365,24 +365,32 @@ const initObserver = () => {
     observer?.observe(section)
   })
 }
+//滚动加载
+var currModelList: any = ref([])
 
+let page = 1
 // 模拟加载更多数据
 const loadMoreData = () => {
-  if (loading.value) return
-  loading.value = true
+  // if (loading.value) return
+  // loading.value = true
   setTimeout(() => {
-    categories.value.push({
-      id: `${categories.value.length + 1}`,
-      name: `新增分类_${categories.value.length}`,
-      models: Array(10)
-        .fill(0)
-        .map((_, i) => ({
-          id: `n${i}`,
-          name: `新增模型_${i}`,
-          thumbnail: `https://picsum.photos/300/200?random=${i + 100}`
-        }))
-    })
-    loading.value = false
+    const start = (page - 1) * 24
+    const end = start + 24
+    currModelList.value = categories.value.slice(0, end)
+    page++
+
+    // categories.value.push({
+    //   id: `${categories.value.length + 1}`,
+    //   name: `新增分类_${categories.value.length}`,
+    //   models: Array(10)
+    //     .fill(0)
+    //     .map((_, i) => ({
+    //       id: `n${i}`,
+    //       name: `新增模型_${i}`,
+    //       thumbnail: `https://picsum.photos/300/200?random=${i + 100}`
+    //     }))
+    // })
+    // loading.value = false
   }, 1000)
 }
 
@@ -391,14 +399,18 @@ const handleScroll = () => {
   if (!galleryRef.value) return
 
   const scrollPosition = galleryRef.value.scrollTop + 100
-  const sections = Array.from(document.querySelectorAll('.model-section'))
+  // const sections = Array.from(document.querySelectorAll('.model-section'))
 
-  sections.forEach((section, index) => {
-    const rect = section.getBoundingClientRect()
-    if (rect.top <= 450 && rect.bottom >= 450) {
-      activeTab.value = index.toString()
-    }
-  })
+  // sections.forEach((section, index) => {
+  //   const rect = section.getBoundingClientRect()
+  //   if (rect.top <= 450 && rect.bottom >= 450) {
+  //     console.log('indexxxxxx', index)
+  //     activeTab.value = index.toString()
+  //   }
+  // })
+  if (galleryRef.value.scrollTop + galleryRef.value.clientHeight >= galleryRef.value.scrollHeight) {
+    loadMoreData()
+  }
 }
 
 //-----------tree-----------
@@ -566,6 +578,10 @@ const getModelListByType = (id) => {
   formData.append('name', modelName.value)
   ModelApi.showModelByType(formData).then((res) => {
     categories.value = res.data
+
+    currModelList.value = []
+    page = 1
+    loadMoreData()
   })
 }
 
@@ -668,8 +684,11 @@ defineExpose({
   // height: 50vh;
 
   :deep(.el-dialog) {
-    background:
-      linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(var(--color-base1), 0) 100%),
+    background: linear-gradient(
+        180deg,
+        rgba(var(--color-base1), 0.2) 0%,
+        rgba(var(--color-base1), 0) 100%
+      ),
       rgba(0, 0, 0, 0.6);
     border: 1px solid var(--color-border1);
     padding-left: 0 !important;
@@ -737,22 +756,22 @@ defineExpose({
 
     // height: 50vh;
     :deep(
-      .el-tabs--left .el-tabs__active-bar.is-left,
-      .el-tabs--left .el-tabs__active-bar.is-right,
-      .el-tabs--right .el-tabs__active-bar.is-left,
-      .el-tabs--right .el-tabs__active-bar.is-right
-    ) {
+        .el-tabs--left .el-tabs__active-bar.is-left,
+        .el-tabs--left .el-tabs__active-bar.is-right,
+        .el-tabs--right .el-tabs__active-bar.is-left,
+        .el-tabs--right .el-tabs__active-bar.is-right
+      ) {
       width: 3px;
       background: rgba(var(--color-base1), 1);
       height: 40px !important;
     }
 
     :deep(
-      .el-tabs--left .el-tabs__nav-wrap.is-left::after,
-      .el-tabs--left .el-tabs__nav-wrap.is-right::after,
-      .el-tabs--right .el-tabs__nav-wrap.is-left::after,
-      .el-tabs--right .el-tabs__nav-wrap.is-right::after
-    ) {
+        .el-tabs--left .el-tabs__nav-wrap.is-left::after,
+        .el-tabs--left .el-tabs__nav-wrap.is-right::after,
+        .el-tabs--right .el-tabs__nav-wrap.is-left::after,
+        .el-tabs--right .el-tabs__nav-wrap.is-right::after
+      ) {
       width: 3px;
     }