aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

语言适配英文

Browse Source
This commit is contained in:
X1627315083
2024-03-26 15:45:32 +08:00
parent f12a188526
commit 4f3d91437e
15 changed files with 1156 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/component/HomePage/TaskPage.vue
View File

@@ -3,15 +3,15 @@
v-model:visible="visible"
class="task_page"
style="color: #000"
title="Task List"
:title="$t('taskPage.TaskList')"
placement="right"
@after-visible-change="afterVisibleChange"
>
<template #extra>
<div class="button_second" @click="openTaskDetailPage">Detailed Task</div>
</template>
<div class="task_content">
<div class="task_content_item" v-for="item in taskList">
<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">
@@ -23,16 +23,14 @@
<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_more" v-show="taskListMore.length == 0" @click="getTaskMoreList">
点击查看更多
</div>
<div class="task_content_select" v-show="taskListMore.length > 0">
<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> -->
<div class="task_content_item" v-for="item in taskListMore">
<img v-if="item.status !== 'success'" src="@/assets/images/homePage/loading.gif" alt="">
<img v-else :src="item.inputParam.images" alt="">
<img v-if="item.status == 'Waiting' || item.status == 'Executing'" src="@/assets/images/homePage/loading.gif" alt="">
<img v-else :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>
@@ -40,6 +38,7 @@
</div>
<div 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>
@@ -47,29 +46,34 @@
<img src="@/assets/images/homePage/loading.gif" alt="">
</div>
</div>
<TaskDetailPage ref="TaskDetailPage"></TaskDetailPage>
<!-- <TaskDetailPage ref="TaskDetailPage"></TaskDetailPage> -->
</a-drawer>
</template>
<script lang="ts">
import { message, Upload } from "ant-design-vue";
import { defineComponent, computed, h, ref, nextTick, inject } from "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";
// import TaskDetailPage from "@/component/HomePage/TaskDetailPage.vue";
export default defineComponent({
components: {
TaskDetailPage,
// 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 taskList = ref([
])
let taskListUnfinished:any = ref([])
let taskListMore:any = ref([])
let state:any = ref([
{
@@ -85,72 +89,52 @@ export default defineComponent({
value:'SR',
})
let getTaskTime:any = null
let oldTaskListMore:any = ref([])
return {
...toRefs(filter),
store,
visible,
taskList,
taskListUnfinished,
taskListMore,
state,
currentState,
getTaskTime,
oldTaskListMore,
t,
};
},
data(prop) {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 99,
// 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 {
// }
// });
// }
// },
// },
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:{
taskList:{
handler(newVal,oldVal){
if(oldVal.length > 0){
let newSuccess = newVal.filter((item:any)=>item.status == 'success')
let oldSuccess = oldVal.filter((item:any)=>item.status == 'success')
// const exportSR = newSuccess.filter((item:any) => !oldSuccess.includes(item));
// console.log(JSON.parse(JSON.stringify(newSuccess)),JSON.parse(JSON.stringify(oldSuccess)));
// console.log(exportSR);
let difference = newSuccess.filter((objA:any) => !oldSuccess.some((objB:any) => objA.id === objB.id));
if(difference.length > 0){
difference.forEach((item:any)=>{
downloadIamge(item.outputImage,item.imageName)
})
}
}
}
},
},
methods: {
getPopupContainer(){
@@ -159,7 +143,8 @@ export default defineComponent({
},
init(){
this.visible = true
this.getTaskList()
// this.getTaskList()
this.getTaskMoreList()
},
sort(arr:any){
arr.sort((a:any, b:any) => {
@@ -171,45 +156,85 @@ export default defineComponent({
},
afterVisibleChange(bool:any){
if(!bool){
this.taskListMore = []
// clearTimeout(this.getTaskTime)
// this.taskListMore = []
}
},
openTaskDetailPage(){
let taskDetailPage:any = this.$refs.TaskDetailPage
this.visible = false
taskDetailPage.init()
},
visibleChange(){
this.pageSize = 10
this.currentPage = 1
this.total = 0
this.taskListMore = []
this.getTaskMoreList()
},
getTaskList(){
clearTimeout(this.getTaskTime)
Https.axiosGet(Https.httpUrls.getTasksList).then((rv)=>{
this.taskList = this.sort(rv)
let isSuccess = rv.filter((item:any) => item.status == 'Waiting' || item.status == 'Executing')
if(isSuccess.length>0){
let arr = this.taskListUnfinished.map((item:any) => item.taskId)
console.log(arr,this.taskListUnfinished);
if(arr <= 0){
return
}
Https.axiosPost(Https.httpUrls.getTasksList,arr).then((rv)=>{
this.taskListUnfinished.forEach((item:any,index:number) => {
let rvIndex = rv.findIndex((rvItem:any)=>{
if(rvItem.status == 'success'){
downloadIamge(item.outputImage,item.imageName)
}
return rvItem.taskId == item.taskId
})
item = rv[rvIndex]
this.taskListMore[item.index] = rv[rvIndex]
console.log(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(){
// let data = {
// size:this.pageSize,
// page: this.currentPage,
// type:this.currentState.value,
// endTime: "",
// startTime: "",
// }
// this.currentPage += 1
// Https.axiosPost(Https.httpUrls.getTasksHistory,data).then((rv)=>{
// this.taskListMore = rv
// })
// }
getTaskMoreList(){
let data = {
size:this.pageSize,
page: this.currentPage,
type:this.currentState.value,
endTime: "",
startTime: "",
}
this.currentPage += 1
Https.axiosPost(Https.httpUrls.getTasksHistory,data).then((rv)=>{
if(this.currentPage > 1 && rv.content.length == 0){
this.currentPage = 1
this.getTaskMoreList()
}else{
this.taskListMore.push(...rv.content)
this.total = rv.total
this.taskListUnfinished = []
this.taskListMore.forEach((item:any,index:number)=>{
if(item.status == 'Waiting' || item.status == 'Executing'){
item.index = index
this.taskListUnfinished.push(item)
}
})
console.log(this.getTaskTime);
if(!this.getTaskTime){
this.getTaskList()
}
// if(this.taskListMore.indexOf('success'))
}
})
},
setDownloadIamge(item:any){
console.log(item);
downloadIamge(item.outputImage,item.imageName)
}
},
});
</script>