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

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

@@ -1,6 +1,6 @@
<template>
<a-modal
class="modal_component Export"
class="modal_component Export generalModelOperate"
v-model:visible="showUpgradePlan"
:footer="null"
width="78%"
@@ -9,29 +9,29 @@
:closable="false"
:keyboard="false"
>
<div class="UpgradePlan_closeIcon">
<div class="UpgradePlan_closeIcon generalModelOperate_closeIcon ">
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
</div>
<div class="UpgradePlan_content">
<div>Edit & Export</div>
<div class="UpgradePlan_content generalModelOperate">
<div>{{ $t('exportModel.EditExport') }}</div>
</div>
<!-- <div>
<canvas ref="exportCanvas"></canvas>
</div> -->
<div class="exportCanvasBox">
<div class="exportCanvasBox_left">
<div class="exportCanvasBox_title">Canvas Size</div>
<div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div>
<label>
<!-- <label>
<div>Width:</div>
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
</label>
</label> -->
<label>
<div>Height:</div>
<div>{{ $t('exportModel.Height') }}:</div>
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height" />
</label>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
Canvas Nav
{{ $t('exportModel.CanvasNav') }}
<div
:class="[
'icon',
@@ -46,8 +46,13 @@
<div
class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData"
>
<div v-if="item[0]" class="exportCanvasBox_intro">{{ key }}</div>
>
<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" draggable="true" @dragstart="onDragstart(key,colorItem)">
<img src="" alt="">
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
@@ -62,12 +67,14 @@
draggable
@dragstart="onDragstart(key,imgItem)"
>
<img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
<div class="exportCanvasBox_img">
<img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
</div>
</div>
</div>
</div>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('tool')">
Canvas Tool
{{ $t('exportModel.CanvasTool') }}
<div
:class="[
'icon',
@@ -91,15 +98,15 @@
<div class="exportCanvasBox_left_tool_item">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >Color</div>
<div >{{ $t('exportModel.Color') }}</div>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</label>
<label v-show="operation != 'move'">
<div >Size:</div>
<div >{{ $t('exportModel.Size') }}:</div>
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
</label>
<label v-show="operation == 'pencil'">
<div >Brushwork:</div>
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="flex: 1"
@change="brushworkChange"
@@ -111,7 +118,7 @@
</a-select>
</label>
<label v-show="operation == 'texture'" class="texture">
<div >Texture:</div>
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@change="textureValueChange"
@@ -123,14 +130,14 @@
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'texture'">
<div >FillBack:</div>
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="exportCanvasBox_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
</div>
</label>
<label v-show="operation === 'move'">
<div >Layer:</div>
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
@@ -141,7 +148,7 @@
</div>
</div>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
More
{{ $t('exportModel.More') }}
<div
:class="[
'icon',
@@ -160,15 +167,27 @@
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
<label class="uploadImage">
<i class="icon iconfont icon-shangchuantupian" :class="{active:operation == 'ellipse'}"></i>
<input type="file" @change="uploadImage">
</label>
</div>
</div>
<div class="exportCanvasBox_left_bottom">
<div class="exportCanvasBox_left_credits" v-show="credits<1">
<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
</div>
<div class="exportCanvasBox_left_btn">
<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
</div>
</div>
<div class="exportCanvasBox_center">
<!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
</div>
<!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
<div class="exportCanvasBox_right">
<!-- <div class="exportCanvasBox_right">
<div class="exportCanvasBox_title">
High-definition Download
</div>
@@ -178,19 +197,52 @@
<input type="number" @input="setMaxInput('scale', 500)" v-model="scaleSR"/>
</label>
</div>
<!-- <div class="" @click="multiselect">all</div> -->
<div class="" @click="multiselect">all</div>
<div class="exportCanvasBox_right_credits" v-show="credits<1">
<div><span class="icon iconfont icon-zhuyi"></span>Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge</div>
</div>
<div class="exportCanvasBox_right_btn">
<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">HD Export</div>
<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">Export</div>
</div>
</div>
</div> -->
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</div>
<a-modal
v-model:visible="showSRExport"
class="modal_component SRExport generalModelOperate"
width="48%"
:maskClosable="false"
:centered="true"
:closable="false"
:keyboard="false"
:footer="null"
:mask="false"
>
<div class="generalModelOperate_closeIcon">
<i class="fi fi-rr-cross-small" @click.stop="cancelSRExport()"></i>
</div>
<div class="modal_title_text">
<div class="modal_title_text_max">{{ $t('exportModel.SR') }}</div>
<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits') }}</div>
</div>
<div class="SRExport_operate">
<label>
<div>{{ $t('exportModel.Scale') }}:</div>
<input type="number" @input="setMaxInput('scale', 500)" v-model="scaleSR"/>
</label>
<div :class="['check_all_block',allChecked ? 'check_all' : '']" @click="selectAllImg()">
<div class="check_block"><div class="check_block_body"></div></div>
<div>all</div>
</div>
</div>
<div class="SRExport_img">
<img v-for="item in allExportSR" @click="selectImg(item)" class="SRExport_img_item" :class="[item.checked? 'active':'']" :src="item.imgUrl" alt="">
</div>
<div class="generalModelOperate_endBtn">
<div class="generalModelOperate_btn_cancel" @click="cancelSRExport">{{ $t('exportModel.Cancel') }}</div>
<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*30)?'active':'']" @click="setExportSR">OK</div>
</div>
</a-modal>
</a-modal>
</template>
<script>
@@ -204,9 +256,11 @@ import { useStore } from "vuex";
import JSZip, { forEach } from "jszip";
// import fabric from 'fabric';
import { message, Modal } from "ant-design-vue";
import domTurnImg from '@/tool/domTurnImg'
import { openGuide,driverObj__ } from "@/tool/guide";
const FileSaver = require("file-saver");
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
scaleImage,
@@ -214,6 +268,7 @@ export default defineComponent({
},
props: ["msg", "sketchCatecoryList"],
setup(props,{emit}) {
const {t} = useI18n()
let driver__ = computed(()=>{
return store.state.Guide.guide
})
@@ -226,8 +281,9 @@ export default defineComponent({
width: 400,
height: 1200,
});
canvasWH.value.width = [window.innerWidth/2.4]
canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
// canvasWH.value.width = [window.innerWidth/2.4]
// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
let credits = computed(() => {
return store.state.UserHabit.credits.value;
});
@@ -260,6 +316,8 @@ export default defineComponent({
reverseCanvasState.value = []
showUpgradePlan.value = true;
nextTick().then(async () => {
let exportCanvasBoxCanvas = document.querySelector('.exportCanvasBox_center')
canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
allBoardData.value.likeDesignCollectionList =
likeDesignCollectionList;
let canvasBox = document.querySelector(
@@ -631,17 +689,28 @@ export default defineComponent({
};
//关闭画布
let cancelDsign = () => {
showUpgradePlan.value = false;
position = {
//设置每个图形位置的初始值
x: 0,
y: 0,
height: 0,
};
operation.value = 'move'
operation.value = 'fill'
Modal.confirm({
title: 'Canvas edit content is not saved, whether to leave the page',
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
showUpgradePlan.value = false;
position = {
//设置每个图形位置的初始值
x: 0,
y: 0,
height: 0,
};
operation.value = 'move'
operation.value = 'fill'
},
// onCancel(){
// _this.isShowMark = false
// resolve(false)
// }
});
};
//设置画布宽高
let setMaxInput = (str, maxNum) => {
@@ -944,6 +1013,23 @@ export default defineComponent({
let setOperationMode = (str) =>{
operationMode.value = str
}
let uploadImage = (event)=>{
console.log(event);
let input = document.querySelector('.uploadImage input')
const file = event.target.files[0];
console.log(file);
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
fabric.Image.fromURL(e.target.result,(img) => {
setCanvasImage(img,"sketchboardFiles",0,canvas.wrapperEl.parentNode.scrollTop)
canvas.add(img);
},{ crossOrigin: "Anonymous" })
input.value = ''
};
reader.readAsDataURL(file);
}
}
let setLayerIndex = (str) =>{//设置优先级
var activeObject = canvas.getActiveObject();
switch (str) {
@@ -1230,59 +1316,147 @@ export default defineComponent({
}
}
let setHDExport = async ()=>{//获取选中内容的位置信息
let {url,imageType} = await exportSele(canvas,'jpeg')
if(!imageType){
message.info('Please select the region of SR')
if(allBoardData.value.printboardFiles.length <= 0){
message.info('Your print is empty')
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%)',
if(credits.value < 30){
message.info('Your points are less than one SR')
// return
}
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);
store.dispatch('getCredits')
emit('setTask')
});
},
// onCancel(){
// _this.isShowMark = false
// resolve(false)
// }
});
showSRExport.value = true
let arr = []
if(allBoardData.value.printboardFiles){
allBoardData.value.printboardFiles.forEach((item)=>{
arr.push({
imgUrl:item.imgUrl,
checked:true,
})
})
}
allExportSR.value = arr
allChecked.value = true
//多选导出转高清暂时不用
// let {url,imageType} = await exportSele(canvas,'jpeg')
// 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);
// store.dispatch('getCredits')
// emit('setTask')
// });
// },
// // onCancel(){
// // _this.isShowMark = false
// // resolve(false)
// // }
// });
// }
}
let allExportSR = ref([])
let scaleSR = ref(2);
let showSRExport = ref(false)
let cancelSRExport = ()=>{
allExportSR.value = []
showSRExport.value = false
}
let allChecked = ref(false)
let selectImg = (item)=>{
item.checked = !item.checked
let arr = allExportSR.value.filter((item)=>item.checked)
if(arr.length == allExportSR.value.length){
allChecked.value = true
}else{
allChecked.value = false
}
}
let scaleSR = ref(2);
let selectAllImg = ()=>{
allChecked.value = !allChecked.value
allExportSR.value.forEach((item)=>{
item.checked = allChecked.value
})
}
let setExportSR = ()=>{
let arr = []
let data = []
console.log(allExportSR.value);
if(allExportSR.value.filter(item=> item.checked ).length <= 0){
message.info('Your print is empty')
return
}
if(credits < (allExportSR.value.filter(item=> item.checked ).length*30)){
message.info('Your points balance is insufficient')
return
}
allExportSR.value.forEach(async (item,index)=>{
let obj = {}
await new Promise((resolve,reject)=>{
if(item.checked){
obj = {
images:item.imgUrl,
scale: scaleSR.value,
uniqueId: "",
}
data.push(obj)
let img = new Image
img.onload = ()=>{
if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
arr.push(index)
}
}
img.src = item.imgUrl
}
})
})
if(arr.length > 0){
let str = arr.join(',')
message.info(`You selected the ${str} image and zoom ratio more than 4090,`)
return
}
Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
store.dispatch('getCredits')
emit('setTask')
cancelSRExport()
});
}
onMounted(() => {});
return {
t,
showUpgradePlan,//当前弹窗是否打开
canvasWH,//画布初始宽高
credits,//积分 用来判断HD导出积分是否够用
@@ -1301,6 +1475,7 @@ export default defineComponent({
operationMode,//设置矩形是边框还是填充
setOperation,//设置当前鼠标状态绘画或者矩形或者移动方法
setOperationMode,//设置矩形是边框还是填充方法
uploadImage,//上传图帕
setLayerIndex,//设置选中元素的层级
brushList,//笔触列表
textureList,//材质列表
@@ -1314,6 +1489,14 @@ export default defineComponent({
brushworkValue,//当前笔触
textureValue,//当前材质
scaleSR,
//SR页面
showSRExport,
allExportSR,
cancelSRExport,//关闭高清导出
allChecked,//全选
selectAllImg,//控制全选
selectImg,//选中单个图片
setExportSR,//设置SR导出
};
},
data(prop) {
@@ -1340,41 +1523,12 @@ export default defineComponent({
});
</script>
<style lang="less" scoped>
.Export {
flex: 1;
// height: 30rem;
// overflow-x: hidden;
display: flex;
flex-direction: column;
border-right: 1px solid #e5e5e5;
position: relative;
.UpgradePlan_content {
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0, 0, 0, 0.65);
}
.UpgradePlan_closeIcon {
top: calc(2rem * 1.2);
right: calc(2rem * 1.2);
cursor: pointer;
width: calc(4rem * 1.2);
height: calc(4rem * 1.2);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
.fi-rr-cross-small::before {
padding: calc(0.2rem * 1.2);
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before {
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
.exportCanvasBox {
flex: 1;
overflow-x: hidden;
@@ -1448,7 +1602,28 @@ export default defineComponent({
.exportCanvasBox_left::-webkit-scrollbar,
.exportCanvasBox_right::-webkit-scrollbar{display: none;}
.exportCanvasBox_left {
padding-right: 1rem;
padding-right: 1rem;
margin-right: 2rem;
.exportCanvasBox_left_bottom{
position: sticky;
background: #fff;
z-index: 2;
bottom: 0;
.exportCanvasBox_left_btn{
display: flex;
justify-content: space-between;
padding-top: 2rem;
.subitOkPreviewBtn{
position: initial;
transform: none;
&.active{
opacity: .7;
cursor: not-allowed;
}
}
}
}
.exportCanvasBox_title {
padding-right: 2rem;
}
@@ -1467,13 +1642,29 @@ export default defineComponent({
flex-wrap: wrap;
.exportCanvasBox_item {
text-align: center;
img {
max-width: 7rem;
max-height: 7rem;
object-fit: contain;
.exportCanvasBox_img{
position: relative;
margin-right: 2rem;
margin-bottom: 2rem;
}
img {
max-width: 7rem;
max-height: 7rem;
object-fit: contain;
}
.exportCanvasBox_img_SR{
position: absolute;
bottom: 0;
height: 2rem;
background: rgba(0, 0, 0, 0.3);
color: #fff;
width: 100%;
text-align: center;
font-weight: 600;
cursor: pointer;
}
}
}
.exportCanvasBox_item_color{
width: 8rem;
@@ -1521,37 +1712,34 @@ export default defineComponent({
border-radius: .4rem;
}
}
.uploadImage{
width: 4rem;
height: 4rem;
input{
height: 0;
border: none;
}
}
}
}
}
.exportCanvasBox_right{
display: flex;
flex-direction: column;
padding-left: 1rem;
position: relative;
.exportCanvasBox_right_definition{
// display: flex;
flex: 1;
}
.exportCanvasBox_right_credits{
margin-bottom: 2rem;
}
.exportCanvasBox_right_btn{
display: flex;
justify-content: space-between;
.subitOkPreviewBtn{
position: initial;
transform: none;
&.active{
opacity: .7;
cursor: not-allowed;
pointer-events:none;
}
}
}
}
// .exportCanvasBox_right{
// display: flex;
// flex-direction: column;
// padding-left: 1rem;
// position: relative;
// .exportCanvasBox_right_definition{
// // display: flex;
// flex: 1;
// }
// .exportCanvasBox_right_credits{
// margin-bottom: 2rem;
// }
// }
.exportCanvasBox_center {
flex: 1;
height: 100%;
overflow-x: hidden;
}
@@ -1566,36 +1754,11 @@ export default defineComponent({
<style lang="less">
.Export {
.ant-modal-content {
border-radius: calc(1rem * 1.2);
overflow: hidden;
.ant-modal-header {
background-color: #fff;
border-bottom: none;
}
.ant-modal-body {
display: flex;
flex-direction: column;
padding: calc(5rem * 1.2) calc(5rem * 1.2) !important;
// height: calc(65vh - 6.4rem);
height: calc(65rem * 1.2);
background: #f9fafb;
}
//进度完成字体颜色
.ant-progress-circle.ant-progress-status-success .ant-progress-text {
color: #000;
}
.ant-progress-circle .ant-progress-text {
color: rgba(0, 0, 0, 0.55);
font-size: calc(1.6rem * 1.2);
}
}
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
border-color: #d9d9d9;
box-shadow: none;
}
.ant-select:hover .ant-select-selector{
border-color: #d9d9d9;
}
}
.label_select_item{
img{
@@ -1604,4 +1767,87 @@ export default defineComponent({
object-fit: contain;
}
}
</style>
<style lang="less">
.SRExport{
.ant-modal-body{
height: calc(35rem* 1.2);
}
.SRExport_img{
margin-bottom: 2rem;
flex: 1;
overflow-x: hidden;
img{
width: 10rem;
max-height: 10rem;
object-fit: contain;
text-align: center;
margin-right: 2rem;
cursor: pointer;
&.active{
transform: scale(.8);
opacity: .6;
}
}
}
.check_all_block{
display: flex;
align-items: center;
font-size: 1.6rem;
color: #64686D;
cursor: pointer;
justify-content: flex-end;
&.check_all{
color: #1A1A1A;
.check_block{
.check_block_body{
opacity: 1;
}
}
}
.check_block{
width: 2.4rem;
height: 2.4rem;
background: #EBECF4;
border: 0.1rem solid #64686D;
padding: 0.3rem;
margin-right: 0.7rem;
.check_block_body{
width: 100%;
opacity: 0;
height: 100%;
background: #343579;
}
}
}
.SRExport_operate{
display: flex;
align-items: center;
justify-content: space-between;
label {
display: flex;
align-items: center;
margin-bottom: 1rem;
width: 100%;
div {
width: 8rem;
}
input {
// width: 10em;
overflow: hidden;
}
}
}
.generalModelOperate_endBtn{
.generalModelOperate_btn_ok{
&.active{
opacity: .6;
cursor: no-drop;
}
}
}
}
</style>

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>

23
src/component/HomePage/UpgradePlan.vue
View File

@@ -15,7 +15,7 @@
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
</div>
<div class="UpgradePlan_content">
<div>Buy credlts</div>
<div>{{ $t('payOrder.BuyCredlts') }}</div>
</div>
<!-- <div v-show="stepNum == 0" class="UpgradePlan_nav">
<div class="UpgradePlan_nav_content">
@@ -59,20 +59,20 @@
<div class="UpgradePlan_payList2_img">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_premium_thumb-300x300.jpg" alt="">
</div>
<div class="UpgradePlan_payList2_name">{{ price.credits * price.num }} credits</div>
<div class="UpgradePlan_payList2_name">{{ price.credits * price.num }} {{ $t('payOrder.credits') }}</div>
<div class="UpgradePlan_payList2_unitPrice">${{ price.price * price.num }} <span @click="setUnit">HKD</span></div>
<div class="UpgradePlan_payList2_input">
<div class="UpgradePlan_payList2_input_remo" @click="removePriceNum">-</div>
<input type="number" v-model="price.num">
<div class="UpgradePlan_payList2_input_add" @click="addPriceNum">+</div>
</div>
<div class="UpgradePlan_payList2_describe">All credits are shared within the {{ }} name organization</div>
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(1)">Continue</div>
<div class="UpgradePlan_payList2_describe">{{ $t('payOrder.organization') }}</div>
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(1)">{{ $t('payOrder.Continue') }}</div>
</div>
</div>
</div>
<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
<div class="UpgradePlan_payAffirm_title">Select payment method</div>
<div class="UpgradePlan_payAffirm_title">{{ $t('payOrder.payment') }}</div>
<div class="UpgradePlan_payAffirm_content">
<label>
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
@@ -98,16 +98,16 @@
</label>
</div>
<div class="UpgradePlan_payList_item_upgrade_btn">
<div class="UpgradePlan_payList_item_upgrade1 subitOkPreviewBtn" @click="cancel">Cancel</div>
<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">Payment</div>
<div class="UpgradePlan_payList_item_upgrade1 subitOkPreviewBtn" @click="cancel">{{ $t('payOrder.Cancel') }}</div>
<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">{{ $t('payOrder.Payment') }}</div>
</div>
</div>
<div class="mark_loading bgFFF" v-show="isShowMark">
<div class="mark_loading_title">Is payment completed</div>
<div class="mark_loading_intro">Please keep the window open until the payment is completed. If you are unable to open the payment window, please check your browser settings to see if pop-ups are being blocked.Points may be delayed after successful payment. Please wait 1-3 minutes and click the credits refresh button</div>
<div class="mark_loading_title">{{ $t('payOrder.completed') }}</div>
<div class="mark_loading_intro">{{ $t('payOrder.hint') }}</div>
<div class="mark_loading_title_box">
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">Back</div>
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('payOrder.Back') }}</div>
<div class="mark_loading_btn" @click="getTradeQuery">OK</div>
</div>
@@ -120,6 +120,7 @@ import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import GO from "@/tool/GO";
import { useI18n } from "vue-i18n";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
export default defineComponent({
@@ -129,6 +130,7 @@ export default defineComponent({
props: ["msg",'sketchCatecoryList'],
setup() {
// console.log(prop.msg);
let { t } = useI18n();
const store = useStore();
let showUpgradePlan = ref(false)
let planNum = ref(2)
@@ -145,6 +147,7 @@ export default defineComponent({
let isShowMark = ref(false)
let newWindow:any = ref()
return {
t,
store,
showUpgradePlan,
planNum,

166
src/component/HomePage/TaskDetailPage.vue → src/component/HomePage/generalModel.vue
View File

@@ -265,170 +265,8 @@ export default defineComponent({
</script>
<style lang="less">
// .generalModel_modal {
.closeIcon {
z-index: 2;
}
.generalModel_page {
width: 100%;
height: 100%;
padding: 9rem;
overflow: hidden;
// min-width: 1440px;
position: relative;
display: flex;
flex-direction: column;
.generalModel_table_search {
display: flex;
margin-top: 2rem;
padding: 2rem 3.5rem 5rem 2.8rem;
background: #fff;
display: flex;
justify-content: flex-start;
align-items: center;
.generalModel_search{
width: auto;
.generalModel_search_item{
background: #343579;
border-color: #343579;
height: 4rem;
padding: .64rem 1.5rem;
font-size: 1.6rem;
border-radius: 2px;
display: inline-block;
color: #fff;
cursor: pointer;
}
}
.generalModel_state {
position: relative;
display: flex;
align-items: center;
width: auto;
flex-wrap: wrap;
.generalModel_state_item{
display: flex;
align-items: center;
margin-right: 5rem;
>span{
font-size: 2rem;
font-weight: 400;
color: #030303;
margin-right: 15px;
flex-shrink: 0;
display: block;
min-width: 5rem;
text-align: left;
}
.ant-picker-range{
height: 5rem;
}
.ant-select-lg{
font-size: 14px;
.ant-select-selector{
height: 5rem;
.ant-select-selection-item{
line-height: 5rem;
}
input{
line-height: 5rem;
height: 5rem;
}
}
}
}
.generalModel_current{
background: #fff;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.header_user_content {
position: absolute;
border: 2px solid;
border-radius: 1rem;
overflow: hidden;
top: 0;
transform: translateY(6rem);
z-index: 2;
display: none;
margin-left: -2rem;
.username{
padding: 0 2rem;
color: #000;
}
.username:hover{
background: #e1e1e1;
}
&.active{
display: block;
}
}
}
}
// }
.closeIcon {
z-index: 2;
}
.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>