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-07-03 11:39:01 +08:00
parent 2bc888eac9
commit b08a0f85ad
12 changed files with 657 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/Detail/DesignPrintOperation.vue
View File

@@ -304,7 +304,7 @@ export default defineComponent({
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
if(this.overallSingle == false && this.designOpenrtionList.length > 0){
this.designOpenrtionList[0].checked = true
}else{
}else if(this.overallSingle == false && this.designOpenrtionList.length == 0){
this.setpitch(this.designList[0],0)
}
// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle

2
src/component/Detail/addDetails.vue
View File

@@ -258,7 +258,7 @@ export default defineComponent({
canvas.loadFromJSON(canvasState.value, () => {});
}
let setSubmit = ()=>{
var allObjects = canvas.getObjects();
var allObjects = canvas.getObjects('path');
if(allObjects.length == 0){
return message.info(t('addDetails.jsContent1'))
}

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

@@ -467,109 +467,113 @@ export default defineComponent({
canvas.loadFromJSON(oldExportCanvas, () => {});
isShowMark.value = false
}else{
for (const item of arr) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let imgWidth = setImageWidth(key); //这是设置画布等宽
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise((resolve, reject) => {
if(!allItem){
resolve()
}
maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
if (key == "colorBoards") {
let rect = setGroup(allItem)
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
nextTick(async ()=>{
for (const item of arr) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let imgWidth = setImageWidth(key); //这是设置画布等宽
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise((resolve, reject) => {
if(!allItem){
resolve()
}
let group = setCanvasColor(position.y,position.x,rect)
oldKey = key;
position.x += rect.width + margin;
position.height = group.height + margin;
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
fabric.Image.fromURL(itemCanvasImg,(img) => {
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
position.y = maxHeight;
}
}else{
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
if (key == "colorBoards") {
let rect = setGroup(allItem)
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
}
if (sketchGroupingItem.length >2) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 0,
minNum: 999999,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
sketchXyIndex.minNum = sketchItem.y + sketchItem.height
sketchXyIndex.minIndex = sketchIndex;
}
if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
sketchXyIndex.maxIndex = sketchIndex;
}
}
);
sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
if (allBoardData.value[key].length == allItemIndex + 1) {
maxHeight = sketchXyIndex.maxNum
} else {
position = sketchGroupingItem[sketchXyIndex.minIndex];
let group = setCanvasColor(position.y,position.x,rect)
oldKey = key;
position.x += rect.width + margin;
position.height = group.height + margin;
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
fabric.Image.fromURL(itemCanvasImg,(img) => {
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
position.y = maxHeight;
}
}else{
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
}
}
if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
}else{
position.x += img.width * scaleWH + margin;
}
img.lock_rotation = true;
canvas.add(img);
oldKey = key;
// setTimeout(() => {
resolve()
// }, 1000);
},{ crossOrigin: "Anonymous" });
}
});
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
}
if (sketchGroupingItem.length >2) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 0,
minNum: 999999,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
sketchXyIndex.minNum = sketchItem.y + sketchItem.height
sketchXyIndex.minIndex = sketchIndex;
}
if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
sketchXyIndex.maxIndex = sketchIndex;
}
}
);
sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
if (allBoardData.value[key].length == allItemIndex + 1) {
maxHeight = sketchXyIndex.maxNum
} else {
position = sketchGroupingItem[sketchXyIndex.minIndex];
}
}
}
if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
}else{
position.x += img.width * scaleWH + margin;
}
img.lock_rotation = true;
canvas.add(img);
oldKey = key;
// setTimeout(() => {
resolve()
// }, 1000);
},{ crossOrigin: "Anonymous" });
}
});
}
}
}
if(position.y+position.height>canvasWH.value.height){
canvasWH.value.height = Math.floor(position.y+position.height)
canvas.setHeight(canvasWH.value.height);
}
}
if(position.y+position.height>canvasWH.value.height){
canvasWH.value.height = Math.floor(position.y+position.height)
canvas.setHeight(canvasWH.value.height);
}
}
})
isShowMark.value = false
}
updateCanvasState('')//加载完成后记录一下
@@ -689,7 +693,6 @@ export default defineComponent({
objects.forEach(function(obj) {
var objBottom = obj.top + obj.height*obj.scaleY;
if (objBottom > maxHeight) {
console.log(obj);
maxHeight = objBottom;
}
});

19
src/component/HomePage/Material.vue
View File

@@ -38,12 +38,12 @@
<div class="my_material_content">
<div class="material_content_body scroll_style">
<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.libraryChecked ? 'active':'' , selectCode == 'Moodboard' ? 'moodb':'' ]" >
<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.collectionChecked ? 'active':'' , selectCode == 'Moodboard' ? 'moodb':'' ]" >
<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true" @upTypeSucced='upTypeSucced'></sketchCategory>
<!-- <printCategory v-if="selectCode == 'Printboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></printCategory> -->
<!-- <div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
<a-checkbox v-model:libraryChecked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
<a-checkbox v-model:collectionChecked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
</div> -->
</div>
<div v-show="total > imgList?.length && total != 0" class="material_content_list_loding" v-observe>
@@ -205,7 +205,7 @@ export default defineComponent({
if(newVal.findIndex((newValItem:any) =>newValItem.id == item.id) == -1){
this.imgList.forEach((i:any)=>{
if(i.id == item.id){
i.libraryChecked = false
i.collectionChecked = false
}
})
}
@@ -219,7 +219,7 @@ export default defineComponent({
if(newVal.findIndex((newValItem:any) =>newValItem.id == item.id) == -1){
this.imgList.forEach((i:any)=>{
if(i.id == item.id){
i.libraryChecked = false
i.collectionChecked = false
}
})
}
@@ -234,7 +234,7 @@ export default defineComponent({
if(newVal.findIndex((newValItem:any) =>newValItem.id == item.id) == -1){
this.imgList.forEach((i:any)=>{
if(i.id == item.id){
i.libraryChecked = false
i.collectionChecked = false
}
})
}
@@ -261,14 +261,14 @@ export default defineComponent({
setUseGenerate(arr:any){
let parent:any = this.$parent
this.imgList.forEach((item:any) => {
item.libraryChecked = false
item.collectionChecked = false
});
if(parent.isUseGenerate){
}else{
arr.forEach((item:any) => {
this.imgList.forEach((imgListItem:any) => {
if(item.id == imgListItem.id){
imgListItem.libraryChecked = true
imgListItem.collectionChecked = true
}
});
});
@@ -281,7 +281,6 @@ export default defineComponent({
imgData.categoryValue = imgData.level2TypeEnum.name
imgData.category = imgData.level2TypeEnum.value
}
imgData.libraryChecked = true
imgData.like = true
if(parent.isUseGenerate){
this.setUseGenerate([])
@@ -304,6 +303,8 @@ export default defineComponent({
let maxImg = 8
if(this.selectCode == 'Sketchboard'){
maxImg = 20
}else if(this.selectCode == 'Printboard'){
maxImg = 16
}
imgData.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
this.store.commit("addGenerateMaterialFils", imgData);
@@ -371,7 +372,7 @@ export default defineComponent({
arr.forEach((v:any)=>{
if(item.id == v.id){
item.id_ = v.id_?v.id_:GO.id++
item.libraryChecked = true
item.collectionChecked = true
item.pin = v.pin
}
})

8
src/component/HomePage/PrintboardUpload.vue
View File

@@ -60,7 +60,7 @@
</div> -->
</div>
<div class="upload_file_item upload_component" v-show="printboardList.length < 8">
<div class="upload_file_item upload_component" v-show="printboardList.length < 16">
<a-upload
:action="uploadUrl + '/api/element/upload'"
:capture="null"
@@ -73,13 +73,13 @@
v-model:file-list="fileList"
:customRequest="function(){}"
:multiple="!driver__.driver"
:maxCount="8 - printboardList.length+fileList.length"
:maxCount="16 - printboardList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="fileUploadChange"
>
<div
class="upload_tip_block"
v-show="printboardList.length < 8"
v-show="printboardList.length < 16"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
@@ -378,7 +378,7 @@ export default defineComponent({
// this.fileList.splice(item, 1)
// this.store.commit('setPrintboardFile',this.fileList)
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.printboardFiles

498
src/component/HomePage/productImg.vue
View File

@@ -48,10 +48,10 @@
</div>
</div>
<div v-show="productimgMenu.value == 'ProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
<div v-show="productimgMenu.value == 'ProductImage'" class="productImg_content_item_similarity">
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="similarity"
@afterChange="setSimilarity"
@@ -61,6 +61,20 @@
</a-slider>
<input type="number" readonly v-model="similarity">
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.RelightDirection')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
<!-- <a-slider class="system_silder"
v-model:value="similarity"
@afterChange="setSimilarity"
:tooltipVisible="false"
:step="5"
>
</a-slider> -->
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
</div>
<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
<div class="content_item_imgBox_itemImg" v-for="item in selectList[productimgMenu.value]" :key="item.id" >
@@ -131,7 +145,7 @@
<div class="productImg_content_item_title">{{$t('ProductImg.GenerateProduct')}}</div>
<div class="productImg_right_item_box generalScroll" v-mousewheel>
<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
<div class="productImg_right_item_imgBox" v-if="item?.status != 'Success'">
<div class="productImg_right_item_imgBox" v-if="item?.status != 'Success' && !item.imgUrl">
<img class="loadingImg" src="@/assets/images/homePage/loading.gif" alt="">
</div>
<div class="productImg_right_item_imgBox" v-else>
@@ -139,7 +153,7 @@
<div class="productImg_right_item_like" @click.stop="likeFile(item,'like',index)">
<i class="fi fi-rr-heart"></i>
</div>
<div class="productImg_right_item_scale iconLeft" @click.stop="setScaleImage(generateList,index)">
<div class="productImg_right_item_scale iconLeft" @click.stop="setScaleImage(generateList,index,true)">
<i class="fi fi-bs-expand-arrows-alt"></i>
</div>
<div class="productImg_right_item_menu iconLeft" @click.stop="setMenuShow(item)">
@@ -164,7 +178,7 @@
<div class="productImg_right_item_like" @click.stop="likeFile(item,'noLike',index)">
<i class="fi fi-sr-heart"></i>
</div>
<div class="productImg_right_item_scale iconLeft" @click.stop="setScaleImage(likeList,index)">
<div class="productImg_right_item_scale iconLeft" @click.stop="setScaleImage(likeList,index,false)">
<i class="fi fi-bs-expand-arrows-alt"></i>
</div>
<div class="productImg_right_item_menu iconLeft" @click.stop="setMenuShow(item)">
@@ -180,7 +194,12 @@
</div>
<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
<scaleImage ref="scaleImage"></scaleImage>
<scaleImage ref="scaleImage"
:productData="{
upload:upload,
similarity:similarity,
}"
:isProductimg="true"></scaleImage>
</a-modal>
</template>
@@ -228,7 +247,7 @@ export default defineComponent({
})
let productimgMenuList = ref([
{
value:'ProductImage',
value:'ToProductImage',
label:useI18n().t('ProductImg.ProductImage')
},{
value:'Relight',
@@ -236,6 +255,22 @@ export default defineComponent({
}
])
let productimgMenu:any = ref(productimgMenuList.value[0])
let RelightDirectionList = ref([
{
value:'Right Light',
label:useI18n().t('ProductImg.RightLight')
},{
value:'Left Light',
label:useI18n().t('ProductImg.LeftLight')
},{
value:'Top Light',
label:useI18n().t('ProductImg.TopLight')
},{
value:'Bottom Light',
label:useI18n().t('ProductImg.BottomLight')
}
])
let RelightDirection:any = ref(RelightDirectionList.value[0].value)
let ExportModel = ref()
let selectList:any = ref({})
let likeDesignCollectionList: any = computed(() => {
@@ -245,7 +280,7 @@ export default defineComponent({
let init = (userGroupId:any,beenPublished:any)=>{
productImg.value = true
productImgData.beenPublished = beenPublished
selectList.value['ProductImage'] = JSON.parse(JSON.stringify(likeDesignCollectionList.value))
selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(likeDesignCollectionList.value))
upload.value = {
userlikeGroupId:userGroupId
}
@@ -286,6 +321,7 @@ export default defineComponent({
productImg.value = false
productImgData.likeList = []
productImgData.generateList = []
selectList.value = {}
productimgMenu.value = productimgMenuList.value[0]
}
@@ -350,6 +386,8 @@ export default defineComponent({
productImgData.generateList.splice(index,1)
}else{
productImgData.generateList.push(item)
console.log(item,productImgData.generateList);
productImgData.likeList.splice(index,1)
}
@@ -413,11 +451,13 @@ export default defineComponent({
message.info(t('ProductImg.jsContent2'))
return
}
let imageStrength = productImgData.similarity == 100? 95 :productImgData.similarity
let data:any ={
prompt:productImgData.searchName,
toProductImageVOList:selectArr,
userLikeGroupId:upload.value.userlikeGroupId,
imageStrength:(100 - productImgData.similarity)/100,
direction:RelightDirection.value,
imageStrength:(100 - imageStrength)/100,
}
productImgData.isProductimg = true
remPrductimgTime = setTimeout(()=>{
@@ -492,6 +532,7 @@ export default defineComponent({
}
}
).catch(res=>{
productImgData.generateList.filter((item:any)=>item.status == 'Success')
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productImgData.isProductimg = false
@@ -517,10 +558,11 @@ export default defineComponent({
}
}
let scaleImage = ref()
let setScaleImage = (arr:any,index:any)=>{
let setScaleImage = (arr:any,index:any,isLike:any)=>{
arr.forEach((item:any)=>{
item.imgUrl = item.url
})
scaleImage.value.isProductimg = isLike
scaleImage.value.init(arr,index)
scaleImage.value.isLike = false
scaleImage.value.isComparison = true
@@ -536,6 +578,9 @@ export default defineComponent({
if(!selectList.value[productimgMenu.value.value]){
selectList.value[productimgMenu.value.value] = []
}
selectList.value[productimgMenu.value.value].forEach((item:any) => {
item.isChecked = false
});
if(selectList.value[menuItem.value].indexOf(item) == -1){
item.isChecked = true
selectList.value[menuItem.value].push(item)
@@ -563,6 +608,10 @@ export default defineComponent({
...toRefs(productImgData),
productimgMenuList,
productimgMenu,
RelightDirectionList,
RelightDirection,
selectList,
likeDesignCollectionList,
ExportModel,
@@ -665,233 +714,248 @@ export default defineComponent({
justify-content: space-between;
flex: 1;
.upload_item{
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.8rem;
margin-bottom: 1rem;
&.productImg_content_item_title_menu{
display: flex;
align-items: center;
justify-content: space-between;
.productImg_content_item_title_menubtn{
font-size: 1.6rem;
font-weight: 500;
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.8rem;
margin-bottom: 1rem;
&.productImg_content_item_title_menu{
display: flex;
align-items: center;
justify-content: space-between;
.productImg_content_item_title_menubtn{
font-size: 1.6rem;
font-weight: 500;
}
}
&.productImg_content_item_title_similarity{
// margin-bottom: 8rem;
}
}
.productImg_content_item_intro{
font-size: 1.4rem;
}
.productImg_content_item_imgBox{
display: flex;
overflow-x: auto;
width: auto;
margin-bottom: 2rem;
align-items: center;
.content_item_imgBox_itemImg{
display: flex;
margin-right: 1rem;
position: relative;
height: 12rem;
img{
width: 100%;
cursor: pointer;
object-fit: contain;
&.active{
opacity: .5;
transform: scale(.9);
}
}
&.productImg_content_item_title_similarity{
// margin-bottom: 8rem;
&.content_item_imgBox_itemImg:hover{
.content_item_imgBox_itemImg_delete{
display: block;
cursor: pointer;
}
}
.content_item_imgBox_itemImg_delete{
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
position: absolute;
i{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
}
}
.content_item_imgBox_itemImg:last-child{
margin-right: 0;
}
}
.productImg_left,.productImg_right{
display: flex;
flex-direction: column;
}
.productImg_content_item:last-child{
margin-bottom: 0;
}
.productImg_left{
width: 25%;
position: relative;
.upload_file_item{
display: flex;
margin-right: 1rem;
width: auto;
border: none;
margin-bottom: 0;
&.upload_file_item:last-child{
margin-right: 0rem;
}
}
.productImg_content_item_intro{
font-size: 1.4rem;
}
// width: 45%;
.productImg_content_item_imgBox{
.content_item_imgBox_itemImg{
width: 5rem;
flex-shrink: 0;
}
}
.productImg_content_item_generate{
--width:100%;
}
.productImg_content_item_similarity{
display: flex;
align-items: center;
.system_silder{
flex: 1;
}
input{
width: 30%;
width: 5rem;
height: 5rem;
text-align: center;
font-size: 1.8rem;
}
}
.productImg_content_item_Direction{
padding-bottom: calc(2rem* 1.2);
.ant-select{
font-size: 1.6rem;
.ant-select-selector::after{
line-height: 1;
}
.ant-select-selector .ant-select-selection-item{
line-height: 1;
}
.ant-select-selector{
height: auto;
padding: 1rem 1rem;
box-shadow: none !important;
border: calc(0.1rem* 1.2) solid #F1F1F1;
}
}
}
.productImg_content_item_generate_btn{
position: absolute;
bottom: 0;
top: auto;
width: 100%;
justify-content: space-around;
.input_box{
flex: 0;
margin-left: auto;
}
.started_btn{
// width: 13rem;
// text-align: center;
margin: 0;
}
}
}
.productImg_right{
width: 75%;
padding-left: 2rem;
height: 100%;
justify-content: space-between;
.productImg_right_item_box{
height: 40%;
display: flex;
overflow-x: auto;
width: auto;
margin-bottom: 2rem;
align-items: center;
.content_item_imgBox_itemImg{
display: flex;
background: #f6f6fa;
border-radius: 2rem;
margin-bottom: 2%;
padding: 1rem 1.5rem;
position: relative;
.mark_loading{
position: absolute
}
.productImg_right_item{
height: 100%;
padding: 1rem 0;
margin-right: 1rem;
position: relative;
height: 12rem;
img{
width: 100%;
cursor: pointer;
object-fit: contain;
&.active{
opacity: .5;
transform: scale(.9);
}
}
&.content_item_imgBox_itemImg:hover{
.content_item_imgBox_itemImg_delete{
display: block;
cursor: pointer;
}
}
.content_item_imgBox_itemImg_delete{
display: none;
width: 100%;
background: #fff;
.productImg_right_item_imgBox{
height: 100%;
background: rgba(0,0,0,.2);
position: absolute;
i{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: #fff;
.loadingImg{
width: 14rem;
object-fit: contain;
}
}
img{
height: 100%;
}
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
display: none;
position: absolute;
top: 2rem;
right: 2rem;
cursor: pointer;
width: 3rem;
height: 3rem;
background: #fff;
align-items: center;
justify-content: center;
border-radius: .5rem;
border: .1rem solid #ccc;
.fi-sr-heart{
color: red;
}
}
.productImg_right_item_menu{
ul{
top: 100%;
position: absolute;
width: 13rem;
left: 0;
text-align: center;
border-radius: calc(1rem*1.2);
overflow: hidden;
z-index: 3;
li{
background: #cccccc;
padding: .5rem 1rem;
}
li:hover{
// background: rgba(0,0,0,.4);
background: #999999;
color: #000;
}
}
}
.iconLeft{
left: 2rem;
right: auto;
}
.productImg_right_item_scale{
top: 6rem;
}
}
.content_item_imgBox_itemImg:last-child{
.productImg_right_item:hover{
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
display: flex;
}
}
.productImg_right_item:last-child{
margin-right: 0;
}
}
.productImg_left,.productImg_right{
display: flex;
flex-direction: column;
}
.productImg_content_item:last-child{
.productImg_right_item_box:last-child{
margin-bottom: 0;
}
.productImg_left{
width: 25%;
position: relative;
.upload_file_item{
display: flex;
margin-right: 1rem;
width: auto;
border: none;
margin-bottom: 0;
&.upload_file_item:last-child{
margin-right: 0rem;
}
}
// width: 45%;
.productImg_content_item_imgBox{
.content_item_imgBox_itemImg{
width: 5rem;
flex-shrink: 0;
}
}
.productImg_content_item_generate{
--width:100%;
}
.productImg_content_item_similarity{
display: flex;
align-items: center;
.system_silder{
flex: 1;
}
input{
width: 30%;
width: 5rem;
height: 5rem;
text-align: center;
font-size: 1.8rem;
}
}
.productImg_content_item_generate_btn{
position: absolute;
bottom: 0;
top: auto;
width: 100%;
justify-content: space-around;
.input_box{
flex: 0;
margin-left: auto;
}
.started_btn{
// width: 13rem;
// text-align: center;
margin: 0;
}
}
}
.productImg_right{
width: 75%;
padding-left: 2rem;
height: 100%;
.productImg_right_titleBtn{
display: flex;
justify-content: space-between;
.productImg_right_item_box{
height: 40%;
display: flex;
overflow-x: auto;
background: #f6f6fa;
border-radius: 2rem;
margin-bottom: 2%;
padding: 1rem 1.5rem;
position: relative;
.mark_loading{
position: absolute
}
.productImg_right_item{
height: 100%;
padding: 1rem 0;
margin-right: 1rem;
position: relative;
background: #fff;
.productImg_right_item_imgBox{
height: 100%;
.loadingImg{
width: 14rem;
object-fit: contain;
}
}
img{
height: 100%;
}
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
display: none;
position: absolute;
top: 2rem;
right: 2rem;
cursor: pointer;
width: 3rem;
height: 3rem;
background: #fff;
align-items: center;
justify-content: center;
border-radius: .5rem;
border: .1rem solid #ccc;
.fi-sr-heart{
color: red;
}
}
.productImg_right_item_menu{
ul{
top: 100%;
position: absolute;
width: 13rem;
left: 0;
text-align: center;
border-radius: calc(1rem*1.2);
overflow: hidden;
z-index: 3;
li{
background: #cccccc;
padding: .5rem 1rem;
}
li:hover{
// background: rgba(0,0,0,.4);
background: #999999;
color: #000;
}
}
}
.iconLeft{
left: 2rem;
right: auto;
}
.productImg_right_item_scale{
top: 6rem;
}
}
.productImg_right_item:hover{
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
display: flex;
}
}
.productImg_right_item:last-child{
margin-right: 0;
}
}
.productImg_right_item_box:last-child{
margin-bottom: 0;
}
.productImg_right_titleBtn{
display: flex;
justify-content: space-between;
}
}
}

279
src/component/HomePage/scaleImage.vue
View File

@@ -20,13 +20,70 @@
</div>
</div>
<div class="scaleImage_content">
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
<div class="img_operate_block" v-if="isLike">
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
<div v-if="isProductimg" class="productImg_modal">
<div class="productImg_left">
<div class="productImg_content_item_title productImg_content_item_title_menu">
<span>{{$t('ProductImg.MagicTools')}}</span>
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="productimgSearchName"
@keydown.enter="getPrductimg()"
/>
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
</div>
<textarea
v-show="productimgIsTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="productimgSimilarity"
:tooltipVisible="false"
:step="5"
@afterChange="()=>{}"
>
</a-slider>
<input type="number" readonly v-model="productimgSimilarity">
</div>
<div class="productImg_content_item_generate_btn input_border">
<div class="input_box">
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
{{ $t('Generate.Generate') }}
</div>
<div v-show="productimgIsProductimg && !productimgRemProductimg" class="generage_btn started_btn" @click="getPrductimg">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="productimgRemProductimg" @click="removeProductimg" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
</div>
</div>
</div>
</div>
<div class="scaleImage_content_imgBox">
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
<div class="img_operate_block" v-if="isLike">
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
</div>
</div>
</div>
<div class="scaleImage_nav" @keydown="handleKeyDown">
<div class="nav_left">
<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
@@ -56,15 +113,36 @@
</template>
<script lang="ts">
import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
// import { Https } from "@/tool/https";
// import { getCookie } from "@/tool/cookie";
import { defineComponent, h, ref ,toRefs,computed,reactive, nextTick} from "vue";
import { Https } from "@/tool/https";
// import domTurnImg from '@/tool/domTurnImg'
import { useStore } from "vuex";
import { downloadIamge } from "@/tool/util";
import { getCookie,setCookie } from "@/tool/cookie";
export default defineComponent({
setup() {
props:{
productData:{
type:Object,
default:{
similarity:30,
upload:'',
},
}
},
setup(props:any,{emit}) {
const store = useStore();
let productimg = reactive({
isProductimg:false,
productimgSearchName:'',
productimgIsTextarea:false,
productimgRemProductimg:false,
productimgIsProductimg:false,
productimgSimilarity:props.productData.similarity,
productimgUpload:props.productData.upload,
})
let scaleImage: any = ref(false);
let isShowMark = ref(false)
let loadingShow = ref(false)
let isComparison = ref(false)
const visible = ref<boolean>(false);
@@ -78,8 +156,114 @@ export default defineComponent({
let scaleImageIndex:any = ref(0)
let isLike:any = ref(true)
let robotAssits:any = ref(0)
//procuctimg
let remPrductimgTime:any = null
let prductimgTime:any = null
let getPrductimg = ()=>{
let obj = {
elementId:scaleImageList.value[scaleImageIndex.value].elementId,
elementType:scaleImageList.value[scaleImageIndex.value].elementType,
}
let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
let data:any ={
prompt:productimg.productimgSearchName,
toProductImageVOList:[obj],
userLikeGroupId:productimg.productimgUpload.userlikeGroupId,
imageStrength:(100 - imageStrength)/100,
}
productimg.productimgIsProductimg = true
remPrductimgTime = setTimeout(()=>{
productimg.productimgRemProductimg = true
},10000)
let url = Https.httpUrls.relight
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
url = Https.httpUrls.toProduct
}
isShowMark.value = true
Https.axiosPost(url, data).then(
(rv) => {
isShowMark.value = false
let arr:any = []
rv.forEach((item:any)=>{
arr.push(item.taskId)
})
// productimg.generateList.unshift(...rv)
setPrductimg(arr)
}
).catch(res=>{
isShowMark.value = false
productimg.productimgIsProductimg = false
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
});
}
let generateProceedList:any = []
let setPrductimg = (dataList:any)=>{
let data = dataList
let dataNum = dataList.length
let state = true
let url = Https.httpUrls.relightResult
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
url = Https.httpUrls.toProductImageResult
}
prductimgTime = setInterval(()=>{
if(!state)return
state = false
Https.axiosPost(url, data).then(
(rv) => {
state = true
if(productimg.productimgIsProductimg){//防止取消后有正在执行的获取状态
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
let isEnd = false
if(rv[0].status == 'Success'){
rv[0].imgUrl = rv[0].url
scaleImageList.value[scaleImageIndex.value] = rv[0]
isEnd = true
}else if(rv[0].status == 'Fail'){
isEnd = true
}
generateProceedList = data
if(isEnd){
store.state.store.dispatch('getCredits')
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
productimg.productimgIsProductimg = false
}
}
}
).catch(res=>{
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
});
},1000)
}
let removeProductimg = ()=>{
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
clearInterval(prductimgTime)
let userInfo:any = getCookie("userInfo")
if(generateProceedList){
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
let str = generateProceedList.join(',')
let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
(rv) => {
generateProceedList = []
}
).catch(res=>{
});
}
}
return {
...toRefs(productimg),
scaleImage,
isShowMark,
loadingShow,
isComparison,
visible,
@@ -89,6 +273,8 @@ export default defineComponent({
scaleImageIndex,
isLike,
robotAssits,
getPrductimg,
removeProductimg,
};
},
data() {
@@ -162,7 +348,7 @@ export default defineComponent({
}else if(event.keyCode == 39){
this.nextStep()
}
}
},
},
});
</script>
@@ -176,45 +362,58 @@ export default defineComponent({
.scaleImage_content{
display: flex;
justify-content: center;
height: 75%;
margin: 0 auto;
margin-top: calc(5rem*1.2);
height: 75%;
position: relative;
max-width: 70rem;
img{
width: auto;
height: 100%;
}
.img_operate_block{
width: 3.6rem;
height: 3.6rem;
background: rgba(0,0,0,0.6);
border-radius: 50%;
text-align: center;
line-height: 3.6rem;
cursor: pointer;
margin-bottom: 0.4rem;
.productImg_modal{
position: absolute;
right: 2rem;
top: 2rem;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
.operate_icon{
font-size: 1.8rem;
color: #fff;
&.fi-sr-heart{
color: red;
left: 0;
.productImg_left{
width: 100%;
.productImg_content_item_generate_btn{
transform: translateY(100%);
}
}
i{
}
.scaleImage_content_imgBox{
position: relative;
max-width: 70rem;
img{
width: auto;
height: 100%;
}
.img_operate_block{
width: 3.6rem;
height: 3.6rem;
background: rgba(0,0,0,0.6);
border-radius: 50%;
text-align: center;
line-height: 3.6rem;
cursor: pointer;
margin-bottom: 0.4rem;
position: absolute;
right: 2rem;
top: 2rem;
opacity: 0;
display: flex;
font-size: 1.8rem;
color: #fff;
align-items: center;
justify-content: center;
.operate_icon{
font-size: 1.8rem;
color: #fff;
&.fi-sr-heart{
color: red;
}
}
i{
display: flex;
font-size: 1.8rem;
color: #fff;
}
}
}
}
.scaleImage_content:hover{
.img_operate_block{

2
src/component/WorksPage/newScaleImage.vue
View File

@@ -67,7 +67,7 @@
<div v-show="scaleImageData.portfolioDes" class="scaleImage_chunk_title">
{{$t('newScaleImage.Describe')}}: <span>{{scaleImageData.portfolioDes}}</span>
</div>
<div class="scaleImage_chunk_title_intro">{{scaleImageData.createDate}}</div>
<div class="scaleImage_chunk_title_intro">{{scaleImageData.createDate?.split('T')[0]}} {{scaleImageData.createDate?.split('T')[1]}}</div>
<div class="detail_right_look_operation detail_left_right_item">
<!-- <div class="detail_left_right_item_click">
<svg :adminLike="!!true" xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">

7
src/lang/cn.ts
View File

@@ -104,7 +104,7 @@ export default {
Clear:'清除',
jsContent1:'是否删除指定工作空间',
jsContent2:'请输入当前工作空间的名字',
jsContent3:'检测到您修改了风格,是否将当前模特改为风格对应的模特',
jsContent3:'看到您换了风格。您是否愿意将目前使用的模特替换为系统推荐的模特?',
},
RobotAssist:{
inputContent1:"问我什么都行~",
@@ -148,11 +148,16 @@ export default {
Upload:'上传',
MagicTools:'魔法工具',
Similarity:'相似度',
RelightDirection:'打光方向',
GenerateProduct:'生成的产品',
SelectedProduct:'选择的产品',
Export:'导出',
ProductImage:'产品图',
Relight:'打光',
RightLight:'右侧光',
LeftLight:'左侧光',
TopLight:'顶部光',
BottomLight:'底部光',
Clear:'清空',
jsContent1:'如果您离开此页，您的更改将会丢失。您确定要离开这一页吗?',
jsContent2:'请至少选择一张图片',

9
src/lang/en.ts
View File

@@ -105,7 +105,7 @@ export default {
Clear:'Clear',
jsContent1:'Whether to delete the workspace?',
jsContent2:'Please enter a workbench name',
jsContent3:'It is detected that you have modified the style, may I ask whether the model is changed to the model corresponding to the style',
jsContent3:"It looks like you've changed the style. Would you like to replace the currently used mannequin with the system-recommended model for this style?",
},
RobotAssist:{
inputContent1:"write a message~",
@@ -147,12 +147,17 @@ export default {
SelectCollection:'Select Collection',
Upload:'Upload',
Similarity:'Similarity',
RelightDirection:'Relight Direction',
MagicTools:'Magic Tools',
GenerateProduct:'Generate Product',
SelectedProduct:'Selected Product',
Export:'Export',
ProductImage:'Product Image',
Relight:'Relight',
RightLight:'Right Light',
LeftLight:'Left Light',
TopLight:'Top Light',
BottomLight:'Bottom Light',
Clear:'Clear',
jsContent1:'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
jsContent2:'Please select at least one picture',
@@ -174,7 +179,7 @@ export default {
NoLabel:'No Label',
unionSet:'union set',
all:'all',
generated:'All default materials are generated by AiDA ourselves',
generated:'All default materials are generated by AiDA',
ImageOnly:'Image Only',
TextOnly:'Text Only',
TextImage:'Text-Image',

10
src/store/uploadFile/uploadFile.ts
View File

@@ -69,6 +69,8 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
let maxImg = 8
if(data.type_.type2 == 'Sketchboard'){
maxImg = 20
}else if(data.type_.type2 == 'Printboard'){
maxImg = 16
}
if(data.type_.type1 == 'generate'){//判断是generate||library
data.resData.designType = 'Generate'
@@ -102,7 +104,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
// message.warning(GO.jsContent1)
message.warning(data.jsContent1)
}else{
data.checked = true
data.collectionChecked = true
file.push(data)
}
}else{
@@ -117,12 +119,12 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
if(arr.length >= maxImg){
message.warning(data.jsContent1)
}else{
data.checked = true
data.collectionChecked = true
file.push(data)
}
}else{
data.checked = false
file = file.filter((v:any)=> v.id != data.id)
data.collectionChecked = false
file = file.filter((v:any)=> v.id != data.id)
// if(data.id_){
// data.checked = false
// file = file.filter((v:any)=> v.id_ != data.id_)

1
src/views/HomeView/HomeView.vue
View File

@@ -953,6 +953,7 @@ export default defineComponent({
this.isShowMark = true;
Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
(rv: any) => {
this.beenPublished = rv.beenPublished
this.dealHistoryChooseData(rv, type);
this.isShowMark = false;
}