378 lines
10 KiB
Vue
378 lines
10 KiB
Vue
<template>
|
|
<a-drawer
|
|
v-model:visible="visible"
|
|
class="task_page"
|
|
style="color: #000"
|
|
:title="$t('taskPage.TaskList')"
|
|
placement="right"
|
|
@after-visible-change="afterVisibleChange"
|
|
>
|
|
<div class="task_content">
|
|
<!-- <div class="task_content_select">
|
|
<a-select @visibleChange="visibleChange()" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Please select" :getPopupContainer="getPopupContainer" allowClear show-search></a-select>
|
|
</div> -->
|
|
<!-- <div class="task_content_item" v-for="item in taskList">
|
|
<img v-if="item.status !== 'success'" src="@/assets/images/homePage/loading.gif" alt="">
|
|
<img v-else :src="item.inputParam.images" alt="">
|
|
<div class="task_content_item_text">
|
|
<div class="task_content_item_text_left modal_title_text">
|
|
<div class="task_content_item_text_left_titile">{{ item.imageName }}</div>
|
|
<div class="task_content_item_text_left_into modal_title_text_intro">{{ item.createDate }}</div>
|
|
</div>
|
|
<div class="task_content_item_text_right modal_title_text">
|
|
<div class="task_content_item_text_left_titile">{{ item.status }}</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<!-- <div class="task_content_more" v-show="taskListMore.length == 0" @click="getTaskMoreList">
|
|
点击查看更多
|
|
</div> -->
|
|
|
|
<div class="task_content_item" v-for="item in taskListMore">
|
|
<!-- <img v-if="item.status == 'Waiting' || item.status == 'Executing'" src="@/assets/images/homePage/loading.gif" alt=""> -->
|
|
<img :src="item?.inputImage" alt="">
|
|
<div class="task_content_item_text">
|
|
<div class="task_content_item_text_left modal_title_text">
|
|
<div class="task_content_item_text_left_titile">{{ item?.imageName }}</div>
|
|
<div class="task_content_item_text_left_into modal_title_text_intro">{{ item?.createDate }}</div>
|
|
</div>
|
|
<img v-if="item?.status == 'Executing'" src="@/assets/images/homePage/loading.gif" alt="">
|
|
<div v-else class="task_content_item_text_right modal_title_text">
|
|
<div class="task_content_item_text_left_titile">{{ item.status }}</div>
|
|
<div v-show="item.status === 'success'" @click="setDownloadIamge(item)" class="task_content_item_text_left_into modal_title_text_intro ">{{ $t('taskPage.download') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-show="total > taskListMore?.length && total != 0 && taskListMore.length > 0" class="task_content_more" v-observe>
|
|
<img src="@/assets/images/homePage/loading.gif" alt="">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="mark_loading" v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</div>
|
|
<!-- <TaskDetailPage ref="TaskDetailPage"></TaskDetailPage> -->
|
|
</a-drawer>
|
|
</template>
|
|
<script lang="ts">
|
|
import { message, Upload } from "ant-design-vue";
|
|
import { defineComponent, computed, h, ref,toRefs, nextTick, inject,reactive } from "vue";
|
|
import { Https } from "@/tool/https";
|
|
import { downloadIamge } from "@/tool/util";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useStore } from "vuex";
|
|
// import { forEach } from "jszip";
|
|
// import TaskDetailPage from "@/component/HomePage/TaskDetailPage.vue";
|
|
export default defineComponent({
|
|
components: {
|
|
// TaskDetailPage,
|
|
},
|
|
props: ["msg",'sketchCatecoryList'],
|
|
setup() {
|
|
let { t } = useI18n();
|
|
// console.log(prop.msg);
|
|
let filter = reactive({
|
|
currentPage:1,
|
|
pageSize:10,
|
|
total:0
|
|
})
|
|
const store = useStore();
|
|
let visible = ref<boolean>(false);
|
|
let taskListUnfinished:any = ref([])
|
|
let taskListMore:any = ref([])
|
|
let state:any = ref([
|
|
{
|
|
label:'SR',
|
|
value:'SR',
|
|
},
|
|
// {
|
|
// label:'SR',
|
|
// value:'SR',
|
|
// }
|
|
])
|
|
let currentState = ref({
|
|
value:'SR',
|
|
})
|
|
let getTaskTime:any = null
|
|
let isShowMark:any = ref(false)
|
|
return {
|
|
...toRefs(filter),
|
|
store,
|
|
visible,
|
|
taskListUnfinished,
|
|
taskListMore,
|
|
state,
|
|
currentState,
|
|
getTaskTime,
|
|
t,
|
|
isShowMark,
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
// currentPage: 1,
|
|
// pageSize: 10,
|
|
// total: 0,
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
},
|
|
directives:{
|
|
observe:{
|
|
mounted (el,binding) {
|
|
// console.log(binding.instance);
|
|
const ob = new IntersectionObserver(callback,{
|
|
root:null,
|
|
threshold:[0.1]
|
|
})
|
|
ob.observe(el)
|
|
// this.currentPage = 1
|
|
// this.pageSize = 12
|
|
let this_:any = binding.instance
|
|
function callback(entries:any, observer:any) {
|
|
entries.forEach((entry:any) => {
|
|
if (entry.isIntersecting) {
|
|
this_.getTaskMoreList('')
|
|
} else {
|
|
}
|
|
});
|
|
}
|
|
},
|
|
},
|
|
},
|
|
watch:{
|
|
},
|
|
methods: {
|
|
getPopupContainer(){
|
|
let dom = document.querySelector('.task_page .task_content_select')
|
|
return dom
|
|
},
|
|
init(data:any){
|
|
this.visible = true
|
|
// this.getTaskList()
|
|
let time = 100
|
|
if(data){
|
|
time = 1000
|
|
}
|
|
setTimeout(() => {
|
|
this.currentPage = 1
|
|
this.isShowMark = true
|
|
this.getTaskMoreList(data)
|
|
this.getTaskTime = null
|
|
}, time);
|
|
},
|
|
sort(arr:any){
|
|
arr.sort((a:any, b:any) => {
|
|
var a_num = Date.parse(a.createDate);
|
|
var b_num = Date.parse(b.createDate);
|
|
return b_num - a_num;
|
|
});
|
|
return arr
|
|
},
|
|
afterVisibleChange(bool:any){
|
|
if(!bool){
|
|
// clearTimeout(this.getTaskTime)
|
|
this.taskListMore = []
|
|
}
|
|
},
|
|
visibleChange(){
|
|
this.pageSize = 10
|
|
this.currentPage = 1
|
|
this.total = 0
|
|
this.taskListMore = []
|
|
this.getTaskMoreList('')
|
|
},
|
|
getTaskList(){
|
|
clearTimeout(this.getTaskTime)
|
|
let arr = this.taskListUnfinished.map((item:any) => item.taskId)
|
|
if(arr <= 0 && !arr[0].taskId){
|
|
return
|
|
}
|
|
Https.axiosPost(Https.httpUrls.getTasksList,arr).then((rv)=>{
|
|
this.taskListUnfinished.forEach((item:any,index:number) => {
|
|
rv.forEach((rvItem:any) => {
|
|
if(item.taskId==rvItem.taskId && rvItem.status == 'success'){
|
|
downloadIamge(rvItem.outputImage,rvItem.imageName)
|
|
this.store.dispatch('getCredits')
|
|
let itemIndex = item.index
|
|
this.taskListUnfinished[index] = rvItem
|
|
this.taskListUnfinished[index].index = itemIndex
|
|
this.taskListMore[itemIndex] = rvItem
|
|
this.taskListMore[itemIndex].inputImage = rvItem.inputParam.images
|
|
}
|
|
});
|
|
// let itemIndex = item.index
|
|
// let rvIndex = rv.findIndex((rvItem:any)=>{
|
|
// if(rvItem.status == 'success'){
|
|
// downloadIamge(rvItem.outputImage,rvItem.imageName)
|
|
// }
|
|
// return rvItem.taskId == item.taskId
|
|
// })
|
|
// this.taskListUnfinished[index] = rv[rvIndex]
|
|
// this.taskListUnfinished[index].index = itemIndex
|
|
// this.taskListMore[itemIndex] = rv[rvIndex]
|
|
});
|
|
this.taskListUnfinished = this.taskListUnfinished.filter((unfinishedItem:any)=>{
|
|
return (unfinishedItem.status == 'Waiting' || unfinishedItem.status == 'Executing')
|
|
})
|
|
// this.taskList = this.sort(rv)
|
|
// let isSuccess = rv.filter((item:any) => item.status == 'Waiting' || item.status == 'Executing')
|
|
if(this.taskListUnfinished.length>0){
|
|
this.getTaskTime = setTimeout(() => {
|
|
this.getTaskList()
|
|
}, 4000);
|
|
}
|
|
})
|
|
},
|
|
getTaskMoreList(value:any){
|
|
clearTimeout(this.getTaskTime)
|
|
let data = {
|
|
size:this.pageSize,
|
|
page: this.currentPage,
|
|
type:this.currentState.value,
|
|
endTime: "",
|
|
startTime: "",
|
|
}
|
|
this.isShowMark = true
|
|
Https.axiosPost(Https.httpUrls.getTasksHistory,data).then((rv)=>{
|
|
this.isShowMark = false
|
|
if(this.currentPage != 1 && rv.content.length == 0){
|
|
this.currentPage = 1
|
|
this.getTaskMoreList('')
|
|
}else{
|
|
this.currentPage += 1
|
|
this.taskListMore.push(...rv.content)
|
|
this.total = rv.total
|
|
this.taskListUnfinished = []
|
|
if(value){
|
|
rv.content.forEach((item:any) => {
|
|
value.forEach((valueItem:any) => {
|
|
if(valueItem == item.taskId && item.status == 'success'){
|
|
downloadIamge(item.outputImage,item.imageName)
|
|
this.store.dispatch('getCredits')
|
|
}
|
|
});
|
|
});
|
|
}
|
|
this.taskListMore.forEach((item:any,index:number)=>{
|
|
if(item.status == 'Waiting' || item.status == 'Executing'){
|
|
item.index = index
|
|
this.taskListUnfinished.push(item)
|
|
this.getTaskList()
|
|
}
|
|
})
|
|
// if(this.taskListMore.indexOf('success'))
|
|
}
|
|
}).catch((rv) => {
|
|
this.isShowMark = false;
|
|
});
|
|
},
|
|
setDownloadIamge(item:any){
|
|
downloadIamge(item.outputImage,item.imageName)
|
|
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less">
|
|
.task_page {
|
|
.mark_loading{
|
|
position: absolute;
|
|
}
|
|
.ant-drawer-body{
|
|
background: #f6f5fa;
|
|
}
|
|
.task_content{
|
|
position: relative;
|
|
.task_content_item{
|
|
background: #fff;
|
|
margin: 2rem 0;
|
|
padding: 1rem 2rem 1rem 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
height: 12rem;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
img{
|
|
width: 10rem;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
margin-right: 2rem;
|
|
}
|
|
.task_content_item_text{
|
|
|
|
// display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
height: 100%;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
img{
|
|
margin-right: 0;
|
|
}
|
|
.task_content_item_text_left,.task_content_item_text_right{
|
|
margin-bottom: 0;
|
|
}
|
|
.task_content_item_text_left{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
margin-right: 2rem;
|
|
div{
|
|
overflow: hidden;
|
|
white-space: nowrap; /* 禁止换行 */
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
}
|
|
}
|
|
.task_content_item_text_right{
|
|
width: 10rem;
|
|
.task_content_item_text_left_titile,.task_content_item_text_left_into{
|
|
text-align: right;
|
|
}
|
|
.text_click{
|
|
}
|
|
.task_content_item_text_left_into{
|
|
cursor: pointer;
|
|
transition: .3s all;
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.task_content_item:hover .task_content_item_text_left_into{
|
|
opacity: 1 !important;
|
|
}
|
|
.task_content_more{
|
|
background: #fff;
|
|
width: 100%;
|
|
line-height: 5rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
img{
|
|
width: 100%;
|
|
height: 5rem;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
.task_content_select{
|
|
>div{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
<style lang="less">
|
|
.task_page,.layout_modal{
|
|
}
|
|
</style> |