mirror of
https://gitee.com/blackfox/geekai.git
synced 2024-12-02 04:07:41 +08:00
fixed sd page waterfall component
This commit is contained in:
RockYang
parent
e35c34ad9a
commit
5fb9f84182
@ -292,7 +292,7 @@
|
|||||||
<el-button color="#47fff1" :dark="false" round @click="generate">立即生成</el-button>
|
<el-button color="#47fff1" :dark="false" round @click="generate">立即生成</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="task-list-box" @scrollend="handleScrollEnd">
|
<div class="task-list-box">
|
||||||
<div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
|
<div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
|
||||||
<div class="job-list-box">
|
<div class="job-list-box">
|
||||||
<h2>任务列表</h2>
|
<h2>任务列表</h2>
|
||||||
@ -339,47 +339,79 @@
|
|||||||
<h2>创作记录</h2>
|
<h2>创作记录</h2>
|
||||||
<div class="finish-job-list">
|
<div class="finish-job-list">
|
||||||
<div v-if="finishedJobs.length > 0">
|
<div v-if="finishedJobs.length > 0">
|
||||||
<ItemList :items="finishedJobs" :width="240" :gap="16">
|
<v3-waterfall
|
||||||
<template #default="scope">
|
id="waterfall"
|
||||||
<div class="job-item animate" @click="showTask(scope.item)">
|
:list="finishedJobs"
|
||||||
|
srcKey="img_thumb"
|
||||||
|
:gap="20"
|
||||||
|
:bottomGap="10"
|
||||||
|
:colWidth="colWidth"
|
||||||
|
:distanceToScroll="100"
|
||||||
|
:isLoading="loading"
|
||||||
|
:isOver="isOver"
|
||||||
|
@scrollReachBottom="fetchFinishJobs()">
|
||||||
|
<template #default="slotProp">
|
||||||
|
<div class="job-item animate" @click="showTask(slotProp.item)">
|
||||||
<el-image
|
<el-image
|
||||||
:src="scope.item['img_url']+'?imageView2/1/w/240/h/240/q/75'"
|
:src="slotProp.item['img_thumb']"
|
||||||
fit="cover"
|
fit="cover"
|
||||||
loading="lazy">
|
loading="lazy"/>
|
||||||
<template #placeholder>
|
|
||||||
<div class="image-slot">
|
|
||||||
正在加载图片
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #error>
|
|
||||||
<div class="image-slot">
|
|
||||||
<el-icon>
|
|
||||||
<Picture/>
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-image>
|
|
||||||
|
|
||||||
<div class="remove">
|
<div class="remove">
|
||||||
<el-button type="danger" :icon="Delete" @click="removeImage($event,scope.item)" circle/>
|
<el-button type="danger" :icon="Delete" @click="removeImage($event,slotProp.item)" circle/>
|
||||||
<el-button type="warning" v-if="scope.item.publish"
|
<el-button type="warning" v-if="slotProp.item.publish"
|
||||||
@click="publishImage($event,scope.item, false)"
|
@click="publishImage($event,slotProp.item, false)"
|
||||||
circle>
|
circle>
|
||||||
<i class="iconfont icon-cancel-share"></i>
|
<i class="iconfont icon-cancel-share"></i>
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="success" v-else @click="publishImage($event,scope.item, true)" circle>
|
<el-button type="success" v-else @click="publishImage($event,slotProp.item, true)" circle>
|
||||||
<i class="iconfont icon-share-bold"></i>
|
<i class="iconfont icon-share-bold"></i>
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</ItemList>
|
</v3-waterfall>
|
||||||
|
|
||||||
<div class="no-more-data" v-if="isOver">
|
<!-- <ItemList :items="finishedJobs" :width="240" :gap="16">-->
|
||||||
<span>没有更多数据了</span>
|
<!-- <template #default="scope">-->
|
||||||
<i class="iconfont icon-face"></i>
|
<!-- <div class="job-item animate" @click="showTask(scope.item)">-->
|
||||||
</div>
|
<!-- <el-image-->
|
||||||
|
<!-- :src="scope.item['img_url']+'?imageView2/1/w/240/h/240/q/75'"-->
|
||||||
|
<!-- fit="cover"-->
|
||||||
|
<!-- loading="lazy">-->
|
||||||
|
<!-- <template #placeholder>-->
|
||||||
|
<!-- <div class="image-slot">-->
|
||||||
|
<!-- 正在加载图片-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
|
||||||
|
<!-- <template #error>-->
|
||||||
|
<!-- <div class="image-slot">-->
|
||||||
|
<!-- <el-icon>-->
|
||||||
|
<!-- <Picture/>-->
|
||||||
|
<!-- </el-icon>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- </el-image>-->
|
||||||
|
|
||||||
|
<!-- <div class="remove">-->
|
||||||
|
<!-- <el-button type="danger" :icon="Delete" @click="removeImage($event,scope.item)" circle/>-->
|
||||||
|
<!-- <el-button type="warning" v-if="scope.item.publish"-->
|
||||||
|
<!-- @click="publishImage($event,scope.item, false)"-->
|
||||||
|
<!-- circle>-->
|
||||||
|
<!-- <i class="iconfont icon-cancel-share"></i>-->
|
||||||
|
<!-- </el-button>-->
|
||||||
|
<!-- <el-button type="success" v-else @click="publishImage($event,scope.item, true)" circle>-->
|
||||||
|
<!-- <i class="iconfont icon-share-bold"></i>-->
|
||||||
|
<!-- </el-button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- </ItemList>-->
|
||||||
|
|
||||||
|
<!-- <div class="no-more-data" v-if="isOver">-->
|
||||||
|
<!-- <span>没有更多数据了</span>-->
|
||||||
|
<!-- <i class="iconfont icon-face"></i>-->
|
||||||
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
<el-empty :image-size="100" v-else/>
|
<el-empty :image-size="100" v-else/>
|
||||||
</div> <!-- end finish job list-->
|
</div> <!-- end finish job list-->
|
||||||
@ -509,7 +541,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {onMounted, onUnmounted, ref} from "vue"
|
import {onMounted, onUnmounted, ref} from "vue"
|
||||||
import {Delete, DocumentCopy, InfoFilled, Orange, Picture} from "@element-plus/icons-vue";
|
import {DocumentCopy, InfoFilled, Orange, Picture} from "@element-plus/icons-vue";
|
||||||
import {httpGet, httpPost} from "@/utils/http";
|
import {httpGet, httpPost} from "@/utils/http";
|
||||||
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
|
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
|
||||||
import ItemList from "@/components/ItemList.vue";
|
import ItemList from "@/components/ItemList.vue";
|
||||||
@ -526,8 +558,18 @@ const showTaskDialog = ref(false)
|
|||||||
const item = ref({})
|
const item = ref({})
|
||||||
const showLoginDialog = ref(false)
|
const showLoginDialog = ref(false)
|
||||||
const isLogin = ref(false)
|
const isLogin = ref(false)
|
||||||
|
const loading = ref(true)
|
||||||
|
const colWidth = ref(240)
|
||||||
|
// 计算瀑布流列宽度
|
||||||
|
const calcColWidth = () => {
|
||||||
|
const listBoxWidth = window.innerWidth - 400
|
||||||
|
const rows = Math.floor(listBoxWidth / colWidth.value)
|
||||||
|
colWidth.value = Math.floor((listBoxWidth - (rows - 1) * 12) / rows)
|
||||||
|
}
|
||||||
|
calcColWidth()
|
||||||
|
|
||||||
window.onresize = () => {
|
window.onresize = () => {
|
||||||
|
calcColWidth()
|
||||||
listBoxHeight.value = window.innerHeight - 40
|
listBoxHeight.value = window.innerHeight - 40
|
||||||
paramBoxHeight.value = window.innerHeight - 150
|
paramBoxHeight.value = window.innerHeight - 150
|
||||||
}
|
}
|
||||||
@ -604,7 +646,7 @@ const connect = () => {
|
|||||||
const message = String(reader.result)
|
const message = String(reader.result)
|
||||||
if (message === "FINISH") {
|
if (message === "FINISH") {
|
||||||
page.value = 1
|
page.value = 1
|
||||||
fetchFinishJobs(page.value)
|
fetchFinishJobs()
|
||||||
isOver.value = false
|
isOver.value = false
|
||||||
}
|
}
|
||||||
fetchRunningJobs()
|
fetchRunningJobs()
|
||||||
@ -688,31 +730,32 @@ const fetchRunningJobs = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleScrollEnd = () => {
|
const page = ref(0)
|
||||||
if (isOver.value === true) {
|
const pageSize = ref(20)
|
||||||
return
|
|
||||||
}
|
|
||||||
page.value += 1
|
|
||||||
fetchFinishJobs(page.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const page = ref(1)
|
|
||||||
const pageSize = ref(15)
|
|
||||||
const isOver = ref(false)
|
const isOver = ref(false)
|
||||||
// 获取已完成的任务
|
// 获取已完成的任务
|
||||||
const fetchFinishJobs = (page) => {
|
const fetchFinishJobs = () => {
|
||||||
if (!isLogin.value) {
|
if (!isLogin.value) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
httpGet(`/api/sd/jobs?status=1&page=${page}&page_size=${pageSize.value}`).then(res => {
|
loading.value = true
|
||||||
|
page.value = page.value + 1
|
||||||
|
|
||||||
|
httpGet(`/api/sd/jobs?status=1&page=${page.value}&page_size=${pageSize.value}`).then(res => {
|
||||||
if (res.data.length < pageSize.value) {
|
if (res.data.length < pageSize.value) {
|
||||||
isOver.value = true
|
isOver.value = true
|
||||||
}
|
}
|
||||||
if (page === 1) {
|
const imageList = res.data
|
||||||
finishedJobs.value = res.data
|
for (let i = 0; i < imageList.length; i++) {
|
||||||
} else {
|
imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
|
||||||
finishedJobs.value = finishedJobs.value.concat(res.data)
|
|
||||||
}
|
}
|
||||||
|
if (page === 1) {
|
||||||
|
finishedJobs.value = imageList
|
||||||
|
} else {
|
||||||
|
finishedJobs.value = finishedJobs.value.concat(imageList)
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = false
|
||||||
}).catch(e => {
|
}).catch(e => {
|
||||||
ElMessage.error("获取任务失败：" + e.message)
|
ElMessage.error("获取任务失败：" + e.message)
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user