合并画布,部分样式调整

This commit is contained in:
X1627315083
2025-06-26 15:41:08 +08:00
parent fd05c70937
commit fc6d8d4c8d
75 changed files with 1772 additions and 672 deletions

View File

@@ -1,7 +1,7 @@
<template>
<div class="deReconstruction">
<div class="selectSektch itemBox">
<div class="type">
<!-- <div class="type">
<a-select
v-model:value="segmentationType"
show-search
@@ -10,24 +10,39 @@
placeholder="Please select"
:options="[{value:'product',label:'product'},{value:'sketch',label:'sketch'}]"
></a-select>
<!-- <label>
<div class="text">product</div>
<input type="radio" value="product" v-model="segmentationType">
</label>
<label>
<div class="text">sketch</div>
<input type="radio" value="sketch" v-model="segmentationType">
</label> -->
</div>
<selectList @selectImgItem="selectImgItem" :deReconstructionList="segmentationTypeList" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
</div> -->
<selectList @selectImgItem="selectImgItem" :deReconstructionList="segmentationTypeList" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList">
<template v-slot:selectSex>
<div class="generalModel_state" style="margin-left: auto">
<div class="generalModel_state_item smail" style="margin-right: 0">
<a-select
ref="select"
v-model:value="sex"
:options="sexList"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
style="width:10rem"
@change="sexChange"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #000"
></span
></template>
</a-select>
</div>
</div>
</template>
</selectList>
</div>
<div class="canvas itemBox">
<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
<canvasBox @setGenerateImg="setGenerateImg" @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">
<div class="btnTop">
<div class="gallery_btn" @click="getCanvasImg">Generate line</div>
<div class="gallery_btn" @click="getCanvasImg">{{ $t('DeReconstruction.GenerateLineDrawing') }}</div>
<div v-show="!generateImg?.[0]?.isLike && generateImg" class="icon iconfont icon-jushoucang icon_like" @click="generateLike('like')"></div>
<div v-show="generateImg?.[0]?.isLike" class="icon iconfont icon-jushoucanggift" @click="generateLike('noLike')"></div>
</div>
@@ -36,7 +51,7 @@
<sketchCategory v-if="generateImg?.[0]?.url" v-model:disignTypeList="sketchCatecoryList" :item="generateImg[0]" :isSpread="false"></sketchCategory>
</div>
<div class="btnBottom" @click="getCanvasData">
<div class="gallery_btn">Download</div>
<div class="gallery_btn">{{ $t('DeReconstruction.Download') }}</div>
</div>
</div>
</div>
@@ -80,25 +95,30 @@ export default defineComponent({
canvasBox:null as any,
})
const selectImgItem = (data:any)=>{
if(!data.designType){
canvasAddImg(data)
}else{
// data.minioUrl = data.url
// dataDom.canvasBox.addImage(data)
getSegmentation(data)
}
console.log(data)
// getSegmentation(data)
getSegmentation(data)
}
const canvasAddImg = (list:any)=>{
list.segmentedImages.forEach((url:any) => {
list.imgUrl = url
dataDom.canvasBox.addImage(list)
dataDom.canvasBox.addImage({url})
});
}
const getSegmentation = (value:any)=>{
let segmentationType = ''
if(value.designType == "Library"){
segmentationType = 'sketch'
}else{
segmentationType = value.categoryValue
}
let param = new FormData();
param.append('id',value.id)
param.append('file','')
param.append('type',data.segmentationType)
param.append('type',segmentationType)
let sourceType = value.designType || 'Upload'
param.append('sourceType',sourceType)
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.imageSegmentation,param,config)
.then((rv:any) => {
@@ -139,6 +159,7 @@ export default defineComponent({
setIsShowMark(false)
}
})
}
const generateLike = (str:string)=>{
if(data.generateImg[0].id == -1)return
@@ -168,6 +189,22 @@ export default defineComponent({
});
}
}
const setCanvasJSON = (canvasJSON)=>{
if(!canvasJSON)return
let blob = new Blob([canvasJSON], { type: "application/json" });
let formData = new FormData();
formData.append("file", blob, "data.json");
formData.append("module", "deReconstruction");
formData.append("projectId", store.state.Workspace.probjects.id)
let config = {
headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
};
Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
(rv) => {
console.log(rv)
}
);
}
const setCanvas = (str:string)=>{
dataDom.canvasBox.setCanvas(str)
}
@@ -185,6 +222,7 @@ export default defineComponent({
generateLike,
getCanvasData,
setCanvas,
setCanvasJSON,
}
},
provide() {
@@ -237,6 +275,8 @@ export default defineComponent({
width: 45rem;
// width: 58rem;
display: flex;
height: 100%;
overflow: hidden;
flex-direction: column;
> .btnTop{
display: flex;
@@ -256,8 +296,9 @@ export default defineComponent({
> .content{
flex: 1;
// overflow: hidden;
margin: 10rem 0;
margin: 2rem 0;
position: relative;
overflow: hidden;
> img{
width: 100%;
height: 100%;