调整部分bug
This commit is contained in:
X1627315083
262
src/component/home/tools/deReconstruction/index.vue
Normal file
262
src/component/home/tools/deReconstruction/index.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="deReconstruction">
|
||||
<div class="selectSektch itemBox">
|
||||
<div class="type">
|
||||
<a-select
|
||||
v-model:value="segmentationType"
|
||||
show-search
|
||||
:allowClear="false"
|
||||
style="width: 100%"
|
||||
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" :segmentationType="segmentationType" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
|
||||
</div>
|
||||
<div class="canvas itemBox">
|
||||
<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
|
||||
</div>
|
||||
<div class="finished itemBox">
|
||||
<div class="btnTop">
|
||||
<div class="gallery_btn" @click="getCanvasImg">Generate line</div>
|
||||
<div v-show="!generateImg?.[0]?.isLike" 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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="btnBottom" @click="getCanvasData">
|
||||
<div class="gallery_btn">Download</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, inject} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import selectList from '@/component/DetailCopy/detailLeft/module/selectList.vue'
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import canvasBox from "./canvas/index.vue";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
selectList,sketchCategory,canvasBox
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
sketchCatecoryList:computed(()=>{
|
||||
return store.state.Workspace.probjects.positionList
|
||||
}),
|
||||
segmentationType:'product',
|
||||
generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
|
||||
})
|
||||
const setIsShowMark:any = inject('setIsShowMark')
|
||||
const dataDom = reactive({
|
||||
canvasBox:null as any,
|
||||
})
|
||||
const selectImgItem = (data:any)=>{
|
||||
if(!data.designType){
|
||||
canvasAddImg(data)
|
||||
}else{
|
||||
// data.minioUrl = data.url
|
||||
// dataDom.canvasBox.addImage(data)
|
||||
getSegmentation(data)
|
||||
}
|
||||
}
|
||||
const canvasAddImg = (list:any)=>{
|
||||
list.segmentedImages.forEach((url:any) => {
|
||||
list.imgUrl = url
|
||||
dataDom.canvasBox.addImage(list)
|
||||
});
|
||||
}
|
||||
const getSegmentation = (value:any)=>{
|
||||
let param = new FormData();
|
||||
param.append('id',value.id)
|
||||
param.append('file','')
|
||||
param.append('type',data.segmentationType)
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.imageSegmentation,param,config)
|
||||
.then((rv:any) => {
|
||||
// console.log(rv);
|
||||
canvasAddImg(rv[0])
|
||||
}
|
||||
).catch(rv=>{
|
||||
})
|
||||
}
|
||||
const openSetData = ()=>{
|
||||
dataDom.canvasBox.openSetData()
|
||||
}
|
||||
const getCanvasImg = ()=>{
|
||||
dataDom.canvasBox.getData()
|
||||
}
|
||||
const setGenerateImg = (base64:any)=>{
|
||||
let value = {
|
||||
"collagePicture": base64,
|
||||
"gender": store.state.Workspace.probjects.sex,
|
||||
"projectId": store.state.Workspace.probjects.id
|
||||
}
|
||||
setIsShowMark(true)
|
||||
Https.axiosPost(Https.httpUrls.genSketchRecon,value).then((rv)=>{
|
||||
if(rv){
|
||||
data.sketchCatecoryList.forEach((item:any)=>{
|
||||
if(item.value == rv.category){
|
||||
rv.categoryValue = item.value
|
||||
rv.category = item.name
|
||||
}
|
||||
})
|
||||
rv.isLike = false
|
||||
let value = {
|
||||
list: [rv],
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit('setDeReconstruction',value)
|
||||
setIsShowMark(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
const generateLike = (str:string)=>{
|
||||
if(data.generateImg[0].id == -1)return
|
||||
if(str == 'like'){
|
||||
let value={
|
||||
"gender": store.state.Workspace.probjects.sex,
|
||||
"generateDetailId": data.generateImg[0].id,
|
||||
"level1Type": "Sketchboard",
|
||||
"level2Type": data.generateImg[0].categoryValue,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.generateLike,value).then((rv)=>{
|
||||
if(rv){
|
||||
data.generateImg[0].isLike = true
|
||||
}
|
||||
})
|
||||
}else{
|
||||
let value = {
|
||||
"generateDetailId": data.generateImg[0].id,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.generateDislike, {params:value}).then(
|
||||
(rv) => {
|
||||
data.generateImg[0].isLike = false
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
}
|
||||
const setCanvas = (str:string)=>{
|
||||
dataDom.canvasBox.setCanvas(str)
|
||||
}
|
||||
const getCanvasData = ()=>{
|
||||
let data = dataDom.canvasBox.getCanvasData()
|
||||
return data
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
selectImgItem,
|
||||
openSetData,
|
||||
getCanvasImg,
|
||||
setGenerateImg,
|
||||
generateLike,
|
||||
getCanvasData,
|
||||
setCanvas,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.deReconstruction{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
> .itemBox{
|
||||
margin-right: 2rem;
|
||||
padding: 2rem;
|
||||
background: #f7f8fa;
|
||||
border-radius: 3rem;
|
||||
// flex: 1;
|
||||
&.selectSektch{
|
||||
width: 37rem;
|
||||
flex-shrink: 0;
|
||||
> .type{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> :deep(.ant-select){
|
||||
margin: 1rem 0;
|
||||
.ant-select-selector{
|
||||
border-radius: 2rem;
|
||||
}
|
||||
}
|
||||
>label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>div{
|
||||
font-size: 2rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.canvas{
|
||||
flex: 1;
|
||||
}
|
||||
&.finished{
|
||||
width: 58rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .btnTop{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> .icon{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
> .content{
|
||||
flex: 1;
|
||||
// overflow: hidden;
|
||||
margin: 10rem 0;
|
||||
position: relative;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> .btnBottom{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .itemBox:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user