2025-04-01 15:25:15 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="toProduct">
|
|
|
|
|
<div class="productImg_content">
|
|
|
|
|
<!-- <div class="modal_title_text">
|
|
|
|
|
<div>{{$t('ProductImg.Finalize')}}</div>
|
|
|
|
|
<div class="modal_title_text_intro"></div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="productImg_content_bottom">
|
|
|
|
|
<div class="productImg_left" :class="{active:button.left}">
|
|
|
|
|
<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
|
|
|
|
|
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
|
2025-04-09 14:09:19 +08:00
|
|
|
<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
|
2025-04-01 15:25:15 +08:00
|
|
|
<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
|
|
|
|
|
<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[item?.isChecked?'active':'']">
|
|
|
|
|
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content_item_imgBox_itemImg" v-for="(file, index) in fileList[productimgMenu.value]" :key="file">
|
|
|
|
|
<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
|
|
|
|
|
<a-spin
|
|
|
|
|
:indicator="indicator"
|
|
|
|
|
tip="Uploading..."
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="content_item_imgBox_itemImg"
|
|
|
|
|
v-show="file?.status === 'done'"
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
<img @click="setGenerate(file)" :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
|
|
|
|
|
<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
|
|
|
|
|
|
|
|
|
|
<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
|
|
|
|
|
<i class="fi fi-rr-trash"></i>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="upload_file_item upload_component">
|
|
|
|
|
<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
|
|
|
|
|
<a-upload
|
|
|
|
|
:action="uploadUrl + '/api/history/toProductImageElementUpload'"
|
|
|
|
|
list-type="picture-card"
|
|
|
|
|
:capture="null"
|
|
|
|
|
:data="{
|
|
|
|
|
...upload,
|
|
|
|
|
}"
|
|
|
|
|
:headers="{ Authorization: token }"
|
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
|
v-model:file-list="fileList[productimgMenu.value]"
|
|
|
|
|
:multiple="true"
|
|
|
|
|
:maxCount="8"
|
|
|
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
|
|
|
@change="(file) => fileUploadChange(file)"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
class="upload_tip_block"
|
|
|
|
|
>
|
|
|
|
|
<i class="fi fi-br-upload"></i>
|
|
|
|
|
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
|
|
|
|
</div>
|
|
|
|
|
</a-upload>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2025-04-09 14:09:19 +08:00
|
|
|
|
|
|
|
|
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
|
|
|
|
<span>{{$t('ProductImg.Similarity')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_similarity">
|
|
|
|
|
<a-slider class="system_silder"
|
|
|
|
|
v-model:value="similarity"
|
|
|
|
|
@afterChange="setSimilarity"
|
|
|
|
|
:tooltipVisible="false"
|
|
|
|
|
:step="5"
|
|
|
|
|
>
|
|
|
|
|
</a-slider>
|
|
|
|
|
<input type="number" readonly v-model="similarity">
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
|
|
|
|
<span>{{$t('ProductImg.RelightDirection')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
|
|
|
|
|
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
|
|
|
|
<span>{{$t('ProductImg.Highlight')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
|
|
|
|
|
<a-slider class="system_silder"
|
|
|
|
|
v-model:value="brightenValue"
|
|
|
|
|
:tooltipVisible="false"
|
|
|
|
|
:max="3"
|
|
|
|
|
:min="1"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
>
|
|
|
|
|
</a-slider>
|
|
|
|
|
<input type="number" readonly v-model="brightenValue">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input_border productImg_content_item_generate">
|
|
|
|
|
<div class="input_box">
|
|
|
|
|
<div class="input_box_btnBox">
|
|
|
|
|
<!-- <input
|
|
|
|
|
class="search_input"
|
|
|
|
|
:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
|
|
|
|
|
v-model="searchName[productimgMenu.value]"
|
|
|
|
|
@keydown.enter="getPrductimg()"
|
|
|
|
|
/> -->
|
|
|
|
|
<textarea
|
|
|
|
|
class="textarea"
|
|
|
|
|
@input="ifMaximumLength"
|
|
|
|
|
:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
|
|
|
|
|
@keydown.enter.prevent="getPrductimg()"
|
|
|
|
|
v-model="searchName[productimgMenu.value]"
|
|
|
|
|
></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-04-01 15:25:15 +08:00
|
|
|
<!-- <div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
|
|
|
|
|
<div class="productImg_content_item_imgBox generalScroll upload_item">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="productImg_content_item_generate_btn input_border">
|
|
|
|
|
<div class="input_box">
|
|
|
|
|
<div v-show="!isProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
|
|
|
|
{{ $t('Generate.Generate') }}
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="isProductimg && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
|
|
|
|
|
<i class="fi fi-br-loading"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="remProductimg" @click="removeProductimg" class="generage_btn started_btn">
|
|
|
|
|
{{$t('Generate.Close')}}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="productImg_right">
|
|
|
|
|
<div class="productImg_right_item_box generalScroll">
|
|
|
|
|
<div class="content_header_left">
|
|
|
|
|
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
2025-04-09 14:09:19 +08:00
|
|
|
{{ $t('ProductImg.SelectedDesign') }}
|
2025-04-01 15:25:15 +08:00
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="productImg_right_item" v-for="item,index in generateList" :key="item"> -->
|
|
|
|
|
<!-- <div class="productImg_right_item_imgBox" v-if="item?.status != 'Success' && !item.imgUrl">
|
|
|
|
|
<img class="loadingImg" src="@/assets/images/homePage/loading.gif" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="productImg_right_item_imgBox" v-else>
|
|
|
|
|
<img :src="item.url" alt="">
|
|
|
|
|
<div class="productImg_right_item_iconRight">
|
|
|
|
|
<div class="productImg_right_item_like" @click.stop="likeFile(item,'like',index)">
|
|
|
|
|
<i class="fi fi-rr-heart"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="productImg_right_item_iconLeft" >
|
|
|
|
|
<div class="productImg_right_item_scale" @click.stop="setScaleImage(generateList,index,true)">
|
|
|
|
|
<i class="fi fi-bs-expand-arrows-alt"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="item.resultType != 'Relight'" class="productImg_right_item_men" @click.stop="setMenuShow(item)">
|
|
|
|
|
<i class="fi fi-rr-circle-ellipsis"></i>
|
|
|
|
|
<ul v-show="item.menuShow">
|
|
|
|
|
<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="content">
|
2025-04-23 09:39:24 +08:00
|
|
|
<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :isDelete="false" :isLike="true" :list="likeList[productimgMenu.value]"></generalDrag>
|
2025-04-01 15:25:15 +08:00
|
|
|
</div>
|
|
|
|
|
<!-- </div> -->
|
2025-04-09 14:09:19 +08:00
|
|
|
|
|
|
|
|
<!-- <div class="btnLeft" @click="setSize('left')">
|
2025-04-01 15:25:15 +08:00
|
|
|
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
|
2025-04-09 14:09:19 +08:00
|
|
|
</div> -->
|
2025-04-01 15:25:15 +08:00
|
|
|
<div class="btnRight" @click="setSize('right')">
|
|
|
|
|
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="productImg_right" :class="{active:button.right}">
|
|
|
|
|
<div class="productImg_right_item_box right generalScroll">
|
|
|
|
|
<div class="content_header_left">
|
|
|
|
|
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
2025-04-09 14:09:19 +08:00
|
|
|
{{ $t('ProductImg.productImageDrafts') }}
|
2025-04-01 15:25:15 +08:00
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<generalDrag ref="generalDragRight" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
|
|
|
|
|
</div>
|
2025-04-09 14:09:19 +08:00
|
|
|
<!-- <div class="mark_loading" v-show="isShowMark">
|
|
|
|
|
<a-spin size="large" />
|
|
|
|
|
</div> -->
|
2025-04-01 15:25:15 +08:00
|
|
|
<!-- <div class="productImg_right_item" v-for="item,index in likeList[productimgMenu.value]" :key="item" >
|
|
|
|
|
<img :src="item.url" alt="">
|
|
|
|
|
<div class="productImg_right_item_iconRight">
|
|
|
|
|
<div class="productImg_right_item_like" @click.stop="likeFile(item,'noLike',index)">
|
|
|
|
|
<i class="fi fi-sr-heart"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="productImg_right_item_iconLeft">
|
|
|
|
|
<div class="productImg_right_item_scale" @click.stop="setScaleImage(likeList[productimgMenu.value],index,false)">
|
|
|
|
|
<i class="fi fi-bs-expand-arrows-alt"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="item.resultType != 'Relight'" class="productImg_right_item_menu" :title="$t('ProductImg.moreTitle')" @click.stop="setMenuShow(item)">
|
|
|
|
|
<i class="fi fi-rr-circle-ellipsis"></i>
|
|
|
|
|
<ul v-show="item.menuShow">
|
|
|
|
|
<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<scaleImage ref="scaleImage"
|
|
|
|
|
:productData="{
|
|
|
|
|
upload:upload,
|
|
|
|
|
similarity:similarity,
|
|
|
|
|
brightenValue:brightenValue,
|
|
|
|
|
RelightDirection:RelightDirection,
|
|
|
|
|
RelightDirectionList:RelightDirectionList,
|
|
|
|
|
}"
|
|
|
|
|
:isProductimg="true"></scaleImage>
|
|
|
|
|
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
|
|
|
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
|
|
|
|
|
import { Https } from "@/tool/https";
|
|
|
|
|
import { getCookie,setCookie } from "@/tool/cookie";
|
|
|
|
|
// import domTurnImg from '@/tool/domTurnImg'
|
|
|
|
|
import { getUploadUrl,isMoible } from "@/tool/util";
|
|
|
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
import { Upload,message,Modal } from 'ant-design-vue';
|
|
|
|
|
import { downloadIamge } from "@/tool/util";
|
|
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
|
import { useStore } from "vuex";
|
|
|
|
|
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
|
|
|
|
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
|
|
|
|
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
|
|
|
|
import generalDrag from '@/component/modules/generalDrag.vue';
|
|
|
|
|
import { List } from "echarts";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
components:{
|
|
|
|
|
scaleImage,
|
|
|
|
|
generalMenu,UpgradePlan,generalDrag
|
|
|
|
|
},
|
|
|
|
|
props: ['setTask','productimgMenu'],
|
|
|
|
|
setup(props,{emit}) {
|
|
|
|
|
const store = useStore();
|
|
|
|
|
let userDetail:any= computed(()=>{
|
|
|
|
|
return store.state.UserHabit.userDetail
|
|
|
|
|
})
|
|
|
|
|
const {t} = useI18n()
|
|
|
|
|
const upload:any = ref({})
|
|
|
|
|
let driver__:any = computed(()=>{
|
|
|
|
|
return store.state.Guide.guide
|
|
|
|
|
})
|
|
|
|
|
let productImgData:any = reactive({
|
|
|
|
|
isShowMark:false,
|
|
|
|
|
fileList:{},
|
|
|
|
|
searchName:{
|
|
|
|
|
ToProductImage:'',
|
|
|
|
|
Relight:'',
|
|
|
|
|
},
|
|
|
|
|
remProductimg:false,//是否出现取消按钮
|
|
|
|
|
isProductimg:false,//开始生成
|
|
|
|
|
selectProductimgList:[],
|
|
|
|
|
generateList:[],
|
|
|
|
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
|
|
|
likeList:{
|
|
|
|
|
ToProductImage:computed(()=>store.state.HomeStoreModule.toProductImageList),
|
|
|
|
|
Relight:computed(()=>store.state.HomeStoreModule.relightList),
|
|
|
|
|
} as any,
|
|
|
|
|
similarity:30,
|
|
|
|
|
brightenValue:1,
|
|
|
|
|
UpgradePlan,
|
|
|
|
|
button:{
|
|
|
|
|
left:false,
|
|
|
|
|
right:false,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const productImgDom = reactive({
|
|
|
|
|
generalDragLeft:null as any,
|
|
|
|
|
generalDragRight:null as any,
|
|
|
|
|
})
|
|
|
|
|
let productimgMenuList = ref([
|
|
|
|
|
{
|
|
|
|
|
value:'ToProductImage',
|
|
|
|
|
label:useI18n().t('ProductImg.ProductImage')
|
|
|
|
|
},{
|
|
|
|
|
value:'Relight',
|
|
|
|
|
label:useI18n().t('ProductImg.Relight')
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
// let productimgMenu:any = ref(productimgMenuList.value[0])
|
|
|
|
|
let RelightDirectionList = ref([
|
|
|
|
|
{
|
|
|
|
|
value:'Right Light',
|
|
|
|
|
label:useI18n().t('ProductImg.RightLight')
|
|
|
|
|
},{
|
|
|
|
|
value:'Left Light',
|
|
|
|
|
label:useI18n().t('ProductImg.LeftLight')
|
|
|
|
|
},{
|
|
|
|
|
value:'Top Light',
|
|
|
|
|
label:useI18n().t('ProductImg.TopLight')
|
|
|
|
|
},{
|
|
|
|
|
value:'Bottom Light',
|
|
|
|
|
label:useI18n().t('ProductImg.BottomLight')
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
let RelightDirection:any = ref(RelightDirectionList.value[0].value)
|
|
|
|
|
let selectList:any = ref({})
|
|
|
|
|
// let likeDesignCollectionList: any = computed(() => {
|
|
|
|
|
// return store.state.HomeStoreModule.likeDesignCollectionList;
|
|
|
|
|
// });
|
|
|
|
|
let selectDesignList: any = computed(() => {
|
|
|
|
|
return store.state.UploadFilesModule.modularData;
|
|
|
|
|
});
|
|
|
|
|
let userlikeGroupId = 0
|
|
|
|
|
const openSetData = ()=>{
|
2025-04-09 14:09:19 +08:00
|
|
|
// cleardata()
|
2025-04-01 15:25:15 +08:00
|
|
|
if(props.productimgMenu.value == 'ToProductImage'){
|
|
|
|
|
selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(selectDesignList.value.design.likeData))
|
|
|
|
|
}else if(props.productimgMenu.value == 'Relight'){
|
|
|
|
|
selectList.value['Relight'] = JSON.parse(JSON.stringify(selectDesignList.value.toProduct))
|
|
|
|
|
}
|
|
|
|
|
upload.value = {
|
|
|
|
|
projectId:productImgData.selectObject.id
|
|
|
|
|
}
|
|
|
|
|
userlikeGroupId = selectDesignList.value.userlikeGroupId
|
|
|
|
|
// getLikeProductImage(selectDesignList.value.userlikeGroupId)
|
2025-04-09 14:09:19 +08:00
|
|
|
productImgDom.generalDragLeft.setItemPosition()
|
2025-04-23 09:39:24 +08:00
|
|
|
|
|
|
|
|
setCloudImg()
|
|
|
|
|
}
|
|
|
|
|
const setCloudImg = ()=>{
|
|
|
|
|
let arr = store.state.UploadFilesModule.cloudList
|
|
|
|
|
if(props.productimgMenu.value == 'ToProductImage'){
|
|
|
|
|
let list = JSON.parse(JSON.stringify(arr.toProduct)) || []
|
|
|
|
|
productImgData.generateList.unshift(...list)
|
|
|
|
|
store.commit('clearCloudList','ToProductImage')
|
|
|
|
|
}else if(props.productimgMenu.value == 'Relight'){
|
|
|
|
|
let list = JSON.parse(JSON.stringify(arr.relight)) || []
|
|
|
|
|
productImgData.generateList.unshift(...list)
|
|
|
|
|
store.commit('clearCloudList','relight')
|
|
|
|
|
}
|
|
|
|
|
|
2025-04-01 15:25:15 +08:00
|
|
|
}
|
|
|
|
|
let setproduct = (value:any)=>{
|
|
|
|
|
// props.productimgMenu = value
|
|
|
|
|
}
|
|
|
|
|
let getLikeProductImage = (userGroupId:any)=>{
|
|
|
|
|
let data = {
|
|
|
|
|
userLikeGroupId:userGroupId,
|
|
|
|
|
type:props.productimgMenu.value
|
|
|
|
|
}
|
|
|
|
|
Https.axiosPost(Https.httpUrls.productImageLikeList, data).then(
|
|
|
|
|
(rv) => {
|
|
|
|
|
rv.forEach((item:any) => {
|
|
|
|
|
item.imgUrl = item.url
|
|
|
|
|
});
|
|
|
|
|
let value = {
|
|
|
|
|
list: rv,
|
|
|
|
|
str:'add',
|
|
|
|
|
index:-1,
|
|
|
|
|
}
|
|
|
|
|
if(props.productimgMenu.value == 'ToProductImage'){
|
|
|
|
|
store.commit("setToProductImage", value);
|
|
|
|
|
}else{
|
|
|
|
|
store.commit("setRelightList", value);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
).catch(res=>{
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
let cleardata = ()=>{
|
|
|
|
|
productImgData.generateList = []
|
|
|
|
|
selectList.value = {}
|
|
|
|
|
// props.productimgMenu = productimgMenuList.value[0]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let fileUploadChange = (data: any)=> {
|
|
|
|
|
let file = data.file;
|
|
|
|
|
let bor = true
|
|
|
|
|
if (file.status === "done") {
|
|
|
|
|
let res = JSON.parse(file.xhr.response);
|
|
|
|
|
if(res.errCode == 0){
|
|
|
|
|
file.imgUrl = res.data.url;
|
|
|
|
|
file.id = res.data.id
|
|
|
|
|
file.isChecked = true
|
|
|
|
|
file.type = 'ProductElement'
|
|
|
|
|
// if(props.productimgMenu.value == 'Relight'){
|
|
|
|
|
// file.type = "ToProductImage"
|
|
|
|
|
// }
|
|
|
|
|
productImgData.fileList[props.productimgMenu.value].filter((v: any) => v.status === "done");
|
|
|
|
|
}else{
|
|
|
|
|
bor = false
|
|
|
|
|
}
|
|
|
|
|
// this.showFileList = productImgData.fileList
|
|
|
|
|
} else if (file.status === "error") {
|
|
|
|
|
bor = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
let beforeUpload = (file: any)=>{
|
|
|
|
|
const isJpgOrPng =
|
|
|
|
|
file.type === "image/jpeg" ||
|
|
|
|
|
file.type === "image/png" ||
|
|
|
|
|
file.type === "image/jpg" ||
|
|
|
|
|
file.type === "image/bmp";
|
|
|
|
|
if (!isJpgOrPng) {
|
|
|
|
|
message.info(useI18n().t('MoodboardUpload.jsContent3'));
|
|
|
|
|
}
|
|
|
|
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
|
|
|
|
if (!isLt2M) {
|
|
|
|
|
message.info(useI18n().t('MoodboardUpload.jsContent4'));
|
|
|
|
|
}
|
|
|
|
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
|
|
|
|
}
|
|
|
|
|
let deleteFile = (index:any)=>{
|
|
|
|
|
productImgData.fileList[props.productimgMenu.value].splice(index,1)
|
|
|
|
|
}
|
|
|
|
|
let setGenerate = (item:any)=>{
|
|
|
|
|
item.isChecked = !item.isChecked
|
|
|
|
|
}
|
|
|
|
|
let likeFile = (item:any,str:any,index:any) =>{
|
|
|
|
|
let url
|
|
|
|
|
let data = {
|
|
|
|
|
toProductImageResultId:[item.id]
|
|
|
|
|
}
|
|
|
|
|
if(str == 'like'){
|
|
|
|
|
url = Https.httpUrls.productImageLike
|
|
|
|
|
}else{
|
|
|
|
|
url = Https.httpUrls.productImageUnLike
|
|
|
|
|
}
|
|
|
|
|
Https.axiosPost(url, data).then(
|
|
|
|
|
(rv) => {
|
|
|
|
|
if(str == 'like'){
|
|
|
|
|
let value = {
|
|
|
|
|
list:[item],
|
|
|
|
|
str:'add',
|
|
|
|
|
index:-1,
|
|
|
|
|
}
|
|
|
|
|
if(props.productimgMenu.value == 'ToProductImage'){
|
|
|
|
|
store.commit("setToProductImage", value);
|
|
|
|
|
}else{
|
|
|
|
|
store.commit("setRelightList", value);
|
|
|
|
|
}
|
|
|
|
|
productImgData.generateList.splice(index,1)
|
|
|
|
|
}else{
|
|
|
|
|
let value = {
|
|
|
|
|
list:[item],
|
|
|
|
|
str:'splice',
|
|
|
|
|
index:index,
|
|
|
|
|
}
|
|
|
|
|
productImgData.generateList.push(item)
|
|
|
|
|
if(props.productimgMenu.value == 'ToProductImage'){
|
|
|
|
|
store.commit("setToProductImage", value);
|
|
|
|
|
}else{
|
|
|
|
|
store.commit("setRelightList", value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
).catch(res=>{
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
let remPrductimgTime:any = null
|
|
|
|
|
let prductimgTime:any = null
|
|
|
|
|
let getPrductimg = ()=>{
|
|
|
|
|
if(productImgData.isProductimg) return
|
|
|
|
|
clearInterval(remPrductimgTime)
|
|
|
|
|
let selectArr:any = []
|
|
|
|
|
let obj = {
|
|
|
|
|
"createTime": "",
|
|
|
|
|
"elementId": 0,
|
|
|
|
|
"elementType": "",
|
|
|
|
|
"id": 0,
|
|
|
|
|
"isLike": 0,
|
|
|
|
|
"taskId": "",
|
|
|
|
|
"toProductImageRecordId": 0,
|
|
|
|
|
"url": "",
|
|
|
|
|
}
|
|
|
|
|
if(productImgData.fileList[props.productimgMenu.value]){
|
|
|
|
|
productImgData.fileList[props.productimgMenu.value].forEach((item:any)=>{
|
|
|
|
|
if(item.isChecked){
|
|
|
|
|
obj.elementId = item.id
|
|
|
|
|
obj.elementType = item.type
|
|
|
|
|
selectArr.push(JSON.parse(JSON.stringify(obj)))
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
if(selectList.value[props.productimgMenu.value]){
|
|
|
|
|
selectList.value[props.productimgMenu.value].forEach((item:any)=>{
|
|
|
|
|
if(item.isChecked){
|
|
|
|
|
obj.elementId = item.designOutfitId
|
|
|
|
|
obj.elementType = 'DesignOutfit'
|
|
|
|
|
if(props.productimgMenu.value == 'Relight'){
|
|
|
|
|
obj.elementId = item.id
|
|
|
|
|
obj.elementType = 'ToProductImage'
|
|
|
|
|
}
|
|
|
|
|
selectArr.push(JSON.parse(JSON.stringify(obj)))
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(selectArr.length == 0) {
|
|
|
|
|
message.info(t('ProductImg.jsContent2'))
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let imageStrength = productImgData.similarity == 100? 95 :productImgData.similarity
|
|
|
|
|
let data:any ={
|
|
|
|
|
prompt:productImgData.searchName[props.productimgMenu.value],
|
|
|
|
|
toProductImageVOList:selectArr,
|
|
|
|
|
// userLikeGroupId:upload.value.userlikeGroupId,
|
|
|
|
|
projectId:productImgData.selectObject.id,
|
|
|
|
|
direction:RelightDirection.value,
|
|
|
|
|
brightenValue:productImgData.brightenValue,
|
|
|
|
|
imageStrength:(100 - imageStrength)/100,
|
|
|
|
|
}
|
|
|
|
|
productImgData.isProductimg = true
|
|
|
|
|
remPrductimgTime = setTimeout(()=>{
|
|
|
|
|
productImgData.remProductimg = true
|
|
|
|
|
},10000)
|
|
|
|
|
let url = Https.httpUrls.toProduct
|
|
|
|
|
if(props.productimgMenu.value == 'Relight'){
|
|
|
|
|
url = Https.httpUrls.relight
|
|
|
|
|
}
|
|
|
|
|
productImgData.isShowMark = true
|
|
|
|
|
Https.axiosPost(url, data).then(
|
|
|
|
|
(rv) => {
|
|
|
|
|
productImgData.isShowMark = false
|
|
|
|
|
let arr:any = []
|
|
|
|
|
rv.forEach((item:any)=>{
|
|
|
|
|
arr.push(item.taskId)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
productImgData.generateList.unshift(...rv)
|
|
|
|
|
setPrductimg(arr)
|
|
|
|
|
}
|
|
|
|
|
).catch(res=>{
|
|
|
|
|
productImgData.isShowMark = false
|
|
|
|
|
productImgData.isProductimg = false
|
|
|
|
|
clearInterval(remPrductimgTime)
|
|
|
|
|
productImgData.remProductimg= false
|
|
|
|
|
if(res.errCode === 2){
|
|
|
|
|
Modal.confirm({
|
|
|
|
|
title: res.errMsg,
|
|
|
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
|
|
|
okText: 'Yes',
|
|
|
|
|
cancelText: 'No',
|
|
|
|
|
mask:false,
|
|
|
|
|
zIndex:99999,
|
|
|
|
|
centered:true,
|
|
|
|
|
onOk() {
|
|
|
|
|
let UpgradePlan:any = productImgData.UpgradePlan
|
|
|
|
|
UpgradePlan.init()
|
|
|
|
|
},
|
|
|
|
|
onCancel(){
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
let generateProceedList:any = []
|
|
|
|
|
let setPrductimg = (dataList:any)=>{
|
|
|
|
|
let data = dataList
|
|
|
|
|
let dataNum = dataList.length
|
|
|
|
|
let state = true
|
|
|
|
|
let url = Https.httpUrls.toProductImageResult
|
|
|
|
|
if(props.productimgMenu.value == 'Relight'){
|
|
|
|
|
url = Https.httpUrls.relightResult
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
prductimgTime = setInterval(()=>{
|
|
|
|
|
if(!state)return
|
|
|
|
|
state = false
|
|
|
|
|
Https.axiosPost(url, data).then(
|
|
|
|
|
(rv) => {
|
|
|
|
|
state = true
|
|
|
|
|
if(productImgData.isProductimg){//防止取消后有正在执行的获取状态
|
|
|
|
|
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
|
|
|
|
|
rv.forEach((element:any) => {
|
|
|
|
|
if(element.status == 'Success'){
|
|
|
|
|
element.imgUrl = element.url
|
|
|
|
|
// if(!productImgData.generateList[props.productimgMenu.value]){
|
|
|
|
|
// productImgData.generateList[props.productimgMenu.value] = []
|
|
|
|
|
// }
|
|
|
|
|
let index = productImgData.generateList.findIndex((obj:any) => obj.taskId === element.taskId);
|
|
|
|
|
productImgData.generateList[index] = element
|
|
|
|
|
// productImgData.generateList[props.productimgMenu.value].unshift(element)
|
|
|
|
|
}else if(element.status == 'Fail'){
|
|
|
|
|
let index = productImgData.generateList.findIndex((obj:any) => obj.taskId === element.taskId);
|
|
|
|
|
productImgData.generateList.splice(index,1)
|
|
|
|
|
}
|
|
|
|
|
data = data.filter((item:any) => item !== element.taskId);
|
|
|
|
|
});
|
|
|
|
|
generateProceedList = data
|
|
|
|
|
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
|
|
|
|
|
// if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
|
|
|
|
|
// }
|
|
|
|
|
store.dispatch('getCredits')
|
|
|
|
|
clearInterval(prductimgTime)
|
|
|
|
|
clearInterval(remPrductimgTime)
|
|
|
|
|
productImgData.remProductimg = false
|
|
|
|
|
productImgData.isProductimg = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
).catch(res=>{
|
|
|
|
|
productImgData.generateList.filter((item:any)=>item.status == 'Success')
|
|
|
|
|
clearInterval(prductimgTime)
|
|
|
|
|
clearInterval(remPrductimgTime)
|
|
|
|
|
productImgData.isProductimg = false
|
|
|
|
|
productImgData.remProductimg= false
|
|
|
|
|
});
|
|
|
|
|
},1000)
|
|
|
|
|
}
|
|
|
|
|
let removeProductimg = ()=>{
|
|
|
|
|
productImgData.isProductimg = false
|
|
|
|
|
productImgData.remProductimg= false
|
|
|
|
|
clearInterval(prductimgTime)
|
|
|
|
|
if(generateProceedList){
|
|
|
|
|
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
|
|
|
|
|
let str = generateProceedList.join(',')
|
|
|
|
|
let data = {
|
|
|
|
|
uniqueId:str,userId:userDetail.value.userId,
|
|
|
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
|
|
|
type:props.productimgMenu.value,
|
|
|
|
|
}
|
|
|
|
|
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
|
|
|
|
(rv) => {
|
|
|
|
|
generateProceedList = []
|
|
|
|
|
productImgData.generateList = productImgData.generateList.filter((item:any)=>item.status == 'Success')
|
|
|
|
|
}
|
|
|
|
|
).catch(res=>{
|
|
|
|
|
productImgData.generateList = productImgData.generateList.filter((item:any)=>item.status == 'Success')
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
let scaleImage = ref()
|
|
|
|
|
let setScaleImage = (arr:any,index:any,isLike:any)=>{
|
|
|
|
|
arr.forEach((item:any)=>{
|
|
|
|
|
item.imgUrl = item.url
|
|
|
|
|
})
|
|
|
|
|
scaleImage.value.isProductimg = isLike
|
|
|
|
|
// scaleImage.value.isProductimg = false
|
|
|
|
|
scaleImage.value.init(arr,index)
|
|
|
|
|
scaleImage.value.isLike = false
|
|
|
|
|
scaleImage.value.productimgSearchName = productImgData.searchName[props.productimgMenu.value]
|
|
|
|
|
scaleImage.value.productimgSimilarity = productImgData.similarity
|
|
|
|
|
scaleImage.value.productimgBrightenValue = productImgData.brightenValue
|
|
|
|
|
scaleImage.value.productimgRelightDirection = RelightDirection.value
|
|
|
|
|
scaleImage.value.isComparison = true
|
|
|
|
|
}
|
|
|
|
|
let generalIsMenuShow:any = {}
|
|
|
|
|
let setMenuShow = (item:any)=>{
|
|
|
|
|
item.menuShow = true
|
|
|
|
|
generalIsMenuShow = item
|
|
|
|
|
document.addEventListener('click',removeMenuShow)
|
|
|
|
|
}
|
|
|
|
|
let setMenu=(menuItem:any,item:any)=>{
|
|
|
|
|
// props.productimgMenu = menuItem
|
|
|
|
|
// if(!selectList.value[props.productimgMenu.value]){
|
|
|
|
|
// selectList.value[props.productimgMenu.value] = []
|
|
|
|
|
// }
|
|
|
|
|
// selectList.value[props.productimgMenu.value].forEach((item:any) => {
|
|
|
|
|
// item.isChecked = false
|
|
|
|
|
// });
|
|
|
|
|
// if(selectList.value[menuItem.value].indexOf(item) == -1){
|
|
|
|
|
// item.isChecked = true
|
|
|
|
|
// selectList.value[menuItem.value].push(item)
|
|
|
|
|
// }
|
|
|
|
|
// generalIsMenuShow.menuShow = false
|
|
|
|
|
}
|
|
|
|
|
let removeMenuShow = ()=>{
|
|
|
|
|
generalIsMenuShow.menuShow = false
|
|
|
|
|
generalIsMenuShow = {}
|
|
|
|
|
document.removeEventListener('click',removeMenuShow)
|
|
|
|
|
}
|
|
|
|
|
let setSimilarity = (num:any)=>{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//超分
|
|
|
|
|
let setTask = (data:any)=>{
|
|
|
|
|
emit('setTask',data)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const setLikeZoom = (item:any,str:string,index:number,list:List) =>{
|
|
|
|
|
if(str == 'zoom'){
|
|
|
|
|
setScaleImage(list,index,true)
|
|
|
|
|
}else{
|
|
|
|
|
likeFile(item,str,index)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const selectSetBtn = (id:any,str:string)=>{
|
|
|
|
|
productImgData.likeList[props.productimgMenu.value].forEach((item:any,index:number)=>{
|
|
|
|
|
if(item.id == id){
|
|
|
|
|
let selectStr = ''
|
|
|
|
|
str == 'zoom'?selectStr = 'zoom':selectStr ='noLike'
|
|
|
|
|
setLikeZoom(item,selectStr,index,productImgData.likeList[props.productimgMenu.value])
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const generateSetBtn = (id:any,str:string)=>{
|
2025-04-23 09:39:24 +08:00
|
|
|
console.log(str)
|
|
|
|
|
if(str == 'delete'){
|
|
|
|
|
productImgData.generateList = productImgData.generateList.filter((v:any) => v.id != id);
|
|
|
|
|
}else{
|
|
|
|
|
productImgData.generateList.forEach((item:any,index:number)=>{
|
|
|
|
|
if(item.id == id){
|
|
|
|
|
let selectStr = ''
|
|
|
|
|
str == 'zoom'?selectStr = 'zoom':selectStr ='like'
|
|
|
|
|
setLikeZoom(item,selectStr,index,productImgData.generateList)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2025-04-01 15:25:15 +08:00
|
|
|
}
|
|
|
|
|
const setItemPosition = ()=>{
|
|
|
|
|
productImgDom.generalDragLeft.setItemPosition()
|
|
|
|
|
productImgDom.generalDragRight.setItemPosition()
|
|
|
|
|
}
|
|
|
|
|
const setSize = (str:string)=>{
|
|
|
|
|
productImgData.button[str] = !productImgData.button[str]
|
|
|
|
|
nextTick(()=>{
|
|
|
|
|
setItemPosition()
|
|
|
|
|
})
|
|
|
|
|
}
|
2025-04-09 14:09:19 +08:00
|
|
|
const ifMaximumLength = (event:any)=>{
|
|
|
|
|
let textarea = event.target as HTMLTextAreaElement;
|
|
|
|
|
const scrollTop = textarea.scrollTop;
|
|
|
|
|
// 2. 计算单行高度
|
|
|
|
|
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
|
|
|
|
|
// 3. 重置高度为1行
|
|
|
|
|
textarea.style.height = lineHeight + 'px';
|
|
|
|
|
// 4. 计算实际需要的高度
|
|
|
|
|
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
|
|
|
|
|
textarea.style.height = newHeight + 'px';
|
|
|
|
|
textarea.scrollTop = scrollTop;
|
|
|
|
|
}
|
2025-04-01 15:25:15 +08:00
|
|
|
return {
|
|
|
|
|
upload,
|
|
|
|
|
driver__,
|
|
|
|
|
openSetData,
|
|
|
|
|
...toRefs(productImgData),
|
|
|
|
|
...toRefs(productImgDom),
|
|
|
|
|
productimgMenuList,
|
|
|
|
|
|
|
|
|
|
RelightDirectionList,
|
|
|
|
|
RelightDirection,
|
|
|
|
|
|
|
|
|
|
selectList,
|
|
|
|
|
setproduct,
|
|
|
|
|
fileUploadChange,
|
|
|
|
|
beforeUpload,
|
|
|
|
|
deleteFile,
|
|
|
|
|
setGenerate,
|
|
|
|
|
likeFile,
|
|
|
|
|
getPrductimg,
|
|
|
|
|
removeProductimg,
|
|
|
|
|
scaleImage,
|
|
|
|
|
setScaleImage,
|
|
|
|
|
setMenu,
|
|
|
|
|
setMenuShow,
|
|
|
|
|
setSimilarity,
|
|
|
|
|
setTask,
|
|
|
|
|
selectSetBtn,
|
|
|
|
|
generateSetBtn,
|
|
|
|
|
setItemPosition,
|
|
|
|
|
setSize,
|
2025-04-09 14:09:19 +08:00
|
|
|
ifMaximumLength,
|
2025-04-01 15:25:15 +08:00
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
directives:{
|
2025-04-09 14:09:19 +08:00
|
|
|
mousewheel:{
|
|
|
|
|
mounted (el) {
|
|
|
|
|
el.addEventListener('wheel',(e:WheelEvent)=>{
|
|
|
|
|
let num = 0
|
|
|
|
|
if(e.deltaY > 0){
|
|
|
|
|
num = 25
|
|
|
|
|
}else{
|
|
|
|
|
num = -25
|
|
|
|
|
}
|
|
|
|
|
el.scrollBy(num, 0);
|
|
|
|
|
},{ passive: true })
|
|
|
|
|
}
|
|
|
|
|
},
|
2025-04-01 15:25:15 +08:00
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
indicator: h(LoadingOutlined, {
|
|
|
|
|
style: {
|
|
|
|
|
fontSize: "2.4rem",
|
|
|
|
|
},
|
|
|
|
|
spin: true,
|
|
|
|
|
}),
|
|
|
|
|
// moodTemplateId: "", //模板id
|
|
|
|
|
token: "",
|
|
|
|
|
uploadUrl: "",
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.token = getCookie("token") || "";
|
|
|
|
|
this.uploadUrl = getUploadUrl();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// init(list:any,index:any,dialogueIndex:any){
|
|
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
// cancelDsign(){
|
|
|
|
|
// this.productImg = false
|
|
|
|
|
// // this.productImgList = []
|
|
|
|
|
// // this.productImgIndex = 0
|
|
|
|
|
// },
|
|
|
|
|
// download(){
|
|
|
|
|
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
|
|
|
|
|
// },
|
|
|
|
|
// setScaleImageIndex(index:any){
|
|
|
|
|
// // this.productImgIndex = index
|
|
|
|
|
// // console.log(this.productImgIndex);
|
|
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
// LikeFile(item:any,str:string){
|
|
|
|
|
// let parent:any = this.$parent
|
|
|
|
|
// parent.likeFile(item,str)
|
|
|
|
|
// },
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.toProduct{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.productImg_content{
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
.modal_title_text{
|
|
|
|
|
height: 4rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.productImg_content_bottom{
|
2025-04-09 14:09:19 +08:00
|
|
|
height: 100%;
|
2025-04-01 15:25:15 +08:00
|
|
|
--border-color: #c4c4c4;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
flex: 1;
|
|
|
|
|
.upload_item{
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.productImg_content_item_title{
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 1.6rem;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
&.productImg_content_item_title_menu{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
:deep(.generalMenu_printModel){
|
|
|
|
|
margin: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
> div,> ul{
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.productImg_content_item_title_menubtn{
|
|
|
|
|
font-size: 1.6rem;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.productImg_content_item_title_similarity{
|
|
|
|
|
// margin-bottom: 8rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.productImg_content_item_intro{
|
|
|
|
|
font-size: 1.4rem;
|
|
|
|
|
}
|
|
|
|
|
.productImg_content_item_imgBox{
|
|
|
|
|
display: flex;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
width: auto;
|
|
|
|
|
margin-bottom: 2rem;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
|
.content_item_imgBox_itemImg{
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-right: 1rem;
|
|
|
|
|
position: relative;
|
2025-04-09 14:09:19 +08:00
|
|
|
height: 36rem;
|
|
|
|
|
max-height: 100%;
|
2025-04-01 15:25:15 +08:00
|
|
|
position: relative;
|
|
|
|
|
img{
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
opacity: .5;
|
|
|
|
|
&.active{
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-checkbox-wrapper{
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
&.content_item_imgBox_itemImg:hover{
|
|
|
|
|
.content_item_imgBox_itemImg_delete{
|
|
|
|
|
display: block;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.content_item_imgBox_itemImg_delete{
|
|
|
|
|
display: none;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: rgba(0,0,0,.2);
|
|
|
|
|
position: absolute;
|
|
|
|
|
i{
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%,-50%);
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.content_item_imgBox_itemImg:last-child{
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.productImg_left,.productImg_right{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.productImg_content_item:last-child{
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
.productImg_left{
|
|
|
|
|
overflow-y: auto !important;
|
|
|
|
|
width: 25%;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100%;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding-right: 3.8rem;
|
2025-04-09 14:09:19 +08:00
|
|
|
width: 39rem;
|
2025-04-01 15:25:15 +08:00
|
|
|
&.active{
|
|
|
|
|
width: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.upload_file_item{
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-right: 1rem;
|
|
|
|
|
height: 14rem !important;
|
|
|
|
|
width: 9rem;
|
|
|
|
|
border: none !important;
|
|
|
|
|
&.upload_file_item:last-child{
|
2025-04-09 14:09:19 +08:00
|
|
|
width: 9rem;
|
2025-04-01 15:25:15 +08:00
|
|
|
margin-right: 0rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// width: 45%;
|
|
|
|
|
.productImg_content_item_imgBox{
|
2025-04-09 14:09:19 +08:00
|
|
|
flex-shrink: 0;
|
|
|
|
|
margin-bottom: 3rem;
|
2025-04-01 15:25:15 +08:00
|
|
|
.content_item_imgBox_itemImg{
|
|
|
|
|
width: auto;
|
2025-04-09 14:09:19 +08:00
|
|
|
max-width: 20rem;
|
2025-04-01 15:25:15 +08:00
|
|
|
flex-shrink: 0;
|
|
|
|
|
img{
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.upload_file_item{
|
|
|
|
|
flex-shrink: 0;
|
2025-04-09 14:09:19 +08:00
|
|
|
width: 36rem;
|
2025-04-01 15:25:15 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.productImg_content_item_generate{
|
|
|
|
|
--width:100%;
|
|
|
|
|
padding-bottom: 1rem;
|
2025-04-09 14:09:19 +08:00
|
|
|
// margin-top: auto;
|
2025-04-01 15:25:15 +08:00
|
|
|
}
|
|
|
|
|
.productImg_content_item_similarity{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
2025-04-09 14:09:19 +08:00
|
|
|
padding-bottom: 3rem;
|
2025-04-01 15:25:15 +08:00
|
|
|
.system_silder{
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
width: 30%;
|
|
|
|
|
width: 5rem;
|
|
|
|
|
height: 5rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 1.8rem;
|
2025-04-09 14:09:19 +08:00
|
|
|
margin-left: 2rem;
|
2025-04-01 15:25:15 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.productImg_content_item_Direction{
|
|
|
|
|
padding-bottom: 1rem;
|
|
|
|
|
:deep(.ant-select){
|
|
|
|
|
font-size: 1.6rem;
|
|
|
|
|
.ant-select-selector::after{
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
.ant-select-selector .ant-select-selection-item{
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
.ant-select-selector{
|
|
|
|
|
height: auto;
|
|
|
|
|
padding: 1rem 1rem;
|
|
|
|
|
box-shadow: none !important;
|
|
|
|
|
border: calc(0.1rem* 1.2) solid #F1F1F1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.productImg_content_item_generate_btn{
|
|
|
|
|
width: 100%;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
.input_box{
|
|
|
|
|
flex: 0;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
.started_btn{
|
|
|
|
|
// width: 13rem;
|
|
|
|
|
// text-align: center;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.productImg_right{
|
|
|
|
|
height: 100%;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex: 1;
|
|
|
|
|
&.active{
|
|
|
|
|
flex: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.productImg_right_item_box{
|
|
|
|
|
// height: 40%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
position: relative;
|
|
|
|
|
&.right{
|
|
|
|
|
padding-left: 2.3rem;
|
|
|
|
|
}
|
|
|
|
|
> .content{
|
|
|
|
|
background: #f6f6fa;
|
|
|
|
|
border-radius: 2rem;
|
|
|
|
|
padding: 1rem 1.5rem;
|
|
|
|
|
border-radius: 2rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
> .btnLeft,> .btnRight{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 4rem;
|
|
|
|
|
height: 7rem;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border: 2px solid;
|
|
|
|
|
border-right: none;
|
|
|
|
|
border-radius: 2rem 0 0 2rem;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-100%,-50%);
|
|
|
|
|
left: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
>span{
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
&.active{
|
|
|
|
|
transform: rotate(270deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
> .btnRight{
|
|
|
|
|
left: calc(100% + 4rem) ;
|
|
|
|
|
transform: translate(-100%,-50%) rotate(180deg);
|
|
|
|
|
}
|
|
|
|
|
.content_header_left {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 2rem;
|
|
|
|
|
.content_header_des {
|
|
|
|
|
font-size: 1.6rem;
|
|
|
|
|
color: #000000;
|
|
|
|
|
margin-left: 1rem;
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.mark_loading{
|
|
|
|
|
position: absolute
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.productImg_right_titleBtn{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
