页面调整
This commit is contained in:
X1627315083
@@ -17,11 +17,11 @@
|
||||
<div class="generalModel_state_item smail" style="margin-right: 0">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="sex"
|
||||
v-model:value="sexId"
|
||||
:options="sexList"
|
||||
size="large"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
style="width:10rem"
|
||||
:fieldNames="{ label: 'name', value: 'id' }"
|
||||
style="width:13rem"
|
||||
@change="sexChange"
|
||||
>
|
||||
<template #suffixIcon
|
||||
@@ -37,7 +37,7 @@
|
||||
</selectList>
|
||||
</div>
|
||||
<div class="canvas itemBox">
|
||||
<canvasBox @setGenerateImg="setGenerateImg" @setCanvasJSON="setCanvasJSON" ref="canvasBox"></canvasBox>
|
||||
<canvasBox @setGenerateImg="setGenerateImg" :selectSexAge="selectSexAge" @setCanvasJSON="setCanvasJSON" ref="canvasBox"></canvasBox>
|
||||
<!-- <canvasUpload :config="ceditorConfig" clothingImageUrl="https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20250608%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250608T161025Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=a4374c0954d11c2490ef3b86a1924cf6d423ed8ac56023b3c3ccabcdf0672620"></canvasUpload> -->
|
||||
</div>
|
||||
<div class="finished itemBox">
|
||||
@@ -48,7 +48,7 @@
|
||||
</div>
|
||||
<div class="content">
|
||||
<img v-if="generateImg?.[0]?.url" :src="generateImg?.[0]?.url" alt="">
|
||||
<sketchCategory v-if="generateImg?.[0]?.url" v-model:disignTypeList="sketchCatecoryList" :item="generateImg[0]" :isSpread="false"></sketchCategory>
|
||||
<sketchCategory v-if="generateImg?.[0]?.url" v-model:disignTypeList="sketchCatecoryList" :item="generateImg[0]" :isSetSketchCategory="true" :isSpread="false"></sketchCategory>
|
||||
</div>
|
||||
<div class="btnBottom" @click="getCanvasData">
|
||||
<div class="gallery_btn">{{ $t('DeReconstruction.Download') }}</div>
|
||||
@@ -61,6 +61,7 @@ import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, react
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { downloadIamge,getMinioUrl } from "@/tool/util";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import selectList from '@/component/DetailCopy/detailLeft/module/selectList.vue'
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
@@ -76,37 +77,49 @@ export default defineComponent({
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const {t} = useI18n()
|
||||
const data = reactive({
|
||||
sketchCatecoryList:computed(()=>{
|
||||
return store.state.Workspace.probjects.positionList
|
||||
}),
|
||||
sketchCatecoryList:[],
|
||||
segmentationType:'product',
|
||||
segmentationTypeList:[{value:'product',name:'product'},{value:'sketch',name:'sketch'}],
|
||||
generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
sexList:[
|
||||
|
||||
],
|
||||
// sexList:computed(()=>store.state.UserHabit.sex.value),
|
||||
femalePosition:computed(()=>store.state.UserHabit.FemalePosition),//男性衣服位置
|
||||
malePosition:computed(()=>store.state.UserHabit.MalePosition),//女性衣服位置
|
||||
sex:'Male',
|
||||
sexId:1,
|
||||
ceditorConfig:{
|
||||
width: 800,
|
||||
height: 600,
|
||||
backgroundColor: "#f8f8f8",
|
||||
},
|
||||
defaultModel:'',
|
||||
selectSexAge:{},
|
||||
})
|
||||
const createProbject:any = inject('createProbject',()=>{}) as any
|
||||
const setIsShowMark:any = inject('setIsShowMark')
|
||||
const dataDom = reactive({
|
||||
canvasBox:null as any,
|
||||
})
|
||||
const selectImgItem = (data:any)=>{
|
||||
console.log(data)
|
||||
const selectImgItem = async (value:any)=>{
|
||||
// getSegmentation(data)
|
||||
getSegmentation(data)
|
||||
if(!data.selectObject?.id)await createProbject()
|
||||
getSegmentation(value)
|
||||
|
||||
}
|
||||
const canvasAddImg = (list:any)=>{
|
||||
console.log(list)
|
||||
list.segmentedImages.forEach((url:any) => {
|
||||
list.imgUrl = url
|
||||
dataDom.canvasBox.addImage({url})
|
||||
});
|
||||
}
|
||||
const getSegmentation = (value:any)=>{
|
||||
console.log(value)
|
||||
let segmentationType = ''
|
||||
if(value.designType == "Library"){
|
||||
segmentationType = 'sketch'
|
||||
@@ -191,7 +204,13 @@ export default defineComponent({
|
||||
}
|
||||
const setCanvasJSON = (canvasJSON)=>{
|
||||
if(!canvasJSON)return
|
||||
let blob = new Blob([canvasJSON], { type: "application/json" });
|
||||
let canvasData = JSON.parse(canvasJSON)
|
||||
console.log(canvasData)
|
||||
canvasData.canvas.objects.forEach((objectsItem:any) => {
|
||||
if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
|
||||
|
||||
});
|
||||
let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
|
||||
let formData = new FormData();
|
||||
formData.append("file", blob, "data.json");
|
||||
formData.append("module", "deReconstruction");
|
||||
@@ -201,7 +220,6 @@ export default defineComponent({
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
|
||||
(rv) => {
|
||||
console.log(rv)
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -209,9 +227,39 @@ export default defineComponent({
|
||||
dataDom.canvasBox.setCanvas(str)
|
||||
}
|
||||
const getCanvasData = ()=>{
|
||||
let data = dataDom.canvasBox.getCanvasData()
|
||||
return data
|
||||
downloadIamge(data.generateImg[0].url,'downloadIamge')
|
||||
}
|
||||
const sexChange = ()=>{
|
||||
data.selectSexAge = data.sexList.filter((item)=>item.id == data.sexId)[0]
|
||||
store.commit('setProbject',{sex:data.selectSexAge.value})
|
||||
if(data.selectSexAge.value == 'Male'){
|
||||
data.sketchCatecoryList = data.malePosition
|
||||
}else{
|
||||
data.sketchCatecoryList = data.femalePosition
|
||||
}
|
||||
if(dataDom.canvasBox?.canvasLoad)dataDom.canvasBox.changeFixedImage()
|
||||
}
|
||||
onMounted(()=>{
|
||||
let sexList = store.state.UserHabit.sex.value
|
||||
let id = 0
|
||||
data.sexList = []
|
||||
sexList.forEach((item:any,index) => {
|
||||
let obj = {
|
||||
age:'Adult',
|
||||
name:item.name,
|
||||
value:item.value,
|
||||
id:index + 1,
|
||||
} as any
|
||||
id = index+1;
|
||||
data.sexList.push(obj)
|
||||
});
|
||||
data.sexList.push({age:'Child',name:t('DeReconstruction.Girls'),value:'Female',id:id+=1})
|
||||
data.sexList.push({age:'Child',name:t('DeReconstruction.Boys'),value:'Male',id:id+=1})
|
||||
data.sex = data.sexList[0].value
|
||||
data.selectSexAge = data.sexList[0]
|
||||
data.sexId = 1
|
||||
sexChange()
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
@@ -223,6 +271,7 @@ export default defineComponent({
|
||||
getCanvasData,
|
||||
setCanvas,
|
||||
setCanvasJSON,
|
||||
sexChange,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
|
||||
Reference in New Issue
Block a user