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
2025-04-09 14:09:19 +08:00
parent b6e5f05f06
commit 37f1b36e54
76 changed files with 1969 additions and 970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/component/Canvas/argument.vue
View File

@@ -2,11 +2,11 @@
<div class="canvasArgument">
<div class="label_item wH">
<div class="title">{{ $t('exportModel.Width') }}</div>
<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.layerWidth">
</div>
<div class="label_item wH">
<div class="title">{{ $t('exportModel.Height') }}</div>
<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.layerHeight">
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
@@ -93,7 +93,6 @@
:style="{'font-family':canvasGeneral.fontFamily}"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</div>
@@ -148,6 +147,7 @@
}
const addImage = (item:any)=>{
if(!item.minioUrl)item.minioUrl = item.imgUrl
item.imgUrl = item?.url || item?.designOutfitUrl || item?.imgUrl || item?.minioUrl
canvasGeneral.addImage(item)
}
return {

22
src/component/Canvas/canvasContent.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="canvasContent_box">
<div class="canvasContent" ref="canvasScaleDom">
<div v-if="isPresuppose" class="generalCanvas_center presuppose">
<!-- <div v-if="isPresuppose" class="generalCanvas_center presuppose">
<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
</div>
<div v-else class="generalCanvas_center canvas" ref="canvasDom">
</div> -->
<div class="generalCanvas_center canvas" ref="canvasDom">
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
</div>
</div>
@@ -29,7 +29,6 @@
const data:any = reactive({
canvasScaleDom:null,
canvasDom:null,
isPresuppose:false,
isShowMark:false,
pencilbtnStyle:{},
@@ -41,7 +40,7 @@
await canvasGeneral.canvasInit(data.canvasDom,{
width:data.canvasDom.offsetWidth,
height:data.canvasDom.offsetHeight,
})
},'','','',2000)
resolve('')
})
})
@@ -105,17 +104,16 @@
const openSetData =async ()=>{
let oldCanvas = store.state.HomeStoreModule.canvasData?.canvas
if(oldCanvas){
await createCanvas({})
await canvasGeneral.createCanvas(data.canvasDom,{
width:data.canvasDom.offsetWidth,
height:data.canvasDom.offsetHeight,
},2000)
canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
}else{
await createCanvas({})
}
}
onMounted(()=>{
if(canvasType == 'export'){
data.isPresuppose = true
}else{
createCanvas({})
}
})
return {
canvasGeneral,

25
src/component/Canvas/detail.vue
View File

@@ -5,7 +5,7 @@
>
<div class="layer">
<div class="layer-item button" @click="canvasGeneral.createLayer">
新建图层
Add Layer
</div>
<div class="layer-item-box-scroll">
<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
@@ -13,11 +13,11 @@
v-for="item,index in layerList"
:key="item"
:style="item?.style"
@click="canvasGeneral.selectLayer(item.id)"
@mousedown="mousedown($event,item,index)"
@touchstart="touchstart($event,item,index)"
@click.stop="canvasGeneral.selectLayer(item.id)"
@mousedown.stop="mousedown($event,item,index)"
@touchstart.stop="touchstart($event,item,index)"
@contextmenu="openMenu($event,item,index)"
@contextmenu.stop="openMenu($event,item,index)"
:class="{'active':item.id == canvasGeneral.layer.selectLayer.id}">
<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
@@ -26,17 +26,19 @@
<div>
{{ item.name }}
</div>
<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">删除</div>
<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
</div>
</div>
</div>
<div class="layer-menu" :style="styleMenu">
<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">复制</div>
<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">删除</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">设置栅格化</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">取消栅格化</div>
<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">Copy</div>
<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">Delete</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">Rasterize layer</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">Cancal rasterization</div>
</div>
</div>
</template>
@@ -90,7 +92,7 @@
const openMenu = (event:any,item:any,index:number)=>{
if(event.preventDefault)event.preventDefault();
data.itemMenu = item;
data.itemMenu.index = index
// data.itemMenu.index = index
let position = data.detailDom.getBoundingClientRect();
data.styleMenu = {
left:event.clientX - position.left+'px',
@@ -191,7 +193,6 @@
}
});
if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
}
return {
canvasGeneral,

18
src/component/Canvas/index.vue
View File

@@ -20,7 +20,7 @@
<div class="gallery_btn" style="margin: 0 2rem;" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
<!-- <publish ref="publish" @clearPublish="()=>{}"></publish> -->
<publish ref="publish" @clearPublish="()=>{}"></publish>
</div>
</template>
<script>
@@ -118,7 +118,6 @@ export default defineComponent({
const getCanvasData = ()=>{
if(!canvasObj.canvas)return
var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
// console.log(JSON.stringify(json));
json.objects.forEach(item=>{
if(item.type == 'image'){
delete item.src
@@ -131,6 +130,7 @@ export default defineComponent({
return canvasExport
}
const openSetData = async ()=>{
//获取所有所选元素
let arr = store.state.Workspace.projectList
let obj = {}
for (let index = 0; index < arr.length; index++) {
@@ -142,6 +142,13 @@ export default defineComponent({
resolve('')
return
}
if(keys == 'design'){
value[keys].forEach((designItem)=>{
let minioUrl = designItem.url
designItem.url = designItem.designOutfitUrl
designItem.minioUrl = designItem.minioUrl
})
}
let rv = {
list:value[keys],
name:item.name,
@@ -150,9 +157,10 @@ export default defineComponent({
resolve('')
})
})
}
data.elementList = obj
//获取所有所选元素 END
if(data.showCanvas)return
data.showCanvas = true
dataDom.canvasContent.openSetData()
@@ -179,7 +187,6 @@ export default defineComponent({
name: "collection.png",
});
let num = 0;
console.log(data.elementList)
for (let key in data.elementList) {
for (let index = 0; index < data.elementList[key].list.length; index++) {
const item = data.elementList[key].list[index];
@@ -188,7 +195,6 @@ export default defineComponent({
img.push({imgUrl:url,name:`element${index}.${name}`})
}
}
console.log(img)
downImg(img);
};
let getImgArrayBuffer = (url) => {
@@ -252,7 +258,7 @@ export default defineComponent({
onMounted(() => {
});
onBeforeUnmount(()=>{
// canvasGeneral.canvasClear()
canvasObj.canvasClear()
})
return {
isShowMark,

1
src/component/Canvas/tool.vue
View File

@@ -117,6 +117,7 @@ import { Https } from "@/tool/https";
flex-direction: column;
position: relative;
align-items: center;
overflow-y: auto;
&.leftAlign{
justify-content: flex-start;
}

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

@@ -1,34 +1,32 @@
<template>
<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
<a-modal
class="addDetails_modal generalModel"
class="addDetails_modal generalModel fullScreen"
v-model:visible="addDetails"
:footer="null"
:get-container="() => $refs.addDetailsModal"
width="78%"
width="100%"
height="100%"
:maskClosable="false"
:centered="true"
:closable="false"
:destroyOnClose="true"
wrapClassName="#app"
:keyboard="false"
:mask="false"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
</svg>
</div>
</div>
<div class="addDetails_center">
<div class="modal_title_text">
<div>{{ $t('addDetails.AddDetails') }}</div>
<div class="modal_title_text_intro"></div>
</div>
<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
</div>
<div></div>

24
src/component/Detail/editFrontBack.vue
View File

@@ -90,6 +90,7 @@ export default defineComponent({
ratio = [1,1]
imgData.value = data
nextTick(()=>{
let contentBox = document.querySelector(".editFrontBack_center");
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
document.removeEventListener('mousemove', mouseMove);
@@ -97,33 +98,36 @@ export default defineComponent({
let img = new Image();
img.onload = async function(){
loadingShow.value = true
let scale = img.width/img.height
let height = canvasBox.offsetHeight;
canvasWH.value = height
canvasBox.style.width = height * scale+'px'
let scale
let wScale = 1
let hScale = 1
let styleWidth = Number(data.style.width.split('px')[0])
let styleHeight = Number(data.style.height.split('px')[0])
let width = contentBox.offsetWidth;
let height = contentBox.offsetHeight;
if(styleWidth>styleHeight){
hScale = styleHeight/styleWidth
exportWH = img.width
canvasWH.value = width
scale = img.height/img.width
console.log(width,scale)
canvasBox.style.height = width * scale+'px'
}else{
wScale = styleWidth/styleHeight
exportWH = img.height
canvasWH.value = height
scale = img.width/img.height
canvasBox.style.width = height * scale+'px'
}
editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
ratio = [wScale,hScale]
// canvas = frontBackCanvasObj.canvasInit(canvasBox,{
// width:canvasWH.value * wScale,
// height:canvasWH.value * hScale,
// })
await frontBackCanvasObj.canvasInit(canvasBox,{
width:canvasWH.value * wScale,
height:canvasWH.value * hScale,
},data.maskUrl,'',{})
},data.maskUrl,'',{noWheel:true})
// undividedLayer
canvas = frontBackCanvasObj.canvas
@@ -383,6 +387,8 @@ export default defineComponent({
width: 100%;
background: #e6e6e6;
cursor: auto;
display: flex;
align-items: center;
&:hover{
cursor: none;
}

4
src/component/Detail/habitSetStyle.vue
View File

@@ -272,10 +272,10 @@ methods: {
left: 50%;
border-radius: 2rem;
transform: translate(-50%, -50%);
background: radial-gradient(50px circle at var(--x) var(--y),#39215b 0,transparent 100%);;
background: radial-gradient(50px circle at var(--x) var(--y),#000 0,transparent 100%);;
}
.content_bottom_item .active{
background: #39215b;
background: #000;
color: #fff;
}
}

75
src/component/DetailCopy/canvas/argument.vue
View File

@@ -10,13 +10,13 @@
</div> -->
<div v-show="isEditFrontBack" class="frontBack">
<div class="label_item" @click.stop="setOperation('print')">
<div class="title">Sharding</div>
<div class="title">Masking :</div>
<a-select
v-model:value="frontBackData"
:options="frontBackDataList"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
style="width:12rem;"
style="width:18rem;"
@change="changeFrontBackData"
>
<template #suffixIcon
@@ -28,7 +28,7 @@
</a-select>
</div>
<div class="label_item">
<div class="titile">{{ $t('exportModel.Size') }}:</div>
<div class="title">{{ $t('exportModel.Size') }} :</div>
<input @change="frontBackCanvas.setFontFamily" type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]">
<!-- <input type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]"> -->
@@ -65,6 +65,17 @@
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
</div>
</div>
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
<div class="title">{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
style="width: 12rem "
@change="canvasGeneral.textureValueChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
@@ -80,7 +91,7 @@
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
<div class="title">{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
style="width: 12rem "
style="width: 12rem ;height: 6rem;"
@change="canvasGeneral.brushworkChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
@@ -88,17 +99,7 @@
</a-select-option>
</a-select>
</div>
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
<div class="title">{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
style="width: 12rem "
@change="canvasGeneral.textureValueChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'pencil' &&
canvasGeneral.operation != 'eraser'&&
@@ -162,13 +163,13 @@
frontBackData:'#ff0000',
frontBackDataList:[
{
name:'正面',
name:'Front Piece',
value:'#ff0000'
},{
name:'反面',
name:'Back Piece',
value:'#00ff00'
},{
name:'背景',
name:'Surroundings',
value:'background'
},
]
@@ -190,9 +191,10 @@
const closeModal = ()=>{
document.removeEventListener('click',setOper)
}
const selectImgItem = (data:any)=>{
data.minioUrl = data.url
canvasGeneral.addPartImg(data,'print')
const selectImgItem = (value:any)=>{
value.minioUrl = value.url
canvasGeneral.addPartImg(value,'print')
data.operation = ''
}
const changeFrontBackData = (value:any)=>{
emit('setFrontBackColor',value)
@@ -227,7 +229,7 @@
display: flex;
}
> .current{
border-radius: 3rem;
border-radius: 1rem;
height: 3rem;
width: 7rem;
border: 1px solid #000;
@@ -238,7 +240,7 @@
top: 4rem;
background: #fff;
border: 1px solid #000;
border-radius: 2rem;
border-radius: 1rem;
padding: 2.4rem;
width: 40rem;
height: 50rem;
@@ -264,14 +266,7 @@
cursor: pointer;
}
}
input{
height: 100%;
border-radius: 3rem;
width: 12rem;
background: #fff;
height: 3rem;
border: 1px solid #000;
}
&.wH input{
width: 5rem;
}
@@ -280,23 +275,7 @@
font-weight: 600;
font-size: 1.8rem;
}
:deep(.ant-select){
border-radius: 3rem;
.ant-select-selector{
height: 100%;
border-radius: 3rem;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
.ant-select-selection-item{
display: flex;
font-size: 2rem;
line-height: 3rem;
}
}
}
}
&.sketch{

7
src/component/DetailCopy/canvas/canvasContent.vue
View File

@@ -21,6 +21,7 @@
const store = useStore();
let {t} = useI18n()
let canvasType = inject('canvasType')
let getCanvasIfEdit:any = inject('getCanvasIfEdit')
let canvasGeneral:any = inject('canvasObj')
const data:any = reactive({
canvasScaleDom:null,
@@ -31,6 +32,9 @@
})
getCanvasIfEdit.fun = ()=>{
return canvasGeneral.getElement()
}
const createCanvas = (canvasSize:any)=>{
nextTick(async ()=>{
let img = data.selectDetail.undividedLayer
@@ -53,8 +57,9 @@
width:WH.height*wScale,
height:WH.height*hScale,
}
// let editGroupImg = data.selectDetail.partialDesign.partialDesignPath || data.selectDetail.partialDesign.partialDesignBase64
let editGroupImg = data.selectDetail.partialDesign.partialDesignPath
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg)
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg,{dashedIsDetail:true})
}
image.src = img
// canvasGeneral.canvasInit(data.canvasDom,canvasSize)

5
src/component/DetailCopy/canvas/index.vue
View File

@@ -87,6 +87,7 @@ export default defineComponent({
})
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
// privewDetail(oldValue)
},{immediate: true})
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
provide('canvasObj',detailData.canvasObj)
@@ -121,9 +122,9 @@ export default defineComponent({
detailData.frontBackCanvasObj.currentOperation = false
}
}
const privewDetail = async ()=>{
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
let data = await detailData.canvasObj.detailSubmit()
detailData.selectDetail.partialDesign.partialDesignBase64 = data
if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
}
const setFrontBackColor = (data:any)=>{
detailDom.editFrontBack.setBackground(data)

62
src/component/DetailCopy/designDetail.vue
View File

@@ -16,7 +16,7 @@
:closable="false"
>
<div class="content">
<div class="nav">
<div class="nav" :class="{isEditPattern:isEditPattern.value}">
<div class="back_home">
<div class="gallery_btn" @click="closeModal()">
<i class="fi fi-rs-house-chimney"></i>
@@ -130,8 +130,12 @@ export default defineComponent({
childKey:0,
singleOveral:{
value:'overall'
}
},
getCanvasIfEdit:{
fun:null,
},
})
provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
provide('singleOveral',detailData.singleOveral)
provide('isEditPattern',detailData.isEditPattern)
const closeModal = ()=>{
@@ -142,6 +146,7 @@ export default defineComponent({
}
const showDesignDetailModal = (data:any,str:any)=>{
// let url = Https.httpUrls.getDesignDetail + `?designItemId=${77770}&designPythonOutfitId=${77423}`
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
detailData.loadingShow = true
Https.axiosGet(url).then(
@@ -154,10 +159,20 @@ export default defineComponent({
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
item.color.rgba = {
r:item.color.r,
g:item.color.g,
b:item.color.b,
if(item.color){
item.color.rgba = {
r:item.color.r,
g:item.color.g,
b:item.color.b,
}
}else{
item.color = {
rgba:{
r:255,
g:255,
b:255,
}
}
}
if(item.gradient){
item.color.gradient = item.gradient
@@ -170,14 +185,14 @@ export default defineComponent({
});
})
detailData.singleOveral.value = rv.singleOverall
console.log(detailData.singleOveral)
detailData.designDetailShow = true
store.commit('DesignDetailCopy/setDesignDetail',rv)
// this.deleteShow = false
setRevocation()
detailData.loadingShow = false
// await this.setImgSize()
store.commit('DesignDetailCopy/setDesignColthes',rv.clothes[0].id)
}
).catch(rv=>{
@@ -240,6 +255,7 @@ export default defineComponent({
const setClothes = async (list:any)=>{
let clothesList:any = []
for(let i = 0;i<list.length;i++){
detailData.selectDetail
let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
if(detailDom.canvasBox?.privewDetail)await (detailDom.canvasBox as any).privewDetail()
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
@@ -425,13 +441,26 @@ export default defineComponent({
top: 50%;
transform: translate(-50%,-50%);
z-index: 2;
:deep(.ant-modal-wrap){
.ant-modal-body{
padding: 0;
:deep(>div){
> .ant-modal-root{
> .ant-modal-centered{
> .fullScreen{
> .ant-modal-content{
> .ant-modal-body{
padding: 0;
}
}
}
}
}
:deep(.ant-modal-wrap){
.ant-modal-body{
// padding: 0;
}
// position: absolute;
// top: 0;
// left: 0;
}
// position: absolute;
// top: 0;
// left: 0;
}
.content{
display: flex;
@@ -444,7 +473,7 @@ export default defineComponent({
&.detailLeft{
width: 34rem;
}
&.isEditPattern{width: 0;}
&.isEditPattern{width: 0px;}
&.model{
width: 50rem;
margin: 0 10rem;
@@ -486,6 +515,9 @@ export default defineComponent({
}
> .nav{
margin-right: 5rem;
overflow: hidden;
// transition: all .3s;
&.isEditPattern{width: 0px;margin: 0;}
> .back_home{
width: 9rem;
text-align: center;

15
src/component/DetailCopy/detailLeft/colorBox/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="color">
<div class="detailText">Palette</div>
<div class="detailText">Current color</div>
<div class="pallet">
<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
</div>
<div class="detailText">New color</div>
<div class="detailText">Color pelette</div>
<div class="colorBox">
<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
@@ -13,7 +13,7 @@
<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
</div>
</div>
<div class="detailText">Upload Image</div>
<div class="detailText">Choose color from image</div>
<div class="uploadImage">
<upload @selectUplpadColor="selectUplpadColor"></upload>
</div>
@@ -246,18 +246,19 @@ export default defineComponent({
flex-direction: column;
overflow-y: auto;
> .detailText{
margin-bottom: 1rem;
margin-bottom: .5rem;
}
> .pallet{
margin-bottom: 4.5rem;
margin-bottom: 2rem;
}
> .colorBox{
margin-bottom: 3rem;
margin-bottom: 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
> .colorBoxItem{
margin: 1rem 0;
// margin: 1rem 0;
margin-bottom: 1rem;
width: 32%;
height: 11rem;
border-radius: .5rem;

2
src/component/DetailCopy/detailLeft/colorBox/pallet.vue
View File

@@ -272,7 +272,7 @@ export default defineComponent({
nextTick().then(()=>{
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("pallet")?.[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try {

2
src/component/DetailCopy/detailLeft/colorBox/upload.vue
View File

@@ -27,7 +27,7 @@
accept=".jpg,.png,.jpeg,.bmp"
>
<div class="upload_tip_block">
<i class="fi fi-rr-picture"></i>
<i class="fi fi-br-upload"></i>
</div>
</a-upload>
</div>

2
src/component/DetailCopy/detailLeft/index.vue
View File

@@ -2,7 +2,7 @@
<div class="detailLeft">
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
<print v-show="currentDetailType == 'print'"></print>
<color v-show="currentDetailType == 'color'"></color>
<color v-if="currentDetailType == 'color'"></color>
<element v-show="currentDetailType == 'element'"></element>
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
</div>

19
src/component/DetailCopy/detailLeft/module/libraryList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="libraryList">
<div class="generalModel_state">
<div class="generalModel_state_item">
<div class="generalModel_state" v-if="type != 'element'">
<div class="generalModel_state_item" style="width: 40%;">
<a-select
v-model:value="designType"
:options="designTypeList"
@@ -18,8 +18,10 @@
></template>
</a-select>
</div>
<div class="generalModel_state_item">
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="generalModel_state_item" style="width: 35%;">
<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
</div>
<div class="generalModel_state_item" style="width: auto;">
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<!-- clothesPrint -->
@@ -84,6 +86,7 @@ export default defineComponent({
currentPage:1,
})
const init = ()=>{
console.log(123)
detailData.designTypeList = props.catecoryList
detailData.designType = detailData.designTypeList[0].value
getLibraryList()
@@ -207,13 +210,15 @@ export default defineComponent({
flex-direction: column;
> .generalModel_state{
width: 100%;
display: flex;
justify-content: space-between;
> .generalModel_state_item{
width: 100%;
margin: 0;
position: relative;
> .search_icon_block{
position: absolute;
right: 5px;
// position: absolute;
// right: 5px;
width: calc(6rem - 4px);
height: calc(6rem - 4px);
color: #fff;
@@ -227,7 +232,7 @@ export default defineComponent({
}
}
> .generalModel_state_item:last-child{
margin-top: 2rem;
// margin-top: 2rem;
}
}
> .libraryList_box{

15
src/component/DetailCopy/detailLeft/module/selectList.vue
View File

@@ -1,8 +1,7 @@
<template>
<div class="selectList">
<div class="switch_type_list">
<div class="switch_type_list" v-if="type != 'element'">
<div
v-if="type != 'element'"
@click.stop="openCurrent()"
class="switch_type_item"
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
@@ -28,7 +27,7 @@
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'">
<div class="content_item" v-show="selectTitle == 'upload'" v-if="type != 'element'">
<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
@@ -39,7 +38,7 @@
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
import { defineComponent,computed,onMounted,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
@@ -78,7 +77,7 @@ export default defineComponent({
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectTitle: props.type == 'element'?'upload':'current',
selectTitle: props.type == 'element'?'library':'current',
printList:[]
})
const getDetailListDom = reactive({
@@ -97,7 +96,11 @@ export default defineComponent({
const selectImgItem = (data:any)=>{
emit('selectImgItem',data)
}
onMounted(()=>{
if(props.type == 'element'){
openLibrary()
}
})
return{
...toRefs(detailData),
...toRefs(getDetailListDom),

13
src/component/DetailCopy/detailRight/editPrintElement.vue
View File

@@ -70,7 +70,9 @@
<a-spin size="large" />
</div>
</div>
<div class="clearOverall" style="text-align: center; height: 6rem;">
<div class="gallery_btn" v-show="!overallSingle && type == 'print'" style="line-height: 5rem;" @click="clearOverall">Clear</div>
</div>
</div>
</template>
@@ -293,7 +295,6 @@ export default defineComponent({
let state = true
editPrintElementData.stateOverallSingle = 'single'
let arr:any = editPrintElementData.selectDetail.printObject.prints
console.log(props.type)
if(props.type == 'element'){
arr = editPrintElementData.selectDetail.printObject.trims
}
@@ -496,8 +497,10 @@ export default defineComponent({
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
}
const clearOverall = ()=>{
editPrintElementData.printStyleList[props.type].overall = []
}
onMounted(()=>{
console.log(123123)
if(props.type == 'element'){
editPrintElementData.stateOverallSingle = 'single'
editPrintElementData.overallSingle = true
@@ -516,13 +519,13 @@ export default defineComponent({
itemSizeMousedown,
deletePrint,
previewDetailPrintData,
clearOverall,
}
},
directives:{
//操作旋转
rotote:{
mounted(el,value:any){
console.log(value)
let mousedown = function(event:any){
let e = getMousePosition(event,false)
mouseDownOperation(e)
@@ -680,6 +683,8 @@ export default defineComponent({
.designOpenrtion_imgMask{
width: auto;
height: auto;
min-width: 60%;
// max-height: 80%;
position: relative;
>img{
z-index: 2;

2
src/component/DetailCopy/detailRight/sketchType.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sketchType">
<div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
<div class="detailText">New Apparel</div>
<div class="sketchContent">
<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">

34
src/component/DetailCopy/model/index.vue
View File

@@ -12,12 +12,12 @@
<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></i>
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i>
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i> -->
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
<!-- 层 -->
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mousedownDesignImg" @touchstart="mousedownDesignImg" @touchend="mousedownDesignImg"></i>
</div>
<position ref="position" @canvasReload="()=>$emit('canvasReload')" :imgDesignImg=imgDesignImg></position>
@@ -31,6 +31,7 @@ import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reacti
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
import position from './modelPosition.vue';
import modelNav from './modelNav.vue';
@@ -40,9 +41,10 @@ export default defineComponent({
},
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation'],
setup(props,{emit}) {
const {t} = useI18n()
const store = useStore();
const detailData = reactive({
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
})
const setRevocation:any = inject('setRevocation')
const getDetailListData = reactive({
@@ -58,7 +60,31 @@ export default defineComponent({
return getDetailListDom.position.getSubmitData(value)
}
const showDesignImgDetail = (str:any)=>{
emit('detailEdit',str)
new Promise((resolve, reject) => {
if(
getDetailListData.isEditPattern.value&&
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
){
Modal.confirm({
title: t('collectionModal.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
resolve(true)
emit('detailEdit',str)
},
onCancel(){
resolve(false)
}
});
}else{
resolve(true)
emit('detailEdit',str)
}
})
}
const deleteItem = ()=>{
setRevocation()

10
src/component/DetailCopy/model/modelNav.vue
View File

@@ -33,14 +33,19 @@ export default defineComponent({
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
frontBack:{} as any,
isEditPattern:inject('isEditPattern') as any,
singleOveral:inject('singleOveral') as any
singleOveral:inject('singleOveral') as any,
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
})
watch(()=>detailData.frontBack_,(newFollowVue)=>{
detailData.frontBack = newFollowVue
})
const selectDetailItem = (item:any,index:number)=>{
new Promise((resolve, reject) => {
if(detailData.isEditPattern.value && detailData.selectDetail?.id){
if(detailData.isEditPattern.value &&
detailData.selectDetail?.id &&
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
){
Modal.confirm({
title: t('collectionModal.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
@@ -58,6 +63,7 @@ export default defineComponent({
});
}else{
resolve(true)
emit('canvasReload')
}
}).then((rv)=>{
if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)

21
src/component/DetailCopy/model/modelPosition.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="molepositon" :class="{active:!imgDesignImg}">
<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
<div class="designOpenrtion_print" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img v-show="singleOveral.value == 'overall'" class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
<div class="detail_modal_item_front" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
<div class="designOpenrtion_btn" v-show="singleOveral.value != 'overall'">
<div class="designOpenrtion_btn">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
@@ -18,7 +18,7 @@
</div>
</div>
<div class="designOpenrtion_imgMask" v-else>
<!-- <img src="" alt=""> -->
<img :src="selectDetail.undividedLayer" alt="">
</div>
</div>
<div class="molepositon" :class="{active:imgDesignImg}">
@@ -339,6 +339,7 @@ export default defineComponent({
}
return{
...toRefs(detailData),
...toRefs(selectItem),
...toRefs(getDetailListDom),
itemSizeMousedown,
@@ -407,9 +408,10 @@ export default defineComponent({
>img{
z-index: 2;
position: relative;
// width: 100%;
width: 100%;
height: 100%;
object-fit: contain;
object-fit: contain;
}
>div{
position: absolute;
@@ -426,11 +428,6 @@ export default defineComponent({
user-select:none;
-webkit-user-drag: none;
}
&.active{
> img{
object-fit: contain;
}
}
.modal_imgItem{
position: absolute;
overflow: hidden;

48
src/component/HomePage/Cropper.vue
View File

@@ -17,7 +17,6 @@
<div>{{ $t('Cropper.Cutpicture') }}</div>
</div>
<div class="header_right_block" @click.stop="">
<div class="next_step_button" @click.stop="finishCropper()">{{ $t('Cropper.Finish') }}</div>
<div class="header_cancel_button" @click.stop="cancleCropper()">{{ $t('Cropper.Cancel') }}</div>
</div>
</div>
@@ -54,7 +53,7 @@
<div class="review_logo icon iconfont icon-yulan"></div>
<div>{{ $t('Cropper.CropPreview') }}</div>
</div>
<div class="cut_picture_review_block">
<div class="cut_picture_review_block" :style="{'width': previews.w + 'px', 'height': previews.h + 'px'}">
<div class="cut_picture_review_item">
<div class="cut_picture_review_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
<div :style="previews.div">
@@ -62,6 +61,10 @@
</div>
</div>
</div>
<div class="next_step_button" @click.stop="finishCropper()">
<!-- <i class="fi fi-rr-check"></i> -->
<i class="fi fi-sr-check-circle"></i>
</div>
<!-- <div class="cut_picture_review_item">
<div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
<div :style="previews.div" >
@@ -206,11 +209,10 @@ export default defineComponent({
padding: 0 calc(1.2rem*1.2);
height: calc(3.2rem*1.2);
// background: linear-gradient(160deg, #AC2A3B, #292161);
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
background: #000;
color: #fff;
border-radius: calc(1.6rem*1.2);
font-size: calc(1.4rem*1.2);
color: #000;
line-height: calc(3.2rem*1.2);
margin-right: calc(1.6rem*1.2);
white-space: nowrap;
@@ -237,10 +239,16 @@ export default defineComponent({
// background: #F2F3FB;
display: flex;
justify-content: space-between;
align-items: center;
.cut_picture_right,.cut_picture_left{
display: flex;
flex-direction: column;
height: 80%;
}
.cut_picture_left{
width: calc(70.7rem*1.2);
height: 100%;
// height: 100%;
background: #fff;
border-radius: calc(2rem*1.2);
padding: calc(1.3rem*1.2) calc(1.3rem*1.2) calc(2rem*1.2);
@@ -301,12 +309,12 @@ export default defineComponent({
.cut_picture_right{
// width: 39.2rem;
width: calc(52rem*1.2);
height: 100%;
background: #fff;
border-radius: calc(2rem*1.2);
margin-block: -5rem;
.cur_picture_right_header{
padding: calc(2rem*1.2);
// padding: calc(2rem*1.2);
padding: 2rem;
display: flex;
align-items: center;
font-size: var(--aida-fsize1-8);
@@ -324,9 +332,25 @@ export default defineComponent({
.cut_picture_review_block{
width: 100%;
padding: 0 calc(2rem*1.2);
height: calc(100% - 6.8rem*1.2);
margin: 0 auto;
.next_step_button{
margin-top: 2rem;
i{
display: flex;
// height: 4rem;
// width: 4rem;
// background: #000;
// color: #fff;
font-weight: 900;
border-radius: 50%;
font-size: 4rem;
align-items: center;
justify-content: center;
margin: 0 auto;
cursor: pointer;
}
}
.cut_picture_review_item{
width: 100%;
// height: 50%;
@@ -338,7 +362,7 @@ export default defineComponent({
position: absolute;
left: 50%;
top: 50%;
transform: scale(0.8) translate(-50%, -50%);
transform: scale(1) translate(-50%, -50%);
background: rgba(91,94,105,0.8);
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
border-radius: calc(1rem*1.2);

84
src/component/HomePage/Generate.vue
View File

@@ -39,7 +39,7 @@
</div>
</div>
</div>
<input
<!-- <input
class="search_input"
@input="ifMaximumLength"
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
@@ -48,7 +48,18 @@
@keydown.enter="getgenerate()"
@click="inputFocus()"
@paste="onPaste"
/>
/> -->
<textarea
class="textarea"
@input="ifMaximumLength"
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
@keydown.enter.prevent="getgenerate()"
@click="inputFocus()"
v-model="searchPictureName"
@paste="onPaste"
></textarea>
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
<a-upload
class="search_upImg"
@@ -68,8 +79,8 @@
</a-upload>
</i>
<i v-show="scene?.value == 'Slogan'" :title="$t('Generate.sloganTitle')" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
<!-- <i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
</div>
<div class="input_box_btnBox sketch" v-else>
<div class="upload_item" v-show="sketchboardList.length > 0">
@@ -91,7 +102,7 @@
>
<img :src="file?.imgUrl" class="upload_img" />
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
<i class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></i>
</div>
</div>
</div>
@@ -127,8 +138,10 @@
@click.stop=""
v-model="searchPictureName"
></textarea>
<div class="generage_btn_box" v-show="!isGenerate">
<div class="generage_btn started_btn">
<div class="generage_btn_box">
<div class="generage_btn started_btn" v-show="!isGenerate">
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getgenerate()"></i>
<!--
<div :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click.stop="getgenerate">
<span
v-if="
@@ -139,22 +152,29 @@
{{ speedData.label }}
</span>
<span v-else>{{ $t('Generate.Generate') }}</span>
</div>
</div> -->
<div class="icon iconfont icon-xiala" v-show="
type_.type2 == 'Moodboard' ||
(type_.type2 == 'Printboard' && scene?.value == 'Pattern') ||
(type_.type2 == 'Sketchboard' && scene?.value == 'generate')" :class="{active:speedState}" @click.stop="openSpeed"></div>
<div class="content" v-show="speedState">
<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
</div>
<div class="content" v-show="speedState">
<div v-for="item in speedList" :key="item.value" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
<div class="generage_btn started_btn" v-show="isGenerate && !remGenerate">
<i class="fi fi-br-loading" ></i>
</div>
<div class="generage_btn started_btn" v-show="remGenerate" @click="removeGenerate">
{{$t('Generate.Close')}}
</div>
</div>
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
<!-- <div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}">
{{$t('Generate.Close')}}
</div>
</div> -->
<span class="inputShowText" ref="inputShowText"></span>
</div>
<div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
@@ -273,20 +293,20 @@ export default defineComponent({
let speed = reactive({
speedList:[
{
title:'Picture quality is average, speed is fast',
label:'Low Quality',
title:'Generate image in fast speed normal quality',
label:'Normal',
value:'fast',
},{
title:'Picture quality is high, speed is slow',
label:'High Quality',
title:'Generate image in high quality low speed',
label:'High',
value:'high',
},
],
speedState:false,
speedData:{
title:'Picture quality is average, speed is fast',
label:'Low Quality',
title:'Generate image in fast speed normal quality',
label:'Normal',
value:'fast',
},
})
@@ -646,7 +666,7 @@ export default defineComponent({
let dataNum = dataList.length
let state = true
this.generateTime = setInterval(()=>{
if(!this.isGenerate || this.remGenerate)return
if(!this.isGenerate || !this.remGenerate)return
if(!state)return
state = false
Https.axiosPost(Https.httpUrls.generateResult, data).then(
@@ -753,10 +773,25 @@ export default defineComponent({
this.searchPictureSeed = 0
}
},
ifMaximumLength(){
ifMaximumLength(event:any){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
let input = inputBox.getElementsByClassName('search_input')[0]
let textarea = event.target as HTMLTextAreaElement;
const scrollTop = textarea.scrollTop;
// 2. 计算单行高度
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
// 3. 重置高度为1行
textarea.style.height = lineHeight + 'px';
// 4. 计算实际需要的高度
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
// 5. 应用新高度并恢复滚动位置
textarea.style.height = newHeight + 'px';
textarea.scrollTop = scrollTop;
this.inputTime = setTimeout(()=>{
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
// let num2 = (input as HTMLInputElement).value.split(' ').length
@@ -957,8 +992,9 @@ export default defineComponent({
flex-direction: column;
position: relative;
// padding-top: calc(2.5rem*1.2);
.input_border{
.input_border{//输入框
padding-top: 1rem;
}
.mark_loading{
@@ -1011,8 +1047,10 @@ export default defineComponent({
}
}
img {
width: calc(10rem*1.2);
height: calc(10rem*1.2);
// width: calc(10rem*1.2);
// height: calc(10rem*1.2);
width: 100%;
height: 100%;
object-fit: contain;
}
&:hover .delete_like_file_block{

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

@@ -10,7 +10,7 @@
<div class="my_material_header">
<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
<div class="select_block">
<generalMenu :dataList="disignTypeList" @setprintModel="menuChange" :item="disignType"></generalMenu>
<generalMenu selectWidth="15rem" :dataList="disignTypeList" @setprintModel="menuChange" :item="disignType"></generalMenu>
<!-- <a-select
ref="select"
v-model:value="disignType"

4
src/component/HomePage/NewCollectionReview.vue
View File

@@ -199,9 +199,8 @@ export default defineComponent({
.collection_review{
// width: 40.8rem;
width: 100%;
background: #fff;
position: relative;
padding: 2rem;
.collection_review_mark{
position: absolute;
@@ -213,7 +212,6 @@ export default defineComponent({
}
.img_block_item{
margin-bottom: 2rem;
// &.color_block_item{
// padding: 0 0.5rem 0 0.3rem;
// }

4
src/component/HomePage/SketchboardUpload.vue
View File

@@ -656,7 +656,7 @@ export default defineComponent({
margin-top: auto;
position: relative;
>div{
width: 14rem;
width: 18rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
@@ -669,7 +669,7 @@ export default defineComponent({
}
}
ul{
width: 14rem;
width: 18rem;
}
}
.switch_type_item:nth-child(3){

31
src/component/HomePage/generalMenu.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="generalMenu_printModel">
<div @click.stop="openPrintModel" :class="driverClass.class1" :style="$props.style_">
<div @click.stop="openPrintModel" :class="driverClass.class1" :style="{...$props.style_,'width':selectWidth}">
<a-popover v-if="isCanvas">
<template #content>
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
@@ -15,12 +15,12 @@
</div>
<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
</div>
<ul :class="driverClass.class2" v-show="openClick">
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth}">
<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
<a-popover placement="right" v-if="isCanvas">
<template #content>
<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
<img v-if="item.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
<a-upload
@@ -43,12 +43,12 @@
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
</template>
<span v-if="item?.label">{{ item?.label }}</span>
<span v-else>{{ item?.name }}</span>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</a-popover>
<div v-else>
<span v-if="item?.label">{{ item?.label }}</span>
<span v-else>{{ item?.name }}</span>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</div>
</li>
</ul>
@@ -90,6 +90,10 @@ import { message, Upload, Modal } from "ant-design-vue";
style_:{
type:Object,
default:{}
},
selectWidth:{
type:String,
default:'20rem'
}
},
emits:['setprintModel'],
@@ -200,7 +204,7 @@ import { message, Upload, Modal } from "ant-design-vue";
//衣服类型下拉菜单
.generalMenu_printModel{
margin-right: 2rem;
height: 6rem;
height: 5rem;
.icon-xiala{
margin-left: auto;
transition: all .3s;
@@ -212,11 +216,11 @@ import { message, Upload, Modal } from "ant-design-vue";
// display: flex;
display: block;
width: 20rem;
border-radius: 4rem;
border-radius: 1rem;
margin: 0;
border: 1px solid;
cursor: pointer;
padding: 1.5rem 2rem;
padding: 1rem;
text-align: center;
display: flex;
font-size: 1.8rem;
@@ -239,7 +243,6 @@ import { message, Upload, Modal } from "ant-design-vue";
position: absolute;
border: 1px solid;
width: 20rem;
text-align: center;
margin-top: calc(.3rem*1.2);
border-radius: calc(1rem*1.2);
overflow: hidden;
@@ -265,6 +268,10 @@ import { message, Upload, Modal } from "ant-design-vue";
cursor: not-allowed;
}
&.hover{
background: #f3f3f6;
color: #000;
}
:deep(.icon-shanchu){
cursor: pointer;
position: absolute;

5
src/component/HomePage/index/index.vue
View File

@@ -12,7 +12,7 @@
</div>
</div>
</div>
<workflow v-else ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType"></workflow>
<workflow v-if="selectObject?.type" ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType"></workflow>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
@@ -113,10 +113,11 @@ export default defineComponent({
let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
//取出数组对象某个值
let storeData = {
name:'测试项目',
name:rv.name,
id:rv.id,
type:type?.value,
httpType:rv.process,//项目类型
ageGroup:rv.workspaceVO.ageGroup,
style:rv.workspaceVO.style,
styleId:rv.workspaceVO.styleId,
styleName:rv.workspaceVO.styleName,

10
src/component/HomePage/index/model/collection/ColorboardUpload.vue
View File

@@ -655,15 +655,17 @@ export default defineComponent({
setColorboardList(colorList){
let newColorList = colorList.map((v)=>{
console.log(v)
let data = {
id:'',
name:'',
name:v?.name?v?.name:'',
rgbValue:v.rgba,
gradient:v.gradient,
}
return data
})
console.log(123)
this.store.commit('setColorboardList',newColorList)
},
@@ -671,11 +673,11 @@ export default defineComponent({
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
let hex
colorList.forEach((ele, index) => {
this.colorList[index] = ele
hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
this.colorList[index].rgba = ele.rgbValue
this.colorList[index].gradient = ele.gradient
// if(ele.gradient) this.colorList[index].gradient = ele.gradient
// if(ele.gradient) this.colorList[index].gradient = ele.gradient
this.colorList[index].name = ele.name
});
if(this.colorList[0]?.gradient && this.colorList[0]?.gradient?.selectIndex>-1 && this.colorList[0]?.gradient?.gradientShow){
this.selectColor = {rgba:this.colorList[0].gradient.gradientList[0].rgba,hex:hex} //顔色选择器默认颜色
@@ -974,7 +976,7 @@ export default defineComponent({
}
}
.fi-rr-square-plus,.fi-rr-picture{
zoom: 7.5;
zoom: 6;
display: flex;
}
.upload_file_item{

1
src/component/HomePage/index/model/collection/MoodboardUpload.vue
View File

@@ -339,6 +339,7 @@ export default defineComponent({
deleteFile(item: any) {
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
item.state = 'delete'
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.moodboardFiles

1
src/component/HomePage/index/model/collection/PrintboardUpload.vue
View File

@@ -384,6 +384,7 @@ export default defineComponent({
// this.store.commit('setPrintboardFile',this.fileList)
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
item.state = 'delete'
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.printboardFiles

5
src/component/HomePage/index/model/collection/SketchboardUpload.vue
View File

@@ -465,6 +465,7 @@ export default defineComponent({
deleteFile(item: any) {
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
item.state = 'delete'
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
@@ -658,7 +659,7 @@ export default defineComponent({
margin-top: auto;
position: relative;
>div{
width: 14rem;
width: 18rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
@@ -671,7 +672,7 @@ export default defineComponent({
}
}
ul{
width: 14rem;
width: 18rem;
}
}
.switch_type_item:nth-child(3){

8
src/component/HomePage/index/model/deReconstruction/canvas/argument.vue
View File

@@ -1,5 +1,12 @@
<template>
<div class="canvasArgument">
<div class="label_item">
<div >{{ $t('exportModel.Layer') }}:</div>
<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
@@ -77,6 +84,7 @@
<span style="margin-right: 2rem;">Show Models</span>
<a-switch v-model:checked="isShowBg" @change="showBg" />
</div>
</div>
</template>

8
src/component/HomePage/index/model/deReconstruction/canvas/canvasContent.vue
View File

@@ -9,7 +9,7 @@
</template>
<script lang="ts">
import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted, watch} from 'vue'
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n'
@@ -31,8 +31,12 @@
const dataDom = reactive({
canvasScaleDom:null as any,
})
watch(()=>data.selectObject.model.id,(newVal:any)=>{
if(newVal){
canvasGeneral.upDataRectBGImg(data.selectObject.model.url)
}
})
const createCanvas = ()=>{
console.log(123123,data.isCanvas)
if(data.isCanva)return
nextTick(async ()=>{
let width = dataDom.canvasScaleDom.offsetWidth

201
src/component/HomePage/index/model/design/index.vue
View File

@@ -9,9 +9,17 @@
<div class="designPage_left" ref="hidden">
<div class="designPage_left_content" :class="{'active':(domHidden)}">
<!-- 有图状态 start-->
<div class="home_left_info">
<div class="left_info_content scroll_style">
<div class="left_info_content_body" ref="collection_canvas">
<div class="right_content_header">
<div class="content_header_left" style="padding-top: 2rem;">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('HomeView.elementTitle') }}
</span>
</div>
</div>
<NewCollectionReview id="collectionReview"></NewCollectionReview>
<!-- <ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection> -->
@@ -36,15 +44,15 @@
<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
{{ $t('HomeView.Design') }}
</div>
<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
@click="resDesignCollection()">
{{ $t('HomeView.Redesign') }}
</div>
<div class="silder button_margin_14" v-show="designCollectionId">
</div> -->
<div class="silder button_margin_14" v-show="likeDesignCollectionList?.length > 0">
<div class="text">Small</div>
<a-slider
class="system_silder"
v-model:value="collValue"
v-model:value="elementWidth"
:min="minCollValue"
:max="maxCollValue-1"
@afterChange="setSystemDesigner(500)"
@@ -53,10 +61,9 @@
</a-slider>
<div class="text">Big</div>
</div>
<div v-show="designCollectionId && userGroupId" class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
<!-- {{ $t('HomeView.Export') }} -->
<!-- <div v-show="designCollectionId && userGroupId" class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
{{$t('HomeView.FinalizeCollection')}}
</div>
</div> -->
</div>
</div>
<div class="right_content_block_box">
@@ -73,7 +80,6 @@
</div>
<div class="right_content_img_block scroll_style active">
<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId,'like')"
@@ -334,9 +340,11 @@ export default defineComponent({
let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
const collItemSize = reactive({
collValue:( sessionStorageCollValue>= 20? 10:sessionStorageCollValue) || 3,
minCollValue:4,
maxCollValue:20,
collValue:6,
elementWidth:100,
minCollValue:100,
maxCollValue:999,
padding:60,
likeStyle:{
width:'240px',
height:'370px',
@@ -370,14 +378,18 @@ export default defineComponent({
}
let getDesignTime = null as any;
const setSystemDesigner = (time:any)=>{
clearTimeout(collItemSize.collTime)
collItemSize.collTime = setTimeout(()=>{
nextTick(()=>{
let parentWidth = likeItemDom.value.parentElement.offsetWidth
collItemSize.minCollValue = collItemSize.maxCollValue - Math.round(likeItemDom.value.parentElement.offsetWidth/120)
collItemSize.collValue = collItemSize.collValue<collItemSize.minCollValue?collItemSize.minCollValue:collItemSize.collValue
let value = collItemSize.maxCollValue - collItemSize.collValue
collItemSize.itemStyle.width = (parentWidth - (value * 10)) / value
collItemSize.elementWidth = collItemSize.elementWidth == -1?100:collItemSize.elementWidth
collItemSize.maxCollValue = parentWidth / 2
collItemSize.collValue = Math.floor(parentWidth / collItemSize.elementWidth)
collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.elementWidth))
let value = collItemSize.collValue
collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
@@ -476,6 +488,7 @@ export default defineComponent({
//排序 从大到小
const sortDesignCollection = ()=> {
let arrData:any = []
if(!likeDesignCollectionList.value)return
likeDesignCollectionList.value.forEach((likeItem:any)=>{
let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
likeItem.sort = item.sort + 1
@@ -499,7 +512,7 @@ export default defineComponent({
const reRange = (item:any, x:number, y:number,str:string)=>{
let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
let value = collItemSize.maxCollValue - collItemSize.collValue
let value = collItemSize.collValue
let width,height,num
if(str == 'like'){
num = value
@@ -579,14 +592,14 @@ export default defineComponent({
const moveItem = (str:any)=>{
let elLikeList = posiitonData.value.likeElList
let generateElList = posiitonData.value.generateElList
let value = collItemSize.maxCollValue - collItemSize.collValue
let value = collItemSize.collValue
let width,height
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
// let num = str == 'like'?value:3
for(let i = 0;i < elLikeList.length;i++){
elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
}
for(let i = 0;i < generateElList.length;i++){
@@ -820,18 +833,6 @@ export default defineComponent({
//设计新的collection
designNewCollection() {
if(!this.chooseIsDesign.value){
message.info(this.t('HomeView.jsContent10'));
return
}
let { colorBoards } =
this.store.state.UploadFilesModule.allBoardData;
if (!colorBoards || colorBoards?.length < 1) {
message.info(
this.t('HomeView.jsContent1')
);
return;
}
clearTimeout(this.getDesignTime);
let data = this.getDesignData("");
if(this.driver__.driver){
@@ -840,7 +841,7 @@ export default defineComponent({
})
}
this.isShowMark = true
this.store.commit("setLikeDesignCollectionList", []);
// this.store.commit("setLikeDesignCollectionList", []);
Https.axiosPost(Https.httpUrls.designCollection, data)
.then((rv: any) => {
@@ -856,8 +857,8 @@ export default defineComponent({
this.getDesignResult(value,'newDesign')
this.startDesignType = "design";
this.posiitonData.likeSelectIndex = 0
this.posiitonData.likeElList = []
// this.posiitonData.likeSelectIndex = 0
// this.posiitonData.likeElList = []
}
this.isShowMark = false;
})
@@ -906,7 +907,7 @@ export default defineComponent({
this.showDesignMark = false
if(str == 'newDesign'){
if(rv.designCollectionItems){
this.store.commit("deleteUserGroupId");
// this.store.commit("deleteUserGroupId");
this.store.commit(
"setDesignCollectionId",
rv.collectionId
@@ -941,14 +942,6 @@ export default defineComponent({
},
//重新设计collection
resDesignCollection() {
let { colorBoards } =
this.store.state.UploadFilesModule.allBoardData;
if (!colorBoards || colorBoards?.length < 1) {
message.info(
this.t('HomeView.jsContent2')
);
return;
}
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
@@ -1131,7 +1124,8 @@ export default defineComponent({
likeDesignCollection(design: any, index: any) {
let data = {
designItemId: design.designItemId,
userGroupId: this.userGroupId,
userGroupId: this.store.state.HomeStoreModule.userGroupId,
projectId: this.store.state.Workspace.probjects.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
};
@@ -1178,7 +1172,7 @@ export default defineComponent({
let data = {
designId: design.designId || this.designId,
designPythonOutfitId:design.designOutfitId,
groupDetailId: design.groupDetailId,
groupDetailId: design.groupDetailId || design.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
};
if (this.disLikeLoading) {
@@ -1392,6 +1386,9 @@ export default defineComponent({
if(button == 'design'){
this.designNewCollection()
}
nextTick(()=>{
this.setSystemDesigner(100)
})
},
//销毁图片详情
setDetailDestroy() {
@@ -1504,6 +1501,62 @@ export default defineComponent({
// padding-bottom: 4rem;
box-sizing: border-box;
z-index:1;
.right_content_header {
display: flex;
justify-content: space-between;
height: 4.5rem;
align-items: center;
padding: 0 3.2rem 0 1.9rem;
background: rgba(255, 255, 255, 0.2);
position: relative;
.right_content_export{
display: flex;
align-items: center;
position: relative;
.icon-xiala{
cursor: pointer;
transition: .3s all;
margin-left: 1rem;
}
.icon_rotate{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.export_nav{
display: flex;
flex-direction: column;
position: absolute;
top: 5.5rem;
width: 100%;
background: #fff;
padding: 1rem;
border: 2px solid;
z-index: 2;
label{
margin: 0;
}
}
}
.content_header_left {
display: flex;
justify-content: space-between;
align-items: center;
.icon-dangqianweizhi {
font-size: 1.6rem;
color: #000;
}
.content_header_des {
font-size: 1.6rem;
color: #000000;
margin-left: 1rem;
font-weight: 900;
}
}
}
.designPage_body {
width: 100%;
height: 100%;
@@ -1515,7 +1568,6 @@ export default defineComponent({
.designPage_left {
// width: 44.4rem;
height: 100%;
padding: 2rem 0 0 0;
background: rgba(255, 255, 255, 0.2);
position: relative;
// overflow: hidden;
@@ -1589,7 +1641,7 @@ export default defineComponent({
}
}
.right_top {
padding: 2rem 3.2rem 2rem 1.2rem;
padding: 1rem 3.2rem 2rem 1.2rem;
display: flex;
justify-content: space-between;
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
@@ -1656,62 +1708,7 @@ export default defineComponent({
&.active{
overflow: hidden;
}
.right_content_header {
display: flex;
justify-content: space-between;
height: 4.5rem;
align-items: center;
padding: 0 3.2rem 0 1.9rem;
background: rgba(255, 255, 255, 0.2);
position: relative;
.right_content_export{
display: flex;
align-items: center;
position: relative;
.icon-xiala{
cursor: pointer;
transition: .3s all;
margin-left: 1rem;
}
.icon_rotate{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.export_nav{
display: flex;
flex-direction: column;
position: absolute;
top: 5.5rem;
width: 100%;
background: #fff;
padding: 1rem;
border: 2px solid;
z-index: 2;
label{
margin: 0;
}
}
}
.content_header_left {
display: flex;
justify-content: space-between;
align-items: center;
.icon-dangqianweizhi {
font-size: 1.6rem;
color: #000;
}
.content_header_des {
font-size: 1.6rem;
color: #000000;
margin-left: 1rem;
font-weight: 900;
}
}
}
.right_content_body {
// padding: 0 1.8rem 0 1.2rem;
// height: calc(50% - 4.5rem);

42
src/component/HomePage/index/model/mannequin/edit.vue
View File

@@ -169,9 +169,13 @@
</div>
<div class="input_blok" v-show="brushProportion">
<div class="label">
<div class="text">Stretch</div>
<div class="text">Resize</div>
<!-- 伸缩 -->
<a-slider class="slider" v-model:value="slider" :tooltipVisible="false" @change="sliderChange"/>
<div class="gallery_btn" @click="stretchOK">完成</div>
<!-- <div class="gallery_btn" @click="stretchOK">完成</div> -->
<div>
<i class="fi fi-sr-check-circle" style="display: flex; font-size: 4rem; cursor: pointer;" @click="stretchOK"></i>
</div>
</div>
</div>
</div>
@@ -843,7 +847,7 @@ export default defineComponent({
}else{
cropper.getCropData(async (value:any) => {
// 转换为File对象
if(this.printObject.templateId){
if(this.printObject.templateId || this.printObject.id){
this.printObject.id = this.printObject.relationId
this.confrimSubmit()
}else{
@@ -853,6 +857,7 @@ export default defineComponent({
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.printObject.url = rv.url
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
@@ -879,13 +884,13 @@ export default defineComponent({
"type": this.printObject.designType,
// "waistbandLeft": [],
// "waistbandRight": []
...await this.getPrintLocation()
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.modifyProportion, data).then(
(rv: any) => {
// this.getImgDetail(url)
this.printObject.rv
this.printObject.url = rv
this.option.img = rv
this.setProportion(false)
this.isShowMark = false
}
@@ -920,6 +925,30 @@ export default defineComponent({
cropper.changeScale(num);
},
async confrimSubmit(){
console.log(this.printObject)
let isCovered = true
if(this.editOrUpload == 'edit'){
await new Promise((resolve, reject) => {
Modal.confirm({
title: this.t('LibraryPage.jsContent10'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Save as new',
cancelText: 'Overwrite',
mask:false,
centered:true,
onOk() {
isCovered = false
resolve('')
},
onCancel(){
isCovered = true
resolve('')
}
});
})
}
let modelType = 'Library'
if(this.userDetail.userId == 88 || this.userDetail.userId == 83){
modelType = this.modelType
@@ -930,6 +959,8 @@ export default defineComponent({
modelType:modelType,
modelSex:this.sex,
checkMd5:1,
modelPath:getMinioUrl(this.printObject.url),
isCovered,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...await this.getPrintLocation()
}
@@ -1080,6 +1111,7 @@ export default defineComponent({
async setProportion(boolean:any){
this.brushProportion = boolean
if(boolean){
this.slider = 50
let url
if(this.printObject.url){
url = this.printObject.url

73
src/component/HomePage/index/model/mannequin/index.vue
View File

@@ -5,8 +5,8 @@
<!-- <div class="text">Style：</div>
<div class="text" style="margin: 0 9rem 0 4rem;">{{ selectObject?.styleName }}</div>
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div> -->
<div class="text">Style：</div>
<div class="generalModel_state" style="width: 20rem;">
<div class="text" v-show="systemUser">Style：</div>
<div class="generalModel_state" style="width: 20rem;" v-show="systemUser">
<div class="generalModel_state_item" style="margin: 0; width: 100%;">
<a-select
v-model:value="selectObject.style"
@@ -28,7 +28,7 @@
</div>
<div class="right">
<div class="text" :class="{active:systemUser}">{{ $t('Habit.System') }}</div>
<a-switch class="switch" :disabled="libraryList?.[0]==null?true:false" :checked="!systemUser" @click="setSystemUser" />
<a-switch class="switch" :checked="!systemUser" @click="setSystemUser" />
<div class="text" :class="{active:!systemUser}">{{ $t('Habit.User') }}</div>
</div>
</div>
@@ -37,7 +37,7 @@
<img :src="item.presignedUrl" alt="">
<span v-show="!systemUser" class="icon iconfont icon-tianxie" @click.stop="setEdit(item,!systemUser?'Library':'System','edit')"></span>
<span v-show="!systemUser" class="icon iconfont icon-shanchu" @click.stop="deleteSinglePic(item,index)"></span>
<span class="icon add" v-if="systemUser" :title="'Add to your library'">+</span>
<span class="icon add" v-if="systemUser" :title="'Add to your library'" @click.stop="addSystemToUser(item)">+</span>
</div>
<div class="uploadBox">
<div class="upload" v-if="!systemUser">
@@ -69,6 +69,7 @@ import { useI18n } from 'vue-i18n'
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
import edit from './edit.vue';
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
import { Item } from 'ant-design-vue/lib/menu';
export default defineComponent({
components:{
habitSetStyle,edit
@@ -84,14 +85,14 @@ export default defineComponent({
modelList:[],
systemUser:true,
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
mannequinStyleList:[],
mannequinStyleList:[] as any,
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
})
watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
if(newValue != oldValue){
data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
data.mannequinStyleList.unshift({
name:'No style',
name:'All',
value:'',
id:'',
})
@@ -210,42 +211,30 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
(rv: any) => {
getModel()
// let id = this.store.state.Workspace.workspace.id
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
// if (rv) {
// if(rv.sexEnum.name == 'Female'){
// rv.mannequinUrl = rv.femalePresignedUrl
// rv.mannequinType = rv.mannequinFemaleType
// rv.mannequinId = rv.mannequinFemaleId
// }else if(rv.sexEnum.name == 'Male'){
// rv.mannequinUrl = rv.malePresignedUrl
// rv.mannequinType = rv.mannequinMaleType
// rv.mannequinId = rv.mannequinMaleId
// }
// this.store.commit("setWorkspace", rv);
// }
// })
}
).catch((res)=>{
// if(res.errCode === 2){
// Modal.confirm({
// title: res.errMsg,
// icon: createVNode(ExclamationCircleOutlined),
// okText: 'Yes',
// cancelText: 'No',
// mask:false,
// zIndex:99999,
// centered:true,
// onOk () {
// newData.deleteModelConfirm = 1
// confirmDeletePic('',index,newData)
// },
// onCancel(){
// }
// });
// }
});
}
const addSystemToUser = (item:any)=>{
let newData = {
sysModelId:item.id,
}
Https.axiosGet(Https.httpUrls.addSysModelToLib, {params:newData}).then(
(rv: any) => {
getModel()
let value = {
id:rv.id,
url:rv.url,
type:'Library',
}
setSelectKey(value)
data.systemUser = false
}
).catch((res)=>{
});
}
onMounted(()=>{
getModel()
})
@@ -262,7 +251,8 @@ export default defineComponent({
beforeUpload,
fileUploadChange,
getModel,
deleteSinglePic
deleteSinglePic,
addSystemToUser
}
},
directives:{
@@ -334,6 +324,7 @@ export default defineComponent({
> .item{
width: 25rem;
height: 55rem;
max-height: 100%;
margin: auto 0;
flex-shrink: 0;
cursor: pointer;
@@ -390,8 +381,8 @@ export default defineComponent({
}
}
> .uploadBox{
padding-left: 2rem;
right: .5rem;
padding: 0 2rem;
right: 0;
position: sticky;
flex-shrink: 0;
background: #fff;

37
src/component/HomePage/index/model/patternMaking3D/download.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="threeDownPage" ref="threeDownPage">
<!-- height="65rem" -->
<a-modal class="generalModel"
v-model:visible="threeDown"
:footer="null"
width="77rem"
height="65rem"
height="35rem"
:maskClosable="false"
:mask="false"
:mask="true"
:centered="true"
:closable="false"
:get-container="() => $refs.threeDownPage"
@@ -24,7 +25,7 @@
</div>
<div style="display: flex; flex-direction: column; height: 100%;">
<div class="modal_title_text" style="text-align: center;">
<div>Please select the image size</div>
<div>Please select the size of the clothing</div>
</div>
<div class="content">
<div class="downItem" v-for="item,key in loadList">
@@ -37,7 +38,7 @@
</div>
</div>
<div style="width: 100%; display: flex; margin-top: auto;">
<div class="gallery_btn" @click="setDown" style="width: 13rem; margin-left: auto;">Download</div>
<div class="gallery_btn" :class="{btnActive:!select.sizeType}" @click="setDown" style="width: 13rem; margin-left: auto;">Download</div>
</div>
</div>
@@ -84,6 +85,8 @@ export default defineComponent({
})
const cancelDsign = ()=>{
data.threeDown = false;
data.select.sizeType = ''
data.select.size = ''
}
const getDowList = (id:any)=>{
data.isShowMark = true
@@ -104,11 +107,13 @@ export default defineComponent({
let value = {
...data.select,
}
Https.axiosGet(Https.httpUrls.downloadZip,{params:value,env:{binary:true,binaryType:'application/octet-stream'}}).then((res:any)=>{
console.log(res)
//anchor 标签下载
let config = {
params:value
}
Https.axiosGet(Https.httpUrls.downloadZip,config).then((res:any)=>{
let a = document.createElement('a');
a.href = res.url;
a.href = res;
a.download = 'model.zip'; // 设置下载的文件名
a.click(); // 触发下载
URL.revokeObjectURL(a.href); // 释放 URL 对象
@@ -126,6 +131,7 @@ export default defineComponent({
data.select.sizeType = key
data.select.size = DSizeItem
}
return{
...toRefs(dataDom),
...toRefs(data),
@@ -142,21 +148,36 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
:deep(.ant-modal-mask){
background: rgba(0,0,0,0.3);
}
.threeDownPage{
width: 100%;
height: 100%;
position: relative;
:deep(.generalModel){
.gallery_btn{
&.btnActive{
pointer-events: none;
background: rgba(0, 0, 0, .4);
border: none;
}
}
.content{
display: flex;
flex-direction: column;
flex: 1;
padding-left: 6rem;
// width: 55rem;
// margin: 0 auto;
> .downItem{
display: flex;
font-size: 2rem;
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
align-items:center;
> .title{
margin-right: 1.5rem;
width: 3.5rem;

9
src/component/HomePage/index/model/patternMaking3D/index.vue
View File

@@ -2,7 +2,7 @@
<div class="patternMaking3D">
<div class="selectModel">
<div class="heard">Clothing</div>
<div class="list">
<div class="list" v-if="maskShow">
<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
<img :src="item.url" alt="">
</div>
@@ -28,7 +28,7 @@
<img v-show="isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
</div>
<threeBox v-show="imgOrThree" ref="threeBox"></threeBox>
<threeBox v-if="imgOrThree" ref="threeBox"></threeBox>
</div>
<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>
<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>
@@ -76,6 +76,7 @@ export default defineComponent({
pageSize:10,
imgOrThree:false,
isFront:false,
maskShow:false,
})
const setSelectModel = (item:any)=>{
data.isShowMark = true
@@ -104,6 +105,9 @@ export default defineComponent({
let id = store.state.HomeStoreModule.patternMaking3D
if(id && data.selectModel.id == -1)setSelectModel({id})
})
setTimeout(()=>{
data.maskShow = true
},500)
}
const getModelList = ()=>{
if(data.isShowMark && !data.isNoData)return
@@ -219,6 +223,7 @@ export default defineComponent({
width: calc(100% / 4 - 1rem);
margin: .5rem;
aspect-ratio: 1 / 1.2;
// height: 10rem;
border-radius: 2rem;
border: 2px solid #D4D4D4;
cursor: pointer;

8
src/component/HomePage/index/model/patternMaking3D/three.vue
View File

@@ -125,10 +125,10 @@ export default defineComponent({
floorMesh.rotation.x = -0.5 * Math.PI;
floorMesh.receiveShadow = true;
floorMesh.position.y = -0.001;
data.scene.add(floorMesh);
// data.scene.add(floorMesh);
const textureLoader = new THREE.TextureLoader();
// const texture = textureLoader.load('/3dModel/sketch-thick.jpg');
data.scene.background = new THREE.Color("#eee");
data.scene.background = new THREE.Color("#fff");
// data.scene.background = texture;
let openModel = (event:any)=>{
@@ -213,7 +213,7 @@ export default defineComponent({
//添加图片材质
data.load.state = true
let textureLoader = new THREE.TextureLoader()
textureLoader.load('/3dModel/texture0.webp', // 图片放在public/textures目录下
textureLoader.load('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BD%E8%89%B2%E5%9B%BE%E7%89%87&hs=0&pn=8&spn=0&di=7466852183703552001&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1061489690%2C1376605706&os=2709213815%2C2487532130&simid=3551480199%2C346831275&adpicid=0&lpn=0&ln=0&fm=&sme=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fwx2.sinaimg.cn%2Fmw690%2F941fd00fgy1hrx01tvys1j20zk1bet8s.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fojtk5_z%26e3Bv54AzdH3Fd9bc88db90AzdH3FO5LdNyykj&gsm=&islist=&querylist=', // 图片放在public/textures目录下
(texture:any) => {
// 3. 配置纹理参数
texture.wrapS = THREE.RepeatWrapping;
@@ -226,7 +226,7 @@ export default defineComponent({
const newMaterial = new THREE.MeshStandardMaterial({
map: texture, // 基础颜色贴图
roughness: 0.7, // 表面粗糙度 (0-1)
metalness: 0.2, // 金属质感 (0-1)
metalness: .2, // 金属质感 (0-1)
side: THREE.DoubleSide // 双面渲染
});
console.log(child)

177
src/component/HomePage/index/model/poseTransfer/index.vue
View File

@@ -2,19 +2,21 @@
<div class="poseTransfer">
<div class="configuratioBox" :class="{active:button.left}">
<div class="configuratio">
<div class="title">Give pose for them to select</div>
<!-- <div class="title">Give pose for them to select</div> -->
<div class="content">
<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
<div class="selectImg">
<div class="head">
<div class="text">Current</div>
<div class="text">Choose design to transfer</div>
</div>
<div class="imgBox">
<div class="imgBox" v-mousewheel>
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
<img :src="item.imgUrl || item.url" alt="">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div>
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
<img :src="item.imgUrl || item.url" alt="">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div>
<div class="upload_item item">
<div class="upload_file_item">
@@ -46,45 +48,50 @@
</div>
<div class="poses">
<div class="head">
<div class="text">Target poses</div>
<div class="text">Choose pose</div>
</div>
<div class="imgBox">
<div class="item" v-for="item in currentList">
<img :src="item.imgUrl" alt="">
<div class="imgBox" v-mousewheel>
<div class="item" v-for="item in poseList" @click="selectPose(item)">
<img :src="item.firstFrame"
alt=""
@mouseenter.stop="gifPlay($event,item)"
@mouseleave.stop="gifPause($event,item)"
>
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div>
</div>
</div>
</div>
</div>
<div class="generate">
<div class="gallery_btn" v-show="!isGenerate" @click="getgenerate">
<div class="generate input_border">
<div class="generage_btn started_btn" v-show="!isGenerate" @click="getgenerate">
{{ $t('Generate.Generate') }}
</div>
<div v-show="isGenerate && !remGenerate" class="gallery_btn">
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="remGenerate" @click="removeGenerate" class="gallery_btn">
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
</div>
</div>
<div class="likeBox">
<div class="element">
<div class="title">Selected Product</div>
<div class="title"><i class="fi fi-rs-comments"></i><span>Selected Video</span></div>
<div class="content">
<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
</div>
<div class="btnLeft" @click="setSize('left')">
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
</div>
<div class="btnRight" @click="setSize('right')">
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
<!-- <div class="btnLeft" @click="setSize('left')" :class="{'active':button.left}">
<span class="icon iconfont icon-xiala"></span>
</div> -->
<div class="btnRight" @click="setSize('right')" :class="{'active':button.right}">
<span class="icon iconfont icon-xiala"></span>
</div>
</div>
</div>
<div class="noLikeBox" :class="{active:button.right}">
<div class="element">
<div class="title">Generate Product</div>
<div class="title"><i class="fi fi-rs-comments"></i><span>Generated Video</span></div>
<div class="content">
<generalDrag ref="generalDragRight" v-if="isState" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
</div>
@@ -134,10 +141,13 @@ export default defineComponent({
},
waitList:[],
likeList:computed(()=>store.state.HomeStoreModule.poseTransfer),
noLikeList:[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},],
noLikeList:[],
isGenerate:false,//判断是否正在进行generate
remGenerate:false,
removeGenerate:false,
generateTime:null as any,
poseList:[],
selectPose:null as any,
})
const setIsShowMark:any = inject('setIsShowMark')
const dataDom = reactive({
@@ -145,14 +155,33 @@ export default defineComponent({
generalDragRight:null as any,
scaleVideo:null as any,
})
const selectImgItem = (item:any)=>{
const selectImgItem = (item:any,)=>{
data.selectImg = item
data.selectImg.minioUrl = getMinioUrl(item.url)
data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
item.isChecked = true
if(item.url || item.imgUrl)data.selectImg.minioUrl = getMinioUrl(item.url || item.imgUrl)
}
const openSetData = ()=>{
// dataDom.generalDrag.openSetData()
data.currentList = store.state.UploadFilesModule.modularData.toProduct
setIsShowMark(false)
if(data.poseList.length == 0){
getPoseList()
}
}
const gifPlay = (e:any,item:any)=>{
e.target.src = item.gif//使用gif图片
}
const gifPause = (e:any,item:any)=>{
e.target.src = item.firstFrame//静态图片
}
const getPoseList = ()=>{
Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
rv[0].isChecked = true
data.selectPose = rv[0]?.id || 1
data.poseList = rv
})
}
const setSize = (str:any)=>{
data.button[str] = !data.button[str]
@@ -173,7 +202,7 @@ export default defineComponent({
data.remGenerate = true
},10000)
let value = {
poseId:1,
poseId:data.selectPose,
projectId:store.state.Workspace.probjects.id,
productImage:data.selectImg.minioUrl,
}
@@ -187,11 +216,11 @@ export default defineComponent({
})
}
const setGenerate = (dataList:any)=>{
let list = dataList
let list:any = dataList
let dataNum = dataList.length
let state = true
data.generateTime = setInterval(()=>{
if(!data.isGenerate || data.remGenerate)return
if(!data.isGenerate || !data.remGenerate)return
if(!state)return
state = false
Https.axiosGet(Https.httpUrls.poseTransformResult,{params:{taskId:list}}).then(
@@ -205,11 +234,15 @@ export default defineComponent({
element.url = element.firstFrameUrl
let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
data.noLikeList[index] = element
list = list.filter((item:any) => item !== element.taskId);
console.log(list)
list = ''
// if(list?.filter)list = list?.filter((item:any) => item !== element.taskId);
}else if(element.status == 'Fail'){
}
});
data.waitList = list
if((list.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
if((!list)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
message.info(t('Generate.effectPoor'));
}else{
@@ -224,6 +257,7 @@ export default defineComponent({
}
}
).catch(res=>{
data.noLikeList = data.noLikeList.filter((item:any)=>item.taskId != list)
clearInterval(data.generateTime)
clearInterval(data.remGenerateTime)
data.isGenerate = false
@@ -276,6 +310,8 @@ export default defineComponent({
if(res.errCode == 0){
file.imgUrl = res.data.url;
file.id = res.data.id
data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
file.isChecked = true
file.type = 'ProductElement'
// if(props.productimgMenu.value == 'Relight'){
@@ -308,6 +344,7 @@ export default defineComponent({
if(item.id == id){
if(str == 'zoom'){
showViewVideo({url:item.videoUrl})
}else if(str == 'like'){
likeFile(item,'like',index)
}
@@ -353,8 +390,13 @@ export default defineComponent({
).catch(res=>{
});
}
const selectPose = (item:any)=>{
item.isChecked = true
data.selectPose = item?.id || 1
data.poseList.forEach((listItem:any)=>listItem.isChecked = false)
}
onMounted(()=>{
// showViewVideo({url:'https://www.minio.aida.com.hk:12025/api/v1/download-shared-object/aHR0cHM6Ly93d3cubWluaW8uYWlkYS5jb20uaGs6MTIwMjQvYWlkYS11c2Vycy84OS9wb3NlX3RyYW5zZm9ybV92aWRlby8xMjMtODkubXA0P1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9N0tOVDdNWlNLWkRXM1RVOEJZVlklMkYyMDI1MDQwOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTA0MDhUMDUxOTM1WiZYLUFtei1FeHBpcmVzPTQzMTk5JlgtQW16LVNlY3VyaXR5LVRva2VuPWV5SmhiR2NpT2lKSVV6VXhNaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpoWTJObGMzTkxaWGtpT2lJM1MwNVVOMDFhVTB0YVJGY3pWRlU0UWxsV1dTSXNJbVY0Y0NJNk1UYzBOREV4T0RneE9Td2ljR0Z5Wlc1MElqb2lZV1J0YVc0aWZRLmY0Z3RoTU1BeC1GUnM3eGhWNFdjTUFCUW5lU19BVkIxUDlYbnJQbEFNWUFsVnJwY3RpYXgtU2cyY2FkZHZ0a0VCOU1NbWxGeUlIbU90aGhUWDlqN2lnJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZ2ZXJzaW9uSWQ9bnVsbCZYLUFtei1TaWduYXR1cmU9Yjg5YmQ4ZDg5M2I4ZjBjYmYxZDI3NDFjZmY0NGRiZGNmYWM2NmU0ZGM2OGIwYzQzZDA2OGI4YjYzZjE5YjhhOA'})
})
return{
...toRefs(dataDom),
@@ -363,6 +405,8 @@ export default defineComponent({
selectImgItem,
setSize,
setItemPosition,
gifPlay,
gifPause,
getgenerate,
getUploadUrl,
beforeUpload,
@@ -370,8 +414,24 @@ export default defineComponent({
removeGenerate,
likeSetBtn,
noLikeSetBtn,
selectPose,
}
},
directives:{
mousewheel:{
mounted (el) {
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},{ passive: true })
}
},
},
provide() {
return {
}
@@ -390,22 +450,27 @@ export default defineComponent({
display: flex;
flex-direction: column;
align-items: center;
padding-right: 3.8rem;
&.active{
width: 0;
overflow: hidden;
}
> .generate{
margin-top: auto;
margin-left: auto;
> .started_btn{
font-weight: 300;
}
}
}
> .configuratioBox > .configuratio{
padding-right: 3.8rem;
width: 31.8rem;
padding-bottom: 1rem;
> .title{
// font-size: 2.6rem;
}
> .content{
margin-top: 4rem;
// margin-top: 4rem;
margin-top: 1.8rem;
> .selectImg,> .poses{
display: flex;
flex-direction: column;
@@ -414,24 +479,29 @@ export default defineComponent({
max-height: 45rem;
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
overflow: hidden;
overflow-y: auto;
overflow-x: auto;
> .item{
margin-right: 1rem;
width: calc(100% / 2 - .5rem);
margin-bottom: 1rem;
cursor: pointer;
border-radius: 2rem;
border: 2px solid #8e8e8e;
overflow: hidden;
display: flex;
justify-content: center;
flex-shrink: 0;
height: 25rem;
&.active{
border: 2px solid;
position: relative;
// &.active{
// border: 2px solid;
// }
:deep(.ant-checkbox-wrapper){
position: absolute;
top: 2rem;
right: 2rem;
}
> img{
width: 100%;
@@ -447,29 +517,11 @@ export default defineComponent({
font-weight: 600;
> .text{
display: inline-block;
font-size: 1.6rem;
}
}
}
> .selectImg{
> .head{
> .text{
position: relative;
&::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
width: 100%;
transition: 0.3s all;
}
}
}
}
> .poses{
margin-top: 3rem;
}
@@ -504,8 +556,12 @@ export default defineComponent({
>span{
transition: all .3s;
transform: rotate(90deg);
&.active{
}
&.active{
>span{
transform: rotate(270deg);
}
}
}
@@ -521,6 +577,11 @@ export default defineComponent({
}
> .title{
margin-bottom: 2rem;
font-size: 1.6rem;
font-weight: 900;
> span{
margin-left: 1rem;
}
}
}

175
src/component/HomePage/index/model/toProduct/index.vue
View File

@@ -10,62 +10,8 @@
<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
</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="searchName[productimgMenu.value]"
@keydown.enter="getPrductimg()"
/>
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="()=>isTextarea = !isTextarea"></i>
</div>
<textarea
v-show="isTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="searchName[productimgMenu.value]"
></textarea>
</div>
</div>
<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 == 'ToProductImage'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="similarity"
@afterChange="setSimilarity"
:tooltipVisible="false"
:step="5"
>
</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-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="brightenValue"
:tooltipVisible="false"
:max="3"
:min="1"
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="brightenValue">
</div>
<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
<div class="productImg_content_item_imgBox generalScroll upload_item">
<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[item?.isChecked?'active':'']">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
@@ -117,6 +63,59 @@
</div>
</div>
<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 == 'ToProductImage'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="similarity"
@afterChange="setSimilarity"
:tooltipVisible="false"
:step="5"
>
</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-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="brightenValue"
:tooltipVisible="false"
:max="3"
:min="1"
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="brightenValue">
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<!-- <input
class="search_input"
:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
v-model="searchName[productimgMenu.value]"
@keydown.enter="getPrductimg()"
/> -->
<textarea
class="textarea"
@input="ifMaximumLength"
:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
@keydown.enter.prevent="getPrductimg()"
v-model="searchName[productimgMenu.value]"
></textarea>
</div>
</div>
</div>
<!-- <div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
<div class="productImg_content_item_imgBox generalScroll upload_item">
@@ -142,7 +141,7 @@
<div class="productImg_right_item_box generalScroll">
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('HomeView.SelectedDesign') }}
{{ $t('ProductImg.SelectedDesign') }}
</span>
</div>
<!-- <div class="productImg_right_item" v-for="item,index in generateList" :key="item"> -->
@@ -173,12 +172,10 @@
<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :list="likeList[productimgMenu.value]"></generalDrag>
</div>
<!-- </div> -->
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<div class="btnLeft" @click="setSize('left')">
<!-- <div class="btnLeft" @click="setSize('left')">
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
</div>
</div> -->
<div class="btnRight" @click="setSize('right')">
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
</div>
@@ -188,12 +185,15 @@
<div class="productImg_right_item_box right generalScroll">
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('HomeView.GeneratedDesign') }}
{{ $t('ProductImg.productImageDrafts') }}
</span>
</div>
<div class="content">
<generalDrag ref="generalDragRight" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
</div>
<!-- <div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div> -->
<!-- <div class="productImg_right_item" v-for="item,index in likeList[productimgMenu.value]" :key="item" >
<img :src="item.url" alt="">
<div class="productImg_right_item_iconRight">
@@ -272,7 +272,6 @@ export default defineComponent({
ToProductImage:'',
Relight:'',
},
isTextarea:false,//是否展开
remProductimg:false,//是否出现取消按钮
isProductimg:false,//开始生成
selectProductimgList:[],
@@ -329,7 +328,7 @@ export default defineComponent({
});
let userlikeGroupId = 0
const openSetData = ()=>{
cleardata()
// cleardata()
if(props.productimgMenu.value == 'ToProductImage'){
selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(selectDesignList.value.design.likeData))
}else if(props.productimgMenu.value == 'Relight'){
@@ -340,6 +339,7 @@ export default defineComponent({
}
userlikeGroupId = selectDesignList.value.userlikeGroupId
// getLikeProductImage(selectDesignList.value.userlikeGroupId)
productImgDom.generalDragLeft.setItemPosition()
}
let setproduct = (value:any)=>{
// props.productimgMenu = value
@@ -719,6 +719,18 @@ export default defineComponent({
setItemPosition()
})
}
const ifMaximumLength = (event:any)=>{
let textarea = event.target as HTMLTextAreaElement;
const scrollTop = textarea.scrollTop;
// 2. 计算单行高度
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
// 3. 重置高度为1行
textarea.style.height = lineHeight + 'px';
// 4. 计算实际需要的高度
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
textarea.style.height = newHeight + 'px';
textarea.scrollTop = scrollTop;
}
return {
upload,
driver__,
@@ -749,10 +761,23 @@ export default defineComponent({
generateSetBtn,
setItemPosition,
setSize,
ifMaximumLength,
};
},
directives:{
mousewheel:{
mounted (el) {
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},{ passive: true })
}
},
},
data() {
return {
@@ -812,7 +837,7 @@ methods: {
}
}
.productImg_content_bottom{
height: calc(100% - 4rem - 2.4rem);
height: 100%;
--border-color: #c4c4c4;
display: flex;
justify-content: space-between;
@@ -858,7 +883,8 @@ methods: {
display: flex;
margin-right: 1rem;
position: relative;
height: 14rem;
height: 36rem;
max-height: 100%;
position: relative;
img{
height: 100%;
@@ -866,10 +892,8 @@ methods: {
cursor: pointer;
object-fit: contain;
opacity: .5;
transform: scale(.9);
&.active{
opacity: 1;
transform: scale(1);
}
}
.ant-checkbox-wrapper{
@@ -918,7 +942,7 @@ methods: {
height: 100%;
flex-direction: column;
padding-right: 3.8rem;
width: 31.8rem;
width: 39rem;
&.active{
width: 0;
padding: 0;
@@ -931,14 +955,17 @@ methods: {
width: 9rem;
border: none !important;
&.upload_file_item:last-child{
width: 9rem;
margin-right: 0rem;
}
}
// width: 45%;
.productImg_content_item_imgBox{
flex-shrink: 0;
margin-bottom: 3rem;
.content_item_imgBox_itemImg{
width: auto;
max-width: 9rem;
max-width: 20rem;
flex-shrink: 0;
img{
object-fit: contain;
@@ -946,16 +973,18 @@ methods: {
}
.upload_file_item{
flex-shrink: 0;
width: 9rem;
width: 36rem;
}
}
.productImg_content_item_generate{
--width:100%;
padding-bottom: 1rem;
// margin-top: auto;
}
.productImg_content_item_similarity{
display: flex;
align-items: center;
padding-bottom: 3rem;
.system_silder{
flex: 1;
}
@@ -965,6 +994,7 @@ methods: {
height: 5rem;
text-align: center;
font-size: 1.8rem;
margin-left: 2rem;
}
}
.productImg_content_item_Direction{
@@ -986,7 +1016,6 @@ methods: {
}
}
.productImg_content_item_generate_btn{
margin-top: auto;
width: 100%;
justify-content: space-around;
.input_box{

14
src/component/HomePage/index/workflow/content/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="contentBox">
<div class="contentBox" :class="{active:selectKey_ == 'design'}">
<seriesDesign v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></seriesDesign>
<singleProductDesign v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></singleProductDesign>
<sketchDesign v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></sketchDesign>
@@ -15,6 +15,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import workspace from '../../workflow/workspace.vue'
import seriesDesign from './seriesDesign.vue'
import printDesign from './printDesign.vue'
import singleProductDesign from './singleProductDesign.vue'
@@ -27,7 +28,7 @@ import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
workspace,seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
},
props:{
selectKey_:String,
@@ -89,6 +90,7 @@ export default defineComponent({
})
}
const saveProject = (str:any)=>{
if(str == 'design')return
let value:any = {
projectId:data.selectObject.id,
}
@@ -97,7 +99,7 @@ export default defineComponent({
return
}
store.dispatch('getProjectData',str).then((data)=>{
if(!data[str])return
// if(!data[str])return
value[str] = data[str]
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
@@ -205,10 +207,14 @@ export default defineComponent({
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
&.active{
overflow: initial;
}
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
overflow-x: initial;
> .content,
>.homeContent{
width: 100%;

2
src/component/HomePage/index/workflow/content/printingDesign3D.vue
View File

@@ -80,7 +80,7 @@ export default defineComponent({
objectName:data.selectObject.type,
}
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
if(arr.indexOf(item) != -1){
if(arr.indexOf(item) > -1){
store.dispatch('setAllBoardData',value)
}else{
store.dispatch('setModularData',value)

8
src/component/HomePage/index/workflow/content/seriesDesign.vue
View File

@@ -102,11 +102,11 @@ export default defineComponent({
const getCollection = ()=>{
let value:any = {
"id":data.selectObject.id,
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer']
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin']
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)//设置历史数据
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer']
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer','mannequin']
let canvasData = ['canvas']
for (let index = 0; index < canvasData.length; index++) {
const item = canvasData[index];
@@ -188,9 +188,8 @@ export default defineComponent({
}
);
}
store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
store.commit("setUserGroupId", data.design.userGroupId);
console.log(data.toProduct)
if(data.toProduct){
let value = {
list: data.toProduct,
@@ -268,6 +267,7 @@ export default defineComponent({
}
return newData;
});
console.log(colorList)
return colorList;
}
onMounted(()=>{

2
src/component/HomePage/index/workflow/content/singleProductDesign.vue
View File

@@ -181,7 +181,7 @@ export default defineComponent({
}
);
}
store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
store.commit("setUserGroupId", data.design.userGroupId);
if(data.toProduct){
let value = {

9
src/component/HomePage/index/workflow/content/sketchDesign.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="seriesDesign">
<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
<deReconstruction ref="deReconstruction" class="deReconstruction" :isState="selectKey_ =='deReconstruction'" v-show="selectKey_ == 'deReconstruction'"></deReconstruction>
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
@@ -17,12 +18,13 @@ import { useI18n } from 'vue-i18n'
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
import deReconstruction from '../../model/deReconstruction/index.vue'
import canvasUpload from "@/component/Canvas/index.vue";
import mannequin from '../../model/mannequin/index.vue'
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
workspace,SketchboardUpload,deReconstruction,canvasUpload
workspace,SketchboardUpload,deReconstruction,canvasUpload,mannequin
},
props:{
selectKey_:{
@@ -46,6 +48,7 @@ export default defineComponent({
sketchBoard:null as any,
deReconstruction:null as any,
canvas:null as any,
mannequin:null as any,
})
const open = (str:any)=>{
nextTick(()=>{
@@ -71,11 +74,11 @@ export default defineComponent({
const getCollection = ()=>{
let value:any = {
"id":data.selectObject.id,
"moduleList":["sketchBoard",'deReconstruction']
"moduleList":["sketchBoard",'deReconstruction','mannequin']
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)
let allBoardData = ['sketchBoard','deReconstruction']
let allBoardData = ['sketchBoard','deReconstruction','mannequin']
let canvasData = ['deReconstruction','canvas']
for (let index = 0; index < canvasData.length; index++) {
const item = canvasData[index];

143
src/component/HomePage/index/workflow/index.vue
View File

@@ -1,32 +1,35 @@
<template>
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
<navList @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
<div class="homeContent" ref="parent">
<navListBox
@setSelectKey=setSelectKey
:navListData="navListData"
:selectKey="selectKey"
:workflowType="workflowType"
v-model:isShowMark="isShowMark"
></navListBox>
</div>
<div class="content">
<div class="back">
<div class="title">
{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
</div>
<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
<div class="workflowBox">
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
<navList @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
<div class="homeContent" ref="parent">
<navListBox
@setSelectKey=setSelectKey
:navListData="navListData"
:selectKey="selectKey"
:workflowType="workflowType"
v-model:isShowMark="isShowMark"
></navListBox>
</div>
<div class="content">
<div class="back">
<div class="title">
<i :class="[navListData?.find((item:any) => item.value === selectKey_)?.icon]"></i>
{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
</div>
<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
</div>
<content ref="content" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></content>
</div>
<content ref="content" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></content>
</div>
</div>
</div>
<div v-show="!isUpdataPorject && !selectObject.id" class="workflow">
<workspace :workflowType="workflowType" @setProject="setProject" :httpWorkflowType="httpWorkflowType"></workspace>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
<div v-if="!isUpdataPorject && !selectObject.id" class="workflow">
<workspace :workflowType="workflowType" @setProject="setProject" :httpWorkflowType="httpWorkflowType"></workspace>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</div>
</template>
<script lang="ts">
@@ -177,57 +180,69 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
.workflow{
.workflowBox{
display: flex;
width: 100%;
height: 100%;
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
> .content,
>.homeContent{
width: 100%;
height: 100%;
padding: 4rem;
padding-top: 3rem;
// padding: 3rem;
}
> .content{
position: absolute;
top: 0;
left: 0;
transform: scale(0);
// background: #ff6666;
background: #fff;
display: flex;
flex-direction: column;
> *{
> .workflow{
display: flex;
width: 100%;
height: 100%;
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
> .content,
>.homeContent{
width: 100%;
height: 100%;
padding: 4rem;
padding-top: 3rem;
// padding: 3rem;
}
> .back{
width: auto;
height: auto;
> .content{
position: absolute;
top: 0;
left: 0;
transform: scale(0);
// background: #ff6666;
background: #fff;
display: flex;
padding-bottom: 1rem;
> .title{
font-size: 2rem;
font-weight: 600;
flex-direction: column;
> *{
width: 100%;
height: 100%;
}
> .text{
cursor: pointer;
margin-left: auto;
> i{
font-size: 3rem;
> .back{
width: auto;
height: auto;
display: flex;
padding-bottom: 1rem;
> .title{
font-size: 2.5rem;
font-weight: 600;
display: flex;
align-items: center;
> i{
font-size: 2rem;
display: flex;
margin-right: 1rem;
}
}
> .text{
cursor: pointer;
margin-left: auto;
> i{
font-size: 3rem;
display: flex;
}
}
}
}
}
> .homeContent{
// background: #91ff66;
position: absolute;
> .homeContent{
// background: #91ff66;
position: absolute;
}
}
}
}

15
src/component/HomePage/index/workflow/navBox.vue
View File

@@ -18,7 +18,8 @@
<!-- @click.stop="setSelect(item)" -->
<div class="background"></div>
<div class="text">
<i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
<i :class="[item.icon,]" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
<!-- <i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }} -->
</div>
<!-- <div class="designIcon" v-if="item.value == 'design'"><i class="fi fi-rr-magic-wand"></i></div> -->
</div>
@@ -117,7 +118,7 @@ export default defineComponent({
&.printDesign{width: 8rem;height: 1.3rem;}
&.printingDesign3D{width: 8rem;height: 1.3rem;}
&.productDrawingDesign{width: 38rem;height: 23rem;}
&.sketchDesign{width: 38rem;height: 1.3rem;}
&.sketchDesign{width: 38rem;height: 23rem;}
}
> .navListItem{
width: 22rem;
@@ -131,6 +132,7 @@ export default defineComponent({
transition: all .2s;
overflow: hidden;
cursor: pointer;
padding: 2rem;
&.seriesDesign{
&.item1-1{top: -5rem;left: -22rem;}
&.item1-2{top: 9rem;left: -22rem;}
@@ -165,9 +167,10 @@ export default defineComponent({
&.item3-1{top: 6.5rem;left: 38rem;}
}
&.sketchDesign{
&.item1-1{top: -2.5rem;left: -22rem;}
&.item2-1{top: -2.5rem;left: 8rem;}
&.item3-1{top: -2.5rem;left: 38rem;}
&.item1-1{top: -5rem;left: -22rem;}
&.item1-2{top: 18rem;left: -22rem;}
&.item2-1{top: 6.5rem;left: 8rem;}
&.item3-1{top: 6.5rem;left: 38rem;}
}
.background{
// background: #e8e8e8;
@@ -200,7 +203,7 @@ export default defineComponent({
bottom: 1rem;
right: 1rem;
cursor: pointer;
box-shadow: #000 0px 0px 10px;
box-shadow: #000 0px 0px 2px;
border-radius: 1rem;
> i{
display: flex;

13
src/component/HomePage/index/workflow/workspace.vue
View File

@@ -37,7 +37,7 @@
</div>
<div class="style marginBottom" v-if="show.style">
<div class="text">Style：</div>
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'No style' }}</div>
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
</div>
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
@@ -58,7 +58,7 @@
</div>
</div>
<div class="position marginBottom" v-show="show.position">
<generalMenu :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
<generalMenu :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
</div>
<div class="complete">
<div class="gallery_btn" @click="complete">Complete</div>
@@ -133,8 +133,6 @@ export default defineComponent({
// store.commit('setProbject',data)
}
const setprintModel = (value:any)=>{
console.log(value);
data.selectObject.position = value
}
const formatter = (value: number)=>{
@@ -151,13 +149,14 @@ export default defineComponent({
let value = {
name:data.selectObject.name,
process:props.httpWorkflowType,
styleId:data.show.style?data.selectObject.sylteId:null,
styleId:data.show.style?data.selectObject.styleId:null,
id:data.selectObject.id,
workspace:{
sex:data.selectObject.sex,
// sex:data.show.gender?data.selectObject.sex:null,
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
position:data.show.position?data.selectObject.position.value:'Overall',
ageGroup:data.show.style?data.selectObject.ageGroup:null,
// position:data.selectObject,
} as any,
@@ -172,7 +171,7 @@ export default defineComponent({
model = {
id:rv.workspaceVO.mannequinFemaleId,
type:rv.workspaceVO.mannequinFemaleType,
url:rv.workspaceVO.malePresignedUrl,
url:rv.workspaceVO.femalePresignedUrl,
}
position = store.state.UserHabit.FemalePosition
}else{
@@ -201,7 +200,7 @@ export default defineComponent({
data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
data.show.position = (props.workflowType == 'singleProductDesign')
if(!data.mannequinStyle && props.workflowType == 'seriesDesign'){
if(!data.mannequinStyle && (props.workflowType == 'seriesDesign' || props.workflowType =='sketchDesign')){
data.setIsShowMark(true)
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
(rv) => {

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

@@ -33,26 +33,7 @@
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</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>
@@ -93,6 +74,26 @@
</a-slider>
<input type="number" readonly v-model="productimgBrightenValue">
</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 class="productImg_content_item_generate_btn input_border">
<div class="input_box">
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
@@ -524,6 +525,9 @@ export default defineComponent({
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
&.productImg_content_item_title_menu{
margin-bottom: 6rem;
}
}
.scaleImage_content{
display: flex;
@@ -549,11 +553,11 @@ export default defineComponent({
}
.productImg_content_item_generate_btn{
// transform: translateY(100%);
position: absolute;
bottom: 0;
top: auto;
// position: absolute;
// bottom: 0;
width: 100%;
justify-content: space-around;
margin-top: 0;
}
.productImg_content_item_similarity{
padding-bottom: 2.4rem;
@@ -576,7 +580,7 @@ export default defineComponent({
img{
width: auto;
height: 100%;
max-width: 40rem;
max-width: 50rem;
object-fit: contain;
}
&.active{
@@ -584,7 +588,8 @@ export default defineComponent({
img{
// width: 50%;
height: 100%;
object-fit: cover;
object-fit: contain;
margin: 0 1rem;
}
}
.img_operate_block{

144
src/component/LibraryPage/brandDetail.vue
View File

@@ -1,13 +1,7 @@
<template>
<div class="brandDetail">
<div class="title">
<div @click="back" class="back">&lt; Back</div>
<div>
<div class="gallery_btn" @click="compute">Compute</div>
<div>
<a-progress :percent="100" size="small" :showInfo="false" />
</div>
</div>
<div @click="back" class="back"><i class="fi fi-rr-arrow-small-left" style="font-size: 4rem; display:flex;"></i></div>
</div>
<div class="userDetail">
<div class="logo">
@@ -34,19 +28,25 @@
</div>
<div class="info">
<div class="name">
<span v-if="!isEditUserName">{{ brandName }}</span>
<span v-if="!isEditUserName" style="font-size:3rem;">{{ brandName }}</span>
<input v-else type="text" v-model="brandName">
<i v-if="!isEditUserName" class="fi fi-rr-edit" @click="openEdit('userName')"></i>
<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
</div>
<div class="slogan">
<div>Brand slonan:</div>
<span v-if="!isEditDescribe">{{ brandSlogan }}</span>
<div>Slogan:</div>
<span v-if="!isEditDescribe" style="font-weight: 300;">{{ brandSlogan }}</span>
<input v-else type="text" v-model="brandSlogan">
<i v-if="!isEditDescribe" class="fi fi-rr-edit" @click="openEdit('brandSlogan')"></i>
<i v-else class="fi fi-br-check" @click="editChek('brandSlogan')"></i>
</div>
</div>
<div style="flex:1;text-align: right;" v-show="imgList.length > 0">
<div class="gallery_btn" v-show="schedule.num == 1||(schedule.num == 0 && !schedule.state)" @click="compute">Compute</div>
<div v-show="schedule.num != 1">
<a-progress style="width:20rem;" :percent="schedule.num * 100" size="small" :showInfo="false" />
</div>
</div>
</div>
<div class="content">
<div style="display: flex;">
@@ -61,10 +61,12 @@
>
<div class="gallery_btn">Upload</div>
</a-upload>
<div style="margin-left:2rem;" @click="deleteBatchPic" class="gallery_btn">Delete</div>
</div>
<div class="imgBox">
<div class="imgItem" v-for="item,index in imgList" :key="item.id">
<div class="imgItem" v-for="item,index in imgList" :key="item.id" :class="{active:selectImgList.indexOf(item.id) > -1}" @click="selectImg(item)">
<img :src="item.url" alt="">
<i class="fi fi-rr-trash icon_delete" @click="deleteSinglePic(item,index)"></i>
</div>
</div>
<div class="total">
@@ -86,7 +88,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { defineComponent,computed,ref,provide,onBeforeUnmount,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
@@ -104,9 +106,11 @@ export default defineComponent({
emits:['update:isShowMark','handleBack'],
props: {
isShowMark:{type:Boolean,default:false},
selectCode:{type:String,default:''},
},
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n();
const data = reactive({
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
uploadUrl:'',
@@ -126,6 +130,12 @@ export default defineComponent({
total:0,
pageSize:10,
currentPage:1,
selectImgList:[] as any,//选择删除的图片
getProgressTime:null as any,//获取进度的时间
schedule:{
num:0,
state:false
}
})
const dataDom = reactive({
Cropper:null as any,
@@ -233,6 +243,8 @@ export default defineComponent({
data.brandSlogan = value.brandSlogan;
data.logoUrl = value.minioUrl
data.minioUrl = value.brandLogo
clearInterval(data.getProgressTime)
getProgress()
getLibraryList()
// emit("update:isShowMark",true)
// setTimeout(()=>{
@@ -240,6 +252,7 @@ export default defineComponent({
// },2000)
}
const back = ()=>{
clearInterval(data.getProgressTime)
emit("handleBack")
}
const uploadBrand = ()=>{
@@ -255,12 +268,90 @@ export default defineComponent({
})
}
const compute = ()=>{
Https.axiosPost(Https.httpUrls.productImageInitialize,{brandId:data.detail.id}).then((res:any)=>{
getProgress()
}).catch((err:any)=>{
// console.log(err)
})
}
const getProgress = ()=>{
setTimeout
if(props.selectCode != 'MyBrand'){
clearTimeout(data.getProgressTime)
return
}
Https.axiosPost(Https.httpUrls.getInitializeProgress,{brandId:data.detail.id}).then((res:any)=>{
data.schedule.num = res.percent
data.schedule.state = res.analyzed
if(res.percent == 1 || !res.analyzed){return clearTimeout(data.getProgressTime)}
data.getProgressTime = setTimeout(()=>{
getProgress()
},5000)
// analyzed
}).catch((err:any)=>{
// console.log(err)
})
}
const changePage = (current:number, pageSize:number)=>{
data.currentPage = current
data.pageSize = pageSize
}
const deleteBatchPic = ()=>{
if(!data.selectImgList.length){
return
}
Modal.confirm({
title: t('LibraryPage.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
centered:true,
onOk() {
confirmDeletePic('',0,'')
}
});
}
const deleteSinglePic = (data:any,index:any)=>{
Modal.confirm({
title: t('LibraryPage.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
confirmDeletePic(data,index,'')
}
});
}
const confirmDeletePic = (value:any,index:any,nData:any)=>{
let libraryIds = value ? [value.id] : data.selectImgList
let newData = {
libraryIds:libraryIds,
deleteModelConfirm:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
if(nData)newData = nData
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
(rv: any) => {
getLibraryList()
data.selectImgList = []
}
).catch((res)=>{
});
}
const selectImg = (item:any)=>{
if(data.selectImgList.indexOf(item.id) > -1){
data.selectImgList = data.selectImgList.filter((selectItem:any)=>selectItem != item.id)
}else{
data.selectImgList.push(item.id)
}
}
onBeforeUnmount(()=>{
clearInterval(data.getProgressTime)
})
return{
...toRefs(dataDom),
...toRefs(data),
@@ -274,6 +365,9 @@ export default defineComponent({
editChek,
compute,
changePage,
deleteBatchPic,
deleteSinglePic,
selectImg,
}
},
provide() {
@@ -299,12 +393,16 @@ export default defineComponent({
font-weight: 400;
font-size: 2rem;
cursor: pointer;
margin-left: -2rem;
}
}
> .userDetail{
display: flex;
margin-top: 4rem;
margin-top: 2rem;
align-items: center;
border-bottom: 1px solid #ccc;
padding-bottom: 1rem;
margin-bottom: 1rem;
> .logo{
position: relative;
margin-right: 3rem;
@@ -386,12 +484,32 @@ export default defineComponent({
> .imgItem{
width: 100px;
margin: 1rem;
position: relative;
cursor: pointer;
aspect-ratio: 1 / 2.5;
&.active{
opacity: 0.5;
}
> img{
width: 100%;
height: 100%;
object-fit: contain;
}
> i{
position: absolute;
top: 1rem;
right: 1rem;
cursor: pointer;
display: none;
cursor: pointer;
padding: 0.5rem;
font-size: 2rem;
}
&:hover{
> i{
display: flex;
}
}
}
}
> .total{

29
src/component/LibraryPage/createBrand.vue
View File

@@ -32,7 +32,7 @@
<input type="text" v-model="brandName">
</div>
<div class="item">
<div class="text">Brand Slogen <span style="color: red;">*</span></div>
<div class="text">Brand Slogan <span style="color: red;">*</span></div>
<input type="text" v-model="brandSlogan">
</div>
<div class="item">
@@ -73,12 +73,12 @@
<div class="right">
<div class="item">
<div class="text">Brand Name </div>
<textarea v-model="generateText" :placeholder="'Please enter the name, logo, and slogan you want to generate'"></textarea>
<textarea v-model="generateText" :placeholder="'Please enter your thoughts about this brand, and we will help you generate the name, logo, and slogan.'"></textarea>
</div>
<div class="btn">
<div class="gallery_btn" style="width: 13rem;" v-show="!isGenerateLoad" @click="generate">Generate</div>
<div class="gallery_btn" style="width: 13rem;" v-show="isGenerateLoad">
<i class="fi fi-br-loading"></i>
<span class="fi fi-br-loading"></span>
</div>
</div>
</div>
@@ -352,6 +352,29 @@ export default defineComponent({
width: 100%;
> .gallery_btn{
margin-left: auto;
width: 13rem;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
> span{
display: flex;
text-align: center;
line-height: 6rem;
animation: whirl 1s infinite linear;
@keyframes whirl {
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
}
}
}

3
src/component/WorksPage/publish.vue
View File

@@ -113,7 +113,8 @@ export default defineComponent({
isSecondaryCreation:true,
},
})
let portfolio:any = inject('portfolio')
// let portfolio:any = inject('portfolio')
// let setPortfolio:any = inject('setPortfolio')
let tagList = ref([
// {id:1,tagName:'#AiDAworkshop_2024',title:'The process is simple: use AiDA to post your design work on the "Gallery ", and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! '},

128
src/component/modules/generalDrag.vue
View File

@@ -10,21 +10,28 @@
>
<img v-if="item.url"
:class="[isVideo?'video':'']"
@mouseenter.stop="gifPlay($event,item)"
@mouseleave.stop="gifPause($event,item)"
:src="item.url"
alt=""
>
<a-spin v-else size="large" class="content_img_flex"></a-spin>
<div class="btn like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
<i class="fi fi-rr-heart"></i>
</div>
<div class="btn down" v-if="isVideo" @click.stop="down(item)">
<i class="fi fi-rr-heart"></i>
</div>
<div class="btn zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
<i class="fi fi-bs-expand-arrows-alt"></i>
<div class="btn">
<div class="like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
<i class="fi fi-rr-heart"></i>
</div>
<div class="down" v-if="isVideo && item.url" @click.stop="down(item)">
<i class="fi fi-ss-down-to-line"></i>
</div>
<div class="zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
<i class="fi fi-bs-expand-arrows-alt"></i>
</div>
<div class="delete" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
</div>
</div>
</template>
@@ -53,21 +60,21 @@ export default defineComponent({
generalDragDom:null as any,
})
const collItemSize = reactive({
collValue:15,
minCollValue:2,
maxCollValue:20,
collValue:18,
num:2,
padding:40,
likeStyle:{
width:'100px',
width:'0px',
// width:'240px',
height:'200px',
height:'0px',
// height:'370px',
position:'absolute',
},
itemStyle:{
width:100,
height:154,
width:0,
height:0,
},
scale:[1,1.54],
scale:[1,1.539],
collTime:null as any,
isMove:false,
elList:[] as any,
@@ -138,11 +145,11 @@ export default defineComponent({
// })
}
const reRange = (item:any, x:number, y:number,str:string)=>{
dataDom.generalDragDom
let elList:any = collItemSize.elList
let index = data.selectIndex
let value = collItemSize.maxCollValue - collItemSize.collValue
let width,height,num
num = value
num = collItemSize.num
width = collItemSize.itemStyle.width
height = collItemSize.itemStyle.height
@@ -170,10 +177,10 @@ export default defineComponent({
}
}
const moveItem = ()=>{
let value = collItemSize.maxCollValue - collItemSize.collValue
let value = collItemSize.num
// let num = str == 'like'?value:3
for(let i = 0;i < collItemSize.elList.length;i++){
collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
collItemSize.elList[i].el.style.top = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
}
@@ -181,10 +188,11 @@ export default defineComponent({
const setItemPosition = ()=>{
let parent = dataDom.generalDragDom.offsetWidth
let elArr = dataDom.generalDragDom.children
let value = collItemSize.maxCollValue - collItemSize.collValue
collItemSize.itemStyle.width = (parent - ((value-1)*10)) / value
let value = collItemSize.num
//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
collItemSize.itemStyle.width = (parent - collItemSize.padding - ((value-1)*10)) / value
// collItemSize.itemStyle.width = (parent - (value * 10)) / value
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.539
collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
collItemSize.elList = []
@@ -242,22 +250,31 @@ export default defineComponent({
e.target.src = item.url//静态图片
// e.target.src = ''//静态图片
}
const down = (item:any)=>{
const down = async (item:any)=>{
const videoUrl = item.videoUrl; // 视频文件 URL
const fileName = 'video.mp4'; // 下载时保存的文件名
const link = document.createElement('a');
link.href = videoUrl;
link.download = fileName;
// 触发下载
link.click();
const response = await fetch(videoUrl);
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = 'video.mp4';
document.body.appendChild(a);
a.click();
// 清理
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl);
}, 100);
}
onMounted(()=>{
window.addEventListener('resize', setItemPosition)
// nextTick(()=>{
// setItemPosition()
// })
nextTick(()=>{
let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
collItemSize.likeStyle.width = width + 'px'
collItemSize.likeStyle.height = width * 1.54 + 'px'
})
})
onBeforeUnmount(()=>{
window.removeEventListener('resize', setItemPosition)
@@ -288,38 +305,57 @@ export default defineComponent({
overflow-y: auto;
overflow-x: hidden;
> .item{
border-radius: 2rem;
border: 2px solid;
// border-radius: 2rem;
// border: 2px solid;
position: absolute;
transition: all .3s;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
// background: #fff;
> img{
width: 100%;
height: 100%;
object-fit: contain;
object-fit: cover;
&.video{
object-fit: contain;
}
}
> .btn{
position: absolute;
top: 2rem;
top: 1rem;
cursor: pointer;
right: 2rem;
display: none;
&.like{
left: 2rem;
flex-direction: column;
align-items: center;
background: rgba(255,255,255,.5);
> div{
padding: .8rem;
&:hover{
background: rgba(255,255,255,.7);
}
}
&.zoom{
right: 2rem;
.like{
}
>i{
.zoom{
i{
font-size: 2.5rem;
}
}
.down{
}
.delete{
}
i{
display: flex;
font-size: 3rem;
}
}
&:hover{
> .btn{
display: block;
display: flex;
}
}
}

41
src/component/modules/liquefaction.vue
View File

@@ -5,7 +5,8 @@
v-model:visible="liqufeaction"
:footer="null"
:get-container="() => $refs.liquefactionModal"
width="78%"
width="80%"
height="90%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -16,8 +17,8 @@
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
</svg>
</div>
@@ -30,6 +31,10 @@
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div>
</div>
<div class="liquefaction_parameter">
<div class="liquefaction_parameter_item icon">
<i class="icon iconfont icon-chehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('')"></i>
</div>
<div class="liquefaction_parameter_item">
<div class="liquefaction_parameter_item_title">
<span>{{ $t('exportModel.Size') }}</span>
@@ -48,12 +53,9 @@
<input type="range" v-model="density" @change="routesChange('density')">
</div>
</div>
<div class="liquefaction_parameter_item icon">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
</div>
<div class="liquefaction_parameter_item">
<div class="generage_btn started_btn" @click="cancelDsign">{{ $t('Cropper.Cancel')}}</div>
<!-- <div class="generage_btn started_btn" @click="cancelDsign">{{ $t('Cropper.Cancel')}}</div> -->
<div class="generage_btn started_btn" @click="submit">{{ $t('Cropper.Finish')}}</div>
</div>
</div>
@@ -406,16 +408,29 @@ export default defineComponent({
});
</script>
<style lang="less" scoped>
.liquefactionModal{
:deep(.liquefaction){
.ant-modal-mask{
background: rgba(0,0,0,.2);
}
}
}
.liquefaction {
background: #f9fafb;
.generalModel_btn{
.generalModel_closeIcon{
transform: translate(-100%, 100%);
}
}
.liquefaction_center{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.liquefaction_canvas_box{
background: #fff;
height: 90%;
width: 80%;
width: 55%;
text-align: center;
// overflow-x: auto;
position: relative;
@@ -426,9 +441,11 @@ export default defineComponent({
justify-content: center;
}
.liquefaction_parameter{
padding-top: 5rem;
height: 100%;
flex: 1;
// flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.liquefaction_parameter_item{
display: flex;
flex-direction: column;
@@ -455,7 +472,7 @@ export default defineComponent({
border-radius: .5rem;
font-size: 2rem;
cursor: pointer;
border: 2px solid #000;
// border: 2px solid #000;
margin-right: 1rem;
align-items: center;
justify-content: center;