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

fix

Browse Source
This commit is contained in:
X1627315083
2024-03-22 12:01:11 +08:00
parent c8f6884e7d
commit 84674c63fd
14 changed files with 475 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/component/HomePage/ExportModel.vue
View File

@@ -21,14 +21,15 @@
<div class="exportCanvasBox">
<div class="exportCanvasBox_left">
<div class="exportCanvasBox_title">Canvas Size</div>
<label>
<div>Width:</div>
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
</label>
<label>
<div>Height:</div>
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height"/>
</label>
<label>
<div>Width:</div>
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
</label>
<label>
<div>Height:</div>
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height" />
</label>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
Canvas Nav
<div
@@ -173,12 +174,8 @@
</div>
<div class="exportCanvasBox_right_definition">
<label>
<div>Width:</div>
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
</label>
<label>
<div>Height:</div>
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height" />
<div>Scale:</div>
<input type="number" @input="setMaxInput('scale', 500)" v-model="scaleSR"/>
</label>
</div>
<!-- <div class="" @click="multiselect">all</div> -->
@@ -197,9 +194,10 @@
</a-modal>
</template>
<script>
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
import {defineComponent, computed, h, ref, nextTick, createVNode, reactive, onMounted,
} from "vue";
import { Https } from "@/tool/https";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import scaleImage from "@/component/HomePage/scaleImage.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
import { useStore } from "vuex";
@@ -215,7 +213,7 @@ export default defineComponent({
ExportNewCoolection,
},
props: ["msg", "sketchCatecoryList"],
setup() {
setup(props,{emit}) {
let driver__ = computed(()=>{
return store.state.Guide.guide
})
@@ -286,6 +284,8 @@ export default defineComponent({
});
canvas.preserveObjectStacking = true;
//鼠标移动
setCanvasKeyDown()//document上添加按下和抬起事件
canvas.on("mouse:over", event =>console.log(123123123123));
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.on("mouse:out", event=>setCanvasOut(event));
canvas.on("mouse:down", event=>setCanvasDown(event));
@@ -424,13 +424,13 @@ export default defineComponent({
});
};
let deleteObject = (eventData, transform)=> {
let deleteObject = ()=> {
// var target = [transform.target];
let target = canvas.getActiveObjects()
if(!target){
if(!canvas.getActiveObjects()){
return
}
let target = canvas.getActiveObjects()
target.forEach((item)=>{
// var canvas = item.canvas;
// canvas.remove(item);
@@ -659,7 +659,9 @@ export default defineComponent({
canvasWH.value.width = maxNum;
} else if (str == "height" && canvasWH.value.height >= maxNum) {
canvasWH.value.height = maxNum;
}
}else if(str == 'scale'){
scaleSR.value = scaleSR.value < 1 ? 1:scaleSR.value>4? 4:scaleSR.value
}
canvas.setHeight(canvasWH.value.height);
canvas.setWidth(canvasWH.value.width);
};
@@ -826,11 +828,10 @@ export default defineComponent({
// let brushwork = ref('')
// 监听键盘的 keydown 和 keyup 事件
let keyDown = []
document.addEventListener('keydown', function(event) {
let canvasKeyDown = (event) => {
console.log(123123123);
if(keyDown.indexOf(event.key)>-1){
}else{
keyDown.push(event.code)
if(event.key === 'Enter' && operation.value == 'fold'){
@@ -847,13 +848,20 @@ export default defineComponent({
paste()
}
}
});
document.addEventListener('keyup', function(event) {
keyDown = keyDown.filter(function(item) {
return event.code !== item;
});
});
}
let canvasKeyUp = (event) =>{
keyDown = keyDown.filter(function(item) {
return event.code !== item;
})
}
let setCanvasKeyDown = ()=>{
document.addEventListener('keydown',canvasKeyDown );
document.addEventListener('keyup', canvasKeyUp);
}
let clearCanvasKeyDown = ()=>{
document.removeEventListener('keydown',canvasKeyDown );
document.removeEventListener('keyup', canvasKeyUp);
}
let canvasPencilColor = ref('#000000')
let canvasPencilWidth = ref(20)
let setOperation = (str)=>{
@@ -1133,6 +1141,7 @@ export default defineComponent({
}
let setCanvasOut = (event)=>{
canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
clearCanvasKeyDown()//鼠标移出关闭键盘事件
}
//设置再画布上按下
let setCanvasDown = (event)=>{
@@ -1223,14 +1232,55 @@ export default defineComponent({
}
}
let setHDExport = async ()=>{//获取选中内容的位置信息
let imgData = await exportSele(canvas,'jpg')
let img = new Image
img.src = imgData
img.onload = ()=>{
console.log(img.width,img.height);
let {url,imageType} = await exportSele(canvas,'jpg')
if(!imageType){
message.info('Please select the region of SR')
return
}
let img = new Image
img.src = url
let imgStyle = {
'width': '80%',
'max-height': '30rem',
'object-fit': 'contain',
'position': 'relative',
'left': '50%',
'transform': 'translateX(-50%)',
}
let imgElement = createVNode('img',{src:url,style:imgStyle})
img.onload = ()=>{
Modal.confirm({
title: 'SR needs 300 points, whether to continue？',
icon: false,
okText: 'Yes',
cancelText: 'No',
content: imgElement,
mask:false,
centered:true,
onOk() {
if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
message.info('Your selected area and SR magnification are more than 4096 pixels,Please re-select.')
return
}
let data = {
images: url,
scale: scaleSR.value,
uniqueId: "",
imageType:imageType,
}
Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
console.log(rv);
emit('setTask')
});
},
// onCancel(){
// _this.isShowMark = false
// resolve(false)
// }
});
}
console.log(imgData);
}
let scaleSR = ref(2);
onMounted(() => {});
return {
@@ -1264,6 +1314,7 @@ export default defineComponent({
textureValueChange,//切换材质信息
brushworkValue,//当前笔触
textureValue,//当前材质
scaleSR,
};
},
data(prop) {

259
src/component/HomePage/TaskDetailPage.vue
View File

@@ -1,6 +1,6 @@
<template>
<a-modal
class="modal_component TaskDetail_modal payOrder_modal"
class="modal_component generalModel_modal"
v-model:visible="showPayOrder"
:footer="null"
width="78%"
@@ -10,22 +10,43 @@
wrapClassName="#app"
:keyboard="false"
>
<div class="payOrder_page ">
<div class="generalModel_page ">
<div class="closeIcon">
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
</div>
<div class="creditsDetail_table_search allOrder_table_search">
<div class="creditsDetail_state allOrder_state">
<div class="creditsDetail_state_item allOrder_state_item">
<div class="creditsDetail_table_search generalModel_table_search">
<div class="creditsDetail_state generalModel_state">
<div class="generalModel_state_item">
<span>Time:</span>
<a-range-picker
class="range_picker"
v-model:value="rangePickerValue"
style="width:35rem"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
valueFormat="YYYY-MM-DD HH:mm:ss"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
<div class="creditsDetail_state_item generalModel_state_item">
<span>State:</span>
<a-select style="width:25rem" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
</div>
</div>
<div class="creditsDetail_search allOrder_search">
<div class="creditsDetail_search generalModel_search">
<div
class="creditsDetail_search_item allOrder_search_item"
class="creditsDetail_search_item generalModel_search_item"
@click="searchcreditsDetailList()"
>
<span
@@ -34,7 +55,7 @@
</div>
</div>
</div>
<div class="TaskDetail_page" ref="historyTable">
<div class="generalModel_table_content" ref="historyTable">
<a-table
:columns="columns"
:data-source="collectionList"
@@ -49,7 +70,21 @@
bordered: false,
}"
>
<template
<template #bodyCell="{ column, text, record, index }">
<template v-if="column.inputImage">
<img :src="text.inputImage" :title="column.title">
</template>
<template v-else-if="column.outputImage">
<img :src="text.outputImage" :title="column.title">
</template>
<template v-else-if="column.Operations">
<div class="operate_list">
<div class="operate_item" @click="openExport(text)">下载</div>
</div>
<!-- <div v-else class="operate_item">/</div> -->
</template>
</template>
<!-- <template
#bodyCell="{ column, text, record, index }"
>
<div
@@ -58,7 +93,7 @@
>
<div class="operate_item">{{ $t('HistoryPage.Delete') }}</div>
</div>
</template>
</template> -->
</a-table>
</div>
</div>
@@ -72,7 +107,7 @@
<script lang="ts">
import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { downloadIamge } from "@/tool/util";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
@@ -87,65 +122,69 @@ export default defineComponent({
const columns: any = computed(() => {
return [
{
title: "Serial",
title: "Input",
align: "center",
ellipsis: true,
dataIndex: "orderNo",
key: "orderNo",
// dataIndex: "inputImage",
key: "inputImage",
inputImage:true,
},
{
title: "Output",
align: "center",
ellipsis: true,
// dataIndex: "outputImage",
key: "outputImage",
outputImage:true,
},
{
title: "Title",
title: "Name",
align: "center",
ellipsis: true,
dataIndex: "title",
key: "title",
dataIndex: "imageName",
key: "imageName",
},
{
title: "CreateDate",
align: "center",
ellipsis: true,
dataIndex: "createDate",
key: "createDate",
},
{
title: "Money",
title: "Scale",
align: "center",
ellipsis: true,
dataIndex: "totalFee",
key: "totalFee",
},
{
title: "Payment",
align: "center",
ellipsis: true,
dataIndex: "paymentType",
key: "paymentType",
},
{
title: "State",
align: "center",
ellipsis: true,
dataIndex: "orderStatus",
key: "orderStatus",
dataIndex: "otherInput",
key: "otherInput",
},
// {
// title: useI18n().t("HistoryPage.Operations"),
// key: "operation",
// align: "center",
// // slots:{customRender:'action'}
// Operations: true,
// },
{
title: useI18n().t("HistoryPage.Operations"),
key: "operation",
align: "center",
// slots:{customRender:'action'}
Operations: true,
},
];
});
let currentState = ref({
value:'income',
value:'SR',
})
let state:any = ref([
{
label:'Income',
value:'income',
},
{
label:'Expend',
value:'expend',
label:'SR',
value:'SR',
},
// {
// label:'Expend',
// value:'expend',
// },
])
let collectionList: any = ref([]);
let rangePickerValue: any = ref([]);
return {
presentState,
showPayOrder,
@@ -155,6 +194,7 @@ export default defineComponent({
currentState,
state,
collectionList,
rangePickerValue,
};
},
data() {
@@ -166,15 +206,18 @@ export default defineComponent({
};
},
mounted() {
// let historyTable: any = this.$refs.historyTable;
// this.historyTableHeight = historyTable.clientHeight - 130;
// console.log(historyTable);
},
methods: {
init() {
this.showPayOrder = true;
this.currentPage = 1
this.pageSize = 10
nextTick().then(()=>{
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 130;
})
this.getTaskDetail()
},
//改变页码
@@ -189,17 +232,18 @@ export default defineComponent({
this.getTaskDetail();
},
getTaskDetail() {
let startDate: any = this.rangePickerValue[0]?this.rangePickerValue[0] : "";
let endDate: any = this.rangePickerValue[1]?this.rangePickerValue[1] : "";
let data = {
isIncome: this.currentState.value == 'income'?true:false,
page:this.currentPage,
size:this.pageSize,
size:this.pageSize,
page: this.currentPage,
type:this.currentState.value,
endTime: endDate,
startTime: startDate,
}
console.log(data);
// getCreditsDetail
// orderInfoList
Https.axiosPost(Https.httpUrls.getCreditsDetail,data).then((rv: any) => {
this.total = rv.length;
this.collectionList = rv
Https.axiosPost(Https.httpUrls.getTasksHistory,data).then((rv: any) => {
if(this.currentPage > 1 && rv.content.length == 0){
this.currentPage = 1
this.getTaskDetail()
@@ -210,6 +254,9 @@ export default defineComponent({
});
},
openExport(exportObj:any){
downloadIamge(exportObj.outputImage,exportObj.imageName)
},
cancelDsign(){
this.showPayOrder = false
}
@@ -217,23 +264,20 @@ export default defineComponent({
});
</script>
<style lang="less">
.TaskDetail_modal {
}
</style>
<style lang="less">
.payOrder_modal {
// .generalModel_modal {
.closeIcon {
z-index: 2;
}
.payOrder_page {
.generalModel_page {
width: 100%;
height: 100%;
padding: 9rem;
overflow: hidden;
// min-width: 1440px;
position: relative;
.allOrder_table_search {
display: flex;
flex-direction: column;
.generalModel_table_search {
display: flex;
margin-top: 2rem;
padding: 2rem 3.5rem 5rem 2.8rem;
@@ -242,9 +286,9 @@ export default defineComponent({
justify-content: flex-start;
align-items: center;
.allOrder_search{
width: 20%;
.allOrder_search_item{
.generalModel_search{
width: auto;
.generalModel_search_item{
background: #343579;
border-color: #343579;
height: 4rem;
@@ -256,12 +300,13 @@ export default defineComponent({
cursor: pointer;
}
}
.allOrder_state {
.generalModel_state {
position: relative;
display: flex;
align-items: center;
width: 80%;
.allOrder_state_item{
width: auto;
flex-wrap: wrap;
.generalModel_state_item{
display: flex;
align-items: center;
margin-right: 5rem;
@@ -292,7 +337,7 @@ export default defineComponent({
}
}
}
.allOrder_current{
.generalModel_current{
background: #fff;
width: 100%;
display: flex;
@@ -322,6 +367,68 @@ export default defineComponent({
}
}
}
}
// }
}
.generalModel_table_content {
width: 100%;
// height: 100%;
height: 100%;
flex: 1;
padding-bottom: 3rem;
background: #fff;
border-radius: 2rem;
overflow: hidden;
.ant-table {
background: transparent;
}
.ant-table-body {
overflow-y: auto !important;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
&::-webkit-scrollbar {
width: 0 !important;
}
}
.ant-table-thead > tr > th {
background: #ffffff00;
border-bottom: none;
backdrop-filter: blur(1rem);
}
.ant-table-tbody > tr > td {
border: none;
background: transparent;
// color: #fff;
img{
max-width: 100%;
max-height: 10rem;
object-fit: contain;
}
}
.ant-table-tbody > tr {
&:hover > td {
background: #ffffff3a;
}
}
.ant-table-pagination-right {
padding-right: 3.5rem;
}
.operate_list {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
justify-content: center;
.operate_item {
font-size: 1.4rem;
font-family: Roboto;
font-weight: 400;
color: #343579;
cursor: pointer;
}
}
}
</style>

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

@@ -12,11 +12,11 @@
</template>
<div class="task_content">
<div class="task_content_item" v-for="item in taskList">
<img v-if="item.state !== 'success'" src="@/assets/images/homePage/loading.gif" alt="">
<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.title }}</div>
<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">
@@ -24,22 +24,22 @@
</div>
</div>
</div>
<div class="task_content_more" v-show="taskListMore.length == 0" @click="setTaskListMore">
<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" v-show="taskListMore.length > 0">
<img v-if="item.state === '执行中' || item.state === '失败'" src="@/assets/images/homePage/loading.gif" alt="">
<img v-else :src="item.url" alt="">
<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.title }}</div>
<div class="task_content_item_text_left_into modal_title_text_intro">{{ item.time }}</div>
<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.state }}</div>
<div class="task_content_item_text_left_titile">{{ item.status }}</div>
</div>
</div>
</div>
@@ -54,6 +54,7 @@
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";
@@ -72,17 +73,19 @@ export default defineComponent({
let taskListMore:any = ref([])
let state:any = ref([
{
label:'Income',
value:'income',
label:'SR',
value:'SR',
},
{
label:'Expend',
value:'expend',
}
// {
// label:'SR',
// value:'SR',
// }
])
let currentState = ref({
value:'income',
value:'SR',
})
let getTaskTime:any = null
let oldTaskListMore:any = ref([])
return {
store,
visible,
@@ -90,6 +93,8 @@ export default defineComponent({
taskListMore,
state,
currentState,
getTaskTime,
oldTaskListMore,
};
},
data(prop) {
@@ -117,7 +122,7 @@ export default defineComponent({
function callback(entries:any, observer:any) {
entries.forEach((entry:any) => {
if (entry.isIntersecting) {
this_.getTaskList()
this_.getTaskMoreList()
} else {
}
});
@@ -126,14 +131,25 @@ export default defineComponent({
},
},
watch:{
// newWindowState:{
// handler(newVal,oldVal){
// console.log(newVal);
// if(newVal){
// this.newWindow?.close();
// }
// }
// },
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: {
@@ -143,16 +159,13 @@ export default defineComponent({
},
init(){
this.visible = true
Https.axiosGet(Https.httpUrls.getTasksList).then((rv)=>{
this.taskList = this.sort(rv)
})
this.getTaskList()
},
sort(arr:any){
arr.sort((a:any, b:any) => {
var a_num = Date.parse(a.createDate);
var b_num = b.style.zIndex;
return a_num - b_num;
var b_num = Date.parse(b.createDate);
return b_num - a_num;
});
return arr
},
@@ -160,13 +173,8 @@ export default defineComponent({
if(!bool){
this.taskListMore = []
}
console.log(bool);
},
setTaskListMore(){
// this.taskListMore = this.taskList
this.taskListMore.push(...this.taskList,...this.taskList)
},
openTaskDetailPage(){
let taskDetailPage:any = this.$refs.TaskDetailPage
this.visible = false
@@ -178,14 +186,29 @@ export default defineComponent({
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,
aaa:this.currentState,
type:this.currentState.value,
endTime: "",
startTime: "",
}
console.log(123123);
this.currentPage += 1
Https.axiosGet()
Https.axiosPost(Https.httpUrls.getTasksHistory,data).then((rv)=>{
this.taskListMore = rv
})
}
},
});