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

commit

Browse Source
This commit is contained in:
X1627315083
2023-10-11 17:34:14 +08:00
parent 98dc5cd8f7
commit 268ffecff7
35 changed files with 1947 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.test
View File

@@ -1,2 +1,3 @@
NODE_ENV = 'development'
VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'

2
.env.test_build
View File

@@ -1,2 +1,4 @@
NODE_ENV = 'production'
# VUE_APP_BASE_URL = 'https://aida.com.hk/test'
VUE_APP_BASE_URL = 'http://18.167.251.121:10086'

BIN
9.26-16：31dist.7z Normal file
View File

Binary file not shown.

BIN
src/assets/images/loginPage/aida_logo_centent.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

18
src/assets/style/style.css
View File

@@ -75,9 +75,13 @@ li {
.select_block .ant-select:not(.ant-select-customize-input) .ant-select-selector {
background: transparent;
height: 4rem;
border: 0.1rem solid #000 !important;
border: 0.1rem solid rgba(0, 0, 0, 0) !important;
border-radius: 0;
box-shadow: none !important;
width: 15rem;
background: #FFFFFF;
border-radius: 1rem;
margin: 0 1rem;
}
.select_block .ant-select-single .ant-select-selector .ant-select-selection-item,
.select_block .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
@@ -86,6 +90,9 @@ li {
font-size: 1.3rem;
font-weight: bold;
}
.select_block .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
padding: 0 1rem;
}
.started_btn {
padding: 0.5rem 2rem;
display: inline-block;
@@ -114,6 +121,9 @@ li {
.modal_component .ant-modal-content .ant-modal-body {
padding: 0;
}
.ant-modal-body {
font-size: 1.4rem;
}
.operate_file_block {
width: 100%;
height: 3rem;
@@ -187,6 +197,12 @@ li {
border-color: #543087;
background: #543087;
}
.ant-spin-dot-item {
background-color: #543087;
}
.ant-spin {
color: #000;
}
.pin_block {
text-align: center;
margin-top: 0.5rem;

20
src/assets/style/style.less
View File

@@ -83,9 +83,14 @@ ul,li{
.ant-select:not(.ant-select-customize-input) .ant-select-selector{
background: transparent;
height: 4rem;
border: 0.1rem solid #000 !important;
border: 0.1rem solid rgba(0,0,0,0) !important;
// border: 0.1rem solid #000 !important;
border-radius: 0;
box-shadow: none !important;
width: 15rem;
background: #FFFFFF;
border-radius: 1rem;
margin: 0 1rem;
}
.ant-select-single .ant-select-selector .ant-select-selection-item, .ant-select-single .ant-select-selector .ant-select-selection-placeholder{
line-height: 3.8rem;
@@ -93,6 +98,9 @@ ul,li{
font-size: 1.3rem;
font-weight: bold;
}
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
padding: 0 1rem;
}
}
//started公共按钮样式
.started_btn{
@@ -132,6 +140,9 @@ ul,li{
}
}
}
.ant-modal-body{
font-size: 1.4rem;
}
//衣服类型下拉菜单
.operate_file_block{
width: 100%;
@@ -231,6 +242,13 @@ ul,li{
}
}
}
//loding样式
.ant-spin-dot-item{
background-color: #543087;
}
.ant-spin{
color: #000;
}
.pin_block{
text-align: center;
margin-top:.5rem;

345
src/component/Detail/DesignDetail.vue
View File

@@ -29,26 +29,23 @@
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
<div v-show="imgDesignImg" class="detail_modal_body">
<div class="detail_modal_item_back" v-for="item,index in frontBack.back" :style="item.style">
<div class="detail_modal_item_back" :class="{active:body}" v-for="item,index in frontBack.back" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
<!-- <img src="../../../public/123123132.png" alt=""> -->
<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
<div class="detail_modal_item_front" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
<img :src="item.imageUrl" alt="">
</div>
<!-- <div class="detail_modal_item" v-for="item,index in designItemDetail.clothes" :style="'top:'+ item.layersObject[0]?.position[0]+'px;left:'+ item.layersObject[0]?.position[1]+'px;'" :key="item">
<div class="clothes_item_img_block" @click="clothesDetail(item,index)">
<img v-for="v,i in item.layersObject" class="clothes_item_img" :src="v.imageUrl">
</div>
</div> -->
</div>
<!-- <div v-else class="detial_img detial_img1" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
<img :src="item.imageUrl" alt="">
</div> -->
<img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
<div>
<div class="detail_btn">
<!-- 全屏 -->
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<!-- 层 -->
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
</div>
@@ -61,7 +58,7 @@
<div>Current Apparel</div>
<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
</div>
<img :src="designItemDetail?.clothes?.[currentIndex]?.layersObject[1]?.imageUrl" alt="" class="centent" @click="openCurrent(1)">
<img :src="designItemDetail?.clothes?.[currentIndex]?.path" alt="" class="centent" @click="openCurrent(1)">
</div>
<div class="clothes_detail_item clothes_detail_item_print">
<div class="clothes_item_header">
@@ -69,8 +66,8 @@
<div>Current Print</div>
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
</div>
<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.path && designItemDetail?.clothes?.[currentIndex]?.printObject?.path != 'none'" @click="openCurrent(2)">
<img :src="designItemDetail?.clothes?.[currentIndex]?.printObject?.path" alt="">
<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.prints[0]?.path" @click="openCurrent(2)">
<img :src="designItemDetail?.clothes?.[currentIndex]?.printObject?.prints[0]?.path" alt="">
</div>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
</div>
@@ -100,14 +97,14 @@
</div>
<div class="design_detail_perview" v-show="designShowPrview == 2">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
<img class="perview_img" v-lazy="designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
</div>
</div>
<div class="design_detail_perview" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
<setDesignItem ref="setDesignItem" :frontBack="frontBack"></setDesignItem>
<setDesignItem ref="setDesignItem" @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
</div>
</div>
@@ -130,6 +127,8 @@ import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex";
import GO from '@/tool/GO';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
export default defineComponent({
components:{
ElementReplace,
@@ -161,6 +160,11 @@ export default defineComponent({
let current:any = ref({})//点击上衣或者下衣
provide('current',current)
let frontBack:any = ref({})
let body = ref(false)
let designItemId = ref()
let designOutfitId = ref()
let userInfo:any = {}
return{
designItemDetail,
store,
@@ -169,6 +173,10 @@ export default defineComponent({
currentIndex,
current,
frontBack,
body,
designItemId,
designOutfitId,
userInfo
}
},
data(){
@@ -184,8 +192,14 @@ export default defineComponent({
watch:{
designItemDetail:{
handler: function(newval) {
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.current = JSON.parse(JSON.stringify(designItemDetail.clothes[this.currentIndex]))
this.current = JSON.parse(JSON.stringify(designItemDetail?.clothes?.[this.currentIndex]))
if(designItemDetail.others[0].layersObject.length != 0){
this.body = false
}else{
this.body = true
}
this.setImgSize()
}
},
@@ -195,23 +209,42 @@ export default defineComponent({
},
},
mounted(){
let url = Https.httpUrls.getDesignDetail + `?designItemId=33683&designPythonOutfitId=33445`
this.loadingShow = true
Https.axiosGet(url).then(
async (rv: any) => {
this.store.commit('setDesignItemDetail',rv)
this.setImgSize()
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
// this.loadingShow = true
// Https.axiosGet(url).then(
// async (rv: any) => {
// rv.clothes.forEach((item:any)=>{
// let a
// if(item.layersObject[0].imageCategory.indexOf("back") == -1){
// a = item.layersObject[0]
// item.layersObject[0] = item.layersObject[1]
// item.layersObject[1] = a
// }
// if(item.printObject.prints == null){
// item.printObject.prints = [{}]
// }
// })
// this.store.commit('setDesignItemDetail',rv)
// if(rv.others[0].printObject.path == null){
// this.body = false
// }else{
// this.body = true
// }
// this.setImgSize()
// this.generateHighDesignImg = rv.highDesignUrl
// this.designShowPrview = 1
// this.designDetailShow = true
// this.loadingShow = false
// }
// ).catch(rv=>{
// this.loadingShow = false
// })
},
methods:{
openCurrent(num: Number) {
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.init(num)
if(num ==2 ){
@@ -230,20 +263,41 @@ export default defineComponent({
}
},
showDesignDetailModal(data:any){
showDesignDetailModal(data:any,str:string){
this.designItemId = data.design.designItemId
this.designOutfitId = data.design.designOutfitId
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
this.parentData = data
this.loadingShow = true
Https.axiosGet(url).then(
(rv: any) => {
this.store.commit('setDesignItemDetail',rv)
rv.clothes.forEach((item:any)=>{
let a
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
if(item.printObject.prints == null){
item.printObject.prints = [{}]
}
})
this.store.commit('setDesignItemDetail',rv)
if(rv.others[0].layersObject.length != 0){
this.body = false
}else{
this.body = true
}
if(str == 'setDesignItem'){
}else{
this.designShowPrview = 1
}
this.setImgSize()
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
@@ -254,93 +308,147 @@ export default defineComponent({
let front:any = []
let back:any = []
let body:any
designItemDetail.others.forEach((item:any) => {
if(item.type == 'Body'){
body = item
}
});
let ratio:any = await this.setPostition(body.layersObject[0].imageUrl)
designItemDetail.clothes.forEach((v:any,index:number)=>{
let zIndex = 3
for (let i = v.layersObject.length-1; i >= 0; i--) {
v.layersObject[i].style = {
top:v.layersObject[i].position?.[0]*ratio+'px',
left:v.layersObject[i].position?.[1]*ratio+'px',
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
zIndex:zIndex-=1
if(this.body){
designItemDetail.clothes.forEach((v:any,index:number)=>{
let zIndex = 3
for (let i = v.layersObject.length-1; i >= 0; i--) {
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
}else{
back[index] = v.layersObject[i]
}
}
})
}else{
designItemDetail.others.forEach((item:any) => {
if(item.type == 'Body'){
body = item
}
});
let ratio:any = await this.setPostition(body.layersObject[0]?.imageUrl)
let frontIndex = 6
let backIndex = 3
designItemDetail.clothes.forEach((v:any,index:any)=>{
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
}else{
back[index] = v.layersObject[i]
for (let i = v.layersObject.length-1; i >= 0; i--) {
v.layersObject[i].style = {
top:v.layersObject[i].position?.[0]*ratio+'px',
left:v.layersObject[i].position?.[1]*ratio+'px',
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
// zIndex:zIndex-=1
}
v.layersObject[i].centers={
left:0,
top:0,
}
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
front[index].style.zIndex = frontIndex-=1
}else{
back[index] = v.layersObject[i]
back[index].style.zIndex = backIndex-=1
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
}
}
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
}
// v.layersObject.forEach((item:any)=>{
// item.style = {
// top:item.position?.[0]*ratio+'px',
// left:item.position?.[1]*ratio+'px',
// width:item.imageSize?.[0]*ratio+'px',
// height:item.imageSize?.[1]*ratio+'px',
// zIndex:zIndex+=1
// }
// console.log(zIndex);
// if(item.imageCategory == 'blouse_back'){
// back[index] = item
// }else{
// front[index] = item
// }
// })
})
}
this.frontBack = {
front:front,
back:back,
body:body,
}
},
submit(){
setDesignCoverage(str:string){
let {design,index,collectionList} = this.parentData
let newIndex = 0
let newDesign = {}
collectionList.forEach((item:any,index:number) => {
if(item.designItemId === this.designItemId){
newIndex = index
}
});
newDesign = collectionList[newIndex]
newIndex = this.parentData.index
let data = {
design:newDesign,
index:newIndex,
collectionList:collectionList
}
this.designShowPrview = 1
// this.showDesignDetailModal(data,str)
},
setSubmitItem(str:any){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let clothes:any = []
designItemDetail.clothes.forEach((item:any) => {
let clothesItem = {
color: `${item.color.r} ${item.color.g} ${item.color.b}`,
id:item.id,
path:item.path,
path:item.minIOPath,
offset:item.layersObject[1].offset == null?[0,0]:item.layersObject[1].offset,
scale:item.layersObject[1].scale?item.layersObject[1].scale:1,
printObject:{
ifSingle:item.printObject.ifSingle,
path:item.printObject.path?item.printObject.path :'',
prints:item.printObject.prints?item.printObject.prints:[]
ifSingle:item.printObject.ifSingle == null ? false : item.printObject.ifSingle,
// path:item.printObject.path?item.printObject.path :'',
prints:item?.printObject?.prints[0]?.minIOPath?item?.printObject?.prints:[]
},
type:item.type,
}
clothes.push(clothesItem)
});
let data = {
designItemId:designItemDetail.designItemId,
// designItemId:designItemDetail.designItemId,
designSingleItemDTOList:clothes,
isPreview:false,
processId:String(this.userInfo?.userId),
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
if(str == 'preview'){
data.isPreview = true
}else{
data.isPreview = false
}
return data
},
setSubmit(str:any){
let setDesignItem:any = this.$refs.setDesignItem
let data = this.setSubmitItem(str)
setDesignItem.setPreview(data)
},
async submit(){
let data = this.setSubmitItem('')
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv: any) => {
this.loadingShow = false
this.closeModal()
let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
let likeDesignCollectionList = this.store.state.HomeStoreModule.likeDesignCollectionList
designCollectionList.forEach((item:any) => {
if(item.designItemId == rv.designItemId){
item.designOutfitUrl = rv.designItemUrl
}
});
likeDesignCollectionList.forEach((item:any) => {
if(item.designItemId == rv.designItemId){
item.designOutfitUrl = rv.designItemUrl
}
});
this.closeModal()
this.store.commit('setDesignCollectionList',designCollectionList)
this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
}
).catch(res=>{
this.loadingShow = false
@@ -392,7 +500,7 @@ export default defineComponent({
index:newIndex,
collectionList:collectionList
}
this.showDesignDetailModal(data)
this.showDesignDetailModal(data,'')
},
//显示图片详情
@@ -427,27 +535,25 @@ export default defineComponent({
this.currentIndex = index
this.designOrder = true
this.current = designItemDetail.clothes[this.currentIndex]
console.log(this.current);
let data = {
designItemId:designItemDetail.designItemId,
// designItemId:designItemDetail.designItemId,
designSingleItemDTOList:[
{
color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
id:this.current.id,
path:this.current.path?this.current.path:'',
printObject:{
ifSingle:this.current.printObject.ifSingle,
prints:[{
path:this.current.printObject.path?this.current.printObject.path :'',
}],
},
type:this.current.type,
}
],
isPreview:true,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
let data:any = this.setSubmitItem('preview')
data.designSingleItemDTOList[this.currentIndex] = {
color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
id:this.current.id,
path:this.current.minIOPath?this.current.minIOPath:'',
offset:this.current.layersObject[1].offset?this.current.layersObject[1].offset:[0,0],
scale:this.current.layersObject[1].scale?this.current.layersObject[1].scale:1,
printObject:{
ifSingle:this.current?.printObject?.ifSingle == null ? false : this.current?.printObject?.ifSingle,
// prints:this.current?.printObject[0]?.path == null ? [] : [{
// location:[0,0],
// angle:0,
// priority:1,
// path:this.current?.printObject?.path?this.current.printObject.path :'',
// minIOPath:this.current?.printObject?.minIOPath?this.current.printObject.minIOPath :'',
// }],
prints:this.current?.printObject?.prints[0]?.minIOPath?this.current?.printObject?.prints:[]
},
type:this.current.type,
}
this.store.commit('setDesignPreviewData',data)
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
@@ -472,7 +578,6 @@ export default defineComponent({
this.$emit('finishRedesign',this.parentData)
this.closeModal()
this.loadingShow = false
this.closeModal()
}
).catch(res=>{
this.loadingShow = false
@@ -488,7 +593,7 @@ export default defineComponent({
<style lang="less">
.design_detail_modal_component{
color: #000;
max-width: 1440px ;
// max-width: 1440px ;
.ant-modal-content{
@@ -571,8 +676,8 @@ export default defineComponent({
// height: 50%;
.detail_modal_body{
position: relative;
max-width: 245px;
// max-width: 245px;
width: 100%;
.detail_modal_item_front:last-child{
z-index: 1 !important;
}
@@ -589,9 +694,14 @@ export default defineComponent({
img{
width: 100%;
}
&.active{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
.detail_modal_item_back{
z-index: 1 !important;
}
.detail_modal_item_front{
@@ -604,6 +714,12 @@ export default defineComponent({
max-width: 100%;
max-height: 100%;
}
.detail_btn{
z-index: 9999;
}
.detial_img1{
position: absolute;
}
div{
i{
position: absolute;
@@ -638,6 +754,7 @@ export default defineComponent({
.clothes_detail_item{
.centent_div{
display: flex;
cursor: pointer;
justify-content: center;
}
.centent{
@@ -693,6 +810,10 @@ export default defineComponent({
.color_des{
font-size: 1.2rem;
font-weight: 600;
white-space: nowrap;
width: 8rem;
overflow: hidden;
text-overflow: ellipsis;
}
}
&:nth-child(4n){
@@ -774,7 +895,8 @@ export default defineComponent({
.design_detail_perview{
width: 100%;
height: 100%;
flex: 1;
overflow: hidden;
&.design_detail_perview_second{
width: 100%;
height: 100%;
@@ -785,7 +907,6 @@ export default defineComponent({
}
.design_detail_perview_content{
width: 46.2rem;
height: 100%;
background: #fff;
position: relative;
@@ -807,7 +928,7 @@ export default defineComponent({
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-size: 1.4rem;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;

319
src/component/Detail/DesignDetailAlter.vue
View File

@@ -27,80 +27,120 @@
</div>
</div>
<div v-show="openClick == 1" class="detail_Upload_item">
<div class="moodboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div class="moodboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in uploadList"
:key="file"
@click.stop="selectImgItem(file)"
>
<div
class="upload_file_item"
v-for="(file, index) in uploadList"
:key="file"
@click.stop="selectImgItem(file)"
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.url" class="upload_img" />
<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ current.type }}
</div>
<a-spin :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.url" class="upload_img" />
<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ current.type }}
</div>
</div>
<div
class="delete_file_block"
@click.stop="deleteFile(index)"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
<div
class="delete_file_block"
@click.stop="deleteFile(index)"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
<div
class="upload_file_item upload_component"
v-show="uploadList.length != 8"
</div>
<div
class="upload_file_item upload_component"
v-show="uploadList.length != 8"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
v-model:file-list="uploadList"
:before-upload="beforeUpload"
:maxCount="8 - uploadList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => upFileUploadChange(file)"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
v-model:file-list="uploadList"
:before-upload="beforeUpload"
:maxCount="8 - uploadList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => upFileUploadChange(file)"
<div
class="upload_tip_block"
v-show="uploadList.length != 8"
>
<div
class="upload_tip_block"
v-show="uploadList.length != 8"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
</div>
</div>
<div v-show="openClick == 2" class="detail_Library_item">
<div class="material_content_body scroll_style">
<div class="content_img_item" v-for="(file) in clothesList" :key="file.id" :class="{active:selectCode !== 'Moodboard'}">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
<div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ getSketchLabel(file.level2Type) }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
file.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
class="category_list"
v-show="file.categoryShow"
>
<div
:class="[
'category_item',
file.level2Type == cate.value
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in disignTypeList"
:key="index"
@click.stop="selectFileCategory(file, cate)"
>
{{ cate.label }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -270,6 +310,8 @@ export default defineComponent({
}) //顔色选择器默认颜色
let selectColorList = ref({
})
let workspace = ref({})
return{
store,
current,
@@ -287,54 +329,10 @@ export default defineComponent({
select,
selectColor,
selectColorList,
workspace,
}
},
watch:{
selectColor(newVal,oldVal){
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
clearInterval(this.getPantongNameTime)
this.getPantongNameTime = setTimeout(() => {
this.getPantongName(newVal.rgba)
}, 100);
}
},
computed:{
getSketchLabel(value) {
return (value) => {
let lable = "";
for (let item of this.disignTypeList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
getSelectRGB(selectColor){
return (selectColor)=>{
let rgba = selectColor.rgba
let data = {
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
hex:selectColor.hex == undefined ? '#FFFFFF': selectColor.hex
}
if(data.a != 1 || data.a != 0){
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
}
return data
}
},
},
data(){
return{
@@ -372,13 +370,66 @@ export default defineComponent({
},
spin: true,
}),
getPantongNameTime:true
getPantongNameTime:true,
workspaceCom:{}
}
},
computed:{
getSketchLabel(value) {
return (value) => {
let lable = "";
for (let item of this.disignTypeList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
getSelectRGB(selectColor){
return (selectColor)=>{
let rgba = selectColor.rgba
let data = {
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
hex:selectColor.hex == undefined ? '#FFFFFF': selectColor.hex
}
if(data.a != 1 || data.a != 0){
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
}
return data
}
},
},
mounted(){
},
watch:{
selectColor(newVal,oldVal){
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
clearInterval(this.getPantongNameTime)
this.getPantongNameTime = setTimeout(() => {
this.getPantongName(newVal.rgba)
}, 100);
},
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.getPosition()
},
},
mounted () {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
let dropperDom = document.getElementsByClassName("detail_modal_body_select")[0].getElementsByClassName('vc-sketch-color-wrap')[0]
dropperDom.addEventListener('click',async ()=>{
try {
@@ -433,8 +484,31 @@ export default defineComponent({
}
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.init(num)
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
},
getPosition(){
let params
if(this.workspace.sex == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
}
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv) => {
if (rv) {
let arr = []
rv.forEach((item) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.disignTypeList = arr
}
})
},
deleteFile(num){
this.uploadList.splice(num, 1)
},
@@ -506,11 +580,12 @@ export default defineComponent({
file.categoryShow = true;
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file, cate,list) {
file.category = cate.value;
for (let item of list) {
selectFileCategory(file, cate) {
file.level2Type = cate.value;
for (let item of this.clothesList) {
item.categoryShow = false;
}
this.setSketchLibrary(file)
},
hiddenFileCategory() {
for (let item of this.clothesList) {
@@ -518,6 +593,17 @@ export default defineComponent({
}
document.removeEventListener("click", this.hiddenFileCategory);
},
setSketchLibrary(item){
let data = {
libraryId:item.id,
level2Type:item.level2Type,
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv) => {
}
).catch((res)=>{
});
},
selectImgItem(imgData){
if(this.selectCode == 'Sketchboard'){
// this.current.id_ = imgData.id
@@ -526,10 +612,16 @@ export default defineComponent({
DesignDetailEnd.setSketchImg(imgData)
// DesignDetailEnd.sketchImg.id_ = imgData.id
// DesignDetailEnd.sketchImg.path = imgData.url
}else{
this.current.printObject.path = imgData.url
this.current.printObject.id = imgData.id
this.current.printObject.path = imgData?.url
this.current.printObject.id = imgData?.id
this.current.printObject.minIOPath = imgData.minIOPath
this.current.printObject.prints = [{
minIOPath:imgData.minIOPath,
path:imgData?.url
}]
// console.log(this.current.printObject,imgData);
}
@@ -538,7 +630,6 @@ export default defineComponent({
},
//请求我的印花&&模型
getLibraryList(){
let data = {
level1Type:this.selectCode,
// level2Type:this.designType,
@@ -547,6 +638,7 @@ export default defineComponent({
size:10,
}
this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv) => {
this.clothesList = rv.content
@@ -561,6 +653,7 @@ export default defineComponent({
open(num) {
this.openClick = num;
if(num ==2 ){
this.getLibraryList()
}
},
@@ -904,7 +997,7 @@ export default defineComponent({
// margin-bottom: 2.8rem;
margin-bottom: 2rem;
padding: 0;
height: 9rem;
// height: 9rem;
&.active{
margin-bottom: 2rem;
.pin_block{

77
src/component/Detail/DesignDetailEnd.vue
View File

@@ -13,10 +13,10 @@
</div>
<div class="print_left">
<!-- <img :src="current.path" :title="current.type"> -->
<img :src="current?.printObject?.path" v-if="current?.printObject?.path && current?.printObject?.path != 'none'">
<img :src="current?.printObject?.prints?.[0]?.path" v-if="current?.printObject?.prints?.[0]?.path">
<div src="@/assets/images/homePage/null_img.png" v-else ></div>
<div
v-show="current?.printObject?.path && current?.printObject?.path != 'none'"
v-show="current?.printObject?.prints?.[0]?.path"
class="delete_file_block"
@click="deleteFile"
>
@@ -35,7 +35,7 @@
class="habit_Overal_Single_text"
:class="{ active: !overallSingle }"
>
Overal
Overall
</div>
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
<div
@@ -57,8 +57,8 @@
</div>
</div>
<div class="result_apparel_print_img">
<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.id_?sketchImg?.path:current?.layersObject?.[1]?.imageUrl" :title="current?.type">
<img v-show="type_==2" class="result_print_img" :src="current?.layersObject?.[1]?.imageUrl" :title="current?.type" @click="setPrint">
<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.id_?sketchImg?.path:current?.path" :title="current?.type">
<img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint">
</div>
</div>
@@ -82,7 +82,8 @@
</div>
</div>
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
<div v-show="type_ == 2" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
<div v-else-if="type_ == 2 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
@@ -111,7 +112,7 @@ export default defineComponent({
let sketchImg = ref({})
//印花
let overallSingle = ref(false)
let systemDesignerPercentage = ref(0)
let systemDesignerPercentage = ref(30)
//颜色
let colorList = ref([{},{},{},{},{},{},{},{}])
@@ -144,14 +145,14 @@ export default defineComponent({
// this.current = JSON.parse(JSON.stringify(this.currentItem))
this.type_ = num
this.colorList[this.selectIndex] = this.$parent.selectColor
this.overallSingle = this.current.printObject.ifSingle
this.systemDesignerPercentage = this.current.printObject.scale*100
this.overallSingle = this.current?.printObject?.ifSingle == null?false:this.current?.printObject?.ifSingle
this.systemDesignerPercentage = this.current?.printObject?.scale?this.current?.printObject?.scale:.3*100
},
//模型
setSketchImg(v){
this.sketchImg.id_ = v.id
this.sketchImg.path = v.url
console.log(this.sketchImg);
this.sketchImg.minIOPath = v.minIOPath
},
//印花
systemDesigner(num) {
@@ -164,7 +165,7 @@ export default defineComponent({
return `${value*3}%`;
},
setPrint(){
if(this.current.printObject.path && this.current?.printObject?.path != 'none'){
if(this.current.printObject.prints[0].path){
let DesignPrintOperation = this.$refs.DesignPrintOperation
DesignPrintOperation.init()
}else{
@@ -177,11 +178,8 @@ export default defineComponent({
},
//颜色
selectColorItem(index,color){
let hex
let parent = this.$parent
this.selectIndex = index
@@ -213,44 +211,61 @@ export default defineComponent({
setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
let data = this.store.state.DesignDetailModule.designPreviewData
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
if(this.type_ == 1){
data.designSingleItemDTOList[0].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id_
data.designSingleItemDTOList[0].path =this.sketchImg.path? this.sketchImg.path: this.current.path
data.designSingleItemDTOList[index].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id_
data.designSingleItemDTOList[index].path =this.sketchImg.minIOPath? this.sketchImg.minIOPath: this.current.minIOPath
// data.designSingleItemDTOList[index].printObject.prints = []
// this.current?.printObject?.path == null ? [] : [{
// location:[0,0],
// angle:0,
// priority:1,
// path:this.current?.printObject?.path?this.current.printObject.path :'',
// minIOPath:this.current?.printObject?.minIOPath?this.current.printObject.minIOPath :'',
// }],
// data.designSingleItemDTOList[index].printObject.ifSingle = false
}else if(this.type_ == 2){
this.setPrint()
return
data.designSingleItemDTOList[index].printObject.ifSingle = false
data.designSingleItemDTOList[index].printObject.prints = []
}else if(this.type_ == 3){
let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
data.designSingleItemDTOList[0].color = color
data.designSingleItemDTOList[index].color = color
}
// let priority = designItemDetail.clothes.map((v)=>{
// return v.type
// })
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.loadingShow = true
console.log(data,'data');
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
console.log(rv,'rv');
this.store.commit("setDesignPreviewData", data);
designItemDetail.clothes[index].color = rv.clothes[0].color
designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
designItemDetail.clothes[index].layersObject = rv.clothes[0].layersObject
designItemDetail.currentFullBodyView = rv.currentFullBodyView
designItemDetail.clothes[index].color = rv.clothes[index].color
designItemDetail.clothes[index].printObject = rv.clothes[index].printObject
designItemDetail.clothes[index].layersObject = rv.clothes[index].layersObject
designItemDetail.clothes[index].minIOPath = rv.clothes[index].minIOPath
designItemDetail.clothes[index].path = rv.clothes[index].path
// rv.clothes[0].layersObject.forEach((v)=>{
// designItemDetail.clothes[index].layersObject[0].imageUrl = rv.clothes[0].layersObject[0].imageUrl
// designItemDetail.clothes[index].layersObject[0].maskUrl = rv.clothes[0].layersObject[0].maskUrl
// designItemDetail.clothes[index].layersObject[1].imageUrl = rv.clothes[0].layersObject[1].imageUrl
// designItemDetail.clothes[index].layersObject[1].maskUrl = rv.clothes[0].layersObject[1].maskUrl
// })
designItemDetail.clothes.forEach((item,index)=>{
let a
// console.log(this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[0].id);
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[0].id
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[1].id
})
this.loadingShow = false
this.store.commit("setDesignItemDetail", designItemDetail);
console.log(designItemDetail,rv);
this.store.commit("setDesignPreviewData", data);
}
).catch(res=>{
this.loadingShow = false
@@ -297,6 +312,8 @@ export default defineComponent({
height: auto;
max-height: 35rem;
margin-top: 2rem;
width: 100%;
object-fit: contain;
}
.result_print_img{
transform: scale(.85);

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

@@ -25,7 +25,7 @@
class="habit_Overal_Single_text"
:class="{ active: !overallSingle }"
>
Overal
Overall
</div>
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
<div
@@ -49,7 +49,7 @@
<i class="fi fi-rr-trash" @click="deletePrint"></i>
</div>
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index].designOpenrtionBtn}">
<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_overall" v-show="!overallSingle">
@@ -60,23 +60,24 @@
</div>
</div>
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="designOpenrtion_imgMask" :style="sketch">
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
<div class="designOpenrtion_imgMask">
<div class="designOpenrtion_print" v-show="overallSingle">
<div
v-for="item,index in designOpenrtionList"
:key="item"
:style="[printStyleList[index].style]"
:style="[printStyleList?.[index]?.style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" :style="{transform:`rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
</div>
</div>
<!-- <img v-if="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch"> -->
<img :src="current?.layersObject?.[1]?.imageUrl" alt="" class="designOpenrtion_sketch">
<img :src="current?.path" alt="" class="designOpenrtion_sketch">
<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch_mask">
<div class="designOpenrtion_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
@@ -84,7 +85,7 @@
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
</ul>
<div v-show="!overallSingle"></div>
<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @mousedown.stop="itemMoveMousedown(index,$event)">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
</ul>
@@ -194,7 +195,6 @@ export default defineComponent({
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
document.addEventListener('mousemove', (e) => {
if (mouse) {
let X = eX
@@ -208,41 +208,11 @@ export default defineComponent({
});
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
value.instance.printStyleList[0].transform.rotateZ = angle
// console.log(value.instance.printStyleList);
mouse = false;
});
});
//缩放
// let timeSwitch = true
// el.parentNode.addEventListener('mousemove', (e) => {
// el.parentNode.addEventListener('mousewheel',(e) => {
// if(timeSwitch){
// timeSwitch = false
// if(e.deltaY > 0){
// if(num <= 1){
// num -= 0.05
// }else{
// num -= 0.1
// }
// }else{
// //放大
// if(num <= 1){
// num += 0.05
// }else{
// num += 0.1
// }
// }
// if(num >= 3){
// num = 3
// }else if (num < .2){
// num = .2
// }
// setTimeout(() => {
// timeSwitch = true
// }, 100);
// elParent.firstElementChild.style.transform = "scale("+ num + ") rotateZ("+ angle + "deg)"
// }
// });
// });
}
},
@@ -252,35 +222,45 @@ export default defineComponent({
let DesignPrintOperationParent = this.$parent
this.designOpenrtion = true
this.clearModal()
this.designOpenrtionList.push(this.current.printObject)
this.designOpenrtionList = []
this.designOpenrtionList.push(...this.current.printObject.prints)
this.overallSingle = DesignPrintOperationParent.overallSingle
this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
// let skecth = new Image
// if(!this.overallSingle){
// skecth.src = this.current.layersObject[1].imageUrl
// }else{
// skecth.src = this.current.layersObject[1].maskUrl
// }
// skecth.onload=()=>{
// this.sketch.width = skecth.width/10+'rem'
// this.sketch.height = skecth.height/10+'rem'
// }
this.sketch = {
width:this.current.layersObject[1].imageSize[0]/10+'rem',
height:this.current.layersObject[1].imageSize[1]/10+'rem'
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
}
// this.sketch = {
// width:this.current.layersObject[1].imageSize[0]/10+'rem',
// height:this.current.layersObject[1].imageSize[1]/10+'rem'
// }
let print = new Image
print.src = this.current.printObject.path
print.src = this.current.printObject.prints[0].path
print.onload=()=>{
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
this.print.width = print.width+'px'
this.print.height = print.height+'px'
this.printStyleList[0].style.width = print.width+'px'
this.printStyleList[0].style.height = print.height+'px'
this.printStyleList[0].designOpenrtionBtn = false
if(this.overallSingle){
nextTick().then(()=>{
if(this.designOpenrtionList[0].scale){
this.designOpenrtionList.forEach((item,index)=>{
this.setTemplate(item,index)
this.printAmount = this.printStyleList.length
})
}else{
this.refetchTemplate(0)
}
})
}
}
if(this.overallSingle){
this.refetchTemplate(0)
}
},
systemDesigner(num) {
let DesignPrintOperationParent = this.$parent
@@ -296,18 +276,10 @@ export default defineComponent({
if (!this.overallSingle) {
this.printAmount = 1
this.setprintAmount()
}else{
this.random()
}
let skecth = new Image
// if(!this.overallSingle){
// skecth.src = this.current.layersObject[1].imageUrl
// }else{
// skecth.src = this.current.layersObject[1].maskUrl
// }
skecth.src = this.current.layersObject[1].imageUrl
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
}
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
@@ -371,7 +343,8 @@ export default defineComponent({
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
@@ -464,7 +437,7 @@ export default defineComponent({
for (let index = 0; index < num; index++) {
this.printStyleList.push(this.printStyleList[this.printStyleList.length-1])
this.refetchTemplate(this.printStyleList.length-1)
this.designOpenrtionList.push(this.current.printObject)
this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
}
}else{
let num = this.printStyleList.length - this.printAmount
@@ -486,23 +459,22 @@ export default defineComponent({
this.printAmount = this.designOpenrtionList.length
},
random(){
this.printStyleList.forEach((v,index)=>{
this.designOpenrtionList.forEach((v,index)=>{
this.refetchTemplate(index)
})
},
//随机重置图片顺序
refetchTemplate(index) {
// let scale = (Math.trunc(Math.random()*15)+1)*.1
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
let sketch = document.getElementsByClassName('designOpenrtion_sketch')[0]
let width = Math.trunc(Math.random()*(sketch.width-sketch.width/3))+1+sketch.width/3
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/3))+1+sketch?.width/3
let scale = width / this.print.width.replace(/px/g,'')
// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
let x = sketch.width-20
let y = sketch.height-20
let x = sketch?.width-20
let y = sketch?.height-20
this.printStyleList[index]={
centers:{
left:0,
@@ -523,6 +495,35 @@ export default defineComponent({
},
designOpenrtionBtn:false
}
},
//设置图片
setTemplate(item,index) {
this.designOpenrtionList
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let scale
scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
let zIndex = 1
this.printStyleList[index]={
centers:{
left:0,
top:0,
},
style:{
left:item.location[0]/sketchNum+'px',
top:item.location[1]/sketchNum+'px',
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
zIndex:zIndex++
},
transform:{
// scale:scale<.2?.2:scale,//0.2-3
rotateZ:item.angle,
},
designOpenrtionBtn:false
}
},
computeZindex(){
let arr = JSON.parse(JSON.stringify(this.printStyleList))
@@ -549,15 +550,16 @@ export default defineComponent({
scale = this.systemDesignerPercentage*3/100
location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
}else{
console.log(arr[index].style.width.replace(/px/g,''),this.print.width.replace(/px/g,''));
scale = (arr[index].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,''))
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}
let obj = {
angle : arr[index].transform.rotateZ,
angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale:scale,
scale: !this.overallSingle? 1:scale,
path:this.designOpenrtionList[index].path,
minIOPath:this.designOpenrtionList[index].minIOPath,
}
prints.push(obj)
})
@@ -581,9 +583,8 @@ export default defineComponent({
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
let data = this.store.state.DesignDetailModule.designPreviewData
data.designSingleItemDTOList[0].printObject={
data.designSingleItemDTOList[index].printObject={
ifSingle:this.overallSingle,
path:this.designOpenrtionList[0].path,
prints:this.computeZindex(),
}
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
@@ -591,13 +592,22 @@ export default defineComponent({
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// this.parentData.design.designItemUrl = rv.designItemUrl
// this.$emit('finishRedesign',this.parentData)
// this.closeModal()
designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
designItemDetail.clothes[index].layersObject = rv.clothes[0].layersObject
// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
designItemDetail.currentFullBodyView = rv.currentFullBodyView
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
designItemDetail.clothes[index].layersObject = rv.clothes[index].layersObject
designItemDetail.clothes[index].printObject.prints = this.computeZindex()
console.log(rv);
designItemDetail.clothes.forEach((item,i)=>{
let a
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0].id
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1].id
})
this.store.commit("setDesignItemDetail", designItemDetail);
this.loadingShow = false
this.designOpenrtion = false
@@ -829,9 +839,13 @@ export default defineComponent({
>img{
z-index: 2;
position: relative;
max-width: 100%;
max-height: 100%;
width: 100%;
// max-width: 100%;
// max-height: 100%;
// width: 100%;
// height: 50rem;
max-height: 50rem;
min-height: 30rem;
width: auto;
}
.designOpenrtion_sketch_mask{
z-index: 3;

84
src/component/Detail/habit.vue
View File

@@ -56,7 +56,7 @@
class="habit_Overal_Single_text"
:class="{ active: !workspaceItem.overallSingle }"
>
Overal
Overall
</div>
<a-switch @click="setOverallSingle" v-model:checked="workspaceItem.overallSingle" />
<div
@@ -133,15 +133,15 @@
</div>
<div class="model_img" v-show="systemSeleves">
<div v-mousewheel>
<div v-for="(item,index) in mannequins[0].modelList" :key="item.id">
<img :src="item.presignedUrl" alt="" @click="setMannequins(item,'Library')">
<div v-for="(item,index) in mannequins?.[0]?.modelList" :key="item.id">
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'Library')">
</div>
</div>
</div>
<div class="model_img" v-show="!systemSeleves">
<div v-mousewheel>
<div v-for="(item,index) in mannequins[1].modelList" :key="item.id">
<img :src="item.presignedUrl" alt="" @click="setMannequins(item,'System')">
<div v-for="(item,index) in mannequins?.[1]?.modelList" :key="item.id">
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')">
</div>
</div>
@@ -166,7 +166,7 @@ export default defineComponent({
UserOutlined,
},
setup(){
let workspaceItem = ref({
let workspaceItem:any = ref({
id:1,
id_:1,
workSpaceName:"工作台1",
@@ -193,7 +193,7 @@ export default defineComponent({
});
let workspaceItemName = ref('')//设置单独name公共使用
let singleTypeList = ref([
let singleTypeList:any = ref([
])
let sex = ref([
@@ -216,6 +216,9 @@ export default defineComponent({
handler(newVal:any,oldVal:any){
// this.store.state.Workspace.workspace
if(!newVal){
if(!this.workspaceItem.overallSingle){
this.workspaceItem.position = 'Overall'
}
let data = this.workspaceItem
this.putWorkspace(data)
this.store.commit("setWorkspace", this.workspaceItem);
@@ -243,7 +246,7 @@ export default defineComponent({
},
workspaceItem:{
handler(newVal:any,oldVal:any){
// this.store.state.Workspace.workspace
this.store.commit("setWorkspace", this.workspaceItem);
}
}
},
@@ -252,10 +255,10 @@ export default defineComponent({
store: useStore(),
};
},
mounted() {
async mounted() {
this.getworkspace()
this.getSexPosition()
this.store.commit("setWorkspace", this.workspaceItem);
this.getSex()
this.getPosition()
},
directives:{
fade:{
@@ -293,12 +296,12 @@ export default defineComponent({
})
el.addEventListener('mousewheel',(e:MouseEvent)=>{
if(0>(e as WheelEvent).deltaY){
if(0>(e as WheelEvent).deltaY && width>parentWidth){
num+=15
if(num >= 0){
num = 0
}
}else{
}else if(0<(e as WheelEvent).deltaY && width>parentWidth){
num-=15
if(num<=parentWidth - width){
num = parentWidth - width
@@ -312,7 +315,7 @@ export default defineComponent({
}
},
methods: {
getSexPosition(){
getSex(){
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
if (rv) {
let arr:any = []
@@ -326,7 +329,16 @@ export default defineComponent({
this.sex = arr
}
})
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Position'}}).then((rv: any) => {
},
getPosition(){
let params
if(this.workspaceItem.sex == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
}
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
@@ -337,6 +349,7 @@ export default defineComponent({
arr.push(obj)
});
this.singleTypeList = arr
this.workspaceItem.position = this.singleTypeList[0].label
}
})
},
@@ -362,28 +375,30 @@ export default defineComponent({
v.putName = false
if(v.id == rv.id){
this.workspaceItem = v
this.setMannequinsSex()
}
});
this.workspace.id = rv.id
this.workspace.workspaceList = rv.page.content
}
})
},
getDetail(id:any){
getDetail(id:any){//
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
if (rv) {
}
})
},
getMannequins(){
Https.axiosGet(Https.httpUrls.getMannequins).then((rv: any) => {
getMannequins(){//获取模特
Https.axiosGet(Https.httpUrls.getMannequins,{params:{sex:this.workspaceItem.sex}}).then((rv: any) => {
if (rv) {
this.mannequins = rv
}
})
},
putWorkspace(data:any){
putWorkspace(data:any){//修改workspace
Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
if (rv) {
this.getworkspace()
@@ -399,8 +414,9 @@ export default defineComponent({
},
//
setOverallSingle(){
if(!this.workspaceItem.overallSingle){
this.workspaceItem.position = "Overall"
if(this.workspaceItem.overallSingle){
this.workspaceItem.position = this.singleTypeList[0].label
}else{
}
},
//修改名字
@@ -470,6 +486,9 @@ export default defineComponent({
setSex(v:any){
this.openType.sex = false
this.workspaceItem.sex = v
this.getMannequins()
this.setMannequinsSex()
this.getPosition()
},
//设置single & overall
setSingle(v:string){
@@ -477,10 +496,23 @@ export default defineComponent({
this.workspaceItem.position = v
},
setMannequins(item:any,str:string){//设置模特
this.workspaceItem.mannequinId = item.id
// this.workspaceItem.mannequinId = item.id
// this.workspaceItem.mannequinType = str
// this.workspaceItem.mannequinUrl = item.presignedUrl
this.workspaceItem.mannequinUrl = item.presignedUrl
this.workspaceItem.mannequinType = str
this.workspaceItem.mannequinUrl = item.url
this.workspaceItem.mannequinId = item.id
},
setMannequinsSex(){
if(this.workspaceItem.sex == 'Female'){
this.workspaceItem.mannequinUrl = this.workspaceItem.femalePresignedUrl
this.workspaceItem.mannequinType = this.workspaceItem.mannequinFemaleType
this.workspaceItem.mannequinId = this.workspaceItem.mannequinFemaleId
}else if(this.workspaceItem.sex == 'Male'){
this.workspaceItem.mannequinUrl = this.workspaceItem.malePresignedUrl
this.workspaceItem.mannequinType = this.workspaceItem.mannequinMaleType
this.workspaceItem.mannequinId = this.workspaceItem.mannequinMaleId
}
},
setOpenType(v:string){
if(v == 'habit'){
@@ -764,6 +796,8 @@ export default defineComponent({
.model_Designer{
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
.model_text{
display: flex;
:deep(.ant-switch) {
@@ -784,6 +818,8 @@ export default defineComponent({
}
.model_img{
display: flex;
flex: 1;
align-items: center;
>div{
display: flex;

431
src/component/Detail/setDesignItem.vue
View File

@@ -1,22 +1,25 @@
<template>
<div class="design_compile_content">
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="designOpenrtion_imgMask">
<div class="designOpenrtion_print">
<div
v-for="item,index in designItemDetail?.clothes"
:key="item"
:style="[printStyleList[index].style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
<!-- <img crossOrigin="anonymous" :src="item.path" :style="{transform:`scale(${printStyleList[index].transform.scale}) rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> -->
</div>
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<!-- <div
v-for="item,index in frontBack.back"
:key="item"
:style="item.style"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
</div> -->
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
<img class="perview_img" style="width: 400px; height: auto;" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
<div class="designOpenrtion_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
@@ -25,8 +28,11 @@
</ul>
</div>
</div>
<div @click="setPreview" class="subitOkPreviewBtn">OK</div>
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</template>
@@ -35,14 +41,18 @@ import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "v
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import GO from '@/tool/GO';
import { Https } from "@/tool/https";
export default defineComponent({
props: ["frontBack"],
// props: ["frontBack"],
setup(prop) {
const store = useStore();
let designItemDetail = ref([])
let designItemDetail = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
let current = inject('current')//父组件传过来的数据
let printZIndex = ref(2)//印花优先级
let printZIndex = ref(4)//印花优先级
let printStyleList = ref([
{
centers:{
@@ -56,7 +66,7 @@ export default defineComponent({
bottom:"auto",
width:100+'px',
height:100+'px',
zIndex:1,
// zIndex:1,
},
transform:{
scale:1,
@@ -68,6 +78,7 @@ export default defineComponent({
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let frontBack = ref({})
return {
designItemDetail,
current,
@@ -76,22 +87,20 @@ export default defineComponent({
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
frontBack
};
},
data() {
return {
loadingShow:false,//加载中
store: useStore(),
};
},
methods: {
init(){
let DesignParent = this.$parent
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.designItemDetail = designItemDetail
// this.clearModal()
console.log(this.frontBack);
// console.log(this.current,DesignParent.frontBack);
console.log(DesignParent);
this.printStyleList.push({
centers:{
left:0,
@@ -104,7 +113,7 @@ export default defineComponent({
bottom:"auto",
width:100+'px',
height:100+'px',
zIndex:1,
// zIndex:1,
},
transform:{
scale:1,
@@ -112,44 +121,116 @@ export default defineComponent({
},
designOpenrtionBtn:false
})
this.setImgSize()
},
async setImgSize(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let front = []
let back = []
let body
designItemDetail.others.forEach((item) => {
if(item.type == 'Body'){
body = item
}
});
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
let frontIndex = 6
let backIndex = 3
// let front = 3
// let back = 3
designItemDetail.clothes.forEach((v,index)=>{
for (let i = v.layersObject.length-1; i >= 0; i--) {
v.layersObject[i].style = {
top:v.layersObject[i].position?.[0]*ratio+'px',
left:v.layersObject[i].position?.[1]*ratio+'px',
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
// zIndex:zIndex-=1
}
v.layersObject[i].centers={
left:0,
top:0,
}
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
front[index].style.zIndex = frontIndex-=1
}else{
back[index] = v.layersObject[i]
back[index].style.zIndex = backIndex-=1
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
}
}
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
}
this.frontBack = {
front:front,
back:back,
body:body,
}
},
//按比设置单件衣服宽高位置
async setPostition(url){
let img = await loadImage(url)
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
const num = modal_body?.offsetHeight / img.height;
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img)
};
img.onerror = reject;
img.src = url;
});
}
return num
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
},
// 设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener("mouseup", this.sizeMouseup);
@@ -159,22 +240,22 @@ export default defineComponent({
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
}
if(x.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
}
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
}
if(y.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
}
let x = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
this.frontBack.front[this.imgDomIndex].style.left = x
this.frontBack.front[this.imgDomIndex].style.top = y
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
// this.frontBack.front[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
// }
// if(x.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.left = 0+'px'
// }
// if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
// this.frontBack.front[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
// }
// if(y.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
// }
},
sizeMousemove(e) {
@@ -182,42 +263,45 @@ export default defineComponent({
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let num = width/height
let w,h
let num = height/width
//判断移动四个边
if(this.direction == 'right'){
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
num = width/height
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
num = width/height
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
width = w+'px'
height = w*num+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
this.frontBack.front[this.imgDomIndex].style.width = width
this.frontBack.front[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
this.frontBack.front[this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
@@ -226,6 +310,7 @@ export default defineComponent({
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
document.removeEventListener("mouseup", this.sizeMouseup);
document.removeEventListener("mousemove", this.sizeMousemove);
},
@@ -240,8 +325,184 @@ export default defineComponent({
this.clothes = []
this.printStyleList.splice(1,this.printStyleList.length-1)
},
setPreview(){
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
setPreviewData(){
this.$emit('setSubmit','preview');
},
async setPreview(data){
let ratio = this.frontBack.body.layersObject[0].imageSize[0]/this.frontBack.body.style.width.replace(/px/g,'')
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
// this.frontBack.back.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
// this.frontBack.front.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
data.designSingleItemDTOList.forEach((item)=>{
let front = this.frontBack.front
let imageCategory1 = front[1].imageCategory
front.forEach((i)=>{
let imageCategory = i.imageCategory.split('_')[0]
if(item.type == this.capitalizeFirstLetter(imageCategory)){
let y = ((i?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - i?.position[0])
let x = ((i?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - i?.position[1])
let scale = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale)).toFixed(2)):1
item.scale = scale
let top = y == 0 ? item.offset[1]:y+item.offset[1]
let left = x == 0 ? item.offset[0]:x+item.offset[0]
item.offset = [left,top]
// item.offset = [(i?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
}
})
if(item.type == this.capitalizeFirstLetter(imageCategory1)){
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
}
})
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
this.loadingShow = false
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
designItemDetail.designItemUrl = rv.designItemUrl
designItemDetail.currentFullBodyView = rv.currentFullBodyView
rv.clothes.forEach((item)=>{
designItemDetail.clothes.forEach((i)=>{
if(item.type === i.type){
// item.position = [
// item.position[0] += left,
// item.position[1] += top
// ]
// item.layersObject[1].position = [
// item.layersObject[1].position[0]+=item.layersObject[1].offset[1],
// item.layersObject[1].position[1]+=item.layersObject[1].offset[0]
// ],
// item.layersObject[0].position = [
// item.layersObject[0].position[0]+=item.layersObject[0].offset[1],
// item.layersObject[0].position[1]+=item.layersObject[0].offset[0]
// ]
i.layersObject = item.layersObject
}
})
// data.designSingleItemDTOList.front.forEach((i)=>{
// if(item.type === i.type){
// // item.position = [
// // item.position[0] += left,
// // item.position[1] += top
// // ]
// console.log(item.position,left ,top);
// i.layersObject = item.layersObject
// }
// })
})
this.$emit('setDesignCoverage');
this.store.commit("setDesignItemDetail", designItemDetail);
// let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
// let likeDesignCollectionList = this.store.state.HomeStoreModule.likeDesignCollectionList
// designCollectionList.forEach((item) => {
// if(item.designItemId == rv.designItemId){
// item.designOutfitUrl = rv.designItemUrl
// }
// });
// likeDesignCollectionList.forEach((item) => {
// if(item.designItemId == rv.designItemId){
// item.designOutfitUrl = rv.designItemUrl
// }
// });
// this.store.commit('setDesignCollectionList',designCollectionList)
// this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
}
).catch(res=>{
this.loadingShow = false
});
//顺序不能乱
// let arr = [...this.frontBack.front,...this.frontBack.back,...this.frontBack.body.layersObject]
// let layers=[]
// let num = 0
// let front = this.frontBack.back.length+2
// let back = this.frontBack.back.length-1
// let str
// arr.forEach(item => {
// let obj
// if(item.imageCategory == 'body'){
// obj = item
// obj.priority = this.frontBack.back.length+1
// }else{
// str = str?str:item?.imageCategory.split('_')[0]
// obj = {
// id:item.id,
// imageCategory:item.imageCategory,
// scale:item?.imageSize?Number(((item?.style?.width.replace(/px/g,'')*ratio)/item?.imageSize[0]).toFixed(2)):1,
// position:[Number((item?.style?.top?.replace(/px/g,'')*ratio).toFixed(0)),Number((item?.style?.left?.replace(/px/g,'')*ratio).toFixed(0))],
// imageSize: item.imageSize,
// priority:item.style.zIndex,
// }
// if(item?.imageCategory?.indexOf("front") == -1){
// // if(str == item?.imageCategory.split('_')[0])
// if(str == item?.imageCategory.split('_')[0]){
// num = 0
// back = this.frontBack.back.length-1
// }else{
// num = 1
// back++
// }
// obj.scale = layers[num].scale
// obj.position = layers[num].position
// obj.imageSize = layers[num].imageSize
// obj.priority = back
// }else{
// obj.priority = front++
// }
// }
// obj.imageUrl = item.imageMinioUrl
// obj.maskUrl = item.maskMinioUrl
// layers.push(obj)
// });
// console.log(layers);
// let data = {
// layers:{
// designItemId:designItemDetail.designItemId,
// designItemUrl:designItemDetail.designItemUrl,
// layers:layers
// },
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
// this.loadingShow = true
// Https.axiosPost(Https.httpUrls.designSingle, data).then(
// (rv) => {
// // let top,bottom
// // let desingStr0 = designItemDetail.clothes[0].type
// // let desingStr1 = designItemDetail.clothes[1].type
// // rv.layers.forEach((item)=>{
// // let str = this.capitalizeFirstLetter(item.imageCategory)
// // if(str.split('_')[0] == desingStr0){
// // top.push(item)
// // }else if(str.split('_')[0] == desingStr1){
// // bottom.push(item)
// // }
// // })
// // console.log(rv,designItemDetail);
// // designItemDetail.clothes[0]
// // designItemDetail.clothes.forEach((item)=>{
// // if(item.type == desingStr0){
// // item.layersObject = top
// // }else if(item.type == desingStr1){
// // item.layersObject = bottom
// // }
// // })
// // this.store.commit("setDesignItemDetail", designItemDetail);
// this.loadingShow = false
// }
// ).catch(res=>{
// this.loadingShow = false
// });
},
},
});
@@ -271,7 +532,6 @@ export default defineComponent({
height: 100%;
width: 100%;
.designOpenrtion_centent{
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
@@ -290,7 +550,6 @@ export default defineComponent({
width: auto;
height: auto;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
>img{
@@ -304,23 +563,27 @@ export default defineComponent({
top: 0;
}
}
.designOpenrtion_print{
.designOpenrtion_print,.detail_modal_item_front{
z-index: 1;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
}
.designOpenrtion_print{
z-index: 1 !important;
}
.designOpenrtion_btn{
z-index: 3;
z-index: 9999;
ul{
list-style: none;
// width: 100%;

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

@@ -206,7 +206,6 @@ export default defineComponent({
this.token = getCookie('token') || ''
this.uploadUrl = getUploadUrl()
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-sketch-color-wrap')[0]
console.log( document.getElementsByClassName('vc-sketch-color-wrap'));
dropperDom.addEventListener('click',async ()=>{
try {
const dropper = new EyeDropper();
@@ -242,7 +241,7 @@ export default defineComponent({
hex = '#FFFFFF'
}
this.selectIndex = index
this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex} : {hex:''}
this.selectColor = color?.r ? {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex} : {}
// this.fileList = []
this.tcxColor = ''
this.pantongName = ''
@@ -344,7 +343,6 @@ export default defineComponent({
});
this.selectColorList = selectColorList
this.getHsvColor(selectColorList)
console.log(color,selectColor);
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
},100)

29
src/component/HomePage/ExportNewCoolection.vue
View File

@@ -1,13 +1,20 @@
<template>
<!-- 生成collention缩略图用的 -->
<div class="export_new_collection_review">
<div class="img_block_item" v-if="allBoardData?.moodTemplateId">
<!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
</div>
<div class="img_block_item" v-else>
<div class="lager_img_item" v-for="(mood) in allBoardData.moodboardFiles" :key="mood">
</div> -->
<div class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
<div v-for="(mood) in allBoardData?.disposeMoodboard" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_disposeMoodboard" >
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="mood.imgUrl" >
<img class="all_img_content cover_img" :src="mood?.imgUrl" >
</div>
</div>
</div>
<div class="img_block_item" v-else>
<div v-for="(mood) in allBoardData?.moodboardFiles" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_moodboard" >
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="mood?.imgUrl" >
</div>
</div>
</div>
@@ -80,7 +87,8 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.export_new_collection_review{
width: 40.8rem;
// width: 40.8rem;
width: 55rem;
background: #fff;
position: fixed;
left: -100rem;
@@ -99,6 +107,15 @@ export default defineComponent({
width: 20.4rem;
height: 20.4rem;
vertical-align: top;
&.lager_img_disposeMoodboard{
width: 100%;
height: auto;
}
&.lager_img_moodboard{
height: 17rem;
img{
}
}
}
.sketch_img_item{

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

@@ -74,7 +74,7 @@
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ getSketchLabel(file.category) }}
{{ file.category }}
<div
:class="[
'icon',
@@ -219,6 +219,8 @@ export default defineComponent({
num:1,
optype:false,
})
let sketchCatecoryList:any = ref([])
let workspace:any = ref({})
let loadingShow = ref(false)
return {
@@ -242,6 +244,8 @@ export default defineComponent({
checkboxImage,
printModel,
loadingShow,
sketchCatecoryList,
workspace
};
},
data(prop) {
@@ -266,31 +270,15 @@ export default defineComponent({
type1: "generate",
type2: prop.msg,
},
sketchCatecoryList: [
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
],
workspaceCom:{}
};
},
watch:{
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.getPosition()
},
},
mounted() {
// this.fileList.forEach((item,index)=>{
// item.checked = true
@@ -300,6 +288,9 @@ export default defineComponent({
// this.store.commit("addGenerateFils", this.fileList);
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
},
computed: {
getSketchLabel(value: any) {
@@ -321,6 +312,28 @@ export default defineComponent({
data.resData = JSON.parse(JSON.stringify(data))
this.store.commit("addGenerateMaterialFils", data);
},
getPosition(){
let params
if(this.workspace.sex == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
}
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.sketchCatecoryList = arr
}
})
},
beforeUpload(file: any) {
const isJpgOrPng =
file.type === "image/jpeg" ||
@@ -405,7 +418,7 @@ export default defineComponent({
file.resData = res.data;
file.type_ = "upload";
file.id_ = GO.id++;
file.category = "Outwear";
file.category = this.sketchCatecoryList[0].value;
let fileList = this.sketchboardList.filter(
(v: any) => v.status === "done"
);
@@ -490,7 +503,6 @@ export default defineComponent({
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
console.log(rv);
item.like = true
}

100
src/component/HomePage/Header.vue
View File

@@ -1,12 +1,13 @@
<template>
<div>
<div class="header_max">
<header class="header_component">
<div class="header_right_content">
<div class="header_user_icon"></div>
<!-- <div class="header_icon icon iconfont icon-touxiang3"></div> -->
<div class="header_user_content">
<div class="username"><span>/</span> hello@{{ userInfo?.userName }}</div>
<!-- <div
<div
:class="[
'icon',
'iconfont',
@@ -14,16 +15,8 @@
isShowOperate ? 'icon_rotate' : '',
]"
@click.stop="changeShowOperateContent()"
></div> -->
<nav class="select_block" v-show="isShowOperate">
<!-- <div class="select_item" @click="showBindEmailModal()">
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
</div> -->
<div class="select_item" @click="logout()">
<span class="icon iconfont icon-tuichu"></span
><span class="select_item_des">log off</span>
</div>
</nav>
></div>
</div>
</div>
<nav class="header_nav_content">
@@ -66,7 +59,15 @@
</div>
</header>
<nav class="select_block" v-show="isShowOperate">
<!-- <div class="select_item" @click="showBindEmailModal()">
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
</div> -->
<div class="select_item" @click="logout()">
<span class="icon iconfont icon-tuichu"></span
><span class="select_item_des">log off</span>
</div>
</nav>
<a-modal
class="modal_component"
v-model:visible="bindEmailVisible"
@@ -338,7 +339,11 @@ export default defineComponent({
},
});
</script>
<style lang="less" scoped>
.header_max{
position: relative;
}
.header_component {
display: flex;
justify-content: space-between;
@@ -455,44 +460,45 @@ export default defineComponent({
animation-direction: 0.5s;
}
.select_block {
position: absolute;
right: -1.5rem;
top: 3.7rem;
width: 11.4rem;
background: #ffffff;
box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
z-index: 9;
overflow: hidden;
border: 1px solid #000000;
.select_item {
padding-left: 1.5rem;
height: 4.1rem;
color: #4d4d4d;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
&:hover {
background: #f7f7f7;
}
.iconfont {
font-size: 1.4rem;
}
.select_item_des {
font-size: 1.3rem;
margin-left: 0.8rem;
}
}
}
}
}
}
.select_block {
z-index: 1050;
position: absolute;
left: 6.5rem;
top: 4.7rem;
width: 11.4rem;
background: #ffffff;
box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid #000000;
.select_item {
padding-left: 1.5rem;
height: 4.1rem;
color: #4d4d4d;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
&:hover {
background: #f7f7f7;
}
.iconfont {
font-size: 1.4rem;
}
.select_item_des {
font-size: 1.3rem;
margin-left: 0.8rem;
}
}
}
.modal_component {
.skip_content {
width: 6rem;

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

@@ -27,13 +27,13 @@
class="select_category"
@click.stop="showFileCategory(item)"
>
{{ getSketchLabel(item.category) }}
{{ item?.category }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
item.categoryShow
item?.categoryShow
? 'icon_rotate'
: '',
]"
@@ -41,12 +41,12 @@
</div>
<div
class="category_list"
v-show="item.categoryShow"
v-show="item?.categoryShow"
>
<div
:class="[
'category_item',
item.category == cate.value
item?.category == cate.value
? 'select_category_item'
: '',
]"
@@ -61,11 +61,11 @@
</div>
</div>
</div>
<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
<!-- <div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
</div>
</div> -->
</div>
<div v-show="total > imgList.length" class="material_content_list_loding">
<div v-show="total > imgList.length" class="material_content_list_loding" v-observe>
<img src="@/assets/images/homePage/loading.gif" alt="">
</div>
</div>
@@ -79,7 +79,7 @@
</template>
<script lang="ts">
import { defineComponent, ref} from 'vue'
import { defineComponent, computed, ref} from 'vue'
import { Https } from "@/tool/https";
import { message } from 'ant-design-vue';
import { useStore } from "vuex";
@@ -91,7 +91,6 @@ export default defineComponent({
let myMaterialModalShow = ref(false)
let imgList = ref([
])
let store = useStore()
let isShowLoading:any = ref(false)
let selectCode:any = ref('')
let currentPage:any = ref(1)
@@ -100,32 +99,13 @@ export default defineComponent({
let total = ref(0)
let searcMaterialhName:any = ref('') //搜索名字
let designType:any = ref(null)
let disignTypeList = [
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
]
let disignTypeList:any = ref([
])
let workspace:any = ref({})
return{
myMaterialModalShow,
imgList,
store,
isShowLoading,
selectCode,
currentPage,
@@ -135,6 +115,7 @@ export default defineComponent({
searcMaterialhName,
designType,
disignTypeList,
workspace
}
},
data (prop) {
@@ -142,9 +123,34 @@ export default defineComponent({
type_ : {
type1:'material',
type2:prop.msg
}
},
store: useStore(),
workspaceCom:{}
}
},
directives:{
observe:{
mounted (el,binding) {
el.addEventListener('click',()=>{
})
},
// updated (el,model){
// if(model.value){
// el.style.display="block"
// setTimeout(() => {
// el.classList.add("active")
// }, 100);
// }else{
// el.classList.remove("active")
// setTimeout(() => {
// el.style.display="none"
// }, 100);
// }
// }
},
},
computed: {
getSketchLabel(value:any) {
return (value: any) => {
@@ -158,40 +164,132 @@ export default defineComponent({
return lable;
};
},
sketchboardList(){
return this.store.state.UploadFilesModule.sketchMaterialFiles
},
moodboardList(){
return this.store.state.UploadFilesModule.moodboardMaterialFiles
},
printboardList(){
return this.store.state.UploadFilesModule.printMaterialFiles
},
},
mounted () {
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
let loding = document.getElementsByClassName("material_content_list_loding")[0]
let bodyLoding = document.getElementsByClassName("material_content_body")[0]
const ob = new IntersectionObserver(callback,{
root:null,
threshold:[0.1]
})
ob.observe(loding)
console.log(loding);
// this.currentPage = 1
// this.pageSize = 12
// let this_ = this
function callback(entries:any, observer:any) {
entries.forEach((entry:any) => {
if (entry.isIntersecting) {
console.log(111);
// this_.getLibraryList()
} else {
}
});
}
},
watch:{
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.getPosition()
},
sketchboardList:{
handler(newVal:any,oldVal:any){
// this.store.state.Workspace.workspace
oldVal.forEach((item:any) => {
if(newVal.findIndex((newValItem:any) =>newValItem.id == item.id) == -1){
this.imgList.forEach((i:any)=>{
if(i.id == item.id){
i.checked = false
}
})
}
});
},
},
moodboardList:{
handler(newVal:any,oldVal:any){
// this.store.state.Workspace.workspace
oldVal.forEach((item:any) => {
if(newVal.findIndex((newValItem:any) =>newValItem.id == item.id) == -1){
this.imgList.forEach((i:any)=>{
if(i.id == item.id){
i.checked = false
}
})
}
});
}
},
printboardList:{
handler(newVal:any,oldVal:any){
// this.store.state.Workspace.workspace
oldVal.forEach((item:any) => {
if(newVal.findIndex((newValItem:any) =>newValItem.id == item.id) == -1){
this.imgList.forEach((i:any)=>{
if(i.id == item.id){
i.checked = false
}
})
}
});
}
},
},
methods:{
init(code:any){
this.selectCode = code
// this.myMaterialModalShow = true
if(this.imgList.length == 0){
}
this.getLibraryList()
let loding = document.getElementsByClassName("material_content_list_loding")[0]
const ob = new IntersectionObserver(callback,{
root:null,
threshold:.8
})
let this_ = this
function callback(entries:any, observer:any) {
entries.forEach((entry:any) => {
if (entry.isIntersecting) {
this_.getLibraryList()
} else {
}
});
}
ob.observe(loding)
},
getPosition(){
let params
if(this.workspace.sex == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
}
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.disignTypeList = arr
}
})
},
selectImgItem(imgData:any){
imgData.type_ = this.type_
imgData.resData = JSON.parse(JSON.stringify(imgData))
this.imgList.forEach((v:any)=>{
v.categoryShow = false
})
this.store.commit("addGenerateMaterialFils", imgData);
},
//改变页码
changePage(current: number, pageSize: number){
this.currentPage = current
@@ -204,8 +302,6 @@ export default defineComponent({
},
//选择所有的图片
getLibraryList(){
let data = {
level1Type:this.selectCode,
@@ -219,36 +315,31 @@ export default defineComponent({
(rv: any) => {
let aa:any = []
rv.content.forEach((item:any,index:any) => {
let arr
if(this.type_.type2 == 'Sketchboard'){
item.category = "Outwear";
arr = this.store.state.UploadFilesModule.sketchMaterialFiles
item.category = item.level2Type;
item.categoryShow = false;
}else if(this.type_.type2 == 'Moodboard'){
arr = this.store.state.UploadFilesModule.moodboardMaterialFiles
}else if(this.type_.type2 == 'Printboard'){
arr = this.store.state.UploadFilesModule.printMaterialFiles
}
// let arr
// if(this.type_.type2 == 'Sketchboard'){
// arr = this.store.state.UploadFilesModule.sketchMaterialFiles
// item.category = "Outwear";
// item.categoryShow = false;
// }else if(this.type_.type2 == 'Moodboard'){
// arr = this.store.state.UploadFilesModule.moodboardMaterialFiles
// }else if(this.type_.type2 == 'Printboard'){
// arr = this.store.state.UploadFilesModule.printMaterialFiles
// }
item.imgUrl = item.url
// aa.push(item)
if(!item.id_){
item.id_ = GO.id++
arr.forEach((v:any)=>{
if(item.id == v.id){
item.id_ = v.id_?v.id_:GO.id++
item.checked = true
}
})
}else{
}
aa.push(item)
// if(!item.id_){
// item.id_ = GO.id++
// aa.push(item)
// arr.forEach((v:any)=>{
// if(item.id == v.id){
// v.checked = false
// }
// })
// }else{
// aa.push(item)
// }
});
this.imgList = aa
this.total = rv.total
this.isShowLoading = false
@@ -275,6 +366,7 @@ export default defineComponent({
for (let item of (this.imgList as any)) {
item.categoryShow = false;
}
this.setSketchLibrary(file)
},
hiddenFileCategory() {
for (let item of (this.imgList as any)) {
@@ -282,6 +374,17 @@ export default defineComponent({
}
document.removeEventListener("click", this.hiddenFileCategory);
},
setSketchLibrary(item:any){
let data = {
libraryId:item.id,
level2Type:item.category,
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
}
).catch((res)=>{
});
},
}
})
</script>

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

@@ -43,7 +43,7 @@
</div>
</div>
<div class="img_block_item">
<div class="img_block_item img_block_item_sketch">
<div class="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
<div class="all_img_item_block">
<img class="all_img_content" :src="skecth.imgUrl">
@@ -144,26 +144,26 @@ export default defineComponent({
}
.color_content{
width: 9rem;
width: 10rem;
height:6.2rem
}
.color_content_body{
width: 9rem;
width: 10rem;
padding: 0.7rem 0.2rem;
background: #FEFEFE;
border: 1px solid #E6E6E6;
.color_des{
font-size: 1rem;
font-family: Roboto;
font-weight: 500;
color: #000000;
margin-bottom: 0.5rem;
line-height: 1;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1rem;
font-family: Roboto;
font-weight: 500;
color: #000;
margin-bottom: .5rem;
line-height: 1.3rem;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:last-child{
margin-bottom: 0;
@@ -188,6 +188,15 @@ export default defineComponent({
}
}
}
&.img_block_item_sketch{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
>div{
width: 45%;
height: 25rem;
}
}
}
}

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

@@ -614,7 +614,8 @@ export default defineComponent({
rv.generatedCollectionItems.forEach((v:any,index:number)=>{
arr = {
id:rv.generatedCollectionItems[index].generateItemId,
imgUrl:rv.generatedCollectionItems[index].generateItemUrl
imgUrl:rv.generatedCollectionItems[index].generateItemUrl,
id_:GO.id++
}
this.generateList.push(arr)
this.loadingShow = false

172
src/component/HomePage/RobotAssist.vue
View File

@@ -1,25 +1,28 @@
<template>
<div class="robot" @mousemove="robotmax">
<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
<div :class="[item.state == 1?'text_right':'text_left']" v-for="item in record" ref="robotChildDom">
<div :class="[item.state == 1?'text_right':'text_left',item.img?'white':'']" v-for="item,index in record" ref="robotChildDom">
<div class="robot_text">
<span>
{{item.str}}
</span>
<div class="robot_img">
<div class="robot_img_item" v-for="imgItem in item.img">
<img :src="imgItem.url" alt="">
<div class="robot_img" :class="[item.img ?'img':'']">
<div class="robot_img_item" v-for="imgItem,imgIndex in item.img">
<img :src="imgItem.presignedUrl" alt="">
<div
class="delete_like_file_block"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
<i v-if="imgItem.id == null" class="fi fi-rr-heart" @click.stop="likeFile(imgItem,imgIndex,index)"></i>
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(imgItem,imgIndex,index)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="robot_content">
<div :style="'width:'+bloodBars+'%;'"></div>
</div>
<div class="robot_bottom">
<div class="robot_input" v-fade="robotInput,'flex'">
<input
@@ -60,39 +63,10 @@ export default defineComponent({
let timeTop:any = 0;
let timeInput:any = 0;
let record:any = ref([
{
state:1,
str:"1111111111"
},
{
state:2,
str:"2222222222222"
},
{
state:1,
str:"1111111111"
},
{
state:2,
str:"2222222222222"
},
{
state:1,
str:"1111111111",
img:[
{url:'http://18.167.251.121:9000/aida-clothing/image/image_1695621083.572033.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20230926%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230926T064349Z&X-Amz-Expires=28800&X-Amz-SignedHeaders=host&X-Amz-Signature=74f33d78f94925b1cd2e0198efad99432d7f285f951d5fc1ac11bf77fc802238'},
{url:'http://18.167.251.121:9000/aida-clothing/image/image_1695621083.572033.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20230926%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230926T064349Z&X-Amz-Expires=28800&X-Amz-SignedHeaders=host&X-Amz-Signature=74f33d78f94925b1cd2e0198efad99432d7f285f951d5fc1ac11bf77fc802238'},
{url:'http://18.167.251.121:9000/aida-clothing/image/image_1695621083.572033.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20230926%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230926T064349Z&X-Amz-Expires=28800&X-Amz-SignedHeaders=host&X-Amz-Signature=74f33d78f94925b1cd2e0198efad99432d7f285f951d5fc1ac11bf77fc802238'},
{url:'http://18.167.251.121:9000/aida-clothing/image/image_1695621083.572033.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20230926%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230926T064349Z&X-Amz-Expires=28800&X-Amz-SignedHeaders=host&X-Amz-Signature=74f33d78f94925b1cd2e0198efad99432d7f285f951d5fc1ac11bf77fc802238'},
]
},
{
state:2,
str:"2222222222222"
},
])
const userInfo:any = {}
let bloodBars:any = ref(0)
return {
robotTop,
robotInput,
@@ -103,6 +77,7 @@ export default defineComponent({
timeTop,
timeInput,
userInfo,
bloodBars,
};
},
data() {
@@ -113,6 +88,13 @@ export default defineComponent({
this.textScroll()
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
if (sessionStorage.getItem("record") == null) {
this.record = []
}else{
this.record = JSON.parse(sessionStorage.getItem("record") as string)
}
this.getBloodBars()
},
directives:{
fade:{
@@ -133,9 +115,6 @@ export default defineComponent({
},
methods: {
robotBtn(){
console.log(2323);
if(!this.robotTop||!this.robotInput){
this.robotTop = true
this.robotInput = true
@@ -149,6 +128,13 @@ export default defineComponent({
this.textScroll()//聊天定位到最低部
this.createTimer()
},
getBloodBars(){
Https.axiosGet(Https.httpUrls.getBloodBars,{params:{userId:this.userInfo.userId}}).then((rv: any) => {
if (rv) {
this.bloodBars = rv*100
}
})
},
textScroll(){
this.$nextTick(()=>{
if(this.robotDom && this.robotChildDom){
@@ -187,14 +173,9 @@ export default defineComponent({
// sessionStorage.setItem('username', '23123123123');
// sessionStorage.getItem("username")
// sessionStorage.removeItem
console.log(sessionId);
let a = true
let data = {
"user_id" : this.userInfo.userId,
// "message" : this.chatCentent,
// // "message" : "Hello, can you tell me what holiday is on July 1st",
// "session_id":""
"session_id":sessionId,
"message" : this.chatCentent,
}
@@ -216,49 +197,43 @@ export default defineComponent({
// Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
(rv) => {
if(rv){
console.log(rv);
this.record.push({
state:1,
str:rv.output
})
if(rv.chatRobotLibraryList != null){
this.record.push({
state:1,
img:rv.chatRobotLibraryList
})
}else{
this.record.push({
state:1,
str:rv.output,
})
}
sessionStorage.setItem('record', JSON.stringify(this.record));
this.createTimer()
this.textScroll()
this.getBloodBars()
}
}
).catch(res=>{
// console.log(res,'res');
});
this.chatCentent = ""
},
likeFile(item:any,str:string){
if(str == 'like'){
let data = {
generateDetailId:item.id,
level1Type:"Moodboard",
level2Type: '',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
console.log(rv);
item.like = true
}
).catch(res=>{
});
}else{
let data = {
generateDetailId:item.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
(rv) => {
item.like = false
}
).catch(res=>{
});
likeFile(item:any,imgIndex:number,index:number){
let data = {
...item,
"userId" : this.userInfo.userId,
}
Https.axiosPost(Https.httpUrls.pictureLikeOrUnLike, data).then(
(rv) => {
if(this.record[index].img[imgIndex].id == null){
this.record[index].img[imgIndex].id = rv.id
}else{
this.record[index].img[imgIndex].id = null
}
sessionStorage.setItem('record', JSON.stringify(this.record));
}
).catch(res=>{
});
},
//创建定时器
createTimer() {
@@ -296,11 +271,12 @@ export default defineComponent({
// width: 25rem;
width: 30rem;
margin-left: auto;
height: 30rem;
// height: 20rem;
overflow-x: hidden;
transition: .3s all;
opacity: 0;
height: auto;
max-height: 30rem;
display: none;
&.active{
opacity: 1;
@@ -317,12 +293,16 @@ export default defineComponent({
flex-wrap: wrap;
align-items: center;
justify-content: center;
&.img{
width: 18rem;
}
.robot_img_item{
margin-bottom: 5%;
margin-right: 2.5%;
max-height: 100%;
position: relative;
width: 40%;
overflow: hidden;
margin: 0 5%;
margin-bottom: 5%;
.delete_like_file_block{
display: none;
width: 3.2rem;
@@ -382,8 +362,36 @@ export default defineComponent({
background-color: #835ff7;
color: #fff;
}
&.white{
>div{
background-color: #fff;
}
}
}
}
.robot_content{
opacity: 0;
width: 8rem;
height: 1.1rem;
border-radius: 2rem;
overflow: hidden;
border: .2rem solid;
background: #341e57;
display: flex;
justify-content: flex-end;
margin-left: auto;
transition: all .3s;
>div{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
height: 100%;
width: 80%;
border-radius: 2rem;
}
}
&.robot:hover .robot_content{
opacity: 1;
}
.robot_bottom{
display: flex;
align-items: center;

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

@@ -52,7 +52,7 @@
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ getSketchLabel(file.category) }}
{{ file.category }}
<div
:class="[
'icon',
@@ -182,7 +182,7 @@
class="select_category"
@click.stop="showFileCategory(item)"
>
{{ getSketchLabel(item.category) }}
{{ item.category }}
<div
:class="[
'icon',
@@ -264,12 +264,17 @@ export default defineComponent({
])
let generateCheckbox:any = ref()
let loadingShow = ref(false)
let sketchCatecoryList:any = ref({})
let workspace:any = ref({})
return {
fileList,
openClick,
generateList,
generateCheckbox,
loadingShow
loadingShow,
sketchCatecoryList,
workspace
};
},
data() {
@@ -289,32 +294,11 @@ export default defineComponent({
token: "",
uploadUrl: "",
store: useStore(),
sketchCatecoryList: [
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
],
captionGeneration:'',
sketchboardList:computed(()=>{
return useStore().state.UploadFilesModule.sketchboard
}),
workspaceCom:{}
};
},
computed: {
@@ -330,11 +314,19 @@ export default defineComponent({
return lable;
};
},
},
watch:{
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.getPosition()
},
},
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
},
methods: {
open(num: Number) {
@@ -347,6 +339,28 @@ export default defineComponent({
// Generate.init('generate')
}
},
getPosition(){
let params
if(this.workspace.sex == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
}
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.sketchCatecoryList = arr
}
})
},
getgenerateCheckbox(value:any){
this.generateCheckbox = value
},
@@ -357,7 +371,7 @@ export default defineComponent({
file.imgUrl = res.data.url;
file.resData = res.data;
file.pin = false;
file.category = "Outwear";
file.category = this.sketchCatecoryList[0].value;
file.categoryShow = false;
file.id_ = GO.id++
file.type_ = {
@@ -459,7 +473,6 @@ export default defineComponent({
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
console.log(rv);
item.like = true
}
).catch(res=>{
@@ -471,7 +484,6 @@ export default defineComponent({
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
console.log(rv);
item.like = false
}
).catch(res=>{
@@ -570,7 +582,8 @@ export default defineComponent({
arr = {
id:rv.generatedCollectionItems[index].generateItemId,
imgUrl:rv.generatedCollectionItems[index].generateItemUrl,
category:generage.level2Type
category:generage.level2Type,
id_:GO.id++
}
this.generateList.push(arr)
this.loadingShow = false
@@ -797,10 +810,13 @@ export default defineComponent({
height: 4rem;
margin: 0 1rem 1rem 0;
position: relative;
text-align: center;
cursor: pointer;
img{
width: 100%;
// width: 100%;
width: auto;
height: 100%;
object-fit: contain;
}
.checked{
position: absolute;

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

@@ -52,8 +52,6 @@ import {useStore} from 'vuex'
export default defineComponent({
props: ["msg"],
setup(prop) {
console.log(prop.msg);
let fileList:any = ref([])
return{

1
src/component/HomePage/layout.vue
View File

@@ -282,7 +282,6 @@ export default defineComponent({
},
//操作旋转
rotote:{
mounted(el){
let mouse = true;
let angle :any = 0

110
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -32,8 +32,44 @@
</div>
</div>
</div>
<div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{modelType = 'System'}">
System
</div>
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{modelType = 'Library'}">
Library
</div>
</div>
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{sex = 'Female'}">
Female
</div>
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{sex = 'Male'}">
Male
</div>
</div>
</div>
<div class="models_placement_content">
<div class="plcaement_point_content">
<div class="select_block">
<a-select
ref="select"
v-model:value="sex"
:options="sexList"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<div class="ponit_title">{{point.title}}</div>
<div class="point_list">
@@ -41,7 +77,7 @@
</div>
</div>
</div>
<div class="placement_content_operate_list">
<div class="placement_content_operate_item" @click="changeRemoveStatus">
<div class="placement_remove_point_block"></div>
@@ -74,6 +110,7 @@
import { defineComponent,ref,createVNode} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile} from "@/tool/util"
import { getCookie } from "@/tool/cookie";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -89,6 +126,9 @@ export default defineComponent({
let oldPointList:any = ref([]) //备份点
let pointList:any = ref([])
let isSubmit:any = ref(false) //判断历史是否有提交过
let manager:any = ref(false)
let userInfo:any = ref()
return {
store,
oldLocationList,
@@ -99,7 +139,9 @@ export default defineComponent({
currentSign,
oldPointList,
pointList,
isSubmit
isSubmit,
manager,
userInfo
}
},
data(){
@@ -112,8 +154,18 @@ export default defineComponent({
placement_sacle:30,
perviewUrl:'',//预览的图片地址
isShowMark:false,
modelType:'library',
sex:'Male',
sexList: [
]
}
},
mounted(){
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
this.getSex()
},
methods:{
formatter(value:number){
return `${value}%`;
@@ -137,6 +189,22 @@ export default defineComponent({
this.getDefaultPointList(this.imgBox)
},500)
},
getSex(){
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.sex = arr[0].value
this.sexList = arr
}
})
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
@@ -324,9 +392,13 @@ export default defineComponent({
let param = {
libraryId:this.printObject.id,
templateId:this.printObject.templateId || null,
modelType:'Library',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
param.modelType = this.modelType
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
@@ -345,8 +417,14 @@ export default defineComponent({
file:this.printObject.file,
level1Type:'Models',
level2Type:'',
sex:'',
modelType:'Library',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
new_data.modelType = this.modelType
new_data.sex = this.sex
}
this.isShowMark = true
return new Promise((resolve,reject)=>{
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
@@ -518,7 +596,33 @@ export default defineComponent({
left: 0;
top:18.4rem;
padding: 3rem 2.7rem 0 1.4rem;
.select_block{
// background: #FFFFFF;
margin-bottom: 3rem;
color: #1A1A1A !important;
.ant-select{
width: 100%;
.ant-select-selector{
padding: 0;
margin: 0;
background: rgba(0, 0, 0, 0);
font-size: 1.3rem;
color: #64686D;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
height: 3rem;
.ant-select-selection-item, .select_block .ant-select-single .ant-select-selector .ant-select-selection-placeholder{
font-weight: 300 !important;
line-height: 1.5715 !important;
}
}
}
.icon-xiala{
color: #1A1A1A !important;
}
}
.placement_point_item{
display: flex;
justify-content: space-between;

2
src/component/LibraryPage/ModelPlacementMobile.vue
View File

@@ -343,6 +343,8 @@ export default defineComponent({
let new_data = {
file:this.printObject.file,
level1Type:'Models',
sex:'',
modelType:'',
level2Type:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}

2
src/component/LibraryPage/ModelPlacementNew.vue
View File

@@ -346,6 +346,8 @@ export default defineComponent({
file:this.printObject.file,
level1Type:'Models',
level2Type:'',
sex:'',
modelType:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.isShowMark = true

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

@@ -1,6 +1,7 @@
import {Module} from 'vuex'
import {RootState} from '../index'
import { message } from "ant-design-vue";
import GO from '@/tool/GO';
interface UploadFiles{
moodboard:any,
@@ -100,7 +101,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
let str = true
for (let index = 0; index < file.length; index++) {
if(file[index].id == data.id){
// data.id = GO.id++
// data.id_ = GO.id++
str = false
}
}
@@ -113,7 +114,14 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
}
}else{
data.checked = false
file = file.filter((v:any)=> v.id != data.id)
file = file.filter((v:any)=> v.id != data.id)
// if(data.id_){
// data.checked = false
// file = file.filter((v:any)=> v.id_ != data.id_)
// }else{
// data.checked = false
// file = file.filter((v:any)=> v.id != data.id)
// }
}
}
if(data.type_.type1 == 'generate'){

77
src/tool/https.js
View File

@@ -19,12 +19,13 @@ import { message } from 'ant-design-vue';
// }else{
// axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
// }
let httpIp
if(process.env.NODE_ENV == 'development'){
httpIp = 'http://192.168.1.12:10086'
}else{
httpIp = ''
}
// let httpIp
// if(process.env.NODE_ENV == 'development'){
// httpIp = 'http://192.168.1.12:10086'
// }else{
// httpIp = ''
// }
let httpIp = process.env.NODE_ENV == 'development' ? "http://192.168.1.10:10086" : "";
console.log(httpIp);
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
// console.log(process.env.VUE_APP_BASE_URL);
@@ -44,16 +45,22 @@ axios.interceptors.request.use((config) => {
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
console.log(res);
if (res.data) {
if (res.data.errCode === 0 || res.data.code === 200) {
// if(res.data.data == null){
// message.warning(res.data.errMsg)
// return Promise.reject(res.data);
// }else
if (res.data) {
if (res.data.errCode === 0) {
// message.error(res.data.errMsg)
return Promise.resolve(res.data.data);
} else {
message.error(res.data.errMsg)
message.warning(res.data.errMsg)
return Promise.reject(res.data);
}
} else {
message.error(res.data.errMsg)
message.warning(res.data.errMsg)
// message.error(res.data.errMsg)
return Promise.reject(res.data);
}
@@ -82,23 +89,29 @@ export const Https = {
elementSavePrint:'/api/element/savePrint',//保存印花
getRgbByTcx:'/api/element/getRgbByTcx', // 通过hsv值获取潘通信息
getRgbByHsv:'/api/element/getRgbByHsv', //通过hsv值获取潘通信息
designCollection:`${httpIp}/api/design/designCollection`, //设计 Conllection
reDesignCollection:`${httpIp}/api/design/reDesignCollection`,//重新设计 Conllection
designCollection:`/api/design/designCollection`, //设计 Conllection
reDesignCollection:`/api/design/reDesignCollection`,//重新设计 Conllection
countDesignProcess:'/api/design/countDesignProcess', //统计design进度
designProcess:`/api/design/designProcess`, //统计design进度
getRgbByHsvBatch:`/api/element/getRgbByHsvBatch`, //通过hsv值数组批量获取潘通信息
designLike:`${httpIp}/api/design/like`, //Design Like
designDislike: `${httpIp}/api/design/dislike`, //Design Dislike
queryUserGroup:`${httpIp}/api/history/queryUserGroup`, //History用户分页分组列表
deleteUserGroup:`${httpIp}/api/history/deleteUserGroup`, //History删除用户分组
updateUserGroupName:`${httpIp}/api/history/updateUserGroupName`, //History修改用户分组名
historyChoose:`${httpIp}/api/history/choose`, //History choose
designLike:`/api/design/like`, //Design Like
designDislike: `/api/design/dislike`, //Design Dislike
queryUserGroup:`/api/history/queryUserGroup`, //History用户分页分组列表
deleteUserGroup:`/api/history/deleteUserGroup`, //History删除用户分组
updateUserGroupName:`/api/history/updateUserGroupName`, //History修改用户分组名
historyChoose:`/api/history/choose`, //History choose
getDesignDetail:`/api/design/detail/getDetail`,//查询design详情
putDesignDetail:`/api/design/detail/editLayers`,//编辑单间衣服大小位置
generateHighDesign:'/api/design/detail/generateHighDesign',//生成高级design图片
getNextSysElement:'/api/design/detail/getNextSysElement',//切换系统的element
detailPrintDot:'/api/design/detail/printDot',//print打点预览
designSingle:`/api/design/detail/designSingle`,//单个design
queryLibraryPage:'/api/library/queryLibraryPage',//Library分页列表
libraryUpload:'/api/library/upload', // Library文件上传
queryLibraryPage:`/api/library/queryLibraryPage`,//Library分页列表
libraryUpload:`/api/library/upload`, // Library文件上传
setSketchLibrary:`/api/library/updateLibraryLevel2Type`, // Library文件上传
batchUpdateLibraryName:'/api/library/batchUpdateLibraryName',//Library修改用户文件名
batchDeleteLibrary:'/api/library/batchDeleteLibrary',//删除library
queryLibraryTopAndBottomPage:'/api/library/queryLibraryTopAndBottomPage',//Library分页列表(查询top和bottom)
@@ -106,21 +119,23 @@ export const Https = {
saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
libraryModelsDot:'/api/library/modelsDot',//Models打点预览
// pythonChatStream:'/api/python/chatStream',//机器人助力
// chatStreamTest:`${httpIp}/robot/chat_stream_test`,//机器人助力
chatStreamTest:`${httpIp}/api/python/chatStream`,//机器人助力
// chatStreamTest:`/robot/chat_stream_test`,//机器人助力
chatStreamTest:`/api/python/chatStream`,//机器人助力
pictureLikeOrUnLike:`/api/python/pictureLikeOrUnLike`,//机器人生成图喜欢
getBloodBars:`/api/python/getBloodBars`,//机器人血条
workspaceDetail:`/api/workspace/detail`,//用户习惯详情
workspaceenumValues:`/api/workspace/enumValues`,//getSex
workspaceDetail:`${httpIp}/api/workspace/detail`,//用户习惯详情
workspaceenumValues:`${httpIp}/api/workspace/enumValues`,//getSex
workspaceRemove:`/api/workspace/remove`,//删除用户习惯详情
workspacesaveOrUpdate:`/api/workspace/saveOrUpdate`,//修改用户习惯详情
getMannequins:`/api/workspace/getMannequins`,//模特
workspaceRemove:`${httpIp}/api/workspace/remove`,//删除用户习惯详情
workspacesaveOrUpdate:`${httpIp}/api/workspace/saveOrUpdate`,//修改用户习惯详情
getMannequins:`${httpIp}/api/workspace/getMannequins`,//模特
workspaceList:`${httpIp}/api/workspace/list`,
workspaceList:`/api/workspace/list`,
sketchAndPrintGenerate:'/api/generate/sketchAndPrint',//sketchGenerate生成图片
generateLike:'/api/generate/like',//喜欢ganerate图片
generateDislike:'/api/generate/dislike',//喜欢ganerate图片
elementUpload:'/api/element/upload',//上传图片
elementUpload:`/api/element/upload`,//上传图片
},

3
src/tool/util.js
View File

@@ -5,7 +5,8 @@ const isEmail = (email)=>{
}
const getUploadUrl = () =>{
let url = process.env.VUE_APP_BASE_URL || ''
// let url = process.env.VUE_APP_BASE_URL || ''
let url = "http://18.167.251.121:10086"
return url
}

3
src/views/Demo.vue
View File

@@ -31,8 +31,6 @@ export default defineComponent({
top:this.$refs.imgbox.offsetTop,
scrollTop:this.$refs.scrollTop || 0,
}
console.log(this.imgBox)
},
methods:{
AddDian(color){
@@ -40,7 +38,6 @@ export default defineComponent({
this.intObj = {
color:color
}
console.log(this.intObj)
},
startMove(event){

4
src/views/HistoryPage.vue
View File

@@ -61,6 +61,7 @@
<div class="rename_submit_button" @click="confrimRename()">Submit</div>
</div>
</a-modal>
<RobotAssist></RobotAssist>
</div>
</template>
<script lang="ts">
@@ -70,11 +71,13 @@ import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util"
import { Modal,message } from 'ant-design-vue';
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
HeaderComponent,
HistoryDetail,
RobotAssist
},
setup() {
let rangePickerValue:any = ref([])
@@ -224,6 +227,7 @@ export default defineComponent({
width: 100%;
height: 100%;
padding: 0 9rem;
overflow: hidden;
.page_content {
position: relative;

244
src/views/HomeView.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="home_page">
<HeaderComponent></HeaderComponent>
<div class="page_content">
<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
<div class="page_content_body">
<HeaderComponent></HeaderComponent>
<div class="home_page_body">
<div class="home_page_left">
<div class="home_page_left_content">
@@ -44,6 +44,7 @@
</div>
</div>
<div class="home_page_right">
<div class="right_top">
<div class="right_top_left">
<div class="button_second" @click="designNewCollection()">
@@ -67,7 +68,9 @@
<div class="right_content_body">
<div class="right_content_img_block scroll_style">
<div class="right_content_img_item" v-mousewheel>
<div class="content_img_block" v-for="(
<!-- <draggable
group="people" > -->
<div class="content_img_block" v-for="(
design, index
) in designCollectionList" :key="design?.designItemId" @click="
designDetail(
@@ -87,6 +90,8 @@
)
"></div>
</div>
<!-- </draggable> -->
</div>
</div>
</div>
@@ -102,8 +107,8 @@
<div class="right_content_body">
<div class="right_content_img_block scroll_style">
<div class="right_content_img_item" v-mousewheel>
<div class="content_img_block" v-for="(
<div class="right_content_img_item" v-mousewheel id="right_content_img_block">
<!-- <div class="content_img_block" v-for="(
design, index
) in likeDesignCollectionList" :key="design?.id" @click="
designDetail(
@@ -123,6 +128,28 @@
index
)
"></div>
</div> -->
<div class="content_img_block" draggable
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
@click="designDetail(
design,
index,
likeDesignCollectionList,
'like'
)"
@dragstart="dragstart($event, index)"
@dragover.prevent
@drop="dragDrop($event, index)">
<div class="content_img_flex">
<img class="content_img" v-lazy="design.designOutfitUrl"
:key="design.designOutfitUrl" />
</div>
<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
dislikeDesignCollection(
design,
index
)
"></div>
</div>
</div>
</div>
@@ -171,7 +198,9 @@ import { useStore } from "vuex";
import { Https } from "@/tool/https";
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
import { LoadingOutlined } from "@ant-design/icons-vue";
import draggable from 'vuedraggable'
import JSZip from "jszip";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
const FileSaver = require("file-saver");
export default defineComponent({
@@ -182,6 +211,7 @@ export default defineComponent({
DesignDetail,
ExportNewCoolection,
RobotAssist,
draggable
},
setup() {
const store = useStore();
@@ -208,6 +238,7 @@ export default defineComponent({
width:'',
height:'',
}
let userInfo:any = {}
return {
store,
likeDesignCollectionList,
@@ -217,6 +248,7 @@ export default defineComponent({
designId,
contentImgMax,
contentImg,
userInfo,
};
},
data() {
@@ -237,9 +269,13 @@ export default defineComponent({
startDesignType: "design", //设计类型 design 和 resdesign
disLikeLoading: false, //不喜欢防抖
likeLoading: false, //喜欢防抖
dragIdx:0,
designRandom:'',
};
},
mounted() {
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
this.store.dispatch('get_clothingType')
// console.log(this.store.state.UserHabit);
@@ -277,12 +313,12 @@ export default defineComponent({
parentWidth = parent.offsetWidth
})
el.addEventListener('mousewheel',(e:MouseEvent)=>{
if(0>(e as WheelEvent).deltaY){
if(0>(e as WheelEvent).deltaY && width>parentWidth){
num+=15
if(num >= 0){
num = 0
}
}else{
}else if(0<(e as WheelEvent).deltaY && width>parentWidth){
num-=15
if(num<=parentWidth - width){
num = parentWidth - width
@@ -296,7 +332,22 @@ export default defineComponent({
}
},
methods: {
addTeam (team:any) {
this.likeDesignCollectionList.push(team)
},
dragstart (e:any, index:any) {
this.dragIdx = index
},
dragDrop (e:any, index:any) {
let _teams = this.likeDesignCollectionList //将hotteams存起来
let _dragitem = _teams[this.dragIdx] //将被拖拽的那条数据存起来
_teams.splice(this.dragIdx, 1) //删除被拖拽的那条数据
_teams.splice(index, 0, _dragitem) //将被拖拽的那条数据放到数组中指定的位置
},
formatter(value: number) {
return `${value}%`;
@@ -379,14 +430,10 @@ export default defineComponent({
return;
}
let data = this.getDesignData("");
console.log(data);
Https.axiosPost(Https.httpUrls.designCollection, data)
.then((rv: any) => {
if (rv) {
console.log(rv);
this.store.commit(
"setDesignCollectionList",
rv.designCollectionItems
@@ -398,17 +445,17 @@ export default defineComponent({
rv.collectionId
);
this.store.commit("setDesignId", rv.designId);
this.showDesignMark = false;
this.designProgress = 0;
this.startDesignType = "design";
}
})
.catch((res) => {
this.showDesignMark = false;
});
this.getDesignProcess();
})
// setTimeout(() => {
this.getDesignProcess(this.designRandom);
// }, 1000);
},
//重新设计collection
resDesignCollection() {
let { colorBoards } =
@@ -428,7 +475,6 @@ export default defineComponent({
"setDesignCollectionList",
rv.designCollectionItems
);
this.showDesignMark = false;
(this.designProgress = 0),
(this.startDesignType = "resDesign");
}
@@ -436,7 +482,10 @@ export default defineComponent({
.catch((res) => {
this.showDesignMark = false;
});
this.getDesignProcess();
// setTimeout(() => {
this.getDesignProcess(this.designRandom);
// }, 1000);
},
getDesignData(designCollectionId: any) {
@@ -450,9 +499,8 @@ export default defineComponent({
marketingSketchFiles,
moodTemplateId,
} = this.store.state.UploadFilesModule.allBoardData;
// console.log(this.store.state.UploadFilesModule.allBoardData);
this.randomNum()
let workspace = this.store.state.Workspace.workspace
console.log(workspace);
let data: any = {
colorBoards: this.getColorBoard(colorBoards),
// marketingSketchs: this.getBoardId(marketingSketchFiles),
@@ -462,10 +510,13 @@ export default defineComponent({
switchCategory: !workspace.overallSingle ?"": workspace.position,
singleOverall: !workspace.overallSingle ? "overall" : "single",
systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
templateId: 96,
// templateId: workspace.mannequinId?workspace.mannequinId:'',
// templateId: 3377,
templateId: workspace.mannequinId?workspace.mannequinId:'',
modelType:workspace.mannequinType,
modelSex:workspace.sex,
moodTemplateId: disposeMoodboard[0] ? String(disposeMoodboard[0].id) : null,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
processId:this.designRandom
};
if (designCollectionId) {
data.collectionId = designCollectionId;
@@ -476,22 +527,40 @@ export default defineComponent({
},
//deisgn的进度
getDesignProcess() {
Https.axiosPost(Https.httpUrls.countDesignProcess, {}).then(
(rv: any) => {
if (rv < 1 && this.showDesignMark) {
this.designProgress = rv * 100;
setTimeout(() => {
this.getDesignProcess();
}, 1000);
}
getDesignProcess(num:any) {
Https.axiosGet(Https.httpUrls.designProcess,{params:{processId:num}}).then((rv: any) => {
if (rv) {
}
);
},
if (this.showDesignMark) {
this.designProgress = rv * 100;
if(rv == 100){
setTimeout(() => {
this.showDesignMark = false
this.designProgress = 0
}, 500);
}
setTimeout(() => {
this.getDesignProcess(num);
}, 500);
}
})
// Https.axiosPost(Https.httpUrls.designProcess, {}).then(
// (rv: any) => {
// if (rv < 1 && this.showDesignMark) {
// this.designProgress = rv * 100;
// setTimeout(() => {
// this.getDesignProcess();
// }, 1000);
// }
// }
// );
},
randomNum(){
this.designRandom = String(Math.floor(Math.random() * 9000000000000000) + 1000000000000000)
},
getBoardId(boardData: any) {
console.log(boardData);
let dataList = boardData.map((v: any) => {
let data: any = {
id: v.resData.id,
@@ -546,6 +615,7 @@ export default defineComponent({
designItemId: design.designItemId,
userGroupId: this.userGroupId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
};
if (this.likeLoading) {
return;
@@ -576,6 +646,7 @@ export default defineComponent({
dislikeDesignCollection(design: any, index: any) {
let data = {
designId: design.designId || this.designId,
designPythonOutfitId:design.designOutfitId,
groupDetailId: design.groupDetailId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
};
@@ -621,25 +692,31 @@ export default defineComponent({
dealHistoryChooseData(data: any, type: any) {
let collectionData = {
moodboardFiles: this.dealViewChooseData(
data.collection.moodBoards
data.collection.moodBoards,"Moodboard"
),
printboardFiles: this.dealViewChooseData(
data.collection.printBoards
data.collection.printBoards,"Printboard"
),
generatePrintFiles: [],
colorBoards: this.dealViewChooseColor(
data.collection.colorBoards
),
skecthboardFiles: this.dealViewChooseData(
data.collection.sketchBoards
sketchboardFiles: this.dealViewChooseData(
data.collection.sketchBoards,"Sketchboard"
),
marketingSketchFiles: this.dealViewChooseData(
data.collection.marketingSketchs
data.collection.marketingSketchs,""
),
moodTemplateId: data.collection.moodTemplateId,
disposeMoodboard: data.collection.moodTemplateId?[{
id:data.collection.moodTemplateId,
imgUrl:data.collection.moodTemplateUrl,
resData:{
name:data.collection.moodTemplateName,
}
}]:[]
};
this.store.commit("setAllBoardDataChoose", collectionData);
this.designCollectionId = this.store.commit(
this.store.commit(
"setDesignCollectionId",
data.collection.collectionId
);
@@ -650,7 +727,7 @@ export default defineComponent({
let data = {
...v,
groupDetailId: v.id,
designItemUrl: v.url,
designItemUrl: v.designOutfitUrl,
};
return data;
}
@@ -663,16 +740,20 @@ export default defineComponent({
},
//统一处理选择组的渲染数据
dealViewChooseData(data: any) {
dealViewChooseData(data: any,str:string) {
if (!data) {
return [];
}
let filesList = data.map((v: any) => {
let newData: any = {
imgUrl: v.url,
imgUrl: v.url?v.url:v.designOutfitUrl,
id: v.id,
status: "done",
resData: v,
type_:{
type1:'material',
type2:v.level1Type
}
};
if (v.level1Type === "Sketchboard") {
newData.pin = v.isPin;
@@ -707,13 +788,17 @@ export default defineComponent({
},
//导出合成图
exportCanvas() {
async exportCanvas() {
let collectionReview: any = document.querySelector(
"#exportNewCoolection"
);
let rightContentImgBlock: any = document.querySelector(
"#right_content_img_block"
);
let a = document.createElement("a");
this.isShowMark = true;
html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
let img:any = []
await html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
(canvas) => {
let blob: any = dataURLtoBlob(
canvas.toDataURL("image/png")
@@ -721,21 +806,18 @@ export default defineComponent({
let allBoardData: any =
this.store.state.UploadFilesModule.allBoardData;
let index = 0;
let img = [
{
img.push({
imgUrl: URL.createObjectURL(blob),
name: "collection.png",
},
];
})
for (let key in allBoardData) {
if (key !== "colorBoards" && key !== "moodTemplateId") {
for (let item of allBoardData[key]) {
let nameTail = item.imgUrl.split(".").pop();
// console.log(nameTail, 666);
let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
let data = {
imgUrl: item.imgUrl,
name:
item.resData.name +
item?.resData?.name +
index +
"." +
nameTail,
@@ -745,12 +827,54 @@ export default defineComponent({
}
}
}
this.downImg(img);
// a.setAttribute('href', URL.createObjectURL(blob));
// a.setAttribute('download', `collection.png`);
// a.click();
}
);
await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
(canvas) => {
let blob: any = dataURLtoBlob(
canvas.toDataURL("image/png")
);
let allBoardData: any =
this.store.state.UploadFilesModule.allBoardData;
let index = 0;
img.push({
imgUrl: URL.createObjectURL(blob),
name: "achievement.png",
},)
this.likeDesignCollectionList.forEach((item:any) => {
let data = {
imgUrl:item.designItemUrl,
name:item.pictureName
}
img.push(data)
});
// for (let key in allBoardData) {
// if (key !== "colorBoards" && key !== "moodTemplateId") {
// for (let item of allBoardData[key]) {
// // console.log(item, 666);
// let nameTail = item.imgUrl.split(".").pop().split("?").shift();
// let data = {
// imgUrl: item.imgUrl,
// name:
// item?.resData?.name +
// index +
// "." +
// nameTail,
// };
// img.push(data);
// index++;
// }
// }
// }
}
);
this.downImg(img);
},
//打开图片详情
@@ -760,8 +884,8 @@ export default defineComponent({
collectionList: any,
type: string
) {
let designDetail: any = this.$refs.designDetail;
design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
let data = {
design: design,
index: index,
@@ -821,7 +945,6 @@ export default defineComponent({
});
promises.push(promise);
}
Promise.all(promises)
.then(() => {
zip.generateAsync({ type: "blob" }).then((content: any) => {
@@ -843,6 +966,7 @@ export default defineComponent({
width: 100%;
height: 100%;
padding: 0 9rem;
overflow: hidden;
.page_content {
position: relative;
.page_content_body {
@@ -951,6 +1075,9 @@ export default defineComponent({
flex: 1;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
.right_top {
padding: 2rem 3.2rem 2rem 1.2rem;
display: flex;
@@ -997,7 +1124,6 @@ export default defineComponent({
}
}
}
.right_content_body {
padding: 0 1.8rem 0 1.2rem;
background: rgba(255, 255, 255, 0.2);
@@ -1015,13 +1141,15 @@ export default defineComponent({
>div{
display: flex;
padding: 0 2.8rem 0 0.9rem;
height: 100%;
align-items: center;
}
.content_img_block {
width: 20.1rem;
height: 37rem;
// height: 29.5rem;
margin-right: 3rem;
margin-bottom: 1rem;
// margin-bottom: 1rem;
display: inline-block;
position: relative;
vertical-align: top;

112
src/views/LibraryPage.vue
View File

@@ -52,6 +52,19 @@
<div class="librart_headr_right">
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
<a-select
ref="select"
v-model:value="sex"
:options="sexList"
@change="sexChange"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
<a-select
ref="select"
v-model:value="designType"
@@ -149,6 +162,8 @@
<a-spin size="large" />
</div>
<!-- 蒙层 end-->
<RobotAssist></RobotAssist>
</div>
</template>
<script lang="ts">
@@ -156,22 +171,25 @@ import { defineComponent ,ref,createVNode} from 'vue'
import HeaderComponent from "@/component/HomePage/Header.vue";
import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
import ModelPlacementMobile from '@/component/LibraryPage/ModelPlacementMobile.vue';
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { Modal,message,Upload} from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex";
import { Https } from "@/tool/https";
export default defineComponent({
components: {
HeaderComponent,
ModelPlacement,
ModelPlacementMobile,
RobotAssist
},
setup() {
let menuList = ref([
{title:'Moodboard',code:'Moodboard',icon:'icon-moban',showChildren:false,children:[]},
{title:'Printboard',code:'Printboard',icon:'icon-dayin-dayinji',showChildren:false,children:[]},
{title:'Sketchboard',code:'SketchboardFirst',icon:'icon-sumiao',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
{title:'Market Sketch',code:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]},
// {title:'Market Sketch',code:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]},
{title:'Mannequin',code:'Models',icon:'icon-mote',showChildren:false,children:[]},
])
@@ -179,27 +197,12 @@ export default defineComponent({
let selectCode:any = ref('Moodboard')
let searchPictureName = ref('')
let designType:any = ref('Outwear')
let disignTypeList = [
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
let sex:any = ref('Outwear')
let sexList:any = [
]
let disignTypeList:any = [
]
let imgList = ref([])
let currentPage:any = ref(1)
@@ -212,11 +215,14 @@ export default defineComponent({
let currentUploadFileNum:any = ref(0) //当次上传文件数量
let isShowMark:any = ref(false) //蒙层
let selectSingleImg:any = ref({}) //保存单个图片数据
let store = useStore();
return {
menuList,
selectImgList,
selectCode,
searchPictureName,
sexList,
sex,
disignTypeList,
designType,
imgList,
@@ -229,14 +235,57 @@ export default defineComponent({
uploadUrl,
currentUploadFileNum,
isShowMark,
selectSingleImg
selectSingleImg,
store
}
},
mounted(){
this.uploadUrl = getUploadUrl()
this.getLibraryList()
this.getSex()
this.getPosition()
},
methods:{
getSex(){
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.sex = arr[0].value
this.sexList = arr
}
})
},
async getPosition(){
let params
if(this.sex == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
}
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.designType = arr[0].value
this.disignTypeList = arr
// this.workspaceItem.position = this.singleTypeList[0].label
}
})
},
selectMenuItem(menu:any,index:any){
if(menu.children?.length){ //证明是有子菜单
menu.showChildren = !menu.showChildren
@@ -246,6 +295,7 @@ export default defineComponent({
this.total = 0,
this.searchPictureName = ''
this.imgList = [],
this.sex = 'Female',
this.designType = 'Outwear',
this.selectImgList = []
this.selectSingleImg = {}
@@ -253,7 +303,9 @@ export default defineComponent({
}
},
sexChange(){
this.getPosition()
},
handleChange(){
this.getLibraryList()
},
@@ -418,6 +470,8 @@ export default defineComponent({
file:event.file,
level1Type:this.selectCode,
level2Type:designType,
sex:this.sex,
modelType:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.isShowMark = true
@@ -443,6 +497,7 @@ export default defineComponent({
level1Type:this.selectCode,
level2Type:designType,
page:this.currentPage,
modelSex:this.sex?this.sex:'',
pictureName:this.searchPictureName,
size:this.pageSize,
}
@@ -479,6 +534,7 @@ export default defineComponent({
<style lang="less">
.library_page {
width: 100%;
overflow: hidden;
height: 100%;
padding: 0 9rem;
.page_content {
@@ -626,11 +682,13 @@ export default defineComponent({
.librart_headr_right{
display: flex;
align-items: center;
.select_block{
background: #FFFFFF;
// background: #FFFFFF;
color: #1A1A1A !important;
.ant-select{
}
.icon-xiala{
color: #1A1A1A !important;
}

5
src/views/LoginPage.vue
View File

@@ -140,7 +140,10 @@
<!-- 邮箱登录 end -->
<div class="login_content_right">
<img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt="">
<img
src="@/assets/images/loginPage/aida_logo_centent.jpg"
/>
<!-- <img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt=""> -->
</div>
</div>

5
vue.config.js
View File

@@ -1,7 +1,6 @@
const {defineConfig} = require('@vue/cli-service')
const path = require('path');
const webpack = require('webpack')
module.exports = defineConfig({
transpileDependencies: ['vuetify'],
@@ -21,7 +20,7 @@ module.exports = defineConfig({
// changeOrigin: true, //是否允许跨越
// }
'/api':{
target:'http://192.168.1.9:5567',
target:'http://18.167.251.121:10086',
changeOrigin:true,
},
'/robot':{
@@ -31,7 +30,7 @@ module.exports = defineConfig({
'^/robot': 'api', // api替换成api
}
},
'xuPei':{
'/xuPei':{
target:'http://192.168.1.10:5567',
changeOrigin:true,
pathRewrite:{