From 92281fcbb72c2d3c2d523dfc43703ac023332c9b Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Wed, 6 Mar 2024 17:31:54 +0800
Subject: [PATCH] feat: Mj and sd jobs data loading in pages

---
 web/src/assets/css/image-mj.css   |  6 +--
 web/src/assets/css/image-sd.css   |  6 +--
 web/src/assets/css/task-list.styl |  6 ++-
 web/src/views/ImageMj.vue         | 65 ++++++++++++++++++++-----------
 web/src/views/ImageSd.vue         | 54 +++++++++++++++++--------
 5 files changed, 90 insertions(+), 47 deletions(-)

diff --git a/web/src/assets/css/image-mj.css b/web/src/assets/css/image-mj.css
index 4bc3c53..e7f6c92 100644
--- a/web/src/assets/css/image-mj.css
+++ b/web/src/assets/css/image-mj.css
@@ -386,12 +386,12 @@
   font-size: 50px;
   margin-bottom: 10px;
 }
-.page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale {
-  max-height: 310px;
-}
 .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale img {
   height: 310px;
 }
+.page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale .image-slot {
+  height: 310px;
+}
 .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale .el-image-viewer__wrapper img {
   width: auto;
   height: auto;
diff --git a/web/src/assets/css/image-sd.css b/web/src/assets/css/image-sd.css
index 3504fcd..4528c83 100644
--- a/web/src/assets/css/image-sd.css
+++ b/web/src/assets/css/image-sd.css
@@ -271,12 +271,12 @@
   font-size: 50px;
   margin-bottom: 10px;
 }
-.page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale {
-  max-height: 310px;
-}
 .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale img {
   height: 310px;
 }
+.page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale .image-slot {
+  height: 310px;
+}
 .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale .el-image-viewer__wrapper img {
   width: auto;
   height: auto;
diff --git a/web/src/assets/css/task-list.styl b/web/src/assets/css/task-list.styl
index 38b5220..af045ff 100644
--- a/web/src/assets/css/task-list.styl
+++ b/web/src/assets/css/task-list.styl
@@ -275,12 +275,14 @@
       }
 
       .el-image.upscale {
-        max-height 310px
-
         img {
           height 310px
         }
 
+        .image-slot {
+          height 310px
+        }
+
         .el-image-viewer__wrapper {
           img {
             width auto
diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index d582af1..5ae1289 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -163,7 +163,7 @@
           </el-form>
         </div>
       </div>
-      <div class="task-list-box">
+      <div class="task-list-box" @scrollend="handleScrollEnd">
         <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
           <div class="extra-params">
             <el-form>
@@ -240,7 +240,7 @@
                           </el-tooltip>
                         </div>
                         <div>
-                          <el-button type="primary" @click="translatePrompt(false)" :disabled="loading">
+                          <el-button type="primary" @click="translatePrompt(false)" :disabled="translating">
                             <el-icon style="margin-right: 6px;font-size: 18px;">
                               <Refresh/>
                             </el-icon>
@@ -254,7 +254,7 @@
                               content="使用 AI 翻译并重写提示词，<br/>增加更多细节，风格等描述"
                               placement="top-end"
                           >
-                            <el-button type="success" @click="rewritePrompt" :disabled="loading">
+                            <el-button type="success" @click="rewritePrompt" :disabled="translating">
                               <el-icon style="margin-right: 6px;font-size: 18px;">
                                 <Refresh/>
                               </el-icon>
@@ -281,7 +281,7 @@
                             </el-icon>
                           </el-tooltip>
                         </div>
-                        <el-button type="primary" @click="translatePrompt(true)" :disabled="loading">
+                        <el-button type="primary" @click="translatePrompt(true)" :disabled="translating">
                           <el-icon style="margin-right: 6px;font-size: 18px;">
                             <Refresh/>
                           </el-icon>
@@ -391,7 +391,7 @@
             </div>
 
             <h2>创作记录</h2>
-            <div class="finish-job-list">
+            <div class="finish-job-list" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.7)">
               <ItemList :items="finishedJobs" v-if="finishedJobs.length > 0" :width="240" :gap="16">
                 <template #default="scope">
                   <div class="job-item">
@@ -485,7 +485,7 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue"
+import {nextTick, onMounted, ref} from "vue"
 import {
   ChromeFilled,
   Delete,
@@ -581,7 +581,7 @@ const finishedJobs = ref([])
 
 const socket = ref(null)
 const imgCalls = ref(0)
-const loading = ref(false)
+const translating = ref(false)
 const userId = ref(0)
 
 if (isMobile()) {
@@ -589,18 +589,18 @@ if (isMobile()) {
 }
 
 const rewritePrompt = () => {
-  loading.value = true
+  translating.value = true
   httpPost("/api/prompt/rewrite", {"prompt": params.value.prompt}).then(res => {
     params.value.prompt = res.data
-    loading.value = false
+    translating.value = false
   }).catch(e => {
-    loading.value = false
+    translating.value = false
     ElMessage.error("翻译失败：" + e.message)
   })
 }
 
 const translatePrompt = (negative) => {
-  loading.value = true
+  translating.value = true
   let prompt = params.value.prompt
   if (negative) {
     prompt = params.value.neg_prompt
@@ -611,9 +611,9 @@ const translatePrompt = (negative) => {
     } else {
       params.value.prompt = res.data
     }
-    loading.value = false
+    translating.value = false
   }).catch(e => {
-    loading.value = false
+    translating.value = false
     ElMessage.error("翻译失败：" + e.message)
   })
 }
@@ -652,8 +652,8 @@ const connect = () => {
 
   _socket.addEventListener('message', event => {
     if (event.data instanceof Blob) {
-      fetchRunningJobs(userId.value)
-      fetchFinishJobs(userId.value)
+      fetchRunningJobs()
+      fetchFinishJobs(1)
     }
   });
 
@@ -667,8 +667,8 @@ onMounted(() => {
     imgCalls.value = user['img_calls']
     userId.value = user.id
 
-    fetchRunningJobs(userId.value)
-    fetchFinishJobs(userId.value)
+    fetchRunningJobs()
+    fetchFinishJobs(1)
     connect()
 
   }).catch(() => {
@@ -686,8 +686,8 @@ onMounted(() => {
 })
 
 // 获取运行中的任务
-const fetchRunningJobs = (userId) => {
-  httpGet(`/api/mj/jobs?status=0&user_id=${userId}`).then(res => {
+const fetchRunningJobs = () => {
+  httpGet(`/api/mj/jobs?status=0`).then(res => {
     const jobs = res.data
     const _jobs = []
     for (let i = 0; i < jobs.length; i++) {
@@ -710,9 +710,25 @@ const fetchRunningJobs = (userId) => {
   })
 }
 
-const fetchFinishJobs = (userId) => {
+
+const handleScrollEnd = () => {
+  page.value += 1
+  fetchFinishJobs(page.value)
+};
+
+const page = ref(1)
+const pageSize = ref(15)
+const isOver = ref(false)
+const loading = ref(false)
+const fetchFinishJobs = (page) => {
+  if (isOver.value === true) {
+    ElMessage.info("全部数据加载完毕！")
+    return
+  }
+
+  loading.value = true
   // 获取已完成的任务
-  httpGet(`/api/mj/jobs?status=1&user_id=${userId}`).then(res => {
+  httpGet(`/api/mj/jobs?status=1&page=${page}&page_size=${pageSize.value}`).then(res => {
     const jobs = res.data
     for (let i = 0; i < jobs.length; i++) {
       if (jobs[i]['use_proxy']) {
@@ -729,8 +745,13 @@ const fetchFinishJobs = (userId) => {
         jobs[i]['can_opt'] = true
       }
     }
-    finishedJobs.value = jobs
+    finishedJobs.value = finishedJobs.value.concat(jobs)
+    if (jobs.length < pageSize.value) {
+      isOver.value = true
+    }
+    nextTick(() => loading.value = false)
   }).catch(e => {
+    loading.value = false
     ElMessage.error("获取任务失败：" + e.message)
   })
 }
diff --git a/web/src/views/ImageSd.vue b/web/src/views/ImageSd.vue
index 3dbad92..89892e9 100644
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -241,7 +241,7 @@
               </div>
             </div>
 
-            <div class="param-line" v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)">
+            <div class="param-line" v-loading="translating" element-loading-background="rgba(122, 122, 122, 0.8)">
               <el-input
                   v-model="params.prompt"
                   :autosize="{ minRows: 4, maxRows: 6 }"
@@ -305,7 +305,7 @@
           <el-button color="#47fff1" :dark="false" round @click="generate">立即生成</el-button>
         </div>
       </div>
-      <div class="task-list-box">
+      <div class="task-list-box" @scrollend="handleScrollEnd">
         <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
           <div class="job-list-box">
             <h2>任务列表</h2>
@@ -350,7 +350,7 @@
               <el-empty :image-size="100" v-else/>
             </div>
             <h2>创作记录</h2>
-            <div class="finish-job-list">
+            <div class="finish-job-list" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.7)">
               <ItemList :items="finishedJobs" v-if="finishedJobs.length > 0" :width="240" :gap="16">
                 <template #default="scope">
                   <div class="job-item animate" @click="showTask(scope.item)">
@@ -526,7 +526,7 @@ const mjBoxHeight = ref(window.innerHeight - 150)
 const fullImgHeight = ref(window.innerHeight - 60)
 const showTaskDialog = ref(false)
 const item = ref({})
-const loading = ref(false)
+const translating = ref(false)
 
 window.onresize = () => {
   listBoxHeight.value = window.innerHeight - 40
@@ -562,23 +562,23 @@ if (_params) {
 const imgCalls = ref(0)
 
 const rewritePrompt = () => {
-  loading.value = true
+  translating.value = true
   httpPost("/api/prompt/rewrite", {"prompt": params.value.prompt}).then(res => {
     params.value.prompt = res.data
-    loading.value = false
+    translating.value = false
   }).catch(e => {
-    loading.value = false
+    translating.value = false
     ElMessage.error("翻译失败：" + e.message)
   })
 }
 
 const translatePrompt = () => {
-  loading.value = true
+  translating.value = true
   httpPost("/api/prompt/translate", {"prompt": params.value.prompt}).then(res => {
     params.value.prompt = res.data
-    loading.value = false
+    translating.value = false
   }).catch(e => {
-    loading.value = false
+    translating.value = false
     ElMessage.error("翻译失败：" + e.message)
   })
 }
@@ -619,8 +619,8 @@ const connect = () => {
 
   _socket.addEventListener('message', event => {
     if (event.data instanceof Blob) {
-      fetchRunningJobs(userId.value)
-      fetchFinishJobs(userId.value)
+      fetchRunningJobs()
+      fetchFinishJobs(1)
     }
   });
 
@@ -633,8 +633,8 @@ onMounted(() => {
   checkSession().then(user => {
     imgCalls.value = user['img_calls']
     userId.value = user.id
-    fetchRunningJobs(user.id)
-    fetchFinishJobs(user.id)
+    fetchRunningJobs()
+    fetchFinishJobs()
     connect()
   }).catch(() => {
     router.push('/login')
@@ -673,11 +673,31 @@ const fetchRunningJobs = (userId) => {
   })
 }
 
+const handleScrollEnd = () => {
+  page.value += 1
+  fetchFinishJobs(page.value)
+}
+
+const page = ref(1)
+const pageSize = ref(15)
+const isOver = ref(false)
+const loading = ref(false)
 // 获取已完成的任务
-const fetchFinishJobs = (userId) => {
-  httpGet(`/api/sd/jobs?status=1&user_id=${userId}`).then(res => {
-    finishedJobs.value = res.data
+const fetchFinishJobs = (page) => {
+  if (isOver.value === true) {
+    ElMessage.info("全部数据加载完毕！")
+    return
+  }
+
+  loading.value = true
+  httpGet(`/api/sd/jobs?status=1&page=${page}&page_size=${pageSize.value}`).then(res => {
+    if (res.data.length < pageSize.value) {
+      isOver.value = true
+    }
+    finishedJobs.value = finishedJobs.value.concat(res.data)
+    loading.value = false
   }).catch(e => {
+    loading.value = false
     ElMessage.error("获取任务失败：" + e.message)
   })
 }