308 lines
7.9 KiB
Vue
308 lines
7.9 KiB
Vue
<template>
|
|
<a-drawer
|
|
v-model:visible="visible"
|
|
class="task_page"
|
|
style="color: #000"
|
|
title="Task List"
|
|
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">
|
|
<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_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 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="">
|
|
<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 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>
|
|
<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 { Https } from "@/tool/https";
|
|
import { downloadIamge } from "@/tool/util";
|
|
import { useStore } from "vuex";
|
|
// import { forEach } from "jszip";
|
|
import TaskDetailPage from "@/component/HomePage/TaskDetailPage.vue";
|
|
export default defineComponent({
|
|
components: {
|
|
TaskDetailPage,
|
|
},
|
|
props: ["msg",'sketchCatecoryList'],
|
|
setup() {
|
|
// console.log(prop.msg);
|
|
const store = useStore();
|
|
let visible = ref<boolean>(false);
|
|
let taskList = 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 oldTaskListMore:any = ref([])
|
|
return {
|
|
store,
|
|
visible,
|
|
taskList,
|
|
taskListMore,
|
|
state,
|
|
currentState,
|
|
getTaskTime,
|
|
oldTaskListMore,
|
|
};
|
|
},
|
|
data(prop) {
|
|
return {
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 99,
|
|
}
|
|
},
|
|
|
|
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:{
|
|
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(){
|
|
let dom = document.querySelector('.task_page .task_content_select')
|
|
return dom
|
|
},
|
|
init(){
|
|
this.visible = true
|
|
this.getTaskList()
|
|
},
|
|
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){
|
|
this.taskListMore = []
|
|
}
|
|
},
|
|
|
|
openTaskDetailPage(){
|
|
let taskDetailPage:any = this.$refs.TaskDetailPage
|
|
this.visible = false
|
|
taskDetailPage.init()
|
|
},
|
|
visibleChange(){
|
|
this.pageSize = 10
|
|
this.currentPage = 1
|
|
this.total = 0
|
|
},
|
|
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){
|
|
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
|
|
// })
|
|
// }
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less">
|
|
.task_page {
|
|
.ant-drawer-body{
|
|
background: #f6f5fa;
|
|
}
|
|
.task_content{
|
|
.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;
|
|
.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> |